Fuyuu
/
dt-admin-pc-v2
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改信息窗口数据不刷新bug

master
Fuyuu 2 years ago
parent
a1413eaaeb
commit
6614f65174
6 changed files with 761 additions and 633 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 171
      src/components/earthMap/AISInfoWindow.vue
  2. 89
      src/components/earthMap/TailAfterWindow.vue
  3. 242
      src/components/earthMap/components/Window.vue
  4. 5
      src/utils/earthMap/listenMouseHandler.ts
  5. 34
      src/utils/earthMap/shipDraw.ts
  6. 5
      src/views/earthMap/edit/EarthComp.vue

171
src/components/earthMap/AISInfoWindow.vue
View File

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com * @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-05 14:18:33 * @Date: 2024-01-05 14:18:33
* @LastEditors: Fuyuu 1805498209@qq.com * @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-25 15:11:06 * @LastEditTime: 2024-01-30 15:25:39
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\AISInfoWindow.vue * @FilePath: \dt-admin-pc-v2\src\components\earthMap\AISInfoWindow.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
@ -10,140 +10,145 @@
<div class="shipInfo"> <div class="shipInfo">
<Window <Window
:title="title" :title="title"
:width="600" :width="280"
:minWidth="600" :minWidth="280"
:height="420" :height="700"
:left="80" :right="0"
:top="70" :top="0"
@cancel="cancel" @cancel="cancel"
:floatright="false" :floatright="true"
:showCancelButton="true" :showCancelButton="true"
:footervisible="false" :footervisible="false"
:showcloseButton="true" :showcloseButton="true"
id="aisInfoWindow" id="aisInfoWindow"
class="fuckWindow"
> >
<div class="ais_content" v-if="title.includes('AIS')"> <div class="ais_content" v-if="title.includes('AIS')">
<div class="content_item"> <div class="content_item">
<div class="item_title">船名:</div> <div class="item_title">船名：</div>
<div class="item_content">{{ infoData.name }}</div> <div class="item_content">{{ infoData.name }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">MMSI:</div> <div class="item_title">MMSI：</div>
<div class="item_content">{{ infoData.mmsi }}</div> <div class="item_content">{{ infoData.mmsi }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">船首向:</div> <div class="item_title">船首向：</div>
<div class="item_content">未知</div> <div class="item_content">未知</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">呼号:</div> <div class="item_title">呼号：</div>
<div class="item_content">未知</div> <div class="item_content">未知</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">航迹向:</div> <div class="item_title">航迹向：</div>
<div class="item_content">未知</div> <div class="item_content">未知</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">IMO:</div> <div class="item_title">IMO：</div>
<div class="item_content">{{ infoData.imo }}</div> <div class="item_content">{{ infoData.imo }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">航速:</div> <div class="item_title">航速：</div>
<div class="item_content">0.2节</div> <div class="item_content">0.2节</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">经度:</div> <div class="item_title">经度：</div>
<div class="item_content">{{ infoData.longitude }}</div> <div class="item_content">{{ infoData.longitude }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">纬度:</div> <div class="item_title">纬度：</div>
<div class="item_content">{{ infoData.latitude }}</div> <div class="item_content">{{ infoData.latitude }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">状态:</div> <div class="item_title">状态：</div>
<div class="item_content">锚泊</div> <div class="item_content">锚泊</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">类型:</div> <div class="item_title">类型：</div>
<div class="item_content">货船</div> <div class="item_content">货船</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">船长/宽:</div> <div class="item_title">船长/宽：</div>
<div class="item_content">89米/20米</div> <div class="item_content">89米/20米</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">目的地:</div> <div class="item_title">目的地：</div>
<div class="item_content">JIANGMEN,CN</div> <div class="item_content">JIANGMEN,CN</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">吃水:</div> <div class="item_title">吃水：</div>
<div class="item_content">3.8米</div> <div class="item_content">3.8米</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">国籍:</div> <div class="item_title">国籍：</div>
<div class="item_content">CN</div> <div class="item_content">CN</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">预到时间:</div> <div class="item_title">预到时间：</div>
<div class="item_content">2024-01-08 17:00:00</div> <div class="item_content">2024-01-08 17:00:00</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">更新时间:</div> <div class="item_title">更新时间：</div>
<div class="item_content"> 2024-01-08 14:40:11</div> <div class="item_content"> 2024-01-08 14:40:11</div>
</div> </div>
</div> </div>
<div class="radar_content" v-if="title.includes('雷达')"> <div class="radar_content" v-if="title.includes('雷达')">
<div class="content_item"> <div class="content_item">
<div class="item_title">雷达ID:</div> <div class="item_title">目标号：</div>
<div class="item_content">{{ infoData.trackId }}</div>
</div>
<div class="content_item">
<div class="item_title">雷达编号：</div>
<div class="item_content">{{ infoData.radarId }}</div> <div class="item_content">{{ infoData.radarId }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">时间:</div> <div class="item_title">时间：</div>
<div class="item_content">{{ infoData.timestamp }}</div> <div class="item_content">{{ infoData.timestamp }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">距离:</div> <div class="item_title">距离：</div>
<div class="item_content">{{ infoData.dis }}m</div> <div class="item_content">{{ infoData.dis }}m</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">方位角:</div> <div class="item_title">方位角：</div>
<div class="item_content">{{ infoData.azimuth }}°</div> <div class="item_content">{{ infoData.azimuth }}°</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">速度:</div> <div class="item_title">速度：</div>
<div class="item_content">{{ infoData.speed }}m/s</div> <div class="item_content">{{ infoData.speed }}m/s</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">航向:</div> <div class="item_title">航向：</div>
<div class="item_content">{{ infoData.course }}°</div> <div class="item_content">{{ infoData.course }}°</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">经度:</div> <div class="item_title">经度：</div>
<div class="item_content">{{ infoData.longitude }}</div> <div class="item_content">{{ infoData.longitude }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">纬度:</div> <div class="item_title">纬度：</div>
<div class="item_content">{{ infoData.latitude }}</div> <div class="item_content">{{ infoData.latitude }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">海拔:</div> <div class="item_title">海拔：</div>
<div class="item_content">{{ infoData.altitude }}m</div> <div class="item_content">{{ infoData.altitude }}m</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">类型:</div> <div class="item_title">类型：</div>
<div class="item_content">{{ infoData.type }}</div> <div class="item_content">{{ infoData.type }}</div>
</div> </div>
</div> </div>
<div class="opera_content"> <div class="opera_content">
<!-- 轨迹显示 --> <!-- 轨迹显示 -->
<div class="content_item"> <div class="content_item">
<div class="item_title">航行轨迹:</div> <div class="item_title">航行轨迹：</div>
<a-switch v-model:checked="checked" @change="changeTrack" /> <a-switch v-model:checked="checked" @change="changeTrack" />
</div> </div>
<!-- 跟踪船只 --> <!-- 跟踪船只 -->
<div class="content_item"> <div class="content_item">
<div class="item_title">跟踪船只:</div> <!-- <div class="item_title">跟踪船只:</div> -->
<a-button size="small" type="primary" @click="tailAfter()"> <a-button class="tail_button" size="small" type="primary" @click="tailAfter()">
跟踪 跟踪
<EyeOutlined /> <EyeOutlined />
</a-button> </a-button>
@ -154,13 +159,11 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, getCurrentInstance, ref, watch } from 'vue'; import { defineComponent, getCurrentInstance, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
import Window from '@/components/earthMap/components/Window.vue'; import Window from '@/components/earthMap/components/Window.vue';
import { useEarthMapStore } from '/@/store/modules/earthMap'; import { useEarthMapStore } from '/@/store/modules/earthMap';
import $mitt from '@/utils/earthMap/mitt'; import $mitt from '@/utils/earthMap/mitt';
import { EyeOutlined } from '@ant-design/icons-vue'; import { EyeOutlined } from '@ant-design/icons-vue';
import { defHttp } from '/@/utils/http/axios';
import { info } from 'console';
export default defineComponent({ export default defineComponent({
name: 'AISInfoWindow', name: 'AISInfoWindow',
@ -226,24 +229,66 @@
// 关闭弹窗 // 关闭弹窗
function cancel() { function cancel() {
proxy.$parent.AISInfoWindowShow = false; proxy.$parent.AISInfoWindowShow = false;
// 同时打开场景树结构
window.$uia.tools.sceneTree.show = true;
} }
// 打开或关闭轨迹 // 打开或关闭轨迹
function changeTrack(e) { function changeTrack(e) {
checked.value = e; checked.value = e;
// 使用show字段控制轨迹显隐 // 使用show字段控制轨迹显隐+
trackData.value.show = e; trackData.value.show = e;
} }
// 跟踪船只 // 跟踪船只
function tailAfter() { function tailAfter() {
// 通过mqtt发送跟踪船只的信息
let mqttClient = window.mqttClient;
// 设置跟踪状态 1-跟踪 0-停止跟踪
infoData.value.trackStatus = 1;
// 发布订阅
mqttClient.publish('/trackTarget', JSON.stringify(infoData.value));
// 打开光电跟踪窗口 // 打开光电跟踪窗口
proxy.$parent.TailAfterWindowShow = true; proxy.$parent.TailAfterWindowShow = true;
// 关闭当前窗口
proxy.$parent.AISInfoWindowShow = false;
}
// 取消跟踪
function cancelTailAfter() {
// 通过mqtt发送跟踪船只的信息 // 通过mqtt发送跟踪船只的信息
let mqttClient = window.mqttClient; let mqttClient = window.mqttClient;
// 设置跟踪状态 1-跟踪 0-停止跟踪 // 设置跟踪状态 1-跟踪 0-停止跟踪
infoData.value.trackStatus = 1; infoData.value.trackStatus = 0;
// 发布订阅 // 发布订阅
mqttClient.publish('/trackTarget', JSON.stringify(infoData.value)); mqttClient.publish('/trackTarget', JSON.stringify(infoData.value));
} }
// 监听船只guid变化，更新信息
watch(
() => proxy.ship_guid,
(_newVal, _oldVal) => {
// 获取AIS信息
getShipAISInfo();
},
{ immediate: true }
);
/**
* 时间戳转化为年月日时分秒
* @param timestamp 时间戳
*/
function toStringTime(timestamp) {
let date = new Date(timestamp);
let year = date.getFullYear();
let month = ('0' + (date.getMonth() + 1)).slice(-2);
let day = ('0' + date.getDate()).slice(-2);
let hour = ('0' + date.getHours()).slice(-2);
let minute = ('0' + date.getMinutes()).slice(-2);
let second = ('0' + date.getSeconds()).slice(-2);
let datetime = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
return datetime;
}
onMounted(() => {
// 监听轨迹线变化 // 监听轨迹线变化
$mitt.on('trackChange', (e: boolean) => { $mitt.on('trackChange', (e: boolean) => {
// 当前船只轨迹线状态 // 当前船只轨迹线状态
@ -260,21 +305,17 @@
// 实时监听船只信息变化（雷达） // 实时监听船只信息变化（雷达）
$mitt.on('deviceCmd', (message: any) => { $mitt.on('deviceCmd', (message: any) => {
let data = JSON.parse(message).radarTrack; let data = JSON.parse(message).radarTrack;
data.timestamp = toStringTime(data.timestamp);
if (data.trackId == trackId.value) { if (data.trackId == trackId.value) {
if (proxy.title.includes('雷达')) { if (proxy.title.includes('雷达')) {
infoData.value = data; infoData.value = data;
} }
} }
}); });
// 监听船只guid变化，更新信息 /**
watch( * 后续补充监听AIS数据、融合数据
() => proxy.ship_guid, */
(_newVal, _oldVal) => { });
// 获取AIS信息
getShipAISInfo();
},
{ immediate: true }
);
return { return {
checked, checked,
@ -282,36 +323,42 @@
cancel, cancel,
changeTrack, changeTrack,
tailAfter, tailAfter,
cancelTailAfter,
}; };
}, },
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
#aisInfoWindow .xbsj-model-header .xbsj-model-arrow { .fuckWindow {
right: 25px; width: 280px !important;
left: calc(100% - 280px) !important;
top: 6px !important;
} }
.ais_content, .ais_content,
.radar_content, .radar_content,
.opera_content { .opera_content {
width: 95%; width: 100%;
margin: 0 auto; // margin: 0 auto;
display: flex;
flex-direaction: row;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 14px;
.content_item { .content_item {
width: 50%; width: 100%;
margin: 6px 0; margin: 10px 0;
display: flex; display: flex;
flex-direaction: row; flex-direaction: row;
font-size: 14px; .tail_button {
width: 100%;
height: 26px;
}
.item_title { .item_title {
color: #fff; color: #fff;
margin-right: 4px; // margin-right: 12px;
} }
.item_content { .item_content {
color: #00ffe4; color: #00ffe4;
// font-weight: bold;
} }
} }
} }

89
src/components/earthMap/TailAfterWindow.vue
View File

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com * @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-18 16:42:29 * @Date: 2024-01-18 16:42:29
* @LastEditors: Fuyuu 1805498209@qq.com * @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-25 16:16:00 * @LastEditTime: 2024-01-30 15:22:48
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\TailAfterWindow.vue * @FilePath: \dt-admin-pc-v2\src\components\earthMap\TailAfterWindow.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
@ -10,43 +10,86 @@
<div class="TailAfter"> <div class="TailAfter">
<Window <Window
:title="title" :title="title"
:width="1280" :width="280"
:minWidth="1280" :minWidth="280"
:height="780" :height="700"
:left="100" :right="0"
:top="60" :top="0"
@cancel="cancel" @cancel="cancel"
:floatright="false" :floatright="false"
:showCancelButton="true" :showCancelButton="true"
:footervisible="false" :footervisible="false"
:showcloseButton="true" :showcloseButton="true"
id="tailAfterWindow" id="tailAfterWindow"
class="tailAfterWindow"
> >
<div class="mpegPlayer"></div> <div class="tail_title">
<div class="title_content">
<div class="name">名称：</div>
<div class="content">{{ tailAfterInfo.deviceName || '正在分析...' }}</div>
</div>
<div class="title_content">
<div class="name">类型：</div>
<div class="content">{{
(tailAfterInfo.deviceType ? (tailAfterInfo.deviceType == 2 ? '光电仪' : '其他设备') : '正在分析...') || '正在分析...'
}}</div>
</div>
<div class="title_content">
<div class="name">状态：</div>
<div class="content">{{
(tailAfterInfo.deviceStatus ? (tailAfterInfo.deviceStatus == 1 ? '正常' : '故障') : '正在分析...') || '正在分析...'
}}</div>
</div>
<div class="title_content">
<div class="name">经度：</div>
<div class="content">{{ tailAfterInfo.longitude || '正在分析...' }}</div>
</div>
<div class="title_content">
<div class="name">纬度：</div>
<div class="content">{{ tailAfterInfo.latitude || '正在分析...' }}</div>
</div>
</div>
<div class="mpegPlayer">
暂无视频
</div>
</Window> </Window>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { getCurrentInstance, onMounted, onUnmounted } from 'vue'; import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue';
import Window from '@/components/earthMap/components/Window.vue'; import Window from '@/components/earthMap/components/Window.vue';
import $mitt from '@/utils/earthMap/mitt'; import $mitt from '@/utils/earthMap/mitt';
const props = defineProps({ defineProps({
title: { title: {
type: String, type: String,
default: '光电跟踪', default: '光电跟踪',
}, },
last_title: {
type: String,
default: '',
},
ship_guid: {
type: String,
default: '',
},
}); });
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance();
// 当前跟踪设备信息
const tailAfterInfo: any = ref({});
// 关闭弹窗 // 关闭弹窗
function cancel() { function cancel() {
// 关闭当前弹窗
proxy.$parent.TailAfterWindowShow = false; proxy.$parent.TailAfterWindowShow = false;
// 重新打开原信息窗口
proxy.$parent.AISInfoWindowShow = true;
} }
onMounted(() => { onMounted(() => {
// 监听光电跟踪分析 // 监听光电跟踪分析
$mitt.on('tailAfterRtsp', (message: any) => { $mitt.on('tailAfterRtsp', (message: any) => {
console.log('光电跟踪信息', message); tailAfterInfo.value = JSON.parse(message);
}); });
}); });
@ -59,9 +102,33 @@
#tailAfterWindow .xbsj-model-header .xbsj-model-arrow { #tailAfterWindow .xbsj-model-header .xbsj-model-arrow {
right: 25px; right: 25px;
} }
.tailAfterWindow {
width: 280px !important;
left: calc(100% - 280px) !important;
top: 6px !important;
.tail_title {
width: 100%;
.title_content {
width: 100%;
display: flex;
flex-direction: row;
margin: 10px 0;
.name {
color: #fff;
}
.content {
color: #00ffe4;
}
}
}
}
.mpegPlayer { .mpegPlayer {
width: 100%; width: 100%;
height: 720px; height: 180px;
background: #000; background: #000;
color: #fff;
font-size: 26px;
text-align: center;
line-height: 180px;
} }
</style> </style>

242
src/components/earthMap/components/Window.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div ref="xbsjmodelbox" class="xbsj-model-box" :class="{ 'xbsj-model-box-close': collapsed }" :style="windowstyle" <div ref="xbsjmodelbox" class="xbsj-model-box" :class="{ 'xbsj-model-box-close': collapsed }" :style="windowstyle" @click="showclick">
@click="showclick">
<i @mousedown="startResize" ref="barbr" class="bar" :class="{ hidden: collapsed }"></i> <i @mousedown="startResize" ref="barbr" class="bar" :class="{ hidden: collapsed }"></i>
<!-- 标题 --> <!-- 标题 -->
<div class="xbsj-model-header" ref="xbsjmodelheader" @mousedown="startMove"> <div class="xbsj-model-header" ref="xbsjmodelheader" @mousedown="startMove">
@ -9,9 +8,12 @@
<span class="xbsj-model-close" @click.stop="cancel" v-if="showcloseButton"></span> <span class="xbsj-model-close" @click.stop="cancel" v-if="showcloseButton"></span>
</div> </div>
<!-- 内容 --> <!-- 内容 -->
<div class="xbsj-model-content" <div
:class="{ 'xbsj-model-closetatus-body': collapsed, 'xbsj-model-nofooter': footervisible }" ref="xbsjmodelbody" class="xbsj-model-content"
@contextmenu.prevent="contextMenu"> :class="{ 'xbsj-model-closetatus-body': collapsed, 'xbsj-model-nofooter': footervisible }"
ref="xbsjmodelbody"
@contextmenu.prevent="contextMenu"
>
<div class="xbsj-model-content-box"> <div class="xbsj-model-content-box">
<slot></slot> <slot></slot>
</div> </div>
@ -25,8 +27,8 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, getCurrentInstance, h, nextTick, onBeforeMount, onMounted, onUnmounted, ref, toRefs, watch, } from "vue"; import { computed, defineComponent, getCurrentInstance, h, nextTick, onBeforeMount, onMounted, onUnmounted, ref, toRefs, watch } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'Window', name: 'Window',
// components: {}, // components: {},
props: { props: {
@ -95,22 +97,22 @@ export default defineComponent({
*/ */
expand: { expand: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
emits: ['cancel', 'ok', 'contextMenu', 'showclick'], emits: ['cancel', 'ok', 'contextMenu', 'showclick'],
setup(props, ctx) { setup(props, ctx) {
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance();
let langs = ref({ let langs = ref({
zh: { zh: {
ok: "确定", ok: '确定',
cancel: "取消" cancel: '取消',
}, },
en: { en: {
ok: "OK", ok: 'OK',
cancel: "Cancel" cancel: 'Cancel',
} },
}) });
// let collapsed = ref(false); // let collapsed = ref(false);
let collapsed = ref(!props.expand); //初始化展开状态 let collapsed = ref(!props.expand); //初始化展开状态
let width_ = ref(0); let width_ = ref(0);
@ -120,17 +122,17 @@ export default defineComponent({
let windowstyle = ref({}); let windowstyle = ref({});
//ref //ref
let xbsjmodelheader = ref() let xbsjmodelheader = ref();
let xbsjmodelbox = ref() let xbsjmodelbox = ref();
//计算属性 //计算属性
const compCancelText = computed(() => { const compCancelText = computed(() => {
if (props.canceltext == "") { if (props.canceltext == '') {
return langs.value.zh.cancel; return langs.value.zh.cancel;
} }
return props.canceltext; return props.canceltext;
}); });
const compOkText = computed(() => { const compOkText = computed(() => {
if (props.confirmtext == "") { if (props.confirmtext == '') {
return langs.value.zh.ok; return langs.value.zh.ok;
} }
return props.confirmtext; return props.confirmtext;
@ -145,8 +147,6 @@ export default defineComponent({
} }
); );
onMounted(() => { onMounted(() => {
// console.log("props",props) // console.log("props",props)
// console.log(earth.czm.viewer.container) // console.log(earth.czm.viewer.container)
@ -166,17 +166,17 @@ export default defineComponent({
top_.value = props.top; top_.value = props.top;
updateStyle(); updateStyle();
}) });
function contextMenu() { function contextMenu() {
ctx.emit("contextMenu"); ctx.emit('contextMenu');
} }
function updateStyle() { function updateStyle() {
windowstyle.value = { windowstyle.value = {
width: width_.value + "px", width: width_.value + 'px',
height: height_.value + "px", height: height_.value + 'px',
top: top_.value + "px", top: top_.value + 'px',
left: left_.value + "px" left: left_.value + 'px',
}; };
} }
function collapse() { function collapse() {
@ -184,13 +184,13 @@ export default defineComponent({
proxy.$parent.refShow = !proxy.$parent.refShow; proxy.$parent.refShow = !proxy.$parent.refShow;
} }
function cancel() { function cancel() {
ctx.emit("cancel"); ctx.emit('cancel');
} }
function ok() { function ok() {
ctx.emit("ok"); ctx.emit('ok');
} }
function showclick() { function showclick() {
ctx.emit("showclick"); ctx.emit('showclick');
} }
function startMove(e) { function startMove(e) {
e = e || event; e = e || event;
@ -233,17 +233,11 @@ export default defineComponent({
left_.value = left; left_.value = left;
} }
if ( if (top > navheight && top <= maxHeight - (collapsed.value ? headerHeight : height_.value)) {
top > navheight &&
top <= maxHeight - (collapsed.value ? headerHeight : height_.value)
) {
top_.value = top; top_.value = top;
} else if (top <= navheight && top_.value < top) { } else if (top <= navheight && top_.value < top) {
top_.value = top; top_.value = top;
} else if ( } else if (top > maxHeight - (collapsed.value ? headerHeight : height_.value) && top_.value > top) {
top > maxHeight - (collapsed.value ? headerHeight : height_.value) &&
top_.value > top
) {
top_.value = top; top_.value = top;
} }
@ -254,13 +248,13 @@ export default defineComponent({
var conbox = window.$uia._vm.$refs.mainUI.$el; var conbox = window.$uia._vm.$refs.mainUI.$el;
function up() { function up() {
// conbox.removeEventListener("mousemove", move); // conbox.removeEventListener("mousemove", move);
document.removeEventListener("mousemove", move); document.removeEventListener('mousemove', move);
document.removeEventListener("mouseup", up); document.removeEventListener('mouseup', up);
} }
// conbox.addEventListener("mousemove", move); // conbox.addEventListener("mousemove", move);
document.addEventListener("mousemove", move); document.addEventListener('mousemove', move);
document.addEventListener("mouseup", up); document.addEventListener('mouseup', up);
} }
function startResize(e: any) { function startResize(e: any) {
e = e || event; e = e || event;
@ -302,23 +296,22 @@ export default defineComponent({
} }
// var conbox = this.$root.$refs.mainUI.$el; // var conbox = this.$root.$refs.mainUI.$el;
var conbox = window.$uia._vm.$refs.mainUI.$el var conbox = window.$uia._vm.$refs.mainUI.$el;
function up() { function up() {
if (props.resized) { if (props.resized) {
props.resized(); props.resized();
} }
// conbox.removeEventListener("mousemove", move); // conbox.removeEventListener("mousemove", move);
document.removeEventListener("mousemove", move); document.removeEventListener('mousemove', move);
document.removeEventListener("mouseup", up); document.removeEventListener('mouseup', up);
} }
// conbox.addEventListener("mousemove", move); // conbox.addEventListener("mousemove", move);
document.addEventListener("mousemove", move); document.addEventListener('mousemove', move);
document.addEventListener("mouseup", up); document.addEventListener('mouseup', up);
} }
return { return {
contextMenu, contextMenu,
updateStyle, updateStyle,
@ -339,25 +332,13 @@ export default defineComponent({
langs, langs,
xbsjmodelheader, xbsjmodelheader,
xbsjmodelbox, xbsjmodelbox,
} };
}, },
}); });
</script> </script>
<style> <style>
.xbsj-model-box { .xbsj-model-box {
position: absolute; position: absolute;
background: rgba(71, 71, 71, 0.8); background: rgba(71, 71, 71, 0.8);
top: 200px; top: 200px;
@ -365,35 +346,37 @@ export default defineComponent({
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
z-index: 9; z-index: 9;
} }
.xbsj-model-content { .xbsj-model-content {
/* overflow-x: auto; /* overflow-x: auto;
overflow-y: auto; */ overflow-y: auto; */
position: relative; position: relative;
padding: 5px; padding: 5px;
text-align: left; text-align: left;
width: calc(100% - 10px); /* width: calc(100% - 10px); */
width: 100%;
margin: 0 auto;
transition: all 0.5s linear; transition: all 0.5s linear;
height: calc(100% - 40px); height: calc(100% - 40px);
} }
.xbsj-model-content-box { .xbsj-model-content-box {
overflow-x: auto; overflow-x: auto;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
height: calc(100% - 10px); height: calc(100% - 10px);
} }
.xbsj-model-nofooter { .xbsj-model-nofooter {
height: calc(100% - 82px); height: calc(100% - 82px);
} }
.xbsj-model-content p { .xbsj-model-content p {
color: #1fffff; color: #1fffff;
} }
.xbsj-model-header { .xbsj-model-header {
cursor: all-scroll; cursor: all-scroll;
word-break: keep-all; word-break: keep-all;
white-space: nowrap; white-space: nowrap;
@ -412,9 +395,9 @@ export default defineComponent({
text-align: left; text-align: left;
user-select: none; user-select: none;
display: flex; display: flex;
} }
.xbsj-model-close { .xbsj-model-close {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -426,15 +409,15 @@ export default defineComponent({
/* background: url(../../../images/model_close.png) no-repeat; */ /* background: url(../../../images/model_close.png) no-repeat; */
background: url(../../../assets/earthMap/components/model_close.png) no-repeat; background: url(../../../assets/earthMap/components/model_close.png) no-repeat;
background-size: contain; background-size: contain;
} }
.xbsj-model-close:hover { .xbsj-model-close:hover {
/* background: url(../../../images/model_close_hover.png) no-repeat; */ /* background: url(../../../images/model_close_hover.png) no-repeat; */
background: url(../../../assets/earthMap/components/model_close_hover.png) no-repeat; background: url(../../../assets/earthMap/components/model_close_hover.png) no-repeat;
background-size: contain; background-size: contain;
} }
.xbsj-model-arrow { .xbsj-model-arrow {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -447,19 +430,19 @@ export default defineComponent({
background: url(../../../assets/earthMap/components/model_arrow.png) no-repeat; background: url(../../../assets/earthMap/components/model_arrow.png) no-repeat;
background-size: contain; background-size: contain;
transition: all 0.5s linear; transition: all 0.5s linear;
} }
.xbsj-model-arrow:hover { .xbsj-model-arrow:hover {
/* background: url(../../../images/model_arrow_hover.png) no-repeat; */ /* background: url(../../../images/model_arrow_hover.png) no-repeat; */
background: url(../../../assets/earthMap/components/model_arrow_hover.png) no-repeat; background: url(../../../assets/earthMap/components/model_arrow_hover.png) no-repeat;
background-size: contain; background-size: contain;
} }
.xbsj-model-close:hover { .xbsj-model-close:hover {
color: #47f0ff; color: #47f0ff;
} }
.xbsj-model-footer { .xbsj-model-footer {
margin: 0; margin: 0;
padding: 6px 0; padding: 6px 0;
text-align: right; text-align: right;
@ -467,9 +450,9 @@ export default defineComponent({
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
.btn { .btn {
min-width: 60px; min-width: 60px;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
@ -479,77 +462,77 @@ export default defineComponent({
text-decoration: none; text-decoration: none;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.xbsj-model-footer .cancelBtn:focus, .xbsj-model-footer .cancelBtn:focus,
.xbsj-model-footer .cancelBtn:hover { .xbsj-model-footer .cancelBtn:hover {
color: #1fffff; color: #1fffff;
} }
.xbsj-model-footer .confirmBtn:focus, .xbsj-model-footer .confirmBtn:focus,
.xbsj-model-footer .confirmBtn:hover { .xbsj-model-footer .confirmBtn:hover {
color: #1fffff; color: #1fffff;
} }
.xbsj-model-footer .confirm-btn .marginLeft { .xbsj-model-footer .confirm-btn .marginLeft {
margin-left: 10px; margin-left: 10px;
} }
.cancelBtn { .cancelBtn {
border: 1px solid #666666; border: 1px solid #666666;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
color: #dddddd; color: #dddddd;
} }
.confirmBtn { .confirmBtn {
border: 1px solid #666666; border: 1px solid #666666;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
color: #dddddd; color: #dddddd;
margin-right: 24px; margin-right: 24px;
} }
button+button { button + button {
margin-left: 15px; margin-left: 15px;
} }
.xbsj-model-box .bar { .xbsj-model-box .bar {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
} }
.xbsj-model-box i.bart, .xbsj-model-box i.bart,
.xbsj-model-box i.barb { .xbsj-model-box i.barb {
height: 4px; height: 4px;
left: -1px; left: -1px;
right: -1px; right: -1px;
cursor: n-resize; cursor: n-resize;
} }
.xbsj-model-box i.bart { .xbsj-model-box i.bart {
top: -1px; top: -1px;
} }
.xbsj-model-box i.barb { .xbsj-model-box i.barb {
bottom: -1px; bottom: -1px;
} }
.xbsj-model-box i.barr, .xbsj-model-box i.barr,
.xbsj-model-box i.barl { .xbsj-model-box i.barl {
width: 4px; width: 4px;
top: -1px; top: -1px;
bottom: -1px; bottom: -1px;
cursor: e-resize; cursor: e-resize;
} }
.xbsj-model-box i.barl { .xbsj-model-box i.barl {
left: -1px; left: -1px;
} }
.xbsj-model-box i.barr { .xbsj-model-box i.barr {
right: -1px; right: -1px;
} }
.xbsj-model-box i.bar { .xbsj-model-box i.bar {
width: 14px; width: 14px;
height: 14px; height: 14px;
cursor: nw-resize; cursor: nw-resize;
@ -558,9 +541,9 @@ button+button {
/* background: rgba(221, 221, 221, 0.4); */ /* background: rgba(221, 221, 221, 0.4); */
background: url(../../../images/model_right_bottom.png) no-repeat; background: url(../../../images/model_right_bottom.png) no-repeat;
background-size: cover; background-size: cover;
} }
.xbsj-model-box .closestatus { .xbsj-model-box .closestatus {
transform: rotate(-180deg); transform: rotate(-180deg);
-ms-transform: rotate(-180deg); -ms-transform: rotate(-180deg);
/* IE 9 */ /* IE 9 */
@ -569,18 +552,17 @@ button+button {
-webkit-transform: rotate(-180deg); -webkit-transform: rotate(-180deg);
/* Safari 和 Chrome */ /* Safari 和 Chrome */
-o-transform: rotate(-180deg); -o-transform: rotate(-180deg);
} }
.xbsj-model-box .xbsj-model-closetatus-body { .xbsj-model-box .xbsj-model-closetatus-body {
height: 0; height: 0;
} }
.xbsj-model-box-close { .xbsj-model-box-close {
height: 40px !important; height: 40px !important;
} }
.hidden { .hidden {
display: none; display: none;
} }
</style> </style>

5
src/utils/earthMap/listenMouseHandler.ts
View File

@ -103,7 +103,12 @@ export default function listenMouseHandler(that) {
} else { } else {
that.windowTitle = 'AIS信息'; that.windowTitle = 'AIS信息';
} }
// 打开信息窗口
that.AISInfoWindowShow = true; that.AISInfoWindowShow = true;
// 关闭追踪窗口
that.TailAfterWindowShow = false;
// 同时隐藏场景树状结构
window.$uia.tools.sceneTree.show = false;
// 赋值船只场景id - 唯一标识 可通过该字段获取其余信息 // 赋值船只场景id - 唯一标识 可通过该字段获取其余信息
that.ship_guid = pickedFeature.id.guid; that.ship_guid = pickedFeature.id.guid;
} }

34
src/utils/earthMap/shipDraw.ts
View File

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com * @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-03 17:42:49 * @Date: 2024-01-03 17:42:49
* @LastEditors: Fuyuu 1805498209@qq.com * @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-26 16:30:29 * @LastEditTime: 2024-01-30 10:29:34
* @FilePath: \dt-admin-pc-v2\src\utils\earthMap\shipDraw.ts * @FilePath: \dt-admin-pc-v2\src\utils\earthMap\shipDraw.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -30,6 +30,23 @@ function toRadians(point) {
return window.Cesium.Math.toRadians(point); return window.Cesium.Math.toRadians(point);
} }
/**
* 时间戳转化为年月日时分秒
* @param timestamp 时间戳
*/
function toStringTime(timestamp) {
let date = new Date(timestamp);
let year = date.getFullYear();
let month = ('0' + (date.getMonth() + 1)).slice(-2);
let day = ('0' + date.getDate()).slice(-2);
let hour = ('0' + date.getHours()).slice(-2);
let minute = ('0' + date.getMinutes()).slice(-2);
let second = ('0' + date.getSeconds()).slice(-2);
let datetime = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
return datetime;
}
/** /**
* 绘制船只 * 绘制船只
* @param shipItem 船只数据 * @param shipItem 船只数据
@ -70,6 +87,7 @@ export const drawRadarShipsList = function (radarItem, isShowRadarTrack, isShowR
// 是否已经存在 // 是否已经存在
let existingShip = radarShipList.find((shipItem) => shipItem.trackId === radarData.trackId); let existingShip = radarShipList.find((shipItem) => shipItem.trackId === radarData.trackId);
if (existingShip) { if (existingShip) {
console.log('新增轨迹...');
// 添加新的轨迹点 // 添加新的轨迹点
window.$earth.getObject(existingShip.track_guid).positions.push([toRadians(radarData.longitude), toRadians(radarData.latitude), 0]); window.$earth.getObject(existingShip.track_guid).positions.push([toRadians(radarData.longitude), toRadians(radarData.latitude), 0]);
// 获取场景中的船只信息 // 获取场景中的船只信息
@ -78,7 +96,17 @@ export const drawRadarShipsList = function (radarItem, isShowRadarTrack, isShowR
shipData.xbsjPosition = [toRadians(radarData.longitude), toRadians(radarData.latitude), 0]; shipData.xbsjPosition = [toRadians(radarData.longitude), toRadians(radarData.latitude), 0];
// 航向需要后续调整。。。 // 航向需要后续调整。。。
shipData.xbsjRotation = [(Math.PI / 180) * (radarData.course - 90), 0, 0]; shipData.xbsjRotation = [(Math.PI / 180) * (radarData.course - 90), 0, 0];
// 更新船只数据（store）
existingShip.timestamp = toStringTime(radarData.timestamp);
existingShip.azimuth = radarData.azimuth;
existingShip.course = radarData.course;
existingShip.longitude = radarData.longitude;
existingShip.latitude = radarData.latitude;
existingShip.dis = radarData.dis;
existingShip.speed = radarData.speed;
existingShip.altitude = radarData.altitude;
} else { } else {
console.log('新增船只...');
// 新增船只轨迹信息 // 新增船只轨迹信息
let trackData = addShipTrack([[toRadians(radarData.longitude), toRadians(radarData.latitude), 0]], 1); let trackData = addShipTrack([[toRadians(radarData.longitude), toRadians(radarData.latitude), 0]], 1);
// 根据按钮状态决定轨迹显隐 // 根据按钮状态决定轨迹显隐
@ -87,8 +115,6 @@ export const drawRadarShipsList = function (radarItem, isShowRadarTrack, isShowR
let modelData = drawShips(radarData, 1); let modelData = drawShips(radarData, 1);
// 根据按钮状态决定模型显隐 // 根据按钮状态决定模型显隐
modelData.show = isShowRadarShip; modelData.show = isShowRadarShip;
// 将时间戳转换
let time = new Date(Math.floor(radarData.timestamp / 1000) * 1000);
// 添加新的雷达船只 // 添加新的雷达船只
radarShipList.push({ radarShipList.push({
name: `${radarData.trackId}号船_radar`, // 名称 name: `${radarData.trackId}号船_radar`, // 名称
@ -96,7 +122,7 @@ export const drawRadarShipsList = function (radarItem, isShowRadarTrack, isShowR
guid: modelData.xbsjGuid, // 船只场景id guid: modelData.xbsjGuid, // 船只场景id
track_guid: trackData.xbsjGuid, // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid，用于轨迹显隐 track_guid: trackData.xbsjGuid, // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid，用于轨迹显隐
radarId: radarData.radarId, // 雷达ID radarId: radarData.radarId, // 雷达ID
timestamp: `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`, // 时间 timestamp: toStringTime(radarData.timestamp), // 时间
azimuth: radarData.azimuth, // 方位角 azimuth: radarData.azimuth, // 方位角
course: radarData.course, // 航向 course: radarData.course, // 航向
latitude: radarData.latitude, // 纬度 latitude: radarData.latitude, // 纬度

5
src/views/earthMap/edit/EarthComp.vue
View File

@ -88,7 +88,7 @@
<!-- AIS信息显示窗口 --> <!-- AIS信息显示窗口 -->
<AISInfoWindow v-if="AISInfoWindowShow" :ship_guid="ship_guid" :title="windowTitle"></AISInfoWindow> <AISInfoWindow v-if="AISInfoWindowShow" :ship_guid="ship_guid" :title="windowTitle"></AISInfoWindow>
<!-- 跟踪船只窗口 --> <!-- 跟踪船只窗口 -->
<TailAfterWindow v-if="TailAfterWindowShow"></TailAfterWindow> <TailAfterWindow v-if="TailAfterWindowShow" :ship_guid="ship_guid" :last_title="windowTitle"></TailAfterWindow>
</div> </div>
</template> </template>
@ -333,7 +333,7 @@
store = useEarthMapStore(); store = useEarthMapStore();
setLabelStatus: any = setLabelStatus; setLabelStatus: any = setLabelStatus;
setIconByRef: any = setIconByRef; setIconByRef: any = setIconByRef;
earthTitle = '态势监控一张图'; earthTitle = '横琴新区环岛电子围网系统';
realTime = '……'; realTime = '……';
// 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！ // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
// _earth = undefined; // _earth = undefined;
@ -673,6 +673,7 @@
let sceneTree = earthUI.tools.sceneTree; let sceneTree = earthUI.tools.sceneTree;
// 显示图层管理 // 显示图层管理
sceneTree.show = this.PropsSceneTreeShow; sceneTree.show = this.PropsSceneTreeShow;
// sceneTree.show = false;
// 设置图层管理 ref 输入框的 回车 事件 // 设置图层管理 ref 输入框的 回车 事件
// ref 输入框的 // ref 输入框的
let sceneTreeInput = sceneTree._comp.$el.getElementsByClassName('xbsj-model-content-box')[0].children[1]; let sceneTreeInput = sceneTree._comp.$el.getElementsByClassName('xbsj-model-content-box')[0].children[1];

Write Preview
Loading…
Cancel
Save