|
|
@@ -212,7 +212,7 @@ const bottomCards = ref([
|
|
|
icon: Histogram,
|
|
|
accent: '#4f8dff',
|
|
|
glow: 'rgba(79, 141, 255, 0.2)',
|
|
|
- lines: ['在用: 0台', '待检: 0台(重点关注)']
|
|
|
+ lines: ['在用: 0台', '待检: 0项(重点关注)']
|
|
|
},
|
|
|
{
|
|
|
title: '应急演练',
|
|
|
@@ -315,7 +315,7 @@ async function getInstrumentOverview() {
|
|
|
|
|
|
bottomCards.value[1].lines = [
|
|
|
`在用: ${total.value}台`,
|
|
|
- `待检: ${instrumentExpired.value}台(重点关注)`
|
|
|
+ `待检: ${instrumentExpired.value}项(重点关注)`
|
|
|
]
|
|
|
}
|
|
|
|
|
|
@@ -591,33 +591,6 @@ function getSocChartOption(): echarts.EChartsOption {
|
|
|
}
|
|
|
}))
|
|
|
}
|
|
|
- ],
|
|
|
- graphic: [
|
|
|
- {
|
|
|
- type: 'text',
|
|
|
- left: '29%',
|
|
|
- top: '43%',
|
|
|
- style: {
|
|
|
- text: 'SOC卡',
|
|
|
- fill: '#6b7f9c',
|
|
|
- fontSize: 18,
|
|
|
- fontWeight: 700,
|
|
|
- fontFamily: FONT_FAMILY
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'text',
|
|
|
- left: '26.5%',
|
|
|
- top: '50%',
|
|
|
- textAlign: 'center',
|
|
|
- style: {
|
|
|
- text: `${permitStats.value.reduce((sum, item) => sum + item.value, 0)}`,
|
|
|
- fill: '#114a9b',
|
|
|
- fontSize: 30,
|
|
|
- fontWeight: 700,
|
|
|
- fontFamily: 'YouSheBiaoTiHei, sans-serif'
|
|
|
- }
|
|
|
- }
|
|
|
]
|
|
|
}
|
|
|
}
|
|
|
@@ -888,7 +861,7 @@ onUnmounted(() => {
|
|
|
<section class="panel board-panel board-panel--center kb-stage-card kb-stage-card--4">
|
|
|
<div class="panel-title panel-title--center">
|
|
|
<span class="icon-decorator"><span></span><span></span></span>
|
|
|
- 安全风险四色动态分布
|
|
|
+ 风险管控及隐患排查
|
|
|
</div>
|
|
|
<div class="risk-grid">
|
|
|
<article v-for="zone in riskZones" :key="zone.title" class="risk-card">
|
|
|
@@ -899,69 +872,77 @@ onUnmounted(() => {
|
|
|
:duration="2600"
|
|
|
:end-val="zone.value"
|
|
|
:start-val="0"
|
|
|
- :style="{ color: zone.color, fontSize: '28px' }" />
|
|
|
+ :style="{ color: zone.color, fontSize: '22px' }" />
|
|
|
</div>
|
|
|
<div class="risk-card__desc">{{ zone.desc }}</div>
|
|
|
</article>
|
|
|
</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 ref="hazardChartRef" class="chart-panel chart-panel--echart"></div>
|
|
|
</section>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div class="left-column">
|
|
|
<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>
|
|
|
- 安全生产天数
|
|
|
+ 结果指标
|
|
|
</div>
|
|
|
<div ref="safeDayChartRef" class="safe-day-chart-panel"></div>
|
|
|
</section>
|
|
|
</div>
|
|
|
|
|
|
<div class="right-column">
|
|
|
- <section class="panel board-panel kb-stage-card kb-stage-card--5">
|
|
|
- <div class="panel-title">
|
|
|
+ <section class="panel board-panel board-panel--center kb-stage-card kb-stage-card--4">
|
|
|
+ <div class="panel-title panel-title--center">
|
|
|
<span class="icon-decorator"><span></span><span></span></span>
|
|
|
- SOC卡类型
|
|
|
+ 行为安全与风险预警
|
|
|
</div>
|
|
|
- <div ref="socChartRef" class="soc-chart-panel"></div>
|
|
|
- </section>
|
|
|
+ <section class="board-panel kb-stage-card kb-stage-card--5 pt-2">
|
|
|
+ <div class="panel-title">
|
|
|
+ <!-- <span class="icon-decorator"><span></span><span></span></span> -->
|
|
|
+ SOC卡类型
|
|
|
+ </div>
|
|
|
+ <div ref="socChartRef" class="soc-chart-panel"></div>
|
|
|
+ </section>
|
|
|
|
|
|
- <section class="panel board-panel kb-stage-card kb-stage-card--6">
|
|
|
- <div class="panel-title">
|
|
|
- <span class="icon-decorator"><span></span><span></span></span>
|
|
|
- 人员资质风险预警
|
|
|
- </div>
|
|
|
- <div class="qualification-panel">
|
|
|
- <div class="qualification-icon">
|
|
|
- <el-icon>
|
|
|
- <CollectionTag />
|
|
|
- </el-icon>
|
|
|
+ <section class="board-panel kb-stage-card kb-stage-card--6 pl-4">
|
|
|
+ <div class="panel-title">
|
|
|
+ <span class="icon-decorator"><span></span><span></span></span>
|
|
|
+ 人员资质风险预警
|
|
|
</div>
|
|
|
- <div class="qualification-list">
|
|
|
- <div
|
|
|
- v-for="item in qualificationWarnings"
|
|
|
- :key="item.label"
|
|
|
- class="qualification-item">
|
|
|
- <span class="qualification-item__label">{{ item.label }}:</span>
|
|
|
- <strong :style="{ color: item.accent }">
|
|
|
- <CountTo
|
|
|
- :duration="2600"
|
|
|
- :end-val="item.value"
|
|
|
- :start-val="0"
|
|
|
- :style="{ color: item.accent }" />
|
|
|
- <span class="pl-2">人</span>
|
|
|
- </strong>
|
|
|
+ <div class="qualification-panel">
|
|
|
+ <div class="qualification-icon">
|
|
|
+ <el-icon>
|
|
|
+ <CollectionTag />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="qualification-list">
|
|
|
+ <div
|
|
|
+ v-for="item in qualificationWarnings"
|
|
|
+ :key="item.label"
|
|
|
+ class="qualification-item">
|
|
|
+ <span class="qualification-item__label">{{ item.label }}:</span>
|
|
|
+ <strong :style="{ color: item.accent }">
|
|
|
+ <CountTo
|
|
|
+ :duration="2600"
|
|
|
+ :end-val="item.value"
|
|
|
+ :start-val="0"
|
|
|
+ :style="{ color: item.accent }" />
|
|
|
+ <span class="pl-2">人</span>
|
|
|
+ </strong>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </section>
|
|
|
</section>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -1139,7 +1120,7 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
.board-body {
|
|
|
- padding: 18px 18px 24px;
|
|
|
+ padding: 5px 18px 24px;
|
|
|
}
|
|
|
|
|
|
.summary-toolbar {
|
|
|
@@ -1216,15 +1197,15 @@ onUnmounted(() => {
|
|
|
}
|
|
|
|
|
|
.summary-panel {
|
|
|
- padding: 0 10px 22px;
|
|
|
- height: 210px;
|
|
|
+ padding: 0 10px 10px;
|
|
|
+ height: 200px;
|
|
|
}
|
|
|
|
|
|
.summary-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
|
gap: 24px;
|
|
|
- margin-top: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
.summary-tile {
|
|
|
@@ -1316,15 +1297,27 @@ onUnmounted(() => {
|
|
|
|
|
|
.risk-grid {
|
|
|
display: grid;
|
|
|
- padding: 30px;
|
|
|
- margin-top: 34px;
|
|
|
+ padding: 10px 24px 12px;
|
|
|
+ // margin-top: 18px;
|
|
|
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 {
|
|
|
- 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%);
|
|
|
border: 1px solid rgb(255 255 255 / 58%);
|
|
|
border-radius: 18px;
|
|
|
@@ -1335,25 +1328,25 @@ onUnmounted(() => {
|
|
|
|
|
|
.risk-card__title {
|
|
|
display: flex;
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 16px;
|
|
|
font-weight: 800;
|
|
|
align-items: center;
|
|
|
- gap: 12px;
|
|
|
+ gap: 8px;
|
|
|
}
|
|
|
|
|
|
.risk-card__dot {
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
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 {
|
|
|
- margin-top: 36px;
|
|
|
- font-size: 17px;
|
|
|
+ margin-top: 18px;
|
|
|
+ font-size: 13px;
|
|
|
font-weight: 600;
|
|
|
color: #6f819a;
|
|
|
- line-height: 1.55;
|
|
|
+ line-height: 1.35;
|
|
|
}
|
|
|
|
|
|
.qualification-panel {
|
|
|
@@ -1361,6 +1354,7 @@ onUnmounted(() => {
|
|
|
margin-top: 26px;
|
|
|
padding: 28px;
|
|
|
grid-template-columns: 140px 1fr;
|
|
|
+ padding-left: 120px;
|
|
|
align-items: center;
|
|
|
gap: 26px;
|
|
|
}
|