<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: () => ({}),
|
},
|
});
|
const messageList = ref([]);
|
// 监听 props.mesData 的变化
|
watch(
|
() => props.mesData,
|
(newMesData) => {
|
// console.log(newMesData, '弹窗的数据');
|
|
// 检查数据有效性
|
if (!newMesData || typeof newMesData !== "object") {
|
console.warn("Invalid mesData received:", newMesData);
|
messageList.value = [];
|
return;
|
}
|
|
// 将所有字段转换为列表形式
|
const formattedData = [];
|
|
// 提前解析 areaType，确保其存在性
|
const areaType = newMesData.areaType !== undefined ? newMesData.areaType : null;
|
|
for (const [key, value] of Object.entries(newMesData)) {
|
// 跳过不需要的字段
|
if (["geom", "id", "serviceName", "updateTime", "updateUser", "createUser", "bak"].includes(key)) continue;
|
|
// 特殊处理 createTime 字段
|
if (key === "createTime" && typeof value === "number") {
|
formattedData.push({
|
name: "创建时间：",
|
value: formatDate(value),
|
});
|
continue;
|
}
|
|
// 处理 areaType 字段
|
if (key === "areaType") {
|
const areaTypeMap = {
|
0: "自定义区域仿真",
|
1: "行政区划仿真",
|
2: "重点区域仿真",
|
3: "重点沟仿真",
|
};
|
formattedData.push({
|
name: "区域类别：",
|
value: areaTypeMap[value] || "未知",
|
});
|
continue;
|
}
|
|
// 处理 status 字段
|
if (key === "status") {
|
const statusMap = {
|
0: "创建仿真",
|
1: "预处理",
|
2: "分析中",
|
10: "完成",
|
20: "出错",
|
};
|
formattedData.push({
|
name: "仿真状态：",
|
value: statusMap[value] || "未知",
|
});
|
continue;
|
}
|
|
// 处理 type 字段（仅在 areaType 不为 1 或 2 时显示）
|
if (key === "type") {
|
if (![1, 2].includes(areaType)) {
|
const typeMap = {
|
1: "预测模拟",
|
2: "实时模拟",
|
3: "历史模拟",
|
};
|
formattedData.push({
|
name: "模拟类别：",
|
value: typeMap[value] || "未知",
|
});
|
}
|
continue;
|
}
|
|
// 处理 result 字段
|
if (key === "result") {
|
formattedData.push({
|
name: "仿真结果：",
|
value: value || "无",
|
});
|
continue;
|
}
|
|
// 处理 name 字段
|
if (key === "name") {
|
formattedData.push({
|
name: "仿真方案：",
|
value: value || "无",
|
});
|
continue;
|
}
|
|
// 处理 data 字段
|
if (key === "data" && typeof value === "string") {
|
try {
|
const parsedData = JSON.parse(value);
|
|
// 处理 data.total 字段
|
if (parsedData.total !== undefined) {
|
formattedData.push({
|
name: "降雨总量（mm）：",
|
value: parsedData.total || "无",
|
});
|
}
|
|
// 处理 data.duration 字段
|
if (parsedData.duration !== undefined) {
|
formattedData.push({
|
name: "降雨时长（分钟）：",
|
value: parsedData.duration || "无",
|
});
|
}
|
|
// 处理 data.intensity 字段
|
if (parsedData.intensity !== undefined) {
|
formattedData.push({
|
name: "降雨强度（mm/小时）：",
|
value: parsedData.intensity || "无",
|
});
|
}
|
|
// 处理 data.prediction 字段
|
if (parsedData.prediction !== undefined) {
|
formattedData.push({
|
name: "降雨场次：",
|
value: parsedData.prediction || "无",
|
});
|
}
|
|
// 处理 data.model 字段
|
if (parsedData.model !== undefined) {
|
formattedData.push({
|
name: "降雨模式：",
|
value: parsedData.model || "无",
|
});
|
}
|
|
// 处理 data.history 字段
|
if (parsedData.history !== undefined) {
|
formattedData.push({
|
name: "历史降雨：",
|
value: parsedData.history || "无",
|
});
|
}
|
|
// 处理 data.gauges 字段
|
if (parsedData.gauges !== undefined) {
|
formattedData.push({
|
name: "雨量计列表：",
|
value: Array.isArray(parsedData.gauges) ? parsedData.gauges.join(", ") : "无",
|
});
|
}
|
} catch (e) {
|
formattedData.push({
|
name: "数据：",
|
value: value || "无",
|
});
|
}
|
continue;
|
}
|
|
// 其他字段直接展示
|
formattedData.push({
|
name: `${key}：`,
|
value: value || "无",
|
});
|
}
|
|
// 更新 messageList
|
messageList.value = formattedData;
|
},
|
{ immediate: true } // 立即执行一次
|
);
|
|
// 格式化时间戳为日期
|
function formatDate(timestamp) {
|
const date = new Date(timestamp);
|
return date.toLocaleString(); // 使用本地化的日期格式
|
}
|
|
// 定义 emit 方法
|
const emit = defineEmits(["close"]);
|
const closeMsg = () => {
|
emit("close");
|
};
|
</script>
|
<style lang="less" scoped>
|
.message {
|
background: url("@/assets/img/tools/messagebg.png");
|
width: 391px;
|
height: 392px;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between; /* 确保上下内容均匀分布 */
|
}
|
|
.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: 50px;
|
left: 20px;
|
width: 350px;
|
height: 65%;
|
overflow-y: auto; /* 如果内容过多，可以滚动 */
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around; /* 均匀分布子元素 */
|
align-items: stretch; /* 子元素宽度拉伸 */
|
}
|
|
.message-item {
|
display: flex;
|
// justify-content: space-between; /* 左右对齐 */
|
align-items: center; /* 垂直居中 */
|
margin: 2px 0; /* 上下间距 */
|
padding: 4px 4px; /* 内边距 */
|
border-radius: 4px; /* 圆角 */
|
}
|
|
.message-name {
|
font-weight: 700;
|
color: #94e0c4;
|
white-space: nowrap; /* 防止换行 */
|
}
|
|
.message-value {
|
color: #e1eee9;
|
white-space: nowrap; /* 防止换行 */
|
text-overflow: ellipsis; /* 超出省略 */
|
overflow: hidden; /* 隐藏超出部分 */
|
max-width: 200px; /* 最大宽度限制 */
|
}
|
|
.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>
|
