From 302674273aa8b7326a2e876d1545e65dfe958203 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Wed, 22 Dec 2021 17:06:27 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=91=84=E5=83=8F=E5=A4=B4?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/2.0.5/AppGridMap/components/list.vue | 517 +++++++-----------
 1 file changed, 190 insertions(+), 327 deletions(-)

diff --git a/packages/2.0.5/AppGridMap/components/list.vue b/packages/2.0.5/AppGridMap/components/list.vue
index 744d6a66..7c921999 100644
--- a/packages/2.0.5/AppGridMap/components/list.vue
+++ b/packages/2.0.5/AppGridMap/components/list.vue
@@ -1,96 +1,16 @@
 <template>
-  <div class="map">
-    <div id="mapContainer"></div>
+  <div class="gridMap">
+    <ai-map :map.sync="map" :lib.sync="mapLib"/>
     <div class="drawer" ref="drawer">
-      <div class="drawer-content">
-        <header>
-          <h3>网格管理</h3>
-          <!-- <div class="online">
-            <p>
-              <span>人员总数：</span>
-              <span>{{ member.allMemberNumber }}</span>
-            </p>
-            <p>
-              <span>在线人员：</span>
-              <span style="color: #19d286">{{ member.onlineNumber }}</span>
-            </p>
-          </div>
-          <div class="circle">
-            <el-progress
-              type="circle"
-              :width="46"
-              :stroke-width="4"
-              :percentage="percentage()"
-              color="#19D286"
-            ></el-progress>
-          </div> -->
-        </header>
-        <!-- <ul class="nav">
-          <li
-            v-for="(e, index) in navList"
-            :key="index"
-            @click="navClick(index)"
-            :class="{ active: activeIndex == index }"
-          >
-            {{ e.title }}
-          </li>
-        </ul> -->
-        <div v-show="activeIndex == 0" class="tree">
-          <div class="map-search">
-            <el-select
-              size="mini"
-              style="width: 80px"
-              @change="getMemberList()"
-              v-model="searchObj.onlineStatus"
-              placeholder="全部"
-              clearable
-            >
-              <el-option
-                v-for="(item, i) in dict.getDict('onlineStatus')"
-                :key="i"
-                :label="item.dictName"
-                :value="item.dictValue"
-              ></el-option>
-            </el-select>
-            <el-input
-              style="width: 164px"
-              @change="getMemberList()"
-              placeholder="请输入网格员姓名"
-              v-model="searchObj.girdMemberName"
-              size="mini"
-              @keyup.enter.native="getMemberList()"
-              suffix-icon="el-icon-search"
-            >
-            </el-input>
-          </div>
-          <header class="header">
-            <span>人员列表</span>
-          </header>
-          <ul class="member-list" v-if="member.memberList.length > 0">
-            <li
-              v-for="(e, index) in member.memberList"
-              :key="index"
-              @click="clickMember(e)"
-              :class="{ active: activeId == e.id }"
-            >
-              <span
-                class="iconfont iconzxjyzdls"
-                :style="{
-                  color: e.onlineStatus == 1 ? '#19D286' : 'rgb(178, 178, 201)',
-                }"
-              ></span>
-              <span>{{ e.name }}</span>
-            </li>
-          </ul>
-          <div v-if="member.memberList.length == 0" class="empty">暂无数据</div>
-        </div>
-        <div  v-show="activeIndex == 1" class="tree">
+      <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"
+                placeholder="请输入网格名称"
+                v-model="filterText"
+                size="mini"
+                suffix-icon="el-icon-search"
             >
             </el-input>
           </div>
@@ -99,32 +19,28 @@
           </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"
+                :filter-node-method="filterNode"
+                default-expand-all
+                highlight-current
             >
             </el-tree>
           </div>
         </div>
       </div>
-    </div>
-    <div class="drawer-btn" @click="control()" ref="drawerBtn">
-      <span
-        class="iconfont iconArrow_Left"
-        ref="icon"
-        @click="changeIcon()"
-      ></span>
+      <div class="rightBtn" :class="{show}" @click="show=!show">
+        <i class="iconfont iconArrow_Right"/>
+      </div>
     </div>
   </div>
 </template>
 <script>
-import AMapLoader from "@amap/amap-jsapi-loader";
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
+
 export default {
   name: "AppGridMap",
   label: "网格地图",
@@ -135,12 +51,16 @@ export default {
   },
   data() {
     return {
-      map: '',
+      map: null,
+      mapLib: null,
+      show: true,
+      retryMapCount: 0,
+
       overlays: [],
       drawer: false,
       navList: [
         // { id: 0, title: "网格员" },
-        { id: 1, title: "网格" },
+        {id: 1, title: "网格"},
       ],
       activeIndex: 1,
       filterText: "",
@@ -170,11 +90,9 @@ export default {
     ...mapState(['user']),
   },
   created() {
-    this.areaId = this.user.info.areaId
-  },
-  mounted() {
-    // this.getMemberList();
-    this.getTreeList()
+    this.dict.load("onlineStatus")
+    this.getTreeList().then(() => {
+    })
   },
   watch: {
     filterText(val) {
@@ -187,100 +105,66 @@ export default {
       return data.girdName.indexOf(value) !== -1;
     },
     getTreeList() {
-      this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
+      return this.instance.post(`/app/appgirdinfo/listAll`, null, null).then((res) => {
         if (res.code == 0) {
           this.treeObj.treeList = res.data;
         }
-      });
+      })
+    },
+    getLeafNodes(count) {
+      let {tree} = this.$refs
+      if (tree) {
+      } else {
+        if (count < 5) {
+          setTimeout(() => {
+            this.getLeafNodes(++count)
+          }, 1000)
+        }
+      }
     },
     handleNodeClick(val) {
       let path = [];
-      if (val.points) {
-        val.points.map((e, index) => {
-          path[index] = [e.lng, e.lat];
-        });
+      if (val?.points) {
+        path = val.points.map(e => [e.lng, e.lat])
+        this.renderGridMap([path])
       }
-      this.initMap(path);
     },
-    initMap(path, marker, initMakers) {
-      AMapLoader.load({
-        key: "b553334ba34f7ac3cd09df9bc8b539dc", // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.InfoWindow"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-        AMapUI: {
-          // 是否加载 AMapUI，缺省不加载
-          version: "1.1", // AMapUI 缺省 1.1
-          plugins: [], // 需要加载的 AMapUI ui插件
-        },
-      })
-        .then((AMap) => {
-          this.map = new AMap.Map("mapContainer", {
-            resizeEnable: true,
-            zoom: 13,
+    renderGridMap(paths) {
+      let {map, mapLib: AMap, retryMapCount} = this
+      if (AMap) {
+        map.clearMap()
+        paths.forEach(path => {
+          this.polygon = new AMap.Polyline({
+            path,
+            strokeColor: "#FF33FF",
+            strokeWeight: 6,
+            strokeStyle: "solid",
+            strokeOpacity: 1,
+            fillColor: "#1791fc",
+            zIndex: 50,
+            lineJoin: "round",
+            lineCap: "round",
           });
-          this.map.setZoomAndCenter(14, [117.147097, 36.72081], false, 600);
-          if (path) {
-            this.polygon = new AMap.Polyline({
-              path: path,
-              strokeColor: "#FF33FF",
-              strokeWeight: 6,
-              strokeStyle: "solid",
-              strokeOpacity: 1,
-              fillColor: "#1791fc",
-              zIndex: 50,
-              lineJoin: "round",
-              lineCap: "round",
-            });
-            this.map.add(this.polygon);
-            this.map.setFitView();
-          }
-          if (marker) {
-            console.log(marker);
-            let infoWindow = new AMap.InfoWindow({
-              position: new AMap.LngLat(marker.lng, marker.lat),
-              offset: new AMap.Pixel(0, -30),
-              content: this.infoWindowHtml,
-            });
-            let markerDot = new AMap.Marker({
-              map: this.map,
-              position: new AMap.LngLat(marker.lng, marker.lat),
-            });
-            markerDot.on("click", () => {
-              infoWindow.open(this.map);
-            });
-            infoWindow.open(this.map);
-            this.getLngLat(marker);
-            this.map.setZoomAndCenter(13, [marker.lng, marker.lat], false, 600);
-          }
-          if (initMakers) {
-            let markerList = [];
-            initMakers.map((e) => {
-              markerList.push(
-                new AMap.Marker({
-                  position: new AMap.LngLat(e.lng, e.lat),
-                  label: {
-                    content: `<p class='title_info'>${e.name}</p>`,
-                    direction: "center",
-                    offset: new AMap.Pixel(0, -30),
-                  },
-                })
-              );
-            });
-            this.map.add(markerList);
-          }
-          this.map.addControl(new AMap.Scale());
-          this.map.addControl(new AMap.ToolBar());
-          this.eventOn();
+          map.add(this.polygon);
         })
-        .catch((e) => {
-          console.log(e);
-        });
+        map.setFitView();
+        this.eventOn()
+      } else {
+        if (retryMapCount < 5) {
+          setTimeout(() => {
+            this.retryMapCount++
+            this.renderGridMap(paths)
+          }, 1000)
+        }
+      }
+
     },
     //地图事件绑定
     eventOn() {
       this.map.on("mousemove", this.showInfoMove, this);
     },
-    showInfoMove(e) {},
+    showInfoMove(e) {
+    },
     hasClass(ele, cls) {
       return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
     },
@@ -300,56 +184,29 @@ export default {
         this.removeClass(ele, className);
       }
     },
-    changeIcon() {
-      this.changClass(this.$refs.icon, "iconArrow_Right");
-    },
-    control() {
-      this.changClass(this.$refs.drawer, "hide");
-      this.changClass(this.$refs.drawerBtn, "btn-hide");
-    },
-    navClick(index) {
-      this.activeIndex = index;
-      this.initMap();
-      if (index == 1) {
-        this.filterText = "";
-        this.getTreeList();
-      } else {
-        this.searchObj = {
-          onlineStatus: "",
-          girdMemberName: "",
-        };
-        this.getMemberList();
-      }
-    },
     percentage() {
       if (this.member.onlineNumber == 0) {
         return 0;
       } else {
         return (
-          100 *
-          (this.member.onlineNumber / this.member.allMemberNumber)
+            100 *
+            (this.member.onlineNumber / this.member.allMemberNumber)
         ).toFixed(2);
       }
     },
     getMemberList() {
-      this.instance
-        .post(
-          `/app/appgirdmemberinfo/queryGirdMemberByMap`,
-          { ...this.searchObj },
-          null
-        )
-        .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);
-          }
-        });
+      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) {
@@ -360,15 +217,15 @@ export default {
     },
     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">
+      .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>
@@ -380,46 +237,39 @@ export default {
                                             <span class="iconfont iconarea" id="addressSpan">当日轨迹</span>
                                         </p>
                                     </div>`;
-            this.initMap(false, marker);
-          }
-        });
-    },
-    getLngLat(marker) {
-      let span = document.getElementById("addressSpan");
-      span.addEventListener("click", this.queryTrajectory);
+          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);
+      .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>
-.map {
+.gridMap {
   height: 100%;
   width: 100%;
   position: relative;
-  #mapContainer {
-    width: 100%;
-    height: 100%;
-  }
+
   .drawer-btn {
     position: absolute;
     left: 280px;
@@ -431,9 +281,10 @@ export default {
     border-top: 40px solid transparent;
     border-bottom: 40px solid transparent;
     border-left: 16px solid #333c53;
-    border-right: 0px solid transparent;
+    border-right: 0 solid transparent;
     transition: all 0.5s ease-in-out;
     cursor: pointer;
+
     .iconfont {
       position: absolute;
       font-size: 26px;
@@ -443,13 +294,14 @@ export default {
       transition: all 0.5s ease-in-out;
     }
   }
+
   .btn-hide {
     left: 0;
   }
+
   .drawer {
     width: 280px;
-    height: 100%;
-    background: #333c53;
+    height: 100vh;
     position: absolute;
     z-index: 1000;
     top: 0;
@@ -457,78 +309,44 @@ export default {
     visibility: visible;
     opacity: 1;
     transition: all 0.5s ease-in-out;
+    display: flex;
+    align-items: center;
+
     .drawer-content {
       width: 100%;
       height: 100%;
       padding: 0 16px;
       box-sizing: border-box;
-      header {
-        height: 76px;
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        h3 {
-          color: #fff;
-          font-size: 18px;
-        }
-        .online {
-          color: #fff;
-          font-size: 12px;
-          padding-left: 16px;
-        }
-        .circle {
-          width: 40px;
-          height: 40px;
-          padding-left: 16px;
-          display: flex;
-          align-items: center;
-          ::v-deep .el-progress__text {
-            color: #19d286;
-          }
-        }
-      }
-      .nav {
-        width: 100%;
-        height: 28px;
-        display: flex;
-        padding: 0;
-        margin: 0;
-        li {
-          width: 50%;
-          height: 28px;
-          line-height: 28px;
-          text-align: center;
-          font-size: 12px;
-          background: #1d2336;
-          border-radius: 0px 3px 3px 0px;
-          color: #8899bb;
-          cursor: pointer;
-        }
-        .active {
-          background: #3e4a69;
-          color: #fff;
-          border-radius: 3px 0px 0px 3px;
-        }
+      background: #333c53;
+
+      & > b {
+        color: #fff;
+        font-size: 18px;
+        line-height: 76px;
       }
+
       .tree {
         height: calc(100% - 28px - 76px);
-        overflow: auto;
         border-radius: 4px;
         overflow: hidden;
+
         .map-search {
           display: flex;
           padding: 8px 0;
           justify-content: space-between;
-          ::v-deep  .el-input__inner {
+
+          ::v-deep .el-input__inner {
             color: #fff;
           }
         }
+
         .member-list {
           width: 100%;
           height: calc(100% - 44px - 28px);
           overflow: auto;
           padding: 0;
           margin: 0;
+
           li {
             width: 100%;
             height: 32px;
@@ -538,37 +356,43 @@ export default {
             color: #fff;
             margin: 0;
             cursor: pointer;
+
             span {
               padding-right: 8px;
             }
           }
+
           .active {
             background: #1d2336;
           }
+
           &::-webkit-scrollbar {
             /*滚动条整体样式*/
             width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
             height: 1px;
           }
+
           &::-webkit-scrollbar-thumb {
             /*滚动条里面小方块*/
             border-radius: 10px;
             box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
             background: #1a1e2c;
           }
+
           &::-webkit-scrollbar-track {
             /*滚动条里面轨道*/
             box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
             border-radius: 10px;
-            background: #ededed;
             background: #282f45;
           }
         }
+
         .empty {
           padding: 20px 0;
           color: #7a88bb;
           text-align: center;
         }
+
         .header {
           width: 100%;
           height: 28px;
@@ -585,61 +409,72 @@ export default {
         .input {
           width: 100%;
           padding: 8px 0;
-          ::v-deep  .el-input__inner {
+
+          ::v-deep .el-input__inner {
             color: #fff;
           }
         }
-        ::v-deep  .el-input__inner {
+
+        ::v-deep .el-input__inner {
           background-color: #282f45;
           border: 1px solid #282f45;
         }
+
         .tree-div {
           width: 100%;
           height: calc(100% - 44px - 28px);
           overflow: auto;
+
           &::-webkit-scrollbar {
             /*滚动条整体样式*/
             width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
             height: 1px;
           }
+
           &::-webkit-scrollbar-thumb {
             /*滚动条里面小方块*/
             border-radius: 10px;
             box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
             background: #1a1e2c;
           }
+
           &::-webkit-scrollbar-track {
             /*滚动条里面轨道*/
             box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
             border-radius: 10px;
-            background: #ededed;
             background: #282f45;
           }
         }
+
         footer {
           width: 100%;
           height: 32px;
           background-color: #fff;
           display: flex;
           align-items: center;
+
           span {
             width: 33.33%;
             text-align: center;
             cursor: pointer;
           }
         }
-        ::v-deep  .el-tree {
+
+        ::v-deep .el-tree {
           width: 100%;
 
           .el-tree__empty-block {
             background: #333c53;
           }
+
           .el-tree-node__label {
             color: #fff;
           }
+
           .el-tree-node__content {
             background: #333c53;
           }
+
           .is-current > .el-tree-node__content {
             .el-tree-node__label {
               color: #5088ff;
@@ -649,15 +484,36 @@ export default {
       }
     }
   }
+
   .hide {
     left: -280px;
     opacity: 0;
     visibility: hidden;
   }
+
   .btn {
     position: absolute;
     top: 100px;
   }
+
+  .rightBtn {
+    width: 16px;
+    height: 80px;
+    background: url("https://cdn.cunwuyun.cn/monitor/drawerBtn.png");
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .iconfont {
+      transition: transform 0.2s;
+    }
+
+
+    &.show > .iconfont {
+      transform: rotate(180deg);
+    }
+  }
 }
 </style>
 <style lang="scss">
@@ -668,22 +524,27 @@ export default {
     background: #fff;
     padding: 8px 0 0 12px;
     box-sizing: border-box;
+
     p {
       margin: 0;
       padding: 0;
     }
+
     p {
       line-height: 20px;
+
       .name {
         color: #333;
         font-size: 16px;
         font-weight: bold;
       }
+
       .lat {
         font-size: 12px;
         color: #999;
       }
     }
+
     .address {
       color: #999;
       line-height: 40px;
@@ -691,6 +552,7 @@ export default {
       cursor: pointer;
     }
   }
+
   .title_info {
     width: 68px;
     font-size: 14px;
@@ -702,9 +564,10 @@ export default {
     padding: 0;
     margin: 0;
   }
+
   .amap-marker-label {
     border: 1px solid rgb(141, 139, 139);
     background-color: #fff;
   }
 }
-</style>
\ No newline at end of file
+</style>