基本情况接口对接

src/ajax/api.ts

@@ -18,8 +18,8 @@ switch (process.env.NODE_ENV) {
     )
     break
   default:
-    BASE_URL = 'https://survey.idatatlas.com/public/api/data/'
-    TOKEN = '9f6ac66f-18bb-4f0c-930d-c8afa50d29ce'
+    BASE_URL = '/api'
+    TOKEN = '91e315a9-b2a8-4950-97fa-9dbf84a230d6'
 }
 
 export default {
@@ -32,5 +32,6 @@ export default {
   COMMITTEE: '6f610aca-39c2-4401-8b75-12f94193d956',
   COMMUNITY: '931687e6-b53a-4f2d-8ab9-83b4a7d5ea8f',
   STREET: 'af3ce0b6-f32d-4914-a336-bb7f6398ff85',
-  BUIDING: 'e08e40c6-a15c-447d-8f9e-786216d93443',
+  BUILDING: 'e08e40c6-a15c-447d-8f9e-786216d93443',
+  ATTACHMENT: '988fc63e-fa55-4729-851d-24c4355213f2',
 }

src/ajax/axios.ts

@@ -24,7 +24,7 @@ Axios.interceptors.response.use(
       store.commit('SET_LOADING', false)
     }
     // TODO 返回的数据status判断错误操作等……
-    return response.data
+    return response
   },
   (error) => {
     store.commit('SET_LOADING', false)

src/components/MyComponent/MyLoader/my-loader.vue

@@ -39,8 +39,8 @@ export default defineComponent({
   .middle,
   .inner
     border .03rem solid transparent
-    border-top-color #47B3FF
-    border-right-color @border-top-color
+    border-top-color $red
+    border-right-color $red
     border-radius 50%
     position absolute
     top 50%
@@ -58,11 +58,9 @@ export default defineComponent({
     width .08rem
     height @width
     animation spin 1.5s linear infinite
-@keyframes spin {
-  to {
+@keyframes spin
+  to
     transform translate(-50%, -50%) rotate(360deg)
-    border-top-color #00f2ff
-    border-right-color @border-top-color
-  }
-}
+    border-top-color $pink
+    border-right-color $pink
 </style>

src/hooks/useFetch.ts

+import { ajax, api } from '@/ajax'
+
+interface QueryProps {
+  a?: string
+  q?: string
+  keys?: string
+  [key: string]: unknown
+}
+
+export async function useFetchOrg(params: QueryProps) {
+  const res = await ajax.get({
+    url: api.ORGANIZATION,
+    params,
+  })
+  return res && res.data && res.data.result
+}
+
+export async function useFetchMember(params: QueryProps) {
+  const res = await ajax.get({
+    url: api.MEMBER,
+    params,
+  })
+  return res && res.data && res.data.result
+}
+export async function useFetchActivity(params: QueryProps) {
+  const res = await ajax.get({
+    url: api.ACTIVITY,
+    params,
+  })
+  return res && res.data && res.data.result
+}
+export async function useFetchArea(params: QueryProps) {
+  const res = await ajax.get({
+    url: api.AREA,
+    params,
+  })
+  return res && res.data && res.data.result
+}
+export async function useFetchCommittee(params: QueryProps) {
+  const res = await ajax.get({
+    url: api.COMMITTEE,
+    params,
+  })
+  return res && res.data && res.data.result
+}
+export async function useFetchCommunity(params: QueryProps) {
+  const res = await ajax.get({
+    url: api.COMMUNITY,
+    params,
+  })
+  return res && res.data && res.data.result
+}
+export async function useFetchStreet(params: QueryProps) {
+  const res = await ajax.get({
+    url: api.STREET,
+    params,
+  })
+  return res && res.data && res.data.result
+}
+export async function useFetchBuilding(params: QueryProps) {
+  const res = await ajax.get({
+    url: api.BUILDING,
+    params,
+  })
+  return res && res.data && res.data.result
+}
+export async function useFetchAttachment(params: QueryProps) {
+  const res = await ajax.get({
+    url: api.ATTACHMENT,
+    params,
+  })
+  return res && res.data && res.data.result
+}

src/main.ts

@@ -37,6 +37,7 @@ import {
   NLayoutHeader,
   NLayoutContent,
   NMenu,
+  NPopover,
 } from 'naive-ui'
 import { normalizeHue } from 'naive-ui/lib/color-picker/src/utils'
 
@@ -73,6 +74,7 @@ const naive = create({
     NMenu,
     NLayoutHeader,
     NLayoutContent,
+    NPopover,
   ],
 })
 

src/util/dayjs.ts

+import dayjs from 'dayjs'
+import ch from 'dayjs/locale/zh-cn'
+import LocalizedFormat from 'dayjs/plugin/LocalizedFormat'
+dayjs.extend(LocalizedFormat)
+dayjs.locale(ch)
+
+export default dayjs

src/util/menus.ts

+export default [
+  {
+    key: 'system',
+    name: '系统',
+    children: [
+      {
+        name: '管市民',
+        list: [
+          {
+            name: '市民（房屋）信息系统',
+            id: 'page_40bf6060-cccc-11ea-a34f-f558bf9fe429',
+          },
+          { name: '志愿者信息系统' },
+          { name: '党员团员信息系统' },
+          { name: '重点关怀对象信息系统' },
+          { name: '统战人员信息系统' },
+          { name: '司法管理人员信息系统' },
+          { name: '自治组织信息系统' },
+          { name: '更多系统' },
+        ],
+      },
+      {
+        name: '管商办',
+        list: [
+          {
+            name: '楼宇信息系统',
+            id: 'page_50bb42f0-3544-11eb-813d-85e48fa0f61d',
+          },
+          {
+            name: '企业信息系统',
+            id: 'page_50bb42f0-3544-11eb-813d-85e48fa0f61d',
+          },
+          {
+            name: '商铺信息系统',
+            id: 'page_50bb42f0-3544-11eb-813d-85e48fa0f61d',
+          },
+          { name: '更多系统' },
+        ],
+      },
+      {
+        name: '管自己',
+        list: [
+          {
+            name: '视频信息系统',
+            id: 'page_19abe960-4109-11eb-bcd0-a98c14e187f6',
+          },
+          {
+            name: '城运信息系统',
+            id: 'page_af847490-3937-11eb-8bd2-af9cb9e97668',
+          },
+          { name: '政府机关系统' },
+          { name: '党建信息系统' },
+          { name: '预案文件信息系统' },
+          { name: '规划信息系统' },
+          { name: '更多系统' },
+        ],
+      },
+      {
+        name: '管服务',
+        list: [
+          {
+            name: '电梯信息系统',
+            id: 'page_87f75700-41d7-11eb-84c4-f9d93e21eaf4',
+          },
+          { name: '设施信息系统' },
+          { name: '人才公寓信息系统' },
+          { name: '物业信息体统' },
+          { name: '更多系统' },
+        ],
+      },
+    ],
+  },
+  {
+    key: 'application',
+    name: '应用',
+    children: [],
+  },
+]

src/view/components/basic-info.vue

@@ -7,6 +7,11 @@
         default-expanded-names="1"
         accordion
       >
+        <template #arrow>
+          <n-icon size=".08rem">
+            <CaretForward />
+          </n-icon>
+        </template>
         <n-collapse-item name="1">
           <div class="info-wrapper">
             <div class="sum">
@@ -87,8 +92,15 @@
 
 <script lang="ts" setup>
 import { ChartTypes } from '@/components/MyComponent'
-import { ref, PropType, computed } from 'vue'
+import { ref, PropType, computed, onMounted } from 'vue'
+import { CaretForward } from '@vicons/ionicons5'
+import { useFetchOrg, useFetchMember } from '@/hooks/useFetch'
 import store from '@/store'
+import dayjs from '@/util/dayjs'
+
+onMounted(() => {
+  console.log('mounted')
+})
 
 const show = computed(() => store.state.showBasicInfo)
 const props = defineProps({
@@ -100,11 +112,34 @@ const props = defineProps({
 
 const visible = computed(() => props.visible)
 
-const sumList = [
-  { name: '党组织', value: 355, unit: '个' },
-  { name: '关系在街道内党员', value: 10890, unit: '位' },
-  { name: '街道居民党员', value: 10890, unit: '位' },
-]
+const sumList = ref([
+  { name: '党组织', value: 0, unit: '个' },
+  { name: '关系在街道内党员', value: 0, unit: '位' },
+  { name: '街道居民党员', value: 0, unit: '位' },
+])
+const getSumList = async () => {
+  const orgNum =
+    (
+      await useFetchOrg({
+        a: 'id,count',
+        keys: '是否虚拟组织',
+      })
+    )?.find((e: any) => !e['是否虚拟组织'])?.__aggregate__ || 0
+  const member = await useFetchMember({
+    a: 'id,count',
+    keys: '是否居住在花木街道',
+  })
+  const inHuamu =
+    member?.find((e: any) => e['是否居住在花木街道'])?.__aggregate__ || 0
+  const notInHuamu =
+    member?.find((e: any) => !e['是否居住在花木街道'])?.__aggregate__ || 0
+
+  sumList.value = [
+    { name: '党组织', value: orgNum, unit: '个' },
+    { name: '关系在街道内党员', value: inHuamu + notInHuamu, unit: '位' },
+    { name: '街道居民党员', value: inHuamu, unit: '位' },
+  ]
+}
 
 const color1 = ['#FAADB8', '#C1474F', '#6D2C29']
 const color2 = ['#FAADB8', '#DD505E', '#A53D40', '#6D2C29']
@@ -132,11 +167,10 @@ const lineOption: ChartTypes.LineOption = {
   yAxis: [
     {
       type: 'value',
-      minInterval: 100,
-      maxInterval: 100,
-      interval: 100,
+      // minInterval: 100,
+      // maxInterval: 100,
+      // interval: 100,
       splitLine: {
-        interval: 100,
         lineStyle: {
           type: 'dashed',
         },
@@ -163,43 +197,132 @@ const lineOption: ChartTypes.LineOption = {
     },
   ],
 }
-const data1 = {
+
+const data1 = ref({
   dimensions: [
     { name: 'name', displayName: '类型' },
     { name: 'value', displayName: '数量' },
   ],
-  source: [
-    { name: '机关事业单位党员', value: 6000, ratio: 60 },
-    { name: '居民区党员', value: 3000, ratio: 30 },
-    { name: '“两新”党员', value: 1000, ratio: 10 },
-  ],
+  source: [],
+})
+const getData1 = async () => {
+  const res = await useFetchMember({
+    a: 'id,count',
+    keys: '党员类型',
+  })
+  const total = res.reduce(
+    (acc: number, cur: any) => acc + (cur.__aggregate__ || 0),
+    0,
+  )
+  data1.value.source = res.map((item: any) => ({
+    name: item['党员类型'],
+    value: item.__aggregate__ || 0,
+    ratio: Math.round(((item.__aggregate__ || 0) / total) * 100 || 0),
+  }))
 }
-const data2 = {
+
+const data2 = ref({
   dimensions: [
     { name: 'name', displayName: '类型' },
     { name: 'value', displayName: '数量' },
   ],
   source: [
-    { name: '党委', value: 10, ratio: 10 },
-    { name: '党总支', value: 70, ratio: 70 },
-    { name: '党支部', value: 10, ratio: 10 },
-    { name: '联合党支部', value: 10, ratio: 10 },
+    { name: '党委', value: 0, ratio: 0 },
+    { name: '党总支', value: 0, ratio: 0 },
+    { name: '党支部', value: 0, ratio: 0 },
+    { name: '联合党支部', value: 0, ratio: 0 },
   ],
+})
+const getData2 = async () => {
+  const res = (
+    await useFetchOrg({
+      a: 'id,count',
+      keys: '等级',
+    })
+  )?.filter((e: any) => data2.value.source.some((n) => n.name === e['等级']))
+  const total = res.reduce(
+    (acc: number, cur: any) => acc + (cur.__aggregate__ || 0),
+    0,
+  )
+  data2.value.source.forEach((item) => {
+    const value =
+      res.find((e: any) => item.name === e['等级'])?.__aggregate__ || 0
+    item.value = value
+    item.ratio = Math.round((value / total) * 100)
+  })
 }
-const data3 = {
+
+const data3 = ref({
   dimensions: [
     { name: 'name', displayName: '年龄' },
     { name: 'value', displayName: '数量' },
   ],
   source: [
-    { name: '18-25岁', value: 210 },
-    { name: '26-35岁', value: 320 },
-    { name: '36-50岁', value: 150 },
-    { name: '50-70岁', value: 80 },
-    { name: '70岁以上', value: 270 },
+    { name: '18-25岁', value: 0 },
+    { name: '26-35岁', value: 0 },
+    { name: '36-50岁', value: 0 },
+    { name: '50-70岁', value: 0 },
+    { name: '70岁以上', value: 0 },
+  ],
+})
+const getData3 = async () => {
+  const source = [
+    {
+      name: '18-25岁',
+      range: [
+        dayjs().subtract(25, 'year').format('YYYY-MM-DD'),
+        dayjs().subtract(18, 'year').format('YYYY-MM-DD'),
       ],
+    },
+    {
+      name: '26-35岁',
+      range: [
+        dayjs().subtract(35, 'year').format('YYYY-MM-DD'),
+        dayjs().subtract(26, 'year').format('YYYY-MM-DD'),
+      ],
+    },
+    {
+      name: '36-50岁',
+      range: [
+        dayjs().subtract(50, 'year').format('YYYY-MM-DD'),
+        dayjs().subtract(36, 'year').format('YYYY-MM-DD'),
+      ],
+    },
+    {
+      name: '50-70岁',
+      range: [
+        dayjs().subtract(70, 'year').format('YYYY-MM-DD'),
+        dayjs().subtract(50, 'year').format('YYYY-MM-DD'),
+      ],
+    },
+    {
+      name: '70岁以上',
+      range: [null, dayjs().subtract(71, 'year').format('YYYY-MM-DD')],
+    },
+  ]
+  const res = await Promise.all(
+    source.map(({ range }) =>
+      useFetchMember({
+        a: 'id,count',
+        q: range[0]
+          ? `paths @ "出生日期" && string >= "${range[0]}",paths @ "出生日期" && string <= "${range[1]}"`
+          : `paths @ "出生日期" && string <= "${range[1]}"`,
+      }),
+    ),
+  )
+  data3.value.source.forEach(
+    (item, i) => (item.value = res[i]?.[0].__aggregate__ || 0),
+  )
+  console.log(res, data3.value)
 }
 
+onMounted(() => {
+  getSumList()
+  getData1()
+  getData2()
+  getData3()
+})
+
 const curTagKey = ref<string | null>(null)
 const tagList = [
   { name: '机关事业单位党组织', key: '机关事业单位党组织' },
@@ -212,6 +335,7 @@ const clickTag = (key: string) => {
     return
   }
   curTagKey.value = key
+  // TODO 地图撒点
 }
 </script>
 
@@ -288,7 +412,8 @@ const clickTag = (key: string) => {
             font-family $font-din
             margin-left .12rem
             margin-right .2rem
-
+            &:last-child
+              float right
 .tag-box
   background $bg
   $blur()
@@ -306,11 +431,11 @@ const clickTag = (key: string) => {
     $flex-align()
     $text-overflow()
     justify-content center
-    width 32%
     background #fff
     border-radius .03rem
     cursor pointer
     font-size .09rem
+    width 32%
     &:hover
     &.on
       background $light-red

src/view/components/nav-bar.vue

@@ -46,18 +46,10 @@
         >
           <svg-icon :data="nav3" original />
         </n-icon>
-        <n-dropdown :options="options" show-arrow>
-          <div class="align-center">
-            <n-icon class="btn" size=".12rem" style="margin-right: 0">
-              <svg-icon :data="nav4" original />
-            </n-icon>
-            <n-icon size=".08rem">
-              <CaretDown />
-            </n-icon>
-          </div>
-        </n-dropdown>
       </div>
       <b>|</b>
+      <n-popover trigger="hover">
+        <template #trigger>
           <div class="align-center menu-btn">
             <n-icon
               size=".12rem"
@@ -67,6 +59,12 @@
             </n-icon>
             选择菜单
           </div>
+        </template>
+        <div class="menu">
+          <div class="parent"></div>
+          <div class="children"></div>
+        </div>
+      </n-popover>
     </div>
   </div>
 
@@ -78,7 +76,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import store from '@/store'
 import useDebounce from '@/hooks/useDebounce'
 import SearchModal from './search-modal.vue'
@@ -86,11 +84,9 @@ import FilterDrawer from './filter-drawer.vue'
 import ActivityDrawer from './activity-drawer.vue'
 import BuildingDrawer from './building-drawer.vue'
 import StructModal from './struct-modal.vue'
-import { CaretDown } from '@vicons/ionicons5'
 import nav1 from '@images/nav1.svg'
 import nav2 from '@images/nav2.svg'
 import nav3 from '@images/nav3.svg'
-import nav4 from '@images/nav4.svg'
 import nav5 from '@images/nav5.svg'
 
 const showFilterDrawer = computed(() => store.state.showFilterDrawer)
@@ -180,6 +176,7 @@ watch(
     handleSearch()
   },
 )
+
 </script>
 
 <style lang="stylus" scoped>

vite.config.js

@@ -19,4 +19,13 @@ export default defineConfig({
       '@images': resolve(__dirname, './src/assets/images'),
     },
   },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'https://survey.maicedata.com/api/data/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
 })