feat:对接作物接口

src/api/modules/monitor.js

@@ -118,4 +118,9 @@ module.exports = {
         url: config.base_dev_url + "container_crop_archive/farmImagePage",
         type: "get",
     },
+    //根据农场主体ID查询其下所有农场的列表
+    listFarmsBySubjectId: {
+        url: config.base_dev_url + "farm_subject/listFarmsBySubjectId",
+        type: "get",
+    },
 };

src/components/pageComponents/ArchivesFarmTimeLine.vue

@@ -1319,7 +1319,7 @@ watch(
             width: 18px;
             top: 0;
             bottom: 0;
-            left: -1px;
+            left: 0;
             height: auto;
             color: #fff;
             font-size: 12px;
@@ -1414,7 +1414,7 @@ watch(
             .arranges {
                 display: flex;
                 max-width: calc(100vw - 88px);
-                min-width: calc(100vw - 78px);
+                min-width: calc(100vw - 83px);
                 gap: 5px;
                 letter-spacing: 0px;
                 &.arranges-min{

src/views/old_mini/agri_record/index.vue

@@ -21,7 +21,7 @@
                         <span>分区管理</span>
                     </div>
                     <el-date-picker
-                        style="width: 110px"
+                        style="width: 100px"
                         v-model="date"
                         type="year"
                         placeholder="全部日期"

src/views/old_mini/common_map/index.js

@@ -0,0 +1,97 @@
+import * as KMap from "@/utils/ol-map/KMap";
+import * as util from "@/common/ol_common.js";
+import config from "@/api/config.js";
+import Style from "ol/style/Style";
+import Icon from "ol/style/Icon";
+import { Point } from 'ol/geom';
+import Feature from "ol/Feature";
+import { reactive } from "vue";
+
+export let mapLocation = reactive({
+  data: null,
+});
+
+/**
+ * @description 地图层对象
+ */
+class IndexMap {
+  constructor() {
+    let that = this;
+    let vectorStyle = new KMap.VectorStyle();
+    this.vectorStyle = vectorStyle;
+
+    // 位置图标
+    this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
+      style: (f) => {
+        return new Style({
+          image: new Icon({
+            src: require("@/assets/img/map/map_point.png"),
+            scale: 0.5,
+          }),
+        });
+      },
+    });
+  }
+
+  initMap(location, target) {
+    let level = 16;
+    let coordinate = util.wktCastGeom(location).getFirstCoordinate();
+    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 8, 22);
+    let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
+    this.kmap.addXYZLayer(xyz2, { minZoom: 8, maxZoom: 22 }, 2);
+    this.kmap.addLayer(this.clickPointLayer.layer);
+    this.setMapPoint(coordinate)
+    this.addMapSingerClick()
+  }
+
+  setMapPosition(center) {
+    this.kmap.getView().animate({
+      center,
+      zoom: 16,
+      duration: 0,
+    });
+    this.setMapPoint(center)
+  }
+
+  setMapPoint(coordinate) {
+    this.clickPointLayer.source.clear()
+    let point = new Feature(new Point(coordinate))
+    this.clickPointLayer.addFeature(point)
+  }
+
+  // 地图点击事件
+  addMapSingerClick() {
+    let that = this;
+    that.kmap.on("singleclick", (evt) => {
+      // that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
+      //   if ( layer instanceof VectorLayer && layer.get("name") === "reportPolygonLayer" ) {
+      //     areaId.data = feature.get("id")
+      //   }
+      // });
+      that.setMapPoint(evt.coordinate)
+      mapLocation.data = evt.coordinate
+    });
+  }
+
+  clearLayer() {
+    // this.kmap.removeLayer(this.clickPointLayer.layer)
+    this.kmap.polygonLayer.source.clear();
+  }
+
+  setAreaGeometry(geometryArr) {
+    this.clearLayer()
+    let that = this
+    geometryArr.map(item => {
+      that.kmap.setLayerWkt(item)
+    })
+    this.fitView()
+  }
+
+  fitView(){
+    let extent = this.kmap.polygonLayer.source.getExtent()
+    // 地图自适应到区域可视范围
+    this.kmap.getView().fit(extent, { duration: 500, padding: [100, 100, 100, 100] });
+  }
+}
+
+export default IndexMap;

src/views/old_mini/monitor/index.vue

@@ -15,13 +15,13 @@
         <!-- 作物档案 -->
         <div class="archives-time-line" :class="{ 'no-top': !varietyTabs.length && !gardenId }" v-show="activeGardenTab === 'current'">
             <div class="archives-time-line-header">
-                <div class="line-title" @click="handlePage">农情档案</div>
+                <div class="line-title">农情档案</div>
                 <div class="header-right">
                     <div class="add-variety-btn" v-if="varietyTabs.length > 0" @click="handleAddVariety">
                         <span>分区管理</span>
                     </div>
                     <el-date-picker
-                        style="width: 110px"
+                        style="width: 100px"
                         :editable="false"
                         v-model="date"
                         type="year"
@@ -31,10 +31,16 @@
                 </div>
             </div>
             <!-- 品种选择 -->
+            <div class="variety-tabs" v-if="farmsCategoryList.length > 0">
+                <div v-for="(v, index) in farmsCategoryList" :key="index" class="variety-tab"
+                    :class="{ 'variety-tab--active': activeFarmsCategory === v.speciesId }" @click="handleFarmsCategoryClick(v, index)">
+                    {{ v.speciesName }}
+                </div>
+            </div>
             <div class="variety-tabs" v-if="varietyTabs.length > 0">
                 <div v-for="(v, index) in varietyTabs" :key="index" class="variety-tab"
                     :class="{ 'variety-tab--active': activeVariety === index }" @click="handleVarietyClick(v, index)">
-                    {{ v.regionName || v.problemZoneTypeName }}
+                    {{ v.regionName }}
                 </div>
             </div>
             <template v-if="!varietyTabs.length">
@@ -44,24 +50,11 @@
                         专属数字农场，种好卖好
                         <div>点击解锁一键溯源增产</div>
                     </div>
-
                     <div class="lock-btn">点击解锁</div>
                 </div>
                 <img class="example-img" src="@/assets/img/monitor/example.png" alt="">
             </template>
             <div class="archives-time-line-content">
-                <!-- <div class="report-box" v-if="hasReport">
-                    <div class="box-content">
-                        <div class="box-title" @click="handleReportClick">
-                            <span>农情互动报告</span>
-                            <el-icon>
-                                <CaretRight />
-                            </el-icon>
-                        </div>
-                        <span class="box-text">点击查看您的长势报告</span>
-                    </div>
-                    <img src="@/assets/img/monitor/report-icon.png" alt="" class="report-icon" />
-                </div> -->
                 <div class="time-line">
                     <archives-farm-time-line :year="date.getFullYear()" :problemZoneId="currentVariety?.id" :farmId="farmIdData" :regionId="regionData" @card-click="handleCardClick"></archives-farm-time-line>
                 </div>
@@ -87,20 +80,15 @@ import wx from "weixin-js-sdk";
 import weatherInfo from "@/components/weatherInfo.vue";
 import { useRouter, useRoute } from "vue-router";
 import selectRegionPopup from "@/components/popup/selectRegionPopup.vue";
-import { ElMessage, ElMessageBox } from "element-plus";
 import ArchivesFarmTimeLine from "@/components/pageComponents/ArchivesFarmTimeLine.vue";
 import agriExecutePopup from "@/components/popup/agriExecutePopup.vue";
 import startInteractPopup from "@/components/popup/startInteractPopup.vue";
 import gardenList from "@/components/gardenList.vue";
 
 const startInteractPopupRef = ref(null);
-const handlePage = () => {
-    // router.push("/interaction_list");
-}
 
 const agriExecutePopupRef = ref(null);
 
-
 // 品种选择（作物档案内）- 根据主体ID动态获取分区列表
 const varietyTabs = ref([]);
 const activeVariety = ref(0);
@@ -113,9 +101,6 @@ const getVarietyTabs = async (isShowPopup = true) => {
         const res = await VE_API.basic_farm.fetchProblemZoneList({
             subjectId: gardenId.value,
         });
-        // if(res.data && res.data.regionList && res.data.problemZones){
-        //     varietyTabs.value = res.data.regionList.concat(res.data.problemZones)
-        // }
         varietyTabs.value = res.data?.regionList || []
         if (varietyTabs.value.length > 0) {
             handleVarietyClick(varietyTabs.value[activeVariety.value || 0], activeVariety.value || 0)
@@ -160,7 +145,6 @@ const disabledYearDate = (time) => {
 const showSelectRegionPopup = ref(false);
 
 const handleAddVariety = () => {
-    // router.push("/interaction?addVariety=true&subjectId=" + gardenId.value);
     router.push(`/draw_area?subjectId=${gardenId.value}&type=viewOnly`);
 };
 
@@ -179,8 +163,6 @@ const handleGoSelectRegion = () => {
     });
 };
 
-const showFarmPopup = ref(false); // 农场领取成功弹窗
-
 const defaultGardenId = ref(null);
 const selectedGardenId = ref(null);
 const gardenListRef = ref(null);
@@ -199,7 +181,6 @@ const handleGardenSelected = (garden) => {
 };
 
 const isHeaderShow = ref(false);
-const isDefaultFarm = ref(false);
 const weatherInfoRef = ref(null);
 onActivated(() => {
     sessionStorage.removeItem('interactionListScrollTop');
@@ -207,8 +188,6 @@ onActivated(() => {
     if (route.query.isHeaderShow) {
         isHeaderShow.value = true;
         defaultGardenId.value = route.query.farmId;
-        // 统一转换为布尔值
-        isDefaultFarm.value = route.query.defaultFarm === "true" || route.query.defaultFarm === true;
     }
     const savedFarmId = localStorage.getItem("selectedFarmId");
     selectedGardenId.value = savedFarmId ? Number(savedFarmId) : null;
@@ -239,8 +218,6 @@ const handleLockClick = () => {
 
 // 组件卸载时停止语音播放
 onDeactivated(() => {
-    showFarmPopup.value = false;
-    isDefaultFarm.value = false;
     regionData.value = null;
 });
 
@@ -258,12 +235,21 @@ const handleMaskClick = () => {
 
 const gardenId = ref(store.state.home.gardenId);
 
-// 初始化加载数据
-onMounted(() => {
-    if (gardenId.value) {
-        getVarietyTabs();
+const farmsCategoryList = ref([]);
+const activeFarmsCategory = ref(null);
+const getListFarmsBySubjectId = async () => {
+    const res = await VE_API.monitor.listFarmsBySubjectId({
+        subjectId: gardenId.value,
+    });
+    farmsCategoryList.value = res.data || [];
+    if(farmsCategoryList.value.length > 0){
+        activeFarmsCategory.value = res.data[0].speciesId;
     }
-});
+}
+
+const handleFarmsCategoryClick = (tab, index) => {
+    activeFarmsCategory.value = tab.speciesId;
+}
 
 const changeGarden = ({ id }) => {
     gardenId.value = id;
@@ -276,17 +262,11 @@ const changeGarden = ({ id }) => {
     // 更新 store 中的状态
     store.commit("home/SET_GARDEN_ID", id);
     getVarietyTabs();
+    getListFarmsBySubjectId(); 
 
     startInteractPopupRef.value.getPhenologyInitOrConfirmStatus();
 };
 
-function handleReportClick() {
-    router.push({
-        path: "/growth_report",
-        query: { farmId: gardenId.value },
-    });
-}
-
 const handleCardClick = () => {
     sessionStorage.setItem('activeVariety', activeVariety.value);
 }
@@ -364,7 +344,7 @@ const handleCardClick = () => {
     .archives-time-line {
         position: relative;
         padding: 150px 12px 12px 12px;
-        height: calc(100% - 90px);
+        height: calc(100% - 158px);
         display: flex;
         flex-direction: column;
         min-height: 0;
@@ -451,36 +431,6 @@ const handleCardClick = () => {
             display: flex;
             flex-direction: column;
 
-            .report-box {
-                background: linear-gradient(120deg, #eef8ff, #bbe3ff);
-                border-radius: 4px;
-                padding: 6px 0 0 16px;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin-bottom: 12px;
-
-                .box-content {
-                    .box-title {
-                        font-size: 16px;
-                        color: #2199f8;
-                        font-weight: 500;
-                        margin-bottom: 4px;
-                        display: flex;
-                        align-items: center;
-                    }
-
-                    .box-text {
-                        color: #4e5969;
-                    }
-                }
-
-                .report-icon {
-                    width: 120px;
-                    height: 85px;
-                }
-            }
-
             .time-line {
                 flex: 1;
                 min-height: 0;

src/views/old_mini/monitor/subPages/agriculturalDetail.vue

@@ -23,6 +23,10 @@
                         </div>
                     </div>
                 </div>
+                <div class="card-box region-card">
+                    <div class="card-title">区域勾选</div>
+                    <div class="map-container" ref="mapContainer"></div>
+                </div>
             </div>
             <!-- <div class="card-wrap">
                 <div class="card-box risk-card">
@@ -51,8 +55,10 @@ import { useRoute } from "vue-router";
 import { ref, onActivated, computed } from "vue";
 import customHeader from "@/components/customHeader.vue";
 import { showImagePreview } from 'vant';
-
+import IndexMap from "@/views/old_mini/common_map/index.js";
 const route = useRoute();
+const mapContainer = ref(null);
+const indexMap = new IndexMap();
 
 const previewImages = computed(() => {
     const list = imgInfo.value?.imageList || [];
@@ -72,6 +78,7 @@ const handlePhotoClick = (index) => {
 
 onActivated(() => {
     getFarmImagePage();
+    indexMap.initMap(imgInfo.value.pointWkt || 'POINT(113.6142086995688 23.585836479509055)', mapContainer.value);
 });
 
 const imgInfo = ref({});
@@ -227,6 +234,15 @@ const getFarmImagePage = () => {
                     padding: 5px 8px;
                 }
             }
+
+            .region-card {
+                margin-top: 10px;
+                .map-container {
+                    width: 100%;
+                    height: 170px;
+                    clip-path: inset(0px round 5px);
+                }
+            }
         }
     }
 }