风场-矩阵，绩效榜-图表tooltip

src/assets/styles/button.less

@@ -43,7 +43,7 @@
     position: relative;
     font-size: 12px;
     &.green1 {
-      background: fade(@green, 80);
+      background: fade(@green, 90);
       color: fade(@white, 90);
     }
 

src/assets/styles/el-override/el-input.less

@@ -170,7 +170,9 @@ body {
       border-color: @gray;
     }
 
-    &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+    &.el-tree--highlight-current
+      .el-tree-node.is-current
+      > .el-tree-node__content {
       background: transparent;
       color: @green;
     }
@@ -213,7 +215,6 @@ body {
     .el-input__suffix {
       right: 0px;
     }
-
   }
 
   .el-select {
@@ -224,7 +225,13 @@ body {
       border-color: @green;
     }
   }
-
+  .el-select .el-select__tags .el-tag {
+    background: #000;
+  }
+  .el-select .el-select__tags .el-tag .el-icon-close {
+    background-color: transparent;
+    border: 1px solid #fff;
+  }
   .el-popper {
     &.el-cascader__dropdown[role="tooltip"] {
       background: @picker-bg-color;
@@ -380,7 +387,7 @@ body {
   .el-time-panel__btn.confirm {
     color: @green;
   }
-  
+
   .el-time-panel__btn.cancel {
     color: @gray;
   }

src/assets/styles/el-override/el-table.less

@@ -22,8 +22,10 @@
     td {
       border: 0px;
       padding: 0;
-      height: 27px;
-      line-height: 27px;
+    //   height: 27px;
+    //   line-height: 27px;
+      height: 37px;
+      line-height: 37px;
       font-size: 12px;
       color: @gray-l;
 
@@ -36,8 +38,10 @@
     th {
       border: 0px;
       padding: 0px;
-      height: 30px;
-      line-height: 30px;
+    //   height: 30px;
+    //   line-height: 30px;
+      height: 37px;
+      line-height: 37px;
       font-weight: normal;
       text-align: center;
       color: @gray-l;

src/assets/styles/theme/light/jjyx.css

@@ -9,7 +9,7 @@
   color: #159AFA;
 }
 #appBody.light .el-table__header-wrapper {
-  height: 50px;
+  height: 37px;
 }
 #appBody.light .left {
   padding-top: 20px;
@@ -19,7 +19,7 @@
   height: 30px;
 }
 #appBody.light .has-gutter .is-center {
-  height: 50px;
+  height: 37px;
 }
 #appBody.light .performance {
   background: #ffffff;

src/assets/styles/theme/light/jjyx.less

@@ -1,239 +1,256 @@
 // 对标管理
 @import "./setting.less";
 #appBody.light {
-	// 风机绩效榜
+  // 风机绩效榜
+  .com-table {
+    thead tr th {
+      color: @black;
+    }
+
+    .el-scrollbar tr td {
+      color: @black;
+    }
+
+    .el-scrollbar tr td.light span,
+    .el-scrollbar tr td.light div {
+      color: @blue;
+    }
+  }
+  .el-table__header-wrapper {
+    height: 37px;
+  }
+  .left {
+    padding-top: 20px;
+  }
+  .has-gutter {
+    background: @white;
+    height: 30px;
+    .is-center {
+      height: 37px;
+    }
+  }
+  .performance {
+    background: @white;
+  }
+
+  .btn.green,
+  .btn:hover {
+    color: @deepblue;
+    border-color: @deepblue;
+    background: rgba(@deepblueBg, 0.2);
+  }
+
+  .el-select__popper.select,
+  .el-picker__popper {
+    background: @white;
+    border-color: @white;
+    .el-popper__arrow::before {
+      border: 1px solid @white !important;
+      background: @white !important;
+    }
+    .el-select-dropdown__item.selected,
+    .el-select-dropdown__item:hover {
+      color: @deepblue;
+      background: fade(@deepblue, 20);
+      border: 1px solid @deepblue;
+    }
+    .el-select-dropdown__item {
+      color: @black;
+    }
+  }
+
+  .el-picker__popper.el-popper[role="tooltip"] {
+    background: @white !important;
+    border-color: @white !important;
+    .el-date-table {
+      th {
+        color: @black;
+      }
+      td.current:not(.disabled) span {
+        color: @white;
+        background: @blue;
+      }
+      td.today span,
+      span:hover {
+        color: @blue;
+      }
+      td.prev-month,
+      td.next-month {
+        background: fade(@black, 20);
+      }
+      span {
+        color: @black;
+      }
+    }
+    .el-year-table {
+      td {
+        color: @black;
+      }
+      td.today .cell,
+      td:hover {
+        color: @blue;
+      }
+    }
+  }
+  .el-input {
+    .el-input__inner {
+      background: @white;
+      color: @black;
+    }
+  }
+  .query-item .lable {
+    color: @black;
+  }
+
+  // 风机绩效榜-明细
+  .main-body {
+    input[type="checkbox"]:checked {
+      background: @blue;
+      border-color: @blue;
+    }
+    input[type="checkbox"] {
+      background: @white;
+      border-color: @gray-l;
+    }
+  }
+
+  .decision-page-2,
+  .decision-page-3,
+  .decision-page-4 {
+    .com-panel {
+      border-radius: 0;
+      padding: 0;
+    }
+  }
+  .action {
+    color: @blue;
+  }
+
+  //线路对标
+  .el-select {
+    .el-select__tags .el-tag {
+      background-color: fade(@deepblue, 20);
+      color: @deepblue;
+
+      .el-icon-close {
+        background-color: fade(@deepblue, 50);
+      }
+    }
+  }
+
+  //单机横向对比
+  .direction-info {
     .com-table {
-		thead tr th{
-			color: @black;
-		}
-		
-		.el-scrollbar tr td {
-			color: @black;
-		}
-		
-		.el-scrollbar tr td.light span, .el-scrollbar tr td.light div{
-			color: @blue;
-		}
-	}
-	.el-table__header-wrapper{
-		height: 50px;
-	}
-	.left{
-		padding-top: 20px;
-	}
-	.has-gutter{
-		background: @white;
-		height: 30px;
-		.is-center{
-			height: 50px;
-		}
-	}
-	.performance{
-	 	background:@white
-	} 
-	
-	.btn.green,.btn:hover{
-		color: @deepblue;
-		border-color: @deepblue;
-		background: rgba(@deepblueBg, 0.2);
-	}
-	
-	.el-select__popper.select,.el-picker__popper{
-		background: @white;
-        border-color: @white;
-		.el-popper__arrow::before{
-			border: 1px solid @white !important;
-			background: @white !important;
-		}
-		.el-select-dropdown__item.selected,.el-select-dropdown__item:hover {
-		    color: @deepblue;
-			background:fade(@deepblue, 20);
-			border: 1px solid @deepblue;
-		}
-		.el-select-dropdown__item{
-			color:@black;
-		}
-	}
-	
-	.el-picker__popper.el-popper[role="tooltip"] {
-		background: @white !important;
-		border-color: @white !important;
-		.el-date-table{
-			th{
-				color:@black ;
-			}
-			td.current:not(.disabled) span{
-				color: @white;
-				background:@blue;
-			}
-			td.today span,span:hover {
-			    color: @blue;
-			}
-			td.prev-month,td.next-month{
-				background: fade(@black,20);
-			}
-			span{
-				color:@black;
-			}
-		}
-		.el-year-table{
-			td{
-				color: @black;
-			}
-			td.today .cell,td:hover{
-				color: @blue;
-			}
-		}
-	}
-	.el-input{
-		.el-input__inner{
-			background: @white;
-			color: @black;
-		}
-	}
-	.query-item .lable{
-		color:@black;
-	}
-	
-	// 风机绩效榜-明细
-	.main-body{
-		input[type="checkbox"]:checked{
-			background:@blue;
-			border-color: @blue;
-		}
-		input[type="checkbox"]{
-			background: @white;
-			border-color: @gray-l;
-		}
-	} 
-	
-	.decision-page-2,.decision-page-3,.decision-page-4{
-		.com-panel{
-			border-radius:0;
-			padding:0;
-		}
-	}
-	.action{
-		color: @blue;
-	}
-	
-	//线路对标
-	.el-select {
-	  .el-select__tags .el-tag {
-	    background-color: fade(@deepblue, 20);
-	    color: @deepblue;
-	
-	    .el-icon-close {
-	      background-color: fade(@deepblue, 50);
-	    }
-	  }
-	}
-	
-	//单机横向对比
-	.direction-info {
-	  .com-table {
-	    th,
-	    td {
-	      color: @black;
-	    }
-	  }
-	}
-	
-	// 状态转换率
-	.newspan {
-	  color: @black;
-	}
-	.newspan:hover {
-	  background: linear-gradient(to top,rgba(54,52,142, 0.5),rgba(54,52,142, 0));
-	  color: @deepblue;
-	}
-	.newspan:hover::after {
-	  border: 0.093vh solid @deepblue;
-	}
-	.active {
-	  background: linear-gradient(to top,rgba(54,52,142, 0.5),rgba(54,52,142, 0));
-	  color: @deepblue;
-	}
-	.active::after {
-	  border: 0.093vh solid @deepblue;
-	}
-	
-	.el-month-table td .cell:hover,
-	.el-date-picker__header-label.active,
-	.el-date-picker__header-label:hover{
-		color:@blue;
-	}
-	
-	// 综合分析
-	.ztfx {
-	  .table-complex {
-	    .table {
-	      tbody {
-	        tr:nth-child(2n) td {
-	          background-color: fade(@black, 20%);
-	          &.item {
-	            background-color: transparent;
-	          }
-	        }
-	      }
-	
-	      th {
-	        background: fade(@black, 40);
-	        color: @white;
-	      }
-	      td {
-	        color: @black;
-	      }
-	    }
-	  }
-	  .table-panel {
-	    .table {
-	      tbody {
-	        tr:nth-child(2n) td {
-	          background-color: fade(@black, 20%);
-	        }
-	      }
-	      th {
-	        background: fade(@black, 40);
-	        color: @white;
-	      }
-	      td {
-	        color: @black;
-	      }
-	    }
-	  }
-	}
-	
+      th,
+      td {
+        color: @black;
+      }
+    }
+  }
+
+  // 状态转换率
+  .newspan {
+    color: @black;
+  }
+  .newspan:hover {
+    background: linear-gradient(
+      to top,
+      rgba(54, 52, 142, 0.5),
+      rgba(54, 52, 142, 0)
+    );
+    color: @deepblue;
+  }
+  .newspan:hover::after {
+    border: 0.093vh solid @deepblue;
+  }
+  .active {
+    background: linear-gradient(
+      to top,
+      rgba(54, 52, 142, 0.5),
+      rgba(54, 52, 142, 0)
+    );
+    color: @deepblue;
+  }
+  .active::after {
+    border: 0.093vh solid @deepblue;
+  }
+
+  .el-month-table td .cell:hover,
+  .el-date-picker__header-label.active,
+  .el-date-picker__header-label:hover {
+    color: @blue;
+  }
+
+  // 综合分析
+  .ztfx {
+    .table-complex {
+      .table {
+        tbody {
+          tr:nth-child(2n) td {
+            background-color: fade(@black, 20%);
+            &.item {
+              background-color: transparent;
+            }
+          }
+        }
+
+        th {
+          background: fade(@black, 40);
+          color: @white;
+        }
+        td {
+          color: @black;
+        }
+      }
+    }
+    .table-panel {
+      .table {
+        tbody {
+          tr:nth-child(2n) td {
+            background-color: fade(@black, 20%);
+          }
+        }
+        th {
+          background: fade(@black, 40);
+          color: @white;
+        }
+        td {
+          color: @black;
+        }
+      }
+    }
+  }
+
   .action-bar {
-	.selections {
-	  .item {
-		color: @black;
-		&:hover,
-		&.active {
-		  background: fade(@deepblue, 20);
-		  border: 1px solid @deepblue;
-		  color: @deepblue;
-		}
-	  }
-	}
+    .selections {
+      .item {
+        color: @black;
+        &:hover,
+        &.active {
+          background: fade(@deepblue, 20);
+          border: 1px solid @deepblue;
+          color: @deepblue;
+        }
+      }
+    }
   }
 
   // 风场信息
   .fc-info {
-	.fc-item {
-	  & > .title {
-		color: @black;
-	  }
-	  .tags {
-		.tag {
-		  .tag-title {
-			color: @black;
-		  }
-		  .tag-value {
-			color: @deepblue;
-		  }
-		}
-	  }
-	}
-  }
-}
+    .fc-item {
+      & > .title {
+        color: @black;
+      }
+      .tags {
+        .tag {
+          .tag-title {
+            color: @black;
+          }
+          .tag-value {
+            color: @deepblue;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -119,8 +119,8 @@ export default {
         grid: {
           left: 40,
           right: 16,
-          bottom: 35,
-          top: 30,
+          bottom: 16,
+          top: 35,
           containLabel: true,
         },
         legend: {
@@ -305,7 +305,7 @@ export default {
           type: "line",
           data: this.lineData,
           smooth: false, //平滑展示
-          xAxisIndex: 1,
+          xAxisIndex: 0,
           lineStyle: {
             color:
               this.$store.state.themeName === "dark"
@@ -336,6 +336,7 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
+      //   console.log(this.height);
       this.initChart();
     });
   },
@@ -360,7 +361,24 @@ export default {
       }
     },
     "$store.state.themeName"() {
-      this.initChart();
+      this.$nextTick(() => {
+        this.$el.style.width = this.width;
+        this.$el.style.height = this.height;
+        this.areaData = this.bardata.area;
+        this.initChart();
+      });
+    },
+    height: {
+      handler(val) {
+        console.log(val);
+        this.$nextTick(() => {
+          this.$el.style.width = this.width;
+          this.$el.style.height = this.height;
+          this.areaData = this.bardata.area;
+          this.initChart();
+        });
+      },
+      immediate: true,
     },
   },
 };

src/components/coms/btn/btn-group-double.vue

@@ -3,34 +3,90 @@
     <div class="select">
       <div class="lable">公司：</div>
       <div class="search-input">
-        <el-select v-model="selectValue" @change="handleChange(selectValue)" placeholder="请选择" popper-class="select">
-          <el-option v-for="item in gsGroups" :key="item.id" :value="item.id" :label="item.name">
+        <el-select
+          v-model="selectVal"
+          @change="handleChange(selectValue)"
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in gsGroups"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          >
           </el-option>
         </el-select>
       </div>
       <div class="model-switch" v-if="showFlag">
-        <div class="model-item" :class="{ active: !switchFlag }" @click="handleClick('风场')">风场</div>
-        <div class="model-item" :class="{ active: switchFlag }" @click="handleClick('光伏')">光伏</div>
+        <div
+          class="model-item"
+          :class="{ active: !switchFlag }"
+          @click="handleClick('风场')"
+        >
+          风场
+        </div>
+        <div
+          class="model-item"
+          :class="{ active: switchFlag }"
+          @click="handleClick('光伏')"
+        >
+          光伏
+        </div>
       </div>
-      <div class="btn-group-with-icon-list" v-if="!switchFlag && btnGroups[0].icon">
-        <i v-if="btnGroups[0].icon != '' && btnGroups[0].icon.indexOf('fa fa') >= 0" :class="btnGroups[0].icon"></i>
-        <span v-if="btnGroups[0].icon != '' && btnGroups[0].icon.indexOf('svg-') >= 0"
-          class="svg-icon svg-icon-gray svg-icon-md">
+      <div
+        class="btn-group-with-icon-list"
+        v-if="!switchFlag && btnGroups[0].icon"
+      >
+        <i
+          v-if="
+            btnGroups[0].icon != '' && btnGroups[0].icon.indexOf('fa fa') >= 0
+          "
+          :class="btnGroups[0].icon"
+        ></i>
+        <span
+          v-if="
+            btnGroups[0].icon != '' && btnGroups[0].icon.indexOf('svg-') >= 0
+          "
+          class="svg-icon svg-icon-gray svg-icon-md"
+        >
           <SvgIcon :svgid="btnGroups[0].icon"></SvgIcon>
         </span>
-        <a href="javascript:;" v-for="(btn, index) of btnGroups[0].btns" :key="btn" @click="click(0, index)"
-          :class="{ active: activeIndex == index && activeRow == 0 }">
+        <a
+          href="javascript:;"
+          v-for="(btn, index) of btnGroups[0].btns"
+          :key="btn"
+          @click="click(0, index)"
+          :class="{ active: activeIndex == index && activeRow == 0 }"
+        >
           {{ btn.text }}
         </a>
       </div>
-      <div class="btn-group-with-icon-list" v-if="switchFlag && btnGroups[1].icon">
-        <i v-if="btnGroups[1].icon != '' && btnGroups[1].icon.indexOf('fa fa') >= 0" :class="btnGroups[1].icon"></i>
-        <span v-if="btnGroups[1].icon != '' && btnGroups[1].icon.indexOf('svg-') >= 0"
-          class="svg-icon svg-icon-gray svg-icon-md">
+      <div
+        class="btn-group-with-icon-list"
+        v-if="switchFlag && btnGroups[1].icon"
+      >
+        <i
+          v-if="
+            btnGroups[1].icon != '' && btnGroups[1].icon.indexOf('fa fa') >= 0
+          "
+          :class="btnGroups[1].icon"
+        ></i>
+        <span
+          v-if="
+            btnGroups[1].icon != '' && btnGroups[1].icon.indexOf('svg-') >= 0
+          "
+          class="svg-icon svg-icon-gray svg-icon-md"
+        >
           <SvgIcon :svgid="btnGroups[1].icon"></SvgIcon>
         </span>
-        <a href="javascript:;" v-for="(btn, index) of btnGroups[1].btns" :key="btn" @click="click(1, index)"
-          :class="{ active: activeIndex == index && activeRow == 1 }">
+        <a
+          href="javascript:;"
+          v-for="(btn, index) of btnGroups[1].btns"
+          :key="btn"
+          @click="click(1, index)"
+          :class="{ active: activeIndex == index && activeRow == 1 }"
+        >
           {{ btn.text }}
         </a>
       </div>
@@ -54,7 +110,7 @@ export default {
     gsGroups: Array,
     wpId: {
       type: String,
-      default: '',
+      default: "",
     },
     // 默认选择第几组
     rowIndex: {
@@ -85,6 +141,7 @@ export default {
       activeRow: 0,
       activeIndex: 0,
       switchFlag: false,
+      selectVal: "",
     };
   },
   // 函数
@@ -95,11 +152,11 @@ export default {
       this.$emit("select", this.btnGroups[i].btns[index]);
     },
     handleChange(val) {
-      this.$emit('selectChange', val);
+      this.$emit("selectChange", val);
     },
     handleClick(data) {
-      this.$emit('GfFdChange', data);
-      this.switchFlag = !this.switchFlag
+      this.$emit("GfFdChange", data);
+      this.switchFlag = !this.switchFlag;
     },
   },
   // 生命周期钩子
@@ -114,12 +171,13 @@ export default {
   },
   mounted() {
     // 渲染后
+    this.selectVal = this.selectValue;
     this.activeRow = this.rowIndex;
     this.activeIndex = this.index;
-    if (this.wpId.includes('GDC')) {
-      this.switchFlag = true
-    } else if(this.wpId.includes('FDC')) {
-      this.switchFlag = false
+    if (this.wpId.includes("GDC")) {
+      this.switchFlag = true;
+    } else if (this.wpId.includes("FDC")) {
+      this.switchFlag = false;
     }
   },
   beforeUpdate() {

src/store/index.js

@@ -11,7 +11,7 @@ const state = {
   themeName: localStorage.getItem("themeName") || "dark", // 主题
   menuData: [],
   windturbineMap: {},
-  moudleName: "",
+  moudleName: localStorage.getItem("ModuleName")||'',
 };
 
 //改变状态的方法`
@@ -44,7 +44,8 @@ const actions = {
     context.commit("changeMenuData", str);
   },
   changeModuleName(context, str) {
-    context.commit("changeModuleName", str);
+      context.commit("changeModuleName", str);
+       localStorage.setItem("ModuleName", str);
   },
 };
 

src/views/Decision/Decision1.vue

@@ -1,112 +1,115 @@
 <template>
-  <div class="decision-page-1">
-    <div class="query-form">
-      <!-- mg-b-8-->
-      <div class="station1">
-        场站：
-        <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="station1">
-        项目：
-        <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="station1">
-        线路：
-        <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"
+  <div
+    :class="
+      $store.state.themeName == 'dark'
+        ? 'dark-preformance'
+        : 'light-preformance'
+    "
+  >
+    <div class="decision-page-1">
+      <div class="query-form">
+        <!-- mg-b-8-->
+        <div class="station1">
+          场站：
+          <el-select
+            size="mini"
+            v-model="value1"
+            @change="ChangZhanChange(value1)"
+            clearable
+            placeholder="请选择"
+            popper-class="select"
           >
-          </el-option>
-        </el-select>
-      </div>
-      <div class="dates">
-        开始日期：
-        <div class="search-input">
-          <el-date-picker
+            <el-option
+              v-for="item in ChangZhan"
+              :key="item.id"
+              :value="item.id"
+              :label="item.name"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="station1">
+          项目：
+          <el-select
             size="mini"
-            v-model="value4"
-            @change="BeginChange(value4)"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="value2"
+            @change="XiangMuChange(value2)"
+            multiple
+            collapse-tags
+            placeholder="请选择"
+            popper-class="select"
           >
-          </el-date-picker>
+            <el-option
+              v-for="item in XiangMu"
+              :key="item.id"
+              :value="item.id"
+              :label="item.name"
+            >
+            </el-option>
+          </el-select>
         </div>
-      </div>
-      <div class="dates">
-        结束日期：
-        <div class="search-input">
-          <el-date-picker
+        <div class="station1">
+          线路：
+          <el-select
             size="mini"
-            v-model="value5"
-            @change="EndChange(value5)"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="value3"
+            @change="XianLuChange(value3)"
+            multiple
+            collapse-tags
+            placeholder="请选择"
+            popper-class="select"
           >
-          </el-date-picker>
-          <!-- <div class="unit svg-icon svg-icon-gray">
+            <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>
+        <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">
+          <el-button round class="btn green" @click="AjaxCommon()"
+            >搜索</el-button
+          >
+          <el-button round class="btn" @click="mxClick()">明细信息</el-button>
+          <el-button round class="btn" @click="exportExcel()">导出</el-button>
         </div>
       </div>
-      <div class="query-actions">
-        <el-button round  class="btn green" @click="AjaxCommon()"
-          >搜索</el-button
-        >
-        <el-button round  class="btn" @click="mxClick()"
-          >明细信息</el-button
-        >
-        <el-button round  class="btn" @click="exportExcel()"
-          >导出</el-button
-        >
-      </div>
-    </div>
-    <!-- <div class="actions">
+      <!-- <div class="actions">
       <el-button
         class="btn"
         :class="TypeClass == 1 ? 'green' : ''"
@@ -129,95 +132,107 @@
         集电线路
       </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 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>
-    </div>
-    <!-- <div class="performance-title">
+      <!-- <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"
+      <div class="performance" style="height: 90vh">
+        <div class="economicTable" style="height: 86vh">
+          <el-table
+            :data="tableData.data"
+            :cell-style="{ padding: '6px' }"
+            :row-style="{ height: '0px' }"
+            cell-class-name="table_cell"
+            stripe
+            @header-click="onHeaderClick"
           >
-          </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' }">
+            <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"
+              width="120"
+              prop="llfdl"
+              label="理论发电量"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              width="120"
+              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="performance-left">
+          <bar-line-chart
+            v-if="showDisplay"
+            :height="height"
+            :bardata="bardata"
+            :lineData="lineData"
+            :color="barColor"
+            lineName="理论发电量"
+          />
           <div
-            class="lyl-item"
-            v-for="(item, index) in tableData.data"
-            :key="index"
+            class="lyl"
+            :style="{ height: tableData.data.length * 37 + 'px' }"
           >
-            {{ item.fnlly }}%
-            <img class="lyl-item-img" src="@assets/images/fnlyl.png" />
+            <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 class="dashed" :style="{ height: height }"></div>
       </div>
-    </div>
-    <!-- <el-row :type="'flex'" class="content">
+      <!-- <el-row :type="'flex'" class="content">
       <el-col :span="12" class="pd-r-8">
         <toolbar-panel title="风机绩效榜 (万kWh)" :showLine="false">
           <bar-line-chart
@@ -275,6 +290,7 @@
         </panel>
       </el-col>
     </el-row> -->
+    </div>
   </div>
 </template>
 
@@ -397,7 +413,6 @@ export default {
         "#ccf0d3",
         "#4b55ae",
       ],
-      actionClass: "1",
       TypeClass: "1", //风场，项目，集电线路 的按钮颜色，默认第一个
       typeOptions: [
         { id: "1", name: "风场" },
@@ -509,8 +524,8 @@ export default {
       this.TypeClass = "";
       this.value2 = val;
       this.value3 = [];
-      this.AjaxCommon();
       this.XianLuVal(val);
+      this.AjaxCommon();
     },
     XianLuVal(val) {
       api
@@ -549,12 +564,6 @@ export default {
     },
     TypeClick(val) {
       this.TypeClass = val;
-      // 重置状态start
-      this.value1 = "";
-      this.value2 = [];
-      this.value3 = [];
-      // this.value4 = this.getTime(1);
-      // this.value5 = this.getTime(2);
       this.AjaxCommon();
       // 重置状态end
     },
@@ -588,7 +597,6 @@ export default {
       this.AjaxCommon();
     },
     AjaxCommon() {
-      this.actionClass = 1;
       api
         .benchmarking({
           wpids: this.value1,
@@ -659,6 +667,8 @@ export default {
                 legend: legend,
                 data: arr1,
               };
+            } else {
+              (this.bardata = []), (this.lineData = []);
             }
 
             // if (this.lineData.length > 22) {
@@ -668,18 +678,25 @@ export default {
             // } 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";
+            // 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";
+            // }
+            if (this.lineData.length > 21) {
+              this.height = this.lineData.length * 37 + 65 + "px";
+            } else if (this.lineData.length == 20) {
+              this.height = 20 * 37 + 65 + "px";
             } else {
-              this.height = 21 * 35 + 46 + "px";
+              this.height = 21 * 37 + 75 + "px";
             }
             this.showDisplay = false;
             setTimeout(() => {
               this.showDisplay = true;
             }, 10);
-            this.tableDataEnd = data2[data2.length - 1];
+            // this.tableDataEnd = data2[data2.length - 1];
             data2.pop();
             this.tableData.data = data2;
           }
@@ -794,199 +811,347 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.decision-page-1 {
-  height: 93vh;
-  display: flex;
-  flex-direction: column;
-  .performance-title {
+.light-preformance {
+  .decision-page-1 {
+    height: 93vh;
     display: flex;
-    height: 41px;
-    align-items: center;
-    // background: red;
+    flex-direction: column;
+    .performance-title {
+      display: flex;
+      height: 41px;
+      align-items: center;
+      // background: red;
 
-    .left-title,
-    .right-title {
-      width: 46.8%;
-      padding-left: 30px;
+      .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;
+    .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;
+      margin-top: 10px;
+      margin-left: 1%;
+
+      .economicTable {
+        .el-table td.el-table__cell,
+        .el-table th.el-table__cell.is-leaf {
+          border-bottom: transparent;
+        }
+        // .el-table td.el-table__cell{
+        //   height: 60px;
+        // }
+        // .el-table{
+        //   .el-table-column{
+        //      height: 60px;
+        // }
+        //   }
+        // }
       }
-      // .el-table td.el-table__cell{
-      //   height: 60px;
-      // }
-      // .el-table{
-      //   .el-table-column{
-      //      height: 60px;
-      // }
+      .performance-left {
+        width: 45%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: flex;
+        flex-direction: row;
+        padding-top: 0;
+        .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;
+        // background: red;
+      }
+      .lyl-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 37px;
+        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;
       //   }
       // }
-    }
-    .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;
+      }
 
+      .dashed1 {
+        width: 1px;
+        background-image: linear-gradient(
+          #3a4043 0%,
+          #3a4043 40%,
+          transparent 50%
+        );
         background-size: 1px 9px;
         margin-top: 45px;
-        height: 100%;
-        right: -50px;
+        margin-left: 20px;
       }
-    }
-    .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;
-      // background: red;
-    }
-    .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;
+      .table {
+        width: 48%;
+        // background-color: yellowgreen;
+      }
     }
 
-    .dashed1 {
-      width: 1px;
-      background-image: linear-gradient(
-        #3a4043 0%,
-        #3a4043 40%,
-        transparent 50%
-      );
-      background-size: 1px 9px;
-      margin-top: 45px;
-      margin-left: 20px;
+    .table_cell .cell {
+      white-space: nowrap;
     }
+  }
+}
+.dark-preformance {
+  .decision-page-1 {
+    height: 93vh;
+    display: flex;
+    flex-direction: column;
+    .performance-title {
+      display: flex;
+      height: 41px;
+      align-items: center;
+      // background: red;
 
-    .table {
-      width: 48%;
-      // background-color: yellowgreen;
+      .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;
+      margin-top: 10px;
+      margin-left: 1%;
 
+      .economicTable {
+        .el-table td.el-table__cell,
+        .el-table th.el-table__cell.is-leaf {
+          border-bottom: transparent;
+        }
+        // .el-table td.el-table__cell{
+        //   height: 60px;
+        // }
+        // .el-table{
+        //   .el-table-column{
+        //      height: 60px;
+        // }
+        //   }
+        // }
+      }
+      .performance-left {
+        width: 45%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: flex;
+        flex-direction: row;
 
-  .table_cell .cell {
-    white-space: nowrap;
-  }
+        .dashed {
+          position: absolute;
+          width: 1px;
+          background-image: linear-gradient(
+            #3a4043 0%,
+            #3a4043 40%,
+            transparent 50%
+          );
 
-  .com-panel .panel-title {
-    line-height: 3.4259vh;
-  }
+          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;
+        // background: red;
+      }
+      .lyl-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 37px;
+        position: relative;
+        width: 120px;
+      }
+      .lyl-item-img {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        // height: 33px;
+      }
 
-  .tools {
-    display: flex;
-    line-height: 3.4259vh;
+      // .center {
+      //   width: 3%;
+      //   height: 90%;
+      //   position: relative;
+      //   margin-top: 50px;
 
-    .tool-block {
-      display: flex;
-      align-items: center;
-      margin-left: 0.741vh;
+      //   .using {
+      //     width: 100%;
+      //     height: 100%;
+      //     z-index: 99;
+      //     position: absolute;
+      //     right: 0px;
+      //     top: 0px;
+      //   }
+      // }
 
-      .legend {
-        flex: auto;
-        width: 0.741vh;
-        height: 0.741vh;
-        margin-right: 0.741vh;
+      .dashed {
+        width: 1px;
+        background-image: linear-gradient(
+          #3a4043 0%,
+          #3a4043 40%,
+          transparent 50%
+        );
+        background-size: 1px 9px;
+        margin-top: 45px;
+      }
 
-        &.long {
-          width: 2.963vh;
-          height: 0.37vh;
-        }
+      .dashed1 {
+        width: 1px;
+        background-image: linear-gradient(
+          #3a4043 0%,
+          #3a4043 40%,
+          transparent 50%
+        );
+        background-size: 1px 9px;
+        margin-top: 45px;
+        margin-left: 20px;
       }
 
-      .legend-text {
-        color: @gray-l;
-        font-size: @fontsize-s;
+      .table {
+        width: 48%;
+        // background-color: yellowgreen;
       }
     }
+
+    .table_cell .cell {
+      white-space: nowrap;
+    }
   }
+}
 
-  .project-table {
-    overflow: auto;
+.com-panel .panel-title {
+  line-height: 3.4259vh;
+}
+
+.tools {
+  display: flex;
+  line-height: 3.4259vh;
 
-    tbody {
-      height: calc(100vh - 24.5vh);
+  .tool-block {
+    display: flex;
+    align-items: center;
+    margin-left: 0.741vh;
+
+    .legend {
+      flex: auto;
+      width: 0.741vh;
+      height: 0.741vh;
+      margin-right: 0.741vh;
+
+      &.long {
+        width: 2.963vh;
+        height: 0.37vh;
+      }
     }
 
-    td {
-      color: #b2bdc0;
+    .legend-text {
+      color: @gray-l;
+      font-size: @fontsize-s;
     }
   }
+}
+
+.project-table {
+  overflow: auto;
 
-  .contentMx {
-    width: 100%;
-    overflow-x: auto;
+  tbody {
+    height: calc(100vh - 24.5vh);
   }
 
-  .activeMx {
-    width: 150%;
+  td {
+    color: #b2bdc0;
   }
 }
+
+.contentMx {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.activeMx {
+  width: 150%;
+}
 </style>

src/views/Decision/Decision1Mx.vue

@@ -1,219 +1,234 @@
 <template>
-  <div class="decision-page-1">
-    <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"
+  <div
+    :class="
+      $store.state.themeName == 'dark'
+        ? 'dark-preformance'
+        : 'light-preformance'
+    "
+  >
+    <div class="decision-page-1">
+      <div class="query-form">
+        <!-- mg-b-8-->
+        <div class="station1">
+          场站：
+          <el-select
+            size="mini"
+            v-model="value1"
+            @change="ChangZhanChange(value1)"
+            clearable
+            placeholder="请选择"
+            popper-class="select"
           >
-          </el-option>
-        </el-select>
-      </div>
-      <div class="dates">
-        开始日期：
-        <div class="search-input">
-          <el-date-picker
+            <el-option
+              v-for="item in ChangZhan"
+              :key="item.id"
+              :value="item.id"
+              :label="item.name"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="station1">
+          项目：
+          <el-select
             size="mini"
-            v-model="value4"
-            @change="BeginChange(value4)"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="value2"
+            @change="XiangMuChange(value2)"
+            multiple
+            collapse-tags
+            placeholder="请选择"
+            popper-class="select"
           >
-          </el-date-picker>
+            <el-option
+              v-for="item in XiangMu"
+              :key="item.id"
+              :value="item.id"
+              :label="item.name"
+            >
+            </el-option>
+          </el-select>
         </div>
-      </div>
-      <div class="dates">
-        结束日期：
-        <div class="search-input">
-          <el-date-picker
+        <div class="station1">
+          线路：
+          <el-select
             size="mini"
-            v-model="value5"
-            @change="EndChange(value5)"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="选择日期"
-            popper-class="date-select"
+            v-model="value3"
+            @change="XianLuChange(value3)"
+            multiple
+            collapse-tags
+            placeholder="请选择"
+            popper-class="select"
           >
-          </el-date-picker>
-          <!-- <div class="unit svg-icon svg-icon-gray">
+            <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>
+        <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">
+          <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="query-actions">
-        <el-button round size="mini" class="btn" @click="mxClick"
-          >搜索</el-button
+      <div class="tabCut1">
+        <div
+          class="tabCut-item"
+          @click="TypeClick(val.id)"
+          :class="TypeClass === val.id ? 'green1' : ''"
+          v-for="val in typeOptions"
+          :key="val.id"
         >
-        <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="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>
+          <span>{{ val.name }}</span>
+        </div>
       </div>
-    </div>
-    <!-- <div class="performance-title">
+      <!-- <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="风速"
+      <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>
-          <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' }">
+            <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="performance-left">
+          <bar-line-chart
+            v-if="showDisplay"
+            :height="height"
+            :bardata="bardata"
+            :lineData="lineData"
+            :color="barColor"
+            lineName="理论发电量"
+          />
           <div
-            class="lyl-item"
-            v-for="(item, index) in tableData.data"
-            :key="index"
+            class="lyl"
+            :style="{ height: tableData.data.length * 37 + 'px' }"
           >
-            {{ item.fnlly }}%
-            <img class="lyl-item-img" src="@assets/images/fnlyl.png" />
+            <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 class="dashed" :style="{ height: height }"></div>
       </div>
-    </div>
-    <!-- <div class="contentMx">
+      <!-- <div class="contentMx">
       <div class="activeMx">
         <el-row :type="'flex'" class="content">
           <el-col :span="10" class="pd-r-8">
@@ -296,6 +311,7 @@
         </el-row>
       </div>
     </div> -->
+    </div>
   </div>
 </template>
 
@@ -951,19 +967,12 @@ 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";
+          if (this.lineData.length > 21) {
+            this.height = this.lineData.length * 37 + 65 + "px";
+          } else if (this.lineData.length == 20) {
+            this.height = 20 * 37 + 65 + "px";
           } else {
-            this.height = 21 * 35 + 46 + "px";
+            this.height = 21 * 37 + 75 + "px";
           }
           this.showDisplay = false;
           setTimeout(() => {
@@ -1105,44 +1114,100 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.decision-page-1 {
-  height: 93vh;
-  display: flex;
-  flex-direction: column;
-  // 新样式
-  .performance-title {
+.light-preformance {
+  .decision-page-1 {
+    height: 93vh;
     display: flex;
-    height: 41px;
-    justify-content: space-between;
-    align-items: center;
-    .left-title,
-    .right-title {
-      width: 45.8%;
+    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;
+        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;
+    .performance {
       display: flex;
       flex-direction: row;
-      .dashed {
+      width: 98.5%;
+      background-color: rgba(0, 0, 0, 0.4);
+      border-radius: 5px;
+      overflow-y: auto;
+      position: relative;
+      margin-top: 10px;
+      margin-left: 1%;
+
+      .economicTable {
+        .el-table td.el-table__cell,
+        .el-table th.el-table__cell.is-leaf {
+          border-bottom: transparent;
+        }
+        // .el-table td.el-table__cell{
+        //   height: 60px;
+        // }
+        // .el-table{
+        //   .el-table-column{
+        //      height: 60px;
+        // }
+        //   }
+        // }
+      }
+      .performance-left {
+        width: 53%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: flex;
+        flex-direction: row;
+        padding-top: 0;
+        .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: 37px;
+        position: relative;
+        width: 120px;
+      }
+      .lyl-item-img {
         position: absolute;
+        left: 0;
+        bottom: 0;
+        // height: 33px;
+      }
+      .dashed {
         width: 1px;
         background-image: linear-gradient(
           #3a4043 0%,
@@ -1151,64 +1216,152 @@ export default {
         );
         background-size: 1px 9px;
         margin-top: 45px;
-        height: 100%;
-        right: -50px;
+      }
+
+      .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;
       }
     }
 
-    .lyl {
+    .table_cell .cell {
+      white-space: nowrap;
+    }
+  }
+}
+.dark-preformance {
+  .decision-page-1 {
+    height: 93vh;
+    display: flex;
+    flex-direction: column;
+    .performance-title {
       display: flex;
-      flex-direction: column;
+      height: 41px;
+      justify-content: space-between;
       align-items: center;
-      width: 70px;
-      font-size: 14px;
-      font-family: Arial;
-      font-weight: 400;
-      color: #1c98fe;
-      margin-top: 27px;
-      margin-left: 10px;
+      .left-title,
+      .right-title {
+        width: 45.8%;
+
+        padding-left: 30px;
+      }
     }
-    .lyl-item {
+
+    .performance {
       display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 35px;
+      flex-direction: row;
+      width: 98.5%;
+      background-color: rgba(0, 0, 0, 0.4);
+      border-radius: 5px;
+      overflow-y: auto;
       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;
-    }
+      margin-top: 10px;
+      margin-left: 1%;
 
-    .dashed1 {
-      width: 1px;
-      background-image: linear-gradient(
-        #3a4043 0%,
-        #3a4043 40%,
-        transparent 50%
-      );
-      background-size: 1px 9px;
-      margin-top: 45px;
-      margin-left: 20px;
-    }
+      .economicTable {
+        .el-table td.el-table__cell,
+        .el-table th.el-table__cell.is-leaf {
+          border-bottom: transparent;
+        }
+        // .el-table td.el-table__cell{
+        //   height: 60px;
+        // }
+        // .el-table{
+        //   .el-table-column{
+        //      height: 60px;
+        // }
+        //   }
+        // }
+      }
+      .performance-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: 37px;
+        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 {
+        width: 48%;
+        // background-color: yellowgreen;
+      }
     }
+
     .table_cell .cell {
       white-space: nowrap;
     }

src/views/LightMatrix1/LightMatrix1.vue

@@ -1,140 +1,138 @@
 <template>
-  <el-scrollbar>
-    <div
-      :class="
-        $store.state.themeName === 'dark' ? 'dark-matrix' : 'light-matrix'
-      "
-    >
-      <Row class="panel-2" type="">
-        <Col :span="12" class="left-50-16">
-          <div class="panel">
-            <div class="dot left top"></div>
-            <div class="dot left bottom"></div>
-            <!-- <div class="dot right top"></div>
+  <div
+    :class="$store.state.themeName === 'dark' ? 'dark-matrix' : 'light-matrix'"
+  >
+    <Row class="panel-2" type="">
+      <Col :span="12" class="left-50-16">
+        <div class="panel">
+          <div class="dot left top"></div>
+          <div class="dot left bottom"></div>
+          <!-- <div class="dot right top"></div>
             <div class="dot right bottom"></div> -->
-            <div class="item">
-              <!-- @click="handleClick()" -->
-              <div class="loop"></div>
-              <span class="svg-icon svg-icon-gray svg-icon-md">
-                <SvgIcon svgid="svg-wind-site"></SvgIcon>
-              </span>
-            </div>
-            <div class="item Add" @click="changeShow('jrfj_FDC')">
-              <div class="curStyle">
-                <div>接入风机(台)</div>
-                <div>{{ sourceMap.fcjrnum || "---" }}</div>
-              </div>
+          <div class="item">
+            <!-- @click="handleClick()" -->
+            <div class="loop"></div>
+            <span class="svg-icon svg-icon-gray svg-icon-md">
+              <SvgIcon svgid="svg-wind-site"></SvgIcon>
+            </span>
+          </div>
+          <div class="item Add" @click="changeShow('jrfj_FDC', null)">
+            <div class="curStyle">
+              <div>接入风机(台)</div>
+              <div>{{ sourceMap.fcjrnum || "0" }}</div>
             </div>
-            <div class="item green" @click="changeShow('yx_FDC', 1)">
-              <div class="curStyle">
-                <div>· 运行(台)</div>
-                <div>{{ sourceMap.fcyxnum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item green" @click="changeShow('yx_FDC', 1)">
+            <div class="curStyle">
+              <div>· 运行(台)</div>
+              <div>{{ sourceMap.fcyxnum || "0" }}</div>
             </div>
-            <div class="item blue" @click="changeShow('dj_FDC', 0)">
-              <div class="curStyle">
-                <div>· 待机(台)</div>
-                <div>{{ sourceMap.fcdjnum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item blue" @click="changeShow('dj_FDC', 0)">
+            <div class="curStyle">
+              <div>· 待机(台)</div>
+              <div>{{ sourceMap.fcdjnum || "0" }}</div>
             </div>
-            <div class="item pink" @click="changeShow('xd_FDC', 5)">
-              <div class="curStyle">
-                <div>· 限电(台)</div>
-                <div>{{ sourceMap.fcxdnum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item pink" @click="changeShow('xd_FDC', 5)">
+            <div class="curStyle">
+              <div>· 限电(台)</div>
+              <div>{{ sourceMap.fcxdnum || "0" }}</div>
             </div>
-            <div class="item red" @click="changeShow('gz_FDC', 2)">
-              <div class="curStyle">
-                <div>· 故障(台)</div>
-                <div>{{ sourceMap.fcgznum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item red" @click="changeShow('gz_FDC', 2)">
+            <div class="curStyle">
+              <div>· 故障(台)</div>
+              <div>{{ sourceMap.fcgznum || "0" }}</div>
             </div>
-            <div class="item orange" @click="changeShow('jx_FDC', 4)">
-              <div class="curStyle">
-                <div>· 检修(台)</div>
-                <div>{{ sourceMap.fcwhnum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item orange" @click="changeShow('jx_FDC', 4)">
+            <div class="curStyle">
+              <div>· 检修(台)</div>
+              <div>{{ sourceMap.fcwhnum || "0" }}</div>
             </div>
-            <div class="item write" @click="changeShow('sl_FDC', 6)">
-              <div class="curStyle">
-                <div>· 受累(台)</div>
-                <div>{{ sourceMap.fcslnum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item write" @click="changeShow('sl_FDC', 6)">
+            <div class="curStyle">
+              <div>· 受累(台)</div>
+              <div>{{ sourceMap.fcslnum || "0" }}</div>
             </div>
-            <div class="item gray" @click="changeShow('lx_FDC', 3)">
-              <div class="curStyle">
-                <div>· 离线(台)</div>
-                <div>{{ sourceMap.fclxnum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item gray" @click="changeShow('lx_FDC', 3)">
+            <div class="curStyle">
+              <div>· 离线(台)</div>
+              <div>{{ sourceMap.fclxnum || "0" }}</div>
             </div>
           </div>
-        </Col>
-        <Col :span="12" class="left-50-16">
-          <div class="panel">
-            <div class="dot left top"></div>
-            <div class="dot left bottom"></div>
-            <!-- <div class="dot right top"></div>
+        </div>
+      </Col>
+      <Col :span="12" class="left-50-16">
+        <div class="panel">
+          <div class="dot left top"></div>
+          <div class="dot left bottom"></div>
+          <!-- <div class="dot right top"></div>
             <div class="dot right bottom"></div> -->
-            <div class="item">
-              <div class="loop"></div>
-              <span class="svg-icon svg-icon-gray svg-icon-md">
-                <SvgIcon
-                  :svgid="'svg-photovoltaic'"
-                  style="margin: 3px 0px -3px 1px"
-                ></SvgIcon>
-              </span>
-            </div>
-            <div class="item Add" @click="changeShow('jrfj1_GDC')">
-              <div class="curStyle">
-                <div>逆变器(台)</div>
-                <div>{{ sourceMap.gfjrnum || "---" }}</div>
-              </div>
+          <div class="item">
+            <div class="loop"></div>
+            <span class="svg-icon svg-icon-gray svg-icon-md">
+              <SvgIcon
+                :svgid="'svg-photovoltaic'"
+                style="margin: 3px 0px -3px 1px"
+              ></SvgIcon>
+            </span>
+          </div>
+          <div class="item Add" @click="changeShow('jrfj1_GDC', null)">
+            <div class="curStyle">
+              <div>逆变器(台)</div>
+              <div>{{ sourceMap.gfjrnum || "0" }}</div>
             </div>
-            <div class="item green" @click="changeShow('yx1_GDC', 1)">
-              <div class="curStyle">
-                <div>· 运行(台)</div>
-                <div>{{ sourceMap.gfyxnum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item green" @click="changeShow('yx1_GDC', 1)">
+            <div class="curStyle">
+              <div>· 运行(台)</div>
+              <div>{{ sourceMap.gfyxnum || "0" }}</div>
             </div>
-            <div class="item blue" @click="changeShow('dj1_GDC', 0)">
-              <div class="curStyle">
-                <div>· 待机(台)</div>
-                <div>{{ sourceMap.gfdjnum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item blue" @click="changeShow('dj1_GDC', 0)">
+            <div class="curStyle">
+              <div>· 待机(台)</div>
+              <div>{{ sourceMap.gfdjnum || "0" }}</div>
             </div>
-            <div class="item pink" @click="changeShow('xd1_GDC', 5)">
-              <div class="curStyle">
-                <div>· 限电(台)</div>
-                <div>{{ sourceMap.gfxdnum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item pink" @click="changeShow('xd1_GDC', 5)">
+            <div class="curStyle">
+              <div>· 限电(台)</div>
+              <div>{{ sourceMap.gfxdnum || "0" }}</div>
             </div>
-            <div class="item red" @click="changeShow('gz1_GDC', 2)">
-              <div class="curStyle">
-                <div>· 故障(台)</div>
-                <div>{{ sourceMap.gfgznum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item red" @click="changeShow('gz1_GDC', 2)">
+            <div class="curStyle">
+              <div>· 故障(台)</div>
+              <div>{{ sourceMap.gfgznum || "0" }}</div>
             </div>
-            <div class="item orange" @click="changeShow('jx1_GDC', 4)">
-              <div class="curStyle">
-                <div>· 检修(台)</div>
-                <div>{{ sourceMap.gfwhnum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item orange" @click="changeShow('jx1_GDC', 4)">
+            <div class="curStyle">
+              <div>· 检修(台)</div>
+              <div>{{ sourceMap.gfwhnum || "0" }}</div>
             </div>
-            <div class="item write" @click="changeShow('sl1_GDC', 6)">
-              <div class="curStyle">
-                <div>· 受累(台)</div>
-                <div>{{ sourceMap.gfslnum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item write" @click="changeShow('sl1_GDC', 6)">
+            <div class="curStyle">
+              <div>· 受累(台)</div>
+              <div>{{ sourceMap.gfslnum || "0" }}</div>
             </div>
-            <div class="item gray curStyle" @click="changeShow('lx1_GDC', 3)">
-              <div class="curStyle">
-                <div>· 离线(台)</div>
-                <div>{{ sourceMap.gflxnum || "---" }}</div>
-              </div>
+          </div>
+          <div class="item gray curStyle" @click="changeShow('lx1_GDC', 3)">
+            <div class="curStyle">
+              <div>· 离线(台)</div>
+              <div>{{ sourceMap.gflxnum || "0" }}</div>
             </div>
           </div>
-        </Col>
-      </Row>
+        </div>
+      </Col>
+    </Row>
+    <el-scrollbar>
       <div class="panel-box">
         <!-- <box-select node=".card" @selectList="selectList"> -->
         <div
@@ -177,14 +175,22 @@
                       sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
                         fcItem.key
                       ] / 1000
-                    ).toFixed(2) || "0"
+                    ).toFixed(1) || "0"
                   }}
                 </div>
                 <div v-else class="sub-count" :class="fcItem.color">
                   {{
-                    sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
-                      fcItem.key
-                    ].toFixed(``) || "0"
+                    fcItem.type
+                      ? sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
+                          fcItem.key
+                        ]
+                        ? sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
+                            fcItem.key
+                          ].toFixed(1)
+                        : "0"
+                      : sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
+                          fcItem.key
+                        ]
                   }}
                 </div>
               </div>
@@ -217,11 +223,17 @@
                 <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"
+                    fcItem.type
+                      ? sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
+                          fcItem.key
+                        ]
+                        ? sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
+                            fcItem.key
+                          ].toFixed(1)
+                        : "0"
+                      : sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][
+                          fcItem.key
+                        ]
                   }}
                 </div>
               </div>
@@ -248,8 +260,9 @@
         </div>
         <!-- </box-select> -->
       </div>
-    </div>
-  </el-scrollbar>
+    </el-scrollbar>
+  </div>
+
   <Dialog v-model="detialDisplay" :wpId="stationId" :wtId="windId"></Dialog>
   <!-- <GFDialog v-model="gfdetialDisplay" :wtId="windId"></GFDialog> -->
   <Contrast v-model="contrastDisplay" ref="contrast" />
@@ -339,6 +352,7 @@ export default {
           text: "风速(m/s)",
           color: "gray1",
           key: "ssfs",
+          type: "a",
         },
         // {
         //   text: "预测功率",
@@ -349,26 +363,31 @@ export default {
           text: "保证功率(MW)",
           color: "gray1",
           key: "bzgl",
+          type: "a",
         },
         {
           text: "应发功率(MW)",
           color: "gray1",
           key: "yfgl",
+          type: "a",
         },
         {
           text: "实际功率(MW)",
           color: "gray1",
           key: "sjgl",
+          type: "a",
         },
         {
           text: "AGC指令(MW)",
           color: "gray1",
           key: "agcygsd",
+          type: "a",
         },
         {
           text: "出线功率(MW)",
           color: "gray1",
           key: "agccxyg",
+          type: "a",
         },
       ],
       fcStateArray1: [
@@ -414,8 +433,9 @@ export default {
         },
         {
           text: "日照强度W/㎡",
-          color: "gray",
+          color: "gray1",
           key: "ssfs",
+          type: "a",
         },
         // {
         //   text: "预测功率",
@@ -424,28 +444,33 @@ export default {
         // },
         {
           text: "保证功率(MW)",
-          color: "gray",
+          color: "gray1",
           key: "bzgl",
+          type: "a",
         },
         {
           text: "应发功率(MW)",
-          color: "gray",
+          color: "gray1",
           key: "yfgl",
+          type: "a",
         },
         {
           text: "实际功率(MW)",
-          color: "gray",
+          color: "gray1",
           key: "sjgl",
+          type: "a",
         },
         {
           text: "AGC指令(MW)",
-          color: "gray",
+          color: "gray1",
           key: "agcygsd",
+          type: "a",
         },
         {
           text: "出线功率(MV)",
-          color: "gray",
+          color: "gray1",
           key: "agccxyg",
+          type: "a",
         },
       ],
       chooseList: [],
@@ -494,15 +519,8 @@ export default {
           if (!this.fillCategory) {
             cEle.isShow = true;
             // cEle.isShow=false;
-          } else if (cEle.wpId.indexOf(category.split("_")[1]) !== -1) {
-            if (isNumber(fjzt)) {
-              cEle.fjzt === fjzt ? (cEle.isShow = true) : (cEle.isShow = false);
-            } else {
-              cEle.isShow = true;
-              // cEle.isShow = false;
-            }
-          } else {
-            cEle.isShow = true;
+          } else if (fjzt !== null) {
+            cEle.fjzt === fjzt ? (cEle.isShow = true) : (cEle.isShow = false);
           }
         });
       });
@@ -533,6 +551,7 @@ export default {
               });
             }
           }
+          console.log(this.sourceMap);
           this.sourceMap = sourceMap;
           if (this.fillCategory) {
             this.changeShow(this.fillCategory, this.fillFjzt, true);

src/views/WindSite/WindSite.vue

@@ -38,6 +38,7 @@
 
 <script>
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import store from "@store/index.js";
 export default {
   // 名称
   name: "WindSite",
@@ -128,6 +129,7 @@ export default {
       ],
     };
   },
+  computed: {},
   // 函数
   methods: {
     clickMenu: function (index) {
@@ -137,7 +139,16 @@ export default {
   },
 
   created() {
-    this.menuDatas.forEach((ele) => {
+    let currentPath = this.$route.path.split("/");
+    this.menuDatas.forEach((ele, index) => {
+      if (this.$store.state.moudleName == "") {
+        if (ele.path.split("/")[3] == currentPath[3]) {
+          this.$store.dispatch("changeModuleName", ele.text);
+        }
+      }
+      if (ele.text == this.$store.state.moudleName) {
+        this.activeIndex = index;
+      }
       ele.path = ele.path + "/" + this.$route.params.wpId;
     });
   },

src/views/WindSite/pages/Matrix.vue

@@ -598,13 +598,21 @@ export default {
               });
             });
             this.options = arrList;
-            if (this.selectValue === "") {
-              this.selectValue = arrList[0].label || "";
-              this.showList = allData[arrList[0].label] || [];
-            } else {
-              this.showList = allData[this.selectValue] || [];
-            }
+            // if (this.selectValue === "") {
+            this.selectValue = arrList[0].label || "";
+            this.showList = allData[arrList[0].label] || [];
+            // }
+            // else {
+            //   this.showList = allData[this.selectValue] || [];
+            // }
             this.allData = allData;
+          } else if (res.code == 500) {
+            this.jzMap = [];
+            this.fczbmaps = [];
+            this.options = [];
+            this.selectValue = "";
+            this.showList = [];
+            this.allData = {};
           }
         });
     },
@@ -714,6 +722,7 @@ export default {
         } else {
           that.requestData();
         }
+        that.getGS();
       }, that.$store.state.websocketTimeSec);
     });
   },
@@ -733,7 +742,8 @@ export default {
       } else {
         this.requestData();
       }
-      this.renderBtnActiveIndex();
+      this.getGS();
+      //   this.renderBtnActiveIndex();
     },
   },
 };