fix：大屏巡检车辆跟车调试
This commit is contained in:
parent
6503d7f09d
commit
319818bbf3
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-02 10:24:07
|
||||
* @LastEditTime: 2024-12-02 10:47:38
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@ -1239,8 +1239,8 @@ export default {
|
||||
.getCoordinates();
|
||||
const targetLocation = item.data.location;
|
||||
// 计算两点之间的差值
|
||||
const dx = (targetLocation[0] - currentLocation[0]) / 100;
|
||||
const dy = (targetLocation[1] - currentLocation[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秒完成
|
||||
@ -1252,8 +1252,8 @@ export default {
|
||||
}
|
||||
|
||||
// 计算当前帧的位置
|
||||
const x = currentLocation[0] + dx * count;
|
||||
const y = currentLocation[1] + dy * count;
|
||||
const x = currentLocation[0] * 1 + dx * count;
|
||||
const y = currentLocation[1] * 1 + dy * count;
|
||||
|
||||
// 更新小车位置
|
||||
const [features] = this.carMapPointSource.getFeatures();
|
||||
@ -1380,6 +1380,7 @@ export default {
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timeFlag);
|
||||
// 发送停止接收小车位置
|
||||
const data = { type: "carLocation", status: false };
|
||||
this.$ws.send(data);
|
||||
},
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-15 13:14:03
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-15 14:06:48
|
||||
* @LastEditTime: 2024-12-02 10:46:24
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
|
||||
* @Description: 总览大屏-巡检车辆-跟车弹窗
|
||||
-->
|
||||
@ -15,12 +15,6 @@
|
||||
|
||||
<script>
|
||||
// websocket
|
||||
import {
|
||||
connectWebsocket,
|
||||
closeWebsocket,
|
||||
sendMsg,
|
||||
} from "@/plugins/websocket.js";
|
||||
import { getToken } from "@/utils/auth.js";
|
||||
import logo from "@/assets/xc.png";
|
||||
import FssmMap from "@/components/map/fssm-map.vue";
|
||||
import { Point } from "ol/geom";
|
||||
@ -35,50 +29,81 @@ export default {
|
||||
FssmMap,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
// 小车图层数据源
|
||||
carLayerSource: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initWebSocket();
|
||||
this.handleMessage();
|
||||
},
|
||||
methods: {
|
||||
/* 初始化websocket */
|
||||
initWebSocket() {
|
||||
const url = `ws://192.168.1.188:8080/websocket?token=${getToken()}`;
|
||||
const data = { type: "carLocation", status: true };
|
||||
connectWebsocket(
|
||||
url,
|
||||
data,
|
||||
(res) => {
|
||||
// console.log("onWsMessage接收到服务器的数据: ", res);
|
||||
console.log(JSON.parse(res));
|
||||
},
|
||||
(err) => {
|
||||
console.log("断开重连");
|
||||
this.drawPoint();
|
||||
/**
|
||||
* @description: 处理websocket消息
|
||||
* @return {*}
|
||||
*/
|
||||
handleMessage() {
|
||||
this.$ws.on("message", (item) => {
|
||||
if (item.type === "carPosition") {
|
||||
if (!this.carMapPointSource) {
|
||||
this.drawCarMapPoint(item.data);
|
||||
}
|
||||
else {
|
||||
// 获取当前位置和目标位置
|
||||
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;
|
||||
}
|
||||
|
||||
// 计算当前帧的位置
|
||||
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);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
|
||||
/* 发送消息 */
|
||||
sendMsg() {
|
||||
sendMsg(5555); //value是发送的值
|
||||
// this.value = "";
|
||||
},
|
||||
|
||||
/* 绘制地图车点位 */
|
||||
drawPoint() {
|
||||
/**
|
||||
* @description: 绘制小车地图点位
|
||||
* @param {object} item
|
||||
* @return {void}
|
||||
*/
|
||||
drawCarMapPoint(item) {
|
||||
const features = [];
|
||||
// 修改坐标样式
|
||||
const point = new Point([123.30297096718999,41.87942945541742]);
|
||||
const feature = new Feature({
|
||||
geometry: point,
|
||||
data: {
|
||||
iconType: "1",
|
||||
// imageUrl: element.imageUrl,
|
||||
// rect: element.rect,
|
||||
},
|
||||
// 自己设置一个标识
|
||||
type: "icon",
|
||||
geometry: new Point(item.location),
|
||||
data: item,
|
||||
type: "carPoint",
|
||||
});
|
||||
// 可以给点位设置样式
|
||||
feature.setStyle([
|
||||
@ -87,29 +112,27 @@ export default {
|
||||
crossOrigin: "anonymous",
|
||||
src: logo,
|
||||
// 图标缩放比例
|
||||
scale: 0.05,
|
||||
scale: 0.03,
|
||||
// 将角度转换为弧度,并除以180*π
|
||||
rotation: item.direction * (Math.PI / 180),
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
features.push(feature);
|
||||
//设置地图的数据源
|
||||
const pointSource = new VectorSource({
|
||||
this.carMapPointSource = new VectorSource({
|
||||
features,
|
||||
});
|
||||
let markLayerPoints = new VectorLayer({
|
||||
source: pointSource,
|
||||
const carMapPointLayer = new VectorLayer({
|
||||
source: this.carMapPointSource,
|
||||
properties: {
|
||||
type: "point",
|
||||
type: "carPoint",
|
||||
},
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.carMap.instance.get("map");
|
||||
map.addLayer(markLayerPoints);
|
||||
map.addLayer(carMapPointLayer);
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
closeWebsocket();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -79,7 +79,6 @@
|
||||
size="mini"
|
||||
type="text"
|
||||
style="margin-right: 0.6rem"
|
||||
@click="detailDefect(scope.row)"
|
||||
>详情
|
||||
</el-button>
|
||||
</el-popover>
|
||||
@ -151,7 +150,6 @@
|
||||
import { getCarList, closeVideoUrl } from "@/api/xj/screen/disease-screen";
|
||||
import InspectionFollow from "./components/inspection-follow.vue";
|
||||
import InspectionView from "./components/inspection-view.vue";
|
||||
import { closeWebsocket } from "@/plugins/websocket.js";
|
||||
export default {
|
||||
name: "InspectionVehicles",
|
||||
components: {
|
||||
@ -229,13 +227,6 @@ export default {
|
||||
this.getTableData();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 表格详情事件
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
detailDefect(val) {},
|
||||
|
||||
/**
|
||||
* @description: 表格跟车事件
|
||||
* @param {*} val
|
||||
@ -244,6 +235,8 @@ export default {
|
||||
followCar(val) {
|
||||
this.followTitle = "跟车详情";
|
||||
this.showCarVisible = true;
|
||||
const carData = { type: "carLocation", status: true };
|
||||
this.$ws.send(carData);
|
||||
},
|
||||
|
||||
/**
|
||||
@ -266,7 +259,9 @@ export default {
|
||||
this.followTitle = "";
|
||||
this.showCarVisible = false;
|
||||
this.dialogItem = {};
|
||||
closeWebsocket();
|
||||
// 停止接收病害信息
|
||||
const carData = { type: "carLocation", status: false };
|
||||
this.$ws.send(carData);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user