yaowang
/
vordm-admin
10
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

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

@ -1,196 +1,375 @@
<template>
<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">
<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="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></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>
<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="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 -->
<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="chiefName" label="Answer" 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>
<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 />
<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="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">
<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="primary"
@click="onAllocation(scope.row)">Allocation</el-button>
<el-button size="small"
text
type="danger"
@click="responseEnded(scope.row)">Response ended</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>
<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>
<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="35%">
<el-dialog v-model="state.dialogVisible"
title="Approval"
width="35%">
<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" readonly="readonly">
<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" readonly="readonly"></el-input>
<el-input placeholder="wait……"
style="height:35px;"
v-model="state.dislon"></el-input>
</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-date-picker v-model="state.edit.disasterTime" type="date" value-format="YYYY-MM-DD"
placeholder="Select date and time" />
<el-date-picker 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 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 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 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 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>
<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>
@ -200,7 +379,7 @@ import en from 'element-plus/dist/locale/en.mjs'
import { reactive, onMounted, ref, nextTick, watchEffect, defineAsyncComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { getList, review, responseEndedDisasterInfo } from '/@/api/disasterInfo/index';
import { getDictionary,getList as getListNew } from '/@/api/system/dictbiz';
import { getDictionary, getList as getListNew } from '/@/api/system/dictbiz';
import { useVariableStore } from '/@/stores/index.ts'
//引入地图
import Map from '/@/components/Map.vue';
@ -276,6 +455,8 @@ const state = reactive({
radio: null,
dislat: '',
dislon: '',
popupLat: null,
popupLon: null,
wktPoint_Poly: undefined
});
// 初始化表格数据
@ -306,36 +487,68 @@ const onOpenEditRole = (type, row) => {
//深拷贝
state.edit = JSON.parse(JSON.stringify(row));
state.dialogVisible = true;
setTimeout(() => {
state.radio = "1"
// mapRef.value.mapOperations.removeAll()
//赋值地图范围，并且可以修改点或者区域
if (state.wktPoint_Poly) {
mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
}
state.wktPoint_Poly = mapRef.value.mapOperations.wktParseToMap(row.geometry)
mapEvents('1')
}, 100);
if (row.geometry.substring(0, row.geometry.indexOf("((")) == 'Point') {
setTimeout(() => {
state.radio = "1"
// mapRef.value.mapOperations.removeAll()
//赋值地图范围，并且可以修改点或者区域
if (state.wktPoint_Poly) {
mapRef.value.mapOperations.removeLayer(state.wktPoint_Poly)
}
state.wktPoint_Poly = mapRef.value.mapOperations.wktParseToMap(row.geometry)
mapEvents('1')
}, 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) => {
if (ev == '1') {
// mapRef.value.mapOperations.clearPolygon()
mapRef.value.mapOperations.on("click", mapClick)
mapRef.value.mapOperations.on("mousemove", changelatlon)
mapRef.value.mapOperations.clearPolygon()
} else if (ev == '2') {
state.popupLat = null
state.popupLon = null
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.drawCreated()
ev == ''
}
else {
else if (ev == '3') {
mapRef.value.mapOperations.on("click", mapClick)
mapRef.value.mapOperations.on("mousemove", showLatLon)
mapRef.value.mapOperations.Edit()
ev == ''
}
};
const ClearSubmit = () => {
state.dislat = ''
state.dislon = ''
setTimeout(() => {
mapRef.value.mapOperations.removeAll()
variableStore.wktdata = null
@ -344,10 +557,12 @@ const ClearSubmit = () => {
}, 100)
}
const mapClick = (res) => {
// mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly )
changelatlon(res);
// // mapRef.value.mapOperations.removeLayer( state.wktPoint_Poly )
// 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))
// console.log(state.wktPoint_Poly)
}
const reviews = (index) => {
//将修改后的地图位置赋值到state.edit.geometry
@ -378,48 +593,51 @@ const onHandleCurrentChange = (val) => {
state.tableData.param.pageNum = val;
getTableData();
};
const changelatlon = (e) => {
//深拷贝e
state.dislat = e.latlng.lat.toFixed(3);
state.dislon = e.latlng.lng.toFixed(3);
// if (state.lon < 0) {
// state.lon = state.lon + 360;
// }
// state.lon = state.lon.toFixed(3);
if (state.dislat < 0) {
state.dislat = String(Math.abs(state.dislat)) + "°S"
// 调整纬度
const changeLat = (lat) => {
if (lat < 0) {
lat = String(Math.abs(lat)) + "°S"
}
else {
state.dislat = String(state.dislat) + "°N"
lat = String(lat) + "°N"
}
if (state.dislon <= 180 && state.dislon >= 0) {
state.dislon = String(Math.abs(state.dislon)) + "°E"
return lat
}
// 调整经度
const changeLon = (lon) => {
if (lon <= 180 && lon >= 0) {
lon = String(Math.abs(lon)) + "°E"
}
else if (state.dislon > 180 && state.dislon <= 360) {
state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
else if (lon > 180 && lon <= 360) {
lon = String((360 - lon).toFixed(3)) + "°W"
}
else if (state.dislon < 0) {
let n = Math.floor(state.dislon / 360)
state.dislon = (state.dislon - n * 360).toFixed(3)
if (state.dislon <= 180 && state.dislon >= 0) {
state.dislon = String(Math.abs(state.dislon)) + "°E"
else if (lon < 0) {
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 (state.dislon > 180 && state.dislon <= 360) {
state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
else if (lon > 180 && lon <= 360) {
lon = String((360 - lon).toFixed(3)) + "°W"
}
}
else if (state.dislon > 360) {
let n = Math.floor(state.dislon / 360)
state.dislon = (state.dislon - n * 360).toFixed(3)
if (state.dislon <= 180 && state.dislon >= 0) {
state.dislon = String(Math.abs(state.dislon)) + "°E"
else if (lon > 360) {
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 (state.dislon > 180 && state.dislon <= 360) {
state.dislon = String((360 - state.dislon).toFixed(3)) + "°W"
else if (lon > 180 && lon <= 360) {
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(() => {
@ -437,27 +655,35 @@ 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;
}
</style>