From d3932755293cc4150b07c86878c770e18afa3b32 Mon Sep 17 00:00:00 2001 From: chenlin Date: Sat, 29 Nov 2025 15:34:30 +0800 Subject: [PATCH] =?UTF-8?q?UI=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Home/Index10.vue | 64 +++++++++------------------------ src/views/Home/Index12.vue | 73 +++++++++++++++----------------------- src/views/Home/Index13.vue | 73 +++++++++++++++----------------------- 3 files changed, 75 insertions(+), 135 deletions(-) diff --git a/src/views/Home/Index10.vue b/src/views/Home/Index10.vue index 65f4917..30cb67e 100644 --- a/src/views/Home/Index10.vue +++ b/src/views/Home/Index10.vue @@ -584,26 +584,11 @@ const hiddenDangerChartOption = computed(() => { xAxis: { type: 'category', boundaryGap: false, - data: dates.length > 0 ? dates : [], - axisLine: { - lineStyle: { - color: '#e5e7eb' - } - } + data: dates.length > 0 ? dates : [] }, yAxis: { type: 'value', - max: yAxisMax, - axisLine: { - lineStyle: { - color: '#e5e7eb' - } - }, - splitLine: { - lineStyle: { - color: '#f3f4f6' - } - } + max: yAxisMax }, series: [ { @@ -747,12 +732,9 @@ const safetyTrainingChartOption = computed(() => { const trainingCount = trainingBarData.value.trainingCount || [] const participants = trainingBarData.value.participants || [] - // 计算Y轴最大值（向上取整到最近的10的倍数） - const maxValue = Math.max( - ...trainingCount, - ...participants, - 10 // 最小值为10，避免图表显示过小 - ) + // 计算堆叠后的最大值（培训次数 + 参与人次） + const stackedValues = trainingCount.map((count, index) => count + (participants[index] || 0)) + const maxValue = Math.max(...stackedValues, 10) // 最小值为10，避免图表显示过小 const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10 return { @@ -822,6 +804,7 @@ const safetyTrainingChartOption = computed(() => { { name: '培训次数', type: 'bar', + stack: 'total', data: trainingCount.length > 0 ? trainingCount : [], barWidth: 32, itemStyle: { @@ -832,32 +815,26 @@ const safetyTrainingChartOption = computed(() => { x2: 0, y2: 1, colorStops: [ - { offset: 0, color: '#8b5cf6' }, - { offset: 1, color: '#7c3aed' } + { offset: 0, color: '#3b82f6' }, + { offset: 1, color: '#2563eb' } ] }, - borderRadius: [6, 6, 0, 0] + borderRadius: [0, 0, 0, 0] }, label: { - show: true, - position: 'insideTop', - color: '#fff', - fontSize: 12, - fontWeight: 'bold', - formatter: (params: any) => { - return params.value > 0 ? params.value : '' - } + show: false }, emphasis: { itemStyle: { shadowBlur: 10, - shadowColor: 'rgba(139, 92, 246, 0.5)' + shadowColor: 'rgba(59, 130, 246, 0.5)' } } }, { name: '参与人次', type: 'bar', + stack: 'total', data: participants.length > 0 ? participants : [], barWidth: 32, itemStyle: { @@ -868,26 +845,19 @@ const safetyTrainingChartOption = computed(() => { x2: 0, y2: 1, colorStops: [ - { offset: 0, color: '#c4b5fd' }, - { offset: 1, color: '#a78bfa' } + { offset: 0, color: '#84cc16' }, + { offset: 1, color: '#65a30d' } ] }, borderRadius: [6, 6, 0, 0] }, label: { - show: true, - position: 'top', - color: '#7c3aed', - fontSize: 12, - fontWeight: 'bold', - formatter: (params: any) => { - return params.value > 0 ? params.value : '' - } + show: false }, emphasis: { itemStyle: { shadowBlur: 10, - shadowColor: 'rgba(196, 181, 253, 0.5)' + shadowColor: 'rgba(132, 204, 22, 0.5)' } } } @@ -1453,7 +1423,7 @@ onMounted(async () => { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); .header-left { - flex: 1; + // flex: 1; display: flex; align-items: center; diff --git a/src/views/Home/Index12.vue b/src/views/Home/Index12.vue index 860e2fc..ca84daf 100644 --- a/src/views/Home/Index12.vue +++ b/src/views/Home/Index12.vue @@ -1148,7 +1148,7 @@ const highRiskChartOption = computed(() => { series: [{ name: '高危作业', type: 'pie', - radius: ['45%', '65%'], + radius: ['49%', '61%'], center: ['50%', '50%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 }, @@ -1181,7 +1181,7 @@ const emergencyPlanChartOption = computed(() => { series: [{ name: '演练完成率', type: 'pie', - radius: ['45%', '65%'], + radius: ['49%', '61%'], center: ['50%', '50%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0, color: '#10b981' }, @@ -1207,12 +1207,9 @@ const safetyTrainingChartOption = computed(() => { const trainingCount = trainingBarData.value.trainingCount || [] const participants = trainingBarData.value.participants || [] - // 计算Y轴最大值（向上取整到最近的10的倍数） - const maxValue = Math.max( - ...trainingCount, - ...participants, - 10 // 最小值为10，避免图表显示过小 - ) + // 计算堆叠后的最大值（培训次数 + 参与人次） + const stackedValues = trainingCount.map((count, index) => count + (participants[index] || 0)) + const maxValue = Math.max(...stackedValues, 10) // 最小值为10，避免图表显示过小 const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10 return { @@ -1282,6 +1279,7 @@ const safetyTrainingChartOption = computed(() => { { name: '培训次数', type: 'bar', + stack: 'total', data: trainingCount.length > 0 ? trainingCount : [], barWidth: 32, itemStyle: { @@ -1292,62 +1290,49 @@ const safetyTrainingChartOption = computed(() => { x2: 0, y2: 1, colorStops: [ - { offset: 0, color: '#8b5cf6' }, - { offset: 1, color: '#7c3aed' } + { offset: 0, color: '#3b82f6' }, + { offset: 1, color: '#2563eb' } ] }, - borderRadius: [6, 6, 0, 0] + borderRadius: [0, 0, 0, 0] }, label: { - show: true, - position: 'insideTop', - color: '#fff', - fontSize: 12, - fontWeight: 'bold', - formatter: (params: any) => { - return params.value > 0 ? params.value : '' - } + show: false }, emphasis: { itemStyle: { shadowBlur: 10, - shadowColor: 'rgba(139, 92, 246, 0.5)' + shadowColor: 'rgba(59, 130, 246, 0.5)' } } }, { name: '参与人次', - type: 'bar', + type: 'bar', + stack: 'total', data: participants.length > 0 ? participants : [], barWidth: 32, - itemStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: '#c4b5fd' }, - { offset: 1, color: '#a78bfa' } - ] - }, + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: '#84cc16' }, + { offset: 1, color: '#65a30d' } + ] + }, borderRadius: [6, 6, 0, 0] - }, - label: { - show: true, - position: 'top', - color: '#7c3aed', - fontSize: 12, - fontWeight: 'bold', - formatter: (params: any) => { - return params.value > 0 ? params.value : '' - } + }, + label: { + show: false }, emphasis: { itemStyle: { shadowBlur: 10, - shadowColor: 'rgba(196, 181, 253, 0.5)' + shadowColor: 'rgba(132, 204, 22, 0.5)' } } } diff --git a/src/views/Home/Index13.vue b/src/views/Home/Index13.vue index 6f48f41..de03266 100644 --- a/src/views/Home/Index13.vue +++ b/src/views/Home/Index13.vue @@ -1069,7 +1069,7 @@ const highRiskChartOption = computed(() => { series: [{ name: '高危作业', type: 'pie', - radius: ['45%', '65%'], + radius: ['49%', '61%'], center: ['50%', '50%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 }, @@ -1102,7 +1102,7 @@ const emergencyPlanChartOption = computed(() => { series: [{ name: '演练完成率', type: 'pie', - radius: ['45%', '65%'], + radius: ['49%', '61%'], center: ['50%', '50%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0, color: '#10b981' }, @@ -1128,12 +1128,9 @@ const safetyTrainingChartOption = computed(() => { const trainingCount = trainingBarData.value.trainingCount || [] const participants = trainingBarData.value.participants || [] - // 计算Y轴最大值（向上取整到最近的10的倍数） - const maxValue = Math.max( - ...trainingCount, - ...participants, - 10 // 最小值为10，避免图表显示过小 - ) + // 计算堆叠后的最大值（培训次数 + 参与人次） + const stackedValues = trainingCount.map((count, index) => count + (participants[index] || 0)) + const maxValue = Math.max(...stackedValues, 10) // 最小值为10，避免图表显示过小 const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10 return { @@ -1203,6 +1200,7 @@ const safetyTrainingChartOption = computed(() => { { name: '培训次数', type: 'bar', + stack: 'total', data: trainingCount.length > 0 ? trainingCount : [], barWidth: 32, itemStyle: { @@ -1213,62 +1211,49 @@ const safetyTrainingChartOption = computed(() => { x2: 0, y2: 1, colorStops: [ - { offset: 0, color: '#8b5cf6' }, - { offset: 1, color: '#7c3aed' } + { offset: 0, color: '#3b82f6' }, + { offset: 1, color: '#2563eb' } ] }, - borderRadius: [6, 6, 0, 0] + borderRadius: [0, 0, 0, 0] }, label: { - show: true, - position: 'insideTop', - color: '#fff', - fontSize: 12, - fontWeight: 'bold', - formatter: (params: any) => { - return params.value > 0 ? params.value : '' - } + show: false }, emphasis: { itemStyle: { shadowBlur: 10, - shadowColor: 'rgba(139, 92, 246, 0.5)' + shadowColor: 'rgba(59, 130, 246, 0.5)' } } }, { name: '参与人次', - type: 'bar', + type: 'bar', + stack: 'total', data: participants.length > 0 ? participants : [], barWidth: 32, - itemStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { offset: 0, color: '#c4b5fd' }, - { offset: 1, color: '#a78bfa' } - ] - }, + itemStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { offset: 0, color: '#84cc16' }, + { offset: 1, color: '#65a30d' } + ] + }, borderRadius: [6, 6, 0, 0] - }, - label: { - show: true, - position: 'top', - color: '#7c3aed', - fontSize: 12, - fontWeight: 'bold', - formatter: (params: any) => { - return params.value > 0 ? params.value : '' - } + }, + label: { + show: false }, emphasis: { itemStyle: { shadowBlur: 10, - shadowColor: 'rgba(196, 181, 253, 0.5)' + shadowColor: 'rgba(132, 204, 22, 0.5)' } } }