update

src/components/classRoomHelper/component/countdown.vue

@@ -0,0 +1,864 @@
+<template>
+  <div class="countdown">
+    <div class="c_changeType">
+      <el-button-group>
+        <el-button
+          :type="isCountdown ? 'danger' : type == 0 ? 'primary' : ''"
+          @click.stop="changeType(0)"
+        >
+          倒计时
+        </el-button>
+
+        <el-button
+          :type="isKeepTime ? 'danger' : type == 1 ? 'primary' : ''"
+          @click.stop="changeType(1)"
+        >
+          计时器
+        </el-button>
+      </el-button-group>
+    </div>
+
+    <div class="c_time">
+      <div class="c_t_item" v-if="type == 0">
+        <div>
+          <span v-if="!isCountdown"
+            ><el-button class="c_t_i_btn" @click.stop="addTime(600)"
+              >+</el-button
+            ></span
+          >{{ countdownTimeShow.m1
+          }}<span v-if="!isCountdown"
+            ><el-button class="c_t_i_btn" @click.stop="reduceTime(600)"
+              >-</el-button
+            ></span
+          >
+        </div>
+        <div>
+          <span v-if="!isCountdown"
+            ><el-button class="c_t_i_btn" @click.stop="addTime(60)"
+              >+</el-button
+            ></span
+          >{{ countdownTimeShow.m2
+          }}<span v-if="!isCountdown"
+            ><el-button class="c_t_i_btn" @click.stop="reduceTime(60)"
+              >-</el-button
+            ></span
+          >
+        </div>
+        <span>:</span>
+        <div>
+          <span v-if="!isCountdown"
+            ><el-button class="c_t_i_btn" @click.stop="addTime(10)"
+              >+</el-button
+            ></span
+          >{{ countdownTimeShow.s1
+          }}<span v-if="!isCountdown"
+            ><el-button class="c_t_i_btn" @click.stop="reduceTime(10)"
+              >-</el-button
+            ></span
+          >
+        </div>
+        <div>
+          <span v-if="!isCountdown"
+            ><el-button class="c_t_i_btn" @click.stop="addTime(1)"
+              >+</el-button
+            ></span
+          >{{ countdownTimeShow.s2
+          }}<span v-if="!isCountdown"
+            ><el-button class="c_t_i_btn" @click.stop="reduceTime(1)"
+              >-</el-button
+            ></span
+          >
+        </div>
+      </div>
+      <div class="c_t_item" v-if="type == 1">
+        <div>{{ keepTimeShow.m1 }}</div>
+        <div>{{ keepTimeShow.m2 }}</div>
+        <span>:</span>
+        <div>{{ keepTimeShow.s1 }}</div>
+        <div>{{ keepTimeShow.s2 }}</div>
+      </div>
+    </div>
+
+    <div class="c_choiceTime" v-if="type == 0">
+      <div class="c_title">
+        <span>倒计时长</span>
+      </div>
+      <div class="c_ct_box">
+        <span @click.stop="setCountdownTime(30)">30秒</span>
+        <span @click.stop="setCountdownTime(60)">1分钟</span>
+        <span @click.stop="setCountdownTime(120)">2分钟</span>
+        <span @click.stop="setCountdownTime(180)">3分钟</span>
+        <span @click.stop="setCountdownTime(300)">5分钟</span>
+        <span @click.stop="setCountdownTime(360)">6分钟</span>
+        <span @click.stop="setCountdownTime(480)">8分钟</span>
+        <span @click.stop="setCountdownTime(600)">10分钟</span>
+      </div>
+    </div>
+
+    <div class="c_behaviorTag">
+      <div class="c_title">
+        <span>行为标签</span>
+        <div class="c_t_btnArea">
+          <el-button-group>
+            <el-button
+              size="mini"
+              :disabled="isCountdown || isKeepTime"
+              :type="behaviorTagType == 0 ? 'primary' : 'info'"
+              @click.stop="changeBehaviorTagType(0)"
+            >
+              常用
+            </el-button>
+
+            <el-button
+              size="mini"
+              :disabled="isCountdown || isKeepTime"
+              :type="behaviorTagType == 1 ? 'primary' : 'info'"
+              @click.stop="changeBehaviorTagType(1)"
+            >
+              更多
+            </el-button>
+          </el-button-group>
+        </div>
+      </div>
+
+      <div
+        class="c_bt_box"
+        v-loading="behaviorTagMoreLoading && behaviorTagType == 1"
+      >
+        <span
+          v-if="behaviorTagType == 1"
+          :class="[choiceBehavior.includes(item) ? 'c_bt_b_active' : '']"
+          v-for="(item, index) in behaviorTagMore"
+          @click.stop="choiceBehaviorTag(item)"
+          :key="behaviorTagType + '-' + index"
+          >{{ item }}</span
+        >
+        <span
+          v-if="behaviorTagType == 0"
+          :class="[choiceBehavior.includes(item) ? 'c_bt_b_active' : '']"
+          v-for="(item, index) in behaviorTagCommon"
+          @click.stop="choiceBehaviorTag(item)"
+          :key="behaviorTagType + '-' + index"
+          >{{ item }}</span
+        >
+      </div>
+    </div>
+
+    <div class="c_btnArea">
+      <span @click.stop="music()">音乐</span>
+      <div class="c_ba_startArea">
+        <div
+          :class="[!isCountdown ? 'c_ba_startType' : 'c_ba_startType2']"
+          v-if="type == 0"
+          @click.stop="countdownTimeFn()"
+        >
+          <svg
+            v-if="!isCountdown"
+            t="1721117381559"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="12941"
+            width="64"
+            height="64"
+          >
+            <path
+              d="M161.2 839.9v-654c0-56.1 60.7-91.1 109.3-63.1l566.3 327c48.6 28 48.6 98.1 0 126.2L270.4 903c-48.5 28-109.2-7.1-109.2-63.1z"
+              p-id="12942"
+            ></path>
+          </svg>
+          <svg
+            v-else
+            t="1721198913879"
+            class="icon"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="4266"
+            width="64"
+            height="64"
+          >
+            <path
+              d="M426.666667 138.666667v746.666666a53.393333 53.393333 0 0 1-53.333334 53.333334H266.666667a53.393333 53.393333 0 0 1-53.333334-53.333334V138.666667a53.393333 53.393333 0 0 1 53.333334-53.333334h106.666666a53.393333 53.393333 0 0 1 53.333334 53.333334z m330.666666-53.333334H650.666667a53.393333 53.393333 0 0 0-53.333334 53.333334v746.666666a53.393333 53.393333 0 0 0 53.333334 53.333334h106.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V138.666667a53.393333 53.393333 0 0 0-53.333334-53.333334z"
+              p-id="4267"
+            ></path>
+          </svg>
+          <!-- <svg v-else t="1721117616634" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13970" width="64" height="64"><path d="M128 128m53.333333 0l661.333334 0q53.333333 0 53.333333 53.333333l0 661.333334q0 53.333333-53.333333 53.333333l-661.333334 0q-53.333333 0-53.333333-53.333333l0-661.333334q0-53.333333 53.333333-53.333333Z" p-id="13971"></path></svg> -->
+        </div>
+        <div
+          :class="[!isKeepTime ? 'c_ba_startType' : 'c_ba_startType2']"
+          v-if="type == 1"
+          @click.stop="keepTimeFn()"
+        >
+          <svg
+            v-if="!isKeepTime"
+            t="1721117381559"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="12941"
+            width="64"
+            height="64"
+          >
+            <path
+              d="M161.2 839.9v-654c0-56.1 60.7-91.1 109.3-63.1l566.3 327c48.6 28 48.6 98.1 0 126.2L270.4 903c-48.5 28-109.2-7.1-109.2-63.1z"
+              p-id="12942"
+            ></path>
+          </svg>
+          <svg
+            v-else
+            t="1721198913879"
+            class="icon"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="4266"
+            width="64"
+            height="64"
+          >
+            <path
+              d="M426.666667 138.666667v746.666666a53.393333 53.393333 0 0 1-53.333334 53.333334H266.666667a53.393333 53.393333 0 0 1-53.333334-53.333334V138.666667a53.393333 53.393333 0 0 1 53.333334-53.333334h106.666666a53.393333 53.393333 0 0 1 53.333334 53.333334z m330.666666-53.333334H650.666667a53.393333 53.393333 0 0 0-53.333334 53.333334v746.666666a53.393333 53.393333 0 0 0 53.333334 53.333334h106.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V138.666667a53.393333 53.393333 0 0 0-53.333334-53.333334z"
+              p-id="4267"
+            ></path>
+          </svg>
+          <!-- <svg v-else t="1721117616634" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13970" width="64" height="64"><path d="M128 128m53.333333 0l661.333334 0q53.333333 0 53.333333 53.333333l0 661.333334q0 53.333333-53.333333 53.333333l-661.333334 0q-53.333333 0-53.333333-53.333333l0-661.333334q0-53.333333 53.333333-53.333333Z" p-id="13971"></path></svg> -->
+        </div>
+      </div>
+      <span @click.stop="reset()">重置</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { time } from "echarts";
+import { v4 as uuidv4 } from "uuid";
+export default {
+  props: {
+    courseDetail: {
+      type: Object,
+      default: () => {}
+    },
+    fileId: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      userid: this.$route.query.userid,
+      courseId: this.$route.query.courseId,
+      type: 0, //0：倒计时   1：计时器
+      isCountdown: false,
+      isKeepTime: false,
+      countdownTime: 0,
+      countdownTimeDefault: 0,
+      countdownTimeTimer: null,
+      keepTime: 0,
+      keepTimeTimer: null,
+      startCountdownTime: 0,
+      behaviorTagType: 0, //0：常用  1：更多
+      behaviorTagMore: [], //更多
+      behaviorTagMoreLoading: false,
+      behaviorTagCommon: [
+        "小组讨论",
+        "小组汇报",
+        "动手实验",
+        "课堂游戏",
+        "自主学习",
+        "作品展示",
+        "学生演讲",
+        "学生分享",
+        "随堂练习",
+        "快速问答",
+        "阅读资料",
+        "观察记录"
+      ], //常用
+      choiceBehavior: []
+    };
+  },
+  computed: {
+    countdownTimeShow() {
+      let _result = {
+        m1: 0,
+        m2: 0,
+        s1: 0,
+        s2: 0
+      };
+
+      if (this.countdownTime <= 0) return _result;
+
+      let minutes = Math.floor(this.countdownTime / 60);
+      let seconds = this.countdownTime % 60;
+      if (minutes > 9) {
+        _result.m1 = Math.floor(minutes / 10);
+        _result.m2 = minutes % 10;
+      } else {
+        _result.m1 = 0;
+        _result.m2 = minutes;
+      }
+      if (seconds > 9) {
+        _result.s1 = Math.floor(seconds / 10);
+        _result.s2 = seconds % 10;
+      } else {
+        _result.s1 = 0;
+        _result.s2 = seconds;
+      }
+
+      return _result;
+    },
+    keepTimeShow() {
+      let _result = {
+        m1: 0,
+        m2: 0,
+        s1: 0,
+        s2: 0
+      };
+
+      if (this.keepTime <= 0) return _result;
+
+      let minutes = Math.floor(this.keepTime / 60);
+      let seconds = this.keepTime % 60;
+      if (minutes > 9) {
+        _result.m1 = Math.floor(minutes / 10);
+        _result.m2 = minutes % 10;
+      } else {
+        _result.m1 = 0;
+        _result.m2 = minutes;
+      }
+      if (seconds > 9) {
+        _result.s1 = Math.floor(seconds / 10);
+        _result.s2 = seconds % 10;
+      } else {
+        _result.s1 = 0;
+        _result.s2 = seconds;
+      }
+
+      return _result;
+    }
+  },
+  watch: {
+    countdownTime(newValue) {
+      if (this.isCountdown && this.countdownTimeTimer && newValue == 0) {
+        this.countdownTimeFinish();
+      } else if (!this.isCountdown && !this.countdownTimeTimer) {
+        this.countdownTimeDefault = newValue;
+      }
+    }
+  },
+  methods: {
+    changeType(newType) {
+      this.type = newType;
+    },
+    changeBehaviorTagType(newType) {
+      if (this.isCountdown) return this.$message.error("正在倒计时");
+      if (this.isKeepTime) return this.$message.error("正在计时");
+      if (this.behaviorTagType == newType) return;
+      this.choiceBehavior = [];
+      this.behaviorTagType = newType;
+      if (this.behaviorTagType == 1 && this.behaviorTagMore.length <= 0) {
+        this.getBehaviorTagMore();
+      }
+    },
+    setCountdownTime(newTime = 0) {
+      if (this.isCountdown) return this.$message.error("正在倒计时");
+      if (this.isKeepTime) return this.$message.error("正在计时");
+      this.countdownTime = newTime;
+    },
+    addTime(time = 0) {
+      if (this.isCountdown) return console.log("正在计时");
+      if (this.countdownTime >= 3600) {
+        return this.$message.error("倒计时最高一小时");
+      }
+      if (this.countdownTime + time > 3600) {
+        return (this.countdownTime = 3600);
+      }
+      this.countdownTime += time;
+    },
+    reduceTime(time = 0) {
+      if (this.isCountdown) return console.log("正在计时");
+      if (this.countdownTime - time < 0) return (this.countdownTime = 0);
+      this.countdownTime -= time;
+    },
+    choiceBehaviorTag(tag) {
+      if (this.isCountdown) return this.$message.error("正在倒计时");
+      if (this.isKeepTime) return this.$message.error("正在计时");
+      let _index = this.choiceBehavior.findIndex(i => i == tag);
+      if (_index != -1) {
+        // 数组删除指定下标数据
+        this.choiceBehavior.splice(_index, 1);
+      } else {
+        this.choiceBehavior.push(tag);
+      }
+    },
+    countdownTimeFn() {
+      if (this.isCountdown) {
+        //取消
+        clearInterval(this.countdownTimeTimer);
+        this.countdownTimeTimer = null;
+        this.isCountdown = false;
+        this.$message.success("已暂停倒计时");
+      } else {
+        //开始
+        if (this.countdownTime == 0)
+          return this.$message.error("请设置倒计时时间");
+        this.isCountdown = true;
+        this.$message.success("已开始倒计时");
+        this.countdownTimeTimer = setInterval(() => {
+          this.isCountdown = true;
+          this.countdownTime -= 1;
+        }, 1000);
+      }
+    },
+    countdownTimeFinish() {
+      clearInterval(this.countdownTimeTimer);
+      this.countdownTimeTimer = null;
+      this.isCountdown = false;
+      this.$parent.type = 1;
+      this.$parent.itemType = 3;
+      let _data = {
+        type: "countdown",
+        time: this.countdownTimeDefault,
+        tag: this.choiceBehavior
+      };
+      this.$confirm("倒计时已结束！", "提醒", {
+        confirmButtonText: "确定",
+        type: "warning"
+      })
+        .then(_ => {
+          this.insertData(_data);
+        })
+        .catch(_ => {
+          this.insertData(_data);
+        });
+    },
+    keepTimeFn() {
+      if (this.isKeepTime) {
+        this.isKeepTime = false;
+        clearInterval(this.keepTimeTimer);
+        this.keepTimeTimer = null;
+        this.$message.success("已停止计时");
+      } else {
+        this.isKeepTime = true;
+        this.keepTimeTimer = setInterval(() => {
+          this.keepTime += 1;
+        }, 1000);
+        this.$message.success("已开始计时");
+      }
+    },
+    music() {
+      this.$message.info("设置音乐");
+      // this.getBehaviorTagMore()
+    },
+    reset() {
+      if (this.type == 0) {
+        if (this.isCountdown) {
+          this.$confirm("正在倒计时！确定重置倒计时吗？", "提醒", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+            .then(_ => {
+              clearInterval(this.countdownTimeTimer);
+              this.countdownTimeTimer = null;
+              // this.countdownTime = this.countdownTimeDefault;
+              this.countdownTime = 0;
+              this.isCountdown = false;
+              this.choiceBehavior = [];
+              this.$message.success("已重置");
+            })
+            .catch(_ => {
+              console.log("取消重置");
+            });
+        } else {
+          this.$confirm("确定重置倒计时吗？", "提醒", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+            .then(_ => {
+              // this.countdownTime = this.countdownTimeDefault;
+              this.countdownTime = 0;
+              this.isCountdown = false;
+              this.choiceBehavior = [];
+              this.$message.success("已重置");
+            })
+            .catch(_ => {
+              console.log("取消重置");
+            });
+        }
+      } else if (this.type == 1) {
+        if (this.isKeepTime) {
+          this.$confirm("正在计时！确定重置计时吗？", "提醒", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+            .then(_ => {
+              clearInterval(this.keepTimeTimer);
+              this.keepTimeTimer = null;
+              let _data = {
+                type: "keepTime",
+                time: this.keepTime,
+                tag: this.choiceBehavior
+              };
+              this.keepTime = 0;
+              this.isKeepTime = false;
+              this.insertData(_data);
+            })
+            .catch(_ => {
+              console.log("取消重置");
+            });
+        } else {
+          let _data = {
+            type: "keepTime",
+            time: this.keepTime,
+            tag: this.choiceBehavior
+          };
+          this.insertData(_data);
+          this.keepTime = 0;
+          this.isKeepTime = false;
+          // this.choiceBehavior = [];
+          this.$message.success("已重置");
+        }
+      }
+    },
+    getBehaviorTagMore() {
+      this.behaviorTagMoreLoading = true;
+      let _textData = `课程名称：${this.courseDetail.title}\n分类：${this.courseDetail.name}\n\n`;
+      let _chapters = JSON.parse(this.courseDetail.chapters);
+      _chapters.forEach((i1, index1) => {
+        if (i1.dyName) {
+          _textData += `阶段${index1 + 1}：${i1.dyName}\n`;
+        }
+        i1.chapterInfo[0].taskJson.forEach((i2, index2) => {
+          if (i2.task) {
+            _textData += `任务${index2 + 1}：${i2.task}\n`;
+            _textData += `${i2.taskDetail}\n`;
+          }
+        });
+        _textData += "\n";
+      });
+      let _msg = `Language: Please use the same language as the user requirement, if the user speaks Chinese, the specific text of your answer should also be in Chinese.
+ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
+Instruction: Based on the context, follow "Format example", write content
+
+#Context
+##任务
+在以下课堂中，如果老师设置一个倒计时，他可能想开展哪些教学活动？每个教学活动使用4个字，进行简洁精确的描述，请返回所有可能的行为名称，不需要额外的解释。请返回最有可能的12个活动类
+
+##Format example
+["小组讨论","小组汇报","动手实验","课堂游戏","自主学习","作品展示","学生演讲","学生分享","随堂练习","快速问答","阅读资料","观察记录"]
+
+##课堂内容
+${_textData}
+`;
+
+      this.behaviorTagMore = [];
+      let params = {
+        assistant_id: "6063369f-289a-11ef-8bf4-12e77c4cb76b",
+        userId: this.userid,
+        message: [{ type: "text", text: _msg }],
+        session_name: uuidv4(),
+        file_ids: this.fileId
+      };
+      this.ajax
+        // .post("https://gpt4.cocorobo.cn/chat", params)
+        // .post("https://claude3.cocorobo.cn/chat", params)
+        .post("https://gpt4.cocorobo.cn/ai_agent_park_chat", params)
+        .then(res => {
+          // console.log(res)
+          let _data = res.data.FunctionResponse.message;
+          _data = _data.replaceAll("```json", "").replaceAll("```", "");
+          const match = _data.match(/\[\s*[^]*\s*\]/);
+          let _result = JSON.parse(match[0]);
+          this.behaviorTagMore = _result;
+          this.behaviorTagMoreLoading = false;
+        })
+        .catch(e => {
+          this.behaviorTagMoreLoading = false;
+          this.$message.error("获取更多行为标签失败");
+          this.behaviorTagType = 0;
+          this.behaviorTagMore = [];
+          console.log(e);
+        });
+    },
+    insertData(data = null) {
+			return;
+      if (!data) return;
+      let params = [
+        {
+          uid: this.userid,
+          courseId: this.courseId,
+          content: JSON.stringify(data)
+        }
+      ];
+      this.ajax.post(this.$store.state.api+"insert_systemOperation_classRoomHelper",params).then(res=>{
+				if(res.data==1){
+					console.log('保存成功')
+				}else{
+					console.log('保存失败')
+				}
+			}).catch(e=>{
+				console.log('保存失败👇')
+				console.log(e);
+			})
+    }
+  }
+};
+</script>
+
+<style scoped>
+.countdown {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* justify-content: center; */
+  padding-top: 20%;
+}
+
+.c_changeType {
+  width: 100%;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.c_time {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.c_t_item {
+  font-size: 6em;
+  font-weight: bold;
+  color: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.c_t_item > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.c_t_item > div > span {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 25px;
+  height: 25px;
+}
+
+.c_t_i_btn {
+  padding: 5px 10px !important;
+}
+
+.c_t_item > span {
+  margin: 0 10px;
+  position: relative;
+  top: -11px;
+}
+
+.c_choiceTime {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  padding: 20px;
+}
+
+.c_title {
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+}
+
+.c_title > span {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.c_t_btnArea {
+  margin-left: 20px;
+}
+
+.c_ct_box {
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  padding-top: 10px;
+}
+
+.c_ct_box > span {
+  width: 20%;
+  height: 30px;
+  border-radius: 20px;
+  box-sizing: border-box;
+  border: solid 1px #d0d0d0;
+  margin: 10px 2%;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.1s;
+  cursor: pointer;
+}
+
+.c_ct_box > span:hover {
+  background-color: #409eff;
+  border: solid 1px #409eff;
+  color: #fff;
+}
+
+.c_behaviorTag {
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  padding: 20px;
+}
+
+.c_bt_box {
+  width: 100%;
+  height: auto;
+  min-height: 100px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  overflow: auto;
+  margin-top: 10px;
+}
+
+.c_bt_box > span {
+  width: auto;
+  height: auto;
+  padding: 5px 8px;
+  border-radius: 8px;
+  border: solid 1px #d0d0d0;
+  margin: 10px 0;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.1s;
+  cursor: pointer;
+}
+
+.c_bt_b_active {
+  background-color: #409eff !important;
+  border: solid 1px #409eff !important;
+  color: #fff;
+}
+
+.c_bt_box > span:hover {
+  background-color: #409eff !important;
+  border: solid 1px #409eff !important;
+  color: #fff !important;
+}
+
+.c_btnArea {
+  width: 100%;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.c_btnArea > span {
+  width: auto;
+  height: auto;
+  padding: 5px 10px;
+  border: solid 1px #d0d0d0;
+  background-color: #fff;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.c_btnArea > span:hover {
+  border: solid 1px #409eff;
+  background-color: #409eff;
+  color: #fff;
+}
+
+.c_ba_startArea {
+  width: 60px;
+  height: 60px;
+  margin: 0 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.c_ba_startType {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: solid 2px #707070;
+  color: #707070;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.c_ba_startType > svg {
+  fill: #707070;
+  width: 70%;
+  height: 70%;
+  position: relative;
+  left: 3px;
+  transition: 0.2s;
+}
+
+.c_ba_startType:hover {
+  border: solid 2px #409eff;
+}
+
+.c_ba_startType:hover > svg {
+  fill: #409eff;
+}
+
+.c_ba_startType2 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: solid 2px #f5222d;
+  color: #f5222d;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.c_ba_startType2 > svg {
+  fill: #f5222d;
+  width: 70%;
+  height: 70%;
+  transition: 0.2s;
+}
+
+.c_ba_startType2:hover {
+  border: solid 2px #cf1322;
+}
+
+.c_ba_startType2:hover > svg {
+  fill: #cf1322;
+}
+</style>

src/components/classRoomHelper/component/searchArea.vue

@@ -636,7 +636,8 @@
         >
           <div class="imgLeft">
             <div class="img">
-              <img style="width: 100%;height: 100%;" :src="item.avatar" />
+              <img v-if="item.headUrl" style="width: 100%;height: 100%;" :src="item.headUrl" />
+							<img v-else style="width: 100%;height: 100%;" :src="require('../../../assets/icon/course/ai.png')">
             </div>
           </div>
           <div class="txtRight">
@@ -645,7 +646,7 @@
               :style="{
                 color: '#fff',
                 display:
-                  choseRoleItem.assistant_id == item.assistant_id
+									(choseRoleItem && choseRoleItem.assistant_id == item.assistant_id)
                     ? 'block'
                     : 'none'
               }"
@@ -821,9 +822,10 @@ export default {
       aiTalkList: [],
       aiIsTalk: false,
       aiTalkUid: "",
-      choseRoleItem: {},
+      choseRoleItem: null,
       cardType: 0,
       roleList: [],
+			roleList2: [],
       sortOption: 0 //切换角色 0我的 1 社区
     };
   },
@@ -2608,7 +2610,7 @@ ${_wordData}
     },
     changeRole() {
       this.cardType = 0;
-      if (this.choseRoleItem.assistant_id) {
+      if (this.choseRoleItem && this.choseRoleItem.assistant_id) {
         // this.chatList = [];
         this.nowChatList = [];
         let _uuid = uuidv4();

src/components/classRoomHelper/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ch_box" ref="ch_box">
-    <div class="ch_content_box" v-if="type == 1">
+    <div class="ch_content_box" v-show="type == 1">
       <searchArea
         :courseDetail="courseDetail"
         ref="searchAreaRef"
@@ -22,7 +22,7 @@
         :fileId="fileId"
         v-if="itemType == 2"
       />
-			<!-- <countdown ref="countdownRef" v-show="itemType==3"/> -->
+			<countdown ref="countdownRef"  :fileId="fileId" :courseDetail="courseDetail" v-show="itemType==3"/>
       <!-- <dialogArea
         :courseDetail="courseDetail"
 				:openMegaphone="openMegaphone"
@@ -156,7 +156,7 @@
           <!-- <span :style="`background:url(${itemType==1?require('../../assets/icon/course/up_active.png'):require('../../assets/icon/course/up.png')});`"></span> -->
           <div>对话</div>
         </div>
-<!-- 
+
         <div
           :class="[
             'ch_nav_box_middle_item',
@@ -173,7 +173,7 @@
             :src="require('../../assets/icon/course/Countdown.svg')"
           />
           <div>倒计时</div>
-        </div> -->
+        </div>
       </div>
       <div class="ch_nav_box_bottom">
 
@@ -246,7 +246,7 @@ import taskArea from "./component/taskArea.vue";
 import dialogArea from "./component/dialogArea.vue";
 import levitatedSphere from "./component/levitatedSphere.vue";
 import timepiece from "./component/timepiece.vue";
-// import countdown from "./component/countdown.vue";
+import countdown from "./component/countdown.vue";
 export default {
   emits: ["refresh", "goStep", "backPage", "authority", "review","stopRecording","startRecording"],
   components: {
@@ -255,7 +255,7 @@ export default {
     dialogArea,
     levitatedSphere,
     timepiece,
-		// countdown
+		countdown
   },
   props: {
     courseDetail: {