hitap-chat/pages/index/detail.vue

<template>
	<view class="detail">
		<view class="Content BorderBox Width100">
			<top-title :is-show-left="true" :title="'智能排查'"  :rightWidth="40" class="custom_bg">
				<template slot="right">
					<image :src="$.imgurl + '/knowledge.png'" mode="" class="knowledge" @click="goToKnowledge"></image>
				</template>
			</top-title>
		</view>
		<!-- <headerNavBar title="智能排查" :isBack="true">
			<template v-slot:right>
				<image :src="$.imgurl + '/knowledge.png'" mode="" class="knowledge" @click="goToKnowledge"></image>
			</template>
		</headerNavBar> -->
		<view class="stepBox">
			<view class="step" v-for="(item, index) in tablist" :key="index">
				<view class="stepItem">
					<view :class="{'stepCircleActive': index <= active, 'stepCircle': index > active}">{{ index + 1 }}
					</view>
					<view class="stepText" :style="{'color': index <= active ? '#000000' : '#bcc3cd'}">{{ item.title }}
					</view>
				</view>
				<view v-if="index !== 3" class="circles">
					<view :class="{'circleActive': index < active, 'circle': index >= active}" v-for="i in 8" :key="i">
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :scroll-top="scrollTop"
			:style="{height: isExpanded ? 'calc(100% - 440rpx)' : 'calc(100% - 340rpx)'}" class="chatlist"
			ref="scrollView" @click="clickContent">

			<view :class="['bar', item.answerId == '0' ? 'currAnswer' : '']" v-for="(item,index) in msgList"
				:key="item.id">
				<image :src="item.answerId == '0' ? '/static/self.png' : '/static/left_user.png'" class="img" />
				<view class="content">
					<zeroMarkdownView :markdown="item.data" />
					<!-- <ua-markdown :source="mdvalue" /> -->
					<view class="btnBox">
						<view class="btn" @click="handleBtn(text)" v-for="(text,index) in item.options">{{text}}</view>
					</view>
				</view>
			</view>
			<view class="loading-animation" v-if="loading">
				<view class="bounce-dot"></view>
				<view class="bounce-dot"></view>
				<view class="bounce-dot"></view>
			</view>
		</scroll-view>
		<view class="input-wrapper" :class="{ 'input-wrapper-expanded': isExpanded }">
			<view class="topContent">
				<input class="uni-input" placeholder="请输入内容" :value="inputValue" @confirm="handleSend"
					@input="onKeyInput" />

				<uni-icons class="uni-icon" type="plus" size="30" @click="handlePlus"></uni-icons>
			</view>
			<view v-if="isExpanded" class="expanded">
				<view @click="chooseImage" class="expandedItem">
					<uni-icons class="camera-icon" type="image" size="28"></uni-icons>
					<view>照片</view>
				</view>
				<view class="expandedItem" style="margin-top: 6px;">
					<image src="../../static/video.png" class="video"></image>
					<view>视频</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import AbortController from 'abort-controller/dist/abort-controller'
	import TopTitle from "../../components/top-title.vue";
	// import headerNavBar from '../../components/headerNavBar/headerNavBar.vue'
	import zeroMarkdownView from '../../components/zeroMarkdownView/zeroMarkdownView.vue'
	// import {
	// 	EventSourcePolyfill
	// } from 'event-source-polyfill';
	import $ from '../../common/globalJs/globalJs.js'
	import {
		fetchEventSource
	} from '@microsoft/fetch-event-source'
	// import {
	// 	baseUrl
	// } from '../../utils/config.js';

	export default {
		components: {
			TopTitle,
			zeroMarkdownView
		},
		data() {
			return {
				active: 0,
				tablist: [{
						title: '信息确认'
					},
					{
						title: '排查指引'
					}, {
						title: '隐患补充'
					}, {
						title: '工单生成'
					}
				],
				inputValue: '',
				es: null,
				msgList: [],
				loading: true,
				streamLoading: true,
				scrollTop: 0,
				title: '',
				isExpanded: false,
				sessionId: '',
				id: '',
				allContent: '',
				params: {},
				tabkey: 0,


			}
		},
		onLoad() {
			let params = {
				sessionId: '12121212',
				id: '12121212',
				roadName: '金水路与合川路'
			}
			this.params = params
			this.sessionId = params.sessionId
			this.id = params.id
			let str = '';
			if (params.roadName) {
				str += '路段名：' + params.roadName;
				this.title = params.roadName + '智能排查';
			}
			if (params.id) {
				str += ',id：' + params.id; //params.id
			}
			console.log(params)
			if (params.id == 12121212) {
				this.queryChat("开始隐患排查," + str, );
			} else {
				this.SSE("开始隐患排查," + str, '1')
				// if(this.msgListA.length==0){
				// this.SSE("开始隐患排查," + str, '1')
				// }else{
				// this.loading = false
				// this.scrollBottom();
				// }
			}

		},
		onUnload() {
			if (this.es) {
				this.es.close();
				this.es = null;
			}
		},
		// computed: {
		//    msgListA: {
		//      get() {
		//        return this.$store.state.msgList;
		//      },
		//      set(value) {
		//        this.$store.commit('setMSg_List', value);
		//      }
		//    }
		//  },
		methods: {

			// 建立SSE长连接
			SSE(voiceText, answerId) {
				const ctrl = new AbortController()
				console.log(ctrl.signal)
				fetchEventSource('http://219.147.31.25:30001/hitap/chat', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
						Accept: ['text/event-stream', 'application/json'],
					},
					body: JSON.stringify({
						voiceText,
						"sceneFlag": "",
						"sessionId": this.sessionId,
						"id": this.id,
						"multiType": "",
						"userId": "admin1",
						"deptId": "3702000000",
						"type": 1,
						"stream": true,
					}),
					signal: ctrl.signal,
					openWhenHidden: true,
					onopen: () => {},
					onmessage: (ev) => {
						console.log(ev)
						this.loading = true
						const res = JSON.parse(ev.data);
						if (res?.code == 200 && res.result) {
							console.log(res.result.data.tabkey);
							console.log(res.result.data);
							this.tabkey = res.result.data.tabkey
							if (this.tabkey - 1 != this.active) {
								this.active = this.tabkey - 1 > 0 ? this.tabkey - 1 : 0;
							}
							if (this.msgList.length == 0) {
								this.msgList = [{
									answerId,
									data: res.result.data.content
								}]
							} else {
								// debugger
								//回答
								if (this.msgList[this.msgList.length - 1].answerId == '1') {
									//最后一个是回答
									this.msgList[this.msgList.length - 1].data += res.result.data.content

								} else {
									//最后一个是问题
									this.msgList = [...this.msgList, {
										answerId: '1',
										data: res.result.data.content
									}]
								}

							}


							// debugger

							this.scrollBottom();
						}


					},
					onclose: () => {
						console.log(1111)
						this.loading = false;

						if (this.isExpanded) {
							this.isExpanded = !this.isExpanded;
						}
					},
					onerror(error) {
						console.log("error", error);
						throw error;
					},
				})
			},

			async queryChat(voiceText) {
				// console.log(voiceText,"voiceText");
				this.loading = true;
				const [err, res] = await uni.request({
					// url: 'http://10.16.3.159:8777/api/local_doc_qa/local_doc_chat',
					url: $.chatUrl+'/chat',
					dataType: 'json',
					method: 'POST',
					// responseType: 'arraybuffer',
					headers: {
						// 'Accept': 'text/event-stream',
						'content-type': 'application/json'
					},
					data: {
						voiceText,
						"sceneFlag": "",
						"sessionId": this.sessionId,
						"id": this.id,
						"multiType": "",
						"userId": "admin1",
						"deptId": "3702000000",
						"type": 1,
						"stream": false,
						// "user_id": "zzp",
						// "kb_ids": ["KBa80ea15e786241eca70a20f136f4e34c"],
						// "question": "隐患排查流程是什么",
						// "streaming": true,
						// "history": []
					}
				});
				if (res && res.data && res.data.code == 200) {
					// console.log('request success', res.data)
					const {
						result = {}
					} = res.data;
					const {
						data = {}
					} = result;
					if (data.tabkey - 1 != this.active) {
						this.active = data.tabkey - 1 > 0 ? data.tabkey - 1 : 0;
					}
					if (data.content) {
						this.changeMsgList(data.answerId || '1', data.content, data.answerOptions);
					}
					this.loading = false;
					if (this.isExpanded) {
						this.isExpanded = !this.isExpanded;
					}
				} else {
					if (err) {
						console.log('request fail', err.errMsg);
					}
					uni.showToast({
						title: "查询失败",
						icon: "error",
						duration: 2000
					})
				}
			},
			// 输入框
			onKeyInput(event) {
				this.inputValue = event.detail.value
			},
			addQuestion(q, answerId) {
				const newQuestion = {
					answerId,
					data: q
				};
				this.msgList.push(newQuestion); // 将问题添加到消息列表
				// this.$store.commit('setMSg_List', this.msgList);
				this.scrollBottom();
			},
			scrollBottom() {
				this.$nextTick(() => {
					const height = this.$refs.scrollView && this.$refs.scrollView.$refs && this.$refs
						.scrollView.$refs.content ? this.$refs.scrollView.$refs.content.scrollHeight : 0;
					this.scrollTop = height;
				})
			},
			// 发送
			handleSend(text) {
				if (!this.inputValue & !text) {
					uni.showToast({
						title: "请输入内容",
						icon: "closeempty",
						duration: 2000
					})
				}
				if (text || this.inputValue) {
					if (this.params.id == 12121212) {
						this.changeMsgList('0', this.inputValue || text);
						this.queryChat(this.inputValue || text);
						this.scrollBottom()
					} else {
						this.addQuestion(this.inputValue || text, '0')
						this.SSE(this.inputValue || text, '0');
					}
					this.inputValue = '';
				}

			},
			// 更新列表信息
			changeMsgList(answerId, data, answerOptions) {
				let id = 1;
				if (this.msgList.length > 0) {
					id = this.msgList[this.msgList.length - 1].id + 1;
				}
				if (answerId == '1') { // 后台返回来的消息
					let newdata = '';
					let index = 0;
					const timer = setInterval(() => {
						console.log(this.msgList);
						newdata = newdata += data[index]
						if (this.msgList?.filter(item => (item.id == id)).length == 0) {
							this.msgList = [...this.msgList, {
								id,
								answerId,
								data: newdata,
								// options: answerOptions // ['东南西北','东北','东南北','东南西北'] answerOptions
							}];
						} else {
							this.msgList[this.msgList.length - 1].data = newdata;
						}
						index += 1;
						this.$nextTick(() => {
							const height = this.$refs.scrollView && this.$refs.scrollView.$refs && this
								.$refs.scrollView.$refs.content ? this.$refs.scrollView.$refs.content
								.scrollHeight : 0;
							this.scrollTop = height;
						})
						if (newdata == data) {
							this.msgList[this.msgList.length - 1].options = answerOptions;
							clearInterval(timer);
						}
					}, 50)
				} else {
					this.msgList = [...this.msgList, {
						id,
						answerId,
						data,
					}];
					this.$nextTick(() => {
						const height = this.$refs.scrollView && this.$refs.scrollView.$refs && this.$refs
							.scrollView.$refs.content ? this.$refs.scrollView.$refs.content.scrollHeight : 0;
						this.scrollTop = height;
					})
				}
			},

			handlePlus() {
				this.isExpanded = !this.isExpanded;
			},
			// 快捷回复
			handleBtn(text) {

				this.handleSend(text)
			},
			clickContent() {
				if (this.isExpanded) {
					this.isExpanded = !this.isExpanded;
				}
			},
			goToKnowledge() {
				uni.navigateTo({
					url: '/pages/home/knowledge'
					// url: `/pages/home/knowledge?params=${encodeURIComponent(JSON.stringify(this.$route.query.params))}`
				})
			},
			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (res.tempFilePaths && res.tempFilePaths.length) {
							let str = '';
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								str += `![图${i + 1}](${res.tempFilePaths[i]})`;
							}

							if (this.id == 12121212) {
								this.changeMsgList('0', str);
								this.queryChat(res.tempFilePaths);
							} else {
								this.addQuestion(str, '0')
								this.SSE(res.tempFilePaths, '0');
							}
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.detail {
		width: 100%;
		margin: auto;
		height: 100vh;
		overflow: hidden;

		.knowledge {
			width: 40rpx;
			height: 40rpx;
		}

		.stepBox {
			width: 100%;
			// height: 150rpx;
			 padding-top: 110rpx ;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ffffff;

			.step {
				display: flex;

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

				.circles {
					display: flex;
					// justify-content: space-between;
					padding: 22px 0;

					.circle {
						width: 4rpx;
						height: 4rpx;
						border-radius: 50%;
						background-color: #e9edf5;
						margin: 0 1px;
					}

					.circleActive {
						width: 4rpx;
						height: 4rpx;
						border-radius: 50%;
						background-color: #ccc;
						margin: 0 1px;
					}
				}

				.stepCircle {
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 50%;
					background-color: #e9edf5;
					color: #a0abbd;
					text-align: center;
					margin-bottom: 10rpx;
				}

				.stepCircleActive {
					width: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 50%;
					background-color: #295cbc;
					color: #ffffff;
					text-align: center;
					margin-bottom: 4rpx;
					border: 5px solid #c6d8fc;
				}

				.stepText {
					font-size: 16px;
					color: #bcc3cd;
				}
			}

		}

		.chatlist {
			width: 96%;
			margin: auto;
			height: calc(100% - 340rpx);
			background-color: #f0f2f7;

			.bar {
				width: 100%;
				display: flex;
				margin-bottom: 40rpx;
				overflow: hidden;

				.btnBox {
					display: flex;
					justify-content: flex-end;

					.btn {
						color: #497cca;
						background-color: #d8e3f8;
						display: flex;
						padding: 2rpx 20rpx;
						margin: 10rpx;
						border-radius: 4rpx;
					}
				}

				.img {
					width: 80rpx;
					height: 80rpx;
					margin-top: 15rpx;
				}

				.content {
					display: inline-block;
					max-width: 80%;
					border: 1px solid #ddd;
					border-radius: 5px;
					padding: 0;
					margin: 15rpx 20rpx 0 20rpx;
					// flex: 1;
					overflow: hidden;
					background-color: #ffffff;

					._img {
						max-width: 80%
					}
				}

				&.currAnswer {
					flex-direction: row-reverse;

					.content {
						background-color: #cce0ff;
					}
				}

			}
		}

		.input-wrapper {
			display: flex;
			width: 100%;
			margin: 20rpx auto 0 auto;
			height: 80rpx;
			flex-direction: column;
			background-color: #FFFFFF;
			box-sizing: border-box;
			border-top: 1px solid #e2e4e9;
			bottom: 1px solid #e2e4e9;
			padding: 20rpx 20rpx 0 20rpx;

			.topContent {
				display: flex;
				width: 100%;
			}

			.expanded {
				background-color: #f5f7fa;
				display: flex;

				.expandedItem {
					width: 106rpx;
					height: 106rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.camera-icon {
						margin-top: 5px
					}
				}

				.video {
					width: 60rpx;
					height: 60rpx;

				}
			}
		}

		.input-wrapper-expanded {

			height: 200rpx;
		}

		.uni-input {
			height: 56rpx;
			line-height: 56rpx;
			font-size: 30rpx;
			padding: 0rpx 10rpx;
			flex: 1;
			background-color: #fff;
		}

		.uni-icon {
			font-family: uniicons;
			font-size: 48rpx;
			font-weight: normal;
			font-style: normal;
			width: 48rpx;
			height: 48rpx;
			line-height: 48rpx;
			color: #999999;
			margin: 0 10rpx;
		}

		.loading-animation {
			display: flex;
			justify-content: center;
			margin-top: 0;

			.bounce-dot {
				width: 20rpx;
				height: 20rpx;
				margin: 10rpx;
				background-color: #666;
				border-radius: 50%;
				animation: bounce 1.4s infinite both;

				&:nth-child(2) {
					animation-delay: 0.2s;
				}

				&:nth-child(3) {
					animation-delay: 0.4s;
				}
			}
		}
	}

	@keyframes bounce {

		0%,
		80%,
		100% {
			transform: scale(0);
		}

		40% {
			transform: scale(1);
		}
	}
</style>