chaneg

wangjuncheng

2025-04-15 01b0b254f44dbde52ddeb1a82b7997f3f992a86d

chaneg

 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>
@@ -35,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: "孙胡沟",
@@ -307,6 +314,10 @@
function endPlay() {
  emit("end");
}
// 暴露选中的 ID 给父组件
defineExpose({
  getSelectedId: () => selectedId.value,
});
</script>

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

 src/views/left/Left.vue

@@ -12,7 +12,7 @@
        "
      >
        <el-button @click="handleClick">新建仿真方案</el-button>
        <el-button>删除仿真方案</el-button>
        <el-button @click="deleteSelectedScheme">删除仿真方案</el-button>
      </div>
      <!-- <div class="mock">
        <div
@@ -31,7 +31,7 @@
        @start="start"
        @end="end"
      /> -->
      <schemeCard @start="start" @end="end" />
      <schemeCard ref="schemeCardRef" @start="start" @end="end" />
    </div>
  </div>
  <div class="left" v-show="showAddIns">
@@ -40,10 +40,11 @@
</template>

<script setup>
import { ElMessageBox, ElMessage } from "element-plus";
import { ref, onMounted, onBeforeUnmount, defineEmits } from "vue";
import Simulation from "./Simulation.vue";
import schemeCard from "@/components/monifangzhen/schemeCard.vue";

import { useSimStore } from "@/store/simulation.js";
// import listInfo from "@/components/monifangzhen/listInfo.vue";
// import RiverLevel from "@/components/monifangzhen/RiverLevel.vue";
import { createPoint, removeEntities } from "@/utils/map";
@@ -299,7 +300,7 @@
    y: 4492925.204,
  },
];

const simStore = useSimStore();
const showAddIns = ref(false);
let divPointList = [];
function handleClick() {
@@ -407,7 +408,30 @@
  const entity = viewer.entities.add(model);
  // entities.push(entity)
}

const schemeCardRef = ref(null);
function deleteSelectedScheme() {
  const selectedId = schemeCardRef.value.getSelectedId();
  const selectedScheme = simStore.schemCard.find(item => item.id === selectedId);
  if (!selectedId) {
    ElMessage.warning("请先选择一个方案！");
    return;
  }
  ElMessageBox.confirm(
    `确定要删除  "${selectedScheme.name}" 方案吗？`,
    "删除确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning", 
    }
  )
    .then(() => {
      simStore.removeSchemCardItem(selectedId);
      ElMessage.success(`方案 "${selectedScheme.name}" 删除成功！`);
    })
    .catch(() => {
    });
}
function start(form) {
  emits("start", form);
}