emsfront/src/views/ems/zddt/index.vue

<template>
  <div class="ems-dashboard-editor-container">
    <zd-info></zd-info>
    <div class="ems-content-container ">
      <div class="map-container">
        <map-chart ref="mapChart"/>
      </div>
      <div class="zd-msg-container">
        <div class="zd-msg-top">
          <zd-select ref="zdSelect" @submitSite="submitSite"></zd-select>
          <el-card class="common-card-container">
            <div slot="header">
              <span class="card-title">基本信息</span>
              <el-button style="float: right; padding: 3px 0" type="text" size="small" @click="toDzjk">查看详情</el-button>
            </div>
            <div class="single-zd-name">{{singleSiteName}}</div>
<!--      四个方块-->
            <el-row :gutter="14">
              <el-col :span="12"  class="single-square-box-container" v-for="(item,index) in singleZdSqaure" :key="index+'singleSquareBox'">
                <single-square-box :data="item"></single-square-box>
              </el-col>
            </el-row>
 <!--     基本信息     -->
            <el-descriptions class="single-zd-info-container" :column="1" >
              <el-descriptions-item  v-for="(item,index) in singleZdInfo" :key="index+'singleZdInfo'" :label="item.title">{{item.value}}</el-descriptions-item>
            </el-descriptions>
<!--      echarts柱状图-->
          <bar-chart ref="barChart"></bar-chart>
          </el-card>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ZdInfo from '@/components/Ems/ZdBaseInfo/index.vue'
import ZdSelect from '@/components/Ems/ZdSelect/index.vue'
import SingleSquareBox from '@/components/Ems/SingleSquareBox/index.vue'
import BarChart from './BarChart.vue'
import MapChart from './MapChart.vue'
import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
export default {
  components:{ZdSelect,ZdInfo,SingleSquareBox,BarChart,MapChart},
  data() {
    return {
      singleSiteId:'',
      singleSiteName:'',
      singleSiteLocation:[],
      // 单个电站 四个方块数据
      singleZdSqaure:[
        {
          title:'今日充电（kWh）',
          value:'',
          bgColor:'#FFE5E5',
          attr:'dayChargedCap'
        },{
          title:'累计充电（kWh）',
          value:'',
          bgColor:'#FFE5E5',
          attr:'totalChargedCap'
        },{
          title:'今日放电（kWh）',
          value:'',
          bgColor:'#EEEBFF',
          attr:'dayDisChargedCap'
        },{
          title:'累计放电（kWh）',
          value:'',
          bgColor:'#EEEBFF',
          attr:'totalDisChargedCap'
        }
      ],

    //   单个电站 基本信息
      singleZdInfo:[{
        title:'电站位置',
        value:'',
        attr:'siteAddress'
      },{
        title:'投运时间',
        value:'',
        attr:'runningTime'
      },{
        title:'装机功率',
        value:'',
        attr:'installedPower'
      },{
        title:'装机容量',
        value:'',
        attr:'installedCap',
      }]
    }
  },
  methods:{
    // 站点选中
    submitSite(id){
      if(this.singleSiteId === id){return console.log(`点击搜索按钮 搜索相同的站点id= ${id}不再调用获取基本信息接口`)}
      console.log('点击搜索按钮 选中的站点id',id)
      this.singleSiteId = id
      this.$refs.zdSelect.searchLoading = true
      getSingleSiteBaseInfo(id).then(response => {
        console.log('单个站点详情数据',response)
        const res = response.data || {}
        this.singleSiteName = res?.siteName || ''//站点名称
        this.singleSiteLocation = res?.siteLocation || []//站点坐标
        this.singleZdSqaure.forEach(item=>{
          item.value =( res[item.attr] || res[item.attr] === 0 ) ? res[item.attr] : '-'
        })
        this.singleZdInfo.forEach(item=>{
          item.value = ( res[item.attr] || res[item.attr] === 0 ) ? res[item.attr] : '-'
        })
        this.$refs.barChart.setOption(res?.sevenDayDisChargeStats || [])
        this.$refs.mapChart.setOption([{name:this.singleSiteName,value:this.singleSiteLocation}])
      }).finally(() => {this.$refs.zdSelect.searchLoading = false})
    },
    //跳转单站监控页面
    toDzjk(){
      this.$router.push({
        path:'/dzjk',
        query:{
          siteId:this.singleSiteId,
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.ems-content-container{
  display: flex;
  padding:24px;
  padding-right: 0;
  .map-container{
    flex:auto;
  }
  .zd-msg-container{
    width: 500px;
    padding: 24px;
    .single-zd-name{
      font-weight: 500;
      line-height: 23px;
      color: #FFBD00;
      font-size: 16px;
      margin-bottom: 24px;
    }
    .single-square-box-container{
      height: 78px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }
    .single-zd-info-container{
      font-size: 12px;
      margin-top: 10px;
      color:#666666;
    }
  }
}
</style>