26929

packages/2.0.5/AppGridMap/components/list.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="gridMap">
-    <ai-t-map :map.sync="map" :lib.sync="mapLib" :libraries="['geometry','service', 'tools']"/>
+    <ai-t-map :map.sync="map" ref="AiTMap" :lib.sync="mapLib" @loaded="onMapInit" :libraries="['geometry','service', 'tools']"/>
     <div class="drawer" ref="drawer">
       <div v-if="show" class="drawer-content">
         <b>网格地图</b>
         <div class="tree">
           <div class="input">
-            <el-input placeholder="请输入网格名称"
+            <el-input placeholder="请输入网格名称" v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
-                      v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
           </div>
           <header class="header">
             <span>网格列表</span>
@@ -19,10 +18,10 @@
               @node-click="handleNodeClick"
               node-key="id"
               ref="tree"
+              :expand-on-click-node="false"
               :filter-node-method="filterNode"
               default-expand-all
-                highlight-current
+              highlight-current>
-            >
             </el-tree>
           </div>
         </div>
@@ -34,10 +33,10 @@
   </div>
 </template>
 <script>
-import {mapState} from 'vuex'
+  import {mapState} from 'vuex'
 
-export default {
+  export default {
-  name: "AppGridMap",
+    name: 'AppGridMap',
     label: "网格地图",
     props: {
       instance: Function,
@@ -75,7 +74,6 @@ export default {
         currInfo: {},
         infoWindowHtml: "",
         marker: {},
-      location: {},
         activeId: null,
         labels: []
       };
@@ -88,7 +86,6 @@ export default {
       this.getTreeList().then(() => {
         this.getLeafNodes()
       })
-    this.getCorpLocation()
     },
     watch: {
       filterText(val) {
@@ -111,51 +108,59 @@ export default {
           }
         })
       },
-    getCorpLocation(){
+
+      onMapInit () {
         this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
-        if(res.code==0){
+          if (res.code === 0) {
-          this.location = res.data
+            this.map.setCenter(new this.mapLib.LatLng(res.data.lat, res.data.lng))
           }
         })
       },
+
       getLeafNodes() {
         this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => {
           if (res?.data) {
-          let arr = []
+            const arr = res.data.map(v => {
-          res.data.forEach(e => {
+              return {
-            if (e.points?.length > 0) {
+                id: v.id,
-              arr.push(e.points.map(p => [p.lng, p.lat]))
+                girdName: v.girdName,
+                points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
               }
-          })
+            }).filter(v => v.points.length)
-          this.renderGridMap(arr, true)
+
+            this.renderGridMap(arr)
           }
         })
       },
-    handleNodeClick(val) {
+      handleNodeClick (val) {
-      let path = [];
+        if (val.girdLevel === '0') {
-      this.currInfo = val
+          this.getLeafNodes()
-      if (val?.points?.length > 0) {
+
-        path = val.points.map(e => [e.lng, e.lat])
+          return false
-        this.renderGridMap([path])
-      } else if (val.girdLevel === '2') {
-        this.$message.error("所选网格没有标绘!")
         }
+        
+        this.instance.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${val.id}`).then((res) => {
+          if (res?.data) {
+            const arr = res.data.map(v => {
+              return {
+                id: v.id,
+                girdName: v.girdName,
+                points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
+              }
+            }).filter(v => v.points.length)
+
+            if (!arr.length) {
+              return this.$message.error('该网格还未标绘')
+            }
+
+            this.renderGridMap(arr)
+          }
+        })
       },
-    renderGridMap(paths, flag) {
+
-      let {map, mapLib: TMap, retryMapCount} = this
+      fitBounds(latLngList, count = 0) {
+        let {mapLib: TMap} = this
         if (TMap) {
-        setTimeout(() => {
-          flag && map.setCenter(new TMap.LatLng(this.location.lat, this.location.lng))
-        }, 400)
-        if (this.labels.length > 0) {
-          this.labels.forEach(e => {
-            e.destroy(e.id)
-          })
-          this.labels = []
-        }
-        const colors = ["#A194F4", "#7CBDF3", "#F3A57D", "#62D063", "#58DBDA", "#F7D151"]
-        const fitBounds = (latLngList) => {
-          // 由多边形顶点坐标数组计算能完整呈现该多边形的最小矩形范围
           if (latLngList.length === 0) {
             return null;
           }
@@ -173,40 +178,59 @@ export default {
               new TMap.LatLng(boundsS, boundsW),
               new TMap.LatLng(boundsN, boundsE)
           );
+        } else {
+          if (count < 5) {
+            this.fitBounds(latLngList, ++count)
           }
+        }
+      },
+
+      renderGridMap(paths) {
+        let {map, mapLib: TMap } = this
+        if (TMap) {
           if (this.polygons.length > 0) {
             this.polygons.forEach(e => e.destroy())
+            this.labels.forEach(e => {
+              e.destroy(e.id)
+            })
             this.polygons = []
+            this.labels = []
           }
+          if (paths?.length > 0) {
             let bounds = []
             paths.forEach((path, i) => {
-          let color = colors[i % colors.length]
               let polygon = new TMap.MultiPolygon({
                 map, styles: {
                   default: new TMap.PolygonStyle({
                     showBorder: true,
-                borderColor: color,
+                    borderColor: '#5088FF',
                     borderWidth: 2,
-                color: this.$colorUtils.Hex2RGBA(color, 0.1),
+                    color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
-                borderDashArray: [10, 10]
                   })
                 },
-            geometries: [{paths: path.map(e => new TMap.LatLng(e[1], e[0]))}]
+                id: path.id,
+                geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
               })
               this.polygons.push(polygon)
-          bounds.push(fitBounds(path.map(e => new TMap.LatLng(e[1], e[0]))))
+              bounds.push(this.fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
+
+              polygon.on('click', e => {
+                const id = e.target.id
+                this.getGridInfo(id)
+              })
+
+              const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
 
-          const points = path.map(e => new TMap.LatLng(e[1], e[0]))
               var position = TMap.geometry.computeCentroid(points)
 
               let label = new TMap.MultiLabel({
-            id: `label~${this.currInfo.id}`,
+                id: `label~${path.id}`,
-            data: this.currInfo.id,
+                data: path.id,
                 map: map,
                 styles: {
                   building:  new TMap.LabelStyle({
                     color: '#3777FF',
-                size: 30,
+                    size: 20,
                     alignment: 'center',
                     verticalAlignment: 'middle'
                   })
@@ -216,7 +240,7 @@ export default {
                     id: `label-class-${i}`,
                     styleId: 'building',
                     position: position,
-                content: this.currInfo.girdName,
+                    content: path.girdName,
                   }
                 ]
               })
@@ -226,7 +250,7 @@ export default {
               });
             })
             bounds = bounds.reduce((a, b) => {
-          return fitBounds([
+              return this.fitBounds([
                 a.getNorthEast(),
                 a.getSouthWest(),
                 b.getNorthEast(),
@@ -234,15 +258,8 @@ export default {
               ]);
             });
             map.fitBounds(bounds, {padding: 100})
-      } else {
-        if (retryMapCount < 5) {
-          setTimeout(() => {
-            this.retryMapCount++
-            this.renderGridMap(paths)
-          }, 1000)
           }
         }
-
       },
       hasClass(ele, cls) {
         return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
@@ -340,7 +357,7 @@ export default {
         });
       },
     },
-};
+  }
 </script>
 
 <style lang="scss" scoped>