diff --git a/src/components/dashboard/DeviceSection.vue b/src/components/dashboard/DeviceSection.vue
index c056d2b..8206c71 100644
--- a/src/components/dashboard/DeviceSection.vue
+++ b/src/components/dashboard/DeviceSection.vue
@@ -44,10 +44,12 @@
@@ -80,10 +82,12 @@
@@ -93,10 +97,6 @@
-
-
@@ -118,21 +118,23 @@ const deviceData = reactive({
faultRate: '-'
})
-const showPeriodPicker = ref(false)
const currentPeriod = ref('LAST_7_DAYS')
const onlyScheduled = ref(true)
const skipHoliday = ref(false)
-const periodColumns = computed(() => [
- [
- { text: t('deviceOverview.periodLastWeek'), value: 'LAST_WEEK' },
- { text: t('deviceOverview.periodThisWeek'), value: 'THIS_WEEK' },
- { text: t('deviceOverview.periodLast7Days'), value: 'LAST_7_DAYS' },
- { text: t('deviceOverview.periodLastMonth'), value: 'LAST_MONTH' },
- { text: t('deviceOverview.periodThisMonth'), value: 'THIS_MONTH' }
- ]
+const periodRange = computed(() => [
+ { text: t('deviceOverview.periodLastWeek'), value: 'LAST_WEEK' },
+ { text: t('deviceOverview.periodThisWeek'), value: 'THIS_WEEK' },
+ { text: t('deviceOverview.periodLast7Days'), value: 'LAST_7_DAYS' },
+ { text: t('deviceOverview.periodLastMonth'), value: 'LAST_MONTH' },
+ { text: t('deviceOverview.periodThisMonth'), value: 'THIS_MONTH' }
])
+const periodIndex = computed(() => {
+ const idx = periodRange.value.findIndex(item => item.value === currentPeriod.value)
+ return idx >= 0 ? idx : 0
+})
+
const periodLabelMap = computed(() => ({
LAST_WEEK: t('deviceOverview.periodLastWeek'),
THIS_WEEK: t('deviceOverview.periodThisWeek'),
@@ -200,15 +202,19 @@ const rankingChartHeight = computed(() => {
return `${count * ITEM_HEIGHT_PX + 30}px`
})
-const showDevicePicker = ref(false)
const deviceList = ref([])
const selectedDeviceId = ref(null)
const selectedDeviceName = ref('')
const isInitialLoad = ref(true)
-const deviceColumns = computed(() => [
+const deviceRange = computed(() =>
deviceList.value.map((d) => ({ text: d.deviceName || d.name || '', value: d.id }))
-])
+)
+
+const deviceIndex = computed(() => {
+ const idx = deviceRange.value.findIndex(item => item.value === selectedDeviceId.value)
+ return idx >= 0 ? idx : 0
+})
const deviceTrendChartOpts = {
color: ['#1a3a5c', '#18bc37'],
@@ -347,18 +353,20 @@ async function loadDeviceRateTrend() {
]
}
-function onDeviceConfirm(e) {
- const val = e.value[0]
- selectedDeviceId.value = val.value
- selectedDeviceName.value = val.text
- showDevicePicker.value = false
+function onDeviceChange(e) {
+ const idx = e.detail.value
+ const item = deviceRange.value[idx]
+ if (!item) return
+ selectedDeviceId.value = item.value
+ selectedDeviceName.value = item.text
loadDeviceRateTrend()
}
-function onPeriodConfirm(e) {
- const val = e.value[0]?.value || e.value[0]
+function onPeriodChange(e) {
+ const idx = e.detail.value
+ const val = periodRange.value[idx]?.value
+ if (!val) return
currentPeriod.value = val
- showPeriodPicker.value = false
loadRateTrend()
}
diff --git a/src/components/dashboard/PlanSection.vue b/src/components/dashboard/PlanSection.vue
index a4a9f22..16ca098 100644
--- a/src/components/dashboard/PlanSection.vue
+++ b/src/components/dashboard/PlanSection.vue
@@ -7,27 +7,27 @@
-
- {{ currentFilterLabel }}
- ▼
-
-
- {{ currentRangeLabel }}
- ▼
-
+
+
+ {{ currentFilterLabel }}
+ ▼
+
+
+
+
+ {{ currentRangeLabel }}
+ ▼
+
+
-
-
+
-
-
+
@@ -92,11 +92,6 @@
-
-
-
@@ -126,35 +121,37 @@ const passRateChartOpts = {
extra: { line: { type: 'straight', width: 2, activeType: 'hollow' } }
}
-const showFilterPicker = ref(false)
-const showRangePicker = ref(false)
-const startPickerRef = ref(null)
-const endPickerRef = ref(null)
const currentFilter = ref('task')
const currentRange = ref('year')
const isInitialLoad = ref(true)
-const filterColumns = computed(() => [
- [
- { text: t('dashboard.filterTask'), value: 'task' },
- { text: t('dashboard.filterProduct'), value: 'product' }
- ]
+const filterRange = computed(() => [
+ { text: t('dashboard.filterTask'), value: 'task' },
+ { text: t('dashboard.filterProduct'), value: 'product' }
])
+const filterIndex = computed(() => {
+ const idx = filterRange.value.findIndex(item => item.value === currentFilter.value)
+ return idx >= 0 ? idx : 0
+})
+
const currentFilterLabel = computed(() => {
return currentFilter.value === 'task' ? t('dashboard.filterTask') : t('dashboard.filterProduct')
})
-const rangeColumns = computed(() => [
- [
- { text: t('dashboard.rangeYear'), value: 'year' },
- { text: t('dashboard.rangeMonth'), value: 'month' },
- { text: t('dashboard.rangeWeek'), value: 'week' },
- { text: t('dashboard.rangeToday'), value: 'today' },
- { text: t('dashboard.rangeCustom'), value: 'custom' }
- ]
+const rangeRange = computed(() => [
+ { text: t('dashboard.rangeYear'), value: 'year' },
+ { text: t('dashboard.rangeMonth'), value: 'month' },
+ { text: t('dashboard.rangeWeek'), value: 'week' },
+ { text: t('dashboard.rangeToday'), value: 'today' },
+ { text: t('dashboard.rangeCustom'), value: 'custom' }
])
+const rangeIndex = computed(() => {
+ const idx = rangeRange.value.findIndex(item => item.value === currentRange.value)
+ return idx >= 0 ? idx : 0
+})
+
const rangeLabelMap = computed(() => ({
year: t('dashboard.rangeYear'),
month: t('dashboard.rangeMonth'),
@@ -292,21 +289,11 @@ function transformChartData(dayTrend, rangeType) {
}
}
-function formatTimestamp(ts) {
- const d = new Date(ts)
- const pad = (n) => String(n).padStart(2, '0')
- return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
-}
-
-function datetimeFormatter(type, value) {
- const unitMap = { year: '年', month: '月', day: '日', hour: '时', minute: '分' }
- return value + (unitMap[type] || '')
-}
-
-function onFilterConfirm(e) {
- const val = e.value[0]?.value || e.value[0]
+function onFilterChange(e) {
+ const idx = e.detail.value
+ const val = filterRange.value[idx]?.value
+ if (!val) return
currentFilter.value = val
- showFilterPicker.value = false
if (val === 'product') {
loadTrendData()
} else if (val === 'task') {
@@ -314,10 +301,11 @@ function onFilterConfirm(e) {
}
}
-function onRangeConfirm(e) {
- const val = e.value[0]?.value || e.value[0]
+function onRangeChange(e) {
+ const idx = e.detail.value
+ const val = rangeRange.value[idx]?.value
+ if (!val) return
currentRange.value = val
- showRangePicker.value = false
if (val !== 'custom') {
const range = getDateRange(val)
dateRange.start = range.start
@@ -354,33 +342,20 @@ function clearChartData() {
taskChartData.series = [{ name: t('dashboard.taskTrend'), data: [] }]
}
-function onStartDateConfirm(e) {
- dateRange.start = formatTimestamp(e.value)
+function onStartDateChange(val) {
+ dateRange.start = val
if (dateRange.start && dateRange.end) {
- if (currentFilter.value === 'product') {
- loadTrendData()
- } else if (currentFilter.value === 'task') {
- loadTaskTrendData()
- }
+ loadData()
}
}
-function onEndDateConfirm(e) {
- dateRange.end = formatTimestamp(e.value)
+function onEndDateChange(val) {
+ dateRange.end = val
if (dateRange.start && dateRange.end) {
- if (currentFilter.value === 'product') {
- loadTrendData()
- } else if (currentFilter.value === 'task') {
- loadTaskTrendData()
- }
+ loadData()
}
}
-function onPickerClose() {
- if (startPickerRef.value) startPickerRef.value.showByClickInput = false
- if (endPickerRef.value) endPickerRef.value.showByClickInput = false
-}
-
async function loadTrendData() {
const trendTypeMap = { year: 1, month: 2, week: 3, today: 4, custom: 5 }
const params = { trendType: trendTypeMap[currentRange.value] || 2 }
@@ -585,21 +560,20 @@ defineExpose({ loadData })
background: #ffffff;
}
- :deep(.u-datetime-picker) {
+ :deep(.uni-date) {
flex: 1;
+ width: 100%;
- .u-input {
- padding-left: 40rpx;
- background: transparent;
+ .uni-date-editor--x {
border: none;
+ background: transparent;
+ padding: 0;
}
- }
- .up-icon {
- position: absolute;
- left: 12rpx;
- z-index: 1;
- color: #4a90c2;
+ .uni-date__x-input {
+ background: transparent;
+ font-size: 24rpx;
+ }
}
}
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 9f89080..0972571 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -89,7 +89,7 @@ onUnmounted(() => {
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(26, 58, 92, 0.3);
- z-index: 999;
+ z-index: 10;
&:active {
transform: scale(0.95);