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

<template>
	<div class="contrastObservation" v-loading="loading">
		<div class="co_card co_aggregateData" v-loading="aggregateLoading">
			<div class="co_ad_title">
				<img
					:src="
						require('../../../assets/icon/contrastObservation/titleIcon.svg')
					"
				/>
				<span>总数据对比</span>
			</div>
			<div class="co_ad_chartArea">
				<chart :data="aggregateData.chartData" />
			</div>
			<div class="co_ad_messageArea" v-html="aggregateData.message"></div>
		</div>
		<div class="co_card co_ai_card">
			<div class="co_c_main" v-loading="aiLoading">
				<div class="co_c_title">AI观察结果</div>
				<div
					class="co_c_m_message"
					v-for="(item, index) in aiData"
					:key="index"
				>
					<div class="co_c_m_m_title co_ai_title">
						<el-tooltip
							class="item"
							effect="dark"
							:content="item.description"
							placement="bottom"
							popper-class="text_tooltip"
						>
							<span>{{ item.title }}</span>
						</el-tooltip>
					</div>
					<div class="score">
						<span class="titleBlob">评分：</span>{{ item.score }}
					</div>
					<div class="message">
						<span class="titleBlob">结论：</span>{{ item.message }}
					</div>
					<div class="basis">
						<span class="titleBlob">依据：</span>
						<ol>
							<li
								v-for="(item2, index2) in item.basis.length ? item.basis : []"
								:key="index2"
							>
								{{ item2 }}
							</li>
						</ol>
					</div>
					<!-- <div class="co_c_m_m_text">{{ item.message }}</div> -->
				</div>
			</div>
		</div>
		<div class="co_card co_teacher_card">
			<div class="co_c_main" v-loading="teacherLoading">
				<div class="co_c_title">教师观察结果</div>
				<div
					class="co_c_m_message"
					v-for="(item, index) in teacherData"
					:key="index"
				>
					<div class="co_c_m_m_title co_teacher_title">
						<el-tooltip
							class="item"
							effect="dark"
							:content="item.description"
							placement="bottom"
							popper-class="text_tooltip"
						>
							<span>{{ item.title }}</span>
						</el-tooltip>
					</div>
					<div class="score">
						<span class="titleBlob">评分：</span>{{ item.score }}
					</div>
					<div class="message">
						<span class="titleBlob">结论：</span>{{ item.message }}
					</div>
					<div class="basis">
						<span class="titleBlob">依据：</span>
						<ol>
							<li
								v-for="(item2, index2) in item.basis.length ? item.basis : []"
								:key="index2"
							>
								{{ item2 }}
							</li>
						</ol>
					</div>
					<!-- <div class="co_c_m_m_text">{{ item.message }}</div> -->
				</div>
			</div>
		</div>
		<div class="co_card co_contrast_card">
			<div class="co_c_main" v-loading="contrastLoading">
				<div class="co_c_title">对比观察结果</div>
				<div
					class="co_c_m_message"
					v-for="(item, index) in contrastData"
					:key="index"
				>
					<div class="co_c_m_m_title co_contrast_title">
						<el-tooltip
							class="item"
							effect="dark"
							:content="item.description"
							placement="bottom"
							popper-class="text_tooltip"
						>
							<span>{{ item.title }}</span>
						</el-tooltip>
					</div>

					<div class="similarity">
						<span class="titleBlob compareTitle">相同点：</span>
						<span>{{ item.similarity }}</span>
					</div>

					<!-- <div class="compare" v-else>
						<div class="titleBlob">相同点：</div>
						<ol>
							<li
								v-for="(item2, index2) in item.similarity.length ? item.similarity : []"
								:key="index2"
							>
								{{ item2 }}
							</li>
						</ol>
					</div> -->

					<div class="difference">
						<span class="titleBlob compareTitle">不同点：</span>
						<span>{{ item.difference }}</span>
					</div>

					<!-- <div class="compare" v-else>
						<div class="titleBlob">不同点：</div>
						<ol>
							<li
								v-for="(item2, index2) in item.difference.length ? item.difference : []"
								:key="index2"
							>
								{{ item2 }}
							</li>
						</ol>
					</div> -->
					<!--<div class="score">评分：{{ item.score }}分</div>
					<div class="message">结论：{{ item.message }}</div>
					<div class="basis">
						<span>依据：</span>
						<ol>
							<li
								v-for="(item2, index2) in item.basis.length ? item.basis : []"
								:key="index2"
							>
								{{ item2 }}
							</li>
						</ol>
					</div>-->
					<!-- <div class="co_c_m_m_text">{{ item.message }}</div> -->
				</div>
			</div>
		</div>
		<div
			:class="['refresh',(loading ||aggregateLoading ||aiLoading ||teacherLoading ||contrastLoading)?'refreshDisabled':'']"
			@click.stop="refresh()"
			v-loading="
				loading ||
				aggregateLoading ||
				aiLoading ||
				teacherLoading ||
				contrastLoading
			"
		>
			<img
				:src="require('../../../assets/icon/contrastObservation/refresh.svg')"
			/>
		</div>
	</div>
</template>

<script>
import chart from "./component/chart";
import { v4 as uuidv4 } from "uuid";
export default {
	components: {
		chart,
	},
	data() {
		return {
			tid: this.$route.query["tid"],
			testId: {
				testId: "",
				checkUrl: "",
				doUrl: "",
			},
			editorBarData: {
				type: 0,
				content: "",
			},
			testData: null,
			isDoTestList: [],
			loading: false,
			aggregateLoading: false,
			aiLoading: false,
			teacherLoading: false,
			contrastLoading: false,
			classroomObservationData: [],
			aggregateData: {
				message: ``,
				chartData: {
					legend: {
						data: ["AI的观察结果", "教师观察结果"],
					},
					radar: {
						// shape: 'circle',
						indicator: [
							{ name: "教学设计", max: 10 },
							{ name: "教学实施", max: 10 },
							{ name: "学生参与", max: 10 },
							{ name: "知识建构", max: 10 },
							{ name: "课堂氛围", max: 10 },
							{ name: "教学评价", max: 10 },
						],
					},
					series: [
						{
							name: "Budget vs spending",
							type: "radar",
							data: [
								{
									value: [0, 0, 0, 0, 0, 0],
									name: "AI的观察结果",
								},
								{
									value: [0, 0, 0, 0, 0, 0],
									name: "教师观察结果",
								},
							],
						},
					],
				},
			},
			aiData: [],
			teacherData: [],
			contrastData: [],
		};
	},
	methods: {
		refresh() {
			if(this.loading || this.aggregateLoading || this.aiLoading || this.teacherLoading || this.contrastLoading)return;
			this.getData();
		},
		// 获取绑定的testId
		getBindTestId() {
			return new Promise((resolve, reject) => {
				if (this.loading || !this.tid) return;
				this.loading = true;
				let pram = {
					tid: this.tid,
					type: "0",
				};
				this.ajax
					.post("https://gpt4.cocorobo.cn/get_classroom_observation_new", pram)
					.then((res) => {
						let _result = res.data.FunctionResponse.result;
						if (_result) {
							let _jsonData = JSON.parse(_result);
							let baseMessage = _jsonData[0];
							let _bmJsonData = JSON.parse(baseMessage.jsonData);
							let _testData = _bmJsonData.testData;
							this.editorBarData = _bmJsonData.editorBarData;
							if (_testData) {
								this.testId = _testData;
								resolve();
							} else {
								this.$message.error("该观察未绑定表单");
								return;
							}
						}
					})
					.catch((e) => {
						this.$message.error("获取testId失败");
						console.log(e);
						return;
					})
					.finally(() => {
						this.loading = false;
					});
			});
		},
		// 获取绑定的表单数据
		getBindTestData() {
			return new Promise((resolve, reject) => {
				if (!this.testId.testId || !this.tid) return;
				this.loading = true;
				this.ajax
					.get(this.$store.state.api + "getTestWorksNoPage", {
						cid: this.testId.testId,
						cn: "",
					})
					.then((res) => {
						if (res.data[0].length != 0) {
							let _result = res.data[0][0];
							_result.chapters = JSON.parse(_result.chapters);
							// _result.cover = JSON.parse(_result.cover);
							this.testData = _result;
							resolve();
						}
						if (res.data[1].length != 0) {
							let _doTest = res.data[1];
							_doTest.forEach((i) => {
								i.courseJson = JSON.parse(i.courseJson);
							});
							this.isDoTestList = _doTest;
						}
					})
					.catch((e) => {
						this.$message.info("获取表单数据失败");
						console.log(e);
						return;
					})
					.finally((_) => {
						this.loading = false;
					});
			});
		},
		// 获取教师观察结果
		getTeacherResultData() {
			return new Promise((resolve, reject) => {
				if (this.teacherLoading || !this.testData) return;
				if(!this.testData>0)return this.$message.error("绑定的表单无数据")
				this.teacherLoading = true;
				this.teacherData = [];
				let _workData = [];
				this.isDoTestList.forEach((item, index) => {
					if (index == 0) {
						item.courseJson.forEach((i) => {
							if (i.type == 1) {
								// 选择题
								if (i.json.type == 1) {
									// 单选题
									_workData.push({
										typeName: "单选题",
										type: "1-1",
										title: i.json.title,
										checkList: i.json.array,
										answer: i.json.answer[0],
										userAnswer: [i.json.answer2[0]],
										score: i.json.score,
									});
								} else if (i.json.type == 2) {
									//多选题
									_workData.push({
										typeName: "多选题",
										type: "1-2",
										title: i.json.title,
										checkList: i.json.array,
										answer: i.json.answer,
										userAnswer: [i.json.answer2],
										score: i.json.score,
									});
								}
							} else if (i.type == 7) {
								//评分
								_workData.push({
									typeName: "评分题",
									type: "7",
									title: i.json.title,
									max: i.json.big,
									min: i.json.small,
									userAnswer: [i.json.answer2],
								});
							} else if (i.type == 3) {
								//问答题
								_workData.push({
									typeName: "问答题",
									type: "3",
									title: i.json.title,
									score: i.json.score,
									answer: i.json.answer,
									userAnswer: [i.json.answer2],
								});
							} else if (i.type == 5) {
								//附件上传
							}
						});
					} else {
						item.courseJson.forEach((i) => {
							if (i.type == 1) {
								// 选择题
								if (i.json.type == 1) {
									// 单选题
									let _index = _workData.findIndex((j) => j.type == "1-1");
									if (_index != -1) {
										_workData[_index].userAnswer.push(i.json.answer2[0]);
									}
								} else if (i.json.type == 2) {
									//多选题
									let _index = _workData.findIndex((j) => j.type == "1-2");
									if (_index != -1) {
										_workData[_index].userAnswer.push(i.json.answer2);
									}
								}
							} else if (i.type == 7) {
								//评分
								let _index = _workData.findIndex((j) => j.type == "7");
								if (_index != -1) {
									_workData[_index].userAnswer.push(i.json.answer2);
								}
							} else if (i.type == 3) {
								//问答题
								let _index = _workData.findIndex((j) => j.type == "3");
								if (_index != -1) {
									_workData[_index].userAnswer.push(i.json.answer2);
								}
							} else if (i.type == 5) {
								//附件上传
							}
						});
					}
				});
				let _workText = ``;
				_workData.forEach((i) => {
					if (i.type == "1-1") {
						let _checkListText = ``;
						i.checkList.forEach((i2, index) => {
							_checkListText += `选项${index + 1}：${i2.option}\n`;
						});
						let _userAnswerText = ``;
						let _newAnswer = [];
						i.userAnswer.forEach((i2) => {
							if (typeof i2 === "number") {
								_newAnswer.push(i2);
							} else {
								_newAnswer.push(...i2);
							}
						});
						i.checkList.forEach((item, index) => {
							_userAnswerText += `选择选项${index + 1}的次数：${
								_newAnswer.filter((i3) => i3 === index).length
							}\n`;
						});
						_workText += `单选题：\n总分：${i.score}分\n题目：${
							i.title
						}\n答案：选项${
							i.answer + 1
						}\n选项：\n${_checkListText}${_userAnswerText}\n`;
					} else if (i.type == "1-2") {
						let _checkListText = ``;
						i.checkList.forEach((i2, index) => {
							_checkListText += `选项${index + 1}：${i2.option}\n`;
						});
						let _answerText = ``;
						i.answer.forEach((i4, index4) => {
							if (index4 != 0) _answerText += `、`;
							_answerText += `选项${index4 + 1}`;
						});
						let _userAnswerText = ``;
						let _newAnswer = [];
						i.userAnswer.forEach((i2) => {
							if (typeof i2 === "number") {
								_newAnswer.push(i2);
							} else {
								_newAnswer.push(...i2);
							}
						});
						i.checkList.forEach((item, index) => {
							_userAnswerText += `选择选项${index + 1}的次数：${
								_newAnswer.filter((i3) => i3 === index).length
							}\n`;
						});
						_workText += `多选题：\n总分：${i.score}分\n题目：${i.title}\n答案：${_answerText}\n选项：\n${_checkListText}${_userAnswerText}\n`;
					} else if (i.type == "7") {
						let _userAnswerText = ``;
						let _groupUserAnswer = [];
						i.userAnswer.forEach((i2) => {
							if (!_groupUserAnswer.includes(i2)) {
								_groupUserAnswer.push(i2);
							}
						});
						_groupUserAnswer.forEach((i3) => {
							_userAnswerText += `${i3}：${
								i.userAnswer.filter((i4) => i4 === i3).length
							}\n`;
						});
						_workText += `评分题：\n最大评分：${i.max}\n最小评分：${i.min}\n评分与次数：\n${_userAnswerText}\n\n`;
					} else if (i.type == "3") {
						let _userAnswerText = ``;
						let _groupUserAnswer = [];
						i.userAnswer.forEach((i2) => {
							if (!_groupUserAnswer.includes(i2)) {
								_groupUserAnswer.push(i2);
							}
						});
						_groupUserAnswer.forEach((i3) => {
							_userAnswerText += `${i3}：${
								i.userAnswer.filter((i4) => i4 === i3).length
							}\n`;
						});
						_workText += `问答题：\n总分：${i.score}分\n题目：${i.title}\n答案：${i.answer}\n答题与次数：\n${_userAnswerText}\n\n`;
					}
				});
				let _msg = `
NOTICE
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.

## 任务

你是专业的教育评估专家，熟悉教学评估的六个维度，了解如何从课堂观察报告中提取关键信息，并进行深入分析。

请你基于以下【课堂观察报告】，请你按照【教学目标与内容编排、教学策略与课堂组织、学生参与和学习体验、知识建构和能力培养、课堂氛围与师生关系、教学评价与反馈改进】这六个维度进行分析、总结，并按指定格式输出内容。

1. 教学目标与内容编排：评估教学目标的明确性、内容的科学性、系统性和前沿性，内容与学生实际生活的联系，以及教学活动、资源的合理编排。
2. 教学策略与课堂组织：分析教师采用的教学模式、教学方法和策略，组织管理能力，师生互动方式，多媒体技术运用，以及教学设计实施的效果。
3. 学生参与和学习体验：关注学生在课堂上的参与度、参与深度，包括回答问题、提出疑问、讨论互动、动手实践、探究性学习等，以及学习体验的积极性。
4. 知识建构和能力培养：分析学生对知识的理解深度，知识内化、迁移应用，参与高阶思维活动的情况，以及培养批判性思维、创新能力、问题解决能力等核心素养的效果。
5. 课堂氛围与师生关系：包括课堂氛围、师生关系、同伴互助、学习动机激发、心理安全感等软实力因素，以及对学生个体差异的关注和包容。
6. 教学评价与反馈改进：评估教师对学生学习效果的评价方式及时性，形成性评价、小测验、作业反馈等评价方式的运用，反馈质量对学习的促进作用，并根据评价结果持续改进教学。


## 输出

### 输出要求

### 输出格式
[
	{
		"title":"教学目标与内容编排",
		"description":"评估教学目标的明确性、内容的科学性、系统性和前沿性，内容与学生实际生活的联系，以及教学活动、资源的合理编排。",
		"score":"满分10分，给出具体的分值。",
		"message": "给出具体的评分理由。使用3个完整的句子。",
		"basis":["基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。"],
	},
	{
		"title": "教学策略与课堂组织",
		"description":"分析教师采用的教学模式、教学方法和策略，组织管理能力，师生互动方式，多媒体技术运用，以及教学设计实施的效果。",
		"score":"满分10分，给出具体的分值。",
		"message":"给出具体的评分理由。使用3个完整的句子。",
		"basis":["基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。使用"],
	},
	{
		"title": "学生参与和学习体验",
		"description":"关注学生在课堂上的参与度、参与深度，包括回答问题、提出疑问、讨论互动、动手实践、探究性学习等，以及学习体验的积极性。",
		"score":"满分10分，给出具体的分值。",
		"message":"给出具体的评分理由。使用3个完整的句子。",
		"basis":["基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。使用"],
	},
	{
		"title": "知识建构和能力培养",
		"description":"分析学生对知识的理解深度，知识内化、迁移应用，参与高阶思维活动的情况，以及培养批判性思维、创新能力、问题解决能力等核心素养的效果。",
		"score":"满分10分，给出具体的分值。",
		"message":"给出具体的评分理由。使用3个完整的句子。",
		"basis":["基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。使用"],
	},
	{
		"title": "课堂氛围与师生关系",
		"description":"包括课堂氛围、师生关系、同伴互助、学习动机激发、心理安全感等软实力因素，以及对学生个体差异的关注和包容。",
		"score":"满分10分，给出具体的分值。",
		"message":"给出具体的评分理由。使用3个完整的句子。",
		"basis":["基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。使用"],
	},
	{
		"title": "教学评价与反馈改进",
		"description":"评估教师对学生学习效果的评价方式及时性，形成性评价、小测验、作业反馈等评价方式的运用，反馈质量对学习的促进作用，并根据评价结果持续改进教学。",
		"score":"满分10分，给出具体的分值。",
		"message":"给出具体的评分理由。使用3个完整的句子。",
		"basis":["基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。使用"],
	},
]

## 教师课堂观察报告

### 1. 教学目标与内容编排

> 评估教学目标的明确性、内容的科学性、系统性和前沿性，内容与学生实际生活的联系，以及教学活动、资源的合理编排。

评分：{满分10分，给出具体的分值。}
结论：{给出具体的评分理由。使用3个完整的句子。}
依据：{基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。}

### 2. 教学策略与课堂组织
> 分析教师采用的教学模式、教学方法和策略，组织管理能力，师生互动方式，多媒体技术运用，以及教学设计实施的效果。

评分：
结论：
依据：

### 3.

### 4.

### 5.

### 6.


## 数据
${_workText}

### 课堂实录文稿
${this.editorBarData.type == 0 ? this.editorBarData.content : ""}`;
				const _uuid = uuidv4();
				let params = {
					model: "gpt-3.5-turbo",
					temperature: 0,
					max_tokens: 4096,
					top_p: 1,
					frequency_penalty: 0,
					presence_penalty: 0,
					messages: [{ role: "user", content: _msg }],
					uid: _uuid,
					mind_map_question: "",
					stream: false,
				};
				this.ajax
					.post("https://gpt4.cocorobo.cn/chat", params)
					.then((res) => {
						let _data = res.data.FunctionResponse.choices[0];
						let _jsonData = _data.message.content;
						_jsonData = _jsonData
							.replaceAll("```json", "")
							.replaceAll("```", "");
						let _result = JSON.parse(_jsonData);
						this.teacherData = _result;
						resolve();
					})
					.catch((e) => {
						console.log(e);
						this.$message.error("生成教师观察结果失败");
					})
					.finally((_) => {
						this.teacherLoading = false;
					});
			});
		},
		//获取观察数据
		getClassroomObservationData() {
			return new Promise((resolve, reject) => {
				let params = {
					tid: this.tid,
				};
				this.loading = true;
				this.ajax
					.post("https://gpt4.cocorobo.cn/get_classroom_ob_tid", params)
					.then((res) => {
						let _data = res.data.FunctionResponse.result;
						let _result = JSON.parse(_data);
						this.classroomObservationData = _result;
						resolve();
					});
			});
		},
		// 获取AI观察结果
		getAiResultData() {
			return new Promise((resolve, reject) => {
				if (this.aiLoading || this.loading) return;
				if (!this.classroomObservationData.length > 0){
					return this.getClassroomObservationData().then(_=>{
						this.getAiResultData().then(_=>{
							resolve();
						});
					})
				};
				this.aiLoading = true;
				this.aiData = [];
				let _workText = ``; //转换的提示词
				let _sum = 0;
				this.classroomObservationData.forEach(i=>{
					if([0,1,2].includes(i.Type)){
						let _jsonObj = JSON.parse(i.jsonData);
						if(!_jsonObj.courseName){
							if(_jsonObj.name!=="课堂记录"){
								_workText+=`名称：${_jsonObj.name}\n分析内容：${_jsonObj.content}\n\n`
							}			
						}
					}
				})
				let _msg = `
NOTICE
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.

## 任务

你是专业的教育评估专家，熟悉教学评估的六个维度，了解如何从课堂观察报告中提取关键信息，并进行深入分析。

请你基于以下【课堂观察报告】，请你按照【教学目标与内容编排、教学策略与课堂组织、学生参与和学习体验、知识建构和能力培养、课堂氛围与师生关系、教学评价与反馈改进】这六个维度进行分析、总结，并按指定格式输出内容。

1. 教学目标与内容编排：评估教学目标的明确性、内容的科学性、系统性和前沿性，内容与学生实际生活的联系，以及教学活动、资源的合理编排。
2. 教学策略与课堂组织：分析教师采用的教学模式、教学方法和策略，组织管理能力，师生互动方式，多媒体技术运用，以及教学设计实施的效果。
3. 学生参与和学习体验：关注学生在课堂上的参与度、参与深度，包括回答问题、提出疑问、讨论互动、动手实践、探究性学习等，以及学习体验的积极性。
4. 知识建构和能力培养：分析学生对知识的理解深度，知识内化、迁移应用，参与高阶思维活动的情况，以及培养批判性思维、创新能力、问题解决能力等核心素养的效果。
5. 课堂氛围与师生关系：包括课堂氛围、师生关系、同伴互助、学习动机激发、心理安全感等软实力因素，以及对学生个体差异的关注和包容。
6. 教学评价与反馈改进：评估教师对学生学习效果的评价方式及时性，形成性评价、小测验、作业反馈等评价方式的运用，反馈质量对学习的促进作用，并根据评价结果持续改进教学。


## 输出

### 输出要求

### 输出格式
[
	{
		"title":"教学目标与内容编排",
		"description":"评估教学目标的明确性、内容的科学性、系统性和前沿性，内容与学生实际生活的联系，以及教学活动、资源的合理编排。",
		"score":"满分10分，给出具体的分值。",
		"message": "给出具体的评分理由。使用3个完整的句子。",
		"basis":["基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。"],
	},
	{
		"title": "教学策略与课堂组织",
		"description":"分析教师采用的教学模式、教学方法和策略，组织管理能力，师生互动方式，多媒体技术运用，以及教学设计实施的效果。",
		"score":"满分10分，给出具体的分值。",
		"message":"给出具体的评分理由。使用3个完整的句子。",
		"basis":["基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。使用"],
	},
	{
		"title": "学生参与和学习体验",
		"description":"关注学生在课堂上的参与度、参与深度，包括回答问题、提出疑问、讨论互动、动手实践、探究性学习等，以及学习体验的积极性。",
		"score":"满分10分，给出具体的分值。",
		"message":"给出具体的评分理由。使用3个完整的句子。",
		"basis":["基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。使用"],
	},
	{
		"title": "知识建构和能力培养",
		"description":"分析学生对知识的理解深度，知识内化、迁移应用，参与高阶思维活动的情况，以及培养批判性思维、创新能力、问题解决能力等核心素养的效果。",
		"score":"满分10分，给出具体的分值。",
		"message":"给出具体的评分理由。使用3个完整的句子。",
		"basis":["基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。使用"],
	},
	{
		"title": "课堂氛围与师生关系",
		"description":"包括课堂氛围、师生关系、同伴互助、学习动机激发、心理安全感等软实力因素，以及对学生个体差异的关注和包容。",
		"score":"满分10分，给出具体的分值。",
		"message":"给出具体的评分理由。使用3个完整的句子。",
		"basis":["基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。使用"],
	},
	{
		"title": "教学评价与反馈改进",
		"description":"评估教师对学生学习效果的评价方式及时性，形成性评价、小测验、作业反馈等评价方式的运用，反馈质量对学习的促进作用，并根据评价结果持续改进教学。",
		"score":"满分10分，给出具体的分值。",
		"message":"给出具体的评分理由。使用3个完整的句子。",
		"basis":["基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。列举出至少3个依据。使用"],
	},
]
## AI课堂观察报告

### 1. 教学目标与内容编排

> 评估教学目标的明确性、内容的科学性、系统性和前沿性，内容与学生实际生活的联系，以及教学活动、资源的合理编排。

评分：{满分10分，给出具体的分值。}
结论：{给出具体的评分理由。使用3个完整的句子。}
依据：{基于【课堂观察报告】中每个模块的分析数据，提供对应的评分依据，也就是支持你结论的数据。需要指出具体是哪一个模型以及该模型对应的内容。列举出至少3个依据。}

### 2. 教学策略与课堂组织
> 分析教师采用的教学模式、教学方法和策略，组织管理能力，师生互动方式，多媒体技术运用，以及教学设计实施的效果。

评分：
结论：
依据：

### 3. 

### 4. 

### 5.

### 6.

## 数据
${_workText}


### 课堂实录文稿
${this.editorBarData.type == 0 ? this.editorBarData.content : ""}`;
				const _uuid = uuidv4();
				let params = {
					model: "gpt-3.5-turbo",
					temperature: 0,
					max_tokens: 4096,
					top_p: 1,
					frequency_penalty: 0,
					presence_penalty: 0,
					messages: [{ role: "user", content: _msg }],
					uid: _uuid,
					mind_map_question: "",
					stream: false,
				};
				this.ajax
					.post("https://gpt4.cocorobo.cn/chat", params)
					.then((res) => {
						let _data = res.data.FunctionResponse.choices[0];
						let _jsonData = _data.message.content;
						_jsonData = _jsonData
							.replaceAll("```json", "")
							.replaceAll("```", "");
						let _result = JSON.parse(_jsonData);
						this.aiData = _result;
						resolve();
					})
					.catch((e) => {
						console.log(e);
						this.$message.error("生成ai观察结果失败");
					})
					.finally((_) => {
						this.aiLoading = false;
					});
			});
		},
		// 获取对比观察
		getContrastResultData() {
			return new Promise((resolve, reject) => {
				if (this.contrastLoading || this.loading) return;
				if (!this.teacherData.length > 0) {
					return this.$message.error("缺少教师观察结果");
				} else if (!this.aiData.length > 0) {
					return this.$message.error("缺少ai观察结果");
				}
				this.contrastLoading = true;
				this.contrastData = [];
				let _teacherWorkText = ``; //教师观察转换的提示词
				let _aiWorkText = ``; //ai观察转换的提示词

				// 转换教师观察结果数据
				this.teacherData.forEach((i) => {
					_teacherWorkText += `
标题：${i.title}
描述：${i.description}
评分：${i.score}
结论：${i.message}
依据：${i.basis.join("、")}\n
`;
				});
				//转换ai观察结果数据
				this.aiData.forEach((i) => {
					_aiWorkText += `
标题：${i.title}
描述：${i.description}
评分：${i.score}
结论：${i.message}
依据：${i.basis.join("、")}\n
`;
				});

				let _msg = `
NOTICE
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.

## 任务

你是专业的教育评估专家，熟悉教学评估的六个维度，了解如何从课堂观察报告中提取关键信息，并进行深入分析。

以下是两份不同的【课堂观察报告】，两个包含均从这六个维度对课堂进行分析，【教学目标与内容编排、教学策略与课堂组织、学生参与和学习体验、知识建构和能力培养、课堂氛围与师生关系、教学评价与反馈改进】这六个维度。请你对两个报告的内容从六个不同维度进行对比分析。

1. 教学目标与内容编排：评估教学目标的明确性、内容的科学性、系统性和前沿性，内容与学生实际生活的联系，以及教学活动、资源的合理编排。
2. 教学策略与课堂组织：分析教师采用的教学模式、教学方法和策略，组织管理能力，师生互动方式，多媒体技术运用，以及教学设计实施的效果。
3. 学生参与和学习体验：关注学生在课堂上的参与度、参与深度，包括回答问题、提出疑问、讨论互动、动手实践、探究性学习等，以及学习体验的积极性。
4. 知识建构和能力培养：分析学生对知识的理解深度，知识内化、迁移应用，参与高阶思维活动的情况，以及培养批判性思维、创新能力、问题解决能力等核心素养的效果。
5. 课堂氛围与师生关系：包括课堂氛围、师生关系、同伴互助、学习动机激发、心理安全感等软实力因素，以及对学生个体差异的关注和包容。
6. 教学评价与反馈改进：评估教师对学生学习效果的评价方式及时性，形成性评价、小测验、作业反馈等评价方式的运用，反馈质量对学习的促进作用，并根据评价结果持续改进教学。

## 输出

### 输出要求

### 输出格式
[
	{
		"title":"教学目标与内容编排",
		"description":"评估教学目标的明确性、内容的科学性、系统性和前沿性，内容与学生实际生活的联系，以及教学活动、资源的合理编排。",
		"similarity":"使用3句完整的话进行描述",
		"difference": "使用3句完整的话进行描述"
	},
	{
		"title": "教学策略与课堂组织",
		"description":"分析教师采用的教学模式、教学方法和策略，组织管理能力，师生互动方式，多媒体技术运用，以及教学设计实施的效果。",
		"similarity":"使用3句完整的话进行描述",
		"difference": "使用3句完整的话进行描述"
	},
	{
		"title": "学生参与和学习体验",
		"description":"关注学生在课堂上的参与度、参与深度，包括回答问题、提出疑问、讨论互动、动手实践、探究性学习等，以及学习体验的积极性。",
		"similarity":"使用3句完整的话进行描述（最好是数组）",
		"similarity":"使用3句完整的话进行描述",
		"difference": "使用3句完整的话进行描述"
	},
	{
		"title": "知识建构和能力培养",
		"description":"分析学生对知识的理解深度，知识内化、迁移应用，参与高阶思维活动的情况，以及培养批判性思维、创新能力、问题解决能力等核心素养的效果。",
		"similarity":"使用3句完整的话进行描述",
		"difference": "使用3句完整的话进行描述"
	},
	{
		"title": "课堂氛围与师生关系",
		"description":"包括课堂氛围、师生关系、同伴互助、学习动机激发、心理安全感等软实力因素，以及对学生个体差异的关注和包容。",
		"similarity":"使用3句完整的话进行描述",
		"difference": "使用3句完整的话进行描述"
	},
	{
		"title": "教学评价与反馈改进",
		"description":"评估教师对学生学习效果的评价方式及时性，形成性评价、小测验、作业反馈等评价方式的运用，反馈质量对学习的促进作用，并根据评价结果持续改进教学。",
		"similarity":"使用3句完整的话进行描述",
		"difference": "使用3句完整的话进行描述"
	}
]
### 1. 教学目标与内容编排

> 评估教学目标的明确性、内容的科学性、系统性和前沿性，内容与学生实际生活的联系，以及教学活动、资源的合理编排。

相同点：{使用3句完整的话进行描述}
不同点：{使用3句完整的话进行描述}

### 2. 教学策略与课堂组织
> 分析教师采用的教学模式、教学方法和策略，组织管理能力，师生互动方式，多媒体技术运用，以及教学设计实施的效果。


### 3. 

### 4. 

### 5.

### 6.

## 数据

### 教师课堂观察报告 
${_teacherWorkText}


### AI课堂观察报告
${_aiWorkText}


`;
				// this.contrastLoading = false;
				// console.log("对比观察提示词👇👇")
				// console.log(_msg)
				// return;
				const _uuid = uuidv4();
				let params = {
					model: "gpt-3.5-turbo",
					temperature: 0,
					max_tokens: 4096,
					top_p: 1,
					frequency_penalty: 0,
					presence_penalty: 0,
					messages: [{ role: "user", content: _msg }],
					uid: _uuid,
					mind_map_question: "",
					stream: false,
				};
				this.ajax
					.post("https://gpt4.cocorobo.cn/chat", params)
					.then((res) => {
						let _data = res.data.FunctionResponse.choices[0];
						let _jsonData = _data.message.content;
						_jsonData = _jsonData
							.replaceAll("```json", "")
							.replaceAll("```", "");
						let _result = JSON.parse(_jsonData);

						this.contrastData = _result;
					})
					.catch((e) => {
						console.log(e);
						this.$message.error("生成ai观察结果失败");
					})
					.finally((_) => {
						this.contrastLoading = false;
					});
			});
		},
		// 获取总数据对比
		getAggregateResultData() {
			return new Promise((resolve, reject) => {
				if (!this.aiData.length > 0) {
					return this.$message.info("请先获取ai观察结果");
				} else if (!this.teacherData.length > 0) {
					return this.$message.error("请先获取教师观察结果");
				}
				this.aggregateLoading = true;
				this.aggregateData.message = "";
				let _teacherWorkText = ``; //教师观察转换的提示词
				let _aiWorkText = ``; //ai观察转换的提示词

				// 转换教师观察结果数据
				this.teacherData.forEach((i) => {
					_teacherWorkText += `
标题：${i.title}
描述：${i.description}
评分：${i.score}
结论：${i.message}
依据：${i.basis.join("、")}\n
`;
				});
				//转换ai观察结果数据
				this.aiData.forEach((i) => {
					_aiWorkText += `
标题：${i.title}
描述：${i.description}
评分：${i.score}
结论：${i.message}
依据：${i.basis.join("、")}\n
`;
				});
				let _msg = `
NOTICE
Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.

## 任务

你是专业的教育评估专家，熟悉教学评估的六个维度，了解如何从课堂观察报告中提取关键信息，并进行深入分析。

以下是两份不同的【课堂观察报告】，两个包含均从这六个维度对课堂进行分析，【教学目标与内容编排、教学策略与课堂组织、学生参与和学习体验、知识建构和能力培养、课堂氛围与师生关系、教学评价与反馈改进】这六个维度。请你对两个报告的内容进行对比分析，指出其中的相同点和不同点。仅仅输出一段完整的小论文进行介绍，使用不超过10句完整的话，需适当指出各自的得分情况。

1. 教学目标与内容编排：评估教学目标的明确性、内容的科学性、系统性和前沿性，内容与学生实际生活的联系，以及教学活动、资源的合理编排。
2. 教学策略与课堂组织：分析教师采用的教学模式、教学方法和策略，组织管理能力，师生互动方式，多媒体技术运用，以及教学设计实施的效果。
3. 学生参与和学习体验：关注学生在课堂上的参与度、参与深度，包括回答问题、提出疑问、讨论互动、动手实践、探究性学习等，以及学习体验的积极性。
4. 知识建构和能力培养：分析学生对知识的理解深度，知识内化、迁移应用，参与高阶思维活动的情况，以及培养批判性思维、创新能力、问题解决能力等核心素养的效果。
5. 课堂氛围与师生关系：包括课堂氛围、师生关系、同伴互助、学习动机激发、心理安全感等软实力因素，以及对学生个体差异的关注和包容。
6. 教学评价与反馈改进：评估教师对学生学习效果的评价方式及时性，形成性评价、小测验、作业反馈等评价方式的运用，反馈质量对学习的促进作用，并根据评价结果持续改进教学。

## 输出

### 输出要求

### 输出格式

{仅仅输出一段完整的小论文进行介绍，使用不超过10句完整的话，需适当指出各自的得分情况。最好是字符串}


## 数据

### 教师课堂观察报告 
${_teacherWorkText}

### AI课堂观察报告
${_aiWorkText}
			
`;
				// console.log("总数居对比");
				// console.log(_msg)
				// return this.aggregateLoading = false;
				const _uuid = uuidv4();
				let params = {
					model: "gpt-3.5-turbo",
					temperature: 0,
					max_tokens: 4096,
					top_p: 1,
					frequency_penalty: 0,
					presence_penalty: 0,
					messages: [{ role: "user", content: _msg }],
					uid: _uuid,
					mind_map_question: "",
					stream: false,
				};
				this.ajax
					.post("https://gpt4.cocorobo.cn/chat", params)
					.then((res) => {
						let _data = res.data.FunctionResponse.choices[0];
						let _result = _data.message.content;
						this.aggregateData.message = _result;
						// let _jsonData = _data.message.content;
						// _jsonData = _jsonData.replaceAll("```json", "").replaceAll("```", "");
						// let _result = JSON.parse(_jsonData);
						// this.aiData = _result;
					})
					.catch((e) => {
						console.log(e);
						this.$message.error("生成总结数据对比");
					})
					.finally((_) => {
						this.aggregateLoading = false;
					});
			});
		},
		// 计算总数据对比里的雷达图
		getAggregateChartData() {
			if (!this.aiData.length > 0) {
				return this.$message.info("请先获取ai观察结果");
			} else if (!this.teacherData.length > 0) {
				return this.$message.error("请先获取教师观察结果");
			}
			let _teacherData = {
				value: [],
				name: "教师观察结果",
			};
			let _aiData = {
				value: [],
				name: "AI的观察结果",
			};

			let _chartData = JSON.parse(JSON.stringify(this.aggregateData.chartData));
			let _titleList = {
				教学目标与内容编排: 0,
				教学策略与课堂组织: 1,
				学生参与和学习体验: 2,
				知识建构和能力培养: 3,
				课堂氛围与师生关系: 4,
				教学评价与反馈改进: 5,
			};

			this.teacherData.forEach((i) => {
				if (i.title in _titleList) {
					let _scoreStr = i.score;
					_scoreStr=parseInt(_scoreStr.replaceAll('分',''))
					_teacherData.value[_titleList[i.title]] = parseInt(_scoreStr);
				}
			});
			this.aiData.forEach((i) => {
				if (i.title in _titleList) {
					let _scoreStr = i.score;
					_scoreStr=parseInt(_scoreStr.replaceAll('分',''))
					_aiData.value[_titleList[i.title]] = parseInt(_scoreStr);
				}
			});
			_chartData.series[0].data = [_aiData, _teacherData];
			this.aggregateData.chartData = _chartData;
		},
		//获取
		getData() {
			// 获取观察所绑定的表单
			this.getBindTestId().then((_) => {
				// 后去表单的数据
				this.getBindTestData().then((_) => {
					Promise.all([
						this.getTeacherResultData(),
						this.getAiResultData(),
					]).then((_) => {
					 this.getAggregateChartData();
						this.getContrastResultData();
						this.getAggregateResultData();
					});
				});
			});
		},
	},
	mounted() {
		this.getData();
	},
};
</script>

<style scoped>
.contrastObservation {
	min-width: 1500px;
	/* min-height: 800px; */
	width: 100%;
	height: 100vh;
	display: flex;
	background-color: #f0f2f5;
	box-sizing: border-box;
	padding: 30px 20px;
	background-image: #d4d8f6;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
}

.refresh {
	position: fixed;
	right: 0;
	top: 40px;
	width: 60px;
	height: 60px;
	background-color: #fff;
	border-radius: 12px 0px 0px 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 16px 24px 2px #0000000a;
	cursor: pointer;
}

.refreshDisabled{
	cursor: not-allowed;
}

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

.co_card {
	min-width: 24%;
	max-width: 24%;
	width: 23%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 12px;
	background-color: #fff;
	box-sizing: border-box;
	padding: 20px;
	position: relative;
	overflow: hidden;
}

.co_aggregateData {
	background-color: #fbfcfe;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.co_ad_title {
	height: 35px;
	font-size: 22px;
	color: #434e69;
	font-weight: 600;
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.co_ad_title > img {
	width: 25px;
	height: 25px;
	margin-right: 10px;
}

.co_ad_chartArea {
	width: 100%;
	height: 45%;
	max-height: 45%;
	margin-bottom: 20px;
}

.co_ad_messageArea {
	width: 100%;
	height: calc(100% - 35px - 45% - 40px);
	background-color: #eef2fc;
	box-sizing: border-box;
	padding: 20px;
	overflow-y: auto;
	border: solid 1px #e0eafb;
	border-radius: 6px;
	white-space: pre-line;
	font-size: 18px;
}

.co_ai_card {
	padding: 8px 0 0 0;
	background: linear-gradient(to right, #3673e8, #ad88fd);
	/* background: linear-gradient(#f4eefd, #fff, #fff, #fff, #fff, #fff); */
	/* height: calc(100% - 10px); */
}

.co_ai_card > .co_c_main {
	background: linear-gradient(#f4eefd, #fff, #fff, #fff, #fff, #fff);
}

.co_teacher_card {
	padding: 8px 0 0 0;
	background: linear-gradient(to right, #3673e8, #88fdc5);
	/* background: linear-gradient(#f5fffa, #fff, #fff, #fff, #fff, #fff); */
	/* height: calc(100% - 10px); */
}

.co_teacher_card > .co_c_main {
	background: linear-gradient(#f5fffa, #fff, #fff, #fff, #fff, #fff);
}

.co_contrast_card {
	padding: 8px 0 0 0;
	background: linear-gradient(to right, #fdcd72, #fd8888);
	/* background: linear-gradient(#fffaee, #fff, #fff, #fff, #fff, #fff); */
	/* height: calc(100% - 10px); */
}

.co_contrast_card > .co_c_main {
	background: linear-gradient(#fffaee, #fff, #fff, #fff, #fff, #fff);
}

.co_c_main {
	width: calc(100%);
	height: calc(100%);
	padding: 20px;
	box-sizing: border-box;
	border-radius: 12px;
	overflow-x: hidden;
}

.co_c_title {
	width: calc(100% + 20px);
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	left: -20px;
	top: -20px;
	font-size: 24px;
	box-sizing: border-box;
}

.co_c_m_message {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

.co_c_m_m_title {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	font-size: 22px;
	font-weight: bold;
	position: relative;
}

.co_c_m_m_title > span {
	position: relative;
	transition: 0.3s;
}

.co_c_m_m_title > span:hover {
	color: #3681fc;
	cursor: help;
}

.co_c_m_m_title > span::before {
	content: "";
	width: 100%;
	height: 10px;
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0.5;
}

.co_ai_title > span::before {
	background: linear-gradient(to right, #3673e8, #ad88fd);
}

.co_teacher_title > span::before {
	background: linear-gradient(to right, #3673e8, #88fdc5);
}

.co_contrast_title > span::before {
	background: linear-gradient(to right, #fdcd72, #fd8888);
}

.message,
.score,
.basis {
	font-size: 18px;
}

.basis > ol {
	margin-left: 30px;
}

.compare > ol {
	margin-left: 30px;
}

.similarity,
.difference,
.compare {
	font-size: 18px;
	margin-bottom: 10px;
}
.titleBlob {
	font-weight: bold;
}

/* .compareTitle{
	margin-left: 10px;
	position: relative;
	display: inline-block;
}

.compareTitle::after{
	content: "";
	width: 20px;
	height: 20px;
	position: relative;
} */
</style>