heshanApp/pages/ai/consultation.vue

<template>
	<view class="container">
		<view class="head-box">
			<view class="chose-patient">
				<view class="title-box" @click="addPatient()" v-if="patient==null">
					<text class="title">选择就诊人</text>
					<view class="right">
						<text class="value">请点击添加</text>
						<image src="/static/images/arrow_gray.png" mode=""></image>
					</view>
				</view>
				<view class="patient" @click="addPatient()" v-if="patient!=null">
					<view class="left">
						<view class="name">{{patient.patientName}}</view>
						<view class="info">
							<text class="text" v-if="patient.sex==1">男</text>
							<text class="text" v-if="patient.sex==2">女</text>
							<text class="text">{{$getAge(patient.birthday)}}岁</text>
							<text class="text">{{$parseIdCard(patient.idCard)}}</text>
						</view>
					</view>
					<view class="right">
						<image src="/static/images/arrow_gray.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="aitips">欢迎使用我的智能体。但我的智能体诊断和建议不能全权替代我本人诊断结论，仅供参考</view>
		</view>
		<scroll-view class="msg-scroll" :style="{height: height}" :scroll-top="scrollTop" scroll-y="true"
			:scroll-with-animation="true">
			<view class="msgs">
				<view class="msg-item" v-for="(item,index) in msgs">
					<view class="left" v-if="item.type==1">
						<image class="img" src="@/static/images/AI_Doctor_image_font_icon48.png"></image>
						<view class="msg-box">
							<view class="msg-content">
								<view class="">
									{{item.content}}
								</view>
								<view class="es-fs-24 es-mt-30 es-c-99">
									内容由AI生成，非诊疗意见，不适请及时就医
								</view>
							</view>
							<!-- <view class="msg-btn-box">
								<view class="btn" @click="editMsgStatus(item)"
									v-if="item.msg!=null&&item.msg.status==0">回答不满意</view>
								<view class="btn" v-if="item.msg!=null" @click="copyMsg(item.content)">复制内容</view>
							</view> -->
						</view>
					</view>
					<view class="right" v-if="item.type==2">
						<view class="msg-content">{{item.content}}</view>
						<image class="img" :src="avatar"></image>
					</view>
				</view>
				<!-- <view class="msgEnd" v-show="msgEnd"><u-divider text="会话结束" :hairline="true"></u-divider></view> -->
			</view>
		</scroll-view>
		<view class="footer x-bc">
			<u-input placeholder="请输入想要咨询的问题..." border="surround" v-model="inputText" @confirm="handleInput"></u-input>
			<view class="send-box">
				<view class="send-btn x-ac" @click="handleInput()">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { aiChatListByUser } from "@/api/index.js"
	export default {
		data() {
			return {
				avatar: '',
				patient: null,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				windowHeight: uni.getSystemInfoSync().screenHeight,
				height: '50vh',
				scrollTop: 0,
				msgs: [],
				inputText:"",
				roleId:null,
				msgTimes:null,
				isSocketOpen:false,
				socket:null,
				isSend:true,
				userInfo: {},
				doctorId: '',
				sessionId: undefined,
				msgEnd: false,
				doctorName: ""
			}
		},
		onLoad(option) {
			this.doctorName = option.doctorName || ''
			uni.setNavigationBarTitle({
				title: this.doctorName + "(智能体)"
			})
			this.doctorId = option.doctorId || ''
			this.height =
				`calc(${this.windowHeight}px - ${this.statusBarHeight}px - 196px)`
			this.roleId=option.roleId;
			this.roleName=option.roleName;
			this.userInfo = uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync("userInfo")) : {}
			this.avatar= this.userInfo.avatar || '';
			this.getMsgList();
			this.initSocket();
			uni.$on('refreshOrderPatient', (res) => {
				if(this.patient&&this.patient.patientId == res.patientId) {
					return
				}
				this.msgEnd = false
				this.patient = res
				this.getMsgList();
			})
		},
		onShow() {
			this.userInfo = uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync("userInfo")) : {}
		},
		methods: {
			// getTips() {
			// 	const that = this
			// 	uni.showModal({
			// 		title: '风险提示',
			// 		content: '内容由AI生成，仅供您参考使用，不作为疾病诊断治疗依据',
			// 		showCancel: false,
			// 		success: function (res) {
			// 			if (res.confirm) {
			// 				that.getMsgList();
			// 				that.initSocket();
			// 			}
			// 		}
			// 	});
			// },
			getHeight() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".head-box")
					.boundingClientRect((data) => {
						this.height =
							`calc(${this.windowHeight}px - ${this.statusBarHeight}px - 94px - ${data.height}px)`
					})
					.exec();
			},
			addPatient() {
				uni.navigateTo({
					url: '/pages/user/patient'
				})
			},
			handleInput() {
				if(this.patient && this.patient.patientId) {
					if(this.msgEnd || !this.isSocketOpen) {
						// 重新发起会话
						this.initSocket()
					} else {
						this.sendMsg();
					}
				} else {
					uni.showToast({
						title: '请选择就诊人',
						icon: "none"
					})
				}
			},
			getMsgList() {
				if(this.patient && this.patient.patientId) {
					const that = this;
					const userId = this.userInfo.userId;
					const param = {
						doctorId: this.doctorId,
						userId: this.userInfo.userId,
						patientId: this.patient.patientId,
					}
					aiChatListByUser(param).then(res=>{
						setTimeout(()=>{
							this.getHeight()
						},200)
						let list = [{
							msgType: 2,
							content: '您好，我是'+this.doctorName+'医生智能体。我学习了海量的医学书籍、药品知识以及临床病例，我可以为您提供健康咨询、营养指导及医疗信息参考，如果您有健康方面的问题，可以随时向我咨询。'
						}]
						if(res.data&&res.data.length > 0) {
							list = list.concat(res.data)
							that.sessionId = res.data&&res.data.length > 0 ? res.data[0].sessionId : undefined
						}
						list.forEach(function(value, index, array) {
							that.addMsg(value.msgType == 1 ? 2 : 1, value.content, value, 1);
						});
					}).catch(()=>{
						setTimeout(()=>{
							this.getHeight()
						},200)
					})
				}
			},
			initSocket() {
				//创建一个socket连接
				var userId = this.userInfo.userId;
				var that = this;
				if (this.socket) {
					this.socket.close()
					this.socket = null;
				}
				this.socket = uni.connectSocket({
					url: getApp().globalData.wsUrl + "/app/webSocket/" + userId,
					multiple: true,
					success: res => {
						console.log('WebSocket连接已打开1！');
						that.isSocketOpen = true
					},
					error: res => {
						console.log(res)
					},
				})
				this.socket.onMessage((res) => {
					console.log("收到消息",res)
					that.isSend = true;
					that.addMsg(1, res.data, null, 2);
				})
				//监听socket打开
				this.socket.onOpen(() => {
					console.log('WebSocket连接已打开2！',that.msgEnd);
					that.isSocketOpen = true
					if(that.msgEnd) {
						// 重新发起会话
						that.isSend = true;
						that.sendMsg();
					}
				})
				//监听socket关闭
				this.socket.onClose(() => {
					that.isSocketOpen = false
					that.socket = null
					console.log('WebSocket连接已关闭！');
					that.msgEnd = true
					setTimeout(()=> {
						const query = uni.createSelectorQuery().in(this);
						query
							.select(".msgs")
							.boundingClientRect((res) => {
								if(res&&res.height) {
									const scrollH = res.height;
									that.scrollTop = scrollH;
								}
							})
							.exec();
					}, 500)
					if(that.msgTimes) {
						clearInterval(that.msgTimes)
						that.msgTimes = null
					}
				})
				//监听socket错误
				this.socket.onError(() => {
					that.isSocketOpen = false
					that.socket = null
					that.msgEnd = true
					console.log('WebSocket连接打开失败');
					if(that.msgTimes) {
						clearInterval(that.msgTimes)
						that.msgTimes = null
					}
				})


			},
			sendMsg() {
				if (this.inputText == "") {
					return;
				}
				if (!this.isSend) {
					return;
				}
				if (this.isSocketOpen) {
					var userId = this.userInfo.userId;
					var data = {
						userId: this.userInfo.userId,
						doctorId: this.doctorId,
						message: this.inputText,
						sessionId: this.sessionId,
						patientId: this.patient.patientId
					};
					this.socket.send({
						data: JSON.stringify(data),
						success: () => {
							console.log("发送成功")
							this.addMsg(2, this.inputText, null, 1);
							this.addMsg(1, "正在思考中...", null, 1);
							this.isSend = false;
						},
						fail: () => {
							console.log("发送失败")
						}
					});

				}

			},
			addMsg(type, content, msg, inputType) {
				this.msgEnd = false
				var obj = {
					type: type,
					content: content,
					msg: msg
				}
				if (inputType == 2) {
					this.msgs.splice(-1);
					this.msgs.push(obj);
				} else if (inputType == 1) {
					this.msgs.push(obj)
				}
				this.inputText = ""
				var that = this;
				setTimeout(()=> {
					const query = uni.createSelectorQuery().in(this);
					query
						.select(".msgs")
						.boundingClientRect((res) => {
							if(res&&res.height) {
								const scrollH = res.height;
								that.scrollTop = scrollH;
							}
						})
						.exec();
				}, 500)
				//先确保清除了之前的消息定时器
				if(that.msgTimes) {
					clearInterval(that.msgTimes)
					that.msgTimes = null
				}
				// 5分钟无消息自动结束 
				that.msgTimes=setInterval(()=>{
					console.log("5分钟无消息自动结束")
					clearInterval(that.msgTimes)
					if(this.socket!=null){
						this.socket.close()
					}
					that.msgTimes = null
				},300000)
			},
		},
		onUnload() {
			this.msgEnd = true
			if(this.socket!=null){
				this.socket.close()
			}
			if(this.msgTimes) {
				clearInterval(this.msgTimes)
				this.msgTimes = null
			}
			uni.$off('refreshOrderPatient')
		}
	}
</script>

<style lang="scss" scoped>
	.head-box {
		padding: 15rpx 15rpx 0 15rpx;
	}
	.chose-patient {
		// margin: 15rpx 15rpx;
		margin-bottom: 15rpx;
		padding: 30rpx 40rpx;
		box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
		background-color: #fff;
		border-radius: 15rpx;

		.title-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
			}

			.right {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.value {
					font-size: 28upx;
					font-family: PingFang SC;
					color: #999;
					margin-right: 10rpx;
				}

				image {
					width: 15upx;
					height: 30upx;
				}

			}
		}

		.patient {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 110upx;

			.left {
				.name {
					font-size: 30upx;
					line-height: 1;
					font-family: PingFang SC;
					font-weight: bold;
					color: #111111;
				}

				.info {
					margin-top: 30rpx;
					display: flex;
					align-items: center;

					.text {
						font-size: 26upx;
						font-family: PingFang SC;
						line-height: 1;
						font-weight: 500;
						color: #999;
						margin-right: 19upx;
					}

				}
			}

			.right {
				display: flex;
				align-items: center;

				image {
					width: 15upx;
					height: 30upx;
				}
			}
		}
	}

	.aitips {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #999;
		text-align: center;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.msgEnd {
		padding: 20rpx 100rpx;
	}
	.footer {
		padding: 10rpx;
		width: 100%;
		background-color: #fff;
		padding-bottom: calc(var(--window-bottom) + 10rpx);
		position: fixed;
		bottom: 0;
		left: 0;

		.send-btn {
			margin-left: 20rpx;
			padding: 20rpx 40rpx;
			min-height: 76rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			background-color: #FF5030;
		}
	}

	.msg-scroll {
		height: calc(100vh - 120px);

		.msgs {
			width: 100%;

			.msg-item {
				padding: 15rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				width: 100%;

				.left {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;

					.img {
						min-width: 50px;
						width: 50px;
						height: 50px;
						border-radius: 50%;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.msg-box {
						max-width: 80%;
						// margin-top: 10px;

						.msg-content {
							max-width: 100%;
							border-radius: 0 10px 10px 10px;
							padding: 10px;
							margin-top: 15px;
							margin-left: 10px;
							background-color: #fff;
							color: #111;
							font-size: 16px;
							font-family: PingFang SC;
							word-wrap: break-word;
							/* 旧版浏览器支持 */
							overflow-wrap: break-word;
							/* 现代浏览器支持 */
							white-space: normal;
							/* 确保连续文本不会超出容器 */
						}

						.msg-btn-box {
							max-width: 100%;
							margin-top: 10px;
							display: flex;
							justify-content: flex-start;
							align-items: flex-start;

							.btn {
								margin-right: 15px;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 10px;
								padding: 10px 20px;
								background-color: #fff;
								color: #FF5030;
								font-size: 14px;
							}
						}
					}

				}

				.right {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: flex-start;

					.msg-content {
						max-width: 80%;
						margin-top: 15px;
						margin-right: 10px;
						border-radius: 10px 0 10px 10px;
						padding: 10px;
						background-color: #FF5030;
						color: #fff;
						font-size: 16px;
						font-family: PingFang SC;
						word-wrap: break-word;
						/* 旧版浏览器支持 */
						overflow-wrap: break-word;
						/* 现代浏览器支持 */
						white-space: normal;
						/* 确保连续文本不会超出容器 */
					}

					.img {
						min-width: 50px;
						width: 50px;
						height: 50px;
						border-radius: 50%;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>