bigDataApp/pages/cb/xy/equip-set/xypesthistoryile.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 40px;">
			<view style="position: fixed;z-index: 100;top: 40px;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="害虫分析"></uni-nav-bar>
			</view>
			<view class="shuju_one">
				<view class="shuju_one_title">
					<view
						class="select-date"
						style="border-radius: 40rpx;"
						@click="showCalendar"
					>
						<text>{{ timeText }}</text>
					</view>
				</view>
				<view class="time-change-range">
					<text>选择对比年份：</text>
					<text class="years-text" @click="changeindex">{{ yearsText }}</text>
				</view>
				<!-- 折线图：md_lst 为 x 轴，pest_data[i] 对应 years_lst[i] 年份数据 -->
				<view v-if="dataloadingtf" class="canvastishi"><text class="dataloading">加载中</text></view>
				<view v-else-if="!canvastishiTF" class="canvastishi">暂无数据</view>
				<view v-else class="chart-container">
					<qiun-data-charts
						type="line"
						:chartData="chartData"
						:opts="opts"
						:canvas2d="true"
						:ontouch="true"
					/>
				</view>
			</view>
		</view>
		<!-- 对比年份多选弹窗 -->
		<u-popup v-model="show1" mode="bottom" border-radius="16">
			<view class="year-popup">
				<view class="year-popup__header">
					<text class="year-popup__cancel" @click="show1 = false">取消</text>
					<text class="year-popup__title">选择对比年份</text>
					<text class="year-popup__confirm" @click="confirmYears">确定</text>
				</view>
				<scroll-view scroll-y class="year-popup__list">
					<view
						v-for="item in list"
						:key="item.value"
						class="year-popup__item"
						:class="{ active: tempYears.indexOf(item.value) > -1 }"
						@click="toggleYear(item.value)"
					>
						<text>{{ item.label }}</text>
						<u-icon
							v-if="tempYears.indexOf(item.value) > -1"
							name="checkbox-mark"
							color="#28AE4F"
							size="32"
						></u-icon>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-calendar v-model="show" :mode="mode" @change="changeDate"></u-calendar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				time: '请选择时间范围',
				show: false,
				show1: false,
				mode: 'range',
				canvastishiTF: false,//暂无数据提示
				dataloadingtf:true,//加载中提示
				d_id: '',
				titletext: ["24小时", "近一个月", "近半年", "近一年"],
				page: 1,
				forbidden: false,
				pagesum: 1,
				years: new Date().getFullYear() - 1,
				selectedYears: [],//多选的对比年份（已确认）
				tempYears: [],//弹窗内勾选的临时年份，点确定才生效
				list: [],
				start_time: Math.floor(Date.now() / 1000) - 7*24 * 60 * 60,//开始时间 默认前7天 秒级时间戳
				end_time: Math.floor(Date.now() / 1000),//结束时间 默认当前时间 秒级时间戳
				device_type_id: '',
				chartData: {},
				// 折线图配置：每年一条曲线
				opts: {
					color: ['#0085FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
					dataLabel: false,
					animation: true,
					enableScroll: true,
					legend: {
						show: true,
						position: 'top',
						fontSize: 10,
						fontColor: '#666666'
					},
					xAxis: {
						disableGrid: true,
						fontSize: 9,
						fontColor: '#999999',
						itemCount: 8,
						scrollShow: true
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#E5E5E5',
						fontColor: '#999999',
						splitNumber: 4,
						min: 0,
						tofix: 0
					},
					extra: {
						line: { type: 'curve', width: 2 },
						tooltip: { showBox: true }
					}
				},
			}
		},
		computed: {
			// 选中年份的显示文本
			yearsText() {
				return this.selectedYears.length ? this.selectedYears.join('、') : '请选择';
			},
			// 时间范围显示文本
			timeText() {
				if (this.time !== '请选择时间范围') {
					return this.time;
				}
				return this.formatTs(this.start_time) + ' 至 ' + this.formatTs(this.end_time);
			}
		},
		methods: {
			showCalendar() {
				this.show = true
			},
			// 秒级时间戳转 YYYY-MM-DD
			formatTs(ts) {
				const d = new Date(ts * 1000);
				const p = n => (n < 10 ? '0' + n : '' + n);
				return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate());
			},
			changeDate(e){
				this.start_time = Math.floor(new Date(e.startDate + ' 00:00:00').getTime() / 1000)
				this.end_time = Math.floor(new Date(e.endDate + ' 23:59:59').getTime() / 1000)
				this.time = e.startDate + '至' + e.endDate
				this.show = false
				this.getChartNew()
			},
			async getChartNew(){
				this.dataloadingtf = true;
				try {
					const res = await this.$myRequest({
						url: '/api/api_gateway?method=forecast.worm_lamp.xycb_pest_chart_new',
						method: 'POST',
						data: {
							device_type_id: this.deviceInfo.device_type,
							d_id: this.deviceInfo.d_id,
							start_time: this.start_time,
							end_time: this.end_time,
							years: this.selectedYears.join(','),
						},
					});
					// $myRequest 已把响应体里的 data 字段解出来，res 即 {total_num, years_lst, pest_data, md_lst}
					const mdLst = res?.md_lst || [];
					const yearsLst = res?.years_lst || [];
					const pestData = res?.pest_data || [];
					if (mdLst.length && yearsLst.length) {
						this.chartData = {
							categories: mdLst,
							series: yearsLst.map((year, index) => ({
								name: String(year),
								data: pestData[index] || []
							}))
						};
						this.canvastishiTF = true;
					} else {
						this.chartData = {};
						this.canvastishiTF = false;
					}
				} catch(e) {
					this.chartData = {};
					this.canvastishiTF = false;
				} finally {
					this.dataloadingtf = false;
				}
			},
			changeindex() {
				// 打开弹窗前备份已确认的年份，取消时直接丢弃临时勾选
				this.tempYears = [...this.selectedYears];
				this.show1 = true;
			},
			// 年份多选（只改临时数组）
			toggleYear(value) {
				const index = this.tempYears.indexOf(value);
				if (index > -1) {
					this.tempYears.splice(index, 1);
				} else {
					this.tempYears.push(value);
				}
			},
			confirmYears() {
				if (!this.tempYears.length) {
					uni.showToast({ title: '请至少选择一个年份', icon: 'none' });
					return;
				}
				this.selectedYears = [...this.tempYears];
				this.show1 = false;
				this.getChartNew();
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
		onLoad(option) {
			console.log(option,'optionoptionoptionoption')
			// this.list 前10年的时间范围（先清空，避免每次 onShow 重复追加）
			var now = new Date()
			this.list = []
			for (var i = 0; i < 10; i++) {
				this.list.push({
					label: now.getFullYear() - i,
					value: now.getFullYear() - i,
				})
			}
			// 默认选中当前年
			this.selectedYears = [this.list[0].value]
			this.end_time = Math.floor(+new Date() / 1000) + 1
			this.start_time = this.end_time - 7 * 24 * 60 * 60
			this.deviceInfo = option
			this.d_id = option.d_id
			this.device_id = option.device_id
			this.device_type_id = option.device_type
			this.getChartNew()
		},
	}
</script>

<style lang="scss">
	::v-deep .u-calendar__action{
		display:flex;
	}
	::v-deep .u-calendar__action__text{
		width:80%;
		text-align: center;
	}
	.time-change-range{
		width: 90%;
		margin: 10rpx auto;
		display: flex;
		align-items: center;
		text-align: center;
		> text:first-child{
			flex-shrink: 0;
		}
		.years-text{
			flex: 1;
			min-width: 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: left;
			color: #28AE4F;
			font-weight: 700;
		}
	}
	// 年份多选弹窗
	.year-popup{
		padding: 24rpx 32rpx 48rpx;
		.year-popup__header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 0 24rpx;
			.year-popup__title{
				font-size: 32rpx;
				font-weight: 700;
				color: #333333;
			}
			.year-popup__cancel{
				font-size: 28rpx;
				color: #999999;
			}
			.year-popup__confirm{
				font-size: 28rpx;
				color: #28AE4F;
				font-weight: 700;
			}
		}
		.year-popup__list{
			max-height: 560rpx;
			.year-popup__item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 8rpx;
				font-size: 28rpx;
				color: #333333;
				border-bottom: 1rpx solid #F1F4F8;
				&.active{
					color: #28AE4F;
					font-weight: 700;
				}
			}
		}
	}
	.date-range{
		display: flex;
		text-align: center;
	}
	.chart-container{
		width: 100%;
		height: 420rpx;
		margin-top: 16rpx;
	}
	.shuju_one,
	.shuju_two {
		position: absolute;
		top: 54px;
		width: 90%;
		left: 5%;
		box-shadow: 0 0 10rpx #bcb9ca;
		padding-top: 20rpx;
		height: 550rpx;
		.canvastishi {
			font-size: 32rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -64rpx;
			margin-top: -21rpx;
			.dataloading:after {
				overflow: hidden;
				display: inline-block;
				vertical-align: bottom;
				animation: ellipsis 2s infinite;
				content: "\2026";
			}
			@keyframes ellipsis {
				from {
					width: 2px;
				}
			
				to {
					width: 15px;
				}
			}
		}
		
		.shuju_one_title {
			width: 90%;
			margin: 0 auto;
			display: flex;
			.select-date{
				border-radius: 30rpx;
				border:2rpx solid #B2B2B2;
				width: 100%;
				padding: 16rpx 20rpx;
				color:#B2B2B2;
			}
			.tltle_text {
				width: 25%;
				border: 2rpx solid #B2B2B2;
				color: #B2B2B2;
				text-align: center;
				font-size: 24rpx;
				height: 50rpx;
				line-height: 50rpx;
			}

			.title_text_color {
				width: 25%;
				border: 2rpx solid #28AE4F;
				color: #28AE4F;
				text-align: center;
				font-size: 24rpx;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
	}
</style>