修改背景+退出按钮+伪造数据：瓦斯，矿压，供电，排水

src/assets/css/global.css

@@ -68,4 +68,12 @@ body,
   width: 60%;
   height: 100%;
   overflow: hidden;
+}
+/* .table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  } */
+  .el-tabs__nav-scroll {
+    overflow: hidden;
+    background-color: aliceblue;
 }

src/components/beam_tube/dingbanLine.vue

@@ -1,296 +1,308 @@
 <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 {
-				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,
-						],
-					},
-				],
+import { mapState } from "vuex";
+export default {
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      myChart: null,
+      xData: [],
+      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;
+    let now = new Date();
+    let len = 30;
+    while (len--) {
+      let data = parseInt(Math.random() * (40 - 25 + 1) + 25, 10);
+      this.yData1.unshift(data);
+      this.xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ""));
+      now = new Date(+now - 2000);
+    }
 
-			};
-		},
-		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.yData1);
+    console.log(this.xData);
+  },
+  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);
+    console.log("this.dingbanData", this.chartData);
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.updateChart();
 
-				})
-				
-		},
-		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;
+    // this.websocket = new WebSocket(
+    //   `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+    // );
+    // this.initWebSocket();
+    this.timer1 = setInterval(() => {
+      let now = new Date();
+      now = now.toLocaleTimeString().replace(/^\D*/, "");
+      this.xData.shift();
+      this.xData.push(now);
+      this.yData1.shift();
+      this.yData1.push(parseInt(Math.random() * (30 - 25 + 1) + 25, 25));
+      console.log(this.yData1);
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        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);
+    });
+  },
+  methods: {
+    fillZero(str) {
+      var realNum;
+      if (str < 10) {
+        realNum = "0" + str;
+      } else {
+        realNum = str;
+      }
+      return realNum;
+    },
+    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%;
@@ -328,160 +340,167 @@
 		
 	</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",
+            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
-						},
-					},
+          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,
+          },
+        },
 
-					series: [{
-							name: '3#监测点100m',
-							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);
-			}
-	
-		},
+        series: [
+          {
+            name: "3#监测点100m",
+            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);
+    },
+  },
 
-		beforeDestroy() {
-			this.$bus.$off("dingbanPoint", (data) => {
-				console.log(data);
-			});
-			clearInterval(this.timer1);
-			clearInterval(this.timer2);
-		},
-	};
+  beforeDestroy() {
+    this.$bus.$off("dingbanPoint", (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/maosuoLine.vue

@@ -19,6 +19,7 @@
 		data() {
 			return {
 				myChart:null,
+				xData:[],
 				yData1: [],
 				clickname:'回风巷3#监测点100m',
 				dingbanData: [{
@@ -203,16 +204,21 @@
 		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);
-		},
+		 created() {
+    // this.getData();
+    // var index = 190;
+    let now = new Date();
+    let len = 30;
+    while (len--) {
+      let data = parseInt(Math.random() * (40 - 25 + 1) + 25, 10);
+      this.yData1.unshift(data);
+      this.xData.unshift(now.toLocaleTimeString().replace(/^\D*/, ""));
+      now = new Date(+now - 2000);
+    }
+
+    console.log(this.yData1);
+    console.log(this.xData);
+  },
 		mounted() {
 			// 先画图
 
@@ -225,35 +231,33 @@
 			// );
 			// 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;
+      let now = new Date();
+      now = now.toLocaleTimeString().replace(/^\D*/, "");
+      this.xData.shift();
+      this.xData.push(now);
+      this.yData1.shift();
+      this.yData1.push(parseInt(Math.random() * (30 - 15 + 1) + 25, 15));
+      console.log(this.yData1);
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        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);
+			
 
 				})
 				

src/components/mining/monitor/error_recording.vue

@@ -106,8 +106,8 @@ export default {
   width: 6px;
   height: 6px;
 }
-.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
-  // color: #4adefe;
-  // background-color: #f3db5c;
-}
+// .table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+//   // color: #4adefe;
+//   // background-color: #f3db5c;
+// }
 </style>

src/components/power_supply/configImg/Table.vue

@@ -98,16 +98,16 @@
         ><div class="grid-content bg-purple">
           <table class="table2">
             <tr align="left">
-              <td>Ua(KV):<span>24KV</span></td>
-              <td>Uab(KV):<span>22KV</span></td>
+              <td>Ua(KV):<span>{{bottom.Ua1}}KV</span></td>
+              <td>Uab(KV):<span>{{bottom.Uab1}}KV</span></td>
             </tr>
             <tr align="left">
-              <td>Ub(KV):<span>75KV</span></td>
-              <td>Ubc(KV):<span>57KV</span></td>
+              <td>Ub(KV):<span>{{bottom.Ub1}}KV</span></td>
+              <td>Ubc(KV):<span>{{bottom.Ubc1}}KV</span></td>
             </tr>
             <tr align="left">
-              <td>Uc(KV):<span>34KV</span></td>
-              <td>Uca(KV):<span>12KV</span></td>
+              <td>Uc(KV):<span>{{bottom.Uc1}}KV</span></td>
+              <td>Uca(KV):<span>{{bottom.Uca1}}KV</span></td>
             </tr>
           </table>
         </div></el-col
@@ -116,16 +116,16 @@
         ><div class="grid-content bg-purple">
           <table class="table2">
             <tr align="left">
-              <td>Ua(KV):<span>9KV</span></td>
-              <td>Uab(KV):<span>77KV</span></td>
+              <td>Ua(KV):<span>{{bottom.Ua2}}KV</span></td>
+              <td>Uab(KV):<span>{{bottom.Uab2}}KV</span></td>
             </tr>
             <tr align="left">
-              <td>Ub(KV):<span>62KV</span></td>
-              <td>Ubc(KV):<span>51KV</span></td>
+              <td>Ub(KV):<span>{{bottom.Ub2}}KV</span></td>
+              <td>Ubc(KV):<span>{{bottom.Ubc2}}KV</span></td>
             </tr>
             <tr align="left">
-              <td>Uc(KV):<span>79KV</span></td>
-              <td>Uca(KV):<span>21KV</span></td>
+              <td>Uc(KV):<span>{{bottom.Uc2}}KV</span></td>
+              <td>Uca(KV):<span>{{bottom.Uca2}}KV</span></td>
             </tr>
           </table>
         </div></el-col
@@ -140,6 +140,20 @@ export default {
   name: "Table",
   data() {
     return {
+      bottom:{
+        Ua1:22,
+        Uab1:34,
+        Ub1:36,
+        Ubc1:23,
+        Uc1:43,
+        Uca1:39,
+        Ua2:22,
+        Uab2:36,
+        Ub2:35,
+        Ubc2:37,
+        Uc2:33,
+        Uca2:29,
+      },
       load: new Array(14).fill("0"),
       voltage: new Array(14).fill("0"),
       current: new Array(14).fill("0"),
@@ -147,6 +161,27 @@ export default {
     };
   },
   methods: {
+    getBottomData(){
+      let interval = setInterval(() => {
+      this.bottom.Ua1= this.getRandomNum(20,30)
+      this.bottom.Uab1= this.getRandomNum(25,35)
+      this.bottom.Ub1= this.getRandomNum(27,33)
+      this.bottom.Ubc1= this.getRandomNum(25,37)
+      this.bottom.Uc1= this.getRandomNum(25,30)
+      this.bottom.Uca1= this.getRandomNum(26,34)
+      this.bottom.Ua2= this.getRandomNum(20,30)
+      this.bottom.Uab2= this.getRandomNum(25,35)
+      this.bottom.Ub2= this.getRandomNum(27,33)
+      this.bottom.Ubc2= this.getRandomNum(25,37)
+      this.bottom.Uc2= this.getRandomNum(25,30)
+      this.bottom.Uca2= this.getRandomNum(26,34)
+      
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+
+    },
     getData(data, type) {
       console.log(data[0]);
       this.load.splice(0, 1, data[0]["fuhe_after"]);
@@ -206,6 +241,8 @@ export default {
     // 采泵1
     let pump1 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
     this.initWebSocket(pump1, "pump1");
+    // 伪造底部数据
+    this.getBottomData();
   },
 };
 </script>

src/views/Home.vue

@@ -1,11 +1,10 @@
 <template>
-  <div>
-    <el-row class="tac">
-      <el-col :span="2" style="margin-top: -30px">
+  <div >
+    <el-row class="tac" >
+      <el-col :span="2" style="margin-top: -30px;background-color: #06133d;">
         <!-- style="width: 110px;height: 800px;background-color: #409eff;" -->
-        <div style="width: 110px; height: 800px; background-color: white">
-          <div
-            style="
+        <div style="width: 110px; height: 800px;">
+          <div style="
               margin-left: 20px;
               background-color: grey;
               width: 120px;
@@ -13,8 +12,7 @@
               position: relative;
               border-radius: 5px;
               border: 2px solid #fff;
-            "
-          >
+            ">
             <span
               slot="title"
               style="
@@ -24,8 +22,7 @@
                 left: 25%;
                 text-align: center;
               "
-              >系统列表</span
-            >
+            >系统列表</span>
           </div>
           <el-menu
             class="el-menu-vertical-demo"
@@ -39,16 +36,14 @@
               v-if="!item.hidden"
             >
               <el-menu-item :index="item.path">
-                <div
-                  style="
-                    background-color: #c0c0c0;
+                <div style="
+                    background-color: #C0C0C0;
                     width: 120px;
                     height: 53px;
                     position: relative;
                     border-radius: 10px;
                     border: 1px solid grey;
-                  "
-                >
+                  ">
                   <img
                     style="
                       width: 30px;
@@ -70,8 +65,7 @@
                       left: 5px;
                       text-align: center;
                     "
-                    >{{ item.name }}</span
-                  >
+                  >{{ item.name }}</span>
                 </div>
               </el-menu-item>
             </template>
@@ -91,10 +85,9 @@
         <router-view></router-view>
       </el-col> 
       <!-- 右侧边栏 -->
-      <el-col :span="2" style="margin-top: -30px">
-        <div style="width: 110px; height: 800px; background-color: white">
-          <div
-            style="
+      <el-col :span="2" style="margin-top: -30px;background-color: #06133d;">
+        <div style="width: 110px; height: 800px;">
+          <div style="
               margin-left: 20px;
               background-color: grey;
               width: 120px;
@@ -102,8 +95,7 @@
               position: relative;
               border-radius: 5px;
               border: 2px solid #fff;
-            "
-          >
+            ">
             <span
               slot="title"
               style="
@@ -113,8 +105,7 @@
                 left: 25%;
                 text-align: center;
               "
-              >应用列表</span
-            >
+            >应用列表</span>
           </div>
           <el-menu
             default-active="1-4-1"
@@ -128,16 +119,14 @@
               v-if="!item.hidden"
             >
               <el-menu-item :index="item.path">
-                <div
-                  style="
-                    background-color: #c0c0c0;
+                <div style="
+                    background-color: #C0C0C0;
                     width: 120px;
                     height: 53px;
                     position: relative;
                     border-radius: 10px;
                     border: 1px solid grey;
-                  "
-                >
+                  ">
                   <img
                     style="
                       width: 40px;
@@ -159,12 +148,12 @@
                       left: 2px;
                       text-align: center;
                     "
-                    >{{ item.name }}</span
-                  >
+                  >{{ item.name }}</span>
                 </div>
               </el-menu-item>
             </template>
           </el-menu>
+          <div class="logout" @click="loginOut">退出</div>
         </div>
       </el-col>
     </el-row>
@@ -223,14 +212,31 @@ export default {
     toggleCollapser() {
       this.isCollapseright = !this.isCollapseright;
     },
+    loginOut(){
+      window.location.href = "http://112.126.68.148/#/";
+    }
   },
 };
 </script>
 
 <style scoped>
+/* .tac{
+  background-color:#06133d;
+} */
 .el-menu-vertical-demo {
   width: 1px;
 }
+.logout {
+  background-color: #C0C0C0;
+  width: 120px;
+  height: 33px;
+  border-radius: 10px;
+  border: 1px solid grey;
+  font-size: 20px;
+  text-align: center;
+  margin-left: 20px;
+  margin-top: 20px;
+}
 /* .toggle-button {
         font-size: 10px;
         line-height: 24px;

src/views/beam_tube/configImg/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="main">
     <el-container>
+      <headline title="矿压检测系统图"></headline>
       <el-header>
         <div class="header">
           <div style="margin-left: -50px; margin-bottom: -100px; margin-top: -40px">
@@ -81,6 +82,7 @@ import maosuoChart from "@/components/beam_tube/maosuoChart";
 import dingbanLine from "@/components/beam_tube/dingbanLine";
 import maosuoLine from "@/components/beam_tube/maosuoLine";
 import faultAlarm from "@/components/beam_tube/faultAlarm";
+import headline from "@/common/headline"
 export default {
   data() {
     return {
@@ -182,6 +184,7 @@ export default {
     dingbanLine,
     maosuoLine,
     faultAlarm,
+    headline
   },
 };
 </script>
@@ -189,7 +192,7 @@ export default {
 <style scoped>
 .main {
   width: 100%;
-  height: 850px;
+  height: 900px;
   position: relative;
   background-image: linear-gradient(
     to right,

src/views/drain/configImg/index.vue

@@ -23,19 +23,19 @@
     <!-- 3个数据表格 -->
     <div class="table1">
       <tableData
-        :tableData="tableData1"
+        :tableData="tableData[0]"
         id="1"
       ></tableData>
     </div>
     <div class="table2">
       <tableData
-        :tableData="tableData2"
+        :tableData="tableData[1]"
         id="2"
       ></tableData>
     </div>
     <div class="table3">
       <tableData
-        :tableData="tableData3"
+        :tableData="tableData[2]"
         id="3"
       ></tableData>
     </div>
@@ -47,39 +47,37 @@ export default {
   data() {
     return {
       valve: [1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1],
-      tableData1: {
-        pipelineFlow: 0.0,
-        pipelineFlowTotal: 0.0,
-        runningTime: 0,
-        UnattendedRuntime: 0,
-        positivePressure: 0,
+      tableData:[{
+        pipelineFlow: 15,
+        pipelineFlowTotal: 17,
+        runningTime: 5,
+        UnattendedRuntime: 5,
+        positivePressure: 3,
         negativePressure: 0,
-        frontAxleTemp: 0,
-        rearAxleTemp: 0,
-        liquidLevel: 0,
-      },
-      tableData2: {
-        pipelineFlow: 0.0,
-        pipelineFlowTotal: 0.0,
-        runningTime: 0,
-        UnattendedRuntime: 0,
+        frontAxleTemp: 19,
+        rearAxleTemp: 21,
+        liquidLevel: 18,
+      },{
+        pipelineFlow: 12,
+        pipelineFlowTotal: 14,
+        runningTime: 5,
+        UnattendedRuntime: 5,
         positivePressure: 0,
         negativePressure: 0,
-        frontAxleTemp: 0,
-        rearAxleTemp: 0,
-        liquidLevel: 0,
-      },
-      tableData3: {
-        pipelineFlow: 0.0,
+        frontAxleTemp: 15,
+        rearAxleTemp: 17,
+        liquidLevel: 18,
+      },{
+        pipelineFlow: 3,
         pipelineFlowTotal: 0.0,
-        runningTime: 0,
-        UnattendedRuntime: 0,
+        runningTime: 5,
+        UnattendedRuntime: 5,
         positivePressure: 0,
         negativePressure: 0,
-        frontAxleTemp: 0,
-        rearAxleTemp: 0,
-        liquidLevel: 0,
-      },
+        frontAxleTemp: 17,
+        rearAxleTemp: 16,
+        liquidLevel: 19,
+      }],
     };
   },
   components: {
@@ -89,13 +87,33 @@ export default {
     // this.valve = this.valve.map((item) => {
     //   return (item = !item);
     // });
+    // 伪造数据
+    this.getRandomData();
     setInterval(() => {
       console.log(this.valve);
       this.valve.shift();
       this.valve.push(parseInt(Math.random() * 2, 10));
     }, 3000);
   },
-  methods: {},
+  methods: {
+    getRandomData(){
+      console.log("--------------");
+      let interval = setInterval(() => {
+      for(var i = 0;i < 3;i++){
+        this.tableData[i]['pipelineFlow']=this.getRandomNum(15,20)
+        this.tableData[i]['pipelineFlowTotal']=this.getRandomNum(17,23)
+        this.tableData[i]['positivePressure']=this.getRandomNumWithDecimals(0,2.00)
+        this.tableData[i]['negativePressure']=this.getRandomNumWithDecimals(0,3.00)
+        this.tableData[i]['frontAxleTemp']=this.getRandomNum(15,20)
+        this.tableData[i]['rearAxleTemp']=this.getRandomNum(15,23)
+        this.tableData[i]['liquidLevel']=this.getRandomNum(15,20)
+      }
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+    }
+  },
 };
 </script>
 

src/views/drain/configImg/tableData.vue

@@ -38,7 +38,7 @@
         >{{ id }}号后轴温度:<span>{{ tableData.rearAxleTemp }}℃</span>
       </li>
     </ul>
-    <div class="bottom3">液位:<span>{{ tableData.liquidLevel }}m</span></div>
+    <div class="bottom3">液位:<span style="color:#fff">{{ tableData.liquidLevel }}m</span></div>
   </div>
 </template>
 

src/views/drain/dataBoard/faultAlarm.vue

@@ -2,7 +2,7 @@
   <!-- 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 :data="tableData"  max-height="160">
       <el-table-column
         prop="name"
         label="名称"
@@ -37,6 +37,21 @@ export default {
         },
       ],
     };
+  },
+    mounted() {
+    let interval = setInterval(() => {
+      let now = new Date();
+      let temp = {
+        name: now.toLocaleTimeString().replace(/^\D*/, ''),
+        problem:
+          Math.random() > 0.5 ? "过压" : "过流",
+      };
+      this.tableData.unshift(temp);
+      console.log(this.tableData);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
   },
   methods: {
     headerStyle({ row, column, rowIndex, columnIndex }) {
@@ -88,6 +103,10 @@ export default {
   font-size: 15px;
   border: none;
 }
+.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
 .title {
   /* font-weight:; */
   /* padding-bottom: 15px; */

src/views/drain/dataBoard/runningMsg.vue

@@ -4,6 +4,7 @@
     <el-table
       :data="tableData"
       style="width: 100%"
+      max-height="160"
     >
       <el-table-column
         prop="name"
@@ -37,6 +38,20 @@ export default {
       ],
     };
   },
+    mounted() {
+    let interval = setInterval(() => {
+      let temp = {
+        name: Math.random() > 0.5 ? "1#水泵" : "2#水泵",
+        problem:
+          Math.random() > 0.5 ? "开启" : "关闭",
+      };
+      this.tableData.unshift(temp);
+      console.log(this.tableData);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
 };
 </script>
 <style lang='scss' scoped>
@@ -79,6 +94,10 @@ export default {
   font-size: 15px;
   border: none;
 }
+.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
 .title {
   /* font-weight:; */
   /* padding-bottom: 15px; */

src/views/gas/configImg/center.vue

@@ -2,16 +2,16 @@
   <div id="center">
     <div class="middle_top_list">
       <div class="list_title">瓦斯泵工作时间</div>
-      <div class="list_num list_num1"><span class="counter-value">0.5</span></div>
+      <div class="list_num list_num1"><span class="counter-value">{{workTime}}</span></div>
 
     </div>
     <div class="middle_top_list">
       <div class="list_title">瓦斯泵平均功率</div>
-      <div class="list_num list_num2"><span class="counter-value">20</span></div>
+      <div class="list_num list_num2"><span class="counter-value">{{averagePower}}</span></div>
     </div>
     <div class="middle_top_list">
       <div class="list_title">管道瓦斯含量</div>
-      <div class="list_num list_num2"><span class="counter-value">30</span></div>
+      <div class="list_num list_num2"><span class="counter-value">{{gasContent}}</span></div>
     </div>
   </div>
 </template>
@@ -21,8 +21,23 @@
 export default {
   data() {
     return {
+      workTime:0.6,
+      averagePower:20,
+      gasContent:30,
+
     };
   },
+   mounted() {
+    let interval = setInterval(() => {
+      this.workTime = this.getRandomNumWithDecimals(1,2.00)
+      this.averagePower = this.getRandomNumWithDecimals(20,30)
+      this.gasContent = this.getRandomNumWithDecimals(10,25)
+
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
 };
 </script>
 

src/views/gas/configImg/centerLeft1.vue

@@ -4,7 +4,7 @@
 <span class="title">故障记录</span>
     <el-table
       :data="tableData"
-      
+      max-height="160"
     >
       <el-table-column
         prop="name"
@@ -40,6 +40,20 @@ export default {
         },
       ],
     };
+  },
+   mounted() {
+    let interval = setInterval(() => {
+      let temp = {
+        name: Math.random() > 0.5 ? "高位水池" : "低位水池",
+        problem:
+          Math.random() > 0.5 ? "高温" : "高温",
+      };
+      this.tableData.unshift(temp);
+      console.log(this.tableData);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
   },
   methods: {
     headerStyle({ row, column, rowIndex, columnIndex }) {
@@ -98,6 +112,10 @@ export default {
   font-size: 15px;
   border: none;
 }
+.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
 .title {
 	/* font-weight:; */
 	/* padding-bottom: 15px; */

src/views/gas/configImg/centerRight1.vue

@@ -1,7 +1,7 @@
   <template>
   <div class="table-wrapper main">
     <span class="title">启停记录</span>
-    <el-table :data="tableData" style="width: 100%">
+    <el-table :data="tableData" style="width: 100%" max-height="160">
       <el-table-column prop="name" label="瓦斯泵本体设备" width="180">
       </el-table-column>
       <el-table-column prop="problem" label="启停" width="180">
@@ -26,6 +26,19 @@ export default {
       ],
     };
   },
+  mounted() {
+    let interval = setInterval(() => {
+      let temp = {
+        name: Math.random() > 0.5 ? "1#瓦斯泵电机" : "1#瓦斯泵本机",
+        problem:
+          Math.random() > 0.5 ? "关闭" : "开启",
+      };
+      this.tableData.unshift(temp);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
 };
 </script>
 <style lang='scss' scoped>
@@ -77,6 +90,10 @@ export default {
   font-size: 15px;
   border: none;
 }
+.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
 .title {
   /* font-weight:; */
   /* padding-bottom: 15px; */

src/views/gas/configImg/main.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="apppp">
+    <headline title="瓦斯抽放系统图"></headline>
     <section class="mainbox">
+      
       <button @click="changeWebState(1)">查看</button>
       <button @click="changeWebState(2)">查看</button>
       <div class="motor1">
@@ -290,6 +292,7 @@
 </template>
 <script>
 import { mapState } from "vuex";
+import headline from "@/common/headline"
 export default {
   data() {
     return {
@@ -323,6 +326,7 @@ export default {
       },
 
       tower: { state: "true" }, //true or false
+      // 抽水泵状态
       waterpumpstate: ["false", "false"],
       pipe: {
         wasinongdu_after: "0.8",
@@ -369,6 +373,7 @@ export default {
   computed: {
     ...mapState(["websocketIP"]),
   },
+  components:{headline},
   mounted() {
     let skt_motor1 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/8`);
     this.initWebSocket(skt_motor1, "motor", 1);
@@ -378,6 +383,33 @@ export default {
     this.initWebSocket(skt_valve, "valve");
     let skt_pipe = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/41`);
     this.initWebSocket(skt_pipe, "pipe");
+    
+    let interval = setInterval(() => {
+       // 水温 水位变化
+      this.tank.temperature1 = this.getRandomNumWithDecimals(32, 40);
+      this.tank.temperature2 = this.getRandomNumWithDecimals(32, 40);
+      this.tank.dept1 = this.getRandomNumWithDecimals(0.8,1.9);
+      this.tank.dept2 = this.getRandomNumWithDecimals(0.8,1.9);
+      // 抽水泵状态
+      let pumpState1 = Math.random()>0.5?"true":"flase";
+      let pumpState2 = Math.random()>0.5?"true":"flase";
+      this.waterpumpstate=[];
+      this.waterpumpstate.push(pumpState1);
+      this.waterpumpstate.push(pumpState2);
+      // 阀门状态
+      var valveArr=[]
+      for(let i=0;i<10;i++){
+        valveArr[i]=Math.random()>0.5?"true":"flase";
+        
+      }
+      this.valvestate.splice(0, 10, valveArr[0], valveArr[1],valveArr[2],valveArr[3],valveArr[4],valveArr[5],valveArr[6],valveArr[7],valveArr[8],valveArr[9]);
+      
+
+
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
   },
   methods: {
     changeWebState(id) {
@@ -725,7 +757,7 @@ export default {
 #apppp {
   color: white;
   width: 1600px;
-  height: 850px;
+  height: 900px;
   /* position: absolute; */
   background-image: linear-gradient(
     to right,

src/views/power_supply/dataBoard/centerLeft1.vue

@@ -1,10 +1,10 @@
   <template>
   <!-- style="padding:6px;border:3px solid #96c2f1;background:#eff7ff;height:180px;margin-top:60px" -->
   <div class="table-wrapper main">
-<span class="title">故障记录</span>
+    <span class="title">故障记录</span>
     <el-table
       :data="tableData"
-      
+      max-height="160"
     >
       <el-table-column
         prop="name"
@@ -41,6 +41,18 @@ export default {
       ],
     };
   },
+  mounted() {
+    let interval = setInterval(() => {
+      let temp = {
+        name: Math.random() > 0.5 ? "1#瓦斯泵电机" : "高位水池",
+        problem: Math.random() > 0.5 ? "过流" : "高温",
+      };
+      this.tableData.unshift(temp);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
   methods: {
     headerStyle({ row, column, rowIndex, columnIndex }) {
       return "tableStyle";
@@ -52,14 +64,14 @@ export default {
 };
 </script>
 <style lang='scss' scoped>
-.main{
+.main {
   width: 580px;
-  padding:6px;
+  padding: 6px;
   // border:3px solid #96c2f1;
-  height:220px;
+  height: 220px;
   margin: 30px auto;
   // margin-top:60px;
-  padding-left: 40px;;
+  padding-left: 40px;
   background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
 }
@@ -100,11 +112,14 @@ export default {
   font-size: 15px;
   border: none;
 }
+.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
 .title {
-	/* font-weight:; */
-	/* padding-bottom: 15px; */
-font-size: 18px;
+  /* font-weight:; */
+  /* padding-bottom: 15px; */
+  font-size: 18px;
   color: #4ADEFE;
-
 }
 </style>

src/views/power_supply/dataBoard/centerRight1.vue

@@ -1,7 +1,7 @@
   <template>
   <div class="table-wrapper main">
     <span class="title">启停记录</span>
-    <el-table :data="tableData" style="width: 100%">
+    <el-table :data="tableData" style="width: 100%" max-height="160">
       <el-table-column prop="name" label="瓦斯泵本体设备" width="180">
       </el-table-column>
       <el-table-column prop="problem" label="启停" width="180">
@@ -30,6 +30,18 @@ export default {
       ],
     };
   },
+    mounted() {
+    let interval = setInterval(() => {
+      let temp = {
+        name: Math.random() > 0.5 ? "1#瓦斯泵本机" : "2#瓦斯泵本机",
+        problem: Math.random() > 0.5 ? "关闭" : "开启",
+      };
+      this.tableData.unshift(temp);
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
 };
 </script>
 <style lang='scss' scoped>
@@ -82,6 +94,10 @@ export default {
   font-size: 15px;
   border: none;
 }
+.table-wrapper ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
 .title {
   /* font-weight:; */
   /* padding-bottom: 15px; */