|
@@ -212,7 +212,7 @@ const bottomCards = ref([
|
|
|
icon: Histogram,
|
|
icon: Histogram,
|
|
|
accent: '#4f8dff',
|
|
accent: '#4f8dff',
|
|
|
glow: 'rgba(79, 141, 255, 0.2)',
|
|
glow: 'rgba(79, 141, 255, 0.2)',
|
|
|
- lines: ['在用: 0台', '待检: 0台(重点关注)']
|
|
|
|
|
|
|
+ lines: ['在用: 0台', '待检: 0项(重点关注)']
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
title: '应急演练',
|
|
title: '应急演练',
|
|
@@ -315,7 +315,7 @@ async function getInstrumentOverview() {
|
|
|
|
|
|
|
|
bottomCards.value[1].lines = [
|
|
bottomCards.value[1].lines = [
|
|
|
`在用: ${total.value}台`,
|
|
`在用: ${total.value}台`,
|
|
|
- `待检: ${instrumentExpired.value}台(重点关注)`
|
|
|
|
|
|
|
+ `待检: ${instrumentExpired.value}项(重点关注)`
|
|
|
]
|
|
]
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -888,7 +888,7 @@ onUnmounted(() => {
|
|
|
<section class="panel board-panel board-panel--center kb-stage-card kb-stage-card--4">
|
|
<section class="panel board-panel board-panel--center kb-stage-card kb-stage-card--4">
|
|
|
<div class="panel-title panel-title--center">
|
|
<div class="panel-title panel-title--center">
|
|
|
<span class="icon-decorator"><span></span><span></span></span>
|
|
<span class="icon-decorator"><span></span><span></span></span>
|
|
|
- 安全风险四色动态分布
|
|
|
|
|
|
|
+ 风险管控及隐患排查
|
|
|
</div>
|
|
</div>
|
|
|
<div class="risk-grid">
|
|
<div class="risk-grid">
|
|
|
<article v-for="zone in riskZones" :key="zone.title" class="risk-card">
|
|
<article v-for="zone in riskZones" :key="zone.title" class="risk-card">
|
|
@@ -899,27 +899,29 @@ onUnmounted(() => {
|
|
|
:duration="2600"
|
|
:duration="2600"
|
|
|
:end-val="zone.value"
|
|
:end-val="zone.value"
|
|
|
:start-val="0"
|
|
:start-val="0"
|
|
|
- :style="{ color: zone.color, fontSize: '28px' }" />
|
|
|
|
|
|
|
+ :style="{ color: zone.color, fontSize: '22px' }" />
|
|
|
</div>
|
|
</div>
|
|
|
<div class="risk-card__desc">{{ zone.desc }}</div>
|
|
<div class="risk-card__desc">{{ zone.desc }}</div>
|
|
|
</article>
|
|
</article>
|
|
|
</div>
|
|
</div>
|
|
|
- </section>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
|
|
|
- <div class="left-column">
|
|
|
|
|
- <section class="panel board-panel kb-stage-card kb-stage-card--2">
|
|
|
|
|
- <div class="panel-title">
|
|
|
|
|
- <span class="icon-decorator"><span></span><span></span></span>
|
|
|
|
|
- 隐患排查治理统计
|
|
|
|
|
|
|
+ <div class="risk-hazard-block">
|
|
|
|
|
+ <div class="panel-title risk-hazard-block__title">
|
|
|
|
|
+ <span class="icon-decorator"><span></span><span></span></span>
|
|
|
|
|
+ 隐患排查治理统计
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div
|
|
|
|
|
+ ref="hazardChartRef"
|
|
|
|
|
+ class="chart-panel chart-panel--echart risk-hazard-block__chart"></div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div ref="hazardChartRef" class="chart-panel chart-panel--echart"></div>
|
|
|
|
|
</section>
|
|
</section>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
|
+ <div class="left-column">
|
|
|
<section class="panel board-panel kb-stage-card kb-stage-card--3">
|
|
<section class="panel board-panel kb-stage-card kb-stage-card--3">
|
|
|
- <div class="panel-title">
|
|
|
|
|
|
|
+ <div class="panel-title panel-title--center">
|
|
|
<span class="icon-decorator"><span></span><span></span></span>
|
|
<span class="icon-decorator"><span></span><span></span></span>
|
|
|
- 安全生产天数
|
|
|
|
|
|
|
+ 结果指标
|
|
|
</div>
|
|
</div>
|
|
|
<div ref="safeDayChartRef" class="safe-day-chart-panel"></div>
|
|
<div ref="safeDayChartRef" class="safe-day-chart-panel"></div>
|
|
|
</section>
|
|
</section>
|
|
@@ -929,7 +931,7 @@ onUnmounted(() => {
|
|
|
<section class="panel board-panel kb-stage-card kb-stage-card--5">
|
|
<section class="panel board-panel kb-stage-card kb-stage-card--5">
|
|
|
<div class="panel-title">
|
|
<div class="panel-title">
|
|
|
<span class="icon-decorator"><span></span><span></span></span>
|
|
<span class="icon-decorator"><span></span><span></span></span>
|
|
|
- SOC卡类型
|
|
|
|
|
|
|
+ 行为安全与风险预警
|
|
|
</div>
|
|
</div>
|
|
|
<div ref="socChartRef" class="soc-chart-panel"></div>
|
|
<div ref="socChartRef" class="soc-chart-panel"></div>
|
|
|
</section>
|
|
</section>
|
|
@@ -1139,7 +1141,7 @@ onUnmounted(() => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.board-body {
|
|
.board-body {
|
|
|
- padding: 18px 18px 24px;
|
|
|
|
|
|
|
+ padding: 5px 18px 24px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.summary-toolbar {
|
|
.summary-toolbar {
|
|
@@ -1216,15 +1218,15 @@ onUnmounted(() => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.summary-panel {
|
|
.summary-panel {
|
|
|
- padding: 0 10px 22px;
|
|
|
|
|
- height: 210px;
|
|
|
|
|
|
|
+ padding: 0 10px 10px;
|
|
|
|
|
+ height: 200px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.summary-grid {
|
|
.summary-grid {
|
|
|
display: grid;
|
|
display: grid;
|
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
|
gap: 24px;
|
|
gap: 24px;
|
|
|
- margin-top: 20px;
|
|
|
|
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.summary-tile {
|
|
.summary-tile {
|
|
@@ -1316,15 +1318,27 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
.risk-grid {
|
|
.risk-grid {
|
|
|
display: grid;
|
|
display: grid;
|
|
|
- padding: 30px;
|
|
|
|
|
- margin-top: 34px;
|
|
|
|
|
|
|
+ padding: 10px 24px 12px;
|
|
|
|
|
+ // margin-top: 18px;
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
- gap: 26px 28px;
|
|
|
|
|
|
|
+ gap: 10px 18px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.risk-hazard-block {
|
|
|
|
|
+ padding: 0 24px 5px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.risk-hazard-block__title {
|
|
|
|
|
+ margin-top: 0;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.risk-hazard-block__chart {
|
|
|
|
|
+ margin-top: 12px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.risk-card {
|
|
.risk-card {
|
|
|
- min-height: 182px;
|
|
|
|
|
- padding: 34px 24px;
|
|
|
|
|
|
|
+ min-height: 124px;
|
|
|
|
|
+ padding: 20px 18px;
|
|
|
background: linear-gradient(180deg, rgb(255 255 255 / 42%) 0%, rgb(220 232 250 / 28%) 100%);
|
|
background: linear-gradient(180deg, rgb(255 255 255 / 42%) 0%, rgb(220 232 250 / 28%) 100%);
|
|
|
border: 1px solid rgb(255 255 255 / 58%);
|
|
border: 1px solid rgb(255 255 255 / 58%);
|
|
|
border-radius: 18px;
|
|
border-radius: 18px;
|
|
@@ -1335,25 +1349,25 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
.risk-card__title {
|
|
.risk-card__title {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- font-size: 20px;
|
|
|
|
|
|
|
+ font-size: 16px;
|
|
|
font-weight: 800;
|
|
font-weight: 800;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- gap: 12px;
|
|
|
|
|
|
|
+ gap: 8px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.risk-card__dot {
|
|
.risk-card__dot {
|
|
|
- width: 18px;
|
|
|
|
|
- height: 18px;
|
|
|
|
|
|
|
+ width: 14px;
|
|
|
|
|
+ height: 14px;
|
|
|
border-radius: 999px;
|
|
border-radius: 999px;
|
|
|
- box-shadow: 0 0 0 6px rgb(255 255 255 / 35%);
|
|
|
|
|
|
|
+ box-shadow: 0 0 0 4px rgb(255 255 255 / 35%);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.risk-card__desc {
|
|
.risk-card__desc {
|
|
|
- margin-top: 36px;
|
|
|
|
|
- font-size: 17px;
|
|
|
|
|
|
|
+ margin-top: 18px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
color: #6f819a;
|
|
color: #6f819a;
|
|
|
- line-height: 1.55;
|
|
|
|
|
|
|
+ line-height: 1.35;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.qualification-panel {
|
|
.qualification-panel {
|