484 lines
17 KiB
Vue
484 lines
17 KiB
Vue
<!-- 考勤统计 -->
|
||
<template>
|
||
<page-meta :page-style="'overflow:' + (showPopup ? 'hidden' : 'visible')"></page-meta>
|
||
<view class="main">
|
||
<!-- 自定义的页面顶部内容 -->
|
||
<view class="summaryTab" :style="{ height: (menu.bottom + 14) + 'px' }">
|
||
<view class="leftArrow" :style="{ top: (menu.top + ((menu.height - 24) / 2)) + 'px' }">
|
||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"
|
||
@click="handleBack"></image>
|
||
<view class="picker" :style="{ top: (menu.bottom + 24) + 'px' }" @click="handleChangeService">
|
||
<view class="selectService">
|
||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
|
||
<view class="select">
|
||
<view class="content">
|
||
<view class="uni-input">{{ serviceInfo.SERVERPART_NAME ? serviceInfo.SERVERPART_NAME :
|
||
'' }}
|
||
</view>
|
||
<image class="rightArrow"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 考勤统计的列表 -->
|
||
<view class="attendanceListBox" :style="{ paddingTop: (menu.bottom + 30) + 'px' }">
|
||
<view class="onDutyPersonBoxHeader">
|
||
<text class="title">考勤统计</text>
|
||
<!-- 居中的日历时间 -->
|
||
<view class="dateBox">
|
||
<view class="centerDateBox">
|
||
<image class="arrowIcon" src="https://eshangtech.com/cyy_DIB/leftArrowIcon.png"
|
||
@click="handleChangeDate(2)" />
|
||
<view class="center">
|
||
<text class="date-text">{{ selectDate ? $util.cutDate(new Date(selectDate), 'YYYY-MM') : ""
|
||
}}</text>
|
||
<!-- <text class="date-icon">📅</text> -->
|
||
</view>
|
||
<image class="arrowIcon" src="https://eshangtech.com/cyy_DIB/rightArrowIcon.png"
|
||
@click="handleChangeDate(1)" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
<view class="attendanceStatisticsItem" v-for="(item, index) in attendanceStatisticsData" :key="index"
|
||
:style="{
|
||
borderTopRightRadius: index === 0 ? '0' : '',
|
||
borderTopLeftRadius: index === 0 ? '0' : '',
|
||
marginBottom: index + 1 === attendanceStatisticsData.length ? '0' : '24rpx'
|
||
}">
|
||
<view class="attendanceStatisticsItemTop">
|
||
<view class="eventsItem" style="margin-bottom: 16rpx;">
|
||
<view class="eventsHaveImgLabel">
|
||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
|
||
<view class="eventsHaveLabel">联系人：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ item.userName || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsHaveImgLabel">
|
||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
|
||
<view class="eventsHaveLabel">联系电话：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ item.phone || "" }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="line"></view>
|
||
|
||
|
||
<view class="attendanceStatisticsItemTop attendanceStatisticsItemBottom">
|
||
<view class="eventsItem">
|
||
<view class="eventsHaveImgLabel">
|
||
<view class="eventsHaveLabel">当月排班：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ item.scheduleTotal || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsHaveImgLabel">
|
||
<view class="eventsHaveLabel">出勤：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ item.attendTotal || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsHaveImgLabel">
|
||
<view class="eventsHaveLabel">休息：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ item.restTotal || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsHaveImgLabel">
|
||
<view class="eventsHaveLabel">迟到：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ item.lateTotal || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem" style="margin-bottom: 0;">
|
||
<view class="eventsHaveImgLabel">
|
||
<view class="eventsHaveLabel">早退：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ item.earlyTotal || "" }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from "@/util/index.js";
|
||
import { formatTime } from '@/util/dateTime/index.js'
|
||
export default {
|
||
data() {
|
||
const nowDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD') // 有数据的最近日期
|
||
return {
|
||
menu: {},
|
||
serviceInfo: {},
|
||
showPopup: false,
|
||
selectDate: nowDay,// 选中的时间
|
||
attendanceStatisticsData: [],
|
||
isFirst: true,
|
||
seatInfo: {}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
let currentService = uni.getStorageSync('currentService')
|
||
this.serviceInfo = currentService
|
||
this.handleGetServerpartDetail(currentService.Serverpart_ID || currentService.SERVERPART_ID)
|
||
this.handleGetData(currentService.SERVERPART_NAME)
|
||
},
|
||
async onShow() {
|
||
let currentService = uni.getStorageSync('currentService')
|
||
if (currentService.Serverpart_ID !== this.serviceInfo.SERVERPART_ID && !this.isFirst) {
|
||
this.handleGetServerpartDetail(currentService.Serverpart_ID)
|
||
this.handleGetData(currentService.SERVERPART_NAME)
|
||
}
|
||
this.isFirst = false
|
||
},
|
||
methods: {
|
||
// 拿到数据
|
||
async handleGetData(SERVERPART_NAME) {
|
||
let req = {
|
||
bsessionKey: "0B30475A94674D608022885F7763959B",
|
||
workTime: new Date(this.selectDate).getTime(),
|
||
saName: SERVERPART_NAME || "",// 服务区名称
|
||
phone: "",// 手机号码
|
||
}
|
||
uni.showLoading({
|
||
title: "加载中..."
|
||
})
|
||
|
||
const data = await new Promise((resolve, reject) => {
|
||
uni.request({
|
||
url: "https://fwqznxj.yciccloud.com:9081/ynjt/pushManage/queryUserSchedule",
|
||
method: "POST",
|
||
data: req,
|
||
header: {
|
||
"content-type": "application/x-www-form-urlencoded",
|
||
},
|
||
success(res) {
|
||
resolve(res.data.data)
|
||
},
|
||
});
|
||
});
|
||
uni.hideLoading()
|
||
|
||
let list = data
|
||
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
item.dutyClockInTime = item.dutyClockInTime ? formatTime(item.dutyClockInTime) : ""
|
||
item.offDutyClockInTime = item.offDutyClockInTime ? formatTime(item.offDutyClockInTime) : ""
|
||
})
|
||
}
|
||
this.attendanceStatisticsData = list
|
||
},
|
||
// 查询服务区详情
|
||
async handleGetServerpartDetail(id) {
|
||
let currentService = uni.getStorageSync("currentService");
|
||
let seatInfo = uni.getStorageSync("seatInfo");
|
||
this.seatInfo = JSON.parse(seatInfo);
|
||
let req = {
|
||
ServerpartId: id || currentService.Serverpart_ID || currentService.SERVERPART_ID,
|
||
latitude: this.seatInfo.latitude,
|
||
longitude: this.seatInfo.longitude,
|
||
};
|
||
console.log('req', req);
|
||
|
||
uni.showLoading({
|
||
title: "加载中...",
|
||
});
|
||
|
||
const data = await request.$webJavaGet(
|
||
"/third-party/getServerPartInfo",
|
||
req
|
||
);
|
||
uni.hideLoading();
|
||
|
||
let obj = data.Result_Data;
|
||
this.serviceInfo = obj;
|
||
this.$forceUpdate();
|
||
|
||
console.log('this.serviceInfo', this.serviceInfo);
|
||
|
||
},
|
||
// 改变服务区
|
||
handleChangeService() {
|
||
this.$util.toNextRoute("navigateTo", "/pages/map/index?type=attendanceStatus");
|
||
},
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
// 修改日期
|
||
async handleChangeDate(type) {
|
||
this.attendanceStatisticsData = []
|
||
// type 1 加一天 2 减一天
|
||
// 兼容 iOS，把 2025-08-15 转成 2025/08/15
|
||
const cur = new Date((this.selectDate || '').replace(/-/g, '/'));
|
||
if (Number.isNaN(cur.getTime())) return;
|
||
|
||
// 1：加一月；2：减一月；其他：不变
|
||
const delta = type === 1 ? 1 : (type === 2 ? -1 : 0);
|
||
|
||
// 目标月份的最后一天：new Date(年, 目标月+1, 0)
|
||
const last = new Date(cur.getFullYear(), cur.getMonth() + delta + 1, 0);
|
||
|
||
const y = last.getFullYear();
|
||
const m = String(last.getMonth() + 1).padStart(2, '0');
|
||
const d = String(last.getDate()).padStart(2, '0');
|
||
|
||
this.selectDate = `${y}-${m}-${d}`;
|
||
await this.handleGetData(this.serviceInfo.SERVERPART_NAME)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@bg: #f8f9fa;
|
||
@muted: #666;
|
||
@card: #fff;
|
||
@shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
@primary: #27B25F;
|
||
@primary2: #4CCC7F;
|
||
@ok: #2ed573;
|
||
@warn: #ff9f43;
|
||
@danger: #ff4757;
|
||
|
||
.main {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background-color: #f0f2f3;
|
||
box-sizing: border-box;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.summaryTab {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100vw;
|
||
// background: #fff;
|
||
background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
|
||
z-index: 99;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding-bottom: 16px;
|
||
|
||
.leftArrow {
|
||
width: 100%;
|
||
height: 24px;
|
||
position: absolute;
|
||
// left: 16px;
|
||
z-index: 99999999999;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 32rpx;
|
||
|
||
.img {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 8px;
|
||
z-index: 99;
|
||
}
|
||
|
||
.picker {
|
||
.selectService {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 40px;
|
||
height: 40px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.select {
|
||
height: 32px;
|
||
background: #fff;
|
||
border-radius: 0 16px 16px 0;
|
||
transform: translateX(-40px);
|
||
box-sizing: border-box;
|
||
padding-left: 35px;
|
||
padding-right: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.content {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.uni-input {
|
||
padding: 0;
|
||
background: transparent;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
}
|
||
|
||
.area {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 40px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.rightArrow {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
.noticeText {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #B6BACB;
|
||
line-height: 40rpx;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.attendanceListBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
|
||
.onDutyPersonBoxHeader {
|
||
background: @bg;
|
||
padding: 0 30rpx;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
font-weight: 700;
|
||
font-size: 28rpx;
|
||
color: #2c3e50;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-top-left-radius: 8rpx;
|
||
border-top-right-radius: 8rpx;
|
||
|
||
|
||
.dateBox {
|
||
box-sizing: border-box;
|
||
padding: 16rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.centerDateBox {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 30rpx;
|
||
background-color: #fff;
|
||
// border: 2rpx solid #27B35F;
|
||
// background: rgba(255, 255, 255, .15);
|
||
|
||
.arrowIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.center {
|
||
.date-text {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.attendanceStatisticsItem {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
box-shadow: @shadow;
|
||
border-radius: 8rpx;
|
||
background-color: #fff;
|
||
|
||
.attendanceStatisticsItemTop {
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
|
||
.eventsItem {
|
||
width: 50%;
|
||
display: inline-block;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.eventsHaveImgLabel {
|
||
display: flex;
|
||
width: 200rpx;
|
||
align-items: center;
|
||
|
||
.eventsHaveImg {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 16rpx;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.eventsHaveLabel {
|
||
width: 154rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.eventsLabel {
|
||
width: 200rpx;
|
||
text-align: left;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.eventsValue {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.line {
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background-color: #dad9d3;
|
||
margin: 24rpx 0;
|
||
|
||
}
|
||
|
||
.attendanceStatisticsItemBottom {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
|
||
.eventsItem {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</style> |