Skip to content

E
east-nanjing-new
Commit 505cfdf2 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

公共设施（菜场 药店 便利店暂时无法和小区关联上）

parent 0184d012
Show whitespace changes
Inline Side-by-side
Showing with 429 additions and 30 deletions
index.html
View file @ 505cfdf2
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="/dev/SMap.min.js"></script> <script src="/SMap.min.js"></script>
<script src="/Plugins.min.js"></script> <script src="/Plugins.min.js"></script>
<script src="/hls.js"></script> <script src="/hls.js"></script>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
......
src/ajax/api.ts
View file @ 505cfdf2
...@@ -34,6 +34,11 @@ export default { ...@@ -34,6 +34,11 @@ export default {
GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表 GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表
GET_CASE: '/service-special-nandong/compairs', // 案件汇总列表 GET_CASE: '/service-special-nandong/compairs', // 案件汇总列表
GET_CASE_DETAIL: '/service-special-nandong/compair', // 案件详情 GET_CASE_DETAIL: '/service-special-nandong/compair', // 案件详情
GET_MARKETS: '/service-special-nandong/vegetableMarkets', // 菜场、药店、便利店
GET_DUNGS: '/service-special-nandong/urDungs', // 倒粪口
GET_BINS: '/service-special-nandong/internalDustbins', // 垃圾箱
GET_PUBLICSAFE_RIGHT_GATE: '/service-special-nandong/ironGate/statistical', // 公共安全-右侧-门岗分布 GET_PUBLICSAFE_RIGHT_GATE: '/service-special-nandong/ironGate/statistical', // 公共安全-右侧-门岗分布
GET_PUBLICSAFE_RIGHT_SAFEMAP: '/service-special-nandong/peaceMaps', // 公共安全-右侧-平安地图 GET_PUBLICSAFE_RIGHT_SAFEMAP: '/service-special-nandong/peaceMaps', // 公共安全-右侧-平安地图
GET_PUBLICSAFE_TRUE_PEOPLE: '/service-special-nandong/personnel/statistical', // 公共安全-右侧-实有人口 GET_PUBLICSAFE_TRUE_PEOPLE: '/service-special-nandong/personnel/statistical', // 公共安全-右侧-实有人口
......
src/components/MyComponent/MyTable/my-table.vue
View file @ 505cfdf2
...@@ -140,7 +140,7 @@ export default defineComponent({ ...@@ -140,7 +140,7 @@ export default defineComponent({
if (formatter && key.match(/>(\w*)[#:]?/)) { if (formatter && key.match(/>(\w*)[#:]?/)) {
return formatter[RegExp.$1](data[dataKey], data) return formatter[RegExp.$1](data[dataKey], data)
} }
return data[dataKey] || '' return data[dataKey] || '无'
} }
return { return {
layout, layout,
......
src/view/components/person-list.vue
View file @ 505cfdf2
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue' import { defineComponent, nextTick, PropType, ref, watch } from 'vue'
import empty from '@/assets/images/empty.png' import empty from '@/assets/images/empty.png'
import { ajax, api } from '@/ajax' import { ajax, api } from '@/ajax'
import store from '@/store' import store from '@/store'
...@@ -74,6 +74,7 @@ export default defineComponent({ ...@@ -74,6 +74,7 @@ export default defineComponent({
data.value = content data.value = content
} }
} }
await nextTick()
store.commit('SET_LOADING', false) store.commit('SET_LOADING', false)
}, },
{ immediate: true } { immediate: true }
......
src/view/components/sub-tabs.vue 0 → 100644
View file @ 505cfdf2
<template>
<div class="tabs-container">
<div
v-for="tab in list"
:key="tab.key"
:class="{ on: curTabKey === tab.key }"
@click.prevent="handleSelect(tab.key)"
>
<p>{{ tab.name }}</p>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, PropType } from 'vue'
export interface TabsProp {
name: string
key: string
}
export default defineComponent({
name: 'SubTabs',
props: {
list: {
type: Array as PropType<TabsProp[]>,
required: true,
},
},
emits: ['select'],
setup(props, ctx) {
const curTabKey = ref(props.list[0].key)
const handleSelect = (key: string) => {
curTabKey.value = key
ctx.emit('select', key)
}
return {
curTabKey,
handleSelect,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.tabs-container
display flex
width 100%
margin .05rem 0
>div
display flex
align-items center
cursor pointer
color #aaa
font-size .1rem
transition color .1s ease
margin-right .1rem
&.on
&:hover
color #fff
&.on
&:before,
&:after
content ''
display inline-block
width .16rem
height @width
background url('@/assets/images/modal-head-tri.png') 100% / 100% 100% no-repeat
&:after
transform rotate(180deg)
p
padding 0 .05rem
flex 1
</style>
src/view/drawers/community-drawer.vue
View file @ 505cfdf2
...@@ -10,12 +10,13 @@ ...@@ -10,12 +10,13 @@
class="basic-info" class="basic-info"
:template="[ :template="[
'stNameFrst:小区名称', 'stNameFrst:小区名称',
'address:小区地址|cmtName:所属居委会', 'addrFrst:小区地址|cmtName:所属居委会',
'totUnits:总门牌幢数|totHous:总户数', 'totUnits:总门牌幢数|totHous:总户数',
'stCnstArea:总建筑面积|landArea:占地面积', 'stCnstArea:总建筑面积>area|landArea:占地面积>area',
'range:小区四至范围|stNotcsparea:四至范围不包括', 'range:小区四至范围|stNotcsparea:四至范围不包括',
]" ]"
:data="communityData" :data="communityData"
:formatter="formatter"
label-width="1.2rem" label-width="1.2rem"
/> />
<Tabs class="tabs" :list="tabs" horizontal @select="curTab = $event" /> <Tabs class="tabs" :list="tabs" horizontal @select="curTab = $event" />
...@@ -118,7 +119,7 @@ ...@@ -118,7 +119,7 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</div> </div>
<div v-if="deviceList.length > 0" class="device-table"> <div v-if="deviceList.length > 0" class="wrapper">
<m-table <m-table
:template="[ :template="[
'序号|安装位置*2|名称*2|类型|维保单位*3', '序号|安装位置*2|名称*2|类型|维保单位*3',
...@@ -130,22 +131,75 @@ ...@@ -130,22 +131,75 @@
<m-empty v-else /> <m-empty v-else />
</template> </template>
<template v-else-if="curTab === 'public'"> <template v-else-if="curTab === 'public'">
<m-empty /> <div class="select-bar">
<a-select
v-model:value="publicType"
dropdown-class-name="device-selector-drop-down"
>
<a-select-option
v-for="option in publicOptions"
:key="option.type"
:value="option.type"
>
{{ option.name }}
</a-select-option>
</a-select>
</div>
<div v-if="publicList.length > 0" class="wrapper">
<template v-if="publicType === '倒粪'">
<SubTabs
:list="
publicList.map((_, i) => ({ name: `倒粪口${i + 1}`, key: i }))
"
@select="curSubtabKey = $event"
/>
<m-form
:template="[
'installAddr:地址|ownership:所有权',
'buildingArea:建筑面积>area|type:组织架构>structure',
'water:排水>water|servePersonNum:服务人数',
'stratTime:服务时间段|serveHouseholdNum:服务户数',
'trashNum:垃圾桶数|photo:照片#image',
]"
:data="publicList[curSubtabKey]"
label-width="1.2rem"
:formatter="formatter"
/>
</template>
<div v-else-if="publicType === '垃圾'" class="box">
<div v-for="item in publicList" :key="item.id">
<div>
<p>{{ item.dutyPersonnel }} {{ item.phone }}</p>
<p>{{ item.addr }}</p>
</div>
</div>
</div>
<!-- <m-table
v-if="publicType === '充电'"
:template="[
'序号|安装位置*2|名称*2|类型|维保单位*3',
'index|ieAddr|ieName|ieType|ieUnit',
]"
:data="publicList"
/> -->
</div>
<m-empty v-else />
</template> </template>
</m-card> </m-card>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, PropType, computed } from 'vue' import { defineComponent, ref, PropType, computed, watch } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue' import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTabs from '../components/sub-tabs.vue'
import SubTitle from '../components/sub-title.vue' import SubTitle from '../components/sub-title.vue'
import CaseList from '../components/case-list.vue' import CaseList from '../components/case-list.vue'
import { ajax, api } from '@/ajax' import { ajax, api } from '@/ajax'
export default defineComponent({ export default defineComponent({
name: 'CommunityDrawer', name: 'CommunityDrawer',
components: { Tabs, SubTitle, CaseList }, components: { Tabs, SubTitle, CaseList, SubTabs },
props: { props: {
communityInfo: { communityInfo: {
type: Object as PropType<{ [key: string]: any } | null>, type: Object as PropType<{ [key: string]: any } | null>,
...@@ -191,7 +245,7 @@ export default defineComponent({ ...@@ -191,7 +245,7 @@ export default defineComponent({
}, },
]) ])
const communityData = computed(() => { const communityData = computed(() => {
const { communityInfo = {}, caseInfo = [] } = props const { communityInfo = {} } = props
const keys = [ const keys = [
{ name: '北', key: 'stCspNorth' }, { name: '北', key: 'stCspNorth' },
{ name: '南', key: 'stCspSouth' }, { name: '南', key: 'stCspSouth' },
...@@ -203,10 +257,8 @@ export default defineComponent({ ...@@ -203,10 +257,8 @@ export default defineComponent({
? item.name + communityInfo[item.key] ? item.name + communityInfo[item.key]
: null : null
) )
return { return {
...communityInfo, ...communityInfo,
address: caseInfo && caseInfo[0] && caseInfo[0].address,
range: range.filter((e) => e !== null).join('，'), range: range.filter((e) => e !== null).join('，'),
} }
}) })
...@@ -226,11 +278,11 @@ export default defineComponent({ ...@@ -226,11 +278,11 @@ export default defineComponent({
const deviceType = ref('大门') const deviceType = ref('大门')
const deviceOptions = ref([ const deviceOptions = ref([
{ name: '大门', type: 'gate' }, { name: '大门' },
{ name: '监控', type: 'monitor' }, { name: '监控' },
{ name: '防盗门', type: 'security' }, { name: '防盗门' },
{ name: '电梯', type: 'elevator' }, { name: '电梯' },
{ name: '消防泵', type: 'fire' }, { name: '消防泵' },
]) ])
const deviceList = computed(() => { const deviceList = computed(() => {
const { deviceList: list } = props.communityInfo as any const { deviceList: list } = props.communityInfo as any
...@@ -240,6 +292,88 @@ export default defineComponent({ ...@@ -240,6 +292,88 @@ export default defineComponent({
.map((e: any, i: number) => ({ index: i + 1, ...e })) .map((e: any, i: number) => ({ index: i + 1, ...e }))
}) })
const publicList = ref([])
const publicType = ref('倒粪')
const publicOptions = ref([
{ name: '倒粪口', type: '倒粪' },
{ name: '垃圾箱', type: '垃圾' },
{ name: '菜场菜店', type: '菜' },
{ name: '药店药房', type: '药' },
{ name: '便利店', type: '便利' },
{ name: '充电桩', type: '充电' },
])
const curSubtabKey = ref('0')
watch(
() => publicType.value,
async (type) => {
curSubtabKey.value = '0'
const markets = ['菜', '药', '便利']
if (markets.includes(type)) {
const { content } = (
await ajax.get({
url: api.GET_MARKETS,
params: {
pageSize: 1000,
labelName_l: type,
},
})
).data
publicList.value = content || []
} else if (type === '倒粪') {
const { content } = (
await ajax.get({
url: api.GET_DUNGS,
params: {
pageSize: 1000,
sectIds: (communityData.value as any).sectId,
},
})
).data
publicList.value = content || []
} else if (type === '垃圾') {
const { content } = (
await ajax.get({
url: api.GET_BINS,
params: {
pageSize: 1000,
sectId: (communityData.value as any).sectId,
},
})
).data
publicList.value = content || []
} else {
publicList.value = []
}
},
{ immediate: true }
)
const formatter = {
area(val: unknown) {
return val ? `${val}㎡` : '无'
},
structure(val: string, data: any) {
return `${val}(${+data.havePourDung === 1 ? '有' : '无'}倒粪口/${
+data.haveGarbageRoom === 1 ? '有' : '无'
}垃圾箱房/${+data.haveUrinal === 1 ? '有' : '无'}小便池)`
},
water(_: unknown, data: any) {
return `${+data.haveAboveWater === 1 ? '有' : '无'}上水/${
+data.haveBelowWater === 1 ? '有' : '无'
}下水`
},
}
watch(
() => curTab.value,
() => {
// 重置选项
deviceType.value = '大门'
publicType.value = '倒粪'
curSubtabKey.value = '0'
}
)
return { return {
curTab, curTab,
tabs, tabs,
...@@ -250,6 +384,11 @@ export default defineComponent({ ...@@ -250,6 +384,11 @@ export default defineComponent({
deviceType, deviceType,
deviceOptions, deviceOptions,
deviceList, deviceList,
publicList,
publicType,
publicOptions,
curSubtabKey,
formatter,
} }
}, },
}) })
...@@ -311,9 +450,28 @@ export default defineComponent({ ...@@ -311,9 +450,28 @@ export default defineComponent({
.room-table .room-table
max-height 50vh max-height 50vh
overflow-y auto overflow-y auto
.device-table .wrapper
max-height 48vh max-height 48vh
overflow-y auto overflow-y auto
.box
$full()
display flex
flex-wrap wrap
>div
width 23.4%
height 1rem
margin-right .1rem
margin-bottom @margin-right
background url('@/assets/images/default.jpeg') 100% / 100% 100% no-repeat
position relative
>div
background rgba(0,0,0,0.6)
color #fff
position absolute
left 0
right 0
bottom 0
padding .02rem .05rem
</style> </style>
<style lang="stylus"> <style lang="stylus">
......
src/view/drawers/population-drawer.vue
View file @ 505cfdf2
...@@ -41,13 +41,14 @@ ...@@ -41,13 +41,14 @@
<m-form <m-form
:template="[ :template="[
'stNameFrst:小区名称', 'stNameFrst:小区名称',
'address:小区地址|cmtName:所属居委会', 'addrFrst:小区地址|cmtName:所属居委会',
'totUnits:总门牌幢数|totHous:总户数', 'totUnits:总门牌幢数|totHous:总户数',
'stCnstArea:总建筑面积|landArea:占地面积', 'stCnstArea:总建筑面积>area|landArea:占地面积>area',
'range:小区四至范围|stNotcsparea:四至范围不包括', 'range:小区四至范围|stNotcsparea:四至范围不包括',
]" ]"
:data="communityData" :data="communityData"
label-width="1.2rem" label-width="1.2rem"
:formatter="formatter"
/> />
</template> </template>
<template v-else-if="curTab2 === 'room'"> <template v-else-if="curTab2 === 'room'">
...@@ -58,8 +59,9 @@ ...@@ -58,8 +59,9 @@
</div> </div>
<div class="room-table"> <div class="room-table">
<m-table <m-table
:template="['户室|面积', 'houseNo|houseArea']" :template="['户室|面积', 'houseNo|houseArea>area']"
:data="buildingRoomList" :data="buildingRoomList"
:formatter="formatter"
/> />
</div> </div>
</template> </template>
...@@ -149,7 +151,7 @@ ...@@ -149,7 +151,7 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</div> </div>
<div v-if="deviceList.length > 0" class="device-table"> <div v-if="deviceList.length > 0" class="wrapper">
<m-table <m-table
:template="[ :template="[
'序号|安装位置*2|名称*2|类型|维保单位*3', '序号|安装位置*2|名称*2|类型|维保单位*3',
...@@ -161,7 +163,59 @@ ...@@ -161,7 +163,59 @@
<m-empty v-else /> <m-empty v-else />
</template> </template>
<template v-else-if="curTab2 === 'public'"> <template v-else-if="curTab2 === 'public'">
<m-empty /> <div class="select-bar">
<a-select
v-model:value="publicType"
dropdown-class-name="device-selector-drop-down"
>
<a-select-option
v-for="option in publicOptions"
:key="option.type"
:value="option.type"
>
{{ option.name }}
</a-select-option>
</a-select>
</div>
<div v-if="publicList.length > 0" class="wrapper">
<template v-if="publicType === '倒粪'">
<SubTabs
:list="
publicList.map((_, i) => ({ name: `倒粪口${i + 1}`, key: i }))
"
@select="curSubtabKey = $event"
/>
<m-form
:template="[
'installAddr:地址|ownership:所有权',
'buildingArea:建筑面积>area|type:组织架构>structure',
'water:排水>water|servePersonNum:服务人数',
'stratTime:服务时间段|serveHouseholdNum:服务户数',
'trashNum:垃圾桶数|photo:照片#image',
]"
:data="publicList[curSubtabKey]"
label-width="1.2rem"
:formatter="formatter"
/>
</template>
<div v-else-if="publicType === '垃圾'" class="box">
<div v-for="item in publicList" :key="item.id">
<div>
<p>{{ item.dutyPersonnel }} {{ item.phone }}</p>
<p>{{ item.addr }}</p>
</div>
</div>
</div>
<!-- <m-table
v-if="publicType === '充电'"
:template="[
'序号|安装位置*2|名称*2|类型|维保单位*3',
'index|ieAddr|ieName|ieType|ieUnit',
]"
:data="publicList"
/> -->
</div>
<m-empty v-else />
</template> </template>
</template> </template>
<template v-else> <template v-else>
...@@ -215,15 +269,16 @@ ...@@ -215,15 +269,16 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, PropType, computed } from 'vue' import { defineComponent, ref, PropType, computed, watch } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue' import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTabs from '../components/sub-tabs.vue'
import SubTitle from '../components/sub-title.vue' import SubTitle from '../components/sub-title.vue'
import CaseList from '../components/case-list.vue' import CaseList from '../components/case-list.vue'
import { ajax, api } from '@/ajax' import { ajax, api } from '@/ajax'
export default defineComponent({ export default defineComponent({
name: 'PopulationDrawer', name: 'PopulationDrawer',
components: { Tabs, SubTitle, CaseList }, components: { Tabs, SubTitle, CaseList, SubTabs },
props: { props: {
communityInfo: { communityInfo: {
type: Object as PropType<{ [key: string]: any } | null>, type: Object as PropType<{ [key: string]: any } | null>,
...@@ -303,11 +358,11 @@ export default defineComponent({ ...@@ -303,11 +358,11 @@ export default defineComponent({
} }
const houseData = computed(() => { const houseData = computed(() => {
const { communityInfo, buildingInfo, roomInfo, propertyInfo } = props const { communityInfo, buildingInfo, roomInfo } = props
return { ...communityInfo, ...buildingInfo, ...roomInfo } return { ...communityInfo, ...buildingInfo, ...roomInfo }
}) })
const communityData = computed(() => { const communityData = computed(() => {
const { communityInfo = {}, caseInfo = [] } = props const { communityInfo = {} } = props
const keys = [ const keys = [
{ name: '北', key: 'stCspNorth' }, { name: '北', key: 'stCspNorth' },
{ name: '南', key: 'stCspSouth' }, { name: '南', key: 'stCspSouth' },
...@@ -322,7 +377,6 @@ export default defineComponent({ ...@@ -322,7 +377,6 @@ export default defineComponent({
return { return {
...communityInfo, ...communityInfo,
address: caseInfo && caseInfo[0] && caseInfo[0].address,
range: range.filter((e) => e !== null).join('，'), range: range.filter((e) => e !== null).join('，'),
} }
}) })
...@@ -367,6 +421,87 @@ export default defineComponent({ ...@@ -367,6 +421,87 @@ export default defineComponent({
.filter((e: any) => e.ieClassify.includes(deviceType.value)) .filter((e: any) => e.ieClassify.includes(deviceType.value))
.map((e: any, i: number) => ({ index: i + 1, ...e })) .map((e: any, i: number) => ({ index: i + 1, ...e }))
}) })
const publicList = ref([])
const publicType = ref('倒粪')
const publicOptions = ref([
{ name: '倒粪口', type: '倒粪' },
{ name: '垃圾箱', type: '垃圾' },
{ name: '菜场菜店', type: '菜' },
{ name: '药店药房', type: '药' },
{ name: '便利店', type: '便利' },
{ name: '充电桩', type: '充电' },
])
const curSubtabKey = ref('0')
watch(
() => publicType.value,
async (type) => {
curSubtabKey.value = '0'
const markets = ['菜', '药', '便利']
if (markets.includes(type)) {
const { content } = (
await ajax.get({
url: api.GET_MARKETS,
params: {
pageSize: 1000,
labelName_l: type,
},
})
).data
publicList.value = content || []
} else if (type === '倒粪') {
const { content } = (
await ajax.get({
url: api.GET_DUNGS,
params: {
pageSize: 1000,
sectIds: (communityData.value as any).sectId,
},
})
).data
publicList.value = content || []
} else if (type === '垃圾') {
const { content } = (
await ajax.get({
url: api.GET_BINS,
params: {
pageSize: 1000,
sectId: (communityData.value as any).sectId,
},
})
).data
publicList.value = content || []
} else {
publicList.value = []
}
},
{ immediate: true }
)
const formatter = {
area(val: unknown) {
return val ? `${val}㎡` : '无'
},
structure(val: string, data: any) {
return `${val}(${+data.havePourDung === 1 ? '有' : '无'}倒粪口/${
+data.haveGarbageRoom === 1 ? '有' : '无'
}垃圾箱房/${+data.haveUrinal === 1 ? '有' : '无'}小便池)`
},
water(_: unknown, data: any) {
return `${+data.haveAboveWater === 1 ? '有' : '无'}上水/${
+data.haveBelowWater === 1 ? '有' : '无'
}下水`
},
}
watch(
() => curTab.value,
() => {
// 重置选项
deviceType.value = '大门'
publicType.value = '倒粪'
curSubtabKey.value = '0'
}
)
return { return {
curTab, curTab,
tabs, tabs,
...@@ -386,6 +521,11 @@ export default defineComponent({ ...@@ -386,6 +521,11 @@ export default defineComponent({
deviceType, deviceType,
deviceOptions, deviceOptions,
deviceList, deviceList,
publicList,
publicType,
publicOptions,
curSubtabKey,
formatter,
} }
}, },
}) })
...@@ -447,9 +587,28 @@ export default defineComponent({ ...@@ -447,9 +587,28 @@ export default defineComponent({
.room-table .room-table
max-height 38vh max-height 38vh
overflow-y auto overflow-y auto
.device-table .wrapper
max-height 35vh max-height 35vh
overflow-y auto overflow-y auto
.box
$full()
display flex
flex-wrap wrap
>div
width 23.4%
height 1rem
margin-right .1rem
margin-bottom @margin-right
background url('@/assets/images/default.jpeg') 100% / 100% 100% no-repeat
position relative
>div
background rgba(0,0,0,0.6)
color #fff
position absolute
left 0
right 0
bottom 0
padding .02rem .05rem
</style> </style>
<style lang="stylus"> <style lang="stylus">
......
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