驾驶舱页面绘制
绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
This commit is contained in:
guanj
@@ -1,332 +1,363 @@
|
||||
import dayjs from 'dayjs'
|
||||
import type { TableColumnCtx } from 'element-plus'
|
||||
|
||||
/**
|
||||
* 日期快捷选项适用于 el-date-picker
|
||||
*/
|
||||
export const defaultShortcuts = [
|
||||
{
|
||||
text: '今天',
|
||||
value: () => {
|
||||
return new Date()
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '昨天',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
||||
return [date, date]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近七天',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
||||
return [date, new Date()]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近 30 天',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
|
||||
return [date, new Date()]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '本月',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
date.setDate(1) // 设置为当前月的第一天
|
||||
return [date, new Date()]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '今年',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
return [new Date(`${date.getFullYear()}-01-01`), date]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
/**
|
||||
* 时间日期转换
|
||||
* @param date 当前时间，new Date() 格式
|
||||
* @param format 需要转换的时间格式字符串
|
||||
* @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
|
||||
* @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
|
||||
* @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
|
||||
* @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
|
||||
* @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
|
||||
* @returns 返回拼接后的时间字符串
|
||||
*/
|
||||
export function formatDate(date: Date, format?: string): string {
|
||||
// 日期不存在，则返回空
|
||||
if (!date) {
|
||||
return ''
|
||||
}
|
||||
// 日期存在，则进行格式化
|
||||
return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前的日期+时间
|
||||
*/
|
||||
export function getNowDateTime() {
|
||||
return dayjs()
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前日期是第几周
|
||||
* @param dateTime 当前传入的日期值
|
||||
* @returns 返回第几周数字值
|
||||
*/
|
||||
export function getWeek(dateTime: Date): number {
|
||||
const temptTime = new Date(dateTime.getTime())
|
||||
// 周几
|
||||
const weekday = temptTime.getDay() || 7
|
||||
// 周1+5天=周六
|
||||
temptTime.setDate(temptTime.getDate() - weekday + 1 + 5)
|
||||
let firstDay = new Date(temptTime.getFullYear(), 0, 1)
|
||||
const dayOfWeek = firstDay.getDay()
|
||||
let spendDay = 1
|
||||
if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1
|
||||
firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay)
|
||||
const d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000)
|
||||
return Math.ceil(d / 7)
|
||||
}
|
||||
|
||||
/**
|
||||
* 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
|
||||
* @param param 当前时间，new Date() 格式或者字符串时间格式
|
||||
* @param format 需要转换的时间格式字符串
|
||||
* @description param 10秒： 10 * 1000
|
||||
* @description param 1分： 60 * 1000
|
||||
* @description param 1小时： 60 * 60 * 1000
|
||||
* @description param 24小时：60 * 60 * 24 * 1000
|
||||
* @description param 3天： 60 * 60* 24 * 1000 * 3
|
||||
* @returns 返回拼接后的时间字符串
|
||||
*/
|
||||
export function formatPast(param: string | Date, format = 'YYYY-mm-dd HH:MM:SS'): string {
|
||||
// 传入格式处理、存储转换值
|
||||
let t: any, s: number
|
||||
// 获取js 时间戳
|
||||
let time: number = new Date().getTime()
|
||||
// 是否是对象
|
||||
typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param)
|
||||
// 当前时间戳 - 传入时间戳
|
||||
time = Number.parseInt(`${time - t}`)
|
||||
if (time < 10000) {
|
||||
// 10秒内
|
||||
return '刚刚'
|
||||
} else if (time < 60000 && time >= 10000) {
|
||||
// 超过10秒少于1分钟内
|
||||
s = Math.floor(time / 1000)
|
||||
return `${s}秒前`
|
||||
} else if (time < 3600000 && time >= 60000) {
|
||||
// 超过1分钟少于1小时
|
||||
s = Math.floor(time / 60000)
|
||||
return `${s}分钟前`
|
||||
} else if (time < 86400000 && time >= 3600000) {
|
||||
// 超过1小时少于24小时
|
||||
s = Math.floor(time / 3600000)
|
||||
return `${s}小时前`
|
||||
} else if (time < 259200000 && time >= 86400000) {
|
||||
// 超过1天少于3天内
|
||||
s = Math.floor(time / 86400000)
|
||||
return `${s}天前`
|
||||
} else {
|
||||
// 超过3天
|
||||
const date = typeof param === 'string' || 'object' ? new Date(param) : param
|
||||
return formatDate(date, format)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 时间问候语
|
||||
* @param param 当前时间，new Date() 格式
|
||||
* @description param 调用 `formatAxis(new Date())` 输出 `上午好`
|
||||
* @returns 返回拼接后的时间字符串
|
||||
*/
|
||||
export function formatAxis(param: Date): string {
|
||||
const hour: number = new Date(param).getHours()
|
||||
if (hour < 6) return '凌晨好'
|
||||
else if (hour < 9) return '早上好'
|
||||
else if (hour < 12) return '上午好'
|
||||
else if (hour < 14) return '中午好'
|
||||
else if (hour < 17) return '下午好'
|
||||
else if (hour < 19) return '傍晚好'
|
||||
else if (hour < 22) return '晚上好'
|
||||
else return '夜里好'
|
||||
}
|
||||
|
||||
/**
|
||||
* 将毫秒，转换成时间字符串。例如说，xx 分钟
|
||||
*
|
||||
* @param ms 毫秒
|
||||
* @returns {string} 字符串
|
||||
*/
|
||||
export function formatPast2(ms: number): string {
|
||||
const day = Math.floor(ms / (24 * 60 * 60 * 1000))
|
||||
const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24)
|
||||
const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
|
||||
const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
|
||||
if (day > 0) {
|
||||
return day + ' 天' + hour + ' 小时 ' + minute + ' 分钟'
|
||||
}
|
||||
if (hour > 0) {
|
||||
return hour + ' 小时 ' + minute + ' 分钟'
|
||||
}
|
||||
if (minute > 0) {
|
||||
return minute + ' 分钟'
|
||||
}
|
||||
if (second > 0) {
|
||||
return second + ' 秒'
|
||||
} else {
|
||||
return 0 + ' 秒'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* element plus 的时间 Formatter 实现，使用 YYYY-MM-DD HH:mm:ss 格式
|
||||
*
|
||||
* @param row 行数据
|
||||
* @param column 字段
|
||||
* @param cellValue 字段值
|
||||
*/
|
||||
export function dateFormatter(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
|
||||
return cellValue ? formatDate(cellValue) : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* element plus 的时间 Formatter 实现，使用 YYYY-MM-DD 格式
|
||||
*
|
||||
* @param row 行数据
|
||||
* @param column 字段
|
||||
* @param cellValue 字段值
|
||||
*/
|
||||
export function dateFormatter2(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
|
||||
return cellValue ? formatDate(cellValue, 'YYYY-MM-DD') : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置起始日期，时间为00:00:00
|
||||
* @param param 传入日期
|
||||
* @returns 带时间00:00:00的日期
|
||||
*/
|
||||
export function beginOfDay(param: Date): Date {
|
||||
return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 0, 0, 0)
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置结束日期，时间为23:59:59
|
||||
* @param param 传入日期
|
||||
* @returns 带时间23:59:59的日期
|
||||
*/
|
||||
export function endOfDay(param: Date): Date {
|
||||
return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 23, 59, 59)
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算两个日期间隔天数
|
||||
* @param param1 日期1
|
||||
* @param param2 日期2
|
||||
*/
|
||||
export function betweenDay(param1: Date, param2: Date): number {
|
||||
param1 = convertDate(param1)
|
||||
param2 = convertDate(param2)
|
||||
// 计算差值
|
||||
return Math.floor((param2.getTime() - param1.getTime()) / (24 * 3600 * 1000))
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期计算
|
||||
* @param param1 日期
|
||||
* @param param2 添加的时间
|
||||
*/
|
||||
export function addTime(param1: Date, param2: number): Date {
|
||||
param1 = convertDate(param1)
|
||||
return new Date(param1.getTime() + param2)
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期转换
|
||||
* @param param 日期
|
||||
*/
|
||||
export function convertDate(param: Date | string): Date {
|
||||
if (typeof param === 'string') {
|
||||
return new Date(param)
|
||||
}
|
||||
return param
|
||||
}
|
||||
|
||||
/**
|
||||
* 指定的两个日期, 是否为同一天
|
||||
* @param a 日期 A
|
||||
* @param b 日期 B
|
||||
*/
|
||||
export function isSameDay(a: dayjs.ConfigType, b: dayjs.ConfigType): boolean {
|
||||
if (!a || !b) return false
|
||||
|
||||
const aa = dayjs(a)
|
||||
const bb = dayjs(b)
|
||||
return aa.year() == bb.year() && aa.month() == bb.month() && aa.day() == bb.day()
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取一天的开始时间、截止时间
|
||||
* @param date 日期
|
||||
* @param days 天数
|
||||
*/
|
||||
export function getDayRange(
|
||||
date: dayjs.ConfigType,
|
||||
days: number
|
||||
): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const day = dayjs(date).add(days, 'd')
|
||||
return getDateRange(day, day)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最近7天的开始时间、截止时间
|
||||
*/
|
||||
export function getLast7Days(): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const lastWeekDay = dayjs().subtract(7, 'd')
|
||||
const yesterday = dayjs().subtract(1, 'd')
|
||||
return getDateRange(lastWeekDay, yesterday)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最近30天的开始时间、截止时间
|
||||
*/
|
||||
export function getLast30Days(): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const lastMonthDay = dayjs().subtract(30, 'd')
|
||||
const yesterday = dayjs().subtract(1, 'd')
|
||||
return getDateRange(lastMonthDay, yesterday)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最近1年的开始时间、截止时间
|
||||
*/
|
||||
export function getLast1Year(): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const lastYearDay = dayjs().subtract(1, 'y')
|
||||
const yesterday = dayjs().subtract(1, 'd')
|
||||
return getDateRange(lastYearDay, yesterday)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定日期的开始时间、截止时间
|
||||
* @param beginDate 开始日期
|
||||
* @param endDate 截止日期
|
||||
*/
|
||||
export function getDateRange(
|
||||
beginDate: dayjs.ConfigType,
|
||||
endDate: dayjs.ConfigType
|
||||
): [string, string] {
|
||||
return [
|
||||
dayjs(beginDate).startOf('d').format('YYYY-MM-DD HH:mm:ss'),
|
||||
dayjs(endDate).endOf('d').format('YYYY-MM-DD HH:mm:ss')
|
||||
]
|
||||
}
|
||||
import dayjs from 'dayjs'
|
||||
import type { TableColumnCtx } from 'element-plus'
|
||||
|
||||
/**
|
||||
* 日期快捷选项适用于 el-date-picker
|
||||
*/
|
||||
export const defaultShortcuts = [
|
||||
{
|
||||
text: '今天',
|
||||
value: () => {
|
||||
return new Date()
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '昨天',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
||||
return [date, date]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近七天',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
||||
return [date, new Date()]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近 30 天',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
|
||||
return [date, new Date()]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '本月',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
date.setDate(1) // 设置为当前月的第一天
|
||||
return [date, new Date()]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '今年',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
return [new Date(`${date.getFullYear()}-01-01`), date]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
/**
|
||||
* 时间日期转换
|
||||
* @param date 当前时间，new Date() 格式
|
||||
* @param format 需要转换的时间格式字符串
|
||||
* @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
|
||||
* @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
|
||||
* @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
|
||||
* @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
|
||||
* @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
|
||||
* @returns 返回拼接后的时间字符串
|
||||
*/
|
||||
export function formatDate(date: Date, format?: string): string {
|
||||
// 日期不存在，则返回空
|
||||
if (!date) {
|
||||
return ''
|
||||
}
|
||||
// 日期存在，则进行格式化
|
||||
return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前的日期+时间
|
||||
*/
|
||||
export function getNowDateTime() {
|
||||
return dayjs()
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前日期是第几周
|
||||
* @param dateTime 当前传入的日期值
|
||||
* @returns 返回第几周数字值
|
||||
*/
|
||||
export function getWeek(dateTime: Date): number {
|
||||
const temptTime = new Date(dateTime.getTime())
|
||||
// 周几
|
||||
const weekday = temptTime.getDay() || 7
|
||||
// 周1+5天=周六
|
||||
temptTime.setDate(temptTime.getDate() - weekday + 1 + 5)
|
||||
let firstDay = new Date(temptTime.getFullYear(), 0, 1)
|
||||
const dayOfWeek = firstDay.getDay()
|
||||
let spendDay = 1
|
||||
if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1
|
||||
firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay)
|
||||
const d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000)
|
||||
return Math.ceil(d / 7)
|
||||
}
|
||||
|
||||
/**
|
||||
* 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
|
||||
* @param param 当前时间，new Date() 格式或者字符串时间格式
|
||||
* @param format 需要转换的时间格式字符串
|
||||
* @description param 10秒： 10 * 1000
|
||||
* @description param 1分： 60 * 1000
|
||||
* @description param 1小时： 60 * 60 * 1000
|
||||
* @description param 24小时：60 * 60 * 24 * 1000
|
||||
* @description param 3天： 60 * 60* 24 * 1000 * 3
|
||||
* @returns 返回拼接后的时间字符串
|
||||
*/
|
||||
export function formatPast(param: string | Date, format = 'YYYY-mm-dd HH:MM:SS'): string {
|
||||
// 传入格式处理、存储转换值
|
||||
let t: any, s: number
|
||||
// 获取js 时间戳
|
||||
let time: number = new Date().getTime()
|
||||
// 是否是对象
|
||||
typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param)
|
||||
// 当前时间戳 - 传入时间戳
|
||||
time = Number.parseInt(`${time - t}`)
|
||||
if (time < 10000) {
|
||||
// 10秒内
|
||||
return '刚刚'
|
||||
} else if (time < 60000 && time >= 10000) {
|
||||
// 超过10秒少于1分钟内
|
||||
s = Math.floor(time / 1000)
|
||||
return `${s}秒前`
|
||||
} else if (time < 3600000 && time >= 60000) {
|
||||
// 超过1分钟少于1小时
|
||||
s = Math.floor(time / 60000)
|
||||
return `${s}分钟前`
|
||||
} else if (time < 86400000 && time >= 3600000) {
|
||||
// 超过1小时少于24小时
|
||||
s = Math.floor(time / 3600000)
|
||||
return `${s}小时前`
|
||||
} else if (time < 259200000 && time >= 86400000) {
|
||||
// 超过1天少于3天内
|
||||
s = Math.floor(time / 86400000)
|
||||
return `${s}天前`
|
||||
} else {
|
||||
// 超过3天
|
||||
const date = typeof param === 'string' || 'object' ? new Date(param) : param
|
||||
return formatDate(date, format)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 时间问候语
|
||||
* @param param 当前时间，new Date() 格式
|
||||
* @description param 调用 `formatAxis(new Date())` 输出 `上午好`
|
||||
* @returns 返回拼接后的时间字符串
|
||||
*/
|
||||
export function formatAxis(param: Date): string {
|
||||
const hour: number = new Date(param).getHours()
|
||||
if (hour < 6) return '凌晨好'
|
||||
else if (hour < 9) return '早上好'
|
||||
else if (hour < 12) return '上午好'
|
||||
else if (hour < 14) return '中午好'
|
||||
else if (hour < 17) return '下午好'
|
||||
else if (hour < 19) return '傍晚好'
|
||||
else if (hour < 22) return '晚上好'
|
||||
else return '夜里好'
|
||||
}
|
||||
|
||||
/**
|
||||
* 将毫秒，转换成时间字符串。例如说，xx 分钟
|
||||
*
|
||||
* @param ms 毫秒
|
||||
* @returns {string} 字符串
|
||||
*/
|
||||
export function formatPast2(ms: number): string {
|
||||
const day = Math.floor(ms / (24 * 60 * 60 * 1000))
|
||||
const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24)
|
||||
const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60)
|
||||
const second = Math.floor(ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60)
|
||||
if (day > 0) {
|
||||
return day + ' 天' + hour + ' 小时 ' + minute + ' 分钟'
|
||||
}
|
||||
if (hour > 0) {
|
||||
return hour + ' 小时 ' + minute + ' 分钟'
|
||||
}
|
||||
if (minute > 0) {
|
||||
return minute + ' 分钟'
|
||||
}
|
||||
if (second > 0) {
|
||||
return second + ' 秒'
|
||||
} else {
|
||||
return 0 + ' 秒'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* element plus 的时间 Formatter 实现，使用 YYYY-MM-DD HH:mm:ss 格式
|
||||
*
|
||||
* @param row 行数据
|
||||
* @param column 字段
|
||||
* @param cellValue 字段值
|
||||
*/
|
||||
export function dateFormatter(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
|
||||
return cellValue ? formatDate(cellValue) : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* element plus 的时间 Formatter 实现，使用 YYYY-MM-DD 格式
|
||||
*
|
||||
* @param row 行数据
|
||||
* @param column 字段
|
||||
* @param cellValue 字段值
|
||||
*/
|
||||
export function dateFormatter2(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
|
||||
return cellValue ? formatDate(cellValue, 'YYYY-MM-DD') : ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置起始日期，时间为00:00:00
|
||||
* @param param 传入日期
|
||||
* @returns 带时间00:00:00的日期
|
||||
*/
|
||||
export function beginOfDay(param: Date): Date {
|
||||
return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 0, 0, 0)
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置结束日期，时间为23:59:59
|
||||
* @param param 传入日期
|
||||
* @returns 带时间23:59:59的日期
|
||||
*/
|
||||
export function endOfDay(param: Date): Date {
|
||||
return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 23, 59, 59)
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算两个日期间隔天数
|
||||
* @param param1 日期1
|
||||
* @param param2 日期2
|
||||
*/
|
||||
export function betweenDay(param1: Date, param2: Date): number {
|
||||
param1 = convertDate(param1)
|
||||
param2 = convertDate(param2)
|
||||
// 计算差值
|
||||
return Math.floor((param2.getTime() - param1.getTime()) / (24 * 3600 * 1000))
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期计算
|
||||
* @param param1 日期
|
||||
* @param param2 添加的时间
|
||||
*/
|
||||
export function addTime(param1: Date, param2: number): Date {
|
||||
param1 = convertDate(param1)
|
||||
return new Date(param1.getTime() + param2)
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期转换
|
||||
* @param param 日期
|
||||
*/
|
||||
export function convertDate(param: Date | string): Date {
|
||||
if (typeof param === 'string') {
|
||||
return new Date(param)
|
||||
}
|
||||
return param
|
||||
}
|
||||
|
||||
/**
|
||||
* 指定的两个日期, 是否为同一天
|
||||
* @param a 日期 A
|
||||
* @param b 日期 B
|
||||
*/
|
||||
export function isSameDay(a: dayjs.ConfigType, b: dayjs.ConfigType): boolean {
|
||||
if (!a || !b) return false
|
||||
|
||||
const aa = dayjs(a)
|
||||
const bb = dayjs(b)
|
||||
return aa.year() == bb.year() && aa.month() == bb.month() && aa.day() == bb.day()
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取一天的开始时间、截止时间
|
||||
* @param date 日期
|
||||
* @param days 天数
|
||||
*/
|
||||
export function getDayRange(date: dayjs.ConfigType, days: number): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const day = dayjs(date).add(days, 'd')
|
||||
return getDateRange(day, day)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最近7天的开始时间、截止时间
|
||||
*/
|
||||
export function getLast7Days(): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const lastWeekDay = dayjs().subtract(7, 'd')
|
||||
const yesterday = dayjs().subtract(1, 'd')
|
||||
return getDateRange(lastWeekDay, yesterday)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最近30天的开始时间、截止时间
|
||||
*/
|
||||
export function getLast30Days(): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const lastMonthDay = dayjs().subtract(30, 'd')
|
||||
const yesterday = dayjs().subtract(1, 'd')
|
||||
return getDateRange(lastMonthDay, yesterday)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取最近1年的开始时间、截止时间
|
||||
*/
|
||||
export function getLast1Year(): [dayjs.ConfigType, dayjs.ConfigType] {
|
||||
const lastYearDay = dayjs().subtract(1, 'y')
|
||||
const yesterday = dayjs().subtract(1, 'd')
|
||||
return getDateRange(lastYearDay, yesterday)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定日期的开始时间、截止时间
|
||||
* @param beginDate 开始日期
|
||||
* @param endDate 截止日期
|
||||
*/
|
||||
export function getDateRange(beginDate: dayjs.ConfigType, endDate: dayjs.ConfigType): [string, string] {
|
||||
return [
|
||||
dayjs(beginDate).startOf('d').format('YYYY-MM-DD HH:mm:ss'),
|
||||
dayjs(endDate).endOf('d').format('YYYY-MM-DD HH:mm:ss')
|
||||
]
|
||||
}
|
||||
/**
|
||||
* 获取当月时间
|
||||
* @param beginDate 开始日期
|
||||
* @param endDate 截止日期
|
||||
* @param key 1:年 2:季 3:月 4:周 5:日
|
||||
*/
|
||||
export function getTimeOfTheMonth(key: any): [string, string] {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = now.getMonth()
|
||||
|
||||
switch (key) {
|
||||
case '1': // 年
|
||||
return [formatDate(new Date(year, 0, 1), 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
|
||||
|
||||
case '2': // 季
|
||||
const quarterStartMonth = Math.floor(month / 3) * 3
|
||||
const quarterEndMonth = quarterStartMonth + 2
|
||||
|
||||
return [formatDate(new Date(year, quarterStartMonth, 1), 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
|
||||
|
||||
case '3': // 月
|
||||
return [formatDate(new Date(year, month, 1), 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
|
||||
|
||||
case '4': // 周
|
||||
const dayOfWeek = now.getDay() // 0是周日
|
||||
const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) // 调整为周一
|
||||
const weekStart = new Date(year, month, diff)
|
||||
return [formatDate(weekStart, 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
|
||||
|
||||
case '5': // 日
|
||||
return [formatDate(now, 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
|
||||
|
||||
default:
|
||||
throw new Error('Invalid key')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,216 +1,216 @@
|
||||
import { reactive } from 'vue'
|
||||
import createAxios from '@/utils/request'
|
||||
import { requestPayload } from '@/utils/request'
|
||||
import { Method } from 'axios'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { filtration } from './tableMethod'
|
||||
import { ElMessage } from 'element-plus'
|
||||
interface TableStoreParams {
|
||||
url: string // 请求地址
|
||||
pk?: string
|
||||
column: TableColumn[]
|
||||
params?: anyObj
|
||||
exportName?: any // 导出文件名
|
||||
method?: Method // 请求方式
|
||||
isWebPaging?: boolean // 是否前端分页
|
||||
showPage?: boolean //是否需要分页
|
||||
paramsPOST?: boolean // post请求 params传参
|
||||
publicHeight?: number //计算高度
|
||||
resetCallback?: () => void // 重置
|
||||
loadCallback?: () => void // 接口调用后的回调
|
||||
beforeSearchFun?: () => void // 接口调用前的回调
|
||||
}
|
||||
|
||||
export default class TableStore {
|
||||
public url
|
||||
public pk
|
||||
public method: Method
|
||||
public initData: any = null
|
||||
public exportName: any = null
|
||||
public isWebPaging = false
|
||||
public paramsPOST = true
|
||||
public showPage = true
|
||||
public table: CnTable = reactive({
|
||||
ref: null,
|
||||
selection: [],
|
||||
data: [],
|
||||
copyData: [],
|
||||
allData: [],
|
||||
allFlag: false,
|
||||
webPagingData: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
loading: true,
|
||||
column: [],
|
||||
loadCallback: null,
|
||||
resetCallback: null,
|
||||
beforeSearchFun: null,
|
||||
height: '',
|
||||
publicHeight: 0
|
||||
})
|
||||
|
||||
constructor(public options: TableStoreParams) {
|
||||
this.url = options.url
|
||||
this.pk = options.pk || 'id'
|
||||
this.paramsPOST = options.paramsPOST || false
|
||||
this.isWebPaging = options.isWebPaging || false
|
||||
this.exportName = options.exportName || null
|
||||
this.method = options.method || 'GET'
|
||||
this.table.column = options.column
|
||||
this.showPage = options.showPage !== false
|
||||
this.table.publicHeight = options.publicHeight || 0
|
||||
this.table.resetCallback = options.resetCallback || null
|
||||
this.table.loadCallback = options.loadCallback || null
|
||||
this.table.beforeSearchFun = options.beforeSearchFun || null
|
||||
Object.assign(this.table.params, options.params)
|
||||
this.table.height = mainHeight(20 + (this.showPage ? 58 : 0) + this.table.publicHeight).height as string
|
||||
}
|
||||
|
||||
index() {
|
||||
this.table.beforeSearchFun && this.table.beforeSearchFun()
|
||||
this.table.data = []
|
||||
this.table.loading = true
|
||||
// 重置用的数据数据
|
||||
if (!this.initData) {
|
||||
this.initData = JSON.parse(JSON.stringify(this.table.params))
|
||||
}
|
||||
createAxios(
|
||||
Object.assign(
|
||||
{
|
||||
url: this.url,
|
||||
method: this.method
|
||||
},
|
||||
requestPayload(this.method, this.table.params, this.paramsPOST)
|
||||
)
|
||||
)
|
||||
.then((res: any) => {
|
||||
if (res.data) {
|
||||
this.table.data = res.data.records || res.data
|
||||
this.table.total = res.data?.total || res.data.length || 0
|
||||
} else {
|
||||
this.table.data = []
|
||||
this.table.total = 0
|
||||
}
|
||||
this.table.copyData = filtration(this.table.data)
|
||||
if (Array.isArray(res)) {
|
||||
this.table.data = res
|
||||
}
|
||||
if (this.isWebPaging) {
|
||||
this.table.webPagingData = window.XEUtils.chunk(this.table.data, this.table.params.pageSize)
|
||||
this.table.data = this.table.webPagingData[this.table.params.pageNum - 1]
|
||||
}
|
||||
this.table.loadCallback && this.table.loadCallback()
|
||||
this.table.loading = false
|
||||
})
|
||||
.catch(() => {
|
||||
this.table.loading = false
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格内的事件统一响应
|
||||
* @param event 事件:selection-change=选中项改变,page-size-change=每页数量改变,current-page-change=翻页
|
||||
* @param data 携带数据
|
||||
*/
|
||||
onTableAction = (event: string, data: anyObj) => {
|
||||
const actionFun = new Map([
|
||||
[
|
||||
'search',
|
||||
() => {
|
||||
this.table.params.pageNum = 1
|
||||
this.index()
|
||||
}
|
||||
],
|
||||
[
|
||||
'reset',
|
||||
() => {
|
||||
delete this.initData.pageSize
|
||||
// console.log(this.table.params)
|
||||
// console.log(this.initData)
|
||||
Object.assign(this.table.params, this.initData)
|
||||
this.index()
|
||||
this.table.resetCallback && this.table.resetCallback()
|
||||
}
|
||||
],
|
||||
[
|
||||
'selection-change',
|
||||
() => {
|
||||
this.table.selection = data as TableRow[]
|
||||
}
|
||||
],
|
||||
[
|
||||
'page-size-change',
|
||||
() => {
|
||||
this.table.params.pageSize = data.size
|
||||
this.table.params.pageNum = 1
|
||||
|
||||
if (this.isWebPaging) {
|
||||
this.table.webPagingData = window.XEUtils.chunk(
|
||||
window.XEUtils.flatten(this.table.webPagingData),
|
||||
this.table.params.pageSize
|
||||
)
|
||||
this.table.data = this.table.webPagingData[this.table.params.pageNum - 1]
|
||||
} else {
|
||||
this.index()
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
'current-page-change',
|
||||
() => {
|
||||
this.table.params.pageNum = data.page
|
||||
if (this.isWebPaging) {
|
||||
this.table.data = []
|
||||
requestAnimationFrame(() => {
|
||||
this.table.data = this.table.webPagingData[data.page - 1]
|
||||
})
|
||||
} else {
|
||||
this.index()
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
'field-change',
|
||||
() => {
|
||||
console.warn('field-change')
|
||||
}
|
||||
],
|
||||
[
|
||||
'default',
|
||||
() => {
|
||||
console.warn('No action defined')
|
||||
}
|
||||
],
|
||||
[
|
||||
'export',
|
||||
() => {
|
||||
ElMessage({
|
||||
message: '正在导出,请稍等...',
|
||||
type: 'info',
|
||||
duration: 1000
|
||||
})
|
||||
let params = { ...this.table.params, pageNum: 1, pageSize: this.table.total }
|
||||
setTimeout(() => {
|
||||
createAxios(
|
||||
Object.assign(
|
||||
{
|
||||
url: this.url,
|
||||
method: this.method
|
||||
},
|
||||
requestPayload(this.method, params, this.paramsPOST)
|
||||
)
|
||||
).then(res => {
|
||||
this.table.allData = filtration(res.data.records || res.data)
|
||||
this.table.allFlag = data.showAllFlag || true
|
||||
})
|
||||
}, 1500)
|
||||
}
|
||||
]
|
||||
])
|
||||
const action = actionFun.get(event) || actionFun.get('default')
|
||||
action!.call(this)
|
||||
}
|
||||
}
|
||||
import { reactive } from 'vue'
|
||||
import createAxios from '@/utils/request'
|
||||
import { requestPayload } from '@/utils/request'
|
||||
import { Method } from 'axios'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { filtration } from './tableMethod'
|
||||
import { ElMessage } from 'element-plus'
|
||||
interface TableStoreParams {
|
||||
url: string // 请求地址
|
||||
pk?: string
|
||||
column: TableColumn[]
|
||||
params?: anyObj
|
||||
exportName?: any // 导出文件名
|
||||
method?: Method // 请求方式
|
||||
isWebPaging?: boolean // 是否前端分页
|
||||
showPage?: boolean //是否需要分页
|
||||
paramsPOST?: boolean // post请求 params传参
|
||||
publicHeight?: number //计算高度
|
||||
resetCallback?: () => void // 重置
|
||||
loadCallback?: () => void // 接口调用后的回调
|
||||
beforeSearchFun?: () => void // 接口调用前的回调
|
||||
}
|
||||
|
||||
export default class TableStore {
|
||||
public url
|
||||
public pk
|
||||
public method: Method
|
||||
public initData: any = null
|
||||
public exportName: any = null
|
||||
public isWebPaging = false
|
||||
public paramsPOST = true
|
||||
public showPage = true
|
||||
public table: CnTable = reactive({
|
||||
ref: null,
|
||||
selection: [],
|
||||
data: [],
|
||||
copyData: [],
|
||||
allData: [],
|
||||
allFlag: false,
|
||||
webPagingData: [],
|
||||
total: 0,
|
||||
params: {
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
loading: true,
|
||||
column: [],
|
||||
loadCallback: null,
|
||||
resetCallback: null,
|
||||
beforeSearchFun: null,
|
||||
height: '',
|
||||
publicHeight: 0
|
||||
})
|
||||
|
||||
constructor(public options: TableStoreParams) {
|
||||
this.url = options.url
|
||||
this.pk = options.pk || 'id'
|
||||
this.paramsPOST = options.paramsPOST || false
|
||||
this.isWebPaging = options.isWebPaging || false
|
||||
this.exportName = options.exportName || null
|
||||
this.method = options.method || 'GET'
|
||||
this.table.column = options.column
|
||||
this.showPage = options.showPage !== false
|
||||
this.table.publicHeight = options.publicHeight || 0
|
||||
this.table.resetCallback = options.resetCallback || null
|
||||
this.table.loadCallback = options.loadCallback || null
|
||||
this.table.beforeSearchFun = options.beforeSearchFun || null
|
||||
Object.assign(this.table.params, options.params)
|
||||
this.table.height = mainHeight(20 + (this.showPage ? 58 : 0) + this.table.publicHeight).height as string
|
||||
}
|
||||
|
||||
index() {
|
||||
this.table.beforeSearchFun && this.table.beforeSearchFun()
|
||||
this.table.data = []
|
||||
this.table.loading = true
|
||||
// 重置用的数据数据
|
||||
if (!this.initData) {
|
||||
this.initData = JSON.parse(JSON.stringify(this.table.params))
|
||||
}
|
||||
createAxios(
|
||||
Object.assign(
|
||||
{
|
||||
url: this.url,
|
||||
method: this.method
|
||||
},
|
||||
requestPayload(this.method, this.table.params, this.paramsPOST)
|
||||
)
|
||||
)
|
||||
.then((res: any) => {
|
||||
if (res.data) {
|
||||
this.table.data = res.data.records || res.data
|
||||
this.table.total = res.data?.total || res.data.length || 0
|
||||
} else {
|
||||
this.table.data = []
|
||||
this.table.total = 0
|
||||
}
|
||||
this.table.copyData = filtration(this.table.data)
|
||||
if (Array.isArray(res)) {
|
||||
this.table.data = res
|
||||
}
|
||||
if (this.isWebPaging) {
|
||||
this.table.webPagingData = window.XEUtils.chunk(this.table.data, this.table.params.pageSize)
|
||||
this.table.data = this.table.webPagingData[this.table.params.pageNum - 1]
|
||||
}
|
||||
this.table.loadCallback && this.table.loadCallback()
|
||||
this.table.loading = false
|
||||
})
|
||||
.catch(() => {
|
||||
this.table.loading = false
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格内的事件统一响应
|
||||
* @param event 事件:selection-change=选中项改变,page-size-change=每页数量改变,current-page-change=翻页
|
||||
* @param data 携带数据
|
||||
*/
|
||||
onTableAction = (event: string, data: anyObj) => {
|
||||
const actionFun = new Map([
|
||||
[
|
||||
'search',
|
||||
() => {
|
||||
this.table.params.pageNum = 1
|
||||
this.index()
|
||||
}
|
||||
],
|
||||
[
|
||||
'reset',
|
||||
() => {
|
||||
delete this.initData.pageSize
|
||||
// console.log(this.table.params)
|
||||
// console.log(this.initData)
|
||||
Object.assign(this.table.params, this.initData)
|
||||
this.index()
|
||||
this.table.resetCallback && this.table.resetCallback()
|
||||
}
|
||||
],
|
||||
[
|
||||
'selection-change',
|
||||
() => {
|
||||
this.table.selection = data as TableRow[]
|
||||
}
|
||||
],
|
||||
[
|
||||
'page-size-change',
|
||||
() => {
|
||||
this.table.params.pageSize = data.size
|
||||
this.table.params.pageNum = 1
|
||||
|
||||
if (this.isWebPaging) {
|
||||
this.table.webPagingData = window.XEUtils.chunk(
|
||||
window.XEUtils.flatten(this.table.webPagingData),
|
||||
this.table.params.pageSize
|
||||
)
|
||||
this.table.data = this.table.webPagingData[this.table.params.pageNum - 1]
|
||||
} else {
|
||||
this.index()
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
'current-page-change',
|
||||
() => {
|
||||
this.table.params.pageNum = data.page
|
||||
if (this.isWebPaging) {
|
||||
this.table.data = []
|
||||
requestAnimationFrame(() => {
|
||||
this.table.data = this.table.webPagingData[data.page - 1]
|
||||
})
|
||||
} else {
|
||||
this.index()
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
'field-change',
|
||||
() => {
|
||||
console.warn('field-change')
|
||||
}
|
||||
],
|
||||
[
|
||||
'default',
|
||||
() => {
|
||||
console.warn('No action defined')
|
||||
}
|
||||
],
|
||||
[
|
||||
'export',
|
||||
() => {
|
||||
ElMessage({
|
||||
message: '正在导出,请稍等...',
|
||||
type: 'info',
|
||||
duration: 1000
|
||||
})
|
||||
let params = { ...this.table.params, pageNum: 1, pageSize: this.table.total }
|
||||
setTimeout(() => {
|
||||
createAxios(
|
||||
Object.assign(
|
||||
{
|
||||
url: this.url,
|
||||
method: this.method
|
||||
},
|
||||
requestPayload(this.method, params, this.paramsPOST)
|
||||
)
|
||||
).then(res => {
|
||||
this.table.allData = filtration(res.data.records || res.data)
|
||||
this.table.allFlag = data.showAllFlag || true
|
||||
})
|
||||
}, 1500)
|
||||
}
|
||||
]
|
||||
])
|
||||
const action = actionFun.get(event) || actionFun.get('default')
|
||||
action!.call(this)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user