|
|
@@ -32,97 +32,98 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="form-interactive-area" :class="{ 'is-disabled': !isManualMode }">
|
|
|
- <div class="control-method-content">
|
|
|
- <SegmentedRadio v-model="currentMethod" :options="controlMethodOptions" size="auto" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="control-scheme" :class="{ 'is-disabled': isSchemeDisabled }">
|
|
|
- <div class="control-label-wrap">
|
|
|
- <span class="control-label">控制方案</span>
|
|
|
- <DropdownSelect v-model="currentScheme" :options="schemeOptions" size="auto" />
|
|
|
+ <div class="form-interactive-area">
|
|
|
+ <div class="form-editable-area" :class="{ 'is-disabled': !isManualMode }">
|
|
|
+ <div class="control-method-content">
|
|
|
+ <SegmentedRadio v-model="currentMethod" :options="controlMethodOptions" 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 }">
|
|
|
- </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 }">
|
|
|
- </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 }">
|
|
|
- </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 }">
|
|
|
- </el-time-picker>
|
|
|
-
|
|
|
- <div class="form-item-labeled">
|
|
|
- <span class="form-label">时长</span>
|
|
|
- <el-select v-model="duration" placeholder="请选择时长" size="small"
|
|
|
- :popper-append-to-body="true">
|
|
|
- <el-option v-for="d in durationOptions" :key="d" :label="d"
|
|
|
- :value="d"></el-option>
|
|
|
- </el-select>
|
|
|
+ <div class="control-scheme" :class="{ 'is-disabled': isSchemeDisabled }">
|
|
|
+ <div class="control-label-wrap">
|
|
|
+ <span class="control-label">控制方案</span>
|
|
|
+ <DropdownSelect v-model="currentScheme" :options="schemeOptions" size="auto" />
|
|
|
</div>
|
|
|
|
|
|
- <div class="form-item-labeled">
|
|
|
- <span class="form-label">周期</span>
|
|
|
- <el-select v-model="period" placeholder="请选择周期" size="small"
|
|
|
- :popper-append-to-body="true">
|
|
|
- <el-option v-for="p in 8" :key="p" :label="'周期' + p"
|
|
|
- :value="p"></el-option>
|
|
|
- </el-select>
|
|
|
- </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 }">
|
|
|
+ </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 }">
|
|
|
+ </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 }">
|
|
|
+ </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 }">
|
|
|
+ </el-time-picker>
|
|
|
+
|
|
|
+ <div class="form-item-labeled">
|
|
|
+ <span class="form-label">时长</span>
|
|
|
+ <el-select v-model="duration" placeholder="请选择时长" size="small"
|
|
|
+ :popper-append-to-body="true">
|
|
|
+ <el-option v-for="d in durationOptions" :key="d" :label="d"
|
|
|
+ :value="d"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
|
|
|
- </div>
|
|
|
+ <div class="form-item-labeled">
|
|
|
+ <span class="form-label">周期</span>
|
|
|
+ <el-select v-model="period" placeholder="请选择周期" size="small"
|
|
|
+ :popper-append-to-body="true">
|
|
|
+ <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 class="phase-box" :class="{ 'is-active': item.value === currentStage }"
|
|
|
- @click="onStageClick(item.value)">
|
|
|
- <img :src="item.img" alt="stage" class="phase-image" />
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <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 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 class="phase-box" :class="{ 'is-active': item.value === currentStage }"
|
|
|
+ @click="onStageClick(item.value)">
|
|
|
+ <img :src="item.img" alt="stage" class="phase-image" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <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="percent">{{ stagePercent(item.time) }}</span>
|
|
|
</div>
|
|
|
- <span class="percent">{{ stagePercent(item.time) }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 方案圆饼图 -->
|
|
|
- <div class="donut-row">
|
|
|
- <div class="donut-item">
|
|
|
- <div class="donut-title">实时方案（执行方案3）</div>
|
|
|
- <PlanDonutChart :chartData="realtimeDonutData"
|
|
|
- :centerValue="String(realtimeRemaining)" centerLabel="剩余时长" :showTotal="true"
|
|
|
- :totalValue="cycleLength" :scale="panelScale" />
|
|
|
- </div>
|
|
|
- <div class="donut-item">
|
|
|
- <div class="donut-title">下周期方案</div>
|
|
|
- <PlanDonutChart :chartData="nextCycleDonutData" :centerValue="String(cycleLength)"
|
|
|
- centerLabel="总时长" :showTotal="false" :scale="panelScale" />
|
|
|
- </div>
|
|
|
+ <!-- 方案圆饼图 -->
|
|
|
+ <div class="donut-row">
|
|
|
+ <div class="donut-item">
|
|
|
+ <div class="donut-title">实时方案（执行方案3）</div>
|
|
|
+ <PlanDonutChart :chartData="realtimeDonutData"
|
|
|
+ :centerValue="String(realtimeRemaining)" centerLabel="剩余时长" :showTotal="true"
|
|
|
+ :totalValue="cycleLength" :scale="panelScale" />
|
|
|
+ </div>
|
|
|
+ <div class="donut-item">
|
|
|
+ <div class="donut-title">下周期方案</div>
|
|
|
+ <PlanDonutChart :chartData="nextCycleDonutData" :centerValue="String(cycleLength)"
|
|
|
+ centerLabel="总时长" :showTotal="false" :scale="panelScale" />
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -975,7 +976,7 @@ export default {
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
|
|
|
-.form-interactive-area.is-disabled {
|
|
|
+.form-editable-area.is-disabled {
|
|
|
opacity: 0.6;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
@@ -1090,8 +1091,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
.donut-title {
|
|
|
- font-size: clamp(11px, calc(var(--s) * 13px), 14px);
|
|
|
- color: #a0aec0;
|
|
|
+ font-size: clamp(12px, calc(var(--s) * 22px), 28px);
|
|
|
+ color: #ffffff;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
|
