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 * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 10:46:23 * @Date: 2024-10-14 10:46:23
* @LastEditors: SunTao 328867980@qq.com * @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 * @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
* @Description: 公共地图 * @Description: 公共地图
--> -->

120
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-03 13:03:48 * @LastEditTime: 2024-12-04 09:28:41
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页 * @Description: 大屏首页
--> -->
@ -495,6 +495,10 @@ export default {
// 小车地图点位数据源 // 小车地图点位数据源
carMapPointSource: null, carMapPointSource: null,
// 小车地图点位数组
carPointList: [],
// 小车地图点位features数组
mapPointFeatures: [],
}; };
}, },
created() { created() {
@ -767,17 +771,6 @@ export default {
// 自己设置一个标识 // 自己设置一个标识
type: "icon", type: "icon",
}); });
// 可以给点位设置样式
// feature.setStyle([
// new Style({
// image: new Icon({
// crossOrigin: "anonymous",
// src: logo,
// // 图标缩放比例
// scale: 0.05,
// }),
// }),
// ]);
features.push(feature); features.push(feature);
}); });
const clusterSource = new Cluster({ const clusterSource = new Cluster({
@ -1018,6 +1011,8 @@ export default {
// 点击线段事件 // 点击线段事件
if (feature.getProperties().type === "line") { if (feature.getProperties().type === "line") {
console.log(feature, "线段参数"); console.log(feature, "线段参数");
} else if (feature.getProperties().type === "carPoint") {
console.log(feature, "小车点位");
} else { } else {
if (features.length === 1) { if (features.length === 1) {
// 单个点位 // 单个点位
@ -1028,7 +1023,7 @@ export default {
// 获取点位数据 // 获取点位数据
this.screenImage = selectFeature.get("data"); this.screenImage = selectFeature.get("data");
this.showImageDialog = true; this.showImageDialog = true;
console.log(selectFeature.get("data")); // console.log(selectFeature.get("data"));
} else { } else {
// 聚合点 // 聚合点
// 放大地图层级 // 放大地图层级
@ -1101,6 +1096,8 @@ export default {
// 不接收小车位置消息 // 不接收小车位置消息
const data = { type: "carLocation", status: false }; const data = { type: "carLocation", status: false };
this.$ws.send(data); this.$ws.send(data);
this.carPointList = [];
this.mapPointFeatures = [];
// 地图右上角多选按钮隐藏 // 地图右上角多选按钮隐藏
this.showIconList = false; this.showIconList = false;
// 图层恢复 // 图层恢复
@ -1222,50 +1219,55 @@ export default {
* @return {*} * @return {*}
*/ */
handleMessage() { handleMessage() {
this.$ws.on("message", (item) => { this.$ws.on("message", (itemMessage) => {
if (item.type === "carPosition") { if (itemMessage.type === "carPosition") {
if (!this.carMapPointSource) { if (this.carPointList.includes(itemMessage.data.entityId)) {
this.drawCarMapPoint(item.data);
} else {
// 获取当前位置和目标位置 // 获取当前位置和目标位置
const currentLocation = this.carMapPointSource this.carMapPointSource.getFeatures().forEach((item) => {
.getFeatures()[0] if (item.get("data") === itemMessage.data.entityId) {
.getGeometry() const currentLocation = item.getGeometry().getCoordinates();
.getCoordinates(); const targetLocation = itemMessage.data.location;
const targetLocation = item.data.location; // 计算两点之间的差值
// 计算两点之间的差值 const dx =
const dx = (targetLocation[0] * 1 - currentLocation[0] * 1) / 100; (targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
const dy = (targetLocation[1] * 1 - currentLocation[1] * 1) / 100; const dy =
// 设置计数器 (targetLocation[1] * 1 - currentLocation[1] * 1) / 100;
let count = 0; // 设置计数器
// 创建定时器,每10ms移动一次,总共移动100次,约1秒完成 let count = 0;
const timer = setInterval(() => { // 创建定时器,每10ms移动一次,总共移动100次,约1秒完成
count++; const timer = setInterval(() => {
if (count >= 100) { count++;
clearInterval(timer); if (count >= 100) {
return; 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);
} }
});
// 计算当前帧的位置 } else {
const x = currentLocation[0] * 1 + dx * count; this.carPointList.push(itemMessage.data.entityId);
const y = currentLocation[1] * 1 + dy * count; this.drawCarMapPoint(itemMessage.data);
// 更新小车位置
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);
} }
} }
}); });
@ -1277,10 +1279,10 @@ export default {
* @return {void} * @return {void}
*/ */
drawCarMapPoint(item) { drawCarMapPoint(item) {
const features = []; // const features = [];
const feature = new Feature({ const feature = new Feature({
geometry: new Point(item.location), geometry: new Point(item.location),
data: item, data: item.entityId,
type: "carPoint", type: "carPoint",
}); });
// 可以给点位设置样式 // 可以给点位设置样式
@ -1296,9 +1298,9 @@ export default {
}), }),
}), }),
]); ]);
features.push(feature); this.mapPointFeatures.push(feature);
this.carMapPointSource = new VectorSource({ this.carMapPointSource = new VectorSource({
features, features: this.mapPointFeatures,
}); });
const carMapPointLayer = new VectorLayer({ const carMapPointLayer = new VectorLayer({
source: this.carMapPointSource, source: this.carMapPointSource,

139
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-03 14:32:34 * @LastEditTime: 2024-12-04 09:48:03
* @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: 总览大屏-巡检车辆-跟车弹窗
--> -->
@ -28,10 +28,20 @@ export default {
components: { components: {
FssmMap, FssmMap,
}, },
props: {
dialogItem: {
type: Object,
default: () => {},
},
},
data() { data() {
return { return {
// 小车图层数据源 // 小车图层数据源
carLayerSource: null, carMapPointSource: null,
// 小车地图点位数组
carPointList: [],
// 小车地图点位features数组
mapPointFeatures: [],
// 病害图层数据源 // 病害图层数据源
defectLayerSource: null, defectLayerSource: null,
}; };
@ -45,60 +55,83 @@ export default {
* @return {*} * @return {*}
*/ */
handleMessage() { handleMessage() {
this.$ws.on("message", (item) => { this.$ws.on("message", (itemMessage) => {
if (item.type === "carPosition") { if (itemMessage.type === "carPosition") {
if (!this.carMapPointSource) { if (this.carPointList.includes(itemMessage.data.entityId)) {
this.drawCarMapPoint(item.data);
} else {
// 获取当前位置和目标位置 // 获取当前位置和目标位置
const currentLocation = this.carMapPointSource this.carMapPointSource.getFeatures().forEach((item) => {
.getFeatures()[0] if (item.get("data") === itemMessage.data.entityId) {
.getGeometry() const currentLocation = item.getGeometry().getCoordinates();
.getCoordinates(); const targetLocation = itemMessage.data.location;
const targetLocation = item.data.location; // 计算两点之间的差值
// 计算两点之间的差值 const dx =
const dx = (targetLocation[0] * 1 - currentLocation[0] * 1) / 100; (targetLocation[0] * 1 - currentLocation[0] * 1) / 100;
const dy = (targetLocation[1] * 1 - currentLocation[1] * 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; const x = currentLocation[0] * 1 + dx * count;
// 创建定时器,每10ms移动一次,总共移动100次,约1秒完成 const y = currentLocation[1] * 1 + dy * count;
const timer = setInterval(() => {
count++; // 更新小车位置
if (count >= 100) { // const [features] = this.carMapPointSource.getFeatures();
clearInterval(timer); item.setGeometry(new Point([x, y]));
return; item.setStyle([
new Style({
image: new Icon({
crossOrigin: "anonymous",
src: logo,
// 图标缩放比例
scale: 0.04,
// 将角度转换为弧度,并除以180*π
rotation:
(itemMessage.data.direction - 90) * (Math.PI / 180),
}),
}),
]);
}, 10);
} }
});
// 计算当前帧的位置 } else {
const x = currentLocation[0] * 1 + dx * count; this.carPointList.push(itemMessage.data.entityId);
const y = currentLocation[1] * 1 + dy * count; this.drawCarMapPoint(itemMessage.data);
// 更新小车位置 // 修改当前地图中心点
const [features] = this.carMapPointSource.getFeatures(); if (this.dialogItem.extId === itemMessage.data.entityId) {
features.setGeometry(new Point([x, y])); this.$nextTick(() => {
features.setStyle([ const map = this.$refs.carMap.instance.get("map");
new Style({ map.getView().setCenter(itemMessage.data.location);
image: new Icon({ });
crossOrigin: "anonymous", }
src: logo,
// 图标缩放比例
scale: 0.03,
// 将角度转换为弧度,并除以180*π
rotation: (item.data.direction - 90) * (Math.PI / 180),
}),
}),
]);
}, 10);
} }
} else if (item.type === "defect") { } else if (itemMessage.type === "defect") {
if (!this.defectLayerSource) { if (!this.defectLayerSource) {
this.drawDefectMapPoint(item.data); this.drawDefectMapPoint(itemMessage.data);
} else { } else {
const feature = new Feature({ const feature = new Feature({
geometry: new Point(item.geometry.coordinates), geometry: new Point(itemMessage.geometry.coordinates),
data: item, data: itemMessage,
type: "defectPoint", 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); this.defectLayerSource.addFeature(feature);
} }
} }
@ -114,7 +147,7 @@ export default {
const features = []; const features = [];
const feature = new Feature({ const feature = new Feature({
geometry: new Point(item.location), geometry: new Point(item.location),
data: item, data: item.entityId,
type: "carPoint", type: "carPoint",
}); });
// 可以给点位设置样式 // 可以给点位设置样式
@ -130,9 +163,9 @@ export default {
}), }),
}), }),
]); ]);
features.push(feature); this.mapPointFeatures.push(feature);
this.carMapPointSource = new VectorSource({ this.carMapPointSource = new VectorSource({
features, features: this.mapPointFeatures,
}); });
const carMapPointLayer = new VectorLayer({ const carMapPointLayer = new VectorLayer({
source: this.carMapPointSource, source: this.carMapPointSource,
@ -185,6 +218,12 @@ export default {
}); });
}, },
}, },
destroyed() {
this.carPointList = [];
this.mapPointFeatures = [];
this.carMapPointSource = null;
this.defectLayerSource = null;
},
}; };
</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-03 14:10:16 * @LastEditTime: 2024-12-04 09:41:55
* @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: 总览大屏-巡检车辆
--> -->
@ -125,7 +125,10 @@
destroy-on-close destroy-on-close
@close="followCancel" @close="followCancel"
> >
<inspection-follow v-if="followTitle === '跟车详情'"></inspection-follow> <inspection-follow
v-if="followTitle === '跟车详情'"
:dialogItem="dialogItem"
></inspection-follow>
</el-dialog> </el-dialog>
<!-- 视频弹窗 --> <!-- 视频弹窗 -->
@ -235,6 +238,7 @@ export default {
followCar(val) { followCar(val) {
this.followTitle = "跟车详情"; this.followTitle = "跟车详情";
this.showCarVisible = true; this.showCarVisible = true;
this.dialogItem = val;
const carData = { type: "carLocation", status: true }; const carData = { type: "carLocation", status: true };
const defectData = { type: "defect", status: true }; const defectData = { type: "defect", status: true };
this.$ws.send(carData); this.$ws.send(carData);
@ -278,7 +282,6 @@ export default {
this.showViewVisible = false; this.showViewVisible = false;
closeVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => { closeVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
if (code === 200) { if (code === 200) {
console.log(data);
this.dialogItem = {}; this.dialogItem = {};
} }
}); });

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

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