修改房屋、人口详情页面
This commit is contained in:
TS-QD1
parent
de36f700ea
commit
29c3d1f9ca
BIN
housing.zip
Normal file
BIN
housing.zip
Normal file
Binary file not shown.
45
package-lock.json
generated
45
package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"@vicons/fluent": "^0.12.0",
|
||||
"@vicons/utils": "^0.1.4",
|
||||
"axios": "^1.6.0",
|
||||
"echarts": "^5.4.3",
|
||||
"naive-ui": "^2.35.0",
|
||||
"stylus": "^0.60.0",
|
||||
"vue": "^3.3.4",
|
||||
@ -725,6 +726,15 @@
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
|
||||
"integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.4"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.18.20.tgz",
|
||||
@ -1059,6 +1069,11 @@
|
||||
"resolved": "https://registry.npmmirror.com/treemate/-/treemate-0.3.11.tgz",
|
||||
"integrity": "sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg=="
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
},
|
||||
"node_modules/vdirs": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz",
|
||||
@ -1185,6 +1200,14 @@
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
|
||||
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "5.4.4",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",
|
||||
"integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
@ -1654,6 +1677,15 @@
|
||||
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
|
||||
},
|
||||
"echarts": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
|
||||
"integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
|
||||
"requires": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.4.4"
|
||||
}
|
||||
},
|
||||
"esbuild": {
|
||||
"version": "0.18.20",
|
||||
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.18.20.tgz",
|
||||
@ -1911,6 +1943,11 @@
|
||||
"resolved": "https://registry.npmmirror.com/treemate/-/treemate-0.3.11.tgz",
|
||||
"integrity": "sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg=="
|
||||
},
|
||||
"tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
},
|
||||
"vdirs": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz",
|
||||
@ -1977,6 +2014,14 @@
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
|
||||
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
|
||||
},
|
||||
"zrender": {
|
||||
"version": "5.4.4",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",
|
||||
"integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
|
||||
"requires": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"@vicons/fluent": "^0.12.0",
|
||||
"@vicons/utils": "^0.1.4",
|
||||
"axios": "^1.6.0",
|
||||
"echarts": "^5.4.3",
|
||||
"naive-ui": "^2.35.0",
|
||||
"stylus": "^0.60.0",
|
||||
"vue": "^3.3.4",
|
||||
|
||||
BIN
public/assets/images/house-population-bg.png
Normal file
BIN
public/assets/images/house-population-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
public/assets/images/population-house-bg.png
Normal file
BIN
public/assets/images/population-house-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
6
public/assets/svgs/fa-address-card.svg
Normal file
6
public/assets/svgs/fa-address-card.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 576 512" width="14" height="14" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
|
||||
|
||||
<g>
|
||||
<path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-352 96c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H86.4C74 384 64 375.4 64 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2zM512 312c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z" fill="rgba(204,247.095,131.07,1)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 921 B |
6
public/assets/svgs/fa-building.svg
Normal file
6
public/assets/svgs/fa-building.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 448 512" width="14" height="14" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
|
||||
|
||||
<g>
|
||||
<path d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z" fill="rgba(117.045,248.88,252.96,1)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
6
public/assets/svgs/fa-hospital.svg
Normal file
6
public/assets/svgs/fa-hospital.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 448 512" width="14" height="14" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
|
||||
|
||||
<g>
|
||||
<path d="M128 244v-40c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12h-40c-6.627 0-12-5.373-12-12zm140 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12zm-76 84v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm76 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12zm180 124v36H0v-36c0-6.627 5.373-12 12-12h19.5V85.035C31.5 73.418 42.245 64 55.5 64H144V24c0-13.255 10.745-24 24-24h112c13.255 0 24 10.745 24 24v40h88.5c13.255 0 24 9.418 24 21.035V464H436c6.627 0 12 5.373 12 12zM79.5 463H192v-67c0-6.627 5.373-12 12-12h40c6.627 0 12 5.373 12 12v67h112.5V112H304v24c0 13.255-10.745 24-24 24H168c-13.255 0-24-10.745-24-24v-24H79.5v351zM266 64h-26V38a6 6 0 0 0-6-6h-20a6 6 0 0 0-6 6v26h-26a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h26v26a6 6 0 0 0 6 6h20a6 6 0 0 0 6-6V96h26a6 6 0 0 0 6-6V70a6 6 0 0 0-6-6z" fill="rgba(161.925,238.935,77.00999999999999,1)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
6
public/assets/svgs/fa-user.svg
Normal file
6
public/assets/svgs/fa-user.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 448 512" width="14" height="14" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
|
||||
|
||||
<g>
|
||||
<path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z" fill="rgba(161.925,238.935,77.00999999999999,1)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 579 B |
6
public/assets/svgs/iconPark-bank-card.svg
Normal file
6
public/assets/svgs/iconPark-bank-card.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 48 48" width="14" height="14" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
|
||||
|
||||
<g>
|
||||
<rect width="48" height="48" fill="rgba(233.07000000000002,157.07999999999998,66.045,1)" fill-opacity="0.01" stroke="none"></rect><path d="M4 10C4 8.89543 4.89543 8 6 8H42C43.1046 8 44 8.89543 44 10V38C44 39.1046 43.1046 40 42 40H6C4.89543 40 4 39.1046 4 38V10Z" fill="none" stroke="rgba(233.07000000000002,157.07999999999998,66.045,1)" stroke-width="4" stroke-linejoin="round"></path><path d="M4 16H44" stroke="rgba(233.07000000000002,157.07999999999998,66.045,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M27 32H36" stroke="rgba(233.07000000000002,157.07999999999998,66.045,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M44 10V26" stroke="rgba(233.07000000000002,157.07999999999998,66.045,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M4 10V26" stroke="rgba(233.07000000000002,157.07999999999998,66.045,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
6
public/assets/svgs/iconPark-shopping-mall.svg
Normal file
6
public/assets/svgs/iconPark-shopping-mall.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 48 48" width="14" height="14" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
|
||||
|
||||
<g>
|
||||
<rect width="48" height="48" fill="rgba(222.105,133.875,143.055,1)" fill-opacity="0.01" stroke="none"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M8 44V6C8 5.44772 8.44772 5 9 5H29C29.5523 5 30 5.44772 30 6V44" fill="none"></path><path d="M8 44V6C8 5.44772 8.44772 5 9 5H29C29.5523 5 30 5.44772 30 6V44" stroke="rgba(222.105,133.875,143.055,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M30 15L40 20.9993V44" stroke="rgba(222.105,133.875,143.055,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M4 44H44" stroke="rgba(222.105,133.875,143.055,1)" stroke-width="4" stroke-linecap="round" fill="none"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 968 B |
6
public/assets/svgs/md-contacts.svg
Normal file
6
public/assets/svgs/md-contacts.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="14" height="14" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
|
||||
|
||||
<g>
|
||||
<path d="M20 0H4v2h16V0zM4 24h16v-2H4v2zM20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 2.75c1.24 0 2.25 1.01 2.25 2.25s-1.01 2.25-2.25 2.25S9.75 10.24 9.75 9 10.76 6.75 12 6.75zM17 17H7v-1.5c0-1.67 3.33-2.5 5-2.5s5 .83 5 2.5V17z" fill="rgba(180.03,252.96,255,1)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 557 B |
6
public/assets/svgs/md-domain.svg
Normal file
6
public/assets/svgs/md-domain.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="14" height="14" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
|
||||
|
||||
<g>
|
||||
<path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z" fill="rgba(233.07000000000002,157.07999999999998,66.045,1)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 533 B |
6
public/assets/svgs/md-phone_android.svg
Normal file
6
public/assets/svgs/md-phone_android.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="14" height="14" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
|
||||
|
||||
<g>
|
||||
<path d="M16 1H8C6.34 1 5 2.34 5 4v16c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zm-2 20h-4v-1h4v1zm3.25-3H6.75V4h10.5v14z" fill="rgba(222.105,133.875,143.055,1)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 438 B |
6
public/assets/svgs/riLine-building-3-line.svg
Normal file
6
public/assets/svgs/riLine-building-3-line.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="14" height="14" style="border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined" filter="none">
|
||||
|
||||
<g>
|
||||
<path d="M13.333 13.481v-12.148l14.667 8v18.667h-24v-18.667l9.333 4.148zM16 5.825v11.76l-9.333-4.148v11.896h18.667v-14.417l-9.333-5.089z" fill="rgba(204,247.095,131.07,1)"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 433 B |
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
<n-message-provider>
|
||||
<router-view></router-view>
|
||||
</n-message-provider>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import {NMessageProvider} from 'naive-ui'
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
30
src/components/Index.vue
Normal file
30
src/components/Index.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<n-space align="center" justify="center" style="height: 100vh;">
|
||||
<n-button type="primary" @click="onHouseSearch">以人找房</n-button>
|
||||
<n-button type="primary" @click="onPopulationSearch">以房找人</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import {NSpace, NButton } from 'naive-ui';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
const onHouseSearch = () => {
|
||||
router.push({
|
||||
path: 'house-search',
|
||||
});
|
||||
}
|
||||
|
||||
const onPopulationSearch = () => {
|
||||
router.push({
|
||||
path: 'population-search',
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
</style>
|
||||
@ -12,165 +12,177 @@
|
||||
</Icon>
|
||||
</div>
|
||||
<div class="content">
|
||||
<n-space class="row">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">所在社区</label>
|
||||
<div class="value">{{ houseInfo.communityName }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">所在小区/组</label>
|
||||
<div class="value">{{ houseInfo.residentialName }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">楼/排名称</label>
|
||||
<div class="value">{{ houseInfo.buildingName }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">所在单元/列</label>
|
||||
<div class="value">{{ houseInfo.affiliationUnit }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">所在层/院</label>
|
||||
<div class="value">{{ houseInfo.affiliationFloors }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">门牌号</label>
|
||||
<div class="value">{{ houseInfo.houseNum }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">房屋类型</label>
|
||||
<div class="value">{{ houseInfo.typeName }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">房屋性质</label>
|
||||
<div class="value">{{ houseInfo.natureName }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">房屋种类</label>
|
||||
<div class="value">{{ houseInfo.categoryName }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">房屋结构</label>
|
||||
<div class="value">{{ houseInfo.structureName }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">房屋面积</label>
|
||||
<div class="value">{{ houseInfo.roomArea }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">建筑用途</label>
|
||||
<div class="value">{{ houseInfo.buildingPurposeName }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">房屋间数</label>
|
||||
<div class="value">{{ houseInfo.roomNum }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">产权证号</label>
|
||||
<div class="value">{{ houseInfo.certificateNum }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">房屋用途</label>
|
||||
<div class="value">{{ houseInfo.roomUseName }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">是否空置房</label>
|
||||
<div class="value">{{ houseInfo.isVacant }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">是否出租屋</label>
|
||||
<div class="value">{{ houseInfo.isRental }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">隐患类型</label>
|
||||
<div class="value">{{ houseInfo.dangerName }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">登记日期</label>
|
||||
<div class="value">{{ houseInfo.registrationDate }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">所属单位</label>
|
||||
<div class="value">{{ houseInfo.affiliatedUnit }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="title">租住情况</div>
|
||||
<div class="content">
|
||||
<n-space class="row">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">租住类型</label>
|
||||
<div class="value">{{ houseInfo.lodgeTypeName }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="title">房主</div>
|
||||
<div class="content">
|
||||
<n-space class="row">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">房主姓名</label>
|
||||
<div class="value">{{ houseInfo.homeowner }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">证件种类</label>
|
||||
<div class="value">{{ houseInfo.documentName }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">证件号码</label>
|
||||
<div class="value">{{ houseInfo.documentNum }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">联系电话</label>
|
||||
<div class="value">{{ houseInfo.phone }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="title">托管人</div>
|
||||
<div class="content">
|
||||
<n-space class="row">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">托管人姓名</label>
|
||||
<div class="value">{{ houseInfo.custodian }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">证件种类</label>
|
||||
<div class="value">{{ houseInfo.custodianDocumentName }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">证件号码</label>
|
||||
<div class="value">{{ houseInfo.custodianDocumentNum }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">联系电话</label>
|
||||
<div class="value">{{ houseInfo.custodianPhone }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">与房主关系</label>
|
||||
<div class="value">{{ houseInfo.relationshipHomeowner }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width="15%" />
|
||||
<col />
|
||||
<col width="15%" />
|
||||
<col />
|
||||
<col width="15%" />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr><td colspan="6"><label>基础信息</label></td></tr>
|
||||
<tr>
|
||||
<td><label>所在社区</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.communityName ? houseInfo.communityName : '无' }}</div>
|
||||
</td>
|
||||
<td><label>所在小区/组</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.residentialName ? houseInfo.residentialName : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>楼/排名称</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.buildingName ? houseInfo.buildingName : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>所在单元/列</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.affiliationUnit ? houseInfo.affiliationUnit : '无' }}</div>
|
||||
</td>
|
||||
<td><label>所在层/院</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.affiliationFloors ? houseInfo.affiliationFloors : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>门牌号</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.houseNum ? houseInfo.houseNum : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>房屋类型</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.typeName ? houseInfo.typeName : '无' }}</div>
|
||||
</td>
|
||||
<td><label>房屋性质</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.natureName ? houseInfo.natureName : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>房屋种类</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.categoryName ? houseInfo.categoryName : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>房屋结构</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.structureName ? houseInfo.structureName : '无' }}</div>
|
||||
</td>
|
||||
<td><label>房屋面积</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.roomArea ? houseInfo.roomArea : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>建筑用途</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.buildingPurposeName ? houseInfo.buildingPurposeName : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>房屋间数</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.roomNum ? houseInfo.roomNum : '无' }}</div>
|
||||
</td>
|
||||
<td><label>产权证号</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.certificateNum ? houseInfo.certificateNum : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>房屋用途</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.roomUseName ? houseInfo.roomUseName : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>是否空置房</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.isVacant ? houseInfo.isVacant : '无' }}</div>
|
||||
</td>
|
||||
<td><label>是否出租屋</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.isRental ? houseInfo.isRental : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>隐患类型</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.dangerName ? houseInfo.dangerName : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>登记日期</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.registrationDate ? houseInfo.registrationDate : '无' }}</div>
|
||||
</td>
|
||||
<td><label>所属单位</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.affiliatedUnit ? houseInfo.affiliatedUnit : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td colspan="6"><label>租住情况</label></td></tr>
|
||||
<tr>
|
||||
<td><label>租住类型</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.lodgeTypeName ? houseInfo.lodgeTypeName : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td colspan="6"><label>房主</label></td></tr>
|
||||
<tr>
|
||||
<td><label>房主姓名</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.homeowner ? houseInfo.homeowner : '无' }}</div>
|
||||
</td>
|
||||
<td><label>证件种类</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.documentName ? houseInfo.documentName : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>证件号码</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.documentNum ? houseInfo.documentNum : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>联系电话</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.phone ? houseInfo.phone : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td colspan="6"><label>托管人</label></td></tr>
|
||||
<tr>
|
||||
<td><label>托管人姓名</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.custodian ? houseInfo.custodian : '无' }}</div>
|
||||
</td>
|
||||
<td><label>证件种类</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.custodianDocumentName ? houseInfo.custodianDocumentName : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>证件号码</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.custodianDocumentNum ? houseInfo.custodianDocumentNum : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>联系电话</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.custodianPhone ? houseInfo.custodianPhone : '无' }}</div>
|
||||
</td>
|
||||
<td><label>与房主关系</label></td>
|
||||
<td>
|
||||
<div class="value">{{ houseInfo.relationshipHomeowner ? houseInfo.relationshipHomeowner : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -182,11 +194,11 @@
|
||||
<div class="list" v-if="populationList.length > 0">
|
||||
<div class="card" v-for="item in populationList" :key="item.populationInfoId"
|
||||
@click="onPopulationClick(item.populationInfoId)">
|
||||
<div>姓名：{{ item.name }}</div>
|
||||
<div>年龄：{{ item.age }}</div>
|
||||
<div>证件类型：{{ item.idcardType }}</div>
|
||||
<div>证件号码：{{ item.idcard }}</div>
|
||||
<div>联系方式：{{ item.phone }}</div>
|
||||
<div class="line"><img :src="svgs.a"/><span>姓名：</span>{{ item.name }}</div>
|
||||
<div class="line"><img :src="svgs.b"/><span>年龄：</span>{{ item.age }}</div>
|
||||
<div class="line"><img :src="svgs.c"/><span>证件类型：</span>{{ item.idcardType }}</div>
|
||||
<div class="line"><img :src="svgs.d"/><span>证件号码：</span>{{ item.idcard }}</div>
|
||||
<div class="line"><img :src="svgs.e"/><span>联系方式：</span>{{ item.phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -199,14 +211,24 @@
|
||||
import { ref, reactive, inject } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { NSpace, NSpin } from 'naive-ui';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { ArrowStepBack16Filled } from '@vicons/fluent';
|
||||
import { Icon } from '@vicons/utils';
|
||||
|
||||
const message = useMessage();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const query = route.query;
|
||||
const axios = inject('axios');
|
||||
|
||||
const svgs = {
|
||||
'a': '/assets/svgs/fa-user.svg',
|
||||
'b': '/assets/svgs/md-contacts.svg',
|
||||
'c': '/assets/svgs/iconPark-shopping-mall.svg',
|
||||
'd': '/assets/svgs/fa-address-card.svg',
|
||||
'e': '/assets/svgs/md-phone_android.svg',
|
||||
}
|
||||
|
||||
const houseInfo = reactive({});
|
||||
const populationList = reactive([]);
|
||||
|
||||
@ -247,7 +269,10 @@ const initHouseInfo = () => {
|
||||
houseInfo.custodianDocumentNum = data.custodianDocumentNum;
|
||||
houseInfo.custodianPhone = data.custodianPhone;
|
||||
houseInfo.relationshipHomeowner = data.relationshipHomeowner;
|
||||
}).catch(err => { console.error(err); }).finally(() => {
|
||||
}).catch(res => {
|
||||
console.error(res);
|
||||
message.error(res.response.data)
|
||||
}).finally(() => {
|
||||
isInfoLoading.value = false;
|
||||
});
|
||||
}
|
||||
@ -289,6 +314,7 @@ initPopulationList();
|
||||
--var-parents-width 200px
|
||||
--var-label-width 70px
|
||||
--var-value-width 100px
|
||||
padding-bottom 10px
|
||||
.top
|
||||
padding 10px 0
|
||||
font-weight bold
|
||||
@ -307,27 +333,27 @@ initPopulationList();
|
||||
margin-left 10px
|
||||
cursor pointer
|
||||
.content
|
||||
.row
|
||||
margin-bottom 10px
|
||||
.item
|
||||
font-size 12px
|
||||
.name
|
||||
table
|
||||
width 100%
|
||||
border-collapse collapse
|
||||
font-size 12px
|
||||
td
|
||||
border 1px solid rgba(255,255,255,0.25)
|
||||
padding 4px
|
||||
label
|
||||
font-weight bold
|
||||
display block
|
||||
width var(--var-label-width)
|
||||
width 100%
|
||||
display inline-block
|
||||
text-align center
|
||||
color rgb(147,210,243)
|
||||
.value
|
||||
width var(--var-value-width)
|
||||
height 20px
|
||||
line-height 20px
|
||||
font-weight 400
|
||||
padding 5px
|
||||
color #B7B9BB
|
||||
background-color rgba(239, 239, 239, 0.1)
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
white-space nowrap
|
||||
min-width 60px
|
||||
min-height 20px
|
||||
text-align center
|
||||
.right
|
||||
width var(--var-right-width)
|
||||
height 550px
|
||||
overflow auto
|
||||
font-size 12px
|
||||
margin-top 44px
|
||||
.title
|
||||
@ -335,13 +361,29 @@ initPopulationList();
|
||||
padding 10px
|
||||
.list
|
||||
margin-top 10px
|
||||
overflow auto
|
||||
padding 5px 5px 180px 5px
|
||||
background-color rgba(239, 239, 239, 0.1)
|
||||
padding 10px
|
||||
background-image url(/assets/images/house-population-bg.png)
|
||||
background-size 100%
|
||||
background-repeat no-repeat
|
||||
background-position bottom
|
||||
.card
|
||||
background-color rgba(255, 255, 255, 0.25)
|
||||
padding 5px
|
||||
margin-bottom 5px
|
||||
border-bottom 1px solid rgba(255, 255, 255, 0.5)
|
||||
cursor pointer
|
||||
.line
|
||||
display flex
|
||||
align-items center
|
||||
margin-bottom 5px
|
||||
img
|
||||
width 15px
|
||||
height 15px
|
||||
margin-right 2px
|
||||
span
|
||||
color #93D2F3
|
||||
&:last-child
|
||||
margin-bottom 0
|
||||
border-bottom none
|
||||
</style>
|
||||
@ -10,141 +10,222 @@
|
||||
<n-spin :show="isInfoLoading" stroke="#FFFFFF">
|
||||
<template #description><span style="color:#FFFFFF;">正在加载...</span></template>
|
||||
<div class="left">
|
||||
<n-space class="row" justify="space-between">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">姓名</label>
|
||||
<div class="value">{{ populationInfo.name }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">证件类型</label>
|
||||
<div class="value">{{ populationInfo.idcardType }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">证件号码</label>
|
||||
<div class="value" style="width: 200px;">{{ populationInfo.idcard }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row" justify="space-between">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">性别</label>
|
||||
<div class="value">{{ populationInfo.sex }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">名族</label>
|
||||
<div class="value" style="width: 120px">{{ populationInfo.nation }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">文化程度</label>
|
||||
<div class="value" style="width: 120px">{{ populationInfo.education }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row" justify="space-between">
|
||||
<n-space class="text" vertical>
|
||||
<label class="name">就读院校及专业（需注明学历）</label>
|
||||
<div class="value">{{ populationInfo.description }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row" justify="space-between">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">所属党派</label>
|
||||
<div class="value">{{ populationInfo.organization }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">宗教信仰</label>
|
||||
<div class="value">{{ populationInfo.religion }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">婚姻状况</label>
|
||||
<div class="value">{{ populationInfo.marriageStatus }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">婚变日期</label>
|
||||
<div class="value">{{ populationInfo.marriageChangeTime }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row" justify="space-between">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">初婚日期</label>
|
||||
<div class="value">{{ populationInfo.marriageFirstTime }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">社会保险情况</label>
|
||||
<div class="value" style="width: 120px">{{ populationInfo.socialSecurity }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">健康状况</label>
|
||||
<div class="value">{{ populationInfo.healthStatus }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row" justify="space-between">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">就业状态</label>
|
||||
<div class="value">{{ populationInfo.departmentType }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">工作单位</label>
|
||||
<div class="value">{{ populationInfo.department }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">工作职务</label>
|
||||
<div class="value">{{ populationInfo.pastion }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row" justify="space-between">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">专业技术职称</label>
|
||||
<div class="value">{{ populationInfo.pastionTitle }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">专长</label>
|
||||
<div class="value">{{ populationInfo.expertise }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">联系电话</label>
|
||||
<div class="value" style="width: 120px">{{ populationInfo.phone }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row" justify="space-between">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">户籍地址</label>
|
||||
<div class="value" style="width: 530px">{{ populationInfo.domicileAddress }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row" justify="space-between">
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">流动日期</label>
|
||||
<div class="value">{{ populationInfo.flowTime }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">流动原因</label>
|
||||
<div class="value" style="width: 120px">{{ populationInfo.flowReason }}</div>
|
||||
</n-space>
|
||||
<n-space class="item" align="center">
|
||||
<label class="name">流动其他原因</label>
|
||||
<div class="value" style="width: 120px">{{ populationInfo.flowReasontext }}</div>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<n-space class="row" justify="space-between">
|
||||
<n-space class="parents" vertical>
|
||||
<div class="card father">
|
||||
<div class="title">父亲</div>
|
||||
<div class="content">
|
||||
<div class="name">姓名：{{ populationInfo.fatherName }}</div>
|
||||
<div class="id-card">身份证：{{ populationInfo.fatherIdcard }}</div>
|
||||
<div class="phone">联系电话：{{ populationInfo.fatherPhone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mother">
|
||||
<div class="title">母亲</div>
|
||||
<div class="content">
|
||||
<div class="name">姓名：{{ populationInfo.motherName }}</div>
|
||||
<div class="id-card">身份证：{{ populationInfo.motherIdcard }}</div>
|
||||
<div class="phone">联系电话：{{ populationInfo.motherPhone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-space>
|
||||
<div class="relationship"></div>
|
||||
</n-space>
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width="15%" />
|
||||
<col />
|
||||
<col width="15%" />
|
||||
<col />
|
||||
<col width="15%" />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label>姓名</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.name ? populationInfo.name : '无' }}</div>
|
||||
</td>
|
||||
<td><label>证件类型</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.idcardType ? populationInfo.idcardType : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>证件号码</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.idcard ? populationInfo.idcard : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>性别</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.sex ? populationInfo.sex : '无' }}</div>
|
||||
</td>
|
||||
<td><label>民族</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.nation ? populationInfo.nation : '无' }}</div>
|
||||
</td>
|
||||
<td><label>文化程度</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.education ? populationInfo.education : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6">
|
||||
<div class="tags">
|
||||
<span class="green" v-if="populationTag.isNormal">正常</span>
|
||||
<span class="green" v-if="populationTag.isMilitary === '是'">军人</span>
|
||||
<span class="red" v-if="populationTag.isParty === '是'">党员</span>
|
||||
<span class="yellow" v-if="populationTag.isCorrect === '是'">社区矫正</span>
|
||||
<span class="yellow" v-if="populationTag.isRelease === '是'">刑满释放</span>
|
||||
<span class="grey" v-if="populationTag.isDispute === '是'">矛盾纠纷</span>
|
||||
<span class="grey" v-if="populationTag.isSecurity === '是'">社会治安</span>
|
||||
<span class="grey" v-if="populationTag.isDrug === '是'">吸毒人员</span>
|
||||
<span class="grey" v-if="populationTag.isCult === '是'">涉邪人员</span>
|
||||
<span class="grey" v-if="populationTag.isPetition === '是'">重点上访户</span>
|
||||
<span class="red" v-if="populationTag.isSeriousIllness === '是'">重病</span>
|
||||
<span class="orange" v-if="populationTag.isOldage === '是'">老年人</span>
|
||||
<span class="blue" v-if="populationTag.isMinority === '是'">未成年</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6"><label>就读院校及专业（需注明学历）</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6">
|
||||
<div class="value">{{ populationInfo.description ? populationInfo.description : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>所属党派</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.organization ? populationInfo.organization : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>宗教信仰</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.religion ? populationInfo.religion : '无' }}</div>
|
||||
</td>
|
||||
<td><label>婚姻状况</label></td>
|
||||
<td>
|
||||
<div class="value">
|
||||
{{ populationInfo.marriageStatus ? populationInfo.marriageStatus : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>婚变日期</label></td>
|
||||
<td>
|
||||
<div class="value">
|
||||
{{ populationInfo.marriageChangeTime ? populationInfo.marriageChangeTime : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>初婚日期</label></td>
|
||||
<td>
|
||||
<div class="value">
|
||||
{{ populationInfo.marriageFirstTime ? populationInfo.marriageFirstTime : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>社会保险情况</label></td>
|
||||
<td>
|
||||
<div class="value">
|
||||
{{ populationInfo.socialSecurity ? populationInfo.socialSecurity : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>健康状况</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.healthStatus ? populationInfo.healthStatus : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>就业状态</label></td>
|
||||
<td>
|
||||
<div class="value">
|
||||
{{ populationInfo.departmentType ? populationInfo.departmentType : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>工作单位</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.department ? populationInfo.department : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>工作职务</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.pastion ? populationInfo.pastion : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>专业技术职称</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.pastionTitle ? populationInfo.pastionTitle : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>专长</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.expertise ? populationInfo.expertise : '无' }}</div>
|
||||
</td>
|
||||
<td><label>联系电话</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.phone ? populationInfo.phone : '无' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>户籍地址</label></td>
|
||||
<td colspan="5">
|
||||
<div class="value">
|
||||
{{ populationInfo.domicileAddress ? populationInfo.domicileAddress : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>流动日期</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.flowTime ? populationInfo.flowTime : '无' }}</div>
|
||||
</td>
|
||||
<td><label>流动原因</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.flowReason ? populationInfo.flowReason : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>流动其他原因</label></td>
|
||||
<td>
|
||||
<div class="value">
|
||||
{{ populationInfo.flowReasontext ? populationInfo.flowReasontext : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6"><label>家庭信息</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>父亲姓名</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.fatherName ? populationInfo.fatherName : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>联系电话</label></td>
|
||||
<td>
|
||||
<div class="value">
|
||||
{{ populationInfo.flowReasontext ? populationInfo.flowReasontext : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>身份证</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.fatherIdcard ? populationInfo.fatherIdcard : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>母亲姓名</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.motherName ? populationInfo.motherName : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>联系电话</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.motherPhone ? populationInfo.motherPhone : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
<td><label>身份证</label></td>
|
||||
<td>
|
||||
<div class="value">{{ populationInfo.motherIdcard ? populationInfo.motherIdcard : '无' }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6"><label>关系图</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="6">
|
||||
<div class="relationship" id="relationship" style="width: 100%; height: 300px"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</n-spin>
|
||||
<n-spin :show="isHouseLoading" stroke="#FFFFFF">
|
||||
@ -154,11 +235,11 @@
|
||||
<div class="list" v-if="houseList.length > 0">
|
||||
<div class="card" v-for="house in houseList" :key="house.houseId"
|
||||
@click="onHouseClick(house.houseId)">
|
||||
<div>所在社区：{{ house.communityName }}</div>
|
||||
<div>所在小区/组：{{ house.residentialName }}</div>
|
||||
<div>楼/排名称：{{ house.buildingName }}</div>
|
||||
<div>所在单元/列：{{ house.affiliationUnit }}</div>
|
||||
<div>门牌号：{{ house.houseNum }}</div>
|
||||
<div class="line"><img :src="svgs.a"/><span>所在社区：</span>{{ house.communityName }}</div>
|
||||
<div class="line"><img :src="svgs.b"/><span>所在小区/组：</span>{{ house.residentialName }}</div>
|
||||
<div class="line"><img :src="svgs.c"/><span>楼/排名称：</span>{{ house.buildingName }}</div>
|
||||
<div class="line"><img :src="svgs.d"/><span>所在单元/列：</span>{{ house.affiliationUnit }}</div>
|
||||
<div class="line"><img :src="svgs.e"/><span>门牌号：</span>{{ house.houseNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -169,25 +250,62 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, inject } from 'vue';
|
||||
import { onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { NSpace, NSpin } from 'naive-ui';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { ArrowStepBack16Filled } from '@vicons/fluent';
|
||||
import { Icon } from '@vicons/utils';
|
||||
|
||||
const message = useMessage();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const query = route.query;
|
||||
const axios = inject('axios');
|
||||
const echarts = inject('echarts');
|
||||
|
||||
const svgs = {
|
||||
'a': '/assets/svgs/fa-building.svg',
|
||||
'b': '/assets/svgs/fa-hospital.svg',
|
||||
'c': '/assets/svgs/iconPark-shopping-mall.svg',
|
||||
'd': '/assets/svgs/md-domain.svg',
|
||||
'e': '/assets/svgs/riLine-building-3-line.svg',
|
||||
}
|
||||
|
||||
const populationTag = reactive({});
|
||||
const populationInfo = reactive({});
|
||||
const houseList = reactive([]);
|
||||
const isInfoLoading = ref(false);
|
||||
const isHouseLoading = ref(false);
|
||||
const isRelationshipLoading = ref(false);
|
||||
|
||||
const initPopulationInfo = () => {
|
||||
isInfoLoading.value = true;
|
||||
axios.get(`/api/populationinfo/get/${query.populationInfoId}`, {}).then(res => {
|
||||
let data = res.data;
|
||||
axios.get(`/api/populationinfo/get-info/${query.populationInfoId}`, {}).then(res => {
|
||||
populationTag.isNormal = (
|
||||
res.data.base.isCorrect === '否' &&
|
||||
res.data.base.isRelease === '否' &&
|
||||
res.data.base.isDispute === '否' &&
|
||||
res.data.base.isSecurity === '否' &&
|
||||
res.data.base.isDrug === '否' &&
|
||||
res.data.base.isCult === '否' &&
|
||||
res.data.base.isPetition === '否'
|
||||
)
|
||||
populationTag.isCorrect = res.data.base.isCorrect;
|
||||
populationTag.isRelease = res.data.base.isRelease;
|
||||
populationTag.isDispute = res.data.base.isDispute;
|
||||
populationTag.isSecurity = res.data.base.isSecurity;
|
||||
populationTag.isDrug = res.data.base.isDrug;
|
||||
populationTag.isCult = res.data.base.isCult;
|
||||
populationTag.isPetition = res.data.base.isPetition;
|
||||
populationTag.isSeriousIllness = res.data.base.isSeriousIllness;
|
||||
populationTag.isOldage = res.data.base.isOldage;
|
||||
populationTag.isMinority = res.data.base.isMinority;
|
||||
populationTag.isMilitary = res.data.base.isMilitary;
|
||||
populationTag.isParty = res.data.base.isParty;
|
||||
|
||||
let data = res.data.data;
|
||||
populationInfo.name = data.name;
|
||||
populationInfo.idcardType = data.idcardType;
|
||||
populationInfo.idcard = data.idcard;
|
||||
@ -196,6 +314,7 @@ const initPopulationInfo = () => {
|
||||
populationInfo.education = data.education;
|
||||
populationInfo.organization = data.organization;
|
||||
populationInfo.religion = data.religion;
|
||||
populationInfo.description = data.description;
|
||||
populationInfo.marriageStatus = data.marriageStatus;
|
||||
populationInfo.marriageChangeTime = data.marriageChangeTime;
|
||||
populationInfo.marriageFirstTime = data.marriageFirstTime;
|
||||
@ -221,6 +340,7 @@ const initPopulationInfo = () => {
|
||||
populationInfo.motherIdcard = data.motherIdcard;
|
||||
}).catch(res => {
|
||||
console.error(res);
|
||||
message.error(res.response.data)
|
||||
}).finally(() => {
|
||||
isInfoLoading.value = false;
|
||||
})
|
||||
@ -238,6 +358,79 @@ const initHouseList = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const initRelationship = () => {
|
||||
isRelationshipLoading.value = true;
|
||||
let chartDom = document.getElementById('relationship');
|
||||
let chartDomWidth = chartDom.offsetWidth;
|
||||
let chartDomHeight = chartDom.offsetHeight;
|
||||
let centerX = chartDomWidth / 2;
|
||||
let cneterY = chartDomHeight / 2;
|
||||
let chart = echarts.init(chartDom);
|
||||
axios.get(`/api/populationinfo/get-relation/${query.populationInfoId}`, {}).then(res => {
|
||||
let data = res.data;
|
||||
let dataArray = [];
|
||||
let linkArray = [];
|
||||
let radius = 150;
|
||||
let radian = 2 * Math.PI / (data.length - 1);
|
||||
data.forEach((item, index) => {
|
||||
dataArray.push({
|
||||
name: item.target,
|
||||
symbolSize: index === 0 ? 50 : 30,
|
||||
x: index === 0 ? centerX : centerX + Math.sin(index * radian) * radius,
|
||||
y: index === 0 ? cneterY : cneterY + Math.cos(index * radian) * radius,
|
||||
itemStyle: {
|
||||
color: index === 0 ? 'rgb(180, 253, 255)' : 'rgb(64, 149, 229)'
|
||||
}
|
||||
});
|
||||
linkArray.push({
|
||||
source: item.source,
|
||||
target: item.target,
|
||||
});
|
||||
})
|
||||
|
||||
chart.setOption({
|
||||
tooltip: {},
|
||||
legend: [],
|
||||
animationDuration: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
series: [
|
||||
{
|
||||
name: '家庭关系图',
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
data: dataArray,
|
||||
links: linkArray,
|
||||
categories: [{
|
||||
name: 'n1'
|
||||
}, {
|
||||
name: 'n2'
|
||||
}],
|
||||
roam: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: '{b}'
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'yellow',
|
||||
curveness: 0.3
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'adjacency',
|
||||
lineStyle: {
|
||||
width: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}).catch(res => {
|
||||
console.error(res);
|
||||
}).finally(() => {
|
||||
isRelationshipLoading.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
const onGoBackClick = () => {
|
||||
router.go(-1);
|
||||
}
|
||||
@ -254,6 +447,10 @@ const onHouseClick = (houseId) => {
|
||||
initPopulationInfo();
|
||||
initHouseList();
|
||||
|
||||
onMounted(() => {
|
||||
initRelationship();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@ -261,6 +458,7 @@ initHouseList();
|
||||
--var-left-width 600px
|
||||
--var-right-width 230px
|
||||
--var-parents-width 200px
|
||||
padding-bottom 10px
|
||||
.top
|
||||
padding 10px 0
|
||||
font-weight bold
|
||||
@ -274,52 +472,48 @@ initHouseList();
|
||||
justify-content space-between
|
||||
.left
|
||||
width var(--var-left-width)
|
||||
.row
|
||||
margin-bottom 10px
|
||||
.item
|
||||
font-size 12px
|
||||
.name
|
||||
table
|
||||
width 100%
|
||||
border-collapse collapse
|
||||
font-size 12px
|
||||
td
|
||||
border 1px solid rgba(255,255,255,0.25)
|
||||
padding 4px
|
||||
label
|
||||
font-weight bold
|
||||
width 100%
|
||||
display inline-block
|
||||
text-align center
|
||||
color rgb(147,210,243)
|
||||
.value
|
||||
width 70px
|
||||
height 20px
|
||||
line-height 20px
|
||||
font-weight 400
|
||||
padding 5px
|
||||
color #B7B9BB
|
||||
background-color rgba(239, 239, 239, 0.1)
|
||||
min-width 60px
|
||||
min-height 20px
|
||||
text-align center
|
||||
.tags
|
||||
color #FFFFFF
|
||||
display -webkit-box
|
||||
-webkit-box-orient vertical
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
white-space nowrap
|
||||
.text
|
||||
font-size 12px
|
||||
.name
|
||||
font-weight bold
|
||||
.value
|
||||
width var(--var-left-width)
|
||||
min-height 100px
|
||||
line-height 20px
|
||||
min-width 100px
|
||||
padding 5px
|
||||
color #B7B9BB
|
||||
background-color rgba(239, 239, 239, 0.1)
|
||||
box-sizing border-box
|
||||
.parents
|
||||
font-size 12px
|
||||
width var(--var-parents-width)
|
||||
.card
|
||||
.title
|
||||
text-align center
|
||||
padding 2px
|
||||
.content
|
||||
background-color rgba(239, 239, 239, 0.1)
|
||||
padding 6px
|
||||
.father
|
||||
.title
|
||||
background-color #4095E5
|
||||
.mother
|
||||
.title
|
||||
background-color #E26B60
|
||||
-webkit-line-clamp 2
|
||||
span
|
||||
display inline-block
|
||||
margin-right 2px
|
||||
background-color red
|
||||
padding 1px 8px
|
||||
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
|
||||
.relationship
|
||||
width calc(var(--var-left-width) - var(--var-parents-width) - 15px)
|
||||
height 100%
|
||||
@ -332,13 +526,30 @@ initHouseList();
|
||||
padding 10px
|
||||
.list
|
||||
margin-top 10px
|
||||
max-height 533px
|
||||
overflow auto
|
||||
padding 5px 5px 180px 5px
|
||||
background-color rgba(239, 239, 239, 0.1)
|
||||
padding 10px
|
||||
background-image url(/assets/images/population-house-bg.png)
|
||||
background-size 100%
|
||||
background-repeat no-repeat
|
||||
background-position bottom
|
||||
.card
|
||||
background-color rgba(255, 255, 255, 0.25)
|
||||
padding 5px
|
||||
margin-bottom 5px
|
||||
border-bottom 1px solid rgba(255, 255, 255, 0.5)
|
||||
cursor pointer
|
||||
.line
|
||||
display flex
|
||||
align-items center
|
||||
margin-bottom 5px
|
||||
img
|
||||
width 15px
|
||||
height 15px
|
||||
margin-right 2px
|
||||
span
|
||||
color #93D2F3
|
||||
&:last-child
|
||||
margin-bottom 0
|
||||
border-bottom none
|
||||
</style>
|
||||
@ -95,10 +95,13 @@
|
||||
import { ref, reactive, inject } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { NSpace, NInput, NGrid, NGridItem, NImage, NModal, NSpin } from 'naive-ui';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import { Search24Filled } from '@vicons/fluent';
|
||||
import { Icon } from '@vicons/utils';
|
||||
import Pager from '../pager/Pager.vue';
|
||||
|
||||
const message = useMessage();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const axios = inject('axios');
|
||||
@ -125,8 +128,9 @@ const init = () => {
|
||||
dataRows.splice(0, dataRows.length);
|
||||
dataRows.push(...data.rows);
|
||||
pagerUpdateIndex.value++;
|
||||
}).catch(resp => {
|
||||
console.error(resp)
|
||||
}).catch(res => {
|
||||
console.error(res)
|
||||
message.error(res.response.data)
|
||||
}).finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<span class="name">{{ data.populationInfoBaseDTO.name }}</span>
|
||||
<span class="sex"
|
||||
:class="{ female: data.populationInfoBaseDTO.sex === '女性' }">{{ data.populationInfoBaseDTO.sex }}</span>
|
||||
<span class="age">17</span>
|
||||
<span class="age" v-if="data.populationInfoBaseDTO.age > 0">{{ data.populationInfoBaseDTO.age }}</span>
|
||||
<span class="id-card">
|
||||
<span class="type">{{ data.populationInfoBaseDTO.idcardType }}</span>
|
||||
<span class="num">{{ data.populationInfoBaseDTO.idcard }}</span>
|
||||
@ -38,6 +38,9 @@
|
||||
<span class="education">{{ data.populationInfoBaseDTO.education }}</span>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span class="green" v-if="data.populationInfoBaseDTO.isNormal">正常</span>
|
||||
<span class="green" v-if="data.populationInfoBaseDTO.isMilitary === '是'">军人</span>
|
||||
<span class="red" v-if="data.populationInfoBaseDTO.isParty === '是'">党员</span>
|
||||
<span class="yellow"
|
||||
v-if="data.populationInfoBaseDTO.isCorrect === '是'">社区矫正</span>
|
||||
<span class="yellow"
|
||||
@ -58,7 +61,7 @@
|
||||
v-if="data.populationInfoBaseDTO.isOldage === '是'">老年人</span>
|
||||
<span class="blue"
|
||||
v-if="data.populationInfoBaseDTO.isMinority === '是'">未成年</span>
|
||||
<span class="green" v-if="data.populationInfoBaseDTO.isNormal">正常</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -114,8 +117,11 @@
|
||||
import { ref, reactive, inject } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { NSpace, NInput, NGrid, NGridItem, NImage, NSpin } from 'naive-ui';
|
||||
import { useMessage } from 'naive-ui';
|
||||
import Pager from '../pager/Pager.vue'
|
||||
|
||||
const message = useMessage();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const axios = inject('axios');
|
||||
@ -141,7 +147,7 @@ const init = () => {
|
||||
total.value = data.total;
|
||||
dataRows.splice(0, dataRows.length);
|
||||
data.rows.forEach(item => {
|
||||
item.isNormal = (
|
||||
item.populationInfoBaseDTO.isNormal = (
|
||||
item.populationInfoBaseDTO.isCorrect === '否' &&
|
||||
item.populationInfoBaseDTO.isRelease === '否' &&
|
||||
item.populationInfoBaseDTO.isDispute === '否' &&
|
||||
@ -153,7 +159,9 @@ const init = () => {
|
||||
dataRows.push(item);
|
||||
});
|
||||
pagerUpdateIndex.value++;
|
||||
}).catch(resp => {
|
||||
}).catch(res => {
|
||||
console.error(res)
|
||||
message.error(res.response.data)
|
||||
}).finally(() => {
|
||||
isLoading.value = false;
|
||||
});
|
||||
@ -172,6 +180,10 @@ const onReseachClick = () => {
|
||||
}
|
||||
|
||||
const onPopulationClick = (populationInfoId) => {
|
||||
if(!populationInfoId) {
|
||||
message.error('该人员信息不在人口管理中，无法查看详情')
|
||||
return;
|
||||
}
|
||||
router.push({
|
||||
path: 'population-info',
|
||||
query: {
|
||||
@ -253,6 +265,7 @@ init();
|
||||
overflow hidden
|
||||
-webkit-line-clamp 2
|
||||
span
|
||||
display inline-block
|
||||
margin-right 3px
|
||||
background-color red
|
||||
padding 1px 10px
|
||||
|
||||
@ -130,13 +130,15 @@ const onPageJumpConfirmClick = () => {
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
font-size 14px
|
||||
min-width 840px
|
||||
font-size 12px
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
user-select none
|
||||
.btn
|
||||
height 26px
|
||||
line-height 26px
|
||||
height 20px
|
||||
line-height 20px
|
||||
display inline-block
|
||||
padding 0 10px
|
||||
border-radius 5px
|
||||
@ -152,7 +154,7 @@ const onPageJumpConfirmClick = () => {
|
||||
justify-content center
|
||||
align-items center
|
||||
font-size 18px
|
||||
min-width 30px
|
||||
min-width 18px
|
||||
border 1px solid #FFFFFF
|
||||
.jump
|
||||
padding 0 5px
|
||||
@ -162,10 +164,10 @@ const onPageJumpConfirmClick = () => {
|
||||
margin 0 3px
|
||||
width 60px
|
||||
.n-button
|
||||
height 28px
|
||||
height 22px
|
||||
color #FFFFFF
|
||||
margin-left 5px
|
||||
.n-select
|
||||
width 120px
|
||||
width 100px
|
||||
margin 0 2px
|
||||
</style>
|
||||
@ -3,6 +3,7 @@ import {router} from './route/route'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import axios from 'axios';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const createAxios = {
|
||||
install(app, options) {
|
||||
@ -14,7 +15,14 @@ const createAxios = {
|
||||
}
|
||||
}
|
||||
|
||||
const createEcharts = {
|
||||
install(app, options) {
|
||||
app.provide('echarts', echarts);
|
||||
}
|
||||
}
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(router);
|
||||
app.use(createAxios);
|
||||
app.use(createEcharts);
|
||||
app.mount('#app');
|
||||
|
||||
@ -5,6 +5,7 @@ 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';
|
||||
import Index from '../components/Index.vue';
|
||||
|
||||
const routes = [{
|
||||
name: '以人找房搜索',
|
||||
@ -30,6 +31,10 @@ const routes = [{
|
||||
name: '房屋详情',
|
||||
path: '/house-info',
|
||||
component: HouseInfo
|
||||
}, {
|
||||
name: '首页',
|
||||
path: '/',
|
||||
component: Index
|
||||
}]
|
||||
|
||||
export const router = createRouter({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user