|
|
@@ -1,115 +1,66 @@
|
|
|
-
|
|
|
- <!-- <div>
|
|
|
- <el-card shadow="never">
|
|
|
- <el-skeleton :loading="loading" animated>
|
|
|
- <el-row :gutter="16" justify="space-between">
|
|
|
- <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
- <div class="flex items-center">
|
|
|
- <el-avatar :src="avatar" :size="70" class="mr-16px">
|
|
|
- <img src="@/assets/imgs/avatar.gif" alt="" />
|
|
|
- </el-avatar>
|
|
|
- <div>
|
|
|
- <div class="text-20px">
|
|
|
- {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
|
|
|
- </div>
|
|
|
- <div class="mt-10px text-14px text-gray-500">
|
|
|
- {{ t('workplace.toady') }}，20℃ - 32℃！
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
- <div class="h-70px flex items-center justify-end lt-sm:mt-10px">
|
|
|
- <div class="px-8px text-right">
|
|
|
- <div class="mb-16px text-14px text-gray-400">{{ t('workplace.project') }}</div>
|
|
|
- <CountTo class="text-20px" :start-val="0" :end-val="totalSate.project" :duration="2600" />
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical" />
|
|
|
- <div class="px-8px text-right">
|
|
|
- <div class="mb-16px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
|
|
|
- <CountTo class="text-20px" :start-val="0" :end-val="totalSate.todo" :duration="2600" />
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical" border-style="dashed" />
|
|
|
- <div class="px-8px text-right">
|
|
|
- <div class="mb-16px text-14px text-gray-400">{{ t('workplace.access') }}</div>
|
|
|
- <CountTo class="text-20px" :start-val="0" :end-val="totalSate.access" :duration="2600" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-skeleton>
|
|
|
- </el-card>
|
|
|
- </div> -->
|
|
|
- <!-- 日期
|
|
|
- <div class="mt-16px text-12px text-gray-400">
|
|
|
- {{ formatTime(item.date, 'yyyy-MM-dd') }}
|
|
|
- </div> -->
|
|
|
- <!-- 更多<el-link type="primary" :underline="false" href="https://github.com/yudaocode" target="_blank"> {{
|
|
|
- t('action.more') }}
|
|
|
- </el-link> -->
|
|
|
-
|
|
|
<template>
|
|
|
<el-skeleton :loading="loading" animated>
|
|
|
<el-row :gutter="8">
|
|
|
<!-- 第一部分 -->
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
|
|
|
- <el-card style="height: 99%;">
|
|
|
+ <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-90px ">
|
|
|
+ <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">
|
|
|
-
|
|
|
+
|
|
|
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
|
|
|
</div> -->
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
|
-
|
|
|
- <el-card shadow="never" class=" h-100% mt-20px ">
|
|
|
+
|
|
|
+ <el-card shadow="never" class=" h-100% mt-10px ">
|
|
|
<template #header>
|
|
|
<div class="h-5 flex justify-between fw-800 text-20px">
|
|
|
- <span>出勤统计</span>
|
|
|
+ <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-8px text-right">
|
|
|
- <div class="mb-10px text-20px text-white ">当日出勤情况</div>
|
|
|
+ <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.normal" :duration="2600" />
|
|
|
</div>
|
|
|
- <el-divider direction="vertical" style="border-left-black" />
|
|
|
- <div class="px-25px text-center">
|
|
|
- <div class="mb-16px text-18px text-white ">正常人数</div>
|
|
|
- <CountTo class="text-20px" :start-val="0" :end-val="totalSate.normal" :duration="2600" />
|
|
|
+ <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.unusual" :duration="2600" />
|
|
|
</div>
|
|
|
<el-divider direction="vertical" border-style="dashed" />
|
|
|
- <div class="px-8px text-center">
|
|
|
- <div class="mb-16px text-18px text-white ">异常人数</div>
|
|
|
- <CountTo class="text-20px" :start-val="0" :end-val="totalSate.unusual" :duration="2600" />
|
|
|
+ <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.unusual" :duration="2600" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-card>
|
|
|
-
|
|
|
- <el-card shadow="hover" class="mb-8px mt-30px">
|
|
|
+
|
|
|
+ <el-card shadow="hover" class=" mt-10px">
|
|
|
<template #header>
|
|
|
<div class="h-5 flex justify-between fw-800 text-20px">
|
|
|
- <span>实时人数统计</span>
|
|
|
+ <span>毕业条件达成统计</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<el-skeleton :loading="loading" animated>
|
|
|
@@ -119,11 +70,11 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<!-- 第二部分 -->
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
|
|
|
+ <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="12" :xl="12">
|
|
|
- <el-card shadow="never" class="ml-10px h-480px ">
|
|
|
+ <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-5 flex justify-between fw-800 text-20px">
|
|
|
<span>周出勤情况</span>
|
|
|
@@ -136,9 +87,9 @@
|
|
|
</el-card>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
-
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="10">
|
|
|
- <el-card shadow="never">
|
|
|
+
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-card shadow="never" class="mb-10px ">
|
|
|
<template #header>
|
|
|
<div class="h-5 flex justify-between fw-800 text-20px">
|
|
|
<span>实时打卡状态</span>
|
|
|
@@ -174,25 +125,26 @@
|
|
|
</vue3ScrollSeamless>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
-
|
|
|
+
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
-
|
|
|
- <!-- 第二个el-row -->
|
|
|
- <el-row class="mt-12px" :gutter="15" align="center">
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="13" :xl="7">
|
|
|
- <el-card shadow="never" class="mt-1px h-480px ml-10px" style="border: none;"> <!-- 移除 el-card 的边框 -->
|
|
|
+ </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="8" class="center text-18px" style="border: none;">
|
|
|
+ <el-row class="shouye" style="border: none;">
|
|
|
+ <el-col :span="8" class="center text-18px" style="border: none;">
|
|
|
<div>学生学号</div>
|
|
|
</el-col>
|
|
|
<el-col :span="10" class="center text-18px" style="border: none;">
|
|
|
@@ -207,7 +159,7 @@
|
|
|
</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">
|
|
|
@@ -232,11 +184,10 @@
|
|
|
</vue3ScrollSeamless>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
-
|
|
|
+
|
|
|
</el-col>
|
|
|
-
|
|
|
- <el-col :xs="24" :sm="24" :md="24" :lg="11" :xl="7">
|
|
|
- <el-card shadow="never" class="mr-8px mt-1px h-480px ">
|
|
|
+ <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>
|
|
|
@@ -255,7 +206,7 @@
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</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' }">
|
|
|
@@ -273,20 +224,15 @@
|
|
|
暂无预测记录
|
|
|
</div>
|
|
|
</vue3ScrollSeamless>
|
|
|
-
|
|
|
+
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
-
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-skeleton>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
@@ -485,8 +431,8 @@ const getShortcut = async () => {
|
|
|
// 用户来源
|
|
|
const getUserAccessSource = async () => {
|
|
|
const data = [
|
|
|
- { value: 1048, name: '在线人数' },
|
|
|
- { value: 735, name: '离线人数' },
|
|
|
+ { value: 1048, name: '达成人数' },
|
|
|
+ { value: 735, name: '未达成人数' },
|
|
|
];
|
|
|
|
|
|
const options = {
|
|
|
@@ -820,7 +766,7 @@ getAllApi()
|
|
|
}
|
|
|
|
|
|
/* .text-color {
|
|
|
- color: rgb(15, 131, 233);
|
|
|
+ color: rgb(15, 131, 233);
|
|
|
} */
|
|
|
|
|
|
|
wwj
蒋佳琪