From 43e724bac709d0d60d86b44abb1f33e9f65cdbea Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Fri, 17 Jun 2022 09:37:40 +0800
Subject: [PATCH] 11

---
 .../scss/modules/visual/fiveLayerMap.scss     | 94 +++++++++++++++++++
 .../communityGovern/fivelayers/mapIndex.vue   | 72 +++-----------
 2 files changed, 108 insertions(+), 58 deletions(-)

diff --git a/src/assets/scss/modules/visual/fiveLayerMap.scss b/src/assets/scss/modules/visual/fiveLayerMap.scss
index cef83e7a..024fea4a 100644
--- a/src/assets/scss/modules/visual/fiveLayerMap.scss
+++ b/src/assets/scss/modules/visual/fiveLayerMap.scss
@@ -140,6 +140,100 @@
           cursor: pointer;
         }
       }
+
+      .div_category {
+        box-sizing: border-box;
+        width: 100%;
+  
+        height: calc(88vh - 302px - 10px);
+        color: #fff;
+        background: url('../../../img/modules/visual/warning-box.png') no-repeat
+          center;
+        background-size: 100% 100%;
+        // padding: 45px 21px 35px 24px;
+  
+        .info_loading {
+          margin-top: 50px;
+        }
+        .info_tip {
+          padding: 31px 0 0 19px;
+          display: flex;
+          > img {
+            height: 34px;
+            width: 46px;
+          }
+  
+          .tip_title {
+            line-height: 34px;
+            margin-left: 7px;
+            font-size: 22px;
+            font-family: PingFang SC;
+            font-weight: 800;
+            color: #ffffff;
+          }
+        }
+  
+        .info_list {
+          margin-top: 9px;
+  
+          .item {
+            .item_line {
+              margin-top: 13px;
+              margin-left: 24px;
+              width: 517px;
+              height: 0px;
+              border: 1px dotted #1797ff31;
+              border-width: 0.5px;
+            }
+            .last_line {
+              border: 1px dotted #1797ff00;
+            }
+            .list_item {
+              display: flex;
+              padding: 18px 59px 0;
+              justify-content: space-between;
+  
+              .list_item_col {
+                flex: 0 0 240px;
+                display: flex;
+  
+                > img {
+                  height: 76px;
+                  width: 76px;
+                }
+  
+                .item_content {
+                  margin-left: 10px;
+                  height: 76px;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+  
+                  .item_label {
+                    font-size: 18px;
+                    font-family: PingFang SC;
+                    font-weight: 400;
+                    color: #ffffff;
+                  }
+                  .item_count {
+                    margin-top: 10px;
+                    font-size: 28px;
+                    font-family: PingFang SC;
+                    font-weight: bold;
+                    color: #00fffc;
+                  }
+                }
+              }
+            }
+  
+            ::v-deep .el-popper {
+              padding: 0px;
+            }
+            //
+          }
+        }
+      }
+
     }
 
     .div_info {
diff --git a/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue b/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue
index 8ebb570e..d6c82b5a 100644
--- a/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue
+++ b/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue
@@ -29,7 +29,7 @@
 
             <div class="coverage_item"
                  @click="handleClickCoverage(index)"
-                 v-for="(item,index) in coverageTypes"
+                 v-for="(item,index) in coverageTypesList"
                  :key="index">
               <img :src="item.select?selImg:noSelImg" />
               <span>{{item.label}}</span>
@@ -56,14 +56,14 @@
 
                   </div>
                 </div>
-                <div :class="['item_line',{'last_line':index==(listDatashow.length-1)}]"></div>
+                <div :class="['item_line',{'last_line':index==(categoryListshow.length-1)}]"></div>
               </div>
 
             </div>
           </el-scrollbar>
         </div>
         <div class="div_info">
-          <el-scrollbar style="height:98%">
+          <!-- <el-scrollbar style="height:98%">
             <div class="info_tip">
               <img src="../../../../../assets/img/shuju/title-tip.png"
                    alt />
@@ -98,7 +98,7 @@
               </div>
 
             </div>
-          </el-scrollbar>
+          </el-scrollbar> -->
         </div>
 
       </div>
@@ -263,7 +263,7 @@ const vueGis = {
 
       centerFlag: 'point',//定义中心点的flag  point点 fit 自适应
 
-      coverageTypes: [//图层类型。五大图层：zhzl：综合治理图层；yjcl：应急处置图层；aqsc：安全生产图层；csgl：城市管理图层；ggfw：公共服务图层
+      coverageTypesList: [//图层类型。五大图层：zhzl：综合治理图层；yjcl：应急处置图层；aqsc：安全生产图层；csgl：城市管理图层；ggfw：公共服务图层
         {
           select: true,
           label: '综合治理图层',
@@ -324,20 +324,20 @@ const vueGis = {
     //加载当前园区的标注
     this.loadPolygon(this.subAgencyArray)
     this.setMapLocation()
-    await this.loadList()
+    await this.loadCategoryList()
 
   },
   methods: {
     //点击图层
     handleClickCoverage (index) {
-      this.coverageTypes[index].select = !this.coverageTypes[index].select
-      let item = this.coverageTypes[index]
+      this.coverageTypesList[index].select = !this.coverageTypesList[index].select
+      let item = this.coverageTypesList[index]
 
-      this.$set(this.coverageTypes, index, item)
+      this.$set(this.coverageTypesList, index, item)
 
       this.coverageTypes = []
 
-      this.coverageTypes.forEach(element => {
+      this.coverageTypesList.forEach(element => {
         if (element.select) {
           this.coverageTypes.push(element.value)
         }
@@ -349,53 +349,9 @@ const vueGis = {
 
     },
 
-
-
-
-    //获取右侧infolist数据
-    async loadList () {
-      this.infoLoading = true
-      // const url = "/data/aggregator/coverage/dataList"
-      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/dataList"
-      let params = {
-        coverageTypes: this.coverageTypes,
-        categoryKeys: this.categoryKeys,
-        search: '',
-        pageNo: this.pageNo,
-        pageSize: this.pageSize
-      }
-
-      const { data, code, msg } = await requestPost(url, params)
-      this.infoLoading = false
-      if (code === 0) {
-        this.listData = data
-        // this.listData = this.listData1
-        this.listDatashow = []
-        let itemArray = []
-        this.listData.forEach((item, index) => {
-          if (!item.dataIcon) {
-            item.dataIcon = require('../../../../../assets/img/modules/visual/dibao.png')
-          }
-
-          if (index % 2 === 0) {//偶数
-            itemArray.push(item)
-          } else {
-            itemArray.push(item)
-            this.listDatashow.push(itemArray)
-            itemArray = []
-          }
-
-        });
-
-
-      } else {
-        this.$message.error(msg)
-      }
-    },
-
     async loadCategoryList () {
-      // const url = "/data/aggregator/coverage/categoryList"
-      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/coverage/categoryList"
+      // const url = "/gov/org/coverage/categoryList"
+      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/coverage/categoryList"
       let params = {
         coverageTypes: this.coverageTypes,
 
@@ -408,9 +364,9 @@ const vueGis = {
 
         this.categoryListshow = []
         let itemArray = []
-        this.listData.forEach((item, index) => {
+        this.categoryList.forEach((item, index) => {
           if (!item.dataIcon) {
-            item.dataIcon = require('../../../../assets/img/shuju/volunteer3.png')
+            item.dataIcon = require('../../../../../assets/img/shuju/volunteer3.png')
           }
 
           if (index % 4 === 0) {//偶数