新增页面添加地图选点获取经纬度

运输详情页逻辑修改

src/views/emergen_cyrescue/emergency_information/security_agency/assurance_management/components/list.vue

@@ -77,12 +77,25 @@
             no-children-text="暂无数据"
           />
         </el-form-item>
-        <el-form-item label="经度" prop="LONGITUDE">
+        <el-row :gutter="20">
-          <el-input v-model="form.LONGITUDE" placeholder="请输入经度..." />
+          <el-col :span="12">
+            <el-form-item :key="form.LONGITUDE" label="经度" prop="LONGITUDE">
+              <el-input v-model="form.LONGITUDE" placeholder="请输入内容" disabled @focus="handleMap" />
             </el-form-item>
-        <el-form-item label="纬度" prop="LATITUDE">
+          </el-col>
-          <el-input v-model="form.LATITUDE" placeholder="请输入纬度..." />
+          <el-col :span="12">
+            <el-form-item :key="form.LATITUDE" label="纬度" prop="LATITUDE">
+              <div style="display: flex">
+                <el-input v-model="form.LATITUDE" placeholder="请输入内容" disabled style="width: 100%" @focus="handleMap"/>
+                <el-button style="margin-left:10px" @click="handleMap">
+                  <span class="svg-container">
+                    <svg-icon icon-class="international" />
+                  </span>
+                </el-button>
+              </div>
             </el-form-item>
+          </el-col>
+        </el-row>
         <el-form-item label="应急通讯车数" prop="EMERGENCY_COMMUNICATION_VEHICLES">
           <el-input v-model="form.EMERGENCY_COMMUNICATION_VEHICLES" placeholder="请输入应急通讯车数..." />
         </el-form-item>
@@ -152,7 +165,38 @@
         <el-button type="primary" @click="confirm">确定</el-button>
       </div>
     </el-dialog>
+    <!-- 坐标选择 -->
+    <el-dialog :visible.sync="dialogFormMap" title="编辑坐标" width="800px" class="dy-dialog">
+      <baidu-map
+        v-loading="loadingMap"
+        :zoom="zoom"
+        :scroll-wheel-zoom="true"
+        :style="{height: clientHeight+'px'}"
+        @click="getClickInfo"
+        @ready="handler">
+        <bm-view style="width: 100%; height:100%; flex: 1" />
+        <bm-control ref="control" :offset="{width: 10, height: 10}" anchor="BMAP_ANCHOR_TOP_LEFT">
+          <div class="map-flex">
 
+            <div class="map-lable">关键词：</div>
+            <div style="flex:1;">
+              <el-autocomplete v-model="addressKeyword" :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="请输入详细地址" style="width:100%" @select="handleSelect" />
+            </div>
+            <!--            <el-input v-model="addressKeyword" style="width: 200px" placeholder="请输入内容" />-->
+            <!--            <el-button slot="append" icon="el-icon-search" @click="mapNameChange"/>-->
+          </div>
+        </bm-control>
+        <!--        <bm-local-search :keyword="addressKeyword" :auto-viewport="true"/>-->
+      </baidu-map>
+      <div slot="footer" class="dialog-footer">
+        <span>经度：</span>
+        <el-input v-model="LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
+        <span>纬度：</span>
+        <el-input v-model="LATITUDE" style="width: 200px" placeholder="请输入内容" disabled />
+        <el-button @click="dialogFormMap = false">取 消</el-button>
+        <el-button type="primary" @click="setPosition">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -165,6 +209,21 @@ export default {
   components: { Treeselect, Pagination },
   data() {
     return {
+      // 地图相关
+      CORPINFO_ID: this.$parent.CORPINFO_ID,
+      clientHeight: 600,
+      loadingMap: true,
+      listLoading: false,
+      buttonloading: false,
+      BMap: '',
+      map: '',
+      showMap: false,
+      addressKeyword: '',
+      pointLngLat: '',
+      zoom: 10,
+      dialogFormMap: false,
+      LATITUDE: '',
+      LONGITUDE: '',
       listQuery: {
         page: 1,
         limit: 10
@@ -376,8 +435,126 @@ export default {
         console.error('获取树形数据失败', e)
       })
     },
-    //* *******************列表查询******************************
 
+    //* **************地图相关*****************
+    // 地图相关
+    mapOpen() {
+      this.top = this.getScrollTop()
+      if (this.top) {
+        this.setScrollTop(0)
+      }
+    },
+    // 关闭地图后调用
+    mapClose() {
+      this.setScrollTop(this.top)
+      this.top = 0
+      this.showMap = false
+    },
+    getScrollTop() {
+      let scrollTop = 0
+      if (document.documentElement && document.documentElement.scrollTop) {
+        scrollTop = document.documentElement.scrollTop
+      } else if (document.body) {
+        scrollTop = document.body.scrollTop
+      }
+      return scrollTop
+    },
+    setScrollTop(top) {
+      if (!isNaN(top)) {
+        if (document.documentElement && document.documentElement.scrollTop !== undefined) {
+          document.documentElement.scrollTop = top
+        } else if (document.body) {
+          document.body.scrollTop = top
+        }
+      }
+    },
+    // 地图初始化
+    handler({ BMap, map }) {
+      this.mapOpen()
+      this.BMap = BMap
+      this.map = map
+      this.loadingMap = true
+      var geolocation = new BMap.Geolocation()
+      const myGeo = new BMap.Geocoder()
+      var $this = this
+      // 调用百度地图api 中的获取当前位置接口
+      geolocation.getCurrentPosition(function(r) {
+        myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result) {
+          if (result) {
+            $this.loadingMap = false
+            $this.$set($this, 'pointLngLat', { lng: result.point.lng, lat: result.point.lat })
+            map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放,默认关闭
+            $this.setCenter({ BMap, map })
+          }
+        })
+      })
+    },
+    // 搜索地图
+    querySearch(queryString, cb) {
+      var options = {
+        onSearchComplete: function(results) {
+          if (local.getStatus() === 0) {
+            // 判断状态是否正确
+            var s = []
+            for (var i = 0; i < results.getCurrentNumPois(); i++) {
+              var x = results.getPoi(i)
+              var item = { value: x.address + x.title, point: x.point }
+              s.push(item)
+              cb(s)
+            }
+          } else {
+            cb()
+          }
+        }
+      }
+      var local = new this.BMap.LocalSearch(this.map, options)
+      local.search(queryString)
+    },
+    handleSelect(item) {
+      var { point } = item
+      this.map.clearOverlays() // 清除地图上所有覆盖物
+      this.map.centerAndZoom(point, this.zoom)
+      const marker = new this.BMap.Marker(point) // 创建标注
+      this.map.addOverlay(marker) // 将标注添加到地图中
+      marker.enableDragging() // 可拖拽
+      this.LONGITUDE = point.lng
+      this.LATITUDE = point.lat
+    },
+    // 设置打开中心位置
+    setCenter({ BMap, map }) {
+      var lng = ''
+      var lat = ''
+      if (this.form.LONGITUDE == '' || this.form.LATITUDE == '') {
+        lng = '119.525971'
+        lat = '39.894727'
+      } else {
+        lng = this.form.LONGITUDE
+        lat = this.form.LATITUDE
+      }
+      var point = new BMap.Point(lng, lat)
+      // var point = new BMap.Point(this.form.LONGITUDE, this.form.LATITUDE)
+      const zoom = map.getZoom()
+      setTimeout(() => {
+        map.centerAndZoom(point, zoom)
+      }, 0)
+      // var marker = new BMap.Marker(point) // 创建标注
+      // map.addOverlay(marker) // 将标注添加到地图中
+    },
+    handleMap() {
+      this.dialogFormMap = true
+      this.LATITUDE = this.form.LATITUDE
+      this.LONGITUDE = this.form.LONGITUDE
+    },
+    getClickInfo(e) {
+      this.LONGITUDE = e.point.lng
+      this.LATITUDE = e.point.lat
+    },
+    setPosition() {
+      this.dialogFormMap = false
+      this.form.LATITUDE = this.LATITUDE
+      this.form.LONGITUDE = this.LONGITUDE
+    },
+    //* *******************列表查询******************************
     getList() {
       this.listLoading = true
       requestFN(
@@ -454,6 +631,8 @@ export default {
     handleAdd() {
       this.dialogFormEdit = true
       this.form = {}
+      this.form.LONGITUDE = ''
+      this.form.LATITUDE = ''
       this.dialogType = 'saveUser'
       this.$refs.upload.clearFiles()
     },

src/views/emergen_cyrescue/emergency_information/security_agency/transportation_management/components/detail.vue

@@ -1,66 +1,116 @@
 <template>
+  <div>
     <div class="app-container">
-    <div class="filter-container" style="display: flex; justify-content: space-between;">
+      <div class="level-title">
-      <div>
+        <h1>运输保障机构详情</h1>
-        <el-tag>详情</el-tag>
       </div>
-      <div>
+      <div class="mb-20">
+        <table class="table-ui">
+          <tr>
+            <td class="tbg">运输机构名称</td>
+            <td>{{ form.ORG_NAME }}</td>
+            <td class="tbg">地址</td>
+            <td>{{ form.ADDRESS }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">运输机构类型</td>
+            <td>{{ form.ORG_TYPE }}</td>
+            <td class="tbg">运输机构级别</td>
+            <td>{{ form.ORG_LEVEL }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">邮编</td>
+            <td>{{ form.POSTAL_CODE }}</td>
+            <td class="tbg">机构密级</td>
+            <td>{{ form.SECURITY_LEVEL }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">值班电话</td>
+            <td>{{ form.DUTY_PHONE }}</td>
+            <td class="tbg">传真</td>
+            <td>{{ form.FAX }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">所属区域</td>
+            <td colspan="3">{{ form.ADMINISTRATIVE_REGION_NAME }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">经度</td>
+            <td>{{ form.LONGITUDE }}</td>
+            <td class="tbg">纬度</td>
+            <td>{{ form.LATITUDE }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">应急运输方式</td>
+            <td colspan="3">{{ form.EMERGENCY_TRANSPORT_MODE }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">负责人</td>
+            <td>{{ form.RESPONSIBLE_PERSON }}</td>
+            <td class="tbg">负责人办公电话</td>
+            <td>{{ form.RESPONSIBLE_OFFICE_PHONE }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">负责人移动电话</td>
+            <td>{{ form.RESPONSIBLE_MOBILE_PHONE }}</td>
+            <td class="tbg">负责人住宅电话</td>
+            <td>{{ form.RESPONSIBLE_HOME_PHONE }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">联系人</td>
+            <td>{{ form.CONTACT_PERSON }}</td>
+            <td class="tbg">联系人办公电话</td>
+            <td>{{ form.CONTACT_OFFICE_PHONE }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">联系人移动电话</td>
+            <td>{{ form.CONTACT_MOBILE_PHONE }}</td>
+            <td class="tbg">联系人住宅电话</td>
+            <td>{{ form.CONTACT_HOME_PHONE }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">联系人电子邮箱</td>
+            <td>{{ form.CONTACT_EMAIL }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">主管单位名称</td>
+            <td>{{ form.SUPERVISING_UNIT_NAME }}</td>
+            <td class="tbg">主管单位地址</td>
+            <td>{{ form.SUPERVISING_UNIT_ADDRESS }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">企业基本情况</td>
+            <td colspan="3">{{ form.COMPANY_OVERVIEW }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">客运能力</td>
+            <td>{{ form.PASSENGER_TRANSPORT_CAPACITY }}</td>
+            <td class="tbg">货运能力</td>
+            <td>{{ form.CARGO_TRANSPORT_CAPACITY }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">应急能力描述</td>
+            <td colspan="3">{{ form.EMERGENCY_CAPACITY_DESCRIPTION }}</td>
+          </tr>
+          <tr>
+            <td class="tbg">备注</td>
+            <td colspan="3">{{ form.REMARK }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div class="ui-height" />
+    <div class="ui-foot">
       <el-button type="primary" @click="goBack">返回基本信息</el-button>
     </div>
   </div>
-    <el-table ref="multipleTable" :data="[form]" :header-cell-style="{'font-weight': 'bold','color': '#000'}" tooltip-effect="dark" border fit highlight-current-row>
-      <el-table-column type="index" label="序号" width="50" align="center" />
-      <el-table-column prop="ORG_NAME" label="运输机构名称" />
-      <el-table-column prop="ORG_TYPE" label="运输机构类型" />
-      <el-table-column prop="ORG_LEVEL" label="运输机构级别" />
-      <el-table-column prop="ADDRESS" label="地址" />
-      <el-table-column prop="POSTAL_CODE" label="邮编" />
-      <el-table-column prop="SECURITY_LEVEL" label="机构密级" />
-      <el-table-column prop="DUTY_PHONE" label="值班电话" />
-      <el-table-column prop="ADMINISTRATIVE_REGION_NAME" label="所属区域" />
-      <el-table-column prop="LONGITUDE" label="经度" />
-      <el-table-column prop="LATITUDE" label="纬度" />
-      <el-table-column prop="EMERGENCY_TRANSPORT_MODE" label="应急运输方式" />
-      <el-table-column prop="RESPONSIBLE_PERSON" label="负责人" />
-      <el-table-column prop="RESPONSIBLE_OFFICE_PHONE" label="负责人办公电话" />
-      <el-table-column prop="RESPONSIBLE_MOBILE_PHONE" label="负责人移动电话" />
-      <el-table-column prop="RESPONSIBLE_HOME_PHONE" label="负责人住宅电话" />
-      <el-table-column prop="CONTACT_PERSON" label="联系人" />
-      <el-table-column prop="CONTACT_OFFICE_PHONE" label="联系人办公电话" />
-      <el-table-column prop="CONTACT_MOBILE_PHONE" label="联系人移动电话" />
-      <el-table-column prop="CONTACT_HOME_PHONE" label="联系人住宅电话" />
-      <el-table-column prop="CONTACT_EMAIL" label="联系人电子邮箱" />
-      <el-table-column prop="SUPERVISING_UNIT" label="主管单位" />
-      <el-table-column prop="SUPERVISING_UNIT_ADDRESS" label="主管单位地址" />
-      <el-table-column prop="COMPANY_OVERVIEW" label="企业基本情况" />
-      <el-table-column prop="PASSENGER_TRANSPORT_CAPACITY" label="客运能力" />
-      <el-table-column prop="CARGO_TRANSPORT_CAPACITY" label="货运能力" />
-      <el-table-column prop="EMERGENCY_CAPACITY_DESCRIPTION" label="应急能力描述" />
-      <el-table-column prop="REMARK" label="备注" />
-    </el-table>
-  </div>
 </template>
-
 <script>
-import Pagination from '@/components/Pagination'
 import { requestFN } from '@/utils/request'
-import { Treeselect } from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 export default {
-  components: { Pagination, Treeselect },
   data() {
     return {
-      listQuery: {
-        page: 1,
-        limit: 10
-      },
-      total: 0,
-      varList: [],
-      KEYWORDS: '',
-      dialogFormEdit: false,
-      dialogFormShow: false,
-      dialogType: 'add',
       form: {
         ORG_NAME: '',
         ORG_TYPE: '',
@@ -69,6 +119,7 @@ export default {
         POSTAL_CODE: '',
         SECURITY_LEVEL: '',
         DUTY_PHONE: '',
+        FAX: '',
         ADMINISTRATIVE_REGION: '',
         ADMINISTRATIVE_REGION_NAME: '',
         LONGITUDE: '',
@@ -84,62 +135,29 @@ export default {
         CONTACT_HOME_PHONE: '',
         CONTACT_EMAIL: '',
         SUPERVISING_UNIT: '',
+        SUPERVISING_UNIT_NAME: '',
         SUPERVISING_UNIT_ADDRESS: '',
         COMPANY_OVERVIEW: '',
         PASSENGER_TRANSPORT_CAPACITY: '',
         CARGO_TRANSPORT_CAPACITY: '',
         EMERGENCY_CAPACITY_DESCRIPTION: '',
-        REMARK: '',
+        REMARK: ''
-        CONTENT: '',
-        FILE_URL: ''
       },
-      Id: '',
+      Id: ''
-      treeData: [],
-      DepartmentData: [],
-      normalizer(node) {
-        return {
-          id: node.DICTIONARIES_ID,
-          label: node.name,
-          children: node.nodes
-        }
-      }
     }
   },
-
   created() {
     if (this.$parent.CASE_ID) {
       this.Id = this.$parent.CASE_ID
       this.getDetail(this.Id)
     }
-    this.getTreeList()
-    this.getDepartmentList()
   },
   methods: {
     goBack() {
       this.$parent.activeName = 'list'
     },
-    getTreeList() {
-      const params = {
-        PARENT_ID: '5a5d2809ed644aa6ba97a5240ff35484'
-      }
-      requestFN('/dictionaries/listTree', params).then((data) => {
-        this.treeData = JSON.parse(data.zTreeNodes)
-      }).catch((e) => {
-        console.error('获取树形数据失败', e)
-      })
-    },
-    getDepartmentList() {
-      requestFN('/department/listAll').then((data) => {
-        this.DepartmentData = data.list.map(item => ({
-          id: item.department_ID,
-          label: item.name
-        }))
-      }).catch((e) => {
-        console.error('获取主管单位数据失败', e)
-      })
-    },
     getDetail(Id) {
-      const params = { Id: Id }
+      const params = { Id }
       requestFN('/major/transportation/detail', params).then((response) => {
         const data = response.msg
         this.form = {
@@ -150,6 +168,7 @@ export default {
           POSTAL_CODE: data.POSTAL_CODE,
           SECURITY_LEVEL: data.SECURITY_LEVEL,
           DUTY_PHONE: data.DUTY_PHONE,
+          FAX: data.FAX,
           ADMINISTRATIVE_REGION: data.ADMINISTRATIVE_REGION,
           ADMINISTRATIVE_REGION_NAME: data.ADMINISTRATIVE_REGION_NAME,
           LONGITUDE: data.LONGITUDE,
@@ -165,14 +184,13 @@ export default {
           CONTACT_HOME_PHONE: data.CONTACT_HOME_PHONE,
           CONTACT_EMAIL: data.CONTACT_EMAIL,
           SUPERVISING_UNIT: data.SUPERVISING_UNIT,
+          SUPERVISING_UNIT_NAME: data.SUPERVISING_UNIT_NAME,
           SUPERVISING_UNIT_ADDRESS: data.SUPERVISING_UNIT_ADDRESS,
           COMPANY_OVERVIEW: data.COMPANY_OVERVIEW,
           PASSENGER_TRANSPORT_CAPACITY: data.PASSENGER_TRANSPORT_CAPACITY,
           CARGO_TRANSPORT_CAPACITY: data.CARGO_TRANSPORT_CAPACITY,
           EMERGENCY_CAPACITY_DESCRIPTION: data.EMERGENCY_CAPACITY_DESCRIPTION,
-          REMARK: data.REMARK,
+          REMARK: data.REMARK
-          CONTENT: data.CONTENT,
-          FILE_URL: data.FILE_URL
         }
       }).catch((e) => {
         console.error('获取详情数据失败', e)
@@ -181,3 +199,13 @@ export default {
   }
 }
 </script>
+<style lang="sass" scoped>
+.table-ui
+  td
+    line-height: 34px
+  .tbg
+    width: 200px
+.ui-foot
+  text-align: center
+  margin-top: 20px
+</style>

src/views/emergen_cyrescue/emergency_information/security_agency/transportation_management/components/list.vue

@@ -74,12 +74,25 @@
             no-children-text="暂无数据"
           />
         </el-form-item>
-        <el-form-item label="经度" prop="LONGITUDE">
+        <el-row :gutter="20">
-          <el-input v-model="form.LONGITUDE" placeholder="请输入经度..." />
+          <el-col :span="12">
+            <el-form-item :key="form.LONGITUDE" label="经度" prop="LONGITUDE">
+              <el-input v-model="form.LONGITUDE" placeholder="请输入内容" disabled @focus="handleMap" />
             </el-form-item>
-        <el-form-item label="纬度" prop="LATITUDE">
+          </el-col>
-          <el-input v-model="form.LATITUDE" placeholder="请输入纬度..." />
+          <el-col :span="12">
+            <el-form-item :key="form.LATITUDE" label="纬度" prop="LATITUDE">
+              <div style="display: flex">
+                <el-input v-model="form.LATITUDE" placeholder="请输入内容" disabled style="width: 100%" @focus="handleMap"/>
+                <el-button style="margin-left:10px" @click="handleMap">
+                  <span class="svg-container">
+                    <svg-icon icon-class="international" />
+                  </span>
+                </el-button>
+              </div>
             </el-form-item>
+          </el-col>
+        </el-row>
         <el-form-item label="应急运输方式" prop="EMERGENCY_TRANSPORT_MODE">
           <el-input v-model="form.EMERGENCY_TRANSPORT_MODE" placeholder="请输入应急运输方式..." />
         </el-form-item>
@@ -117,6 +130,7 @@
             placeholder="请选择主管单位"
             no-options-text="暂无数据"
             no-children-text="暂无数据"
+            @input="handleDepartmentChange"
           />
         </el-form-item>
         <el-form-item label="主管单位地址" prop="SUPERVISING_UNIT_ADDRESS">
@@ -143,6 +157,38 @@
         <el-button type="primary" @click="confirm">确 定</el-button>
       </div>
     </el-dialog>
+    <!-- 坐标选择 -->
+    <el-dialog :visible.sync="dialogFormMap" title="编辑坐标" width="800px" class="dy-dialog">
+      <baidu-map
+        v-loading="loadingMap"
+        :zoom="zoom"
+        :scroll-wheel-zoom="true"
+        :style="{height: clientHeight+'px'}"
+        @click="getClickInfo"
+        @ready="handler">
+        <bm-view style="width: 100%; height:100%; flex: 1" />
+        <bm-control ref="control" :offset="{width: 10, height: 10}" anchor="BMAP_ANCHOR_TOP_LEFT">
+          <div class="map-flex">
+
+            <div class="map-lable">关键词：</div>
+            <div style="flex:1;">
+              <el-autocomplete v-model="addressKeyword" :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="请输入详细地址" style="width:100%" @select="handleSelect" />
+            </div>
+            <!--            <el-input v-model="addressKeyword" style="width: 200px" placeholder="请输入内容" />-->
+            <!--            <el-button slot="append" icon="el-icon-search" @click="mapNameChange"/>-->
+          </div>
+        </bm-control>
+        <!--        <bm-local-search :keyword="addressKeyword" :auto-viewport="true"/>-->
+      </baidu-map>
+      <div slot="footer" class="dialog-footer">
+        <span>经度：</span>
+        <el-input v-model="LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
+        <span>纬度：</span>
+        <el-input v-model="LATITUDE" style="width: 200px" placeholder="请输入内容" disabled />
+        <el-button @click="dialogFormMap = false">取 消</el-button>
+        <el-button type="primary" @click="setPosition">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -155,6 +201,21 @@ export default {
   components: { Treeselect, Pagination },
   data() {
     return {
+      // 地图相关
+      CORPINFO_ID: this.$parent.CORPINFO_ID,
+      clientHeight: 600,
+      loadingMap: true,
+      listLoading: false,
+      buttonloading: false,
+      BMap: '',
+      map: '',
+      showMap: false,
+      addressKeyword: '',
+      pointLngLat: '',
+      zoom: 10,
+      dialogFormMap: false,
+      LATITUDE: '',
+      LONGITUDE: '',
       listQuery: {
         page: 1,
         limit: 10
@@ -189,6 +250,7 @@ export default {
         CONTACT_HOME_PHONE: '',
         CONTACT_EMAIL: '',
         SUPERVISING_UNIT: '',
+        SUPERVISING_UNIT_NAME: '',
         SUPERVISING_UNIT_ADDRESS: '',
         COMPANY_OVERVIEW: '',
         PASSENGER_TRANSPORT_CAPACITY: '',
@@ -325,6 +387,12 @@ export default {
     this.getDepartmentList()
   },
   methods: {
+    handleDepartmentChange(value) {
+      const selectedDepartment = this.DepartmentData.find(department => department.id === value)
+      if (selectedDepartment) {
+        this.form.SUPERVISING_UNIT_NAME = selectedDepartment.label
+      }
+    },
     resetQuery() {
       this.KEYWORDS_ORG_NAME = ''
       this.KEYWORDS_ORG_TYPE = ''
@@ -355,6 +423,124 @@ export default {
         console.error('获取树形数据失败', e)
       })
     },
+    //* **************地图相关*****************
+    // 地图相关
+    mapOpen() {
+      this.top = this.getScrollTop()
+      if (this.top) {
+        this.setScrollTop(0)
+      }
+    },
+    // 关闭地图后调用
+    mapClose() {
+      this.setScrollTop(this.top)
+      this.top = 0
+      this.showMap = false
+    },
+    getScrollTop() {
+      let scrollTop = 0
+      if (document.documentElement && document.documentElement.scrollTop) {
+        scrollTop = document.documentElement.scrollTop
+      } else if (document.body) {
+        scrollTop = document.body.scrollTop
+      }
+      return scrollTop
+    },
+    setScrollTop(top) {
+      if (!isNaN(top)) {
+        if (document.documentElement && document.documentElement.scrollTop !== undefined) {
+          document.documentElement.scrollTop = top
+        } else if (document.body) {
+          document.body.scrollTop = top
+        }
+      }
+    },
+    // 地图初始化
+    handler({ BMap, map }) {
+      this.mapOpen()
+      this.BMap = BMap
+      this.map = map
+      this.loadingMap = true
+      var geolocation = new BMap.Geolocation()
+      const myGeo = new BMap.Geocoder()
+      var $this = this
+      // 调用百度地图api 中的获取当前位置接口
+      geolocation.getCurrentPosition(function(r) {
+        myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result) {
+          if (result) {
+            $this.loadingMap = false
+            $this.$set($this, 'pointLngLat', { lng: result.point.lng, lat: result.point.lat })
+            map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放,默认关闭
+            $this.setCenter({ BMap, map })
+          }
+        })
+      })
+    },
+    // 搜索地图
+    querySearch(queryString, cb) {
+      var options = {
+        onSearchComplete: function(results) {
+          if (local.getStatus() === 0) {
+            // 判断状态是否正确
+            var s = []
+            for (var i = 0; i < results.getCurrentNumPois(); i++) {
+              var x = results.getPoi(i)
+              var item = { value: x.address + x.title, point: x.point }
+              s.push(item)
+              cb(s)
+            }
+          } else {
+            cb()
+          }
+        }
+      }
+      var local = new this.BMap.LocalSearch(this.map, options)
+      local.search(queryString)
+    },
+    handleSelect(item) {
+      var { point } = item
+      this.map.clearOverlays() // 清除地图上所有覆盖物
+      this.map.centerAndZoom(point, this.zoom)
+      const marker = new this.BMap.Marker(point) // 创建标注
+      this.map.addOverlay(marker) // 将标注添加到地图中
+      marker.enableDragging() // 可拖拽
+      this.LONGITUDE = point.lng
+      this.LATITUDE = point.lat
+    },
+    // 设置打开中心位置
+    setCenter({ BMap, map }) {
+      var lng = ''
+      var lat = ''
+      if (this.form.LONGITUDE == '' || this.form.LATITUDE == '') {
+        lng = '119.525971'
+        lat = '39.894727'
+      } else {
+        lng = this.form.LONGITUDE
+        lat = this.form.LATITUDE
+      }
+      var point = new BMap.Point(lng, lat)
+      // var point = new BMap.Point(this.form.LONGITUDE, this.form.LATITUDE)
+      const zoom = map.getZoom()
+      setTimeout(() => {
+        map.centerAndZoom(point, zoom)
+      }, 0)
+      // var marker = new BMap.Marker(point) // 创建标注
+      // map.addOverlay(marker) // 将标注添加到地图中
+    },
+    handleMap() {
+      this.dialogFormMap = true
+      this.LATITUDE = this.form.LATITUDE
+      this.LONGITUDE = this.form.LONGITUDE
+    },
+    getClickInfo(e) {
+      this.LONGITUDE = e.point.lng
+      this.LATITUDE = e.point.lat
+    },
+    setPosition() {
+      this.dialogFormMap = false
+      this.form.LATITUDE = this.LATITUDE
+      this.form.LONGITUDE = this.LONGITUDE
+    },
     //* *******************列表查询******************************
 
     getList() {
@@ -410,6 +596,7 @@ export default {
           CONTACT_HOME_PHONE: data.CONTACT_HOME_PHONE,
           CONTACT_EMAIL: data.CONTACT_EMAIL,
           SUPERVISING_UNIT: data.SUPERVISING_UNIT,
+          SUPERVISING_UNIT_NAME: data.SUPERVISING_UNIT_NAME,
           SUPERVISING_UNIT_ADDRESS: data.SUPERVISING_UNIT_ADDRESS,
           COMPANY_OVERVIEW: data.COMPANY_OVERVIEW,
           PASSENGER_TRANSPORT_CAPACITY: data.PASSENGER_TRANSPORT_CAPACITY,
@@ -425,6 +612,8 @@ export default {
     handleAdd() {
       this.dialogFormEdit = true
       this.form = {}
+      this.form.LONGITUDE = ''
+      this.form.LATITUDE = ''
       this.dialogType = 'saveUser'
       this.$refs.upload.clearFiles()
     },