学习机3.4.0版本

This commit is contained in:
2023-11-29 16:08:12 +08:00
parent 770ca0df44
commit 4e86989fcd
3688 changed files with 3708 additions and 1839 deletions

View File

@@ -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('已返回')