学习机3.4.0版本
This commit is contained in:
@@ -1,38 +1,48 @@
|
||||
<template>
|
||||
<n-grid style="width: 96vw;" class="mx-auto" :cols="2">
|
||||
<n-gi style="padding-top: 0; padding-bottom: 0;" class="w-h-full p">
|
||||
<n-scrollbar style="max-height: 49vh; border: 1px solid #eee">
|
||||
<n-gi style="padding-top: 1.5vh; padding-bottom: 0;" class="w-h-full p">
|
||||
<n-scrollbar style="max-height: 48vh; border: 1px solid #eee">
|
||||
<n-dynamic-input
|
||||
v-model:value="geodata"
|
||||
:on-create="onCreate"
|
||||
:on-remove="onRemove"
|
||||
>
|
||||
<template #default="{ value }">
|
||||
<template #default="{ value, index }">
|
||||
<div style="display: flex; align-items: flex-start; width: 100%">
|
||||
<div style="width: 50%">
|
||||
<n-input maxlength="13" clearable v-model:value="value.lat" type="text" placeholder="经度" @input="handleInput" :status="value.latStatus" />
|
||||
<n-gradient-text :size="12" type="error" v-show="value.latCheck">
|
||||
<div v-html="value.lat == '' ? '经度不能为空' : '数据格式错误'"></div>
|
||||
<div v-html="value.latErrMsg"></div>
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div style="width: 50%">
|
||||
<n-input maxlength="12" clearable v-model:value="value.lng" type="text" placeholder="纬度" @input="handleInput" :status="value.lngStatus" />
|
||||
<n-gradient-text :size="12" type="error" v-show="value.lngCheck">
|
||||
<div v-html="value.lng == '' ? '纬度不能为空' : '数据格式错误'"></div>
|
||||
<div v-html="value.lngErrMsg"></div>
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
</div>
|
||||
<n-button style="padding: 0 5px;font-size: 24px;" @click="move('up', index)">
|
||||
<n-icon>
|
||||
<UpIcon />
|
||||
</n-icon>
|
||||
</n-button>
|
||||
<n-button style="padding: 0 5px;font-size: 24px;" @click="move('down', index)">
|
||||
<n-icon>
|
||||
<DownIcon />
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</template>
|
||||
</n-dynamic-input>
|
||||
</n-scrollbar>
|
||||
<v-chart style="max-height: 39vh; border: 1px solid #eee" class="chart" id="chart" :option="option" />
|
||||
<v-chart style="max-height: 38vh; border: 1px solid #eee" class="chart" id="chart" :option="option" />
|
||||
<div style="margin-top: 1vh;" class="w-full flex flex-1">
|
||||
<n-button class="mx-auto" :disabled="geodata.length == 0 ? true : false" size="large" type="primary" @click="calculation">计 算</n-button>
|
||||
<n-button class="mx-auto" :disabled="geodata.length == 0 ? true : false" size="large" type="error" @click="delgeo">清空输入</n-button>
|
||||
</div>
|
||||
</n-gi>
|
||||
<n-gi style="padding-top: 0; padding-bottom: 0;" class="w-h-full p">
|
||||
<n-data-table :columns="columns" :data="data" :single-line="false" :pagination="pagination" :style="{ height: '88vh' }" flex-height />
|
||||
<n-gi style="padding-top: 1.5vh; padding-bottom: 0;" class="w-h-full p">
|
||||
<n-data-table :columns="columns" :data="data" :single-line="false" :pagination="pagination" :style="{ height: '86vh' }" flex-height />
|
||||
<div style="margin-top: 1vh;" class="w-full flex flex-1">
|
||||
<div style="width: 128px" class="mx-auto">
|
||||
<n-select v-model:value="unit" :options="options" />
|
||||
@@ -50,7 +60,8 @@ import { use, registerMap } from "echarts/core"
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { MapChart, ScatterChart } from 'echarts/charts'
|
||||
import VChart from "vue-echarts"
|
||||
import { NGi, NGrid, NButton, NDynamicInput, NDataTable, NScrollbar, NInput, NGradientText, NSelect, useMessage, useDialog } from "naive-ui"
|
||||
import { NGi, NGrid, NButton, NDynamicInput, NDataTable, NScrollbar, NInput, NGradientText, NIcon, NSelect, useMessage, useDialog } from "naive-ui"
|
||||
import { KeyboardArrowUpRound as UpIcon, KeyboardArrowDownRound as DownIcon } from '@vicons/material'
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
@@ -61,9 +72,11 @@ const geodata = ref([
|
||||
lat: "",
|
||||
latStatus: "",
|
||||
latCheck: "",
|
||||
latErrMsg:"",
|
||||
lng: "",
|
||||
lngStatus: "",
|
||||
lngCheck: ""
|
||||
lngCheck: "",
|
||||
lngErrMsg:""
|
||||
}
|
||||
])
|
||||
|
||||
@@ -72,9 +85,11 @@ const onCreate = () => {
|
||||
lat: "",
|
||||
latStatus: "",
|
||||
latCheck: "",
|
||||
latErrMsg:"",
|
||||
lng: "",
|
||||
lngStatus: "",
|
||||
lngCheck: ""
|
||||
lngCheck: "",
|
||||
lngErrMsg:""
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,6 +104,26 @@ const options = [
|
||||
label:"平方千米/km²",
|
||||
value:'平方千米/km²'
|
||||
}]
|
||||
|
||||
const move = (updown, index) => {
|
||||
let moveit
|
||||
if(updown == 'up'){
|
||||
if(index !== 0){
|
||||
moveit = geodata.value[index]
|
||||
geodata.value[index] = geodata.value[index - 1]
|
||||
geodata.value[index - 1] = moveit
|
||||
moveit = null
|
||||
}
|
||||
}
|
||||
if(updown == 'down'){
|
||||
if(index !== geodata.value.length-1){
|
||||
moveit = geodata.value[index]
|
||||
geodata.value[index] = geodata.value[index + 1]
|
||||
geodata.value[index + 1] = moveit
|
||||
moveit = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
@@ -250,9 +285,14 @@ window.addEventListener('resize', () => {
|
||||
chart.resize()
|
||||
})
|
||||
|
||||
const rerender = (mapName,mapArea,mapGeo) => {
|
||||
const rerender = (mapName,mapArea,mapGeo,initialize) => {
|
||||
if(mapGeo){
|
||||
geoObj.features[0].properties.cp = centerPoint(mapGeo)
|
||||
if(initialize){
|
||||
geoObj.features[0].properties.cp = [15,12]
|
||||
}
|
||||
else{
|
||||
geoObj.features[0].properties.cp = centerPoint(mapGeo)
|
||||
}
|
||||
geoObj.features[0].geometry.coordinates[0][0] = mapGeo
|
||||
}
|
||||
geoObj.features[0].properties.name = mapArea
|
||||
@@ -262,7 +302,7 @@ const rerender = (mapName,mapArea,mapGeo) => {
|
||||
|
||||
const onRemove = () => {
|
||||
if(geodata.value.length < 3){
|
||||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]])
|
||||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]],true)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -273,11 +313,13 @@ const inputFilter = (inputData) => {
|
||||
if(item !== '\u00A0' && item !== '\u0020' && item !== '\u3000'){
|
||||
if(!isNaN(Number(item))){
|
||||
infilter.push(item)
|
||||
}else if(item == '.'){
|
||||
}
|
||||
else if(item == '.'){
|
||||
if(infilter.indexOf('.') == '-1'){
|
||||
infilter.push(item)
|
||||
}
|
||||
}else if(item == '-'){
|
||||
}
|
||||
else if(item == '-'){
|
||||
if(infilter.indexOf('-') == '-1'){
|
||||
infilter.push(item)
|
||||
}
|
||||
@@ -287,68 +329,50 @@ const inputFilter = (inputData) => {
|
||||
return infilter.join('')
|
||||
}
|
||||
|
||||
const stuck = (dataObj,dataItem,Status,Check,ErrMsg,throwMsg) => {
|
||||
dataObj[dataItem + 'Status'] = Status
|
||||
dataObj[dataItem + 'Check'] = Check
|
||||
dataObj[dataItem + 'ErrMsg'] = ErrMsg
|
||||
if(throwMsg){
|
||||
message.error(ErrMsg)
|
||||
throw new Error(ErrMsg)
|
||||
}
|
||||
}
|
||||
|
||||
const judgment = (dataObj,dataItem,ErrMsg,throwMsg) => {
|
||||
let toJudgment
|
||||
if(dataItem == 'lat'){
|
||||
toJudgment = Number(dataObj[dataItem]).toFixed(8) > 180 || Number(dataObj[dataItem]).toFixed(8) < -180
|
||||
}
|
||||
else if(dataItem == "lng"){
|
||||
toJudgment = Number(dataObj[dataItem]).toFixed(8) > 90 || Number(dataObj[dataItem]).toFixed(8) < -90
|
||||
}
|
||||
if(dataObj[dataItem] == ''){
|
||||
stuck(dataObj,dataItem,'error',true,ErrMsg+'不能为空',throwMsg)
|
||||
}
|
||||
else if(dataObj[dataItem].indexOf('-') !== -1 && dataObj[dataItem].indexOf('-') !== 0 || dataObj[dataItem].indexOf('.') == dataObj[dataItem].length-1 || dataObj[dataItem].indexOf('-')+1 == dataObj[dataItem].indexOf('.')){
|
||||
stuck(dataObj,dataItem,'error',true,ErrMsg+'数据格式错误',throwMsg)
|
||||
}
|
||||
else if(toJudgment){
|
||||
stuck(dataObj,dataItem,'error',true,'非法的'+ErrMsg+'数据',throwMsg)
|
||||
}
|
||||
else{
|
||||
stuck(dataObj,dataItem,'success',false,'',false)
|
||||
if(throwMsg){
|
||||
dataObj[dataItem] = Number(dataObj[dataItem]).toString()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleInput = () => {
|
||||
geodata.value.forEach((element,index) => {
|
||||
element.lat = inputFilter(element.lat)
|
||||
element.lng = inputFilter(element.lng)
|
||||
if(element.lat == ''){
|
||||
element.latStatus = 'error'
|
||||
element.latCheck = true
|
||||
}
|
||||
else{
|
||||
element.latStatus = 'success'
|
||||
element.latCheck = false
|
||||
}
|
||||
if(element.lng == ''){
|
||||
element.lngStatus = 'error'
|
||||
element.lngCheck = true
|
||||
}
|
||||
else {
|
||||
element.lngStatus = 'success'
|
||||
element.lngCheck = false
|
||||
}
|
||||
judgment(element,'lat','经度',false)
|
||||
judgment(element,'lng','纬度',false)
|
||||
})
|
||||
}
|
||||
|
||||
const inputCheck = (inputValue) => {
|
||||
if(inputValue.lat == ''){
|
||||
message.error('经度不能为空')
|
||||
inputValue.latStatus = 'error'
|
||||
inputValue.latCheck = true
|
||||
throw new Error("经度不能为空")
|
||||
}
|
||||
if(inputValue.lng == ''){
|
||||
message.error('纬度不能为空')
|
||||
inputValue.lngStatus = 'error'
|
||||
inputValue.lngCheck = true
|
||||
throw new Error("纬度不能为空")
|
||||
}
|
||||
if(inputValue.lat.indexOf('-') !== -1 && inputValue.lat.indexOf('-') !== 0 || inputValue.lat.indexOf('.') == inputValue.lat.length-1 || inputValue.lat.indexOf('-')+1 == inputValue.lat.indexOf('.')){
|
||||
message.error('数据格式错误')
|
||||
inputValue.latStatus = 'error'
|
||||
inputValue.latCheck = true
|
||||
throw new Error("数据格式错误")
|
||||
}
|
||||
if(inputValue.lng.indexOf('-') !== -1 && inputValue.lng.indexOf('-') !== 0 || inputValue.lng.indexOf('.') == inputValue.lng.length-1 || inputValue.lng.indexOf('-')+1 == inputValue.lng.indexOf('.')){
|
||||
message.error('数据格式错误')
|
||||
inputValue.lngStatus = 'error'
|
||||
inputValue.lngCheck = true
|
||||
throw new Error("数据格式错误")
|
||||
}
|
||||
if(Number(inputValue.lat).toFixed(8) > 180 || Number(inputValue.lat).toFixed(8) < -180){
|
||||
message.error('非法的经度数据')
|
||||
inputValue.latStatus = 'error'
|
||||
inputValue.latCheck = true
|
||||
throw new Error("非法的经度数据")
|
||||
}
|
||||
if(Number(inputValue.lng).toFixed(8) > 90 || Number(inputValue.lng).toFixed(8) < -90){
|
||||
message.error('非法的纬度数据')
|
||||
inputValue.lngStatus = 'error'
|
||||
inputValue.lngCheck = true
|
||||
throw new Error("非法的纬度数据")
|
||||
}
|
||||
}
|
||||
|
||||
//地球赤道半径 6378.137
|
||||
//地球平均半径 6371.004
|
||||
//弧度转角度 Math.PI / 180.0
|
||||
@@ -395,8 +419,8 @@ const diffData = (areaResult) => {
|
||||
})
|
||||
if(allowCalaulation){
|
||||
data.value.push(areaResult)
|
||||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]])
|
||||
rerender('updataGeo',data.value[data.value.length-1].area,data.value[data.value.length-1].latandlng)
|
||||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]],true)
|
||||
rerender('updataGeo',data.value[data.value.length-1].area,data.value[data.value.length-1].latandlng,false)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -407,8 +431,9 @@ const calculation = () => {
|
||||
}
|
||||
let pointArr = []
|
||||
geodata.value.forEach((element,index) => {
|
||||
inputCheck(element)
|
||||
pointArr.push([element.lat.length>8?Number(element.lat).toFixed(8):element.lat, element.lng.length>8?Number(element.lng).toFixed(8):element.lng])
|
||||
judgment(element,'lat','经度',true)
|
||||
judgment(element,'lng','纬度',true)
|
||||
pointArr.push([element.lat.length>8?Number(element.lat).toFixed(8):Number(element.lat), element.lng.length>8?Number(element.lng).toFixed(8):Number(element.lng)])
|
||||
})
|
||||
let areaData = {
|
||||
latandlng: pointArr,
|
||||
@@ -434,7 +459,7 @@ const delgeo = () => {
|
||||
lngCheck: ""
|
||||
}
|
||||
]
|
||||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]])
|
||||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]],true)
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
message.error('已返回')
|
||||
@@ -443,17 +468,16 @@ const delgeo = () => {
|
||||
}
|
||||
|
||||
const drawContour = (row) => {
|
||||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]])
|
||||
rerender('updataGeo',row.area,row.latandlng)
|
||||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]],true)
|
||||
rerender('updataGeo',row.area,row.latandlng,false)
|
||||
}
|
||||
|
||||
const deldata = (row) => {
|
||||
data.value.filter((item,index,array)=>{
|
||||
if(item == row){
|
||||
array.splice(index,1)
|
||||
console.log(data.value.length)
|
||||
if(data.value.length == 0){
|
||||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]])
|
||||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]],true)
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -467,7 +491,7 @@ const delall = () => {
|
||||
negativeText: '返回',
|
||||
onPositiveClick: () => {
|
||||
data.value = []
|
||||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]])
|
||||
rerender('nowin','经纬度数据',[[15,30],[0,0],[15,10],[30,0]],true)
|
||||
},
|
||||
onNegativeClick: () => {
|
||||
message.error('已返回')
|
||||
|
||||
Reference in New Issue
Block a user