个人能力评价、积分管理、能力报告页面搭建及接口对接

package.json

@@ -16,9 +16,9 @@
     "preinstall": "node ./scripts/preinstall.js"
   },
   "dependencies": {
-
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.6.8",
+    "echarts": "5.3.2",
     "element-plus": "^2.6.2",
     "pinia": "^2.1.7",
     "postcss-plugin-px2rem": "^0.8.1",

src/api/person.ts

@@ -0,0 +1,21 @@
+import request from '@/utils/requset'
+
+request.interceptors.response.use(response => {
+    // @ts-ignore
+    if (response.code >= 200 && response.code < 300) return response;
+    else return Promise.reject(response);
+})
+
+enum api {
+    liststu = '/abilityEvaluation/personalAbilityEvaluationCollect/liststu', // 个人能力评价列表
+    integral = '/annualScore/personalCompTotalScore/liststu', // 个人积分列表
+    PAGE_XSFXBG = '/annualcompetitionprojectregistration/annualCompetitionProjectRegistration/xsfxbg',
+}
+export const getlEvaluateApi = (params: Record<'pageNo' | 'pageSize', number>) => request.get(api.liststu, { params });
+export const getlIntegralApi = (params: Record<'pageNo' | 'pageSize', number>) => request.get(api.integral, { params });
+
+export const getXsfxbgApi = (params = {}) => {
+    const par = { recreateFlag: false, annualid: '' };
+    Object.assign(par, params);
+    return request.get(api.PAGE_XSFXBG, { params: par });
+};

src/router/module/constRouter/index.ts

@@ -107,6 +107,36 @@ export const constRouter: any =
         }
       ],
     },
+    {
+      path: '/personalAbilityEvaluationCollectList',
+      name: 'PersonalAbilityEvaluationCollectList',
+      component: () => import('@/views/personalAbilityEvaluationCollectList/index.vue'),
+      meta: {
+        icon: '',
+        title: '个人积分管理',
+        hidden: false,
+      },
+    },
+    {
+      path: '/personalEvaluateList',
+      name: 'personalEvaluateList',
+      component: () => import('@/views/personalEvaluateList/index.vue'),
+      meta: {
+        icon: '',
+        title: '个人能力评价',
+        hidden: false,
+      },
+    },
+    {
+      path: '/personalReport',
+      name: 'PersonalReport',
+      component: () => import('@/views/personalReport/index.vue'),
+      meta: {
+        icon: '',
+        title: '个人能力报告',
+        hidden: false,
+      },
+    },
   ],
 }
 

src/utils/echarts.ts

@@ -0,0 +1,51 @@
+import * as echarts from 'echarts/core';
+
+import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart } from 'echarts/charts';
+
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  LegendComponent,
+  RadarComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+} from 'echarts/components';
+
+// TODO 如果想换成SVG渲染，就导出SVGRenderer，
+//  并且放到 echarts.use 里，注释掉 CanvasRenderer
+import { /*SVGRenderer*/ CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  // TODO 因为要兼容Online图表自适应打印，所以改成 CanvasRenderer，可能会模糊
+  CanvasRenderer,
+  PictorialBarChart,
+  RadarComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+]);
+
+export default echarts;

src/views/personalAbilityEvaluationCollectList/index.vue

@@ -0,0 +1,188 @@
+<template>
+    <div class="fill"></div>
+    <div class="banner">
+        <div class="box">
+            <div class="title-box">
+                <div class="title">报名信息确认</div>
+                <div class="text">
+                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
+                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
+                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
+                </div>
+            </div>
+
+            <div class="img-box">
+                <img src="../../assets/images/applyImg.png" alt="">
+            </div>
+        </div>
+    </div>
+    <div class="personalAbilityEvaluationCollectList">
+        <el-card body-class="table-list">
+            <div class="table-box">
+                <el-table v-loading="isLoading" ref="multipleTableRef" border :data="tableData" class="table"
+                    :class="{ height: tableData.length > 8 }">
+                    <el-table-column type="selection" width="55" />
+                    <el-table-column prop="depet_dictText" label="院系" />
+                    <el-table-column prop="name" label="姓名" />
+                    <el-table-column prop="workOn" label="学号" />
+                    <el-table-column prop="score" label="总积分" />
+                    <el-table-column label="操作" width="120">
+                        <template #default="scope"></template>
+                    </el-table-column>
+                    <template #empty>
+                        <el-empty description="暂无数据" />
+                    </template>
+                </el-table>
+                <div class="pagin-box">
+                    <el-pagination class="pagination" style="width: 100%;" v-model:current-page="pagInfo.currentPage"
+                        v-model:page-size="pagInfo.pageSize" :page-sizes="[10, 50, 80, 100]"
+                        layout="slo, total,slot,  sizes, prev, pager, next, jumper" :total="pagInfo.total"
+                        @change="getTableList" />
+                </div>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { getlIntegralApi } from '@/api/person';
+import { ElMessage } from 'element-plus'
+
+// loading
+const isLoading = ref(true)
+
+// 分页
+const pagInfo = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+})
+
+// 获取表格信息
+const tableData = reactive<any[]>([]);
+const setTableData = (arr: any[]) => {
+    tableData.length = 0;
+    tableData.push(...arr);
+}
+async function getTableList() {
+    try {
+        isLoading.value = true;
+        const res: any = await getlIntegralApi({ pageNo: pagInfo.currentPage, pageSize: pagInfo.pageSize })
+        pagInfo.total = res.result.total;
+        setTableData(res.result.records);
+    } catch (error) {
+        ElMessage.error('请求失败');
+    } finally {
+        isLoading.value = false;
+    }
+}
+
+
+getTableList();
+</script>
+
+
+
+<style lang="scss" scoped>
+.fill {
+    padding-top: 80px;
+}
+
+.banner {
+    width: 100%;
+    height: 289;
+    background: linear-gradient(90deg, #FFFFFF 0%, #F0F8FF 100%);
+    padding: 21px 0 37px 225px;
+
+    .box {
+        width: 1515px;
+        height: 231px;
+        display: flex;
+        gap: 104px;
+        justify-content: space-between;
+        align-items: center;
+
+        .title-box {
+            width: 1151px;
+
+            .title {
+                height: 59px;
+                font-family: Open Sans, Open Sans;
+                font-weight: bold;
+                font-size: 42px;
+                color: #333333;
+                line-height: 59px;
+            }
+
+            .text {
+                margin-top: 20px;
+                font-family: Open Sans, Open Sans;
+                font-weight: 400;
+                font-size: 20px;
+                color: #666666;
+                line-height: 23px;
+            }
+        }
+
+        .img-box {
+            img {
+                object-fit: cover;
+            }
+        }
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.personalAbilityEvaluationCollectList {
+
+    .table-list {
+        .table-box {
+            .table {
+                --el-table-header-bg-color: #fafafa;
+                width: 100%;
+
+                &.height {
+                    height: 375px;
+                }
+            }
+
+            .pagin-box {
+                width: 100%;
+                height: 64px;
+                display: flex;
+                align-items: center;
+
+                .pagination {
+                    padding: 0 24px;
+
+                    :deep() {
+                        .el-pagination__total {
+                            margin-right: auto;
+                        }
+
+                        li.number.is-active {
+                            background-color: #42D9AC;
+                            color: rgba(255, 255, 255, 0.9);
+                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        }
+
+                        span.el-pagination__jump {
+                            background-color: #F3F3F3;
+                            padding: 2px 8px;
+                        }
+                    }
+                }
+
+            }
+
+        }
+    }
+
+}
+</style>

src/views/personalEvaluateList/index.vue

@@ -0,0 +1,192 @@
+<template>
+    <div class="fill"></div>
+    <div class="banner">
+        <div class="box">
+            <div class="title-box">
+                <div class="title">报名信息确认</div>
+                <div class="text">
+                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
+                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
+                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
+                </div>
+            </div>
+
+            <div class="img-box">
+                <img src="../../assets/images/applyImg.png" alt="">
+            </div>
+        </div>
+    </div>
+    <div class="personalAbilityEvaluationCollectList">
+        <el-card body-class="table-list">
+           
+            <div class="table-box">
+                <el-table v-loading="isLoading" ref="multipleTableRef" border :data="tableData" class="table"
+                    :class="{ height: tableData.length > 8 }">
+                    <el-table-column type="selection" width="55" />
+                    <el-table-column prop="depetId_dictText" label="所属部门" />
+                    <el-table-column prop="workOn" label="学号" />
+                    <el-table-column prop="name" label="姓名" />
+                    <el-table-column prop="capacityName" label="能力名称" />
+                    <el-table-column prop="value" label="能力值" />
+                    <el-table-column label="操作" width="120">
+                        <template #default="scope"></template>
+                    </el-table-column>
+                    <template #empty>
+                        <el-empty description="暂无数据" />
+                    </template>
+                </el-table>
+                <div class="pagin-box">
+                    <el-pagination class="pagination" style="width: 100%;" v-model:current-page="pagInfo.currentPage"
+                        v-model:page-size="pagInfo.pageSize" :page-sizes="[10, 50, 80, 100]"
+                        layout="slo, total,slot,  sizes, prev, pager, next, jumper" :total="pagInfo.total"
+                        @change="getTableList" />
+                </div>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { getlEvaluateApi } from '@/api/person';
+import { ElMessage } from 'element-plus'
+
+// loading
+const isLoading = ref(true)
+
+// 分页
+const pagInfo = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+})
+
+
+// 获取表格信息
+const tableData = reactive<any[]>([]);
+const setTableData = (arr: any[]) => {
+    tableData.length = 0;
+    tableData.push(...arr);
+}
+async function getTableList() {
+    try {
+        isLoading.value = true;
+        const res: any = await getlEvaluateApi({ pageNo: pagInfo.currentPage, pageSize: pagInfo.pageSize })
+        pagInfo.total = res.result.total;
+        setTableData(res.result.records);
+    } catch (error) {
+        ElMessage.error('请求失败');
+    } finally {
+        isLoading.value = false;
+    }
+}
+
+
+getTableList();
+</script>
+
+
+
+<style lang="scss" scoped>
+.fill {
+    padding-top: 80px;
+}
+
+.banner {
+    width: 100%;
+    height: 289;
+    background: linear-gradient(90deg, #FFFFFF 0%, #F0F8FF 100%);
+    padding: 21px 0 37px 225px;
+
+    .box {
+        width: 1515px;
+        height: 231px;
+        display: flex;
+        gap: 104px;
+        justify-content: space-between;
+        align-items: center;
+
+        .title-box {
+            width: 1151px;
+
+            .title {
+                height: 59px;
+                font-family: Open Sans, Open Sans;
+                font-weight: bold;
+                font-size: 42px;
+                color: #333333;
+                line-height: 59px;
+            }
+
+            .text {
+                margin-top: 20px;
+                font-family: Open Sans, Open Sans;
+                font-weight: 400;
+                font-size: 20px;
+                color: #666666;
+                line-height: 23px;
+            }
+        }
+
+        .img-box {
+            img {
+                object-fit: cover;
+            }
+        }
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.personalAbilityEvaluationCollectList {
+
+    .table-list {
+        .table-box {
+            position: relative;
+            .table {
+                --el-table-header-bg-color: #fafafa;
+                width: 100%;
+
+                &.height {
+                    height: 375px;
+                }
+            }
+
+            .pagin-box {
+                width: 100%;
+                height: 64px;
+                display: flex;
+                align-items: center;
+
+                .pagination {
+                    padding: 0 24px;
+
+                    :deep() {
+                        .el-pagination__total {
+                            margin-right: auto;
+                        }
+
+                        li.number.is-active {
+                            background-color: #42D9AC;
+                            color: rgba(255, 255, 255, 0.9);
+                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        }
+
+                        span.el-pagination__jump {
+                            background-color: #F3F3F3;
+                            padding: 2px 8px;
+                        }
+                    }
+                }
+
+            }
+
+        }
+    }
+
+}
+</style>

src/views/personalReport/components/randerChart.vue

@@ -0,0 +1,211 @@
+<template>
+    <div id="rander-chart">
+
+    </div>
+</template>
+
+<script lang='ts' setup>
+  import echarts from '@/utils/echarts';
+
+import { onMounted,nextTick } from 'vue'
+const props = defineProps({
+    data: {
+      type: Array,
+      default: [
+        {
+          text: '前言探索',
+          value: 0,
+        },
+        {
+          capacityName: '奠定基础',
+          value: 0,
+        },
+        {
+          capacityName: '知识分析',
+          value: 0,
+        },
+        {
+          capacityName: '社会责任',
+          value: 0,
+        },
+        {
+          capacityName: '独立思考',
+          value: 0,
+        },
+        {
+          capacityName: '拓宽视野',
+          value: 0,
+        },
+        {
+          capacityName: '激发兴趣',
+          value: 0,
+        },
+        {
+          capacityName: '沟通协调',
+          value: 0,
+        },
+        {
+          capacityName: '设计开发',
+          value: 0,
+        },
+        {
+          capacityName: '研判分析',
+          value: 0,
+        },
+        {
+          capacityName: '创新能力',
+          value: 0,
+        },
+        {
+          capacityName: '团队协作',
+          value: 0,
+        },
+      ],
+    },
+  });
+
+const throttle = (fn: any) => {
+  let timer: any;
+  return function () {
+    if (timer) {
+      return;
+    }
+    timer = setTimeout(() => {
+      fn();
+      clearTimeout(timer);
+      timer = null;
+    }, 1000);
+  };
+};
+let Data = props.data
+console.log(Data, props.data);
+
+nextTick(() => {
+  // @ts-ignore
+  const myChart = echarts.init(document.getElementById("rander-chart"));
+  console.log(Data,1111);
+
+  // var legendData = ['车辆数']; //图例
+  var indicator =Data.map(item => {
+    return {name:item.capacityName,max:100}
+  });
+  var dataArr = [
+    {
+      value:Data.map(item => item.value),
+      name: '年度维度分析',
+      itemStyle: {
+        normal: {
+          lineStyle: {
+            color: "#55d7f2",
+          },
+          shadowColor: '#4A99FF',
+          shadowBlur: 10,
+        },
+      },
+      areaStyle: {
+        normal: {
+          // 单项区域填充样式
+          color: {
+            type: "linear",
+            x: 1, //右
+            y: 0, //下
+            x2: 1, //左
+            y2: 1, //上
+            colorStops: [
+              {
+                offset: 0,
+                color: "#1890ff",
+              },
+              {
+                offset: 1,
+                color: "#1890ff",
+              },
+            ],
+            globalCoord: false,
+          },
+          opacity: 1, // 区域透明度
+        },
+      },
+    },
+  ];
+  var colorArr = ["#fff", "#fff"]; //颜色
+  const option :any= {
+    backgroundColor: "transparent",
+    color: colorArr,
+    // legend: {
+    //   orient: "vertical",
+    //   // icon: 'circle', //图例形状
+    //   // data: legendData,
+    //   top: 0,
+    //   left: 20,
+    //   itemWidth: 8, // 图例标记的图形宽度。[ default: 25 ]
+    //   itemHeight: 8, // 图例标记的图形高度。[ default: 14 ]
+    //   itemGap: 22, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
+    //   textStyle: {
+    //     fontSize: 12,
+    //     fontWeight: "bold",
+    //     color: "#00E4FF",
+    //   },
+    // },
+    tooltip: {
+    trigger: 'item'
+  },
+    radar: {
+        radius: "60%",
+      // shape: 'circle',
+      name: {
+        textStyle: {
+          color: "#9ca4a6",
+          fontSize: 12,
+        },
+      },
+      indicator: indicator,
+      splitArea: {
+        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+        show: true,
+        areaStyle: {
+          // 分隔区域的样式设置。
+          color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
+        },
+      },
+      axisLine: {
+        //指向外圈文本的分隔线样式
+        lineStyle: {
+          color: "#2a5f61",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#2a5f61", // 分隔线颜色
+          width: 1, // 分隔线线宽
+        },
+      },
+    },
+    series: [
+      {
+        type: "radar",
+        symbolSize: 6,
+        symbol: "circle",
+        data: dataArr,
+
+      },
+    ],
+  };
+  myChart.setOption(option);
+  let resize = throttle(() => {
+    myChart.resize();
+  });
+  window.addEventListener("resize", resize);
+})
+onMounted(() => {
+
+
+});
+</script>
+
+<style lang='less' scoped>
+#rander-chart{
+    width: 100%;
+    height:450px;
+}
+</style>

src/views/personalReport/index.vue

@@ -0,0 +1,382 @@
+<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>