|
|
@@ -0,0 +1,179 @@
|
|
|
+<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" />
|
|
|
+ </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 | 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,
|
|
|
+ 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,
|
|
|
+ },
|
|
|
+ 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(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();
|
|
|
+ },
|
|
|
+ // 切换页码
|
|
|
+ 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>
|