报警信息显示

.env.development

@@ -3,12 +3,12 @@ ENV = 'development'
 # 接口地址
 
 #内网服务地址
-#VUE_APP_BASE_API  = 'http://192.168.99.207:7070'
-#VUE_APP_WS_API = 'ws://192.168.99.207:7070'
+VUE_APP_BASE_API  = 'http://192.168.99.207:7070'
+VUE_APP_WS_API = 'ws://192.168.99.207:7071'
 
 # 刘力-本地服地址
-VUE_APP_BASE_API  = 'http://192.168.99.65:7070'
-VUE_APP_WS_API = 'ws://192.168.99.65:7071'
+#VUE_APP_BASE_API  = 'http://192.168.99.65:7070'
+#VUE_APP_WS_API = 'ws://192.168.99.65:7071'
 
 # 许镇-本地服地址
 #VUE_APP_BASE_API  = 'http://192.168.99.84:7070'

.env.production

@@ -4,4 +4,4 @@ ENV = 'production'
 # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
 VUE_APP_BASE_API  = 'http://192.168.99.207:7070'
 # 如果接口是 http 形式， wss 需要改为 ws
-VUE_APP_WS_API = 'ws://192.168.99.207:7070'
+VUE_APP_WS_API = 'ws://192.168.99.207:7071'

src/views/components/WarehouseWarning.vue

@@ -9,14 +9,13 @@
     </h3>
     <!--表格渲染-->
     <el-table ref="table" style="min-width: 100%;" :width="width" :height="height" :data="tableData" class="warehose-el-table" :row-class-name="rowBgColor">
-      <el-table-column prop="time" label="时间" align="center" min-width="60" />
-      <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
-      <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
+      <el-table-column prop="alarm_time" label="时间" align="center" min-width="70" />
+      <el-table-column prop="area_name" label="库房" align="center" min-width="35" />
+      <el-table-column prop="event_name" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
     </el-table>
   </div>
 </template>
 <script>
-import data1 from './data1.json'
 export default {
   name: 'WarehouseWarning',
   props: {
@@ -31,57 +30,41 @@ export default {
   },
   data() {
     return {
-      tableData: [],
-      socket: null,
-      lockReconnect: false, // 避免重复连接
-      heartCheck: {
-        timeout: 3000,
-        timeoutobj: null,
-        serverTimeoutObj: null,
-        start: function() {
-          const that = this
-          clearTimeout(this.timeoutObj)
-          clearTimeout(this.serverTimeoutObj)
-          this.timeObj = setTimeout(function() {
-            // 这里发送一个心跳，后端收到后，返回一个心跳，这里用的ping-pong
-            this.socket.send('ping')
-            that.serverTimeoutObj = setTimeout(function() {
-              this.socket.close()
-            }, that.timeout)
-          }, this.timeout)
-        }
+      tableData: [], // 正在展示的警情数据
+      // receivedData: [], // 接收到的最新警情数据
+      // displayNum: 0,
+      // lockReconnect: false, // 避免重复连接
+      // heartCheck: {
+      //   timeout: 3000,
+      //   timeoutobj: null,
+      //   // serverTimeoutObj: null,
+      //   start: () => {
+      //     // const that = this
+      //     clearTimeout(this.timeoutObj)
+      //     // clearTimeout(this.serverTimeoutObj)
+      //     this.timeoutobj = setTimeout(() => {
+      //       // 这里发送一个心跳，后端收到后，返回一个心跳，这里用的ping-pong
+      //       this.socket.send('ping')
+      //       // that.serverTimeoutObj = setTimeout(() => {
+      //       //   this.socket.close()
+      //       // }, that.timeout)
+      //     }, this.timeout)
+      //   }
+      // }
+      socket: null
     }
+  },
+  watch: {
+    // 如果 `tableData` 发生改变，这个函数就会运行
+    tableData: function(newData, oldData) {
+      this.tableRefScroll()
     }
   },
-  // created() {
-  //   this.openSocket()
-  // },
-  mounted() {
+  created() {
     this.openSocket()
-    this.getData()
-    console.log(11333)
-    this.$nextTick(() => {
-      this.tableRefScroll()
-    })
-    // this.$nextTick(() => {
-    //   this.scroll = new Bscroll('.warehose-el-table .el-table__body-wrapper', {
-    //     scrollY: true
-    //     ,startY: 10
-    //   })
-    //   this.scroll.on('scrollEnd', () => {
-    //     // let pageIndex = this.scroll.getCurrentPage().pageX;
-    //     // this.currentPageIndex = pageIndex;
-    //     // if(vm.autoPlay) {
-    //     //     vm.play();
-    //     // }
-    //     console.log('scrollEnd')
-    //   })
-    // })
   },
+
   methods: {
-    getData() {
-      this.tableData = data1.rows
-    },
     // 表格隔行变色
     rowBgColor({ row, rowIndex }) {
       if (rowIndex % 2 === 1) {
@@ -95,7 +78,9 @@ export default {
       clearInterval(this.timer) // 清除定时器
       const table = this.$refs.table // 获取DOM元素
       const wrapperHeight = table.$el.offsetHeight - 30
-      this.scollNum = Math.floor(wrapperHeight / 40)
+      // 组件一页能展示的数据条数
+      this.displayNum = Math.floor(wrapperHeight / 40)
+      if (this.tableData.length > this.displayNum) {
         const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素
         this.addTableRefScroll(bodyWrapper)
         // 鼠标移入
@@ -106,24 +91,32 @@ export default {
         bodyWrapper.onmouseout = () => {
           this.addTableRefScroll(bodyWrapper)
         }
+      }
     },
     addTableRefScroll(bodyWrapper) {
-      let scrollTop = bodyWrapper.scrollTop
+      // let scrollTop = bodyWrapper.scrollTop
+      if (this.displayNum && this.displayNum > 0) {
         this.timer = setInterval(() => {
-        scrollTop = bodyWrapper.scrollTop
-        bodyWrapper.scrollTop += this.scollNum * 40
-        if (scrollTop === bodyWrapper.scrollTop) {
-          if (this.isScroll) {
-            scrollTop = 0
+          // scrollTop = bodyWrapper.scrollTop
+          if (Math.round(bodyWrapper.scrollTop / 40) >= this.tableData.length - this.displayNum) {
             bodyWrapper.scrollTop = 0
           } else {
-            if (this.flag === 1) {
-              this.currentPage++
-              this.handleSearch() // 函数中需要清楚定时器
-            }
-          }
+            console.log(3333, this.displayNum)
+            bodyWrapper.scrollTop += this.displayNum * 40
+          }
+          // if (scrollTop === bodyWrapper.scrollTop) {
+          //   if (this.isScroll) {
+          //     scrollTop = 0
+          //     bodyWrapper.scrollTop = 0
+          //   } else {
+          //     if (this.flag === 1) {
+          //       this.currentPage++
+          //       this.handleSearch() // 函数中需要清楚定时器
+          //     }
+          //   }
+          // }
+        }, 1000 * 3 * this.displayNum)
       }
-      }, 1000 * 3 * this.scollNum)
     },
     openSocket() {
       if (!('WebSocket' in window)) {
@@ -140,13 +133,14 @@ export default {
         this.socket.onopen = () => {
           console.log('websocket已经打开')
           // 心跳检测重置
-          this.heartCheck.start()
+          // this.heartCheck.start()
         }
         // 获得消息
         this.socket.onmessage = (msg) => {
           console.log(msg)
+          this.tableData.splice(0, this.tableData.length, ...JSON.parse(msg.data.slice(6, msg.data.length - 1)).Data)
           // 对返回数据进行处理
-          this.heartCheck.start()
+          // this.heartCheck.start()
         }
         // 关闭事件
         this.socket.onclose = function() {