build: 看板基础页面样式2

src/views/areaboard/index.vue

@@ -1,7 +1,7 @@
 <!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
 <script lang="ts">
 export default {
-  name: "",
+  name: "DashboardArea",
 };
 </script>
 

src/views/class/index.vue

@@ -2,7 +2,7 @@
 import { ClassList } from "@/api/school/types";
 
 defineOptions({
-  name: "ClassManage",
+  name: "ClassIndex",
   inheritAttrs: false,
 });
 import { watch } from "vue";

src/views/dashboard/components/CircleChart.vue

@@ -9,7 +9,7 @@ import * as echarts from "echarts";
 const props = defineProps({
   id: {
     type: String,
-    default: "funnelChart",
+    default: "circleChart",
   },
   data: {
     type: Number,

src/views/dashboard/components/DataCard.vue

@@ -108,6 +108,7 @@ onMounted(() => {
   padding: 22px 42px;
   background: #ffffff;
   border-radius: 30px;
+  border: 1px solid #e6e8eb;
   .card {
     box-sizing: border-box;
     width: 265px;

src/views/dashboard/components/liquidChart.vue → src/views/dashboard/components/LiquidChart.vue

@@ -10,7 +10,7 @@ import "echarts-liquidfill";
 const props = defineProps({
   id: {
     type: String,
-    default: "funnelChart",
+    default: "liquidChart",
   },
   data: {
     type: Number,

src/views/dashboard/example.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineOptions({
-  name: "Example",
+  name: "DashboardExample",
   inheritAttrs: false,
 });
 import { watch } from "vue";

src/views/dashboard/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import DataCard from "@/views/dashboard/components/DataCard.vue";
-import LiquidChart from "@/views/dashboard/components/liquidChart.vue";
+import LiquidChart from "@/views/dashboard/components/LiquidChart.vue";
 import CircleChart from "@/views/dashboard/components/CircleChart.vue";
 import BarChart from "@/views/dashboard/components/BarChart.vue";
 defineOptions({
   // eslint-disable-next-line vue/no-reserved-component-names
-  name: "Dashboard",
+  name: "DashboardIndex",
   inheritAttrs: false,
 });
 // import { getClassList, getSchoolList } from "@/api/school";

src/views/equipment/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineOptions({
-  name: "EquipmentManage",
+  name: "EquipmentIndex",
   inheritAttrs: false,
 });
 import { watch } from "vue";

src/views/evaluation/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineOptions({
-  name: "EvaluationViews",
+  name: "EvaluateIndex",
   inheritAttrs: false,
 });
 import { watch } from "vue";

src/views/student/components/PieChart.vue

@@ -0,0 +1,110 @@
+<!--  柱状图 -->
+<template>
+  <div :id="id" :class="className" :style="{ height, width }" />
+</template>
+
+<script setup lang="ts">
+import * as echarts from "echarts";
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: "pieChart",
+  },
+  className: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: String,
+    default: "400px",
+    required: true,
+  },
+  height: {
+    type: String,
+    default: "400px",
+    required: true,
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  percentData: {
+    type: String,
+    default: "0,0,0,0,0",
+  },
+  numberData: {
+    type: String,
+    default: "0,0,0,0,0",
+  },
+});
+const options = {
+  tooltip: {
+    trigger: "item",
+    formatter: "{a} \r\n {b}: {c} ({d}%)",
+  },
+  legend: {
+    orient: "vertical",
+    right: "10%",
+    top: "5%",
+    data: ["0-20", "21-40", "41-60", "61-80", "81-100"],
+  },
+  series: [
+    {
+      name: "访问来源",
+      type: "pie",
+      radius: ["40%", "70%"],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: "center",
+      },
+      right: "40%",
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: "30",
+          fontWeight: "bold",
+        },
+      },
+      labelLine: {
+        show: true,
+      },
+      data: [
+        {
+          value: 20,
+          name: "A",
+        },
+        {
+          value: 12,
+          name: "B",
+        },
+        {
+          value: 18,
+          name: "C",
+        },
+        {
+          value: 20,
+          name: "D",
+        },
+        {
+          value: 20,
+          name: "E",
+        },
+      ],
+    },
+  ],
+};
+
+onMounted(() => {
+  // 图表初始化
+  const chart = echarts.init(
+    document.getElementById(props.id) as HTMLDivElement
+  );
+  chart.setOption(options);
+  // 大小自适应
+  window.addEventListener("resize", () => {
+    chart.resize();
+  });
+});
+</script>

src/views/student/components/RadarChart.vue

@@ -0,0 +1,141 @@
+<!-- 圆形进度图 -->
+<template>
+  <div :id="id" :class="className" :style="{ height, width }" />
+</template>
+
+<script setup lang="ts">
+import * as echarts from "echarts";
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: "radarChart",
+  },
+  data: {
+    type: Number,
+    default: 0,
+  },
+  className: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: String,
+    default: "160px",
+    required: true,
+  },
+  height: {
+    type: String,
+    default: "160px",
+    required: true,
+  },
+  color: {
+    type: String,
+    default: "#2f539b",
+    required: true,
+  },
+  bgColor: {
+    type: String,
+    default: "#e6e8f9",
+    required: true,
+  },
+});
+
+const options = {
+  title: {
+    text: "5D脑电数据模型",
+  },
+  color: "#ffb72d",
+  legend: {
+    right: 0,
+    data: ["训练前", "训练后"],
+  },
+  radar: {
+    radius: "65%",
+    indicator: [
+      {
+        name: "专注力平均值",
+        max: 100,
+      },
+      {
+        name: "高专注占比",
+        max: 100,
+      },
+      {
+        name: "专注唤醒效率",
+        max: 100,
+      },
+      {
+        name: "整体和谐度",
+        max: 100,
+      },
+      {
+        name: "专注力稳定度",
+        max: 100,
+      },
+    ],
+    // 点击事件
+    triggerEvent: true,
+    splitArea: {
+      show: true,
+      areaStyle: {
+        color: ["#FFFFFF", "#E6E6E6", "#FFFFFF", "#E6E6E6", "#FFFFFF"],
+        // 图表背景网格的颜色
+      },
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#E6E6E6",
+      },
+    },
+    name: {
+      rich: {
+        a: {
+          color: "#333333",
+          fontSize: 10,
+          fontWeight: "400",
+          fontFamily: "Microsoft YaHei",
+        },
+        b: {
+          color: "#333333",
+          align: "center",
+          padding: 5,
+          fontSize: 10,
+        },
+      },
+      formatter: (a, b) => {
+        return `{a|${a}}\n{b}`;
+      },
+    },
+  },
+  series: [
+    {
+      name: "Budget vs spending",
+      type: "radar",
+      color: "#5470c6",
+      symbolSize: 3,
+      data: [
+        {
+          value: [20, 30, 15, 5, 10],
+          name: "训练前",
+        },
+        {
+          value: [78, 98, 56, 86, 65],
+          name: "训练后",
+        },
+      ],
+    },
+  ],
+};
+
+onMounted(() => {
+  const chart = echarts.init(
+    document.getElementById(<string>props.id) as HTMLDivElement
+  );
+  chart.setOption(options);
+
+  window.addEventListener("resize", () => {
+    chart.resize();
+  });
+});
+</script>

src/views/student/index.vue

@@ -2,7 +2,7 @@
 import { CaretBottom } from "@element-plus/icons-vue";
 
 defineOptions({
-  name: "StudentManage",
+  name: "StudentIndex",
   inheritAttrs: false,
 });
 import { watch } from "vue";

src/views/student/result.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 defineOptions({
-  name: "EvaluationViews",
+  name: "StudentResult",
   inheritAttrs: false,
 });
 import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
+import RadarChart from "@/views/student/components/RadarChart.vue";
 const userStore = useUserStore();
 watch(
   () => userStore.schoolId,
@@ -15,10 +16,78 @@ watch(
 </script>
 
 <template>
-  <div class="container">
-    <h1>训练效果分析</h1>
-    <div>{{ userStore.schoolId }}</div>
+  <div class="result-container">
+    <div class="result-title">
+      <el-row class="box-card">
+        <el-col :xs="10" :sm="5" :md="5">
+          <div class="l1"><span>风间彻</span></div>
+          <div class="l2">13726628766</div>
+        </el-col>
+        <el-col :xs="14" :sm="5" :md="5">
+          <div class="l1"><span>25</span></div>
+          <div class="l2">训练次数累计</div>
+        </el-col>
+        <el-col :xs="10" :sm="6" :md="6">
+          <div class="l1"><span>142</span>分<span>50</span>秒</div>
+          <div class="l2">训练时长累计</div>
+        </el-col>
+        <el-col :xs="14" :sm="8" :md="8">
+          <div class="l1">前<span>76%</span></div>
+          <div class="l2">在所有通过训练的学员中你的位置是</div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <el-row class="result-chart" :gutter="15">
+      <el-col :xs="24" :sm="7" :md="7">
+        <div class="box-card">
+          <RadarChart
+            id="pieChart"
+            height="400px"
+            width="400px"
+            class="chart"
+            bg-color=""
+            color=""
+          />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="17" :md="17">
+        <div class="box-card"></div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.result-container {
+  position: relative;
+  padding: 30px;
+  .box-card {
+    background: #ffffff;
+    border-radius: 30px;
+    border: 1px solid #e6e8eb;
+  }
+  .result-title {
+    width: 950px;
+    white-space: nowrap;
+    font-size: 16px;
+    .box-card {
+      padding: 24px 0 30px 42px;
+    }
+    .l1 {
+      line-height: 52px;
+      color: #4284f2;
+      span {
+        font-size: 28px;
+        font-weight: bold;
+      }
+    }
+    .l2 {
+      line-height: 32px;
+    }
+  }
+}
+.result-chart {
+  margin-top: 12px;
+}
+</style>

src/views/teacher/index.vue

@@ -2,7 +2,7 @@
 import { ClassList } from "@/api/school/types";
 
 defineOptions({
-  name: "ClassManage",
+  name: "TeacherIndex",
   inheritAttrs: false,
 });
 import { watch } from "vue";

src/views/training/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineOptions({
-  name: "TrainingManage",
+  name: "TrainingIndex",
   inheritAttrs: false,
 });
 import { watch } from "vue";