|
@@ -98,12 +98,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="bottom-controls">
|
|
<div class="bottom-controls">
|
|
|
- <div class="input-unit-wrapper">
|
|
|
|
|
- <input type="number" v-model.number="item.time" class="stage-input"
|
|
|
|
|
- :disabled="!canEditStage"
|
|
|
|
|
- :title="canEditStage ? '修改阶段时间' : '当前控制方式不可修改'" />
|
|
|
|
|
- <span class="unit">s</span>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <span class="time-text">{{ item.time }}s</span>
|
|
|
<span class="percent">{{ stagePercent(item.time) }}</span>
|
|
<span class="percent">{{ stagePercent(item.time) }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -260,10 +255,6 @@ export default {
|
|
|
isSchemeDisabled() {
|
|
isSchemeDisabled() {
|
|
|
return ['yellow_flash', 'lights_off', 'all_red'].includes(this.currentMethod);
|
|
return ['yellow_flash', 'lights_off', 'all_red'].includes(this.currentMethod);
|
|
|
},
|
|
},
|
|
|
- // 定周期、中心计划、感应控制、临时方案可编辑当前阶段
|
|
|
|
|
- canEditStage() {
|
|
|
|
|
- return ['fixed', 'system', 'sensor', 'temp'].includes(this.currentMethod);
|
|
|
|
|
- },
|
|
|
|
|
// 时长选项:30, 60, 90 ... 300
|
|
// 时长选项:30, 60, 90 ... 300
|
|
|
durationOptions() {
|
|
durationOptions() {
|
|
|
const list = [];
|
|
const list = [];
|
|
@@ -803,7 +794,7 @@ export default {
|
|
|
.signal-timing-wrap {
|
|
.signal-timing-wrap {
|
|
|
flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
|
min-height: 0;
|
|
min-height: 0;
|
|
|
- height: clamp(95px, calc(var(--s) * 166px), 166px);
|
|
|
|
|
|
|
+ height: clamp(71px, calc(var(--s) * 125px), 125px);
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
min-width: 0;
|
|
min-width: 0;
|
|
|
background-color: transparent;
|
|
background-color: transparent;
|
|
@@ -817,7 +808,7 @@ export default {
|
|
|
|
|
|
|
|
/* 双相位图模式: 留在左栏内, 与十字路图等宽; 高度约 2× 单图以容下两行 chart + 行标签 */
|
|
/* 双相位图模式: 留在左栏内, 与十字路图等宽; 高度约 2× 单图以容下两行 chart + 行标签 */
|
|
|
.signal-timing-wrap.is-dual {
|
|
.signal-timing-wrap.is-dual {
|
|
|
- height: clamp(180px, calc(var(--s) * 300px), 300px);
|
|
|
|
|
|
|
+ height: clamp(135px, calc(var(--s) * 225px), 225px);
|
|
|
}
|
|
}
|
|
|
/* 双图模式下 header 紧贴下方相位图,避免无意义空白 */
|
|
/* 双图模式下 header 紧贴下方相位图,避免无意义空白 */
|
|
|
.signal-timing-wrap.is-dual .header {
|
|
.signal-timing-wrap.is-dual .header {
|
|
@@ -1192,16 +1183,6 @@ export default {
|
|
|
background: rgba(161, 190, 255, 0.75);
|
|
background: rgba(161, 190, 255, 0.75);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.stage-input {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- min-width: 0;
|
|
|
|
|
- border: 1px solid rgba(161, 190, 255, 0.7);
|
|
|
|
|
- background-color: transparent;
|
|
|
|
|
- padding: clamp(2px, calc(var(--s) * 5px), 5px);
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
.phase-box {
|
|
.phase-box {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -1357,69 +1338,20 @@ export default {
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/* 新增包裹层的相对定位 */
|
|
|
|
|
-.input-unit-wrapper {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.stage-input {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- min-width: 0;
|
|
|
|
|
- border: 1px solid rgba(161, 190, 255, 0.7);
|
|
|
|
|
- background-color: transparent;
|
|
|
|
|
- padding: clamp(2px, calc(var(--s) * 5px), 5px);
|
|
|
|
|
- /* 给右侧留出空间,防止数字过长被 s 挡住 */
|
|
|
|
|
- padding-right: clamp(10px, calc(var(--s) * 16px), 16px);
|
|
|
|
|
|
|
+/* 阶段时长纯文本: 替代原 input, 颜色/字号沿用 percent 但白色更亮以突出时长 */
|
|
|
|
|
+.stage-item-wrapper .time-text {
|
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
|
- text-align: center;
|
|
|
|
|
- border-radius: 4px;
|
|
|
|
|
- font-size: clamp(9px, calc(var(--s) * 13px), 13px);
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* 修改 s 单位的定位方式为垂直居中 */
|
|
|
|
|
-.input-unit-wrapper .unit {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 50%;
|
|
|
|
|
- transform: translateY(-50%);
|
|
|
|
|
- right: clamp(3px, calc(var(--s) * 6px), 8px);
|
|
|
|
|
- color: #77A1FF;
|
|
|
|
|
- font-size: clamp(9px, calc(var(--s) * 14px), 14px);
|
|
|
|
|
- pointer-events: none;
|
|
|
|
|
|
|
+ font-size: clamp(9px, calc(var(--s) * 13px), 13px);
|
|
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/* 微调百分比的间距,让排版更紧凑 */
|
|
|
|
|
|
|
+/* 百分比 */
|
|
|
.stage-item-wrapper .percent {
|
|
.stage-item-wrapper .percent {
|
|
|
color: rgba(255, 255, 255, 0.5);
|
|
color: rgba(255, 255, 255, 0.5);
|
|
|
font-size: clamp(9px, calc(var(--s) * 13px), 13px);
|
|
font-size: clamp(9px, calc(var(--s) * 13px), 13px);
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.stage-input {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- min-width: 0;
|
|
|
|
|
- border: 1px solid rgba(161, 190, 255, 0.7);
|
|
|
|
|
- background-color: transparent;
|
|
|
|
|
- padding: clamp(2px, calc(var(--s) * 5px), 5px);
|
|
|
|
|
- font-size: clamp(9px, calc(var(--s) * 14px), 14px);
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- border-radius: 4px;
|
|
|
|
|
- -moz-appearance: textfield;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.stage-input::-webkit-outer-spin-button,
|
|
|
|
|
-.stage-input::-webkit-inner-spin-button {
|
|
|
|
|
- -webkit-appearance: none;
|
|
|
|
|
- margin: 0;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.stage-input:disabled {
|
|
|
|
|
- border-color: rgba(255, 255, 255, 0.2);
|
|
|
|
|
- color: rgba(255, 255, 255, 0.5);
|
|
|
|
|
- background-color: rgba(0, 0, 0, 0.2);
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
/* 弹窗过渡动画 */
|
|
/* 弹窗过渡动画 */
|
|
|
|
|
|
|
|
/* lock-time 弹窗补充样式 */
|
|
/* lock-time 弹窗补充样式 */
|