<template>
|
<div class="listCard">
|
<!-- <div>方案数量: {{ simStore.schemCard.length }}</div> -->
|
<!-- 接口版本删除该代码块 -->
|
<el-card v-if="!schemeInfoShow" v-for="(item, key) in simStore.schemCard" :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;
|
}
|
simStore.setSchemCard([
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2025-01-13 19:33:04",
|
datPath: "e:/data/hydro/11011611021801/1878767214615695362",
|
dataType: 2,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2023-08-01 01:59:59",
|
fileCount: 299,
|
fileName: "东江沟雨量计0110.xls",
|
hotStart: false,
|
id: "1878767214431145986",
|
name: "降雨数据：房山区东江沟数据",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2023-07-30 00:00:00",
|
taskId: "1878767214615695362",
|
taskStatus: 2,
|
updateTime: "2025-01-13 19:33:04",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2025-01-10 14:33:49",
|
datPath: "e:/data/hydro/11011611021801/1877604741980196866",
|
dataType: 2,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2023-08-02 01:00:00",
|
fileCount: 450,
|
fileName: "东江沟雨量计0110.xls",
|
hotStart: false,
|
id: "1877604741590126594",
|
name: "东江沟0729-0801",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2023-07-29 22:00:00",
|
taskId: "1877604741980196866",
|
taskStatus: 2,
|
updateTime: "2025-01-10 14:33:49",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-12-27 12:28:45",
|
datPath: "e:/data/hydro/11011611021801/1872499838538584065",
|
dataType: 2,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2023-08-02 09:00:00",
|
fileCount: 654,
|
fileName: "东江沟雨量计0110.xls",
|
hotStart: false,
|
id: "1872499838278537217",
|
name: "北京市731暴雨",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2023-07-28 20:00:00",
|
taskId: "1872499838538584065",
|
taskStatus: 2,
|
updateTime: "2024-12-27 12:28:45",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-12-20 15:00:11",
|
datPath: "e:/data/hydro/11011611021801/1870001233680502786",
|
dataType: 0,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2024-12-20 06:00:00",
|
fileCount: 86,
|
fileName: "",
|
hotStart: false,
|
id: "1870001233646948354",
|
name: "雨强30mm",
|
noRainTime: 0,
|
outputPeriod: 300,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2024-12-20 00:00:00",
|
taskId: "1870001233680502786",
|
taskStatus: 2,
|
updateTime: "2024-12-20 15:00:11",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-12-19 17:34:34",
|
datPath: "e:/data/hydro/11011611021801/1869677696923045889",
|
dataType: 2,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2023-08-01 03:00:44",
|
fileCount: 388,
|
fileName: "截流坝雨量计0068.xls",
|
hotStart: false,
|
id: "1869677696608473090",
|
name: "截流坝数据模拟0729-0731",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2023-07-29 21:00:13",
|
taskId: "1869677696923045889",
|
taskStatus: 2,
|
updateTime: "2024-12-19 17:34:34",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-12-13 15:03:24",
|
datPath: "e:/data/hydro/11011611021801/1867465327392165890",
|
dataType: 2,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2023-07-31 12:00:00",
|
fileCount: 288,
|
fileName: "东江沟雨量计0110.xls",
|
hotStart: false,
|
id: "1867465327106953218",
|
name: "东江沟数据模拟0729-0731",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2023-07-29 12:00:00",
|
taskId: "1867465327392165890",
|
taskStatus: 2,
|
updateTime: "2024-12-13 15:03:24",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-11-28 19:01:16",
|
datPath: "e:/data/hydro/11011611021801/1862089369491931138",
|
dataType: 2,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2023-07-31 00:00:00",
|
fileCount: 145,
|
fileName: "东江沟雨量计0110.xls",
|
hotStart: false,
|
id: "1862089369462571010",
|
name: "东江沟雨量0731",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2023-07-30 00:00:00",
|
taskId: "1862089369491931138",
|
taskStatus: 2,
|
updateTime: "2024-11-28 19:01:16",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-11-28 18:47:45",
|
datPath: "e:/data/hydro/11011611021801/1862085967261270017",
|
dataType: 0,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2024-08-31 00:00:00",
|
fileCount: 145,
|
fileName: "",
|
hotStart: false,
|
id: "1862085967252881410",
|
name: "雨强模拟方案0830",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2024-08-30 00:00:00",
|
taskId: "1862085967261270017",
|
taskStatus: 2,
|
updateTime: "2024-11-28 18:47:45",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-11-28 18:39:49",
|
datPath: "e:/data/hydro/11011611021801/1862083971414294529",
|
dataType: 1,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2024-07-31 00:00:00",
|
fileCount: 145,
|
fileName: "",
|
hotStart: false,
|
id: "1862083971003252737",
|
name: "雨量模拟方案0730",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2024-07-30 00:00:00",
|
taskId: "1862083971414294529",
|
taskStatus: 2,
|
updateTime: "2024-11-28 18:39:49",
|
userId: "0",
|
},
|
{
|
area: "孙胡沟",
|
areaId: "0",
|
createTime: "2024-11-28 17:26:45",
|
datPath: "e:/data/hydro/11011611021801/1862065584806100994",
|
dataType: 0,
|
dataValue: "",
|
depthThreshold: 0,
|
endTime: "2024-11-28 09:26:17",
|
fileCount: 57,
|
fileName: "",
|
hotStart: false,
|
id: "1862065584743186434",
|
name: "雨强模拟方案1128",
|
noRainTime: 0,
|
outputPeriod: 600,
|
shpPath: "e:/data/hydro/11011611021801/shp",
|
simulateType: 1,
|
startTime: "2024-11-28 00:00:00",
|
taskId: "1862065584806100994",
|
taskStatus: 2,
|
updateTime: "2024-11-28 17:26:45",
|
userId: "0",
|
},
|
]);
|
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);
|
|
//////////////////////////////////// 暴露选中的 ID 给父组件（接口版本删除）////////////////////////////////////
|
defineExpose({
|
getSelectedId: () => selectedId.value,
|
});
|
|
/////////////////////// 调用接口（使用时打开） ///////////////////////
|
// import { getData, getSimData, deleteSimData } from "@/api/trApi.js";
|
// onMounted(() => {
|
// getScheme();
|
// });
|
|
// const props = defineProps({
|
// deleteSim: Boolean, // 接收父组件传递的函数
|
// });
|
|
// watch(
|
// () => props.deleteSim,
|
// (newVal) => {
|
// if (newVal) {
|
// console.log(newVal);
|
// deleteSim();
|
// emit("reset");
|
// }
|
// }
|
// );
|
|
// const schemeList = ref([]);
|
|
// async function getScheme() {
|
// try {
|
// const res = await getSimData();
|
// schemeList.value = res.data;
|
// } catch (error) {
|
// console.error("Error fetching data:", error);
|
// }
|
// }
|
|
// const deleteSim = () => {
|
// ElMessageBox.confirm("确定要删除该方案吗?", "删除方案", {
|
// confirmButtonText: "OK",
|
// cancelButtonText: "Cancel",
|
// })
|
// .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>
|
