|
|
@@ -1,12 +1,12 @@
|
|
|
<template>
|
|
|
- <div class="ai_body">
|
|
|
+ <div class="ai_body" v-loading="loading">
|
|
|
<div class="ai_body_dialog">
|
|
|
- <div class="dialog_content" :class="{right: item.role == 2}" v-for="(item, index) in array" :key="index">
|
|
|
+ <div class="dialog_content" :class="{ right: item.role == 2 }" v-for="(item, index) in array" :key="index">
|
|
|
<div class="role">
|
|
|
<img src="../../../assets/icon/new/role1.png" v-if="item.role == 1">
|
|
|
<img src="../../../assets/icon/new/role2.png" v-else>
|
|
|
</div>
|
|
|
- <div class="content" :class="{content2: item.role == 2}">{{ item.text }}</div>
|
|
|
+ <div class="content" :class="{ content2: item.role == 2 }">{{ item.text }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ai_body_select">
|
|
|
@@ -14,38 +14,40 @@
|
|
|
<div class="task">
|
|
|
<div class="title">选择需要优化的任务：</div>
|
|
|
<div class="content">
|
|
|
- <div class="span" @click="addAllTask()">
|
|
|
+ <div class="span" @click="addAllTask()">
|
|
|
<div class="check">
|
|
|
<img :src="checkImg" alt="" v-if="checkArray.length !== course.length">
|
|
|
<img :src="checkIsImg" alt="" v-else>
|
|
|
</div>
|
|
|
<span>全选</span>
|
|
|
</div>
|
|
|
- <div class="span" v-for="(item, index) in course" :key="index" @click="addTask(index)">
|
|
|
+ <div class="span" v-for="(item, index) in course" :key="index" @click="addTask(index)">
|
|
|
<div class="check">
|
|
|
<img :src="checkImg" alt="" v-if="checkArray.indexOf(index) === -1">
|
|
|
<img :src="checkIsImg" alt="" v-else>
|
|
|
</div>
|
|
|
- <span>任务{{ index+1 }}</span>
|
|
|
+ <span>任务{{ index + 1 }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="part">
|
|
|
<div class="title">选择优化的部分：</div>
|
|
|
<div class="content">
|
|
|
- <div class="span" v-for="(item, index) in partArray" :key="index" :class="{active:part==item.name}" @click="checkPart(item.name)">
|
|
|
+ <div class="span" v-for="(item, index) in partArray" :key="index"
|
|
|
+ :class="{ active: part == item.name }" @click="checkPart(item.name)">
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <span class="check" :class="{isCheck: checkBool}" v-if="!checkArray.length && !part" @click="checkBool = !checkBool">选择优化内容</span>
|
|
|
- <span class="check" :class="{isCheck: checkBool}" @click="checkBool = !checkBool" v-else>
|
|
|
+ <span class="check" :class="{ isCheck: checkBool }" v-if="!checkArray.length && !part"
|
|
|
+ @click="checkBool = !checkBool">选择优化内容</span>
|
|
|
+ <span class="check" :class="{ isCheck: checkBool }" @click="checkBool = !checkBool" v-else>
|
|
|
<el-tooltip :content="taskName" placement="top" effect="dark">
|
|
|
<!-- content to trigger tooltip here -->
|
|
|
<span>{{ taskName }}</span>
|
|
|
</el-tooltip>
|
|
|
-
|
|
|
+
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="ai_body_input">
|
|
|
@@ -72,42 +74,108 @@ export default {
|
|
|
checkIsImg: checkIsImg,
|
|
|
checkArray: [],
|
|
|
course: [
|
|
|
- {title:'任务1'},
|
|
|
- {title:'任务2'},
|
|
|
- {title:'任务3'}
|
|
|
+ { title: '任务1' },
|
|
|
+ { title: '任务2' },
|
|
|
+ { title: '任务3' }
|
|
|
],
|
|
|
- partArray: [{name: '全部内容'},{name:'任务设计'},{name:'评价设计'}],
|
|
|
- part:'',
|
|
|
- checkBool:false,
|
|
|
+ partArray: [{ name: '全部内容' }, { name: '任务设计' }, { name: '评价设计' }],
|
|
|
+ part: '',
|
|
|
+ checkBool: false,
|
|
|
+ loading: false
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
addContent() {
|
|
|
- if(this.courseText){
|
|
|
- this.array.push({text: this.courseText, role: 2})
|
|
|
- this.array.push({text: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', role: 1})
|
|
|
- this.courseText = ''
|
|
|
+ if (this.courseText) {
|
|
|
+ this.loading = true
|
|
|
+ this.array.push({ text: this.courseText, role: 2 })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.loading = false
|
|
|
+ if (this.courseText == '请告诉我任务四该具体如何实施？') {
|
|
|
+ this.array.push({
|
|
|
+ text: `任务四：设计保温杯的初步方案
|
|
|
+
|
|
|
+教学目标：
|
|
|
+•学会应用热传递原理设计保温杯。
|
|
|
+•掌握基本的设计思维和创新方法。
|
|
|
+•理解材料选择对保温效果的影响。
|
|
|
+
|
|
|
+教学过程：
|
|
|
+1.复习：回顾热传递的基本原理和不同材料的导热性能。
|
|
|
+2.需求分析：讨论保温杯的使用场景和功能需求，如保温时间、容量、便携性等。
|
|
|
+3.设计指导：教师介绍设计原则和考虑因素，如材料的导热性能、结构设计、成本和环保等。
|
|
|
+4.创意发散：学生团队进行头脑风暴，提出多种设计方案，并选出最可行的方案。
|
|
|
+5.方案绘制：学生绘制保温杯的设计图，包括尺寸、形状、结构和所用材料。
|
|
|
+
|
|
|
+师生研讨：
|
|
|
+•分享各组的设计方案，讨论设计的创新点和实用性。
|
|
|
+•教师提供专业意见和建议，帮助学生完善设计方案。
|
|
|
+•讨论如何将设计方案转化为实际操作的步骤。
|
|
|
+
|
|
|
+拓展：
|
|
|
+•学生研究市场上不同类型保温杯的设计和功能。
|
|
|
+•分析保温杯的改进空间和潜在的创新点。
|
|
|
+
|
|
|
+学生任务单：
|
|
|
+•列出保温杯的功能需求和设计目标。
|
|
|
+•绘制保温杯的设计方案图，并标注所用材料和尺寸。
|
|
|
+•简述所选材料的导热性能和对保温效果的影响。
|
|
|
+
|
|
|
+知识点练习：
|
|
|
+1.为什么保温杯通常使用不锈钢或陶瓷作为内胆材料？
|
|
|
+2.描述一个创新的保温杯设计方案，并解释其工作原理。
|
|
|
+3.讨论在设计保温杯时需要考虑的环境因素。
|
|
|
+
|
|
|
+答案：
|
|
|
+1.保温杯通常使用不锈钢或陶瓷作为内胆材料，因为这些材料是热的不良导体，可以有效减缓热量的散失。
|
|
|
+2.一个创新的保温杯设计方案可能是采用多层结构，内层为不锈钢，中间层为真空隔热层，外层为塑料保护层。这种设计可以有效隔绝外界温度对热水温度的影响。
|
|
|
+在设计保温杯时，需要考虑的环境因素包括材料的可回收性、生产过程中的能源消耗和废弃物处理等。`, role: 2
|
|
|
+ })
|
|
|
+ }else if(this.courseText == '请你重新设计该任务，我没有感温粉末。'){
|
|
|
+ this.array.push({text:`任务一：探究热的传递方式
|
|
|
+
|
|
|
+任务名： 观察热在水中的传递
|
|
|
+
|
|
|
+任务描述：
|
|
|
+同学们，今天我们将通过一个有趣的实验来探究热是如何在水中传递的。你将需要加热水并观察温度是如何分布的。请准备好实验器材，并按照安全指南进行操作。在实验过程中，请注意观察热水和冷水之间的相互作用，以及水温是如何随时间和空间变化的。你将需要记录你的观察结果，并思考热是如何从一个地方传递到另一个地方的。
|
|
|
+
|
|
|
+工具名字： 电子白板
|
|
|
+
|
|
|
+工具指引：
|
|
|
+使用电子白板工具来绘制你的实验设置和观察到的热传递过程。你可以使用电子白板的绘图功能来创建一个温度分布图，展示热水和冷水相遇时的情况。同时，你可以用它来记录实验步骤和关键观察点，以便于你和同学们进行讨论和分享。
|
|
|
+
|
|
|
+评价维度：
|
|
|
+•实验观察和记录：学生应该能够准确地记录实验过程中的观察结果，包括水温变化和热传递的现象。
|
|
|
+•数据分析和解释：学生应该能够分析实验数据，解释热在水中的传递方式，并能够用自己的话描述热对流的原理。
|
|
|
+•实验报告撰写：学生应该能够撰写一份清晰的实验报告，包括实验目的、方法、结果和结论，以及对实验过程的反思。`,role: 1})
|
|
|
+ this.$emit('setUnitJson')
|
|
|
+ } else {
|
|
|
+ this.array.push({ text: '请输入正确的文案', role: 1 })
|
|
|
+ }
|
|
|
+ // this.array.push({text: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', role: 1})
|
|
|
+ this.courseText = ''
|
|
|
+ }, 2000);
|
|
|
}
|
|
|
},
|
|
|
- addTask(index){
|
|
|
- if(this.checkArray.indexOf(index) !== -1){
|
|
|
- this.checkArray.splice(this.checkArray.indexOf(index),1)
|
|
|
- }else{
|
|
|
+ addTask(index) {
|
|
|
+ if (this.checkArray.indexOf(index) !== -1) {
|
|
|
+ this.checkArray.splice(this.checkArray.indexOf(index), 1)
|
|
|
+ } else {
|
|
|
this.checkArray.push(index)
|
|
|
}
|
|
|
console.log(index);
|
|
|
},
|
|
|
- addAllTask(){
|
|
|
- if(this.checkArray.length === this.course.length){
|
|
|
+ addAllTask() {
|
|
|
+ if (this.checkArray.length === this.course.length) {
|
|
|
this.checkArray = []
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.checkArray = []
|
|
|
- this.course.forEach((item,index)=>{
|
|
|
- this.checkArray.push(index)
|
|
|
+ this.course.forEach((item, index) => {
|
|
|
+ this.checkArray.push(index)
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- checkPart(name){
|
|
|
+ checkPart(name) {
|
|
|
this.part = name
|
|
|
}
|
|
|
},
|
|
|
@@ -117,16 +185,16 @@ export default {
|
|
|
},
|
|
|
taskName() {
|
|
|
let task = ''
|
|
|
- if(this.checkArray.length){
|
|
|
+ if (this.checkArray.length) {
|
|
|
task = '任务'
|
|
|
- this.checkArray = this.checkArray.sort((a,b) => a-b)
|
|
|
+ this.checkArray = this.checkArray.sort((a, b) => a - b)
|
|
|
let a = JSON.parse(JSON.stringify(this.checkArray))
|
|
|
for (let index = 0; index < a.length; index++) {
|
|
|
a[index]++;
|
|
|
}
|
|
|
task += a.join('/')
|
|
|
}
|
|
|
- return task + ' ' + this.part
|
|
|
+ return task + ' ' + this.part
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
@@ -201,7 +269,7 @@ export default {
|
|
|
right: 13px;
|
|
|
}
|
|
|
|
|
|
-.ai_body_dialog{
|
|
|
+.ai_body_dialog {
|
|
|
padding: 10px 0;
|
|
|
box-sizing: border-box;
|
|
|
height: calc(100% - 180px);
|
|
|
@@ -210,37 +278,38 @@ export default {
|
|
|
}
|
|
|
|
|
|
|
|
|
-.dialog_content{
|
|
|
+.dialog_content {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
}
|
|
|
|
|
|
-.dialog_content + .dialog_content{
|
|
|
+.dialog_content+.dialog_content {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
-.dialog_content.right{
|
|
|
+.dialog_content.right {
|
|
|
flex-direction: row-reverse;
|
|
|
}
|
|
|
|
|
|
-.dialog_content.right .role{
|
|
|
+.dialog_content.right .role {
|
|
|
margin-right: 0;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
-.dialog_content .role{
|
|
|
+.dialog_content .role {
|
|
|
min-width: 30px;
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
margin-right: 10px;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
-.dialog_content .role > img{
|
|
|
+
|
|
|
+.dialog_content .role>img {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
-.dialog_content .content{
|
|
|
+.dialog_content .content {
|
|
|
padding: 5px;
|
|
|
border-radius: 5px;
|
|
|
width: 100%;
|
|
|
@@ -251,17 +320,17 @@ export default {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-.dialog_content .content2{
|
|
|
+.dialog_content .content2 {
|
|
|
background: #3681fc;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
|
|
|
-.ai_body_select{
|
|
|
+.ai_body_select {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
-.ai_body_select > .check{
|
|
|
+.ai_body_select>.check {
|
|
|
background: #e7e7e7;
|
|
|
display: flex;
|
|
|
width: fit-content;
|
|
|
@@ -277,7 +346,7 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
-.ai_body_select > .check::before{
|
|
|
+.ai_body_select>.check::before {
|
|
|
content: '';
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
@@ -287,7 +356,7 @@ export default {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
-.ai_body_select > .check::after{
|
|
|
+.ai_body_select>.check::after {
|
|
|
content: '';
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
@@ -297,7 +366,7 @@ export default {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
-.ai_body_select > .isCheck{
|
|
|
+.ai_body_select>.isCheck {
|
|
|
background: #0061FF;
|
|
|
display: flex;
|
|
|
width: fit-content;
|
|
|
@@ -315,7 +384,7 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.ai_body_select > .isCheck > span{
|
|
|
+.ai_body_select>.isCheck>span {
|
|
|
width: calc(100% - 40px);
|
|
|
display: block;
|
|
|
overflow: hidden;
|
|
|
@@ -323,7 +392,7 @@ export default {
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
-.ai_body_select > .isCheck::before{
|
|
|
+.ai_body_select>.isCheck::before {
|
|
|
content: '';
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
@@ -333,7 +402,7 @@ export default {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
-.ai_body_select > .isCheck::after{
|
|
|
+.ai_body_select>.isCheck::after {
|
|
|
content: '';
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
@@ -344,7 +413,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
|
|
|
-.ai_body_select > .checkBox{
|
|
|
+.ai_body_select>.checkBox {
|
|
|
position: absolute;
|
|
|
bottom: 40px;
|
|
|
border: 1px solid #E0EAFB;
|
|
|
@@ -356,58 +425,63 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.ai_body_select > .checkBox > .task > .title,
|
|
|
-.ai_body_select > .checkBox > .part > .title{
|
|
|
+.ai_body_select>.checkBox>.task>.title,
|
|
|
+.ai_body_select>.checkBox>.part>.title {
|
|
|
font-size: 14px;
|
|
|
font-weight: 700;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
-.ai_body_select > .checkBox > .task{
|
|
|
+.ai_body_select>.checkBox>.task {
|
|
|
height: calc(100% - 60px);
|
|
|
}
|
|
|
|
|
|
-.ai_body_select > .checkBox > .part{}
|
|
|
+.ai_body_select>.checkBox>.part {}
|
|
|
|
|
|
-.ai_body_select > .checkBox > .task > .content{
|
|
|
+.ai_body_select>.checkBox>.task>.content {
|
|
|
height: calc(100% - 40px);
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
-.ai_body_select > .checkBox > .task > .content > .span + .span{
|
|
|
+.ai_body_select>.checkBox>.task>.content>.span+.span {
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
-.ai_body_select > .checkBox > .task > .content > .span{
|
|
|
+
|
|
|
+.ai_body_select>.checkBox>.task>.content>.span {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 14px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
-.ai_body_select > .checkBox > .task > .content > .span > .check{
|
|
|
+
|
|
|
+.ai_body_select>.checkBox>.task>.content>.span>.check {
|
|
|
width: 13px;
|
|
|
height: 13px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
-.ai_body_select > .checkBox > .task > .content > .span > .check > img{
|
|
|
+
|
|
|
+.ai_body_select>.checkBox>.task>.content>.span>.check>img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
-.ai_body_select > .checkBox > .part > .content{
|
|
|
+.ai_body_select>.checkBox>.part>.content {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 14px;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
-.ai_body_select > .checkBox > .part > .content > .span{
|
|
|
+
|
|
|
+.ai_body_select>.checkBox>.part>.content>.span {
|
|
|
padding: 3px 6px;
|
|
|
border: 1px solid #E0EAFB;
|
|
|
border-radius: 40px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
-.ai_body_select > .checkBox > .part > .content > .span.active{
|
|
|
+
|
|
|
+.ai_body_select>.checkBox>.part>.content>.span.active {
|
|
|
color: #0061ff;
|
|
|
border-color: #0061ff;
|
|
|
}
|
