smart-app/pages/informationProgress/informationProgress.vue

<template>
	<view>
		<!-- 头部 -->
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">资料进度</block>
			<block slot="content"></block>
			<block slot="right">
				<view class=" flex justify-center">
					<button @click="search()" class="cu-btn round line-blue text-white" style="width: 160rpx;height: 66rpx;padding: 0;">
						<image src="/static/index/search-white.png" style="width: 32rpx;height: 32rpx;margin-right: 16rpx;"></image>搜索
					</button>
				</view>
			</block>
		</cu-custom>
		<scroll-view scroll-y="true" class="margin-bottom" style="padding-bottom: 300rpx;">
			<view class="cu-list menu card-menu margin-top-sm">
				<view class="cu-item" @click="allData()">
					<view class="content">
						<text style="font-size: 34rpx;font-weight: bold;" :class="allSelect?'indexColor':''">全部工程</text>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in treeData" :key="item.id" class="treeData_b">
				<view class="treeData_1" @click="treeTap(index+1,item)">
					<view style="font-weight: bold;font-size: 34rpx;" :class="item.selected&&!allSelect?'indexColor':''">{{item.name}}</view>
					<view v-if="item.children.length>0">
						<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="show == index + 1"></image>
						<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="show != index + 1 || show == 0"></image>
					</view>
				</view>
				<view v-for="(second,seconds) in item.children" :key="second.id" v-if="show == index + 1">
					<view class="treeData_1s treeData_2" @click="secondTap(seconds + 1,second)">
						<view :class="second.selected&&!allSelect?'indexColor':''">{{second.name}}</view>
						<view v-if="second.children.length>0">
							<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showsecond == seconds + 1"></image>
							<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showsecond != seconds + 1 || showsecond == 0"></image>
						</view>
					</view>
					<view v-if="showsecond == seconds + 1" :style="{'padding-bottom': second.children.length>0 ? '22rpx':''}">
						<view v-for="(three,threes) in second.children" :key="three.id" class="treeData_three">
							<view class="treeData_1s treeData_3" @click="threeTap(threes + 1,three)">
								<view :class="three.selected&&!allSelect?'indexColor':''">{{three.name}}</view>
								<view v-if="three.children.length>0">
									<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showthree == threes + 1"></image>
									<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showthree != threes + 1 || showthree == 0"></image>
								</view>
							</view>
							<view v-if="showthree == threes + 1" v-for="(four,fours) in three.children" :key="four.id">
								<view class="treeData_1s treeData_3" @click="fourTap(fours + 1,four)">
									<view style="padding-left: 22rpx;" :class="four.selected&&!allSelect?'indexColor':''"><text style="margin-right: 10rpx;">◈</text>{{four.name}}</view>
									<view v-if="four.children.length>0">
										<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showfour == fours + 1"></image>
										<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showfour != fours + 1 || showfour == 0"></image>
									</view>
								</view>
								<view v-if="showfour == fours + 1" v-for="(five,fives) in four.children" :key="five.id">
									<view class="treeData_1s treeData_3" @click="fiveTap(fives + 1,five)">
										<view style="padding-left: 44rpx;" :class="five.selected&&!allSelect?'indexColor':''"><text style="margin-right: 10rpx;">➣</text>{{five.name}}</view>
										<view v-if="five.children.length>0">
											<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showfive == fives + 1"></image>
											<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showfive != fives + 1 || showfive == 0"></image>
										</view>
									</view>
									<view v-if="showfive == fives + 1" v-for="(six,sixs) in five.children" :key="six.id">
										<view class="treeData_1s treeData_3" @click="sixTap(sixs + 1,six)">
											<view style="padding-left: 66rpx;" :class="six.selected&&!allSelect?'indexColor':''"><text style="margin-right: 10rpx;">•</text>{{six.name}}</view>
											<view v-if="six.children.length>0">
												<image src="/static/information/shang.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showsix == sixs + 1"></image>
												<image src="/static/information/xia.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;" v-if="showsix != sixs + 1 || showsix == 0"></image>
											</view>
										</view>
										<view v-if="showsix == sixs + 1" v-for="(seven,sevens) in six.children" :key="seven.id">
											<view class="treeData_1s treeData_3" @click="sevenTap(sevens + 1,seven)">
												<view style="padding-left: 88rpx;" :class="seven.selected&&!allSelect?'indexColor':''">{{seven.name}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>


		<!-- 底部-->
		<view v-if="modalShow" class="shadow foot" style="background-color: #0A8CD5;color: #fff;position: fixed; z-index: 999; bottom: 0;width: 100%;padding-bottom: calc(var(--window-bottom) + 20px);">
			<view class="padding-sm solid-bottom-type" style="display: flex;align-items: center;position: absolute;left: 0;right: 0;top: -80rpx;height: 80rpx;opacity: 0.9;background-image: linear-gradient(#91C9E8, #0A8CD5);box-shadow: 0px -1px 2px #D0D0D0;">
				<image class="login-img" src="/static/index/label.png"></image>
				<view style="overflow-x: scroll;width: 680rpx;margin-left: 16rpx;">
					<view class="text-white" style="white-space : nowrap;font-weight: bold;">{{path}}</view>
				</view>
			</view>
			<view class="padding-sm">
				<view class="flex">
					<view class="cu-progress round" style="border: 4rpx solid #fff;background-color: #fff;margin-top: 16rpx;">
						<view class="bg-yellow" :style="width" style="border-radius: 0 30rpx 30rpx 0;"></view>
					</view>
				</view>
				<view class="flex margin-top-sm justify-between">
					<view class="round">
						总工序 {{processNum}}
					</view>
					<text class="margin-left">已完成{{percentage}}%</text>
				</view>
			</view>
		</view>

		<view class="toTop">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				treeData: [],
				show: 0, //一级状态
				showsecond: 0, //二级状态
				showthree: 0, //三级状态
				showfour: 0, //四级状态
				showfive: 0, //五级状态
				showsix: 0, //六级状态
				showseven: 0, //七级状态
				modalShow: false,
				path: "",
				percentage:"",
				width:"",
				processNum:"",
				allSelect:false,//是否选中全部
			}
		},
		onLoad() {
			this.findDataProgress();
		},
		methods: {
			findDataProgress() {
				var that = this;
				var contractId = uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id).contractId;
				that.http.request('/app/divideClient/findDataProgress', {
					contractId: contractId
				}).then((result) => {
					if (result.datas != null) {
						that.treeData = result.datas[0].children;
						that.text(that.treeData);
					}
				})

			},
			search() {
				uni.setStorageSync("pageType", 1); //区分搜索页面跳转
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			/* 获取节点的资料进度 */
			handleNodeClick(data) {
				var that =this;	
					that.http.request("/app/divideClient/countInstance",{ids:data.id,contractId:""}).then((res)=>{
						var num = res.data*100
						that.percentage = Math.round(num);
						that.width ="width:"+Math.round(num)+"%;";
						that.processNum = res.size;
						that.findPath(data.id);
					});
			},
			/* 全程工程的施工进度 */
			allData(){
				this.allSelect = true;
				var that =this;
				var project = uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id);
				that.http.request("/app/divideClient/countInstance",{ids:project.contractId,contractId:project.contractId}).then((res)=>{
					var num = res.data*100
					that.percentage = Math.round(num);
					that.width ="width:"+Math.round(num)+"%;";
					that.processNum = res.size;
					that.path=" / 全部工程"
					that.modalShow = true
				});					
			},
			findPath(id){
				/* 获取父节点信息 */
				var that=this;
				that.http.request("/app/divideClient/selectNodeTreeById",{id:id}).then((res)=>{
					that.path="";
					res.datas.forEach((item)=>{
						if(item.parentId!=0){
							that.path += " / "+item.name;
						}
					});
					that.modalShow = true
				});
			},
			treeTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				this.allSelect = false;
				if (this.show == e) {
					this.show = 0
				} else {
					this.show = e
				}
				this.handleNodeClick(r);
			},
			secondTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				this.allSelect = false;
				if (this.showsecond == e) {
					this.showsecond = 0
				} else {
					this.showsecond = e
				}
				this.handleNodeClick(r);
			},
			threeTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				this.allSelect = false;
				if (this.showthree == e) {
					this.showthree = 0
				} else {
					this.showthree = e
				}
				this.handleNodeClick(r);
			},
			fourTap(e,r) {
				this.text(this.treeData);
				this.$set(r,"selected",true);
				this.allSelect = false;
				if (this.showfour == e) {
					this.showfour = 0
				} else {
					this.showfour = e
				}
				this.handleNodeClick(r);
			},
			fiveTap(e,r) {
				this.text(this.treeData);
				this.$set(r,"selected",true);
				this.allSelect = false;
				if (this.showfive == e) {
					this.showfive = 0
				} else {
					this.showfive = e
				}
				this.handleNodeClick(r);
			},
			sixTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				this.allSelect = false;
				if (this.showsix == e) {
					this.showsix = 0
				} else {
					this.showsix = e
				}
				this.handleNodeClick(r);
			},
			sevenTap(e,r) {
				this.text(this.treeData)
				r.selected = true;
				this.allSelect = false;
				if (this.showseven == e) {
					this.showseven = 0
				} else {
					this.showseven = e
				}
				this.handleNodeClick(r);
			},
			text(data) {
				var that = this;
				data.forEach((item) => {
					item.selected = false;
					if (item.children.length > 0) {
						that.text(item.children);
					}

				})
				that.treeData  = data;
			}
		}
	}
</script>

<style>
	page{background-color: #F7F7F7;}
	.toTop {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #F7F7F7;
		height: calc(var(--window-bottom) + 15px)
	}

	.solid-bottom-type {
		border-bottom: 1upx solid white;
	}

	.treeData_b {
		margin: 12rpx 22rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 0 22rpx;
	}

	.treeData_1 {
		font-size: 30rpx;
		color: #101010;
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.treeData_1s {
		font-size: 30rpx;
		color: #101010;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 22upx 0;
		min-height: 88rpx;
	}

	.treeData_2 {
		border-top: 1upx dashed #E3E1E1;
	}

	.treeData_3 {
		border-top: 1upx dashed #E3E1E1;
	}

	.treeData_three {
		background-color: #F7F7F7;
		padding: 0 22rpx;
		border-radius: 10rpx;
		margin-bottom: 22;
	}

	.treeData_three:first-child {
		border-radius: 10rpx 10rpx 0 0;
	}

	.treeData_three:last-child {
		border-radius: 0 0 10rpx 10rpx;
	}

	.indexColor {
		color: #0A8CD5;
		font-weight: bold;
	}
	.padding-sm{padding:20rpx 22rpx;}
</style>