From a5325e10eb12bb49116543fcd5e8f26503eaa869 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Fri, 18 Oct 2024 09:18:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8D=E6=98=BE=E7=A4=BA=E6=97=A0=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E8=BD=A6=E3=80=81=E4=BB=BB=E5=8A=A1=E6=B0=91=E6=8D=A2?=
 =?UTF-8?q?=E6=88=90=E8=BD=A6=E7=89=8C=E5=8F=B7=E3=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/car.vue | 218 +++++++++++++++++++++++++---------------------
 1 file changed, 117 insertions(+), 101 deletions(-)

diff --git a/src/views/car.vue b/src/views/car.vue
index 4271183..62081ed 100644
--- a/src/views/car.vue
+++ b/src/views/car.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="map-container">
-    <div class="input-search" ref="targetElement">
+    <div class="input-search" id="targetElement">
       <div class="search-box">
         <input
           type="text"
@@ -150,6 +150,16 @@ export default {
     document.addEventListener("click", this.handleClickOutside);
   },
   methods: {
+    // 搜索下拉框控制
+    handleClickOutside(event) {
+      if (
+        this.show &&
+        !document.getElementById("targetElement").contains(event.target)
+      ) {
+        this.show = false;
+      }
+    },
+
     /**获取车辆接口 */
     async carPoint(isBoole) {
       let res = await getCarPoint(this.carQuery);
@@ -242,122 +252,128 @@ export default {
       this.mapLayer.car.enabledEvent = false; // 关闭事件，大数据addGraphic时影响加载时间
       for (let index = 0; index < this.list.length; index++) {
         let item = this.list[index];
-        const graphic = new mars3d.graphic.ModelEntity({
-          id: `car${item.carId}`,
-          // position: new mars3d.LngLatPoint(
-          //   parseFloat(item.lng),
-          //   parseFloat(item.lat),
-          //   30
-          // ),
-          style: {
-            url: this.carUrl,
-            scale: 0.5,
-            minimumPixelSize: 32,
-            silhouette: true,
-            silhouetteColor: "#008cff",
-            pitch: 0, //俯仰角
-            roll: 0, //翻滚角
-            highlight: {
-              type: "click",
+        if (item.missionId) {
+          //只显示有任务的车辆
+          const graphic = new mars3d.graphic.ModelEntity({
+            id: `car${item.carId}`,
+            // position: new mars3d.LngLatPoint(
+            //   parseFloat(item.lng),
+            //   parseFloat(item.lat),
+            //   30
+            // ),
+            style: {
+              url: this.carUrl,
+              scale: 0.5,
+              minimumPixelSize: 32,
               silhouette: true,
-              silhouetteColor: "#FFB200",
-            },
-          },
-          circle: {
-            radius: 200,
-            fill: false,
-            materialType: mars3d.MaterialType.CircleWave,
-            materialOptions: {
-              color: "#FFB200",
-              count: 2,
-              speed: 6,
+              silhouetteColor: "#008cff",
+              pitch: 0, //俯仰角
+              roll: 0, //翻滚角
+              highlight: {
+                type: "click",
+                silhouette: true,
+                silhouetteColor: "#FFB200",
+              },
             },
-          },
-          attr: {
-            index: item.carId,
-            missionId: item.missionId,
-            missionName: item.missionName,
-            missionType: 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${item.missionType}.png`)}" class="carType"/>
-            ${item.missionName}
-            </div>`;
-            return html;
-          },
-          {
-            closeButton: false, //去除关闭按钮
-            className: "car-page-popup",
-            pointerEvents: false, //DIV是否可以鼠标交互，为false时可以穿透操作及缩放地图，但无法进行鼠标交互及触发相关事件。
-            closeOnClick: false, //是否在单击Map地图时，自动关闭当前弹窗
-            autoClose: false, //在打开弹窗时，是否自动关闭之前的弹窗
-            toggle: false, //是否打开状态下再次单击时关闭Popup
-          }
-        );
-        graphic.openPopup();
-        graphic.on(mars3d.EventType.highlightOpen, (e) => {
-          e.target.setOptions({
-            //添加圆效果
             circle: {
-              fill: true,
+              radius: 200,
+              fill: false,
+              materialType: mars3d.MaterialType.CircleWave,
+              materialOptions: {
+                color: "#FFB200",
+                count: 2,
+                speed: 6,
+              },
+            },
+            attr: {
+              index: item.carId,
+              missionId: item.missionId,
+              missionName: item.missionName,
+              missionType: item.missionType,
             },
           });
-          this.handleCarActive({
-            id: e.target._id,
-            color: "#FFB200",
-            image: require(`../assets/images/carType${e.target.attr.missionType}-s.png`),
-          });
-        });
-        graphic.on(mars3d.EventType.highlightClose, (e) => {
-          e.target.setOptions({
-            circle: {
-              fill: false,
+          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${item.missionType}.png`)}" class="carType"/>
+            ${item.carPlate}
+            </div>`;
+              return html;
             },
+            {
+              closeButton: false, //去除关闭按钮
+              className: "car-page-popup",
+              pointerEvents: false, //DIV是否可以鼠标交互，为false时可以穿透操作及缩放地图，但无法进行鼠标交互及触发相关事件。
+              closeOnClick: false, //是否在单击Map地图时，自动关闭当前弹窗
+              autoClose: false, //在打开弹窗时，是否自动关闭之前的弹窗
+              toggle: false, //是否打开状态下再次单击时关闭Popup
+            }
+          );
+          graphic.openPopup();
+          graphic.on(mars3d.EventType.highlightOpen, (e) => {
+            e.target.setOptions({
+              //添加圆效果
+              circle: {
+                fill: true,
+              },
+            });
+            this.handleCarActive({
+              id: e.target._id,
+              color: "#FFB200",
+              image: require(`../assets/images/carType${e.target.attr.missionType}-s.png`),
+            });
           });
-          this.handleCarActive({
-            id: e.target._id,
-            color: "#008cff",
-            image: require(`../assets/images/carType${e.target.attr.missionType}.png`),
+          graphic.on(mars3d.EventType.highlightClose, (e) => {
+            e.target.setOptions({
+              circle: {
+                fill: false,
+              },
+            });
+            this.handleCarActive({
+              id: e.target._id,
+              color: "#008cff",
+              image: require(`../assets/images/carType${e.target.attr.missionType}.png`),
+            });
           });
-        });
 
-        this.$nextTick(() => {
-          if (type) {
-            console.log(type);
-            // 开启高亮
-            graphic.openHighlight();
-          }
-        });
+          this.$nextTick(() => {
+            if (type) {
+              console.log(type);
+              // 开启高亮
+              graphic.openHighlight();
+            }
+          });
 
-        graphic.on(mars3d.EventType.click, (e) => {
-          const attr = e.target.attr;
-          if (!attr.missionId) {
-            this.$modal.msgError("该车辆暂无任务！");
-            return;
-          }
-          this.$router.push({
-            path: "/carInfo",
-            query: {
-              carId: e.target.attr.index,
-              missionId: attr.missionId,
-              missionName: item.missionName,
-            },
+          graphic.on(mars3d.EventType.click, (e) => {
+            const attr = e.target.attr;
+            if (!attr.missionId) {
+              this.$modal.msgError("该车辆暂无任务！");
+              return;
+            }
+            this.$router.push({
+              path: "/carInfo",
+              query: {
+                carId: e.target.attr.index,
+                missionId: attr.missionId,
+                missionName: item.missionName,
+              },
+            });
           });
-        });
+        }
       }
       // 定时更新动态位置（setInterval为演示）
       this.changePosition(0);
       const interval = 10;
       this.changePosition(interval);
-      this.time = setInterval(() => {
-        this.changePosition(interval);
-      }, interval * 1000);
+
+      //生产环境开启轮询
+      if (process.env.NODE_ENV === "production") {
+        this.time = setInterval(() => {
+          this.changePosition(interval);
+        }, interval * 1000);
+      }
     },
 
     async changePosition(interval) {