提交： 项目详情模块下 代码。监控大屏添加 告警提示音

src/api/iot/project_new.js

@@ -117,3 +117,31 @@ export function projectEneElectricityTable(query) {
     params: query
   });
 }
+
+// 查询 负载 图表
+export function projectElectricityStatChart(query) {
+  return request({
+    url: "/iot/project/monitor/electricityStatChart",
+    method: "get",
+    params: query
+  });
+}
+
+
+// 查询 负载 图表 年
+export function projectElectricityStatChartYear(query) {
+  return request({
+    url: "/iot/project/monitor/electricityStatChartYear",
+    method: "get",
+    params: query
+  });
+}
+
+// 查询 电能 列表
+export function projectElectricityTable(query) {
+  return request({
+    url: "/iot/project/monitor/electricityStatLst",
+    method: "get",
+    params: query
+  });
+}

src/config/env.js

@@ -12,6 +12,7 @@ let iotWebSocketAlarmBaseUrl = ''
 let bigWebSocketUrl = ''
 let port = '8899'
 let webSocketProjectGatewayUrl = ''
+let hrefHostUrl = '';
 
 // window.dasConfig = {
 //   ip: 'http://192.168.10.241:32024'
@@ -41,8 +42,10 @@ if (env.NODE_ENV == 'development') {
   port = window.dasConfig.port
 } else if(env.NODE_ENV == 'test') {
 }
-iotWebSocketAlarmBaseUrl = sysWebSocket + hrefHost  + ':8899/ws/alarm/live'
 sysWebSocket = sysWebSocket + hrefHost + ( port ? ':'+ port :'');
+hrefHostUrl = 
+
+iotWebSocketAlarmBaseUrl = sysWebSocket + '/ws/alarm/live';
 bigWebSocketUrl = sysWebSocket + '/ws/dev/readData'
 webSocketProjectGatewayUrl = sysWebSocket + '/ws/dev/projectDeviceLive'
 iotWebSocketBaseUrl = sysWebSocket + '/ws/dev/up/'

src/utils/hciot.js

@@ -4,6 +4,8 @@
  */
 import { Loading } from 'element-ui';
 
+const baseHref = process.env.NODE_ENV === "production" ?  `${window.dasConfig.protocol}${window.dasConfig.ip}${window.dasConfig.port ? ':'+window.dasConfig.port : ''}` : process.env.VUE_APP_BASE_API
+
 const baseURL = process.env.VUE_APP_BASE_API
 
 const targetURL = process.env.target
@@ -162,8 +164,8 @@ export function getIotFileUrl(importUrl) {
 	if (importUrl.indexOf('http') === 0 || importUrl.indexOf('https') === 0) {
 		return importUrl;
 	} else if (importUrl.indexOf('/profile/upload/') === 0 || importUrl.indexOf('/profile/avatar/') === 0) {
-    console.log('baseUrl:', baseURL + importUrl);
+    console.log('baseUrl:', baseHref + baseURL + importUrl);
-		return baseURL + importUrl;
+		return baseHref + baseURL + importUrl;
 	} else if (importUrl.indexOf('data:image/') === 0 || importUrl.indexOf('/static/') === 0) {
 		return importUrl;
   }

src/views/bigScreen/v3/index.vue

@@ -262,7 +262,7 @@ export default {
         return;
       }
       this.stompClient = new WebSocket(
-        `${bigWebSocketUrl}/${this.getGuid()}/${this.projectId || -1}`
+        `${bigWebSocketUrl}/${this.getGuid()}/${this.$store.getters.userId}/${this.projectId || -1}`
       );
       this.stompClient.onmessage = this.socket_onmsg;
       this.stompClient.onclose = this.socket_onclose;

src/views/bigScreen/v3/profile/ETrendCensus.vue

@@ -57,7 +57,7 @@ export default {
           left: "20",
           right: "20",
           bottom: "5",
-          top: 30,
+          top: 70,
           containLabel: true,
         },
         xAxis: {
@@ -162,12 +162,11 @@ export default {
   },
   watch: {
     result: {
-      handler: function (val, oldVal) {
+      handler: function (val) {
-        console.log('result---:', val)
         this.resultOption.xAxis.data = val["name"];
-        this.resultOption.series[0].data = val["ELECTRICITY_METER"];
+        this.resultOption.series[0].data = val["electricityMeter"];
-        this.resultOption.series[1].data = val["WATER_METER"];
+        this.resultOption.series[1].data = val["waterMeter"];
-        this.resultOption.series[2].data = val["GAS_METER"];
+        this.resultOption.series[2].data = val["gasMeter"];
         this.updateEcharts();
       },
       deep: true,

src/views/bigScreen/v3/profile/NotificationAlarm.vue

@@ -41,7 +41,7 @@
               width="100%"
             >
               <span style="letter-spacing: 1px">
-                {{ alarmInfo['address'] }}
+                {{ alarmInfo['projectAddress'] }}
               </span>
             </marquee>
           </div>
@@ -49,7 +49,7 @@
         <div class="alarm-info">
           <img class="alarm-icon" src="@/assets/images/big/map_alarm.png" />
           <span
-            >{{ alarmInfo['alarmContent'] }}</span
+            >{{ alarmInfo['alarmContent'] || '--' }}</span
           >
         </div>
       </div>
@@ -59,7 +59,7 @@
   </div>
 </template>
 <script>
-import { webSocketProjectGatewayUrl } from "@/config/env";
+import { iotWebSocketAlarmBaseUrl } from "@/config/env";
 export default {
   name: "NotificationAlarm",
   props: {},
@@ -74,14 +74,15 @@ export default {
       intervalTime: 10,
       alarmInfo: {
         projectName: '中海创项目',
-        address: '福建省福州市闽侯县高新区软件园二',
+        projectAddress: '福建省福州市闽侯县高新区软件园二',
         alarmContent: '电池异常高温告警'
       }
     };
   },
   watch: {},
   created() {
-    setTimeout(this.handleTextSend, 5000);
+    // setTimeout(this.handleTextSend, 5000);
+    this.connection();
   },
   methods: {
     handleTextSend() {
@@ -100,14 +101,13 @@ export default {
         if(this.interval) {
           clearInterval(this.interval)
         };
+        this.dialogShow = false;
         this.audioHidden = false;
-        setTimeout(this.handleTextSend, 5000);
+        // setTimeout(this.handleTextSend, 5000);
       };
     },
     // 告警 方法 触发情况
     handlePlayAudio() {
-      // this.$refs.audio.currentTime = 0; //从头开始播放提示音
-      // this.$refs.audio.play(); //播放
       this.audioHidden = true;
       if (this.interval) {
         clearInterval(this.interval);
@@ -119,25 +119,26 @@ export default {
       if (this.stompClient) {
         return;
       }
-      if (!webSocketProjectGatewayUrl) {
+      if (!iotWebSocketAlarmBaseUrl) {
         return;
       }
-      if (!this.list || this.length <= 0) {
+      this.stompClient = new WebSocket(`${iotWebSocketAlarmBaseUrl}/${this.$store.getters.userId}/${this.getGuid()}`);
-        return;
-      }
-      let deviceIds = this.list.map((v) => v["deviceId"]);
-      this.stompClient = new WebSocket(
-        `${webSocketProjectGatewayUrl}/${this.getGuid()}/${deviceIds.toString()}`
-      );
       this.stompClient.onmessage = this.socket_message;
       this.stompClient.onclose = this.socket_onclose;
     },
     socket_message(evt) {
-      console.log("wsljcg:=", evt);
+      if (evt.data === 'success') {
+        if(this.getExploreName() === 'Chrome') {
+          this.$alert('告警已连接，请开启声音接听...', '提示', {
+          confirmButtonText: '确定',
+        });
+        }
+      } else {
         const data = JSON.parse(evt.data);
-      console.log("socket-message:", data);
+        this.alarmInfo = Object.assign(this.alarmInfo, data);
-      // this.handleDeviceInfo(data)
+        this.handleTextSend();
         this.$forceUpdate();
+      }
     },
     socket_onclose(e) {
       this.stompClient = null;
@@ -168,6 +169,33 @@ export default {
         }
       );
     },
+    getExploreName(){
+      var userAgent = navigator.userAgent;
+      if(userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1){
+        return 'Opera';
+      }
+      else if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1){
+        return 'IE';
+      }
+      else if(userAgent.indexOf("Edge") > -1){
+          return 'Edge';
+      }
+      else if(userAgent.indexOf("Firefox") > -1){
+          return 'Firefox';
+      }
+      else if(userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1){
+        return 'Safari';
+      }
+      else if(userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1){
+          return 'Chrome';
+      }
+      else if(!!window.ActiveXObject || "ActiveXObject" in window){
+          return 'IE>=11';
+      }
+      else{
+        return 'Unkonwn';
+      }
+    }
   },
   destroyed() {
     this.closeSocket();

src/views/iot/project/profileV2/AlarmManage/index.vue

@@ -278,7 +278,9 @@ export default {
   },
   watch: {
     sourceId(val) {
-      this.init()
+      if (val !== undefined && val !== null) {
+        this.handleQuery()
+      }
     }
   },
   created() {
@@ -346,6 +348,7 @@ export default {
         this.queryParams.timeType === "day"
           ? this.parseTime(new Date(), "{y}-{m}-{d} 00:00:00")
           : this.parseTime(new Date(), "{y}-{m}-01 00:00:00");
+      this.handleQuery();
     },
   },
 };

src/views/iot/project/profileV2/EnergyManage/EElectricity.vue

@@ -6,24 +6,21 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="空间：" prop="parentId">
+      <el-form-item label="空间：" prop="spaceId">
         <treeselect
           style="width: 200px"
-          v-model="queryParams.parentId"
+          v-model="queryParams.spaceId"
           :options="querySpaceOptions"
           :normalizer="normalizer"
           placeholder="请选择空间"
         />
       </el-form-item>
-      <el-form-item label="时间：" prop="queryTime">
+      <el-form-item label="月份：" prop="queryTime">
         <el-date-picker
           v-model="queryTime"
-          type="datetimerange"
+          type="month"
           :clearable="false"
-          range-separator="至"
+          placeholder="选择月">
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        >
         </el-date-picker>
       </el-form-item>
 
@@ -61,7 +58,7 @@
         <el-table-column
           label="设备号"
           align="left"
-          width="180px"
+          width="250px"
           prop="deviceId"
         >
           <template slot-scope="scope">
@@ -71,39 +68,39 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="地点" align="left" prop="address">
+        <el-table-column label="地点" align="left" prop="deviceAddress">
           <template slot-scope="scope">
-            <span class="lay-table-textarea" :title="scope.row.address">
+            <span class="lay-table-textarea" :title="scope.row.deviceAddress">
-              {{ scope.row.address }}
+              {{ scope.row.deviceAddress }}
             </span>
           </template>
         </el-table-column>
 
-        <el-table-column label="本月电量" align="center" width="100" prop="address">
+        <el-table-column label="本月电量" align="center" width="100" prop="tmReadSum">
           <template slot-scope="scope">
-            <span class="lay-table-textarea" :title="scope.row.address">
+            <span class="lay-table-textarea" :title="scope.row.tmReadSum">
-              {{ scope.row.address || 0 }}
+              {{ scope.row.tmReadSum || 0 }}
             </span>
           </template>
         </el-table-column>
 
-        <el-table-column label="上月电量" align="center" width="100" prop="address">
+        <el-table-column label="上月电量" align="center" width="100" prop="lmReadSum">
           <template slot-scope="scope">
-            <span class="lay-table-textarea" :title="scope.row.address">
+            <span class="lay-table-textarea" :title="scope.row.lmReadSum">
-              {{ scope.row.address || 0 }}
+              {{ scope.row.lmReadSum || 0 }}
             </span>
           </template>
         </el-table-column>
 
-        <el-table-column label="对比" align="center" width="100" prop="address">
+        <el-table-column label="对比" align="center" width="100" prop="qoq">
           <template slot-scope="scope">
-            <span class="lay-table-textarea" :title="scope.row.address">
+            <span class="lay-table-textarea" :title="scope.row.qoq">
-              {{ scope.row.address || 0 }}
+              {{ scope.row.qoq || 0 }}%
             </span>
           </template>
         </el-table-column>
 
-        <el-table-column label="联系人" align="center" width="100" prop="name">
+        <!-- <el-table-column label="联系人" align="center" width="100" prop="name">
           <template slot-scope="scope">
             <span class="lay-table-textarea" :title="scope.row.name">
               {{ scope.row.name}}
@@ -117,12 +114,12 @@
               {{ scope.row.phone}}
             </span>
           </template>
-        </el-table-column>
+        </el-table-column> -->
 
-        <el-table-column label="状态" align="center" width="100" prop="status">
+        <el-table-column label="状态" align="center" width="120" prop="status">
             <template slot-scope="scope">
               <div class="e-table-dev-status">
-                <span>{{ scope.row.deviceStatus == '0' ? '启用':'禁用' }}</span>
+                <span>{{ scope.row.deviceStatus === '0' ? '启用' : '禁用' }}</span>
                 <el-divider direction="vertical"></el-divider>
                 <span class="c-success" v-if="scope.row.deviceState === 'ONLINE'">在线</span>
                 <span class="c-danger" v-else-if="scope.row.deviceState === 'OFFLINE'">离线</span>
@@ -163,7 +160,7 @@
 <script>
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import { projectEneElectricityTable } from "@/api/iot/project_new";
+import { projectElectricityTable } from "@/api/iot/project_new";
 import { listSpace } from "@/api/iot/space";
 export default {
   name: "EElectricity",
@@ -187,10 +184,10 @@ export default {
   data() {
     return {
       queryParams: {
-        parentId: null,
+        spaceId: null,
         deviceId: '',
       },
-      queryTime: [],
+      queryTime: '',
       querySpaceOptions: [],
       tableList: [],
       tableLoading: false,
@@ -209,10 +206,7 @@ export default {
   },
   methods: {
     init() {
-      this.queryTime = [
+      this.queryTime = this.parseTime(new Date(), "{y}-{m}-01 00:00:00");
-        this.parseTime(new Date(), "{y}-{m}-{d} 00:00:00"),
-        this.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
-      ];
       this.getSpaceList();
       this.handleQuery();
     },
@@ -252,54 +246,21 @@ export default {
     },
     // 查询列表
     getList() {
-      console.log('query-', Object.assign(this.queryParams, {
+        var queryParams = JSON.parse(JSON.stringify(this.queryParams));
+        projectElectricityTable(
+          Object.assign(queryParams, {
             projectId: this.sourceId,
-          startTime: this.parseTime(
+            time: this.parseTime(
-            new Date(this.queryTime[0]),
+              new Date(this.queryTime),
-            "{y}-{m}-{d} {h}:{i}:{s}"
+              "{y}-{m}-01 00:00:00"
             ),
-          endTime: this.parseTime(
+            typeCode: this.tempType,
-            new Date(this.queryTime[1]),
+            timeType: 'month'
-            "{y}-{m}-{d} {h}:{i}:{s}"
+          })
-          )
+        ).then((res) => {
-        }))
+          this.tableList = res.rows;
-        this.tableList = [
+          this.total = res.total;
-          {
+        });
-            name: '林电工',
-            deviceId: '123456789764',
-            deviceName: 'HC-3456789764',
-            address: '西外环中路18栋18楼101#',
-            phone: '15860888888',
-            deviceState: 'ONLINE',
-            deviceStatus: '0'
-          },
-          {
-            name: '林电工',
-            deviceId: '123456789764',
-            deviceName: 'HC-3456789764',
-            address: '西外环中路18栋18楼101#',
-            phone: '15860888888',
-            deviceState: 'ONLINE',
-            deviceStatus: '0'
-          }
-        ]
-      // projectAbnormalRecordTable(
-      //   Object.assign(this.queryParams, {
-      //     projectId: this.sourceId,
-      //     startTime: this.parseTime(
-      //       new Date(this.queryTime[0]),
-      //       "{y}-{m}-{d} {h}:{i}:{s}"
-      //     ),
-      //     endTime: this.parseTime(
-      //       new Date(this.queryTime[1]),
-      //       "{y}-{m}-{d} {h}:{i}:{s}"
-      //     ),
-      //     typeCode: this.tempType,
-      //   })
-      // ).then((res) => {
-      //   this.tableList = res.rows;
-      //   this.total = res.total;
-      // });
     },
   },
 };

src/views/iot/project/profileV2/EnergyManage/EEnergyLoad.vue

@@ -0,0 +1,418 @@
+<template>
+  <div class="e-project-energy-load">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="设备号：" prop="deviceId">
+        <el-input
+          style="width: 150px"
+          v-model="queryParams.deviceId"
+          placeholder="输入设备号"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="init"
+          >搜索</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <div class="load-center">
+      <div class="left">
+        <e-echarts-line
+          ref="echartsLineTwoDaysLoad"
+          :styles="echartsOption.styles"
+          :colorList="echartsOption.colorList"
+          eId="echartsLineTwoDaysLoad"
+          :option="twoDaysLoadOption"
+        ></e-echarts-line>
+      </div>
+
+      <div class="right">
+        <e-echarts-line
+          ref="echartsLineTwoWeeksLoad"
+          :styles="echartsOption.styles"
+          :colorList="echartsOption.colorList"
+          eId="echartsLineTwoWeeksLoad"
+          :option="twoWeeksLoadOption"
+        ></e-echarts-line>
+      </div>
+    </div>
+    <div class="load-footer">
+      <e-echarts-bar
+        ref="echartsLineTwoYearsLoad"
+        :styles="echartsOption.styles"
+        :colorList="echartsOption.colorList"
+        eId="echartsLineTwoYearsLoad"
+        :option="twoYearsLoadOption"
+      ></e-echarts-bar>
+    </div>
+  </div>
+</template>
+<script>
+import EEchartsLine from "@/components/Echarts/EEchartsLine";
+import EEchartsBar from "@/components/Echarts/EEchartsBar";
+import * as echarts from "echarts";
+import { projectElectricityStatChart, projectElectricityStatChartYear } from "@/api/iot/project_new";
+export default {
+  name: "EEnergyLoad",
+  props: {
+    projectInfo: {
+      type: Object,
+      require: true,
+    },
+    sourceId: {
+      type: [Number, String],
+      require: true,
+    },
+    tempType: {
+      type: String,
+      require: true,
+    },
+  },
+  components: {
+    EEchartsLine,
+    EEchartsBar
+  },
+  data() {
+    return {
+      echartsOption: {
+        styles: "width: 100%; height: calc(100% - 35px);",
+        colorList: ["#1890FF", "#EE6666", "#FFCC00"],
+        eId: "safetytTemplateIdx",
+      },
+      twoDaysLoadOption: {
+        color: ["#1890FF", "#EE6666", "#FFCC00"],
+        title: {
+          text: "近两天的负载情况",
+          show: true,
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          top: 0,
+          right: 10,
+          data: [],
+          // icon: "circle",
+          textStyle: {
+            color: "#38486a",
+            fontSize: 12,
+            fontWeight: 400,
+          },
+        },
+        grid: {
+          left: "20",
+          right: "20",
+          bottom: "10",
+          top: 50,
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          show: true,
+          data: [],
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#606266",
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#606266",
+            },
+          },
+        },
+        series: [],
+      },
+      twoWeeksLoadOption: {
+        color: ["#1890FF", "#EE6666", "#FFCC00"],
+        title: {
+          text: "近两周的负载情况",
+          show: true,
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          top: 0,
+          right: 10,
+          data: [],
+          // icon: "circle",
+          textStyle: {
+            color: "#38486a",
+            fontSize: 12,
+            fontWeight: 400,
+          },
+        },
+        grid: {
+          left: "20",
+          right: "20",
+          bottom: "10",
+          top: 50,
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          show: true,
+          data: [],
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#606266",
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#606266",
+            },
+          },
+        },
+        series: [],
+      },
+      twoYearsLoadOption: {
+        title: {
+          text: "近两年的负载情况",
+          show: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisTick: {
+              alignWithLabel: true,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          {
+            name: '今年',
+            type: 'bar',
+            barWidth: "30%",
+            data: [],
+            markPoint: {
+              symbolSize: 35,
+              data: [
+                { type: "max", name: "Max" },
+                { type: "min", name: "Min" },
+              ],
+            },
+          },
+          {
+            name: '去年',
+            type: 'bar',
+            barWidth: "30%",
+            data: [],
+            markPoint: {
+              symbolSize: 35,
+              data: [
+                { type: "max", name: "Max" },
+                { type: "min", name: "Min" },
+              ],
+            }
+          }
+        ],
+      },
+      queryTime: [],
+      queryParams: {
+        deviceId: "",
+      },
+    };
+  },
+  watch: {
+    sourceId(val) {
+      if (val !== null && val !== undefined) {
+        this.init();
+      }
+    },
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.queryTwoDaysLoad();
+      this.queryTwoWeeksLoad();
+      this.queryTwoYearsLoad();
+    },
+    // 查询 最近两年负载
+    queryTwoYearsLoad() {
+      this.twoYearsLoadOption.xAxis[0].data = [];
+      this.twoYearsLoadOption.series[0].data = [];
+      this.twoYearsLoadOption.series[1].data = [];
+      var queryParams = JSON.parse(JSON.stringify(this.queryParams));
+      projectElectricityStatChartYear(
+        Object.assign(queryParams, {
+          projectId: this.sourceId,
+          time: this.parseTime(new Date(), "{y}-01-01 00:00:00"),
+          timeType: 'year'
+        })
+      ).then((res) => {
+        this.twoYearsLoadOption.xAxis[0].data = res.data["readTime"];
+        this.twoYearsLoadOption.series[0].data = res.data["yearReadSum"];
+        this.twoYearsLoadOption.series[1].data = res.data["lastYearReadSum"];
+        if(this.$refs.echartsLineTwoYearsLoad) {
+          this.$refs.echartsLineTwoYearsLoad.updateEchart()
+        }
+        this.$forceUpdate();
+      });
+    },
+    // 查询 最近两周的负载情况
+    queryTwoWeeksLoad() {
+      var now = new Date();
+      var nowTime = now.getTime();
+      var day = now.getDay();
+      var oneDayTime = 24*60*60*1000;
+      //显示周一
+      var MondayTime = nowTime - (day-1)*oneDayTime;
+      var queryParams = JSON.parse(JSON.stringify(this.queryParams));
+      this.twoWeeksLoadOption.series = [];
+      projectElectricityStatChart(Object.assign({
+        projectId: this.sourceId,
+        time: this.parseTime(new Date(MondayTime), "{y}-{m}-{d} 00:00:00"),
+        timeType: 'week'
+      }, queryParams)).then((res) => {
+        this.twoWeeksLoadOption.xAxis.data = [...res.data["name"]];
+        let keys = Object.keys(res.data);
+        this.twoWeeksLoadOption.legend.data = keys.filter((v) => {
+          if (v !== "name") {
+            return v;
+          }
+        });
+        var list = this.handleLineOption(keys, res.data, "name");
+        this.twoWeeksLoadOption.series = list.filter(
+          (v) => v !== undefined && v !== null
+        );
+        if (this.$refs.echartsLineTwoWeeksLoad) {
+          this.$refs.echartsLineTwoWeeksLoad.updateEchart();
+        }
+        this.$forceUpdate();
+      });
+    },
+    // 查询 最近两天的负载情况
+    queryTwoDaysLoad() {
+      let newDate = this.parseTime(new Date(), "{y}-{m}-{d} 00:00:00");
+      var queryParams = JSON.parse(JSON.stringify(this.queryParams));
+      this.twoDaysLoadOption.series = [];
+      projectElectricityStatChart(Object.assign({
+        projectId: this.sourceId,
+        time: newDate,
+        timeType: 'day'
+      }, queryParams)).then((res) => {
+        this.twoDaysLoadOption.xAxis.data = [...res.data["name"]];
+        let keys = Object.keys(res.data);
+        this.twoDaysLoadOption.legend.data = keys.filter((v) => {
+          if (v !== "name") {
+            return v;
+          }
+        });
+        var list = this.handleLineOption(keys, res.data, "name");
+        this.twoDaysLoadOption.series = list.filter(
+          (v) => v !== undefined && v !== null
+        );
+        if (this.$refs.echartsLineTwoDaysLoad) {
+          this.$refs.echartsLineTwoDaysLoad.updateEchart();
+        }
+        this.$forceUpdate();
+      });
+    },
+    // 折线图表数据 折线 处理
+    handleLineOption(keys, data ,exclude) {
+      var list = keys.map((v) => {
+        if (v !== (exclude || "name")) {
+          return {
+            name: v,
+            type: "line",
+            smooth: false,
+            symbolSize: 2,
+            markPoint: {
+              symbolSize: 35,
+              data: [
+                { type: "max", name: "Max" },
+                { type: "min", name: "Min" },
+              ],
+            },
+            label: {
+              show: false,
+              formatter: function (params) {
+                return echarts.format.formatTime("yyyy-MM-dd", params.value);
+              },
+              backgroundColor: "#7581BD",
+            },
+            data: data[v],
+          };
+        }
+      });
+      return [...list];
+    },
+  },
+};
+</script>
+<style lang="scss">
+.e-project-energy-load {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  .load-center {
+    width: 100%;
+    height: 300px;
+    display: flex;
+    .left {
+      width: 50%;
+      height: 100%;
+    }
+    .right {
+      width: 50%;
+      height: 100%;
+    }
+  }
+  .load-footer {
+    height: 300px;
+    width: 100%;
+  }
+}
+</style>

src/views/iot/project/profileV2/SafetyTemplate/index.vue

@@ -273,7 +273,7 @@ export default {
   watch: {
     sourceId(val) {
       if (val !== null && val !== undefined) {
-        this.init();
+        this.handleQuery();
       }
     },
     tempType(val) {
@@ -288,6 +288,7 @@ export default {
   },
   methods: {
     init() {
+      this.queryParams.timeType = 'day'
       this.time =
         this.queryParams.timeType === "day"
           ? this.parseTime(new Date(), "{y}-{m}-{d} 00:00:00")

src/views/iot/project/profileV2/details.vue

@@ -120,6 +120,7 @@ import ELeakageCurrent from './SafetyTemplate/ELeakageCurrent'
 import EDebuff from './SafetyTemplate/EDebuff'
 import EDeviceSwitchWarning from './SafetyTemplate/EDeviceSwitchWarning'
 import EElectricity from './EnergyManage/EElectricity'
+import EEnergyLoad from './EnergyManage/EEnergyLoad'
 
 export default {
   name: "projectDetailV2",
@@ -140,7 +141,8 @@ export default {
     ELeakageCurrent,
     EDebuff,
     EDeviceSwitchWarning,
-    EElectricity
+    EElectricity,
+    EEnergyLoad
   },
   props: {
     sourceId: {
@@ -232,14 +234,19 @@ export default {
           ]
         },
         {
-          label: "综合管理",
+          label: "能源管理",
-          key: "energy",
+          key: "energyManage",
           children: [
             {
               label: "电量",
               key: "electricity",
               template: "EElectricity",
             },
+            {
+              label: "负载",
+              key: "energyLoad",
+              template: "EEnergyLoad",
+            },
           ],
         },
       ],