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

<template>
    <div v-loading="loading">
      <el-card
          v-for="(item,index) in list"
          :key="index+'ylLise'"
          class="sbjk-card-container running-card-container"
         shadow="always">
        <div slot="header">
          <span class="large-title">{{item.deviceName}}</span>
          <div class="alarm">
            <el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item)">详细</el-button>
          </div>
        </div>
        <el-row>
          <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8">
            <span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
              {{tempDataItem.title}}：{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span>
            </span>
          </el-col>
        </el-row>
      </el-card>
      <el-empty v-show="list.length<=0" :image-size="200"></el-empty>
      <point-chart ref="pointChart" :site-id="siteId"/>
      <point-table ref="pointTable"/>
    </div>
</template>


<script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getCoolingDataList} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import pointChart from "./../PointChart.vue";
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
export default {
  name:'DzjkSbjkYl',
  mixins:[getQuerySiteId,intervalUpdate],
  components:{pointChart,PointTable},
  data() {
    return {
      loading:false,
      list:[],
      tempData:[
        {title:'供水温度',attr:'gsTemp',unit:'&#8451;'},
        {title:'回水温度',attr:'hsTemp',unit:'&#8451;'},
        {title:'供水压力',attr:'gsPressure',unit:'bar'},
        {title:'回水压力',attr:'hsPressure',unit:'bar'},
        {title:'冷源水温度',attr:'lysTemp',unit:'&#8451;'},
        {title:'VB01开度',attr:'vb01Kd',unit:'%'},
        {title:'VB02开度',attr:'vb02Kd',unit:'%'},
      ]
    }
  },
  methods:{
    // 查看设备电位表格
    pointDetail(row){
      const {deviceId} = row
      this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'COOLING'})
    },
    showChart(pointName,deviceId){
      pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'COOLING',deviceId})
    },
    updateData(){
      this.loading = true
      getCoolingDataList(this.siteId).then(response => {
        this.list =  JSON.parse(JSON.stringify(response?.data || []));
      }).finally(() => {this.loading = false})
    },
    init(){
      this.updateData()
      this.updateInterval(this.updateData)
    }
  },
  mounted(){

  }
}
</script>

<style scoped lang="scss">
.sbjk-card-container{
  &:not(:last-child){
    margin-bottom: 25px;
  }
  .el-row{
    background-color: #ffffff;
    border:1px solid #eeeeee;
    font-size: 14px;
    line-height: 16px;
    color: #333333;
    .el-col{
      padding:12px 0;
      text-align: center;
      position: relative;
    }
    .el-col{
      border-bottom: 1px solid #eeeeee;
    }
    .el-col:not(:nth-child(3n)){
      border-right: 1px solid #eeeeee;
    }
  }
}
</style>