2023年4月3日完善首页

2023-04-03 23:56:45 +08:00 · 2023-04-03 23:56:45 +08:00 · cb8366e415
parent bfbd2820c2
commit cb8366e415
5 changed files with 102 additions and 38 deletions
--- a/src/utils/dateUtil.ts
+++ b/src/utils/dateUtil.ts
@ -6,11 +6,11 @@ import dayjs from 'dayjs';
 const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 const DATE_FORMAT = 'YYYY-MM-DD';

-export function formatToDateTime(date: dayjs.Dayjs | undefined = undefined, format = DATE_TIME_FORMAT): string {
+export function formatToDateTime(date: dayjs.ConfigType | undefined = undefined, format = DATE_TIME_FORMAT): string {
  return dayjs(date).format(format);
 }

-export function formatToDate(date: dayjs.Dayjs | undefined = undefined, format = DATE_FORMAT): string {
+export function formatToDate(date: dayjs.ConfigType | undefined = undefined, format = DATE_FORMAT): string {
  return dayjs(date).format(format);
 }

--- a/src/views/site/common/header.vue
+++ b/src/views/site/common/header.vue
@ -33,8 +33,27 @@

 </template>
 <script setup lang="ts">
+  import { DownOutlined, ArrowUpOutlined } from '@ant-design/icons-vue';
  import { useUserStore } from '/@/store/modules/user';
  //用户相关
  const userStore = useUserStore();

-</script>
+</script>
+<style lang="less" scoped>
+#siteMain {
+  #maxSite {
+    .topTitle {
+      font-size: 1.5rem;
+    }
+    .topRight {
+      float: right;
+      .topRightMenu {
+        font-size: 1.1rem;
+      }
+    }
+    .footerRight {
+      float: right;
+    }
+  }
+}
+</style>
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@ -24,14 +24,23 @@
    </a-card>
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <a-layout>
+      <!-- 页头 -->
      <headerPage/>
+      <!-- 主体部分 -->
      <a-layout-content>
+        <!-- 统计 -->
        <tongjiPage/>
+        <!-- 轮播图 -->
        <lunboPage/>
+        <!-- 通知公告 -->
        <tongZhiGongGaoPage/>
-        <renKeJiaoCheng/>
-        <tingKeZuJi/>
-        <yuYueKeCheng/>
+        <!-- 任课教程 -->
+        <renKeJiaoChengPage/>
+        <!-- 听课足迹 -->
+        <tingKeZuJiPage/>
+        <!-- 预约课程 -->
+        <yuYueKeChengPage/>
+        <jingCaiGongKaiKePage/>
        <a-card class="rowGutter">
          <template #title>
            <span style="font-size: 24px;font-weight: bold;">今日课程列表</span>
@ -59,6 +68,7 @@

        </a-card>
        </a-layout-content>
+        <!-- 页尾 -->
        <footerPage/>
    </a-layout>
    </div>
@ -68,18 +78,16 @@
 <script lang="ts" setup>
  import { ref, reactive, computed, onMounted } from 'vue';

-  import { DownOutlined, PlusOutlined, ArrowUpOutlined } from '@ant-design/icons-vue';
-  import { BackTop, Statistic } from 'ant-design-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 renKeJiaoCheng from '/@/views/site/renKeJiaoCheng/index.vue'
-  import tingKeZuJi from '/@/views/site/tingKeZuJi/index.vue'
-  import yuYueKeCheng from '/@/views/site/yuYueKeCheng/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'



@ -123,18 +131,6 @@
    max-width: 1170px;
    //居中
    margin: 0 auto;
-    .topTitle {
-      font-size: 1.5rem;
-    }
-    .topRight {
-      float: right;
-      .topRightMenu {
-        font-size: 1.1rem;
-      }
-    }
-    .footerRight {
-      float: right;
-    }
    .rowGutter{
      margin-top: 1rem;
      margin-bottom: 1rem;
--- a/src/views/site/tongJi/index.vue
+++ b/src/views/site/tongJi/index.vue
@ -2,21 +2,25 @@
  <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="1128"/>
+            <Statistic title="总数" :value="tjData?.jinRiKeTang?.num"/>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
-            <Statistic title="已下课" :value="1124"/>
+            <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="6"/>
+            <Statistic title="&nbsp;" :value="tjData?.jinRiKeTang?.zzsknum"/>
          </a-col>
        </a-row>
      </a-card>
@ -25,13 +29,13 @@
      <a-card title="已开课堂数">
        <a-row class="" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
-            <Statistic title="总数" :value="1128"/>
+            <Statistic title="总数" :value="tjData?.jinRiTingKe?.jcktnum"/>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
-            <Statistic title="听课课堂" :value="1893"/>
+            <Statistic title="听课课堂" :value="tjData?.jinRiTingKe?.btkktnum"/>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
-            <Statistic title="听课人次" :value="1193"/>
+            <Statistic title="听课人次" :value="tjData?.jinRiTingKe?.tkrcnum"/>
          </a-col>
        </a-row>
      </a-card>
@ -40,24 +44,69 @@
      <a-card title="今日听课">
        <a-row class="" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
-            <Statistic title="课堂数" :value="1123"/>
+            <Statistic title="课堂数" :value="tjData?.yiKaiKeTang?.num"/>
          </a-col>
          <a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
-            <Statistic title="听课人次" :value="1893"/>
+            <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;">
-        <PlusOutlined/>
+        <!-- <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>
--- a/src/views/site/yuYueKeCheng/index.vue
+++ b/src/views/site/yuYueKeCheng/index.vue
@ -1,10 +1,10 @@
 <template>
-  <a-card class="rowGutter" title="预约课程">
+  <a-card class="rowGutter">
    <template #title>
      <span style="font-size: 24px;font-weight: bold;">预约课程</span>
-      <a href="javascript:void(0);">线上课堂评价表</a>
-      <a href="javascript:void(0);">听课记录</a>
-      <a href="javascript:void(0);">同行评价表</a>
+      <span style="padding: 15px;"><a href="javascript:void(0);">线上课堂评价表</a></span>
+      <span style="padding: 15px;"><a href="javascript:void(0);">听课记录</a></span>
+      <span style="padding: 15px;"><a href="javascript:void(0);">同行评价表</a></span>
    </template>
    <template #extra><a href="javascript:void(0);">查看更多</a></template>
    <a-row class="rowGutter" :gutter="[16,16]">