Merge branch 'mw' of http://124.70.43.205:3000/yangxiao/sis_zhfx

src/App.vue

@@ -254,29 +254,18 @@ l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956
         active-text-color="#6262a2"
         background-color="#36348e"
       >
-        <el-sub-menu
-          :index="index"
-          :title="item.text"
-          v-for="(item, index) in menuData"
-          :key="index"
-        >
+        <el-sub-menu :index="index" :title="item.text" v-for="(item , index) in menuData">
           <template #title>
-            <router-link :to="item.path">
-              <el-icon>
-                <SvgIcon :svgid="item.icon" />
-              </el-icon>
-            </router-link>
+			  <router-link :to="item.path">
+				<el-icon>
+				  <SvgIcon :svgid="item.icon" />
+				</el-icon>
+			</router-link>
           </template>
-          <el-menu-item-group
-            v-for="(menu, idx) in item.children"
-            :index="idx"
-            :key="idx"
-          >
-            <router-link :to="menu.path">
-              <el-menu-item :index="index + '-' + idx">
-                {{ menu.text }}
-              </el-menu-item>
-            </router-link>
+          <el-menu-item-group v-for="(menu , idx) in item.children" :index="idx">
+			  <router-link :to="menu.path">
+				<el-menu-item :index="index+'-'+idx">{{menu.text}}</el-menu-item>
+			</router-link>
           </el-menu-item-group>
         </el-sub-menu>
       </el-menu>
@@ -325,7 +314,7 @@ export default {
       isLogined: true,
       showSisView: false,
       memuCloseTimeout: null,
-      menuData: [],
+	  menuData:[]
     };
   },
 
@@ -391,8 +380,8 @@ export default {
       this.showSisView = res.fullPath === "/sisView";
     },
     "$store.state.menuData"(res) {
-      this.menuData = res;
-    },
+		this.menuData = res;
+	},
   },
 };
 </script>

src/assets/styles/common/common.less

@@ -17,9 +17,13 @@
 
 // 亮色主题
 @import "../theme/light/light-jsc.less"; // 驾驶舱
+@import "../theme/light/jsc-jcjz.less"; // 驾驶舱-基础矩阵
+@import "../theme/light/jsc-ztjs.less"; // 驾驶舱-状态监视
 @import "../theme/light/light-jjyx.less"; // 经济运行
 @import "../theme/light/light-sp.less"; // 沙盘
 @import "../theme/light/light-qt.less"; // 其他
 
+@import "../theme/light/jjyx-dbgl.less"; // 对标管理
+
 // 暗色主题
 @import "../theme/dark/dark-jsc.less"; // 驾驶舱

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

@@ -0,0 +1,117 @@
+// 对标管理
+@import "./setting.less";
+#appBody.light {
+	// 风机绩效榜
+    .com-table {
+		thead tr th{
+			color: @black;
+		}
+		
+		.el-scrollbar tr td {
+			color: @black;
+		}
+		
+		.el-scrollbar tr td.light span {
+			color: @blue;
+		}
+	}
+	.btn.green,.btn:hover{
+		color: @deepblue;
+		border-color: @deepblue;
+		background: rgba(54, 52, 142, 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-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;
+	    }
+	  }
+	}
+}

src/assets/styles/theme/light/jsc-jcjz.less

@@ -0,0 +1,101 @@
+// 驾驶舱模块-基础矩阵白色主题样式
+
+@import "./setting.less";
+
+
+#appBody.light {
+    .panel-body{
+        background:@white;
+        transition: @transition;
+    }
+    .card-panel .card-left .tag{
+        color: @black;
+    }
+    .light-matrix .panel{
+        background-color: gainsboro;
+    }
+    .green[data-v-065abbc5]{
+        color: @green;
+    }
+    .green[data-v-6a0a9536]{
+        color: @green;
+    }
+
+    //驾驶舱模块-矩阵白色主题样式二级页面
+    //基本信息-日发电量1
+    .wind-site-base-info .generation {
+        background: @white;
+    }
+    //基本信息-日发电量2
+    .el-col-10 {
+        background: @white;
+    }
+    //基本信息-日发电量右侧
+    .wind-site-warning[data-v-40a70b04]{
+        background: @white;
+        transition: @transition;
+    }
+    //右侧导航栏第一个-天气
+    .wind-site-weather[data-v-ccb406f8]{
+        background: @white;
+        transition: @transition;
+    }
+    //右侧导航栏第一个-最右侧
+    .light-matrix-small{
+        background: @white;
+        transition: @transition;
+    }
+    //最右侧导航
+    .wind-site .page-common-body .page-common-body-menu .page-common-body-menu-box[data-v-3b6e4be5]{
+        background-color: @white;
+        transition: @transition;
+    }
+    .wind-site .page-common-body .page-common-body-menu .page-common-body-menu-box .page-common-body-menu-item[data-v-3b6e4be5] {
+        border: 0.093vh solid @deepblue;
+    }
+    //右侧导航栏第二个底色
+     .df-table .custom-table.el-table{
+        background: @white;
+        transition: @transition;
+    }
+    .general-appearance-body{
+        background: @white;
+        transition: @transition;
+    }
+    .booster-station-body{
+        background: @white;
+        transition: @transition;
+    }
+    .Inverter-Info .box-main .Inverter-Info-body .Inverter-Info-title{
+        position: relative;
+        background: @white;
+        transition: @transition;
+    }
+    table.table-form.mg-b-8{
+        background: @white;
+        transition: @transition;
+    }
+    .Inverter-Info .box-main .Inverter-Info-body .inverter-datas .inverter-item .inverter-item-info .states{
+        background: @white;
+        transition: @transition;
+    }
+    .com-collapse .collapse-box .collapse-items .item.active{
+        color: @deepblue;
+        cursor: pointer;
+        font-weight: bold;
+    }
+    .com-panel.line{
+        margin-left: 1px;
+    }
+    .wave{
+        z-index: 1;
+        // background: @white;
+        // transition: @transition;
+    }
+    .svg-icon.svg-icon-write svg use{
+        fill: @black;
+    }
+    .svg-icon.svg-icon-gray-l svg use{
+        fill: @black;
+    }
+}

src/assets/styles/theme/light/jsc-ztjs.less

@@ -0,0 +1,19 @@
+//驾驶舱模块-状态监视白色主题样式
+@import "./setting.less";
+#appBody.light {
+    .status-panel .status-com-panel .p-body .category-box[data-v-74094c42]{
+        width: 100%;
+        background-color: @white;
+        transition : @transition;
+        display: flex;
+        margin-bottom: 0.37vh;
+    }
+    .el-scrollbar__wrap{
+        background: @white;
+        transition : @transition;
+    }
+    .btn-group-tabs{
+        background: @white;
+        height: 60px;
+    }
+}

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

@@ -60,7 +60,7 @@
 
     .power-benchmarking-page .top .top-left .top-left-header .header-right>div.active,
     .power-benchmarking-page .top .top-left .top-left-header .header-right>div:hover {
-        background  : rgba(54, 52, 142, 0.2);
+        background  : red;
         border-color: @deepblue;
         color       : @deepblue;
         transition  : @transition;

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

@@ -375,11 +375,13 @@
 	
 	.el-popper.is-light.is-pure .el-menu--popup {
 	  padding:0;
+	  .el-menu-item-group__title{padding:0;}
+	  .el-menu-item{height: 46px;line-height: 46px;}
 	}
 	
 	.el-popper.is-light{
-		background:transparent;
 		border:none;
+		.el-menu{border-radius: 0px;}
 	}
 	
     .com-panel-3 {

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

@@ -3,4 +3,9 @@
 @black      : #000;
 @transition : 0.25s;
 @deepblue   : #36348e;
-@borderRaduis: 12px;
+@borderRaduis: 12px;
+@blue : #159AFA;
+@white : #ffffff;
+@gray-l     : #B3BDC0;
+@darkgray-1 : #7b7d7e;
+@green      : #05bb4c;

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

@@ -123,18 +123,26 @@ export default {
           icon: "ract",
           itemWidth: 8,
           itemHeight: 8,
-          inactiveColor: partten.getColor("gray"),
+          inactiveColor: this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
           textStyle: {
-            color: partten.getColor("grayl"),
+            color: this.$store.state.themeName === "dark"
+              ? partten.getColor("grayl")
+              : "#000",
             fontSize: 12,
           },
         },
         tooltip: {
           trigger: "axis",
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
+          backgroundColor: this.$store.state.themeName === "dark"
+              ? "rgba(0,0,0,0.4)"
+              : "rgba(255,255,255,0.5)",
+          borderColor: this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
           textStyle: {
-            color: "#fff",
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
             fontSize: util.vh(16),
           },
         },
@@ -153,7 +161,9 @@ export default {
             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: partten.getColor("green"),
+              color: this.$store.state.themeName === "dark"
+              ? partten.getColor("green")
+              : partten.getColor("blue"),
             },
             moveHandleSize: 0,
             // dataBackground: {
@@ -174,9 +184,13 @@ export default {
             // },
             fillerColor: "transparent",
             textStyle: {
-              color: partten.getColor("grayl"),
+              color: this.$store.state.themeName === "dark"
+              ? partten.getColor("grayl")
+              : "#000",
             },
-            borderColor: partten.getColor("gray"),
+            borderColor: this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
             brushSelect: false,
           },
         ],
@@ -184,7 +198,9 @@ export default {
           {
             type: "category",
             axisLabel: {
-              color: partten.getColor("gray"),
+              color: this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
             },
             inverse: true,
             // minInterval: 10,
@@ -202,12 +218,16 @@ export default {
           {
             type: "value",
             axisLabel: {
-              color: partten.getColor("gray"),
+              color: this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
             },
             axisLine: {
               type: "dashed",
               lineStyle: {
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
               },
               width: 5,
             },
@@ -218,7 +238,7 @@ export default {
               lineStyle: {
                 type: "dashed",
                 dashOffset: 10,
-                color: partten.getColor("gray") + 80,
+                color: this.$store.state.themeName === "dark" ? "#5a6162" : "#000" + 80,
               },
             },
           },
@@ -269,10 +289,14 @@ export default {
           smooth: false, //平滑展示
           xAxisIndex: 1,
           lineStyle: {
-            color: partten.getColor("green"),
+            color: this.$store.state.themeName === "dark"
+              ? partten.getColor("green")
+              : partten.getColor("blue"),
           },
           itemStyle: {
-            color: partten.getColor("green"),
+            color: this.$store.state.themeName === "dark"
+              ? partten.getColor("green")
+              : partten.getColor("blue"),
           },
         });
       }
@@ -315,6 +339,9 @@ export default {
         }
       }
     },
+	"$store.state.themeName"() {
+	  this.initChart();
+	},
   },
 };
 </script>

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

@@ -99,10 +99,14 @@ export default {
         color: ["#1893ce", "#edbf00", "#039178", "#ae4802", "#ea8b00"],
         tooltip: {
           trigger: "item",
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
+          backgroundColor: this.$store.state.themeName === "dark"
+              ? "rgba(0,0,0,0.4)"
+              : "rgba(255,255,255,0.5)",
+          borderColor: this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
           textStyle: {
-            color: "#fff",
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
             fontSize: util.vh(16),
           },
         },
@@ -128,15 +132,21 @@ export default {
           //icon: 'circle',
           itemGap: 12, //图例item间距
           textStyle: {
-            color: partten.getColor("gray"),
+            color: this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
             fontSize: util.vh(14),
             rich: {
               name: {
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
                 fontSize: 12,
               },
               value: {
-                color: partten.getColor("grayl"),
+                color: this.$store.state.themeName === "dark"
+                ? partten.getColor("grayl")
+                : "#000",
                 fontSize: 12,
               },
             },
@@ -175,14 +185,14 @@ export default {
                 // length: 40,
                 // length2: 120,
                 lineStyle: {
-                  color: "#fff",
+                  color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
                   fontSize: util.vh(14),
                 },
               },
             },
             itemStyle: {
               normal: {
-                borderWidth: util.vh(14),
+                borderWidth:this.$store.state.themeName === "dark" ? util.vh(14): util.vh(8),
                 borderColor: "#071812",
               },
             },
@@ -193,10 +203,10 @@ export default {
                 },
                 padding: [0, 0, 0, 0],
                 rich: {
-                  color: "#ffffff" + "cc",
+                  color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
                   percent: {
                     fontSize: util.vh(14),
-                    color: "#ffffff" + "cc",
+                    color: this.$store.state.themeName === "dark" ? "#FFFFFF" : "#000000" ,
                   },
                 },
               },
@@ -220,6 +230,11 @@ export default {
   updated() {
     this.initChart();
   },
+  watch: {
+    "$store.state.themeName"() {
+      this.initChart();
+    },
+  },
 };
 </script>
 

src/components/chart/radar/normal-radar-chart.vue

@@ -52,34 +52,33 @@ export default {
     return {
       id: "",
       chart: null,
-      lineStyles: [
-        {
+      lineStyles: [],
+	  green:{
           areaStyle: {
-            color: "rgba(75,85,174, 0.9)",
+            color: "rgba(165,228,175, 0.9)",
           },
           lineStyle: {
             color: "rgba(255,255,255, 0.85)",
           },
           itemStyle: {
-            color: "rgba(75,85,174, 0.5)",
+            color: "rgba(165,228,175, 0.5)",
             borderColor: "rgba(255,255,255, 0.5)",
             borderWidth: 0.5,
           },
         },
-        {
+	blue:{
           areaStyle: {
-            color: "rgba(165,228,175, 0.9)",
+            color: 'rgba(75,85,174, 0.9)',
           },
           lineStyle: {
             color: "rgba(255,255,255, 0.85)",
           },
           itemStyle: {
-            color: "rgba(165,228,175, 0.5)",
+            color:'rgba(75,85,174, 0.9)',
             borderColor: "rgba(255,255,255, 0.5)",
             borderWidth: 0.5,
           },
-        },
-      ],
+        }
     };
   },
   methods: {
@@ -95,10 +94,16 @@ export default {
       return result;
     },
     initChart() {
+		let themeName = this.$store.state.themeName.split(' ')[1];
       let chart = echarts.init(this.$el);
-
       let maxValue = -1;
-
+		
+		if(themeName === "dark"){
+			this.lineStyles = [this.green,this.blue];
+		}else{
+			this.lineStyles = [this.blue,this.green];
+		}
+		
       if (this.value.length > 0)
         this.value[0].data.forEach((item, index) => {
           item.value.forEach((value) => {
@@ -130,20 +135,32 @@ export default {
         },
         tooltip: {
           trigger: "item",
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
+          backgroundColor:
+            themeName === "dark"
+              ? "rgba(0,0,0,0.4)"
+              : "rgba(255,255,255,0.5)",
+          borderColor:
+            themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
           textStyle: {
-            color: "#fff",
+            color: themeName === "dark" ? "#fff" : "#000",
             fontSize: util.vh(16),
           },
         },
         legend: {
           show: this.showLegend,
           bottom: 16,
-          inactiveColor: partten.getColor("gray"),
+          inactiveColor:
+            themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
           textStyle: {
-            color: partten.getColor("grayl"),
             fontSize: 12,
+            color:
+              themeName === "dark"
+                ? partten.getColor("grayl")
+                : "#000",
           },
         },
         radar: [
@@ -155,19 +172,25 @@ export default {
             nameGap: "16",
             name: {
               textStyle: {
-                color: partten.getColor("gray") + 99,
+                color: themeName === "dark"
+              ? partten.getColor("gray") + 99
+              : "#000",
                 fontSize: 12,
               },
             },
             axisLine: {
               lineStyle: {
-                color: partten.getColor("gray") + 40,
+                color: themeName === "dark"
+              ? partten.getColor("gray") + 40
+              : "#000" + 40,
               },
             },
             splitLine: {
               lineStyle: {
                 width: 1,
-                color: partten.getColor("gray") + 40,
+                color: themeName === "dark"
+              ? partten.getColor("gray") + 40
+              : "#000" + 40,
               },
             },
             splitArea: {
@@ -188,7 +211,9 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: partten.getColor("gray") + 40,
+                color: themeName === "dark"
+              ? partten.getColor("gray") + 40
+              : "#000" + 40,
                 shadowBlur: 1,
                 shadowColor: "#fff",
                 shadowOffsetX: 0.5,
@@ -198,7 +223,9 @@ export default {
             splitLine: {
               lineStyle: {
                 width: 1,
-                color: partten.getColor("gray") + 40,
+                color: themeName === "dark"
+              ? partten.getColor("gray") + 40
+              : "#000" + 40,
                 shadowColor: "#fff",
                 shadowBlur: 0,
                 shadowOffsetX: 0.5,
@@ -222,13 +249,17 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: partten.getColor("gray") + 40,
+                color: themeName === "dark"
+              ? partten.getColor("gray") + 40
+              : "#000" + 40,
               },
             },
             splitLine: {
               lineStyle: {
                 width: 1,
-                color: partten.getColor("gray"),
+                color: themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
               },
             },
             splitArea: {
@@ -246,7 +277,9 @@ export default {
                     },
                     {
                       offset: 1,
-                      color: partten.getColor("green") + 60, // 100% 处的颜色
+                      color: themeName === "dark"
+              ? partten.getColor("green") + 60
+              : partten.getColor("deepblue") + 60, // 100% 处的颜色
                     },
                   ],
                   global: false, // 缺省为 false
@@ -265,13 +298,17 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: partten.getColor("gray") + 40,
+                color: themeName === "dark"
+              ? partten.getColor("gray") + 40
+              : "#000" + 40,
               },
             },
             splitLine: {
               lineStyle: {
                 width: 1,
-                color: partten.getColor("gray"),
+                color: themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
               },
             },
             splitArea: {
@@ -289,7 +326,9 @@ export default {
                     },
                     {
                       offset: 1,
-                      color: partten.getColor("green") + 60, // 100% 处的颜色
+                      color: themeName === "dark"
+              ? partten.getColor("green") + 60
+              : partten.getColor("deepblue") + 60, // 100% 处的颜色
                     },
                   ],
                   global: false, // 缺省为 false
@@ -308,13 +347,17 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: partten.getColor("gray") + 40,
+                color: themeName === "dark"
+              ? partten.getColor("gray") + 40
+              : "#000" + 40,
               },
             },
             splitLine: {
               lineStyle: {
                 width: 1,
-                color: partten.getColor("gray"),
+                color: themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
               },
             },
             splitArea: {
@@ -335,13 +378,17 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: partten.getColor("gray") + 40,
+                color: themeName === "dark"
+              ? partten.getColor("gray") + 40
+              : "#000" + 40,
               },
             },
             splitLine: {
               lineStyle: {
                 width: 1,
-                color: partten.getColor("gray"),
+                color: themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
               },
             },
             splitArea: {
@@ -374,6 +421,11 @@ export default {
       this.initChart();
     });
   },
+  watch: {
+    "$store.state.themeName"() {
+      this.initChart();
+    },
+  },
 };
 </script>
 

src/helper/partten.js

@@ -12,11 +12,11 @@ const color = [
 	{ key: "cyan", value: "#1cbbb4" },
 	{ key: "brown", value: "#a5673f" },
 	{ key: "mauve", value: "#9c26b0" },
+	{ key: "deepblue", value: "#36348e" },
 ];
 
 function getColor(key) {
-    if (!key)
-        key = "green"
+	if(!color.some(ele=>{ return ele.key === key })) key = "green";
     return color.find((t) => { return t.key == key }).value;
 }
 

src/views/Decision/Decision3Db.vue

@@ -385,9 +385,7 @@ export default {
           date: that.value4,
         },
         success(res) {
-			console.log(res)
           var data = res.data;
-
           var arrName = [],
             arrKey = [],
             arrData = [],
@@ -431,7 +429,6 @@ export default {
               value: arr,
             });
           }
-		  console.log(tempArray)
           that.list = tempArray;
         },
       });

src/views/Decision/dual-pie-chart.vue

@@ -99,8 +99,12 @@ export default {
         color: ["#1893ce", "#edbf00", "#039178", "#ae4802", "#ea8b00"],
         tooltip: {
           trigger: "item",
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
+          backgroundColor: this.$store.state.themeName === "dark"
+              ? "rgba(0,0,0,0.4)"
+              : "rgba(255,255,255,0.5)",
+          borderColor: this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),
@@ -128,15 +132,21 @@ export default {
           //icon: 'circle',
           itemGap: 12, //图例item间距
           textStyle: {
-            color: partten.getColor("gray"),
+            color: this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
             fontSize: util.vh(14),
             rich: {
               name: {
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
                 fontSize: 12,
               },
               value: {
-                color: partten.getColor("grayl"),
+                color: this.$store.state.themeName === "dark"
+                ? partten.getColor("grayl")
+                : "#000",
                 fontSize: 12,
               },
             },
@@ -175,14 +185,14 @@ export default {
                 // length: 40,
                 // length2: 120,
                 lineStyle: {
-                  color: "#fff",
+                  color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
                   fontSize: util.vh(14),
                 },
               },
             },
             itemStyle: {
               normal: {
-                borderWidth: util.vh(14),
+                borderWidth:util.vh(4),
                 borderColor: "#071812",
               },
             },
@@ -193,10 +203,10 @@ export default {
                 },
                 padding: [0, 0, 0, 0],
                 rich: {
-                  color: "#ffffff" + "cc",
+                  color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
                   percent: {
                     fontSize: util.vh(14),
-                    color: "#ffffff" + "cc",
+                    color: this.$store.state.themeName === "dark" ? "#FFFFFF" : "#000000" ,
                   },
                 },
               },
@@ -220,6 +230,11 @@ export default {
   updated() {
     this.initChart();
   },
+  watch: {
+    "$store.state.themeName"() {
+      this.initChart();
+    },
+  },
 };
 </script>
 

src/views/NewPages/alarm-center-2.vue

@@ -39,26 +39,12 @@
       <table-2 :data="tableData" :height="'88vh'">
         <template v-for="(item, i) in column" :key="i" #[item]="scope">
           <div class="bar">
-            <div class="bar-percent" :style="{
-                width:
-                  (scope.data.count &&
-                    scope.data.count / (scope.data.count + scope.data.time)) *
-                    100 +
-                  'px',
-              }"></div>
-            <span class="value">{{
-              scope.data.count && scope.data.count
-              }}</span>
+          	<div class="bar-percent" :style="{ width: scope?.data?.countStyle }"> </div>
+          	<span class="value">{{ scope?.data?.count }} 次数</span>
           </div>
           <div class="bar">
-            <div class="bar-percent" :style="{
-                width:
-                  (scope.data.count &&
-                    scope.data.time / (scope.data.count + scope.data.time)) *
-                    100 +
-                  'px',
-              }"></div>
-            <span class="value">{{ scope.data.count && scope.data.time }}</span>
+          	<div class="bar-percent" :style="{ width: scope?.data?.timeStyle}"></div>
+          	<span class="value">{{scope?.data?.time }} 分钟</span>
           </div>
         </template>
       </table-2>
@@ -210,6 +196,7 @@ export default {
     },
     async searchData () {
       const { data } = await this.API.requestData({
+		  showLoading:true,
         baseURL: "http://192.168.1.18:8075/",
         subUrl: "shutdown/list",
         data: {
@@ -233,7 +220,9 @@ export default {
             if (k.type == c.name) {
               let obj1 = {
                 count: k.count,
+                countStyle:((k.count / (k.count + k.time)) * 100) + 'px',
                 time: k.time,
+                timeStyle:((k.time / (k.count + k.time)) * 100) + 'px'
               };
               obj[k.type] = obj1;
             }

src/views/WindSite/pages/Info/Info.vue

@@ -20,7 +20,7 @@
           <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->
           <base-info v-show="InfoBtns.activeIndex == 0" :data="sourceMap" />
           <!-- <base-info v-if="InfoBtns.activeIndex == 2" /> -->
-          <div style="text-align:center;">
+          <div :style="$store.state.themeName === 'dark' ? 'text-align:center;' : 'text-align:center;background:#fff;'">
             <StandAloneImg class="sai" v-show="InfoBtns.activeIndex != 0" :activeIndex="InfoBtns.activeIndex" @selectSvg="selectSvg"></StandAloneImg>
           </div>
           <generator class="saig" v-show="InfoBtns.activeIndex != 0" :index="InfoBtns.activeIndex" :data="sourceMap"></generator>

src/views/singleAnalysis/index.vue

@@ -43,7 +43,7 @@
       <ComTable height="78vh" :data="tableData">
         <template v-slot:tr v-if="tableData.data.length > 0">
           <tr>
-            <td v-for="(item, index) in tableData.column" key="index">
+            <td v-for="(item, index) in tableData.column" :key="index">
               {{ tableDataEnd[item.field] }}
             </td>
           </tr>