|
|
@@ -1,34 +1,426 @@
|
|
|
<template>
|
|
|
- <div class="attendanceCenter">
|
|
|
- <h1>{{ titleOne }}考勤</h1>
|
|
|
- <OaCalendar />
|
|
|
+ <div class="attendanceCenterMine">
|
|
|
+ <div class="left-box box-1">
|
|
|
+ <div class="box-title">我的考勤</div>
|
|
|
+ <div class="calendarBox">
|
|
|
+ <el-calendar ref="calendar">
|
|
|
+ <template #header="{ date }">
|
|
|
+ <div class="calendarHeader">
|
|
|
+ <el-icon class="icon1" @click="selectDate('prev-month')"><ArrowLeftBold /></el-icon>
|
|
|
+ <span class="title">{{ date }}</span>
|
|
|
+ <el-icon class="icon1" @click="selectDate('next-month')"><ArrowRightBold /></el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #date-cell="{ data }">
|
|
|
+ <div class="calendarContentBox">
|
|
|
+ <p>
|
|
|
+ {{ data.day.split('-').slice(2).join('-') }}
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ {{ '正常' }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-calendar>
|
|
|
+ </div>
|
|
|
+ <div class="calendarInfo">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in calendInfoList" :key="index">
|
|
|
+ <img :src="getAssetURL(item.icon)" />
|
|
|
+ <div class="text">
|
|
|
+ <p>{{ item.name }} ({{ item.unit }})</p>
|
|
|
+ <h4>{{ item.value }}</h4>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <div class="right-top box-1">
|
|
|
+ <div class="box-title">请假统计</div>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in qjCount" :key="index">
|
|
|
+ <div class="liLeft">
|
|
|
+ <div></div>
|
|
|
+ <p>{{ item.name }} :</p>
|
|
|
+ </div>
|
|
|
+ <h4>{{ item.value }} 天 </h4>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="right-bom box-1">
|
|
|
+ <div class="box-title">
|
|
|
+ <h4>考勤状态</h4>
|
|
|
+ <div>2023年10月23日</div>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in attendSteList" :key="index">
|
|
|
+ <div class="li-top-box" v-if="index == 1 || index == 0">
|
|
|
+ <div class="liLeft">
|
|
|
+ <img :src="getAssetURL(item.icon)" />
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
+ </div>
|
|
|
+ <h4>{{ item.value }}</h4>
|
|
|
+ </div>
|
|
|
+ <div class="li-bom-box" v-else>
|
|
|
+ <div class="liLeft">
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
+ <h4>{{ item.num }}</h4>
|
|
|
+ </div>
|
|
|
+ <h4 v-if="item.value != ''">{{ item.value }}</h4>
|
|
|
+ <h4 v-else> -- : -- </h4>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
-import moment from 'moment'
|
|
|
-import OaCalendar from '@/views/OaSystem/components/OaCalendar/index.vue'
|
|
|
-import { useAppStore } from '@/store/modules/app'
|
|
|
-import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
|
|
+import type { CalendarDateType, CalendarInstance } from 'element-plus'
|
|
|
+import { getAssetURL } from '@/utils/auth'
|
|
|
defineOptions({ name: 'AttendanceMine' })
|
|
|
-const { wsCache } = useCache()
|
|
|
-const appStore = useAppStore()
|
|
|
-const user = wsCache.get(CACHE_KEY.USER)
|
|
|
-const userName = user.user.nickname ? user.user.nickname : 'Admin'
|
|
|
-const calendarList = ref([])
|
|
|
-
|
|
|
-const titleOne = ref('2023年11月')
|
|
|
-onMounted(() => {
|
|
|
- console.log(user)
|
|
|
-})
|
|
|
+const calendar = ref<CalendarInstance>()
|
|
|
+const selectDate = (val: CalendarDateType) => {
|
|
|
+ if (!calendar.value) return
|
|
|
+ calendar.value.selectDate(val)
|
|
|
+}
|
|
|
+const calendInfoList = ref([
|
|
|
+ {
|
|
|
+ icon: 'kq/ycq',
|
|
|
+ name: '应出勤',
|
|
|
+ unit: '天',
|
|
|
+ value: 22
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'kq/ycqA',
|
|
|
+ name: '已出勤',
|
|
|
+ unit: '天',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'kq/cc',
|
|
|
+ name: '出差',
|
|
|
+ unit: '天',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'kq/zt',
|
|
|
+ name: '早退',
|
|
|
+ unit: '次',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'kq/kg',
|
|
|
+ name: '旷工',
|
|
|
+ unit: '天',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'kq/cd',
|
|
|
+ name: '迟到',
|
|
|
+ unit: '次',
|
|
|
+ value: 0
|
|
|
+ }
|
|
|
+])
|
|
|
+const qjCount = ref([
|
|
|
+ {
|
|
|
+ name: '事假',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '病假',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '年假',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '调休',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '产假',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '护理假',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '丧假',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '婚假',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '其他',
|
|
|
+ value: 0
|
|
|
+ }
|
|
|
+])
|
|
|
+const attendSteList = ref([
|
|
|
+ {
|
|
|
+ icon: 'kq/swkq',
|
|
|
+ name: '上午考勤',
|
|
|
+ value: '请假'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: 'kq/xwqk',
|
|
|
+ name: '下午考勤',
|
|
|
+ value: '正常'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '上班打卡',
|
|
|
+ num: '9:00',
|
|
|
+ value: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '下班打卡',
|
|
|
+ num: '17:30',
|
|
|
+ value: '18:25'
|
|
|
+ }
|
|
|
+])
|
|
|
+onMounted(() => {})
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
h1 {
|
|
|
font-size: 20px;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
-.attendanceCenter {
|
|
|
+.attendanceCenterMine {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- padding: 15px 220px;
|
|
|
+ padding-top: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .box-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #121518;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ h4 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #121518;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-1 {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-box {
|
|
|
+ width: calc(50% - 15px);
|
|
|
+ height: 100%;
|
|
|
+ .calendarBox {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 254px);
|
|
|
+ border-bottom: 1px solid #e4e8ef;
|
|
|
+ .calendarHeader {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ user-select: none;
|
|
|
+ .icon1 {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .calendarInfo {
|
|
|
+ width: 100%;
|
|
|
+ height: 224px;
|
|
|
+ padding: 15px;
|
|
|
+ ul {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ li {
|
|
|
+ width: 26%;
|
|
|
+ height: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ p {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ h4 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-box {
|
|
|
+ width: calc(50%);
|
|
|
+ height: 100%;
|
|
|
+ .right-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 308px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ ul {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: calc(33% - 15px);
|
|
|
+ height: 54px;
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px solid #e4e8ef;
|
|
|
+ padding: 0 20px;
|
|
|
+ .liLeft {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ div {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background: #8b969c;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h4 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-bom {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 323px);
|
|
|
+ ul {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 70px);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 40px;
|
|
|
+ li {
|
|
|
+ width: calc(50% - 15px);
|
|
|
+ height: calc(50% - 30px);
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
+ border: 1px solid #e4e8ef;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 28px;
|
|
|
+ .li-top-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .liLeft {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h4 {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .li-bom-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .liLeft {
|
|
|
+ p {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ h4 {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h4 {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-calendar {
|
|
|
+ .el-calendar__header {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ .el-calendar__body {
|
|
|
+ padding-top: 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+ .el-calendar-table {
|
|
|
+ }
|
|
|
+ .el-calendar-table__row {
|
|
|
+ td {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .current {
|
|
|
+ height: 65px;
|
|
|
+ }
|
|
|
+ .is-selected {
|
|
|
+ background-color: transparent;
|
|
|
+ .el-calendar-day {
|
|
|
+ background-color: #2e77e6;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-calendar-day {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 65px;
|
|
|
+ height: 65px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-calendar-table tr td {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .calendarContentBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
