From 4e8fd26ced103af4ee0a3e651591ddb3f2ba25cf Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Wed, 4 Dec 2024 09:50:55 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E8=B0=83=E6=95=B4=E5=A4=A7?=
=?UTF-8?q?=E5=B1=8F=E8=BD=A6=E8=BE=86=E6=89=93=E7=82=B9=EF=BC=8C=E8=B7=9F?=
=?UTF-8?q?=E8=BD=A6=E5=9C=B0=E5=9B=BE=E4=B8=AD=E5=BF=83=E7=82=B9=E4=BF=AE?=
=?UTF-8?q?=E6=94=B9=EF=BC=8C=E8=A7=86=E9=A2=91=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/map/fssm-map.vue | 2 +-
src/views/big-screen/index.vue | 120 +++++++--------
.../components/inspection-follow.vue | 139 +++++++++++-------
.../inspection-vehicles.vue | 9 +-
.../confirmation-management/index.vue | 4 +-
5 files changed, 159 insertions(+), 115 deletions(-)
diff --git a/src/components/map/fssm-map.vue b/src/components/map/fssm-map.vue
index af1779b..66924eb 100644
--- a/src/components/map/fssm-map.vue
+++ b/src/components/map/fssm-map.vue
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 10:46:23
* @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-03 10:56:51
+ * @LastEditTime: 2024-12-04 09:16:07
* @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
* @Description: 公共地图
-->
diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue
index 353484f..44d7ee3 100644
--- a/src/views/big-screen/index.vue
+++ b/src/views/big-screen/index.vue
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-03 13:03:48
+ * @LastEditTime: 2024-12-04 09:28:41
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页
-->
@@ -495,6 +495,10 @@ export default {
// 小车地图点位数据源
carMapPointSource: null,
+ // 小车地图点位数组
+ carPointList: [],
+ // 小车地图点位features数组
+ mapPointFeatures: [],
};
},
created() {
@@ -767,17 +771,6 @@ export default {
// 自己设置一个标识
type: "icon",
});
- // 可以给点位设置样式
- // feature.setStyle([
- // new Style({
- // image: new Icon({
- // crossOrigin: "anonymous",
- // src: logo,
- // // 图标缩放比例
- // scale: 0.05,
- // }),
- // }),
- // ]);
features.push(feature);
});
const clusterSource = new Cluster({
@@ -1018,6 +1011,8 @@ export default {
// 点击线段事件
if (feature.getProperties().type === "line") {
console.log(feature, "线段参数");
+ } else if (feature.getProperties().type === "carPoint") {
+ console.log(feature, "小车点位");
} else {
if (features.length === 1) {
// 单个点位
@@ -1028,7 +1023,7 @@ export default {
// 获取点位数据
this.screenImage = selectFeature.get("data");
this.showImageDialog = true;
- console.log(selectFeature.get("data"));
+ // console.log(selectFeature.get("data"));
} else {
// 聚合点
// 放大地图层级
@@ -1101,6 +1096,8 @@ export default {
// 不接收小车位置消息
const data = { type: "carLocation", status: false };
this.$ws.send(data);
+ this.carPointList = [];
+ this.mapPointFeatures = [];
// 地图右上角多选按钮隐藏
this.showIconList = false;
// 图层恢复
@@ -1222,50 +1219,55 @@ export default {
* @return {*}
*/
handleMessage() {
- this.$ws.on("message", (item) => {
- if (item.type === "carPosition") {
- if (!this.carMapPointSource) {
- this.drawCarMapPoint(item.data);
- } else {
+ this.$ws.on("message", (itemMessage) => {
+ if (itemMessage.type === "carPosition") {
+ if (this.carPointList.includes(itemMessage.data.entityId)) {
// 获取当前位置和目标位置
- const currentLocation = this.carMapPointSource
- .getFeatures()[0]
- .getGeometry()
- .getCoordinates();
- const targetLocation = item.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;
+ 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 [features] = this.carMapPointSource.getFeatures();
+ item.setGeometry(new Point([x, y]));
+ item.setStyle([
+ new Style({
+ image: new Icon({
+ crossOrigin: "anonymous",
+ src: logo,
+ // 图标缩放比例
+ scale: 0.04,
+ // 将角度转换为弧度,并除以180*π
+ rotation:
+ (itemMessage.data.direction - 90) * (Math.PI / 180),
+ }),
+ }),
+ ]);
+ }, 10);
}
-
- // 计算当前帧的位置
- const x = currentLocation[0] * 1 + dx * count;
- const y = currentLocation[1] * 1 + dy * count;
-
- // 更新小车位置
- const [features] = this.carMapPointSource.getFeatures();
- features.setGeometry(new Point([x, y]));
- features.setStyle([
- new Style({
- image: new Icon({
- crossOrigin: "anonymous",
- src: logo,
- // 图标缩放比例
- scale: 0.04,
- // 将角度转换为弧度,并除以180*π
- rotation: (item.data.direction - 90) * (Math.PI / 180),
- }),
- }),
- ]);
- }, 10);
+ });
+ } else {
+ this.carPointList.push(itemMessage.data.entityId);
+ this.drawCarMapPoint(itemMessage.data);
}
}
});
@@ -1277,10 +1279,10 @@ export default {
* @return {void}
*/
drawCarMapPoint(item) {
- const features = [];
+ // const features = [];
const feature = new Feature({
geometry: new Point(item.location),
- data: item,
+ data: item.entityId,
type: "carPoint",
});
// 可以给点位设置样式
@@ -1296,9 +1298,9 @@ export default {
}),
}),
]);
- features.push(feature);
+ this.mapPointFeatures.push(feature);
this.carMapPointSource = new VectorSource({
- features,
+ features: this.mapPointFeatures,
});
const carMapPointLayer = new VectorLayer({
source: this.carMapPointSource,
diff --git a/src/views/big-screen/overview-components/components/inspection-follow.vue b/src/views/big-screen/overview-components/components/inspection-follow.vue
index 03b9321..346cb96 100644
--- a/src/views/big-screen/overview-components/components/inspection-follow.vue
+++ b/src/views/big-screen/overview-components/components/inspection-follow.vue
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-15 13:14:03
* @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-03 14:32:34
+ * @LastEditTime: 2024-12-04 09:48:03
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
* @Description: 总览大屏-巡检车辆-跟车弹窗
-->
@@ -28,10 +28,20 @@ export default {
components: {
FssmMap,
},
+ props: {
+ dialogItem: {
+ type: Object,
+ default: () => {},
+ },
+ },
data() {
return {
// 小车图层数据源
- carLayerSource: null,
+ carMapPointSource: null,
+ // 小车地图点位数组
+ carPointList: [],
+ // 小车地图点位features数组
+ mapPointFeatures: [],
// 病害图层数据源
defectLayerSource: null,
};
@@ -45,60 +55,83 @@ export default {
* @return {*}
*/
handleMessage() {
- this.$ws.on("message", (item) => {
- if (item.type === "carPosition") {
- if (!this.carMapPointSource) {
- this.drawCarMapPoint(item.data);
- } else {
+ this.$ws.on("message", (itemMessage) => {
+ if (itemMessage.type === "carPosition") {
+ if (this.carPointList.includes(itemMessage.data.entityId)) {
// 获取当前位置和目标位置
- const currentLocation = this.carMapPointSource
- .getFeatures()[0]
- .getGeometry()
- .getCoordinates();
- const targetLocation = item.data.location;
- // 计算两点之间的差值
- const dx = (targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
- const dy = (targetLocation[1] * 1 - currentLocation[1] * 1) / 100;
+ 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;
+ }
- // 设置计数器
- 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 [features] = this.carMapPointSource.getFeatures();
+ item.setGeometry(new Point([x, y]));
+ item.setStyle([
+ new Style({
+ image: new Icon({
+ crossOrigin: "anonymous",
+ src: logo,
+ // 图标缩放比例
+ scale: 0.04,
+ // 将角度转换为弧度,并除以180*π
+ rotation:
+ (itemMessage.data.direction - 90) * (Math.PI / 180),
+ }),
+ }),
+ ]);
+ }, 10);
}
-
- // 计算当前帧的位置
- const x = currentLocation[0] * 1 + dx * count;
- const y = currentLocation[1] * 1 + dy * count;
- // 更新小车位置
- const [features] = this.carMapPointSource.getFeatures();
- features.setGeometry(new Point([x, y]));
- features.setStyle([
- new Style({
- image: new Icon({
- crossOrigin: "anonymous",
- src: logo,
- // 图标缩放比例
- scale: 0.03,
- // 将角度转换为弧度,并除以180*π
- rotation: (item.data.direction - 90) * (Math.PI / 180),
- }),
- }),
- ]);
- }, 10);
+ });
+ } else {
+ this.carPointList.push(itemMessage.data.entityId);
+ this.drawCarMapPoint(itemMessage.data);
+ // 修改当前地图中心点
+ if (this.dialogItem.extId === itemMessage.data.entityId) {
+ this.$nextTick(() => {
+ const map = this.$refs.carMap.instance.get("map");
+ map.getView().setCenter(itemMessage.data.location);
+ });
+ }
}
- } else if (item.type === "defect") {
+ } else if (itemMessage.type === "defect") {
if (!this.defectLayerSource) {
- this.drawDefectMapPoint(item.data);
+ this.drawDefectMapPoint(itemMessage.data);
} else {
const feature = new Feature({
- geometry: new Point(item.geometry.coordinates),
- data: item,
+ geometry: new Point(itemMessage.geometry.coordinates),
+ data: itemMessage,
type: "defectPoint",
});
+ // 可以给点位设置样式
+ feature.setStyle([
+ new Style({
+ image: new Icon({
+ crossOrigin: "anonymous",
+ src: require(`@/assets/screen/index/${itemMessage.defecttype}.png`),
+ // 图标缩放比例
+ scale: 0.5,
+ }),
+ }),
+ ]);
this.defectLayerSource.addFeature(feature);
}
}
@@ -114,7 +147,7 @@ export default {
const features = [];
const feature = new Feature({
geometry: new Point(item.location),
- data: item,
+ data: item.entityId,
type: "carPoint",
});
// 可以给点位设置样式
@@ -130,9 +163,9 @@ export default {
}),
}),
]);
- features.push(feature);
+ this.mapPointFeatures.push(feature);
this.carMapPointSource = new VectorSource({
- features,
+ features: this.mapPointFeatures,
});
const carMapPointLayer = new VectorLayer({
source: this.carMapPointSource,
@@ -185,6 +218,12 @@ export default {
});
},
},
+ destroyed() {
+ this.carPointList = [];
+ this.mapPointFeatures = [];
+ this.carMapPointSource = null;
+ this.defectLayerSource = null;
+ },
};
diff --git a/src/views/big-screen/overview-components/inspection-vehicles.vue b/src/views/big-screen/overview-components/inspection-vehicles.vue
index 3b3ccf4..d0d03b7 100644
--- a/src/views/big-screen/overview-components/inspection-vehicles.vue
+++ b/src/views/big-screen/overview-components/inspection-vehicles.vue
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-08 09:40:18
* @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-03 14:10:16
+ * @LastEditTime: 2024-12-04 09:41:55
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\inspection-vehicles.vue
* @Description: 总览大屏-巡检车辆
-->
@@ -125,7 +125,10 @@
destroy-on-close
@close="followCancel"
>
-
+
@@ -235,6 +238,7 @@ export default {
followCar(val) {
this.followTitle = "跟车详情";
this.showCarVisible = true;
+ this.dialogItem = val;
const carData = { type: "carLocation", status: true };
const defectData = { type: "defect", status: true };
this.$ws.send(carData);
@@ -278,7 +282,6 @@ export default {
this.showViewVisible = false;
closeVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
if (code === 200) {
- console.log(data);
this.dialogItem = {};
}
});
diff --git a/src/views/xj/inspection/confirmation-management/index.vue b/src/views/xj/inspection/confirmation-management/index.vue
index 44a70b9..457718b 100644
--- a/src/views/xj/inspection/confirmation-management/index.vue
+++ b/src/views/xj/inspection/confirmation-management/index.vue
@@ -180,7 +180,7 @@
icon="el-icon-check"
size="mini"
:disabled="multiple"
- @click="handleConfirm(1)"
+ @click="handleConfirm(2)"
>是病害
@@ -191,7 +191,7 @@
icon="el-icon-close"
size="mini"
:disabled="multiple"
- @click="handleConfirm(0)"
+ @click="handleConfirm(3)"
>不是病害