fix：修改websocket根据id取消事件监听
This commit is contained in:
parent
0c8f9804d7
commit
4cdef3c778
@ -10,6 +10,7 @@ class WebSocketService {
|
||||
// this.maxReconnectAttempts = 2;
|
||||
this.reconnectInterval = 3000;
|
||||
this.eventListeners = {};
|
||||
this.listeners = {};
|
||||
}
|
||||
|
||||
connect(url) {
|
||||
@ -62,9 +63,25 @@ class WebSocketService {
|
||||
}
|
||||
}
|
||||
|
||||
on(event, callback) {
|
||||
on(event, callback,id) {
|
||||
this.eventListeners[event] = [];
|
||||
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) {
|
||||
@ -76,6 +93,7 @@ class WebSocketService {
|
||||
close() {
|
||||
if (this.ws) {
|
||||
this.ws.close();
|
||||
this.ws = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @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
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -498,6 +498,7 @@ export default {
|
||||
carPointList: [],
|
||||
// 小车地图点位features数组
|
||||
mapPointFeatures: [],
|
||||
indexListenerId: Symbol("index-listener"),
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -507,7 +508,7 @@ export default {
|
||||
this.getRoadList();
|
||||
this.getDieaseTypeList();
|
||||
this.getMessageList();
|
||||
this.handleMessage();
|
||||
// this.handleMessage();
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
@ -1104,6 +1105,7 @@ export default {
|
||||
// 不接收小车位置消息
|
||||
const data = { type: "carLocation", status: false };
|
||||
this.$ws.send(data);
|
||||
this.$ws.removeEventListener("message",this.indexListenerId);
|
||||
this.carPointList = [];
|
||||
this.mapPointFeatures = [];
|
||||
// 地图右上角多选按钮隐藏
|
||||
@ -1152,6 +1154,7 @@ export default {
|
||||
// 发送小车位置消息
|
||||
const data = { type: "carLocation", status: true };
|
||||
this.$ws.send(data);
|
||||
this.$ws.on("message", this.handleMessage, this.indexListenerId);
|
||||
// 将地图层级初始化
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
@ -1206,6 +1209,7 @@ export default {
|
||||
// 发送小车位置消息
|
||||
const data = { type: "carLocation", status: true };
|
||||
this.$ws.send(data);
|
||||
this.$ws.on("message", this.handleMessage, this.indexListenerId);
|
||||
// 地图右上角多选按钮隐藏
|
||||
this.showIconList = false;
|
||||
// 图层恢复
|
||||
@ -1226,59 +1230,55 @@ export default {
|
||||
* @description: 处理websocket消息
|
||||
* @return {*}
|
||||
*/
|
||||
handleMessage() {
|
||||
this.$ws.on("message", (itemMessage) => {
|
||||
if (itemMessage.type === "carPosition") {
|
||||
if (this.carPointList.includes(itemMessage.data.entityId)) {
|
||||
// 获取当前位置和目标位置
|
||||
this.carMapPointSource.getFeatures().forEach((item) => {
|
||||
if (item.get("data") === itemMessage.data.entityId) {
|
||||
const currentLocation = item.getGeometry().getCoordinates();
|
||||
const targetLocation = itemMessage.data.location;
|
||||
// 计算两点之间的差值
|
||||
const dx =
|
||||
(targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
|
||||
const dy =
|
||||
(targetLocation[1] * 1 - currentLocation[1] * 1) / 100;
|
||||
// 设置计数器
|
||||
let count = 0;
|
||||
// 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
|
||||
const timer = setInterval(() => {
|
||||
count++;
|
||||
if (count >= 100) {
|
||||
clearInterval(timer);
|
||||
return;
|
||||
}
|
||||
handleMessage(itemMessage) {
|
||||
if (itemMessage.type === "carPosition") {
|
||||
if (this.carPointList.includes(itemMessage.data.entityId)) {
|
||||
// 获取当前位置和目标位置
|
||||
this.carMapPointSource.getFeatures().forEach((item) => {
|
||||
if (item.get("data") === itemMessage.data.entityId) {
|
||||
const currentLocation = item.getGeometry().getCoordinates();
|
||||
const targetLocation = itemMessage.data.location;
|
||||
// 计算两点之间的差值
|
||||
const dx = (targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
|
||||
const dy = (targetLocation[1] * 1 - currentLocation[1] * 1) / 100;
|
||||
// 设置计数器
|
||||
let count = 0;
|
||||
// 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
|
||||
const timer = setInterval(() => {
|
||||
count++;
|
||||
if (count >= 100) {
|
||||
clearInterval(timer);
|
||||
return;
|
||||
}
|
||||
|
||||
// 计算当前帧的位置
|
||||
const x = currentLocation[0] * 1 + dx * count;
|
||||
const y = currentLocation[1] * 1 + dy * count;
|
||||
// 计算当前帧的位置
|
||||
const x = currentLocation[0] * 1 + dx * count;
|
||||
const y = currentLocation[1] * 1 + dy * count;
|
||||
|
||||
// 更新小车位置
|
||||
// const [features] = this.carMapPointSource.getFeatures();
|
||||
item.setGeometry(new Point([x, y]));
|
||||
item.setStyle([
|
||||
new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
// 图标缩放比例
|
||||
scale: 0.5,
|
||||
// 将角度转换为弧度,并除以180*π
|
||||
rotation:
|
||||
(itemMessage.data.direction - 90) * (Math.PI / 180),
|
||||
}),
|
||||
// 更新小车位置
|
||||
// const [features] = this.carMapPointSource.getFeatures();
|
||||
item.setGeometry(new Point([x, y]));
|
||||
item.setStyle([
|
||||
new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
// 图标缩放比例
|
||||
scale: 0.5,
|
||||
// 将角度转换为弧度,并除以180*π
|
||||
rotation:
|
||||
(itemMessage.data.direction - 90) * (Math.PI / 180),
|
||||
}),
|
||||
]);
|
||||
}, 10);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.carPointList.push(itemMessage.data.entityId);
|
||||
this.drawCarMapPoint(itemMessage.data);
|
||||
}
|
||||
}),
|
||||
]);
|
||||
}, 10);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
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)
|
||||
brightness(80%) saturate(550%);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-15 13:14:03
|
||||
* @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
|
||||
* @Description: 总览大屏-巡检车辆-跟车弹窗
|
||||
-->
|
||||
@ -44,19 +44,21 @@ export default {
|
||||
mapPointFeatures: [],
|
||||
// 病害图层数据源
|
||||
defectLayerSource: null,
|
||||
listenerId: Symbol('inspection-follow-listener'), // 创建一个Symbol对象
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.handleMessage();
|
||||
this.$ws.on("message", this.handleMessage,this.listenerId)
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description: 处理websocket消息
|
||||
* @return {*}
|
||||
*/
|
||||
handleMessage() {
|
||||
this.$ws.on("message", (itemMessage) => {
|
||||
if (itemMessage.type === "carPosition") {
|
||||
handleMessage(itemMessage) {
|
||||
if (
|
||||
itemMessage.type === "carPosition"
|
||||
) {
|
||||
if (this.carPointList.includes(itemMessage.data.entityId)) {
|
||||
// 获取当前位置和目标位置
|
||||
this.carMapPointSource.getFeatures().forEach((item) => {
|
||||
@ -108,11 +110,13 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.carMap.instance.get("map");
|
||||
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) {
|
||||
this.drawDefectMapPoint(itemMessage.data);
|
||||
} else {
|
||||
@ -135,7 +139,6 @@ export default {
|
||||
this.defectLayerSource.addFeature(feature);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
@ -218,11 +221,12 @@ export default {
|
||||
});
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
beforeDestroy() {
|
||||
this.carPointList = [];
|
||||
this.mapPointFeatures = [];
|
||||
this.carMapPointSource = null;
|
||||
this.defectLayerSource = null;
|
||||
this.$ws.removeEventListener("message",this.listenerId);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 09:40:18
|
||||
* @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
|
||||
* @Description: 总览大屏-巡检车辆
|
||||
-->
|
||||
@ -271,14 +271,14 @@ export default {
|
||||
* @return {*}
|
||||
*/
|
||||
followCancel() {
|
||||
this.followTitle = "";
|
||||
this.showCarVisible = false;
|
||||
this.dialogItem = {};
|
||||
// 停止接收病害信息
|
||||
const carData = { type: "carLocation", status: false };
|
||||
const defectData = { type: "defect", status: false };
|
||||
this.$ws.send(carData);
|
||||
this.$ws.send(defectData);
|
||||
this.followTitle = "";
|
||||
this.dialogItem = {};
|
||||
this.showCarVisible = false;
|
||||
},
|
||||
|
||||
/**
|
||||
@ -297,6 +297,7 @@ export default {
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
this.dialogItem = {};
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user