|
@@ -1,19 +1,49 @@
|
|
|
<template>
|
|
|
<pannel class="devc-location-container">
|
|
|
<template v-slot:icon>
|
|
|
- <svg-icon icon-class="bd_location" />
|
|
|
+ <svg-icon icon-class="bd_location"/>
|
|
|
</template>
|
|
|
<template v-slot:title>
|
|
|
轨迹查询
|
|
|
</template>
|
|
|
<template v-slot:action>
|
|
|
<i
|
|
|
- class="el-icon-delete-location"
|
|
|
- title="清空所有轨迹"
|
|
|
- @click="clearAll"
|
|
|
+ class="el-icon-delete-location"
|
|
|
+ title="清空所有轨迹"
|
|
|
+ @click="clearAll"
|
|
|
/>
|
|
|
</template>
|
|
|
<template v-slot:content>
|
|
|
+ <div class="header-ctrl">
|
|
|
+ <el-radio-group v-model="dateType" size="mini" @change="onDateTypeChange">
|
|
|
+ <template v-for="item in Object.keys(DateTypeRadio)">
|
|
|
+ <el-radio-button :label="item">{{ DateTypeRadio[item].name }}</el-radio-button>
|
|
|
+ </template>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-date-picker
|
|
|
+ v-if="dateType === DateTypeRadio.day.key"
|
|
|
+ key="day"
|
|
|
+ v-model="selectDate"
|
|
|
+ align="right"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <el-date-picker
|
|
|
+ key="cust-day"
|
|
|
+ format="yyyy-MM-dd HH:mm"
|
|
|
+ v-if="dateType === DateTypeRadio.cust.key"
|
|
|
+ v-model="selectDate"
|
|
|
+ type="datetimerange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
<div class="location-list">
|
|
|
<div class="list-item">
|
|
|
<span class="over-flow-hidden" style="width: 40%">
|
|
@@ -24,31 +54,14 @@
|
|
|
</span>
|
|
|
<span class="over-flow-hidden" style="width: 20%">
|
|
|
<i
|
|
|
- :class="playItem[1]&&playItem[1].play ? 'el-icon-video-pause':'el-icon-video-play'"
|
|
|
- :title="playItem[1]&&playItem[1].play ? '暂停': '开始播放' "
|
|
|
- @click="()=>onLocationPlay({key:1})"
|
|
|
+ :class="playItem[1]&&playItem[1].play ? 'el-icon-video-pause':'el-icon-video-play'"
|
|
|
+ :title="playItem[1]&&playItem[1].play ? '暂停': '开始播放' "
|
|
|
+ @click="()=>onLocationPlay({key:1})"
|
|
|
/>
|
|
|
- <i class="el-icon-refresh-left" title="重播" @click="()=>replayLocation({key:1})" />
|
|
|
- <i class="el-icon-circle-close" title="清空轨迹" @click="()=>clearLocation({key:1})" />
|
|
|
+ <i class="el-icon-refresh-left" title="重播" @click="()=>replayLocation({key:1})"/>
|
|
|
+ <i class="el-icon-circle-close" title="清空轨迹" @click="()=>clearLocation({key:1})"/>
|
|
|
</span>
|
|
|
</div>
|
|
|
- <!-- <div class="list-item">-->
|
|
|
- <!-- <span class="over-flow-hidden" style="width: 40%">-->
|
|
|
- <!-- 定位设备1定位设备-->
|
|
|
- <!-- </span>-->
|
|
|
- <!-- <span class="over-flow-hidden" style="width: 40%">-->
|
|
|
- <!-- 2024-08-21 15:30-->
|
|
|
- <!-- </span>-->
|
|
|
- <!-- <span class="over-flow-hidden" style="width: 20%">-->
|
|
|
- <!-- <i-->
|
|
|
- <!-- :class="playItem[2]&&playItem[2].play ? 'el-icon-video-pause':'el-icon-video-play'"-->
|
|
|
- <!-- :title="playItem[2]&&playItem[2].play ? '暂停': '开始播放' "-->
|
|
|
- <!-- @click="()=>onLocationPlay({key:2})"-->
|
|
|
- <!-- />-->
|
|
|
- <!-- <i class="el-icon-refresh-left" title="重播" @click="()=>replayLocation({key:2})" />-->
|
|
|
- <!-- <i class="el-icon-circle-close" title="清空轨迹" @click="()=>clearLocation({key:2})" />-->
|
|
|
- <!-- </span>-->
|
|
|
- <!-- </div>-->
|
|
|
</div>
|
|
|
</template>
|
|
|
</pannel>
|
|
@@ -58,12 +71,50 @@
|
|
|
|
|
|
import Pannel from '@/views/bd/pannel/index.vue';
|
|
|
|
|
|
+const DateTypeRadio = {
|
|
|
+ day: {
|
|
|
+ key: 'day',
|
|
|
+ name: '日',
|
|
|
+ },
|
|
|
+ cust: {
|
|
|
+ key: 'cust',
|
|
|
+ name: '自定义',
|
|
|
+ }
|
|
|
+}
|
|
|
export default {
|
|
|
name: 'location',
|
|
|
- components: { Pannel },
|
|
|
+ components: {Pannel},
|
|
|
data() {
|
|
|
return {
|
|
|
+ DateTypeRadio,
|
|
|
playItem: {},
|
|
|
+ selectDate: new Date(),
|
|
|
+ dateType: DateTypeRadio.day.key,
|
|
|
+ pickerOptions: {
|
|
|
+ disabledDate(time) {
|
|
|
+ return time.getTime() > Date.now();
|
|
|
+ },
|
|
|
+ shortcuts: [{
|
|
|
+ text: '今天',
|
|
|
+ onClick(picker) {
|
|
|
+ picker.$emit('pick', new Date());
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '昨天',
|
|
|
+ onClick(picker) {
|
|
|
+ const date = new Date();
|
|
|
+ date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
|
+ picker.$emit('pick', date);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '一周前',
|
|
|
+ onClick(picker) {
|
|
|
+ const date = new Date();
|
|
|
+ date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ picker.$emit('pick', date);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
// 组件卸载前清空图层信息
|
|
@@ -71,12 +122,53 @@ export default {
|
|
|
this.clearAll();
|
|
|
},
|
|
|
created() {
|
|
|
+ this.init();
|
|
|
},
|
|
|
methods: {
|
|
|
+ init() {
|
|
|
+ debugger
|
|
|
+
|
|
|
+ this.socket = new WebSocket(`ws://172.192.13.77:2223/socket/websocket/pollingArea`);
|
|
|
+
|
|
|
+ this.socket.onopen = () => {
|
|
|
+ this.socket.send(JSON.stringify({"register":"1731296055163","token":"9358d080-03d4-423c-91d4-d4d2a391183d"}));
|
|
|
+ console.log('连接成功:', this.socket);
|
|
|
+
|
|
|
+ };
|
|
|
+ // 监听socket错误信息
|
|
|
+ this.socket.onerror = (e) => {
|
|
|
+ console.log('%c FXY', 'color:#f6b2b1;font-size:50px', e);
|
|
|
+ console.log('socket连接失败');
|
|
|
+ };
|
|
|
+ // 监听socket关闭监听
|
|
|
+ this.socket.onclose = () => {
|
|
|
+ console.log('socket连接关闭');
|
|
|
+ };
|
|
|
+ this.socket.onmessage = (a) => {
|
|
|
+ const data = JSON.parse(a.data);
|
|
|
+ console.log(">>>>>>>>>",data);
|
|
|
+ if (data && data.message === "handshake"){
|
|
|
+ // tagId要去掉前缀0
|
|
|
+ this.socket.send(JSON.stringify({"key": "1731296055163","tagId": "847F3", "token": "9358d080-03d4-423c-91d4-d4d2a391183d"}));
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onDateTypeChange(e, eh) {
|
|
|
+ if (e === DateTypeRadio.day.key) {
|
|
|
+ this.selectDate = new Date();
|
|
|
+ } else if (e === DateTypeRadio.cust.key) {
|
|
|
+ const date = new Date();
|
|
|
+ date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
|
+ this.selectDate = [date, new Date()];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getDevcTrail() {
|
|
|
+
|
|
|
+ },
|
|
|
loaded(map) {
|
|
|
console.log(map);
|
|
|
},
|
|
|
- onLocationPlay({ key }) {
|
|
|
+ onLocationPlay({key}) {
|
|
|
if (this.playItem[key]) {
|
|
|
if (this.playItem[key].play) {
|
|
|
bdmap.comp.Trajectory.trajectoryPause(this.playItem[key].line);
|
|
@@ -175,14 +267,14 @@ export default {
|
|
|
bdmap.comp.Trajectory.trajectoryPlay(playLine);
|
|
|
return playLine;
|
|
|
},
|
|
|
- replayLocation({ key }) {
|
|
|
+ replayLocation({key}) {
|
|
|
if (this.playItem[key] && this.playItem[key].line) {
|
|
|
bdmap.comp.Trajectory.trajectoryCancel(this.playItem[key].line);
|
|
|
this.playItem[key].play = false;
|
|
|
}
|
|
|
|
|
|
},
|
|
|
- removeLine({ key }) {
|
|
|
+ removeLine({key}) {
|
|
|
if (this.playItem[key] && this.playItem[key].line) {
|
|
|
bdmap.comp.Trajectory.trajectoryRemove(this.playItem[key].line);
|
|
|
delete this.playItem[key];
|
|
@@ -192,16 +284,17 @@ export default {
|
|
|
clearAll() {
|
|
|
Object.keys(this.playItem).forEach(keyItem => {
|
|
|
if (this.playItem[keyItem] && this.playItem[keyItem].line) {
|
|
|
- this.removeLine({ key: keyItem });
|
|
|
+ this.removeLine({key: keyItem});
|
|
|
}
|
|
|
});
|
|
|
this.playItem = {};
|
|
|
},
|
|
|
- clearLocation({ key }) {
|
|
|
- this.removeLine({ key });
|
|
|
+ clearLocation({key}) {
|
|
|
+ this.removeLine({key});
|
|
|
this.playItem = {};
|
|
|
},
|
|
|
+
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="scss" src="./index.scss" />
|
|
|
+<style lang="scss" src="./index.scss"/>
|