Explorar el Código

css(message,checkIn,clockIn):修改样式

HMY hace 1 año
padre
commit
e44c71adf3

+ 2 - 2
components/ygoa/messageList.vue

@@ -5,7 +5,7 @@
 				<template v-slot:title>
 					<uni-section :title="title" type="line" titleFontSize="1.3rem">
 						<template v-slot:right>
-							<uni-badge :text="unReadNum" style="margin-right: 6rem;" v-if="unReadNum!==undefined&&unReadNum>0"></uni-badge>
+							<uni-badge :text="unReadNum" v-if="unReadNum!==undefined&&unReadNum>0"></uni-badge>
 							<button @click.stop="clickReadButton" class="read_button" v-if="unReadNum!==undefined" :disabled="unReadNum===0?true:false">一键阅读</button>
 						</template>
 					</uni-section>
@@ -211,7 +211,7 @@ defineExpose({
 	.read_button {
 		position: absolute;
 		top: 12px;
-		right: 10px;
+		right: 38px;
 		height: 28px;
 		line-height: 28px;
 		font-size: 14px;

+ 6 - 1
pages/message/index.vue

@@ -7,7 +7,7 @@
 				<template v-slot:title>
 					<uni-section title="待办" type="line" titleFontSize="1.3rem">
 						<template v-slot:right>
-							<uni-badge :text="unProcessNum"
+							<uni-badge :text="unProcessNum" class="unReadBadge"
 								v-if="unProcessNum > 0"></uni-badge>
 						</template>
 					</uni-section>
@@ -319,4 +319,9 @@ function setAllMsgRead() {
 		bottom: 100px;
 	}
 }
+.uni-badge {
+    height: 1.5rem !important;
+    line-height: 1.375rem !important;
+    font-size: 1.125rem !important;
+}
 </style>

+ 98 - 103
pages/mine/checkIn/checkIn.vue

@@ -44,13 +44,12 @@
 			<view class="divider"></view>
 
 			<!-- 打卡记录 -->
-			<view class="container">
+			<!-- <view class="container">
 				<view class="header">
 					<text class="clockRecordTitle">打卡记录</text>
 				</view>
 				<view class="content" style="height: 41vh;">
-					<z-paging :fixed="false" :default-page-size="pSize" default-page-no="1" @query="queryData"
-						ref="paging">
+					<z-paging :fixed="false" :default-page-size="pSize" default-page-no="1" @query="queryData" ref="paging">
 						<view class="clockRecord" v-for="clockRecord in clockRecords" :key="clockRecord.date">
 							<text class="date">{{ clockRecord.date }}</text>
 							<view class="shifts">
@@ -66,17 +65,17 @@
 						</view>
 					</z-paging>
 				</view>
-			</view>
-			
+			</view> -->
+
 			<!-- 日历板块 -->
-			<!-- <template>
+			<template>
 				<view class="calendar-content" >
 					<view>
-						<uni-calendar class="uni-calendar--hook" :selected="selected" :showMonth="true" @change="change"
+						<uni-calendar class="uni-calendar--hook" :selected="calenderData" :showMonth="true" @change="change"
 							@monthSwitch="monthSwitch" />
 					</view>
 				</view>
-			</template> -->		
+			</template>
 		</view>
 
 
@@ -159,63 +158,19 @@
 		endTime: '', // 晚签到时间
 	})
 
-	//日历表数据
-	// const showCalendar = ref(true)
-	// const selected = ref([{
-	// 	date: getDate(new Date(), -3).fullDate,
-	// 	info: '打卡'
-	// },
-	// {
-	// 	date: getDate(new Date(), -2).fullDate,
-	// 	info: '签到',
-	// 	data: {
-	// 		custom: '自定义信息',
-	// 		name: '自定义消息头'
-	// 	}
-	// },
-	// {
-	// 	date: '2024-12-09',
-	// 	info: '已打卡'
-	// }
-	// ])
-
-
-	// function getDate(date, AddDayCount = 0) {
-	// 	if (!date) {
-	// 		date = new Date()
-	// 	}
-	// 	if (typeof date !== 'object') {
-	// 		date = date.replace(/-/g, '/')
-	// 	}
-	// 	const dd = new Date(date)
-
-	// 	dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
-
-	// 	const y = dd.getFullYear()
-	// 	const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0
-	// 	const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号,不足10补0
-	// 	return {
-	// 		fullDate: y + '-' + m + '-' + d,
-	// 		year: y,
-	// 		month: m,
-	// 		date: d,
-	// 		day: dd.getDay()
-	// 	}
-	// }
+	
+
 
 	// 控制今日签到信息和图表显示的状态
 	const todayInfoShow = ref(true) // 今日签到信息是否显示
 	const chartShow = ref(false) // 图表是否显示
-
 	// 图表类型的响应式引用
 	const chartsType = ref('')
-
 	// 图表要填充的数据
 	const chartData = ref({})
-
 	// 图表配置选项
 	const opts = ref({
-		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+		color: ["#EE6666", "#FAC858", "#FC8452", "#73C0DE", "#3CA272", "#1890FF", "#91CB74", "#9A60B4",
 			"#ea7ccc"
 		], // 设定图表颜色
 		padding: [15, 15, 0, 5],
@@ -292,19 +247,59 @@
 				const time2 = attList.filter(item => item.att_type_id === '2').pop();
 				if (time1 !== undefined) {
 					todayData.startTime = time1.att_time.split(' ')[1];
-					// todayData.status = '早签完成'
 				}
 				if (time2 !== undefined) {
 					todayData.endTime = time2.att_time.split(' ')[1];
-					// todayData.status = '晚签完成'
 				}
 			}
 		})
 	}
+//打卡历史记录(日历版)
+//日历表数据
+	const calenderData = ref([{
+		date: '2024-12-07',
+		info: '打卡'
+	},
+	{
+		date: '2024-12-08',
+		info: '签到',
+		data: {
+			custom: '自定义信息',
+			name: '自定义消息头'
+		}
+	}
+	])
+
+	// 初始化日历数据
+	function initCalenderData(){
+		const params = {
+			type: 2, //设置时间区间
+			universalid: userId,
+			ks_att_time: todayData.day.slice(0, 8)+'01',
+			js_att_time: todayData.day,
+			pSize: 31,
+			p: 1
+		}
+		getMyQDQtAttendance(params).then(({ returnParams }) => {
+			
+		})
+	}
+	
+	//传入年份月份,返回此月天数
+	function getDaysInMonth(year, month) {  
+	  const date = new Date(year, month - 1, 1); 
+	  // 将日期设置为下一个月的第0天,即当前月的最后一天
+	  date.setMonth(date.getMonth() + 1);
+	  date.setDate(0);
+	  // 返回当前月的最后一天的日期,即该月的天数
+	  return date.getDate();
+	}
+
 
+
+//打卡历史记录(下拉刷新版)
 	const paging = ref(null)
 	const pSize = ref(5)
-
 	function complete(list, total, pageNo) {
 		if (pageNo == 1) {
 			paging.value.complete(list);
@@ -319,9 +314,7 @@
 	}
 	//日考勤历史记录
 	const clockRecords = ref([])
-
 	const totalPage = ref(0)
-	
 	//获取日考勤历史(下拉刷新)
 	function getDayAttHistory() {
 		const params = {
@@ -381,21 +374,19 @@
 					evening: item.time.split(',')[item.type.split(',').indexOf("2")],
 				}
 			});
-			// clockRecords.value.push(...list);
-			// complete(list,returnParams.total,pageNo)
 			if (pageNo <= totalPage.value) {
 				clockRecords.value.push(...list);
 			}
 			complete(list, returnParams.total, pageNo)
-
 		})
 	}
 
+
+
 	// 时间范围切换事件
 	function onTimeRangeChange(event) {
 		const selectedIndex = event.detail.value;
 		selectedTimeRange.value = timeRanges.value[selectedIndex]; // 设置选择的时间范围(日周月)
-		// fetchAttendanceData(); // 获取考勤数据
 		// 根据选择的时间范围更新展示内容
 		switch (selectedTimeRange.value) {
 			case '日':
@@ -410,7 +401,7 @@
 					updateChart(message);
 				})
 					.catch(error => {
-						console.error(error); // 如果失败,打印错误消息
+						console.error(error);
 					});
 				break;
 			case '月':
@@ -421,7 +412,7 @@
 					updateChart(message);
 				})
 					.catch(error => {
-						console.error(error); // 如果失败,打印错误消息
+						console.error(error);
 					});
 				break;
 		}
@@ -463,35 +454,36 @@
 				const myWeekAttData = res.returnParams;
 				const mockData = {
 					series: [{
-						data: [{
-							"name": "出勤",
-							"value": myWeekAttData.type0,
-							"labelText": "出勤:" + myWeekAttData.type0 + "次"
-						},
-						{
-							"name": "外出",
-							"value": myWeekAttData.type1
-						},
-						{
-							"name": "公休",
-							"value": myWeekAttData.type2
-						},
-						{
-							"name": "未排班",
-							"value": myWeekAttData.type3,
-						},
-						{
-							"name": "迟到",
-							"value": myWeekAttData.type4
-						},
-						{
-							"name": "早退",
-							"value": myWeekAttData.type5
-						},
-						{
-							"name": "缺勤",
-							"value": myWeekAttData.type6
-						}
+						data: [
+							{
+								"name": "缺勤",
+								"value": myWeekAttData.type6
+							},
+							{
+								"name": "迟到",
+								"value": myWeekAttData.type4
+							},
+							{
+								"name": "早退",
+								"value": myWeekAttData.type5
+							},
+							{
+								"name": "出勤",
+								"value": myWeekAttData.type0,
+								"labelText": "出勤:" + myWeekAttData.type0 + "次"
+							},
+							{
+								"name": "外出",
+								"value": myWeekAttData.type1
+							},
+							{
+								"name": "公休",
+								"value": myWeekAttData.type2
+							},
+							{
+								"name": "未排班",
+								"value": myWeekAttData.type3,
+							}
 						]
 					}],
 
@@ -538,9 +530,9 @@
 					// }
 					console.log('res.returnParams', res.returnParams);
 
-					data1.push(res.returnParams.type0);
-					data2.push(res.returnParams.type1);
-					data3.push(res.returnParams.type4);
+					data1.push(res.returnParams.type6);
+					data2.push(res.returnParams.type4);
+					data3.push(res.returnParams.type5);
 				});
 				dataFetchPromises.push(fetchPromise);
 			}
@@ -564,13 +556,13 @@
 				const mockData = {
 					categories: ["第1周", "第2周", "第3周", "第4周"],
 					series: [{
-						name: "勤",
+						name: "勤",
 						data: data1
 					}, {
-						name: "出差",
+						name: "迟到",
 						data: data2
 					}, {
-						name: "迟到",
+						name: "早退",
 						data: data3
 					}]
 				};
@@ -601,6 +593,8 @@
 	function updateChart(res) {
 		chartData.value = JSON.parse(JSON.stringify(res)); // 更新图表数据
 	}
+	
+	
 </script>
 
 
@@ -617,7 +611,8 @@
 	.attendance-page {
 		padding: 20px;
 		background-color: #f9f9f9;
-		.calendar-content{
+
+		.calendar-content {
 			margin: -20px;
 			margin-top: 20px;
 		}
@@ -714,7 +709,7 @@
 	.todayCheckIn {
 		background-color: #ffffff;
 		padding: 20px;
-		margin: auto -20px;//抵消父级padding
+		margin: auto -20px; //抵消父级padding
 		box-sizing: border-box;
 		border-radius: 10px;
 		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

+ 2 - 5
pages/mine/clockIn/clockIn.vue

@@ -8,7 +8,7 @@
 		</view>
 		<!-- 打卡记录 -->
 		<view class="record">
-			<view class="record-item" v-if="nowTime <= '12:00:00' || signName == '上班签到'">
+			<view class="record-item" v-if="nowTime !='' && nowTime <= '12:00:00' || signName == '上班签到'">
 				<text class="ygoa-icon icon-goToWork"></text>
 				<text class="title">上班</text>
 				<text class="time">{{ signInTime || '未打卡' }}</text>
@@ -95,6 +95,7 @@ const weekArr = reactive(['星期日', '星期一', '星期二', '星期三', '
 
 // 初始化日期
 function dateInit() {
+	showNowTime();
 	const nowDate = new Date();
 	const year = nowDate.getFullYear(); // 获取年份
 	const month = nowDate.getMonth() + 1; // 获取月份
@@ -105,7 +106,6 @@ function dateInit() {
 	currentDate.value = `${year}-${formattedMonth}-${formattedDay}`; // 设置当前日期
 	const dayOfWeek = nowDate.getDay(); // 获取当前星期
 	currentDay.value = weekArr[dayOfWeek]; // 设置当前星期
-	showNowTime();
 	getTodayAtt();
 }
 
@@ -178,7 +178,6 @@ function signIn() {
 		$modal.msg('不在签到时间8:30--9:30内,请前往补卡')
 		return;
 	}
-	// attType.value=1;
 	const signIn = 1;
 	getAddress().then(() => {
 		clockIn(signIn);
@@ -203,8 +202,6 @@ function signOut() {
 			clockIn(signOut);
 		});
 	}
-
-
 };
 
 //获取当前时间