linweidong
/
besure_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style：首页样式/筛选框优化

Browse Source
master
黄伟杰 5 days ago
parent 9d3ab2553b
commit 0c5861e807
4 changed files with 236 additions and 41 deletions
Show Stats Download Patch File Download Diff File

268
src/components/dashboard/DeviceSection.vue
Unescape Escape View File

@ -44,21 +44,8 @@
<view class="rate-trend-section">
<view class="rate-trend-header">
<text class="rate-trend-title">{{ t('deviceOverview.rateTrend') }}</text>
<picker mode="selector" :range="periodRange" range-key="text" :value="periodIndex" @change="onPeriodChange">
<view class="filter-select">
<text class="filter-text">{{ currentPeriodLabel }}</text>
<text class="filter-arrow">▼</text>
</view>
</picker>
</view>
<view class="switch-bar">
<view class="switch-item">
<text class="switch-label">{{ t('deviceOverview.onlyScheduled') }}</text>
<up-switch v-model="onlyScheduled" size="20" activeColor="#1a3a5c" @change="onSwitchChange" />
</view>
<view class="switch-item">
<text class="switch-label">{{ t('deviceOverview.skipHoliday') }}</text>
<up-switch v-model="skipHoliday" size="20" activeColor="#1a3a5c" @change="onSwitchChange" />
<view class="trend-filter-icon" @click="openTrendFilterDrawer">
<uni-icons type="settings" size="22" color="#7b8491"></uni-icons>
</view>
</view>
<view class="chart-box">
@ -66,6 +53,37 @@
</view>
</view>
<uni-popup ref="trendFilterPopupRef" class="trend-filter-popup" type="right" background-color="transparent" :animation="false">
<view class="filter-drawer">
<view class="drawer-header">
<text class="drawer-title">{{ t('functionCommon.moreFilter') }}</text>
</view>
<scroll-view scroll-y class="drawer-body">
<view class="drawer-field">
<text class="drawer-label">{{ t('deviceOverview.trendPeriod') }}</text>
<picker mode="selector" :range="periodRange" range-key="text" :value="draftPeriodIndex" @change="onTrendFilterPeriodChange">
<view class="drawer-picker">
<text class="drawer-picker-text">{{ draftPeriodLabel }}</text>
<uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
</view>
</picker>
</view>
<view class="drawer-switch-field">
<text class="drawer-label">{{ t('deviceOverview.onlyScheduled') }}</text>
<up-switch v-model="draftTrendFilter.onlyScheduled" size="22" activeColor="#1a3a5c" />
</view>
<view class="drawer-switch-field">
<text class="drawer-label">{{ t('deviceOverview.skipHoliday') }}</text>
<up-switch v-model="draftTrendFilter.skipHoliday" size="22" activeColor="#1a3a5c" />
</view>
</scroll-view>
<view class="drawer-actions">
<view class="drawer-action reset" @click="resetTrendFilterDrawer">{{ t('functionCommon.reset') }}</view>
<view class="drawer-action confirm" @click="confirmTrendFilterDrawer">{{ t('functionCommon.confirm') }}</view>
</view>
</view>
</uni-popup>
<!-- 近7日平均稼动率排名 -->
<view class="rate-trend-section">
<view class="rate-trend-header">
@ -106,6 +124,7 @@ import { useI18n } from 'vue-i18n'
import request from '@/utils/request'
const { t } = useI18n()
const trendFilterPopupRef = ref(null)
const deviceData = reactive({
totalDevices: 0,
@ -121,6 +140,11 @@ const deviceData = reactive({
const currentPeriod = ref('LAST_7_DAYS')
const onlyScheduled = ref(true)
const skipHoliday = ref(false)
const draftTrendFilter = reactive({
period: 'LAST_7_DAYS',
onlyScheduled: true,
skipHoliday: false
})
const periodRange = computed(() => [
{ text: t('deviceOverview.periodLastWeek'), value: 'LAST_WEEK' },
@ -130,8 +154,8 @@ const periodRange = computed(() => [
{ text: t('deviceOverview.periodThisMonth'), value: 'THIS_MONTH' }
])
const periodIndex = computed(() => {
const idx = periodRange.value.findIndex(item => item.value === currentPeriod.value)
const draftPeriodIndex = computed(() => {
const idx = periodRange.value.findIndex(item => item.value === draftTrendFilter.period)
return idx >= 0 ? idx : 0
})
@ -147,6 +171,10 @@ const currentPeriodLabel = computed(() => {
return periodLabelMap.value[currentPeriod.value] || t('deviceOverview.periodLast7Days')
})
const draftPeriodLabel = computed(() => {
return periodLabelMap.value[draftTrendFilter.period] || t('deviceOverview.periodLast7Days')
})
const rankingTitle = computed(() => {
const period = currentPeriodLabel.value
return t('deviceOverview.utilizationRanking').replace('近7日', period)
@ -180,12 +208,7 @@ const rankingChartOpts = {
dataLabel: true,
legend: { show: false },
xAxis: { disableGrid: true, max: 100, axisLabel: { padding: [0, 0, 0, 10] } },
yAxis: { disableGrid: true, axisLabel: { padding: [0, 10, 0, 0], formatter: function(value) {
if (value.length > 10) {
return value.substring(0, 10) + '...';
}
return value;
} } },
yAxis: { disableGrid: true, axisLabel: { padding: [0, 10, 0, 0], formatter: formatRankingAxisLabel } },
extra: {
bar: {
type: 'group',
@ -206,6 +229,23 @@ const rankingChartData = reactive({
series: [{ name: '', data: [] }]
})
function formatRankingAxisLabel(value) {
return truncateByDisplayWidth(value, 6)
}
function truncateByDisplayWidth(value, maxWidth) {
const text = String(value || '')
let width = 0
let result = ''
for (const char of text) {
const charWidth = /[^\x00-\xff]/.test(char) ? 1 : 0.5
if (width + charWidth > maxWidth) return result + '...'
width += charWidth
result += char
}
return text
}
const ITEM_HEIGHT_PX = 30
const MAX_VISIBLE = 6
const rankingScrollHeight = computed(() => {
@ -363,18 +403,56 @@ function onDeviceChange(e) {
loadDeviceRateTrend()
}
function onPeriodChange(e) {
const idx = e.detail.value
function syncDraftTrendFilter() {
draftTrendFilter.period = currentPeriod.value
draftTrendFilter.onlyScheduled = onlyScheduled.value
draftTrendFilter.skipHoliday = skipHoliday.value
}
function openTrendFilterDrawer() {
syncDraftTrendFilter()
trendFilterPopupRef.value?.open()
}
function closeTrendFilterDrawer() {
trendFilterPopupRef.value?.close()
}
function onTrendFilterPeriodChange(e) {
const idx = Number(e?.detail?.value || 0)
const val = periodRange.value[idx]?.value
if (!val) return
currentPeriod.value = val
loadRateTrend()
loadUtilizationRanking()
loadDeviceRateTrend()
draftTrendFilter.period = val
}
function onSwitchChange() {
loadRateTrend()
async function refreshTrendData() {
await Promise.all([
loadRateTrend(),
loadUtilizationRanking(),
loadDeviceRateTrend()
])
}
async function confirmTrendFilterDrawer() {
const changed = currentPeriod.value !== draftTrendFilter.period ||
onlyScheduled.value !== draftTrendFilter.onlyScheduled ||
skipHoliday.value !== draftTrendFilter.skipHoliday
currentPeriod.value = draftTrendFilter.period
onlyScheduled.value = draftTrendFilter.onlyScheduled
skipHoliday.value = draftTrendFilter.skipHoliday
closeTrendFilterDrawer()
if (changed) await refreshTrendData()
}
async function resetTrendFilterDrawer() {
draftTrendFilter.period = 'LAST_7_DAYS'
draftTrendFilter.onlyScheduled = true
draftTrendFilter.skipHoliday = false
currentPeriod.value = draftTrendFilter.period
onlyScheduled.value = draftTrendFilter.onlyScheduled
skipHoliday.value = draftTrendFilter.skipHoliday
closeTrendFilterDrawer()
await refreshTrendData()
}
onMounted(async () => {
@ -509,24 +587,136 @@ defineExpose({ loadDeviceOverview, loadRateTrend, loadUtilizationRanking, loadDe
color: #999999;
}
.switch-bar {
.trend-filter-icon {
width: 56rpx;
height: 56rpx;
display: flex;
align-items: center;
margin-bottom: 20rpx;
gap: 32rpx;
justify-content: center;
border-radius: 12rpx;
background: #f0f2f5;
&:active {
background: #e8ecf0;
}
}
.switch-item {
:deep(.trend-filter-popup.right .uni-popup__content-transition) {
transform: none !important;
}
.filter-drawer {
width: 630rpx;
height: calc(100vh - var(--status-bar-height));
margin-top: var(--status-bar-height);
background: #f5f5f7;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 28rpx 0 0 28rpx;
}
.drawer-header {
height: 104rpx;
padding: 18rpx 34rpx 0;
background: #ffffff;
display: flex;
align-items: center;
gap: 8rpx;
box-sizing: border-box;
}
.switch-label {
font-size: 24rpx;
color: #666666;
.drawer-title {
color: #1f2937;
font-size: 34rpx;
line-height: 1.3;
font-weight: 700;
}
.drawer-body {
flex: 1;
min-height: 0;
padding: 28rpx 28rpx 0;
box-sizing: border-box;
}
.drawer-field,
.drawer-switch-field {
background: #ffffff;
border-radius: 16rpx;
padding: 24rpx 26rpx;
margin-bottom: 22rpx;
box-sizing: border-box;
}
.drawer-field {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.drawer-switch-field {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
}
.drawer-label {
font-size: 26rpx;
color: #374151;
font-weight: 500;
}
.drawer-picker {
height: 72rpx;
border: 1rpx solid #d9dde5;
border-radius: 10rpx;
padding: 0 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.drawer-picker-text {
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 26rpx;
color: #1f2937;
}
.drawer-actions {
flex: 0 0 auto;
padding: 22rpx 28rpx calc(22rpx + env(safe-area-inset-bottom));
background: #ffffff;
display: flex;
gap: 18rpx;
box-sizing: border-box;
}
.drawer-action {
flex: 1;
height: 76rpx;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-weight: 600;
}
.drawer-action.reset {
color: #4b5563;
background: #f3f4f6;
}
.drawer-action.confirm {
color: #ffffff;
background: #1a3a5c;
}
.chart-box {
width: 100%;
height: 450rpx;

1
src/locales/en-US.js
Unescape Escape View File

@ -143,6 +143,7 @@ export default {
rateTrend: 'Utilization / Boot Rate Trend',
onlyScheduled: 'Scheduled Only',
skipHoliday: 'Skip Holidays',
trendPeriod: 'Trend Period',
periodLastWeek: 'Last Week',
periodThisWeek: 'This Week',
periodLast7Days: 'Last 7 Days',

1
src/locales/zh-CN.js
Unescape Escape View File

@ -143,6 +143,7 @@ export default {
rateTrend: '稼动率/开机率趋势',
onlyScheduled: '只统计排产设备',
skipHoliday: '跳过节假日',
trendPeriod: '统计周期',
periodLastWeek: '上周',
periodThisWeek: '本周',
periodLast7Days: '近7日',

7
src/pages/index.vue
Unescape Escape View File

@ -1,4 +1,4 @@
<template>
<template>
<view class="page-container">
<NavBar :title="pageTitle" />
<scroll-view scroll-y class="main-scroll" :scroll-top="scrollTop" scroll-with-animation @scroll="onScroll">
@ -140,17 +140,20 @@ onMounted(() => {
.page-container {
display: flex;
flex-direction: column;
height: 100vh;
min-height: 100vh;
overflow: hidden;
background-color: #f0f2f5;
}
.main-scroll {
flex: 1;
min-height: 0;
height: 100%;
}
.content-section {
padding: 0 24rpx 24rpx;
padding: 0 24rpx calc(24rpx + 120rpx + env(safe-area-inset-bottom));
margin-top: -40rpx;
position: relative;
z-index: 1;

Write Preview
Loading…
Cancel
Save