|
|
@@ -88,7 +88,7 @@
|
|
|
{{
|
|
|
item.subsystems.generator.health_score >= 0
|
|
|
? String(
|
|
|
- Math.floor(item.subsystems.generator.health_score)
|
|
|
+ Math.floor(item.subsystems.generator.health_score),
|
|
|
).slice(0, 3)
|
|
|
: "-"
|
|
|
}}
|
|
|
@@ -101,7 +101,7 @@
|
|
|
{{
|
|
|
item.subsystems.drive_train.health_score >= 0
|
|
|
? String(
|
|
|
- Math.floor(item.subsystems.drive_train.health_score)
|
|
|
+ Math.floor(item.subsystems.drive_train.health_score),
|
|
|
).slice(0, 3)
|
|
|
: "-"
|
|
|
}}
|
|
|
@@ -114,7 +114,7 @@
|
|
|
{{
|
|
|
item.subsystems.nacelle.health_score >= 0
|
|
|
? String(
|
|
|
- Math.floor(item.subsystems.nacelle.health_score)
|
|
|
+ Math.floor(item.subsystems.nacelle.health_score),
|
|
|
).slice(0, 3)
|
|
|
: "-"
|
|
|
}}
|
|
|
@@ -127,7 +127,7 @@
|
|
|
{{
|
|
|
item.subsystems.grid.health_score >= 0
|
|
|
? String(
|
|
|
- Math.floor(item.subsystems.grid.health_score)
|
|
|
+ Math.floor(item.subsystems.grid.health_score),
|
|
|
).slice(0, 3)
|
|
|
: "-"
|
|
|
}}
|
|
|
@@ -135,14 +135,105 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 健康评估建议（通用展示） -->
|
|
|
+ <div class="advice-box">
|
|
|
+ <div class="advice-head">
|
|
|
+ <span class="advice-title">健康评估建议</span>
|
|
|
+ <span
|
|
|
+ class="advice-badge"
|
|
|
+ :class="`is-${getHealthLevelKey(item.total_health_score)}`"
|
|
|
+ >
|
|
|
+ {{ getHealthLabel(item.total_health_score) }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <p class="advice-text">
|
|
|
+ {{ getHealthAdvice(item.total_health_score) }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <p class="tishi">
|
|
|
- <span>健康度说明:</span>100-85代表健康，84-70代表亚健康，69-55代表一般，
|
|
|
- <55代表故障
|
|
|
- </p>
|
|
|
+ <!-- 健康度说明（卡片版） -->
|
|
|
+ <div class="health-legend">
|
|
|
+ <div class="legend-head">
|
|
|
+ <span class="legend-title">健康度说明</span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-body">
|
|
|
+ <div class="legend-item is-good">
|
|
|
+ <div class="legend-icon" aria-hidden="true">
|
|
|
+ <svg viewBox="0 0 24 24" class="legend-icon-svg">
|
|
|
+ <path
|
|
|
+ class="shield"
|
|
|
+ d="M12 2.5 19 6.2v6.4c0 5.2-3.6 9.8-7 10.9-3.4-1.1-7-5.7-7-10.9V6.2L12 2.5Z"
|
|
|
+ />
|
|
|
+ <path class="mark" d="M8.2 12.2l2.3 2.3 5.3-5.3" />
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="legend-content">
|
|
|
+ <p class="legend-range">100–85分（健康）</p>
|
|
|
+ <p class="legend-advice">
|
|
|
+ 建议：按计划进行常规巡检与维护，保持当前运行状态，无需额外检修。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item is-subhealthy">
|
|
|
+ <div class="legend-icon" aria-hidden="true">
|
|
|
+ <svg viewBox="0 0 24 24" class="legend-icon-svg">
|
|
|
+ <path
|
|
|
+ class="shield"
|
|
|
+ d="M12 2.5 19 6.2v6.4c0 5.2-3.6 9.8-7 10.9-3.4-1.1-7-5.7-7-10.9V6.2L12 2.5Z"
|
|
|
+ />
|
|
|
+ <path class="mark" d="M12 7.6v6.2" />
|
|
|
+ <path class="mark" d="M12 16.9h.01" />
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="legend-content">
|
|
|
+ <p class="legend-range">84–70分（亚健康）</p>
|
|
|
+ <p class="legend-advice">
|
|
|
+ 建议：加强状态监测，缩短巡检周期，排查潜在隐患，可安排预防性维护。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item is-normal">
|
|
|
+ <div class="legend-icon" aria-hidden="true">
|
|
|
+ <svg viewBox="0 0 24 24" class="legend-icon-svg">
|
|
|
+ <path
|
|
|
+ class="shield"
|
|
|
+ d="M12 2.5 19 6.2v6.4c0 5.2-3.6 9.8-7 10.9-3.4-1.1-7-5.7-7-10.9V6.2L12 2.5Z"
|
|
|
+ />
|
|
|
+ <path class="mark" d="M12 7.6v6.2" />
|
|
|
+ <path class="mark" d="M12 16.9h.01" />
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="legend-content">
|
|
|
+ <p class="legend-range">69–55分（一般）</p>
|
|
|
+ <p class="legend-advice">
|
|
|
+ 建议：开展专项检测与故障诊断，制定针对性检修计划，及时处理发现的问题，避免状态进一步恶化。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item is-fault">
|
|
|
+ <div class="legend-icon" aria-hidden="true">
|
|
|
+ <svg viewBox="0 0 24 24" class="legend-icon-svg">
|
|
|
+ <path
|
|
|
+ class="shield"
|
|
|
+ d="M12 2.5 19 6.2v6.4c0 5.2-3.6 9.8-7 10.9-3.4-1.1-7-5.7-7-10.9V6.2L12 2.5Z"
|
|
|
+ />
|
|
|
+ <path class="mark" d="M9 9l6 6" />
|
|
|
+ <path class="mark" d="M15 9l-6 6" />
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="legend-content">
|
|
|
+ <p class="legend-range">55分以下（故障）</p>
|
|
|
+ <p class="legend-advice">
|
|
|
+ 建议：立即停机或安排紧急检修，进行全面故障排查与修复，必要时更换关键部件，确保设备恢复正常运行能力。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -159,7 +250,6 @@ export default {
|
|
|
return {
|
|
|
parentOpt: [],
|
|
|
companyCode: "",
|
|
|
- timevalue: [],
|
|
|
ListData: [],
|
|
|
loading: false, // ✅ 加载状态.
|
|
|
// demo演示
|
|
|
@@ -244,6 +334,28 @@ export default {
|
|
|
return "故障";
|
|
|
},
|
|
|
|
|
|
+ getHealthLevelKey(val) {
|
|
|
+ if (!Number.isFinite(val) || val < 0) return "nodata";
|
|
|
+ if (val >= 85) return "good";
|
|
|
+ if (val >= 70) return "subhealthy";
|
|
|
+ if (val >= 55) return "normal";
|
|
|
+ return "fault";
|
|
|
+ },
|
|
|
+
|
|
|
+ getHealthAdvice(val) {
|
|
|
+ if (!Number.isFinite(val) || val < 0) return "暂无健康评估数据。";
|
|
|
+ if (val >= 85) {
|
|
|
+ return "按计划进行常规巡检与维护，保持当前运行状态，无需额外检修。";
|
|
|
+ }
|
|
|
+ if (val >= 70) {
|
|
|
+ return "加强状态监测，缩短巡检周期，排查潜在隐患，可安排预防性维护。";
|
|
|
+ }
|
|
|
+ if (val >= 55) {
|
|
|
+ return "开展专项检测与故障诊断，制定针对性检修计划，及时处理发现的问题，避免状态进一步恶化。";
|
|
|
+ }
|
|
|
+ return "立即停机或安排紧急检修，进行全面故障排查与修复，必要时更换关键部件，确保设备恢复正常运行能力。";
|
|
|
+ },
|
|
|
+
|
|
|
getHealthColor(val) {
|
|
|
if (!Number.isFinite(val) || val < 0) return "#6c757d"; // 灰色
|
|
|
if (val >= 85) return "#28a745"; // 绿色
|
|
|
@@ -414,6 +526,59 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .advice-box {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 10px 10px;
|
|
|
+ border-top: 1px solid var(--header-bg);
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .advice-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ .advice-title {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ .advice-badge {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 700;
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 999px;
|
|
|
+ &.is-good {
|
|
|
+ color: #1f7a3a;
|
|
|
+ background: #e7f6ee;
|
|
|
+ }
|
|
|
+ &.is-subhealthy {
|
|
|
+ color: #8a6d00;
|
|
|
+ background: #fff6e5;
|
|
|
+ }
|
|
|
+ &.is-normal {
|
|
|
+ color: #9a4d00;
|
|
|
+ background: #fff0e6;
|
|
|
+ }
|
|
|
+ &.is-fault {
|
|
|
+ color: #b42318;
|
|
|
+ background: #ffebee;
|
|
|
+ }
|
|
|
+ &.is-nodata {
|
|
|
+ color: #606266;
|
|
|
+ background: #f4f4f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .advice-text {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.45;
|
|
|
+ color: #606266;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.jia {
|
|
|
@@ -433,10 +598,132 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.tishi {
|
|
|
- font-size: 12px;
|
|
|
- span {
|
|
|
+.health-legend {
|
|
|
+ margin-top: 14px;
|
|
|
+ border-radius: 14px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
|
|
|
+ border: 1px solid rgba(228, 231, 237, 0.8);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .legend-head {
|
|
|
+ padding: 12px 14px 0;
|
|
|
+ }
|
|
|
+ .legend-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+
|
|
|
+ .legend-body {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
+ gap: 0;
|
|
|
+ padding: 10px 10px 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .legend-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 10px;
|
|
|
+ padding: 10px 12px;
|
|
|
+ position: relative;
|
|
|
+ min-height: 88px;
|
|
|
+ }
|
|
|
+ .legend-item + .legend-item::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 16px;
|
|
|
+ bottom: 16px;
|
|
|
+ width: 1px;
|
|
|
+ background: rgba(220, 223, 230, 0.7);
|
|
|
+ }
|
|
|
+
|
|
|
+ .legend-icon {
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ flex: 0 0 auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: currentColor;
|
|
|
+ }
|
|
|
+ .legend-icon-svg {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
+ .legend-icon-svg .shield {
|
|
|
+ fill: none;
|
|
|
+ stroke: currentColor;
|
|
|
+ stroke-width: 1.8;
|
|
|
+ stroke-linejoin: round;
|
|
|
+ }
|
|
|
+ .legend-icon-svg .mark {
|
|
|
+ fill: none;
|
|
|
+ stroke: currentColor;
|
|
|
+ stroke-width: 2.2;
|
|
|
+ stroke-linecap: round;
|
|
|
+ stroke-linejoin: round;
|
|
|
+ }
|
|
|
+ .legend-content {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+ .legend-range {
|
|
|
+ margin: 0 0 6px;
|
|
|
+ font-size: 13px;
|
|
|
font-weight: 800;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+ .legend-advice {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.45;
|
|
|
+ color: #606266;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ .legend-item.is-good {
|
|
|
+ color: #28a745;
|
|
|
+ .legend-range {
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .legend-item.is-subhealthy {
|
|
|
+ color: #ffc107;
|
|
|
+ .legend-range {
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .legend-item.is-normal {
|
|
|
+ color: #fd7e14;
|
|
|
+ .legend-range {
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .legend-item.is-fault {
|
|
|
+ color: #dc3545;
|
|
|
+ .legend-range {
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .health-legend {
|
|
|
+ .legend-body {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+ .legend-item + .legend-item::before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .legend-item {
|
|
|
+ border-top: 1px solid rgba(220, 223, 230, 0.7);
|
|
|
+ }
|
|
|
+ .legend-item:first-child {
|
|
|
+ border-top: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -469,6 +756,12 @@ export default {
|
|
|
#0000 calc(100% - var(--b) - 1px),
|
|
|
#000 calc(100% - var(--b))
|
|
|
);
|
|
|
+ mask: repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
|
|
|
+ radial-gradient(
|
|
|
+ farthest-side,
|
|
|
+ #0000 calc(100% - var(--b) - 1px),
|
|
|
+ #000 calc(100% - var(--b))
|
|
|
+ );
|
|
|
-webkit-mask-composite: destination-in;
|
|
|
mask-composite: intersect;
|
|
|
animation: l4 1s infinite steps(10);
|
liujiejie