Merge branch 'zqq' of http://47.92.168.204:3000/VoRDM/vordm-admin into zqq
This commit is contained in:
commit
4c817a82ce
|
@ -2,27 +2,25 @@
|
||||||
<div ref="map"
|
<div ref="map"
|
||||||
class="container"></div>
|
class="container"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import WKT from 'terraformer-wkt-parser'
|
import WKT from 'terraformer-wkt-parser'
|
||||||
|
import * as turf from '@turf/turf'
|
||||||
import L from 'leaflet'
|
import L from 'leaflet'
|
||||||
import 'leaflet/dist/leaflet.css'
|
import 'leaflet/dist/leaflet.css'
|
||||||
import 'leaflet-draw/dist/leaflet.draw'
|
import 'leaflet-draw/dist/leaflet.draw'
|
||||||
import 'leaflet-draw/dist/leaflet.draw.css'
|
import 'leaflet-draw/dist/leaflet.draw.css'
|
||||||
import '@geoman-io/leaflet-geoman-free';
|
import '@geoman-io/leaflet-geoman-free';
|
||||||
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
|
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
|
||||||
import 'Leaflet-ImageOverlay-Rotated'
|
import 'Leaflet-ImageOverlay-Rotated'
|
||||||
import { useVariableStore } from '/@/stores/index.ts'
|
import { useVariableStore } from '/@/stores/index.ts'
|
||||||
import * as omnivore from '@mapbox/leaflet-omnivore'
|
import * as omnivore from '@mapbox/leaflet-omnivore'
|
||||||
const variableStore = useVariableStore()
|
const variableStore = useVariableStore()
|
||||||
const map = ref()
|
const map = ref()
|
||||||
let homeMap = null
|
let homeMap = null
|
||||||
let text = null
|
|
||||||
let featureLayerG_area = null
|
let featureLayerG_area = null
|
||||||
let featureLayerG_point = null
|
let featureLayerG_point = null
|
||||||
let layerRectangle = null
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
homeMap = L.map(map.value, {
|
homeMap = L.map(map.value, {
|
||||||
|
@ -44,92 +42,8 @@ onMounted(() => {
|
||||||
tileSize: 256,
|
tileSize: 256,
|
||||||
zoomOffset: 1,
|
zoomOffset: 1,
|
||||||
}).addTo(homeMap)
|
}).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_area = L.layerGroup().addTo(homeMap)
|
||||||
featureLayerG_point = L.layerGroup().addTo(homeMap)
|
featureLayerG_point = L.layerGroup().addTo(homeMap)
|
||||||
})
|
})
|
||||||
|
@ -142,14 +56,34 @@ onMounted(() => {
|
||||||
*/
|
*/
|
||||||
const mapOperations = {
|
const mapOperations = {
|
||||||
wktParseToMap: (res) => {
|
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
|
||||||
|
|
||||||
},
|
},
|
||||||
/** 添加点标注
|
/** 添加点标注
|
||||||
* Object param 参数集合
|
* Object param 参数集合
|
||||||
|
@ -177,7 +111,7 @@ const mapOperations = {
|
||||||
addInteractMarker: (lat, lon) => {
|
addInteractMarker: (lat, lon) => {
|
||||||
featureLayerG_point.clearLayers()
|
featureLayerG_point.clearLayers()
|
||||||
variableStore.layerGroupPoint = null
|
variableStore.layerGroupPoint = null
|
||||||
var marker = L.marker([lat, lon], { draggable: true }).addTo(
|
var marker = L.marker([lat, lon]).addTo(
|
||||||
featureLayerG_point
|
featureLayerG_point
|
||||||
)
|
)
|
||||||
let features = featureLayerG_point.toGeoJSON().features
|
let features = featureLayerG_point.toGeoJSON().features
|
||||||
|
@ -189,6 +123,7 @@ const mapOperations = {
|
||||||
// marker.on('click',function(){
|
// marker.on('click',function(){
|
||||||
// featureLayerG_point.removeLayer(marker)
|
// featureLayerG_point.removeLayer(marker)
|
||||||
// })
|
// })
|
||||||
|
|
||||||
},
|
},
|
||||||
/** 添加多边形标注
|
/** 添加多边形标注
|
||||||
* Object param 参数集合
|
* Object param 参数集合
|
||||||
|
@ -344,10 +279,7 @@ const mapOperations = {
|
||||||
featureLayerG_point.clearLayers()
|
featureLayerG_point.clearLayers()
|
||||||
variableStore.layerGroupPoint = null
|
variableStore.layerGroupPoint = null
|
||||||
variableStore.layerGroupPoly = null
|
variableStore.layerGroupPoly = null
|
||||||
if (variableStore.polygoncontrol == 'option2') {
|
|
||||||
text = new L.Draw.Polygon(homeMap)
|
|
||||||
text.enable()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 清楚wkt添加的所有
|
* 清楚wkt添加的所有
|
||||||
|
@ -369,80 +301,86 @@ const mapOperations = {
|
||||||
// console.log('2-2')
|
// console.log('2-2')
|
||||||
variableStore.layerGroupPoint = null
|
variableStore.layerGroupPoint = null
|
||||||
featureLayerG_point.clearLayers()
|
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()
|
// featureLayerG_area.clearLayers()
|
||||||
// variableStore.layerGroupPoly=null;
|
// variableStore.layerGroupPoly=null;
|
||||||
text = new L.Draw.Polygon(homeMap)
|
return polygon
|
||||||
text.enable()
|
|
||||||
},
|
},
|
||||||
clearPolygon: () => {
|
clearPolygon: () => {
|
||||||
// console.log('1-2')
|
// console.log('1-2')
|
||||||
text.disable()
|
|
||||||
featureLayerG_area.clearLayers()
|
featureLayerG_area.clearLayers()
|
||||||
variableStore.layerGroupPoly = null
|
variableStore.layerGroupPoly = null
|
||||||
|
homeMap.pm.disableDraw();
|
||||||
// variableStore.layerGroupPoint=null
|
// variableStore.layerGroupPoint=null
|
||||||
// featureLayerG_point.clearLayers()
|
// featureLayerG_point.clearLayers()
|
||||||
},
|
},
|
||||||
drawCreated: () => {
|
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)
|
// featureLayerG_area.addLayer(elll.layer)
|
||||||
let features = featureLayerG_area.toGeoJSON().features
|
// let features = featureLayerG_area.toGeoJSON().features
|
||||||
// console.log(features)
|
// // console.log(features)
|
||||||
variableStore.layerGroupPoly = features.map(function (feature) {
|
// variableStore.layerGroupPoly = features.map(function (feature) {
|
||||||
return WKT.convert(feature.geometry)
|
// return WKT.convert(feature.geometry)
|
||||||
})
|
// })
|
||||||
variableStore.layerGroupPoly =
|
// variableStore.layerGroupPoly =
|
||||||
variableStore.layerGroupPoly.join('\n')
|
// variableStore.layerGroupPoly.join('\n')
|
||||||
text.enable()
|
|
||||||
})
|
// })
|
||||||
},
|
},
|
||||||
drawDestroyed: () => {
|
Edit: () => {
|
||||||
homeMap.off('draw:created', function (elll) {
|
homeMap.pm.enableGlobalEditMode({
|
||||||
elll.layer.setStyle({
|
allowSelfIntersection: false,
|
||||||
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()
|
|
||||||
})
|
})
|
||||||
},
|
if(featureLayerG_area.getLayers().length==1){
|
||||||
drawRectangle: () => {
|
featureLayerG_area.eachLayer(function (layer) {
|
||||||
if (layerRectangle != null) {
|
layer.on('pm:edit', (e) => {
|
||||||
homeMap.removeLayer(layerRectangle)
|
let features = featureLayerG_area.toGeoJSON().features
|
||||||
layerRectangle = null
|
variableStore.layerGroupPoly = features.map(function (feature) {
|
||||||
|
return WKT.convert(feature.geometry)
|
||||||
|
})
|
||||||
|
variableStore.layerGroupPoly = variableStore.layerGroupPoly.join('\n')
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
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
|
||||||
homeMap.on('pm:create', (e) => {
|
variableStore.layerGroupPoint = features.map(function (feature) {
|
||||||
L.PM.reInitLayer(e.layer);
|
return WKT.convert(feature.geometry)
|
||||||
layerRectangle = e.layer
|
})
|
||||||
});
|
variableStore.layerGroupPoint = variableStore.layerGroupPoint.join('\n')
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
console.log('error')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
deleteRectangle: () => {
|
|
||||||
homeMap.removeLayer(layerRectangle)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
//omnivore.wkt.parse('POINT(-80 0)').addTo(homeMap);
|
//omnivore.wkt.parse('POINT(-80 0)').addTo(homeMap);
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
mapOperations,
|
mapOperations,
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -56,6 +56,7 @@ export const useVariableStore = defineStore(Names.TEST, {
|
||||||
// Data_upload_agency:""
|
// Data_upload_agency:""
|
||||||
// }
|
// }
|
||||||
],
|
],
|
||||||
|
// 存储wkt格式数据
|
||||||
layerGroupPoint:null,
|
layerGroupPoint:null,
|
||||||
layerGroupPoly:null,
|
layerGroupPoly:null,
|
||||||
polygoncontrol:null,
|
polygoncontrol:null,
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { Session } from '/@/utils/storage';
|
||||||
|
|
||||||
// export const moduleName = 'zqq-biz-vordm';
|
// export const moduleName = 'zqq-biz-vordm';
|
||||||
export const moduleName = 'biz-vordm';
|
export const moduleName = 'biz-vordm';
|
||||||
export const crawlModule = "vordm-crawl";
|
export const crawlModule = 'vordm-crawl';
|
||||||
// 配置新建一个 axios 实例
|
// 配置新建一个 axios 实例
|
||||||
const service = axios.create({
|
const service = axios.create({
|
||||||
//baseURL: import.meta.env.VITE_API_URL,
|
//baseURL: import.meta.env.VITE_API_URL,
|
||||||
|
|
|
@ -86,12 +86,12 @@
|
||||||
<el-pagination @size-change="onHandleSizeChange"
|
<el-pagination @size-change="onHandleSizeChange"
|
||||||
@current-change="onHandleCurrentChange"
|
@current-change="onHandleCurrentChange"
|
||||||
class="mt15"
|
class="mt15"
|
||||||
:pager-count="3"
|
:pager-count="5"
|
||||||
:page-sizes="[10, 20, 30]"
|
:page-sizes="[10, 20, 30]"
|
||||||
v-model:current-page="state.tableData.param.current"
|
v-model:current-page="state.tableData.param.current"
|
||||||
background
|
background
|
||||||
v-model:page-size="state.tableData.param.size"
|
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">
|
:total="state.tableData.total">
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
@ -126,7 +126,7 @@
|
||||||
show-overflow-tooltip></el-table-column>
|
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="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="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="Latitude" label="Latitude" show-overflow-tooltip></el-table-column> -->
|
||||||
<el-table-column prop="disasterTime"
|
<el-table-column prop="disasterTime"
|
||||||
label="Disaster time"
|
label="Disaster time"
|
||||||
show-overflow-tooltip>
|
show-overflow-tooltip>
|
||||||
|
@ -135,6 +135,9 @@
|
||||||
{{ dateFormat(scope.row.disasterTime) }}
|
{{ dateFormat(scope.row.disasterTime) }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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="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="Operate" label="Operate" show-overflow-tooltip></el-table-column> -->
|
||||||
<el-table-column prop="respondStatus"
|
<el-table-column prop="respondStatus"
|
||||||
|
@ -149,16 +152,27 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</el-table-column>
|
</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-table>
|
||||||
<el-pagination @size-change="onHandleSizeChange"
|
<el-pagination @size-change="onHandleSizeChange"
|
||||||
@current-change="onHandleCurrentChange"
|
@current-change="onHandleCurrentChange"
|
||||||
class="mt15"
|
class="mt15"
|
||||||
:pager-count="3"
|
:pager-count="5"
|
||||||
:page-sizes="[10, 20, 30]"
|
:page-sizes="[10, 20, 30]"
|
||||||
v-model:current-page="state.tableData.param.current"
|
v-model:current-page="state.tableData.param.current"
|
||||||
background
|
background
|
||||||
v-model:page-size="state.tableData.param.size"
|
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">
|
:total="state.tableData.total">
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
@ -166,8 +180,7 @@
|
||||||
</div>
|
</div>
|
||||||
<el-dialog v-model="state.dialogVisible"
|
<el-dialog v-model="state.dialogVisible"
|
||||||
title="Review"
|
title="Review"
|
||||||
width="30%"
|
width="30%">
|
||||||
:before-close="handleClose">
|
|
||||||
<el-container style="margin-top: -2%;margin-bottom: 2%;">
|
<el-container style="margin-top: -2%;margin-bottom: 2%;">
|
||||||
<el-radio v-model="state.radio"
|
<el-radio v-model="state.radio"
|
||||||
label='1'
|
label='1'
|
||||||
|
@ -175,52 +188,51 @@
|
||||||
<el-radio v-model="state.radio"
|
<el-radio v-model="state.radio"
|
||||||
label='2'
|
label='2'
|
||||||
@click="mapEvents('2')">Area</el-radio>
|
@click="mapEvents('2')">Area</el-radio>
|
||||||
|
<el-radio v-model="state.radio"
|
||||||
|
label='3'
|
||||||
|
@click="mapEvents('3')">Edit</el-radio>
|
||||||
<el-button type="primary"
|
<el-button type="primary"
|
||||||
style="margin-left: 5%;"
|
style="margin-left: 5%;"
|
||||||
@click="ClearSubmit">Clear</el-button>
|
@click="ClearSubmit">Clear</el-button>
|
||||||
</el-container>
|
</el-container>
|
||||||
<el-container style="margin-top: 2%;margin-bottom: 2%;"
|
<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>
|
<span style="line-height: 35px;"> Latitude:</span>
|
||||||
<el-input placeholder="请输入内容"
|
<el-input placeholder="wait……"
|
||||||
style="height:35px;margin-right: 1%;"
|
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>
|
<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>
|
</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>
|
||||||
|
|
||||||
<<<<<<< HEAD
|
<template #footer>
|
||||||
<MapPage
|
<span class="dialog-footer">
|
||||||
style="height:350px ; width:100% ;margin-bottom: 10px;"
|
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||||
ref="mapRef">
|
<el-button type="danger"
|
||||||
</MapPage>
|
@click="reviews(1)">
|
||||||
=======
|
Not Review
|
||||||
<MapPage style="height:350px ; width:100% ;margin-bottom: 10px;"
|
</el-button>
|
||||||
ref="mapRef"></MapPage>
|
<el-button type="primary"
|
||||||
>>>>>>> zqq
|
@click="reviews(2)">
|
||||||
|
Review
|
||||||
<el-form-item label="Disaster Time">
|
</el-button>
|
||||||
<el-date-picker v-model="state.edit.disasterTime"
|
</span>
|
||||||
type="date"
|
</template>
|
||||||
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>
|
</el-dialog>
|
||||||
|
<selectUser ref="select"
|
||||||
|
@callback="getTableData"></selectUser>
|
||||||
</el-config-provider>
|
</el-config-provider>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -231,17 +243,23 @@ import { reactive, onMounted, ref, nextTick, watchEffect, defineAsyncComponent }
|
||||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||||
import { getList, review } from '/@/api/disasterInfo/index';
|
import { getList, review } from '/@/api/disasterInfo/index';
|
||||||
import { getDictionary } from '/@/api/system/dictbiz';
|
import { getDictionary } from '/@/api/system/dictbiz';
|
||||||
|
import { useVariableStore } from '/@/stores/index.ts'
|
||||||
//引入地图
|
//引入地图
|
||||||
|
import Map from '/@/components/Map.vue';
|
||||||
import { useDateFormat } from '@vueuse/shared';
|
import { useDateFormat } from '@vueuse/shared';
|
||||||
|
import selectUser from './component/selectUser.vue';
|
||||||
import L from "leaflet";
|
import L from "leaflet";
|
||||||
import '@geoman-io/leaflet-geoman-free';
|
import '@geoman-io/leaflet-geoman-free';
|
||||||
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
|
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
|
||||||
import "leaflet/dist/leaflet.css";
|
import "leaflet/dist/leaflet.css";
|
||||||
import 'leaflet-draw/dist/leaflet.draw'
|
import 'leaflet-draw/dist/leaflet.draw'
|
||||||
import 'leaflet-draw/dist/leaflet.draw.css'
|
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 activeName = ref('first');
|
||||||
|
const select = ref();
|
||||||
const handleClick = (tab, event) => {
|
const handleClick = (tab, event) => {
|
||||||
state.selectName = tab.props.name;
|
state.selectName = tab.props.name;
|
||||||
getTableData();
|
getTableData();
|
||||||
|
@ -276,7 +294,8 @@ const state = reactive({
|
||||||
edit: {},
|
edit: {},
|
||||||
radio: null,
|
radio: null,
|
||||||
dislat: '',
|
dislat: '',
|
||||||
dislon: ''
|
dislon: '',
|
||||||
|
wktPoint_Poly: undefined
|
||||||
});
|
});
|
||||||
// 初始化表格数据
|
// 初始化表格数据
|
||||||
const getTableData = () => {
|
const getTableData = () => {
|
||||||
|
@ -287,7 +306,6 @@ const getTableData = () => {
|
||||||
} else {
|
} else {
|
||||||
state.tableData.param.respondStatus = 2;
|
state.tableData.param.respondStatus = 2;
|
||||||
}
|
}
|
||||||
console.log(activeName.value);
|
|
||||||
getList(state.tableData.param).then((res) => {
|
getList(state.tableData.param).then((res) => {
|
||||||
state.tableData.data = res.records;
|
state.tableData.data = res.records;
|
||||||
state.tableData.total = res.total;
|
state.tableData.total = res.total;
|
||||||
|
@ -302,23 +320,18 @@ const onOpenEditRole = (type, row) => {
|
||||||
|
|
||||||
//深拷贝
|
//深拷贝
|
||||||
state.edit = JSON.parse(JSON.stringify(row));
|
state.edit = JSON.parse(JSON.stringify(row));
|
||||||
nextTick(() => {
|
|
||||||
//赋值地图范围,并且可以修改点或者区域
|
|
||||||
//TODO
|
|
||||||
map.mapOperations.wktParseToMap(row.geometry)
|
|
||||||
});
|
|
||||||
state.dialogVisible = true;
|
state.dialogVisible = true;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
state.radio = "1"
|
state.radio = "1"
|
||||||
// mapRef.value.mapOperations.removeAll()
|
// 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.on("click", (res)=>{
|
||||||
// mapRef.value.mapOperations.clearPolygon()
|
// 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)
|
// mapRef.value.mapOperations.addInteractMarker(res.latlng.lat, res.latlng.lng)
|
||||||
// })
|
// })
|
||||||
mapEvents('1')
|
mapEvents('1')
|
||||||
|
@ -326,40 +339,51 @@ const onOpenEditRole = (type, row) => {
|
||||||
};
|
};
|
||||||
const mapEvents = (ev) => {
|
const mapEvents = (ev) => {
|
||||||
if (ev == '1') {
|
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)
|
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.off("click", mapClick);
|
||||||
|
mapRef.value.mapOperations.drawPolygon()
|
||||||
// mapRef.value.mapOperations.drawPolygon()
|
// mapRef.value.mapOperations.drawPolygon()
|
||||||
// mapRef.value.mapOperations.drawCreated()
|
// mapRef.value.mapOperations.drawCreated()
|
||||||
variableStore.polygoncontrol = "option2"
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
mapRef.value.mapOperations.Edit()
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const ClearSubmit = () => {
|
const ClearSubmit = () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
mapRef.value.mapOperations.removeAll()
|
mapRef.value.mapOperations.removeAll()
|
||||||
variableStore.wktdata = null
|
variableStore.wktdata = null
|
||||||
|
variableStore.layerGroupPoint = null;
|
||||||
|
layerGroupPoly = null;
|
||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
const mapClick = (res) => {
|
const mapClick = (res) => {
|
||||||
mapRef.value.mapOperations.removeLayer(state.wktPoint)
|
// mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly )
|
||||||
changelatlon(res);
|
changelatlon(res);
|
||||||
mapRef.value.mapOperations.addInteractMarker(res.latlng.lat.toFixed(3), res.latlng.lng.toFixed(3))
|
mapRef.value.mapOperations.addInteractMarker(res.latlng.lat.toFixed(3), res.latlng.lng.toFixed(3))
|
||||||
|
// console.log(state.wktPoint_Poly)
|
||||||
}
|
}
|
||||||
|
|
||||||
const reviews = (index) => {
|
const reviews = (index) => {
|
||||||
//将修改后的地图位置赋值到state.edit.geometry
|
//将修改后的地图位置赋值到state.edit.geometry
|
||||||
//TODO 修改地图赋值
|
//TODO 修改地图赋值
|
||||||
//state.edit.geometry = map.mapOperations.getWkt();
|
//state.edit.geometry = map.mapOperations.getWkt();
|
||||||
|
|
||||||
//判断index的值来判断是审核通过还是不通过
|
//判断index的值来判断是审核通过还是不通过
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (index === 1) {
|
if (index === 1) {
|
||||||
state.edit.respondStatus = 1;
|
state.edit.respondStatus = 1;
|
||||||
} else {
|
} else {
|
||||||
state.edit.respondStatus = 2;
|
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";
|
state.edit.disasterTime = useDateFormat(state.edit.disasterTime, 'YYYY-MM-DD').value + " 00:00:00";
|
||||||
review(state.edit).then((res) => {
|
review(state.edit).then((res) => {
|
||||||
|
@ -370,20 +394,13 @@ const reviews = (index) => {
|
||||||
}
|
}
|
||||||
// 分页改变
|
// 分页改变
|
||||||
const onHandleCurrentChange = (val) => {
|
const onHandleCurrentChange = (val) => {
|
||||||
console.log(val);
|
|
||||||
state.tableData.param.pageNum = val;
|
state.tableData.param.pageNum = val;
|
||||||
getTableData();
|
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) => {
|
const changelatlon = (e) => {
|
||||||
|
//深拷贝e
|
||||||
state.dislat = e.latlng.lat.toFixed(3);
|
state.dislat = e.latlng.lat.toFixed(3);
|
||||||
state.dislon = e.latlng.lng.toFixed(3);
|
state.dislon = e.latlng.lng.toFixed(3);
|
||||||
// state.lon = state.lon % 360;
|
|
||||||
// if (state.lon < 0) {
|
// if (state.lon < 0) {
|
||||||
// state.lon = state.lon + 360;
|
// state.lon = state.lon + 360;
|
||||||
// }
|
// }
|
||||||
|
@ -429,20 +446,7 @@ onMounted(() => {
|
||||||
getDictionary({ code: 'disaster' }).then((res) => {
|
getDictionary({ code: 'disaster' }).then((res) => {
|
||||||
state.disasterTypeList = 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) => {
|
const getValue = (key) => {
|
||||||
//返回state.disasterTypeLis 对应的value
|
//返回state.disasterTypeLis 对应的value
|
||||||
|
|
Loading…
Reference in New Issue