From 900884aaf8c89190c70111482aef3a1fa09e3d30 Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Fri, 17 Jun 2022 10:52:57 +0800
Subject: [PATCH] 11

---
 .../scss/modules/visual/fiveLayerMap.scss     | 181 ++++++--------
 .../communityGovern/fivelayers/mapIndex.vue   | 225 +++++++++++++++---
 2 files changed, 271 insertions(+), 135 deletions(-)

diff --git a/src/assets/scss/modules/visual/fiveLayerMap.scss b/src/assets/scss/modules/visual/fiveLayerMap.scss
index 66bf9855..d203c0a1 100644
--- a/src/assets/scss/modules/visual/fiveLayerMap.scss
+++ b/src/assets/scss/modules/visual/fiveLayerMap.scss
@@ -49,7 +49,7 @@
   }
 
   .div_data {
-    flex: 0 0 622px;
+    flex: 0 0 600px;
     margin-left: 12px;
 
     .div_search {
@@ -115,7 +115,7 @@
       background-size: 100% 100%;
 
       .div_coverage{
-        padding: 30px 20px 30px 20px;
+        padding: 30px 10px 32px 10px;
         display: flex;
         justify-content: space-around;
 
@@ -143,92 +143,65 @@
 
       .div_category {
         box-sizing: border-box;
-        width: 100%;
-  
-      
+        height:238px;
+        padding:0 20px 20px;  
   
-        .info_loading {
-          margin-top: 50px;
-        }
-        .info_tip {
-          padding: 31px 0 0 19px;
+        .category_item {
+         
+          margin-bottom: 15px;
           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;
+          justify-content: start;
+         
+          // margin:auto;
+       
+         
+          .list_item {
+           
+            // padding: 18px 59px 0;
+            justify-content: start;
+            flex:0 0 135px;
+
+            > img {
+              height: 18px;
+              width: 18px;
             }
-            .last_line {
-              border: 1px dotted #1797ff00;
+            .item_content{
+              width:100px;
+        
+              margin-left:8px;
+              font-size: 16px;
+              font-family: PingFang SC;
+              font-weight: 400;
+              color: #D2E7FF;
             }
-            .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;
-                  }
-                }
-              }
+
+            .item_content_sel{
+              color: #99c7fb;
             }
+           
+          }
+
+          .list_item:hover{
+            cursor: pointer;
+          }
   
             ::v-deep .el-popper {
               padding: 0px;
             }
             //
-          }
+          
         }
+
+        
       }
 
+      .div_category {
+        /deep/ .el-scrollbar__wrap {
+          overflow-x: hidden !important;
+        }
+      }
+      
+
     }
 
     .div_info {
@@ -281,39 +254,35 @@
           .list_item {
             display: flex;
             padding: 18px 59px 0;
-            justify-content: space-between;
+            justify-content: space-between;         
 
-            .list_item_col {
-              flex: 0 0 240px;
-              display: flex;
+            > img {
+              height: 36px;
+              width: 36px;
+            }
 
-              > 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_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;
-                }
+              .item_count {
+                margin-top: 10px;
+                font-size: 28px;
+                font-family: PingFang SC;
+                font-weight: bold;
+                color: #00fffc;
               }
             }
+            
           }
 
           ::v-deep .el-popper {
@@ -324,11 +293,7 @@
       }
     }
 
-    .div_tips {
-      /deep/ .el-scrollbar__wrap {
-        overflow-x: hidden !important;
-      }
-    }
+    
   }
 }
 
diff --git a/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue b/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue
index d6c82b5a..5bc203db 100644
--- a/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue
+++ b/src/views/modules/visual/communityGovern/fivelayers/mapIndex.vue
@@ -35,32 +35,29 @@
               <span>{{item.label}}</span>
             </div>
           </div>
+          <div class="div_category">
+            <el-scrollbar style="height:98%">
 
-          <el-scrollbar style="height:98%">
-
-            <div class="div_category">
               <div v-for="(item,index) in categoryListshow"
                    :key="index"
                    class="category_item">
-                <div class="list_item">
-                  <div v-for="(colItem,colIndex) in item"
-                       :key="colIndex"
-                       class="list_item_col"
-                       @click="handleTo(colItem)">
-                    <img :src="colItem.dataIcon"
-                         alt />
-                    <div class="item_content">
-                      <div class="item_label">{{colItem.categoryName}}</div>
 
-                    </div>
+                <div v-for="(colItem,colIndex) in item"
+                     :key="colIndex"
+                     class="list_item"
+                     @click="handleClickCategory(index,colIndex)">
+                  <img :src="colItem.dataIcon"
+                       alt />
+                  <span :class="['item_content',colItem.sel?'item_content_sel':'']">{{colItem.categoryName}}
+
+                  </span>
 
-                  </div>
                 </div>
-                <div :class="['item_line',{'last_line':index==(categoryListshow.length-1)}]"></div>
+
               </div>
 
-            </div>
-          </el-scrollbar>
+            </el-scrollbar>
+          </div>
         </div>
         <div class="div_info">
           <!-- <el-scrollbar style="height:98%">
@@ -231,7 +228,6 @@ const vueGis = {
   name: 'HomeMap',
   data () {
     return {
-
       centerPoint: [],//中心点位置
       zoom: 14,//缩放范围：区14
       minZoom: 1,//最小缩放
@@ -345,8 +341,20 @@ const vueGis = {
     },
 
     //点击类别
-    handleClickCategory (index) {
+    handleClickCategory (index, colIndex) {
+      this.categoryListshow[index][colIndex].sel = !this.coverageTypesList[index].sel
+      this.categoryList[index].sel = !this.coverageTypesList[index].sel
+      let item = this.coverageTypesList[index]
+
+      this.$set(this.coverageTypesList, index, item)
 
+      this.coverageTypes = []
+
+      this.coverageTypesList.forEach(element => {
+        if (element.select) {
+          this.coverageTypes.push(element.value)
+        }
+      });
     },
 
     async loadCategoryList () {
@@ -360,26 +368,189 @@ const vueGis = {
       const { data, code, msg } = await requestPost(url, params)
 
       if (code === 0) {
-        this.categoryList = data
+        // this.categoryList = data
+        this.categoryList = [
+          {
+            categoryKey: "0",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "1",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "2",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "3",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "4",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "0",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "1",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "2",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "3",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "4",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "0",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "1",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "2",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "3",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "4",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "0",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "1",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "2",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "3",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "4",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "0",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "1",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "2",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "3",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "4",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "0",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "1",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "2",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "3",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "4",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "0",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "1",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "2",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "3",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "4",
+            categoryName: "机关直属部门"
+          },
+          {
+            categoryKey: "0",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "1",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "2",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "3",
+            categoryName: "deserunt"
+          },
+          {
+            categoryKey: "4",
+            categoryName: "deserunt"
+          },
+        ]
 
         this.categoryListshow = []
         let itemArray = []
+
         this.categoryList.forEach((item, index) => {
           if (!item.dataIcon) {
             item.dataIcon = require('../../../../../assets/img/shuju/volunteer3.png')
           }
 
-          if (index % 4 === 0) {//偶数
-            itemArray.push(item)
-          } else {
-            itemArray.push(item)
-            this.categoryListshow.push(itemArray)
-            itemArray = []
-          }
+          item.sel = true
 
         });
 
+        let chunk = 4
+        for (let i = 0, j = this.categoryList.length; i < j; i += chunk) {
+          this.categoryListshow.push(this.categoryList.slice(i, i + chunk))
+        }
+
 
+        console.log(this.categoryListshow)
 
       } else {
         this.$message.error(msg)