pbl-teacher-table/src/components/pages/classroomObservation/index.vue

<template>
	<div class="classroomObservation" v-loading="loading">
		<!-- <div class="co-header1">
			<div class="co-h1-left">
				<span class="co-h1-l-icon el-icon-s-home"></span>
				<div class="co-h1-l-router">
						<span class="co-h1-l-r-up" @click="goTo('ai助手')">AI助手</span>
						<span class="co-h1-l-r-rightIcon el-icon-arrow-right"></span>
						<span class="co-j1-l-r-down">课堂观察</span>
				 </div>
			</div>
		</div> -->
		<div class="co-header2">
			<div class="co-h2-left">
				<!-- <span
					class="co-h2-l-icon"
					@click="$refs.addNewCourseDialogRef.open()"
				></span> -->
				<span class="co-h2-l-icon" @click="addNewCourse()"></span>
				<span class="co-h2-l-hr"></span>
				<span class="co-h2-l-text">
					<el-select
						class="co_h2_l_t_select"
						v-model="tid"
						placeholder="查看历史课堂"
						@change="changeTid"
					>
						<el-option
							v-for="item in optionData"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
							<div class="selectBox">
								<span>{{ item.label }}</span>
								<div class="controlsBox">
									<span class="changeSelect" @click.stop="changeCourse(item)"></span>
									<span
									class="delSelect"
									@click.stop="delCourse(item.id)"
								></span>
								</div>
								
							</div>
						</el-option>
					</el-select>
				</span>
				<!-- <div
					class="co_h2_l_del"
					@click.stop="delCourse()"
					v-if="optionData.length > 0"
				>
					<span></span>
				</div> -->
			</div>
			<div class="co-h2-right">
				<div
					:class="['co-h2-r-btn', fileId ? '' : 'ca-h2-r-noActive']"
					style="background: rgba(54, 129, 252, 1)"
					@click.stop="getReport()"
				>
					<span class="co-h2-r-b-icon1"></span>
					<div style="color: white">一键分析</div>
				</div>

				<div
					:class="['co-h2-r-btn', fileId ? '' : 'ca-h2-r-noActive']"
					style="background: #ffffff"
					@click.stop="preview()"
				>
					<span class="co-h2-r-b-icon2"></span>
					<div style="color: black">查看报告</div>
				</div>
				<!-- <div class="co-h2-r-btn2" @click.stop="preview()">
					<el-tooltip class="item" effect="light" content="预览" placement="top">
						<img
						src="../../../assets/icon/classroomObservation/Syan.png"
						alt=""
					/>
    			</el-tooltip>
				</div> -->

				<div :class="['co-h2-r-btn2']" @click.stop="shareBtn">
					<!-- <span class="co-h2-r-b-icon3"></span> -->
					<el-tooltip
						class="item"
						effect="light"
						content="分享"
						placement="top"
					>
						<img
							src="../../../assets/icon/classroomObservation/daoChu.svg"
							alt=""
						/>
					</el-tooltip>
				</div>

				<div :class="['co-h2-r-btn2']" @click.stop="examine">
					<!-- <span class="co-h2-r-b-icon3"></span> -->
					<el-tooltip
						class="item"
						effect="light"
						content="审核"
						placement="top"
					>
						<img
							src="../../../assets/icon/classroomObservation/examine.svg"
							alt=""
						/>
					</el-tooltip>
				</div>

				<!-- <div :class="['co-h2-r-btn2']" @click.stop="home">
					<el-tooltip
						class="item"
						effect="light"
						content="主页"
						placement="top"
					>
						<img
							src="../../../assets/icon/classroomObservation/home.svg"
							alt=""
						/>
					</el-tooltip>
				</div> -->
			</div>
		</div>
		<div class="co-main">
			<div class="co-m-left">
				<chatArea
					ref="chatAreaRef"
					:tid="tid"
					@updateFileId="updateFileId"
					@changeAudioUrl="changeAudioUrl"
					@updateTranscription="updateTranscription"
					:fileId="fileId"
					:createTime="createTime"
					:fileIdId="fileIdId"
				/>
			</div>
			<div class="co-m-right">
				<messageArea
					:tid="tid"
					:fileId="fileId"
					ref="messageAreaRef"
					@changeAudioUrl="changeAudioUrl"
					@changeChatAreaAudioUrl="changeChatAreaAudioUrl"
					@changeTranscription="changeTranscription"
					@changeOptionData="changeOptionData"
					@updateTime="updateTime"
				/>
			</div>
		</div>
		<sharePdf
			:dialogVisibleShare="dialogVisibleShare"
			:tid="tid"
			@shareBtn="shareBtn"
		></sharePdf>
		<changeCourseNameDialog :tid="tid" ref="changeCourseNameDialogRef" @success="changeCourseSuccess"/>
		
		<!-- <addNewCourseDialog
			:courseList="optionData"
			ref="addNewCourseDialogRef"
			@success="addNewCourse"
		/> -->
	</div>
</template>

<script>
// 聊天区域
import chatArea from "./components/chatArea.vue";
// 信息区域
import messageArea from "./components/messageArea.vue";

import sharePdf from "./components/sharePdf.vue";

import { v4 as uuidv4 } from "uuid";
// 添加课堂弹窗
// import addNewCourseDialog from "./components/addNewCourseDialog.vue";
//修改课程名称弹窗
import changeCourseNameDialog from './components/changeCourseNameDialog';
//保存模板弹窗

export default {
	components: {
		chatArea,
		messageArea,
		sharePdf,
		changeCourseNameDialog,
		// addNewCourseDialog,
	},
	data() {
		return {
			loading: false,
			dialogVisibleShare: false,
			createTime: new Date().toLocaleString().replaceAll("/", "-"),
			tid: "",
			fileId: "",
			fileIdId: "",
			optionData: [],
			userId: this.$route.query["userid"],
		};
	},
	methods: {
		//切换了课堂
		changeTid(newValue) {
			this.$nextTick(() => {
				this.$refs.messageAreaRef.getData();
				this.$refs.chatAreaRef.getData();
				this.getFileIdId();
			});
		},
		addNewCourse() {
			return new Promise((resolve, reject) => {
				if (this.loading) return this.$message.info("请稍等");
				this.loading = true;
				let date = new Date();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let classroomName = `${month < 10 ? "0" + month : month}${
					day < 10 ? "0" + day : day
				}新建课堂`;
				let sum = this.optionData.filter(
					(i) => i.label.indexOf(classroomName) != -1
				).length;
				if (!sum == 0) {
					classroomName += sum;
				}
				let params = {
					tid: uuidv4(),
					name: classroomName,
					userid: this.userId,
				};
				this.ajax
					.post(
						"https://gpt4.cocorobo.cn/insert_classroom_observation_tid",
						params
					)
					.then((res) => {
						let _data = res.data.FunctionResponse;
						if (_data.message == "创建成功") {
							// 设置该课堂的tid
							this.tid = params.tid;
							this.ajax
								.post("https://gpt4.cocorobo.cn/insert_classroom_observation", {
									tid: params.tid,
									type: 10,
									index: 0,
									json_data: JSON.stringify({ file_ids: "" }),
									userid: this.userId,
								})
								.then((res2) => {
									let _data2 = res2.data.FunctionResponse;
									if (_data2.message == "创建成功") {
										this.loading = false;
										this.$nextTick(() => {
											this.getCourseList().then((_) => {
												this.getFileIdId();
												this.$refs.messageAreaRef.getData();
												this.$refs.chatAreaRef.getData();
												resolve();
											});
										});
									} else {
										this.$message.error("创建fileIds失败");
									}
								});
						} else if (_data.message == "tid重复") {
							this.$message.error("该课堂已存在");
							this.loading = false;
						} else {
							this.$message.error("创建失败");
							this.loading = false;
						}
					});
			});
		},
		updateFileId(newValue) {
			this.fileId = newValue;
		},
		// 生成报告
		getReport() {
			if (!this.fileId) return;
			// this.$confirm("操作将覆盖原有内容，是否继续？", "提示", {
			// 	confirmButtonText: "确定",
			// 	cancelButtonText: "取消",
			// 	type: "warning",
			// })
			// 	.then(() => {
				this.$refs.messageAreaRef.getReport();
			// 	})
			// 	.catch((e) => {
			// 		console.log(e)
			// 		console.log("取消生成报告");
			// 	});
		},
		//预览
		preview() {
			if (!this.fileId) return;
			window.parent.postMessage(
				{
					tools: "classroom_observation_board",
					type: this.tid,
				},
				"*"
			);
		},
		// 分享
		shareBtn() {
			// if(!this.fileId)return;
			this.dialogVisibleShare = !this.dialogVisibleShare;
		},
		// 审核
		examine() {
			if (!this.tid) return;
			window.parent.postMessage(
				{
					tools: "classroom_observation_ob_comment",
					type: this.tid,
				},
				"*"
			);
		},
		// 主页
		home() {
			this.$message.info("主页");
		},
		delCourse(_value) {
			this.$confirm("此操作将永久删除该课堂, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					// this.optionData.splice(
					// 	this.optionData.findIndex((item) => item.value == _value),
					// 	1
					// );
					// this.tid = this.optionData[0] ? this.optionData[0].value : "";
					// this.changeTid(this.tid);
					// this.$message({
					// 	type: "success",
					// 	message: "删除成功!",
					// });
					let params = {
						tid: _value,
					};
					this.ajax
						.post(
							"https://gpt4.cocorobo.cn/update_classroom_observation_isdel",
							params
						)
						.then((res) => {
							this.$message({
								type: "success",
								message: "删除成功!",
							});
							// 清空tid
							this.tid = "";
							this.getCourseList().then((_) => {
								if (!this.tid) return;
								this.getFileIdId();
								this.$refs.messageAreaRef.getData();
								this.$refs.chatAreaRef.getData();
							});
						});
				})
				.catch(() => {});
		},
		// 获取修改fileId的ID
		getFileIdId() {
			if (!this.tid) return;
			let pram = {
				tid: this.tid,
				type: "10",
			};
			this.fileIdId = "";
			this.fileId = "";
			this.ajax
				.post("https://gpt4.cocorobo.cn/get_classroom_observation_new", pram)
				.then((res) => {
					console.log(res);
					let _data = res.data.FunctionResponse.result.length
						? JSON.parse(res.data.FunctionResponse.result)
						: [];
					if (_data.length <= 0) return;
					this.fileIdId = _data[0].id;
					if (_data[0].jsonData != "") {
						this.fileId = JSON.parse(_data[0].jsonData).file_ids;
					} else {
						this.fileId = "";
					}
				});
		},
		// 切换录音文件
		changeAudioUrl(data) {
			this.$refs.messageAreaRef.changeAudioUrl(data);
		},
		changeChatAreaAudioUrl(data) {
			this.$refs.chatAreaRef.changeAudioUrl(data.url);
		},
		getCourseList() {
			this.loading = true;
			return new Promise((resolve, reject) => {
				this.ajax
					.post("https://gpt4.cocorobo.cn/get_classroom_observation_all", {
						userid: this.userId,
					})
					.then((res) => {
						let _data = res.data.FunctionResponse.result;
						let _result = [];
						try {
							_result = _data ? JSON.parse(_data) : [];
						} catch (error) {
							_result = [];
						}

						if (_result.length <= 0) {
							this.loading = false;
							return;
						}
						let _optionData = _result.map((item) => {
							item.jsonData = item.jsonData ? JSON.parse(item.jsonData) : {};
							return {
								label: item.jsonData.courseName
									? item.jsonData.courseName
									: `${item.tId}课堂`,
								value: item.tId,
								id: item.id,
							};
						});
						_optionData = _optionData.filter(
							(i) => i.label != "" && i.tId != ""
						);
						this.optionData = _optionData;
						if (this.optionData.length > 0) {
							this.$refs.chatAreaRef.$refs.startPageRef.showIntroduce = false;
						}
						this.loading = false;
						console.log(this.optionData);
						resolve();
					}).catch(e=>{
						console.log(e);
						this.$message.error("获取课堂列表失败")
					});
			});
		},
		updateTranscription({ transcriptionData, editorBarData }, fn) {
			this.$refs.messageAreaRef.updateMessageTranscription(
				{
					transcriptionData,
					editorBarData,
				},
				fn
			);
		},
		changeTranscription({ transcriptionData, editorBarData }) {
			this.$refs.chatAreaRef.changeEditorBar({
				transcriptionData,
				editorBarData,
			});
		},
		changeOptionData(_tid, _newObj) {
			let _index = this.optionData.findIndex((i) => i.value == _tid);
			if (_index != -1) {
				this.optionData[_index] = { ...this.optionData[_index], ..._newObj };
				this.$forceUpdate();
			}
		},
		updateTime(time) {
			this.createTime = time;
		},
		// 修改课程名称
		changeCourse(item){
			this.$refs.changeCourseNameDialogRef.open(item);
			// console.log(item);
		},
		// 修改课程名称确定
		changeCourseSuccess(data){
			this.loading = true;
			if(this.tid==data.tid){
				this.$refs.messageAreaRef.bmData.jsonData.courseName = data.name;
				this.$refs.messageAreaRef.saveData(this.$refs.messageAreaRef.bmData).then(res=>{
					this.loading = false;
					this.optionData.find(i=>i.id==data.id).label=data.name
					this.$message.success('修改成功')
				})
			}else{
				this.ajax.post("https://gpt4.cocorobo.cn/get_classroom_observation_new",{
				tid:data.tid,
				type:0
			}).then(res=>{
				let _data = res.data.FunctionResponse.result;
				_data = JSON.parse(_data);
				let _bmData = _data.find(i=>i.tIndex==0);
				_bmData.jsonData = JSON.parse(_bmData.jsonData);
				_bmData.jsonData.courseName = data.name;
				this.$refs.messageAreaRef.saveData(_bmData).then(res=>{
					this.loading = false;
					this.optionData.find(i=>i.id==data.id).label=data.name
					this.$message.success('修改成功')
				})
			}).catch(e=>{
				console.log(e);
				this.$message.error('修改失败')
				this.loading = false;
			})
			}
		},
		//保存词频词汇分析
		saveWordFrequency({_sentence=0,_words=0}){
			this.$refs.messageAreaRef.saveWordFrequency({_sentence,_words})
		},
	},
	mounted() {
		this.getCourseList().then((_) => {
			if (!this.tid) return;
			this.getFileIdId();
			this.$refs.messageAreaRef.getData();
			this.$refs.chatAreaRef.getData();
		});
	},
};
</script>

<style scoped>
.classroomObservation {
	min-width: 1500px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #f0f2f5;
}

.co-header1 {
	width: 100%;
	height: 46px;
	background-color: #060e17;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 20px;
}

.co-h1-left {
	width: auto;
	height: 22px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 20px;
}

.co-h1-l-icon {
	color: #5d6268;
	width: 16px;
	height: 16px;
	margin-right: 10px;
}

.co-h1-l-router {
	display: flex;
	align-items: center;
	color: white;
	font-size: 14px;
}

.co-h1-l-router > span {
	margin: 0 5px;
}

.co-h1-l-r-up {
	color: #5d6268;
	cursor: pointer;
}

.co-h1-l-r-up:hover {
	color: white;
}

.co-j1-l-r-down {
	cursor: pointer;
}

.co-h1-l-r-rightIcon {
	font-size: 16px;
	color: #5d6268;
}

.co-header2 {
	width: 100%;
	height: 42px;
	min-height: 42px;
	max-height: 42px;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 20px;
}

.co-h2-left {
	width: auto;
	height: 22px;
	display: flex;
	align-items: center;
	font-size: 14px;
}

.co-h2-l-icon {
	width: 20px;
	height: 20px;
	position: relative;
	background: url("../../../assets/icon/classroomObservation/close.png")
		no-repeat;
	transform: rotate(45deg);
	cursor: pointer;
	background-size: 100% 100%;
}
.co-h2-l-hr {
	width: 2px;
	height: 20px;
	background-color: #e7e7e7;
	border-radius: 10px;
	margin: 0 10px;
}

.co-h2-right {
	width: auto;
	height: 100%;
	display: flex;
	align-items: center;
}

.co-h2-r-btn {
	width: auto;
	box-sizing: border-box;
	padding: 0 10px;
	height: 30px;
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	margin: 0 10px;
	box-sizing: border-box;
	border: 1px solid rgba(134, 179, 253, 1);
	/* border: solid 1px #3681FC; */
	border-radius: 5px;
}

.ca-h2-r-noActive {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

.co-h2-r-btn2 {
	width: auto;
	box-sizing: border-box;
	padding: 10px;
	height: 30px;
	display: flex;
	align-items: center;
	cursor: pointer;
	margin: 0 10px;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: 0px 4px 10px 0px rgba(29, 57, 131, 0.08);

	/* box-shadow: 1px 1px 20px 4px rgba(29, 57, 131, 0.05); */
}

.co-h2-r-btn > span:nth-child(1) {
	width: 20px;
	height: 20px;
	margin-right: 8px;
}

.co-h2-r-b-icon1 {
	background: url("../../../assets/icon/classroomObservation/six.svg") no-repeat;
	background-size: 100% 100%;
}

.co-h2-r-b-icon2 {
	background: url("../../../assets/icon/classroomObservation/Syan.svg")
		no-repeat;
	background-size: 100% 100%;
}

/* .co-h2-r-b-icon2 {
	background: url("../../../assets/icon/classroomObservation/daoChu.png")
		no-repeat;
	background-size: 100% 100%;
}
.co-h2-r-b-icon3 {
	background: url("../../../assets/icon/classroomObservation/Syan.png")
		no-repeat;
	background-size: 100% 100%;
} */

/* .co-h2-r-blueBtn {
	background: rgba(134, 179, 253, 1);

	color: white;
} */

.co-main {
	width: 100%;
	flex: 1;
	display: flex;

	/* align-items: center; */
	/* justify-content: center; */
}

.co-m-left {
	box-sizing: border-box;
	flex: 1;
	min-width: 650px;
}

.co-m-right {
	height: 100%;
	flex: 1;
	box-sizing: border-box;
	min-width: 450px;

	overflow: auto;
}

.co_h2_l_t_select >>> .el-input__inner {
	border: none;
}
/* .co_h2_l_t_select >>> .el-input__suffix {
	display: none;
} */

.co_h2_l_del {
	width: 35px;
	height: 35px;
	margin-left: 10px;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.co_h2_l_del > span {
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url("../../../assets/icon/classroomObservation/del.svg") no-repeat;
	background-size: 100% 100%;
}

.co_h2_l_del:hover {
	background-color: #eaeef1;
}

.selectBox {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.controlsBox{
	display: flex;
	align-items: center;
	width: auto;
	height: 100%;
	display: none;
}

.selectBox:hover>.controlsBox{
	display: flex;
}

.changeSelect{
	width: 16px;
	height: 16px;
	/* display: none; */
	align-items: center;
	justify-content: center;
	background: url("../../../assets/icon/classroomObservation/editIcon.svg") no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	margin-right: 10px;
}

.delSelect {
	width: 16px;
	height: 16px;
	/* display: none; */
	align-items: center;
	justify-content: center;
	background: url("../../../assets/icon/classroomObservation/del.svg") no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	/* transform: translateY(7px); */
}
</style>