build: 首页数据绑定

src/views/dashboard/index.vue

@@ -3,13 +3,7 @@ import DataCard from "@/views/dashboard/components/DataCard.vue";
 import LiquidChart from "@/views/charts-components/LiquidChart.vue";
 import CircleChart from "@/views/charts-components/CircleChart.vue";
 import PercentBarChart from "@/views/charts-components/PercentBarChart.vue";
-defineOptions({
-  // eslint-disable-next-line vue/no-reserved-component-names
-  name: "DashboardIndex",
-  inheritAttrs: false,
-});
-// import { getGradeList, getSchoolList } from "@/api/school";
-import { GradeList, SchoolList } from "@/api/school/types";
+import { GradeList } from "@/api/school/types";
 import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
 import { CaretBottom } from "@element-plus/icons-vue";
@@ -17,13 +11,10 @@ import { getGradeList } from "@/api/school";
 import { getDashboardData, getDashboardTop } from "@/api/dashboard";
 import { DashboardCard, DashboardData } from "@/api/dashboard/types";
 const userStore = useUserStore();
-watch(
-  () => userStore.schoolId,
-  (newValue, oldValue) => {
-    console.log("userStore.schoolId", newValue, oldValue);
-    // 学校切换后重新加载数据
-  }
-);
+defineOptions({
+  name: "DashboardIndex",
+  inheritAttrs: false,
+});
 /**
  * 数据卡片
  */
@@ -67,20 +58,7 @@ async function getGradeData(schoolId) {
  * 图表数据
  */
 const chartStatus = ref(false);
-const chartData: DashboardData = reactive({
-  // 初期专注力估值
-  frontAverage: 0,
-  // 近期专注力估值
-  afterAverage: 0,
-  // 初期50分以上的占比
-  front: 0,
-  // 近期50分以上的占比
-  after: 0,
-  // // 初期分期占比分析
-  // frontProportion: Proportion;
-  // // 近期分期占比分析
-  // afterProportion: Proportion;
-});
+const chartData: DashboardData = reactive({});
 async function getChartData(gradeId) {
   getDashboardData(gradeId)
     .then(({ data }) => {
@@ -97,13 +75,16 @@ async function getChartData(gradeId) {
       // 近期分期占比分析
       chartData.afterProportion = data.afterProportion;
       chartStatus.value = true;
-      console.log(data);
+      dataStatus.value = 1;
+      // console.log(data);
     })
     .catch((error) => {
-      console.log(error);
+      console.log(error.toString());
+      dataStatus.value = 2;
     });
 }
-
+// 数据状态：1正常，2训练次数小于3，3过期，4缺省
+const dataStatus = ref(5);
 onMounted(() => {
   // 获取班级
   getGradeData(userStore.schoolId);
@@ -112,12 +93,23 @@ onMounted(() => {
   // 图表数据
   getChartData(gradeId.value);
 });
-
-// 数据状态：1正常，2训练次数小于3，3过期，4缺省
-const dataStatus = ref(1);
-
-const percentData = [5, 5, 65, 10, 10];
-const percentNumber = [1, 2, 13, 2, 2];
+watch(
+  () => userStore.schoolId,
+  (newValue, oldValue) => {
+    console.log("userStore.schoolId", newValue, oldValue);
+    // 学校切换后重新加载数据
+    gradeId.value = 0;
+    dataStatus.value = 5;
+    getGradeData(newValue);
+    getDataCard(newValue);
+    getChartData(0);
+  }
+);
+// 改变班级重新加载图表数据
+function changeGrade() {
+  dataStatus.value = 5;
+  getChartData(gradeId.value);
+}
 </script>
 
 <template>
@@ -139,6 +131,7 @@ const percentNumber = [1, 2, 13, 2, 2];
         placeholder="全部班级"
         size="large"
         :suffix-icon="CaretBottom"
+        @change="changeGrade()"
       >
         <el-option
           v-for="item in gradeData"
@@ -280,6 +273,9 @@ const percentNumber = [1, 2, 13, 2, 2];
           <div v-if="dataStatus == 4" class="empty">
             <p>您的学校还没有任何训练数据！</p>
           </div>
+          <div v-if="dataStatus == 5" class="empty">
+            <p>加载中...</p>
+          </div>
         </div>
       </el-col>
       <el-col :md="24" :lg="16">
@@ -295,6 +291,9 @@ const percentNumber = [1, 2, 13, 2, 2];
           <div v-if="dataStatus == 4" class="empty">
             <p>您的学校还没有任何训练数据！</p>
           </div>
+          <div v-if="dataStatus == 5" class="empty">
+            <p>加载中...</p>
+          </div>
         </div>
       </el-col>
     </el-row>