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="点位清单"
      width="800px"
    >
      <el-form :inline="true" label-width="85px">
        <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>
        <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 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="{ order: 'descending' }"
        @sort-change="changeSort"
      >
        <el-table-column label="数据点位" prop="dataPoint"> </el-table-column>
        <el-table-column label="数据点位名称" prop="pointName">
        </el-table-column>
        <el-table-column
          label="最新值"
          prop="pointValue"
          align="right"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span
              class="pointer"
              @click="
                showChart(
                  scope.row.pointName,
                  scope.row.deviceName,
                  scope.row.deviceId
                )
              "
              >{{ scope.row.pointValue }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit"></el-table-column>
        <el-table-column label="更新时间" 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.deviceName = "";
        this.siteId = "";
        this.pageSize = 10;
        this.pageNum = 1;
        this.totalSize = 0;
        this.form = {
          valueSortMethod: "desc", //升序不传或者asc、降序desc）
          sortMethod: "desc", //升序不传或者asc、降序desc）
          dataPointName: "", //点位名称
          dataPoint: "", //点位名称
          lower: "", //
          upper: "", //
        };
        this.loading = false;
      }
    },
  },
  data() {
    return {
      show: false,
      loading: false,
      form: {
        valueSortMethod: "desc", //最新值升序不传或者asc、降序desc）
        sortMethod: "desc", //升序不传或者asc、降序desc）
        dataPointName: "", //点位名称
        dataPoint: "", //点位名称
        lower: "", //
        upper: "", //
      },
      deviceCategory: "",
      deviceName: "",
      deviceId: "",
      siteId: "",
      tableData: [],
      pageSize: 10, //分页栏当前每个数据总数
      pageNum: 1, //分页栏当前页数
      totalSize: 0, //table表格数据总数
    };
  },
  methods: {
    showChart(pointName, deviceName, deviceId) {
      console.log("点击查询图表", pointName, deviceName, deviceId);
      pointName &&
        this.$refs.pointChart.showChart({ pointName, deviceName, deviceId });
    },
    changeSort(c) {
      console.log("切换排序方式", c);
      if (c.prop === "updateTime" && c.order) {
        this.form.sortMethod = c.order === "descending" ? "desc" : "asc";
        this.getData();
      } else if (c.prop === "pointValue" && c.order) {
        this.form.valueSortMethod = c.order === "descending" ? "desc" : "asc";
        this.getData();
      }
    },
    search() {
      this.pageNum = 1;
      this.getData();
    },
    showTable({ deviceCategory, siteId, deviceId, deviceName }) {
      this.deviceCategory = deviceCategory;
      this.siteId = siteId;
      this.deviceId = deviceId;
      this.deviceName = deviceName;
      this.show = true;
      this.getData();
    },
    getData() {
      this.loading = true;
      const {
        siteId,
        deviceId,
        deviceCategory,
        pageNum,
        pageSize,
        form: {
          valueSortMethod,
          sortMethod,
          dataPointName,
          dataPoint,
          lower,
          upper,
        },
      } = this;
      getDevicePointList({
        siteId,
        deviceId,
        deviceCategory,
        pageNum,
        pageSize,
        valueSortMethod,
        sortMethod,
        dataPointName,
        dataPoint,
        lower,
        upper,
      })
        .then((response) => {
          this.tableData = response?.rows || [];
          this.totalSize = response?.total || 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$nextTick(() => {
        this.getData();
      });
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.$nextTick(() => {
        this.getData();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .card-title .el-radio {
    line-height: 40px;
  }
}
</style>