调整交通路口信号监控和信号灯配时图组合组件的布局可以动态自适应

src/components/IntersectionSignalMonitoring.vue

@@ -1,10 +1,11 @@
 <template>
     <div class="container" ref="Container">
         <div class="intersection" ref="intersectionBox">
-            <video class="video-1" :src="video1" autoplay muted loop></video>
-            <video class="video-2" :src="video2" autoplay muted loop></video>
-            <video class="video-3" :src="video1" autoplay muted loop></video>
-            <video class="video-4" :src="video2" autoplay muted loop></video>
+            <video class="video-1" :src="video1" :style="videoStyles.v1" autoplay muted loop></video>
+            <video class="video-2" :src="video2" :style="videoStyles.v2" autoplay muted loop></video>
+            <video class="video-3" :src="video1" :style="videoStyles.v3" autoplay muted loop></video>
+            <video class="video-4" :src="video2" :style="videoStyles.v4" autoplay muted loop></video>
+
             <IntersectionMap :mapData="intersectionData" />
         </div>
         <div class="signaltiming" ref="Signaltiming">
@@ -46,7 +47,8 @@ export default {
             mapWidth: 600,
             mapHeight: 600,
             video1,
-            video2
+            video2,
+            videoStyles: { v1: {}, v2: {}, v3: {}, v4: {} }
         };
     },
     computed: {
@@ -85,6 +87,7 @@ export default {
     measureIntersectionBox() {
       const container = this.$refs.Container;
       const signaltiming = this.$refs.Signaltiming;
+      const box = this.$refs.intersectionBox;
       if (!container) return;
       // 容器总高度 - padding(上下各15) - gap(12) - signaltiming高度(300) = intersection可用高度
       const containerH = container.clientHeight;
@@ -94,6 +97,35 @@ export default {
       const gap = 12;
       this.mapWidth = containerW - padding;
       this.mapHeight = containerH - padding - gap - signalH;
+
+      // 根据 Konva 画布的缩放比例动态计算视频位置
+      if (box) {
+        const boxW = box.clientWidth;
+        const boxH = box.clientHeight;
+        const designSize = 900; // IntersectionMap 设计尺寸
+        const scale = Math.min(boxW / designSize, boxH / designSize);
+
+        // Konva 画布实际尺寸
+        const canvasH = designSize * scale;
+
+        // 视频尺寸（固定高度280，宽度按16:9比例计算）
+        const vh = Math.round(280 * scale);
+        const vw = Math.round(280 * 16 / 9 * scale);
+        // 马路半幅宽（缩放后）
+        const halfRoadScaled = Math.round(160 * scale);
+        // 水平偏移 = box宽度/2 - 视频宽度 - 马路半幅宽
+        const hOffset = Math.round(boxW / 2 - vw - halfRoadScaled - 3); // 3px微调
+        // 垂直偏移 = 画布顶部在容器中的偏移
+        const vOffset = Math.round((boxH - canvasH) / 2);
+
+        const size = { width: vw + 'px', height: vh + 'px' };
+        this.videoStyles = {
+          v1: { ...size, left: hOffset + 'px', top: vOffset + 'px' },
+          v2: { ...size, right: hOffset + 'px', top: vOffset + 'px' },
+          v3: { ...size, left: hOffset + 'px', bottom: vOffset + 'px' },
+          v4: { ...size, right: hOffset + 'px', bottom: vOffset + 'px' }
+        };
+      }
     },
     startSimulationTimer() {
       this.timer = setInterval(() => {
@@ -132,37 +164,27 @@ export default {
     background-color: #212842;
     padding: 15px;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
 }
 .container .intersection {
     flex: 1;
+    min-height: 0;
     width: 100%;
-    height: 350px;
     position: relative;
 }
 .container .intersection video {
     position: absolute;
     z-index: 10;
-    height: 110px;
-    width: 200px;
-}
-.container .intersection .video-1 {
-    left: 78px;
-    top: 0;
-}
-.container .intersection .video-2 {
-    right: 78px;
-    top: 0;
-}
-.container .intersection .video-3 {
-    left: 78px;
-    bottom: 0;
-}
-.container .intersection .video-4 {
-    right: 78px;
-    bottom: 0;
+    object-fit: fill;
 }
 .container .signaltiming {
     margin-top: 12px;
     width: 100%;
+    min-width: 0;
+    height: 180px;
+    flex-shrink: 0;
+    overflow: hidden;
 }
 </style>

src/components/SignalTimingChart.vue

@@ -69,13 +69,14 @@ export default {
   data() {
     return {
       chartInstance: null,
-      followPhase: false
+      followPhase: false,
+      scaleFactor: 1
     };
   },
   mounted() {
+    this.updateScale();
     this.initChart();
     window.addEventListener('resize', this.handleResize);
-    // 监听容器尺寸变化，自适应 resize（用 rAF 防抖避免循环）
     this._resizePending = false;
     this._resizeObserver = new ResizeObserver(() => {
       if (!this._resizePending) {
@@ -116,25 +117,35 @@ export default {
       }
     },
     loading(newVal) {
-      // 当 loading 结束时，确保图表进行一次渲染
+      // 当 loading 结束时，销毁旧实例并重建，确保使用正确的容器尺寸
       if (!newVal && this.phaseData.length > 0) {
         this.$nextTick(() => {
-          if (!this.chartInstance) {
+          setTimeout(() => {
+            if (this.chartInstance) {
+              this.chartInstance.dispose();
+              this.chartInstance = null;
+            }
             this.initChart();
-          } else {
-            this.chartInstance.resize();
-          }
-          this.updateChart();
+          }, 50);
         });
       }
     }
   },
   methods: {
     handleResize() {
+      this.updateScale();
       if (this.chartInstance) {
         this.chartInstance.resize();
+        this.updateChart();
       }
     },
+    updateScale() {
+      const el = this.$el;
+      if (!el) return;
+      const baseWidth = 600; // 设计基准宽度
+      this.scaleFactor = Math.max(0.5, el.clientWidth / baseWidth);
+      el.style.setProperty('--s', this.scaleFactor);
+    },
     
     initChart() {
       const chartDom = this.$refs.chartDom;
@@ -144,6 +155,12 @@ export default {
       if (this.phaseData.length > 0) {
         this.updateChart();
       }
+      // 延迟一帧 resize，确保 v-show 切换后容器有正确宽度
+      this.$nextTick(() => {
+        requestAnimationFrame(() => {
+          this.handleResize();
+        });
+      });
     },
     
     updateChart() {
@@ -152,46 +169,48 @@ export default {
     },
     
     getChartOption() {
+      const s = this.scaleFactor;
       return {
-        backgroundColor: 'transparent', 
-        grid: { left: 10, right: 10, top: 50, bottom: 10, containLabel: false }, 
-        xAxis: { type: 'value', min: 0, max: this.cycleLength, show: false }, 
+        backgroundColor: 'transparent',
+        grid: { left: Math.round(10 * s), right: Math.round(10 * s), top: Math.round(50 * s), bottom: Math.round(10 * s), containLabel: false },
+        xAxis: { type: 'value', min: 0, max: this.cycleLength, show: false },
         yAxis: { type: 'category', data: ['Track 0', 'Track 1'], inverse: true, show: false },
-        series: [ 
-          { 
-            type: 'custom', 
-            renderItem: this.renderCustomItem, 
-            encode: { x: [1, 2], y: 0 }, 
-            data: this.phaseData, 
-            markLine: { 
-              symbol: ['none', 'none'], 
-              silent: true, 
-              label: { 
-                show: true, 
-                position: 'start', 
-                formatter: `${this.currentTime}/${this.cycleLength}`, 
-                color: '#fff', 
-                backgroundColor: COLORS.MARK_BLUE, 
-                padding: [4, 8], 
-                borderRadius: 2, 
-                fontSize: 12, 
-                fontWeight: 'bold', 
-                offset: [0, -2] 
-              }, 
-              lineStyle: { color: COLORS.MARK_BLUE, type: 'solid', width: 2 }, 
-              data: [ { xAxis: this.currentTime } ] 
-            } 
-          } 
+        series: [
+          {
+            type: 'custom',
+            renderItem: this.renderCustomItem,
+            encode: { x: [1, 2], y: 0 },
+            data: this.phaseData,
+            markLine: {
+              symbol: ['none', 'none'],
+              silent: true,
+              label: {
+                show: true,
+                position: 'start',
+                formatter: `${this.currentTime}/${this.cycleLength}`,
+                color: '#fff',
+                backgroundColor: COLORS.MARK_BLUE,
+                padding: [Math.round(4 * s), Math.round(8 * s)],
+                borderRadius: 2,
+                fontSize: Math.round(10 * s),
+                fontWeight: 'bold',
+                offset: [0, -2]
+              },
+              lineStyle: { color: COLORS.MARK_BLUE, type: 'solid', width: Math.round(2 * s) },
+              data: [ { xAxis: this.currentTime } ]
+            }
+          }
         ]
       };
     },
 
     renderCustomItem(params, api) {
+      const s = this.scaleFactor;
       const trackIndex = api.value(0);
       const start = api.coord([api.value(1), trackIndex]);
       const end = api.coord([api.value(2), trackIndex]);
-      
-      const blockHeight = api.size([0, 1])[1]; 
+
+      const blockHeight = api.size([0, 1])[1];
       const yPos = start[1] - blockHeight / 2;
       const blockWidth = end[0] - start[0];
       const dividerY = (api.coord([0, 1])[1] + api.coord([0, 0])[1]) / 2;
@@ -207,26 +226,27 @@ export default {
       else if (type === 'red') fillStyle = COLORS.RED;
 
       const rectShape = echarts.graphic.clipRectByRect(
-        { x: start[0], y: yPos, width: blockWidth, height: blockHeight }, 
+        { x: start[0], y: yPos, width: blockWidth, height: blockHeight },
         { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }
       );
-      
+
       if (!rectShape) return;
       const children = [];
 
       // A. 绘制刻度
       if (params.dataIndex === 0) {
-        const axisBaseY = params.coordSys.y - 20; 
+        const axisBaseY = params.coordSys.y - Math.round(20 * s);
         [0, 35, 70, 105, 140].forEach(val => {
           const x = api.coord([val, 0])[0];
-          children.push({ type: 'line', shape: { x1: x, y1: axisBaseY - 5, x2: x, y2: axisBaseY + 5 }, style: { stroke: COLORS.AXIS_LINE, lineWidth: 1.5 } });
+          children.push({ type: 'line', shape: { x1: x, y1: axisBaseY - Math.round(5 * s), x2: x, y2: axisBaseY + Math.round(5 * s) }, style: { stroke: COLORS.AXIS_LINE, lineWidth: Math.round(1.5 * s) } });
         });
         const stages = [ {n:'S1', s:0, e:35}, {n:'S2', s:35, e:70}, {n:'S3', s:70, e:105}, {n:'S4', s:105, e:140} ];
         stages.forEach(st => {
           const x1 = api.coord([st.s, 0])[0], x2 = api.coord([st.e, 0])[0], midX = (x1 + x2) / 2;
-          children.push({ type: 'line', shape: { x1: x1, y1: axisBaseY, x2: midX - 14, y2: axisBaseY }, style: { stroke: COLORS.AXIS_LINE, lineWidth: 1.5 } });
-          children.push({ type: 'line', shape: { x1: midX + 14, y1: axisBaseY, x2: x2, y2: axisBaseY }, style: { stroke: COLORS.AXIS_LINE, lineWidth: 1.5 } });
-          children.push({ type: 'text', style: { text: st.n, x: midX, y: axisBaseY, fill: COLORS.TEXT_LIGHT, fontSize: 13, align: 'center', verticalAlign: 'middle', fontWeight: 'bold' } });
+          const textHalf = Math.round(14 * s);
+          children.push({ type: 'line', shape: { x1: x1, y1: axisBaseY, x2: midX - textHalf, y2: axisBaseY }, style: { stroke: COLORS.AXIS_LINE, lineWidth: Math.round(1.5 * s) } });
+          children.push({ type: 'line', shape: { x1: midX + textHalf, y1: axisBaseY, x2: x2, y2: axisBaseY }, style: { stroke: COLORS.AXIS_LINE, lineWidth: Math.round(1.5 * s) } });
+          children.push({ type: 'text', style: { text: st.n, x: midX, y: axisBaseY, fill: COLORS.TEXT_LIGHT, fontSize: Math.round(14 * s), align: 'center', verticalAlign: 'middle', fontWeight: 'bold' } });
         });
       }
 
@@ -234,18 +254,20 @@ export default {
       children.push({ type: 'rect', shape: rectShape, style: { fill: fillStyle, stroke: 'none' } });
 
       // C. 绘制内部元素
-      if (type === 'green' && blockWidth > 25) { 
-        const darkWidth = 32; 
-        const midY = yPos + blockHeight / 2; 
+      const fs = Math.max(0.8, s * 0.9); // 文字/图标用更小的缩放
+      if (type === 'green' && blockWidth > 20) {
+        const darkWidth = Math.round(25 * fs);
+        const midY = yPos + blockHeight / 2;
 
         children.push({ type: 'rect', shape: { x: start[0], y: yPos, width: darkWidth, height: blockHeight }, style: { fill: COLORS.GREEN_DARK } });
-        children.push({ type: 'polygon', shape: { points: [ [start[0] + darkWidth, midY - 5], [start[0] + darkWidth, midY + 5], [start[0] + darkWidth + 5, midY] ] }, style: { fill: COLORS.GREEN_DARK } });
+        const arrowH = Math.round(4 * fs);
+        children.push({ type: 'polygon', shape: { points: [ [start[0] + darkWidth, midY - arrowH], [start[0] + darkWidth, midY + arrowH], [start[0] + darkWidth + arrowH, midY] ] }, style: { fill: COLORS.GREEN_DARK } });
 
         if (iconKey && ICON_PATHS[iconKey]) {
-          const iconSize = 20; 
-          const iconX = start[0] + (darkWidth - iconSize) / 2; 
-          const iconY = midY - iconSize / 2; 
-          
+          const iconSize = Math.round(14 * fs);
+          const iconX = start[0] + (darkWidth - iconSize) / 2;
+          const iconY = midY - iconSize / 2;
+
           children.push({
             type: 'path',
             shape: { pathData: ICON_PATHS[iconKey], x: iconX, y: iconY, width: iconSize, height: iconSize, layout: 'center' },
@@ -253,12 +275,13 @@ export default {
           });
         }
 
-        children.push({ type: 'text', style: { text: `${phaseName}\n${duration}`, x: start[0] + darkWidth + 12, y: midY, fill: COLORS.TEXT_DARK, fontSize: 12, fontFamily: 'Arial', fontWeight: 'bold', align: 'left', verticalAlign: 'middle' } });
+        // 文字不受 clipRect 裁剪，独立绘制
+        children.push({ type: 'text', style: { text: `${phaseName}\n${duration}`, x: start[0] + darkWidth + Math.round(4 * fs), y: midY, fill: COLORS.TEXT_DARK, fontSize: Math.round(12 * fs), fontFamily: 'Arial', fontWeight: 'bold', align: 'left', verticalAlign: 'middle' } });
       }
 
       // D. 分割线
       if (trackIndex === 1) {
-        children.push({ type: 'line', shape: { x1: start[0], y1: dividerY, x2: end[0], y2: dividerY }, style: { stroke: COLORS.DIVIDER_LINE, lineWidth: 1.5 } });
+        children.push({ type: 'line', shape: { x1: start[0], y1: dividerY, x2: end[0], y2: dividerY }, style: { stroke: COLORS.DIVIDER_LINE, lineWidth: Math.round(1.5 * s) } });
       }
 
       return { type: 'group', children: children };
@@ -269,41 +292,44 @@ export default {
 
 <style scoped>
 .signal-timing-widget {
+  --s: 1;
   width: 100%;
   height: 100%;
+  min-width: 0;
   background-color: transparent;
   box-sizing: border-box;
   position: relative;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 25px;
+  margin-bottom: calc(var(--s) * 25px);
   color: #e0e6f1;
 }
 
-.title-area { font-size: 16px; }
-.main-title { font-size: 20px; font-weight: bold; margin-right: 10px; }
-.sub-info { font-size: 14px; opacity: 0.8; }
+.title-area { font-size: calc(var(--s) * 16px); }
+.main-title { font-size: calc(var(--s) * 20px); font-weight: bold; margin-right: calc(var(--s) * 10px); }
+.sub-info { font-size: calc(var(--s) * 14px); opacity: 0.8; }
 
 .checkbox-area {
-  font-size: 14px; display: flex; align-items: center;
+  font-size: calc(var(--s) * 14px); display: flex; align-items: center;
   cursor: pointer; opacity: 0.7; user-select: none;
 }
 .checkbox-area:hover { opacity: 1; }
 
 .checkbox-mock {
-  width: 14px; height: 14px; border: 1px solid rgba(255, 255, 255, 0.5);
-  margin-right: 6px; border-radius: 2px;
+  width: calc(var(--s) * 14px); height: calc(var(--s) * 14px); border: 1px solid rgba(255, 255, 255, 0.5);
+  margin-right: calc(var(--s) * 6px); border-radius: 2px;
   display: flex; align-items: center; justify-content: center;
 }
 .checkbox-mock.is-checked { background-color: #4da8ff; border-color: #4da8ff; }
 
-.chart-container { width: 100%; flex: 1; min-height: 120px; }
+.chart-container { width: 100%; min-width: 0; flex: 1; min-height: 120px; overflow: hidden; }
 
 .loading-overlay {
   flex: 1; min-height: 120px; display: flex; align-items: center; justify-content: center;

src/components/SmartDialog.vue

@@ -53,9 +53,9 @@ export default {
     resizable: { type: Boolean, default: true }, // 是否允许拉伸大小
     noPadding: { type: Boolean, default: false }, // 内容区无内边距
 
-    // 尺寸配置
-    defaultWidth: { type: Number, default: 350 },
-    defaultHeight: { type: Number, default: 250 },
+    // 尺寸配置（支持百分比字符串如 '78%' 或数字像素值如 350）
+    defaultWidth: { type: [Number, String], default: 350 },
+    defaultHeight: { type: [Number, String], default: 250 },
     minWidth: { type: Number, default: 200 },
     minHeight: { type: Number, default: 150 }
   },
@@ -63,8 +63,8 @@ export default {
     return {
       x: 0,
       y: 0,
-      w: this.defaultWidth,
-      h: this.defaultHeight,
+      w: this._parseSize(this.defaultWidth, window.innerWidth),
+      h: this._parseSize(this.defaultHeight, window.innerHeight),
       zIndex: globalZIndex,
       isDragging: false,
       isResizing: false,
@@ -84,6 +84,7 @@ export default {
     }
   },
   mounted() {
+    window.addEventListener('resize', this._onWindowResize);
     if (this.visible) {
       this.bringToFront();
       this.calculatePosition();
@@ -106,6 +107,22 @@ export default {
     }
   },
   methods: {
+    _parseSize(value, base) {
+      if (typeof value === 'string' && value.endsWith('%')) {
+        return Math.round((parseFloat(value) / 100) * base);
+      }
+      return Number(value);
+    },
+    _onWindowResize() {
+      // 只对百分比尺寸的弹窗重新计算
+      const isPercentW = typeof this.defaultWidth === 'string' && this.defaultWidth.endsWith('%');
+      const isPercentH = typeof this.defaultHeight === 'string' && this.defaultHeight.endsWith('%');
+      if (isPercentW) this.w = this._parseSize(this.defaultWidth, window.innerWidth);
+      if (isPercentH) this.h = this._parseSize(this.defaultHeight, window.innerHeight);
+      if ((isPercentW || isPercentH) && this.visible) {
+        this.calculatePosition();
+      }
+    },
     close() {
       this.$emit('update:visible', false);
       this.$emit('close');
@@ -237,7 +254,7 @@ export default {
     }
   },
   beforeDestroy() {
-    // 组件销毁前解绑所有 document 事件，防止内存泄漏
+    window.removeEventListener('resize', this._onWindowResize);
     document.removeEventListener('mousemove', this.onDrag);
     document.removeEventListener('mouseup', this.stopDrag);
     document.removeEventListener('mousemove', this.onResize);
@@ -317,12 +334,14 @@ export default {
 /* 4. 内容区与拉伸把手 */
 .dialog-body {
   flex: 1;
+  min-height: 0;
   padding: 20px;
+  overflow: hidden;
 }
 .dialog-body.no-padding {
   padding: 0;
   color: #e2e8f0;
-  overflow: auto;
+  overflow: hidden;
   cursor: default;
 }
 

src/views/MainWatch.vue

@@ -272,25 +272,23 @@ export default {
       }
 
       let currentComponentName = '';
-      let width = 1000;
-      let height = 600;
+      let width = '52%';
+      let height = '56%';
       let center = true;
       let position = {x: 100, y: 100};
       if (this.currentTab === 'arterial') {
         currentComponentName = 'TrafficTimeSpace';
       } else if (this.currentTab === 'crossing') {
         currentComponentName = 'BigIntersectionSignalMonitoring';
-        width = 1500;
-        height = 650;
+        width = '70%';
+        height = '60%';
         center = false;
-        // 弹窗位置：紧贴 MenuItem 右侧，间距 50px
         if (nodeData.rect) {
           position = {
             x: nodeData.rect.right + 50,
             y: nodeData.rect.y - 80
           };
         }
-
       } else {
         currentComponentName = 'TrafficTimeSpace'; // 默认组件
       }
@@ -1105,13 +1103,16 @@ export default {
   flex-direction: row;
   gap: 20px;
   padding: 20px;
+  height: 100%;
+  min-height: 0;
 }
 .big-mointoring-left {
-  flex: 1;
-  width: 70%;
+  width: 50%;
+  min-height: 0;
 }
 .big-mointoring-right {
   flex: 1;
-  
+  min-width: 0;
+  min-height: 0;
 }
 </style>