<template>
|
<div class="message">
|
<div class="message-top">模拟方案详情</div>
|
<div class="message-close" @click="closeMsg"></div>
|
<div class="message-context">
|
<div v-for="(item, key) in messageList" :key="key" class="message-item">
|
<div class="message-name">{{ item.name }}</div>
|
<div class="message-value">{{ item.value }}</div>
|
</div>
|
</div>
|
<div class="message-btn" @click="startPlay">开始模拟</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, defineProps, defineEmits, watch } from "vue";
|
// 定义 props
|
const props = defineProps({
|
mesData: {
|
type: Object,
|
default: () => ({}), // 默认值是一个空对象
|
},
|
});
|
|
// 定义 messageList
|
const messageList = ref([]);
|
|
// 监听 props.mesData 的变化
|
watch(
|
() => props.mesData, // 监听 props.mesData
|
(newMesData) => {
|
if (newMesData) {
|
messageList.value = [
|
{ name: "方案名称：", value: newMesData.name || "无" },
|
{ name: "模拟区域：", value: newMesData.area || "无" },
|
{ name: "降雨数据：", value: newMesData.fileName || "无" },
|
{ name: "预演开始时间：", value: newMesData.startTime || "无" },
|
{ name: "预演结束时间：", value: newMesData.endTime || "无" },
|
{ name: "创建时间：", value: newMesData.createTime || "无" },
|
];
|
}
|
},
|
{ immediate: true } // 立即执行一次
|
);
|
|
// 定义 emit 方法
|
const emit = defineEmits(["close"]);
|
const closeMsg = () => {
|
emit("close");
|
};
|
|
const startPlay = () => {
|
simStore.rightShow = true;
|
simStore.flowShow = true;
|
simStore.messageShow = false;
|
};
|
|
// import { useSimStore } from "@/store/simulation";
|
// const simStore = useSimStore();
|
// const closeMsg = () => {
|
// console.log("guanbi");
|
// simStore.messageShow = false;
|
// };
|
</script>
|
|
<style lang="less" scoped>
|
.message {
|
background: url("@/assets/img/tools/messagebg.png");
|
width: 391px;
|
height: 392px;
|
position: relative;
|
}
|
|
.message-top {
|
position: absolute;
|
top: 5px;
|
left: 20px;
|
font-weight: 700;
|
font-size: 18px;
|
color: #fff;
|
line-height: 40px;
|
width: 270px;
|
cursor: pointer;
|
}
|
|
.message-close {
|
position: absolute;
|
right: 3px;
|
top: 10px;
|
width: 20px;
|
height: 20px;
|
text-align: center;
|
line-height: 20px;
|
color: #fff;
|
cursor: pointer;
|
}
|
|
.message-context {
|
position: absolute;
|
top: 60px;
|
left: 20px;
|
width: 350px;
|
}
|
|
.message-item {
|
height: 23px;
|
margin-top: 15px;
|
margin-left: 10px;
|
display: flex;
|
}
|
|
.message-name {
|
font-weight: 700;
|
color: #94e0c4;
|
margin-right: 8px;
|
}
|
|
.message-value {
|
color: #e1eee9;
|
}
|
|
.message-btn {
|
background: url("@/assets/img/tools/messagebtn.png") no-repeat;
|
position: absolute;
|
bottom: 60px;
|
right: 60px;
|
width: 105px;
|
height: 26px;
|
text-align: center;
|
color: #fff;
|
cursor: pointer;
|
line-height: 26px;
|
}
|
</style>
|
