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

<template>
	<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" /> -->
			</view>
		</view>
		<view class="chart-wrap">
			<view class="chart-bg">
			</view>
			<!-- <radar-chart class="radar-wrap" :pieData="boxList"></radar-chart> -->
			<view class="charts-box" v-if="chartData">
				<qiun-data-charts type="radar" :opts="opts" :chartData="chartData" />
			</view>
			<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)">
					<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" /> -->
				</view>
			</view>
			<view class="text">
				{{ boxList[active].text }}
			</view>
			<view class="btn" @click="handleShowTwo(boxList[active].name)">查看评分方法</view>
		</view>
	</view>
</template>

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

		.charts-box {
			width: 327px;
			height: 238px;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			z-index: 3;
		}

		&.banner-two {
			background-image: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/report-banner-2.png");
			padding: 60px 14px;
			box-sizing: border-box;

			.score {
				color: #ff8400;
				font-size: 15px;
				font-family: "jiangxizhuokai";
				background: rgba(255, 255, 255, 0.4);
				border: 1px solid rgba(255, 255, 255, 0.55);
				border-radius: 5px;
				padding: 8px 16px;
				width: fit-content;
				box-sizing: border-box;
				margin: 12px 0 32px 0;
				display: flex;
				align-items: center;

				.score-text {
					margin-right: 6px;
				}
			}

			.chart-wrap {
				width: 100%;
				position: relative;

				::v-deep {
					.van-rate__icon {
						color: inherit;
					}
				}

				.chart-bg {
					position: absolute;
					z-index: 2;
					top: 12px;
					left: 50%;
					transform: translateX(-50%);
					background: rgba(0, 0, 0, 0.2);
					width: 208px;
					height: 208px;
					border-radius: 50%;
				}

				.radar-wrap {
					width: 100%;
					height: 220px;
				}

				.radar-list {
					.radar-item {
						position: absolute;
						z-index: 3;
						top: 0;
						padding: 5px 8px;
						background: rgba(0, 0, 0, 0.3);
						border-radius: 20px;
						font-size: 13px;
						font-family: "jiangxizhuokai";
						display: flex;
						align-items: center;
						border: 1px solid transparent;

						&.active {
							background: #ffcf66;
							border: 1px solid #fff;
							color: #000;

							&::before {
								content: "";
								position: absolute;
								left: -15px;
								background: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/arrow.png") no-repeat center center / 100% 100%;
								width: 13px;
								height: 16px;
								transform: rotate(180deg);
							}

							&::after {
								content: "";
								position: absolute;
								right: -15px;
								background: url("https://birdseye-img.sysuimars.com/youwei-uniapp/home/arrow.png") no-repeat center center / 100% 100%;
								width: 13px;
								height: 16px;
							}
						}

						.radar-item-text {
							margin-right: 4px;
						}
					}
				}

				.legend {
					position: absolute;
					right: 12px;
					top: -5px;
					background: rgba(0, 0, 0, 0.4);
					border-radius: 6px;
					padding: 4px 6px;

					.legend-item {
						display: flex;
						align-items: center;
						font-size: 10px;

						.line {
							background: #ffc33f;
							border-radius: 2px;
							width: 7px;
							height: 3px;
							margin-right: 4px;
						}

						.white {
							background: #fff;
						}
					}
				}
			}

			.box-wrap {
				margin-top: 14px;
				background: rgba(0, 0, 0, 0.3);
				padding: 10px 12px;
				border-radius: 8px;
				border: 1px solid #ffcf66;
				backdrop-filter: blur(2px);

				// min-height: 154px;
				// box-sizing: border-box;
				.box-header {
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: "jiangxizhuokai";

					.name {
						.name-text {
							font-family: "jiangxizhuokai";
							color: #ffcf66;
							letter-spacing: 5px;
						}

						.sub-text {
							font-size: 11px;
						}
					}

					.title-line {
						margin: 0 24rpx;
						width: 2rpx;
						height: 26px;
						background: rgba(255, 255, 255, 0.3);
					}
				}

				.text {
					font-size: 12px;
					margin: 10px 0 5px 0;
				}

				.btn {
					font-size: 11px;
					padding: 7px 12px;
					border-radius: 20px;
					background: rgba(255, 255, 255, 0.3);
					text-align: center;
					width: 90px;
					box-sizing: border-box;
					margin: auto;
				}
			}
		}
	}
</style>