Skip to content

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

对接楼宇接口,居住党员信息接口等

parent e06725f3
Show whitespace changes
Inline Side-by-side
Showing with 493 additions and 207 deletions
src/components/MyComponent/MyCount/my-count.vue
View file @ 27873080
......@@ -44,7 +44,7 @@ export default defineComponent({
},
},
setup(props) {
const endValue = ref(+props.value)
const endValue = ref(+props.value || 0)
const countRef = ref<null | HTMLElement>(null)
const countUpInstance = ref<CountUp | null>(null)
const timer = ref<null | number>(null)
......@@ -75,7 +75,7 @@ export default defineComponent({
watch(
() => props.value,
(cur) => {
endValue.value = +cur
endValue.value = +cur || 0
if (
countUpInstance.value &&
typeof countUpInstance.value.update === 'function'
......
src/store/actions.ts
View file @ 27873080
import { Commit, Dispatch } from './index'
import { useFetchOrg, useFetchMember } from '@/hooks/useFetch'
import dayjs from '@/util/dayjs'
import state from './state'
interface Method {
commit: Commit
......@@ -6,8 +9,176 @@ interface Method {
}
export default {
example({ commit }: Method): void {
// DO SOMETHING
commit('SET_LOADING', true)
async getBasicInfo({ commit }: Method, query?: string) {
commit('SET_BASIC_INFO', {
sum: await getSum(query),
member: await getMember(query),
organization: await getOrganization(query),
age: await getAge(query),
})
commit('SET_FILTER_PATH', query)
},
}
async function getSum(query?: string) {
if (query && query.includes('所属小区')) {
let communityQuery = query.split(',').find((e) => e.includes('所属小区'))
if (query.includes('所属楼宇')) {
communityQuery = [
communityQuery,
query.split(',').find((e) => e.includes('所属楼宇')),
].join(',')
}
const member1 =
(
await useFetchMember({
a: 'id,count',
q: `${communityQuery},paths @ "党员身份" && string == "正式党员"`,
})
)?.[0]?.__aggregate__ || 0
const member2 =
(
await useFetchMember({
a: 'id,count',
q: `${communityQuery},paths @ "党员身份" && string == "预备党员"`,
})
)?.[0]?.__aggregate__ || 0
return [
{
name: query.includes('所属楼宇') ? '楼内党员总数' : '居住在该小区党员',
value: member1 + member2,
unit: '位',
},
{ name: '正式党员', value: member1, unit: '位' },
{ name: '预备党员', value: member2, unit: '位' },
]
}
const orgNum =
(
await useFetchOrg({
a: 'id,count',
keys: '是否虚拟组织',
q: query,
})
)?.find((e: any) => !e['是否虚拟组织'])?.__aggregate__ || 0
const member = await useFetchMember({
a: 'id,count',
keys: '是否居住在花木街道',
q: query,
})
const inHuamu =
member?.find((e: any) => e['是否居住在花木街道'])?.__aggregate__ || 0
const notInHuamu =
member?.find((e: any) => !e['是否居住在花木街道'])?.__aggregate__ || 0
return [
{ name: '党组织', value: orgNum, unit: '个' },
{ name: '关系在街道内党员', value: inHuamu + notInHuamu, unit: '位' },
{ name: '街道居民党员', value: inHuamu, unit: '位' },
]
}
async function getMember(query?: string) {
const result = { ...state.basicInfo.member }
const res = await useFetchMember({
a: 'id,count',
keys: '党员类型',
q: query,
})
const total = res.reduce(
(acc: number, cur: any) => acc + (cur.__aggregate__ || 0),
0,
)
result.source.forEach((item) => {
const value =
res.find((e: any) => item.name === e['党员类型'])?.__aggregate__ || 0
item.value = value
item.ratio = (value / total) * 100
})
return result
}
async function getOrganization(query?: string) {
const result = { ...state.basicInfo.organization }
if (query && query.includes('所属小区')) {
result.source = []
return result
}
result.source = [
{ name: '党委', value: 0, ratio: 0 },
{ name: '党总支', value: 0, ratio: 0 },
{ name: '党支部', value: 0, ratio: 0 },
{ name: '联合党支部', value: 0, ratio: 0 },
]
const res = (
await useFetchOrg({
a: 'id,count',
keys: '等级',
q: query,
})
)?.filter((e: any) => result.source.some((n) => n.name === e['等级']))
const total = res.reduce(
(acc: number, cur: any) => acc + (cur.__aggregate__ || 0),
0,
)
result.source.forEach((item) => {
const value =
res.find((e: any) => item.name === e['等级'])?.__aggregate__ || 0
item.value = value
item.ratio = (value / total) * 100
})
return result
}
async function getAge(query?: string) {
const result = { ...state.basicInfo.age }
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 }) => {
const ageQuery = range[0]
? `paths @ "出生日期" && string >= "${range[0]}",paths @ "出生日期" && string <= "${range[1]}"`
: `paths @ "出生日期" && string <= "${range[1]}"`
return useFetchMember({
a: 'id,count',
q: query ? `${ageQuery},${query}` : ageQuery,
})
}),
)
result.source.forEach(
(item, i) => (item.value = res[i]?.[0].__aggregate__ || 0),
)
return result
}
src/store/mutations.ts
View file @ 27873080
import { GlobalStateProps } from './index'
type BasicInfo = Pick<GlobalStateProps, 'basicInfo'>['basicInfo']
export default {
SET_LOADING(state: GlobalStateProps, val: boolean) {
state.showLoading = val
......@@ -25,4 +27,10 @@ export default {
SET_STRUCT_MODAL(state: GlobalStateProps, val: boolean) {
state.showStructModal = val
},
SET_BASIC_INFO(state: GlobalStateProps, data: BasicInfo) {
state.basicInfo = data
},
SET_FILTER_PATH(state: GlobalStateProps, val: string) {
state.filterPath = val
},
}
src/store/state.ts
View file @ 27873080
......@@ -7,4 +7,48 @@ export default {
showBuildingDrawer: false,
showActivityListModal: false,
showStructModal: false,
basicInfo: {
sum: [
{ name: '党组织', value: 0, unit: '个' },
{ name: '关系在街道内党员', value: 0, unit: '位' },
{ name: '街道居民党员', value: 0, unit: '位' },
],
member: {
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' },
],
source: [
{ name: '机关事业单位党员', value: 0, ratio: 0 },
{ name: '居民区党员', value: 0, ratio: 0 },
{ name: '两新党员', value: 0, ratio: 0 },
],
},
organization: {
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' },
],
source: [
{ name: '党委', value: 0, ratio: 0 },
{ name: '党总支', value: 0, ratio: 0 },
{ name: '党支部', value: 0, ratio: 0 },
{ name: '联合党支部', value: 0, ratio: 0 },
],
},
age: {
dimensions: [
{ name: 'name', displayName: '年龄' },
{ name: 'value', displayName: '数量' },
],
source: [
{ name: '18-25岁', value: 0 },
{ name: '26-35岁', value: 0 },
{ name: '36-50岁', value: 0 },
{ name: '50-70岁', value: 0 },
{ name: '70岁以上', value: 0 },
],
},
},
filterPath: '', // 地理筛选路径
}
src/util/dayjs.ts
View file @ 27873080
import dayjs from 'dayjs'
import ch from 'dayjs/locale/zh-cn'
import LocalizedFormat from 'dayjs/plugin/LocalizedFormat'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(LocalizedFormat)
dayjs.extend(relativeTime)
dayjs.locale(ch)
export default dayjs
src/util/tags.ts
View file @ 27873080
export const member = [
{ name: '荣获区级奖项党员', type: 'primary' },
{ name: '荣获市级及以上奖项党员', type: 'info' },
{ name: '荣获区级奖项', type: 'primary' },
{ name: '荣获市级及以上奖项', type: 'info' },
{ name: '光荣在当党50年', type: 'success' },
{ name: '党心暖我新', type: 'warning' },
{ name: '党心暖我心', type: 'warning' },
]
export const organization = [
{ name: '荣获区级奖项党组织', type: 'primary' },
{ name: '荣获市级及以上奖项党组织', type: 'info' },
{ name: '光荣在当党50年', type: 'success' },
{ name: '党心暖我新', type: 'warning' },
{ name: '党心暖我心', type: 'warning' },
]
export const activity = [
{ name: '支部党员大会', type: 'primary' },
......
src/view/components/basic-info.vue
View file @ 27873080
......@@ -13,9 +13,14 @@
</n-icon>
</template>
<n-collapse-item name="1">
<div class="info-wrapper">
<div
class="info-wrapper"
:class="{
short: organization.source.length === 0,
}"
>
<div class="sum">
<div v-for="item in sumList" :key="item.name">
<div v-for="item in sum" :key="item.name">
<p>
<m-count class="count" :value="item.value" />
<span>{{ item.unit }}</span>
......@@ -27,39 +32,46 @@
<p class="title">关系在街道党员分类</p>
<div class="content">
<div class="pie">
<m-pie :option="pieOption" :dataset="data1" />
<m-pie :option="pieOption" :dataset="member" />
</div>
<div>
<div v-for="(item, i) in data1.source" :key="item.name">
<div v-for="(item, i) in member.source" :key="item.name">
<p>
<i class="dot" :style="`background:${color1[i]}`" />
{{ item.name }}
</p>
<p>
<span><m-count :value="item.ratio" /> %</span>
<span>
<m-count :value="item.ratio" :decimal="1" /> %
</span>
<span><m-count :value="item.value" /> 位</span>
</p>
</div>
</div>
</div>
</div>
<div class="box">
<div v-show="organization.source.length > 0" class="box">
<p class="title">党组织分类</p>
<div class="content">
<div class="pie">
<m-pie
:option="{ ...pieOption, color: color2 }"
:dataset="data2"
:dataset="organization"
/>
</div>
<div>
<div v-for="(item, i) in data2.source" :key="item.name">
<div
v-for="(item, i) in organization.source"
:key="item.name"
>
<p>
<i class="dot" :style="`background:${color2[i]}`" />
{{ item.name }}
</p>
<p>
<span><m-count :value="item.ratio" /> %</span>
<span>
<m-count :value="item.ratio" :decimal="1" /> %
</span>
<span><m-count :value="item.value" /> 个</span>
</p>
</div>
......@@ -69,7 +81,7 @@
<div class="box">
<p class="title">关系在街道党员年龄分布</p>
<div class="content">
<m-line :option="lineOption" :dataset="data3" />
<m-line :option="lineOption" :dataset="age" />
</div>
</div>
</div>
......@@ -95,9 +107,8 @@
import { ChartTypes } from '@/components/MyComponent'
import { ref, PropType, computed, onMounted } from 'vue'
import { CaretForward } from '@vicons/ionicons5'
import { useFetchOrg, useFetchMember } from '@/hooks/useFetch'
import { useFetchOrg } from '@/hooks/useFetch'
import store from '@/store'
import dayjs from '@/util/dayjs'
const show = computed(() => store.state.showBasicInfo)
const props = defineProps({
......@@ -108,35 +119,10 @@ const props = defineProps({
})
const visible = computed(() => props.visible)
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 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 color1 = ['#FAADB8', '#C1474F', '#6D2C29']
const color2 = ['#FAADB8', '#DD505E', '#A53D40', '#6D2C29']
......@@ -164,7 +150,7 @@ const lineOption: ChartTypes.LineOption = {
yAxis: [
{
type: 'value',
// minInterval: 100,
minInterval: 1,
// maxInterval: 100,
// interval: 100,
splitLine: {
......@@ -194,129 +180,8 @@ const lineOption: ChartTypes.LineOption = {
},
],
}
const data1 = ref({
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' },
],
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 = ref({
dimensions: [
{ name: 'name', displayName: '类型' },
{ name: 'value', displayName: '数量' },
],
source: [
{ 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 = ref({
dimensions: [
{ name: 'name', displayName: '年龄' },
{ name: 'value', displayName: '数量' },
],
source: [
{ 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),
)
}
onMounted(() => {
getSumList()
getData1()
getData2()
getData3()
store.dispatch('getBasicInfo')
})
const curTagKey = ref<string | null>(null)
......@@ -358,6 +223,9 @@ const clickTag = async (key: string) => {
padding .03rem .08rem
display flex
flex-direction column
transition height .2s ease-in-out
&.short
height 60vh
.sum
display flex
justify-content space-between
......
src/view/components/building-drawer.vue
View file @ 27873080
......@@ -19,8 +19,8 @@
<p class="name">{{ path.join('') }}</p>
<div v-if="showBuildingDetail" class="building">
<div class="nav">
<p :title="curBuilding['小区名称'] + curBuilding['楼宇名称']">
{{ curBuilding['小区名称'] + curBuilding['楼宇名称'] }}
<p :title="curBuilding['楼宇名称']">
{{ curBuilding['楼宇名称'] }}
</p>
<span @click="showBuildingDetail = false">
返回
......@@ -55,15 +55,21 @@
class="room"
>
<div class="members">
<n-icon
<n-popover
v-for="(m, n) in room.members"
:key="n"
class="icon"
size=".1rem"
@click.prevent.stop="selectMember(m)"
class="member-info-popover"
placement="left"
flip
trigger="click"
>
<template #trigger>
<n-icon class="icon" size=".1rem">
<svg-icon :data="member" original />
</n-icon>
</template>
<MemberInfo :data="m" />
</n-popover>
</div>
<p>{{ room['房间号'] }}</p>
</div>
......@@ -88,7 +94,7 @@
</n-icon>
{{ item['楼宇名称'] }}
</p>
<span class="next" @click="buildingNext(item)">
<span class="next" @click.prevent.stop="buildingNext(item)">
下一级
<n-icon class="icon" size=".1rem" color="#dd505E">
<ArrowForward />
......@@ -108,6 +114,7 @@ import dot from '@images/dot.svg'
import { ArrowForward, ArrowBack, ArrowDown } from '@vicons/ionicons5'
import member from '@images/member.svg'
import { useFetchRoom, useFetchMember } from '@/hooks/useFetch'
import MemberInfo from './member-info.vue'
const props = defineProps({
list: {
......@@ -118,23 +125,53 @@ const props = defineProps({
type: Array as PropType<any[]>,
default: () => [],
},
resetInfo: {
type: Function as PropType<() => any>,
default: null,
},
})
const show = computed(() => store.state.showBuildingDrawer)
const curBuilding = ref<string | null>(null)
const curBuilding = ref<any>(null)
const showBuildingDetail = ref(false)
const back = () => {
props.resetInfo && props.resetInfo()
showBuildingDetail.value = false
curBuilding.value = null
store.commit('SET_BUILDING_DRAWER', false)
}
const closeDrawer = () => {
back()
store.dispatch('getBasicInfo')
store.commit('SET_FILTER_DRAWER', false)
// TODO 清除撒点
}
const setBuilding = (building: any) => (curBuilding.value = building)
const setBuilding = (building: any, causedByNext?: boolean) => {
let query = store.state.filterPath
const buildingQuery = `paths @ "所属楼宇" && string @ "${building['号']}"`
if (
(curBuilding.value && curBuilding.value['楼宇名称']) ===
(building && building['楼宇名称']) &&
!causedByNext
) {
curBuilding.value = null
query = query.replace(',' + buildingQuery, '')
} else {
if (query.includes('所属楼宇')) {
const arr = query.split(',')
const index = arr.findIndex((e) => e.includes('所属楼宇'))
arr.splice(index, 1, buildingQuery)
query = arr.join(',')
} else {
query += ',' + buildingQuery
}
curBuilding.value = building
}
store.dispatch('getBasicInfo', query)
// TODO 地图切换楼宇画面
}
const floors = ref<any[]>([])
const getMembers = async (data: any) => {
......@@ -194,14 +231,9 @@ const getFloors = async (data: any) => {
const buildingNext = async (building: any) => {
floors.value = await getFloors(building)
setBuilding(building)
setBuilding(building, true)
showBuildingDetail.value = true
}
const selectMember = (data: any) => {
console.log('点击了房间成员：', data)
// TODO 展示详情
}
</script>
<style lang="stylus" scoped>
......@@ -312,7 +344,7 @@ const selectMember = (data: any) => {
height .4rem
box-sizing border-box
overflow hidden
>.icon
.icon
padding .04rem
cursor pointer
&:hover
......@@ -330,9 +362,16 @@ const selectMember = (data: any) => {
height @width
color $red
&.n-carousel__arrow--left
left -0.02rem
left -0.01rem
&.n-carousel__arrow--right
right -0.02rem
right -0.01rem
.n-carousel__dots
display none
.member-info-popover
// width 2.8rem
// min-height 3rem
// max-height 4rem
// overflow hidden
background rgba(249, 250, 250, 0.9) !important
$blur()
</style>
src/view/components/filter-drawer.vue
View file @ 27873080
......@@ -157,7 +157,11 @@
</div>
</n-drawer-content>
</n-drawer>
<BuildingDrawer :list="buildingList" :path="curPath" />
<BuildingDrawer
:list="buildingList"
:path="curPath"
:reset-info="checkPathThenFetchInfo"
/>
</template>
<script lang="ts" setup>
......@@ -180,7 +184,11 @@ import exportIcon from '@images/export.svg'
import dot from '@images/dot.svg'
const show = computed(() => store.state.showFilterDrawer)
const close = () => store.commit('SET_FILTER_DRAWER', false)
const close = () => {
store.dispatch('getBasicInfo')
store.commit('SET_FILTER_DRAWER', false)
// TODO 清除撒点
}
const curTab = ref('tag')
......@@ -322,23 +330,22 @@ const curGeo = ref('社区')
const curArea = ref<string | null>(null)
const curCommittee = ref<string | null>(null)
const curCommunity = ref<string | null>(null)
const setArea = (name: string) => {
if (curArea.value === name) {
const setArea = (name: string, causedByNext?: boolean) => {
if (curArea.value === name && !causedByNext) {
curArea.value = null
} else {
curArea.value = name
}
console.log(name, curArea.value)
}
const setCommittee = (name: string) => {
if (curCommittee.value === name) {
const setCommittee = (name: string, causedByNext?: boolean) => {
if (curCommittee.value === name && !causedByNext) {
curCommittee.value = null
} else {
curCommittee.value = name
}
}
const setCommunity = (name: string) => {
if (curCommunity.value === name) {
const setCommunity = (name: string, causedByNext?: boolean) => {
if (curCommunity.value === name && !causedByNext) {
curCommunity.value = null
} else {
curCommunity.value = name
......@@ -347,12 +354,12 @@ const setCommunity = (name: string) => {
const areaNext = async (name: string) => {
await getCommittees(name)
setArea(name)
setArea(name, true)
curGeo.value = '居委'
}
const committeeNext = async (name: string) => {
await getCommunities(name)
setCommittee(name)
setCommittee(name, true)
curGeo.value = '小区'
}
......@@ -366,7 +373,7 @@ const getBuildings = async (name: string) => {
}
const communityNext = async (name: string) => {
await getBuildings(name)
setCommunity(name)
setCommunity(name, true)
store.commit('SET_BUILDING_DRAWER', true)
}
const toPreStep = () => {
......@@ -385,21 +392,28 @@ const toPreStep = () => {
watch(
() => curGeo.value,
(cur) => {
if (cur === '社区') {
curCommittee.value = null
curCommunity.value = null
}
if (cur === '居委') {
if (curArea.value) {
getCommittees(curArea.value)
} else {
getCommittees()
}
curCommunity.value = null
} else if (cur === '小区') {
if (curCommittee.value) {
getCommunities(curCommittee.value)
} else {
curArea.value = null
getCommunities()
}
}
},
)
const curPath = computed(() => {
if (curGeo.value === '社区') return [curArea.value || '社区']
if (curGeo.value === '居委' && !curArea.value)
......@@ -417,6 +431,25 @@ const curPath = computed(() => {
: curGeo.value === '小区' && result.push('小区')
return result
})
const checkPathThenFetchInfo = () => {
const area = curArea.value
const committee = curCommittee.value
const community = curCommunity.value
const query = []
area && query.push(`paths @ "所属社区" && string == "${area}"`)
committee && query.push(`paths @ "所属居委" && string == "${committee}"`)
community && query.push(`paths @ "所属小区" && string == "${community}"`)
store.dispatch('getBasicInfo', query.length > 0 ? query.join(',') : undefined)
}
watch(
[() => curArea.value, () => curCommittee.value, () => curCommunity.value],
() => {
checkPathThenFetchInfo()
// TODO 地图框出边界并撒点
},
)
</script>
<style lang="stylus" scoped>
......
src/view/components/member-info.vue 0 → 100644
View file @ 27873080
<template>
<div class="info">
<p class="title">{{ data['姓名'] }}</p>
<n-space v-show="tags && tags.length > 0">
<n-tag v-for="tag in tags" :key="tag.type" :type="tag.type" size="small">
{{ tag.name }}
</n-tag>
</n-space>
<p>{{ data['所属党组织名称'] }}</p>
<div class="box flex">
<div>
<span>性别</span>
<p>{{ data['性别'] }}</p>
</div>
<div>
<span>出生日期</span>
<p>{{ dayjs(data['出生日期']).format('ll') }}</p>
</div>
<div>
<span>学历</span>
<p>{{ data['学历'] }}</p>
</div>
<div>
<span>党员身份</span>
<p>{{ data['党员身份'] }}</p>
</div>
<div>
<span>入党日期</span>
<p>{{ dayjs(data['加入中共党组织日期']).format('ll') }}</p>
</div>
</div>
<div class="box">
<div>
<span>身份证号码</span>
<p>{{ trans(data['身份证号码']) }}</p>
</div>
<div>
<span>居住地址</span>
<p>{{ data['所属小区'] + data['所属楼宇'] + data['所属房间'] }}</p>
</div>
<div>
<span>联系电话</span>
<p>{{ trans(data['联系方式_手机']) }}</p>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { organization } from '@/util/tags'
import dayjs from '@/util/dayjs'
import { computed, PropType } from '@vue/runtime-core'
import { member } from '@/util/tags'
const props = defineProps({
data: {
type: Object as PropType<{ [key: string]: any }>,
required: true,
},
})
const trans = (val: string) => {
return (val && val.replace(/(\w{3})\w*(\w{4})/, '$1******$2')) || '无'
}
console.log(dayjs().diff('1999-09-12', 'year'))
const tags = computed(() => {
const result: { type?: string; name?: string }[] = []
const marker: string[] = props.data['标签'] || []
const date = props.data['加入中共党组织日期']
if (dayjs().diff(date, 'year') >= 50 && dayjs().diff(date, 'year') <= 59) {
marker.push('光荣在当党50年')
} else if (dayjs().diff(date, 'year') >= 60) {
marker.push('党心暖我心')
}
if (marker.length > 0) {
marker.forEach((item: string) => {
const cur = member.find((e) => e.name === item)
cur &&
result.push({
type: cur.type,
name: item,
})
})
}
return result
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.info
border-radius .04rem
box-sizing border-box
.title
font-size .13rem
font-family $font-ping-medium
margin-bottom .04rem
.box
background $white-bg
border-radius .03rem
margin-top .05rem
box-sizing border-box
padding .1rem
min-width .3rem
&.flex
display flex
flex-wrap wrap
>div
&:nth-of-type(1)
&:nth-of-type(4)
width 25%
&:nth-of-type(2)
&:nth-of-type(5)
width 42%
span
color $gray
p
margin-bottom .03rem
font-family $font-ping-medium
white-space nowrap
</style>
src/view/main.vue
View file @ 27873080
......@@ -6,8 +6,8 @@
<svg-icon :data="reset" original />
</n-icon>
</div>
<!-- <InforModal class="fix1" /> -->
<ActivityDetail class="fix1" />
<InforModal class="fix1" />
<!-- <ActivityDetail class="fix1" /> -->
<ListModal class="fix2" pagination />
</template>
......
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