From e95360fc81b39d3501992a70f4f277563036c75d Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 26 Jan 2022 11:10:40 +0800
Subject: [PATCH] 26929

---
 packages/2.0.5/AppGridMap/components/list.vue | 595 +++++++++---------
 1 file changed, 306 insertions(+), 289 deletions(-)

diff --git a/packages/2.0.5/AppGridMap/components/list.vue b/packages/2.0.5/AppGridMap/components/list.vue
index bc30bb2e..7fb8c6b7 100644
--- a/packages/2.0.5/AppGridMap/components/list.vue
+++ b/packages/2.0.5/AppGridMap/components/list.vue
@@ -1,28 +1,27 @@
 <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="请输入网格名称"
-                      v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
+            <el-input placeholder="请输入网格名称" v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
           </div>
           <header class="header">
             <span>网格列表</span>
           </header>
           <div class="tree-div">
             <el-tree
-                :data="treeObj.treeList"
-                :props="treeObj.defaultProps"
-                @node-click="handleNodeClick"
-                node-key="id"
-                ref="tree"
-                :filter-node-method="filterNode"
-                default-expand-all
-                highlight-current
-            >
+              :data="treeObj.treeList"
+              :props="treeObj.defaultProps"
+              @node-click="handleNodeClick"
+              node-key="id"
+              ref="tree"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              default-expand-all
+              highlight-current>
             </el-tree>
           </div>
         </div>
@@ -34,128 +33,134 @@
   </div>
 </template>
 <script>
-import {mapState} from 'vuex'
+  import {mapState} from 'vuex'
 
-export default {
-  name: "AppGridMap",
-  label: "网格地图",
-  props: {
-    instance: Function,
-    dict: Object,
-    permissions: Function,
-  },
-  data() {
-    return {
-      map: null,
-      mapLib: null,
-      show: true,
-      retryMapCount: 0,
-      polygons: [],
+  export default {
+    name: 'AppGridMap',
+    label: "网格地图",
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+    },
+    data() {
+      return {
+        map: null,
+        mapLib: null,
+        show: true,
+        retryMapCount: 0,
+        polygons: [],
 
-      drawer: false,
-      filterText: "",
-      treeObj: {
-        treeList: [],
-        defaultProps: {
-          children: "girdList",
-          label: "girdName",
+        drawer: false,
+        filterText: "",
+        treeObj: {
+          treeList: [],
+          defaultProps: {
+            children: "girdList",
+            label: "girdName",
+          },
+          defaultExpandedKeys: [],
         },
-        defaultExpandedKeys: [],
-      },
-      ops: {},
+        ops: {},
 
-      path: [],
-      searchObj: {
-        onlineStatus: "",
-        girdMemberName: "",
-      },
-      member: {
-        memberList: [],
-      },
-      currInfo: {},
-      infoWindowHtml: "",
-      marker: {},
-      location: {},
-      activeId: null,
-      labels: []
-    };
-  },
-  computed: {
-    ...mapState(['user']),
-  },
-  created() {
-    this.dict.load("onlineStatus")
-    this.getTreeList().then(() => {
-      this.getLeafNodes()
-    })
-    this.getCorpLocation()
-  },
-  watch: {
-    filterText(val) {
-      this.$refs.tree.filter(val);
+        path: [],
+        searchObj: {
+          onlineStatus: "",
+          girdMemberName: "",
+        },
+        member: {
+          memberList: [],
+        },
+        currInfo: {},
+        infoWindowHtml: "",
+        marker: {},
+        activeId: null,
+        labels: []
+      };
     },
-  },
-  methods: {
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.girdName.indexOf(value) !== -1;
+    computed: {
+      ...mapState(['user']),
     },
-    getTreeList() {
-      return this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
-        if (res.code == 0) {
-          this.treeObj.treeList = res.data;
-
-          this.$nextTick(() => {
-            res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
-          })
-        }
+    created() {
+      this.dict.load("onlineStatus")
+      this.getTreeList().then(() => {
+        this.getLeafNodes()
       })
     },
-    getCorpLocation(){
-      this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
-        if(res.code==0){
-          this.location = res.data
-        }
-      })
+    watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      },
     },
-    getLeafNodes() {
-      this.instance.post(`/app/appgirdinfo/listAll2`).then((res) => {
-        if (res?.data) {
-          let arr = []
-          res.data.forEach(e => {
-            if (e.points?.length > 0) {
-              arr.push(e.points.map(p => [p.lng, p.lat]))
+    methods: {
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.girdName.indexOf(value) !== -1;
+      },
+      getTreeList() {
+        return this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
+          if (res.code == 0) {
+            this.treeObj.treeList = res.data;
+
+            this.$nextTick(() => {
+              res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
+            })
+          }
+        })
+      },
+
+      onMapInit () {
+        this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
+          if (res.code === 0) {
+            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) {
+            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)
+
+            this.renderGridMap(arr)
+          }
+        })
+      },
+      handleNodeClick (val) {
+        if (val.girdLevel === '0') {
+          this.getLeafNodes()
+
+          return false
+        }
+        
+        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, true)
-        }
-      })
-    },
-    handleNodeClick(val) {
-      let path = [];
-      this.currInfo = val
-      if (val?.points?.length > 0) {
-        path = val.points.map(e => [e.lng, e.lat])
-        this.renderGridMap([path])
-      } else if (val.girdLevel === '2') {
-        this.$message.error("所选网格没有标绘!")
-      }
-    },
-    renderGridMap(paths, flag) {
-      let {map, mapLib: TMap, retryMapCount} = 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) => {
-          // 由多边形顶点坐标数组计算能完整呈现该多边形的最小矩形范围
+
+            this.renderGridMap(arr)
+          }
+        })
+      },
+
+      fitBounds(latLngList, count = 0) {
+        let {mapLib: TMap} = this
+        if (TMap) {
           if (latLngList.length === 0) {
             return null;
           }
@@ -173,174 +178,186 @@ export default {
               new TMap.LatLng(boundsS, boundsW),
               new TMap.LatLng(boundsN, boundsE)
           );
-        }
-        if (this.polygons.length > 0) {
-          this.polygons.forEach(e => e.destroy())
-          this.polygons = []
-        }
-        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,
-                borderWidth: 2,
-                color: this.$colorUtils.Hex2RGBA(color, 0.1),
-                borderDashArray: [10, 10]
-              })
-            },
-            geometries: [{paths: path.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]))))
-          
-          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}`,
-            data: this.currInfo.id,
-            map: map,
-            styles: {
-              building:  new TMap.LabelStyle({
-                color: '#3777FF',
-                size: 30,
-                alignment: 'center',
-                verticalAlignment: 'middle'
-              })
-            },
-            geometries: [
-              {
-                id: `label-class-${i}`,
-                styleId: 'building',
-                position: position,
-                content: this.currInfo.girdName,
-              }
-            ]
-          })
-          this.labels.push(label)
-          label.on('click', e => {
-            this.getGridInfo(e.target.id.split('~')[1])
-          });
-        })
-        bounds = bounds.reduce((a, b) => {
-          return fitBounds([
-            a.getNorthEast(),
-            a.getSouthWest(),
-            b.getNorthEast(),
-            b.getSouthWest(),
-          ]);
-        });
-        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|$)"));
-    },
-    addClass(ele, cls) {
-      if (!this.hasClass(ele, cls)) ele.className += " " + cls;
-    },
-    removeClass(ele, cls) {
-      if (this.hasClass(ele, cls)) {
-        const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
-        ele.className = ele.className.replace(reg, " ");
-      }
-    },
-    changClass(ele, className) {
-      if (!this.hasClass(ele, className)) {
-        this.addClass(ele, className);
-      } else {
-        this.removeClass(ele, className);
-      }
-    },
-    percentage() {
-      if (this.member.onlineNumber == 0) {
-        return 0;
-      } else {
-        return (
-            100 *
-            (this.member.onlineNumber / this.member.allMemberNumber)
-        ).toFixed(2);
-      }
-    },
-    getMemberList() {
-      this.instance.post(`/app/appgirdmemberinfo/queryGirdMemberByMap`, this.searchObj).then((res) => {
-        if (res.code == 0) {
-          let markers = [];
-          this.member = res.data;
-          this.member.memberList.map((e) => {
-            if (e.onlineStatus == "1") {
-              markers.push({lng: e.lng, lat: e.lat, name: e.name});
-            }
-          });
-          this.initMap(null, null, markers);
-        }
-      });
-    },
-    clickMember(marker) {
-      if (marker.onlineStatus == 1) {
-        this.activeId = marker.id;
-        this.marker = marker;
-        this.infoWindowContent(marker);
-      }
-    },
-    infoWindowContent(marker) {
-      this.instance
-      .post(`/app/location/xyToAddress`, null, {
-        params: {
-          x: marker.lat,
-          y: marker.lng,
-        },
-      })
-      .then((res) => {
-        if (res.code == 0) {
-          this.infoWindowHtml = `<div class="info">
-                                        <p>
-                                            <span class="name">${marker.name}</span>
-                                            <span class="lat">${marker.lng},${marker.lat}</span>
-                                        </p>
-                                        <p>
-                                            <span class="lat">${res.data}</span>
-                                        </p>
-                                        <p class="address">
-                                            <span class="iconfont iconarea" id="addressSpan">当日轨迹</span>
-                                        </p>
-                                    </div>`;
-          this.initMap(false, marker);
-        }
-      });
-    },
-    queryTrajectory() {
-      this.instance
-      .post(`/app/appgirdmembertrajectory/queryTrajectory`, null, {
-        params: {
-          userId: this.marker.userId,
-        },
-      })
-      .then((res) => {
-        if (res.code == 0) {
-          let path = [];
-          if (res.data) {
-            res.data.map((e, index) => {
-              path[index] = [e.lng, e.lat];
-            });
+        } else {
+          if (count < 5) {
+            this.fitBounds(latLngList, ++count)
           }
-          this.initMap(path, this.marker);
         }
-      });
+      },
+
+      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 polygon = new TMap.MultiPolygon({
+                map, styles: {
+                  default: new TMap.PolygonStyle({
+                    showBorder: true,
+                    borderColor: '#5088FF',
+                    borderWidth: 2,
+                    color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
+                  })
+                },
+                id: path.id,
+                geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
+              })
+              this.polygons.push(polygon)
+              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]))
+
+              var position = TMap.geometry.computeCentroid(points)
+
+              let label = new TMap.MultiLabel({
+                id: `label~${path.id}`,
+                data: path.id,
+                map: map,
+                styles: {
+                  building:  new TMap.LabelStyle({
+                    color: '#3777FF',
+                    size: 20,
+                    alignment: 'center',
+                    verticalAlignment: 'middle'
+                  })
+                },
+                geometries: [
+                  {
+                    id: `label-class-${i}`,
+                    styleId: 'building',
+                    position: position,
+                    content: path.girdName,
+                  }
+                ]
+              })
+              this.labels.push(label)
+              label.on('click', e => {
+                this.getGridInfo(e.target.id.split('~')[1])
+              });
+            })
+            bounds = bounds.reduce((a, b) => {
+              return this.fitBounds([
+                a.getNorthEast(),
+                a.getSouthWest(),
+                b.getNorthEast(),
+                b.getSouthWest(),
+              ]);
+            });
+            map.fitBounds(bounds, {padding: 100})
+          }
+        }
+      },
+      hasClass(ele, cls) {
+        return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
+      },
+      addClass(ele, cls) {
+        if (!this.hasClass(ele, cls)) ele.className += " " + cls;
+      },
+      removeClass(ele, cls) {
+        if (this.hasClass(ele, cls)) {
+          const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
+          ele.className = ele.className.replace(reg, " ");
+        }
+      },
+      changClass(ele, className) {
+        if (!this.hasClass(ele, className)) {
+          this.addClass(ele, className);
+        } else {
+          this.removeClass(ele, className);
+        }
+      },
+      percentage() {
+        if (this.member.onlineNumber == 0) {
+          return 0;
+        } else {
+          return (
+              100 *
+              (this.member.onlineNumber / this.member.allMemberNumber)
+          ).toFixed(2);
+        }
+      },
+      getMemberList() {
+        this.instance.post(`/app/appgirdmemberinfo/queryGirdMemberByMap`, this.searchObj).then((res) => {
+          if (res.code == 0) {
+            let markers = [];
+            this.member = res.data;
+            this.member.memberList.map((e) => {
+              if (e.onlineStatus == "1") {
+                markers.push({lng: e.lng, lat: e.lat, name: e.name});
+              }
+            });
+            this.initMap(null, null, markers);
+          }
+        });
+      },
+      clickMember(marker) {
+        if (marker.onlineStatus == 1) {
+          this.activeId = marker.id;
+          this.marker = marker;
+          this.infoWindowContent(marker);
+        }
+      },
+      infoWindowContent(marker) {
+        this.instance
+        .post(`/app/location/xyToAddress`, null, {
+          params: {
+            x: marker.lat,
+            y: marker.lng,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.infoWindowHtml = `<div class="info">
+                                          <p>
+                                              <span class="name">${marker.name}</span>
+                                              <span class="lat">${marker.lng},${marker.lat}</span>
+                                          </p>
+                                          <p>
+                                              <span class="lat">${res.data}</span>
+                                          </p>
+                                          <p class="address">
+                                              <span class="iconfont iconarea" id="addressSpan">当日轨迹</span>
+                                          </p>
+                                      </div>`;
+            this.initMap(false, marker);
+          }
+        });
+      },
+      queryTrajectory() {
+        this.instance
+        .post(`/app/appgirdmembertrajectory/queryTrajectory`, null, {
+          params: {
+            userId: this.marker.userId,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            let path = [];
+            if (res.data) {
+              res.data.map((e, index) => {
+                path[index] = [e.lng, e.lat];
+              });
+            }
+            this.initMap(path, this.marker);
+          }
+        });
+      },
     },
-  },
-};
+  }
 </script>
 
 <style lang="scss" scoped>