设备列表查看电位表格

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

@@ -0,0 +1,114 @@
+<!--电位展示图表-->
+<template>
+  <el-dialog
+      v-loading="loading"
+      :visible.sync="show"
+      title="点位列表"
+      :close-on-click-modal="false"
+      show-close
+      destroy-on-close
+      lock-scroll
+      append-to-body
+      width="600px"
+      class="ems-dialog"
+  >
+    <el-table
+        class="common-table"
+        :data="tableData"
+        stripe
+        max-height="600px"
+        style="width: 100%;">
+      <el-table-column
+          prop="dataPoint"
+          label="数据点位">
+      </el-table-column>
+      <el-table-column
+          prop="dataPointName"
+          label="数据点位名称">
+      </el-table-column>
+    </el-table>
+    <el-pagination
+        v-show="tableData.length>0"
+        small
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :pager-count="5"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalSize"
+        style="margin-top:15px;text-align: center"
+    >
+    </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}){
+      this.deviceCategory =deviceCategory
+      this.siteId=siteId
+      this.show=true
+      this.getData()
+    },
+    getData(){
+      this.loading=true
+      const {siteId,deviceCategory,pageNum,pageSize} =this
+      getDevicePointList({siteId,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 scoped lang="scss">
+::v-deep {
+  .card-title .el-radio{
+    line-height: 40px;
+  }
+}
+
+</style>