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

<template>
  <div v-loading="loading">
     <el-card
         v-for="(item,index) in list"
         :key="index+'dbList'"
         shadow="always"
         class="sbjk-card-container list"
         :class="{
        'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
        'running-card-container':item.emsCommunicationStatus === '0'
      }"
     >
       <div slot="header">
         <span class="large-title">{{ item.deviceName }}</span>
         <div class="info">
           <div>
             {{
               $store.state.ems.communicationStatusOptions[
                   item.emsCommunicationStatus
                   ]
             }}
           </div>
           <div>数据更新时间：{{ item.dataUpdateTime }}</div>
         </div>
       </div>
       <el-table
           class="common-table"
           :data="item.loadDataDetailInfo"
           @cell-click="(row,col)=>{handlerCell(item,row,col)}"
           stripe
           style="width: 100%"
       >
         <el-table-column prop="category" label="类别"> </el-table-column>
         <el-table-column prop="totalKwh" label="总/kWh"> </el-table-column>
         <el-table-column prop="peakKwh" label="尖/kWh"> </el-table-column>
         <el-table-column prop="highKwh" label="峰/kWh"> </el-table-column>
         <el-table-column prop="flatKwh" label="平/kWh"> </el-table-column>
         <el-table-column prop="valleyKwh" label="谷/kWh"> </el-table-column>
       </el-table>
     </el-card>
    <el-empty v-show="list.length<=0" :image-size="200"></el-empty>
    <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,
      list:[],
    };
  },
  methods: {
    handlerCell({deviceId,deviceName},row,column){
      if(column.label !== '类别'){
        const arr = row.category.split('')
        arr.splice(6,0,column.label[0])
        this.showChart(arr.join(''),deviceName,deviceId)
      }
    },
    showChart(pointName,categoryName,deviceId){
      console.log('点击查询图表',pointName,categoryName,deviceId)
      pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
    },
    updateData(){
      this.loading = true;
      getAmmeterDataList(this.siteId)
          .then((response) => {
            this.list = response?.data || []
          })
          .finally(() => {
            this.loading = false;
          });
    },
    init() {
      this.updateData()
      this.updateInterval(this.updateData)
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.sbjk-card-container {
  &.list:not(:last-child){
    margin-bottom: 25px;
  }
  ::v-deep {
    .el-table__row td{
      &:not(:first-child){
        .cell{
          cursor: pointer;
        }
      }
    }
  }
}

</style>