update

src/components/pages/classroomObservation/components/chatArea.vue

@@ -2,7 +2,7 @@
 	<div class="chatArea" v-loading="loading">
 		<div class="m-operation">
 			<div>实时转录</div>
-			<div>{{createTime}}</div>
+			<div>{{ createTime }}</div>
 		</div>
 		<div class="titBar">
 			<div class="titBarLeft">
@@ -29,6 +29,7 @@
 				@startTape="recordedStart"
 				@uploadTape="uploadRecording"
 				:uploadFileLoading="uploadFileLoading"
+				ref="startPageRef"
 			/>
 			<!-- 原文速递 -->
 			<transcription
@@ -367,10 +368,15 @@
 		<div class="chatAreaLoading" v-if="progressData.uploadLoading">
 			<div class="cal_box">
 				<div>
-					<img :src="require('../../../../assets/loading.gif')" alt="">
+					<img :src="require('../../../../assets/loading.gif')" alt="" />
 					<span>上传中，请稍等...</span>
 				</div>
-				<el-progress style="width:100%;color: #fff;" :text-inside="true" :stroke-width="24" :percentage="progressData.value"></el-progress>
+				<el-progress
+					style="width: 100%; color: #fff"
+					:text-inside="true"
+					:stroke-width="24"
+					:percentage="progressData.value"
+				></el-progress>
 			</div>
 			<!-- <el-progress style="width:80%" :text-inside="true" :stroke-width="24" :percentage="progressData.value"></el-progress> -->
 		</div>
@@ -478,9 +484,9 @@ export default {
 			type: String,
 			default: "",
 		},
-		createTime:{
-			type:String,
-			default:new Date().toLocaleString().replaceAll('/','-')
+		createTime: {
+			type: String,
+			default: new Date().toLocaleString().replaceAll("/", "-"),
 		},
 	},
 	components: {
@@ -511,16 +517,18 @@ export default {
 			showRoleList: false,
 			showGetTextLoading: false,
 			roleListIndex: 0,
-			userId:this.$route.query['userid'],
+			userId: this.$route.query["userid"],
 			recordedForm: {
 				time: "00:00:00", //时间
 				status: 0, //0--未录音  1--正在录音  2--暂停  3--录音结束
+				timer:null,
+				timeDuration:0
 			},
 			roleList: [],
 			publicRoleList: [],
-			progressData:{
-				uploadLoading:false,
-				value:0,
+			progressData: {
+				uploadLoading: false,
+				value: 0,
 			},
 			audioUrl: "",
 			editorBarData: {
@@ -596,7 +604,7 @@ export default {
 		},
 		// 上传录音
 		uploadRecording() {
-			if(!this.tid)return this.$message.error("请选择课堂")
+			if (!this.tid) return this.$message.error("请选择课堂");
 			if (this.uploadFileLoading) return this.$message.info("请稍等...");
 			let input = document.createElement("input");
 			input.type = "file";
@@ -661,7 +669,7 @@ export default {
 			}
 		},
 		recordedStart() {
-			if(!this.tid)return this.$message.error("请选择课堂")
+			if (!this.tid) return this.$message.error("请选择课堂");
 			if (this.uploadFileLoading) return this.$message.info("请稍等...");
 			// 开始录音
 			if (this.audioUrl) {
@@ -673,45 +681,132 @@ export default {
 					.then(() => {
 						this.recordedForm.status = 0;
 						this.audioUrl = "";
-						recorder.initRecorder(); //初始化录音
-						recorder.destroy(); // 销毁录音
+						// recorder.initRecorder(); //初始化录音
+						// recorder.destroy(); // 销毁录音
 						this.recordedStart();
 					})
 					.catch((_) => {
 						console.log("不顶替");
 					});
 			} else if (this.controlsStatus != 1 && this.recordedForm.status == 0) {
-				recorder.initRecorder(); //初始化录音
-				recorder.destroy(); // 销毁录音
-				// 开始录音
-				recorder.start().then(
-					() => {
-						this.controlsStatus = 1;
-						this.recordedForm.status = 1;
-						recorder.onprogress = this.updateRecordedTime;
-						this.$message.success("录音已开始");
-					},
-					(error) => {
-						this.controlsStatus = 0;
-						this.recordedForm.status = 0;
-						// _this.$message.error(`${error.name} : ${error.message}`);
-						this.$message.error(
-							`没有找到可使用的麦克风，或者您没有允许此网页使用麦克风`
-						);
-						// 出错了
-						console.log(`${error.name} : ${error.message}`);
-						// if (_this.calcTimer) {
-						//   clearInterval(_this.calcTimer)
-						//   _this.calcTimer = null;
-						// }
+				let iiframe = this.$refs["iiframe"];
+				iiframe.contentWindow.testdoContinuousPronunciationAssessment();
+				this.controlsStatus = 1;
+				this.recordedForm.status = 1;
+				this.$message.success("已开始录音");
+				textList = [];
+				this.recordedForm.timeDuration = 0;
+				iiframe.contentWindow.onRecognizedResult = function (e) {
+					if (flag) {
+						_this.controlsStatus = 2;
+						_this.showIndexPage = false;
+						_this.pageStatus = 1;
+						_this.editorBarData.type = "0";
+						flag = false;
+						_this.uploadFileLoading = false;
+						_this.transcriptionData.content = "";
+						_this.editorBarData.content = "";
+						textList = [];
+						_this.recordedForm.timer = setInterval(()=>{
+							_this.recordedForm.timeDuration+=1000;
+							_this.updateRecordedTime({duration:_this.recordedForm.timeDuration})
+						},1000)
 					}
-				);
+					_this.showGetTextLoading = true;
+					let privText = e.privText;
+					console.log("👇转译对象👇");
+					console.log(e);
+					console.log("👇转译结果👇");
+					console.log(privText);
+					textList.push({
+						value: privText,
+						startTime: "",
+						endTime: "",
+						time: "",
+					});
+					_this.transcriptionData.content += privText;
+
+					let _result = `
+					<table
+							border="0"
+							width="100%"
+							cellpadding="0"
+							cellspacing="0"
+							style="text-align: center"
+						>
+							<tbody>
+								<tr>
+									<th>序号</th>
+									<th>开始时间</th>
+									<th>结束时间</th>
+									<th>发言内容</th>
+									<th>时长</th>
+									<th>说话人身份</th>
+									<th>行为编码</th>
+							</tr>
+					`;
+					textList.forEach((item, index) => {
+						_result += `<tr>
+								<td>${index + 1}</td>
+								<td></td>
+								<td></td>
+								<td>${item.value}</td>
+								<td></td>
+								<td></td>
+								<td></td>
+							</tr>`;
+					});
+					_result += `
+					<tr>
+								<td></td>
+								<td></td>
+								<td></td>
+								<td></td>
+								<td></td>
+								<td></td>
+								<td></td>
+							</tr>
+						</tbody>
+					</table>`;
+					_this.editorBarData.content = _result;
+				};
+
+				// recorder.initRecorder(); //初始化录音
+				// recorder.destroy(); // 销毁录音
+				// // 开始录音
+				// recorder.start().then(
+				// 	() => {
+				// 		this.controlsStatus = 1;
+				// 		this.recordedForm.status = 1;
+				// 		recorder.onprogress = this.updateRecordedTime;
+				// 		this.$message.success("录音已开始");
+				// 	},
+				// 	(error) => {
+				// 		this.controlsStatus = 0;
+				// 		this.recordedForm.status = 0;
+				// 		// _this.$message.error(`${error.name} : ${error.message}`);
+				// 		this.$message.error(
+				// 			`没有找到可使用的麦克风，或者您没有允许此网页使用麦克风`
+				// 		);
+				// 		// 出错了
+				// 		console.log(`${error.name} : ${error.message}`);
+				// 		// if (_this.calcTimer) {
+				// 		//   clearInterval(_this.calcTimer)
+				// 		//   _this.calcTimer = null;
+				// 		// }
+				// 	}
+				// );
 			} else if ([1, 2].includes(this.recordedForm.status)) {
 				this.controlsStatus = 1;
 				this.$message.info("还在录音中");
 			}
 			// this.controlsStatus = 1;
 		},
+		// 录音中
+		isRecorded(e) {
+			console.log("录音中");
+			console.log(e);
+		},
 		updateRecordedTime({ duration }) {
 			// 更新currentTime，将秒数转换为时分秒格式
 			let hours = Math.floor(duration / 3600);
@@ -737,29 +832,44 @@ export default {
 		// this.TapeNum = 0;
 		// },
 		async finishRecorded() {
-			this.uploadFileLoading = true;
-			recorder.stop();
-			this.$message.success("已结束录音");
-			this.showIndexPage = false;
-			this.pageStatus = 1;
-			this.controlsStatus = 2;
 			this.recordedForm.status = 3;
-			// let file = this.convertToMp3(recorder.getWAV());
-			const mp3Blob = recorder.getWAVBlob();
-			let audioFile = this.dataURLtoAudio(mp3Blob, "wav");
-			this.uploadFile(audioFile);
+			this.$message.success("已借宿录音")
+			clearInterval(this.recordedForm.timer);
+			// this.uploadFileLoading = true;
+			// recorder.stop();
+			// this.$message.success("已结束录音");
+			// this.showIndexPage = false;
+			// this.pageStatus = 1;
+			// this.controlsStatus = 2;
+			// this.recordedForm.status = 3;
+			// // let file = this.convertToMp3(recorder.getWAV());
+			// const mp3Blob = recorder.getWAVBlob();
+			// let audioFile = this.dataURLtoAudio(mp3Blob, "wav");
+			// this.uploadFile(audioFile);
 			// this.uploadWavFileAndGetText(audioFile);
 		},
 		stopRecorded() {
-			if (!recorder.ispause) {
-				recorder.pause();
+			if(this.recordedForm.status==1){//暂停
 				this.recordedForm.status = 2;
-				this.$message.warning("已暂停录音");
-			} else {
-				recorder.resume();
+				clearInterval(this.recordedForm.timer)
+				this.$message.success("已暂停录音")
+			}else if(this.recordedForm.status==2){//开始
 				this.recordedForm.status = 1;
-				this.$message.success("已继续录音");
-			}
+				this.$message.success("已开始录音")
+				this.recordedForm.timer = setInterval(() => {
+					this.recordedForm.timeDuration+=1000,
+					this.updateRecordedTime({duration:this.recordedForm.timeDuration});
+				}, 1000);
+			} 
+			// if (!recorder.ispause) {
+			// 	recorder.pause();
+			// 	this.recordedForm.status = 2;
+			// 	this.$message.warning("已暂停录音");
+			// } else {
+			// 	recorder.resume();
+			// 	this.recordedForm.status = 1;
+			// 	this.$message.success("已继续录音");
+			// }
 		},
 		changeAudioUrl(newValue) {
 			if (!newValue) return;
@@ -891,16 +1001,16 @@ export default {
 				// 	mind_map_question: "",
 				// });
 				let params = JSON.stringify({
-        message: {
-          anthropic_version: "bedrock-2023-05-31",
-          max_tokens: 4096,
-          temperature: 0,
-          top_p: 1,
-          messages: _historyMessage
-        },
-        uid: _uuid,
-        model: "Claude 3 Sonnet" // Claude 3 Sonnet或者Claude 3 Haiku
-      });
+					message: {
+						anthropic_version: "bedrock-2023-05-31",
+						max_tokens: 4096,
+						temperature: 0,
+						top_p: 1,
+						messages: _historyMessage,
+					},
+					uid: _uuid,
+					model: "Claude 3 Sonnet", // Claude 3 Sonnet或者Claude 3 Haiku
+				});
 				this.ajax
 					// .post("https://gpt4.cocorobo.cn/chat", params)
 					.post("https://claude3.cocorobo.cn/chat", params)
@@ -917,7 +1027,9 @@ export default {
 			}
 		},
 		getAiContent(_uid) {
-			let _source = new EventSource(`https://claude3.cocorobo.cn/streamChat/${_uid}`);
+			let _source = new EventSource(
+				`https://claude3.cocorobo.cn/streamChat/${_uid}`
+			);
 			// let _source = new EventSource(`https://gpt4.cocorobo.cn/stream/${_uid}`); //http://gpt4.cocorobo.cn:8011/stream/     https://gpt4.cocorobo.cn/stream/
 			let _allText = "";
 			let _mdText = "";
@@ -1069,82 +1181,6 @@ export default {
 		wavFileGetText(audioFile) {
 			let flag = true;
 			let textList = [];
-			// if (flag) {
-			// 	// 这里上传文件
-			// 	// _this.uploadWavFile(audioFile);
-			// 	this.controlsStatus = 2;
-			// 	this.showIndexPage = false;
-			// 	this.pageStatus = 1;
-			// 	this.editorBarData.type = "0";
-			// 	flag = false;
-			// 	this.uploadFileLoading = false;
-			// }
-			// let num = 0;
-			// let timer = null;
-			// this.showGetTextLoading = true;
-			// timer = setInterval(()=>{
-			// 	console.log(`这是第：${num}个`)
-			// 	let privText = `这是第- ${num} -个`
-			// 	textList.push({
-			// 		value:privText,
-			// 		startTime:"",
-			// 		endTime:"",
-			// 		time:"",
-			// 	})
-			// 	this.transcriptionData.content += privText;
-			// 	num++;
-			// 	let _result =`
-			// 		<table
-			// 			border="0"
-			// 			width="100%"
-			// 			cellpadding="0"
-			// 			cellspacing="0"
-			// 			style="text-align: center"
-			// 		>
-			// 			<tbody>
-			// 				<tr>
-			// 					<th>序号</th>
-			// 					<th>开始时间</th>
-			// 					<th>结束时间</th>
-			// 					<th>发言内容</th>
-			// 					<th>时长</th>
-			// 					<th>说话人身份</th>
-			// 					<th>行为编码</th>
-			// 			</tr>
-			// 	`
-			// 	textList.forEach((item,index)=>{
-			// 		_result += `<tr>
-			// 				<td>${index+1}</td>
-			// 				<td></td>
-			// 				<td></td>
-			// 				<td>${item.value}</td>
-			// 				<td></td>
-			// 				<td></td>
-			// 				<td></td>
-			// 			</tr>`
-			// 	})
-
-			// 	_result+=`
-			// 	<tr>
-			// 				<td></td>
-			// 				<td></td>
-			// 				<td></td>
-			// 				<td></td>
-			// 				<td></td>
-			// 				<td></td>
-			// 				<td></td>
-			// 			</tr>
-			// 		</tbody>
-			// 	</table>`
-			// 	this.editorBarData.content = _result;
-			// 	if(num>=30)return clearInterval(timer);
-			// },2000)
-
-			// setTimeout(()=>{
-			// 	this.showGetTextLoading = false;
-
-			// },66000)
-			// return;
 			let iiframe = this.$refs["iiframe"];
 			let _this = this;
 
@@ -1201,7 +1237,7 @@ export default {
 				`;
 				textList.forEach((item, index) => {
 					_result += `<tr>
-							<td>${index+1}</td>
+							<td>${index + 1}</td>
 							<td></td>
 							<td></td>
 							<td>${item.value}</td>
@@ -1238,7 +1274,7 @@ export default {
 				files: [audioFile],
 			});
 		},
-		uploadFile(file,flag = true) {
+		uploadFile(file, flag = true) {
 			var credentials = {
 				accessKeyId: "AKIATLPEDU37QV5CHLMH",
 				secretAccessKey: "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",
@@ -1273,7 +1309,7 @@ export default {
 					.upload(params, options)
 					.on("httpUploadProgress", function (evt) {
 						//这里可以写进度条
-						_this.progressData.value = parseInt((evt.loaded * 100) / evt.total)
+						_this.progressData.value = parseInt((evt.loaded * 100) / evt.total);
 						// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
 					})
 					.send(function (err, data) {
@@ -1326,7 +1362,7 @@ export default {
 												// _this.transcriptionData.content += _res.data;
 												_this.editorBarData.type = "0";
 												let _textData = _res.data;
-												if(flag){
+												if (flag) {
 													let _result = `<table
 														border="0"
 														width="100%"
@@ -1334,53 +1370,65 @@ export default {
 														cellspacing="0"
 														style="text-align: center"
 													>
-														<tbody>`
-														_textData.split("\n").forEach((item,index)=>{
-															if(index==_textData.split("\n").length-1)return;
-															if(index==0){
-																_result+=`<tr>`
-																if(item.split('').filter(char=>char===',').length>=6){
-																	item.split(',').forEach((item2,index2)=>{
-																		_result += `
+														<tbody>`;
+													_textData.split("\n").forEach((item, index) => {
+														if (index == _textData.split("\n").length - 1)
+															return;
+														if (index == 0) {
+															_result += `<tr>`;
+															if (
+																item.split("").filter((char) => char === ",")
+																	.length >= 6
+															) {
+																item.split(",").forEach((item2, index2) => {
+																	_result += `
 																			<th>${item2}</th>
 																		`;
-																	})
-																}else{
-																	item.trim().split(/\s+/).forEach((item2,index2)=>{
+																});
+															} else {
+																item
+																	.trim()
+																	.split(/\s+/)
+																	.forEach((item2, index2) => {
 																		_result += `
 																			<th>${item2}</td>
 																		`;
-																	})
-																}
-																_result+=`</tr>`
-																return;
+																	});
 															}
-															_result+=`<tr>`
-																if(item.split('').filter(char=>char===',').length>=6){
-																	item.split(',').forEach((item2,index2)=>{
-																		_result += `
+															_result += `</tr>`;
+															return;
+														}
+														_result += `<tr>`;
+														if (
+															item.split("").filter((char) => char === ",")
+																.length >= 6
+														) {
+															item.split(",").forEach((item2, index2) => {
+																_result += `
 																			<td>${item2}</td>
 																		`;
-																	})
-																}else{
-																	item.trim().split(/\s+/).forEach((item2,index2)=>{
-																		_result += `
+															});
+														} else {
+															item
+																.trim()
+																.split(/\s+/)
+																.forEach((item2, index2) => {
+																	_result += `
 																			<td>${item2}</td>
 																		`;
-																	})
-																}
-															
-															_result+=`</tr>`
-														})
-													 	_result += `
+																});
+														}
+
+														_result += `</tr>`;
+													});
+													_result += `
 															</tbody>
 														</table>`;
-														_this.editorBarData.content = _result;
-												}else{
+													_this.editorBarData.content = _result;
+												} else {
 													_this.editorBarData.content = _textData;
 												}
-												
-											
+
 												// _this.transcriptionData.content = _res.data;
 												_this.editorBarData.url = "";
 												_this.saveEditorBar();
@@ -1447,7 +1495,7 @@ export default {
 					}
 				})
 				.catch((e) => {
-					console.log(e)
+					console.log(e);
 					// this.$message.error("获取角色列表失败");
 					this.roleList = [];
 				});
@@ -1471,7 +1519,7 @@ export default {
 				})
 				.catch((e) => {
 					this.publicRoleList = [];
-					console.log(e)
+					console.log(e);
 					// console.log("获取公共角色失败", e);
 				});
 		},
@@ -1518,7 +1566,7 @@ export default {
 			}
 		},
 		getData() {
-			if(!this.tid)return;
+			if (!this.tid) return;
 			this.loading = true;
 			this.getRoleList();
 			this.getPublicRoleList();
@@ -1529,21 +1577,21 @@ export default {
 		},
 		// 保存转录文稿和原文速览
 		saveEditorBar(flag = false) {
-			if(!this.tid)return this.$message.error("请选择课堂")
+			if (!this.tid) return this.$message.error("请选择课堂");
 			if (
 				this.editorBarData.type == "0" &&
 				flag &&
 				this.editorBarData.content
 			) {
 				// 如果是文本则转成txt并保存
-				let _result = JSON.parse(JSON.stringify(this.editorBarData))
+				let _result = JSON.parse(JSON.stringify(this.editorBarData));
 				var text = _result.content;
 
 				// 创建一个Blob实例
 				var blob = new Blob([text], { type: "text/plain;charset=utf-8" });
 				blob.lastModifiedDate = new Date();
 				blob.name = `${this.tid}-classroomObservation.txt`;
-				return this.uploadFile(blob,false);
+				return this.uploadFile(blob, false);
 			} else {
 				// this.loading = true;
 				// let div = document.createElement("div");
@@ -1565,7 +1613,7 @@ export default {
 		changeEditorBar({ transcriptionData, editorBarData }) {
 			this.transcriptionData.content = transcriptionData;
 			try {
-				let _result = JSON.parse(editorBarData)
+				let _result = JSON.parse(editorBarData);
 				this.editorBarData = _result;
 			} catch (error) {
 				this.editorBarData = editorBarData;
@@ -1574,7 +1622,7 @@ export default {
 		// 获取对话记录
 		getChatList() {
 			return new Promise((resolve, reject) => {
-				if(!this.tid)return;
+				if (!this.tid) return;
 				if (this.chatLoading) return this.$message.info("请稍等...");
 				this.chatList = [];
 				if (!this.tid) return setTimeout(() => this.getChatList(), 100);
@@ -1647,12 +1695,12 @@ export default {
 				.then((res) => {});
 		},
 		// 转录文稿修改
-		changeEditor(val){
-			console.log(val)
+		changeEditor(val) {
+			console.log(val);
 			// this.editorBarData.content = val;
 			// console.log(this.editorBarData)
 			this.$forceUpdate();
-		}
+		},
 	},
 	mounted() {},
 };
@@ -2169,7 +2217,7 @@ export default {
 	overflow: auto;
 }
 
-.chatAreaLoading{
+.chatAreaLoading {
 	position: absolute;
 	width: 100%;
 	height: 100%;
@@ -2181,7 +2229,7 @@ export default {
 	align-items: center;
 }
 
-.cal_box{
+.cal_box {
 	width: 300px;
 	height: 150px;
 	background-color: white;
@@ -2195,20 +2243,20 @@ export default {
 	padding: 20px;
 }
 
-.cal_box>div:nth-child(1){
+.cal_box > div:nth-child(1) {
 	margin-bottom: 10px;
 	font-size: 18px;
 	display: flex;
 	align-items: center;
 }
 
-.cal_box>div:nth-child(1)>img{
+.cal_box > div:nth-child(1) > img {
 	width: 30px;
 	height: 30px;
 	margin-right: 10px;
 }
 
-.cal_box>>>.el-progress-bar__innerText{
+.cal_box >>> .el-progress-bar__innerText {
 	color: #fff !important;
 }
 </style>