|
|
@@ -1,87 +1,157 @@
|
|
|
<template>
|
|
|
- <div class="dialog">
|
|
|
- <div v-show="cardType == 0">
|
|
|
- <div class="d_top" ref="chatRef">
|
|
|
- <div class="d_t_chat" v-for="(item,index) in chatList" :key="index">
|
|
|
- <div class="d_t_c_user" v-if="item.role =='user'">
|
|
|
- <div class="d_t_c_u_left">
|
|
|
- <div class="d_t_c_u_l_content">{{item.content}}</div>
|
|
|
- <div class="d_t_c_u_l_time">{{item.time}}</div>
|
|
|
- </div>
|
|
|
- <div class="d_t_c_u_right">
|
|
|
- <span>我</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="dialog">
|
|
|
+ <div v-show="cardType == 0">
|
|
|
+ <div class="d_top" ref="chatRef">
|
|
|
+ <div class="d_t_chat" v-for="(item, index) in chatList" :key="index">
|
|
|
+ <div class="d_t_c_user" v-if="item.content">
|
|
|
+ <div class="d_t_c_u_left">
|
|
|
+ <div class="d_t_c_u_l_content">{{ item.content }}</div>
|
|
|
+ <div class="d_t_c_u_l_time">{{ item.createtime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="d_t_c_u_right">
|
|
|
+ <span>我</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="d_t_c_ai" v-if="item.role =='ai'">
|
|
|
- <div class="d_t_c_a_left">
|
|
|
- <span>Ai</span>
|
|
|
- </div>
|
|
|
- <div class="d_t_c_a_right">
|
|
|
- <div class="d_t_c_a_r_content" v-loading="loading && index==chatList.length-1">{{ item.content }}</div>
|
|
|
- <div class="d_t_c_a_r_time">{{item.time}}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="d_bottom">
|
|
|
- <div class="d_b_btnArea">
|
|
|
- <div class="d_b_ba-item" @click.stop="choiceRole()">
|
|
|
- <img style="width: 20px;" src="../../../assets/icon/course/role.png" alt="">
|
|
|
- 选择角色
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="d_b_inputArea">
|
|
|
- <!-- <div class="d_b_tape" @click="goTape()"></div> -->
|
|
|
- <div class="d_b_input">
|
|
|
- <el-input :disabled="loading" @keyup.enter.native="send()" class="d_b_i_left" v-model="text"></el-input>
|
|
|
- <!-- <div class="d_b_i_right" @click="sendFile()">
|
|
|
+ <div class="d_t_c_ai">
|
|
|
+ <div class="d_t_c_a_left">
|
|
|
+ <el-avatar v-if="item.filename" :src="item.filename"></el-avatar>
|
|
|
+ <span v-else>Ai</span>
|
|
|
+ </div>
|
|
|
+ <div class="d_t_c_a_right">
|
|
|
+ <div
|
|
|
+ class="d_t_c_a_r_content"
|
|
|
+ v-loading="item.loading"
|
|
|
+ v-html="item.aiContent"
|
|
|
+ ></div>
|
|
|
+ <div class="d_t_c_a_r_time">{{ item.createtime }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="d_bottom">
|
|
|
+ <div class="d_b_btnArea">
|
|
|
+ <div class="d_b_ba-item" @click.stop="choiceRole()">
|
|
|
+ <img
|
|
|
+ style="width: 20px;"
|
|
|
+ src="../../../assets/icon/course/role.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ 选择角色
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="d_b_inputArea">
|
|
|
+ <!-- <div class="d_b_tape" @click="goTape()"></div> -->
|
|
|
+ <div class="d_b_input">
|
|
|
+ <el-input
|
|
|
+ :disabled="loading || chatLoading"
|
|
|
+ v-loading="loading || chatLoading"
|
|
|
+ @keyup.enter.native="send()"
|
|
|
+ class="d_b_i_left"
|
|
|
+ v-model="text"
|
|
|
+ ></el-input>
|
|
|
+ <!-- <div class="d_b_i_right" @click="sendFile()">
|
|
|
<span></span>
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
- <div class="d_b_btn" @click="send()">
|
|
|
- <span></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="" v-show="cardType == 1">
|
|
|
- <div class="choiceTop">
|
|
|
- <div class="choiceRoleHeader">
|
|
|
- <div>切换角色：</div>
|
|
|
- <span>您希望以下哪个角色回答您的问题，请选择：</span>
|
|
|
- </div>
|
|
|
- <div class="choiceSelect">
|
|
|
- <el-button class="option" :style="{background:sortOption == 0?'#36A9FC':'',color:sortOption==0?'#fff':''}" @click="optBtn(0)" plain>我的</el-button>
|
|
|
- <el-button class="option" :style="{background:sortOption == 1?'#36A9FC':'',color:sortOption==1?'#fff':''}" @click="optBtn(1)" plain>社区</el-button>
|
|
|
- </div>
|
|
|
- <div class="characterBlock" v-if="sortOption==0" v-for="(item,index) in roleList" :key="item.id" @click.stop="roleType=index">
|
|
|
- <div class="imgLeft">
|
|
|
- <div class="img">
|
|
|
- <img style="width: 100%;height: 100%;" :src="item.avatar">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="txtRight">
|
|
|
- <div class="bir">{{ item.bir }}</div>
|
|
|
- <div :style="{color: '#fff',display: roleType ==index?'block':'none' }">已选择</div>
|
|
|
- <!-- <span></span> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="characterBlock" v-if="sortOption==1" v-for="(item,index) in roleList2" :key="item.id" @click.stop="roleType=index">
|
|
|
- <div class="imgLeft">
|
|
|
- <div class="img">
|
|
|
- <img style="width: 100%;height: 100%;" :src="item.avatar">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="txtRight">
|
|
|
- <div class="bir">{{ item.bir }}</div>
|
|
|
- <div :style="{color: '#fff',display: roleType ==index?'block':'none' }">已选择</div>
|
|
|
- <!-- <span></span> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="characterBlock" @click="addCharacter">
|
|
|
+ </div>
|
|
|
+ <div class="d_b_btn" @click="send()">
|
|
|
+ <span></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="" v-show="cardType == 1">
|
|
|
+ <div class="choiceTop">
|
|
|
+ <div class="choiceRoleHeader">
|
|
|
+ <div>切换角色：</div>
|
|
|
+ <span>您希望以下哪个角色回答您的问题，请选择：</span>
|
|
|
+ </div>
|
|
|
+ <div class="choiceSelect">
|
|
|
+ <el-button
|
|
|
+ class="option"
|
|
|
+ :style="{
|
|
|
+ background: sortOption == 0 ? '#36A9FC' : '',
|
|
|
+ color: sortOption == 0 ? '#fff' : ''
|
|
|
+ }"
|
|
|
+ @click="optBtn(0)"
|
|
|
+ plain
|
|
|
+ >我的</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ class="option"
|
|
|
+ :style="{
|
|
|
+ background: sortOption == 1 ? '#36A9FC' : '',
|
|
|
+ color: sortOption == 1 ? '#fff' : ''
|
|
|
+ }"
|
|
|
+ @click="optBtn(1)"
|
|
|
+ plain
|
|
|
+ >社区</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="characterBlock"
|
|
|
+ v-if="sortOption == 0"
|
|
|
+ v-for="(item, index) in roleList"
|
|
|
+ :key="item.id"
|
|
|
+ @click.stop="choseRole(item)"
|
|
|
+ >
|
|
|
+ <div class="imgLeft">
|
|
|
+ <div class="img">
|
|
|
+ <img style="width: 100%;height: 100%;" :src="item.avatar" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="txtRight">
|
|
|
+ <div class="bir">{{ item.assistantName }}</div>
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ color: '#fff',
|
|
|
+ display:
|
|
|
+ choseRoleItem.assistant_id == item.assistant_id
|
|
|
+ ? 'block'
|
|
|
+ : 'none'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ 已选择
|
|
|
+ </div>
|
|
|
+ <!-- <span></span> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="characterBlock"
|
|
|
+ v-if="sortOption == 1"
|
|
|
+ v-for="(item, index) in roleList2"
|
|
|
+ :key="item.id"
|
|
|
+ @click.stop="choseRole(item)"
|
|
|
+ >
|
|
|
+ <div class="imgLeft">
|
|
|
+ <div class="img">
|
|
|
+ <img
|
|
|
+ style="width: 100%;height: 100%;"
|
|
|
+ :src="
|
|
|
+ item.headUrl
|
|
|
+ ? item.headUrl
|
|
|
+ : require('../../../assets/icon/course/ai.png')
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="txtRight">
|
|
|
+ <div class="bir">{{ item.assistantName }}</div>
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ color: '#fff',
|
|
|
+ display:
|
|
|
+ choseRoleItem.assistant_id == item.assistant_id
|
|
|
+ ? 'block'
|
|
|
+ : 'none'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ 已选择
|
|
|
+ </div>
|
|
|
+ <!-- <span></span> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="characterBlock" @click="addCharacter">
|
|
|
<div class="imgLeft">
|
|
|
<div class="img2">
|
|
|
<img style="width: 100%;height: 100%;" src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/basil_add-outline1715564539170.png">
|
|
|
@@ -92,7 +162,7 @@
|
|
|
</div>
|
|
|
</div> -->
|
|
|
|
|
|
- <!-- <div class="filterSubjects">
|
|
|
+ <!-- <div class="filterSubjects">
|
|
|
<div class="fs_title">筛选科目</div>
|
|
|
<div class="fs_box">
|
|
|
<div :class="['fs_b_item',subjectsType==index?'fs_b_itemActive':'']" v-for="(item,index) in subjectsList" :key="index" @click="subjectsType = index">{{ item }}</div>
|
|
|
@@ -108,702 +178,1072 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
- <div class="choiceBottom">
|
|
|
- <el-button class="cb_btn" size="mini" @click="noChangeRole()">取消</el-button>
|
|
|
- <el-button class="cb_btn" size="mini" type="primary" @click="changeRole()">确定</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="choiceBottom">
|
|
|
+ <el-button class="cb_btn" size="mini" @click="noChangeRole()"
|
|
|
+ >取消</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ class="cb_btn"
|
|
|
+ size="mini"
|
|
|
+ type="primary"
|
|
|
+ @click="changeRole()"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data(){
|
|
|
- return{
|
|
|
- cardType:0,//0-对话 1-选角色
|
|
|
- text:"",
|
|
|
- sortOption: 0, //切换角色 0我的 1 社区
|
|
|
- subjectsList:['语文',"数学","英语","科学","信息","历史","地理","政治","生物","化学","物理","其他"],
|
|
|
- subjectsType:-1,
|
|
|
- rightSubjects:-1,
|
|
|
- roleType:-1,
|
|
|
- rightRole:-1,
|
|
|
- loading:false,
|
|
|
- roleList2:[
|
|
|
- {id:3,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"莱昂纳多·达芬奇",bir:'我是莱昂纳多·达芬奇'},
|
|
|
- {id:4,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"列文虎克",bir:'我是列文虎克'},
|
|
|
- {id:5,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·瓦特",bir:'我是詹姆斯·瓦特'},
|
|
|
- {id:6,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"瑞秋·卡森",bir:'我是瑞秋·卡森'},
|
|
|
- {id:7,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"尼古拉·特斯拉",bir:'我是尼古拉·特斯拉'},
|
|
|
- {id:8,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"约翰·穆尔",bir:'我是约翰·穆尔'}
|
|
|
- ],
|
|
|
- roleList:[
|
|
|
- {id:0,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"爱因斯坦",bir:'我是爱因斯坦'},
|
|
|
- {id:1,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"居里夫人",bir:'我是居里夫人'},
|
|
|
- {id:2,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"达尔文",bir:'我是达尔文'},
|
|
|
- // {id:3,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"莱昂纳多·达芬奇"},
|
|
|
- // {id:4,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"列文虎克"},
|
|
|
- // {id:5,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·瓦特"},
|
|
|
- // {id:6,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"瑞秋·卡森"},
|
|
|
- // {id:7,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"尼古拉·特斯拉"},
|
|
|
- // {id:8,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"约翰·穆尔"},
|
|
|
- // {id:9,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"艾萨克·牛顿"},
|
|
|
- // {id:10,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"伽利略"},
|
|
|
- // {id:11,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"格雷戈尔·孟德尔"},
|
|
|
- // {id:12,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"张衡"},
|
|
|
- // {id:13,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"李时珍"},
|
|
|
- // {id:14,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"钱学森"},
|
|
|
- // {id:15,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"阿基米德"},
|
|
|
- // {id:16,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"霍金"},
|
|
|
- // {id:17,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"蔡伦"},
|
|
|
- // {id:18,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·瓦特"},
|
|
|
- // {id:19,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"路易·巴斯德"},
|
|
|
- // {id:20,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"阿尔弗雷德·诺贝尔"},
|
|
|
- // {id:21,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·麦克斯韦"},
|
|
|
- // {id:22,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"亚历山大·格拉汉姆·贝尔"},
|
|
|
- // {id:23,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"约翰内斯·开普勒"},
|
|
|
- // {id:24,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"安德烈·安培"},
|
|
|
- ],
|
|
|
- chatList:[
|
|
|
- {
|
|
|
- role:"ai",
|
|
|
- content:`您好，有什么可以帮助您的吗？`,
|
|
|
- time:new Date().toLocaleString().replace(/\//ig,'-')
|
|
|
- },
|
|
|
- ],
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // addCharacter(){
|
|
|
- // this.$message.info("点击了添加新角色")
|
|
|
- // },
|
|
|
- optBtn(val){
|
|
|
- this.sortOption=val
|
|
|
- },
|
|
|
- choiceRole(){
|
|
|
- if(this.loading)return this.$message.info("请稍等")
|
|
|
- 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=`想象一下，我们的家里如果有很多东西乱丢一团，找东西的时候会很麻烦对吧？而且如果不清理，家里会变得很脏，还可能招来小虫子。垃圾也是一样的，如果我们把所有的垃圾都扔在一起，不仅会污染环境，还会浪费很多可以再利用的资源。
|
|
|
-垃圾分类就是把不同类型的垃圾分开扔。比如，有的垃圾是可以再回收利用的，像纸张、塑料瓶、玻璃瓶等，这些如果分开收集，就可以送到特殊的地方去重新处理，变成新的东西再次使用。还有一些垃圾是厨余垃圾，比如剩饭剩菜，这种可以做成肥料帮助植物生长。而其他一些不能回收的垃圾，就需要另外处理，确保它们不会对环境造成伤害。
|
|
|
-通过垃圾分类，我们可以减少污染，节约资源，让我们的城市更干净，也保护了我们的地球。所以，学会正确的垃圾分类，是每个人都应该做的一件重要的事情哦！`
|
|
|
- break;
|
|
|
- case "玻璃是可回收垃圾吗？为什么？":
|
|
|
- aiContent=`是的，玻璃是可以回收的垃圾。因为玻璃可以被融化后重新制成新的玻璃制品，比如瓶子和罐子。这样做可以减少我们从自然中取材料来制造新玻璃，也可以减少垃圾的数量，保护我们的环境。所以，当我们用完玻璃制品后，应该把它们放到回收箱里，而不是扔到普通垃圾桶里。这样我们就可以帮助地球更健康。`
|
|
|
- break;
|
|
|
- }
|
|
|
- if(this.rightRole==1){
|
|
|
- switch(this.text){
|
|
|
- case "为什么要进行垃圾分类":
|
|
|
- aiContent=`
|
|
|
- 尊敬的小朋友们，今天我们要探讨一个非常重要的话题——为什么我们要进行垃圾分类。我是居里夫人，虽然我的主要研究领域是放射性元素，但我一直相信科学可以改善我们的生活环境和保护我们的地球。
|
|
|
-首先，我们要知道地球是我们共同的家，保护环境就是保护我们自己的家园。在我的研究生涯中，我发现了镭和钋这样的放射性元素，这些发现不仅推动了科学的进步，也让我们更加意识到科学研究与环境保护之间的联系。
|
|
|
-垃圾分类，简单来说，就是将垃圾分成几类，比如可回收物、有害垃圾、湿垃圾（厨余垃圾）和干垃圾。这样做的目的是让垃圾能够更有效地被回收和处理，减少对环境的污染。
|
|
|
-想象一下，如果我们把所有的垃圾都混在一起，那么回收和处理这些垃圾就会变得非常困难。有些有害垃圾可能会释放出有毒物质，污染土壤和水源，这对我们的健康是非常不利的。而且，混合的垃圾很难进行有效的资源回收，这意味着更多的资源会被浪费。
|
|
|
-通过垃圾分类，我们可以将可回收的材料如纸张、塑料、金属和玻璃分开收集，这些材料可以被再利用，制成新的产品。这不仅可以减少对自然资源的开采，还可以减少能源消耗和碳排放，帮助我们对抗全球变暖。
|
|
|
-此外，有害垃圾如废电池和废药品需要特殊处理，防止它们对环境造成伤害。通过正确分类，我们可以确保这些有害物质得到安全处理，保护我们的地球。
|
|
|
-我在研究放射性元素时，深刻体会到科学与环境之间的密切关系。每一次实验，我都尽可能地减少对环境的影响。这种对环境负责的态度，也是我们进行垃圾分类的原因之一。
|
|
|
-亲爱的小朋友们，通过垃圾分类，我们不仅可以保护环境，还可以学习到责任感和科学的方法。希望你们从小培养保护环境的意识，用实际行动为保护我们的地球贡献自己的力量。记住，每一个小小的行动，都是对未来的投资。
|
|
|
- `
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- // this.chatList.push({
|
|
|
- // role:"ai",
|
|
|
- // content:aiContent,//这里需要调用接口
|
|
|
- // time:new Date().toLocaleString().replace(/\//ig,'-')
|
|
|
- // })
|
|
|
- this.chatList[this.chatList.length - 1].content = aiContent;
|
|
|
- this.chatList[
|
|
|
- this.chatList.length - 1
|
|
|
- ].time = new Date().toLocaleString().replace(/\//gi, "-");
|
|
|
- this.loading = false;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
|
|
|
- });
|
|
|
- this.text = "";
|
|
|
-
|
|
|
- },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 = "";
|
|
|
- // // 元素滚动条触底
|
|
|
-
|
|
|
- },
|
|
|
- changeRole(){
|
|
|
- this.loading = true;
|
|
|
- this.cardType = 0;
|
|
|
- this.rightSubjects = this.subjectsType;
|
|
|
- this.rightRole = this.roleType;
|
|
|
- this.chatList = [];
|
|
|
- this.chatList.push({
|
|
|
- role:"ai",
|
|
|
- content:"",//这里需要调用接口
|
|
|
- time:new Date().toLocaleString().replace(/\//ig,'-')
|
|
|
- })
|
|
|
- setTimeout(()=>{
|
|
|
- let aiContent = "你好";
|
|
|
- switch(this.rightRole){
|
|
|
- case 0:
|
|
|
- aiContent = "你好，我是爱因斯坦，相对论的提出者，相信科学的力量可以揭示宇宙的奥秘。"
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- aiContent = "你好，我是居里夫人，放射性研究的先驱，第一位获得两次诺贝尔奖的女性。"
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- aiContent = "你好，我是查尔斯·达尔文，进化论的创立者，相信物种通过自然选择不断进化。"
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- aiContent = "你好，我是达芬奇，文艺复兴的象征，艺术与科学的多面手。"
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- aiContent = "你好，我是列文虎克，通过我的简单显微镜，开启了微生物学的大门。"
|
|
|
- break;
|
|
|
- case 5:
|
|
|
- aiContent = "你好，我是詹姆斯·瓦特，改良了蒸汽机，为工业革命提供了动力。"
|
|
|
- break;
|
|
|
- case 6:
|
|
|
- aiContent = "你好，我是瑞秋·卡森，环保运动的先驱，通过《寂静的春天》提醒世界关注环境保护。"
|
|
|
- break;
|
|
|
- case 7:
|
|
|
- aiContent = "你好，我是特斯拉，交流电的推广者，致力于无线电和电力传输的研究。"
|
|
|
- break;
|
|
|
- case 8:
|
|
|
- aiContent = "你好，我是约翰·穆尔，自然保护的倡导者，努力保护美国的森林和野生地区。"
|
|
|
- break;
|
|
|
- case 9:
|
|
|
- aiContent = "你好，我是牛顿，万有引力和三大运动定律的发现者，为现代物理学奠定了基础。"
|
|
|
- break;
|
|
|
- case 10:
|
|
|
- aiContent = "你好，我是伽利略，通过望远镜观测支持了日心说，被誉为现代观测天文学之父。"
|
|
|
- break;
|
|
|
- case 11:
|
|
|
- aiContent = "你好，我是孟德尔，遗传学的奠基人，通过豌豆实验发现了遗传的基本规律。"
|
|
|
- break;
|
|
|
- case 12:
|
|
|
- aiContent = "你好，我是张衡，东汉杰出的天文学家和科学家，发明了地动仪。"
|
|
|
- break;
|
|
|
- case 13:
|
|
|
- aiContent = "你好，我是李时珍，中国古代著名的医学家，编纂了《本草纲目》。"
|
|
|
- break;
|
|
|
- case 14:
|
|
|
- aiContent = "你好，我是钱学森，现代火箭科学的奠基人之一，被誉为“中国航天之父”。"
|
|
|
- break;
|
|
|
- case 15:
|
|
|
- aiContent = "你好，我是阿基米德，古希腊的数学家和物理学家，提出了浮力原理。"
|
|
|
- break;
|
|
|
- case 16:
|
|
|
- aiContent = "你好，我是斯蒂芬·霍金，研究黑洞和宇宙起源，致力于解释宇宙的奥秘。"
|
|
|
- break;
|
|
|
- case 17:
|
|
|
- aiContent = "你好，我是蔡伦，东汉时期改进了造纸术，使纸张更加广泛地应用于社会。"
|
|
|
- break;
|
|
|
- case 18:
|
|
|
- aiContent = "你好，我是詹姆斯·瓦特，改良了蒸汽机，为工业革命提供了动力。"
|
|
|
- break;
|
|
|
- case 19:
|
|
|
- aiContent = "你好，我是路易·巴斯德，微生物学的奠基人，发现了疫苗和巴斯德消毒法。"
|
|
|
- break;
|
|
|
- case 20:
|
|
|
- aiContent = "你好，我是诺贝尔，发明了炸药，为和平与科学的贡献设立了诺贝尔奖。"
|
|
|
- break;
|
|
|
- case 21:
|
|
|
- aiContent = "你好，我是麦克斯韦，统一了电磁理论，提出了麦克斯韦方程组。"
|
|
|
- break;
|
|
|
- case 22:
|
|
|
- aiContent = "你好，我是贝尔，电话的发明者，致力于通信技术的发展和听力障碍人士的教育。"
|
|
|
- break;
|
|
|
- case 23:
|
|
|
- aiContent = "你好，我是开普勒，行星运动三大定律的发现者，为天文学和物理学的发展做出了重要贡献。"
|
|
|
- break;
|
|
|
- case 24:
|
|
|
- aiContent = "你好，我是安培，电磁学的先驱之一，提出了电流的磁效应。"
|
|
|
- break;
|
|
|
- }
|
|
|
- this.chatList[this.chatList.length - 1].content = aiContent;
|
|
|
- this.chatList[
|
|
|
- this.chatList.length - 1
|
|
|
- ].time = new Date().toLocaleString().replace(/\//gi, "-");
|
|
|
- this.loading = false;
|
|
|
- },2000)
|
|
|
-
|
|
|
- },
|
|
|
- noChangeRole(){
|
|
|
- this.cardType = 0;
|
|
|
- this.subjectsType = this.rightSubjects;
|
|
|
- this.roleType = this.rightRole;
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
+import MarkdownIt from "markdown-it";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ cardType: 0, //0-对话 1-选角色
|
|
|
+ userid: this.$route.query.userid,
|
|
|
+ courseId: this.$route.query.courseId,
|
|
|
+ org: this.$route.query.org,
|
|
|
+ choseRoleItem: {},
|
|
|
+ text: "",
|
|
|
+ sortOption: 0, //切换角色 0我的 1 社区
|
|
|
+ subjectsList: [
|
|
|
+ "语文",
|
|
|
+ "数学",
|
|
|
+ "英语",
|
|
|
+ "科学",
|
|
|
+ "信息",
|
|
|
+ "历史",
|
|
|
+ "地理",
|
|
|
+ "政治",
|
|
|
+ "生物",
|
|
|
+ "化学",
|
|
|
+ "物理",
|
|
|
+ "其他"
|
|
|
+ ],
|
|
|
+ subjectsType: -1,
|
|
|
+ rightSubjects: -1,
|
|
|
+ roleType: -1,
|
|
|
+ rightRole: -1,
|
|
|
+ loading: false,
|
|
|
+ chatLoading: false,
|
|
|
+ roleList2: [
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ avatar: require("../../../assets/icon/course/aiAvatar.png"),
|
|
|
+ name: "莱昂纳多·达芬奇",
|
|
|
+ bir: "我是莱昂纳多·达芬奇"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ avatar: require("../../../assets/icon/course/aiAvatar.png"),
|
|
|
+ name: "列文虎克",
|
|
|
+ bir: "我是列文虎克"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ avatar: require("../../../assets/icon/course/aiAvatar.png"),
|
|
|
+ name: "詹姆斯·瓦特",
|
|
|
+ bir: "我是詹姆斯·瓦特"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ avatar: require("../../../assets/icon/course/aiAvatar.png"),
|
|
|
+ name: "瑞秋·卡森",
|
|
|
+ bir: "我是瑞秋·卡森"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ avatar: require("../../../assets/icon/course/aiAvatar.png"),
|
|
|
+ name: "尼古拉·特斯拉",
|
|
|
+ bir: "我是尼古拉·特斯拉"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ avatar: require("../../../assets/icon/course/aiAvatar.png"),
|
|
|
+ name: "约翰·穆尔",
|
|
|
+ bir: "我是约翰·穆尔"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ roleList: [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ avatar: require("../../../assets/icon/course/aiAvatar.png"),
|
|
|
+ name: "爱因斯坦",
|
|
|
+ bir: "我是爱因斯坦"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ avatar: require("../../../assets/icon/course/aiAvatar.png"),
|
|
|
+ name: "居里夫人",
|
|
|
+ bir: "我是居里夫人"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ avatar: require("../../../assets/icon/course/aiAvatar.png"),
|
|
|
+ name: "达尔文",
|
|
|
+ bir: "我是达尔文"
|
|
|
+ }
|
|
|
+ // {id:3,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"莱昂纳多·达芬奇"},
|
|
|
+ // {id:4,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"列文虎克"},
|
|
|
+ // {id:5,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·瓦特"},
|
|
|
+ // {id:6,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"瑞秋·卡森"},
|
|
|
+ // {id:7,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"尼古拉·特斯拉"},
|
|
|
+ // {id:8,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"约翰·穆尔"},
|
|
|
+ // {id:9,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"艾萨克·牛顿"},
|
|
|
+ // {id:10,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"伽利略"},
|
|
|
+ // {id:11,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"格雷戈尔·孟德尔"},
|
|
|
+ // {id:12,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"张衡"},
|
|
|
+ // {id:13,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"李时珍"},
|
|
|
+ // {id:14,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"钱学森"},
|
|
|
+ // {id:15,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"阿基米德"},
|
|
|
+ // {id:16,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"霍金"},
|
|
|
+ // {id:17,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"蔡伦"},
|
|
|
+ // {id:18,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·瓦特"},
|
|
|
+ // {id:19,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"路易·巴斯德"},
|
|
|
+ // {id:20,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"阿尔弗雷德·诺贝尔"},
|
|
|
+ // {id:21,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"詹姆斯·麦克斯韦"},
|
|
|
+ // {id:22,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"亚历山大·格拉汉姆·贝尔"},
|
|
|
+ // {id:23,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"约翰内斯·开普勒"},
|
|
|
+ // {id:24,avatar:require("../../../assets/icon/course/aiAvatar.png"),name:"安德烈·安培"},
|
|
|
+ ],
|
|
|
+ chatList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // addCharacter(){
|
|
|
+ // this.$message.info("点击了添加新角色")
|
|
|
+ // },
|
|
|
+ optBtn(val) {
|
|
|
+ this.sortOption = val;
|
|
|
+ },
|
|
|
+ choiceRole() {
|
|
|
+ if (this.loading) return this.$message.info("请稍等");
|
|
|
+ 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(_text = this.text) {
|
|
|
+ if (this.loading || this.chatLoading) return this.$message.info("请稍等");
|
|
|
+ if (_text.trim().length == 0) return this.$message.info("请输入内容");
|
|
|
+ this.chatLoading = true;
|
|
|
+ if (this.choseRoleItem.assistant_id) {
|
|
|
+ let _uid = uuidv4();
|
|
|
+ let _item = this.choseRoleItem;
|
|
|
+ this.chatList.push({
|
|
|
+ loading: true,
|
|
|
+ role: "user",
|
|
|
+ content: `${_text}`,
|
|
|
+ uid: _uid,
|
|
|
+ AI: "AI",
|
|
|
+ aiContent: "",
|
|
|
+ oldContent: "",
|
|
|
+ isShowSynchronization: false,
|
|
|
+ filename: _item.headUrl,
|
|
|
+ index: this.chatList.length,
|
|
|
+ is_mind_map: false,
|
|
|
+ fileid: _item.assistantName
|
|
|
+ // createtime: new Date().toLocaleString().replaceAll("/", "-")
|
|
|
+ });
|
|
|
+ this.text = "";
|
|
|
+ let params = {
|
|
|
+ assistant_id: this.choseRoleItem.assistant_id,
|
|
|
+ userId: this.userid,
|
|
|
+ message: _text,
|
|
|
+ session_name: `${this.courseId}-studyStudent-dialog`,
|
|
|
+ uid: _uid,
|
|
|
+ file_ids: []
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .post("https://gpt4.cocorobo.cn/ai_agent_park_chat_new", params)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.FunctionResponse.result == "发送成功") {
|
|
|
+ } else {
|
|
|
+ this.chatLoading = false;
|
|
|
+ this.$message.warning(res.data.FunctionResponse.result);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.chatLoading = false;
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ this.getAtAuContent(_uid);
|
|
|
+ } else {
|
|
|
+ let _uuid = uuidv4();
|
|
|
+ this.chatList.push({
|
|
|
+ role: "user",
|
|
|
+ content: `${_text}`,
|
|
|
+ uid: _uuid,
|
|
|
+ AI: "AI",
|
|
|
+ aiContent: "",
|
|
|
+ oldContent: "",
|
|
|
+ isShowSynchronization: false,
|
|
|
+ filename: "",
|
|
|
+ index: this.chatList.length,
|
|
|
+ is_mind_map: false,
|
|
|
+ loading: true
|
|
|
+ });
|
|
|
+ this.scrollBottom();
|
|
|
+ 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: _text }],
|
|
|
+ uid: _uuid,
|
|
|
+ mind_map_question: ""
|
|
|
+ };
|
|
|
+ this.text = "";
|
|
|
+
|
|
|
+ this.ajax
|
|
|
+ .post("https://gpt4.cocorobo.cn/chat", params)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.FunctionResponse.result == "发送成功") {
|
|
|
+ } else {
|
|
|
+ this.chatLoading = false;
|
|
|
+ this.$message.warning(res.data.FunctionResponse.result);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.chatLoading = false;
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ this.getAiContent(_uuid);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取ai对话
|
|
|
+ getAiContent(_uid) {
|
|
|
+ let _source = new EventSource(`https://gpt4.cocorobo.cn/stream/${_uid}`); //http://gpt4.cocorobo.cn:8011/stream/ https://gpt4.cocorobo.cn/stream/
|
|
|
+ let _allText = "";
|
|
|
+ let _mdText = "";
|
|
|
+ const md = new MarkdownIt();
|
|
|
+ _source.onmessage = _e => {
|
|
|
+ if (_e.data.replace("'", "").replace("'", "") == "[DONE]") {
|
|
|
+ //对话已经完成
|
|
|
+ _mdText = _mdText.replace("_", "");
|
|
|
+ _source.close();
|
|
|
+ this.scrollBottom();
|
|
|
+ this.chatLoading = false;
|
|
|
+ this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
|
|
|
+ this.chatList.find(i => i.uid == _uid).isalltext = true;
|
|
|
+ this.chatList.find(i => i.uid == _uid).isShowSynchronization = true;
|
|
|
+ this.chatList.find(i => i.uid == _uid).loading = false;
|
|
|
+ // 这里保存对话
|
|
|
+ this.insertChat(_uid);
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ //对话还在继续
|
|
|
+ let _text = "";
|
|
|
+ _text = _e.data.replaceAll("'", "");
|
|
|
+ if (_allText == "") {
|
|
|
+ _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
|
|
|
+ } else {
|
|
|
+ _allText += _text;
|
|
|
+ }
|
|
|
+ _mdText = _allText + "_";
|
|
|
+ _mdText = _mdText.replace(/\\n/g, "\n");
|
|
|
+ _mdText = _mdText.replace(/\\/g, "");
|
|
|
+ if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
|
|
|
+ //转化返回的回复流数据
|
|
|
+ _mdText = md.render(_mdText);
|
|
|
+ this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
|
|
|
+ this.chatList.find(i => i.uid == _uid).loading = false;
|
|
|
+ this.scrollBottom();
|
|
|
+ // 处理流数据
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ getAtAuContent(_uid) {
|
|
|
+ let _source = new EventSource(
|
|
|
+ `https://gpt4.cocorobo.cn/question/${_uid}`
|
|
|
+ ); //http://gpt4.cocorobo.cn:8011/question/ https://gpt4.cocorobo.cn/question/
|
|
|
+ let _allText = "";
|
|
|
+ let _mdText = "";
|
|
|
+ const md = new MarkdownIt();
|
|
|
+ _source.onmessage = _e => {
|
|
|
+ let _eData = JSON.parse(_e.data);
|
|
|
+ if (_eData.content.replace("'", "").replace("'", "") == "[DONE]") {
|
|
|
+ let _result = [];
|
|
|
+ if ("result" in _eData) {
|
|
|
+ _result = _eData.result;
|
|
|
+ for (let i = 0; i < _result.length; i++) {
|
|
|
+ _mdText = _mdText.replace(_result[i].text, _result[i].fileName);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _mdText = _mdText.replace("_", "");
|
|
|
+ this.chatLoading = false;
|
|
|
+ this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
|
|
|
+ this.chatList.find(i => i.uid == _uid).isalltext = true;
|
|
|
+ this.chatList.find(i => i.uid == _uid).isShowSynchronization = true;
|
|
|
+ this.chatList.find(i => i.uid == _uid).loading = false;
|
|
|
+
|
|
|
+ this.insertChat(_uid);
|
|
|
+ } else {
|
|
|
+ let _text = _eData.content.replace("'", "").replace("'", "");
|
|
|
+ if (_allText == "") {
|
|
|
+ _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
|
|
|
+ } else {
|
|
|
+ _allText += _text;
|
|
|
+ }
|
|
|
+ _mdText = _allText + "_";
|
|
|
+ _mdText = _mdText.replace(/\\n/g, "\n");
|
|
|
+ _mdText = _mdText.replace(/\\/g, "");
|
|
|
+ if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
|
|
|
+ //转化返回的回复流数据
|
|
|
+ _mdText = md.render(_mdText);
|
|
|
+ this.chatList.find(i => i.uid == _uid).aiContent = _mdText;
|
|
|
+ this.chatList.find(i => i.uid == _uid).loading = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
|
|
|
+ });
|
|
|
+ // 处理流数据
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //保存消息
|
|
|
+ insertChat(_uid) {
|
|
|
+ let _data = this.chatList.find(i => i.uid == _uid);
|
|
|
+ if (!_data) return;
|
|
|
+ let params = {
|
|
|
+ userId: this.userid,
|
|
|
+ userName: "qgt",
|
|
|
+ groupId: "602def61-005d-11ee-91d8-005056b8q12w",
|
|
|
+ answer: _data.aiContent,
|
|
|
+ problem: _data.content,
|
|
|
+ file_id: _data.fileid ? _data.fileid : "",
|
|
|
+ alltext: _data.aiContent,
|
|
|
+ type: "chat",
|
|
|
+ filename: _data.filename,
|
|
|
+ session_name: `${this.courseId}-studyStudent` //这是对话记录位置
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .post("https://gpt4.cocorobo.cn/insert_chat", params)
|
|
|
+ .then(res => {});
|
|
|
+ },
|
|
|
+ // 获取对应的聊天记录
|
|
|
+ getChatList() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ if (this.loading) return this.$message.info("请稍等...");
|
|
|
+ this.chatList = [];
|
|
|
+ this.loading = true;
|
|
|
+ this.chatLoading = true;
|
|
|
+ let params = {
|
|
|
+ userid: this.userid,
|
|
|
+ groupid: "602def61-005d-11ee-91d8-005056b8q12w",
|
|
|
+ // session_name:``
|
|
|
+ session_name: `${this.courseId}-studyStudent`
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .post("https://gpt4.cocorobo.cn/get_agent_park_chat", params)
|
|
|
+ .then(res => {
|
|
|
+ let _data = JSON.parse(res.data.FunctionResponse);
|
|
|
+ if (_data.length > 0) {
|
|
|
+ let _chatList = [];
|
|
|
+ for (let i = 0; i < _data.length; i++) {
|
|
|
+ _chatList.push({
|
|
|
+ loading: false,
|
|
|
+ role: "user",
|
|
|
+ content: _data[i].problem,
|
|
|
+ uid: _data[i].id,
|
|
|
+ AI: "AI",
|
|
|
+ aiContent: _data[i].answer,
|
|
|
+ oldContent: _data[i].answer,
|
|
|
+ isShowSynchronization: false,
|
|
|
+ filename: _data[i].filename,
|
|
|
+ index: i,
|
|
|
+ is_mind_map: false,
|
|
|
+ fileid: _data[i].fileid
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.chatList = _chatList;
|
|
|
+ this.loading = false;
|
|
|
+ this.chatLoading = false;
|
|
|
+ } else {
|
|
|
+ //没有对话记录
|
|
|
+ this.chatLoading = false;
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ resolve();
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ this.$message.error("获取对话记录失败");
|
|
|
+ this.loading = false;
|
|
|
+ this.chatLoading = false;
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getRoleList() {
|
|
|
+ this.roleList = [];
|
|
|
+ let params = {
|
|
|
+ userId: this.userid
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .post("https://gpt4.cocorobo.cn/get_ai_agent_assistant_list", params)
|
|
|
+ .then(res => {
|
|
|
+ let _data = res.data.FunctionResponse.result;
|
|
|
+ if (_data.length == 0) return;
|
|
|
+ if (_data) {
|
|
|
+ this.roleList = JSON.parse(_data);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log("获取角色列表失败");
|
|
|
+ this.roleList = [];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getPublicRoleList() {
|
|
|
+ this.roleList2 = [];
|
|
|
+ let params = {
|
|
|
+ userId: this.userid,
|
|
|
+ // organizeid: this.org,
|
|
|
+ organizeid: "45facc0a-1211-11ec-80ad-005056b86db5"
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .post(
|
|
|
+ "https://gpt4.cocorobo.cn/get_ai_agent_assistant_share_list",
|
|
|
+ params
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ let _data = res.data.FunctionResponse.result;
|
|
|
+ if (_data.length == 0) return;
|
|
|
+ if (_data) {
|
|
|
+ this.roleList2 = JSON.parse(_data);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.roleList2 = [];
|
|
|
+ console.log("获取公共角色失败", e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ changeRole() {
|
|
|
+ this.cardType = 0;
|
|
|
+ // this.rightSubjects = this.subjectsType;
|
|
|
+ // this.rightRole = this.roleType;
|
|
|
+ if (this.choseRoleItem.assistant_id) {
|
|
|
+ this.chatList = [];
|
|
|
+ let _uuid = uuidv4();
|
|
|
+ this.chatList.push({
|
|
|
+ role: "user",
|
|
|
+ content: `您好，${this.choseRoleItem.assistantName}`,
|
|
|
+ uid: _uuid,
|
|
|
+ AI: "AI",
|
|
|
+ aiContent: this.choseRoleItem.prologue
|
|
|
+ ? this.choseRoleItem.prologue
|
|
|
+ : "您好，有什么需要我帮忙的吗？",
|
|
|
+ oldContent: "",
|
|
|
+ isShowSynchronization: false,
|
|
|
+ filename: this.choseRoleItem.headUrl,
|
|
|
+ index: this.chatList.length,
|
|
|
+ is_mind_map: false,
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ this.scrollBottom();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 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: `你好,${_text}` }],
|
|
|
+ // uid: _uuid,
|
|
|
+ // mind_map_question: ""
|
|
|
+ // };
|
|
|
+ // this.text = "";
|
|
|
+
|
|
|
+ // this.ajax
|
|
|
+ // .post("https://gpt4.cocorobo.cn/chat", params)
|
|
|
+ // .then(res => {
|
|
|
+ // if (res.data.FunctionResponse.result == "发送成功") {
|
|
|
+ // } else {
|
|
|
+ // this.$message.warning(res.data.FunctionResponse.result);
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // .catch(e => {
|
|
|
+ // console.log(e);
|
|
|
+ // });
|
|
|
+ // this.getAiContent(_uuid);
|
|
|
+ // this.chatList.push({
|
|
|
+ // role: "ai",
|
|
|
+ // content: "", //这里需要调用接口
|
|
|
+ // time: new Date().toLocaleString().replace(/\//gi, "-")
|
|
|
+ // });
|
|
|
+ // setTimeout(() => {
|
|
|
+ // let aiContent = "你好";
|
|
|
+ // switch (this.rightRole) {
|
|
|
+ // case 0:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是爱因斯坦，相对论的提出者，相信科学的力量可以揭示宇宙的奥秘。";
|
|
|
+ // break;
|
|
|
+ // case 1:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是居里夫人，放射性研究的先驱，第一位获得两次诺贝尔奖的女性。";
|
|
|
+ // break;
|
|
|
+ // case 2:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是查尔斯·达尔文，进化论的创立者，相信物种通过自然选择不断进化。";
|
|
|
+ // break;
|
|
|
+ // case 3:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是达芬奇，文艺复兴的象征，艺术与科学的多面手。";
|
|
|
+ // break;
|
|
|
+ // case 4:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是列文虎克，通过我的简单显微镜，开启了微生物学的大门。";
|
|
|
+ // break;
|
|
|
+ // case 5:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是詹姆斯·瓦特，改良了蒸汽机，为工业革命提供了动力。";
|
|
|
+ // break;
|
|
|
+ // case 6:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是瑞秋·卡森，环保运动的先驱，通过《寂静的春天》提醒世界关注环境保护。";
|
|
|
+ // break;
|
|
|
+ // case 7:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是特斯拉，交流电的推广者，致力于无线电和电力传输的研究。";
|
|
|
+ // break;
|
|
|
+ // case 8:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是约翰·穆尔，自然保护的倡导者，努力保护美国的森林和野生地区。";
|
|
|
+ // break;
|
|
|
+ // case 9:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是牛顿，万有引力和三大运动定律的发现者，为现代物理学奠定了基础。";
|
|
|
+ // break;
|
|
|
+ // case 10:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是伽利略，通过望远镜观测支持了日心说，被誉为现代观测天文学之父。";
|
|
|
+ // break;
|
|
|
+ // case 11:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是孟德尔，遗传学的奠基人，通过豌豆实验发现了遗传的基本规律。";
|
|
|
+ // break;
|
|
|
+ // case 12:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是张衡，东汉杰出的天文学家和科学家，发明了地动仪。";
|
|
|
+ // break;
|
|
|
+ // case 13:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是李时珍，中国古代著名的医学家，编纂了《本草纲目》。";
|
|
|
+ // break;
|
|
|
+ // case 14:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是钱学森，现代火箭科学的奠基人之一，被誉为“中国航天之父”。";
|
|
|
+ // break;
|
|
|
+ // case 15:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是阿基米德，古希腊的数学家和物理学家，提出了浮力原理。";
|
|
|
+ // break;
|
|
|
+ // case 16:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是斯蒂芬·霍金，研究黑洞和宇宙起源，致力于解释宇宙的奥秘。";
|
|
|
+ // break;
|
|
|
+ // case 17:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是蔡伦，东汉时期改进了造纸术，使纸张更加广泛地应用于社会。";
|
|
|
+ // break;
|
|
|
+ // case 18:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是詹姆斯·瓦特，改良了蒸汽机，为工业革命提供了动力。";
|
|
|
+ // break;
|
|
|
+ // case 19:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是路易·巴斯德，微生物学的奠基人，发现了疫苗和巴斯德消毒法。";
|
|
|
+ // break;
|
|
|
+ // case 20:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是诺贝尔，发明了炸药，为和平与科学的贡献设立了诺贝尔奖。";
|
|
|
+ // break;
|
|
|
+ // case 21:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是麦克斯韦，统一了电磁理论，提出了麦克斯韦方程组。";
|
|
|
+ // break;
|
|
|
+ // case 22:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是贝尔，电话的发明者，致力于通信技术的发展和听力障碍人士的教育。";
|
|
|
+ // break;
|
|
|
+ // case 23:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是开普勒，行星运动三大定律的发现者，为天文学和物理学的发展做出了重要贡献。";
|
|
|
+ // break;
|
|
|
+ // case 24:
|
|
|
+ // aiContent =
|
|
|
+ // "你好，我是安培，电磁学的先驱之一，提出了电流的磁效应。";
|
|
|
+ // break;
|
|
|
+ // }
|
|
|
+ // this.chatList[this.chatList.length - 1].content = aiContent;
|
|
|
+ // this.chatList[
|
|
|
+ // this.chatList.length - 1
|
|
|
+ // ].time = new Date().toLocaleString().replace(/\//gi, "-");
|
|
|
+ // this.loading = false;
|
|
|
+ // }, 2000);
|
|
|
+ },
|
|
|
+ choseRole(item) {
|
|
|
+ this.choseRoleItem = item;
|
|
|
+ },
|
|
|
+ noChangeRole() {
|
|
|
+ this.cardType = 0;
|
|
|
+ // this.subjectsType = this.rightSubjects;
|
|
|
+ // this.roleType = this.rightRole;
|
|
|
+ },
|
|
|
+ scrollBottom() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.chatRef.scrollTop = this.$refs.chatRef.scrollHeight;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getRoleList();
|
|
|
+ this.getPublicRoleList();
|
|
|
+ this.getChatList().then(_ => {
|
|
|
+ this.scrollBottom();
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.dialog{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.dialog>div{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.characterBlock{
|
|
|
- display: flex;
|
|
|
- background: rgba(54, 169, 252, 1);
|
|
|
- width: 100%;
|
|
|
- height: 80px;
|
|
|
- margin: 0 auto;
|
|
|
- border-radius: 10px;
|
|
|
- margin-bottom: 15px;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.characterBlock > .imgLeft{
|
|
|
- width: 100px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.characterBlock > .imgLeft > .img{
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- overflow: hidden;
|
|
|
- border-radius: 50%;
|
|
|
-}
|
|
|
-.characterBlock > .imgLeft > .img2{
|
|
|
- width: 70px;
|
|
|
- height: 70px;
|
|
|
- overflow: hidden;
|
|
|
- border-radius: 50%;
|
|
|
-}
|
|
|
-.characterBlock > .txtRight{
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.characterBlock > .txtRight > .bir{
|
|
|
- width: 180px;
|
|
|
- height: 35px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 5px 10px;
|
|
|
- box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.d_top{
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 90px);
|
|
|
- overflow: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.d_t_chat{
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.d_t_chat>div{
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.d_t_c_user{
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 35px;
|
|
|
-}
|
|
|
-
|
|
|
-.d_t_c_u_left{
|
|
|
- width: 90%;
|
|
|
- height: auto;
|
|
|
-}
|
|
|
-
|
|
|
-.d_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
|
|
|
-}
|
|
|
-
|
|
|
-.d_t_c_u_l_time{
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- font-size: 12px;
|
|
|
- color: #9F9F9F;
|
|
|
- margin-top: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.d_t_c_u_right{
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin-left: 5px
|
|
|
-}
|
|
|
-
|
|
|
-.d_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%;;
|
|
|
-}
|
|
|
-
|
|
|
-.d_t_c_ai{
|
|
|
- box-sizing: border-box;
|
|
|
- padding-right: 35px;
|
|
|
-}
|
|
|
-
|
|
|
-.d_t_c_a_right{
|
|
|
- min-width: 90%;
|
|
|
- height: auto;
|
|
|
-}
|
|
|
-
|
|
|
-.d_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;
|
|
|
+.dialog {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog > div {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.characterBlock {
|
|
|
+ display: flex;
|
|
|
+ background: rgba(54, 169, 252, 1);
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.characterBlock > .imgLeft {
|
|
|
+ width: 100px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.characterBlock > .imgLeft > .img {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.characterBlock > .imgLeft > .img2 {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.characterBlock > .txtRight {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.characterBlock > .txtRight > .bir {
|
|
|
+ width: 180px;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px 10px;
|
|
|
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
|
+ margin-right: 10px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.d_top {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 90px);
|
|
|
+ overflow: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.d_t_chat {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.d_t_chat > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.d_t_c_user {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 35px;
|
|
|
+}
|
|
|
+
|
|
|
+.d_t_c_u_left {
|
|
|
+ width: 90%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.d_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;
|
|
|
- word-break: break-all;
|
|
|
-}
|
|
|
-
|
|
|
-.d_t_c_a_r_time{
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- font-size: 12px;
|
|
|
- color: #9F9F9F;
|
|
|
- margin-top: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.d_t_c_a_left{
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin-right: 5px
|
|
|
-}
|
|
|
-
|
|
|
-.d_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%;
|
|
|
-}
|
|
|
-
|
|
|
-.d_bottom{
|
|
|
- width: 100%;
|
|
|
- height: 90px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-
|
|
|
-.d_b_btnArea{
|
|
|
- width: 100%;
|
|
|
- height: 30px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.d_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;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.d_b_inputArea{
|
|
|
- width: 100%;
|
|
|
- height: 55px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-top: solid 1px #EDEDED;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding-right: 10px;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.d_b_tape{
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- background: url("../../../assets/icon/course/tape.png") no-repeat;
|
|
|
- background-size: 50% 60%;
|
|
|
- background-position: center;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.d_b_input{
|
|
|
- /* width: 75%; */
|
|
|
- flex: 1;
|
|
|
- height: 45px;
|
|
|
- background-color: #F3F3F3;
|
|
|
- border-radius: 50px;
|
|
|
- margin: 0 10px;
|
|
|
- display: flex;
|
|
|
- overflow: hidden;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.d_b_i_left{
|
|
|
- width: 100%;
|
|
|
- line-height: 45px;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.d_b_i_left>>>.el-input__inner{
|
|
|
- border: none;
|
|
|
- background-color: #F3F3F3;
|
|
|
- outline: none;
|
|
|
- border-radius: 50px 0 0 50px;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.d_b_i_right{
|
|
|
- width: 45px;
|
|
|
- height: 45px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.d_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;
|
|
|
-}
|
|
|
-
|
|
|
-.d_b_btn{
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background-color: #3681FC;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border-radius: 50%;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.d_b_btn>span{
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- background: url("../../../assets/icon/course/send.png") no-repeat;
|
|
|
- background-size: 70% 70%;
|
|
|
- background-position: center;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.choiceTop{
|
|
|
- width: 100%;
|
|
|
- height: 95%;
|
|
|
- overflow-x: hidden;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.choiceBottom{
|
|
|
- width: 100%;
|
|
|
- height: 5%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
-}
|
|
|
-
|
|
|
-.cb_btn{
|
|
|
- margin: 0 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.choiceRoleHeader{
|
|
|
- width: 100%;
|
|
|
- /* margin: 10px; */
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.choiceRoleHeader>div{
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.choiceRoleHeader>span{
|
|
|
- font-size: 14px;
|
|
|
}
|
|
|
-.choiceSelect{
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- height: 35px;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- margin: 15px 0;
|
|
|
+
|
|
|
+.d_t_c_u_l_time {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #9f9f9f;
|
|
|
+ margin-top: 5px;
|
|
|
}
|
|
|
-.choiceSelect > .option{
|
|
|
- width: 80px;
|
|
|
- height: 100%;
|
|
|
- border-radius: 5px;
|
|
|
- margin-right: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
+
|
|
|
+.d_t_c_u_right {
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
-.filterSubjects{
|
|
|
- margin: 10px;
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
+
|
|
|
+.d_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%;
|
|
|
}
|
|
|
|
|
|
-.fs_box{
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.fs_b_item{
|
|
|
- width: auto;
|
|
|
- height: 35px;
|
|
|
- font-size: 14px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 9px;
|
|
|
- background-color: #F3F7FD;
|
|
|
- border: solid 1px #F3F7FD;
|
|
|
- border-radius: 5px;
|
|
|
- margin-right:8px;
|
|
|
- margin-bottom: 8px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.fs_b_itemActive{
|
|
|
- border: solid 1px #4D8FFC;
|
|
|
- color: #4D8FFC;
|
|
|
- background-color: #F3F7FD;
|
|
|
+.d_t_c_ai {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 35px;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
-.roleList{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- margin: 10px;
|
|
|
+.d_t_c_a_right {
|
|
|
+ min-width: 90%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.d_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;
|
|
|
}
|
|
|
|
|
|
-.r_box{
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
+.d_t_c_a_r_time {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #9f9f9f;
|
|
|
+ margin-top: 5px;
|
|
|
}
|
|
|
|
|
|
-.r_b_item{
|
|
|
- height: 40px;
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- /* justify-content: center; */
|
|
|
- align-items: center;
|
|
|
- background-color: #F0F2F5;
|
|
|
- border-radius: 5px;
|
|
|
- margin: 5px;
|
|
|
- cursor: pointer;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 4px;
|
|
|
- border: solid 1px #F0F2F5;
|
|
|
+.d_t_c_a_left {
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
-.r_b_itemActive{
|
|
|
- box-sizing: border-box;
|
|
|
- border: solid 1px #AECCFE;
|
|
|
- color: #4D8FFB;
|
|
|
-}
|
|
|
-
|
|
|
-.r_b_item>img{
|
|
|
- min-width: 24px;
|
|
|
- min-height: 24px;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- border-radius:50%;
|
|
|
- margin-right: 10px;
|
|
|
- /* margin-left: 10px; */
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-</style>
|
|
|
+.d_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%;
|
|
|
+}
|
|
|
+
|
|
|
+.d_bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 90px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.d_b_btnArea {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.d_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;
|
|
|
+}
|
|
|
+
|
|
|
+.d_b_inputArea {
|
|
|
+ width: 100%;
|
|
|
+ height: 55px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-top: solid 1px #ededed;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-right: 10px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.d_b_tape {
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ background: url("../../../assets/icon/course/tape.png") no-repeat;
|
|
|
+ background-size: 50% 60%;
|
|
|
+ background-position: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.d_b_input {
|
|
|
+ /* width: 75%; */
|
|
|
+ flex: 1;
|
|
|
+ height: 45px;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ border-radius: 50px;
|
|
|
+ margin: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.d_b_i_left {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 45px;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.d_b_i_left >>> .el-input__inner {
|
|
|
+ border: none;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ outline: none;
|
|
|
+ border-radius: 50px 0 0 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.d_b_i_right {
|
|
|
+ width: 45px;
|
|
|
+ height: 45px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.d_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;
|
|
|
+}
|
|
|
+
|
|
|
+.d_b_btn {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #3681fc;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.d_b_btn > span {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ background: url("../../../assets/icon/course/send.png") no-repeat;
|
|
|
+ background-size: 70% 70%;
|
|
|
+ background-position: center;
|
|
|
+}
|
|
|
+
|
|
|
+.choiceTop {
|
|
|
+ width: 100%;
|
|
|
+ height: 95%;
|
|
|
+ overflow-x: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.choiceBottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 5%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.cb_btn {
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.choiceRoleHeader {
|
|
|
+ width: 100%;
|
|
|
+ /* margin: 10px; */
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.choiceRoleHeader > div {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.choiceRoleHeader > span {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.choiceSelect {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ height: 35px;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin: 15px 0;
|
|
|
+}
|
|
|
+.choiceSelect > .option {
|
|
|
+ width: 80px;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.filterSubjects {
|
|
|
+ margin: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.fs_box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.fs_b_item {
|
|
|
+ width: auto;
|
|
|
+ height: 35px;
|
|
|
+ font-size: 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 9px;
|
|
|
+ background-color: #f3f7fd;
|
|
|
+ border: solid 1px #f3f7fd;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.fs_b_itemActive {
|
|
|
+ border: solid 1px #4d8ffc;
|
|
|
+ color: #4d8ffc;
|
|
|
+ background-color: #f3f7fd;
|
|
|
+}
|
|
|
+
|
|
|
+.roleList {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.r_box {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.r_b_item {
|
|
|
+ height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ /* justify-content: center; */
|
|
|
+ align-items: center;
|
|
|
+ background-color: #f0f2f5;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 4px;
|
|
|
+ border: solid 1px #f0f2f5;
|
|
|
+}
|
|
|
+
|
|
|
+.r_b_itemActive {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: solid 1px #aeccfe;
|
|
|
+ color: #4d8ffb;
|
|
|
+}
|
|
|
+
|
|
|
+.r_b_item > img {
|
|
|
+ min-width: 24px;
|
|
|
+ min-height: 24px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ /* margin-left: 10px; */
|
|
|
+}
|
|
|
+</style>
|
SanHQin
