1

src/views/hitch-screen/index.vue

@@ -23,7 +23,7 @@
         </div>
 
         <div style="position: relative;">
-          <img v-if="mapUrl" class="map-bg" :src="mapUrl" alt="">
+          <img v-if="mapUrl" class="map-bg" :src="mapUrl" alt="" @load="handleImgLoad">
           <div v-for="item in visibleNormalList" :key="'normal-' + item.no" class="sb-point normal"
             :style="pointStyle(item)" @mouseenter="handlePointEnter(item)" @mouseleave="handlePointLeave">
             <span class="ripple"></span>
@@ -47,31 +47,33 @@
       </div>
 
       <!-- 右侧数据面板：纯 CSS 绘制，不再使用 right.png 背景图 -->
-      <div class="data-panel" :style="{ height: screenHeight + 'px' }">
-        <div class="panel-title">本月保养计划</div>
-        <div class="panel-card">
-          <div class="bar-title">完成/计划</div>
-          <div class="month-num">
-            {{ jobData.monthNum != null ? jobData.finishNum + '/' + jobData.monthNum : '暂无' }}
-          </div>
-          <div class="rate-line">
-            <span>待完成：{{ jobData.waitNum != null ? jobData.waitNum : '暂无' }}</span>
-            <span>完成率：{{ jobData.rate != null ? jobData.rate + '%' : '暂无' }}</span>
-          </div>
-          <div class="bar-title">本周任务</div>
-          <div class="job-box">
-            <div class="item title">
-              <span>设备编号</span>
-              <span>保养任务</span>
-              <span>保养计划时间</span>
+      <div class="data-panel">
+        <div style="flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;">
+          <div class="panel-title">本月保养计划</div>
+          <div class="panel-card">
+            <div class="bar-title">完成/计划</div>
+            <div class="month-num">
+              {{ jobData.monthNum != null ? jobData.finishNum + '/' + jobData.monthNum : '暂无' }}
+            </div>
+            <div class="rate-line">
+              <span>待完成：{{ jobData.waitNum != null ? jobData.waitNum : '暂无' }}</span>
+              <span>完成率：{{ jobData.rate != null ? jobData.rate + '%' : '暂无' }}</span>
             </div>
-            <div class="scroll-wrap" ref="scrollWrap">
-              <div class="scroll-inner" :class="{ scrolling: needScroll }"
-                :style="{ animationDuration: scrollDuration }">
-                <div v-for="(item, index) in doubledWeekList" :key="index" class="item">
-                  <span>{{ item.sbNo }}</span>
-                  <span class="ellipsis">{{ item.requirement || '' }}</span>
-                  <span>{{ item.startTime }}</span>
+            <div class="bar-title">本周任务</div>
+            <div class="job-box">
+              <div class="item title">
+                <span>设备编号</span>
+                <span>保养任务</span>
+                <span>保养计划时间</span>
+              </div>
+              <div class="scroll-wrap" ref="scrollWrap">
+                <div class="scroll-inner" :class="{ scrolling: needScroll }"
+                  :style="{ animationDuration: scrollDuration }">
+                  <div v-for="(item, index) in doubledWeekList" :key="index" class="item">
+                    <span>{{ item.sbNo }}</span>
+                    <span class="ellipsis">{{ item.requirement || '' }}</span>
+                    <span>{{ item.startTime }}</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -89,8 +91,6 @@ import { axios } from '@/utils/request'
 // 见 public/hitch-screen/static/index.css 的 .echart；
 // 打点保存的 zjm/jbdh 为基于该尺寸的像素坐标，展示时换算成百分比，
 // 使打点与背景图等比缩放，避免固定像素定位在不同屏幕下发生偏移
-const BASE_WIDTH = 1334
-const BASE_HEIGHT = 1080
 
 export default {
   name: 'HitchScreen',
@@ -104,9 +104,7 @@ export default {
       jobData: {},
       tooltip: { visible: false, left: '0%', top: '0%', info: {} },
       needScroll: false,
-      timer: null,
-      // 动态计算的页面高度：刚好铺满视口剩余区域
-      screenHeight: 600
+      timer: null
     }
   },
   computed: {
@@ -142,23 +140,15 @@ export default {
     // 与 index.html 一致：60 秒轮询设备打点数据
     this.timer = setInterval(this.getData, 60000)
   },
-  mounted() {
-    this.calcHeight()
-    window.addEventListener('resize', this.calcHeight)
-  },
   beforeDestroy() {
-    window.removeEventListener('resize', this.calcHeight)
     if (this.timer) {
       clearInterval(this.timer)
       this.timer = null
     }
   },
   methods: {
-    // 高度 = 视口高 - 元素顶部偏移 - 底部页脚高，刚好铺满且不产生滚动条
-    calcHeight() {
-      const top = this.$el.getBoundingClientRect().top
-      const footer = document.querySelector('.ant-layout-footer')
-      this.screenHeight = Math.max(window.innerHeight - top, 400)
+    // 底图加载完成后左侧高度才确定，此时重测右侧滚动列表
+    handleImgLoad() {
       this.$nextTick(this.checkScroll)
     },
     // 像素坐标转百分比定位：背景图拉伸铺满容器后，点与图保持相同比例，不偏移
@@ -288,22 +278,21 @@ export default {
 }
 
 .screen-body {
-  display: flex;
+  position: relative;
   width: 100%;
-  height: 100%;
-  justify-content: space-between;
 }
 
 .map-box {
   position: relative;
-  flex: 1;
-  height: 100%;
+  /* 右侧让出数据面板宽度；行高仅由图片撑开，作为右侧高度基准 */
+  margin-right: 386px;
   overflow: hidden;
 
+  /* 高度 auto：图片按宽度等比撑开，作为整行高度的基准 */
   .map-bg {
     display: block;
     width: 100%;
-    height: 100%;
+    height: auto;
   }
 }
 
@@ -400,7 +389,13 @@ export default {
 }
 
 .data-panel {
+  /* 绝对定位脱离文档流：不参与行高计算，top/bottom 0 严格跟随左侧图片高度 */
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
   width: 386px;
+  overflow: hidden;
   // CSS 绘制深蓝渐变背景，替代原 right.png 背景图
   background: linear-gradient(180deg, #07344a 0%, #05263b 60%, #041d2c 100%);
   color: #fff;