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

数据看板优化

Browse Source
This commit is contained in:
chenlin
2025-11-29 15:20:48 +08:00
parent 8b9affd8e8
commit 91966b402e
3 changed files with 228 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,7 +31,7 @@
<span class="card-icon">👥</span>
外协管理
</div>
<el-button type="text" class="manage-btn">管理</el-button>
<!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div>
<div class="card-content">
<div class="donut-chart-wrapper">
@@ -54,8 +54,11 @@
<!-- 风险管理卡片 -->
<div class="dashboard-card">
<div class="card-header">
<div class="card-title">风险管理</div>
<el-button type="text" class="manage-btn">管理</el-button>
<div class="card-title">
<span class="card-icon">🛡️</span>
风险管理
</div>
<!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div>
<div class="card-content">
<div class="donut-chart-wrapper">
@@ -96,7 +99,7 @@
<span class="card-icon warning">⚠️</span>
隐患管理
</div>
<el-button type="text" class="manage-btn">管理</el-button>
<!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div>
<div class="card-content">
<div class="line-chart-wrapper">
@@ -144,13 +147,16 @@
<!-- 高危作业卡片 -->
<div class="dashboard-card">
<div class="card-header">
<div class="card-title">高危作业</div>
<el-button type="text" class="manage-btn">管理</el-button>
<div class="card-title">
<span class="card-icon">🚧</span>
高危作业
</div>
<!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div>
<div class="card-content">
<div class="high-risk-top">
<div class="donut-chart-wrapper-small">
<Echart :options="highRiskChartOption" width="100%" height="250px" />
<Echart :options="highRiskChartOption" width="100%" height="280px" />
</div>
<div class="operation-type-list">
<div class="operation-type-item" v-for="item in operationTypeDistribution" :key="item.type">
@@ -182,12 +188,12 @@
<span class="card-icon">📄</span>
应急预案
</div>
<el-button type="text" class="manage-btn">管理</el-button>
<!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div>
<div class="card-content">
<div class="emergency-plan-top">
<div class="progress-chart-wrapper">
<Echart :options="emergencyPlanChartOption" width="100%" height="250px" />
<Echart :options="emergencyPlanChartOption" width="100%" height="280px" />
</div>
<div class="drill-info">
<div class="drill-item">
@@ -224,7 +230,7 @@
<span class="card-icon">📚</span>
安全培训
</div>
<el-button type="text" class="manage-btn">管理</el-button>
<!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div>
<div class="card-content">
<div class="bar-chart-wrapper">
@@ -1063,7 +1069,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
series: [{
name: '高危作业',
type: 'pie',
radius: ['49%', '61%'],
radius: ['45%', '65%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
@@ -1071,7 +1077,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
show: true,
position: 'center',
formatter: () => `${highRiskTotal.value}\n累计作业`,
fontSize: 18,
fontSize: 15,
fontWeight: 'bold',
color: '#333'
},
@@ -1096,7 +1102,7 @@ const emergencyPlanChartOption = computed<EChartsOption>(() => {
series: [{
name: '演练完成率',
type: 'pie',
radius: ['49%', '61%'],
radius: ['45%', '65%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0, color: '#10b981' },
@@ -1104,7 +1110,7 @@ const emergencyPlanChartOption = computed<EChartsOption>(() => {
show: true,
position: 'center',
formatter: () => `${percent}%\n演练完成率`,
fontSize: 18,
fontSize: 15,
fontWeight: 'bold',
color: '#333'
},
@@ -1415,7 +1421,8 @@ onMounted(() => {
.donut-chart-wrapper,
.donut-chart-wrapper-small {
height: 250px;
height: 280px;
min-height: 280px;
}
.line-chart-wrapper,
@@ -1428,7 +1435,8 @@ onMounted(() => {
}
.progress-chart-wrapper {
height: 250px;
height: 280px;
min-height: 280px;
}
.region-distribution,
@@ -1605,24 +1613,27 @@ onMounted(() => {
.high-risk-top {
display: flex;
align-items: center;
gap: 15px;
gap: 12px;
margin-bottom: 15px;
}
.donut-chart-wrapper-small {
flex: 1;
min-width: 0;
flex: 0.8;
min-width: 150px;
max-width: 45%;
display: flex;
align-items: center;
}
.operation-type-list {
flex: 1.2;
flex: 0.7;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
min-width: 140px;
max-width: 170px;
justify-content: center;
flex-shrink: 0;
}
.operation-type-item {
@@ -1663,13 +1674,14 @@ onMounted(() => {
.emergency-plan-top {
display: flex;
align-items: center;
gap: 15px;
gap: 12px;
margin-bottom: 15px;
}
.progress-chart-wrapper {
flex: 1.5;
min-width: 0;
flex: 0.8;
min-width: 150px;
max-width: 45%;
display: flex;
align-items: center;
}
@@ -1678,9 +1690,11 @@ onMounted(() => {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-width: 0;
flex: 0.7;
min-width: 140px;
max-width: 170px;
justify-content: center;
flex-shrink: 0;
}
.drill-item {
@@ -1830,6 +1844,24 @@ onMounted(() => {
}
}
@media (max-width: 1200px) {
.high-risk-top,
.emergency-plan-top {
gap: 10px;
}
.donut-chart-wrapper-small,
.progress-chart-wrapper {
min-width: 160px;
}
.operation-type-list,
.drill-info {
min-width: 140px;
max-width: 180px;
}
}
@media (max-width: 768px) {
.card-row {
grid-template-columns: 1fr;
@@ -1847,6 +1879,21 @@ onMounted(() => {
.high-risk-top,
.emergency-plan-top {
flex-direction: column;
align-items: stretch;
}
.donut-chart-wrapper-small,
.progress-chart-wrapper {
min-width: 100%;
max-width: 100%;
height: 220px;
min-height: 220px;
}
.operation-type-list,
.drill-info {
min-width: 100%;
max-width: 100%;
}
}
</style>