feiniao-youwei-uniapp/pages/tabBar/home/components/bannerFour.vue

<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>
</template>

<script setup>
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 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 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
              }
            ]
          }
</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;
				}
                .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>