车辆任务名称

src/api/yunkun/index.js

@@ -32,3 +32,20 @@ export function getSearchCityCount() {
     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,
+  });
+}

src/assets/styles/map.scss

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

src/views/car.vue

@@ -54,7 +54,7 @@
 
 <script>
 import MarsMap from "@/components/mars-map";
-
+import { getfindByPlateNums } from "@/api/yunkun/index.js";
 import { getCarPoint, getCarByCarplate } from "@/api/yunkun/yunkun.js";
 import { adjustCanvasSize, changeBorderColor } from "@/utils/carCanvas.js";
 
@@ -108,7 +108,7 @@ export default {
           {
             name: "影像地图",
             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,
             maximumLevel: 16,
             show: true,
@@ -147,14 +147,45 @@ export default {
   },
   methods: {
     /**获取车辆接口 */
-    async carPoint() {
+    async carPoint(isBoole) {
       let res = await getCarPoint(this.carQuery);
-      // console.log(res.list);
-      // res.list = res.list.filter(
-      //   (item) =>
-      //     item.carPlate.includes("苏E") ||
-      //     (item.carPlate.includes("苏U") && item.stateCn.includes("在线-行驶"))
-      // );
+      res.list = res.list.filter((item) => item.stateCn.includes("在线"));
+      if (isBoole) {
+        let carPlates = res.list.map((item) => item.carPlate).toString();
+        let mission = await getfindByPlateNums({
+          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;
     },
 
@@ -199,7 +230,8 @@ export default {
     },
     /**创建车辆 */
     async createCar(type) {
-      this.list = await this.carPoint();
+      this.list = await this.carPoint(true);
+
       this.mapLayer.car.clear();
       this.mapLayer.car.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
       for (let index = 0; index < this.list.length; index++) {
@@ -214,7 +246,7 @@ export default {
           style: {
             url: this.carUrl,
             scale: 0.5,
-            minimumPixelSize: 30,
+            minimumPixelSize: 35,
             silhouette: true,
             silhouetteColor: "#008cff",
             pitch: 0, //俯仰角
@@ -237,15 +269,17 @@ export default {
           },
           attr: {
             index: item.carId,
+            missionType: item.missionType,
           },
         });
+        console.log(item.missionType, "类型");
         this.mapLayer.car.addGraphic(graphic);
         this.mapLayer.car.enabledEvent = true; // 恢复事件
         graphic.bindPopup(
           () => {
             let html = `<div id="car${item.carId}" class="carPlate">
-              <img src="${require(`../assets/images/carType${1}.png`)}" class="carType"/>
-            ${item.carPlate}
+              <img src="${require(`../assets/images/carType${item.missionType}.png`)}" class="carType"/>
+            ${item.missionName}
             </div>`;
             return html;
           },
@@ -260,6 +294,7 @@ export default {
         );
         graphic.openPopup();
         graphic.on(mars3d.EventType.highlightOpen, (e) => {
+          console.log(e.target.attr, "ssss");
           e.target.setOptions({
             //添加圆效果
             circle: {
@@ -269,7 +304,7 @@ export default {
           this.handleCarActive({
             id: e.target._id,
             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) => {
@@ -281,7 +316,7 @@ export default {
           this.handleCarActive({
             id: e.target._id,
             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为演示）
       this.changePosition(0);
-      const interval = 15;
+      // const interval = 15;
       // this.changePosition(interval);
       // this.time = setInterval(() => {
       //   this.changePosition(interval);
@@ -312,6 +347,7 @@ export default {
     async changePosition(interval) {
       let list = await this.carPoint();
       this.mapLayer.car.eachGraphic((graphic) => {
+        if (!graphic.show) return;
         let carItam = list.filter((car) => `car${car.carId}` == graphic.id);
         if (carItam.length > 0) {
           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 {
         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) {
       // 检查某个项是否被选中

src/views/carInfo.vue

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

src/views/index.vue

@@ -46,7 +46,7 @@ export default {
           {
             name: "影像地图",
             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,
             maximumLevel: 16,
             show: true,