打卡项目优化

pagesClockIn/punchTime/punchTime.vue

@@ -139,8 +139,8 @@
 		min-width: 100vw;
 		min-height: 100vh;
 		background-color: #F2F2F2;
-		
-		.placeholder{
+
+		.placeholder {
 			height: 20rpx;
 		}
 

pagesClockIn/setPunchTime/setPunchTime.vue

@@ -151,7 +151,7 @@
 				}
 				uni.showModal({
 					title: '提示',
-					content: '确定保存吗？',
+					content: `确定保存吗`,
 					success: (res) => {
 						if (res.confirm) {
 							uni.showToast({
@@ -223,7 +223,6 @@
 					item.endTime = e.detail.value
 				}
 				let timeFlag = this.compareTime(item.beginTime, item.endTime)
-				// console.log(timeFlag);
 				if (!timeFlag) {
 					uni.showModal({
 						content: "打卡结束时间不能小于或等于开始时间",
@@ -273,10 +272,11 @@
 			},
 			// 格式化时间
 			formatTime(val) {
-				let tem = '2021-11-22 ' + val + ':00'
+				let tem = '2023/01/12 ' + val + ':00'
 				// console.log(tem);
 				let date = new Date(tem);
-				let time = date.getTime();
+				// let time = date.getTime();
+				let time = Date.parse(date);
 				return time
 			},
 			// 格式化时间

pagesClockIn/stat/stat.vue

@@ -1,149 +1,150 @@
 <template>
-	<view class="container">
-		<view class="placeholder"></view>
-		<!-- 顶部分段器区域 -->
-		<view class="control" v-if="flag">
-			<uni-segmented-control :current="current" :values="items" styleType="text" @clickItem="onClickItem"
-				activeColor="#0082FC"></uni-segmented-control>
-		</view>
-		<!-- 头部月份区域 -->
-		<view class="header">
-			<view class="title">
-				<view class="month">
-					{{month}}月汇总
-				</view>
-				<view class="right" @click="goToDetail">
-					<img src="../static/imgs/right.png" alt="">
-				</view>
+	<view>
+		<view class="container">
+			<view class="placeholder"></view>
+			<!-- 顶部分段器区域 -->
+			<view class="control" v-if="flag">
+				<uni-segmented-control :current="current" :values="items" styleType="text" @clickItem="onClickItem"
+					activeColor="#0082FC"></uni-segmented-control>
 			</view>
-			<view class="state">
-				<view class="err">
-					<view class="number">
-						{{fail_count}}
+			<!-- 头部月份区域 -->
+			<view class="header">
+				<view class="title">
+					<view class="month">
+						{{month}}月汇总
 					</view>
-					<view class="mes">
-						异常次数（次）
+					<view class="right" @click="goToDetail">
+						<img src="../static/imgs/right.png" alt="">
 					</view>
 				</view>
-				<view class="success">
-					<view class="number">
-						{{success_count}}
+				<view class="state">
+					<view class="err">
+						<view class="number">
+							{{fail_count}}
+						</view>
+						<view class="mes">
+							异常次数（次）
+						</view>
 					</view>
-					<view class="mes">
-						打卡成功（次）
+					<view class="success">
+						<view class="number">
+							{{success_count}}
+						</view>
+						<view class="mes">
+							打卡成功（次）
+						</view>
 					</view>
 				</view>
 			</view>
-		</view>
-
-		<!-- 日历区域 -->
-		<view class="calendar">
-			<view class="calendar_title">
-				每日记录
-				<span>（{{month}}月）</span>
-			</view>
 
-			<view class="calendar_body">
-				<uni-calendar :showMonth="false" @change="change" :selected="selectList" />
-			</view>
-
-			<view class="calendar_foot" v-if="current==1">
-
-				<!-- 每一条记录区域 -->
-				<view class="foot_item" v-for="(item,index) in list2" :key="index">
-					<view>
-						规则：{{item.ruleName}} {{item.timeRange}}
-					</view>
-					<view class="box">
-						<view class="circular" v-if="item.status==4"></view>
-						<view class="circular color" v-else></view>
-						<view v-if="item.status==1">未开始</view>
-						<view v-if="item.status==2">已开始</view>
-						<view v-if="item.status==3">已超时</view>
-						<view v-if="item.status==4">已打卡</view>
-						<span v-if="item.status==4">{{format_time(item.updateTime)}}</span>
-					</view>
+			<!-- 日历区域 -->
+			<view class="calendar">
+				<view class="calendar_title">
+					每日记录
+					<span>（{{month}}月）</span>
 				</view>
-			</view>
 
-			<!-- 环形图区域 -->
-			<view class="progress" v-if="current==0">
-				<view class="chart">
-					<progressBar v-if="showBar" :progress_txt="progress_txt" :progress_total="progress_total" />
+				<view class="calendar_body">
+					<uni-calendar :showMonth="false" @change="change" :selected="selectList" />
 				</view>
 
-				<view class="look" @click="handleLookDetail">
-					<view class="info">
-						查看明细
+				<view class="calendar_foot" v-if="current==1">
+
+					<!-- 每一条记录区域 -->
+					<view class="foot_item" v-for="(item,index) in list2" :key="index">
+						<view>
+							规则：{{item.ruleName}} {{item.timeRange}}
+						</view>
+						<view class="box">
+							<view class="circular" v-if="item.status==4"></view>
+							<view class="circular color" v-else></view>
+							<view v-if="item.status==1">未开始</view>
+							<view v-if="item.status==2">已开始</view>
+							<view v-if="item.status==3">已超时</view>
+							<view v-if="item.status==4">已打卡</view>
+							<span v-if="item.status==4">{{format_time(item.updateTime)}}</span>
+						</view>
 					</view>
-					<img src="../static/imgs/right.png">
 				</view>
-			</view>
-		</view>
 
-		<!-- 异常人员名单区域 -->
-		<view class="errPeople" v-if="current==0">
-			<!-- 标题区域 -->
-			<view class="e_header">
-				<view class="left">
-					异常人员名单
-				</view>
-				<view class="right">
-					<view class="icon" @click="handleInform">
-						<img src="../static/imgs/notice.png">
+				<!-- 环形图区域 -->
+				<view class="progress" v-if="current==0">
+					<view class="chart">
+						<progressBar v-if="showBar" :progress_txt="progress_txt" :progress_total="progress_total" />
 					</view>
-					<view class="info" @click="handleInform">
-						通知
+
+					<view class="look" @click="handleLookDetail">
+						<view class="info">
+							查看明细
+						</view>
+						<img src="../static/imgs/right.png">
 					</view>
 				</view>
 			</view>
 
-			<!-- 选择时间区域 -->
-			<view class="e_calendar">
-				<!-- 双左箭头区域 -->
-				<view class="double" @click="handleDoubleLeft">
-					<img src="../static/imgs/double_left.png">
-				</view>
-				<!-- 左箭头区域区域 -->
-				<view class="single" @click="handleLeft">
-					<img src="../static/imgs/left.png">
-				</view>
-				<!-- 时间区域 -->
-				<view class="time">
-					{{year}}-{{comMonth}}
-				</view>
-				<!-- 双右箭头区域 -->
-				<view class="single2" @click="handleRight">
-					<img src="../static/imgs/right2.png">
-				</view>
-				<!-- 右箭头区域 -->
-				<view class="double" @click="handleDoubleRight">
-					<img src="../static/imgs/double_right.png">
+			<!-- 异常人员名单区域 -->
+			<view class="errPeople" v-if="current==0">
+				<!-- 标题区域 -->
+				<view class="e_header">
+					<view class="left">
+						异常人员名单
+					</view>
+					<view class="right">
+						<view class="icon" @click="handleInform">
+							<img src="../static/imgs/notice.png">
+						</view>
+						<view class="info" @click="handleInform">
+							通知
+						</view>
+					</view>
 				</view>
-			</view>
 
-			<view class="e_list" v-if="errList.length">
-				<view class="e_box" v-for="item in errList" :key="item.userId">
-					<view class="e_img">
-						<img :src="item.headImage||'../static/imgs/headImage.png'">
+				<!-- 选择时间区域 -->
+				<view class="e_calendar">
+					<!-- 双左箭头区域 -->
+					<view class="double" @click="handleDoubleLeft">
+						<img src="../static/imgs/double_left.png">
 					</view>
-					<view class="e_name">
-						{{item.name}}
+					<!-- 左箭头区域区域 -->
+					<view class="single" @click="handleLeft">
+						<img src="../static/imgs/left.png">
 					</view>
-					<view class="e_msg">
-						未打卡{{item.times}}次
+					<!-- 时间区域 -->
+					<view class="time">
+						{{year}}-{{comMonth}}
+					</view>
+					<!-- 双右箭头区域 -->
+					<view class="single2" @click="handleRight">
+						<img src="../static/imgs/right2.png">
+					</view>
+					<!-- 右箭头区域 -->
+					<view class="double" @click="handleDoubleRight">
+						<img src="../static/imgs/double_right.png">
+					</view>
+				</view>
+
+				<view class="e_list" v-if="errList.length">
+					<view class="e_box" v-for="item in errList" :key="item.userId">
+						<view class="e_img">
+							<img :src="item.headImage||'../static/imgs/headImage.png'">
+						</view>
+						<view class="e_name">
+							{{item.name}}
+						</view>
+						<view class="e_msg">
+							未打卡{{item.times}}次
+						</view>
 					</view>
 				</view>
-			</view>
 
-			<view class="e_list2" v-else>
-				<img src="../static/imgs/nodata.png">
-				<view class="info">
-					暂无数据
+				<view class="e_list2" v-else>
+					<img src="../static/imgs/nodata.png">
+					<view class="info">
+						暂无数据
+					</view>
 				</view>
 			</view>
 		</view>
-
 		<!-- 底部导航栏区域 -->
 		<cover-view class="tab_bar">
 			<cover-view class="tab_box" @click="handleGoPage('/pagesClockIn/home/home')">
@@ -182,7 +183,6 @@
 				</cover-view>
 			</cover-view>
 		</cover-view>
-
 	</view>
 </template>
 
@@ -239,10 +239,6 @@
 				page: 1,
 				// 异常人员名单总条数
 				total: 0,
-				// 个人考勤规则列表当前页
-				// page_my: 1,
-				// 个人考勤规则列表总条数
-				// total_my: 0,
 				// 环形图显示隐藏控制
 				showBar: false,
 				// 当前页面的路由地址
@@ -592,8 +588,9 @@
 
 <style lang="scss" scoped>
 	.container {
-		min-width: 100vw;
-		min-height: 100vh;
+		width: 100vw;
+		height: calc(100vh - 128rpx);
+		// overflow-y: auto;
 		background-color: #F2F2F2;
 
 		.placeholder {
@@ -704,7 +701,7 @@
 
 			.calendar_foot {
 				padding: 0 30rpx;
-				padding-bottom: 180rpx;
+				padding-bottom: 150rpx;
 
 				.foot_item {
 					box-sizing: border-box;
@@ -778,7 +775,6 @@
 		.errPeople {
 			margin: 0 auto;
 			margin-top: 32rpx;
-			padding-bottom: 180rpx;
 			width: 710rpx;
 			border-radius: 7rpx;
 			background-color: #fff;
@@ -876,6 +872,7 @@
 				align-items: center;
 				margin-top: 20rpx;
 				padding: 30rpx;
+				padding-bottom: 150rpx;
 				width: 630rpx;
 
 				.e_box {
@@ -930,39 +927,40 @@
 				}
 			}
 		}
+	}
 
-		.tab_bar {
-			z-index: 9999;
-			position: fixed;
-			left: 0;
-			bottom: 0;
+	.tab_bar {
+		z-index: 9999;
+		position: fixed;
+		left: 0;
+		// right: 0;
+		bottom: 0;
+		display: flex;
+		width: 750rpx;
+		height: 128rpx;
+		border-top: 1rpx solid #CCC;
+		background-color: #fff;
+
+		.tab_box {
+			flex: 1;
 			display: flex;
-			width: 750rpx;
-			height: 128rpx;
-			border-top: 1rpx solid #CCC;
-			background-color: #fff;
-
-			.tab_box {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				align-items: center;
-
-				.tab_img {
-					width: 54rpx;
-					height: 48rpx;
-					margin-bottom: 10rpx;
-				}
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+
+			.tab_img {
+				width: 54rpx;
+				height: 48rpx;
+				margin-bottom: 10rpx;
+			}
 
-				.tab_title {
-					font-size: 20rpx;
-				}
+			.tab_title {
+				font-size: 20rpx;
+			}
 
-				.tab_title_active {
-					font-size: 20rpx;
-					color: #0082FC;
-				}
+			.tab_title_active {
+				font-size: 20rpx;
+				color: #0082FC;
 			}
 		}
 	}