首页、单体电池

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

@@ -0,0 +1,71 @@
+<template>
+    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+        <div slot="header">
+        <span class="card-title">策略信息</span>
+        </div>
+        <!-- <el-empty :image-size="100" ></el-empty> -->
+        <div style="box-sizing: border-box; height: 250px;padding:20px 15px;" >
+            <el-descriptions class="home-normal-info" :column="2" >
+              <el-descriptions-item size="mini"  label="模板名称">模板1</el-descriptions-item>
+              <el-descriptions-item size="mini"  label="SOC限制">开/关</el-descriptions-item>
+              <el-descriptions-item size="mini"  label="SOC下限">0%</el-descriptions-item>
+              <el-descriptions-item size="mini"  label="SOC上限">100%</el-descriptions-item>
+            </el-descriptions>
+             <el-table
+                :data="info.tableData || []"
+                border
+                style="width: 100%;margin-top:15px;">
+                <el-table-column
+                    prop="startTime"
+                    label="开始时间">
+                </el-table-column>
+                <el-table-column
+                    prop="endTime"
+                    label="结束时间">
+                </el-table-column>
+                <el-table-column
+                    prop="chargeDischargePower"
+                    label="充放功率（kW）">
+                </el-table-column>
+                <el-table-column
+                    prop="chargeStatus"
+                    label="充电状态">
+                    <template slot-scope="scope">
+                    {{chargeStatusOptions[scope.row.chargeStatus]}}
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </el-card>
+</template>
+<script>
+import {mapState} from 'vuex'
+export default{
+    props:{
+        info:{
+            require:true,
+            type:Object,
+            default:()=>{
+                return {}
+            }
+        }
+    },
+    computed:{
+    ...mapState({
+      chargeStatusOptions: state => state?.ems?.chargeStatusOptions || {},
+    }),
+  },
+    data(){
+        return {
+
+        }
+    },
+    methods:{
+        
+    }
+}
+   
+</script>
+<style lang="scss" scoped>
+ 
+</style>

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

@@ -1,148 +0,0 @@
-
-<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="nllzChart"></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('#nllzChart'))
-    },
-    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

@@ -10,7 +10,7 @@
             <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 class="home-normal-info" :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>
@@ -32,14 +32,7 @@
         </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>
+        <cl-info :info="{}"/>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="24">
         <week-chart ref="weekChart"/>
@@ -58,10 +51,11 @@ import {getDzjkHomeView} from '@/api/ems/dzjk'
 import WeekChart from "./WeekChart.vue";
 import ActiveChart from "./ActiveChart.vue";
 import AlarmTable from "./AlarmTable.vue";
+import ClInfo from './ClInfo.vue';
 import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
 export default {
   name:'DzjkSbjkHome',
-  components: {WeekChart,ActiveChart,AlarmTable},
+  components: {WeekChart,ActiveChart,AlarmTable,ClInfo},
   mixins: [getQuerySiteId],
   data() {
     return {
@@ -136,6 +130,7 @@ export default {
       margin-bottom: 20px;
     }
   }
+  
 //数据概览
   .sjgl-data{
     text-align: center;
@@ -159,6 +154,17 @@ export default {
 </style>
 
 <style lang="scss">
+.home-normal-info{
+    font-size: 12px;
+    .el-descriptions-item__container{
+      .el-descriptions-item__label{
+        color:#666666;
+      }
+      .el-descriptions-item__content{
+        color: #333333;
+      }
+    } 
+  }
 /* card标题里的时间选择器 */
 .time-range-card{
   &.common-card-container .el-card__header{