dbsd_kczx/src/views/site/tongJi/index.vue

<template>
  <a-row class="rowGutter maxRow" :gutter="gutter">
    <a-col :xs="{ span: 15 }" :sm="{ span: 8 }" :lg="{ span: 5 }">
      <a-card class="cardDiv" title="今日课堂数">
        <a-row class="" :gutter="gutter">
          <a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <div class="numberBlob handleCss" >
              <div class="numSpan" @click="showList('jrktzs')">{{ tjData?.jinRiKeTang?.num??0 }}</div>
              <div class="numberName">总数</div>
            </div>
          </a-col>
          <a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <div class="numberBlob handleCss">
              <div class="numSpan green" @click="showList('jrktyxk')">{{ tjData?.jinRiKeTang?.xkktnum??0 }}</div>
              <div class="numberName">
                <i class="fa fa-level-down green"></i>
                <!-- <FallOutlined class="green"/> -->
                已下课
              </div>
            </div>
          </a-col>
        </a-row>
        <!-- <a-divider class="divider"/>
        <div class="buttomDiv wenZiJiaCu">
          <span class="green">
            ↳
          </span>
          腾讯:{{ tjData?.jinRiKeTang?.txktnum??0 }}
          钉钉:{{ tjData?.jinRiKeTang?.ddktnum??0 }}
          其他:{{ tjData?.jinRiKeTang?.qtktnum??0 }}
        </div> -->
      </a-card>
    </a-col>
    <a-col :xs="{ span: 9 }" :sm="{ span: 5 }" :lg="{ span: 3 }">
      <a-card class="cardDiv" title="上课中">
        <a-row class="" :gutter="gutter">
          <a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :lg="{ span: 24 }">
            <div class="numberBlob handleCss" >
              <div class="numSpan orange fs3r" @click="showList('skz')">{{ tjData?.jinRiKeTang?.zzsknum??0 }}</div>
              <div class="numberName">&nbsp;</div>
            </div>
          </a-col>
        </a-row>
        <!-- <a-divider /> -->
        <!-- <div class="buttomDiv"></div> -->
      </a-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :sm="{ span: 11 }" :lg="{ span: 9 }">
      <a-card class="cardDiv" title="已开课堂数">
        <a-row class="" :gutter="gutter">
          <a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
            <div class="numberBlob handleCss" >
              <div class="numSpan" @click="showList('ykktzs')">{{ tjData?.yiKaiKeTang?.num??0 }}</div>
              <div class="numberName">总数</div>
            </div>
          </a-col>
          <a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
            <div class="numberBlob handleCss">
              <div class="numSpan blue" @click="showList('ykkttkkt')">{{ tjData?.yiKaiKeTangNew?.btkktnum??0 }}</div>
              <div class="numberName">
                <!-- <StockOutlined class="blue"/> -->
                <i class="fa fa-bolt blue"></i>
                听课课堂
              </div>
            </div>
          </a-col>
          <a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
            <div class="numberBlob handleCss">
              <div class="numSpan orange" @click="showList('ykkttkrc')">{{ tjData?.yiKaiKeTangNew?.tkrcnum??0 }}</div>
              <div class="numberName">
                <!-- <RiseOutlined class="orange"/> -->
                <i class="fa fa-level-up orange"></i>
                听课人次
              </div>
            </div>
          </a-col>
        </a-row>
        <!-- <a-divider /> -->
        <!-- <div class="buttomDiv"></div> -->
      </a-card>
    </a-col>

    <!-- -- yiKaiKeTang  jinRiTingKe -->
    <a-col :xs="{ span: 15 }" :sm="{ span: `${sfxx =='1'?5:9}` }" :lg="{ span: `${sfxx =='1'?5:7}` }">
      <a-card class="cardDiv" title="今日听课">
        <!-- -<i class="fa-sharp fa-solid fa-user"></i>- -->
        <a-row class="" :gutter="gutter">
          <a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <div class="numberBlob handleCss">
              <div class="numSpan blue" @click="showList('jrtkkts')">{{ tjData?.jinRiTingKe?.btkktnum??0 }}</div>
              <div class="numberName">
                <i class="fa fa-bolt blue"></i>
                课堂数
              </div>
            </div>
          </a-col>
          <a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <div class="numberBlob handleCss">
              <div class="numSpan orange" @click="showList('jrtktkrc')">{{ tjData?.jinRiTingKe?.tkrcnum??0 }}</div>
              <div class="numberName">
                <i class="fa fa-level-up orange"></i>
                听课人次
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :xs="{ span: 9 }" :sm="{ span: 1 }" :lg="{ span: 2 }" v-if="sfxx =='1'">
      <div style="margin: 0 auto;width: fit-content;font-size: 6rem;font-weight: 700;color: #cccccc8c;padding: 29px 0;">
        <!-- <RouterLink class="plusButton" to="/dashboard/analysis"><PlusOutlined/></RouterLink> -->
        <RouterLink class="plusButton" to="/dashboard/analysis" target="_blank" >+</RouterLink>
      </div>
    </a-col>
  </a-row>
  <jrktzs ref="jrktzsRef"/>
  <jrktyxk ref="jrktyxkRef"/>
  <skz ref="skzRef"/>
  <ykktzs ref="ykktzsRef"/>
  <ykkttkkt ref="ykkttkktRef"/>
  <ykkttkrc ref="ykkttkrcRef"/>
  <jrtkkts ref="jrtkktsRef"/>
  <jrtktkrc ref="jrtktkrcRef"/>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
// import { PlusOutlined, FallOutlined, RiseOutlined, StockOutlined } from '@ant-design/icons-vue';
import { dateUtil, formatToDate } from '/@/utils/dateUtil';
import { defHttp } from '/@/utils/http/axios';

import jrktzs from './show/jrktzs.vue';
import jrktyxk from './show/jrktyxk.vue';
import skz from './show/skz.vue';
import ykktzs from './show/ykktzs.vue';
import ykkttkkt from './show/ykkttkkt.vue';
import ykkttkrc from './show/ykkttkrc.vue';
import jrtkkts from './show/jrtkkts.vue';
import jrtktkrc from './show/jrtktkrc.vue';
  import { useUserStore } from '/@/store/modules/user';
// import { useMessage } from "/@/hooks/web/useMessage";

// const { createConfirm } = useMessage();
enum Api {
  list = '/ktgl/kcKetangbiao/getCountList',
}

const userStore = useUserStore();
const sfxx = ref<string>('0');

// interface Data {
//   num: Number,//【今日课堂数：总数】
//   txktnum: Number,//【今日课堂数：腾讯】
//   ddktnum: Number,//【今日课堂数：钉钉】
//   qtktnum: Number,//【今日课堂数：其他】
//   xkktnum: Number,//【今日课堂数：已下课】
//   zzsknum: Number,//【上课中】
// }

/**
 * 列表接口
 * @param params
 */
const list = (params) => defHttp.get({ url: Api.list, params });

const gutter = ref([16,16]);

const tjData = ref<any>({});

const jrktzsRef = ref();
const jrktyxkRef = ref();
const skzRef = ref();
const ykktzsRef = ref();
const ykkttkktRef = ref();
const ykkttkrcRef = ref();
const jrtkktsRef = ref();
const jrtktkrcRef = ref();

let views = {
  jrktzsRef,
  jrktyxkRef,
  skzRef,
  ykktzsRef,
  ykkttkktRef,
  ykkttkrcRef,
  jrtkktsRef,
  jrtktkrcRef,
}


onMounted(() => {
  let skrq = formatToDate(new Date());
  list({ skrq }).then(res => {
    tjData.value = res;
  });

  let roleList = userStore?.getUserInfo?.roleList;
  if(roleList){
    for(var i=0;i<roleList.length;i++){
      var roleCode = roleList[i].roleCode
      if(roleCode == 'admin' || roleCode == 'jwms'){
        sfxx.value = "1";
      }
    }
  }
});

function showList(type){

  console.log(`🚀 -------------------------------------------------🚀`);
  console.log(`🚀 ~ file: index.vue:199 ~ showList ~ type:`, type);
  console.log(`🚀 -------------------------------------------------🚀`);

  let view = views[type + 'Ref'];

  console.log(`🚀 -------------------------------------------------🚀`);
  console.log(`🚀 ~ file: index.vue:205 ~ showList ~ view:`, view, views);
  console.log(`🚀 -------------------------------------------------🚀`);

  if(view){
    view.value.open();
  }
}

</script>
<style lang="less" scoped>
.numberBlob {
  text-align: center;
  // height: 100px;
  height: 4rem;
  .numSpan {
    font-size: 2rem;
  }
  .numberName {
    font-weight: 700;
  }
  .fs3r {
    font-size: 3rem;
  }
}
.green {
  color: #1ab394;
}
.orange {
  color: #ed9535;
}
.blue {
  color: #1c84c6;
}

.cardDiv {
  :deep(.ant-divider-horizontal) {
    margin: 12px 0;
  }
  :deep(.ant-card-head-title) {
    font-weight: 700;
  }
}
.maxRow :deep(.ant-card-body) {
  // padding: 0 24px 24px;
}

.buttomDiv {
  font-size: .4rem;
  height: 1rem;
}

.plusButton{
  & :hover,& :active{
    color: #cccccc8c;
  }
  color: #cccccc8c;
}
.handleCss{
  cursor:pointer;
}
</style>