|
|
@@ -1,23 +1,35 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<div class="block">
|
|
|
- <el-date-picker v-model="queryTime" type="date" :placeholder="this.$t('watch.dateKeywords')"
|
|
|
+ <el-date-picker v-model="queryTime" type="date" :placeholder="$t('watch.dateKeywords')"
|
|
|
value-format="yyyy-MM-dd">
|
|
|
</el-date-picker>
|
|
|
<el-button type="primary" plain style="margin-left: 30px" v-loading.fullscreen.lock="fullscreenLoading"
|
|
|
@click="getNewLocation">
|
|
|
- {{ this.$t('watch.getNewPlace') }}</el-button>
|
|
|
+ {{ $t('watch.getNewPlace') }}</el-button>
|
|
|
<el-tag v-if="myTitle" style="margin-left: 20px;" type="warning">{{ myTitle }}</el-tag>
|
|
|
|
|
|
<div class="color-legend">
|
|
|
<div class="legend-item">
|
|
|
<span class="color-dot green"></span>
|
|
|
- <span>{{ this.$t('he20250514.currentPosition') }}</span>
|
|
|
+ <span>{{ $t('he20250514.currentPosition') }}</span>
|
|
|
</div>
|
|
|
<div class="legend-item">
|
|
|
<span class="color-dot red"></span>
|
|
|
- <span>{{ this.$t('he20250514.aiarmArea') }}</span>
|
|
|
+ <span>{{ $t('he20250514.aiarmArea') }}</span>
|
|
|
</div>
|
|
|
+<!-- 添加设备选择下拉框 -->
|
|
|
+ <div class="device-selector" v-if="deviceDisplay">
|
|
|
+ <el-select :disabled="isLoadingLocations" v-model="selectedDeviceType" @change="handleDeviceTypeChange" placeholder="请选择设备类型" style="width: 300px;">
|
|
|
+ <el-option
|
|
|
+ v-for="item in deviceTypeOptions"
|
|
|
+ :key="item.eth_mac"
|
|
|
+ :label="`${item.name} --- ${item.eth_mac}`"
|
|
|
+ :value="item.eth_mac">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="location-map">
|
|
|
@@ -65,7 +77,7 @@
|
|
|
<div class="location-info">
|
|
|
<i class="el-icon-location-outline"></i>
|
|
|
<span>{{ item.full_name }}</span>
|
|
|
- <span v-if="index === 0" class="current-badge">当前位置</span>
|
|
|
+ <span v-if="index === 0" class="current-badge">{{ $t('he20250514.currentPosition') }}</span>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-timeline-item>
|
|
|
@@ -78,6 +90,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import * as API_Realdevice from '@/api/ncs_device'
|
|
|
import * as API_DeviceLocation from '@/api/ncs_device_location'
|
|
|
import { unixToDate } from '@/utils/Foundation'
|
|
|
import { getListByDeviceId } from '@/api/ncs_hospitalFrame'
|
|
|
@@ -95,6 +108,14 @@ export default {
|
|
|
isShow: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
+ },
|
|
|
+ memberId: {
|
|
|
+ type: Number,
|
|
|
+ default: null
|
|
|
+ },
|
|
|
+ frameId: {
|
|
|
+ type: Number,
|
|
|
+ default: null
|
|
|
}
|
|
|
},
|
|
|
data: function () {
|
|
|
@@ -119,16 +140,31 @@ export default {
|
|
|
pathData: '',
|
|
|
viewBox: '0 0 1000 1000',
|
|
|
gridPositions: null,
|
|
|
-
|
|
|
+ selectedDeviceType:'',
|
|
|
+ deviceTypeOptions:[],
|
|
|
+ params2: {
|
|
|
+ page_size: 100,
|
|
|
+ page_no: 1,
|
|
|
+ fixedCondition: `(device_type = ${DEVICE_TYPE.USER_WATCH} and member_id =${this.memberId}) or (device_type = ${DEVICE_TYPE.WATCH_BSJ} and frame_id=${this.frameId})`,
|
|
|
+ sort: 'id',
|
|
|
+ dir: 'desc'
|
|
|
+ },
|
|
|
+ deviceDisplay: false,
|
|
|
+ isLoadingLocations: false,
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- isShow: function () {
|
|
|
- if (this.isShow) {
|
|
|
+ isShow:{
|
|
|
+ handler(newVal){
|
|
|
+if(newVal){
|
|
|
this.sx()
|
|
|
- } else {
|
|
|
+}else {
|
|
|
this.websocketclose()
|
|
|
+ this.clearDeviceTypeOptions()
|
|
|
}
|
|
|
+
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
},
|
|
|
queryTime: function () {
|
|
|
if (this.queryTime) {
|
|
|
@@ -141,13 +177,55 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.API_Devices()
|
|
|
- this.initWebSocket()
|
|
|
},
|
|
|
methods: {
|
|
|
+ clearDeviceTypeOptions() {
|
|
|
+ this.deviceTypeOptions = [] // 清空设备类型选项
|
|
|
+ this.selectedDeviceType = '' // 重置选中的设备类型
|
|
|
+ },
|
|
|
+ // 处理设备类型变化
|
|
|
+ handleDeviceTypeChange() {
|
|
|
+ console.log('设备类型变化:', this.selectedDeviceType)
|
|
|
+
|
|
|
+ if (this.selectedDeviceType) {
|
|
|
+ // 找到选中的设备对象
|
|
|
+ const selectedDevice = this.deviceTypeOptions.find(device => device.eth_mac === this.selectedDeviceType)
|
|
|
+
|
|
|
+ if (selectedDevice) {
|
|
|
+ // 更新查询条件，使用选中设备的ID
|
|
|
+ this.params.fixedCondition = ` device_id = ${selectedDevice.id}`
|
|
|
+ console.log('更新位置查询条件:', this.params.fixedCondition)
|
|
|
+
|
|
|
+ // 清除之前的样式和数据
|
|
|
+ this.clearStyle()
|
|
|
+ this.beaconDevices = []
|
|
|
+ this.locationList = []
|
|
|
+
|
|
|
+ this.API_Devices()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('未选择设备')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ API_Realdevice(){
|
|
|
+ const _this = this
|
|
|
+ API_Realdevice.getList(this.params2).then(res => {
|
|
|
+ this.deviceTypeOptions =res.data
|
|
|
+ if(this.deviceTypeOptions && this.deviceTypeOptions.length>0){
|
|
|
+ this.deviceDisplay = true
|
|
|
+ this.selectedDeviceType = this.deviceTypeOptions[0].eth_mac
|
|
|
+ this.params.fixedCondition = ' device_id = ' + this.deviceTypeOptions[0].id
|
|
|
+ this.API_Devices()
|
|
|
+ }else{
|
|
|
+ this.API_Devices()
|
|
|
+ }
|
|
|
+})
|
|
|
+ },
|
|
|
+
|
|
|
API_Devices() {
|
|
|
const _this = this
|
|
|
getLocationDeviceList(this.$store.getters.partId).then(res => {
|
|
|
+ // console.log('位置信息',res)
|
|
|
_this.beaconDevices = res
|
|
|
_this.initGridPositions()
|
|
|
_this.API_GetList()
|
|
|
@@ -156,6 +234,7 @@ export default {
|
|
|
API_GetList() {
|
|
|
const _this = this
|
|
|
API_DeviceLocation.getPage(this.params).then(res => {
|
|
|
+ // console.log('移动轨迹',res)
|
|
|
_this.tableData = [...res.data]
|
|
|
_this.pageData = {
|
|
|
page_no: res.page_no,
|
|
|
@@ -176,6 +255,7 @@ export default {
|
|
|
_this.myTitle = this.$t('watch.notCovered')
|
|
|
}
|
|
|
this.tableData.reverse()
|
|
|
+ this.isLoadingLocations = true // 开始渲染
|
|
|
for (let i = 0; i < _this.tableData.length; i++) {
|
|
|
(function (t, data) {
|
|
|
setTimeout(function () {
|
|
|
@@ -203,13 +283,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
document.getElementById('myIcon' + data.beacon_device_id).style.display = 'inline'
|
|
|
- _this.$notify({
|
|
|
- title: data.full_name,
|
|
|
- message: unixToDate(data.create_time) + _this.$t('watch.in') + data.full_name + _this.$t('watch.nearby'),
|
|
|
- position: 'bottom-right',
|
|
|
- showClose: false,
|
|
|
- duration: 2500
|
|
|
- })
|
|
|
+ // _this.$notify({
|
|
|
+ // title: data.full_name,
|
|
|
+ // message: unixToDate(data.create_time) + _this.$t('watch.in') + data.full_name + _this.$t('watch.nearby'),
|
|
|
+ // position: 'bottom-right',
|
|
|
+ // showClose: false,
|
|
|
+ // duration: 2500
|
|
|
+ // })
|
|
|
myId = 'myFrame'+data.beacon_device_id
|
|
|
_this.locationList.unshift(data)
|
|
|
// let text = document.getElementById('myText' + data.beacon_device_id)
|
|
|
@@ -224,9 +304,18 @@ export default {
|
|
|
// if (t === _this.tableData.length - 1) {
|
|
|
// _this.updateMovementPath()
|
|
|
// }
|
|
|
+ if (t === _this.tableData.length - 1) {
|
|
|
+ _this.$nextTick(() => {
|
|
|
+ _this.isLoadingLocations = false // 标记渲染完成
|
|
|
+ })
|
|
|
+ }
|
|
|
}, 250 * t)
|
|
|
})(i, _this.tableData[i])
|
|
|
}
|
|
|
+ if (this.tableData.length === 0) {
|
|
|
+ this.isLoadingLocations = false
|
|
|
+ }
|
|
|
+
|
|
|
// this.updateMovementPath()
|
|
|
},
|
|
|
sx() {
|
|
|
@@ -242,7 +331,12 @@ export default {
|
|
|
this.beaconDevices = []
|
|
|
this.locationList = []
|
|
|
this.initWebSocket()
|
|
|
- this.API_Devices()
|
|
|
+ if (this.memberId && this.frameId) {
|
|
|
+ this.API_Realdevice()
|
|
|
+ } else {
|
|
|
+ this.API_Devices()
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
/** 分页大小发生改变 */
|
|
|
handlePageSizeChange(size) {
|
|
|
@@ -267,7 +361,7 @@ export default {
|
|
|
element.style = ''
|
|
|
}
|
|
|
document.getElementById('myIcon' + item).style.display = 'none'
|
|
|
- document.getElementById('myText' + item).innerText = ''
|
|
|
+ // document.getElementById('myText' + item).innerText = ''
|
|
|
})
|
|
|
},
|
|
|
formatterCreateTime(data) {
|
|
|
@@ -339,6 +433,7 @@ export default {
|
|
|
initGridPositions() {
|
|
|
const totalBeacons = this.beaconDevices.length
|
|
|
const cols = Math.ceil(Math.sqrt(totalBeacons))
|
|
|
+ // console.log('totalBeacons',totalBeacons,'cols', cols)
|
|
|
this.gridPositions = this.beaconDevices.reduce((acc, device, index) => {
|
|
|
acc[device.id] = {
|
|
|
x: (index % cols) + 1,
|
|
|
@@ -346,6 +441,7 @@ export default {
|
|
|
}
|
|
|
return acc
|
|
|
}, {})
|
|
|
+ // console.log('this.gridPositions',this.gridPositions)
|
|
|
},
|
|
|
getBeaconStyle(beacon) {
|
|
|
if (!this.gridPositions) this.initGridPositions()
|
|
|
@@ -381,7 +477,6 @@ export default {
|
|
|
.location-map {
|
|
|
position: relative;
|
|
|
margin: 20px 0;
|
|
|
- height: 200px;
|
|
|
background: #f8fafc;
|
|
|
border-radius: 8px;
|
|
|
padding: 20px;
|
heyifan