调用高德API接口

.env.development

@@ -7,4 +7,4 @@ VITE_NAME='全局环境'
 VITE_BASE_URL='http://127.0.0.1:8080/pp/'
 
 # OA系统地址
-VITE_OA_URL='http://127.0.0.1:9518/'
+VITE_OA_URL='http://127.0.0.1:9518/'

.env.production

@@ -5,4 +5,4 @@ VITE_NAME='全局环境'
 VITE_BASE_URL='http://doc.scdayou.com/pp/'
 
 # OA系统地址
-VITE_OA_URL='http://mbs.scdayou.com/admin/'
+VITE_OA_URL='http://mbs.scdayou.com/admin/'

package-lock.json

@@ -8,11 +8,12 @@
       "name": "productivity-platform-web",
       "version": "0.0.0",
       "dependencies": {
+        "@amap/amap-jsapi-loader": "^1.0.1",
         "@element-plus/icons-vue": "^2.3.1",
         "axios": "^1.7.7",
         "element-plus": "^2.8.5",
         "js-cookie": "^3.0.5",
-        "js-pageoffice": "6.3.2",
+        "js-pageoffice": "6.3.1",
         "pinia": "^2.2.4",
         "pinia-plugin-persistedstate": "^4.1.1",
         "unplugin-auto-import": "^0.18.3",
@@ -29,6 +30,11 @@
         "vite": "^5.4.8"
       }
     },
+    "node_modules/@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -2681,9 +2687,9 @@
       }
     },
     "node_modules/js-pageoffice": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmmirror.com/js-pageoffice/-/js-pageoffice-6.3.2.tgz",
-      "integrity": "sha512-YiCPnVUHuLg7edG0wYb1fAFgpNxTArA5MraBUFJUf6CiKiPY5a2AwOJUzeRmtlcPCYkHc2c6AFxGBwSSqd14BQ=="
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/js-pageoffice/-/js-pageoffice-6.3.1.tgz",
+      "integrity": "sha512-m2ZWQzgQmaoVhm6O9DZPY6hkFjMQ+YA3aUgg0vYuY+JV3seQJC526Q7mqL1O0Lp1eG4kCD9TvpyOmr5KsjleKg=="
     },
     "node_modules/js-tokens": {
       "version": "9.0.0",
@@ -4201,6 +4207,11 @@
     }
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -5993,9 +6004,9 @@
       "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="
     },
     "js-pageoffice": {
-      "version": "6.3.2",
-      "resolved": "https://registry.npmmirror.com/js-pageoffice/-/js-pageoffice-6.3.2.tgz",
-      "integrity": "sha512-YiCPnVUHuLg7edG0wYb1fAFgpNxTArA5MraBUFJUf6CiKiPY5a2AwOJUzeRmtlcPCYkHc2c6AFxGBwSSqd14BQ=="
+      "version": "6.3.1",
+      "resolved": "https://registry.npmmirror.com/js-pageoffice/-/js-pageoffice-6.3.1.tgz",
+      "integrity": "sha512-m2ZWQzgQmaoVhm6O9DZPY6hkFjMQ+YA3aUgg0vYuY+JV3seQJC526Q7mqL1O0Lp1eG4kCD9TvpyOmr5KsjleKg=="
     },
     "js-tokens": {
       "version": "9.0.0",

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.7.7",
     "element-plus": "^2.8.5",

src/api/amap.js

@@ -0,0 +1,11 @@
+import mapR from '@/utils/mapRequest'
+
+const amap = {
+
+    //将结构化地址转为经纬度
+    getLngLat(param){
+        return mapR.get(`v3/geocode/geo?address=${param}`);
+    },
+}
+
+export default amap

src/api/houseGuaranty.js

@@ -1,8 +1,8 @@
 import request from '@/utils/request'
 
 const houseGuaranty = {
-    genConsignorLetter(params) {
-        return request.get(`/house/guaranty/consignor/${params}`)
+    genConsignorLetter(params,param1) {
+        return request.get(`/house/guaranty/consignor?pId=${params}&docId=${param1}`)
     },
 
     analysisCollect1(params) {

src/components/MapContainer/index.vue

@@ -0,0 +1,148 @@
+<template>
+    <div id="container"></div>
+</template>
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+import markPNG from "../../assets/icons/mark.png"
+
+export default {
+    name: "map-view",
+    mounted() {
+        //this.initAMap();
+    },
+    unmounted() {
+        this.map?.destroy();
+    },
+
+    props: {
+        targetPoint: {
+            type: Array,
+            Required: false
+        }
+    },
+
+    watch:{
+        targetPoint:{
+            handler(nv){
+                this.map?.destroy();
+                this.initAMap();
+            },
+            immediate:true
+        }
+    },
+
+    created() {
+
+    },
+    methods: {
+        initAMap() {
+            window._AMapSecurityConfig = {
+                securityJsCode: "522c082a4dfbb2b5555c7b1d3ff453b8",
+            };
+           
+            AMapLoader.load({
+                key: "78291dcbd623bd91a9d00754bab6c29b", // 申请好的Web端开发者Key，首次调用 load 时必填
+                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+                plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.MapType", "AMap.ElasticMarker"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+            }).then((AMap) => {
+                var zoomStyleMapping = {
+                    14: 0,
+                    15: 0,
+                    16: 0,
+                    17: 0,
+                    18: 0,
+                    19: 0,
+                    20: 0,
+                };
+                this.map = new AMap.Map("container", {
+                    // 设置地图容器id
+                    viewMode: "3D", // 是否为3D地图模式
+                    zoom: 15, // 初始化地图级别
+                    center: this.targetPoint[0].lngLat.split(",") // 初始化地图中心点位置
+                });
+                var toolbar = new AMap.ToolBar(); //创建工具条插件实例
+                this.map.addControl(toolbar); //添加工具条插件到页面
+                var scale = new AMap.Scale();
+                this.map.addControl(scale);
+                var mapType = new AMap.MapType();
+                this.map.addControl(mapType);
+
+                for (let i in this.targetPoint) {
+                    var stylesArray = [
+                        {
+                            icon: { //图标样式
+                                img: markPNG,
+                                size: [50, 50], //图标的原始大小
+                                anchor: "bottom-center", //锚点位置
+                                fitZoom: 0, //最合适的级别 在此级别显示为图标原始大小
+                                scaleFactor: 1, //地图放大一级的缩放比例系数 
+                                maxScale: 1, //图片的最大放大比例，随着地图放大图标会跟着放大，最大为2
+                                minScale: 1, //图片的最小缩小比例，随着地图缩小图标会跟着缩小，最小为1
+                            },
+                            label: { //文本标注
+                                content: this.targetPoint[i].location, //文本内容
+                                position: "BM", //文本位置相对于图标的基准点，"BM"为底部中央
+                                minZoom: 0, //label的最小显示级别，即文本标注在地图15级及以上，才会显示
+                            },
+                        },
+                    ];
+                    //设置圆形位置
+                    var center = new AMap.LngLat(this.targetPoint[i].lngLat.split(",")[0],this.targetPoint[i].lngLat.split(",")[1]);
+                    //设置圆的半径大小
+                    var radius = 1000;
+
+                    //创建圆形 Circle 实例
+                    var circle = new AMap.Circle({
+                        center: center, //圆心
+                        radius: radius, //半径
+                        borderWeight: 1, //描边的宽度
+                        strokeColor: "#ff6154", //轮廓线颜色
+                        strokeOpacity: 0.5, //轮廓线透明度
+                        strokeWeight: 1, //轮廓线宽度
+                        fillOpacity: 0.2, //圆形填充透明度
+                        strokeStyle: "dashed", //轮廓线样式
+                        fillColor: "#ff6154", //圆形填充颜色
+                        zIndex: 50, //圆形的叠加顺序
+                    });
+                    var elasticMarker = new AMap.ElasticMarker({
+                        position: this.targetPoint[i].lngLat.split(","), //点标记位置
+                        styles: stylesArray, //指定样式列表
+                        zoomStyleMapping: zoomStyleMapping, //指定 zoom 与样式的映射
+                        clickable:true
+                    })
+                    this.map.add(elasticMarker); //添加到地图上
+                    this.map.add(circle);
+                    this.map.setFitView(); //缩放地图到合适的视野级别
+
+                    //鼠标移入事件
+                    // circle.on("click", function () { 
+                    //     console.log("鼠标点击");
+                    // });       
+
+                }
+            })
+            .catch((e) => {
+                console.log(e);
+            });
+        
+        },
+
+        collectInfo(){
+
+        }
+
+    },
+};
+</script>
+<style scoped>
+#container {
+    width: 100%;
+    height: 600px;
+}
+
+.custom-content-marker {
+    position: relative;
+    width: 25px;
+    height: 34px;
+}
+</style>

src/utils/mapRequest.js

@@ -0,0 +1,54 @@
+import axios from 'axios'
+
+const mapService = axios.create({
+  // Vite默认不支持process
+  // baseURL: process.env.VITE_BASE_URL,
+  baseURL: 'https://restapi.amap.com/',
+  timeout: 50000 // 请求超时
+})
+
+// 请求拦截器
+mapService.interceptors.request.use(
+  config => {
+    config.headers['key'] = '19c4734ab21efe7e377bf9065c47d9b2'
+    return config
+  },
+  error => {
+    // 异常情况
+    console.log(error)
+    return Promise.reject(error)
+  }
+)
+
+// 返回拦截器
+mapService.interceptors.response.use(
+
+  response => {
+    const res = response.data
+
+    // code不等于200的处理
+    if (res.status != 1) {
+      ElMessage({
+        showClose: true,
+        message: res.info,
+        type: 'error'
+      })
+
+      return res
+    } else {
+      return res
+    }
+  },
+  error => {
+    console.log('err' + error)
+    ElMessage({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000,
+      plain:true
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default mapService

src/views/house/workbench/conditions.vue

@@ -11,11 +11,11 @@
         <el-tabs v-model="activeName" class="targets-tabs">
             <el-tab-pane :label="'估价对象' + t.tid" :name="t.tid" :lazy="true" v-for="(t, index) in targets">
                 <div class="targetTable">
-                    <el-table :data="t.list" border stripe size="default"
+                    <el-table :data="t.aims" border stripe size="default"
                         :header-row-style="{ color: '#333333', 'font-size': '16px' }"
                         style="color: #333333; font-size: 16px;">
-                        <el-table-column prop="id" label="估价对象" width="30" align="center" />
-                        <el-table-column prop="no" label="序号" width="30" align="center" />
+                        <el-table-column prop="tid" label="估价对象" width="30" align="center" />
+                        <el-table-column prop="tno" label="序号" width="30" align="center" />
                         <el-table-column prop="certificateNo" label="权属证书号" align="center" />
                         <el-table-column prop="ownShipUser" label="权利人" show-overflow-tooltip width="100"
                             align="center" />
@@ -31,7 +31,7 @@
                         <el-table-column prop="landType" label="地类(用途)" width="60" align="center" />
                         <el-table-column label="操作" width="100" align="center">
                             <template v-slot="scope">
-                                <el-button type="text" @click="clickAdd(scope.row.id, scope.row.no)">添加证件</el-button>
+                                <el-button type="text" @click="clickAdd(scope.row.tid, scope.row.tno)">添加证件</el-button>
                             </template>
                         </el-table-column>
                     </el-table>
@@ -431,6 +431,7 @@ import landUseOldCertificate from '../../../components/HouseGuarantyForm/landUse
 import certFixedAssets from '@/api/certificateFixedAssets';
 import certHouseOwn from '@/api/certificateHouseOwn';
 import certLandUse from '@/api/certificateLandUse';
+import amap from '@/api/amap'
 
 
 export default {
@@ -549,10 +550,29 @@ export default {
             }
         },
 
-        saveSupplement(t) {
+        async saveSupplement(t) {
             t.docId = this.docId;
-            t.baseInfo = JSON.stringify(t.list);
-            houseGuaranty.saveSupplement(t).then(res => {
+            //保存标的物的经纬度坐标
+            for (let i in t.aims){
+                let addr = null;
+                if (t.aims[i].actAddress){
+                    addr= t.aims[i].actAddress;
+                }else{
+                    addr = t.aims[i].location;
+                }
+                await amap.getLngLat(addr).then(res=>{
+                    if (res.status=="1"){
+                        let ret = res.geocodes.filter(item=>item.level=='门牌号');
+                        if (ret && ret.length>0){
+                            t.aims[i].lngLat = ret[0].location;
+                        }else{
+                            t.aims[i].lngLat =res.geocodes[0].location;
+                        }
+                    }
+                })
+            }
+            
+            await houseGuaranty.saveSupplement(t).then(res => {
                 if (res.code === 200) {
                     ElMessage({
                         message: '估价对象' + t.tid + ',补充信息已保存.',
@@ -570,9 +590,9 @@ export default {
                     if (res.code === 200 && res.data != null) {
                         for (let i in this.targets) {
                             if (this.targets[i].tid === tid) {
-                                const list = this.targets[i].list;
+                                const aims = this.targets[i].aims;
                                 this.targets[i] = res.data;
-                                this.targets[i].list = list;
+                                this.targets[i].aims = aims;
                             }
                         }
                     }
@@ -626,7 +646,7 @@ export default {
                 if (cers[i] == '2') {
                     let fixed = new Object()
                     fixed.type = "2"
-                    fixed.name = "序号" + this.tNo + "《房屋所有权证》（新）"
+                    fixed.name = "序号" + this.tno + "《房屋所有权证》（新）"
                     fixed.certificate = {
                         name: fixed.name,
                         tid: this.tId,
@@ -637,7 +657,7 @@ export default {
                 if (cers[i] == '3') {
                     let fixed = new Object()
                     fixed.type = "3"
-                    fixed.name = "序号" + this.tNo + "《房屋所有权证》（旧）"
+                    fixed.name = "序号" + this.tno + "《房屋所有权证》（旧）"
                     fixed.certificate = {
                         name: fixed.name,
                         tid: this.tId,
@@ -648,7 +668,7 @@ export default {
                 if (cers[i] == '4') {
                     let fixed = new Object()
                     fixed.type = "4"
-                    fixed.name = "序号" + this.tNo + "《国有土地使用证》（新）"
+                    fixed.name = "序号" + this.tno + "《国有土地使用证》（新）"
                     fixed.certificate = {
                         name: fixed.name,
                         tid: this.tId,
@@ -659,7 +679,7 @@ export default {
                 if (cers[i] == '5') {
                     let fixed = new Object()
                     fixed.type = "5"
-                    fixed.name = "序号" + this.tNo + "《国有土地使用证》（旧）"
+                    fixed.name = "序号" + this.tno + "《国有土地使用证》（旧）"
                     fixed.certificate = {
                         name: fixed.name,
                         tid: this.tId,

src/views/house/workbench/consignor.vue

@@ -131,19 +131,21 @@ export default {
                     await houseGuaranty.analysisCollect1(this.processId).then(res => {
                         if (res.code != 200) {
                             result = false;
+                        }else{
+                            this.docId = res.data;
                         }
+
                         this.$refs.steps.next(res.code)
                     })
                 }
                 if (result){
-                    await houseGuaranty.genConsignorLetter(this.processId).then(res => {
+                    await houseGuaranty.genConsignorLetter(this.processId,this.docId).then(res => {
                         if (res.code === 200) {
                             ElMessage({
                                 message: '致委托人函已生成',
                                 type: 'success',
                                 plain: true
                             })
-                            this.docId = res.data;
                             this.$emit('getProcessParentId',this.processId);
                             this.$emit('getDocumentId',this.docId)
                         }else{

src/views/house/workbench/guarantyResult.vue

@@ -8,19 +8,21 @@
                         </el-icon>
             </el-button>
         </div>
-        <el-tabs v-model="activeName" class="targets-tabs">
+        <el-tabs v-model="activeName" class="targets-tabs" type="border-card">
             <el-tab-pane :label="'估价对象' + t.tid" :name="t.tid" :lazy="true" v-for="(t, index) in targets">
                 <div class="targetTable">
-                    <el-table :data="t.list" border stripe size="default"
+                    <el-table :data="t.aims" border stripe size="default"
                         :header-row-style="{ color: '#333333', 'font-size': '16px' }"
                         style="color: #333333; font-size: 16px;">
-                        <el-table-column prop="id" label="估价对象" width="30" align="center" />
-                        <el-table-column prop="no" label="序号" width="30" align="center" />
-                        <el-table-column prop="certificateNo" label="权属证书号" align="center" />
-                        <el-table-column prop="ownShipUser" label="权利人" show-overflow-tooltip width="100"
+                        <el-table-column prop="tid" label="估价对象" width="80" align="center" />
+                        <el-table-column prop="tno" label="序号" width="60" align="center" />
+                        <el-table-column prop="certificateNo" label="权属证书号" width="220" align="center" />
+                        <el-table-column prop="ownShipUser" label="权利人" show-overflow-tooltip
                             align="center" />
-                        <el-table-column prop="location" label="坐落" show-overflow-tooltip width="100" align="center" />
-                        <el-table-column prop="atFloor" label="所在楼层" width="60" align="center" />
+                        <el-table-column prop="location" label="坐落" show-overflow-tooltip width="300" align="center" />
+                        <el-table-column prop="lngLat" label="经纬度" show-overflow-tooltip width="200"
+                            align="center" />
+                        <!-- <el-table-column prop="atFloor" label="所在楼层" width="60" align="center" />
                         <el-table-column prop="structure" label="结构" width="60" align="center" />
                         <el-table-column prop="useTo" label="用途" width="60" align="center" />
                         <el-table-column prop="outerAcreage" label="分摊或占用土地使用权面积(㎡)" align="center" />
@@ -28,16 +30,32 @@
                         <el-table-column prop="price" label="单价(元/㎡)" width="60" align="center" />
                         <el-table-column prop="amount" label="总价(万元)" width="60" align="center" />
                         <el-table-column prop="landCertificateNo" label="国有土地使用证号" align="center" />
-                        <el-table-column prop="landType" label="地类(用途)" width="60" align="center" />
-                        <el-table-column label="操作" width="100" align="center">
+                        <el-table-column prop="landType" label="地类(用途)" width="60" align="center" /> -->
+                        <el-table-column label="操作" width="160" align="center">
                             <template v-slot="scope">
                                 <el-button type="text" @click="addEntityInfo(scope.row.id, scope.row.no)">实物信息</el-button>
+                                <el-button type="text" @click="addEntityInfo(scope.row.id, scope.row.no)">区位信息</el-button>
                             </template>
                         </el-table-column>
                     </el-table>
                 </div>
+               
             </el-tab-pane>
         </el-tabs>
+
+        <div style="margin-top: 40px;">
+                <div class="demo-button-style">
+                    <!-- <el-checkbox-group v-model="targetPoint">
+                        <el-checkbox-button v-for="p in t.list" :key="p.no" :value="p.no">
+                            {{ p.no }}
+                        </el-checkbox-button>
+                    </el-checkbox-group> -->
+                </div>
+                <amap :targetPoint="targetPoint"></amap>
+        </div>
+
+
+
         <el-dialog v-model="entityInfoDialog" width="85%" align-center @closed="cleanId">
             <h2>估价对象{{ tId }}序号{{ tNo }}</h2>
             <el-form :model="entityInfo" label-width="180" style="margin-top: 10px;">
@@ -506,24 +524,34 @@
 <script>
 import houseGuaranty from '@/api/houseGuaranty';
 import houseTargetEntity from '@/api/houseTargetEntity';
+import amap from '../../../components/MapContainer/index.vue';
+import ampRequest from '@/api/amap';
 
 export default {
 
     components: {
+        amap
     },
 
     created() {
         this.docId = this.$route.query.id;
         this.getTargets();
+
     },
 
     watch:{
         activeName:{
             handler(nv,ov){
-                this.getTargetSupplement(nv);
+                const aims = this.targets.filter(item=>item.tid = nv)
+                this.targetPoint = aims;
             },
             immediate:true
         },
+        targets:{
+            handler(nv,ov){
+                this.targetPoint = nv[0].aims;
+            }
+        }
         
     },
 
@@ -573,8 +601,20 @@ export default {
                 landDeep:null
             },
             tId: null,
-            tNo: null
-        
+            tNo: null,
+            
+            targetPoint:[
+                // {
+                //   name:"成都高新区民丰大道西段400号附11号2层",
+                //   point:[104.062866,30.574925]
+                // }
+                // ,
+                // {
+                //     name:"成都高新区民丰大道西段400号附11号1层",
+                //     point:[104.063866,30.575925]
+                // }
+            ],
+            mapDialog:false
 
         }
     },
@@ -585,7 +625,6 @@ export default {
             houseGuaranty.getTargetsById(this.docId).then(res => {
                 if (res.code === 200) {
                     this.targets = res.data;
-                    this.getTargetSupplement(this.activeName);
                 }
             })
         },
@@ -605,21 +644,6 @@ export default {
             })
         },
 
-        getTargetSupplement(tid){
-            if (this.docId){
-                houseGuaranty.getTarget(this.docId,tid).then(res=>{
-                    if (res.code ===200 && res.data!=null){
-                        for (let i in this.targets){
-                            if (this.targets[i].tid === tid){
-                                const list = this.targets[i].list;
-                                this.targets[i] = res.data;
-                                this.targets[i].list = list;
-                            }
-                        }
-                    }
-                })
-            }
-        },
 
         addEntityInfo(id,no){
             this.tId = id;
@@ -706,10 +730,13 @@ export default {
                 }
                 }
             })
-        }
-
-
+        },
 
+        getLngLat(){
+            ampRequest.getLngLat("成都市武侯区锦城大道666号").then(res=>{
+                console.log(res)
+            })
+        }
     }
 }
 </script>