diagnosis_app/views/doctorItems/detail/index.vue

<template>
	<view class="content">
		<view class="head">
			<text>患者信息</text>
			<view class="drop-down" @click="dropHandle">
				<view class="zhcx-iconfont zhcx-icon-xiangxia" v-if="drop">
					<text>展开</text>
				</view>
				<view class="zhcx-iconfont zhcx-icon-xiangshang" v-else>
					<text>收起</text>
				</view>			
			</view>
		</view>
<!-- 		<view class="drop-down-wrap" 
				id="dropWrap"
		      :style="{maxHeight:(drop?0:dropWrapHight)+'px'}" 
	    > -->
		<view class="drop-down-wrap" v-show="drop">
			<view class="user item">
				<view class="item-head">
					<view class="dot"></view>
					<text class="name">{{name}}</text>
					<text class="gender">{{gender}}</text>
					<text class="time">{{time}}</text>
				</view>
			</view>
			<view class="desc-container item">
				<view class="item-head">
					<view class="dot"></view>
					<text class="name">病情描述</text>
				</view>		
				<view class="desc" v-html="IllnessDescription"></view>
				<view class="tags">
					<view class="item" v-for="(IllnessTag,index) in IllnessTags" :key="index">
						<text>{{IllnessTag.illnessname}}</text>
					</view>
				</view>	
			</view>
			<view class="image-container item">
				<view class="item-head">
					<view class="dot"></view>
					<text class="name">医学影像</text>
				</view>	
				<view class="item-cont img">
					<view class="imgbox-list" v-for="(image,index) in images" :key="index" :class="image.images?'hasTime':''">
						<view class="img-item" v-if="image.images">
							<text class="time">{{image.time}}</text>
							<view class="img-cont">
								<view class="img-item-box" v-for="(imageItem,imageIndex) in image.images" :key="imageIndex">
									<view class="block" v-if="image.images.length>0">
										<image class="image" :src="uploadServer+imageItem.path" ></image>									
									</view>				
								</view>							
							</view>
						</view>
						<view  v-else class="img-item">
							<view class="img-cont" >
								<view class="img-item-box">
									<image class="image" :src="uploadServer+image.path" ></image>
								</view>							
							</view>						
						</view>					
					</view>
				</view>
			</view>				
		</view>	
		<view class="assist-container item">
			<view class="item-head">
				<text class="head-highlight">AI</text>
				<text class="name">辅助诊断</text>
				<button type="primary" @click="aiDiagnoseHandle" size="mini" v-if="type==='therapy'" class="head-bt">AI辅助诊断</button>
			</view>	
			<view class="item-cont aiDiagnose" v-html="aiDiagnose"></view>
		</view>		
		<view class="diagnose-container item">
			<view class="item-head">
				<view class="dot"></view>
				<text class="name">诊断结果</text>
				<button type="primary" @click="showSubsequentVisitModel" size="mini" v-if="type==='therapy'" class="head-bt">复诊</button>
			</view>	
			<view class="item-cont">
				<textarea v-model="diagnoseTxt" placeholder="请输入治疗方案" v-if="type==='diagnose'&&status==='1'" />
				<view class="diagnoseTxt" v-html="doctorDiagnosis" v-else></view>
			</view>
		</view>	
		<view class="submit-BT" @click="diagnoseSubmit" v-if="type==='diagnose'&&status==='1'">
			<text>提交</text>
		</view>
		<view class="consult" @click="consult">
			<image class="consult-icon" src="/static/images/order/phone.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import {diagnosis,diagnosisDetails,treatmentInfo} from '@/api/doctor'
	import { searchSubmit } from '@/api/patient'
	import {notEmpty,parseTime,deepClone} from '@/libs';
	import config from '@/config';
	export default{
		name:'doctorDetail',
		props:{
		   status:{
			   type:[String,Number],
			   default:1
		   },	
		   type:{
			   type:[String],
			   default:"diagnose"
		   }		   
		},		
		data(){
			return{
				uploadServer:config.uploadServer,
				id:null,
				drop:false,
				dropWrapHight:null,
				diagnoseTxt:"",
				name:"",
				gender:"",
				time:"",
				aiDiagnose:"",
				IllnessDescription:"",
				IllnessTags:[],
				images:[],
				doctorDiagnosis:"",
				patientId:null,
				illnessType:null
			}
		},
		onLoad(params) {
			this.init(params)
		},
		mounted() {
			// const query = uni.createSelectorQuery().in(this);
			// query.select('#dropWrap').boundingClientRect(data => {
			// 	this.dropWrapHight=data.height+150;
			// }).exec();	
		},
		methods:{
			dropHandle(){
				this.drop=!this.drop;				
			},
			init({id,type,status,user}){
				this.id=id;
				if(type==="diagnose"){//
					this.getDiagnosisDetails({id:id})
					if(status==="1"){//待诊断
						
					}else{//已诊断
																	
					}
				}else{//治疗
					treatmentInfo(id).then((res)=>{
						this.name=res.data.patientName;
						let gender=res.data.patientSex;
						this.gender=gender==='0'?'男':(gender==='1'?'女':'')
						let aiDiagnosisDesc=res.data.aiDiagnosisDesc;
						aiDiagnosisDesc = aiDiagnosisDesc.replace(/\<img/gi, '<img class="rich-img" ');
						this.aiDiagnose=aiDiagnosisDesc;
						this.IllnessDescription=res.data.diseaseDesc; 
						if(notEmpty(res.data.diseaseImgDesc)){
							let diseaseImgDesc=JSON.parse(res.data.diseaseImgDesc);
							if(Array.isArray(diseaseImgDesc)){
								diseaseImgDesc.reverse();
							}
							this.images=diseaseImgDesc;
						}
						let doctorId=res.data.doctorId;
						let doctorName=res.data.doctorName;
						// this.IllnessTags=JSON.parse(res.data.aiDiagnosisSite);
						this.doctorDiagnosis=res.data.doctorTreatment;
						
						this.patientId=res.data.patientId;
					})
					
				}
			},
			getDiagnosisDetails(params){
				 diagnosisDetails(params.id).then((res)=>{
						this.name=res.data.patientName;
						let gender=res.data.patientSex;
						this.gender=gender==='0'?'男':(gender==='1'?'女':'')
						let aiDiagnosisDesc=res.data.aiDiagnosisDesc;
						aiDiagnosisDesc = aiDiagnosisDesc.replace(/\<img/gi, '<img class="rich-img" ');					
						this.aiDiagnose=aiDiagnosisDesc;
						this.IllnessDescription=res.data.diseaseDesc; 
						
						let doctorId=res.data.doctorId;
						let doctorName=res.data.doctorName;
						this.doctorDiagnosis=res.data.aiPatientSeekDesc.doctorDiagnosis
						this.patientId=res.data.patientId;
						this.illnessType=res.data.illnessType
						if(notEmpty(res.data.diseaseImgDesc)){
							let diseaseImgDesc=JSON.parse(res.data.diseaseImgDesc);
							this.images=diseaseImgDesc;
						}
						if(notEmpty(res.data.aiDiagnosisSite)){
							this.IllnessTags=JSON.parse(res.data.aiDiagnosisSite);
						}											
				 })			
			},
			diagnoseSubmit(){
				var self=this;
				diagnosis({
					seekId:this.id,
					doctorDiagnosis:this.diagnoseTxt
				}).then((res)=>{
					un.showToast("提交成功！")
					setTimeout(()=>{
						uni.reLaunch({
							url:"/views/doctorItems/index/index"
						})						
					},1000)
				})  				
			},
			consult(){
				var name=this.name;
				var id=this.patientId;
				uni.navigateTo({
					url:`/views/IM/index/index?id=${id}&name=${name}`
				})
			},
			aiDiagnoseHandle() {
			  const site = []
			  const diseaseImgDesc = this.images
			  var lastUploadImages = ''
			  if (diseaseImgDesc.length > 0) {
				lastUploadImages = diseaseImgDesc[diseaseImgDesc.length - 1]
				if (lastUploadImages.images) {
				  lastUploadImages = lastUploadImages.images
				}
			  }
			  searchSubmit({
				diseaseDesc: this.IllnessDescription,
				seekTime: parseTime(new Date()),
				site: JSON.stringify(site),
				diseaseImgDesc: JSON.stringify(lastUploadImages)
			  }).then((res) => {
				if (res.code === 0) {
				  /** 检索成功返回ai推荐数据 */
				  const aidiagnosticresults = res.data.aidiagnosticresults
				  this.aiDiagnose = aidiagnosticresults
				}
			  })
			},	
			showSubsequentVisitModel(){
				try{
					let treatmentId=this.id;
					uni.navigateTo({
						url:"/views/doctorItems/subsequentVisitSubmit/subsequentVisitSubmit?id="+treatmentId
					})				
				}catch(err){
					console.log(err)
				}
			}		
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 0 48upx 150upx;
		.head{
			height: 100upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.zhcx-iconfont{
				color: #0a0a0a;
				text{
					padding-left: 10upx;
				}
			}
		}
		.tip{
			font-size: 28upx;
			color: #3384FF;
			background: #F0F8FF;
			border-radius: 12upx;
			padding: 24upx 12upx;
			margin: 24upx auto;
		}
		.drop-down-wrap{
			overflow: hidden;
			transition: max-height 0.6s; 
		}
		.item{
			.item-head{
				padding: 30upx 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				position: relative;
				.head-bt{
					margin: 0;
					position: absolute;
					right: 0;
					top: 10upx;
					background-color: var(--sysblue);
				}
				.dot{
					width: 36upx;
					height: 36upx;
					border-radius: 50%;
					position: relative;
					background:rgba(51, 132, 255,0.2);
					&::after{
						width: 18upx;
						height: 18upx;
						border-radius: 50%;						
						display:block ;
						content: "";
						position: absolute;
						left: 50%;
						top: 50%;
						margin-top:-8upx ;
						margin-left:-8upx ;
						background: #3384FF;
					}
				}
				.name{
					font-size: 30upx;
					color: #0a0a0a;
					padding-left: 15upx;
				}
				.gender{
					font-size: 30upx;
					color: #0a0a0a;
					padding-right: 100upx;
				}
				.time{
					font-size: 24upx;
					color: #999;				
				}
			}
			.desc,.aiDiagnose{
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
				// -webkit-line-clamp: 5; 
				// overflow: hidden;
				text-align: justify;
				color: #333;
				.aiDiagnose{
					&::v-deep .rich-img{
						display: block;
						width: 90%;
						margin: 20upx auto;
					}
				}			
			}
			.tags{
				padding-top: 16upx;
				.item{
					display: inline-block;
					color: #409eff;
					border: 1px solid #d9ecff;
					background-color: #ecf5ff;
					margin-right: 8upx;
					padding: 4upx 12upx;
					border-radius: 4upx;
					font-size: 22upx;
				}
			}
			&.assist-container{
				.head-highlight{
					color: #3384ff;
					font-size: 30upx;
				}			
			}
			&.image-container{
				.item-cont{
					display: flex;
					justify-content: flex-start;
					flex-direction: column;
					flex-wrap: wrap;
					&.img{
						flex-direction: unset;
					}
					.imgbox-list{
						width: 100%;
						border-radius: 6upx;
						margin-right: 15upx;
						border: 1px solid #eaeaea;
						margin-bottom: 10upx;
						.image{
							display: block;
							width: 220upx;
							height: 220upx;										
						}					
						&.hasTime{
							.time{
								display:block;
								color: #666;
								font-size: 10upx;
								height: 50upx;
								line-height: 50upx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								padding-left: 15upx;
								border-bottom: 1px dashed #ccc;
							}
							.img-cont{
								padding-top: 10upx;
							}							
						}
						.img-cont{
							display: flex;
							justify-content: flex-start;
							flex-wrap: wrap;	
							padding:0 10upx 10upx;
							.img-item-box{
								width: 220upx;
								height: 220upx;	
								margin: 15upx 15upx 0 0;
								border: 1px solid #eaeaea;		
								// border-width: 0 1px 0 1px;														
							}						
						}					
					}					
				}
			}
			.diagnoseTxt{
				&::v-deep .item{
					padding-bottom: 50upx;
					.time{
						color: #666;
						font-size: 24upx;
						line-height: 1.2;
					}
					.info{
						color: #333;
						font-size: 30upx;
						line-height: 1.2;
						padding-top: 10upx;
					}
				}
			}
		}
		.submit-BT{
			width: 700upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			background-color: #3384FF;
			position: fixed;
			bottom: 10upx;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			border-radius: 8upx;
		}
		.consult{
			width: 130upx;
			height: 130upx;
			border-radius: 50%;
			// background-color:rgba(51,132,255,0.8);
			border:1px solid #ccc;
			color: #fff;
			position: fixed;
			right: 0;
			bottom: 200upx;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0.8;
			.consult-icon{
				display: block;
				width: 80upx;
				height: 80upx;
			}
		}
	}
</style>