<template>
|
<div class="listCard">
|
<!-- <div>方案数量: {{ simStore.schemCard.length }}</div> -->
|
<el-card v-if="!schemeInfoShow" v-for="(item, key) in schemeList" :key="key"
|
:class="{ selected: selectedId === item.id }" @click="selectScheme(item.id)">
|
<div>
|
<p>方案名称 : {{ item.name }}</p>
|
<p>创建时间 : {{ formatTime(item.createTime) }}</p>
|
<p>
|
方案状态 :
|
<span style="color: aquamarine">{{
|
statusText[item.taskStatus] || "未知"
|
}}</span>
|
</p>
|
</div>
|
<div class="cardMenu">
|
<div style="float: right; margin-top: 3px">
|
<el-button size="small" @click="setSchemClick(item)">方案详情</el-button>
|
<el-button size="small" @click="startPlay(item)">进入模拟</el-button>
|
<!-- :disabled="item.taskStatus !== 2" -->
|
</div>
|
</div>
|
</el-card>
|
<schemeInfo v-if="schemeInfoShow" :selectedScheme="currentScheme" @back="handleBack" />
|
</div>
|
|
<Message @close="close" class="mess" v-show="messageShow" :mesData="mesData" />
|
</template>
|
|
<script setup>
|
import { EventBus } from "@/eventBus"; // 引入事件总线
|
import { onMounted, ref, watch, defineEmits, onUnmounted } from "vue";
|
import dayjs from "dayjs";
|
import { initeWaterPrimitiveView } from "@/utils/water";
|
import Message from "@/components/tools/Message.vue";
|
import { useSimStore } from "@/store/simulation.js";
|
import schemeInfo from "@/components/monifangzhen/schemeInfo.vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
const emit = defineEmits(["start", "end", "reset", "closeBtn"]);
|
|
const simStore = useSimStore();
|
// 选中的方案 ID
|
const selectedId = ref(null);
|
// 当前选中的方案信息
|
const currentScheme = ref(null);
|
// 选中方案
|
function selectScheme(id) {
|
selectedId.value = id;
|
}
|
|
const statusText = {
|
0: "未开始",
|
1: "进行中",
|
2: "已完成",
|
};
|
function formatTime(time) {
|
return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
|
}
|
const messageShow = ref(false);
|
const schemeInfoShow = ref(false);
|
const mesData = ref(null);
|
function setSchemClick(item) {
|
mesData.value = item;
|
messageShow.value = true;
|
}
|
function close() {
|
messageShow.value = false;
|
}
|
|
function startPlay(item) {
|
// if (item.taskStatus !== 2) {
|
// alert("当前方案尚未完成，无法进入模拟！");
|
// return;
|
// }
|
currentScheme.value = item;
|
schemeInfoShow.value = true;
|
emit("closeBtn", false);
|
initeWaterPrimitiveView();
|
emit("start");
|
}
|
function endPlay() {
|
emit("end");
|
}
|
function handleBack(value) {
|
if (value === false) {
|
schemeInfoShow.value = false;
|
}
|
}
|
const handleHideSchemeInfo = () => {
|
schemeInfoShow.value = false;
|
emit("closeBtn", true);
|
};
|
|
// 注册事件监听器
|
EventBus.on("hide-schemeInfo", handleHideSchemeInfo);
|
|
|
/////////////////////// 调用接口（使用时打开） ///////////////////////
|
import { getRegionData, getSimData, deleteSimData } from "@/api/trApi.js";
|
|
onMounted(() => {
|
getScheme();
|
});
|
|
const props = defineProps({
|
deleteSim: Boolean, // 接收父组件传递的函数
|
showAddIns: Boolean,
|
});
|
|
// 获取仿真列表
|
const schemeList = ref([]);
|
async function getScheme() {
|
try {
|
const res = await getSimData();
|
schemeList.value = res.data;
|
} catch (error) {
|
console.error("Error fetching data:", error);
|
}
|
}
|
|
// 新建方案完成之后方案列表需实时刷新
|
watch(
|
() => props.showAddIns,
|
(newVal) => {
|
if (newVal == false) {
|
getScheme();
|
}
|
}
|
);
|
|
// 删除仿真列表
|
watch(
|
() => props.deleteSim,
|
(newVal) => {
|
if (newVal) {
|
console.log(newVal);
|
deleteSim();
|
emit("reset");
|
}
|
}
|
);
|
|
const deleteSim = () => {
|
ElMessageBox.confirm("确定要删除该方案吗?", "删除方案", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
})
|
.then(() => {
|
deleteSimData(selectedId.value).then((res) => {
|
getScheme();
|
});
|
ElMessage({
|
type: "success",
|
message: "删除成功",
|
});
|
})
|
.catch(() => {
|
ElMessage({
|
type: "info",
|
message: "已取消删除",
|
});
|
});
|
};
|
/////////////////////// 调用接口结束 ///////////////////////
|
onUnmounted(() => {
|
EventBus.off("hide-schemeInfo", handleHideSchemeInfo);
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.listCard {
|
flex: none !important;
|
height: calc(100% - 46px);
|
width: 100%;
|
overflow: auto;
|
color: white !important;
|
font-size: 14px;
|
|
p {
|
color: white !important;
|
}
|
}
|
|
.cardMenu {
|
padding-bottom: 30px;
|
color: white !important;
|
|
:last-child {
|
float: right;
|
}
|
}
|
|
.listCard-btn {
|
float: right;
|
background: url("@/assets/img/left/cardbtn.png") no-repeat;
|
width: 105px;
|
height: 35px;
|
text-align: center;
|
line-height: 35px;
|
margin-left: 10px;
|
cursor: pointer;
|
}
|
|
.listCard-btn-ac {
|
background: url("@/assets/img/left/cardbtnac.png") no-repeat;
|
}
|
|
.listCard-btn:hover {
|
background: url("@/assets/img/left/cardbtnac.png") no-repeat;
|
}
|
|
.mess {
|
position: absolute;
|
top: 10%;
|
left: 100%;
|
// top: 160px;
|
// left: 460px;
|
}
|
|
/deep/.el-card__body {
|
padding: 10px 5px 5px 10px;
|
box-sizing: border-box;
|
}
|
|
/deep/.el-card {
|
margin: 5px 10px 0px 5px;
|
border: 1px solid #437a74;
|
background: rgba(0, 0, 0, 0) !important;
|
}
|
|
/deep/.el-card:hover {
|
scale: (1.02);
|
border: 1px solid #acf1dd;
|
}
|
|
.selected {
|
border: 2px solid #acf1dd !important;
|
/* 选中时的边框样式 */
|
}
|
</style>
|
