|
|
@@ -1,264 +1,279 @@
|
|
|
<template>
|
|
|
<el-skeleton :loading="loading" animated>
|
|
|
- <el-row :gutter="8">
|
|
|
- <!-- 第一部分 -->
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
|
|
|
- <el-card>
|
|
|
- <el-card shadow="never" class="h-100% ">
|
|
|
-
|
|
|
- <template #header>
|
|
|
- <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
- <span>基本信息</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <el-row style="flex-wrap: wrap; ">
|
|
|
- <el-col v-for="(item, index) in projects" :key="`card-${index}`" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
|
|
- <el-card shadow="hover" class="mr-5px mt-5px " style="background-color:#2585a6 ">
|
|
|
- <div class="flex items-center h-75px ">
|
|
|
- <!-- <Icon :icon="item.icon" :size="25" class="mr-8px" /> -->
|
|
|
- <Icon :icon="item.icon" :size="38" class="mr-8px " />
|
|
|
-
|
|
|
- <span class="text-17px c-white">{{ item.name }}</span>
|
|
|
- </div>
|
|
|
- <div class="mb-18px text-32px c-white ml-20px text-center">{{ t(item.message) }}</div>
|
|
|
- <!-- <div class="mt-12px flex justify-between text-12px text-gray-400"> </div> -->
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- <el-card shadow="never" class=" h-100% mt-10px ">
|
|
|
- <template #header>
|
|
|
- <div class="h-5 flex justify-between fw-800 text-20px">
|
|
|
- <span>实时出勤统计</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-card shadow="never" class="ml-2px pr-10px mt-10px" style="background-color:#33a3dc ;opacity: 0.8; ">
|
|
|
- <div class="h-70px flex items-center justify-center flex-wrap mt-10px c-white">
|
|
|
- <div class="px-25px text-center" style="margin: auto;">
|
|
|
- <div class="mb-16px text-18px text-white ">打卡人数</div>
|
|
|
- <CountTo class="text-28px" :start-val="0" :end-val="totalSate.normalNum" :duration="2600" />
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical" border-style="dashed" />
|
|
|
- <div class="px-8px text-center" style="margin: auto;">
|
|
|
- <div class="mb-16px text-18px text-white ">未打卡人数</div>
|
|
|
- <CountTo class="text-28px" :start-val="0" :end-val="totalSate.errorNum" :duration="2600" />
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical" border-style="dashed" />
|
|
|
- <div class="px-8px text-center" style="margin: auto;">
|
|
|
- <div class="mb-16px text-18px text-white ">请假人数</div>
|
|
|
- <CountTo class="text-28px" :start-val="0" :end-val="totalSate.excuseNum" :duration="2600" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- <el-card shadow="hover" class=" mt-10px">
|
|
|
- <template #header>
|
|
|
- <div class="h-5 flex justify-between fw-800 text-20px">
|
|
|
- <span>毕业条件达成统计</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-skeleton :loading="loading" animated>
|
|
|
- <Echart :options="pieOptionsData" :height="250" />
|
|
|
- </el-skeleton>
|
|
|
- </el-card>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <!-- 第二部分 -->
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="7">
|
|
|
- <!-- 第一个el-row -->
|
|
|
- <el-row :gutter="15">
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <el-card shadow="never" class=" mb-10px h-480px ">
|
|
|
- <template #header>
|
|
|
- <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
- <span>周出勤情况</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-card shadow="hover" class="mt-1px h-380px ">
|
|
|
- <el-skeleton :loading="loading" animated>
|
|
|
- <Echart :options="barOptionsData" :height="350" />
|
|
|
- </el-skeleton>
|
|
|
- </el-card>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <el-card shadow="never" class="mb-10px ">
|
|
|
- <template #header>
|
|
|
- <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
- <span>实时打卡状态</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="demo">
|
|
|
- <div class="table-header">
|
|
|
- <div class="header">
|
|
|
- <el-row class="shouye" style="border: none;">
|
|
|
- <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
- <div>姓名</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
- <div>学号</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
- <div>工作间</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
- <div>打卡时间</div>
|
|
|
- </el-col>
|
|
|
- <!-- <el-col :span="10" class="center text-18px" style="border: none;">
|
|
|
- <div>缺勤时间段</div>
|
|
|
- </el-col> -->
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <vue3ScrollSeamless class="scroll-wrap text-color" :classOptions="classOptions" :dataList="list">
|
|
|
- <div v-if="list.length > 0">
|
|
|
- <el-row v-for="(item, i) of list" :key="i" class="shouye"
|
|
|
- style="margin-bottom: 10px; display: flex; justify-content: center;">
|
|
|
- <el-col :span="6" class="center"
|
|
|
- style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
- <div>{{ item.studentName }}</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="center"
|
|
|
- style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
- <div>{{ item.userNumber }}</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="center"
|
|
|
- style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
- <div>{{ item.daptName }}</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="center"
|
|
|
- style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
- <div>{{ formatDate(item.clockInTime) }}</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div v-if="list.length == 0"
|
|
|
- style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
|
|
|
- 暂无预测记录
|
|
|
- </div>
|
|
|
- </vue3ScrollSeamless>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- <!-- 第二个el-row -->
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="7">
|
|
|
- <el-row :gutter="15" align="center">
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="24">
|
|
|
- <el-card shadow="never" class=" h-480px mb-10px "> <!-- 移除 el-card 的边框 -->
|
|
|
- <template #header>
|
|
|
- <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
- <span>缺勤预警</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <div class="demos">
|
|
|
- <div class="table-header">
|
|
|
- <div class="header">
|
|
|
- <el-row class="shouye" style="border: none;">
|
|
|
- <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
- <div>姓名</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
- <div>学号</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
- <div>工作间</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
- <div>导师</div>
|
|
|
- </el-col>
|
|
|
- <!-- <el-col :span="10" class="center text-18px" style="border: none;">
|
|
|
- <div>缺勤时间段</div>
|
|
|
- </el-col> -->
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <vue3ScrollSeamless class="scroll-wraps text-color" :classOptions="class2Options" :dataList="list2">
|
|
|
- <div v-if="list2.length > 0">
|
|
|
- <el-row v-for="(item, i) of list2" :key="i" class="shouye">
|
|
|
- <!-- <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
- <div>{{ item.ID }}</div>
|
|
|
- </el-col> -->
|
|
|
- <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
- <div>{{ item.studentName }}</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
- <div>{{ item.userNumber }}</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
- <div>{{ item.deptName }}</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
- <div>{{ item.supervisor }}</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div v-if="list2.length == 0"
|
|
|
- style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
|
|
|
- 暂无预测记录
|
|
|
- </div>
|
|
|
- </vue3ScrollSeamless>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- </el-col>
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="24">
|
|
|
- <el-card shadow="never" class=" mt-1px h-480px ">
|
|
|
- <template #header>
|
|
|
- <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
- <span>学生毕业条件达成率</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div class="demoss">
|
|
|
- <vue3ScrollSeamless class="scroll-wrapss text-color" :classOptions="list1Options" :dataList="list1">
|
|
|
- <div v-if="list1.length > 0">
|
|
|
- <el-row v-for="(item, i) of list1" :key="i" class="shouye" :style="{ marginBottom: '10px' }">
|
|
|
- <!-- 增加行与行之间的间距 -->
|
|
|
- <el-col :span="12" class="center" style="padding: 8px;"> <!-- 增加内边距 -->
|
|
|
- <div>{{ item.name }}</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12" class="center" style="padding: 8px;">
|
|
|
- <div>{{ item.graduationRate }}%</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- <div v-if="list1.length == 0"
|
|
|
- style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
|
|
|
- 暂无预测记录
|
|
|
- </div>
|
|
|
- </vue3ScrollSeamless>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <el-row :gutter="8">
|
|
|
+ <!-- 第一部分 -->
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
|
|
|
+ <el-card class="h-940px mb-10px">
|
|
|
+ <el-card shadow="never" class="h-100%">
|
|
|
+
|
|
|
+ <template #header>
|
|
|
+ <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
+ <span>基本信息</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-row style="flex-wrap: wrap; ">
|
|
|
+ <el-col v-for="(item, index) in projects" :key="`card-${index}`" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
|
|
+ <el-card shadow="hover" class="mr-5px mt-5px " style="background-color:#2585a6 ">
|
|
|
+ <div class="flex items-center h-75px ">
|
|
|
+ <!-- <Icon :icon="item.icon" :size="25" class="mr-8px" /> -->
|
|
|
+ <Icon :icon="item.icon" :size="38" class="mr-8px " />
|
|
|
+
|
|
|
+ <span class="text-17px c-white">{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mb-18px text-32px c-white ml-20px text-center">{{ t(item.message) }}</div>
|
|
|
+ <!-- <div class="mt-12px flex justify-between text-12px text-gray-400"> </div> -->
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card shadow="never" class=" h-100% mt-10px ">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-5 flex justify-between fw-800 text-20px">
|
|
|
+ <span>实时出勤统计</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-card shadow="never" class="ml-2px pr-10px mt-10px" style="background-color:#33a3dc ;opacity: 0.8; ">
|
|
|
+ <div class="h-70px flex items-center justify-center flex-wrap mt-10px c-white">
|
|
|
+ <div class="px-25px text-center" style="margin: auto;">
|
|
|
+ <div class="mb-16px text-18px text-white ">打卡人数</div>
|
|
|
+ <CountTo class="text-28px" :start-val="0" :end-val="totalSate.normalNum" :duration="2600" />
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical" border-style="dashed" />
|
|
|
+ <div class="px-8px text-center" style="margin: auto;">
|
|
|
+ <div class="mb-16px text-18px text-white ">未打卡人数</div>
|
|
|
+ <CountTo class="text-28px" :start-val="0" :end-val="totalSate.errorNum" :duration="2600" />
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical" border-style="dashed" />
|
|
|
+ <div class="px-8px text-center" style="margin: auto;">
|
|
|
+ <div class="mb-16px text-18px text-white ">请假人数</div>
|
|
|
+ <CountTo class="text-28px" :start-val="0" :end-val="totalSate.excuseNum" :duration="2600" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card shadow="hover" class=" mt-10px">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-5 flex justify-between fw-800 text-20px">
|
|
|
+ <span>毕业条件达成统计</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-skeleton :loading="loading" animated>
|
|
|
+ <Echart :options="pieOptionsData" :height="250" />
|
|
|
+ </el-skeleton>
|
|
|
+ </el-card>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <!-- 第二部分 -->
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="7" class="h-480px">
|
|
|
+ <!-- 第一个el-row -->
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-card shadow="never" class=" mb-10px h-465px ">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
+ <span>周出勤情况</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-card shadow="hover" class=" h-365px ">
|
|
|
+ <el-skeleton :loading="loading" animated >
|
|
|
+ <Echart :options="barOptionsData" :height="350" style="margin-top: -30px;"/>
|
|
|
+ </el-skeleton>
|
|
|
+ </el-card>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-card shadow="never" class="mb-10px h-465px ">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
+ <span>实时打卡状态</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="demo">
|
|
|
+ <div class="table-header">
|
|
|
+ <div class="header">
|
|
|
+ <el-row class="shouye" style="border: none;">
|
|
|
+ <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
+ <div>姓名</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
+ <div>学号</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
+ <div>工作间</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
+ <div>打卡时间</div>
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="10" class="center text-18px" style="border: none;">
|
|
|
+ <div>缺勤时间段</div>
|
|
|
+ </el-col> -->
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <vue3ScrollSeamless class="scroll-wrap text-color" :classOptions="classOptions" :dataList="list">
|
|
|
+ <div v-if="list.length > 0">
|
|
|
+ <el-row v-for="(item, i) of list" :key="i" class="shouye"
|
|
|
+ style="margin-bottom: 10px; display: flex; justify-content: center;">
|
|
|
+ <el-col :span="6" class="center"
|
|
|
+ style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
+ <div>{{ item.studentName }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center"
|
|
|
+ style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
+ <div>{{ item.userNumber }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center"
|
|
|
+ style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
+ <div>{{ item.daptName }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center"
|
|
|
+ style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
+ <div>{{ formatDate(item.clockInTime) }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <!-- <div v-if="list.length == 0"
|
|
|
+ style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
|
|
|
+ 暂无预测记录
|
|
|
+ </div> -->
|
|
|
+ </vue3ScrollSeamless>
|
|
|
+ <div v-if="list2.length == 0" style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; margin-top: -230px;">
|
|
|
+ <el-empty description="暂无数据"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <!-- 第二个el-row -->
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="7">
|
|
|
+ <el-row :gutter="15" align="center">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="24">
|
|
|
+ <el-card shadow="never" class=" h-465px mb-10px "> <!-- 移除 el-card 的边框 -->
|
|
|
+ <template #header>
|
|
|
+ <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
+ <span>缺勤预警</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div class="demos">
|
|
|
+ <div class="table-header">
|
|
|
+ <div class="header">
|
|
|
+ <el-row class="shouye" style="border: none;">
|
|
|
+ <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
+ <div>姓名</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
+ <div>学号</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
+ <div>工作间</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
+ <div>导师</div>
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="10" class="center text-18px" style="border: none;">
|
|
|
+ <div>缺勤时间段</div>
|
|
|
+ </el-col> -->
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <vue3ScrollSeamless class="scroll-wraps text-color" :classOptions="class2Options" :dataList="list2">
|
|
|
+ <div v-if="list2.length > 0">
|
|
|
+ <el-row v-for="(item, i) of list2" :key="i" class="shouye">
|
|
|
+ <!-- <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
+ <div>{{ item.ID }}</div>
|
|
|
+ </el-col> -->
|
|
|
+ <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
+ <div>{{ item.studentName }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
+ <div>{{ item.userNumber }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
+ <div>{{ item.deptName }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
+ <div>{{ item.supervisor }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <!-- <div v-if="list2.length == 0"
|
|
|
+ style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
|
|
|
+ 暂无预测记录
|
|
|
+ </div> -->
|
|
|
+ </vue3ScrollSeamless>
|
|
|
+ <div v-if="list2.length == 0" style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; margin-top: -230px;">
|
|
|
+ <el-empty description="暂无数据"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="24">
|
|
|
+ <el-card shadow="never" class=" mt-1px h-465px ">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
+ <span>学生毕业条件达成率</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div class="demoss">
|
|
|
+ <div class="header">
|
|
|
+ <el-row class="shouye h-25px" style="border: none;">
|
|
|
+ <el-col :span="12" class="center text-18px" style="border: none;padding: 8px;margin-left: 5px; margin-top: -5px;">
|
|
|
+ <div>工作间</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="center text-18px" style="border: none;padding: 8px;margin-left: -35px; margin-top: -5px;">
|
|
|
+ <div>达成率</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <vue3ScrollSeamless class="scroll-wrapss text-color" :classOptions="list1Options" :dataList="list1">
|
|
|
+ <div v-if="list1.length > 0">
|
|
|
+ <el-row v-for="(item, i) of list1" :key="i" class="shouye" :style="{ marginBottom: '10px' }">
|
|
|
+ <!-- 增加行与行之间的间距 -->
|
|
|
+ <el-col :span="12" class="center" style="padding: 8px;"> <!-- 增加内边距 -->
|
|
|
+ <div>{{ item.name }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="center" style="padding: 8px;">
|
|
|
+ <div>{{ item.graduationRate }}%</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div v-if="list1.length == 0"
|
|
|
+ style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
|
|
|
+ 暂无预测记录
|
|
|
+ </div>
|
|
|
+ </vue3ScrollSeamless>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-skeleton>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { EChartsOption, List } from 'echarts'
|
|
|
-import { formatTime } from '@/utils'
|
|
|
-import {formatDate} from "@/utils/formatTime";
|
|
|
-import { useUserStore } from '@/store/modules/user'
|
|
|
-import { useWatermark } from '@/hooks/web/useWatermark'
|
|
|
-import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
|
|
|
-import { pieOptions, barOptions } from './echarts-data'
|
|
|
-import { reactive, onMounted, watchEffect } from "vue";
|
|
|
-import { vue3ScrollSeamless } from "vue3-scroll-seamless";
|
|
|
-import * as UserApi from '@/api/system/user'
|
|
|
-import * as DeptApi from '@/api/system/dept'
|
|
|
-import { StudentAttendanceApi } from '@/api/system/studentAttendance'
|
|
|
+ import { formatTime } from '@/utils'
|
|
|
+ import {formatDate} from "@/utils/formatTime";
|
|
|
+ import { useUserStore } from '@/store/modules/user'
|
|
|
+ import { useWatermark } from '@/hooks/web/useWatermark'
|
|
|
+ import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
|
|
|
+ import { pieOptions, barOptions } from './echarts-data'
|
|
|
+ import { reactive, onMounted, watchEffect } from "vue";
|
|
|
+ import { vue3ScrollSeamless } from "vue3-scroll-seamless";
|
|
|
+ import * as UserApi from '@/api/system/user'
|
|
|
+ import * as DeptApi from '@/api/system/dept'
|
|
|
+ import { StudentAttendanceApi } from '@/api/system/studentAttendance'
|
|
|
|
|
|
defineOptions({ name: 'Home' })
|
|
|
|
|
|
@@ -273,202 +288,209 @@ const username = userStore.getUser.nickname
|
|
|
|
|
|
/*基本信息*/
|
|
|
const detail = reactive({
|
|
|
- deptNum: undefined,
|
|
|
- teacherNum: undefined,
|
|
|
- studentNum: undefined
|
|
|
+ deptNum: undefined,
|
|
|
+ teacherNum: undefined,
|
|
|
+ studentNum: undefined
|
|
|
})
|
|
|
const getDetail = async () => {
|
|
|
- const data = await UserApi.getDetail()
|
|
|
- console.log("基本信息", data);
|
|
|
- detail.deptNum = data.deptNum
|
|
|
- detail.teacherNum = data.teacherNum
|
|
|
- detail.studentNum = data.studentNum
|
|
|
+ const data = await UserApi.getDetail()
|
|
|
+ console.log("基本信息", data);
|
|
|
+ detail.deptNum = data.deptNum
|
|
|
+ detail.teacherNum = data.teacherNum
|
|
|
+ detail.studentNum = data.studentNum
|
|
|
}
|
|
|
// 获取项目数
|
|
|
let projects = reactive<Project[]>([])
|
|
|
const getProject = async () => {
|
|
|
- const data = [
|
|
|
- {
|
|
|
- name: '学院工作间数量',
|
|
|
- icon: 'svg-icon:gzs',
|
|
|
- message: String(detail.deptNum) + '个',
|
|
|
- time: new Date()
|
|
|
- },
|
|
|
- {
|
|
|
- name: '导师数量',
|
|
|
- icon: 'svg-icon:ds',
|
|
|
- message: String(detail.teacherNum) + '人',
|
|
|
- time: new Date()
|
|
|
- },
|
|
|
- {
|
|
|
- name: '在校生数量',
|
|
|
- icon: 'svg-icon:zxs',
|
|
|
- message: String(detail.studentNum) + '人',
|
|
|
- time: new Date()
|
|
|
- }
|
|
|
-
|
|
|
- ]
|
|
|
- projects = Object.assign(projects, data)
|
|
|
+ const data = [
|
|
|
+ {
|
|
|
+ name: '学院工作间数量',
|
|
|
+ icon: 'svg-icon:gzs',
|
|
|
+ message: String(detail.deptNum) + '个',
|
|
|
+ time: new Date()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '导师数量',
|
|
|
+ icon: 'svg-icon:ds',
|
|
|
+ message: String(detail.teacherNum) + '人',
|
|
|
+ time: new Date()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '在校生数量',
|
|
|
+ icon: 'svg-icon:zxs',
|
|
|
+ message: String(detail.studentNum) + '人',
|
|
|
+ time: new Date()
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+ projects = Object.assign(projects, data)
|
|
|
}
|
|
|
|
|
|
|
|
|
/**实时出勤统计 */
|
|
|
// 获取统计数
|
|
|
let totalSate = reactive<WorkplaceTotal>({
|
|
|
- normalNum: 0,
|
|
|
- errorNum: 0,
|
|
|
- excuseNum: 0,
|
|
|
+ normalNum: 0,
|
|
|
+ errorNum: 0,
|
|
|
+ excuseNum: 0,
|
|
|
})
|
|
|
const getCount = async () => {
|
|
|
- const data = await StudentAttendanceApi.getDayAttendance()
|
|
|
- console.log("实时出勤统计", data);
|
|
|
- totalSate = Object.assign(totalSate, data)
|
|
|
+ const data = await StudentAttendanceApi.getDayAttendance()
|
|
|
+ console.log("实时出勤统计", data);
|
|
|
+ totalSate = Object.assign(totalSate, data)
|
|
|
}
|
|
|
|
|
|
// /**毕业达成统计 */
|
|
|
let pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
|
|
const getGraduateCount = async () => {
|
|
|
- const data = await UserApi.getGraduateCount()
|
|
|
- console.log("毕业达成统计", data);
|
|
|
- const studentNum = data.studentNum;
|
|
|
- const graduateNum = data.graduateNum;
|
|
|
- const options = {
|
|
|
- title: {
|
|
|
- text: null,
|
|
|
- left: 'center',
|
|
|
- top: '20px'
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: '10%', // 顶部位置
|
|
|
- left: 'left', // 左侧位置
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'pie',
|
|
|
- radius: ['120px', '70px'], // 设定内圈和外圈半径
|
|
|
- center: ['50%', '85%'], // 中心位置
|
|
|
- startAngle: 180,
|
|
|
- endAngle: 360,
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: graduateNum, // 畢業生数量
|
|
|
- name: '已达成', // 国际化名称或直接用字符串 '毕业生'
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'outside', // 拉出标注
|
|
|
- formatter: '{b}: {c}', // 显示名称和数值
|
|
|
- emphasis: {
|
|
|
- show: true,
|
|
|
- },
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: true,
|
|
|
- length: 75,
|
|
|
- length2: 10,
|
|
|
- smooth: true,
|
|
|
- lineDash: [5, 5],
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- value: studentNum, // 在校生数量（总在校生减去毕业生）
|
|
|
- name: '未达成', // 国际化名称或直接用字符串 '在校生'
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'outside',
|
|
|
- formatter: '{b}: {c}',
|
|
|
- emphasis: {
|
|
|
- show: true,
|
|
|
- },
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: true,
|
|
|
- length: 75,
|
|
|
- length2: 10,
|
|
|
- smooth: true,
|
|
|
- lineDash: [5, 5],
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- itemStyle: {
|
|
|
- // 设置饼图的颜色
|
|
|
- color: function (params) {
|
|
|
- const colorList = ['#2585a6','#5cb5e3' ]; // 定义颜色数组
|
|
|
- return colorList[params.dataIndex]; // 根据数据索引返回对应的颜色
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- pieOptionsData = Object.assign(pieOptionsData, options);
|
|
|
+ const data = await UserApi.getGraduateCount()
|
|
|
+ console.log("毕业达成统计", data);
|
|
|
+ const studentNum = data.studentNum;
|
|
|
+ const graduateNum = data.graduateNum;
|
|
|
+ const options = {
|
|
|
+ title: {
|
|
|
+ text: null,
|
|
|
+ left: 'center',
|
|
|
+ top: '20px'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '10%', // 顶部位置
|
|
|
+ left: 'left', // 左侧位置
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['120px', '70px'], // 设定内圈和外圈半径
|
|
|
+ center: ['50%', '85%'], // 中心位置
|
|
|
+ startAngle: 180,
|
|
|
+ endAngle: 360,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: graduateNum, // 畢業生数量
|
|
|
+ name: '已达成', // 国际化名称或直接用字符串 '毕业生'
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'outside', // 拉出标注
|
|
|
+ formatter: '{b}: {c}', // 显示名称和数值
|
|
|
+ emphasis: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ length: 75,
|
|
|
+ length2: 10,
|
|
|
+ smooth: true,
|
|
|
+ lineDash: [5, 5],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: studentNum, // 在校生数量（总在校生减去毕业生）
|
|
|
+ name: '未达成', // 国际化名称或直接用字符串 '在校生'
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'outside',
|
|
|
+ formatter: '{b}: {c}',
|
|
|
+ emphasis: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ length: 75,
|
|
|
+ length2: 10,
|
|
|
+ smooth: true,
|
|
|
+ lineDash: [5, 5],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ itemStyle: {
|
|
|
+ // 设置饼图的颜色
|
|
|
+ color: function (params) {
|
|
|
+ const colorList = ['#2585a6','#5cb5e3' ]; // 定义颜色数组
|
|
|
+ return colorList[params.dataIndex]; // 根据数据索引返回对应的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ // // set(
|
|
|
+ // // pieOptionsData,
|
|
|
+ // // 'legend.data',
|
|
|
+ // // data.map((v) => t(v.name))
|
|
|
+ // // );
|
|
|
+
|
|
|
+ pieOptionsData = Object.assign(pieOptionsData, options);
|
|
|
};
|
|
|
|
|
|
/**周出勤情况 */
|
|
|
let barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
|
|
|
const getWeekend = async () => {
|
|
|
- const data = await StudentAttendanceApi.getWeekendAttendance();
|
|
|
- console.log("周出勤情况", data);
|
|
|
- const normalData = data.dailyNormalList
|
|
|
- const errorData = data.dailyErrorList;
|
|
|
- const excuseData = data.dailyExcuseList;
|
|
|
- barOptionsData.series[0].data = normalData;
|
|
|
- barOptionsData.series[1].data = errorData;
|
|
|
- barOptionsData.series[2].data = excuseData;
|
|
|
+ const data = await StudentAttendanceApi.getWeekendAttendance();
|
|
|
+ console.log("周出勤情况", data);
|
|
|
+ const normalData = data.dailyNormalList
|
|
|
+ const errorData = data.dailyErrorList;
|
|
|
+ const excuseData = data.dailyExcuseList;
|
|
|
+ barOptionsData.series[0].data = normalData;
|
|
|
+ barOptionsData.series[1].data = errorData;
|
|
|
+ barOptionsData.series[2].data = excuseData;
|
|
|
};
|
|
|
|
|
|
/**缺勤预警 */
|
|
|
let list2 = reactive([]);
|
|
|
const getStudentAttendanceError = async () => {
|
|
|
- const data = await StudentAttendanceApi.getDayStudentErrorAttendance()
|
|
|
- console.log("缺勤列表", data);
|
|
|
- list2.splice(0, list2.length, ...data);
|
|
|
+ const data = await StudentAttendanceApi.getDayStudentErrorAttendance()
|
|
|
+ console.log("缺勤列表", data);
|
|
|
+ list2.splice(0, list2.length, ...data);
|
|
|
}
|
|
|
const class2Options = reactive({
|
|
|
- step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
|
|
|
- limitMoveNum: list2.length,//无缝滚动列表元素的长度，一般设置为列表的长度
|
|
|
- direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
|
|
|
+ step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
|
|
|
+ limitMoveNum: list2.length,//无缝滚动列表元素的长度，一般设置为列表的长度
|
|
|
+ direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
|
|
|
});
|
|
|
|
|
|
/**实时打卡状态 */
|
|
|
//打卡滚动列表
|
|
|
const list = reactive([]);
|
|
|
const getStudentAttendance = async () => {
|
|
|
- const data = await StudentAttendanceApi.getDayStudentAttendance()
|
|
|
- console.log("打卡列表", data);
|
|
|
- list.splice(0, list.length, ...data);
|
|
|
+ const data = await StudentAttendanceApi.getDayStudentAttendance()
|
|
|
+ console.log("打卡列表", data);
|
|
|
+ list.splice(0, list.length, ...data);
|
|
|
}
|
|
|
const classOptions = reactive({
|
|
|
- step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
|
|
|
- limitMoveNum: list.length,//无缝滚动列表元素的长度，一般设置为列表的长度
|
|
|
- direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
|
|
|
-
|
|
|
+ step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
|
|
|
+ limitMoveNum: list.length,//无缝滚动列表元素的长度，一般设置为列表的长度
|
|
|
+ direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
|
|
|
+
|
|
|
});
|
|
|
|
|
|
/** 学生毕业条件达成率 */
|
|
|
//在线情况滚动列表
|
|
|
const list1 = reactive([]);
|
|
|
const getGraduationSource = async () => {
|
|
|
- const data = await DeptApi.getGraduationSource()
|
|
|
- console.log("毕业条件达成率", data);
|
|
|
- list1.splice(0, list1.length, ...data);
|
|
|
+ const data = await DeptApi.getGraduationSource()
|
|
|
+ console.log("毕业条件达成率", data);
|
|
|
+ list1.splice(0, list1.length, ...data);
|
|
|
}
|
|
|
const list1Options = reactive({
|
|
|
- step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
|
|
|
- limitMoveNum: list1.length,//无缝滚动列表元素的长度，一般设置为列表的长度
|
|
|
- direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
|
|
|
+ step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
|
|
|
+ limitMoveNum: list1.length,//无缝滚动列表元素的长度，一般设置为列表的长度
|
|
|
+ direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
|
|
|
});
|
|
|
|
|
|
onMounted(() => {
|
|
|
- getDetail()
|
|
|
- getWeekend()
|
|
|
- getProject()
|
|
|
- getCount()
|
|
|
- getStudentAttendanceError()
|
|
|
- getStudentAttendance()
|
|
|
- getGraduationSource()
|
|
|
- getGraduateCount()
|
|
|
+ getDetail()
|
|
|
+ getWeekend()
|
|
|
+ getProject()
|
|
|
+ getCount()
|
|
|
+ getStudentAttendanceError()
|
|
|
+ getStudentAttendance()
|
|
|
+ getGraduationSource()
|
|
|
+ getGraduateCount()
|
|
|
})
|
|
|
|
|
|
const getAllApi = async () => {
|
|
|
@@ -495,7 +517,7 @@ getAllApi()
|
|
|
|
|
|
<style scoped>
|
|
|
.center {
|
|
|
- text-align: center;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
/* 滚动列表 */
|
|
|
@@ -607,3 +629,4 @@ getAllApi()
|
|
|
border-left: 1px solid white;
|
|
|
}
|
|
|
</style>
|
|
|
+
|
