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

<template>
  <a-row class="rowGutter maxRow" :gutter="gutter">
    <a-col :xs="{ span: 24 }" :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">
              <div class="numSpan">{{ tjData?.jinRiKeTang?.num }}</div>
              <div>总数</div>
            </div>
          </a-col>
          <a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <div class="numberBlob">
              <div class="numSpan green">{{ tjData?.jinRiKeTang?.xkktnum }}</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">
          <!-- <FallOutlined class="green"/> -->
          <span class="green">
            ↳
          </span>
          腾讯:{{ tjData?.jinRiKeTang?.txktnum }}
          钉钉:{{ tjData?.jinRiKeTang?.ddktnum }}
          其他:{{ tjData?.jinRiKeTang?.qtktnum }}
        </div>
      </a-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :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">
              <div class="numSpan orange fs3r">{{ tjData?.jinRiKeTang?.zzsknum }}</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">
              <div class="numSpan">{{ tjData?.jinRiTingKe?.jcktnum }}</div>
              <div class="numberName">总数</div>
            </div>
          </a-col>
          <a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
            <div class="numberBlob">
              <div class="numSpan blue">{{ tjData?.jinRiTingKe?.btkktnum }}</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">
              <div class="numSpan orange">{{ tjData?.jinRiTingKe?.tkrcnum }}</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>
    <a-col :xs="{ span: 24 }" :sm="{ span: 9 }" :lg="{ span: 5 }">
      <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">
              <div class="numSpan blue">{{ tjData?.yiKaiKeTang?.num }}</div>
              <div class="numberName">
                <!-- <StockOutlined class="blue"/> -->
                <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">
              <div class="numSpan orange">{{ tjData?.yiKaiKeTang?.zzsknum }}</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>
    <a-col :xs="{ span: 24 }" :sm="{ span: 1 }" :lg="{ span: 2 }">
      <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">+</RouterLink>
      </div>
    </a-col>
  </a-row>
</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 { useMessage } from "/@/hooks/web/useMessage";

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

// 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>({});
onMounted(() => {
  let skrq = formatToDate(new Date());
  list({ skrq }).then(res => {
    tjData.value = res;
  });
});

</script>
<script setup lang="ts">

</script>
<style lang="less" scoped>
.numberBlob {
  text-align: center;
  // height: 100px;
  height: 4rem;
  .numSpan {
    font-size: 2rem;
  }
  .numberName {
    font-size: .5rem;
    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;
}
</style>