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

<template>
  <a-row class="rowGutter" :gutter="[16,16]">
    <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
      <a-card title="今日课堂数">
        --
        <a-row class="" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <Statistic title="总数" :value="tjData?.jinRiKeTang?.num"/>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <Statistic title="已下课" :value="tjData?.jinRiKeTang?.xkktnum"/>
          </a-col>
        </a-row>
        腾讯:{{ tjData?.jinRiKeTang?.txktnum }}
        钉钉:{{ tjData?.jinRiKeTang?.ddktnum }}
        其他:{{ tjData?.jinRiKeTang?.qtktnum }}
      </a-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ span: 3 }">
      <a-card title="上课中">
        <a-row class="" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
            <Statistic title="&nbsp;" :value="tjData?.jinRiKeTang?.zzsknum"/>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :sm="{ span: 11 }" :lg="{ span: 10 }">
      <a-card title="已开课堂数">
        <a-row class="" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
            <Statistic title="总数" :value="tjData?.jinRiTingKe?.jcktnum"/>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
            <Statistic title="听课课堂" :value="tjData?.jinRiTingKe?.btkktnum"/>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
            <Statistic title="听课人次" :value="tjData?.jinRiTingKe?.tkrcnum"/>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
      <a-card title="今日听课">
        <a-row class="" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <Statistic title="课堂数" :value="tjData?.yiKaiKeTang?.num"/>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
            <Statistic title="听课人次" :value="tjData?.yiKaiKeTang?.zzsknum"/>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :xs="{ span: 24 }" :sm="{ span: 2 }" :lg="{ span: 3 }">
      <div style="margin: 0 auto;width: fit-content;font-size: 3.5rem;color: #cccccc8c;">
        <!-- <a href="/dashboard/analysis"><PlusOutlined/></a> -->
        <RouterLink class="plusButton" to="/dashboard/analysis"><PlusOutlined/></RouterLink>

      </div>
    </a-col>
  </a-row>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { Statistic } from 'ant-design-vue';
import { PlusOutlined } 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 tjData = ref<Data | any>({});
onMounted(() => {
  let skrq = formatToDate(new Date());
  list({ skrq }).then(res => {
    tjData.value = res;
  });
});

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

</script>
<style lang="less" scoped>
.plusButton{
  & :hover,& :active{
    color: #cccccc8c;
  }
  color: #cccccc8c;
}
</style>