|
|
@@ -0,0 +1,293 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="block">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryTime"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期进行搜索"
|
|
|
+ value-format="yyyy-MM-dd">
|
|
|
+ </el-date-picker>
|
|
|
+ <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">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <div v-if="locationList.length > 0" style="margin-top: 20px;">
|
|
|
+ <el-card>
|
|
|
+ <div v-for="(item, index) in locationList" :key="index" class="text item">
|
|
|
+ <i class="el-icon-user-solid"></i> 您于 <el-tag><i class="el-icon-time"></i>{{ formatterCreateTime(item.create_time )}}</el-tag> 在
|
|
|
+ <el-tag type="success"><i class="el-icon-location-outline"></i>{{ item.full_name }}</el-tag>附近
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <!--翻页-->
|
|
|
+ <el-pagination
|
|
|
+ v-if="pageData"
|
|
|
+ slot="pagination"
|
|
|
+ :current-page="pageData.page_no"
|
|
|
+ :page-sizes="[20, 50, 100, 200]"
|
|
|
+ :page-size="pageData.page_size"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="pageData.data_total"
|
|
|
+ @size-change="handlePageSizeChange"
|
|
|
+ @current-change="handlePageCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as API_DeviceLocation from '@/api/ncs_device_location'
|
|
|
+import { unixToDate } from '@/utils/Foundation'
|
|
|
+import { getListByDeviceId } from '@/api/ncs_hospitalFrame'
|
|
|
+import { DeviceUrl } from '@/utils/domain'
|
|
|
+export default {
|
|
|
+ name: 'Index',
|
|
|
+ props: {
|
|
|
+ deviceId: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ isShow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ frames: [],
|
|
|
+ locationList: [],
|
|
|
+ params: {
|
|
|
+ page_size: 20,
|
|
|
+ page_no: 1,
|
|
|
+ fixedCondition: ' device_id = ' + this.deviceId,
|
|
|
+ sort: 'create_time',
|
|
|
+ dir: 'desc'
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
+ pageData: [],
|
|
|
+ deviceList: [],
|
|
|
+ clearList: [],
|
|
|
+ queryTime: null,
|
|
|
+ websock: null,
|
|
|
+ fullscreenLoading: false,
|
|
|
+ myTitle: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isShow: function () {
|
|
|
+ if (this.isShow) {
|
|
|
+ this.sx()
|
|
|
+ } else {
|
|
|
+ this.websocketclose()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ queryTime: function () {
|
|
|
+ if (this.queryTime) {
|
|
|
+ this.params.query_time = this.queryTime
|
|
|
+ } else {
|
|
|
+ delete this.params.query_time
|
|
|
+ }
|
|
|
+ this.clearStyle()
|
|
|
+ this.API_GetList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.API_Frames()
|
|
|
+ this.initWebSocket()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ API_Frames() {
|
|
|
+ const _this = this
|
|
|
+ getListByDeviceId(this.$store.getters.partId).then(res => {
|
|
|
+ _this.frames = res
|
|
|
+ _this.API_GetList()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ API_GetList() {
|
|
|
+ const _this = this
|
|
|
+ API_DeviceLocation.getPage(this.params).then(res => {
|
|
|
+ _this.tableData = [...res.data]
|
|
|
+ _this.pageData = {
|
|
|
+ page_no: res.page_no,
|
|
|
+ page_size: res.page_size,
|
|
|
+ data_total: res.data_total
|
|
|
+ }
|
|
|
+ _this.locationList = []
|
|
|
+ if (_this.tableData.length > 0) {
|
|
|
+ _this.changeStyle()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeStyle() {
|
|
|
+ const _this = this
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ 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 + '附近',
|
|
|
+ position: 'bottom-right',
|
|
|
+ showClose: false,
|
|
|
+ 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]) // 注意这里是实参，这里把要用的参数传进去
|
|
|
+ }
|
|
|
+ },
|
|
|
+ sx() {
|
|
|
+ this.queryTime = null
|
|
|
+ this.params ={
|
|
|
+ page_size: 20,
|
|
|
+ page_no: 1,
|
|
|
+ fixedCondition: ' device_id = ' + this.deviceId,
|
|
|
+ sort: 'create_time',
|
|
|
+ dir: 'desc'
|
|
|
+ }
|
|
|
+ this.myTitle = ''
|
|
|
+ this.frames = []
|
|
|
+ this.locationList = []
|
|
|
+ this.initWebSocket()
|
|
|
+ this.API_Frames()
|
|
|
+ },
|
|
|
+ /** 分页大小发生改变 */
|
|
|
+ handlePageSizeChange(size) {
|
|
|
+ this.params.page_size = size
|
|
|
+ this.clearStyle()
|
|
|
+ this.API_GetList()
|
|
|
+ },
|
|
|
+ /** 分页页数发生改变 */
|
|
|
+ handlePageCurrentChange(page) {
|
|
|
+ this.params.page_no = page
|
|
|
+ this.clearStyle()
|
|
|
+ this.API_GetList()
|
|
|
+ },
|
|
|
+ clearStyle() {
|
|
|
+ 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() {
|
|
|
+ const stockbase = DeviceUrl.replace('http', 'ws')
|
|
|
+ this.websock = new WebSocket(stockbase + '/web-socket/device_location/' + this.deviceId)
|
|
|
+ this.websock.onopen = this.websocketonopen
|
|
|
+ this.websock.onerror = this.websocketonerror
|
|
|
+ this.websock.onmessage = this.websocketonmessage
|
|
|
+ this.websock.onclose = this.websocketclose
|
|
|
+ },
|
|
|
+ websocketonopen: function() {
|
|
|
+ console.log('WebSocket连接成功')
|
|
|
+ },
|
|
|
+ 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 + ')')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped type="text/scss">
|
|
|
+.el-row {
|
|
|
+ margin-bottom: 20px;
|
|
|
+&:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-col {
|
|
|
+ border-radius: 30px;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.text {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.item {
|
|
|
+ margin-bottom: 18px;
|
|
|
+}
|
|
|
+</style>
|
