|
@@ -8,17 +8,34 @@
|
|
|
<span>返回</span>
|
|
|
</div>
|
|
|
<div class="search">
|
|
|
- <el-input
|
|
|
- class="v-input"
|
|
|
- v-model="input"
|
|
|
+ <el-select
|
|
|
+ v-model="locationVal"
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ effect="dark"
|
|
|
+ reserve-keyword
|
|
|
placeholder="搜索地区"
|
|
|
- clearable
|
|
|
+ :remote-method="remoteMethod"
|
|
|
+ :loading="loading"
|
|
|
+ @change="handleSearchRes"
|
|
|
+ class="v-select"
|
|
|
>
|
|
|
<template #prefix>
|
|
|
<el-icon class="el-input__icon"><search /></el-icon>
|
|
|
</template>
|
|
|
- </el-input>
|
|
|
- <div class="upload btn">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in locationOptions.list"
|
|
|
+ :key="index"
|
|
|
+ :label="item.title"
|
|
|
+ :value="item.point"
|
|
|
+ >
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <span class="sub-title"
|
|
|
+ >{{ item.province }}{{ item.city }}{{ item.district }}</span
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="upload btn" @click="handleExport">
|
|
|
<img class="icon" src="@/assets/images/common/back-icon.png" alt="" />
|
|
|
<span>导出</span>
|
|
|
</div>
|
|
@@ -30,7 +47,7 @@
|
|
|
<div ref="mapRef" class="map"></div>
|
|
|
</div>
|
|
|
<div class="tool-group">
|
|
|
- <div class="btn">
|
|
|
+ <!-- <div class="btn">
|
|
|
<img
|
|
|
class="icon"
|
|
|
src="@/assets/images/common/back-black-icon.png"
|
|
@@ -41,20 +58,26 @@
|
|
|
<div class="btn">
|
|
|
<el-icon size="15"><CloseBold /></el-icon>
|
|
|
<span>删除点</span>
|
|
|
- </div>
|
|
|
- <div class="btn delete" @click="handleDelete">
|
|
|
+ </div> -->
|
|
|
+ <div class="btn delete" @click="handleDelete" v-show="isEdit">
|
|
|
<el-icon size="15" color="#fff"><CloseBold /></el-icon>
|
|
|
<span>删除地块</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="edit-popup" v-show="isEdit">
|
|
|
<div class="edit-title">
|
|
|
- <img src="@/assets/images/common/chart-icon.png" alt="" />
|
|
|
- <span>地块属性</span>
|
|
|
+ <div class="name">
|
|
|
+ <img src="@/assets/images/common/chart-icon.png" alt="" />
|
|
|
+ <span>地块属性</span>
|
|
|
+ </div>
|
|
|
+ <div v-show="disabledForm" class="edit" @click="handleEdit">
|
|
|
+ 编辑
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="edit-cont">
|
|
|
<el-form
|
|
|
:inline="true"
|
|
|
+ :disabled="disabledForm"
|
|
|
:model="formInline"
|
|
|
label-position="top"
|
|
|
class="form-inline"
|
|
@@ -74,14 +97,10 @@
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="创建时间">
|
|
|
- <el-input
|
|
|
- v-model="formInline.createDate"
|
|
|
- placeholder=""
|
|
|
- clearable
|
|
|
- />
|
|
|
+ <el-input v-model="formInline.createDate" clearable disabled />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="农场面积">
|
|
|
- <el-input v-model="formInline.area" placeholder="" clearable />
|
|
|
+ <el-input v-model="formInline.area" disabled clearable />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="作物物种">
|
|
|
<el-input
|
|
@@ -129,6 +148,53 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 导出弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ width="82%"
|
|
|
+ center
|
|
|
+ :show-close="false"
|
|
|
+ modal-class="dialog-dark"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-table :data="gridData" border max-height="600" class="table-dark">
|
|
|
+ <el-table-column
|
|
|
+ property="farmName"
|
|
|
+ label="农场名称"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ property="address"
|
|
|
+ label="农场地址"
|
|
|
+ width="230"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column property="createDate" label="创建时间" width="170" />
|
|
|
+ <el-table-column property="mu" label="农场面积">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ scope.row.mu.toFixed(2) }}亩</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="speciesTypeName" label="作物物种" />
|
|
|
+ <el-table-column property="masterName" label="客户姓名" />
|
|
|
+ <el-table-column property="masterTel" label="联系电话" />
|
|
|
+ <el-table-column
|
|
|
+ property="points"
|
|
|
+ label="边界点经纬度"
|
|
|
+ width="480"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button class="btn" @click="dialogVisible = false">取消</el-button>
|
|
|
+ <el-button class="btn" type="primary" @click="handleDowload">
|
|
|
+ 下载
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
@@ -138,6 +204,8 @@ import AuthenticMap from "./authenticMap";
|
|
|
import { mapData } from "./authenticMap";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
+import { dateFormat } from "@/utils/date_util";
|
|
|
+import { exportExcel } from "@/utils/index";
|
|
|
const router = useRouter();
|
|
|
|
|
|
let authenticMap = new AuthenticMap();
|
|
@@ -150,29 +218,81 @@ onMounted(() => {
|
|
|
|
|
|
// 获取地块列表
|
|
|
const plotList = ref([]);
|
|
|
-const getList = (isInitMap = false) => {
|
|
|
+const getList = (isInitMap = false,a=false) => {
|
|
|
VE_API.authentic.getList().then(({ code, data }) => {
|
|
|
if (code !== 0) return authenticMap.initMap(location.value, mapRef.value);
|
|
|
plotList.value = data || [];
|
|
|
if (isInitMap) {
|
|
|
authenticMap.initMap(data[0].point, mapRef.value);
|
|
|
- // const geom = [];
|
|
|
- // data.forEach((item) => {
|
|
|
- // geom.push({ featureWkt: item.geom });
|
|
|
- // });
|
|
|
- // authenticMap.setAreaGeometry(geom);
|
|
|
+ const geom = [];
|
|
|
+ data.forEach((item) => {
|
|
|
+ geom.push({ featureWkt: item.geom });
|
|
|
+ });
|
|
|
+ authenticMap.setAreaGeometry(geom);
|
|
|
}
|
|
|
+ if(a){
|
|
|
const geom = [];
|
|
|
+ console.log('data',data);
|
|
|
data.forEach((item) => {
|
|
|
geom.push({ featureWkt: item.geom });
|
|
|
});
|
|
|
- authenticMap.setAreaGeometry(geom);
|
|
|
+ authenticMap.setAreaGeometry(geom);
|
|
|
+ authenticMap.c()
|
|
|
+ }
|
|
|
+ // const geom = [];
|
|
|
+ // data.forEach((item) => {
|
|
|
+ // geom.push({ featureWkt: item.geom });
|
|
|
+ // });
|
|
|
+ // authenticMap.setAreaGeometry(geom);
|
|
|
// authenticMap.c()
|
|
|
authenticMap.addPoint(data);
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-const input = ref("");
|
|
|
+// 搜索
|
|
|
+const locationVal = ref("");
|
|
|
+const loading = ref(false);
|
|
|
+const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
|
|
|
+
|
|
|
+const handleSearchRes = (v) => {
|
|
|
+ authenticMap.setMapCenter(v);
|
|
|
+};
|
|
|
+
|
|
|
+const locationOptions = reactive({
|
|
|
+ list: [],
|
|
|
+});
|
|
|
+const remoteMethod = async (keyword) => {
|
|
|
+ if (keyword) {
|
|
|
+ locationOptions.list = [];
|
|
|
+ loading.value = true;
|
|
|
+ const params = {
|
|
|
+ key: MAP_KEY,
|
|
|
+ keyword,
|
|
|
+ // location: store.getters.userLocation,
|
|
|
+ location: "22.574540836684672,113.1093017627431",
|
|
|
+ };
|
|
|
+ await VE_API.old_mini_map
|
|
|
+ .getCtiyList({ word: keyword })
|
|
|
+ .then(({ data }) => {
|
|
|
+ if (data && data.length) {
|
|
|
+ data.forEach((item) => {
|
|
|
+ item.point = item.location.lat + "," + item.location.lng;
|
|
|
+ locationOptions.list.push(item);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ VE_API.old_mini_map.search(params).then(({ data }) => {
|
|
|
+ loading.value = false;
|
|
|
+ data.forEach((item) => {
|
|
|
+ item.point = item.location.lat + "," + item.location.lng;
|
|
|
+ locationOptions.list.push(item);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ locationOptions.list = [];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
const initForm = {
|
|
|
address: "",
|
|
|
farmName: "",
|
|
@@ -186,17 +306,25 @@ const initForm = {
|
|
|
const formInline = reactive({
|
|
|
...initForm,
|
|
|
});
|
|
|
+const disabledForm = ref(false);
|
|
|
|
|
|
const isEdit = ref(false);
|
|
|
|
|
|
+// 编辑
|
|
|
+const handleEdit = () => {
|
|
|
+ disabledForm.value = false;
|
|
|
+};
|
|
|
+
|
|
|
// 取消
|
|
|
const onCancel = () => {
|
|
|
isEdit.value = false;
|
|
|
- authenticMap.a();
|
|
|
-// authenticMap.b();
|
|
|
- if (!mapData.curPointData.id) return;
|
|
|
+ authenticMap.startDraw();
|
|
|
+ // authenticMap.b();
|
|
|
+// console.log('mapData.curPointData.id',mapData.curPointData.id);
|
|
|
+// if (!mapData.curPointData.id || mapData.selectPointArr.length) return;
|
|
|
authenticMap.setPoint("point");
|
|
|
};
|
|
|
+
|
|
|
// 保存
|
|
|
const onSubmit = () => {
|
|
|
VE_API.authentic.saveData(formInline).then((res) => {
|
|
@@ -204,11 +332,14 @@ const onSubmit = () => {
|
|
|
onCancel();
|
|
|
} else {
|
|
|
isEdit.value = false;
|
|
|
+ authenticMap.startDraw();
|
|
|
}
|
|
|
+ // authenticMap.b()
|
|
|
getList();
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+// 返回
|
|
|
const goBack = () => {
|
|
|
router.go(-1);
|
|
|
};
|
|
@@ -217,23 +348,9 @@ function updateFormInline(newData) {
|
|
|
Object.assign(formInline, newData);
|
|
|
}
|
|
|
|
|
|
-function formatDate(isoString) {
|
|
|
- const date = new Date(isoString);
|
|
|
- // 获取年、月、日、小时、分钟和秒
|
|
|
- const year = date.getFullYear();
|
|
|
- const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始,需要加1,并且用0填充
|
|
|
- const day = String(date.getDate()).padStart(2, "0");
|
|
|
- const hours = String(date.getHours()).padStart(2, "0");
|
|
|
- const minutes = String(date.getMinutes()).padStart(2, "0");
|
|
|
- const seconds = String(date.getSeconds()).padStart(2, "0");
|
|
|
-
|
|
|
- // 格式化日期为 YYYY-MM-DD hh:mm:ss
|
|
|
- const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
- return formattedDate;
|
|
|
-}
|
|
|
-
|
|
|
const handleDelete = () => {
|
|
|
if (!mapData.curPointData.id) return ElMessage("请选择地块");
|
|
|
+ const id = mapData.selectPointArr.map((item) => item.values_.id);
|
|
|
ElMessageBox.confirm("您确定删除该地块吗?", "提示", {
|
|
|
confirmButtonText: "确认",
|
|
|
cancelButtonText: "取消",
|
|
@@ -241,29 +358,102 @@ const handleDelete = () => {
|
|
|
})
|
|
|
.then(() => {
|
|
|
VE_API.authentic
|
|
|
- .deleteData({ id: mapData.curPointData.id })
|
|
|
+ .deleteData({ id:id[0] })
|
|
|
.then((res) => {
|
|
|
authenticMap.b();
|
|
|
-
|
|
|
- onCancel();
|
|
|
- getList();
|
|
|
+ onCancel();
|
|
|
+ getList(false,true);
|
|
|
});
|
|
|
})
|
|
|
- .catch(() => {
|
|
|
+ .catch(() => {});
|
|
|
+};
|
|
|
+
|
|
|
+// 导出
|
|
|
+const gridData = ref([]);
|
|
|
+const dialogVisible = ref(false);
|
|
|
+const handleExport = () => {
|
|
|
+ if (mapData.selectPointArr.length < 1) return ElMessage("请选择地块");
|
|
|
+ const ids = mapData.selectPointArr.map((item) => item.values_.id);
|
|
|
+ VE_API.authentic.exportData(ids).then(({ data }) => {
|
|
|
+ gridData.value = data.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ createDate: dateFormat(
|
|
|
+ new Date(item.createDate),
|
|
|
+ "YYYY-mm-dd HH:MM:SS"
|
|
|
+ ),
|
|
|
+ };
|
|
|
});
|
|
|
+ dialogVisible.value = true;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 下载
|
|
|
+const handleDowload = () => {
|
|
|
+ const fieldLabels = [
|
|
|
+ "农场名称",
|
|
|
+ "农场地址",
|
|
|
+ "创建时间",
|
|
|
+ "农场面积",
|
|
|
+ "作物物种",
|
|
|
+ "客户姓名",
|
|
|
+ "联系电话",
|
|
|
+ "边界点经纬度",
|
|
|
+ ];
|
|
|
+ const fieldKeys = [
|
|
|
+ "farmName",
|
|
|
+ "address",
|
|
|
+ "createDate",
|
|
|
+ "mu",
|
|
|
+ "speciesTypeName",
|
|
|
+ "masterName",
|
|
|
+ "masterTel",
|
|
|
+ "points",
|
|
|
+ ];
|
|
|
+ const fileName = "农场数据" + dateFormat(new Date(), "YYYY-mm-dd");
|
|
|
+ exportExcel(gridData.value, fieldLabels, fieldKeys, fileName);
|
|
|
};
|
|
|
|
|
|
const pointList = ref([]);
|
|
|
+
|
|
|
+// 获取编辑回显数据
|
|
|
+const getDetailsData = (id) => {
|
|
|
+ VE_API.authentic.getDetails({ id }).then(({ data }) => {
|
|
|
+ isEdit.value = true;
|
|
|
+ disabledForm.value = true;
|
|
|
+
|
|
|
+ data.createDate = dateFormat(
|
|
|
+ new Date(data.createDate),
|
|
|
+ "YYYY-mm-dd HH:MM:SS"
|
|
|
+ );
|
|
|
+ updateFormInline({ ...data });
|
|
|
+ const { area } = authenticMap.getAreaGeometry();
|
|
|
+ formInline.area = area + "亩";
|
|
|
+
|
|
|
+ // 经纬度列表
|
|
|
+ const arr = JSON.parse(data.points);
|
|
|
+ pointList.value = arr.map((item) => {
|
|
|
+ return {
|
|
|
+ lat: item[1].toString().slice(0, 6),
|
|
|
+ lnt: item[0].toString().slice(0, 7),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ authenticMap.endEdit();
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
watchEffect(() => {
|
|
|
- updateFormInline({...initForm});
|
|
|
+ updateFormInline({ ...initForm });
|
|
|
pointList.value = [];
|
|
|
- if (mapData.isEdit) {
|
|
|
+ isEdit.value = false;
|
|
|
+ if (mapData.isEdit && mapData.selectPointArr.length < 2) {
|
|
|
isEdit.value = true;
|
|
|
+ disabledForm.value = false;
|
|
|
const { geometryArr, area } = authenticMap.getAreaGeometry();
|
|
|
const lastItem = geometryArr[geometryArr.length - 1];
|
|
|
formInline.geom = lastItem.featureWkt;
|
|
|
formInline.area = area + "亩";
|
|
|
- formInline.createDate = formatDate(new Date());
|
|
|
+ formInline.createDate = dateFormat(new Date(), "YYYY-mm-dd HH:MM:SS");
|
|
|
authenticMap.endEdit();
|
|
|
}
|
|
|
|
|
@@ -273,31 +463,13 @@ watchEffect(() => {
|
|
|
formInline.area = area + "亩";
|
|
|
}
|
|
|
|
|
|
- if (mapData.curPointData.id && !mapData.isEdit) {
|
|
|
- if (mapData.curPointData.icon === "point-act") {
|
|
|
- VE_API.authentic
|
|
|
- .getDetails({ id: mapData.curPointData.id })
|
|
|
- .then(({ data }) => {
|
|
|
- isEdit.value = true;
|
|
|
-
|
|
|
- data.createDate = formatDate(data.createDate);
|
|
|
- updateFormInline({ ...data });
|
|
|
- const { area } = authenticMap.getAreaGeometry();
|
|
|
- formInline.area = area + "亩";
|
|
|
-
|
|
|
- // 经纬度列表
|
|
|
- const arr = JSON.parse(data.points);
|
|
|
- pointList.value = arr.map((item) => {
|
|
|
- return {
|
|
|
- lat: item[1].toString().slice(0, 6),
|
|
|
- lnt: item[0].toString().slice(0, 7),
|
|
|
- };
|
|
|
- });
|
|
|
- authenticMap.endEdit();
|
|
|
- });
|
|
|
- } else {
|
|
|
- // isEdit.value = false;
|
|
|
- }
|
|
|
+ if (
|
|
|
+ mapData.curPointData.id &&
|
|
|
+ !mapData.isEdit &&
|
|
|
+ mapData.selectPointArr.length === 1
|
|
|
+ ) {
|
|
|
+ const id = mapData.selectPointArr.map((item) => item.values_.id);
|
|
|
+ getDetailsData(id[0]);
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
@@ -332,6 +504,7 @@ watchEffect(() => {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.top {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
@@ -347,13 +520,16 @@ watchEffect(() => {
|
|
|
}
|
|
|
.search {
|
|
|
display: flex;
|
|
|
- .v-input {
|
|
|
+ .v-select {
|
|
|
width: 300px;
|
|
|
::v-deep {
|
|
|
- .el-input__wrapper {
|
|
|
+ .el-select__wrapper {
|
|
|
background: #101010;
|
|
|
box-shadow: none;
|
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
|
+ .el-select__input {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -414,16 +590,29 @@ watchEffect(() => {
|
|
|
border-radius: 8px;
|
|
|
background: #232323;
|
|
|
.edit-title {
|
|
|
- padding: 12px 10px;
|
|
|
+ padding: 0 10px;
|
|
|
background: rgba(68, 68, 68, 0.4);
|
|
|
border-bottom: 1px solid rgba(68, 68, 68, 0.4);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+ padding: 12px 0px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
span {
|
|
|
margin-left: 8px;
|
|
|
font-size: 18px;
|
|
|
font-family: "SOURCEHANTIFINE";
|
|
|
}
|
|
|
+ .edit {
|
|
|
+ color: #2199f8;
|
|
|
+ padding: 6px 20px;
|
|
|
+ border: 1px solid #2199f8;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
.edit-cont {
|
|
|
padding: 16px;
|
|
@@ -505,4 +694,10 @@ watchEffect(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.dialog-footer {
|
|
|
+ .btn {
|
|
|
+ width: 200px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|