1379 lines
48 KiB
Vue
1379 lines
48 KiB
Vue
<template>
|
||
<page-meta :page-style="'overflow:' + (showPopup ? 'hidden' : 'visible')"></page-meta>
|
||
<view class="main" :style="{ paddingTop: (menu.bottom + 14) + 'px' }">
|
||
<!-- 自定义的页面顶部内容 -->
|
||
<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="dateBox">
|
||
<view class="centerDateBox" @click="open">
|
||
<text class="date-text">{{ selectDate }}</text>
|
||
<text class="date-icon">📅</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 插入日历 即悬浮框 -->
|
||
<uni-calendar ref="calendar" class="selectDateCalendar" :clear-date="true" :date="selectDate" :insert="false"
|
||
:startDate="info.startDate" :range="info.range" @confirm="handleChangeTime" />
|
||
|
||
<!-- 人员类型的tab -->
|
||
<view class="personTabBox">
|
||
<view :class="selectTab === 1 ? 'personItem personItemSelect' : 'personItem '" @click="handleChangeTab(1)">
|
||
<view class="personValue">3</view>
|
||
<view class="personLabel">在岗人员</view>
|
||
</view>
|
||
|
||
<view :class="selectTab === 2 ? 'personItem personItemSelect' : 'personItem '" @click="handleChangeTab(2)">
|
||
<view class="personValue">4</view>
|
||
<view class="personLabel">请假人员</view>
|
||
</view>
|
||
|
||
<!-- <view :class="selectTab === 3 ? 'personItem personItemSelect' : 'personItem '" @click="handleChangeTab(3)">
|
||
<view class="personValue">1</view>
|
||
<view class="personLabel">值班经理</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- 特情事件提醒横幅 -->
|
||
<view class="emergency-banner" style="margin-top: 24rpx;" @click="showEmergencyDetails(1)">
|
||
<view class="emergency-header">
|
||
<view class="emergency-title">
|
||
<text>🚨 应急事件提醒</text>
|
||
<view class="emergency-count">{{ emergencyCount }}</view>
|
||
</view>
|
||
<text>👉</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 一般警告提醒 -->
|
||
<view class="warning-banner" @click="showEmergencyDetails(2)">
|
||
<view class="emergency-header">
|
||
<view class="emergency-title">
|
||
<text>⚠️ 日常问题</text>
|
||
<view class="emergency-count">{{ warningCount }}</view>
|
||
</view>
|
||
<text>👉</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 在岗人员 -->
|
||
<view class="onDutyPersonBox">
|
||
<view class="onDutyPersonBoxHeader">
|
||
<text class="title">{{ selectTab === 1 ? "👥 当前在岗人员" : selectTab === 2 ? "📋 请假人员列表" : selectTab === 3
|
||
? "👑 值班经理信息" : ""
|
||
}}</text>
|
||
<view class="tab-indicators">
|
||
<view class="tab-dot" :class="{ active: selectTab === 1 }"></view>
|
||
<view class="tab-dot" :class="{ active: selectTab === 2 }"></view>
|
||
<view class="tab-dot" :class="{ active: selectTab === 3 }"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 当前在岗人员 -->
|
||
<view class="onDutyPersonList" v-if="selectTab === 1">
|
||
<view class="onDutyPersonItem" v-for="(item, index) in onDutyPersonList" :key="index"
|
||
@click="viewStaffDetails(item)">
|
||
<view class="avatar">{{ item.name ? item.name.slice(0, 1) : "" }}</view>
|
||
<view class="staffInfo">
|
||
<view class="staffInfoLeft">
|
||
<view class="staffInfoTop">
|
||
<view class="staff-name">{{ item.name || "" }}</view>
|
||
<view class="staff-role">{{ item.post || "" }}</view>
|
||
</view>
|
||
<view class="staff-status">
|
||
<view class="status-badge status-online" v-if="item.status === 1">在岗</view>
|
||
<view class="status-badge status-absentee" v-if="item.status === 5">旷工</view>
|
||
<view class="status-badge status-beLate" v-if="item.status === 6">迟到</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="staffInfoRight" @click.stop="handleCallPhone(item.phone)">
|
||
<image class="phoneIcon" src="https://eshangtech.com/cyy_DIB/phoneIcon.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 请假人员 -->
|
||
<view class="EmployeesOnLeaveList" v-if="selectTab === 2">
|
||
<view class="EmployeesOnLeaveItem" v-for="(item, index) in EmployeesOnLeaveList" :key="index"
|
||
@click="viewStaffDetails(item)">
|
||
<view class="avatar">{{ item.name ? item.name.slice(0, 1) : "" }}</view>
|
||
<view class="staffInfo">
|
||
<view class="staffInfoLeft">
|
||
<view class="staffInfoTop">
|
||
<view class="staff-name">{{ item.name || "" }}</view>
|
||
<view class="staff-role">{{ item.post || "" }}</view>
|
||
</view>
|
||
<view class="staff-status">
|
||
<view class="status-badge status-rest" v-if="item.status === 2">休息</view>
|
||
<view class="status-badge status-adjust" v-if="item.status === 3">调休</view>
|
||
<view class="status-badge status-leave" v-if="item.status === 4">请假</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="staffInfoRight" @click.stop="handleCallPhone(item.phone)">
|
||
<image class="phoneIcon" src="https://eshangtech.com/cyy_DIB/phoneIcon.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 值班经理 -->
|
||
<view class="dutyManagerList" v-if="selectTab === 3">
|
||
<view class="dutyManagerItem" v-for="(item, index) in dutyManagerList" :key="index"
|
||
@click="viewStaffDetails(item)">
|
||
<view class="avatar manager-avatar">{{ item.name ? item.name.slice(0, 1) : "" }}</view>
|
||
<view class="staffInfoBox">
|
||
<view class="staffInfo">
|
||
<view class="staffInfoLeft">
|
||
<view class="staffInfoTop">
|
||
<view class="staff-name manager-name">{{ item.name || "" }}</view>
|
||
<view class="staff-role manager-role">👑{{ item.post || "" }}</view>
|
||
</view>
|
||
<view class="staff-status">
|
||
<view class="status-badge status-manager">值班中</view>
|
||
</view>
|
||
</view>
|
||
<view class="staffInfoRight" @click.stop="handleCallPhone(item.phone)">
|
||
<image class="phoneIcon" src="https://eshangtech.com/cyy_DIB/phoneIcon.png" />
|
||
</view>
|
||
</view>
|
||
<view class="staff-address">{{ item.address }}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 其他跳转链接 -->
|
||
<view class="otherJumpUrl">
|
||
<view class="jumpItem" v-for="(item, index) in jumpItemList" :key="index"
|
||
:style="{ marginBottom: index < 4 ? '24rpx' : '' }" @click="handleClickJump(item.value)">
|
||
<image class="jumpIcon" :src="item.url" />
|
||
<view class="jumpText">{{ item.label }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 会员详情 -->
|
||
<uni-popup ref="popup" border-radius="10px 10px 0 0" @change="handlePopupChange">
|
||
<view class="userPopupBox" v-if="userDetail">
|
||
<view class="userBoxTitle">人员详情</view>
|
||
<view class="userDetailBox">
|
||
<view class="userAvatar">
|
||
<image class="userAvatarIcon" v-if="userDetail.url" :src="userDetail.url" />
|
||
<view class="userAvatarBox">{{ userDetail.name ? userDetail.name.slice(0, 1) : "" }}</view>
|
||
</view>
|
||
<view class="userDetailRight">
|
||
<view class="userDetailTop">
|
||
<view class="userDetailName">{{ userDetail.name || "" }}</view>
|
||
<view class="userDetailStatus" v-if="userDetail.status" :style="{
|
||
background: userDetail.status === 1 ? '#27B25F' : '',
|
||
color: userDetail.status === 1 ? '#fff' : '',
|
||
}">{{ userDetail.status === 1 ? '在岗' :
|
||
"" }}</view>
|
||
</view>
|
||
<view class="userDetailPostBox">
|
||
<span class="userDetailLabel">岗位：</span>
|
||
<span class="userDetailValue">{{ userDetail.post || "" }}</span>
|
||
</view>
|
||
<view class="userDetailPhoneBox">
|
||
<span class="userDetailLabel">电话：</span>
|
||
<span class="userDetailValue">{{ userDetail.phone || "" }}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
|
||
<view class="userBoxTitle">当前出勤情况</view>
|
||
<view class="attendanceStatusBox">
|
||
<view class="attendanceStatusItem">
|
||
<view class="attendanceStatusLabel">当前排班信息：</view>
|
||
<view class="attendanceStatusValue">{{ userDetail.status === 1 ? '班' : userDetail.status === 2 ?
|
||
'休' : '' }}</view>
|
||
</view>
|
||
<view class="attendanceStatusItem">
|
||
<view class="attendanceStatusLabel">上班打卡地：</view>
|
||
<view class="attendanceStatusValue">{{ userDetail.dutyPlace || "" }}</view>
|
||
<!-- dutyPlace -->
|
||
</view>
|
||
<view class="attendanceStatusItem">
|
||
<view class="attendanceStatusLabel">上班打卡时间：</view>
|
||
<view class="attendanceStatusValue">{{ userDetail.dutyTime || "" }}</view>
|
||
<!-- dutyTime -->
|
||
</view>
|
||
<view class="attendanceStatusItem">
|
||
<view class="attendanceStatusLabel">迟到时长：</view>
|
||
<view class="attendanceStatusValue">{{ userDetail.toLateTime || "" }}</view>
|
||
<!-- toLateTime -->
|
||
</view>
|
||
<view class="attendanceStatusItem">
|
||
<view class="attendanceStatusLabel">下班打卡地：</view>
|
||
<view class="attendanceStatusValue">{{ userDetail.offWorkPlace || "" }}</view>
|
||
<!-- offWorkPlace -->
|
||
</view>
|
||
<view class="attendanceStatusItem">
|
||
<view class="attendanceStatusLabel">下班打卡时间：</view>
|
||
<view class="attendanceStatusValue">{{ userDetail.offWorkTime || "" }}</view>
|
||
<!-- offWorkTime -->
|
||
</view>
|
||
<view class="attendanceStatusItem">
|
||
<view class="attendanceStatusLabel">早退时长：</view>
|
||
<view class="attendanceStatusValue">{{ userDetail.earlyWorkTime || "" }}</view>
|
||
<!-- earlyWorkTime -->
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
|
||
|
||
<view class="userBoxTitle">考勤统计</view>
|
||
<view class="attendanceStatusBox">
|
||
<view class="attendanceStatusItem">
|
||
<view class="attendanceStatusLabel">当月排班天数：</view>
|
||
<view class="attendanceStatusValue">{{ userDetail.monthDay || "" }}</view>
|
||
<!-- monthDay -->
|
||
</view>
|
||
<view class="attendanceStatusItem">
|
||
<view class="attendanceStatusLabel">出勤天数：</view>
|
||
<view class="attendanceStatusValue">{{ userDetail.AttendanceDay || "" }}</view>
|
||
<!-- AttendanceDay -->
|
||
</view>
|
||
<view class="attendanceStatusItem">
|
||
<view class="attendanceStatusLabel">休息天数：</view>
|
||
<view class="attendanceStatusValue">{{ userDetail.leaveDay || "" }}</view>
|
||
<!-- leaveDay -->
|
||
</view>
|
||
<view class="attendanceStatusItem">
|
||
<view class="attendanceStatusLabel">迟到天数：</view>
|
||
<view class="attendanceStatusValue">{{ userDetail.beLateDay || "" }}</view>
|
||
<!-- beLateDay -->
|
||
</view>
|
||
<view class="attendanceStatusItem">
|
||
<view class="attendanceStatusLabel">早退天数：</view>
|
||
<view class="attendanceStatusValue">{{ userDetail.leaveEarlyDay || "" }}</view>
|
||
<!-- leaveEarlyDay -->
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
const nowDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD') // 有数据的最近日期
|
||
return {
|
||
menu: {},
|
||
serviceInfo: {},
|
||
selectDate: nowDay,// 选中的时间
|
||
info: {
|
||
startDate: "2025-01-01"
|
||
},
|
||
selectTab: 1,
|
||
onDutyPersonList: [
|
||
{
|
||
name: "曹鑫",
|
||
post: "三级驻站经理",
|
||
status: 1,
|
||
phone: "13987822022",
|
||
service: "达连坝停车区-下行",
|
||
dutyPlace: "", // 上班打卡地
|
||
dutyTime: "2025-08-14 07:26",// 上班打卡时间
|
||
toLateTime: "",// 迟到时长
|
||
offWorkPlace: "",// 下班打卡地
|
||
offWorkTime: "",// 下班打卡时间
|
||
earlyWorkTime: "",// 早退时长
|
||
monthDay: "23",// 当月排班天数
|
||
AttendanceDay: "10",// 出勤天数
|
||
leaveDay: "8",// 休息天数
|
||
beLateDay: "",// 迟到天数
|
||
leaveEarlyDay: "1",// 早退天数
|
||
},
|
||
{
|
||
name: "陈艳雄",
|
||
post: "安全管理岗",
|
||
status: 1,
|
||
phone: "18787834836",
|
||
service: "昆西片区管理部",
|
||
dutyPlace: "", // 上班打卡地
|
||
dutyTime: "",// 上班打卡时间
|
||
toLateTime: "",// 迟到时长
|
||
offWorkPlace: "",// 下班打卡地
|
||
offWorkTime: "",// 下班打卡时间
|
||
earlyWorkTime: "",// 早退时长
|
||
monthDay: "23",// 当月排班天数
|
||
AttendanceDay: "0",// 出勤天数
|
||
leaveDay: "8",// 休息天数
|
||
beLateDay: "",// 迟到天数
|
||
leaveEarlyDay: "",// 早退天数
|
||
},
|
||
{
|
||
name: "陈芝丽",
|
||
post: "三级驻站经理",
|
||
status: 1,
|
||
phone: "15887779180",
|
||
service: "猫街停车区-下行",
|
||
dutyPlace: "", // 上班打卡地
|
||
dutyTime: "2025-08-14 07:11",// 上班打卡时间
|
||
toLateTime: "",// 迟到时长
|
||
offWorkPlace: "",// 下班打卡地
|
||
offWorkTime: "",// 下班打卡时间
|
||
earlyWorkTime: "",// 早退时长
|
||
monthDay: "23",// 当月排班天数
|
||
AttendanceDay: "11",// 出勤天数
|
||
leaveDay: "8",// 休息天数
|
||
beLateDay: "",// 迟到天数
|
||
leaveEarlyDay: "1",// 早退天数
|
||
}
|
||
],// 在岗人员 1 在岗 2 休息 3 调休 4 请假 5 旷工 6 迟到
|
||
EmployeesOnLeaveList: [
|
||
{
|
||
name: "高金平",
|
||
post: "三级驻站经理",
|
||
status: 2,
|
||
phone: "17787888023",
|
||
service: "大姚服务区-下行",
|
||
dutyPlace: "", // 上班打卡地
|
||
dutyTime: "",// 上班打卡时间
|
||
toLateTime: "",// 迟到时长
|
||
offWorkPlace: "",// 下班打卡地
|
||
offWorkTime: "",// 下班打卡时间
|
||
earlyWorkTime: "",// 早退时长
|
||
monthDay: "23",// 当月排班天数
|
||
AttendanceDay: "9",// 出勤天数
|
||
leaveDay: "8",// 休息天数
|
||
beLateDay: "",// 迟到天数
|
||
leaveEarlyDay: "",// 早退天数
|
||
},
|
||
{
|
||
name: "雷自云",
|
||
post: "三级驻站经理",
|
||
status: 2,
|
||
phone: "15825167023",
|
||
service: "永仁停车区-下行",
|
||
dutyPlace: "", // 上班打卡地
|
||
dutyTime: "",// 上班打卡时间
|
||
toLateTime: "",// 迟到时长
|
||
offWorkPlace: "",// 下班打卡地
|
||
offWorkTime: "",// 下班打卡时间
|
||
earlyWorkTime: "",// 早退时长
|
||
monthDay: "23",// 当月排班天数
|
||
AttendanceDay: "8",// 出勤天数
|
||
leaveDay: "8",// 休息天数
|
||
beLateDay: "",// 迟到天数
|
||
leaveEarlyDay: "1",// 早退天数
|
||
},
|
||
{
|
||
name: "刘凯峰",
|
||
post: "一级驻站副经理",
|
||
status: 2,
|
||
phone: "15198787593",
|
||
service: "恐龙山服务区-上行",
|
||
dutyPlace: "", // 上班打卡地
|
||
dutyTime: "",// 上班打卡时间
|
||
toLateTime: "",// 迟到时长
|
||
offWorkPlace: "",// 下班打卡地
|
||
offWorkTime: "",// 下班打卡时间
|
||
earlyWorkTime: "",// 早退时长
|
||
monthDay: "23",// 当月排班天数
|
||
AttendanceDay: "9",// 出勤天数
|
||
leaveDay: "8",// 休息天数
|
||
beLateDay: "",// 迟到天数
|
||
leaveEarlyDay: "",// 早退天数
|
||
},
|
||
{
|
||
name: "宋永鑫",
|
||
post: "一级驻站副经理",
|
||
service: "读书铺服务区-上行",
|
||
status: 2,
|
||
phone: "13649668882",
|
||
dutyPlace: "", // 上班打卡地
|
||
dutyTime: "",// 上班打卡时间
|
||
toLateTime: "",// 迟到时长
|
||
offWorkPlace: "",// 下班打卡地
|
||
offWorkTime: "",// 下班打卡时间
|
||
earlyWorkTime: "",// 早退时长
|
||
monthDay: "23",// 当月排班天数
|
||
AttendanceDay: "13",// 出勤天数
|
||
leaveDay: "8",// 休息天数
|
||
beLateDay: "",// 迟到天数
|
||
leaveEarlyDay: "",// 早退天数
|
||
}
|
||
],// 请假人员列表
|
||
dutyManagerList: [
|
||
{ name: "王五", post: "经理", status: 1, phone: "6666", address: "G56杭瑞高速主干道昆明至滇西方向" },
|
||
],// 值班经理
|
||
jumpItemList: [
|
||
{ label: "特情事件", value: 1, url: "" },
|
||
{ label: "设施状态", value: 2, url: "" },
|
||
{ label: "考勤统计", value: 3, url: "" },
|
||
{ label: "请假管理", value: 4, url: "" },
|
||
{ label: "排班表", value: 5, url: "" },
|
||
{ label: "通知公告", value: 6, url: "" },
|
||
],
|
||
showPopup: false,
|
||
userDetail: null
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
let currentService = uni.getStorageSync('currentService')
|
||
this.serviceInfo = currentService
|
||
},
|
||
methods: {
|
||
open() {
|
||
this.$refs.calendar.open()
|
||
},
|
||
handlePopupChange(e) {
|
||
this.showPopup = e.show
|
||
console.log('e', e);
|
||
if (!e.show) {
|
||
this.userDetail = null
|
||
}
|
||
},
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
// 改变查询时间
|
||
handleChangeTime(e) {
|
||
console.log('e', e);
|
||
// this.selectDate = e.detail.value
|
||
this.selectDate = e.fulldate
|
||
},
|
||
// 切换tab
|
||
handleChangeTab(e) {
|
||
this.selectTab = e
|
||
},
|
||
// 打电话
|
||
handleCallPhone(phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
});
|
||
},
|
||
// 跳转应急事件页面
|
||
showEmergencyDetails(type) {
|
||
// type 1 应急事件 2 日常问题
|
||
this.$util.toNextRoute("navigateTo", `/pages/attendanceStatus/emergencyEvents?type=${type}`);
|
||
},
|
||
// 跳转其他页面
|
||
handleClickJump(value) {
|
||
if (value === 2) {
|
||
this.$util.toNextRoute("navigateTo", `/pages/attendanceStatus/serviceFacility`);
|
||
}
|
||
},
|
||
// 会员详情信息
|
||
viewStaffDetails(obj) {
|
||
this.$refs.popup.open('center')
|
||
this.userDetail = obj
|
||
}
|
||
},
|
||
|
||
|
||
onUnload() {
|
||
|
||
}
|
||
};
|
||
</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-image: url("https://eshangtech.com/minTestImg/pageBg.png");
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
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: 14px;
|
||
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;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
.dateBox {
|
||
width: 100vw;
|
||
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);
|
||
|
||
.date-text {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
.selectDateCalendar {
|
||
/deep/ .uni-calendar-item__weeks-box-item {
|
||
width: calc(100% / 7);
|
||
}
|
||
|
||
/deep/ .uni-calendar-item--checked {
|
||
background-color: #3CC071;
|
||
}
|
||
|
||
/deep/ .uni-calendar-item--isDay {
|
||
background-color: #3CC071;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/deep/ .uni-calendar-item--isDay-text {
|
||
white-space: nowrap;
|
||
color: #000;
|
||
}
|
||
|
||
/deep/ .uni-calendar__backtoday {
|
||
background-color: #3CC071;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.personTabBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 50rpx;
|
||
margin-top: 24rpx;
|
||
|
||
.personItem {
|
||
background: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 24rpx;
|
||
text-align: center;
|
||
box-shadow: @shadow;
|
||
|
||
.personValue {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: @primary;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.personLabel {
|
||
font-size: 24rpx;
|
||
color: @muted;
|
||
}
|
||
}
|
||
|
||
.personItemSelect {
|
||
background: linear-gradient(135deg, @primary, @primary2);
|
||
color: #fff;
|
||
|
||
.personValue {
|
||
color: #fff;
|
||
}
|
||
|
||
.personLabel {
|
||
color: rgba(255, 255, 255, .9);
|
||
}
|
||
}
|
||
}
|
||
|
||
.emergency-banner {
|
||
background: linear-gradient(135deg, @danger, #ff3838);
|
||
color: #fff;
|
||
padding: 20rpx 30rpx;
|
||
margin: 0 30rpx 30rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, .3);
|
||
border-left: 8rpx solid #ff1744;
|
||
|
||
.emergency-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10rpx;
|
||
|
||
.emergency-title {
|
||
font-weight: 700;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.emergency-count {
|
||
background: rgba(255, 255, 255, .3);
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 24rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.emergency-preview {
|
||
font-size: 24rpx;
|
||
opacity: .9;
|
||
}
|
||
}
|
||
|
||
.warning-banner {
|
||
background: linear-gradient(135deg, @warn, #ff8c00);
|
||
color: #fff;
|
||
padding: 20rpx 30rpx;
|
||
margin: 0 30rpx 30rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(255, 159, 67, .3);
|
||
border-left: 8rpx solid #ff8c00;
|
||
|
||
.emergency-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.emergency-title {
|
||
font-weight: 700;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.emergency-count {
|
||
background: rgba(255, 255, 255, .3);
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 24rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.emergency-preview {
|
||
font-size: 24rpx;
|
||
opacity: .9;
|
||
}
|
||
}
|
||
|
||
.onDutyPersonBox {
|
||
width: calc(100% - 64rpx);
|
||
margin: 32rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: @shadow;
|
||
|
||
.onDutyPersonBoxHeader {
|
||
background: @bg;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #e9ecef;
|
||
font-weight: 700;
|
||
font-size: 28rpx;
|
||
color: #2c3e50;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.tab-indicators {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
|
||
.tab-dot {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
border-radius: 50%;
|
||
background: #ddd;
|
||
|
||
&.active {
|
||
background: @primary;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.onDutyPersonList {
|
||
.onDutyPersonItem {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #f1f3f4;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.avatar {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(270deg, #27B25F 0%, #4CCC7F 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
margin-right: 30rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.staffInfo {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.staffInfoLeft {
|
||
flex: 1;
|
||
|
||
.staffInfoTop {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
|
||
.staff-name {
|
||
font-weight: 600;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.staff-role {
|
||
color: @muted;
|
||
font-size: 24rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.staff-status {
|
||
font-size: 24rpx;
|
||
|
||
.status-badge {
|
||
display: inline-block;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
|
||
&.status-online {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
}
|
||
|
||
&.status-absentee {
|
||
background: #ff0000;
|
||
color: #fff;
|
||
}
|
||
|
||
&.status-beLate {
|
||
background: #f8d7da;
|
||
color: #721c24;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.staffInfoRight {
|
||
width: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.phoneIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-left: 8rpx;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.EmployeesOnLeaveList {
|
||
.EmployeesOnLeaveItem {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #f1f3f4;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.avatar {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(270deg, #27B25F 0%, #4CCC7F 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
margin-right: 30rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.staffInfo {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.staffInfoLeft {
|
||
flex: 1;
|
||
|
||
.staffInfoTop {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8rpx;
|
||
|
||
.staff-name {
|
||
font-weight: 600;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.staff-role {
|
||
color: @muted;
|
||
font-size: 24rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.staff-status {
|
||
font-size: 24rpx;
|
||
|
||
.status-badge {
|
||
display: inline-block;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
|
||
&.status-rest {
|
||
background: #F6F6F6;
|
||
color: #9FA6A3;
|
||
}
|
||
|
||
&.status-adjust {
|
||
background: #fff3cd;
|
||
color: #856404;
|
||
}
|
||
|
||
&.status-leave {
|
||
background: #FF8B3F;
|
||
color: #fff;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.staffInfoRight {
|
||
width: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.phoneIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-left: 8rpx;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.dutyManagerList {
|
||
.dutyManagerItem {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #f1f3f4;
|
||
background: #E7F8EE;
|
||
border: 4rpx solid #27B25F;
|
||
border-radius: 24rpx;
|
||
margin: 20rpx;
|
||
box-shadow: 0 8rpx 24rpx #E7F8EE;
|
||
|
||
.avatar {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(270deg, #27B25F 0%, #4CCC7F 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
margin-right: 30rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.manager-avatar {
|
||
background: linear-gradient(135deg, #27B25F, #4CCC7F);
|
||
border: 6rpx solid #27B25F;
|
||
box-shadow: 0 4rpx 16rpx #E7F8EE;
|
||
}
|
||
|
||
.manager-name {
|
||
color: #27B25F;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.manager-role {
|
||
color: #ff9800;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.manager-actions {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
|
||
.contact-btn,
|
||
.locate-btn {
|
||
background: linear-gradient(135deg, #ff9800, #f57c00);
|
||
border: none;
|
||
color: #fff;
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
.staffInfoBox {
|
||
flex: 1;
|
||
|
||
.staffInfo {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 6rpx;
|
||
|
||
.staffInfoLeft {
|
||
flex: 1;
|
||
|
||
.staffInfoTop {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 6rpx;
|
||
|
||
.staff-name {
|
||
font-weight: 700;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.staff-role {
|
||
color: @muted;
|
||
font-size: 26rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.staff-status {
|
||
font-size: 24rpx;
|
||
margin-bottom: 6rpx;
|
||
|
||
.status-badge {
|
||
display: inline-block;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
|
||
&.status-online {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
}
|
||
|
||
&.status-break {
|
||
background: #fff3cd;
|
||
color: #856404;
|
||
}
|
||
|
||
&.status-offline {
|
||
background: #f8d7da;
|
||
color: #721c24;
|
||
}
|
||
|
||
&.status-manager {
|
||
background: linear-gradient(135deg, #27B25F, #4CCC7F);
|
||
color: #fff;
|
||
border: 1rpx solid #27B25F;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.staffInfoRight {
|
||
width: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.phoneIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-left: 8rpx;
|
||
background-color: #E7F8EE;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.staff-address {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716F69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.otherJumpUrl {
|
||
width: calc(100% - 64rpx);
|
||
margin: 0 32rpx;
|
||
background-color: #fff;
|
||
box-shadow: @shadow;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.jumpItem {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.jumpIcon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.jumpText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #716F69;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
.userPopupBox {
|
||
width: 90vw;
|
||
height: 80vh;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
overflow-y: auto;
|
||
|
||
.userBoxTitle {
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.userDetailBox {
|
||
width: 100%;
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.userAvatar {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
margin-right: 20rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.userAvatarIcon {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.userAvatarBox {
|
||
width: 70%;
|
||
height: 70%;
|
||
border-radius: 50%;
|
||
background: linear-gradient(270deg, #27B25F 0%, #4CCC7F 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
margin-right: 30rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.userDetailRight {
|
||
flex: 1;
|
||
|
||
.userDetailTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.userDetailName {
|
||
display: inline-block;
|
||
max-width: 70%;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.userDetailStatus {
|
||
display: inline-block;
|
||
padding: 0 8rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.userDetailPostBox,
|
||
.userDetailPhoneBox {
|
||
.userDetailLabel {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.userDetailValue {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.line {
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background-color: #e4e3e3;
|
||
margin: 16rpx 0;
|
||
}
|
||
|
||
.attendanceStatusBox {
|
||
width: 100%;
|
||
margin-top: 24rpx;
|
||
|
||
.attendanceStatusItem {
|
||
width: 100%;
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.attendanceStatusLabel {
|
||
width: 200rpx;
|
||
text-align: left;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.attendanceStatusValue {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 通用 */
|
||
.muted {
|
||
color: @muted;
|
||
}
|
||
|
||
.ml8 {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.h1 {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.pad15 {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.m15 {
|
||
margin: 30rpx;
|
||
}
|
||
|
||
.p15 {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.noMargin {
|
||
margin: 0;
|
||
}
|
||
|
||
.noPad {
|
||
padding: 0;
|
||
}
|
||
</style>
|