From 48a14c2d3df0a959676e837c7d277b611f14ee3f Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Thu, 10 Aug 2023 10:03:21 +0800
Subject: [PATCH] =?UTF-8?q?bug#444=EF=BC=8C=E9=80=9A=E8=AE=AF=E5=BD=95?=
 =?UTF-8?q?=E5=9D=90=E6=A0=87=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/organization/organization.vue        | 352 ++++++++++++------
 1 file changed, 235 insertions(+), 117 deletions(-)

diff --git a/src/views/modules/base/organization/organization.vue b/src/views/modules/base/organization/organization.vue
index b64111acb..093163c2c 100644
--- a/src/views/modules/base/organization/organization.vue
+++ b/src/views/modules/base/organization/organization.vue
@@ -21,7 +21,7 @@
                 color: #3e8ef7;
                 cursor: pointer;
               "
-                     icon="el-icon-edit">修改</el-link>
+                     icon="el-icon-edit">编辑</el-link>
           </el-breadcrumb-item>
         </el-breadcrumb>
       </el-col>
@@ -275,7 +275,7 @@
     <el-dialog title="新增部门"
                :visible.sync="dialogVisible"
                width="850"
-               :before-close="handleClose">
+               :before-close="handleClose" destroy-on-close>
       <el-form label-width="120px"
                :rules="rules">
         <el-form-item label="部门名称"
@@ -311,7 +311,7 @@
       <el-dialog title="新增网格"
                  :visible.sync="dialogVisibleGrid"
                  width="850"
-                 :before-close="handleClose">
+                 :before-close="handleClose" destroy-on-close>
         <el-form label-width="120px"
                  :rules="rules">
           <el-form-item label="网格名称"
@@ -351,9 +351,35 @@
           </el-form-item>
 
           <!-- 组织位置 -->
-          <el-form-item label="坐标">
-            <div id="con"></div>
-          </el-form-item>
+          <el-form-item
+          label="坐标"
+          prop="longitude"
+          label-width="120px"
+          style="display: block"
+        >
+          <div style="width: 500px">
+            <el-select
+              v-model="searchValue"
+              filterable
+              style="width: 500px"
+              remote
+              :reserve-keyword="true"
+              placeholder="请输入关键词"
+              :remote-method="remoteMethod"
+              :loading="loading"
+            >
+              <el-option
+                v-for="(item, index) in searchOptions"
+                @click.native="handleClickKey(index)"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <div id="wangge" class="div_map"></div>
+          </div>
+        </el-form-item>
         </el-form>
 
         <div slot="footer">
@@ -369,7 +395,7 @@
       <el-dialog title="新增人员"
                  :visible.sync="dialogVisiblePeo"
                  width="850"
-                 :before-close="handleClose">
+                 :before-close="handleClose" destroy-on-close>
         <el-form :model="peoForm"
                  label-width="120px"
                  ref="addPeoForm"
@@ -456,7 +482,7 @@
                title="人员修改"
                :visible.sync="modifyPeo"
                width="850"
-               :before-close="handleClose">
+               :before-close="handleClose" destroy-on-close>
       <el-form :model="peoForm"
                label-width="120px"
                ref="editPeoForm"
@@ -552,7 +578,7 @@
                title="人员详情"
                :visible.sync="details"
                width="850"
-               :before-close="handleClosePeoView">
+               :before-close="handleClosePeoView" destroy-on-close>
       <el-form label-width="120px">
         <el-form-item label="姓名">
           <el-input v-model="peoForm.name"
@@ -602,7 +628,7 @@
                title="人员调动"
                :visible.sync="transferPeo"
                width="850"
-               :before-close="handleClose">
+               :before-close="handleClose" destroy-on-close>
       <el-form label-width="120px"
                :model="agencyForm">
         <el-form-item label="姓名">
@@ -646,7 +672,7 @@
                title="新增组织"
                :visible.sync="createAgencyDialogFlag"
                width="850"
-               :before-close="handleClose">
+               :before-close="handleClose" destroy-on-close>
       <el-form label-width="120px">
         <el-form-item label="组织名称">
           <el-input v-model="agencyForm.agencyName"
@@ -678,8 +704,34 @@
           <el-input v-model="agencyForm.mobile"
                     placeholder="请输入联系电话"></el-input>
         </el-form-item>
-        <el-form-item label="坐标">
-          <div id="con"></div>
+        <el-form-item
+          label="坐标"
+          prop="longitude"
+          label-width="120px"
+          style="display: block"
+        >
+          <div style="width: 500px">
+            <el-select
+              v-model="searchValue"
+              filterable
+              style="width: 500px"
+              remote
+              :reserve-keyword="true"
+              placeholder="请输入关键词"
+              :remote-method="remoteMethod"
+              :loading="loading"
+            >
+              <el-option
+                v-for="(item, index) in searchOptions"
+                @click.native="handleClickKey(index)"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <div id="jiedao" class="div_map"></div>
+          </div>
         </el-form-item>
       </el-form>
       <div slot="footer">
@@ -694,7 +746,7 @@
                title="修改组织"
                :visible.sync="modifyCityOrgPop"
                width="850"
-               :before-close="handleClose">
+               :before-close="handleClose" destroy-on-close>
       <el-form label-width="120px">
         <el-form-item label="组织名称">
           <el-input v-model="OrgDetailsForm.agencyName"
@@ -713,8 +765,34 @@
           <el-input v-model="OrgDetailsForm.mobile"
                     placeholder="请输入联系电话"></el-input>
         </el-form-item>
-        <el-form-item label="坐标">
-          <div id="con"></div>
+        <el-form-item
+          label="坐标"
+          prop="longitude"
+          label-width="120px"
+          style="display: block"
+        >
+          <div style="width: 500px">
+            <el-select
+              v-model="searchValue"
+              filterable
+              style="width: 500px"
+              remote
+              :reserve-keyword="true"
+              placeholder="请输入关键词"
+              :remote-method="remoteMethod"
+              :loading="loading"
+            >
+              <el-option
+                v-for="(item, index) in searchOptions"
+                @click.native="handleClickKey(index)"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <div id="shiqu" class="div_map"></div>
+          </div>
         </el-form-item>
       </el-form>
       <div slot="footer">
@@ -729,7 +807,7 @@
                title="修改组织"
                :visible.sync="streetOrCommunity"
                width="850"
-               :before-close="handleClose">
+               :before-close="handleClose" destroy-on-close>
       <el-form label-width="120px">
         <el-form-item label="组织名称">
           <el-input v-model="OrgDetailsForm.agencyName"
@@ -761,8 +839,34 @@
           <el-input v-model="OrgDetailsForm.mobile"
                     placeholder="请输入联系电话"></el-input>
         </el-form-item>
-        <el-form-item label="坐标">
-          <div id="con"></div>
+        <el-form-item
+          label="坐标"
+          prop="longitude"
+          label-width="120px"
+          style="display: block"
+        >
+          <div style="width: 500px">
+            <el-select
+              v-model="searchValue"
+              filterable
+              style="width: 500px"
+              remote
+              :reserve-keyword="true"
+              placeholder="请输入关键词"
+              :remote-method="remoteMethod"
+              :loading="loading"
+            >
+              <el-option
+                v-for="(item, index) in searchOptions"
+                @click.native="handleClickKey(index)"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <div id="jiedao" class="div_map"></div>
+          </div>
         </el-form-item>
       </el-form>
       <div slot="footer">
@@ -777,7 +881,7 @@
                title="修改部门"
                :visible.sync="OrgUnitPop"
                width="850"
-               :before-close="handleClose">
+               :before-close="handleClose" destroy-on-close>
       <el-form label-width="120px">
         <el-form-item label="部门名称">
           <el-input v-model="OrgUnitDetailsForm.departmentName"
@@ -809,7 +913,7 @@
                title="修改网格"
                :visible.sync="modifyGridPop"
                width="850"
-               :before-close="handleClose">
+               :before-close="handleClose" destroy-on-close>
       <el-form label-width="120px">
         <el-form-item label="网格名称">
           <el-input v-model="modifyGridFrom.gridName"
@@ -852,8 +956,34 @@
         </el-form-item>
 
         <!-- 组织位置,地图 -->
-        <el-form-item label="坐标">
-          <div id="con"></div>
+        <el-form-item
+          label="坐标"
+          prop="longitude"
+          label-width="120px"
+          style="display: block"
+        >
+          <div style="width: 500px">
+            <el-select
+              v-model="searchValue"
+              filterable
+              style="width: 500px"
+              remote
+              :reserve-keyword="true"
+              placeholder="请输入关键词"
+              :remote-method="remoteMethod"
+              :loading="loading"
+            >
+              <el-option
+                v-for="(item, index) in searchOptions"
+                @click.native="handleClickKey(index)"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <div id="wangge" class="div_map"></div>
+          </div>
         </el-form-item>
       </el-form>
       <div slot="footer">
@@ -868,7 +998,7 @@
 <script>
 import { requestPost, requestGet } from "@/js/dai/request";
 import daiMap from "@/utils/dai-map";
-
+var map
 export default {
   data () {
     return {
@@ -934,6 +1064,9 @@ export default {
       latitude: "",
       longitude: "",
       Navigation: "",
+      searchValue:"",
+      searchOptions:[],
+      resultList:[],
       // 查询参数
       queryParams: {
         deptName: undefined,
@@ -1133,41 +1266,43 @@ export default {
     dialogVisibleGrid (val) {
       if (val) {
         setTimeout(() => {
-          this.createMap();
+          this.initMap('wangge');
         }, 1000);
       }
     },
     createAgencyDialogFlag (val) {
       if (val) {
         setTimeout(() => {
-          this.createMap();
+          this.initMap('jiedao');
         }, 1000);
       }
     },
     modifyCityOrgPop (val) {
       if (val) {
         setTimeout(() => {
-          this.createMap();
+          this.initMap('shiqu');
         }, 1000);
       }
     },
     streetOrCommunity (val) {
       if (val) {
         setTimeout(() => {
-          this.createMap();
+          this.initMap('jiedao');
         }, 1000);
       }
     },
     modifyGridPop (val) {
       if (val) {
         setTimeout(() => {
-          this.createMap();
+          this.initMap('wangge');
         }, 1000);
       }
     },
+    "latitude":function(val){
+        console.log(val);
+    }
   },
   mounted () {
-    // this.initMap()
   },
   methods: {
     // 点击后获取id
@@ -2326,6 +2461,7 @@ export default {
     modifyOrgInfo () {
       this.judgeOrgInfoLevel =
         this.breadcrumbArr[this.breadcrumbArr.length - 1];
+        console.log(this.judgeOrgInfoLevel.type);
       if (this.judgeOrgInfoLevel.type === "agency") {
         this.getOrgDetailsById();
         setTimeout(() => {
@@ -2519,108 +2655,90 @@ export default {
       }
     },
 
-    /** 地图初始化 */
-    createMap () {
+     // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
+     initMap(id) {
       let { latitude, longitude } = this;
-      if (
-        latitude === null ||
-        latitude === "" ||
-        longitude === null ||
-        longitude === ""
-      ) {
-        let { latitude: latitude2, longitude: longitude2 } =
-          this.$store.state.user;
-        if (!latitude2 || latitude2 == "" || latitude2 == "0") {
-          latitude = 39.9088810666821;
-          longitude = 116.39743841556731;
-        } else {
-          latitude = latitude2;
-          longitude = longitude2;
-        }
-      }
-      // var center = new window.TMap.LatLng(latitude, longitude); //设置中心点坐标
-      var map = new daiMap(
-        document.getElementById("con"),
-        { latitude, longitude },
+      console.log(latitude,longitude);
+      let storeLatitude = this.$store.state.user.latitude
+      let storeLongitude = this.$store.state.user.longitude
+      let lat = latitude || storeLatitude
+      let lng = longitude || storeLongitude
+      console.log(  document.getElementById(id));
+      console.log(lat,lng);
+      map = new daiMap(
+        document.getElementById(id),
+        { lat , lng },
         {
           zoom: 16.2, // 设置地图缩放级别
           pitch: 43.5, // 设置俯仰角
           rotation: 45, // 设置地图旋转角度
         }
       );
-      // //初始化地图
-      // var map = new window.TMap.Map("con", {
-      //   center: center,
-      //   zoom: 13, // 设置地图缩放级别
-      //   pitch: 43.5, // 设置俯仰角
-      //   rotation: 45, // 设置地图旋转角度
-      // });
-
-      // // 新建一个地点搜索类
-      // let markers = new window.TMap.MultiMarker({
-      //   map: map,
-      //   geometries: [],
-      // });
-
-      // map.on("panend", (e) => {
-      //   handleMoveCenter(e);
-      // });
-
       // 监听地图平移结束
       map.on("dragend", (e) => {
-        handleMoveCenter(e, (lng, lat) => {
-          this.longitude = lng;
-          this.latitude = lat;
-        });
+        this.handleMoveCenter(e);
       });
 
-      // map.setCenter(latitude, longitude);
+      map.setCenter(latitude, longitude);
       map.setMarker(latitude, longitude);
+    },
+
+    async handleMoveCenter() {
+      //修改地图中心点
+      const { lat, lng } = map.getCenter();
+      this.latitude = lat;
+      this.longitude = lng;
+      map.setMarker(lat, lng);
+
+      let { msg, data } = await map.getAddress(lat, lng);
+      if (msg == "success") {
+        this.address = data.address;
+        this.searchValue = data.address;
+        this.searchOptions = [];
+      }
+    },
 
-      // setMarker(latitude, longitude);
-
-      // function setMarker(lat, lng) {
-      //   console.log("setMarker", lat, lng);
-      //   markers.setGeometries([]);
-
-      //   markers.add([
-      //     {
-      //       id: "4",
-      //       styleId: "marker",
-      //       position: new window.TMap.LatLng(lat, lng),
-      //       properties: {
-      //         title: "marker4",
-      //       },
-      //     },
-      //   ]);
-      // }
-
-      function handleMoveCenter (e, callback) {
-        //修改地图中心点
-        const { lat, lng } = map.getCenter();
-        // const lat = lat;
-        // const lng = lng;
-        map.setMarker(lat, lng);
-        
-        // 因为这里不能直接用this，采用回调函数的方式。
-        callback(lng, lat)
-
-        // let { msg, data } = await map.getAddress(lat, lng);
-        // if (msg == "success") {
-        //   this.formData.address = data.address
-        //   this.searchValue = data.address
-        //   this.searchOptions = []
-
-        // }
-
-        //修改地图中心点
-        // const center = map.getCenter();
-        // const lat = center.getLat();
-        // const lng = center.getLng();
-
-        // setMarker(lat, lng);
+    async remoteMethod(query) {
+      console.log(query);
+      if (query !== "") {
+        this.loading = true;
+
+        const { msg, data } = await map.searchNearby(query);
+        this.loading = false;
+        this.resultList = [];
+
+        if (msg == "success" && data.resultList && data.resultList.length > 0) {
+          if (data.resultList && data.resultList.length > 0) {
+            this.resultList = data.resultList;
+            this.searchOptions = this.resultList.map((item) => {
+              return {
+                value: `${item.hotPointID}`,
+                label: `${item.address + item.name}`,
+              };
+            });
+          }
+        } else {
+          this.searchOptions = [
+            {
+              value: "0",
+              label: "未检索到结果",
+            },
+          ];
+        }
+      } else {
+        this.searchOptions = [];
       }
     },
+
+    handleClickKey(index) {
+      let selPosition = this.resultList[index];
+      let lonlat = selPosition.lonlat.split(" ");
+      map.setCenter(lonlat[1], lonlat[0]);
+      map.setMarker(lonlat[1], lonlat[0]);
+      this.latitude = lonlat[1];
+      this.longitude = lonlat[0];
+      // this.formData.address = selPosition.address + selPosition.name;
+    },
   },
 };
 </script>