src/views/ems/dzjk/home/ActiveChart.vue

@@ -0,0 +1,148 @@
+
+<template>
+  <el-row style="background:#fff;margin-top:30px;">
+    <el-col :xs="24" :sm="24" :lg="24">
+      <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="height: 310px" id="activeChart"></div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from '@/mixins/ems/resize'
+import {formatNumber} from "@/filters/ems";
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#activeChart'))
+    },
+    setOption(data) {
+      const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
+      const source = [['日期','充电量','放电量']]
+      siteMonitorDataVo.forEach(item=>{
+        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+      })
+      this.chart.setOption({
+        title: [
+          // 右上角
+          {
+            text: `电网 实时功率：${formatNumber(gridNrtPower)} kW`,
+            top: 10,
+            right: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 右下角
+          {
+            text: `负载 实时功率：${formatNumber(loadNrtPower)} kW`,
+            bottom: 10,
+            right: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第一行
+          {
+            text: '储能',
+            bottom: 40,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第二行
+          {
+            text: `实时功率：${formatNumber(energyStorageNrtPower)} kW`,
+            bottom: 26,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第三行
+          {
+            text: `可用电量：${formatNumber(energyStorageAvailElec)} kWh`,
+            bottom: 10,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          }
+        ],
+        grid:{
+          left:200
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        dataset:{
+          source
+          // source: [['日期','充电量','放电量']]
+        },
+        series: [
+          {
+            name:'充电量',
+            type: 'line',
+          },{
+            name:'放电量',
+            type: 'line',
+          }]
+      })
+    }
+  }
+}
+
+</script>
+

src/views/ems/dzjk/home/WeekChart.vue

@@ -0,0 +1,148 @@
+
+<template>
+  <el-row style="background:#fff;margin-top:30px;">
+    <el-col :xs="24" :sm="24" :lg="24">
+      <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="height: 310px" id="weekChart"></div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from '@/mixins/ems/resize'
+import {formatNumber} from "@/filters/ems";
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#weekChart'))
+    },
+    setOption(data) {
+      const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
+      const source = [['日期','充电量','放电量']]
+      siteMonitorDataVo.forEach(item=>{
+        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+      })
+      this.chart.setOption({
+        title: [
+          // 右上角
+          {
+            text: `电网 实时功率：${formatNumber(gridNrtPower)} kW`,
+            top: 10,
+            right: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 右下角
+          {
+            text: `负载 实时功率：${formatNumber(loadNrtPower)} kW`,
+            bottom: 10,
+            right: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第一行
+          {
+            text: '储能',
+            bottom: 40,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第二行
+          {
+            text: `实时功率：${formatNumber(energyStorageNrtPower)} kW`,
+            bottom: 26,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          },
+          // 左下角第三行
+          {
+            text: `可用电量：${formatNumber(energyStorageAvailElec)} kWh`,
+            bottom: 10,
+            left: 10,
+            textStyle:{
+              fontSize:12,
+              color:'#666666'
+            }
+          }
+        ],
+        grid:{
+          left:200
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        dataset:{
+          source
+          // source: [['日期','充电量','放电量']]
+        },
+        series: [
+          {
+            name:'充电量',
+            type: 'line',
+          },{
+            name:'放电量',
+            type: 'line',
+          }]
+      })
+    }
+  }
+}
+
+</script>
+

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

@@ -1,12 +1,24 @@
 <template>
   <div v-loading="loading">
-    <el-row :gutter="32" style="background:#fff;">
-      <el-col :xs="24" :sm="24" :lg="10">
+    <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>
+            <span class="card-title">静态信息</span>
           </div>
-          <div style="height: 310px" >
+          <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>
@@ -16,10 +28,10 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="14">
+      <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>
+            <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">
@@ -43,12 +55,13 @@
               <el-table-column
                 class-name="alarm-content"
                 prop="alarmContent"
+                show-overflow-tooltip
                 label="告警内容">
               </el-table-column>
               <el-table-column
                 label="工单"
                 fixed="right"
-                width="250"
+                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>
@@ -60,13 +73,24 @@
         </el-card>
       </el-col>
     </el-row>
-    <nllz-chart ref="nllzChart"/>
+    <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 NllzChart from "./NllzChart.vue";
+import WeekChart from "./WeekChart.vue";
+import ActiveChart from "./ActiveChart.vue";
 import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
 export default {
   name:'DzjkSbjkHome',
@@ -75,11 +99,24 @@ export default {
       return loader
     }
   },
-  components: {NllzChart},
+  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:'',
@@ -98,7 +135,8 @@ export default {
         attr:'totalDischargedCap'
       }],
       // todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
-      tableData:[]
+      tableData:[],
+      info:{}
     }
   },
   methods:{
@@ -107,14 +145,21 @@ export default {
     },
     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.nllzChart.setOption(data)
+        this.$refs.weekChart.setOption(data)
+        this.$refs.activeChart.setOption(data)
       }).finally(() => {this.loading = false})
+      
     }
   },
 }
@@ -124,11 +169,12 @@ export default {
 //数据概览
   .sjgl-data{
     text-align: center;
-    margin-top:20px;
+    &:nth-child(1),&:nth-child(2){
+      margin-bottom:25px;
+    }
     .sjgl-title{
       color: #666666;
       line-height: 14px;
-      padding-top: 18px;
     }
     .sjgl-value{
       color: rgba(51,51,51,1);
@@ -136,12 +182,13 @@ export default {
       line-height: 26px;
       font-weight: 500;
       margin-top: 14px;
+      word-wrap: break-word;
     }
   }
   //实时告警
   .ssgj-container{
     padding:20px;
-    height: 310px;
+    height: 250px;
     box-sizing: border-box;
     ::v-deep{
       .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{