province-uniapp-qinghai-ipad/pages/grainInfo/grainInfo.vue

<template>
	<view class="content">
		<u-popup :show="messageShow" mode="top"  @close="messageShow = false">
		        <view class="msg">
		            <text>{{message}}</text>
		        </view>
			</u-popup>
		<view class="search-bar">
			<u--form :model="searchForm" ref="searchForm">
				<u-form-item label="仓房名称:" prop="storehouseName" label-width="80px">
					<u--input v-model="searchForm.storehouseName"></u--input>
					
					<u-button type="primary" text="查询" class="btn" @tap="search"></u-button>
					<u-button text="重置" class="btn" @tap="reset"></u-button>
				</u-form-item>

			</u--form>
			<view class="exports">
				<u-button type="success" text="导出报表" class="btn" @tap="exportTable"></u-button>
				<view class="tip">温馨提示：仅可导出近30天内的数据。</view>
			</view>
		</view>
		<uni-table border stripe emptyText="暂无更多数据" :loading="this.loading">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center">序号</uni-th>
				<uni-th align="center">库区名称</uni-th>
				<uni-th align="center">仓房名称</uni-th>
				<uni-th align="center">仓温</uni-th>
				<uni-th align="center">最高粮温(℃)</uni-th>
				<uni-th align="center">最低粮温(℃)</uni-th>
				<uni-th align="center">平均粮温(℃)</uni-th>
				<uni-th align="center">同上次相比平均粮温</uni-th>
				<uni-th align="center">采集时间</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item, index) in tableData" :key="item.id">
				<uni-td align="center">{{ index + 1 }}</uni-td>
				<uni-td align="center">{{ item.orgName }}</uni-td>
				<uni-td align="center">{{ item.storehouseName }}</uni-td>
				<uni-td align="center">{{ item.inTemp }}</uni-td>
				<uni-td align="center">{{ item.tempMax }}</uni-td>
				<uni-td align="center">{{ item.tempMin }}</uni-td>
				<uni-td align="center">{{ item.tempAvg }}</uni-td>
				<uni-td align="center" v-html="compareText(item)"></uni-td>
				<uni-td align="center">{{ item.gatherTime }}</uni-td>
			</uni-tr>

		</uni-table>
		<uni-pagination show-icon="true" :total="pageInfo.total" :current="pageInfo.current" class="pagination" @change="paginationChang"></uni-pagination>
	</view>
</template>

<script>
	import simpleList from '@/components/simple-list/index'
	import { getList, exportData } from '@/api/grainInfo'
	import { server_host } from '@/config/system'
	import { errorMsg } from '@/utils/tools'
	export default {
		mixins: [simpleList],
		data() {
			return {
				searchForm: {
					storehouseName: null,
				},
				messageShow: false,
				message: null,
			}
		},
		methods: {
			getListFun() {
				return getList
			},
			compareText(item) {
				const code = item.compareLastTempAvg
				switch(code + '') {
					case '2': return '<span class="compare-text" style="color: blue;"> ↑上升 </span>'
					case '3': return '<span class="compare-text" style="color: red;"> ↓下降 </span>'
					default: return '<span class="compare-text"> - </span>'
				}
			},
			exportTable() {
				uni.downloadFile({
					url: `${server_host}/statisticalReport.info/grainTemp/exportExcel`,
					header: {
						token: getApp().globalData.token
					},
					success: (res) => {
						 if (res.statusCode === 200) {
							console.log('下载成功', res.tempFilePath);
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: (ss) => {
									console.log('save finish', ss);
									uni.openDocument({
										filePath: ss.savedFilePath,
										showMenu: true,
										success: (or) => {
											console.log('open document success', or);
										},
										fail: (err) => {
											console.log('open doc fail', err);
											this.message = `导出成功到 ${ss.savedFilePath}`
											this.messageShow = true
											setTimeout(() => {
												this.messageShow = false
											}, 5_000)
										}
									})
								}
							})
						}else {
							errorMsg('导出失败 - 01')
						}
					},
					fail: (err) => {
						errorMsg('导出失败')
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 10px;
		.btn {
			width: 100px;
			margin-left: 5px;
		}
		.tip {
			color: red;
		}
		.exports {
			margin-bottom: 10px;
		}
	}
	.msg {
		padding-left: 10px;
	}
	.search-bar {
		
	}
</style>