zyh

src/views/KHC.vue

@@ -83,7 +83,11 @@
         </div>
         <div class="ynflzb">
           <p class="title">用能分类占比</p>
-          <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
           <div id="ynflzb"></div>
         </div>
         <div class="qyydlpm">
@@ -99,21 +103,30 @@
       </div>
       <div id="map"></div>
       <div class="footer"></div>
+      <div class="tooltip">
+        <img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
+        <div class="title1">客户侧用能数据总览</div>
+        <div class="txt">
+          <div class="one">
+            <span>接入用户数:</span>
+            <p style="color: #d9e363">
+              352<span style="color: #d9e363">户</span>
+            </p>
+          </div>
+          <div class="two">
+            <span>用户总电量:</span>
+            <p style="color: #44bfd6">
+              5525<span style="color: #44bfd6">万千瓦时</span>
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
-const fontSizeRem = (size) => {
-  const clientWidth =
-    window.innerWidth ||
-    document.documentElement.clientWidth ||
-    document.body.clientWidth;
-  if (!clientWidth) return;
-  let fontSize = clientWidth / 1920; //尺寸大小
-  return size * fontSize;
-}
 import * as echarts from "echarts";
-// import { fontSizeRem } from "../assets/function";
+import { fontSizeRem } from "../assets/function";
 export default {
   data() {
     return {
@@ -797,9 +810,12 @@ export default {
               params.seriesName !== "mouseoutSeries" &&
               params.seriesName !== "pie2d"
             ) {
-              return `${params.seriesName
+              return `${
-                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
+                params.seriesName
-                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
+              }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                params.color
+              };"></span>${
+                option.series[params.seriesIndex].pieData.value + "%"
               }`;
             }
           },
@@ -865,152 +881,95 @@ export default {
       };
       this.defineEcharts("ynflzb", option);
     },
-  },
+    initMap() {
-  mounted() {
+      //后端返回的数据
-    this.defineEcharts("ssfhzs", this.option);
-    this.defineEcharts("ynl", this.option1);
-    this.initYhhyzb();
-    this.initYnflzb();
-
       var data = [
-      {
-        name: "南京市",
-        value: 1,
-      },
         {
           name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
           value: 2,
+          coord: [120.382639, 36.067082],
         },
         {
-        name: "徐州市",
+          name: "淄博市",
           value: 3,
+          coord: [118.059134, 36.804685],
         },
         {
-        name: "常州市",
+          name: "枣庄市",
           value: 4,
+          coord: [117.557964, 34.856424],
         },
         {
-        name: "苏州市",
+          name: "东营市",
           value: 5,
+          coord: [118.674767, 37.434751],
         },
         {
-        name: "南通市",
+          name: "烟台市",
           value: 6,
+          coord: [121.447935, 37.463822],
         },
         {
-        name: "连云港市",
+          name: "潍坊市",
           value: 7,
+          coord: [119.161756, 36.706774],
         },
         {
-        name: "淮安市",
+          name: "济宁市",
           value: 8,
+          coord: [116.587245, 35.415393],
         },
         {
-        name: "盐城市",
+          name: "泰安市",
           value: 9,
+          coord: [117.089415, 36.188078],
         },
         {
-        name: "扬州市",
+          name: "威海市",
           value: 10,
+          coord: [122.120419, 37.513068],
         },
         {
-        name: "镇江市",
+          name: "日照市",
           value: 11,
+          coord: [119.526888, 35.416377],
         },
         {
-        name: "泰州市",
+          name: "临沂市",
           value: 12,
+          coord: [118.356448, 35.104672],
         },
         {
-        name: "宿迁市",
+          name: "德州市",
           value: 13,
-      },
+          coord: [116.357465, 37.434093],
-    ];
-    var splitList = [
-      {
-        start: 1,
-        end: 1,
-        label: "济南市",
-        color: "#236da8",
         },
         {
-        start: 2,
+          name: "聊城市",
-        end: 2,
+          value: 14,
-        label: "无锡市",
+          coord: [115.986869, 36.455829],
-        color: "#2884db",
         },
         {
-        start: 3,
+          name: "滨州市",
-        end: 3,
+          value: 15,
-        label: "徐州市",
+          coord: [118.016974, 37.383542],
-        color: "#244779",
         },
         {
-        start: 4,
+          name: "菏泽市",
-        end: 4,
+          value: 16,
-        label: "常州市",
+          coord: [115.469381, 35.246531],
-        color: "#246198",
-      },
-      {
-        start: 5,
-        end: 5,
-        label: "苏州市",
-        color: "#2884db",
-      },
-      {
-        start: 6,
-        end: 6,
-        label: "南通市",
-        color: "#2884db",
-      },
-      {
-        start: 7,
-        end: 7,
-        label: "连云港市",
-        color: "#244779",
-      },
-      {
-        start: 8,
-        end: 8,
-        label: "淮安市",
-        color: "#244779",
-      },
-      {
-        start: 9,
-        end: 9,
-        label: "盐城市",
-        color: "#244779",
-      },
-      {
-        start: 10,
-        end: 10,
-        label: "扬州市",
-        color: "#246198",
-      },
-      {
-        start: 11,
-        end: 11,
-        label: "镇江市",
-        color: "#2884db",
-      },
-      {
-        start: 12,
-        end: 12,
-        label: "泰州市",
-        color: "#2884db",
-      },
-      {
-        start: 13,
-        end: 13,
-        label: "宿迁市",
-        color: "#244779",
         },
       ];
       var chartDom = document.getElementById("map");
-    var myChart = this.$echarts.init(chartDom, null, {
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
-      devicePixelRatio: 10, // 设置为2或更高的值
+      window.addEventListener("resize", function () {
+        myChart.resize();
       });
-
       //获取山东地图数据。
       $.get(
         "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
@@ -1021,118 +980,172 @@ export default {
               {
                 tooltip: {
                   trigger: "item",
+                  // show: false,
                 },
                 name: "山东",
-              type: "map3D",
+                type: "map",
                 map: "山东",
                 boxDepth: 60, //地图倾斜度
                 regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
                 label: {
                   show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
                   textStyle: {
-                  color: "#fff", //文字颜色
+                    color: "#000", //文字颜色
-                  fontSize: 12, //文字大小
+                    fontSize: 16, //文字大小
                     fontFamily: "微软雅黑",
-                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
                   },
                 },
                 itemStyle: {
-                opacity: 1, // 透明度
+                  opacity: 0.8, // 透明度
-                borderWidth: 1.5, //分界线宽度
+                  borderWidth: 2, //分界线宽度
                   borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
                 },
                 groundplane: {
                   show: true,
                 },
                 data: data,
-              //shading: 'realistic',
+                z: 999,
+                shading: "realistic",
                 // 真实感材质相关配置 shading: 'realistic'时有效
                 realisticMaterial: {
-                detailTexture: "#093099", // 纹理贴图
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
                   textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
-                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                  roughness: 0.8, // 调整光照模型的粗糙度
-                metalness: 1, // 0材质是非金属 ，1金属
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
                   roughnessAdjust: 0,
                 },
                 viewControl: {
-                distance: 80, // 地图视角 控制初始大小
+                  distance: 90, // 地图视角 控制初始大小
-                rotateSensitivity: 1, // 旋转
+                  rotateSensitivity: 0, // 旋转
-                zoomSensitivity: 1, // 缩放
+                  zoomSensitivity: 1.5, // 缩放
                 },
+                zoom: 1.25,
               },
             ],
-          dataRange: {
-            show: false,
-            splitList: splitList,
-          },
             animation: true,
           };
+
           myChart.setOption(option);
-        myChart.on("click", this.chartClick);
+          myChart.on("click", chartClick);
-        let chartClick = function (param) {
+          //点击地图区域事件
+          function chartClick(param) {
             console.log(param);
             myChart.setOption(option, false);
             window.addEventListener("resize", function () {
               myChart.resize();
             });
-          var selectedPro = param.name;
+            // var selectedPro = param.name;
-          if (!cityProper[selectedPro]) {
+            // if (!cityProper[selectedPro]) {
-            option.series.splice(1);
+            //   option.series.splice(1);
-            option.legend = null;
+            //   option.legend = null;
-            option.visualMap = null;
+            //   option.visualMap = null;
-            myChart.setOption(option, true);
+            //   myChart.setOption(option, true);
-            return;
+            //   return;
-          }
+            // }
             //获取点击区域数据
-          $.get(cityProper[selectedPro], function (geojson) {
+            // $.get(cityProper[selectedPro], function (geojson) {
-            echarts.registerMap(selectedPro, geojson);
+            //   echarts.registerMap(selectedPro, geojson);
-            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
-            option.series[0] = {
+            //   option.series[0] = {
-              name: "",
+            //     name: "",
-              type: "map",
+            //     type: "map",
-              map: selectedPro,
+            //     map: selectedPro,
-              boxDepth: 80, //地图倾斜度
+            //     boxDepth: 80, //地图倾斜度
-              regionHeight: 5, //地图厚度
+            //     regionHeight: 5, //地图厚度
-              itemStyle: {
+            //     itemStyle: {
-                normal: {
+            //       normal: {
-                  label: {
+            //         label: {
-                    show: true,
+            //           show: true,
-                  },
+            //         },
-                },
+            //       },
-                emphasis: {
+            //       emphasis: {
-                  label: {
+            //         label: {
-                    show: true,
+            //           show: true,
-                  },
+            //         },
-                },
+            //       },
-              },
+            //     },
-              groundplane: {
+            //     groundplane: {
-                show: false,
+            //       show: false,
-              },
+            //     },
-              data: data,
+            //     data: data,
-              shading: "realistic",
+            //     shading: "realistic",
-              // 真实感材质相关配置 shading: 'realistic'时有效
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
-              realisticMaterial: {
+            //     realisticMaterial: {
-                detailTexture: "#fff", // 纹理贴图
+            //       detailTexture: "#fff", // 纹理贴图
-                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
-                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
-                metalness: 0, // 0材质是非金属 ，1金属
+            //       metalness: 0, // 0材质是非金属 ，1金属
-                roughnessAdjust: 0,
+            //       roughnessAdjust: 0,
-              },
+            //     },
-              viewControl: {
+            //     viewControl: {
-                distance: 100, // 地图视角 控制初始大小
+            //       distance: 30, // 地图视角 控制初始大小
-                rotateSensitivity: 1, // 旋转
+            //       rotateSensitivity: 1, // 旋转
-                zoomSensitivity: 1, // 缩放
+            //       zoomSensitivity: 1, // 缩放
-              },
+            //     },
-            };
+            //   };
-            myChart.setOption(option);
+            //   myChart.setOption(option);
-          });
+            // });
-        };
+          }
         }
       );
     },
-  beforeDestroy() {
+  },
-    //离开页面后，删除屏幕监听，防止监听事件一直存在
+  mounted() {
-    window.removeEventListener("resize", this.getResize);
+    this.defineEcharts("ssfhzs", this.option);
+    this.defineEcharts("ynl", this.option1);
+    this.initYhhyzb();
+    this.initYnflzb();
+    this.initMap();
   },
 };
 </script>
@@ -1155,7 +1168,6 @@ export default {
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px;
-
     p {
       width: 527px;
       height: 47px;
@@ -1167,31 +1179,28 @@ export default {
       color: #fff;
       margin-left: -60px;
     }
-
     img:nth-of-type(1) {
       width: 231px;
       height: 59px;
     }
-
     img:nth-of-type(2) {
       width: 158px;
       height: 28px;
     }
   }
-
   .containter {
     width: 100%;
     height: 967px;
+    // height: 89.53vh;
     display: flex;
     position: relative;
     justify-content: space-between;
-
     .left {
       width: 436px;
       height: 100%;
-
       .ztynqk {
         height: 294px;
+        // height: 27.2vh;
         width: 100%;
         background: url("../assets/客户侧总体用能情况分析/组 3117.png");
         background-size: cover;
@@ -1199,7 +1208,6 @@ export default {
         display: flex;
         flex-direction: column;
         align-items: center;
-
         .title {
           position: absolute;
           left: 160px;
@@ -1211,13 +1219,11 @@ export default {
           color: rgba(255, 255, 255, 0.87);
           line-height: 36px;
         }
-
         .typeBox {
           list-style: none;
           display: flex;
           position: absolute;
           top: 54px;
-
           li {
             width: 39px;
             height: 21px;
@@ -1229,29 +1235,24 @@ export default {
             margin: 2.5px;
             cursor: pointer;
           }
-
           .active {
             background: rgba(10, 167, 255, 0.3);
             border: 1px solid #0aa7ff;
           }
         }
-
         .bottom {
           margin-top: 100px;
           display: flex;
           flex-wrap: wrap;
-
           .bottomBox {
             display: flex;
             align-items: center;
             width: 180px;
             margin: 10px;
-
             img {
               width: 72px;
               height: 72px;
             }
-
             div {
               p:nth-of-type(1) {
                 width: 120px;
@@ -1261,13 +1262,11 @@ export default {
                 font-family: " AlibabaPuHuiTi";
                 font-weight: 400;
               }
-
               span:nth-of-type(1) {
                 font-size: 20px;
                 font-family: "AlibabaPuHuiTi";
                 font-weight: 700;
               }
-
               span:nth-of-type(2) {
                 font-size: 14px;
                 font-family: "AlibabaPuHuiTi";
@@ -1278,14 +1277,13 @@ export default {
           }
         }
       }
-
       .ssfhzs {
         height: 315px;
+        // height: 29.1vh;
         background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
         background-size: cover;
         margin-top: 6px;
         position: relative;
-
         .title {
           position: absolute;
           left: 160px;
@@ -1297,7 +1295,6 @@ export default {
           color: rgba(255, 255, 255, 0.87);
           line-height: 36px;
         }
-
         .typeBox {
           list-style: none;
           display: flex;
@@ -1305,7 +1302,6 @@ export default {
           top: 54px;
           left: 50%;
           transform: translateX(-50%);
-
           li {
             width: 39px;
             height: 21px;
@@ -1317,13 +1313,11 @@ export default {
             margin: 2.5px;
             cursor: pointer;
           }
-
           .active {
             background: rgba(10, 167, 255, 0.3);
             border: 1px solid #0aa7ff;
           }
         }
-
         #ssfhzs {
           position: absolute;
           width: 100%;
@@ -1334,12 +1328,12 @@ export default {
 
       .ynl {
         height: 325px;
+        // height: 30vh;
         background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
         background-size: cover;
         margin-top: 6px;
 
         position: relative;
-
         .title {
           position: absolute;
           left: 190px;
@@ -1351,7 +1345,6 @@ export default {
           color: rgba(255, 255, 255, 0.87);
           line-height: 36px;
         }
-
         .typeBox {
           list-style: none;
           display: flex;
@@ -1359,7 +1352,6 @@ export default {
           top: 54px;
           left: 50%;
           transform: translateX(-50%);
-
           li {
             width: 39px;
             height: 21px;
@@ -1371,13 +1363,11 @@ export default {
             margin: 2.5px;
             cursor: pointer;
           }
-
           .active {
             background: rgba(10, 167, 255, 0.3);
             border: 1px solid #0aa7ff;
           }
         }
-
         #ynl {
           position: absolute;
           width: 100%;
@@ -1386,18 +1376,15 @@ export default {
         }
       }
     }
-
     .right {
       width: 436px;
       height: 100%;
-
       .yhhyzb {
         height: 294px;
         width: 100%;
         background: url("../assets/客户侧总体用能情况分析/组 3117.png");
         background-size: cover;
         position: relative;
-
         .title {
           position: absolute;
           left: 160px;
@@ -1409,13 +1396,11 @@ export default {
           color: rgba(255, 255, 255, 0.87);
           line-height: 36px;
         }
-
         #yhhyzb {
           width: 100%;
           height: 100%;
         }
       }
-
       .ynflzb {
         height: 294px;
         width: 100%;
@@ -1423,7 +1408,6 @@ export default {
         background-size: cover;
         position: relative;
         margin-top: 6px;
-
         .title {
           position: absolute;
           left: 160px;
@@ -1435,12 +1419,10 @@ export default {
           color: rgba(255, 255, 255, 0.87);
           line-height: 36px;
         }
-
         #ynflzb {
           width: 100%;
           height: 100%;
         }
-
         .pic {
           width: 300px;
           position: absolute;
@@ -1449,7 +1431,6 @@ export default {
           left: 40px;
         }
       }
-
       .qyydlpm {
         height: 353px;
         width: 100%;
@@ -1469,14 +1450,12 @@ export default {
           color: rgba(255, 255, 255, 0.87);
           line-height: 36px;
         }
-
         .list {
           list-style: none;
           height: 300px;
           width: 100%;
           float: left;
           margin-top: 50px;
-
           li {
             display: flex;
             justify-content: space-between;
@@ -1484,7 +1463,6 @@ export default {
             padding: 0 30px 0 30px;
             box-sizing: border-box;
             margin: 9px;
-
             p:nth-of-type(1) {
               background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
               width: 24px;
@@ -1507,7 +1485,6 @@ export default {
               color: rgba(255, 255, 255, 0.8);
               line-height: 12px;
             }
-
             p:nth-of-type(3) {
               width: 27px;
               height: 12px;
@@ -1521,7 +1498,6 @@ export default {
         }
       }
     }
-
     .footer {
       position: absolute;
       width: 994px;
@@ -1532,14 +1508,77 @@ export default {
       left: 50%;
       transform: translateX(-50%);
     }
-
     #map {
       width: 994px;
       position: absolute;
       height: 627px;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: cover;
       left: 50%;
       transform: translateX(-50%);
       overflow: hidden;
     }
+    .tooltip {
+      position: absolute;
+      width: 281px;
+      height: 170px;
+      background: url("../assets/客户侧总体用能情况分析/组 3123.png");
+      background-size: cover;
+      z-index: 1;
+      top: 418px;
+      right: 542px;
+      padding: 14px;
+      box-sizing: border-box;
+      padding-top: 36px;
+      img {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        top: 42px;
+        right: 14px;
+        cursor: pointer;
+        margin-right: 14px;
       }
-}</style>
+      .title1 {
+        height: 27px;
+        font-size: 22px;
+        font-family: "YouSheBiaoTiHei";
+        font-weight: 400;
+        color: #60edff;
+        line-height: 25px;
+        margin-bottom: 10px;
+      }
+      .txt {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: "AlibabaPuHuiTi";
+        div {
+          display: flex;
+          align-items: center;
+          margin: 10px;
+          margin-left: 0;
+          span:nth-of-type(1) {
+            width: 89px;
+            height: 21px;
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.87);
+            line-height: 20px;
+          }
+          p {
+            width: 143px;
+            height: 21px;
+            font-size: 30px;
+            font-weight: 700;
+            line-height: 20px;
+            span {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/ZHDY.vue

@@ -17,6 +17,7 @@
                 </div>
                 <div>
                     <p>环比</p>
+                    <p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
                 </div>
             </div>
             <div id="qyyh"></div>
@@ -1166,7 +1167,7 @@
         width: 436px;
         height: 100%;
   
-        .ztynqk {
+        .ndqyyh {
             height: 27.22vh;
         //   height: 294px;
           width: 100%;
@@ -1213,47 +1214,6 @@
             }
           }
   
-          .bottom {
-            margin-top: 100px;
-            display: flex;
-            flex-wrap: wrap;
-  
-            .bottomBox {
-              display: flex;
-              align-items: center;
-              width: 180px;
-              margin: 10px;
-  
-              img {
-                width: 72px;
-                height: 72px;
-              }
-  
-              div {
-                p:nth-of-type(1) {
-                  width: 120px;
-                  margin-bottom: 10px;
-                  margin-top: 5px;
-                  font-size: 14px;
-                  font-family: " AlibabaPuHuiTi";
-                  font-weight: 400;
-                }
-  
-                span:nth-of-type(1) {
-                  font-size: 20px;
-                  font-family: "AlibabaPuHuiTi";
-                  font-weight: 700;
-                }
-  
-                span:nth-of-type(2) {
-                  font-size: 14px;
-                  font-family: "AlibabaPuHuiTi";
-                  font-weight: 400;
-                  margin-left: 6px;
-                }
-              }
-            }
-          }
         }
   
         .ssfhzs {