pingpu_H5/pages/worm/components/analyse/worm-table.vue

<template>
	<!-- 害虫分析表格数据-->
	<view class="ui-card px-13">
		
	</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>