feat: 斜面面积

src/api/modules/authentic.js

@@ -25,4 +25,8 @@ module.exports = {
     url: config.base_url_python + "geom/area",
     type: "post",
   },
+  fetchSlopeArea: {
+    url: config.base_url + "poi/calculateSlopeArea",
+    type: "post",
+  },
 };

src/components/navigation.vue

@@ -146,7 +146,7 @@ const list = ref([
             children: ["生长缓慢", "花量大","花带叶"],
         },
         {
-            name: "病虫指标",
+            name: "病虫等级",
             id: 5,
             children: ["病害比例", "虫害比例"],
         },

src/views/authentic/authenticMap.js

@@ -18,8 +18,6 @@ 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",
@@ -135,22 +133,10 @@ class AuthenticMap {
       6,
       22
     );
-    this.kmap.initDraw(async (e) => {
+    this.kmap.initDraw((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) => {
@@ -178,68 +164,7 @@ 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/authentic/index.vue

@@ -157,8 +157,8 @@
                             <el-form-item label="作物物种" prop="speciesTypeName">
                                 <el-input v-model="formInline.speciesTypeName" placeholder="请输入作物物种" clearable />
                             </el-form-item>
-                            <el-form-item label="客户姓名" prop="masterName">
-                                <el-input v-model="formInline.masterName" placeholder="请输入姓名" clearable />
+                            <el-form-item label="斜面面积">
+                                <el-input v-model="formInline.slopeMu" disabled clearable />
                             </el-form-item>
                             <el-form-item label="联系电话" prop="masterTel">
                                 <el-input v-model="formInline.masterTel" placeholder="请输入联系电话" clearable />
@@ -195,6 +195,11 @@
                         <span>{{ scope.row.mu }}亩</span>
                     </template>
                 </el-table-column>
+                <el-table-column property="slopeMu" label="斜面面积">
+                    <template #default="scope">
+                        <span>{{ scope.row.slopeMu }}亩</span>
+                    </template>
+                </el-table-column>
                 <el-table-column property="speciesTypeName" label="作物物种" />
                 <el-table-column property="masterName" label="客户姓名" />
                 <el-table-column property="masterTel" width="120" label="联系电话" />
@@ -326,6 +331,7 @@ const initForm = {
     farmName: "",
     createDate: "",
     mu: "",
+    slopeMu: "",
     speciesTypeName: "",
     masterName: "",
     masterTel: "",
@@ -392,6 +398,7 @@ const onSubmit = () => {
     ruleFormRef.value.validate((valid, fields) => {
         if (valid) {
             formInline.mu = formInline.mu.split("亩")[0];
+            formInline.slopeMu = formInline.slopeMu.split("亩")[0];
             if(heightArr.value.length>0){
                 formInline.height = heightArr.value
             }
@@ -475,6 +482,14 @@ const getArea = (arr) => {
     });
 };
 
+// 斜面面积
+const getSlopeArea = (arr) => {
+    VE_API.authentic.fetchSlopeArea({wkt: arr}).then(({data}) => {
+        const area = (data / 666.67).toFixed(2);
+        formInline.slopeMu = area + "亩";
+    });
+};
+
 // 打印
 const handlePrint = () => {
     pdfShow.value = true;
@@ -608,6 +623,7 @@ const getDetailsData = (id) => {
             // authenticMap.startModify("upload");
         }
         formInline.mu = data.mu + "亩";
+        formInline.slopeMu = data.slopeMu + "亩";
     });
 };
 
@@ -621,8 +637,9 @@ const updatePointList = (type, geom) => {
       lastItem = geometryArr[geometryArr.length - 1];
     }
     formInline.geom = lastItem.featureWkt;
-  debugger
-  let result = parseMultiPolygon(lastItem.featureWkt);
+    console.log("formInline.geom", formInline.geom)
+    getSlopeArea(formInline.geom)
+    let result = parseMultiPolygon(lastItem.featureWkt);
     result.pop();
     pointList.value = result;
     //判断是否是导入数据

src/views/home/album_compoents/albumCarousel.vue

@@ -118,7 +118,7 @@ const outputBox = ref([
 const qualityBox = ref([
     { id: 5, name: "通风率", value: "" },
     { id: 6, name: "透光率", value: "" },
-    { id: 7, name: "病虫指标", value: "" },
+    { id: 7, name: "病虫等级", value: "" },
 ]);
 const showTag = ref(false)
 eventBus.on("click:point",function({farmId,sampleId, data}){
@@ -138,16 +138,14 @@ eventBus.on("click:point",function({farmId,sampleId, data}){
   })
   showTag.value = data.nonghu == 1 ? true : false
   photoBaseData.value[0].value = data.pz;
-  photoBaseData.value[1].value = data.sgbmj + "平方米";
-  photoBaseData.value[2].value = data.cl ? data.cl + "斤" : "--";
-  photoBaseData.value[3].value = data.spgl + "%";
-  outputBox.value[0].value = data.hsl ? (data.hsl + "%") : "--";
-  outputBox.value[1].value = data.zzts? data.zzts : "--";
-  outputBox.value[2].value = data.khl? (data.khl + "%") : "--";
-  outputBox.value[3].value = data.xhl? (data.xhl + "%") : "--";
-  qualityBox.value[0].value = data.tfl? (data.tfl + "%") : "--";
-  qualityBox.value[1].value = data.tgl? (data.tgl + "%") : "--";
-  qualityBox.value[2].value = data.dxtj? (data.dxtj + "%") : "--";
+  photoBaseData.value[1].value = data?.sgbmj + "平方米";
+  photoBaseData.value[2].value = data?.zzts ? data.zzts + "" : "--";
+  photoBaseData.value[3].value = data?.sl + "年";
+  outputBox.value[0].value = data?.cl ? (data.cl + "斤") : "--";
+  outputBox.value[1].value = data?.spgl? (data.spgl + "%") : "--";
+  qualityBox.value[0].value = data?.tfl? (data.tfl + "%") : "--";
+  qualityBox.value[1].value = data?.tgl? (data.tgl + "%") : "--";
+//   qualityBox.value[2].value = data?.dxtj? (data.dxtj + "%") : "--";
 })
 
 eventBus.off("albumCarousel", toggleActiveImg);
@@ -174,19 +172,19 @@ const getSampleFiles = (geoHash) => {
 const photoBaseData = ref([
     {
         label: "品种",
-        value: "桂味",
+        value: "--",
     },
     {
-        label: "冠幅",
-        value: "10米",
+        label: "冠幅表面积",
+        value: "--",
     },
     {
-        label: "预估产量",
-        value: "2000斤",
+        label: "总枝条",
+        value: "--",
     },
     {
-        label: "高质果率",
-        value: "72棵",
+        label: "树龄",
+        value: "--",
     },
 ]);
 
@@ -338,12 +336,13 @@ function toggleQualityAcitve() {
         .box-wrap {
             display: flex;
             .box-item {
-                flex: 1;
+                min-width: 109px;
+                box-sizing: border-box;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
-                padding: 16px;
+                padding: 6px;
                 background: rgba(207, 207, 207, 0.1);
                 border-radius: 4px;
                 border: 1px solid rgba(207, 207, 207, 0.1);

src/views/home/components/homeFile.vue

@@ -88,7 +88,7 @@ const outputBox = ref([
 const qualityBox = ref([
     { id: 5, name: "通风率", value: "78", unit: "%" },
     { id: 6, name: "透光率", value: "56", unit: "%" },
-    { id: 7, name: "病虫指标", value: "80", unit: "%" },
+    { id: 7, name: "病虫等级", value: "80", unit: "%" },
 ]);
 
 const photoBaseData = ref([

src/views/home/map/samplePointLayer.js

@@ -238,7 +238,7 @@ toggleFilePoint(arr) {
                     <div class="item-val">${fs.get("tgl")}%</div>
                 </div>
                 <div class="box-item">
-                    <div class="item-name">病虫指标</div>
+                    <div class="item-name">病虫等级</div>
                     <div class="item-val">${fs.get("khl")}%</div>
                 </div>
               `;
@@ -246,6 +246,7 @@ toggleFilePoint(arr) {
               document.getElementById('tag-nh').style.display = fs.get("nonghu") == 1 ? "inline-block" : 'none'
               that.popup.setPosition(evt.coordinate)
             } else {
+              console.log('fs.getProperties()', fs.getProperties());
               eventBus.emit("click:point",{farmId:fs.get("farmId"),sampleId:fs.get("sampleId"), data: fs.getProperties()})
             }
           } else {