update 厂区看板能耗统计顺序优化

src/views/board/factoryIndex.vue

@@ -3,8 +3,8 @@
     <div class="bg">
       <div class="title">正道能源监控系统</div>
       <div class="subTitle" style="top: 13.5%;left: 6%;">设备总览</div>
-      <div class="subTitle" style="top: 42.3%;left: 6%">本月用电排行</div>
+      <div class="subTitle" style="top: 42.3%;left: 6%">本月{{ currentTypeMeta.rankName }}排行</div>
-      <div class="subTitle" style="top: 71.2%;left: 6%">本月用电分项统计</div>
+      <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>
@@ -27,26 +27,26 @@
         </div>
       </div>
       <div class="typeSelect">
-        <div class="selectItem" style="width:2.4vw;left: calc(57%)" :class="{'active': typeData === '2'}"
+        <div class="selectItem" style="width:2.4vw;left: calc(57%)" :class="{'active': typeData === '4'}"
-             @click="typeChange('2')">
+             @click="typeChange('4')">
-          电
+         蒸汽
         </div>
         <div class="selectItem" style="width:2.4vw;left: calc(57% + 2.4vw)" :class="{'active': typeData === '3'}"
              @click="typeChange('3')">
           水
         </div>
-        <div class="selectItem" style="width:3.8vw;left: calc(57% + 4.8vw)" :class="{'active': typeData === '4'}"
+        <div class="selectItem" style="width:3.8vw;left: calc(57% + 4.8vw)" :class="{'active': typeData === '5'}"
-             @click="typeChange('4')">
+             @click="typeChange('5')">
           压缩空气
         </div>
-        <div class="selectItem" style="width:3vw;left: calc(57% + 8.6vw)" :class="{'active': typeData === '5'}"
+        <div class="selectItem" style="width:3vw;left: calc(57% + 8.6vw)" :class="{'active': typeData === '6'}"
-             @click="typeChange('5')">
-          蒸汽
-        </div>
-        <div class="selectItem" style="width:3vw;left: calc(57% + 11.6vw)" :class="{'active': typeData === '6'}"
              @click="typeChange('6')">
           氮气
         </div>
+        <div class="selectItem" style="width:3vw;left: calc(57% + 11.6vw)" :class="{'active': typeData === '2'}"
+             @click="typeChange('2')">
+          电
+        </div>
       </div>
       <div class="sbzl">
         <div class="num" style="top: 22%;left: 7%;">{{ deviceOverviewData.deviceSum }}</div>
@@ -112,7 +112,7 @@
             设备名称
           </div>
           <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 3);">
-            A相电流
+            {{ currentTypeMeta.field1Label }}
           </div>
 <!--          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">-->
 <!--            B相电流-->
@@ -121,7 +121,7 @@
 <!--            C相电流-->
 <!--          </div>-->
           <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 3);">
-            A相电压
+            {{ currentTypeMeta.field2Label }}
           </div>
 <!--          <div class="scrollTable" style="line-height: 1vw;font-weight: bold;width: calc(100% / 7);">-->
 <!--            B相电压-->
@@ -146,7 +146,7 @@
                 {{ item.monitorName || '' }}
               </div>
               <div class="scrollTable" style="width: calc(100% / 3);">
-                {{ item.iA || 0 }}
+                {{ item[currentTypeMeta.field1Key] || 0 }}
               </div>
 <!--              <div class="scrollTable" style="width: calc(100% / 7);">-->
 <!--                {{ item.iB || 0 }}-->
@@ -155,7 +155,7 @@
 <!--                {{ item.iC || 0 }}-->
 <!--              </div>-->
               <div class="scrollTable" style="width: calc(100% / 3);">
-                {{ item.vA || 0 }}
+                {{ item[currentTypeMeta.field2Key] || 0 }}
               </div>
 <!--              <div class="scrollTable" style="width: calc(100% / 7);">-->
 <!--                {{ item.vB || 0 }}-->
@@ -232,7 +232,7 @@
             <div class="text">{{ i.workUnitName }}</div>
             <div class="num">
               <span style="color: #25B89A">{{ i.expend }}</span>
-              <span>kwh</span>
+              <span>{{ currentTypeMeta.unit }}</span>
             </div>
             <div class="schedule">
               <div class="schedule1" :style="`width:${Math.min(100,i.expend)}%`"></div>
@@ -263,13 +263,23 @@ export default {
   computed: {
     topRankingData() {
       return this.rankingData.slice(0, 5)
+    },
+    currentTypeMeta() {
+      const map = {
+        '2': { rankName: '用电', unit: 'kWh', field1Label: 'A相电流', field2Label: 'A相电压', field1Key: 'iA', field2Key: 'vA' },
+        '3': { rankName: '用水', unit: 'm³', field1Label: '瞬时流量', field2Label: '累计流量', field1Key: 'instantFlow', field2Key: 'cumulativeFlow' },
+        '4': { rankName: '用蒸汽', unit: 't', field1Label: '瞬时流量', field2Label: '累计流量', field1Key: 'instantFlow', field2Key: 'cumulativeFlow' },
+        '5': { rankName: '用压缩空气', unit: 'm³', field1Label: '瞬时流量', field2Label: '累计流量', field1Key: 'instantFlow', field2Key: 'cumulativeFlow' },
+        '6': { rankName: '用氮气', unit: 'm³', field1Label: '瞬时流量', field2Label: '累计流量', field1Key: 'instantFlow', field2Key: 'cumulativeFlow' }
+      }
+      return map[this.typeData] || map['4']
     }
   },
   data() {
     return {
 
       selectData: 'year',
-      typeData: "2",
+      typeData: "4",
       colors: ['#30A0FB', '#00FF89', '#F9E435', '#FB5C2D', '#73c0de'],
       chart1TableOption: {
         step: 0.5, // 数值越大速度滚动越快
@@ -588,7 +598,7 @@ export default {
           },
           yAxis: {
             type: 'value',
-            name: '单位(kwh)',
+            name: `单位(${this.currentTypeMeta.unit})`,
             max: function (value) {
               return value.max * 1.2;
             },