修改供电数据看板左下角图表

src/views/power_supply/dataBoard/dataBoard.vue

@@ -2,7 +2,7 @@
   <div class="main1">
     <div class="header">
       <div class="select-veido">
-        <el-select
+        <el-select 
           style="margin-top: 10px"
           v-model="currentChartId"
           placeholder="请选择"
@@ -10,7 +10,7 @@
           :popper-append-to-body="false"
         >
           <el-option
-            v-for="item in chartOptions"
+            v-for="item in loopOptions"
             :key="item.id"
             :label="item.label"
             :value="item.id"
@@ -52,15 +52,31 @@ import rightChart from "@/views/power_supply/dataBoard/rightChart";
 export default {
   data() {
     return {
-      currentChartId: "流量",
-      chartOptions: [
+      currentChartId: "瓦斯抽采泵站",
+      loopOptions: [
         {
           id: "1",
-          label: "流量",
+          label: "瓦斯抽采泵站",
         },
         {
           id: "2",
-          label: "浓度",
+          label: "空压机房",
+        },
+        {
+          id: "3",
+          label: "矸石驱动机房",
+        },
+        {
+          id: "4",
+          label: "1#进线",
+        },
+        {
+          id: "5",
+          label: "四盘区二号水泵机房",
+        },
+        {
+          id: "6",
+          label: "乏风热泵机房",
         },
       ],
     };
@@ -82,7 +98,7 @@ export default {
 </script>
 <style scoped>
 .select-veido .el-select {
-  width: 100px;
+  width: 200px;
   margin-left: 10px;
 }
 .select-veido >>> .el-input--small .el-input__inner {

src/views/power_supply/dataBoard/leftChart.vue

@@ -1,5 +1,21 @@
 <template>
   <div>
+    <div class="select-veido">
+      <el-select
+      style="margin-top:10px"
+      v-model="currentChartId"
+      placeholder="请选择"
+      @change="selectParm"
+    >
+      <el-option
+        v-for="item in parmoptions"
+        :key="item.id+''"
+        :label="item.label"
+        :value="item.id"
+      >
+      </el-option>
+    </el-select>
+    </div>
     <div
       ref="testLine"
       style="width: 450px; height: 400px; margin: 0px auto"
@@ -13,17 +29,29 @@ import { mapState } from "vuex";
 export default {
   data() {
     return {
-      type: {
-        name1: "chouqiliuliang_after",
-        name2: "paiqiliuliang_after",
-      },
-      gasId: "35",
-      title: "流量",
-      gasUnit: "%",
-      currentChartId: "流量",
-      currentChartTitle: "流量",
-      paiqidata: new Array(30).fill("-"),
-      chouqidata: new Array(30).fill("-"),
+      parmoptions: [
+        {
+          id: 1,
+          label: "负荷",
+        },
+        {
+          id: 2,
+          label: "电压",
+        },
+        {
+          id: 3,
+          label: "电流",
+        },
+        {
+          id: 4,
+          label: "功率因数",
+        },
+      ],
+      type: "fuhe_after",
+      unit:'',
+      currentChartId: "负荷",
+      currentChartTitle: "负荷",
+      yData: new Array(30).fill("-"),
       xData: new Array(30).fill("-"),
       count: 0,
       myChart: null,
@@ -48,7 +76,7 @@ export default {
             "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
           formatter: (params) => {
             console.log("params", params);
-            var result = `${this.title}：${params[0].data}${this.gasUnit} <br/>`;
+            var result = `${this.title}：${params[0].data}${this.unit} <br/>`;
             return result;
           },
         },
@@ -56,7 +84,7 @@ export default {
           orient: "vertical",
           x: "left",
           y: "top",
-          data: ["抽气流量", "排气流量"],
+          // data: ["抽气流量", "排气流量"],
           textStyle: {
             fontWeight: "normal",
             color: "#fff",
@@ -103,7 +131,7 @@ export default {
           },
         ],
         title: {
-          text: "管道流量/浓度",
+          text: this.title,
           padding: [5, 230],
           textStyle: {
             fontWeight: "normal", //标题颜色
@@ -113,7 +141,7 @@ export default {
 
         series: [
           {
-            name: "抽气流量",
+            name: this.title,
             type: "line",
             symbol: "none",
             markPoint: {
@@ -156,52 +184,7 @@ export default {
             areaStyle: { normal: { color: "#41D6C3", opacity: 0.5 } },
             connectNulls: true,
             data: [],
-          },
-          {
-            name: "排气流量",
-            type: "line",
-            symbol: "none",
-            markPoint: {
-              label: {
-                normal: {
-                  show: true,
-                  backgroundColor: "#fff",
-                  position: "top",
-                  color: "#5AAAFA",
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 1,
-                  padding: 8,
-                  formatter: `{b}: {c} `,
-                },
-              },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
-              },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
-            },
-            lineStyle: { normal: { color: "#CD5C5C", width: 1 } },
-            // lineStyle: {
-            //   width: 2,
-            //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-            //     {
-            //       offset: 0,
-            //       color: "#9effff",
-            //     },
-            //     {
-            //       offset: 1,
-            //       color: "#9E87FF",
-            //     },
-            //   ]),
-            // },
-            areaStyle: { normal: { color: "#CD5C5C", opacity: 0.5 } },
-            connectNulls: true,
-            data: [],
-          },
+          }
         ],
       },
     };
@@ -221,6 +204,38 @@ export default {
       // 开启一个新的
       // this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${id}`);
       // this.initWebSocket();
+    },
+    // 选择要展示的参数
+    selectParm() {
+      for (let i in this.parmoptions) {
+        if (this.parmoptions[i].id == this.currentChartId) {
+          this.currentChartTitle = this.parmoptions[i].label;
+          break;
+        }
+      }
+      switch (currentChartId) {
+        case '1':
+          this.unit = "kvar";
+          this.type = "fuhe_after";
+          break
+        case '2':
+          this.unit = "kV";
+          this.type = "dianya_after";
+          break
+        case '3':
+          this.unit = "A";
+          this.type = "dianliu_after";
+          break
+        case '4':
+          this.unit = "";
+          this.type = "gonglvyinshu_after";
+          break
+      }
+        this.count = 0;
+        this.xData = new Array(30).fill("-");
+        this.yData = new Array(30).fill("-");
+        
+  
     },
     addData(data) {
       this.websocket;
@@ -228,18 +243,15 @@ export default {
       console.log("data", data);
       if (this.count < 30) {
         for (let i = 0; i < data.length; i++) {
-          this.paiqidata[this.count] = data[i][this.type["name1"]];
-          this.chouqidata[this.count] = data[i][this.type["name2"]];
+          this.yData[this.count] = data[i][this.type];
           this.xData[this.count] = data[i]["date"].split(" ")[1];
         }
         this.count++;
       } else {
         for (let i = 0; i < data.length; i++) {
           // 删除数组中的第一个项目
-          this.paiqidata.shift();
-          this.paiqidata.push(data[i][this.type["name1"]]);
-          this.chouqidata.shift();
-          this.chouqidata.push(data[i][this.type["name2"]]);
+          this.yData.shift();
+          this.yData.push(data[i][this.type]);
           this.xData.shift();
           this.xData.push(data[i]["date"].split(" ")[1]);
         }
@@ -252,13 +264,9 @@ export default {
         ],
         series: [
           {
-            name: "抽气流量",
-            data: this.chouqidata,
-          },
-          {
-            name: "排气流量",
-            data: this.paiqidata,
-          },
+            name: this.unit,
+            data: this.yData,
+          }
         ],
       });
       // console.log("this.paiqidata", this.paiqidata);