zhxf-app/pages/deviceOffLine/deviceOffLine.vue

<template>
	<view class="site-wrapper" ref="contentWrapper">

		<!-- 筛选框start -->
		<view style="height:224rpx"></view>
		<view class="ding">
			<view class="cu-bar search bg-gray filter-section" style="with:50%;">
				<view class="search-form round bg-white" >
					<select name="" id="" placeholder="" v-model="dwtype">
						<option value="0">请选择设备类型</option>
						<option value="1">用传</option>
						<option value="2">水表</option>
						<option value="3">烟感</option>
						<option value="4">消防栓</option>
						<option value="5">液位</option>
						<option value="6">RTU</option>
						<option value="7">电气火灾</option>
						<option value="16">视频监测</option>
					</select>
				</view>
				
			</view>
			
			<view class="cu-bar search bg-gray filter-section">
				<view class="search-form round bg-white" style="margin-bottom:26rpx">
					<select name="" id="" placeholder="" v-model=" transfer_type">
						<option value="0">请选择传输方式</option>
						<option value="NB">NB</option>
						<option value="4G">4G</option>
						<option value="Lora">Lora</option>
					</select>
				</view>
				<view class="action">
					<button class="cu-btn bg-blue round" @click="searchData()">查询</button>
				</view>
			</view>
		</view>
		<!-- 筛选框end -->


		<!-- 设备列表start -->
		<block class="">
			<view class="processList">
				<view class="cu-list menu-avatar ">
					<view class="cu-item" v-for="(item,index) in deviceOffLineData" :key="index"  >
						<view class="cu-avatar lg" style="background-image:url(../../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.install_time}}</view>
						</view>
						
					</view>
				</view>
			</view>
		</block>
		<!-- 设备列表end -->


	</view>

</template>

<script>
	import json from '../../data/json.js';

	export default {
		data() {
			return {
				
				dwtype: 0,
				 transfer_type: 0,
				
				dwtype1: 0,
				 transfer_type1: 0,
				
				status_type:0,
				deviceOffLineData:json.deviceOffLineData,
				siteListRes: 0,
				siteName: '',
				type: '0',
				siteListData: [],
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				CustomBar: this.CustomBar,
			};
		},


		onPullDownRefresh() {
		
		},
		computed: {
			newSiteListData() {
				return this.siteListData.map(item => {
					this.$set(item, "isShow", false)
					return item
				})
			}

		},


		mounted() {
			document.addEventListener('click', (e) => {
				if (e.target.className != 'showDetail') {
					this.siteListData.forEach(item => {
						item.isShow = false
					})
				}
			})
		},
		onLoad(option) {
			this.status_type=option.status_type;
			this.getSiteList({"status_type":option.status_type,"company_code ":uni.getStorageSync('selectedCode')});
			
			let url = "";
			switch (parseInt(option.status_type)) {
				case 1:
					url = "离线"
					break;
				case 2:
					url = "在线"
					break;
				
				default:
					break;
			}
			uni.setNavigationBarTitle({
				title: url+"设备",
			});
		},
		
		// 自定义导航事件
		onNavigationBarButtonTap(e) {
			if (e.float == 'right') {
				alert("你点击了导出");
				
				this.exportData({
					"status_type":this.status_type,
					"transfer_type":this. transfer_type1,
					dwtype:this.dwtype1,
					company_code:uni.getStorageSync('selectedCode')
					
				})
				
			return;
			
			
				let exportUrl= this.$BASE_URL+`ExportModule/getStatusDetailsListExpor/status_type/${this.status_type}/company_code/${uni.getStorageSync('selectedCode')}/ transfer_type/${this. transfer_type1}/dwtype/${this.dwtype1}/`
				
				//#ifdef H5
				
				// window.open(URL,name,features,replace)
				
				
				// 通过创建a标签实现
				const link = document.createElement("a");
				link.href = exportUrl;
				// 对下载的文件命名
				// link.open = "设备注册管理数据表.xls";
				link.target="_blank"
				console.log(link)
				link.click();
				
				// window.open(exportUrl,true)
				//#endif
				
			
			} 
		},

		methods: {
			searchData() {
				this.getSiteList({
					" transfer_type": this. transfer_type,
					"dwtype": this.dwtype,
					'company_code': uni.getStorageSync('selectedCode'),
					"status_type":this.status_type
				})
				this. transfer_type1=this. transfer_type;
				this.dwtype1=this.dwtype;
			},


			async getSiteList(params) {
				const res = await this.$myRequest({
					url: 'StatusDetails/getStatusDetailsList',
					showLoading: true,
					data: params
				})
				this.siteListRes = 1;
				console.log(res.data.data)
				this.deviceOffLineData = res.data.data
			},
			
			// 导出
			async exportData(params) {
				const res = await this.$myRequest({
					url: 'ExportModule/getStatusDetailsListExpor',
					// showLoading: true,
					  responseType: 'blob',
					data: params
				})
				console.log(res);
				 const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
				
				 let url = window.URL.createObjectURL(blob);
				                let aLink = document.createElement('a');
				                aLink.style.display = 'none';
				                aLink.href = url;
								aLink.target="_blank";
				//                 aLink.setAttribute('download', res.headers['content-disposition'].split('=')[1]);
				                document.body.appendChild(aLink);
				                aLink.click();
				                document.body.removeChild(aLink); // 下载完成移除元素
				                window.URL.revokeObjectURL(url); // 释放掉blob对象
				
				
			},


			
		}

	}
</script>

<style>
	
</style>