Merge branch 'master' of https://gitee.com/qinnamin/large_screen

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: [],
-          }
+          },
         ],
       },
     };
@@ -178,7 +186,7 @@ export default {
   },
   methods: {
     idChange(id) {
-      console.log("sep", id);
+      // console.log("sep", id);
       // 数据清空
       this.xData = new Array(30).fill("-");
       this.yData = new Array(30).fill("-");
@@ -192,7 +200,7 @@ export default {
     addData(data) {
       this.websocket;
       // 先扩展数组，然后删除多余元素
-      console.log("data", data);
+      // console.log("data", data);
       if (this.count < 30) {
         for (let i = 0; i < data.length; i++) {
           this.yData[this.count] = data[i][this.type];

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: [],
           },
         ],
@@ -275,7 +363,7 @@ props: {
   },
   methods: {
     idChange(id) {
-      console.log("sep", id);
+      // console.log("sep", id);
       // 数据清空
       this.xData = new Array(30).fill("-");
       this.y1Data = new Array(30).fill("-");
@@ -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);
     },
@@ -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/components/beam_tube/scatterChart.vue

@@ -0,0 +1,92 @@
+<template>
+  <div ref="chart" style="width: 1600px; height: 200px"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      option: {
+        title: {
+          text: this.title,
+          top: 85,
+          right: 100,
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+          },
+        },
+        xAxis: {
+          data: [
+            0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
+            19, 20, 21, 22, 23, 24, 25
+          ],
+          // show: false,
+          nameTextStyle: {
+            height: 10,
+          },
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          // show: false,
+          data: ["锚索应力", "顶板离层"],
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#4adefe",
+            fontSize: 15,
+          },
+        },
+        series: [
+          {
+            symbolSize: 10,
+            data: [],
+            type: "scatter",
+            color: (params) => {
+              // 返回绿色
+              if (params.data[2]) return "#009966";
+              // 不然返回红色
+              return "#f90005";
+            },
+          },
+        ],
+      },
+    };
+  },
+  props: ["data", "title"],
+  mounted() {
+    this.chart = this.$echarts.init(this.$refs.chart);
+    this.chart.setOption(this.option);
+    let arr = [];
+    for (let i = 0; i < 26; i++) {
+      let newArr = [i, "锚索应力", this.data.bottom[i] < 20 ? true : false];
+      let newArr2 = [i, "顶板离层", this.data.top[i] < 20 ? true : false];
+      arr.push(newArr);
+      arr.push(newArr2);
+    }
+    console.log(arr);
+    this.chart.setOption({
+      series: [
+        {
+          data: arr,
+        },
+      ],
+    });
+  },
+};
+</script>
+
+<style scoped>
+</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,8 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    websocketIP: "localhost: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">
+      <configImg></configImg>
+    </el-tab-pane>
     <el-tab-pane label="系统数据" name="first">系统数据</el-tab-pane>
     <el-tab-pane label="数据标准" name="second">
       <dataStandard></dataStandard>
@@ -10,25 +13,26 @@
 
 <script>
 import dataStandard from "./dataStandard/dataStandard";
-    export default {
-      name: "beam",
-      data() {
-        return {
-          activeName: 'first'
-        };
-      },
-      methods: {
-        handleClick(tab, event) {
-          console.log(tab, event);
-        }
-      },
-      components: {
-            dataStandard
-      }
+import configImg from "./configImg"
+export default {
+  name: "beam",
+  data() {
+    return {
+      activeName: "third",
     };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+  },
+  components: {
+    dataStandard,
+    configImg,
+  },
+};
 </script>
 
 
 <style scoped>
-
 </style>

src/views/beam_tube/configImg/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="main">
+    <el-container>
+      <el-header>
+        <div class="header">
+          <div
+            style="margin-left: -50px; margin-bottom: -100px; margin-top: -40px"
+          >
+            <scatter-chart title="辅运巷" :data="data1"></scatter-chart>
+          </div>
+          <div style="margin-left: -50px; margin-bottom: -40px">
+            <scatter-chart title="主运巷" :data="data1"></scatter-chart>
+          </div>
+
+          <div class="workingFace">
+            <div :style="{ width: 1300 - length + 'px' }" class="inner"></div>
+            <div
+              :style="{ 'margin-left': 1300 - length + 'px' }"
+              class="pillar"
+            >
+              <div class="center">{{ length }}m</div>
+            </div>
+            <div class="bottom1">工作面<br />&nbsp;&nbsp;&nbsp;0m</div>
+            <div class="bottom2">采煤区<br />1300m</div>
+          </div>
+          <div style="margin-left: -50px; margin-top: -50px">
+            <scatter-chart title="回风巷" :data="data1"></scatter-chart>
+          </div>
+        </div>
+      </el-header>
+      <el-main>Main</el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import scatterChart from "@/components/beam_tube/scatterChart";
+export default {
+  data() {
+    return {
+      length: 0,
+      data1: {
+        top: new Array(26).fill(10),
+        bottom: new Array(26).fill(40)
+      }
+    };
+  },
+  mounted() {
+    setInterval(() => {
+      if (this.length < 1300) {
+        this.length += 10;
+      }
+    }, 100);
+  },
+  components: {
+    scatterChart,
+  },
+};
+</script>
+
+<style scoped>
+.main {
+  width: 100%;
+  height: 850px;
+  position: relative;
+  background-image: linear-gradient(
+    to right,
+    #06133c 0%,
+    #011669 5045 #06133c 100%
+  );
+}
+.header {
+  width: 100%;
+  height: 650px;
+  /* background-color: black; */
+}
+.workingFace {
+  height: 300px;
+  width: 1300px;
+  margin-left: 100px;
+  background-color: rgb(228, 214, 214);
+}
+.inner {
+  height: 100%;
+  background-color: rgb(75, 71, 71);
+  z-index: 9;
+}
+.pillar {
+  height: 100%;
+  width: 10px;
+  margin-top: -300px;
+  background-color: #0000cd;
+}
+.bottom1 {
+  color: #4adefe;
+  right: 40px;
+  font-size: 20px;
+  top: 330px;
+  position: absolute;
+}
+.bottom2 {
+  color: #4adefe;
+  left: 40px;
+  font-size: 20px;
+  top: 330px;
+  position: absolute;
+}
+.center {
+  color: #009966;
+  font-size: 20px;
+  top: 50px;
+  left: 10px;
+  position: relative;
+}
+</style>

src/views/compressed/compressed.vue

@@ -1,42 +1,55 @@
 <template>
-  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-    <el-tab-pane label="系统数据" name="first">系统数据</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-tab-pane label="系统图" name="third">
+  <el-tabs
+    v-model="activeName"
+    type="card"
+    @tab-click="handleClick"
+  >
+    <el-tab-pane
+      label="系统图"
+      name="third"
+    >
       <config-img></config-img>
     </el-tab-pane>
+    <el-tab-pane
+      label="数据看板"
+      name="fourth"
+    >
+      <data-board></data-board>
+    </el-tab-pane>
+    <el-tab-pane
+      label="系统数据"
+      name="first"
+    >系统数据</el-tab-pane>
+    <el-tab-pane
+      label="数据标准"
+      name="second"
+    >
+      <dataStandard></dataStandard>
+    </el-tab-pane>
+
   </el-tabs>
 </template>
 
 <script>
 import dataStandard from "./dataStandard/dataStandard";
-import dataBoard from './dataBoard/dataBoard'
-import configImg from "@/views/compressed/configImg/configImg"
-    export default {
-      name: "compressed",
-      data() {
-        return {
-          activeName: 'first'
-        };
-      },
-      methods: {
-        handleClick(tab, event) {
-         
-        }
-      },
-      components: {
-            dataStandard,
-            dataBoard,
-            configImg
-     
-      }
-    }
-    
+import dataBoard from "./dataBoard/dataBoard";
+import configImg from "@/views/compressed/configImg/configImg";
+export default {
+  name: "compressed",
+  data() {
+    return {
+      activeName: "third",
+    };
+  },
+  methods: {
+    handleClick(tab, event) {},
+  },
+  components: {
+    dataStandard,
+    dataBoard,
+    configImg,
+  },
+};
 </script>
 
 

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/configImg/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="main">
+    <!-- 背景图片 -->
+    <div>
+      <img src="@/assets/img/drain/back.png" id="imgSwitch" />
+    </div>
+    <!-- 12个按钮 -->
+    <div :class="['botton0', valve[0] ? 'green' : 'red']"></div>
+    <div :class="['botton1', valve[1] ? 'green' : 'red']"></div>
+    <div :class="['botton2', valve[2] ? 'green' : 'red']"></div>
+    <div :class="['botton3', valve[3] ? 'green' : 'red']"></div>
+    <div :class="['botton4', valve[4] ? 'green' : 'red']"></div>
+    <div :class="['botton5', valve[5] ? 'green' : 'red']"></div>
+    <div :class="['botton6', valve[6] ? 'green' : 'red']"></div>
+    <div :class="['botton7', valve[7] ? 'green' : 'red']"></div>
+    <div :class="['botton8', valve[8] ? 'green' : 'red']"></div>
+    <div :class="['botton9', valve[9] ? 'green' : 'red']"></div>
+    <div :class="['botton10', valve[10] ? 'green' : 'red']"></div>
+    <div :class="['botton11', valve[11] ? 'green' : 'red']"></div>
+    <!-- 3个数据表格 -->
+    <div class="table1">
+      <tableData :tableData="tableData1" id="1"></tableData>
+    </div>
+    <div class="table2">
+      <tableData :tableData="tableData2" id="2"></tableData>
+    </div>
+    <div class="table3">
+      <tableData :tableData="tableData3" id="3"></tableData>
+    </div>
+  </div>
+</template>
+<script>
+import tableData from "@/views/drain/configImg/tableData";
+export default {
+  data() {
+    return {
+      valve: [
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+        true,
+      ],
+      tableData1: {
+        pipelineFlow: 0.0,
+        pipelineFlowTotal: 0.0,
+        runningTime: 0,
+        UnattendedRuntime: 0,
+        positivePressure: 0,
+        negativePressure: 0,
+        frontAxleTemp: 0,
+        rearAxleTemp: 0,
+        liquidLevel: 0,
+      },
+      tableData2: {
+        pipelineFlow: 0.0,
+        pipelineFlowTotal: 0.0,
+        runningTime: 0,
+        UnattendedRuntime: 0,
+        positivePressure: 0,
+        negativePressure: 0,
+        frontAxleTemp: 0,
+        rearAxleTemp: 0,
+        liquidLevel: 0,
+      },
+      tableData3: {
+        pipelineFlow: 0.0,
+        pipelineFlowTotal: 0.0,
+        runningTime: 0,
+        UnattendedRuntime: 0,
+        positivePressure: 0,
+        negativePressure: 0,
+        frontAxleTemp: 0,
+        rearAxleTemp: 0,
+        liquidLevel: 0,
+      },
+    };
+  },
+  components: {
+    tableData,
+  },
+  mounted() {
+    this.valve = this.valve.map((item) => {
+      return (item = !item);
+    });
+  },
+};
+</script>
+
+<style scoped>
+.main {
+  width: 100%;
+  height: 850px;
+  position: relative;
+  background-image: linear-gradient(
+    to right,
+    #06133c 0%,
+    #011669 5045 #06133c 100%
+  );
+}
+.table1 {
+  top: 0px;
+  left: -10px;
+  position: absolute;
+}
+.table2 {
+  top: 0px;
+  left: 450px;
+  position: absolute;
+}
+.table3 {
+  top: 0px;
+  left: 910px;
+  position: absolute;
+}
+#imgSwitch {
+  width: 100%;
+  height: 800px;
+  margin-top: 20px;
+  /* padding-bottom: 100px; */
+  /* left: 50px; */
+  /* margin-left: 30px; */
+}
+.botton0 {
+  width: 10px;
+  height: 30px;
+  position: absolute;
+  top: 64px;
+  left: 62px;
+}
+.botton1 {
+  width: 10px;
+  height: 30px;
+  position: absolute;
+  top: 371px;
+  left: 144px;
+}
+.botton2 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 378px;
+  left: 368px;
+}
+.botton3 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 305px;
+  left: 417px;
+}
+.botton4 {
+  width: 10px;
+  height: 30px;
+  position: absolute;
+  top: 140px;
+  left: 527px;
+}
+.botton5 {
+  width: 10px;
+  height: 30px;
+  position: absolute;
+  top: 375px;
+  left: 605px;
+}
+.botton6 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 378px;
+  left: 830px;
+}
+.botton7 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 305px;
+  left: 880px;
+}
+.botton8 {
+  width: 10px;
+  height: 30px;
+  position: absolute;
+  top: 140px;
+  left: 990px;
+}
+.botton9 {
+  width: 10px;
+  height: 30px;
+  position: absolute;
+  top: 375px;
+  left: 1070px;
+}
+.botton10 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 378px;
+  right: 240px;
+}
+.botton11 {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  position: absolute;
+  top: 305px;
+  right: 190px;
+}
+.red {
+  background-color: #f90005;
+}
+.green {
+  background-color: #009966;
+}
+</style>

src/views/drain/configImg/tableData.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <ul class="header">
+      <li>
+        {{ id }}号管道流量:<span>{{ tableData.pipelineFlow }}m3/h</span>
+      </li>
+      <li>
+        {{ id }}号管道流量统计:<span
+          >{{ tableData.pipelineFlowTotal }}m3/h</span
+        >
+      </li>
+    </ul>
+    <ul class="center">
+      <li>
+        {{ id }}号运行总时间:<br /><span>{{ tableData.runningTime }}h</span>
+      </li>
+      <li>
+        {{ id }}号无人值守运行时间:<br /><span
+          >{{ tableData.UnattendedRuntime }}h</span
+        >
+      </li>
+    </ul>
+    <ul class="bottom1">
+      <li>
+        {{ id }}号正压:<span>{{ tableData.positivePressure }}℃</span>
+      </li>
+      <li>
+        {{ id }}号负压:<span>{{ tableData.negativePressure }}℃</span>
+      </li>
+    </ul>
+    <ul class="bottom2">
+      <li>
+        {{ id }}号电压:<span>{{ tableData.positivePressure }}℃</span
+        >{{ id }}号前轴温度:<span>{{ tableData.frontAxleTemp }}℃</span>
+      </li>
+      <li>
+        {{ id }}号电流:<span>{{ tableData.negativePressure }}℃</span
+        >{{ id }}号后轴温度:<span>{{ tableData.rearAxleTemp }}℃</span>
+      </li>
+    </ul>
+    <div class="bottom3">液位:<span>{{ tableData.liquidLevel }}m</span></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["tableData", "id"],
+};
+</script>
+
+<style scoped>
+div {
+  font-size: 18px;
+}
+.header {
+  color: #4adefe;
+  position: relative;
+  top: 80px;
+  left: 180px;
+}
+.header span {
+  margin-left: 10px;
+  color: #f3db5c;
+}
+.center {
+  color: #4adefe;
+  position: relative;
+  top: 200px;
+  left: 180px;
+}
+.center span {
+  margin-left: 10px;
+  color: #f3db5c;
+  /* float: left; */
+}
+.bottom1 {
+  color: #4adefe;
+  position: relative;
+  top: 230px;
+  left: -20px;
+}
+.bottom1 span {
+  margin-left: 10px;
+  color: #f3db5c;
+  /* float: left; */
+}
+.bottom2 {
+  color: #4adefe;
+  position: relative;
+  top: 330px;
+  left: -20px;
+}
+.bottom2 span {
+  margin-left: 10px;
+  color: #f3db5c;
+  margin-right: 20px;
+  /* float: left; */
+}
+.bottom3 {
+  color: black;
+  position: relative;
+  top: 330px;
+  left: 210px;
+}
+.bottom3 span {
+  margin-left: 10px;
+  color: #f3db5c;
+}
+li {
+  list-style-type: none;
+  line-height: 30px;
+}
+</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,33 +4,48 @@
     type="card"
     @tab-click="handleClick"
   >
-    <el-tab-pane
-      label="系统数据"
-      name="first"
-    >
-      <el-breadcrumb separator-class="el-icon-arrow-right">
-        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item>主排水系统</el-breadcrumb-item>
-        <el-breadcrumb-item>系统数据</el-breadcrumb-item>
-      </el-breadcrumb>
-    </el-tab-pane>
-    <el-tab-pane
-      label="数据标准"
-      name="second"
-    >
-      <dataStandard></dataStandard>
-    </el-tab-pane>
-  </el-tabs>
+      <el-tab-pane
+        label="系统图"
+        name="third"
+      >
+        <config-img></config-img>
+      </el-tab-pane>
+      <el-tab-pane
+        label="数据看板"
+        name="fourth"
+      >
+        <dataBoard></dataBoard>
+      </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>
+          <el-breadcrumb-item>主排水系统</el-breadcrumb-item>
+          <el-breadcrumb-item>系统数据</el-breadcrumb-item>
+        </el-breadcrumb>
+      </el-tab-pane>
+      <el-tab-pane
+        label="数据标准"
+        name="second"
+      >
+        <dataStandard></dataStandard>
+      </el-tab-pane>
+
+    </el-tabs>
 </template>
 
 
 <script>
 import dataStandard from "./dataStandard/dataStandard";
+import dataBoard from "./dataBoard/dataBoard";
+import configImg from "./configImg";
 export default {
   name: "compressed",
   data() {
     return {
-      activeName: "first",
+      activeName: "third",
     };
   },
   methods: {
@@ -40,6 +55,8 @@ export default {
   },
   components: {
     dataStandard,
+    dataBoard,
+    configImg,
   },
 };
 </script>

src/views/gas/gas.vue

@@ -2,6 +2,9 @@
   <div>
     <!--标签-->
     <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-breadcrumb separator-class="el-icon-arrow-right">
@@ -83,9 +86,7 @@
       <el-tab-pane label="数据标准" name="second">
         <dataStandard></dataStandard>
       </el-tab-pane>
-      <el-tab-pane label="组态图" name="third">
-        <router-view></router-view>
-      </el-tab-pane>
+      
     </el-tabs>
   </div>
 </template>
@@ -140,12 +141,15 @@ export default {
       currentSubSystemId: 0,
       currentsubSystem: "",
       // 被激活页签的名称
-      activeName: "first",
+      activeName: "third",
       systemName: "瓦斯抽放系统",
     };
   },
   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,16 +1,30 @@
 <template>
   <div>
     <!--标签-->
-    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-      <el-tab-pane label="系统数据" name="first">
+    <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"
+      >
         <systemData></systemData>
       </el-tab-pane>
-      <el-tab-pane label="数据标准" name="second">
+      <el-tab-pane
+        label="数据标准"
+        name="second"
+      >
         <dataStandard></dataStandard>
       </el-tab-pane>
-      <el-tab-pane label="系统图" name="third">
-        <router-view></router-view>
-      </el-tab-pane>
+
     </el-tabs>
   </div>
 
@@ -18,34 +32,38 @@
 
 
 <script>
-  import dataStandard from "./dataStandard/dataStandard";
-  import systemData from "./systemData";
-  export default {
-    name: "mining",
-    data() {
-      return {
-        activeName: 'first',
-        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/monitor/monitor.vue

@@ -2,15 +2,16 @@
   <div>
     <!--标签-->
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="系统图" name="zutai">
+        <configImg></configImg>
+      </el-tab-pane>
       <el-tab-pane label="系统数据" name="first">
         <systemData></systemData>
       </el-tab-pane>
       <el-tab-pane label="数据标准" name="second">
         <dataStandard></dataStandard>
       </el-tab-pane>
-      <el-tab-pane label="组态图" name="zutai">
-        <configImg></configImg>
-      </el-tab-pane>
+      
     </el-tabs>
   </div>
 </template>
@@ -24,7 +25,7 @@ export default {
   name: "monitor",
   data() {
     return {
-      activeName: "first",
+      activeName: "zutai",
       checkVisible: "false",
     };
   },

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>
@@ -10,12 +17,7 @@
     <el-tab-pane label="数据标准" name="second">
       <dataStandard></dataStandard>
     </el-tab-pane>
-    <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-tabs>
 </template>
 
@@ -28,7 +30,7 @@ export default {
   name: "compressed",
   data() {
     return {
-      activeName: "first",
+      activeName: "third",
     };
   },
   methods: {

src/views/transportation/transportation.vue

@@ -2,15 +2,15 @@
     <div>
       <!--标签-->
       <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">
           <systemData></systemData>
         </el-tab-pane>
         <el-tab-pane label="数据标准" name="second">
           <dataStandard></dataStandard>
         </el-tab-pane>
-        <el-tab-pane label="组态图" name="third">
-          <router-view></router-view>
-        </el-tab-pane>
       </el-tabs>
     </div>
   
@@ -25,10 +25,15 @@
         name: "auxiliarytrans",
         data() {
             return {
-                activeName: 'first',
+                activeName: 'third',
                 checkVisible: 'false'
             };
         },
+        mounted(){
+          this.$router.push({
+                    path: "/transportation/mainpage"
+                  })
+        },
         methods: {
             handleClick(tab, event) {
                 if(tab.name == "third"){

src/views/tunnelling/tunnelling.vue

@@ -2,15 +2,15 @@
   <div>
     <!--标签-->
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="系统图" name="zutai">
+        <zutai></zutai>
+      </el-tab-pane>
       <el-tab-pane label="系统数据" name="first">
         <systemData></systemData>
       </el-tab-pane>
       <el-tab-pane label="数据标准" name="second">
         <dataStandard></dataStandard>
       </el-tab-pane>
-      <el-tab-pane label="组态图" name="zutai">
-        <zutai></zutai>
-      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -24,7 +24,7 @@
         name: "tunnelling",
         data() {
             return {
-                activeName: 'first',
+                activeName: 'zutai',
                 checkVisible: 'false'
             };
         },

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"
@@ -23,6 +23,7 @@
   </div>
 </template>
 
+
 <script>
 import { mapState } from "vuex";
 
@@ -39,9 +40,15 @@ export default {
           label: "三相相电流",
         },
       ],
-      title:'三相线电压',
-      type: ['Uab_after','Ubc_after','Uca_after'],
-      unit:'V',
+      id: 89,
+      title: "三相线电压",
+      type: [
+        "xiandianyauab_after",
+        "xiandianyaubc_after",
+        "xiandianyauca_after",
+      ],
+      legend: ["三相线电压Uab", "三相线电压Ubc", "三相线电压Uca"],
+      unit: "V",
       currentChartId: 1,
       xData: new Array(30).fill("-"),
       y1Data: new Array(30).fill("-"),
@@ -53,36 +60,115 @@ export default {
         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;
           },
         },
+        grid: {
+          top: "5%",
+          left: "10%",
+          right: "10%",
+          bottom: "7%",
+          containLabel: true,
+        },
         legend: {
-          orient: "vertical",
-          x: "left",
-          y: "top",
-          // data: ["抽气流量", "排气流量"],
+          align: "left",
+          right: "4%",
+          top: "-1%",
+          type: "plain",
           textStyle: {
-            fontWeight: "normal",
-            color: "#fff",
+            color: "#7ec7ff",
+            fontSize: 11,
           },
+          // icon:'rect',
+          itemGap: 21,
+          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,
         },
         yAxis: [
           {
@@ -126,149 +212,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: "三相线电压Uab",
             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: "三相线电压Ubc",
             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: "三相线电压Uca",
             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 +386,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();
     },
     // 选择要展示的参数
@@ -300,29 +401,39 @@ 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 = [
+            "xiandianyauab_after",
+            "xiandianyaubc_after",
+            "xiandianyauca_after",
+          ];
+          this.legend = ["三相线电压Uab", "三相线电压Ubc", "三相线电压Uca"];
+          break;
+        // 三相相电流
+        case 2:
           this.unit = "A";
-          this.type = ['Ia','Ib','Ic'];
-          break
-       
+          this.type = [
+            "xiangdianliuia_after",
+            "xiangdianliuib_after",
+            "xiangdianliuic_after",
+          ];
+          this.legend = ["三相相电流Ia", "三相相电流Ib", "三相相电流Ic"];
+          break;
       }
-        this.count = 0;
-        this.xData = new Array(30).fill("-");
-        this.y1Data = new Array(30).fill("-");
+      console.log(this.legend);
+      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;
       // 先扩展数组，然后删除多余元素
-      console.log("data", data);
+      
+      // console.log("data", data);
+      // console.log('this.legend',this.legend);
       if (this.count < 30) {
         for (let i = 0; i < data.length; i++) {
           this.y1Data[this.count] = data[i][this.type[0]];
@@ -352,17 +463,17 @@ export default {
         ],
         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);
@@ -405,7 +516,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();
   },
 };

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,15 +39,16 @@ 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: {
+       option: {
         color: ["#41D6C3", "#FA8072"],
         tooltip: {
           trigger: "axis",
@@ -67,16 +68,23 @@ export default {
           extraCssText:
             "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
           formatter: (params) => {
-            console.log("params", params);
+            // console.log("params", params);
             var result = `${this.title}：${params[0].data}${this.unit} <br/>`;
             return result;
           },
         },
+        grid: {
+        	top: '3%',
+        	left: '10%',
+        	right: '10%',
+        	bottom: '10%',
+        	containLabel: true
+        },
         legend: {
           orient: "vertical",
           x: "left",
           y: "top",
-          // data: ["抽气流量", "排气流量"],
+          data: [],
           textStyle: {
             fontWeight: "normal",
             color: "#fff",
@@ -124,59 +132,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: [],
-          }
+          },
         ],
       },
     };
@@ -193,11 +205,14 @@ 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();
     },
     // 选择要展示的参数
     selectParm() {
+      // console.log(this.parmoptions);
       for (let i in this.parmoptions) {
         if (this.parmoptions[i].id == this.currentChartId) {
           this.title = this.parmoptions[i].label;
@@ -206,27 +221,24 @@ 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;
       // 先扩展数组，然后删除多余元素
-      console.log("data", data);
+      // console.log("data", data);
       if (this.count < 30) {
         for (let i = 0; i < data.length; i++) {
           this.yData[this.count] = data[i][this.type];
@@ -251,8 +263,8 @@ export default {
         series: [
           {
             name: this.unit,
-            data: this.y1Data,
-          }
+            data: this.yData,
+          },
         ],
       });
       // console.log("this.paiqidata", this.paiqidata);
@@ -295,7 +307,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();
   },
 };

src/views/ventilate/ventilate.vue

@@ -6,6 +6,18 @@
       type="card"
       @tab-click="handleClick"
     >
+      <el-tab-pane
+        label="系统图"
+        name="third"
+      >
+        <config-img></config-img>
+      </el-tab-pane>
+      <el-tab-pane
+        label="数据看板"
+        name="fourth"
+      >
+        <data-board></data-board>
+      </el-tab-pane>
       <el-tab-pane
         label="系统数据"
         name="first"
@@ -18,15 +30,7 @@
       >
         <dataStandard></dataStandard>
       </el-tab-pane>
-      <el-tab-pane
-        label="系统图"
-        name="third"
-      >
-       <config-img></config-img>
-      </el-tab-pane>
-      <el-tab-pane label="数据看板" name="fourth">
-        <data-board></data-board>
-      </el-tab-pane>
+
     </el-tabs>
   </div>
 </template>
@@ -35,25 +39,24 @@
 <script>
 import dataStandard from "./dataStandard";
 import systemData from "./systemData";
-import configImg from '@/views/ventilate/configImg/configImg'
-import dataBoard from '@/views/ventilate/dataBoard/dataBoard'
+import configImg from "@/views/ventilate/configImg/configImg";
+import dataBoard from "@/views/ventilate/dataBoard/dataBoard";
 export default {
   name: "ventilate",
   data() {
     return {
-      activeName: "first",
+      activeName: "third",
       checkVisible: "false",
     };
   },
   methods: {
-    handleClick(tab, event) {
-    },
+    handleClick(tab, event) {},
   },
   components: {
     dataStandard,
     systemData,
     configImg,
-    dataBoard
+    dataBoard,
   },
 };
 </script>