<script setup>
|
import {ref, computed} from "vue";
|
import {Connection} from "@element-plus/icons-vue";
|
|
//计时器
|
let seconds = ref(0);
|
let isRunning = ref(false);
|
let intervalId;
|
|
//优化进度条
|
let progress = ref(0);
|
|
//优化次数；时长；效率
|
let progressValue1 = ref(10);
|
let progressValue2 = ref(1000);
|
let progressValue3 = ref(50);
|
|
const formattedTime = computed(() => {
|
const minutes = Math.floor(seconds.value / 60);
|
const remainingSeconds = seconds.value % 60;
|
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
});
|
const startTimer = () => {
|
if (!isRunning.value) {
|
intervalId = setInterval(() => {
|
seconds.value++;
|
progress.value += 10;
|
if (progress.value >= 100) {
|
progress.value = 100;
|
clearInterval(intervalId);
|
}
|
}, 1000);
|
isRunning.value = true;
|
}
|
};
|
const pauseTimer = () => {
|
if (isRunning.value) {
|
clearInterval(intervalId);
|
isRunning.value = false;
|
}
|
};
|
const resetTimer = () => {
|
clearInterval(intervalId);
|
isRunning.value = false;
|
seconds.value = 0;
|
progress.value = 0;
|
};
|
|
</script>
|
|
<template>
|
<div class="header">
|
<el-header>
|
<div class="header-content">
|
<span style="margin-left: -20px;">需切成品</span><br>
|
<div>
|
<span>总面积(m2)：</span>
|
<vxe-input class="input" disabled placeholder=""></vxe-input>
|
<span>总数量(片)：</span>
|
<vxe-input class="input" disabled placeholder=""></vxe-input>
|
<span>优化时长(秒)：</span>
|
<span class="time-display">{{ formattedTime }}</span>
|
<el-button type="primary" style="margin-left: 20px" @click="startTimer">开始优化</el-button>
|
<el-button class="buttons" type="primary" @click="pauseTimer">暂停</el-button>
|
<el-button class="buttons" type="primary" @click="resetTimer">完成</el-button>
|
</div>
|
<br>
|
<div style="display: flex;margin-top: -10px">
|
<span>方案池 优化次数：</span>
|
<el-slider v-model="progressValue1" :min="2" :max="20" size="small" style="max-width: 200px;"></el-slider>
|
<span>单次优化时长：</span>
|
<el-slider v-model="progressValue2" :min="50" :max="2000" size="small" style="max-width: 200px;"></el-slider>
|
<span>钢化效率优先：</span>
|
<el-slider v-model="progressValue3" :show-tooltip="false" size="small" style="max-width: 200px;"></el-slider>
|
<span>切裁率优先</span>
|
</div>
|
</div>
|
</el-header>
|
</div>
|
|
<div id="box">
|
<span style="font-size: 20px">优化进度</span>
|
<div class="progress-bar">
|
<el-progress :percentage="progress"
|
:text-inside="true"
|
:stroke-width="20"
|
status="success"
|
striped
|
striped-flow
|
duration="45"/>
|
</div>
|
<div style="height: 100px; margin-top: 20px; border: 2px solid #e6e6e6; padding: 10px; border-radius: 5px;">
|
<span style="font-weight: bold">耗用原片</span>
|
</div>
|
<div style="height: 130px; margin-top: 20px; display: flex; border: 2px solid #e6e6e6; padding: 10px; border-radius: 5px;">
|
<span style="font-weight: bold">当前结果</span>
|
<div style="margin-top: 5%">
|
<span>产生时间：{{ formattedTime }}</span>
|
<span style="margin-left: 20px">总利用率：0.0%</span>
|
<span style="margin-left: 20px">尾片：</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
|
.header {
|
height: 120px;
|
background-color: #d5eaff;
|
margin-top: -30px;
|
padding: 10px;
|
border-radius: 5px;
|
}
|
|
div header span {
|
margin-left: 10px;
|
font-weight: bold;
|
}
|
|
.input {
|
border: none !important;
|
height: 25px;
|
width: 80px;
|
}
|
|
.time-display {
|
font-size: 18px;
|
color: #409eff;
|
}
|
|
.buttons {
|
float: right;
|
}
|
|
#box {
|
padding: 10px;
|
margin-top: 10px;
|
width: 100%;
|
height: 80%;
|
}
|
|
|
</style>
|
