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

106
src/views/Home/Index10.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">
@@ -82,7 +85,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">
@@ -107,13 +110,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">
@@ -145,12 +151,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">
@@ -185,7 +191,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">
@@ -572,7 +578,7 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
left: '3%',
right: '4%',
bottom: '3%',
top: '15%',
top: '25%',
containLabel: true
},
xAxis: {
@@ -663,7 +669,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 },
@@ -671,7 +677,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
show: true,
position: 'center',
formatter: () => `${highRiskTotal.value}\n累计作业`,
fontSize: 18,
fontSize: 15,
fontWeight: 'bold',
color: '#333'
},
@@ -693,7 +699,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
show: true,
position: 'center',
formatter: () => `${highRiskTotal.value}\n累计作业`,
fontSize: 18,
fontSize: 15,
fontWeight: 'bold',
color: '#333'
},
@@ -722,7 +728,7 @@ const emergencyPlanChartOption = computed<EChartsOption>(() => {
show: true,
position: 'center',
formatter: () => `${percent}%\n演练完成率`,
fontSize: 18,
fontSize: 15,
fontWeight: 'bold',
color: '#333'
},
@@ -1539,6 +1545,46 @@ onMounted(async () => {
}
}
@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) {
.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%;
}
}
.dashboard-card {
background: white;
border-radius: 8px;
@@ -1598,7 +1644,8 @@ onMounted(async () => {
.donut-chart-wrapper,
.donut-chart-wrapper-small {
height: 250px;
height: 280px;
min-height: 280px;
}
.line-chart-wrapper,
@@ -1611,7 +1658,8 @@ onMounted(async () => {
}
.progress-chart-wrapper {
height: 250px;
height: 280px;
min-height: 280px;
}
.high-risk-top {
@@ -1622,19 +1670,22 @@ onMounted(async () => {
}
.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 {
@@ -1675,13 +1726,14 @@ onMounted(async () => {
.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;
}
@@ -1748,9 +1800,11 @@ onMounted(async () => {
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 {

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

@@ -34,7 +34,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">
@@ -57,8 +57,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">
@@ -99,7 +102,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">
@@ -147,13 +150,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">
@@ -185,12 +191,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">
@@ -225,7 +231,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">
@@ -1142,7 +1148,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 },
@@ -1150,7 +1156,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
show: true,
position: 'center',
formatter: () => `${highRiskTotal.value}\n累计作业`,
fontSize: 18,
fontSize: 15,
fontWeight: 'bold',
color: '#333'
},
@@ -1175,7 +1181,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' },
@@ -1183,7 +1189,7 @@ const emergencyPlanChartOption = computed<EChartsOption>(() => {
show: true,
position: 'center',
formatter: () => `${percent}%\n演练完成率`,
fontSize: 18,
fontSize: 15,
fontWeight: 'bold',
color: '#333'
},
@@ -1509,7 +1515,8 @@ onMounted(() => {
.donut-chart-wrapper,
.donut-chart-wrapper-small {
height: 250px;
height: 280px;
min-height: 280px;
}
.line-chart-wrapper,
@@ -1522,7 +1529,8 @@ onMounted(() => {
}
.progress-chart-wrapper {
height: 250px;
height: 280px;
min-height: 280px;
}
.region-distribution,
@@ -1697,24 +1705,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 {
@@ -1755,13 +1766,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;
}
@@ -1770,9 +1782,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 {
@@ -1874,6 +1888,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;
@@ -1888,9 +1920,24 @@ onMounted(() => {
text-align: center;
}
.high-risk-content,
.emergency-plan-content {
.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>

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>