suzhou-jichuang-lanhai
/
yunkunMap
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

车辆任务名称

Browse Source
main
许宏杰 7 months ago
parent 504e8403f1
commit d1c75bf9e9
5 changed files with 107 additions and 35 deletions
Show Stats Download Patch File Download Diff File

17
src/api/yunkun/index.js
Unescape View File

@ -32,3 +32,20 @@ export function getSearchCityCount() {
method: "get", method: "get",
}); });
} }
// 根据车牌查任务名称
export function getfindByPlateNum(query) {
return request({
url: "/ykmap/taskMission/findByPlateNum",
method: "get",
params: query,
});
}
export function getfindByPlateNums(query) {
return request({
url: "/ykmap/taskMission/findByPlateNums",
method: "get",
params: query,
});
}

4
src/assets/styles/map.scss
Unescape View File

@ -233,6 +233,10 @@
padding: 2px 10px; padding: 2px 10px;
font-size: 14px; font-size: 14px;
padding-left: 30px; padding-left: 30px;
max-width: 200px;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 使用省略号 */
.carType { .carType {
position: absolute; position: absolute;
left: 0; left: 0;

98
src/views/car.vue
Unescape View File

@ -54,7 +54,7 @@
<script> <script>
import MarsMap from "@/components/mars-map"; import MarsMap from "@/components/mars-map";
import { getfindByPlateNums } from "@/api/yunkun/index.js";
import { getCarPoint, getCarByCarplate } from "@/api/yunkun/yunkun.js"; import { getCarPoint, getCarByCarplate } from "@/api/yunkun/yunkun.js";
import { adjustCanvasSize, changeBorderColor } from "@/utils/carCanvas.js"; import { adjustCanvasSize, changeBorderColor } from "@/utils/carCanvas.js";
@ -108,7 +108,7 @@ export default {
{ {
name: "影像地图", name: "影像地图",
type: "xyz", type: "xyz",
url: process.env.VUE_APP_BASE_API2 + "/map/{z}/{y}/{x}.png", url: process.env.VUE_APP_BASE_API2 + "/{z}/{y}/{x}.png",
minimumLevel: 1, minimumLevel: 1,
maximumLevel: 16, maximumLevel: 16,
show: true, show: true,
@ -147,14 +147,45 @@ export default {
}, },
methods: { methods: {
/**获取车辆接口 */ /**获取车辆接口 */
async carPoint() { async carPoint(isBoole) {
let res = await getCarPoint(this.carQuery); let res = await getCarPoint(this.carQuery);
// console.log(res.list); res.list = res.list.filter((item) => item.stateCn.includes("在线"));
// res.list = res.list.filter( if (isBoole) {
// (item) => let carPlates = res.list.map((item) => item.carPlate).toString();
// item.carPlate.includes("苏E") || let mission = await getfindByPlateNums({
// (item.carPlate.includes("苏U") && item.stateCn.includes("在线-行驶")) plateNum: carPlates,
// ); });
res.list = res.list.map((item) => {
let missionItem = mission.data.filter(
(it) => it.plateNum == item.carPlate
);
if (missionItem.length > 0) {
let missionType = 1;
if (missionItem[0].missionType == "临时任务") {
missionType = 3;
} else {
missionType = missionItem[0].name.includes("维护") ? 2 : 1;
}
item = {
...item,
...{
missionName: missionItem[0].name,
missionType: missionType,
},
};
} else {
item = {
...item,
...{
missionName: "未识别",
missionType: 1,
},
};
}
return item;
});
}
return res.list; return res.list;
}, },
@ -199,7 +230,8 @@ export default {
}, },
/**创建车辆 */ /**创建车辆 */
async createCar(type) { async createCar(type) {
this.list = await this.carPoint(); this.list = await this.carPoint(true);
this.mapLayer.car.clear(); this.mapLayer.car.clear();
this.mapLayer.car.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间 this.mapLayer.car.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
for (let index = 0; index < this.list.length; index++) { for (let index = 0; index < this.list.length; index++) {
@ -214,7 +246,7 @@ export default {
style: { style: {
url: this.carUrl, url: this.carUrl,
scale: 0.5, scale: 0.5,
minimumPixelSize: 30, minimumPixelSize: 35,
silhouette: true, silhouette: true,
silhouetteColor: "#008cff", silhouetteColor: "#008cff",
pitch: 0, //俯仰角 pitch: 0, //俯仰角
@ -237,15 +269,17 @@ export default {
}, },
attr: { attr: {
index: item.carId, index: item.carId,
missionType: item.missionType,
}, },
}); });
console.log(item.missionType, "类型");
this.mapLayer.car.addGraphic(graphic); this.mapLayer.car.addGraphic(graphic);
this.mapLayer.car.enabledEvent = true; // 恢复事件 this.mapLayer.car.enabledEvent = true; // 恢复事件
graphic.bindPopup( graphic.bindPopup(
() => { () => {
let html = `<div id="car${item.carId}" class="carPlate"> let html = `<div id="car${item.carId}" class="carPlate">
<img src="${require(`../assets/images/carType${1}.png`)}" class="carType"/> <img src="${require(`../assets/images/carType${item.missionType}.png`)}" class="carType"/>
${item.carPlate} ${item.missionName}
</div>`; </div>`;
return html; return html;
}, },
@ -260,6 +294,7 @@ export default {
); );
graphic.openPopup(); graphic.openPopup();
graphic.on(mars3d.EventType.highlightOpen, (e) => { graphic.on(mars3d.EventType.highlightOpen, (e) => {
console.log(e.target.attr, "ssss");
e.target.setOptions({ e.target.setOptions({
//添加圆效果 //添加圆效果
circle: { circle: {
@ -269,7 +304,7 @@ export default {
this.handleCarActive({ this.handleCarActive({
id: e.target._id, id: e.target._id,
color: "#FFB200", color: "#FFB200",
image: require(`../assets/images/carType1-s.png`), image: require(`../assets/images/carType${e.target.attr.missionType}-s.png`),
}); });
}); });
graphic.on(mars3d.EventType.highlightClose, (e) => { graphic.on(mars3d.EventType.highlightClose, (e) => {
@ -281,7 +316,7 @@ export default {
this.handleCarActive({ this.handleCarActive({
id: e.target._id, id: e.target._id,
color: "#008cff", color: "#008cff",
image: require(`../assets/images/carType1.png`), image: require(`../assets/images/carType${e.target.attr.missionType}.png`),
}); });
}); });
@ -302,7 +337,7 @@ export default {
} }
// 定时更新动态位置（setInterval为演示） // 定时更新动态位置（setInterval为演示）
this.changePosition(0); this.changePosition(0);
const interval = 15; // const interval = 15;
// this.changePosition(interval); // this.changePosition(interval);
// this.time = setInterval(() => { // this.time = setInterval(() => {
// this.changePosition(interval); // this.changePosition(interval);
@ -312,6 +347,7 @@ export default {
async changePosition(interval) { async changePosition(interval) {
let list = await this.carPoint(); let list = await this.carPoint();
this.mapLayer.car.eachGraphic((graphic) => { this.mapLayer.car.eachGraphic((graphic) => {
if (!graphic.show) return;
let carItam = list.filter((car) => `car${car.carId}` == graphic.id); let carItam = list.filter((car) => `car${car.carId}` == graphic.id);
if (carItam.length > 0) { if (carItam.length > 0) {
let position = Cesium.Cartesian3.fromDegrees( let position = Cesium.Cartesian3.fromDegrees(
@ -323,14 +359,6 @@ export default {
} }
}); });
}, },
// randomPoint() {
// const jd = this.random(120.2 * 1000, 120.9 * 1000) / 1000;
// const wd = this.random(30.9 * 1000, 31.6 * 1000) / 1000;
// return Cesium.Cartesian3.fromDegrees(jd, wd, 30);
// },
// random(min, max) {
// return Math.floor(Math.random() * (max - min + 1) + min);
// },
/** /**
* 处理车辆被选中 * 处理车辆被选中
@ -400,6 +428,28 @@ export default {
} else { } else {
this.selectedItems.push(item); this.selectedItems.push(item);
} }
if (this.selectedItems.length > 0) {
this.selectedItems.forEach((item) => {
let type = item == "营运线路" ? 1 : item == "维护线路" ? 2 : 3;
this.mapLayer.car.eachGraphic((graphic) => {
if (graphic.attr.missionType == type) {
graphic.show = false;
graphic.closePopup();
} else {
if (graphic.show) return;
graphic.show = true;
graphic.openPopup();
}
});
});
} else {
this.mapLayer.car.eachGraphic((graphic) => {
if (graphic.show) return;
graphic.show = true;
graphic.openPopup();
});
}
}, },
isSelected(item) { isSelected(item) {
// 检查某个项是否被选中 // 检查某个项是否被选中

21
src/views/carInfo.vue
Unescape View File

@ -17,21 +17,23 @@
<i class="el-icon-back"></i> 返回 <i class="el-icon-back"></i> 返回
</div> </div>
<mars-map @mapLoad="mapLoad" :options="options"></mars-map> <mars-map @mapLoad="mapLoad" :options="options"></mars-map>
<!-- <div class="video-list"> <div class="video-list">
<grids></grids> <!-- <grids></grids> -->
</div> --> </div>
</div> </div>
</template> </template>
<script> <script>
import MarsMap from "@/components/mars-map"; import MarsMap from "@/components/mars-map";
import grids from "@/components/grids.vue"; import grids from "@/components/grids.vue";
import { getfindByPlateNum } from "@/api/yunkun/index.js";
import { getCarIdInfo } from "@/api/yunkun/index.js"; import { getCarIdInfo } from "@/api/yunkun/index.js";
import { historyLine, carMidle, getCarPoint } from "@/api/yunkun/yunkun.js"; import { historyLine, carMidle, getCarPoint } from "@/api/yunkun/yunkun.js";
export default { export default {
data() { data() {
const basePathUrl = window.basePathUrl || ""; const basePathUrl = window.basePathUrl || "";
return { return {
missionId: null, //任务id
mileData: { mileData: {
mile: "", //已经行驶多少里程 mile: "", //已经行驶多少里程
}, },
@ -60,7 +62,7 @@ export default {
{ {
name: "影像地图", name: "影像地图",
type: "xyz", type: "xyz",
url: process.env.VUE_APP_BASE_API2 + "/map/{z}/{y}/{x}.png", url: process.env.VUE_APP_BASE_API2 + "/{z}/{y}/{x}.png",
minimumLevel: 1, minimumLevel: 1,
maximumLevel: 16, maximumLevel: 16,
show: true, show: true,
@ -85,11 +87,12 @@ export default {
}, },
components: { MarsMap, grids }, components: { MarsMap, grids },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer);
this.mapLayer.car.remove(); this.mapLayer.car.remove();
this.mapLayer.car = null; this.mapLayer.car = null;
}, },
created() { created() {
console.log(process.env.VUE_APP_BASE_API, "ssssss"); this.missionId = this.$route.query.missionId;
const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted(true); const { startOfDay, endOfDay } = this.getStartAndEndOfDayFormatted(true);
this.queryParams = { this.queryParams = {
carId: this.$route.query.carId, carId: this.$route.query.carId,
@ -97,9 +100,7 @@ export default {
endTime: endOfDay, endTime: endOfDay,
}; };
}, },
beforeDestroy() {
clearInterval(this.timer);
},
methods: { methods: {
/**地图渲染完毕 */ /**地图渲染完毕 */
mapLoad(map) { mapLoad(map) {
@ -186,7 +187,7 @@ export default {
}, },
//创建实时车辆漫游 //创建实时车辆漫游
createCar() { async createCar() {
const car = new mars3d.graphic.FixedRoute({ const car = new mars3d.graphic.FixedRoute({
id: this.queryParams.carId, id: this.queryParams.carId,
name: "漫游对象", name: "漫游对象",
@ -226,7 +227,7 @@ export default {
}, },
}); });
this.mapLayer.car.addGraphic(car); this.mapLayer.car.addGraphic(car);
// let res = await getCarIdInfo("1328CC51-C858-4FFA-8714-4F354BB49CF8"); // let res = await getCarIdInfo("4289f2c2ea0d4d7cb5853e6d4095918d");
// this.bindPopup(car, res.data); // this.bindPopup(car, res.data);
// car.openPopup(); // car.openPopup();
// car.start(); // car.start();

2
src/views/index.vue
Unescape View File

@ -46,7 +46,7 @@ export default {
{ {
name: "影像地图", name: "影像地图",
type: "xyz", type: "xyz",
url: process.env.VUE_APP_BASE_API2 + "/map/{z}/{y}/{x}.png", url: process.env.VUE_APP_BASE_API2 + "/{z}/{y}/{x}.png",
minimumLevel: 1, minimumLevel: 1,
maximumLevel: 16, maximumLevel: 16,
show: true, show: true,

Write Preview
Loading…
Cancel
Save