no message

src/api/energy/index.ts

@@ -6,6 +6,12 @@ enum API {
   ENERGYALL_URL = "/wanzai/api/driver/getEnergyTj",
   // 能耗统计（平均）信息接口地址
   ENERGYEVENLY_URL = "/wanzai/api/driver/getEnergyTjAvg",
+  // 获取区域能耗统计水电表数据 接口地址
+  ENERGYMONTH_URL = "/wanzai/api/driver/getEnergyMonth",
+  // 获取设备总览数据 接口地址
+  DEVICEINFO_URL = "/wanzai/api/driver/getDeviceT",
+  // 获取水电表实时监测数据 接口地址
+  REALTIMEDATA_URL = "/wanzai/api/driver/getMeterPage",
 }
 
 // 能耗统计（总量）信息接口
@@ -13,3 +19,14 @@ export const reqGetEnergyAll = () => request.get(API.ENERGYALL_URL);
 
 // 能耗统计（平均）信息接口地址
 export const reqGetEnergyevenly = () => request.get(API.ENERGYEVENLY_URL);
+
+// 获取区域能耗统计水电表数据
+export const reqGetEnergyMonth = (data: any) =>
+  request.get(API.ENERGYMONTH_URL, { params: data });
+
+// 获取设备总览数据
+export const reqGetDeviceInfo = () => request.post(API.DEVICEINFO_URL);
+
+// 获取水电表实时监测数据
+export const reqGetDeviceRealData = (data: any) =>
+  request.get(API.REALTIMEDATA_URL, { params: data });

src/api/user/index.ts

@@ -1,15 +1,17 @@
 import request from "@/utils/request";
-import type { loginFormData, ResponseData } from "./type";
 
 //项目用户相关的请求地址
 enum API {
-  LOGIN_URL = "/admin/acl/index/login",
-
-  USERINFO_URL = "/admin/acl/index/info",
-
-  LOGOUT_URL = "/admin/acl/index/logout",
+  // 获取用户汇总数据 接口地址
+  USERINFO_URL = "/wanzai/api/driver/getUserPage",
+  // 获取学生历史出勤数据 接口地址
+  STUDENTATTENDANCE_URL = "/wanzai/api/smartAttendance/historicalAttendance",
 }
 
-//登录接口
-export const reqLogin = (data: loginFormData) =>
-  request.post(API.LOGIN_URL, data);
+// 获取用户汇总数据
+export const reqGetUserInfo = (data: any) =>
+  request.get(API.USERINFO_URL, { params: data });
+
+// 获取学生历史出勤数据
+export const reqGetStudentAttendance = (data: any) =>
+  request.get(API.STUDENTATTENDANCE_URL, { params: data });

src/components/energy/energyLeft.vue

@@ -19,11 +19,11 @@
           <div class="left_bottom" ref="eleValueDom">{{ eleValue }}</div>
         </div>
         <div class="energy_box_right">
-          <div class="right_top">增速</div>
+          <!-- <div class="right_top">增速</div>
           <div class="right_bottom">
             <div ref="eleSpeedDom">{{ eleSpeed }}</div>
             <span>%</span>
-          </div>
+          </div> -->
         </div>
       </div>
 
@@ -37,11 +37,11 @@
           <div class="left_bottom" ref="waterValueDom">{{ waterValue }}</div>
         </div>
         <div class="energy_box_right">
-          <div class="right_top">增速</div>
+          <!-- <div class="right_top">增速</div>
           <div class="right_bottom">
             <div ref="waterSpeedDom">{{ waterSpeed }}</div>
             <span>%</span>
-          </div>
+          </div> -->
         </div>
       </div>
 
@@ -100,30 +100,35 @@
 import { ref, onMounted } from "vue";
 import * as Echarts from "echarts";
 import { countUpNum } from "@/utils/countUpNum";
-import { reqGetEnergyAll, reqGetEnergyevenly } from "@/api/energy/index";
+// 引入能耗管理相关的接口
+import {
+  reqGetEnergyAll,
+  reqGetEnergyevenly,
+  reqGetEnergyMonth,
+} from "@/api/energy/index";
 
 // 用电总量
-const eleValue = ref(888.88);
+const eleValue = ref();
 const eleValueDom = ref();
 
 // 用电速率
-const eleSpeed = ref(10.06);
-const eleSpeedDom = ref();
+// const eleSpeed = ref(10.06);
+// const eleSpeedDom = ref();
 
 // 用水总量
-const waterValue = ref(88.88);
+const waterValue = ref();
 const waterValueDom = ref();
 
 // 用水速率
-const waterSpeed = ref(10.06);
-const waterSpeedDom = ref();
+// const waterSpeed = ref(10.06);
+// const waterSpeedDom = ref();
 
 // 人均用电量
-const eleValueAv = ref(88.88);
+const eleValueAv = ref(0);
 const eleValueAvDom = ref();
 
 // 人均用水量
-const waterValueAv = ref(38.88);
+const waterValueAv = ref(0);
 const waterValueAvDom = ref();
 
 // 区域能耗统计图表实例
@@ -131,6 +136,21 @@ let myBarChart: any;
 // 区域能耗统计图表DOM
 const barChart = ref(null);
 
+// 图表x轴数据
+const Xdata = ref<any>([]);
+
+// 地点数组
+const placeList = ref<any>([]);
+
+// 探问楼数据
+const chartData = ref<any>([]);
+
+// 探理楼数据
+const chartData2 = ref<any>([]);
+
+// 探学楼数据
+const chartData3 = ref<any>([]);
+
 // 默认选中按钮
 const currentIndex = ref("水");
 
@@ -141,30 +161,95 @@ onMounted(() => {
   // 能耗统计（平均）信息接口地址
   getEnergyevenly();
 
-  // 初始化区域能耗统计图表
-  initBarChart();
-
-  // 让数字跳动
-  getCountUpNum();
+  // 获取区域能耗统计数据
+  getChartData();
 });
 
 // 获取能耗统计（总量）信息
 const getEnergyAll = async () => {
   const res = await reqGetEnergyAll();
   // console.log(res);
+  if ((res as any).code == 200) {
+    res.data.forEach((ele: any) => {
+      if (ele.name === "用电量") {
+        eleValue.value = ele.num;
+      }
+      if (ele.name === "用水量") {
+        waterValue.value = ele.num;
+      }
+    });
+
+    // 让数字跳动
+    countUpNum(eleValueDom.value, eleValue.value, 2);
+    countUpNum(waterValueDom.value, waterValue.value, 2);
+  }
 };
 
 // 能耗统计（平均）信息接口地址
 const getEnergyevenly = async () => {
   const res = await reqGetEnergyevenly();
   // console.log(res);
+
+  if ((res as any).code == 200) {
+    res.data.forEach((ele: any) => {
+      if (ele.name === "用电量") {
+        eleValueAv.value = ele.num;
+      }
+      if (ele.name === "用水量") {
+        waterValueAv.value = ele.num;
+      }
+    });
+
+    // 让数字跳动
+    countUpNum(eleValueAvDom.value, eleValueAv.value, 2);
+    countUpNum(waterValueAvDom.value, waterValueAv.value, 2);
+  }
+};
+
+// 获取区域能耗统计数据
+const getChartData = async () => {
+  const res = await reqGetEnergyMonth({
+    type: currentIndex.value === "水" ? 0 : 1,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    res.data.forEach((ele: any) => {
+      // 获取图表x轴数据
+      Xdata.value.push(ele.month.slice(-2) + "月");
+
+      // 获取图表Y轴数据
+      ele.data.forEach((item: any) => {
+        if (item.name === "探问楼") {
+          chartData.value.push(item.num);
+        } else if (item.name === "探理楼") {
+          chartData2.value.push(item.num);
+        } else if (item.name === "探学楼") {
+          chartData3.value.push(item.num);
+        }
+      });
+    });
+
+    // 获取地点数组
+    res.data[0].data.forEach((ele: any) => {
+      placeList.value.push(ele.name);
+    });
+  }
+  // 初始化区域能耗统计图表
+  initBarChart();
 };
 
 // 点击水 按钮回调
 const handleClickWater = () => {
   if (currentIndex.value !== "水") {
     currentIndex.value = "水";
-    initBarChart();
+    // 清空数据重新请求
+    placeList.value = [];
+    Xdata.value = [];
+    chartData.value = [];
+    chartData2.value = [];
+    chartData3.value = [];
+    myBarChart.dispose();
+    getChartData();
   }
 };
 
@@ -172,7 +257,14 @@ const handleClickWater = () => {
 const handleClickEle = () => {
   if (currentIndex.value !== "电") {
     currentIndex.value = "电";
-    initBarChart();
+    // 清空数据重新请求
+    placeList.value = [];
+    Xdata.value = [];
+    chartData.value = [];
+    chartData2.value = [];
+    chartData3.value = [];
+    myBarChart.dispose();
+    getChartData();
   }
 };
 
@@ -188,7 +280,7 @@ const initBarChart = () => {
       },
     },
     legend: {
-      data: ["教学楼", "行政楼", "报告厅", "食堂"],
+      data: placeList.value,
       top: 45,
       right: 22,
       textStyle: {
@@ -210,7 +302,7 @@ const initBarChart = () => {
         axisLabel: {
           color: "#fff",
         },
-        data: ["7月", "8月", "9月", "10月", "11月", "12月"],
+        data: Xdata.value,
       },
     ],
     yAxis: [
@@ -231,54 +323,35 @@ const initBarChart = () => {
     ],
     series: [
       {
-        name: "教学楼",
+        name: placeList.value[0],
         type: "bar",
         barGap: 0,
         emphasis: {
           focus: "series",
         },
-        data: [320, 332, 301, 334, 390, 360],
+        data: chartData.value,
       },
       {
-        name: "行政楼",
+        name: placeList.value[1],
         type: "bar",
 
         emphasis: {
           focus: "series",
         },
-        data: [220, 182, 191, 234, 290, 390],
+        data: chartData2.value,
       },
       {
-        name: "报告厅",
+        name: placeList.value[2],
         type: "bar",
-
         emphasis: {
           focus: "series",
         },
-        data: [150, 232, 201, 154, 190, 370],
-      },
-      {
-        name: "食堂",
-        type: "bar",
-        emphasis: {
-          focus: "series",
-        },
-        data: [98, 77, 101, 99, 40, 390],
+        data: chartData3.value,
       },
     ],
   };
   myBarChart.setOption(options);
 };
-
-// 让数字跳动
-const getCountUpNum = () => {
-  countUpNum(eleValueDom.value, eleValue.value, 2);
-  countUpNum(waterValueDom.value, waterValue.value, 2);
-  countUpNum(eleSpeedDom.value, eleSpeed.value, 2);
-  countUpNum(waterSpeedDom.value, waterSpeed.value, 2);
-  countUpNum(eleValueAvDom.value, eleValueAv.value, 2);
-  countUpNum(waterValueAvDom.value, waterValueAv.value, 2);
-};
 </script>
 
 <style lang="scss" scoped>

src/components/energy/energyRight.vue

@@ -34,7 +34,9 @@
           <div class="box_content">
             <div>离线水表</div>
             <div>
-              <span class="content_num" ref="waterOffDom">{{ waterOff }}</span>
+              <span class="content_num" ref="waterOffDom">{{
+                waterValue - waterOn
+              }}</span>
               个
             </div>
           </div>
@@ -62,32 +64,40 @@
           <div class="box_content">
             <div>离线电表</div>
             <div>
-              <span class="content_num" ref="eleOffDom">{{ eleOff }}</span>
+              <span class="content_num" ref="eleOffDom">{{
+                eleValue - eleOn
+              }}</span>
               个
             </div>
           </div>
         </div>
       </div>
+
       <div class="sub_title">用水量实时监测</div>
 
       <div class="form_water form">
-        <el-table :data="tableData">
+        <el-table :data="tableDataWater">
           <el-table-column
-            prop="building"
+            prop="build"
             label="楼栋"
             align="center"
             width="110"
             show-overflow-tooltip
           />
-          <el-table-column prop="num" label="编号" align="center" width="50" />
           <el-table-column
-            prop="value"
+            prop="meterId"
+            label="编号"
+            align="center"
+            width="50"
+          />
+          <el-table-column
+            prop="num"
             label="用水量（m³）"
             align="center"
             width="110"
           />
           <el-table-column
-            prop="time"
+            prop="createTime"
             label="通讯时间"
             align="center"
             width="132"
@@ -98,23 +108,28 @@
       <div class="sub_title">用电量实时监测</div>
 
       <div class="form_ele form">
-        <el-table :data="tableData">
+        <el-table :data="tableDataEle">
           <el-table-column
-            prop="building"
+            prop="build"
             label="楼栋"
             align="center"
             width="110"
             show-overflow-tooltip
           />
-          <el-table-column prop="num" label="编号" align="center" width="50" />
           <el-table-column
-            prop="value"
+            prop="meterId"
+            label="编号"
+            align="center"
+            width="50"
+          />
+          <el-table-column
+            prop="num"
             label="用电量（kw.h）"
             align="center"
             width="110"
           />
           <el-table-column
-            prop="time"
+            prop="createTime"
             label="通讯时间"
             align="center"
             width="132"
@@ -128,71 +143,111 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { countUpNum } from "@/utils/countUpNum";
+// 引入能耗管理相关的接口
+import { reqGetDeviceInfo, reqGetDeviceRealData } from "@/api/energy/index";
 
-const waterValue = ref(2345);
-const waterOn = ref(1000);
-const waterOff = ref(100);
-const eleValue = ref(2345);
-const eleOn = ref(1000);
-const eleOff = ref(100);
-
-const waterValueDom = ref(2345);
-const waterOnDom = ref(1000);
-const waterOffDom = ref(100);
-const eleValueDom = ref(2345);
-const eleOnDom = ref(1000);
-const eleOffDom = ref(100);
-
-const tableData = [
-  {
-    building: "教学楼 A",
-    num: "123",
-    value: "1233.00",
-    time: "2023-11-29 15:49:12",
-  },
-  {
-    building: "教学楼（A）",
-    num: "123",
-    value: "1233.00",
-    time: "2023-11-29 15:49:12",
-  },
-  {
-    building: "教学楼（A）",
-    num: "123",
-    value: "1233.00",
-    time: "2023-11-29 15:49:12",
-  },
-  {
-    building: "教学楼（A）",
-    num: "123",
-    value: "1233.00",
-    time: "2023-11-29 15:49:12",
-  },
-  {
-    building: "教学楼（A）",
-    num: "123",
-    value: "1233.00",
-    time: "2023-11-29 15:49:12",
-  },
-  {
-    building: "教学楼（A）",
-    num: "123",
-    value: "1233.00",
-    time: "2023-11-29 15:49:12",
-  },
-];
+// 水表总个数
+const waterValue = ref(0);
+// 在线水表个数
+const waterOn = ref(0);
+
+// 电表总个数
+const eleValue = ref(0);
+// 在线电表个数
+const eleOn = ref(0);
+
+// DOM元素
+const waterValueDom = ref();
+const waterOnDom = ref();
+const waterOffDom = ref();
+const eleValueDom = ref();
+const eleOnDom = ref();
+const eleOffDom = ref();
+
+// 用水量表格数据
+const tableDataWater = ref([]);
+
+// 用电量表格数据
+const tableDataEle = ref([]);
 
 onMounted(() => {
-  getCountUpNum();
+  // 获取设备情况相关数据
+  getDeviceInfo();
+  // 获取用水量实时监测数据
+  getRealDataWater();
+  // 获取用电量实时监测数据
+  getRealDataEle();
 });
 
+// 获取设备情况相关数据
+const getDeviceInfo = async () => {
+  const res = await reqGetDeviceInfo();
+  // console.log(res);
+  if ((res as any).code == 200) {
+    res.data.forEach((ele: any) => {
+      // 获取设备总数
+      if (ele.name === "总设备数") {
+        ele.data.forEach((element: any) => {
+          if (element.name === "电表") {
+            eleValue.value = element.num;
+          }
+          if (element.name === "水表") {
+            waterValue.value = element.num;
+          }
+        });
+      }
+      // 获取设备在线数
+      if (ele.name === "在线设备数") {
+        ele.data.forEach((element: any) => {
+          if (element.name === "电表") {
+            eleOn.value = element.num;
+          }
+          if (element.name === "水表") {
+            waterOn.value = element.num;
+          }
+        });
+      }
+    });
+
+    // 让数字跳动
+    getCountUpNum();
+  }
+};
+
+// 获取用水量实时监测数据
+const getRealDataWater = async () => {
+  const res = await reqGetDeviceRealData({
+    currentPage: 1,
+    pageCount: 10,
+    meterType: 0,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    tableDataWater.value = res.data.list;
+  }
+};
+
+// 获取用电量实时监测数据
+const getRealDataEle = async () => {
+  const res = await reqGetDeviceRealData({
+    currentPage: 1,
+    pageCount: 10,
+    meterType: 1,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    tableDataEle.value = res.data.list;
+  }
+};
+
+// 让数字跳动
 const getCountUpNum = () => {
   countUpNum(waterValueDom.value, waterValue.value);
   countUpNum(waterOnDom.value, waterOn.value);
-  countUpNum(waterOffDom.value, waterOff.value);
+  countUpNum(waterOffDom.value, waterValue.value - waterOn.value);
   countUpNum(eleValueDom.value, eleValue.value);
   countUpNum(eleOnDom.value, eleOn.value);
-  countUpNum(eleOffDom.value, eleOff.value);
+  countUpNum(eleOffDom.value, eleValue.value - eleOn.value);
 };
 </script>
 

src/components/school/schoolRight.vue

@@ -39,14 +39,18 @@
             </template>
           </el-table-column>
 
+          <el-table-column label="姓名" align="center" width="50">
+            <template #default="{ row }">
+              {{ row.warningName ? row.warningName : "未知" }}
+            </template>
+          </el-table-column>
+
           <el-table-column
-            prop="name"
-            label="姓名"
+            prop="dateTime"
+            label="时间"
             align="center"
-            width="50"
             show-overflow-tooltip
           />
-          <el-table-column prop="time" label="时间" align="center" width="55" />
           <el-table-column
             prop="type"
             label="类别"
@@ -55,13 +59,7 @@
             show-overflow-tooltip
           />
           <el-table-column
-            prop="section"
-            label="部门"
-            align="center"
-            width="62"
-          />
-          <el-table-column
-            prop="address"
+            prop="location"
             label="地点"
             align="center"
             width="71"
@@ -69,9 +67,9 @@
           />
           <el-table-column label="状态" align="center" width="62">
             <template #default="{ row }">
-              <div v-if="row.status === 0">未处理</div>
-              <div class="red" v-if="row.status === 1">已推送</div>
-              <div class="green" v-if="row.status === 2">已处理</div>
+              <div v-if="row.statu === 0">未处理</div>
+              <div class="red" v-if="row.status === 2">已推送</div>
+              <div class="green" v-if="row.status === 1">已处理</div>
             </template>
           </el-table-column>
         </el-table>
@@ -111,64 +109,7 @@ const deviceDom2 = ref();
 const deviceDom3 = ref();
 
 // 预警推送数据
-const tableData = [
-  {
-    name: "张三",
-    time: "18:22",
-    type: "打架打架打架",
-    section: "八年级",
-    address: "教学楼教学楼教学楼",
-    status: 0,
-  },
-  {
-    name: "李四",
-    time: "18:22",
-    type: "打架",
-    section: "八年级",
-    address: "教学楼",
-    status: 1,
-  },
-  {
-    name: "王五",
-    time: "18:22",
-    type: "打架",
-    section: "八年级",
-    address: "教学楼",
-    status: 2,
-  },
-  {
-    name: "老刘",
-    time: "18:22",
-    type: "打架打架打架",
-    section: "八年级",
-    address: "教学楼教学楼教学楼",
-    status: 0,
-  },
-  {
-    name: "胜七",
-    time: "18:22",
-    type: "打架",
-    section: "八年级",
-    address: "教学楼",
-    status: 1,
-  },
-  {
-    name: "王八",
-    time: "18:22",
-    type: "打架",
-    section: "八年级",
-    address: "教学楼",
-    status: 2,
-  },
-  {
-    name: "何九",
-    time: "18:22",
-    type: "打架打架打架",
-    section: "八年级",
-    address: "教学楼教学楼教学楼",
-    status: 0,
-  },
-];
+const tableData = ref([]);
 
 // 路由器实例
 const router = useRouter();
@@ -193,6 +134,9 @@ const getSmartWarning = async () => {
     pageCount: pageCount.value,
   });
   // console.log(res);
+  if ((res as any).code == 200) {
+    tableData.value = res.data.list;
+  }
 };
 
 // 查看更多按钮回调

src/components/student/studentLeft.vue

@@ -93,12 +93,19 @@ import { ref, onMounted } from "vue";
 import * as Echarts from "echarts";
 import { countUpNum } from "@/utils/countUpNum";
 
+// 引入用户画像相关的接口
+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);
 
+// DOM元素
 const valueDom = ref();
 const valueDom2 = ref();
 const valueDom3 = ref();
@@ -120,12 +127,27 @@ const chartData = ref([
 ]);
 
 onMounted(() => {
+  // 获取学生历史出勤数据
+  getStudentAttendance();
   myPieChart = Echarts.init(pieChart.value);
   initPieChart();
 
   getCountUpNum();
 });
 
+// 获取学生历史出勤数据
+const getStudentAttendance = async () => {
+  const res = await reqGetStudentAttendance({
+    userId: 7967,
+    dateTime: 1,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    const result = JSON.parse(decryptDes(res.data));
+    console.log(result);
+  }
+};
+
 const initPieChart = () => {
   const options = {
     title: {

src/components/user/userRight.vue

@@ -21,7 +21,7 @@
       </div>
       <!-- 学生汇总表格区域 -->
       <div class="student form">
-        <el-table :data="tableData">
+        <el-table :data="tableDataStudent">
           <el-table-column
             prop="name"
             label="姓名"
@@ -29,9 +29,14 @@
             width="130"
             show-overflow-tooltip
           />
-          <el-table-column prop="num" label="编号" align="center" width="60" />
           <el-table-column
-            prop="class"
+            prop="cardNo"
+            label="编号"
+            align="center"
+            width="60"
+          />
+          <el-table-column
+            prop="departMent"
             label="部门"
             align="center"
             width="150"
@@ -56,22 +61,22 @@
       </div>
       <!-- 教师汇总表格区域 -->
       <div class="teacher form">
-        <el-table :data="tableData">
+        <el-table :data="tableDataTeacher">
           <el-table-column
             prop="name"
             label="姓名"
             align="center"
-            width="130"
+            width="120"
             show-overflow-tooltip
           />
-          <el-table-column prop="num" label="编号" align="center" width="60" />
           <el-table-column
-            prop="class"
-            label="部门"
+            prop="cardNo"
+            label="编号"
             align="center"
-            width="150"
+            width="120"
           />
-          <el-table-column label="操作" align="center" width="60">
+          <el-table-column prop="departMent" label="部门" align="center" />
+          <el-table-column label="操作" align="center">
             <template #default="{ row }">
               <div class="check" @click="handleCheckMsg(1)">查看</div>
             </template>
@@ -96,9 +101,9 @@
           <!-- 搜索区域 -->
           <div class="pop_search">
             <div class="search_input">
-              <input type="text" placeholder="请输入关键字" />
+              <input type="text" placeholder="请输入关键字" v-model="keyword" />
             </div>
-            <div class="search_btn">查询</div>
+            <div class="search_btn" @click="handleSearch">查询</div>
           </div>
 
           <!-- 表格区域 -->
@@ -111,8 +116,8 @@
               </el-table-column>
 
               <el-table-column prop="name" label="姓名" align="center" />
-              <el-table-column prop="num" label="编号" align="center" />
-              <el-table-column prop="class" label="部门" align="center" />
+              <el-table-column prop="cardNo" label="编号" align="center" />
+              <el-table-column prop="departMent" label="部门" align="center" />
 
               <el-table-column label="操作" align="center">
                 <template #default="{ row }">
@@ -128,8 +133,9 @@
               v-model:page-size="pageSize"
               small
               background
+              hide-on-single-page
               layout="prev, pager, next, jumper"
-              :total="1000"
+              :total="total"
               :pager-count="5"
               @current-change="handleCurrentChange"
             />
@@ -144,12 +150,17 @@
 import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { countUpNum } from "@/utils/countUpNum";
+// 引入用户画像相关的接口
+import { reqGetUserInfo } from "@/api/user/index";
 
-const totalStudent = ref(4500);
-const totalTeacher = ref(4500);
+// 学生总数
+const totalStudent = ref(0);
+// 教师总数
+const totalTeacher = ref(0);
 
-const totalStudentDom = ref(4500);
-const totalTeacherDom = ref(4500);
+// DOM元素
+const totalStudentDom = ref();
+const totalTeacherDom = ref();
 
 // 是否展示弹窗
 const showPop = ref(false);
@@ -160,142 +171,99 @@ const currentPage = ref(1);
 // 每页多少条数据
 const pageSize = ref(10);
 
+// 总条数
+const total = ref(1000);
+
 // 弹窗类型 0为学生弹窗 1为教师弹窗
 const popType = ref(0);
 
-// 表格数据
-const tableData = [
-  {
-    name: "张三张三张三",
-    num: "123",
-    class: "七(5)班",
-  },
-  {
-    name: "张三",
-    num: "123",
-    class: "七(5)班",
-  },
-  {
-    name: "张三",
-    num: "123",
-    class: "七(5)班",
-  },
-  {
-    name: "张三",
-    num: "123",
-    class: "七(5)班",
-  },
-  {
-    name: "张三",
-    num: "123",
-    class: "七(5)班",
-  },
-  {
-    name: "张三",
-    num: "123",
-    class: "七(5)班",
-  },
-  {
-    name: "张三",
-    num: "123",
-    class: "七(5)班",
-  },
-  {
-    name: "张三",
-    num: "123",
-    class: "七(5)班",
-  },
-  {
-    name: "张三",
-    num: "123",
-    class: "七(5)班",
-  },
-  {
-    name: "张三",
-    num: "123",
-    class: "七(5)班",
-  },
-];
+// 学生表格数据
+const tableDataStudent = ref([]);
+
+// 教师表格数据
+const tableDataTeacher = ref([]);
 
 // 弹窗表格数据
-const tableDataPop = [
-  {
-    name: "张三",
-    num: "2051",
-    class: "七四班",
-  },
-  {
-    name: "李四",
-    num: "2051",
-    class: "七四班",
-  },
-  {
-    name: "王五",
-    num: "2051",
-    class: "七四班",
-  },
-  {
-    name: "老六",
-    num: "2051",
-    class: "七四班",
-  },
-  {
-    name: "张三",
-    num: "2051",
-    class: "七四班",
-  },
-  {
-    name: "李四",
-    num: "2051",
-    class: "七四班",
-  },
-  {
-    name: "王五",
-    num: "2051",
-    class: "七四班",
-  },
-  {
-    name: "老六",
-    num: "2051",
-    class: "七四班",
-  },
-  {
-    name: "张三",
-    num: "2051",
-    class: "七四班",
-  },
-  {
-    name: "李四二",
-    num: "2051",
-    class: "七四班",
-  },
-];
+const tableDataPop = ref([]);
+
+// 弹窗输入框绑定数据
+const keyword = ref("");
 
 const router = useRouter();
 
 onMounted(() => {
-  countUpNum(totalStudentDom.value, totalStudent.value);
-  countUpNum(totalTeacherDom.value, totalTeacher.value);
+  // 获取学生汇总数据
+  getStudentInfo();
+  // 获取教师汇总数据
+  getTeacherInfo();
 });
 
-// 点击表格查看按钮回调 0学生 1教师
-const handleCheckMsg = (value: number) => {
-  if (value === 0) {
-    router.push("student");
-  } else {
-    router.push("teacher");
+// 获取学生汇总数据
+const getStudentInfo = async () => {
+  const res = await reqGetUserInfo({
+    currentPage: 1,
+    pageCount: 8,
+    identityId: 2,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    tableDataStudent.value = res.data.list;
+    totalStudent.value = res.data.total;
+    // 让数字跳动
+    countUpNum(totalStudentDom.value, totalStudent.value);
+  }
+};
+
+// 获取教师汇总数据
+const getTeacherInfo = async () => {
+  const res = await reqGetUserInfo({
+    currentPage: 1,
+    pageCount: 8,
+    identityId: 3,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    tableDataTeacher.value = res.data.list;
+    totalTeacher.value = res.data.total;
+    // 让数字跳动
+    countUpNum(totalTeacherDom.value, totalTeacher.value);
   }
 };
 
 // 点击查看更多按钮回调 0学生 1教师
 const handleClickMore = (value: number) => {
+  keyword.value = "";
   showPop.value = true;
   popType.value = value;
+  // 获取弹窗表格数据
+  getPopData(popType.value);
+};
+
+// 获取弹窗表格数据
+const getPopData = async (type: number) => {
+  const res = await reqGetUserInfo({
+    currentPage: currentPage.value,
+    pageCount: pageSize.value,
+    identityId: type === 0 ? 2 : 3,
+    key: keyword.value,
+  });
+  // console.log(res);
+  if ((res as any).code == 200) {
+    tableDataPop.value = res.data.list;
+    total.value = res.data.total;
+  }
 };
 
 // 分页器当前页修改时的回调
 const handleCurrentChange = (value: number) => {
-  console.log(value);
+  currentPage.value = value;
+  getPopData(popType.value);
+};
+
+// 查询按钮绑定回调
+const handleSearch = () => {
+  currentPage.value = 1;
+  getPopData(popType.value);
 };
 
 // 点击弹窗关闭按钮回调
@@ -303,9 +271,17 @@ const handleClose = () => {
   showPop.value = false;
 };
 
+// 点击表格查看按钮回调 0学生 1教师
+const handleCheckMsg = (value: number) => {
+  if (value === 0) {
+    router.push("student");
+  } else {
+    router.push("teacher");
+  }
+};
+
 // 弹窗表格查看按钮回调
 const clickPopCheck = () => {
-  // showPop.value = false;
   handleCheckMsg(popType.value);
 };
 </script>

src/utils/des.js

@@ -1,15 +0,0 @@
-import cryptoJs from 'crypto-js'
-
-// des解密 message为需要解密的信息  key为密钥
-export const decryptDes = (message, key = 'com.template.common.utils') => {
-	let keyHex = cryptoJs.enc.Utf8.parse(key)
-	let decrypted = cryptoJs.DES.decrypt({
-			ciphertext: cryptoJs.enc.Base64.parse(message)
-		},
-		keyHex, {
-			mode: cryptoJs.mode.ECB,
-			padding: cryptoJs.pad.Pkcs7
-		}
-	)
-	return decrypted.toString(cryptoJs.enc.Utf8)
-}

src/utils/des.ts

@@ -0,0 +1,21 @@
+//@ts-ignore
+import cryptoJs from "crypto-js";
+
+// des解密 message为需要解密的信息  key为密钥
+export const decryptDes = (
+  message: string,
+  key = "com.template.common.utils"
+) => {
+  let keyHex = cryptoJs.enc.Utf8.parse(key);
+  let decrypted = cryptoJs.DES.decrypt(
+    {
+      ciphertext: cryptoJs.enc.Base64.parse(message),
+    },
+    keyHex,
+    {
+      mode: cryptoJs.mode.ECB,
+      padding: cryptoJs.pad.Pkcs7,
+    }
+  );
+  return decrypted.toString(cryptoJs.enc.Utf8);
+};

src/utils/request.ts

@@ -6,7 +6,7 @@ import { ElMessage } from "element-plus";
 //创建axios实例
 let request = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API,
-  timeout: 5000,
+  timeout: 15000,
 });
 
 //请求拦截器