zhgdyunapp/pages/areaTree/areaTree.vue

<template>
	<view class="areaTreePage">
		<scroll-view scroll-y="true" class="pageContent">
		<headers :showBack="pageType=='video'?false:true">
			<view class="headerName">
				{{headerName}}
			</view>
		</headers>
		<view class="areaTreeBox">
			<view class="areaItem" v-for="(item,index) in mapData" :key="index">
				<view class="areaTitle" @click="expandSon(index)">
					{{item.name}} <text v-if="!item.projectName">({{item.projectNum}})</text>
					<text v-if="pageType=='video'&&item.projectName">({{item.videoNum}})</text>
					<view class="statusBox" v-if="pageType=='markRoom'&&item.projectName">
						<image v-show="item.standardDevStopUsingNum!=0" class="icon-status" src="/static/no_alarm.png" style="width: 9px;height: 10px;"></image>
						<image v-show="item.standardDevNotOnline!=0" class="icon-status" src="/static/offline_alarm.png" style="width: 10px;height: 10px;"></image>
						<image v-show="item.standardTemperatureAlarmNum!=0" class="icon-status" src="/static/temp_alarm.png" style="width: 8px;height: 13px;"></image>
						<image v-show="item.standardHumidityAlarmNum!=0" class="icon-status" src="/static/humi_alarm.png" style="width: 8px;height: 11px;"></image>
					</view>
					<uni-icons v-show="item.showSon&&item.list" class="arrow" type="arrowup" size="20"></uni-icons>
					<uni-icons v-show="!item.showSon&&item.list" class="arrow" type="arrowdown" size="20"></uni-icons>
				</view>
				<view class="areaInner" v-if="item.list&&item.showSon">
					<view class="areaInnerItem" v-for="(item2,index2) in item.list" :key="index2">
						<view class="areaTitle2" @click="expandSon2(index,index2)">
							{{item2.name}} 
							<text v-if="!item2.projectName">({{item2.projectNum}})</text>
							<text v-if="pageType=='video'&&item2.projectName">({{item2.videoNum}})</text>
							<view class="statusBox" v-if="pageType=='markRoom'&&item2.projectName">
								<image v-show="item2.standardDevStopUsingNum!=0" class="icon-status" src="/static/no_alarm.png" style="width: 9px;height: 10px;"></image>
								<image v-show="item2.standardDevNotOnline!=0" class="icon-status" src="/static/offline_alarm.png" style="width: 10px;height: 10px;"></image>
								<image v-show="item2.standardTemperatureAlarmNum!=0" class="icon-status" src="/static/temp_alarm.png" style="width: 8px;height: 13px;"></image>
								<image v-show="item2.standardHumidityAlarmNum!=0" class="icon-status" src="/static/humi_alarm.png" style="width: 8px;height: 11px;"></image>
							</view>
							<uni-icons v-show="item2.showSon&&item2.list" class="arrow" type="arrowup" size="20"></uni-icons>
							<uni-icons v-show="!item2.showSon&&item2.list" class="arrow" type="arrowdown" size="20"></uni-icons>
						</view>
						<view class="projectBox" v-if="item2.list&&item2.showSon">
							<view class="projectItem" v-for="(item3,index3) in item2.list" :key="index3">
								
								<view class="projectTitle" @click="viewVideoListFn(item3)">
									{{item3.name}} <text v-if="pageType=='video'&&item3.projectName">({{item3.videoNum}})</text>
									<view class="statusBox" v-if="pageType=='markRoom'&&item3.projectName">
										<image v-show="item3.standardDevStopUsingNum!=0" class="icon-status" src="/static/no_alarm.png" style="width: 9px;height: 10px;"></image>
										<image v-show="item3.standardDevNotOnline!=0" class="icon-status" src="/static/offline_alarm.png" style="width: 10px;height: 10px;"></image>
										<image v-show="item3.standardTemperatureAlarmNum!=0" class="icon-status" src="/static/temp_alarm.png" style="width: 8px;height: 13px;"></image>
										<image v-show="item3.standardHumidityAlarmNum!=0" class="icon-status" src="/static/humi_alarm.png" style="width: 8px;height: 11px;"></image>
									</view>
									<!-- <uni-icons v-show="item3.showSon&&item3.list" class="arrow" type="arrowup" size="20"></uni-icons>
									<uni-icons v-show="!item3.showSon&&item3.list" class="arrow" type="arrowdown" size="20"></uni-icons> -->
								</view>
								<view class="" v-if="item3.list">
									<view class="" v-for="(item4,index4) in item3.list" :key="index4">
										<view class="projectTitle projectTitle2" @click="viewVideoListFn(item4)">
											{{item4.name}} <text v-if="pageType=='video'&&item4.projectName">({{item4.videoNum}})</text>
											<view class="statusBox" v-if="pageType=='markRoom'">
												<image v-show="item4.standardDevStopUsingNum!=0" class="icon-status" src="/static/no_alarm.png" style="width: 9px;height: 10px;"></image>
												<image v-show="item4.standardDevNotOnline!=0" class="icon-status" src="/static/offline_alarm.png" style="width: 10px;height: 10px;"></image>
												<image v-show="item4.standardTemperatureAlarmNum!=0" class="icon-status" src="/static/temp_alarm.png" style="width: 8px;height: 13px;"></image>
												<image v-show="item4.standardHumidityAlarmNum!=0" class="icon-status" src="/static/humi_alarm.png" style="width: 8px;height: 11px;"></image>
											</view>
										</view>
									</view>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
		<footers v-if="pageType=='video'" :activeTab="'videoManage'"></footers>
	</view>
</template>

<script>
	import footers from "../../components/footers/footers.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import headers from "../../components/headers/headers.vue"
	export default {
		components:{footers},
		data() {
			return {
				searchsn:'',
				userInfo:null,
				mapData:[],
				headerName:'集团',
				pageType:'video'
			};
		},
		onLoad(options) {
			console.log(options.type)
			if(options.type&&options.type!=undefined&&options.type!='undefined'){
				this.pageType=options.type
			}
			// uni.setStorageSync('pageType',this.pageType)
		},
		mounted() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.initData(true);
		},
		methods:{
			//展开二级
			expandSon(index){
				if(!this.mapData[index].list){
					uni.setStorageSync('projectDetail',JSON.stringify(this.mapData[index]))
					this.viewVideoListFn(this.mapData[index])
				}else{
					if(this.mapData[index].showSon){
						// this.mapData[index].showSon=false
						this.$set(this.mapData[index], `showSon`, false)
					}else{
						// this.mapData[index].showSon=true
						this.$set(this.mapData[index], `showSon`, true)
					}
				}
				
				// console.log(this.mapData)
			},
			//展开三级
			expandSon2(index,index2){
				if(!this.mapData[index].list[index2].list){
					uni.setStorageSync('projectDetail',JSON.stringify(this.mapData[index].list[index2]))
					this.viewVideoListFn(this.mapData[index].list[index2])
				}else{
					if(this.mapData[index].list[index2].showSon){
						// this.mapData[index].showSon=false
						this.$set(this.mapData[index].list[index2], `showSon`, false)
					}else{
						// this.mapData[index].showSon=true
						this.$set(this.mapData[index].list[index2], `showSon`, true)
					}
				}
				
				// console.log(this.mapData)
			},
			
			viewVideoListFn(item){
				if(this.pageType=='video'){
					uni.navigateTo({
						url:'../videoManage/videoList?sn='+item.projectSn
					})
				} else if(this.pageType=='markRoom'){
					uni.setStorageSync('projectDetail', JSON.stringify({projectSn:item.projectSn,projectName:item.projectName}))
					uni.navigateTo({
						url:'../projectEnd/markRoom/markRoom?sn='+item.projectSn+'&projectName='+item.projectName
					})
				}else if(this.pageType=='backend'&&item.projectSn){
					uni.setStorageSync('projectDetail',JSON.stringify(item))
					// if(this.userInfo.styleType==1){
						uni.navigateTo({
							url:'../projectEnd/projectIndex/projectIndex?sn='+item.projectSn+'&projectName='+item.projectName
						})
					// }else{
					// 	uni.redirectTo({
					// 		url: '/pages/workstation/workstationIndex/workstationIndex?sn='+item.projectSn+'&projectName='+item.projectName
					// 	})
					// }
					
				}
				
			},
			initData(type) {
				var that = this
				switch (that.userInfo.accountType) {
					case 2:
						this.searchsn=that.userInfo.headquartersSn
						break;
					case 3:
						this.searchsn=that.userInfo.sn
						break;
					case 4:
						this.searchsn=that.userInfo.sn
						break;
					case 5:
						this.searchsn=that.userInfo.sn
						break;
					case 7:
						this.searchsn=that.userInfo.sn
						break;
				}
				
				if(that.userInfo.accountType==5){
					
				}else{
					this.loadData(type);
				}
				
			},
			//获取所有企业下区域数据
			loadData(type) {
				//type：true代表第一调用
				var that = this
				this.sendRequest({
					url: "xmgl/company/getComapnyStatisticsList",
					data: {sn: this.searchsn,standardType:this.pageType=='markRoom'?1:0},
					method: "POST",
					success(res){
						that.mapData = res.result.companyList?res.result.companyList:res.result.projectList
						if(res.result.companyInfo){
							that.headerName = res.result.companyInfo.companyName
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.statusBox{
		display: inline-flex;
		align-items: center;
		.icon-status{
			margin-left: 8px;
		}
	}
.areaTreePage{
	background-color: white;
	height: 100%;
	color: $uni-text-color;
}
// .areaTreeBox{
// 	padding: 0 10px;
// }
.areaInner{
	border-bottom: 1px solid rgba(221,221,221,0.67);
}
.areaTitle{
	font-size: 15px;
	border-bottom: 1px solid rgba(221,221,221,0.67);
	padding: 10px 15px;
}
.arrow{
	float: right;
	opacity: 0.7;
}
.areaTitle2{
	font-size: 14px;
	padding: 10px 15px 10px 30px;
}
.projectTitle{
	font-size: 14px;
	padding: 10px 15px 10px 30px;
}
.projectTitle2{
	padding-left: 50px;
}
.projectBox{
	background-color: rgba(221,221,221,0.26);
}
</style>