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

src/components/beam_tube/dingbanChart.vue

@@ -0,0 +1,241 @@
+<!-- 顶板离层 -->
+<template>
+  <div
+    ref="dingban"
+    style="width:300px;height:180px"
+  ></div>
+</template>
+<script>
+export default {
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+    },
+  },
+  name: "dingban",
+  data() {
+    return {
+      // chartData: [
+      //   {
+      //     name: "1#监测点0m",
+      //     value: 77,
+      //   },
+      //   {
+      //     name: "2#监测点50m",
+      //     value: 72,
+      //   },
+      //   {
+      //     name: "3#监测点100m",
+      //     value: 83,
+      //   },
+      //   {
+      //     name: "4#监测点150m",
+      //     value: 78,
+      //   },
+      //   {
+      //     name: "5#监测点200m",
+      //     value: 88,
+      //   },
+      // ],
+      option: {
+        // backgroundColor: "rgb(1, 22, 105)",
+        grid: {
+          top: "12%",
+          bottom: 0,
+          right: 0,
+          left: 0,
+          containLabel: true,
+        },
+        xAxis: {
+          show: false,
+        },
+        yAxis: [
+          {
+            triggerEvent: true,
+            show: true,
+            inverse: true,
+            data: [],
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+
+            axisLabel: {
+              show: true,
+              interval: 0,
+              color: "#4ADEFE",
+              align: "left",
+              margin: 60,
+              formatter: function (value, index) {
+                return "{title|" + value + "}";
+              },
+              rich: {
+                title: {
+                  width: 50,
+                  align: "right",
+                  fontSize: 13,
+                },
+              },
+            },
+          },
+          {
+            triggerEvent: true,
+            show: true,
+            inverse: true,
+            data: [],
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              interval: 0,
+              shadowOffsetX: "-20px",
+              color: ["#F3DB5C"],
+              align: "left",
+              verticalAlign: "center",
+              lineHeight: 40,
+              fontSize: 15,
+            },
+          },
+        ],
+         title: {
+          text: '顶板离层排名',
+          padding: [5, 120],
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+            fontSize:15
+          },
+        },
+        series: [
+          {
+            name: "XXX",
+            type: "pictorialBar",
+            symbol:
+              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==",
+            symbolSize: [50, 50],
+            symbolOffset: [20, 0],
+            z: 12,
+            itemStyle: {
+              normal: {
+                color: "#fff",
+              },
+            },
+            data: [],
+          },
+          {
+            name: "条",
+            type: "bar",
+            showBackground: true,
+            // barBorderRadius: 30,
+            yAxisIndex: 0,
+            data: [],
+            barWidth: 10,
+            // align: left,
+            itemStyle: {
+              normal: {
+                color: "rgba(41, 162, 245, 1)",
+                barBorderRadius: 5,
+              },
+              // color: '#A71A2B',
+              // barBorderRadius: 4,
+            },
+          },
+        ],
+      },
+      myChart: null,
+    };
+  },
+  mounted() {
+    //   console.log("111");
+    //   this.test();
+    this.initCharts();
+    this.updateChart();
+    // 对柱状图添加点击事件
+    var _that = this;
+    this.myChart.on("click", function (params) {
+      // console.log(Object.values(params.data));
+      console.log(params.name);
+      _that.$bus.$emit("dingbanPoint", params.name);
+    });
+  },
+  methods: {
+    // 初始化图表
+    initCharts() {
+      this.myChart = this.$echarts.init(this.$refs.dingban);
+      this.myChart.setOption(this.option);
+    },
+    getArrByKey(data, k) {
+      let key = k || "value";
+      let res = [];
+      if (data) {
+        data.forEach(function (t) {
+          res.push(t[key]);
+        });
+      }
+      return res;
+    },
+    getSymbolData(data) {
+      let arr = [];
+      for (var i = 0; i < data.length; i++) {
+        arr.push({
+          value: data[i].value,
+          symbolPosition: "end",
+        });
+      }
+      return arr;
+    },
+    // test(){
+    //     console.log(this.getSymbolData(this.chartData));
+
+    // },
+    // 更新图表
+    updateChart() {
+      // console.log(getSymbolData(data));
+      this.myChart.setOption({
+        yAxis: [
+          {
+            data: this.getArrByKey(this.chartData, "name"),
+          },
+          {
+            data: this.getArrByKey(this.chartData, "name"),
+            axisLabel: {
+              formatter: (value, index) => {
+                return this.chartData[index].value + "mm";
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "XXX",
+            type: "pictorialBar",
+            data: this.getSymbolData(this.chartData),
+          },
+          {
+            name: "条",
+            type: "bar",
+            data: this.chartData,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+/* .com-chart {
+  height: 145px;
+} */
+</style>

src/components/beam_tube/dingbanLine.vue

@@ -0,0 +1,593 @@
+<template>
+	<!-- 实时数据曲线 最多叠加三条 -->
+	<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: "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,
+						],
+					},
+				],
+				option: {
+					tooltip: {
+						trigger: "axis",
+						backgroundColor: "transparent",
+						axisPointer: {
+							lineStyle: {
+								color: {
+									type: "linear",
+									x: 0,
+									y: 0,
+									x2: 0,
+									y2: 1,
+									colorStops: [{
+											offset: 0,
+											color: "rgba(126,199,255,0)", // 0% 处的颜色
+										},
+										{
+											offset: 0.5,
+											color: "rgba(126,199,255,1)", // 100% 处的颜色
+										},
+										{
+											offset: 1,
+											color: "rgba(126,199,255,0)", // 100% 处的颜色
+										},
+									],
+									global: false, // 缺省为 false
+								},
+							},
+						},
+						formatter: (p) => {
+							let dom = `<div style="width: 79px;
+	height: 110px;;color:#fff;position: relative;">
+	<svg style="position: absolute;top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100"
+		height="111" viewBox="0 0 80 85">
+		<defs>
+			<style>
+				.cls-1 {
+					fill: #07172c;
+					fill-opacity: 0.8;
+					stroke: #a7d8ff;
+					stroke-linejoin: round;
+					stroke-opacity: 0.2;
+					stroke-width: 1px;
+					fill-rule: evenodd;
+				}
+			</style>
+		</defs>
+		<path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
+			transform="translate(-258.5 -592.5)" />
+	</svg>
+	<div style="padding: 3px 1px 3px 11px;display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;position: relative;z-index: 1;">
+		<div
+			style="margin-bottom: 4px;width:100%;display:${
+        p[0] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[0] ? p[0].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[0] ? p[0].data : ""}</span>
+		</div>
+		<div
+			style="width:100%;height:100%;display:${
+        p[1] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[1] ? p[1].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[1] ? p[1].data : ""}</span>
+		</div>
+		<div
+			style="width:100%;height:100%;display:${
+        p[1] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[2] ? p[2].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[2] ? p[2].data : ""}</span>
+		</div>
+	</div>
+</div>`;
+							return dom;
+						},
+					},
+					legend: {
+						align: "left",
+						right: "10%",
+						top: "10%",
+						type: "plain",
+						textStyle: {
+							color: "#7ec7ff",
+							fontSize: 11,
+						},
+						// icon:'rect',
+						itemGap: 25,
+						itemWidth: 18,
+						icon: "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
+
+						data: this.legend,
+					},
+					grid: {
+						top: "15%",
+						left: "10%",
+						right: "10%",
+						bottom: "1%",
+						containLabel: true,
+					},
+					yAxis: [{
+						boundaryGap: [0, "100%"],
+						name: "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:[
+  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"]),
+		},
+
+		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);
+			});
+		},
+	};
+</script>
+<style scoped>
+	.select-veido .el-select {
+		width: 100px;
+		margin-left: 10px;
+	}
+
+	.select-veido>>>.el-input--small .el-input__inner {
+		background: none;
+	}
+
+	.select-veido>>>.el-input__inner {
+		border: 0;
+	}
+</style>

src/components/beam_tube/faultAlarm.vue

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

src/components/beam_tube/maosuoChart.vue

@@ -0,0 +1,241 @@
+<!-- 锚索应力 -->
+<template>
+  <div
+    ref="maosuo"
+    style="width:300px;height:180px"
+  ></div>
+</template>
+<script>
+export default {
+  props: {
+    chartData: {
+      type: Array,
+      required: true,
+    },
+  },
+  name: "maosuo",
+  data() {
+    return {
+      // chartData: [
+      //   {
+      //     name: "1#监测点0m",
+      //     value: 77,
+      //   },
+      //   {
+      //     name: "2#监测点50m",
+      //     value: 72,
+      //   },
+      //   {
+      //     name: "3#监测点100m",
+      //     value: 83,
+      //   },
+      //   {
+      //     name: "4#监测点150m",
+      //     value: 78,
+      //   },
+      //   {
+      //     name: "5#监测点200m",
+      //     value: 88,
+      //   },
+      // ],
+      option: {
+        // backgroundColor: "rgb(1, 22, 105)",
+       grid: {
+          top: "12%",
+          bottom: 0,
+          right: 0,
+          left: 0,
+          containLabel: true,
+        },
+        title: {
+          text: '锚索应力排名',
+          padding: [5, 120],
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+            fontSize:15
+          },
+        },
+        xAxis: {
+          show: false,
+        },
+        yAxis: [
+          {
+            triggerEvent: true,
+            show: true,
+            inverse: true,
+            data: [],
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+
+            axisLabel: {
+              show: true,
+              interval: 0,
+              color: "#4ADEFE",
+              align: "left",
+              margin: 60,
+              formatter: function (value, index) {
+                return "{title|" + value + "}";
+              },
+              rich: {
+                title: {
+                  width: 50,
+                  align: "right",
+                  fontSize: 13,
+                },
+              },
+            },
+          },
+          {
+            triggerEvent: true,
+            show: true,
+            inverse: true,
+            data: [],
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              interval: 0,
+              shadowOffsetX: "-20px",
+              color: ["#F3DB5C"],
+              align: "left",
+              verticalAlign: "center",
+              lineHeight: 40,
+              fontSize: 15,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "XXX",
+            type: "pictorialBar",
+            symbol:
+              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==",
+            symbolSize: [50, 50],
+            symbolOffset: [20, 0],
+            z: 12,
+            itemStyle: {
+              normal: {
+                color: "#fff",
+              },
+            },
+            data: [],
+          },
+          {
+            name: "条",
+            type: "bar",
+            showBackground: true,
+            // barBorderRadius: 30,
+            yAxisIndex: 0,
+            data: [],
+            barWidth: 10,
+            // align: left,
+            itemStyle: {
+              normal: {
+                color: "rgba(41, 162, 245, 1)",
+                barBorderRadius: 5,
+              },
+              // color: '#A71A2B',
+              // barBorderRadius: 4,
+            },
+          },
+        ],
+      },
+      myChart: null,
+    };
+  },
+  mounted() {
+    //   console.log("111");
+    //   this.test();
+    this.initCharts();
+    this.updateChart();
+    // 对柱状图添加点击事件
+    var _that = this;
+    this.myChart.on("click", function (params) {
+      // console.log(Object.values(params.data));
+      console.log(params.name);
+      _that.$bus.$emit("maosuoPoint", params.name);
+    });
+  },
+  methods: {
+    // 初始化图表
+    initCharts() {
+      this.myChart = this.$echarts.init(this.$refs.maosuo);
+      this.myChart.setOption(this.option);
+    },
+    getArrByKey(data, k) {
+      let key = k || "value";
+      let res = [];
+      if (data) {
+        data.forEach(function (t) {
+          res.push(t[key]);
+        });
+      }
+      return res;
+    },
+    getSymbolData(data) {
+      let arr = [];
+      for (var i = 0; i < data.length; i++) {
+        arr.push({
+          value: data[i].value,
+          symbolPosition: "end",
+        });
+      }
+      return arr;
+    },
+    // test(){
+    //     console.log(this.getSymbolData(this.chartData));
+
+    // },
+    // 更新图表
+    updateChart() {
+      // console.log(getSymbolData(data));
+      this.myChart.setOption({
+        yAxis: [
+          {
+            data: this.getArrByKey(this.chartData, "name"),
+          },
+          {
+            data: this.getArrByKey(this.chartData, "name"),
+            axisLabel: {
+              formatter: (value, index) => {
+                return this.chartData[index].value + "mm";
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "XXX",
+            type: "pictorialBar",
+            data: this.getSymbolData(this.chartData),
+          },
+          {
+            name: "条",
+            type: "bar",
+            data: this.chartData,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+/* .com-chart {
+  height: 145px;
+} */
+</style>

src/components/beam_tube/maosuoLine.vue

@@ -0,0 +1,686 @@
+<template>
+  <!-- 实时数据曲线 最多叠加三条 -->
+  <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;
+	height: 110px;;color:#fff;position: relative;">
+	<svg style="position: absolute;top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);" class="svg" xmlns="http://www.w3.org/2000/svg" width="100"
+		height="111" viewBox="0 0 80 85">
+		<defs>
+			<style>
+				.cls-1 {
+					fill: #07172c;
+					fill-opacity: 0.8;
+					stroke: #a7d8ff;
+					stroke-linejoin: round;
+					stroke-opacity: 0.2;
+					stroke-width: 1px;
+					fill-rule: evenodd;
+				}
+			</style>
+		</defs>
+		<path id="矩形_419" data-name="矩形 419" class="cls-1" d="M266,595h74v50H266V624.046L261,620l5-3.984V595Z"
+			transform="translate(-258.5 -592.5)" />
+	</svg>
+	<div style="padding: 3px 1px 3px 11px;display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;position: relative;z-index: 1;">
+		<div
+			style="margin-bottom: 4px;width:100%;display:${
+        p[0] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[0] ? p[0].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[0] ? p[0].data : ""}</span>
+		</div>
+		<div
+			style="width:100%;height:100%;display:${
+        p[1] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[1] ? p[1].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[1] ? p[1].data : ""}</span>
+		</div>
+		<div
+			style="width:100%;height:100%;display:${
+        p[1] ? "flex" : "none"
+      };justify-content:space-between;align-items:center;">
+			<span style="font-size:11px;color:#7ec7ff;">${
+        p[2] ? p[2].seriesName : ""
+      }</span>
+			<span style="font-size:11px;color:#fff;">${p[2] ? p[2].data : ""}</span>
+		</div>
+	</div>
+</div>`;
+            return dom;
+          },
+        },
+        legend: {
+          align: "left",
+          right: "10%",
+          top: "10%",
+          type: "plain",
+          textStyle: {
+            color: "#7ec7ff",
+            fontSize: 11,
+          },
+          // icon:'rect',
+          itemGap: 25,
+          itemWidth: 18,
+          icon:
+            "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
+
+          data: this.legend,
+        },
+        grid: {
+          top: "15%",
+          left: "10%",
+          right: "10%",
+          bottom: "1%",
+          containLabel: true,
+        },
+        yAxis: [
+          {
+            boundaryGap: [0, "100%"],
+            name: "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: "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"]),
+  },
+
+  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);
+
+      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);
+    });
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

src/components/beam_tube/scatterChart.vue

@@ -55,6 +55,7 @@ export default {
             data: [],
             type: "scatter",
             color: (params) => {
+              // console.log('params',params.data);
               // 返回绿色
               if (params.data[2]) return "#009966";
               // 不然返回红色

src/main.js

@@ -50,8 +50,13 @@ Vue.use(VueCookie)
 Vue.use(Antd)
 Vue.use(dataV);
 Vue.use(Viser)
+
+// Vue.prototype.$bus = new Vue()
 new Vue({
     router,
     store,
-    render: h => h(App)
+    render: h => h(App),
+    beforeCreate() {
+        Vue.prototype.$bus = this //安装全局事件总线
+    },
 }).$mount('#app')

src/views/beam_tube/configImg/index.vue

@@ -3,17 +3,24 @@
     <el-container>
       <el-header>
         <div class="header">
-          <div
-            style="margin-left: -50px; margin-bottom: -100px; margin-top: -40px"
-          >
-            <scatter-chart title="辅运巷" :data="data1"></scatter-chart>
+          <div style="margin-left: -50px; margin-bottom: -100px; margin-top: -40px">
+            <scatter-chart
+              title="辅运巷"
+              :data="data1"
+            ></scatter-chart>
           </div>
           <div style="margin-left: -50px; margin-bottom: -40px">
-            <scatter-chart title="主运巷" :data="data1"></scatter-chart>
+            <scatter-chart
+              title="主运巷"
+              :data="data1"
+            ></scatter-chart>
           </div>
 
           <div class="workingFace">
-            <div :style="{ width: 1300 - length + 'px' }" class="inner"></div>
+            <div
+              :style="{ width: 1300 - length + 'px' }"
+              class="inner"
+            ></div>
             <div
               :style="{ 'margin-left': 1300 - length + 'px' }"
               class="pillar"
@@ -24,27 +31,116 @@
             <div class="bottom2">采煤区<br />1300m</div>
           </div>
           <div style="margin-left: -50px; margin-top: -50px">
-            <scatter-chart title="回风巷" :data="data1"></scatter-chart>
+            <scatter-chart
+              title="回风巷"
+              :data="data1"
+            ></scatter-chart>
           </div>
         </div>
       </el-header>
-      <el-main>Main</el-main>
+      <el-main class="bottom_chart">
+        <el-row>
+          <!-- 顶板离层排名 -->
+          <el-col :span="6">
+            <div>
+              <dingbanChart :chartData="dingbanData"></dingbanChart>
+            </div>
+          </el-col>
+          <!-- 锚索应力排名 -->
+          <el-col :span="6">
+            <div>
+              <maosuoChart :chartData="maosuoData"></maosuoChart>
+            </div>
+          </el-col>    
+          <!-- 实时数据曲线图 -->
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <!-- 顶板离层曲线图 -->
+              <dingbanLine :chartData="maosuoData"></dingbanLine>
+            </div>
+          </el-col>
+          <!-- 报警日志 -->
+          <el-col :span="6">
+            <div class="grid-content bg-purple">
+              <maosuoLine :chartData="dingbanData"></maosuoLine>
+              <!-- <faultAlarm></faultAlarm> -->
+
+            </div>
+          </el-col>
+        </el-row>
+
+      </el-main>
     </el-container>
   </div>
 </template>
 
 <script>
 import scatterChart from "@/components/beam_tube/scatterChart";
+import dingbanChart from "@/components/beam_tube/dingbanChart";
+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";
 export default {
   data() {
     return {
       length: 0,
       data1: {
         top: new Array(26).fill(10),
-        bottom: new Array(26).fill(40)
-      }
+        bottom: new Array(26).fill(40),
+      },
+      maosuoData: [
+        {
+          name: "1#监测点0m",
+          value: 78,
+        },
+        {
+          name: "2#监测点50m",
+          value: 87,
+        },
+        {
+          name: "3#监测点100m",
+          value: 83,
+        },
+        {
+          name: "4#监测点150m",
+          value: 88,
+        },
+        {
+          name: "5#监测点200m",
+          value: 78,
+        },
+      ],
+      dingbanData: [
+        {
+          name: "1#监测点0m",
+          value: 80,
+        },
+        {
+          name: "2#监测点50m",
+          value: 78,
+        },
+        {
+          name: "3#监测点100m",
+          value: 89,
+        },
+        {
+          name: "4#监测点150m",
+          value: 78,
+        },
+        {
+          name: "5#监测点200m",
+          value: 88,
+        },
+      ],
     };
   },
+  created() {
+    // 请求顶板离层和锚索应力的数据，并进行排序
+    this.maosuoData = this.maosuoData.sort(this.compare("value"));
+    this.dingbanData = this.dingbanData.sort(this.compare("value"));
+    // console.log('this.maosuoData',this.maosuoData);
+  },
   mounted() {
     setInterval(() => {
       if (this.length < 1300) {
@@ -52,8 +148,23 @@ export default {
       }
     }, 100);
   },
+  methods: {
+    compare(property) {
+      return function (a, b) {
+        var value1 = a[property];
+        var value2 = b[property];
+        return value2 - value1;
+      };
+    },
+    // 对接收到的数据进行排序
+  },
   components: {
     scatterChart,
+    dingbanChart,
+    maosuoChart,
+    dingbanLine,
+    maosuoLine,
+    faultAlarm,
   },
 };
 </script>
@@ -70,10 +181,17 @@ export default {
   );
 }
 .header {
+  position: relative;
   width: 100%;
   height: 650px;
   /* background-color: black; */
 }
+.bottom_chart {
+  top: 600px;
+  width: 100%;
+  height: 300px;
+  position: absolute;
+}
 .workingFace {
   height: 300px;
   width: 1300px;

src/views/mining/mining.vue

@@ -5,24 +5,30 @@
       <el-tab-pane label="系统图" name="third">
         <router-view></router-view>
       </el-tab-pane>
+      <el-tab-pane label="环境检测" name="fourth">
+        <envTest></envTest>
+      </el-tab-pane>
+      <el-tab-pane label="支护系统" name="supporting">
+        <supporting></supporting>
+      </el-tab-pane>
       <el-tab-pane label="系统数据" name="first">
         <systemData></systemData>
       </el-tab-pane>
       <el-tab-pane label="数据标准" name="second">
         <dataStandard></dataStandard>
       </el-tab-pane>
-      <el-tab-pane label="环境检测" name="fourth">
-        <envTest></envTest>
-      </el-tab-pane>
+      
     </el-tabs>
   </div>
 </template>
 
 
 <script>
+import supporting from './supporting/supporting';
 import dataStandard from "./dataStandard/dataStandard";
 import systemData from "./systemData";
 import envTest from "./envTest"
+
 export default {
   name: "mining",
   data() {
@@ -49,6 +55,7 @@ export default {
   components: {
     dataStandard,
     systemData,
+    supporting,
     envTest
   },
 };

src/views/mining/supporting/suppEchart.vue

@@ -0,0 +1,142 @@
+<template>
+  <div
+    ref="testLine"
+    style="width: 650px; height: 300px; margin: 0px auto"
+  ></div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      zhijiaId: [],
+      barData: [],
+      currentChartId: 1,
+      xData: new Array(30).fill("-"),
+      yData: new Array(30).fill("-"),
+      count: 0,
+      myChart: null,
+      option: {
+        // backgroundColor: "#0f375f",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+            label: {
+              show: true,
+              backgroundColor: "#333",
+            },
+          },
+        },
+        title: {
+          text: "顶板压力",
+          padding: [5, 70],
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+            fontSize: 18,
+          },
+        },
+        xAxis: {
+          data: [],
+          axisLine: {
+            lineStyle: {
+              color: "#ccc",
+            },
+          },
+        },
+        yAxis: {
+          splitLine: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: "#ccc",
+            },
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            barWidth: 3,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#14c8d4" },
+                  { offset: 1, color: "#43eec6" },
+                ]),
+              },
+            },
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  methods: {
+    getData() {
+      var count = 0;
+
+      this.barData.shift(this.barData[0]);
+      this.barData.push(parseInt(Math.random() * (40 - 25 + 1) + 25, 10));
+
+      console.log(this.barData);
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.zhijiaId,
+          },
+        ],
+        series: [
+          {
+            data: this.barData,
+          },
+        ],
+      });
+    },
+  },
+  created() {
+    // this.getData();
+    var index = 190;
+    for (var i = 0; i < 190; i++) {
+      this.zhijiaId.push(index--);
+      var data = parseInt(Math.random() * (40 - 25 + 1) + 25, 10);
+      this.barData.push(data);
+    }
+    console.log(this.zhijiaId);
+  },
+  mounted() {
+    // 先画图
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    // 获取数据
+    this.myChart.setOption(this.option);
+    this.timer = setInterval(() => {
+      this.getData();
+    }, 3000);
+
+    // this.websocket = new WebSocket(
+    //   `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+    // );
+    // this.initWebSocket();
+  },
+  destroyed() {
+    clearInterval(this.timer);
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>

src/views/mining/supporting/supporting.vue

@@ -0,0 +1,470 @@
+<template>
+  <div class="wrapper">
+   <div style="margin-left:-110px">
+        <svg
+      width="1890"
+      height="600.748539320633"
+    >
+      <g>
+        <g
+          id="1566d8d9"
+          name="image"
+        >
+          <g>
+            <image
+              width="52.31030577617248"
+              height="39.23272933212936"
+              preserveAspectRatio="none"
+              transform="translate(552.5773843794306, 71.83869923929876)"
+              xlink:href="http://topology.le5le.com/image/3F5DF3FC5F9985A6DDBDEE953782F522_cbabeec230488f49.png"
+            />
+          </g>
+        </g>
+        <g
+          id="6e7cde74"
+          name="image"
+        >
+          <g>
+            <image
+              width="500.7963507226494"
+              height="375.59726304198705"
+              preserveAspectRatio="none"
+              transform="translate(396.4486583624613, 50.40967632484694)"
+              xlink:href="http://topology.le5le.com/image/8B7E5A935202BF366637EF95FF867AA3_818fd8dc2f9bc3fe.png"
+            />
+          </g>
+        </g>
+        <g
+          id="a94b059"
+          name="image"
+        >
+          <g>
+            <image
+              width="123.81776685797168"
+              height="92.86332514347876"
+              preserveAspectRatio="none"
+              transform="translate(418.65879054006575, 44.41583289654886)"
+              xlink:href="http://topology.le5le.com/image/E98FB8F532EC49EADE558A0334B8B818_ffd046e899fcb8b8.png"
+            />
+          </g>
+        </g>
+        <!-- 动画 -->
+        <!-- 收缩 -->
+        <g
+          id="50aa2b2"
+          name="image"
+          v-show="isshow ==0"
+          transform="translate(397.102294721247,234.48802037298032) rotate(306.95369956936963,0,0) translate(-397.102294721247,-234.48802037298032)"
+        >
+          <g>
+            <image
+              width="123.51142989704735"
+              height="92.63357242278552"
+              preserveAspectRatio="none"
+              transform="translate(455.3465797727233,148.17123416158756)"
+              xlink:href="http://topology.le5le.com/image/0F33CB6BB6825A8E844C3619274BD641_86c1acc7e825aa85.png"
+            />
+          </g>
+        </g>
+        <g
+          id="d076e35"
+          name="image"
+          v-show="isshow ==0"
+          transform="translate(418.4356280545801,246.44308427834457) rotate(218.2636267024031,0,0) translate(-418.4356280545801,-246.44308427834457)"
+        >
+          <g>
+            <image
+              width="136.49996601667732"
+              height="102.37497451250799"
+              preserveAspectRatio="none"
+              transform="translate(395.18564504624146, 310.25559702209057)"
+              xlink:href="http://topology.le5le.com/image/2910C0F367A5FB669F75D85F33021769_3e280138c8015b69.png"
+            />
+          </g>
+        </g>
+        <!-- 舒张 -->
+        <g
+          id="50aa2b2"
+          name="image"
+          v-show="isshow ==1"
+        >
+          <g>
+            <image
+              width="123.51142989704728"
+              height="92.63357242278546"
+              preserveAspectRatio="none"
+              transform="translate(354.2222986808696, 71.83869923929876)"
+              xlink:href="http://topology.le5le.com/image/0F33CB6BB6825A8E844C3619274BD641_86c1acc7e825aa85.png"
+            />
+          </g>
+        </g>
+        <g
+          id="d076e35"
+          name="image"
+          v-show="isshow ==1"
+        >
+          <g>
+            <image
+              width="136.49996601667726"
+              height="102.37497451250795"
+              preserveAspectRatio="none"
+              transform="translate(324.91476608221654, 144.4047619047617)"
+              xlink:href="http://topology.le5le.com/image/2910C0F367A5FB669F75D85F33021769_3e280138c8015b69.png"
+            />
+          </g>
+        </g>
+        <g
+          id="77f68927"
+          name="image"
+        >
+          <g>
+            <image
+              width="329.1822910014679"
+              height="246.88671825110092"
+              preserveAspectRatio="none"
+              transform="translate(409.14139176678395, 13.0876967750711)"
+              xlink:href="http://topology.le5le.com/image/B54FC7B6BEBA5B3116A251263939ED92_250b244206c9bd0a.png"
+            />
+          </g>
+        </g>
+        <g
+          id="855d09a"
+          name="image"
+        >
+          <g>
+            <image
+              width="166.59602006188692"
+              height="124.94701504641519"
+              preserveAspectRatio="none"
+              transform="translate(602.033455893702, 57.55298495358488)"
+              xlink:href="http://topology.le5le.com/image/0AF403E3E1F1309B3CD21FA7B83CB335_2269e1351c09898b.png"
+            />
+          </g>
+        </g>
+        <g
+          id="1d1e6cb3"
+          name="image"
+        >
+          <g>
+            <image
+              width="561.7340026435919"
+              height="421.30050198269396"
+              preserveAspectRatio="none"
+              transform="translate(938.6091891543927, 10)"
+              xlink:href="http://topology.le5le.com/image/5A087B9E933BACE8925C0716A532E0A8_d6827d5927680d62.png"
+            />
+          </g>
+        </g>
+
+        <!-- 数据框 -->
+        <g>
+          <g
+            id="6b1f5a47"
+            name="rectangle"
+          >
+            <path
+              fill="none"
+              stroke="#4ADEFE"
+              paint-order="fill stroke markers"
+              d=" M 420 325 L 420 375 L 540 375 L 540 325 L 420 325 Z"
+              stroke-miterlimit="10"
+              stroke-dasharray=""
+            />
+          </g>
+
+          <g
+            id="6b1f5a471"
+            name="rectangle1"
+          >
+            <path
+              fill="none"
+              stroke="#4ADEFE"
+              paint-order="fill stroke markers"
+              d=" M 1010 325 L 1010 375 L 1130 375 L 1130 325 L 1010 325 Z"
+              stroke-miterlimit="10"
+              stroke-dasharray=""
+            />
+          </g>
+
+          <g
+            id="6b1f5a472"
+            name="rectangle2"
+          >
+            <path
+              fill="none"
+              stroke="#4ADEFE"
+              paint-order="fill stroke markers"
+              d=" M 1290 325 L 1290 375 L 1410 375 L 1410 325 L 1290 325 Z"
+              stroke-miterlimit="10"
+              stroke-dasharray=""
+            />
+          </g>
+          <g
+            id="6b1f5a472"
+            name="rectangle2"
+          >
+            <path
+              fill="none"
+              stroke="#4ADEFE"
+              paint-order="fill stroke markers"
+              d=" M 740 25 L 740 75 L 860 75 L 860 25 L 740 25 Z"
+              stroke-miterlimit="10"
+              stroke-dasharray=""
+            />
+          </g>
+
+        </g>
+
+        <!-- 数据 -->
+        <g
+          xmlns="http://www.w3.org/2000/svg"
+          id="920f5b63"
+          name="text"
+          text=12.3
+        >
+          <g>
+            <path
+              fill="none"
+              stroke="none"
+            />
+            <text
+              fill="#F3DB5C"
+              stroke="none"
+              font-family="&quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial "
+              font-size="20px"
+              font-style="normal"
+              font-weight="normal"
+              text-decoration="normal"
+              x="800"
+              y="50"
+              text-anchor="middle"
+              dominant-baseline="central"
+            >
+              {{TopBeam}}cm
+            </text>
+          </g>
+        </g>
+
+        <g
+          xmlns="http://www.w3.org/2000/svg"
+          id="920f5b6"
+          name="text"
+          text=12.3
+        >
+          <g>
+            <path
+              fill="none"
+              stroke="none"
+            />
+            <text
+              fill="#F3DB5C"
+              stroke="none"
+              font-family="&quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial "
+              font-size="20px"
+              font-style="normal"
+              font-weight="normal"
+              text-decoration="normal"
+              x="480"
+              y="350"
+              text-anchor="middle"
+              dominant-baseline="central"
+            >
+              {{PushSlip}}cm
+            </text>
+          </g>
+        </g>
+
+        <g
+          xmlns="http://www.w3.org/2000/svg"
+          id="920f5b6"
+          name="text"
+          text=12.3
+        >
+          <g>
+            <path
+              fill="none"
+              stroke="none"
+            />
+            <text
+              fill="#F3DB5C"
+              stroke="none"
+              font-family="&quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial "
+              font-size="20px"
+              font-style="normal"
+              font-weight="normal"
+              text-decoration="normal"
+              x="1070"
+              y="350"
+              text-anchor="middle"
+              dominant-baseline="central"
+            >
+              {{pressure_left}}PM
+            </text>
+          </g>
+        </g>
+        <g
+          xmlns="http://www.w3.org/2000/svg"
+          id="920f5b6"
+          name="text"
+          text=12.3
+        >
+          <g>
+            <path
+              fill="none"
+              stroke="none"
+            />
+            <text
+              fill="#F3DB5C"
+              stroke="none"
+              font-family="&quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial "
+              font-size="20px"
+              font-style="normal"
+              font-weight="normal"
+              text-decoration="normal"
+              x="1350"
+              y="350"
+              text-anchor="middle"
+              dominant-baseline="central"
+            >
+              {{pressure_right}}PM
+            </text>
+          </g>
+        </g>
+
+      </g>
+    </svg>
+   </div>
+    <el-row style="margin-top:-100px">
+      <el-col :span="12">
+        <suppEchart></suppEchart>
+      </el-col>
+      <el-col :span="12">
+        <tuiyiEchart></tuiyiEchart>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+<script>
+import suppEchart from "./suppEchart";
+import tuiyiEchart from "./tuiyiEchart";
+export default {
+  name: "Supporting",
+  data() {
+    return {
+      activeName: "first",
+      checkVisible: "false",
+      isshow: 1,
+      isshows: false,
+      TopBeam: 30.2,
+      PushSlip: 3.7,
+      pressure_left: 23.3,
+      pressure_right: 24.5,
+      islocation: 0,
+      lastlocation: 0,
+      tableisshow: [true, false, false, false],
+      carisshow: [
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+      ],
+    };
+  },
+  mounted: function () {
+    // this.start();
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    changeisshow() {
+      this.isshow = !this.isshow;
+    },
+    changelocation() {
+      this.carisshow[this.islocation] = !this.carisshow[this.islocation];
+      this.isshows = !this.isshows;
+    },
+    change_table() {
+      this.tableisshow[0] = !this.tableisshow[0];
+      this.isshows = !this.isshows;
+    },
+    // start() {
+    //   setInterval(this.getdata, 1000);
+    //   setInterval(this.change_table, 1000);
+    // },
+    // getdata() {
+    //   this.axios
+    //     .get(
+    //       `http://10.170.51.43:8082/hbase/getMpInfoByHbaseTablename/?hbasetablename=zhihu`
+    //     )
+    //     .then((res) => {
+    //       console.log(res.data[0].action);
+    //       this.lastlocation = this.islocation;
+    //       this.carisshow[this.lastlocation] = !this.carisshow[
+    //         this.lastlocation
+    //       ];
+    //       this.TopBeam = res.data[0].scale;
+    //       this.isshow = res.data[0].action;
+    //       this.PushSlip = res.data[0].route;
+    //       this.pressure_left = res.data[0].left_press;
+    //       this.pressure_right = res.data[0].right_press;
+    //       this.islocation = res.data[0].location;
+    //       this.carisshow[this.islocation] = !this.carisshow[this.islocation];
+    //       this.isshows = !this.isshows;
+    //     });
+    // },
+  },
+  components: {
+    suppEchart,
+    tuiyiEchart,
+  },
+};
+</script>
+<style scoped>
+.wrapper {
+  width: 100%;
+  height: 850px;
+  position: relative;
+  background-image: linear-gradient(
+    to right,
+    #06133c 0%,
+    #011669 50%,
+    #06133c 100%
+  );
+}
+</style>
+

src/views/mining/supporting/tuiyiEchart.vue

@@ -0,0 +1,142 @@
+<template>
+  <div
+    ref="testLine"
+    style="width: 650px; height: 300px; margin: 0px auto"
+  ></div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      zhijiaId: [],
+      barData: [],
+      currentChartId: 1,
+      xData: new Array(30).fill("-"),
+      yData: new Array(30).fill("-"),
+      count: 0,
+      myChart: null,
+      option: {
+        // backgroundColor: "#0f375f",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+            label: {
+              show: true,
+              backgroundColor: "#333",
+            },
+          },
+        },
+        title: {
+          text: "推移行程",
+          padding: [5, 70],
+          textStyle: {
+            fontWeight: "normal", //标题颜色
+            color: "#4ADEFE",
+            fontSize: 18,
+          },
+        },
+        xAxis: {
+          data: [],
+          axisLine: {
+            lineStyle: {
+              color: "#ccc",
+            },
+          },
+        },
+        yAxis: {
+          splitLine: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: "#ccc",
+            },
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            barWidth: 3,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#14c8d4" },
+                  { offset: 1, color: "#43eec6" },
+                ]),
+              },
+            },
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  methods: {
+    getData() {
+      var count = 0;
+
+      this.barData.shift(this.barData[0]);
+      this.barData.push(parseInt(Math.random() * (40 - 25 + 1) + 25, 10));
+
+      console.log(this.barData);
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.zhijiaId,
+          },
+        ],
+        series: [
+          {
+            data: this.barData,
+          },
+        ],
+      });
+    },
+  },
+  created() {
+    // this.getData();
+    var index = 190;
+    for (var i = 0; i < 190; i++) {
+      this.zhijiaId.push(index--);
+      var data = parseInt(Math.random() * (40 - 25 + 1) + 25, 10);
+      this.barData.push(data);
+    }
+    console.log(this.zhijiaId);
+  },
+  mounted() {
+    // 先画图
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    // 获取数据
+    this.myChart.setOption(this.option);
+    this.timer = setInterval(() => {
+      this.getData();
+    }, 3000);
+
+    // this.websocket = new WebSocket(
+    //   `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+    // );
+    // this.initWebSocket();
+  },
+  destroyed() {
+    clearInterval(this.timer);
+  },
+};
+</script>
+<style scoped>
+.select-veido .el-select {
+  width: 100px;
+  margin-left: 10px;
+}
+.select-veido >>> .el-input--small .el-input__inner {
+  background: none;
+}
+.select-veido >>> .el-input__inner {
+  border: 0;
+}
+</style>