更新首页全国实时负荷弹窗，完善欠发情况展示样式

.env.development

@@ -1,10 +1,11 @@
 # VUE_APP_API=http://10.81.3.155:8020
-# VUE_APP_API=http://192.168.1.104:6060
-VUE_APP_API=http://10.81.3.153:6060
+VUE_APP_API=http://192.168.1.106:6060
+# VUE_APP_API=http://10.81.3.153:6060
 
 # 经济运行 安全监视 
-VUE_APP_Matrix=http://10.81.3.153:6060
-# VUE_APP_Matrix=http://192.168.1.104:6060
+VUE_APP_Matrix=http://192.168.1.106:6060
+# VUE_APP_Matrix=http://10.81.3.153:6060
+
 
 VUE_APP_ADAPTERURL=http://10.81.3.155:8011
 

src/api/home/home.js

@@ -39,3 +39,10 @@ export function FindProjectplan(data) {
     method: "get",
   });
 }
+export function FindGroupRealtime(data) {
+  return request({
+    baseURL: process.env.VUE_APP_Matrix,
+    url: `cockpit/GroupRealtime?wpId=${data.wpId}&uniformCode=SSZGL`,
+    method: "get",
+  });
+}

src/views/Home/components/map.vue

@@ -766,6 +766,30 @@
           </BarCharts>
         </div>
       </el-dialog>
+      <el-dialog
+        class="dialogs"
+        width="80%"
+        v-model="dialogGroupRealname"
+        :show-close="true"
+      >
+        <template #title>
+          <div class="dialog-title">
+            <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
+            <div class="title">{{ showName }}</div>
+          </div>
+        </template>
+        <div class="dialog-body" style="height: 40vh">
+          <img class="dialog-img" src="@assets/imgs/dialog.png" />
+          <windChartCom
+            :windCurveValues="groupList"
+            :unit="'MW'"
+            :CurveTitle="'实时负荷'"
+            width="100%"
+            height="45vh"
+            chartId="windChar"
+          />
+        </div>
+      </el-dialog>
       <Row type="flex" style="margin-bottom: 20px">
         <Col :span="24">
           <div class="model-bg-new">
@@ -773,7 +797,11 @@
               <div class="name">实时负荷</div>
               <div class="unit">(单位: MW)</div>
             </div>
-            <power-review-home :data="powerDataHome" :id="wpId" />
+            <power-review-home
+              :data="powerDataHome"
+              :id="wpIds"
+              @chartClick="showPowerChart"
+            />
           </div>
           <!--   @chartClick="showPowerChart" -->
         </Col>
@@ -1440,7 +1468,8 @@ export default {
       showName: "",
       StationinformationData: [],
       showkey: "",
-
+      dialogGroupRealname: false, //全国实时负荷弹窗开关
+      groupList: [], //全国实时负荷弹窗数据
       type: "fc", //发电量展示类型
       tabShow: 0,
       timmer: null, // 计时器
@@ -1576,27 +1605,18 @@ export default {
               title: "清洁能源",
               value: (data?.qt?.sjgl / 1000).toFixed(2),
               dialogTitle: "清洁能源",
-              subUrl: "genreset/findGLDetail",
-              targetName: "bzgl",
-              dialogType: "powerLineChart",
               max: 3000,
             },
             {
               title: "风电",
               value: (data?.qt?.fdsjgl / 1000).toFixed(2),
-              dialogTitle: "功率详情",
-              subUrl: "genreset/findGLDetail",
-              targetName: "bzgl",
-              dialogType: "powerLineChart",
+              dialogTitle: "风电功率详情",
               max: 3000,
             },
             {
               title: "光伏",
               value: (data?.qt?.gfsjgl / 1000).toFixed(2),
-              dialogTitle: "保证功率详情",
-              subUrl: "genreset/findGLDetail",
-              targetName: "bzgl",
-              dialogType: "powerLineChart",
+              dialogTitle: "光伏功率详情",
               max: 3000,
             },
           ];
@@ -1859,6 +1879,12 @@ export default {
       this.flag = wpId.includes("FDC") || wpId.includes("GDC") ? true : false;
       this.currentActiveTab(penetrateType);
     },
+    // 全国实时负荷点击弹窗
+    showPowerChart({ dialogTitle, data }) {
+      this.dialogGroupRealname = true;
+      this.showName = dialogTitle;
+      this.groupList = data;
+    },
     // 区域实时负荷点击弹窗
     handleClick(uniformCode, title, unit) {
       let key = "";

src/views/Home/components/power-review-home.vue

@@ -8,7 +8,7 @@
           :value="item.value"
           :max="item.max"
           height="10vh"
-        
+          @click="openDialog(item.dialogTitle)"
         />
       </Col>
     </Row>
@@ -19,8 +19,8 @@
 import Col from "@/components/coms/grid/col.vue";
 import Row from "../../../components/coms/grid/row.vue";
 import DashPieChart from "@/components/chart/pie/dash-pie-chart.vue";
-import api from "@api/cockpit/matrix/index.js";
-
+import { FindGroupRealtime } from "@/api/home/home.js";
+import dayjs from "dayjs";
 export default {
   components: {
     Row,
@@ -32,6 +32,20 @@ export default {
     return {
       // 功率复核数据
       PowerLoad: [],
+      valuelist: [
+        {
+          value: "value1",
+          name: "清洁能源",
+        },
+        {
+          value: "value2",
+          name: "风电功率详情",
+        },
+        {
+          value: "value3",
+          name: "光伏功率详情",
+        },
+      ],
       wpId: "",
     };
   },
@@ -53,95 +67,26 @@ export default {
   },
 
   methods: {
-    openDialog(dialogTitle, subUrl, targetName, dialogType) {
+    openDialog(dialogTitle) {
       let data = {
-        id: this.wpId,
-        targetName,
+        wpId: this.wpId,
       };
-      api.findInfos(subUrl, data).then((res) => {
-        let powerLineChartData = {
-          // 图表所用单位
-          units: [""],
-          value: [],
-        };
-
-        res.data.forEach((pEle, pIndex) => {
-          powerLineChartData.value.push({
-            title: pEle[0].name,
-            yAxisIndex: 0,
-            smooth: true,
-            value: [],
-          });
-
-          pEle.forEach((cEle) => {
-            powerLineChartData.value[pIndex].value.push({
-              text: new Date(cEle.time).formatDate("hh:mm:ss"),
-              value: cEle.value1,
-            });
-          });
-        });
-
+      let obj = this.valuelist.find((item) => item.name == dialogTitle);
+      FindGroupRealtime(data).then(({ data }) => {
         this.$emit("chartClick", {
           dialogTitle,
-          dialogType,
-          data: powerLineChartData,
+          //   dialogType,
+          data: data.map((item) => {
+            return {
+              dateTime: dayjs()
+                .startOf("date")
+                .add(item.hours, "hour")
+                .format("MM-DD HH:mm"),
+              value: item[obj.value],
+            };
+          }),
         });
       });
-      // let that = this;
-      // that.API.requestData({
-      //   method: "POST",
-      //   subUrl,
-      //   data: {
-      //     id: that.wpId,
-      //     targetName,
-      //   },
-      //   success(res) {
-      //     let powerLineChartData = {
-      //       // 图表所用单位
-      //       units: [""],
-      //       value: [],
-      //     };
-
-      //     res.data.forEach((pEle, pIndex) => {
-      //       powerLineChartData.value.push({
-      //         title: pEle[0].name,
-      //         yAxisIndex: 0,
-      //         smooth: true,
-      //         value: [],
-      //       });
-
-      //       pEle.forEach((cEle) => {
-      //         powerLineChartData.value[pIndex].value.push({
-      //           text: new Date(cEle.time).formatDate("hh:mm:ss"),
-      //           value: cEle.value1,
-      //         });
-      //       });
-      //     });
-
-      //     // let powerLineChartData = [];
-
-      //     // res.data.forEach((pEle, pIndex) => {
-      //     //   powerLineChartData.push({
-      //     //     title: pEle[0].name,
-      //     //     smooth: true,
-      //     //     value: [],
-      //     //   });
-
-      //     //   pEle.forEach((cEle) => {
-      //     //     powerLineChartData[pIndex].value.push({
-      //     //       text: new Date(cEle.time).formatDate("hh:mm:ss"),
-      //     //       value: cEle.value1,
-      //     //     });
-      //     //   });
-      //     // });
-
-      //     that.$emit("chartClick", {
-      //       dialogTitle,
-      //       dialogType,
-      //       data: powerLineChartData,
-      //     });
-      //   },
-      // });
     },
   },
 

src/views/stateMonitor/DetailMatrix/detailMatrix.vue

@@ -98,6 +98,7 @@
       </div>
       <!-- 风电场/光电站列表 -->
       <el-scrollbar
+        height="calc(100% - 72px)"
         v-loading="loading"
         element-loading-background="rgba(4, 12, 11, 0.8)"
         element-loading-text="加载中..."
@@ -266,7 +267,7 @@
                 <div class="matrix-progress">
                   <div
                     class="progress-block"
-                    :style="{ width: val.rate + '%' }"
+                    :style="{ width: (val.rate > 100 ? 100 : val.rate) + '%' }"
                     :class="
                       findUpColor(unpaidList, parseInt(Number(val.ssqfzt)) + 1)
                     "

src/views/stateMonitor/factoryMonitor/photovoltaic/lightMatrixMonitor/index.vue

@@ -256,7 +256,9 @@
                   <div class="matrix-progress">
                     <div
                       class="progress-block"
-                      :style="{ width: val.rate + '%' }"
+                      :style="{
+                        width: (val.rate > 100 ? 100 : val.rate) + '%',
+                      }"
                       :class="
                         findUpColor(ratelist, parseInt(Number(val.ssqfzt)) + 1)
                       "

src/views/stateMonitor/factoryMonitor/windPowerPlant/matrixMonitor/index.vue

@@ -256,7 +256,7 @@
                   <div class="matrix-progress">
                     <div
                       class="progress-block"
-                      :style="{ width: val.rate + '%' }"
+                      :style="{ width: (val.rate > 100 ? 100 : val.rate) + '%' }"
                       :class="
                         findUpColor(ratelist, parseInt(Number(val.ssqfzt)) + 1)
                       "