常规上传

src/views/Home/components/map.vue

@@ -82,6 +82,7 @@
         @mouseenter="switchShow = true"
         @mouseleave="switchShow = false"
         :style="{ width: tabShow == 0 ? '406px' : 'calc(170px + 20px)' }"
+        v-if="false"
       >
         <ul>
           <li v-show="tabShow == -1 || tabShow == 0">
@@ -316,7 +317,124 @@
           </ul>
         </div>
       </div>
-      <div class="ecoName safe_power">
+      <div class="leftZbBox safe_power">
+        <span class="zbTitle">清洁能源公司发电指标</span>
+        <div class="fTitle">
+          <span class="name">总装机容量:</span>
+          <span class="num">{{ zbMap.zjrl }}</span>
+          <span class="unit">MW</span>
+        </div>
+        <div class="tb">
+          <div class="zbDetailBox">
+            <div class="item">
+              <p class="name">月利用小时</p>
+              <p class="num">{{ zbMap.yllxs }}</p>
+              <p class="unit">小时</p>
+            </div>
+            <div class="item">
+              <p class="name">年利用小时</p>
+              <p class="num">{{ zbMap.nllxs }}</p>
+              <p class="unit">小时</p>
+            </div>
+            <div class="item">
+              <p class="name">日35KV发电量</p>
+              <p class="num">{{ zbMap.r35kv }}</p>
+              <p class="unit">万kWh</p>
+            </div>
+            <div class="item">
+              <p class="name">月35KV发电量</p>
+              <p class="num">{{ zbMap.y35kv }}</p>
+              <p class="unit">万kWh</p>
+            </div>
+          </div>
+        </div>
+        <div class="tb">
+          <div class="zbDetailBox">
+            <div class="item">
+              <p class="name">年35KV发电量</p>
+              <p class="num">{{ zbMap.n35kv }}</p>
+              <p class="unit">万kWh</p>
+            </div>
+            <div class="item">
+              <p class="name">日上网电量</p>
+              <p class="num">{{ zbMap.rswdl }}</p>
+              <p class="unit">万KWh</p>
+            </div>
+            <div class="item">
+              <p class="name">月上网电量</p>
+              <p class="num">{{ zbMap.yswdl }}</p>
+              <p class="unit">万KWh</p>
+            </div>
+            <div class="item">
+              <p class="name">年上网电量</p>
+              <p class="num">{{ zbMap.nswdl }}</p>
+              <p class="unit">万KWh</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="leftZbBox safe_power">
+        <span class="zbTitle">清洁能源公司损失电量指标</span>
+        <!-- <div class="fTitle">
+              <span class="name">总装机容量:</span>
+              <span class="num">{{ zbMap.zjrl }}</span>
+              <span class="unit">MW</span>
+            </div> -->
+        <div class="tb">
+          <div class="zbDetailBox">
+            <div class="item">
+              <p class="name">日维护损失</p>
+              <p class="num">{{ zbMap.rwhssdl }}</p>
+              <p class="unit">万KWh</p>
+            </div>
+            <div class="item">
+              <p class="name">日故障损失</p>
+              <p class="num">{{ zbMap.rgzssdl }}</p>
+              <p class="unit">万KWh</p>
+            </div>
+            <div class="item">
+              <p class="name">日性能损失</p>
+              <p class="num">{{ zbMap.rxnssdl }}</p>
+              <p class="unit">万KWh</p>
+            </div>
+            <div class="item">
+              <p class="name">月维护损失</p>
+              <p class="num">{{ zbMap.ywhssdl }}</p>
+              <p class="unit">万KWh</p>
+            </div>
+            <div class="item">
+              <p class="name">月故障损失</p>
+              <p class="num">{{ zbMap.ygzssdl }}</p>
+              <p class="unit">万KWh</p>
+            </div>
+          </div>
+        </div>
+        <div class="tb">
+          <div class="zbDetailBox">
+            <div class="item">
+              <p class="name">月性能损失</p>
+              <p class="num">{{ zbMap.yxnssdl }}</p>
+              <p class="unit">万KWh</p>
+            </div>
+            <div class="item">
+              <p class="name">年维护损失</p>
+              <p class="num">{{ zbMap.nwhssdl }}</p>
+              <p class="unit">万KWh</p>
+            </div>
+            <div class="item">
+              <p class="name">年故障损失</p>
+              <p class="num">{{ zbMap.ngzssdl }}</p>
+              <p class="unit">万KWh</p>
+            </div>
+            <div class="item">
+              <p class="name">年性能损失</p>
+              <p class="num">{{ zbMap.nxnssdl }}</p>
+              <p class="unit">万KWh</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="ecoName safe_power">
         <p class="ecoTitle">社会贡献<span>万吨/月</span></p>
         <ul>
           <li class="eco_count">
@@ -360,8 +478,8 @@
             <p class="eco_name">二氧化硫</p>
           </li>
         </ul>
-      </div>
-      <div
+      </div> -->
+      <!-- <div
         class="my_echarts safe_power"
         v-if="penetrateType == 3"
         @dblclick="handleShowCharts(currentTitle)"
@@ -375,6 +493,9 @@
           :id="'cut-power'"
           :orient="'horizontal'"
         />
+      </div> -->
+      <div class="hover24Power safe_power">
+        <div id="hover24Powers" style="width: 100%; height: 100%"></div>
       </div>
     </div>
     <el-dialog
@@ -1882,7 +2003,80 @@ export default {
               powerMax,
               windSpeedMin,
               windSpeedMax,
-              splitNumber
+              splitNumber,
+              "hover72Powers"
+            );
+          }
+        }
+      });
+    },
+
+    initPageData2(res) {
+      let that = this;
+      that.$nextTick(() => {
+        const theme = sessionStorage.getItem("theme") === "true" ? true : false;
+        if (res && res.data) {
+          // 72小时功率曲线
+          if (res.data["72time"] && res.data["72time"].length > 0) {
+            let xAxis = [];
+            let seriesSpeed = [];
+            let seriesGl = [];
+            let seriesSJ = [];
+            let seriesYc = [];
+            res.data["72time"].forEach((it) => {
+              xAxis.push(dayjs(it.time).format("MM-DD HH:mm"));
+              seriesSpeed.push(it.speed);
+              seriesGl.push(it.expectedpower);
+              seriesSJ.push(it.power);
+              seriesYc.push(it.predictedpower);
+            });
+            let series = [
+              {
+                name: "平均风速",
+                data: seriesSpeed,
+                yAxisIndex: 1,
+                type: "line",
+                symbol: "none",
+              },
+              {
+                name: "理论功率",
+                data: seriesGl,
+                type: "line",
+                symbol: "none",
+                yAxisIndex: 0,
+              },
+              {
+                name: "实际功率",
+                data: seriesSJ,
+                type: "line",
+                symbol: "none",
+                yAxisIndex: 0,
+              },
+              {
+                name: "预测功率",
+                data: seriesYc,
+                type: "line",
+                symbol: "none",
+                yAxisIndex: 0,
+              },
+            ];
+
+            const allPowerData = seriesGl.concat(seriesSJ, seriesYc);
+            const powerMin = Math.min(...allPowerData);
+            const powerMax = Math.max(...allPowerData);
+            const windSpeedMin = Math.min(...seriesSpeed);
+            const windSpeedMax = Math.max(...seriesSpeed);
+            const splitNumber = 4;
+
+            that.getPowerLine(
+              xAxis,
+              series,
+              powerMin,
+              powerMax,
+              windSpeedMin,
+              windSpeedMax,
+              splitNumber,
+              "hover24Powers"
             );
           }
         }
@@ -1896,7 +2090,8 @@ export default {
       powerMax,
       windSpeedMin,
       windSpeedMax,
-      splitNumber
+      splitNumber,
+      chartId
     ) {
       const theme = this.$store.state.themeName === "dark" ? true : false;
       let myChart;
@@ -2009,9 +2204,12 @@ export default {
         series: series,
       };
       // 基于准备好的dom，初始化echarts实例
-      let dom = document.getElementById("hover72Powers");
+      let dom = document.getElementById(chartId);
       dom && dom.removeAttribute("_echarts_instance_");
 
+      console.log(111, dom);
+      console.log(222, option);
+
       myChart = this.$echarts.init(dom);
       this.chart72Options = myChart;
 
@@ -2050,6 +2248,12 @@ export default {
           this.getData(this.wpIds); //24小时功率曲线
         }
       }, 15 * 60 * 1000);
+
+      this.initPageData2({
+        data: {
+          "72time": dataJson["72time"],
+        },
+      });
     },
     mapClicks(wpId, activeTab) {
       this.historyWpId = wpId;
@@ -3029,6 +3233,129 @@ export default {
   }
 }
 </style>
+<style lang="less" scoped>
+.hover24Power {
+  width: 520px;
+  height: 180px;
+  // background-color: rgba(3, 5, 9, 0.75);
+  margin-top: 30px;
+}
+
+.sx-right-box {
+  width: 480px !important;
+  .card {
+    padding: 10px;
+  }
+}
+
+.sx-left-box {
+  .leftZbBox {
+    width: 520px;
+    background-color: rgba(3, 5, 9, 0.75);
+    box-sizing: border-box;
+    padding: 0 10px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    position: relative;
+    margin-top: 30px;
+    z-index: 50;
+
+    .zbTitle {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      width: 100%;
+      font-size: 18px;
+      padding: 10px 0;
+      color: #fff;
+    }
+
+    .fTitle {
+      font-size: 13px;
+      position: absolute;
+      right: 10px;
+      top: 12px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      .name {
+      }
+
+      .num {
+        font-size: 19px;
+        color: @green;
+        font-family: "Bicubik";
+        font-weight: 700;
+        margin: 0 5px;
+      }
+
+      .unit {
+        font-size: 12px;
+        color: #b1b1b1;
+      }
+    }
+
+    .tb {
+      border: 1px solid #606769;
+      width: 49%;
+      margin-right: 5px;
+      margin-bottom: 10px;
+
+      .zbDetailBox {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+        width: 100%;
+
+        .item {
+          width: 100%;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          border-bottom: 1px solid #606769;
+          font-size: 14px;
+
+          .name {
+            font-size: 14px;
+            color: #999;
+            width: 110px;
+            border-right: 1px solid #606769;
+            padding: 0 2px;
+          }
+
+          .num {
+            text-align: right;
+            font-family: "Bicubik";
+            width: 100px;
+            color: @green;
+            border-right: 1px solid #606769;
+            padding: 0 2px;
+          }
+
+          .unit {
+            font-size: 14px;
+            color: #999;
+            width: 60px;
+            padding: 0 2px;
+          }
+
+          &:last-child {
+            border-bottom: 0;
+          }
+        }
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>
 <style lang="less">
 ul,
 ul li,

src/views/Home/components/map/svg-map-nx.vue

@@ -205,7 +205,7 @@
 
         <g>
           <!-- 河北 -->
-          <g v-if="showPoint && $store.state.themeName === 'dark'">
+          <g v-if="false && showPoint && $store.state.themeName === 'dark'">
             <g
               v-if="showType === 'all' || showType === 'fc'"
               class="item-label"
@@ -489,7 +489,7 @@
               </g>
             </g>
           </g>
-          <g v-if="showPoint && $store.state.themeName === 'light'">
+          <g v-if="false && showPoint && $store.state.themeName === 'light'">
             <g
               v-if="showType === 'all' || showType === 'fc'"
               class="item-label"
@@ -773,8 +773,9 @@
               </g>
             </g>
           </g>
+
           <!-- 新疆 -->
-          <g v-if="showPoint && $store.state.themeName === 'dark'">
+          <g v-if="false && showPoint && $store.state.themeName === 'dark'">
             <g
               v-if="showType === 'all' || showType === 'fc'"
               class="item-label"
@@ -1058,7 +1059,7 @@
               </g>
             </g>
           </g>
-          <g v-if="showPoint && $store.state.themeName === 'light'">
+          <g v-if="false && showPoint && $store.state.themeName === 'light'">
             <g
               v-if="showType === 'all' || showType === 'fc'"
               class="item-label"
@@ -1342,8 +1343,9 @@
               </g>
             </g>
           </g>
+
           <!-- 西藏 -->
-          <g v-if="showPoint && $store.state.themeName === 'dark'">
+          <g v-if="false && showPoint && $store.state.themeName === 'dark'">
             <g
               v-if="showType === 'all' || showType === 'fc'"
               class="item-label"
@@ -1627,7 +1629,7 @@
               </g>
             </g>
           </g>
-          <g v-if="showPoint && $store.state.themeName === 'light'">
+          <g v-if="false && showPoint && $store.state.themeName === 'light'">
             <g
               v-if="showType === 'all' || showType === 'fc'"
               class="item-label"
@@ -1911,8 +1913,9 @@
               </g>
             </g>
           </g>
+
           <!-- 山东 -->
-          <g v-if="showPoint && $store.state.themeName === 'dark'">
+          <g v-if="false && showPoint && $store.state.themeName === 'dark'">
             <g
               v-if="showType === 'all' || showType === 'fc'"
               class="item-label"
@@ -2196,7 +2199,7 @@
               </g>
             </g>
           </g>
-          <g v-if="showPoint && $store.state.themeName === 'light'">
+          <g v-if="false && showPoint && $store.state.themeName === 'light'">
             <g
               v-if="showType === 'all' || showType === 'fc'"
               class="item-label"
@@ -2480,8 +2483,9 @@
               </g>
             </g>
           </g>
+
           <!-- 陕西 -->
-          <g v-if="showPoint && $store.state.themeName === 'dark'">
+          <g v-if="false && showPoint && $store.state.themeName === 'dark'">
             <g
               v-if="showType === 'all' || showType === 'fc'"
               class="item-label"
@@ -2765,7 +2769,7 @@
               </g>
             </g>
           </g>
-          <g v-if="showPoint && $store.state.themeName === 'light'">
+          <g v-if="false && showPoint && $store.state.themeName === 'light'">
             <g
               v-if="showType === 'all' || showType === 'fc'"
               class="item-label"
@@ -3049,8 +3053,9 @@
               </g>
             </g>
           </g>
+
           <!-- 内蒙 -->
-          <g v-if="showPoint && $store.state.themeName === 'dark'">
+          <g v-if="false && showPoint && $store.state.themeName === 'dark'">
             <g
               v-if="showType === 'all' || showType === 'fc'"
               class="item-label"
@@ -3334,7 +3339,7 @@
               </g>
             </g>
           </g>
-          <g v-if="showPoint && $store.state.themeName === 'light'">
+          <g v-if="false && showPoint && $store.state.themeName === 'light'">
             <g
               v-if="showType === 'all' || showType === 'fc'"
               class="item-label"
@@ -3624,6 +3629,7 @@
               </g>
             </g>
           </g>
+
           <!-- 山西 -->
           <g v-if="showPoint && $store.state.themeName === 'dark'">
             <g

src/views/Home/index.vue

@@ -1057,7 +1057,7 @@
     }
 
     .right {
-        width: 450px;
+        width: 480px;
         //   height: 100px;
         position: absolute;
         right: 25px;