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

src/components/beam_tube/dingbanChart.vue

@@ -44,7 +44,7 @@ export default {
           top: "12%",
           bottom: 0,
           right: 0,
-          left: 0,
+          left: "-7%",
           containLabel: true,
         },
         xAxis: {

src/components/beam_tube/dingbanLine.vue

@@ -18,6 +18,9 @@
 		},
 		data() {
 			return {
+				myChart:null,
+				yData1: [],
+				clickname:'回风巷3#监测点100m',
 				dingbanData: [{
 						name: "1#监测点0m",
 						value: [
@@ -194,7 +197,70 @@
 						],
 					},
 				],
-				option: {
+
+			};
+		},
+		computed: {
+			...mapState(["websocketIP"]),
+		},
+		created() {
+			// this.getData();
+			// var index = 190;
+			for (var i = 0; i < 30; i++) {
+			// this.zhijiaId.push(index--);
+			var data = parseInt(Math.random() * (40 - 25 + 1) + 25, 10);
+			this.yData1.push(data);
+			}
+			console.log(this.yData1);
+		},
+		mounted() {
+			// 先画图
+
+			console.log('this.dingbanData', this.chartData);
+			this.myChart = this.$echarts.init(this.$refs.testLine);
+			this.updateChart();
+				
+			// this.websocket = new WebSocket(
+			//   `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+			// );
+			// this.initWebSocket();
+			this.timer1 = setInterval(() => {
+					this.yData1.shift(this.yData1[0]);
+					this.yData1.push(parseInt(Math.random() * (30 - 25 + 1) + 25, 25));
+					console.log(this.yData1);
+					this.myChart.setOption({
+						series: [{
+								name: this.clickname,
+								data: this.yData1,
+							}],
+					});
+				}, 3000);
+			var index = -1;
+			var threeValue = [];
+			this.$bus.$on("dingbanPoint", (data) => {
+				this.clickname=data;
+				console.log(this.clickname);
+				if(this.timer1){
+					clearInterval(this.timer1);	
+				}
+				this.timer2 = setInterval(()=>{
+					this.yData1.shift(this.yData1[0]);
+					this.yData1.push(parseInt(Math.random() * (30 - 25 + 1) + 25, 25));
+					this.myChart.setOption({
+								series: [{
+										name: this.clickname,
+										data: this.yData1,
+									}],
+							});
+							
+						},3000);
+
+				})
+				
+		},
+		methods: {
+			updateChart() {
+				const option = {
 					tooltip: {
 						trigger: "axis",
 						backgroundColor: "transparent",
@@ -259,24 +325,7 @@
       }</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;
@@ -326,7 +375,7 @@
 							show: false
 						},
 						type: "value",
-					}, ],
+					}],
 					xAxis: [{
 						// type: "time", // x轴为 时间轴
 						interval: 0,
@@ -348,15 +397,15 @@
 						},
 						boundaryGap: false,
 						data: [],
-					}, ],
+					}],
 					title: {
-					  text: '顶板离层曲线图',
-					  padding: [5, 170],
-					  textStyle: {
-					    fontWeight: "normal", //标题颜色
-					    color: "#4ADEFE",
-					    fontSize:15
-					  },
+						text: '顶板离层曲线图',
+						padding: [5, 170],
+						textStyle: {
+							fontWeight: "normal", //标题颜色
+							color: "#4ADEFE",
+							fontSize: 15
+						},
 					},
 
 					series: [{
@@ -405,175 +454,20 @@
 									shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
 								},
 							},
-							data:[
-  10,  4, 5, 10,  2,  8, 10,  4, 9,
-   1, 10, 9,  0,  6,  6,  6, 11, 4,
-   1,  3, 0,  7, 11, 11,  0,  4, 7,
-   3,  2, 8
-],
-						},
-						{
-							name: '5#监测点200m',
-							type: "line",
-							symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
-							showAllSymbol: true,
-							symbolSize: 0,
-							smooth: true,
-							lineStyle: {
-								normal: {
-									width: 2,
-									color: "rgba(255, 255, 0,1)", // 线条颜色
-								},
-								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, 设置图形的阴影效果。
-								},
-							},
-							data:[
-  2,  6, 1, 5, 0, 1, 1, 1, 9,
-  5, 11, 3, 6, 4, 6, 6, 4, 2,
-  8,  9, 5, 7, 1, 1, 2, 9, 5,
-  2,  5, 1
-],
-						},
-						{
-							name: '1#监测点0m',
-							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:[
-   2,  2,  8, 5,  0, 5, 11, 11, 2,
-   8, 11, 11, 2,  8, 1,  3,  8, 2,
-   8,  6, 11, 8, 10, 9,  8,  0, 1,
-  11,  4,  6
-],
-						},
-					],
-				},
-			};
-		},
-		computed: {
-			...mapState(["websocketIP"]),
+							data: this.yData1
+						}],
+				}
+			 this.myChart.setOption(option);
+			}
+	
 		},
 
-		mounted() {
-			// 先画图
-       console.log('this.dingbanData',this.chartData);
-			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();
-			var index = -1;
-			var threeValue = [];
-			this.$bus.$on("dingbanPoint", (data) => {
-				index++;
-				index = index % 3;
-				console.log(index);
-				console.log("收到了数据", data);
-				// 查询该测点对应的数据，并展示到图中
-				var filterData = this.dingbanData.filter((item) => {
-					return item.name == data;
-				});
-
-				threeValue[index] = filterData;
-				console.log("threeValue", threeValue[0][0].name);
-
-				this.myChart.setOption({
-					xAxis: [{
-						data: [],
-					}, ],
-					series: [{
-							name: threeValue[0][0].name,
-							data: threeValue[0][0].value,
-						},
-						{
-							name: threeValue[1][0].name,
-							data: threeValue[1][0].value,
-						},
-						{
-							name: threeValue[2][0].name,
-							data: threeValue[2][0].value,
-						},
-					],
-				});
-			});
-		},
 		beforeDestroy() {
 			this.$bus.$off("dingbanPoint", (data) => {
 				console.log(data);
 			});
+			clearInterval(this.timer1);
+			clearInterval(this.timer2);
 		},
 	};
 </script>

src/components/beam_tube/maosuoChart.vue

@@ -44,7 +44,7 @@ export default {
           top: "12%",
           bottom: 0,
           right: 0,
-          left: 0,
+          left: "-7%",
           containLabel: true,
         },
         title: {

src/components/beam_tube/maosuoLine.vue

@@ -1,233 +1,296 @@
 <template>
-  <!-- 实时数据曲线 最多叠加三条 -->
-  <div>
-    <div
-      ref="testLine"
-      style="width: 450px; height: 200px;margin:-5px 0px 0px -40px;"
-    ></div>
-  </div>
+	<!-- 实时数据曲线 最多叠加三条 -->
+	<div>
+		<div ref="testLine" style="width: 450px; height: 200px; margin:-5px 0px 0px -40px"></div>
+	</div>
 </template>
 
 <script>
-import { mapState } from "vuex";
-export default {
-  props: {
-    chartData: {
-      type: Array,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      dingbanData: [
-        {
-          name: "4#监测点150m",
-          value: [
-            9,
-            7,
-            8,
-            7,
-            6,
-            8,
-            0,
-            2,
-            2,
-            4,
-            4,
-            6,
-            4,
-            0,
-            3,
-            0,
-            8,
-            8,
-            6,
-            2,
-            5,
-            4,
-            6,
-            4,
-            11,
-            1,
-            4,
-            0,
-            8,
-            8,
-          ],
-        },
-        {
-          name: "2#监测点50m",
-          value: [
-            0,
-            3,
-            0,
-            6,
-            4,
-            3,
-            9,
-            0,
-            4,
-            3,
-            11,
-            7,
-            1,
-            11,
-            11,
-            5,
-            7,
-            11,
-            10,
-            5,
-            7,
-            10,
-            6,
-            6,
-            7,
-            0,
-            0,
-            0,
-            6,
-            3,
-          ],
-        },
-        {
-          name: "3#监测点100m",
-          value: [  
-            2,
-            2,
-            8,
-            5,
-            0,
-            5,
-            11,
-            11,
-            2,
-            8,
-            11,
-            11,
-            2,
-            8,
-            1,
-            3,
-            8,
-            2,
-            8,
-            6,
-            11,
-            8,
-            10,
-            9,
-            8,
-            0,
-            1,
-            11,
-            4,
-            6,
-          ],
-        },
-        {
-          name: "4#监测点150m",
-          value: [
-            2,
-            6,
-            1,
-            5,
-            0,
-            1,
-            1,
-            1,
-            9,
-            5,
-            11,
-            3,
-            6,
-            4,
-            6,
-            6,
-            4,
-            2,
-            8,
-            9,
-            5,
-            7,
-            1,
-            1,
-            2,
-            9,
-            5,
-            2,
-            5,
-            1,
-          ],
-        },
-        {
-          name: "5#监测点200m",
-          value: [
-            10,
-            4,
-            5,
-            10,
-            2,
-            8,
-            10,
-            4,
-            9,
-            1,
-            10,
-            9,
-            0,
-            6,
-            6,
-            6,
-            11,
-            4,
-            1,
-            3,
-            0,
-            7,
-            11,
-            11,
-            0,
-            4,
-            7,
-            3,
-            2,
-            8,
-          ],
-        },
-      ],
-      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;
+	import {
+		mapState
+	} from "vuex";
+	export default {
+		props: {
+			chartData: {
+				type: Array,
+				required: true,
+			},
+		},
+		data() {
+			return {
+				myChart:null,
+				yData1: [],
+				clickname:'回风巷3#监测点100m',
+				dingbanData: [{
+						name: "1#监测点0m",
+						value: [
+							9,
+							7,
+							8,
+							7,
+							6,
+							8,
+							0,
+							2,
+							2,
+							4,
+							4,
+							6,
+							4,
+							0,
+							3,
+							0,
+							8,
+							8,
+							6,
+							2,
+							5,
+							4,
+							6,
+							4,
+							11,
+							1,
+							4,
+							0,
+							8,
+							8,
+						],
+					},
+					{
+						name: "2#监测点50m",
+						value: [
+							0,
+							3,
+							0,
+							6,
+							4,
+							3,
+							9,
+							0,
+							4,
+							3,
+							11,
+							7,
+							1,
+							11,
+							11,
+							5,
+							7,
+							11,
+							10,
+							5,
+							7,
+							10,
+							6,
+							6,
+							7,
+							0,
+							0,
+							0,
+							6,
+							3,
+						],
+					},
+					{
+						name: "3#监测点100m",
+						value: [
+							2,
+							2,
+							8,
+							5,
+							0,
+							5,
+							11,
+							11,
+							2,
+							8,
+							11,
+							11,
+							2,
+							8,
+							1,
+							3,
+							8,
+							2,
+							8,
+							6,
+							11,
+							8,
+							10,
+							9,
+							8,
+							0,
+							1,
+							11,
+							4,
+							6,
+						],
+					},
+					{
+						name: "4#监测点150m",
+						value: [
+							2,
+							6,
+							1,
+							5,
+							0,
+							1,
+							1,
+							1,
+							9,
+							5,
+							11,
+							3,
+							6,
+							4,
+							6,
+							6,
+							4,
+							2,
+							8,
+							9,
+							5,
+							7,
+							1,
+							1,
+							2,
+							9,
+							5,
+							2,
+							5,
+							1,
+						],
+					},
+					{
+						name: "5#监测点200m",
+						value: [
+							10,
+							4,
+							5,
+							10,
+							2,
+							8,
+							10,
+							4,
+							9,
+							1,
+							10,
+							9,
+							0,
+							6,
+							6,
+							6,
+							11,
+							4,
+							1,
+							3,
+							0,
+							7,
+							11,
+							11,
+							0,
+							4,
+							7,
+							3,
+							2,
+							8,
+						],
+					},
+				],
+
+			};
+		},
+		computed: {
+			...mapState(["websocketIP"]),
+		},
+		created() {
+			// this.getData();
+			// var index = 190;
+			for (var i = 0; i < 30; i++) {
+			// this.zhijiaId.push(index--);
+			var data = parseInt(Math.random() * (40 - 25 + 1) + 25, 10);
+			this.yData1.push(data);
+			}
+			console.log(this.yData1);
+		},
+		mounted() {
+			// 先画图
+
+			console.log('this.dingbanData', this.chartData);
+			this.myChart = this.$echarts.init(this.$refs.testLine);
+			this.updateChart();
+				
+			// this.websocket = new WebSocket(
+			//   `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+			// );
+			// this.initWebSocket();
+			this.timer1 = setInterval(() => {
+					this.yData1.shift(this.yData1[0]);
+					this.yData1.push(parseInt(Math.random() * (30 - 25 + 1) + 25, 25));
+					console.log(this.yData1);
+					this.myChart.setOption({
+						series: [{
+								name: this.clickname,
+								data: this.yData1,
+							}],
+					});
+				}, 3000);
+			var index = -1;
+			var threeValue = [];
+			this.$bus.$on("maosuoPoint", (data) => {
+				this.clickname=data;
+				console.log(this.clickname);
+				if(this.timer1){
+					clearInterval(this.timer1);	
+				}
+				this.timer2 = setInterval(()=>{
+					this.yData1.shift(this.yData1[0]);
+					this.yData1.push(parseInt(Math.random() * (30 - 25 + 1) + 25, 25));
+					this.myChart.setOption({
+								series: [{
+										name: this.clickname,
+										data: this.yData1,
+									}],
+							});
+							
+						},3000);
+
+				})
+				
+		},
+		methods: {
+			updateChart() {
+				const 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%;
@@ -262,425 +325,164 @@ export default {
       }</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: "mm",
-            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: '锚索应力曲线图',
-          padding: [5, 170],
-          textStyle: {
-            fontWeight: "normal", //标题颜色
-            color: "#4ADEFE",
-            fontSize:15
-          },
-        },
+							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",
 
-        series: [
-          {
-            name: "4#监测点150m",
-            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: [
-              10,
-              4,
-              5,
-              10,
-              2,
-              8,
-              10,
-              4,
-              9,
-              1,
-              10,
-              9,
-              0,
-              6,
-              6,
-              6,
-              11,
-              4,
-              1,
-              3,
-              0,
-              7,
-              11,
-              11,
-              0,
-              4,
-              7,
-              3,
-              2,
-              8,
-            ],
-          },
-          {
-            name: "2#监测点50m",
-            type: "line",
-            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
-            showAllSymbol: true,
-            symbolSize: 0,
-            smooth: true,
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: "rgba(255, 255, 0,1)", // 线条颜色
-              },
-              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, 设置图形的阴影效果。
-              },
-            },
-            data: [
-              2,
-              6,
-              1,
-              5,
-              0,
-              1,
-              1,
-              1,
-              9,
-              5,
-              11,
-              3,
-              6,
-              4,
-              6,
-              6,
-              4,
-              2,
-              8,
-              9,
-              5,
-              7,
-              1,
-              1,
-              2,
-              9,
-              5,
-              2,
-              5,
-              1,
-            ],
-          },
-          {
-            name: "3#监测点100m",
-            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: [
-              2,
-              2,
-              8,
-              5,
-              0,
-              5,
-              11,
-              11,
-              2,
-              8,
-              11,
-              11,
-              2,
-              8,
-              1,
-              3,
-              8,
-              2,
-              8,
-              6,
-              11,
-              8,
-              10,
-              9,
-              8,
-              0,
-              1,
-              11,
-              4,
-              6,
-            ],
-          },
-        ],
-      },
-    };
-  },
-  computed: {
-    ...mapState(["websocketIP"]),
-  },
+						data: this.legend,
+					},
+					grid: {
+						top: "15%",
+						left: "10%",
+						right: "10%",
+						bottom: "1%",
+						containLabel: true,
+					},
+					yAxis: [{
+						boundaryGap: [0, "100%"],
+						name: "mm",
+						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: '锚索应力曲线图',
+						padding: [5, 170],
+						textStyle: {
+							fontWeight: "normal", //标题颜色
+							color: "#4ADEFE",
+							fontSize: 15
+						},
+					},
 
-  mounted() {
-    // 先画图
-    console.log("this.dingbanData", this.chartData);
-    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();
-    var index = -1;
-    var threeValue = [];
-    this.$bus.$on("maosuoPoint", (data) => {
-      index++;
-      index = index % 3;
-      console.log(index);
-      console.log("收到了数据", data);
-      // 查询该测点对应的数据，并展示到图中
-      var filterData = this.dingbanData.filter((item) => {
-        return item.name == data;
-      });
-
-      threeValue[index] = filterData;
-      console.log("threeValue", threeValue[0][0].name);
+					series: [
+            {
+							name: '主运巷4#监测点150m',
+							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: this.yData1
+						}],
+				}
+			 this.myChart.setOption(option);
+			}
+	
+		},
 
-      this.myChart.setOption({
-        xAxis: [
-          {
-            data: [],
-          },
-        ],
-        series: [
-          {
-            name: threeValue[0][0].name,
-            data: threeValue[0][0].value,
-          },
-          {
-            name: threeValue[1][0].name,
-            data: threeValue[1][0].value,
-          },
-          {
-            name: threeValue[2][0].name,
-            data: threeValue[2][0].value,
-          },
-        ],
-      });
-    });
-  },
-  beforeDestroy() {
-    this.$bus.$off("maosuoPoint", (data) => {
-      console.log(data);
-    });
-  },
-};
+		beforeDestroy() {
+			this.$bus.$off("maosuoPoint", (data) => {
+				console.log(data);
+			});
+			clearInterval(this.timer1);
+			clearInterval(this.timer2);
+		},
+	};
 </script>
 <style scoped>
-.select-veido .el-select {
-  width: 100px;
-  margin-left: 10px;
-}
+	.select-veido .el-select {
+		width: 100px;
+		margin-left: 10px;
+	}
 
-.select-veido >>> .el-input--small .el-input__inner {
-  background: none;
-}
+	.select-veido>>>.el-input--small .el-input__inner {
+		background: none;
+	}
 
-.select-veido >>> .el-input__inner {
-  border: 0;
-}
+	.select-veido>>>.el-input__inner {
+		border: 0;
+	}
 </style>

src/components/beam_tube/scatterChart.vue

@@ -1,5 +1,8 @@
 <template>
-  <div ref="chart" style="width: 1600px; height: 200px"></div>
+  <div
+    ref="chart"
+    style="width: 1600px; height: 200px"
+  ></div>
 </template>
 
 <script>
@@ -18,8 +21,32 @@ export default {
         },
         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
+            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: {
@@ -70,21 +97,45 @@ export default {
   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,
-        },
-      ],
-    });
+   
+    var _that = this;
+    this.interval = setInterval(() => {
+      this.data.top = this.generateArr();
+      this.data.bottom = this.generateArr();
+      // console.log(" _that.data1", this.data.top);
+      var arr = [];
+      var newArr = [];
+      var newArr2 = [];
+      for (let i = 0; i < 26; i++) {
+        newArr = [i, "锚索应力", this.data.bottom[i] < 30 ? true : false];
+        newArr2 = [i, "顶板离层", this.data.top[i] < 30 ? true : false];
+        arr.push(newArr);
+        arr.push(newArr2);
+      }
+      // console.log(arr);
+      this.chart.setOption({
+        series: [
+          {
+            data: arr,
+          },
+        ],
+      });
+    }, 2000);
+    //  this.$once("hook:beforeDestroy", () => {
+    //   clearInterval(this.interval);
+    // });
+  },
+  methods: {
+    generateArr() {
+      var arr = [];
+      for (let i = 0; i < 26; i++) {
+        arr.push(parseInt(Math.random() * (40 - 10 + 1) + 10, 10));
+      }
+      return arr;
+    },
+  },
+  destroyed() {
+    clearInterval(this.interval);
   },
 };
 </script>

src/store/index.js

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

src/utils/api.js

@@ -12,7 +12,7 @@ axios.interceptors.request.use(config => {
     return Promise.reject(error)
 })
 
-let base = '';  //http://localhost:8085
+let base = '/bigdata';  //http://localhost:8085
 
 
 export const postRequest = (url, params) => {

src/views/app_product_process_monitoring/productProcessMonitoring.vue

@@ -32,5 +32,5 @@ html {
 .el-main {
   height: 900px;
 }
-</style>>
+</style>
 

src/views/beam_tube/configImg/index.vue

@@ -51,7 +51,7 @@
             <div>
               <maosuoChart :chartData="maosuoData"></maosuoChart>
             </div>
-          </el-col>    
+          </el-col>
           <!-- 实时数据曲线图 -->
           <el-col :span="6">
             <div class="grid-content bg-purple">
@@ -91,45 +91,45 @@ export default {
       },
       maosuoData: [
         {
-          name: "1#监测点0m",
+          name: "主运巷1#监测点0m",
           value: 78,
         },
         {
-          name: "2#监测点50m",
+          name: "辅运巷2#监测点50m",
           value: 87,
         },
         {
-          name: "3#监测点100m",
+          name: "主运巷3#监测点100m",
           value: 83,
         },
         {
-          name: "4#监测点150m",
+          name: "主运巷4#监测点150m",
           value: 88,
         },
         {
-          name: "5#监测点200m",
+          name: "回风巷5#监测点200m",
           value: 78,
         },
       ],
       dingbanData: [
         {
-          name: "1#监测点0m",
+          name: "主运巷1#监测点0m",
           value: 80,
         },
         {
-          name: "2#监测点50m",
+          name: "辅运巷2#监测点50m",
           value: 78,
         },
         {
-          name: "3#监测点100m",
+          name: "回风巷3#监测点100m",
           value: 89,
         },
         {
-          name: "4#监测点150m",
+          name: "辅运巷4#监测点150m",
           value: 78,
         },
         {
-          name: "5#监测点200m",
+          name: "主运巷5#监测点200m",
           value: 88,
         },
       ],
@@ -144,11 +144,28 @@ export default {
   mounted() {
     setInterval(() => {
       if (this.length < 1300) {
-        this.length += 10;
+        this.length += 1;
       }
     }, 100);
+    // var _that = this;
+    // this.interval = setInterval(() => {
+    //   _that.data1.top = _that.generateArr();
+    //   _that.data1.bottom = _that.generateArr();
+    //   console.log(" _that.data1", _that.data1);
+    // }, 2000);
+
+    // this.$once("hook:beforeDestroy", () => {
+    //   clearInterval(this.interval);
+    // });
   },
   methods: {
+    // generateArr() {
+    //   var arr = [];
+    //   for (let i = 0; i < 26; i++) {
+    //     arr.push(parseInt(Math.random() * (40 - 10 + 1) + 10, 10));
+    //   }
+    //   return arr;
+    // },
     compare(property) {
       return function (a, b) {
         var value1 = a[property];

src/views/drain/configImg/index.vue

@@ -2,7 +2,10 @@
   <div class="main">
     <!-- 背景图片 -->
     <div>
-      <img src="@/assets/img/drain/back.png" id="imgSwitch" />
+      <img
+        src="@/assets/img/drain/back.png"
+        id="imgSwitch"
+      />
     </div>
     <!-- 12个按钮 -->
     <div :class="['botton0', valve[0] ? 'green' : 'red']"></div>
@@ -19,13 +22,22 @@
     <div :class="['botton11', valve[11] ? 'green' : 'red']"></div>
     <!-- 3个数据表格 -->
     <div class="table1">
-      <tableData :tableData="tableData1" id="1"></tableData>
+      <tableData
+        :tableData="tableData1"
+        id="1"
+      ></tableData>
     </div>
     <div class="table2">
-      <tableData :tableData="tableData2" id="2"></tableData>
+      <tableData
+        :tableData="tableData2"
+        id="2"
+      ></tableData>
     </div>
     <div class="table3">
-      <tableData :tableData="tableData3" id="3"></tableData>
+      <tableData
+        :tableData="tableData3"
+        id="3"
+      ></tableData>
     </div>
   </div>
 </template>
@@ -34,20 +46,7 @@ import tableData from "@/views/drain/configImg/tableData";
 export default {
   data() {
     return {
-      valve: [
-        true,
-        true,
-        true,
-        true,
-        true,
-        true,
-        true,
-        true,
-        true,
-        true,
-        true,
-        true,
-      ],
+      valve: [1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1],
       tableData1: {
         pipelineFlow: 0.0,
         pipelineFlowTotal: 0.0,
@@ -87,10 +86,16 @@ export default {
     tableData,
   },
   mounted() {
-    this.valve = this.valve.map((item) => {
-      return (item = !item);
-    });
+    // this.valve = this.valve.map((item) => {
+    //   return (item = !item);
+    // });
+    setInterval(() => {
+      console.log(this.valve);
+      this.valve.shift();
+      this.valve.push(parseInt(Math.random() * 2, 10));
+    }, 3000);
   },
+  methods: {},
 };
 </script>
 

src/views/mining/envTest/index.vue

@@ -4,9 +4,9 @@
       <div class="center">
         <span class="title">工作面信息</span>
         <ul>
-          <li>设备能力:<span class="content">0bt</span></li>
-          <li>区域人数:<span class="content">0人</span></li>
-          <li>完成率:<span class="content">0%</span></li>
+          <li>设备能力:<span class="content">36bt</span></li>
+          <li>区域人数:<span class="content">12人</span></li>
+          <li>完成率:<span class="content">88%</span></li>
         </ul>
       </div>
       <div class="center">

src/views/mining/machines/index.vue

@@ -3,163 +3,163 @@
     <div class="title">
       <p style="color:#4adefe;">三机监控</p>
     </div>
-    <img style="width: 1300px;margin-left:100px" src="./top.png" />
+    <img style="width: 1300px;margin-left:100px" src="./顶部.png" />
     <div style="height: 50px"></div>
     <div class="row">
       <div class="square">
-        <img class="img" src="./sc.png" />
+        <img class="img" src="./刮板机.png" />
         <div class="inf">
           <div style="height: 20%;font-size: 20px;color: #4adefe;">刮板机 运行状态</div>
           <div class="details">
               <div>运行速度:
               <span>
-                 {{ data.transporter_speed }}m/s
+                 {{ data[0].transporter_speed }}m/s
               </span>
              </div>
             <div>电机功率:
               <span>
-                {{ data.transporter_power }}W
+                {{ data[0].transporter_power }}W
               </span>
             </div>
             <div>减速器油温:
               <span>
-                {{ data.transporter_reducerOilTemperature }}℃
+                {{ data[0].transporter_reducerOilTemperature }}℃
                 </span>
               </div>
             <div>电机电流:
               <span>
-                {{ data.transporter_current }}A
+                {{ data[0].transporter_current }}A
               </span>
             </div>
             <div>电机轴温:
               <span>
-                {{ data.transporter_motorTemperature }}℃
+                {{ data[0].transporter_motorTemperature }}℃
               </span>
             </div>
             <div>冷却水水压:
              <span>
-               {{ data.transporter_pressure }}Pa
+               {{ data[0].transporter_pressure }}Pa
               </span> 
               </div>
             <div>电机电压:
              <span>
-               {{ data.transporter_voltage }}V
+               {{ data[0].transporter_voltage }}V
              </span> 
               </div>
             <div>减速器轴温:
               <span>
-                {{ data.transporter_reducerShaftTemperature }}℃
+                {{ data[0].transporter_reducerShaftTemperature }}℃
               </span>
             </div>
             <div>冷却水水温:
               <span>
-                {{ data.transporter_waterTemperature }}℃
+                {{ data[0].transporter_waterTemperature }}℃
               </span>
            </div>
           </div>
         </div>
       </div>
       <div class="square">
-        <img class="img" src="./breaker.png" />
+        <img class="img" src="./破碎机.png" />
         <div class="inf">
           <div style="height: 20%;font-size: 20px;color: #4adefe;">破碎机 运行状态</div>
           <div class="details">
-             <div>运行速度:
+           <div>运行速度:
               <span>
-                 {{ data.transporter_speed }}m/s
+                 {{ data[1].transporter_speed }}m/s
               </span>
              </div>
             <div>电机功率:
               <span>
-                {{ data.transporter_power }}W
+                {{ data[1].transporter_power }}W
               </span>
             </div>
             <div>减速器油温:
               <span>
-                {{ data.transporter_reducerOilTemperature }}℃
+                {{ data[1].transporter_reducerOilTemperature }}℃
                 </span>
               </div>
             <div>电机电流:
               <span>
-                {{ data.transporter_current }}A
+                {{ data[1].transporter_current }}A
               </span>
             </div>
             <div>电机轴温:
               <span>
-                {{ data.transporter_motorTemperature }}℃
+                {{ data[1].transporter_motorTemperature }}℃
               </span>
             </div>
             <div>冷却水水压:
              <span>
-               {{ data.transporter_pressure }}Pa
+               {{ data[1].transporter_pressure }}Pa
               </span> 
               </div>
             <div>电机电压:
              <span>
-               {{ data.transporter_voltage }}V
+               {{ data[1].transporter_voltage }}V
              </span> 
               </div>
             <div>减速器轴温:
               <span>
-                {{ data.transporter_reducerShaftTemperature }}℃
+                {{ data[1].transporter_reducerShaftTemperature }}℃
               </span>
             </div>
             <div>冷却水水温:
               <span>
-                {{ data.transporter_waterTemperature }}℃
+                {{ data[1].transporter_waterTemperature }}℃
               </span>
            </div>
           </div>
         </div>
       </div>
       <div class="square">
-        <img class="img" src="./tr.png" />
+        <img class="img" src="./转载机.png" />
         <div class="inf">
           <div style="height: 20%; font-size: 20px; color: #4adefe;">转载机 运行状态</div>
           <div class="details">
-            <div>运行速度:
+          <div>运行速度:
               <span>
-                 {{ data.transporter_speed }} m/s
+                 {{ data[2].transporter_speed }}m/s
               </span>
              </div>
             <div>电机功率:
               <span>
-                {{ data.transporter_power }}W
+                {{ data[2].transporter_power }}W
               </span>
             </div>
             <div>减速器油温:
               <span>
-                {{ data.transporter_reducerOilTemperature }}℃
+                {{ data[2].transporter_reducerOilTemperature }}℃
                 </span>
               </div>
             <div>电机电流:
               <span>
-                {{ data.transporter_current }}A
+                {{ data[2].transporter_current }}A
               </span>
             </div>
             <div>电机轴温:
               <span>
-                {{ data.transporter_motorTemperature }}℃
+                {{ data[2].transporter_motorTemperature }}℃
               </span>
             </div>
             <div>冷却水水压:
              <span>
-               {{ data.transporter_pressure }}Pa
+               {{ data[2].transporter_pressure }}Pa
               </span> 
               </div>
             <div>电机电压:
              <span>
-               {{ data.transporter_voltage }}V
+               {{ data[2].transporter_voltage }}V
              </span> 
               </div>
             <div>减速器轴温:
               <span>
-                {{ data.transporter_reducerShaftTemperature }}℃
+                {{ data[2].transporter_reducerShaftTemperature }}℃
               </span>
             </div>
             <div>冷却水水温:
               <span>
-                {{ data.transporter_waterTemperature }}℃
+                {{ data[2].transporter_waterTemperature }}℃
               </span>
            </div>
           </div>
@@ -169,11 +169,13 @@
   </div>
 </template>
 <script>
+import { mapState } from "vuex";
 export default {
+  
   name: "compressors",
   data() {
     return {
-      data: {
+      data: [{
         transporter_speed:0,
         transporter_power:10,
         transporter_reducerOilTemperature:30,
@@ -183,19 +185,95 @@ export default {
         transporter_voltage:232,
         transporter_reducerShaftTemperature:10,
         transporter_waterTemperature:50,
-      },
+      
+      },{
+         transporter_speed:3,
+        transporter_power:10,
+        transporter_reducerOilTemperature:30,
+        transporter_current:20,
+        transporter_motorTemperature:60,
+        transporter_pressure:20,
+        transporter_voltage:232,
+        transporter_reducerShaftTemperature:10,
+        transporter_waterTemperature:50,
+
+      },{
+         transporter_speed:30,
+        transporter_power:10,
+        transporter_reducerOilTemperature:30,
+        transporter_current:20,
+        transporter_motorTemperature:60,
+        transporter_pressure:20,
+        transporter_voltage:232,
+        transporter_reducerShaftTemperature:10,
+        transporter_waterTemperature:50,
+
+      }
+      ]
     };
   },
-  props: {
-    url: String,
+
+computed: {
+    ...mapState(["websocketIP"]),
   },
   mounted() {
-    
-   
+    //如果id确定，再修改
+//     let data0 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
+//     this.initWebSocket(data0, "data0");
+//   let data1 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
+//     this.initWebSocket(data1, "data1");
+// let data2 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
+//     this.initWebSocket(data2, "data2");
+
   },
-  beforeDestroy() {
-    
+  methods: {
+    getData0(data) {
+      this.data[0]=data[0];
+
+    },
+        getData1(data) {
+      this.data[1]=data[1];
+
+    },
+        getData2(data) {
+      this.data[2]=data[2];
+
+    },
+    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;
+        }
+        if (type == "data0") {
+          this.getData0(JSON.parse(event.data));
+        } else if (type == "data1") {
+        this.getData1(JSON.parse(event.data));
+        } else if (type == "data2") {
+          this.getData2(JSON.parse(event.data));
+        } 
+      };
+      // 连接关闭的回调
+      websocket.onclose = () => {
+        console.log("WebSocket连接关闭    状态码：" + websocket.readyState);
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        websocket.close();
+      });
+    },
   },
+
+
+
 };
 </script>
 
@@ -212,10 +290,10 @@ export default {
   position: relative;
   .title {
     position: relative;
-    height: 6%;
+    height: 5%;
     p {
       color: #fff;
-      font-size: 40px;
+      font-size: 30px;
       margin: 0;
       position: absolute;
       left: 50%;
@@ -228,7 +306,7 @@ export default {
     border-color: #302b33;
     margin-left: 200px;
     margin-bottom: 20px;
-    margin-top: -20px
+    margin-top: -25px
   }
   .container {
     display: grid;

src/views/mining/mining.vue

@@ -41,7 +41,7 @@ export default {
   name: "mining",
   data() {
     return {
-      activeName: "fifth",
+      activeName: "third",
       checkVisible: "false",
     };
   },

src/views/mining/supporting/suppEchart.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="testLine"
-    style="width: 650px; height: 300px; margin: 0px auto"
+    style="width: 1650px; height: 240px; margin: -60px 0 0 0"
   ></div>
 </template>
 

src/views/mining/supporting/supporting.vue

@@ -334,11 +334,13 @@
       </g>
     </svg>
    </div>
-    <el-row style="margin-top:-100px">
-      <el-col :span="12">
+    <el-row style="margin-top:-150px">
+      <el-col :span="24">
         <suppEchart></suppEchart>
       </el-col>
-      <el-col :span="12">
+    </el-row>
+    <el-row style="margin-top:-100px">
+      <el-col :span="24">
         <tuiyiEchart></tuiyiEchart>
       </el-col>
     </el-row>

src/views/mining/supporting/tuiyiEchart.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="testLine"
-    style="width: 650px; height: 300px; margin: 0px auto"
+    style="width: 1650px; height: 240px; margin: 0px 0 0 0"
   ></div>
 </template>
 

src/views/ventilate/configImg/configImg.vue

@@ -252,17 +252,31 @@ export default {
   data() {
     return {
       fan1: {
-        motor1: new Array(10).fill(1),
-        motor2: new Array(10).fill(1),
-        pipeline: new Array(7).fill(1),
+        motor1: [1, 3, 3, 2, 3, 1, 1, 2, 2, 2],
+        motor2: [2, 3, 3, 1, 1, 1, 2, 3, 1, 1],
+        pipeline:[2, 3, 3, 2, 3, 2, 1],
       },
       fan2: {
-        motor1: new Array(10).fill(2),
-        motor2: new Array(10).fill(2),
-        pipeline: new Array(7).fill(2),
+        motor1: [1, 3, 3, 2, 3, 1, 1, 2, 2, 2],
+        motor2: [1, 2, 2, 2, 3, 3, 3, 2, 2, 2],
+        pipeline: [1, 1, 1, 3, 1, 3, 3]
       },
     };
   },
+  mounted(){
+    // setInterval(() => {
+    //   this.fan1.motor1.shift();
+    //   this.fan1.motor1.push(this.generate(1,3));
+    
+    //   console.log(this.fan1.motor1);
+    // }, 3000);
+
+  },
+  methods: {
+    generate(min,max) {
+       return (parseInt(Math.random() * (max - min + 1) + min, 10));
+    },
+  }
 };
 </script>
 

vue.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+    // publicPath:"./",
     lintOnSave: false,
     devServer: {
         host: 'localhost',
@@ -11,16 +12,18 @@ module.exports = {
                     '^/metadata': ''
                 },
             },
-            // '/': {
-            //     // target: ' http://192.168.1.124:8081',
-            //     target: 'http://localhost:8082',
-            //     // target: 'http://192.168.1.103:8081',
-            //     changeOrigin: true,
-            //     ws: false,
-            //     pathRewrite: {
-            //         '^/': ''
-            //     },
-            // },
+            // 大数据平台
+            '/bigdata': {
+                // target: ' http://192.168.1.124:8081',
+                target: ' http://182.92.79.148:8081',
+                // target: 'http://192.168.1.103:8081',
+                changeOrigin: true,
+                ws: false,
+                pathRewrite: {
+                    '^/bigdata': '/'
+                },
+            },
+        
         },
     }
 }