|
@@ -2,7 +2,7 @@
|
|
|
<custom-header name="农场信息" bgColor="#f2f3f5"></custom-header>
|
|
<custom-header name="农场信息" bgColor="#f2f3f5"></custom-header>
|
|
|
<div class="farm-details-page">
|
|
<div class="farm-details-page">
|
|
|
<div class="farm-info">
|
|
<div class="farm-info">
|
|
|
- <div class="map"></div>
|
|
|
|
|
|
|
+ <div class="map-area" ref="mapContainer"></div>
|
|
|
<div class="info-box">
|
|
<div class="info-box">
|
|
|
<div class="section-header">
|
|
<div class="section-header">
|
|
|
<div class="line-title">基本信息</div>
|
|
<div class="line-title">基本信息</div>
|
|
@@ -11,27 +11,27 @@
|
|
|
<div class="info-list">
|
|
<div class="info-list">
|
|
|
<div class="info-row">
|
|
<div class="info-row">
|
|
|
<span class="info-label">农场名称:</span>
|
|
<span class="info-label">农场名称:</span>
|
|
|
- <span class="info-value">{{ farmInfo.name }}</span>
|
|
|
|
|
|
|
+ <span class="info-value">{{ farmInfo.subjectName }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="info-row">
|
|
<div class="info-row">
|
|
|
<span class="info-label">联系人:</span>
|
|
<span class="info-label">联系人:</span>
|
|
|
- <span class="info-value">{{ farmInfo.contact }}</span>
|
|
|
|
|
|
|
+ <span class="info-value">{{ farmInfo.contactName }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="info-row">
|
|
<div class="info-row">
|
|
|
<span class="info-label">联系电话:</span>
|
|
<span class="info-label">联系电话:</span>
|
|
|
- <span class="info-value">{{ farmInfo.phone }}</span>
|
|
|
|
|
|
|
+ <span class="info-value">{{ farmInfo.contactPhone }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="info-row">
|
|
<div class="info-row">
|
|
|
<span class="info-label">种植作物:</span>
|
|
<span class="info-label">种植作物:</span>
|
|
|
<div class="info-value crop-tags">
|
|
<div class="info-value crop-tags">
|
|
|
- <span v-for="crop in farmInfo.crops" :key="crop" class="crop-tag">
|
|
|
|
|
- {{ crop }}
|
|
|
|
|
|
|
+ <span v-for="crop in farmInfo.cropList" :key="crop.id" class="crop-tag">
|
|
|
|
|
+ {{ crop.name }}
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="info-row">
|
|
<div class="info-row">
|
|
|
<span class="info-label">农场位置:</span>
|
|
<span class="info-label">农场位置:</span>
|
|
|
- <span class="info-value">{{ farmInfo.location }}</span>
|
|
|
|
|
|
|
+ <span class="info-value">{{ farmInfo.farmAddress }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -39,7 +39,7 @@
|
|
|
<div class="info-box">
|
|
<div class="info-box">
|
|
|
<div class="section-header">
|
|
<div class="section-header">
|
|
|
<div class="line-title">农场设施</div>
|
|
<div class="line-title">农场设施</div>
|
|
|
- <div class="edit-btn" @click="handleEditFarmInfo">点击编辑</div>
|
|
|
|
|
|
|
+ <div class="edit-btn" @click="handleEditFarmFacility">点击编辑</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="info-list">
|
|
<div class="info-list">
|
|
|
<div class="info-row">
|
|
<div class="info-row">
|
|
@@ -49,8 +49,8 @@
|
|
|
<div class="info-row">
|
|
<div class="info-row">
|
|
|
<span class="info-label">灌溉方式:</span>
|
|
<span class="info-label">灌溉方式:</span>
|
|
|
<div class="info-value crop-tags">
|
|
<div class="info-value crop-tags">
|
|
|
- <span v-for="crop in farmInfo.crops" :key="crop" class="crop-tag">
|
|
|
|
|
- {{ crop }}
|
|
|
|
|
|
|
+ <span v-for="crop in farmInfo.cropList" :key="crop.id" class="crop-tag">
|
|
|
|
|
+ {{ crop.name }}
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -58,11 +58,7 @@
|
|
|
<span class="info-label">农机设备:</span>
|
|
<span class="info-label">农机设备:</span>
|
|
|
<div class="info-value">
|
|
<div class="info-value">
|
|
|
<div class="device-box">
|
|
<div class="device-box">
|
|
|
- <div
|
|
|
|
|
- class="device-item"
|
|
|
|
|
- v-for="device in farmDevices"
|
|
|
|
|
- :key="device.id"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <div class="device-item" v-for="device in farmDevices" :key="device.id">
|
|
|
<span class="device-name">{{ device.name }}</span>
|
|
<span class="device-name">{{ device.name }}</span>
|
|
|
<span class="device-count">{{ device.count }}架</span>
|
|
<span class="device-count">{{ device.count }}架</span>
|
|
|
</div>
|
|
</div>
|
|
@@ -72,11 +68,7 @@
|
|
|
<div class="info-row info-row-column">
|
|
<div class="info-row info-row-column">
|
|
|
<span class="info-label">希望改善问题:</span>
|
|
<span class="info-label">希望改善问题:</span>
|
|
|
<div class="info-value problem-tags">
|
|
<div class="info-value problem-tags">
|
|
|
- <span
|
|
|
|
|
- v-for="item in improveProblems"
|
|
|
|
|
- :key="item"
|
|
|
|
|
- class="problem-tag"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <span v-for="item in improveProblems" :key="item" class="problem-tag">
|
|
|
{{ item }}
|
|
{{ item }}
|
|
|
</span>
|
|
</span>
|
|
|
</div>
|
|
</div>
|
|
@@ -88,19 +80,72 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref, onMounted } from "vue";
|
|
|
|
|
|
|
+import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
-import { useRouter } from "vue-router";
|
|
|
|
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
|
|
+import DrawRegionMap from "@/views/old_mini/interactionList/map/drawRegionMap.js";
|
|
|
|
|
+import * as util from "@/common/ol_common.js";
|
|
|
|
|
+import { useStore } from "vuex";
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
-const farmInfo = {
|
|
|
|
|
- name: "从化荔博园",
|
|
|
|
|
- contact: "张扬",
|
|
|
|
|
- phone: "19871533125",
|
|
|
|
|
- crops: ["桂味", "糯米糍", "井岗红糯"],
|
|
|
|
|
- location: "广东省广州市从化区某某街道",
|
|
|
|
|
|
|
+const route = useRoute();
|
|
|
|
|
+const store = useStore();
|
|
|
|
|
+const farmInfo = ref({});
|
|
|
|
|
+const mapContainer = ref(null);
|
|
|
|
|
+const drawRegionMap = new DrawRegionMap();
|
|
|
|
|
+
|
|
|
|
|
+const initMap = () => {
|
|
|
|
|
+ if (!mapContainer.value) return;
|
|
|
|
|
+ if (drawRegionMap.kmap) return;
|
|
|
|
|
+
|
|
|
|
|
+ const info = farmInfo.value || {};
|
|
|
|
|
+
|
|
|
|
|
+ drawRegionMap.initMap(info.farmLocation, mapContainer.value, false, false, false);
|
|
|
|
|
+
|
|
|
|
|
+ // 回显农场区域,多边形 WKT 数组(有就画,没有就不画)
|
|
|
|
|
+ let geometryArr = [];
|
|
|
|
|
+ if (Array.isArray(info.geometryArr) && info.geometryArr.length > 0) {
|
|
|
|
|
+ geometryArr = info.geometryArr;
|
|
|
|
|
+ } else if (Array.isArray(info.areaGeometryArr) && info.areaGeometryArr.length > 0) {
|
|
|
|
|
+ geometryArr = info.areaGeometryArr;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (geometryArr.length) {
|
|
|
|
|
+ // 这里不做自适应缩放,保持以中心点为主,避免点位偏上
|
|
|
|
|
+ drawRegionMap.setAreaGeometry(geometryArr, false, info.areaText || "");
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 在区域中心落一个点位(使用与勾画页相同的图标)
|
|
|
|
|
+ try {
|
|
|
|
|
+ const geom = util.wktCastGeom(info.farmLocation);
|
|
|
|
|
+ if (geom && typeof geom.getFirstCoordinate === "function") {
|
|
|
|
|
+ const coord = geom.getFirstCoordinate();
|
|
|
|
|
+ drawRegionMap.setMapPoint(coord);
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ // 解析失败则忽略点位
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+const destroyMap = () => {
|
|
|
|
|
+ if (drawRegionMap && drawRegionMap.kmap && drawRegionMap.destroyMap) {
|
|
|
|
|
+ drawRegionMap.destroyMap();
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ fetchFarmSubjectDetail();
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+function fetchFarmSubjectDetail() {
|
|
|
|
|
+ VE_API.basic_farm.fetchFarmSubjectDetail({ subjectId: route.query.subjectId }).then(({ data }) => {
|
|
|
|
|
+ farmInfo.value = data || {};
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ destroyMap();
|
|
|
|
|
+ initMap();
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+}
|
|
|
const farmDevices = [
|
|
const farmDevices = [
|
|
|
{ id: 1, name: "植保无人机", count: 10 },
|
|
{ id: 1, name: "植保无人机", count: 10 },
|
|
|
{ id: 2, name: "植保无人机", count: 10 },
|
|
{ id: 2, name: "植保无人机", count: 10 },
|
|
@@ -113,8 +158,36 @@ const farmDevices = [
|
|
|
const improveProblems = ["土壤改良", "树势增强", "品质提升"];
|
|
const improveProblems = ["土壤改良", "树势增强", "品质提升"];
|
|
|
|
|
|
|
|
const handleEditFarmInfo = () => {
|
|
const handleEditFarmInfo = () => {
|
|
|
- console.log("点击编辑基本信息");
|
|
|
|
|
- router.push(`/create_farm?type=edit&farmId=766&from=farm_info`);
|
|
|
|
|
|
|
+ // // 回显地块:存到 polygonData,创建页会优先使用这里的数据
|
|
|
|
|
+ // if (data.geomWkt) {
|
|
|
|
|
+ // const polygonData = {
|
|
|
|
|
+ // geometryArr: [data.geomWkt],
|
|
|
|
|
+ // mianji: data.mianji,
|
|
|
|
|
+ // isConfirmed: true,
|
|
|
|
|
+ // };
|
|
|
|
|
+ // store.commit("home/SET_FARM_POLYGON", polygonData);
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // store.commit("home/SET_FARM_POLYGON", null);
|
|
|
|
|
+ // }
|
|
|
|
|
+
|
|
|
|
|
+ const params = {
|
|
|
|
|
+ ...farmInfo.value,
|
|
|
|
|
+ name: farmInfo.value.subjectName,
|
|
|
|
|
+ fzr: farmInfo.value.contactName,
|
|
|
|
|
+ tel: farmInfo.value.contactPhone,
|
|
|
|
|
+ mianji: farmInfo.value.farmArea,
|
|
|
|
|
+ address: farmInfo.value.farmAddress,
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 回显其他表单字段
|
|
|
|
|
+ store.commit("home/SET_EDIT_FARM_DATA", params);
|
|
|
|
|
+
|
|
|
|
|
+ // 带上 from=details,创建页提交/取消后能正确返回
|
|
|
|
|
+ router.push(`/create_farm?type=edit&farmId=${route.query.subjectId}&from=details`);
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const handleEditFarmFacility = () => {
|
|
|
|
|
+ router.push(`/prescription?subjectId=${route.query.subjectId}`);
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
@@ -147,11 +220,10 @@ const handleEditFarmInfo = () => {
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
padding: 10px;
|
|
padding: 10px;
|
|
|
|
|
|
|
|
- .map {
|
|
|
|
|
|
|
+ .map-area {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 142px;
|
|
height: 142px;
|
|
|
- background: red;
|
|
|
|
|
- border-radius: 5px;
|
|
|
|
|
|
|
+ clip-path: inset(0px round 5px);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.info-box {
|
|
.info-box {
|
|
@@ -204,6 +276,7 @@ const handleEditFarmInfo = () => {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
|
gap: 6px;
|
|
gap: 6px;
|
|
|
|
|
+
|
|
|
.problem-tag {
|
|
.problem-tag {
|
|
|
padding: 2px 8px;
|
|
padding: 2px 8px;
|
|
|
background: rgba(58, 173, 148, 0.1);
|
|
background: rgba(58, 173, 148, 0.1);
|
|
@@ -220,12 +293,14 @@ const handleEditFarmInfo = () => {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
|
|
+
|
|
|
.device-item {
|
|
.device-item {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
padding: 4px 0;
|
|
padding: 4px 0;
|
|
|
gap: 15px;
|
|
gap: 15px;
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
|
color: #1D2129;
|
|
color: #1D2129;
|
|
|
|
|
+
|
|
|
.device-count {
|
|
.device-count {
|
|
|
padding: 2px 8px;
|
|
padding: 2px 8px;
|
|
|
background: #E8F3FF;
|
|
background: #E8F3FF;
|
|
@@ -235,6 +310,7 @@ const handleEditFarmInfo = () => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.info-row-column {
|
|
.info-row-column {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|