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" 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";

	const props = defineProps({
		baseData: {
			type: Object,
			defalut: {},
		},
	});

	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 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;
					}

					.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;
							}
						}
					}
				}
			}
		}
	}
</style>