fix: 调整左右图表轴标签重叠和运行状态UI

src/components/HomeChart/index.vue

@@ -98,6 +98,9 @@ const initChart = () => {
         symbol: ["none", "arrow"],
         symbolSize: [4, 4],
       },
+      axisLabel: {
+        rotate: "0.5",
+      },
     },
     yAxis: {
       type: "value",
@@ -174,7 +177,6 @@ const initChart = () => {
 };
 
 const startDataUpdate = () => {
-  console.log('startDataUpdate 继续加载')
   updateData.value = true; // 允许数据更新
   if (updateTimeout) {
     clearTimeout(updateTimeout); // 清除之前的定时器
@@ -183,7 +185,6 @@ const startDataUpdate = () => {
 };
 
 const pauseDataUpdate = () => {
-  console.log('pauseDataUpdate 暂停数据')
   updateData.value = false; // 暂停数据更新
   if (updateTimeout) {
     clearTimeout(updateTimeout); // 清除之前的定时器

src/views/HealthStatusAnalysis/mock.vue

@@ -23,7 +23,7 @@
             popper-class="data-style"
             class="custom-time-input"
             v-model="queryParamsMock.sDate"
-            style="width: 150px"
+            style="width: 149.5px"
             type="datetime"
             placeholder=""
             :disabled-date="disabledDate"
@@ -32,7 +32,7 @@
           <div class="line-select"></div>
           <el-date-picker
             v-model="queryParamsMock.eDate"
-            style="width: 150px"
+            style="width: 149.5px"
             type="datetime"
             placeholder=""
             :disabled-date="disabledDate"
@@ -68,8 +68,8 @@
             {{ runStatusText }}
           </div>
         </div>
-        <RunStatus :machineImgParamsRef="machineImgParamsRef" />
-        <div class="machine-all" style="margin-top: 10px" v-if="false">
+        <!-- <RunStatus :machineImgParamsRef="machineImgParamsRef" /> -->
+        <div class="machine-all" style="margin-top: 10px;scale: 95%;" v-if="true">
           <img
             class="machine"
             src="@/assets/img/macgine.png"
@@ -79,17 +79,17 @@
           <!-- 添加注释和标签 -->
           <div class="annotation" style="top: 16%; left: 10%">左DE活塞</div>
           <div class="annotation" style="top: 15%; left: 25%">左DE燃油齿条</div>
-          <div class="annotation" style="top: 2.8%; left: 36%">左DE冷却水</div>
+          <div class="annotation highlight" style="top: 2.8%; left: 36%">左DE冷却水</div>
           <div class="annotation" style="top: 15%; left: 40%">左DE箱装体</div>
           <div class="annotation" style="top: 8%; left: 46%">左DE燃油齿条</div>
-          <div class="annotation" style="top: 0%; left: 55.8%">右齿轮箱</div>
-          <div class="annotation" style="top: 10%; left: 57%">
+          <div class="annotation highlight" style="top: 0%; left: 55.8%">右齿轮箱</div>
+          <div class="annotation highlight" style="top: 10%; left: 57%">
             右GT高压压气机
           </div>
           <div class="annotation" style="top: 20%; left: 68%">
             右GT脉冲温度调节器保护
           </div>
-          <div class="annotation" style="bottom: 4%; left: 15.5%">
+          <div class="annotation highlight" style="bottom: 4%; left: 15.5%">
             右DE增压空气
           </div>
           <div class="annotation" style="bottom: 10%; left: 24%">
@@ -98,9 +98,9 @@
           <div class="annotation" style="bottom: -2%; left: 28%">
             右DE箱装体冷却风机
           </div>
-          <div class="annotation" style="bottom: 0%; left: 43%">右DE滑油</div>
+          <div class="annotation highlight" style="bottom: 0%; left: 43%">右DE滑油</div>
           <!-- 带有小边框的注释 -->
-          <div class="annotation bordered-box" style="top: -2%; left: 2.5%">
+          <div class="annotation bordered-box" style="top: -2%; left: 0.5%">
             <div>
               <div>压力A排</div>
 
@@ -125,7 +125,7 @@
               </div>
             </div>
           </div>
-          <div class="annotation bordered-box" style="top: -4%; right: 11.5%">
+          <div class="annotation bordered-box" style="top: -4%; right: 10.5%">
             <div>
               <div>海水压力</div>
               <div class="value">
@@ -176,7 +176,7 @@
 
           <div class="annotation bordered-box" style="top: 29%; right: 6%">
             <div>
-              <div>压力（1）</div>
+              <div>压力 (1)</div>
               <div class="value">
                 {{
                   formatPressure(machineImgParamsRef?.right_de_oil_pressure_1)
@@ -185,7 +185,7 @@
               </div>
             </div>
             <div>
-              <div>压力（2）</div>
+              <div>压力 (2)</div>
               <div class="value">
                 {{
                   formatPressure(machineImgParamsRef?.right_de_oil_pressure_2)
@@ -194,7 +194,7 @@
               </div>
             </div>
           </div>
-          <div class="annotation bordered-box" style="top: 90%; right: 11.5%">
+          <div class="annotation bordered-box" style="top: 90%; right: 10%">
             <div>
               <div>压力A排</div>
               <div class="value">
@@ -354,8 +354,8 @@
               {{ healthyStatusText.name }}
             </div>
           </div>
-          <div class="status-btn" v-if="isSuspend"  @click="goResult(false)">继续加载</div>
-          <div class="status-btn" v-else @click="goResult(true)">暂停数据</div>
+          <div class="status-btn" v-if="isSuspend" @click="goResult(false)">暂停数据</div>
+          <div class="status-btn" v-else @click="goResult(true)">继续加载</div>
         </div>
 
         <div class="history-all">
@@ -1622,17 +1622,16 @@ const runLineParams = () => {
   );
   setLineparames(newDataValue, result);
 };
-const isSuspend = ref(false);
+const isSuspend = ref(true);
 // 健康状态
 const goResult = async (suspend: boolean) => {
-  isSuspend.value = suspend
+  isSuspend.value = !isSuspend.value
   // 开启暂停
-  if (isSuspend.value) {
-    await lineChartRef.value.pauseDataUpdate();
-  } else {
+  if (suspend) {
     // 继续刷新数据
     await lineChartRef.value.startDataUpdate();
-
+  } else {
+    await lineChartRef.value.pauseDataUpdate();
   }
 };
 const xAxisData = ref([]);
@@ -1863,10 +1862,15 @@ const healthColor = (status: string) => {
   background-color: rgba(0, 0, 0, 0.5);
   padding: 0.5px 1px;
   border-radius: 3px;
+  font-size: 13px;
+}
+.highlight {
+  font-weight: bolder;
   font-size: 14px;
+  color: rgba(255, 255, 255, 0.8);
 }
 .bordered-box div {
-  font-size: 12px;
+  font-size: 12.5px;
   display: flex;
   justify-content: space-between; /* 使文本和数值分布在两端 */
   line-height: 18px;
@@ -2098,7 +2102,7 @@ const healthColor = (status: string) => {
 .paramsRunBtn {
   position: absolute;
   z-index: 6;
-  right: 130px;
+  right: 32px;
   top: -45px;
   width: 130px;
   height: 30px;

src/views/HealthStatusAnalysis/runStatus.vue

@@ -20,14 +20,15 @@
             :key="index"
             class="bordered-box"
             :style="{
-              width: box.width,
+              // width: box.width,
               position: 'absolute',
               top: box.top,
               left: box.left,
             }"
           >
             <div v-for="(param, i) in box.params" :key="i">
-              {{ param.label }}{{ machineImgParamsRef[param.key] }}<span>{{ param.unit }}</span>
+              {{ param.label }}
+              <span style="margin-left: 15px;">{{ machineImgParamsRef[param.key] }}{{ param.unit }}</span>
             </div>
           </div>
         </div>