编辑

src/components/Map.vue

@@ -3,10 +3,10 @@
        class="container"></div>
 </template>
 
-  <script setup>
+<script setup>
 import { ref, onMounted } from 'vue'
 import WKT from 'terraformer-wkt-parser'
-
+import * as turf from '@turf/turf'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 import 'leaflet-draw/dist/leaflet.draw'
@@ -19,10 +19,8 @@ import * as omnivore from '@mapbox/leaflet-omnivore'
 const variableStore = useVariableStore()
 const map = ref()
 let homeMap = null
-let text = null
 let featureLayerG_area = null
 let featureLayerG_point = null
-let layerRectangle = null
 
 onMounted(() => {
   homeMap = L.map(map.value, {
@@ -44,92 +42,8 @@ onMounted(() => {
     tileSize: 256,
     zoomOffset: 1,
   }).addTo(homeMap)
-  text = new L.Draw.Polygon(homeMap)
-  L.drawLocal = {
-    draw: {
-      handlers: {
-        circle: {
-          tooltip: {
-            start: '单击并拖动可绘制圆',
-          },
-          radius: '半径',
-        },
-        circlemarker: {
-          tooltip: {
-            start: '点击地图放置圆形标记',
-          },
-        },
-        marker: {
-          tooltip: {
-            start: '点击地图放置标记，Esc取消',
-          },
-        },
-        polygon: {
-          tooltip: {
-            start: '点击开始绘制，Esc取消',
-            cont: '单击以继续绘制，Esc取消',
-            end: '单击第一个点完成绘制，Esc取消',
-          },
-        },
-        polyline: {
-          error: '<strong>异常:</strong> 形状边缘不能交叉!',
-          tooltip: {
-            start: '点击开始绘制，Esc取消',
-            cont: '单击以继续绘制，Esc取消',
-            end: '双击完成绘制，Esc取消',
-          },
-        },
-        rectangle: {
-          tooltip: {
-            start: '单击并拖动以绘制矩形',
-            end: '完成',
-          },
-        },
-        simpleshape: {
-          tooltip: {
-            end: '释放鼠标完成绘图',
-          },
-        },
-      },
-    },
-    edit: {
-      toolbar: {
-        actions: {
-          save: {
-            title: '保存改动',
-            text: '保存',
-          },
-          cancel: {
-            title: '取消编辑，丢弃所有更改',
-            text: '取消',
-          },
-          clearAll: {
-            title: '清除所有标记',
-            text: '清除所有',
-          },
-        },
-        buttons: {
-          edit: '编辑图层',
-          editDisabled: '不需要编辑图层',
-          remove: '删除图层',
-          removeDisabled: '没有要删除的图层',
-        },
-      },
-      handlers: {
-        edit: {
-          tooltip: {
-            text: '拖动节点或标记来编辑图形',
-            subtext: '单击“取消”撤消更改',
-          },
-        },
-        remove: {
-          tooltip: {
-            text: '单击某个标记进行删除',
-          },
-        },
-      },
-    },
-  }
+  
+
   featureLayerG_area = L.layerGroup().addTo(homeMap)
   featureLayerG_point = L.layerGroup().addTo(homeMap)
 })
@@ -142,13 +56,33 @@ onMounted(() => {
    */
 const mapOperations = {
   wktParseToMap: (res) => {
-    return omnivore.wkt.parse(res).addTo(featureLayerG_point)
-    // if(omnivore.wkt.parse(res) instanceof L.Marker){
+    let layer = omnivore.wkt.parse(res)
+    layer.addTo(featureLayerG_point)
     
-    // }
-    // else{
-    //   return omnivore.wkt.parse(res).addTo(featureLayerG_area )
-    // }
+    let attr=Object.values(layer._layers) 
+    
+    // 判断审核的数据类型，如果是点则直接flyTo
+    if(attr[0].feature.geometry.type.indexOf('Polygon')==-1){
+      homeMap.flyTo([attr[0].feature.geometry.coordinates[1],attr[0].feature.geometry.coordinates[0]],3)
+    }
+     // 判断审核的数据类型，如果是面则计算中心点 然后再fly
+    else{
+      let polygons=[];
+      for(let i=0;i<attr[0].feature.geometry.coordinates.length;i++){
+        console.log(attr[0].feature.geometry.coordinates[i])
+        polygons.push(turf.polygon([attr[0].feature.geometry.coordinates[i]]));
+      }
+      let centers = polygons.map(polygon => turf.centroid(polygon));
+      // console.log(centers)
+      let features=[]
+      for(let i=0;i<centers.length;i++){
+        features.push(turf.point(centers[i].geometry.coordinates))
+      }
+      let final_center=turf.center(turf.featureCollection(features))
+      // console.log(final_center)
+      homeMap.flyTo([final_center.geometry.coordinates[1],final_center.geometry.coordinates[0]],3)
+    }
+    return layer
     
   },
   /** 添加点标注
@@ -177,7 +111,7 @@ const mapOperations = {
   addInteractMarker: (lat, lon) => {
     featureLayerG_point.clearLayers()
     variableStore.layerGroupPoint = null
-    var marker = L.marker([lat, lon], { draggable: true }).addTo(
+    var marker = L.marker([lat, lon]).addTo(
       featureLayerG_point
     )
     let features = featureLayerG_point.toGeoJSON().features
@@ -189,6 +123,7 @@ const mapOperations = {
     // marker.on('click',function(){
     //   featureLayerG_point.removeLayer(marker)
     // })
+    
   },
   /** 添加多边形标注
    * Object param 参数集合
@@ -344,10 +279,7 @@ const mapOperations = {
     featureLayerG_point.clearLayers()
     variableStore.layerGroupPoint = null
     variableStore.layerGroupPoly = null
-    if (variableStore.polygoncontrol == 'option2') {
-      text = new L.Draw.Polygon(homeMap)
-      text.enable()
-    }
+    
   },
   /**
    * 清楚wkt添加的所有
@@ -369,80 +301,86 @@ const mapOperations = {
     // console.log('2-2')
     variableStore.layerGroupPoint = null
     featureLayerG_point.clearLayers()
+    homeMap.pm.enableDraw('Polygon',{ snappable: false });
+    let polygon=null;
+    homeMap.on("pm:create",(e)=>{
+      featureLayerG_area.clearLayers()
+      e.layer.setStyle({
+        color: '#FF0080',
+        opacity: 1,
+      })
+      e.layer.addTo(featureLayerG_area)  
+      polygon=e.layer    
+    }) 
     // featureLayerG_area.clearLayers()
     // variableStore.layerGroupPoly=null;
-    text = new L.Draw.Polygon(homeMap)
-    text.enable()
+    return polygon
   },
   clearPolygon: () => {
     // console.log('1-2')
-    text.disable()
+    
     featureLayerG_area.clearLayers()
     variableStore.layerGroupPoly = null
+    homeMap.pm.disableDraw();
     // variableStore.layerGroupPoint=null
     // featureLayerG_point.clearLayers()
   },
   drawCreated: () => {
-    // console.log("2-3")
-    homeMap.on('draw:created', function (elll) {
-      featureLayerG_area.clearLayers()
-      variableStore.layerGroupPoly = null
-      elll.layer.setStyle({
-        color: '#FF0080',
-        opacity: 1,
-      })
-      featureLayerG_area.addLayer(elll.layer)
-      let features = featureLayerG_area.toGeoJSON().features
-      // console.log(features)
-      variableStore.layerGroupPoly = features.map(function (feature) {
-        return WKT.convert(feature.geometry)
-      })
-      variableStore.layerGroupPoly =
-        variableStore.layerGroupPoly.join('\n')
-      text.enable()
-    })
-  },
-  drawDestroyed: () => {
-    homeMap.off('draw:created', function (elll) {
-      elll.layer.setStyle({
-        color: '#FF0080',
-        opacity: 1,
-      })
-      featureLayerG_area.addLayer(elll.layer)
-      let features = featureLayerG_area.toGeoJSON().features
-      // console.log(features)
-      variableStore.layerGroupPoly = features.map(function (feature) {
-        return WKT.convert(feature.geometry)
-      })
-      variableStore.layerGroupPoly =
-        variableStore.layerGroupPoly.join('\n')
-      text = new L.Draw.Polygon(homeMap)
-      text.enable()
-    })
-  },
-  drawRectangle: () => {
-    if (layerRectangle != null) {
-      homeMap.removeLayer(layerRectangle)
-      layerRectangle = null
-    }
-    homeMap.pm.enableDraw('Rectangle', {
-      snappable: true,
-      snapDistance: 20,
-    });
-    homeMap.on('pm:create', (e) => {
-      L.PM.reInitLayer(e.layer);
-      layerRectangle = e.layer
-    });
-  },
-  deleteRectangle: () => {
-    homeMap.removeLayer(layerRectangle)
-  }
     
+    // homeMap.on('draw:created', function (elll) {
+    //   featureLayerG_area.clearLayers()
+    //   variableStore.layerGroupPoly = null
+    //   elll.layer.setStyle({
+    //     color: '#FF0080',
+    //     opacity: 1,
+    //   })
+    //   featureLayerG_area.addLayer(elll.layer)
+    //   let features = featureLayerG_area.toGeoJSON().features
+    //   // console.log(features)
+    //   variableStore.layerGroupPoly = features.map(function (feature) {
+    //     return WKT.convert(feature.geometry)
+    //   })
+    //   variableStore.layerGroupPoly =
+    //     variableStore.layerGroupPoly.join('\n')
+      
+    // })
+  },
+  Edit: () => {
+    homeMap.pm.enableGlobalEditMode({
+      allowSelfIntersection: false,
+    })
+    if(featureLayerG_area.getLayers().length==1){
+      featureLayerG_area.eachLayer(function (layer) {
+        layer.on('pm:edit', (e) => {
+          let features = featureLayerG_area.toGeoJSON().features
+          variableStore.layerGroupPoly = features.map(function (feature) {
+            return WKT.convert(feature.geometry)
+          })
+          variableStore.layerGroupPoly = variableStore.layerGroupPoly.join('\n')
+        });
+      });
+    }
+    else if(featureLayerG_point.getLayers().length==1){
+      featureLayerG_point.eachLayer(function (layer) {
+        layer.on('pm:edit', (e) => {
+          let features = featureLayerG_point.toGeoJSON().features
+          variableStore.layerGroupPoint = features.map(function (feature) {
+            return WKT.convert(feature.geometry)
+          })
+          variableStore.layerGroupPoint = variableStore.layerGroupPoint.join('\n')
+        });
+      });
+    }
+    else{
+      console.log('error')
+    }
+    
+    
+  },
 }
 //omnivore.wkt.parse('POINT(-80 0)').addTo(homeMap);
 
 defineExpose({
   mapOperations,
 })
-  </script>
-  
+</script>

src/stores/index.ts

@@ -56,6 +56,7 @@ export const useVariableStore = defineStore(Names.TEST, {
             //   Data_upload_agency:""
             // }
         ],
+        // 存储wkt格式数据
         layerGroupPoint:null,
         layerGroupPoly:null,
         polygoncontrol:null,

src/utils/request.js

@@ -3,8 +3,8 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import qs from 'qs';
 import { Session } from '/@/utils/storage';
 
-export const moduleName = 'zqq-biz-vordm';
-// export const moduleName = 'biz-vordm';
+// export const moduleName = 'zqq-biz-vordm';
+export const moduleName = 'glj-biz-vordm';
 export const crawlModule = 'vordm-crawl';
 // 配置新建一个 axios 实例
 const service = axios.create({

src/views/responseManagement/userResponse/index.vue

@@ -1,72 +1,45 @@
 <template>
   <div class="system-role-container layout-padding">
     <el-config-provider :locale="en">
-      <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-tab-pane label="unchecked"
-                       name="first">
-            <el-table :data="state.tableData.data"
-                      v-loading="state.tableData.loading"
-                      style="width: 100%">
-              <el-table-column type="index"
-                               label="ID"
-                               width="50" />
-              <el-table-column prop="username"
-                               label="User name"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="organization"
-                               label="Organization"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="disasterType"
-                               label="Disaster type"
-                               show-overflow-tooltip>
-                <!-- 在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>
-              <!-- <el-table-column prop="affectedCountry" label="Affected country" show-overflow-tooltip></el-table-column> -->
-              <!-- <el-table-column prop="Longitude" label="Longitude" show-overflow-tooltip></el-table-column>
+    <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-tab-pane label="unchecked" name="first">
+          <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
+            <el-table-column type="index" label="ID" width="50" />
+            <el-table-column prop="username" label="User name" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="organization" label="Organization" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip>
+              <!-- 在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>
+            <!-- <el-table-column prop="affectedCountry" label="Affected country" show-overflow-tooltip></el-table-column> -->
+            <!-- <el-table-column prop="Longitude" label="Longitude" show-overflow-tooltip></el-table-column>
             <el-table-column prop="Latitude" label="Latitude" show-overflow-tooltip></el-table-column> -->
-              <el-table-column prop="disasterTime"
-                               label="Disaster time"
-                               show-overflow-tooltip>
-                <template #default="scope">
-                  <!-- 格式化去除时分秒 -->
-                  {{ dateFormat(scope.row.disasterTime) }}
-                </template>
-              </el-table-column>
-              <!-- <el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column> -->
-              <el-table-column prop="respondStatus"
-                               label="Response status"
-                               show-overflow-tooltip>
-                <template #default="scope">
-                  <el-tag type="info"
-                          v-if="scope.row.respondStatus === 0">Not reviewed</el-tag>
-                  <el-tag type="info"
-                          v-if="scope.row.respondStatus === 1">Failed</el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column prop="Operate"
-                               label="Operate"
-                               show-overflow-tooltip>
-                <template #default="scope">
-                  <el-button size="small"
-                             text
-                             type="primary"
-                             @click="onOpenEditRole('edit', scope.row)">Review</el-button>
-                </template>
-              </el-table-column>
+            <el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip>
+              <template #default="scope">
+                <!-- 格式化去除时分秒 -->
+                {{ dateFormat(scope.row.disasterTime) }}
+              </template>
+            </el-table-column>
+            <!-- <el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column> -->
+            <el-table-column prop="respondStatus" label="Response status" show-overflow-tooltip>
+              <template #default="scope">
+                <el-tag type="info" v-if="scope.row.respondStatus === 0">Not reviewed</el-tag>
+                <el-tag type="info" v-if="scope.row.respondStatus === 1">Failed</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="Operate" label="Operate" show-overflow-tooltip>
+              <template #default="scope">
+                <el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">Review</el-button>
+              </template>
+            </el-table-column>
 
-              <!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
+            <!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
 						<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
-              <!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
+            <!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
 							<template #default="scope">
 								<el-tag type="success" v-if="scope.row.status">启用</el-tag>
 								<el-tag type="info" v-else>禁用</el-tag>
@@ -82,165 +55,127 @@
 								>
 							</template>
 						</el-table-column> -->
-            </el-table>
-            <el-pagination @size-change="onHandleSizeChange"
-                           @current-change="onHandleCurrentChange"
-                           class="mt15"
-                           :pager-count="3"
-                           :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"
-                           :total="state.tableData.total">
-            </el-pagination>
-          </el-tab-pane>
-          <el-tab-pane label="checked"
-                       name="second">
-            <el-table :data="state.tableData.data"
-                      v-loading="state.tableData.loading"
-                      style="width: 100%">
-              <el-table-column type="index"
-                               label="ID"
-                               width="50" />
-              <el-table-column prop="username"
-                               label="User name"
-                               show-overflow-tooltip></el-table-column>
-              <!-- <el-table-column prop="Administrator" label="Administrator" show-overflow-tooltip></el-table-column> -->
-              <el-table-column prop="organization"
-                               label="Organization"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="email"
-                               label="Email"
-                               show-overflow-tooltip></el-table-column>
-              <el-table-column prop="disasterType"
-                               label="Disaster type"
-                               show-overflow-tooltip>
-                <!-- 在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>
-              <!-- <el-table-column prop="Affected country" label="Affected country" show-overflow-tooltip></el-table-column> -->
-              <!-- <el-table-column prop="Longitude" label="Longitude" show-overflow-tooltip></el-table-column>
-            <el-table-column prop="Latitude" label="Latitude" show-overflow-tooltip></el-table-column> -->
-              <el-table-column prop="disasterTime"
-                               label="Disaster time"
-                               show-overflow-tooltip>
+          </el-table>
+          <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" 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="checked" name="second">
+          <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
+            <el-table-column type="index" label="ID" width="50" />
+            <el-table-column prop="username" label="User name" show-overflow-tooltip></el-table-column>
+            <!-- <el-table-column prop="Administrator" label="Administrator" show-overflow-tooltip></el-table-column> -->
+            <el-table-column prop="organization" label="Organization" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="email" label="Email" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip>
+              <!-- 在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>
+            <!-- <el-table-column prop="Affected country" label="Affected country" show-overflow-tooltip></el-table-column> -->
+            <!-- <el-table-column prop="Longitude" label="Longitude" show-overflow-tooltip></el-table-column>
+              <el-table-column prop="Latitude" label="Latitude" show-overflow-tooltip></el-table-column> -->
+              <el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip>
                 <template #default="scope">
                   <!-- 格式化去除时分秒 -->
                   {{ dateFormat(scope.row.disasterTime) }}
                 </template>
               </el-table-column>
-              <!-- <el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column> -->
-              <!-- <el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column> -->
-              <el-table-column prop="respondStatus"
-                               label="Response status"
-                               show-overflow-tooltip>
+              <el-table-column prop="chiefName" label="Answer" show-overflow-tooltip></el-table-column>
+            <!-- <el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column> -->
+            <!-- <el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column> -->
+            <el-table-column prop="respondStatus" label="Response status" show-overflow-tooltip>
 
-                <template #default="scope">
-                  <el-tag type="info"
-                          v-if="scope.row.respondStatus === 2">Reviewed</el-tag>
-                  <el-tag type="info"
-                          v-if="scope.row.respondStatus === 1">Failed</el-tag>
-                </template>
+              <template #default="scope">
+                <el-tag type="info" v-if="scope.row.respondStatus === 2">Reviewed</el-tag>
+                <el-tag type="info" v-if="scope.row.respondStatus === 1">Failed</el-tag>
+              </template>
 
-              </el-table-column>
-            </el-table>
-            <el-pagination @size-change="onHandleSizeChange"
-                           @current-change="onHandleCurrentChange"
-                           class="mt15"
-                           :pager-count="3"
-                           :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"
-                           :total="state.tableData.total">
-            </el-pagination>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-      <el-dialog v-model="state.dialogVisible"
-                 title="Review"
-                 width="30%"
-                 :before-close="handleClose">
-        <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"
-                    label='2'
-                    @click="mapEvents('2')">Area</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">
-          <span style="line-height: 35px;"> Latitude：</span>
-          <el-input placeholder="请输入内容"
-                    style="height:35px;margin-right: 1%;"
-                    v-model="state.dislat"></el-input>
-          <span style="line-height: 35px;">Longitude：</span>
-          <el-input placeholder="请输入内容"
-                    style="height:35px;"></el-input>
-        </el-container>
+            </el-table-column>
 
-        <MapPage style="height:350px ; width:100% ;margin-bottom: 10px;"
-                 ref="mapRef"></MapPage>
+            <el-table-column prop="Operate" label="Operate" show-overflow-tooltip>
+              <template #default="scope">
+                <el-button size="small" text type="primary" @click="onAllocation(scope.row)">Allocation</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" 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="Review" width="30%">
+      <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" 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">
+        <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>
+        <span style="line-height: 35px;">Longitude：</span>
+        <el-input  placeholder="wait……" style="height:35px;"  v-model="state.dislon" readonly="readonly"></el-input>
+      </el-container>
+      <MapPage style="height:350px ; width:100% ;margin-bottom: 10px;" ref="mapRef"></MapPage>
+      <el-form-item label="Disaster Time">
+        <el-date-picker v-model="state.edit.disasterTime" type="date" value-format="YYYY-MM-DD"
+          placeholder="Select date and time" />
+      </el-form-item>
 
-        <el-form-item label="Disaster Time">
-          <el-date-picker v-model="state.edit.disasterTime"
-                          type="date"
-                          value-format="YYYY-MM-DD"
-                          placeholder="Select date and time" />
-        </el-form-item>
-
-        <template #footer>
-          <span class="dialog-footer">
-            <el-button @click="dialogVisible = false">Cancel</el-button>
-            <el-button type="danger"
-                       @click="reviews(1)">
-              Not Review
-            </el-button>
-            <el-button type="primary"
-                       @click="reviews(2)">
-              Review
-            </el-button>
-          </span>
-        </template>
-      </el-dialog>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">Cancel</el-button>
+          <el-button type="danger" @click="reviews(1)">
+            Not Review
+          </el-button>
+          <el-button type="primary" @click="reviews(2)">
+            Review
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <selectUser ref ="select" @callback="getTableData"></selectUser>
     </el-config-provider>
   </div>
 </template>
 
 <script  setup name="userResponse">
 import en from 'element-plus/dist/locale/en.mjs'
-import { reactive, onMounted, ref, nextTick, watchEffect, defineAsyncComponent } from 'vue';
+import { reactive, onMounted, ref, nextTick,watchEffect,defineAsyncComponent } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { getList, review } from '/@/api/disasterInfo/index';
 import { getDictionary } from '/@/api/system/dictbiz';
+import { useVariableStore } from '/@/stores/index.ts'
 //引入地图
+import Map from '/@/components/Map.vue';
 import { useDateFormat } from '@vueuse/shared';
+import selectUser from './component/selectUser.vue';
 import L from "leaflet";
 import '@geoman-io/leaflet-geoman-free';  
 import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';  
 import "leaflet/dist/leaflet.css";
 import 'leaflet-draw/dist/leaflet.draw'
 import 'leaflet-draw/dist/leaflet.draw.css'
-const map = ref();
+import { map } from 'lodash';
+import * as turf from '@turf/turf'
+const variableStore = useVariableStore();
+const mapRef = ref();
 const activeName = ref('first');
-
+const select = ref();
 const handleClick = (tab, event) => {
   state.selectName = tab.props.name;
   getTableData();
 };
 const MapPage = defineAsyncComponent({
-  loader: () => import('/@/components/Map.vue'),
+  loader:() =>import('/@/components/Map.vue'),
   delay: 200,
 })
 const onAllocation = (row) => {
@@ -267,9 +202,10 @@ const state = reactive({
   disasterTypeList: [],
   selectName: 'first',
   edit: {},
-  radio: null,
-  dislat: '',
-  dislon: ''
+  radio:null,
+  dislat:'',
+  dislon:'',
+  wktPoint_Poly:undefined
 });
 // 初始化表格数据
 const getTableData = () => {
@@ -280,7 +216,6 @@ const getTableData = () => {
   } else {
     state.tableData.param.respondStatus = 2;
   }
-  console.log(activeName.value);
   getList(state.tableData.param).then((res) => {
     state.tableData.data = res.records;
     state.tableData.total = res.total;
@@ -295,64 +230,70 @@ const onOpenEditRole = (type, row) => {
   
   //深拷贝
   state.edit = JSON.parse(JSON.stringify(row));
-  nextTick(() => {
-    //赋值地图范围，并且可以修改点或者区域
-    //TODO
-    map.mapOperations.wktParseToMap(row.geometry)
-  });
   state.dialogVisible = true;
   setTimeout(() => {
-    state.radio = "1"
-    // mapRef.value.mapOperations.removeAll()
-    //赋值地图范围，并且可以修改点或者区域
-    if (state.wktPoint) {
-      mapRef.value.mapOperations.removeLayer(state.wktPoint)
-    }
-    state.wktPoint = mapRef.value.mapOperations.wktParseToMap(row.geometry)
-    // mapRef.value.mapOperations.on("click", (res)=>{
-    //   mapRef.value.mapOperations.clearPolygon()
-    //   mapRef.value.mapOperations.removeLayer( state.wktPoint)
-    //   mapRef.value.mapOperations.addInteractMarker(res.latlng.lat, res.latlng.lng)
-    // })
-    mapEvents('1')
-  }, 100);
+      state.radio = "1"
+      // mapRef.value.mapOperations.removeAll()
+      //赋值地图范围，并且可以修改点或者区域
+      if(state.wktPoint_Poly){
+        mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
+      }
+      state.wktPoint_Poly=  mapRef.value.mapOperations.wktParseToMap(row.geometry)
+      // mapRef.value.mapOperations.on("click", (res)=>{
+      //   mapRef.value.mapOperations.clearPolygon()
+      //   mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly)
+      //   mapRef.value.mapOperations.addInteractMarker(res.latlng.lat, res.latlng.lng)
+      // })
+      mapEvents('1')
+  },100);
 };
-const mapEvents = (ev) => {
-  if (ev == '1') {
-    mapRef.value.mapOperations.clearPolygon()
-    // mapRef.value.mapOperations.on("click", mapClick)
+const mapEvents = (ev)=>{
+  if(ev == '1'){    
+    // mapRef.value.mapOperations.clearPolygon()
+    mapRef.value.mapOperations.on("click", mapClick)
     mapRef.value.mapOperations.on("mousemove", changelatlon)
-    variableStore.polygoncontrol = "option1"
-  } else {
-    mapRef.value.mapOperations.off("click", mapClick);
+    mapRef.value.mapOperations.clearPolygon()
+    
+  }else if(ev == '2'){
+    mapRef.value.mapOperations.off("click",mapClick);
+    mapRef.value.mapOperations.drawPolygon()
     // mapRef.value.mapOperations.drawPolygon()
     // mapRef.value.mapOperations.drawCreated()
-    variableStore.polygoncontrol = "option2"
+    
+  }
+  else{
+    mapRef.value.mapOperations.Edit()
   }
 };
 const ClearSubmit = () => {
   setTimeout(() => {
     mapRef.value.mapOperations.removeAll()
     variableStore.wktdata = null
+    variableStore.layerGroupPoint=null;
+        layerGroupPoly=null;
   }, 100)
 }
-const mapClick = (res) => {
-  mapRef.value.mapOperations.removeLayer(state.wktPoint)
+const mapClick=(res)=>{
+  // mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly )
   changelatlon(res);
-  mapRef.value.mapOperations.addInteractMarker(res.latlng.lat.toFixed(3), res.latlng.lng.toFixed(3))
+  state.wktPoint_Poly=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
   //TODO 修改地图赋值
   //state.edit.geometry = map.mapOperations.getWkt();
 
   //判断index的值来判断是审核通过还是不通过
+
+
+
   if (index === 1) {
     state.edit.respondStatus = 1;
   } else {
     state.edit.respondStatus = 2;
   }
+  state.edit.geometry = variableStore.layerGroupPoint === null ? variableStore.layerGroupPoly : variableStore.layerGroupPoint;
   //时间格式化
   state.edit.disasterTime = useDateFormat(state.edit.disasterTime, 'YYYY-MM-DD').value + " 00:00:00";
   review(state.edit).then((res) => {
@@ -363,57 +304,50 @@ const reviews = (index) => {
 }
 // 分页改变
 const onHandleCurrentChange = (val) => {
-  console.log(val);
   state.tableData.param.pageNum = val;
   getTableData();
 };
-const onMapClick = (e) => {
-  state.lat = e.latlng.lat.toFixed(3);
-  state.lon = e.latlng.lng.toFixed(3);
-  map.value.mapOperations.addInteractMarker(state.lat, state.lon)
-}
 const changelatlon = (e) => {
-
+  //深拷贝e
   state.dislat = e.latlng.lat.toFixed(3);
-  state.dislon = e.latlng.lng.toFixed(3);
-  // state.lon = state.lon % 360;
-  // if (state.lon < 0) {
-  //   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"
-  }
+  state.dislon= e.latlng.lng.toFixed(3);
+// if (state.lon < 0) {
+//   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"
+}
 
+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"
+}
+else if (state.dislon < 0) {
+  let n = Math.floor(state.dislon / 360)
+  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) {
     state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
   }
-  else if (state.dislon < 0) {
-    let n = Math.floor(state.dislon / 360)
-    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) {
-      state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
-    }
+}
+else if (state.dislon > 360) {
+  let n = Math.floor(state.dislon / 360)
+  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 > 360) {
-    let n = Math.floor(state.dislon / 360)
-    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) {
-      state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
-    }
+  else if (state.dislon > 180 && state.dislon <= 360) {
+    state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
   }
+}
 
 }
 // 页面加载时
@@ -422,20 +356,7 @@ onMounted(() => {
   getDictionary({ code: 'disaster' }).then((res) => {
     state.disasterTypeList = res;
   });
-  watchEffect(() => {
-    if (state.radio == "1") {
-      // map.value.mapOperations.on("click", onMapClick)
-      // map.value.mapOperations.clearPolygon()     
-      // map.value.mapOperations.on("mousemove", changelatlon)
-      // variableStore.polygoncontrol = "option1"
-    }
-    else {
-      // map.value.mapOperations.off("click", onMapClick)
-      // map.value.mapOperations.drawPolygon()
-      // map.value.mapOperations.drawCreated()
-      // variableStore.polygoncontrol = "option2"
-    }
-  })
+  
 });
 const getValue = (key) => {
   //返回state.disasterTypeLis 对应的value 
@@ -443,24 +364,20 @@ const getValue = (key) => {
 };
 </script>
 <style>
-.demo-tabs > .el-tabs__content {
-	padding: 0px;
-	color: #6b778c;
-	font-size: 32px;
-	font-weight: 600;
+.demo-tabs>.el-tabs__content {
+  padding: 0px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
 }
 
 .system-role-container {
-	.system-role-padding {
-		padding: 15px;
+  .system-role-padding {
+    padding: 15px;
 
-		.el-table {
-			flex: 1;
-		}
-	}
-}
-.mt15 {
-	float: right;
-	margin-bottom: 15px;
+    .el-table {
+      flex: 1;
+    }
+  }
 }
 </style>