ContestPortal/src/views/personalReport/index.vue

<template>
  <div class="fill"></div>
  <div style="padding: 30px 18.6vw 0; width: 100%; margin: auto">
    <!-- 年度：<j-dict-select-tag placeholder="请选择年度" v-model:value="annualid" dictCode="annual,annual_name,id" /> -->
  </div>
  <div class="personage">
    <h1 class="title">机电学院比赛个人报告</h1>
    <div class="rebuild">
      <div @click="Rebuild">重新生成报告</div>
    </div>
    <p class="paragraph">
      我是比赛综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。
    </p>
    <el-row class="card-box" :gutter="16" type="flex" justify="space-between">
      <el-col :span="12">
        <el-card class="card1">
          <div class="title">
            <div class="left">参加比赛项目数量</div>
            <div class="right">
              <SvgIcon size="20" name="content" />
            </div>
          </div>
          <div class="name">{{ data.cjbsxmsl }}</div>
          <div class="total" style="margin-top: 10px">
            <div class="two">国家级：{{ data.gjj }}</div>
            <div class="three">省级：{{ data.shengj }}</div>
            <div class="three">市级：{{ data.shij }}</div>
            <div class="three">校级：{{ data.xj }}</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="card1">
          <div class="title">
            <div class="left">获奖数</div>
            <div class="right">
              <SvgIcon size="20" name="content" />
            </div>
          </div>
          <div class="name">{{ data.hjNumber }}</div>
          <div class="total" style="grid-template-columns: repeat(5, 1fr)">
            <div class="one">一等：{{ data.ydjNumber }}</div>
            <div class="two">二等：{{ data.edjNumber }}</div>
            <div class="three">三等：{{ data.sdjNumber }}</div>
            <div class="two">四等：{{ data.sidjNumber }}</div>
            <div class="three">五等：{{ data.wdjNumber }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <p class="paragraph">
      个人综合素质综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。
    </p>
    <img src="../../assets/images/card.png" alt="" />

    <el-row class="card-box" :gutter="[50, 50]" type="flex">
      <el-col :xs="24" :xl="12">
        <p class="paragraph">
          个人综合素质综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。
        </p>
      </el-col>
      <el-col :xs="24" :xl="12">
        <div class="ec-box">
          <div class="title-box">
            <div class="tit">年度维度分析</div>
          </div>
          <randerChart></randerChart>
        </div>
      </el-col>
    </el-row>

    <img src="../../assets/images/card.png" alt="" />
    <p class="paragraph">
      我是比赛参赛情况综述：全面落实立德树人根本任务，依据CDIO工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识；在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力；具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养，能适应产业与社会变革的国际化应用型人。
    </p>
    <div class="table-box" style="min-height: 500px">
      <h1 class="title-pons">个人比赛获奖情况</h1>
      <el-table
        :data="data.allApList"
        class="table"
        :class="{ height: data.allApList.length > 8 }"
      >
        <el-table-column prop="jxname" label="奖项名称" />
        <el-table-column prop="ndbs" label="年度比赛" />
        <el-table-column prop="ndbsxm" label="年度比赛项目" />
        <el-table-column prop="dwname" label="所在队伍名称" />
        <el-table-column prop="jf" label="积分" />
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import randerChart from './components/randerChart.vue'
import { ElLoading } from 'element-plus'
import { getXsfxbgApi } from '@/api/person'
import { ref, watch } from 'vue'

type allApList =
  | {
      jxname: string
      ndbs: string
      ndbsxm: string
      dwname: string
      jf: string
    }[]
  | []

const data = ref<any>({
  cjbsxmsl: 0,
  gjj: 0,
  shengj: 0,
  shij: 0,
  xj: 0,
  hjNumber: 0,
  ydjNumber: 0,
  edjNumber: 0,
  sdjNumber: 0,
  sidjNumber: 0,
  wdjNumber: 0,
  allApList: [] as allApList,
})

let loading: any
const setLoading = () => {
  const col = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  loading = col
  setTimeout(() => {
    col.close()
  }, 3000) // 最大终止时间3秒，若超过3秒还没有被终止，则终止
} // 设置loading
const cloLoading = () => {
  if (loading) loading.close()
} //终止loading
getXsfxbgApi()
  .then((res: any) => {
    data.value = res.result
    setLoading()
  })
  .finally(cloLoading)
const Rebuild = async () => {
  setLoading()
  const res: any = await getXsfxbgApi({
    recreateFlag: true,
    annualid: annualid.value,
  })
  data.value = res.result
  cloLoading()
}

const annualid = ref('')
watch(
  () => annualid.value,
  () => {
    Rebuild()
  },
)
</script>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 3;
}

.title-pons {
  font-size: 30px;
  text-align: center;
  padding-bottom: 30px;
  line-height: initial;
}

.table {
  font-size: 16px;
}
.fill {
  padding-top: 80px;
}

.loading {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rebuild {
  display: flex;
  justify-content: center;

  div {
    cursor: pointer;
  }
}

.personage {
  padding: 0 18.6vw 60px;
  width: 100%;
  margin: auto;

  & > * {
    margin: 50px 0;
  }

  & > img {
    margin: -50px 0;
  }

  & > .title {
    text-align: center;
    font-size: 35px;
    font-weight: bolder;
  }

  .paragraph {
    font-size: 16px;
    text-indent: 2em;
  }

  .card {
    width: 100%;

    .inner {
      height: 0;
      padding-top: 40%;
      position: relative;

      .container {
        position: absolute;
        inset: 0;
        border-radius: 5px;
        border: 1px solid;
        line-height: 1;
        display: flex;

        .fl-box {
          height: 80%;
          margin: auto;
          margin-left: 25px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .tit {
            color: #a0a0a0;
          }

          .center {
            font-size: 30px;
            font-weight: bolder;
          }

          .info {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }

  .ec-box {
    width: 100%;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #000;

    .title-box {
      height: 58px;
      border-radius: 2px 2px 0px 0px;
      box-shadow: 0px 1px 2px 0px #707070;
      display: flex;

      .tit {
        margin-left: 4%;
        height: 58px;
        line-height: 58px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.85);
      }
    }
  }

  .table-box {
    border: 1px solid;
    padding: 40px 20px;

    table {
      width: 100%;

      caption {
        caption-side: top;
        padding-bottom: 20px;
        text-align: center;
        color: #000;
        font-size: 26px;
      }

      thead {
        text-align: left;
        color: rgb(160 160 160);
      }

      tr {
        text-align: left;
        border-bottom: 1px solid rgb(219, 216, 216);

        th,
        td {
          padding: 10px 0;
        }

        th:first-child {
          text-align: center;
        }

        td:last-child {
          color: rgb(64, 51, 253);
        }
      }
    }
  }

  /** */
  .card1 {
    --el-card-padding: 0;

    &,
    * {
      line-height: initial;
    }

    :deep() {
      .el-card__body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }

    width: 100%;
    height: 182px;
    // background-color: #ffffff00;
    border: 1px solid #ccc;
    padding: 20px;

    .title {
      display: flex;
      width: 100%;

      justify-content: space-between;

      .left {
        font-size: 14px;
        color: #fff;
        color: rgba(0, 0, 0, 0.45);
      }
    }

    .name {
      font-size: 42px;
      font-weight: 500;
      color: #000;
      margin: 10px 0;
    }

    .total {
      font-size: 16px;
      color: #000;
      // display: flex;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      /* 创建两列，每列宽度相等 */
      grid-template-rows: repeat(2, 10px);
      /* 创建四行，每行高度固定为100px */
      gap: 10px;

      div {
        // width: 25%;
      }
    }
  }
}
</style>