Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

内部时间组件设置默认值

Browse Source
This commit is contained in:
stt
2025-11-06 14:24:15 +08:00
parent b5aff1a837
commit 593f2e2c66
4 changed files with 205 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/cockpit/indicatorFittingChart/index.vue
View File

@@ -1,14 +1,28 @@
<template>
<div>
<!--主要监测点列表 -->
<TableHeader :showReset="false" datePicker @selectChange="selectChange" v-if="fullscreen">
<TableHeader :showReset="false" @selectChange="selectChange" v-if="fullscreen">
<template v-slot:select>
<el-form-item label="日期">
<DatePicker
ref="datePickerRef"
:nextFlag="false"
:theCurrentTime="true"
:initialInterval="getInitialInterval()"
:initialTimeValue="getInitialTimeValue()"
@change="handleDatePickerChange"
></DatePicker>
</el-form-item>
<el-form-item label="关键词">
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="请输关键字" />
</el-form-item>
</template>
</TableHeader>
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`"></Table>
<Table
ref="tableRef"
@cell-click="cellClickEvent"
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`"
></Table>
<!-- 指标越限详情 -->
<OverLimitDetails ref="OverLimitDetailsRef" />
</div>
@@ -23,6 +37,10 @@ import { ElMessage, ElMessageBox } from 'element-plus'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import { ElTag } from 'element-plus'
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
import DatePicker from '@/components/form/datePicker/index.vue'
const prop = defineProps({
w: { type: String },
h: { type: String },
@@ -34,6 +52,11 @@ const prop = defineProps({
const dictData = useDictData()
const OverLimitDetailsRef = ref()
const headerHeight = ref(57)
const route = useRoute()
const timeCacheStore = useTimeCacheStore()
const datePickerRef = ref()
const selectChange = (showSelect: any, height: any) => {
headerHeight.value = height
}
@@ -49,10 +72,20 @@ const fullscreen = computed(() => {
return false
}
})
// 处理 DatePicker 值变化事件
const handleDatePickerChange = (value: any) => {
console.log('DatePicker value changed:', value)
// 将值缓存到 timeCache
if (value) {
timeCacheStore.setCache(route.path, value.interval, value.timeValue)
}
}
const tableStore: any = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=0',
url: '/system-boot/dashboard/queryPage',
method: 'POST',
showPage: false,
exportName: '主要监测点列表',
column: [
@@ -89,11 +122,23 @@ const tableStore: any = new TableStore({
{ title: '主要存在的电能质量问题', field: 'question', minWidth: '150' }
],
beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
// 尝试从缓存获取时间值
let beginTime, endTime
if (fullscreen.value) {
const cached = timeCacheStore.getCache(route.path)
if (cached && cached.timeValue) {
beginTime = cached.timeValue[0]
endTime = cached.timeValue[1]
}
}
// 如果缓存中没有则使用默认值
tableStore.table.params.searchBeginTime = beginTime || prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
tableStore.table.params.searchEndTime = endTime || prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
},
loadCallback: () => {
tableStore.table.data = [
{
name: '10kV1#电动机',
@@ -139,7 +184,41 @@ const cellClickEvent = ({ row, column }: any) => {
}
}
// 获取缓存的初始值
const getInitialInterval = () => {
if (fullscreen.value) {
const cached = timeCacheStore.getCache(route.path)
if (cached && cached.interval !== undefined) {
return cached.interval
}
}
return 3 // 默认值
}
const getInitialTimeValue = () => {
if (fullscreen.value) {
const cached = timeCacheStore.getCache(route.path)
if (cached && cached.timeValue) {
return cached.timeValue
}
}
return prop.timeValue // 使用传入的默认值
}
// 在组件挂载时设置缓存值到 DatePicker
onMounted(() => {
if (datePickerRef.value) {
const cached = timeCacheStore.getCache(route.path)
if (cached) {
// 如果有缓存值，设置到 DatePicker 组件
if (cached.interval !== undefined) {
datePickerRef.value.setInterval(cached.interval)
}
if (cached.timeValue) {
datePickerRef.value.timeValue = cached.timeValue
}
}
}
tableStore.index()
})
watch(

75
src/components/form/datePicker/index.vue
View File

@@ -1,13 +1,26 @@
<template>
<div style="width: 540px">
<el-select v-model.trim="interval" style="min-width: 90px; width: 90px; margin-right: 10px"
@change="timeChange">
<el-select
v-model.trim="interval"
style="min-width: 90px; width: 90px; margin-right: 10px"
@change="timeChange"
>
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-date-picker v-model.trim="timeValue" type="daterange" :disabled="disabledPicker"
style="width: 220px; margin-right: 10px" unlink-panels :clearable="false" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" :shortcuts="shortcuts" />
<el-date-picker
v-model.trim="timeValue"
type="daterange"
:disabled="disabledPicker"
style="width: 220px; margin-right: 10px"
unlink-panels
:clearable="false"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
:shortcuts="shortcuts"
/>
<el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
<el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
<el-button :disabled="preDisabled" type="primary" :icon="DArrowRight" @click="next"></el-button>
@@ -21,13 +34,19 @@ import { ref, onMounted, nextTick, watch } from 'vue'
interface Props {
nextFlag?: boolean
theCurrentTime?: boolean
initialInterval?: number
initialTimeValue?: any
}
const props = withDefaults(defineProps<Props>(), {
nextFlag: false,
theCurrentTime: true
theCurrentTime: true,
initialInterval: 3,
initialTimeValue: undefined
})
const emit = defineEmits(['change'])
const interval = ref(3)
const timeFlag = ref(1)
const count = ref(0)
@@ -72,8 +91,27 @@ const shortcuts = [
}
]
onMounted(() => {
// 使用传入的初始值
if (props.initialInterval !== undefined) {
interval.value = props.initialInterval
}
if (props.initialTimeValue) {
timeValue.value = props.initialTimeValue
}
timeChange(3)
})
// 添加统一的事件触发方法
const emitChange = () => {
nextTick(() => {
emit('change', {
interval: interval.value,
timeValue: timeValue.value,
timeFlag: timeFlag.value
})
})
}
// 选择时间范围
const timeChange = (e: number) => {
backDisabled.value = false
@@ -110,6 +148,8 @@ const timeChange = (e: number) => {
} else {
timeFlag.value = 1
}
// 触发 change 事件
emitChange()
}
// 当前
@@ -178,6 +218,9 @@ const preClick = () => {
// 判断向后键的状态
// var temp = NowgetEndTime()
// timeStatus(temp, endTime)
// 触发 change 事件
emitChange()
}
//下一个
const next = () => {
@@ -383,7 +426,6 @@ const next = () => {
if (year >= presentY && !props.nextFlag) {
startTime = presentY + '-01-01'
if (presentM < 10) {
if (presentD < 10) {
endTime = presentY + '-0' + presentM + '-0' + presentD
} else {
@@ -400,18 +442,31 @@ const next = () => {
startTime = year + '-01-01'
endTime = year + '-12-31'
}
}
if (!props.nextFlag) {
if (new Date(endTime + ' 00:00:00').getTime() >= new Date(window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd ') + ' 00:00:00').getTime()) {
if (
new Date(endTime + ' 00:00:00').getTime() >=
new Date(window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd ') + ' 00:00:00').getTime()
) {
preDisabled.value = true
}
}
timeValue.value = [startTime, endTime]
// 触发 change 事件
emitChange()
}
// 监听值变化并触发事件
watch(
[interval, timeValue],
() => {
emitChange()
},
{ deep: true }
)
const setTime = (flag = 0, e = 0) => {
let dd = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'dd')

33
src/stores/timeCache.ts Normal file
View File

@@ -0,0 +1,33 @@
// src/stores/timeCache.ts
import { defineStore } from 'pinia'
import { RouteLocationNormalizedLoaded } from 'vue-router'
interface TimeCacheState {
cache: Map<string, {
interval: number | undefined
timeValue: any
}>
}
export const useTimeCacheStore = defineStore('timeCache', {
state: (): TimeCacheState => ({
cache: new Map()
}),
actions: {
setCache(routePath: string, interval: number | undefined, timeValue: any) {
this.cache.set(routePath, {
interval,
timeValue
})
},
getCache(routePath: string) {
return this.cache.get(routePath)
},
hasCache(routePath: string) {
return this.cache.has(routePath)
}
}
})

23
src/views/pqs/cockpit/homePage/index.vue
View File

@@ -3,7 +3,7 @@
<TableHeader :showSearch="false" v-if="flag">
<template v-slot:select>
<el-form-item label="日期">
<DatePicker ref="datePickerRef" :nextFlag="false" :theCurrentTime="true"></DatePicker>
<DatePicker ref="datePickerRef" :nextFlag="false" :theCurrentTime="true" @change="handleDatePickerChange"></DatePicker>
</el-form-item>
</template>
<template v-slot:operation>
@@ -42,6 +42,7 @@
:height="rowHeight * item.h - seRowHeight(item.h) + 'px'"
:width="rowWidth * item.w - 30 + 'px'"
:timeKey="(item as LayoutItem).timeKey"
:interval="datePickerRef?.interval"
:w="item.w"
:h="item.h"
/>
@@ -63,10 +64,13 @@ import DatePicker from '@/components/form/datePicker/index.vue'
import { useDebounceFn } from '@vueuse/core'
import { queryActivatePage, queryByPagePath } from '@/api/system-boot/csstatisticalset'
import RoutingConfig from '@/views/pqs/cockpit/homePage/components/routingConfig.vue'
import { useRouter } from 'vue-router'
import { useRouter,useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
const { push } = useRouter()
const datePickerRef = ref()
const router = useRouter()
const route = useRoute()
const timeCacheStore = useTimeCacheStore()
defineOptions({
// name: 'dashboard/index'
@@ -225,6 +229,21 @@ const editd = (e: any) => {
const settings = () => {
RoutingConfigRef.value.open()
}
// 处理 DatePicker 值变化事件
const handleDatePickerChange = (value: any) => {
console.log('DatePicker value changed111:', value)
// 将值缓存到 timeCache
if (value) {
timeCacheStore.setCache(
route.path,
value.interval,
value.timeValue
)
}
}
// 生命周期钩子
onMounted(() => {
// initRowHeight()