|
@@ -1,115 +1,113 @@
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
-defineOptions({
|
|
|
|
- // eslint-disable-next-line vue/no-reserved-component-names
|
|
|
|
- name: "Dashboard",
|
|
|
|
- inheritAttrs: false,
|
|
|
|
-});
|
|
|
|
-
|
|
|
|
-import { useUserStore } from "@/store/modules/user";
|
|
|
|
-import { useTransition, TransitionPresets } from "@vueuse/core";
|
|
|
|
-
|
|
|
|
-import GithubCorner from "@/components/GithubCorner/index.vue";
|
|
|
|
|
|
+// defineOptions({
|
|
|
|
+// // eslint-disable-next-line vue/no-reserved-component-names
|
|
|
|
+// name: "Dashboard",
|
|
|
|
+// inheritAttrs: false,
|
|
|
|
+// });
|
|
import SvgIcon from "@/components/SvgIcon/index.vue";
|
|
import SvgIcon from "@/components/SvgIcon/index.vue";
|
|
import BarChart from "./components/BarChart.vue";
|
|
import BarChart from "./components/BarChart.vue";
|
|
import PieChart from "./components/PieChart.vue";
|
|
import PieChart from "./components/PieChart.vue";
|
|
import RadarChart from "./components/RadarChart.vue";
|
|
import RadarChart from "./components/RadarChart.vue";
|
|
-
|
|
|
|
-const userStore = useUserStore();
|
|
|
|
-
|
|
|
|
-const date: Date = new Date();
|
|
|
|
-
|
|
|
|
-const greetings = computed(() => {
|
|
|
|
- if (date.getHours() >= 6 && date.getHours() < 8) {
|
|
|
|
- return "晨起披衣出草堂,轩窗已自喜微凉🌅!";
|
|
|
|
- } else if (date.getHours() >= 8 && date.getHours() < 12) {
|
|
|
|
- return "上午好🌞!";
|
|
|
|
- } else if (date.getHours() >= 12 && date.getHours() < 18) {
|
|
|
|
- return "下午好☕!";
|
|
|
|
- } else if (date.getHours() >= 18 && date.getHours() < 24) {
|
|
|
|
- return "晚上好🌃!";
|
|
|
|
- } else if (date.getHours() >= 0 && date.getHours() < 6) {
|
|
|
|
- return "偷偷向银河要了一把碎星,只等你闭上眼睛撒入你的梦中,晚安🌛!";
|
|
|
|
- }
|
|
|
|
-});
|
|
|
|
|
|
+import { useTransition, TransitionPresets } from "@vueuse/core";
|
|
|
|
+import {getClassList, getSchoolList} from "@/api/school";
|
|
|
|
+import {ClassList} from "@/api/school/types";
|
|
|
|
|
|
const duration = 5000;
|
|
const duration = 5000;
|
|
-
|
|
|
|
-// 收入金额
|
|
|
|
-const amount = ref(0);
|
|
|
|
-const amountOutput = useTransition(amount, {
|
|
|
|
|
|
+/**
|
|
|
|
+ * 数据卡片
|
|
|
|
+ */
|
|
|
|
+// 全部班级
|
|
|
|
+const classCount = ref(0);
|
|
|
|
+const classCountOutput = useTransition(classCount, {
|
|
duration: duration,
|
|
duration: duration,
|
|
transition: TransitionPresets.easeOutExpo,
|
|
transition: TransitionPresets.easeOutExpo,
|
|
});
|
|
});
|
|
-amount.value = 2000;
|
|
|
|
|
|
+classCount.value = 2000;
|
|
|
|
|
|
-// 访问数
|
|
|
|
-const visitCount = ref(0);
|
|
|
|
-const visitCountOutput = useTransition(visitCount, {
|
|
|
|
|
|
+// 全部教师
|
|
|
|
+const teacherCount = ref(0);
|
|
|
|
+const teacherCountOutput = useTransition(teacherCount, {
|
|
duration: duration,
|
|
duration: duration,
|
|
transition: TransitionPresets.easeOutExpo,
|
|
transition: TransitionPresets.easeOutExpo,
|
|
});
|
|
});
|
|
-visitCount.value = 2000;
|
|
|
|
|
|
+teacherCount.value = 2000;
|
|
|
|
|
|
-//消息数
|
|
|
|
-const messageCount = ref(0);
|
|
|
|
-const messageCountOutput = useTransition(messageCount, {
|
|
|
|
|
|
+// 全部学生
|
|
|
|
+const studentCount = ref(0);
|
|
|
|
+const studentCountOutput = useTransition(studentCount, {
|
|
duration: duration,
|
|
duration: duration,
|
|
transition: TransitionPresets.easeOutExpo,
|
|
transition: TransitionPresets.easeOutExpo,
|
|
});
|
|
});
|
|
-messageCount.value = 2000;
|
|
|
|
|
|
+studentCount.value = 2000;
|
|
|
|
|
|
-// 订单数
|
|
|
|
-const orderCount = ref(0);
|
|
|
|
-const orderCountOutput = useTransition(orderCount, {
|
|
|
|
|
|
+// 设备套数
|
|
|
|
+const equipmentCount = ref(0);
|
|
|
|
+const equipmentCountOutput = useTransition(equipmentCount, {
|
|
duration: duration,
|
|
duration: duration,
|
|
transition: TransitionPresets.easeOutExpo,
|
|
transition: TransitionPresets.easeOutExpo,
|
|
});
|
|
});
|
|
-orderCount.value = 2000;
|
|
|
|
|
|
+equipmentCount.value = 2000;
|
|
|
|
+
|
|
|
|
+// 累计训练次数
|
|
|
|
+const trainingCount = ref(0);
|
|
|
|
+const trainingCountOutput = useTransition(trainingCount, {
|
|
|
|
+ duration: duration,
|
|
|
|
+ transition: TransitionPresets.easeOutExpo,
|
|
|
|
+});
|
|
|
|
+trainingCount.value = 2000;
|
|
|
|
+/**
|
|
|
|
+ * 班级数据
|
|
|
|
+ */
|
|
|
|
+let classNumber = ref(0);
|
|
|
|
+const classData = ref<ClassList[]>([]);
|
|
|
|
+// function queryClassList() {
|
|
|
|
+// getClassList().then(({ data }) => {
|
|
|
|
+// classData.value = data;
|
|
|
|
+// });
|
|
|
|
+// }
|
|
|
|
+onMounted(() => {
|
|
|
|
+ //queryClassList();
|
|
|
|
+});
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
<div class="dashboard-container">
|
|
<div class="dashboard-container">
|
|
- <!-- 用户信息 -->
|
|
|
|
- <el-row class="mb-8">
|
|
|
|
- <el-card class="w-full">
|
|
|
|
- <div class="flex justify-between flex-wrap">
|
|
|
|
- <div class="flex items-center">
|
|
|
|
- <img
|
|
|
|
- class="user-avatar"
|
|
|
|
- :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
|
|
|
|
- />
|
|
|
|
- <span class="ml-[10px] text-[16px]">
|
|
|
|
- {{ userStore.nickname }}
|
|
|
|
- </span>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="leading-[40px]">
|
|
|
|
- {{ greetings }}
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </el-card>
|
|
|
|
- </el-row>
|
|
|
|
-
|
|
|
|
<!-- 数据卡片 -->
|
|
<!-- 数据卡片 -->
|
|
<el-row :gutter="40" class="mb-4">
|
|
<el-row :gutter="40" class="mb-4">
|
|
- <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
|
|
|
|
|
|
+ <el-col :xs="24" :sm="8" :lg="5" class="mb-4">
|
|
<div class="data-box">
|
|
<div class="data-box">
|
|
- <div
|
|
|
|
- class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
|
|
|
|
- >
|
|
|
|
|
|
+ <div class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded">
|
|
<svg-icon icon-class="uv" size="3em" />
|
|
<svg-icon icon-class="uv" size="3em" />
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col space-y-3">
|
|
<div class="flex flex-col space-y-3">
|
|
- <div class="text-[var(--el-text-color-secondary)]">访问数</div>
|
|
|
|
- <div class="text-lg">
|
|
|
|
- {{ Math.round(visitCountOutput) }}
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="text-[var(--el-text-color-secondary)]">全部班级</div>
|
|
|
|
+ <div class="text-lg">{{ Math.round(classCountOutput) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-col>
|
|
-
|
|
|
|
- <!--消息数-->
|
|
|
|
- <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
|
|
|
|
|
|
+ <el-col :xs="24" :sm="8" :lg="5" class="mb-4">
|
|
|
|
+ <div class="data-box">
|
|
|
|
+ <div class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded">
|
|
|
|
+ <svg-icon icon-class="uv" size="3em" />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="flex flex-col space-y-3">
|
|
|
|
+ <div class="text-[var(--el-text-color-secondary)]">全部教师</div>
|
|
|
|
+ <div class="text-lg">{{ Math.round(teacherCountOutput) }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="8" :lg="5" class="mb-4">
|
|
|
|
+ <div class="data-box">
|
|
|
|
+ <div class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded">
|
|
|
|
+ <svg-icon icon-class="uv" size="3em" />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="flex flex-col space-y-3">
|
|
|
|
+ <div class="text-[var(--el-text-color-secondary)]">全部学生</div>
|
|
|
|
+ <div class="text-lg">{{ Math.round(studentCountOutput) }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :xs="24" :sm="8" :lg="5" class="mb-4">
|
|
<div class="data-box">
|
|
<div class="data-box">
|
|
<div
|
|
<div
|
|
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
|
|
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
|
|
@@ -117,15 +115,14 @@ orderCount.value = 2000;
|
|
<svg-icon icon-class="message" size="3em" />
|
|
<svg-icon icon-class="message" size="3em" />
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col space-y-3">
|
|
<div class="flex flex-col space-y-3">
|
|
- <div class="text-[var(--el-text-color-secondary)]">消息数</div>
|
|
|
|
|
|
+ <div class="text-[var(--el-text-color-secondary)]">设备套数</div>
|
|
<div class="text-lg">
|
|
<div class="text-lg">
|
|
- {{ Math.round(messageCountOutput) }}
|
|
|
|
|
|
+ {{ Math.round(equipmentCountOutput) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-col>
|
|
-
|
|
|
|
- <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
|
|
|
|
|
|
+ <el-col :xs="24" :sm="8" :lg="5" class="mb-4">
|
|
<div class="data-box">
|
|
<div class="data-box">
|
|
<div
|
|
<div
|
|
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
|
|
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
|
|
@@ -133,29 +130,31 @@ orderCount.value = 2000;
|
|
<svg-icon icon-class="money" size="3em" />
|
|
<svg-icon icon-class="money" size="3em" />
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col space-y-3">
|
|
<div class="flex flex-col space-y-3">
|
|
- <div class="text-[var(--el-text-color-secondary)]">收入金额</div>
|
|
|
|
|
|
+ <div class="text-[var(--el-text-color-secondary)]">累计训练次数</div>
|
|
<div class="text-lg">
|
|
<div class="text-lg">
|
|
- {{ Math.round(amountOutput) }}
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :xs="24" :sm="12" :lg="6" class="mb-2">
|
|
|
|
- <div class="data-box">
|
|
|
|
- <div
|
|
|
|
- class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
|
|
|
|
- >
|
|
|
|
- <svg-icon icon-class="shopping" size="3em" />
|
|
|
|
- </div>
|
|
|
|
- <div class="flex flex-col space-y-3">
|
|
|
|
- <div class="text-[var(--el-text-color-secondary)]">订单数</div>
|
|
|
|
- <div class="text-lg">
|
|
|
|
- {{ Math.round(orderCountOutput) }}
|
|
|
|
|
|
+ {{ Math.round(trainingCountOutput) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-col>
|
|
</el-row>
|
|
</el-row>
|
|
|
|
+ <!-- 班级选择 及 案例展示 -->
|
|
|
|
+ <el-row class="row-bg" justify="space-between">
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <el-select v-model="classNumber" class="m-2" placeholder="全部班级">
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in classData"
|
|
|
|
+ :key="item.id"
|
|
|
|
+ :label="item.name"
|
|
|
|
+ :value="item.id"
|
|
|
|
+ />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <el-link href="#" type="primary">优秀教学效果示例</el-link>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+
|
|
|
|
|
|
<!-- Echarts 图表 -->
|
|
<!-- Echarts 图表 -->
|
|
<el-row :gutter="40">
|
|
<el-row :gutter="40">
|
|
@@ -200,13 +199,13 @@ orderCount.value = 2000;
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
|
|
- .github-corner {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 0;
|
|
|
|
- right: 0;
|
|
|
|
- z-index: 99;
|
|
|
|
- border: 0;
|
|
|
|
- }
|
|
|
|
|
|
+ @media only screen and (min-width: 1200px){
|
|
|
|
+ .el-col-lg-5 {
|
|
|
|
+ display: block;
|
|
|
|
+ max-width: 20%;
|
|
|
|
+ flex: 0 0 20%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
|
|
.data-box {
|
|
.data-box {
|
|
display: flex;
|
|
display: flex;
|