|
|
@@ -0,0 +1,575 @@
|
|
|
+<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">
|
|
|
+ <img :src="require('../../assets/icon/course/return.png')" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div @click="$emit('refresh')" class="ch_nav_box_top_item">
|
|
|
+ <img :src="require('../../assets/icon/course/refresh.png')" alt="" />
|
|
|
+ </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>助教</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ch_nav_box_bottom">
|
|
|
+ <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> -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+import workFlowIframe from "./component/workFlowIframe.vue";
|
|
|
+export default {
|
|
|
+ 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 = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</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: 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-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>
|
SanHQin