pbl-teacher-table/src/components/pages/aiAddCourse/aiBox.vue

<template>
    <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="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>
        </div>
        <div class="ai_body_select">
            <div class="checkBox" v-if="checkBool">
                <div class="task">
                    <div class="title">选择需要优化的任务：</div>
                    <div class="content">
                        <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="check">
                                <img :src="checkImg" alt="" v-if="checkArray.indexOf(index) === -1">
                                <img :src="checkIsImg" alt="" v-else>
                            </div>
                            <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)">
                            {{ 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>
                <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">
            <textarea rows="5" class="binfo_input binfo_textarea" cols v-model="courseText" placeholder="在此输入您想了解的内容"
                style="padding-right: 86px;"></textarea>
            <div class="c_pub_button_confirm" @click="addContent">发送</div>
        </div>
    </div>
</template>

<script>
import checkImg from '../../../assets/icon/sourceFile/check.png'
import checkIsImg from '../../../assets/icon/sourceFile/check_is.png'

export default {
    props: {
        unitJson: {
            type: Array,
        },
    },
    data() {
        return {
            array: [
                { text: '你好,有说么可以帮你', role: 1 },

            ],
            courseText: '',
            checkImg: checkImg,
            checkIsImg: checkIsImg,
            checkArray: [],
            course: [
                { title: '任务1' },
                { title: '任务2' },
                { title: '任务3' }
            ],
            partArray: [{ name: '全部内容' }, { name: '任务设计' }, { name: '评价设计' }],
            part: '',
            checkBool: false,
            loading: false
        }
    },
    watch: {
        unitJson: {
            immediate: true,
            deep: true,
            handler(newValue, oldValue) {
               this.course = this.unitJson[0].chapterInfo[0].taskJson
            }
        },
    },
    methods: {
        addContent() {
            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: 1
                        })
                    }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 = ''
                }, 5000);
            }
        },
        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) {
                this.checkArray = []
            } else {
                this.checkArray = []
                this.course.forEach((item, index) => {
                    this.checkArray.push(index)
                })
            }
        },
        checkPart(name) {
            this.part = name
        }
    },
    computed: {
        courseTextLength() {
            return this.courseText.length
        },
        taskName() {
            let task = ''
            if (this.checkArray.length) {
                task = '任务'
                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
        }
    },
}
</script>

<style scoped>
.ai_body {
    height: 100%;
    width: calc(100% - 20px);
    margin: 0 auto;
}

.binfo_input {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    display: block;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    resize: none;
    font-family: "Microsoft YaHei";
    min-height: 48px;
    /* border: 1px solid #3682fc00; */
    border: 1.5px solid #cad1dc;
}

.binfo_textarea {
    border: 1.5px solid #cad1dc;
    font-size: 14px;
    resize: none;
    /* background: #f6f6f6; */
    font-family: "Microsoft YaHei";
}

.binfo_textarea::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.1);
}

/*定义滑块 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgba(0, 0, 0, 0.1);
}

.binfo_input:focus-visible {
    border: 1.5px solid #3681fc !important;
}

.ai_body_input {
    position: relative;
}

.c_pub_button_confirm {
    position: absolute;
    bottom: 13px;
    right: 13px;
}

.ai_body_dialog {
    padding: 10px 0;
    box-sizing: border-box;
    height: calc(100% - 180px);
    overflow: auto;
    margin-bottom: 10px;
}


.dialog_content {
    width: 100%;
    display: flex;
}

.dialog_content+.dialog_content {
    margin-top: 20px;
}

.dialog_content.right {
    flex-direction: row-reverse;
}

.dialog_content.right .role {
    margin-right: 0;
    margin-left: 10px;
}

.dialog_content .role {
    min-width: 30px;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 50%;
}

.dialog_content .role>img {
    height: 100%;
    width: 100%;
}

.dialog_content .content {
    padding: 5px;
    border-radius: 5px;
    width: 100%;
    word-break: break-word;
    box-sizing: border-box;
    white-space: pre-line;
    max-width: 100%;
    overflow: hidden;
}

.dialog_content .content2 {
    background: #3681fc;
    color: #fff;
}


.ai_body_select {
    position: relative;
}

.ai_body_select>.check {
    background: #e7e7e7;
    display: flex;
    width: fit-content;
    padding: 0 10px;
    height: 30px;
    border-radius: 21px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    color: #0061FF;
    font-weight: 700;
    margin: 10px 0;
    cursor: pointer;
}

.ai_body_select>.check::before {
    content: '';
    width: 15px;
    height: 15px;
    display: block;
    background-image: url('../../../assets/icon/course/aiPart.png');
    background-size: 100% 100%;
    margin-right: 5px;
}

.ai_body_select>.check::after {
    content: '';
    width: 15px;
    height: 15px;
    display: block;
    background-image: url('../../../assets/icon/course/aiPart_arrow.png');
    background-size: 100% 100%;
    margin-right: 5px;
}

.ai_body_select>.isCheck {
    background: #0061FF;
    display: flex;
    width: fit-content;
    padding: 0 10px;
    height: 30px;
    border-radius: 21px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    margin: 10px 0;
    cursor: pointer;
    max-width: 100%;
    box-sizing: border-box;
}

.ai_body_select>.isCheck>span {
    width: calc(100% - 40px);
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ai_body_select>.isCheck::before {
    content: '';
    width: 15px;
    height: 15px;
    display: block;
    background-image: url('../../../assets/icon/course/aiPart_active.png');
    background-size: 100% 100%;
    margin-right: 5px;
}

.ai_body_select>.isCheck::after {
    content: '';
    width: 15px;
    height: 15px;
    display: block;
    background-image: url('../../../assets/icon/course/aiPart_arrow_active.png');
    background-size: 100% 100%;
    margin-right: 5px;
}


.ai_body_select>.checkBox {
    position: absolute;
    bottom: 40px;
    border: 1px solid #E0EAFB;
    width: 100%;
    height: 300px;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
}

.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 {
    height: calc(100% - 60px);
}

.ai_body_select>.checkBox>.part {}

.ai_body_select>.checkBox>.task>.content {
    height: calc(100% - 40px);
    overflow: auto;
}

.ai_body_select>.checkBox>.task>.content>.span+.span {
    margin-top: 5px;
}

.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 {
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    margin-right: 5px;
}

.ai_body_select>.checkBox>.task>.content>.span>.check>img {
    width: 100%;
    height: 100%;
}

.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 {
    padding: 3px 6px;
    border: 1px solid #E0EAFB;
    border-radius: 40px;
    cursor: pointer;
}

.ai_body_select>.checkBox>.part>.content>.span.active {
    color: #0061ff;
    border-color: #0061ff;
}
</style>