dbsd_kczx/src/views/site/index.vue

<template>
  <div id="siteMain">
    <div id="maxSite" :style="maxClassName">
      <a-layout>
        <!-- 页头 -->
        <headerPage showRightButton/>
        <!-- 主体部分 -->
        <a-layout-content>
          <!-- 统计 -->
          <tongjiPage v-if="getUserSf()=='T'&&getSysConfig().flag7=='1'"/>
          <!-- 轮播图 -->
          <lunboPage/>
          <!-- 通知公告 -->
          <tongZhiGongGaoPage/>
          <!-- 听课足迹 -->
          <tingKeZuJiPage v-if="getUserSf()=='T'"/>
          <!-- 任教教程 -->
          <renKeJiaoChengPage v-if="getUserSf()=='T'&&getSysConfig().flag2=='1'" />
          <!-- 评价结果 -->
          <pjjgPage hidden/>
          <!-- 预约课程 -->
          <yuYueKeChengPage  ref="yykcModeal" @orther-load="yykcLoad" v-if="getUserSf()=='T'&&getSysConfig().flag3=='1'"/>
          <!-- 精彩公开课 -->
          <jingCaiGongKaiKePage v-if="getUserSf()=='T'&&getSysConfig().flag4=='1'"/>
          <!-- 可线上听课课堂 -->
          <kxstkktPage v-if="getUserSf()=='T'&&getSysConfig().flag5=='1'"/>
          <!-- 今日课程列表 -->

        <a-card class="rowGutter" v-if="getUserSf()=='T'&&getSysConfig().flag6=='1'" id="jrkclbDom">
            <template #title>
              <span style="font-size: 24px;font-weight: bold;">今日课程列表</span>
              <span style="margin-left: 5%;font-weight: 700;color: red;font-size: 16px;">{{getSysConfig().jrktTitle}}</span>
            </template>
            <a-tabs v-model:activeKey="activeKey" type="card" @change="kclbCard">
              <a-tab-pane key="1">
                <template #tab>
                    <div style="font-weight: 600;font-size: 16px;">{{zzskTitle}}</div>
                </template>
                <kclbZzsk ref="zzskModeal" @jrkclb-load="jrkclbLoad"></kclbZzsk>
              </a-tab-pane>
              <a-tab-pane key="2">
                <template #tab>
                    <div style="font-weight: 600;font-size: 16px;">下一节课</div>
                </template>
                <kclbXyjk ref="xyjkModeal" @jrkclb-load="jrkclbLoad"></kclbXyjk>
              </a-tab-pane>
              <a-tab-pane key="3">
                <template #tab>
                    <div style="font-weight: 600;font-size: 16px;">日课表</div>
                </template>
                <kclbRkb ref="rkbModeal" @jrkclb-load="jrkclbLoad"></kclbRkb>
              </a-tab-pane>
            </a-tabs>
          </a-card>
          <!-- 课堂随笔 -->
          <ktsbPage />

        </a-layout-content>
          <!-- 学生部分今日课表 -->
        <StudentJrkbPage v-if="getUserSf()=='S'"></StudentJrkbPage>
          <!-- 学生部分近六日课表 -->
        <StudentJlrkbPage v-if="getUserSf()=='S'"></StudentJlrkbPage>
        <!-- 页尾 -->
        <footerPage/>
      </a-layout>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted  } from 'vue';

  import headerPage from '/@/views/site/common/header.vue';
  import footerPage from '/@/views/site/common/footer.vue';

  import tongjiPage from '/@/views/site/tongJi/index.vue';
  import lunboPage from '/@/views/site/lunBo/index.vue';
  import tongZhiGongGaoPage from '/@/views/site/tongZhiGongGao/index.vue';
  import renKeJiaoChengPage from '/@/views/site/renKeJiaoCheng/index.vue'
  import tingKeZuJiPage from '/@/views/site/tingKeZuJi/index.vue'
  import yuYueKeChengPage from '/@/views/site/yuYueKeCheng/index.vue'
  import jingCaiGongKaiKePage from '/@/views/site/jingCaiGongKaiKe/index.vue'
  import kxstkktPage from '/@/views/site/kxstkkt/index.vue'
  import ktsbPage from '/@/views/site/ktsb/index.vue'


  
  import kclbZzsk from '/@/views/site/jrkclb/kclbZzsk.vue';
  import kclbXyjk from '/@/views/site/jrkclb/kclbXyjk.vue';
  import kclbRkb from '/@/views/site/jrkclb/kclbRkb.vue';


  import StudentJrkbPage from '/@/views/site/studentJrkb/index.vue';
  import StudentJlrkbPage from '/@/views/site/studentJlrkb/index.vue';

  import pjjgPage from '/@/views/site/pjjgPage/index.vue';

  import { getUserSf,getSysConfig } from '/@/views/site/utils/index';
  import { defHttp } from '/@/utils/http/axios';

  // const headerPage = () => import('/@/views/site/common/header.vue');
  // const footerPage = () => import('/@/views/site/common/footer.vue');

  // const tongjiPage = () => import('/@/views/site/tongJi/index.vue');
  // const lunboPage = () => import('/@/views/site/lunBo/index.vue');
  // const tongZhiGongGaoPage = () => import('/@/views/site/tongZhiGongGao/index.vue');
  // const renKeJiaoChengPage = () => import('/@/views/site/renKeJiaoCheng/index.vue');
  // const tingKeZuJiPage = () => import('/@/views/site/tingKeZuJi/index.vue');
  // const yuYueKeChengPage = () => import('/@/views/site/yuYueKeCheng/index.vue');
  // const jingCaiGongKaiKePage = () => import('/@/views/site/jingCaiGongKaiKe/index.vue');
  // const kxstkktPage = () => import('/@/views/site/kxstkkt/index.vue');

  // const kclbZzsk = () => import('/@/views/site/jrkclb/kclbZzsk.vue');
  // const kclbXyjk = () => import('/@/views/site/jrkclb/kclbXyjk.vue');
  // const kclbRkb = () => import('/@/views/site/jrkclb/kclbRkb.vue');


  // const StudentJrkbPage = () => import('/@/views/site/studentJrkb/index.vue');
  // const StudentJlrkbPage = () => import('/@/views/site/studentJlrkb/index.vue');


  const activeKey = ref('1');
  const zzskModeal = ref();
  const xyjkModeal = ref();
  const rkbModeal = ref();
  const yykcModeal = ref();
  const maxClassName = ref<any>({});
  const zzskTitle = ref('正在上课');
  const queryParam = ref<any>({});

  const jclist = (queryParam) => defHttp.get({ url: '/kcJieci/kcJieci/getIndexJcList', params:queryParam });
  // 实时计算浏览器的宽度
    // window.onresize = () => {
    //   return (() => {
    //       let fullWidth = document.documentElement.clientWidth;
    //     let width = fullWidth; // 宽
    //     if(width<600){
    //       maxClassName.value = {width:"100%"}
    //     }else if(width>=500&&width<1070){
    //       width = width-300
    //       maxClassName.value = {width:width+"px"}
    //     }else{
    //       width = 1070
    //       maxClassName.value = {width:width+"px"}
    //     }
    //   })()
    // };

  //进入就加载
  onMounted(() => {
    // var width = window.screen.width * window.devicePixelRatio;
    // console.log(`🚀 ~ file: index.vue:104 ~ onMounted ~ width:`, width)
    // if(width<1070){
    //   width = width-200
    //   maxClassName.value = {width:width+"px"}
    // }else{
    //   width = 1070
    //   maxClassName.value = {width:width+"px"}
    // }

    jclist(queryParam.value).then(res=>{
      var list = res
      let sjsksj = list[0].sjsksj
      console.log(`🚀 ~ file: index.vue:135 ~ jclist ~ sjsksj:`, sjsksj)
      if(sjsksj){
        let nowDate = new Date();
        let nowDate2 = new Date(sjsksj);
          console.log(`🚀 ~ file: index.vue:140 ~ jclist ~ nowDate.getTime():`, nowDate.getTime(),nowDate2.getTime())
        if(nowDate.getTime()<nowDate2.getTime()){
          zzskTitle.value = "即将上课";
        }else{
          zzskTitle.value = "正在上课";
        }
      }else{
        zzskTitle.value = "正在上课";
      }
    })
  });

  /**
   * 刷新预约课程列表数据
   */
  function jrkclbLoad(){
    console.log(`🚀 ~ file: index.vue:1301111111:`)
    yykcModeal.value.newFunction()
  }
  /**
   * 刷新今日课程列表数据
   */
  function yykcLoad(){
    kclbCard(1)
    kclbCard(2)
    kclbCard(3)
  }
  function kclbCard(activeKey){
    if(activeKey==1){
      zzskModeal.value.zbLoadData();
    }else if(activeKey==2){
      xyjkModeal.value.zbLoadData();
    }else if(activeKey==3){
      rkbModeal.value.zbLoadData();
    }
  }

  //-----------------------------yangjun-----------------------
  //-----------------------------yangjun-----------------------

</script>
<style lang="less" scoped>
#siteMain {
  // font-size: ;
  // height: 100%;
  background: #f3f3f4;
  #maxSite {
    //最大宽度
    max-width: 1070px;
    //居中
    margin: 0 auto;
    .rowGutter{
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .ant-layout-header {
      color: #fff;
      background: #1ab394;
    }
    .ant-layout-footer {
      line-height: 1.5;
      background: #FFF;
    }
    .ant-layout-sider {
      color: #fff;
      line-height: 120px;
      background: #3ba0e9;
    }
    .ant-layout-content {
      min-height: 120px;
      color: #000;
      line-height: 120px;
      background: #f3f3f4;
    }
  }
}
/**暗黑模式特殊配色*/
[data-theme='dark'] #siteMain #maxSite {
  .ant-layout-header, .ant-layout-footer {
    background: #6aa0c7;
  }
  .ant-layout-content {
    background: #107bcb;
  }
  .ant-layout-sider {
    background: #3499ec;
  }
}
</style>
<style>
.wenZiJiaCu {
  font-weight: 700;
}
a {
  color: #337ab7;
}
</style>