pingpu_H5/pages/weather/history.vue

<template>
	<!-- 历史记录 -->
	<view v-if="loading">
		<!-- 统计图 -->
		<view class="ui-card history-chart">
			<view class="row-end">
				<ui-picker :value="pickesId" :list="pickerList" @onChagne="changeChartData"></ui-picker>
			</view>
			<line-charts :chartData="chartShowData"></line-charts>
		</view>
		<!-- 统计图end -->
		<!-- 历史数据列表 -->
		<view class="ui-card history-panel">
			<!-- 选择时间范围 -->
			<view class="mb">
				<uni-datetime-picker v-model="searchTime" type="daterange" rangeSeparator="-"
					@change="changeSearchTime" />
			</view>
			<!-- 历史数据表格 -->
			<uni-table class="table-style" ref="table" :loading="pageLoading" emptyText="暂无更多数据">
				<uni-tr>
					<block v-for="(header,index) in historyHeader" :key="index">
						<uni-th align="center">{{header.text}}</uni-th>
					</block>
				</uni-tr>
				<uni-tr v-for="(item, index) in historyList" :key="index">
					<block v-for="(val,key,i) in item" :key="i">
						<uni-td align="center">{{item[key]}}</uni-td>
					</block>
				</uni-tr>
			</uni-table>
			<!-- 页码 -->
			<uni-pagination :total="total" title="标题文字" @change="changePagination" />
			<!-- 页码end -->
		</view>
		<!-- 历史数据列表end -->
	</view>
</template>

<script>
	import lineCharts from './components/w-line-charts.vue' // 折线图

	import {
		getWeatherHistory,
		getWeatherChart
	} from '@/api/weather.js'
	import {
		timeFrame,
		dateToUnix
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				loading: false, // 页面加载状态
				pageLoading: false, //分页加载状态
				deviceId: '', // 设备id
				// 统计图展示
				chartShowData: {
					categories: [],
					series: [],
				},
				pickesId: '', //当前下拉框的值（通道号）
				pickerList: [], //下拉列表
				// 统计图储存数据 格式 {通道号:数据列表}
				chartData: null,

				// 历史记录搜索参数
				params: {
					start_time: timeFrame('start'), // 开始时间
					end_time: timeFrame('end'), // 结束时间
					device_id: '', //设备号
					page: 1,
					page_size: 10,
				},
				searchTime: ['', ''],
				historyHeader: [], // 头部列表
				historyList: [], // 历史数据
				total: 0, // 数据总数
			};
		},
		components: {
			lineCharts
		},
		async onLoad(options) {
			this.deviceId = options.id;
			this.params.device_id = options.id;
			this.$api.loading('加载中...');
			await Promise.all([
				this.getHistoryList(),
				this.getWeatherChart()
			])
			this.loading = true;
			this.$api.hide();
		},
		methods: {
			// 选择时间
			changeSearchTime(time) {
				this.params.start_time = time[0] ? dateToUnix(time[0]) : timeFrame('start');
				this.params.end_time = time[0] ? dateToUnix(time[1]) : timeFrame('end');
				this.searchTime = time;
				this.params.page = 1;
				this.getHistoryList();
				this.getWeatherChart();
			},
			// 切换统计图数据
			changeChartData(e) {
				this.pickesId = e.value;
				this.chartShowData.series = [{
					name: e.text,
					data: this.chartData[e.value] ?? []
				}]
			},
			// 切换页码
			changePagination(e) {
				this.params.page = e.current;
				this.getHistoryList();
			},
			// 获取历史数据
			async getHistoryList() {
				this.pageLoading = true;
				const res = await getWeatherHistory(this.params);
				this.historyHeader = res.headers; // 头部列表
				this.historyList = res.list; // 历史数据
				this.total = res.nums;
				this.pageLoading = false;
			},
			// 获取气象统计数据
			async getWeatherChart() {
				const {
					times,
					pickes,
					charts
				} = await getWeatherChart({
					device_id: this.params.device_id,
					begin: this.params.start_time,
					end: this.params.end_time
				});
				this.chartData = charts; // 统计数据集合
				this.pickerList = pickes; // 下拉列表集合
				this.pickesId = pickes[0]?.value ?? ''; // 当前通道号
				// 统计图显示数据
				this.chartShowData = {
					categories: times,
					series: [{
						name: pickes[0]?.text ?? '',
						data: charts[this.pickesId] ?? []
					}]
				}
			}
		}
	}
</script>

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

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