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

<template>
  <div v-loading="loading">
    <el-row style="background:#fff;" class="row-container" :gutter="15">
      <el-col v-if="tableData.length>0" :xs="24" :sm="24" :lg="24">
        <alarm-table :tableData="tableData"/>
      </el-col>
      <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">{{runningInfo[item.attr] | 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>
          </div>
          <div  style="box-sizing: border-box; height: 250px;padding:20px 15px;" >

          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="24">
        <week-chart ref="weekChart"/>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="24">
        <active-chart ref="activeChart"/>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
import {getDzjkHomeView} from '@/api/ems/dzjk'
import WeekChart from "./WeekChart.vue";
import ActiveChart from "./ActiveChart.vue";
import AlarmTable from "./AlarmTable.vue";
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
export default {
  name:'DzjkSbjkHome',
  components: {WeekChart,ActiveChart,AlarmTable},
  mixins: [getQuerySiteId],
  data() {
    return {
      loading:false,
      singleZdInfo:[{
        title:'电站位置',
        attr:'siteAddress'
      },{
        title:'投运时间',
        attr:'runningTime'
      },{
        title:'装机功率(MW)',
        attr:'installPower'
      },{
        title:'装机容量(MW)',
        attr:'installCapacity',
      }],
      sjglData:[{
        title:'今日充电量（MWh）',
        attr:'dayChargedCap'
      },{
        title:'今日放电量（MWh）',
        attr:'dayDisChargedCap'
      },{
        title:'总充电量（MWh）',
        attr:'totalChargedCap'
      },{
        title:'总放电量（MWh）',
        attr:'totalDischargedCap'
      }],
      info:{},//基本信息
      runningInfo:{},//总累计运行数据+报警表格
    }
  },
  computed:{
    tableData(){
      console.log('this.runningInfo?.siteMonitorHomeAlarmVo ',this.runningInfo?.siteMonitorHomeAlarmVo )
      return this.runningInfo?.siteMonitorHomeAlarmVo || []
    }
  },
  methods:{
    getBaseInfo(){
      return getSingleSiteBaseInfo(this.siteId).then(response => {
        this.info = response?.data || {}
      })
    },
    getRunningInfo(){
      return getDzjkHomeView(this.siteId).then(response => {
        this.runningInfo = response?.data || {}
      })
    },
    init(){
      this.loading = true
      // 功率曲线
      this.$refs.activeChart.init(this.siteId)
      // 一周冲放曲线
      this.$refs.weekChart.init(this.siteId)
      // 静态信息  this.getBaseInfo()
      // 总累计运行数据+故障告警 this.getRunningInfo()
      Promise.all([this.getBaseInfo(),this.getRunningInfo()]).finally(()=>{
        this.loading = false
      })

    }
  },
}
</script>

<style scoped lang="scss">
  .row-container{
    &>.el-col{
      margin-bottom: 20px;
    }
  }
//数据概览
  .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;
    }
  }

</style>

<style lang="scss">
/* card标题里的时间选择器 */
.time-range-card{
  &.common-card-container .el-card__header{
    padding-top: 0;
    padding-bottom: 0;
    .time-range-header{
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .card-title{
        line-height: 40px;
      }
    }
  }
}

</style>