主排水切换数据情况

src/App.vue

@@ -7,12 +7,16 @@
 <script>
 export default {
   created() {
+    //解决vue页面刷新后原先获取的vuex中state消失的问题
     //在页面加载时读取sessionStorage里的状态信息
     if (sessionStorage.getItem("store")) {
       this.$store.replaceState(
+        // 将源对象分配到目标对象 Object.assign(target, source);
         Object.assign(
           {},
+          // 目标对象
           this.$store.state,
+          //源对象
           JSON.parse(sessionStorage.getItem("store"))
         )
       );

src/common/oneline.vue

@@ -265,6 +265,11 @@ export default {
         this.websocket.close();
       });
     },
+    clearData() {
+      this.count = 0;
+      this.xData = new Array(30).fill("-");
+      this.yData = new Array(30).fill("-");
+    },
   },
   mounted() {
     // 先画图

src/common/threeline.vue

@@ -459,6 +459,13 @@ export default {
         this.websocket.close();
       });
     },
+    clearData() {
+      this.count = 0;
+      this.xData = new Array(30).fill("-");
+      this.y1Data = new Array(30).fill("-");
+      this.y2Data = new Array(30).fill("-");
+      this.y3Data = new Array(30).fill("-");
+    },
   },
   mounted() {
     // 先画图

src/common/twoline.vue

@@ -1,47 +1,48 @@
 <template>
-	<!-- 两条曲线封装 且需要两个websocket连接 -->
-	<div>
-		<div ref="testLine" style="width: 500px; height: 200px;  margin: 0px auto;padding-top:8px"></div>
-	</div>
+  <!-- 两条曲线封装 且需要两个websocket连接 -->
+  <div>
+    <div
+      ref="testLine"
+      style="width: 500px; height: 200px;  margin: 0px auto;padding-top:8px"
+    ></div>
+  </div>
 </template>
 
 <script>
-	import {
-		mapState
-	} from "vuex";
+import { mapState } from "vuex";
 
-	export default {
-		props: {
-			title: {
-				type: String,
-				default: ''
-			},
-			id: {
-				type: Number,
-				required: true
-			},
-			unit: {
-				type: String,
-				default: ''
-			},
-			type: {
-				type: Array,
-				required: true
-			},
-			legend: {
-				type: Array,
-				required: true
-			},
-		},
-		data() {
-			return {
-				currentChartId: 1,
-				xData: new Array(30).fill("-"),
-				y1Data: new Array(30).fill("-"),
-				y2Data: new Array(30).fill("-"),
-				count: 0,
-				myChart: null,
-				option: {
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: Number,
+      required: true,
+    },
+    unit: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: Array,
+      required: true,
+    },
+    legend: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      currentChartId: 1,
+      xData: new Array(30).fill("-"),
+      y1Data: new Array(30).fill("-"),
+      y2Data: new Array(30).fill("-"),
+      count: 0,
+      myChart: null,
+      option: {
         tooltip: {
           trigger: "axis",
           backgroundColor: "transparent",
@@ -142,8 +143,7 @@
           // 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",
+          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,
         },
@@ -152,7 +152,7 @@
           left: "10%",
           right: "10%",
           bottom: "1%",
-          containLabel: true
+          containLabel: true,
         },
         yAxis: [
           {
@@ -200,7 +200,7 @@
           textStyle: {
             fontWeight: "normal", //标题颜色
             color: "#4ADEFE",
-			fontSize:15
+            fontSize: 15,
           },
         },
 
@@ -305,122 +305,133 @@
           },
         ],
       },
-			};
-		},
-		computed: {
-			...mapState(["websocketIP"]),
-		},
-		methods: {
-			idChange(id) {
-				//  console.log('this.legend',this.legend[0]);
-				// console.log("sep", id);
-				// 数据清空
-				this.xData = new Array(30).fill("-");
-				this.y1Data = new Array(30).fill("-");
-				this.y2Data = new Array(30).fill("-");
-				// 关闭以前的websocket
-				this.websocket.close();
-				// 开启一个新的
-				this.websocket = new WebSocket(
-					`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
-				);
-				this.initWebSocket();
-			},
+    };
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  methods: {
+    idChange(id) {
+      //  console.log('this.legend',this.legend[0]);
+      // console.log("sep", id);
+      // 数据清空
+      this.xData = new Array(30).fill("-");
+      this.y1Data = new Array(30).fill("-");
+      this.y2Data = new Array(30).fill("-");
+      // 关闭以前的websocket
+      this.websocket.close();
+      // 开启一个新的
+      this.websocket = new WebSocket(
+        `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+      );
+      this.initWebSocket();
+    },
 
-			addData(data) {
-				this.websocket;
-				// 先扩展数组，然后删除多余元素
-				// console.log("data", data);
-				if (this.count < 30) {
-					for (let i = 0; i < data.length; i++) {
-						this.y1Data[this.count] = data[i][this.type[0]];
-						this.y2Data[this.count] = data[i][this.type[1]];
-						this.xData[this.count] = data[i]["date"].split(" ")[1];
-					}
-					this.count++;
-				} else {
-					for (let i = 0; i < data.length; i++) {
-						// 删除数组中的第一个项目
-						this.y1Data.shift();
-						this.y1Data.push(data[i][this.type[0]]);
-						this.y2Data.shift();
-						this.y2Data.push(data[i][this.type[1]]);
-						this.xData.shift();
-						this.xData.push(data[i]["date"].split(" ")[1]);
-					}
-				}
-				this.myChart.setOption({
-					xAxis: [{
-						data: this.xData,
-					}, ],
-					series: [{
-							name: this.legend[0],
-							data: this.y1Data,
-						},
-						{
-							name: this.legend[1],
-							data: this.y2Data,
-						}
-					],
-				});
-				// console.log("this.paiqidata", this.paiqidata);
-				// console.log("this.chouqidata", this.chouqidata);
-				// console.log("this.xData", this.xData);
-			},
-			initWebSocket() {
-				// 连接错误
-				this.websocket.onerror = () => {
-					console.log(
-						"WebSocket连接发生错误   状态码：" + this.websocket.readyState
-					);
-				};
-				// 连接成功
-				this.websocket.onopen = () => {
-					console.log(
-						"WebSocket连接成功    状态码：" + this.websocket.readyState
-					);
-				};
-				// 收到消息的回调
-				this.websocket.onmessage = (event) => {
-					console.log("@@@@", event);
-     
-					if (JSON.parse(event.data).length) {
-						this.addData(JSON.parse(event.data));
-					}
-				};
-				// 连接关闭的回调
-				this.websocket.onclose = () => {
-					console.log(
-						"WebSocket连接关闭    状态码：" + this.websocket.readyState
-					);
-				};
-				// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
-				this.$once("hook:beforeDestroy", () => {
-					this.websocket.close();
-				});
-			},
-		},
-		mounted() {
-      console.log("@@@@", this.id);
-			// 先画图
-			this.myChart = this.$echarts.init(this.$refs.testLine);
-			this.myChart.setOption(this.option);
-			this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
-			this.initWebSocket();
-		},
-	};
+    addData(data) {
+      this.websocket;
+      // 先扩展数组，然后删除多余元素
+      // console.log("data", data);
+      if (this.count < 30) {
+        for (let i = 0; i < data.length; i++) {
+          this.y1Data[this.count] = data[i][this.type[0]];
+          this.y2Data[this.count] = data[i][this.type[1]];
+          this.xData[this.count] = data[i]["date"].split(" ")[1];
+        }
+        this.count++;
+      } else {
+        for (let i = 0; i < data.length; i++) {
+          // 删除数组中的第一个项目
+          this.y1Data.shift();
+          this.y1Data.push(data[i][this.type[0]]);
+          this.y2Data.shift();
+          this.y2Data.push(data[i][this.type[1]]);
+          this.xData.shift();
+          this.xData.push(data[i]["date"].split(" ")[1]);
+        }
+      }
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.xData,
+          },
+        ],
+        series: [
+          {
+            name: this.legend[0],
+            data: this.y1Data,
+          },
+          {
+            name: this.legend[1],
+            data: this.y2Data,
+          },
+        ],
+      });
+      // console.log("this.paiqidata", this.paiqidata);
+      // console.log("this.chouqidata", this.chouqidata);
+      // console.log("this.xData", this.xData);
+    },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        console.log("@@@@", event);
+
+        if (JSON.parse(event.data).length) {
+          this.addData(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+      });
+    },
+    clearData() {
+      this.count = 0;
+      this.xData = new Array(30).fill("-");
+      this.y1Data = new Array(30).fill("-");
+      this.y2Data = new Array(30).fill("-");
+    },
+  },
+  mounted() {
+    console.log("@@@@", this.id);
+    // 先画图
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+    this.websocket = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+    );
+    this.initWebSocket();
+  },
+};
 </script>
 <style scoped>
-	.select-veido .el-select {
-		width: 100px;
-		margin-left: 10px;
-	}
+.select-veido .el-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/views/drain/dataBoard/dataBoard.vue

@@ -119,13 +119,11 @@ export default {
   },
   methods: {
     selectChart(val) {
-      console.log("val", val);
-      this.$refs.voltage.idChange(val);
-      this.$refs.current.idChange(val);
-      this.$refs.bearing.idChange(val);
-      this.$refs.virbrate.idChange(val);
-      this.$refs.pressure.idChange(val);
-      this.$refs.water_level.idChange(val);
+      let chartRefs =["voltage","current","bearing","virbrate","pressure","water_level"];
+       for (let i = 0; i < chartRefs.length; i++) {
+        this.$refs[chartRefs[i]].clearData();
+        this.$refs[chartRefs[i]].idChange(val);
+      }
       //   this.$refs.faultAlarm.idChange(val);
       //   this.$refs.runningMsg.idChange(val);
     },

src/views/gas/configImg/main.vue

@@ -2,8 +2,11 @@
   <div id="apppp">
     <section class="mainbox">
       <!-- 查看数据看板 -->
-      <button @click="changeWebState(1)"></button>
-      <button class="button2" @click="changeWebState(2)"></button>
+      <button @click="changeWebState(1)"><div class="name">查看</div></button>
+      <button
+        class="button2"
+        @click="changeWebState(2)"
+      ><div class="name">查看</div></button>
       <!-- 电机1详细数据 -->
       <div class="motor1">
         <h3>电机1:</h3>
@@ -63,7 +66,7 @@
         <div>
           <section>
             <div>
-             <span>电机电流</span> 
+              <span>电机电流</span>
               <p>{{ motor2.current }}A</p>
             </div>
             <div>
@@ -539,7 +542,7 @@ export default {
   },
 };
 </script >
-<style scoped>
+<style scoped lang="less">
 #apppp .mainbox {
   position: relative;
   background: url("../../../assets/img/gas/back4.png") no-repeat;
@@ -552,28 +555,33 @@ export default {
 }
 #apppp .mainbox button {
   position: absolute;
-  border: 1px solid;
-
-  background-color: #f5f5f5;
+  border: 0px solid;
+  background-color: transparent;
   color: #393939;
-  width: 26px;
-  height: 71px;
+  width: 27px;
+  height: 60px;
   font-weight: 300;
   cursor: pointer;
 }
+#apppp .mainbox button .name{
+  display: none;
+}
 #apppp .mainbox button:hover {
-  background-color: #4cc9f0;
-  -webkit-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
-  -moz-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
-  box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
+  .name{
+    display: block;
+  }
+  border-radius: 50px;
+ background: #B0B0B1;
+box-shadow:  20px 20px 60px #969696,
+             -20px -20px 60px #cacacc;
 }
 #apppp .mainbox button:nth-child(1) {
-  left: 1264px;
-  top: 361px;
+  left: 1087px;
+  top: 316px;
 }
 #apppp .mainbox button:nth-child(2) {
-  left: 1264px;
-  top: 595px;
+  left: 1086px;
+  top: 556px;
 }
 #apppp .mainbox .motor1 {
   position: absolute;

src/views/transportation/configImg/analysis/BeltOverview.vue

@@ -8,7 +8,11 @@
         :id="23"
         color="#DADBBD"
       >
-        <a-icon type="sync" style="color: #6ebf8b; font-size: 21px" spin />
+        <a-icon
+          type="sync"
+          style="color: #6ebf8b; font-size: 21px"
+          spin
+        />
       </belt-item>
 
       <belt-item
@@ -17,7 +21,11 @@
         :id="2"
         color="#DADBBD"
       >
-        <a-icon type="sync" style="color: #6ebf8b; font-size: 21px" spin />
+        <a-icon
+          type="sync"
+          style="color: #6ebf8b; font-size: 21px"
+          spin
+        />
       </belt-item>
 
       <div style="margin-top: 180px; margin-left: -50px">
@@ -28,24 +36,38 @@
           rvalue="-90"
           color="#DADBBD"
         >
-          <a-icon type="sync" style="color:#6EBF8B; fon t-size:21px" spin />
+          <a-icon
+            type="sync"
+            style="color:#6EBF8B; fon t-size:21px"
+            spin
+          />
         </belt-item>
       </div>
 
-      <div style="margin-left: -30px">
+      <div style="margin-left: -57px">
         <belt-item
           @click.native="viewDetail('西1.6m巷顺槽皮带', 4)"
           title="西1.6m巷顺槽皮带"
           :id="4"
           color="#D82148"
         >
-          <a-icon type="alert" style="color: #d82148; font-size: 20px" />
+          <a-icon
+            type="alert"
+            style="color: #d82148; font-size: 20px"
+          />
         </belt-item>
       </div>
 
-      <div class="meicang">煤仓</div>
+      <!-- <div class="meicang">煤仓</div> -->
+      <div class="bottom_left">
+        煤 仓
+        <img
+          src="@/components/newMain/item2/筒仓1.png"
+          alt="煤 仓"
+        >
+      </div>
 
-      <div style="margin-top: 110px">
+      <div style="margin-top: 110px;margin-left:25px">
         <belt-item
           @click.native="viewDetail('西巷171.6皮带', 5)"
           title="西巷171.6皮带"
@@ -53,7 +75,11 @@
           rvalue="-45"
           color="#DADBBD"
         >
-          <a-icon type="sync" style="color: #6ebf8b; font-size: 21px" spin />
+          <a-icon
+            type="sync"
+            style="color: #6ebf8b; font-size: 21px"
+            spin
+          />
         </belt-item>
       </div>
 
@@ -63,7 +89,11 @@
         :id="6"
         color="#DADBBD"
       >
-        <a-icon type="sync" style="color: #6ebf8b; font-size: 21px" spin />
+        <a-icon
+          type="sync"
+          style="color: #6ebf8b; font-size: 21px"
+          spin
+        />
       </belt-item>
 
       <div style="margin-bottom: 120px; margin-left: -50px">
@@ -74,7 +104,11 @@
           rvalue="-90"
           color="#DADBBD"
         >
-          <a-icon type="sync" style="color: #6ebf8b; font-size: 21px" spin />
+          <a-icon
+            type="sync"
+            style="color: #6ebf8b; font-size: 21px"
+            spin
+          />
         </belt-item>
       </div>
       <div style="margin-bottom: 420px; margin-left: -100px">
@@ -100,7 +134,11 @@
           rvalue="-25"
           color="#DADBBD"
         >
-          <a-icon type="sync" style="color: #6ebf8b; font-size: 21px" spin />
+          <a-icon
+            type="sync"
+            style="color: #6ebf8b; font-size: 21px"
+            spin
+          />
         </belt-item>
       </div>
     </div>
@@ -119,7 +157,7 @@ export default {
   },
   methods: {
     viewDetail(title, id) {
-      this.$bus.$emit('getBeltData', title, id)
+      this.$bus.$emit("getBeltData", title, id);
     },
   },
 };
@@ -154,4 +192,19 @@ export default {
   margin-top: 120px;
   margin-left: 21px;
 }
+.bottom_left {
+  width: 67px;
+  height: 110px;
+  position: absolute;
+  left: 387px;
+  top: 399px;
+  color: #fff;
+  font-size: 12px;
+  padding: 5px;
+  text-align: center;
+}
+.bottom_left img {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/views/transportation/configImg/belt/Analysis.vue

@@ -267,6 +267,7 @@ export default {
         });
       });
     },
+    // 皮带名称下拉选框发生改变
     titleChange(val) {
       for (let i = 1; i <= 4; i++) {
         let temp = "chart" + i;
@@ -281,6 +282,7 @@ export default {
     ...mapState(["websocketIP"]),
   },
   mounted() {
+    // 查到当前皮带所对应的子设备Id
     let item = this.options.find((item) => item.label == this.titleCopy);
     this.websocket = new WebSocket(
       `ws://${this.websocketIP}/hbase/ws/belt/${item.id}`