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: {
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<EChartsOption>(() => {
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<EChartsOption>(() => {
{
name: '培训次数',
type: 'bar',
stack: 'total',
data: trainingCount.length > 0 ? trainingCount : [],
barWidth: 32,
itemStyle: {
@@ -832,32 +815,26 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
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<EChartsOption>(() => {
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;

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

@@ -1148,7 +1148,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
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<EChartsOption>(() => {
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<EChartsOption>(() => {
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<EChartsOption>(() => {
{
name: '培训次数',
type: 'bar',
stack: 'total',
data: trainingCount.length > 0 ? trainingCount : [],
barWidth: 32,
itemStyle: {
@@ -1292,62 +1290,49 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
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)'
}
}
}

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

@@ -1069,7 +1069,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
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<EChartsOption>(() => {
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<EChartsOption>(() => {
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<EChartsOption>(() => {
{
name: '培训次数',
type: 'bar',
stack: 'total',
data: trainingCount.length > 0 ? trainingCount : [],
barWidth: 32,
itemStyle: {
@@ -1213,62 +1211,49 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
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)'
}
}
}