调整台账管理页面

This commit is contained in:
guanj
2025-10-15 10:16:30 +08:00
parent 1496b64c76
commit c9a47917e4
7 changed files with 3766 additions and 6553 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,364 +1,364 @@
import dayjs from 'dayjs'
import type { TableColumnCtx } from 'element-plus'
import { sw } from 'element-plus/es/locale'
/**
* 日期快捷选项适用于 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: string): [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')
}
}
import dayjs from 'dayjs'
import type { TableColumnCtx } from 'element-plus'
import { sw } from 'element-plus/es/locale'
/**
* 日期快捷选项适用于 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: string): [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')
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -1,107 +1,107 @@
<template>
<my-echart v-loading="loading" class="mt10" :style="`height: calc(${tableStore.table.height} - 135px)`"
:options="options" />
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const options = ref({})
const TableHeaderRef = ref()
const tableStoreParams: any = ref({})
const loading = ref(false)
const getTableStoreParams = async (val: any) => {
tableStoreParams.value = val
loading.value = true
setTimeout(() => {
tableStore.index()
}, 1500)
}
const tableStore = new TableStore({
url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
showPage: false,
method: 'POST',
column: [],
beforeSearchFun: () => {
tableStore.table.params = tableStoreParams.value
},
loadCallback: () => {
// tableStore.table.data.type
let code = tableStore.table.params.statisticalType.code
let title = '',
titleX = ''
if (code == 'Power_Network') {
title = '区域'
titleX = '区域'
} else if (code == 'Manufacturer') {
title = '终端厂家'
titleX = '终端\n厂家'
} else if (code == 'Voltage_Level') {
title = '电压等级'
titleX = '电压\n等级'
} else if (code == 'Load_Type') {
title = '干扰源类型'
titleX = '干扰\n源类型'
} else if (code == 'Report_Type') {
title = '上报类型'
titleX = '上报\n类型'
}
options.value = {
title: {
text: title
},
// tooltip: {
// formatter: function (params: any) {
// var tips = ''
// for (var i = 0; i < params.length; i++) {
// if (params[i].value == 1) {
// tips += params[i].name + '</br>'
// tips += '总畸变率:暂无数据'
// } else {
// tips += params[i].name + '</br>'
// tips += '总畸变率:' + params[i].value.toFixed(2)
// }
// }
// return tips
// }
// },
xAxis: {
name: titleX,
data: tableStore.table.data.type
},
yAxis: {
name: '%',
max: 100
},
series: [
{
name: '总畸变率',
type: 'bar',
data: tableStore.table.data.single,
}
]
}
loading.value = false
}
})
provide('tableStore', tableStore)
onMounted(() => { })
defineExpose({ getTableStoreParams })
</script>
<style scoped lang="scss"></style>
<template>
<my-echart v-loading="loading" class="mt10" :style="`height: calc(${tableStore.table.height} - 135px)`"
:options="options" />
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const options = ref({})
const TableHeaderRef = ref()
const tableStoreParams: any = ref({})
const loading = ref(false)
const getTableStoreParams = async (val: any) => {
tableStoreParams.value = val
loading.value = true
setTimeout(() => {
tableStore.index()
}, 1500)
}
const tableStore = new TableStore({
url: '/harmonic-boot/tHDistortion/getTHDistortionCensus',
showPage: false,
method: 'POST',
column: [],
beforeSearchFun: () => {
tableStore.table.params = tableStoreParams.value
},
loadCallback: () => {
// tableStore.table.data.type
let code = tableStore.table.params.statisticalType.code
let title = '',
titleX = ''
if (code == 'Power_Network') {
title = '区域'
titleX = '区域'
} else if (code == 'Manufacturer') {
title = '终端厂家'
titleX = '终端\n厂家'
} else if (code == 'Voltage_Level') {
title = '电压等级'
titleX = '电压\n等级'
} else if (code == 'Load_Type') {
title = '干扰源类型'
titleX = '干扰\n源类型'
} else if (code == 'Report_Type') {
title = '上报类型'
titleX = '上报\n类型'
}
options.value = {
title: {
text: title
},
// tooltip: {
// formatter: function (params: any) {
// var tips = ''
// for (var i = 0; i < params.length; i++) {
// if (params[i].value == 1) {
// tips += params[i].name + '</br>'
// tips += '总畸变率:暂无数据'
// } else {
// tips += params[i].name + '</br>'
// tips += '总畸变率:' + params[i].value.toFixed(2)
// }
// }
// return tips
// }
// },
xAxis: {
name: titleX,
data: tableStore.table.data.type
},
yAxis: {
name: '%',
max: 100
},
series: [
{
name: '总畸变率',
type: 'bar',
data: tableStore.table.data.single,
}
]
}
loading.value = false
}
})
provide('tableStore', tableStore)
onMounted(() => { })
defineExpose({ getTableStoreParams })
</script>
<style scoped lang="scss"></style>

View File

@@ -1,137 +1,137 @@
<template>
<div class="default-main">
<TableHeader :showSearch="false">
<template v-slot:operation>
<el-button type="primary" @click="add" icon="el-icon-Plus">新增</el-button>
</template>
</TableHeader>
<Table
ref="tableRef"
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
:scroll-y="{ enabled: true }"
/>
<Add ref="addRef" v-if="addFlag" @onSubmit="tableStore.index()" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { useDictData } from '@/stores/dictData'
import { ElMessage } from 'element-plus'
import TableHeader from '@/components/table/header/index.vue'
import Add from './add.vue'
import { deleteSubassembly } from '@/api/user-boot/dept'
const dictData = useDictData()
defineOptions({
name: 'component'
})
const addRef = ref()
const addFlag = ref(false)
const tableRef = ref()
const treeData: any = ref([])
const tableStore = new TableStore({
url: '/user-boot/component/componentTree',
method: 'GET',
showPage: false,
column: [
{ field: 'name', title: '功能组件名称', align: 'left', treeNode: true },
{
title: '组件图标',
field: 'icon',
align: 'center',
width: '80',
render: 'icon'
},
{ field: 'code', title: '组件标识' },
{ field: 'path', title: '组件路径' },
{ field: 'image', title: '组件展示', render: 'image' },
{
title: '操作',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '修改',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
disabled: row => {
return row.path == '' || row.path == null
},
click: row => {
addFlag.value = true
setTimeout(() => {
addRef.value.open('修改组件', row)
}, 100)
}
},
{
name: 'del',
text: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
disabled: row => {
return row.path == '' || row.path == null
},
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除?'
},
click: row => {
deleteSubassembly({ id: row.id }).then(res => {
ElMessage.success('删除成功!')
tableStore.index()
})
}
}
]
}
],
loadCallback: () => {
addFlag.value = false
setTimeout(() => {
tableRef.value.getRef().setAllTreeExpand(true)
}, 1000)
tableStore.table.data.forEach(item => {
item.state = 0
})
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
tableStore.table.data = treeData.value
}
})
const tree2List = (list: any, id: any) => {
//存储结果的数组
let arr: any = []
// 遍历 tree 数组
list.forEach((item: any) => {
item.uPid = id
item.uId = Math.random() * 1000
// 判断item是否存在children
if (!item.children) return arr.push(item)
// 函数递归对children数组进行tree2List的转换
const children = tree2List(item.children, item.uId)
// 删除item的children属性
delete item.children
// 把item和children数组添加至结果数组
//..children: 意思是把children数组展开
arr.push(item, ...children)
})
// 返回结果数组
return arr
}
// 新增
const add = () => {
addFlag.value = true
setTimeout(() => {
addRef.value.open('新增组件')
}, 100)
}
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
</script>
<template>
<div class="default-main">
<TableHeader :showSearch="false">
<template v-slot:operation>
<el-button type="primary" @click="add" icon="el-icon-Plus">新增</el-button>
</template>
</TableHeader>
<Table
ref="tableRef"
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
:scroll-y="{ enabled: true }"
/>
<Add ref="addRef" v-if="addFlag" @onSubmit="tableStore.index()" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import { useDictData } from '@/stores/dictData'
import { ElMessage } from 'element-plus'
import TableHeader from '@/components/table/header/index.vue'
import Add from './add.vue'
import { deleteSubassembly } from '@/api/user-boot/dept'
const dictData = useDictData()
defineOptions({
name: 'component'
})
const addRef = ref()
const addFlag = ref(false)
const tableRef = ref()
const treeData: any = ref([])
const tableStore = new TableStore({
url: '/user-boot/component/componentTree',
method: 'GET',
showPage: false,
column: [
{ field: 'name', title: '功能组件名称', align: 'left', treeNode: true },
{
title: '组件图标',
field: 'icon',
align: 'center',
width: '80',
render: 'icon'
},
{ field: 'code', title: '组件标识' },
{ field: 'path', title: '组件路径' },
{ field: 'image', title: '组件展示', render: 'image' },
{
title: '操作',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '修改',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
disabled: row => {
return row.path == '' || row.path == null
},
click: row => {
addFlag.value = true
setTimeout(() => {
addRef.value.open('修改组件', row)
}, 100)
}
},
{
name: 'del',
text: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
disabled: row => {
return row.path == '' || row.path == null
},
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除?'
},
click: row => {
deleteSubassembly({ id: row.id }).then(res => {
ElMessage.success('删除成功!')
tableStore.index()
})
}
}
]
}
],
loadCallback: () => {
addFlag.value = false
setTimeout(() => {
tableRef.value.getRef().setAllTreeExpand(true)
}, 0)
tableStore.table.data.forEach(item => {
item.state = 0
})
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
tableStore.table.data = treeData.value
}
})
const tree2List = (list: any, id: any) => {
//存储结果的数组
let arr: any = []
// 遍历 tree 数组
list.forEach((item: any) => {
item.uPid = id
item.uId = Math.random() * 1000
// 判断item是否存在children
if (!item.children) return arr.push(item)
// 函数递归对children数组进行tree2List的转换
const children = tree2List(item.children, item.uId)
// 删除item的children属性
delete item.children
// 把item和children数组添加至结果数组
//..children: 意思是把children数组展开
arr.push(item, ...children)
})
// 返回结果数组
return arr
}
// 新增
const add = () => {
addFlag.value = true
setTimeout(() => {
addRef.value.open('新增组件')
}, 100)
}
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
</script>

View File

@@ -29,7 +29,7 @@
</el-select>
</el-form-item>
<el-form-item class="top" label="部门区域:" prop="area">
<el-select v-model="form.area" placeholder="选择子类型" style="width: 100%">
<el-select v-model="form.area" placeholder="选择部门区域" style="width: 100%">
<el-option
v-for="item in areaOption"
:key="item.id"