127 lines
3.0 KiB
Vue
127 lines
3.0 KiB
Vue
|
<!--
|
||
|
|
* @Author: SunTao 328867980@qq.com
|
||
|
|
* @Date: 2024-11-15 13:14:03
|
||
|
|
* @LastEditors: SunTao 328867980@qq.com
|
||
|
|
* @LastEditTime: 2024-11-15 14:06:48
|
||
|
|
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
|
||
|
|
* @Description: 总览大屏-巡检车辆-跟车弹窗
|
||
|
|
-->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="inspection-content">
|
||
|
|
<fssm-map ref="carMap" :baseMap="'img_c'"></fssm-map>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<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";
|
||
|
|
import { Feature } from "ol";
|
||
|
|
import { Style, Icon } from "ol/style";
|
||
|
|
import VectorSource from "ol/source/Vector";
|
||
|
|
import VectorLayer from "ol/layer/Vector";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "InspectionFollow",
|
||
|
|
components: {
|
||
|
|
FssmMap,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.initWebSocket();
|
||
|
|
},
|
||
|
|
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();
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
/* 发送消息 */
|
||
|
|
sendMsg() {
|
||
|
|
sendMsg(5555); //value是发送的值
|
||
|
|
// this.value = "";
|
||
|
|
},
|
||
|
|
|
||
|
|
/* 绘制地图车点位 */
|
||
|
|
drawPoint() {
|
||
|
|
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",
|
||
|
|
});
|
||
|
|
// 可以给点位设置样式
|
||
|
|
feature.setStyle([
|
||
|
|
new Style({
|
||
|
|
image: new Icon({
|
||
|
|
crossOrigin: "anonymous",
|
||
|
|
src: logo,
|
||
|
|
// 图标缩放比例
|
||
|
|
scale: 0.05,
|
||
|
|
}),
|
||
|
|
}),
|
||
|
|
]);
|
||
|
|
features.push(feature);
|
||
|
|
//设置地图的数据源
|
||
|
|
const pointSource = new VectorSource({
|
||
|
|
features,
|
||
|
|
});
|
||
|
|
let markLayerPoints = new VectorLayer({
|
||
|
|
source: pointSource,
|
||
|
|
properties: {
|
||
|
|
type: "point",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
this.$nextTick(() => {
|
||
|
|
const map = this.$refs.carMap.instance.get("map");
|
||
|
|
map.addLayer(markLayerPoints);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
closeWebsocket();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.inspection-content {
|
||
|
|
width: 100%;
|
||
|
|
height: 45rem;
|
||
|
|
|
||
|
|
::v-deep .baseLayerClass {
|
||
|
|
filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
|
||
|
|
brightness(80%) saturate(550%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|