teachcloud-print-web/src/modules/target/components/student-target/DetailStudentTarget.vue

<template>
  <el-dialog
    class="page-dialog"
    :visible.sync="modalIsShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    fullscreen
  >
    <div slot="title">{{ rowData.name }}毕业要求达成情况</div>

    <div class="part-box part-box-pad">
      <div class="part-title">
        <h2>个人与本院对比情况</h2>
        <div class="chart-box" style="height: 400px">
          <v-chart v-if="chartOption" :option="chartOption"></v-chart>
        </div>
      </div>
    </div>

    <div class="part-box part-box-pad">
      <div class="part-title">
        <h2>个人毕业要求达成度情况</h2>
      </div>

      <el-form ref="FilterForm" label-position="left" label-width="85px" inline>
        <el-form-item label-width="0px">
          <semester-select v-model="filter.semesterId"></semester-select>
        </el-form-item>
        <el-form-item label-width="0px">
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="TableList" :data="dataList">
        <el-table-column label="课程名称（代码）" min-width="200">
          <template slot-scope="scope">
            {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
          </template>
        </el-table-column>
        <el-table-column prop="semesterName" label="所属学期">
        </el-table-column>
        <el-table-column prop="score" label="期末成绩"> </el-table-column>
        <el-table-column
          v-for="(column, cindex) in columns"
          :key="cindex"
          :label="column"
        >
          <template slot-scope="scope">
            {{ scope.row.requirements[cindex] }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import { studentTargetDetail } from "../../api";

export default {
  name: "detail-requirement-statistics",
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      dataList: [],
      chartOption: null,
      filter: { semesterId: "" },
      columns: [],
      tableData: [],
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async search() {
      const res = await studentTargetDetail({
        cultureProgramId: this.rowData.id,
        studentCode: this.rowData.studentCode,
        ...this.filter,
      });
      this.dataList = res.studentTotalRequirementList || [];
      this.updateChartOption();

      this.tableData = res.studentCourseRequirementList || [];
      this.columns = !this.tableData[0]
        ? []
        : this.tableData[0].requirementDetailList.map(
            (item) => item.requirementName
          );
    },
    updateChartOption() {
      const option = {
        color: ["#3a5ae5", "#fe5d4e"],
        grid: {
          left: 40,
          top: 40,
          right: 80,
          bottom: 50,
          containLabel: true,
        },
        legend: {
          top: 0,
          data: ["个人达成情况", "专业达成情况"],
          itemWidth: 12,
          itemHeight: 4,
          itemGap: 22,
          left: 40,
        },
        xAxis: {
          type: "category",
          name: "课程目标",
          nameTextStyle: {
            color: "#363D59",
          },
          data: this.dataList.map((item) => item.requirementName),
          axisLabel: {
            color: "#6F7482",
            interval: 0,
            fontSize: 12,
            margin: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#EFF0F5",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisPointer: {
            type: "shadow",
          },
        },
        yAxis: {
          type: "value",
          name: "达成值",
          min: 0,
          max: 1,
          interval: 0.1,
          nameTextStyle: {
            color: "#363D59",
          },
          axisLabel: {
            color: "#6F7482",
          },
          axisLine: {
            lineStyle: {
              color: "#EFF0F5",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#EFF0F5",
            },
          },
        },
        series: [
          {
            name: "个人达成情况",
            type: "bar",
            barWidth: 20,
            data: this.dataList.map((item) => item.studentDegree),
          },
          {
            name: "专业达成情况",
            type: "bar",
            barWidth: 20,
            data: this.dataList.map((item) => item.professionalDegree),
          },
        ],
      };

      this.chartOption = option;
    },
  },
};
</script>