frontend-admin/src/features/invigilation/ExamReport/ReportOverview.vue

<template>
  <div class="report-overview">
    <el-row :gutter="20" type="flex">
      <el-col :span="6">
        <div class="overview-yk part-box">
          <div class="overview-yk-info">
            <h5>应考</h5>
            <p>{{ examTotal }}</p>
            <p>(单位：科次)</p>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="overview-detail">
          <div
            class="overview-detail-item part-box"
            v-for="(item, index) in progressData"
            :key="index"
          >
            <i :class="['overview-detail-line', `line-${item.color}`]"></i>
            <h5>{{ item.name }} (科次)</h5>
            <p>{{ item.count }}</p>
          </div>
        </div>
      </el-col>
      <el-col :span="13">
        <div class="overview-progress overview-chart part-box">
          <h3 class="overview-part-title">
            <span>考试总体进度</span>
            <el-popover
              placement="top-start"
              popper-class="warning-popover"
              width="200"
              trigger="hover"
              content="批次下的实时考试进度。"
            >
              <i class="el-icon-question" slot="reference"></i>
            </el-popover>
          </h3>
          <echart-render
            :chart-data="progressData"
            chart-type="pie"
          ></echart-render>
        </div>
      </el-col>
    </el-row>
    <div class="overview-distribution overview-chart part-box">
      <h3 class="overview-part-title">
        <span>考试科次时间分布</span>
        <el-popover
          placement="top-start"
          popper-class="warning-popover"
          width="200"
          trigger="hover"
          content="按时间维度呈现已完成的科次数量分布。"
        >
          <i class="el-icon-question" slot="reference"></i>
        </el-popover>
      </h3>
      <echart-render
        :chart-data="distributionData"
        chart-type="lineMark"
      ></echart-render>
    </div>
  </div>
</template>

<script>
import { reportOverviewData } from "@/api/invigilation";
import EchartRender from "../common/EchartRender";

export default {
  name: "report-overview",
  components: { EchartRender },
  props: {
    filter: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      examTotal: "0",
      progressData: [
        {
          name: "实考",
          count: 0,
          color: "blue",
        },
        {
          name: "缺考",
          count: 0,
          color: "yellow",
        },
        {
          name: "未完成",
          count: 0,
          color: "cyan",
        },
      ],
      distributionData: [
        {
          name: "6月1号",
          count: 13,
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const datas = {
        ...this.filter,
      };

      const res = await reportOverviewData(datas);
      const resData = res.data.data;
      this.examTotal = resData.examTotal;
      this.progressData = [
        {
          name: "实考",
          count: resData.actualExamTotal,
          color: "blue",
        },
        {
          name: "缺考",
          count: resData.deficiencyExamTotal,
          color: "yellow",
        },
        {
          name: "未完成",
          count: resData.completeOffExamTotal,
          color: "cyan",
        },
      ];
      this.distributionData = resData.examTotalList.map((item) => {
        const days = item.day.split("-");
        return {
          ...item,
          name: `${days[1] * 1}月${days[2] * 1}日`,
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.overview-yk {
  height: 100%;
  min-width: 258px;
  min-height: 258px;
  position: relative;

  .overview-yk-info {
    width: 258px;
    height: 258px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -129px;
    margin-top: -129px;
    text-align: center;
    background-image: url(../../../assets/bg-liu.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #ffffff;

    > h5 {
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
      margin-top: 69px;
      margin-bottom: 0;
    }

    > p:nth-of-type(1) {
      font-size: 56px;
      font-weight: 600;
      line-height: 78px;
      margin: 0;
    }
    > p:nth-of-type(2) {
      font-size: 12px;
      font-weight: 400;
      line-height: 17px;
    }
  }
}
.overview-detail-item {
  position: relative;
  padding-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }
  > h5 {
    font-size: 14px;
    font-weight: 400;
    color: #626a82;
    line-height: 21px;
    margin: 0;
  }
  > p {
    font-size: 32px;
    font-weight: 600;
    color: #202b4b;
    line-height: 45px;
    margin: 0;
  }
}
.overview-detail-line {
  position: absolute;
  width: 41px;
  height: 13px;
  top: 50%;
  right: 20px;
  margin-top: -7px;
  z-index: auto;
  background-size: 100% 100%;

  &.line-blue {
    background-image: url(../../../assets/bg-line-blue.png);
  }
  &.line-yellow {
    background-image: url(../../../assets/bg-line-yellow.png);
  }
  &.line-cyan {
    background-image: url(../../../assets/bg-line-cyan.png);
  }
}
.overview-part-title {
  font-size: 16px;
  font-weight: 500;
  color: #202b4b;
  line-height: 22px;
  z-index: 9;
}
.overview-progress {
  height: 346px;
  margin-bottom: 0;
}
.overview-distribution {
  margin-top: 20px;
  height: 326px;
}
.overview-chart {
  position: relative;
  padding-bottom: 5px;
  .overview-part-title {
    position: absolute;
    top: 20px;
  }
}
</style>