emsfront/src/views/ems/site/sblb/PointTable.vue

<!--电位展示图表-->
<template>
  <div>
    <el-dialog
        v-loading="loading"
        :close-on-click-modal="false"
        :visible.sync="show"
        append-to-body
        class="ems-dialog"
        destroy-on-close
        lock-scroll
        show-close
        :title="dataType === 'point' ? '点位清单' : '报警点位'"
        width="950px"
    >
      <el-form :inline="true" label-width="100px">
        <el-form-item label="点位名称">
          <el-input
              v-model="form.dataPointName"
              clearable
              placeholder="请输入点位名称"
              style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="点位">
          <el-input
              v-model="form.dataPoint"
              clearable
              placeholder="请输入点位"
              style="width: 150px"
          ></el-input>
        </el-form-item>
        <!--        <el-form-item label="modbus ip">-->
        <!--          <el-input-->
        <!--            v-model="form.ipAddress"-->
        <!--            clearable-->
        <!--            placeholder="请输入ip"-->
        <!--            style="width: 150px"-->
        <!--          ></el-input>-->
        <!--        </el-form-item>-->
        <br>
        <el-form-item label="最小值">
          <el-input
              v-model="form.lower"
              clearable
              placeholder="请输入最小值"
              style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="最大值">
          <el-input
              v-model="form.upper"
              clearable
              placeholder="请输入最大值"
              style="width: 150px"
          ></el-input>
        </el-form-item>
        <!--        <el-form-item label="modbus 端口">-->
        <!--          <el-input-->
        <!--            v-model="form.ipPort"-->
        <!--            clearable-->
        <!--            placeholder="请输入端口"-->
        <!--            style="width: 150px"-->
        <!--          ></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item style="margin-left: 20px">
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-table
          :data="tableData"
          class="common-table"
          max-height="400px"
          stripe
          style="width: 100%"
          :default-sort="defaultSort"
          @sort-change="handleSortChange"
      >
        <el-table-column label="数据点位" prop="dataPoint"></el-table-column>
        <el-table-column
            label="数据点位名称"
            prop="pointName"
        ></el-table-column>
        <!--        <el-table-column label="modbus地址">-->
        <!--          <template slot-scope="scope">-->
        <!--            <span>{{-->
        <!--              `${scope.row.ipAddress || ""} ${scope.row.ipPort || ""}`-->
        <!--            }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="寄存器地址" prop="寄存器地址"></el-table-column>
        <el-table-column
            label="最新值"
            prop="pointValue"
            align="right"
            sortable="custom"
        >
          <template slot-scope="scope">
            <span class="pointer" @click="showChart(scope.row)">{{
                scope.row.pointValue
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="dataUnit"></el-table-column>
        <el-table-column
            label="更新时间"
            min-width="160px"
            prop="updateTime"
            sortable="custom"
        >
        </el-table-column>
      </el-table>
      <el-pagination
          v-show="tableData.length > 0"
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :pager-count="5"
          :total="totalSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          small
          style="margin-top: 15px; text-align: center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-dialog>
    <point-chart ref="pointChart" :site-id="siteId"/>
  </div>
</template>
<script>
import {getDevicePointList} from "@/api/ems/site";
import pointChart from "@/views/ems/dzjk/sbjk/PointChart.vue";

export default {
  components: {pointChart},
  watch: {
    show(val) {
      if (!val) {
        this.tableData = [];
        this.deviceId = "";
        this.parentId = "";
        this.siteId = "";
        this.pageSize = 10;
        this.pageNum = 1;
        this.totalSize = 0;
        this.dataType = '';
        this.form = {
          sortMethod: "desc", //升序不传或者asc、降序desc）
          sortData: this.defaultSort.prop,
          dataPointName: "", //点位名称
          dataPoint: "", //点位名称
          lower: "", //
          upper: "", //
          // ipAddress: "",
          // ipPort: "",
        };
        this.loading = false;
      }
    },
  },
  computed: {
    isDtdc() {
      return this.deviceCategory === "BATTERY";
    },
  },
  data() {
    return {
      // 默认排序
      defaultSort: {prop: "updateTime", order: "descending"},
      show: false,
      loading: false,
      dataType: '',//展示的数据类型 point点位/alarmPoint报警点位
      form: {
        sortData: "updateTime", //最新值升序不传或者asc、降序desc）
        sortMethod: "desc", //升序不传或者asc、降序desc）
        dataPointName: "", //点位名称
        dataPoint: "", //点位名称
        lower: "", //
        upper: "", //
        // ipAddress: "",
        // ipPort: "",
      },
      deviceCategory: "",
      deviceId: "",
      parentId: "",
      siteId: "",
      tableData: [],
      pageSize: 10, //分页栏当前每个数据总数
      pageNum: 1, //分页栏当前页数
      totalSize: 0, //table表格数据总数
    };
  },
  methods: {
    showChart({pointName}) {
      if (pointName) {
        const {deviceCategory, deviceId} = this;
        if (this.isDtdc)
          this.$refs.pointChart.showChart({
            pointName,
            deviceCategory,
            deviceId: this.parentId,
            child: [deviceId],
          });
        else
          this.$refs.pointChart.showChart({
            pointName,
            deviceCategory,
            deviceId,
          });
      }
    },
    handleSortChange(column) {
      this.form.sortData = column.prop;
      this.form.sortMethod = column.order === "descending" ? "desc" : "asc";
      console.log("切换排序方式", column, this.form);
      this.getData()
    },
    search() {
      this.pageNum = 1;
      this.getData()
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$nextTick(() => {
        this.getData()
      });
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.$nextTick(() => {
        this.getData()
      });
    },
    showTable({deviceCategory, siteId, deviceId, parentId = ""}, dataType) {
      this.dataType = dataType;
      this.deviceCategory = deviceCategory;
      this.siteId = siteId;
      this.deviceId = deviceId;
      this.parentId = deviceCategory === "BATTERY" ? parentId : ""; //只有单体电池需要这个值
      this.show = true;
      this.getData()
    },
    getData() {
      const {
        siteId,
        deviceId,
        deviceCategory,
        parentId,
        pageNum,
        pageSize,
        form: {
          sortData,
          sortMethod,
          dataPointName,
          dataPoint,
          lower,
          upper,
          // ipAddress,
          // ipPort,
        },
      } = this;
      const params = {
        siteId,
        deviceId,
        deviceCategory,
        parentId,
        pageNum,
        pageSize,
        sortData,
        sortMethod,
        dataPointName,
        dataPoint,
        lower,
        upper,
        // ipAddress: '',
        // ipPort: '',
      }
      params.isAlarm = this.dataType === 'point' ? 0 : 1
      this.loading = true;
      getDevicePointList(params)
          .then((response) => {
            this.tableData = response?.rows || [];
            this.totalSize = response?.total || 0;
          })
          .finally(() => {
            this.loading = false;
          });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .card-title .el-radio {
    line-height: 40px;
  }
}
</style>