1

src/api/pcsData/index.js

@@ -57,3 +57,12 @@ export async function listFactoryLine(params) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+//用电趋势图;
+export async function electricityTrend(params) {
+  const res = await request.get(`/pcs/homePage/electricityTrend`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/home/index.vue

@@ -143,7 +143,7 @@
         </div>
 
         <!-- 告警列表 -->
-        <div class="panel alert-list-panel">
+        <!-- <div class="panel alert-list-panel">
           <div class="panel-title">
             <div class="panel-icon"></div>
             告警列表
@@ -154,7 +154,7 @@
               style="width: 100%; height: calc(100% - 40px)"
             />
           </div>
-        </div>
+        </div> -->
 
         <!-- 设备告警趋势图 -->
         <div class="panel chart-panel">
@@ -164,6 +164,13 @@
           </div>
           <div class="chart-container" ref="alertTrendChart"></div>
         </div>
+        <div class="panel chart-panel">
+          <div class="panel-title">
+            <div class="panel-icon"></div>
+            用电趋势图
+          </div>
+          <div class="chart-container" ref="electricityTrendChart"></div>
+        </div>
       </div>
     </div>
   </vue-fullscreen>
@@ -179,7 +186,8 @@
     comprehensiveData,
     waterCoalTrend,
     wasteTrend,
-    listFactoryLine
+    listFactoryLine,
+    electricityTrend
   } from '@/api/pcsData/index.js';
 
   export default {
@@ -281,11 +289,12 @@
 
       init() {
         this.alarmOverview();
-        this.queryAlarmList();
+        // this.queryAlarmList();
         this.deviceAlarmTrend();
         this.waterCoalTrend();
         this.wasteTrend();
         this.comprehensiveData();
+        this.electricityTrend();
       },
       //告警数据概览
       alarmOverview() {
@@ -305,6 +314,14 @@
           });
         });
       },
+      //用电趋势图
+      electricityTrend() {
+        electricityTrend({ stationId: this.stationId }).then((res) => {
+          this.$nextTick(() => {
+            this.initElectricityTrend(res);
+          });
+        });
+      },
       //综合数据
       comprehensiveData() {
         comprehensiveData({ stationId: this.stationId }).then((res) => {
@@ -312,11 +329,11 @@
             { label: '年度总注气量(M³)', value: res.yearTotalGasInjection },
             { label: '年度总水量(T)', value: res.yearTotalWater },
             { label: '年度用煤总量(T)', value: res.yearTotalCoal },
-            // { label: '年度固废量(T)', value: res.yearTotalWaste },
+            { label: '年度用电量(kWh)', value: res.yearTotalElectricity },
             { label: '本月注气量(M³)', value: res.monthTotalGasInjection },
             { label: '本月水量(T)', value: res.monthTotalWater },
             { label: '本月用煤量(T)', value: res.monthTotalCoal },
-            // { label: '本月固废量(T)', value: res.monthTotalWaste }
+            { label: '本月用电量(kWh)', value: res.monthTotalElectricity }
           ];
           this.$set(
             this.boilerData[0],
@@ -369,83 +386,83 @@
         });
       },
       //告警列表
-      queryAlarmList() {
-        let dataKey = [
-          'name',
-          'deviceLocation',
-          'alertLevel',
-          'ruleName',
-          'alarmTime',
-          'handleStatus'
-        ];
-
-        queryAlarmList({ stationId: this.stationId }).then((res) => {
-          let dataArr = [];
-          res.forEach((item, index) => {
-            let data = [index + 1];
-            dataKey.forEach((key, index) => {
-              if (key == 'alertLevel') {
-                item[key] =
-                  item[key] == 1
-                    ? '紧急'
-                    : item[key] == 2
-                    ? '严重'
-                    : item[key] == 3
-                    ? '一般'
-                    : '告警';
-              }
-              if (key == 'handleStatus') {
-                item[key] =
-                  item[key] == 1
-                    ? '处理中'
-                    : item[key] == 2
-                    ? '已处理'
-                    : '未处理';
-              }
-              data.push(item[key]);
-            });
-            dataArr.push(data);
-          });
-          this.alertConfig = {
-            header: [
-              '序号',
-              '设备名称',
-              '设备位置',
-              '告警级别',
-              '告警内容描述',
-              '告警时间',
-              '处理状态'
-            ].map(
-              (item) =>
-                `<div style="color: #38fdf8;font-weight: bold">${item}</div>`
-            ),
-
-            data: dataArr.map((data) =>
-              data.map((item, index) => {
-                return `<div style="color: ${
-                  index == 3 ? this.getClolr(item) : '#fff'
-                };">${item}</div>`;
-              })
-            ),
-            rowNum: 4,
-            headerBGC: 'transparent',
-            oddRowBGC: 'rgba(13, 41, 96, 0.3)',
-            evenRowBGC: 'rgba(13, 41, 96, 0.1)',
-            headerHeight: 30,
-            waitTime: 3000,
-            align: [
-              'center',
-              'center',
-              'center',
-              'center',
-              'center',
-              'center',
-              'center'
-            ],
-            columnWidth: []
-          };
-        });
-      },
+      // queryAlarmList() {
+      //   let dataKey = [
+      //     'name',
+      //     'deviceLocation',
+      //     'alertLevel',
+      //     'ruleName',
+      //     'alarmTime',
+      //     'handleStatus'
+      //   ];
+
+      //   queryAlarmList({ stationId: this.stationId }).then((res) => {
+      //     let dataArr = [];
+      //     res.forEach((item, index) => {
+      //       let data = [index + 1];
+      //       dataKey.forEach((key, index) => {
+      //         if (key == 'alertLevel') {
+      //           item[key] =
+      //             item[key] == 1
+      //               ? '紧急'
+      //               : item[key] == 2
+      //               ? '严重'
+      //               : item[key] == 3
+      //               ? '一般'
+      //               : '告警';
+      //         }
+      //         if (key == 'handleStatus') {
+      //           item[key] =
+      //             item[key] == 1
+      //               ? '处理中'
+      //               : item[key] == 2
+      //               ? '已处理'
+      //               : '未处理';
+      //         }
+      //         data.push(item[key]);
+      //       });
+      //       dataArr.push(data);
+      //     });
+      //     this.alertConfig = {
+      //       header: [
+      //         '序号',
+      //         '设备名称',
+      //         '设备位置',
+      //         '告警级别',
+      //         '告警内容描述',
+      //         '告警时间',
+      //         '处理状态'
+      //       ].map(
+      //         (item) =>
+      //           `<div style="color: #38fdf8;font-weight: bold">${item}</div>`
+      //       ),
+
+      //       data: dataArr.map((data) =>
+      //         data.map((item, index) => {
+      //           return `<div style="color: ${
+      //             index == 3 ? this.getClolr(item) : '#fff'
+      //           };">${item}</div>`;
+      //         })
+      //       ),
+      //       rowNum: 4,
+      //       headerBGC: 'transparent',
+      //       oddRowBGC: 'rgba(13, 41, 96, 0.3)',
+      //       evenRowBGC: 'rgba(13, 41, 96, 0.1)',
+      //       headerHeight: 30,
+      //       waitTime: 3000,
+      //       align: [
+      //         'center',
+      //         'center',
+      //         'center',
+      //         'center',
+      //         'center',
+      //         'center',
+      //         'center'
+      //       ],
+      //       columnWidth: []
+      //     };
+      //   });
+      // },
 
       onFullscreen() {
         this.isFullscreen = !this.isFullscreen;
@@ -815,6 +832,57 @@
         };
         chart.setOption(option);
         this.charts.alertTrend = chart;
+      },
+      initElectricityTrend(res) {
+        if (!this.$refs.electricityTrendChart) return;
+        const chart = echarts.init(this.$refs.electricityTrendChart);
+        const option = {
+          tooltip: {
+            trigger: 'axis',
+            backgroundColor: '#fff',
+            borderColor: '#e0e0e0',
+            borderWidth: 1,
+            textStyle: {
+              color: '#333'
+            },
+            axisPointer: {
+              type: 'line',
+              lineStyle: {
+                color: 'rgba(255, 255, 255, 0.5)'
+              }
+            }
+          },
+          grid: { top: 30, right: 20, bottom: 30, left: 50 },
+          xAxis: {
+            type: 'category',
+            data: res.map((item) => item.time),
+            axisLine: { lineStyle: { color: '#4a6fa5' } },
+            axisLabel: { color: '#8ba3c7' }
+          },
+          yAxis: {
+            type: 'value',
+            axisLine: { lineStyle: { color: '#4a6fa5' } },
+            axisLabel: { color: '#8ba3c7' },
+            splitLine: { lineStyle: { color: 'rgba(74, 111, 165, 0.2)' } }
+          },
+          series: [
+            {
+              data: res.map((item) => item.value),
+              type: 'line',
+              smooth: true,
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(59, 130, 246, 0.5)' },
+                  { offset: 1, color: 'rgba(59, 130, 246, 0.05)' }
+                ])
+              },
+              lineStyle: { color: '#3b82f6', width: 2 },
+              itemStyle: { color: '#3b82f6' }
+            }
+          ]
+        };
+        chart.setOption(option);
+        this.charts.electricityTrendChart = chart;
       }
     }
   };
@@ -1087,7 +1155,7 @@
           gap: 8px;
           position: relative;
           overflow: hidden;
-          width: 29%;
+          width: 22%;
           height: 60px;
           background: url('~@/assets/pcs/leftItem.png') no-repeat center top;
           background-size: 100% 100%;