<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" v-if="!(item.name.includes('雨量计列表'))">
|
{{ item.value }}
|
</div>
|
<div v-if="item.name.includes('雨量计列表')" @click="openDialog"
|
style="color: #5bc0de; cursor: pointer;">
|
查看雨量计列表
|
</div>
|
</div>
|
</div>
|
<el-dialog title="雨量计详情" v-model="dialogVisible" :width="'60%'" :before-close="handleClose"
|
style="background-color: rgb(5,75,69);">
|
<div class="table-container">
|
<el-table :data="gaugesData" border stripe height="100%">
|
<el-table-column prop="name" label="名称"></el-table-column>
|
<el-table-column prop="x" label="经度(X)"></el-table-column>
|
<el-table-column prop="y" label="纬度(Y)"></el-table-column>
|
<el-table-column prop="r" label="半径(r)"></el-table-column>
|
</el-table>
|
</div>
|
<!-- <template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogVisible = false">关 闭</el-button>
|
</span>
|
</template> -->
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ElMessage } from "element-plus";
|
import { ref, defineProps, defineEmits, watch } from "vue";
|
|
// 定义 props
|
const props = defineProps({
|
mesData: {
|
type: Object,
|
default: () => ({}),
|
},
|
});
|
|
// 响应式数据
|
const messageList = ref([]);
|
const gaugesData = ref([]); // 存储雨量计数据
|
const dialogVisible = ref(false); // 控制弹窗是否可见
|
|
// 打开弹窗
|
function openDialog() {
|
if (gaugesData.value.length > 0) {
|
dialogVisible.value = true;
|
}else {
|
ElMessage({
|
message: "未找到雨量计数据！",
|
type: "warning",
|
});
|
return; // 阻止后续逻辑执行
|
}
|
}
|
|
// 关闭弹窗
|
function handleClose(done) {
|
done();
|
}
|
|
// 监听 mesData 变化并更新 messageList 和 gaugesData
|
watch(
|
() => props.mesData,
|
(newMesData) => {
|
if (!newMesData || typeof newMesData !== "object") {
|
console.warn("Invalid mesData received:", newMesData);
|
messageList.value = [];
|
return;
|
}
|
|
const formattedData = [];
|
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;
|
|
if (key === "createTime" && typeof value === "number") {
|
formattedData.push({ name: "创建时间：", value: formatDate(value) });
|
continue;
|
}
|
|
if (key === "areaType") {
|
const areaTypeMap = {
|
0: "自定义区域仿真",
|
1: "行政区划仿真",
|
2: "重点区域仿真",
|
3: "重点沟仿真",
|
};
|
formattedData.push({ name: "区域类别：", value: areaTypeMap[value] || "未知" });
|
continue;
|
}
|
|
if (key === "status") {
|
const statusMap = {
|
0: "创建仿真",
|
1: "预处理",
|
2: "分析中",
|
10: "完成",
|
20: "出错",
|
};
|
formattedData.push({ name: "仿真状态：", value: statusMap[value] || "未知" });
|
continue;
|
}
|
|
if (key === "type") {
|
if (![1, 2].includes(areaType)) {
|
const typeMap = { 1: "预测模拟", 2: "实时模拟", 3: "历史模拟" };
|
formattedData.push({ name: "模拟类别：", value: typeMap[value] || "未知" });
|
}
|
continue;
|
}
|
|
if (key === "result") {
|
formattedData.push({ name: "仿真结果：", value: value || "无" });
|
continue;
|
}
|
|
if (key === "areaName") {
|
formattedData.push({ name: "区域名称：", value: value || "无" });
|
continue;
|
}
|
|
if (key === "name") {
|
formattedData.push({ name: "仿真方案：", value: value || "无" });
|
continue;
|
}
|
|
if (key === "data" && typeof value === "string") {
|
try {
|
const parsedData = JSON.parse(value);
|
console.log('Parsed Data:', parsedData);
|
// 处理 data 中的各个字段
|
const addField = (fieldKey, label) => {
|
if (parsedData[fieldKey] !== undefined) {
|
formattedData.push({ name: `${label}：`, value: parsedData[fieldKey] || "无" });
|
}
|
};
|
|
addField("total", "降雨总量（mm）");
|
addField("duration", "降雨时长（分钟）");
|
addField("intensity", "降雨强度（mm/小时）");
|
addField("prediction", "降雨场次");
|
addField("model", "降雨模式");
|
addField("history", "历史降雨");
|
|
// 处理雨量计数据
|
if (parsedData.gauges && Array.isArray(parsedData.gauges)) {
|
gaugesData.value = parsedData.gauges.map((gauge) => ({
|
name: gauge.name || "未知",
|
x: gauge.x != null ? gauge.x.toFixed(2) : "-",
|
y: gauge.y != null ? gauge.y.toFixed(2) : "-",
|
r: gauge.r || "-",
|
}));
|
|
const gaugeNames = gaugesData.value.map(g => g.name).join(", ");
|
formattedData.push({ name: "雨量计列表：", value: gaugeNames || "无" });
|
}
|
} catch (e) {
|
formattedData.push({ name: "数据：", value: value || "无" });
|
}
|
continue;
|
}
|
|
formattedData.push({ name: `${key}：`, value: value || "无" });
|
}
|
|
messageList.value = formattedData;
|
console.log(messageList.value, 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwww');
|
|
},
|
{ 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;
|
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;
|
}
|
.table-container {
|
max-height: 500px; // 控制最大高度，超过则出现滚动条
|
overflow-y: auto; // 垂直滚动
|
padding: 10px;
|
border-radius: 4px;
|
}
|
|
.el-dialog__body {
|
padding-top: 10px;
|
padding-bottom: 10px;
|
}
|
/deep/.el-dialog__title{
|
color: #fff !important;
|
}
|
.table-container .el-table {
|
font-size: 14px;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
</style>
|
