isoftstone/lc_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI优化

Browse Source
This commit is contained in:
chenlin
2025-11-29 15:34:30 +08:00
parent 91966b402e
commit d393275529
3 changed files with 75 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/views/Home/Index10.vue
View File

@@ -584,26 +584,11 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: dates.length > 0 ? dates : [], data: dates.length > 0 ? dates : []
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
}
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
max: yAxisMax, max: yAxisMax
axisLine: {
lineStyle: {
color: '#e5e7eb'
}
},
splitLine: {
lineStyle: {
color: '#f3f4f6'
}
}
}, },
series: [ series: [
{ {
@@ -747,12 +732,9 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
const trainingCount = trainingBarData.value.trainingCount || [] const trainingCount = trainingBarData.value.trainingCount || []
const participants = trainingBarData.value.participants || [] const participants = trainingBarData.value.participants || []
// 计算Y轴最大值（向上取整到最近的10的倍数） // 计算堆叠后的最大值（培训次数 + 参与人次）
const maxValue = Math.max( const stackedValues = trainingCount.map((count, index) => count + (participants[index] || 0))
...trainingCount, const maxValue = Math.max(...stackedValues, 10) // 最小值为10，避免图表显示过小
...participants,
10 // 最小值为10，避免图表显示过小
)
const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10 const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10
return { return {
@@ -822,6 +804,7 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
{ {
name: '培训次数', name: '培训次数',
type: 'bar', type: 'bar',
stack: 'total',
data: trainingCount.length > 0 ? trainingCount : [], data: trainingCount.length > 0 ? trainingCount : [],
barWidth: 32, barWidth: 32,
itemStyle: { itemStyle: {
@@ -832,32 +815,26 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: '#8b5cf6' }, { offset: 0, color: '#3b82f6' },
{ offset: 1, color: '#7c3aed' } { offset: 1, color: '#2563eb' }
] ]
}, },
borderRadius: [6, 6, 0, 0] borderRadius: [0, 0, 0, 0]
}, },
label: { label: {
show: true, show: false
position: 'insideTop',
color: '#fff',
fontSize: 12,
fontWeight: 'bold',
formatter: (params: any) => {
return params.value > 0 ? params.value : ''
}
}, },
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowColor: 'rgba(139, 92, 246, 0.5)' shadowColor: 'rgba(59, 130, 246, 0.5)'
} }
} }
}, },
{ {
name: '参与人次', name: '参与人次',
type: 'bar', type: 'bar',
stack: 'total',
data: participants.length > 0 ? participants : [], data: participants.length > 0 ? participants : [],
barWidth: 32, barWidth: 32,
itemStyle: { itemStyle: {
@@ -868,26 +845,19 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: '#c4b5fd' }, { offset: 0, color: '#84cc16' },
{ offset: 1, color: '#a78bfa' } { offset: 1, color: '#65a30d' }
] ]
}, },
borderRadius: [6, 6, 0, 0] borderRadius: [6, 6, 0, 0]
}, },
label: { label: {
show: true, show: false
position: 'top',
color: '#7c3aed',
fontSize: 12,
fontWeight: 'bold',
formatter: (params: any) => {
return params.value > 0 ? params.value : ''
}
}, },
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, 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); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
.header-left { .header-left {
flex: 1; // flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;

47
src/views/Home/Index12.vue
View File

@@ -1148,7 +1148,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
series: [{ series: [{
name: '高危作业', name: '高危作业',
type: 'pie', type: 'pie',
radius: ['45%', '65%'], radius: ['49%', '61%'],
center: ['50%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 }, itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
@@ -1181,7 +1181,7 @@ const emergencyPlanChartOption = computed<EChartsOption>(() => {
series: [{ series: [{
name: '演练完成率', name: '演练完成率',
type: 'pie', type: 'pie',
radius: ['45%', '65%'], radius: ['49%', '61%'],
center: ['50%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0, color: '#10b981' }, itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0, color: '#10b981' },
@@ -1207,12 +1207,9 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
const trainingCount = trainingBarData.value.trainingCount || [] const trainingCount = trainingBarData.value.trainingCount || []
const participants = trainingBarData.value.participants || [] const participants = trainingBarData.value.participants || []
// 计算Y轴最大值（向上取整到最近的10的倍数） // 计算堆叠后的最大值（培训次数 + 参与人次）
const maxValue = Math.max( const stackedValues = trainingCount.map((count, index) => count + (participants[index] || 0))
...trainingCount, const maxValue = Math.max(...stackedValues, 10) // 最小值为10，避免图表显示过小
...participants,
10 // 最小值为10，避免图表显示过小
)
const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10 const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10
return { return {
@@ -1282,6 +1279,7 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
{ {
name: '培训次数', name: '培训次数',
type: 'bar', type: 'bar',
stack: 'total',
data: trainingCount.length > 0 ? trainingCount : [], data: trainingCount.length > 0 ? trainingCount : [],
barWidth: 32, barWidth: 32,
itemStyle: { itemStyle: {
@@ -1292,32 +1290,26 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: '#8b5cf6' }, { offset: 0, color: '#3b82f6' },
{ offset: 1, color: '#7c3aed' } { offset: 1, color: '#2563eb' }
] ]
}, },
borderRadius: [6, 6, 0, 0] borderRadius: [0, 0, 0, 0]
}, },
label: { label: {
show: true, show: false
position: 'insideTop',
color: '#fff',
fontSize: 12,
fontWeight: 'bold',
formatter: (params: any) => {
return params.value > 0 ? params.value : ''
}
}, },
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowColor: 'rgba(139, 92, 246, 0.5)' shadowColor: 'rgba(59, 130, 246, 0.5)'
} }
} }
}, },
{ {
name: '参与人次', name: '参与人次',
type: 'bar', type: 'bar',
stack: 'total',
data: participants.length > 0 ? participants : [], data: participants.length > 0 ? participants : [],
barWidth: 32, barWidth: 32,
itemStyle: { itemStyle: {
@@ -1328,26 +1320,19 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: '#c4b5fd' }, { offset: 0, color: '#84cc16' },
{ offset: 1, color: '#a78bfa' } { offset: 1, color: '#65a30d' }
] ]
}, },
borderRadius: [6, 6, 0, 0] borderRadius: [6, 6, 0, 0]
}, },
label: { label: {
show: true, show: false
position: 'top',
color: '#7c3aed',
fontSize: 12,
fontWeight: 'bold',
formatter: (params: any) => {
return params.value > 0 ? params.value : ''
}
}, },
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowColor: 'rgba(196, 181, 253, 0.5)' shadowColor: 'rgba(132, 204, 22, 0.5)'
} }
} }
} }

47
src/views/Home/Index13.vue
View File

@@ -1069,7 +1069,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
series: [{ series: [{
name: '高危作业', name: '高危作业',
type: 'pie', type: 'pie',
radius: ['45%', '65%'], radius: ['49%', '61%'],
center: ['50%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 }, itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
@@ -1102,7 +1102,7 @@ const emergencyPlanChartOption = computed<EChartsOption>(() => {
series: [{ series: [{
name: '演练完成率', name: '演练完成率',
type: 'pie', type: 'pie',
radius: ['45%', '65%'], radius: ['49%', '61%'],
center: ['50%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0, color: '#10b981' }, itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0, color: '#10b981' },
@@ -1128,12 +1128,9 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
const trainingCount = trainingBarData.value.trainingCount || [] const trainingCount = trainingBarData.value.trainingCount || []
const participants = trainingBarData.value.participants || [] const participants = trainingBarData.value.participants || []
// 计算Y轴最大值（向上取整到最近的10的倍数） // 计算堆叠后的最大值（培训次数 + 参与人次）
const maxValue = Math.max( const stackedValues = trainingCount.map((count, index) => count + (participants[index] || 0))
...trainingCount, const maxValue = Math.max(...stackedValues, 10) // 最小值为10，避免图表显示过小
...participants,
10 // 最小值为10，避免图表显示过小
)
const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10 const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10
return { return {
@@ -1203,6 +1200,7 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
{ {
name: '培训次数', name: '培训次数',
type: 'bar', type: 'bar',
stack: 'total',
data: trainingCount.length > 0 ? trainingCount : [], data: trainingCount.length > 0 ? trainingCount : [],
barWidth: 32, barWidth: 32,
itemStyle: { itemStyle: {
@@ -1213,32 +1211,26 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: '#8b5cf6' }, { offset: 0, color: '#3b82f6' },
{ offset: 1, color: '#7c3aed' } { offset: 1, color: '#2563eb' }
] ]
}, },
borderRadius: [6, 6, 0, 0] borderRadius: [0, 0, 0, 0]
}, },
label: { label: {
show: true, show: false
position: 'insideTop',
color: '#fff',
fontSize: 12,
fontWeight: 'bold',
formatter: (params: any) => {
return params.value > 0 ? params.value : ''
}
}, },
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowColor: 'rgba(139, 92, 246, 0.5)' shadowColor: 'rgba(59, 130, 246, 0.5)'
} }
} }
}, },
{ {
name: '参与人次', name: '参与人次',
type: 'bar', type: 'bar',
stack: 'total',
data: participants.length > 0 ? participants : [], data: participants.length > 0 ? participants : [],
barWidth: 32, barWidth: 32,
itemStyle: { itemStyle: {
@@ -1249,26 +1241,19 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: '#c4b5fd' }, { offset: 0, color: '#84cc16' },
{ offset: 1, color: '#a78bfa' } { offset: 1, color: '#65a30d' }
] ]
}, },
borderRadius: [6, 6, 0, 0] borderRadius: [6, 6, 0, 0]
}, },
label: { label: {
show: true, show: false
position: 'top',
color: '#7c3aed',
fontSize: 12,
fontWeight: 'bold',
formatter: (params: any) => {
return params.value > 0 ? params.value : ''
}
}, },
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowColor: 'rgba(196, 181, 253, 0.5)' shadowColor: 'rgba(132, 204, 22, 0.5)'
} }
} }
} }