Merge branch 'zqq'

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)
+    let layer = omnivore.wkt.parse(res)
-    // if(omnivore.wkt.parse(res) instanceof L.Marker){
+    layer.addTo(featureLayerG_point)
     
-    // }
+    let attr=Object.values(layer._layers) 
-    // else{
+    
-    //   return omnivore.wkt.parse(res).addTo(featureLayerG_area )
+    // 判断审核的数据类型，如果是点则直接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)
+    return polygon
-    text.enable()
   },
   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) {
+    // homeMap.on('draw:created', function (elll) {
-      featureLayerG_area.clearLayers()
+    //   featureLayerG_area.clearLayers()
-      variableStore.layerGroupPoly = null
+    //   variableStore.layerGroupPoly = null
-      elll.layer.setStyle({
+    //   elll.layer.setStyle({
-        color: '#FF0080',
+    //     color: '#FF0080',
-        opacity: 1,
+    //     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,
     })
-      featureLayerG_area.addLayer(elll.layer)
+    if(featureLayerG_area.getLayers().length==1){
+      featureLayerG_area.eachLayer(function (layer) {
+        layer.on('pm:edit', (e) => {
           let features = featureLayerG_area.toGeoJSON().features
-      // console.log(features)
           variableStore.layerGroupPoly = features.map(function (feature) {
             return WKT.convert(feature.geometry)
           })
-      variableStore.layerGroupPoly =
+          variableStore.layerGroupPoly = variableStore.layerGroupPoly.join('\n')
-        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', {
+    else if(featureLayerG_point.getLayers().length==1){
-      snappable: true,
+      featureLayerG_point.eachLayer(function (layer) {
-      snapDistance: 20,
+        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')
         });
-    homeMap.on('pm:create', (e) => {
-      L.PM.reInitLayer(e.layer);
-      layerRectangle = e.layer
       });
-  },
+    }
-  deleteRectangle: () => {
+    else{
-    homeMap.removeLayer(layerRectangle)
+      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

@@ -5,7 +5,7 @@ import { Session } from '/@/utils/storage';
 
 // export const moduleName = 'zqq-biz-vordm';
 export const moduleName = 'biz-vordm';
-export const crawlModule = "vordm-crawl";
+export const crawlModule = 'vordm-crawl';
 // 配置新建一个 axios 实例
 const service = axios.create({
 	//baseURL: import.meta.env.VITE_API_URL,

src/views/responseManagement/userResponse/index.vue

@@ -86,12 +86,12 @@
             <el-pagination @size-change="onHandleSizeChange"
                            @current-change="onHandleCurrentChange"
                            class="mt15"
-                           :pager-count="3"
+                           :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"
+                           layout="total, sizes, prev, pager, next, jumper"
                            :total="state.tableData.total">
             </el-pagination>
           </el-tab-pane>
@@ -135,6 +135,9 @@
                   {{ dateFormat(scope.row.disasterTime) }}
                 </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 prop="respondStatus"
@@ -149,16 +152,27 @@
                 </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="onAllocation(scope.row)">Allocation</el-button>
+                </template>
+              </el-table-column>
             </el-table>
             <el-pagination @size-change="onHandleSizeChange"
                            @current-change="onHandleCurrentChange"
                            class="mt15"
-                           :pager-count="3"
+                           :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"
+                           layout="total, sizes, prev, pager, next, jumper"
                            :total="state.tableData.total">
             </el-pagination>
           </el-tab-pane>
@@ -166,8 +180,7 @@
       </div>
       <el-dialog v-model="state.dialogVisible"
                  title="Review"
-                 width="30%"
+                 width="30%">
-                 :before-close="handleClose">
         <el-container style="margin-top: -2%;margin-bottom: 2%;">
           <el-radio v-model="state.radio"
                     label='1'
@@ -175,31 +188,28 @@
           <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">
+                      v-if="state.radio==='1'?true:false">
           <span style="line-height: 35px;"> Latitude：</span>
-          <el-input placeholder="请输入内容"
+          <el-input placeholder="wait……"
                     style="height:35px;margin-right: 1%;"
-                    v-model="state.dislat"></el-input>
+                    v-model="state.dislat"
+                    readonly="readonly"> </el-input>
           <span style="line-height: 35px;">Longitude：</span>
-          <el-input placeholder="请输入内容"
+          <el-input placeholder="wait……"
-                    style="height:35px;"></el-input>
+                    style="height:35px;"
+                    v-model="state.dislon"
+                    readonly="readonly"></el-input>
         </el-container>
-
-        <<<<<<< HEAD
-                <MapPage
-                style="height:350px ; width:100% ;margin-bottom: 10px;"
-                ref="mapRef">
-          </MapPage>
-          =======
         <MapPage style="height:350px ; width:100% ;margin-bottom: 10px;"
                  ref="mapRef"></MapPage>
-          >>>>>>> zqq
-
         <el-form-item label="Disaster Time">
           <el-date-picker v-model="state.edit.disasterTime"
                           type="date"
@@ -221,6 +231,8 @@
           </span>
         </template>
       </el-dialog>
+      <selectUser ref="select"
+                  @callback="getTableData"></selectUser>
     </el-config-provider>
   </div>
 </template>
@@ -231,17 +243,23 @@ import { reactive, onMounted, ref, nextTick, watchEffect, defineAsyncComponent }
 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();
@@ -276,7 +294,8 @@ const state = reactive({
   edit: {},
   radio: null,
   dislat: '',
-  dislon: ''
+  dislon: '',
+  wktPoint_Poly: undefined
 });
 // 初始化表格数据
 const getTableData = () => {
@@ -287,7 +306,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;
@@ -302,23 +320,18 @@ 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) {
+    if (state.wktPoint_Poly) {
-      mapRef.value.mapOperations.removeLayer(state.wktPoint)
+      mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
     }
-    state.wktPoint = mapRef.value.mapOperations.wktParseToMap(row.geometry)
+    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)
+    //   mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly)
     //   mapRef.value.mapOperations.addInteractMarker(res.latlng.lat, res.latlng.lng)
     // })
     mapEvents('1')
@@ -326,40 +339,51 @@ const onOpenEditRole = (type, row) => {
 };
 const mapEvents = (ev) => {
   if (ev == '1') {
-    mapRef.value.mapOperations.clearPolygon()
+    // mapRef.value.mapOperations.clearPolygon()
-    // mapRef.value.mapOperations.on("click", mapClick)
+    mapRef.value.mapOperations.on("click", mapClick)
     mapRef.value.mapOperations.on("mousemove", changelatlon)
-    variableStore.polygoncontrol = "option1"
+    mapRef.value.mapOperations.clearPolygon()
-  } else {
+
+  } 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)
+  // mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly )
   changelatlon(res);
   mapRef.value.mapOperations.addInteractMarker(res.latlng.lat.toFixed(3), res.latlng.lng.toFixed(3))
+  // console.log(state.wktPoint_Poly)
 }
-
 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) => {
@@ -370,20 +394,13 @@ 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;
   // }
@@ -429,20 +446,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