소스 검색

修改路口列表表格的相位图显示大小;修改表格可以溢出自动滚动;

画安 4 주 전
부모
커밋
6bd1a10191
4개의 변경된 파일14개의 추가작업 그리고 9개의 파일을 삭제
  1. 1 2
      src/components/ui/CrossingListPanel.vue
  2. 3 2
      src/components/ui/SignalTimingChart.vue
  3. 3 4
      src/components/ui/TechTable.vue
  4. 7 1
      src/views/StatusMonitoring.vue

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

@@ -332,9 +332,8 @@ export default {
 
 /* 控制相位图表在表格内的高度 */
 .mini-chart-wrapper {
-    height: 28px;
+    height: 30px;
     width: 100%;
-    border-radius: 2px;
     overflow: hidden;
     display: block;
 }

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

@@ -118,8 +118,9 @@ export default {
         backgroundColor: 'transparent',
         grid: { 
           left: 0, right: 0, 
-          top: (this.showAxis || this.showScanLine) ? Math.round(35 * s) : Math.round(10 * s), 
-          bottom: Math.round(10 * s),
+          // 当隐藏坐标轴/扫描线时(即在表格中显示时),将上下边距设为 0,让色块铺满高度
+          top: (this.showAxis || this.showScanLine) ? Math.round(35 * s) : 0, 
+          bottom: (this.showAxis || this.showScanLine) ? Math.round(10 * s) : 0,
           containLabel: false 
         },
         xAxis: { type: 'value', min: 0, max: realMaxTime, show: false },

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="tech-table-wrapper" :style="{ maxHeight: height }">
+    <div class="tech-table-wrapper" :style="height && height !== 'auto' ? { maxHeight: height } : {}">
         <table class="tech-table" cellspacing="0" cellpadding="0">
 
             <thead>
@@ -68,11 +68,10 @@ export default {
 <style scoped>
 .tech-table-wrapper {
     flex: 1;
-    min-height: 0;
+    height: 0;
     min-width: 0;
     width: 100%;
-    overflow: hidden;
-    /* overflow-y: auto; */
+    overflow-y: auto;
     scrollbar-width: none; /* 兼容 Firefox 隐藏滚动条 */
     -ms-overflow-style: none; /* 兼容 IE/Edge 隐藏滚动条 */
 }

+ 7 - 1
src/views/StatusMonitoring.vue

@@ -531,6 +531,12 @@ export default {
     margin-top: 10px;
 }
 ::v-deep .list-mode-panel {
-    padding: 150px 30px 0 30px;
+    position: absolute;
+    inset: 0;
+    padding: 150px 30px 30px 30px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 </style>