From bd2b066e9a785d6a66c76f8596910882c8ec7818 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Thu, 5 May 2022 16:45:19 +0800
Subject: [PATCH] BUG 29508

---
 .../apps/grid/AppGridMap/components/list.vue  | 617 +++++++++---------
 1 file changed, 310 insertions(+), 307 deletions(-)

diff --git a/project/sass/apps/grid/AppGridMap/components/list.vue b/project/sass/apps/grid/AppGridMap/components/list.vue
index 990e74ef..307e4178 100644
--- a/project/sass/apps/grid/AppGridMap/components/list.vue
+++ b/project/sass/apps/grid/AppGridMap/components/list.vue
@@ -13,17 +13,20 @@
           </header>
           <div class="tree-div">
             <el-tree
-              :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>
-
-              <span class="custom-tree-node" :title="node.label" style="" slot-scope="{ node, data }">{{ node.label }}</span>
+                :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>
+              <template slot-scope="{ node, data }">
+                <el-tooltip effect="light" :content="node.label" placement="right">
+                  <div v-text="node.label"/>
+                </el-tooltip>
+              </template>
             </el-tree>
           </div>
         </div>
@@ -35,295 +38,295 @@
   </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",
-          },
-          defaultExpandedKeys: [],
+      drawer: false,
+      filterText: "",
+      treeObj: {
+        treeList: [],
+        defaultProps: {
+          children: "girdList",
+          label: "girdName",
         },
-        ops: {},
+        defaultExpandedKeys: [],
+      },
+      ops: {},
 
-        path: [],
-        searchObj: {
-          onlineStatus: "",
-          girdMemberName: "",
-        },
-        member: {
-          memberList: [],
-        },
-        currInfo: {},
-        infoWindowHtml: "",
-        marker: {},
-        activeId: null,
-        labels: []
-      };
+      path: [],
+      searchObj: {
+        onlineStatus: "",
+        girdMemberName: "",
+      },
+      member: {
+        memberList: [],
+      },
+      currInfo: {},
+      infoWindowHtml: "",
+      marker: {},
+      activeId: null,
+      labels: []
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  created() {
+    this.dict.load("onlineStatus")
+    this.getTreeList().then(() => {
+      this.getLeafNodes()
+    })
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
     },
-    computed: {
-      ...mapState(['user']),
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.girdName.indexOf(value) !== -1;
     },
-    created() {
-      this.dict.load("onlineStatus")
-      this.getTreeList().then(() => {
-        this.getLeafNodes()
+    getTreeList() {
+      return this.instance.post(`/app/appgirdinfo/listAllByTop`).then((res) => {
+        if (res.code == 0) {
+          this.treeObj.treeList = [res.data];
+
+          this.$nextTick(() => {
+            res.data.length && this.$refs.tree.setCurrentKey(res.data[0].id)
+          })
+        }
       })
     },
-    watch: {
-      filterText(val) {
-        this.$refs.tree.filter(val);
-      },
+
+    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))
+        }
+      })
     },
-    methods: {
-      filterNode(value, data) {
-        if (!value) return true;
-        return data.girdName.indexOf(value) !== -1;
-      },
-      getTreeList() {
-        return this.instance.post(`/app/appgirdinfo/listAllByTop`).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('该网格还未标绘')
+    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)
-          }
-        })
-      },
-
-      fitBounds(latLngList, count = 0) {
-        let {mapLib: TMap} = this
-        if (TMap) {
-          if (latLngList.length === 0) {
-            return null;
-          }
-          let boundsN = latLngList[0].getLat();
-          let boundsS = boundsN;
-          let boundsW = latLngList[0].getLng();
-          let boundsE = boundsW;
-          latLngList.forEach((point) => {
-            point.getLat() > boundsN && (boundsN = point.getLat());
-            point.getLat() < boundsS && (boundsS = point.getLat());
-            point.getLng() > boundsE && (boundsE = point.getLng());
-            point.getLng() < boundsW && (boundsW = point.getLng());
-          });
-          return new TMap.LatLngBounds(
-              new TMap.LatLng(boundsS, boundsW),
-              new TMap.LatLng(boundsN, boundsE)
-          );
-        } else {
-          if (count < 5) {
-            this.fitBounds(latLngList, ++count)
-          }
+          this.renderGridMap(arr)
         }
-      },
+      })
+    },
+    handleNodeClick(val) {
+      if (val.girdLevel === '0') {
+        this.getLeafNodes()
 
-      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 = []
+        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('该网格还未标绘')
           }
-          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)
-              })
+          this.renderGridMap(arr)
+        }
+      })
+    },
 
-              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})
-          }
+    fitBounds(latLngList, count = 0) {
+      let {mapLib: TMap} = this
+      if (TMap) {
+        if (latLngList.length === 0) {
+          return null;
         }
-      },
-      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);
-          }
+        let boundsN = latLngList[0].getLat();
+        let boundsS = boundsN;
+        let boundsW = latLngList[0].getLng();
+        let boundsE = boundsW;
+        latLngList.forEach((point) => {
+          point.getLat() > boundsN && (boundsN = point.getLat());
+          point.getLat() < boundsS && (boundsS = point.getLat());
+          point.getLng() > boundsE && (boundsE = point.getLng());
+          point.getLng() < boundsW && (boundsW = point.getLng());
         });
-      },
-      clickMember(marker) {
-        if (marker.onlineStatus == 1) {
-          this.activeId = marker.id;
-          this.marker = marker;
-          this.infoWindowContent(marker);
+        return new TMap.LatLngBounds(
+            new TMap.LatLng(boundsS, boundsW),
+            new TMap.LatLng(boundsN, boundsE)
+        );
+      } else {
+        if (count < 5) {
+          this.fitBounds(latLngList, ++count)
         }
-      },
-      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">
+      }
+    },
+
+    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>
@@ -335,31 +338,31 @@
                                               <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);
-          }
-        });
-      },
+          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>
@@ -374,7 +377,7 @@
   }
 
   ::v-deep .is-current {
-    & > .el-tree-node__content > .custom-tree-node {
+    & > .el-tree-node__content > .el-tooltip {
       color: #5088ff;
     }
   }
@@ -576,7 +579,7 @@
             background: #333c53;
           }
 
-          .el-tree-node__label {
+          .el-tooltip {
             color: #fff;
           }
 
@@ -585,7 +588,7 @@
           }
 
           .is-current > .el-tree-node__content {
-            .el-tree-node__label {
+            .el-tooltip {
               color: #5088ff;
             }
           }