pingpu_H5/pages/worm/components/analyse/raise-card.vue

<template>
	<!-- 时期卡片组件-->
	<view class="ui-card px-13">
		<!-- 选项框 -->
		<view class="row-end mb">
			<picker mode="date" fields="year" @change="changePestDate" class="picker mr">
				<view class="picker-wrapper">
					<view>{{pestDate}}</view>
					<uni-icons type="bottom" :size="12" color="#DDDDDD"></uni-icons>
				</view>
			</picker>
			<picker class="picker" @change="changePestList" :range="pestList">
				<view class="picker-wrapper">
					<view>{{pestItem}}</view>
					<uni-icons type="bottom" :size="12" color="#DDDDDD"></uni-icons>
				</view>
			</picker>
		</view>
		<!-- 时期列表 -->
		<view class="period-navs" v-if="pestInfo[pestItem]">
			<view class="period-item start-time">
				<view class="icon"></view>
				<view class="title">始见期</view>
				<view class="text">{{pestInfo[pestItem].startTime}}</view>
				<view class="text"></view>
			</view>
			<view class="period-item high-time">
				<view class="icon"></view>
				<view class="title">高峰期</view>
				<view class="text">{{pestInfo[pestItem].highTime}}</view>
				<view class="text">数量：{{pestInfo[pestItem].highNum}}</view>
			</view>
			<view class="period-item end-time">
				<view class="icon"></view>
				<view class="title">终见期</view>
				<view class="text">{{pestInfo[pestItem].endTime}}</view>
				<view class="text"></view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 虫害始见期数据卡片
	 */
	import {
		getPestRaiseInfo
	} from '@/api/worm.js'
	export default {
		name: 'w-raise-card',
		data() {
			return {
				pestList: [], //始见期选项
				pestInfo: {},
				pestDate: (new Date()).getUTCFullYear(),
				pestItem: '',
			}
		},
		props: {
			// 设备id
			deviceId: [String, Number]
		},

		mounted() {
			this.getPestRaiseInfo();
		},
		methods: {
			// 获取始见期数据
			async getPestRaiseInfo() {
				const res = await getPestRaiseInfo({
					year: this.pestDate,
					d_ids: this.deviceId,
				});
				this.pestList = res.pest_list; //始见期选项
				this.pestInfo = res.pest_info;
				this.pestItem = this.pestList[0];
			},
			
			// 选择年份
			changePestDate(e) {
				this.pestDate=e.detail.value;
				this.getPestRaiseInfo();
			},
			// 选择始见期类型
			changePestList(e) {
				this.pestItem = this.pestList[e.detail.value];
			},
		}
	};
</script>

<style lang="scss">
	// 时期样式
	.period-navs {
		display: flex;
		justify-content: space-between;
	}
	
	.period-item {
		width: 200rpx;
		height: 264rpx;
		padding: 122rpx 24rpx 24rpx;
		background: url('/static/img/startTime.png') center center no-repeat;
		background-size: 200rpx 264rpx;
	
		&.high-time {
			background-image: url('/static/img/highTime.png');
		}
	
		&.end-time {
			background-image: url('/static/img/endTime.png');
		}
	
		.title {
			font-size: 32rpx;
			font-weight: normal;
			color: #333333;
			line-height: 44rpx;
		}
	
		.text {
			margin-top: 10rpx;
			font-size: 24rpx;
			font-weight: normal;
			color: #999999;
			line-height: 34rpx;
		}
	}
	
</style>