From ba83f4e478c7c271eac7589f2872a79ac5133d6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=97=8B?= <723607471@qq.com>
Date: Mon, 24 Apr 2023 17:29:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=98=E5=8E=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Map.vue                        | 262 +++++-------
 .../responseManagement/userResponse/index.vue | 388 ++++++++----------
 2 files changed, 280 insertions(+), 370 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index b22f2fd..6c4740c 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -2,27 +2,25 @@
   <div ref="map"
        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'
 import 'leaflet-draw/dist/leaflet.draw.css'
-import '@geoman-io/leaflet-geoman-free';
-import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
+import '@geoman-io/leaflet-geoman-free';  
+import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';  
 import 'Leaflet-ImageOverlay-Rotated'
 import { useVariableStore } from '/@/stores/index.ts'
 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,14 +56,34 @@ onMounted(() => {
    */
 const mapOperations = {
   wktParseToMap: (res) => {
-    return omnivore.wkt.parse(res).addTo(featureLayerG_point)
-    // if(omnivore.wkt.parse(res) instanceof L.Marker){
-
-    // }
-    // else{
-    //   return omnivore.wkt.parse(res).addTo(featureLayerG_area )
-    // }
-
+    let layer = omnivore.wkt.parse(res)
+    layer.addTo(featureLayerG_point)
+    
+    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
+    
   },
   /** 添加点标注
    * Object param 参数集合
@@ -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()
-    })
+    
+    // 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')
+      
+    // })
   },
-  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()
+  Edit: () => {
+    homeMap.pm.enableGlobalEditMode({
+      allowSelfIntersection: false,
     })
-  },
-  drawRectangle: () => {
-    if (layerRectangle != null) {
-      homeMap.removeLayer(layerRectangle)
-      layerRectangle = null
+    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')
+        });
+      });
     }
-    homeMap.pm.enableDraw('Rectangle', {
-      snappable: true,
-      snapDistance: 20,
-    });
-    homeMap.on('pm:create', (e) => {
-      L.PM.reInitLayer(e.layer);
-      layerRectangle = e.layer
-    });
+    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')
+    }
+    
+    
   },
-  deleteRectangle: () => {
-    homeMap.removeLayer(layerRectangle)
-  }
-
 }
 //omnivore.wkt.parse('POINT(-80 0)').addTo(homeMap);
 
 defineExpose({
   mapOperations,
 })
-        </script>
-        
\ No newline at end of file
+</script>
diff --git a/src/views/responseManagement/userResponse/index.vue b/src/views/responseManagement/userResponse/index.vue
index d473e3b..a8c324b 100644
--- a/src/views/responseManagement/userResponse/index.vue
+++ b/src/views/responseManagement/userResponse/index.vue
@@ -1,46 +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="Unapproved" 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 keywords" 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="Unapproved" 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">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>
-                <template #default="scope">
-                  <el-button size="small" text type="primary"
-                    @click="onOpenEditRole('edit', scope.row)">Approve</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">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>
+              <template #default="scope">
+                <el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">Approve</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>
@@ -56,29 +55,29 @@
 								>
 							</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-tab-pane label="Approved" 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></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 keywords" 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>
+          <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="Approved | Rejected" 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">
@@ -87,75 +86,72 @@
                 </template>
               </el-table-column>
               <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 width="170" prop="respondStatus" label="Response status" show-overflow-tooltip>
+            <!-- <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">Approved</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>
+              <template #default="scope">
+                <el-tag type="info" v-if="scope.row.respondStatus === 2">Approved</el-tag>
+                <el-tag type="info" v-if="scope.row.respondStatus === 1">Rejected</el-tag>
+              </template>
 
-              </el-table-column>
+            </el-table-column>
 
-              <el-table-column width="200" prop="Operate" label="Operate" show-overflow-tooltip>
-                <template #default="scope">
-                  <el-button size="small" 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"
-              :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="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-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>
 
-        <template #footer>
-          <span class="dialog-footer">
-            <el-button @click="dialogVisible = false">Cancel</el-button>
-            <el-button type="danger" @click="reviews(1)">
-              Reject
-            </el-button>
-            <el-button type="primary" @click="reviews(2)">
-              Approve
-            </el-button>
-          </span>
-        </template>
-      </el-dialog>
-      <selectUser ref="select" @callback="getTableData"></selectUser>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">Cancel</el-button>
+          <el-button type="danger" @click="reviews(1)">
+            Reject
+          </el-button>
+          <el-button type="primary" @click="reviews(2)">
+            Approve
+          </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, responseEndedDisasterInfo } from '/@/api/disasterInfo/index';
+import { getList, review } from '/@/api/disasterInfo/index';
 import { getDictionary } from '/@/api/system/dictbiz';
 import { useVariableStore } from '/@/stores/index.ts'
 //引入地图
@@ -163,8 +159,8 @@ 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 '@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'
@@ -179,29 +175,12 @@ const handleClick = (tab, event) => {
   getTableData();
 };
 const MapPage = defineAsyncComponent({
-  loader: () => import('/@/components/Map.vue'),
+  loader:() =>import('/@/components/Map.vue'),
   delay: 200,
 })
 const onAllocation = (row) => {
   select.value.openDialog(row)
 };
-
-
-const responseEnded = (row) => {
-  ElMessageBox.confirm(`Confirm completion of response?`, 'Prompt', {
-    confirmButtonText: 'Yes',
-    cancelButtonText: 'No',
-    type: 'warning',
-  })
-    .then(() => {
-      responseEndedDisasterInfo(row.id).then((da) => {
-        ElMessage.success('Operation successful');
-      })
-    })
-    .catch(() => { });
-};
-
-
 const dateFormat = (date) => {
   return useDateFormat(date, 'YYYY-MM-DD').value;
 }
@@ -223,10 +202,10 @@ const state = reactive({
   disasterTypeList: [],
   selectName: 'first',
   edit: {},
-  radio: null,
-  dislat: '',
-  dislon: '',
-  wktPoint_Poly: undefined
+  radio:null,
+  dislat:'',
+  dislon:'',
+  wktPoint_Poly:undefined
 });
 // 初始化表格数据
 const getTableData = () => {
@@ -235,7 +214,7 @@ const getTableData = () => {
   if (state.selectName === 'first') {
     state.tableData.param.respondStatus = 0;
   } else {
-    state.tableData.param.respondStatus = 3;
+    state.tableData.param.respondStatus = 2;
   }
   getList(state.tableData.param).then((res) => {
     state.tableData.data = res.records;
@@ -248,41 +227,41 @@ const onHandleSizeChange = (val) => {
   getTableData();
 };
 const onOpenEditRole = (type, row) => {
-
+  
   //深拷贝
   state.edit = JSON.parse(JSON.stringify(row));
   state.dialogVisible = true;
   setTimeout(() => {
-    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);
+      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') {
+const mapEvents = (ev)=>{
+  if(ev == '1'){    
     // mapRef.value.mapOperations.clearPolygon()
     mapRef.value.mapOperations.on("click", mapClick)
     mapRef.value.mapOperations.on("mousemove", changelatlon)
     mapRef.value.mapOperations.clearPolygon()
-
-  } else if (ev == '2') {
-    mapRef.value.mapOperations.off("click", mapClick);
+    
+  }else if(ev == '2'){
+    mapRef.value.mapOperations.off("click",mapClick);
     mapRef.value.mapOperations.drawPolygon()
     // mapRef.value.mapOperations.drawPolygon()
     // mapRef.value.mapOperations.drawCreated()
-
+    
   }
-  else {
+  else{
     mapRef.value.mapOperations.Edit()
   }
 };
@@ -290,14 +269,14 @@ const ClearSubmit = () => {
   setTimeout(() => {
     mapRef.value.mapOperations.removeAll()
     variableStore.wktdata = null
-    variableStore.layerGroupPoint = null;
-    layerGroupPoly = null;
+    variableStore.layerGroupPoint=null;
+        layerGroupPoly=null;
   }, 100)
 }
-const mapClick = (res) => {
-  // mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly )
+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) => {
@@ -331,44 +310,44 @@ const onHandleCurrentChange = (val) => {
 const changelatlon = (e) => {
   //深拷贝e
   state.dislat = e.latlng.lat.toFixed(3);
-  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"
-  }
+  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"
   }
+}
 
 }
 // 页面加载时
@@ -377,14 +356,14 @@ onMounted(() => {
   getDictionary({ code: 'disaster' }).then((res) => {
     state.disasterTypeList = res;
   });
-
+  
 });
 const getValue = (key) => {
   //返回state.disasterTypeLis 对应的value 
   return state.disasterTypeList.find((item) => item.dictKey === key)?.dictValue;
 };
 </script>
-<style lang="scss">
+<style>
 .demo-tabs>.el-tabs__content {
   padding: 0px;
   color: #6b778c;
@@ -401,11 +380,4 @@ const getValue = (key) => {
     }
   }
 }
-
-.mt15 {
-  display: flex;
-  justify-content: end;
-  float: right;
-  margin-bottom: 15px;
-}
 </style>