<template>
|
<div class="listCard">
|
<div class="left-top">
|
<span>方案详情</span>
|
<!-- <el-button class="clickable-text" @click="handleBack">结束模拟</el-button> -->
|
</div>
|
<div class="details">
|
<div v-if="selectedScheme">
|
<div class="input-group">
|
<div class="input-item">
|
<label>方案名称:</label>
|
<span>{{ selectedScheme.name }}</span>
|
</div>
|
<div class="input-item">
|
<label>创建时间:</label>
|
<span>{{ formatTime(selectedScheme.createTime) }}</span>
|
</div>
|
<div class="input-item">
|
<label>方案状态:</label>
|
<span>{{ statusText[selectedScheme.taskStatus] || "未知" }}</span>
|
</div>
|
<div class="input-item">
|
<label>开始时间:</label>
|
<span>{{ selectedScheme.startTime }}</span>
|
</div>
|
<div class="input-item">
|
<label>结束时间:</label>
|
<span>{{ selectedScheme.endTime }}</span>
|
</div>
|
<div class="input-item">
|
<label>文件数量:</label>
|
<span>{{ selectedScheme.fileCount }}</span>
|
</div>
|
<div class="input-item">
|
<label>输出周期:</label>
|
<span>{{ selectedScheme.outputPeriod }} 秒</span>
|
</div>
|
</div>
|
</div>
|
<div v-else>
|
<p style="text-align: center;">暂无方案信息</p>
|
</div>
|
</div>
|
</div>
|
<Message
|
@close="close"
|
class="mess"
|
v-show="messageShow"
|
:mesData="mesData"
|
/>
|
</template>
|
|
<script setup>
|
import { defineProps, defineEmits, inject } from "vue";
|
import dayjs from "dayjs";
|
import { ElMessage } from 'element-plus'
|
|
// 定义 emit 方法
|
const emit = defineEmits(["back"]);
|
const { startSimulate, endSimulate } = inject("simulateActions");
|
|
// 返回按钮点击事件
|
function handleBack() {
|
ElMessage({
|
message: '模拟进程正在关闭中...',
|
type: 'success',
|
})
|
emit("back", false); // 向父组件传递 false 值
|
endSimulate();
|
}
|
|
// 接收父组件传递的 props
|
const props = defineProps({
|
selectedScheme: {
|
type: Object,
|
default: null,
|
},
|
});
|
|
// 格式化时间
|
function formatTime(time) {
|
return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
|
}
|
|
// 定义任务状态的文本映射
|
const statusText = {
|
0: "未开始",
|
1: "进行中",
|
2: "已完成",
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.listCard {
|
margin-bottom: 20px;
|
border-radius: 8px;
|
color: white;
|
|
.left-top {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
|
span {
|
font-weight: bold;
|
}
|
|
.clickable-text {
|
margin-right: 5px;
|
background-color: #61f7d4;
|
color: black;
|
border: none;
|
cursor: pointer;
|
padding: 5px 10px;
|
border-radius: 4px;
|
font-size: 14px;
|
|
&:hover {
|
background-color: #43c6b9;
|
}
|
}
|
}
|
|
.details {
|
padding: 8px;
|
|
.input-group {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
|
.input-item {
|
display: flex;
|
align-items: center;
|
|
label {
|
text-align: left;
|
white-space: nowrap;
|
margin-right: 10px;
|
flex: 1;
|
}
|
|
span {
|
flex: 4;
|
text-align: left;
|
}
|
}
|
}
|
}
|
}
|
.mess {
|
position: absolute;
|
top: 10%;
|
left: 100%;
|
z-index: 5000;
|
}
|
</style>
|
