change

wangjuncheng

2025-04-21 fcac9ebfb3a0a1a4f6d857b422768d6cbef7944d

 src/components/monifangzhen/schemeCard.vue

@@ -2,17 +2,8 @@
  <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-for="(item, key) in schemeList"
      :key="key"
      @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)">
      <div>
        <p>方案名称 : {{ item.name }}</p>
        <p>创建时间 : {{ formatTime(item.createTime) }}</p>
@@ -25,35 +16,34 @@
      </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="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"
  />

  <Message @close="close" class="mess" v-show="messageShow" :mesData="mesData" />
</template>

<script setup>
import { onMounted, ref, watch } 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;
@@ -309,6 +299,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;
@@ -317,18 +308,34 @@
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", "reset"]);
function endPlay() {
  emit("end");
}
function handleBack(value) {
  if (value === false) {
    schemeInfoShow.value = false;
    emit("closeBtn", true);
  }
}
const handleHideSchemeInfo = () => {
  schemeInfoShow.value = false; // 隐藏 schemeInfo
  console.log("schemeInfoShow set to false");
};

// 注册事件监听器
EventBus.on("hide-schemeInfo", handleHideSchemeInfo);

//////////////////////////////////// 暴露选中的 ID 给父组件（接口版本删除）////////////////////////////////////
defineExpose({
@@ -389,6 +396,9 @@
//     });
// };
/////////////////////// 调用接口结束 ///////////////////////
onUnmounted(() => {
  EventBus.off("hide-schemeInfo", handleHideSchemeInfo);
});
</script>

<style lang="less" scoped>
@@ -432,6 +442,7 @@
.listCard-btn:hover {
  background: url("@/assets/img/left/cardbtnac.png") no-repeat;
}

.mess {
  position: absolute;
  top: 10%;
@@ -455,7 +466,9 @@
  scale: (1.02);
  border: 1px solid #acf1dd;
}

.selected {
  border: 2px solid #acf1dd !important; /* 选中时的边框样式 */
  border: 2px solid #acf1dd !important;
  /* 选中时的边框样式 */
}
</style>