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

<template>
  <div class="ch_box" ref="ch_box">
    <div class="ch_content_box" v-show="type == 1">
      <workFlowIframe
        v-show="itemType == 7 && iframeSrc2.length"
        :iframeSrc="iframeSrc2"
      ></workFlowIframe>
    </div>
    <div class="ch_nav_box">
      <div class="ch_nav_box_top">
        <div @click="$emit('backPage')" class="ch_nav_box_top_item">
          <el-tooltip class="item" effect="dark" :content="lang.ssReturn" placement="top">
            <img :src="require('../../assets/icon/course/return.png')" alt="" />
          </el-tooltip>
        </div>

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

      <div class="ch_nav_box_middle">
        <div
          v-if="iframeSrc2.length"
          :class="[
            'ch_nav_box_middle_item',
            itemType == 7 ? 'ch_nav_box_middle_item_active' : ''
          ]"
          @click.stop="changeItemType(7)"
        >
          <img
            v-if="itemType == 7"
            :src="
              require('../../assets/icon/course/teachingAssistant_active.svg')
            "
          />
          <img
            v-if="itemType != 7"
            :src="
              require('../../assets/icon/course/teachingAssistant_default.svg')
            "
          />
          <div>{{ lang.ssAssistant }}</div>
        </div>
      </div>
      <div class="ch_nav_box_bottom">
        <div
          @click.stop="goStep(0)"
          :class="{
            disableBtn: IsFollow || IsLookOpen || splitScreenData.isOpen
          }"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="lang.ssPrevious"
            placement="top"
          >
            <img :src="require('../../assets/icon/course/last.png')" />
          </el-tooltip>
        </div>

        <div
          @click.stop="goStep(1)"
          :class="{
            disableBtn: IsFollow || IsLookOpen || splitScreenData.isOpen
          }"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="lang.ssNext"
            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 ? lang.ssExpand : lang.ssFold"
            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> -->
  </div>
</template>

<script>
import workFlowIframe from "./component/workFlowIframe.vue";
import { myMixin } from "@/mixins/mixin.js";
export default {
  mixins: [myMixin],
  emits: [
    "refresh",
    "goStep",
    "backPage",
    "authority",
    "review",
    "stopRecording",
    "startRecording"
  ],
  components: {
    workFlowIframe
  },
  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
    },
    IsFollow: {
      type: Boolean,
      default: false
    },
    sIsOpen: {
      type: Boolean,
      default: false
    },
    IsLookOpen: {
      type: Boolean,
      default: false
    },
    splitScreenData: {
      type: Object,
      default: () => {
        return {
          isOpen: false,
          userId: "",
          uid: "",
          myUid: ""
        };
      }
    }
  },
  data() {
    return {
      isBtn: false,
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      courseId: this.$route.query.courseId,
      tcid2: this.$route.query.tcid,
      type: 0,
      itemType: 0, //0--无  1-搜索  2-任务 3-对话
      fileId: [],
      showTipsLoading: false,
      tipsList: [],
      firstEnterTime: null,
      canGetTips: true,
      getTipsTimer: null,
      getWangLoading: false,
      canUseWangData: false,
      wangData: "",
      languageSetting: 0,
      uploadFileStatus: {
        file: null,
        status: "",
        percent: 0,
        key: "",
        uploadid: "",
        loading: false
      },
      iframeSrc2: [],
      canUseCourseId: [
        "bfbe1913-2f87-11ef-bf55-005056b86db5",
        "3a64b199-d2eb-11ef-a2d1-005056b86db5",
        "bb0b1995-0207-11ef-b534-005056b86db5",
        "f77921c8-d2f1-11ef-a2d1-005056b86db5"
      ]
    };
  },
  computed: {
    showPopover: {
      get() {
        // return this.Annot
        return (
          this.splitScreenData.isOpen &&
          this.splitScreenData.uid === this.splitScreenData.myUid
        );
      },
      set(newValue) {
        console.log(newValue);

        // this.AnnotationCanvasShow = newValue
      }
    }
  },
  watch: {
    courseType(newValue, oldValue) {
      this.getAiApp();
    },
    taskCount(newValue) {
      this.getAiApp();
    }
  },
  mounted() {
    let setting = this.courseDetail.setting;
    if (setting) {
      setting = JSON.parse(setting);
      if (setting.languageSetting) {
        this.languageSetting = setting.languageSetting;
      }
    }
    this.setWidth();
    this.firstEnterTime = new Date().getTime();
    this.getAiApp();
  },
  methods: {
    setWidth() {
      let w = this.$refs.ch_box;
      let w2 = w.offsetWidth + 20 + "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;

      if (this.itemType == type) {
        this.itemType = 0;
        this.type = 1;
        this.openSetting();
        return;
      }
      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;
      });
    },

    getLang() {
      let lang = "";
      if (this.languageSetting == 0) {
        lang = "Chinese.";
      } else if (this.languageSetting == 1) {
        lang = "Traditional Chinese.";
      } else if (this.languageSetting == 2) {
        lang = "English.";
      }
      return lang;
    },
    getAiApp() {
      try {
        let _chapters = JSON.parse(this.courseDetail.chapters);
        let _list =
          _chapters[this.courseType].chapterInfo[0].taskJson[this.taskCount]
            .chapterData;
        let _app = _list.find(i => i.type == 15);
        if (_app) {
          _app.src = _app.url;
          this.iframeSrc2 = [_app];
        } else {
          this.iframeSrc2 = [];
        }
      } catch (error) {
        console.log("👉==", error);
        this.iframeSrc2 = [];
      }
    },
    goStep(type) {
      if (this.IsFollow || this.IsLookOpen || this.splitScreenData.isOpen)
        return;
      this.$emit("goStep", 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 !important; /* 上下溢出显示滚动条 */
  overflow-x: hidden !important; /* 左右溢出正常溢出 */
  position: relative;
  box-sizing: border-box;
}

.ch_content_box {
  width: 495px;
  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;
}

.disableBtn {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.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-bottom: auto;
}

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

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

.boxItem > img {
  width: 24px;
  height: 24px;
  transition: 0.3s;
}
.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;
}

.ch_nav_box_topFixed {
  width: 100%;
  height: 65px;
  position: absolute;
  top: 0;
  left: 0;
}

.ch_nav_box_topFixed_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65px;
  padding-top: 5px;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
}

.ch_nav_box_topFixed_item > svg {
  width: 25px;
  height: 25px;
  fill: #000;
}

.ch_nav_box_topFixed_item > span {
  margin-top: 5px;
  font-size: 14px;
}

.ch_nav_box_topFixed_item_active {
  background-color: #3681fc;
  color: #fff;
}

.ch_nav_box_topFixed_item_active > svg {
  fill: #fff;
}

.ch_nav_box_topFixed_popover {
  width: 100%;
  height: 65px;
  display: flex;
}

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

.ch_nav_box_topFixed_popover_item > svg {
  width: 30px;
  height: 30px;
  fill: #000;
}

.ch_nav_box_topFixed_popover_item > span {
  margin-top: 5px;
}

.drawerBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.drawerBox > span {
  /* 字体竖着排列; */
  writing-mode: vertical-rl;
  margin-right: 10px;
}
</style>