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

<!--电位展示图表-->
<template>
  <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 = "{prop: 'updateTime', 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">
      </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>
</template>
<script>
import {getDevicePointList} from "@/api/ems/site";

export default {
  watch: {
    show(val) {
      if (!val) {
        this.tableData = []
        this.deviceId = ''
        this.deviceName = ''
        this.siteId = ''
        this.pageSize = 10
        this.pageNum = 1
        this.totalSize = 0
        this.form = {
          sortMethod: 'desc',//升序不传或者asc、降序desc）
          dataPointName: '',//点位名称
          dataPoint: '',//点位名称
          lower: '',//
          upper: '',//
        }
        this.loading = false
      }
    },
  },
  data() {
    return {
      show: false,
      loading: false,
      form: {
        sortMethod: 'desc',//升序不传或者asc、降序desc）
        dataPointName: '',//点位名称
        dataPoint: '',//点位名称
        lower: '',//
        upper: '',//
      },
      deviceCategory: '',
      deviceName: '',
      deviceId: '',
      siteId: '',
      tableData: [],
      pageSize: 10,//分页栏当前每个数据总数
      pageNum: 1,//分页栏当前页数
      totalSize: 0,//table表格数据总数
    }
  },
  methods: {
    changeSort(c) {
      console.log('切换排序方式', c)
      if(c.prop === "updateTime" && c.order){
        this.form.sortMethod = 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: {sortMethod, dataPointName, dataPoint, lower, upper}
      } = this
      getDevicePointList({
        siteId,
        deviceId,
        deviceCategory,
        pageNum,
        pageSize,
        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>