emsfront/src/views/ems/dzjk/home/index.vue

<template>
  <div v-loading="loading">
    <el-row :gutter="15" style="background:#fff;">
      <el-col :xs="24" :sm="24" :lg="6">
        <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
          <div slot="header">
            <span class="card-title">静态信息</span>
          </div>
          <div style="box-sizing: border-box; height: 250px;padding:20px 15px;" >
            <el-descriptions class="single-zd-info-container" :column="1" >
              <el-descriptions-item size="mini" v-for="(item,index) in singleZdInfo" :key="index+'singleZdInfo'" :label="item.title">{{info[item.attr] | formatNumber }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
          <div slot="header">
            <span class="card-title">总累计运行数据</span>
          </div>
          <div  style="box-sizing: border-box; height: 250px;padding:20px 15px;" >
            <el-row :gutter="20">
              <el-col :span="12" v-for="(item,index) in sjglData" :key="index+'sjglData'" class="sjgl-data">
                  <div class="sjgl-title">{{item.title}}</div>
                  <div class="sjgl-value">{{item.value | formatNumber}}</div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="10">
        <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
          <div slot="header">
            <span class="card-title">当前报警</span>
<!--            <el-button style="float: right; padding: 3px 0" type="text" size="small">通讯状态：<span style="color:red">超时</span></el-button>-->
          </div>
          <div class="ssgj-container">
            <el-table
              class="common-table"
              :data="tableData"
              height="100%"
              stripe
              style="width: 100%">
              <el-table-column
                prop="deviceName"
                label="名称">
              </el-table-column>
              <el-table-column
                label="状态"
                >
                  <template slot-scope="scope">
                    <span :class="{'circle warning-status' : scope.row.status !== 0}">{{ $store.state.ems.warnOptions[scope.row.status]}}</span>
                  </template>
              </el-table-column>
              <el-table-column
                class-name="alarm-content"
                prop="alarmContent"
                show-overflow-tooltip
                label="告警内容">
              </el-table-column>
              <el-table-column
                label="工单"
                fixed="right"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-button type="text" size="mini"  v-if="scope.row.ticketNo" @click="toTicket">已生成工单(工单号:{{scope.row.ticketNo}})</el-button>
                  <el-button type="primary" size="mini" v-else @click="toTicket">生成工单</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15" style="background:#fff;">
      <el-col :xs="24" :sm="24" :lg="12">
        <week-chart ref="weekChart"/>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <active-chart ref="activeChart"/>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
import {getDzjkHomeView} from '@/api/ems/dzjk'
// import NllzChart from "./NllzChart.vue";
import WeekChart from "./WeekChart.vue";
import ActiveChart from "./ActiveChart.vue";
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
export default {
  name:'DzjkSbjkHome',
  computed: {
    loader() {
      return loader
    }
  },
  components: {WeekChart,ActiveChart},
  mixins: [getQuerySiteId],
  data() {
    return {
      loading:false,
      singleZdInfo:[{
        title:'电站位置',
        attr:'siteAddress'
      },{
        title:'投运时间',
        attr:'runningTime'
      },{
        title:'装机功率(MW)',
        attr:'installPower'
      },{
        title:'装机容量(MW)',
        attr:'installCapacity',
      }],
      sjglData:[{
        title:'今日充电量（MWh）',
        value:'',
        attr:'dayChargedCap'
      },{
        title:'今日放电量（MWh）',
        value:'',
        attr:'dayDisChargedCap'
      },{
        title:'总充电量（MWh）',
        value:'',
        attr:'totalChargedCap'
      },{
        title:'总放电量（MWh）',
        value:'',
        attr:'totalDischargedCap'
      }],
      // todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
      tableData:[],
      info:{}
    }
  },
  methods:{
    toTicket(){
      this.$router.push({path:'/ticket'})
    },
    init(){
      this.loading = true
      getSingleSiteBaseInfo(this.siteId).then(response => {
        console.log('单个站点详情数据',response)
        this.info = response?.data || {}
      })
      getDzjkHomeView(this.siteId).then(response => {
        const data = response?.data || {}
        this.sjglData.forEach(item=>{
          item.value =data[item.attr]
        })
        this.tableData = data?.siteMonitorHomeAlarmVo || []
        // this.$refs.nllzChart.setOption(data)
        this.$refs.weekChart.setOption(data)
        this.$refs.activeChart.setOption(data)
      }).finally(() => {this.loading = false})
      
    }
  },
}
</script>

<style scoped lang="scss">
//数据概览
  .sjgl-data{
    text-align: center;
    &:nth-child(1),&:nth-child(2){
      margin-bottom:25px;
    }
    .sjgl-title{
      color: #666666;
      line-height: 14px;
    }
    .sjgl-value{
      color: rgba(51,51,51,1);
      font-size: 26px;
      line-height: 26px;
      font-weight: 500;
      margin-top: 14px;
      word-wrap: break-word;
    }
  }
  //实时告警
  .ssgj-container{
    padding:20px;
    height: 250px;
    box-sizing: border-box;
    ::v-deep{
      .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
        background:#FFF2CB ;
      }
    }
  }
</style>