yaowang
/
vordm-admin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zqq:call-for-help优化

This commit is contained in:
qqGroup0 2023-05-05 16:08:55 +08:00
parent 1e1b223a6a
commit abd46b930d
1 changed files with 383 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

464
src/views/responseManagement/userResponse/index.vue
View File

@ -1,196 +1,375 @@
<template> <template>
<div class="system-role-container layout-padding"> <div class="system-role-container layout-padding">
<el-config-provider :locale="en"> <el-config-provider :locale="en"
style="position: relative;">
<div class="system-role-padding layout-padding-auto layout-padding-view"> <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-tabs v-model="activeName"
<el-tab-pane label="Unapproved" name="first"> class="demo-tabs"
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> @tab-click="handleClick"
<el-table-column prop="username" label="User name" show-overflow-tooltip sortable></el-table-column> style="margin-left: 20px">
<el-table-column prop="organization" label="Organization" show-overflow-tooltip sortable></el-table-column> <el-tab-pane label="Unapproved"
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip sortable> 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 --> <!-- 在disasterType中获取dictKey 对应的dictValue -->
<template #default="scope"> <template #default="scope">
<el-tag type="info">{{ getValue(scope.row.disasterType) }}</el-tag> <el-tag type="info">{{ getValue(scope.row.disasterType) }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip <el-table-column prop="disasterKeyword"
label="Disaster keyword"
show-overflow-tooltip
sortable></el-table-column> sortable></el-table-column>
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable> <el-table-column prop="disasterTime"
label="Disaster time"
show-overflow-tooltip
sortable>
<template #default="scope"> <template #default="scope">
<!-- 格式化去除时分秒 --> <!-- 格式化去除时分秒 -->
{{ dateFormat(scope.row.disasterTime) }} {{ dateFormat(scope.row.disasterTime) }}
</template> </template>
</el-table-column> </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"> <template #default="scope">
<el-tag type="info" v-if="scope.row.respondStatus === 0">Awaiting approval</el-tag> <el-tag type="info"
<el-tag type="info" v-if="scope.row.respondStatus === 1">Rejected</el-tag> v-if="scope.row.respondStatus === 0">Awaiting approval</el-tag>
<el-tag type="info"
v-if="scope.row.respondStatus === 1">Rejected</el-tag>
</template> </template>
</el-table-column> </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"> <template #default="scope">
<el-button size="small" text type="primary" <el-button size="small"
text
type="primary"
@click="onOpenEditRole('edit', scope.row)">Approve</el-button> @click="onOpenEditRole('edit', scope.row)">Approve</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" <el-pagination @size-change="onHandleSizeChange"
:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.current" background @current-change="onHandleCurrentChange"
v-model:page-size="state.tableData.param.size" layout="total, sizes, prev, pager, next, jumper" 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"> :total="state.tableData.total">
</el-pagination> </el-pagination>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Approved" name="second"> <el-tab-pane label="Approved"
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> 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></el-table-column> <el-table-column prop="username"
<el-table-column prop="organization" label="Organization" show-overflow-tooltip sortable></el-table-column> label="User name"
<el-table-column prop="email" label="Email" show-overflow-tooltip sortable></el-table-column> show-overflow-tooltip
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip sortable> sortable></el-table-column>
<el-table-column prop="organization"
label="Organization"
show-overflow-tooltip
sortable></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>
<!-- 在disasterType中获取dictKey 对应的dictValue --> <!-- 在disasterType中获取dictKey 对应的dictValue -->
<template #default="scope"> <template #default="scope">
<el-tag type="info">{{ getValue(scope.row.disasterType) }}</el-tag> <el-tag type="info">{{ getValue(scope.row.disasterType) }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip <el-table-column prop="disasterKeyword"
label="Disaster keyword"
show-overflow-tooltip
sortable></el-table-column> sortable></el-table-column>
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable> <el-table-column prop="disasterTime"
label="Disaster time"
show-overflow-tooltip
sortable>
<template #default="scope"> <template #default="scope">
<!-- 格式化去除时分秒 --> <!-- 格式化去除时分秒 -->
{{ 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 sortable></el-table-column> <el-table-column prop="chiefName"
<el-table-column prop="reviewTime" label="reviewTime" show-overflow-tooltip sortable /> label="Answer"
<el-table-column width="170" prop="respondStatus" label="Response status" show-overflow-tooltip sortable> show-overflow-tooltip
sortable></el-table-column>
<el-table-column prop="reviewTime"
label="reviewTime"
show-overflow-tooltip
sortable />
<el-table-column width="170"
prop="respondStatus"
label="Response status"
show-overflow-tooltip
sortable>
<template #default="scope"> <template #default="scope">
<el-tag type="info" v-if="scope.row.respondStatus === 2">Approved</el-tag> <el-tag type="info"
<el-tag type="info" v-if="scope.row.respondStatus === 1">Rejected</el-tag> v-if="scope.row.respondStatus === 2">Approved</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 === 1">Rejected</el-tag>
<el-tag type="success"
v-if="scope.row.respondStatus === 3">Complete response</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column width="200" prop="Operate" label="Operate" show-overflow-tooltip sortable> <el-table-column width="200"
prop="Operate"
label="Operate"
show-overflow-tooltip
sortable>
<template #default="scope"> <template #default="scope">
<el-button size="small" text type="primary" @click="onAllocation(scope.row)">Allocation</el-button> <el-button size="small"
<el-button size="small" text type="danger" @click="responseEnded(scope.row)">Response ended</el-button> text
type="primary"
@click="onAllocation(scope.row)">Allocation</el-button>
<el-button size="small"
text
type="danger"
@click="responseEnded(scope.row)">Response ended</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" <el-pagination @size-change="onHandleSizeChange"
:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.current" background @current-change="onHandleCurrentChange"
v-model:page-size="state.tableData.param.size" layout="total, sizes, prev, pager, next, jumper" 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"> :total="state.tableData.total">
</el-pagination> </el-pagination>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Rejected"
<el-tab-pane label="Rejected" name="firstNew"> name="firstNew">
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> <el-table :data="state.tableData.data"
<el-table-column prop="username" label="User name" show-overflow-tooltip sortable></el-table-column> v-loading="state.tableData.loading"
<el-table-column prop="organization" label="Organization" show-overflow-tooltip sortable></el-table-column> style="width: 100%">
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip sortable> <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 --> <!-- 在disasterType中获取dictKey 对应的dictValue -->
<template #default="scope"> <template #default="scope">
<el-tag type="info">{{ getValue(scope.row.disasterType) }}</el-tag> <el-tag type="info">{{ getValue(scope.row.disasterType) }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip <el-table-column prop="disasterKeyword"
label="Disaster keyword"
show-overflow-tooltip
sortable></el-table-column> sortable></el-table-column>
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable> <el-table-column prop="disasterTime"
label="Disaster time"
show-overflow-tooltip
sortable>
<template #default="scope"> <template #default="scope">
<!-- 格式化去除时分秒 --> <!-- 格式化去除时分秒 -->
{{ dateFormat(scope.row.disasterTime) }} {{ dateFormat(scope.row.disasterTime) }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" <el-pagination @size-change="onHandleSizeChange"
:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.current" background @current-change="onHandleCurrentChange"
v-model:page-size="state.tableData.param.size" layout="total, sizes, prev, pager, next, jumper" 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"> :total="state.tableData.total">
</el-pagination> </el-pagination>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Finish"
<el-tab-pane label="Finish" name="firstNewOne"> name="firstNewOne">
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> <el-table :data="state.tableData.data"
<el-table-column prop="username" label="User name" show-overflow-tooltip sortable></el-table-column> v-loading="state.tableData.loading"
<el-table-column prop="organization" label="Organization" show-overflow-tooltip sortable></el-table-column> style="width: 100%">
<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip sortable> <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 --> <!-- 在disasterType中获取dictKey 对应的dictValue -->
<template #default="scope"> <template #default="scope">
<el-tag type="info">{{ getValue(scope.row.disasterType) }}</el-tag> <el-tag type="info">{{ getValue(scope.row.disasterType) }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip <el-table-column prop="disasterKeyword"
label="Disaster keyword"
show-overflow-tooltip
sortable></el-table-column> sortable></el-table-column>
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip sortable> <el-table-column prop="disasterTime"
label="Disaster time"
show-overflow-tooltip
sortable>
<template #default="scope"> <template #default="scope">
<!-- 格式化去除时分秒 --> <!-- 格式化去除时分秒 -->
{{ dateFormat(scope.row.disasterTime) }} {{ dateFormat(scope.row.disasterTime) }}
</template> </template>
</el-table-column> </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"> <template #default="scope">
<!-- 格式化去除时分秒 --> <!-- 格式化去除时分秒 -->
{{ dateFormat(scope.row.respondedTime) }} {{ dateFormat(scope.row.respondedTime) }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" <el-pagination @size-change="onHandleSizeChange"
:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.current" background @current-change="onHandleCurrentChange"
v-model:page-size="state.tableData.param.size" layout="total, sizes, prev, pager, next, jumper" 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"> :total="state.tableData.total">
</el-pagination> </el-pagination>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<el-dialog v-model="state.dialogVisible" title="Approval" width="35%"> <el-dialog v-model="state.dialogVisible"
title="Approval"
width="35%">
<el-container style="margin-top: -2%;margin-bottom: 2%;"> <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"
<el-radio v-model="state.radio" label='2' @click="mapEvents('2')">Area</el-radio> label='1'
<el-radio v-model="state.radio" label='3' @click="mapEvents('3')">Edit</el-radio> @click="mapEvents('1')">Point</el-radio>
<el-button type="primary" style="margin-left: 5%;" @click="ClearSubmit">Clear</el-button> <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>
<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> <span style="line-height: 35px;"> Latitude：</span>
<el-input placeholder="wait……" style="height:35px;margin-right: 1%;" v-model="state.dislat" readonly="readonly"> <el-input placeholder="wait……"
style="height:35px;margin-right: 1%;"
v-model="state.dislat">
</el-input> </el-input>
<span style="line-height: 35px;">Longitude：</span> <span style="line-height: 35px;">Longitude：</span>
<el-input placeholder="wait……" style="height:35px;" v-model="state.dislon" readonly="readonly"></el-input> <el-input placeholder="wait……"
style="height:35px;"
v-model="state.dislon"></el-input>
</el-container> </el-container>
<MapPage style="height:350px ; width:100% ;margin-bottom: 10px;" ref="mapRef"></MapPage> <el-container style="margin-top: 2%;margin-bottom: 2%;"
v-if="state.radio === '3' ? true : false">
<span style="line-height: 35px;"> Latitude：</span>
<el-input placeholder="wait……"
style="height:35px;margin-right: 1%;"
v-model="state.dislat"
:onchange="manualCoordinate">
</el-input>
<span style="line-height: 35px;">Longitude：</span>
<el-input placeholder="wait……"
style="height:35px;"
v-model="state.dislon"
:onchange="manualCoordinate"></el-input>
</el-container>
<MapPage style="height:350px ; width:100% ;margin-bottom: 10px;"
ref="mapRef">
</MapPage>
<div class="latLon-div"> {{ state.popupLat }} , {{ state.popupLon }} </div>
<el-form-item label="Disaster Time"> <el-form-item label="Disaster Time">
<el-date-picker v-model="state.edit.disasterTime" type="date" value-format="YYYY-MM-DD" <el-date-picker v-model="state.edit.disasterTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="Select date and time" /> placeholder="Select date and time" />
</el-form-item> </el-form-item>
<el-form-item label="Disaster type"> <el-form-item label="Disaster type">
<el-select class="form-select" size="default" clearable placeholder="Disaster Type" <el-select class="form-select"
size="default"
clearable
placeholder="Disaster Type"
v-model="state.edit.disasterType"> v-model="state.edit.disasterType">
<el-option v-for="(item, index) in state.dictList" :value="item.dictKey" :key="index" <el-option v-for="(item, index) in state.dictList"
:value="item.dictKey"
:key="index"
:label="item.dictValue" /> :label="item.dictValue" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="Disaster country"> <el-form-item label="Disaster country">
<el-input v-model="state.edit.disasterCountry" placeholder="please Disaster country" clearable></el-input> <el-input v-model="state.edit.disasterCountry"
placeholder="please Disaster country"
clearable></el-input>
</el-form-item> </el-form-item>
<el-form-item label="Theme keywords"> <el-form-item label="Theme keywords">
<el-input v-model="state.edit.disasterKeyword" placeholder="please Theme keywords" clearable></el-input> <el-input v-model="state.edit.disasterKeyword"
placeholder="please Theme keywords"
clearable></el-input>
</el-form-item> </el-form-item>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button> <el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="danger" @click="reviews(1)"> <el-button type="danger"
@click="reviews(1)">
Reject Reject
</el-button> </el-button>
<el-button type="primary" @click="reviews(2)"> <el-button type="primary"
@click="reviews(2)">
Approve Approve
</el-button> </el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
<selectUser ref="select" @callback="getTableData"></selectUser> <selectUser ref="select"
@callback="getTableData"></selectUser>
</el-config-provider> </el-config-provider>
</div> </div>
</template> </template>
@ -276,6 +455,8 @@ const state = reactive({
radio: null, radio: null,
dislat: '', dislat: '',
dislon: '', dislon: '',
popupLat: null,
popupLon: null,
wktPoint_Poly: undefined wktPoint_Poly: undefined
}); });
// 初始化表格数据 // 初始化表格数据
@ -306,6 +487,7 @@ const onOpenEditRole = (type, row) => {
//深拷贝 //深拷贝
state.edit = JSON.parse(JSON.stringify(row)); state.edit = JSON.parse(JSON.stringify(row));
state.dialogVisible = true; state.dialogVisible = true;
if (row.geometry.substring(0, row.geometry.indexOf("((")) == 'Point') {
setTimeout(() => { setTimeout(() => {
state.radio = "1" state.radio = "1"
// mapRef.value.mapOperations.removeAll() // mapRef.value.mapOperations.removeAll()
@ -316,26 +498,57 @@ const onOpenEditRole = (type, row) => {
state.wktPoint_Poly = mapRef.value.mapOperations.wktParseToMap(row.geometry) state.wktPoint_Poly = mapRef.value.mapOperations.wktParseToMap(row.geometry)
mapEvents('1') mapEvents('1')
}, 100); }, 100);
}
else if (row.geometry.substring(0, row.geometry.indexOf("((")) == 'POLYGON') {
setTimeout(() => {
state.radio = "2"
// mapRef.value.mapOperations.removeAll()
//赋值地图范围，并且可以修改点或者区域
// if (state.wktPoint_Poly) {
// mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
// }
mapRef.value.mapOperations.wktParseToMap(row.geometry)
mapEvents('2')
}, 100);
}
}; };
const manualCoordinate = () => {
const disLatLen = state.dislat.length
const disLonLen = state.dislon.length
const editLat = state.dislat.substring(0, disLatLen - 2)
const editLon = state.dislon.substring(0, disLonLen - 2)
mapRef.value.mapOperations.addInteractMarker(editLat, editLon)
}
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) state.popupLat = null
mapRef.value.mapOperations.on("mousemove", changelatlon) state.popupLon = null
mapRef.value.mapOperations.clearPolygon()
} else if (ev == '2') {
mapRef.value.mapOperations.off("click", mapClick); mapRef.value.mapOperations.off("click", mapClick);
mapRef.value.mapOperations.drawPolygon() mapRef.value.mapOperations.off("mousemove", showLatLon)
mapRef.value.mapOperations.clearPolygon()
ev == ''
}
else if (ev == '2') {
mapRef.value.mapOperations.off("click", mapClick);
mapRef.value.mapOperations.off("mousemove", showLatLon)
// mapRef.value.mapOperations.drawPolygon() // mapRef.value.mapOperations.drawPolygon()
// mapRef.value.mapOperations.drawCreated() // mapRef.value.mapOperations.drawCreated()
ev == ''
} }
else { else if (ev == '3') {
mapRef.value.mapOperations.on("click", mapClick)
mapRef.value.mapOperations.on("mousemove", showLatLon)
mapRef.value.mapOperations.Edit() mapRef.value.mapOperations.Edit()
ev == ''
} }
}; };
const ClearSubmit = () => { const ClearSubmit = () => {
state.dislat = ''
state.dislon = ''
setTimeout(() => { setTimeout(() => {
mapRef.value.mapOperations.removeAll() mapRef.value.mapOperations.removeAll()
variableStore.wktdata = null variableStore.wktdata = null
@ -344,10 +557,12 @@ const ClearSubmit = () => {
}, 100) }, 100)
} }
const mapClick = (res) => { const mapClick = (res) => {
// mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly ) // // 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)
state.dislat = changeLat(res.latlng.lat.toFixed(3))
state.dislon = changeLon(res.latlng.lng.toFixed(3))
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
@ -378,48 +593,51 @@ const onHandleCurrentChange = (val) => {
state.tableData.param.pageNum = val; state.tableData.param.pageNum = val;
getTableData(); getTableData();
}; };
const changelatlon = (e) => {
//深拷贝e // 调整纬度
state.dislat = e.latlng.lat.toFixed(3); const changeLat = (lat) => {
state.dislon = e.latlng.lng.toFixed(3); if (lat < 0) {
// if (state.lon < 0) { lat = String(Math.abs(lat)) + "°S"
// state.lon = state.lon + 360;
// }
// state.lon = state.lon.toFixed(3);
if (state.dislat < 0) {
state.dislat = String(Math.abs(state.dislat)) + "°S"
} }
else { else {
state.dislat = String(state.dislat) + "°N" lat = String(lat) + "°N"
} }
return lat
if (state.dislon <= 180 && state.dislon >= 0) {
state.dislon = String(Math.abs(state.dislon)) + "°E"
} }
else if (state.dislon > 180 && state.dislon <= 360) { // 调整经度
state.dislon = String((360 - state.dislon).toFixed(3)) + "°W" const changeLon = (lon) => {
if (lon <= 180 && lon >= 0) {
lon = String(Math.abs(lon)) + "°E"
} }
else if (state.dislon < 0) { else if (lon > 180 && lon <= 360) {
let n = Math.floor(state.dislon / 360) lon = String((360 - lon).toFixed(3)) + "°W"
state.dislon = (state.dislon - n * 360).toFixed(3)
if (state.dislon <= 180 && state.dislon >= 0) {
state.dislon = String(Math.abs(state.dislon)) + "°E"
} }
else if (state.dislon > 180 && state.dislon <= 360) { else if (lon < 0) {
state.dislon = String((360 - state.dislon).toFixed(3)) + "°W" let n = Math.floor(lon / 360)
lon = (lon - n * 360).toFixed(3)
if (lon <= 180 && lon >= 0) {
lon = String(Math.abs(lon)) + "°E"
}
else if (lon > 180 && lon <= 360) {
lon = String((360 - lon).toFixed(3)) + "°W"
} }
} }
else if (state.dislon > 360) { else if (lon > 360) {
let n = Math.floor(state.dislon / 360) let n = Math.floor(lon / 360)
state.dislon = (state.dislon - n * 360).toFixed(3) lon = (lon - n * 360).toFixed(3)
if (state.dislon <= 180 && state.dislon >= 0) { if (lon <= 180 && lon >= 0) {
state.dislon = String(Math.abs(state.dislon)) + "°E" lon = String(Math.abs(lon)) + "°E"
} }
else if (state.dislon > 180 && state.dislon <= 360) { else if (lon > 180 && lon <= 360) {
state.dislon = String((360 - state.dislon).toFixed(3)) + "°W" lon = String((360 - lon).toFixed(3)) + "°W"
} }
} }
return lon
}
// 展示鼠标指针经纬度
const showLatLon = (e) => {
state.popupLat = changeLat(e.latlng.lat.toFixed(3))
state.popupLon = changeLon(e.latlng.lng.toFixed(3))
} }
// 页面加载时 // 页面加载时
onMounted(() => { onMounted(() => {
@ -460,4 +678,12 @@ const getValue = (key) => {
float: right; float: right;
margin-bottom: 15px; margin-bottom: 15px;
} }
.latLon-div {
position: absolute;
top: 60%;
right: 5%;
z-index: 1000;
color: white;
font-size: 15px;
}
</style> </style>