衣食住行撒点功能

src/ajax/axios.ts

@@ -21,8 +21,11 @@ Axios.interceptors.request.use(
 
 Axios.interceptors.response.use(
   (response) => {
-    // TODO 返回的数据status判断错误操作等……
+    if (response.config.headers.__show_loading) {
       store.commit('SET_LOADING', false)
+    }
+
+    // TODO 返回的数据status判断错误操作等……
     return response.data
   },
   (error) => {
@@ -96,6 +99,7 @@ const ajax = ({
       'Access-Control-Allow-Headers':
         'Authorization,Origin, X-Requested-With, Content-Type, Accept',
       'Access-Control-Allow-Methods': '*',
+      __show_loading: showLoading,
       ...headers,
     },
   }

src/assets/style/reset.styl

@@ -16,7 +16,7 @@ $color-main = #5BD5FF
       font-family $font-barlow
   .ant-select
     z-index 99
-    font-size .08rem
+    font-size .09rem
     color #fff
     min-width .6rem
     .ant-select-selector
@@ -30,7 +30,7 @@ $color-main = #5BD5FF
         line-height .2rem
     .ant-select-arrow
       color #fff
-      font-size .08rem
+      font-size .09rem
       right .05rem
       width auto
       height auto
@@ -39,11 +39,11 @@ $color-main = #5BD5FF
   color $color-main
   background rgba(0,0,0,0.4)
   border-radius 0
-  font-size .08rem
+  font-size .09rem
   z-index 99999
   .ant-select-item
     color #fff
-    font-size .08rem
+    font-size .09rem
     line-height .12rem
     &:hover
     &.ant-select-item-option-active
@@ -52,11 +52,11 @@ $color-main = #5BD5FF
   .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
     color $color-main
     background rgba(0,0,0,0.4)
-    font-size .08rem
+    font-size .09rem
     font-weight bold
 
 .ant-tooltip-inner
-  max-width 3rem
+  min-width 2rem
   min-height .2rem
   padding .05rem .08rem
   background $primary-bg

src/components/MyComponent/MyForm/my-form.vue

@@ -32,7 +32,7 @@ import { defineComponent, PropType, ref } from 'vue'
 import MyModal from '../MyModal/my-modal.vue'
 
 interface FormatterType {
-  [propName: string]: <T>(val: T) => T
+  [propName: string]: <T>(val: T, data?: DataType) => T
 }
 interface DataType {
   [propName: string]: string | number | string[] | number[]
@@ -107,7 +107,7 @@ export default defineComponent({
       key.match(/=?(\w*)[#>\*:]?/)
       const dataKey = RegExp.$1
       if (formatter && key.match(/>(\w*)[#\*:]?/)) {
-        return formatter[RegExp.$1](data[dataKey])
+        return formatter[RegExp.$1](data[dataKey], data)
       }
       return data[dataKey] || '无'
     }
@@ -156,7 +156,7 @@ export default defineComponent({
       display flex
       align-items center
       p
-        padding .02rem .05rem
+        padding .03rem .05rem
         box-sizing border-box
       >.content
         flex 1

src/components/MyComponent/MyMap/my-map.vue

@@ -220,7 +220,6 @@ export default defineComponent({
     }: PointProp) {
       if (!map) return
       const points = getMapPoints({ data, key, labelKey, icon, size, color })
-      console.log(points)
       map.add(points)
       return points
     }

src/components/MyComponent/MyTable/my-table.vue

@@ -48,7 +48,7 @@ import MyModal from '../MyModal/my-modal.vue'
 import MyEmpty from '../MyEmpty/my-empty.vue'
 
 interface FormatterType {
-  [propName: string]: <T>(val: T) => T
+  [propName: string]: <T>(val: T, data?: DataType) => T
 }
 interface DataType {
   [propName: string]: string | number | string[] | number[]
@@ -138,7 +138,7 @@ export default defineComponent({
       key.match(/(\w*)[#>:]?/)
       const dataKey = RegExp.$1
       if (formatter && key.match(/>(\w*)[#:]?/)) {
-        return formatter[RegExp.$1](data[dataKey])
+        return formatter[RegExp.$1](data[dataKey], data)
       }
       return data[dataKey] || ''
     }
@@ -177,7 +177,7 @@ export default defineComponent({
           background transparent
   $full()
   p
-    padding 0.04rem .05rem
+    padding .04rem .05rem
     margin 0
     flex 1
     box-sizing border-box

src/components/MyComponent/MyTitle/my-title.vue

@@ -49,6 +49,10 @@ export default defineComponent({
     const handleThemeSelect = (type: string) => {
       if (curBtn.value === type) return
       store.commit('SET_CURRENT_THEME', type)
+
+      // 切换主题时重置地图点位类型使其重新撒点
+      store.commit('SET_POINT_TYPE', null)
+      store.commit('SET_CHECKED_KEYS', null)
     }
     timer.value = setInterval(() => {
       time.value = getTime()

src/store/actions.ts

@@ -23,7 +23,7 @@ export default {
     dispatch('GET_PUBLICSAFE_ECONOMIC')
     dispatch('GET_PUBLICSAFE_TRUE_COMPANY')
     dispatch('GET_YOUSUBIDA_RANK')
-    dispatch('GET_YOUSUBIDA_CLASSIFICATION_RANK', '综合')
+    dispatch('GET_YOUSUBIDA_CLASSIFICATION_RANK')
     dispatch('GET_URGENTCASE', {
       bxmaintainType: '1',
       // status_in: '待派遣,已派单',
@@ -268,13 +268,11 @@ export default {
   },
 
   // 公共安全 - 重点关注楼宇
-  async GET_PUBLICSAFE_BUILDINGS(
-    {
+  async GET_PUBLICSAFE_BUILDINGS({
     commit,
   }: {
     commit: Commit
-    },
-  ): Promise<void> {
+  }): Promise<void> {
     const { content } = (
       await ajax.get({
         url: api.GET_PUBLICSAFE_BUILDINGS,
@@ -602,19 +600,15 @@ export default {
     const { content } = (await ajax.get({ url: api.GET_YOUSUBIDA_RANK })).data
     commit('SET_YOUSUBIDA_RANK', content)
   },
-  async GET_YOUSUBIDA_CLASSIFICATION_RANK(
-    {
+  async GET_YOUSUBIDA_CLASSIFICATION_RANK({
     commit,
   }: {
     commit: Commit
-    },
-    managementType: string
-  ): Promise<void> {
+  }): Promise<void> {
     // 有诉必答 - 分类排行
     const { content } = (
       await ajax.get({
         url: api.GET_YOUSUBIDA_CLASSIFICATION_RANK,
-        params: { managementType: managementType },
       })
     ).data
     commit('SET_YOUSUBIDA_CLASSIFICATION_RANK', content)

src/store/index.ts

@@ -100,6 +100,8 @@ export interface GlobalStateProps {
   showLoading: boolean
   curView: ViewType
   curMapType: string
+  curPointType: null | string
+  checkedKeys: string[]
   showCommunityPoints: boolean
   readonly zhenxing: any
   readonly weihai: any

src/store/mutations.ts

@@ -29,6 +29,25 @@ export default {
   SET_CURRENT_THEME(state: GlobalStateProps, val: ThemeType): void {
     state.curTheme = val
   },
+  SET_POINT_TYPE(state: GlobalStateProps, val: null | string): void {
+    state.curPointType = val
+  },
+  SET_CHECKED_KEYS(state: GlobalStateProps, val: null | string[]): void {
+    state.checkedKeys = val || [
+      'life',
+      'yi',
+      'shi',
+      'zhu',
+      'xing',
+      'other',
+      '非居',
+      'old',
+      'sign',
+      'history',
+      'community',
+      '居住',
+    ]
+  },
   SET_SHOW_COMMUNITY_POINTS(state: GlobalStateProps, val: boolean): void {
     state.showCommunityPoints = val
   },

src/store/state.ts

@@ -2,20 +2,37 @@ import { GlobalStateProps } from './index'
 
 export default {
   showLoading: false,
-  curMapType: '2D',
-  curView: { name: '南京东路街道', type: 'street' },
-  showCommunityPoints: false,
+  curMapType: '2D', // 2D、3D
+  curView: { name: '南京东路街道', type: 'street' }, // 当前屏幕（街道or工作站）
+  curPointType: null, // 当前地图撒点类型（null默认全部，还有衣食住行等）
+  checkedKeys: [
+    'life',
+    'yi',
+    'shi',
+    'zhu',
+    'xing',
+    'other',
+    '非居',
+    'old',
+    'sign',
+    'history',
+    'community',
+    '居住',
+  ],
   viewOptions: [
+    // 屏幕切换选项
     { name: '南京东路街道', type: 'street' },
     { name: '第一工作站', type: 'work1', id: '01001' },
     { name: '第二工作站', type: 'work2', id: '01002' },
     { name: '第三工作站', type: 'work3', id: '01003' },
   ],
+  showCommunityPoints: false, // 显示地图自带小区门牌幢、勾边点位
   communityOptions: [
+    // 小区选项
     { name: '振兴小区', type: '527635870583459840' },
     { name: '威海路62弄', type: '527635870583459841' },
   ],
-  curTheme: 'manage',
+  curTheme: 'manage', // 街道屏下当前主题（公共管理、公共服务、公共安全）
   zhenxing: {
     paths: [
       [-394.9643478722986, -682.7008812875049],

src/store/useStore.ts

+// import { createStore } from 'vuex'
+// import { computed } from 'vue'
+
+// const store = createStore({
+//   state: {},
+//   mutations: {
+//     changeState(state: any, payload: any) {
+//       state[payload.key] = payload.value
+//     },
+//   },
+// })
+// export default function useStore(key: string, value: unknown): any {
+//   store.commit('changeState', { key, value })
+//   const setFn = (val: unknown) => {
+//     store.commit('changeState', { key, val })
+//   }
+//   return [computed(() => store.state[key]), setFn]
+// }
+
+// // const [count, setCount] = useStore('count', 0)

src/view/components/map-btns.vue

@@ -22,7 +22,7 @@
         <template #title>
           <a-tree
             v-model:expandedKeys="expandedKeys"
-            v-model:checkedKeys="checkedKeys"
+            :checked-keys="checkedKeys"
             :tree-data="treeData"
             checkable
             @check="handleCheck"
@@ -206,16 +206,10 @@ export default defineComponent({
       //   value: 'cold',
       // },
     ])
-    const expandedKeys = ref(['居住', '非居'])
-    const checkedKeys = ref([
-      'community',
-      'life',
-      // 'cold',
-      'old',
-      'sign',
-      'history',
-    ])
+    const expandedKeys = ref(['居住', '非居', 'life'])
+    const checkedKeys = computed(() => store.state.checkedKeys)
     const handleCheck = (data: string[]) => {
+      store.commit('SET_CHECKED_KEYS', data)
       ctx.emit('point', data)
     }
     watch(
@@ -245,8 +239,10 @@ export default defineComponent({
 .btns-tip *
   color #fff !important
   font-size .1rem
+  padding .04rem .02rem
   .ant-checkbox-group-item
     display block
+    margin-bottom .02rem
 </style>
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
@@ -263,7 +259,7 @@ export default defineComponent({
     height @width
     margin-top .05rem
     cursor pointer
-    transition .3s ease
+    transition .2s ease
     background rgba(0,0,0,.6)
     $blur()
     &:hover

src/view/components/person-list.vue

@@ -28,6 +28,7 @@
 import { defineComponent, PropType, ref, watch } from 'vue'
 import empty from '@/assets/images/empty.png'
 import { ajax, api } from '@/ajax'
+import store from '@/store'
 
 export default defineComponent({
   name: 'CaseList',
@@ -46,6 +47,8 @@ export default defineComponent({
   emits: ['select'],
   setup(props, ctx) {
     const handleClick = (data: unknown) => {
+      console.log(data);
+
       ctx.emit('select', data)
     }
     const data = ref<any>([])
@@ -53,24 +56,32 @@ export default defineComponent({
       () => props.list,
       async (content) => {
         if (content && content.length > 0) {
-          content.forEach(async (item: any) => {
-            const { content: person } = (
-              await ajax.get({
+          store.commit('SET_LOADING', true)
+          const res = await Promise.all(
+            content.map(async (item: any) => {
+              return ajax.get({
                 url: api.GET_PERSON,
                 params: { pageSize: 100, liveAddr_l: item.addr },
+                showLoading: false,
+              })
             })
-            ).data
-            item.personInfo = person
+          )
+          if (res && res.length > 0) {
+            content.forEach((item: any, index: number) => {
+              item.personInfo =
+                (res[index] && res[index].data && res[index].data.content) || {}
             })
           }
-        data.value = content
+        }
+        store.commit('SET_LOADING', false)
+        data.value = content || []
       },
       { immediate: true }
     )
     const persons = (data: any) => {
       const { personInfo } = data
       if (personInfo && personInfo.length > 0) {
-        const result = personInfo.map((item: any) => item.cnName)
+        const result = personInfo.map((item: any) => item.cnName || item.enName)
         return result.join(' | ')
       }
       return '无'

src/view/components/search-view.vue

@@ -96,6 +96,7 @@ export default defineComponent({
         await ajax.get({
           url: api.GET_ROOM,
           params: { pageSize, addr_l: address },
+          showLoading: false,
         })
       ).data
       return content

src/view/drawers/case-drawer.vue

@@ -156,6 +156,9 @@ export default defineComponent({
     background rgba(70,83,97,.45)
     box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
     padding .05rem .1rem
+    p
+      font-size .12rem
+      font-weight bold
     span
       display inline-block
       font-size .08rem

src/view/drawers/population-drawer.vue

@@ -150,13 +150,14 @@
           </div>
           <m-form
             :template="[
-              'cnName:姓名|sex:性别',
+              'cnName:姓名>getName|sex:性别',
               'birthday:出生日期|roomNo:民族',
               'nationalityName:国籍|hometown:籍贯',
               'homtownAdmArea:户籍|certCode:证件号',
               'educationName:学历|maritalStatus:婚姻状况',
             ]"
             :data="personDetail"
+            :formatter="{ getName }"
             label-width="1.2rem"
           />
           <SubTitle>标签信息</SubTitle>
@@ -166,20 +167,22 @@
           <m-table
             :template="[
               '姓名|国籍/户籍|证件号|性别|婚姻状况|入住时间',
-              'cnName|nationalityName|certCode|sex|maritalStatus|time',
+              'cnName>getName|nationalityName|certCode|sex|maritalStatus|time',
             ]"
             selectable
             :data="roomInfo.personInfo"
+            :formatter="{ getName }"
             @select="selectPerson"
           />
           <SubTitle>历史居住人</SubTitle>
           <m-table
             :template="[
               '姓名|国籍/户籍|证件号|性别|婚姻状况|入住时间',
-              'cnName|nationalityName|certCode|sex|maritalStatus|time',
+              'cnName>getName|nationalityName|certCode|sex|maritalStatus|time',
             ]"
             selectable
             :data="roomInfo.personInfo"
+            :formatter="{ getName }"
             @select="selectPerson"
           />
         </template>
@@ -323,7 +326,9 @@ export default defineComponent({
       buildingRoomList.value = content
       showBuildingRoom.value = true
     }
-
+    const getName = (_: unknown, data: any) => {
+      return data.cnName || data.enName
+    }
     return {
       curTab,
       tabs,
@@ -339,6 +344,7 @@ export default defineComponent({
       showBuildingRoom,
       selectBuilding,
       buildingRoomList,
+      getName,
     }
   },
 })

src/view/hooks/useSwitchMap.ts

-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, nextTick } from 'vue'
 import { ajax, api } from '@/ajax'
 import store from '@/store'
+import smStar from '@/assets/images/star-sm.png'
+import star from '@/assets/images/star.png'
 
 export default function useSwitchMap(map: any): any {
   const curMapType = computed(() => store.state.curMapType)
@@ -34,6 +36,7 @@ export default function useSwitchMap(map: any): any {
   let boundary: any = null
   // 根据条件显示小区点和添加边界
   function setPointsAndBoundary(type: string) {
+    if (!map.value) return
     boundary && boundary.remove()
     const show = store.state.showCommunityPoints
     switch (type) {
@@ -84,19 +87,6 @@ export default function useSwitchMap(map: any): any {
     map.value.showCommunity()
   }
 
-  const handleMapComplete = async () => {
-    setPointsAndBoundary(curViewType.value)
-    if (curMapType.value === '3D') {
-      if (curViewType.value === 'work1') {
-        map.value.layer('model_white_zw').visible = false
-        map.value.layer('model_white_dyjd').visible = true // 第一街道名
-      } else {
-        map.value.layer('model_white_zw').visible = true
-        map.value.layer('model_white_dyjd').visible = false
-      }
-    }
-  }
-
   // 工作站勾边
   const areaLines = ref([])
   const selectArea = (e: any) => {
@@ -126,6 +116,84 @@ export default function useSwitchMap(map: any): any {
   const handleZoom = (type: string) => {
     map.value.zoom(type)
   }
+
+  const curPointType = computed(() => store.state.curPointType)
+  const checkedKeys = computed(() => store.state.checkedKeys)
+
+  const handleMapComplete = async () => {
+    setPointsAndBoundary(curViewType.value)
+    if (curMapType.value === '3D') {
+      if (curViewType.value === 'work1') {
+        map.value.layer('model_white_zw').visible = false
+        map.value.layer('model_white_dyjd').visible = true // 第一街道名
+      } else {
+        map.value.layer('model_white_zw').visible = true
+        map.value.layer('model_white_dyjd').visible = false
+      }
+    }
+    await nextTick()
+    handlePoint(curPointType.value, checkedKeys.value)
+  }
+
+  // 撒点相关
+  watch([() => curPointType.value, () => checkedKeys.value], ([type, keys]) =>
+    handlePoint(type, keys)
+  )
+  const ecologyPoints = computed(() => store.state.ecologyPoints)
+  const mapPoints = ref<any>(null)
+  function handlePoint(type: null | string, keys: string[]) {
+    if (!map.value) return
+
+    const pointData = type
+      ? ecologyPoints.value.filter((e) => e.labelName === type)
+      : ecologyPoints.value
+
+    const { showCommunity, hideCommunity, addPoint, remove } = map.value
+
+    if (keys.some((key) => key === 'community')) {
+      showCommunity()
+    } else {
+      hideCommunity()
+    }
+    const yiPoints = pointData.filter((e) => e.labelName === '衣')
+    const shiPoints = pointData.filter((e) => e.labelName === '食')
+    const zhuPoints = pointData.filter((e) => e.labelName === '住')
+    const xingPoints = pointData.filter((e) => e.labelName === '行')
+    const otherPoints = pointData.filter((e) => e._type === 'other')
+    // const oldPoints = []
+    // const signPoints = []
+    // const historyPoints = []
+
+    remove(mapPoints.value)
+    mapPoints.value = addPoint({
+      key: 'map-points',
+      size: 20,
+      data: [
+        ...(keys.some((key) => key === 'yi') ? yiPoints : []),
+        ...(keys.some((key) => key === 'shi') ? shiPoints : []),
+        ...(keys.some((key) => key === 'zhu') ? zhuPoints : []),
+        ...(keys.some((key) => key === 'xing') ? xingPoints : []),
+        ...(keys.some((key) => key === 'other') ? otherPoints : []),
+        {
+          icon: star,
+          '479477007408168960': '上海市人民政府',
+          stAddr: '人民大道200号',
+          belong: '第一工作站',
+          x: 130.78,
+          y: -433.2,
+        },
+        {
+          icon: smStar,
+          '479477007408168960': '南京东路街道',
+          stAddr: '大沽路123号',
+          belong: '第一工作站',
+          x: 17.95,
+          y: -788.21,
+        },
+      ],
+    })
+  }
+
   return {
     handleMapComplete,
     selectArea,

src/view/left/command.vue

@@ -49,7 +49,7 @@
       <div class="party">
         <div v-if="curTab === 'economic'" class="content economic">
           <div v-for="circle in economicList" :key="circle.name">
-            <Cricle :value="circle.value" :name="circle.name" />
+            <Cricle :value="+circle.value" :name="circle.name" />
           </div>
         </div>
         <div v-else class="content party">

src/view/main.vue

@@ -6,7 +6,7 @@
     gap="0.05rem"
   >
     <m-title area="title">南东城运</m-title>
-    <m-map ref="map" width="71vw" @complete="handleMapComplete" />
+    <!-- <m-map ref="map" width="71vw" @complete="handleMapComplete" /> -->
     <m-animate enter="fadeInLeft" leave="fadeOutLeft">
       <Command v-show="'street' === curViewType && !fullScreen" area="left" />
     </m-animate>
@@ -42,7 +42,6 @@
       @change="selectArea"
       @full="fullScreen = $event"
       @zoom="handleZoom"
-      @point="handlePoint"
     />
     <m-drawer v-model="showDrawer">
       <CaseDrawer />
@@ -65,8 +64,6 @@ import CaseDrawer from './drawers/case-drawer.vue'
 import PopulationDrawer from './drawers/population-drawer.vue'
 import store from '@/store'
 import useSwitchMap from './hooks/useSwitchMap'
-import smStar from '@/assets/images/star-sm.png'
-import star from '@/assets/images/star.png'
 
 export default defineComponent({
   name: 'Main',
@@ -115,52 +112,6 @@ export default defineComponent({
     })
     const { handleMapComplete, selectArea, handleZoom } = useSwitchMap(map)
 
-    const mapPoints = ref<any>(null)
-    const ecologyPoints = computed(() => store.state.ecologyPoints)
-    const handlePoint = (keys: string[]) => {
-      const { showCommunity, hideCommunity, addPoint, remove } = map.value
-      if (keys.some((key) => key === 'community')) {
-        showCommunity()
-      } else {
-        hideCommunity()
-      }
-      const yiPoints = ecologyPoints.value.filter((e) => e.labelName === '衣')
-      const shiPoints = ecologyPoints.value.filter((e) => e.labelName === '食')
-      const zhuPoints = ecologyPoints.value.filter((e) => e.labelName === '住')
-      const xingPoints = ecologyPoints.value.filter((e) => e.labelName === '行')
-      const otherPoints = ecologyPoints.value.filter((e) => e._type === 'other')
-      // const oldPoints = []
-      // const signPoints = []
-      // const historyPoints = []
-      remove(mapPoints.value)
-      mapPoints.value = addPoint({
-        key: 'map-points',
-        size: 20,
-        data: [
-          ...(keys.some((key) => key === 'yi') ? yiPoints : []),
-          ...(keys.some((key) => key === 'shi') ? shiPoints : []),
-          ...(keys.some((key) => key === 'zhu') ? zhuPoints : []),
-          ...(keys.some((key) => key === 'xing') ? xingPoints : []),
-          ...(keys.some((key) => key === 'other') ? otherPoints : []),
-          {
-            icon: star,
-            '479477007408168960': '上海市人民政府',
-            stAddr: '人民大道200号',
-            belong: '第一工作站',
-            x: 130.78,
-            y: -433.2,
-          },
-          {
-            icon: smStar,
-            '479477007408168960': '南京东路街道',
-            stAddr: '大沽路123号',
-            belong: '第一工作站',
-            x: 17.95,
-            y: -788.21,
-          },
-        ],
-      })
-    }
     return {
       map,
       curViewType,
@@ -171,7 +122,6 @@ export default defineComponent({
       handleMapComplete,
       selectArea,
       handleZoom,
-      handlePoint,
     }
   },
 })

src/view/right/complain.vue

@@ -97,9 +97,9 @@ export default defineComponent({
       return [
         {
           name: '综合管理',
-          value: communityNum,
+          value: comprehensiveDispatchNum,
           percent: comprehensiveNum
-            ? Math.floor(comprehensiveDispatchNum / comprehensiveNum) * 100
+            ? Math.floor((comprehensiveDispatchNum / comprehensiveNum) * 100)
             : 0,
         },
         {
@@ -120,8 +120,13 @@ export default defineComponent({
     })
 
     const classChartData = computed(() => {
-      const data = classificationRank.value
+      let data = classificationRank.value
       if (!data || data.length === 0) return { dimensions: null, source: null }
+      data = [
+        data.find((e) => e.managementType === '综合'),
+        data.find((e) => e.managementType === '街面'),
+        data.find((e) => e.managementType === '小区'),
+      ]
       const source: any = [
         {
           seriesName: '分类排行',
@@ -130,16 +135,15 @@ export default defineComponent({
           class3: 0,
         },
       ]
-      const [a, b, c] = data.map((item, index) => {
+      const dimensions = data.map((item, index) => {
         const name = `class${index + 1}`
         source[0][name] = item.num
         return {
           name,
           displayName: item.managementType,
-          max: 150,
+          max: Math.max(...data.map((e) => +e.num)),
         }
       })
-      const dimensions = [c, a, b]
       return {
         dimensions,
         source,

src/view/right/ecology.vue

@@ -102,7 +102,11 @@ import store from '@/store'
 export default defineComponent({
   name: 'Ecology',
   setup() {
-    const ecologyList = computed(() => store.state.ecologyList)
+    const ecologyList = computed(() => {
+      const data = store.state.ecologyList
+      const keys = ['衣', '食', '住', '行']
+      return data.filter((e) => keys.includes(e.labelName))
+    })
     const sumList = computed(() => {
       return store.state.ecologyConvenient.map((item) => {
         return {
@@ -138,12 +142,8 @@ export default defineComponent({
     const photos2 = computed(() =>
       photosList.value.filter((e) => e.buildingType.includes('文保'))
     )
-    const getPoints = (name: string) => {
-      // TODO 撒点
-      console.log(
-        `生态—${name}点位信息：`,
-        store.state.ecologyPoints.filter((e) => e.labelName === name)
-      )
+    const getPoints = (type: string) => {
+      store.commit('SET_POINT_TYPE', type)
     }
     return {
       ecologyList,
@@ -164,6 +164,7 @@ export default defineComponent({
   width 100%
   justify-content space-around
   flex-wrap wrap
+  margin .05rem 0
   >div
     $center()
     width 25%
@@ -178,6 +179,7 @@ export default defineComponent({
 .sum
   display flex
   flex-wrap wrap
+  margin .05rem 0
   >div
     display flex
     align-items center