Merge branch 'develop'

src/components/tunneling/lmid.vue

@@ -6,79 +6,84 @@
         </li>
 
         <li>
-            风  量 :<span id="l_one">{{one}}</span> m^3/min 
+            风  量 :<span id="l_one">{{data.fengliang_after}}</span> m^3/min 
         </li>
 
 
         <li>
-            风  压 :<span id="l_two">{{two}}</span> m^3/min
+            风  压 :<span id="l_two">{{data.fengya_after}}</span> m^3/min
         </li>
     </ul>
 </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
+ 
   data(){
     return {
-            one:'',
-            two:'',
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
-
-            totalPage: 0,    //一共多少也
-            timerId:null,      //定时器
+        data: {
+        fengliang_after: "0",
+        date: "2022-01-09 16:28:07",
+        fengliang_before: "0",
+        fengya_after: "0",
+        fengya_before: "0",
+      },
    }
   },
 
   mounted() {
-    this.getData()
-
+        this.websocket = new WebSocket(
+        `ws://${this.websocketIP}/hbase/ws/belt/49`
+      );
+      this.initWebSocket();
   },
-  destroyed(){
-    clearInterval(this.timerId)
-  },
-  methods: {
-    async getData(){
-        // 请求数据 allData
-        const { data: ret } = await this.$http.get('hbase/getJSON')
-        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()
+  methods:{
+       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].yarushifengjifengliang
-        this.two = showData[0].yarushifengjifengya
-
+    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)
-    }
-  }
-}
+    close() {
+      this.websocket.close();
+      console.log(123);
+    },
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+
+  };
+  
 </script>
 
 

src/components/tunneling/rtone.vue

@@ -2,22 +2,22 @@
 <div id="rtone">
     <ul>
         <li>
-            累计完成进尺 :<span>{{one}}</span>m
+            累计完成进尺 :<span>{{data.leijijinchi}}</span>m
         </li>
         <li>
-            月 完 成 进尺 :<span>{{two}}</span> m
+            月 完 成 进尺 :<span>{{data.yuejinchi}}</span> m
         </li>
         <li>
-            日 平 均 进尺 :<span>{{three}}</span> m 
+            日 平 均 进尺 :<span>{{data.rizuigaojinchi}}</span> m 
         </li>
         <li>
-            班 最 高 进尺 :<span>{{four}}</span> m  
+            班 最 高 进尺 :<span>{{data.banzuigaojinchi}}</span> m  
         </li>
         <li>
-            日 最 高 进尺 :<span>{{five}}</span> m
+            日 最 高 进尺 :<span>{{data.rizuigaojinchi}}</span> m
         </li>
         <li>
-            当 前___人  员 :<span id="six">{{six}}</span>
+            当 前___人  员 :<span id="six">{{data.dangqianrenyuan}}</span>
         </li>
         
     </ul>
@@ -25,81 +25,74 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
-  data(){
+     data(){
     return {
-            // showValue:'',
-            one:'',
-            two:'',
-            three:'',
-            four:'',
-            five:'',
-            six:'',
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
 
-            totalPage: 0,    //一共多少也
-            timerId:null,      //定时器
+        data: {
+        dangqianrenyuan: "0",
+        qnm:"0",
+        banzuigaojinchi:"0",
+        rizuigaojinchi:"0",
+        leijijinchi:"0",
+        yuejinchi:"0",
+        rijinchi:"0"
+
+      },
+          
    }
   },
 
   mounted() {
-    this.getData()
-    //  对窗口大小变化的事件进行监听
-        // window.addEventListener('resize', this.screenAdapter)
-  },
-  destroyed(){
-    clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        // window.removeEventListener('resize', this.screenAdapter)
+        this.websocket = new WebSocket(
+        `ws://${this.websocketIP}/hbase/ws/belt/53`
+      );
+      this.initWebSocket();
   },
-  methods: {
-    async getData(){
-        // 请求数据 allData
-        const { data: ret } = await this.$http.get('hbase/getJSON')
-        this.allData = ret
-        // 对数据排序
-        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()
+  methods:{
+       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].leijiwanchengjinchi
-        this.two = showData[0].benyuewanchengjinchi
-        this.three = showData[0].ripingjunjinchi
-        this.four = showData[0].banzuigaojinchi
-        this.five = showData[0].rizuigaojinchi
-        this.six = showData[0].dangqianrenyuan
+    changeState(data) {
+      this.data = data[0]
+    },
+    close() {
+      this.websocket.close();
+      console.log(123);
     },
-    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"]),
+  },
+ 
 }
 </script>
 

src/components/tunneling/rtop.vue

@@ -2,11 +2,11 @@
 <div id="rtop">
     <ul>
         <li>
-            瓦斯涌出量:<span>{{one}}</span>m^3/min
+            瓦斯涌出量:<span>{{data.wasi_after}}</span>m^3/min
             <span style="width:30px; height:30px; border:1px solid red; border-radius:50%; " v-bind:class="{red1:danger1, green1:save1}"></span>
         </li>
         <li>
-            粉 尘 浓 度 :<span>{{two}}</span>g/m^3
+            粉 尘 浓 度 :<span>{{data.fenchen_after}}</span>g/m^3
             <span style="width:30px; height:30px; border:1px solid red; border-radius:50%; " v-bind:class="{red1:danger2, green1:save2}"></span>
         </li>
     </ul>
@@ -14,90 +14,68 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
   data(){
     return {
-            one:'',
-            two:'',
-            danger1:"",
-            danger2:"",
-            save1:"",
-            save2:"",
 
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
-
-            totalPage: 0,    //一共多少也
-            timerId:null,      //定时器
+        data: {
+        fenchen_after: "0",
+        wasi_after:"0"
+      },
+          
    }
   },
 
   mounted() {
-    this.getData()
-    //  对窗口大小变化的事件进行监听
-        // window.addEventListener('resize', this.screenAdapter)
-  },
-  destroyed(){
-    clearInterval(this.timerId)
-        // 在组件销毁的时候, 需要将监听器取消掉
-        // window.removeEventListener('resize', this.screenAdapter)
+        this.websocket = new WebSocket(
+        `ws://${this.websocketIP}/hbase/ws/belt/51`
+      );
+      this.initWebSocket();
   },
-  methods: {
-   async getData(){
-        // 请求数据 allData
-        const { data: ret } = await this.$http.get('hbase/getJSON')
-        const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode4')
-        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()
-    },
-    updateData() {
-        this.danger1 = ""
-        this.danger2 = ""
-        this.save1 = ""
-        this.save2 = ""
-        const start = (this.currentPage - 1) * 1
-        const end = this.currentPage * 1
-        const showData = this.allData.slice(start, end)    
-        this.one = showData[0].wasiyongchuliang
-        this.two = showData[0].fenchennongdu
-        if(this.one>3){
-            this.danger1 = true
-        }else{
-            this.save1 = true
+  methods:{
+       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));
         }
-
-        if(this.two>14){
-            this.danger2 = true
-        }else{
-            this.save2 = true
-        }
-    
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+      });
+    },
+    changeState(data) {
+      this.data = data[0]
+    },
+    close() {
+      this.websocket.close();
+      console.log(123);
     },
-    startInterval () {
-        // 每个3秒执行一次
-        setInterval(() => { 
-            // 保险操作
-            if(this.timeId){
-                clearInterval(this.timerId)
-            }
-                this.currentPage++
-            //  当页数超过总页数是， 从头开始
-            if(this.currentPage > this.totalPage){
-                this.currentPage = 1
-            }
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
 
-            this.updateData()
-        },3000)
-    }
-  }
 }
 </script>