SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改websocket根据id取消事件监听

Browse Source
This commit is contained in:
SunTao 2024-12-13 10:47:12 +08:00
parent 0c8f9804d7
commit 4cdef3c778
4 changed files with 88 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/plugins/websocket.js
View File

@ -10,6 +10,7 @@ class WebSocketService {
// this.maxReconnectAttempts = 2; // this.maxReconnectAttempts = 2;
this.reconnectInterval = 3000; this.reconnectInterval = 3000;
this.eventListeners = {}; this.eventListeners = {};
this.listeners = {};
} }
connect(url) { connect(url) {
@ -62,9 +63,25 @@ class WebSocketService {
} }
} }
on(event, callback) { on(event, callback,id) {
this.eventListeners[event] = []; this.eventListeners[event] = [];
this.eventListeners[event].push(callback); this.eventListeners[event].push(callback);
if (!this.listeners[event]) {
this.listeners[event] = {};
}
this.listeners[event][id] = callback;
}
removeEventListener(event, id) {
if (this.listeners[event] && this.listeners[event][id]) {
delete this.listeners[event][id];
}
}
closeMessageListener() {
if (this.ws) {
this.ws.onmessage = null;
}
} }
emit(event, data) { emit(event, data) {
@ -76,6 +93,7 @@ class WebSocketService {
close() { close() {
if (this.ws) { if (this.ws) {
this.ws.close(); this.ws.close();
this.ws = null;
} }
} }
} }

103
src/views/big-screen/index.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00 * @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-10 10:41:39 * @LastEditTime: 2024-12-13 10:44:04
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页 * @Description: 大屏首页
--> -->
@ -498,6 +498,7 @@ export default {
carPointList: [], carPointList: [],
// 小车地图点位features数组 // 小车地图点位features数组
mapPointFeatures: [], mapPointFeatures: [],
indexListenerId: Symbol("index-listener"),
}; };
}, },
created() { created() {
@ -507,7 +508,7 @@ export default {
this.getRoadList(); this.getRoadList();
this.getDieaseTypeList(); this.getDieaseTypeList();
this.getMessageList(); this.getMessageList();
this.handleMessage(); // this.handleMessage();
}, },
mounted() {}, mounted() {},
methods: { methods: {
@ -1104,6 +1105,7 @@ export default {
// 不接收小车位置消息 // 不接收小车位置消息
const data = { type: "carLocation", status: false }; const data = { type: "carLocation", status: false };
this.$ws.send(data); this.$ws.send(data);
this.$ws.removeEventListener("message",this.indexListenerId);
this.carPointList = []; this.carPointList = [];
this.mapPointFeatures = []; this.mapPointFeatures = [];
// 地图右上角多选按钮隐藏 // 地图右上角多选按钮隐藏
@ -1152,6 +1154,7 @@ export default {
// 发送小车位置消息 // 发送小车位置消息
const data = { type: "carLocation", status: true }; const data = { type: "carLocation", status: true };
this.$ws.send(data); this.$ws.send(data);
this.$ws.on("message", this.handleMessage, this.indexListenerId);
// 将地图层级初始化 // 将地图层级初始化
this.$nextTick(() => { this.$nextTick(() => {
const map = this.$refs.roadMap.instance.get("map"); const map = this.$refs.roadMap.instance.get("map");
@ -1206,6 +1209,7 @@ export default {
// 发送小车位置消息 // 发送小车位置消息
const data = { type: "carLocation", status: true }; const data = { type: "carLocation", status: true };
this.$ws.send(data); this.$ws.send(data);
this.$ws.on("message", this.handleMessage, this.indexListenerId);
// 地图右上角多选按钮隐藏 // 地图右上角多选按钮隐藏
this.showIconList = false; this.showIconList = false;
// 图层恢复 // 图层恢复
@ -1226,59 +1230,55 @@ export default {
* @description: 处理websocket消息 * @description: 处理websocket消息
* @return {*} * @return {*}
*/ */
handleMessage() { handleMessage(itemMessage) {
this.$ws.on("message", (itemMessage) => { if (itemMessage.type === "carPosition") {
if (itemMessage.type === "carPosition") { if (this.carPointList.includes(itemMessage.data.entityId)) {
if (this.carPointList.includes(itemMessage.data.entityId)) { // 获取当前位置和目标位置
// 获取当前位置和目标位置 this.carMapPointSource.getFeatures().forEach((item) => {
this.carMapPointSource.getFeatures().forEach((item) => { if (item.get("data") === itemMessage.data.entityId) {
if (item.get("data") === itemMessage.data.entityId) { const currentLocation = item.getGeometry().getCoordinates();
const currentLocation = item.getGeometry().getCoordinates(); const targetLocation = itemMessage.data.location;
const targetLocation = itemMessage.data.location; // 计算两点之间的差值
// 计算两点之间的差值 const dx = (targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
const dx = const dy = (targetLocation[1] * 1 - currentLocation[1] * 1) / 100;
(targetLocation[0] * 1 - currentLocation[0] * 1) / 100; // 设置计数器
const dy = let count = 0;
(targetLocation[1] * 1 - currentLocation[1] * 1) / 100; // 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
// 设置计数器 const timer = setInterval(() => {
let count = 0; count++;
// 创建定时器,每10ms移动一次,总共移动100次,约1秒完成 if (count >= 100) {
const timer = setInterval(() => { clearInterval(timer);
count++; return;
if (count >= 100) { }
clearInterval(timer);
return;
}
// 计算当前帧的位置 // 计算当前帧的位置
const x = currentLocation[0] * 1 + dx * count; const x = currentLocation[0] * 1 + dx * count;
const y = currentLocation[1] * 1 + dy * count; const y = currentLocation[1] * 1 + dy * count;
// 更新小车位置 // 更新小车位置
// const [features] = this.carMapPointSource.getFeatures(); // const [features] = this.carMapPointSource.getFeatures();
item.setGeometry(new Point([x, y])); item.setGeometry(new Point([x, y]));
item.setStyle([ item.setStyle([
new Style({ new Style({
image: new Icon({ image: new Icon({
crossOrigin: "anonymous", crossOrigin: "anonymous",
src: logo, src: logo,
// 图标缩放比例 // 图标缩放比例
scale: 0.5, scale: 0.5,
// 将角度转换为弧度,并除以180*π // 将角度转换为弧度,并除以180*π
rotation: rotation:
(itemMessage.data.direction - 90) * (Math.PI / 180), (itemMessage.data.direction - 90) * (Math.PI / 180),
}),
}), }),
]); }),
}, 10); ]);
} }, 10);
}); }
} else { });
this.carPointList.push(itemMessage.data.entityId); } else {
this.drawCarMapPoint(itemMessage.data); this.carPointList.push(itemMessage.data.entityId);
} this.drawCarMapPoint(itemMessage.data);
} }
}); }
}, },
/** /**
@ -1581,7 +1581,6 @@ export default {
filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg) filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
brightness(80%) saturate(550%); brightness(80%) saturate(550%);
} }
} }
} }

22
src/views/big-screen/overview-components/components/inspection-follow.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-11-15 13:14:03 * @Date: 2024-11-15 13:14:03
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-10 13:22:17 * @LastEditTime: 2024-12-13 10:10:41
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
* @Description: 总览大屏-巡检车辆-跟车弹窗 * @Description: 总览大屏-巡检车辆-跟车弹窗
--> -->
@ -44,19 +44,21 @@ export default {
mapPointFeatures: [], mapPointFeatures: [],
// 病害图层数据源 // 病害图层数据源
defectLayerSource: null, defectLayerSource: null,
listenerId: Symbol('inspection-follow-listener'), // 创建一个Symbol对象
}; };
}, },
created() { created() {
this.handleMessage(); this.$ws.on("message", this.handleMessage,this.listenerId)
}, },
methods: { methods: {
/** /**
* @description: 处理websocket消息 * @description: 处理websocket消息
* @return {*} * @return {*}
*/ */
handleMessage() { handleMessage(itemMessage) {
this.$ws.on("message", (itemMessage) => { if (
if (itemMessage.type === "carPosition") { itemMessage.type === "carPosition"
) {
if (this.carPointList.includes(itemMessage.data.entityId)) { if (this.carPointList.includes(itemMessage.data.entityId)) {
// 获取当前位置和目标位置 // 获取当前位置和目标位置
this.carMapPointSource.getFeatures().forEach((item) => { this.carMapPointSource.getFeatures().forEach((item) => {
@ -108,11 +110,13 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
const map = this.$refs.carMap.instance.get("map"); const map = this.$refs.carMap.instance.get("map");
map.getView().setCenter(itemMessage.data.location); map.getView().setCenter(itemMessage.data.location);
map.getView().setZoom(17) map.getView().setZoom(17);
}); });
} }
} }
} else if (itemMessage.type === "defect") { } else if (
itemMessage.type === "defect"
) {
if (!this.defectLayerSource) { if (!this.defectLayerSource) {
this.drawDefectMapPoint(itemMessage.data); this.drawDefectMapPoint(itemMessage.data);
} else { } else {
@ -135,7 +139,6 @@ export default {
this.defectLayerSource.addFeature(feature); this.defectLayerSource.addFeature(feature);
} }
} }
});
}, },
/** /**
@ -218,11 +221,12 @@ export default {
}); });
}, },
}, },
destroyed() { beforeDestroy() {
this.carPointList = []; this.carPointList = [];
this.mapPointFeatures = []; this.mapPointFeatures = [];
this.carMapPointSource = null; this.carMapPointSource = null;
this.defectLayerSource = null; this.defectLayerSource = null;
this.$ws.removeEventListener("message",this.listenerId);
}, },
}; };
</script> </script>

9
src/views/big-screen/overview-components/inspection-vehicles.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-11-08 09:40:18 * @Date: 2024-11-08 09:40:18
* @LastEditors: SunTao 328867980@qq.com * @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-10 13:12:24 * @LastEditTime: 2024-12-13 09:51:07
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\inspection-vehicles.vue * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\inspection-vehicles.vue
* @Description: 总览大屏-巡检车辆 * @Description: 总览大屏-巡检车辆
--> -->
@ -271,14 +271,14 @@ export default {
* @return {*} * @return {*}
*/ */
followCancel() { followCancel() {
this.followTitle = "";
this.showCarVisible = false;
this.dialogItem = {};
// 停止接收病害信息 // 停止接收病害信息
const carData = { type: "carLocation", status: false }; const carData = { type: "carLocation", status: false };
const defectData = { type: "defect", status: false }; const defectData = { type: "defect", status: false };
this.$ws.send(carData); this.$ws.send(carData);
this.$ws.send(defectData); this.$ws.send(defectData);
this.followTitle = "";
this.dialogItem = {};
this.showCarVisible = false;
}, },
/** /**
@ -297,6 +297,7 @@ export default {
}, },
}, },
destroyed() { destroyed() {
this.dialogItem = {};
clearInterval(this.timer); clearInterval(this.timer);
}, },
}; };