teachcloud-print-web/src/modules/target/components/requirement-statistics/RequirementStatisticsRadar.vue

<template>
  <div class="part-box part-box-pad">
    <el-row type="flex" :gutter="20">
      <el-col :span="12">
        <div class="chart-box" style="height: 520px">
          <v-chart v-if="chartOption" :option="chartOption"></v-chart>
        </div>
      </el-col>
      <el-col :span="12">
        <el-table :data="dataList" border>
          <el-table-column label="毕业要求" min-width="200">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}.{{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="预期值" prop="expectValue"></el-table-column>
          <el-table-column label="实际值" prop="matrixDegree"></el-table-column>
          <el-table-column label="评价结果">
            <span
              slot-scope="scope"
              :class="
                scope.row.matrixDegree >= scope.row.expectValue
                  ? 'color-success'
                  : 'color-gray'
              "
            >
              {{
                scope.row.matrixDegree >= scope.row.expectValue
                  ? "达成"
                  : "未达成"
              }}
            </span>
          </el-table-column>
          <el-table-column class-name="action-column" label="操作" width="100">
            <template slot-scope="scope">
              <el-popover placement="right" trigger="hover">
                <el-table :data="scope.row.obeSubRequirements" border>
                  <el-table-column
                    label="毕业要求指标"
                    prop="name"
                    width="120"
                  ></el-table-column>
                  <el-table-column
                    label="达成值"
                    prop="matrixDegree"
                    width="100"
                  ></el-table-column>
                </el-table>
                <el-button slot="reference" class="btn-act-primary" type="text"
                  >查看详情</el-button
                >
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { maxNum } from "@/plugins/utils";
import { requirementStatisticsRadar } from "../../api";

export default {
  name: "requirement-statistics-radar",
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dataList: [],
      chartOption: null,
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    async getDetail() {
      const res = await requirementStatisticsRadar({
        cultureProgramId: this.rowData.cultureProgramId,
      });
      this.dataList = res.obeRequirements || [];
      this.updateChartOption();
    },
    updateChartOption() {
      const vals = this.dataList
        .map((item) => [item.expectValue, item.matrixDegree])
        .flat();
      const maxVal = Math.min(maxNum(vals) * 1.2, 1);
      const option = {
        color: ["#3a5ae5", "#fe5d4e"],
        legend: {
          top: 0,
          data: ["预期值", "实际值"],
          itemWidth: 16,
          itemHeight: 4,
          itemGap: 22,
          left: "center",
        },
        radar: {
          shape: "circle",
          axisName: {
            color: "#1f2230",
            fontSize: 14,
          },
          axisLine: {
            lineStyle: {
              color: "#d3d5e0",
            },
          },
          indicator: this.dataList.map((item, index) => {
            return {
              name: `${index + 1}.${item.name}`,
              max: maxVal,
            };
          }),
        },
        series: [
          {
            type: "radar",
            data: [
              {
                value: this.dataList.map((item) => item.expectValue),
                name: "预期值",
              },
              {
                value: this.dataList.map((item) => item.matrixDegree),
                name: "实际值",
              },
            ],
          },
        ],
      };
      this.chartOption = option;
    },
  },
};
</script>