增加掘进系统的部分数据

src/components/tunneling/lbottom.vue

@@ -1,126 +1,112 @@
 <template>
-<div id="lbottom">
+  <div id="lbottom">
     <ul>
-        <li >
-            <span id="l_title">除尘风机</span>
-        </li>
-
-        <li>
-            风  量 :<span id="l_one">{{one}}</span> m^3/min 
-        </li>
-
-
-        <li>
-            风  压 :<span id="l_two">{{two}}</span> m^3/min
-        </li>
+      <li>
+        <span id="l_title">除尘风机</span>
+      </li>
+      <li>
+        风 量 :<span id="l_one">{{ data.fengya_after }}</span> m^3/min
+      </li>
+      <li>
+        风 压 :<span id="l_two">{{ data.fengliang_after }}</span> m^3/min
+      </li>
     </ul>
-</div>
+  </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
-  data(){
+  data() {
     return {
-            one:'',
-            two:'',
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
-
-            totalPage: 0,    //一共多少也
-            timerId:null,      //定时器
-   }
-  },
-
-  mounted() {
-    this.getData()
-    //  对窗口大小变化的事件进行监听
-        // window.addEventListener('resize', this.screenAdapter)
-  },
-  destroyed(){
-    clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        // window.removeEventListener('resize', this.screenAdapter)
+      data: {
+        fengliang_after: "0",
+        date: "2022-01-09 16:28:07",
+        fengliang_before: "0",
+        fengya_after: "0",
+        fengya_before: "0",
+      },
+    };
   },
   methods: {
-    async getData(){
-        // 请求数据 allData
-        const { data: ret } = await this.$http.get('hbase/getJSON')
-        const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode6')
-        this.allData = ret
-        // 每1个元素显示一页
-        this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
-
-        // 获取完数据， 更新图标
-        this.updateData()
-
-        // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-        this.startInterval()
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          this.changeState(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+      });
     },
-    updateData() {
-
-        const start = (this.currentPage - 1) * 1
-        const end = this.currentPage * 1
-        const showData = this.allData.slice(start, end)    
-        this.one = showData[0].chuchenfengjifengliang
-        this.two = showData[0].chuchenfengjifengya
+    changeState(data) {
+      this.data = data[0]
     },
-    startInterval () {
-        // 每个3秒执行一次
-        setInterval(() => { 
-            // 保险操作
-            if(this.timeId){
-                clearInterval(this.timerId)
-            }
-                this.currentPage++
-            //  当页数超过总页数是， 从头开始
-            if(this.currentPage > this.totalPage){
-                this.currentPage = 1
-            }
-            this.updateData()
-        },3000)
-    }
-  }
-}
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/48`);
+    this.initWebSocket();
+  },
+};
 </script>
 
 
 <style scoped>
-
-li{
-    width: 100%;
-    height: 100%;
-    color: royalblue;
-    display: flex;
-    /* flex-direction: column; */
-    margin-top: 1.25rem;
-    margin-right:.75rem;
-    font-size: 1.625rem;
-    text-align:center
-
-
+li {
+  width: 100%;
+  height: 100%;
+  color: royalblue;
+  display: flex;
+  /* flex-direction: column; */
+  margin-top: 1.25rem;
+  margin-right: 0.75rem;
+  font-size: 1.625rem;
+  text-align: center;
 }
-#l_one{
-    width: 5rem;
-    height: 2rem;
-    border-radius:0.7rem;
-    background-color: rgb(133, 158, 231);
-    margin: 0 .325rem .25rem; 
-    text-align: center;
+#l_one {
+  width: 5rem;
+  height: 2rem;
+  border-radius: 0.7rem;
+  background-color: rgb(133, 158, 231);
+  margin: 0 0.325rem 0.25rem;
+  text-align: center;
 }
-#l_two{
-    width: 5rem;
-    height: 2rem;
-    border-radius:0.7rem;
-    background-color: rgb(133, 158, 231);
-    margin: 0 .325rem .25rem; 
-    text-align: center;
+#l_two {
+  width: 5rem;
+  height: 2rem;
+  border-radius: 0.7rem;
+  background-color: rgb(133, 158, 231);
+  margin: 0 0.325rem 0.25rem;
+  text-align: center;
 }
-#l_title{
-    width: 8.75rem;
-    height: 1.875rem;
-    background-color: rgb(30, 3, 66);
-    color: pink;
-    text-align: center;
+#l_title {
+  width: 8.75rem;
+  height: 1.875rem;
+  background-color: rgb(30, 3, 66);
+  color: pink;
+  text-align: center;
 }
 </style>

src/components/tunneling/mbl2.vue

@@ -1,123 +1,114 @@
 <template>
-<div id="mbl2">
+  <div id="mbl2">
     <ul>
-        <li>
-            油泵 :<span>{{showValue}}</span>
-            <!-- 油泵<span>{{showValue}}</span> -->
-            截低 :<span>{{showValue}}</span>
-            截高 :<span>{{showValue}}</span>
-        </li>
-        <li>
-            二运 :<span>{{showValue}}</span>
-            风机 :<span>{{showValue}}</span>
-            水泵 :<span>{{showValue}}</span>
-        </li>
-        <li>
-            电铃 :<span>{{showValue}}</span>
-            左轮 :<span>{{showValue}}</span>
-            右轮 :<span>{{showValue}}</span>
-        </li>
-        <li>
-            一运 :<span>{{showValue}}</span>
-            隔离 :<span>{{showValue}}</span>
-            铲板 :<span>{{showValue}}</span>
-        </li>
-        <li>
-            后支 :<span>{{showValue}}</span>
-            润滑 :<span>{{showValue}}</span>
-            伸缩 :<span>{{showValue}}</span>
-        </li>
-        
+      <li>
+        油泵 :<span>{{ infoList[0] }}</span> 截低 :<span>{{
+          infoList[1]
+        }}</span>
+        截高 :<span>{{ infoList[2] }}</span>
+      </li>
+      <li>
+        二运 :<span>{{ infoList[3] }}</span> 风机 :<span>{{
+          infoList[4]
+        }}</span>
+        水泵 :<span>{{ infoList[5] }}</span>
+      </li>
+      <li>
+        电铃 :<span>{{ infoList[6] }}</span> 左轮 :<span>{{
+          infoList[7]
+        }}</span>
+        右轮 :<span>{{ infoList[8] }}</span>
+      </li>
+      <li>
+        一运 :<span>{{ infoList[9] }}</span> 隔离 :<span>{{
+          infoList[10]
+        }}</span>
+        铲板 :<span>{{ infoList[11] }}</span>
+      </li>
+      <li>
+        后支 :<span>{{ infoList[12] }}</span> 润滑 :<span>{{
+          infoList[13]
+        }}</span>
+        伸缩 :<span>{{ infoList[14] }}</span>
+      </li>
     </ul>
-</div>
+  </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
-  data(){
+  data() {
     return {
-            showValue:'停止',
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
-
-            totalPage: 0,    //一共多少也
-            timerId:null,      //定时器
-   }
-  },
-
-  mounted() {
-    this.getData()
-    //  对窗口大小变化的事件进行监听
-        // window.addEventListener('resize', this.screenAdapter)
-  },
-  destroyed(){
-    clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        // window.removeEventListener('resize', this.screenAdapter)
+      infoList: new Array(15).fill("正常"),
+    };
   },
   methods: {
-    getData(){
-        // 请求数据 allData
-        this.allData = ['停止','正常']
-        // 对数据排序
-        this.allData.sort((a,b) => {{
-            return a.value-b.value //从小到大排序
-        }})
-        // 每1个元素显示一页
-        this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
-
-        // 获取完数据， 更新图标
-        this.updateData()
-
-        // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-        this.startInterval()
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          this.getData(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+      });
     },
-    updateData() {
-
-        const start = (this.currentPage - 1) * 1
-        const end = this.currentPage * 1
-        const showData = this.allData.slice(start, end)    
-        this.showValue = showData[0]
+    getData(data) {
+      let state = data[0]["gongzuozhuangtai_after"];
+      this.infoList = this.infoList.map((item, index) => {
+        return (item = state[index] == "0" ? "正常" : "停止");
+      });
     },
-    startInterval () {
-        // 每个3秒执行一次
-        setInterval(() => { 
-            // 保险操作
-            if(this.timeId){
-                clearInterval(this.timerId)
-            }
-                this.currentPage++
-            //  当页数超过总页数是， 从头开始
-            if(this.currentPage > this.totalPage){
-                this.currentPage = 1
-            }
-            this.updateData()
-        },3000)
-    }
-  }
-}
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/52`);
+    this.initWebSocket();
+  },
+};
 </script>
 
 <style scoped>
-ul{
-    width: 100%;
-    height: 100%;
+ul {
+  width: 100%;
+  height: 100%;
 }
-li{
-    width: 100%;
-    height: 100%;
-    color: royalblue;
-    display: flex;
-    font-size: 1rem;
-    text-align: center;
+li {
+  width: 100%;
+  height: 100%;
+  color: royalblue;
+  display: flex;
+  font-size: 1rem;
+  text-align: center;
 }
-span{
-    border-radius:0.7rem;
-    width: 2.5rem;
-    height: 2.25rem;
-    background-color: rgb(133, 158, 231);
-    margin: 0 .325rem .25rem; 
-    
+span {
+  border-radius: 0.7rem;
+  width: 2.5rem;
+  height: 2.25rem;
+  background-color: rgb(133, 158, 231);
+  margin: 0 0.325rem 0.25rem;
 }
 </style>

src/views/tunnelling/zutai.vue

@@ -172,6 +172,8 @@ h1 {
   height: 100%;
   display: flex;
   margin-top: 10px;
+  background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
+  position: relative;
 }
 .screen-left {
   height: 100%;