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> <span class="card-icon">👥</span>
外协管理 外协管理
</div> </div>
<el-button type="text" class="manage-btn">管理</el-button> <!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="donut-chart-wrapper"> <div class="donut-chart-wrapper">
@@ -54,8 +54,11 @@
<!-- 风险管理卡片 --> <!-- 风险管理卡片 -->
<div class="dashboard-card"> <div class="dashboard-card">
<div class="card-header"> <div class="card-header">
<div class="card-title">风险管理</div> <div class="card-title">
<el-button type="text" class="manage-btn">管理</el-button> <span class="card-icon">🛡️</span>
风险管理
</div>
<!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="donut-chart-wrapper"> <div class="donut-chart-wrapper">
@@ -82,7 +85,7 @@
<span class="card-icon warning">⚠️</span> <span class="card-icon warning">⚠️</span>
隐患管理 隐患管理
</div> </div>
<el-button type="text" class="manage-btn">管理</el-button> <!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="line-chart-wrapper"> <div class="line-chart-wrapper">
@@ -107,13 +110,16 @@
<!-- 高危作业卡片 --> <!-- 高危作业卡片 -->
<div class="dashboard-card"> <div class="dashboard-card">
<div class="card-header"> <div class="card-header">
<div class="card-title">高危作业</div> <div class="card-title">
<el-button type="text" class="manage-btn">管理</el-button> <span class="card-icon">🚧</span>
高危作业
</div>
<!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="high-risk-top"> <div class="high-risk-top">
<div class="donut-chart-wrapper-small"> <div class="donut-chart-wrapper-small">
<Echart :options="highRiskChartOption" width="100%" height="250px" /> <Echart :options="highRiskChartOption" width="100%" height="280px" />
</div> </div>
<div class="operation-type-list"> <div class="operation-type-list">
<div class="operation-type-item" v-for="item in operationTypeDistribution" :key="item.type"> <div class="operation-type-item" v-for="item in operationTypeDistribution" :key="item.type">
@@ -145,12 +151,12 @@
<span class="card-icon">📄</span> <span class="card-icon">📄</span>
应急预案 应急预案
</div> </div>
<el-button type="text" class="manage-btn">管理</el-button> <!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="emergency-plan-top"> <div class="emergency-plan-top">
<div class="progress-chart-wrapper"> <div class="progress-chart-wrapper">
<Echart :options="emergencyPlanChartOption" width="100%" height="250px" /> <Echart :options="emergencyPlanChartOption" width="100%" height="280px" />
</div> </div>
<div class="drill-info"> <div class="drill-info">
<div class="drill-item"> <div class="drill-item">
@@ -185,7 +191,7 @@
<span class="card-icon">📚</span> <span class="card-icon">📚</span>
安全培训 安全培训
</div> </div>
<el-button type="text" class="manage-btn">管理</el-button> <!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="bar-chart-wrapper"> <div class="bar-chart-wrapper">
@@ -572,7 +578,7 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
top: '15%', top: '25%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
@@ -663,7 +669,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
series: [{ series: [{
name: '高危作业', name: '高危作业',
type: 'pie', type: 'pie',
radius: ['49%', '61%'], radius: ['45%', '65%'],
center: ['50%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 }, itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
@@ -671,7 +677,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
show: true, show: true,
position: 'center', position: 'center',
formatter: () => `${highRiskTotal.value}\n累计作业`, formatter: () => `${highRiskTotal.value}\n累计作业`,
fontSize: 18, fontSize: 15,
fontWeight: 'bold', fontWeight: 'bold',
color: '#333' color: '#333'
}, },
@@ -693,7 +699,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
show: true, show: true,
position: 'center', position: 'center',
formatter: () => `${highRiskTotal.value}\n累计作业`, formatter: () => `${highRiskTotal.value}\n累计作业`,
fontSize: 18, fontSize: 15,
fontWeight: 'bold', fontWeight: 'bold',
color: '#333' color: '#333'
}, },
@@ -722,7 +728,7 @@ const emergencyPlanChartOption = computed<EChartsOption>(() => {
show: true, show: true,
position: 'center', position: 'center',
formatter: () => `${percent}%\n演练完成率`, formatter: () => `${percent}%\n演练完成率`,
fontSize: 18, fontSize: 15,
fontWeight: 'bold', fontWeight: 'bold',
color: '#333' 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 { .dashboard-card {
background: white; background: white;
border-radius: 8px; border-radius: 8px;
@@ -1598,7 +1644,8 @@ onMounted(async () => {
.donut-chart-wrapper, .donut-chart-wrapper,
.donut-chart-wrapper-small { .donut-chart-wrapper-small {
height: 250px; height: 280px;
min-height: 280px;
} }
.line-chart-wrapper, .line-chart-wrapper,
@@ -1611,7 +1658,8 @@ onMounted(async () => {
} }
.progress-chart-wrapper { .progress-chart-wrapper {
height: 250px; height: 280px;
min-height: 280px;
} }
.high-risk-top { .high-risk-top {
@@ -1622,19 +1670,22 @@ onMounted(async () => {
} }
.donut-chart-wrapper-small { .donut-chart-wrapper-small {
flex: 1; flex: 0.8;
min-width: 0; min-width: 150px;
max-width: 45%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.operation-type-list { .operation-type-list {
flex: 1.2; flex: 0.7;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
min-width: 0; min-width: 140px;
max-width: 170px;
justify-content: center; justify-content: center;
flex-shrink: 0;
} }
.operation-type-item { .operation-type-item {
@@ -1675,13 +1726,14 @@ onMounted(async () => {
.emergency-plan-top { .emergency-plan-top {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 15px; gap: 12px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.progress-chart-wrapper { .progress-chart-wrapper {
flex: 1.5; flex: 0.8;
min-width: 0; min-width: 150px;
max-width: 45%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@@ -1748,9 +1800,11 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
flex: 1; flex: 0.7;
min-width: 0; min-width: 140px;
max-width: 170px;
justify-content: center; justify-content: center;
flex-shrink: 0;
} }
.drill-item { .drill-item {

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

@@ -34,7 +34,7 @@
<span class="card-icon">👥</span> <span class="card-icon">👥</span>
外协管理 外协管理
</div> </div>
<el-button type="text" class="manage-btn">管理</el-button> <!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="donut-chart-wrapper"> <div class="donut-chart-wrapper">
@@ -57,8 +57,11 @@
<!-- 风险管理卡片 --> <!-- 风险管理卡片 -->
<div class="dashboard-card"> <div class="dashboard-card">
<div class="card-header"> <div class="card-header">
<div class="card-title">风险管理</div> <div class="card-title">
<el-button type="text" class="manage-btn">管理</el-button> <span class="card-icon">🛡️</span>
风险管理
</div>
<!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="donut-chart-wrapper"> <div class="donut-chart-wrapper">
@@ -99,7 +102,7 @@
<span class="card-icon warning">⚠️</span> <span class="card-icon warning">⚠️</span>
隐患管理 隐患管理
</div> </div>
<el-button type="text" class="manage-btn">管理</el-button> <!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="line-chart-wrapper"> <div class="line-chart-wrapper">
@@ -147,13 +150,16 @@
<!-- 高危作业卡片 --> <!-- 高危作业卡片 -->
<div class="dashboard-card"> <div class="dashboard-card">
<div class="card-header"> <div class="card-header">
<div class="card-title">高危作业</div> <div class="card-title">
<el-button type="text" class="manage-btn">管理</el-button> <span class="card-icon">🚧</span>
高危作业
</div>
<!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="high-risk-top"> <div class="high-risk-top">
<div class="donut-chart-wrapper-small"> <div class="donut-chart-wrapper-small">
<Echart :options="highRiskChartOption" width="100%" height="250px" /> <Echart :options="highRiskChartOption" width="100%" height="280px" />
</div> </div>
<div class="operation-type-list"> <div class="operation-type-list">
<div class="operation-type-item" v-for="item in operationTypeDistribution" :key="item.type"> <div class="operation-type-item" v-for="item in operationTypeDistribution" :key="item.type">
@@ -185,12 +191,12 @@
<span class="card-icon">📄</span> <span class="card-icon">📄</span>
应急预案 应急预案
</div> </div>
<el-button type="text" class="manage-btn">管理</el-button> <!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="emergency-plan-top"> <div class="emergency-plan-top">
<div class="progress-chart-wrapper"> <div class="progress-chart-wrapper">
<Echart :options="emergencyPlanChartOption" width="100%" height="250px" /> <Echart :options="emergencyPlanChartOption" width="100%" height="280px" />
</div> </div>
<div class="drill-info"> <div class="drill-info">
<div class="drill-item"> <div class="drill-item">
@@ -225,7 +231,7 @@
<span class="card-icon">📚</span> <span class="card-icon">📚</span>
安全培训 安全培训
</div> </div>
<el-button type="text" class="manage-btn">管理</el-button> <!-- <el-button type="text" class="manage-btn">管理</el-button> -->
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="bar-chart-wrapper"> <div class="bar-chart-wrapper">
@@ -1142,7 +1148,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
series: [{ series: [{
name: '高危作业', name: '高危作业',
type: 'pie', type: 'pie',
radius: ['49%', '61%'], radius: ['45%', '65%'],
center: ['50%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 }, itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
@@ -1150,7 +1156,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
show: true, show: true,
position: 'center', position: 'center',
formatter: () => `${highRiskTotal.value}\n累计作业`, formatter: () => `${highRiskTotal.value}\n累计作业`,
fontSize: 18, fontSize: 15,
fontWeight: 'bold', fontWeight: 'bold',
color: '#333' color: '#333'
}, },
@@ -1175,7 +1181,7 @@ const emergencyPlanChartOption = computed<EChartsOption>(() => {
series: [{ series: [{
name: '演练完成率', name: '演练完成率',
type: 'pie', type: 'pie',
radius: ['49%', '61%'], radius: ['45%', '65%'],
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' },
@@ -1183,7 +1189,7 @@ const emergencyPlanChartOption = computed<EChartsOption>(() => {
show: true, show: true,
position: 'center', position: 'center',
formatter: () => `${percent}%\n演练完成率`, formatter: () => `${percent}%\n演练完成率`,
fontSize: 18, fontSize: 15,
fontWeight: 'bold', fontWeight: 'bold',
color: '#333' color: '#333'
}, },
@@ -1509,7 +1515,8 @@ onMounted(() => {
.donut-chart-wrapper, .donut-chart-wrapper,
.donut-chart-wrapper-small { .donut-chart-wrapper-small {
height: 250px; height: 280px;
min-height: 280px;
} }
.line-chart-wrapper, .line-chart-wrapper,
@@ -1522,7 +1529,8 @@ onMounted(() => {
} }
.progress-chart-wrapper { .progress-chart-wrapper {
height: 250px; height: 280px;
min-height: 280px;
} }
.region-distribution, .region-distribution,
@@ -1697,24 +1705,27 @@ onMounted(() => {
.high-risk-top { .high-risk-top {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 15px; gap: 12px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.donut-chart-wrapper-small { .donut-chart-wrapper-small {
flex: 1; flex: 0.8;
min-width: 0; min-width: 150px;
max-width: 45%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.operation-type-list { .operation-type-list {
flex: 1.2; flex: 0.7;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
min-width: 0; min-width: 140px;
max-width: 170px;
justify-content: center; justify-content: center;
flex-shrink: 0;
} }
.operation-type-item { .operation-type-item {
@@ -1755,13 +1766,14 @@ onMounted(() => {
.emergency-plan-top { .emergency-plan-top {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 15px; gap: 12px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.progress-chart-wrapper { .progress-chart-wrapper {
flex: 1.5; flex: 0.8;
min-width: 0; min-width: 150px;
max-width: 45%;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@@ -1770,9 +1782,11 @@ onMounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
flex: 1; flex: 0.7;
min-width: 0; min-width: 140px;
max-width: 170px;
justify-content: center; justify-content: center;
flex-shrink: 0;
} }
.drill-item { .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) { @media (max-width: 768px) {
.card-row { .card-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -1888,9 +1920,24 @@ onMounted(() => {
text-align: center; text-align: center;
} }
.high-risk-content, .high-risk-top,
.emergency-plan-content { .emergency-plan-top {
flex-direction: column; 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> </style>

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

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