五大图层

src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue

@@ -2,19 +2,23 @@
   <div style="position: relative">
 
     <!-- 组织路由 -->
+
     <div class="div_top">
       <div class="router_line"></div>
       <div class="div_router">
-        <span class="router_parents"
-              v-for="(item,index) in runAgencyArray"
-              @click="handleClickAgency(index)"
-              :key="index">{{item.name}}<span class="arrow">></span></span>
+        <div v-if="!showPeopleInfo">
+          <span class="router_child">五大图层</span>
+        </div>
+        <div v-if="showPeopleInfo"> <span class="router_parents"
+                @click="handleClickRouter">五大图层<span class="arrow">></span></span>
 
-        <span class="router_child">{{orgData.name}}</span>
+          <span class="router_child">个人档案</span>
+        </div>
       </div>
     </div>
 
-    <div class="div_content">
+    <div v-show="!showPeopleInfo"
+         class="div_content">
 
       <div class="div_map"
            id="map"
@@ -146,6 +150,10 @@
           <div class="popContentTitle">志愿者类别：
             <span>{{ selInfo.categories }}</span>
           </div>
+          <div class="div_resi_more">
+            <div @click="toPeople"
+                 class="span_resi_more">更多</div>
+          </div>
         </div>
         <div v-show="selPlaceType==='dangerous_chemicals'">
           <div class="popTitle">企业信息</div>
@@ -367,10 +375,12 @@
         </div>
 
       </div>
-      <a href="#"
-         id="popup-goMore"
-         class="popup-goMore">更多>>>></a>
+
     </div>
+
+    <people v-if="showPeopleInfo"
+            :uid="selUserId"
+            ref="ref_people"></people>
   </div>
 
 </template>
@@ -399,6 +409,7 @@ import { requestPost } from "@/js/dai/request";
 import cptTb from "@/views/modules/visual/cpts/tb";
 import cptCard from "@/views/modules/visual/cpts/card";
 import ScreenLoading from "@/views/modules/visual/cpts/loading";
+import People from "../../basicinfo/people";
 
 var centerPointGlobal = [120.664619, 36.504963]
 
@@ -521,8 +532,7 @@ const vueGis = {
 
       //下钻层级记录
       runNum: 0,
-      runAgencyArray: [],
-      selUserId: '',
+      routerArray: [],
       center: [],
       zoom: null,
       parentPolygon: [],
@@ -599,17 +609,17 @@ const vueGis = {
         'zhaoshizhaohuojingshenbing': require('../../../../../assets/img/shuju/fiveLayer/zhaoshizhaohuojingshenbing.png'),
 
 
-        'co_yjdw': require('../../../../../assets/img/shuju/fiveLayer/co_yjdw.png'),
+        'yjdw': require('../../../../../assets/img/shuju/fiveLayer/yjdw.png'),
         'sr_gy': require('../../../../../assets/img/shuju/fiveLayer/sr_gy.png'),
         'sr_gc': require('../../../../../assets/img/shuju/fiveLayer/sr_gc.png'),
-        'co_whdw': require('../../../../../assets/img/shuju/fiveLayer/co_whdw.png'),
+        'whdw': require('../../../../../assets/img/shuju/fiveLayer/whdw.png'),
         'sr_ggld': require('../../../../../assets/img/shuju/fiveLayer/sr_ggld.png'),
-        'co_lwh': require('../../../../../assets/img/shuju/fiveLayer/co_lwh.png'),
+        'lwh': require('../../../../../assets/img/shuju/fiveLayer/lwh.png'),
         'sr_tyc': require('../../../../../assets/img/shuju/fiveLayer/sr_tyc.png'),
-        'co_lyjlb': require('../../../../../assets/img/shuju/fiveLayer/co_lyjlb.png'),
+        'lyjlb': require('../../../../../assets/img/shuju/fiveLayer/lyjlb.png'),
         'sr_yjy': require('../../../../../assets/img/shuju/fiveLayer/sr_yjy.png'),
-        'co_zaxld': require('../../../../../assets/img/shuju/fiveLayer/co_zaxld.png'),
-        'co_qt': require('../../../../../assets/img/shuju/fiveLayer/co_qt.png'),
+        'zaxld': require('../../../../../assets/img/shuju/fiveLayer/zaxld.png'),
+        'other': require('../../../../../assets/img/shuju/fiveLayer/other.png'),
         'sr_jzz': require('../../../../../assets/img/shuju/fiveLayer/sr_jzz.png'),
         'sr_djc': require('../../../../../assets/img/shuju/fiveLayer/sr_djc.png'),
         'sr_rfqck': require('../../../../../assets/img/shuju/fiveLayer/sr_rfqck.png'),
@@ -652,7 +662,9 @@ const vueGis = {
       showPopup: false,
 
       selPlaceType: '',
-      selInfo: {}
+      selInfo: {},
+      selUserId: '',
+      showPeopleInfo: false
 
     }
   },
@@ -691,13 +703,17 @@ const vueGis = {
   },
   methods: {
 
+    toPeople () {
+      this.showPeopleInfo = true
+    },
+
     //添加覆盖层
     addOverlay () {
       // 使用变量存储弹窗所需的 DOM 对象
       var container = document.getElementById("popup");
       var closer = document.getElementById("popup-closer");
       var content = document.getElementById("popup-content");
-      var goMore = document.getElementById("popup-goMore") ? document.getElementById("popup-goMore") : null
+
 
       // 创建一个弹窗 Overlay 对象
       this.overlay = new Overlay({
@@ -720,11 +736,7 @@ const vueGis = {
         closer.blur();
         return false;
       };
-      if (goMore) {
-        goMore.onclick = function () {
-          _that.$emit('lookMore')
-        };
-      }
+
     },
 
     //注册地图点击事件
@@ -753,6 +765,8 @@ const vueGis = {
       }
       this.selPlaceType = info.placeType
       if (info.placeType === 'resi' || info.placeType === 'specil_resi') {//综合治理图层和公共服务图层中的失能人员、失智人员
+        info.id = "dd0bd55db0ca4b629c40bc914a08368e"
+        this.selUserId = info.id
         this.loadResi(info)
       }
       if (info.placeType === 'public_service') {//公共服务图层
@@ -788,7 +802,7 @@ const vueGis = {
     },
 
     async loadResi (info) {
-      const url = "/epmetuser/icresiuser/resi-brief/" + 'dd0bd55db0ca4b629c40bc914a08368e'
+      const url = "/epmetuser/icresiuser/resi-brief/" + info.id
       // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
 
       let params = {}
@@ -822,7 +836,7 @@ const vueGis = {
         }
         this.selInfo = JSON.parse(JSON.stringify(data))
 
-        this.handleShowPopup(coordinate, true)
+        this.handleShowPopup(coordinate)
 
       } else {
         this.$message.error(msg)
@@ -850,7 +864,7 @@ const vueGis = {
         this.selInfo = JSON.parse(JSON.stringify(data))
 
 
-        this.handleShowPopup(coordinate, false)
+        this.handleShowPopup(coordinate)
 
       } else {
         this.$message.error(msg)
@@ -869,7 +883,7 @@ const vueGis = {
         let coordinate = [info.longitude, info.latitude]
         this.selInfo = JSON.parse(JSON.stringify(data))
 
-        this.handleShowPopup(coordinate, false)
+        this.handleShowPopup(coordinate)
 
 
 
@@ -902,7 +916,7 @@ const vueGis = {
         this.selInfo = JSON.parse(JSON.stringify(data))
 
 
-        this.handleShowPopup(coordinate, false)
+        this.handleShowPopup(coordinate)
 
       } else {
         this.$message.error(msg)
@@ -930,7 +944,7 @@ const vueGis = {
         this.selInfo = JSON.parse(JSON.stringify(data))
 
 
-        this.handleShowPopup(coordinate, false)
+        this.handleShowPopup(coordinate)
 
       } else {
         this.$message.error(msg)
@@ -958,7 +972,7 @@ const vueGis = {
         this.selInfo = JSON.parse(JSON.stringify(data))
 
 
-        this.handleShowPopup(coordinate, false)
+        this.handleShowPopup(coordinate)
 
       } else {
         this.$message.error(msg)
@@ -986,7 +1000,7 @@ const vueGis = {
         this.selInfo = JSON.parse(JSON.stringify(data))
 
 
-        this.handleShowPopup(coordinate, false)
+        this.handleShowPopup(coordinate)
 
       } else {
         this.$message.error(msg)
@@ -1048,12 +1062,8 @@ const vueGis = {
     },
 
 
-    handleShowPopup (coordinate, isShowMore) {
-      if (isShowMore) {
-        document.getElementById("popup-goMore").style.display = 'block'
-      } else {
-        document.getElementById("popup-goMore").style.display = 'none'
-      }
+    handleShowPopup (coordinate) {
+
       // console.log(this.overlay.getElement())
       let content = document.getElementById("popup-content");
       this.overlay.getElement().style.display = 'block'
@@ -1270,40 +1280,40 @@ const vueGis = {
 
       if (code === 0) {
         this.iconArrays = data.list
-        // this.iconArrays = [
-        //   {
-        //     categoryKey: "resi_xfry",
-        //     content: "信访人员",
-        //     id: "123",
-        //     latitude: "36.082230",
-        //     longitude: "120.3868167667315",
-        //     placeType: 'resi'
-        //   },
-        //   {
-        //     categoryKey: "sr_gy",
-        //     content: "公园",
-        //     id: "123",
-        //     latitude: "36.062227",
-        //     longitude: "120.389455",
-        //     placeType: 'public_service'
-        //   },
-        //   {
-        //     categoryKey: "ep_scjgqy",
-        //     content: "生产加工企业",
-        //     id: "123",
-        //     latitude: "36.072214",
-        //     longitude: "120.389455",
-        //     placeType: 'dangerous_chemicals'
-        //   },
-        //   {
-        //     categoryKey: "ps_wss",
-        //     content: "卫生所（室）",
-        //     id: "123",
-        //     latitude: "36.07394505338441",
-        //     longitude: "120.3868167667315",
-        //     placeType: 'city_management'
-        //   }
-        // ]
+        this.iconArrays = [
+          {
+            categoryKey: "resi_xfry",
+            content: "信访人员",
+            id: "123",
+            latitude: "36.082230",
+            longitude: "120.3868167667315",
+            placeType: 'resi'
+          },
+          {
+            categoryKey: "sr_gy",
+            content: "公园",
+            id: "123",
+            latitude: "36.062227",
+            longitude: "120.389455",
+            placeType: 'public_service'
+          },
+          {
+            categoryKey: "ep_scjgqy",
+            content: "生产加工企业",
+            id: "123",
+            latitude: "36.072214",
+            longitude: "120.389455",
+            placeType: 'dangerous_chemicals'
+          },
+          {
+            categoryKey: "ps_wss",
+            content: "卫生所（室）",
+            id: "123",
+            latitude: "36.07394505338441",
+            longitude: "120.3868167667315",
+            placeType: 'city_management'
+          }
+        ]
         this.iconArrays.forEach((item, index) => {
 
           item.url = this.iconUrlArray[item.categoryKey]
@@ -1438,26 +1448,10 @@ const vueGis = {
     },
 
     //返回所选组织
-    handleClickAgency (index) {
-
-      const cutNum = this.runAgencyArray.length - index//要减去的长度
-      this.runNum = this.runNum - cutNum
+    handleClickRouter (index) {
 
-      this.orgData = this.runAgencyArray[index]
-
-      for (let i = 0; i < cutNum; i++) {
-        this.runAgencyArray.pop()
-      }
+      this.showPeopleInfo = false
 
-      this.orgId = this.orgData.id
-      this.orgLevel = this.orgData.level
-      this.center = this.orgData.center
-      this.zoom = this.orgData.zoom
-
-      this.$nextTick(() => {
-        this.refreshMap(true)
-        this.$forceUpdate()
-      });
 
 
     },
@@ -1865,7 +1859,7 @@ const vueGis = {
     ...mapGetters(["clientHeight"])
 
   },
-  components: { cptTb, cptCard, ScreenLoading },
+  components: { cptTb, cptCard, ScreenLoading, People },
 }
 export default vueGis;
 </script>
@@ -1899,6 +1893,20 @@ export default vueGis;
   color: #ffffff;
   margin-top: 5px;
 }
+
+.div_resi_more {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.span_resi_more {
+  font-size: 16px;
+  text-decoration: underline;
+}
+.span_resi_more:hover {
+  cursor: pointer;
+}
 </style>
 
 <style lang="scss" >
@@ -1967,9 +1975,7 @@ export default vueGis;
 .popup-content {
   width: 300px;
 }
-.popup-goMore {
-  margin: 20px 0;
-}
+
 .ol-popup-closer:after {
   content: "✖";
   // color: rgba(1, 17, 104, 1);