xfapp/pages/processList/export/export.vue

<template>
	<view class="processWrapper exportBody ">
		<view style="height:98rpx"></view>
		<view class="ding">
			<!-- <calendar></calendar> -->
			<view class="example-body">
				
				<!-- <view class="example-body">
					<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" />
				</view> -->
				
				
				<uni-datetime-picker v-model="datetimerange" type="daterange" start-placeholder="请选择开始时间"
					end-placeholder="请选择结束时间" start="2000-3-20 12:00:00" end="2025-10-20 20:00:00" rangeSeparator="至" />
			</view>
		</view>

		<block>
			<view class="processList">
				<view class="cu-list menu-avatar">
					<view class="cu-item" v-for="(item,index) in getExportData" :key="index">
						<view class="cu-avatar lg">
							
							<image class="image-bg" :src="item.clzt==0?'/static/process-icon.png':'/static/processed-icon.png'"/>
							<!-- <image class="image-bg"
								:src="item.device_state=='离线'?'/static/device-icon.png':'/static/device-icon.png'" /> -->
						</view>
						<view class="content">
							<view class="pro-title">
								<view class="cut" >{{item.owner_name}}</view>
							
							</view>
							<view class="pro-des  ">
								<view class="text-cut">{{item.unitinfo}}</view>
							</view>
							<view class="pro-date ">{{item.time}}</view>
						</view>
						<view class="action" style="z-index:99">
							<view class="unProcess"  v-if="item.clzt==0">未处理</view>
							<view class="processed" v-else>已处理</view>
							
							<!-- <view :class="item.device_state=='离线'?'':'processed'">{{item.device_state}}</view> -->
							
						</view>
					</view>
					<view class=" text-center margin-top" v-if="!this.getExportData.length&&this.dataRes">暂无数据...</view>
					<view v-show="isLoadMore&&page>1">
						<uni-load-more :status="loadStatus"></uni-load-more>
					</view>
				</view>
			</view>
		</block>
		<view v-if="this.getExportData.length>0" class="padding-lr padding-bottom-lg bg-white" style="position:fixed;bottom:0;width:100%">
			<view class="btn-area">
				<button class="bg-blue  round missReport margin-top" @tap="exportButton()">导 出 </button>
			</view>
		</view>



	</view>
</template>
<script>
	export default {
		data() {
			return {
				getExportData: [],
				dataRes: 0,
				datetimerange: ['', ''],
				keyWords:'',
				type:0,
				start_time:'',
				end_time:'',
				
				page: 1,
				pageSize: 10,
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
			};
		},
		onLoad: function(option) {
			this.type=option.type
			this.getData({
				"company_code": uni.getStorageSync('selectedCode'),
				"type":this.type,
				"start_time": this.start_time,
				"end_time": this.end_time,
				"page": this.page,
				"pageSize": this.pageSize,
			})

		},
		watch: {
			datetimerange(newval) {
				this.start_time=newval[0];
				this.end_time=newval[1]
				
				this.getExportData = [],
					this.page = 1,
				this.getData({
					"company_code": uni.getStorageSync('selectedCode'),
					"type":this.type,
					"start_time":newval[0],
					"end_time": newval[1],
					"page": this.page,
					"pageSize": this.pageSize,
				})
			}
		},
		
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page += 1
				this.getData({
					"company_code": uni.getStorageSync('selectedCode'),
					"type":this.type,
					"start_time": this.start_time,
					"end_time": this.end_time,
					"page": this.page,
					"pageSize": this.pageSize,
				})
		
			}
			// alert(this.page)
		},
		
		methods: {
			async getData(params = {}) {
				this.dataRes = 0;
				const res = await this.$myRequest({
					url: 'ComprehensiveAlarm/getIntegratedAlarmList', //综合告警列表渲染
					data: params,
					showLoading: true
				})
		
				this.dataRes = 1;

				if (res.data.data.length>0) {
					this.getExportData = this.getExportData.concat(res.data.data)
				
					if (res.data.data.length < this.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
						this.isLoadMore = true
						this.loadStatus = 'nomore'
					} else {
						this.isLoadMore = false
					}
				} else {
					this.isLoadMore = true
					this.loadStatus = 'nomore'
				}
				
			},
			exportButton() {
				//#ifdef H5
				
				var start_time =this.datetimerange[0]?`start_time/${this.datetimerange[0]}/`:'';
				var end_time =this.datetimerange[1]?`end_time/${this.datetimerange[1]}/`:'';
				let exportUrl = this.$BASE_URL+
					`ExportModule/getIntegratedAlarmListExpor/${start_time}${end_time}type/${this.type}/company_code/${uni.getStorageSync('selectedCode')}/`	
				// alert(exportUrl)
	
				
				var ua = window.navigator.userAgent.toLowerCase();
				
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					uni.showModal({
						showCancel: false,
						content: '如需下载，请在默认浏览器中操作',
						success: function(res) {
							window.location.href = exportUrl;
						}
					});
				} else {
					window.location.href = exportUrl;
				}
				//#endif

			}





		}
	}
</script>

<style lang="scss">


</style>