feat: 区域级数据看板初始化2

src/views/areaboard/components/AreaCard.vue

@@ -0,0 +1,100 @@
+<!-- 数据卡片 -->
+<script setup lang="ts">
+import { TransitionPresets, useTransition } from "@vueuse/core";
+
+const props = defineProps({
+  students: {
+    type: Number,
+    default: 0,
+    required: true,
+  },
+  focuses: {
+    type: Number,
+    default: 0,
+    required: true,
+  },
+  trainings: {
+    type: Number,
+    default: 0,
+    required: true,
+  },
+});
+// 卡片数字动效
+function countNumber(number: any) {
+  return useTransition(number, {
+    duration: 5000,
+    transition: TransitionPresets.easeOutExpo,
+  });
+}
+// 学生
+const studentCount = ref(0);
+const studentCountOutput = countNumber(studentCount);
+// 脑电专注力测评次数
+const focusCount = ref(0);
+const focusCountOutput = countNumber(focusCount);
+// 脑电检测次数
+const trainingCount = ref(0);
+const trainingCountOutput = countNumber(trainingCount);
+onMounted(() => {
+  studentCount.value = <number>props.students;
+  focusCount.value = <number>props.focuses;
+  trainingCount.value = <number>props.trainings;
+});
+</script>
+<template>
+  <div class="clear">
+    <div class="data-card c1">
+      <span class="n">{{ Math.round(Number(studentCountOutput)) }}</span
+      ><span>参与测评学生总计</span>
+    </div>
+    <div class="data-card c2">
+      <span class="n">{{ Math.round(Number(focusCountOutput)) }}</span
+      ><span>脑电专注力测评次数</span>
+    </div>
+    <div class="data-card c3">
+      <span class="n">{{ Math.round(Number(trainingCountOutput)) }}</span
+      ><span>脑电检测次数</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.data-card {
+  float: left;
+  box-sizing: border-box;
+  width: 300px;
+  height: 140px;
+  padding: 30px 0 0 30px;
+  border: 1px solid #e6e8eb;
+  margin: 0 20px 20px 0;
+  border-radius: 30px;
+  span {
+    display: block;
+    font-size: 18px;
+    color: #23283c;
+    &.n {
+      font-size: 24px;
+      font-weight: bold;
+      margin-bottom: 15px;
+    }
+  }
+  &.c1 {
+    background: #fef6e9 url("../../../assets/evaluate/student.png") 90% 50% no-repeat;
+    span.n {
+      color: #e08e0a;
+    }
+  }
+  &.c2 {
+    background: #feeeee url("../../../assets/evaluate/focus.png") 90% 50% no-repeat;
+    span.n {
+      color: #ca7676;
+    }
+  }
+  &.c3 {
+    background: #d0f6f1 url("../../../assets/evaluate/training.png") 90% 50% no-repeat;
+    span.n {
+      color: #45a498;
+    }
+  }
+}
+</style>

src/views/areaboard/index.vue

@@ -1,14 +1,43 @@
-<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
-<script lang="ts">
-export default {
+<script setup lang="ts">
+import { watch } from "vue";
+import { useUserStore } from "@/store/modules/user";
+import "dayjs/locale/zh-cn";
+
+defineOptions({
   name: "DashboardArea",
-};
-</script>
+  inheritAttrs: false,
+});
+const userStore = useUserStore();
+watch(
+  () => userStore.schoolId,
+  (newValue, oldValue) => {
+    console.log(newValue, oldValue);
+  }
+);
 
-<script setup lang="ts"></script>
+const date = ref("");
+</script>
 
 <template>
-  <div class="container"></div>
+  <div class="area-container">
+    <div class="area-top">
+      <el-date-picker
+        v-model="date"
+        type="daterange"
+        start-placeholder="Start Date"
+        end-placeholder="End Date"
+        :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
+      />
+    </div>
+  </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.area-container {
+  position: relative;
+  padding: 30px;
+}
+.area-top {
+  background: #ffffff;
+}
+</style>