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

<template>
	<div class="pblCourse" v-loading="loading">
		<div class="pc_left">
			<div class="pc_l_top">
				<procedureArea :phase="phase" />
			</div>
			<div class="pc_l_bottom">
				<doWorkArea
					:phase="phase"
					@changePhase="changePhase"
					@choiceAnswer="choiceAnswer"
					@submitTask="submitTask"
					:task="taskList[phase.atPhase]"
					@getTaskList="getTaskList"
					@lookFile="lookFile"
					@addFile="addFile"
					@deleteFile="deleteFile"
				/>
			</div>
		</div>
		<div class="pc_right">
			<chatArea />
		</div>
		<!-- <selectTopicDialog
      ref="selectTopicDialogRef"
      @success="selectTopicSuccess"
    /> -->
		<div class="BackBtn" @click="backPage">返回</div>
		<el-dialog
			title="查看"
			:visible.sync="priDiaVisible"
			:before-close="handleClose"
		>
			<iframe
				ref="viframe"
				v-if="/\.(xlsx|doc|docx)$/i.test(priFile)"
				style="width: 100%; height: 100%; border: none"
				:src="`https://view.officeapps.live.com/op/view.aspx?src=${priFile}`"
			></iframe>
			<vpdf
				style="width: 100%; height: 100%; border: none"
				:pdfUrl="priFile"
				v-if="/\.(pdf)$/i.test(priFile)"
			/>
			<!-- <img
        v-if="/\.(jpeg|jpg|png|img)$/i.test(priFile)"
        :src="priFile"
        @click="previewImg(priFile)"
        style="max-width: 100%;max-height: 100%;"
        alt=""
      /> -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="priDiaVisible = false">关闭</el-button>
			</span>
		</el-dialog>
		<successPhaseDialog ref="successPhaseDialogRef" @submit="phaseSubmit" @cancel="phaseCancel"/>
		<successCourseDialog ref="successCourseDialogRef" :courseName="courseName" @submit="courseSubmit"/>
		
	</div>
</template>

<script>
import chatArea from "./component/chatArea";
import doWorkArea from "./component/doWorkArea";
import procedureArea from "./component/procedureArea";
import successPhaseDialog from "./component/successPhaseDialog.vue";
import successCourseDialog from './component/successCourseDialog.vue'
import { v4 as uuidv4 } from "uuid";
import vpdf from "./component/vpdf";

// import selectTopicDialog from "./component/selectTopicDialog";
export default {
	components: {
		chatArea,
		doWorkArea,
		procedureArea,
		// selectTopicDialog,
		vpdf,
		successPhaseDialog,
		successCourseDialog
	},
	data() {
		return {
			loading: false,
			phase: {
				doPhase: 0,
				atPhase: 0,
			},
			courseName:"",
			showIndexPage: 0,
			Completion: 0,
			cid: this.$route.query.cid,
			userid: this.$route.query.userid,
			org: this.$route.query.org,
			oid: this.$route.query.oid,
			selectTopic: "",
			taskList: [],
			priFile: "",
			priDiaVisible: false,
		};
	},
	methods: {
		backPage() {
			this.$router.push(
				"/guide?" +
					"&userid=" +
					this.userid +
					"&oid=" +
					this.oid +
					"&org=" +
					this.org
			);
		},
		getData() {
			let params = {
				cid: this.cid,
			};
			this.ajax
				.get(this.$store.state.api + "selectPblStudentDetail", params)
				.then((res) => {
					console.log(res);
					let data = res.data[0][0];
					if (!!data.chapters) {
						this.selectTopic = data.name;
						this.taskList = JSON.parse(data.chapters);
						this.phase.doPhase = data.doIndex;
						this.phase.atPhase = data.doIndex;
						this.courseName = data.title;
						if(this.phase.atPhase==5){
							this.phase.atPhase-=1;
						}
						if(this.phase.doPhase!=5){
							if(!this.taskList[this.phase.doPhase]){
								this.getTaskList(this.phase.doPhase);
							}
						}
						// if (this.taskList < 5) {
						//   this.getTaskList(this.taskList);
						// } else {
						//   this.Completion = 1;
						// }
					} else {
						this.courseName = data.title;
						this.selectTopic = data.title;
						this.getTaskList();
					}
				})
				.catch((err) => {
					// this.isLoading = false;
					console.error(err);
				});
		},
		changePhase(type, newValue) {
			if(this.taskList[newValue]){
				this.phase[type] = newValue;
			}else{
				this.getTaskList(newValue)
			}
			
		},
		getTaskList(phase = 0) {
			return new Promise((resolve, reject) => {
				if (this.loading) return this.$message.info("请稍等");
				this.loading = true;
				const _uuid = uuidv4();
				let _copyTask = JSON.parse(JSON.stringify(this.taskList));
				// if (this.phase.doPhase != 0) {
				//   delete _copyTask[this.phase.doPhase - 1].fileList;
				// }
				let _msg = "";

				if (phase == 0) {
					_msg = `NOTICE
Role:你是学生的5EX中EQ阶段的导师，你熟悉PBL（基于问题的学习）和5EX教学模型。
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.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

#Context
##角色任务
你的任务是：根据学生当前主题和年级等各种数据情况生成EQ阶段的学习任务。

##语气
你的语气应该是亲切有趣，你是一位循循善诱的老师，你擅长耐心引导学生。
你必须以一个老师的口吻来对学生说话，例如：“选择一个公园观察鸟类，并将你的观察记录下来”。

##工具能力
1. 5E教学模型应用
你需要熟悉并应用5EX教学模型（即进入情境与提出问题（EQ）、探究学习与数学应用（EM）、工程设计与技术制作（ET）、知识扩展与创意设计（EC）、多元评价与学习反思（ER））于学习任务的设计中。
你是5EX模型中EQ阶段的专家，请根据你的知识库设计相应主题的引入问题，并根据你的知识库补充相应信息。
- **EQ（enter and questions）**：此阶段旨在让学生进入真实问题情境之中，提出 问题与任务，通过问题驱动，以项目学习方式进行主题学习。 教师可以设计多种活动进行情境导入，例如—— (1)阅读相关的科普资料;(2)展示图片、视频等资料; (3)到与项目相关的真实现场参观等方式。 教师在此 活动中要能够引导学生提出与项目相关的问题并进 行思考，同时，要培养学生阅读与收集资料的能力。
2. 学生表现与选择的感知
   通过与学生互动，实时感知学生的学习表现和选择，理解他们的学习需求和难点。
3. 自适应任务生成
   基于学生的反馈和选择，自动生成个性化的学习任务，任务难度和类型随学生的表现和需求而变化。

##工作流程
###	第一步，输出学习资料和链接
1.默认学生处于“进入情境与提出问题”（即EQ）阶段。根据学生的学习主题，你需要提供参考材料，材料可以是视频、图片、书籍、文章。
2.你必须要返回上面列举的相应的材料链接（你的学生是中国大陆的学生，所有必须确保返回的链接中国大陆可以访问）。
###	第二步，提出问题，引发学生进一步思考
你需要根据返回的链接，提出5个以上的问题来帮助学生思考探究，必须保证问题切合生活实际，并且问题可以让学生进一步探究。
###	第三步，生成学习主题和对应的学习任务
1. 根据上面你输出的问题，生成相应的学习任务，指导学生进行操作。

##限制
- 请严格按照你的知识结构仅仅生成【进入情境与提出问题】阶段对应的学习任务。不要同时给出多个阶段、多个学习任务。
- 必须严格按照输出格式要求输出内容，请仅仅告知EQ阶段名称和对应的任务描述，不需要包含学情数据等与【任务】无关的内容。
- 你必须以老师的口吻和语气输出内容。
任务提示：必须以老师的口吻提供相应的学习建议、学习资源、必要的解释等，辅助学生学习。

##学情数据
选题：${this.selectTopic}

#Format example
[{"name":"任务名字","detail":"任务描述（要求markdown的格式）","target":"任务目标","steps":"任务步骤","tips":"任务提示"}]
`;
				} else if (phase == 1) {
					_msg = `NOTICE
Role: 你是学生的5EX中EM阶段的导师，你熟悉熟悉PBL（基于问题的学习）和5EX教学模型。
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.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

#Context
##角色任务
你的任务是：根据学生当前主题和年级等各种数据情况生成EM阶段的学习任务。

##语气
你的语气应该是亲切地，有趣地，你是一个循循善诱的老师，你必须耐心引导学生。
你必须以一个老师的口吻来对学生说话，例如：“选择一个公园观察鸟类，并将你的观察记录下来”。

##工具能力
1. 5EX教学模型应用
你需要熟悉并应用5EX教学模型（进入情境与提出问题（EQ）、探究学习与数学应用（EM）、工程设计与技术制作（ET）、知识扩展与创意设计（EC）、多元评价与学习反思（ER））于学习任务的设计中。
你是5EX模型中EM阶段的专家，请根据你的知识库设计相应主题的引入问题，并根据你的知识库补充相应信息。
- **EM（exploration and mathematics）**：此阶段旨在让学生围绕问题或任务，通过科学探究方法(科学实验、现场观察、调查访问、工具测量等) 和数学方法去寻求问题解决的方法或解析问题，理解并应用知识。 其中，数学方法是科学探究的基础，数学应用应渗透在科学探究活动中，如读取数据是科学实验、观察和调查必备的操作，可以利用数学语言来描述客观世界的特征，学会用标准单位测量并记录不同类型的数据等。 此活动遵循一定的流程，并要求教师与学生按照科学探究的步骤开展教学活动，可归纳为 5 个步骤。
  (1)创设情境，提出问题：教师创设与生活紧密相关的真实情境，引导学生根据生活与学习经验提出需要探究并要解决的问题。
  (2)面对问题，作出假设：教师引导学生作出假设性的判断，学生能够填写表格并学会作假设。
  (3)选择方法，进行探究：教师有设计探究活动的方法(设计实验操作指南、调查提纲等)，介绍与项目相关的探究方法并引导学生进行探究， 如科学实验、 现场观测、社会调查等。
  (4)收集数据，归类整理。
  (5)分析数据，形成观点：提出数学描述的要求 (使用标准单位、确定测量对象、建立变量关系等)。
2. 学生表现与选择的感知
   通过与学生互动，实时感知学生的学习表现和选择，理解他们的学习需求和难点。
3. 自适应任务生成
   基于学生的反馈和选择，自动生成个性化的学习任务，任务难度和类型随学生的表现和需求而变化。

##工作流程
###第一步，调取学生已经学习完的内容，再调取学生当前学习任务，以此作为你的背景知识库。
默认学生处于“探究学习与数学应用”（即EM）阶段，你需要调取学生已经学过的**“进入情境与提出问题（EQ）”**阶段的学习数据，根据学生所学课程主题和当前学习情况生成EM的学习情景，并提出相应问题。

###第二步，根据EM要求和背景知识生成学习任务
根据EQ阶段的主题和材料，生成EM阶段的任务，指导学生完成。

###第三步，根据实验列出实验细则
根据你设计的实验，列出实验细则，如：实验假设、实验材料、实验步骤。同时给予学生相应提示和建议。

##限制

- 请严格按照你的知识结构仅仅生成**【探究学习与数学应用】**阶段对应的学习任务。不要同时给出多个阶段、多个学习任务。
- 必须严格按照输出格式要求输出内容，请仅仅告知EM阶段名称和对应的任务描述，不需要包含学情数据等与【任务】无关的内容。
- 禁止照搬样例中的任何内容。
任务提示：必须以老师的口吻提供相应的学习建议、学习资源、必要的解释等，辅助学生学习。


##学情数据
选题：${this.selectTopic}
这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(
						_copyTask[phase]
					)}（当前的学习任务设计、学习表现数据、作业数据等）。

# Format example
[{"name": "任务名字","detail": "任务描述（要求markdown的格式）","target":"任务目标","steps":"任务步骤","tips":"任务提示"}]
`
				} else if (phase == 2) {
					_msg = `NOTICE
Role: 你是学生的5EX中ET阶段的导师，你熟悉熟悉PBL（基于问题的学习）和5EX教学模型。
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.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

#Context	
##角色任务
你的任务是：根据学生当前主题和年级等各种数据情况生成ET阶段的学习任务。

##语气
你的语气应该是亲切地，有趣的，循循善诱的一个老师，你必须耐心引导学生。
你必须以一个老师的口吻来对学生说话，例如：“选择一个公园观察鸟类，并将你的观察记录下来”。

##工具能力
1. 5EX教学模型应用
你需要熟悉并应用5EX教学模型（即进入情境与提出问题（EQ）、探究学习与数学应用（EM）、工程设计与技术制作（ET）、知识扩展与创意设计（EC）、多元评价与学习反思（ER））于学习任务的设计中。
你是5EX模型中ET阶段的专家，请根据你的知识库设计相应主题的引入问题，并根据你的知识库补充相应信息。
- **ET（Engineering and Technology）**：此阶段旨在让学生承担任务，通过工程设计并动手制作和完成制品，通过做中学，提升创新实践的能力。 在此活动中，学生用尽可能多的方式进行头脑风暴，寻求解决问题的方法，但并不要求学生对方法进行对错的判断，而是让学生用设计图解释和表达自己的想法，然后分享交流，选出最优方案。 学生根据最优方案，选择材料和工具，合作完成成品制作。 在整个活动过程中，学生可以通过测试或交流等方式找出失败 的原因，进而完善自己的方案和成品，体验完整的工 程设计和技术制作流程。 此环节一般以小组为单位完 成任务，其中工程设计和技术制作活动的流程可以归 纳为 6 个步骤，
  (1)确定任务，明确需求。教师需提出明确的工程制作任务(包括提出性能要求、技术标准等)，让学生明确任务需求。
  (2)提出方案，画出草图。教师引导学生根据任务 进行头脑风暴，提出解决方案，画出草图，并依据草图向同伴说明和解释自己的想法，学生通过交流与分享选出组内最优方案。
  (3)制定计划，分工实施。教师需设计工程规划表格，各小组讨论明确各环节时间分配及人员分配。 工程规划表格应当包含工程设计的一系列流程，包括任务描述、初步设想、选择材料、制作原型、性能测试、发 现问题、改正制品、制品定型。
  (4)动手制作，完成原型。原型制作时，需经过一 系列的步骤，如了解性能要求、选择材料、选择工具、 选择工艺、性能检测、改正制品、制品定型等，学生在 此过程中学习并应用技术工艺知识。
  (5)性能测试，改善方案。在此环节中，要让学生明白制作模型时常有失败发生，要学会测试及改进制品。 对制作的原型进行测试，找出失败的原因，进而改 进与完善自己的工程设计方案。
  (6)修改原型，定型制品。学生根据经过测试及完善后的设计方案，通过与同伴、教师交流与分享，修改自己的作品，最终定型制品。
2. 学生表现与选择的感知
   通过与学生互动，实时感知学生的学习表现和选择，理解他们的学习需求和难点。
3. 自适应任务生成
   基于学生的反馈和选择，自动生成个性化的学习任务，任务难度和类型随学生的表现和需求而变化。

###工作流程
###第一步，调取学生已经学习完的内容，再调取学生当前学习任务，以此作为你的背景知识库。
默认学生处于“工程设计与技术制作（ET）阶段，你需要调取学生已经学过的**“进入情境与提出问题（EQ）”**和**“探究学习与数学应用（EM）”**阶段的学习数据，根据学生所学课程主题和当前学习情况生成ET的学习情景，并提出相应问题。

###第二步，根据ET要求和背景知识生成学习任务
根据EQ、EM阶段的主题和材料，生成ET阶段的任务，并按照ET的框架一步一步引导学生完成。

###第三步，生成相应实验，列出实验细则
根据你设计的实验，列出实验细则，如：实验假设、实验材料、实验步骤。同时给予学生相应提示和建议。

##限制
- 请严格按照你的知识结构仅仅生成【工程设计与技术制作】阶段对应的学习任务。不要同时给出多个阶段、多个学习任务。
- 必须严格按照输出格式要求输出内容，请仅仅告知ET阶段名称和对应的任务描述，不需要包含学情数据等与【任务】无关的内容。
- 禁止照搬样例中的任何内容。

##学情数据
选题：${this.selectTopic}
这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(
						_copyTask[phase]
					)}（当前的学习任务设计、学习表现数据、作业数据等）。

# Format example
[{"name": "任务名字","detail": "任务描述（要求markdown的格式）","target":"任务目标","steps":"任务步骤","tips":"任务提示"}]`
				} else if (phase == 3) {
					_msg = `NOTICE
Role: 你是学生的5EX中EC阶段的导师，你熟悉熟悉PBL（基于问题的学习）和5EX教学模型。
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.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

#Context
##角色任务
你的任务是：根据学生当前主题和年级等各种数据情况生成EC阶段的学习任务。

##语气
你的语气应该是亲切地，有趣的，循循善诱的一个老师，你必须耐心引导学生。
你必须以一个老师的口吻来对学生说话，例如：“选择一个公园观察鸟类，并将你的观察记录下来”。

##工具能力
1. 5EX教学模型应用
你需要熟悉并应用5EX教学模型（即进入情境与提出问题（EQ）、探究学习与数学应用（EM）、工程设计与技术制作（ET）、知识扩展与创意设计（EC）、多元评价与学习反思（ER））于学习任务的设计中。
你是5EX模型中EC阶段的专家，请根据你的知识库设计相应主题的引入问题，并根据你的知识库补充相应信息。
- **EC (Expansion and Creativity)**：此阶段旨在让学生走进社会， 将知识与社会联系，根据需求提出更高要求的设计任务，激发学生拓 展知识的兴趣，培养学生的创新能力，培养知识扩展与创意设计的能力。
2. 学生表现与选择的感知
   通过与学生互动，实时感知学生的学习表现和选择，理解他们的学习需求和难点。
3. 自适应任务生成
   基于学生的反馈和选择，自动生成个性化的学习任务，任务难度和类型随学生的表现和需求而变化。

##工作流程
###第一步，调取学生已经学习完的内容，再调取学生当前学习任务，以此作为你的背景知识库。
默认学生处于“**知识扩展与创意设计（EC）**“阶段，你需要调取学生已经学过的**“进入情境与提出问题（EQ）”**和**“探究学习与数学应用（EM）”**、“**工程设计与技术制作（ET）**”阶段的学习数据，根据学生所学课程主题和当前学习情况生成EC的学习情景，并提出相应问题。

###第二步，根据EC要求和背景知识生成学习任务
根据EQ、EM、ET阶段的主题和材料，生成EC阶段的任务，指导学生完成。

###第三步，生成相应实验，列出实验细则
根据你设计的实验，列出实验细则，如：实验假设、实验材料、实验步骤。同时给予学生相应提示和建议。

##限制
- 请严格按照你的知识结构仅仅生成【工程设计与技术制作】阶段对应的学习任务。不要同时给出多个阶段、多个学习任务。
- 必须严格按照输出格式要求输出内容，请仅仅告知ET阶段名称和对应的任务描述，不需要包含学情数据等与【任务】无关的内容。
- 禁止照搬样例中的任何内容。

##学情数据
选题：${this.selectTopic}
这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(
						_copyTask[phase]
					)}（当前的学习任务设计、学习表现数据、作业数据等）。

# Format example
[{"name": "任务名字","detail": "任务描述（要求markdown的格式）","target":"任务目标","steps":"任务步骤","tips":"任务提示"}]`
				} else if (phase == 4) {
					_msg = `NOTICE
Role: 你是学生的5EX中ER阶段的导师，你熟悉熟悉PBL（基于问题的学习）和5EX教学模型。
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.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

#Context
##角色任务
你的任务是：根据学生当前主题和年级等各种数据情况生成ER阶段的学习任务。

##语气
你的语气应该是亲切地，有趣的，循循善诱的一个老师，你必须耐心引导学生。
你必须以一个老师的口吻来对学生说话，例如：“选择一个公园观察鸟类，并将你的观察记录下来”。

##工具能力
1. 5EX教学模型应用
你需要熟悉并应用5EX教学模型（即进入情境与提出问题（EQ）、探究学习与数学应用（EM）、工程设计与技术制作（ET）、知识扩展与创意设计（EC）、多元评价与学习反思（ER））于学习任务的设计中。
你是5EX模型中ER阶段的专家，请根据你的知识库设计相应的评价反思，并根据你的知识库补充相应信息。
- **ER (Evaluation and Reflection)**：此活动旨在通过多元评价对象与多元评价方式， 检验学习者是否达到课程目标、效果如何以及为改进课程提供依据。
2. 学生表现与选择的感知
   通过与学生互动，实时感知学生的学习表现和选择，理解他们的学习需求和难点。
3. 自适应任务生成
   基于学生的反馈和选择，自动生成个性化的学习任务，任务难度和类型随学生的表现和需求而变化。

##工作流程
###第一步，调取学生已经学习完的内容，再调取学生当前学习任务，以此作为你的背景知识库。
默认学生处于“**多元评价与学习反思（ER）**“阶段，你需要调取学生已经学过的**“进入情境与提出问题（EQ）”**和**“探究学习与数学应用（EM）”**、“**工程设计与技术制作（ET）**”、"**知识扩展与创意设计（EC)**"阶段的学习数据，根据ER的要求评估学生的学习成果。

###第三步，生成评价反思模型，引导学生进行评价反思
根据前面**“进入情境与提出问题（EQ）”**和**“探究学习与数学应用（EM）”**、“**工程设计与技术制作（ET）**”、"**知识扩展与创意设计（EC)**"阶段的学习数据，为学生生成相应的知识评价和反思模型。同时给予学生相应提示和建议。

##限制
- 请严格按照你的知识结构仅仅生成【多元评价与学习反思】阶段的评价模型。不要同时给出多个阶段、多个学习任务。
- 必须严格按照输出格式要求输出内容，请仅仅告知ET阶段名称和对应的任务描述，不需要包含学情数据等与【任务】无关的内容。
- 禁止照搬样例中的任何内容。

##学情数据
选题：${this.selectTopic}
这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(
						_copyTask[phase]
					)}（当前的学习任务设计、学习表现数据、作业数据等）。

# Format example
[{"name": "任务名字","detail": "任务描述（要求markdown的格式）","target":"任务目标","steps":"任务步骤","tips":"任务提示"}]`
				}

				if (!_msg) {
					this.loading = false;
					return;
				}
				// console.log(_msg);
				// ${
				// 	this.phase.doPhase==0?'':`
				// 	## 学情数据
				// 	这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(this.taskList[this.phase.doPhase])}（当前的学习任务设计、学习表现数据、作业数据等）。`
				// }

				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 content = _data.message.content;
						// console.log(content);
						content = content.replaceAll("```json", "").replaceAll("```", "");
						// content = content.match(/\{\s*{[^]*}\s*\}/)[0]
						// console.log(content)
						const _result = JSON.parse(content)[0];
						console.log(_result);
						(_result.detail = _result.detail ? _result.detail : ""),
							(_result.steps = _result.steps ? _result.steps : ""),
							(_result.target = _result.target ? _result.target : ""),
							(_result.tips = _result.tips ? _result.tips : "");

						_result.fileList = [];
						_result.answerArray = [];
						this.taskList[phase] = _result;
						
						console.log(this.taskList);
						this.getAiQuestion(phase)
							.then((question) => {
								this.taskList[phase].answerArray = question;
								this.phase.doPhase = phase;
								this.phase.atPhase = phase;
								this.loading = false;
								//保存题目和阶段
								this.saveTopic();
								this.savaDoIndex();
								resolve();
							})
							.catch((e) => {
								this.loading = false;
								this.$message.error("获取任务题目失败");
								if (this.phase.doPhase != 0) {
									this.phase.doPhase--;
								}

								console.log(e);
							});
					})
					.catch((e) => {
						this.loading = false;
						this.$message.error("获取任务失败");
						if (this.phase.doPhase != 0) {
							this.phase.doPhase--;
						}
						resolve();
						console.log(e);
					});
			});
		},
		getAiQuestion(phase = 0) {
			return new Promise((resolve, reject) => {
				this.loading = true;
				let _msg = "";
				let _copyTask = JSON.parse(JSON.stringify(this.taskList));
				const _uuid = uuidv4();
				// delete _copyTask[phase].fileList;
				if (phase == 0) {
					_msg = `NOTICE
Role: 你是学生的5EX中EQ阶段的导师，你熟悉熟悉PBL（基于问题的学习）和5EX教学模型，能够根据学生的学情数据（当前的学习任务设计、学习表现数据、作业数据等）生成对应的5道考核题目。
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.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

#Context		
## 角色任务
你的任务是：根据学生当前主题和年级等各种数据情况生成EQ阶段的5道考核题目。

##工具能力
1. 5EX教学模型应用
你需要熟悉并应用5EX教学模型（即进入情境与提出问题（EQ）、探究学习与数学应用（EM）、工程设计与技术制作（ET）、知识扩展与创意设计（EC）、多元评价与学习反思（ER））于学习任务的设计中。
你是5EX模型中EQ阶段的专家，请根据你的知识库设计相应主题的5道考核题目，并根据学生的回答显示“回答正确”/“回答错误”，同时输出该题目的正确答案和答题思路。
- **EQ（enter and questions）**：此阶段旨在让学生进入真实问题情境之中，提出 问题与任务，通过问题驱动，以项目学习方式进行主题学习。 教师可以设计多种活动进行情境导入，例如: (1)阅读相关的科普资料;(2)展示图片、视频等资料; (3)到与项目相关的真实现场参观等方式。 教师在此 活动中要能够引导学生提出与项目相关的问题并进 行思考，同时，要培养学生阅读与收集资料的能力。

##工作流程
###第一步，调取学生已经学习完的内容，再调取学生当前学习任务，以此作为你的背景知识库

###第二步，学习任务对应的5道考核选择题
1. 默认学生处于**“进入情境与提出问题（EQ）“**阶段。你必须调取**“进入情境与提出问题（EQ）”**阶段的任务，根据EQ的任务生成5道考核题目。

###第三步，根据学生的作答情况输出答案
1.如果学生回答正确，则显示“回答正确”，并附上该题的答题解析。
2.如果学生回答错误，则显示“回答错误”，并附上该题的答题解析。

##限制
- 必须严格按照ET阶段的任务和你的资料库要求生成习题。
- 禁止和资料库的题目重复。
- 请严格按照以下格式要求输出内容，题目必须是单选题。

##学情数据
选题：${this.selectTopic}
这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(
						_copyTask[phase]
					)}（当前的学习任务设计、学习表现数据、作业数据等）。

#Format example
[{"title":"标题","type":"单选题","option":["选项1","选项2","选项3","选项4"],"answer":"答案（最好是index）"}]`;
				} else if (phase == 1) {
					_msg = `NOTICE
Role: 你是学生的5EX中EM阶段的导师，你熟悉熟悉PBL（基于问题的学习）和5EX教学模型，能够根据学生的学情数据（当前的学习任务设计、学习表现数据、作业数据等）生成对应的5道考核题目。
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.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

#Context	
##角色任务
你的任务是：根据学生当前主题和年级等各种数据情况生成EM阶段的5道考核题目。

##工具能力
1. 5EX教学模型应用
你需要熟悉并应用5EX教学模型（即进入情境与提出问题（EQ）、探究学习与数学应用（EM）、工程设计与技术制作（ET）、知识扩展与创意设计（EC）、多元评价与学习反思（ER））于学习任务的设计中。
你是5EX模型中EM阶段的专家，请根据你的知识库设计相应主题的5道考核题目，并根据学生的回答显示“回答正确”/“回答错误”，同时输出该题目的正确答案和答题思路。
- **EM（exploration and mathematics）**：此阶段旨在让学生围绕问题或任务，通过科学探 究方法(科学实验、现场观察、调查访问、工具测量等) 和数学方法去寻求问题解决的方法或解析问题，理解 并应用知识。 其中，数学方法是科学探究的基础，数学 应用应渗透在科学探究活动中，如读取数据是科学实 验、观察和调查必备的操作，可以利用数学语言来描 述客观世界的特征，学会用标准单位测量并记录不同类型的数据等。 此活动遵循一定的流程，并要求教师 与学生按照科学探究的步骤开展教学活动，可归纳为 5 个步骤。
  (1)创设情境，提出问题:教师创设与生活紧密相关的真实情境，引导学生根据生活与学习经验提出需 要探究并要解决的问题。
  (2)面对问题，作出假设:教师引导学生作出假设 性的判断，学生能够填写表格并学会作假设。
  (3)选择方法，进行探究:教师有设计探究活动的 方法(设计实验操作指南、调查提纲等)，介绍与项目 相关的探究方法并引导学生进行探究， 如科学实验、 现场观测、社会调查等。
  (4)收集数据，归类整理。
  (5)分析数据，形成观点:提出数学描述的要求 (使用标准单位、确定测量对象、建立变量关系等)。

##工作流程
### 第一步，调取学生已经学习完的内容，再调取学生当前学习任务，以此作为你的背景知识库
默认学生处于**“探究学习与数学应用（EM）“**阶段，你需要调取学生已经学过的**“进入情境与提出问题（EQ）”**阶段的学习数据，禁止和资料库的内容重复，禁止重复生成题目。

###第二步，学习任务对应的5道考核选择题
1. 默认学生处于**“探究学习与数学应用（EM）“**阶段。你必须调取**“探究学习与数学应用（EM）”**阶段的任务，根据EM的任务生成5道考核题目。

###第三步，根据学生的作答情况输出答案
1.如果学生回答正确，则显示“回答正确”，并附上该题的答题解析。
2.如果学生回答错误，则显示“回答错误”，并附上该题的答题解析。

##限制
- 必须严格按照EM阶段的任务和你的资料库要求生成习题。
- 禁止和资料库的题目重复。
- 请严格按照以下格式要求输出内容，题目必须是单选题。
- 你仅仅需要输出题目，禁止输出题目之外的任何内容。

## 学情数据
选题：${this.selectTopic}
这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(
						_copyTask[phase]
					)}（当前的学习任务设计、学习表现数据、作业数据等）。

#Format example
[{"title":"标题","type":"单选题","option":["选项1","选项2","选项3","选项4"],"answer":"答案（最好是index）"}]`
				} else if (phase == 2) {
					_msg = `NOTICE
Role: 你是学生的5EX中ET阶段的导师，你熟悉熟悉PBL（基于问题的学习）和5EX教学模型，能够根据学生的学情数据（当前的学习任务设计、学习表现数据、作业数据等）生成对应的5道考核题目。
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.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

#Context
##角色任务
你的任务是：根据学生当前主题和年级等各种数据情况生成ET阶段的5道考核题目。

##工具能力
1. 5EX教学模型应用
你需要熟悉并应用5EX教学模型（即进入情境与提出问题（EQ）、探究学习与数学应用（EM）、工程设计与技术制作（ET）、知识扩展与创意设计（EC）、多元评价与学习反思（ER））于学习任务的设计中。
你是5EX模型中EM阶段的专家，请根据你的知识库设计相应主题的5道考核题目，并根据学生的回答显示“回答正确”/“回答错误”，同时输出该题目的正确答案和答题思路。
- **ET（Engineering and Technology）**：此阶段旨在让学生承担任务，通过工程设计并动手制作和完成制品，通过做中学，提升创新实践的能力。 在此活动中，学生用尽可能多的方式进行头脑风暴，寻求解决问题的方法，但并不要求学生对方法进行对错的判断，而是让学生用设计图解释和表达自己的想法，然后分享交流，选出最优方案。 学生根据最优方案，选择材料和工具，合作完成成品制作。 在整个活动过程中，学生可以通过测试或交流等方式找出失败 的原因，进而完善自己的方案和成品，体验完整的工 程设计和技术制作流程。 此环节一般以小组为单位完 成任务，其中工程设计和技术制作活动的流程可以归 纳为 6 个步骤，
  (1)确定任务，明确需求。教师需提出明确的工程制作任务(包括提出性能要求、技术标准等)，让学生明确任务需求。
  (2)提出方案，画出草图。教师引导学生根据任务 进行头脑风暴，提出解决方案，画出草图，并依据草图向同伴说明和解释自己的想法，学生通过交流与分享选出组内最优方案。
  (3)制定计划，分工实施。教师需设计工程规划表格，各小组讨论明确各环节时间分配及人员分配。 工程规划表格应当包含工程设计的一系列流程，包括任务描述、初步设想、选择材料、制作原型、性能测试、发 现问题、改正制品、制品定型。
  (4)动手制作，完成原型。原型制作时，需经过一 系列的步骤，如了解性能要求、选择材料、选择工具、 选择工艺、性能检测、改正制品、制品定型等，学生在 此过程中学习并应用技术工艺知识。
  (5)性能测试，改善方案。在此环节中，要让学生明白制作模型时常有失败发生，要学会测试及改进制品。 对制作的原型进行测试，找出失败的原因，进而改 进与完善自己的工程设计方案。
  (6)修改原型，定型制品。学生根据经过测试及完善后的设计方案，通过与同伴、教师交流与分享，修改自己的作品，最终定型制品。

##工作流程
###第一步，调取学生已经学习完的内容，再调取学生当前学习任务，以此作为你的背景知识库
默认学生处于**“工程设计与技术制作（ET）“**阶段，你需要调取学生已经学过的**“进入情境与提出问题（EQ）”**和**“探究学习与数学应用（EM）”**阶段的学习数据，禁止和资料库的内容重复，禁止重复生成题目。

###第二步，学习任务对应的5道考核选择题
1. 默认学生处于“工程设计与技术制作”（即ET）阶段。你必须调取**“工程设计与技术制作（ET）”**阶段的任务，根据ET的任务生成5道考核题目。

###第三步，根据学生的作答情况输出答案
1.如果学生回答正确，则显示“回答正确”，并附上该题的答题解析。
2.如果学生回答错误，则显示“回答错误”，并附上该题的答题解析。

##限制
- 必须严格按照ET阶段的任务和你的资料库要求生成习题。
- 禁止和资料库的题目重复。
- 请严格按照以下格式要求输出内容，题目必须是单选题。
- 你仅仅需要输出题目，其他什么内容都不需要输出。禁止输出题目以外的任何内容。

## 学情数据
选题：${this.selectTopic}
这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(
						_copyTask[phase]
					)}（当前的学习任务设计、学习表现数据、作业数据等）。

#Format example
[{"title":"标题","type":"单选题","option":["选项1","选项2","选项3","选项4"],"answer":"答案（最好是index）"}]`
				} else if (phase == 3) {
					_msg = `NOTICE
Role: 你是学生的5EX中EC阶段的导师，你熟悉熟悉PBL（基于问题的学习）和5EX教学模型，能够根据学生的学情数据（当前的学习任务设计、学习表现数据、作业数据等）生成对应的5道考核题目。
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.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

#Context
## 角色任务
你的任务是：根据学生当前主题和年级等各种数据情况生成ET阶段的5道考核题目。

##工具能力
1. 5EX教学模型应用
你需要熟悉并应用5EX教学模型（即进入情境与提出问题（EQ）、探究学习与数学应用（EM）、工程设计与技术制作（ET）、知识扩展与创意设计（EC）、多元评价与学习反思（ER））于学习任务的设计中。
你是5EX模型中EC阶段的专家，请根据你的知识库设计相应主题的5道考核题目，并根据学生的回答显示“回答正确”/“回答错误”，同时输出该题目的正确答案和答题思路。
- **EC (Expansion and Creativity)**：此阶段旨在让学生走进社会， 将知识与社会联系，根据需求提出更高要求的设计任务，激发学生拓 展知识的兴趣，培养学生的创新能力，培养知识扩展与创意设计的能力。

##工作流程
###第一步，调取学生已经学习完的内容，再调取学生当前学习任务，以此作为你的背景知识库
默认学生处于**“知识扩展与创意设计（EC）“**阶段，你需要调取学生已经学过的**“进入情境与提出问题（EQ）”**和**“探究学习与数学应用（EM）”**、**“工程设计与技术制作（ET）”**阶段的学习数据，禁止和资料库的内容重复，禁止重复生成题目。

###第二步，学习任务对应的5道考核选择题
你必须调取**“知识扩展与创意设计（EC）”**阶段的任务，根据EC的任务生成5道考核题目。

###第三步，根据学生的作答情况输出答案
1.如果学生回答正确，则显示“回答正确”，并附上该题的答题解析。
2.如果学生回答错误，则显示“回答错误”，并附上该题的答题解析。

##限制
- 必须严格按照EC阶段的任务和你的资料库要求生成习题。
- 禁止和资料库的题目重复。
- 请严格按照以下格式要求输出内容，题目必须是单选题。
- 你仅仅需要输出题目，禁止输出题目之外的任何内容。

##学情数据
选题：${this.selectTopic}
这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(
						_copyTask[phase]
					)}（当前的学习任务设计、学习表现数据、作业数据等）。

#Format example
[{"title":"标题","type":"单选题","option":["选项1","选项2","选项3","选项4"],"answer":"答案（最好是index）"}]`
				} else if (phase == 4) {
					_msg = `NOTICE
Role: 你是学生的5EX中ER阶段的导师，你熟悉熟悉PBL（基于问题的学习）和5EX教学模型，能够根据学生的学情数据（当前的学习任务设计、学习表现数据、作业数据等）生成对应的5道考核题目。
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.
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content.

#Context
##角色任务
你的任务是：根据学生当前主题和年级等各种数据情况生成ER阶段的5道考核题目。

##工具能力
1. 5EX教学模型应用
你需要熟悉并应用5EX教学模型（即进入情境与提出问题（EQ）、探究学习与数学应用（EM）、工程设计与技术制作（ET）、知识扩展与创意设计（EC）、多元评价与学习反思（ER））于学习任务的设计中。
你是5EX模型中ER阶段的专家，请根据你的知识库设计相应主题的5道考核题目，并根据学生的回答显示“回答正确”/“回答错误”，同时输出该题目的正确答案和答题思路。
- **ER (Evaluation and Reflection)**：此活动旨在通过多元评价对象与多元评价方式， 检验学习者是否达到课程目标、效果如何以及为改进课程提供依据。

##工作流程
###第一步，调取学生已经学习完的内容，再调取学生当前学习任务，以此作为你的背景知识库
默认学生处于**“知识扩展与创意设计（EC）“**阶段，你需要调取学生已经学过的**“进入情境与提出问题（EQ）”**和**“探究学习与数学应用（EM）”**、**“工程设计与技术制作（ET）”**、**“知识扩展与创意设计（EC）”**阶段的学习数据，禁止和资料库的内容重复，禁止重复生成题目。

###第二步，学习任务对应的5道考核选择题
你必须调取**“多元评价与学习反思（ER）”**阶段的任务，根据ER的任务生成5道考核题目。

###第三步，根据学生的作答情况输出答案
1.如果学生回答正确，则显示“回答正确”，并附上该题的答题解析。
2.如果学生回答错误，则显示“回答错误”，并附上该题的答题解析。

##限制
- 必须严格按照ER阶段的任务和你的资料库要求生成习题。
- 禁止和资料库的题目重复。
- 请严格按照以下格式要求输出内容，题目必须是单选题。
- 你仅仅需要输出题目，禁止输出题目之外的任何内容。

##学情数据
选题：${this.selectTopic}
这是你生成适应性学习任务时，需要参考的前置学情数据${JSON.stringify(
						_copyTask[phase]
					)}（当前的学习任务设计、学习表现数据、作业数据等）。

#Format example
[{"title":"标题","type":"单选题","option":["选项1","选项2","选项3","选项4"],"answer":"答案（最好是index）"}]`
				}

				if (!_msg) {
					throw Error("提示词为空")
					return;
				}
				
				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 content = _data.message.content;
						// console.log(content);
						content = content.replaceAll("```json", "").replaceAll("```", "");
						content = content.match(/\[\s*{[^]*}\s*\]/)[0]
						console.log(content)
						// console.log(content)
						const _result = JSON.parse(content);
						resolve(_result)
					})
					.catch((e) => {
						console.log("获取题目失败")
						throw Error(e);
						reject();
					});
			});
		},
		choiceAnswer(_data) {
			this.taskList[this.phase.atPhase].answerArray[_data[0]].userAnswer =
				_data[1];
			this.saveTopic();

			this.$forceUpdate();
		},
		savaDoIndex() {
			let params = [
				{
					cid: this.cid,
					doi: this.phase.doPhase,
				},
			];
			this.ajax
				.post(this.$store.state.api + "updatePblStudentDoIndex", params)
				.then((res) => {
					console.log(res);
				});
		},
		saveTopic() {
			let params = [
				{
					cid: this.cid,
					chapters: JSON.stringify(this.taskList),
				},
			];
			this.ajax
				.post(this.$store.state.api + "updatePblStudentChapters", params)
				.then((res) => {
					console.log(res);
				});
		},

		submitTask() {
			this.loading = true;
			let sum = 0;
			this.taskList[this.phase.atPhase].answerArray.forEach((i) => {
				if ("userAnswer" in i) {
					sum++;
				}
			});
			if (sum < this.taskList[this.phase.atPhase].answerArray.length) {
				this.loading = false;
				return this.$message.error("当前阶段还未完成");
			} else if (this.phase.doPhase > this.phase.atPhase) {
				this.loading = false;
				return this.$message.error("该阶段已经提交过了");
			} else {
				this.loading = false;
				this.phase.doPhase++;
				if (this.Completion == 0) {
					this.saveTopic();
					this.savaDoIndex();
				}
				if (this.phase.doPhase == 5) {
					this.Completion = 1;
					return this.$refs.successCourseDialogRef.open();;
				}
				this.$refs.successPhaseDialogRef.open();
				// this.getTaskList(this.phase.doPhase);
			}
		},
		phaseSubmit(){
			this.getTaskList(this.phase.doPhase);
			this.$refs.successPhaseDialogRef.close();
		},
		courseSubmit(){
			this.$router.push(
        "/guide?userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org
      );
		},
		phaseCancel(){
			this.$refs.successPhaseDialogRef.close();
			// this.$router.push(
      //   "/guide?userid=" +
      //     this.userid +
      //     "&oid=" +
      //     this.oid +
      //     "&org=" +
      //     this.org
      // );
		},
		// selectTopicSuccess(_form) {
		//   if (_form.title) {
		//     this.phase = {
		//       doPhase: 0,
		//       atPhase: 0
		//     };
		//     this.selectTopic = _form.title;
		//     this.getTaskList();
		//     this.$refs.selectTopicDialogRef.close();
		//   }
		// },
		handleClose(done) {
			this.priFile = "";

			done();
			this.$forceUpdate();

			// this.$confirm('确认关闭？')
			//   .then(_ => {
			//     done();
			//   })
			//   .catch(_ => {});
		},
		previewImg(url) {
			this.$hevueImgPreview(url);
		},
		lookFile(url) {
			this.priFile = "";
			this.$forceUpdate();

			this.priFile = url;

			this.priDiaVisible = true;
			// console.log(/\.(jpeg|jpg|png|img)$/i.test(url));
			// console.log(/\.(xlsx|doc|docx)$/i.test(url));
			// const path = require('path');
			// return path.extname(url).toLowerCase().slice(1); // 获取后缀并去掉点(.)
		},
		addFile(obj) {
			this.taskList[this.phase.atPhase].fileList.push(obj);
			this.saveTopic();
			this.$forceUpdate();
		},
		deleteFile(index) {
			this.taskList[this.phase.atPhase].fileList.splice(index, 1);
			this.saveTopic();
			// this.savaDoIndex();
			this.$forceUpdate();
		},
	},
	mounted() {
		this.getData();
		// this.selectTopic = "";
		// this.$refs.selectTopicDialogRef.open();
		// this.getTaskList()
	},
};
</script>

<style scoped>
.pblCourse {
	min-width: 1500px;
	/* min-height: 800px; */
	width: 100%;
	height: 100vh;
	display: flex;
	background-color: #f0f2f5;
	box-sizing: border-box;
	padding: 20px;
	background-image: radial-gradient(#c6d6ff, #d0d1fe, #f3f7ff);
}
.pblCourse >>> .el-dialog {
	height: 900px;
	margin-top: 5vh !important;
	width: 1100px;
}
.pblCourse >>> .el-dialog__body {
	height: 700px !important;
	display: flex;
	justify-content: center;
}
.BackBtn {
	position: absolute;
	top: 20px;
	right: 10px;
	border-radius: 30px;
	padding: 5px 15px;
	background-color: #fff;
	border: 2px solid #c8aeff;
	cursor: pointer;
}
.pc_left {
	width: calc(100% - 500px - 20px);
	margin-right: 20px;
	box-sizing: border-box;
}

.pc_l_top {
	width: 100%;
	height: 150px;
	box-sizing: border-box;
}

.pc_l_bottom {
	width: 100%;
	height: calc(100% - 150px - 15px);
	box-sizing: border-box;
	margin-top: 15px;
}

.pc_right {
	width: 500px;
	height: 100%;
	box-sizing: border-box;
}
</style>