chaneg

wangjuncheng

2025-04-15 01b0b254f44dbde52ddeb1a82b7997f3f992a86d

 src/components/monifangzhen/schemeCard.vue

@@ -1,7 +1,8 @@
<template>
  <div class="listCard">
    <!-- <div>方案数量: {{ simStore.schemCard.length }}</div> -->
    <el-card v-for="(item, key) in simStore.schemCard" :key="key">
    <el-card 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>
@@ -13,7 +14,8 @@
      <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)" :disabled="item.taskStatus !== 2">进入模拟</el-button>
          <el-button size="small" @click="startPlay(item)">进入模拟</el-button>
          <!--  :disabled="item.taskStatus !== 2" -->
        </div>
      </div>
    </el-card>
@@ -34,7 +36,13 @@
import { useSimStore } from "@/store/simulation.js";

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

// 选中方案
function selectScheme(id) {
  selectedId.value = id;
}
simStore.setSchemCard([
  {
    area: "孙胡沟",
@@ -306,6 +314,10 @@
function endPlay() {
  emit("end");
}
// 暴露选中的 ID 给父组件
defineExpose({
  getSelectedId: () => selectedId.value,
});
</script>

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