提交

pages/worm/analyse.vue

@@ -2,47 +2,8 @@
 	<!-- 虫害分析 -->
 	<view>
 		<!-- 时期卡片 -->
-		<view class="ui-card px-13">
-			<!-- 选项框 -->
-			<view class="row-end mb">
-			<!-- 	<picker mode='date' fields='year'  @chagne="changePestDate" class="picker mr">
-					<view class="picker-wrapper">
-						<view>{{pestDate}}</view>
-						<uni-icons type="bottom" :size="12" color="#DDDDDD"></uni-icons>
-					</view>
-				</picker> -->
-				<picker mode="date" fields="year" @change="changePestDate">
-					<view class="uni-input">{{pestDate}}</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-ime">
-					<view class="icon"></view>
-					<view class="title">终见期</view>
-					<view class="text">{{pestInfo[pestItem].endTime}}</view>
-					<view class="text"></view>
-				</view>
-			</view>
-		</view>
+		<raise-card :deviceId="dId"></raise-card>
+		<!-- 时期卡片end -->
 		<!-- 虫害统计图 -->
 		<view class="ui-card px-13">
 			<!-- 选择时间范围 -->
@@ -102,16 +63,11 @@
 	} from '@/api/worm.js'
 	import areaCharts from './components/w-area-charts.vue'
 	import pieCharts from './components/w-pie-charts.vue'
+	import raiseCard from './components/analyse/raise-card.vue' // 始见期卡片组件
 	export default {
 		data() {
 			return {
-				dId: '',// 设备id
-				//始见期选项
-				pestList: [], //始见期选项
-				pestInfo: {},
-				pestDate: (new Date()).getUTCFullYear(),
-				pestItem: '',
-				//始见期选项 end
+				dId: '', // 设备id
 				pieData: {
 					series: [{
 						data: [{
@@ -169,32 +125,13 @@
 		},
 		components: {
 			areaCharts,
-			pieCharts
+			pieCharts,
+			raiseCard
 		},
 		onLoad(options) {
-			this.dId='15';//options.id
-			this.getPestRaiseInfo();
+			this.dId = '15'; //options.id
 		},
 		methods: {
-			// 获取始见期数据
-			async getPestRaiseInfo() {
-				const res = await getPestRaiseInfo({
-					year: this.pestDate,
-					d_ids: this.dId,
-				});
-				console.log(res);
-				this.pestList = res.pest_list; //始见期选项
-				this.pestInfo = res.pest_info;
-				this.pestItem = this.pestList[0];
-			},
-			changePestDate(e){
-				console.log(e);
-			},
-			// 选择始见期类型
-			changePestList(e){
-				console.log(e);
-				this.pestItem = this.pestList[e.detail.value];
-			},
 			maskClick(e) {
 				console.log('----maskClick事件:', e);
 			}
@@ -212,15 +149,18 @@
 	.period-item {
 		width: 200rpx;
 		height: 264rpx;
-		padding:122rpx 24rpx 24rpx;
+		padding: 122rpx 24rpx 24rpx;
 		background: url('/static/img/startTime.png') center center no-repeat;
-		background-size:200rpx 264rpx;
-		&.high-time{
+		background-size: 200rpx 264rpx;
+
+		&.high-time {
 			background-image: url('/static/img/highTime.png');
 		}
-		&.end-time{
+
+		&.end-time {
 			background-image: url('/static/img/endTime.png');
 		}
+
 		.title {
 			font-size: 32rpx;
 			font-weight: normal;

pages/worm/components/w-raise-card.vue

@@ -3,7 +3,7 @@
 	<view class="ui-card px-13">
 		<!-- 选项框 -->
 		<view class="row-end mb">
-			<picker mode='date' fields='year' @chagne="changePestDate" class="picker mr">
+			<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>
@@ -18,19 +18,19 @@
 		</view>
 		<!-- 时期列表 -->
 		<view class="period-navs" v-if="pestInfo[pestItem]">
-			<view class="period-item">
+			<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">
+			<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">
+			<view class="period-item end-time">
 				<view class="icon"></view>
 				<view class="title">终见期</view>
 				<view class="text">{{pestInfo[pestItem].endTime}}</view>
@@ -44,16 +44,17 @@
 	/**
 	 * 虫害始见期数据卡片
 	 */
+	import {
+		getPestRaiseInfo
+	} from '@/api/worm.js'
 	export default {
 		name: 'w-raise-card',
 		data() {
 			return {
-				//始见期选项
 				pestList: [], //始见期选项
 				pestInfo: {},
 				pestDate: (new Date()).getUTCFullYear(),
 				pestItem: '',
-				//始见期选项 end
 			}
 		},
 		props: {
@@ -71,13 +72,15 @@
 					year: this.pestDate,
 					d_ids: this.deviceId,
 				});
-				console.log(res);
 				this.pestList = res.pest_list; //始见期选项
 				this.pestInfo = res.pest_info;
 				this.pestItem = this.pestList[0];
 			},
+			
+			// 选择年份
 			changePestDate(e) {
-				console.log(e);
+				this.pestDate=e.detail.value;
+				this.getPestRaiseInfo();
 			},
 			// 选择始见期类型
 			changePestList(e) {
@@ -93,28 +96,29 @@
 		display: flex;
 		justify-content: space-between;
 	}
-
+	
 	.period-item {
-		width: 206rpx;
+		width: 200rpx;
 		height: 264rpx;
-		padding: 24rpx;
-		background-color: #FCF8FF;
-
-		.icon {
-			width: 80rpx;
-			height: 80rpx;
-			margin-bottom: 18rpx;
-			background-color: #95F9E7;
-			border-radius: 100%;
+		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;
@@ -122,6 +126,6 @@
 			color: #999999;
 			line-height: 34rpx;
 		}
-
 	}
+	
 </style>