From 69df6752a3c7cfbc39f2c6a712f6220785b7c634 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Fri, 29 Oct 2021 16:37:50 +0800
Subject: [PATCH] ss

---
 epmet-oper-web/public/index.html              |   2 +-
 .../modules/base/community/communityForm.vue  | 486 ++++++++++--------
 2 files changed, 264 insertions(+), 224 deletions(-)

diff --git a/epmet-oper-web/public/index.html b/epmet-oper-web/public/index.html
index 2d6e6f3..a156e93 100644
--- a/epmet-oper-web/public/index.html
+++ b/epmet-oper-web/public/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" />
-  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=XCUBZ-UYXCP-XZNDB-VI5P3-2Y3RO-6WBYO"></script>
+  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=LWBBZ-TIGC3-VFP3L-YNMWH-FJB7T-JFBLO"></script>
 
   <!-- 站点配置 -->
   <script>
diff --git a/epmet-oper-web/src/views/modules/base/community/communityForm.vue b/epmet-oper-web/src/views/modules/base/community/communityForm.vue
index 1f4b69c..751ec5b 100644
--- a/epmet-oper-web/src/views/modules/base/community/communityForm.vue
+++ b/epmet-oper-web/src/views/modules/base/community/communityForm.vue
@@ -2,191 +2,225 @@
   <div>
     <div>
       <div v-show="!propertyFormShow">
-        <el-form :inline="false"
-                 :model="dataForm"
-                 :rules="dataRule"
-                 :disabled="formType==='detail'"
-                 class="form">
-          <el-form-item label="小区名称"
-                        prop="neighborHoodName"
-                        label-width="150px"
-                        style="display:block">
-            <el-input class="item_width_1"
-                      maxlength="50"
-                      show-word-limit
-                      placeholder='请输入小区名称'
-                      v-model="dataForm.neighborHoodName">
+        <el-form
+          :inline="false"
+          :model="dataForm"
+          :rules="dataRule"
+          :disabled="formType === 'detail'"
+          class="form"
+        >
+          <el-form-item
+            label="小区名称"
+            prop="neighborHoodName"
+            label-width="150px"
+            style="display: block"
+          >
+            <el-input
+              class="item_width_1"
+              maxlength="50"
+              show-word-limit
+              placeholder="请输入小区名称"
+              v-model="dataForm.neighborHoodName"
+            >
             </el-input>
-
           </el-form-item>
-          <el-form-item label="所属组织"
-                        label-width="150px"
-                        style="display:block">
-            <span>{{dataForm.agencyName}}</span>
-
+          <el-form-item
+            label="所属组织"
+            label-width="150px"
+            style="display: block"
+          >
+            <span>{{ dataForm.agencyName }}</span>
           </el-form-item>
-          <el-form-item label="所属网格"
-                        prop="gridId"
-                        label-width="150px"
-                        style="display:block">
-            <el-select class="item_width_1"
-                       v-model="dataForm.gridId"
-                       placeholder="请选择"
-                       clearable>
-              <el-option v-for="item in gridList"
-                         :key="item.gridId"
-                         :label="item.gridName"
-                         :value="item.gridId">
+          <el-form-item
+            label="所属网格"
+            prop="gridId"
+            label-width="150px"
+            style="display: block"
+          >
+            <el-select
+              class="item_width_1"
+              v-model="dataForm.gridId"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in gridList"
+                :key="item.gridId"
+                :label="item.gridName"
+                :value="item.gridId"
+              >
               </el-option>
             </el-select>
-
           </el-form-item>
-          <el-form-item label="关联物业"
-                        prop="propertyId"
-                        label-width="150px"
-                        style="display:block">
-            <el-select class="item_width_2"
-                       v-model="dataForm.propertyId"
-                       placeholder="请选择"
-                       clearable>
-              <el-option v-for="item in propertyList"
-                         :key="item.propertyId"
-                         :label="item.propertyName"
-                         :value="item.propertyId">
+          <el-form-item
+            label="关联物业"
+            prop="propertyId"
+            label-width="150px"
+            style="display: block"
+          >
+            <el-select
+              class="item_width_2"
+              v-model="dataForm.propertyId"
+              placeholder="请选择"
+              clearable
+            >
+              <el-option
+                v-for="item in propertyList"
+                :key="item.propertyId"
+                :label="item.propertyName"
+                :value="item.propertyId"
+              >
               </el-option>
             </el-select>
 
-            <el-button style="margin-left:10px"
-                       type="primary"
-                       size="small"
-                       @click="handleAddProperty">添加物业</el-button>
-
+            <el-button
+              style="margin-left: 10px"
+              type="primary"
+              size="small"
+              @click="handleAddProperty"
+              >添加物业</el-button
+            >
           </el-form-item>
-          <el-form-item label="详细地址"
-                        prop="address"
-                        label-width="150px"
-                        style="display:block">
-            <el-input class="item_width_1"
-                      maxlength="50"
-                      show-word-limit
-                      placeholder='请输入详细地址'
-                      v-model="dataForm.address">
+          <el-form-item
+            label="详细地址"
+            prop="address"
+            label-width="150px"
+            style="display: block"
+          >
+            <el-input
+              class="item_width_1"
+              maxlength="50"
+              show-word-limit
+              placeholder="请输入详细地址"
+              v-model="dataForm.address"
+            >
             </el-input>
-
           </el-form-item>
-          <el-form-item label="备注"
-                        prop="remark"
-                        label-width="150px"
-                        style="display:block">
-            <el-input class="item_width_1"
-                      type="textarea"
-                      maxlength="500"
-                      show-word-limit
-                      :rows="3"
-                      placeholder='请输入备注，不超过500字'
-                      v-model="dataForm.remark"></el-input>
-
+          <el-form-item
+            label="备注"
+            prop="remark"
+            label-width="150px"
+            style="display: block"
+          >
+            <el-input
+              class="item_width_1"
+              type="textarea"
+              maxlength="500"
+              show-word-limit
+              :rows="3"
+              placeholder="请输入备注，不超过500字"
+              v-model="dataForm.remark"
+            ></el-input>
           </el-form-item>
-          <el-form-item label="位置坐标"
-                        prop="longitude"
-                        label-width="150px"
-                        style="display:block">
-
-            <el-input class="item_width_3"
-                      maxlength="50"
-                      placeholder='请输入关键字'
-                      v-model="keyWords">
-
+          <el-form-item
+            label="位置坐标"
+            prop="longitude"
+            label-width="150px"
+            style="display: block"
+          >
+            <el-input
+              class="item_width_3"
+              maxlength="50"
+              placeholder="请输入关键字"
+              v-model="keyWords"
+            >
             </el-input>
-            <el-button style="margin-left:10px"
-                       type="primary"
-                       size="small"
-                       @click="handleSearchMap">查询</el-button>
-            <div id="app"
-                 class="div_map">
-            </div>
-            <div style="margin-top:10px">
+            <el-button
+              style="margin-left: 10px"
+              type="primary"
+              size="small"
+              @click="handleSearchMap"
+              >查询</el-button
+            >
+            <div id="app" class="div_map"></div>
+            <div style="margin-top: 10px">
               <span>经度</span>
-              <el-input class="item_width_3"
-                        maxlength="50"
-                        placeholder='请输入经度'
-                        v-model="dataForm.longitude">
+              <el-input
+                class="item_width_3"
+                maxlength="50"
+                placeholder="请输入经度"
+                v-model="dataForm.longitude"
+              >
               </el-input>
-              <span style="margin-left:20px">纬度</span>
-              <el-input class="item_width_3"
-                        maxlength="50"
-                        placeholder='请输入纬度'
-                        v-model="dataForm.latitude">
+              <span style="margin-left: 20px">纬度</span>
+              <el-input
+                class="item_width_3"
+                maxlength="50"
+                placeholder="请输入纬度"
+                v-model="dataForm.latitude"
+              >
               </el-input>
             </div>
-
           </el-form-item>
-
         </el-form>
-
       </div>
 
       <div v-show="propertyFormShow">
-        <el-form :inline="false"
-                 :model="propertyForm"
-                 :rules="propertyRule"
-                 class="form">
-          <el-form-item label="物业名称"
-                        prop="name"
-                        label-width="150px"
-                        style="display:block">
-            <el-input class="item_width_1"
-                      maxlength="50"
-                      show-word-limit
-                      placeholder='请输入小区名称'
-                      v-model="propertyForm.name">
+        <el-form
+          :inline="false"
+          :model="propertyForm"
+          :rules="propertyRule"
+          class="form"
+        >
+          <el-form-item
+            label="物业名称"
+            prop="name"
+            label-width="150px"
+            style="display: block"
+          >
+            <el-input
+              class="item_width_1"
+              maxlength="50"
+              show-word-limit
+              placeholder="请输入小区名称"
+              v-model="propertyForm.name"
+            >
             </el-input>
-
           </el-form-item>
-
         </el-form>
-
       </div>
     </div>
     <div class="div_btn">
       <el-button @click="handleCancle">取 消</el-button>
-      <el-button v-if="formType!='detail'"
-                 type="primary"
-                 @click="handleComfirm">确 定</el-button>
+      <el-button
+        v-if="formType != 'detail'"
+        type="primary"
+        @click="handleComfirm"
+        >确 定</el-button
+      >
     </div>
-
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import { Loading } from 'element-ui' // 引入Loading服务
-import { requestPost } from "@/js/dai/request";
-var map;
-var search;
-var markers;
+import { requestPost } from '@/js/dai/request'
+var map
+var search
+var markers
 var infoWindowList
 let loading // 加载动画
 export default {
-  data () {
+  data() {
     return {
-      formType: 'add',//表单操作类型 add新增，edit编辑，detail详情
+      formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
 
       gridList: [],
       propertyList: [],
 
-      neighborHoodId: '',//小区ID	
+      neighborHoodId: '', //小区ID
       dataForm: {
         neighborHoodName: '', // 小区名称【不超过50字】
-        agencyId: '', // 所属组织ID	
+        agencyId: '', // 所属组织ID
         agencyName: '',
-        gridId: '', //所属网格ID	
-        propertyId: '', //关联物业	
-        address: '', //详细地址	
-        remark: '', //备注【最大500字】	
-        location: '', //坐标位置	
+        gridId: '', //所属网格ID
+        propertyId: '', //关联物业
+        address: '', //详细地址
+        remark: '', //备注【最大500字】
+        location: '', //坐标位置
         longitude: '', //经度
-        latitude: '', //纬度	
+        latitude: '' //纬度
       },
 
       propertyFormShow: false,
@@ -195,22 +229,18 @@ export default {
       },
 
       keyWords: ''
-
-
     }
   },
-  components: {
-
-  },
-  mounted () {
+  components: {},
+  mounted() {
     this.initMap()
   },
 
   methods: {
     // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
-    initMap () {
+    initMap() {
       // 定义地图中心点坐标
-      var center = new window.TMap.LatLng(39.984120, 116.307484)
+      var center = new window.TMap.LatLng(39.98412, 116.307484)
       // 定义map变量，调用 TMap.Map() 构造函数创建地图
       map = new window.TMap.Map(document.getElementById('app'), {
         center: center, // 设置地图中心点坐标
@@ -220,50 +250,73 @@ export default {
       })
       console.log(map)
       console.log(window)
-      search = new window.TMap.service.Search({ pageSize: 10 });
+      search = new window.TMap.service.Search({ pageSize: 10 })
       // 新建一个地点搜索类
       markers = new TMap.MultiMarker({
         map: map,
-        geometries: [],
-      });
-      infoWindowList = Array(10);
+        geometries: []
+      })
+      infoWindowList = Array(10)
+
+      // 监听地图平移结束
+      map.on('panend', () => {
+        this.handleMoveCenter()
+      })
+    },
+
+    setMarker(lat, lng) {
+      markers.setGeometries([])
+      markers.add([
+        {
+          id: '4',
+          styleId: 'marker',
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: 'marker4'
+          }
+        }
+      ])
     },
 
-    handleSearchMap () {
+    handleSearchMap() {
       infoWindowList.forEach((infoWindow) => {
-        infoWindow.close();
-      });
-      infoWindowList.length = 0;
-      markers.setGeometries([]);
+        infoWindow.close()
+      })
+      infoWindowList.length = 0
+      markers.setGeometries([])
       // 在地图显示范围内以给定的关键字搜索地点
       search
         .searchRectangle({
           keyword: this.keyWords,
-          bounds: map.getBounds(),
+          bounds: map.getBounds()
         })
         .then((result) => {
-          result.data.forEach((item, index) => {
-            var geometries = markers.getGeometries();
-            var infoWindow = new window.TMap.InfoWindow({
-              map: map,
-              position: item.location,
-              content: `<h3>${item.title}</h3><p>地址：${item.address}</p><p>电话：${item.tel}</p>`,
-              offset: { x: 0, y: -50 },
-            }); // 新增信息窗体显示地标的名称与地址、电话等信息
-            infoWindow.close();
-            infoWindowList[index] = infoWindow;
-            geometries.push({
-              id: String(index), // 点标注数据数组
-              position: item.location,
-            });
-            markers.updateGeometries(geometries); // 绘制地点标注
-            markers.on('click', (e) => {
-              infoWindowList[Number(e.geometry.id)].open();
-            }); // 点击标注显示信息窗体
-          });
-        });
+          let { data } = result
+          if (Array.isArray(data) && data.length > 0) {
+            const {
+              location: { lat, lng }
+            } = data[0]
+            map.setCenter(new TMap.LatLng(lat, lng))
+            this.setMarker(lat, lng)
+            this.dataForm.latitude = lat
+            this.dataForm.longitude = lng
+          } else {
+            this.$message.error('未检索到相关位置坐标')
+          }
+        })
+    },
+
+    handleMoveCenter() {
+      //修改地图中心点
+      const center = map.getCenter()
+      const lat = center.getLat()
+      const lng = center.getLng()
+      this.dataForm.latitude = lat
+      this.dataForm.longitude = lng
+      this.setMarker(lat, lng)
     },
-    async initForm (type, row) {
+
+    async initForm(type, row) {
       this.formType = type
       if (row) {
         this.neighborHoodId = row.neighborHoodId
@@ -276,8 +329,8 @@ export default {
     },
 
     //加载组织
-    async loadAgency () {
-      const url = "/epmetuser/customerstaff/staffbasicinfo"
+    async loadAgency() {
+      const url = '/epmetuser/customerstaff/staffbasicinfo'
       let params = {}
 
       const { data, code, msg } = await requestPost(url, params)
@@ -285,15 +338,13 @@ export default {
       if (code === 0) {
         this.dataForm.agencyId = data.agencyId
         this.dataForm.agencyName = data.agencyName
-
-
       } else {
         this.$message.error(msg)
       }
     },
     //加载网格
-    async loadGrid () {
-      const url = "/gov/org/grid/allgrids"
+    async loadGrid() {
+      const url = '/gov/org/grid/allgrids'
       // const url = "https://epmet-dev.elinkservice.cn:7082/api/apimock-v2/95518686fa128a53f64c678906848062/gov/org/grid/allgrids"
       let params = {
         agencyId: this.dataForm.agencyId
@@ -303,14 +354,13 @@ export default {
 
       if (code === 0) {
         this.gridList = data
-
       } else {
         this.$message.error(msg)
       }
     },
     //加载物业
-    async loadProperty () {
-      const url = "/gov/org/propertymanagement/list"
+    async loadProperty() {
+      const url = '/gov/org/propertymanagement/list'
       // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/propertymanagement/list"
       let params = {}
 
@@ -318,33 +368,30 @@ export default {
 
       if (code === 0) {
         this.propertyList = data
-
       } else {
         this.$message.error(msg)
       }
     },
 
-    handleAddProperty () {
+    handleAddProperty() {
       this.propertyForm.name = ''
       this.propertyFormShow = true
     },
 
-    async handleComfirm () {
+    async handleComfirm() {
       if (this.propertyFormShow) {
-
         this.addProperty()
       } else {
         this.addCommunity()
       }
     },
-    async addCommunity () {
-
-      let url = ""
+    async addCommunity() {
+      let url = ''
       if (this.formType === 'add') {
-        url = "/gov/org/neighborhood/neighborhoodadd"
+        url = '/gov/org/neighborhood/neighborhoodadd'
         // url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd"
       } else {
-        url = "/gov/org/neighborhood/neighborhoodupdate"
+        url = '/gov/org/neighborhood/neighborhoodupdate'
 
         this.dataForm.neighborHoodId = this.neighborHoodId
       }
@@ -353,19 +400,17 @@ export default {
 
       if (code === 0) {
         this.$message({
-          type: "success",
-          message: "添加小区成功"
-        });
+          type: 'success',
+          message: '添加小区成功'
+        })
 
         this.propertyFormShow = false
-
       } else {
         this.$message.error(msg)
       }
-
     },
-    async addProperty () {
-      const url = "/gov/org/propertymanagement/add"
+    async addProperty() {
+      const url = '/gov/org/propertymanagement/add'
       // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/propertymanagement/add"
       let params = {
         name: this.propertyForm.name
@@ -374,35 +419,28 @@ export default {
       const { data, code, msg } = await requestPost(url, params)
 
       if (code === 0) {
-
         this.$message({
-          type: "success",
-          message: "添加物业成功"
-        });
+          type: 'success',
+          message: '添加物业成功'
+        })
         this.propertyForm.name = ''
         this.propertyFormShow = false
         this.loadProperty()
       } else {
         this.$message.error(msg)
       }
-
     },
-    handleCancle () {
+    handleCancle() {
       if (this.propertyFormShow) {
         this.propertyForm.name = ''
         this.propertyFormShow = false
       } else {
         this.$emit('dialogCancle')
       }
-
-
-    },
-    resetData () {
-
-
     },
+    resetData() {},
     // 开启加载动画
-    startLoading () {
+    startLoading() {
       loading = Loading.service({
         lock: true, // 是否锁定
         text: '正在加载……', // 加载中需要显示的文字
@@ -410,7 +448,7 @@ export default {
       })
     },
     // 结束加载动画
-    endLoading () {
+    endLoading() {
       // clearTimeout(timer);
       if (loading) {
         loading.close()
@@ -418,11 +456,16 @@ export default {
     }
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
         neighborHoodName: [
           { required: true, message: '小区名称不能为空', trigger: 'blur' },
-          { min: 1, max: 50, message: '小区名称长度在 1 到 50个字符', trigger: 'blur' }
+          {
+            min: 1,
+            max: 50,
+            message: '小区名称长度在 1 到 50个字符',
+            trigger: 'blur'
+          }
         ],
         agencyId: [
           { required: true, message: '所属组织不能为空', trigger: 'blur' }
@@ -436,22 +479,19 @@ export default {
         longitude: [
           { required: true, message: '坐标不能为空', trigger: 'blur' }
         ]
-
       }
     },
-    propertyRule () {
+    propertyRule() {
       name: [
-        { required: true, message: '物业名称不能为空', trigger: 'blur' },
+        { required: true, message: '物业名称不能为空', trigger: 'blur' }
         // { min: 1, max: 50, message: '小区名称长度在 1 到 50个字符', trigger: 'blur' }
       ]
     }
   },
-  props: {
-
-  }
+  props: {}
 }
 </script>
-<style scoped >
+<style scoped>
 .item_width_1 {
   width: 500px;
 }