Skip to content

J
jingan-wisdom
Commit 2afc8eac authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

小区档案弹窗,小区搜索弹窗,暂存

parent 3cfdcd94
Expand all Show whitespace changes
Inline Side-by-side
Showing with 900 additions and 294 deletions
src/App.vue
View file @ 2afc8eac
......@@ -30,6 +30,9 @@ const themeOverrides: GlobalThemeOverrides = {
fontSizeTiny: '.08rem',
fontSizeSmall: '.09rem',
fontSize: '.1rem',
primaryColor: '#2F86EE',
borderColor: '#2F86EE',
primaryColorHover: '#2F86EE',
},
}
......@@ -78,7 +81,7 @@ html, body
// background url('/src/assets/images/map.png') center/100% 100% no-repeat
color #fff
.orange-count
font-size .16rem
font-size .14rem
font-weight bold
background-clip text
-webkit-background-clip text
......
src/components/MyComponent/MyForm/my-form.vue
View file @ 2afc8eac
......@@ -61,7 +61,7 @@ export default defineComponent({
/** label宽度 */
labelWidth: {
type: String as PropType<string>,
default: '1rem',
default: '1.4rem',
},
},
setup(props) {
......
src/components/MyComponent/MyModal/my-modal.vue
View file @ 2afc8eac
......@@ -88,12 +88,12 @@ export default defineComponent({
/** 背景色 */
bgColor: {
type: String as PropType<string>,
default: 'initial',
default: 'rgba(0,0,0,0.2)',
},
/** 点击蒙层是否允许关闭 */
maskClosable: {
type: Boolean as PropType<boolean>,
default: true,
default: false,
},
},
emits: ['update:modelValue', 'close'],
......@@ -118,7 +118,7 @@ export default defineComponent({
bottom 0
left 0
background rgba(0,0,0,0.1)
z-index 9999
z-index 999
$center()
.my-modal
color #fff
......@@ -156,6 +156,7 @@ export default defineComponent({
transform rotate(90deg)
.content
height calc(100% - .3rem)
max-height 80vh
box-sizing border-box
padding .1rem
overflow-y auto
......
src/components/MyComponent/MySub/my-sub.vue
View file @ 2afc8eac
......@@ -120,8 +120,8 @@ export default defineComponent({
>.title
display flex
align-items center
font-family $font-zcool
// color $secondary-color
font-weight bold
flex 1
&.click-able
cursor pointer
......
src/components/MyComponent/main.styl
View file @ 2afc8eac
......@@ -36,7 +36,7 @@ $card-title-size = .14rem
$card-border = .01rem solid $primary-border
$table-title-bg =rgba(2,27,53,.5)
$table-content-bg = rgba(2,27,53,.2)
$table-content-bg = rgba(2,27,53,.5)
$table-content-hover-color = $primary-color
$table-content-hover-bg = $primary-bg
......
src/utils/component-lib.esm.js
View file @ 2afc8eac
This diff is collapsed.
src/view/components/map-btns.vue
View file @ 2afc8eac
......@@ -42,7 +42,7 @@ const btns = computed(() => [
icon: btn7,
hidden: props.isDefaultScreen || props.onlyOneView,
},
{ key: 'btn1', icon: btn1 },
{ key: 'search', icon: btn1 },
{ key: 'full', icon: btn2 },
{ key: 'in', icon: btn3 },
{ key: 'out', icon: btn4 },
......
src/view/components/map.vue
View file @ 2afc8eac
......@@ -16,6 +16,7 @@ let polygonLayer: any
let boundary: any
defineExpose({ zoomIn, zoomOut, zoomTo, addPoints, remove })
const emit = defineEmits(['event'])
onMounted(async () => {
await nextTick()
......@@ -29,7 +30,7 @@ onMounted(async () => {
netType: 'internet',
})
map.on('load', onComplete).on('click', (a, b) => console.log(a, b))
map.on('load', onComplete).on('click', (data) => emit('event', data))
// .on('zoom', (e) => console.log('zoom: ', e))
// .on('move', (e) => console.log('move: ', e))
// .on('blur', (e) => console.log('blur: ', e))
......@@ -49,8 +50,7 @@ function onComplete() {
color: '#ED6F30',
lineWidth: 2,
})
// // eslint-disable-next-line
// map.instance.setFilter('wg_gis_xq_point', "HPB_NAME = '静安区'")
map.instance.getLayer('wg_gis_xq_point').visible = false
// eslint-disable-next-line
map.instance.setFilter('wg_gis_mpz', "HPB_NAME = '静安区'")
// eslint-disable-next-line
......
src/view/components/search-view.vue 0 → 100644
View file @ 2afc8eac
<template>
<div class="search">
<n-input-group>
<n-select
v-model:value="searchType"
:style="{ width: '30%' }"
:options="selectOptions"
size="small"
/>
<n-input
v-model:value="searchKey"
size="small"
clearable
:loading="loading"
/>
<n-button type="primary" ghost size="small" @click="onSearch">
搜索
</n-button>
</n-input-group>
<div class="community-list">
<template v-if="list && list.length > 0">
<div
v-for="(item, i) in list"
:key="i"
class="community-item"
@click="onSelect(item)"
>
<div>
<p>{{ item.stNameFrst }}</p>
<span v-if="item.stKindName">
<b>{{ item.stKindName }}</b>
</span>
<template v-if="item.streetName">
| {{ item.streetName }} |
</template>
</div>
<p>{{ item.addrFrst }}</p>
<p>{{ item.cspName }}</p>
</div>
</template>
<m-empty v-else />
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { NButton, NInputGroup, NInput, NSelect } from 'naive-ui'
import { ajax, api } from '@/ajax'
const emit = defineEmits(['select'])
const selectOptions = [
{
label: '名字',
value: 'name',
},
{
label: '地址',
value: 'address',
},
]
const searchType = ref('name')
const searchKey = ref('')
const loading = ref(false)
const list = ref([])
const onSearch = async () => {
loading.value = true
let query: any = { stNameFrst_l: searchKey.value }
if (searchType.value === 'address') {
query = { addrFrst_l: searchKey.value }
}
list.value =
(
await ajax.get({
url: api.COMMUNITYS,
params: { ...query, pageSize: 1000 },
showLoading: false,
})
)?.data?.content || []
loading.value = false
}
const onSelect = (data) => {
emit('select', data)
}
</script>
<style lang="stylus">
.n-select
z-index 999
</style>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.community-list
width 100%
max-height 50vh
padding-right .05rem
overflow-y auto
margin .1rem 0
.community-item
$box()
padding .05rem .08rem
margin-bottom .08rem
cursor pointer
&:hover
background rgba(255,255,255,.2)
>p
&:nth-of-type(1)
color #ccc
&:nth-of-type(2)
color $blue
>div
display flex
align-items center
border-bottom .01rem dotted rgba(91,213,255,.5)
margin-bottom .08rem
padding-bottom .06rem
color #ccc
p
font-size .11rem
font-weight bold
color #fff
max-width 60%
span
display inline-block
font-size .08rem
padding 0 .06rem
border-radius .08rem
margin 0 .1rem
transform skew(-30deg)
background $edge
>b
display inline-block
transform skew(30deg)
font-weight normal
color #000
white-space nowrap
</style>
src/view/view-page.vue
View file @ 2afc8eac
......@@ -7,7 +7,7 @@
columns="1fr 1.5fr 1fr"
:rows="`${layout.rows}`"
>
<Map ref="mapRef" />
<Map ref="mapRef" @event="onMapClick" />
<div
v-for="(_, index) in new Array(layout.boxNum)"
:key="index"
......@@ -51,6 +51,73 @@
:only-one-view="onlyOneView"
@touch="handleMapBtnsEvents"
/>
<m-modal v-model="showCommunityDrawer" title="小区档案" width="70%">
<div class="community-info">
<m-sub>小区基本信息</m-sub>
<m-form
:template="[
'stNameFrst:小区名称|stNameScnd:小区别名|addrFrst:小区地址',
'finishDate:竣工日期|stCnstArea:总建筑面积(㎡)|isOpen:小区封闭与否',
'hoName:房管办|streetName:街道|loopLineName:环线',
'stCspEast:小区四至范围东|getStCspWest:小区四至范围西|stCspSouth:小区四至范围南',
'stCspNorth:小区四至范围北|stNotcsparea:四至不包括|stKind:小区性质',
'sectType:小区类型|cspServiceTypeName:物业服务类型|totOngParks:地面停车位数量',
'totUngParks:地下停车位数量|landArea:占地面积|totUnits:总门牌数',
'totHous:总户数||',
]"
:data="info"
/>
<m-sub>小区管理处信息</m-sub>
<m-form
:template="[
'csName:管理处名称|csAddress:办公地址|csContacter:管理处联系人',
'csTel:联系人联系电话|csDayTel:日间报修电话|nightTel:夜间报修电话',
'complaintTel:物业投诉电话|csFax:管理处传真|csPostCode:管理处邮编',
]"
:data="info"
/>
<m-sub>物业企业信息</m-sub>
<m-form
:template="[
'cspName:物业企业名称|cspContractStartDate:合同开始日期|cspContractEndDate:合同结束日期',
'legalRepName:企业法人代表|cspTel:企业联系电话|cspContacter:企业联系人',
'cspAddr:办公地址||',
]"
:data="info"
/>
<m-sub>小区经理信息</m-sub>
<m-form
:template="[
'csmName:姓名|csmJobCode:上岗证号|certType:证件类型',
'csmJobQualification:资格证书名称|csmJobLog:资格证书编号|csmTel:固定电话',
'credentialsNo:证件号码||',
]"
:data="info"
/>
<m-sub>业主大会信息</m-sub>
<m-form
:template="[
'hocCode:业主大会代码|hocName:名称|hocAddr:地址',
'electionDate:选举时间|directorName:主任|deputyDirectorName:副主任',
'commValidDate:任期|hocTerm:第几届|recordDate:业主大会备案日期',
'onwersTypeoperName:业主大会运作情况类别|onwersTransitionName:换届情况类别|conStartDate:业委会任期起始时间',
'conEndDate:业委会任期结束时间||',
]"
:data="info"
/>
<m-sub>居委会信息</m-sub>
<m-form
:template="[
'cmtName:居委会名称|cmtAddr:居委会地址|cmtDirectorName:居委主任姓名',
'cmtSecretaryName:居委书记姓名||',
]"
:data="info"
/>
</div>
</m-modal>
<m-modal v-model="showSearchModal" title="搜索">
<SearchView @select="onSelectCommunity" />
</m-modal>
</template>
<script lang="ts" setup>
......@@ -59,6 +126,7 @@ import useComponent from '@/hooks/useComponent'
import { onMounted, ref, shallowRef } from 'vue'
import { ajax, api } from '@/ajax'
import { NSpace, NButton } from 'naive-ui'
import SearchView from './components/search-view.vue'
import MapBtns from './components/map-btns.vue'
import Map from './components/map.vue'
import { bus } from '@/utils/component-list'
......@@ -115,6 +183,8 @@ function check({ id, configJson }) {
}
const fullScreen = ref(false)
const showSearchModal = ref(false)
function handleMapBtnsEvents(key: string) {
switch (key) {
case 'list':
......@@ -145,15 +215,180 @@ function handleMapBtnsEvents(key: string) {
case 'out':
mapRef.value?.zoomOut()
break
case 'search':
showSearchModal.value = true
break
default:
break
}
}
let pointsLayer: any
bus.on('addPoints', (data) => {
// TODO 地图撒点
addPoints(data)
})
function addPoints(data) {
mapRef.value?.remove(pointsLayer)
pointsLayer = mapRef.value?.addPoints(data)
}
const showCommunityDrawer = ref(false)
const info = ref({
caoInfo: null,
ppInfo: {
_id: {
timestamp: 1.629786446e9,
counter: 1.573359e7,
randomValue1: 3636833.0,
randomValue2: 28341.0,
},
localUpdateTime: '2021-08-24 14:27:26',
syncTime: '',
legalRepName: '范锋铭',
bizLicenseCode: '',
cspTel: '62318697',
cspFax: '',
sign: '1',
dwPkCsp: '5B00D78A8C4F2BA53D7E418D43F50F4A',
cspContacter: '黄蓓',
registerAddress: '上海市嘉定区金沙江路3131号2幢1781号',
cspId: '1811291179633917',
marketCsp: 'S301811291179633917',
bizLicenseValidDate: '',
orgCode: '91310114MA1GUABG5L',
cspEntQualification: '',
realtyId: '',
totSects: '3',
hpbId: '310114000000',
id: '1811291179633917',
cspGuid: 'S301811291179633917',
codeValidDate: '',
cspAddr: '余姚路608号4号103室',
cspName: '上海佑广物业管理有限公司',
},
cmInfo: {
_id: {
timestamp: 1.629786443e9,
counter: 1.5732455e7,
randomValue1: 3636833.0,
randomValue2: 28341.0,
},
syncTime: '',
certTypeName: '',
manageCommunityCount: '',
certType: '',
csmName: '黄蓓',
operatorSign: '',
sign: '1',
csmJobCode: '',
csmGuid: 'S301906211184598055',
operator: '',
csmId: '1906211184598055',
csmJobLog: '1603000173300012',
cspId: '1811291179633917',
dwPkCspSectManger: '430FB005F3704F956B87280D3494DB0A',
id: '1906211184598055',
localUpdateTime: '2021-08-24 14:27:23',
credentialsNo: '',
creator: '',
creatorSign: '',
csmPhone: '',
csmTel: '',
marketCspSectManger: 'S301906211184598055',
dwPkCsp: '5B00D78A8C4F2BA53D7E418D43F50F4A',
updateTime: '',
marketCsp: 's301811291179633917',
createTime: '',
csmJobQualification: '助理物业管理师',
cspName: '上海佑广物业管理有限公司',
},
icInfo: null,
febInfo: null,
rcInfo: null,
_id: {
timestamp: 1.629792499e9,
counter: 2547848.0,
randomValue1: 9444117.0,
randomValue2: 18755.0,
},
stKindName: '商品房',
cspTel: '62318697',
csId: '1911211187592660',
totOngParks: 40.0,
landArea: '82',
commValidDate: '1',
sign: '1',
hoName: '曹家渡街道房管办事处（曹家渡街道物业管理中心）',
csmJobCode: '',
finishDateStage: '1',
csmJobLog: '1603000173300012',
cspId: '1811291179633917',
directorName: '金树姗',
hocId: '1911211187592612',
id: '120302190529156',
cspAddr: '余姚路608号4号103室',
stCspNorth: '安远路',
totHous: 233.0,
stCnstArea: 22577.14,
cmtId: '0',
conStartDate: '2018-09-19',
houseMgn: '',
cspContacter: '黄蓓',
sectTypeName: '住宅',
hoId: '310106000137',
isOpen: '否',
marketHoc: 'S301911211187592612',
totUnits: 46.0,
stNotcsparea: '',
stNameScnd: '',
cspServiceType: '2',
csmJobQualification: '助理物业管理师',
cspName: '上海佑广物业管理有限公司',
cspServiceTypeName: '专业委托物业管理（业主大会阶段）',
streetId: '310106014000',
legalRepName: '范锋铭',
csmName: '黄蓓',
loopId: '200000000001',
hocTerm: '1',
sectId: '120302190529156',
hocAddr: '余姚路402弄10号',
hocCode: '0601404130',
csmId: '1906211184598055',
stNameFrst: '静安恬园',
cspContractStartDate: '2019-07-01',
streetName: '曹家渡街道',
onwersTransition: '1',
stKind: '01',
deputyDirectorName: '王勇',
onwersTypeoper: '1',
recordDate: '',
localUpdateTime: '2021-08-24 16:08:18',
hocGuid: 'S301911211187592612',
cspContractEndDate: '2021-06-30',
sectType: '1',
establishIC: '2',
stCspEast: '延平路',
hocName: '上海市静安区静安恬园业主大会',
stCspSouth: '余姚路',
totUngParks: 0.0,
addrFrst: '余姚路380-400（双）号 402弄1-9、11号',
dwPkHoc: '90FADF61F74AB90CAF8834E8FEE8576B',
electionDate: '20180824',
loopLineName: '中环以内',
hpbId: '310106000000',
finishDate: '',
getStCspWest: '泰州路',
conEndDate: '2023-09-19',
})
const onMapClick = () => {
showCommunityDrawer.value = true
}
const onSelectCommunity = (data: any) => {
// TODO 搜索小区后点选小区撒点
addPoints([data])
}
</script>
<style lang="stylus" scoped>
......@@ -190,4 +425,13 @@ bus.on('addPoints', (data) => {
&:nth-of-type(2)
flex 2
margin 0 .1rem
.community-info
>.my-sub
margin-top .1rem
font-size .12rem
padding-left .1rem
background-clip text
-webkit-background-clip text
-webkit-text-fill-color transparent
background-image linear-gradient(to bottom, #FFD1B2, #FF8635)
</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