志愿者图标展示

src/views/next/dialog-module/resident-info/info.json

@@ -162,27 +162,6 @@
         "multiSelect": false,
         "groupLabel": null
       },
-      {
-        "itemId": "20211216164552_1011",
-        "tableName": "ic_resi_user",
-        "parentItemId": "0",
-        "label": "备注",
-        "itemType": "textarea",
-        "itemGroupId": "3fdd0380deff5b30f45376cdf995d1c1_0",
-        "required": 0,
-        "validType": "",
-        "defaultValue": "",
-        "optionSourceType": "local",
-        "optionSourceValue": "",
-        "sort": 15,
-        "placeholder": "",
-        "columnName": "REMARKS",
-        "columnNum": 0,
-        "options": [],
-        "childGroup": null,
-        "multiSelect": false,
-        "groupLabel": null
-      },
       {
         "itemId": "20211216164552_1116",
         "tableName": "ic_resi_user",

src/views/next/screen-content-map/index.vue

@@ -23,15 +23,26 @@
       </div>
 
       <div class="map-bottom-decoration"></div>
-      <div class="map-tab-list" v-if="mapLevel == 'grid' && mapTabList.length != 0">
+      <div class="map-tab-list-grid" v-if="mapLevel == 'grid' && mapTabListGrid.length != 0">
-        <div :class="['tab-item']" v-for="(item, index) in mapTabList" :key="index" @click="chooseTab(item)">
+        <div :class="['tab-item']" v-for="(item, index) in mapTabListGrid" :key="index" @click="chooseTabGrid(item)">
-          <!-- <div class="icon">
+          {{ item.name }}
+        </div>
+      </div>
+
+      <div class="map-tab-list">
+      <div
+        :class="['tab-item', currentTab === item.label ? 'active' : '']"
+        v-for="(item, index) in mapTabList"
+        :key="index"
+        @click="chooseTab(item)"
+      >
+        <div class="icon">
           <img
             :src="currentTab === item.label ? item.selectIcon : item.icon"
             alt="图标"
           />
-        </div> -->
+        </div>
-          {{ item.name }}
+        <div class="label">{{ item.label }}</div>
       </div>
       </div>
 
@@ -120,7 +131,11 @@ export default {
         { label: '已结案', value: 0 },
         { label: '网格员', value: 0 }
       ],
-      mapTabList: [],
+      mapTabListGrid: [],
+      mapTabList: [
+        // { icon: require('@/assets/images/red-cross-blue-icon.png'), label: '红十字会', selectIcon: require('@/assets/images/red-cross-yellow-icon.png') },
+        { icon: require('@/assets/images/volunteer-blue-icon.png'), label: '志愿者', selectIcon: require('@/assets/images/volunteer-yellow-icon.png') }
+      ],
       currentTab: '',
       searchOptionList: [
         { label: '以房找人', value: '1' },
@@ -323,7 +338,7 @@ export default {
     },
     getGridList(id) {
       getGrid(id).then(res => {
-        this.mapTabList = res.data
+        this.mapTabListGrid = res.data
       }).catch(err => {
         console.error('获取网格列表', err)
       })
@@ -376,22 +391,22 @@ export default {
     },
 
     // 切换红十字会、志愿者tab
-    async chooseTab(item) {
+    async chooseTab(tab) {
-      // if (this.currentTab && (this.currentTab === tab.label)) {
+      if (this.currentTab && (this.currentTab === tab.label)) {
-      //   this.currentTab = ''
+        this.currentTab = ''
-      // } else {
+      } else {
-      //   this.currentTab = tab.label
+        this.currentTab = tab.label
-      // }
+      }
-
-      // if (this.currentTab === '红十字会') {
-      //   Bus.$emit('drawRedCrossMarker')
-      // } else if (this.currentTab === '志愿者') {
-      //   Bus.$emit('drawVolunteerMarker')
-      // } else {
-      //   Bus.$emit('clearMarker')
-      // }
-
 
+      if (this.currentTab === '红十字会') {
+        Bus.$emit('drawRedCrossMarker')
+      } else if (this.currentTab === '志愿者') {
+        Bus.$emit('drawVolunteerMarker')
+      } else {
+        Bus.$emit('clearMarker')
+      }
+    },
+    chooseTabGrid(item){
       this.set_gridInfoDialog(true)
       Bus.$emit('emitgridInfoDialogData', { gridId: item.id || '1534561053840998402' })
     },
@@ -667,7 +682,7 @@ img {
     background-size: 100% 100%;
   }
 
-  .map-tab-list {
+  .map-tab-list-grid {
     position: absolute;
     right: calc(560px + 10px + 32px);
     bottom: 50%;
@@ -712,6 +727,58 @@ img {
       //   margin-top: 6px;
       // }
 
+      &.active {
+        background: rgba(8, 31, 57, 0.61);
+        border: 1px solid #f8bb00;
+
+        .label {
+          background: linear-gradient(0deg, #ffa229 0%, #f8fdfe 70%);
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+          color: transparent;
+        }
+      }
+    }
+  }
+  .map-tab-list {
+    position: absolute;
+    left: calc(560px + 10px + 32px);
+    bottom: 60px;
+    z-index: 20;
+
+    .tab-item {
+      width: 115px;
+      height: 36px;
+      background: rgba(8, 31, 57, 0.61);
+      border: 1px solid #12d0ff;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      padding-left: 13px;
+      cursor: pointer;
+
+      .icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      .label {
+        font-size: 16px;
+        font-family: "PingFang Regular";
+        font-weight: 900;
+        background: linear-gradient(0deg, #25c2eb 0%, #f8fdfe 70%);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        color: transparent;
+        font-weight: 900;
+        margin-left: 6px;
+      }
+
+      &+.tab-item {
+        margin-top: 6px;
+      }
+
       &.active {
         background: rgba(8, 31, 57, 0.61);
         border: 1px solid #f8bb00;

src/views/next/screen-content-right/index.vue

@@ -15,7 +15,7 @@
         <component :is="currentCom"></component>
       </transition>
     </div>
-    <div
+    <!-- <div
       :class="['confilct-mediation', collapse ? 'collapse' : '']"
       @click.stop="navigateToTheRedCross"
     >
@@ -23,7 +23,7 @@
         <img src="@/assets/images/red-cross-blue-icon.png" alt="" />
       </div>
       <div class="tip">红十字会</div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -163,6 +163,7 @@ export default {
     box-sizing: border-box;
   }
   .confilct-mediation {
+    
     width: 100px;
     height: 26px;
     background: url("~@/assets/images/conflict-bg.png") no-repeat;