* 优化弹窗展示

+ 地图桩孔状态更新策略

src/components/map/maphandle.js

@@ -69,7 +69,7 @@ export default {
       }
       return [];
     },
-    createLayer(mapIns) {
+    createLayer(mapIns, zIndex = 1) {
       const uid = uuid();
       const layerId = `poly_layer${uid}`;
       const polyLayer = new BDLayers.Lib.Layer.CBVectorLayer(
@@ -81,7 +81,7 @@ export default {
           mapIns.removeLayersById(layerId);
         }
       }
-      mapIns.addCustomLayers(polyLayer, 1);
+      mapIns.addCustomLayers(polyLayer, zIndex);
       return polyLayer;
     },
     clearLayer(layer) {

src/i18n/en.js

@@ -156,6 +156,7 @@ export default {
     "desDepth": "Design Depth",
     "actualDepth": "Actual Depth",
     "pullValue": "Pull",
+    pushValue: "Push",
     "pressure": "Pressure",
     "consStartTime": "Start Time",
     "consEndTime": "End Time",

src/i18n/zh.js

@@ -174,6 +174,7 @@ export default {
     "desDepth": "设计深度",
     "actualDepth": "实际深度",
     "pullValue": "回带量",
+    "pushValue": "送带量",
     "pressure": "灌入压力",
     "consStartTime": "施工开始时间",
     "consEndTime": "施工结束时间",

src/views/cons/screen/PileHoleDetail.vue

@@ -5,7 +5,7 @@
       <i class="el-icon-close" @click="closeDialog" style="margin-left: auto;cursor: pointer"/>
     </div>
     <div class="dialog-content">
-      <el-descriptions :column="2">
+      <el-descriptions :column="2" :colon="false">
         <el-descriptions-item :label="$t('screen.pileNumber')">
           {{
             realtimeIndex.holeNum
@@ -38,14 +38,22 @@
             realtimeIndex.sprayPressure
           }}
         </el-descriptions-item>
+        <el-descriptions-item :label="`${$t('screen.pushValue')} (m)`">
+          {{
+            realtimeIndex.sendSprayVolume
+          }}
+        </el-descriptions-item>
+        <el-descriptions-item :colon="false">
+
+        </el-descriptions-item>
         <el-descriptions-item :label="$t('screen.consStartTime')">
           {{
-            realtimeIndex.startTime || '--'
+            realtimeIndex.indexStartTime || '--'
           }}
         </el-descriptions-item>
         <el-descriptions-item :label="$t('screen.consEndTime')">
           {{
-            realtimeIndex.endTime || '--'
+            realtimeIndex.indexEndTime || '--'
           }}
         </el-descriptions-item>
       </el-descriptions>

src/views/cons/screen/index.vue

@@ -119,6 +119,7 @@ import pileMachine from "./img/pile-machine.svg"
 import {MachineStatus, PileHoleStatus} from "@/utils/EnumConst";
 import ComponentHandle from "@/utils/ComponentHandle"
 
+const gemoCache = {}
 export default {
   components: {
     PileHoleDetail,
@@ -178,6 +179,7 @@ export default {
       machineLatextIndex: {},
       pileHoleList: [],
       pileHoleLayer: null,
+      geoms: [],
       machineStatusCnt: {},
       onlineMachine: [],
       hisClickGeom: null,
@@ -222,13 +224,15 @@ export default {
             ],
           },
         ],
-      }
+      },
+      timer: null,
     };
   },
   // 组件卸载前清空图层信息
   beforeDestroy() {
     this.destroyLayer(this.pileHoleLayer.cust.layerId, this.mapIns)
     this.destroyLayer(this.pileMachineLayer.cust.layerId, this.mapIns)
+    this.timer && clearInterval(this.timer)
   },
   created() {
 
@@ -261,6 +265,7 @@ export default {
       });
     },
     addMachineMarker() {
+      this.pileMachineLayer.removeAll()
       this.onlineMachine.forEach(item => {
         let marker = new BDLayers.Lib.Overlays.Marker(`marker${item.id}`, [item.lng, item.lat], {
           symbol: {
@@ -301,79 +306,134 @@ export default {
         }
       })
     },
+    removeAll() {
+      const idsGeoms = this.geoms.filter(item => this.hisClickGeom && item.cust.id !== this.hisClickGeom.cust.id)
+      const removeIds = idsGeoms.map(item => {
+        return item.geom._id
+      })
+      this.pileHoleLayer.removeGeometries(removeIds)
+    },
     loadPileHole() {
       listPileHoleRealtimeIndex({}).then(response => {
+        this.removeAll();
         this.pileHoleList = response.data
-        this.pileHoleList.forEach((item, index) => {
-          const codeToStatus = PileHoleStatus.codeToStatus(item.consStatus);
-          const geom = new BDLayers.Lib.Overlays.FromGeoJson(Circle({
-            radius: 0.4,
-            coordinates: [item.lng, item.lat],
-            symbol: [
+        this.calcPileHole(response.data)
+      })
+    },
+    addPileHoleToMap(holes) {
+      const geoms = []
+      holes.map((item, index) => {
+        const codeToStatus = PileHoleStatus.codeToStatus(item.consStatus);
+        const geom = new BDLayers.Lib.Overlays.FromGeoJson(Circle({
+          radius: 0.4,
+          coordinates: [item.lng, item.lat],
+          symbol: [
+            {
+              lineColor: '#34495e',
+              lineWidth: 1,
+              polygonFill: codeToStatus.color,
+              polygonOpacity: 0.8
+            }
+          ]
+        }).geojson);
+
+        geom.cust = item
+        geom.on('click', (e) => {
+          if (this.hisClickGeom) {
+            this.hisClickGeom.updateSymbol([
               {
                 lineColor: '#34495e',
                 lineWidth: 1,
                 polygonFill: codeToStatus.color,
-                polygonOpacity: 0.2
+                polygonOpacity: 0.8
               }
-            ]
-          }).geojson);
-
-          geom.cust = item
-          geom.on('click', (e) => {
-            if (this.hisClickGeom) {
-              this.hisClickGeom.updateSymbol([
-                {
-                  lineColor: '#34495e',
-                  lineWidth: 1,
-                  polygonFill: codeToStatus.color,
-                  polygonOpacity: 0.2
-                }
-              ])
+            ])
+          }
+          this.hisClickGeom = geom
+          geom.updateSymbol([
+            {
+              lineColor: 'green',
+              lineWidth: 1,
+              polygonFill: codeToStatus.color,
+              polygonOpacity: 1
+            }
+          ])
+          const pileHoleInfo = e.target.cust
+          geom.setPopWindow({
+            autoPan: true,
+            content: `<div id='pop-window' class="window-content"></div>`
+          });
+          ComponentHandle.createComponent({
+            wrapper: 'pop-window',
+            component: PileHoleDetail,
+            props: pileHoleInfo,
+            onclose: () => {
+              if (this.hisClickGeom) {
+                this.hisClickGeom.updateSymbol([
+                  {
+                    lineColor: '#34495e',
+                    lineWidth: 1,
+                    polygonFill: codeToStatus.color,
+                    polygonOpacity: 0.8
+                  }
+                ])
+                this.hisClickGeom = null
+              }
+              geom.closePopWindow();
             }
-            this.hisClickGeom = geom
-            geom.updateSymbol([
+          });
+        })
+        gemoCache[item.id].marker = geom
+        geoms.push(geom)
+      })
+      geoms.length && this.pileHoleLayer.addGeometries(geoms);
+    },
+    updatePileHole(newList) {
+      newList.forEach(
+        item => {
+          if (gemoCache[item.id]) {
+            const codeToStatus = PileHoleStatus.codeToStatus(item.consStatus);
+            gemoCache[item.id].marker.updateSymbol([
               {
-                lineColor: 'green',
+                lineColor: '#34495e',
                 lineWidth: 1,
                 polygonFill: codeToStatus.color,
-                polygonOpacity: 0.2
+                polygonOpacity: 0.8
               }
             ])
-            const pileHoleInfo = e.target.cust
-            geom.setPopWindow({
-              autoPan: true,
-              content: `<div id='pop-window' class="window-content"></div>`
-            });
-            ComponentHandle.createComponent({
-              wrapper: 'pop-window',
-              component: PileHoleDetail,
-              props: pileHoleInfo,
-              onclose: () => {
-                if (this.hisClickGeom) {
-                  this.hisClickGeom.updateSymbol([
-                    {
-                      lineColor: '#34495e',
-                      lineWidth: 1,
-                      polygonFill: codeToStatus.color,
-                      polygonOpacity: 0.2
-                    }
-                  ])
-                }
-                geom.closePopWindow();
-              }
-            });
-
-          })
-          this.pileHoleLayer.addGeometry(geom);
-        })
+          }
+        }
+      )
+    },
+    calcPileHole(newList) {
+      if (!newList || !newList.length) {
+        return
+      }
+      const changeHole = []
+      const addList = []
+      newList.forEach(item => {
+        // 先比对已经存在的是否是变更状态
+        if (gemoCache[item.id] && gemoCache[item.id].consStatus !== item.consStatus) {
+          gemoCache[item.id].consStatus = item.consStatus;
+          changeHole.push(item)
+        }
+        if (!gemoCache[item.id]) {
+          gemoCache[item.id] = item;
+          addList.push(item);
+        }
       })
+      this.addPileHoleToMap(addList)
+      this.updatePileHole(changeHole)
     },
     loaded(map) {
       this.mapIns = map
       this.pileHoleLayer = this.createLayer(map)
-      this.pileMachineLayer = this.createLayer(map)
+      this.pileMachineLayer = this.createLayer(map, 2)
       this.loadPileHole()
+      this.timer = setInterval(() => {
+        this.loadPileHole()
+        this.loadOnlineMachine()
+      }, 30000)
       this.init();
     },
     handleClick(e) {