wangjuncheng
2025-04-22 5caf72a91b204c78cdc91ce116beae5d445dc73d
src/components/monifangzhen/schemeCard.vue
@@ -1,14 +1,19 @@
<template>
  <div class="listCard">
    <!-- <div>方案数量: {{ simStore.schemCard.length }}</div> -->
    <el-card v-for="(item, key) in simStore.schemCard" :key="key" :class="{ selected: selectedId === item.id }"
    @click="selectScheme(item.id)">
    <!-- 接口版本删除该代码块 -->
    <!-- <el-card v-if="!schemeInfoShow" v-for="(item, key) in simStore.schemCard" :key="key"
      :class="{ selected: selectedId === item.id }" @click="selectScheme(item.id)"> -->
    <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>
          <span style="color: aquamarine">{{
            statusText[item.taskStatus] || "未知"
          }}</span>
        </p>
      </div>
      <div class="cardMenu">
@@ -19,272 +24,274 @@
        </div>
      </div>
    </el-card>
    <schemeInfo v-if="schemeInfoShow" :selectedScheme="currentScheme" @back="handleBack" />
  </div>
  <Message
    @close="close"
    class="mess"
    v-show="messageShow"
    :mesData="mesData"
  />
  <Message @close="close" class="mess" v-show="messageShow" :mesData="mesData" />
</template>
<script setup>
import { ref } from "vue";
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",
  },
]);
// 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: "进行中",
@@ -294,6 +301,7 @@
  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;
@@ -302,21 +310,115 @@
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");
}
const emit = defineEmits(["start", "end"]);
function endPlay() {
  emit("end");
}
// 暴露选中的 ID 给父组件
defineExpose({
  getSelectedId: () => selectedId.value,
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();
  getData({ type:2 })
    .then(data => {
      console.log('Data:', data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
});
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>
@@ -361,6 +463,7 @@
.listCard-btn:hover {
  background: url("@/assets/img/left/cardbtnac.png") no-repeat;
}
.mess {
  position: absolute;
  top: 10%;
@@ -384,7 +487,9 @@
  scale: (1.02);
  border: 1px solid #acf1dd;
}
.selected {
  border: 2px solid #acf1dd !important; /* 选中时的边框样式 */
  border: 2px solid #acf1dd !important;
  /* 选中时的边框样式 */
}
</style>