build: 看板首页缺省样式

src/views/dashboard/index.vue

@@ -57,12 +57,11 @@ watch(
     // 班级切换后重新加载班级数据
   }
 );
+// 数据状态：1正常，2训练次数小于3，3过期，4缺省
+const dataStatus = ref(1);
 onMounted(() => {
   //queryClassList();
 });
-// 优秀教学效果示例
-const dialogVisible = ref(false);
-// 学员专注力平均值整体对比分析
 </script>
 
 <template>
@@ -90,7 +89,7 @@ const dialogVisible = ref(false);
     </div>
 
     <!-- Echarts 图表-->
-    <el-row :gutter="20">
+    <el-row v-if="dataStatus == 1" :gutter="20">
       <el-col :md="24" :lg="8">
         <div class="charts-item">
           <p class="title">学员专注力平均值整体对比分析</p>
@@ -118,7 +117,7 @@ const dialogVisible = ref(false);
                   height="200px"
                   width="200px"
                   color="#5563ac"
-                  bg-color="#e4e7f4"
+                  bg-color="#cacce6"
                   class="chart"
                 />
                 <p>全体学员训练近期</p>
@@ -184,7 +183,7 @@ const dialogVisible = ref(false);
                   id="barChart2"
                   width="460px"
                   height="500px"
-                  title="全体学员初期训练专注力评分占比"
+                  title="全体学员训练近期专注力评分平均占比"
                   percent-data="10,25,65,30,10"
                   number-data="1,2,13,6,10"
                   class="chart"
@@ -195,6 +194,38 @@ const dialogVisible = ref(false);
         </div>
       </el-col>
     </el-row>
+    <el-row v-else :gutter="20">
+      <el-col :md="24" :lg="8">
+        <div class="charts-item">
+          <p class="title">学员专注力平均值整体对比分析</p>
+          <div v-if="dataStatus == 2" class="empty">
+            <p>筛选条件的学生人群训练3次以上才能进行训练数据分析，</p>
+            <p>当前训练数据不足以进行数据分析！</p>
+          </div>
+          <div v-if="dataStatus == 3" class="empty">
+            <p class="red">合作已过期，无法进行数据看板的查看！</p>
+          </div>
+          <div v-if="dataStatus == 4" class="empty">
+            <p>您的学校还没有任何训练数据！</p>
+          </div>
+        </div>
+      </el-col>
+      <el-col :md="24" :lg="16">
+        <div class="charts-item">
+          <p class="title">学员专注力评分分级占比分析</p>
+          <div v-if="dataStatus == 2" class="empty">
+            <p>筛选条件的学生人群训练3次以上才能进行训练数据分析，</p>
+            <p>当前训练数据不足以进行数据分析！</p>
+          </div>
+          <div v-if="dataStatus == 3" class="empty">
+            <p class="red">合作已过期，无法进行数据看板的查看！</p>
+          </div>
+          <div v-if="dataStatus == 4" class="empty">
+            <p>您的学校还没有任何训练数据！</p>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -247,7 +278,6 @@ const dialogVisible = ref(false);
   border: 1px solid #e8eaec;
   border-radius: 24px;
   text-align: center;
-
   .title {
     margin: 0;
     height: 78px;
@@ -256,23 +286,35 @@ const dialogVisible = ref(false);
     text-indent: 2em;
     font-size: 18px;
   }
-
   .item {
     padding-bottom: 30px;
   }
-
   .chart {
     margin: 0 auto;
   }
-
   p {
     margin: 0;
     line-height: 24px;
     font-size: 16px;
   }
-
   .bar {
     margin-top: 60px;
   }
+  .empty {
+    box-sizing: border-box;
+    height: 400px;
+    padding-top: 200px;
+    text-align: center;
+    background-image: url("../../assets/empty.png");
+    background-repeat: no-repeat;
+    background-position: center 30%;
+    p {
+      font-size: 14px;
+      color: #a1a1a1;
+      &.red {
+        color: #e04962;
+      }
+    }
+  }
 }
 </style>