Browse Source

经济运行首页 绿色版本,相关图标还有图表颜色调整一下,状态转换分析,每个风机一个横向柱图,用不同颜色表示状态,鼠标悬停有显示

sunzehao 2 days ago
parent
commit
f40f1e0bc7

+ 2 - 2
src/views/economicsOperation/nxfHomePage/component/multiple-bar-chart.vue

@@ -283,7 +283,7 @@
                 let chart = echarts.init(this.$el);
 
                 let option = {
-                    color: this.color,
+                    color: this.$store.state.moreSty !== 'greenSty' ? this.color : ["#21bb4c", "#67b9ff"],
                     tooltip: {
                         trigger: "axis",
                         backgroundColor: this.$store.state.themeName === "dark" ?
@@ -370,7 +370,7 @@
         },
 
         watch: {
-            "$store.state.themeName"() {
+            "$store.state.moreSty"() {
                 let myChart = echarts.init(document.getElementById(this.id));
                 myChart.dispose();
                 setTimeout(() => {

+ 4 - 3
src/views/economicsOperation/nxfHomePage/component/multiple-y-line-chart-normal.vue

@@ -286,6 +286,7 @@ export default {
       id: "",
       chart: null,
       color: ["#2999a0", "#67b9ff", "#ff6271", "#05b2fa", "#0ef167","#05bb4c", "#4b55ae", "#EDB32F", "#DB5520", "#323E6F",  ],
+    color1: ["#21bb4c", "#67b9ff"]
     };
   },
   computed: {
@@ -354,7 +355,7 @@ export default {
           zlevel: index,
           lineStyle: {
             normal: {
-              color: this.color[index],
+              color: this.$store.state.moreSty !== 'greenSty' ? this.color[index] : this.color1[index],
               width: 2,
             },
           },
@@ -386,7 +387,7 @@ export default {
     },
     option: function () {
       return {
-        color: this.color,
+        color: this.$store.state.moreSty !== 'greenSty' ? this.color : this.color1,
         tooltip: {
           trigger: "axis",
           backgroundColor:
@@ -472,7 +473,7 @@ export default {
   },
 
   watch: {
-    "$store.state.themeName"() {
+    "$store.state.moreSty"() {
       this.initChart();
     },
   },

+ 36 - 12
src/views/economicsOperation/nxfHomePage/component/percent-bar.vue

@@ -38,6 +38,7 @@
             return {
                 id: "",
                 chart: null,
+                statemoreSty: 1
             };
         },
         computed: {
@@ -112,16 +113,8 @@
                             itemStyle: {
                                 normal: {
                                     // color: "rgb(81, 81, 81)",
-                                    color: function(params) {
-                                        var colorList = [
-                                            new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                                offset: 0, color: 'rgb(33, 107, 214)' // 颜色渐变
-                                            }, {
-                                                offset: 1, color: 'rgb(110, 205, 243)'   // 颜色渐变
-                                            }]),
-                                            // ... 可以定义更多的颜色渐变
-                                        ];
-                                        return colorList[params.dataIndex % colorList.length];
+                                    color: (params) => {
+                                        return this.getLineare(params)
                                     }
                                 },
                             },
@@ -137,7 +130,9 @@
                                     name: "",
                                     itemStyle: {
                                         // color: "rgb(33, 105, 195)",
-                                        background: "linear-gradient(rgb(33, 107, 214), rgb(110, 205, 243))",
+                                        background: this.$store.state.moreSty === 'greenSty' ? 
+                                        "linear-gradient(rgb(33, 107, 214), rgb(110, 205, 243))" : 
+                                        "linear-gradient(rgb(81, 232, 166), rgb(36, 215, 129))",
                                     },
                                     label: {
                                         show: false,
@@ -177,6 +172,30 @@
 
                 chart.setOption(option);
             },
+            getLineare(params) {
+                let that = this
+                var colorList = []
+                if (that.statemoreSty !== 1) {
+                    colorList = [
+                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0, color: 'rgb(33, 107, 214)' // 颜色渐变
+                        }, {
+                            offset: 1, color: 'rgb(110, 205, 243)'   // 颜色渐变
+                        }]),
+                        // ... 可以定义更多的颜色渐变
+                    ];
+                } else {
+                    colorList = [
+                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                            offset: 0, color: 'rgb(81, 232, 166)' // 颜色渐变
+                        }, {
+                            offset: 1, color: 'rgb(36, 215, 129)'   // 颜色渐变rgb(36, 215, 129)
+                        }]),
+                        // ... 可以定义更多的颜色渐变
+                    ];
+                }
+                return colorList[params.dataIndex % colorList.length];
+            }
         },
         mounted() {
             this.$nextTick(() => {
@@ -191,7 +210,12 @@
             });
         },
         watch: {
-            "$store.state.themeName"() {
+            "$store.state.moreSty"(val) {
+                if (val === 'greenSty') {
+                    this.statemoreSty = 1
+                } else {
+                    this.statemoreSty = 2
+                }
                 this.initChart();
             },
         },

+ 14 - 8
src/views/economicsOperation/nxfHomePage/component/percent-card-2.vue

@@ -6,16 +6,16 @@
         </div>
         <div class="card-info">
             <div class="card-value">
-                <span class="value-text newBlue">{{ TotalText }}</span>
-                <span class="newwhite">{{ TotalValue.toFixed(2) }}</span>
+                <span class="value-text newBlue" :data-type="$store.state.moreSty">{{ TotalText }}</span>
+                <span class="newwhite" :data-type="$store.state.moreSty">{{ TotalValue.toFixed(2) }}</span>
             </div>
             <div class="card-value">
-                <span class="value-text newBlue">{{ ActualText }}</span>
-                <span class="newwhite">{{ ActualValue * 10 }}</span>
+                <span class="value-text newBlue" :data-type="$store.state.moreSty">{{ ActualText }}</span>
+                <span class="newwhite" :data-type="$store.state.moreSty">{{ ActualValue * 10 }}</span>
             </div>
             <div class="card-value">
-                <span class="value-text newBlue">{{ PercentText }}</span>
-                <span class="newwhite">{{ PercentValue }}</span>
+                <span class="value-text newBlue" :data-type="$store.state.moreSty">{{ PercentText }}</span>
+                <span class="newwhite" :data-type="$store.state.moreSty">{{ PercentValue }}</span>
             </div>
         </div>
     </div>
@@ -113,10 +113,16 @@
                     margin-right: 10px;
                     font-family: @font-family-num;
                 }
-                .newBlue{
+                .newBlue[data-type~="greenSty"] {
+                    color: #4dbb58;
+                }
+                .newBlue[data-type~="blueSty"] {
                     color: #4d72bb;
                 }
-                .newwhite{
+                .newwhite[data-type~="greenSty"] {
+                    color: #c3ffd8;
+                }
+                .newwhite[data-type~="blueSty"] {
                     color: #c3e1ff;
                 }
             }

+ 57 - 0
src/views/economicsOperation/windAnalyse/timeTransition/dataJson1.json

@@ -0,0 +1,57 @@
+{
+    "msg": "成功",
+    "code": 200,
+    "data": {
+      "total": 3,
+      "current": 1,
+      "size": 3,
+      "data": {
+        "风风机1": [
+          {
+            "tbname": null,
+            "startTime": 1741243599889,
+            "endTime": 1741243699889,
+            "event": 1,
+            "advanceState": null,
+            "afterState": null,
+            "userFlag": null,
+            "time": 12000,
+            "stationId": "风风机1",
+            "equipmentId": "风风机1",
+            "stateType": null,
+            "hour": null
+          },
+          {
+            "tbname": null,
+            "startTime": 1741243599889,
+            "endTime": 1741243699889,
+            "event": 1,
+            "advanceState": null,
+            "afterState": null,
+            "userFlag": null,
+            "time": 13000,
+            "stationId": "风风机1",
+            "equipmentId": "风风机1",
+            "stateType": null,
+            "hour": null
+          }
+        ],
+        "风风机2": [
+          {
+            "tbname": null,
+            "startTime": 1741243599889,
+            "endTime": 1741243699889,
+            "event": 2,
+            "advanceState": null,
+            "afterState": null,
+            "userFlag": null,
+            "time": 21000,
+            "stationId": "风风机2",
+            "equipmentId": "风风机2",
+            "stateType": null,
+            "hour": null
+          }
+        ]
+      }
+    }
+  }

+ 10 - 5
src/views/economicsOperation/windAnalyse/timeTransition/index.vue

@@ -125,7 +125,7 @@ import {
   getApiwpByCplistlist,
 } from "@/api/monthlyPerformanceAnalysis";
 import dayjs from "dayjs";
-import dataJson from "./dataJson.json"
+import dataJson from "./dataJson1.json"
 export default {
   name: "PerformanceAssess",
   data() {
@@ -145,10 +145,11 @@ export default {
     };
   },
   mounted() {
-    this.EvaluationData = dataJson.data.data.records;
-      this.page.total = dataJson.data.data.total;
+    // this.EvaluationData = dataJson.data.data.records;
+    //   this.page.total = dataJson.data.data.total;
     this.getCompanyData();
     this.pickerTimer = dayjs().add(-1, "day").startOf("date");
+    this.changeData(dataJson.data)
   },
   computed: {
     pageHeight() {
@@ -251,7 +252,10 @@ export default {
         pageSize: this.page.pagesize,
       };
       const { data: datas } = await getApiphotovoltaicTimelist(params);
-      if (datas && datas.data) {
+      this.changeData(datas)
+    },
+    changeData(datas) {
+        if (datas && datas.data) {
         let arr = [];
         for (let i in datas.data) {
           let obj = {
@@ -441,7 +445,8 @@ export default {
     }
     .comStr {
       display: inline-block;
-      // width: 10px;
+    //   width: 10px;
+    //   width: 100%;
       height: 20px;
     }
     .daijiStr {