pbl-student-table/src/components/classRoomHelper/component/taskArea.vue

<template>
	<div class="task">
		<div class="taskTop">
			<div class="tt_title">任务时间分配</div>
			<div class="tt_item">
				<div class="tt_i_title">
					<span>课程时间轴</span>
				</div>
				<div class="tt_i_box">
					<img :src="require('../../../assets/icon/course/group.png')">
				</div>
			</div>

			<div class="tt_item">
				<div class="tt_i_title">
					<span>任务状态</span>
					<span>学生活动中...</span>
				</div>
				<div class="tt_i_box">
					<div class="tt_i_b_item">
						<div class="tt_i_b_title">作业提交</div>
						<div class="tt_i_b_box">
							<div class="tt_i_b_b_item">
								<div>提交人数</div>
								<span>34<span>人</span></span>
							</div>
							<div class="tt_i_b_b_item">
								<div>正确率</div>
								<span>88<span>%</span></span>
							</div>
						</div>
					</div>
					<div class="tt_i_b_item">
						<div class="tt_i_b_title">交流互动</div>
						<div class="tt_i_b_box">
							<div class="tt_i_b_b_item">
								<div>参与人数</div>
								<span>56<span>人</span></span>
							</div>
							<div class="tt_i_b_b_item">
								<div>点赞数</div>
								<span>36<span>个</span></span>
							</div>
							<div class="tt_i_b_b_item">
								<div>评论数</div>
								<span>128<span>条</span></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="t_top" ref="chatRef">
			<div class="t_t_chat" v-for="(item,index) in chatList" :key="index">
				<div class="t_t_c_user" v-if="item.role =='user'">
					<div class="t_t_c_u_left">
						<div class="t_t_c_u_l_content">{{item.content}}</div>
						<div class="t_t_c_u_l_time">{{item.time}}</div>
					</div>
					<div class="t_t_c_u_right">
						<span>我</span>
					</div>
				</div>
				<div class="t_t_c_ai" v-if="item.role =='ai'">
					<div class="t_t_c_a_left">
						<span>Ai</span>
					</div>
					<div class="t_t_c_a_right">
						<div class="t_t_c_a_r_content" v-loading="loading && index == chatList.length - 1" v-html="item.content"></div>
						<div class="t_t_c_a_r_time">{{item.time}}</div>
					</div>
					
				</div>
			</div>
			
		</div>
		<div class="t_bottom">
			<div class="t_b_btnArea">
				<!-- <div class="s_b_ba-item" @click.stop="choiceRole()">选择角色</div> -->
				<div class="t_b_ba_item" @click="sendType('智能总结')">智能总结</div>
				<div class="t_b_ba_item" @click="sendType('智能出题')">智能出题</div>
				<!-- <div class="t_b_ba_item" @click="sendType('优秀标兵')">优秀标兵</div> -->
				<div class="t_b_ba_item" @click="sendType('扩展知识')">扩展知识</div>
			</div>
			<div class="t_b_inputArea">
				<div class="t_b_tape" @click="goTape()"></div>
				<div class="t_b_input">
					<el-input :disabled="loading" @keyup.enter.native="send()" class="t_b_i_left" v-model="text"></el-input>
					<div class="t_b_i_right" @click="sendFile()">
						<span></span>
					</div>
				</div>
				<div class="t_b_btn" @click="send()">
					<span></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// import { Loading } from 'element-ui';

	export default {
		data(){
			return{
				text:"",
				loading:false,
				chatList:[
				{
						role:"ai",
						content:`您好，有什么可以帮助您的吗？`,
						time:new Date().toLocaleString().replace(/\//ig,'-')
					},
// 					{
// 						role:"user",
// 						content:"正十三边形的每个角是多少度？",
// 						time:"2023-11-11 11:10:11"
// 					},
// 					{
// 						role:"ai",
// 						content:`小朋友们，你们知道正十三边形吗？就像我们班有13个好朋友站成一个圈圈一样。如果我们想知道每个人转身看向下一个人需要转多少度，我们可以这样想：首先，所有朋友手拉手围成的圈圈是360度，对吧？但是，我们不能直接算每个人转身的角度，因为那是外面的角度，我们要算里面的角度，就像每个人转身时脚尖指向圈心的角度。
// 我们先用一个小技巧，算出所有内角加起来是多少度。方法是：(13-2)乘以180度，得到1980度。这是因为，想象成一个多边形，它可以分成11个三角形，每个三角形的角度和是180度。
// 然后，我们把1980度平分给13个角，就是每个角的度数了。算一算，1980除以13等于152度。所以，正十三边形的每个角是152度。就像每个人转身看下一个朋友，每个人需要转152度一样。`,
// 						time:"2023-11-11 11:10:11"
// 					},
				],
			}
		},
		methods: {
			choiceRole(){
				this.cardType = 1;
			},
			sendFile(){
				if (this.loading) return this.$message.info("请稍等");
				this.$message.info("点击了附件")
			},
			goTape(){
				if (this.loading) return this.$message.info("请稍等");
				this.$message.info(`点击了语音`)
			},
			send(){
				if (this.loading) return this.$message.info("请稍等");
				if(this.text.trim().length==0)return this.$message.info("请输入内容")
				this.loading = true;
				this.chatList.push({
					role:"user",
					content:this.text,
					time:new Date().toLocaleString().replace(/\//ig,'-')
				})
				
				this.chatList.push({
					role:"ai",
					content:"",
					time:new Date().toLocaleString().replace(/\//ig,'-')
				})
				this.$nextTick(() => {
				  this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
				});;
				setTimeout(()=>{
					

					let aiContent="对不起，这个问题我回答不了。"

					switch(this.text){
						case "智能总结":
							aiContent=`在这节课上，教师和学生们围绕垃圾问题进行了深入的讨论和实践活动。截止到目前为止，课程已经教学了以下内容：

1.环境调查与问题识别：学生们首先进行了实地调查，发现了大鹏新区存在的环境问题，特别是垃圾问题。学生们观察到菜市场和路边有大量垃圾堆积。
2.垃圾产生的数据分析：教师引导学生计算家庭和学校垃圾产生的总量，并通过比喻（如成年公羊和非洲大象的重量）来形象地表达垃圾的重量，增强学生对垃圾量的直观理解。
3.垃圾处理方法的探讨：学生们讨论了垃圾的处理方式，包括填埋、焚烧发电以及回收利用。他们探讨了这些方法的优缺点，如填埋会占用大量土地并可能污染土地和水源，焚烧则可能导致空气污染。
4.垃圾分类的重要性：课程强调了垃圾分类的重要性，并通过实际分类活动让学生们理解不同垃圾的处理方式。学生们学习了如何将垃圾分为可回收垃圾、厨余垃圾、有害垃圾和其他垃圾，并探讨了各类垃圾的具体处理方法。
5.实际行动的倡议：教师鼓励学生从减少一次性用品的使用开始，采取实际行动来减少垃圾产生。学生们提出了多种减少和重新利用垃圾的创意方法，如将剩饭剩菜喂给小动物或制作成堆肥。

总结来说，这节课通过实地调查、数据分析和小组讨论等多种教学方法，有效地提高了学生们对环境保护和垃圾处理问题的认识和参与度。学生们通过实际操作和讨论，学习了垃圾分类的技能，并对垃圾处理的各种方法有了深入的了解和评价。`
						break;
						case "智能出题":
							aiContent = `选择题：下列哪一项应该被归类为可回收物？
A. 废弃的塑料袋
B. 污染严重的厨房纸巾
C. 破碎的玻璃杯
D. 废旧的电池`
							break;
						case "优秀标兵":
							aiContent = `这节课的学习数据如下：

							<img src='https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%9B%BE%E7%89%8711713252928457.png' style="max-width:100%">
1.陈小春：陈小春同学的作业完成率接近完美，考试成绩也非常优秀，课堂参与度非常积极，项目贡献被评为优秀。综合各方面表现，陈小春在学习上非常突出，是一个全面发展的学生。
2.李雷：李雷同学的作业完成率较高，考试成绩良好，课堂参与度积极，项目贡献优秀。李雷在学习成绩和课堂表现上表现突出，是一个学习能力强的学生。
3.林婷婷：虽然林婷婷同学的作业完成率略低于陈小春和李雷，但考试成绩与李雷持平，且课堂参与度积极，项目贡献良好。林婷婷在学习成绩上表现稳定，是一个有潜力的学生。`;
							break;
						case "扩展知识":
							aiContent = `在这节关于解决垃圾问题的科学课上，学生们已经通过实际的调查和计算，以及对垃圾分类和处理方法的讨论，获得了很多实用的知识。为了进一步扩展这些知识，以下是一些可以在课堂上引入的相关主题和活动：

1.全球垃圾处理策略对比：
a.研究并讨论不同国家如何处理垃圾，例如德国、日本和瑞士的垃圾分类和处理系统。这可以帮助学生了解不同文化和政策环境下的环保策略。
b.学生可以制作海报或演示文稿，展示每个国家的垃圾处理方法，并讨论其优缺点。
2.垃圾减量的科技创新：
a.探索和讨论新技术如何帮助减少垃圾产生，例如生物降解材料、可回收包装设计等。
b.邀请一个环保技术公司的代表来讲述他们如何通过创新技术来处理或减少垃圾。
3.实地考察：
a.组织一次学校附近的垃圾处理设施或回收中心的参观。让学生亲眼看到垃圾是如何被分类、处理和回收的。 
b.在参观后，学生可以讨论他们的观察结果，以及这些设施如何影响社区和环境。
4.环保项目设计：
a.鼓励学生设计自己的环保项目，如校园内的垃圾分类宣传、制作可持续材料的手工艺品等。
b.这些项目可以在学校的科学展览会上展出，或者在校园网站上分享。
5.家庭和社区的环保行动：
a.让学生调查并记录他们家庭一周内的垃圾产生和处理情况，然后讨论如何改进。 
b.学生可以创建一个“绿色挑战”活动，鼓励家庭成员减少垃圾产生，如使用可重复使用的购物袋、减少一次性产品使用等。

通过这些扩展活动，学生不仅能够加深对垃圾问题的理解，还能学习到如何在日常生活中实际应用这些知识，从而更有效地保护我们的环境。`;
							break;
					}
					this.chatList[this.chatList.length - 1].content = aiContent;
          this.chatList[
            this.chatList.length - 1
          ].time = new Date().toLocaleString().replace(/\//gi, "-");
					// this.chatList.push({
					// 	role:"ai",
					// 	content:aiContent,
					// 	time:new Date().toLocaleString().replace(/\//ig,'-')
					// })
					this.text = "";
					this.$nextTick(() => {
					  this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
					});;
					this.loading = false;
				},5000)
				// this.chatList.push({
				// 	role:"user",
				// 	content:this.text,
				// 	time:"2023-11-11 11:10:11"
				// },{
				// 	role:"ai",
				// 	content:`小朋友，你真棒！`,//这里需要调用接口
				// 	time:"2023-11-11 11:10:11"
				// })
				// this.text = "";
				// // 元素滚动条触底
				// this.$nextTick(() => {
				//   this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
				// });;
			},
			sendType(text){
				
				if (this.loading) return this.$message.info("请稍等");
				this.text = text;
				this.send();
			},
			sendImage(){
				this.$message.info("发送图片")
			},
			sendVideo(){
				this.$message.info("发送视频")
			},
		},
	}
</script>

<style scoped>
.task{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.taskTop{
	width: 100%;
	height: 280px;
	box-sizing: border-box;
	padding: 10px;
	overflow-x: hidden;
}

.tt_title{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}

.tt_item{
	width: 100%;
	height: auto;
	margin-top: 10px;
}

.tt_i_title{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.tt_i_title>span:nth-of-type(2){
	box-sizing: border-box;
	padding: 0 10px;
	height: 25px;
	background-color: #EFFCF5;
	color: #83E0AF;
}


.tt_i_box{
	width: 100%;
	height: auto;
	display: flex;
	margin-top: 10px;
	justify-content: space-between;
}

.tt_i_box>img{
	width: 100%;
	height: 50px;
}


.tt_i_b_item{
	width: auto;
	height: 90px;
	background-color: #F6F9FF;
}

.tt_i_b_title{
	width: 100%;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	border: solid 1px #E0EAFB;
	color: #626466;
}

.tt_i_b_box{
	width: auto;
	height: 60px;
	box-sizing: border-box;
	border: solid 1px #E0EAFB;
	border-top: none;
	display: flex;
}

.tt_i_b_b_item{
	width: 70px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-left: solid 1px #E0EAFB;
}

.tt_i_b_box>.tt_i_b_b_item:nth-of-type(1){
	border-left:none
}

.tt_i_b_b_item>div{
	font-size: 14px;
	color: #949599;
}

.tt_i_b_b_item>span{
	font-weight: bold;
}

.tt_i_b_b_item>span>span{
	font-size: 12px;
	font-weight: 200;
}


.t_top{
	width: 100%;
	height: calc(100% - 370px);
	overflow: auto;
	box-sizing: border-box;
	padding: 20px 0;
}

.t_t_chat{
	width: 100%;
	display: flex;
	box-sizing: border-box;
	padding: 10px;
}

.t_t_chat>div{
	display: flex;
	align-items: flex-start;
	width: 100%;
}

.t_t_c_user{
	box-sizing: border-box;
	padding-left: 35px;
}

.t_t_c_u_left{
	width: 90%;
	height: auto;
}

.t_t_c_u_l_content{
	width: auto;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 10px;
	color: white;
	background-color: #3681FC;
	border-radius: 8px 2px 8px 8px;
  white-space: pre-line
}

.t_t_c_u_l_time{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	font-size: 12px;
	color: #9F9F9F;
	margin-top: 5px;
}

.t_t_c_u_right{
	width: 35px;
	height: 35px;
	display: flex;
	justify-content: center;
	margin-left: 5px
}

.t_t_c_u_right>span{
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	background-color: #3681FC;
	border-radius: 50%;;
}

.t_t_c_ai{
	box-sizing: border-box;
	padding-right: 35px;
}

.t_t_c_a_right{
	min-width: 90%;
	height: auto;
}

.t_t_c_a_r_content{
	width: auto;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 10px;
	background-color: #F6F8FF;
	border-radius: 2px 8px 8px 8px;
  white-space: pre-line;
	word-break: break-all;
}

.t_t_c_a_r_content2{
	background-color: #F6F8FF;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 10px;
	border-radius: 2px 8px 8px 8px;
  white-space: pre-line;
	box-shadow: 0 0px 10px #c5cbee;
}

.t_t_c_a_r_c_title{
	display: flex;
	align-items: center;
}
.t_t_c_a_r_c_title>img{
	width: 16px;
	height: 16px;
}

.t_t_c_a_r_c_item{
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 10px;
	background-color: #FFFFFF;
	border-radius: 5px;
	margin-top: 5px;
	color: #666666;
	font-size: 14px;
	cursor: pointer;
}

.t_t_c_a_r_c_item:hover{
	border: solid #B8D2FE 1px;
	box-shadow: 0 0 5px 2px #B8D2FE;
}

.t_t_c_a_r_c_title>span{
	font-weight: bold;
}


.t_t_c_a_r_time{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	font-size: 12px;
	color: #9F9F9F;
	margin-top: 5px;
}

.t_t_c_a_left{
	width: 35px;
	height: 35px;
	display: flex;
	justify-content: center;
	margin-right: 5px
}

.t_t_c_a_left>span{
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	background-color: #3681FC;
	border-radius: 50%;
}

.t_bottom{
	width: 100%;
	height: 90px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.t_b_btnArea{
	width: 100%;
	height: 30px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 10px;
	overflow-y: hidden;
}

.t_b_ba_item{
	width: auto;
	box-sizing: border-box;
	padding: 0 10px;
	height: 25px;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	/* 阴影 */
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.363);
	border-radius: 15px;
	font-size: 14px;
	cursor: pointer;
	margin-right: 10px;
	white-space: nowrap;
	transition: .3s;
}

.t_b_ba_item:hover{
	background-color: rgb(236, 236, 236);
}


.t_b_inputArea{
	width: 100%;
	height: 55px;
	box-sizing: border-box;
	border-top: solid 1px #EDEDED;
	display: flex;
	justify-content: center;
	align-items: center;
}

.t_b_tape{
	width: 35px;
	height: 35px;
	background: url("../../../assets/icon/course/tape.png") no-repeat;
	background-size: 50% 60%;
	background-position: center;
	cursor: pointer;
}

.t_b_input{
	width: 65%;
	height: 45px;
	background-color: #F3F3F3;
	border-radius: 50px;
	margin: 0 10px;
	display: flex;
	align-items: center;
}

.t_b_i_left{
	width: calc(100% - 45px);
	height: 100%;
}

.t_b_i_left>>>.el-input__inner{
	border: none;
	background-color: #F3F3F3;
	outline: none;
	border-radius: 50px 0 0 50px;
}


.t_b_i_right{
	width: 45px;
	height: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.t_b_i_right>span{
	width: 35px;
	height: 35px;
	background: url("../../../assets/icon/course/file.png") no-repeat;
	background-size: 50% 60%;
	background-position: center;
	cursor: pointer;
}

.t_b_btn{
	width: 40px;
	height: 40px;
	background-color: #3681FC;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	cursor: pointer;
}

.t_b_btn>span{
	width: 30px;
	height: 30px;
	background: url("../../../assets/icon/course/send.png") no-repeat;
	background-size: 70% 70%;
	background-position: center;
	
}

td,th{
	padding: 10px;
}


</style>