Quellcode durchsuchen

开启SmartDialog默认可以缩放,修改CrosssingListPanel、SignalTimingChart、SmartDialog、TechTable组件的缩放的自适应;

画安 vor 1 Monat
Ursprung
Commit
507d3de791

+ 20 - 13
src/components/ui/CrossingListPanel.vue

@@ -110,16 +110,16 @@ export default {
 
             // === 表格与分页相关 ===
             tableColumns: [
-                { label: '序号', key: 'index', width: '60px' },
-                { label: '路口名', key: 'name', width: '150px' },
-                { label: '子区', key: 'subArea', width: '100px' },
-                { label: 'IP地址', key: 'ip', width: '130px' },
-                { label: '状态', key: 'status', width: '80px' },
-                { label: '时间偏差', key: 'timeOffset', width: '100px' },
-                { label: '周期', key: 'cycle', width: '80px' },
-                { label: '相位状态', key: 'phaseStatus', width: '280px' },
-                { label: '版本信息', key: 'version', width: '180px' },
-                { label: '操作', key: 'actions', width: '150px' }
+               { label: '序号', key: 'index', width: '5%' },
+                { label: '路口名', key: 'name', width: '13%' },
+                { label: '子区', key: 'subArea', width: '8%' },
+                { label: 'IP地址', key: 'ip', width: '11%' },
+                { label: '状态', key: 'status', width: '6%' },
+                { label: '时间偏差', key: 'timeOffset', width: '8%' },
+                { label: '周期', key: 'cycle', width: '6%' },
+                { label: '相位状态', key: 'phaseStatus', width: '21%' }, // 图表留宽一点
+                { label: '版本信息', key: 'version', width: '12%' },
+                { label: '操作', key: 'actions', width: '10%' }
             ],
             tableList: [],
             pagination: {
@@ -164,7 +164,9 @@ export default {
                         phaseData: [
                             [0, 0, 30, '阶段1', 30, 'green', 'UP'],
                             [0, 30, 35, '阶段2', 5, 'yellow', ''],
-                            [0, 35, 60, '阶段3', 25, 'green', 'TURN_LEFT']
+                            [0, 35, 60, '阶段3', 25, 'green', 'TURN_LEFT'],
+                            // 👇 加一段红灯或者绿灯,把 60 秒到 120 秒补齐
+                            [0, 60, 120, '阶段4', 60, 'red', '']
                         ]
                     };
                 });
@@ -270,6 +272,7 @@ export default {
 .table-section {
     flex: 1;
     min-height: 0;
+    min-width: 0;
     position: relative;
     overflow: hidden;
     padding: 10px 0;
@@ -349,8 +352,12 @@ export default {
     width: 100%;
     border-radius: 2px;
     overflow: hidden;
-    display: flex;
-    align-items: center;
+    display: block;
+}
+
+.mini-chart-wrapper ::v-deep .chart-container {
+    width: 100% !important;
+    height: 100% !important;
 }
 
 /* 操作列按钮布局 */

+ 20 - 20
src/components/ui/SignalTimingChart.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="signal-timing-chart">
     <div ref="chartRef" class="chart-container"></div>
-  </div>
 </template>
 
 <script>
@@ -97,17 +95,18 @@ export default {
     
     getChartOption() {
       const s = this.scaleFactor;
+
       return {
         backgroundColor: 'transparent',
         // 因为去掉了头部,稍微减小了 top 的留白,让图表更紧凑
         grid: { 
-          left: Math.round(10 * s), 
-          right: Math.round(10 * s), 
-          top: Math.round(30 * s), 
-          bottom: Math.round(10 * s), 
+          left: this.isMiniMode ? 0 : Math.round(10 * s), 
+          right: this.isMiniMode ? 0 : Math.round(10 * s), 
+          top: this.isMiniMode ? 0 : Math.round(30 * s), 
+          bottom: this.isMiniMode ? 0 : Math.round(10 * s),
           containLabel: false 
         },
-        xAxis: { type: 'value', min: 0, max: this.cycleLength, show: false },
+        xAxis: { type: 'value', min: 0, max: this.cycleLength, show: false, boundaryGap: false },
         yAxis: { type: 'category', data: ['Track 0', 'Track 1'], inverse: true, show: false },
         series: [
           {
@@ -146,8 +145,16 @@ export default {
       const start = api.coord([api.value(1), trackIndex]);
       const end = api.coord([api.value(2), trackIndex]);
 
-      const blockHeight = api.size([0, 1])[1];
-      const yPos = start[1] - blockHeight / 2;
+      // 默认的色块高度和 Y 轴起始位置
+      let blockHeight = api.size([0, 1])[1];
+      let yPos = start[1] - blockHeight / 2;
+
+      // 如果是表格里的极简模式,无视轨道高度,强行占满整个可用区域!
+      if (this.isMiniMode) {
+          blockHeight = params.coordSys.height; // 色块高度 = 网格总高度
+          yPos = params.coordSys.y;             // 起始Y点 = 网格最顶部
+      }
+
       const blockWidth = end[0] - start[0];
       const dividerY = (api.coord([0, 1])[1] + api.coord([0, 0])[1]) / 2;
 
@@ -216,7 +223,7 @@ export default {
       }
         
         // D. 分割线
-        if (trackIndex === 1) {
+        if (trackIndex === 1 && !this.isMiniMode) {
           children.push({ type: 'line', shape: { x1: start[0], y1: dividerY, x2: end[0], y2: dividerY }, style: { stroke: COLORS.DIVIDER_LINE, lineWidth: Math.max(1, Math.round(1.5 * s)) } });
         }
 
@@ -227,19 +234,12 @@ export default {
 </script>
 
 <style scoped>
-.signal-timing-chart {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
 
 .chart-container { 
   width: 100%; 
+  height: 100%;
   flex: 1; 
-  min-height: 80px; 
-  overflow: hidden; 
+  min-height: 0; 
+  overflow: hidden;
 }
 </style>

+ 3 - 1
src/components/ui/SmartDialog.vue

@@ -39,7 +39,7 @@ export default {
     
     showClose: { type: Boolean, default: true },
     draggable: { type: Boolean, default: true }, 
-    resizable: { type: Boolean, default: false }, 
+    resizable: { type: Boolean, default: true }, 
     noPadding: { type: Boolean, default: false }, 
 
     defaultWidth: { type: [Number, String], default: 350 },
@@ -348,6 +348,8 @@ export default {
   min-height: 0;
   padding: 20px;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .dialog-body.no-padding {

+ 3 - 2
src/components/ui/TechTable.vue

@@ -67,9 +67,10 @@ export default {
 
 <style scoped>
 .tech-table-wrapper {
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
     width: 100%;
-    height: 100%;
-    overflow-x: auto;
     overflow-y: auto;
 }
 

+ 2 - 1
src/components/ui/TrafficTimeSpace.vue

@@ -237,7 +237,8 @@ export default {
 
 <style scoped>
 .traffic-timespace-chart {
+  flex: 1;
   width: 100%;
-  height: 100%;
+  min-height: 0;
 }
 </style>