对标分析-白色版

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

@@ -79,11 +79,11 @@
 		}
 		input[type="checkbox"]{
 			background: @white;
-			border-color: @white;
+			border-color: @gray-l;
 		}
 	} 
 	
-	.decision-page-2{
+	.decision-page-2,.decision-page-3,.decision-page-4{
 		.com-panel{
 			border-radius:0;
 			padding:0;
@@ -92,4 +92,26 @@
 	.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/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/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/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>