Explorar o código

fix: 溯源报告,首页接口

lxf hai 1 mes
pai
achega
20f3088f8e

+ 22 - 0
api/home.js

@@ -0,0 +1,22 @@
+// api/home.js
+import http from '@/utils/http'
+import config from './config'
+
+export default {
+	// 溯源报告
+  getFarmReport(data) {
+    return http.get('mini/z_farm_score/getByFarmId', data)
+  },
+  getScoreRule() {
+    return http.get('mini/z_farm_score/scoreRule')
+  },
+  getAllFarm() {
+	  return http.get('mini/z_farm_buy_shop/list')
+  },
+  fetchFarmInfo(data) {
+	  return http.get('mini/farm/getById', data)
+  },
+  fetchTypeList() {
+	  return http.get('mini/bur_category/list')
+  }
+}

+ 9 - 2
pages.json

@@ -32,7 +32,7 @@
 		{
 			"path": "pages/tabBar/home/subPages/gardenItem",
 			"style": {
-				"navigationBarTitleText": ""
+				"navigationBarTitleText": "有味果园"
 			}
 		},
 		{
@@ -87,6 +87,13 @@
 			"style": {
 				"navigationBarTitleText": "溯源报告"
 			}
+		},
+		{
+			"path" : "pages/tabBar/home/subPages/gardenList",
+			"style" : 
+			{
+				"navigationBarTitleText" : "有味果园"
+			}
 		}
 	],
 	"globalStyle": {
@@ -99,7 +106,7 @@
 	"tabBar": {
 		"color": "#898989",
 		"selectedColor": "#000000",
-		"borderStyle": "black",
+		"borderStyle": "white",
 		"backgroundColor": "#FFFFFF",
 		"list": [{
 				"pagePath": "pages/tabBar/home/home",

+ 9 - 2
pages/login/index.vue

@@ -12,7 +12,7 @@
 					</view>
 				</view>
 			</button>
-			<view class="tips">设置头像,可以在地图上显示自己守护树的点位哦~</view>
+			<view class="tips" @click="toPath">设置头像,可以在地图上显示自己守护树的点位哦~</view>
 			<button class="arrow-icon" open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">
 				<view class="button">微信授权</view>
 			</button>
@@ -57,7 +57,8 @@
 	    // })
 	}
 	
-	const onGetPhoneNumber = (e) =>{
+	const onGetPhoneNumber = (e) =>{
+		console.log('eeeeeeeeeee', e)
 	    if (e.detail.code) {
 	      // getPhone({code:e.detail.code}).then(res =>{
 	      //   if(res.success){
@@ -71,6 +72,12 @@
 	    }else{
 	      console.log("用户拒绝了授权");
 	    }
+	}
+	
+	function toPath() {
+		uni.navigateTo({
+			url: '/pages/tabBar/home/subPages/gardenMap?enterSelectTree=true'
+		});
 	}
 	
 	const saveUserInfo = (params) =>{

+ 72 - 51
pages/tabBar/home/components/bannerFive.vue

@@ -4,11 +4,11 @@
             <view class="title">生态农场指数</view>
             <view class="sub-title">通风透光防病虫,覆草种植原生态</view>
         </view>
-        <swiper v-if="boxList.length" class="carousel" style="height: 370px" arrow="always" :interval="5000">
+        <swiper v-if="boxList.length" class="carousel" :indicator-dots="true" :autoplay="true" style="height: 370px" arrow="always" :interval="5000">
             <swiper-item class="carousel-item" v-for="(item, index) in boxList" :key="index">
                 <view class="name">
-                    <span>{{ item.title }}: {{item.value}}分 </span>
-                    <span class="size">(排名前 {{item.rank}}%)</span>
+                    <text>{{ item.title }}: {{item.value}}分 </text>
+                    <text class="size">(排名前 {{item.rank}}%)</text>
                 </view>
                 <image class="img" :src="item.img" alt="" />
                 <view class="desc">{{ item.name }}</view>
@@ -19,30 +19,51 @@
 
 <script setup>
 import { ref ,watch} from "vue";
-
-const boxList = ref([
-    {
-        "value": 92,
-        "name": "通风优良,树距科学,防风林促进气流,减少病害,提升授粉和果实品质。",
-        "img": "https://birdseye-img.sysuimars.com/temp/tgl3.png",
-        "title": "通风率",
-        "rank": "20"
-    },
-    {
-        "value": 89,
-        "name": "透光优良,开心形修剪,行距合理,光合高效,果实糖度高,优果率超85%。",
-        "img": "https://birdseye-img.sysuimars.com/temp/tgl4.jpg",
-        "title": "透光率",
-        "rank": "20"
-    },
-    {
-        "value": 88,
-        "name": "70%益草覆盖,保水土增天敌,减除草剂,有机质+0.5%,生态经济双赢。",
-        "img": "https://birdseye-img-ali-cdn.sysuimars.com//biodiversityImg/1749134540014.png",
-        "title": "生物多样性",
-        "rank": "5"
+const props = defineProps({
+    baseData:{
+        type:Object,
+        defalut:{}
     }
-]);
+})
+
+const boxList = ref([]);
+watch(()=>props.baseData,(newValue) =>{
+    boxList.value = []
+    getData(newValue)
+})
+
+const getData = (data) =>{
+    boxList.value.push(
+        {
+            value:data.ventilationScore,
+            name:data.ventilationText,
+            img:data.ventilationImg,
+            title: "通风率",
+            rank:'20',
+        },
+        {
+            value:data.transmittanceScore,
+            name:data.transmittanceText,
+            img:data.transmittanceImg,
+            title: "透光率",
+            rank:'20',
+        },
+        {
+            value:data.biodiversityScore,
+            name:data.biodiversityText,
+            img:data.biodiversityImg,
+            title: "生物多样性",
+            rank:'5',
+        },
+        // {
+        //     value:data.stfzScore,
+        //     name:data.stfzText,
+        //     img:data.stfzImg,
+        //     title: "生态防治",
+        //     rank:'20',
+        // }
+    )
+}
 
 </script>
 
@@ -54,33 +75,33 @@ const boxList = ref([
     background-repeat: no-repeat;
     background-position: center center;
     .title {
-        font-size: 36px;
-        letter-spacing: 4px;
+        font-size: 72rpx;
+        letter-spacing: 8rpx;
         font-family: "jiangxizhuokai";
     }
     &.banner-three {
         background-image: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/report-banner-3.png");
-        padding: 60px 14px;
+        padding: 120rpx 28rpx;
         box-sizing: border-box;
         .sub-title {
-            letter-spacing: 3px;
-            margin-top: 10px;
+            letter-spacing: 6rpx;
+            margin-top: 20rpx;
         }
         .carousel {
-            margin-top: 12px;
+            margin-top: 24rpx;
             width: 100%;
             ::v-deep {
                 .el-carousel__button {
-                    width: 5px;
-                    height: 5px;
+                    width: 10rpx;
+                    height: 10rpx;
                     border-radius: 50%;
                 }
                 .el-carousel__arrow{
-                    width: 32px;
-                    height: 32px;
+                    width: 64rpx;
+                    height: 64rpx;
                     background: rgba(0, 0, 0,0.6);
                     .el-icon{
-                        font-size: 22px;
+                        font-size: 44rpx;
                         font-weight: bold;
                     }
                 }
@@ -89,38 +110,38 @@ const boxList = ref([
                 width: 100%;
                 height: 100%;
                 background: rgba(255, 255, 255, 0.6);
-                border-radius: 12px;
-                padding: 39px 16px 26px 16px;
+                border-radius: 24rpx;
+                padding: 78rpx 32rpx 52rpx 32rpx;
                 box-sizing: border-box;
-                backdrop-filter: blur(2px);
+                backdrop-filter: blur(4rpx);
                 .name {
                     position: absolute;
                     top: 0;
-                    left: calc(50% - 225px / 2);
+                    left: calc(50% - 450rpx / 2);
                     font-family: "jiangxizhuokai";
-                    padding: 6px;
-                    font-size: 16px;
+                    padding: 12rpx;
+                    font-size: 32rpx;
                     color: #333333;
                     text-align: center;
-                    width: 225px;
+                    width: 450rpx;
                     box-sizing: border-box;
                     background: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/name-bg.png") no-repeat center center / 100% 100%;
                     .size {
-                        font-size: 13px;
+                        font-size: 26rpx;
                     }
                 }
                 .img{
                     width: 100%;
-                    height: 240px;
+                    height: 480rpx;
                     object-fit: cover;
-                    margin: 11px 0;
-                    border-radius: 5px;
+                    margin: 22rpx 0;
+                    border-radius: 10rpx;
                 }
                 .desc {
                     color: #333333;
-                    font-size: 12px;
-                    letter-spacing: 1px;
-                    line-height: 18px;
+                    font-size: 24rpx;
+                    letter-spacing: 2rpx;
+                    line-height: 36rpx;
                 }
             }
         }

+ 304 - 579
pages/tabBar/home/components/bannerFour.vue

@@ -1,591 +1,316 @@
 <template>
-    <view class="banner-wrap banner-five">
-        <view class="title-wrap">
-            <view class="title">标准农事体系</view>
-            <view class="sub-title">看见营养好投入,见证安全高品质</view>
-        </view>
-        <view class="box-wrap" v-if="isFram">
-            <view class="box-name">标准农事指数</view>
-            <view class="circle-list">
-                <view class="circle-item" v-for="(item, index) in boxList" :key="index">
-					<qiun-data-charts 
-						:key=index
-					      type="arcbar"
-					      :opts="opts"
-					      :chartData="chartData"
-					    />
-                    <!-- <el-progress
-                        type="circle"
-                        :percentage="index ? baseData.yyAuthScore : baseData.stAuthScore"
-                        :stroke-width="8"
-                        :color="gradientColor"
-                        :width="85"
-                    >
-                        <template #default="{ percentage }">
-                            <view class="percentage-value">{{ percentage }}<span class="unit">分</span></view>
-                            <span class="percentage-label">{{ item.title }}</span>
-                        </template>
-                    </el-progress> -->
-                </view>
-                <view class="tips">注:生态认证体现生物药剂的使用情况,营养认证则反映有机肥和叶面肥等的使用情况</view>
-            </view>
-            <view class="box-list">
-                <view class="box-item">
-                    <view class="box-title">
-                        <image class="title-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/box-icon.png" alt="" />
-                        <view class="text">
-                            <span>农事认证列表</span>
-                            <!-- <view class="more" @click="handleAll">
-                                <span>查看全部</span>
-                                <el-icon><ArrowRightBold /></el-icon>
-                            </view> -->
-                        </view>
-                    </view>
-                    <view class="tabs">
-                        <view
-                            class="tabs-item"
-                            :class="{ active: active === index }"
-                            v-for="(item, index) in baseData.periodList"
-                            :key="index"
-                            @click="handleActive(index)"
-                        >
-                            {{ item }}
-                        </view>
-                    </view>
-                    <farm-table :tableData="tableData"></farm-table>
-                </view>
-            </view>
-        </view>
-        <view class="box-wrap" v-else>
-            <view class="no-data">
-                <span>您暂且没有认证<br />农事,请立即认证</span>
-                <view class="btn">去认证</view>
-            </view>
-        </view>
-    </view>
+	<view class="banner-wrap banner-five">
+		<view class="title-wrap">
+			<view class="title">标准农事体系</view>
+			<view class="sub-title">看见营养好投入,见证安全高品质</view>
+		</view>
+		<view class="box-wrap" v-if="isFram">
+			<view class="box-name">标准农事指数</view>
+			<view class="circle-list" v-if="chartData2">
+				<view class="circle-item">
+					<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
+				</view>
+				<view class="circle-item">
+					<qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData2" />
+				</view>
+				<view class="tips">注:生态认证体现生物药剂的使用情况,营养认证则反映有机肥和叶面肥等的使用情况</view>
+			</view>
+			<view class="box-list">
+				<view class="box-item">
+					<view class="box-title">
+						<image class="title-img"
+							src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/box-icon.png" alt="" />
+						<view class="text">
+							<text>农事认证列表</text>
+						</view>
+					</view>
+					<view class="tabs" v-if="baseData?.periodList">
+						<view class="tabs-item" :class="{ active: active === index }"
+							v-for="(item, index) in baseData.periodList" :key="index" @click="handleActive(index)">
+							{{ item }}
+						</view>
+					</view>
+					<farm-table :tableData="tableData"></farm-table>
+				</view>
+			</view>
+		</view>
+		<view class="box-wrap" v-else>
+			<view class="no-data">
+				<text>您暂且没有认证<br />农事,请立即认证</text>
+				<view class="btn">去认证</view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
-import farmTable from "./farmTable.vue";
+	import {
+		ref,
+		watch
+	} from "vue";
+	import farmTable from "./farmTable.vue";
 
-const baseData = ref([
-    {
-        "authId": "714567289264934912",
-        "images": [
-            "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1750693336419.jpg"
-        ],
-        "serviceMain": "广州泽秾丰农资有限公司",
-        "stln": "​​有机无机搭配,促养分高效​​",
-        "targetText": "​​促进果实膨大,提升商品品质​​。",
-        "whjc": "膨果期",
-        "farmId": 766,
-        "farmWorkLibId": "708734452146114560",
-        "farmWorkLibName": "壮果营养",
-        "periodName": "果期",
-        "score": 20,
-        "shortName": "有机肥",
-        "standard": "有机肥营养",
-        "evidenceImgs": "123.png",
-        "prescriptionObj": [
-            {
-                "brand": "未知",
-                "name": "硝酸铵钙",
-                "pfParam": "",
-                "typeName": "营养",
-                "usageMode": ""
-            },
-            {
-                "brand": "未知",
-                "name": "氯化钾",
-                "pfParam": "",
-                "typeName": "营养",
-                "usageMode": ""
-            },
-            {
-                "brand": "未知",
-                "name": "硝酸镁",
-                "pfParam": "",
-                "typeName": "营养",
-                "usageMode": ""
-            }
-        ],
-        "status": 1,
-        "isAuth": null,
-        "farmName": "",
-        "condition": "",
-        "expertName": "韦帮稳",
-        "expertPic": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
-        "nzName": "广州泽秾丰农资有限公司",
-        "nfName": "飞鸟种植助手",
-        "executeDate": "2025-05-01",
-        "executeDate2": "2025-05-01"
-    },
-    {
-        "authId": "714567288828727296",
-        "images": [
-            "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1750693337787.jpg"
-        ],
-        "serviceMain": "广州泽秾丰农资有限公司",
-        "stln": "​​压低虫口基数,降后期用药需求​​",
-        "targetText": "​​精准防治害虫,减轻幼果受害​​",
-        "whjc": "谢花期",
-        "farmId": 766,
-        "farmWorkLibId": "708734452141920262",
-        "farmWorkLibName": "果期防治I",
-        "periodName": "果期",
-        "score": 20,
-        "shortName": "纯天然生物药剂",
-        "standard": "生态防治",
-        "evidenceImgs": "123.png",
-        "prescriptionObj": [
-            {
-                "brand": "诺普信稼炫",
-                "name": "氯虫苯甲酰胺",
-                "pfParam": "",
-                "typeName": "病虫",
-                "usageMode": ""
-            },
-            {
-                "brand": "广东立威立犀",
-                "name": "立威立犀",
-                "pfParam": "",
-                "typeName": "病虫",
-                "usageMode": ""
-            },
-            {
-                "brand": "济南中科翠剑",
-                "name": "吡唑醚菌酯",
-                "pfParam": "",
-                "typeName": "病虫",
-                "usageMode": ""
-            }
-        ],
-        "status": 1,
-        "isAuth": null,
-        "farmName": "",
-        "condition": "",
-        "expertName": "韦帮稳",
-        "expertPic": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
-        "nzName": "广州泽秾丰农资有限公司",
-        "nfName": "飞鸟种植助手",
-        "executeDate": "2025-04-26",
-        "executeDate2": "2025-04-26"
-    },
-    {
-        "authId": "714567288606429184",
-        "images": [
-            "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1750693209854.jpg"
-        ],
-        "serviceMain": "广州泽秾丰农资有限公司",
-        "stln": "​​高效吸收配方,减养分流失​​",
-        "targetText": "​​补充关键营养,提高坐果率​​",
-        "whjc": "谢花期",
-        "farmId": 766,
-        "farmWorkLibId": "708734452141920261",
-        "farmWorkLibName": "保果营养",
-        "periodName": "果期",
-        "score": 20,
-        "shortName": "中微量元素肥",
-        "standard": "叶面肥营养",
-        "evidenceImgs": "123.png",
-        "prescriptionObj": [
-            {
-                "brand": "广州大炎",
-                "name": "钙镁叶面肥",
-                "pfParam": "",
-                "typeName": "营养",
-                "usageMode": ""
-            },
-            {
-                "brand": "广州大炎",
-                "name": "佳果天成",
-                "pfParam": "",
-                "typeName": "营养",
-                "usageMode": ""
-            },
-            {
-                "brand": "四川国光",
-                "name": "果动力",
-                "pfParam": "",
-                "typeName": "调节",
-                "usageMode": ""
-            },
-            {
-                "brand": "芸乐收",
-                "name": "芸乐收",
-                "pfParam": "",
-                "typeName": "营养",
-                "usageMode": ""
-            }
-        ],
-        "status": 1,
-        "isAuth": null,
-        "farmName": "",
-        "condition": "",
-        "expertName": "韦帮稳",
-        "expertPic": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
-        "nzName": "广州泽秾丰农资有限公司",
-        "nfName": "飞鸟种植助手",
-        "executeDate": "2025-04-17",
-        "executeDate2": "2025-04-17"
-    }
-])
-const tableData = ref([
-    {
-        "authId": "714567289264934912",
-        "images": [
-            "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1750693336419.jpg"
-        ],
-        "serviceMain": "广州泽秾丰农资有限公司",
-        "stln": "​​有机无机搭配,促养分高效​​",
-        "targetText": "​​促进果实膨大,提升商品品质​​。",
-        "whjc": "膨果期",
-        "farmId": 766,
-        "farmWorkLibId": "708734452146114560",
-        "farmWorkLibName": "壮果营养",
-        "periodName": "果期",
-        "score": 20,
-        "shortName": "有机肥",
-        "standard": "有机肥营养",
-        "evidenceImgs": "123.png",
-        "prescriptionObj": [
-            {
-                "brand": "未知",
-                "name": "硝酸铵钙",
-                "pfParam": "",
-                "typeName": "营养",
-                "usageMode": ""
-            },
-            {
-                "brand": "未知",
-                "name": "氯化钾",
-                "pfParam": "",
-                "typeName": "营养",
-                "usageMode": ""
-            },
-            {
-                "brand": "未知",
-                "name": "硝酸镁",
-                "pfParam": "",
-                "typeName": "营养",
-                "usageMode": ""
-            }
-        ],
-        "status": 1,
-        "isAuth": null,
-        "farmName": "",
-        "condition": "",
-        "expertName": "韦帮稳",
-        "expertPic": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
-        "nzName": "广州泽秾丰农资有限公司",
-        "nfName": "飞鸟种植助手",
-        "executeDate": "2025-05-01",
-        "executeDate2": "2025-05-01"
-    },
-    {
-        "authId": "714567288828727296",
-        "images": [
-            "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1750693337787.jpg"
-        ],
-        "serviceMain": "广州泽秾丰农资有限公司",
-        "stln": "​​压低虫口基数,降后期用药需求​​",
-        "targetText": "​​精准防治害虫,减轻幼果受害​​",
-        "whjc": "谢花期",
-        "farmId": 766,
-        "farmWorkLibId": "708734452141920262",
-        "farmWorkLibName": "果期防治I",
-        "periodName": "果期",
-        "score": 20,
-        "shortName": "纯天然生物药剂",
-        "standard": "生态防治",
-        "evidenceImgs": "123.png",
-        "prescriptionObj": [
-            {
-                "brand": "诺普信稼炫",
-                "name": "氯虫苯甲酰胺",
-                "pfParam": "",
-                "typeName": "病虫",
-                "usageMode": ""
-            },
-            {
-                "brand": "广东立威立犀",
-                "name": "立威立犀",
-                "pfParam": "",
-                "typeName": "病虫",
-                "usageMode": ""
-            },
-            {
-                "brand": "济南中科翠剑",
-                "name": "吡唑醚菌酯",
-                "pfParam": "",
-                "typeName": "病虫",
-                "usageMode": ""
-            }
-        ],
-        "status": 1,
-        "isAuth": null,
-        "farmName": "",
-        "condition": "",
-        "expertName": "韦帮稳",
-        "expertPic": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
-        "nzName": "广州泽秾丰农资有限公司",
-        "nfName": "飞鸟种植助手",
-        "executeDate": "2025-04-26",
-        "executeDate2": "2025-04-26"
-    },
-    {
-        "authId": "714567288606429184",
-        "images": [
-            "https://birdseye-img.sysuimars.com/birdseye-look-mini/temp/1750693209854.jpg"
-        ],
-        "serviceMain": "广州泽秾丰农资有限公司",
-        "stln": "​​高效吸收配方,减养分流失​​",
-        "targetText": "​​补充关键营养,提高坐果率​​",
-        "whjc": "谢花期",
-        "farmId": 766,
-        "farmWorkLibId": "708734452141920261",
-        "farmWorkLibName": "保果营养",
-        "periodName": "果期",
-        "score": 20,
-        "shortName": "中微量元素肥",
-        "standard": "叶面肥营养",
-        "evidenceImgs": "123.png",
-        "prescriptionObj": [
-            {
-                "brand": "广州大炎",
-                "name": "钙镁叶面肥",
-                "pfParam": "",
-                "typeName": "营养",
-                "usageMode": ""
-            },
-            {
-                "brand": "广州大炎",
-                "name": "佳果天成",
-                "pfParam": "",
-                "typeName": "营养",
-                "usageMode": ""
-            },
-            {
-                "brand": "四川国光",
-                "name": "果动力",
-                "pfParam": "",
-                "typeName": "调节",
-                "usageMode": ""
-            },
-            {
-                "brand": "芸乐收",
-                "name": "芸乐收",
-                "pfParam": "",
-                "typeName": "营养",
-                "usageMode": ""
-            }
-        ],
-        "status": 1,
-        "isAuth": null,
-        "farmName": "",
-        "condition": "",
-        "expertName": "韦帮稳",
-        "expertPic": "https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png",
-        "nzName": "广州泽秾丰农资有限公司",
-        "nfName": "飞鸟种植助手",
-        "executeDate": "2025-04-17",
-        "executeDate2": "2025-04-17"
-    }
-])
+	const props = defineProps({
+		baseData: {
+			type: Object,
+			defalut: {},
+		},
+	});
 
-const isFram = ref(true);
-const active = ref(0);
-const handleActive = (index) =>{
-    active.value = index
-	tableData.value = baseData.value.farmWorkAuths.filter(item =>item.periodName === baseData.value.periodList[index])
-    // tableData.value = farmWorkAuths.value.filter(item =>item.periodName === props.baseData.periodList[index])
-}
+	const isFram = ref(true);
+	const active = ref(0);
+	const handleActive = (index) => {
+		active.value = index
+		tableData.value = props.baseData.farmWorkAuths.filter(item => item.periodName === props.baseData.periodList[
+			index])
+	}
 
-const gradientColor = [
-    { color: "#FFD887", percentage: 0 },
-    { color: "#FFAF2E", percentage: 100 },
-];
-const boxList = ref([
-    {
-        value: 0,
-        title: "生态认证",
-    },
-    {
-        value: 0,
-        title: "营养认证",
-    },
-]);
+	const gradientColor = [{
+			color: "#FFD887",
+			percentage: 0
+		},
+		{
+			color: "#FFAF2E",
+			percentage: 100
+		},
+	];
+	const boxList = ref([{
+			value: 0,
+			title: "生态认证",
+		},
+		{
+			value: 0,
+			title: "营养认证",
+		},
+	]);
 
-const opts = {
-        color: ["#FFD887", "#FFAF2E"],
-        padding: [0, 0, 0, 0],
-        title: {
-          name: "91分",
-          fontSize: 18,
-          color: "#FF8400"
-        },
-        subtitle: {
-          name: "生态认证",
-          fontSize: 12,
-          color: "#999999"
-        },
-        extra: {
-          arcbar: {
-            type: "circle",
-            width: 8,
-            backgroundColor: "#EDEDED",
-            startAngle: 0.75,
-            endAngle: 0.25,
-            gap: 2,
-			customColor: ["#FF8400", "#FFAF37"]
-          }
-        }
-      }
-	  
-	  const chartData = {
-            series: [
-              {
-                name: "生态认证",
-                data: 0.8
-              }
-            ]
-          }
+
+	const tableData = ref([])
+	watch(() => props.baseData, (newValue) => {
+		tableData.value = newValue.farmWorkAuths.filter(item => item.periodName === newValue.periodList[0])
+		opts.value = {
+			color: ["#FFAF2E", "#FFAF2E"],
+			padding: [0, 0, 0, 0],
+			title: {
+				name: props.baseData.yyAuthScore + "分",
+				fontSize: 18,
+				color: "#FF8400"
+			},
+			subtitle: {
+				name: "生态认证",
+				fontSize: 12,
+				color: "#999999"
+			},
+			extra: {
+				arcbar: {
+					type: "circle",
+					width: 8,
+					backgroundColor: "#EDEDED",
+					startAngle: 0.75,
+					endAngle: 0.25,
+					gap: 2,
+					customColor: ["#FFAF2E", "#FFAF2E"]
+				}
+			}
+		}
+		chartData.value = {
+			series: [{
+				name: "生态认证",
+				data: props.baseData.yyAuthScore / 100
+			}]
+		}
+		opts2.value = {
+			color: ["#FFAF2E", "#FFAF2E"],
+			padding: [0, 0, 0, 0],
+			title: {
+				name: props.baseData.stAuthScore + "分",
+				fontSize: 18,
+				color: "#FF8400"
+			},
+			subtitle: {
+				name: "营养认证",
+				fontSize: 12,
+				color: "#999999"
+			},
+			extra: {
+				arcbar: {
+					type: "circle",
+					width: 8,
+					backgroundColor: "#EDEDED",
+					startAngle: 0.75,
+					endAngle: 0.25,
+					gap: 2,
+					customColor: ["#FFAF2E", "#FFAF2E"]
+				}
+			}
+		}
+		chartData2.value = {
+			series: [{
+				name: "营养认证",
+				data: props.baseData.stAuthScore / 100
+			}]
+		}
+	})
+
+	const opts = ref(null)
+	const opts2 = ref(null)
+
+	const chartData = ref(null)
+	const chartData2 = ref(null)
 </script>
 
 <style lang="scss" scoped>
-.banner-wrap {
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    background-position: center center;
-    .title {
-        font-size: 36px;
-        letter-spacing: 4px;
-        font-family: "jiangxizhuokai";
-    }
-    &.banner-five {
-        background-image: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/report-banner-5.png");
-        padding: 60px 14px;
-        box-sizing: border-box;
-        .sub-title {
-            letter-spacing: 3px;
-            margin-top: 10px;
-        }
-        .box-wrap {
-            margin-top: 12px;
-            background: rgba(255, 255, 255, 0.94);
-            padding: 30px 13px 13px 13px;
-            border-radius: 12px;
-            position: relative;
-            .no-data {
-                color: #999;
-                width: 112px;
-                text-align: center;
-                margin: auto;
-                .btn {
-                    background-image: linear-gradient(120deg, #ffd887, #ed9e1e);
-                    color: #ffffff;
-                    font-size: 12px;
-                    padding: 6px 33px;
-                    border-radius: 20px;
-                    margin-top: 12px;
-                }
-            }
-            .box-name {
-                position: absolute;
-                top: 0;
-                left: calc(50% - 173px / 2);
-                font-size: 16px;
-                padding: 5px 0 7px 0;
-                text-align: center;
-                width: 173px;
-                color: #000;
-                font-family: "jiangxizhuokai";
-                background: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/box-name.png") no-repeat center center / 100% 100%;
-            }
-            .circle-list {
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: space-around;
-                padding: 0 12px;
-                .circle-item {
-					width: 90px;
-					height: 100px;
+	.banner-wrap {
+		width: 100%;
+		height: 100%;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		background-position: center center;
+
+		.title {
+			font-size: 36px;
+			letter-spacing: 4px;
+			font-family: "jiangxizhuokai";
+		}
+
+		&.banner-five {
+			background-image: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/report-banner-5.png");
+			padding: 60px 14px;
+			box-sizing: border-box;
+
+			.sub-title {
+				letter-spacing: 3px;
+				margin-top: 10px;
+			}
+
+			.box-wrap {
+				margin-top: 12px;
+				background: rgba(255, 255, 255, 0.94);
+				padding: 30px 13px 13px 13px;
+				border-radius: 12px;
+				position: relative;
+
+				.no-data {
+					color: #999;
+					width: 112px;
+					text-align: center;
+					margin: auto;
+
+					.btn {
+						background-image: linear-gradient(120deg, #ffd887, #ed9e1e);
+						color: #ffffff;
+						font-size: 12px;
+						padding: 6px 33px;
+						border-radius: 20px;
+						margin-top: 12px;
+					}
+				}
+
+				.box-name {
+					position: absolute;
+					top: 0;
+					left: calc(50% - 173px / 2);
+					font-size: 16px;
+					padding: 5px 0 7px 0;
+					text-align: center;
+					width: 173px;
+					color: #000;
+					font-family: "jiangxizhuokai";
+					background: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/box-name.png") no-repeat center center / 100% 100%;
+				}
+
+				.circle-list {
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: space-around;
+					padding: 0 12px;
+
+					.circle-item {
+						width: 90px;
+						height: 100px;
+					}
+
+					.percentage-value {
+						color: #ff8400;
+						font-size: 20px;
+						font-family: "jiangxizhuokai";
+						margin-bottom: 5px;
+
+						.unit {
+							font-size: 13px;
+						}
+					}
+
+					.percentage-label {
+						font-size: 12px;
+						color: rgba(0, 0, 0, 0.4);
+					}
+
+					.tips {
+						font-size: 11px;
+						color: rgba(51, 51, 51, 0.5);
+						text-align: center;
+						margin: 10px 0;
+					}
+				}
+
+				.box-list {
+					.box-item {
+						margin-top: 10px;
+
+						.box-title {
+							display: flex;
+							align-items: center;
+							color: #000;
+							font-size: 15px;
+
+							.title-img {
+								width: 15px;
+								height: 9px;
+								margin-right: 6px;
+							}
+
+							.text {
+								width: 100%;
+								font-family: "jiangxizhuokai";
+								display: flex;
+								align-items: center;
+								justify-content: space-between;
+
+								.more {
+									color: #bbbbbb;
+									display: flex;
+									align-items: center;
+									font-size: 13px;
+								}
+							}
+						}
+
+						.tabs {
+							margin-top: 10px;
+							display: flex;
+							justify-content: center;
+							font-size: 13px;
+							color: #666666;
+
+							.tabs-item {
+								padding: 3px 23px;
+								border-radius: 20px;
+								background: rgba(0, 0, 0, 0.09);
+
+								&.active {
+									color: #fff;
+									background-image: linear-gradient(90deg, #FFD887, #ED9E1E);
+								}
+							}
+
+							.tabs-item+.tabs-item {
+								margin-left: 20px;
+							}
+						}
+					}
 				}
-                .percentage-value {
-                    color: #ff8400;
-                    font-size: 20px;
-                    font-family: "jiangxizhuokai";
-                    margin-bottom: 5px;
-                    .unit {
-                        font-size: 13px;
-                    }
-                }
-                .percentage-label {
-                    font-size: 12px;
-                    color: rgba(0, 0, 0, 0.4);
-                }
-                .tips {
-                    font-size: 11px;
-                    color: rgba(51, 51, 51, 0.5);
-                    text-align: center;
-                    margin: 10px 0;
-                }
-            }
-            .box-list {
-                .box-item {
-                    margin-top: 10px;
-                    .box-title {
-                        display: flex;
-                        align-items: center;
-                        color: #000;
-                        font-size: 15px;
-                        .title-img {
-                            width: 15px;
-                            height: 9px;
-                            margin-right: 6px;
-                        }
-                        .text {
-                            width: 100%;
-                            font-family: "jiangxizhuokai";
-                            display: flex;
-                            align-items: center;
-                            justify-content: space-between;
-                            .more {
-                                color: #bbbbbb;
-                                display: flex;
-                                align-items: center;
-                                font-size: 13px;
-                                span {
-                                    margin-right: 2px;
-                                }
-                            }
-                        }
-                    }
-                    .tabs {
-                        margin-top: 10px;
-                        display: flex;
-                        justify-content: center;
-                        font-size: 13px;
-                        color: #666666;
-                        .tabs-item {
-                            padding: 3px 23px;
-                            border-radius: 20px;
-                            background: rgba(0, 0, 0, 0.09);
-                            &.active {
-                                color: #fff;
-                                background-image: linear-gradient(90deg, #ffd887, #ed9e1e);
-                            }
-                        }
-                        .tabs-item + .tabs-item {
-                            margin-left: 20px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-</style>
+			}
+		}
+	}
+</style>

+ 76 - 59
pages/tabBar/home/components/bannerThree.vue

@@ -3,11 +3,12 @@
 		<view class="title-wrap">
 			<view class="title">气象适宜指数</view>
 			<!-- <el-viewider class="divider" /> -->
+			<view class="title-line"></view>
 			<view class="sub-title">温光水全年记录,好风好雨好荔枝</view>
 		</view>
 		<view class="weather-item">
 			<view class="info">
-				<view class="charts-box">
+				<view class="charts-box" v-if="opts">
 					<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
 				</view>
 				<view class="text">
@@ -23,47 +24,61 @@
 </template>
 
 <script setup>
-	const opts = {
-		color: ["#FF8400", "#FFAF37"],
-		padding: undefined,
-		title: {
-			name: "91分",
-			fontSize: 20,
-			color: "#FF8400"
-		},
-		subtitle: {
-			name: "综合评分",
-			fontSize: 12,
-			color: "#999999"
-		},
-		extra: {
-			arcbar: {
-				type: "default",
-				width: 8,
-				backgroundColor: "#FFF3E6",
-				startAngle: 0.75,
-				endAngle: 0.25,
-				gap: 2,
-				linearType: "custom",
-				customColor: ["#FF8400", "#FFAF37"]
+import { ref, watch } from 'vue';
+
+	
+	const props = defineProps({
+	    baseData:{
+	        type:Object,
+	        defalut:{}
+	    }
+	});
+	watch(()=>props.baseData,(newValue) =>{
+		chartData.value = {
+			series: [{
+				name: "综合评分",
+				data: newValue.weatherRiskScore / 100,
+			}]
+		}
+		opts.value = {
+			color: ["#FF8400", "#FFAF37"],
+			padding: undefined,
+			title: {
+				name: newValue.weatherRiskScore + '分',
+				fontSize: 20,
+				color: "#FF8400"
+			},
+			subtitle: {
+				name: "综合评分",
+				fontSize: 12,
+				color: "#999999"
+			},
+			extra: {
+				arcbar: {
+					type: "default",
+					width: 8,
+					backgroundColor: "#FFF3E6",
+					startAngle: 0.75,
+					endAngle: 0.25,
+					gap: 2,
+					linearType: "custom",
+					customColor: ["#FF8400", "#FFAF37"]
+				}
 			}
 		}
-	}
+	})
+	
+	let opts = ref(null)
 
-	const chartData = {
-		series: [{
-			name: "综合评分",
-			data: 0.91,
-		}]
-	}
+	let chartData = ref(null)
 
 	function handleChart() {}
 </script>
 
 <style lang="scss" scoped>
 	.charts-box {
-		width: 108px;
-		height: 100px;
+		width: 216rpx;
+		height: 200rpx;
 	}
 
 	.banner-wrap {
@@ -74,43 +89,45 @@
 		background-position: center center;
 
 		.title {
-			font-size: 36px;
-			letter-spacing: 4px;
+			font-size: 72rpx;
+			letter-spacing: 8rpx;
 			font-family: "jiangxizhuokai";
 		}
 
 		&.banner-four {
 			background-image: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/report-banner-4.png");
-			padding: 60px 14px;
+			padding: 120rpx 28rpx;
 			box-sizing: border-box;
 
-			.divider {
-				width: 36px;
-				margin: 12px 0;
+			.title-line {
+				width: 72rpx;
+				height: 2rpx;
+				background: rgba(255, 255, 255, 0.6);
+				margin: 24rpx 0;
 			}
 
 			.sub-title {
-				letter-spacing: 3px;
+				letter-spacing: 6rpx;
 			}
 
 			.btn {
-				font-size: 11px;
-				padding: 7px 12px;
-				border-radius: 20px;
+				font-size: 22rpx;
+				padding: 14rpx 24rpx;
+				border-radius: 40rpx;
 				background: rgba(255, 255, 255, 0.2);
 				text-align: center;
-				margin-top: 24px;
-				width: 90px;
+				margin-top: 48rpx;
+				width: 180rpx;
 				box-sizing: border-box;
-				margin: 24px auto;
+				margin: 48rpx auto;
 			}
 		}
 
 		.weather-item {
-			margin-top: 12px;
+			margin-top: 24rpx;
 			background: rgba(255, 255, 255, 0.9);
-			padding: 12px 10px;
-			border-radius: 12px;
+			padding: 24rpx 20rpx;
+			border-radius: 24rpx;
 
 			.info {
 				width: 100%;
@@ -120,20 +137,20 @@
 
 				.percentage-value {
 					color: #ff8400;
-					font-size: 20px;
+					font-size: 40rpx;
 					font-family: "jiangxizhuokai";
-					margin-bottom: 5px;
+					margin-bottom: 10rpx;
 				}
 
 				.percentage-label {
-					font-size: 12px;
+					font-size: 24rpx;
 					color: #999999;
 				}
 
 				.text {
-					margin-left: 2px;
-					font-size: 12px;
-					line-height: 19px;
+					margin-left: 4rpx;
+					font-size: 24rpx;
+					line-height: 38rpx;
 					color: #333;
 				}
 			}
@@ -142,10 +159,10 @@
 				width: 100%;
 				text-align: center;
 
-				img {
-					width: 100%;
-					height: 282px;
-				}
+				// img {
+				// 	width: 100%;
+				// 	height: 564rpx;
+				// }
 			}
 
 			&.styleName2 {

+ 231 - 198
pages/tabBar/home/components/bannerTwo.vue

@@ -1,209 +1,236 @@
 <template>
-	<div class="banner-wrap banner-two">
-		<div class="title-wrap">
-			<div class="title">遥感环境评估</div>
-			<div class="score">
-				<span>有味指数</span>
-				<up-rate :count="5" size="13" readonly :allowHalf="true" active-color="#FF8400" gutter="1" v-model="envScore"></up-rate>
+	<view class="banner-wrap banner-two">
+		<view class="title-wrap">
+			<view class="title">遥感环境评估</view>
+			<view class="score">
+				<text class="score-text">有味指数</text>
+				<up-rate :count="5" size="13" readonly :allowHalf="true" active-color="#FF8400" gutter="1"
+					v-model="envScore"></up-rate>
 				<!-- <rate v-model="envScore" readonly allow-half :size="12" color="#FF8400" /> -->
-			</div>
-		</div>
-		<div class="chart-wrap">
+			</view>
+		</view>
+		<view class="chart-wrap">
 			<view class="chart-bg">
-				
 			</view>
 			<!-- <radar-chart class="radar-wrap" :pieData="boxList"></radar-chart> -->
-			<view class="charts-box">
+			<view class="charts-box" v-if="chartData">
 				<qiun-data-charts type="radar" :opts="opts" :chartData="chartData" />
 			</view>
-			<div class="radar-list">
-				<div class="radar-item" :class="{ active: active === index }" :style="item.style"
+			<view class="radar-list">
+				<view class="radar-item" :class="{ active: active === index }" :style="item.style"
 					v-for="(item, index) in boxList" :key="index" @click="handleActive(index)">
-					<span>{{ item.name }}</span>
-					<up-rate :count="5" readonly size="12" :allowHalf="true" :active-color="active === index ? '#000' : '#fff'"
-						v-model="item.score"></up-rate>
-					<!-- <rate
-                        v-model="item.score"
-                        readonly
-                        allow-half
-                        :size="12"
-                        :color="active === index ? '#000' : '#fff'"
-                    /> -->
-				</div>
-			</div>
-			<div class="legend">
-				<div class="legend-item">
-					<div class="line"></div>
-					<span>当前果园</span>
-				</div>
-				<div class="legend-item">
-					<div class="line white"></div>
-					<span>平均值</span>
-				</div>
-			</div>
-		</div>
-		<div class="box-wrap" v-if="boxList.length">
-			<div class="box-header">
-				<div class="name">
-					<div>天选生态好果</div>
-					<span>{{ boxList[active].title }}</span>
-				</div>
-				<!-- <el-divider class="divider" direction="vertical" /> -->
-				<div class="rate">
-					<up-rate :count="5" readonly size="12" :allowHalf="true" active-color="#FFCF66"
+					<text class="radar-item-text">{{ item.name }}</text>
+					<up-rate :count="5" readonly size="12" :allowHalf="true"
+						:active-color="active === index ? '#000' : '#fff'" v-model="item.score"></up-rate>
+				</view>
+			</view>
+			<view class="legend">
+				<view class="legend-item">
+					<view class="line"></view>
+					<text>当前果园</text>
+				</view>
+				<view class="legend-item">
+					<view class="line white"></view>
+					<text>平均值</text>
+				</view>
+			</view>
+		</view>
+		<view class="box-wrap" v-if="boxList.length">
+			<view class="box-header">
+				<view class="name">
+					<view class="name-text">天选生态好果</view>
+					<text class="sub-text">{{ boxList[active].title }}</text>
+				</view>
+				<view class="title-line"></view>
+				<!-- <el-viewider class="viewider" direction="vertical" /> -->
+				<view class="rate">
+					<up-rate :count="5" readonly size="18" :allowHalf="true" active-color="#FFCF66"
 						v-model="boxList[active].score"></up-rate>
 					<!-- <rate v-model="boxList[active].score" readonly allow-half :size="18" color="#FFCF66" /> -->
-				</div>
-			</div>
-			<div class="text">
+				</view>
+			</view>
+			<view class="text">
 				{{ boxList[active].text }}
-			</div>
-			<div class="btn" @click="handleShow">查看评分方法</div>
-		</div>
-	</div>
+			</view>
+			<view class="btn" @click="handleShowTwo(boxList[active].name)">查看评分方法</view>
+		</view>
+	</view>
 </template>
 
 <script setup>
-	import {
-		ref,
-		watch
-	} from "vue";
-
-	const envScore = ref(4.5)
-
-	const boxList = ref([{
-			"name": "生境",
-			"score": 4.6,
-			"scoreAvg": 4.1,
-			"text": "果园周边林地覆盖率超过65%,依托从化优越的生态屏障,森林环抱,山水相依。林地能调温、锁湿、防风,附近还有水田水塘维持空气湿润,适宜益虫繁衍,减少农药用量,果实干净饱满。靠近流溪河与森林公园,微气候温和,挂果稳定,果味清甜中带有山林的自然清香。",
-			"title": "生态优美,糖高质佳",
-			"style": {
-				"top": "-2px",
-				"left": "calc(50% - 112px / 2)"
-			}
-		},
-		{
-			"name": "地理区位",
-			"score": 5,
-			"scoreAvg": 4,
-			"text": "果园位于丘陵地带,地形南北通透,北靠天堂顶山脉可挡寒风,南向开阔利于湿润气流进入,东高西低,自然排湿。气流顺畅、湿度适中,病虫害更少,果树少受极端天气干扰,果子风味纯净、口感更清透,是“天生好地”。",
-			"title": "风水优良,病少质高",
-			"style": {
-				"top": "50px",
-				"right": "8px"
-			}
-		},
-		{
-			"name": "光照",
-			"score": 4.4,
-			"scoreAvg": 3.7,
-			"text": "从化地处亚热带,日照时间充足,果园位于缓坡地带,朝向合理、采光均匀,年有效日照达1760小时以上。果树晒得足,糖分积累稳定,不仅甜度更均衡,还能让果形饱满、果皮颜色亮丽,卖相和口感都更上一层",
-			"title": "光足糖稳,果甜爽脆",
-			"style": {
-				"top": "172px",
-				"right": "30px"
-			}
-		},
-		{
-			"name": "土壤",
-			"score": 5,
-			"scoreAvg": 4.2,
-			"text": "果园以砖红壤为主,富含铁铝、结构稳定,保水保肥能力强。结合从化常年湿润的气候与有机肥培育,形成良好的微生物环境。土壤既能养根,也能稳稳供应果树一季所需,确保关键生长期营养不断,果实香气浓、甜度深,有层次。",
-			"title": "壤厚养足,香甜有底",
-			"style": {
-				"top": "172px",
-				"left": "30px"
-			}
-		},
-		{
-			"name": "水源",
-			"score": 4,
-			"scoreAvg": 3.9,
-			"text": "果园临近天然水系如流溪河及温泉支流,水质清澈、重金属与氨氮含量低,生态系统稳定。这样的好水养土更养树,根系发达、吸收均匀,果树更强健,果实清甜回甘,吃得安心又放心。",
-			"title": "水源纯净,甜润鲜明低",
-			"style": {
-				"top": "50px",
-				"left": "8px"
-			}
-		}
-	]);
-
-
-	const active = ref(0);
-	const handleActive = (index) => {
-		active.value = index;
-	};
-	const radarList = ref([{
-			name: "生境",
-			style: {
-				top: "-2px",
-				left: "calc(50% - 112px / 2)",
-			},
-		},
-		{
-			name: "光照",
-			style: {
-				top: "50px",
-				right: "8px",
-			},
-		},
-		{
-			name: "水源",
-			style: {
-				top: "172px",
-				right: "30px",
-			},
-		},
-		{
-			name: "土壤",
-			style: {
-				top: "172px",
-				left: "30px",
-			},
-		},
-		{
-			name: "风水",
-			style: {
-				top: "50px",
-				left: "8px",
-			},
-		},
-	]);
-
-	const handleShow = () => {};
-
-	const chartData = {
-		categories: ["维度1", "维度2", "维度3", "维度4", "维度5"],
-		series: [{
-				name: "成交量1",
-				data: [4, 5,4.4, 5, 4.6]
-			},
-			{
-				name: "成交量2",
-				data: [3.9, 4.2, 3.7, 4, 4.1]
-			}
-		]
-	}
-	const opts = {
-		color: ["#FFCF66", "#FFFFFF"],
-		padding: [0, 5, 5, 5],
-		dataLabel: false,
-		enableScroll: false,
-		legend: {
-			show: false,
-		},
-		extra: {
-			radar: {
-				gridType: "radar",
-				gridColor: "#afbdc6",
-				gridCount: 3,
-				opacity: 0.2,
-				max: 5,
-				labelShow: false,
-				border: true
-			}
-		}
+import { ref, watch, onMounted, onUnmounted } from "vue";
+import HOME from '@/api/home.js'
+import { onLoad } from '@dcloudio/uni-app'
+
+const props = defineProps({
+  baseData: {
+    type: Object,
+    defalut: {}
+  },
+  activeIndex: {
+	  type: Number,
+	  defalut: 0,
+  }
+})
+
+const envScore = ref(3)
+let autoClickTimer = null; // 自动点击定时器
+let lastUserClickTime = 0; // 记录用户最后一次点击时间
+
+watch(() => props.baseData, (newValue) => {
+  envScore.value = newValue.envScore
+  getData(newValue)
+})
+
+watch(() => props.activeIndex, (newValue) => {
+	if (newValue === 2) {
+		startAutoClick();
+	} else {
+		stopAutoClick();
 	}
+})
+
+const emit = defineEmits(["handleShow"]);
+const handleShowTwo = (name) => {
+    emit("handleShow", name);
+};
+
+const boxList = ref([]);
+const active = ref(0);
+
+// 处理点击事件
+const handleActive = (index) => {
+  active.value = index;
+  lastUserClickTime = Date.now(); // 更新用户最后点击时间
+  resetAutoClickTimer(); // 重置自动点击计时器
+}
+
+// 开始自动点击
+const startAutoClick = () => {
+  // 先清除已有定时器
+  stopAutoClick();
+  autoClickTimer = setInterval(() => {
+    // 计算下一个要激活的索引
+    const nextIndex = (active.value + 1) % boxList.value.length;
+    active.value = nextIndex;
+  }, 5000); // 每5秒执行一次
+}
+
+// 停止自动点击
+const stopAutoClick = () => {
+  if (autoClickTimer) {
+    clearInterval(autoClickTimer);
+    autoClickTimer = null;
+  }
+}
+
+// 重置自动点击计时器
+const resetAutoClickTimer = () => {
+  stopAutoClick();
+  startAutoClick();
+}
+
+// 组件挂载时启动自动点击
+onMounted(() => {
+  // startAutoClick();
+})
+
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  stopAutoClick();
+})
+
+defineExpose({stopAutoClick, startAutoClick})
+
+const getData = (data) => {
+  if (data.envDataItems.length < 0) return;
+  const list = data.envDataItems.map((item, index) => {
+    return {
+      ...item,
+      style: radarList.value[index].style,
+    };
+  });
+  boxList.value = list;
+
+  chartData.value = {
+    categories: ["生境", "光照", "水源", "土壤", "风水"],
+    series: [
+      {
+        name: "当前果园",
+        data: list.map(item => item.score).reverse()
+      },
+      {
+        name: "平均值",
+        data: list.map(item => item.scoreAvg).reverse()
+      }
+    ]
+  }
+  
+  // 数据加载后启动自动点击
+  // resetAutoClickTimer();
+};
+
+
+const radarList = ref([
+  {
+    name: "生境",
+    style: {
+      top: "-2px",
+      left: "calc(50% - 112px / 2)",
+    },
+  },
+  {
+    name: "光照",
+    style: {
+      top: "50px",
+      right: "8px",
+    },
+  },
+  {
+    name: "水源",
+    style: {
+      top: "172px",
+      right: "30px",
+    },
+  },
+  {
+    name: "土壤",
+    style: {
+      top: "172px",
+      left: "30px",
+    },
+  },
+  {
+    name: "风水",
+    style: {
+      top: "50px",
+      left: "8px",
+    },
+  },
+]);
+
+const chartData = ref(null)
+
+const opts = {
+  color: ["#FFCF66", "#FFFFFF"],
+  padding: [0, 5, 5, 5],
+  dataLabel: false,
+  enableScroll: false,
+  legend: {
+    show: false,
+  },
+  extra: {
+    radar: {
+      gridType: "radar",
+      gridColor: "#afbdc6",
+      gridCount: 3,
+      opacity: 0.2,
+      max: 5,
+      labelShow: false,
+      border: true
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -222,8 +249,10 @@
 
 		.charts-box {
 			width: 327px;
-			height: 228px;
+			height: 238px;
 			position: relative;
+			left: 50%;
+			transform: translateX(-50%);
 			z-index: 3;
 		}
 
@@ -246,7 +275,7 @@
 				display: flex;
 				align-items: center;
 
-				span {
+				.score-text {
 					margin-right: 6px;
 				}
 			}
@@ -260,10 +289,11 @@
 						color: inherit;
 					}
 				}
+
 				.chart-bg {
 					position: absolute;
 					z-index: 2;
-					top: 10px;
+					top: 12px;
 					left: 50%;
 					transform: translateX(-50%);
 					background: rgba(0, 0, 0, 0.2);
@@ -316,7 +346,7 @@
 							}
 						}
 
-						span {
+						.radar-item-text {
 							margin-right: 4px;
 						}
 					}
@@ -367,19 +397,22 @@
 					font-family: "jiangxizhuokai";
 
 					.name {
-						div {
+						.name-text {
 							font-family: "jiangxizhuokai";
 							color: #ffcf66;
 							letter-spacing: 5px;
 						}
 
-						span {
+						.sub-text {
 							font-size: 11px;
 						}
 					}
 
-					.divider {
+					.title-line {
+						margin: 0 24rpx;
+						width: 2rpx;
 						height: 26px;
+						background: rgba(255, 255, 255, 0.3);
 					}
 				}
 

+ 239 - 225
pages/tabBar/home/home.vue

@@ -10,6 +10,7 @@
 			    id="mapId"
 			    :latitude="latitude"
 			    :longitude="longitude"
+				:scale="scale"
 			    @markertap="onMarkerTap"
 			    @callouttap="onCalloutTap"
 			    @labeltap="onLabelTap"
@@ -34,66 +35,13 @@
 						全部
 					</view>
 				</view>
-				<view class="item-type">
-					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
-					<view class="type-text">
-						龙眼
-					</view>
-				</view>
-				<view class="item-type">
-					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
-					<view class="type-text">
-						葡萄
-					</view>
-				</view>
-				<view class="item-type">
-					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
-					<view class="type-text">
-						水蜜桃
-					</view>
-				</view>
-				<view class="item-type">
-					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
-					<view class="type-text">
-						龙眼
-					</view>
-				</view>
-				<view class="item-type">
-					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
-					<view class="type-text">
-						葡萄
-					</view>
-				</view>
-				<view class="item-type">
-					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
-					<view class="type-text">
-						葡萄1
-					</view>
-				</view>
-				<view class="item-type">
-					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
-					<view class="type-text">
-						水蜜桃2
-					</view>
-				</view>
-				<view class="item-type">
-					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
-					<view class="type-text">
-						葡萄
-					</view>
-				</view>
-				<view class="item-type">
-					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
-					<view class="type-text">
-						水蜜桃
-					</view>
-				</view>
-				<view class="item-type">
-					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
+				<view class="item-type" v-for="(item, index) in typeList" :key="index">
+					<image class="type-img" :src="item.image" alt="" />
 					<view class="type-text">
-						龙眼
+						{{item.name}}
 					</view>
 				</view>
+				
 			</up-scroll-list>
 		</view>
 		<!-- 好味热卖 -->
@@ -108,58 +56,41 @@
 					<view class="title-l">
 						有味果园
 					</view>
-					<view class="title-btn">
+					<view class="title-btn" @click="toPage('gardenList')">
 						查看全部<up-icon size="10" name="arrow-right"></up-icon>
 					</view>
 				</view>
 				<view class="garden-list">
-					<view class="garden-item" @click="toPage('gardenItem')">
-						<view class="garden-l">
-							<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
-							<text class="img-text">无人机实拍视频</text>
-						</view>
-						<view class="garden-r">
-							<view class="garden-title">
-								从化荔枝博览园
-							</view>
-							<view class="garden-info">
-								品种:荔枝(井岗红糯、巨美人)
-							</view>
-							<view class="garden-info">
-								位置:广州市从化区
-							</view>
-							<view class="garden-btn-group">
-								<view class="btn-second">
-									有味指数
-									<text>4.5分</text>
-								</view>
-								<view class="btn-primary">
-									溯源报告
-								</view>
-							</view>
-						</view>
-					</view>
-					<view class="garden-item">
+					<view
+						class="garden-item"
+						v-for="farm in gardenList"
+						:key="farm.farmId || farm.id"
+						@click="goGardenItem(farm)"
+					>
 						<view class="garden-l">
-							<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
+							<image
+								class="garden-img"
+								:src="farm.img || `${config.BASIC_IMG}home/garden.png`"
+								mode=""
+							></image>
 							<text class="img-text">无人机实拍视频</text>
 						</view>
 						<view class="garden-r">
 							<view class="garden-title">
-								从化荔枝博览园
+								{{ farm.name }}
 							</view>
 							<view class="garden-info">
-								品种:荔枝(井岗红糯、巨美人
+								品种:荔枝({{ farm.pz }})
 							</view>
 							<view class="garden-info">
-								位置:广州市从化区
+								位置:{{ (farm.cityName + farm.countyName) || '—' }}
 							</view>
 							<view class="garden-btn-group">
 								<view class="btn-second">
 									有味指数
-									<text>4.5分</text>
+									<text>{{ farm.envScore || '—' }}分</text>
 								</view>
-								<view class="btn-primary">
+								<view class="btn-primary" @click.stop="goSourceReport(farm)">
 									溯源报告
 								</view>
 							</view>
@@ -174,165 +105,248 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import config from "@/api/config.js"
+import HOME from '@/api/home'
 import hotComponentVue from './hotComponent.vue'
 
-
 const typeSearch = ref(null)
  
- function toPage(path) {
-	 uni.navigateTo({
-	 	url: `/pages/tabBar/home/subPages/${path}`
-	 });
- }
- 
- 
- const latitude = ref(23.099994)
- const longitude = ref(113.324520)
- const markers = ref([])
- const includePoints = ref([])
- const mapCtx = ref(null)
- const img = ref('../../../static/map/point.png')
- 
- onMounted(async () => {
-   // #ifdef MP-WEIXIN
-   mapCtx.value = uni.createMapContext('mapId')
-   
-   mapCtx.value.on('markerClusterClick', res => {
-     console.log('markerClusterClick', res)
-   })
-   
-   bindEvent()
-   // #endif
- })
- 
- const bindEvent = () => {
-   // #ifdef MP-WEIXIN
-   mapCtx.value.initMarkerCluster({
-     enableDefaultStyle: false,
-     zoomOnClick: true,
-     gridSize: 60,
-     complete(res) {
-       console.log('initMarkerCluster', res)
-     }
-   })
-   
-   addMarkers()
-   
-   mapCtx.value.on('markerClusterCreate', res => {
-     console.log('clusterCreate', res)
-     const clusters = res.clusters
-     const newMarkers = clusters.map(cluster => {
-       const { center, clusterId, markerIds } = cluster
-       return {
-         ...center,
-         width: 0,
-         height: 0,
-         clusterId, // 必须
-         label: {
-           content: markerIds.length + '',
-           fontSize: 20,
-           width: 30,
-           height: 30,
-           bgColor: '#FFCB3C',
-           borderRadius: 30,
-           textAlign: 'center',
-           anchorX: 0,
-           anchorY: -30,
-         }
-       }
-     })
-     mapCtx.value.addMarkers({
-       markers: newMarkers,
-       clear: false,
-       complete(res) {
-         console.log('clusterCreate addMarkers', res)
-       }
-     })
-   })
-   // #endif
- }
- 
- const addMarkers = () => {
-   const marker = {
-     id: 1,
-     iconPath: img.value,
-     width: 30,
-     height: 30,
-     joinCluster: true, // 指定了该参数才会参与聚合
-     label: {
-       width: 50,
-       height: 30,
-       borderWidth: 1,
-       borderRadius: 4,
-       bgColor: '#FFCB3C88',
-       anchorX: -26,
-       anchorY: -60,
-       content: ''
-     }
-   }
+function toPage(path) {
+  uni.navigateTo({
+    url: `/pages/tabBar/home/subPages/${path}`
+  });
+}
+
+function goGardenItem(farm) {
+	const id = farm?.farmId
+	uni.navigateTo({
+		url: `/pages/tabBar/home/subPages/gardenItem?id=${id}`
+	});
+}
+
+function goSourceReport(farm) {
+	const id = farm?.farmId
+	uni.navigateTo({
+		url: `/pages/tabBar/home/subPages/sourceReport?id=${id}`
+	});
+}
  
-   const positions = [
-     { latitude: 23.099994, longitude: 113.324520 },
-     { latitude: 23.099994, longitude: 113.322520 },
-     { latitude: 23.099994, longitude: 113.326520 },
-     { latitude: 23.096994, longitude: 113.329520 }
-   ]
-   
-   const newMarkers = []
-   positions.forEach((p, i) => {
-     const newMarker = {...marker, ...p}
-     newMarker.id = i + 1
-     newMarker.label.content = `果园 ${i + 1}`
-     newMarkers.push(newMarker)
-   })
-   
-   // #ifdef MP-WEIXIN
-   mapCtx.value.addMarkers({
-     markers: newMarkers,
-     clear: false,
-     complete(res) {
-       console.log('addMarkers', res)
-     }
-   })
-   // #else
-   // 非微信平台直接设置 markers
-   markers.value = markers.value.concat(newMarkers)
-   // 更新包含的点
-   includePoints.value = markers.value.map(marker => ({
-     latitude: marker.latitude,
-     longitude: marker.longitude
-   }))
-   // #endif
- }
+const latitude = ref(23.099994)
+const longitude = ref(113.324520)
+const markers = ref([])
+const includePoints = ref([])
+const mapCtx = ref(null)
+const mapPoint = '../../../static/map/point.png'
+const farmList = ref([]) // 新增果园列表数据
+const scale = ref(10)
+const gardenList = ref([])
+
+onMounted(async () => {
+  // #ifdef MP-WEIXIN
+  mapCtx.value = uni.createMapContext('mapId')
+  
+  mapCtx.value.on('markerClusterClick', res => {
+    console.log('markerClusterClick', res)
+  })
+  
+  getTypeList()
+  
+  getFarmData()
+  
+  bindEvent()
+  // #endif
+})
+
+const typeList = ref([])
+function getTypeList() {
+	HOME.fetchTypeList().then(({data}) => {
+		typeList.value = data
+	})
+}
  
-const removeMarkers = () => {
+function getFarmData() {
+  HOME.getAllFarm().then(({data}) => {
+     farmList.value = (data || []).sort((a, b) => {
+	  // 优先排序:lighten为true的排前面,然后按recommend排序
+	  if (a.lighten !== b.lighten) return b.lighten ? 1 : -1
+	  return (b.recommend || 0) - (a.recommend || 0)
+	})
+	gardenList.value = data.filter(item => item.recommend !== null)
+    if(farmList.value.length > 0) {
+      // 设置地图中心点为第一个果园的位置
+      const firstPoint = parsePoint(farmList.value[0].point)
+      latitude.value = firstPoint.latitude
+      longitude.value = firstPoint.longitude
+      
+      // 生成标记点
+      generateMarkers(farmList.value)
+    }
+  })
+}
+
+// 解析POINT字符串为经纬度对象
+function parsePoint(pointStr) {
+  if(!pointStr) return {longitude: 113.324520, latitude: 23.099994}
+  
+  const regex = /POINT\(([^ ]+) ([^ ]+)\)/
+  const match = pointStr.match(regex)
+  if(match) {
+    return {
+      longitude: parseFloat(match[1]),
+      latitude: parseFloat(match[2])
+    }
+  }
+  return {longitude: 113.324520, latitude: 23.099994} // 默认值
+}
+
+// 生成标记点数据
+function generateMarkers(farms) {
+  const newMarkers = farms.map((farm, index) => {
+    const point = parsePoint(farm.point)
+    return {
+      id: farm.farmId || index + 1, // 使用farmId作为唯一标识
+      latitude: point.latitude,
+      longitude: point.longitude,
+      iconPath: mapPoint, // 使用果园图标
+      width: 20,
+      height: 20,
+      joinCluster: true,
+      // callout: { // 添加气泡标签
+      //   content: farm.name,
+      //   color: '#000',
+      //   fontSize: 14,
+      //   borderRadius: 4,
+      //   bgColor: '#FFCB3C',
+      //   padding: 8,
+      //   display: 'ALWAYS'
+      // },
+      label: {
+        content: farm.name, // 显示果园名称
+        color: '#000',
+        fontSize: 12,
+        bgColor: '#FFCB3C',
+        borderRadius: 8,
+        padding: 5,
+        anchorX: 0,
+        anchorY: -50,
+        borderWidth: 1,
+        borderColor: '#FFCB3C',
+        textAlign: 'center'
+      },
+      customData: farm // 存储原始数据用于点击事件
+    }
+  })
+  
+  // 更新包含的点位范围
+  includePoints.value = newMarkers.map(marker => ({
+    latitude: marker.latitude,
+    longitude: marker.longitude
+  }))
+  
   // #ifdef MP-WEIXIN
   mapCtx.value.addMarkers({
+    markers: newMarkers,
     clear: true,
-    markers: []
+    complete(res) {
+      console.log('添加标记点完成', res)
+    }
   })
   // #else
-  markers.value = []
+  markers.value = newMarkers
   // #endif
 }
-
+ 
+const bindEvent = () => {
+  // #ifdef MP-WEIXIN
+  mapCtx.value.initMarkerCluster({
+    enableDefaultStyle: false,
+    zoomOnClick: true,
+    gridSize: 40,
+    complete(res) {
+      console.log('initMarkerCluster', res)
+    }
+  })
+  
+  mapCtx.value.on('markerClusterCreate', res => {
+    console.log('clusterCreate', res)
+    const clusters = res.clusters
+    const clusterMarkers = clusters.map(cluster => {
+      // 获取聚合中的第一个果园
+      const firstMarker = farmList.value.find(m => m.farmId === cluster.markerIds[0])
+      return {
+        ...cluster.center,
+        width: 20,
+        height: 20,
+        clusterId: cluster.clusterId,
+		iconPath: mapPoint, // 使用果园图标
+		label: {
+		  content: firstMarker?.name, // 显示果园名称
+		  color: '#000',
+		  fontSize: 12,
+		  bgColor: '#FFCB3C',
+		  borderRadius: 8,
+		  padding: 5,
+		  anchorX: 0,
+		  anchorY: -50,
+		  borderWidth: 1,
+		  borderColor: '#FFCB3C',
+		  textAlign: 'center'
+		},
+        customData: {
+          isCluster: true,
+          markerIds: cluster.markerIds,
+          firstMarkerData: firstMarker?.customData
+        }
+      }
+    })
+    
+    mapCtx.value.addMarkers({
+      markers: clusterMarkers,
+      clear: false,
+      complete(res) {
+      }
+    })
+  })
+  // #endif
+}
+ 
 const onMarkerTap = (e) => {
-  console.log('@@ markertap', e)
+  const markerId = e.detail.markerId
+  const marker = markers.value.find(m => m.id === markerId)
+  if(marker && marker.customData) {
+    console.log('点击了果园:', marker.customData.name)
+    // 可以在这里跳转到果园详情页
+    uni.navigateTo({
+      url: `/pages/tabBar/home/subPages/gardenItem?id=${marker.customData.farmId}`
+    })
+  }
 }
 
 const onCalloutTap = (e) => {
-  console.log('@@ onCalloutTap', e)
+  console.log('点击了气泡:', e)
+  onMarkerTap(e) // 调用相同的处理逻辑
 }
 
 const onLabelTap = (e) => {
-  console.log('@@ labletap', e)
+  console.log('点击了标签:', e)
+  onMarkerTap(e) // 调用相同的处理逻辑
+}
+
+const removeMarkers = () => {
+  // #ifdef MP-WEIXIN
+  mapCtx.value.addMarkers({
+    clear: true,
+    markers: []
+  })
+  // #else
+  markers.value = []
+  // #endif
 }
 </script>
 
 <style lang="scss" scoped>
 	.home-wrap {
 		background-color: #F2F3F5;
-		padding: 0;
+		padding: 0 0 16rpx 0;
 		.home-top {
 			padding: 20rpx 24rpx 0 24rpx;
 			background: linear-gradient(#FFFFFF, rgba(242, 243, 245, 0));
@@ -426,7 +440,7 @@ const onLabelTap = (e) => {
 			padding: 2rpx;
 			border-radius: 16rpx;
 			.garden-content{
-				background: linear-gradient(#fff6d8 4%,  #FFFFFF 28%);
+				background: linear-gradient(#fff6d8 30rpx,  #FFFFFF 120rpx);
 				border-radius: 16rpx;
 				padding: 20rpx;
 				box-sizing: border-box;

+ 10 - 49
pages/tabBar/home/subPages/allGardenMap.vue

@@ -1,60 +1,21 @@
 <template>
 	<view>
-		<web-view src='https://feiniao-mini-h5-dev.sysuimars.cn/youwei/#/gardenMap?userId=91429'
-			@message="handleMapEvent"></web-view>
-			
-			<!-- <web-view src='http://localhost:8081/#/gardenMap?userId=91754&token=034d7cf5-25fc-42d3-993e-460120419e5a'
-				@message="handleMapEvent" @onPostMessage="handleHashChange"></web-view> -->
+		<web-view :src="webViewUrl"></web-view>
 	</view>
 </template>
 
 <script setup>
-import config from "@/api/config.js"
 	import {
-		onMounted
+		onMounted, ref
 	} from 'vue';
+	const userInfo = uni.getStorageSync('userInfo')
 
-	const handleBack = () => {
-		uni.navigateBack();
-	};
-	
-	function handleHashChange(e) {
-		console.log('handleHashChange', e)
-	    const hash = e.detail.url.split("#")[1];
-	    if (hash && hash.startsWith("jump=")) {
-	      const path = decodeURIComponent(hash.split("=")[1]);
-	      uni.navigateTo({
-	        url: path, // 如 "/pages/home/home"
-	      });
-	    }
-	  }
-	
-	function  randomIndexName(){
-		const randomNum = Math.floor(Math.random() * 10) + 1; // 生成1到10之间的随机数
-		let v = new Date().getTime()
-		let filename = `index${randomNum}.html?v=${v}`
-		return filename;
-	  }
+	// 创建响应式的webview URL
+	const webViewUrl = ref('')
 
-	const handleMapEvent = (e) => {
-		console.log('地图点击坐标:', e);
-		const data = e.detail.data;
-		switch (data.type) {
-			case 'map-click':
-				console.log('地图点击坐标:', data.lat, data.lng);
-				break;
-			case 'marker-click':
-				console.log('标记点点击:', data.markerId);
-				break;
-		}
-	}
-	// 动态注入 JS 监听(兼容性方案)
-	// onMounted(() => {
-	//   window.addEventListener('message', (e) => {
-	// 	  alert('eee', e.data)
-	//     if (e.data && e.data.type === 'from-h5') {
-	//       console.log('H5页面消息2222:', e.data.payload);
-	//     }
-	//   });
-	// });
+	onMounted(() => {
+		// webViewUrl.value =
+			// `https://feiniao-mini-h5-dev.sysuimars.cn/youwei/#/allGardenMap?userId=${userInfo.id}&token=${userInfo.token}`
+		webViewUrl.value = "http://localhost:8081/#/allGardenMap?userId=91754&token=034d7cf5-25fc-42d3-993e-460120419e5a"
+	})
 </script>

+ 22 - 8
pages/tabBar/home/subPages/gardenItem.vue

@@ -15,10 +15,10 @@
 				</view>
 			</view>
 			<view class="swipe-item">
-				<video class="video-wrap" src="https://birdseye-img.sysuimars.com/temp/5-25lby.mp4" controls></video>
+				<source-report-vue :showStep="false"></source-report-vue>
 			</view>
 		</view>
-		<l-floating-panel v-model:height="panelHeight" :anchors="anchors" :defaultAnchor="2" :content-draggable="false">
+		<l-floating-panel v-model:height="panelHeight" @heightChange="changePanel" :anchors="anchors" :defaultAnchor="2" :content-draggable="false">
 			<view class="panel-content" ref="scrollViewRef">
 				<view class="panel-title">
 					<view class="title-l">
@@ -40,7 +40,11 @@
 				</view>
 				<view class="garden-home" v-show="activeMenu === 0">
 					<view class="panel-video">
-						<video class="video-dom" src="https://birdseye-img.sysuimars.com/temp/5-25lby.mp4" controls></video>
+						<!-- <video class="video-dom" src="https://birdseye-img.sysuimars.com/temp/5-25lby.mp4" controls></video> -->
+						
+						<video src="https://birdseye-img.sysuimars.com/temp/5-25lby.mp4" object-fit="cover" :show-fullscreen-btn="false"
+							:autoplay="true" class="video-dom" loop muted controls>
+						</video>
 					</view>
 					<!-- 果园热卖 -->
 					<hot-component-vue :isGardeItem="true"></hot-component-vue>
@@ -146,6 +150,7 @@
 	} from 'vue'
 	import config from "@/api/config.js"
 	import hotComponentVue from '../hotComponent.vue'
+	import sourceReportVue from './sourceReport.vue'
 
 
 	const typeSearch = ref(null)
@@ -159,11 +164,15 @@
 		Math.round(0.86 * windowHeight),
 	];
 	const panelHeight = ref(anchors[2]);
-
-	const myVideo = ref(null);
-	const onVideoReady = () => {
-		myVideo.value.play();
-	};
+	
+	function changePanel({height}) {
+		if (height === 50) {
+			uni.navigateTo({
+				url: "/pages/tabBar/home/subPages/sourceReport"
+			})
+		}
+		console.log('height',height)
+	}
 	
 	const activeMenu = ref(0)
 	const scrollViewRef = ref(null)
@@ -397,6 +406,11 @@
 				object-fit: cover;
 				border-radius: 10rpx;
 			}
+			::v-deep {
+				.uni-video-video {
+					object-fit: cover !important;
+				}
+			}
 		}
 
 		.discover-content {

+ 176 - 0
pages/tabBar/home/subPages/gardenList.vue

@@ -0,0 +1,176 @@
+<template>
+	<view class="list-page">
+		<view class="garden-list">
+			<view class="garden-item" v-for="farm in gardenList" :key="farm.farmId || farm.id"
+				>
+				<view class="garden-l" v-if="farm.coverVideo">
+					<video :src="farm.coverVideo" :show-progress="false" :show-play-btn="false"
+						:show-center-play-btn="false" object-fit="cover" :show-fullscreen-btn="false"
+						 disablePictureInPicture :autoplay="true" class="video-dom"
+						loop muted>
+					</video>
+				</view>
+				<view class="garden-l" v-else>
+					<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
+					<text class="img-text">无人机实拍视频</text>
+				</view>
+				<view class="garden-r" @click="goGardenItem(farm)">
+					<view class="garden-title">
+						{{ farm.name }}
+					</view>
+					<view class="garden-info">
+						品种:荔枝({{ farm.pz }})
+					</view>
+					<view class="garden-info">
+						位置:{{ (farm.cityName + farm.countyName) || '—' }}
+					</view>
+					<view class="garden-btn-group">
+						<view class="btn-second">
+							有味指数
+							<text>{{ farm.envScore || '—' }}分</text>
+						</view>
+						<view class="btn-primary" @click.stop="goSourceReport(farm)">
+							溯源报告
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onMounted,
+		ref
+	} from "vue";
+	import config from "@/api/config.js"
+	import HOME from '@/api/home'
+
+	onMounted(() => {
+		getGardenList()
+	})
+
+	const gardenList = ref([])
+
+	function getGardenList() {
+		HOME.getAllFarm().then(({
+			data
+		}) => {
+			gardenList.value = data.filter(item => item.recommend !== null)
+		})
+	}
+
+	function goGardenItem(farm) {
+		const id = farm?.farmId
+		uni.navigateTo({
+			url: `/pages/tabBar/home/subPages/gardenItem?farmId=${id}`
+		});
+	}
+
+	function goSourceReport(farm) {
+		const id = farm?.farmId
+		uni.navigateTo({
+			url: `/pages/tabBar/home/subPages/sourceReport?farmId=${id}`
+		});
+	}
+</script>
+
+<style lang="scss" scoped>
+	.list-page {
+		padding: 20rpx 40rpx;
+
+		.garden-list {
+			.garden-item {
+				display: flex;
+
+				.garden-l {
+					position: relative;
+
+					.video-dom {
+						width: 234rpx;
+						height: 200rpx;
+						object-fit: cover;
+						border-radius: 10rpx;
+
+						&::-webkit-media-controls-volume-control-container {
+							display: none !important;
+						}
+
+						&::-internal-media-controls-overflow-button {
+							display: none !important;
+						}
+					}
+
+					.garden-img {
+						width: 254rpx;
+						height: 200rpx;
+						object-fit: cover;
+						border-radius: 10rpx;
+					}
+
+					.img-text {
+						position: absolute;
+						left: 0%;
+						top: 0%;
+						background: rgba(0, 0, 0, 0.3);
+						backdrop-filter: 8rpx;
+						border-radius: 10rpx 0 10rpx 0;
+						font-size: 20rpx;
+						color: #FFFFFF;
+						padding: 6rpx 14rpx;
+					}
+				}
+
+				.garden-r {
+					padding-left: 20rpx;
+
+					.garden-title {
+						font-size: 28rpx;
+						line-height: 42rpx;
+						color: #000000;
+						font-weight: 600;
+						padding-bottom: 10rpx;
+					}
+
+					.garden-info {
+						color: rgba(0, 0, 0, 0.5);
+						font-size: 24rpx;
+						line-height: 36rpx;
+					}
+
+					.garden-btn-group {
+						padding-top: 20rpx;
+						display: flex;
+						align-items: center;
+
+						.btn-second {
+							padding: 0 20rpx;
+							border-radius: 40rpx;
+							font-size: 24rpx;
+							color: #C49600;
+							background: rgba(255, 217, 94, 0.2);
+							height: 56rpx;
+							line-height: 56rpx;
+						}
+
+						.btn-primary {
+							padding: 0 20rpx;
+							border-radius: 40rpx;
+							font-size: 24rpx;
+							color: #000000;
+							background: #FFD95E;
+							font-weight: bold;
+							height: 56rpx;
+							line-height: 56rpx;
+						}
+					}
+				}
+			}
+
+			.garden-item+.garden-item {
+				margin-top: 20rpx;
+			}
+		}
+	}
+</style>

+ 17 - 28
pages/tabBar/home/subPages/gardenMap.vue

@@ -1,39 +1,28 @@
 <template>
 	<view>
-		<web-view src="http://localhost:8081/#/gardenMap?point=113.1093017627431,22.574540836684672&userId=91754"
-			@message="handleMapEvent"></web-view>
-
+		<web-view :src="webViewUrl"></web-view>
 	</view>
 </template>
 
 <script setup>
 	import {
-		onMounted
+		onMounted, ref
 	} from 'vue';
+	import { onLoad } from "@dcloudio/uni-app"
+	const userInfo = uni.getStorageSync('userInfo')
 
-	const handleBack = () => {
-		uni.navigateBack();
-	};
-
-	const handleMapEvent = (e) => {
-		const data = e.detail.data;
-		console.log('地图点击坐标:', data);
-		switch (data.type) {
-			case 'map-click':
-				console.log('地图点击坐标:', data.lat, data.lng);
-				break;
-			case 'marker-click':
-				console.log('标记点点击:', data.markerId);
-				break;
+	// 创建响应式的webview URL
+	const webViewUrl = ref('')
+	
+	onLoad(({enterSelectTree}) => {
+		if (enterSelectTree) {
+			// webViewUrl.value =
+			// 	`https://feiniao-mini-h5-dev.sysuimars.cn/youwei/#/gardenMap?userId=${userInfo.id}&token=${userInfo.token}&enterSelectTree=true`
+			webViewUrl.value = "http://localhost:8081/#/gardenMap?userId=91754&token=034d7cf5-25fc-42d3-993e-460120419e5a&enterSelectTree=true"
+		} else {
+			// webViewUrl.value =
+			// 	`https://feiniao-mini-h5-dev.sysuimars.cn/youwei/#/gardenMap?userId=${userInfo.id}&token=${userInfo.token}`
+				webViewUrl.value = "http://localhost:8081/#/gardenMap?userId=91754&token=034d7cf5-25fc-42d3-993e-460120419e5a"
 		}
-	}
-	// 动态注入 JS 监听(兼容性方案)
-	// onMounted(() => {
-	//   window.addEventListener('message', (e) => {
-	// 	  alert('eee', e.data)
-	//     if (e.data && e.data.type === 'from-h5') {
-	//       console.log('H5页面消息2222:', e.data.payload);
-	//     }
-	//   });
-	// });
+	})
 </script>

+ 280 - 58
pages/tabBar/home/subPages/sourceReport.vue

@@ -2,8 +2,7 @@
 	<view class="source-report">
 		<view class="source-content">
 			<view class="source-box">
-
-				<view class="steps">
+				<view class="steps" v-if="showStep">
 					<view class="steps-list">
 						<view class="steps-item" :class="{ active: activeIndex == index }"
 							v-for="(item, index) in steps" :key="index">
@@ -13,64 +12,81 @@
 					</view>
 				</view>
 				<!-- 位置 -->
-				<view class="position-wrap">
+				<view class="position-wrap" v-if="farmDetail?.name">
 					<view class="address">
 						<image class="location-img" :src="`${config.BASIC_IMG}home/adress-icon.png`" mode=""></image>
-						<span>荔枝博览园(江埔街道江埔街环市东路1280号广州市从化区)</span>
+						<text>{{farmDetail.name}}({{farmDetail.address + farmDetail.district}})</text>
 					</view>
 				</view>
 				<!-- 关闭,下一页 -->
 				<view class="footer-btn">
 					<div class="btn-item pre" v-show="activeIndex!==0" @click="hanldePrev">上一页</div>
-					<view class="btn-item close" @click="goBack">关闭</view>
+					<view class="btn-item close" :class="{'isLeft': activeIndex===0, 'isRight': activeIndex===5}" @click="goBack">关闭</view>
 					<view class="btn-item next" v-show="activeIndex!==5" @click="hanldeNext">下一页</view>
 				</view>
 			</view>
 		</view>
 		<view class="report-info">
-			<swiper ref="swiperRef" :indicator-dots="true" :autoplay="false" :interval="3000" style="height: 100vh"
-				:current="activeIndex">
+			<swiper ref="swiperRef" :indicator-dots="true" :autoplay="false" style="height: 100vh"
+				:current="activeIndex" @change="handleSwiperChange">
 				<swiper-item>
 					<view class="item-content">
-
-						<video v-if="url" :src="url" object-fit="cover" ref="myVideo" :show-fullscreen-btn="false"
+						<video v-if="videoUrl" :src="videoUrl" object-fit="cover" ref="myVideo" :show-fullscreen-btn="false"
 							:autoplay="true" class="mp4" loop muted controls @canplay="onVideoReady">
 						</video>
-						<view class="mp4-title">
-							<span>在线赏园</span>
+						<view class="mp4-title" :class="{'down': !showStep}">
+							<text class="title-text">在线赏园</text>
 							<view class="text">科学定义好吃,数字评估生态</view>
 						</view>
 					</view>
 				</swiper-item>
 				<swiper-item>
-					<view class="item-content">
+					<view class="item-content" v-if="reportData?.farmTeamImg">
 						<up-image class="img-dom" width="100%" height="100vh"
-							src="https://birdseye-img-ali-cdn.sysuimars.com//farmTeamImg/1749100102865.png"
+							:src="reportData.farmTeamImg"
 							mode="scaleToFill"></up-image>
 					</view>
 				</swiper-item>
 				<swiper-item>
 					<view class="item-content">
-						<banner-two-vue></banner-two-vue>
+						<banner-two-vue ref="bannerTwoRef" :baseData="reportData" :activeIndex="activeIndex" @handleShow="handleShowPopup"></banner-two-vue>
 					</view>
 				</swiper-item>
 				<swiper-item>
 					<view class="item-content">
-						<banner-three-vue></banner-three-vue>
+						<banner-three-vue :baseData="reportData"></banner-three-vue>
 					</view>
 				</swiper-item>
 				<swiper-item>
 					<view class="item-content">
-						<banner-four-vue></banner-four-vue>
+						<banner-four-vue :baseData="reportData"></banner-four-vue>
 					</view>
 				</swiper-item>
 				<swiper-item>
 					<view class="item-content">
-						<banner-five-vue></banner-five-vue>
+						<banner-five-vue :baseData="reportData"></banner-five-vue>
 					</view>
 				</swiper-item>
 			</swiper>
 		</view>
+		
+		<!-- 评分方法 -->
+		<up-popup :show="showPopup" :round="12" mode="center" :closeable="true" bgCoor="transparent"  @close="closePopup">
+			<view class="banner-popup">
+				<view class="popup-title">评分方法</view>
+				<view class="popup-list popup-two">
+					<view class="popup-item">
+						<view class="label">
+							
+							<view><text class="name">{{ ruleName }}</text>{{ ruleObj[ruleName]?.text1 }}</view>
+						</view>
+						<view class="label">
+							<view>{{ ruleObj[ruleName]?.text2 }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</up-popup>
 	</view>
 </template>
 
@@ -81,13 +97,23 @@
 	import bannerFourVue from '../components/bannerFour.vue';
 	import bannerFiveVue from '../components/bannerFive.vue';
 	import {
+		onMounted,
 		ref,
 	} from 'vue';
-
+	import { onLoad } from '@dcloudio/uni-app'
+	import HOME from '@/api/home.js'
+	
+	const props = defineProps({
+		showStep: {
+			type: Boolean,
+			default: true,
+		}
+	})
 
 	const activeIndex = ref(0)
 	const steps = ["美景", "果园", "环境", "气象", "农事", "生态"];
-	const url = ref("https://birdseye-img-ali-cdn.sysuimars.com//fineView/1749132292921.mp4")
+	const videoUrl = ref(null)
+	const farmDetail = ref(null)
 
 	const myVideo = ref(null);
 	const onVideoReady = () => {
@@ -95,6 +121,10 @@
 	};
 
 	const swiperRef = ref(null);
+	
+	function handleSwiperChange(e) {
+		activeIndex.value = e.detail.current
+	}
 
 	function hanldeNext() {
 		activeIndex.value++
@@ -107,6 +137,55 @@
 	function goBack() {
 		uni.navigateBack()
 	}
+	
+	const currentFarmId = ref(null)
+	onLoad(({farmId})=>{
+		currentFarmId.value = farmId||766
+		getFarmInfo()
+		getReportData()
+		getScoreRule()
+	})
+	
+	const tableData = ref([])
+	const reportData = ref(null)
+	const getReportData = async () => {
+		// 溯源报告
+		const { data } = await HOME.getFarmReport({farmId: currentFarmId.value})
+		reportData.value = data
+		 videoUrl.value = data.fineView;
+		 tableData.value = data.farmWorkAuths.filter(
+		     (item) => item.periodName === data.periodList[0]
+		 );
+	};
+	
+	const getFarmInfo = () => {
+		HOME.fetchFarmInfo({id: currentFarmId.value}).then(({data}) => {
+			farmDetail.value = data
+		})
+	}
+	
+	// 评分方法弹窗
+	const showPopup = ref(false)
+	const bannerTwoRef = ref(null)
+	
+	const ruleName = ref("生境");
+	const handleShowPopup = (name) => {
+	    ruleName.value = name;
+	    showPopup.value = true;
+		bannerTwoRef.value.stopAutoClick()
+	};
+	
+	function closePopup() {
+		showPopup.value = false;
+		bannerTwoRef.value.startAutoClick()
+	}
+	
+	const ruleObj = ref({});
+	const getScoreRule = () => {
+	  HOME.getScoreRule().then(({ data }) => {
+	    ruleObj.value = data;
+	  });
+	};
 </script>
 
 <style lang="scss" scoped>
@@ -116,6 +195,7 @@
 		overflow: hidden;
 		position: relative;
 		color: #fff;
+		font-size: 28rpx;
 
 		.source-content {
 			position: absolute;
@@ -133,39 +213,39 @@
 			.steps {
 				padding: 24rpx 8rpx;
 				width: 100%;
-				font-size: 13px;
+				font-size: 26rpx;
 				box-sizing: border-box;
 
 				.line {
 					background: rgba(255, 255, 255, 0.18);
 					width: 100%;
-					height: 1.5px;
+					height: 3rpx;
 				}
 
 				.steps-list {
 					display: flex;
 					justify-content: space-between;
 					width: 100%;
-					border-bottom: 1.5px solid rgba(255, 255, 255, 0.18);
+					border-bottom: 3rpx solid rgba(255, 255, 255, 0.18);
 				}
 
 				.steps-item {
 					flex: 1;
-					margin-bottom: -4.5px;
+					margin-bottom: -9rpx;
 
 					.name {
 						text-align: center;
 						background: #035197;
-						border-radius: 20px;
-						padding: 3px;
-						width: 54px;
-						margin: 0 auto 8px;
-						font-size: 12px;
+						border-radius: 40rpx;
+						padding: 6rpx;
+						width: 108rpx;
+						margin: 0 auto 16rpx;
+						font-size: 24rpx;
 					}
 
 					.dot {
-						width: 8px;
-						height: 8px;
+						width: 16rpx;
+						height: 16rpx;
 						background: rgba(0, 0, 0, 0.5);
 						border-radius: 50%;
 						margin: auto;
@@ -174,10 +254,10 @@
 						&::before {
 							content: "";
 							position: absolute;
-							left: -2px;
-							top: -2px;
-							width: 12px;
-							height: 12px;
+							left: -4rpx;
+							top: -4rpx;
+							width: 24rpx;
+							height: 24rpx;
 							background: rgba(255, 255, 255, 0.3);
 							border-radius: 50%;
 						}
@@ -198,9 +278,9 @@
 			.position-wrap {
 				z-index: 2;
 				position: absolute;
-				bottom: 110px;
-				left: 12px;
-				width: calc(100% - 24px);
+				bottom: 220rpx;
+				left: 24rpx;
+				width: calc(100% - 48rpx);
 				display: flex;
 				flex-direction: column;
 				align-items: center;
@@ -208,19 +288,19 @@
 				.address {
 					width: 100%;
 					color: #f0d09c;
-					padding: 10px 0;
+					padding: 20rpx 0;
 					background: rgba(0, 0, 0, 0.5);
-					border-radius: 5px;
+					border-radius: 10rpx;
 					box-sizing: border-box;
 					display: flex;
-					font-size: 13px;
+					font-size: 26rpx;
 					align-items: center;
 					justify-content: center;
 
 					.location-img {
-						width: 17px;
-						height: 19px;
-						margin-right: 4px;
+						width: 34rpx;
+						height: 38rpx;
+						margin-right: 8rpx;
 					}
 				}
 			}
@@ -228,7 +308,7 @@
 			.footer-btn {
 				position: absolute;
 				z-index: 2;
-				padding: 0 12px;
+				padding: 0 24rpx;
 				width: 100%;
 				box-sizing: border-box;
 				display: flex;
@@ -236,16 +316,16 @@
 
 				left: auto;
 				right: 0;
-				bottom: 86px;
+				bottom: 172rpx;
 
 				.btn-item {
-					font-size: 14px;
+					font-size: 28rpx;
 					color: #FFFFFF;
-					padding: 7px 18px;
-					width: 80px;
+					padding: 14rpx 36rpx;
+					width: 160rpx;
 					box-sizing: border-box;
-					border-radius: 25px;
-					border: 1px solid rgba(255, 255, 255, 0.3);
+					border-radius: 50rpx;
+					border: 2rpx solid rgba(255, 255, 255, 0.3);
 					text-align: center;
 					font-weight: 500;
 					background: rgba(0, 0, 0, 0.6);
@@ -254,19 +334,28 @@
 
 				.pre {
 					position: absolute;
-					left: 12px;
+					left: 24rpx;
 				}
 
 				.close {
 					position: absolute;
 					left: 50%;
 					transform: translateX(-50%);
+					&.isLeft {
+						left: 24rpx;
+						transform: none;
+					}
+					&.isRight {
+						left: auto;
+						right: 24rpx;
+						transform: none;
+					}
 				}
 
 				.next {
 					position: absolute;
 					left: auto;
-					right: 12px;
+					right: 24rpx;
 				}
 
 				.save {
@@ -294,20 +383,153 @@
 
 				.mp4-title {
 					position: absolute;
-					top: 62px;
-					left: 24px;
-					font-size: 45px;
+					top: 124rpx;
+					left: 48rpx;
+					font-size: 90rpx;
+					&.down {
+						top: 160rpx;
+					}
 
-					span {
+					.title-text {
 						font-family: "jiangxizhuokai";
 					}
 
 					.text {
-						margin-top: 4px;
-						font-size: 16px;
+						margin-top: 8rpx;
+						font-size: 32rpx;
 					}
 				}
 			}
 		}
 	}
+</style>
+
+
+<style lang="scss">
+	.banner-popup {
+		padding: 26rpx 32rpx 50rpx 32rpx;
+		color: #000;
+		width: 90vw;
+		box-sizing: border-box;
+		background: #fff;
+		border-radius: 24rpx;
+		margin: 0 auto;
+
+		.box-item {
+			.box-title {
+				display: flex;
+				align-items: center;
+				color: #000;
+				font-size: 30rpx;
+
+				// img {
+				// 	width: 30rpx;
+				// 	height: 18rpx;
+				// 	margin-right: 12rpx;
+				// }
+
+				.text {
+					width: 100%;
+					font-family: "jiangxizhuokai";
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+
+					.more {
+						color: #bbbbbb;
+						display: flex;
+						align-items: center;
+						font-size: 26rpx;
+					}
+				}
+			}
+
+			.tabs {
+				margin-top: 20rpx;
+				display: flex;
+				justify-content: center;
+				font-size: 26rpx;
+				color: #666666;
+
+				.tabs-item {
+					padding: 6rpx 46rpx;
+					border-radius: 40rpx;
+					background: rgba(0, 0, 0, 0.09);
+
+					&.active {
+						color: #fff;
+						background-image: linear-gradient(90deg, #ffd887, #ed9e1e);
+					}
+				}
+
+				.tabs-item+.tabs-item {
+					margin-left: 40rpx;
+				}
+			}
+		}
+
+		.popup-title {
+			font-family: "PangMenZhengDao";
+			font-size: 48rpx;
+			margin: 32rpx 0;
+			text-align: center;
+		}
+
+		.popup-list {
+			.popup-item {
+				position: relative;
+				margin-left: 26rpx;
+
+				&::before {
+					content: "";
+					position: absolute;
+					left: -26rpx;
+					top: 20rpx;
+					width: 10rpx;
+					height: 10rpx;
+					border-radius: 50%;
+					background: #999999;
+					margin-right: 10rpx;
+				}
+
+				.label {
+					font-size: 36rpx;
+
+					.name {
+						margin-right: 8rpx;
+					}
+
+					.num {
+						color: #ff8400;
+					}
+				}
+
+				.desc {
+					margin-top: 8rpx;
+					color: #999999;
+				}
+			}
+
+			.popup-item+.popup-item {
+				margin-top: 32rpx;
+			}
+		}
+
+		.popup-two {
+			.popup-item {
+				.label {
+					font-size: 28rpx;
+					color: #999999;
+
+					.name {
+						color: #000;
+					}
+				}
+
+				.label+.label {
+					margin-top: 24rpx;
+				}
+			}
+		}
+	}
 </style>