update 厂区看板近7天尖峰平谷统计改为近7天单日能耗统计

src/api/board/index.js

@@ -6,6 +6,12 @@ export function realTimeData(query) {
     })
 }
 
+export function realTimeDataByEnergy(query) {
+    return request({
+        url: '/ems/board/realTimeDataByEnergy', method: 'get', params: query
+    })
+}
+
 export function deviceOverview(query) {
     return request({
         url: '/ems/board/deviceOverview', method: 'get', params: query

src/views/board/factoryIndex.vue

@@ -8,7 +8,7 @@
       <div class="subTitle" style="top: 71.2%;left: 6%">本月{{ currentTypeMeta.rankName }}分项统计</div>
       <div class="subTitle" style="top: 71.2%;left: 30.5%">能耗统计</div>
       <div class="subTitle" style="top: 71.2%;left: 78%">实时预警</div>
-      <div class="subTitle" style="top: 13.5%;left: 78%">近7天尖峰平谷统计</div>
+      <div class="subTitle" style="top: 13.5%;left: 78%">近7天能耗统计</div>
       <div class="select">
         <div class="selectItem" style="left: 57%" :class="{'active': selectData === 'day'}"
              @click="selectChange('day')">
@@ -191,13 +191,13 @@
       <Chart class="ydfxtjPie" ref="ydfxtjPie"></Chart>
       <div class="jfpgtjInfo">
         <div style="width: 100%"></div>
-        <div style="white-space: nowrap" v-for="(i,k) in peaksValleysConsumptionData">
+        <div class="jfpgtjInfoItem" v-for="(i,k) in peaksValleysConsumptionData">
           <div class="market" :style="`background-color:${colors[k]}`"></div>
           <div class="text">
-            {{ i[0] }}段用电
+            {{ i[0] }}
           </div>
           <div class="num">
-            <span :style="`color:${colors[k]};font-weight: bold;font-size:0.9vw`">
+            <span class="numValue" :style="`color:${colors[k]}`">
               {{ i[2] }}
             </span>%
           </div>
@@ -404,19 +404,20 @@ export default {
           ]
         })
       })
-      peaksValleysConsumption().then(async res => {
-        let oriData = res.data?.reportList?.reduce((acc, item) => {
-          if (!acc[item.priceType]) {
-            acc[item.priceType] = 0;
+      peaksValleysConsumption({ monitorType: this.typeData }).then(async res => {
+        let oriData = (res.data?.reportList || []).reduce((acc, item) => {
+          if (!acc[item.unitName]) {
+            acc[item.unitName] = 0;
           }
-          acc[item.priceType] += item.expend;
+          acc[item.unitName] += Number(item.expend || 0);
           return acc;
         }, {})
         let all = Object.values(oriData).reduce((acc, item) => {
-          return acc + item
+          return Number(acc) + Number(item)
         }, 0)
         let chartData = Object.keys(oriData).map((e) => {
-          return [e, oriData[e], (oriData[e] / all * 100).toFixed(2)]
+          const percentage = all === 0 ? 0 : (oriData[e] / all * 100)
+          return [e, oriData[e], percentage.toFixed(2)]
         })
         this.peaksValleysConsumptionData = chartData
         let seriesData = []
@@ -434,7 +435,7 @@ export default {
             }
           })
           seriesData.push({
-            value: e[1], name: e[0] + '段用电', percentage: e[2]
+            value: e[1], name: e[0], percentage: e[2]
           })
         })
 
@@ -451,7 +452,7 @@ export default {
               left: 'center',
               top: 'center',
               style: {
-                text: '{num|1111}\n{unit|kwh}',
+                text: `{num|${Number(all).toFixed(2)}}\n{unit|${this.currentTypeMeta.unit}}`,
                 textAlign: 'center',
                 rich: {
                   num: {
@@ -535,8 +536,8 @@ export default {
             if (!result[item.date]) {
               result[item.date] = {date: item.date, data: {}};
             }
-            result[item.date].data[item.priceType] = item.expend;
-            types.add(item.priceType);
+            result[item.date].data[item.unitName] = Number(item.expend || 0);
+            types.add(item.unitName);
           });
 
           return {
@@ -565,7 +566,7 @@ export default {
           },
           yAxis: {
             type: 'value',
-            name: '单位(kwh)',
+            name: `单位(${this.currentTypeMeta.unit})`,
             max: function (value) {
               return parseFloat((value.max * 1.2).toFixed(1));
             },
@@ -596,13 +597,13 @@ export default {
           },
           series: types.map((e, k) => {
             return {
-              name: e + '段用电',
+              name: e,
               type: 'bar',
               stack: 'total',
               label: {
-                show: true,
-                position: 'inside',
-                color: '#000',
+                show: false,
+                position: 'top',
+                color: '#fff',
                 fontSize: 10
               },
               barWidth: '50%',
@@ -935,29 +936,42 @@ export default {
   flex-direction: column;
   justify-content: space-between;
 
+  .jfpgtjInfoItem {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    width: 100%;
+    white-space: nowrap;
+  }
 
   .market {
-    display: inline-block;
-    vertical-align: middle;
+    flex: 0 0 auto;
     width: 0.8vw;
     height: 0.8vw;
-    margin-right: 0.8vw;
+    margin-right: 0.45vw;
     background-color: #28A7FC;
     border-radius: 50%;
   }
 
   .text {
-    display: inline-block;
+    flex: 1;
+    min-width: 0;
     font-size: 0.8vw;
-    width: calc(100% - 1.6vw - 2.5vw);
+    overflow: hidden;
+    text-overflow: ellipsis;
     text-align: left;
   }
 
   .num {
-    display: inline-block;
+    flex: 0 0 2.9vw;
     font-size: 0.8vw;
-    width: 2.5vw;
-    text-align: left;
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  .numValue {
+    font-weight: bold;
+    font-size: 0.85vw;
   }
 }