宅基地辅助审批页面&都市申报绘制位置

src/router/index.js

@@ -10,6 +10,12 @@ const router = createRouter({
       component: HomeView,
       redirect: '/my-home',
       children: [
+        {
+          path: '/home_subapprove',
+          name: 'HomeSubApprove',
+          component: () => import('../views/zjdfzsp/HomeSubApprove/Index.vue'),/*todo*/
+          meta: { menuId: '2-1' },
+        },
         {
           path: '/project_declare',
           name: 'ProjectDeclare',

src/views/home/HomeView.vue

@@ -64,7 +64,7 @@ import {handleMenuD} from "@/utils/handleMenuD";
 
 /* onMounted(() => {
   GetUserInfo().then(res => {
-    
+
   })
 }) */
 
@@ -90,7 +90,7 @@ const menuList = ref([
     name: '宅基地辅助审批',
     icon: getAssetsFile('home/menu-zjd.png'),
     children: [
-      { menuId: '2-1', name: '宅基地辅助审批' }
+      { menuId: '2-1', name: '宅基地辅助审批',route:'HomeSubApprove' },
     ]
   },
   {
@@ -185,7 +185,7 @@ function handleToDisplaySys() {
   height: 100vh;
   width: 100vw;
   background-color: rgba(240, 241, 247, 1);
-  
+
   .header {
     position: absolute;
     top: 0;
@@ -200,7 +200,7 @@ function handleToDisplaySys() {
     background: var(--color-1);
     z-index: 1;
     user-select: none;
-    
+
     .head-pic {
       width: 33px;
       height: 33px;

src/views/xmfzsb/projectDeclare/DrawMap.vue

@@ -3,13 +3,13 @@
     <div id="draw_map">
       <iframe id="i_map" name="i_map" frameborder="0"></iframe>
       <span v-if="!props.showOnly" class="draw-result shadow-box">面积：{{ resArea }} 亩</span>
-      <!-- <div class="current-layer shadow-box">
+      <div class="current-layer shadow-box">
         <div class="detail-sub-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>
+              <i class="btn" :class="item.isHide?'btn-dqtc-hide':'btn-dqtc-show'" @click="addLayer(params.layer,params.visible,params.opacity)"></i>
               <el-slider v-model="item.opacity" :min="1"></el-slider>
             </div>
           </li>
@@ -32,6 +32,38 @@ import { ref, reactive, computed, nextTick, watch } from 'vue'
 import { getAssetsFile } from '../../../utils/require'
 import CityGis from "../../../utils/map/CityGis.Bridge";
 
+function addLayer(layer,visible=true,opacity=100) {
+  let type = 'feature'
+  let token_type = ''
+  if(layer.url.startsWith('http://10.121.226.95')) {
+    type = 'shc_map'
+    token_type = 'token_nw'
+  } else if(layer.url.startsWith('http://smiserver.gtj.sh.cegn.cn')) {
+    type = 'shc_map'
+    token_type = 'token_smi'
+  }
+  if(layer.type) {
+    type = layer.type
+  }
+  let params = {
+    ActionName: "AddLayer",
+    Parameters: {
+      id: layer.id,
+      title: layer.title,
+      visible,
+      opacity,
+      url: layer.url,
+      type,
+      token_type
+    },
+  };
+  if(layer.sublayers) {
+    params.Parameters['sublayers'] = layer.sublayers
+  }
+  console.log('添加图层---',params)
+  bridge.Invoke(params);
+}
+
 const props = defineProps({
   modelValue: Boolean,
   geoData: {
@@ -61,11 +93,60 @@ const toolsList = ref([
 	{ id: 'download', picUrl: getAssetsFile('0531/tool-download.png') }
 ])
 
-// const listChecked = reactive({value: [
-// 	{ id: 1, name: '农用地', isHide: false, opacity: 50 },
-// 	{ id: 2, name: '永久农田', isHide: true, opacity: 50 },
-// 	{ id: 3, name: '三区划定', isHide: true, opacity: 50 }
-// ]})
+const listChecked = reactive({value: [
+    {
+      name: '2022年',
+      layer: 3,
+      id: 'hwyx2022',
+      title: 'hwyx2022',
+      url: 'http://smiserver.gtj.sh.cegn.cn/OneMapServer/rest/services/air_2022_3857/MapServer',
+      type: 'tile',
+      visible: true,
+      opacity: 100
+
+    },
+    {
+      name: '2021年',
+      layer: 3,
+      id: 'hwyx2021',
+      title: 'hwyx2021',
+      url: 'http://smiserver.gtj.sh.cegn.cn/OneMapServer/rest/services/air_2021_3857/MapServer',
+      type: 'tile',
+      visible: true,
+      opacity: 100
+    },
+    {
+      name: '2020年',
+      layer: 3,
+      id: 'hwyx2020',
+      title: 'hwyx2020',
+      url: 'http://smiserver.gtj.sh.cegn.cn/OneMapServer/rest/services/air_2020_3857/MapServer',
+      type: 'tile',
+      visible: true,
+      opacity: 100
+    },
+    {
+      name: '2019年',
+      layer: 3,
+      id: 'hwyx2019',
+      title: 'hwyx2019',
+      url: 'http://smiserver.gtj.sh.cegn.cn/OneMapServer/rest/services/air_2019_3857/MapServer',
+      type: 'tile',
+      visible: true,
+      opacity: 100
+    },
+    {
+      name: '2018年',
+      layer: 3,
+      id: 'hwyx2018',
+      title: 'hwyx2018',
+      url: 'http://smiserver.gtj.sh.cegn.cn/OneMapServer/rest/services/air_2018_3857/MapServer',
+      type: 'tile',
+      visible: true,
+      opacity: 100
+
+    }
+]})
 
 const resArea = ref(0)
 
@@ -108,7 +189,7 @@ function createMap() {
           resData.coordinates = arg.data.geometry.rings
           break
       }
-      
+
     })
   })
 }
@@ -259,4 +340,4 @@ function handleSave() {
     margin: 0;
   }
 }
-</style>
+</style>

src/views/zjdfzsp/HomeSubApprove/Index.vue

@@ -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>
+