Skip to content

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

小区档案-门牌幢

parent 13963b37
Expand all Show whitespace changes
Inline Side-by-side
Showing with 540 additions and 120 deletions
index.html
View file @ 2c4d3b2a
......@@ -10,7 +10,7 @@
<body>
<div id="app"></div>
<script src="/shanghaiwuye_gis_map_api_3.2.210914/SMap.min.js"></script>
<script src="/shanghaiwuye_gis_map_api_3.2.211102/SMap.min.js"></script>
<script src="/Plugins.min.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>
......
public/shanghaiwuye_gis_map_api_3.2.210914/SMap.min.js deleted 100644 → 0
View file @ 13963b37
This source diff could not be displayed because it is too large. You can view the blob instead.
public/shanghaiwuye_gis_map_api_3.2.211102/SMap.min.js 0 → 100644
View file @ 2c4d3b2a
This source diff could not be displayed because it is too large. You can view the blob instead.
public/shanghaiwuye_gis_map_api_3.2.211102/SMap.min.js.map 0 → 100644
View file @ 2c4d3b2a
This diff is collapsed.
src/ajax/api.ts
View file @ 2c4d3b2a
......@@ -11,4 +11,8 @@ export default {
BASE_URL,
CONFIGS: '/service-bigscreen/public/bigscreenConfigs', // 配置
COMMUNITY: '/service-customkey-ddd/public/communities/v2', // 小区
BUILDINGS: '/service-basicdatasync-ddd/public/community/buildings', // 门牌幢
BUILDING: '/service-basicdatasync-ddd/public/building/{id}', // 根据id查楼栋信息
ORDERS: '/service-documents-ddd/public/dr/check/orders', // 月查
ORDER: '/service-documents-ddd/public/dr/check/order/{id}', // 根据id查月查详情
}
src/components/MyComponent/MyForm/my-form.vue
View file @ 2c4d3b2a
......@@ -137,7 +137,8 @@ export default defineComponent({
<style lang="stylus" scoped>
@import '../main.styl'
.my-form
$full()
width 100%
box-sizing border-box
.row
display flex
background $table-content-bg
......
src/utils/component-lib.esm.js
View file @ 2c4d3b2a
This diff is collapsed.
src/utils/index.ts 0 → 100644
View file @ 2c4d3b2a
export const switchUnitKind = (unitKind: unknown) => {
if (unitKind == '1') {
return '高层'
} else if (unitKind == '2') {
return '多层'
} else if (unitKind == '3') {
return '小高层'
} else if (unitKind == '4') {
return '联体别墅'
} else if (unitKind == '5') {
return '单体别墅'
} else {
return '暂无'
}
}
export const switchOrderState = (orderState: unknown) => {
if (orderState == '0') {
return '未整改'
} else if (orderState == '2') {
return '退回重新整改'
} else if (orderState == '5') {
return '待审核'
} else if (orderState == '7') {
return '整改中'
} else if (orderState == '9') {
return '已结案'
} else {
return '暂无'
}
}
src/view/components/community-info.vue
View file @ 2c4d3b2a
<template>
<div class="community-info">
<n-menu v-model:value="curMenu" :options="menus" style="width: 1.2rem" />
<div class="content">
<template v-if="curMenu === 1">
<m-sub>小区基本信息</m-sub>
<m-form
:template="[
......@@ -60,28 +63,353 @@
]"
:data="info"
/>
</template>
<template v-else-if="curMenu === 2">
<template v-if="showBuildingInfo">
<n-space justify="end">
<n-button
type="primary"
ghost
size="small"
@click="showBuildingInfo = false"
>返回</n-button
>
</n-space>
<m-form
:template="[
'unitAddr:门牌地址|unitKind:属性>switchUnitKind|unitFlag:电梯标志>trueOrFalse',
'cnstArea:总面积|totUnit:总户数|uLoad:路',
'uLong:弄|uSublong:支弄|unitNo:单元号',
'useType:使用类型|projType:项目立项类型|status:状态',
'unitTotFloor:总层数|unitTotElevator:电梯数|',
]"
:data="buildingInfo"
:formatter="formatter"
/>
</template>
<template v-else>
<div class="search-bar">
<n-space align="center">
门牌幢地址：<n-input
v-model:value="searchKey"
size="small"
@keypress.enter="getBuildingList"
/>
</n-space>
<n-space>
<n-button size="small" ghost type="primary" @click="reset">
重置
</n-button>
<n-button size="small" type="primary" @click="getBuildingList">
搜索
</n-button>
</n-space>
</div>
<n-data-table
size="small"
:columns="buildingsColumn"
:data="buildingsData"
:pagination="pagination"
/>
</template>
</template>
<template v-else-if="curMenu === 3">
<n-tabs type="line" size="small">
<n-tab-pane name="1" tab="房办月查">
<template v-if="showMonthCheckInfo">
<n-space justify="end">
<n-button
type="primary"
ghost
size="small"
@click="showMonthCheckInfo = false"
>返回</n-button
>
</n-space>
<m-sub>基础信息</m-sub>
<m-form
:template="[
'community_name:小区名称|street_name:街道名称|check_time:检查时间',
'check_user_name:检查人|check_result:检查情况>switchCheckState|order_status:整改情况>switchOrderState',
'csp_name:物业公司||',
]"
:data="monthCheckInfo"
:formatter="formatter"
/>
<m-sub>检查指标</m-sub>
<n-data-table
size="small"
:columns="monthCheckInfoColumn"
:data="monthCheckInfo?.norms || []"
/>
</template>
<template v-else>
<n-data-table
size="small"
:columns="monthCheckColumn"
:data="monthCheckData"
:pagination="pagination"
/>
</template>
</n-tab-pane>
<n-tab-pane name="2" tab="小区经理自查">Hey Jude</n-tab-pane>
<n-tab-pane name="3" tab="物企双周查">七里香</n-tab-pane>
</n-tabs>
</template>
</div>
</div>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { PropType, ref, h, reactive, watch } from 'vue'
import {
NMenu,
NSpace,
NInput,
NButton,
NDataTable,
NTabs,
NTabPane,
} from 'naive-ui'
import { ajax, api } from '@/ajax'
import { switchUnitKind, switchOrderState } from '@/utils'
defineProps({
const props = defineProps({
info: {
type: Object as PropType<{ [key: string]: unknown }>,
default: () => ({}),
},
})
const curMenu = ref(1)
const menus = [
{ label: '概况', key: 1 },
{ label: '门牌幢', key: 2 },
{ label: '监管和履职', key: 3 },
{ label: '热线信息', key: 4 },
{ label: '维修资金', key: 5 },
]
const searchKey = ref<undefined | string>()
const showBuildingInfo = ref(false)
const buildingInfo = ref<{ [key: string]: unknown }>({})
const buildingsColumn = [
{
title: '门牌幢地址',
key: 'unitAddr',
},
{
title: '门牌属性',
key: 'unitKind',
render({ unitKind }) {
return h('span', null, {
default: () => switchUnitKind(unitKind),
})
},
},
{
title: '总户数',
key: 'totUnit',
},
{
title: '电梯数量',
key: 'unitTotElevator',
},
{
title: '建筑面积(m²)',
key: 'cnstArea',
},
{
title: '操作',
key: 'actions',
render(row) {
return h(
NButton,
{
text: true,
textColor: '#1890ff',
size: 'small',
onClick: async () => {
buildingInfo.value =
(
await ajax.get({
url: api.BUILDING.replace('{id}', row.id),
})
)?.data?.content || {}
showBuildingInfo.value = true
},
},
{ default: () => '查看' },
)
},
},
]
const buildingsData = ref<any[]>([])
const pagination = reactive({
page: 1,
pageSize: 10,
onChange: (page) => {
pagination.page = page
},
})
async function getBuildingList() {
buildingsData.value =
(
await ajax.get({
url: api.BUILDINGS,
params: {
sectId: props.info?.sectId,
unitAddr_l: searchKey.value,
pageSize: 9000,
},
})
)?.data?.content || []
}
function reset() {
searchKey.value = ''
pagination.page = 1
getBuildingList()
}
const formatter = {
trueOrFalse: (val: unknown) => (val === true ? '有' : '无'),
switchUnitKind,
switchCheckState: (checkState: unknown) => {
let result = '暂无'
if (checkState == '0') {
result = '合格'
} else if (checkState == '1') {
result = '需整改'
}
return result
},
}
const showMonthCheckInfo = ref(false)
const monthCheckInfo = ref<{ [key: string]: unknown }>({})
const monthCheckColumn = [
{
title: '小区名称',
key: 'communityName',
},
{
title: '检查事件',
key: 'checkTime',
},
{
title: '检查人',
key: 'checkPersonName',
},
{
title: '检查情况',
key: 'checkState',
render({ checkState }) {
return h('span', null, {
default: () => formatter.switchCheckState(checkState),
})
},
},
{
title: '整改情况',
key: 'orderState',
render({ orderState }) {
return h('span', null, { default: () => switchOrderState(orderState) })
},
},
{
title: '操作',
key: 'actions',
render(row) {
return h(
NButton,
{
text: true,
textColor: '#1890ff',
size: 'small',
onClick: async () => {
monthCheckInfo.value =
(
await ajax.get({
url: api.ORDER.replace('{id}', row.id),
})
)?.data?.content || {}
showMonthCheckInfo.value = true
},
},
{ default: () => '查看' },
)
},
},
]
const monthCheckInfoColumn = [
{
title: '指标名称',
key: 'norName',
},
{
title: '指标状态',
key: 'normState',
render({ normState }) {
return h('span', null, {
default: () => formatter.switchCheckState(normState),
})
},
},
]
const monthCheckData = ref<any[]>([])
watch(
() => curMenu.value,
async (menu) => {
pagination.page = 1
switch (menu) {
case 2:
showBuildingInfo.value = false
reset()
break
case 3:
monthCheckData.value =
(
await ajax.get({
url: api.ORDERS,
params: {
communityName: props.info.stNameFrst,
orderType: 1,
pageSize: 9000,
},
})
)?.data?.content || []
break
default:
break
}
},
)
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.community-info
>.my-sub
display flex
width 100%
height 70vh
overflow hidden
.content
flex 1
overflow-y auto
padding-right .05rem
box-sizing border-box
.search-bar
display flex
justify-content space-between
align-items center
margin-bottom .1rem
.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)
color $yellow
// background-clip text !important
// -webkit-background-clip text !important
// -webkit-text-fill-rowor transparent !important
// background-image linear-gradient(to bottom, #FFD1B2, #FF8635) !important
</style>
src/view/components/map.vue
View file @ 2c4d3b2a
......@@ -11,7 +11,7 @@ import jinganPath from '@/utils/jingan-path.js'
let map: MyMap
let polygonLayer: any
defineExpose({ zoomIn, zoomOut, zoomTo, focus, addPoints, remove })
defineExpose({ zoomIn, zoomOut, zoomTo, focus, addPoints, remove, setCommunityPoints })
const emit = defineEmits(['event', 'complete'])
onMounted(async () => {
......@@ -21,6 +21,7 @@ onMounted(async () => {
mode: '2D',
center: [-1931.2637583608503, 4334.0159596985895],
zoom: 4,
zooms: [3, 10],
style: 'smap://styles/dark',
appKey: 'DTZ49ACE32PBN73GXPF085',
netType: 'internet',
......@@ -46,14 +47,17 @@ function onComplete() {
color: '#ED6F30',
lineWidth: 2,
})
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
map.instance.setFilter('wg_gis_xq_poly', "HPB_NAME = '静安区'")
setCommunityPoints()
emit('complete')
}
function setCommunityPoints(query = "HPB_NAME = '静安区'") {
console.log(query)
map.instance.getLayer('wg_gis_xq_point').visible = false
map.instance.setFilter('wg_gis_mpz', query)
map.instance.setFilter('wg_gis_xq_poly', query)
}
function zoomIn() {
map.zoomIn()
}
......
src/view/components/search-view.vue
View file @ 2c4d3b2a
......@@ -7,7 +7,12 @@
:options="selectOptions"
size="small"
/>
<n-input v-model:value="searchKey" size="small" clearable />
<n-input
v-model:value="searchKey"
size="small"
clearable
@keypress.enter="onSearch"
/>
<n-button type="primary" ghost size="small" @click="onSearch">
搜索
</n-button>
......
src/view/view-page.vue
View file @ 2c4d3b2a
......@@ -46,7 +46,7 @@
:only-one-view="onlyOneView"
@touch="handleMapBtnsEvents"
/>
<m-modal v-model="showCommunityDrawer" title="小区档案" width="70%">
<m-modal v-model="showCommunityDrawer" title="小区档案" width="80%">
<CommunityInfo :info="communityDetail" />
</m-modal>
<m-modal v-model="showElevatorDrawer" title="多层住宅电梯加装" width="70%">
......@@ -55,7 +55,7 @@
<m-modal v-model="showSafetyDrawer" title="房屋安全排查结果" width="70%">
<SafetyInfo :info="safetyDetail" />
</m-modal>
<m-modal v-model="showSearchModal" title="搜索">
<m-modal v-model="showSearchModal" title="搜索小区">
<SearchView @select="onSelectCommunity" />
</m-modal>
</template>
......@@ -80,6 +80,8 @@ import c3 from '@/assets/images/c3.png'
import c4 from '@/assets/images/c4.png'
import c5 from '@/assets/images/c5.png'
import c6 from '@/assets/images/c6.png'
import CommunityIcon from '@/assets/images/green-point.png'
import BlueOn from '@/assets/images/blue-on.gif'
const mapRef = shallowRef<any>(null)
const { layout } = useLayout()
......@@ -181,7 +183,7 @@ bus.on('communityList', (data) => {
store.commit('SET_COMMUNITY_LIST', data)
})
function onMapComplete() {
addPoints(store.state.communityList)
addPoints({ data: store.state.communityList, icon: CommunityIcon, size: 6 })
}
function addPoints(data) {
......@@ -219,8 +221,12 @@ const onSelectCommunity = async (data: any) => {
} else if (stKind == '04') {
icon = c6
}
addPoints({ icon, data: [data] })
addPoints({ icon, data: [data], size: 40 })
showSearchModal.value = false
mapRef.value?.setCommunityPoints(`SECT_NAME_ = '${data.stNameFrst}'`)
mapRef.value?.focus([data.minx || data.maxx, data.miny || data.maxy], {
zoom: 9,
})
}
// document.addEventListener('dblclick', (e) => {
// console.log(e.target.attributes[0])
......
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