course_resource/src/views/main.vue

<template>
  <div style="height:100%">
    <Header v-if="!gotype.gotype"></Header>
    <div class="container">
      <div class="container-left" :style="leftShow ? { width: 0 } : { width: '240px' }" v-if="!gotype.gotype">
        <div class="container-left-top" @click="dialogVisible1 = !dialogVisible1">
          <span>
            <img class="icon-img" :src="img11" alt="AI 应用" />AI通识课
            <img v-if="dialogVisible1" class="up" :src="img3" alt="up" />
            <img v-else class="up" :src="down" alt="down" />
          </span>
        </div>
        <transition name="fade">
          <div v-if="dialogVisible1">
            <div :class="activeIndex == 0 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(0)">
              教学中心
            </div>
            <!-- v-if="isLogin" -->
            <div :class="activeIndex == 9 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(9)">
              创建课程
            </div>
            <!-- <div :class="activeIndex == 5 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(5)">
              学生评价
            </div> -->
            <div v-if="admin" :class="activeIndex == 6 ? 'container-left-top active' : 'container-left-top'"
              @click="clickSwitch(6)">
              学生管理
            </div>
          </div>
        </transition>
        <div class="container-left-top" @click="dialogVisible = !dialogVisible">
          <span>
            <img class="icon-img" :src="img2" alt="AI 应用" />AI 应用
            <img v-if="dialogVisible" class="up" :src="img3" alt="up" />
            <img v-else class="up" :src="down" alt="down" />
          </span>
        </div>
        <transition name="fade">
          <div v-if="dialogVisible">
            <div :class="activeIndex == 1 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(1)">
              应用中心
            </div>
            <div :class="activeIndex == 2 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(2)">
              创建应用
            </div>
            <div :class="activeIndex == 7 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(7)">
              教学空间
            </div>
            <div :class="activeIndex == 8 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(8)">
              学习空间
            </div>
            <!-- <div :class="activeIndex == 3 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(3)">
              AI
              应用精选</div> -->
            <div :class="activeIndex == 4 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(4)">
              知识库
            </div>
          </div>
        </transition>
        <div class="container-left-show" :style="!leftShow ? { left: '200px' } : { left: '0' }"
          @click="leftShow = !leftShow">
          <span v-if="leftShow"><el-icon><ArrowRight /></el-icon></span>
          <span v-else><el-icon><ArrowLeft /></el-icon></span>
        </div>
      </div>
      <div class="main" :style="leftShow ? { width: '100%' } : ''" v-if="activeIndex == 0" :class="[gotype.gotype ? 'liyuan' : '']">
        <div class="pgb" v-if="gotype.gotype && gotype.gotype == 'CourseCon'">
          <div @click="backO" class="pgbL">
              <img src="../assets/icon/backPage.svg" alt="">
              <div style="font-weight: 700;">AI通识课</div>
          </div>
        </div>
        <!-- <BannerVue></BannerVue> -->
        <CourseSelect></CourseSelect>
        <AIExperience></AIExperience>
        <AIexploration></AIexploration>
        <DemoCurourse v-if="lang.lang != 'hk'" />
        <!-- <resource></resource> -->
        <Practice></Practice>
        <!-- <other v-if="!isupdateCourse"></other> -->
        <!-- <Edu v-if="isLogin"></Edu> -->
      </div>
      <div class="iframe" :style="leftShow ? { width: '100%' } : ''" v-else-if="activeIndex == 1" v-loading="loading">
        <iframe ref="iframeRef1" :src="iframeRef1Url" 
        allow="camera *; microphone *;display-capture;midi;encrypted-media;clipboard-write;clipboard-read" :webkitallowfullscreen="true" :mozallowfullscreen="true" :allowfullscreen="true"
        frameborder="0"></iframe>
      </div>
      <div class="iframe" :style="leftShow ? { width: '100%' } : ''" v-else-if="activeIndex == 2" v-loading="loading">
        <iframe ref="iframeRef2" :src="iframeRef2Url" 
        allow="camera *; microphone *;display-capture;midi;encrypted-media;clipboard-write;clipboard-read" :webkitallowfullscreen="true" :mozallowfullscreen="true" :allowfullscreen="true"
        frameborder="0"></iframe>
        <el-dialog v-model="iframeRef2Dialog" width="450" @close="clickSwitch(1)">
          <template #header="{ }">
            <div class="my-header">
              <h4 style="display: flex;align-items: center;color: #0354D7;font-weight: bold;"><img :src="info" alt=""
                  style="margin-right: 5px;" />无权访问 !</h4>
            </div>
          </template>
          <div class="dialog-content">
            暂无开通权限，请通过<span style="color: #0354D7;font-weight: bold;">“support@cocorobo.cc”</span>联系管理员。
          </div>
          <template #footer="{ }">
            <div class="dialog-footer" style="text-align: right;">
              <el-button @click="clickSwitch(1)">返回</el-button>
              <el-button type="primary" @click="copyEmail">复制邮箱</el-button>
            </div>
          </template>

        </el-dialog>
      </div>
      <div class="iframe" :style="leftShow ? { width: '100%' } : ''" v-else-if="activeIndex == 3" v-loading="loading">
        <iframe 
        allow="camera *; microphone *;display-capture;midi;encrypted-media;clipboard-write;clipboard-read" :webkitallowfullscreen="true" :mozallowfullscreen="true" :allowfullscreen="true"
        ref="iframeRef" src="//app.cocorobo.cn/#/appSelection" frameborder="0"></iframe>
      </div>
      <div class="iframe" :style="leftShow ? { width: '100%' } : ''" v-else v-loading="loading">
        <iframe 
        allow="camera *; microphone *;display-capture;midi;encrypted-media;clipboard-write;clipboard-read" :webkitallowfullscreen="true" :mozallowfullscreen="true" :allowfullscreen="true"
        ref="iframeRef4" :src="iframeRef1Url4" frameborder="0"></iframe>
      </div>
    </div>
    <Feedback></Feedback>
  </div>
</template>
<script setup>
import { ref, watchEffect, onMounted, inject } from 'vue';
import { ArrowLeft,ArrowRight } from '@element-plus/icons-vue'
import img1 from '@/assets/icon/1.png'
import img11 from '@/assets/icon/1-1.png'
import img2 from '@/assets/icon/2.png'
import img3 from '@/assets/icon/up.png'
import down from '@/assets/icon/down.png'
import info from '@/assets/icon/info.png'
import shows from '@/assets/icon/show.png'
import BannerVue from '@/components/main/banner.vue'
import CourseSelect from '@/components/main/courseSelect.vue'
import DemoCurourse from '@/components/main/demoCourse.vue'
import resource from '@/components/main/resource.vue';
import Practice from '@/components/main/Practice.vue';
import AIExperience from '@/components/main/AIExperience.vue';
import AIexploration from '@/components/main/AIexploration.vue';
import other from '@/components/main/other.vue';
import Edu from '@/components/main/edu.vue';
import Feedback from '@/components/main/feedback.vue';
import Header from './header.vue'
import { userCurrentRole, userInfoStore,pageGotype } from '../stores/counter'
const lang = inject('lang')

const user = userInfoStore()
const CurrentRole = userCurrentRole()
const gotype = pageGotype()

const isupdateCourse = ref(false)
const isLogin = ref(false)
const activeIndex = ref(0)
const dialogVisible = ref(true)
const dialogVisible1 = ref(true)
const iframeRef = ref(null)
const iframeRef1 = ref(null)
const iframeRef2 = ref(null)
const iframeRef4 = ref(null)
const loading = ref(false)
const iframeRef1Url = ref('')
const iframeRef2Url = ref('')
const iframeRef1Url4 = ref('')
const iframeRef2Dialog = ref(false)
const leftShow = ref(false)
const admin = ref(false)

onMounted(() => {
  // let timer = setInterval(() => {
  //   if (JSON.stringify(user.user) != "{}") {
  //     clickSwitch(1)
  //     clearInterval(timer)
  //   }
  // }, 10);
})


watchEffect(() => {
  // console.log('111111111111',CurrentRole, user.user)
  if (JSON.stringify(user.user) != "{}") {
    isLogin.value = true
    if (CurrentRole.currentRole == "edupersonnel" || CurrentRole.currentRole == "areaAdministrator" || CurrentRole.currentRole == "userAdministrator" || CurrentRole.currentRole == "securityAuditor" || CurrentRole.currentRole == "schoolAdministrator" || CurrentRole.currentRole == "schoolSecurityAuditor" || CurrentRole.currentRole == "teacher" || user.user.type != 2) {
      isupdateCourse.value = true
    }

    if (CurrentRole.currentRole == "edupersonnel" || CurrentRole.currentRole == "areaAdministrator" || CurrentRole.currentRole == "userAdministrator" || CurrentRole.currentRole == "securityAuditor" || CurrentRole.currentRole == "schoolAdministrator" || CurrentRole.currentRole == "schoolSecurityAuditor" || CurrentRole.currentRole == "teacher" || user.user.type != 2) {
      admin.value = true
    }
  }
})

const clickSwitch = (index) => {
  console.log('clickSwitch', activeIndex.value)
  if (index == 1 && activeIndex.value != 1) {
    loading.value = true
    iframeRef1Url.value = `//app.cocorobo.cn/#/appManagement?userid=${user.user.userid}&oid=${user.user.organizeid}&org=${user.user.org}&role=${user.user.role}`
    setTimeout(() => {
      iframeRef1.value.onload = () => {
        loading.value = false
      }
    }, 100)
  } else if (index == 3 && activeIndex.value != 3) {
    loading.value = true
    setTimeout(() => {
      iframeRef.value.onload = () => {
        loading.value = false
      }
    }, 10)
  } else if (index == 2 && activeIndex.value != 2) {
    loading.value = true
    iframeRef2Url.value = `//app.cocorobo.cn/#/AppList?userid=${user.user.userid}&oid=${user.user.organizeid}&org=${user.user.org}&role=${user.user.role}`
    setTimeout(() => {
      iframeRef2.value.onload = () => {
        loading.value = false
      }
    }, 10)
  } else if (index == 4 && activeIndex.value != 4) {
    loading.value = true
    // //storage.cocorobo.cn/dist/#/knowledge?userid=b7ccc834-aae5-11ea-a8d4-52540005ab01&oid=45facc0a-1211-11ec-80ad-005056b86db5&org=null
    iframeRef1Url4.value = `//storage.cocorobo.cn/dist/#/knowledge?userid=${user.user.userid}&oid=${user.user.organizeid}&org=${user.user.org}`
    setTimeout(() => {
      iframeRef4.value.onload = () => {
        loading.value = false
      }
      loading.value = false
    }, 100)
  } else if (index == 5 && activeIndex.value != 5) {
    loading.value = true
    // iframeRef1Url4.value = `//pbl.cocorobo.cn/pbl-teacher-table/dist/#/works?userid=4e748720-5878-11ef-b873-005056b86db5&oid=46034950-39b1-11ef-b873-005056b86db5&org=16ace517-b5c7-4168-a9bb-a9e0035df840`
    iframeRef1Url4.value = `//pbl.cocorobo.cn/pbl-teacher-table/dist/#/works?userid=${user.user.userid}&oid=${user.user.organizeid}&org=${user.user.org}`
    setTimeout(() => {
      iframeRef4.value.onload = () => {
        loading.value = false
      }
      loading.value = false
    }, 100)
  } else if (index == 6 && activeIndex.value != 6) {
    loading.value = true
    //pbl.cocorobo.cn/pbl-teacher-table/dist/#/grade?userid=4e748720-5878-11ef-b873-005056b86db5&oid=46034950-39b1-11ef-b873-005056b86db5&org=16ace517-b5c7-4168-a9bb-a9e0035df840
    iframeRef1Url4.value = `//pbl.cocorobo.cn/pbl-teacher-table/dist/#/studentManageNew?userid=${user.user.userid}&oid=${user.user.organizeid}&org=${user.user.org}&role=${user.user.role}`
    setTimeout(() => {
      iframeRef4.value.onload = () => {
        loading.value = false
      }
      loading.value = false
    }, 100)
  } else if (index == 7 && activeIndex.value != 7) {
    loading.value = true
    //pbl.cocorobo.cn/pbl-teacher-table/dist/#/grade?userid=4e748720-5878-11ef-b873-005056b86db5&oid=46034950-39b1-11ef-b873-005056b86db5&org=16ace517-b5c7-4168-a9bb-a9e0035df840
    iframeRef1Url4.value = `//app.cocorobo.cn/#/teachingModel?userid=${user.user.userid}&oid=${user.user.organizeid}&org=${user.user.org}&role=${user.user.role}`
    setTimeout(() => {
      iframeRef4.value.onload = () => {
        loading.value = false
      }
      loading.value = false
    }, 100)
  } else if (index == 8 && activeIndex.value != 8) {
    loading.value = true
    //pbl.cocorobo.cn/pbl-teacher-table/dist/#/grade?userid=4e748720-5878-11ef-b873-005056b86db5&oid=46034950-39b1-11ef-b873-005056b86db5&org=16ace517-b5c7-4168-a9bb-a9e0035df840
    iframeRef1Url4.value = `//app.cocorobo.cn/#/cocobookllm?userid=${user.user.userid}&oid=${user.user.organizeid}&org=${user.user.org}&role=${user.user.role}`
    setTimeout(() => {
      iframeRef4.value.onload = () => {
        loading.value = false
      }
      loading.value = false
    }, 100)
  } else if (index == 9 && activeIndex.value != 9) {
    loading.value = true
    //pbl.cocorobo.cn/pbl-teacher-table/dist/#/grade?userid=4e748720-5878-11ef-b873-005056b86db5&oid=46034950-39b1-11ef-b873-005056b86db5&org=16ace517-b5c7-4168-a9bb-a9e0035df840
    iframeRef1Url4.value = `//pbl.cocorobo.cn/pbl-teacher-table/dist/#/course?userid=${user.user.userid}&oid=${user.user.organizeid}&org=${user.user.org}&role=${user.user.role}`
    
    setTimeout(() => {
      iframeRef4.value.onload = () => {
        loading.value = false
      }
      loading.value = false
    }, 100)
  }
  activeIndex.value = index
}

const copyEmail = () => {
  navigator.clipboard.writeText('support@cocorobo.cc').then(() => {
    console.log('复制成功');
  }).catch((error) => {
    console.error('复制失败:', error);
  });
}
const backO = () => {
  window.location.href = `https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/CourseCon?userid=${user.user.userid}&oid=${user.user.oid}&org=${user.user.org}&role=${user.user.role}&tType=${user.user.tType}`
}
const show = () => {
  console.log('show')
}
</script>
<style lang="scss">
.container {
  display: flex;
  overflow: hidden;
  align-items: center;

  .container-left {
    height: calc(100vh - 60px);
    width: 240px;
    background: #fff;
    overflow: hidden;
    padding-top: 0px;

    .container-left-top {
      margin: 0 10px 0 10px;
      font-size: 14px;
      color: #111;
      font-weight: 500;
      padding: 10px 0 10px 40px;
      position: relative;
      cursor: pointer;
      transition: all 0.7s ease 0ms;

      .icon-img {
        position: absolute;
        top: 10px;
        left: 15px;
      }

      .up {
        position: absolute;
        top: 15px;
        left: 140px;
      }

      div {
        background-color: #fff;
        padding: 5px 0;
        color: #00000099;
      }

    }
    .container-left-show{
      position: fixed;
      top: 60px;
      left: 0;
      z-index: 99;
    }

    .container-left-show span{
      display: inline-block;
      width: 35px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      border: 1px solid #E7E7E7;
      cursor: pointer;
      background-color: #fff;
      border-radius: 5px;
      z-index: 99;
    }
  }

  .main {
    background: #F0F2F5;
    padding: 20px 10%;
    width: calc(100% - 240px);
    height: calc(100vh - 60px);
    overflow: auto;
  }
  .liyuan{
    width: 100% !important;
    height: 100vh !important;
    padding: 20px 90px !important;
  }
  .iframe {
    width: calc(100% - 240px);
    height: calc(100vh - 60px);
    position: relative;

    .el-overlay {
      position: absolute !important;

      .el-overlay-dialog {
        position: absolute !important;

        .el-dialog__header {
          text-align: left;
        }
      }
    }

    iframe {
      width: 100%;
      height: 100%;
    }
  }
}

.active {
  background: #F0F2F5;
  color: #0061FF !important;
  border-radius: 5px;
}

/* 渐入渐出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.pgb{
    /* font-family: PingFang SC; */
    font-weight: bold;
    font-size: 20px;
    display: flex;align-items: center;
    gap: 10px;
    padding:20px 0px 0;
    /* height: 23.8px; */
    margin-bottom: 15px;
}
.pgbL{
    display: flex;align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #000;
    font-family: '黑体';
}
</style>