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-table
        :data="tableData"
        class="common-table"
        max-height="400px"
        stripe
        style="width: 100%;">
      <el-table-column
          label="数据点位"
          prop="dataPoint">
      </el-table-column>
      <el-table-column
          label="数据点位名称"
          prop="dataPointName">
      </el-table-column>
      <el-table-column
          label="最新值"
          prop="pointValue">
      </el-table-column>
      <el-table-column
          label="更新时间"
          prop="updateTime">
      </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.siteId=''
        this.pageSize=10
        this.pageNum=1
        this.totalSize=0
        this.loading =false
      }
    },
  },
  data(){
    return{
      show:false,
      loading:false,
      deviceCategory:'',
      siteId:'',
      tableData:[],
      pageSize:10,//分页栏当前每个数据总数
      pageNum:1,//分页栏当前页数
      totalSize:0,//table表格数据总数
    }
  },
  methods:{
    showTable({deviceCategory,siteId,deviceId}){
      this.deviceCategory =deviceCategory
      this.siteId=siteId
      this.deviceId=deviceId
      this.tableData=[]
      this.pageSize=10//分页栏当前每个数据总数
      this.pageNum=1//分页栏当前页数
      this.totalSize=0//table表格数据总数
      this.show=true
      this.getData()
    },
    getData(){
      this.loading=true
      const {siteId,deviceId,deviceCategory,pageNum,pageSize} =this
      getDevicePointList({siteId,deviceId,deviceCategory,pageNum,pageSize}).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>