Merge branch 'main' of http://47.92.168.204:3000/VoRDM/vordm-admin
# Conflicts: # src/views/dataService/remoteSensingData/components/searchCondition.vue
This commit is contained in:
yyhouc
commit
5de7ce79ae
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<div ref="map" class="container"></div>
|
||||
<div ref="map"
|
||||
class="container"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import WKT from 'terraformer-wkt-parser'
|
||||
import * as turf from '@turf/turf'
|
||||
import L from 'leaflet'
|
||||
|
|
@ -13,10 +14,11 @@ import 'leaflet-draw/dist/leaflet.draw.css'
|
|||
import '@geoman-io/leaflet-geoman-free';
|
||||
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
|
||||
import 'Leaflet-ImageOverlay-Rotated'
|
||||
import 'leaflet-control-geocoder/dist/Control.Geocoder.css';
|
||||
import 'leaflet-control-geocoder';
|
||||
// import 'leaflet-control-geocoder/dist/Control.Geocoder.css';
|
||||
// import 'leaflet-control-geocoder';
|
||||
import { useVariableStore } from '/@/stores/index.ts'
|
||||
import * as omnivore from '@mapbox/leaflet-omnivore'
|
||||
import axios from "axios";
|
||||
const variableStore = useVariableStore()
|
||||
const map = ref()
|
||||
let homeMap = null
|
||||
|
|
@ -24,6 +26,9 @@ let featureLayerG_area = null
|
|||
let featureLayerG_point = null
|
||||
let layerRectangle = null
|
||||
|
||||
const state = reactive({
|
||||
markerLayer: null
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
homeMap = L.map(map.value, {
|
||||
|
|
@ -31,7 +36,7 @@ onMounted(() => {
|
|||
crs: L.CRS.EPSG4326,
|
||||
center: [29.563761, 106.550464],
|
||||
zoom: 3,
|
||||
minZoom: 1,
|
||||
minZoom: 3,
|
||||
maxZoom: 18,
|
||||
attributionControl: false, // 移除右下角leaflet标识
|
||||
zoomControl: false,
|
||||
|
|
@ -49,32 +54,32 @@ onMounted(() => {
|
|||
|
||||
featureLayerG_area = L.layerGroup().addTo(homeMap)
|
||||
featureLayerG_point = L.layerGroup().addTo(homeMap)
|
||||
// 'http://t0.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk='
|
||||
// const CIA_C = "http://t0.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";
|
||||
// const nameLayer = L.tileLayer(CIA_C + TK_KEY, {
|
||||
// maxZoom: 20,
|
||||
// tileSize: 256,
|
||||
// zoomOffset: 1
|
||||
// }).addTo(homeMap);
|
||||
|
||||
// 创建Geocoding控件
|
||||
const geocoder = L.Control.geocoder({
|
||||
defaultMarkGeocode: false,
|
||||
placeholder: 'Enter address...',
|
||||
collapsed: true,
|
||||
'http://t0.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk='
|
||||
const CIA_C = "http://t0.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";
|
||||
const nameLayer = L.tileLayer(CIA_C + TK_KEY, {
|
||||
maxZoom: 20,
|
||||
tileSize: 256,
|
||||
zoomOffset: 1
|
||||
}).addTo(homeMap);
|
||||
|
||||
// 监听Geocoding控件的结果事件
|
||||
geocoder.on('markgeocode', function (event) {
|
||||
const result = event.geocode || {};
|
||||
onGeocodeResult(result);
|
||||
});
|
||||
// // 创建Geocoding控件
|
||||
// const geocoder = L.Control.geocoder({
|
||||
// defaultMarkGeocode: false,
|
||||
// placeholder: 'Enter address...',
|
||||
// collapsed: true,
|
||||
// }).addTo(homeMap);
|
||||
|
||||
// // 监听Geocoding控件的结果事件
|
||||
// geocoder.on('markgeocode', function (event) {
|
||||
// const result = event.geocode || {};
|
||||
// onGeocodeResult(result);
|
||||
// });
|
||||
|
||||
})
|
||||
const onGeocodeResult = (result) => {
|
||||
homeMap.setView(result.center, 5);
|
||||
L.marker(result.center).addTo(homeMap);
|
||||
}
|
||||
// const onGeocodeResult = (result) => {
|
||||
// homeMap.setView(result.center, 5);
|
||||
// L.marker(result.center).addTo(homeMap);
|
||||
// }
|
||||
|
||||
/** WKT加载点和多边形
|
||||
* Object param 参数集合
|
||||
|
|
@ -309,7 +314,6 @@ const mapOperations = {
|
|||
featureLayerG_point.clearLayers()
|
||||
variableStore.layerGroupPoint = null
|
||||
variableStore.layerGroupPoly = null
|
||||
|
||||
},
|
||||
/**
|
||||
* 清楚wkt添加的所有
|
||||
|
|
@ -425,6 +429,25 @@ const mapOperations = {
|
|||
},
|
||||
removeEdit: () => {
|
||||
homeMap.pm.toggleGlobalRemovalMode();
|
||||
},
|
||||
// 地理编码检索
|
||||
addressSelect: (keyWord) => {
|
||||
if (state.markerLayer) {
|
||||
homeMap.removeLayer(state.markerLayer)
|
||||
}
|
||||
|
||||
let addressServer = 'http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"' + keyWord + '"}&tk=dc8182ebeca998e22154d404aa3c0c17'
|
||||
|
||||
const service = axios.get(addressServer).then(res => {
|
||||
homeMap.flyTo(L.latLng([res.data.location.lat, res.data.location.lon]), 6)
|
||||
const markerParam = {
|
||||
'x': res.data.location.lat,
|
||||
'y': res.data.location.lon
|
||||
}
|
||||
state.markerLayer = L.marker(
|
||||
new L.latLng(res.data.location.lat, res.data.location.lon),
|
||||
).addTo(homeMap)
|
||||
})
|
||||
}
|
||||
}
|
||||
//omnivore.wkt.parse('POINT(-80 0)').addTo(homeMap);
|
||||
|
|
|
|||
|
|
@ -19,16 +19,21 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card class="box-card" style="margin-top: 3%;">
|
||||
<el-card class="box-card"
|
||||
style="margin-top: 3%;">
|
||||
<span>Select time range</span>
|
||||
<el-row class="block">
|
||||
<el-col :span="5">
|
||||
<span class="demonstration">Start time</span>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<el-date-picker style="width: 90%;" v-model="state.startTime" type="datetime"
|
||||
placeholder="Select start time" value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="state.shortcuts"
|
||||
:disabled-date="disabledDate" />
|
||||
<el-date-picker style="width: 90%;"
|
||||
v-model="state.startTime"
|
||||
type="datetime"
|
||||
placeholder="Select start time"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:shortcuts="state.shortcuts"
|
||||
:disabled-date="disabledDate" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="block">
|
||||
|
|
@ -36,20 +41,28 @@
|
|||
<span class="demonstration">End time</span>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<el-date-picker style="width: 90%;" v-model="state.endTime" type="datetime" placeholder="Select end time"
|
||||
value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="state.shortcuts" :disabled-date="disabledDate" />
|
||||
<el-date-picker style="width: 90%;"
|
||||
v-model="state.endTime"
|
||||
type="datetime"
|
||||
placeholder="Select end time"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:shortcuts="state.shortcuts"
|
||||
:disabled-date="disabledDate" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" style="margin-top: 3%;">
|
||||
<span>Select a region <el-switch
|
||||
v-model="state.switch"
|
||||
size="large"
|
||||
active-text="Area"
|
||||
inactive-text="Polygon"
|
||||
/></span>
|
||||
<el-scrollbar wrap-class="list" view-class="view-box" :native="false">
|
||||
<el-card class="box-card"
|
||||
style="margin-top: 3%;">
|
||||
<span>Select a region
|
||||
<el-switch v-model="state.switch"
|
||||
size="large"
|
||||
active-text="Area"
|
||||
inactive-text="Polygon" />
|
||||
</span>
|
||||
<el-scrollbar wrap-class="list"
|
||||
view-class="view-box"
|
||||
:native="false">
|
||||
<div v-for="(coordinate, i) in state.coordinateList ">
|
||||
<el-row class="coordinateContainer">
|
||||
<el-col :span="1"></el-col>
|
||||
|
|
@ -59,36 +72,53 @@
|
|||
parseFloat(coordinate.Lng).toFixed(4)
|
||||
}}</span>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-button class="el-icon" @click="editCoordinate" size="small">
|
||||
<!-- <el-col :span="2">
|
||||
<el-button class="el-icon"
|
||||
@click="editCoordinate"
|
||||
size="small">
|
||||
<ele-Edit />
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
<el-col :span="2">
|
||||
<el-button class="el-icon" @click="state.coordinateList.splice(i, 1);" size="small">
|
||||
<el-button class="el-icon"
|
||||
@click="state.coordinateList.splice(i, 1);"
|
||||
size="small">
|
||||
<ele-Delete />
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-if="state.switch==false"
|
||||
style="margin-bottom: 10px;">
|
||||
{{variableStore.layerGroupPoly}}
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-row>
|
||||
<el-col :span=" 1 "></el-col>
|
||||
<el-col :span=" 7 ">
|
||||
<el-button class="coordinateBtn" @click=" addCoordinate ">Add coordinates</el-button>
|
||||
<el-button class="coordinateBtn"
|
||||
@click=" addCoordinate ">Add coordinates</el-button>
|
||||
</el-col>
|
||||
<el-col :span=" 7 ">
|
||||
<el-button class="coordinateBtn" @click=" clearCoordinate ">Clear coordinates</el-button>
|
||||
<el-button class="coordinateBtn"
|
||||
@click=" clearCoordinate ">Clear coordinates</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" style="margin-top: 3%;">
|
||||
<el-card class="box-card"
|
||||
style="margin-top: 3%;">
|
||||
<span>Select satellite type</span>
|
||||
<el-tree-select class="satelliteSelect" v-model=" state.satelliteSelected " :data=" state.sensor " multiple
|
||||
collapse-tags collapse-tags-tooltip :render-after-expand=" false " show-checkbox
|
||||
placeholder="Select satellite type" />
|
||||
<el-tree-select class="satelliteSelect"
|
||||
v-model=" state.satelliteSelected "
|
||||
:data=" state.sensor "
|
||||
multiple
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
:render-after-expand=" false "
|
||||
show-checkbox
|
||||
placeholder="Select satellite type" />
|
||||
</el-card>
|
||||
|
||||
<!-- <el-card class="box-card"
|
||||
|
|
@ -106,19 +136,34 @@
|
|||
</el-card> -->
|
||||
<el-card style="margin-top:3%;">
|
||||
<el-row>
|
||||
<el-button class="lowerBtn" @click=" startCrawl ">Start Crawl</el-button>
|
||||
<el-button class="lowerBtn"
|
||||
@click=" startCrawl ">Start Crawl</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button class="lowerBtn" @click=" ClearCondition ">Go Back</el-button>
|
||||
<el-button class="lowerBtn"
|
||||
@click=" ClearCondition ">Go Back</el-button>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span=" 16 ">
|
||||
<Map id="map" ref="map">
|
||||
<Map id="map"
|
||||
ref="map">
|
||||
</Map>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="addressGroup">
|
||||
<el-input v-model="state.address"
|
||||
placeholder="Please input location"
|
||||
class="input-with-select"
|
||||
clearable>
|
||||
<template #append>
|
||||
<el-button :icon="Search"
|
||||
@click="addressSelect" />
|
||||
</template>
|
||||
</el-input>
|
||||
</el-row>
|
||||
<el-dialog title="status" v-model="state.statusShow" width="420px">
|
||||
<el-table :data="state.statusData">
|
||||
|
|
@ -146,6 +191,7 @@ import { ref, reactive, watch, defineExpose, onMounted,defineEmits } from 'vue';
|
|||
import { submit2 as submit ,rs2,getStatus } from '/@/api/crawl/index';
|
||||
import { useUserInfo } from '/@/stores/userInfo';
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import { useVariableStore } from '/@/stores/index.ts';
|
||||
import { getList as BizDict } from "/@/api/system/dictbiz.js";
|
||||
const variableStore = useVariableStore();
|
||||
|
|
@ -156,6 +202,7 @@ const disabledDate = (time) => {
|
|||
}
|
||||
// 初始化数据
|
||||
const map = ref()
|
||||
|
||||
const state = reactive({
|
||||
statusData: [],
|
||||
statusShow: false,
|
||||
|
|
@ -176,7 +223,7 @@ const state = reactive({
|
|||
label: 'Sentinel',
|
||||
},
|
||||
],
|
||||
dictData:[],
|
||||
dictData: [],
|
||||
shortcuts: [
|
||||
{
|
||||
text: '1 month ago',
|
||||
|
|
@ -229,32 +276,32 @@ const state = reactive({
|
|||
disLat: '',
|
||||
disLon: '',
|
||||
data: {},
|
||||
data2:[],
|
||||
data2: [],
|
||||
geometry: null,
|
||||
address: '',
|
||||
})
|
||||
//获取爬取卫星状态
|
||||
const openStatus = () => {
|
||||
getStatus(state.data.disasterId).then(res => {
|
||||
state.statusData = res;
|
||||
console.log(res,state.statusData)
|
||||
state.statusShow = true;
|
||||
})
|
||||
}
|
||||
//获取所有卫星类型
|
||||
onMounted(() => {
|
||||
BizDict({ code: 'satelliteType' }).then(res => {
|
||||
let data = res.map(item=>{
|
||||
return {value:item.dictValue,label:item.dictValue}
|
||||
let data = res.map(item => {
|
||||
return { value: item.dictValue, label: item.dictValue }
|
||||
})
|
||||
state.data2=data;
|
||||
state.data2 = data;
|
||||
//初始化加载根据state.switch判断，当时true的时候加载 landsat、Sentinel。否者加载出这两个以外所有内容
|
||||
if(state.switch){
|
||||
state.sensor=state.data2.filter(item=>{
|
||||
return item.value=='landsat'||item.value=='sentinel'
|
||||
if (state.switch) {
|
||||
state.sensor = state.data2.filter(item => {
|
||||
return item.value == 'landsat' || item.value == 'sentinel'
|
||||
})
|
||||
}else{
|
||||
state.sensor=state.data2.filter(item=>{
|
||||
return item.value!='landsat'&&item.value!='sentinel'
|
||||
} else {
|
||||
state.sensor = state.data2.filter(item => {
|
||||
return item.value != 'landsat' && item.value != 'sentinel'
|
||||
})
|
||||
}
|
||||
state.dictData = res;
|
||||
|
|
@ -324,14 +371,12 @@ const changeLatLon = (e) => {
|
|||
state.disLon = String((360 - state.disLon).toFixed(3)) + "°W"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 添加坐标点
|
||||
const addCoordinate = () => {
|
||||
state.addCoord = !state.addCoord;
|
||||
if(state.switch){
|
||||
if (state.switch) {
|
||||
if (state.addCoord && state.coordinateList.length <= 2) {
|
||||
map.value.mapOperations.drawRectangle()
|
||||
map.value.mapOperations.on("click", onMapClick)
|
||||
|
|
@ -341,13 +386,13 @@ const addCoordinate = () => {
|
|||
map.value.mapOperations.off("click", onMapClick)
|
||||
document.getElementsByClassName('coordinateBtn')[0].innerText = 'Add coordinates';
|
||||
}
|
||||
}else{
|
||||
map.value.mapOperations.drawCreated()
|
||||
|
||||
map.value.mapOperations.off("click", onMapClick)
|
||||
map.value.mapOperations.drawPolygon()
|
||||
map.value.mapOperations.wktParseToMap(state.geometry)
|
||||
|
||||
} else {
|
||||
map.value.mapOperations.drawCreated()
|
||||
|
||||
map.value.mapOperations.off("click", onMapClick)
|
||||
map.value.mapOperations.drawPolygon()
|
||||
map.value.mapOperations.wktParseToMap(state.geometry)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -356,7 +401,7 @@ const mapClick = (res) => {
|
|||
}
|
||||
// 清空坐标点
|
||||
const clearCoordinate = () => {
|
||||
if(!state.switch){
|
||||
if (!state.switch) {
|
||||
map.value.mapOperations.clearPolygon()
|
||||
return;
|
||||
}
|
||||
|
|
@ -381,68 +426,68 @@ const startCrawl = () => {
|
|||
ElMessage.error("Please select the search end time")
|
||||
return;
|
||||
}
|
||||
if ((state.coordinateList.length == 0 || !state.coordinateList[0].Lat || !state.coordinateList[0].Lng || !state.coordinateList[1].Lat || !state.coordinateList[1].Lng)&&state.switch) {
|
||||
if ((state.coordinateList.length == 0 || !state.coordinateList[0].Lat || !state.coordinateList[0].Lng || !state.coordinateList[1].Lat || !state.coordinateList[1].Lng) && state.switch) {
|
||||
ElMessage.error("Please draw the area on the map")
|
||||
return;
|
||||
}
|
||||
if(!state.switch&&variableStore.layerGroupPoly==null){
|
||||
if (!state.switch && variableStore.layerGroupPoly == null) {
|
||||
ElMessage.error("Please draw the area on the map")
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
var ranges =state.switch? state.coordinateList[0].Lat + ' ' + state.coordinateList[0].Lng + ',' + state.coordinateList[1].Lat + ' ' + state.coordinateList[1].Lng:variableStore.layerGroupPoly;
|
||||
var ranges = state.switch ? state.coordinateList[0].Lat + ' ' + state.coordinateList[0].Lng + ',' + state.coordinateList[1].Lat + ' ' + state.coordinateList[1].Lng : variableStore.layerGroupPoly;
|
||||
var param = []
|
||||
|
||||
state.satelliteSelected.forEach(data=>{
|
||||
|
||||
state.satelliteSelected.forEach(data => {
|
||||
|
||||
// state.dictData.ma
|
||||
var obj = state.dictData.find(function(item) {
|
||||
var obj = state.dictData.find(function (item) {
|
||||
return item.dictValue === data;
|
||||
});
|
||||
param.push( {
|
||||
type: obj.dictKey,
|
||||
startDate: state.startTime,
|
||||
endDate: state.endTime,
|
||||
manageId: userInfo.userInfos.id,
|
||||
range:ranges,
|
||||
status: 0,
|
||||
disasterId: state.data.disasterId,
|
||||
param.push({
|
||||
type: obj.dictKey,
|
||||
startDate: state.startTime,
|
||||
endDate: state.endTime,
|
||||
manageId: userInfo.userInfos.id,
|
||||
range: ranges,
|
||||
status: 0,
|
||||
disasterId: state.data.disasterId,
|
||||
})
|
||||
})
|
||||
//提交后台数据
|
||||
submit( param ).then(ret => {
|
||||
let arrParams=[];
|
||||
ret.forEach(res=>{
|
||||
var obj1 = state.dictData.find(function(item) {
|
||||
return item.dictKey == res.type;
|
||||
submit(param).then(ret => {
|
||||
let arrParams = [];
|
||||
ret.forEach(res => {
|
||||
var obj1 = state.dictData.find(function (item) {
|
||||
return item.dictKey == res.type;
|
||||
});
|
||||
arrParams.push({
|
||||
type:obj1.dictValue,
|
||||
range:res.range,
|
||||
id:res.id
|
||||
type: obj1.dictValue,
|
||||
range: res.range,
|
||||
id: res.id
|
||||
})
|
||||
})
|
||||
//调用爬虫服务
|
||||
rs2(state.data.disasterId,arrParams,state.startTime,state.endTime).then(res => {
|
||||
rs2(state.data.disasterId, arrParams, state.startTime, state.endTime).then(res => {
|
||||
//获取arrParams中的type 使用，分割
|
||||
var typeArr=[];
|
||||
arrParams.forEach(item=>{
|
||||
var typeArr = [];
|
||||
arrParams.forEach(item => {
|
||||
typeArr.push(item.type)
|
||||
})
|
||||
var typeStr=typeArr.join('、')
|
||||
var typeStr = typeArr.join('、')
|
||||
|
||||
// getData();
|
||||
//使用英语询问是否停留在当前页，还是返回到列表页
|
||||
ElMessageBox.confirm('The ' + typeStr + ' data has been crawled, do you want to stay on this page?', 'Prompt', {
|
||||
confirmButtonText: 'Stay',
|
||||
cancelButtonText: 'Return to the list',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
}).catch(() => {
|
||||
emit('response')
|
||||
});
|
||||
|
||||
// getData();
|
||||
//使用英语询问是否停留在当前页，还是返回到列表页
|
||||
ElMessageBox.confirm('The '+typeStr+' data has been crawled, do you want to stay on this page?', 'Prompt', {
|
||||
confirmButtonText: 'Stay',
|
||||
cancelButtonText: 'Return to the list',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
}).catch(() => {
|
||||
emit('response')
|
||||
});
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -458,6 +503,19 @@ const ClearCondition = () => {
|
|||
emit('response')
|
||||
}
|
||||
|
||||
// 地理编码检索
|
||||
const addressSelect = () => {
|
||||
if (state.address) {
|
||||
map.value.mapOperations.addressSelect(state.address)
|
||||
}
|
||||
else {
|
||||
ElMessage({
|
||||
message: 'Warning, please enter location !',
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 监听
|
||||
watch(
|
||||
() => state.coordinateList.length,
|
||||
|
|
@ -472,13 +530,13 @@ watch(
|
|||
watch(
|
||||
() => state.switch,
|
||||
(newValue, oldValue) => {
|
||||
if(newValue){
|
||||
state.sensor=state.data2.filter(item=>{
|
||||
return item.value=='landsat'||item.value=='sentinel'
|
||||
if (newValue) {
|
||||
state.sensor = state.data2.filter(item => {
|
||||
return item.value == 'landsat' || item.value == 'sentinel'
|
||||
})
|
||||
}else{
|
||||
state.sensor=state.data2.filter(item=>{
|
||||
return item.value!='landsat'&&item.value!='sentinel'&&item.value!='obiter'&&item.value!='domestic'
|
||||
} else {
|
||||
state.sensor = state.data2.filter(item => {
|
||||
return item.value != 'landsat' && item.value != 'sentinel' && item.value != 'obiter' && item.value != 'domestic'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
@ -501,55 +559,62 @@ defineExpose({
|
|||
|
||||
<style scoped lang="scss">
|
||||
.rsSelect {
|
||||
border: 1px solid #f7f7fa;
|
||||
height: 52rem;
|
||||
border: 1px solid #f7f7fa;
|
||||
height: 52rem;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 3%;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 3%;
|
||||
font-size: 18px;
|
||||
}
|
||||
.satelliteSelect,
|
||||
.idSelect {
|
||||
width: 90%;
|
||||
margin: 2% 3% 0 3%;
|
||||
}
|
||||
|
||||
.satelliteSelect,
|
||||
.idSelect {
|
||||
width: 90%;
|
||||
margin: 2% 3% 0 3%;
|
||||
}
|
||||
.block {
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-top: 2%;
|
||||
}
|
||||
.demonstration {
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
height: 20px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.demonstration {
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
height: 20px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.coordinateContainer {
|
||||
margin: 3%;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.coordinateContainer {
|
||||
margin: 3%;
|
||||
height: 15px;
|
||||
}
|
||||
.coordinateBtn {
|
||||
width: 90%;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.coordinateBtn {
|
||||
width: 90%;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.lowerBtn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.lowerBtn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 58rem;
|
||||
margin-left: 5px;
|
||||
height: 58rem;
|
||||
margin-left: 5px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.addressGroup {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
z-index: 99;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,182 +1,360 @@
|
|||
<template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<el-config-provider :locale="en" style="position: relative;">
|
||||
<el-config-provider :locale="en"
|
||||
style="position: relative;">
|
||||
<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 prop="username" label="User name" show-overflow-tooltip sortable></el-table-column>
|
||||
<el-table-column prop="organization" label="Organization" show-overflow-tooltip sortable></el-table-column>
|
||||
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip sortable>
|
||||
<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 prop="username"
|
||||
label="User name"
|
||||
show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="organization"
|
||||
label="Organization"
|
||||
show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="disasterType"
|
||||
label="Disaster type"
|
||||
show-overflow-tooltip
|
||||
sortable>
|
||||
<!-- 在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
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable>
|
||||
<el-table-column prop="disasterKeyword"
|
||||
label="Disaster keyword"
|
||||
show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="disasterTime"
|
||||
label="Disaster time"
|
||||
show-overflow-tooltip
|
||||
sortable>
|
||||
<template #default="scope">
|
||||
<!-- 格式化去除时分秒 -->
|
||||
{{ dateFormat(scope.row.disasterTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="respondStatus" label="Response status" show-overflow-tooltip sortable>
|
||||
<el-table-column prop="respondStatus"
|
||||
label="Response status"
|
||||
show-overflow-tooltip
|
||||
sortable>
|
||||
<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>
|
||||
<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 sortable>
|
||||
<el-table-column prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip
|
||||
sortable>
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary"
|
||||
@click="onOpenEditRole('edit', scope.row)">Approve</el-button>
|
||||
<el-button size="small"
|
||||
text
|
||||
type="primary"
|
||||
@click="onOpenEditRole('edit', scope.row)">Approve</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 @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="Rejected" name="firstNew">
|
||||
<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 sortable></el-table-column>
|
||||
<el-table-column prop="organization" label="Organization" show-overflow-tooltip sortable></el-table-column>
|
||||
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip sortable>
|
||||
<el-tab-pane label="Rejected"
|
||||
name="firstNew">
|
||||
<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
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="organization"
|
||||
label="Organization"
|
||||
show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="disasterType"
|
||||
label="Disaster type"
|
||||
show-overflow-tooltip
|
||||
sortable>
|
||||
<!-- 在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
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable>
|
||||
<el-table-column prop="disasterKeyword"
|
||||
label="Disaster keyword"
|
||||
show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="disasterTime"
|
||||
label="Disaster time"
|
||||
show-overflow-tooltip
|
||||
sortable>
|
||||
<template #default="scope">
|
||||
<!-- 格式化去除时分秒 -->
|
||||
{{ dateFormat(scope.row.disasterTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="200" prop="Operate" label="Operate" show-overflow-tooltip sortable v-auth-role="'admin'">
|
||||
<el-table-column width="200"
|
||||
prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
v-auth-role="'admin'">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="danger" @click="remove(scope.row)">Delete</el-button>
|
||||
<el-button size="small"
|
||||
text
|
||||
type="danger"
|
||||
@click="remove(scope.row)">Delete</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 @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-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 sortable width="150"></el-table-column>
|
||||
<el-table-column prop="organization" label="Organization" show-overflow-tooltip sortable width="160"></el-table-column>
|
||||
<el-table-column prop="email" label="Email" show-overflow-tooltip sortable></el-table-column>
|
||||
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip sortable width="160">
|
||||
<el-table-column prop="username"
|
||||
label="User name"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
width="150"></el-table-column>
|
||||
<el-table-column prop="organization"
|
||||
label="Organization"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
width="160"></el-table-column>
|
||||
<el-table-column prop="email"
|
||||
label="Email"
|
||||
show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="disasterType"
|
||||
label="Disaster type"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
width="160">
|
||||
<!-- 在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" width="190" show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable width="150">
|
||||
<el-table-column prop="disasterKeyword"
|
||||
label="Disaster keyword"
|
||||
width="190"
|
||||
show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="disasterTime"
|
||||
label="Disaster time"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
width="150">
|
||||
<template #default="scope">
|
||||
<!-- 格式化去除时分秒 -->
|
||||
{{ dateFormat(scope.row.disasterTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="chiefName" label="Answer" show-overflow-tooltip sortable></el-table-column>
|
||||
<el-table-column prop="reviewTime" label="reviewTime" show-overflow-tooltip sortable width="140"/>
|
||||
<el-table-column width="170" prop="respondStatus" label="Response status" show-overflow-tooltip sortable>
|
||||
<el-table-column prop="chiefName"
|
||||
label="Answer"
|
||||
show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="reviewTime"
|
||||
label="reviewTime"
|
||||
show-overflow-tooltip
|
||||
sortable
|
||||
width="140" />
|
||||
<el-table-column width="170"
|
||||
prop="respondStatus"
|
||||
label="Response status"
|
||||
show-overflow-tooltip
|
||||
sortable>
|
||||
<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>
|
||||
<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>
|
||||
</el-table-column>
|
||||
<el-table-column width="240" prop="Operate" label="Operate" show-overflow-tooltip sortable>
|
||||
<el-table-column width="240"
|
||||
prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip
|
||||
sortable>
|
||||
<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>
|
||||
<el-button size="small" text type="danger" @click="remove(scope.row)" v-auth-role="'admin'">Delete</el-button>
|
||||
<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>
|
||||
<el-button size="small"
|
||||
text
|
||||
type="danger"
|
||||
@click="remove(scope.row)"
|
||||
v-auth-role="'admin'">Delete</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 @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="Finish" name="firstNewOne">
|
||||
<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 sortable></el-table-column>
|
||||
<el-table-column prop="organization" label="Organization" show-overflow-tooltip sortable></el-table-column>
|
||||
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip sortable>
|
||||
<el-tab-pane label="Finish"
|
||||
name="firstNewOne">
|
||||
<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
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="organization"
|
||||
label="Organization"
|
||||
show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="disasterType"
|
||||
label="Disaster type"
|
||||
show-overflow-tooltip
|
||||
sortable>
|
||||
<!-- 在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
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable>
|
||||
<el-table-column prop="disasterKeyword"
|
||||
label="Disaster keyword"
|
||||
show-overflow-tooltip
|
||||
sortable></el-table-column>
|
||||
<el-table-column prop="disasterTime"
|
||||
label="Disaster time"
|
||||
show-overflow-tooltip
|
||||
sortable>
|
||||
<template #default="scope">
|
||||
<!-- 格式化去除时分秒 -->
|
||||
{{ dateFormat(scope.row.disasterTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="respondedTime" label="Responded time" show-overflow-tooltip sortable>
|
||||
<el-table-column prop="respondedTime"
|
||||
label="Responded time"
|
||||
show-overflow-tooltip
|
||||
sortable>
|
||||
<template #default="scope">
|
||||
<!-- 格式化去除时分秒 -->
|
||||
{{ dateFormat(scope.row.respondedTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="200" prop="Operate" label="Operate" show-overflow-tooltip sortable>
|
||||
<template #default="scope" v-auth-role="'admin'">
|
||||
<el-button size="small" text type="danger" @click="remove(scope.row)">Delete</el-button>
|
||||
<el-table-column width="200"
|
||||
prop="Operate"
|
||||
label="Operate"
|
||||
show-overflow-tooltip
|
||||
sortable>
|
||||
<template #default="scope"
|
||||
v-auth-role="'admin'">
|
||||
<el-button size="small"
|
||||
text
|
||||
type="danger"
|
||||
@click="remove(scope.row)">Delete</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 @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="45%">
|
||||
<el-dialog v-model="state.dialogVisible"
|
||||
title="Approval"
|
||||
width="45%">
|
||||
<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-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">
|
||||
<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">
|
||||
<el-input placeholder="wait……"
|
||||
style="height:35px;margin-right: 1%;"
|
||||
v-model="state.dislat">
|
||||
</el-input>
|
||||
<span style="line-height: 35px;">Longitude：</span>
|
||||
<el-input placeholder="wait……" style="height:35px;" v-model="state.dislon"></el-input>
|
||||
<el-input placeholder="wait……"
|
||||
style="height:35px;"
|
||||
v-model="state.dislon"></el-input>
|
||||
</el-container>
|
||||
<el-container style="margin-top: 2%;margin-bottom: 2%;" v-if="state.radio === '3' ? true : false">
|
||||
<el-container style="margin-top: 2%;margin-bottom: 2%;"
|
||||
v-if="state.radio === '3' ? true : false">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<span style="line-height: 35px;"> Latitude：</span>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-input placeholder="wait……" style="height:35px;margin-right: 1%;" v-model="state.dislat"
|
||||
:onchange="manualLat">
|
||||
<el-input placeholder="wait……"
|
||||
style="height:35px;margin-right: 1%;"
|
||||
v-model="state.dislat"
|
||||
:onchange="manualLat">
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="2"></el-col>
|
||||
|
|
@ -184,53 +362,76 @@
|
|||
<span style="line-height: 35px;">Longitude：</span>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-input placeholder="wait……" style="height:35px;" v-model="state.dislon" :onchange="manualLon"></el-input>
|
||||
<el-input placeholder="wait……"
|
||||
style="height:35px;"
|
||||
v-model="state.dislon"
|
||||
:onchange="manualLon"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-container>
|
||||
<MapPage style="height:350px ; width:100% ;margin-bottom: 10px;" ref="mapRef">
|
||||
<MapPage style="height:350px ; width:100% ;margin-bottom: 10px;"
|
||||
ref="mapRef">
|
||||
</MapPage>
|
||||
<div class="latLon-div"> {{ state.popupLat }} , {{ state.popupLon }} </div>
|
||||
|
||||
<el-form :inline="true" label-width="auto" :label-position="labelPosition" :model="formInline"
|
||||
class="demo-form-inline">
|
||||
<el-form :inline="true"
|
||||
label-width="auto"
|
||||
:label-position="labelPosition"
|
||||
:model="formInline"
|
||||
class="demo-form-inline">
|
||||
|
||||
<el-form-item label="Disaster Time">
|
||||
<el-date-picker style="width: 200px;" v-model="state.edit.disasterTime" type="date" value-format="YYYY-MM-DD"
|
||||
placeholder="Select date and time" />
|
||||
<el-date-picker style="width: 200px;"
|
||||
v-model="state.edit.disasterTime"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="Select date and time" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Disaster type">
|
||||
<el-select style="width: 200px; height: 40px;" class="form-select" size="default" clearable
|
||||
placeholder="Disaster Type" v-model="state.edit.disasterType">
|
||||
<el-option v-for="(item, index) in state.dictList" :value="item.dictKey" :key="index"
|
||||
:label="item.dictValue" />
|
||||
<el-select style="width: 200px; height: 40px;"
|
||||
class="form-select"
|
||||
size="default"
|
||||
clearable
|
||||
placeholder="Disaster Type"
|
||||
v-model="state.edit.disasterType">
|
||||
<el-option v-for="(item, index) in state.dictList"
|
||||
:value="item.dictKey"
|
||||
:key="index"
|
||||
:label="item.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="Disaster country">
|
||||
<el-input style="width: 200px;" v-model="state.edit.disasterCountry" placeholder="please Disaster country"
|
||||
clearable></el-input>
|
||||
<el-input style="width: 200px;"
|
||||
v-model="state.edit.disasterCountry"
|
||||
placeholder="please Disaster country"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Theme keywords">
|
||||
<el-input style="width: 200px;" v-model="state.edit.disasterKeyword" placeholder="please Theme keywords"
|
||||
clearable></el-input>
|
||||
<el-input style="width: 200px;"
|
||||
v-model="state.edit.disasterKeyword"
|
||||
placeholder="please Theme keywords"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">Cancel</el-button>
|
||||
<el-button type="danger" @click="reviews(1)">
|
||||
<el-button type="danger"
|
||||
@click="reviews(1)">
|
||||
Reject
|
||||
</el-button>
|
||||
<el-button type="primary" @click="reviews(2)">
|
||||
<el-button type="primary"
|
||||
@click="reviews(2)">
|
||||
Approve
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<selectUser ref="select" @callback="getTableData"></selectUser>
|
||||
<selectUser ref="select"
|
||||
@callback="getTableData"></selectUser>
|
||||
</el-config-provider>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -239,7 +440,7 @@
|
|||
import en from 'element-plus/dist/locale/en.mjs'
|
||||
import { reactive, onMounted, ref, nextTick, watchEffect, defineAsyncComponent, h } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import { getList, review, responseEndedDisasterInfo,deleteByIds } from '/@/api/disasterInfo/index';
|
||||
import { getList, review, responseEndedDisasterInfo, deleteByIds } from '/@/api/disasterInfo/index';
|
||||
import { getDictionary, getList as getListNew } from '/@/api/system/dictbiz';
|
||||
import { useVariableStore } from '/@/stores/index.ts'
|
||||
//引入地图
|
||||
|
|
@ -258,7 +459,7 @@ const variableStore = useVariableStore();
|
|||
const mapRef = ref();
|
||||
const activeName = ref('first');
|
||||
const select = ref();
|
||||
const remove =(row) =>{
|
||||
const remove = (row) => {
|
||||
let arr = [];
|
||||
arr.push(row.disasterId);
|
||||
//使用英语提示确认删除
|
||||
|
|
@ -363,35 +564,48 @@ const onHandleSizeChange = (val) => {
|
|||
getTableData();
|
||||
};
|
||||
const onOpenEditRole = (type, row) => {
|
||||
|
||||
if (state.wktPoint_Poly) {
|
||||
mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
|
||||
}
|
||||
//深拷贝
|
||||
state.edit = JSON.parse(JSON.stringify(row));
|
||||
state.dialogVisible = true;
|
||||
if (row.geometry.indexOf("POINT")!=-1) {
|
||||
if (row.geometry.indexOf("POINT") != -1) {
|
||||
setTimeout(() => {
|
||||
state.radio = "1"
|
||||
state.dislon = row.geometry.substring(row.geometry.indexOf("(") + 1, row.geometry.lastIndexOf(" "))
|
||||
state.dislat = row.geometry.substring(row.geometry.lastIndexOf(" ") + 1, row.geometry.indexOf(")"))
|
||||
// mapRef.value.mapOperations.removeAll()
|
||||
//赋值地图范围，并且可以修改点或者区域
|
||||
if (state.wktPoint_Poly) {
|
||||
mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
|
||||
}
|
||||
// if (state.wktPoint_Poly) {
|
||||
// mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
|
||||
// console.log('清除');
|
||||
// }
|
||||
state.wktPoint_Poly = mapRef.value.mapOperations.wktParseToMap(row.geometry)
|
||||
mapEvents('1')
|
||||
}, 100);
|
||||
}
|
||||
else if (row.geometry.indexOf("POLYGON")!=-1 ) {
|
||||
else if (row.geometry.indexOf("POLYGON") != -1) {
|
||||
setTimeout(() => {
|
||||
state.radio = "2"
|
||||
// mapRef.value.mapOperations.removeAll()
|
||||
//赋值地图范围，并且可以修改点或者区域
|
||||
// if (state.wktPoint_Poly) {
|
||||
// mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
|
||||
// console.log('清除');
|
||||
// }
|
||||
mapRef.value.mapOperations.wktParseToMap(row.geometry)
|
||||
// mapRef.value.mapOperations.removeWktAll()
|
||||
state.wktPoint_Poly = mapRef.value.mapOperations.wktParseToMap(row.geometry)
|
||||
mapEvents('2')
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
const cancelApporval = () => {
|
||||
state.dialogVisible = false;
|
||||
if (state.wktPoint_Poly) {
|
||||
mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
|
||||
}
|
||||
}
|
||||
|
||||
//验证纬度
|
||||
const manualLat = () => {
|
||||
|
|
@ -595,42 +809,42 @@ const getValue = (key) => {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.demo-tabs>.el-tabs__content {
|
||||
padding: 0px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 0px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.system-role-container {
|
||||
.system-role-padding {
|
||||
padding: 15px;
|
||||
.system-role-padding {
|
||||
padding: 15px;
|
||||
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mt15 {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
float: right;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
float: right;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.latLon-div {
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
right: 5%;
|
||||
z-index: 1000;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
right: 5%;
|
||||
z-index: 1000;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
.el-input__wrapper {
|
||||
height: 40px;
|
||||
}
|
||||
.el-input__wrapper {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue