diff --git a/README.md b/README.md index 9305d3b..f3e5f5b 100644 --- a/README.md +++ b/README.md @@ -121,4 +121,7 @@ function getUserOptions() { userOptions.value = res.rows; }); -} \ No newline at end of file +} + +使用SockJS + STOMP协议 +滑出蓝色 滑入黄色 \ No newline at end of file diff --git a/package.json b/package.json index bf3b1d1..ede8c60 100644 --- a/package.json +++ b/package.json @@ -15,11 +15,10 @@ }, "dependencies": { "@element-plus/icons-vue": "2.0.10", + "@stomp/stompjs": "^7.1.1", "@supermap/iclient-ol": "^11.1.1", "@vueuse/core": "9.5.0", "axios": "0.27.2", - "ol": "6.15.1", - "proj4": "^2.17.0", "echarts": "5.4.0", "element-plus": "2.2.21", "file-saver": "2.0.5", @@ -28,7 +27,10 @@ "jsencrypt": "3.3.1", "leaflet-minimap": "^3.6.1", "nprogress": "0.2.0", + "ol": "6.15.1", "pinia": "2.0.22", + "proj4": "^2.17.0", + "sockjs-client": "^1.6.1", "vue": "3.2.45", "vue-cropper": "1.0.3", "vue-router": "4.1.4" diff --git a/src/assets/images/Aircraft1.png b/src/assets/images/Aircraft1.png new file mode 100644 index 0000000..6c17913 Binary files /dev/null and b/src/assets/images/Aircraft1.png differ diff --git a/src/assets/images/airport_bg.png b/src/assets/images/airport_bg.png new file mode 100644 index 0000000..862bb70 Binary files /dev/null and b/src/assets/images/airport_bg.png differ diff --git a/src/assets/images/airport_out.png b/src/assets/images/airport_out.png new file mode 100644 index 0000000..fffa458 Binary files /dev/null and b/src/assets/images/airport_out.png differ diff --git a/src/assets/images/layerActive.png b/src/assets/images/layerActive.png index adbaeb5..2fa8f25 100644 Binary files a/src/assets/images/layerActive.png and b/src/assets/images/layerActive.png differ diff --git a/src/assets/images/left_arrow.png b/src/assets/images/left_arrow.png new file mode 100644 index 0000000..74e7255 Binary files /dev/null and b/src/assets/images/left_arrow.png differ diff --git a/src/assets/images/left_arrow_active.png b/src/assets/images/left_arrow_active.png new file mode 100644 index 0000000..34f83b9 Binary files /dev/null and b/src/assets/images/left_arrow_active.png differ diff --git a/src/assets/images/right_arrow.png b/src/assets/images/right_arrow.png new file mode 100644 index 0000000..f86115b Binary files /dev/null and b/src/assets/images/right_arrow.png differ diff --git a/src/assets/images/right_arrow_active.png b/src/assets/images/right_arrow_active.png new file mode 100644 index 0000000..ec16500 Binary files /dev/null and b/src/assets/images/right_arrow_active.png differ diff --git a/src/assets/images/znz.png b/src/assets/images/znz.png index 82f36d7..388670c 100644 Binary files a/src/assets/images/znz.png and b/src/assets/images/znz.png differ diff --git a/src/assets/images/znzBg.png b/src/assets/images/znzBg.png new file mode 100644 index 0000000..31f6cf0 Binary files /dev/null and b/src/assets/images/znzBg.png differ diff --git a/src/assets/images/按钮-一宫格悬停.png b/src/assets/images/按钮-一宫格悬停.png deleted file mode 100644 index 2d27e9b..0000000 Binary files a/src/assets/images/按钮-一宫格悬停.png and /dev/null differ diff --git a/src/assets/images/按钮-一宫格选中.png b/src/assets/images/按钮-一宫格选中.png deleted file mode 100644 index 6863d55..0000000 Binary files a/src/assets/images/按钮-一宫格选中.png and /dev/null differ diff --git a/src/assets/images/按钮-二宫格悬停.png b/src/assets/images/按钮-二宫格悬停.png deleted file mode 100644 index 809bf92..0000000 Binary files a/src/assets/images/按钮-二宫格悬停.png and /dev/null differ diff --git a/src/assets/images/按钮-二宫格选中.png b/src/assets/images/按钮-二宫格选中.png deleted file mode 100644 index 7bf728c..0000000 Binary files a/src/assets/images/按钮-二宫格选中.png and /dev/null differ diff --git a/src/assets/images/按钮-六宫格悬停.png b/src/assets/images/按钮-六宫格悬停.png deleted file mode 100644 index 315d411..0000000 Binary files a/src/assets/images/按钮-六宫格悬停.png and /dev/null differ diff --git a/src/assets/images/按钮-六宫格选中.png b/src/assets/images/按钮-六宫格选中.png deleted file mode 100644 index 91cb988..0000000 Binary files a/src/assets/images/按钮-六宫格选中.png and /dev/null differ diff --git a/src/assets/images/选项icon-充放电统计选中.png b/src/assets/images/选项icon-充放电统计选中.png deleted file mode 100644 index 219cb1e..0000000 Binary files a/src/assets/images/选项icon-充放电统计选中.png and /dev/null differ diff --git a/src/assets/images/选项icon-故障报警选中.png b/src/assets/images/选项icon-故障报警选中.png deleted file mode 100644 index a3ebfc6..0000000 Binary files a/src/assets/images/选项icon-故障报警选中.png and /dev/null differ diff --git a/src/assets/images/选项icon-电池概况选中.png b/src/assets/images/选项icon-电池概况选中.png deleted file mode 100644 index a58cd84..0000000 Binary files a/src/assets/images/选项icon-电池概况选中.png and /dev/null differ diff --git a/src/assets/images/选项icon-视频监控选中.png b/src/assets/images/选项icon-视频监控选中.png deleted file mode 100644 index 7923a79..0000000 Binary files a/src/assets/images/选项icon-视频监控选中.png and /dev/null differ diff --git a/src/assets/images/选项icon-轨迹回放选中.png b/src/assets/images/选项icon-轨迹回放选中.png deleted file mode 100644 index 43c3edd..0000000 Binary files a/src/assets/images/选项icon-轨迹回放选中.png and /dev/null differ diff --git a/src/components/map/OpenLayersMap.vue b/src/components/map/OpenLayersMap.vue index 2794d1b..49b8837 100644 --- a/src/components/map/OpenLayersMap.vue +++ b/src/components/map/OpenLayersMap.vue @@ -344,7 +344,8 @@ defineExpose({ zoomOut, compass, resetView, - getCurrentMapState // 暴露获取当前地图状态的方法 + getCurrentMapState, // 暴露获取当前地图状态的方法 + map // 暴露地图实例 }); diff --git a/src/components/map/controls/LayerSwitcher.vue b/src/components/map/controls/LayerSwitcher.vue index 0209a21..af5748e 100644 --- a/src/components/map/controls/LayerSwitcher.vue +++ b/src/components/map/controls/LayerSwitcher.vue @@ -161,9 +161,12 @@ import Overlay from 'ol/Overlay'; import labelBg from '../../../assets/images/label_bg.png'; // 导入车辆图标 -import car1Icon from '../../../assets/images/Aircraft.png'; +import car1Icon from '../../../assets/images/Aircraft.png'; //滑入航空器 +import car1Icon1 from '../../../assets/images/Aircraft1.png'; //滑出航空器 import car2Icon from '../../../assets/images/noPeopleCar.png'; import noPeopleCarIcon from '../../../assets/images/noPeopleCar.png'; +import airportBg from '../../../assets/images/airport_bg.png'; // 蓝色背景 +import airportOutBg from '../../../assets/images/airport_out.png'; // 黄色背景 // 定义props接收地图实例 const props = defineProps({ @@ -191,7 +194,7 @@ const exampleVehicleLayers = ref([ name: '滑入航空器', visible: true, showLabel: true, - icon: car1Icon, + icon: car1Icon1, type: 'aircraft-in', layer: null, features: [ @@ -356,7 +359,18 @@ function initExampleLayers() { // 创建标签内容 const labelDiv = document.createElement('div'); labelDiv.className = `custom-label label-${layerConfig.type}`; - labelDiv.style.backgroundImage = `url(${labelBg})`; + + // 根据类型选择背景图片 - 滑入使用黄色背景(airport_out.png),滑出使用蓝色背景(airport_bg.png) + let backgroundImage; + if (layerConfig.type === 'aircraft-in') { + backgroundImage = airportOutBg; // 滑入航空器背景 - 黄色 + } else if (layerConfig.type === 'aircraft-out') { + backgroundImage = airportBg; // 滑出航空器背景 - 蓝色 + } else { + backgroundImage = labelBg; // 普通车辆背景 + } + + labelDiv.style.backgroundImage = `url(${backgroundImage})`; labelDiv.style.backgroundRepeat = 'no-repeat'; labelDiv.style.backgroundSize = '100% 100%'; labelDiv.style.padding = '3px 10px'; @@ -436,7 +450,7 @@ function selectTextStyle(style) { const allLabels = document.querySelectorAll('.custom-label'); allLabels.forEach(label => { // 确保背景图片始终存在 - label.style.backgroundImage = "url('../../../assets/images/label_bg.png')"; + label.style.backgroundImage = labelBg; label.style.backgroundRepeat = "no-repeat"; label.style.backgroundSize = "100% 100%"; @@ -457,13 +471,13 @@ function selectTextStyle(style) { default: // 默认样式,恢复原始样式 if (label.classList.contains('label-aircraft-in')) { - // label.style.backgroundColor = 'rgba(52, 122, 226, 0.7)'; - // label.style.borderColor = '#347AE2'; - label.style.color = '#fff'; - } else if (label.classList.contains('label-aircraft-out')) { // label.style.backgroundColor = 'rgba(245, 231, 79, 0.7)'; // label.style.borderColor = '#E4CB0D'; - label.style.color = '#333'; + label.style.color = '#333'; // 滑入航空器 - 黄色背景,黑色文字 + } else if (label.classList.contains('label-aircraft-out')) { + // label.style.backgroundColor = 'rgba(52, 122, 226, 0.7)'; + // label.style.borderColor = '#347AE2'; + label.style.color = '#fff'; // 滑出航空器 - 蓝色背景,白色文字 } else if (label.classList.contains('label-car')) { // label.style.backgroundColor = 'rgba(37, 37, 37, 0.7)'; // label.style.borderColor = '#484848'; @@ -513,13 +527,13 @@ function updateAllLabelsStyle(styleName) { default: // 默认样式,恢复原始样式 if (isAircraftIn) { - // label.style.backgroundColor = 'rgba(52, 122, 226, 0.7)'; - // label.style.borderColor = '#347AE2'; - label.style.color = '#fff'; - } else if (isAircraftOut) { // label.style.backgroundColor = 'rgba(245, 231, 79, 0.7)'; // label.style.borderColor = '#E4CB0D'; - label.style.color = '#333'; + label.style.color = '#333'; // 滑入航空器 - 黄色背景,黑色文字 + } else if (isAircraftOut) { + // label.style.backgroundColor = 'rgba(52, 122, 226, 0.7)'; + // label.style.borderColor = '#347AE2'; + label.style.color = '#fff'; // 滑出航空器 - 蓝色背景,白色文字 } else if (isCar) { // label.style.backgroundColor = 'rgba(37, 37, 37, 0.7)'; // label.style.borderColor = '#484848'; @@ -1126,20 +1140,20 @@ function toggleExampleLabel(layer) { transform: translateX(-50%); } -/* 滑入航空器 */ +/* 滑入航空器 - 黄色背景,黑色文字 */ .label-aircraft-in { - background-color: rgba(52, 122, 226, 0.7); - border-color: #347AE2; - color: #fff; -} - -/* 滑出航空器 */ -.label-aircraft-out { background-color: rgba(245, 231, 79, 0.7); border-color: #E4CB0D; color: #333; } +/* 滑出航空器 - 蓝色背景,白色文字 */ +.label-aircraft-out { + background-color: rgba(52, 122, 226, 0.7); + border-color: #347AE2; + color: #fff; +} + /* 无人车 */ .label-car { background-color: rgba(37, 37, 37, 0.7); diff --git a/src/components/map/controls/OpenLayersMapInfo.vue b/src/components/map/controls/OpenLayersMapInfo.vue index 3cf1616..503ab9b 100644 --- a/src/components/map/controls/OpenLayersMapInfo.vue +++ b/src/components/map/controls/OpenLayersMapInfo.vue @@ -1,7 +1,7 @@ diff --git a/src/components/map/controls/OpenLayersZoomControl.vue b/src/components/map/controls/OpenLayersZoomControl.vue index f73e124..e8ae335 100644 --- a/src/components/map/controls/OpenLayersZoomControl.vue +++ b/src/components/map/controls/OpenLayersZoomControl.vue @@ -1,35 +1,108 @@ @@ -83,15 +217,64 @@ defineExpose({ gap: 25px; } -.compass { +.compass-container { + position: relative; width: 40px; height: 40px; - background: url("../../../assets/images/znz.png") no-repeat; - background-size: 100% 100%; cursor: pointer; - z-index: 3000; + background: url("../../../assets/images/znzBg.png") no-repeat; + background-size: 100% 100%; } -.layer-switcher{ + +.rotation-controls { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 3002; +} + +.rotate-left, +.rotate-right { + width: 24px; + height: 24px; + position: absolute; + top: 50%; + transform: translateY(-50%); + cursor: pointer; +} + +.rotate-left { + left: -3px; + background: url("../../../assets/images/left_arrow.png") no-repeat; + background-size: 100% 100%; + z-index: 5000; +} + +.rotate-right { + right: -3px; + background: url("../../../assets/images/right_arrow.png") no-repeat; + background-size: 100% 100%; +} + +.rotate-left:hover, +.rotate-left:active { + left: -3px; + background: url("../../../assets/images/left_arrow_active.png") no-repeat; + background-size: 100% 100%; +} +.rotate-right:hover, +.rotate-right:active { + right: -3px; + background: url("../../../assets/images/right_arrow_active.png") no-repeat; + background-size: 100% 100%; +} + +.layer-switcher { z-index: 3000; width: 40px; height: 40px; @@ -99,6 +282,11 @@ defineExpose({ background-size: 100% 100%; cursor: pointer; } +.layer-switcher:hover, +.layer-switcher:active { + background: url("../../../assets/images/layerActive.png") no-repeat; + background-size: 100% 100%; +} .zoom-in { background: url("../../../assets/images/zoomOut.png") no-repeat; @@ -108,6 +296,11 @@ defineExpose({ height: 40px; cursor: pointer; } +.zoom-in:hover, +.zoom-in:active { + background: url("../../../assets/images/zoomOutActive.png") no-repeat; + background-size: 100% 100%; +} .zoom-out { background: url("../../../assets/images/zoomIn.png") no-repeat; @@ -117,15 +310,43 @@ defineExpose({ height: 40px; cursor: pointer; } +.zoom-out:hover, +.zoom-out:active { + background: url("../../../assets/images/zoomInActive.png") no-repeat; + background-size: 100% 100%; +} + /* 响应式调整 */ @media (max-width: 768px) { - .zoom-in, .zoom-out, .compass { + .zoom-in, + .zoom-out, + .compass-container, + .compass-bg, + .compass-needle { width: 28px; height: 28px; + } + + .zoom-in, + .zoom-out { background-size: 80%; background-position: center center; background-repeat: no-repeat; } + + .rotate-left, + .rotate-right { + width: 18px; + height: 18px; + } + + .rotate-left { + left: -18px; + } + + .rotate-right { + right: -18px; + } } - \ No newline at end of file + diff --git a/src/components/map/controls/VehicleMovementControl.vue b/src/components/map/controls/VehicleMovementControl.vue new file mode 100644 index 0000000..7957a6e --- /dev/null +++ b/src/components/map/controls/VehicleMovementControl.vue @@ -0,0 +1,454 @@ + + + + + \ No newline at end of file diff --git a/src/utils/test_websocket.html b/src/utils/test_websocket.html index 69915bd..363613d 100644 --- a/src/utils/test_websocket.html +++ b/src/utils/test_websocket.html @@ -1,388 +1,332 @@ - WebSocket 测试客户端 - STOMP + SockJS + + 冲突检测WebSocket测试工具 - - -
-

WebSocket 实时消息测试客户端

-

连接地址: http://10.0.0.124:8082/ws

-

订阅主题: /topic/realtime

+

冲突检测WebSocket测试工具

-
未连接
- -
- - - -
- -
-
-
0
-
总消息数
+ +
+

🚗 冲突检测WebSocket (原生协议)

+ +
+ +
-
-
0
-
位置更新
+ +
+ + + +
-
-
0
-
预警消息
-
-
-
0
-
控制指令
+ +
状态:未连接
+ +
+

日志:

+
-
+ +
+

🎛️ 控制面板

+
+ + + +
+
diff --git a/src/utils/websocket使用说明.md b/src/utils/websocket使用说明.md deleted file mode 100644 index 07e13f9..0000000 --- a/src/utils/websocket使用说明.md +++ /dev/null @@ -1,65 +0,0 @@ -# WebSocket 使用说明 - -## 1. 引入 WebSocket 工具 -```js -import { createWebSocket } from '@/utils/websocket'; -``` - -## 2. 创建 WebSocket 实例 -```js -const ws = createWebSocket('ws://你的后端ws地址'); -``` - -## 3. 监听事件 -```js -// 连接成功 -ws.on('open', () => { - console.log('WebSocket 已连接'); -}); - -// 接收消息 -ws.on('message', (data) => { - console.log('收到消息:', data); - // 这里可以处理接收到的数据 -}); - -// 监听错误 -ws.on('error', (err) => { - console.error('WebSocket 错误:', err); -}); - -// 监听关闭 -ws.on('close', () => { - console.log('WebSocket 已关闭'); -}); -``` - -## 4. 发送数据 -```js -// 发送对象(会自动转为 JSON 字符串) -ws.send({ type: 'yourType', payload: '你的数据' }); - -// 发送字符串 -ws.send('hello server'); -``` - -## 5. 关闭连接 -建议在页面销毁时关闭 WebSocket 连接: -```js -import { onUnmounted } from 'vue'; - -onUnmounted(() => { - ws.close(); -}); -``` - -## 6. 其他说明 -- 支持自动重连,默认最大重连 10 次,每次间隔 3 秒。 -- 支持事件解绑: -```js -ws.off('message', callback); -``` -- 支持多页面/组件复用,内部采用单例模式。 - ---- -如需更复杂的用法或有特殊需求,请联系开发维护者。 \ No newline at end of file diff --git a/src/views/platform/index.vue b/src/views/platform/index.vue index 51b0d2a..b52a462 100644 --- a/src/views/platform/index.vue +++ b/src/views/platform/index.vue @@ -20,6 +20,11 @@ + + + + +