pbl-student-table/src/components/classRoomHelper/index.vue

<template>
  <div class="ch_box" ref="ch_box">
    <div class="ch_content_box" v-if="type == 1">
      <searchArea
        :courseDetail="courseDetail"
        ref="searchAreaRef"
        :navList="navList"
        :tcid="tcid"
				:openMegaphone="openMegaphone"
        :fileId="fileId"
        :recordType="recordType"
        v-if="itemType == 1"
      />
      <taskArea
        :courseDetail="courseDetail"
        :navList="navList"
        :courseType="courseType"
        :taskCount="taskCount"
        :worksStudent="worksStudent"
				:openMegaphone="openMegaphone"
        ref="taskAreaRef"
        :fileId="fileId"
        v-if="itemType == 2"
      />
      <dialogArea
        :courseDetail="courseDetail"
				:openMegaphone="openMegaphone"
        ref="dialogAreaRef"
        :fileId="fileId"
        v-if="itemType == 3"
      />
    </div>
    <div class="ch_nav_box">
      <div class="ch_nav_box_top">
        <div @click="changeFold(!fold)">
          <el-tooltip class="item" effect="dark" :content="fold?'折叠':'展开'" placement="top">
            <img
              :src="require('../../assets/icon/course/foldIcon.svg')"
              alt=""
							:style="`${fold?'transform: rotate(90deg);':''}`"
            />
          </el-tooltip>
          <div v-if="fold" class="itemFold">
            <div @click="$emit('backPage')">
              <el-tooltip
                class="item"
                effect="dark"
                content="返回"
                placement="top"
              >
                <img
                  :src="require('../../assets/icon/course/return.png')"
                  alt=""
                />
              </el-tooltip>
            </div>

            <div @click="$emit('refresh')">
              <el-tooltip
                class="item"
                effect="dark"
                content="刷新"
                placement="top"
              >
                <img
                  :src="require('../../assets/icon/course/refresh.png')"
                  alt=""
                />
              </el-tooltip>
            </div>

            <div @click="$emit('authority')" v-if="tType == 1 || tType == 4">
              <el-tooltip
                class="item"
                effect="dark"
                content="权限"
                placement="top"
              >
                <img
                  :src="require('../../assets/icon/course/setting.png')"
                  alt=""
                />
              </el-tooltip>
            </div>
          </div>
        </div>

        <div @click="$emit('review')" v-if="tType == 1">
          <el-tooltip class="item" effect="dark" content="评论" placement="top">
            <img
              :src="require('../../assets/icon/course/comment.png')"
              alt=""
              style="width: 22px;height: 22px;"
            />
          </el-tooltip>
        </div>

				<div @click="$emit('startRecording')" v-if="!videoStart && (tType == 1 || tType == 4)">
          <el-tooltip class="item" effect="dark" content="录制" placement="top">
            <img
              :src="require('../../assets/icon/course/record.svg')"
              alt=""
              style="width: 22px;height: 22px;"
            />
          </el-tooltip>
        </div>

				<div @click="$emit('stopRecording')" v-else-if="(tType == 1 || tType == 4)" style="background:#f63564">
          <el-tooltip class="item" effect="dark" content="下载" placement="top">
            <img
              :src="require('../../assets/icon/course/record2.svg')"
              alt=""
              style="width: 22px;height: 22px;"
            />
          </el-tooltip>
        </div>

				
      </div>
      <div class="ch_nav_box_middle">
        <div
          :class="[
            'ch_nav_box_middle_item',
            itemType == 2 ? 'ch_nav_box_middle_item_active' : ''
          ]"
          @click.stop="changeItemType(2)"
        >
          <img
            v-if="itemType == 2"
            :src="require('../../assets/icon/course/task_active.png')"
          />
          <img
            v-if="itemType != 2"
            :src="require('../../assets/icon/course/task.png')"
          />
          <!-- <span :style="`background:url(${itemType==2?require('../../assets/icon/course/task_active.png'):require('../../assets/icon/course/task.png')});`"></span> -->
          <div>任务</div>
        </div>

				<div
          :class="[
            'ch_nav_box_middle_item',
            itemType == 1 ? 'ch_nav_box_middle_item_active' : ''
          ]"
          @click.stop="changeItemType(1)"
        >
          <img
            v-if="itemType == 1"
            :src="require('../../assets/icon/course/up_active.png')"
          />
          <img
            v-if="itemType != 1"
            :src="require('../../assets/icon/course/up.png')"
          />
          <!-- <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',
            itemType == 3 ? 'ch_nav_box_middle_item_active' : ''
          ]"
          @click.stop="changeItemType(3)"
        >
          <img
            v-if="itemType == 3"
            :src="require('../../assets/icon/course/dialog_active.png')"
          />
          <img
            v-if="itemType != 3"
            :src="require('../../assets/icon/course/dialog.png')"
          />
          <!-- <span :style="`background:url(${itemType==3?require('../../assets/icon/course/dialog_active.png'):require('../../assets/icon/course/dialog.png')});`"></span> -->
          <div>智能体</div>
        </div>
      </div>
      <div class="ch_nav_box_bottom">

				<div @click.stop="startAssistant()" :class="[recordType==1?'ch_nav_box_middle_item_active':'']">
					<el-tooltip
            class="item"
            effect="dark"
            :content="recordType==0?'开启语音助手':'关闭语音助手'"
            placement="top"
          >
            <img v-if="recordType!=1" :src="require('../../assets/icon/course/robot.svg')" />
						<img v-else :src="require('../../assets/icon/course/robot2.svg')" />
          </el-tooltip>
				</div>

        <div @click.stop="$emit('goStep', 0)">
          <el-tooltip
            class="item"
            effect="dark"
            content="上一步"
            placement="top"
          >
            <img :src="require('../../assets/icon/course/last.png')" />
          </el-tooltip>
        </div>

        <div @click.stop="$emit('goStep', 1)">
          <el-tooltip
            class="item"
            effect="dark"
            content="下一步"
            placement="top"
          >
            <img :src="require('../../assets/icon/course/next.png')" />
          </el-tooltip>
        </div>

        <div @click="openSetting">
          <el-tooltip
            class="item"
            effect="dark"
            :content="type == 0 ? '展开' : '折叠'"
            placement="top"
          >
            <img :src="require('../../assets/icon/course/menu.png')" />
          </el-tooltip>
        </div>
      </div>
    </div>
    <levitatedSphere ref="levitatedSphereRef" @startTime="startTime" />
    <timepiece ref="timepieceRef" />
  </div>
</template>

<script>
import searchArea from "./component/searchArea.vue";
import taskArea from "./component/taskArea.vue";
import dialogArea from "./component/dialogArea.vue";
import levitatedSphere from "./component/levitatedSphere.vue";
import timepiece from "./component/timepiece.vue";
export default {
  emits: ["refresh", "goStep", "backPage", "authority", "review","stopRecording","startRecording"],
  components: {
    searchArea,
    taskArea,
    dialogArea,
    levitatedSphere,
    timepiece
  },
  props: {
    courseDetail: {
      type: Object,
      default: () => {}
    },
    tType: {
      type: Number,
      default: 0
    },
    navList: {
      type: Array,
      default: () => []
    },
    tcid: {
      type: String,
      default: ""
    },
    courseType: {
      type: Number,
      default: 0
    },
    taskCount: {
      type: Number,
      default: 0
    },
    worksStudent: {
      type: Array,
      default: () => []
    },
    fileList: {
      type: Array,
      default: () => []
    },
		videoStart:{
			type:Boolean,
			default:false,
		},
  },
  data() {
    return {
      type: 0,
      itemType: 0, //0--无  1-搜索  2-任务 3-对话
      fileId: [],
      recordType: 0,
			recordLoading:false,
      fold: false,
			openMegaphone:false,//是否打开喇叭
      getFileIdLoading: false
    };
  },
  mounted() {
    this.setWidth();
    this.getFileId();
  },
  methods: {
    setWidth() {
      let w = this.$refs.ch_box;
      let w2 = w.offsetWidth + 30 + "px";
      this.$emit("setWidth", w2);
    },
    openSetting() {
      this.type = this.type == 1 ? 0 : 1;
      this.$nextTick(() => {
        this.setWidth();
      });
    },
    changeItemType(type) {
      this.type = 0;
      this.openSetting();
      this.$nextTick(() => {
        // if (this.itemType == 1 && type != 1) {
        //   this.$refs.searchAreaRef.scrollBottom();
        //   this.$refs.searchAreaRef.getWantSearch();
        // } else if (this.itemType == 2) {
        //   this.$refs.taskAreaRef.scrollBottom();
        // } else if (this.itemType == 3) {
        //   this.$refs.dialogAreaRef.scrollBottom();
        // }
        this.itemType = type;
      });
    },
    //计时
    startTime(time) {
      this.$refs.timepieceRef.startTime(time);
    },
    getFileId() {
      if (this.getFileIdLoading) return;
      this.getFileIdLoading = true;
      this.fileId = [];
      let _this = this;
      let _successFileUrl = [];
      if (this.fileList.length <= 0) retrun;
      let addType = ["DOCX", "DOC", "PPT", "PPTX", "MD", "TXT", "PDF"];
      this.fileList.forEach(i => {
        if (
          addType.includes(
            i.url.split(".")[i.url.split(".").length - 1].toLocaleUpperCase()
          )
        ) {
          _successFileUrl.push(i.url);
        }
      });
      let promiseList = [];
      _successFileUrl.forEach(i => {
        promiseList.push(
          new Promise((resolve, reject) => {
            _this.ajax
              .put("https://gpt4.cocorobo.cn/upload_file_knowledge", {
                url: i
              })
              .then(res => {
                let _data = res.data.FunctionResponse;
                if (_data.result && _data.result.id) {
                  this.fileId.push(_data.result.id);
                }
                resolve();
              });
          })
        );
      });
      Promise.all(promiseList).then(res => {
        this.getFileIdLoading = false;
      });
    },
    startAssistant() {
			if(this.recordLoading)return this.$message.info("请稍等...")
			this.recordLoading = true;
      if (this.recordType == 0) {
			// this.$message.info("开启")
				// this.changeRecordType(1)
        this.$refs.levitatedSphereRef.recordStart();
      } else if (this.recordType == 1) {
				// this.$message.info("关闭")
				// this.changeRecordType(0)
        this.$refs.levitatedSphereRef.stopRecord();
      }
    },
		changeMegaphone(){
			this.openMegaphone = !this.openMegaphone;
			if(this.openMegaphone){
				this.$message.success("已开启AI语音")
			}else{
				this.$message.success("已关闭AI语音")
			}
		},
    // 展开
    changeFold(newValue) {
      // this.$message.info("展开");
			this.fold = newValue;
    },
    changeRecordType(type) {
			this.recordLoading = false;
      this.recordType = type;
    }
  }
};
</script>

<style scoped>
.ch_box {
  width: auto;
  background: rgb(255, 255, 255);
  position: fixed;
  height: calc(100% - 40px);
  border-radius: 10px;
  box-sizing: border-box;
  right: 20px;
  display: flex;
  top: 20px;
  z-index: 1000;
}

.ch_nav_box {
  height: 100%;
  width: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* overflow-y: auto; */
  overflow-x: visible; /* 确保横向溢出内容可见 */
  position: relative;
}

.ch_content_box {
  width: 400px;
  height: 100%;
  border-right: 2px solid #e7e7e7;
}

.ch_nav_box_bottom {
  width: 100%;
  box-sizing: border-box;
  border-top: solid 1px #eaeaea;
  display: flex;
  flex-direction: column;
}

.ch_nav_box_middle {
  width: 100%;
  box-sizing: border-box;
  border-top: solid 1px #eaeaea;
  flex-direction: column;
  justify-content: space-between;
}

.ch_nav_box_middle_item {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  font-size: 14px;
}

.ch_nav_box_middle_item_active {
  background-color: #3681fc;
  color: white;
}

.ch_nav_box_middle_item > img {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}

.ch_nav_box_bottom > div {
  width: 100%;
  height: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.ch_nav_box_bottom > div > img {
  width: 24px;
  height: 24px;
}

.ch_nav_box_top {
  width: 100%;
  margin-top: auto;
}

.ch_nav_box_top > div {
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.ch_nav_box_top > div > img {
  width: 24px;
  height: 24px;
	transition: .3s;
}

.itemFold {
  position: absolute;
  width: 65px;
	left:-65px;
	top: 0;
  background: rgb(255, 255, 255);
  box-sizing: border-box;
  border: solid 1px #eaeaea;
	/* border-top: solid 1px #eaeaea; */
  z-index: 1000; /* 确保二级菜单在主菜单上层 */
	border-radius: 10px;
}

.itemFold > div {
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.itemFold > div > img {
  width: 24px;
  height: 24px;
}
</style>