设备监控点击数据查看表格

src/views/ems/dzjk/sbjk/db/index.vue

@@ -24,6 +24,7 @@
       <el-table
         class="common-table"
         :data="zbInfo.loadDataDetailInfo"
+        @cell-click="handlerCell"
         stripe
         style="width: 100%"
       >
@@ -60,6 +61,7 @@
       <el-table
         class="common-table"
         :data="cnbInfo.meteDataDetailInfo"
+        @cell-click="handlerCellCN"
         stripe
         style="width: 100%"
       >
@@ -69,16 +71,19 @@
         </el-table-column>
       </el-table>
     </el-card>
+    <point-chart ref="pointChart" :site-id="siteId"/>
   </div>
 </template>
 
 <script>
+import pointChart from "./../PointChart.vue";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import { getAmmeterDataList } from "@/api/ems/dzjk";
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 export default {
   name: "DzjkSbjkDb",
   mixins: [getQuerySiteId,intervalUpdate],
+  components:{pointChart},
   data() {
     return {
       loading: false,
@@ -87,6 +92,24 @@ export default {
     };
   },
   methods: {
+    handlerCell(row,column){
+      if(column.label !== '类别'){
+        const arr = row.category.split('')
+        arr.splice(6,0,column.label[0])
+        this.showChart(arr.join(''),'电表')
+      }
+    },
+    handlerCellCN(row,column){
+      if(column.label !== '类别'){
+        const arr = row.category.split('')
+        arr.splice(2,arr.length-2,column.label)
+        this.showChart(arr.join(''),'电表')
+      }
+    },
+    showChart(pointName,categoryName,deviceId){
+      console.log('点击查询图表',pointName,categoryName,deviceId)
+      pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
+    },
     updateData(){
       this.loading = true;
       getAmmeterDataList(this.siteId)
@@ -120,6 +143,13 @@ export default {
       color: #ffffff;
       position: relative;
     }
+    .el-table__row td{
+      &:not(:first-child){
+        .cell{
+          cursor: pointer;
+        }
+      }
+    }
   }
 }
 .zb-common-card-container{