pingpu_H5/pages/worm/history.vue

<template>
	<!-- 虫情历史数据 -->
	<view>
		<!-- 统计图 -->
		<view class="ui-card history-chart">
			<!-- 按钮组合 -->
			<view class="time-btn-group">
				<block v-for="(time,index) in timeList" :key="index">
					<view class="row-center time-btn" :class="params.start_time==time.value?'active':''"
						@click="selectTime(time.value)"> {{time.text}}</view>
				</block>
			</view>
			<!-- 区域折线图 -->
			<area-charts :chartData="historyChartData"></area-charts>
		</view>
		<!-- 统计图end -->
		<!-- 历史数据列表 -->
		<view class="ui-card history-panel">
			<view class="row-between mb">
				<view class="">数据列表</view>
			</view>
			<!-- 历史数据表格 -->
			<uni-table class="table-style" :loading="loading" border emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="150" align="center">日期</uni-th>
					<uni-th width="150" align="center">环境温度（°C）</uni-th>
					<uni-th align="center">环境湿度（%）</uni-th>
					<uni-th width="204" align="center">加热仓温度（°C）</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in historyList" :key="index">
					<uni-td>{{ item.addtime | timeFrom}}</uni-td>
					<uni-td>{{ item.at }}</uni-td>
					<uni-td>
						<view class="name">{{ item.ah }}</view>
					</uni-td>
					<uni-td align="center">{{ item.hrt }}</uni-td>
				</uni-tr>
			</uni-table>
			<!-- 页码 -->
			<uni-pagination :total="total" :current="params.page"  @change="getHistoryList" />
			<!-- 页码end -->
		</view>
		<!-- 历史数据列表end -->
	</view>
</template>

<script>
	import {
		getWormLampHistory
	} from '@/api/worm.js'
	import areaCharts from './components/w-area-charts.vue'
	import moment from 'moment';
	// 获取开始还见
	const startTime = (num, str) => {
		let time = moment().subtract(num, str);
		return moment(time).unix();
	}
	export default {
		data() {
			return {
				// 时间列表
				timeList: [{
						text: '24小时',
						value: startTime(1, 'days'),
					},
					{
						text: '近一个月',
						value: startTime(1, 'months'),
					}, {
						text: '近半年',
						value: startTime(6, 'months'),
					}, {
						text: '近一年',
						value: startTime(1, 'years'),
					}
				],
				loading: false, // 表格加载状态
				params: {
					device_type_id: 3, // 设备类型id 3测报灯 6孢子仪
					device_id: '', // 设备号
					start_time: 0, //开始时间
					end_time: moment().unix(), // 结束时间
					page: 1,
				},
				// 历史数据列表
				historyList: [],
				total: 0,
				// 历史数据折线图
				historyChartData: {
					categories: [],
					//{name: "",data: []}
					series: []
				}
			};
		},
		onLoad(options) {
			this.params.device_id = options.imeiId;
			this.params.start_time = this.timeList[0].value;
			this.getHistoryList();
		},
		components: {
			areaCharts
		},
		methods: {
			// 选择时间范围
			selectTime(value) {
				this.params.start_time = value;
				this.getHistoryList();
			},
			/**
			 * 获取历史数据列表
			 * @param {Object}  e  获取当前页数 e.current 
			 */
			async getHistoryList(e) {
				this.params.page = e?.current ?? 1;
				this.loading=true;
				const {
					data,
					counts
				} = await getWormLampHistory(this.params);
				this.loading=false;
				const historyList = data.map(item => item.d_h_t);
				this.historyList = historyList;
				this.total = counts;
				let categories = [];
				let series = [];
				let seriesKey = {
					at: '环境温度（°C）',
					ah: '环境湿度（%）',
					hrt: '加热仓温度（°C）'
				}
				for (let key in seriesKey) {
					series.push({
						name: seriesKey[key],
						data: [],
						key,
					});
				}
				this.historyList.forEach((item) => {
					categories.push(moment(item.addtime*1000).format('MM-月DD日'));
					series.forEach(serieItem=>{
						serieItem.data.push(item[serieItem.key]);
					})
				})
				this.historyChartData = {
					categories,
					series: series
				}
			}
		}
	}
</script>

<style lang="scss">
	.history-chart {
		padding: 32rpx 24rpx;
	}

	.time-btn-group {
		display: flex;
		justify-content: center;
		margin-bottom: 24rpx;

		.time-btn {
			width: 125rpx;
			height: 55rpx;
			font-size: 24rpx;
			color: #999;
			border-radius: 8rpx;
			border: 1rpx solid #DDDDDD;

			&.active {
				border-color: #317afd;
				color: #317afd;
			}
		}
	}

	.history-panel {
		padding: 24rpx 26rpx;
		margin-bottom: 56rpx;
	}
</style>