主通风和压风系统数据看板的修改

src/common/oneline.vue

@@ -31,9 +31,6 @@ export default {
 },
   data() {
     return {
-      title:'',
-      type: [],
-      unit:'°C',
       currentChartId: 1,
       xData: new Array(30).fill("-"),
       yData: new Array(30).fill("-"),
@@ -64,6 +61,13 @@ export default {
             return result;
           },
         },
+        grid: {
+        	top: '15%',
+        	left: '10%',
+        	right: '10%',
+        	bottom: '1%',
+        	containLabel: true
+        },
         legend: {
           orient: "vertical",
           x: "left",
@@ -116,59 +120,63 @@ export default {
         ],
         title: {
           text: this.title,
-          padding: [5, 230],
+          padding: [5, 170],
           textStyle: {
             fontWeight: "normal", //标题颜色
             color: "#4ADEFE",
+            fontSize:15
           },
         },
 
         series: [
-          {
-            // name: this.title,
+         {
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 102, 102,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 102, 102, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
-          }
+          },
         ],
       },
     };

src/common/threeline.vue

@@ -1,5 +1,5 @@
 <template>
-<!-- 三条曲线封装 -->
+  <!-- 三条曲线封装 -->
   <div>
     <div
       ref="testLine"
@@ -12,33 +12,30 @@
 import { mapState } from "vuex";
 
 export default {
-props: {
+  props: {
     title: {
-      type:String,
-      default:''
+      type: String,
+      default: "",
     },
-    id:{
-      type:Number,
-      required:true
+    id: {
+      type: Number,
+      required: true,
     },
-    unit:{
-      type:String,
-      default:''
+    unit: {
+      type: String,
+      default: "",
     },
-    type:{
-      type:Array,
-      required:true
+    type: {
+      type: Array,
+      required: true,
     },
-    legend:{
-      type:Array,
-      required:true
+    legend: {
+      type: Array,
+      required: true,
     },
-},
+  },
   data() {
     return {
-      title: this.title,
-    //   type: ["xzhou_after", "yzhou_after", "zzhou_after"],
-            type:'',
       currentChartId: 1,
       xData: new Array(30).fill("-"),
       y1Data: new Array(30).fill("-"),
@@ -47,39 +44,117 @@ props: {
       count: 0,
       myChart: null,
       option: {
-        color: ["#41D6C3", "#FA8072"],
         tooltip: {
           trigger: "axis",
+          backgroundColor: "transparent",
           axisPointer: {
-            type: "cross",
-            label: {
-              backgroundColor: "#6a7985",
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(126,199,255,0)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(126,199,255,1)", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(126,199,255,0)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
           },
-          backgroundColor: "#fff",
-          padding: 10,
-          textStyle: {
-            fontSize: 12,
-            color: "#152934",
-            lineHeight: 24,
-          },
-          extraCssText:
-            "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.unit} <br/>`;
-            return result;
+          formatter: (p) => {
+            let dom = `<div style="width: 79px;
+	height: 110px;;color:#fff;position: relative;">
+	<svg style="position: absolute;top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100"
+		height="111" viewBox="0 0 80 85">
+		<defs>
+			<style>
+				.cls-1 {
+					fill: #07172c;
+					fill-opacity: 0.8;
+					stroke: #a7d8ff;
+					stroke-linejoin: round;
+					stroke-opacity: 0.2;
+					stroke-width: 1px;
+					fill-rule: evenodd;
+				}
+			</style>
+		</defs>
+		<path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
+			transform="translate(-258.5 -592.5)" />
+	</svg>
+	<div style="padding: 3px 1px 3px 11px;display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;position: relative;z-index: 1;">
+		<div
+			style="margin-bottom: 4px;width:100%;display:${
+        p[0] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[0] ? p[0].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[0] ? p[0].data : ""}</span>
+		</div>
+		<div
+			style="width:100%;height:100%;display:${
+        p[1] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[1] ? p[1].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[1] ? p[1].data : ""}</span>
+		</div>
+		<div
+			style="width:100%;height:100%;display:${
+        p[1] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[2] ? p[2].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[2] ? p[2].data : ""}</span>
+		</div>
+	</div>
+</div>`;
+            return dom;
           },
         },
         legend: {
-          orient: "vertical",
-          x: "left",
-          y: "top",
-          data: this.legend,
+          align: "left",
+          right: "10%",
+          top: "10%",
+          type: "plain",
           textStyle: {
-            fontWeight: "normal",
-            color: "#fff",
+            color: "#7ec7ff",
+            fontSize: 11,
           },
+          // icon:'rect',
+          itemGap: 25,
+          itemWidth: 18,
+          icon:
+            "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
+
+          data: this.legend,
+        },
+        grid: {
+        	top: '15%',
+        	left: '10%',
+        	right: '10%',
+        	bottom: '1%',
+        	containLabel: true
         },
         yAxis: [
           {
@@ -123,147 +198,160 @@ props: {
         ],
         title: {
           text: this.title,
-          padding: [5, 230],
+          padding: [5, 170],
           textStyle: {
             fontWeight: "normal", //标题颜色
             color: "#4ADEFE",
+            fontSize:15
           },
         },
 
         series: [
           {
-            // name: this.title,
+            name: this.legend[0],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 102, 102,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 102, 102, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
           {
-            // name: this.title,
+            name: this.legend[1],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 255, 0,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 255, 0,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 255, 0,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 255, 0, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 255, 0, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
           {
-            // name: this.title,
+            name: this.legend[2],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(0, 102, 153,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(0, 102, 153,1)",
+              borderColor: "#3578e5",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 102, 153,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0, 102, 153, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 102, 153, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
         ],
@@ -291,9 +379,9 @@ props: {
     },
 
     addData(data) {
-      this.websocket;
+      // this.websocket;
       // 先扩展数组，然后删除多余元素
-      console.log("data", data);
+      console.log("datathree", data);
       if (this.count < 30) {
         for (let i = 0; i < data.length; i++) {
           this.y1Data[this.count] = data[i][this.type[0]];
@@ -323,20 +411,20 @@ props: {
         ],
         series: [
           {
-            name: this.unit,
+            name: this.legend[0],
             data: this.y1Data,
           },
           {
-            name: this.unit,
+            name: this.legend[1],
             data: this.y2Data,
           },
           {
-            name: this.unit,
+            name: this.legend[2],
             data: this.y3Data,
-          }
+          },
         ],
       });
-      // console.log("this.paiqidata", this.paiqidata);
+      // console.log("this.y1Data", this.y1Data);
       // console.log("this.chouqidata", this.chouqidata);
       // console.log("this.xData", this.xData);
     },
@@ -355,7 +443,7 @@ props: {
       };
       // 收到消息的回调
       this.websocket.onmessage = (event) => {
-        // console.log("onmessage", event);
+        console.log("onmessage", event);
         if (JSON.parse(event.data).length) {
           this.addData(JSON.parse(event.data));
         }
@@ -376,7 +464,9 @@ props: {
     // 先画图
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
+    this.websocket = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+    );
     this.initWebSocket();
   },
 };
@@ -386,9 +476,11 @@ props: {
   width: 100px;
   margin-left: 10px;
 }
+
 .select-veido >>> .el-input--small .el-input__inner {
   background: none;
 }
+
 .select-veido >>> .el-input__inner {
   border: 0;
 }

src/common/twoline.vue

@@ -1,83 +1,158 @@
 <template>
-  <div>
-    <div
-      ref="testLine"
-      style="width: 450px; height: 200px; margin: 0px auto"
-    ></div>
-  </div>
+	<!-- 两条曲线封装 且需要两个websocket连接 -->
+	<div>
+		<div ref="testLine" style="width: 450px; height: 200px; margin: 0px auto"></div>
+	</div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+	import {
+		mapState
+	} from "vuex";
 
-export default {
-  props: {
-    title: {
-      type:String,
-      default:''
-    },
-    id:{
-      type:Number,
-      required:true
-    },
-    unit:{
-      type:String,
-      default:''
-    },
-    type:{
-      type:Array,
-      required:true
-    },
-    legend:{
-      type:Array,
-      required:true
-    },
-},
-  data() {
-    return {
-      title:'',
-      type: [],
-      unit:'°C',
-      currentChartId: 1,
-      xData: new Array(30).fill("-"),
-      y1Data: new Array(30).fill("-"),
-      y2Data: new Array(30).fill("-"),
-      count: 0,
-      myChart: null,
-      option: {
-        color: ["#41D6C3", "#FA8072"],
+	export default {
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			id: {
+				type: Number,
+				required: true
+			},
+			unit: {
+				type: String,
+				default: ''
+			},
+			type: {
+				type: Array,
+				required: true
+			},
+			legend: {
+				type: Array,
+				required: true
+			},
+		},
+		data() {
+			return {
+				currentChartId: 1,
+				xData: new Array(30).fill("-"),
+				y1Data: new Array(30).fill("-"),
+				y2Data: new Array(30).fill("-"),
+				count: 0,
+				myChart: null,
+				option: {
         tooltip: {
           trigger: "axis",
+          backgroundColor: "transparent",
           axisPointer: {
-            type: "cross",
-            label: {
-              backgroundColor: "#6a7985",
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(126,199,255,0)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(126,199,255,1)", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(126,199,255,0)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
           },
-          backgroundColor: "#fff",
-          padding: 10,
-          textStyle: {
-            fontSize: 12,
-            color: "#152934",
-            lineHeight: 24,
-          },
-          extraCssText:
-            "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.unit} <br/>`;
-            return result;
+          formatter: (p) => {
+            let dom = `<div style="width: 79px;
+	height: 110px;;color:#fff;position: relative;">
+	<svg style="position: absolute;top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100"
+		height="111" viewBox="0 0 80 85">
+		<defs>
+			<style>
+				.cls-1 {
+					fill: #07172c;
+					fill-opacity: 0.8;
+					stroke: #a7d8ff;
+					stroke-linejoin: round;
+					stroke-opacity: 0.2;
+					stroke-width: 1px;
+					fill-rule: evenodd;
+				}
+			</style>
+		</defs>
+		<path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
+			transform="translate(-258.5 -592.5)" />
+	</svg>
+	<div style="padding: 3px 1px 3px 11px;display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;position: relative;z-index: 1;">
+		<div
+			style="margin-bottom: 4px;width:100%;display:${
+        p[0] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[0] ? p[0].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[0] ? p[0].data : ""}</span>
+		</div>
+		<div
+			style="width:100%;height:100%;display:${
+        p[1] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[1] ? p[1].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[1] ? p[1].data : ""}</span>
+		</div>
+		<div
+			style="width:100%;height:100%;display:${
+        p[1] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[2] ? p[2].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[2] ? p[2].data : ""}</span>
+		</div>
+	</div>
+</div>`;
+            return dom;
           },
         },
         legend: {
-          orient: "vertical",
-          x: "left",
-          y: "top",
-          data: [],
+          align: "left",
+          right: "10%",
+          top: "10%",
+          type: "plain",
           textStyle: {
-            fontWeight: "normal",
-            color: "#fff",
+            color: "#7ec7ff",
+            fontSize: 11,
           },
+          // icon:'rect',
+          itemGap: 25,
+          itemWidth: 18,
+          icon:
+            "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
+
+          data: this.legend,
+        },
+        grid: {
+          top: "15%",
+          left: "10%",
+          right: "10%",
+          bottom: "15%",
+          // containLabel: true
         },
         yAxis: [
           {
@@ -125,217 +200,225 @@ export default {
           textStyle: {
             fontWeight: "normal", //标题颜色
             color: "#4ADEFE",
+			fontSize:15
           },
         },
 
         series: [
           {
-            // name: this.title,
+            name: this.legend[0],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 102, 102,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 102, 102, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
           {
-            // name: this.title,
+            name: this.legend[1],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(0, 102, 153,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(0, 102, 153,1)",
+              borderColor: "#3578e5",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 102, 153,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0, 102, 153, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 102, 153, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
-          }
+          },
         ],
       },
-    };
-  },
-  computed: {
-    ...mapState(["websocketIP"]),
-  },
-  methods: {
-    idChange(id) {
-      console.log("sep", id);
-      // 数据清空
-      this.xData = new Array(30).fill("-");
-      this.y1Data = new Array(30).fill("-");
-      this.y2Data = new Array(30).fill("-");
-      // 关闭以前的websocket
-      this.websocket.close();
-      // 开启一个新的
-      this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
-      this.initWebSocket();
-    },
+			};
+		},
+		computed: {
+			...mapState(["websocketIP"]),
+		},
+		methods: {
+			idChange(id) {
+				//  console.log('this.legend',this.legend[0]);
+				console.log("sep", id);
+				// 数据清空
+				this.xData = new Array(30).fill("-");
+				this.y1Data = new Array(30).fill("-");
+				this.y2Data = new Array(30).fill("-");
+				// 关闭以前的websocket
+				this.websocket.close();
+				// 开启一个新的
+				this.websocket = new WebSocket(
+					`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+				);
+				this.initWebSocket();
+			},
 
-    addData(data) {
-      this.websocket;
-      // 先扩展数组，然后删除多余元素
-      console.log("data", data);
-      if (this.count < 30) {
-        for (let i = 0; i < data.length; i++) {
-          this.y1Data[this.count] = data[i][this.type[0]];
-          this.y2Data[this.count] = data[i][this.type[1]];
-          this.xData[this.count] = data[i]["date"].split(" ")[1];
-        }
-        this.count++;
-      } else {
-        for (let i = 0; i < data.length; i++) {
-          // 删除数组中的第一个项目
-          this.y1Data.shift();
-          this.y1Data.push(data[i][this.type[0]]);
-          this.y2Data.shift();
-          this.y2Data.push(data[i][this.type[1]]);
-          this.xData.shift();
-          this.xData.push(data[i]["date"].split(" ")[1]);
-        }
-      }
-      this.myChart.setOption({
-        legend:{
-          data:this.legend
-        },
-        xAxis: [
-          {
-            data: this.xData,
-          },
-        ],
-        series: [
-          {
-            name: this.unit,
-            data: this.y1Data,
-          },
-          {
-            name: this.unit,
-            data: this.y2Data,
-          }
-        ],
-      });
-      // console.log("this.paiqidata", this.paiqidata);
-      // console.log("this.chouqidata", this.chouqidata);
-      // console.log("this.xData", this.xData);
-    },
-    initWebSocket() {
-      // 连接错误
-      this.websocket.onerror = () => {
-        console.log(
-          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
-        );
-      };
-      // 连接成功
-      this.websocket.onopen = () => {
-        console.log(
-          "WebSocket连接成功    状态码：" + this.websocket.readyState
-        );
-      };
-      // 收到消息的回调
-      this.websocket.onmessage = (event) => {
-        // console.log("onmessage", event);
-        if (JSON.parse(event.data).length) {
-          this.addData(JSON.parse(event.data));
-        }
-      };
-      // 连接关闭的回调
-      this.websocket.onclose = () => {
-        console.log(
-          "WebSocket连接关闭    状态码：" + this.websocket.readyState
-        );
-      };
-      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
-      this.$once("hook:beforeDestroy", () => {
-        this.websocket.close();
-      });
-    },
-  },
-  mounted() {
-    // 先画图
-    this.myChart = this.$echarts.init(this.$refs.testLine);
-    this.myChart.setOption(this.option);
-    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
-    this.initWebSocket();
-  },
-};
+			addData(data) {
+				this.websocket;
+				// 先扩展数组，然后删除多余元素
+				console.log("data", data);
+				if (this.count < 30) {
+					for (let i = 0; i < data.length; i++) {
+						this.y1Data[this.count] = data[i][this.type[0]];
+						this.y2Data[this.count] = data[i][this.type[1]];
+						this.xData[this.count] = data[i]["date"].split(" ")[1];
+					}
+					this.count++;
+				} else {
+					for (let i = 0; i < data.length; i++) {
+						// 删除数组中的第一个项目
+						this.y1Data.shift();
+						this.y1Data.push(data[i][this.type[0]]);
+						this.y2Data.shift();
+						this.y2Data.push(data[i][this.type[1]]);
+						this.xData.shift();
+						this.xData.push(data[i]["date"].split(" ")[1]);
+					}
+				}
+				this.myChart.setOption({
+					xAxis: [{
+						data: this.xData,
+					}, ],
+					series: [{
+							name: this.legend[0],
+							data: this.y1Data,
+						},
+						{
+							name: this.legend[1],
+							data: this.y2Data,
+						}
+					],
+				});
+				// console.log("this.paiqidata", this.paiqidata);
+				// console.log("this.chouqidata", this.chouqidata);
+				// console.log("this.xData", this.xData);
+			},
+			initWebSocket() {
+				// 连接错误
+				this.websocket.onerror = () => {
+					console.log(
+						"WebSocket连接发生错误   状态码：" + this.websocket.readyState
+					);
+				};
+				// 连接成功
+				this.websocket.onopen = () => {
+					console.log(
+						"WebSocket连接成功    状态码：" + this.websocket.readyState
+					);
+				};
+				// 收到消息的回调
+				this.websocket.onmessage = (event) => {
+					// console.log("onmessage", event);
+					if (JSON.parse(event.data).length) {
+						this.addData(JSON.parse(event.data));
+					}
+				};
+				// 连接关闭的回调
+				this.websocket.onclose = () => {
+					console.log(
+						"WebSocket连接关闭    状态码：" + this.websocket.readyState
+					);
+				};
+				// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+				this.$once("hook:beforeDestroy", () => {
+					this.websocket.close();
+				});
+			},
+		},
+		mounted() {
+			// 先画图
+			this.myChart = this.$echarts.init(this.$refs.testLine);
+			this.myChart.setOption(this.option);
+			this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
+			this.initWebSocket();
+		},
+	};
 </script>
 <style scoped>
-.select-veido .el-select {
-  width: 100px;
-  margin-left: 10px;
-}
-.select-veido >>> .el-input--small .el-input__inner {
-  background: none;
-}
-.select-veido >>> .el-input__inner {
-  border: 0;
-}
+	.select-veido .el-select {
+		width: 100px;
+		margin-left: 10px;
+	}
+
+	.select-veido>>>.el-input--small .el-input__inner {
+		background: none;
+	}
+
+	.select-veido>>>.el-input__inner {
+		border: 0;
+	}
 </style>

src/router/index.js

@@ -394,7 +394,7 @@ export default new Router({
                 import('../views/auxiliary_transport/dataStandard/dataQualityMeasurePoint.vue'),
         }, {
             path: '/beam_tube',
-            name: ' 束管检测',
+            name: ' 矿压监测系统',
             id: 109,
             component: () =>
                 import('../views/beam_tube/beam.vue'),

src/store/index.js

@@ -5,7 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    websocketIP: "10.170.49.105:8081",
+    websocketIP: "10.170.39.226:8081",
   },
   mutations: {
 

src/views/beam_tube/beam.vue

@@ -1,5 +1,8 @@
 <template>
   <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+     <el-tab-pane label="系统图" name="third">
+      <tablePage></tablePage>
+    </el-tab-pane>
     <el-tab-pane label="系统数据" name="first">系统数据</el-tab-pane>
     <el-tab-pane label="数据标准" name="second">
       <dataStandard></dataStandard>
@@ -10,6 +13,7 @@
 
 <script>
 import dataStandard from "./dataStandard/dataStandard";
+import tablePage from './configImg/TablePage'
     export default {
       name: "beam",
       data() {
@@ -23,7 +27,8 @@ import dataStandard from "./dataStandard/dataStandard";
         }
       },
       components: {
-            dataStandard
+            dataStandard,
+            tablePage
       }
     };
 </script>

src/views/beam_tube/configImg/MsgInfo.vue

@@ -0,0 +1,50 @@
+<template>
+        <ul class="msg_list">
+          <li class="fyx">辅运巷</li>
+          <li class="zyx">主运巷</li>
+          <li class="gzm">工作面</li>
+          <li class="qy">切眼1300m（暂定）</li>
+          <li class="tcx">停采0m</li>
+          <li class="hfx">回风巷</li>
+        </ul>
+</template>
+
+<script>
+export default {
+    name:'MsgInfo'
+}
+</script>
+
+<style lang="less" scoped>
+.msg_list{
+  list-style: none;
+  width: 100px;
+  height: 580px;
+  position: absolute;
+  top: -55px;
+  right: 90px;
+  padding: 0;
+  .fyx{
+      margin: 20px 0 20px 0;
+  }
+  .zyx{
+      margin: 50px 0 20px 0;
+  }
+  .gzm{
+      margin: 200px 0 20px 0;
+  }
+  .qy{
+      width: 200px;
+      position: absolute;
+      bottom: 70px;
+  }
+  .tcx{
+      position: absolute;
+      bottom: 70px;
+      left: -1500px;
+  }
+  .hfx{
+      margin: 200px 0 0 0;
+  }
+}
+</style>

src/views/beam_tube/configImg/TablePage.vue

@@ -0,0 +1,530 @@
+<template>
+  <div id="main">
+      <div class="com-container">
+        <div class="com-chart">
+          <div class="first" ref="seller_ref1"></div>
+          <div class="second" ref="seller_ref2"></div>
+          <div class="third" ref="seller_ref3"></div>
+          <div class="fourth" ref="seller_ref4"></div>
+          <div class="bgc">
+            <div id="bgc_left" class="untoken"></div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="bottom_chart five" ref="myChart"></div>
+          <div class="bottom_chart six" ref="myChart2"></div>
+          <div class="bottom_chart seven" ref="seller_ref7"></div>
+          <div class="bottom_chart eight" ref="seller_ref8">
+              <div class="warning_info">报警日志</div>
+          </div>
+        </div>
+        <div class="line"></div>
+        <div class="line2"></div>
+        <div class="line3"></div>
+        <MsgInfo></MsgInfo>
+      </div>
+
+  </div>
+</template>
+
+<script>
+import MsgInfo from "./MsgInfo.vue"
+export default {
+  name: 'TablePage',
+  data() {
+    return {
+      position:0,
+      arr1:[],
+      arr2:[],
+      arr3:[]
+    }
+  },
+  components:{
+    MsgInfo
+  },
+  mounted() {
+    this.initChart()
+    this.takeColor()
+    this.initWebSocket()
+  },
+  methods: {
+    takeColor(){
+      let left = document.getElementById("bgc_left")
+      let num = (this.position/50)*55
+      if(num==0){
+        left.style.width ="27px"
+      }else if(this.position/50>=1&&this.position/50<=4){
+        left.style.width =(num+30)+"px"
+      }else{
+        left.style.width =(num)+"px"
+      }
+    },
+    initChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chartInstance1 = this.$echarts.init(this.$refs.seller_ref1, 'chalk');
+      this.chartInstance2 = this.$echarts.init(this.$refs.seller_ref2, 'chalk');
+      this.chartInstance3 = this.$echarts.init(this.$refs.seller_ref3, 'chalk');
+      this.chartInstance4 = this.$echarts.init(this.$refs.seller_ref4, 'chalk');
+      this.myChart = this.$echarts.init(this.$refs.myChart, 'chalk');
+      this.myChart2 = this.$echarts.init(this.$refs.myChart2, 'chalk');
+      this.chartInstance7 = this.$echarts.init(this.$refs.seller_ref7, 'chalk');
+      // this.chartInstance8 = this.$echarts.init(this.$refs.seller_ref8, 'chalk');
+      // 绘制图表
+      var data = []
+      for(let i = 0 ; i <=1300;i+=50){
+        let str = i + "m"
+        data.push(str)
+      }
+      let data2 = []
+      for(let i =0; i<26;i++){
+        let newArr = [`${i*50}m`, '锚索应力']
+        let newArr2 = [`${i*50}m`, '顶板离层']
+        data2.push(newArr)
+        data2.push(newArr2)
+      }
+      var option = {
+        xAxis: {
+          data:data,
+          // show: false,
+          nameTextStyle:{
+            height:10,
+            
+          },
+          axisLabel:{
+            show:false
+          },
+          axisTick:{
+            show:false
+          },
+        },
+        yAxis: {
+          data: ['锚索应力', '顶板离层'],
+          axisTick:{
+            show:false
+          },
+        },
+        series: [
+          {
+            symbolSize: 5,
+            data: data2,
+            type: 'scatter'
+          }
+        ]
+    };
+      var option3 = {
+        animation:false,
+        xAxis: {
+          type: 'category',
+          data: data,
+          axisLabel:{
+            show:false
+          },
+          axisTick:{
+            show:false
+          },
+        },
+        yAxis: {
+          data:["1"],
+          type: 'value',
+          axisLine:{
+            lineStyle:{
+              width:1,
+            }
+          },
+          axisLabel:{
+            show:false
+          },
+          splitLine:{
+            show:false
+          }
+        },
+        series: [
+          {
+            data: [
+                ['1200m', '1'],
+              ],
+            type: 'bar',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          }
+        ]
+      };
+      //导入positon
+      this.position = parseInt(option3.series[0].data[0][0])
+      var zhexian ={
+        xAxis: {
+          type: 'category',
+          data: ['1', '2', '3', '4', '5', '6', '7']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: 'line'
+          }
+        ]
+      };
+      
+    var paixu = {
+      xAxis: {
+        max: 'dataMax'
+      },
+      yAxis: {
+        type: 'category',
+        data: ['A', 'B', 'C', 'D', 'E'],
+        inverse: true,
+        animationDuration: 300,
+        animationDurationUpdate: 300,
+        max: 2 // only the largest 3 bars will be displayed
+      },
+      series: [
+        {
+          realtimeSort: true,
+          name: '锚索应力（列表排名）',
+          type: 'bar',
+          data: [],
+          label: {
+            show: true,
+            position: 'right',
+            valueAnimation: true
+          }
+        }
+      ],
+      legend: {
+        show: true
+      },
+      animationDuration: 0,
+      animationDurationUpdate: 3000,
+      animationEasing: 'linear',
+      animationEasingUpdate: 'linear'
+    };
+    var paixu2 = {
+      xAxis: {
+        max: 'dataMax'
+      },
+      yAxis: {
+        type: 'category',
+        data: ['A', 'B', 'C', 'D', 'E'],
+        inverse: true,
+        animationDuration: 300,
+        animationDurationUpdate: 300,
+        max: 2 // only the largest 3 bars will be displayed
+      },
+      series: [
+        {
+          realtimeSort: true,
+          name: '顶板离层（排名）',
+          type: 'bar',
+          data: [],
+          label: {
+            show: true,
+            position: 'right',
+            valueAnimation: true
+          }
+        }
+      ],
+      legend: {
+        show: true
+      },
+      animationDuration: 0,
+      animationDurationUpdate: 3000,
+      animationEasing: 'linear',
+      animationEasingUpdate: 'linear'
+    };
+      this.chartInstance1.setOption(option);
+      this.chartInstance2.setOption(option);
+      this.chartInstance3.setOption(option3);
+      this.chartInstance4.setOption(option);
+      this.myChart.setOption(paixu);
+      this.myChart2.setOption(paixu2);
+      this.chartInstance7.setOption(zhexian);
+      // this.chartInstance8.setOption(option);
+    },
+
+    initWebSocket(){
+            // var websocket = null;
+            //判断当前浏览器是否支持WebSocket
+            if ('WebSocket' in window) {
+                var serviceIp ="localhost:8080";
+                this.websocket = new WebSocket("ws://"+serviceIp+"/Work");
+            }else if ('MozWebSocket' in window) {
+                 var serviceIp ="localhost:8080";
+                 this.websocket = new WebSocket("ws://"+serviceIp+"/Work");
+           }
+            else {
+                console.log('当前浏览器 Not support websocket');
+                let that = this;
+                 this.interval = window.setInterval(function(){ //每隔30秒钟发送一次心跳，避免websocket连接因超时而自动断开
+                   that.forgeWebSocket();
+                },30000);
+            }
+        let that = this;
+        this.interval = window.setInterval(function(){ //每隔30秒钟发送一次心跳，避免websocket连接因超时而自动断开
+                    if(that.websocket!=null){
+                        that.websocket.send("HeartBeat");
+                        console.log("发送心跳包:HeartBeat");
+                    }
+                },30000);
+            
+            //连接发生错误的回调方法
+            this.websocket.onerror = function (ev) {
+                console.log("WebSocket连接发生错误");
+            };
+
+            //连接成功建立的回调方法
+            this.websocket.onopen = function (ev) {
+                console.log("WebSocket连接成功");
+                this.send("addsocket");
+            }
+
+            //接收到消息的回调方法
+            let _this = this
+            this.websocket.onmessage = function (event) {
+                // console.log(event.data);
+                let data = JSON.parse(event.data)
+                console.log(data)
+                _this.arr1.push(data.d1)
+                _this.arr2.push(data.d2)
+                _this.arr3.push(data.d1)
+                _this.arr3.push(data.d2)
+                let newArr1 = []
+                let newArr2 = []
+                let newArr3 = []
+
+
+                if(_this.arr1.length<5){
+                  newArr1 = _this.arr1
+                }else{
+                  newArr1 = _this.arr1.slice(_this.arr1.length-5)
+                }
+
+                if(_this.arr2.length<5){
+                  newArr2 = _this.arr2
+                }else{
+                  newArr2 = _this.arr2.slice(_this.arr2.length-5)
+                }
+
+                if(_this.arr3.length<8){
+                  newArr3 = _this.arr3
+                }else{
+                  newArr3 = _this.arr3.slice(_this.arr3.length-7)
+                }
+
+
+                function run(myChart) {
+              //获取数据
+                  _this.myChart.setOption({
+                    series: [
+                      {
+                        type: 'bar',
+                        data:newArr1
+                      }
+                    ]
+                  });
+                  _this.myChart2.setOption({
+                    series: [
+                      {
+                        type: 'bar',
+                        data:newArr2
+                      }
+                    ]
+                  });
+                }
+                setTimeout(()=>{
+                  run(_this.myChart);
+                  run(_this.myChart2);
+                }, 0);
+                // setInterval(function () {
+                //   run(_this.myChart);
+                //   run(_this.myChart2);
+                // }, 3000);
+                var option = {
+                  series: [
+                            {
+                              data:[data.id],
+                            }
+                          ]
+                }
+                var option1 = {
+                  series: [
+                            {
+                              data:newArr3,
+                            }
+                          ]
+                }
+                  _this.chartInstance3.setOption(option);
+                  _this.chartInstance7.setOption(option1)
+                  // _this.myChart.setOption(option1);
+                  // _this.myChart2.setOption(option2);
+                  _this.position = parseInt(data.id[0])
+                  _this.takeColor()
+            }
+
+            //连接关闭的回调方法
+            this.websocket.onclose = function (ev) {
+                console.log("WebSocket连接关闭");
+                this.websocket=null;
+            }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+#main {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  height: 850px;
+  color: #4ADEFE;
+  padding-top: 60px;
+  position: relative;
+//    background-image: linear-gradient(
+//     to right,
+//     rgb(6, 19, 60) 0%,
+//     rgb(1, 22, 105) 50%,
+//     rgb(6, 19, 60) 100%
+//   );
+  // z-index: 2;
+}
+
+.com-container{
+  margin: 0 auto;
+  width: 1800px;
+  height: 500px;
+  position: absolute;
+  z-index: 2;
+}
+.com-chart{
+  position: relative;
+  height: 550px;
+  div {
+    position: absolute;
+  }
+}
+.first{ 
+  width: 1800px;
+  height: 200px;
+  top: -100px;
+}
+.second{
+  width: 1800px;
+  height: 200px;
+  top: -30px;
+}
+.third{
+  width: 1800px;
+  height: 500px;
+  top: 40px;
+  z-index: 10;
+}
+.fourth{
+  width: 1800px;
+  height: 200px;
+  top: 410px;
+}
+.bottom{
+  position: relative;
+  display: flex;
+}
+.bottom_chart{
+  width: 450px;
+  height: 300px;
+  outline: 1px solid #000;
+}
+.five{
+  top: 0;
+  left: 0px;
+  width: 450px;
+
+}
+.six{
+  top: 0;
+  left: 600px;
+  width: 450px;
+
+}
+.seven{
+  top: 0;
+  left: 900px;
+
+  width: 450px;
+}
+.eight{
+  top: 0;
+  left: 1300px;
+  width: 450px;
+  overflow: hidden;
+//   background-image: url('./assets/1.webp');
+  // background-repeat: no-repeat;
+  background-position: -40px 10px;
+}
+.line{
+  height: 1px;
+  width: 1440px;
+  position: absolute;
+  left: 180px;
+  top: -40px;
+  background-color: rgb(110,112,121);
+}
+.line2{
+  height: 580px;
+  width: 1px;
+  position: absolute;
+  left: 1620px;
+  top: -40px;
+  background-color: rgb(110,112,121);
+}
+.line3{
+  height: 580px;
+  width: 1px;
+  position: absolute;
+  left: 180px;
+  top: -40px;
+  background-color: rgb(110,112,121);
+}
+.charts{
+  margin: 100px auto;
+  width: 1440px;
+  height: 500px;
+  display: flex;
+  justify-content: space-between;
+  div{
+    outline: 1px solid #000;
+  }
+  .maosuoyingli{
+    width: 360px;
+  }
+  .dingbanliceng{
+    width: 360px;
+  }
+  .shujuquxian{
+    width: 360px;
+  }
+  .baojingrizhi{
+    width: 360px;
+  }
+}
+.warning_info{
+  border-bottom: 1px solid #000;
+}
+.bgc{
+  transform: translate(-50%);
+  height: 369px;
+  width: 1440px;
+  top: 101px;
+  left: 50%;
+  z-index: 8;
+  background-color: rgb(228, 214, 214);
+  .untoken{
+    height: 100%;
+    background-color: rgb(75, 71, 71);
+    z-index: 9;
+    transition: .5s;
+  }
+}
+</style>

src/views/compressed/dataBoard/dataBoard.vue

@@ -24,19 +24,19 @@
         <el-col :span="8">
           <div class="top_left">
             <!-- 电机电流 -->
-            <oneline ref="current" :id="23" title="电机电流" unit="A" type="dianjidianliu_after"></oneline>
+            <oneline ref="current" :id="80" title="电机电流" unit="A" type="dianjidianliu_after"></oneline>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="top_center">
             <!-- 三相绕组温度 -->
-            <threeline ref="winding" :id="23" title="三相绕组温度" unit="°C" :type="windingType" :legand="windingLegand"></threeline>
+            <threeline ref="winding" :id="80" title="三相绕组温度" unit="°C" :type="windingType" :legend="windingLegand"></threeline>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="top_right">
             <!-- 电机振动 -->
-            <threeline ref="vibrate" :id="23" title="电机振动" unit="mm/s" :type="vibrateType" :legand="vibrateLegand"></threeline>
+            <threeline ref="vibrate" :id="80" title="电机振动" unit="mm/s" :type="vibrateType" :legend="vibrateLegand"></threeline>
           </div>
         </el-col>
       </el-row>
@@ -47,19 +47,19 @@
         <el-col :span="8">
           <div class="center_left">
             <!-- 压风机及风包压力 -->
-            <twoline ref="pressure" :id="23" title="压风机及风包压力" unit="Mpa" :type="pressureType" :legand="pressureLegand"></twoline>
+            <twoline2 ref="pressure" :id=[81,82] title="压风机及风包压力" unit="Mpa" :type="pressureType" :legend="pressureLegand"></twoline2>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="center_center">
             <!-- 压风机及风包温度 -->
-            <twoline ref="temperature" :id="23" title="压风机及风包温度" unit="°C" :type="temperatureType" :legand="temperatureLegand"></twoline>
+            <twoline2 ref="temperature" :id=[81,82] title="压风机及风包温度" unit="°C" :type="temperatureType" :legend="temperatureLegand"></twoline2>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="center_right">
             <!-- 电机前后轴温 -->
-            <twoline ref="bearing" :id="23" title="电机前后轴温" unit="°C" :type="bearingType" :legand="bearingLegand"></twoline>
+            <twoline ref="bearing" :id="80" title="电机前后轴温" unit="°C" :type="bearingType" :legend="bearingLegand"></twoline>
           </div>
         </el-col>
       </el-row>
@@ -92,6 +92,7 @@ import threeline from '@/common/threeline'
 import faultAlarm from "./faultAlarm";
 import runningMsg from "./runningMsg";
 import runningMsg1 from "./runningMsg1";
+import twoline2 from "./twoline2";
 export default {
   data() {
     return {
@@ -110,15 +111,15 @@ export default {
           label: "3号压风机",
         },
       ],
-      windingType:["u1_after","v1_after","w1_after"],
+      windingType:["dianjiraozuwenduu_after","dianjiraozuwenduv_after","dianjiraozuwenduw_after"],
       windingLegand:["U1相温度","V1相温度","W1相温度"],
       vibrateType:["xzhou_after","yzhou_after","zzhou_after"],
       vibrateLegand:["X轴振动","Y轴振动","Z轴振动"],
-      pressureType:["yafengjiyali_after","fengbaoyali_after"],
+      pressureType:["gongqiyali_after","fengbaoyali_after"],
       pressureLegand:["压风机压力","风包压力"],
-      temperatureType:["yafengjiwendu_after","fengbaowendu_after"],
+      temperatureType:["paiqiwendu_after","fengbaowendu_after"],
       temperatureLegand:["压风机温度","风包温度"],
-      bearingType:["qianzhouwen_after","houzhouwen_after"],
+      bearingType:["dianjiqianzhouwendu_after","dianjihouzhouwendu_after"],
       bearingLegand:["电机前轴温","电机后轴温"]
 
     };
@@ -142,7 +143,8 @@ export default {
     threeline,
     faultAlarm,
     runningMsg,
-    runningMsg1
+    runningMsg1,
+    twoline2
   },
 };
 </script>

src/views/compressed/dataBoard/twoline2.vue

@@ -0,0 +1,473 @@
+<template>
+  <!-- 两条曲线封装 且需要两个websocket连接 -->
+  <div>
+    <div
+      ref="testLine"
+      style="width: 450px; height: 200px; margin: 0px auto"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: Array,
+      required: true,
+    },
+    unit: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: Array,
+      required: true,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      currentChartId: 1,
+      xData: new Array(30).fill("-"),
+      y1Data: new Array(30).fill("-"),
+      y2Data: new Array(30).fill("-"),
+      count: 0,
+      //   websocket1: null,
+      //   websocket2: null,
+      myChart: null,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "transparent",
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(126,199,255,0)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(126,199,255,1)", // 100% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(126,199,255,0)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+          },
+          formatter: (p) => {
+            let dom = `<div style="width: 79px;
+	height: 110px;;color:#fff;position: relative;">
+	<svg style="position: absolute;top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100"
+		height="111" viewBox="0 0 80 85">
+		<defs>
+			<style>
+				.cls-1 {
+					fill: #07172c;
+					fill-opacity: 0.8;
+					stroke: #a7d8ff;
+					stroke-linejoin: round;
+					stroke-opacity: 0.2;
+					stroke-width: 1px;
+					fill-rule: evenodd;
+				}
+			</style>
+		</defs>
+		<path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
+			transform="translate(-258.5 -592.5)" />
+	</svg>
+	<div style="padding: 3px 1px 3px 11px;display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;position: relative;z-index: 1;">
+		<div
+			style="margin-bottom: 4px;width:100%;display:${
+        p[0] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[0] ? p[0].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[0] ? p[0].data : ""}</span>
+		</div>
+		<div
+			style="width:100%;height:100%;display:${
+        p[1] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[1] ? p[1].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[1] ? p[1].data : ""}</span>
+		</div>
+		<div
+			style="width:100%;height:100%;display:${
+        p[1] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[2] ? p[2].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[2] ? p[2].data : ""}</span>
+		</div>
+	</div>
+</div>`;
+            return dom;
+          },
+        },
+        legend: {
+          align: "left",
+          right: "10%",
+          top: "10%",
+          type: "plain",
+          textStyle: {
+            color: "#7ec7ff",
+            fontSize: 11,
+          },
+          // icon:'rect',
+          itemGap: 25,
+          itemWidth: 18,
+          icon:
+            "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
+
+          data: this.legend,
+        },
+        grid: {
+        	top: '15%',
+        	left: '10%',
+        	right: '10%',
+        	bottom: '1%',
+        	containLabel: true
+        },
+        yAxis: [
+          {
+            boundaryGap: [0, "100%"],
+            name: this.unit,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            // type: "time", // x轴为 时间轴
+            interval: 0,
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 11,
+              rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: [],
+          },
+        ],
+        title: {
+          text: this.title,
+          padding: [6, 160],
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+			fontSize:15
+          },
+        },
+
+        series: [
+          {
+            name: this.legend[0],
+            type: "line",
+            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
+              },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 102, 102,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 102, 102, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+              },
+            },
+            data: [],
+          },
+          {
+            name: this.legend[1],
+            type: "line",
+            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(0, 102, 153,1)", // 线条颜色
+              },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(0, 102, 153,1)",
+              borderColor: "#3578e5",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 102, 153,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0, 102, 153, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 102, 153, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+              },
+            },
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  methods: {
+    idChange(id) {
+      //  console.log('this.legend',this.legend[0]);
+      console.log("sep", id);
+      // 数据清空
+      this.xData = new Array(30).fill("-");
+      this.y1Data = new Array(30).fill("-");
+      this.y2Data = new Array(30).fill("-");
+      // 关闭以前的websocket
+      this.websocket1.close();
+      this.websocket2.close();
+      // 开启一个新的
+      this.websocket1 = new WebSocket(
+        `ws://${this.websocketIP}/hbase/ws/belt/${this.id[0]}`
+      );
+      this.initWebSocket(websocket1, this.legend[0], id);
+      this.websocket2 = new WebSocket(
+        `ws://${this.websocketIP}/hbase/ws/belt/${this.id[1]}`
+      );
+      this.initWebSocket(websocket2, this.legend[1], id);
+    },
+
+    addy1Data(data, select) {
+      // 先扩展数组，然后删除多余元素
+      console.log("data", data);
+      if (select == 1) {
+        if (this.count < 30) {
+          for (let i = 0; i < data.length; i++) {
+            this.y1Data[this.count] = data[i][this.type[0]];
+            this.xData[this.count] = data[i]["date"].split(" ")[1];
+          }
+          this.count++;
+        } else {
+          for (let i = 0; i < data.length; i++) {
+            // 删除数组中的第一个项目
+            this.y1Data.shift();
+            this.y1Data.push(data[i][this.type[0]]);
+            this.xData.shift();
+            this.xData.push(data[i]["date"].split(" ")[1]);
+          }
+        }
+        this.myChart.setOption({
+          xAxis: [
+            {
+              data: this.xData,
+            },
+          ],
+          series: [
+            {
+              name: this.legend[0],
+              data: this.y1Data,
+            },
+            {
+              name: this.legend[1],
+              data: this.y2Data,
+            },
+          ],
+        });
+      }
+    },
+    addy2Data(data, select) {
+      // 先扩展数组，然后删除多余元素
+      console.log("data", data);
+      if (select == 1) {
+        if (this.count < 30) {
+          for (let i = 0; i < data.length; i++) {
+            this.y2Data[this.count] = data[i][this.type[1]];
+          }
+          this.count++;
+        } else {
+          for (let i = 0; i < data.length; i++) {
+            // 删除数组中的第一个项目
+            this.y2Data.shift();
+            this.y2Data.push(data[i][this.type[1]]);
+          }
+        }
+        this.myChart.setOption({
+          xAxis: [
+            {
+              data: this.xData,
+            },
+          ],
+          series: [
+            {
+              name: this.legend[0],
+              data: this.y1Data,
+            },
+            {
+              name: this.legend[1],
+              data: this.y2Data,
+            },
+          ],
+        });
+      }
+    },
+    initWebSocket(websocket, type, select) {
+      // 连接错误
+      websocket.onerror = () => {
+        console.log("WebSocket连接发生错误   状态码：" + websocket.readyState);
+      };
+      // 连接成功
+      websocket.onopen = () => {
+        console.log("WebSocket连接成功    状态码：" + websocket.readyState);
+      };
+      // 收到消息的回调
+      websocket.onmessage = (event) => {
+        if (!JSON.parse(event.data).length) {
+          return;
+        }
+        switch (type) {
+          case this.legend[0]:
+            this.addy1Data(JSON.parse(event.data), select);
+            break;
+          case this.legend[1]:
+            this.addy2Data(JSON.parse(event.data), select);
+            break;
+        }
+      };
+      // 连接关闭的回调
+      websocket.onclose = () => {
+        console.log("WebSocket连接关闭    状态码：" + websocket.readyState);
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        websocket.close();
+      });
+    },
+  },
+  mounted() {
+    // 先画图
+    // console.log(this.legend[0]);
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+    this.websocket1 = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/belt/${this.id[0]}`
+    );
+    this.initWebSocket(this.websocket1, this.legend[0], 1);
+    this.websocket2 = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/belt/${this.id[1]}`
+    );
+    this.initWebSocket(this.websocket2, this.legend[1], 1);
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

src/views/drain/dataBoard/dataBoard.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="main">
+    <div class="header">
+      <div class="select-veido">
+        <el-select
+          style="margin-top: 10px"
+          v-model="currentComId"
+          placeholder="请选择"
+          @change="selectChart"
+          :popper-append-to-body="false"
+        >
+          <el-option
+            v-for="item in pumpOptions"
+            :key="item.id"
+            :label="item.label"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class="top">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <div class="top_left">
+            <!-- 电机电压 -->
+            <oneline ref="voltage" :id="23" title="电机电压" unit="V" type="dianjidianya_after"></oneline>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="top_center">
+            <!-- 电机电流 -->
+            <oneline ref="current" :id="23" title="电机电流" unit="A" type="dianjidianliu_after"></oneline>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="top_right">
+            <!-- 电机前后轴温 -->
+            <twoline ref="bearing" :id="23" title="电机前后轴温" unit="°C" :type="bearingType" :legand="bearingLegand"></twoline>
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+    <div class="center">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <div class="center_left">
+            <!-- 电机振动 -->
+            <oneline ref="virbrate" :id="23" title="电机振动" unit="mm/s" type="zhendong_after"></oneline>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="center_center">
+            <!-- 水泵出口管道压力 -->
+            <twoline ref="pressure" :id="23" title="水泵出口管道压力" unit="Mpa" :type="pressureType" :legand="pressureLegand"></twoline>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="center_right">
+            <!-- 水仓水位 -->
+            <oneline ref="water_level" :id="23" title="水仓水位" unit="m" type="shuiwei_after"></oneline>
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+    <div class="bottom">
+      <el-row :gutter="130">
+        <el-col :span="12">
+          <div class="bottom_left">
+            <!-- 故障记录 -->
+            <fault-alarm></fault-alarm>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="bottom_right">
+            <!-- 启停记录 -->
+            <running-msg></running-msg>
+          </div>
+        </el-col>
+      </el-row>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import oneline from '@/common/oneline'
+import twoline from '@/common/twoline'
+import threeline from '@/common/threeline'
+import faultAlarm from "./faultAlarm";
+import runningMsg from "./runningMsg";
+export default {
+  data() {
+    return {
+      currentComId: "1号水泵",
+      pumpOptions: [
+        {
+          id: "1",
+          label: "1号水泵",
+        },
+        {
+          id: "2",
+          label: "2号水泵",
+        },
+        {
+          id: "3",
+          label: "3号水泵",
+        },
+      ],
+    
+      pressureType:["zhengya_after","fuya_after"],
+      pressureLegand:["正压","负压"],
+      bearingType:["qianzhouwen_after","houzhouwen_after"],
+      bearingLegand:["电机前轴温","电机后轴温"]
+
+    };
+  },
+  methods: {
+    selectChart(val) {
+      console.log("val", val);
+      this.$refs.voltage.idChange(val);
+      this.$refs.current.idChange(val);
+      this.$refs.bearing.idChange(val);
+      this.$refs.virbrate.idChange(val);
+      this.$refs.pressure.idChange(val);
+      this.$refs.water_level.idChange(val);
+      //   this.$refs.faultAlarm.idChange(val);
+      //   this.$refs.runningMsg.idChange(val);
+    },
+  },
+  components: {
+    oneline,
+    twoline,
+    threeline,
+    faultAlarm,
+    runningMsg,
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 140px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+  color: #4adefe;
+  font-size: 20px;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+.select-veido >>> .el-scrollbar {
+  background: rgba(255, 255, 255, 1);
+  border: 0;
+}
+.main {
+  width: 100%;
+  height: 850px;
+  position: relative;
+  background-image: linear-gradient(
+    to right,
+    rgb(6, 19, 60) 0%,
+    rgb(1, 22, 105) 50%,
+    rgb(6, 19, 60) 100%
+  );
+  /* background-color: antiquewhite; */
+}
+.header {
+  margin: 0 auto;
+  position: relative;
+  width: 100%;
+  height: 10%;
+  max-width: 1920px;
+  background: url("../../../assets/img/gas/header.png") center no-repeat;
+  box-sizing: border-box;
+}
+.select-veido {
+  margin: 0;
+  padding: 0;
+  line-height: 50px;
+  text-align: center;
+  font-size: 22px;
+  color: #ffffff;
+}
+.top {
+  height: 30%;
+}
+.top_left {
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+  height: 210px;
+}
+.top_center {
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+  height: 210px;
+}
+.top_right {
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+  height: 210px;
+}
+
+.center {
+  height: 30%;
+}
+.center_left {
+  width: 100%;
+  height: 210px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.center_center {
+  width: 100%;
+  height: 210px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.center_right {
+  width: 100%;
+  height: 210px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.bottom {
+  /* height: 30%; */
+  /* display: inline; */
+  /* height: 400px; */
+  margin-top: -40px;
+  display: flex;
+  justify-content: space-around;
+}
+.bottom_left {
+  width: 500px;
+  height: 210px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+.bottom_right {
+  width: 500px;
+  height: 210px;
+  background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
+  background-size: 100%;
+}
+</style>

src/views/drain/dataBoard/faultAlarm.vue

@@ -0,0 +1,97 @@
+  <template>
+  <!-- style="padding:6px;border:3px solid #96c2f1;background:#eff7ff;height:180px;margin-top:60px" -->
+  <div class="table-wrapper">
+    <span class="title">故障报警</span>
+    <el-table :data="tableData">
+      <el-table-column
+        prop="name"
+        label="名称"
+        width="180"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="problem"
+        label="记录"
+        width="180"
+      >
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          name: "2022-1-18 17:41:25",
+          problem: "过流",
+        },
+        {
+          name: "2022-1-18 17:44:26",
+          problem: "过压",
+        },
+        {
+          name: "2022-1-18 17:52:22",
+          problem: "欠压",
+        },
+      ],
+    };
+  },
+  methods: {
+    headerStyle({ row, column, rowIndex, columnIndex }) {
+      return "tableStyle";
+    },
+    tableRowStyle({ row, rowIndex }) {
+      return "background-color:#ecf5ff";
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.table-wrapper {
+  padding-top: 20px;
+  margin-left: 90px;
+  height: 80%;
+  margin-top: 10px;
+  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgba(9, 12, 14, 0.2);
+    color: #fff;
+  }
+} /* 删除表格下横线 */
+.table-wrapper ::v-deep .el-table::before {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0px;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table tr {
+  background-color: transparent !important;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table th {
+  background-color: transparent !important;
+  border: none;
+  color: #4ADEFE;
+  font-size: 16px;
+}
+.table-wrapper ::v-deep .el-table td,
+.el-table th.is-leaf {
+  background-color: transparent !important;
+  color: #F3DB5C;
+  font-size: 15px;
+  border: none;
+}
+.title {
+  /* font-weight:; */
+  /* padding-bottom: 15px; */
+  font-size: 18px;
+  color: #4ADEFE;
+}
+</style>

src/views/drain/dataBoard/runningMsg.vue

@@ -0,0 +1,88 @@
+  <template>
+  <div class="table-wrapper">
+    <span class="title">运行操作</span>
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="name"
+        label="水泵本体设备"
+        width="180"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="problem"
+        label="启停"
+        width="180"
+      >
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          name: "1#水泵",
+          problem: "关闭",
+        },
+        {
+          name: "1#水泵",
+          problem: "开启",
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang='scss' scoped>
+.table-wrapper {
+  padding-top: 20px;
+  margin-left: 110px;
+  height: 80%;
+  margin-top: 10px;
+  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgba(9, 12, 14, 0.2);
+    color: #fff;
+  }
+} /* 删除表格下横线 */
+.table-wrapper ::v-deep .el-table::before {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0px;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table tr {
+  background-color: transparent !important;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table th {
+  background-color: transparent !important;
+  border: none;
+  color: #4adefe;
+  font-size: 16px;
+}
+.table-wrapper ::v-deep .el-table td,
+.el-table th.is-leaf {
+  background-color: transparent !important;
+  color: #f3db5c;
+  font-size: 15px;
+  border: none;
+}
+.title {
+  /* font-weight:; */
+  /* padding-bottom: 15px; */
+  font-size: 18px;
+  color: #4adefe;
+}
+</style>

src/views/drain/drain.vue

@@ -4,6 +4,12 @@
     type="card"
     @tab-click="handleClick"
   >
+  <el-tab-pane
+      label="数据看板"
+      name="fourth"
+    >
+      <dataBoard></dataBoard>
+    </el-tab-pane>
     <el-tab-pane
       label="系统数据"
       name="first"
@@ -26,6 +32,7 @@
 
 <script>
 import dataStandard from "./dataStandard/dataStandard";
+import dataBoard from "./dataBoard/dataBoard";
 export default {
   name: "compressed",
   data() {
@@ -39,7 +46,7 @@ export default {
     },
   },
   components: {
-    dataStandard,
+    dataStandard,dataBoard
   },
 };
 </script>

src/views/gas/gas.vue

@@ -2,7 +2,7 @@
   <div>
     <!--标签-->
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-      <el-tab-pane label="组态图" name="third">
+      <el-tab-pane label="系统图" name="third">
         <router-view></router-view>
       </el-tab-pane>
       <el-tab-pane label="系统数据" name="first">
@@ -147,6 +147,9 @@ export default {
   },
   mounted() {
     this.getSubsystemOption();
+    this.$router.push({
+          path: "/gas/mainpage",
+        })
     // this.currentsubSystem = this.options[0].subSystem;
     // this.currentSubSystemId = this.options[0].id;//将当前煤矿与id设置为下拉框第一个
     // this.initData();

src/views/mining/mining.vue

@@ -1,17 +1,30 @@
 <template>
   <div>
     <!--标签-->
-    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-      <el-tab-pane label="系统图" name="third">
+    <el-tabs
+      v-model="activeName"
+      type="card"
+      @tab-click="handleClick"
+    >
+      <el-tab-pane
+        label="系统图"
+        name="third"
+      >
         <router-view></router-view>
       </el-tab-pane>
-      <el-tab-pane label="系统数据" name="first">
+      <el-tab-pane
+        label="系统数据"
+        name="first"
+      >
         <systemData></systemData>
       </el-tab-pane>
-      <el-tab-pane label="数据标准" name="second">
+      <el-tab-pane
+        label="数据标准"
+        name="second"
+      >
         <dataStandard></dataStandard>
       </el-tab-pane>
-      
+
     </el-tabs>
   </div>
 
@@ -19,34 +32,38 @@
 
 
 <script>
-  import dataStandard from "./dataStandard/dataStandard";
-  import systemData from "./systemData";
-  export default {
-    name: "mining",
-    data() {
-      return {
-        activeName: 'third',
-        checkVisible: 'false'
-      };
-    },
-    methods: {
-      handleClick(tab, event) {
-                if(tab.name == "third"){
-                  this.$router.push({
-                    path: "/coal_mining/monitor"
-                  })
-                }
-            }
+import dataStandard from "./dataStandard/dataStandard";
+import systemData from "./systemData";
+export default {
+  name: "mining",
+  data() {
+    return {
+      activeName: "third",
+      checkVisible: "false",
+    };
+  },
+  mounted() {
+    this.$router.push({
+      path: "/coal_mining/monitor",
+    });
+  },
+  methods: {
+    handleClick(tab, event) {
+      if (tab.name == "third") {
+        this.$router.push({
+          path: "/coal_mining/monitor",
+        });
+      }
     },
-    
-    components: {
-      dataStandard,
-      systemData
-    }
-  };
+  },
+
+  components: {
+    dataStandard,
+    systemData,
+  },
+};
 </script>
 
 
 <style scoped>
-
 </style>

src/views/power_supply/power.vue

@@ -1,5 +1,12 @@
 <template>
   <el-tabs v-model="activeName" type="card">
+    
+    <el-tab-pane label="系统图" name="third">
+      <TablePage></TablePage>
+    </el-tab-pane>
+    <el-tab-pane label="数据看板" name="fourth">
+      <data-board></data-board>
+    </el-tab-pane>
     <el-tab-pane label="系统数据" name="first">
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
@@ -7,15 +14,10 @@
         <el-breadcrumb-item>数据标准</el-breadcrumb-item>
       </el-breadcrumb>
     </el-tab-pane>
-    <el-tab-pane label="系统图" name="third">
-      <TablePage></TablePage>
-    </el-tab-pane>
     <el-tab-pane label="数据标准" name="second">
       <dataStandard></dataStandard>
     </el-tab-pane>
-    <el-tab-pane label="数据看板" name="fourth">
-      <data-board></data-board>
-    </el-tab-pane>
+    
   </el-tabs>
 </template>
 

src/views/transportation/transportation.vue

@@ -29,6 +29,11 @@
                 checkVisible: 'false'
             };
         },
+        mounted(){
+          this.$router.push({
+                    path: "/transportation/mainpage"
+                  })
+        },
         methods: {
             handleClick(tab, event) {
                 if(tab.name == "third"){

src/views/ventilate/dataBoard/bearing.vue

@@ -16,6 +16,7 @@ export default {
       title:'轴承温度',
       type: ['qianzhouwen_after','houzhouwen_after'],
       unit:'°C',
+      id:89,
       currentChartId: 1,
       xData: new Array(30).fill("-"),
       y1Data: new Array(30).fill("-"),
@@ -108,95 +109,103 @@ export default {
 
         series: [
           {
-            // name: this.title,
+            name: this.legend[0],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 102, 102,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 102, 102, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
           {
-            // name: this.title,
+            name: this.legend[1],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(0, 102, 153,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(0, 102, 153,1)",
+              borderColor: "#3578e5",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 102, 153,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0, 102, 153, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 102, 153, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
-          }
+          },
         ],
       },
     };
@@ -214,7 +223,7 @@ export default {
       // 关闭以前的websocket
       this.websocket.close();
       // 开启一个新的
-      this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
+      this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
       this.initWebSocket();
     },
 
@@ -297,7 +306,7 @@ export default {
     // 先画图
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
     this.initWebSocket();
   },
 };

src/views/ventilate/dataBoard/dataBoard.vue

@@ -30,13 +30,13 @@
         <el-col :span="8">
           <div class="top_center">
             <!-- 三相绕组温度（定子温度） -->
-            <separate ref="separate"></separate>
+            <threeline ref="separate" :id="89" title="三相绕组温度" unit="°C" :type="separateType" :legend="separateLegand"></threeline>
           </div>
         </el-col>
         <el-col :span="8">
           <div class="top_right">
             <!-- 轴承温度 -->
-            <bearing ref="bearing"></bearing>
+            <twoline ref="bearing" :id="89" title="轴承温度" unit="°C" :type="bearingType" :legend="bearingLegand"></twoline>
           </div>
         </el-col>
       </el-row>
@@ -47,7 +47,7 @@
         <el-col :span="8">
           <div class="center_left">
             <!-- 振动 -->
-            <vibrate ref="vibrate"></vibrate>
+            <twoline ref="vibrate" :id="89" title="振动" unit="um/s" :type="vibrateType" :legend="vibrateLegand"></twoline>
           </div>
         </el-col>
         <el-col :span="8">
@@ -58,8 +58,8 @@
         </el-col>
         <el-col :span="8">
           <div class="center_right">
-            <!-- 全压/静压/动压 -->
-            <pressure ref="pressure"></pressure>
+            <!-- 全压 -->
+            <oneline ref="pressure" :id="91" title="管道全压" unit="Mpa" type="quanya_after"></oneline>
           </div>
         </el-col>
       </el-row>
@@ -85,6 +85,9 @@
 </template>
 
 <script>
+import oneline from '@/common/oneline'
+import twoline from '@/common/twoline'
+import threeline from '@/common/threeline'
 import volAndCurrent from "./volAndCurrent";
 import separate from "./separate";
 import bearing from "./bearing";
@@ -107,6 +110,13 @@ export default {
           label: "2号风机",
         },
       ],
+      separateType:["raozuyiwendu_after","raozuerwendu_after","raozusanwendu_after"],
+      separateLegand:["绕组1温度","绕组2温度","绕组3温度"],
+      bearingType:["qianzhouwen_after","houzhouwen_after"],
+      bearingLegand:["前轴温","后轴温"],
+      vibrateType:["shuipingzhendong_after","chuizhizhendong_after"],
+      vibrateLegand:["水平振动","垂直振动"]
+
     };
   },
   methods: {
@@ -124,13 +134,12 @@ export default {
   },
   components: {
     volAndCurrent,
-    separate,
-    bearing,
-    vibrate,
     wind,
-    pressure,
     faultAlarm,
     runningMsg,
+    oneline,
+    twoline,
+    threeline
   },
 };
 </script>

src/views/ventilate/dataBoard/pressure.vue

@@ -109,138 +109,150 @@ export default {
 
         series: [
           {
-            // name: this.title,
+            name: this.legend[0],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 102, 102,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 102, 102, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
           {
-            // name: this.title,
+            name: this.legend[1],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 255, 0,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 255, 0,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 255, 0,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 255, 0, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 255, 0, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
           {
-            // name: this.title,
+            name: this.legend[2],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(0, 102, 153,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(0, 102, 153,1)",
+              borderColor: "#3578e5",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 102, 153,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0, 102, 153, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 102, 153, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
         ],
@@ -262,7 +274,7 @@ export default {
       this.websocket.close();
       // 开启一个新的
       this.websocket = new WebSocket(
-        `ws://${this.websocketIP}/hbase/ws/belt/62`
+        `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
       );
       this.initWebSocket();
     },
@@ -353,7 +365,7 @@ export default {
     // 先画图
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
     this.initWebSocket();
   },
 };

src/views/ventilate/dataBoard/separate.vue

@@ -108,141 +108,153 @@ export default {
         },
 
         series: [
-          {
-            // name: this.title,
+         {
+            name: this.legend[0],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 102, 102,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 102, 102, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
           {
-            // name: this.title,
+            name: this.legend[1],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 255, 0,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 255, 0,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 255, 0,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 255, 0, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 255, 0, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
           {
-            // name: this.title,
+            name: this.legend[2],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(0, 102, 153,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(0, 102, 153,1)",
+              borderColor: "#3578e5",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 102, 153,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0, 102, 153, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 102, 153, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
-          }
+          },
         ],
       },
     };

src/views/ventilate/dataBoard/volAndCurrent.vue

@@ -2,19 +2,19 @@
   <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"
+        style="margin-top:10px"
+        v-model="currentChartId"
+        placeholder="请选择"
+        @change="selectParm"
       >
-      </el-option>
-    </el-select>
+        <el-option
+          v-for="item in parmoptions"
+          :key="item.id+''"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
     </div>
     <div
       ref="testLine"
@@ -39,9 +39,9 @@ export default {
           label: "三相相电流",
         },
       ],
-      title:'三相线电压',
-      type: ['Uab_after','Ubc_after','Uca_after'],
-      unit:'V',
+      title: "三相线电压",
+      type: ["Uab_after", "Ubc_after", "Uca_after"],
+      unit: "V",
       currentChartId: 1,
       xData: new Array(30).fill("-"),
       y1Data: new Array(30).fill("-"),
@@ -74,6 +74,13 @@ export default {
             return result;
           },
         },
+        grid: {
+          top: "15%",
+          left: "10%",
+          right: "10%",
+          bottom: "1%",
+          containLabel: true,
+        },
         legend: {
           orient: "vertical",
           x: "left",
@@ -126,149 +133,162 @@ export default {
         ],
         title: {
           text: this.title,
-          padding: [5, 230],
+          padding: [5, 170],
           textStyle: {
             fontWeight: "normal", //标题颜色
             color: "#4ADEFE",
+            fontSize: 15,
           },
         },
 
         series: [
           {
-            // name: this.title,
+            name: this.type[0],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 102, 102,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 102, 102, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
           {
-            // name: this.title,
+            name: this.type[1],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 255, 0,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 255, 0,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 255, 0,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 255, 0, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 255, 0, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
           },
           {
-            // name: this.title,
+            name: this.type[2],
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(0, 102, 153,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(0, 102, 153,1)",
+              borderColor: "#3578e5",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 102, 153,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0, 102, 153, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0, 102, 153, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
-          }
+          },
         ],
       },
     };
@@ -287,7 +307,9 @@ export default {
       // 关闭以前的websocket
       this.websocket.close();
       // 开启一个新的
-      this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
+      this.websocket = new WebSocket(
+        `ws://${this.websocketIP}/hbase/ws/belt/62`
+      );
       this.initWebSocket();
     },
     // 选择要展示的参数
@@ -300,24 +322,21 @@ export default {
       }
       switch (this.currentChartId) {
         // 三相线电压
-        case '1':
+        case "1":
           this.unit = "V";
-          this.type = ['Uab_after','Ubc_after','Uca_after'];
-          break
-          // 三相相电流
-        case '2':
+          this.type = ["Uab_after", "Ubc_after", "Uca_after"];
+          break;
+        // 三相相电流
+        case "2":
           this.unit = "A";
-          this.type = ['Ia','Ib','Ic'];
-          break
-       
+          this.type = ["Ia", "Ib", "Ic"];
+          break;
       }
-        this.count = 0;
-        this.xData = new Array(30).fill("-");
-        this.y1Data = new Array(30).fill("-");
+      this.count = 0;
+      this.xData = new Array(30).fill("-");
+      this.y1Data = new Array(30).fill("-");
       this.y2Data = new Array(30).fill("-");
       this.y3Data = new Array(30).fill("-");
-        
-  
     },
     addData(data) {
       this.websocket;
@@ -362,7 +381,7 @@ export default {
           {
             name: this.unit,
             data: this.y3Data,
-          }
+          },
         ],
       });
       // console.log("this.paiqidata", this.paiqidata);

src/views/ventilate/dataBoard/wind.vue

@@ -2,19 +2,19 @@
   <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"
+        style="margin-top:10px"
+        v-model="currentChartId"
+        placeholder="请选择"
+        @change="selectParm"
       >
-      </el-option>
-    </el-select>
+        <el-option
+          v-for="item in parmoptions"
+          :key="item.id+''"
+          :label="item.label"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
     </div>
     <div
       ref="testLine"
@@ -39,12 +39,13 @@ export default {
           label: "风速",
         },
       ],
-      title:'风流',
-      type: 'fengliu_after',
-      unit:'',
+      id: 91,
+      title: "风流",
+      type: "fengliu_after",
+      unit: "Mpa",
       currentChartId: 1,
       xData: new Array(30).fill("-"),
-      yData: new Array(30).fill("-"),  
+      yData: new Array(30).fill("-"),
       count: 0,
       myChart: null,
       option: {
@@ -72,6 +73,13 @@ export default {
             return result;
           },
         },
+        grid: {
+          top: "15%",
+          left: "10%",
+          right: "10%",
+          bottom: "1%",
+          containLabel: true,
+        },
         legend: {
           orient: "vertical",
           x: "left",
@@ -124,59 +132,63 @@ export default {
         ],
         title: {
           text: this.title,
-          padding: [5, 230],
+          padding: [5, 190],
           textStyle: {
             fontWeight: "normal", //标题颜色
             color: "#4ADEFE",
+            fontSize: 15,
           },
         },
 
         series: [
           {
-            // name: this.title,
             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", // 默认是空心圆（中间是白色的），改成实心圆
+            showAllSymbol: true,
+            symbolSize: 0,
+            smooth: true,
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "rgba(255, 102, 102,1)", // 线条颜色
               },
-              symbol: "circle",
-              itemStyle: {
-                normal: {
-                  borderColor: "rgba(90,170,250,0.3)",
-                  borderWidth: 15,
-                },
+              borderColor: "rgba(0,0,0,.4)",
+            },
+            itemStyle: {
+              color: "rgba(255, 102, 102,1)",
+              borderColor: "#646ace",
+              borderWidth: 2,
+            },
+            tooltip: {
+              show: true,
+            },
+            areaStyle: {
+              //区域填充样式
+              normal: {
+                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 102, 102,.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 102, 102, 0)",
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(255, 102, 102, 0.5)", //阴影颜色
+                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
               },
-              symbolSize: 7,
-              data: [{ type: "max", name: "Max" }],
             },
-            lineStyle: { normal: { color: "#41D6C3", 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: "#41D6C3", opacity: 0.5 } },
-            connectNulls: true,
             data: [],
-          }
+          },
         ],
       },
     };
@@ -193,7 +205,9 @@ export default {
       // 关闭以前的websocket
       this.websocket.close();
       // 开启一个新的
-      this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
+      this.websocket = new WebSocket(
+        `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+      );
       this.initWebSocket();
     },
     // 选择要展示的参数
@@ -206,22 +220,19 @@ export default {
       }
       switch (this.currentChartId) {
         // 风流
-        case '1':
+        case "1":
           this.unit = "";
           this.type = "fengliu_after";
-          break
-          //风速
-        case '2':
+          break;
+        //风速
+        case "2":
           this.unit = "m/s";
           this.type = "fengsu_after";
-          break
-       
+          break;
       }
-        this.count = 0;
-        this.xData = new Array(30).fill("-");
-        this.yData = new Array(30).fill("-");
-    
-  
+      this.count = 0;
+      this.xData = new Array(30).fill("-");
+      this.yData = new Array(30).fill("-");
     },
     addData(data) {
       this.websocket;
@@ -252,7 +263,7 @@ export default {
           {
             name: this.unit,
             data: this.y1Data,
-          }
+          },
         ],
       });
       // console.log("this.paiqidata", this.paiqidata);
@@ -295,7 +306,9 @@ export default {
     // 先画图
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
+    this.websocket = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+    );
     this.initWebSocket();
   },
 };