diff --git a/apps/hand-factory/components/klp-shutdown-statistic/klp-shutdown-statistic.vue b/apps/hand-factory/components/klp-shutdown-statistic/klp-shutdown-statistic.vue index d171aeb..fe47edb 100644 --- a/apps/hand-factory/components/klp-shutdown-statistic/klp-shutdown-statistic.vue +++ b/apps/hand-factory/components/klp-shutdown-statistic/klp-shutdown-statistic.vue @@ -232,7 +232,14 @@ export default { padding: [15, 15, 0, 15], enableScroll: false, legend: { position: "top" }, - xAxis: { disableGrid: true }, + dataLabel: false, // 隐藏数据标签，避免数字叠在一起 + xAxis: { + disableGrid: true, + rotateLabel: true, + rotateAngle: 60, + labelCount: 10, + fontSize: 10 + }, yAxis: { gridType: "dash", dashLength: 4, @@ -244,7 +251,15 @@ export default { }, extra: { mix: { - column: { width: 20 } + column: { + width: 40, + categoryGap: 10 + } + }, + tooltip: { + showBox: true, + showArrow: true, + showCategory: true } } }, @@ -374,11 +389,26 @@ export default { // 转换为完整日期格式 const start = this.formatFullDate(this.startDate, true) - const end = this.formatFullDate(this.endDate, false) + let end = this.formatFullDate(this.endDate, false) + + // 如果是月视图，检查结束日期是否是当月 + if (this.activeTab === 'month' && this.endDate && this.endDate.length === 7) { + const today = new Date() + const todayYear = today.getFullYear() + const todayMonth = today.getMonth() + 1 + const [endYear, endMonth] = this.endDate.split('-').map(Number) + + // 如果是当月，使用今天的日期作为结束日期 + if (endYear === todayYear && endMonth === todayMonth) { + const todayDay = today.getDate() + end = `${this.endDate}-${String(todayDay).padStart(2, '0')}` + } + // 如果不是当月，end 已经是该月的最后一天（由 formatFullDate 处理） + } const queryParams = { pageNum: 1, - pageSize: 100, + pageSize: 9999, startDate: start, endDate: end } @@ -448,8 +478,16 @@ export default { } // 如果是月/年视图，构建趋势图 - if (this.activeTab !== 'day' && response.rows.length > 0) { - this.buildTrendChart(response.rows) + if (this.activeTab !== 'day') { + if (response.rows.length > 0) { + this.buildTrendChart(response.rows) + } else { + // 没有数据时也要清空趋势图 + this.trendChartData = { + categories: [], + series: [] + } + } } } else { // 没有数据时使用默认值 @@ -522,20 +560,72 @@ export default { return } - // 按日期分组统计 + // 根据视图类型决定分组方式 const dateMap = {} + const isYearView = this.activeTab === 'year' + stoppageData.forEach(item => { if (!item.startDate) return - const date = this.formatDate(item.startDate) - if (!dateMap[date]) { - dateMap[date] = { duration: 0, count: 0 } + + let key + if (isYearView) { + // 年视图：按月份分组 + key = this.formatDateByMonth(item.startDate) + } else { + // 月视图：按日期分组 + key = this.formatDate(item.startDate) + } + + if (!dateMap[key]) { + dateMap[key] = { duration: 0, count: 0 } } const durationMinutes = this.secondsToMinutes(item.duration) - dateMap[date].duration += durationMinutes - dateMap[date].count += 1 + dateMap[key].duration += durationMinutes + dateMap[key].count += 1 }) - const categories = Object.keys(dateMap).sort() + let categories = [] + if (isYearView) { + // 年视图：生成完整的12个月份 + categories = Array.from({ length: 12 }, (_, i) => `${i + 1}月`) + } else { + // 月视图：生成从开始日期到结束日期的完整日期范围 + const startStr = this.formatFullDate(this.startDate, true) + let endStr = this.formatFullDate(this.endDate, false) + + // 检查结束日期是否是当月 + const today = new Date() + const todayYear = today.getFullYear() + const todayMonth = today.getMonth() + 1 + + // 解析结束日期（格式：yyyy-MM） + if (this.endDate && this.endDate.length === 7) { + const [endYear, endMonth] = this.endDate.split('-').map(Number) + // 如果是当月，使用今天的日期作为结束日期 + if (endYear === todayYear && endMonth === todayMonth) { + const todayDay = today.getDate() + endStr = `${this.endDate}-${String(todayDay).padStart(2, '0')}` + } + // 如果不是当月，endStr 已经是该月的最后一天（由 formatFullDate 处理） + } + + const start = new Date(startStr) + const end = new Date(endStr) + + // 生成所有日期 + const dateList = [] + const currentDate = new Date(start) + while (currentDate <= end) { + // 格式化日期为 M/D 格式 + const month = currentDate.getMonth() + 1 + const day = currentDate.getDate() + const dateKey = `${month}/${day}` + dateList.push(dateKey) + // 移动到下一天 + currentDate.setDate(currentDate.getDate() + 1) + } + categories = dateList + } if (categories.length === 0) { console.log('无法构建趋势图：无有效日期') @@ -549,14 +639,27 @@ export default { const durationData = [] const rateData = [] - categories.forEach(date => { - durationData.push(dateMap[date].duration) - // 趋势图中每个点是单天的作业率，所以总时间是1440分钟 - const rate = this.calculateWorkRate(dateMap[date].duration, 1440) + categories.forEach(key => { + const data = dateMap[key] || { duration: 0, count: 0 } + durationData.push(data.duration) + // 计算作业率 + // 年视图：每个月按实际天数计算（根据选择的年份） + // 月视图：每天1440分钟 + let totalMinutes + if (isYearView) { + // 获取选择的年份 + const year = parseInt(this.startDate) || new Date().getFullYear() + const monthIndex = parseInt(key.replace('月', '')) - 1 + const daysInMonth = new Date(year, monthIndex + 1, 0).getDate() + totalMinutes = daysInMonth * 1440 + } else { + totalMinutes = 1440 + } + const rate = this.calculateWorkRate(data.duration, totalMinutes) rateData.push(Number(rate)) }) - console.log('趋势图数据构建成功:', { categories, durationData, rateData }) + console.log('趋势图数据构建成功:', { categories, durationData, rateData, isYearView }) this.trendChartData = { categories: categories, @@ -586,6 +689,14 @@ export default { const day = date.getDate() return `${month}/${day}` }, + + // 格式化日期为月份（用于年视图） + formatDateByMonth(dateStr) { + if (!dateStr) return '' + const date = new Date(dateStr) + const month = date.getMonth() + 1 + return `${month}月` + }, // 秒转分钟（保留整数） secondsToMinutes(seconds) { @@ -676,8 +787,7 @@ export default { .date-range-group { display: flex; - align-items: stretch; - gap: 0; +justify-content: space-between; } .date-input {