|
@@ -141,8 +141,10 @@
|
|
|
<div class="right-top">
|
|
|
<s-title :type="2" titleText="运行工况分析"></s-title>
|
|
|
<div class="run-status fullClass" >
|
|
|
- <div class="status-text">运行状态</div>
|
|
|
+ <div class="run-status-body">
|
|
|
+ <div class="status-text">运行状态</div>
|
|
|
<img src="@/assets/img/4.png" alt="" srcset="" />
|
|
|
+ </div>
|
|
|
<div :class="['status-result', 'status-result' + runStatusColor]">
|
|
|
{{ runStatusText }}
|
|
|
</div>
|
|
@@ -819,15 +821,15 @@ const determineHealthStatus = (value: string) => {
|
|
|
name:value,
|
|
|
color:'warn'
|
|
|
};
|
|
|
- } else if (value.includes('故障')) {
|
|
|
+ } else if (value.includes('严重')) {
|
|
|
return {
|
|
|
name:value,
|
|
|
- color:'danger'
|
|
|
+ color:'error'
|
|
|
};
|
|
|
- } else if (value.includes('严重')) {
|
|
|
+ } else if (value.includes('故障')) {
|
|
|
return {
|
|
|
name:value,
|
|
|
- color:'error'
|
|
|
+ color:'danger'
|
|
|
};
|
|
|
}
|
|
|
return "未知状态"; // 如果数据不在任何已定义的范围内
|
|
@@ -952,13 +954,22 @@ const healthColor = (status: string) => {
|
|
|
border: 1px solid #000;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
-
|
|
|
+.run-status-body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 40%;
|
|
|
+ align-items: center;
|
|
|
+ height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
.run-status {
|
|
|
margin-top: 20px;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- width: 70%;
|
|
|
+ justify-content:flex-start;
|
|
|
+ width: 100%;
|
|
|
align-items: center;
|
|
|
+ /* line-height: 60px; */
|
|
|
height: 40px;
|
|
|
color: #fff;
|
|
|
font-size: 20px;
|
|
@@ -982,7 +993,11 @@ const healthColor = (status: string) => {
|
|
|
text-align: left;
|
|
|
position: relative;
|
|
|
padding: 0 50px;
|
|
|
- white-space: nowrap
|
|
|
+ white-space: pre-wrap; /* Allows wrapping */
|
|
|
+ word-break: break-word; /* Breaks words at arbitrary points */
|
|
|
+ max-width: 460px;
|
|
|
+ display: inline-block;
|
|
|
+ overflow-wrap: break-word; /* Ensures long words break */
|
|
|
}
|
|
|
.status-result-danger {
|
|
|
background: linear-gradient(
|