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/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/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>