|
@@ -0,0 +1,197 @@
|
|
|
+<template>
|
|
|
+ <div id="zjdfzsp">
|
|
|
+ <el-card class="box1">
|
|
|
+ <div class="pos-card-title">宅基地分析</div>
|
|
|
+ <div class="box-sub-title" style="margin-bottom: 10px;">宅基地分布情况</div>
|
|
|
+ <el-select style="width: 45%;" placeholder="全部街" clearable>
|
|
|
+ <el-option></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select style="width: 45%;" placeholder="全部村" clearable>
|
|
|
+ <el-option></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-table :data="tableData1.value" class="table-default" stripe>
|
|
|
+ <el-table-column label="村名" min-width="60" prop="villageName" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="所属街镇" min-width="80" prop="villages" show-overflow-tooltip />
|
|
|
+ <el-table-column label="宅基地面积(km2)" min-width="80" prop="homeArea" show-overflow-tooltip />
|
|
|
+ <el-table-column label="宅基地数量(个)" min-width="80" prop="homeNum" show-overflow-tooltip />
|
|
|
+ <el-table-column label="人口数量(万)" min-width="80" prop="population" show-overflow-tooltip />
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box2">
|
|
|
+ <div class="pos-card-title">详细信息</div>
|
|
|
+ <div class="box-sub-title" style="margin-bottom: 10px;">土地信息</div>
|
|
|
+
|
|
|
+ <div class="box-sub-title" style="margin-bottom: 10px;">建设主体</div>
|
|
|
+
|
|
|
+ <div class="box-sub-title" style="margin-bottom: 10px;">人员信息</div>
|
|
|
+ <el-table :data="tableData2.value" class="table-default" stripe>
|
|
|
+ <el-table-column label="#" min-width="37" prop="index" show-overflow-tooltip />
|
|
|
+ <el-table-column label="姓名" min-width="80" prop="name" show-overflow-tooltip />
|
|
|
+ <el-table-column label="与户主关系" min-width="80" prop="relOfHousehold" show-overflow-tooltip />
|
|
|
+ <el-table-column label="身份证号" min-width="150" prop="idNum" show-overflow-tooltip />
|
|
|
+ <el-table-column label="户口所在地" min-width="85" prop="accAdd" show-overflow-tooltip />
|
|
|
+ <el-table-column label="户口类型" min-width="80" prop="accType" show-overflow-tooltip />
|
|
|
+ <el-table-column label="集体经济组织成员" min-width="80" prop="memberOfColl" show-overflow-tooltip />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box3">
|
|
|
+ <div class="pos-card-title">当前图层</div>
|
|
|
+ <ul>
|
|
|
+ <li v-for="item in listChecked.value" :key="item.id">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <div>
|
|
|
+ <i class="btn" :class="item.isHide?'btn-dqtc-hide':'btn-dqtc-show'"></i>
|
|
|
+ <el-slider v-model="item.opacity" :min="1"></el-slider>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box4">
|
|
|
+ <div class="pos-card-title">地名地址/身份证检索</div>
|
|
|
+ <div>
|
|
|
+ <el-input style="width: 40%" placeholder="请输入地址" clearable/>
|
|
|
+ <el-button type="primary" class="btn-default">查询</el-button>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box5">
|
|
|
+ <div class="pos-card-title">地名地址/身份证检索</div>
|
|
|
+ <div>
|
|
|
+ <el-input style="width: 37%" placeholder="请输入姓名" clearable/>
|
|
|
+ <el-input style="width: 50%" placeholder="请输入身份证号" clearable/>
|
|
|
+ <el-button type="primary" class="btn-default">查询</el-button>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import { reactive} from 'vue';
|
|
|
+ import { select_test } from '../../../utils/data/select-data'
|
|
|
+
|
|
|
+ const listChecked = reactive({value: [
|
|
|
+ { id: 1, name: '宅基地', isHide: false, opacity: 50 },
|
|
|
+ { id: 2, name: '集体建设用地', isHide: false, opacity: 50 },
|
|
|
+ { id: 3, name: '三调农用地', isHide: false, opacity: 50 },
|
|
|
+ { id: 4, name: '疑似违法用地', isHide: true, opacity: 50 },
|
|
|
+ ]})
|
|
|
+
|
|
|
+ const tableData1 = reactive({
|
|
|
+ value: [
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ { villageName: '马桥', villages: '城桥镇', homeArea: '1231', homeNum: '1231', population: '1231'},
|
|
|
+ ]
|
|
|
+ })
|
|
|
+
|
|
|
+ const tableData2 = reactive({
|
|
|
+ value: [
|
|
|
+ {index: '1'},
|
|
|
+ {index: '2'},
|
|
|
+ {index: '3'},
|
|
|
+ ]
|
|
|
+ })
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='scss' scoped>
|
|
|
+ .box1 {
|
|
|
+ width: 400px;
|
|
|
+ height: 1000px;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ .box2 {
|
|
|
+ position: absolute;
|
|
|
+ width: 600px;
|
|
|
+ height: 540px;
|
|
|
+ top: 10px;
|
|
|
+ left: 450px;
|
|
|
+ }
|
|
|
+ .box3 {
|
|
|
+ position: absolute;
|
|
|
+ width: 300px;
|
|
|
+ height: 250px;
|
|
|
+ top: 10px;
|
|
|
+ left: 1100px;
|
|
|
+ ul{
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ &>span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--color-text-2);
|
|
|
+ }
|
|
|
+ &>div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .btn {
|
|
|
+ display: inline-block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .btn-dqtc-show {
|
|
|
+ background: url('../../../assets/imgs/0531/visible.png');
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ .btn-dqtc-hide {
|
|
|
+ background: url('../../../assets/imgs/0531/invisible.png');
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ .el-slider {
|
|
|
+ width: 60px;
|
|
|
+ :deep(.el-slider__button) {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box4 {
|
|
|
+ position: absolute;
|
|
|
+ width: 350px;
|
|
|
+ height: 250px;
|
|
|
+ top: 280px;
|
|
|
+ left: 1100px;
|
|
|
+ }
|
|
|
+ .box5 {
|
|
|
+ position: absolute;
|
|
|
+ width: 350px;
|
|
|
+ height: 250px;
|
|
|
+ top: 560px;
|
|
|
+ left: 1100px;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
|
|
+
|