zqq:call-for-help优化

src/views/responseManagement/userResponse/index.vue

@@ -1,196 +1,375 @@
 <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"
-                sortable></el-table-column>
+                               label="Disaster keyword"
-              <el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable>
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <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"
-                    @click="onOpenEditRole('edit', scope.row)">Approve</el-button>
+                             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"
-              :total="state.tableData.total">
+                           :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"
-                sortable></el-table-column>
+                               label="Disaster keyword"
-              <el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable>
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <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"
-              :total="state.tableData.total">
+                           :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"
-                sortable></el-table-column>
+                               label="Disaster keyword"
-              <el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable>
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <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"
-              :total="state.tableData.total">
+                           :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"
-                sortable></el-table-column>
+                               label="Disaster keyword"
-              <el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable>
+                               show-overflow-tooltip
+                               sortable></el-table-column>
+              <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"
-              :total="state.tableData.total">
+                           :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="35%">
+      <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-item label="Disaster Time">
-          <el-date-picker v-model="state.edit.disasterTime" type="date" value-format="YYYY-MM-DD"
+          <el-date-picker v-model="state.edit.disasterTime"
-            placeholder="Select date and time" />
+                          type="date"
+                          value-format="YYYY-MM-DD"
+                          placeholder="Select date and time" />
         </el-form-item>
         <el-form-item label="Disaster type">
-          <el-select class="form-select" size="default" clearable placeholder="Disaster Type"
+          <el-select class="form-select"
-            v-model="state.edit.disasterType">
+                     size="default"
-            <el-option v-for="(item, index) in state.dictList" :value="item.dictKey" :key="index"
+                     clearable
-              :label="item.dictValue" />
+                     placeholder="Disaster Type"
+                     v-model="state.edit.disasterType">
+            <el-option v-for="(item, index) in state.dictList"
+                       :value="item.dictKey"
+                       :key="index"
+                       :label="item.dictValue" />
           </el-select>
         </el-form-item>
         <el-form-item label="Disaster country">
-          <el-input v-model="state.edit.disasterCountry" placeholder="please Disaster country" clearable></el-input>
+          <el-input v-model="state.edit.disasterCountry"
+                    placeholder="please Disaster country"
+                    clearable></el-input>
         </el-form-item>
         <el-form-item label="Theme keywords">
-          <el-input v-model="state.edit.disasterKeyword" placeholder="please Theme keywords" clearable></el-input>
+          <el-input v-model="state.edit.disasterKeyword"
+                    placeholder="please Theme keywords"
+                    clearable></el-input>
         </el-form-item>
         <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>
@@ -200,7 +379,7 @@ import en from 'element-plus/dist/locale/en.mjs'
 import { reactive, onMounted, ref, nextTick, watchEffect, defineAsyncComponent } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { getList, review, responseEndedDisasterInfo } from '/@/api/disasterInfo/index';
-import { getDictionary,getList as getListNew } from '/@/api/system/dictbiz';
+import { getDictionary, getList as getListNew } from '/@/api/system/dictbiz';
 import { useVariableStore } from '/@/stores/index.ts'
 //引入地图
 import Map from '/@/components/Map.vue';
@@ -276,6 +455,8 @@ const state = reactive({
   radio: null,
   dislat: '',
   dislon: '',
+  popupLat: null,
+  popupLon: null,
   wktPoint_Poly: undefined
 });
 // 初始化表格数据
@@ -306,36 +487,68 @@ const onOpenEditRole = (type, row) => {
   //深拷贝
   state.edit = JSON.parse(JSON.stringify(row));
   state.dialogVisible = true;
-  setTimeout(() => {
+  if (row.geometry.substring(0, row.geometry.indexOf("((")) == 'Point') {
-    state.radio = "1"
+    setTimeout(() => {
-    // mapRef.value.mapOperations.removeAll()
+      state.radio = "1"
-    //赋值地图范围，并且可以修改点或者区域
+      // mapRef.value.mapOperations.removeAll()
-    if (state.wktPoint_Poly) {
+      //赋值地图范围，并且可以修改点或者区域
-      mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
+      if (state.wktPoint_Poly) {
-    }
+        mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
-    state.wktPoint_Poly = mapRef.value.mapOperations.wktParseToMap(row.geometry)
+      }
-    mapEvents('1')
+      state.wktPoint_Poly = mapRef.value.mapOperations.wktParseToMap(row.geometry)
-  }, 100);
+      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
@@ -344,10 +557,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
@@ -378,48 +593,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"
+// 调整经度
+const changeLon = (lon) => {
+  if (lon <= 180 && lon >= 0) {
+    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"
   }
-  else if (state.dislon < 0) {
+  else if (lon < 0) {
-    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"
     }
   }
-  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(() => {
@@ -437,27 +655,35 @@ const getValue = (key) => {
 };
 </script>
 <style lang="scss">
-.demo-tabs>.el-tabs__content {
+.demo-tabs > .el-tabs__content {
-  padding: 0px;
+	padding: 0px;
-  color: #6b778c;
+	color: #6b778c;
-  font-size: 32px;
+	font-size: 32px;
-  font-weight: 600;
+	font-weight: 600;
 }
 
 .system-role-container {
-  .system-role-padding {
+	.system-role-padding {
-    padding: 15px;
+		padding: 15px;
 
-    .el-table {
+		.el-table {
-      flex: 1;
+			flex: 1;
-    }
+		}
-  }
+	}
 }
 
 .mt15 {
-  display: flex;
+	display: flex;
-  justify-content: end;
+	justify-content: end;
-  float: right;
+	float: right;
-  margin-bottom: 15px;
+	margin-bottom: 15px;
+}
+.latLon-div {
+	position: absolute;
+	top: 60%;
+	right: 5%;
+	z-index: 1000;
+	color: white;
+	font-size: 15px;
 }
 </style>