<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, defineEmits } from "vue";
|
|
defineProps({
|
data: {
|
type: Object,
|
default: null,
|
},
|
});
|
|
const messageList = ref([
|
{
|
name: "方案名称：",
|
value: "降雨30mm数据",
|
},
|
{
|
name: "模拟区域：",
|
value: cityData.listData[0] || "孙胡沟",
|
},
|
{
|
name: "降雨数据：",
|
value: "降雨强度30MM",
|
},
|
{
|
name: "预演开始时间：",
|
value: "2025-01-15 12:55:18",
|
},
|
{
|
name: "预演结束时间：",
|
value: "2025-01-15 18:35:00",
|
},
|
{
|
name: "创建时间：",
|
value: "2025-01-15 8:15:28",
|
},
|
]);
|
|
// 定义 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>
|
