完善首页弹窗图表展示样式，修改首页实时负荷数据格式

src/components/chart/powerEcharts.vue

@@ -24,7 +24,7 @@ export default {
     },
     height: {
       type: String,
-      default: "110px",
+      default: "165px",
     },
     CurveValues: {
       type: Array,
@@ -86,6 +86,7 @@ export default {
           itemGap: 7,
         },
         xAxis: {
+          boundaryGap: false, //x轴从0开始
           axisLabel: {
             textStyle: {
               color: "#606769",
@@ -108,7 +109,8 @@ export default {
           name: this.unit,
           nameTextStyle: {
             color: "#828484",
-            fontSize: 12,
+            fontSize: 14,
+            align: "right",
           },
           splitNumber: 3,
           splitLine: {
@@ -129,10 +131,11 @@ export default {
         },
         grid: [
           {
-            left: 80,
+            left: 50,
             right: 100,
             top: 30,
             bottom: 30,
+            containLabel: true,
           },
         ],
         series: this.series,

src/views/Home/Home.vue

@@ -166,7 +166,7 @@ export default {
   .qjny-info {
     background: rgba(0, 0, 0, 0.3);
     border-radius: 8px;
-    bottom: 369px;
+    top: 340px;
     position: absolute;
     padding: 20px 10px;
     z-index: 5;
@@ -279,7 +279,7 @@ export default {
     height: 138px;
     background: rgba(0, 0, 0, 0.3);
     border-radius: 8px;
-    bottom: 210px;
+    top: 570px;
     position: absolute;
     z-index: 4;
     left: 37px;
@@ -346,11 +346,11 @@ export default {
   }
   .my_echarts {
     width: 700px;
-    height: 150px;
+    height: 180px;
     background: rgba(0, 0, 0, 0.3);
     border-radius: 6px;
     position: absolute;
-    bottom: 38px;
+    top: 730px;
     left: 37px;
     z-index: 4;
   }

src/views/Home/components/barCharts.vue

@@ -42,8 +42,8 @@ export default {
     },
     // 单位
     units: {
-      type: Array,
-      default: () => ["(万KWh)", "(风速)"],
+      type: String,
+      default: "",
     },
     // 显示 legend
     showLegend: {
@@ -114,52 +114,7 @@ export default {
         return [];
       }
     },
-    ydata() {
-      let result = [];
-      this.units.forEach((value, index) => {
-        let data = null;
-        if (index == 0) {
-          data = {
-            type: "value",
-            name: value,
-            axisLabel: {
-              formatter: "{value} ",
-              fontSize: 12,
-              textStyle: {
-                color: "#828484",
-              },
-            },
-            //分格线
-            splitLine: {
-              lineStyle: {
-                color: "rgba(96,103,105,0.3)",
-                type: "dashed",
-              },
-            },
-          };
-        } else {
-          data = {
-            type: "value",
-            name: value,
-            axisLabel: {
-              formatter: "{value}",
-              fontSize: 12,
-              textStyle: {
-                color: "#828484",
-              },
-            },
-            //分格线
-            splitLine: {
-              show: false,
-            },
-          };
-        }
-
-        result.push(data);
-      });
 
-      return result;
-    },
     series() {
       let result = [];
       if (this.showkey == "electric") {
@@ -172,8 +127,6 @@ export default {
             itemStyle: {
               borderColor: this.color[index],
               borderWidth: 1,
-              // shadowBlur: 1,
-              // shadowColor: "#16ADD4",
             },
             data: value.value,
           };
@@ -185,9 +138,6 @@ export default {
             name: this.list[0].name,
             type: "bar",
             barWidth: "12",
-            label: {
-              show: true,
-            },
             itemStyle: {
               borderColor: this.color[0],
               borderWidth: 1,
@@ -198,136 +148,6 @@ export default {
       }
       return result;
     },
-    colorList() {
-      let result = [
-        {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "#1c99ff" }, // 设置颜色渐变
-            { offset: 1, color: "rgba(0,70,212,0)" },
-          ],
-        },
-        {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "#DC143C" }, // 设置颜色渐变
-            { offset: 1, color: "rgba(255,105,180,0)" },
-          ],
-        },
-        {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "#ea8b00" },
-            { offset: 1, color: "rgba(168,83,0,0)" },
-          ],
-        },
-
-        {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "#696969" },
-            { offset: 1, color: "rgba(211,211,211,0)" },
-          ],
-        },
-        {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "#ff5378" },
-            { offset: 1, color: "rgba(167,17,49,0)" },
-          ],
-        },
-        {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "#05bb4c" },
-            { offset: 1, color: "rgba(0,75,11,0)" },
-          ],
-        },
-      ];
-      let result1 = [
-        {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "#DC143C" }, // 设置颜色渐变
-            { offset: 1, color: "rgba(255,105,180,0)" },
-          ],
-        },
-        {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "#ea8b00" },
-            { offset: 1, color: "rgba(168,83,0,0)" },
-          ],
-        },
-
-        {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "#696969" },
-            { offset: 1, color: "rgba(211,211,211,0)" },
-          ],
-        },
-        {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "#ff5378" },
-            { offset: 1, color: "rgba(167,17,49,0)" },
-          ],
-        },
-        {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "#05bb4c" },
-            { offset: 1, color: "rgba(0,75,11,0)" },
-          ],
-        },
-      ];
-      return this.colorIndex ? result1 : result;
-    },
   },
   methods: {
     resize() {
@@ -337,14 +157,6 @@ export default {
       let chart = echarts.init(this.$el);
       let option = {
         color: this.color,
-
-        title: {
-          text: this.pillarName,
-          textStyle: {
-            color: "#999999",
-            fontSize: 18,
-          },
-        },
         zoom: 12,
         tooltip: {
           trigger: "axis",
@@ -354,8 +166,8 @@ export default {
           borderColor: "#074EAD",
           textStyle: {
             color: "#fff",
-            fontSize: 12,
-            fontFamily: "Arial",
+            fontSize: 16,
+            fontFamily: "楷体",
             fontWeight: "normal",
           },
           axisPointer: {
@@ -391,10 +203,6 @@ export default {
           {
             type: "category",
             data: this.xdata,
-            nameLocation: "center",
-            axisPointer: {
-              type: "shadow",
-            },
             axisLabel: {
               interval: this.interval,
               fontSize: 12,
@@ -404,7 +212,14 @@ export default {
             },
           },
         ],
-        yAxis: this.ydata,
+        yAxis: {
+          type: "value",
+          name: this.units,
+          //分格线
+          splitLine: {
+            show: false,
+          },
+        },
         series: this.series,
       };
       chart.clear();

src/views/Home/components/map.vue

@@ -209,8 +209,8 @@
                   海上风机<span class="qty_val">
                     {{
                       wpId.includes("FDC")
-                        ? StationinformationData?.station[wpId]?.zjts
-                        : StationinformationData?.cblpoint?.jr_fj_ts
+                        ? StationinformationData?.station[wpId]?.hszjts
+                        : StationinformationData?.cblpoint?.qjny_hsfj_ts
                     }} </span
                   ><span class="qty_unit">台</span>
                 </p>
@@ -316,7 +316,12 @@
         </ul>
       </div>
       <div class="my_echarts safe_power" v-if="penetrateType == 3">
-        <power-echarts :CurveValues="CurveValues" width="680px" :ratio="1000" />
+        <power-echarts
+          :CurveValues="CurveValues"
+          width="680px"
+          :unit="'MW'"
+          :ratio="1000"
+        />
       </div>
     </div>
     <!-- 全国左侧信息 -->
@@ -1007,7 +1012,10 @@
         <el-row>
           <el-col v-show="tabShow == 0 || tabShow == -1">
             <div class="grid-content">
-              <div class="img" @click="handleClick('SSPJFS', '实时风速')">
+              <div
+                class="img"
+                @click="handleClick('SSPJFS', '实时风速', 'm/s')"
+              >
                 <img
                   src="@/assets/imgs/pointer.png"
                   :style="{ transform: windSpeedRota }"
@@ -1023,7 +1031,7 @@
           <el-col v-show="tabShow == 0 || tabShow == -2">
             <div
               class="grid-content"
-              @click="handleClick('RPJGZD', '光照强度')"
+              @click="handleClick('RPJGZD', '光照强度', 'W/m²')"
             >
               <div class="img">
                 <img
@@ -1039,7 +1047,10 @@
             </div>
           </el-col>
           <el-col>
-            <div class="grid-content" @click="handleClick('SSZGL', '实际功率')">
+            <div
+              class="grid-content"
+              @click="handleClick('SSZGL', '实际功率', 'MW')"
+            >
               <div class="img">
                 <img
                   src="@/assets/imgs/pointer.png"
@@ -1056,7 +1067,7 @@
           <el-col>
             <div
               class="grid-content"
-              @click="handleClick('SSZLLGL', '理论功率')"
+              @click="handleClick('SSZLLGL', '理论功率', 'MW')"
             >
               <div class="img">
                 <img
@@ -1074,7 +1085,7 @@
           <el-col v-show="tabShow == -1">
             <div
               class="grid-content"
-              @click="handleClick('FNLYL', '风能利用率')"
+              @click="handleClick('FNLYL', '风能利用率', '%')"
             >
               <div class="img">
                 <img
@@ -1082,7 +1093,7 @@
                   :style="{ transform: guarantee }"
                 />
                 <div class="information">
-                  {{ (StationinformationData?.qt?.fnlyl / 1000).toFixed(2) }}
+                  {{ (StationinformationData?.qt?.fnlyl).toFixed(2) }}
                 </div>
                 <div class="unit">%</div>
                 <p>风能利用率</p>
@@ -1092,7 +1103,7 @@
           <el-col v-show="tabShow == -2">
             <div
               class="grid-content"
-              @click="handleClick('FNLYL', '光能利用率')"
+              @click="handleClick('FNLYL', '光能利用率', '%')"
             >
               <div class="img">
                 <img
@@ -1100,7 +1111,7 @@
                   :style="{ transform: guarantee }"
                 />
                 <div class="information">
-                  {{ (StationinformationData?.qt?.fnlyl / 1000).toFixed(2) }}
+                  {{ (StationinformationData?.qt?.fnlyl).toFixed(2) }}
                 </div>
                 <div class="unit">%</div>
                 <p>光能利用率</p>
@@ -1244,6 +1255,7 @@
           <windChartCom
             :windCurveValues="chartsData"
             :CurveTitle="showName"
+            :unit="unit"
             height="38vh"
             chartId="windChar"
           />
@@ -1310,7 +1322,7 @@
             :ratio="10000"
             :showLegend="true"
             :top="30"
-            :units="units"
+            :units="showkey === 'electric' ? '万kWh' : '小时'"
             :interval="electronType === 'day' ? 1 : 0"
             :showkey="showkey"
             :showName="showName"
@@ -1347,7 +1359,7 @@ import {
 } from "@/api/home/home.js";
 import dayjs from "dayjs";
 import windChartCom from "./windChartCom.vue";
-import BarCharts from "./barCharts.vue";
+import BarCharts from "@/views/Home/components/barCharts.vue";
 export default {
   // 名称
   name: "Map",
@@ -1435,6 +1447,7 @@ export default {
       timmer: null, // 计时器
       timmer2: null,
       units: ["万kWh"],
+      unit: "", //实时负荷弹窗单位
       wpId: "KGDL_FGS",
       wpIds: "KGDL_FGS0",
     };
@@ -1847,7 +1860,8 @@ export default {
       this.flag = wpId.includes("FDC") || wpId.includes("GDC") ? true : false;
       this.currentActiveTab(penetrateType);
     },
-    handleClick(uniformCode, title) {
+    // 区域实时负荷点击弹窗
+    handleClick(uniformCode, title, unit) {
       let key = "";
       switch (uniformCode) {
         case "SSPJFS":
@@ -1884,7 +1898,7 @@ export default {
             value: item[key],
           };
         });
-
+        this.unit = unit;
         this.showName = title;
       });
     },

src/views/Home/components/windChartCom.vue

@@ -42,6 +42,10 @@ export default {
       type: Number,
       default: 1,
     },
+    unit: {
+      type: String,
+      default: "",
+    },
   },
   async created() {},
   mounted() {
@@ -59,12 +63,14 @@ export default {
       var chartDom = document.getElementById(this.chartId);
       var myChart = echarts.init(chartDom); // 绘制图表
       var options = {
-        title: {},
         tooltip: {
           trigger: "axis",
           backgroundColor: "rgba(0, 0, 0, 0.3)",
           textStyle: {
+            fontSize: 16,
+            fontFamily: "楷体",
             color: "white", //设置文字颜色
+            fontWeight: "400",
           },
         },
         legend: {
@@ -82,6 +88,7 @@ export default {
         },
         xAxis: {
           type: "category",
+          boundaryGap: false,
           axisTick: {
             alignWithLabel: true,
           },
@@ -101,8 +108,15 @@ export default {
           //   data: this.windCurveValues.map((item) => item.dateTime),
         },
         yAxis: {
+          name: this.unit,
+          nameTextStyle: {
+            fontSize: 16,
+            align: "right",
+          },
+
           type: "value",
-          splitNumber: 3,
+          splitNumber: this.unit == "%" ? 2 : 3,
+          max: this.unit == "%" ? "100" : null,
           splitLine: {
             show: false,
             textStyle: {
@@ -120,8 +134,9 @@ export default {
           {
             left: 80,
             right: 40,
-            top: 20,
+            top: 30,
             bottom: 30,
+            containLabel: true,
           },
         ],
         series: [

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

@@ -356,7 +356,7 @@
               width="100%"
               :ratio="1000"
               :height="screenHeight > 1050 ? '23vh' : '19vh'"
-              :units="['MW']"
+              :unit="'MW'"
               :showLegend="true"
             >
             </LineCharts>

src/views/stateMonitor/factoryMonitor/windPowerPlant/components/lineCharts.vue

@@ -200,23 +200,36 @@ export default {
           },
         },
         legend: {
-          show: this.showLegend,
-          data: this.legend,
-          padding: [10, 10],
-          left: "center",
-          bottom: -10,
-          icon: "ract",
-          itemWidth: 6,
-          itemHeight: 6,
-          inactiveColor: partten.getColor("gray"),
+          top: "6%",
+          right: "2%",
           textStyle: {
-            color: partten.getColor("grayl"),
-            fontSize: 12,
+            fontSize: "12",
+            color: "#A4A4A5",
           },
-          selected: this.seletedData,
+          orient: "vertical",
+          icon: "roundRect",
+          itemWidth: 5,
+          itemHeight: 5,
+          itemGap: 7,
         },
+        // legend: {
+        //   show: this.showLegend,
+        //   data: this.legend,
+        //   padding: [10, 10],
+        //   left: "center",
+        //   bottom: -10,
+        //   icon: "ract",
+        //   itemWidth: 6,
+        //   itemHeight: 6,
+        //   inactiveColor: partten.getColor("gray"),
+        //   textStyle: {
+        //     color: partten.getColor("grayl"),
+        //     fontSize: 12,
+        //   },
+        //   selected: this.seletedData,
+        // },
         grid: {
-          top: 16,
+          top: 30,
           left: this.leftOffset,
           right: 40,
           bottom: 30,
@@ -241,9 +254,11 @@ export default {
         yAxis: {
           type: "value",
           name: this.unit,
+
           nameTextStyle: {
             color: "#828484",
-            fontSize: 12,
+            fontSize: 14,
+            align: "right",
           },
           splitNumber: 3,
           splitLine: {

src/views/stateMonitor/factoryMonitor/windPowerPlant/windPower/components/windEchart.vue

@@ -76,6 +76,7 @@ export default {
               width: 1, //轴线的宽度
             },
           },
+          boundaryGap: false,
           splitLine: { show: false },
           data: this.getTimeStanp,
         },

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

@@ -357,7 +357,7 @@
               width="100%"
               :ratio="1000"
               :height="screenHeight > 1050 ? '23vh' : '19vh'"
-              unit="MW"
+              :unit="'MW'"
               :showLegend="true"
             >
             </LineCharts>