门户网站系统业务流程图,自己做的产品在哪个网站上可从卖,网站建设比较好,可以做ppt的网站文章目录 前言一、周数的计算逻辑1.1 周数的定义1.2 年初周数的确定1.3 周数的计算方法 二、VueElementUI代码实现2.1 计算周数2.2 获取周的日期范围2.3 根据周数获取日期范围2.4 控件引用2.4.1 控件引用代码分析2.4.2 初始化变量代码分析 2.5 周数选择器完整代码 三、C#后端代… 文章目录 前言一、周数的计算逻辑1.1 周数的定义1.2 年初周数的确定1.3 周数的计算方法 二、VueElementUI代码实现2.1 计算周数2.2 获取周的日期范围2.3 根据周数获取日期范围2.4 控件引用2.4.1 控件引用代码分析2.4.2 初始化变量代码分析 2.5 周数选择器完整代码 三、C#后端代码实现3.1 类实现3.1 静态方法实现 总结 前言
Vue.js和ElementUI的结合使用已成为创建高效、美观和用户友好的Web应用的一种流行方式。特别是在处理复杂的用户界面和交互时这种组合展现出其独特的优势。这篇博客旨在深入探讨如何利用Vue和ElementUI来构建一个实用的周数选择器。 周数选择器在很多类型的应用程序中都非常重要尤其是在需要日期管理的系统中如日历应用、项目管理工具或报告系统。正确地理解和计算周数对于确保数据的准确性和用户界面的一致性至关重要。然而由于不同地区和标准对周的定义存在差异开发这样的功能可能会带来挑战。
为了克服这些挑战并提供一个有效的解决方案本博客首先从理论出发详细介绍了周数的计算逻辑特别是依据国际标准ISO 8601的定义。接着我们深入到具体的代码实现展示了如何在Vue和ElementUI框架下实现这一功能。
通过这篇博客无论是对Vue和ElementUI初学者还是有经验的开发者都能学到如何实现周数选择器这一具体功能同时也能对如何在Vue中构建和管理复杂UI组件有更深入的理解。希望这篇博客能成为在Vue和ElementUI应用开发旅程中的宝贵资源。 一、周数的计算逻辑
在本章中我们将探讨周数的计算逻辑特别是以周一作为每周的起始日。
1.1 周数的定义
根据国际标准ISO 8601一年的周数通常是从周一开始计算的。一周的第一天是周一最后一天是周日。这种计算方式在欧洲和其他一些地区非常常见。
ISO 8601标准广泛应用于国际贸易、通信和其他领域因为它提供了一种统一的日期和时间表示方法有助于减少跨国交流中的混淆和误解。在开发支持多国用户的应用程序时遵循这一标准尤为重要。
1.2 年初周数的确定
年初的周数计算较为特殊。如果1月1日恰好是周一则该日即为第一周的开始。如果1月1日是周二至周日之间的任何一天则该周属于上一年的最后一周新的一年的第一周将从下一个周一开始。
具体来说基于国际标准ISO 8601一年中的第一周必须包含该年的1月4日。这实际上意味着如果1月1日至1月4日之间的任何一天是周一至周四则这一周被视为当年的第一周。
这种计算方式的逻辑基础如下
包含1月4日的周为第一周由于1月4日最晚只可能是一年中第一个星期四因此保证了这一周至少有四天属于新的一年。这样做的目的是为了确保每年的第一周至少包括四天。年初的周数处理如果1月1日是周五、周六或周日则该周被计为上一年的最后一周。因为在这种情况下该周中大部分或所有天数都属于上一年。
1.3 周数的计算方法
周数的计算可以通过以下步骤实现 确定年份的第一天首先确定当前年份的第一天1月1日是星期几。 计算首周偏移量如果1月1日不是周一则需要计算出距离下一个周一还有几天。这将决定第一周的长度。 累加周数从年初开始根据每周七天的规则累加周数。特别注意跨年和闰年的情况这可能会影响总周数。 处理年末的周数在年末最后一周可能不会完整。如果12月31日不是周日则该周的剩余天数将计入新的一年。
二、VueElementUI代码实现
2.1 计算周数
这个方法用于计算给定日期所在的周数。它是整个周数选择器功能的核心。
getWeekNumber (date) {var yearStart new Date(date.getFullYear(), 0, 1)var januaryFirstDayOfWeek yearStart.getDay() 0 ? 6 : yearStart.getDay() - 1 // 将周日从0转换为7var firstMonday new Date(yearStart)if (januaryFirstDayOfWeek 3) {// 如果1月1日至1月4日之间为周一至周四则该周为第一周firstMonday.setDate(yearStart.getDate() - januaryFirstDayOfWeek)} else {// 否则下周一为第一周的开始firstMonday.setDate(yearStart.getDate() 7 - januaryFirstDayOfWeek)}var dayCount Math.ceil((date - firstMonday) / (24 * 3600 * 1000))return Math.ceil(dayCount / 7)},参数dateDate对象表示需要计算周数的日期 逻辑 计算年份开始时的日期1月1日和它是周几。如果1月1日是周一至周四之间那么该周被视为第一周。否则第一周从下一个周一开始。根据这个逻辑计算出给定日期所在的周数。 实现细节 yearStart获取年份的第一天。januaryFirstDayOfWeek变量调整周日的表示方法以符合ISO 8601标准。firstMonday确定第一周的周一日期。最后计算并返回给定日期的周数。
2.2 获取周的日期范围
getWeekDateRange (date) {// 计算当前日期是周几ISO周从周一开始var currentDay date.getDay()var distanceToMonday currentDay 0 ? 6 : currentDay - 1// 计算当前周的周一和周日var monday new Date(date)monday.setDate(date.getDate() - distanceToMonday)var sunday new Date(monday)sunday.setDate(monday.getDate() 6)// 格式化日期为 yyyy-MM-ddvar format (d) d.toISOString().split(T)[0]return [format(monday), format(sunday)]
},这个方法用于计算给定日期所在周的起始和结束日期。 参数dateDate对象表示当前日期 逻辑 计算当前日期是周几然后找到当前周的周一和周日。返回这一周的日期范围。 实现细节 使用currentDay和distanceToMonday计算周一的日期。计算出当前周的周一和周日的日期。返回格式化后的日期范围。
2.3 根据周数获取日期范围
getWeekDateRangeByWeekNumber (weekNumber, year) {var januaryFirst new Date(year, 0, 1)var januaryFirstDayOfWeek januaryFirst.getDay() 0 ? 6 : januaryFirst.getDay() - 1 // 将周日从0转换为7var firstMonday new Date(januaryFirst)if (januaryFirstDayOfWeek 3) {// 如果1月1日至1月4日之间为周一至周四则该周为第一周firstMonday.setDate(januaryFirst.getDate() - januaryFirstDayOfWeek 1)} else {// 否则下周一为第一周的开始firstMonday.setDate(januaryFirst.getDate() 8 - januaryFirstDayOfWeek)}var weekStart new Date(firstMonday)weekStart.setDate(firstMonday.getDate() (weekNumber - 1) * 7)var weekEnd new Date(weekStart)weekEnd.setDate(weekStart.getDate() 6)// 格式化日期为 yyyy-MM-ddvar format (d) d.toISOString().split(T)[0]return [format(weekStart), format(weekEnd)]
}这个方法根据给定的周数和年份计算出那一周的起始和结束日期。 参数weekNumber周数year年份 逻辑 首先确定该年份的第一周的起始日周一。然后根据给定的周数计算出那一周的起始和结束日期。 实现细节 与getWeekNumber类似先确定年份的第一周的周一。使用给定的周数计算出那一周的起始日期。计算并返回该周的起始和结束日期。
2.4 控件引用
在这个部分我们将讨论如何在Vue应用中引入和使用一个自定义的WeekSelector组件这是一个周数选择控件。以下是控件的引用和初始化过程的解析。
2.4.1 控件引用代码分析 组件标签引用 WeekSelector v-else-ifcolumn.searchTypeweekselector:model.syncsearchElement[column.prop]/WeekSelector这段代码演示了如何在模板中使用WeekSelector组件。使用v-else-if指令来条件渲染WeekSelector组件条件是某个列的searchType属性为weekselector。:model.sync是一个同步属性它将searchElement[column.prop]的值与WeekSelector组件的model属性绑定。这意味着当model属性在组件内部变化时searchElement[column.prop]也会相应更新。 组件导入 import WeekSelector from ./WeekSelector这行代码从WeekSelector文件中导入WeekSelector组件。 在Vue实例中注册组件 components: {// 其他代码WeekSelector
}这段代码在当前Vue实例的components选项中注册WeekSelector组件使其在当前实例的模板中可用。
2.4.2 初始化变量代码分析
初始化的主要作用是抑制Vue警告
[Vue warn]: Invalid prop: type check failed for prop model. Expected Number with value 0, got String with value .this.tabInfo this.tab
this.searchElement this.searchModel
for (let column of this.tabInfo.searchFormat) {if (column.searchType weekselector) {// 使用 Vue 的 $set 方法确保响应性this.$set(this.searchElement, column.prop, -1)}
}这段代码用于初始化与WeekSelector组件相关的数据。this.tabInfo和this.searchElement分别是对其他对象的引用用于设置和获取搜索条件。循环遍历this.tabInfo.searchFormat中的每一列对于类型为weekselector的列使用Vue的$set方法来初始化this.searchElement对象的相应属性。这里使用$set是为了确保新增的属性是响应式的这样当属性值发生变化时Vue能够检测到并更新视图。
以上代码段展示了如何在Vue应用中引入、注册和初始化自定义组件WeekSelector。这个组件的主要功能是作为一个周数选择器用于提供用户界面上对周数的选择功能。通过这些步骤可以确保WeekSelector组件能够正确地被引用并且其状态的变化能够被Vue实例正确地管理和响应。
2.5 周数选择器完整代码
文件名WeekSelector.vue
templatedivel-rowel-col :span6el-input-number v-modelweekNumber:min0:max52label周数 //el-colel-col :span18el-form-item label日期范围el-date-picker typedaterangeiddateRangerange-separator至stylewidth: 100%;sizeministart-placeholder开始日期end-placeholder结束日期value-formatyyyy-MM-ddv-modeldateRange:readonlytrue/el-date-picker/el-form-item/el-col/el-row/div
/templatescript
export default {create () {this.weekNumber this.model},data () {return {weekNumber: this.getWeekNumber(new Date()),dateRange: this.getWeekDateRange(new Date())}},methods: {getWeekNumber (date) {var yearStart new Date(date.getFullYear(), 0, 1)var januaryFirstDayOfWeek yearStart.getDay() 0 ? 6 : yearStart.getDay() - 1 // 将周日从0转换为7var firstMonday new Date(yearStart)if (januaryFirstDayOfWeek 3) {// 如果1月1日至1月4日之间为周一至周四则该周为第一周firstMonday.setDate(yearStart.getDate() - januaryFirstDayOfWeek)} else {// 否则下周一为第一周的开始firstMonday.setDate(yearStart.getDate() 7 - januaryFirstDayOfWeek)}var dayCount Math.ceil((date - firstMonday) / (24 * 3600 * 1000))let weekNum Math.ceil(dayCount / 7)// 父级控件 v-model 绑定this.$emit(update:model, weekNum)return weekNum},getWeekDateRange (date) {// 计算当前日期是周几ISO周从周一开始var currentDay date.getDay()var distanceToMonday currentDay 0 ? 6 : currentDay - 1// 计算当前周的周一和周日var monday new Date(date)monday.setDate(date.getDate() - distanceToMonday)var sunday new Date(monday)sunday.setDate(monday.getDate() 6)// 格式化日期为 yyyy-MM-ddvar format (d) d.toISOString().split(T)[0]return [format(monday), format(sunday)]},getWeekDateRangeByWeekNumber (weekNumber, year) {if (weekNumber 1) {return null}var januaryFirst new Date(year, 0, 1)var januaryFirstDayOfWeek januaryFirst.getDay() 0 ? 6 : januaryFirst.getDay() - 1 // 将周日从0转换为7var firstMonday new Date(januaryFirst)if (januaryFirstDayOfWeek 3) {// 如果1月1日至1月4日之间为周一至周四则该周为第一周firstMonday.setDate(januaryFirst.getDate() - januaryFirstDayOfWeek 1)} else {// 否则下周一为第一周的开始firstMonday.setDate(januaryFirst.getDate() 8 - januaryFirstDayOfWeek)}var weekStart new Date(firstMonday)weekStart.setDate(firstMonday.getDate() (weekNumber - 1) * 7)var weekEnd new Date(weekStart)weekEnd.setDate(weekStart.getDate() 6)// 格式化日期为 yyyy-MM-ddvar format (d) d.toISOString().split(T)[0]return [format(weekStart), format(weekEnd)]}},props: {model: {type: Number,required: true}},watch: {model (val) {if (val.length 1 || val 0) {this.weekNumber this.getWeekNumber(new Date())this.dateRange this.getWeekDateRange(new Date())} else {// 使用val作为周数this.weekNumber valif (val 0) {this.dateRange this.getWeekDateRangeByWeekNumber(val, new Date().getFullYear())} else {this.dateRange null}}},weekNumber (newVal, oldVal) {// 当周数改变时更新日期范围if (newVal ! oldVal) {if (newVal 0) {this.dateRange this.getWeekDateRangeByWeekNumber(newVal, new Date().getFullYear())} else {this.dateRange null}}// 父级控件 v-model 绑定this.$emit(update:model, newVal)}}
}
/scriptstyle langscss scoped
// 调整高度
.el-form-item {height: 10px;
}
/style运行效果
注以下操作可以根据实际情况可以灵活控制。 1.el-input-number的取值范围为 [ 0 , 52 ] [0,52] [0,52]当el-input-number0时则表示后端系统不使用周数选择器作为判断依据。也可以将el-input-number的取值范围强制设为 [ 1 , 52 ] [1,52] [1,52]用多选控件控制是否启用的判断。 2.getWeekNumber方法中添加了this.$emit(update:model, weekNum)用于将初始化后的值返回给父控件。 3.getWeekDateRangeByWeekNumber方法中添加了if (weekNumber 1)的判断防止意外的输入值。 三、C#后端代码实现
了解上面原理之后依样画葫芦我们可以通过周数计算日期范围用于查询后数据分析。 这里我们简单实现一下代码作为应用参考。
3.1 类实现
public class ReportWeekCalculator
{public int ReportWeek { get; set; }public int Year { get; set; }public ReportWeekCalculator(int reportWeek, int year){ReportWeek reportWeek;Year year;}public (DateTime, DateTime) GetWeekDateRange(){// 获取指定年份的1月1日DateTime januaryFirst new DateTime(Year, 1, 1);// 获取1月1日是周几将周日从0转换为7int januaryFirstDayOfWeek januaryFirst.DayOfWeek DayOfWeek.Sunday ? 6 : (int)januaryFirst.DayOfWeek - 1;// 计算第一周周一的日期DateTime firstMonday;if (januaryFirstDayOfWeek 3) // 如果1月1日是周一至周四{firstMonday januaryFirst.AddDays(-januaryFirstDayOfWeek);}else // 如果1月1日是周五、周六或周日{firstMonday januaryFirst.AddDays(7 - januaryFirstDayOfWeek);}// 计算目标周的开始日期DateTime startOfWeek firstMonday.AddDays((ReportWeek - 1) * 7);// 计算目标周的结束日期DateTime endOfWeek startOfWeek.AddDays(6);return (startOfWeek, endOfWeek);}
}
使用示例
var calculator new ReportWeekCalculator(47, 2023); // 假设需要计算2023年第47周的日期范围
var (startOfWeek, endOfWeek) calculator.GetWeekDateRange();
Console.WriteLine($Week {calculator.ReportWeek} of {calculator.Year} starts on {startOfWeek:yyyy-MM-dd} and ends on {endOfWeek:yyyy-MM-dd});3.1 静态方法实现
public class CommonFunc
{public static (DateTime, DateTime) GetWeekDateRange(int ReportWeek){// 获取当前年份int year DateTime.Now.Year;// 获取指定年份的1月1日DateTime januaryFirst new DateTime(year, 1, 1);// 获取1月1日是周几将周日从0转换为7int januaryFirstDayOfWeek januaryFirst.DayOfWeek DayOfWeek.Sunday ? 6 : (int)januaryFirst.DayOfWeek - 1;// 计算第一周周一的日期DateTime firstMonday;if (januaryFirstDayOfWeek 3) // 如果1月1日是周一至周四{firstMonday januaryFirst.AddDays(-januaryFirstDayOfWeek);}else // 如果1月1日是周五、周六或周日{firstMonday januaryFirst.AddDays(7 - januaryFirstDayOfWeek);}// 计算目标周的开始日期DateTime startOfWeek firstMonday.AddDays((ReportWeek - 1) * 7);// 计算目标周的结束日期DateTime endOfWeek startOfWeek.AddDays(6);return (startOfWeek, endOfWeek);}
}使用示例
(DateTime startDt, DateTime endDt) CommonFunc.GetWeekDateRange(searchDto.ReportWeek);注endOfWeek取的是周日的00:00:00如果需要日期筛选需要加一天后用符号或者截取到日期字段用符号比较。 参考代码片段
(DateTime startDt, DateTime endDt) CommonFunc.GetWeekDateRange(searchDto.ReportWeek);
endDt endDt.AddDays(1); //加一天
expression expression.And(p p.CreateTime startDt);
expression expression.And(p p.CreateTime endDt);总结
本篇博客中我们深入探讨了周数选择器的实现从理论到实践涵盖了周数的计算逻辑和具体的代码实现。
首先我们讨论了周数的定义、确定年初的周数以及周数的具体计算方法。这部分内容基于ISO 8601标准为理解和计算周数提供了必要的理论基础。
随后我们转向实际的代码实现详细介绍了几个关键函数计算周数getWeekNumber、获取特定日期所在周的日期范围getWeekDateRange以及根据周数和年份获取特定周的日期范围getWeekDateRangeByWeekNumber。这些函数是构建周数选择器的核心展示了如何在Vue和ElementUI环境中处理日期和时间。
进一步我们分析了周数选择器控件在Vue中的引用方式包括控件的引入、注册以及相关变量的初始化。这不仅展示了组件化开发的便捷性也体现了Vue响应式系统的强大。
最后我们提供了周数选择器的完整代码这为读者提供了一个实用的参考模板可以直接应用于项目或作为学习实践。
整体而言本博客不仅介绍了周数选择器的实现更提供了一种结合Vue和ElementUI开发复杂UI组件的有效途径。这对于追求高效、可维护的前端开发来说无疑是极有价值的。
