jp-housekeep-manage/pages/equipmentInformation/equipmentInformation.vue

<template>
	<view>
		<u-navbar title="设备管理" title-color="#101010"></u-navbar>
		<!-- 下拉框 -->
		
		<u-select title="" v-model="tabsFrom.show1" :defaultValue="[current2]"
		 :list="childList" value-name="id" label-name="name"
			@confirm="selector1confirm"  >
		</u-select>
		<!-- 标签 -->
		<view class="tabs-box" >
			
			<view class="tabs" :class="'tabs-len-'+merchantList1.length"  v-show="companyList.length>1"
			 :style="{width: companyList.length>3 ? '' : '100%'}">
				<u-tabs-one  v-if="utabsone"
				:list="merchantList1" :is-scroll="false" inactive-color="#999999" active-color="#666666"
				 :current="current" @change="change"></u-tabs-one>
			</view>
			<view class="more" @click="popShow=true" v-if="companyList.length >= 4">
				<u-icon name="arrow-down" color="#fff" size="40"></u-icon>
			</view>
		</view>
		<!-- 标签弹出层 -->
		<u-popup v-model="popShow" duration="10" mode="top" :negative-top="88" border-radius="16">
			<view class="popup-tabs">
				<view class="tabs">
					<u-tabs :list="merchantList1" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<view class="more">
					<u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
				</view>
			</view>
			<view class="tabs-options">
				<view class="item" v-for="(item, index) in merchantList2" :key="index"
					@click="merchantChange(item,index)">
					{{item.name}}
				</view>
			</view>
		</u-popup>
		
		<view class="electronicMonitoring-title"
		 @click="titleCk"
		 v-if="childList&&childList.length>0" >
			<view>
				{{childListName}}
			</view>
			<view v-show="childList.length>1">
				<u-icon name="arrow-down" color="#fff"></u-icon>
			</view>
		</view>
		<u-select v-model="show1" mode="single-column" :list="deviceList" @confirm="deviceChange"></u-select>

		<u-select v-model="show2" mode="single-column" :list="companyList" @confirm="companyChange"></u-select>

		<!-- 设备信息 -->
		<view class="infos-content">
			<view class="item" v-for="(item,index) in materList" :key="index"
				@click="gotoUrl('/pages/equipmentInformation/equipmentDetails?id='+item.id)">
				<view class="item-icon" v-if="item.classify == '1'">
					<image class="img" src="@/assets/img/energy1.svg" mode=""></image>
				</view>
				<view class="item-icon" v-if="item.classify == '2'">
					<image class="img" src="@/assets/img/transformer2.svg" mode=""></image>
				</view>
				<view class="item-name">
					<view class="name1">
						{{replaceLastTwoWords(item.name)}}
					</view>
					<view class="name2">
						{{item.deviceTypeN}}
					</view>
				</view>
				<view class="more">
					<u-icon name="arrow-right" color="#acacac" size="28"></u-icon>
				</view>
			</view>
		</view>
		<u-divider :isnone="materList.length==0" nonetext="暂无记录" border-color="#CFD2D5" style="margin-top: 10px">
			已经到底了</u-divider>
			
		<!-- 底部 -->
		<view class="bottom" v-if="type == '1'">
			<button class="scan" @click="getScanCode()">
				<image class="img" src="@/assets/img/riLine-qr-scan-2-line.svg" mode=""></image>
				扫码识别
			</button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	import * as API_electricityMeter from '@/apis/pagejs/electricityMeter.js'
	import * as WxJsApi from '@/apis/utils/wxJsApi.js'
	
	export default {
		data() {
			return {
				companyId: '',
				deviceType: '',
				pageIndex: 1,
				recordsTotal: 0,
				materList: [],
				type: '', //绑定权限
				device: '全部设备',
				company: '全部公司',
				show1: false, // 设备选择
				show2: false, // 状态选择
				deviceList: [],
				companyList: [],
				isRefresh: false,
				
				utabsone:true,
				companyType:0,
				incomeExpenditureObj:{},
				opCompanyId: '',
				childList:[],
				companyListMain:[],
				current2:0,
				childInfo:{},
				companyInfo:{},
				popShow: false,
				current: 0,
				tabsFrom: {
					show1: false,
					show1Index: 0,
					show2Index: '',
					show2: false,
					show1Text: "全部类型",
					show2Text: "全部时间",
					
				},
				merchantList1: [],
				merchantList2: [],
			}
		},
		onLoad() {
			// WxJsApi.getWxConfig([ 'scanQRCode']).then((res) => {
			// 	// //(res)
			// }).catch(error => {
			// 	//(res)
			// })
			
		},
		computed:{
			childListName(){
				return this.childInfo.name;
			},
			
		},
		onReady() {
			this.getMaterList();
			this.getfindByOpenId();
			this.getDeviceList();
			//this.getCompanyInfoList();
		},
		onReachBottom() {
			if (this.materList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			merchantChangeApi() {
			
				this.popShow=false
				
				this.getMaterList(1);
				
			},
			titleCk() {
				if(this.childList.length>1){
					this.tabsFrom.show1 = true
				}
				
			},
			selector1confirm(e) {
				//this.getHomePageKwh()
				
				console.log(e)
				this.companyId=e[0].value
			
				this.current2=e[0].i
				
				this.childInfo=this.childList[this.current2];
				uni.showLoading()
				
				this.merchantChangeApi()
			},
			change(index) {
				this.current = index;
				this.current2=0;
				this.childList=[]
				var company= this.merchantList1[index]
				if(company.id!=''){
					this.childList=company.childList;
					if(this.childList&&this.childList.length){
						this.companyId = this.childList[0].id;
						this.childInfo=this.childList[0]
					}else{
						this.childList=[]
						this.companyId =company.id
						this.childInfo=company
					}
					
					
				}else{
					this.companyId =''
					
				}
				this.companyInfo=company;
				
				this.merchantChangeApi()
			},
			merchantChange(item, index) {
				if(this.current==0){
					this.current=1;
				}
				var m = company;
				var n = this.merchantList1[this.current];
				this.merchantList1[this.current] = m;
				this.merchantList2[index] = n;
				//this.$forceUpdate()
				this.utabsone=false
				this.companyId = company.id;
				
				this.companyInfo=company
				
				
				if(company.id!=''){
					this.childList=company.childList;
					if(this.childList&&this.childList.length){
						this.companyId = this.childList[0].id;
						this.childInfo=this.childList[0]
					}else{
						this.childList=[]
						this.companyId =company.id
						this.childInfo=company
					}	
				}else{
					this.companyId =''	
				}
				
				this.merchantChangeApi()
				this.popShow = false;
				
			},
			//扫码识别
			getScanCode() {
				this.getScanCode1()
				// var code="JPDJ01-0001"
				// this.getScanCode2(code)
			},
			getScanCode1() {
				WxJsApi.scanQRCode(1,null,["qrCode","barCode"]).then(res => {
					console.log("scanQRCode1------" + res)
					if (res) {
						this.getScanCode2(res)
					}
				}).catch(error => {
		
				})
			},
			getScanCode2(code) {
				console.log("scanQRCode2------" + code)
				if(code){
					if(code.indexOf(",")>-1){
						var sz= code.split(",")
						if(sz.length==2){
							uni.navigateTo({
								url: '/pages/equipmentInformation/equipmentDetails?meterNo='+sz[1]
							})
						}
					}else{
						uni.navigateTo({
							url: '/pages/equipmentInformation/equipmentDetails?meterNo='+code
						})
					}
				}
			},
			// 设备查询
			companyChange(e) {
				// console.log(e);
				this.companyId = e[0].value;
				this.company = e[0].label;
				
				this.getMaterList(true);
			},
			// 设备查询
			deviceChange(e) {
				// console.log(e);
				this.deviceType = e[0].value;
				this.device = e[0].label;
				
				this.getMaterList(true);
			},
			//查询公司list
			getCompanyInfoList() {
				this.companyKwhList = [];
							
				API.deviceCompanyList().then((response) => {
					var list = response.data.companyInfoList;
					this.companyListMain=response.data.companyInfoList;
					if(list.length==1&&list[0].childList&&list[0].childList.length){
						list=list[0].childList
						
					}
					
					this.companyList = list;
					
					var mList1 = [];
					var mList2 = [];
					mList1.push({
						id: '',
						name: '全部'
					});
							
					for (var i = 0; i < list.length; i++) {
						if (i >= 3) {
							mList2.push(list[i]);
						} else {
							mList1.push(list[i]);
						}
							
						
					}
							
					this.merchantList1 = mList1;
					this.merchantList2 = mList2;
					this.companyId = mList1[0].id;
					
							
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//查询设备list
			getDeviceList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_electricityMeter.findByName({
					name: '设备类型'
				}).then((res) => {
					uni.hideLoading();
					var list = [];
					list = res.data.map(item => {
						return {
							label: item.name,
							value: item.value
						}
					})
					list.unshift({
						label: '全部设备',
						value: ''
					})
					this.deviceList = list;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getMaterList();
			},
			//设备信息list
			getMaterList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.materList = [];
					this.pageIndex = 1;
				}
				API_electricityMeter.materList({
					pageIndex: this.pageIndex,
					pageSize: 10,
					companyId: this.companyId,
					deviceType: this.deviceType
				}).then((res) => {
					uni.hideLoading();
					this.materList = [
						...this.materList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//扫码权限
			getfindByOpenId() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					uni.hideLoading();
					this.type = response.data.companyInfo.type;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>


	// 下拉框
	.dropdown {
		background-color: #fff;
		position: sticky;
		top: 88rpx;
		z-index: 999;
		padding: 18rpx 46rpx;
		display: flex;
		border-bottom: 1px solid rgba(245, 245, 245, 1);

		.dropdown-item {
			width: 50%;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.text{
				max-width: 80%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	// 设备信息
	.infos-content {
		background-color: #fff;
		margin-top: 24rpx;

		.item {
			padding: 24rpx 32rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(245, 245, 245, 1);

			.item-icon {
				width: 72rpx;
				height: 72rpx;
				border-radius: 4px;
				background-color: rgba(219, 234, 255, 1);
				display: flex;
				align-items: center;
				justify-content: center;

				.img {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.item-name {
				margin-left: 30rpx;
				name1 {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-weight: bold;
				}

				.name2 {
					color: rgba(119, 119, 119, 1);

				}
			}

			.more {
				margin-left: auto;
			}
		}
	}


	// 底部
	.bottom {
		background-color: rgba(255, 255, 255, 1);
		border: 1px solid rgba(232, 232, 232, 1);
		padding: 24rpx 32rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		.scan {
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50px;
			background: linear-gradient(-88.46deg, rgba(34, 109, 198, 1) 2.59%, rgba(9, 158, 237, 1) 97.02%);

			.img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}
	}
	
	
	.tabs-box {
		background-color: #fff;
		display: flex;
		align-items: center;
		
		padding-right: 32rpx;
		justify-content: space-between;
		border-bottom: 1px solid rgba(232, 232, 232, 1);
	
		.tabs {
			width: 97%;
		}
		.more{
			padding-right: 12rpx;
		}
	
		.icon {
			margin-left: auto;
			margin-right: 24rpx;
		}
	}
	.tabs-len-1{
		
	}
	.tabs-len-2{
		/deep/.u-tab-item {
			// max-width: 39% !important;
			// flex: none !important;
		}
	}
	.tabs-len-3{
		/deep/.u-tab-item {
			max-width: 39% !important;
			flex: none !important;
		}
	}
	.tabs-len-4{
		/deep/.u-tab-item {
			max-width: 26% !important;
			flex: none !important;
		}
	}
	/deep/.u-tab-item:first-child {
		width: 20% !important;
		flex: none !important;
	}
	
	.popup-tabs {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 32rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		padding-top: 32rpx;
	
		.tabs {
			width: 88%;
		}
	}
	
	.tabs-options {
		display: flex;
		padding: 64rpx 32rpx 0;
		flex-wrap: wrap;
	
		.item {
			width: 25%;
			margin-bottom: 40rpx;
		}
	}
	.electronicMonitoring-title{
			display: flex;
			    align-items: center;
			padding: 0px 32rpx;
			    justify-content: space-between;
				height: 120rpx;
				font-size: 36rpx;
	background-color: rgba(22,119,255,1);
	color:#fff;
	
	
		}
</style>