* 静态设备状态属性

ems-ui-application/src/store/modules/userState.js

@@ -4,7 +4,7 @@ export const userState = {
         selectedServiceArea: '',
         areaType: '',
         regionFactor: 1,
-        elec2CFactor: 1
+        elec2CFactor: 0.5366
     },
 
     mutations: {

ems-ui-cloud/src/api/ca/caMeterD.js

@@ -9,6 +9,14 @@ export function listCaMeterD(query) {
   })
 }
 
+export function listSumCaMeterD(query) {
+  return request({
+    url: '/ems/caMeterD/list/all',
+    method: 'get',
+    params: query
+  })
+}
+
 // 查询碳计量日详细
 export function getCaMeterD(id) {
   return request({

ems-ui-cloud/src/views/largeScreen/dialog/usage-real.vue

@@ -15,6 +15,7 @@
 <script>
 import threejsBaseDialog from './base.vue'
 import {DateTool} from "@/utils/DateTool";
+import {mapState} from 'vuex';
 import {numToStr} from "@/utils";
 import {qryElecMeterByDate, qryWaterMeterByDate} from "@/api/device/elecMeterH";
 
@@ -43,6 +44,10 @@ export default {
           name: "用水量",
           unit: "吨",
         },
+        {
+          name: "碳排量",
+          unit: "kg",
+        },
       ],
     };
   },
@@ -55,6 +60,9 @@ export default {
   mounted() {
     this.init();
   },
+  computed: {
+    ...mapState('userState', ['areaType', 'regionFactor', 'elec2CFactor']),
+  },
   methods: {
     async init() {
       await this.getMeterElecWater()
@@ -63,10 +71,11 @@ export default {
     async getMeterElecWater() {
       const {data: elecMeter} = await qryElecMeterByDate(DateTool.now(), this.propData.areaCode)
       const {data: waterMeter} = await qryWaterMeterByDate(DateTool.now(), this.propData.areaCode)
-      const [elec, water] = this.socList
+      const [elec, water, carbon] = this.socList
       elec.value = numToStr(elecMeter.quantity)
       water.value = numToStr(waterMeter.quantity)
-      this.socList = [elec, water]
+      carbon.value = numToStr(elecMeter.quantity * this.elec2CFactor)
+      this.socList = [elec, water, carbon]
     },
   },
 };

ems-ui-cloud/src/views/largeScreen/home/right.vue

@@ -62,19 +62,22 @@
         <BaseChart height="100%" width="100%" :option="pieOptions"/>
       </div>
     </CusModule>
-    <CusModule class="module-top" title="告警信息">
-      <div class="seamless-header">
-        <div>告警内容</div>
-        <div>告警设备</div>
-        <div>告警时间</div>
-      </div>
-      <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
-        <div class="seamless-item" v-for="(item, index) in listData" :key="index">
-          <div>{{ item.alarmMsg }}</div>
-          <div>{{ item.objName }}</div>
-          <div>{{ item.alarmTime }}</div>
-        </div>
-      </vue-seamless-scroll>
+    <!--    <CusModule class="module-top" title="告警信息">-->
+    <!--      <div class="seamless-header">-->
+    <!--        <div>告警内容</div>-->
+    <!--        <div>告警设备</div>-->
+    <!--        <div>告警时间</div>-->
+    <!--      </div>-->
+    <!--      <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">-->
+    <!--        <div class="seamless-item" v-for="(item, index) in listData" :key="index">-->
+    <!--          <div>{{ item.alarmMsg }}</div>-->
+    <!--          <div>{{ item.objName }}</div>-->
+    <!--          <div>{{ item.alarmTime }}</div>-->
+    <!--        </div>-->
+    <!--      </vue-seamless-scroll>-->
+    <!--    </CusModule>-->
+    <CusModule class="module-top" title="碳计量">
+      <BaseChart height="350px" width="100%" :option="lineOptions"/>
     </CusModule>
   </div>
 </template>
@@ -83,13 +86,15 @@ import CusModule from '../components/CusModule.vue';
 import BaseChart from '@/components/BaseChart/index.vue'
 import vueSeamlessScroll from 'vue-seamless-scroll'
 import {mapState} from 'vuex';
+import * as echarts from 'echarts'
 import {qryElecMeterByDate, qryWaterMeterByDate} from "@/api/device/elecMeterH";
 import {DateTool} from "@/utils/DateTool";
-import {numToStr} from "@/utils";
+import {array2Map, numToStr} from "@/utils";
 import {listDeviceStatus, listDeviceType} from "@/api/device/device";
 import {listAlarmInfo} from "@/api/alarm/alarm-info";
 import {ALARM_STATE} from "@/enums/alarm";
 import {ApiCode} from "@/api/apiEmums";
+import {listSumCaMeterD} from "@/api/ca/caMeterD";
 
 export default {
   name: 'HomeRight',
@@ -120,8 +125,8 @@ export default {
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
         waitTime: 1000 // 单步运动停止
       },
-      listData: []
-
+      listData: [],
+      lineData: []
     }
   },
   components: {
@@ -182,6 +187,72 @@ export default {
           },
         ],
       }
+    },
+    lineOptions() {
+      return {
+        grid: {
+          top: "10%",
+          bottom: "10%",//也可设置left和right设置距离来控制图表的大小
+          contain: true
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+            label: {
+              show: true
+            }
+          }
+        },
+        xAxis: {
+          data: this.lineData.map(item => item.xData),
+          axisLine: {
+            show: true, //隐藏X轴轴线
+          },
+          axisTick: {
+            show: true //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+          },
+
+        },
+        yAxis: [{
+          type: "value",
+          name: "kg",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#334E5E'
+            }
+          },
+        }],
+        series: [
+          {
+            name: "碳排放量",
+            type: "bar",
+            barWidth: 15,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: "#21C3E8"
+                },
+                  {
+                    offset: 0.7,
+                    color: "#1484A1"
+                  },
+                  {
+                    offset: 1,
+                    color: "#0B2B38"
+                  }
+                ])
+              }
+            },
+            data: this.lineData.map(item => item.yData1)
+          },
+        ]
+      }
     }
   },
   watch: {
@@ -205,6 +276,7 @@ export default {
       this.getDeviceStatus()
       this.cntListDeviceType()
       this.getRealTimeAlarm()
+      this.getListSumCaMeterD()
     },
     async getElecWaterCost() {
       const {data: thisMonthElecMeter} = await qryElecMeterByDate(DateTool.thisMonth(), this.areaType)
@@ -290,6 +362,20 @@ export default {
       }
       this.listData = result;
     },
+    async getListSumCaMeterD() {
+      const {data} = await listSumCaMeterD({
+        areaCode: this.areaType,
+        startRecTime: DateTool.lastXDay(30),
+        endRecTime: DateTool.now(),
+      })
+      const dates = DateTool.getDayOfRange(DateTool.lastXDay(7), DateTool.now());
+      const mapIndex = array2Map(data, "date");
+
+      this.lineData = dates.map(item => ({
+        xData: item,
+        yData1: mapIndex[item] ? mapIndex[item].caEmissionQuantity?.toFixed(2) : 0
+      }));
+    }
   }
 }
 </script>