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

fix：调整大屏车辆打点，跟车地图中心点修改，视频调试

Browse Source
This commit is contained in:
SunTao 2024-12-04 09:50:55 +08:00
parent 7b745c6f4c
commit 4e8fd26ced
5 changed files with 159 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/map/fssm-map.vue
View File

@ -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: 公共地图
-->

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

@ -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,20 +1219,19 @@ 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;
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;
const dx =
(targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
const dy =
(targetLocation[1] * 1 - currentLocation[1] * 1) / 100;
// 设置计数器
let count = 0;
// 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
@ -1251,9 +1247,9 @@ export default {
const y = currentLocation[1] * 1 + dy * count;
// 更新小车位置
const [features] = this.carMapPointSource.getFeatures();
features.setGeometry(new Point([x, y]));
features.setStyle([
// const [features] = this.carMapPointSource.getFeatures();
item.setGeometry(new Point([x, y]));
item.setStyle([
new Style({
image: new Icon({
crossOrigin: "anonymous",
@ -1261,12 +1257,18 @@ export default {
// 图标缩放比例
scale: 0.04,
// 将角度转换为弧度,并除以180*π
rotation: (item.data.direction - 90) * (Math.PI / 180),
rotation:
(itemMessage.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,

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

@ -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,21 +55,19 @@ 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;
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;
const dx =
(targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
const dy =
(targetLocation[1] * 1 - currentLocation[1] * 1) / 100;
// 设置计数器
let count = 0;
// 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
@ -73,32 +81,57 @@ export default {
// 计算当前帧的位置
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([
// const [features] = this.carMapPointSource.getFeatures();
item.setGeometry(new Point([x, y]));
item.setStyle([
new Style({
image: new Icon({
crossOrigin: "anonymous",
src: logo,
// 图标缩放比例
scale: 0.03,
scale: 0.04,
// 将角度转换为弧度,并除以180*π
rotation: (item.data.direction - 90) * (Math.PI / 180),
rotation:
(itemMessage.data.direction - 90) * (Math.PI / 180),
}),
}),
]);
}, 10);
}
} else if (item.type === "defect") {
});
} 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 (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;
},
};
</script>

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

@ -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"
>
<inspection-follow v-if="followTitle === '跟车详情'"></inspection-follow>
<inspection-follow
v-if="followTitle === '跟车详情'"
:dialogItem="dialogItem"
></inspection-follow>
</el-dialog>
<!-- 视频弹窗 -->
@ -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 = {};
}
});

4
src/views/xj/inspection/confirmation-management/index.vue
View File

@ -180,7 +180,7 @@
icon="el-icon-check"
size="mini"
:disabled="multiple"
@click="handleConfirm(1)"
@click="handleConfirm(2)"
>是病害
</el-button>
</el-col>
@ -191,7 +191,7 @@
icon="el-icon-close"
size="mini"
:disabled="multiple"
@click="handleConfirm(0)"
@click="handleConfirm(3)"
>不是病害
</el-button>
</el-col>