hptwxMiniProgram/pages/index/index.vue

<template>
	<view class="container">
		<view class="doctor-info">	
			<image :src="bg" class="bg"></image>
			<view class="user">
				<view class="info">
					<view class="name">{{user.userName}}</view>
					<view class="group">{{user.groupName}}</view>	
					<view class="ocName">{{user.ocName||user.positionName}}</view>
				</view>
				<template v-if="user.type<4">
					<image  class="avatar radius" src="/static/index/piont.png"></image>
				</template>
				<template  v-else>
					<image :src="user.userAvatar" class="avatar" @error="avatarError" v-if="user.userAvatar"></image>
					<image :src="defAvatar" class="avatar" v-else></image>
				</template>
			</view>
			<view class="introduce" v-if="user.userIntro">{{user.userIntro}}</view>
		</view>
		<view class="notice" v-if="alertnotice">
			<view class="notice-name">
				<image class="icon" src="/static/index/alert.png" mode="widthFix"></image>
<!-- 				<text class="text">预警</text> -->
			</view>
			<view class="notice-cont">
				<uni-notice-bar
					v-if="alertnotice"	
					@getmore="getmorealert"								
					scrollable :text="alertnotice" 
					background-color="#fff0"
					:speed="30"
					ref="uni-notice-bar"
					show-get-more 										
					color="#333" />
			</view>
		</view>
		<view class="tab-container" v-if="showTab">
			<view class="header">待办事项</view>
			<view class="tab">
				<div class="tab-item" @click="linkTo('task','待办任务')" v-if="todos.checkTaskCount>0">
					<view class="tab-name">任务处理</view>
					<view class="number task">{{todos.checkTaskCount>99?'99+':taskTotal}}</view>
				</div>
				<div class="tab-item" @click="linkTo('danger','待处理隐患')" v-if="todos.dangerCount>0">
					<view class="tab-name danger">隐患处理</view>
					<view class="number">{{todos.dangerCount>99?'99+':todos.dangerCount}}</view>
				</div>	
				<div class="tab-item" @click="linkTo('warn','告警事件')" v-if="todos.warningCount>0">
					<view class="tab-name">告警处理  </view>
					<view class="number warn">{{todos.warningCount>99?'99+':todos.warningCount}}</view>
				</div>							
				<div class="tab-item" @click="linkTo('alert','预警事件')" v-if="todos.snapshotCount>0">
					<view class="tab-name">预警处理</view>
					<view class="number alert">{{todos.snapshotCount>99?'99+':todos.snapshotCount}}</view>
				</div>
			</view>			
		</view>
		<view class="app-container">
			<view class="app-title">常规操作</view>
			<view class="app-list">
				<view class="app-item" v-for="(item,index) in actionList" :key="index" @click="handle(item)">
					<image class="logo" :src="item.miniLogo" ></image>
					<view class="app-cont">
					<view class="name">{{item.miniTitle}}</view>						
						<view class="desc" v-if="item.miniDesc">{{item.miniDesc}}</view>
					</view>
				</view>				
			</view>
		</view>
		<uni-popup ref="alertpopup" is-mask-click>
			<view class="alert-container">
				<uni-list>
					<uni-list-item  v-for="(item,aIdx) in alertList" :key="aIdx"
					:title="item.alertTitle" 
					:rightText="item.alertTime"
					:note="item.alertContent">
					 </uni-list-item>
				</uni-list>								
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import defAvatar from '@/static/avatar.png'
	import {wxLogin} from '@/api/openApi.js'
	import {getByQr,getApps} from '@/api/system/scan.js'
	import {getQueryParams} from '@/utils/index.js'
	
	export default {
		data() {
			return {
				actionList:[],
				defAvatar:defAvatar,
				bg:'',
				user:{
					userAvatar:""
				},
				alertnotice:undefined,
				alertList:[],
				todos:{
					checkTaskCount: 0,
					dangerCount: 0,
					snapshotCount: 0,
					warningCount: 0				
				},
				miniList:[]
			}
		},
		onLoad(options){
			this.init(options)
		},
		computed:{				
			showTab(){
				return this.todos.checkTaskCount>0||this.todos.dangerCount>0||this.todos.snapshotCount>0||this.todos.warningCount>0
			}
		},
		methods: {
			async init(options){
				if(options && options.hasOwnProperty('q') ){				
				  let URL = decodeURIComponent(options.q);						
				  options=getQueryParams(URL)			
				}
				this.getData(options)
			},
			setUnionid(){
				return new Promise((resolve,reject)=>{
					uni.login({
						provider: 'weixin',
						success: function (loginRes) {
							let code=loginRes.code;
							wxLogin(code).then((resp)=>{
								const { code, data, msg } = resp
								resolve(resp)
							}).catch((resp)=>{
								reject(resp)
							})
						},
						fail(resp) {
							reject(resp)
						}
					})		
				})
			},
			getData({ocId, code}){
				if(!ocId){
					let qrcode=uni.getStorageSync('qrcode')
					if(!qrcode){return}
					ocId=qrcode.ocId
					code=qrcode.code
				}
				uni.setStorageSync('qrcode',{ocId,code})
				let isLogin=uni.getStorageSync('isLogin')
				if(!isLogin){
					uni.showToast({
						title:"请授权登录登录失效！",
						mask: true,
						icon: "none",
						complete() {
							uni.redirectTo({
								url: '/pages/authorizedLogin/index'
							})
						}
					})	
					return
				}
				getByQr(ocId, code).then((res)=>{
					let type=res.data.targetType					
					uni.setStorageSync('qrcode',{
						...res.data.target,
						targetId:res.data.targetId,
						targetType:res.data.targetType,
						targetTitle:res.data.targetTitle,
						ocId,
						code
					})				
					let desc="";
					if(type===1){desc=res.data.target.riskPointDesc}
					if(type===2){desc=res.data.target.gridDesc}
					if(type===3){desc=res.data.target.equipDesc;}
					if(type===4){desc=res.data.target.doctorDesc}
					if(type===5){desc=res.data.target.doctorResume}
					let riskPointTypeTitle=res.data.target.riskPointTypeTitle?res.data.target.riskPointTypeTitle:"";
					let riskPointCatTitle=res.data.target.riskPointCatTitle?`【${res.data.target.riskPointCatTitle}】`:""
					res.data.target.positionName=`${riskPointTypeTitle}${riskPointCatTitle}`
					this.user={
						type:res.data.targetType,
						userName:res.data.targetTitle,
						groupName:res.data.targetGroupName,
						userAvatar:res.data.target.doctorAvatar,
						positionName:res.data.target.positionName,
						userIntro:desc,
					}
					if(type>3){
						this.bg='/static/index/bg.png'
					}else{
						this.bg=type===1?'/static/index/riskBg.png':(type===2?'/static/index/areaBg.png':'/static/index/eqBg.png')
					}														
					getApps(res.data.targetId).then((res)=>{
						this.actionList=res.data.miniList
						if(res.data.alertList){
							this.alertList=res.data.alertList
							this.alertnotice=res.data.alertList.reduce((pre,item,index)=>`${pre}  ${index+1}、${item.alertContent},${item.alertTime};`,'')
							this.$nextTick(()=>{
								this.$refs['uni-notice-bar'].initSize()
							})							
						}
						if(res.data.todos){
							this.todos=res.data.todos
						}						
						if(res.data.wxId)uni.setStorageSync('wxId',res.data.wxId)
						uni.setStorageSync('isAccount',res.data.isAccount)					
					})
				})	
			},
			avatarError(){
				this.user.userAvatar=defAvatar
			},
			handle(item){
				if(item.miniCode==='danger-submit'){	//隐患登记				
					uni.navigateTo({url:'/pages/app_views/danger/submit/submit'})
				}				
				if(item.miniCode==='checklist_point'){// 清单
					uni.navigateTo({url:'/pages/app_views/checkList/index/index?type=app&id='+item.checklistId})
				}
				if(item.miniCode==='checklist_score'){// 满意度
					uni.navigateTo({url:'/pages/app_views/satisfaction_evaluation/satisfaction_evaluation?type=app&id='+item.checklistId})
				}	
				if(item.miniCode==='checklist_hazard'){// 危险源
					uni.navigateTo({url:'/pages/app_views/hazard/index/index?type=app&id='+item.checklistId})
				}
				if(item.miniCode==='app-snapshot'){	//问题反馈				
					uni.navigateTo({url:'/pages/app_views/problem_feedback/problem_feedback'})
				}	
				if(item.miniCode==='mini_check_in'){//打卡
					uni.navigateTo({url:'/pages/app_views/clockIn/index'})
				}
			},
			isNull(val){
				if(val===undefined||val==="undefined"||val===""||val===null){
					return true
				}
				return false
			},
			linkTo(type,name){
				let riskPointId=uni.getStorageSync('qrcode').riskPointId
				uni.navigateTo({
					url:`/pages/index/detail/detail?type=${type}&name=${name}&rid=${riskPointId}`
				})							
			},
			getmorealert(){
				this.$refs.alertpopup.open("center")
			}
		},
		onShareAppMessage() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		padding: 48rpx 36rpx;
		font-size: 14px;
		line-height: 24px;
		background-color:rgba(245,246,248,1);
		box-sizing: border-box;
		.doctor-info{
			background-image: url('/static/index/bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 30rpx 48rpx 48rpx 48rpx;
			box-sizing: border-box;
			color: #fff;
			position: relative;
			.bg{
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
			.user{
				 display: flex;
				 justify-content: space-between;
				 align-items: center;
				.info{
					position: relative;
					padding-left: 20rpx;
					.name{
						font-size: 32rpx;
						font-weight: 700;
						line-height: 1;					
					}
					.group{
						font-size: 24rpx;
						font-weight: 400;
						line-height: 1;		
						margin-top: 16rpx;
					}
					.ocName{
						font-size: 24rpx;
						font-weight: 400;
						line-height: 1;
						margin-top: 16rpx;						
					}
					&::after{
						width: 1px;
						height: 100%;
						display: block;
						content: "";
						position: absolute;
						border-radius: 10px;
						top: 0;
						left: 0;
						background-color: #83D047;
					}
				}
				.avatar{
					display: block;
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					&.radius{
						border-radius:34rpx;
					}
				}
			}
			.introduce{
				padding-top: 30rpx;				
				max-height: 318rpx;
				font-family: SF Pro Text;
				font-size: 30rpx;
				font-weight: 400;
				line-height: 44rpx;
				color: #fff;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 7;
				-webkit-box-orient: vertical;
				text-align: justify;
				word-break: break-all;
			}
		}
		.notice{
			height: 84rpx;
			background-color:rgba(245, 246, 248, 1);
			margin-top: 28rpx;
			border-radius: 6rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;					
			box-shadow: 0px 10px 10px -4px rgba(45, 54, 67, 0.2);
			padding-left:28rpx;
			.notice-name{
				height: 84rpx;	
				display: flex;
				align-items: center;							
				font-weight: 600;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.9);
				.icon{
					width: 40rpx;
					height: 40rpx;
					// padding-right: 8rpx;
					// margin-top:8rpx ;
				}
				.text{
					font-size: 28rpx;
					line-height: 1;
					// margin-top:8rpx ;					
				}
			}
			.notice-cont{
				width: 600rpx;
				height: 80rpx;
				flex: 1;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);
				// background-color: #fff;
			}
		}
			
		.tab-container{
			background-color: #fff;
			margin-top: 32rpx;
			border-radius: 16rpx;
			.header{
				width: 216rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				background-image: url(data:image/png;base64,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);				
				background-repeat: no-repeat;
				background-size: 100% 100%;	
				font-size: 32rpx;
				color: #fff;
			}
			.tab{
				display: flex;
				align-items: center;
				padding: 28rpx 0;
				.tab-item{
					width: 25%;
					// height: 150rpx;
					display: flex;
					justify-content: center;
					align-items: center;	
					flex-direction: column;
					.icon{
						width: 96rpx;
					}
					.tab-name{
						font-size: 28rpx;
						line-height: 1;
						color: #222;
						padding-top: 12rpx;
					}
					.number{
						color: #000;
						font-size: 36rpx;
						line-height: 40rpx;	
						font-weight: 700;
						padding-top: 8rpx;
						&.task{
							color: #4D73FF;
						}
						&.danger{
							color: #FE4644;
						}
						&.warn{
							color: #F4752D;
						}
					}
				}
			}			
		}
		.alert-container{
			width: 96%;
			height: 60vh;
			overflow-y: auto;
			margin: 0 auto;
		}
		.app-container{
			.app-title{
				font-size: 34rpx;
				color: #000;
				line-height: 1;
				padding: 40rpx 0;
				font-weight: 600;
			}
			.app-list{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.app-item{
					display: flex;
					align-items: center;
					width: 330rpx;
					height: 160rpx;
					padding: 20rpx;
					box-sizing: border-box;
					border-left: 0;
					background-color: #fff;
					margin-bottom: 18rpx;
					border-radius: 20rpx;
					.logo{
						display: block;
						width: 66rpx;
						height: 66rpx;
						border: 1px solid #efe3e3;
						border-radius: 50%;
						overflow: hidden;
					}
					.app-cont{
						flex: 1;
						margin-left: 14rpx;
						.name{
							width: 100%;
							color: #222222;
							font-size: 32rpx;
							line-height: 1;
							margin-bottom: 20rpx;
							text-overflow: ellipsis;
							word-break: break-all;
							overflow: hidden;
							white-space: nowrap;
						}
						.desc{
							width: 203rpx;
							height: 48rpx;
							background: linear-gradient(128.57deg, rgba(253, 198, 48, 0.1), rgba(244, 125, 52, 0.1));
							color: #FFAB08;
							font-size: 24rpx;
							line-height: 48rpx;
							padding-left: 16rpx;
							box-sizing: border-box;
						}						
					}
				}				
			}
		}
	}
</style>