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

2022-09-02 17:14:31 +08:00 · 2022-09-02 17:14:31 +08:00 · 6c79234558
parent 141f553807
commit 6c79234558
12 changed files with 566 additions and 116 deletions
--- a/public/images/alarm_tips.mp3
+++ b/public/images/alarm_tips.mp3
--- a/src/api/iot/project_new.js
+++ b/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
+  });
+}
--- a/src/config/env.js
+++ b/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/'
--- a/src/utils/hciot.js
+++ b/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);
-		return baseURL + importUrl;
+    console.log('baseUrl:', baseHref + baseURL + importUrl);
+		return baseHref + baseURL + importUrl;
 	} else if (importUrl.indexOf('data:image/') === 0 || importUrl.indexOf('/static/') === 0) {
 		return importUrl;
  }
--- a/src/views/bigScreen/v3/index.vue
+++ b/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;
--- a/src/views/bigScreen/v3/profile/ETrendCensus.vue
+++ b/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) {
-        console.log('result---:', val)
+      handler: function (val) {
        this.resultOption.xAxis.data = val["name"];
-        this.resultOption.series[0].data = val["ELECTRICITY_METER"];
-        this.resultOption.series[1].data = val["WATER_METER"];
-        this.resultOption.series[2].data = val["GAS_METER"];
+        this.resultOption.series[0].data = val["electricityMeter"];
+        this.resultOption.series[1].data = val["waterMeter"];
+        this.resultOption.series[2].data = val["gasMeter"];
        this.updateEcharts();
      },
      deep: true,
--- a/src/views/bigScreen/v3/profile/NotificationAlarm.vue
+++ b/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) {
-        return;
-      }
-      let deviceIds = this.list.map((v) => v["deviceId"]);
-      this.stompClient = new WebSocket(
-        `${webSocketProjectGatewayUrl}/${this.getGuid()}/${deviceIds.toString()}`
-      );
+      this.stompClient = new WebSocket(`${iotWebSocketAlarmBaseUrl}/${this.$store.getters.userId}/${this.getGuid()}`);
      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.handleDeviceInfo(data)
+        this.alarmInfo = Object.assign(this.alarmInfo, 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();
--- a/src/views/iot/project/profileV2/AlarmManage/index.vue
+++ b/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();
    },
  },
 };
--- a/src/views/iot/project/profileV2/EnergyManage/EElectricity.vue
+++ b/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="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        >
+          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">
-              {{ scope.row.address }}
+            <span class="lay-table-textarea" :title="scope.row.deviceAddress">
+              {{ 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">
-              {{ scope.row.address || 0 }}
+            <span class="lay-table-textarea" :title="scope.row.tmReadSum">
+              {{ 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">
-              {{ scope.row.address || 0 }}
+            <span class="lay-table-textarea" :title="scope.row.lmReadSum">
+              {{ 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">
-              {{ scope.row.address || 0 }}
+            <span class="lay-table-textarea" :title="scope.row.qoq">
+              {{ 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.parseTime(new Date(), "{y}-{m}-{d} 00:00:00"),
-        this.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
-      ];
+      this.queryTime = this.parseTime(new Date(), "{y}-{m}-01 00:00:00");
      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(
-            new Date(this.queryTime[0]),
-            "{y}-{m}-{d} {h}:{i}:{s}"
+            time: this.parseTime(
+              new Date(this.queryTime),
+              "{y}-{m}-01 00:00:00"
            ),
-          endTime: this.parseTime(
-            new Date(this.queryTime[1]),
-            "{y}-{m}-{d} {h}:{i}:{s}"
-          )
-        }))
-        this.tableList = [
-          {
-            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;
-      // });
+            typeCode: this.tempType,
+            timeType: 'month'
+          })
+        ).then((res) => {
+          this.tableList = res.rows;
+          this.total = res.total;
+        });
    },
  },
 };
--- a/src/views/iot/project/profileV2/EnergyManage/EEnergyLoad.vue
+++ b/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>
--- a/src/views/iot/project/profileV2/SafetyTemplate/index.vue
+++ b/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")
--- a/src/views/iot/project/profileV2/details.vue
+++ b/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: "综合管理",
-          key: "energy",
+          label: "能源管理",
+          key: "energyManage",
          children: [
            {
              label: "电量",
              key: "electricity",
              template: "EElectricity",
            },
+            {
+              label: "负载",
+              key: "energyLoad",
+              template: "EEnergyLoad",
+            },
          ],
        },
      ],