|
|
|
|
@ -3,20 +3,103 @@
|
|
|
|
|
import LeftDrawer from "@/components/LeftDrawer/index.vue";
|
|
|
|
|
import TitleDivider from "@/components/titleDivider/index.vue";
|
|
|
|
|
import {deepClone} from "@/utils/index.js";
|
|
|
|
|
import useSettingsStore from "@/store/modules/settings.js";
|
|
|
|
|
import {isArray} from "@/utils/validate.js";
|
|
|
|
|
import {ElMessage} from "element-plus";
|
|
|
|
|
import {areaConversion} from "@/utils/ruoyi.js";
|
|
|
|
|
import * as turf from "@turf/turf";
|
|
|
|
|
|
|
|
|
|
const uploadJsonData = ref([])
|
|
|
|
|
const props = defineProps({})
|
|
|
|
|
const settingsStore = useSettingsStore()
|
|
|
|
|
const theme = computed(() => settingsStore.theme)
|
|
|
|
|
const selectOptions = reactive({
|
|
|
|
|
// 地块性质
|
|
|
|
|
massifType: [
|
|
|
|
|
{label: '旱地', value: 1},
|
|
|
|
|
{label: '水浇地', value: 2},
|
|
|
|
|
{label: '水田', value: 2},
|
|
|
|
|
],
|
|
|
|
|
// 作物种类
|
|
|
|
|
cropClass: [
|
|
|
|
|
{label: '甘蔗', value: 1},
|
|
|
|
|
{label: '其他', value: 9},
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
const showDrawer = ref(false)
|
|
|
|
|
const formData = ref({})
|
|
|
|
|
const resetForm = (params) => {
|
|
|
|
|
formData.value = {
|
|
|
|
|
// 坐标集合
|
|
|
|
|
coordinateList: [
|
|
|
|
|
{},
|
|
|
|
|
{},
|
|
|
|
|
{},
|
|
|
|
|
{},
|
|
|
|
|
],
|
|
|
|
|
// 坐标上传方式
|
|
|
|
|
coordinateType: 1,
|
|
|
|
|
...params
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const toAdd = (params = {}) => {
|
|
|
|
|
formData.value = deepClone(params)
|
|
|
|
|
resetForm(deepClone(params))
|
|
|
|
|
uploadJsonData.value = []
|
|
|
|
|
showDrawer.value = true
|
|
|
|
|
}
|
|
|
|
|
// 计算地块面积(亩)
|
|
|
|
|
const calculateArea = () => {
|
|
|
|
|
let value = [];
|
|
|
|
|
if (formData.value.coordinateType === 1) {
|
|
|
|
|
value = formData.value.coordinateList || [];
|
|
|
|
|
for (let item of value) {
|
|
|
|
|
if (!item.longitude || !item.latitude){
|
|
|
|
|
ElMessage.error('请确认坐标是否完整')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
value = uploadJsonData.value || [];
|
|
|
|
|
}
|
|
|
|
|
let list = value.map(item => [item.longitude, item.latitude])
|
|
|
|
|
let turfData = [[...list, list[0]]]
|
|
|
|
|
// 算出平米
|
|
|
|
|
let number = turf.area(turf.polygon(turfData));
|
|
|
|
|
formData.value.area = parseFloat(areaConversion(number).toFixed(2))
|
|
|
|
|
}
|
|
|
|
|
// 添加坐标点
|
|
|
|
|
const addCoordinate = () => {
|
|
|
|
|
formData.value.coordinateList.push({})
|
|
|
|
|
}
|
|
|
|
|
const uploadJson = (file) => {
|
|
|
|
|
var reader = new FileReader() //新建一个FileReader
|
|
|
|
|
reader.readAsText(file.raw, 'UTF-8') //读取文件
|
|
|
|
|
reader.onload = async function (evt) { //读取文件完毕执行此函数
|
|
|
|
|
try {
|
|
|
|
|
let jsonData = JSON.parse(evt.target.result)
|
|
|
|
|
if (!isArray(jsonData.FMapRegion)) {
|
|
|
|
|
throw new Error('json文件格式不正确')
|
|
|
|
|
}
|
|
|
|
|
uploadJsonData.value = jsonData.FMapRegion.map(item => {
|
|
|
|
|
return {
|
|
|
|
|
longitude: item.x,
|
|
|
|
|
latitude: item.y
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
calculateArea(uploadJsonData.value)
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e)
|
|
|
|
|
ElMessage.error('json文件格式不正确')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
defineExpose({
|
|
|
|
|
toAdd
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<left-drawer v-model="showDrawer" width="40%">
|
|
|
|
|
<div class="title">
|
|
|
|
|
新增地块
|
|
|
|
|
@ -24,54 +107,139 @@ defineExpose({
|
|
|
|
|
<div class="form">
|
|
|
|
|
<el-form v-model="formData" label-position="top">
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<el-col :span="24"><title-divider title="基本信息"/></el-col>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<title-divider title="基本信息"/>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-form-item label="地块名称" prop="name">
|
|
|
|
|
<el-input></el-input>
|
|
|
|
|
<el-input placeholder="请输入地块名称"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-tooltip
|
|
|
|
|
content="点击[亩]字可以自动计算坐标点面积"
|
|
|
|
|
placement="top"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item label="地块面积" prop="name">
|
|
|
|
|
<el-input></el-input>
|
|
|
|
|
<el-input v-model="formData.area">
|
|
|
|
|
<template #append><el-button @click="calculateArea">亩</el-button></template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-form-item label="所属基地/资源圃" prop="name">
|
|
|
|
|
<el-input></el-input>
|
|
|
|
|
<el-input disabled></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-form-item label="地块性质" prop="name">
|
|
|
|
|
<el-input></el-input>
|
|
|
|
|
<el-select placeholder="请选择地块性质" clearable>
|
|
|
|
|
<el-option v-for="item in selectOptions.massifType" :key="item.value" :label="item.label"
|
|
|
|
|
:value="item.value"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-form-item label="当前作物" prop="name">
|
|
|
|
|
<el-input></el-input>
|
|
|
|
|
<el-select placeholder="请选择当前作物" clearable multiple>
|
|
|
|
|
<el-option v-for="item in selectOptions.cropClass" :key="item.value" :label="item.label"
|
|
|
|
|
:value="item.value"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-form-item label="当前状态" prop="name">
|
|
|
|
|
<el-input></el-input>
|
|
|
|
|
<el-switch></el-switch>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-form-item label="备注" prop="name">
|
|
|
|
|
<el-input></el-input>
|
|
|
|
|
<el-input placeholder="请输入备注"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<title-divider title="坐标信息" style="margin-top: 10px"/>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="16">
|
|
|
|
|
坐标上传方式
|
|
|
|
|
<el-radio-group v-model="formData.coordinateType" style="margin-left: 10px">
|
|
|
|
|
<el-radio :value="1">手动录入</el-radio>
|
|
|
|
|
<el-radio :value="2">文件上传</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-button @click="addCoordinate" v-if="formData.coordinateType === 1" type="primary" plain
|
|
|
|
|
icon="Plus" size="small">
|
|
|
|
|
添加坐标点
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-upload
|
|
|
|
|
action="#"
|
|
|
|
|
:on-change="uploadJson"
|
|
|
|
|
:auto-upload="false"
|
|
|
|
|
:show-file-list="false"
|
|
|
|
|
accept=".json"
|
|
|
|
|
>
|
|
|
|
|
<el-button v-if="formData.coordinateType === 2" type="primary" plain
|
|
|
|
|
icon="UploadFilled" size="small">
|
|
|
|
|
{{ uploadJsonData.length > 0 ? '重新' : '' }}上传文件(json)
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col v-if="formData.coordinateType === 1" :span="24" v-for="(item,index) in formData.coordinateList"
|
|
|
|
|
:key="index" style="margin-top: 10px">
|
|
|
|
|
<el-row :gutter="10">
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item :label="`坐标${index+1}经度`" prop="name">
|
|
|
|
|
<el-input v-model="item.longitude" placeholder="请输入坐标经度"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="24"><title-divider title="坐标信息" style="margin-top: 20px"/></el-col>
|
|
|
|
|
<el-col :span="10">
|
|
|
|
|
<el-form-item prop="name" :label="`坐标${index+1}纬度`">
|
|
|
|
|
<el-input v-model="item.latitude" placeholder="请输入坐标纬度"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="4" class="delete-icon">
|
|
|
|
|
<el-icon v-if="index > 2" :color="theme" size="22" @click="formData.coordinateList.splice(index,1)">
|
|
|
|
|
<Delete/>
|
|
|
|
|
</el-icon>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="24" v-if="formData.coordinateType === 2">
|
|
|
|
|
<el-table :data="uploadJsonData" border style="margin-top: 10px">
|
|
|
|
|
<el-table-column prop="name" label="坐标序号" width="100" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
{{ scope.$index + 1 }}
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="longitude" label="经度" align="center"/>
|
|
|
|
|
<el-table-column prop="latitude" label="纬度" align="center"/>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</left-drawer>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.title{
|
|
|
|
|
.title {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
color: #333333;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.delete-icon {
|
|
|
|
|
margin-top: 34px;
|
|
|
|
|
//鼠标悬浮变成点击
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
