917 lines
23 KiB
Vue
917 lines
23 KiB
Vue
<template>
|
||
<view class="statistics-page" :class="`theme-${themeMode}`">
|
||
<view class="hero-card">
|
||
<view class="hero-main">
|
||
<text class="hero-title">个人统计</text>
|
||
<text class="hero-subtitle">查看当前登录用户的扫码与处理数据</text>
|
||
</view>
|
||
<view class="hero-avatar">
|
||
<u-icon name="account-fill" color="#ffffff" size="44" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="profile-card">
|
||
<view class="profile-row">
|
||
<view class="profile-badge">{{ profile.userCode }}</view>
|
||
<view class="profile-meta">
|
||
<text class="profile-name">{{ profile.name }}</text>
|
||
<text class="profile-desc">岗位：{{ profile.position }} · 班组：{{ profile.team }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="profile-extra">
|
||
<view class="profile-chip">{{ profile.department }}</view>
|
||
<view class="profile-chip success">{{ profile.level }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="metric-card">
|
||
<view class="section-header">
|
||
<text class="section-title">核心指标</text>
|
||
<text class="section-subtitle">本月累计</text>
|
||
</view>
|
||
<view class="metric-grid">
|
||
<view v-for="item in metrics" :key="item.label" class="metric-item">
|
||
<text class="metric-value" :class="item.type">{{ item.value }}</text>
|
||
<text class="metric-label">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="process-card">
|
||
<view class="section-header">
|
||
<text class="section-title">工序步骤统计</text>
|
||
<text class="section-subtitle">本月 Top 10</text>
|
||
</view>
|
||
<view v-if="processBreakdown.length" class="process-list">
|
||
<view v-for="item in processBreakdown" :key="item.key" class="process-row">
|
||
<text class="process-name">{{ item.name }}</text>
|
||
<text class="process-count">{{ item.quantity }}</text>
|
||
</view>
|
||
</view>
|
||
<text v-else class="empty-text">本月暂无工序步骤记录</text>
|
||
</view>
|
||
|
||
<view class="trend-card">
|
||
<view class="section-header">
|
||
<text class="section-title">个人趋势</text>
|
||
<text class="section-subtitle">最近 7 天</text>
|
||
</view>
|
||
<view class="bar-chart">
|
||
<view v-for="item in trendData" :key="item.label" class="bar-item">
|
||
<view class="bar-track">
|
||
<view class="bar-fill" :style="{ height: item.percent + '%', backgroundColor: item.color }"></view>
|
||
</view>
|
||
<text class="bar-label">{{ item.label }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="calendar-card">
|
||
<view class="calendar-title-row">
|
||
<view class="calendar-title"><u-icon name="list-dot" color="#1677ff" size="34" /><text>月度总表（{{ calendarMonthLabel }}）</text></view>
|
||
<view class="month-actions"><text @tap="changeMonth(-1)">‹</text><text @tap="changeMonth(1)">›</text></view>
|
||
</view>
|
||
<text class="calendar-hint">日历仅显示是否有数据，点击日期查看当天统计</text>
|
||
<view class="weekday-row"><text v-for="day in weekdays" :key="day">{{ day }}</text></view>
|
||
<view v-for="(week, index) in calendarWeeks" :key="index" class="calendar-week">
|
||
<view v-for="cell in week" :key="cell.date" class="calendar-cell" :class="{ muted: !cell.currentMonth, selected: cell.date === selectedDate, today: cell.isToday, hasData: cell.hasData }" @tap="selectCalendarDate(cell)">
|
||
<text>{{ cell.day }}</text><view v-if="cell.hasData" class="data-dot"></view>
|
||
</view>
|
||
</view>
|
||
<view class="day-detail">
|
||
<view class="day-detail-header"><text>当天明细</text><text>{{ selectedDate }}</text></view>
|
||
<view class="day-metrics">
|
||
<view><text>订单扫码</text><strong>{{ selectedDaySummary.order }}</strong></view>
|
||
<view><text>整机数量</text><strong>{{ selectedDaySummary.product }}</strong></view>
|
||
<view><text>总计</text><strong>{{ selectedDaySummary.total }}</strong></view>
|
||
</view>
|
||
<view v-if="selectedDaySummary.steps.length" class="day-step-list">
|
||
<view v-for="step in selectedDaySummary.steps" :key="step.key" class="day-step-row"><text>{{ step.name }}</text><strong>{{ step.quantity }}</strong></view>
|
||
</view>
|
||
<text v-else class="day-empty">当天暂无工序数据</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="record-card">
|
||
<view class="section-header">
|
||
<text class="section-title">最近明细</text>
|
||
<text class="section-subtitle">最新 5 条</text>
|
||
</view>
|
||
<view v-for="item in recentRecords" :key="item.id" class="record-item">
|
||
<view class="record-top">
|
||
<view>
|
||
<text class="record-main">{{ item.title }}</text>
|
||
<text class="record-sub">{{ item.subtitle }}</text>
|
||
</view>
|
||
<view class="record-pill" :class="item.statusClass">{{ item.status }}</view>
|
||
</view>
|
||
<view class="record-bottom">
|
||
<text>{{ item.time }}</text>
|
||
<text>{{ item.count }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getUserInfo } from '@/api/member.js'
|
||
import { getExceptionStatistics, getOrderRecentRecords, getOrderStatistics, getProductRecentRecords, getProductStatistics, getRepairStatistics, getTodayDashboard } from '@/api/produce/data-entry.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
profile: {
|
||
userCode: 'U001',
|
||
name: '-',
|
||
position: '-',
|
||
team: '-',
|
||
department: '-',
|
||
level: '-'
|
||
},
|
||
metrics: [
|
||
{ label: '订单数', value: '0', type: 'primary' }, { label: '整机数', value: '0', type: 'success' },
|
||
{ label: '本月总计', value: '0', type: 'primary' }, { label: '异常提报', value: '0', type: 'warning' },
|
||
{ label: '维修量', value: '0', type: 'warning' }, { label: '责任订单', value: '0', type: 'danger' }
|
||
],
|
||
trendData: [],
|
||
processBreakdown: [],
|
||
recentRecords: [],
|
||
weekdays: ['一', '二', '三', '四', '五', '六', '日'],
|
||
calendarMonth: new Date(),
|
||
selectedDate: '',
|
||
calendarWeeks: [],
|
||
calendarData: {},
|
||
selectedDaySummary: { order: 0, product: 0, quantity: 0, total: 0, steps: [] },
|
||
}
|
||
},
|
||
computed: {
|
||
calendarMonthLabel() {
|
||
return `${this.calendarMonth.getFullYear()}-${String(this.calendarMonth.getMonth() + 1).padStart(2, '0')}`
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadPageData()
|
||
},
|
||
methods: {
|
||
getCurrentUserCode() {
|
||
const user = uni.getStorageSync('scanapp_user') || {}
|
||
return user.username || user.nickname || 'U001'
|
||
},
|
||
async loadPageData() {
|
||
const userCode = this.getCurrentUserCode()
|
||
const today = new Date()
|
||
const dateText = (date) => date.toISOString().slice(0, 10)
|
||
const todayDate = dateText(today)
|
||
this.selectedDate = todayDate
|
||
this.buildCalendar()
|
||
const monthDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-01`
|
||
try {
|
||
const [profile, orderStats, productStats, repairStats, exceptionStats, dashboard, todayOrderStats, todayProductStats, todayRepairStats, orderRecent, productRecent] = await Promise.all([
|
||
getUserInfo(),
|
||
getOrderStatistics({ user_code: userCode, start_date: monthDate, end_date: todayDate }),
|
||
getProductStatistics({ user_code: userCode, start_date: monthDate, end_date: todayDate }),
|
||
getRepairStatistics({ user_code: userCode, start_date: monthDate, end_date: todayDate }),
|
||
getExceptionStatistics({ user_code: userCode, start_date: monthDate, end_date: todayDate }),
|
||
getTodayDashboard(),
|
||
getOrderStatistics({ user_code: userCode, start_date: todayDate, end_date: todayDate }),
|
||
getProductStatistics({ user_code: userCode, start_date: todayDate, end_date: todayDate }),
|
||
getRepairStatistics({ user_code: userCode, start_date: todayDate, end_date: todayDate }),
|
||
getOrderRecentRecords({ user_code: userCode, start_date: monthDate, end_date: todayDate, limit: 3 }),
|
||
getProductRecentRecords({ user_code: userCode, start_date: monthDate, end_date: todayDate, limit: 3 })
|
||
])
|
||
|
||
this.profile = {
|
||
userCode,
|
||
name: profile.nickname || profile.username || '-',
|
||
position: profile.position || profile.role_name || '-',
|
||
team: profile.team_name || profile.group_name || '-',
|
||
department: profile.department_name || '-',
|
||
level: Number(profile.enabled) === 0 ? '已停用' : '稳定输出'
|
||
}
|
||
|
||
const repairTotal = Number(repairStats?.completed_today || 0)
|
||
const exceptionTotal = Number(exceptionStats?.pending || 0) + Number(exceptionStats?.review || 0) + Number(exceptionStats?.done || 0)
|
||
const monthScanTotal = Number(orderStats?.today_total || 0) + Number(productStats?.today_total || 0)
|
||
const todayTotal = Number(todayOrderStats?.today_total || 0) + Number(todayProductStats?.today_total || 0)
|
||
this.selectedDaySummary = this.makeDaySummary(todayOrderStats, todayProductStats, todayRepairStats)
|
||
const responsibilityTotal = Number(dashboard?.responsibility_order_total || 0)
|
||
this.metrics = [
|
||
{ label: '订单数', value: String(orderStats?.today_total || 0), type: 'primary' },
|
||
{ label: '整机数', value: String(productStats?.today_total || 0), type: 'success' },
|
||
{ label: '本月总计', value: String(monthScanTotal), type: 'primary' },
|
||
{ label: '异常提报', value: String(exceptionTotal), type: 'warning' },
|
||
{ label: '维修量', value: String(repairTotal), type: 'warning' },
|
||
{ label: '责任订单', value: String(responsibilityTotal), type: 'danger' }
|
||
]
|
||
const breakdown = [...(orderStats?.process_breakdown || []), ...(productStats?.process_breakdown || []), ...(repairStats?.process_breakdown || [])]
|
||
const grouped = {}
|
||
breakdown.forEach((item) => {
|
||
const key = `${item.process_id || 'none'}-${item.step_id || 'none'}`
|
||
if (!grouped[key]) grouped[key] = { key, name: `${item.process_name || '未记录工序'} / ${item.step_name || '未记录步骤'}`, quantity: 0 }
|
||
grouped[key].quantity += Number(item.quantity || 0)
|
||
})
|
||
this.processBreakdown = Object.values(grouped).sort((a, b) => b.quantity - a.quantity).slice(0, 10)
|
||
const trendMap = {}
|
||
;[...(orderStats?.daily_trend || []), ...(productStats?.daily_trend || [])].forEach((item) => {
|
||
trendMap[item.date] = (trendMap[item.date] || 0) + Number(item.quantity || 0)
|
||
})
|
||
const trendDates = Object.keys(trendMap).sort().slice(-7)
|
||
const maxTrend = Math.max(1, ...trendDates.map((date) => trendMap[date]))
|
||
this.trendData = trendDates.map((date, index) => ({
|
||
label: date.slice(5),
|
||
value: trendMap[date],
|
||
percent: Math.round(trendMap[date] / maxTrend * 100),
|
||
color: index % 2 ? '#35bfa3' : '#2f6cf6'
|
||
}))
|
||
this.calendarData = trendMap
|
||
this.buildCalendar()
|
||
|
||
const orderItems = Array.isArray(orderRecent?.items) ? orderRecent.items : []
|
||
const productItems = Array.isArray(productRecent?.items) ? productRecent.items : []
|
||
this.recentRecords = [...orderItems, ...productItems].slice(0, 5).map((item, index) => ({
|
||
id: item.id || index,
|
||
title: item.order_no || item.process_order_no || '-',
|
||
subtitle: item.process_name && item.step_name ? `${item.process_name} / ${item.step_name}` : '生产记录',
|
||
status: Number(item.scan_result) === 0 ? '失败' : '成功',
|
||
statusClass: Number(item.scan_result) === 0 ? 'failed' : 'success',
|
||
time: item.scan_date || item.created_date || '-',
|
||
count: item.quantity ? `+${item.quantity}` : '1'
|
||
}))
|
||
|
||
} catch (error) {
|
||
console.error('[scanapp] 统计页数据加载失败', error)
|
||
}
|
||
},
|
||
formatDate(date) {
|
||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
|
||
},
|
||
buildCalendar() {
|
||
const year = this.calendarMonth.getFullYear()
|
||
const month = this.calendarMonth.getMonth()
|
||
const firstDay = (new Date(year, month, 1).getDay() + 6) % 7
|
||
const cells = []
|
||
for (let index = 0; index < 42; index++) {
|
||
const date = new Date(year, month, index - firstDay + 1)
|
||
const value = this.formatDate(date)
|
||
cells.push({ date: value, day: date.getDate(), currentMonth: date.getMonth() === month, isToday: value === this.formatDate(new Date()), hasData: Boolean(this.calendarData[value]) })
|
||
}
|
||
this.calendarWeeks = Array.from({ length: 6 }, (_, index) => cells.slice(index * 7, index * 7 + 7))
|
||
},
|
||
async changeMonth(offset) {
|
||
this.calendarMonth = new Date(this.calendarMonth.getFullYear(), this.calendarMonth.getMonth() + offset, 1)
|
||
const year = this.calendarMonth.getFullYear()
|
||
const month = this.calendarMonth.getMonth() + 1
|
||
const startDate = `${year}-${String(month).padStart(2, '0')}-01`
|
||
const endDate = this.formatDate(new Date(year, month, 0))
|
||
try {
|
||
const [order, product] = await Promise.all([
|
||
getOrderStatistics({ user_code: this.getCurrentUserCode(), start_date: startDate, end_date: endDate }),
|
||
getProductStatistics({ user_code: this.getCurrentUserCode(), start_date: startDate, end_date: endDate })
|
||
])
|
||
this.calendarData = [...(order?.daily_trend || []), ...(product?.daily_trend || [])].reduce((map, item) => ({ ...map, [item.date]: true }), {})
|
||
} catch (error) {
|
||
this.calendarData = {}
|
||
}
|
||
this.buildCalendar()
|
||
const firstCell = this.calendarWeeks.flat().find((cell) => cell.currentMonth)
|
||
if (firstCell) this.selectCalendarDate(firstCell)
|
||
},
|
||
async selectCalendarDate(cell) {
|
||
if (!cell.currentMonth) return
|
||
this.selectedDate = cell.date
|
||
try {
|
||
const [order, product, repair] = await Promise.all([
|
||
getOrderStatistics({ user_code: this.getCurrentUserCode(), start_date: cell.date, end_date: cell.date }),
|
||
getProductStatistics({ user_code: this.getCurrentUserCode(), start_date: cell.date, end_date: cell.date }),
|
||
getRepairStatistics({ user_code: this.getCurrentUserCode(), start_date: cell.date, end_date: cell.date })
|
||
])
|
||
this.selectedDaySummary = this.makeDaySummary(order, product, repair)
|
||
} catch (error) {
|
||
console.error('[scanapp] 日期统计加载失败', error)
|
||
}
|
||
},
|
||
makeDaySummary(order, product, repair) {
|
||
const orderTotal = Number(order?.today_total || 0)
|
||
const productTotal = Number(product?.today_total || 0)
|
||
const repairTotal = Number(repair?.completed_today || 0)
|
||
const rows = [...(order?.process_breakdown || []), ...(product?.process_breakdown || []), ...(repair?.process_breakdown || [])]
|
||
const grouped = {}
|
||
rows.forEach((item) => {
|
||
const key = `${item.process_id || 'none'}-${item.step_id || 'none'}`
|
||
if (!grouped[key]) grouped[key] = { key, name: `${item.process_name || '未记录工序'} / ${item.step_name || '未记录步骤'}`, quantity: 0 }
|
||
grouped[key].quantity += Number(item.quantity || 0)
|
||
})
|
||
return { order: orderTotal, product: productTotal, quantity: productTotal, total: orderTotal + productTotal + repairTotal, steps: Object.values(grouped).sort((a, b) => b.quantity - a.quantity) }
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.statistics-page {
|
||
min-height: 100vh;
|
||
padding: 24rpx 22rpx 40rpx;
|
||
box-sizing: border-box;
|
||
background: #f5f7fb;
|
||
}
|
||
|
||
.hero-card,
|
||
.profile-card,
|
||
.calendar-card,
|
||
.metric-card,
|
||
.trend-card,
|
||
.record-card,
|
||
.process-card {
|
||
margin-top: 18rpx;
|
||
padding: 24rpx;
|
||
border-radius: 22rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 10rpx 26rpx rgba(23, 35, 61, 0.05);
|
||
}
|
||
|
||
.calendar-title-row,
|
||
.calendar-title,
|
||
.month-actions,
|
||
.weekday-row,
|
||
.calendar-week,
|
||
.day-detail-header,
|
||
.day-metrics {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.calendar-title-row,
|
||
.day-detail-header {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.calendar-title {
|
||
gap: 12rpx;
|
||
color: #17233d;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.month-actions text {
|
||
padding: 4rpx 14rpx;
|
||
color: #1677ff;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.calendar-hint {
|
||
display: block;
|
||
margin-top: 16rpx;
|
||
padding: 16rpx;
|
||
border-radius: 12rpx;
|
||
background: #f5f8fd;
|
||
color: #7d8798;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.weekday-row,
|
||
.calendar-week {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.weekday-row {
|
||
margin-top: 18rpx;
|
||
color: #9aa4b4;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.weekday-row text,
|
||
.calendar-cell {
|
||
width: 13.2%;
|
||
text-align: center;
|
||
}
|
||
|
||
.calendar-week {
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.calendar-cell {
|
||
position: relative;
|
||
padding: 18rpx 0;
|
||
border-radius: 16rpx;
|
||
color: #303949;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.calendar-cell.muted {
|
||
color: #c4cad5;
|
||
}
|
||
|
||
.calendar-cell.hasData::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 8rpx;
|
||
left: 50%;
|
||
width: 6rpx;
|
||
height: 6rpx;
|
||
border-radius: 50%;
|
||
background: #19be6b;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.calendar-cell.selected {
|
||
background: #2f80ed;
|
||
color: #ffffff;
|
||
box-shadow: 0 6rpx 14rpx rgba(47, 128, 237, 0.25);
|
||
}
|
||
|
||
.calendar-cell.selected.hasData::after {
|
||
background: #ffffff;
|
||
}
|
||
|
||
.day-detail {
|
||
margin-top: 18rpx;
|
||
padding: 18rpx;
|
||
border: 1rpx solid #dceafd;
|
||
border-radius: 16rpx;
|
||
background: #fbfdff;
|
||
}
|
||
|
||
.day-detail-header text:first-child {
|
||
color: #17233d;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.day-detail-header text:last-child {
|
||
color: #7d8798;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.day-metrics {
|
||
gap: 12rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.day-metrics view {
|
||
flex: 1;
|
||
padding: 14rpx 6rpx;
|
||
border-radius: 12rpx;
|
||
background: #f0f6ff;
|
||
text-align: center;
|
||
}
|
||
|
||
.day-metrics view:nth-child(2) { background: #f2fbea; }
|
||
.day-metrics view:nth-child(3) { background: #fff7e6; }
|
||
.day-metrics text,
|
||
.day-metrics strong {
|
||
display: block;
|
||
}
|
||
|
||
.day-metrics text {
|
||
color: #7d8798;
|
||
font-size: 18rpx;
|
||
}
|
||
|
||
.day-metrics strong {
|
||
margin-top: 6rpx;
|
||
color: #303949;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.day-empty {
|
||
display: block;
|
||
margin-top: 16rpx;
|
||
color: #9aa4b4;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.day-step-list {
|
||
margin-top: 14rpx;
|
||
border-top: 1rpx solid #e7edf6;
|
||
}
|
||
|
||
.day-step-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12rpx 4rpx;
|
||
border-bottom: 1rpx solid #e7edf6;
|
||
color: #526078;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.day-step-row strong {
|
||
color: #2f6cf6;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.hero-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 0;
|
||
padding: 30rpx 26rpx;
|
||
background: linear-gradient(135deg, #2f6cf6 0%, #35bfa3 100%);
|
||
}
|
||
|
||
.hero-title,
|
||
.hero-subtitle,
|
||
.section-title,
|
||
.section-subtitle,
|
||
.profile-name,
|
||
.profile-desc,
|
||
.metric-label,
|
||
.record-main,
|
||
.record-sub,
|
||
.record-bottom,
|
||
.progress-label,
|
||
.progress-value {
|
||
display: block;
|
||
}
|
||
|
||
.hero-title {
|
||
color: #ffffff;
|
||
font-size: 38rpx;
|
||
font-weight: 800;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
margin-top: 8rpx;
|
||
color: rgba(255, 255, 255, 0.84);
|
||
font-size: 22rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.hero-avatar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
border-radius: 26rpx;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
}
|
||
|
||
.profile-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
}
|
||
|
||
.profile-badge {
|
||
min-width: 98rpx;
|
||
margin-right: 24rpx;
|
||
padding: 18rpx 14rpx;
|
||
border-radius: 18rpx;
|
||
background: rgba(47, 108, 246, 0.1);
|
||
color: #2f6cf6;
|
||
font-size: 22rpx;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
flex: none;
|
||
}
|
||
|
||
.profile-meta {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.profile-name {
|
||
color: #17233d;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.profile-desc {
|
||
margin-top: 6rpx;
|
||
color: #7d8798;
|
||
font-size: 20rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.profile-extra {
|
||
display: flex;
|
||
gap: 0;
|
||
margin-top: 16rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.profile-chip {
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 999rpx;
|
||
background: #eef3fb;
|
||
color: #6b778c;
|
||
font-size: 18rpx;
|
||
line-height: 1.35;
|
||
flex: none;
|
||
}
|
||
|
||
.profile-chip + .profile-chip {
|
||
margin-left: 14rpx;
|
||
}
|
||
|
||
.profile-chip.success {
|
||
background: rgba(25, 190, 107, 0.12);
|
||
color: #19be6b;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.section-header.compact {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.section-title {
|
||
color: #17233d;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.section-subtitle {
|
||
color: #9aa4b4;
|
||
font-size: 20rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.metric-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.metric-item {
|
||
padding: 18rpx;
|
||
border-radius: 18rpx;
|
||
background: #f8fbff;
|
||
}
|
||
|
||
.metric-value {
|
||
color: #17233d;
|
||
font-size: 32rpx;
|
||
font-weight: 800;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.metric-value.primary {
|
||
color: #2f6cf6;
|
||
}
|
||
|
||
.metric-value.success {
|
||
color: #19be6b;
|
||
}
|
||
|
||
.metric-value.danger {
|
||
color: #e91f3f;
|
||
}
|
||
|
||
.metric-value.warning {
|
||
color: #f7a928;
|
||
}
|
||
|
||
.metric-label {
|
||
margin-top: 6rpx;
|
||
color: #7d8798;
|
||
font-size: 20rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.bar-chart {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
gap: 12rpx;
|
||
align-items: end;
|
||
height: 220rpx;
|
||
}
|
||
|
||
.bar-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
height: 100%;
|
||
}
|
||
|
||
.bar-track {
|
||
display: flex;
|
||
align-items: end;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 170rpx;
|
||
border-radius: 16rpx;
|
||
background: #f3f6fb;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bar-fill {
|
||
width: 72%;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
}
|
||
|
||
.bar-label {
|
||
margin-top: 10rpx;
|
||
color: #9aa4b4;
|
||
font-size: 18rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.record-item {
|
||
padding: 18rpx 0;
|
||
border-bottom: 1rpx solid #eef1f6;
|
||
}
|
||
|
||
.process-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 14rpx 0;
|
||
border-bottom: 1rpx solid #eef1f6;
|
||
}
|
||
|
||
.process-row:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.process-name {
|
||
color: #4d5b70;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.process-count {
|
||
color: #2f6cf6;
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.empty-text {
|
||
display: block;
|
||
padding: 20rpx 0 6rpx;
|
||
color: #9aa4b4;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.record-item:last-child {
|
||
padding-bottom: 0;
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.record-top {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.record-main {
|
||
color: #17233d;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.record-sub {
|
||
margin-top: 5rpx;
|
||
color: #7d8798;
|
||
font-size: 20rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.record-pill {
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 999rpx;
|
||
font-size: 18rpx;
|
||
line-height: 1.35;
|
||
flex: none;
|
||
}
|
||
|
||
.record-pill.success {
|
||
background: rgba(25, 190, 107, 0.12);
|
||
color: #19be6b;
|
||
}
|
||
|
||
.record-pill.failed {
|
||
background: rgba(233, 31, 63, 0.12);
|
||
color: #e91f3f;
|
||
}
|
||
|
||
.record-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 10rpx;
|
||
color: #9aa4b4;
|
||
font-size: 18rpx;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.theme-dark.statistics-page {
|
||
background: #151923;
|
||
}
|
||
|
||
.theme-dark .hero-card,
|
||
.theme-dark .profile-card,
|
||
.theme-dark .calendar-card,
|
||
.theme-dark .metric-card,
|
||
.theme-dark .trend-card,
|
||
.theme-dark .record-card,
|
||
.theme-dark .process-card {
|
||
border-color: #364152;
|
||
background: #222936;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.theme-dark .metric-item,
|
||
.theme-dark .profile-chip {
|
||
background: #1c2431;
|
||
}
|
||
|
||
.theme-dark .profile-name,
|
||
.theme-dark .calendar-title,
|
||
.theme-dark .section-title,
|
||
.theme-dark .metric-value,
|
||
.theme-dark .record-main,
|
||
.theme-dark .progress-value {
|
||
color: #f2f5fa;
|
||
}
|
||
|
||
.theme-dark .profile-desc,
|
||
.theme-dark .calendar-hint,
|
||
.theme-dark .section-subtitle,
|
||
.theme-dark .metric-label,
|
||
.theme-dark .bar-label,
|
||
.theme-dark .record-sub,
|
||
.theme-dark .record-bottom,
|
||
.theme-dark .progress-label,
|
||
.theme-dark .profile-chip {
|
||
color: #aeb9ca;
|
||
}
|
||
|
||
.theme-dark .process-name,
|
||
.theme-dark .empty-text {
|
||
color: #aeb9ca;
|
||
}
|
||
|
||
.theme-dark .process-row {
|
||
border-color: #364152;
|
||
}
|
||
|
||
.theme-dark .record-item {
|
||
border-color: #364152;
|
||
}
|
||
|
||
.theme-dark .bar-track {
|
||
background: #1c2431;
|
||
}
|
||
|
||
.theme-dark .calendar-hint,
|
||
.theme-dark .day-detail {
|
||
background: #1c2431;
|
||
border-color: #364152;
|
||
}
|
||
|
||
.theme-dark .calendar-cell {
|
||
color: #f2f5fa;
|
||
}
|
||
|
||
.theme-dark .calendar-cell.muted,
|
||
.theme-dark .day-detail-header text:last-child,
|
||
.theme-dark .day-metrics text,
|
||
.theme-dark .day-empty {
|
||
color: #aeb9ca;
|
||
}
|
||
|
||
.theme-dark .day-detail-header text:first-child,
|
||
.theme-dark .day-metrics strong {
|
||
color: #f2f5fa;
|
||
}
|
||
|
||
.theme-dark .day-step-list,
|
||
.theme-dark .day-step-row {
|
||
border-color: #364152;
|
||
}
|
||
|
||
.theme-dark .day-step-row {
|
||
color: #aeb9ca;
|
||
}
|
||
|
||
.theme-dark .profile-badge {
|
||
background: rgba(47, 108, 246, 0.2);
|
||
}
|
||
|
||
.theme-dark .record-pill.success,
|
||
.theme-dark .record-pill.failed {
|
||
background: rgba(25, 190, 107, 0.18);
|
||
}
|
||
|
||
.theme-dark .record-pill.failed {
|
||
background: rgba(233, 31, 63, 0.18);
|
||
}
|
||
</style>
|