|
|
@@ -43,10 +43,50 @@
|
|
|
<DropdownSelect v-model="currentScheme" :options="schemeOptions" size="auto" />
|
|
|
</div>
|
|
|
|
|
|
+ <div class="time-form-bar" v-if="currentMethod === 'temp'">
|
|
|
+
|
|
|
+ <el-date-picker v-model="startDate" type="date" placeholder="选择日期"
|
|
|
+ value-format="yyyy-MM-dd" size="small" :append-to-body="true"
|
|
|
+ :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }"
|
|
|
+ class="form-item">
|
|
|
+ </el-date-picker>
|
|
|
+
|
|
|
+ <el-time-picker v-model="startTime" placeholder="选择时间" value-format="HH:mm:ss"
|
|
|
+ size="small" :append-to-body="true"
|
|
|
+ :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }"
|
|
|
+ class="form-item">
|
|
|
+ </el-time-picker>
|
|
|
+
|
|
|
+ <el-date-picker v-model="endDate" type="date" placeholder="选择日期"
|
|
|
+ value-format="yyyy-MM-dd" size="small" :append-to-body="true"
|
|
|
+ :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }"
|
|
|
+ class="form-item">
|
|
|
+ </el-date-picker>
|
|
|
+
|
|
|
+ <el-time-picker v-model="endTime" placeholder="选择时间" value-format="HH:mm:ss"
|
|
|
+ size="small" :append-to-body="true"
|
|
|
+ :popper-options="{ boundariesPadding: 0, gpuAcceleration: false }"
|
|
|
+ class="form-item">
|
|
|
+ </el-time-picker>
|
|
|
+
|
|
|
+ <el-select v-model="duration" placeholder="请选择时长" size="small"
|
|
|
+ :popper-append-to-body="true" class="form-item">
|
|
|
+ <el-option v-for="d in durationOptions" :key="d" :label="d"
|
|
|
+ :value="d"></el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-select v-model="period" placeholder="请选择周期" size="small"
|
|
|
+ :popper-append-to-body="true" class="form-item">
|
|
|
+ <el-option v-for="p in 8" :key="p" :label="'周期' + p" :value="p"></el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="current-stage">
|
|
|
<div class="current-stage-warp">
|
|
|
<div class="current-stage-label">当前阶段：</div>
|
|
|
- <div v-for="(item, index) in currentStageList" :key="index" class="stage-item-wrapper">
|
|
|
+ <div v-for="(item, index) in currentStageList" :key="index"
|
|
|
+ class="stage-item-wrapper">
|
|
|
<div class="phase-box" :class="{ 'is-active': item.value === currentStage }"
|
|
|
@click="currentStage = item.value">
|
|
|
<img :src="item.img" alt="stage" class="phase-image" />
|
|
|
@@ -143,6 +183,12 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ startDate: '2026-04-13',
|
|
|
+ startTime: '14:03:06',
|
|
|
+ endDate: '2026-04-13',
|
|
|
+ endTime: '15:03:06',
|
|
|
+ duration: null,
|
|
|
+ period: null,
|
|
|
// 核心状态控制
|
|
|
isManualMode: false, // 是否处于手动控制模式
|
|
|
showLockTime: false, // 是否显示锁定时间弹窗
|
|
|
@@ -184,9 +230,15 @@ export default {
|
|
|
isSchemeDisabled() {
|
|
|
return ['yellow_flash', 'lights_off', 'all_red'].includes(this.currentMethod);
|
|
|
},
|
|
|
- // 定周期、中心控制、感应控制、临时方案可编辑当前阶段
|
|
|
+ // 定周期、中心计划、感应控制、临时方案可编辑当前阶段
|
|
|
canEditStage() {
|
|
|
return ['fixed', 'system', 'sensor', 'temp'].includes(this.currentMethod);
|
|
|
+ },
|
|
|
+ // 时长选项：30, 60, 90 ... 300
|
|
|
+ durationOptions() {
|
|
|
+ const list = [];
|
|
|
+ for (let i = 30; i <= 300; i += 30) list.push(i);
|
|
|
+ return list;
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -364,6 +416,12 @@ export default {
|
|
|
if (data.controlMethodOptions) this.controlMethodOptions = data.controlMethodOptions;
|
|
|
if (data.currentMethod) this.currentMethod = data.currentMethod;
|
|
|
if (data.locktimeOptions) this.locktimeOptions = data.locktimeOptions;
|
|
|
+ if (data.startDate) this.startDate = data.startDate;
|
|
|
+ if (data.startTime) this.startTime = data.startTime;
|
|
|
+ if (data.endDate) this.endDate = data.endDate;
|
|
|
+ if (data.endTime) this.endTime = data.endTime;
|
|
|
+ if (data.duration) this.duration = data.duration;
|
|
|
+ if (data.period) this.period = data.period;
|
|
|
},
|
|
|
// 切换手动控制模式
|
|
|
toggleManualMode() {
|
|
|
@@ -839,7 +897,8 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- gap: clamp(4px, calc(var(--s) * 6px), 8px); /* 输入框和百分比的间距 */
|
|
|
+ gap: clamp(4px, calc(var(--s) * 6px), 8px);
|
|
|
+ /* 输入框和百分比的间距 */
|
|
|
}
|
|
|
|
|
|
/* 新增包裹层的相对定位 */
|
|
|
@@ -937,4 +996,60 @@ export default {
|
|
|
color: #a0aec0;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
+
|
|
|
+/* ===== 时间表单栏布局 ===== */
|
|
|
+.time-form-bar {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: clamp(4px, calc(var(--s) * 8px), 10px);
|
|
|
+ margin-bottom: clamp(4px, calc(var(--s) * 10px), 20px);
|
|
|
+}
|
|
|
+
|
|
|
+.time-form-bar .form-item {
|
|
|
+ flex: 1 1 calc(30% - 8px);
|
|
|
+ min-width: clamp(80px, calc(var(--s) * 140px), 140px);
|
|
|
+}
|
|
|
+
|
|
|
+/* ===== ElementUI 深色主题适配 ===== */
|
|
|
+
|
|
|
+/* 覆盖 el-date-editor 固定宽度，让其跟随 flex 布局 */
|
|
|
+.time-form-bar>>>.el-date-editor.el-input,
|
|
|
+.time-form-bar>>>.el-date-editor.el-input__inner,
|
|
|
+.time-form-bar>>>.el-select {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 输入框样式 */
|
|
|
+.time-form-bar>>>.el-input__inner {
|
|
|
+ background-color: rgba(255, 255, 255, 0.06);
|
|
|
+ border: 1px solid rgba(161, 190, 255, 0.35);
|
|
|
+ color: #e0e6f1;
|
|
|
+ font-size: clamp(9px, calc(var(--s) * 13px), 13px);
|
|
|
+ height: clamp(22px, calc(var(--s) * 32px), 32px);
|
|
|
+ line-height: clamp(22px, calc(var(--s) * 32px), 32px);
|
|
|
+}
|
|
|
+
|
|
|
+.time-form-bar>>>.el-input__inner::placeholder {
|
|
|
+ color: rgba(255, 255, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.time-form-bar>>>.el-input__inner:hover {
|
|
|
+ border-color: rgba(161, 190, 255, 0.6);
|
|
|
+}
|
|
|
+
|
|
|
+.time-form-bar>>>.el-input__inner:focus {
|
|
|
+ border-color: #3b74ff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 图标颜色与大小 */
|
|
|
+.time-form-bar>>>.el-input__prefix,
|
|
|
+.time-form-bar>>>.el-input__suffix {
|
|
|
+ color: rgba(255, 255, 255, 0.4);
|
|
|
+ font-size: clamp(9px, calc(var(--s) * 14px), 14px);
|
|
|
+}
|
|
|
+
|
|
|
+.time-form-bar>>>.el-input__icon {
|
|
|
+ line-height: clamp(22px, calc(var(--s) * 32px), 32px);
|
|
|
+ width: clamp(16px, calc(var(--s) * 25px), 25px);
|
|
|
+}
|
|
|
</style>
|
