Skip to content

H
huamu
Commit 1af05b5a authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

09.27页面改版

parent 689e07c5
Hide whitespace changes
Inline Side-by-side
Showing with 261 additions and 73 deletions
src/App.vue
View file @ 1af05b5a
......@@ -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
View file @ 1af05b5a
......@@ -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
View file @ 1af05b5a
......@@ -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
View file @ 1af05b5a
......@@ -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
View file @ 1af05b5a
......@@ -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
View file @ 1af05b5a
......@@ -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
View file @ 1af05b5a
......@@ -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
View file @ 1af05b5a
......@@ -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
View file @ 1af05b5a
......@@ -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
View file @ 1af05b5a
......@@ -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
View file @ 1af05b5a
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment