| | |
| | | <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> |
| | |
| | | </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 { onMounted, ref, watch ,defineEmits } 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; |
| | |
| | | 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; |
| | |
| | | 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); |
| | | } |
| | | } |
| | | //////////////////////////////////// 暴露选中的 ID 给父组件(接口版本删除)//////////////////////////////////// |
| | | defineExpose({ |
| | | getSelectedId: () => selectedId.value, |
| | |
| | | .listCard-btn:hover { |
| | | background: url("@/assets/img/left/cardbtnac.png") no-repeat; |
| | | } |
| | | |
| | | .mess { |
| | | position: absolute; |
| | | top: 10%; |
| | |
| | | scale: (1.02); |
| | | border: 1px solid #acf1dd; |
| | | } |
| | | |
| | | .selected { |
| | | border: 2px solid #acf1dd !important; /* 选中时的边框样式 */ |
| | | border: 2px solid #acf1dd !important; |
| | | /* 选中时的边框样式 */ |
| | | } |
| | | </style> |