|
|
|
|
@ -56,12 +56,14 @@
|
|
|
|
|
import MarsMap from "@/components/mars-map";
|
|
|
|
|
import { getfindByPlateNums } from "@/api/yunkun/index.js";
|
|
|
|
|
import { getCarPoint, getCarByCarplate } from "@/api/yunkun/yunkun.js";
|
|
|
|
|
import { html } from "js-beautify";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
const basePathUrl = window.basePathUrl || "";
|
|
|
|
|
return {
|
|
|
|
|
timer: null,
|
|
|
|
|
time2: null,
|
|
|
|
|
searchList: [],
|
|
|
|
|
searchText: "",
|
|
|
|
|
searchQuery: {
|
|
|
|
|
@ -73,8 +75,8 @@ export default {
|
|
|
|
|
carIds: "", //车辆id 多个用逗号分开，优先级低于teamId
|
|
|
|
|
},
|
|
|
|
|
list: [],
|
|
|
|
|
multipleList: ["营运线路", "维护线路", "临时任务"],
|
|
|
|
|
selectedItems: [],
|
|
|
|
|
multipleList: ["营运线路", "维护线路", "临时任务", "枪支定位"],
|
|
|
|
|
selectedItems: ["枪支定位"],
|
|
|
|
|
graphicLayer: null,
|
|
|
|
|
baseUrl: basePathUrl + "lib/geoJson/tileset.json",
|
|
|
|
|
carUrl: basePathUrl + "static/qiche.gltf",
|
|
|
|
|
@ -138,7 +140,9 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
components: { MarsMap },
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
clearInterval(this.timer);
|
|
|
|
|
if (this.time) clearInterval(this.timer);
|
|
|
|
|
|
|
|
|
|
if (this.time2) clearInterval(this.time2);
|
|
|
|
|
// 在组件销毁之前移除事件监听，防止内存泄漏
|
|
|
|
|
document.removeEventListener("click", this.handleClickOutside);
|
|
|
|
|
this.mapLayer.car.remove();
|
|
|
|
|
@ -242,6 +246,10 @@ export default {
|
|
|
|
|
// 创建矢量图层
|
|
|
|
|
this.mapLayer.car = new mars3d.layer.GraphicLayer();
|
|
|
|
|
this.map.addLayer(this.mapLayer.car);
|
|
|
|
|
|
|
|
|
|
this.mapLayer.qiang = new mars3d.layer.GraphicLayer();
|
|
|
|
|
this.map.addLayer(this.mapLayer.qiang);
|
|
|
|
|
|
|
|
|
|
this.createCar();
|
|
|
|
|
},
|
|
|
|
|
/**创建车辆 苏E17360*/
|
|
|
|
|
@ -270,7 +278,7 @@ export default {
|
|
|
|
|
pitch: 0, //俯仰角
|
|
|
|
|
roll: 0, //翻滚角
|
|
|
|
|
highlight: {
|
|
|
|
|
type: "click",
|
|
|
|
|
// type: "click",
|
|
|
|
|
silhouette: true,
|
|
|
|
|
silhouetteColor: "#FFB200",
|
|
|
|
|
},
|
|
|
|
|
@ -369,11 +377,10 @@ export default {
|
|
|
|
|
this.changePosition(interval);
|
|
|
|
|
|
|
|
|
|
//生产环境开启轮询
|
|
|
|
|
if (process.env.NODE_ENV === "production") {
|
|
|
|
|
this.time = setInterval(() => {
|
|
|
|
|
this.changePosition(interval);
|
|
|
|
|
}, interval * 1000);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.time = setInterval(() => {
|
|
|
|
|
this.changePosition(interval);
|
|
|
|
|
}, interval * 1000);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async changePosition(interval) {
|
|
|
|
|
@ -392,6 +399,65 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async getPoint() {
|
|
|
|
|
let res = await getCarPoint({
|
|
|
|
|
teamId: 3,
|
|
|
|
|
});
|
|
|
|
|
res.list = res.list.filter((item) => item.stateCn.includes("在线"));
|
|
|
|
|
return res.list;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async createQ() {
|
|
|
|
|
const list = await this.getPoint();
|
|
|
|
|
this.mapLayer.qiang.clear();
|
|
|
|
|
this.mapLayer.qiang.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
|
|
|
|
|
list.map((item, index) => {
|
|
|
|
|
const graphic = new mars3d.graphic.DivGraphic({
|
|
|
|
|
id: `qIcon${item.carId}`,
|
|
|
|
|
position: new mars3d.LngLatPoint(
|
|
|
|
|
parseFloat(item.lng),
|
|
|
|
|
parseFloat(item.lat)
|
|
|
|
|
),
|
|
|
|
|
style: {
|
|
|
|
|
html: `
|
|
|
|
|
<div class="q-icon">
|
|
|
|
|
<div class="qiang-popup"> ${item.carName}</div>
|
|
|
|
|
<img src="${require("../assets/images/qiangIcon.png")}" />
|
|
|
|
|
</div>
|
|
|
|
|
`,
|
|
|
|
|
|
|
|
|
|
clampToGround: true,
|
|
|
|
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
|
|
|
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
this.mapLayer.qiang.addGraphic(graphic);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// this.changeQPosition(0);
|
|
|
|
|
const interval = 10;
|
|
|
|
|
this.changeQPosition(interval);
|
|
|
|
|
|
|
|
|
|
this.time2 = setInterval(() => {
|
|
|
|
|
this.changeQPosition(interval);
|
|
|
|
|
}, interval * 1000);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async changeQPosition(interval) {
|
|
|
|
|
let list = await this.getPoint();
|
|
|
|
|
this.mapLayer.qiang.eachGraphic((graphic) => {
|
|
|
|
|
let qIcon = list.filter((car) => `qIcon${car.carId}` == graphic.id);
|
|
|
|
|
if (qIcon.length > 0) {
|
|
|
|
|
let position = Cesium.Cartesian3.fromDegrees(
|
|
|
|
|
parseFloat(qIcon[0].lng),
|
|
|
|
|
parseFloat(qIcon[0].lat),
|
|
|
|
|
30
|
|
|
|
|
);
|
|
|
|
|
graphic.addDynamicPosition(position, interval); // 按time秒运动至指定位置
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 处理车辆被选中
|
|
|
|
|
*/
|
|
|
|
|
@ -466,7 +532,16 @@ export default {
|
|
|
|
|
} else {
|
|
|
|
|
this.selectedItems.push(item);
|
|
|
|
|
}
|
|
|
|
|
const active = this.selectedItems.toString();
|
|
|
|
|
if (this.time2) clearInterval(this.time2);
|
|
|
|
|
|
|
|
|
|
if (!active.includes("枪支")) {
|
|
|
|
|
//渲染枪支图标
|
|
|
|
|
this.createQ();
|
|
|
|
|
} else {
|
|
|
|
|
//清除枪支
|
|
|
|
|
this.mapLayer.qiang.clear();
|
|
|
|
|
}
|
|
|
|
|
if (this.selectedItems.length == 0) {
|
|
|
|
|
this.mapLayer.car.eachGraphic((graphic) => {
|
|
|
|
|
if (graphic.show) return;
|
|
|
|
|
@ -626,7 +701,7 @@ export default {
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
background: url("../assets/images/multipleList.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
padding: 0 220px;
|
|
|
|
|
padding: 0 180px;
|
|
|
|
|
.checkbox {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
width: 112px;
|
|
|
|
|
|
