feat：添加确权地图搜索和导出功能

src/api/config.js

@@ -1,5 +1,5 @@
-// let server = "http://127.0.0.1:81/"
 let server = "https://birdseye-api.feiniaotech.sysuimars.cn/"
+let mapServer = "https://birdseye-api.sysuimars.cn/"
 let serverMock = "https://mock.apipark.cn/m1/4662471-4313509-default/"
 // let djiCloudBase = "http://127.0.0.1/";
 let djiCloudBase = "https://djiapi.sysuimars.com/";
@@ -7,7 +7,7 @@ let djiCloudBase = "https://djiapi.sysuimars.com/";
 module.exports = {
     base_url :server + "site/",
     server_mock :serverMock + "site/",
-    fly_url: "/fdream-api/api/",
+    base_map_url: mapServer + "mini/",
     dji_cloud_base :djiCloudBase,
     image_url:server+"images/",
     base_img_url : "https://img.sysuimars.com/",
@@ -30,5 +30,6 @@ module.exports = {
         "list",
         "air_route",
         "find",
+        "poi",
     ]
 }

src/api/modules/authentic.js

@@ -17,4 +17,8 @@ module.exports = {
     url: config.base_url + "plugin_ownership/delete",
     type: "get",
   },
+  exportData: {
+    url: config.base_url + "plugin_ownership/exportList",
+    type: "post",
+  },
 };

src/api/modules/old_mini_map.js

@@ -0,0 +1,24 @@
+const config = require("../config")
+
+module.exports = {
+    treePoint: {
+        url: config.base_map_url + "lz_tree/listByPoint",
+        type: "post",
+    },
+    location: {
+        url: "/ws/geocoder/v1",
+        type: "get"
+    },
+    search: {
+        url: "/ws/place/v1/suggestion",
+        type: "get"
+    },
+    division: {
+        url: "/ws/district/v1/list",
+        type: "get"
+    },
+    getCtiyList: {
+        url: config.base_map_url + "poi/city",
+        type: "get",
+    }
+}

src/styles/common.scss

@@ -391,3 +391,57 @@ div{
         }
     }
 }
+
+// 暗色主题dialog自定义样式
+.dialog-dark{
+    .el-dialog{
+        background: #232323;
+        border: 1px solid #666666;
+        border-radius: 8px;
+    }
+}
+
+// 暗色主题table自定义样式
+.table-dark{
+    --el-table-border-color:#444444;
+    --el-table-border:1px solid #444444;
+    border-radius: 4px;
+    --el-table-row-hover-bg-color:rgba(68, 68, 68,0.4);
+    th.el-table__cell{
+        background-color: #2c2c2c;
+    }
+    tr{
+        background-color: #2c2c2c;
+        color: rgba(255 ,255 ,255 ,0.6);
+    }
+    td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+        border-bottom: 1px solid #444444;
+        color: #ffffff;
+    }
+    .el-table__body-wrapper{
+        background-color: #2c2c2c;
+        .el-table__empty-text{
+            color: #fff;
+        }
+    }
+}
+
+//element 全局颜色修改
+.el-button{
+    --el-button-border-color:rgba(255, 255, 255, 0.4);
+    --el-button-bg-color:none;
+    --el-button-hover-bg-color:none;
+    --el-button-hover-border-color:rgba(255, 255, 255, 0.4);
+    --el-button-hover-text-color:#fff;
+    --el-button-active-border-color:rgba(255, 255, 255, 0.4);
+    color: #fff;
+}
+.el-button--primary{
+    --el-button-border-color:#2199F8;
+    --el-button-bg-color:#2199F8;
+    --el-button-hover-bg-color:#2199F8;
+    --el-button-hover-border-color:#2199F8;
+    --el-button-hover-text-color:#fff;
+    --el-button-active-border-color:#2199F8;
+    --el-button-active-bg-color:#2199F8;
+}

src/utils/index.js

@@ -112,3 +112,31 @@ export const icons = () => {
     }
     return names;
 };
+
+/**
+ * 导出表格数据到 Excel 文件
+ * @param {Array} tableData - 表格数据
+ * @param {Array} fieldLabels - 表头组成的数组
+ * @param {Array} fieldKeys - 列属性名组成的数组
+ * @param {String} fileName - 导出的文件名
+ */
+ export function exportExcel(tableData, fieldLabels, fieldKeys, fileName) {
+    let dataStr = fieldLabels.toString() + '\r\n';
+    tableData.forEach(item => {
+        fieldKeys.forEach(key => {
+            // 加引号是为了使换行符在单元格内正常显示 
+            dataStr += `"${item[key]}"\t,`;
+        });
+        dataStr += '\r\n';
+    });
+
+    // encodeURIComponent 解决中文乱码
+    const url = "data:text/xls;charset=utf-8,\ufeff" + encodeURIComponent(dataStr);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName + ".xls";
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link); //释放标签
+}

src/views/authentic/authenticMap.js

@@ -3,12 +3,13 @@ import * as KMap from "@/utils/ol-map/KMap";
 import * as util from "@/common/ol_common.js";
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
-import Feature from "ol/Feature";
 import VectorLayer from "ol/layer/Vector.js";
 import WKT from "ol/format/WKT.js";
 import { reactive } from "vue";
+import Point from "ol/geom/Point.js";
+import Feature from "ol/Feature";
 import { newPoint } from "@/utils/map.js";
-import { remove } from "@/utils/ol-map/Polygon.js";
+import { Fill, Text } from "ol/style";
 import { getArea } from "ol/sphere.js";
 import * as proj from "ol/proj";
 import proj4 from "proj4";
@@ -23,6 +24,7 @@ export let mapData = reactive({
   isEditArea: false,
   curPointData: {},
   point: null,
+  selectPointArr: [],
 });
 
 /**
@@ -36,12 +38,40 @@ class AuthenticMap {
     // 位置图标
     this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
       style: (f) => {
-        return new Style({
+        const style1 = new Style({
           image: new Icon({
             src: require(`@/assets/images/common/${f.get("icon")}-icon.png`),
             scale: 0.45,
           }),
         });
+        const style2 = new Style({
+          text: new Text({
+            font: "16px sans-serif",
+            text: f.get("masterName"),
+            offsetY: -40,
+            padding: [4, 3, 2, 106],
+            fill: new Fill({ color: "#fff" }), // 字体颜色
+          }),
+        });
+        const style3 = new Style({
+          image: new Icon({
+            src: require(`@/assets/images/common/${f.get("iconBg")}.png`),
+            scale: 0.45,
+            displacement: [0, 90],
+          }),
+        });
+        return [style1, style2, style3];
+      },
+    });
+
+    this.locationLayer = new KMap.VectorLayer("locationLayer", 9999, {
+      style: () => {
+        return new Style({
+          image: new Icon({
+            src: require("@/assets/images/common/location.png"),
+            scale: 0.45,
+          }),
+        });
       },
     });
   }
@@ -60,11 +90,11 @@ class AuthenticMap {
     );
     this.kmap.initDraw((e) => {
       mapData.isEdit = true;
-      console.log('e',e);
-      mapData.point = e.feature
+      mapData.point = e.feature;
     });
     this.kmap.startDraw();
     this.kmap.addLayer(this.clickPointLayer.layer);
+    this.kmap.addLayer(this.locationLayer.layer);
     this.addMapSingerClick();
   }
 
@@ -73,19 +103,30 @@ class AuthenticMap {
     const arrPoints = [];
     if (points && points.length > 0) {
       points.forEach((item) => {
-        arrPoints.push(newPoint({ ...item, icon: "point" }, "point"));
+        arrPoints.push(newPoint({ ...item, icon: "point",iconBg: "name-bg" }, "point"));
       });
       this.clickPointLayer.source.addFeatures(arrPoints);
     }
   }
 
+  //  设置地图中心点位
+  setMapCenter(v) {
+    let arrayOfNumbers = [];
+    const arrayOfStrings = v.split(",");
+    arrayOfNumbers = [arrayOfStrings[1], arrayOfStrings[0]];
+    this.kmap.map.getView().setCenter(arrayOfNumbers);
+    this.locationLayer.source.clear();
+    let point = new Feature(new Point(arrayOfNumbers));
+    this.locationLayer.addFeature(point);
+  }
+
   endEdit() {
     this.kmap.endDraw();
     this.kmap.modifyDraw();
     mapData.isEdit = false;
   }
-  a() {
-    // this.kmap.endDraw();
+
+  startDraw() {
     this.kmap.startDraw();
   }
 
@@ -100,17 +141,18 @@ class AuthenticMap {
           layer.get("name") === "clickPointLayer"
         ) {
           const icon = feature.get("icon") === "point" ? "point-act" : "point";
+          const iconBg = feature.get("iconBg") === "name-bg" ? "name-bg1" : "name-bg";
           feature.set("icon", icon);
+          feature.set("iconBg", iconBg);
           mapData.curPointData = {};
           mapData.point = feature;
           mapData.curPointData = feature.values_;
-          console.log('this.kmap.getLayerFeatures()',that.kmap.getLayerFeatures());
+          that.getSelectPointArr();
           that.kmap.endDraw();
           that.kmap.modifyDraw((e) => {
             mapData.isEdit = false;
             mapData.isEditArea = false;
             mapData.isEditArea = true;
-            
           });
         } else if (
           layer instanceof VectorLayer &&
@@ -126,7 +168,15 @@ class AuthenticMap {
   }
 
   setPoint(name) {
-    mapData.point.set("icon", name);
+    const arr = mapData.selectPointArr.filter(item => item.values_.icon==='point-act')
+    if(arr.length>0){
+        mapData.point = arr[0]
+        mapData.point.set("icon", name);
+        mapData.point.set("iconBg", 'name-bg');
+    }
+    if(arr.length===1){
+        mapData.selectPointArr = [];
+    }
   }
 
   //添加地块
@@ -137,22 +187,40 @@ class AuthenticMap {
     });
   }
 
-  b(){
+  //   获取所有选中点位
+  getSelectPointArr() {
+    const arr = [];
+    this.clickPointLayer.source.forEachFeature((f) => {
+      if (f.get("icon") === "point-act") {
+        arr.push(f);
+      }
+    });
+    mapData.selectPointArr = arr;
+  }
+
+  b() {
     // console.log('this.kmap',this.kmap.polygonLayer)
     // console.log('point',mapData.point);
     // let that = this
     // this.clickPointLayer.source.forEachFeature((f) => {
     //     console.log('f',f);
     //     if (f.get("id") === mapData.point.get("id")) {
-    //         that.kmap.polygonLayer.source.removeFeature(f);
+    //         that.kmap.clickPointLayer.removeFeature(f);
     //         // that.kmap.remove(f)
     //     //   this.kmap.getView().setCenter(extractCoordinates(new WKT().writeFeature(f)));
     //     //   this.kmap.getView().setZoom(16);
     //     }
     //   })
-    // this.kmap.removeLayer(this.kmap.polygonLayer.layer)
+    this.clickPointLayer.source.clear()
+    this.kmap.polygonLayer.source.clear()
+    this.kmap.removeLayer(this.kmap.polygonLayer.layer)
+    this.kmap.removeLayer(this.clickPointLayer.layer)
     // this.kmap.addLayer(this.kmap.polygonLayer.layer)
   }
+  c(){
+    this.kmap.addLayer(this.kmap.polygonLayer.layer)
+    this.kmap.addLayer(this.clickPointLayer.layer)
+  }
 
   //获取地块信息
   getAreaGeometry() {

src/views/authentic/index.vue

@@ -8,17 +8,34 @@
         <span>返回</span>
       </div>
       <div class="search">
-        <el-input
-          class="v-input"
-          v-model="input"
+        <el-select
+          v-model="locationVal"
+          filterable
+          remote
+          effect="dark"
+          reserve-keyword
           placeholder="搜索地区"
-          clearable
+          :remote-method="remoteMethod"
+          :loading="loading"
+          @change="handleSearchRes"
+          class="v-select"
         >
           <template #prefix>
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
-        </el-input>
-        <div class="upload btn">
+          <el-option
+            v-for="(item, index) in locationOptions.list"
+            :key="index"
+            :label="item.title"
+            :value="item.point"
+          >
+            <span>{{ item.title }}</span>
+            <span class="sub-title"
+              >{{ item.province }}{{ item.city }}{{ item.district }}</span
+            >
+          </el-option>
+        </el-select>
+        <div class="upload btn" @click="handleExport">
           <img class="icon" src="@/assets/images/common/back-icon.png" alt="" />
           <span>导出</span>
         </div>
@@ -30,7 +47,7 @@
           <div ref="mapRef" class="map"></div>
         </div>
         <div class="tool-group">
-          <div class="btn">
+          <!-- <div class="btn">
             <img
               class="icon"
               src="@/assets/images/common/back-black-icon.png"
@@ -41,20 +58,26 @@
           <div class="btn">
             <el-icon size="15"><CloseBold /></el-icon>
             <span>删除点</span>
-          </div>
-          <div class="btn delete" @click="handleDelete">
+          </div> -->
+          <div class="btn delete" @click="handleDelete" v-show="isEdit">
             <el-icon size="15" color="#fff"><CloseBold /></el-icon>
             <span>删除地块</span>
           </div>
         </div>
         <div class="edit-popup" v-show="isEdit">
           <div class="edit-title">
-            <img src="@/assets/images/common/chart-icon.png" alt="" />
-            <span>地块属性</span>
+            <div class="name">
+              <img src="@/assets/images/common/chart-icon.png" alt="" />
+              <span>地块属性</span>
+            </div>
+            <div v-show="disabledForm" class="edit" @click="handleEdit">
+              编辑
+            </div>
           </div>
           <div class="edit-cont">
             <el-form
               :inline="true"
+              :disabled="disabledForm"
               :model="formInline"
               label-position="top"
               class="form-inline"
@@ -74,14 +97,10 @@
                 />
               </el-form-item>
               <el-form-item label="创建时间">
-                <el-input
-                  v-model="formInline.createDate"
-                  placeholder=""
-                  clearable
-                />
+                <el-input v-model="formInline.createDate" clearable disabled />
               </el-form-item>
               <el-form-item label="农场面积">
-                <el-input v-model="formInline.area" placeholder="" clearable />
+                <el-input v-model="formInline.area" disabled clearable />
               </el-form-item>
               <el-form-item label="作物物种">
                 <el-input
@@ -129,6 +148,53 @@
       </div>
     </div>
   </div>
+  <!-- 导出弹窗 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="82%"
+    center
+    :show-close="false"
+    modal-class="dialog-dark"
+  >
+    <div>
+      <el-table :data="gridData" border max-height="600" class="table-dark">
+        <el-table-column
+          property="farmName"
+          label="农场名称"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          property="address"
+          label="农场地址"
+          width="230"
+          show-overflow-tooltip
+        />
+        <el-table-column property="createDate" label="创建时间" width="170" />
+        <el-table-column property="mu" label="农场面积">
+          <template #default="scope">
+            <span>{{ scope.row.mu.toFixed(2) }}亩</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="speciesTypeName" label="作物物种" />
+        <el-table-column property="masterName" label="客户姓名" />
+        <el-table-column property="masterTel" label="联系电话" />
+        <el-table-column
+          property="points"
+          label="边界点经纬度"
+          width="480"
+          show-overflow-tooltip
+        />
+      </el-table>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button class="btn" @click="dialogVisible = false">取消</el-button>
+        <el-button class="btn" type="primary" @click="handleDowload">
+          下载
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -138,6 +204,8 @@ import AuthenticMap from "./authenticMap";
 import { mapData } from "./authenticMap";
 import { useRouter } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
+import { dateFormat } from "@/utils/date_util";
+import { exportExcel } from "@/utils/index";
 const router = useRouter();
 
 let authenticMap = new AuthenticMap();
@@ -150,29 +218,81 @@ onMounted(() => {
 
 // 获取地块列表
 const plotList = ref([]);
-const getList = (isInitMap = false) => {
+const getList = (isInitMap = false,a=false) => {
   VE_API.authentic.getList().then(({ code, data }) => {
     if (code !== 0) return authenticMap.initMap(location.value, mapRef.value);
     plotList.value = data || [];
     if (isInitMap) {
       authenticMap.initMap(data[0].point, mapRef.value);
-    //   const geom = [];
-    //   data.forEach((item) => {
-    //     geom.push({ featureWkt: item.geom });
-    //   });
-    //   authenticMap.setAreaGeometry(geom);
+      const geom = [];
+      data.forEach((item) => {
+        geom.push({ featureWkt: item.geom });
+      });
+      authenticMap.setAreaGeometry(geom);
     }
+    if(a){
     const geom = [];
+    console.log('data',data);
       data.forEach((item) => {
         geom.push({ featureWkt: item.geom });
       });
-      authenticMap.setAreaGeometry(geom);
+        authenticMap.setAreaGeometry(geom);
+        authenticMap.c()
+    }
+    // const geom = [];
+    //   data.forEach((item) => {
+    //     geom.push({ featureWkt: item.geom });
+    //   });
+    //   authenticMap.setAreaGeometry(geom);
     //   authenticMap.c()
     authenticMap.addPoint(data);
   });
 };
 
-const input = ref("");
+// 搜索
+const locationVal = ref("");
+const loading = ref(false);
+const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
+
+const handleSearchRes = (v) => {
+  authenticMap.setMapCenter(v);
+};
+
+const locationOptions = reactive({
+  list: [],
+});
+const remoteMethod = async (keyword) => {
+  if (keyword) {
+    locationOptions.list = [];
+    loading.value = true;
+    const params = {
+      key: MAP_KEY,
+      keyword,
+      // location: store.getters.userLocation,
+      location: "22.574540836684672,113.1093017627431",
+    };
+    await VE_API.old_mini_map
+      .getCtiyList({ word: keyword })
+      .then(({ data }) => {
+        if (data && data.length) {
+          data.forEach((item) => {
+            item.point = item.location.lat + "," + item.location.lng;
+            locationOptions.list.push(item);
+          });
+        }
+      });
+    VE_API.old_mini_map.search(params).then(({ data }) => {
+      loading.value = false;
+      data.forEach((item) => {
+        item.point = item.location.lat + "," + item.location.lng;
+        locationOptions.list.push(item);
+      });
+    });
+  } else {
+    locationOptions.list = [];
+  }
+};
+
 const initForm = {
   address: "",
   farmName: "",
@@ -186,17 +306,25 @@ const initForm = {
 const formInline = reactive({
   ...initForm,
 });
+const disabledForm = ref(false);
 
 const isEdit = ref(false);
 
+// 编辑
+const handleEdit = () => {
+  disabledForm.value = false;
+};
+
 // 取消
 const onCancel = () => {
   isEdit.value = false;
-  authenticMap.a();
-//   authenticMap.b();
-  if (!mapData.curPointData.id) return;
+  authenticMap.startDraw();
+    // authenticMap.b();
+//   console.log('mapData.curPointData.id',mapData.curPointData.id);
+//   if (!mapData.curPointData.id || mapData.selectPointArr.length) return;
   authenticMap.setPoint("point");
 };
+
 // 保存
 const onSubmit = () => {
   VE_API.authentic.saveData(formInline).then((res) => {
@@ -204,11 +332,14 @@ const onSubmit = () => {
       onCancel();
     } else {
       isEdit.value = false;
+      authenticMap.startDraw();
     }
+    // authenticMap.b()
     getList();
   });
 };
 
+// 返回
 const goBack = () => {
   router.go(-1);
 };
@@ -217,23 +348,9 @@ function updateFormInline(newData) {
   Object.assign(formInline, newData);
 }
 
-function formatDate(isoString) {
-  const date = new Date(isoString);
-  // 获取年、月、日、小时、分钟和秒
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1，并且用0填充
-  const day = String(date.getDate()).padStart(2, "0");
-  const hours = String(date.getHours()).padStart(2, "0");
-  const minutes = String(date.getMinutes()).padStart(2, "0");
-  const seconds = String(date.getSeconds()).padStart(2, "0");
-
-  // 格式化日期为 YYYY-MM-DD hh:mm:ss
-  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-  return formattedDate;
-}
-
 const handleDelete = () => {
   if (!mapData.curPointData.id) return ElMessage("请选择地块");
+  const id = mapData.selectPointArr.map((item) => item.values_.id);
   ElMessageBox.confirm("您确定删除该地块吗?", "提示", {
     confirmButtonText: "确认",
     cancelButtonText: "取消",
@@ -241,29 +358,102 @@ const handleDelete = () => {
   })
     .then(() => {
       VE_API.authentic
-        .deleteData({ id: mapData.curPointData.id })
+        .deleteData({ id:id[0] })
         .then((res) => {
           authenticMap.b();
-          
-            onCancel();
-          getList();
+          onCancel();
+          getList(false,true);
         });
     })
-    .catch(() => {
+    .catch(() => {});
+};
+
+// 导出
+const gridData = ref([]);
+const dialogVisible = ref(false);
+const handleExport = () => {
+  if (mapData.selectPointArr.length < 1) return ElMessage("请选择地块");
+  const ids = mapData.selectPointArr.map((item) => item.values_.id);
+  VE_API.authentic.exportData(ids).then(({ data }) => {
+    gridData.value = data.map((item) => {
+      return {
+        ...item,
+        createDate: dateFormat(
+          new Date(item.createDate),
+          "YYYY-mm-dd HH:MM:SS"
+        ),
+      };
     });
+    dialogVisible.value = true;
+  });
+};
+
+// 下载
+const handleDowload = () => {
+  const fieldLabels = [
+    "农场名称",
+    "农场地址",
+    "创建时间",
+    "农场面积",
+    "作物物种",
+    "客户姓名",
+    "联系电话",
+    "边界点经纬度",
+  ];
+  const fieldKeys = [
+    "farmName",
+    "address",
+    "createDate",
+    "mu",
+    "speciesTypeName",
+    "masterName",
+    "masterTel",
+    "points",
+  ];
+  const fileName = "农场数据" + dateFormat(new Date(), "YYYY-mm-dd");
+  exportExcel(gridData.value, fieldLabels, fieldKeys, fileName);
 };
 
 const pointList = ref([]);
+
+// 获取编辑回显数据
+const getDetailsData = (id) => {
+  VE_API.authentic.getDetails({ id }).then(({ data }) => {
+    isEdit.value = true;
+    disabledForm.value = true;
+
+    data.createDate = dateFormat(
+      new Date(data.createDate),
+      "YYYY-mm-dd HH:MM:SS"
+    );
+    updateFormInline({ ...data });
+    const { area } = authenticMap.getAreaGeometry();
+    formInline.area = area + "亩";
+
+    //   经纬度列表
+    const arr = JSON.parse(data.points);
+    pointList.value = arr.map((item) => {
+      return {
+        lat: item[1].toString().slice(0, 6),
+        lnt: item[0].toString().slice(0, 7),
+      };
+    });
+    authenticMap.endEdit();
+  });
+};
+
 watchEffect(() => {
-  updateFormInline({...initForm});
+  updateFormInline({ ...initForm });
   pointList.value = [];
-  if (mapData.isEdit) {
+  isEdit.value = false;
+  if (mapData.isEdit && mapData.selectPointArr.length < 2) {
     isEdit.value = true;
+    disabledForm.value = false;
     const { geometryArr, area } = authenticMap.getAreaGeometry();
     const lastItem = geometryArr[geometryArr.length - 1];
     formInline.geom = lastItem.featureWkt;
     formInline.area = area + "亩";
-    formInline.createDate = formatDate(new Date());
+    formInline.createDate = dateFormat(new Date(), "YYYY-mm-dd HH:MM:SS");
     authenticMap.endEdit();
   }
 
@@ -273,31 +463,13 @@ watchEffect(() => {
     formInline.area = area + "亩";
   }
 
-  if (mapData.curPointData.id && !mapData.isEdit) {
-    if (mapData.curPointData.icon === "point-act") {
-      VE_API.authentic
-        .getDetails({ id: mapData.curPointData.id })
-        .then(({ data }) => {
-          isEdit.value = true;
-
-          data.createDate = formatDate(data.createDate);
-          updateFormInline({ ...data });
-          const { area } = authenticMap.getAreaGeometry();
-          formInline.area = area + "亩";
-
-          //   经纬度列表
-          const arr = JSON.parse(data.points);
-          pointList.value = arr.map((item) => {
-            return {
-              lat: item[1].toString().slice(0, 6),
-              lnt: item[0].toString().slice(0, 7),
-            };
-          });
-          authenticMap.endEdit();
-        });
-    } else {
-      // isEdit.value = false;
-    }
+  if (
+    mapData.curPointData.id &&
+    !mapData.isEdit &&
+    mapData.selectPointArr.length === 1
+  ) {
+    const id = mapData.selectPointArr.map((item) => item.values_.id);
+    getDetailsData(id[0]);
   }
 });
 </script>
@@ -332,6 +504,7 @@ watchEffect(() => {
       margin-left: 10px;
     }
   }
+
   .top {
     display: flex;
     justify-content: space-between;
@@ -347,13 +520,16 @@ watchEffect(() => {
     }
     .search {
       display: flex;
-      .v-input {
+      .v-select {
         width: 300px;
         ::v-deep {
-          .el-input__wrapper {
+          .el-select__wrapper {
             background: #101010;
             box-shadow: none;
             border: 1px solid rgba(255, 255, 255, 0.7);
+            .el-select__input {
+              color: #fff;
+            }
           }
         }
       }
@@ -414,16 +590,29 @@ watchEffect(() => {
         border-radius: 8px;
         background: #232323;
         .edit-title {
-          padding: 12px 10px;
+          padding: 0 10px;
           background: rgba(68, 68, 68, 0.4);
           border-bottom: 1px solid rgba(68, 68, 68, 0.4);
           display: flex;
           align-items: center;
+          justify-content: space-between;
+          .name {
+            display: flex;
+            padding: 12px 0px;
+            align-items: center;
+          }
           span {
             margin-left: 8px;
             font-size: 18px;
             font-family: "SOURCEHANTIFINE";
           }
+          .edit {
+            color: #2199f8;
+            padding: 6px 20px;
+            border: 1px solid #2199f8;
+            border-radius: 4px;
+            cursor: pointer;
+          }
         }
         .edit-cont {
           padding: 16px;
@@ -505,4 +694,10 @@ watchEffect(() => {
     }
   }
 }
+.dialog-footer {
+  .btn {
+    width: 200px;
+    height: 40px;
+  }
+}
 </style>

vue.config.js

@@ -32,6 +32,13 @@ module.exports = {
             }
             return middlewares;
         },
+        proxy: {
+            '/ws': {
+                target: 'https://apis.map.qq.com',
+                changeOrigin: true,
+                ws: false,
+            }
+        },
         host: '127.0.0.1',
         port: '8081',
         https: false,