老师进入某个课程的班级，可以查看选择该课程的所有学生并给他们发布考勤（已实现），需要实现的功能：老师点击学情分析按钮后跳转到classreport页面并以饼状图的形式看到选择该课程的学生考勤结果，对代码进行查漏补缺，提供改进方法

为了实现老师点击“学情分析”按钮后跳转到 `classreport` 页面并以饼状图的形式展示选择该课程的学生考勤结果，我们需要确保以下几点：

1. **跳转逻辑**：确保在 `TeachingCourse.vue` 中点击“学情分析”按钮后能够正确跳转到 `classreport` 页面，并传递课程ID。
2. **数据获取**：确保 `classreport.vue` 能够从后端获取到指定课程的考勤数据。
3. **图表渲染**：确保 `classreport.vue` 能够使用 ECharts 渲染饼状图。

### 1. 修改 `TeachingCourse.vue`

确保在点击“学情分析”按钮后，能够正确跳转到 `classreport` 页面并传递课程ID。

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';

const router = useRouter();
const selectedCourse = ref(null);

const goToClassReport = () => {
  if (selectedCourse.value && selectedCourse.value.course_id) {
    router.push({
      path: '/classreport',
      query: { course_id: selectedCourse.value.course_id }
    });
  } else {
    Swal.fire({
      icon: 'error',
      title: '错误',
      text: '请选择一个课程'
    });
  }
};
</script>

<template>
  <el-button type="primary" @click="goToClassReport">学情分析</el-button>
</template>

### 2. 修改 `classreport.vue`

确保 `classreport.vue` 能够从后端获取到指定课程的考勤数据，并使用 ECharts 渲染饼状图。

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="130px" class="menu">
        <sidermenu></sidermenu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header">头部</div>
        </el-header>
        <el-main>
          <div id="main" style="width: 600px;height:400px;"></div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import sidermenu from './sidermenu.vue';
import { onMounted, ref } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';
import { useRoute } from 'vue-router';

const course_id = ref<string | null>(null);
const route = useRoute();
course_id.value = route.query.course_id as string;

const fetchData = async () => {
  console.log('Fetching attendance data for course', course_id.value);
  try {
    const response = await axios.get(`/api/attendance_data?course_id=${course_id.value}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching attendance data:', error);
    return [];
  }
};

const initChart = (data) => {
  const chartDom = document.getElementById('main');
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '考勤情况',
      subtext: '班级报告',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '考勤',
        type: 'pie',
        radius: '50%',
        data: data.map(item => ({
          value: item.count,
          name: item.attendance_status
        }))
      }
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  };
  myChart.setOption(option);
};

onMounted(async () => {
  const attendanceData = await fetchData();
  initChart(attendanceData);
});
</script>

<style scoped>
.menu {
  border-right: 1px solid #545c64;
  height: calc(100vh);
  margin-right: 0;
}
.header {
  height: 100%;
  border-bottom: 1px solid #545c64;
  padding: 0;
  margin: 0;
}
.el-header {
  padding: 0;
  margin: 0;
}
.el-main {
  padding: 0;
}
.el-container {
  padding: 0;
}
</style>

### 3. 后端 API 路由

确保后端 API 路由能够正确处理获取考勤数据的请求。

// router.js
const express = require('express');
const router = express.Router();
const attendance_data = require('./api/attendance_data');

router.get('/api/attendance_data', attendance_data);

module.exports = router;

### 4. 后端数据处理

确保 `attendance_data.js` 文件中的数据处理逻辑能够正确返回考勤数据。

// attendance_data.js
let db = require('../db/index');

const express = require('express');
const router = express.Router();

router.get('/attendance_data', (req, res) => {
  const course_id = req.query.course_id;
  const query = course_id 
    ? 'SELECT attendance_status, COUNT(*) as count FROM attendance WHERE course_id = ? GROUP BY attendance_status' 
    : 'SELECT attendance_status, COUNT(*) as count FROM attendance GROUP BY attendance_status';

  console.log('SQL 查询语句:', query);
  if (course_id) {
    console.log('参数:', course_id);
  }

  db.query(query, [course_id], (err, results) => {
    if (err) {
      console.error('数据库查询出错:', err);
      return res.status(500).json({ error: err.message });
    }
    console.log('查询结果:', results);
    res.json(results);
  });
});

module.exports = router;

通过以上步骤，你可以确保老师点击“学情分析”按钮后，能够跳转到 `classreport` 页面并以饼状图的形式展示选择该课程的学生考勤结果。