xfapp/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 selectBox" >
					<select name="" id="" placeholder="" v-model="dwtype" clearable>
						<option value="">请选择设备类型</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>
					<text class="icon iconfont margin-right-sm margin-left">&#xe63d;</text>
				</view>
				
			</view>
			
			<view class="cu-bar search bg-gray filter-section">
				<view class="search-form round bg-white selectBox" style="margin-bottom:26rpx">
					<select name="" id="" placeholder="" v-model=" transfer_type" clearable>
						<option value="">请选择传输方式</option>
						<option value="NB">NB</option>
						<option value="4G">4G</option>
						<option value="Lora">Lora</option>
					</select>
					<text class="icon iconfont margin-right-sm margin-left">&#xe63d;</text>
				</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=" site-item text-center margin-top" v-if="!this.deviceOffLineData.length&&this.deviceOffLineDataRes==1">暂无数据...</view>
					<view class="cu-item" v-for="(item,index) in deviceOffLineData" :key="index"  >
						<view class="cu-avatar lg">
							<image class="image-bg" src="/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: '',
				 transfer_type: '',
				
				dwtype1: 0,
				 transfer_type1: 0,
				
				status_type:0,
				deviceOffLineData:[],
				deviceOffLineDataRes:0,
				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') {

				//#ifdef H5
				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}/`
				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
			} 
		},

		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;
				this.deviceOffLineDataRes=1;
				
				//#ifdef H5
				if(this.deviceOffLineData.length<1){
					document.querySelector('.uni-page-head-ft .uni-page-head-btn .uni-btn-icon').style.display='none';
				}else{
					document.querySelector('.uni-page-head-ft .uni-page-head-btn .uni-btn-icon').style.display='block';
				}
				//#endif
				
			},
			
			// 导出
			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";
				                document.body.appendChild(aLink);
				                aLink.click();
				                document.body.removeChild(aLink); // 下载完成移除元素
				                window.URL.revokeObjectURL(url); // 释放掉blob对象
				
				
			},


			
		}

	}
</script>

<style>
	
</style>