fix: 农事详情

src/views/authentic/authenticMap.js

@@ -18,6 +18,8 @@ import GeometryCollection from 'ol/geom/GeometryCollection.js';
 import { ElMessage } from "element-plus";
 import { useStore } from "vuex";
 import {bboxToFeature} from "../../utils/map";
+import TileLayer from 'ol/layer/Tile';
+import XYZ from 'ol/source/XYZ.js';
 import * as turf from "@turf/turf";
 proj4.defs(
   "EPSG:38572",
@@ -117,6 +119,7 @@ class AuthenticMap {
 
     // 存储绘制的地块特征
     // this.drawnFeatures = [];
+    
   }
 
   initMap(location, target) {
@@ -132,10 +135,22 @@ class AuthenticMap {
       6,
       22
     );
-    this.kmap.initDraw((e) => {
+    this.kmap.initDraw(async (e) => {
       if (e.type === "drawend") {
         mapData.isEdit = true;
         mapData.point = e.feature;
+  // 计算平面面积
+  
+  const polygon = e.feature.getGeometry();
+  const coordinates = polygon.getCoordinates()[0];
+  // 获取真实高程数据
+  const planeArea = getArea(polygon);
+  const elevationData = await this.fetchElevationData(coordinates);
+  
+  // 计算斜面面积
+  const slopeArea = this.calculateSlopeArea(coordinates, elevationData);
+
+  console.log('斜面面积: ${slopeArea.toFixed(2)} 平方米',planeArea, slopeArea)
       }
     });
     this.kmap.modifyDraw((e) => {
@@ -163,9 +178,68 @@ class AuthenticMap {
     this.kmap.addLayer(this.locationLayer.layer);
     this.kmap.addLayer(this.selectPointLayer.layer);
     this.addMapSingerClick();
+
+    const demLayer = new TileLayer({
+      source: new XYZ({
+        url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=pk.eyJ1IjoiZ3VvemhlbnNodSIsImEiOiJjbTdyYWVmcmYxNGQ3MmpvaGJyejJiMDZpIn0.NQ-ey98NqQH1zmpe9ky9XQ',
+        crossOrigin: 'anonymous'
+      })
+    });
+    this.kmap.addLayer(demLayer);
   }
 
 
+// **获取高程数据**
+async fetchElevationData(coordinates) {
+  const MAPBOX_TOKEN = 'pk.eyJ1IjoiZ3VvemhlbnNodSIsImEiOiJjbTdyYWVmcmYxNGQ3MmpvaGJyejJiMDZpIn0.NQ-ey98NqQH1zmpe9ky9XQ';
+  const elevationData = [];
+
+  for (let i = 0; i < coordinates.length; i++) {
+    const [lon, lat] = coordinates[i];
+
+    // const url = `https://api.mapbox.com/v4/mapbox.terrain-rgb/${lon},${lat}.json?access_token=${MAPBOX_TOKEN}`;
+    const url = `https://api.mapbox.com/v4/mapbox.terrain-rgb/tilequery/${-74.5},${40}.json?access_token=${
+      MAPBOX_TOKEN
+    }`
+    
+    try {
+      const response = await fetch(url);
+      const data = await response.json();
+
+      if (data.elevation) {
+        elevationData.push(data.elevation);
+      } else {
+        elevationData.push(0); // 失败时默认高程 0
+      }
+    } catch (error) {
+      console.error("获取高程数据失败:", error);
+      elevationData.push(0);
+    }
+  }
+  
+  return elevationData;
+}
+
+// **计算斜面面积**
+calculateSlopeArea(coordinates, elevationData) {
+  let totalArea = 0;
+
+  for (let i = 0; i < coordinates.length - 1; i++) {
+    const p1 = coordinates[i];
+    const p2 = coordinates[i + 1];
+
+    const dx = p2[0] - p1[0];
+    const dy = p2[1] - p1[1];
+    const dz = elevationData[i + 1] - elevationData[i];
+
+    const baseLength = Math.sqrt(dx * dx + dy * dy);
+    const slopedLength = Math.sqrt(baseLength * baseLength + dz * dz);
+
+    totalArea += slopedLength * baseLength * 0.5; // 三角形面积
+  }
+
+  return totalArea;
+}
 
   fit(geometriesWkt){
     let geometries = []

src/views/home/album/index.vue

@@ -339,6 +339,14 @@ onMounted(() => {
 
     window.addEventListener("scroll", debouncedHandleScroll);
 });
+eventBus.off("area:id", areaId);
+eventBus.on("area:id", areaId);
+const regionId = ref(null)
+function areaId({ areaId, farmId }) {
+    regionId.value = areaId
+    getFarmWorkList(farmId)
+    // farmId.value = farmId
+}
 
 function getListData(farmIdVal) {
     farmId.value = farmIdVal
@@ -379,7 +387,8 @@ const getFarmDetail = (id) => {
 // 农事列表
 const farmWorkList = ref([]);
 const getFarmWorkList = (farmId) => {
-    VE_API.farm.fetchFarmWorkList({ farmId }).then(({ data }) => {
+    // regionId
+    VE_API.farm.fetchFarmWorkList({ farmId, regionId: regionId.value }).then(({ data }) => {
         getSecondLastIndex(data);
         // farmWorkList.value = data;
         nextTick(() => {
@@ -461,13 +470,14 @@ const startFlashing = () => {
 // 显示详情
 const showDetail = (card) => {
     // eventBus.emit("detailDialog:showDialog", pageParams);
-    if (card.orderStatus === 5 || card.orderStatus === 4) {
-        // 农事成效
-        router.push({ path: "/ns_recrod_effect", query: { data: JSON.stringify(card) } });
-    } else if (card.orderStatus === 0) {
-        router.push({ path: "/add_farm", query: { farmId: card.farmId, libId: card.farmWorkId, } });
+    // if (card.orderStatus === 5 || card.orderStatus === 4) {
+    //     // 农事成效
+    //     router.push({ path: "/work_completed", query: { data: JSON.stringify(card) } });
+    // } else 
+    if (card.orderStatus === 0) {
+        router.push({ path: "/add_farm", query: { farmId: card.farmId, libId: card.farmWorkId, id: card.id } });
     } else if (card.orderStatus) {
-        router.push({ path: "/work_detail", query: { farmId: card.farmId, libId: card.farmWorkId, } });
+        router.push({ path: "/work_detail", query: { farmId: card.farmId, libId: card.farmWorkId, id: card.id } });
     }
 };
 

src/views/home/index.vue

@@ -15,9 +15,9 @@
             <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
         </div>
       </div>
-      <div class="home-bottom">
-        <time-line class="time-wrap yes-events"></time-line>
-        <img class="fly-icon" src="@/assets/images/home/fly-icon.png" alt="">
+      <!-- <div class="home-bottom"> -->
+        <!-- <time-line class="time-wrap yes-events"></time-line>
+        <img class="fly-icon" src="@/assets/images/home/fly-icon.png" alt=""> -->
         <!-- <div class="log-box yes-events">
           <chart-box class="overflow">
             <template #title-name>
@@ -42,7 +42,7 @@
             <file-bar></file-bar>
           </chart-box>
         </div> -->
-      </div>
+      <!-- </div> -->
       <div class="right yes-events">
         <div class="list">
           <chart-box name="农事列表" arrow="arrow-left" :class="{'list-wrap': rightIndex===0}">

src/views/workDetail/components/boxClass.scss

@@ -505,7 +505,7 @@
 
         .item-table {
             margin-top: 8px;
-            // border: 1px solid rgba(33, 153, 248, 0.5);
+            // border: 1px solid #444444;
             // border-top: 0;
             // border-bottom: 0;
             border-radius: 4px;
@@ -528,13 +528,13 @@
                     .el-table__row {
                         .el-table__cell:first-child {
                             background: #E0F2FF;
-                            border-right: 1px solid rgba(33, 153, 248, 0.5);
+                            border-right: 1px solid #444444;
                         }
 
                     }
                     .el-table__header {
                         .el-table__cell:first-child{
-                                border-right: 1px solid rgba(33, 153, 248, 0.5);
+                                border-right: 1px solid #444444;
                             }
                     }
                 }
@@ -549,19 +549,19 @@
                     .el-table__row {
                         // .el-table__cell:first-child {
                         //     background: #E0F2FF;
-                        //     border-right: 1px solid rgba(33, 153, 248, 0.5);
+                        //     border-right: 1px solid #444444;
                         // }
 
                     }
                     .el-table__header {
-                        border-bottom: 1px solid rgba(33, 153, 248, 0.5);
+                        border-bottom: 1px solid #444444;
                         // .el-table__cell:first-child{
-                        //         border-right: 1px solid rgba(33, 153, 248, 0.5);
+                        //         border-right: 1px solid #444444;
                         //     }
                     }
                 }
                 .remark-text {
-                    border: 1px solid rgba(33, 153, 248, 0.5);
+                    border: 1px solid #444444;
                     color: rgba(0, 0, 0, 0.3);
                     height: 36px;
                     line-height: 36px;
@@ -612,7 +612,7 @@
                     line-height: 18px;
                 }
                 .el-table td.el-table__cell {
-                    border-color: rgba(33, 153, 248, 0.5);
+                    border-color: #444444;
                 }
             }
         }

src/views/workDetail/components/prescriptionBox.vue

@@ -438,7 +438,7 @@ const remove = () => {
 .prescription-result {
     position: relative;
     &.has-wrap {
-        border: 0.5px solid rgba(33, 153, 248, 0.5);
+        border: 0.5px solid #444444;
         border-radius: 4px;
         padding: 8px 10px 10px 10px;
     }
@@ -498,10 +498,10 @@ const remove = () => {
         flex: 1;
     }
     .title-3 {
-        width: 58px;
+        width: 64px;
     }
     .title-4 {
-        width: 68px;
+        width: 76px;
     }
     .title-5 {
         width: 68px;
@@ -526,9 +526,9 @@ const remove = () => {
                     }
                 }
                 .line-r {
-                    padding: 8px 0;
+                    // padding: 8px 0;
                     &.has-border {
-                        border-left: 1px solid rgba(33, 153, 248, 0.5);
+                        border-left: 1px solid #444444;
                     }
                     .line-3 {
                         display: flex;
@@ -540,10 +540,10 @@ const remove = () => {
                     .line-4 {
                         display: flex;
                         align-items: center;
-                        border-top: 1px solid rgba(33, 153, 248, 0.5);
+                        border-top: 1px solid #444444;
                     }
                     .execute-line {
-                        border-right: 1px solid rgba(33, 153, 248, 0.5);
+                        border-right: 1px solid #444444;
                     }
                 }
 

src/views/workDetail/index.vue

@@ -94,7 +94,7 @@ const mapRef = ref(null);
 const workList = ref({})
 
 const getList = () => {
-    VE_API.farm.fetchFarmWorkList({ farmId, libId }).then(({data}) => {
+    VE_API.farm.fetchFarmWorkList({ farmId, libId, id }).then(({data}) => {
     // data[0].orderStatus = data[0].orderStatus + 1
         workList.value = data
 
@@ -109,6 +109,7 @@ const getList = () => {
 
 let farmId = route.query.farmId
 let libId = route.query.libId
+let id = route.query.id
 onMounted(() => {
     farmMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
     getList();

src/views/workDetail/prescriptionBox.vue

@@ -694,11 +694,11 @@ const remove = () => {
 }
 .prescription-result {
     position: relative;
-    // border: 0.5px solid rgba(33, 153, 248, 0.5);
+    // border: 0.5px solid #444444;
     // border-radius: 4px;
     // padding: 8px 10px 10px 10px;
     &.has-wrap {
-        border: 0.5px solid rgba(33, 153, 248, 0.5);
+        border: 0.5px solid #444444;
         border-radius: 4px;
         padding: 8px 10px 10px 10px;
     }
@@ -742,11 +742,11 @@ const remove = () => {
 .new-wrap {
     border-radius: 5px;
     text-align: center;
-    border: 1px solid rgba(33, 153, 248, 0.5);
+    border: 1px solid #444444;
     .new-title {
         background: #e0f2ff;
         border-radius: 5px 5px 0 0;
-        border-bottom: 1px solid rgba(33, 153, 248, 0.5);
+        border-bottom: 1px solid #444444;
         display: flex;
         color: rgba(33, 153, 248, 0.85);
         // justify-content: space-around;
@@ -780,7 +780,7 @@ const remove = () => {
             .new-table {
                 display: flex;
                 align-items: center;
-                border: 1px solid rgba(33, 153, 248, 0.5);
+                border: 1px solid #444444;
                 background: #fff;
                 border-radius: 5px;
                 color: rgba(0, 0, 0, 0.4);
@@ -795,7 +795,7 @@ const remove = () => {
                 }
                 .line-r {
                     &.has-border {
-                        border-left: 1px solid rgba(33, 153, 248, 0.5);
+                        border-left: 1px solid #444444;
                     }
                     .line-3 {
                         display: flex;
@@ -807,10 +807,10 @@ const remove = () => {
                     .line-4 {
                         display: flex;
                         align-items: center;
-                        border-top: 1px solid rgba(33, 153, 248, 0.5);
+                        border-top: 1px solid #444444;
                     }
                     .execute-line {
-                        border-right: 1px solid rgba(33, 153, 248, 0.5);
+                        border-right: 1px solid #444444;
                     }
                 }