对标修改

.gitignore

@@ -11,5 +11,7 @@ package-lock.json
 .py/
 .idea
 .idea/
-public/static/cesium/Assets/Textures/temp
-public/static/cesium/Assets/Textures/temp/
+public/static/cesium/Assets/Textures/temp/
+
+
+

package.json

@@ -12,16 +12,21 @@
     "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
   },
   "dependencies": {
+
     "14": "^3.1.6",
+
+
     "@antv/x6": "^1.24.4",
     "@arcgis/core": "^4.19.3",
     "@element-plus/icons-vue": "^0.2.4",
     "@open-wc/webpack-import-meta-loader": "git+https://github.com/KmjKoishi/webpack-import-meta-loader-fixed.git",
     "animate.css": "3.5",
     "axios": "^0.21.1",
+
     "cesium": "1.78.0",
     "core-js": "^3.6.5",
     "cross-env": "^7.0.3",
+
     "echarts": "^5.1.1",
     "echarts-gl": "^2.0.4",
     "echarts-stat": "^1.2.0",
@@ -29,7 +34,9 @@
     "file-saver": "^2.0.5",
     "font-awesome": "^4.7.0",
     "html2canvas": "^1.0.0-rc.7",
+
     "increase-memory-limit": "^1.0.7",
+
     "jquery": "^3.6.0",
     "jspdf": "^2.3.1",
     "jszip": "^3.7.1",

src/App.vue

@@ -1,10 +1,18 @@
 <template>
   <div v-if="!showSisView && isLogined" class="main">
     <div class="header-body" v-if="hideHeard === '0'">
-      <div class="header-title"  @click="handleClickJump()">
+      <div class="header-title" @click="handleClickJump()">
         <!-- <img v-if="$store.state.themeName === 'dark'" src="./assets/projectLogo.png" alt="" />
         <img v-if="$store.state.themeName === 'light'" src="./assets/light-projectLogo.png" alt="" /> -->
-        <span :style="$store.state.themeName === 'dark' ? 'color:#fff; font-size:18px;font-family: SimHei' : 'color:#000'"> >>发电场站生产实时运营管理平台</span>
+        <span
+          :style="
+            $store.state.themeName === 'dark'
+              ? 'color:#fff; font-size:18px;font-family: SimHei'
+              : 'color:#000'
+          "
+        >
+          >>发电场站生产实时运营管理平台</span
+        >
       </div>
       <div class="header-menu-body">
         <Header @onMenuClick="HeaderMenuClick" />
@@ -50,7 +58,9 @@
             :key="idx"
           >
             <router-link :to="menu.path">
-              <el-menu-item :index="index + '-' + idx">{{menu.text}}</el-menu-item>
+              <el-menu-item :index="index + '-' + idx">{{
+                menu.text
+              }}</el-menu-item>
             </router-link>
           </el-menu-item-group>
         </el-sub-menu>
@@ -170,7 +180,7 @@ export default {
     selectMenu(menuIndex) {
       this.menuIndex = menuIndex;
     },
-    
+
     // clearBackground() {
     //   return;
     //   let body = $("body.light");
@@ -276,7 +286,7 @@ body {
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
-  
+
   .header-body {
     z-index: 2;
     // background: radial-gradient(closest-corner at 22% 40%, #2d5a47, #040d0a, #040d0a);
@@ -390,26 +400,26 @@ body {
   .cell {
   height: 116px !important;
 }
-*{ 
- -webkit-touch-callout:none; /*系统默认菜单被禁用*/
- -webkit-user-select:none; /*webkit浏览器*/
- -khtml-user-select:none; /*早期浏览器*/
- -moz-user-select:none;/*火狐*/
- -ms-user-select:none; /*IE10*/
- user-select:none; 
-} 
-input{ 
- -webkit-user-select:auto; /*webkit浏览器*/ 
+* {
+  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -khtml-user-select: none; /*早期浏览器*/
+  -moz-user-select: none; /*火狐*/
+  -ms-user-select: none; /*IE10*/
+  user-select: none;
+}
+input {
+  -webkit-user-select: auto; /*webkit浏览器*/
 }
-textarea{
- -webkit-user-select:auto; /*webkit浏览器*/
+textarea {
+  -webkit-user-select: auto; /*webkit浏览器*/
 }
-.gfSelect .el-input__suffix{
+.gfSelect .el-input__suffix {
   display: none !important;
 }
-body .gfSelect  .el-input__inner{
-    background: rgba(83, 98, 104, 0);
-    color: #ffffff;
-    font-size: 16px;
+body .gfSelect .el-input__inner {
+  background: rgba(83, 98, 104, 0);
+  color: #ffffff;
+  font-size: 16px;
 }
 </style>

src/assets/styles/button.less

@@ -1,27 +1,68 @@
 .btn {
-  height: 33px;
-  line-height: 33px;
-  flex: 0 0 auto;
-  background: transparent;
-  border: 1px solid @darkgray;
-  padding: 0 1.481vh;
-  color: @gray;
-  font-size: @fontsize-s;
-  cursor: pointer;
+  //   height: 33px;
+  //   line-height: 33px;
+  //   flex: 0 0 auto;
+  background-color: transparent !important;
+  border: 1px solid @darkgray !important;
+  //   padding: 0 1.481vh;
+  color: @gray !important;
+  font-size: @fontsize-s !important;
+  //   cursor: pointer;
 
   &:hover {
-    border-color: @green;
-    color: @green;
-    background: fade(@green, 20);
+    border-color: @green !important;
+    color: @green !important;
+    background: fade(@green, 20) !important;
   }
 
   &.green {
-    border-color: @green;
-    color: @green;
-    background: fade(@green, 20);
+    border-color: @green !important;
+    color: @green !important;
+    background: fade(@green, 20) !important;
   }
 
   & + button {
     margin-left: 16px;
   }
 }
+.tabCut1 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 10px 0px 0px 20px;
+
+  .tabCut-item {
+    width: 93px;
+    height: 23px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+    background: fade(@green, 50);
+    color: fade(@white, 50);
+    position: relative;
+    font-size: 12px;
+    &.green1 {
+      background: fade(@green, 80);
+      color: fade(@white, 80);
+    }
+
+    &.green1:before {
+      content: "";
+      width: 1px;
+      height: 7px;
+      background-color: #ffffff;
+      position: absolute;
+      left: 0;
+    }
+
+    &.green1:after {
+      content: "";
+      width: 1px;
+      height: 7px;
+      background-color: #ffffff;
+      position: absolute;
+      right: 0;
+    }
+  }
+}

src/assets/styles/form.less

@@ -142,6 +142,112 @@
       transition: opacity 0.3s ease-out;
     }
   }
+
+
+//   新样式
+ .query-form {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    padding-left: 20px;
+    &.left {
+      justify-content: flex-start;
+    }
+    // 带标签查询项
+    .station {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      margin-right: 10px;
+    }
+    // 日期
+    .dates {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      margin-right: 10px;
+    }
+
+    .search-input {
+      margin-left: 10px;
+    }
+
+    .el-input__inner {
+      border-radius: 12.5px !important;
+    }
+
+    .query-actions {
+      display: flex;
+      flex-direction: row;
+      align-content: center;
+      margin-left: 10px;
+    }
+  }
+
+  input {
+    box-sizing: border-box;
+    flex: 0 0 200px;
+    border: 0px solid @darkgray;
+    color: @white;
+    outline: unset;
+    padding-right: 40px;
+    background: fade(#536268, 20);
+
+    &::placeholder {
+      font-size: 12px;
+      text-align: right;
+      color: @darkgray;
+    }
+  }
+
+  input[type="checkbox"] {
+    position: relative;
+    display: inline-block;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    outline: none;
+    border: 1px solid @gray;
+    background-color: #000;
+    border-radius: 20%;
+    margin: 0;
+    padding: 0;
+
+    &:checked {
+      border-color: @green;
+      background: @green;
+    }
+
+    &::after {
+      display: inline-block;
+      content: " ";
+      position: absolute;
+      left: 30%;
+      top: 5%;
+      width: 3px;
+      height: 7px;
+      border-color: #fff;
+      border-style: solid;
+      border-width: 0px 2px 2px 0px;
+      transform: rotate(45deg);
+      opacity: 0;
+    }
+
+    &:checked::after {
+      content: "";
+      opacity: 1;
+      transition: opacity 0.3s ease-out;
+    }
+  }
 }
 
 .search-input {

src/assets/styles/table.less

@@ -2,6 +2,13 @@
 @titleGray: #9ca5a8;
 @rowGray: #606769;
 @darkBack: #536268;
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border-bottom: 0 !important;
+}
+.el-table th.el-table__cell {
+  border-right: 1px solid rgba(0, 0, 0, 0.8) !important;
+}
 .com-table {
   width: 100%;
   border-collapse: collapse;

src/assets/styles/theme/light/light-jsc.css

@@ -13,6 +13,11 @@
   font-weight: 700;
   transition: 0.25s;
 }
+#appBody.light .green1 {
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: 700;
+  transition: 0.25s;
+}
 #appBody.light .white {
   color: #000;
   transition: 0.25s;
@@ -40,12 +45,20 @@
   color: #000;
   transition: 0.25s;
 }
-#appBody.light .security-days .security .text1 {
+#appBody.light .security-days .num {
+  color: #36348e;
+  transition: 0.25s;
+}
+#appBody.light .security-days .text1 {
   color: #000;
   transition: 0.25s;
 }
-#appBody.light .security-days .num {
-  color: #36348e;
+#appBody.light .save-item .save-value {
+  color: #000;
+  transition: 0.25s;
+}
+#appBody.light .save-item .save-name {
+  color: #5e6269;
   transition: 0.25s;
 }
 #appBody.light .tab-box .tab-item span svg use {
@@ -71,8 +84,13 @@
   background-image: linear-gradient(to top, rgba(57, 54, 143, 0.5), rgba(5, 187, 76, 0));
   transition: 0.25s;
 }
+#appBody.light .map .tab-box .tab-item.active1 {
+  color: #36348e;
+  position: relative;
+  background-image: linear-gradient(to top, rgba(57, 54, 143, 0.5), #ffffff);
+  transition: 0.25s;
+}
 #appBody.light .map .tab-box .tab-item.active::after {
-  /* border: 0.093vh solid #36348e; */
   transition: 0.25s;
 }
 #appBody.light .header-menu .header-menu-list .header-menu-item.active::after {
@@ -116,6 +134,12 @@
   color: #36348e;
   transition: 0.25s;
 }
+#appBody.light .query.mg-b-8 {
+  padding-top: 10px;
+}
+#appBody.light .query.mg-b-16 {
+  padding-top: 10px;
+}
 #appBody.light .svg-map-nx .item-label rect {
   fill: #36348e;
   transition: 0.25s;
@@ -146,10 +170,6 @@
   fill: #36348e;
   transition: 0.25s;
 }
-#appBody.light .svg-map .item-label-hover .isshow rect {
-  fill: #36348e;
-  transition: 0.25s;
-}
 #appBody.light .svg-map .item-label .mapKey {
   fill: #fff;
   transition: 0.25s;
@@ -172,6 +192,41 @@
 #appBody.light .svg-map .esp-c {
   stroke: #36348e;
 }
+#appBody.light .status {
+  background-color: #ffffff;
+  padding: 10px;
+  margin-top: 10px;
+  border-radius: 10px;
+}
+#appBody.light .status .table-box1 {
+  border: 0.093vh solid #ffffff;
+}
+#appBody.light .status .com-table tbody tr:nth-child(2n) {
+  background-color: #ffffff;
+}
+#appBody.light .monitorOverview .stationName {
+  color: #000000;
+}
+#appBody.light .monitorOverview .station-info .item-title {
+  color: #000000;
+}
+#appBody.light .monitorOverview .station-info .item-name {
+  color: #000000;
+}
+#appBody.light .monitorOverview .station-info .item-unit {
+  color: #000000;
+}
+#appBody.light .monitorOverview .model .energy-title {
+  color: #000000;
+  background-color: rgba(83, 98, 104, 0.4);
+}
+#appBody.light .monitorOverview .model1 .energy-title {
+  color: #000000;
+  background-color: rgba(83, 98, 104, 0.4);
+}
+#appBody.light .monitorOverview .energy-content .num {
+  color: #000000;
+}
 #appBody.light .com-panel-3,
 #appBody.light .com-panel,
 #appBody.light .header-body {
@@ -343,10 +398,10 @@
   border: 1px solid #ffffff;
 }
 #appBody.light .zbtjfx .zbtjfx-body .zbtjfx-up .zbtjfx-up-panel .zbtjfx-up-panel-l {
-  border-right: 1px dashed #36348E;
+  border-right: 1px dashed #36348e;
 }
 #appBody.light .zbtjfx .zbtjfx-body .zbtjfx-up .zbtjfx-up-panel .zbtjfx-up-panel-r-t {
-  color: #36348E;
+  color: #36348e;
 }
 #appBody.light .zbtjfx .zbtjfx-body .zbtjfx-up .zbtjfx-up-panel .zbtjfx-up-panel-r-b {
   color: #000000;

src/components/chart/bar/multiple-bar-chart.vue

@@ -153,10 +153,10 @@ export default {
       default: () => [
         // "#05bb4c",
         "#ba3237",
-         "#e17e23",
+        "#e17e23",
         "#4b55ae",
         "#c531c7",
-         "#ccf0d3",
+        "#ccf0d3",
       ],
     },
     showAnimation: {
@@ -363,7 +363,6 @@ export default {
     },
   },
   created() {
- 
     this.$nextTick(() => {
       this.id = "pie-chart-" + util.newGUID();
     });

src/components/chart/combination/bar-line-chart.vue

@@ -77,7 +77,14 @@ export default {
     // 颜色
     color: {
       type: Array,
-      default: () => ["#323E6F", "#e17e23", "#ba3237", "#c531c7", "#ffffff", "#EDEB2F"],
+      default: () => [
+        "#323E6F",
+        "#e17e23",
+        "#ba3237",
+        "#c531c7",
+        "#ffffff",
+        "#EDEB2F",
+      ],
     },
     // 每页显示个数
     pageSize: {
@@ -112,33 +119,38 @@ export default {
         grid: {
           left: 40,
           right: 16,
-          bottom: 16,
-          top: 16,
+          bottom: 35,
+          top: 30,
           containLabel: true,
         },
         legend: {
           show: this.showLegend,
           data: this.bardata.legend,
+          top: 5,
           right: 56,
           icon: "ract",
           itemWidth: 8,
           itemHeight: 8,
-          inactiveColor: this.$store.state.themeName === "dark"
+          inactiveColor:
+            this.$store.state.themeName === "dark"
               ? partten.getColor("gray")
               : "#000",
           textStyle: {
-            color: this.$store.state.themeName === "dark"
-              ? partten.getColor("grayl")
-              : "#000",
+            color:
+              this.$store.state.themeName === "dark"
+                ? partten.getColor("grayl")
+                : "#000",
             fontSize: 12,
           },
         },
         tooltip: {
           trigger: "axis",
-          backgroundColor: this.$store.state.themeName === "dark"
+          backgroundColor:
+            this.$store.state.themeName === "dark"
               ? "rgba(0,0,0,0.4)"
               : "rgba(255,255,255,0.5)",
-          borderColor: this.$store.state.themeName === "dark"
+          borderColor:
+            this.$store.state.themeName === "dark"
               ? partten.getColor("gray")
               : "#000",
           textStyle: {
@@ -146,61 +158,62 @@ export default {
             fontSize: util.vh(16),
           },
         },
-        dataZoom: [
-          {
-            type: "inside",
-            start: 0,
-            end: this.end,
-            yAxisIndex: [0],
-          },
-          {
-            start: 0,
-            end: this.end,
-            bottom: 40,
-            yAxisIndex: [0],
-            backgroundColor: "transparent",
-            // handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
-            handleStyle: {
-              color: this.$store.state.themeName === "dark"
-              ? partten.getColor("green")
-              : partten.getColor("blue"),
-            },
-            moveHandleSize: 0,
-            // dataBackground: {
-            //   lineStyle: {
-            //     color: partten.getColor("gray"),
-            //   },
-            //   areaStyle: {
-            //     color: partten.getColor("gray"),
-            //   },
-            // },
-            // selectedDataBackground: {
-            //   lineStyle: {
-            //     color: partten.getColor("yellow"),
-            //   },
-            //   areaStyle: {
-            //     color: partten.getColor("yellow"),
-            //   },
-            // },
-            fillerColor: "transparent",
-            textStyle: {
-              color: this.$store.state.themeName === "dark"
-              ? partten.getColor("grayl")
-              : "#000",
-            },
-            borderColor: this.$store.state.themeName === "dark"
-              ? partten.getColor("gray")
-              : "#000",
-            brushSelect: false,
-          },
-        ],
+        // dataZoom: [
+        //   {
+        //     type: "inside",
+        //     start: 0,
+        //     end: this.end,
+        //     yAxisIndex: [0],
+        //   },
+        //   {
+        //     start: 0,
+        //     end: this.end,
+        //     bottom: 40,
+        //     yAxisIndex: [0],
+        //     backgroundColor: "transparent",
+        //     // handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+        //     handleStyle: {
+        //       color: this.$store.state.themeName === "dark"
+        //       ? partten.getColor("green")
+        //       : partten.getColor("blue"),
+        //     },
+        //     moveHandleSize: 0,
+        //     // dataBackground: {
+        //     //   lineStyle: {
+        //     //     color: partten.getColor("gray"),
+        //     //   },
+        //     //   areaStyle: {
+        //     //     color: partten.getColor("gray"),
+        //     //   },
+        //     // },
+        //     // selectedDataBackground: {
+        //     //   lineStyle: {
+        //     //     color: partten.getColor("yellow"),
+        //     //   },
+        //     //   areaStyle: {
+        //     //     color: partten.getColor("yellow"),
+        //     //   },
+        //     // },
+        //     fillerColor: "transparent",
+        //     textStyle: {
+        //       color: this.$store.state.themeName === "dark"
+        //       ? partten.getColor("grayl")
+        //       : "#000",
+        //     },
+        //     borderColor: this.$store.state.themeName === "dark"
+        //       ? partten.getColor("gray")
+        //       : "#000",
+        //     brushSelect: false,
+        //   },
+        // ],
         yAxis: [
           {
             type: "category",
             axisLabel: {
-              color: this.$store.state.themeName === "dark"
-              ? partten.getColor("gray")
-              : "#000",
+              color:
+                this.$store.state.themeName === "dark"
+                  ? partten.getColor("gray")
+                  : "#000",
             },
             inverse: true,
             // minInterval: 10,
@@ -218,18 +231,21 @@ export default {
           {
             type: "value",
             axisLabel: {
-              color: this.$store.state.themeName === "dark"
-              ? partten.getColor("gray")
-              : "#000",
+              color:
+                this.$store.state.themeName === "dark"
+                  ? partten.getColor("gray")
+                  : "#000",
             },
             axisLine: {
+              show: false,
               type: "dashed",
               lineStyle: {
-                color: this.$store.state.themeName === "dark"
-              ? partten.getColor("gray")
-              : "#000",
+                color:
+                  this.$store.state.themeName === "dark"
+                    ? partten.getColor("gray")
+                    : "#000",
               },
-              width: 5,
+              width: 15,
             },
             axisTick: {
               show: false,
@@ -237,8 +253,11 @@ export default {
             splitLine: {
               lineStyle: {
                 type: "dashed",
-                dashOffset: 10,
-                color: this.$store.state.themeName === "dark" ? "#5a6162" : "#000" + 80,
+                dashOffset: 100,
+                color:
+                  this.$store.state.themeName === "dark"
+                    ? "#5a6162"
+                    : "#000" + 80,
               },
             },
           },
@@ -271,7 +290,7 @@ export default {
             name: this.bardata.legend[i],
             type: "bar",
             stack: "总量",
-            barWidth: 16,
+            barWidth: 10,
             label: {
               show: false,
               position: "insideRight",
@@ -279,7 +298,6 @@ export default {
             data: this.bardata.data[i],
           });
         }
-
       // line data
       if (this.lineData.length > 0) {
         option.series.push({
@@ -289,14 +307,16 @@ export default {
           smooth: false, //平滑展示
           xAxisIndex: 1,
           lineStyle: {
-            color: this.$store.state.themeName === "dark"
-              ? partten.getColor("green")
-              : partten.getColor("blue"),
+            color:
+              this.$store.state.themeName === "dark"
+                ? partten.getColor("green")
+                : partten.getColor("blue"),
           },
           itemStyle: {
-            color: this.$store.state.themeName === "dark"
-              ? partten.getColor("green")
-              : partten.getColor("blue"),
+            color:
+              this.$store.state.themeName === "dark"
+                ? partten.getColor("green")
+                : partten.getColor("blue"),
           },
         });
       }
@@ -324,12 +344,12 @@ export default {
       this.initChart();
     });
   },
-  beforeUpdate(){
-	  this.areaData = this.bardata.area;
-  },
-  beforeUpdate(){
-  	  this.areaData = this.bardata.area;
+  beforeUpdate() {
+    this.areaData = this.bardata.area;
   },
+  //   beforeUpdate() {
+  //     this.areaData = this.bardata.area;
+  //   },
   watch: {
     bardata(val) {
       if (val.area && val.area.length < this.pageSize) {
@@ -339,9 +359,9 @@ export default {
         }
       }
     },
-	"$store.state.themeName"() {
-	  this.initChart();
-	},
+    "$store.state.themeName"() {
+      this.initChart();
+    },
   },
 };
 </script>

src/components/chart/line/double-line-chart-home.vue

@@ -165,7 +165,7 @@ export default {
       });
     },
     series() {
-      console.log(2222)
+      console.log(2222);
       let result = [];
       this.list.forEach((value, index) => {
         result.push({
@@ -180,7 +180,7 @@ export default {
               width: 1,
             },
           },
-          yAxisIndex: value.yAxisIndex ||0,
+          yAxisIndex: value.yAxisIndex || 0,
           data: value.value.map((t) => {
             return t.value || t;
           }),
@@ -229,8 +229,8 @@ export default {
           },
         },
         legend: {
-          orient: 'right', //垂直显示 y: 'center', //延Y轴居中 x: 'right' //居右显示
-          // 
+          orient: "right", //垂直显示 y: 'center', //延Y轴居中 x: 'right' //居右显示
+          //
           show: this.showLegend,
           data: this.legend,
           right: 5,

src/components/chart/pie/dual-pie-chart.vue

@@ -6,7 +6,7 @@
 import util from "@/helper/util.js";
 import partten from "@/helper/partten.js";
 import * as echarts from "echarts";
-import { left } from '@antv/x6/lib/registry/port-layout/line';
+import { left } from "@antv/x6/lib/registry/port-layout/line";
 
 export default {
   name: "dsah-pie",
@@ -48,9 +48,7 @@ export default {
     // 外部饼图数据
     outerData: {
       type: Array,
-      default: () => [
-        
-      ],
+      default: () => [],
     },
     // 颜色
     color: {
@@ -77,20 +75,22 @@ export default {
       let legendData = [...legend1, ...legend2];
 
       let option = {
-        color: [  
-        "#e17e23",
-        "#ba3237",
-        "#c531c7",
-        "#4b55ae",
-        "#ccf0d3",
-        "#05bb4c",
+        color: [
+          "#e17e23",
+          "#ba3237",
+          "#c531c7",
+          "#4b55ae",
+          "#ccf0d3",
+          "#05bb4c",
         ],
         tooltip: {
           trigger: "item",
-          backgroundColor: this.$store.state.themeName === "dark"
+          backgroundColor:
+            this.$store.state.themeName === "dark"
               ? "rgba(0,0,0,0.4)"
               : "rgba(255,255,255,0.5)",
-          borderColor: this.$store.state.themeName === "dark"
+          borderColor:
+            this.$store.state.themeName === "dark"
               ? partten.getColor("gray")
               : "#000",
           textStyle: {
@@ -174,14 +174,18 @@ export default {
                 // length: 40,
                 // length2: 120,
                 lineStyle: {
-                  color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
+                  color:
+                    this.$store.state.themeName === "dark" ? "#fff" : "#000",
                   fontSize: util.vh(14),
                 },
               },
             },
             itemStyle: {
               normal: {
-                borderWidth:this.$store.state.themeName === "dark" ? util.vh(14): util.vh(8),
+                borderWidth:
+                  this.$store.state.themeName === "dark"
+                    ? util.vh(14)
+                    : util.vh(8),
                 borderColor: "#071812",
               },
             },
@@ -192,10 +196,14 @@ export default {
                 },
                 padding: [0, 0, 0, 0],
                 rich: {
-                  color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
+                  color:
+                    this.$store.state.themeName === "dark" ? "#fff" : "#000",
                   percent: {
                     fontSize: util.vh(14),
-                    color: this.$store.state.themeName === "dark" ? "#FFFFFF" : "#000000" ,
+                    color:
+                      this.$store.state.themeName === "dark"
+                        ? "#FFFFFF"
+                        : "#000000",
                   },
                 },
               },

src/store/index.js

@@ -1,9 +1,8 @@
+import { createStore, createLogger } from "vuex";
+import weather from "./modules/weather";
+import user from "./modules/user";
 
-import { createStore, createLogger } from 'vuex';
-import weather from './modules/weather';
-import user from './modules/user';
-
-const debug = process.env.NODE_ENV !== 'production';
+const debug = process.env.NODE_ENV !== "production";
 
 // 默认状态
 const state = {
@@ -24,14 +23,14 @@ const mutations = {
     state.themeName = tag;
   },
   update(state, newData) {
-    state.windturbineMap = newData.data
+    state.windturbineMap = newData.data;
   },
   changeMenuData(state, newData) {
     state.menuData = newData;
   },
   changeModuleName(state, newData) {
     state.moudleName = newData;
-  }
+  },
 };
 
 const actions = {
@@ -46,30 +45,30 @@ const actions = {
   },
   changeModuleName(context, str) {
     context.commit("changeModuleName", str);
-  }
+  },
 };
 
 const getters = {
-  authToken: state => state.user.authToken,  //建立token的快捷访问   user 是因为index.js中导入的时候名称定义为user
-  submitDDTag: state => state.submitDDTag,
-  loading: state => state.loading,
-  username: state => state.user.username,
-  themeName: state => state.themeName,
-  asidez: state => state.z,
-  mainy: state => state.y,
-  login: state => state.login,
-  menuData: state => state.menuData
-}
+  authToken: (state) => state.user.authToken, //建立token的快捷访问   user 是因为index.js中导入的时候名称定义为user
+  submitDDTag: (state) => state.submitDDTag,
+  loading: (state) => state.loading,
+  username: (state) => state.user.username,
+  themeName: (state) => state.themeName,
+  asidez: (state) => state.z,
+  mainy: (state) => state.y,
+  login: (state) => state.login,
+  menuData: (state) => state.menuData,
+};
 
 export default createStore({
   modules: {
     weather,
-    user
+    user,
   },
   state,
   mutations,
   actions,
   getters,
   strict: debug,
-  plugins: debug ? [createLogger()] : []
-});
+  plugins: debug ? [createLogger()] : [],
+});

src/views/Decision/Decision1.vue

@@ -1,131 +1,223 @@
 <template>
   <div class="decision-page-1">
-    <div class="query mg-b-8">
-      <div class="query-items">
-        <div class="query-item">
-          <div class="lable">场站：</div>
-          <div class="search-input">
-            <el-select
-              v-model="value1"
-              @change="ChangZhanChange(value1)"
-              clearable
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in ChangZhan"
-                :key="item.id"
-                :value="item.id"
-                :label="item.name"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">项目：</div>
-          <div class="search-input">
-            <el-select
-              v-model="value2"
-              @change="XiangMuChange(value2)"
-              multiple
-              collapse-tags
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in XiangMu"
-                :key="item.id"
-                :value="item.id"
-                :label="item.name"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">线路：</div>
-          <div class="search-input">
-            <el-select
-              v-model="value3"
-              @change="XianLuChange(value3)"
-              multiple
-              collapse-tags
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in XianLu"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">开始日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="value4"
-              @change="BeginChange(value4)"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-          </div>
+    <div class="query-form">
+      <!-- mg-b-8-->
+      <div class="station">
+        场站：
+        <el-select
+          size="mini"
+          v-model="value1"
+          @change="ChangZhanChange(value1)"
+          clearable
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in ChangZhan"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="station">
+        项目：
+        <el-select
+          size="mini"
+          v-model="value2"
+          @change="XiangMuChange(value2)"
+          multiple
+          collapse-tags
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in XiangMu"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="station">
+        线路：
+        <el-select
+          size="mini"
+          v-model="value3"
+          @change="XianLuChange(value3)"
+          multiple
+          collapse-tags
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in XianLu"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="dates">
+        开始日期：
+        <div class="search-input">
+          <el-date-picker
+            size="mini"
+            v-model="value4"
+            @change="BeginChange(value4)"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            popper-class="date-select"
+          >
+          </el-date-picker>
         </div>
-        <div class="query-item">
-          <div class="lable">结束日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="value5"
-              @change="EndChange(value5)"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-            <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="''" />
-            </div>
-          </div>
+      </div>
+      <div class="dates">
+        结束日期：
+        <div class="search-input">
+          <el-date-picker
+            size="mini"
+            v-model="value5"
+            @change="EndChange(value5)"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            popper-class="date-select"
+          >
+          </el-date-picker>
+          <!-- <div class="unit svg-icon svg-icon-gray">
+            <svg-icon :svgid="''" />
+          </div> -->
         </div>
       </div>
-      <div class="query-actions" style="margin-left: 0px">
-        <button class="btn green" @click="AjaxCommon()">搜索</button>
-        <button class="btn" @click="mxClick()">明细信息</button>
-        <button class="btn" @click="exportExcel()">导出</button>
+      <div class="query-actions">
+        <el-button round size="mini" class="btn green" @click="AjaxCommon()"
+          >搜索</el-button
+        >
+        <el-button round size="mini" class="btn" @click="mxClick()"
+          >明细信息</el-button
+        >
+        <el-button round size="mini" class="btn" @click="exportExcel()"
+          >导出</el-button
+        >
       </div>
     </div>
-    <div class="actions mg-b-8">
-      <button
+    <!-- <div class="actions">
+      <el-button
         class="btn"
         :class="TypeClass == 1 ? 'green' : ''"
         @click="TypeClick(1)"
       >
         风场
-      </button>
-      <button
+      </el-button>
+      <el-button
         class="btn"
         :class="TypeClass == 2 ? 'green' : ''"
         @click="TypeClick(2)"
       >
         项目
-      </button>
-      <button
+      </el-button>
+      <el-button
         class="btn"
         :class="TypeClass == 3 ? 'green' : ''"
         @click="TypeClick(3)"
       >
         集电线路
-      </button>
+      </el-button>
+    </div> -->
+    <div class="tabCut1">
+      <div
+        class="tabCut-item"
+        @click="TypeClick(val.id)"
+        :class="TypeClass === val.id ? 'green1' : ''"
+        v-for="val in typeOptions"
+        :key="val.id"
+      >
+        <span>{{ val.name }}</span>
+      </div>
     </div>
-    <el-row :type="'flex'" class="content">
+    <!-- <div class="performance-title">
+      <div class="left-title">风机绩效榜</div>
+      <div class="right-title">项目列表</div>
+    </div> -->
+    <div class="performance" style="height: 90vh">
+      <div class="economicTable" style="height: 86vh">
+        <el-table
+          :data="tableData.data"
+          size="mini"
+          :cell-style="{ padding: '6px' }"
+          :row-style="{ height: '0px' }"
+          cell-class-name="table_cell"
+          stripe
+          @header-click="onHeaderClick"
+        >
+          <el-table-column align="center" prop="" label="" width="900">
+          </el-table-column>
+          <el-table-column align="center" type="index"> </el-table-column>
+          <el-table-column
+            align="center"
+            prop="name"
+            show-overflow-tooltip
+            label="名称"
+          >
+          </el-table-column>
+          <el-table-column align="center" prop="llfdl" label="理论发电量">
+          </el-table-column>
+          <el-table-column align="center" prop="sjfdl" label="实际发电量">
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="fnlly"
+            label="风能利用率%"
+            width="120"
+          >
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            align="center"
+            prop="speed"
+            label="风速"
+          >
+          </el-table-column>
+          <el-table-column align="center" prop="fjhjx" label="故障">
+          </el-table-column>
+          <el-table-column align="center" prop="jhjx" label="检修">
+          </el-table-column>
+          <el-table-column align="center" prop="sl" label="受累">
+          </el-table-column>
+          <el-table-column align="center" prop="xd" label="限电">
+          </el-table-column>
+          <el-table-column align="center" prop="xn" label="性能">
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="left">
+        <bar-line-chart
+          v-if="showDisplay"
+          :height="height"
+          :bardata="bardata"
+          :lineData="lineData"
+          :color="barColor"
+          lineName="理论发电量"
+        />
+        <div class="lyl" :style="{ height: tableData.data.length * 35 + 'px' }">
+          <div
+            class="lyl-item"
+            v-for="(item, index) in tableData.data"
+            :key="index"
+          >
+            {{ item.fnlly }}%
+            <img class="lyl-item-img" src="@assets/images/fnlyl.png" />
+          </div>
+        </div>
+        <div class="dashed" :style="{ height: height }"></div>
+      </div>
+    </div>
+    <!-- <el-row :type="'flex'" class="content">
       <el-col :span="12" class="pd-r-8">
         <toolbar-panel title="风机绩效榜 (万kWh)" :showLine="false">
           <bar-line-chart
@@ -140,7 +232,6 @@
       <el-col :span="12" class="pd-l-8">
         <panel :title="'项目列表'" :showLine="false">
           <div class="project-table">
-            <!-- 分页Table -->
             <Table :data="tableData" :height="'calc(80vh - 50px)'">
               <template v-slot:tr v-if="tableData.data.length > 0">
                 <tr>
@@ -180,11 +271,10 @@
                 </tr>
               </template>
             </Table>
-            <!-- <Table :data="tableData"></Table> -->
           </div>
         </panel>
       </el-col>
-    </el-row>
+    </el-row> -->
   </div>
 </template>
 
@@ -307,9 +397,61 @@ export default {
         "#ccf0d3",
         "#4b55ae",
       ],
-      TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
+      actionClass: "1",
+      TypeClass: "1", //风场，项目，集电线路 的按钮颜色，默认第一个
+      typeOptions: [
+        { id: "1", name: "风场" },
+        { id: "2", name: "项目" },
+        { id: "3", name: "集电线路" },
+      ],
       bardata: [],
       lineData: [],
+      showDisplay: true,
+      height: "880px",
+      sort: "",
+      target: "",
+      sortList: [
+        {
+          id: "name",
+          sort: false,
+        },
+        {
+          id: "llfdl",
+          sort: false,
+        },
+        {
+          id: "sjfdl",
+          sort: false,
+        },
+        {
+          id: "speed",
+          sort: false,
+        },
+        {
+          id: "fjhjx",
+          sort: false,
+        },
+        {
+          id: "jhjx",
+          sort: false,
+        },
+        {
+          id: "sl",
+          sort: false,
+        },
+        {
+          id: "xd",
+          sort: false,
+        },
+        {
+          id: "xn",
+          sort: false,
+        },
+        {
+          id: "fnlly",
+          sort: false,
+        },
+      ],
     };
   },
   created() {
@@ -342,11 +484,13 @@ export default {
       this.XiangMuVal(val);
     },
     XiangMuVal(val) {
-      api.benchmarkingProjectList({
-         wpids: val,
-      }).then((res) => {
-        this.XiangMu = res.data;
-      });
+      api
+        .benchmarkingProjectList({
+          wpids: val,
+        })
+        .then((res) => {
+          this.XiangMu = res.data;
+        });
 
       // var that = this;
       // that.API.requestData({
@@ -369,11 +513,13 @@ export default {
       this.XianLuVal(val);
     },
     XianLuVal(val) {
-      api.benchmarkingLineList({
-         projects: val,
-      }).then((res) => {
-        this.XianLu = res.data;
-      });
+      api
+        .benchmarkingLineList({
+          projects: val,
+        })
+        .then((res) => {
+          this.XianLu = res.data;
+        });
 
       // var that = this;
       // that.API.requestData({
@@ -428,16 +574,31 @@ export default {
         return end;
       }
     },
+    onHeaderClick(column) {
+      console.log(column);
+      this.target = column.property;
+      this.sortList.forEach((item) => {
+        if (item.id === column.property) {
+          item.sort = !item.sort;
+          this.sort = item.sort ? 1 : 2;
+        } else {
+          item.sort = false;
+        }
+      });
+      this.AjaxCommon();
+    },
     AjaxCommon() {
-      api.benchmarking({
+      this.actionClass = 1;
+      api
+        .benchmarking({
           wpids: this.value1,
           projectids: this.value2,
           lineids: this.value3,
           beginDate: this.value4,
           endDate: this.value5,
           type: this.TypeClass,
-          target: "",
-          sort: "",
+          target: this.target,
+          sort: this.sort,
         })
         .then((res) => {
           if (res) {
@@ -499,6 +660,25 @@ export default {
                 data: arr1,
               };
             }
+
+            // if (this.lineData.length > 22) {
+            //   this.height = this.lineData.length * 35 + 148 + "px";
+            // } else if (this.lineData.length == 14) {
+            //   this.height = 23 * 35 + 36 + "px";
+            // } else {
+            //   this.height = 23 * 35 + "px";
+            // }
+            if (this.lineData.length > 22) {
+              this.height = this.lineData.length * 35 + 85 + "px";
+            } else if (this.lineData.length == 14) {
+              this.height = 22 * 35 + 46 + "px";
+            } else {
+              this.height = 21 * 35 + 46 + "px";
+            }
+            this.showDisplay = false;
+            setTimeout(() => {
+              this.showDisplay = true;
+            }, 10);
             this.tableDataEnd = data2[data2.length - 1];
             data2.pop();
             this.tableData.data = data2;
@@ -613,8 +793,136 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .decision-page-1 {
+  height: 93vh;
+  display: flex;
+  flex-direction: column;
+  .performance-title {
+    display: flex;
+    height: 41px;
+    align-items: center;
+
+    .left-title,
+    .right-title {
+      width: 46.8%;
+      padding-left: 30px;
+    }
+  }
+  .performance {
+    // display: flex;
+    // flex-direction: row;
+    width: 99.5%;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 5px;
+    overflow-y: auto;
+    position: relative;
+
+    .economicTable {
+      .el-table td.el-table__cell,
+      .el-table th.el-table__cell.is-leaf {
+        border-bottom: 0;
+      }
+    }
+    .left {
+      width: 45%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: flex;
+      flex-direction: row;
+      .dashed {
+        position: absolute;
+        width: 1px;
+        background-image: linear-gradient(
+          #3a4043 0%,
+          #3a4043 40%,
+          transparent 50%
+        );
+        background-size: 1px 9px;
+        margin-top: 45px;
+        height: 100%;
+        right: -50px;
+      }
+    }
+    .lyl {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 70px;
+      font-size: 14px;
+      font-family: Arial;
+      font-weight: 400;
+      color: #1c98fe;
+      margin-top: 27px;
+      margin-left: 10px;
+    }
+    .lyl-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 36px;
+      position: relative;
+      width: 120px;
+    }
+    .lyl-item-img {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      // height: 33px;
+    }
+
+    // .center {
+    //   width: 3%;
+    //   height: 90%;
+    //   position: relative;
+    //   margin-top: 50px;
+
+    //   .using {
+    //     width: 100%;
+    //     height: 100%;
+    //     z-index: 99;
+    //     position: absolute;
+    //     right: 0px;
+    //     top: 0px;
+    //   }
+    // }
+
+    .dashed {
+      width: 1px;
+      background-image: linear-gradient(
+        #3a4043 0%,
+        #3a4043 40%,
+        transparent 50%
+      );
+      background-size: 1px 9px;
+      margin-top: 45px;
+    }
+
+    .dashed1 {
+      width: 1px;
+      background-image: linear-gradient(
+        #3a4043 0%,
+        #3a4043 40%,
+        transparent 50%
+      );
+      background-size: 1px 9px;
+      margin-top: 45px;
+      margin-left: 20px;
+    }
+
+    .table {
+      width: 48%;
+      // background-color: yellowgreen;
+    }
+  }
+
+
+  .table_cell .cell {
+    white-space: nowrap;
+  }
+
   .com-panel .panel-title {
     line-height: 3.4259vh;
   }

src/views/Decision/Decision1Mx.vue

@@ -1,131 +1,219 @@
 <template>
   <div class="decision-page-1">
-    <div class="query mg-b-8">
-      <div class="query-items">
-        <div class="query-item">
-          <div class="lable">场站：</div>
-          <div class="search-input">
-            <el-select
-              v-model="value1"
-              @change="ChangZhanChange(value1)"
-              clearable
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in ChangZhan"
-                :key="item.id"
-                :value="item.id"
-                :label="item.name"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">项目：</div>
-          <div class="search-input">
-            <el-select
-              v-model="value2"
-              @change="XiangMuChange(value2)"
-              multiple
-              collapse-tags
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in XiangMu"
-                :key="item.id"
-                :value="item.id"
-                :label="item.name"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">线路：</div>
-          <div class="search-input">
-            <el-select
-              v-model="value3"
-              @change="XianLuChange(value3)"
-              multiple
-              collapse-tags
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in XianLu"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">开始日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="value4"
-              @change="BeginChange(value4)"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-          </div>
+    <div class="query-form">
+      <!-- mg-b-8-->
+      <div class="station">
+        场站：
+        <el-select
+          size="mini"
+          v-model="value1"
+          @change="ChangZhanChange(value1)"
+          clearable
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in ChangZhan"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="station">
+        项目：
+        <el-select
+          size="mini"
+          v-model="value2"
+          @change="XiangMuChange(value2)"
+          multiple
+          collapse-tags
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in XiangMu"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="station">
+        线路：
+        <el-select
+          size="mini"
+          v-model="value3"
+          @change="XianLuChange(value3)"
+          multiple
+          collapse-tags
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in XianLu"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="dates">
+        开始日期：
+        <div class="search-input">
+          <el-date-picker
+            size="mini"
+            v-model="value4"
+            @change="BeginChange(value4)"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            popper-class="date-select"
+          >
+          </el-date-picker>
         </div>
-        <div class="query-item">
-          <div class="lable">结束日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="value5"
-              @change="EndChange(value5)"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-            <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="''" />
-            </div>
-          </div>
+      </div>
+      <div class="dates">
+        结束日期：
+        <div class="search-input">
+          <el-date-picker
+            size="mini"
+            v-model="value5"
+            @change="EndChange(value5)"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            popper-class="date-select"
+          >
+          </el-date-picker>
+          <!-- <div class="unit svg-icon svg-icon-gray">
+            <svg-icon :svgid="''" />
+          </div> -->
         </div>
       </div>
       <div class="query-actions">
-        <button class="btn" @click="mxClick()">搜索</button>
-        <button class="btn green">明细信息</button>
-        <button class="btn" @click="exportExcel()">导出</button>
+        <el-button round size="mini" class="btn" @click="mxClick"
+          >搜索</el-button
+        >
+        <el-button round size="mini" class="btn green" @click="AjaxCommon"
+          >明细信息</el-button
+        >
+        <el-button round size="mini" class="btn" @click="exportExcel"
+          >导出</el-button
+        >
       </div>
     </div>
-    <div class="actions mg-b-8">
-      <button
-        class="btn"
-        :class="TypeClass == 1 ? 'green' : ''"
-        @click="TypeClick(1)"
-      >
-        风场
-      </button>
-      <button
-        class="btn"
-        :class="TypeClass == 2 ? 'green' : ''"
-        @click="TypeClick(2)"
-      >
-        项目
-      </button>
-      <button
-        class="btn"
-        :class="TypeClass == 3 ? 'green' : ''"
-        @click="TypeClick(3)"
+    <div class="tabCut1">
+      <div
+        class="tabCut-item"
+        @click="TypeClick(val.id)"
+        :class="TypeClass === val.id ? 'green1' : ''"
+        v-for="val in typeOptions"
+        :key="val.id"
       >
-        集电线路
-      </button>
+        <span>{{ val.name }}</span>
+      </div>
     </div>
-    <div class="contentMx">
+    <!-- <div class="performance-title">
+      <div class="left-title">风机绩效榜</div>
+      <div class="right-title">项目列表</div>
+    </div> -->
+    <div class="performance" style="height: 90vh">
+      <div class="economicTable" style="height: 86vh">
+        <el-table
+          :data="tableData.data"
+          size="mini"
+          :cell-style="{ padding: '6px' }"
+          :row-style="{ height: '0px' }"
+          cell-class-name="table_cell"
+          stripe
+          @header-click="onHeaderClick"
+        >
+          <el-table-column prop="" label="" width="1050"> </el-table-column>
+          <el-table-column align="center" prop="" label="" type="index">
+          </el-table-column>
+          <el-table-column align="center" prop="name" label="名称" width="180">
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="llfdl"
+            label="理论发电量"
+            width="100"
+          >
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="sjfdl"
+            label="实际发电量"
+            width="100"
+          >
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="fnlly"
+            label="风能利用率%"
+            width="140"
+          >
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="speed"
+            show-overflow-tooltip
+            label="风速"
+          >
+          </el-table-column>
+          <el-table-column align="center" prop="fjhjx1" label="故障损失">
+          </el-table-column>
+          <el-table-column align="center" prop="fjhjx2" label="故障受累">
+          </el-table-column>
+          <el-table-column align="center" prop="jhjx1" label="检修损失">
+          </el-table-column>
+          <el-table-column align="center" prop="jhjx2" label="检修受累">
+          </el-table-column>
+          <el-table-column align="center" prop="sl1" label="电网受累">
+          </el-table-column>
+          <el-table-column align="center" prop="sl2" label="天气受累">
+          </el-table-column>
+          <el-table-column align="center" prop="xd1" label="限电降出">
+          </el-table-column>
+          <el-table-column align="center" prop="xd2" label="限电停机">
+          </el-table-column>
+          <el-table-column align="center" prop="xn1" label="待风损失">
+          </el-table-column>
+          <el-table-column align="center" prop="xn2" label="手动停机">
+          </el-table-column>
+          <el-table-column align="center" prop="xn3" label="正常发电">
+          </el-table-column>
+          <el-table-column align="center" prop="xn4" label="缺陷降出">
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="left">
+        <bar-line-chart
+          v-if="showDisplay"
+          :height="height"
+          :bardata="bardata"
+          :lineData="lineData"
+          :color="barColor"
+          lineName="理论发电量"
+        />
+        <div class="lyl" :style="{ height: tableData.data.length * 35 + 'px' }">
+          <div
+            class="lyl-item"
+            v-for="(item, index) in tableData.data"
+            :key="index"
+          >
+            {{ item.fnlly }}%
+            <img class="lyl-item-img" src="@assets/images/fnlyl.png" />
+          </div>
+        </div>
+        <div class="dashed" :style="{ height: height }"></div>
+      </div>
+    </div>
+    <!-- <div class="contentMx">
       <div class="activeMx">
         <el-row :type="'flex'" class="content">
           <el-col :span="10" class="pd-r-8">
@@ -207,7 +295,7 @@
           </el-col>
         </el-row>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -384,9 +472,88 @@ export default {
         partten.getColor("brown"),
         partten.getColor("mauve"),
       ],
-      TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
+      TypeClass: "1", //风场，项目，集电线路 的按钮颜色，默认第一个
+      typeOptions: [
+        { id: "1", name: "风场" },
+        { id: "2", name: "项目" },
+        { id: "3", name: "集电线路" },
+      ],
       bardata: [],
       lineData: [],
+      showDisplay: true,
+      height: "858px",
+      sort: "",
+      target: "",
+      sortList: [
+        {
+          id: "name",
+          sort: false,
+        },
+        {
+          id: "llfdl",
+          sort: false,
+        },
+        {
+          id: "sjfdl",
+          sort: false,
+        },
+        {
+          id: "speed",
+          sort: false,
+        },
+        {
+          id: "fjhjx1",
+          sort: false,
+        },
+        {
+          id: "fjhjx2",
+          sort: false,
+        },
+        {
+          id: "jhjx1",
+          sort: false,
+        },
+        {
+          id: "jhjx2",
+          sort: false,
+        },
+        {
+          id: "sl1",
+          sort: false,
+        },
+        {
+          id: "sl2",
+          sort: false,
+        },
+        {
+          id: "xd1",
+          sort: false,
+        },
+        {
+          id: "xd2",
+          sort: false,
+        },
+        {
+          id: "xn1",
+          sort: false,
+        },
+        {
+          id: "xn2",
+          sort: false,
+        },
+        {
+          id: "xn3",
+          sort: false,
+        },
+        {
+          id: "xn4",
+          sort: false,
+        },
+        {
+          id: "fnlly",
+          sort: false,
+        },
+      ],
     };
   },
   created() {
@@ -410,11 +577,13 @@ export default {
       this.XiangMuVal(val);
     },
     XiangMuVal(val) {
-      api.benchmarkingProjectList({
-        wpids: val,
-      }).then((res) => {
-        this.XiangMu = res.data;
-      });
+      api
+        .benchmarkingProjectList({
+          wpids: val,
+        })
+        .then((res) => {
+          this.XiangMu = res.data;
+        });
     },
     XiangMuChange(val) {
       this.TypeClass = "";
@@ -424,11 +593,13 @@ export default {
       this.XianLuVal(val);
     },
     XianLuVal(val) {
-      api.benchmarkingLineList({
-        projects: val,
-      }).then((res) => {
-        this.XianLu = res.data
-      });
+      api
+        .benchmarkingLineList({
+          projects: val,
+        })
+        .then((res) => {
+          this.XianLu = res.data;
+        });
     },
     XianLuChange(val) {
       this.TypeClass = "";
@@ -676,6 +847,19 @@ export default {
         return end;
       }
     },
+    onHeaderClick(column) {
+      console.log(column);
+      this.target = column.property;
+      this.sortList.forEach((item) => {
+        if (item.id === column.property) {
+          item.sort = !item.sort;
+          this.sort = item.sort ? 1 : 2;
+        } else {
+          item.sort = false;
+        }
+      });
+      this.AjaxCommon();
+    },
     AjaxCommon() {
       api
         .benchmarkingmx({
@@ -685,8 +869,8 @@ export default {
           beginDate: this.value4,
           endDate: this.value5,
           type: this.TypeClass,
-          target: "",
-          sort: "",
+          target: this.target,
+          sort: this.sort,
         })
         .then((res) => {
           var name = [],
@@ -767,6 +951,24 @@ export default {
               data: arr1,
             };
           }
+          //   if (this.lineData.length > 22) {
+          //     this.height = this.lineData.length * 35 + 148 + "px";
+          //   } else if (this.lineData.length == 14) {
+          //     this.height = 23 * 35 + 36 + "px";
+          //   } else {
+          //     this.height = 23 * 35 + "px";
+          //   }
+          if (this.lineData.length > 22) {
+            this.height = this.lineData.length * 35 + 85 + "px";
+          } else if (this.lineData.length == 14) {
+            this.height = 22 * 35 + 46 + "px";
+          } else {
+            this.height = 21 * 35 + 46 + "px";
+          }
+          this.showDisplay = false;
+          setTimeout(() => {
+            this.showDisplay = true;
+          }, 10);
           this.tableDataEnd = data2[data2.length - 1];
           data2.pop();
           this.tableData.data = data2;
@@ -902,7 +1104,117 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
+.decision-page-1 {
+  height: 93vh;
+  display: flex;
+  flex-direction: column;
+  // 新样式
+  .performance-title {
+    display: flex;
+    height: 41px;
+    justify-content: space-between;
+    align-items: center;
+    .left-title,
+    .right-title {
+      width: 45.8%;
+
+      padding-left: 30px;
+    }
+  }
+
+  .performance {
+    display: flex;
+    flex-direction: row;
+    width: 98.5%;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 5px;
+    overflow-y: auto;
+    position: relative;
+    margin-top: 10px;
+
+    .left {
+      width: 53%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: flex;
+      flex-direction: row;
+      .dashed {
+        position: absolute;
+        width: 1px;
+        background-image: linear-gradient(
+          #3a4043 0%,
+          #3a4043 40%,
+          transparent 50%
+        );
+        background-size: 1px 9px;
+        margin-top: 45px;
+        height: 100%;
+        right: -50px;
+      }
+    }
+
+    .lyl {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 70px;
+      font-size: 14px;
+      font-family: Arial;
+      font-weight: 400;
+      color: #1c98fe;
+      margin-top: 27px;
+      margin-left: 10px;
+    }
+    .lyl-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 35px;
+      position: relative;
+      width: 120px;
+    }
+    .lyl-item-img {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      // height: 33px;
+    }
+    .dashed {
+      width: 1px;
+      background-image: linear-gradient(
+        #3a4043 0%,
+        #3a4043 40%,
+        transparent 50%
+      );
+      background-size: 1px 9px;
+      margin-top: 45px;
+    }
+
+    .dashed1 {
+      width: 1px;
+      background-image: linear-gradient(
+        #3a4043 0%,
+        #3a4043 40%,
+        transparent 50%
+      );
+      background-size: 1px 9px;
+      margin-top: 45px;
+      margin-left: 20px;
+    }
+
+    .table {
+      width: 48%;
+      // background-color: yellowgreen;
+    }
+    .table_cell .cell {
+      white-space: nowrap;
+    }
+  }
+}
+
 .contentMx::-webkit-scrollbar {
   width: 10px;
   height: 20px;
@@ -1013,4 +1325,4 @@ export default {
 .bg-green2 {
   background-color: #1d3638;
 }
-</style>
+</style>

src/views/LightMatrix1/LightMatrix1.vue

@@ -1,4 +1,4 @@
-<template >
+<template>
   <el-scrollbar>
     <div
       :class="
@@ -137,121 +137,122 @@
       </Row>
       <div class="panel-box">
         <!-- <box-select node=".card" @selectList="selectList"> -->
-          <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex" style="margin-bottom: 10px;">
-            <div
-              class="panel-title"
-              v-if="sourceMap.fjmap[pIndex][0].wpId.includes('FDC')"
-              :style="
+        <div
+          v-for="(pItem, pIndex) in sourceMap.fjmap"
+          :key="pIndex"
+          style="margin-bottom: 10px"
+        >
+          <div
+            class="panel-title"
+            v-if="sourceMap.fjmap[pIndex][0].wpId.includes('FDC')"
+            :style="
               $store.state.themeName === 'light'
                 ? 'background-color: #ffffff;border-bottom: 1px solid #B3BDC0;height: 28px;border-top-right-radius: 10px; border-top-left-radius: 10px;'
                 : ''
             "
-              
-            >
-              <div class="panel-title-name">
-                <i class="svg-icon svg-icon-sm svg-icon-green">
-                  <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
-                </i>
-                <div>
-                  {{
-                    sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name ||
-                    "------"
-                  }}
-                </div>
+          >
+            <div class="panel-title-name">
+              <i class="svg-icon svg-icon-sm svg-icon-green">
+                <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
+              </i>
+              <div>
+                {{
+                  sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name ||
+                  "------"
+                }}
+              </div>
+              <div
+                class="sub-title-item"
+                v-for="(fcItem, fcIndex) in fcStateArray"
+                :key="fcIndex"
+              >
+                <div class="sub-title">{{ fcItem.text }}</div>
                 <div
-                  class="sub-title-item"
-                  v-for="(fcItem, fcIndex) in fcStateArray"
-                  :key="fcIndex"
+                  v-if="fcItem.key === 'sjgl'"
+                  class="sub-count"
+                  :class="fcItem.color"
                 >
-                  <div class="sub-title">{{ fcItem.text }}</div>
-                  <div
-                    v-if="fcItem.key === 'sjgl'"
-                    class="sub-count"
-                    :class="fcItem.color"
-                  >
-                    {{
-                      (
-                        sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
-                          fcItem.key
-                        ] / 1000
-                      ).toFixed(2) || "0"
-                    }}
-                  </div>
-                  <div v-else class="sub-count" :class="fcItem.color">
-                    {{
-                      (sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
+                  {{
+                    (
+                      sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
                         fcItem.key
-                      ] 
-                      ).toFixed(``)|| "0"
-                    }}
-                  </div>
+                      ] / 1000
+                    ).toFixed(2) || "0"
+                  }}
+                </div>
+                <div v-else class="sub-count" :class="fcItem.color">
+                  {{
+                    sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
+                      fcItem.key
+                    ].toFixed(``) || "0"
+                  }}
                 </div>
               </div>
             </div>
-            <div
-              class="panel-title"
-              v-if="sourceMap.fjmap[pIndex][0].wpId.includes('GDC')"
-              :style="
+          </div>
+          <div
+            class="panel-title"
+            v-if="sourceMap.fjmap[pIndex][0].wpId.includes('GDC')"
+            :style="
               $store.state.themeName === 'light'
                 ? 'background-color: #ffffff;border-bottom: 1px solid #B3BDC0;height: 36px;display: flex; border-top-right-radius: 10px; border-top-left-radius: 10px;'
                 : ''
             "
-            >
-              <div class="panel-title-name">
-                <i class="svg-icon svg-icon-sm svg-icon-green">
-                  <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
-                </i>
-                <div>
+          >
+            <div class="panel-title-name">
+              <i class="svg-icon svg-icon-sm svg-icon-green">
+                <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
+              </i>
+              <div>
+                {{
+                  sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name ||
+                  "------"
+                }}
+              </div>
+              <div
+                class="sub-title-item"
+                v-for="(fcItem, fcIndex) in fcStateArray1"
+                :key="fcIndex"
+              >
+                <div class="sub-title">{{ fcItem.text }}</div>
+                <div class="sub-count" :class="fcItem.color">
                   {{
-                    sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name ||
-                    "------"
+                    (
+                      sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
+                        fcItem.key
+                      ] / 1000
+                    ).toFixed(2) || "0"
                   }}
                 </div>
-                <div
-                  class="sub-title-item"
-                  v-for="(fcItem, fcIndex) in fcStateArray1"
-                  :key="fcIndex"
-                >
-                  <div class="sub-title">{{ fcItem.text }}</div>
-                  <div class="sub-count" :class="fcItem.color">
-                    {{
-                      (
-                        sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
-                          fcItem.key
-                        ] / 1000
-                      ).toFixed(2) || "0"
-                    }}
-                  </div>
-                </div>
               </div>
             </div>
-            <div class="panel-body">
-              <div
-                class="card"
-                v-for="(cItem, cIndex) of pItem"
-                :key="cIndex"
-                v-show="cItem.isShow"
-                :class="cItem.active ? `on_${cItem.color}` : cItem.color"
-                :id="cItem.wtId"
-                @click="goDetails(cItem)"
-              >
-              
-                <!-- @dblclick="goDetails(cItem)"
+          </div>
+          <div class="panel-body">
+            <div
+              class="card"
+              v-for="(cItem, cIndex) of pItem"
+              :key="cIndex"
+              v-show="cItem.isShow"
+              :class="cItem.active ? `on_${cItem.color}` : cItem.color"
+              :id="cItem.wtId"
+              @click="goDetails(cItem)"
+            >
+              <!-- @dblclick="goDetails(cItem)"
                   @click="handleChoose(cItem.wtId)" -->
-                {{ cItem.wtId.substring(cItem.wtId.length - 3) }}
-              </div>
-              <!-- </div> -->
-              <!-- 站位用 保证卡片布局最后一行不会有问题 -->
-              <i class="blank" v-for="i in 40" :key="i"></i>
+              {{ cItem.wtId.substring(cItem.wtId.length - 3) }}
             </div>
+            <!-- </div> -->
+            <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+            <i class="blank" v-for="i in 40" :key="i"></i>
           </div>
+        </div>
         <!-- </box-select> -->
       </div>
     </div>
   </el-scrollbar>
   <Dialog v-model="detialDisplay" :wpId="stationId" :wtId="windId"></Dialog>
   <!-- <GFDialog v-model="gfdetialDisplay" :wtId="windId"></GFDialog> -->
-  <Contrast v-model="contrastDisplay" ref="contrast"/>
+  <Contrast v-model="contrastDisplay" ref="contrast" />
 </template>
 
 <script>
@@ -580,7 +581,7 @@ export default {
     },
     handleClick() {
       this.contrastDisplay = true;
-      this.$refs.contrast.handleSearch(this.chooseList)
+      this.$refs.contrast.handleSearch(this.chooseList);
     },
   },
 
@@ -1216,4 +1217,4 @@ export default {
     text-align: center;
   }
 }
-</style>
+</style>

src/views/WindSite/pages/Map2.vue

@@ -1,55 +1,68 @@
 <template>
-    <div>
-        <div class="btn-group-tabs">
-            <BtnGroup2 :gsGroups="gsGroups" :selectValue="gsselectValue" :btnGroups="btnGroups" :rowIndex="rowIndex"
-                :index="selectIndex" @select="select" @selectChange="selectChange" :wpId="wpId"></BtnGroup2>
-        </div>
-        <div class="period">
-            期次：
-            <div class="period-item" :class="{ active: periodIndex == val.id }"
-                v-for="(val, index) in btnGroups[rowIndex]?.btns[selectIndex]?.pjls" :key="index"
-                @click="handleChange(val)">{{ val.name }}</div>
-        </div>
-        <!-- 羊头崖 -->
-         <ytyMap v-if="periodIndex === 'YTY01_GC'" ref="maps"></ytyMap>
-        <!-- 败虎堡三期 -->
-        <bhb3Map v-if="periodIndex === 'BHB301_GC'" ref="maps"></bhb3Map>
-        <!-- 高家堰 -->
-        <gjyMap v-if="periodIndex === 'GJY01_GC'" ref="maps"></gjyMap>
-        <gjyMap2 v-if="periodIndex === 'GJY02_GC'" ref="maps"></gjyMap2>
-        <!-- 红石峁 -->
-        <hsmMap v-if="periodIndex === 'HSM01_GC'" ref="maps"></hsmMap>
-        <!-- 尹灵芝 -->
-        <ylzMap v-if="periodIndex === 'YLZ01_GC'" ref="maps"></ylzMap>
-        <!-- 丁家窑 -->
-        <djyMap v-if="periodIndex === 'DJY01_GC'" ref="maps"></djyMap>
-        <djyMap2 v-if="periodIndex === 'DJY02_GC'" ref="maps"></djyMap2>
-        <!-- 牛家岭 -->
-        <njlMap v-if="periodIndex === 'NJL01_GC'" ref="maps"></njlMap>
-        <njlMap2 v-if="periodIndex === 'NJL02_GC'" ref="maps"></njlMap2>
-        <!-- 盘道梁 -->
-        <pdlMap v-if="periodIndex === 'PDL01_GC'" ref="maps"></pdlMap>
-        <!-- 小五台 -->
-        <xwtMap v-if="periodIndex === 'XWT01_GC'" ref="maps"></xwtMap>
-        <!-- 败虎堡  一期 -->
-        <bhbMap v-if="periodIndex === 'BHB01_GC'" ref="maps"></bhbMap>
-        <!-- 平头镇 -->
-        <ptzMap v-if="periodIndex === 'PTZ01_GC'" ref="maps"></ptzMap>
-        <ptzMap2 v-if="periodIndex === 'PTZ02_GC'" ref="maps"></ptzMap2>
-        <!-- 禹风 败虎堡 -->
-        <bhbMap2 v-if="periodIndex === 'YF01_GC'" ref="maps"></bhbMap2>
-        <yfMap2 v-if="periodIndex === 'YF02_GC'" ref="maps"></yfMap2>
-        <!-- 平鲁大河堡 -->
-        <pldhbMap v-if="periodIndex === 'GJY03_GC'" ref="maps"></pldhbMap>
-        <!-- 朱坑一期 -->
-        <zkyqMap v-if="periodIndex === 'ZK01_GC'" ref="maps"></zkyqMap>
-        <!-- 米梁局 -->
-        <mljMap v-if="periodIndex === 'MLJ01_GC'" ref="maps"></mljMap>
-        <!-- 山阴二期 -->
-        <syMap2 v-if="periodIndex === 'SY02_GC'" ref="maps"></syMap2>
-        <!-- 山阴一期 -->
-        <syMap v-if="periodIndex === 'SY01_GC'" ref="maps"></syMap>
+  <div>
+    <div class="btn-group-tabs">
+      <BtnGroup2
+        :gsGroups="gsGroups"
+        :selectValue="gsselectValue"
+        :btnGroups="btnGroups"
+        :rowIndex="rowIndex"
+        :index="selectIndex"
+        @select="select"
+        @selectChange="selectChange"
+        :wpId="wpId"
+      ></BtnGroup2>
     </div>
+    <div class="period">
+      期次：
+      <div
+        class="period-item"
+        :class="{ active: periodIndex == val.id }"
+        v-for="(val, index) in btnGroups[rowIndex]?.btns[selectIndex]?.pjls"
+        :key="index"
+        @click="handleChange(val)"
+      >
+        {{ val.name }}
+      </div>
+    </div>
+    <!-- 羊头崖 -->
+    <ytyMap v-if="periodIndex === 'YTY01_GC'" ref="maps"></ytyMap>
+    <!-- 败虎堡三期 -->
+    <bhb3Map v-if="periodIndex === 'BHB301_GC'" ref="maps"></bhb3Map>
+    <!-- 高家堰 -->
+    <gjyMap v-if="periodIndex === 'GJY01_GC'" ref="maps"></gjyMap>
+    <gjyMap2 v-if="periodIndex === 'GJY02_GC'" ref="maps"></gjyMap2>
+    <!-- 红石峁 -->
+    <hsmMap v-if="periodIndex === 'HSM01_GC'" ref="maps"></hsmMap>
+    <!-- 尹灵芝 -->
+    <ylzMap v-if="periodIndex === 'YLZ01_GC'" ref="maps"></ylzMap>
+    <!-- 丁家窑 -->
+    <djyMap v-if="periodIndex === 'DJY01_GC'" ref="maps"></djyMap>
+    <djyMap2 v-if="periodIndex === 'DJY02_GC'" ref="maps"></djyMap2>
+    <!-- 牛家岭 -->
+    <njlMap v-if="periodIndex === 'NJL01_GC'" ref="maps"></njlMap>
+    <njlMap2 v-if="periodIndex === 'NJL02_GC'" ref="maps"></njlMap2>
+    <!-- 盘道梁 -->
+    <pdlMap v-if="periodIndex === 'PDL01_GC'" ref="maps"></pdlMap>
+    <!-- 小五台 -->
+    <xwtMap v-if="periodIndex === 'XWT01_GC'" ref="maps"></xwtMap>
+    <!-- 败虎堡  一期 -->
+    <bhbMap v-if="periodIndex === 'BHB01_GC'" ref="maps"></bhbMap>
+    <!-- 平头镇 -->
+    <ptzMap v-if="periodIndex === 'PTZ01_GC'" ref="maps"></ptzMap>
+    <ptzMap2 v-if="periodIndex === 'PTZ02_GC'" ref="maps"></ptzMap2>
+    <!-- 禹风 败虎堡 -->
+    <bhbMap2 v-if="periodIndex === 'YF01_GC'" ref="maps"></bhbMap2>
+    <yfMap2 v-if="periodIndex === 'YF02_GC'" ref="maps"></yfMap2>
+    <!-- 平鲁大河堡 -->
+    <pldhbMap v-if="periodIndex === 'GJY03_GC'" ref="maps"></pldhbMap>
+    <!-- 朱坑一期 -->
+    <zkyqMap v-if="periodIndex === 'ZK01_GC'" ref="maps"></zkyqMap>
+    <!-- 米梁局 -->
+    <mljMap v-if="periodIndex === 'MLJ01_GC'" ref="maps"></mljMap>
+
+    <syMap2 v-if="periodIndex === 'SY02_GC'" ref="maps"></syMap2>
+    <syMap v-if="periodIndex === 'SY01_GC'" ref="maps"></syMap>
+  </div>
 </template>
 <script>
 import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
@@ -78,176 +91,181 @@ import syMap2 from "./components/sy2-map.vue";
 import syMap from "./components/sy-map.vue";
 
 export default {
-    components: {
-        mljMap,
-        zkyqMap,
-        pldhbMap,
-        BtnGroup2,
-        gjyMap,
-        gjyMap2,
-        hsmMap,
-        ylzMap,
-        ytyMap,
-        bhb3Map,
-        djyMap,
-        djyMap2,
-        njlMap,
-        njlMap2,
-        pdlMap,
-        ptzMap,
-        ptzMap2,
-        xwtMap,
-        yfMap2,
-        bhbMap,
-        bhbMap2,
-        syMap2,
-        syMap
-    },
-    data() {
-        return {
-            // 定时器
-            timer: "",
-            gsGroups: [],
-            gsselectValue: '',
-            selectIndex: 0,
-            rowIndex: 0,
-            periodIndex: '',
-            windturbineList: [],
-            btnGroups: [
-                {
-                    icon: "svg-wind-site",
-                    btns: [],
-                },
-                {
-                    icon: "svg-photovoltaic",
-                    btns: [],
-                },
-            ],
+  components: {
+    mljMap,
+    zkyqMap,
+    pldhbMap,
+    BtnGroup2,
+    gjyMap,
+    gjyMap2,
+    hsmMap,
+    ylzMap,
+    ytyMap,
+    bhb3Map,
+    djyMap,
+    djyMap2,
+    njlMap,
+    njlMap2,
+    pdlMap,
+    ptzMap,
+    ptzMap2,
+    xwtMap,
+    yfMap2,
+    bhbMap,
+    bhbMap2,
+    syMap2,
+    syMap,
+  },
+  data() {
+    return {
+      // 定时器
+      timer: "",
+      gsGroups: [],
+      gsselectValue: "",
+      selectIndex: 0,
+      rowIndex: 0,
+      periodIndex: "",
+      windturbineList: [],
+      btnGroups: [
+        {
+          icon: "svg-wind-site",
+          btns: [],
+        },
+        {
+          icon: "svg-photovoltaic",
+          btns: [],
+        },
+      ],
+    };
+  },
+  created() {
+    this.wpId = this.$route.params.wpId;
+    this.$nextTick(() => {
+      this.getGS();
+      this.timer = setInterval(() => {
+        this.getWinds();
+      }, 3000);
+    });
+  },
+  methods: {
+    getGS() {
+      api.companysAjax().then((res) => {
+        if (res.data) {
+          this.gsselectValue = res.data[0].id;
+          this.gsGroups = res.data;
+          this.getWp();
         }
+      });
     },
-    created() {
-        this.wpId = this.$route.params.wpId;
-        this.$nextTick(() => {
-            this.getGS();
-            this.timer = setInterval(() => {
-                this.getWinds()
-            }, 3000);
-        });
+    selectChange(val) {
+      this.gsselectValue = val;
+      this.getWp();
     },
-    methods: {
-        getGS() {
-            api.companysAjax().then(res => {
-                if (res.data) {
-                    this.gsselectValue = res.data[0].id
-                    this.gsGroups = res.data
-                    this.getWp()
-                }
-            })
-        },
-        selectChange(val) {
-            this.gsselectValue = val
-            this.getWp()
-        },
-        getWp() {
-            api.windfarmByCmAjax({
-                cmId: this.gsselectValue
-            }).then((res) => {
-                let btnGroups = [
-                    {
-                        icon: "svg-wind-site",
-                        btns: [],
-                    },
-                    {
-                        icon: "svg-photovoltaic",
-                        btns: [],
-                    },
-                ];
+    getWp() {
+      api
+        .windfarmByCmAjax({
+          cmId: this.gsselectValue,
+        })
+        .then((res) => {
+          let btnGroups = [
+            {
+              icon: "svg-wind-site",
+              btns: [],
+            },
+            {
+              icon: "svg-photovoltaic",
+              btns: [],
+            },
+          ];
 
-                res.data.forEach((ele, index) => {
-                    if (ele.id.indexOf("FDC") !== -1) {
-                        btnGroups[0].btns.push({
-                            text: ele.name,
-                            code: ele.id,
-                            pjls: ele.pjls
-                        });
-                    } else {
-                        btnGroups[1].btns.push({
-                            text: ele.name,
-                            code: ele.id,
-                            pjls: ele.pjls
-                        });
-                    }
-                });
-                this.btnGroups = btnGroups;
-                this.renderBtnActiveIndex();
-            });
-        },
-        getWinds() {
-            api.windturbineByPjIdAjax({
-                pjId: this.periodIndex
-            }).then(res => {
-                if (res.data.length > 0 && this.$refs.maps) {
-                    this.$refs.maps.dayaDeal(res.data)
-                }
-            })
-        },
-        renderBtnActiveIndex() {
-            this.btnGroups.forEach((pEle, pIndex) => {
-                pEle.btns.forEach((cEle, cIndex) => {
-                    if (cEle.code === this.wpId) {
-                        this.rowIndex = pIndex;
-                        this.selectIndex = cIndex;
-                    }
-                });
-            });
-            this.periodIndex = this.btnGroups[this.rowIndex]?.btns[this.selectIndex]?.pjls[0].id
-            this.getWinds()
-        },
-        handleChange(val) {
-            this.periodIndex = val.id
-            this.getWinds()
-        },
-        select(res) {
-            this.$router.replace({
-                path: `/monitor/windsite/map2/${res.code}`,
-            });
-        },
+          res.data.forEach((ele, index) => {
+            if (ele.id.indexOf("FDC") !== -1) {
+              btnGroups[0].btns.push({
+                text: ele.name,
+                code: ele.id,
+                pjls: ele.pjls,
+              });
+            } else {
+              btnGroups[1].btns.push({
+                text: ele.name,
+                code: ele.id,
+                pjls: ele.pjls,
+              });
+            }
+          });
+          this.btnGroups = btnGroups;
+          this.renderBtnActiveIndex();
+        });
     },
-    unmounted() {
-        clearInterval(this.timer);
-        this.timer = null;
+    getWinds() {
+      api
+        .windturbineByPjIdAjax({
+          pjId: this.periodIndex,
+        })
+        .then((res) => {
+          if (res.data.length > 0 && this.$refs.maps) {
+            this.$refs.maps.dayaDeal(res.data);
+          }
+        });
     },
-    watch: {
-        $route(res) {
-            this.wpId = res.params.wpId;
-            if (res.params.wpId) {
-                this.getWp();
-            }
-            this.renderBtnActiveIndex();
-        },
+    renderBtnActiveIndex() {
+      this.btnGroups.forEach((pEle, pIndex) => {
+        pEle.btns.forEach((cEle, cIndex) => {
+          if (cEle.code === this.wpId) {
+            this.rowIndex = pIndex;
+            this.selectIndex = cIndex;
+          }
+        });
+      });
+      this.periodIndex =
+        this.btnGroups[this.rowIndex]?.btns[this.selectIndex]?.pjls[0].id;
+      this.getWinds();
     },
-}
+    handleChange(val) {
+      this.periodIndex = val.id;
+      this.getWinds();
+    },
+    select(res) {
+      this.$router.replace({
+        path: `/monitor/windsite/map2/${res.code}`,
+      });
+    },
+  },
+  unmounted() {
+    clearInterval(this.timer);
+    this.timer = null;
+  },
+  watch: {
+    $route(res) {
+      this.wpId = res.params.wpId;
+      if (res.params.wpId) {
+        this.getWp();
+      }
+      this.renderBtnActiveIndex();
+    },
+  },
+};
 </script>
 <style lang="less" scoped>
 .period {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 
-    .period-item {
-        line-height: 23px;
-        font-size: 12px;
-        text-align: center;
-        margin-right: 4px;
-        border: 1px solid #606769;
-        border-radius: 2px;
-        padding: 0px 5px;
-        margin-bottom: 10px;
+  .period-item {
+    line-height: 23px;
+    font-size: 12px;
+    text-align: center;
+    margin-right: 4px;
+    border: 1px solid #606769;
+    border-radius: 2px;
+    padding: 0px 5px;
+    margin-bottom: 10px;
 
-        &.active {
-            color: #ffffff;
-            background-color: rgba(75, 85, 174, 0.6);
-            border-color: rgba(75, 85, 174, 0.6);
-        }
+    &.active {
+      color: #ffffff;
+      background-color: rgba(75, 85, 174, 0.6);
+      border-color: rgba(75, 85, 174, 0.6);
     }
+  }
 }
-</style>
+</style>

src/views/layout/Menu.vue

@@ -386,7 +386,7 @@ export default {
             //       icon: "svg-matrix",
             //       path: "/decision/statisticAnalysis/daily",
             //     },
-             
+
             //   ],
             // },
             // {
@@ -976,7 +976,7 @@ export default {
                 //   icon: "svg-matrix",
                 //   path: "/others/zkrbb",
                 // },
-                
+
                 // {
                 //   text: "光伏场站自定义",
                 //   icon: "svg-matrix",
@@ -1233,12 +1233,12 @@ export default {
   },
 };
 </script>
- 
+
 <style lang="less">
 .menu {
   padding-top: 1.481vh;
   z-index: 3001;
- 
+
   .menu-list {
     margin: 0;
     padding: 0;
@@ -1320,7 +1320,7 @@ export default {
           }
         }
       }
-        
+
       .sub-menu-text {
         margin-left: 1.1111vh;
         color: @gray-l;
@@ -1337,5 +1337,4 @@ export default {
     color: rgba(255, 255, 255, 50%);
   }
 }
-
-</style>
+</style>

vue.config.js

@@ -1,91 +1,99 @@
-const path = require('path');
+const path = require("path");
 const resolve = (dir) => path.join(__dirname, dir);
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const webpack = require('webpack');
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const webpack = require("webpack");
 
-const cesiumSource = './node_modules/cesium/Source'
-const cesiumWorkers = '../Source/Workers'
+const cesiumSource = "./node_modules/cesium/Source";
+const cesiumWorkers = "../Source/Workers";
 
 function extendDefaultPlugins(arr) {
   let plug = [
-    'removeDoctype',
-    'removeXMLProcInst',
-    'removeComments',
-    'removeMetadata',
-    'removeEditorsNSData',
-    'cleanupAttrs',
-    'mergeStyles',
-    'inlineStyles',
-    'minifyStyles',
-    'cleanupIDs',
-    'removeUselessDefs',
-    'cleanupNumericValues',
-    'convertColors',
-    'removeUnknownsAndDefaults',
-    'removeNonInheritableGroupAttrs',
-    'removeUselessStrokeAndFill',
-    'removeViewBox',
-    'cleanupEnableBackground',
-    'removeHiddenElems',
-    'removeEmptyText',
-    'convertShapeToPath',
-    'convertEllipseToCircle',
-    'moveElemsAttrsToGroup',
-    'moveGroupAttrsToElems',
-    'collapseGroups',
-    'convertPathData',
-    'convertTransform',
-    'removeEmptyAttrs',
-    'removeEmptyContainers',
-    'mergePaths',
-    'removeUnusedNS',
-    'sortDefsChildren',
-    'removeTitle',
-    'removeDesc'
+    "removeDoctype",
+    "removeXMLProcInst",
+    "removeComments",
+    "removeMetadata",
+    "removeEditorsNSData",
+    "cleanupAttrs",
+    "mergeStyles",
+    "inlineStyles",
+    "minifyStyles",
+    "cleanupIDs",
+    "removeUselessDefs",
+    "cleanupNumericValues",
+    "convertColors",
+    "removeUnknownsAndDefaults",
+    "removeNonInheritableGroupAttrs",
+    "removeUselessStrokeAndFill",
+    "removeViewBox",
+    "cleanupEnableBackground",
+    "removeHiddenElems",
+    "removeEmptyText",
+    "convertShapeToPath",
+    "convertEllipseToCircle",
+    "moveElemsAttrsToGroup",
+    "moveGroupAttrsToElems",
+    "collapseGroups",
+    "convertPathData",
+    "convertTransform",
+    "removeEmptyAttrs",
+    "removeEmptyContainers",
+    "mergePaths",
+    "removeUnusedNS",
+    "sortDefsChildren",
+    "removeTitle",
+    "removeDesc",
   ];
   return plug.concat(arr);
 }
 
 // 添加less继承
 function addStyleResource(rule) {
-  rule.use('style-resource')
-    .loader('style-resources-loader')
+  rule
+    .use("style-resource")
+    .loader("style-resources-loader")
     .options({
-      patterns: [
-        resolve('src/assets/styles/common/common.less')
-      ]
-    })
+      patterns: [resolve("src/assets/styles/common/common.less")],
+    });
 }
 
-
 module.exports = {
-
   publicPath: "./", // 默认'/'，部署应用包时的基本 URL
-  indexPath: 'index.html', // 相对于打包路径index.html的路径
-  outputDir: 'dist', // 'dist', 生产环境构建文件的目录
-  assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
+  indexPath: "index.html", // 相对于打包路径index.html的路径
+  outputDir: "dist", // 'dist', 生产环境构建文件的目录
+  assetsDir: "static", // 相对于outputDir的静态资源(js、css、img、fonts)目录
   lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 li
   runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
 
   configureWebpack: {
     plugins: [
-      new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
-      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
-      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
-      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
+      new CopyWebpackPlugin([
+        { from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
+      ]),
+      new CopyWebpackPlugin([
+        { from: path.join(cesiumSource, "Assets"), to: "Assets" },
+      ]),
+      new CopyWebpackPlugin([
+        { from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
+      ]),
+      new CopyWebpackPlugin([
+        {
+          from: path.join(cesiumSource, "ThirdParty/Workers"),
+          to: "ThirdParty/Workers",
+        },
+      ]),
       new webpack.DefinePlugin({
-        CESIUM_BASE_URL: JSON.stringify('./')
+        CESIUM_BASE_URL: JSON.stringify("./"),
       }),
     ],
   },
 
   chainWebpack: (config) => {
     config.resolve.symlinks(true); // 修复热更新失效
-    config.plugin('html')
-      .tap(args => {
-        args[0].title = "智能综合分析系统";
-        return args;
-      })
+    config.plugin("html").tap((args) => {
+      args[0].title = "智能综合分析系统";
+
+      return args;
+    });
     // 路径别名
     config.resolve.alias
       .set("@", resolve("src"))
@@ -99,31 +107,35 @@ module.exports = {
       .set("cesium", resolve("node_modules/cesium/Source"));
 
     // less 继承
-    const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
-    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)));
+    const types = ["vue-modules", "vue", "normal-modules", "normal"];
+    types.forEach((type) =>
+      addStyleResource(config.module.rule("less").oneOf(type))
+    );
 
-    const metaLoaderRule = config.module.rule('meta-loader');
-    metaLoaderRule.test(/\.js$/)
-      .use('@open-wc/webpack-import-meta-loader')
-      .loader('@open-wc/webpack-import-meta-loader');
+    const metaLoaderRule = config.module.rule("meta-loader");
+    metaLoaderRule
+      .test(/\.js$/)
+      .use("@open-wc/webpack-import-meta-loader")
+      .loader("@open-wc/webpack-import-meta-loader");
 
     // svg 雪碧图
     config.module // 排除其他svg-loader
-      .rule('svg')
-      .exclude.add(resolve('src/assets/icon/svg'))
+      .rule("svg")
+      .exclude.add(resolve("src/assets/icon/svg"))
       .end()
-      .exclude.add(resolve('src/assets/icon/svg_fill'))
+      .exclude.add(resolve("src/assets/icon/svg_fill"))
       .end();
 
     // svg雪碧图
-    const svgRule = config.module.rule('icons');
-    svgRule.test(/\.svg$/)
-      .include.add(resolve('src/assets/icon/svg'))
+    const svgRule = config.module.rule("icons");
+    svgRule
+      .test(/\.svg$/)
+      .include.add(resolve("src/assets/icon/svg"))
       .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
+      .use("svg-sprite-loader")
+      .loader("svg-sprite-loader")
       .options({
-        symbolId: 'svg-[name]',
+        symbolId: "svg-[name]",
         // extract: true,
         // publicPath: "img/",
         // spriteFilename: "svg-sprite-[hash:8].svg",
@@ -131,19 +143,24 @@ module.exports = {
 
     // config
     //     .plugin("svgsprite")
-    //     .use(SVGSpriteLoaderPlugin, [{ 
+    //     .use(SVGSpriteLoaderPlugin, [{
     //       plainSprite: true
     //     }]);
 
     // svgo 去除svg中无用元素
-    svgRule.use('svgo-loader').loader('svgo-loader').options({
-      plugins: extendDefaultPlugins([{
-        name: "removeAttrs",
-        params: {
-          attrs: 'fill',
-        }
-      }])
-    });
+    svgRule
+      .use("svgo-loader")
+      .loader("svgo-loader")
+      .options({
+        plugins: extendDefaultPlugins([
+          {
+            name: "removeAttrs",
+            params: {
+              attrs: "fill",
+            },
+          },
+        ]),
+      });
 
     // svg雪碧图 不去除fill属性
     // const svgRuleFill = config.module.rule('icons_fill');
@@ -161,7 +178,7 @@ module.exports = {
 
     // // config
     // //     .plugin("svgsprite")
-    // //     .use(SVGSpriteLoaderPlugin, [{ 
+    // //     .use(SVGSpriteLoaderPlugin, [{
     // //       plainSprite: true
     // //     }]);
 
@@ -169,24 +186,24 @@ module.exports = {
     // svgRuleFill.use('svgo-loader').loader('svgo-loader').options({
     //     plugins: extendDefaultPlugins([])
     // });
-
   },
 
   devServer: {
     //代理配置
     proxy: {
-      '/cbk': {
-        target: 'https://h5.caibeike.com.cn/', // 请求地址
+      "/cbk": {
+        target: "https://h5.caibeike.com.cn/", // 请求地址
 
         changeOrigin: true, // 在vue-cli3中，默认changeOrigin的值是true,意味着服务器host设置成target，这与vue-cli2不一致，vue-cli2这个默认值是false
         // changeOrigin的值是true,target是host, request URL是http://baidu.com
         // 如果设置changeOrigin: false，host就是浏览器发送过来的host，也就是localhost:8082。
 
-        pathRewrite: {  // 路径重写，eg:把api接口替换为''
-          '^/cbk': ''
-        }
-      }
+        pathRewrite: {
+          // 路径重写，eg:把api接口替换为''
+          "^/cbk": "",
+        },
+      },
     },
     open: false, // 是否打开浏览器
-  }
-}
+  },
+};