pingpu_H5/pages/worm/analyse.vue

<template>
	<!-- 虫害分析 -->
	<view>
		<!-- 时期卡片 -->
		<raise-card :deviceId="deviceId"></raise-card>
		<!-- 时期卡片end -->
		<!-- 虫害统计图 -->
		<view class="ui-card px-13">
			<!-- 选择时间范围 -->
			<view class="mb">
				<uni-datetime-picker v-model="searchTime" type="daterange" rangeSeparator="-"
					@change="changeSearchTime" />
			</view>
			<!-- 区域统计图 -->
			<area-charts :chartData="pestLineData"></area-charts>
			<view style="height: 20rpx;"></view>
			<!-- 环形统计图 -->
			<pie-charts :chartData="pestPieData"></pie-charts>
			<!-- 统计列表 -->
			<view class="mt-12">
				<view class="progress-item" v-for="(val,key,i) in pestTotal" :key="i">
					<view class="label">{{i+1}}、{{key}}</view>
					<view class="progress">
						<progress :percent="pestTotal[key]" backgroundColor="#F3F5F9" activeColor="#10AEFF" :stroke-width="9" />
					</view>
					<view class="percent">{{val}}</view>
				</view>
			</view>
		</view>
		<!-- 虫害统计图end -->
		<!-- 虫害表格数据 -->
		<view class="ui-card worm-table">
			<ui-tabs :list="pestTabs" :active="pestTabValue" @clickTab="clickPestTabs"></ui-tabs>
			<!-- 害虫图片溯源 -->
			<view v-show="pestTabValue==1">
				<uni-table class="table-style mt-12" ref="table" border emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="150" align="center">设备号</uni-th>
						<uni-th width="150" align="center">设备名称</uni-th>
						<uni-th width="250" align="center">害虫名称</uni-th>
						<uni-th width="200" align="center">添加时间</uni-th>
						<uni-th width="200" align="center">地址</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in pestImageSourceTable" :key="index">
						<uni-td>{{ item.deviceId }}</uni-td>
						<uni-td>{{ item.deviceName }}</uni-td>
						<uni-td>
							<view class="name">{{ item.pestName }}</view>
						</uni-td>
						<uni-td align="center">{{ item.addtime | timeFrom }}</uni-td>
						<uni-td align="center">{{ item.location }}</uni-td>
					</uni-tr>
				</uni-table>
				<!-- 页码 -->
				<uni-pagination :current="imageSourcePage" :total="imageSourceTotal" @change="getPestImageSourceList" />
				<!-- 页码end -->
			</view>
			<!-- 害虫基础信息溯源 -->
			<view v-show="pestTabValue==2">
				<uni-table class="table-style mt-12" ref="table" border emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="150" align="center">害虫名称</uni-th>
						<uni-th width="150" align="center">害虫数量</uni-th>
						<uni-th width="180" align="center">添加时间</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in pestBaseTable" :key="index">
						<uni-td align="center">{{ item.pest_name }}</uni-td>
						<uni-td align="center">{{ item.pest_num }}</uni-td>
						<uni-td align="center">{{ item.addtime | timeFrom }}</uni-td>
					</uni-tr>
				</uni-table>
				<!-- 页码 -->
				<uni-pagination :current="basePage" :total="baseTotal" @change="getPestBaseDataList" />
				<!-- 页码end -->
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		
		<!-- 返回顶部按钮 -->
		<ui-back-top :scroll-top="scrollTop" />
	</view>
</template>

<script>
	import {
		getPestStatisticsChart,
		getPestImageSource,
		getPestBaseData
	} from '@/api/worm.js'
	import {
		timeFrameText,
		timeFrame,
		dateToUnix
	} from '@/utils/utils.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 {
				deviceId: '', // 设备id
				// 检索时间 折线图，虫害图片溯源，虫害基础数据通用
				timeParams: {
					start_time: timeFrame('start'), // 开始时间
					end_time: timeFrame('end'), // 结束时间
				},
				// === 虫害统计信息参数
				searchTime: [timeFrameText('start'), timeFrameText('end')],
				chartLoading: false,
				// 饼状图数据
				pestPieData: null,
				// 折线图数据
				pestLineData: null,
				pestTotal: null, // 虫害统计信息
				// === 虫害统计信息参数 end
				
				// === 虫害表格数据
				pestTabs: [{
					text: '图像溯源',
					value: 1
				}, {
					text: '虫害基础数据',
					value: 2
				}],
				pestTabValue: 1, // 当前虫害选项
				
				pestImageSourceTable: [], // 害虫图片溯源表格数据，
				imageSourcePage: 1, // 害虫图片溯源页码
				imageSourceTotal: 0, // 害虫图片溯源总数
				
				pestBaseTable: [], // 害虫基础表格数据
				basePage: 1, // 害虫基础页码
				baseTotal: 0, // 害虫基础总数
				// === 虫害表格数据 end
				scrollTop: 0,
			};
		},
		components: {
			areaCharts,
			pieCharts,
			raiseCard
		},
		onLoad(options) {
			this.deviceId =  options.id;// '15';
			this.getPestStatisticsChart();
			this.getPestImageSourceList();
			this.getPestBaseDataList();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 获取折线图统计信息
			async getPestStatisticsChart() {
				this.chartLoading = false;

				const {
					lineChart,
					pieChart,
					pestTotal,
				} = await getPestStatisticsChart({
					d_ids: this.deviceId,
					amend: 0,
					...this.timeParams
				});
				this.pestPieData = pieChart; // 饼状图
				this.pestLineData = lineChart; // 折线图数据
				this.pestTotal = pestTotal; // 虫害统计信息
				this.chartLoading = true;
			},
			// 折线图时间切换
			changeSearchTime(time) {
				this.timeParams.start_time = time[0] ? dateToUnix(time[0]) : timeFrame('start');
				this.timeParams.end_time = time[0] ? dateToUnix(time[1]) : timeFrame('end');
				this.searchTime = time;
				this.getPestStatisticsChart();
				this.getPestImageSourceList();
				this.getPestBaseDataList();
			},
			
			clickPestTabs(value){
				this.pestTabValue=value;
			},
			/**
			 * 获取虫害图片溯源列表
			 * @param {Object}  e  获取当前页数 e.current 
			 */
			async getPestImageSourceList(e) {
				this.imageSourcePage = e?.current ?? 1;
				const res = await getPestImageSource({
					d_ids: this.deviceId,
					page: this.imageSourcePage,
					...this.timeParams
				});
				this.pestImageSourceTable = res.pest_image_data;
				this.imageSourceTotal = res.total_count;
				this.imageSourcePage = res.current_count
			},
			/**
			 * 获取虫害基础数据列表
			 * @param {Object}  e  获取当前页数 e.current 
			 */
			async getPestBaseDataList(e) {
				this.basePage = e?.current ?? 1;
				const res = await getPestBaseData({
					d_ids: this.deviceId,
					page: this.basePage,
					...this.timeParams
				});
				this.pestBaseTable = res.pest_image_data;
				this.baseTotal = res.total_count;
				this.basePage = res.current_count
			}
		}
	}
</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;
		}

	}

	.progress-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 12rpx;

		.label,
		.percent {
			font-size: 24rpx;
			color: #333;
		}

		.label {
			width: 200rpx;
		}

		.percent {
			width: 80rpx;
			text-align: right;
		}

		.progress {
			flex: 1;
			height: 18rpx;
			overflow: hidden;
			border-radius: 30rpx;
		}
	}

	// 虫害表格数据
	.worm-table {
		padding: 10rpx 24rpx 30rpx;
		border-radius: 0;
	}
</style>