|
@@ -20,17 +20,11 @@ defineOptions({
|
|
* 数据卡片
|
|
* 数据卡片
|
|
*/
|
|
*/
|
|
const cardStatus = ref(false);
|
|
const cardStatus = ref(false);
|
|
-let cards: DashboardCard = reactive({
|
|
|
|
- grade: 0, // 全部班级
|
|
|
|
- teacher: 0, // 全部教师
|
|
|
|
- student: 0, // 全部学生
|
|
|
|
- equipment: 0, // 设备套数
|
|
|
|
- game: 0, // 累计训练次数
|
|
|
|
-});
|
|
|
|
|
|
+const cards = ref<DashboardCard>();
|
|
async function getDataCard(schoolId: number) {
|
|
async function getDataCard(schoolId: number) {
|
|
getDashboardTop(schoolId)
|
|
getDashboardTop(schoolId)
|
|
.then(({ data }) => {
|
|
.then(({ data }) => {
|
|
- cards = <DashboardCard>{ ...data };
|
|
|
|
|
|
+ cards.value = data
|
|
cardStatus.value = true;
|
|
cardStatus.value = true;
|
|
})
|
|
})
|
|
.catch((error) => {
|
|
.catch((error) => {
|
|
@@ -60,19 +54,20 @@ async function getGradeData(schoolId: number) {
|
|
*/
|
|
*/
|
|
const chartStatus = ref(false);
|
|
const chartStatus = ref(false);
|
|
const chartMessage = ref("加载中...");
|
|
const chartMessage = ref("加载中...");
|
|
-let chartData: DashboardData = reactive({
|
|
|
|
- frontAverage: 0, // 初期专注力估值
|
|
|
|
- afterAverage: 0, // 近期专注力估值
|
|
|
|
- front: 0, // 初期50分以上的占比
|
|
|
|
- after: 0, // 近期50分以上的占比
|
|
|
|
- frontProportion: { num: [], percentage: [] }, // 初期分期占比分析
|
|
|
|
- afterProportion: { num: [], percentage: [] }, // 近期分期占比分析
|
|
|
|
-});
|
|
|
|
|
|
+const chartData = ref<DashboardData>();
|
|
|
|
+// let chartData: DashboardData = reactive({
|
|
|
|
+// frontAverage: 0, // 初期专注力估值
|
|
|
|
+// afterAverage: 0, // 近期专注力估值
|
|
|
|
+// front: 0, // 初期50分以上的占比
|
|
|
|
+// after: 0, // 近期50分以上的占比
|
|
|
|
+// frontProportion: { num: [], percentage: [] }, // 初期分期占比分析
|
|
|
|
+// afterProportion: { num: [], percentage: [] }, // 近期分期占比分析
|
|
|
|
+// });
|
|
async function getChartData(schoolId:number, gradeId: number) {
|
|
async function getChartData(schoolId:number, gradeId: number) {
|
|
chartStatus.value = false;
|
|
chartStatus.value = false;
|
|
getDashboardData(schoolId, gradeId)
|
|
getDashboardData(schoolId, gradeId)
|
|
.then(({ data }) => {
|
|
.then(({ data }) => {
|
|
- chartData = <DashboardData>{ ...data };
|
|
|
|
|
|
+ chartData.value = data;
|
|
chartStatus.value = true;
|
|
chartStatus.value = true;
|
|
})
|
|
})
|
|
.catch((error) => {
|
|
.catch((error) => {
|
|
@@ -141,7 +136,7 @@ watch(
|
|
|
|
|
|
<!-- Echarts 图表 -->
|
|
<!-- Echarts 图表 -->
|
|
<el-row v-if="chartStatus" :gutter="20">
|
|
<el-row v-if="chartStatus" :gutter="20">
|
|
- <el-col :md="24" :lg="12" :xl="8">
|
|
|
|
|
|
+ <el-col :md="24" :lg="8" :xl="8">
|
|
<div class="charts-item">
|
|
<div class="charts-item">
|
|
<p class="title">学员专注力平均值整体对比分析</p>
|
|
<p class="title">学员专注力平均值整体对比分析</p>
|
|
<el-row justify="space-between">
|
|
<el-row justify="space-between">
|
|
@@ -150,7 +145,7 @@ watch(
|
|
<LiquidChart
|
|
<LiquidChart
|
|
id="liquidChart1"
|
|
id="liquidChart1"
|
|
:key="chartData.frontAverage"
|
|
:key="chartData.frontAverage"
|
|
- :data="chartData.frontAverage ? chartData.frontAverage : 0"
|
|
|
|
|
|
+ :data="chartData.frontAverage || 0"
|
|
height="200px"
|
|
height="200px"
|
|
width="200px"
|
|
width="200px"
|
|
color="#3a7fc2"
|
|
color="#3a7fc2"
|
|
@@ -219,11 +214,11 @@ watch(
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-col>
|
|
<!-- 学员专注力评分分级占比分析 -->
|
|
<!-- 学员专注力评分分级占比分析 -->
|
|
- <el-col :md="24" :lg="12" :xl="16">
|
|
|
|
|
|
+ <el-col :md="24" :lg="16" :xl="16">
|
|
<div class="charts-item">
|
|
<div class="charts-item">
|
|
<p class="title">学员专注力评分分级占比分析</p>
|
|
<p class="title">学员专注力评分分级占比分析</p>
|
|
<el-row justify="space-between">
|
|
<el-row justify="space-between">
|
|
- <el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="12">
|
|
|
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
<div class="bar">
|
|
<div class="bar">
|
|
<PercentBarChart
|
|
<PercentBarChart
|
|
id="barChart1"
|
|
id="barChart1"
|
|
@@ -237,7 +232,7 @@ watch(
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-col>
|
|
- <el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="12">
|
|
|
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
<div class="bar">
|
|
<div class="bar">
|
|
<PercentBarChart
|
|
<PercentBarChart
|
|
id="barChart2"
|
|
id="barChart2"
|