2023年4月3日 完善首页

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);
 }
 

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>

src/views/site/index.vue

@@ -24,14 +24,23 @@
     </a-card>
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
     <a-layout>
+      <!-- 页头 -->
       <headerPage/>
+      <!-- 主体部分 -->
       <a-layout-content>
+        <!-- 统计 -->
         <tongjiPage/>
+        <!-- 轮播图 -->
         <lunboPage/>
+        <!-- 通知公告 -->
         <tongZhiGongGaoPage/>
-        <renKeJiaoCheng/>
+        <!-- 任课教程 -->
-        <tingKeZuJi/>
+        <renKeJiaoChengPage/>
-        <yuYueKeCheng/>
+        <!-- 听课足迹 -->
+        <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 renKeJiaoChengPage from '/@/views/site/renKeJiaoCheng/index.vue'
-  import tingKeZuJi from '/@/views/site/tingKeZuJi/index.vue'
+  import tingKeZuJiPage from '/@/views/site/tingKeZuJi/index.vue'
-  import yuYueKeCheng from '/@/views/site/yuYueKeCheng/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;

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>

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>
+      <span style="padding: 15px;"><a href="javascript:void(0);">线上课堂评价表</a></span>
-      <a href="javascript:void(0);">听课记录</a>
+      <span style="padding: 15px;"><a href="javascript:void(0);">听课记录</a></span>
-      <a href="javascript:void(0);">同行评价表</a>
+      <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]">