no message

src/api/user/index.ts

@@ -6,6 +6,21 @@ enum API {
   USERINFO_URL = "/wanzai/api/driver/getUserPage",
   // 获取学生历史出勤数据 接口地址
   STUDENTATTENDANCE_URL = "/wanzai/api/smartAttendance/historicalAttendance",
+  // 获取学生各科成绩的平均分 接口地址
+  SCOREINFO_URL = "/wanzai/api/smartScore/averageScore",
+  // 获取教师寄语 接口地址
+  TEACHERMSG_URL = "/wanzai/api/smartScore/teacherMessage",
+  // 获取日常轨迹 接口地址
+  TRACKDATA_URL = "/wanzai/api/smartFaceDiscern/lastSevenDaysTrack",
+  // 获取考试名称数组 接口地址
+  EXAMNAME_URL = "/wanzai/api/smartScore/studentExamName",
+  // 获取历史成绩统计 接口地址
+  HISEXAMDATA_URL = "/wanzai/api/smartScore/historicalExam",
+  // 获取考评记录数据 接口地址
+  EVALUATEDATA_URL = "/wanzai/api/smartEvaluateStudent/historicalEvaluation",
+
+  // 获取教师战力值排行榜数据 接口地址
+  RANKINGLIST = "/wanzai/api/smartEvaluateTeacher/rankingList",
 }
 
 // 获取用户汇总数据
@@ -15,3 +30,31 @@ export const reqGetUserInfo = (data: any) =>
 // 获取学生历史出勤数据
 export const reqGetStudentAttendance = (data: any) =>
   request.get(API.STUDENTATTENDANCE_URL, { params: data });
+
+// 获取学生各科成绩的平均分
+export const reqGetScoreInfo = (data: any) =>
+  request.get(API.SCOREINFO_URL, { params: data });
+
+// 获取教师寄语
+export const reqGetTeacherMsg = (data: any) =>
+  request.get(API.TEACHERMSG_URL, { params: data });
+
+// 获取日常轨迹
+export const reqGetTrackData = (data: any) =>
+  request.get(API.TRACKDATA_URL, { params: data });
+
+// 获取考试名称数组
+export const reqGetExamName = (data: any) =>
+  request.get(API.EXAMNAME_URL, { params: data });
+
+// 获取历史成绩统计
+export const reqGetHisExamData = (data: any) =>
+  request.get(API.HISEXAMDATA_URL, { params: data });
+
+// 获取考评记录数据
+export const reqGetEvaluateData = (data: any) =>
+  request.get(API.EVALUATEDATA_URL, { params: data });
+
+// 获取教师战力值排行榜数据
+export const reqGetRankingList = (data: any) =>
+  request.get(API.RANKINGLIST, { params: data });

src/components/student/studentCenter.vue

@@ -7,8 +7,8 @@
       <!-- 教师寄语区域 -->
       <div class="top_msg">
         <div class="msg_title">教师寄语</div>
-        <div class="msg_detail">
-          老师认为你是一个很需要压力的人，有压力才会有进步，你在校表现良好，也乐于助人，但学习上对自己不够严格，慵慵懒懒的，要进步首先要端正学习态度，多动脑动手只有这样才能获得满意的成绩！
+        <div class="msg_detail" :title="teacherMsg">
+          {{ teacherMsg }}
         </div>
       </div>
     </div>
@@ -22,8 +22,9 @@
 
       <!-- 轨迹线展示区域 -->
       <div class="bottom_box">
+        <!-- 每一个轨迹区域 -->
         <div
-          v-for="(item, index) in 7"
+          v-for="(item, index) in trackList"
           :key="index"
           :class="index % 2 === 0 ? 'bottom_line' : 'bottom_line2'"
         >
@@ -33,20 +34,15 @@
               <div class="detail_img">
                 <el-image
                   style="width: 38px; height: 45px"
-                  src="https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
-                  :preview-src-list="[
-                    'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
-                  ]"
+                  :src="item.image"
+                  :preview-src-list="[item.image]"
                   fit="cover"
                 />
               </div>
               <div>
                 <div>地址：</div>
-                <div
-                  class="detail_address"
-                  title="江西省南昌市经开区黄家湖文化大道"
-                >
-                  江西省南昌市经开区黄家湖文化大道
+                <div class="detail_address" :title="item.location">
+                  {{ item.location }}
                 </div>
               </div>
             </div>
@@ -56,7 +52,7 @@
               <span class="span">
                 <el-icon size="12"><Clock /></el-icon>
               </span>
-              <span class="text">9.20&nbsp;&nbsp;08:00</span>
+              <span class="text">{{ item.dateTime.slice(-14) }}</span>
             </div>
           </div>
           <span>—</span>
@@ -67,6 +63,9 @@
           <div class="small"></div>
           <span>—</span>
         </div>
+
+        <!-- 没有数据时展示 -->
+        <div class="bottom_nodata" v-if="!trackList.length">暂无数据</div>
       </div>
     </div>
   </div>
@@ -74,34 +73,115 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import * as Echarts from "echarts";
-
+// 引入用户肖像相关的接口
+import {
+  reqGetScoreInfo,
+  reqGetTeacherMsg,
+  reqGetTrackData,
+} from "@/api/user/index";
+// 引入解密函数
+import { decryptDes } from "@/utils/des";
+
+const $route = useRoute();
+
+// 雷达图实例
 let myRaChart: any;
-
+// 雷达图DOM
 const radarChart = ref(null);
 
+// 用户id
+const userId = ref();
+// 用户信息
+const userInfo = ref();
+
+// 雷达图数据数组
+const valueList = ref<any>([]);
+// 雷达图学科数据数组
+const typeList = ref<any>([]);
+
+// 教师寄语信息
+const teacherMsg = ref("");
+
+// 轨迹数组数据
+const trackList = ref<any>([]);
+
 onMounted(() => {
-  myRaChart = Echarts.init(radarChart.value);
-  initRaChart();
+  const obj = JSON.parse(decodeURIComponent($route.query.obj as string));
+  userInfo.value = obj;
+
+  // 获取用户id
+  userId.value = obj.id;
+
+  // 获取学生各科成绩的平均分
+  getScoreInfo();
+  // 获取教师寄语信息
+  getTeacherMsg();
+  // 获取日常轨迹
+  getTrackData();
 });
 
+// 获取学生各科成绩的平均分
+const getScoreInfo = async () => {
+  const res = await reqGetScoreInfo({
+    userId: userId.value,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    const result = JSON.parse(decryptDes(res.data));
+    // console.log(result);
+
+    result.forEach((ele: any) => {
+      valueList.value.push(ele.score);
+      typeList.value.push({
+        name: ele.subjectName,
+        max: 150,
+      });
+    });
+
+    // 初始化雷达图
+    initRaChart();
+  }
+};
+
+// 获取教师寄语信息
+const getTeacherMsg = async () => {
+  const res = await reqGetTeacherMsg({
+    cardNo: userInfo.value.cardNo,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    const result = JSON.parse(decryptDes(res.data));
+    // console.log(result);
+    teacherMsg.value = result.teacherMessage;
+  }
+};
+
+// 获取日常轨迹
+const getTrackData = async () => {
+  const res = await reqGetTrackData({
+    userId: userId.value,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    const result = JSON.parse(decryptDes(res.data));
+    // console.log(result);
+
+    trackList.value = result;
+  }
+};
+
 // 初始化雷达图
 const initRaChart = () => {
+  myRaChart = Echarts.init(radarChart.value);
+
   const options = {
     tooltip: {
       trigger: "item",
     },
     radar: {
-      indicator: [
-        { name: "语文", max: 150 },
-        { name: "数学", max: 150 },
-        { name: "英语", max: 150 },
-        { name: "地理", max: 150 },
-        { name: "政治", max: 150 },
-        { name: "历史", max: 150 },
-        { name: "化学", max: 150 },
-        { name: "物理", max: 150 },
-      ],
+      indicator: typeList.value,
       axisName: {
         color: "#fff",
         fontSize: 19.5,
@@ -128,7 +208,7 @@ const initRaChart = () => {
         name: "学习成绩",
         data: [
           {
-            value: [150, 120, 99, 78, 52, 96, 82, 86],
+            value: valueList.value,
             areaStyle: {
               color: "rgba(0, 209, 200, 0.5)",
             },
@@ -395,6 +475,10 @@ const initRaChart = () => {
           background-color: #70b7fa;
         }
       }
+
+      .bottom_nodata {
+        margin: auto;
+      }
     }
   }
 }

src/components/student/studentLeft.vue

@@ -8,19 +8,16 @@
       </div>
       <div class="top_detail">
         <div class="detail_photo">
-          <img
-            class="img"
-            src="https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
-          />
+          <img class="img" :src="userInfo?.headImage" />
           <div class="photo_icon">
             <el-icon size="20" color="#2493F1"><ArrowDownBold /></el-icon>
           </div>
         </div>
         <div class="detail_msg">
-          <div>姓名：张晓晓</div>
-          <div>性别：男</div>
-          <div>编号：2216161</div>
-          <div>部门：学生</div>
+          <div>姓名：{{ userInfo?.name }}</div>
+          <div>性别：{{ userInfo?.sexId === 1 ? "男" : "女" }}</div>
+          <div>编号：{{ userInfo?.cardNo }}</div>
+          <div>部门：{{ userInfo?.departMent }}</div>
         </div>
       </div>
     </div>
@@ -37,15 +34,15 @@
         <div class="msg_change">
           <div
             class="change_box"
-            :class="currentTimeRang === 0 ? 'active' : ''"
-            @click="changeTimeRang(0)"
+            :class="currentTimeRang === 1 ? 'active' : ''"
+            @click="changeTimeRang(1)"
           >
             本学期
           </div>
           <div
             class="change_box"
-            :class="currentTimeRang === 1 ? 'active' : ''"
-            @click="changeTimeRang(1)"
+            :class="currentTimeRang === 3 ? 'active' : ''"
+            @click="changeTimeRang(3)"
           >
             本周
           </div>
@@ -83,13 +80,14 @@
       </div>
 
       <!-- 图表展示区域 -->
-      <div class="bottom_chart" ref="pieChart">123</div>
+      <div class="bottom_chart" ref="pieChart"></div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import * as Echarts from "echarts";
 import { countUpNum } from "@/utils/countUpNum";
 
@@ -99,11 +97,18 @@ import { reqGetStudentAttendance } from "@/api/user/index";
 //@ts-ignore
 import { decryptDes } from "@/utils/des.ts";
 
-const value = ref(50);
-const value2 = ref(50);
-const value3 = ref(50);
-const value4 = ref(50);
-const value5 = ref(50);
+const $route = useRoute();
+
+// 准时数据
+const value = ref(0);
+// 请假数据
+const value2 = ref(0);
+// 迟到数据
+const value3 = ref(0);
+// 超时打卡数据
+const value4 = ref(0);
+// 未打卡数据
+const value5 = ref(0);
 
 // DOM元素
 const valueDom = ref();
@@ -112,43 +117,85 @@ const valueDom3 = ref();
 const valueDom4 = ref();
 const valueDom5 = ref();
 
+// 图表实例
 let myPieChart: any;
+// 图表DOM元素
 const pieChart = ref();
 
-// 切换考勤统计时间 0本学期 1本周 2本月
-const currentTimeRang = ref(0);
+// 切换考勤统计时间 1本学期 2本月 3本周
+const currentTimeRang = ref(1);
 
+// 图表数据
 const chartData = ref([
-  { value: 5, name: "准时" },
-  { value: 6, name: "请假" },
-  { value: 3, name: "迟到" },
-  { value: 2, name: "超时打卡" },
-  { value: 1, name: "未打卡" },
+  { value: 0, name: "准时" },
+  { value: 0, name: "请假" },
+  { value: 0, name: "迟到" },
+  { value: 0, name: "超时打卡" },
+  { value: 0, name: "未打卡" },
 ]);
 
+// 打卡总次数
+const total = ref(0);
+
+// 用户id
+const userId = ref();
+// 用户信息
+const userInfo = ref();
+
 onMounted(() => {
+  const obj = JSON.parse(decodeURIComponent($route.query.obj as string));
+  userInfo.value = obj;
+  userId.value = obj.id;
   // 获取学生历史出勤数据
   getStudentAttendance();
-  myPieChart = Echarts.init(pieChart.value);
-  initPieChart();
-
-  getCountUpNum();
 });
 
 // 获取学生历史出勤数据
 const getStudentAttendance = async () => {
   const res = await reqGetStudentAttendance({
-    userId: 7967,
-    dateTime: 1,
+    userId: userId.value,
+    dateTime: currentTimeRang.value,
   });
   // console.log(res);
   if ((res as any).code == 200) {
     const result = JSON.parse(decryptDes(res.data));
-    console.log(result);
+    // console.log(result);
+
+    // 准时数据
+    value.value = result.punctuality;
+    // 请假数据
+    value2.value = result.askForLeave;
+    // 迟到数据
+    value3.value = result.beLate;
+    // 超时打卡数据
+    value4.value = result.clockOut;
+    // 未打卡数据
+    value5.value = result.notClockingIn;
+
+    // 整理图表数据
+    chartData.value[0].value = result.punctuality;
+    chartData.value[1].value = result.askForLeave;
+    chartData.value[2].value = result.beLate;
+    chartData.value[3].value = result.clockOut;
+    chartData.value[4].value = result.notClockingIn;
+
+    // 获取打卡总次数
+    total.value = chartData.value.reduce((pre, ele) => {
+      return pre + ele.value;
+    }, 0);
+
+    //  初始化扇形图
+    initPieChart();
+
+    // 让数字跳动
+    getCountUpNum();
   }
 };
 
+//  初始化扇形图
 const initPieChart = () => {
+  myPieChart = Echarts.init(pieChart.value);
+
   const options = {
     title: {
       text: "总次数",
@@ -158,7 +205,7 @@ const initPieChart = () => {
         fontSize: 14,
         color: "#D5E3EA",
       },
-      subtext: "200",
+      subtext: " " + total.value,
       subtextStyle: {
         fontSize: 18,
         color: "#D5E3EA",
@@ -192,7 +239,7 @@ const initPieChart = () => {
       },
       formatter: (params: any) => {
         const valueObj: any = chartData.value.find(
-          (item) => item.name === params
+          (item: any) => item.name === params
         );
         return params + "{a|" + valueObj.value + "}";
       },
@@ -219,16 +266,13 @@ const initPieChart = () => {
 
   myPieChart.setOption(options);
 };
+
 // 考勤统计切换时间范围按钮回调
 const changeTimeRang = (value: number) => {
   if (currentTimeRang.value !== value) {
-    if (value === 0) {
-      currentTimeRang.value = 0;
-    } else if (value === 1) {
-      currentTimeRang.value = 1;
-    } else if (value === 2) {
-      currentTimeRang.value = 2;
-    }
+    currentTimeRang.value = value;
+    myPieChart.dispose();
+    getStudentAttendance();
   }
 };
 

src/components/student/studentRight.vue

@@ -11,21 +11,25 @@
       <div class="box_select">
         <span>考试名称</span>
         <el-select
-          v-model="value"
+          v-model="examName"
           placeholder="请选择学期"
           style="width: 206px"
+          @change="handleChange"
         >
           <el-option
-            v-for="item in optionsTime"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="(item, index) in optionsTime"
+            :key="index"
+            :label="(item as any).totalName"
+            :value="(item as any).totalName"
           />
         </el-select>
       </div>
 
       <!-- 图表展示区域 -->
-      <div class="box_chart" ref="barChart"></div>
+      <div v-if="examName" class="box_chart" ref="barChart"></div>
+
+      <!-- 没有数据时展示 -->
+      <div v-if="!examName" class="box_nodata">暂无数据</div>
     </div>
 
     <!-- 考评记录区域 -->
@@ -52,28 +56,41 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import * as Echarts from "echarts";
+// 引入用户画像相关的接口
+import {
+  reqGetExamName,
+  reqGetHisExamData,
+  reqGetEvaluateData,
+} from "@/api/user/index";
+// 引入解密函数
+import { decryptDes } from "@/utils/des";
+
+const $route = useRoute();
 
+// 用户id
+const userId = ref();
+// 用户信息
+const userInfo = ref();
+// 柱状图实例
 let myBarChart: any;
+// 柱状图DOM
 const barChart = ref();
 
-const value = ref("");
+// 当前选择的学期
+const examName = ref("");
 
-const optionsTime = [
-  {
-    value: "0",
-    label: "2022-2023",
-  },
-  {
-    value: "1",
-    label: "2021-2022",
-  },
-  {
-    value: "2",
-    label: "2020-2021",
-  },
-];
+// 成绩统计学期筛选框数组
+const optionsTime = ref([]);
 
+// 图表X轴学科数组数据
+const subjectList = ref<any>([]);
+
+// 图表Y轴成绩数组数据
+const valueList = ref<any>([]);
+
+// 考评记录数组
 const tableData = [
   {
     time: "2020-2021秋季",
@@ -110,11 +127,82 @@ const tableData = [
 ];
 
 onMounted(() => {
-  myBarChart = Echarts.init(barChart.value);
-  initBarChart();
+  const obj = JSON.parse(decodeURIComponent($route.query.obj as string));
+  userInfo.value = obj;
+  userId.value = obj.id;
+
+  // 获取考试名称数组
+  getExamName();
+
+  // 获取考评记录数据
+  getEvaluateData();
 });
 
+// 获取考试名称数组
+const getExamName = async () => {
+  const res = await reqGetExamName({
+    userId: userId.value,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    const result = JSON.parse(decryptDes(res.data));
+    // console.log(result);
+    optionsTime.value = result;
+
+    if (result.length) {
+      examName.value = result[0].totalName;
+      // 获取学生各科成绩
+      getScoreInfo();
+    }
+  }
+};
+
+// 获取考评记录数据
+const getEvaluateData = async () => {
+  const res = await reqGetEvaluateData({
+    cardNo: userInfo.value.cardNo,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    const result = JSON.parse(decryptDes(res.data));
+    console.log(result);
+  }
+};
+
+// 获取学生各科成绩
+const getScoreInfo = async () => {
+  const temObj: any = optionsTime.value.find(
+    (ele: any) => ele.totalName === examName.value
+  );
+  // console.log(temObj);
+
+  const res = await reqGetHisExamData({
+    userId: userId.value,
+    semesterId: temObj.semesterId,
+    examTypeId: temObj.examTypeId,
+  });
+  // console.log(res);
+
+  if ((res as any).code == 200) {
+    const result = JSON.parse(decryptDes(res.data));
+    // console.log(result);
+
+    if (result.length) {
+      result.forEach((ele: any) => {
+        subjectList.value.push(ele.subjectName);
+        valueList.value.push(ele.score);
+      });
+    }
+
+    // 初始化柱状图
+    initBarChart();
+  }
+};
+
+// 初始化柱状图
 const initBarChart = () => {
+  myBarChart = Echarts.init(barChart.value);
+
   const options = {
     tooltip: {
       trigger: "axis",
@@ -130,7 +218,7 @@ const initBarChart = () => {
     },
     xAxis: {
       type: "category",
-      data: ["语文", "历史", "数学", "英语", "物理", "化学", "地理", "生物"],
+      data: subjectList.value,
       axisTick: {
         show: false,
       },
@@ -160,7 +248,7 @@ const initBarChart = () => {
     },
     series: [
       {
-        data: [80, 45, 99, 78, 52, 96, 82, 86],
+        data: valueList.value,
         type: "bar",
         barWidth: "60%",
         label: {
@@ -182,6 +270,14 @@ const initBarChart = () => {
 
   myBarChart.setOption(options);
 };
+
+// 筛选框切换回调
+const handleChange = () => {
+  myBarChart.dispose();
+  subjectList.value = [];
+  valueList.value = [];
+  getScoreInfo();
+};
 </script>
 
 <style lang="scss" scoped>
@@ -228,6 +324,11 @@ const initBarChart = () => {
       height: 270px;
     }
 
+    .box_nodata {
+      margin-top: 150px;
+      text-align: center;
+    }
+
     .box_form {
       padding-right: 44px;
       margin-top: 48px;

src/components/teacher/teacherCenter.vue

@@ -14,8 +14,9 @@
 
       <!-- 轨迹线展示区域 -->
       <div class="bottom_box">
+        <!-- 每一个轨迹区域 -->
         <div
-          v-for="(item, index) in 7"
+          v-for="(item, index) in trackList"
           :key="index"
           :class="index % 2 === 0 ? 'bottom_line' : 'bottom_line2'"
         >
@@ -25,20 +26,15 @@
               <div class="detail_img">
                 <el-image
                   style="width: 38px; height: 45px"
-                  src="https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
-                  :preview-src-list="[
-                    'https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
-                  ]"
+                  :src="item.image"
+                  :preview-src-list="[item.image]"
                   fit="cover"
                 />
               </div>
               <div>
                 <div>地址：</div>
-                <div
-                  class="detail_address"
-                  title="江西省南昌市经开区黄家湖文化大道"
-                >
-                  江西省南昌市经开区黄家湖文化大道
+                <div class="detail_address" :title="item.location">
+                  {{ item.location }}
                 </div>
               </div>
             </div>
@@ -48,7 +44,7 @@
               <span class="span">
                 <el-icon size="12"><Clock /></el-icon>
               </span>
-              <span class="text">9.20&nbsp;&nbsp;08:00</span>
+              <span class="text">{{ item.dateTime.slice(-14) }}</span>
             </div>
           </div>
           <span>—</span>
@@ -59,6 +55,9 @@
           <div class="small"></div>
           <span>—</span>
         </div>
+
+        <!-- 没有数据时展示 -->
+        <div class="bottom_nodata" v-if="!trackList.length">暂无数据</div>
       </div>
     </div>
   </div>
@@ -66,19 +65,57 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import * as Echarts from "echarts";
 
-let myRaChart: any;
+// 引入用户画像相关的接口
+import { reqGetTrackData } from "@/api/user/index";
+// 引入解密函数
+import { decryptDes } from "@/utils/des";
 
+const $route = useRoute();
+// 雷达图实例
+let myRaChart: any;
+// 雷达图DOM元素
 const radarChart = ref(null);
 
+// 用户id
+const userId = ref();
+
+// 日常轨迹数组数据
+const trackList = ref<any>([]);
+
 onMounted(() => {
-  myRaChart = Echarts.init(radarChart.value);
+  const obj = JSON.parse(decodeURIComponent($route.query.obj as string));
+
+  // 获取用户id
+  userId.value = obj.id;
+
+  // 初始化雷达图
   initRaChart();
+
+  // 获取日常轨迹
+  getTrackData();
 });
 
+// 获取日常轨迹
+const getTrackData = async () => {
+  const res = await reqGetTrackData({
+    userId: userId.value,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    const result = JSON.parse(decryptDes(res.data));
+    // console.log(result);
+
+    trackList.value = result;
+  }
+};
+
 // 初始化雷达图
 const initRaChart = () => {
+  myRaChart = Echarts.init(radarChart.value);
+
   const options = {
     tooltip: {
       trigger: "item",
@@ -360,6 +397,10 @@ const initRaChart = () => {
           background-color: #70b7fa;
         }
       }
+
+      .bottom_nodata {
+        margin: auto;
+      }
     }
   }
 }

src/components/teacher/teacherLeft.vue

@@ -8,19 +8,16 @@
       </div>
       <div class="top_detail">
         <div class="detail_photo">
-          <img
-            class="img"
-            src="https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
-          />
+          <img class="img" :src="userInfo?.headImage" />
           <div class="photo_icon">
             <el-icon size="20" color="#2493F1"><ArrowDownBold /></el-icon>
           </div>
         </div>
         <div class="detail_msg">
-          <div>姓名：张晓晓</div>
-          <div>性别：男</div>
-          <div>编号：2216161</div>
-          <div>部门：班主任</div>
+          <div>姓名：{{ userInfo?.name }}</div>
+          <div>性别：{{ userInfo?.sexId === 1 ? "男" : "女" }}</div>
+          <div>编号：{{ userInfo?.cardNo }}</div>
+          <div>部门：{{ userInfo?.departMent }}</div>
         </div>
       </div>
     </div>
@@ -147,15 +144,28 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import { countUpNum } from "@/utils/countUpNum";
 
+const $route = useRoute();
+
+// 用户信息
+const userInfo = ref();
+
+// 正常数据
 const value = ref(50);
+// 早退数据
 const value2 = ref(50);
+// 迟到数据
 const value3 = ref(50);
+// 严重迟到数据
 const value4 = ref(50);
+// 旷工迟到数据
 const value5 = ref(50);
+// 未打卡数据
 const value6 = ref(50);
 
+// DOM元素
 const valueDom = ref();
 const valueDom2 = ref();
 const valueDom3 = ref();
@@ -163,9 +173,12 @@ const valueDom4 = ref();
 const valueDom5 = ref();
 const valueDom6 = ref();
 
+// 集体备课资源
 const teamValue = ref(273);
+// 集体备课资源
 const personValue = ref(273);
 
+// DOM元素
 const teamValueDom = ref(273);
 const personValueDom = ref(273);
 
@@ -176,6 +189,10 @@ const currentTimeRang = ref(0);
 const currentTimeRang2 = ref(0);
 
 onMounted(() => {
+  // 获取用户信息
+  const obj = JSON.parse(decodeURIComponent($route.query.obj as string));
+  userInfo.value = obj;
+  // 让数字跳动
   getCountUpNum();
 });
 
@@ -259,7 +276,6 @@ const getCountUpNum = () => {
         width: 122px;
         height: 122px;
         border-radius: 50%;
-        background-color: #2493f1;
 
         img {
           width: 112px;

src/components/teacher/teacherRight.vue

@@ -46,59 +46,35 @@
 
     <!-- 排行榜区域 -->
     <div class="container_box">
+      <!-- 标题区域 -->
       <div class="box_title">
         <img src="@/assets/images/box-icon.png" />
-        排行榜
-      </div>
-
-      <div class="box_change">
-        <div
-          class="change_box"
-          :class="currentTimeRang === 0 ? 'active' : ''"
-          @click="changeTimeRang(0)"
-        >
-          本学期
-        </div>
-        <div
-          class="change_box"
-          :class="currentTimeRang === 1 ? 'active' : ''"
-          @click="changeTimeRang(1)"
-        >
-          本周
-        </div>
-        <div
-          class="change_box"
-          :class="currentTimeRang === 2 ? 'active' : ''"
-          @click="changeTimeRang(2)"
-        >
-          本月
-        </div>
+        本学期排行榜
       </div>
 
+      <!-- 表格区域 -->
       <div class="box_form form">
         <el-table :data="tableData">
-          <el-table-column label="排名" align="center">
-            <template #default="{ $index }">
-              <div class="form_index color" v-if="$index < 3">
-                NO.{{ $index + 1 }}
+          <el-table-column label="排名" align="center" width="180">
+            <template #default="{ row, $index }">
+              <div class="form_index color" v-if="$index < 5">
+                NO.{{ row.rank }}
               </div>
-              <div class="form_index color2" v-else>NO.{{ $index + 1 }}</div>
+              <div class="form_index color2" v-else>NO.{{ row.rank }}</div>
               <div class="form_icon"></div>
             </template>
           </el-table-column>
-          <el-table-column label="姓名" align="center">
+          <el-table-column label="姓名">
             <template #default="{ row }">
               <div class="form_name">
-                <img
-                  src="https://img1.baidu.com/it/u=1398895526,1958525606&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
-                />
+                <img :src="row.headImage" />
                 {{ row.name }}
               </div>
             </template>
           </el-table-column>
           <el-table-column prop="value" label="战力值" align="center">
             <template #default="{ row }">
-              <div class="form_value">{{ row.value }}</div>
+              <div class="form_value">{{ row.totalScore }}</div>
             </template>
           </el-table-column>
         </el-table>
@@ -109,17 +85,26 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import * as Echarts from "echarts";
+// 引入用户画像相关的接口
+import { reqGetRankingList } from "@/api/user/index";
+// 引入解密函数
+import { decryptDes } from "@/utils/des";
 
+const $route = useRoute();
+
+// 用户信息
+const userInfo = ref();
+
+// 扇形图实例
 let myPieChart: any;
+// 扇形图DOM元素
 const pieChart = ref();
 
 const valueTime = ref("");
 const valueClass = ref("");
 
-// 切换排行榜时间 0本学期 1本周 2本月
-const currentTimeRang = ref(0);
-
 const optionsTime = [
   {
     value: "0",
@@ -158,31 +143,42 @@ const chartData = ref([
   { value: 12, name: "91-100分" },
 ]);
 
-const tableData = [
-  {
-    name: "张三",
-    value: 35462,
-  },
-  {
-    name: "李四",
-    value: 35462,
-  },
-  {
-    name: "王五",
-    value: 35462,
-  },
-  {
-    name: "老刘",
-    value: 35462,
-  },
-];
+// 排行榜数据
+const tableData = ref<any>([]);
 
 onMounted(() => {
-  myPieChart = Echarts.init(pieChart.value);
+  // 获取用户信息
+  const obj = JSON.parse(decodeURIComponent($route.query.obj as string));
+
+  userInfo.value = obj;
+
+  // 初始化扇形图
   initBarChart();
+
+  // 获取教师战力值排行榜数据
+  getRankingList();
 });
 
+// 获取教师战力值排行榜数据
+const getRankingList = async () => {
+  const res = await reqGetRankingList({
+    cardNo: userInfo.value.cardNo,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    const result = JSON.parse(decryptDes(res.data));
+    // console.log(result);
+    tableData.value = result.list;
+    if (result.single) {
+      tableData.value.push(result.single);
+    }
+  }
+};
+
+// 初始化扇形图
 const initBarChart = () => {
+  myPieChart = Echarts.init(pieChart.value);
+
   const options = {
     title: {
       text: "总次数",
@@ -257,19 +253,6 @@ const initBarChart = () => {
 
   myPieChart.setOption(options);
 };
-
-// 排行榜切换时间范围按钮回调
-const changeTimeRang = (value: number) => {
-  if (currentTimeRang.value !== value) {
-    if (value === 0) {
-      currentTimeRang.value = 0;
-    } else if (value === 1) {
-      currentTimeRang.value = 1;
-    } else if (value === 2) {
-      currentTimeRang.value = 2;
-    }
-  }
-};
 </script>
 
 <style lang="scss" scoped>
@@ -347,8 +330,8 @@ const changeTimeRang = (value: number) => {
 
     .box_form {
       padding-right: 44px;
-      margin-top: 38px;
-      height: 245px;
+      margin-top: 20px;
+      height: 336px;
       overflow: hidden;
 
       .form_index {
@@ -377,15 +360,16 @@ const changeTimeRang = (value: number) => {
 
       .form_name {
         display: flex;
-        justify-content: center;
         align-items: center;
         font-size: 14px;
         color: #fff;
+
         img {
           margin-right: 8px;
           width: 30px;
           height: 30px;
           border-radius: 50%;
+          object-fit: cover;
         }
       }
 

src/components/user/userRight.vue

@@ -43,7 +43,7 @@
           />
           <el-table-column label="操作" align="center" width="60">
             <template #default="{ row }">
-              <div class="check" @click="handleCheckMsg(0)">查看</div>
+              <div class="check" @click="handleCheckMsg(0, row)">查看</div>
             </template>
           </el-table-column>
         </el-table>
@@ -78,7 +78,7 @@
           <el-table-column prop="departMent" label="部门" align="center" />
           <el-table-column label="操作" align="center">
             <template #default="{ row }">
-              <div class="check" @click="handleCheckMsg(1)">查看</div>
+              <div class="check" @click="handleCheckMsg(1, row)">查看</div>
             </template>
           </el-table-column>
         </el-table>
@@ -121,7 +121,7 @@
 
               <el-table-column label="操作" align="center">
                 <template #default="{ row }">
-                  <div class="pop_check" @click="clickPopCheck">查看</div>
+                  <div class="pop_check" @click="clickPopCheck(row)">查看</div>
                 </template>
               </el-table-column>
             </el-table>
@@ -272,17 +272,27 @@ const handleClose = () => {
 };
 
 // 点击表格查看按钮回调 0学生 1教师
-const handleCheckMsg = (value: number) => {
+const handleCheckMsg = (value: number, row: any) => {
   if (value === 0) {
-    router.push("student");
+    router.push({
+      name: "student",
+      query: {
+        obj: encodeURIComponent(JSON.stringify(row)),
+      },
+    });
   } else {
-    router.push("teacher");
+    router.push({
+      name: "teacher",
+      query: {
+        obj: encodeURIComponent(JSON.stringify(row)),
+      },
+    });
   }
 };
 
 // 弹窗表格查看按钮回调
-const clickPopCheck = () => {
-  handleCheckMsg(popType.value);
+const clickPopCheck = (row: any) => {
+  handleCheckMsg(popType.value, row);
 };
 </script>
 

src/views/teacher.vue

@@ -16,12 +16,13 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import TeacherLeft from "@/components/teacher/teacherLeft.vue";
 import TeacherCenter from "@/components/teacher/teacherCenter.vue";
 import TeacherRight from "@/components/teacher/teacherRight.vue";
 
 const router = useRouter();
+const $route = useRoute();
 
 // 点击关闭按钮回调
 const handleClose = () => {