信标定位相关开发

src/views/ncs-device/watch_location.vue

@@ -4,17 +4,24 @@
       <el-date-picker
           v-model="queryTime"
           type="date"
-          placeholder="选择日期"
+          placeholder="选择日期进行搜索"
           value-format="yyyy-MM-dd">
       </el-date-picker>
-      <el-button type="primary" plain style="margin-left: 30px" @click="getNewLocation">获取最新位置</el-button>
+      <el-button type="primary" plain style="margin-left: 30px" v-loading.fullscreen.lock="fullscreenLoading" @click="getNewLocation">获取最新位置</el-button>
+      <el-tag v-if="myTitle" style="margin-left: 20px;" type="warning">{{ myTitle }}</el-tag>
     </div>
     <div>
       <el-row>
         <el-col :span="6" v-for="(item, index) in frames" :key="index">
           <el-card :id="'myFrame'+item.id" shadow="never" class="myClass">
-            <svg-icon :id="'myIcon' + item.id" icon-class="footmark" class-name="footmark" style="font-size: 30px;display: none" />
-            <svg-icon icon-class="sickroom" style="font-size: 40px;padding-right: 20px" />{{ item.full_name }}
+            <div>
+              <svg-icon :id="'myIcon' + item.id" icon-class="footmark" class-name="footmark" style="font-size: 30px;display: none" />
+              <svg-icon icon-class="sickroom" style="font-size: 40px;padding-right: 20px" />{{ item.full_name }}
+            </div>
+            <div style="float:right">
+              <span :id="'myText' + item.id" ></span>
+            </div>
+
           </el-card>
         </el-col>
       </el-row>
@@ -68,14 +75,17 @@ export default {
         page_size: 20,
         page_no: 1,
         fixedCondition: ' device_id = ' + this.deviceId,
-        sort: 'create_time'
+        sort: 'create_time',
+        dir: 'desc'
       },
       tableData: [],
       pageData: [],
       deviceList: [],
       clearList: [],
       queryTime: null,
-      websock: null
+      websock: null,
+      fullscreenLoading: false,
+      myTitle: ''
     }
   },
   watch: {
@@ -83,7 +93,6 @@ export default {
       if (this.isShow) {
         this.sx()
       } else {
-        console.log('我关闭了。。。')
         this.websocketclose()
       }
     },
@@ -118,20 +127,26 @@ export default {
           page_size: res.page_size,
           data_total: res.data_total
         }
-        _this.changeStyle()
+        if (_this.tableData.length > 0) {
+          _this.changeStyle()
+        }
       })
     },
     changeStyle() {
       const _this = this
       this.locationList = []
       let myId = ''
+      const time = Date.parse(new Date()) / 1000
+      if (time - this.tableData[0].create_time > 60) {
+        _this.myTitle = '当前不在信标范围内'
+      }
+      this.tableData.reverse()
       for (let i = 0; i< _this.tableData.length; i++) {
         (function (t, data) {   // 注意这里是形参
           setTimeout(function () {
             if (myId) {
               document.getElementById(myId).style = 'background: #d3dce6'
             }
-            // console.log(document.getElementById('myFrame'+data.frame_id))
             document.getElementById('myFrame'+data.frame_id).style = 'color: white;background: #3DCB0A'
             document.getElementById('myIcon'+data.frame_id).style.display='inline'
             _this.$notify({
@@ -139,13 +154,21 @@ export default {
               message: unixToDate(data.create_time) + '在' + data.full_name + '附近',
               position: 'bottom-right',
               showClose: false,
-              // duration: 1000
+              duration: 2500
             })
             myId = 'myFrame'+data.frame_id
             _this.locationList.unshift(data)
+            let text = document.getElementById('myText'+data.frame_id)
+            if (text.innerText) {
+              text.innerText = text.innerText + '、'+ (i+1)
+            } else {
+              text.innerText = (i+1)
+            }
+            // document.getElementById('myText'+data.frame_id).innerText = i+1+1
             if (_this.clearList.find(p => p === data.frame_id) == null) {
               _this.clearList.push(data.frame_id)
             }
+
           }, 250 * t);	// 还是每秒执行一次，不是累加的
         })(i, _this.tableData[i])   // 注意这里是实参，这里把要用的参数传进去
       }
@@ -156,8 +179,10 @@ export default {
         page_size: 20,
         page_no: 1,
         fixedCondition: ' device_id = ' + this.deviceId,
-        sort: 'create_time'
+        sort: 'create_time',
+        dir: 'desc'
       }
+      this.myTitle = ''
       this.frames = []
       this.locationList = []
       this.initWebSocket()
@@ -179,12 +204,19 @@ export default {
       this.clearList.forEach(item => {
         document.getElementById('myFrame'+item).style = ''
         document.getElementById('myIcon'+item).style.display='none'
+        document.getElementById('myText'+item).innerText = ''
       })
     },
     formatterCreateTime(data) {
       return unixToDate(data)
     },
     getNewLocation() {
+      this.fullscreenLoading = true
+      const _this = this
+      setTimeout(() => {
+        if (_this.fullscreenLoading)
+          _this.fullscreenLoading = false
+      }, 30000)
       this.websock.send(this.deviceId)
     },
     initWebSocket: function() {
@@ -197,16 +229,44 @@ export default {
     },
     websocketonopen: function() {
       console.log('WebSocket连接成功')
-      this.$message.success('连接成功')
     },
     websocketonerror: function(e) {
       console.log('WebSocket连接发生错误')
     },
     websocketonmessage: function(e) {
       console.log('收到消息：', e.data)
+      const data = JSON.parse(e.data)
+      if (data.frame_id) {
+        this.myTitle = ''
+        this.fullscreenLoading = false
+        let size = this.tableData.length
+        if (size > 0) {
+          document.getElementById('myFrame'+this.tableData[(size - 1)].frame_id).style = 'background: #d3dce6'
+        }
+        document.getElementById('myFrame'+data.frame_id).style = 'color: white;background: #3DCB0A'
+        document.getElementById('myIcon'+data.frame_id).style.display='inline'
+        this.$notify({
+          title: data.full_name,
+          message: unixToDate(data.create_time) + '在' + data.full_name + '附近',
+          showClose: false,
+          offset: 100
+        })
+        let text = document.getElementById('myText'+data.frame_id)
+        if (text.innerText) {
+          text.innerText = text.innerText + '、'+ (size+1)
+        } else {
+          text.innerText = (i+1)
+        }
+        this.tableData.push(data)
+        this.locationList.unshift(data)
+        if (this.clearList.find(p => p === data.frame_id) == null) {
+          this.clearList.push(data.frame_id)
+        }
+      }
+
     },
     websocketclose: function(e) {
-      console.log('socket连接关闭connection closed (' + e.code + ')')
+      console.log('socket连接关闭connection closed (' + e + ')')
     }
   }
 }