From 3d68dcfe9cd583611045dc6737f3e650f888cc82 Mon Sep 17 00:00:00 2001
From: qqGroup0 <253114712@qq.com>
Date: Sun, 23 Apr 2023 16:42:10 +0800
Subject: [PATCH] =?UTF-8?q?zqq:=E9=81=A5=E6=84=9F=E7=88=AC=E8=99=AB?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=EF=BC=88=E5=BE=85=E8=A1=A5=E5=85=85=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crawl/index.js                        | 128 ++---
 src/components/Map.vue                        | 219 ++++++--
 src/utils/request.js                          |   4 +-
 .../components/searchCondition.vue            | 510 +++++++++++-------
 .../dataService/remoteSensingData/index.vue   |   3 +-
 .../responseManagement/userResponse/index.vue |   4 -
 6 files changed, 540 insertions(+), 328 deletions(-)

diff --git a/src/api/crawl/index.js b/src/api/crawl/index.js
index d3d0838..08df2f7 100644
--- a/src/api/crawl/index.js
+++ b/src/api/crawl/index.js
@@ -1,68 +1,68 @@
-import request, {crawlModule ,moduleName } from '/@/utils/request';
+import request, { crawlModule, moduleName } from '/@/utils/request';
 
+export const geoserve = (vordm_id, link, disaster_id, name) => {
+	return request({
+		url: '/api/' + crawlModule + '/geoserve/pushing',
+		method: 'post',
+		data: {
+			vordm_id,
+			link,
+			disaster_id,
+			name,
+		},
+	});
+};
+export const news = (disaster_id, keywords, page, isBaidu, id) => {
+	return request({
+		url: '/api/' + crawlModule + '/news/' + (isBaidu ? 'baidu' : 'bing'),
+		method: 'post',
+		data: {
+			disaster_id,
+			keywords,
+			page,
+			id,
+		},
+	});
+};
+export const rs = (stime, etime, disaster_id, ranges, type = 1) => {
+	let method = 'sentinel';
+	if (type == 1) {
+		method = 'sentinel';
+	} else if (type == 2) {
+		method = 'landsat';
+	} else {
+		method = 'searchone';
+	}
 
-
-export const geoserve = (vordm_id , link , disaster_id, name) =>{ 
-    return request({
-        url: '/api/' + crawlModule + '/geoserve/pushing',
-        method: 'post',
-        data: {
-            vordm_id,
-            link,
-            disaster_id,
-            name
-        }
-    });
-}
-export const news = (disaster_id, keywords, page,isBaidu,id) =>{ 
-    return request({
-        url: '/api/' + crawlModule + '/news/'+(isBaidu?"baidu":"bing"),
-        method: 'post',
-        data: {
-            disaster_id,
-            keywords,
-            page,
-            id
-        }
-    });
-}
-export const rs = (stime, etime, disaster_id,ranges ,type =1) =>{ 
-    let method = 'sentinel';
-    if(type == 1){
-        method = 'sentinel';
-    }else if(type == 2){
-        method = 'landsat';
-    }else {
-        method = 'searchone';
-    }
-
-    return request({
-        url: '/api/' + crawlModule + '/news/'+method,
-        method: 'post',
-        data: {
-            stime, etime, disaster_id,ranges
-        }
-    });
-}
+	return request({
+		url: '/api/' + crawlModule + '/rs/' + method,
+		method: 'post',
+		data: {
+			stime,
+			etime,
+			disaster_id,
+			ranges,
+		},
+	});
+};
 export const submit = (row) => {
-    return request({
-        url: '/api/'+moduleName+'/ui/crawlInfo/submit',
-        method: 'post',
-        data: row
-    })
-}
+	return request({
+		url: '/api/' + moduleName + '/ui/crawlInfo/submit',
+		method: 'post',
+		data: row,
+	});
+};
 export const getList = (current, size, param) => {
-    let params =  {
-        current,
-        size,
-    };
-    if(param){
-        params = Object.assign(params, param);
-    }
-    return request({
-        url: '/api/'+moduleName+'/ui/crawlInfo/list',
-        method: 'get',
-        params: params
-    });
-
-}
\ No newline at end of file
+	let params = {
+		current,
+		size,
+	};
+	if (param) {
+		params = Object.assign(params, param);
+	}
+	return request({
+		url: '/api/' + moduleName + '/ui/crawlInfo/list',
+		method: 'get',
+		params: params,
+	});
+};
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 1fa3079..3c6c5d8 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -2,25 +2,27 @@
   <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, {
@@ -42,8 +44,92 @@ 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)
 })
@@ -56,33 +142,14 @@ onMounted(() => {
    */
 const mapOperations = {
   wktParseToMap: (res) => {
-    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
-    
+    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 )
+    // }
+
   },
   /** 添加点标注
    * Object param 参数集合
@@ -277,7 +344,10 @@ const mapOperations = {
     featureLayerG_point.clearLayers()
     variableStore.layerGroupPoint = null
     variableStore.layerGroupPoly = null
-    
+    if (variableStore.polygoncontrol == 'option2') {
+      text = new L.Draw.Polygon(homeMap)
+      text.enable()
+    }
   },
   /**
    * 清楚wkt添加的所有
@@ -301,43 +371,78 @@ const mapOperations = {
     featureLayerG_point.clearLayers()
     // featureLayerG_area.clearLayers()
     // variableStore.layerGroupPoly=null;
-    
+    text = new L.Draw.Polygon(homeMap)
+    text.enable()
   },
   clearPolygon: () => {
     // console.log('1-2')
-    
+    text.disable()
     featureLayerG_area.clearLayers()
     variableStore.layerGroupPoly = null
     // variableStore.layerGroupPoint=null
     // featureLayerG_point.clearLayers()
   },
   drawCreated: () => {
-    
-    // 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')
-      
-    // })
+    // 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)
+  }
+
 }
 //omnivore.wkt.parse('POINT(-80 0)').addTo(homeMap);
 
 defineExpose({
   mapOperations,
 })
-</script>
+  </script>
+  
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
index 23898cb..8e4e748 100644
--- a/src/utils/request.js
+++ b/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 = 'biz-vordm';
 export const crawlModule = 'vordm-crawl';
 // 配置新建一个 axios 实例
 const service = axios.create({
diff --git a/src/views/dataService/remoteSensingData/components/searchCondition.vue b/src/views/dataService/remoteSensingData/components/searchCondition.vue
index 2d7fbae..406ad6e 100644
--- a/src/views/dataService/remoteSensingData/components/searchCondition.vue
+++ b/src/views/dataService/remoteSensingData/components/searchCondition.vue
@@ -7,7 +7,7 @@
           <el-card class="box-card">
             <span>Select time range</span>
             <el-row class="block">
-              <el-col :span="3">
+              <el-col :span="5">
                 <span class="demonstration">Start time</span>
               </el-col>
               <el-col :span="19">
@@ -15,11 +15,12 @@
                                 v-model="state.startTime"
                                 type="datetime"
                                 placeholder="Select start time"
-                                :shortcuts="shortcuts" />
+                                value-format="YYYY-MM-DD HH:mm:ss"
+                                :shortcuts="state.shortcuts" />
               </el-col>
             </el-row>
             <el-row class="block">
-              <el-col :span="3">
+              <el-col :span="5">
                 <span class="demonstration">End time</span>
               </el-col>
               <el-col :span="19">
@@ -27,7 +28,8 @@
                                 v-model="state.endTime"
                                 type="datetime"
                                 placeholder="Select end time"
-                                :shortcuts="shortcuts" />
+                                value-format="YYYY-MM-DD HH:mm:ss"
+                                :shortcuts="state.shortcuts" />
               </el-col>
             </el-row>
           </el-card>
@@ -43,8 +45,8 @@
                   <el-col :span="1"></el-col>
                   <el-col :span="19">
                     <span style="font-size:14px;width: 100%;">{{
-                      'Lat:&emsp;' + parseFloat(coordinate.Lat).toFixed(4) + ',&emsp;&emsp;Lng:&emsp;' + parseFloat(coordinate.Lng).toFixed(4)
-                      }}</span>
+                        'Lat:&emsp;' + parseFloat(coordinate.Lat).toFixed(4) + ',&emsp;&emsp;Lng:&emsp;' + parseFloat(coordinate.Lng).toFixed(4)
+                        }}</span>
                   </el-col>
                   <el-col :span="2">
                     <el-button class="el-icon"
@@ -82,7 +84,7 @@
             <span>Select satellite type</span>
             <el-tree-select class="satelliteSelect"
                             v-model="state.satelliteSelected"
-                            :data="sensor"
+                            :data="state.sensor"
                             multiple
                             collapse-tags
                             collapse-tags-tooltip
@@ -98,7 +100,7 @@
                        v-model="state.selectID"
                        clearable
                        placeholder="Select VoRDM ID">
-              <el-option v-for="item in idOptions"
+              <el-option v-for="item in state.idOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value" />
@@ -118,160 +120,24 @@
         </div>
       </el-col>
       <el-col :span="16">
-        <Map id="map"></Map>
+        <Map id="map"
+             ref="map">
+        </Map>
       </el-col>
 
     </el-row>
   </div>
 </template>
-
-<script setup>
+  
+  <script setup>
 import Map from "/@/components/Map.vue";
-import { ref, reactive } from 'vue';
-
-// 卫星类型
-const sensor = ref([
-  {
-    value: 'landsat',
-    label: 'landsat',
-    //   children: [{
-    //     value: 1 - 1,
-    //     label: 'LANDSAT_8_C1'
-    //   },
-    //   {
-    //     value: 1 - 2,
-    //     label: 'LANDSAT_ETM_C1'
-    //   },
-    //   {
-    //     value: 1 - 3,
-    //     label: 'LANDSAT_TM_C1'
-    //   }
-    //   ]
-  },
-  {
-    value: 'Sentinel',
-    label: 'Sentinel',
-    //   children: [{
-    //     value: 2 - 1,
-    //     label: 'Sentinel - 2',
-    //     children: [{
-    //       value: 2 - 1 - 1,
-    //       label: 'S2MSI2A'
-    //     }]
-    //   },
-    //   {
-    //     value: 2 - 2,
-    //     label: 'Sentinel - 1',
-    //     children: [{
-    //       value: 2 - 2 - 1,
-    //       label: 'SLC'
-    //     }]
-    //   }
-    //   ]
-  },
-  {
-    value: '国产系列卫星',
-    label: '国产系列卫星',
-    children: [
-      {
-        value: 'GF - 1',
-        label: 'GF - 1',
-      },
-      {
-        value: 'GF - 2',
-        label: 'GF - 2',
-      },
-      {
-        value: 'GF - 3',
-        label: 'GF - 3',
-      },
-      {
-        value: 'GF - 4',
-        label: 'GF - 4',
-      },
-      {
-        value: 'GF - 6',
-        label: 'GF - 6',
-      },
-      {
-        value: 'ZY - 3',
-        label: 'ZY - 3',
-      },
-      {
-        value: 'ZY - 302',
-        label: 'ZY - 302',
-      },
-      {
-        value: 'ZY - 02C',
-        label: 'ZY - 02C',
-      },
-    ],
-  },
-  {
-    value: '欧比特珠海一号系列卫星',
-    label: '欧比特珠海一号系列卫星',
-    children: [
-      {
-        value: 'OVS - 2A',
-        label: 'OVS - 2A',
-      },
-      {
-        value: 'OVS - 3A',
-        label: 'OVS - 3A',
-      },
-      {
-        value: 'OVS - 1A',
-        label: 'OVS - 1A',
-      },
-      {
-        value: 'OVS - 1B',
-        label: 'OVS - 1B',
-      },
-      {
-        value: 'OHS - 2A',
-        label: 'OHS - 2A',
-      },
-      {
-        value: 'OHS - 2B',
-        label: 'OHS - 2B',
-      },
-      {
-        value: 'OHS - 2C',
-        label: 'OHS - 2C',
-      },
-      {
-        value: 'OHS - 2D',
-        label: 'OHS - 2D',
-      },
-    ],
-  }
-])
-
-// VoRDM ID
-const idOptions = [
-  {
-    value: '2023001001',
-    label: '2023001001',
-  },
-  {
-    value: '2023001002',
-    label: '2023001002',
-  },
-  {
-    value: '2023001003',
-    label: '2023001003',
-  },
-  {
-    value: '2023001004',
-    label: '2023001004',
-  },
-  {
-    value: '2023001005',
-    label: '2023001005',
-  },
-]
+import { ref, reactive, watch } from 'vue';
+import { rs, submit } from '/@/api/crawl/index';
+import { useUserInfo } from '/@/stores/userInfo';
+const userInfo = useUserInfo();
 
 // 初始化数据
+const map = ref()
 const state = reactive({
   startTime: '',
   endTime: '',
@@ -279,68 +145,304 @@ const state = reactive({
   satelliteSelected: [],
   coordinateList: [],
   selectID: '',
+  sensor: [
+    {
+      value: 'landsat',
+      label: 'landsat',
+      //   children: [{
+      //     value: 1 - 1,
+      //     label: 'LANDSAT_8_C1'
+      //   },
+      //   {
+      //     value: 1 - 2,
+      //     label: 'LANDSAT_ETM_C1'
+      //   },
+      //   {
+      //     value: 1 - 3,
+      //     label: 'LANDSAT_TM_C1'
+      //   }
+      //   ]
+    },
+    {
+      value: 'Sentinel',
+      label: 'Sentinel',
+      //   children: [{
+      //     value: 2 - 1,
+      //     label: 'Sentinel - 2',
+      //     children: [{
+      //       value: 2 - 1 - 1,
+      //       label: 'S2MSI2A'
+      //     }]
+      //   },
+      //   {
+      //     value: 2 - 2,
+      //     label: 'Sentinel - 1',
+      //     children: [{
+      //       value: 2 - 2 - 1,
+      //       label: 'SLC'
+      //     }]
+      //   }
+      //   ]
+    },
+    {
+      value: '国产系列卫星',
+      label: '国产系列卫星',
+      children: [
+        {
+          value: 'GF - 1',
+          label: 'GF - 1',
+        },
+        {
+          value: 'GF - 2',
+          label: 'GF - 2',
+        },
+        {
+          value: 'GF - 3',
+          label: 'GF - 3',
+        },
+        {
+          value: 'GF - 4',
+          label: 'GF - 4',
+        },
+        {
+          value: 'GF - 6',
+          label: 'GF - 6',
+        },
+        {
+          value: 'ZY - 3',
+          label: 'ZY - 3',
+        },
+        {
+          value: 'ZY - 302',
+          label: 'ZY - 302',
+        },
+        {
+          value: 'ZY - 02C',
+          label: 'ZY - 02C',
+        },
+      ],
+    },
+    {
+      value: '欧比特珠海一号系列卫星',
+      label: '欧比特珠海一号系列卫星',
+      children: [
+        {
+          value: 'OVS - 2A',
+          label: 'OVS - 2A',
+        },
+        {
+          value: 'OVS - 3A',
+          label: 'OVS - 3A',
+        },
+        {
+          value: 'OVS - 1A',
+          label: 'OVS - 1A',
+        },
+        {
+          value: 'OVS - 1B',
+          label: 'OVS - 1B',
+        },
+        {
+          value: 'OHS - 2A',
+          label: 'OHS - 2A',
+        },
+        {
+          value: 'OHS - 2B',
+          label: 'OHS - 2B',
+        },
+        {
+          value: 'OHS - 2C',
+          label: 'OHS - 2C',
+        },
+        {
+          value: 'OHS - 2D',
+          label: 'OHS - 2D',
+        },
+      ],
+    }
+  ],
+  shortcuts: [
+    {
+      text: '1 month ago',
+      value: () => {
+        const date = new Date()
+        date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
+        return date
+      },
+    },
+    {
+      text: '3 months ago',
+      value: () => {
+        const date = new Date()
+        date.setTime(date.getTime() - 3600 * 1000 * 24 * 90)
+        return date
+      },
+    },
+    {
+      text: '6 months ago',
+      value: () => {
+        const date = new Date()
+        date.setTime(date.getTime() - 3600 * 1000 * 24 * 180)
+        return date
+      },
+    },
+  ],
+  idOptions: [{
+    value: '1',
+    label: '1',
+  },
+  {
+    value: '2',
+    label: '2',
+  },
+  {
+    value: '3',
+    label: '3',
+  },
+  {
+    value: '4',
+    label: '4',
+  },
+  {
+    value: '5',
+    label: '5',
+  }],
+  layerInfo: null,
+  lat: '',
+  lon: '',
+  disLat: '',
+  disLon: '',
 })
 
-const shortcuts = [
-  {
-    text: '1 month ago',
-    value: () => {
-      const date = new Date()
-      date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
-      return date
-    },
-  },
-  {
-    text: '3 months ago',
-    value: () => {
-      const date = new Date()
-      date.setTime(date.getTime() - 3600 * 1000 * 24 * 90)
-      return date
-    },
-  },
-  {
-    text: '6 months ago',
-    value: () => {
-      const date = new Date()
-      date.setTime(date.getTime() - 3600 * 1000 * 24 * 180)
-      return date
-    },
-  },
-]
+const onMapClick = (e) => {
+  state.lat = e.latlng.lat.toFixed(3);
+  state.lon = e.latlng.lng.toFixed(3);
+  state.coordinateList.push({
+    Lat: state.lat,
+    Lng: state.lon
+  })
+  //   changeLatLon(e)
+}
+
+const changeLatLon = (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"
+  }
+
+  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 > 180 && state.disLon <= 360) {
+      state.disLon = String((360 - state.disLon).toFixed(3)) + "°W"
+    }
+  }
+
+}
+
 
 // 添加坐标点
 const addCoordinate = () => {
   state.addCoord = !state.addCoord;
-  state.coordinateList = [
-    {
-      Lat: '43.538'
-      ,
-      Lng: '111.530'
-    },
-    {
-      Lat: '36.195'
-      ,
-      Lng: '120.761'
-    }
-  ]
+  if (state.addCoord && state.coordinateList.length <= 2) {
+    map.value.mapOperations.drawRectangle()
+    map.value.mapOperations.on("click", onMapClick)
+    document.getElementsByClassName('coordinateBtn')[0].innerText = 'Stop';
+  }
+  else {
+    map.value.mapOperations.off("click", onMapClick)
+    document.getElementsByClassName('coordinateBtn')[0].innerText = 'Add coordinates';
+  }
+
 }
 // 清空坐标点
 const clearCoordinate = () => {
   state.coordinateList = [];
   state.startTime = '';
   state.endTime = '';
+  state.addCoord = false
+  map.value.mapOperations.deleteRectangle()
+  map.value.mapOperations.off("click", onMapClick)
+  document.getElementsByClassName('coordinateBtn')[0].innerText = 'Add coordinates';
 }
 // 编辑坐标点
 const editCoordinate = () => {
-
 }
 
 // 开始爬虫
 const startCrawl = () => {
-  console.log("start time:", state.startTime)
-  console.log("end time:", state.endTime)
-  console.log("addCoord:", state.addCoord)
-  console.log("satelliteSelected:", state.satelliteSelected)
+  var ranges = state.coordinateList[0].Lat + ' ' + state.coordinateList[0].Lng + ',' + state.coordinateList[1].Lat + ' ' + state.coordinateList[1].Lng
+  var type = null
+  if (state.satelliteSelected[0] == 'landsat') {
+    type = '5'
+  } else if (state.satelliteSelected[0] == 'Sentinel') {
+    type = '6'
+  } else if (state.satelliteSelected[0] == '') {
+    type = '7'
+  }
+  var id = 2
+
+  var param = {
+    "stime": state.startTime,
+    "etime": state.endTime,
+    "disaster_id": state.selectID * 1,
+    "ranges": ranges,
+    "id": id
+  }
+
+  console.log(param);
+  submit(
+    {
+      type: type,
+      manageId: userInfo.userInfos.id,
+      status: 0,
+      disasterId: state.selectID,
+      id: (id ? id : null)
+    }
+  ).then(ret => {
+    if (ret == 1042) {
+      ElMessage.error("error")
+    } else {
+
+      rs(param).then(res => {
+        console.log(res);
+        // getData();
+        ElMessage({
+          message: 'Success, Start crawling.',
+          type: 'success',
+        })
+      })
+
+    }
+  })
 }
 
 // 清空搜索条件
@@ -352,9 +454,19 @@ const ClearCondition = () => {
   state.coordinateList = []
   state.selectID = ''
 }
-</script>
 
-<style scoped lang="scss">
+// 监听 
+watch(
+  () => state.coordinateList.length,
+  (newValue, oldValue) => {
+    if (newValue > 1) {
+      map.value.mapOperations.off("click", onMapClick)
+    }
+  },
+  { immediate: true })
+  </script>
+  
+  <style scoped lang="scss">
 .rsSelect {
 	border: 1px solid #040728;
 	height: 52rem;
diff --git a/src/views/dataService/remoteSensingData/index.vue b/src/views/dataService/remoteSensingData/index.vue
index 003e903..5709a9d 100644
--- a/src/views/dataService/remoteSensingData/index.vue
+++ b/src/views/dataService/remoteSensingData/index.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="container">
-    <el-tabs v-model="state.activeName"
-             @tab-click="handleClick">
+    <el-tabs v-model="state.activeName">
       <el-tab-pane label="Search condition"
                    name="first">
         <search-condition></search-condition>
diff --git a/src/views/responseManagement/userResponse/index.vue b/src/views/responseManagement/userResponse/index.vue
index 2a29345..e041097 100644
--- a/src/views/responseManagement/userResponse/index.vue
+++ b/src/views/responseManagement/userResponse/index.vue
@@ -190,9 +190,6 @@
                     style="height:35px;"></el-input>
         </el-container>
 
-        <Map style="height:350px ; width:100% ;margin-bottom: 10px;"
-             ref="map"></Map>
-
         <MapPage style="height:350px ; width:100% ;margin-bottom: 10px;"
                  ref="mapRef"></MapPage>
 
@@ -228,7 +225,6 @@ import { ElMessageBox, ElMessage } from 'element-plus';
 import { getList, review } from '/@/api/disasterInfo/index';
 import { getDictionary } from '/@/api/system/dictbiz';
 //引入地图
-import Map from '/@/components/Map.vue';
 import { useDateFormat } from '@vueuse/shared';
 import L from "leaflet";
 import '@geoman-io/leaflet-geoman-free';