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-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 style="float: left">{{ item.label }}</span>
								<span
									class="delSelect"
									@click.stop="delCourse(item.value)"
									style="float: right"
								></span>
							</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"
					:fileIdId="fileIdId"
				/>
			</div>
			<div class="co-m-right">
				<messageArea
					:tid="tid"
					:fileId="fileId"
					ref="messageAreaRef"
					@changeAudioUrl="changeAudioUrl"
					@changeChatAreaAudioUrl="changeChatAreaAudioUrl"
					@changeTranscription="changeTranscription"
					@changeOptionData="changeOptionData"
				/>
			</div>
		</div>
		<sharePdf
			:dialogVisibleShare="dialogVisibleShare"
			:tid="tid"
			@shareBtn="shareBtn"
		></sharePdf>

		<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 addNewCourseDialog from "./components/addNewCourseDialog.vue";
export default {
	components: {
		chatArea,
		messageArea,
		sharePdf,
		addNewCourseDialog,
	},
	data() {
		return {
			title: "12月19日会议录音",
			loading: false,
			dialogVisibleShare: false,
			tid: "",
			fileId: "",
			fileIdId: "",
			optionData: [],
		};
	},
	methods: {
		//切换了课堂
		changeTid(newValue) {
			this.$nextTick(() => {
				this.$refs.messageAreaRef.getData();
				this.$refs.chatAreaRef.getData();
				this.getFileIdId();
			});
		},
		addNewCourse(form) {
			if (this.loading) return this.$message.info("请稍等");
			this.loading = true;
			let params = {
				tid: form.no,
				name: form.name,
			};
			this.ajax
				.post(
					"https://gpt4.cocorobo.cn/insert_classroom_observation_tid",
					params
				)
				.then((res) => {
					let _data = res.data.FunctionResponse;
					if (_data.message == "创建成功") {
						this.tid = form.no;
						// 设置该课程的tid
						this.ajax
							.post("https://gpt4.cocorobo.cn/insert_classroom_observation", {
								tid: this.tid,
								type: 10,
								index: 0,
								json_data: JSON.stringify({ file_ids: "" }),
							})
							.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();
										});
									});
								} 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.$refs.messageAreaRef.getReport();
		},
		//预览
		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.tid) {
			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: "删除成功!",
					});
				})
				.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")
					.then((res) => {
						let _data = res.data.FunctionResponse.result;
						let _result = _data ? JSON.parse(_data) : [];
						if (_result.length <= 0) 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,
							};
						});
						_optionData = _optionData.filter(
							(i) => i.label != "" && i.tId != ""
						);
						this.optionData = _optionData;
						if (this.optionData.length > 0) {
							if (!this.tid) this.tid = this.optionData[0].value;
						}
						this.loading = false;
						resolve();
					});
			});
		},
		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();
			}
			console.log(this.optionData);
		},
	},
	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%;
}
.selectBox:hover .delSelect {
	display: flex;
}

.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>