|
|
<!--
|
|
|
* @Author: 张涛
|
|
|
* @Date: 2023-11-06 14:18:06
|
|
|
* @LastEditors: 张涛
|
|
|
* @LastEditTime: 2023-11-17 15:09:01
|
|
|
* @FilePath: \JiangNingUmale-App\subcontract\work\attence\components\comanalysis.vue
|
|
|
-->
|
|
|
<template>
|
|
|
<view class="page">
|
|
|
<view class="view-segmented">
|
|
|
<uni-segmented-control
|
|
|
:current="current"
|
|
|
:values="items"
|
|
|
@clickItem="onClickItem"
|
|
|
styleType="button"
|
|
|
activeColor="#007aff"
|
|
|
bgColor="#FFFFFF"
|
|
|
fontColor="#34373B"
|
|
|
tabHeight="88rpx"
|
|
|
tabFontsize="32rpx"
|
|
|
tabBoxShadow="1rpx 1rpx 10rpx rgba(0,0,0,0.2)"
|
|
|
tabBorderRadius="16rpx"
|
|
|
class="segmented-controls"
|
|
|
></uni-segmented-control>
|
|
|
</view>
|
|
|
|
|
|
<view class="main-content">
|
|
|
<view class="view-one" v-show="current === 0">
|
|
|
<view class="view-calendar">
|
|
|
<view class="date">
|
|
|
<view class="icon-arrowleft"></view>
|
|
|
<view class="text-date">2023年07月</view>
|
|
|
<view class="icon-arrowright"></view>
|
|
|
</view>
|
|
|
<!-- 插入模式 -->
|
|
|
<uni-calendar
|
|
|
class="uni-calendar--hook"
|
|
|
:selected="info.selected"
|
|
|
:showMonth="false"
|
|
|
@change="change"
|
|
|
@monthSwitch="monthSwitch"
|
|
|
/>
|
|
|
<view class="icon-arrow"></view>
|
|
|
</view>
|
|
|
<view class="view-rule">
|
|
|
<view>打卡规则：A组班次 7:00 - 12:00 13:00 - 18:00</view>
|
|
|
<view>
|
|
|
<view class="icon-timeb"></view>
|
|
|
<view>今日打卡2次，共计工时8小时</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="view-steps">
|
|
|
<!-- <view class="btn-edit">修改考勤</view> -->
|
|
|
<uni-steps
|
|
|
:options="list2"
|
|
|
active-color="#007AFF"
|
|
|
:active="active"
|
|
|
direction="column"
|
|
|
/>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-show="current === 1" class="view-two">
|
|
|
<view>
|
|
|
<view class="view-head">
|
|
|
<view class="date">
|
|
|
<view class="icon-arrowleft"></view>
|
|
|
<view class="text-date">2023年07月</view>
|
|
|
<view class="icon-arrowright"></view>
|
|
|
</view>
|
|
|
<view class="header">
|
|
|
<view class="view-left">
|
|
|
<view class="avatar"></view>
|
|
|
<view class="name-gr">
|
|
|
<view class="name">李想</view>
|
|
|
<view class="title"
|
|
|
>本月签到
|
|
|
<text style="color: #fe7634; margin: 0 10rpx"> 2 </text>
|
|
|
次</view
|
|
|
>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="item-header">
|
|
|
<view class="title">签到历史分布</view>
|
|
|
</view>
|
|
|
<view class="list">
|
|
|
<view class="item">
|
|
|
<view class="item-gr1">
|
|
|
<view class="icon-calendar"></view>
|
|
|
<view class="text1">7月30日</view>
|
|
|
</view>
|
|
|
<view class="item-gr">
|
|
|
<view class="icon-time"></view>
|
|
|
<view class="text2">15:09</view>
|
|
|
</view>
|
|
|
<view class="item-gr">
|
|
|
<view class="icon-loc"></view>
|
|
|
<view class="text3">江苏省南京市江宁区xxx街道600号</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<view class="item-gr1">
|
|
|
<view class="icon-calendar"></view>
|
|
|
<view class="text1">7月30日</view>
|
|
|
</view>
|
|
|
<view class="item-gr">
|
|
|
<view class="icon-time"></view>
|
|
|
<view class="text2">15:09</view>
|
|
|
</view>
|
|
|
<view class="item-gr">
|
|
|
<view class="icon-loc"></view>
|
|
|
<view class="text3">江苏省南京市江宁区xxx街道600号</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
active: null,
|
|
|
list2: [
|
|
|
{
|
|
|
title: "打卡时间：06:59:59",
|
|
|
content: "江苏省南京市江宁区xxx街道600号",
|
|
|
desc: "上班打卡 07:00:00",
|
|
|
},
|
|
|
{
|
|
|
title: "打卡时间：06:59:59",
|
|
|
content: "江苏省南京市江宁区xxx街道600号",
|
|
|
desc: "上班打卡 07:00:00",
|
|
|
},
|
|
|
{
|
|
|
title: "打卡时间：06:59:59",
|
|
|
content: "江苏省南京市江宁区xxx街道600号",
|
|
|
desc: "上班打卡 07:00:00",
|
|
|
},
|
|
|
{
|
|
|
title: "打卡时间：06:59:59",
|
|
|
content: "江苏省南京市江宁区xxx街道600号",
|
|
|
desc: "上班打卡 07:00:00",
|
|
|
},
|
|
|
],
|
|
|
items: ["打卡统计", "签到统计"],
|
|
|
current: 0,
|
|
|
showCalendar: false,
|
|
|
info: {
|
|
|
lunar: true,
|
|
|
range: true,
|
|
|
insert: false,
|
|
|
selected: [],
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
open() {
|
|
|
this.$refs.calendar.open();
|
|
|
},
|
|
|
close() {
|
|
|
console.log("弹窗关闭");
|
|
|
},
|
|
|
change(e) {
|
|
|
console.log("change 返回:", e);
|
|
|
// 模拟动态打卡
|
|
|
if (this.info.selected.length > 5) return;
|
|
|
this.info.selected.push({
|
|
|
date: e.fulldate,
|
|
|
info: "打卡",
|
|
|
});
|
|
|
},
|
|
|
confirm(e) {
|
|
|
console.log("confirm 返回:", e);
|
|
|
},
|
|
|
monthSwitch(e) {
|
|
|
console.log("monthSwitchs 返回:", e);
|
|
|
},
|
|
|
onClickItem(e) {
|
|
|
if (this.current != e.currentIndex) {
|
|
|
this.current = e.currentIndex;
|
|
|
}
|
|
|
},
|
|
|
goPath(item) {
|
|
|
this.$tab.navigateTo(item.toPage);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.page {
|
|
|
background-color: #f6f7f8;
|
|
|
|
|
|
.view-segmented {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background-color: #f6f7f8;
|
|
|
position: fixed;
|
|
|
top: calc(var(--status-bar-height) + 44px);
|
|
|
z-index: 99;
|
|
|
padding-top: 30rpx;
|
|
|
padding-bottom: 30rpx;
|
|
|
.segmented-controls {
|
|
|
width: 688rpx;
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
|
|
|
/deep/.segmented-control--button {
|
|
|
/deep/.segmented-control__item--button {
|
|
|
/deep/.segmented-control__text {
|
|
|
color: #34373b;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.main-content {
|
|
|
position: relative;
|
|
|
margin-top: calc(var(--status-bar-height) + 84px);
|
|
|
padding-bottom: 250rpx;
|
|
|
.view-one {
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
|
|
|
border-radius: 16rpx;
|
|
|
padding: 20rpx 0;
|
|
|
margin: 0 20rpx;
|
|
|
|
|
|
.view-calendar {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
padding-bottom: 25rpx;
|
|
|
.date {
|
|
|
width: 100%;
|
|
|
background: #ffffff;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
z-index: 1;
|
|
|
display: flex;
|
|
|
margin-bottom: 30rpx;
|
|
|
padding: 37rpx 37rpx;
|
|
|
|
|
|
.icon-arrowleft {
|
|
|
width: 52rpx;
|
|
|
height: 52rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-arrowleft.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
.text-date {
|
|
|
flex: 1;
|
|
|
font-size: 40rpx;
|
|
|
font-family: PingFang SC;
|
|
|
color: #34373b;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.icon-arrowright {
|
|
|
width: 52rpx;
|
|
|
height: 52rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-arrowright.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.icon-arrow {
|
|
|
width: 20rpx;
|
|
|
height: 20rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-arrow.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.view-rule {
|
|
|
padding: 27rpx 33rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #616367;
|
|
|
border-top: 1rpx solid #e2e2e2;
|
|
|
border-bottom: 1rpx solid #e2e2e2;
|
|
|
|
|
|
& > view {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin: 8rpx 0;
|
|
|
.icon-timeb {
|
|
|
width: 24rpx;
|
|
|
height: 24rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-timeb.png");
|
|
|
background-repeat: no-repeat;
|
|
|
margin-right: 13rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.view-steps {
|
|
|
position: relative;
|
|
|
.btn-edit {
|
|
|
position: absolute;
|
|
|
right: 20rpx;
|
|
|
top: 18rpx;
|
|
|
padding: 10rpx 25rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #367bef;
|
|
|
letter-spacing: 10rpx;
|
|
|
border: 1px solid #367bef;
|
|
|
border-radius: 30rpx;
|
|
|
}
|
|
|
/deep/.uni-steps__column-desc {
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
color: #616367;
|
|
|
}
|
|
|
|
|
|
/deep/.uni-steps__column-title {
|
|
|
font-size: 40rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #2e2f31 !important;
|
|
|
margin: 17rpx 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.view-two {
|
|
|
.view-head {
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
|
|
|
border-radius: 16rpx;
|
|
|
margin: 20rpx;
|
|
|
padding: 37rpx 37rpx 0 37rpx;
|
|
|
|
|
|
.date {
|
|
|
display: flex;
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
.icon-arrowleft {
|
|
|
width: 52rpx;
|
|
|
height: 52rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-arrowleft.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
.text-date {
|
|
|
flex: 1;
|
|
|
font-size: 40rpx;
|
|
|
font-family: PingFang SC;
|
|
|
color: #34373b;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.icon-arrowright {
|
|
|
width: 52rpx;
|
|
|
height: 52rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-arrowright.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
display: flex;
|
|
|
padding: 36rpx;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
.view-left {
|
|
|
display: flex;
|
|
|
.avatar {
|
|
|
width: 88rpx;
|
|
|
height: 88rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-head.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
|
|
|
.name-gr {
|
|
|
margin-left: 48rpx;
|
|
|
.name {
|
|
|
font-size: 40rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #2e2f31;
|
|
|
}
|
|
|
.title {
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #9da2ab;
|
|
|
letter-spacing: 5rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-appl {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
padding: 0 14rpx;
|
|
|
.icon-appl {
|
|
|
width: 44rpx;
|
|
|
height: 44rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-appl.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.item-header {
|
|
|
display: flex;
|
|
|
margin: 15rpx 20rpx;
|
|
|
.title {
|
|
|
font-size: 30rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #2e2f31;
|
|
|
background-image: url("@/static/images/umale/icon_ind.png");
|
|
|
background-size: 100% 50%;
|
|
|
background-position: bottom;
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
|
|
|
.icon {
|
|
|
font-size: 30rpx;
|
|
|
font-family: PingFang SC-Bold, PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #fe3434;
|
|
|
}
|
|
|
}
|
|
|
.list {
|
|
|
.item {
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
|
|
|
border-radius: 16rpx;
|
|
|
margin: 15rpx 20rpx;
|
|
|
padding: 26rpx 16rpx;
|
|
|
.item-gr1 {
|
|
|
display: flex;
|
|
|
padding-bottom: 24rpx;
|
|
|
border-bottom: 1px solid #e2e2e2;
|
|
|
align-items: center;
|
|
|
.text1 {
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #2e2f31;
|
|
|
letter-spacing: 6rpx;
|
|
|
margin-left: 16rpx;
|
|
|
}
|
|
|
|
|
|
.icon-calendar {
|
|
|
width: 44rpx;
|
|
|
height: 44rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-calendar.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
}
|
|
|
.item-gr {
|
|
|
display: flex;
|
|
|
margin-top: 20rpx;
|
|
|
align-items: center;
|
|
|
|
|
|
.text2 {
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
color: #616367;
|
|
|
margin-left: 8rpx;
|
|
|
}
|
|
|
|
|
|
.text3 {
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #616367;
|
|
|
margin-left: 8rpx;
|
|
|
}
|
|
|
|
|
|
.icon-time {
|
|
|
width: 24rpx;
|
|
|
height: 24rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-time.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
.icon-loc {
|
|
|
width: 24rpx;
|
|
|
height: 24rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-loc.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
