dianshang-qianduan/src/views/learningCenter/learningResources.vue

<template>
  <div class="app-container">
    <el-scrollbar height="780px" always>
    <!-- <div class="app-container"> -->
      <!-- <div class="main"> -->
        <el-row :gutter="40">
          <el-col :span="3" v-for="i in item" :key="i">
            <div class="zs">
              <div class="el_top">
                <a  target="_blank" @click="showResource(i.resourcesUrl)">
                <span style="color:#FFFFFF">{{i.resourcesName}}</span>
                </a>
              </div>
  
              <div class="el_bon">
                <!-- <a :href="getImgLink(i.resourcesUrl)" target="_blank"> -->
                  <a target="_blank" @click="showResource(i.resourcesUrl)">
                  <img :src="getImg(i.resourcesImg)"/>
                </a>
              </div>
            </div>
          </el-col>
        </el-row>
      <!-- </div> -->
    <!-- </div> -->
  </el-scrollbar>
  </div>
   
  </template>
  <script setup>
 import * as API from "@/api/prtrait/prtrait.js" 
  import { getAssetsFile } from '@/utils';
  // import { getUserId } from '@/utils/auth'
 import { onMounted } from "vue";
  const getImg=(i)=>{
    return getAssetsFile('images/'+i)
  }
  const getImgLink=(i)=>{
    return i
  }
  const data=ref({
    "stuScoreDetailsDTO":{
       "learningProjects":"资源学习",
       "assessmentItems":"观看资源",
       "viewingTime":0,
       "userId":'487',
     }
  })
  const item=ref({})
 
 onMounted(()=>{
    API.learningResourcesView({module:data.value.stuScoreDetailsDTO.module}).then((res)=>{
       item.value=res.data
    })
 })
 
  const showResource=async(i)=>{
    console.log(i);
    // const newWindow=window.open(`http://192.168.2.4:8800/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}`)
  //  window.open(`http://qkljr.sztzjy.com:90/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}`)
  if(i.includes('mp4')){
  const newWindow=window.open('','_blank')
  newWindow.document.write(`
      <html>
      <head>
          <title>视频播放</title>
          <style>
              body {
                  margin: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 100vh;
                  background-color: #333333;
              }
              video {
                  width: 90%;
                  // max-width: 800px;
              }
          </style>
      </head>
      <body>
          <video controls autoplay controlsList="nodownload">
              <source src="http://118.31.7.2:96/report${i}" type="video/mp4">
          </video>
      </body>
      </html>
  `);
  }
  if(i.includes('pdf')){
    //  window.open(`http://qkljr.sztzjy.com:90/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}#toolbar=0`)
     window.open(`http://118.31.7.2:96/report${i}#toolbar=0`)
    // window.open(`http://202.199.90.115:8800/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}`)
  }
  
  }
  const timer=ref(null)
    let seconds=0
    onMounted(()=>{
      timer.value=setInterval(()=>{
        seconds++
      },1000)
    })
    onBeforeUnmount(()=>{
       item.value={}
       if(timer.value){
          clearInterval(timer.value)
       }
       data.value.stuScoreDetailsDTO.viewingTime=seconds
       API.resourcesLearningScoreStatistics(data.value)
    })
  
  
  const taskTime=async()=>{
 
  }
  </script>
  <style lang="scss" scoped>
  .app-container {
    // background-color: #fff;
    // border-radius: 6px;
    // padding: 25px 25px 25px 0;
    .k_main {
      width: 98%;
      display: inline-block;
      margin: 20px;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
      height: 750px;
      background-color: white;
      border-radius: 10px;
    }
    .el-col-4 {
      margin-bottom: 30px;
    }
    .zs {
      margin-bottom: 36px;
      border: 1px solid #dcdfe6;
      border-radius: 8px;
    }
    .main {
    }
    .el_top {
      height: 66px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 550;
      color: #333333;
      padding: 7px;
      text-align: center;
    }
    .el_bon {
      display: flex;
      justify-content: center;
      background-color: whitesmoke;
      padding: 10px 27px 10px 27px;
      img {
        width: 151px;
        height: 180px;
      }
    }
    .el-row {
      margin-bottom: 20px;
    }
    .el-row:last-child {
      margin-bottom: 0;
    }
    .el-col {
      border-radius: 4px;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
    }
  
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
  }
  </style>