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

<template>
  <div class="ch_box" ref="ch_box">
    <div class="ch_content_box" v-show="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"
      />
      <countdown
        ref="countdownRef"
        :fileId="fileId"
        :courseDetail="courseDetail"
        v-show="itemType == 3"
      />

      <languageAssistant ref="languageAssistantRef" v-if="itemType == 4" />
      <!-- <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.stop="changeFold(!fold)" ref="foldBtnRef">
          <el-tooltip
            class="item"
            effect="dark"
            :content="fold ? '折叠' : '展开'"
            placement="top"
          >
            <img
              :src="require('../../assets/icon/course/foldIcon.svg')"
              alt=""
							:class="[!fold?'':'foldActive']"
            />
          </el-tooltip>
        </div>

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

        <div
          @click="startRecording()"
          v-if="!videoStart && (tType == 1 || tType == 4)"
        >
          <el-tooltip class="item" effect="dark" content="录制" placement="top">
            <img
              :src="require('../../assets/icon/course/record3.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/record4.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/Countdown2.svg')"
          />
          <img
            v-if="itemType != 3"
            :src="require('../../assets/icon/course/Countdown.svg')"
          />
          <div>倒计时</div>
        </div>
      </div>
      <div class="ch_nav_box_bottom">
        <div @click.stop="commentAndAnnotate()">
          <el-tooltip class="item" effect="dark" content="批注" placement="top">
            <img
              :src="require('../../assets/icon/course/edit2.svg')"
              v-if="!AnnotationCanvasShow"
            />
            <img :src="require('../../assets/icon/course/edit3.svg')" v-else />
          </el-tooltip>
        </div>

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

        <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/robot3.svg')"
            />
            <img v-else :src="require('../../assets/icon/course/robot3.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>
    <div v-if="fold" class="itemFold" ref="itemFoldRef"  v-click-outside="handleBlur">
      <div @click="$emit('backPage')">
          <img :src="require('../../assets/icon/course/return.png')" alt="" />
				<span>返回</span>
      </div>

      <div @click="$emit('refresh')">
          <img :src="require('../../assets/icon/course/refresh.png')" alt="" />
					<span>刷新</span>
      </div>

      <div @click="$emit('authority')" v-if="tType == 1 || tType == 4">
          <img :src="require('../../assets/icon/course/setting2.svg')" alt="" />
					<span>权限</span>
      </div>
    </div>
    <levitatedSphere ref="levitatedSphereRef" @startTime="startTime" />
    <timepiece ref="timepieceRef" />
    <AnnotationCanvas
      ref="AnnotationCanvasRef"
      @close="endCommentAndAnnotate"
      @changeStatus="changeAnnotationCanvasShow"
    />
  </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";
import countdown from "./component/countdown.vue";
import AnnotationCanvas from "./component/AnnotationCanvas.vue";
import languageAssistant from "./component/languageAssistant.vue";
// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function (event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
        binding.value(event);
      }
    };
    // 在文档上添加点击事件监听器
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener("click", el.clickOutsideEvent);
  },
};
export default {
  emits: [
    "refresh",
    "goStep",
    "backPage",
    "authority",
    "review",
    "stopRecording",
    "startRecording"
  ],
	directives: {
    "click-outside": clickOutside, // 注册自定义指令
  },
  components: {
    searchArea,
    taskArea,
    // dialogArea,
    levitatedSphere,
    timepiece,
    countdown,
    AnnotationCanvas,
    languageAssistant
  },
  props: {
    courseDetail: {
      type: Object,
      default: () => {}
    },
    tType: {
      type:String,
      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 {
      userid: this.$route.query.userid,
      courseId: this.$route.query.courseId,
			tcid2: this.$route.query.tcid,
      type: 0,
      itemType: 0, //0--无  1-搜索  2-任务 3-对话
      fileId: [],
      recordType: 0,
      recordLoading: false,
      fold: false,
      openMegaphone: false, //是否打开喇叭
      getFileIdLoading: false,
      AnnotationCanvasShow: false
    };
  },
  mounted() {
    this.setWidth();
    this.getFileId();
  },
  methods: {
		handleBlur(){
			// console.log(this.fold)
			this.fold = !this.fold;
		},
    changeAnnotationCanvasShow(newValue) {
      this.AnnotationCanvasShow = newValue;
    },
    startRecording() {
      this.$emit("startRecording");
      this.insertMemorandum(`使用<span class="btn">录制</span>功能，录制课堂`);
    },
    insertMemorandum(_html) {
      //保存行为操作
      //variable
      //btn
      let params = [
        {
          uid: this.userid,
          courseId: this.courseId+(this.tcid2?this.tcid2:""),
          content: _html
        }
      ];

      this.ajax
        .post(
          this.$store.state.api + "insert_systemOperation_countdownBehavior",
          params
        )
        .then(res => {
          if (res.data == 1) {
            console.log("保存操作成功");
          } else {
            console.log("保存操作失败");
          }
        })
        .catch(e => {
          console.log("保存操作失败");
          console.log(e);
        });
    },
    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(() => {
				if(this.type==1){
					this.$parent.mlDialog = false
				}
        this.setWidth();
      });
    },
    changeItemType(type) {
      this.type = 0;
      this.openSetting();
      // this.$message.info("切换到"+type)
      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;
        if (this.itemType == 4 && this.recordType == 1) {
          //关闭悬浮语音助手
          this.$refs.levitatedSphereRef.stopRecord();
        }

        if (this.itemType == 3) {
          this.insertMemorandum(`打开<span class="btn">倒计时</span>面板`);
        }
      });
    },
    //计时
    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) {
        if (this.itemType == 4) {
          this.itemType = 0;
          this.type = 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;
			this.$nextTick(()=>{
				let e1 = this.$refs.foldBtnRef.getBoundingClientRect();
			let e2 = this.$refs.ch_box.getBoundingClientRect();
			
			console.log('👇👇')
			console.log(e1.top - e2.top)
			this.$refs.itemFoldRef.style.top = e1.top - e2.top + "px";
			})
    },
    // 收起
    changeUnfold(newValue) {
      // this.$message.info("收起");
      this.fold = newValue;
    },
    // 语音识别
    startRecord() {
      this.$refs.levitatedSphereRef.startRecord();
    },
    stopRecord() {
      this.$refs.levitatedSphereRef.stopRecord();
    },
    // 语音合成
    startSpeak() {
    },
    changeRecordType(type) {
      this.recordLoading = false;
      this.recordType = type;
    },
    commentAndAnnotate() {
      this.$refs.AnnotationCanvasRef.open();
      this.insertMemorandum(`开始使用<span class="btn">批注</span>功能`);
    },
    endCommentAndAnnotate() {
      this.insertMemorandum(`结束使用<span class="btn">批注</span>功能`);
    }
  }
};
</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 !important; /* 上下溢出显示滚动条 */
  overflow-x: hidden !important; /* 左右溢出正常溢出 */
  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%;
  height: auto;
  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: 0.3s;
}

.itemFold {
  position: absolute;
  width: 130px;
  right: 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;
	box-sizing: border-box;
	padding:10px;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.itemFold > div {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
	margin: 5px 0;
	border-radius: 10px;
}

.itemFold > div:hover{
	background:#F3F7FD;
}

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

.itemFold > div > span{
	margin-left:10px;
}

@media screen and (max-height: 820px) {
	.ch_nav_box_bottom > div {
		height: auto;
		padding: 8px 0;
	}

	.ch_nav_box_middle_item{
		height: auto;
		padding: 8px 0;
	}

	.ch_nav_box_top > div{
		height: auto;
		padding: 8px 0;
	}
}

.foldActive{
	background-color: #F0F2F5;
	padding: 10px;
	border-radius: 10px;
}
</style>