glj-冲突解决

src/views/dataService/multimediaData/index.vue

@@ -242,6 +242,12 @@ const getDisasterData = () => {
   }
   getList(param).then(res => {
     state.disasterData.data = res.records;
+    console.log(state.disasterData.data[0],"state.disasterData.data[0]");
+    
+    state.disasterId = state.disasterData.data[0].disasterId;
+    console.log(state.disasterId ,"state.disasterId ");
+    
+    getTableData()
     state.disasterData.data.forEach(item => {
       let date = item.disasterTime.slice(0, 10);
       item.disasterTime = date;
@@ -335,7 +341,6 @@ const onHandleCurrentChange = (val) => {
 // 页面加载时
 onMounted(() => {
   getDisasterData();
-  getTableData();
   getDictionary({ code: 'disaster' }).then((res) => {
     state.disasterTypeList = res;
   });

src/views/responseManagement/userResponse/index.vue

@@ -1,167 +1,333 @@
 <template>
   <div class="system-role-container layout-padding">
-    <el-config-provider :locale="en">
+    <el-config-provider :locale="en"
+                        style="position: relative;">
       <div class="system-role-padding layout-padding-auto layout-padding-view">
-        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin-left: 20px">
+        <el-tabs v-model="activeName"
-          <el-tab-pane label="Unapproved" name="first">
+                 class="demo-tabs"
-            <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
+                 @tab-click="handleClick"
-              <el-table-column prop="username" label="User name" show-overflow-tooltip sortable></el-table-column>
+                 style="margin-left: 20px">
-              <el-table-column prop="organization" label="Organization" show-overflow-tooltip sortable></el-table-column>
+          <el-tab-pane label="Unapproved"
-              <el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip sortable>
+                       name="first">
+            <el-table :data="state.tableData.data"
+                      v-loading="state.tableData.loading"
+                      style="width: 100%">
+              <el-table-column prop="username"
+                               label="User name"
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <el-table-column prop="organization"
+                               label="Organization"
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <el-table-column prop="disasterType"
+                               label="Disaster type"
+                               show-overflow-tooltip
+                               sortable>
                 <!-- 在disasterType中获取dictKey 对应的dictValue -->
                 <template #default="scope">
                   <el-tag type="info">{{ getValue(scope.row.disasterType) }}</el-tag>
                 </template>
               </el-table-column>
-              <el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip
+              <el-table-column prop="disasterKeyword"
+                               label="Disaster keyword"
+                               show-overflow-tooltip
                                sortable></el-table-column>
-              <el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable>
+              <el-table-column prop="disasterTime"
+                               label="Disaster time"
+                               show-overflow-tooltip
+                               sortable>
                 <template #default="scope">
                   <!-- 格式化去除时分秒 -->
                   {{ dateFormat(scope.row.disasterTime) }}
                 </template>
               </el-table-column>
-              <el-table-column prop="respondStatus" label="Response status" show-overflow-tooltip sortable>
+              <el-table-column prop="respondStatus"
+                               label="Response status"
+                               show-overflow-tooltip
+                               sortable>
                 <template #default="scope">
-                  <el-tag type="info" v-if="scope.row.respondStatus === 0">Awaiting approval</el-tag>
+                  <el-tag type="info"
-                  <el-tag type="info" v-if="scope.row.respondStatus === 1">Rejected</el-tag>
+                          v-if="scope.row.respondStatus === 0">Awaiting approval</el-tag>
+                  <el-tag type="info"
+                          v-if="scope.row.respondStatus === 1">Rejected</el-tag>
                 </template>
               </el-table-column>
-              <el-table-column prop="Operate" label="Operate" show-overflow-tooltip sortable>
+              <el-table-column prop="Operate"
+                               label="Operate"
+                               show-overflow-tooltip
+                               sortable>
                 <template #default="scope">
-                  <el-button size="small" text type="primary"
+                  <el-button size="small"
+                             text
+                             type="primary"
                              @click="onOpenEditRole('edit', scope.row)">Approve</el-button>
                 </template>
               </el-table-column>
             </el-table>
-            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
+            <el-pagination @size-change="onHandleSizeChange"
-              :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.current" background
+                           @current-change="onHandleCurrentChange"
-              v-model:page-size="state.tableData.param.size" layout="total, sizes, prev, pager, next, jumper"
+                           class="mt15"
+                           :pager-count="5"
+                           :page-sizes="[10, 20, 30]"
+                           v-model:current-page="state.tableData.param.current"
+                           background
+                           v-model:page-size="state.tableData.param.size"
+                           layout="total, sizes, prev, pager, next, jumper"
                            :total="state.tableData.total">
             </el-pagination>
           </el-tab-pane>
 
-          <el-tab-pane label="Approved" name="second">
+          <el-tab-pane label="Approved"
-            <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
+                       name="second">
+            <el-table :data="state.tableData.data"
+                      v-loading="state.tableData.loading"
+                      style="width: 100%">
 
-              <el-table-column prop="username" label="User name" show-overflow-tooltip sortable></el-table-column>
+              <el-table-column prop="username"
-              <el-table-column prop="organization" label="Organization" show-overflow-tooltip sortable></el-table-column>
+                               label="User name"
-              <el-table-column prop="email" label="Email" show-overflow-tooltip sortable></el-table-column>
+                               show-overflow-tooltip
-              <el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip sortable>
+                               sortable></el-table-column>
+              <el-table-column prop="organization"
+                               label="Organization"
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <el-table-column prop="email"
+                               label="Email"
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <el-table-column prop="disasterType"
+                               label="Disaster type"
+                               show-overflow-tooltip
+                               sortable>
                 <!-- 在disasterType中获取dictKey 对应的dictValue -->
                 <template #default="scope">
                   <el-tag type="info">{{ getValue(scope.row.disasterType) }}</el-tag>
                 </template>
               </el-table-column>
-              <el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip
+              <el-table-column prop="disasterKeyword"
+                               label="Disaster keyword"
+                               show-overflow-tooltip
                                sortable></el-table-column>
-              <el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable>
+              <el-table-column prop="disasterTime"
+                               label="Disaster time"
+                               show-overflow-tooltip
+                               sortable>
                 <template #default="scope">
                   <!-- 格式化去除时分秒 -->
                   {{ dateFormat(scope.row.disasterTime) }}
                 </template>
               </el-table-column>
-              <el-table-column prop="chiefName" label="Answer" show-overflow-tooltip sortable></el-table-column>
+              <el-table-column prop="chiefName"
-              <el-table-column prop="reviewTime" label="reviewTime" show-overflow-tooltip sortable />
+                               label="Answer"
-              <el-table-column width="170" prop="respondStatus" label="Response status" show-overflow-tooltip sortable>
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <el-table-column prop="reviewTime"
+                               label="reviewTime"
+                               show-overflow-tooltip
+                               sortable />
+              <el-table-column width="170"
+                               prop="respondStatus"
+                               label="Response status"
+                               show-overflow-tooltip
+                               sortable>
                 <template #default="scope">
-                  <el-tag type="info" v-if="scope.row.respondStatus === 2">Approved</el-tag>
+                  <el-tag type="info"
-                  <el-tag type="info" v-if="scope.row.respondStatus === 1">Rejected</el-tag>
+                          v-if="scope.row.respondStatus === 2">Approved</el-tag>
-                  <el-tag type="success" v-if="scope.row.respondStatus === 3">Complete response</el-tag>
+                  <el-tag type="info"
+                          v-if="scope.row.respondStatus === 1">Rejected</el-tag>
+                  <el-tag type="success"
+                          v-if="scope.row.respondStatus === 3">Complete response</el-tag>
                 </template>
               </el-table-column>
-              <el-table-column width="200" prop="Operate" label="Operate" show-overflow-tooltip sortable>
+              <el-table-column width="200"
+                               prop="Operate"
+                               label="Operate"
+                               show-overflow-tooltip
+                               sortable>
                 <template #default="scope">
-                  <el-button size="small" text type="primary" @click="onAllocation(scope.row)">Allocation</el-button>
+                  <el-button size="small"
-                  <el-button size="small" text type="danger" @click="responseEnded(scope.row)">Response ended</el-button>
+                             text
+                             type="primary"
+                             @click="onAllocation(scope.row)">Allocation</el-button>
+                  <el-button size="small"
+                             text
+                             type="danger"
+                             @click="responseEnded(scope.row)">Response ended</el-button>
                 </template>
               </el-table-column>
             </el-table>
-            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
+            <el-pagination @size-change="onHandleSizeChange"
-              :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.current" background
+                           @current-change="onHandleCurrentChange"
-              v-model:page-size="state.tableData.param.size" layout="total, sizes, prev, pager, next, jumper"
+                           class="mt15"
+                           :pager-count="5"
+                           :page-sizes="[10, 20, 30]"
+                           v-model:current-page="state.tableData.param.current"
+                           background
+                           v-model:page-size="state.tableData.param.size"
+                           layout="total, sizes, prev, pager, next, jumper"
                            :total="state.tableData.total">
             </el-pagination>
           </el-tab-pane>
 
-
+          <el-tab-pane label="Rejected"
-          <el-tab-pane label="Rejected" name="firstNew">
+                       name="firstNew">
-            <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
+            <el-table :data="state.tableData.data"
-              <el-table-column prop="username" label="User name" show-overflow-tooltip sortable></el-table-column>
+                      v-loading="state.tableData.loading"
-              <el-table-column prop="organization" label="Organization" show-overflow-tooltip sortable></el-table-column>
+                      style="width: 100%">
-              <el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip sortable>
+              <el-table-column prop="username"
+                               label="User name"
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <el-table-column prop="organization"
+                               label="Organization"
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <el-table-column prop="disasterType"
+                               label="Disaster type"
+                               show-overflow-tooltip
+                               sortable>
                 <!-- 在disasterType中获取dictKey 对应的dictValue -->
                 <template #default="scope">
                   <el-tag type="info">{{ getValue(scope.row.disasterType) }}</el-tag>
                 </template>
               </el-table-column>
-              <el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip
+              <el-table-column prop="disasterKeyword"
+                               label="Disaster keyword"
+                               show-overflow-tooltip
                                sortable></el-table-column>
-              <el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable>
+              <el-table-column prop="disasterTime"
+                               label="Disaster time"
+                               show-overflow-tooltip
+                               sortable>
                 <template #default="scope">
                   <!-- 格式化去除时分秒 -->
                   {{ dateFormat(scope.row.disasterTime) }}
                 </template>
               </el-table-column>
             </el-table>
-            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
+            <el-pagination @size-change="onHandleSizeChange"
-              :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.current" background
+                           @current-change="onHandleCurrentChange"
-              v-model:page-size="state.tableData.param.size" layout="total, sizes, prev, pager, next, jumper"
+                           class="mt15"
+                           :pager-count="5"
+                           :page-sizes="[10, 20, 30]"
+                           v-model:current-page="state.tableData.param.current"
+                           background
+                           v-model:page-size="state.tableData.param.size"
+                           layout="total, sizes, prev, pager, next, jumper"
                            :total="state.tableData.total">
             </el-pagination>
           </el-tab-pane>
 
-
+          <el-tab-pane label="Finish"
-          <el-tab-pane label="Finish" name="firstNewOne">
+                       name="firstNewOne">
-            <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
+            <el-table :data="state.tableData.data"
-              <el-table-column prop="username" label="User name" show-overflow-tooltip sortable></el-table-column>
+                      v-loading="state.tableData.loading"
-              <el-table-column prop="organization" label="Organization" show-overflow-tooltip sortable></el-table-column>
+                      style="width: 100%">
-              <el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip sortable>
+              <el-table-column prop="username"
+                               label="User name"
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <el-table-column prop="organization"
+                               label="Organization"
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <el-table-column prop="disasterType"
+                               label="Disaster type"
+                               show-overflow-tooltip
+                               sortable>
                 <!-- 在disasterType中获取dictKey 对应的dictValue -->
                 <template #default="scope">
                   <el-tag type="info">{{ getValue(scope.row.disasterType) }}</el-tag>
                 </template>
               </el-table-column>
-              <el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip
+              <el-table-column prop="disasterKeyword"
+                               label="Disaster keyword"
+                               show-overflow-tooltip
                                sortable></el-table-column>
-              <el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable>
+              <el-table-column prop="disasterTime"
+                               label="Disaster time"
+                               show-overflow-tooltip
+                               sortable>
                 <template #default="scope">
                   <!-- 格式化去除时分秒 -->
                   {{ dateFormat(scope.row.disasterTime) }}
                 </template>
               </el-table-column>
-              <el-table-column prop="respondedTime" label="Responded time" show-overflow-tooltip sortable>
+              <el-table-column prop="respondedTime"
+                               label="Responded time"
+                               show-overflow-tooltip
+                               sortable>
                 <template #default="scope">
                   <!-- 格式化去除时分秒 -->
                   {{ dateFormat(scope.row.respondedTime) }}
                 </template>
               </el-table-column>
             </el-table>
-            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
+            <el-pagination @size-change="onHandleSizeChange"
-              :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.current" background
+                           @current-change="onHandleCurrentChange"
-              v-model:page-size="state.tableData.param.size" layout="total, sizes, prev, pager, next, jumper"
+                           class="mt15"
+                           :pager-count="5"
+                           :page-sizes="[10, 20, 30]"
+                           v-model:current-page="state.tableData.param.current"
+                           background
+                           v-model:page-size="state.tableData.param.size"
+                           layout="total, sizes, prev, pager, next, jumper"
                            :total="state.tableData.total">
             </el-pagination>
           </el-tab-pane>
         </el-tabs>
       </div>
-      <el-dialog v-model="state.dialogVisible" title="Approval" width="45%">
+      <el-dialog v-model="state.dialogVisible"
+                 title="Approval"
+                 width="35%">
         <el-container style="margin-top: -2%;margin-bottom: 2%;">
-          <el-radio v-model="state.radio" label='1' @click="mapEvents('1')">Point</el-radio>
+          <el-radio v-model="state.radio"
-          <el-radio v-model="state.radio" label='2' @click="mapEvents('2')">Area</el-radio>
+                    label='1'
-          <el-radio v-model="state.radio" label='3' @click="mapEvents('3')">Edit</el-radio>
+                    @click="mapEvents('1')">Point</el-radio>
-          <el-button type="primary" style="margin-left: 5%;" @click="ClearSubmit">Clear</el-button>
+          <el-radio v-model="state.radio"
+                    label='2'
+                    @click="mapEvents('2')">Area</el-radio>
+          <el-radio v-model="state.radio"
+                    label='3'
+                    @click="mapEvents('3')">Edit</el-radio>
+          <el-button type="primary"
+                     style="margin-left: 5%;"
+                     @click="ClearSubmit">Clear</el-button>
         </el-container>
-        <el-container style="margin-top: 2%;margin-bottom: 2%;" v-if="state.radio === '1' ? true : false">
+        <el-container style="margin-top: 2%;margin-bottom: 2%;"
+                      v-if="state.radio === '1' ? true : false">
           <span style="line-height: 35px;"> Latitude：</span>
-          <el-input placeholder="wait……" style="height:35px;margin-right: 1%;" v-model="state.dislat" readonly="readonly">
+          <el-input placeholder="wait……"
+                    style="height:35px;margin-right: 1%;"
+                    v-model="state.dislat">
           </el-input>
           <span style="line-height: 35px;">Longitude：</span>
-          <el-input placeholder="wait……" style="height:35px;" v-model="state.dislon" readonly="readonly"></el-input>
+          <el-input placeholder="wait……"
+                    style="height:35px;"
+                    v-model="state.dislon"></el-input>
         </el-container>
-        <MapPage style="height:350px ; width:100% ;margin-bottom: 10px;" ref="mapRef"></MapPage>
+        <el-container style="margin-top: 2%;margin-bottom: 2%;"
+                      v-if="state.radio === '3' ? true : false">
+          <span style="line-height: 35px;"> Latitude：</span>
+          <el-input placeholder="wait……"
+                    style="height:35px;margin-right: 1%;"
+                    v-model="state.dislat"
+                    :onchange="manualCoordinate">
+          </el-input>
+          <span style="line-height: 35px;">Longitude：</span>
+          <el-input placeholder="wait……"
+                    style="height:35px;"
+                    v-model="state.dislon"
+                    :onchange="manualCoordinate"></el-input>
+        </el-container>
+        <MapPage style="height:350px ; width:100% ;margin-bottom: 10px;"
+                 ref="mapRef">
+        </MapPage>
+        <div class="latLon-div"> {{ state.popupLat }} , {{ state.popupLon }} </div>
 
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
+
           <el-form-item label="Disaster Time">
             <el-date-picker style="width: 200px;" v-model="state.edit.disasterTime" type="date" value-format="YYYY-MM-DD"
               placeholder="Select date and time" />
@@ -185,16 +351,19 @@
         <template #footer>
           <span class="dialog-footer">
             <el-button @click="dialogVisible = false">Cancel</el-button>
-            <el-button type="danger" @click="reviews(1)">
+            <el-button type="danger"
+                       @click="reviews(1)">
               Reject
             </el-button>
-            <el-button type="primary" @click="reviews(2)">
+            <el-button type="primary"
+                       @click="reviews(2)">
               Approve
             </el-button>
           </span>
         </template>
       </el-dialog>
-      <selectUser ref="select" @callback="getTableData"></selectUser>
+      <selectUser ref="select"
+                  @callback="getTableData"></selectUser>
     </el-config-provider>
   </div>
 </template>
@@ -280,6 +449,8 @@ const state = reactive({
   radio: null,
   dislat: '',
   dislon: '',
+  popupLat: null,
+  popupLon: null,
   wktPoint_Poly: undefined
 });
 // 初始化表格数据
@@ -310,6 +481,7 @@ const onOpenEditRole = (type, row) => {
   //深拷贝
   state.edit = JSON.parse(JSON.stringify(row));
   state.dialogVisible = true;
+  if (row.geometry.substring(0, row.geometry.indexOf("((")) == 'Point') {
     setTimeout(() => {
       state.radio = "1"
       // mapRef.value.mapOperations.removeAll()
@@ -320,26 +492,57 @@ const onOpenEditRole = (type, row) => {
       state.wktPoint_Poly = mapRef.value.mapOperations.wktParseToMap(row.geometry)
       mapEvents('1')
     }, 100);
+  }
+  else if (row.geometry.substring(0, row.geometry.indexOf("((")) == 'POLYGON') {
+    setTimeout(() => {
+      state.radio = "2"
+      // mapRef.value.mapOperations.removeAll()
+      //赋值地图范围，并且可以修改点或者区域
+      //   if (state.wktPoint_Poly) {
+      //     mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
+      //   }
+      mapRef.value.mapOperations.wktParseToMap(row.geometry)
+      mapEvents('2')
+    }, 100);
+  }
 };
+
+const manualCoordinate = () => {
+  const disLatLen = state.dislat.length
+  const disLonLen = state.dislon.length
+  const editLat = state.dislat.substring(0, disLatLen - 2)
+  const editLon = state.dislon.substring(0, disLonLen - 2)
+  mapRef.value.mapOperations.addInteractMarker(editLat, editLon)
+}
+
 const mapEvents = (ev) => {
   if (ev == '1') {
     // mapRef.value.mapOperations.clearPolygon()
-    mapRef.value.mapOperations.on("click", mapClick)
+    state.popupLat = null
-    mapRef.value.mapOperations.on("mousemove", changelatlon)
+    state.popupLon = null
-    mapRef.value.mapOperations.clearPolygon()
-
-  } else if (ev == '2') {
     mapRef.value.mapOperations.off("click", mapClick);
-    mapRef.value.mapOperations.drawPolygon()
+    mapRef.value.mapOperations.off("mousemove", showLatLon)
+    mapRef.value.mapOperations.clearPolygon()
+    ev == ''
+  }
+  else if (ev == '2') {
+    mapRef.value.mapOperations.off("click", mapClick);
+    mapRef.value.mapOperations.off("mousemove", showLatLon)
     // mapRef.value.mapOperations.drawPolygon()
     // mapRef.value.mapOperations.drawCreated()
-
+    ev == ''
   }
-  else {
+  else if (ev == '3') {
+    mapRef.value.mapOperations.on("click", mapClick)
+    mapRef.value.mapOperations.on("mousemove", showLatLon)
     mapRef.value.mapOperations.Edit()
+    ev == ''
+
   }
 };
 const ClearSubmit = () => {
+  state.dislat = ''
+  state.dislon = ''
   setTimeout(() => {
     mapRef.value.mapOperations.removeAll()
     variableStore.wktdata = null
@@ -348,10 +551,12 @@ const ClearSubmit = () => {
   }, 100)
 }
 const mapClick = (res) => {
-  // mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly )
+  //   // mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly )
-  changelatlon(res);
+  //   mapRef.value.mapOperations.addInteractMarker(res.latlng.lat.toFixed(3), res.latlng.lng.toFixed(3))
+  //   // console.log(state.wktPoint_Poly)
+  state.dislat = changeLat(res.latlng.lat.toFixed(3))
+  state.dislon = changeLon(res.latlng.lng.toFixed(3))
   mapRef.value.mapOperations.addInteractMarker(res.latlng.lat.toFixed(3), res.latlng.lng.toFixed(3))
-  // console.log(state.wktPoint_Poly)
 }
 const reviews = (index) => {
   //将修改后的地图位置赋值到state.edit.geometry
@@ -382,48 +587,51 @@ const onHandleCurrentChange = (val) => {
   state.tableData.param.pageNum = val;
   getTableData();
 };
-const changelatlon = (e) => {
+
-  //深拷贝e
+// 调整纬度
-  state.dislat = e.latlng.lat.toFixed(3);
+const changeLat = (lat) => {
-  state.dislon = e.latlng.lng.toFixed(3);
+  if (lat < 0) {
-  // if (state.lon < 0) {
+    lat = String(Math.abs(lat)) + "°S"
-  //   state.lon = state.lon + 360;
-  // }
-  // state.lon = state.lon.toFixed(3);
-  if (state.dislat < 0) {
-    state.dislat = String(Math.abs(state.dislat)) + "°S"
   }
   else {
-    state.dislat = String(state.dislat) + "°N"
+    lat = String(lat) + "°N"
   }
-
+  return lat
-  if (state.dislon <= 180 && state.dislon >= 0) {
-    state.dislon = String(Math.abs(state.dislon)) + "°E"
 }
-  else if (state.dislon > 180 && state.dislon <= 360) {
+// 调整经度
-    state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
+const changeLon = (lon) => {
+  if (lon <= 180 && lon >= 0) {
+    lon = String(Math.abs(lon)) + "°E"
   }
-  else if (state.dislon < 0) {
+  else if (lon > 180 && lon <= 360) {
-    let n = Math.floor(state.dislon / 360)
+    lon = String((360 - lon).toFixed(3)) + "°W"
-    state.dislon = (state.dislon - n * 360).toFixed(3)
-    if (state.dislon <= 180 && state.dislon >= 0) {
-      state.dislon = String(Math.abs(state.dislon)) + "°E"
   }
-    else if (state.dislon > 180 && state.dislon <= 360) {
+  else if (lon < 0) {
-      state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
+    let n = Math.floor(lon / 360)
+    lon = (lon - n * 360).toFixed(3)
+    if (lon <= 180 && lon >= 0) {
+      lon = String(Math.abs(lon)) + "°E"
+    }
+    else if (lon > 180 && lon <= 360) {
+      lon = String((360 - lon).toFixed(3)) + "°W"
     }
   }
-  else if (state.dislon > 360) {
+  else if (lon > 360) {
-    let n = Math.floor(state.dislon / 360)
+    let n = Math.floor(lon / 360)
-    state.dislon = (state.dislon - n * 360).toFixed(3)
+    lon = (lon - n * 360).toFixed(3)
-    if (state.dislon <= 180 && state.dislon >= 0) {
+    if (lon <= 180 && lon >= 0) {
-      state.dislon = String(Math.abs(state.dislon)) + "°E"
+      lon = String(Math.abs(lon)) + "°E"
     }
-    else if (state.dislon > 180 && state.dislon <= 360) {
+    else if (lon > 180 && lon <= 360) {
-      state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
+      lon = String((360 - lon).toFixed(3)) + "°W"
     }
   }
-
+  return lon
+}
+// 展示鼠标指针经纬度
+const showLatLon = (e) => {
+  state.popupLat = changeLat(e.latlng.lat.toFixed(3))
+  state.popupLon = changeLon(e.latlng.lng.toFixed(3))
 }
 // 页面加载时
 onMounted(() => {
@@ -464,4 +672,12 @@ const getValue = (key) => {
 	float: right;
 	margin-bottom: 15px;
 }
+.latLon-div {
+	position: absolute;
+	top: 60%;
+	right: 5%;
+	z-index: 1000;
+	color: white;
+	font-size: 15px;
+}
 </style>