|
|
@@ -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;
|
|
|
}
|
|
|
|
|
|
/* 操作列按钮布局 */
|