TSYWXT-CLOUD-APP/pages/home/home.vue

<!--
 * @Title: 
 * @Description: 首页
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="container">
		<!-- 导航栏  #3F9EFF-->
		<uni-nav-bar :fixed="true" backgroundColor="#f7f7f7" statusBar="false" height="75px">
			<block slot="left">
				<view class="view-flex-block-center">
					<image src="/static/images/logo_start.png"
						style="width: 100rpx;height: 100rpx;background: lightgray;border-radius: 50%;" mode="widthFix">
					</image>
				</view>
			</block>
			<view class="view-flex-inline">
				<uni-list style="background-color: #f7f7f7;" :border="false">
					<uni-list-item v-if="isLogin" :border="false" style="background-color: #f7f7f7;" showArrow
						:title="userName" :note="userNote" :clickable="true" @click="onUserInfoClick()" />
					<uni-list-item v-else :border="false" style="background-color: #f7f7f7;" showArrow title="登录/注册"
						note="快速登录 注册体验更多功能" :clickable="true" @click="onLoginClick()" />
				</uni-list>
			</view>
			<block slot="right">
				<view style="margin-right:0rpx" @click="onNoticeMoreClick">
					<uni-badge class="uni-badge-left-margin" absolute="rightTop" :is-dot="noticeDot" :text="noticeValue"
						size="small">
						<uni-icons class="input-uni-icon" type="email" size="24" color="#000000" />
					</uni-badge>
				</view>
				<view style="margin-right:10rpx;margin-left: 10px;" @click="onNoticeMoreClick">
					<uni-badge class="uni-badge-left-margin" absolute="rightTop" size="small">
						<uni-icons class="input-uni-icon" type="scan" size="24" color="#000000" />
					</uni-badge>
				</view>
			</block>
		</uni-nav-bar>
		<uni-card title="快捷操作">
			<view class="view-flex-inline">
				<!-- 					<uni-icons class="input-uni-icon" type="phone" size="18" color="coral" /> -->
				<text class="text-under-line" style="color: coral;font-size: 1rem;"
					@click="toShortcutCreateOrder">发起工单</text>
				<text class="text-under-line" style="color: coral;font-size: 1rem;margin-left: 40px;"
					@click="toShortcutCreateOrder">创建巡检保养计划</text>
			</view>
		</uni-card>

		<uni-card title="待办工单" :thumbnail="orderLogo">
			<uni-section title="新工单" type="line">

				<uni-list>
					<uni-list-item v-for="item in unconfirmOrderList" :key="item.id" showArrow clickable
						@click="toConfirm(item)" rightText="去接单">
						<template v-slot:body>
							<view class="list-item-block">
								<view class="line">
									<uni-icons type="personadd" size="18" color="lightblue" />
									<view class="text" style="width: 90%;color: gray;">
										创建人: <span
											style="margin-left: 5px;color: cornflowerblue;">{{item.createOrderPersonName}}</span>
									</view>
								</view>
								<view class="line">
									<uni-icons type="calendar" size="18" color="lightblue" />
									<view class="text" style="width: 90%;color: gray;">
										创建时间: <span
											style="margin-left: 5px;color: cornflowerblue;">{{item.createTime}}</span>
									</view>
								</view>
								<view class="line">
									<uni-icons type="help" size="18" color="lightblue" />
									<view class="text text-ellipsis" style="width: 90%;color: gray;">
										问题描述: <span
											style="margin-left: 5px;color: cornflowerblue;">{{item.orderDesc}}</span>
									</view>
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>
			<uni-section title="已接工单" type="line">
				<uni-list>
					<uni-list-item v-for="item in todoOrderList" :key="item.id" showArrow clickable @click="toDo(item)"
						rightText="去处理">
						<template v-slot:body>
							<view class="list-item-block">
								<view class="line">
									<uni-icons type="personadd" size="18" color="lightblue" />
									<view class="text" style="width: 90%;color: gray;">
										处理人: <span
											style="margin-left: 5px;color: cornflowerblue;">{{item.orderConfirmName}}</span>
									</view>
								</view>
								<view class="line">
									<uni-icons type="calendar" size="18" color="lightblue" />
									<view class="text" style="width: 90%;color: gray;">
										完成时限: <span
											style="margin-left: 5px;color: cornflowerblue;">{{item.orderCompleteTime}}</span>
									</view>
								</view>
								<!-- 								<view class="line">
									<uni-icons type="help" size="18" color="lightblue" />
									<view class="text text-ellipsis" style="width: 90%;color: gray;">
										问题描述: <span
											style="margin-left: 5px;color: cornflowerblue;">{{item.orderDesc}}</span>
									</view>
								</view> -->
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>
			<uni-section title="工单完结审批" type="line">
				<uni-list>
					<uni-list-item v-for="item in closeApproveOrderList" :key="item.id" showArrow clickable
						@click="toCloseApprove(item)" rightText="去审批">
						<template v-slot:body>
							<view class="list-item-block">
								<view class="line">
									<uni-icons type="personadd" size="18" color="lightblue" />
									<view class="text" style="width: 90%;color: gray;">
										填报人: <span
											style="margin-left: 5px;color: cornflowerblue;">{{item.processorName}}</span>
									</view>
								</view>
								<view class="line">
									<uni-icons type="calendar" size="18" color="lightblue" />
									<view class="text" style="width: 90%;color: gray;">
										填报时间: <span
											style="margin-left: 5px;color: cornflowerblue;">{{item.orderProcessTime}}</span>
									</view>
								</view>
								<view class="line">
									<uni-icons type="help" size="18" color="lightblue" />
									<view class="text text-ellipsis" style="width: 90%;color: gray;">
										反馈意见: <span
											style="margin-left: 5px;color: cornflowerblue;">{{item.processDesc}}</span>
									</view>
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>
		</uni-card>
		<uni-card title="巡检保养任务" :thumbnail="checkLogo">
			<!-- 		<uni-list>
				<uni-list-item showArrow title="1-10号门禁查看" note="2024年3月1日 12时10分" :clickable="true" rightText="去处理" />
			</uni-list> -->
		</uni-card>
		<uni-card :isFull="true">
			<swiper style="height: 200px;" circular :indicator-dots="false" :autoplay="true" :interval="2000"
				:duration="500">
				<swiper-item style="height: 200px;line-height: 300rpx;">
					<view style="background-color: lavenderblush;">A</view>
				</swiper-item>
				<swiper-item style="height: 200px;line-height: 300rpx;">
					<view style="background-color: darkcyan;">B</view>
				</swiper-item>
				<swiper-item style="height: 200px;line-height: 300rpx;">
					<view style="background-color: darkgoldenrod;">C</view>
				</swiper-item>
			</swiper>
		</uni-card>
	</view>
</template>

<script>
	import
	navBtns
	from "@/api/home.js";
	import {
		role
	} from "@/api/role.js";
	import {
		oss
	} from '@/common/setting';
	import http from '@/http/api.js';
	export default {
		components: {},
		data() {
			return {
				title: '泰山电教维护服务',
				permission: {
					'admin': false,
					'orgAdmin': false,
					'companyAdmin': false,
					'companyServciePerson': false,
					'yjServicePerson': false,
				},
				userLoginStatus: 0,
				userName: 'guest',
				userNote: '泰山云服务已服务您180天',
				postName: '',
				currentRole: '',
				current: 0,
				navButton: [],
				navButtonIndex: [],
				//more/loading/noMore
				loadMoreStatus: "noMore",
				timer: false,
				pageSize: 10,
				pageCurrent: 1,
				total: 0,
				noticeDot: false,
				noticeValue: 0,
				unconfirmOrderCount: 0,
				unconfirmOrderList: [],
				todoOrderCount: 0,
				todoOrderList: [],
				costsApproveOrderCount: 0,
				costsApproveOrderList: [],
				closeApproveOrderCount: 0,
				closeApproveOrderList: [],
				orderLogo: "/static/images/logo_pc.png",
				checkLogo: "/static/images/home/inspection.png",
			};
		},
		computed: {},
		onLoad() {
			console.log(JSON.stringify(this.userInfo))
			// this.permission.admin = false;
			// this.permission.orgAdmin = false;
			// this.permission.companyAdmin = false;
			// this.permission.companyServciePerson = false;
			// this.permission.yjServicePerson = false;
			// this.navButton = navBtns.navButtons;
			// if (this.userInfo.role_name === role.admin) {
			// 	this.permission.admin = true;
			// 	this.navButtonIndex = navBtns.sysAdminNavButton;
			// 	this.currentRole = role.admin;
			// } else if (this.userInfo.role_name === role.orgAdmin) {
			// 	this.permission.orgAdmin = true;
			// 	this.currentRole = role.orgAdmin;
			// 	this.navButtonIndex = navBtns.orgAdminNavButton;
			// } else if (this.userInfo.role_name === role.companyAdmin) {
			// 	this.permission.companyAdmin = true;
			// 	this.currentRole = role.companyAdmin;
			// 	this.navButtonIndex = navBtns.companyAdminNavButton;
			// } else if (this.userInfo.role_name === role.companyServciePerson) {
			// 	this.permission.companyServciePerson = true;
			// 	this.currentRole = role.companyServciePerson;
			// 	this.navButtonIndex = navBtns.companyServicePersonNavButton;
			// 	if (this.userInfo.post_id == '1706859505948098562') {
			// 		this.postName = "engineer";
			// 	} else if (this.userInfo.post_id == '1730535542909140993') {
			// 		this.postName = "servicePerson";
			// 	}
			// }
			// if (this.$u.func.checkLogin()) {
			// 	console.log("timer start  +++++++ ")
			// 	this.timer = true;
			// 	setTimeout(this.timeCall, 10);
			// }
			// console.log(JSON.stringify(this.isLogin))
			// if (this.$u.func.checkLogin()) {} else {
			// 	this.$u.func.logout();
			// }


			if (this.$u.func.checkLogin()) {
				try {
					let loginTime = uni.getStorageSync("loginTime");
					if (loginTime) {
						let dt = new Date();
						let time = dt.getTime();
						let expires = this.userInfo.expires_in;
						if (expires) {
							if ((time - loginTime) / 1000 > (expires - 60)) {
								this.$u.func.logout();
							}
						} else {
							this.$u.func.logout();
						}
					} else {
						this.$u.func.logout();
					}
				} catch (e) {
					this.$u.func.logout();
				}
			} else {
				this.$u.func.logout();
			}
			if (this.isLogin) {
				this.getTodoOrderList();
				this.getTodoOrderConfirmList();
			}
		},
		onUnload() {
			//this.timer = false;
		},
		onReady() {
			if (this.$u.func.checkLogin()) {

			} else {
				// this.$u.func.logout();
			}
		},
		onShow() {
			// if (this.$u.func.checkLogin()) {
			// 	if (this.userInfo.role_name !== this.currentRole) {
			// 		this.permission.admin = false;
			// 		this.permission.orgAdmin = false;
			// 		this.permission.companyAdmin = false;
			// 		this.permission.companyServciePerson = false;
			// 		this.permission.yjServicePerson = false;
			// 		this.navButton = navBtns.navButtons;
			// 		if (this.userInfo.role_name === role.admin) {
			// 			this.permission.admin = true;
			// 			this.navButtonIndex = navBtns.sysAdminNavButton;
			// 			this.currentRole = role.admin;
			// 		} else if (this.userInfo.role_name === role.orgAdmin) {
			// 			this.permission.orgAdmin = true;
			// 			this.currentRole = role.orgAdmin;
			// 			this.navButtonIndex = navBtns.orgAdminNavButton;
			// 		} else if (this.userInfo.role_name === role.companyAdmin) {
			// 			this.permission.companyAdmin = true;
			// 			this.currentRole = role.companyAdmin;
			// 			this.navButtonIndex = navBtns.companyAdminNavButton;
			// 		} else if (this.userInfo.role_name === role.companyServciePerson) {
			// 			this.permission.companyServciePerson = true;
			// 			this.currentRole = role.companyServciePerson;
			// 			this.navButtonIndex = navBtns.companyServicePersonNavButton;
			// 			if (this.userInfo.post_id == '1706859505948098562') {
			// 				this.postName = "engineer";
			// 			} else if (this.userInfo.post_id == '1730535542909140993') {
			// 				this.postName = "servicePerson";
			// 			}
			// 		}
			// 	}
			// 	if (this.timer == false) {
			// 		this.timer = true;
			// 		setTimeout(this.timeCall, 10);
			// 	}
			// } else {
			// 	this.$u.func.logout();
			// }
		},
		onHide() {
			//this.timer = false;
		},
		methods: {
			toOss(path) {
				return oss + path;
			},
			onLoginClick() {
				console.log("onLoginClick")
				var url = '/pages/login/login-account';
				uni.navigateTo({
					url: url
				})
			},
			onUserInfoClick() {
				console.log("onUserInfoClick")
				var url = '/pages/user/center-simple';
				uni.navigateTo({
					url: url
				})
			},
			timeCall() {
				if (this.timer == true) {
					this.getHomeInfo();
					setTimeout(this.timeCall, 10000);
				}
			},
			toConfirm(item) {
				var url = '/pages/check-order/orderconfirm?orderType=' + item.orderType + '&orderId=' + item.id;
				uni.navigateTo({
					url: url
				})
			},
			toDo(item) {
				var url = '/pages/check-order/orderprocessreport?orderId=' + item.id + '&skipPage=1';
				uni.navigateTo({
					url: url
				})

				// var url = '/pages/check-order/orderconfirm?orderType=' + item.orderType + '&orderId=' + item.id;
				// uni.navigateTo({
				// 	url: url
				// })
			},
			toCloseApprove(item) {
				var url = '/pages/check-order/orderconfirm?orderType=' + item.orderType + '&orderId=' + item.id;
				uni.navigateTo({
					url: url
				})
			},
			toOrderProcess(item) {
				var url = '/pages/check-order/orderprocessreport?skipPage=1&costsApprove=2&orderType=' + item.orderType +
					'&orderProcessId=' + item
					.orderProcessId + '&orderId=' + item.id;
				uni.navigateTo({
					url: url
				})
			},
			toOrderCostsApprove(item) {
				var url = '/pages/check-order/ordercostsapprove?orderType=' + item.orderType + '&orderId=' + item.id;
				uni.navigateTo({
					url: url
				})
			},
			toOrderCloseApprove(item) {
				console.log("toOrderCloseApprove")
				var url = '/pages/check-order/ordercloseapprove?orderType=' + item.orderType + '&orderId=' + item.id;
				uni.navigateTo({
					url: url
				})
			},
			toShortcutCreateOrder() {
				let url = '/pages/check-order/orderadd';
				uni.navigateTo({
					url: url
				})
			},
			onNoticeMoreClick() {
				uni.navigateTo({
					url: '/pages/news/noticelist'
				})
			},
			getHomeInfo() {
				this.getTodoOrderConfirmList();
				this.getTodoOrderList();
				//this.getTodoCostsApproveOrderList();
				this.getTodoCloseOrderList();
			},
			getTodoOrderConfirmList() {
				let that = this;
				let postData = {};
				http.request({
					url: '/galaxy-business/order/todo/confirm/list',
					method: 'GET',
					data: postData,
				}).then(res => {
					console.log(JSON.stringify(res))
					that.unconfirmOrderCount = 0;
					if (res.data != null) {
						that.unconfirmOrderCount = res.data.length;
						that.unconfirmOrderList = res.data;
					}
				}).catch(err => {
					console.log(JOSN.stringify(err))
				})
			},
			getTodoOrderList() {
				let that = this;
				let postData = {};
				http.request({
					url: '/galaxy-business/order/todo/list',
					method: 'GET',
					data: postData,
				}).then(res => {
					console.log(JSON.stringify(res))
					that.todoOrderCount = 0;
					if (res.data != null) {
						that.todoOrderCount = res.data.length;
						that.todoOrderList = res.data;
					}
				}).catch(err => {
					console.log(JOSN.stringify(err))
				})
			},
			getTodoCostsApproveOrderList() {
				let that = this;
				let postData = {};
				http.request({
					url: '/galaxy-business/order/todo/costsapprove/list',
					method: 'GET',
					data: postData,
				}).then(res => {
					that.costsApproveOrderCount = 0;
					if (res.data != null) {
						that.costsApproveOrderCount = res.data.length;
						that.costsApproveOrderList = res.data;
					}
				}).catch(err => {
					console.log(JOSN.stringify(err))
				})
			},
			getTodoCloseOrderList() {
				let that = this;
				let postData = {};
				http.request({
					url: '/galaxy-business/order/todo/closeapprove/list',
					method: 'GET',
					data: postData,
				}).then(res => {
					that.closeApproveOrderCount = 0;
					if (res.data != null) {
						that.closeApproveOrderCount = res.data.length;
						that.closeApproveOrderList = res.data;
					}
				}).catch(err => {
					console.log(JOSN.stringify(err))
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	$nav-height: 75px;


	.user-box {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx 0 64rpx;
		margin-top: 36rpx;

		.left {
			display: flex;
			flex-direction: column;
			align-items: center;

			.avatar {
				width: 128rpx;
				height: 128rpx;
				background: #ffffff;
				border-radius: 50%;
			}

			.user-name {
				margin-top: 20rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #ffffff;
			}

			.tag {
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 5rpx 16rpx;
				border: 1px solid #f5f5f5;
				border-radius: 7rpx;

				font-size: 19rpx;
				font-family: Source Han Sans CN;
				font-weight: 300;
				color: #ffffff;
			}
		}

		.edit-btn {
			margin-top: 20rpx;
			margin-bottom: 10px;
			flex-shrink: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			width: 165rpx;
			height: 54rpx;
			border: 2rpx solid #f5f5f5;
			border-radius: 11rpx;

			font-size: 27rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.decoration {
		width: 6px;
		height: 6px;
		margin-right: 4px;
		border-radius: 50%;
		background-color: cadetblue;
	}



	.input-uni-icon {
		line-height: $nav-height;
	}

	.item-block {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100%;
	}

	.line {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
	}

	.line .block {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.line-end {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 100%;
	}

	.line-end .block {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.line-center {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.line-center .block {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.rtu-name {
		margin-left: 5rpx;
		font-size: 0.7rem;
		font-weight: bold;
	}

	.rtu-code {
		margin-left: 5rpx;
		font-size: 0.6rem;
		color: gray;
	}

	.item-text-line {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		padding-left: 0px;
		padding-right: 0px;

		.block {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.item-title {
			font-size: 0.7rem;
		}

		.item-text {
			padding-left: 2px;
			padding-right: 5px;
			font-size: 0.7rem;
		}

		.item-text-ell {
			width: 100%;
			overflow: hidden;
			font-size: 0.7rem;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.item-number {
			font-size: 0.7rem;
			margin-left: 2px;
			margin-right: 5px;
		}
	}

	.item-title-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 5px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}

	.uni-badge-left-margin {
		margin-left: 0px;
	}

	.logo {
		flex-shrink: 0;
		width: 80rpx;
		height: auto;
	}

	.container {
		// background-color: #f7f7f7;
		// min-height: 100vh;
		overflow: hidden;
		padding: 0 0 75rpx;
	}

	.nav {
		margin: 0rpx 0;
		box-sizing: border-box;
		padding: 0 10rpx;


		&-item {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: 130rpx;

			&-img {
				width: 80rpx;
				height: 80rpx;
			}

			&-name {
				font-size: 0.7rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #585b61;
			}
		}
	}
</style>