物资点

src/views/home/index.vue

@@ -176,6 +176,7 @@
       <goodsbox
         :endLngLat="endLngLat"
         :firePopup = 'firePopupClosed'
+        :visible = 'goodsVisible'
         @close="goodsVisible = false"
       ></goodsbox>
     </div>
@@ -699,8 +700,9 @@ export default {
                               </div>
                               <div class="data-li">
                                   <div class="data-value">
-                                      <span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" title="中间状态">附近人员</span>
+                                      <span id="lablSBZT1" onclick="renyuan([${item.lng},${item.lat}]);" class="label-tag data-value-status-1" >附近人员</span>
-                                      <span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])"  class="label-tag data-value-status-2" title="附近水源">附近水源</span>
+                                      <span id="lablCSFM2" onclick="shuiyuan([${item.lng},${item.lat}])"  class="label-tag data-value-status-2" >附近水源</span>
+                                      <span id="lablCSFM2" onclick="wuzi([${item.lng},${item.lat}])"  class="label-tag data-value-status-2" >周边物资</span>
                                       <span id="lablCSFM2" onclick="delFirePoint(${item.id})"  class="label-tag data-value-status-3" title="删除火点">删除火点</span>
                                   </div>
                               </div>
@@ -745,7 +747,7 @@ export default {
     // 物资
     wuzi(item) {
       this.endLngLat = item;
-      this.goodsVisible = !this.goodsVisible;
+      this.goodsVisible = true;
     },
     // 监控
     jiankong(e) {

src/views/home/widget/goodsbox.vue

@@ -42,8 +42,10 @@
                 <span style="color: #35cf8c" class="fz-16 mr-2">{{
                   item.street
                 }}</span>
-                <span class="fz-14 mr-2">类型：{{ item.name }}</span>
+                <span class="fz-14 mr-2" style="font-weight: bold">{{
-                <span class="mr-2">距离：{{ item.distance }}km</span>
+                  item.name
+                }}</span>
+                <span class="mr-2">{{ item.distance }}km</span>
                 <span style="color: #cee800"
                   >预计到达时间：{{ item.time }}分钟</span
                 >
@@ -73,7 +75,7 @@ import { getMethodCommon } from "../../../api/common";
 const areaName = localStorage.getItem("areaName");
 export default {
   name: "monitorbox",
-  props: ["endLngLat",'firePopup'],
+  props: ["endLngLat", "firePopup", "visible"],
   data() {
     return {
       startLngLat: null,
@@ -102,6 +104,14 @@ export default {
         }
       },
     },
+    visible: {
+      handler(newVal, oldVal) {
+        console.log('newVal: ', newVal);
+        if (newVal == false) {
+          this.close();
+        }
+      },
+    },
   },
   created() {
     this.getWuziList();
@@ -162,11 +172,22 @@ export default {
     getWuziList() {
       getMethodCommon("/FirePrevention/Loadwuzichubei", this.listQuery).then(
         (res) => {
+          if (!res.data.length) {
+            this.goodsGraphicLayerArr.forEach((item) => {
+              this.goodsGraphicLayer.removeGraphic(item);
+            });
+            if (this.pathPointGraphicLayer) {
+              this.pathPointGraphicLayer.clear();
+            }
+          } else {
             this.goodsListData = res.data;
-          this.getNestPoint(this.endLngLat[0], this.endLngLat[1]).then(wz=>{
+            this.getNestPoint(this.endLngLat[0], this.endLngLat[1]).then(
-            this.nestWuziPoints = wz
+              (wz) => {
+                this.nestWuziPoints = wz;
                 this.radioChange();
-          })
+              }
+            );
+          }
         }
       );
     },
@@ -175,7 +196,7 @@ export default {
       let from = turf.point([lng, lat]);
       let nestWuziPoints = [];
       await this.goodsListData.forEach((item, index) => {
-        let geom = parse(item.geom)
+        let geom = parse(item.geom);
         let to = turf.point(geom.coordinates);
         let options = { units: "kilometers" };
         let distance = turf.distance(from, to, options);
@@ -184,20 +205,25 @@ export default {
           distance: distance.toFixed(2),
           time: this.getAroundTime(distance.toFixed(2) * 60 + 5 * 60),
           info: item.info,
+          name: item.name,
         };
         nestWuziPoints.push(obj);
       });
       nestWuziPoints.sort((a, b) => {
         return a.distance - b.distance;
       });
-      return nestWuziPoints
+      return nestWuziPoints;
     },
     //估算时间   平均60km/h
     getAroundTime(a) {
       var h = parseInt(a / 3600);
       var m = parseInt((a % 3600) / 60);
       var s = parseInt((a % 3600) % 60);
+      if (h > 0) {
         return h + "小时" + m + "分" + s + "秒";
+      } else {
+        return m + "分" + s + "秒";
+      }
     },
     flyToPosition(item) {
       this.startLngLat = item.lngLat;
@@ -222,7 +248,7 @@ export default {
           if (LineString == null || LineString == "null") {
             this.$message({
               type: "warning",
-              message: "距离太近，没有找到合适的路线",
+              message: "没有找到合适的路线",
             });
             if (this.pathPointGraphicLayer) {
               this.pathPointGraphicLayer.clear();
@@ -345,50 +371,21 @@ export default {
       });
     },
     addGoodsLayer() {
-      this.goodsGraphicLayerArr.forEach((item) => {
-        this.goodsGraphicLayer.removeGraphic(item);
-      });
-      this.goodsGraphicLayerArr = [];
-
       if (this.goodsGraphicLayer == null) {
         this.goodsGraphicLayer = new mars3d.layer.GraphicLayer();
         window.globalmap.addLayer(this.goodsGraphicLayer);
       }
+
+      this.goodsGraphicLayerArr.forEach((graphic) => {
+        this.goodsGraphicLayer.removeGraphic(graphic);
+      });
+      this.goodsGraphicLayerArr = [];
       this.goodsListData.forEach((item, index) => {
-        let graphic = new mars3d.graphic.DivGraphic({
+        let graphic = new mars3d.graphic.BillboardEntity({
-          position: parse(item.geom).coordinates,
+          position: [item.lngLat[0], item.lngLat[1]],
           style: {
-            html: `<div class="marsTiltPanel marsTiltPanel-theme-blue" style="width:300px;">
+            image: "img/wuzichubei.png",
-                            <div class="marsTiltPanel-wrap">
+            scale:0.7,
-                                <div class="area">
-                                    <div class="arrow-lt"></div>
-                                    <div class="b-t"></div>
-                                    <div class="b-r"></div>
-                                    <div class="b-b"></div>
-                                    <div class="b-l"></div>
-                                    <div class="arrow-rb"></div>
-                                    <div class="label-wrap">
-                                        <div class="title">${item.name}</div>
-                                        <div class="label-content">
-                                            <div class="data-li">
-                                                <div class="data-label">归属信息：</div>
-                                                <div class="data-value"><span class="label-num">${item.street}
-                                                </div>
-                                            </div>
-                                            <div class="data-li">
-                                                <div class="data-label">物资信息：</div>
-                                                <div class="data-value"><span class="label-num">
-                                                ${item.info}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="b-t-l"></div>
-                                <div class="b-b-r"></div>
-                            </div>
-                            <div class="arrow" ></div>
-                        </div>`,
             horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
             distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
@@ -398,12 +395,12 @@ export default {
             scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
             clampToGround: true,
           },
-          pointerEvents: true,
+          pointerEvents: false,
         });
-
-        this.goodsGraphicLayer.addGraphic(graphic);
         this.goodsGraphicLayerArr.push(graphic);
+        this.goodsGraphicLayer.addGraphic(graphic);
       });
+      window.globalmap.addLayer(this.goodsGraphicLayer);
     },
   },
 };