Skip to content

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

封装case-list暂存

parent 5566bd5b
Hide whitespace changes
Inline Side-by-side
Showing with 514 additions and 399 deletions
src/view/components/map-btns.vue
View file @ d331de0c
...@@ -20,60 +20,8 @@ ...@@ -20,60 +20,8 @@
</template> </template>
</div> </div>
<m-modal v-model="searchModal" title="搜索" width="20%" offset="-70%"> <m-modal v-model="searchModal" title="搜索" width="20%" offset="-70%">
<div id="modal-search-bar"> <SearchView />
<span class="edge left-top" />
<span class="edge right-top" />
<span class="edge left-bottom" />
<span class="edge right-bottom" />
<a-input-group compact>
<a-select v-model:value="searchType">
<a-select-option value="case">案件</a-select-option>
<a-select-option value="population">人口</a-select-option>
<a-select-option value="community">小区</a-select-option>
</a-select>
<a-input
v-model:value="searchKey"
placeholder="请输入搜索关键词"
@pressEnter="handleSearch"
/>
</a-input-group>
<div class="search-btn" @click="handleSearch">搜索</div>
</div>
<div class="modal-case-content">
<template v-if="caseList.length > 0">
<div v-for="(item, i) in caseList" :key="i" @click="handleSelect(item)">
<span :class="getStyle(item.managementType || item.classifyName)">{{
item.managementType || item.classifyName
}}</span>
<p>{{ item.address || item.addr }}</p>
</div>
</template>
<m-empty v-else />
</div>
</m-modal> </m-modal>
<m-drawer v-model="caseModal">
<CaseDrawer
:community-info="communityInfo"
:property-info="propertyInfo"
:case-info="caseInfo"
/>
</m-drawer>
<m-drawer v-model="populationModal">
<PopulationDrawer
:community-info="communityInfo"
:property-info="propertyInfo"
:case-info="caseInfo"
:building-info="buildingInfo"
:room-info="roomInfo"
/>
</m-drawer>
<m-drawer v-model="communityModal">
<CommunityDrawer
:community-info="communityInfo"
:property-info="propertyInfo"
:case-info="caseInfo"
/>
</m-drawer>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -89,15 +37,12 @@ import d2 from '@/assets/images/2d.png' ...@@ -89,15 +37,12 @@ import d2 from '@/assets/images/2d.png'
import d3 from '@/assets/images/3d.png' import d3 from '@/assets/images/3d.png'
import zoomIn from '@/assets/images/zoom-in.png' import zoomIn from '@/assets/images/zoom-in.png'
import zoomOut from '@/assets/images/zoom-out.png' import zoomOut from '@/assets/images/zoom-out.png'
import CaseDrawer from '@/view/drawers/case-drawer.vue' import SearchView from './search-view.vue'
import PopulationDrawer from '@/view/drawers/population-drawer.vue'
import CommunityDrawer from '@/view/drawers/community-drawer.vue'
import store from '@/store' import store from '@/store'
import { ajax, api } from '@/ajax'
export default defineComponent({ export default defineComponent({
name: 'MapBtns', name: 'MapBtns',
components: { CaseDrawer, PopulationDrawer, CommunityDrawer }, components: { SearchView },
emits: ['full', 'change', 'zoom'], emits: ['full', 'change', 'zoom'],
setup(_, ctx) { setup(_, ctx) {
const curViewType = computed(() => store.state.curView.type) const curViewType = computed(() => store.state.curView.type)
...@@ -124,8 +69,7 @@ export default defineComponent({ ...@@ -124,8 +69,7 @@ export default defineComponent({
}) })
const fullScreen = ref(false) const fullScreen = ref(false)
const searchModal = ref(false) const searchModal = ref(false)
const searchType = ref('case')
const searchKey = ref('')
const handleClick = (key: string) => { const handleClick = (key: string) => {
switch (key) { switch (key) {
case '3D': case '3D':
...@@ -141,8 +85,6 @@ export default defineComponent({ ...@@ -141,8 +85,6 @@ export default defineComponent({
case 'search': case 'search':
store.dispatch('getCaseList') store.dispatch('getCaseList')
searchModal.value = true searchModal.value = true
searchKey.value = ''
searchType.value = 'case'
break break
case 'in': case 'in':
case 'out': case 'out':
...@@ -158,11 +100,7 @@ export default defineComponent({ ...@@ -158,11 +100,7 @@ export default defineComponent({
break break
} }
} }
const caseList = computed(() =>
searchType.value === 'population'
? store.state.roomList
: store.state.caseList
)
const options = computed(() => { const options = computed(() => {
if (curViewType.value === 'street') { if (curViewType.value === 'street') {
return [ return [
...@@ -185,258 +123,29 @@ export default defineComponent({ ...@@ -185,258 +123,29 @@ export default defineComponent({
() => (checkboxValues.value = []) () => (checkboxValues.value = [])
) )
const handleSearch = () => {
const address = searchKey.value
if (searchType.value === 'population') {
store.dispatch('getRoomList', address)
} else {
store.dispatch('getCaseList', address)
}
}
const getStyle = (type: string): string => {
switch (type) {
case '小区':
return 'green'
case '街面':
return 'yellow'
case '综合':
return 'blue'
default:
return 'blue'
}
}
const caseModal = ref(false)
const populationModal = ref(false)
const communityModal = ref(false)
const communityInfo = ref<any>(null)
const propertyInfo = ref<any>(null)
const caseInfo = ref<any>(null)
const roomInfo = ref<any>(null)
const buildingInfo = ref<any>(null)
const handleSelect = async (item: any) => {
caseInfo.value = item
if (item.communityId) {
const { content } = (
await ajax.get({
url: api.GET_COMMUNITY_DETAIL,
params: { sectId: item.communityId },
})
).data
communityInfo.value = content && content[0]
const cspId = content && content[0] && content[0].cspId
if (cspId) {
const { content } = (
await ajax.get({ url: api.GET_COMPANY, params: { cspId } })
).data
propertyInfo.value = content && content[0]
}
} else {
communityInfo.value = {}
propertyInfo.value = {}
}
if (searchType.value === 'case') {
caseModal.value = true
populationModal.value = false
communityModal.value = false
} else {
const { content } = (
await ajax.get({
url: api.GET_CASE,
params: { pageSize: 200, address_l: item.address || item.addr },
})
).data
caseInfo.value = content || []
if (searchType.value === 'population') {
if (item.addr) {
const { content } = (
await ajax.get({ url: api.GET_ROOM, params: { addr: item.addr } })
).data
roomInfo.value = content && content[0]
const buildingId = content && content[0] && content[0].buildingId
if (buildingId) {
const { content } = (
await ajax.get({
url: api.GET_BUILDING,
params: { unitId: buildingId },
})
).data
buildingInfo.value = content && content[0]
const sectId = content && content[0] && content[0].sectId
if (sectId) {
const { content } = (
await ajax.get({
url: api.GET_COMMUNITY_DETAIL,
params: { sectId },
})
).data
communityInfo.value = content && content[0]
} else {
communityInfo.value = null
}
} else {
buildingInfo.value = null
}
} else {
roomInfo.value = null
}
populationModal.value = true
caseModal.value = false
communityModal.value = false
} else if (searchType.value === 'community') {
communityModal.value = true
populationModal.value = false
caseModal.value = false
}
}
}
return { return {
btns, btns,
fullScreen, fullScreen,
searchModal, searchModal,
handleClick, handleClick,
searchType,
searchKey,
caseList,
options, options,
checkboxValues, checkboxValues,
handleChange, handleChange,
curViewType, curViewType,
handleSearch,
getStyle,
handleSelect,
caseModal,
populationModal,
communityModal,
communityInfo,
propertyInfo,
caseInfo,
buildingInfo,
roomInfo,
} }
}, },
}) })
</script> </script>
<style lang="stylus"> <style lang="stylus">
@import '../../components/MyComponent/main.styl'
$border = .01rem solid rgba(91,213,255,.3)
$bg = rgba(6,34,67,.4)
.btns-tip * .btns-tip *
color #fff !important color #fff !important
font-size .1rem font-size .1rem
.ant-checkbox-group-item .ant-checkbox-group-item
display block display block
#modal-search-bar
width 100%
position relative
margin-bottom .1rem
.edge
display block
position absolute
width .06rem
height @width
border .01rem solid $secondary-color
z-index 1
&.left-top
top 0
left 0
border-right none
border-bottom none
&.right-top
top 0
right 0
border-left none
border-bottom none
&.left-bottom
bottom 0
left 0
border-right none
border-top none
&.right-bottom
bottom 0
right 0
border-left none
border-top none
.ant-select
border-radius 0
color $secondary-color
background $bg
width .7rem
height .25rem
line-height @height
font-size .12rem
.ant-select-selector
background inherit
border-radius inherit
border $border
height inherit
line-height inherit
font-size inherit
.ant-select-selection-item
line-height inherit
.ant-select-arrow
color $secondary-color
font-size .1rem
.ant-input
width calc(100% - 0.7rem)
border $border
background $bg
color #fff
height .25rem
line-height @height
font-size .1rem
padding-right .4rem
.search-btn
height 100%
color $secondary-color
line-height .25rem
position absolute
top 0
right .1rem
cursor pointer
z-index 99999
font-size .12rem
&:hover
font-weight bold
text-decoration underline
.modal-case-content
max-height 60vh
overflow-y auto
overflow-x hidden
>div
display flex
align-items center
background $table-content-bg
padding .04rem
box-sizing border-box
cursor pointer
&:nth-of-type(odd)
background transparent
&:hover
background $table-content-title
color $secondary-color
>span
display inline-block
border .01rem solid #fff
border-radius .02rem
font-size .08rem
padding 0 .02rem
margin-right .1rem
&.yellow
color $yellow
border-color @color
&.green
color $green
border-color @color
&.blue
color $blue
border-color @color
</style> </style>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.map-btns .map-btns
position fixed position fixed
bottom .05rem bottom .05rem
......
src/view/components/search-view.vue 0 → 100644
View file @ d331de0c
<template>
<div id="modal-search-bar">
<span class="edge left-top" />
<span class="edge right-top" />
<span class="edge left-bottom" />
<span class="edge right-bottom" />
<a-input-group compact>
<a-select v-model:value="searchType">
<a-select-option value="case">案件</a-select-option>
<a-select-option value="population">人口</a-select-option>
<a-select-option value="community">小区</a-select-option>
</a-select>
<a-input
v-model:value="searchKey"
placeholder="请输入搜索关键词"
@pressEnter="handleSearch"
/>
</a-input-group>
<div class="search-btn" @click="handleSearch">搜索</div>
</div>
<div class="modal-case-content">
<template v-if="list.length > 0">
<template v-if="searchType === 'case'">
<CaseList :list="list" select-able @select="handleSelect" />
</template>
<template v-else-if="searchType === 'population'"></template>
<template v-else-if="searchType === 'community'"></template>
<!-- <div v-for="(item, i) in caseList" :key="i" @click="handleSelect(item)">
<span :class="getStyle(item.managementType || item.classifyName)">{{
item.managementType || item.classifyName
}}</span>
<p>{{ item.address || item.addr }}</p>
</div> -->
</template>
<m-empty v-else />
</div>
<m-drawer v-model="caseModal">
<CaseDrawer
:community-info="communityInfo"
:property-info="propertyInfo"
:case-info="caseInfo"
/>
</m-drawer>
<m-drawer v-model="populationModal">
<PopulationDrawer
:community-info="communityInfo"
:property-info="propertyInfo"
:case-info="caseInfo"
:building-info="buildingInfo"
:room-info="roomInfo"
/>
</m-drawer>
<m-drawer v-model="communityModal">
<CommunityDrawer
:community-info="communityInfo"
:property-info="propertyInfo"
:case-info="caseInfo"
/>
</m-drawer>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
import CaseDrawer from '@/view/drawers/case-drawer.vue'
import PopulationDrawer from '@/view/drawers/population-drawer.vue'
import CommunityDrawer from '@/view/drawers/community-drawer.vue'
import store from '@/store'
import { ajax, api } from '@/ajax'
import CaseList from '../drawers/case-list.vue'
export default defineComponent({
name: 'SearchView',
components: { CaseDrawer, PopulationDrawer, CommunityDrawer, CaseList },
setup() {
const searchType = ref('case')
const searchKey = ref('')
const list = ref([])
const searchCase = async (address: string, pageSize = 200) => {
const { content } = (
await ajax.get({
url: api.GET_CASE,
params: { pageSize, address_l: address },
})
).data
return content
}
const searchRoom = async (address: string, pageSize = 200) => {
const { content } = (
await ajax.get({
url: api.GET_LIST,
params: { pageSize, addr_l: address, classifyName: '分户' },
})
).data
return content
}
const searchCommunity = async (address: string, pageSize = 200) => {
const { content } = (
await ajax.get({
url: api.GET_LIST,
params: { pageSize, addr_l: address, classifyName: '小区' },
})
).data
return content
}
const handleSearch = async () => {
const address = searchKey.value
const pageSize = address ? 200 : 500
switch (searchType.value) {
case 'case':
list.value = await searchCase(address, pageSize)
break
case 'population':
list.value = await searchRoom(address, pageSize)
break
case 'community':
list.value = await searchCommunity(address, pageSize)
break
default:
list.value = []
break
}
}
watch(() => searchType.value, handleSearch, { immediate: true })
// const getStyle = (type: string): string => {
// switch (type) {
// case '小区':
// return 'green'
// case '街面':
// return 'yellow'
// case '综合':
// return 'blue'
// default:
// return 'blue'
// }
// }
const caseModal = ref(false)
const populationModal = ref(false)
const communityModal = ref(false)
const communityInfo = ref<any>(null)
const propertyInfo = ref<any>(null)
const caseInfo = ref<any>(null)
const roomInfo = ref<any>(null)
const buildingInfo = ref<any>(null)
const handleSelect = async (item: any) => {
console.log(item)
caseInfo.value = item
if (item.communityId) {
const { content } = (
await ajax.get({
url: api.GET_COMMUNITY_DETAIL,
params: { sectId: item.communityId },
})
).data
communityInfo.value = content && content[0]
const cspId = content && content[0] && content[0].cspId
if (cspId) {
const { content } = (
await ajax.get({ url: api.GET_COMPANY, params: { cspId } })
).data
propertyInfo.value = content && content[0]
}
} else {
communityInfo.value = {}
propertyInfo.value = {}
}
if (searchType.value === 'case') {
caseModal.value = true
populationModal.value = false
communityModal.value = false
} else {
const { content } = (
await ajax.get({
url: api.GET_CASE,
params: { pageSize: 200, address_l: item.address || item.addr },
})
).data
caseInfo.value = content || []
if (searchType.value === 'population') {
if (item.addr) {
const { content } = (
await ajax.get({ url: api.GET_ROOM, params: { addr: item.addr } })
).data
roomInfo.value = content && content[0]
const buildingId = content && content[0] && content[0].buildingId
if (buildingId) {
const { content } = (
await ajax.get({
url: api.GET_BUILDING,
params: { unitId: buildingId },
})
).data
buildingInfo.value = content && content[0]
const sectId = content && content[0] && content[0].sectId
if (sectId) {
const { content } = (
await ajax.get({
url: api.GET_COMMUNITY_DETAIL,
params: { sectId },
})
).data
communityInfo.value = content && content[0]
} else {
communityInfo.value = null
}
} else {
buildingInfo.value = null
}
} else {
roomInfo.value = null
}
populationModal.value = true
caseModal.value = false
communityModal.value = false
} else if (searchType.value === 'community') {
communityModal.value = true
populationModal.value = false
caseModal.value = false
}
}
}
return {
searchType,
searchKey,
list,
handleSearch,
// getStyle,
handleSelect,
caseModal,
populationModal,
communityModal,
communityInfo,
propertyInfo,
caseInfo,
buildingInfo,
roomInfo,
}
},
})
</script>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
$border = .01rem solid rgba(91,213,255,.3)
$bg = rgba(6,34,67,.4)
#modal-search-bar
width 100%
position relative
margin-bottom .1rem
.edge
display block
position absolute
width .06rem
height @width
border .01rem solid $secondary-color
z-index 1
&.left-top
top 0
left 0
border-right none
border-bottom none
&.right-top
top 0
right 0
border-left none
border-bottom none
&.left-bottom
bottom 0
left 0
border-right none
border-top none
&.right-bottom
bottom 0
right 0
border-left none
border-top none
.ant-select
border-radius 0
color $secondary-color
background $bg
width .7rem
height .25rem
line-height @height
font-size .12rem
.ant-select-selector
background inherit
border-radius inherit
border $border
height inherit
line-height inherit
font-size inherit
.ant-select-selection-item
line-height inherit
.ant-select-arrow
color $secondary-color
font-size .1rem
.ant-input
width calc(100% - 0.7rem)
border $border
background $bg
color #fff
height .25rem
line-height @height
font-size .1rem
padding-right .4rem
.search-btn
height 100%
color $secondary-color
line-height .25rem
position absolute
top 0
right .1rem
cursor pointer
z-index 99999
font-size .12rem
&:hover
font-weight bold
text-decoration underline
.modal-case-content
max-height 60vh
overflow-y auto
overflow-x hidden
// >div
// display flex
// align-items center
// background $table-content-bg
// padding .04rem
// box-sizing border-box
// cursor pointer
// &:nth-of-type(odd)
// background transparent
// &:hover
// background $table-content-title
// color $secondary-color
// >span
// display inline-block
// border .01rem solid #fff
// border-radius .02rem
// font-size .08rem
// padding 0 .02rem
// margin-right .1rem
// &.yellow
// color $yellow
// border-color @color
// &.green
// color $green
// border-color @color
// &.blue
// color $blue
// border-color @color
</style>
src/view/drawers/case-drawer.vue
View file @ d331de0c
...@@ -114,7 +114,9 @@ export default defineComponent({ ...@@ -114,7 +114,9 @@ export default defineComponent({
if (!caseInfo) return [] if (!caseInfo) return []
return [ return [
{ {
title: `${caseInfo.phase} · ${caseInfo.reportPersonnel}`, title: `${caseInfo.status} ${
caseInfo.reportPersonnel ? '· ' + caseInfo.reportPersonnel : ''
}`,
sub: caseInfo.acceptTime, sub: caseInfo.acceptTime,
content: caseInfo.reportContent, content: caseInfo.reportContent,
imgs: [], imgs: [],
...@@ -129,26 +131,6 @@ export default defineComponent({ ...@@ -129,26 +131,6 @@ export default defineComponent({
// '案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述', // '案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
// imgs: [detail1, detail2], // imgs: [detail1, detail2],
// }, // },
// {
// title: '立案 · 举报人',
// sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
// content:
// '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
// imgs: [detail1, detail2],
// },
// {
// title: '派遣 · 举报人',
// sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
// content:
// '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
// },
// {
// title: '处置 · 举报人',
// sub: '2020-12-31 16:34 | xxx区xxx路xxx弄xxx号',
// content:
// '内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述案件内容描述',
// imgs: [detail1, detail2],
// },
// ]) // ])
return { return {
communityData, communityData,
......
src/view/drawers/case-list.vue 0 → 100644
View file @ d331de0c
<template>
<div class="case-list" :class="{ 'select-able': selectAble }">
<template v-if="list && list.length > 0">
<div
v-for="(item, i) in list"
:key="i"
class="case-item"
:class="{
done: item && item.status && item.status.indexOf('已结') >= 0,
}"
@click="handleClick(item)"
>
<div>
<p>
{{ item.address }}
<span v-show="item.managementScoreType">
<b>{{ item.managementScoreType }}</b>
</span>
<span v-show="item.managementType">
<b>{{ item.managementType }}</b>
</span>
</p>
<p>{{ item.acceptTime }}</p>
</div>
<div>{{ item.reportContent || '无' }}</div>
<div
v-if="item && item.status && item.status.indexOf('已结') >= 0"
class="flag"
>
已结案
</div>
<div v-else class="flag">处置中</div>
</div>
</template>
<m-empty v-else :img="empty" hidden-text />
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import empty from '@/assets/images/empty.png'
export default defineComponent({
name: 'CaseList',
props: {
list: {
type: Array as PropType<any[] | null>,
default: () => {
return []
},
},
selectAble: {
type: Boolean as PropType<boolean>,
default: false,
},
},
emits: ['select'],
setup(_, ctx) {
const handleClick = (data: unknown) => {
ctx.emit('select', data)
}
return {
empty,
handleClick,
}
},
})
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.case-list
width 100%
height 100%
padding-right .05rem
overflow-y auto
&.select-able
.case-item
cursor pointer
transition all .1s ease
&:hover
background rgba(70,83,97,.25)
box-shadow none
.case-item
position relative
margin-top .08rem
padding .05rem .08rem
overflow hidden
background rgba(70,83,97,.45)
box-shadow 0 0 .04rem 0 rgba(44,51,70,.65), inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
border-radius .04rem
&.done
.flag
background #27C5A2
>div
&:nth-of-type(1)
border-bottom .01rem dotted rgba(91,213,255,.5)
margin-bottom .05rem
p
&:first-child
width 94%
font-size .11rem
font-weight bold
&:last-child
font-size .09rem
color #ccc
margin .04rem 0
span
display inline-block
font-size .08rem
padding 0 .1rem
border-radius .08rem
margin-left .1rem
transform skew(-30deg)
background linear-gradient(to right, #FFF764, #BBA619)
>b
display inline-block
transform skew(30deg)
font-weight normal
color #000
&:last-child
background linear-gradient(to right, #64DCFF, #02B2D2)
.flag
background $orange
position absolute
top -0.16rem
right -0.36rem
transform rotate(45deg)
height .4rem
width .8rem
display flex
color #000
align-items flex-end
justify-content center
font-size .08rem
</style>
src/view/drawers/community-drawer.vue
View file @ d331de0c
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
v-for="(item, i) in caseInfo" v-for="(item, i) in caseInfo"
:key="i" :key="i"
class="case-item" class="case-item"
:class="{ done: item && item.phase === '结案' }" :class="{
done: item && item.status && item.status.indexOf('已结') >= 0,
}"
> >
<div> <div>
<p> <p>
...@@ -21,7 +23,12 @@ ...@@ -21,7 +23,12 @@
<p>{{ item.acceptTime }}</p> <p>{{ item.acceptTime }}</p>
</div> </div>
<div>{{ item.reportContent || '无' }}</div> <div>{{ item.reportContent || '无' }}</div>
<div v-if="item && item.phase === '结案'" class="flag">已结案</div> <div
v-if="item && item.status && item.status.indexOf('已结') >= 0"
class="flag"
>
已结案
</div>
<div v-else class="flag">处置中</div> <div v-else class="flag">处置中</div>
</div> </div>
</div> </div>
......
src/view/drawers/population-drawer.vue
View file @ d331de0c
...@@ -2,31 +2,7 @@ ...@@ -2,31 +2,7 @@
<div class="population-drawer"> <div class="population-drawer">
<m-card title="相关案件"> <m-card title="相关案件">
<div class="case-wrap"> <div class="case-wrap">
<template v-if="caseInfo && caseInfo.length > 0"> <CaseList :list="caseInfo" />
<div
v-for="(item, i) in caseInfo"
:key="i"
class="case-item"
:class="{ done: item && item.phase === '结案' }"
>
<div>
<p>
{{ item.address }}
<span v-show="item.managementScoreType">
<b>{{ item.managementScoreType }}</b>
</span>
<span v-show="item.managementType">
<b>{{ item.managementType }}</b>
</span>
</p>
<p>{{ item.acceptTime }}</p>
</div>
<div>{{ item.reportContent || '无' }}</div>
<div v-if="item && item.phase === '结案'" class="flag">已结案</div>
<div v-else class="flag">处置中</div>
</div>
</template>
<m-empty v-else :img="empty" hidden-text />
</div> </div>
</m-card> </m-card>
<m-card title="人口详情"> <m-card title="人口详情">
...@@ -114,11 +90,11 @@ ...@@ -114,11 +90,11 @@
import { defineComponent, ref, PropType, computed } from 'vue' import { defineComponent, ref, PropType, computed } from 'vue'
import Tabs, { TabsProp } from '../components/tabs.vue' import Tabs, { TabsProp } from '../components/tabs.vue'
import SubTitle from '../components/sub-title.vue' import SubTitle from '../components/sub-title.vue'
import empty from '@/assets/images/empty.png' import CaseList from './case-list.vue'
export default defineComponent({ export default defineComponent({
name: 'PopulationDrawer', name: 'PopulationDrawer',
components: { Tabs, SubTitle }, components: { Tabs, SubTitle, CaseList },
props: { props: {
communityInfo: { communityInfo: {
type: Object as PropType<{ [key: string]: any } | null>, type: Object as PropType<{ [key: string]: any } | null>,
...@@ -238,7 +214,6 @@ export default defineComponent({ ...@@ -238,7 +214,6 @@ export default defineComponent({
showPersonDetail.value = true showPersonDetail.value = true
} }
return { return {
empty,
curTab, curTab,
tabs, tabs,
tabs2, tabs2,
...@@ -255,7 +230,6 @@ export default defineComponent({ ...@@ -255,7 +230,6 @@ export default defineComponent({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl' @import '../../components/MyComponent/main.styl'
$border = .01rem solid rgba(91,213,255,.3)
.population-drawer .population-drawer
display flex display flex
...@@ -266,56 +240,7 @@ $border = .01rem solid rgba(91,213,255,.3) ...@@ -266,56 +240,7 @@ $border = .01rem solid rgba(91,213,255,.3)
width 64% width 64%
.case-wrap .case-wrap
height 85vh height 85vh
overflow-y auto overflow hidden
.case-item
position relative
margin-top .08rem
padding .05rem .08rem
overflow hidden
background rgba(70,83,97,.45)
box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
border-radius .04rem
&.done
.flag
background #27C5A2
>div
&:nth-of-type(1)
border-bottom $border
padding-bottom .05rem
margin-bottom .05rem
p
&:last-child
font-size .09rem
color #ccc
margin .04rem 0
span
display inline-block
font-size .08rem
padding 0 .1rem
border-radius .08rem
margin-left .1rem
transform skew(-30deg)
background linear-gradient(to right, #FFF764, #BBA619)
>b
display inline-block
transform skew(30deg)
font-weight normal
color #000
&:last-child
background linear-gradient(to right, #64DCFF, #02B2D2)
.flag
background $secondary-color
position absolute
top -0.16rem
right -0.36rem
transform rotate(45deg)
height .4rem
width .8rem
display flex
color #000
align-items flex-end
justify-content center
font-size .09rem
.person-bar .person-bar
display flex display flex
justify-content space-between justify-content space-between
......
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