完善

guonan

2025-04-17 e15245c624a20a3b46e428d646f5f2dd863cd1bc

 src/components/monifangzhen/schemeCard.vue

@@ -1,12 +1,26 @@
<template>
  <div class="listCard">
    <el-card v-for="(item, key) in schemCard" :key="key">
    <!-- <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-for="(item, key) in schemeList"
      :key="key"
      @click="selectScheme(item.id)"
    > -->
      <div>
        <p>方案名称 : {{ item.name }}</p>
        <p>创建时间 : {{ item.createTime }}</p>
        <p>创建时间 : {{ formatTime(item.createTime) }}</p>
        <p>
          方案状态 :
          <span style="color: aquamarine">{{ item.status || "已完成" }}</span>
          <span style="color: aquamarine">{{
            statusText[item.taskStatus] || "未知"
          }}</span>
        </p>
      </div>
      <div class="cardMenu">
@@ -14,7 +28,8 @@
          <el-button size="small" @click="setSchemClick(item)"
            >方案详情</el-button
          >
          <el-button size="small" @click="startPlay"> 进入模拟 </el-button>
          <el-button size="small" @click="startPlay(item)">进入模拟</el-button>
          <!--  :disabled="item.taskStatus !== 2" -->
        </div>
      </div>
    </el-card>
@@ -28,14 +43,22 @@
</template>

<script setup>
import { ref } from "vue";
import { onMounted, ref, watch } from "vue";
import dayjs from "dayjs";
import { initeWaterPrimitiveView } from "@/utils/water";
import Message from "@/components/tools/Message.vue";
// import { useSimStore } from "@/store/simulation";
import { useSimStore } from "@/store/simulation.js";
import { ElMessage, ElMessageBox } from "element-plus";

// const simStore = useSimStore();
const simStore = useSimStore();
// 选中的方案 ID
const selectedId = ref(null);

const schemCard = ref([
// 选中方案
function selectScheme(id) {
  selectedId.value = id;
}
simStore.setSchemCard([
  {
    area: "孙胡沟",
    areaId: "0",
@@ -277,29 +300,95 @@
    userId: "0",
  },
]);
// function setSchemClick(res) {
//   simStore.messageShow = true;
// }
const statusText = {
  0: "未开始",
  1: "进行中",
  2: "已完成",
};
function formatTime(time) {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
}
const messageShow = ref(false);
const mesData = ref(null);
function setSchemClick(item) {
  
  mesData.value = item;
  console.log(mesData.value,'dadadaddaadaadadadad');
  messageShow.value = true;
}
function close() {
  messageShow.value = false;
}
const emit = defineEmits(["start", "end"]);
function startPlay(item) {
  // if (item.taskStatus !== 2) {
  //   alert("当前方案尚未完成，无法进入模拟！");
  //   return;
  // }
  initeWaterPrimitiveView();
  emit("start");
}
const emit = defineEmits(["start", "end", "reset"]);
function endPlay() {
  emit("end");
}

function startPlay() {
  initeWaterPrimitiveView();
  emit("start");
}
//////////////////////////////////// 暴露选中的 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: "已取消删除",
//       });
//     });
// };
/////////////////////// 调用接口结束 ///////////////////////
</script>

<style lang="less" scoped>
@@ -366,4 +455,7 @@
  scale: (1.02);
  border: 1px solid #acf1dd;
}
.selected {
  border: 2px solid #acf1dd !important; /* 选中时的边框样式 */
}
</style>