pingpu_H5/pages/weatherother/detail.vue

<template>
	<!-- 历史记录 -->
	<view v-if="loading">
		<!-- 统计图end -->
		<!-- 历史数据列表 -->
		<view class="ui-card history-panel">
			<!-- 选择时间范围 -->
			<view class="mb">
				<uni-datetime-picker v-model="searchTime" type="daterange" rangeSeparator="-"
					@change="changeSearchTime" :clear-icon="false"/>
			</view>
			<!-- 历史数据表格 -->
			<uni-table class="table-style" ref="table" :loading="pageLoading" emptyText="暂无更多数据">
				<uni-tr>
					<block v-for="(header,index) in historyHeader" :key="index">
						<uni-th :width="index==0?120:80" align="center">{{header.text}}</uni-th>
					</block>
				</uni-tr>
				<uni-tr v-for="(item, index) in historyList" :key="index">
					<block v-for="(header) in historyHeader" :key="header.key">
						<uni-td align="center" v-if="header.key == 'wind_o'">{{fengObj[item[header.key]]}}</uni-td>
						<uni-td align="center" v-else-if="header.key == 'updateTime'">{{((new Date(item.updateTime).getTime())/1000).toFixed(0) | timeFrom}}</uni-td>
						<uni-td align="center" v-else>{{item[header.key]}}</uni-td>
					</block>
				</uni-tr>
			</uni-table>
			<!-- 页码 -->
			<uni-pagination :current="params.page" :total="total" title="标题文字" @change="changePagination" />
			<!-- 页码end -->
		</view>
		<!-- 历史数据列表end -->
	</view>
</template>

<script>
	import {
		getDetail
	} from '@/api/weatherother.js'
	import {
		timeFormat,
		timeFrame,
		dateToUnix,
		timeFrameText
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				loading: false, // 页面加载状态
				pageLoading: false, //分页加载状态
				deviceId: '', // 设备id

				// 历史记录搜索参数
				params: {
					start_time: timeFormat(timeFrame('start')), // 开始时间
					end_time: timeFormat(timeFrame('end')), // 结束时间
					device_id: '', //设备号
					page: 1,
					page_size: 10,
				},
				timeVal: timeFormat(timeFrame('start')).slice(-8), // 存当前时分秒
				searchTime: [timeFormat(timeFrameText('start')), timeFormat(timeFrameText('end'))],
				fengObj:{
				    "N": "北",
				    "NE": "东北",
				    "E": "东",
				    "SE": "东南",
				    "S": "南",
				    "SW": "西南",
				    "W": "西",
				    "NW": "西北",
				    "C": "静风"
				},
				historyHeader: [{
						text: '更新时间',
						key:'updateTime'
					},
					{
						text: '设备ID',
						key:'devid'
					},
					{
						text: '空气温度',
						key:'air_t'
					},
					{
						text: '空气湿度',
						key:'air_rh'
					},
					{
						text: '土壤温度',
						key:'earth_t'
					},
					{
						text: '土壤湿度',
						key:'earth_rh'
					},
					{
						text: '风向',
						key:'wind_o'
					},
					{
						text: '风速',
						key:'wind_speed'
					},
					{
						text: '降雨量',
						key:'rainfull'
					},
					{
						text: '蒸发量',
						key:'vasp'
					},
					{
						text: '光照强度',
						key:'sunlight'
					},
					{
						text: '大气压强',
						key:'pressure'
					},
					{
						text: '土壤EC值',
						key:'ec'
					},
					{
						text: '露点温度',
						key:'ludian'
					}
				], // 头部列表
				historyList: [], // 历史数据
				total: 0, // 数据总数
			};
		},
		components: {},
		async onLoad(options) {
			this.deviceId = options.id;
			this.params.device_id = options.id;
			this.$api.loading('加载中...');
			await Promise.all([
				this.getHistoryList(),
			])
			this.loading = true;
			this.$api.hide();
		},
		methods: {
			// 选择时间
			changeSearchTime(val) {
				if(val.length == 0) {
					val = [timeFormat(timeFrame('start')), timeFormat(timeFrame('end'))];
					this.searchTime = val
				}
				this.params.start_time = val[0] + ' ' + this.timeVal;
				this.params.end_time = val[1] + ' ' + this.timeVal;
				this.params.page = 1;
				this.getHistoryList();
			},
			// 切换页码
			changePagination(e) {
				this.params.page = e.current;
				this.getHistoryList();
			},
			// 获取历史数据
			async getHistoryList() {
				this.pageLoading = true;
				const res = await getDetail(this.params);
				this.historyList = res.data; // 历史数据
				this.total = res.num;
				this.pageLoading = false;
			}
		}
	}
</script>

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

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