fc
This commit is contained in:
TS-QD1
commit
4b906b469e
26
.gitignore
vendored
Normal file
26
.gitignore
vendored
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist.zip
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
7
README.md
Normal file
7
README.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
# Vue 3 + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + Vue</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1982
package-lock.json
generated
Normal file
1982
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
package.json
Normal file
24
package.json
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "btgxq-population-housing",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@vicons/fluent": "^0.12.0",
|
||||||
|
"@vicons/utils": "^0.1.4",
|
||||||
|
"axios": "^1.6.0",
|
||||||
|
"naive-ui": "^2.35.0",
|
||||||
|
"stylus": "^0.60.0",
|
||||||
|
"vue": "^3.3.4",
|
||||||
|
"vue-router": "^4.2.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
|
"vite": "^4.4.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/assets/images/card.png
Normal file
BIN
public/assets/images/card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 311 B |
6
public/assets/images/dial-phone.svg
Normal file
6
public/assets/images/dial-phone.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="15" height="15" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
|
||||||
|
|
||||||
|
<g>
|
||||||
|
<path d="M32 6.88c0-1.12-2.176-2.592-4.864-3.040-3.338-0.58-7.182-0.912-11.104-0.912s-7.766 0.332-11.506 0.969l0.402-0.057c-2.72 0.448-4.896 1.92-4.896 3.040 0 0.032 0.032 0.064 0.032 0.096-0.038 0.104-0.061 0.225-0.064 0.351l-0 0.001v3.776c0 0.512 0.448 0.96 0.992 0.96h4.928c0.544 0 0.992-0.448 0.992-0.96v-3.456c6.016-0.8 12.16-0.8 18.176 0v3.68c0 0.544 0.448 0.96 0.992 0.96h4.928c0.544 0 0.992-0.416 0.992-0.96v-3.936c0-0.096-0.032-0.192-0.064-0.288 0.032-0.064 0.064-0.128 0.064-0.224zM29.472 18.464l-5.408-1.824c-0.416-0.128-0.992-0.256-1.568-0.384v-5.984h-2.272v3.52h-8.384v-3.52h-2.304v6.016c-0.512 0.128-0.992 0.224-1.376 0.352l-5.28 1.792c-1.024 0.352-1.856 1.536-1.856 2.624v6.048c-0 0.004-0 0.008-0 0.012 0 1.071 0.869 1.94 1.94 1.94 0.004 0 0.008 0 0.013-0h26.399c0.004 0 0.008 0 0.012 0 1.071 0 1.94-0.869 1.94-1.94 0-0.004 0-0.008-0-0.013v0.001-6.048c0-1.088-0.832-2.272-1.856-2.592zM15.872 26.88c-2.944 0-5.312-2.4-5.312-5.344s2.368-5.344 5.312-5.344c2.976 0 5.344 2.4 5.344 5.344s-2.368 5.344-5.344 5.344zM15.872 18.688c-1.568 0-2.848 1.28-2.848 2.848s1.28 2.848 2.848 2.848c1.6 0 2.88-1.28 2.88-2.848s-1.28-2.848-2.88-2.848z" fill="rgba(233.07000000000002,157.07999999999998,66.045,1)"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
public/assets/images/house.png
Normal file
BIN
public/assets/images/house.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
public/assets/images/man.png
Normal file
BIN
public/assets/images/man.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
6
public/assets/images/md-person.svg
Normal file
6
public/assets/images/md-person.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="16" height="16" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
|
||||||
|
|
||||||
|
<g>
|
||||||
|
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="rgba(129.03,179.01,55.08,1)"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 416 B |
BIN
public/assets/images/women.png
Normal file
BIN
public/assets/images/women.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
7
src/App.vue
Normal file
7
src/App.vue
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<router-view></router-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup></script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
10
src/components/info/HouseInfo.vue
Normal file
10
src/components/info/HouseInfo.vue
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
10
src/components/info/PopulationInfo.vue
Normal file
10
src/components/info/PopulationInfo.vue
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
278
src/components/list/HouseList.vue
Normal file
278
src/components/list/HouseList.vue
Normal file
@ -0,0 +1,278 @@
|
|||||||
|
<template>
|
||||||
|
<n-space class="container" vertical>
|
||||||
|
<n-space class="title" align="center">
|
||||||
|
<label>以人找房</label>
|
||||||
|
<div class="search">
|
||||||
|
<input type="text" v-model="keywords" placeholder="请输入人名以查找房">
|
||||||
|
<Icon class="search-btn" @click="onSearchClick">
|
||||||
|
<Search24Filled />
|
||||||
|
</Icon>
|
||||||
|
</div>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="body">
|
||||||
|
<div class="no-data" v-if="dataRows.length === 0">暂无数据</div>
|
||||||
|
<n-grid x-gap="30" :y-gap="15" :cols="2" v-if="dataRows.length > 0">
|
||||||
|
<n-grid-item v-for="data in dataRows" :key="data">
|
||||||
|
<n-space class="card" vertical justify="between">
|
||||||
|
<div class="top">
|
||||||
|
<n-image width="60" height="60" src="assets/images/house.png" :preview-disabled="true" />
|
||||||
|
<div class="info">
|
||||||
|
<div class="line">
|
||||||
|
<span class="title">{{ data.houseDTO.communityName }}</span>
|
||||||
|
<span class="type">{{ data.houseDTO.houseType }}</span>
|
||||||
|
<span class="housing-estate">{{ data.houseDTO.residentialName }}</span>
|
||||||
|
<span class="population">
|
||||||
|
<n-image width="15" height="15" src="assets/images/md-person.svg" :preview-disabled="true" />
|
||||||
|
<span class="name">{{ data.houseDTO.homeowner }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="line">
|
||||||
|
<span class="building-no">{{ data.houseDTO.buildingName }}楼/排</span>
|
||||||
|
<span class="building-unit">{{ data.houseDTO.affiliationUnit }}单元/列</span>
|
||||||
|
<span class="floor">{{ data.houseDTO.affiliationFloors }}层</span>
|
||||||
|
<span class="room-no">{{ data.houseDTO.houseNum }}号</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<n-space class="bottom">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>姓名</th>
|
||||||
|
<th>出生日期</th>
|
||||||
|
<th>证件类型</th>
|
||||||
|
<th>证件号码</th>
|
||||||
|
<th>联系方式</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="text" :title="data.populationInfoDTO.name">{{ data.populationInfoDTO.name }}</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="text" :title="data.populationInfoDTO.birthday">{{ data.populationInfoDTO.birthday }}</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="text" :title="data.populationInfoDTO.idcardType">{{ data.populationInfoDTO.idcardType }}</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="text" :title="data.populationInfoDTO.idcard">{{ data.populationInfoDTO.idcard }}</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="text" :title="data.populationInfoDTO.phone">{{ data.populationInfoDTO.phone }}</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</n-space>
|
||||||
|
<div class="divider"></div>
|
||||||
|
</n-space>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="footer">
|
||||||
|
<Pager :page="currentPage" :rows="rows" :total="total" @change="onPageChange" :key="pagerUpdateIndex"/>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, inject } from 'vue';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import { NSpace, NInput, NGrid, NGridItem, NImage } from 'naive-ui';
|
||||||
|
import { Search24Filled } from '@vicons/fluent';
|
||||||
|
import { Icon } from '@vicons/utils';
|
||||||
|
import Pager from '../pager/Pager.vue'
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const axios = inject('axios');
|
||||||
|
const keywords = ref(route.query.keywords);
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const total = ref(0);
|
||||||
|
const rows = ref(10);
|
||||||
|
const pagerUpdateIndex = ref(0);
|
||||||
|
const dataRows = reactive([]);
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
axios.get('/api/population/findHouse', {
|
||||||
|
params: {
|
||||||
|
keywords: keywords.value,
|
||||||
|
page: currentPage.value,
|
||||||
|
rows: rows.value
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
currentPage.value = data.page;
|
||||||
|
total.value = data.total;
|
||||||
|
dataRows.splice(0, dataRows.length);
|
||||||
|
dataRows.push(...data.rows);
|
||||||
|
pagerUpdateIndex.value++;
|
||||||
|
}).catch(resp => {
|
||||||
|
console.log()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSearchClick = () => {
|
||||||
|
currentPage.value = 1;
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
||||||
|
const onPageChange = (pager) => {
|
||||||
|
currentPage.value = pager.page;
|
||||||
|
rows.value = pager.rows;
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.container
|
||||||
|
.title
|
||||||
|
border-bottom 1px solid #FFFFFF
|
||||||
|
padding 10px 0
|
||||||
|
label
|
||||||
|
font-size 20px
|
||||||
|
a
|
||||||
|
font-size 13px
|
||||||
|
.search
|
||||||
|
border-radius 3px
|
||||||
|
position relative
|
||||||
|
.search-btn
|
||||||
|
font-size 30px
|
||||||
|
padding 3px
|
||||||
|
color #525e71
|
||||||
|
position absolute
|
||||||
|
top 1px
|
||||||
|
right 0px
|
||||||
|
cursor pointer
|
||||||
|
input
|
||||||
|
width 320px
|
||||||
|
padding 0 40px 0 15px
|
||||||
|
height 32px
|
||||||
|
border none
|
||||||
|
outline none
|
||||||
|
.body
|
||||||
|
width 840px
|
||||||
|
min-height 10px
|
||||||
|
padding 10px 0
|
||||||
|
.no-data
|
||||||
|
width 840px
|
||||||
|
text-align center
|
||||||
|
.card
|
||||||
|
width 385px
|
||||||
|
padding 10px
|
||||||
|
background-color rgba(255, 255, 255, 0.75)
|
||||||
|
border-radius 10px
|
||||||
|
position relative
|
||||||
|
cursor pointer
|
||||||
|
transition box-shadow 0.3s
|
||||||
|
&:hover
|
||||||
|
box-shadow 3px 3px 6px rgba(0,0,0,0.3)
|
||||||
|
.top
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
text-align left
|
||||||
|
.info
|
||||||
|
color #000000
|
||||||
|
font-size 12px
|
||||||
|
width 380px
|
||||||
|
margin-left 10px
|
||||||
|
.line
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
justify-content start
|
||||||
|
span
|
||||||
|
margin-right 10px
|
||||||
|
.title
|
||||||
|
font-size 14px
|
||||||
|
font-weight bold
|
||||||
|
border none
|
||||||
|
padding 0
|
||||||
|
.type
|
||||||
|
background-color #4095E5
|
||||||
|
padding 2px 10px
|
||||||
|
color #FFFFFF
|
||||||
|
border-radius 15px
|
||||||
|
transform scale(0.8)
|
||||||
|
.population
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
.name
|
||||||
|
margin-left 5px
|
||||||
|
margin-right 0
|
||||||
|
.tags
|
||||||
|
color #FFFFFF
|
||||||
|
width 320px
|
||||||
|
height 38px
|
||||||
|
display -webkit-box
|
||||||
|
-webkit-box-orient vertical
|
||||||
|
overflow hidden
|
||||||
|
-webkit-line-clamp 2
|
||||||
|
span
|
||||||
|
margin-right 3px
|
||||||
|
background-color red
|
||||||
|
padding 1px 10px
|
||||||
|
border-radius 10px
|
||||||
|
font-size 12px
|
||||||
|
transform scale(0.8)
|
||||||
|
& .orange
|
||||||
|
background-color orange
|
||||||
|
& .yellow
|
||||||
|
background-color yellow
|
||||||
|
color black
|
||||||
|
& .blue
|
||||||
|
background-color blue
|
||||||
|
& .green
|
||||||
|
background-color green
|
||||||
|
& .grey
|
||||||
|
background-color grey
|
||||||
|
.bottom
|
||||||
|
margin-top 14px
|
||||||
|
table
|
||||||
|
width 386px
|
||||||
|
border 0
|
||||||
|
border-collapse collapse
|
||||||
|
thead
|
||||||
|
background-color rgba(129, 179, 55, 0.23)
|
||||||
|
color #567722
|
||||||
|
tbody
|
||||||
|
.text
|
||||||
|
width 75px
|
||||||
|
overflow hidden
|
||||||
|
text-overflow ellipsis
|
||||||
|
white-space nowrap
|
||||||
|
color #333333
|
||||||
|
transform scale(0.8)
|
||||||
|
.divider
|
||||||
|
border 1px dotted #FEFEFE
|
||||||
|
position absolute
|
||||||
|
top 74px
|
||||||
|
left 0px
|
||||||
|
width 404px
|
||||||
|
&:before
|
||||||
|
content ' '
|
||||||
|
display block
|
||||||
|
width 10px
|
||||||
|
height 10px
|
||||||
|
background-color rgba(52, 88, 140, 1)
|
||||||
|
position absolute
|
||||||
|
left -6px
|
||||||
|
top -5px
|
||||||
|
border-radius 10px
|
||||||
|
&:after
|
||||||
|
content ' '
|
||||||
|
display block
|
||||||
|
width 10px
|
||||||
|
height 10px
|
||||||
|
background-color rgba(52, 88, 140, 1)
|
||||||
|
position absolute
|
||||||
|
right -6px
|
||||||
|
top -5px
|
||||||
|
border-radius 10px
|
||||||
|
.footer
|
||||||
|
border-top 1px solid #FFFFFF
|
||||||
|
padding 10px 0
|
||||||
|
</style>
|
||||||
291
src/components/list/PopulationList.vue
Normal file
291
src/components/list/PopulationList.vue
Normal file
@ -0,0 +1,291 @@
|
|||||||
|
<template>
|
||||||
|
<n-space class="container" vertical>
|
||||||
|
<n-space class="title" align="center">
|
||||||
|
<label>以房找人</label>
|
||||||
|
<a href="javascript:void(0)" @click="onReseachClick">重新搜索</a>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="body">
|
||||||
|
<div class="no-data" v-if="dataRows.length === 0">暂无数据</div>
|
||||||
|
<n-grid x-gap="30" :y-gap="15" :cols="2" v-if="dataRows.length > 0">
|
||||||
|
<n-grid-item v-for="data in dataRows" :key="data">
|
||||||
|
<n-space class="card" vertical justify="between">
|
||||||
|
<div class="top">
|
||||||
|
<n-image width="60" height="60" src="assets/images/women.png" :preview-disabled="true" v-if="data.sex === '女性'"/>
|
||||||
|
<n-image width="60" height="60" src="assets/images/man.png" :preview-disabled="true" v-else/>
|
||||||
|
<div class="info">
|
||||||
|
<div class="line">
|
||||||
|
<span class="name">{{ data.populationInfoHouseDTO.name }}</span>
|
||||||
|
<span class="sex" :class="{ female: data.populationInfoHouseDTO.sex === '女性' }">{{ data.populationInfoHouseDTO.sex }}</span>
|
||||||
|
<span class="age">17</span>
|
||||||
|
<span class="id-card">
|
||||||
|
<span class="type">{{ data.populationInfoHouseDTO.idcardType }}</span>
|
||||||
|
<span class="num">{{ data.populationInfoHouseDTO.idcard }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="line">
|
||||||
|
<span class="birth">{{ data.populationInfoHouseDTO.birthday }}</span>
|
||||||
|
<span class="phone">
|
||||||
|
<n-image width="15" height="15" src="assets/images/dial-phone.svg"
|
||||||
|
:preview-disabled="true" />
|
||||||
|
<span class="num">{{ data.populationInfoHouseDTO.phone }}</span>
|
||||||
|
</span>
|
||||||
|
<span class="nation">{{ data.populationInfoHouseDTO.nation }}</span>
|
||||||
|
<span class="education">{{ data.populationInfoHouseDTO.education }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="tags">
|
||||||
|
<span class="yellow" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isCorrect === '是'">社区矫正</span>
|
||||||
|
<span class="yellow" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isRelease === '是'">刑满释放</span>
|
||||||
|
<span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isDispute === '是'">矛盾纠纷</span>
|
||||||
|
<span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isSecurity === '是'">社会治安</span>
|
||||||
|
<span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isDrug === '是'">吸毒人员</span>
|
||||||
|
<span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isCult === '是'">涉邪人员</span>
|
||||||
|
<span class="grey" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isPetition === '是'">重点上访户</span>
|
||||||
|
<span class="red" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isSeriousIllness === '是'">重病</span>
|
||||||
|
<span class="orange" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isOldage === '是'">老年人</span>
|
||||||
|
<span class="blue" v-if="data.populationInfoHouseDTO.populationInfoBaseDTO.isMinority === '是'">未成年</span>
|
||||||
|
<span class="green" v-if="data.populationInfoHouseDTO.isNormal">正常</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<n-space class="bottom">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>社区</th>
|
||||||
|
<th>小区</th>
|
||||||
|
<th>楼/排</th>
|
||||||
|
<th>单元/列</th>
|
||||||
|
<th>院/层</th>
|
||||||
|
<th>门牌号</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<div class="text">{{ data.houseDTO.communityName }}</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="text">{{ data.houseDTO.residentialName }}</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="text">{{ data.houseDTO.buildingName }}</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="text">{{ data.houseDTO.affiliationUnit }}</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="text">{{ data.houseDTO.affiliationFloors }}</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="text">{{ data.houseDTO.houseNum }}</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</n-space>
|
||||||
|
<div class="divider"></div>
|
||||||
|
</n-space>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
</n-space>
|
||||||
|
<n-space class="footer">
|
||||||
|
<Pager :page="currentPage" :rows="rows" :total="total" @change="onPageChange" :key="pagerUpdateIndex"/>
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, inject } from 'vue';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import { NSpace, NInput, NGrid, NGridItem, NImage } from 'naive-ui';
|
||||||
|
import Pager from '../pager/Pager.vue'
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const axios = inject('axios');
|
||||||
|
const query = route.query;
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const total = ref(0);
|
||||||
|
const rows = ref(10);
|
||||||
|
const pagerUpdateIndex = ref(0);
|
||||||
|
const dataRows = reactive([]);
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
axios.get('/api/population/findPopulation', {
|
||||||
|
params: {
|
||||||
|
...query,
|
||||||
|
page: currentPage.value,
|
||||||
|
rows: rows.value
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
currentPage.value = data.page;
|
||||||
|
total.value = data.total;
|
||||||
|
dataRows.splice(0, dataRows.length);
|
||||||
|
data.rows.forEach(item => {
|
||||||
|
item.populationInfoHouseDTO.isNormal = (
|
||||||
|
item.populationInfoHouseDTO.populationInfoBaseDTO.isCorrect === '否' &&
|
||||||
|
item.populationInfoHouseDTO.populationInfoBaseDTO.isRelease === '否' &&
|
||||||
|
item.populationInfoHouseDTO.populationInfoBaseDTO.isDispute === '否' &&
|
||||||
|
item.populationInfoHouseDTO.populationInfoBaseDTO.isSecurity === '否' &&
|
||||||
|
item.populationInfoHouseDTO.populationInfoBaseDTO.isDrug === '否' &&
|
||||||
|
item.populationInfoHouseDTO.populationInfoBaseDTO.isCult === '否' &&
|
||||||
|
item.populationInfoHouseDTO.populationInfoBaseDTO.isPetition === '否'
|
||||||
|
)
|
||||||
|
dataRows.push(item);
|
||||||
|
});
|
||||||
|
pagerUpdateIndex.value++;
|
||||||
|
}).catch(resp => {
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const onPageChange = (pager) => {
|
||||||
|
currentPage.value = pager.page;
|
||||||
|
rows.value = pager.rows;
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
||||||
|
const onReseachClick = () => {
|
||||||
|
router.push({
|
||||||
|
path: 'population-search'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.container
|
||||||
|
.title
|
||||||
|
border-bottom 1px solid #FFFFFF
|
||||||
|
padding 10px 0
|
||||||
|
label
|
||||||
|
font-size 20px
|
||||||
|
a
|
||||||
|
color #eeeeee
|
||||||
|
font-size 13px
|
||||||
|
.body
|
||||||
|
width 840px
|
||||||
|
min-height 10px
|
||||||
|
padding 10px 0
|
||||||
|
.no-data
|
||||||
|
width 840px
|
||||||
|
text-align center
|
||||||
|
.card
|
||||||
|
width 385px
|
||||||
|
padding 10px
|
||||||
|
background-color rgba(255, 255, 255, 0.75)
|
||||||
|
border-radius 10px
|
||||||
|
position relative
|
||||||
|
cursor pointer
|
||||||
|
transition box-shadow 0.3s
|
||||||
|
&:hover
|
||||||
|
box-shadow 3px 3px 6px rgba(0,0,0,0.3)
|
||||||
|
.top
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
text-align left
|
||||||
|
.info
|
||||||
|
color #000000
|
||||||
|
font-size 12px
|
||||||
|
width 380px
|
||||||
|
.line
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
justify-content space-between
|
||||||
|
.name
|
||||||
|
font-size 14px
|
||||||
|
font-weight bold
|
||||||
|
.sex
|
||||||
|
background-color #4095E5
|
||||||
|
padding 2px 10px
|
||||||
|
color #FFFFFF
|
||||||
|
border-radius 15px
|
||||||
|
transform scale(0.8)
|
||||||
|
.female
|
||||||
|
background-color #FF919C
|
||||||
|
.id-card
|
||||||
|
.type
|
||||||
|
margin-right 5px
|
||||||
|
.phone
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
|
||||||
|
.num
|
||||||
|
margin-left 5px
|
||||||
|
margin-right 0
|
||||||
|
.tags
|
||||||
|
color #FFFFFF
|
||||||
|
width 320px
|
||||||
|
height 38px
|
||||||
|
display -webkit-box
|
||||||
|
-webkit-box-orient vertical
|
||||||
|
overflow hidden
|
||||||
|
-webkit-line-clamp 2
|
||||||
|
span
|
||||||
|
margin-right 3px
|
||||||
|
background-color red
|
||||||
|
padding 1px 10px
|
||||||
|
border-radius 10px
|
||||||
|
font-size 12px
|
||||||
|
transform scale(0.8)
|
||||||
|
& .orange
|
||||||
|
background-color orange
|
||||||
|
& .yellow
|
||||||
|
background-color yellow
|
||||||
|
color black
|
||||||
|
& .blue
|
||||||
|
background-color blue
|
||||||
|
& .green
|
||||||
|
background-color green
|
||||||
|
& .grey
|
||||||
|
background-color grey
|
||||||
|
.bottom
|
||||||
|
padding-top 14px
|
||||||
|
table
|
||||||
|
width 386px
|
||||||
|
border 0
|
||||||
|
border-collapse collapse
|
||||||
|
thead
|
||||||
|
background-color rgba(129, 179, 55, 0.23)
|
||||||
|
color #567722
|
||||||
|
tbody
|
||||||
|
.text
|
||||||
|
width 62px
|
||||||
|
text-align center
|
||||||
|
overflow hidden
|
||||||
|
text-overflow ellipsis
|
||||||
|
white-space nowrap
|
||||||
|
color #333333
|
||||||
|
transform scale(0.8)
|
||||||
|
.divider
|
||||||
|
border 1px dotted #FEFEFE
|
||||||
|
position absolute
|
||||||
|
top 100px
|
||||||
|
left 0px
|
||||||
|
width 404px
|
||||||
|
&:before
|
||||||
|
content ' '
|
||||||
|
display block
|
||||||
|
width 10px
|
||||||
|
height 10px
|
||||||
|
background-color rgba(52, 88, 140, 1)
|
||||||
|
position absolute
|
||||||
|
left -6px
|
||||||
|
top -5px
|
||||||
|
border-radius 10px
|
||||||
|
&:after
|
||||||
|
content ' '
|
||||||
|
display block
|
||||||
|
width 10px
|
||||||
|
height 10px
|
||||||
|
background-color rgba(52, 88, 140, 1)
|
||||||
|
position absolute
|
||||||
|
right -6px
|
||||||
|
top -5px
|
||||||
|
border-radius 10px
|
||||||
|
.footer
|
||||||
|
border-top 1px solid #FFFFFF
|
||||||
|
padding 10px 0
|
||||||
|
</style>
|
||||||
171
src/components/pager/Pager.vue
Normal file
171
src/components/pager/Pager.vue
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<span class="btn first" v-if="currentPage > 1" @click="onPageClick(1)">
|
||||||
|
<Icon>
|
||||||
|
<ArrowPrevious20Regular/>
|
||||||
|
</Icon>
|
||||||
|
</span>
|
||||||
|
<span class="btn before" v-if="currentPage > 1" @click="onPageClick(currentPage - 1)">
|
||||||
|
<Icon>
|
||||||
|
<ChevronLeft20Filled/>
|
||||||
|
</Icon>
|
||||||
|
</span>
|
||||||
|
<div class="btn-page">
|
||||||
|
<span class="btn" :class="{'active': currentPage === page}" v-for="page in pagerBtnArray" :key="page" @click="onPageClick(page)">{{ page }}</span>
|
||||||
|
</div>
|
||||||
|
<span class="btn after" v-if="currentPage < totalPage" @click="onPageClick(currentPage + 1)">
|
||||||
|
<Icon>
|
||||||
|
<ChevronRight20Filled/>
|
||||||
|
</Icon>
|
||||||
|
</span>
|
||||||
|
<span class="btn last" v-if="currentPage < totalPage" @click="onPageClick(totalPage)">
|
||||||
|
<Icon>
|
||||||
|
<ArrowNext20Filled/>
|
||||||
|
</Icon>
|
||||||
|
</span>
|
||||||
|
<n-select size="small" v-model:value="pageSize.value" v-if="totalPage > 0" :options="pageSize.options" @update:value="onPageSizeUpdate"/>
|
||||||
|
<div class="jump" v-if="totalPage > 0">
|
||||||
|
<span>跳转</span>
|
||||||
|
<n-input-number size="small" placeholder="请输入" v-model:value="jumpPage.value" :min="jumpPage.min" :show-button="false"/>
|
||||||
|
<span>页</span>
|
||||||
|
<n-button @click="onPageJumpConfirmClick">确定</n-button>
|
||||||
|
</div>
|
||||||
|
<span>共 {{ totalPage }} 页 {{ props.total }} 条数据</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {ref, reactive, defineProps, defineEmits} from 'vue';
|
||||||
|
import {ArrowPrevious20Regular, ChevronLeft20Filled, ChevronRight20Filled, ArrowNext20Filled} from '@vicons/fluent';
|
||||||
|
import {Icon} from '@vicons/utils';
|
||||||
|
import {NSelect, NInputNumber, NButton} from 'naive-ui';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
page: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
rows: {
|
||||||
|
type: Number,
|
||||||
|
default: 10
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emits = defineEmits(['change']);
|
||||||
|
const pageSize = reactive({
|
||||||
|
value: props.rows,
|
||||||
|
options: [
|
||||||
|
{label: '10条/页', value: 10},
|
||||||
|
{label: '20条/页', value: 20},
|
||||||
|
{label: '40条/页', value: 40},
|
||||||
|
{label: '60条/页', value: 60},
|
||||||
|
{label: '80条/页', value: 80},
|
||||||
|
{label: '100条/页', value: 100},
|
||||||
|
{label: '200条/页', value: 200},
|
||||||
|
]
|
||||||
|
});
|
||||||
|
const jumpPage = reactive({
|
||||||
|
value: 1,
|
||||||
|
min: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 分页按钮数量
|
||||||
|
const pagerSize = 5;
|
||||||
|
// 分页按钮分割数
|
||||||
|
const pagerHalfSize = pageSize % 2 === 0 ? parseInt(pagerSize / 2) : parseInt((pagerSize + 1) / 2);
|
||||||
|
// 总页数
|
||||||
|
const totalPage = ref(props.total % pageSize.value === 0 ? parseInt(props.total / pageSize.value) : parseInt(props.total / pageSize.value + 1));
|
||||||
|
const currentPage = ref(props.page);
|
||||||
|
const pagerBtnArray = reactive([]);
|
||||||
|
|
||||||
|
const renderPagerBtn = () => {
|
||||||
|
pagerBtnArray.splice(0, pagerBtnArray.length);
|
||||||
|
if(currentPage.value < pagerHalfSize) {
|
||||||
|
let pageBtnLength = pagerSize > totalPage.value ? totalPage.value : pagerSize;
|
||||||
|
for(let i = 0; i < pageBtnLength; i++) {
|
||||||
|
pagerBtnArray.push(i + 1);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(currentPage.value > totalPage.value - pagerHalfSize) {
|
||||||
|
for(let i = 0; i < pagerSize; i++) {
|
||||||
|
pagerBtnArray.push(totalPage.value - pagerSize + i + 1);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for(let i = 0; i < pagerSize; i++) {
|
||||||
|
pagerBtnArray.push(currentPage.value - pagerHalfSize + i + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderPagerBtn();
|
||||||
|
|
||||||
|
const onPageClick = (page) => {
|
||||||
|
renderPagerBtn();
|
||||||
|
emits('change', {
|
||||||
|
page: page,
|
||||||
|
rows: pageSize.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const onPageSizeUpdate = (value, option) => {
|
||||||
|
emits('change', {
|
||||||
|
page: currentPage.value,
|
||||||
|
rows: value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const onPageJumpConfirmClick = () => {
|
||||||
|
if(!jumpPage.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
emits('change', {
|
||||||
|
page: jumpPage.value,
|
||||||
|
rows: pageSize.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.container
|
||||||
|
font-size 14px
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
user-select none
|
||||||
|
.btn
|
||||||
|
height 26px
|
||||||
|
line-height 26px
|
||||||
|
display inline-block
|
||||||
|
padding 0 10px
|
||||||
|
border-radius 5px
|
||||||
|
margin 0 2px
|
||||||
|
cursor pointer
|
||||||
|
&.active
|
||||||
|
color #3894FF
|
||||||
|
&.first
|
||||||
|
&.before
|
||||||
|
&.after
|
||||||
|
&.last
|
||||||
|
display flex
|
||||||
|
justify-content center
|
||||||
|
align-items center
|
||||||
|
font-size 18px
|
||||||
|
min-width 30px
|
||||||
|
border 1px solid #FFFFFF
|
||||||
|
.jump
|
||||||
|
padding 0 5px
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
.n-input-number
|
||||||
|
margin 0 3px
|
||||||
|
width 60px
|
||||||
|
.n-button
|
||||||
|
height 28px
|
||||||
|
color #FFFFFF
|
||||||
|
margin-left 5px
|
||||||
|
.n-select
|
||||||
|
width 120px
|
||||||
|
margin 0 2px
|
||||||
|
</style>
|
||||||
66
src/components/search/HouseSearch.vue
Normal file
66
src/components/search/HouseSearch.vue
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">以人找房</div>
|
||||||
|
<div class="search">
|
||||||
|
<input type="text" placeholder="请输入人名以查找房" v-model="keywords">
|
||||||
|
<Icon class="search-btn" @click="onSearchClick">
|
||||||
|
<Search24Filled />
|
||||||
|
</Icon>
|
||||||
|
</div>
|
||||||
|
<div class="notes">请输入关键字：姓名、身份证、手机号等</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, inject } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { Search24Filled } from '@vicons/fluent';
|
||||||
|
import { Icon } from '@vicons/utils';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const keywords = ref('');
|
||||||
|
|
||||||
|
const onSearchClick = () => {
|
||||||
|
router.push({
|
||||||
|
path: '/house-list',
|
||||||
|
query: {
|
||||||
|
keywords: keywords.value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.container
|
||||||
|
margin-top 200px
|
||||||
|
display flex
|
||||||
|
flex-direction column
|
||||||
|
align-items center
|
||||||
|
justify-content center
|
||||||
|
.title
|
||||||
|
font-size 28px
|
||||||
|
font-weight bold
|
||||||
|
.search
|
||||||
|
margin-top 30px
|
||||||
|
border 2px solid #03DCDCDC
|
||||||
|
border-radius 3px
|
||||||
|
position relative
|
||||||
|
.search-btn
|
||||||
|
font-size 30px
|
||||||
|
padding 3px
|
||||||
|
color #525e71
|
||||||
|
position absolute
|
||||||
|
top 1px
|
||||||
|
right 0px
|
||||||
|
cursor pointer
|
||||||
|
input
|
||||||
|
width 600px
|
||||||
|
padding 0 40px 0 15px
|
||||||
|
height 37px
|
||||||
|
border none
|
||||||
|
outline none
|
||||||
|
.notes
|
||||||
|
margin-top 22px
|
||||||
|
font-size 12px
|
||||||
|
</style>
|
||||||
353
src/components/search/PopulationSearch.vue
Normal file
353
src/components/search/PopulationSearch.vue
Normal file
@ -0,0 +1,353 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="title">以房找人</div>
|
||||||
|
<div class="search">
|
||||||
|
<n-grid x-gap="30" :y-gap="15" :cols="3">
|
||||||
|
<n-grid-item>
|
||||||
|
<n-space class="search-condition" justify="space-between" align="center">
|
||||||
|
<label>所在街道</label>
|
||||||
|
<n-select v-model:value="street.value" :options="street.options" @update:value="onStreetUpdate"/>
|
||||||
|
</n-space>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item>
|
||||||
|
<n-space class="search-condition" justify="space-between" align="center">
|
||||||
|
<label>所在社区</label>
|
||||||
|
<n-select v-model:value="village.value" :options="village.options" @update:value="onVillageUpdate"/>
|
||||||
|
</n-space>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item>
|
||||||
|
<n-space class="search-condition" justify="space-between" align="center">
|
||||||
|
<label>所在小区</label>
|
||||||
|
<n-select v-model:value="housingEstate.value" :options="housingEstate.options" @update:value="onHousingEstateUpdate"/>
|
||||||
|
</n-space>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item>
|
||||||
|
<n-space class="search-condition" justify="space-between" align="center">
|
||||||
|
<label>楼/牌名称</label>
|
||||||
|
<n-select v-model:value="building.value" :options="building.options" @update:value="onBuildingUpdate"/>
|
||||||
|
</n-space>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item>
|
||||||
|
<n-space class="search-condition" justify="space-between" align="center">
|
||||||
|
<label>所在单元/列</label>
|
||||||
|
<n-select v-model:value="buildingUnit.value" :options="buildingUnit.options" />
|
||||||
|
</n-space>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item>
|
||||||
|
<n-space class="search-condition" justify="space-between" align="center">
|
||||||
|
<label>所在院层</label>
|
||||||
|
<n-select v-model:value="buildingFloor.value" :options="buildingFloor.options" />
|
||||||
|
</n-space>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item>
|
||||||
|
<n-space class="search-condition" justify="space-between" align="center">
|
||||||
|
<label>门牌号</label>
|
||||||
|
<n-input v-model:value="houseNumber" placeholder="请输入门牌号" />
|
||||||
|
</n-space>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item>
|
||||||
|
<n-space class="search-condition" justify="space-between" align="center">
|
||||||
|
<label>是否出租房</label>
|
||||||
|
<n-select v-model:value="rentalHousing.value" :options="rentalHousing.options" />
|
||||||
|
</n-space>
|
||||||
|
</n-grid-item>
|
||||||
|
<n-grid-item>
|
||||||
|
<n-space class="search-condition" justify="space-between" align="center">
|
||||||
|
<label>是否空置房</label>
|
||||||
|
<n-select v-model:value="vacantHouse.value" :options="vacantHouse.options" />
|
||||||
|
</n-space>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
</div>
|
||||||
|
<div class="btn">
|
||||||
|
<n-button @click="onSearchClick">
|
||||||
|
<Icon class="icon">
|
||||||
|
<Search24Filled />
|
||||||
|
</Icon>
|
||||||
|
<label>搜索</label>
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { inject } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { NSpace, NGrid, NGridItem, NSelect, NInput, NButton } from 'naive-ui';
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
import { Search24Filled } from '@vicons/fluent';
|
||||||
|
import { Icon } from '@vicons/utils';
|
||||||
|
import { isSlotEmpty } from 'naive-ui/es/_utils';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const axios = inject('axios');
|
||||||
|
// 街道
|
||||||
|
const street = reactive({
|
||||||
|
value: 'song1',
|
||||||
|
options: [{
|
||||||
|
label: '无',
|
||||||
|
value: ''
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
// 社区
|
||||||
|
const village = reactive({
|
||||||
|
value: '',
|
||||||
|
options: [{
|
||||||
|
label: '无',
|
||||||
|
value: ''
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
// 小区
|
||||||
|
const housingEstate = reactive({
|
||||||
|
value: '',
|
||||||
|
options: [{
|
||||||
|
label: '无',
|
||||||
|
value: ''
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
// 楼宇
|
||||||
|
const building = reactive({
|
||||||
|
value: '',
|
||||||
|
options: [{
|
||||||
|
label: '无',
|
||||||
|
value: ''
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
// 楼宇单元
|
||||||
|
const buildingUnit = reactive({
|
||||||
|
value: '',
|
||||||
|
options: [{
|
||||||
|
label: '无',
|
||||||
|
value: ''
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
// 楼宇楼层
|
||||||
|
const buildingFloor = reactive({
|
||||||
|
value: '',
|
||||||
|
options: [{
|
||||||
|
label: '无',
|
||||||
|
value: '',
|
||||||
|
floors: '',
|
||||||
|
units: ''
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
// 门牌号
|
||||||
|
const houseNumber = ref('');
|
||||||
|
//
|
||||||
|
// 是否出租房
|
||||||
|
const rentalHousing = reactive({
|
||||||
|
value: '',
|
||||||
|
options: [{
|
||||||
|
label: '无',
|
||||||
|
value: ''
|
||||||
|
}, {
|
||||||
|
label: '是',
|
||||||
|
value: 1
|
||||||
|
}, {
|
||||||
|
label: '否',
|
||||||
|
value: 0
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
// 是否空置房
|
||||||
|
const vacantHouse = reactive({
|
||||||
|
value: '',
|
||||||
|
options: [{
|
||||||
|
label: '无',
|
||||||
|
value: ''
|
||||||
|
}, {
|
||||||
|
label: '是',
|
||||||
|
value: 1
|
||||||
|
}, {
|
||||||
|
label: '否',
|
||||||
|
value: 0
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
// 初始化街道
|
||||||
|
const initStreet = () => {
|
||||||
|
street.value = '';
|
||||||
|
street.options.splice(1, street.options.length - 1);
|
||||||
|
axios.get('/api/residential/getStreetList', {}).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
data.forEach(item => {
|
||||||
|
street.options.push({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}).catch(res => {});
|
||||||
|
}
|
||||||
|
// 初始化社区
|
||||||
|
const initVillage = (areaId) => {
|
||||||
|
village.value = '';
|
||||||
|
village.options.splice(1, village.options.length - 1);
|
||||||
|
if(!areaId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
axios.get('/api/residential/getCommunityList', {
|
||||||
|
params: {
|
||||||
|
areaId: areaId
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
data.forEach(item => {
|
||||||
|
village.options.push({
|
||||||
|
label: item.communityName,
|
||||||
|
value: item.communityId
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}).catch(res => {});
|
||||||
|
}
|
||||||
|
// 初始化小区
|
||||||
|
const initHousingEstate = (communityId) => {
|
||||||
|
housingEstate.value = '';
|
||||||
|
housingEstate.options.splice(1, housingEstate.options.length - 1);
|
||||||
|
if(!communityId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
axios.get('/api/residential/list', {
|
||||||
|
params: {
|
||||||
|
street: street.value,
|
||||||
|
community: communityId
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
data.forEach(item => {
|
||||||
|
housingEstate.options.push({
|
||||||
|
label: item.name,
|
||||||
|
value: item.residentialId
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}).catch(res => {});
|
||||||
|
}
|
||||||
|
// 初始化楼/牌
|
||||||
|
const initBuilding = (residentialId) => {
|
||||||
|
building.value = '';
|
||||||
|
building.options.splice(1, building.options.length - 1);
|
||||||
|
if(!residentialId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
axios.get('/api/building/list', {
|
||||||
|
params: {
|
||||||
|
residentialId: residentialId
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
data.forEach(item => {
|
||||||
|
building.options.push({
|
||||||
|
label: item.name,
|
||||||
|
value: item.buildingId,
|
||||||
|
floors: item.floorsNum,
|
||||||
|
units: item.unitNum
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}).catch(res => {});
|
||||||
|
}
|
||||||
|
// 单元/列
|
||||||
|
const initBuildingUnit = (buildingUnitSize) => {
|
||||||
|
buildingUnit.value = '';
|
||||||
|
buildingUnit.options.splice(1, buildingUnit.options.length - 1);
|
||||||
|
if(!buildingUnitSize) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for(let i = 1; i <= buildingUnitSize; i++) {
|
||||||
|
buildingUnit.options.push({
|
||||||
|
label: `${i}单元/列`,
|
||||||
|
value: i
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 楼层
|
||||||
|
const initBuildingFloor = (buildingFloorSize) => {
|
||||||
|
buildingFloor.value = '';
|
||||||
|
buildingFloor.options.splice(1, buildingFloor.options.length - 1);
|
||||||
|
if(!buildingFloorSize) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for(let i = 1; i <= buildingFloorSize; i++) {
|
||||||
|
buildingFloor.options.push({
|
||||||
|
label: `${i}层/院`,
|
||||||
|
value: i
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 街道选择
|
||||||
|
const onStreetUpdate = (value, option) => {
|
||||||
|
initVillage(value);
|
||||||
|
initHousingEstate();
|
||||||
|
initBuilding();
|
||||||
|
initBuildingUnit();
|
||||||
|
initBuildingFloor();
|
||||||
|
}
|
||||||
|
// 社区选择
|
||||||
|
const onVillageUpdate = (value, option) => {
|
||||||
|
initHousingEstate(value);
|
||||||
|
initBuilding();
|
||||||
|
initBuildingUnit();
|
||||||
|
initBuildingFloor();
|
||||||
|
}
|
||||||
|
// 小区选择
|
||||||
|
const onHousingEstateUpdate = (value, option) => {
|
||||||
|
initBuilding(value);
|
||||||
|
initBuildingUnit();
|
||||||
|
initBuildingFloor();
|
||||||
|
}
|
||||||
|
// 楼宇选择
|
||||||
|
const onBuildingUpdate = (value, option) => {
|
||||||
|
initBuildingUnit(value ? option.units : null);
|
||||||
|
initBuildingFloor(value ? option.floors : null);
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSearchClick = () => {
|
||||||
|
router.push({
|
||||||
|
path: '/population-list',
|
||||||
|
query: {
|
||||||
|
street: street.value,
|
||||||
|
community: village.value,
|
||||||
|
residentialId: housingEstate.value,
|
||||||
|
buildingId: building.value,
|
||||||
|
affiliationUnit: buildingUnit.value,
|
||||||
|
affiliationFloors: buildingFloor.value,
|
||||||
|
houseNum: houseNumber.value,
|
||||||
|
isRental: rentalHousing.value,
|
||||||
|
isVacant: vacantHouse.value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
initStreet();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.container
|
||||||
|
margin-top 200px
|
||||||
|
display flex
|
||||||
|
flex-direction column
|
||||||
|
justify-content center
|
||||||
|
align-content center
|
||||||
|
text-align center
|
||||||
|
.title
|
||||||
|
font-size 28px
|
||||||
|
font-weight bold
|
||||||
|
.search
|
||||||
|
margin-top 30px
|
||||||
|
.search-condition
|
||||||
|
.n-input
|
||||||
|
.n-select
|
||||||
|
border-radius 50px
|
||||||
|
overflow hidden
|
||||||
|
width 168px
|
||||||
|
.btn
|
||||||
|
margin-top 60px
|
||||||
|
.n-button
|
||||||
|
width 240px
|
||||||
|
height 30px
|
||||||
|
border-radius 15px
|
||||||
|
background-color #FFBF6B
|
||||||
|
color #FFFFFF
|
||||||
|
.icon
|
||||||
|
font-size 18px
|
||||||
|
label
|
||||||
|
margin-left 5px
|
||||||
|
cursor pointer
|
||||||
|
</style>
|
||||||
19
src/main.js
Normal file
19
src/main.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import {router} from './route/route'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const createAxios = {
|
||||||
|
install(app, options) {
|
||||||
|
axios.defaults.baseURL = 'http://192.168.0.9:7023/population';
|
||||||
|
// axios.defaults.baseURL = '/population';
|
||||||
|
axios.defaults.timeout = 20000;
|
||||||
|
app.provide('axios', axios);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
app.use(router);
|
||||||
|
app.use(createAxios);
|
||||||
|
app.mount('#app');
|
||||||
39
src/route/route.js
Normal file
39
src/route/route.js
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { createRouter, createWebHashHistory } from 'vue-router';
|
||||||
|
import PopulationSearch from '../components/search/PopulationSearch.vue';
|
||||||
|
import HouseSearch from '../components/search/HouseSearch.vue';
|
||||||
|
import PopulationList from '../components/list/PopulationList.vue';
|
||||||
|
import HouseList from '../components/list/HouseList.vue';
|
||||||
|
import PopulationInfo from '../components/info/PopulationInfo.vue';
|
||||||
|
import HouseInfo from '../components/info/HouseInfo.vue';
|
||||||
|
|
||||||
|
const routes = [{
|
||||||
|
name: '以人找房搜索',
|
||||||
|
path: '/population-search',
|
||||||
|
component: PopulationSearch
|
||||||
|
}, {
|
||||||
|
name: '以房找人搜索',
|
||||||
|
path: '/house-search',
|
||||||
|
component: HouseSearch
|
||||||
|
}, {
|
||||||
|
name: '以房找人列表',
|
||||||
|
path: '/population-list',
|
||||||
|
component: PopulationList
|
||||||
|
}, {
|
||||||
|
name: '以人找房列表',
|
||||||
|
path: '/house-list',
|
||||||
|
component: HouseList
|
||||||
|
}, {
|
||||||
|
name: '人口详情',
|
||||||
|
path: '/population-info',
|
||||||
|
component: PopulationInfo
|
||||||
|
}, {
|
||||||
|
name: '房屋详情',
|
||||||
|
path: '/house-info',
|
||||||
|
component: HouseInfo
|
||||||
|
}]
|
||||||
|
|
||||||
|
export const router = createRouter({
|
||||||
|
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
|
||||||
|
history: createWebHashHistory(),
|
||||||
|
routes, // `routes: routes` 的缩写
|
||||||
|
})
|
||||||
40
src/style.css
Normal file
40
src/style.css
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: rgba(52, 88, 140, 1);
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100%;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
height: 100%;
|
||||||
|
max-width: 840px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: rgba(52, 88, 140, 1);
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
}
|
||||||
8
vite.config.js
Normal file
8
vite.config.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
base: './',
|
||||||
|
plugins: [vue()],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user