|
@@ -4,11 +4,10 @@
|
|
|
<!-- 统计图 -->
|
|
<!-- 统计图 -->
|
|
|
<view class="ui-card history-chart">
|
|
<view class="ui-card history-chart">
|
|
|
<view class="row-end">
|
|
<view class="row-end">
|
|
|
- <ui-picker :value="pickesId" :list="pickerList"></ui-picker>
|
|
|
|
|
|
|
+ <ui-picker :value="pickesId" :list="pickerList" @onChagne="changeChartData"></ui-picker>
|
|
|
</view>
|
|
</view>
|
|
|
<line-charts :chartData="chartShowData"></line-charts>
|
|
<line-charts :chartData="chartShowData"></line-charts>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
<!-- 统计图end -->
|
|
<!-- 统计图end -->
|
|
|
<!-- 历史数据列表 -->
|
|
<!-- 历史数据列表 -->
|
|
|
<view class="ui-card history-panel">
|
|
<view class="ui-card history-panel">
|
|
@@ -18,7 +17,7 @@
|
|
|
@change="changeSearchTime" />
|
|
@change="changeSearchTime" />
|
|
|
</view>
|
|
</view>
|
|
|
<!-- 历史数据表格 -->
|
|
<!-- 历史数据表格 -->
|
|
|
- <uni-table class="table-style" ref="table" border emptyText="暂无更多数据">
|
|
|
|
|
|
|
+ <uni-table class="table-style" ref="table" :loading="pageLoading" emptyText="暂无更多数据">
|
|
|
<uni-tr>
|
|
<uni-tr>
|
|
|
<block v-for="(header,index) in historyHeader" :key="index">
|
|
<block v-for="(header,index) in historyHeader" :key="index">
|
|
|
<uni-th align="center">{{header.text}}</uni-th>
|
|
<uni-th align="center">{{header.text}}</uni-th>
|
|
@@ -31,7 +30,7 @@
|
|
|
</uni-tr>
|
|
</uni-tr>
|
|
|
</uni-table>
|
|
</uni-table>
|
|
|
<!-- 页码 -->
|
|
<!-- 页码 -->
|
|
|
- <uni-pagination :total="50" title="标题文字" />
|
|
|
|
|
|
|
+ <uni-pagination :total="total" title="标题文字" @change="changePagination" />
|
|
|
<!-- 页码end -->
|
|
<!-- 页码end -->
|
|
|
</view>
|
|
</view>
|
|
|
<!-- 历史数据列表end -->
|
|
<!-- 历史数据列表end -->
|
|
@@ -45,11 +44,15 @@
|
|
|
getWeatherHistory,
|
|
getWeatherHistory,
|
|
|
getWeatherChart
|
|
getWeatherChart
|
|
|
} from '@/api/weather.js'
|
|
} from '@/api/weather.js'
|
|
|
|
|
+ import {
|
|
|
|
|
+ timeFrame,
|
|
|
|
|
+ dateToUnix
|
|
|
|
|
+ } from '@/utils/utils.js'
|
|
|
export default {
|
|
export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
loading: false, // 页面加载状态
|
|
loading: false, // 页面加载状态
|
|
|
-
|
|
|
|
|
|
|
+ pageLoading: false, //分页加载状态
|
|
|
deviceId: '', // 设备id
|
|
deviceId: '', // 设备id
|
|
|
// 统计图展示
|
|
// 统计图展示
|
|
|
chartShowData: {
|
|
chartShowData: {
|
|
@@ -63,8 +66,8 @@
|
|
|
|
|
|
|
|
// 历史记录搜索参数
|
|
// 历史记录搜索参数
|
|
|
params: {
|
|
params: {
|
|
|
- start_time: '', // 开始时间
|
|
|
|
|
- end_time: '', // 结束时间
|
|
|
|
|
|
|
+ start_time: timeFrame('start'), // 开始时间
|
|
|
|
|
+ end_time: timeFrame('end'), // 结束时间
|
|
|
device_id: '', //设备号
|
|
device_id: '', //设备号
|
|
|
page: 1,
|
|
page: 1,
|
|
|
page_size: 10,
|
|
page_size: 10,
|
|
@@ -72,6 +75,7 @@
|
|
|
searchTime: ['', ''],
|
|
searchTime: ['', ''],
|
|
|
historyHeader: [], // 头部列表
|
|
historyHeader: [], // 头部列表
|
|
|
historyList: [], // 历史数据
|
|
historyList: [], // 历史数据
|
|
|
|
|
+ total: 0, // 数据总数
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
components: {
|
|
components: {
|
|
@@ -85,26 +89,40 @@
|
|
|
this.getHistoryList(),
|
|
this.getHistoryList(),
|
|
|
this.getWeatherChart()
|
|
this.getWeatherChart()
|
|
|
])
|
|
])
|
|
|
|
|
+ this.loading = true;
|
|
|
this.$api.hide();
|
|
this.$api.hide();
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
// 选择时间
|
|
// 选择时间
|
|
|
changeSearchTime(time) {
|
|
changeSearchTime(time) {
|
|
|
- this.params.start_time = this.$util.dateToUnix(time[0]);
|
|
|
|
|
- this.params.end_time = this.$util.dateToUnix(time[1]);
|
|
|
|
|
|
|
+ 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.searchTime = time;
|
|
|
this.params.page = 1;
|
|
this.params.page = 1;
|
|
|
this.getHistoryList();
|
|
this.getHistoryList();
|
|
|
this.getWeatherChart();
|
|
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() {
|
|
async getHistoryList() {
|
|
|
- this.loading = false;
|
|
|
|
|
|
|
+ this.pageLoading = true;
|
|
|
const res = await getWeatherHistory(this.params);
|
|
const res = await getWeatherHistory(this.params);
|
|
|
- console.log(res);
|
|
|
|
|
this.historyHeader = res.headers; // 头部列表
|
|
this.historyHeader = res.headers; // 头部列表
|
|
|
this.historyList = res.list; // 历史数据
|
|
this.historyList = res.list; // 历史数据
|
|
|
- this.loading = true;
|
|
|
|
|
|
|
+ this.total = res.nums;
|
|
|
|
|
+ this.pageLoading = false;
|
|
|
},
|
|
},
|
|
|
// 获取气象统计数据
|
|
// 获取气象统计数据
|
|
|
async getWeatherChart() {
|
|
async getWeatherChart() {
|
|
@@ -119,8 +137,6 @@
|
|
|
});
|
|
});
|
|
|
this.chartData = charts; // 统计数据集合
|
|
this.chartData = charts; // 统计数据集合
|
|
|
this.pickerList = pickes; // 下拉列表集合
|
|
this.pickerList = pickes; // 下拉列表集合
|
|
|
- console.log(this.pickerList);
|
|
|
|
|
- console.log(this.pickesId);
|
|
|
|
|
this.pickesId = pickes[0]?.value ?? ''; // 当前通道号
|
|
this.pickesId = pickes[0]?.value ?? ''; // 当前通道号
|
|
|
// 统计图显示数据
|
|
// 统计图显示数据
|
|
|
this.chartShowData = {
|
|
this.chartShowData = {
|
|
@@ -130,7 +146,6 @@
|
|
|
data: charts[this.pickesId] ?? []
|
|
data: charts[this.pickesId] ?? []
|
|
|
}]
|
|
}]
|
|
|
}
|
|
}
|
|
|
- console.log(this.chartShowData);
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|