09.27页面改版

src/App.vue

@@ -33,8 +33,10 @@ const themeOverrides: GlobalThemeOverrides = {
     errorColor: '#E59B00',
   },
   Button: {
-    paddingTiny: '.03rem .1rem',
-    paddingSmall: '.03rem .16rem',
+    paddingTiny: '.04rem .1rem',
+    heightTiny: '.2rem',
+    paddingSmall: '.06rem .16rem',
+    heightSmall: '.25rem',
     borderRadiusSmall: '.05rem',
     textColorHover: '#dd505E',
     textColorPressed: '#dd505E',
@@ -144,7 +146,7 @@ html, body
   width 100%
   height 100%
   user-select none
-  font-size 15.8vh
+  font-size 16vh
   line-height 1.5
   overflow hidden
   p

src/hooks/useAliOss.ts

@@ -6,6 +6,7 @@ import { api } from '@/ajax'
 export default async function useAliOss(file: any) {
   const auth = (await useFetchOSSToken())?.token
   const client = new OSS({
+    secure: true,
     region: 'oss-' + auth.region,
     accessKeyId: auth.access_key_id,
     accessKeySecret: auth.access_key_secret,

src/store/actions.ts

@@ -305,10 +305,10 @@ async function getFloors(data: any) {
         `paths @ "所属小区" && string == "${data?.['小区名称']}", paths @ "所属楼宇"  && string @ "${data?.['号']}",paths @ "层数" && number == ${item['层数']}`,
       )
       let memberAmount = 0
-      rooms.forEach((item: any) => (memberAmount += item.members.length))
+      rooms.forEach((room: any) => (memberAmount += room.members.length))
       return {
         floor: `${item['层数']}F`,
-        room: item.__aggregate__ || 0,
+        room: rooms.length || 0,
         member: memberAmount,
         rooms,
       }

src/util/data2html.ts

@@ -19,8 +19,18 @@ const style = `
   .pop-container {
     border-radius: .04rem;
     box-sizing: border-box;
-    padding: .1rem;
     width: 100%;
+    overflow-x: hidden;
+  }
+  .pop-container p,
+  .pop-container span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .pop-container > p {
+    margin-bottom: .04rem;
+    padding: 0 .02rem;
   }
   .title {
     font-size: .13rem;
@@ -34,7 +44,7 @@ const style = `
   .tag {
     display: inline-block;
     border-radius: .04rem;
-    font-size: .09rem;
+    font-size: .1rem;
     padding: .02rem .04rem;
     margin: 0 .05rem .05rem 0;
   }
@@ -60,9 +70,9 @@ const style = `
   }
   .flex,
   .box {
-    background: #fcfcfc;
+    background: #fff;
     border-radius: .03rem;
-    margin-top: .05rem;
+    margin-top: .08rem;
     box-sizing: border-box;
     padding: .1rem;
   }
@@ -70,14 +80,19 @@ const style = `
     display: flex;
     flex-wrap: wrap;
   }
+  .box > div + div {
+    margin-top: 0.05rem;
+  }
   .box > .inline {
     display: flex;
-    align-items: center;
   }
   .box > .inline > span {
     width: 25%;
     white-space: nowrap;
   }
+  .box > .inline > p {
+    flex: 1;
+  }
   .flex > div {
     margin-right: .05rem;
   }
@@ -92,11 +107,13 @@ const style = `
   }
   .flex span,
   .box span {
+    display: inline-block;
     color: rgba(0,0,0,.6);
+    margin-bottom: .04rem;
   }
   .flex p,
   .box p {
-    margin-bottom: .03rem;
+    margin-bottom: .04rem;
     font-family: PingFangMedium, 'Avenir', Helvetica, Arial, sans-serif;
   }
   .flex img,
@@ -126,7 +143,7 @@ const style = `
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    font-size: .1rem;
+    font-size: .11rem;
   }
   .pop-container .wrapper > .item p {
     font-family: PingFangMedium, 'Avenir', Helvetica, Arial, sans-serif;
@@ -310,7 +327,7 @@ export const transActivityHtml = (data: any) => {
               ?.join('')}</p>
           </div>
         </div>
-        <div style="text-align:center">
+        <div style="text-align:center;margin: .05rem 0;">
           ${(data?.['签到表文件'] || [])
             .map(
               (url) =>

src/view/components/activity-drawer.vue

@@ -66,15 +66,15 @@
             <div class="sum">
               <div>
                 <m-count class="count" :value="item.count" /> <span>次</span>
-                <p>举办次数</p>
+                <p>累计举办次数</p>
               </div>
               <div>
                 <m-count class="count" :value="item.people" /> <span>人次</span>
-                <p>参与人次</p>
+                <p>累计参与人次</p>
               </div>
               <div>
                 <m-count class="count" :value="item.ratio" /> <span>%</span>
-                <p>出席率</p>
+                <p>平均出席率</p>
               </div>
             </div>
           </div>
@@ -287,7 +287,7 @@ watch(
           width 32%
           border .01rem solid $light-gray
           border-radius .04rem
-          padding .03rem .01rem .03rem .08rem
+          padding .03rem .05rem
           box-sizing border-box
           .count
             color $red

src/view/components/basic-info.vue

@@ -93,13 +93,33 @@
             v-for="tag in tagList"
             :key="tag.name"
             :class="{ on: tag.key === curTagKey }"
-            @click="clickTag(tag.key)"
+            @click="clickTag(tag)"
             >{{ tag.name }}</span
           >
         </div>
       </m-animate>
     </div>
   </m-animate>
+  <div
+    v-if="tips.show && visible"
+    class="tips"
+    :class="{ offset: filterDrawerIsShow }"
+  >
+    <div>
+      <div>
+        <p><m-count class="count" :value="tips.value" /> <span>个</span></p>
+        <span>{{ tips.name }}总数</span>
+      </div>
+    </div>
+    <div v-if="tips.name.includes('两新')">
+      <div>
+        <p>
+          <m-count class="count" :value="tips.outStreetValue" /> <span>个</span>
+        </p>
+        <span>{{ tips.name }}（街道外）</span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -116,6 +136,7 @@ const sum = computed(() => store.state.basicInfo.sum)
 const member = computed(() => store.state.basicInfo.member)
 const organization = computed(() => store.state.basicInfo.organization)
 const age = computed(() => store.state.basicInfo.age)
+const filterDrawerIsShow = computed(() => store.state.showFilterDrawer)
 
 const color1 = ['#FAADB8', '#C1474F', '#6D2C29']
 const color2 = ['#FAADB8', '#DD505E', '#A53D40', '#6D2C29']
@@ -184,37 +205,79 @@ const tagList = [
   { name: '“两新”党组织', key: '两新' },
 ]
 
-watch(
-  () => visible.value,
-  (visible) => {
-    if (!visible) {
-      curTagKey.value = null
-      store.commit('SET_MAP_POINTS')
-      store.commit('SET_CUR_TAG', '')
-    }
-  },
-)
-const clickTag = async (key: string) => {
+const tips = ref({
+  show: false,
+  name: '',
+  value: 0,
+  outStreetValue: 0,
+})
+const clickTag = async ({ key, name }: any) => {
   if (key === curTagKey.value) {
     curTagKey.value = null
     store.commit('SET_MAP_POINTS')
     store.commit('SET_CUR_TAG', '')
+    tips.value = {
+      show: false,
+      name: '',
+      value: 0,
+      outStreetValue: 0,
+    }
     return
   }
   curTagKey.value = key
-  if (!store.state.showFilterDrawer) {
+  let data: any[] = []
+  if (!filterDrawerIsShow.value) {
     const res = await useFetchOrg({
       q: `paths @ "类别" && string == "${key}"`,
     })
-    store.commit(
-      'SET_MAP_POINTS',
-      res
-        .map((item: any) => item.extra)
-        .filter((item: any) => !item?.['是否虚拟组织']),
-    )
+    data = res
+      .map((item: any) => item.extra)
+      .filter((item: any) => !item?.['是否虚拟组织'])
+    store.commit('SET_MAP_POINTS', data)
+    tips.value = {
+      show: true,
+      name,
+      value: data.length || 0,
+      outStreetValue:
+        data.filter(
+          (item) => !item['所属街道'] || item['所属街道'] !== '花木街道',
+        )?.length || 0,
+    }
   }
   store.commit('SET_CUR_TAG', key)
 }
+
+watch(
+  () => visible.value,
+  (visible) => {
+    if (!visible) {
+      tips.value = {
+        show: false,
+        name: '',
+        value: 0,
+        outStreetValue: 0,
+      }
+      curTagKey.value = null
+      store.commit('SET_MAP_POINTS')
+      store.commit('SET_CUR_TAG', '')
+    }
+  },
+)
+watch(
+  () => store.state.mapPoints,
+  (points: any) => {
+    if (!filterDrawerIsShow.value || !visible.value || !curTagKey.value) return
+    tips.value = {
+      show: true,
+      name: tagList.find((item) => item.key === curTagKey.value)?.name || '',
+      value: points.length || 0,
+      outStreetValue:
+        points.filter(
+          (item) => !item['所属街道'] || item['所属街道'] !== '花木街道',
+        )?.length || 0,
+    }
+  },
+)
 </script>
 
 <style lang="stylus" scoped>
@@ -224,6 +287,32 @@ const clickTag = async (key: string) => {
   top .48rem
   left .05rem
   width 3rem
+.tips
+  position fixed
+  top .48rem
+  right .05rem
+  $blur()
+  font-size .1rem
+  transition right .3s ease-in-out
+  &.offset
+    right 2.9rem
+  >div
+    border-radius .06rem
+    padding .08rem .09rem
+    background rgba(249,250,250,.5)
+    margin-bottom .08rem
+    >div
+      border-radius inherit
+      padding inherit
+      background $white-bg
+      .count
+        font-size .18rem
+        color $red
+        font-family $font-din
+      >span
+        display block
+        margin-top .04rem
+        color $gray
 #basic-info
   width 100%
   background $bg

src/view/components/building-drawer.vue

@@ -222,10 +222,10 @@ const getFloors = async (data: any) => {
         }",paths @ "层数" && number == ${item['层数']}`,
       )
       let memberAmount = 0
-      rooms.forEach((item: any) => (memberAmount += item.members.length))
+      rooms.forEach((room: any) => (memberAmount += room.members.length))
       return {
         floor: `${item['层数']}F`,
-        room: item.__aggregate__ || 0,
+        room: rooms.length || 0,
         member: memberAmount,
         rooms,
       }

src/view/components/filter-drawer.vue

@@ -31,10 +31,10 @@
               <div
                 v-for="item in organization"
                 :key="item.key"
-                :title="item.name"
+                :title="`${item.name}（${item.count}个）`"
               >
                 <n-checkbox v-model:checked="item.checked" size="small">{{
-                  item.name
+                  `${item.name}（${item.count}个）`
                 }}</n-checkbox>
                 <div
                   v-show="item.checked"
@@ -53,9 +53,13 @@
           </n-collapse-item>
           <n-collapse-item title="党员" name="2">
             <div class="list">
-              <div v-for="item in member" :key="item.key" :title="item.name">
+              <div
+                v-for="item in member"
+                :key="item.key"
+                :title="`${item.name}（${item.count}位）`"
+              >
                 <n-checkbox v-model:checked="item.checked" size="small">{{
-                  item.name
+                  `${item.name}（${item.count}位）`
                 }}</n-checkbox>
                 <div
                   v-show="item.checked"
@@ -184,7 +188,9 @@ import dayjs from '@/util/dayjs'
 import { CaretForward, ArrowBack, ArrowForward } from '@vicons/ionicons5'
 import exportIcon from '@images/export.svg'
 import dot from '@images/dot.svg'
+import { useMessage } from 'naive-ui'
 
+const message = useMessage()
 const emit = defineEmits(['boundary', 'close'])
 
 const show = computed(() => store.state.showFilterDrawer)
@@ -214,23 +220,39 @@ const setTab = (val: string) => {
   curTab.value = val
 }
 
-const fetchTags = async (type: string) => {
+const fetchTags = async (
+  type: string,
+): Promise<
+  { key: string; name: string; count: number; checked: boolean }[]
+> => {
   const res = await useFetchTag({
     keys: '标签名称',
     q: `paths @ "所属模块" && string == "${type}"`,
   })
-  return res.map((item: any) => ({
-    name: item['标签名称'],
-    key: item['标签名称'].replace(type, '').replace('获得', ''),
-    checked: false,
-  }))
+  return Promise.all(
+    res.map(async (item: any) => {
+      const key = item['标签名称'].replace(type, '').replace('获得', '')
+      return {
+        name: item['标签名称'],
+        key,
+        count:
+          (await getDetail(type === '党组织' ? 'organization' : 'member', key))
+            ?.length || 0,
+        checked: false,
+      }
+    }),
+  )
 }
-const organization = ref<{ key: string; name: string; checked: boolean }[]>([])
+const organization = ref<
+  { key: string; name: string; count: number; checked: boolean }[]
+>([])
 const getOrgTags = async () => {
   organization.value = await fetchTags('党组织')
 }
 
-const member = ref<{ key: string; name: string; checked: boolean }[]>([])
+const member = ref<
+  { key: string; name: string; count: number; checked: boolean }[]
+>([])
 const getMemberTags = async () => {
   member.value = await fetchTags('党员')
 }
@@ -350,7 +372,9 @@ const handleExport = async (type: string, key: string, name: string) => {
       是否居住在花木街道: item['是否居住在花木街道'] ? '是' : '否',
     }))
   }
-
+  if (!data || data.length === 0) {
+    message.error('暂无数据')
+  }
   useExportXlsx(data, name)
 }
 
@@ -651,6 +675,7 @@ watch(
   top .42rem
   .n-drawer-header
     font-family $font-ping-medium
+    font-size .14rem
   .n-drawer-body-content-wrapper
     padding 0
     overflow-x hidden !important

src/view/components/new-activity-drawer.vue

@@ -906,6 +906,7 @@ const handleExport = async () => {
   top 0
   .n-drawer-header__main
     width 100%
+    font-size .14rem
   .n-input-number
     width 100%
     .n-input-wrapper

src/view/components/struct-modal.vue

@@ -52,7 +52,7 @@
           <n-layout class="wrapper">
             <n-layout-header class="head">
               <n-space>
-                <p>{{ curMenu.label }}</p>
+                <p>{{ curMenu['党组织名称'] || curMenu.label }}</p>
                 <template v-if="curMenu?.['标签']">
                   <n-tag
                     v-for="tag in curMenu['标签'].split(',')"
@@ -145,7 +145,7 @@
                       <p>{{ communityParty['书记'] }}</p>
                     </div>
                     <div class="row">
-                      <span>党委副书记</span>
+                      <span>党委副书记（专职）</span>
                       <p>{{ communityParty['党委副书记-专职'] }}</p>
                     </div>
                     <div class="row">
@@ -387,6 +387,7 @@ import { CloseOutline } from '@vicons/ionicons5'
 import { useFetchOrg, useFetchMember } from '@/hooks/useFetch'
 import { organization } from '@/util/tags'
 import useExportXlsx from '@/hooks/useExportXlsx'
+import { NEllipsis } from 'naive-ui'
 
 const code = computed(() => store.state.auth.code)
 
@@ -516,10 +517,14 @@ async function init() {
           if (grandson && grandson.length > 0) {
             child.children = grandson.map((son: any, i: number) => ({
               key: `${child.key}-${i + 1}`,
-              label: son['党组织名称']
-                .replace('中共花木街道', '')
-                .replace('中共', '')
-                .replace('浦东新区花木街道', ''),
+              label: () =>
+                h(NEllipsis, null, {
+                  default: () =>
+                    son['党组织名称']
+                      .replace('中共花木街道', '')
+                      .replace('中共', '')
+                      .replace('浦东新区花木街道', ''),
+                }),
               ...son,
             }))
           }
@@ -665,9 +670,13 @@ watch(
               )?.map((e: any, i: number) => ({
                 ...e.extra,
                 key: item.key + '-' + (i + 1),
-                label: e.extra['党组织名称']
-                  .replace('浦东新区花木街道', '')
-                  .replace('中共', ''),
+                label: () =>
+                  h(NEllipsis, null, {
+                    default: () =>
+                      e.extra['党组织名称']
+                        .replace('浦东新区花木街道', '')
+                        .replace('中共', ''),
+                  }),
               })) || []
             if (children && children.length > 0) {
               item.children = children
@@ -765,7 +774,10 @@ async function setInstitution() {
     const data = item.extra
     return {
       ...data,
-      label: data['党组织名称'].replace('中共浦东新区花木街道', ''),
+      label: () =>
+        h(NEllipsis, null, {
+          default: () => data['党组织名称'].replace('中共浦东新区花木街道', ''),
+        }),
       key: '2-' + (i + 1),
     }
   })
@@ -785,7 +797,11 @@ async function setCommunityParty() {
     const data = item.extra
     return {
       ...data,
-      label: data['党组织名称'].replace('中共花木街道', '').replace('中共', ''),
+      label: () =>
+        h(NEllipsis, null, {
+          default: () =>
+            data['党组织名称'].replace('中共花木街道', '').replace('中共', ''),
+        }),
       key: '3-' + (i + 1),
     }
   })
@@ -811,9 +827,13 @@ async function setCommunityParty() {
         item.key = '3-menu'
         item.children = children?.map((child: any, index: number) => ({
           ...child,
-          label: child['党组织名称']
-            .replace('浦东新区花木街道', '')
-            .replace('中共', ''),
+          label: () =>
+            h(NEllipsis, null, {
+              default: () =>
+                child['党组织名称']
+                  .replace('浦东新区花木街道', '')
+                  .replace('中共', ''),
+            }),
           key: item.key + '-' + (index + 1),
         }))
       }
@@ -830,16 +850,24 @@ async function setCommunityParty() {
       const children = await checkHasChildren(e)
       const result = {
         ...e,
-        label: e['党组织名称'].replace('中共花木街道', '').replace('中共', ''),
+        label: () =>
+          h(NEllipsis, null, {
+            default: () =>
+              e['党组织名称'].replace('中共花木街道', '').replace('中共', ''),
+          }),
         key: bigSix.key + '-' + (i + 1),
       }
       if (children && children.length > 0) {
         result._hasSub = true
         result.subList = children.map((child: any, index: number) => ({
           ...child,
-          label: child['党组织名称']
-            .replace('浦东新区花木街道', '')
-            .replace('中共', ''),
+          label: () =>
+            h(NEllipsis, null, {
+              default: () =>
+                child['党组织名称']
+                  .replace('浦东新区花木街道', '')
+                  .replace('中共', ''),
+            }),
           key: result.key + '-' + (index + 1),
         }))
       }
@@ -851,16 +879,24 @@ async function setCommunityParty() {
       const children = await checkHasChildren(e)
       const result = {
         ...e,
-        label: e['党组织名称'].replace('中共花木街道', '').replace('中共', ''),
+        label: () =>
+          h(NEllipsis, null, {
+            default: () =>
+              e['党组织名称'].replace('中共花木街道', '').replace('中共', ''),
+          }),
         key: twoNew.key + '-' + (i + 1),
       }
       if (children && children.length > 0) {
         result._hasSub = true
         result.subList = children.map((child: any, index: number) => ({
           ...child,
-          label: child['党组织名称']
-            .replace('浦东新区花木街道', '')
-            .replace('中共', ''),
+          label: () =>
+            h(NEllipsis, null, {
+              default: () =>
+                child['党组织名称']
+                  .replace('浦东新区花木街道', '')
+                  .replace('中共', ''),
+            }),
           key: result.key + '-' + (index + 1),
         }))
       }

src/view/main.vue

@@ -135,4 +135,21 @@ watch(
 
 .n-empty
   margin .1rem 0
+
+.n-drawer-mask
+  display none
+.n-drawer.n-drawer--right-placement
+  top .42rem
+  .n-drawer-header
+    font-family $font-ping-medium
+    font-size .14rem
+
+.esri-ui
+  .esri-popup
+    border-radius .04rem
+    .esri-popup__main-container.esri-widget
+      background rgba(249, 250, 250, .9)
+      $blur()
+      width 3rem
+      border-radius inherit
 </style>