对接个人数据、个人数据详情页、考试详情页的新增表及试卷导出

src/api/modules/exam.js

@@ -11,6 +11,8 @@ export default {
     INTERFACE_GET_EXAM_DETAIL: "exams/{examId}",
     // 查询某场考试的详细信息的额外信息
     INTERFACE_GET_EXAM_DETAIL_MORE: "admin/exams/{examId}/details",
+    // 查询某场考试的详细信息-未参考人员
+    INTERFACE_GET_EXAM_DETAIL_MORE_UNREFERENCED: 'admin/non-participate-users',
     // 查询某场考试的试题信息
     INTERFACE_GET_EXAM_QUESTIONS_LIST: "exams/{examId}/questions",
     // 手动/自动 新建考试-基本信息

src/api/modules/user.js

@@ -12,6 +12,18 @@ export default {
     // 获取所有用户积分数据
     INTERFACE_GET_USER_POINTS_LIST: 'admin/user/points/data',
     // 导出试卷接口
-    INTERFACE_GET_EXAM_WORD: 'admin/downloadExamFile/{examId}'
+    INTERFACE_GET_USER_EXAM_FILE_BY_ADMIN: 'admin/downloadExamFile/{examId}',
+    // 获取用户头像
+    INTERFACE_GET_USER_HEADER: 'admin/user/avatar',
+    // 获取个人积分比例和每天积分数量
+    INTERFACE_GET_USER_POINTS_DETAILS: 'admin/user/points/details',
+    // 获取用户积分历史
+    INTERFACE_GET_USER_POINTS_HISTORY: 'admin/user/points-history',
+    // 获取用户考试历史
+    INTERFACE_GET_USER_EXAM_HISTORY: 'admin/user/exam-history',
+    // 获取用户阅读历史
+    INTERFACE_GET_USER_READ_HISTORY: 'admin/user/read-history',
+    // 导出用户试卷接口
+    INTERFACE_GET_USER_EXAM_FILE_BY_USER: 'admin/downloadExamFileByUser'
   }
 };

src/components/layout/components/NavTop.vue

@@ -9,7 +9,7 @@
       <span v-if="userInfo.userName" class="logout" @click="handleLogout"
         >注销</span
       >
-      <img :src="userInfo.header || defaultImg" />
+      <img :src="userInfo.header || defaultImg" fit="cover" />
       <span>{{ userInfo.userName || 'undefind' }}</span>
     </div>
   </div>

src/styles/index.js

@@ -32,7 +32,7 @@ import 'ant-design-vue/dist/antd.css';
 // 定义网络链接的图标库组件
 // import { Icon } from 'ant-design-vue';
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2605334_5nupkuiacgo.js',
+  scriptUrl: '//at.alicdn.com/t/font_2605334_5u0dezt1tha.js',
 });
 
 Vue.use(message);

src/views/Home.vue

@@ -238,6 +238,7 @@ export default {
       this.$_http
         .get(this.$_API.INTERFACE_GET_COUNT_ARTICLE_PROPORTION)
         .then((res) => {
+          console.log(res.data);
           let dataArr = this.formateResDataToEcharts(res.data); // 格式化数据结构为echarts所需要的结构
           this.articlesProportion = {
             title: '文章总计',

src/views/count/components/PersonEchartsBar.vue

@@ -0,0 +1,126 @@
+<template>
+  <div ref="myChartBar" :style="{ width: width, height: height }"></div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import * as echarts from 'echarts/core';
+import { GridComponent } from 'echarts/components';
+import { LineChart } from 'echarts/charts';
+import { UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+// 引入提示框组件
+require('echarts/lib/component/tooltip');
+
+echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
+export default {
+  props: {
+    // 数据
+    barData: {
+      type: Object,
+      default() {
+        return {
+          title: '统计图标题', // 标题
+          xAxis: {
+            data: [],
+          }, // x轴数据
+          yAxis: {
+            min: null,
+            max: null,
+          }, // y轴数据
+          series: {
+            data: [],
+          }, // 移入提示数据
+        };
+      },
+    },
+    // 宽度
+    width: {
+      type: String,
+      default: '100%',
+    },
+    // 高度
+    height: {
+      type: String,
+      default: '400px',
+    },
+  },
+  components: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  beforeDestroy() {},
+  watch: {
+    // 监听浏览器可视区域宽度是否变化
+    screenWidth() {
+      this.resizeByWindowFun(); // 初始化echarts图表大小
+    },
+  },
+  computed: {
+    ...mapState({
+      screenWidth: (state) => state.common.screenWidth,
+    }),
+  },
+  methods: {
+    // 初始化数据
+    initDataFun(barData) {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(this.$refs.myChartBar);
+      // 绘制图表
+      if (!barData) {
+        myChart.setOption({
+          title: {
+            text: '暂无数据',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              color: '#999',
+              fontWeight: 'normal',
+              fontSize: 24,
+            },
+          },
+        });
+      } else {
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis',
+          },
+          xAxis: {
+            type: 'category',
+            data: barData.xAxis || [],
+          },
+          yAxis: {
+            type: 'value',
+          },
+          series: [
+            {
+              type: 'line',
+              data: barData.series || [],
+
+              lineStyle: {
+                color: '#1890FF',
+              },
+
+              emphasis: {
+                itemStyle: {
+                  color: '#1890FF',
+                },
+              },
+            },
+          ],
+        });
+      }
+    },
+    // 根据窗口大小 初始化echarts图表大小
+    resizeByWindowFun() {
+      echarts.init(this.$refs.myChartBar).resize();
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>
+
+<style lang="less" scoped></style>

src/views/count/components/PersonEchartsDoughnut.vue

@@ -0,0 +1,137 @@
+<template>
+  <div ref="myChartPie" :style="{ width: width, height: height }"></div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { formatNumberToDollar } from '@/filters';
+// 引入基本模板
+let echarts = require('echarts/lib/echarts');
+// 引入柱状图组件
+require('echarts/lib/chart/bar');
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip');
+require('echarts/lib/component/title');
+import { LegendComponent } from 'echarts/components';
+import { PieChart } from 'echarts/charts';
+echarts.use([PieChart, LegendComponent]);
+export default {
+  props: {
+    // 数据
+    pieData: {
+      type: Object,
+      default() {
+        return {
+          title: '', // 标题
+          data: [], // 数据， { name, value }
+          count: 0, // 总数
+        };
+      },
+    },
+    // 宽度
+    width: {
+      type: String,
+      default: '100%',
+    },
+    // 高度
+    height: {
+      type: String,
+      default: '400px',
+    },
+  },
+  components: {},
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  beforeDestroy() {},
+  watch: {
+    // 监听浏览器可视区域宽度是否变化
+    screenWidth() {
+      this.resizeByWindowFun(); // 初始化echarts图表大小
+    },
+  },
+  computed: {
+    ...mapState({
+      screenWidth: (state) => state.common.screenWidth,
+    }),
+  },
+  methods: {
+    // 初始化数据
+    initDataFun(pieData) {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = echarts.init(this.$refs.myChartPie);
+      let data = genData(pieData.data);
+      // 绘制图表
+      myChart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)',
+        }, // 移入的提示
+        legend: {
+          orient: 'vertical',
+          icon: 'circle',
+          radius: '100%',
+          right: 10,
+          top: 10,
+          bottom: 10,
+          data: data.legendData,
+          selected: data.selected,
+        }, // 颜色标识标签
+        series: [
+          {
+            name: pieData.seriesLabel,
+            type: 'pie',
+            radius: ['35%', '60%'], // 第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
+            avoidLabelOverlap: false,
+            data: data.seriesData,
+            label: {
+              show: true,
+              position: 'center',
+              formatter: `  ${pieData.title}\r\n ${formatNumberToDollar(
+                pieData.count
+              )}`,
+              textStyle: {
+                fontSize: '20',
+                fontWeight: 'bold',
+                color: 'rgba(0, 0, 0, 0.65)',
+              },
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            },
+          },
+        ],
+      });
+      function genData(dataList) {
+        let legendData = [];
+        let seriesData = [];
+        dataList.forEach((item) => {
+          legendData.push(item.name);
+          seriesData.push({
+            name: item.name,
+            value: item.value,
+          });
+        });
+        return {
+          legendData,
+          seriesData,
+        };
+      }
+    },
+    // 根据窗口大小 初始化echarts图表大小
+    resizeByWindowFun() {
+      echarts.init(this.$refs.myChartPie).resize();
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>
+
+<style lang="less" scoped></style>

src/views/count/personData.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <a-spin :spinning="loading">
-      <div class="common-card a-card-margin-top basic-information-box">
+      <div class="common-card">
         <!-- 表单 -->
         <a-table
           :columns="columns"
@@ -66,14 +66,8 @@ export default {
       this.columns = [
         {
           title: '姓名',
-          dataIndex: 'userName',
-          key: 'userName',
-        },
-        {
-          title: '性别',
-          dataIndex: 'six',
-          key: 'six',
-          align: 'center',
+          dataIndex: 'nickName',
+          key: 'nickName',
         },
         {
           title: '学习积分',
@@ -134,10 +128,10 @@ export default {
       if (!record) {
         return;
       }
-      // this.$router.push({
-      //   path: '/home/personData/detail',
-      //   query: { id: record.userName },
-      // });
+      this.$router.push({
+        path: '/home/personData/detail', // record.userId 'testuser-tpxuGNLkZw'
+        query: { id: record.userId, nickName: record.nickName },
+      });
     },
   },
 };

src/views/count/personDataDetail.vue

@@ -1,13 +1,159 @@
 <template>
-  <div class="">内容</div>
+  <div class="app-container">
+    <a-spin :spinning="loading || loading1 || loading2 || loading3 || loading4">
+      <!-- 基础信息 -->
+      <div class="common-card user-basic-info">
+        <div class="user-basic-left">
+          <div class="user-basic-left-img">
+            <img v-if="userHeader" :src="userHeader" fit="cover" />
+            <div v-else class="default">
+              <icon-font class="iconFont" type="ali-icon-205yonghu_yonghu6" />
+            </div>
+          </div>
+          <div class="user-basic-left-text">
+            <span>{{ userBasicInfo.nickName }}</span>
+          </div>
+        </div>
+        <div class="user-basic-right">
+          <PersonEchartsDoughnut
+            ref="personEchartsDoughnutRef"
+            width="100%"
+            height="350px"
+          />
+        </div>
+      </div>
+
+      <!-- 积分历史 -->
+      <div class="common-card">
+        <div class="information-title">积分历史</div>
+        <PersonEchartsBar
+          ref="echartsCategoryRef"
+          width="100%"
+          height="400px"
+        />
+      </div>
+
+      <!-- 积分记录 -->
+      <div class="common-card">
+        <div class="information-title">积分记录</div>
+        <!-- 表单 -->
+        <a-table
+          :columns="userPointRecordColumns"
+          :data-source="userPointRecord"
+          :row-key="(record, index) => index"
+          :pagination="false"
+        >
+        </a-table>
+        <!-- 分页 -->
+        <div class="a-pagination-display">
+          <a-pagination
+            v-model="userPointRecordPagination.current"
+            :pageSize="userPointRecordPagination.pageSize"
+            :total.sync="userPointRecordPagination.total"
+            show-less-items
+            show-quick-jumper
+            @change="getUserPointRecord"
+          />
+        </div>
+      </div>
+
+      <!-- 考试记录 -->
+      <div class="common-card">
+        <div class="information-title">考试记录</div>
+        <!-- 表单 -->
+        <a-table
+          :columns="userExamRecordColumns"
+          :data-source="userExamRecord"
+          :row-key="(record, index) => index"
+          :pagination="false"
+        >
+          <template slot="action" slot-scope="text, record">
+            <a @click="handleExportExamFile(record)">导出试卷</a>
+          </template>
+        </a-table>
+        <!-- 分页 -->
+        <div class="a-pagination-display">
+          <a-pagination
+            v-model="userExamRecordPagination.current"
+            :pageSize="userExamRecordPagination.pageSize"
+            :total.sync="userExamRecordPagination.total"
+            show-less-items
+            show-quick-jumper
+            @change="getUserExamRecord"
+          />
+        </div>
+      </div>
+
+      <!-- 学习记录 -->
+      <div class="common-card">
+        <div class="information-title">学习记录</div>
+        <!-- 表单 -->
+        <a-table
+          :columns="userStudyRecordColumns"
+          :data-source="userStudyRecord"
+          :row-key="(record, index) => index"
+          :pagination="false"
+        >
+        </a-table>
+        <!-- 分页 -->
+        <div class="a-pagination-display">
+          <a-pagination
+            v-model="userStudyRecordPagination.current"
+            :pageSize="userStudyRecordPagination.pageSize"
+            :total.sync="userStudyRecordPagination.total"
+            show-less-items
+            show-quick-jumper
+            @change="getUserStudyRecord"
+          />
+        </div>
+      </div>
+    </a-spin>
+  </div>
 </template>
 
 <script>
+import PersonEchartsDoughnut from './components/PersonEchartsDoughnut';
+import PersonEchartsBar from './components/PersonEchartsBar';
 export default {
   props: {},
-  components: {},
+  components: {
+    PersonEchartsDoughnut,
+    PersonEchartsBar,
+  },
   data() {
-    return {};
+    return {
+      loading: false, // 基础数据加载动画
+      loading1: false, // 是否显示加载动画
+      loading2: false, // 是否显示加载动画
+      loading3: false, // 是否显示加载动画
+      loading4: false, // 是否显示加载动画
+      defaultImg: require('@/assets/image/default-avatar.png'),
+      userHeader: '', // 用户头像
+      userBasicInfo: null, // 基础信息
+      userPonitsCountInfo: null, // 积分类别信息
+      userPointsHistory: null, // 积分历史
+      userPointRecordColumns: null, // 表格列配置
+      userPointRecord: [], // 积分记录
+      userPointRecordPagination: {
+        pageSize: 10,
+        current: 1,
+        total: 0,
+      }, // 分页参数
+      userExamRecordColumns: null, // 表格列配置
+      userExamRecord: [], // 考试记录
+      userExamRecordPagination: {
+        pageSize: 10,
+        current: 1,
+        total: 0,
+      }, // 分页参数
+      userStudyRecordColumns: null, // 表格列配置
+      userStudyRecord: [], // 学习记录
+      userStudyRecordPagination: {
+        pageSize: 10,
+        current: 1,
+        total: 0,
+      }, // 分页参数
+    };
   },
   created() {
     this.initDataFun(); //初始化数据
@@ -19,7 +165,321 @@ export default {
   methods: {
     //初始化数据
     initDataFun() {
-      console.log(this.$route.query.id);
+      this.userBasicInfo = {
+        userId: this.$route.query.id,
+        nickName: this.$route.query.nickName,
+      };
+      this.getUserHeader(); // 获取用户头像
+      this.getUserBasicInfo(); // 获取：基础信息
+
+      // 积分记录-表单的列的配置参数
+      this.userPointRecordColumns = [
+        {
+          title: '事件',
+          dataIndex: 'event',
+          key: 'event',
+        },
+        {
+          title: '积分',
+          dataIndex: 'points',
+          key: 'points',
+          align: 'center',
+        },
+        {
+          title: '时间',
+          dataIndex: 'createdTime',
+          key: 'createdTime',
+          align: 'center',
+        },
+      ];
+      this.getUserPointRecord(); // 获取：积分历史
+
+      // 考试记录-表单的列的配置参数
+      this.userExamRecordColumns = [
+        {
+          title: '考试名称',
+          dataIndex: 'examName',
+          key: 'examName',
+        },
+        {
+          title: '总分',
+          dataIndex: 'totalPoints',
+          key: 'totalPoints',
+          align: 'center',
+        },
+        {
+          title: '成绩',
+          dataIndex: 'points',
+          key: 'points',
+          align: 'center',
+        },
+        {
+          title: '时间',
+          dataIndex: 'createdTime',
+          key: 'createdTime',
+          align: 'center',
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          key: 'action',
+          scopedSlots: { customRender: 'action' },
+          width: 100,
+        },
+      ];
+      this.getUserExamRecord(); // 获取：考试记录
+
+      // 学习记录-表单的列的配置参数
+      this.userStudyRecordColumns = [
+        {
+          title: '文章名称',
+          dataIndex: 'learningMaterialName',
+          key: 'learningMaterialName',
+        },
+        {
+          title: '时间',
+          dataIndex: 'createdTime',
+          key: 'createdTime',
+          align: 'center',
+        },
+      ];
+      this.getUserStudyRecord(); // 获取：学习记录
+    },
+    // 获取用户头像
+    getUserHeader() {
+      this.loading = true;
+      let params = {
+        userName: this.$route.query.id,
+      };
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_USER_HEADER, { params })
+        .then((res) => {
+          let resdData = res.data;
+          this.userHeader = resdData;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    // 获取：基础信息
+    getUserBasicInfo() {
+      this.loading1 = true;
+      let params = {
+        userName: this.$route.query.id,
+      };
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_USER_POINTS_DETAILS, { params })
+        .then((res) => {
+          let resdData = res.data;
+          if (resdData) {
+            // 扇形
+            if (resdData.PointsByEvents) {
+              let dataArr = this.formateResDataToEcharts(
+                resdData.PointsByEvents
+              ); // 格式化数据结构为echarts所需要的结构
+              this.userPonitsCountInfo = {
+                title: '总积分',
+                seriesLabel: '种类积分',
+                count: this.formateTotalPoints(resdData.PointsByEvents),
+                data: dataArr,
+              };
+              this.$refs.personEchartsDoughnutRef.initDataFun(
+                this.userPonitsCountInfo
+              );
+            }
+            // 折线
+            if (resdData.PointsByDates) {
+              let dataArr = this.formateResArrDataToEcharts(
+                resdData.PointsByDates
+              ); // 格式化数据结构为echarts所需要的结构
+              let xAxis = dataArr.map((item) => {
+                return item.name;
+              });
+              let series = dataArr.map((item) => {
+                return item.value;
+              });
+              if (xAxis.length > 0 && series.length > 0) {
+                this.userPointsHistory = {
+                  xAxis: xAxis,
+                  series: series,
+                };
+              }
+              this.$refs.echartsCategoryRef.initDataFun(this.userPointsHistory);
+            }
+          }
+          this.loading1 = false;
+        })
+        .catch(() => {
+          this.loading1 = false;
+        });
+    },
+    // 格式化数据结构为echarts所需要的结构
+    formateResArrDataToEcharts(data) {
+      let dataArr = data.map((item) => {
+        return getObj(item);
+      });
+      function getObj(obj) {
+        let objKey = '';
+        for (let key in obj) {
+          objKey = key;
+        }
+        return {
+          name: objKey,
+          value: obj[objKey],
+        };
+      }
+      return dataArr;
+    },
+    // 格式化数据结构为echarts所需要的结构
+    formateResDataToEcharts(data) {
+      let dataArr = [];
+      for (let key in data) {
+        dataArr.push({
+          name: key,
+          value: data[key],
+        });
+      }
+      return dataArr;
+    },
+    // 统计总分数
+    formateTotalPoints(data) {
+      let totalPoints = 0;
+      for (let key in data) {
+        totalPoints = totalPoints + data[key];
+      }
+      return totalPoints;
+    },
+    // 获取：积分记录
+    getUserPointRecord() {
+      this.loading2 = true;
+      let params = {
+        userName: this.userBasicInfo.userId,
+        page: this.userPointRecordPagination.current - 1,
+        size: this.userPointRecordPagination.pageSize,
+      };
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_USER_POINTS_HISTORY, { params })
+        .then((res) => {
+          let resdData = res.data;
+          if (resdData && resdData.content) {
+            this.userPointRecord = [...resdData.content];
+            this.userPointRecordPagination.total = resdData.totalElements; // 总条数
+          } else {
+            this.userPointRecord = [];
+            this.userPointRecordPagination.total = resdData.totalElements; // 总条数
+          }
+          this.loading2 = false;
+        })
+        .catch(() => {
+          this.loading2 = false;
+        });
+    },
+    // 获取：考试记录
+    getUserExamRecord() {
+      this.loading3 = true;
+      let params = {
+        userName: this.userBasicInfo.userId,
+        page: this.userExamRecordPagination.current - 1,
+        size: this.userExamRecordPagination.pageSize,
+      };
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_USER_EXAM_HISTORY, { params })
+        .then((res) => {
+          let resdData = res.data;
+          if (resdData && resdData.content) {
+            this.userExamRecord = [...resdData.content];
+            this.userExamRecordPagination.total = resdData.totalElements; // 总条数
+          } else {
+            this.userExamRecord = [];
+            this.userExamRecordPagination.total = resdData.totalElements; // 总条数
+          }
+          this.loading3 = false;
+        })
+        .catch(() => {
+          this.loading3 = false;
+        });
+    },
+    // 操作：导出试卷
+    handleExportExamFile(record) {
+      console.log('导出试卷', record);
+      let that = this;
+      that.$confirm({
+        title: '导出试卷',
+        content: `确认导出试卷吗？`,
+        okText: '确认',
+        cancelText: '取消',
+        onOk() {
+          that.loading = true;
+          let params = {
+            userId: that.userBasicInfo.userId,
+            examId: record.examId,
+          };
+          that.$_http
+            .get(
+              that.$_API.INTERFACE_GET_USER_EXAM_FILE_BY_USER,
+              { params },
+              {
+                headers: { 'Content-Type': 'application/x-download' },
+                responseType: 'blob',
+              }
+            )
+            .then((res) => {
+              if (res.data) {
+                // const link = document.createElement('a');
+                // link.style.display = 'none';
+                // link.href = URL.createObjectURL(res.data);
+                // let fileName = `试卷_${record.examName}.xls`;
+                // link.setAttribute('download', fileName);
+                // document.body.appendChild(link);
+                // link.click();
+                // document.body.removeChild(link);
+                const link = document.createElement('a');
+                link.style.display = 'none';
+                link.href = URL.createObjectURL(res.data);
+                let fileName = `试卷_${record.examName}.xls`;
+                // let fileName = `试卷_名字.xls`;
+                link.setAttribute('download', fileName);
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+              } else {
+                console.error('res.data is not define');
+              }
+              that.loading = false;
+            })
+            .catch(() => {
+              that.loading = false;
+            });
+        },
+        onCancel() {},
+      });
+    },
+    // 获取：学习记录
+    getUserStudyRecord() {
+      this.loading4 = true;
+      this.userStudyRecord = [];
+      let params = {
+        userName: this.userBasicInfo.userId,
+        page: this.userStudyRecordPagination.current - 1,
+        size: this.userStudyRecordPagination.pageSize,
+      };
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_USER_READ_HISTORY, { params })
+        .then((res) => {
+          let resdData = res.data;
+          if (resdData && resdData.content) {
+            this.userStudyRecord = [...resdData.content];
+            this.userStudyRecordPagination.total = resdData.totalElements; // 总条数
+          } else {
+            this.userStudyRecord = [];
+            this.userStudyRecordPagination.total = resdData.totalElements; // 总条数
+          }
+          this.loading4 = false;
+        })
+        .catch(() => {
+          this.loading4 = false;
+        });
     },
   },
 };
@@ -27,4 +487,57 @@ export default {
 
 <style lang="less"></style>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+@import '~@/styles/common/variable.less';
+
+.information-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: @mainColorBlack65;
+  margin-bottom: @paddingMarginVal;
+}
+.user-basic-info {
+  display: flex;
+  justify-content: space-between;
+  .user-basic-left {
+    display: flex;
+    align-items: center;
+    padding-left: 40px;
+    .user-basic-left-img {
+      width: 120px;
+      height: 120px;
+      border-radius: 10px;
+      overflow: hidden;
+      img {
+        width: 120px;
+        height: 120px;
+      }
+      .default {
+        width: 100%;
+        height: 100%;
+        background-color: #d6d6d6;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .iconFont {
+          color: #fff;
+          font-size: 50px;
+          font-weight: bolder;
+        }
+      }
+    }
+    .user-basic-left-text {
+      margin-left: @paddingMarginVal * 2;
+      span {
+        font-size: 16px;
+        color: @mainColorBlack;
+        font-weight: bolder;
+      }
+    }
+  }
+  .user-basic-right {
+    width: 60%;
+    height: 350px;
+  }
+}
+</style>

src/views/examManagement/examManagementDetail.vue

@@ -372,7 +372,6 @@ export default {
     },
     // 操作：导出试卷
     handleExportExam() {
-      console.log('导出试卷');
       let that = this;
       that.$confirm({
         title: '导出试卷',
@@ -385,10 +384,30 @@ export default {
             examId: that.examId,
           };
           that.$_http
-            .get(formatePathParams(that.$_API.INTERFACE_GET_EXAM_WORD, params))
-            .then(() => {
+            .get(
+              formatePathParams(
+                that.$_API.INTERFACE_GET_USER_EXAM_FILE_BY_ADMIN,
+                params
+              ),
+              {
+                headers: { 'Content-Type': 'application/x-download' },
+                responseType: 'blob',
+              }
+            )
+            .then((res) => {
+              if (res.data) {
+                const link = document.createElement('a');
+                link.style.display = 'none';
+                link.href = URL.createObjectURL(res.data);
+                let fileName = `试卷_${that.examDetailData.name}.xls`;
+                link.setAttribute('download', fileName);
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+              } else {
+                console.error('res.data is not define');
+              }
               that.loading = false;
-              // that.$message.success('导出试卷成功');
             })
             .catch(() => {
               that.loading = false;

src/views/examManagement/examManagementDetailMore.vue

@@ -31,12 +31,12 @@
       <a-table
         :columns="unReferencedColumns"
         :data-source="unReferencedTableData"
-        :row-key="(record) => record.id"
+        :row-key="(record, index) => index"
         :pagination="false"
       >
-        <template slot="userName" slot-scope="text, record">
+        <!-- <template slot="userName" slot-scope="text, record">
           <span>{{ record.user ? record.user.userName : '' }}</span>
-        </template>
+        </template> -->
       </a-table>
       <div class="a-pagination-display">
         <a-pagination
@@ -45,7 +45,7 @@
           :total.sync="unReferencedPagination.total"
           show-less-items
           show-quick-jumper
-          @change="getUnReferencedList"
+          @change="getUnReferencedListAxios"
         />
       </div>
     </div>
@@ -122,12 +122,15 @@ export default {
         },
       ];
       this.getExamCountInfo(); // 查询：考试的统计信息
+      this.getUnReferencedListAxios(); // 查询：未参考人员统计信息
     },
 
     // 查询：考试的统计信息
     getExamCountInfo() {
       let params = {
         examId: this.examId,
+        page: this.testScoreTablePagination.current - 1,
+        size: this.testScoreTablePagination.pageSize,
       };
       this.$_http
         .get(
@@ -139,31 +142,38 @@ export default {
             this.tableDataAll = resData.historyList;
 
             this.testScoreTablePagination.current = 1;
-            this.testScoreTablePagination.total = this.tableDataAll.length;
+            this.testScoreTablePagination.total = this.tableDataAll.length; // 总条数
             this.testScoreTableData = this.getCurrenPageData(
               this.tableDataAll,
               this.testScoreTablePagination.current,
               this.testScoreTablePagination.pageSize
             );
-
-            this.unReferencedPagination.current = 1;
-            this.unReferencedPagination.total = this.tableDataAll.length;
-            this.unReferencedTableData = this.getCurrenPageData(
-              this.tableDataAll,
-              this.unReferencedPagination.current,
-              this.unReferencedPagination.pageSize
-            );
           } else {
             this.tableDataAll = [];
             this.testScoreTableData = [];
             this.testScoreTablePagination.total = 0;
-            this.unReferencedTableData = [];
-            this.unReferencedPagination.total = 0;
           }
         })
         .catch(() => {});
     },
 
+    // 查询：未参考人员统计信息
+    getUnReferencedListAxios() {
+      let params = {
+        examId: this.examId,
+        page: this.unReferencedPagination.current - 1,
+        size: this.unReferencedPagination.pageSize,
+      };
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_EXAM_DETAIL_MORE_UNREFERENCED, params)
+        .then((res) => {
+          let resData = res.data.content;
+          this.unReferencedTableData = [...resData];
+          this.unReferencedTableData.total = res.data.totalElements; // 总条数
+        })
+        .catch(() => {});
+    },
+
     // 获取指定页码的数据
     getCurrenPageData(array, current, pageSize) {
       let returnArr = [];
@@ -181,13 +191,13 @@ export default {
         this.testScoreTablePagination.pageSize
       );
     },
-    getUnReferencedList() {
-      this.unReferencedTableData = this.getCurrenPageData(
-        this.tableDataAll,
-        this.testScoreTablePagination.current,
-        this.testScoreTablePagination.pageSize
-      );
-    },
+    // getUnReferencedList() {
+    //   this.unReferencedTableData = this.getCurrenPageData(
+    //     this.tableDataAll,
+    //     this.testScoreTablePagination.current,
+    //     this.testScoreTablePagination.pageSize
+    //   );
+    // },
   },
 };
 </script>