<template>
|
<div class="listCard">
|
<div class="top"><span>方案详情</span></div>
|
<div class="details">
|
<div v-if="formattedData.length" class="input-group">
|
<div
|
v-for="(item, index) in formattedData"
|
:key="index"
|
class="input-item"
|
>
|
<label>{{ item.name }}</label>
|
<span
|
:class="{ clickable: item.isClickable }"
|
@click="item.isClickable ? openGaugeDialog(item.gauges) : null"
|
>
|
{{ item.value }}
|
</span>
|
</div>
|
</div>
|
<div v-else>
|
<p style="text-align: center">暂无方案信息</p>
|
</div>
|
</div>
|
<div></div>
|
</div>
|
<Message
|
@close="close"
|
class="mess"
|
v-show="messageShow"
|
:mesData="mesData"
|
/>
|
<!-- 添加雨量计弹窗 -->
|
<div class="dialoog">
|
<el-dialog
|
v-model="dialogVisible"
|
title="雨量计详情"
|
width="50%"
|
:before-close="handleClose"
|
>
|
<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 { defineProps, defineEmits, inject, ref, watch } from "vue";
|
import {
|
ElDialog,
|
ElTable,
|
ElTableColumn,
|
ElButton,
|
ElMessage,
|
} from "element-plus";
|
import dayjs from "dayjs";
|
// 公共依赖
|
const props = defineProps({ selectedScheme: { type: Object, default: null } });
|
const emit = defineEmits(["back"]);
|
const { endSimulate } = inject("simulateActions");
|
|
// 状态管理
|
const formattedData = ref([]);
|
|
// 映射表
|
const areaTypeMap = {
|
0: "自定义区域仿真",
|
1: "行政区划仿真",
|
2: "重点区域仿真",
|
3: "重点沟仿真",
|
};
|
|
const statusMap = {
|
0: "创建仿真",
|
1: "预处理",
|
2: "分析中",
|
10: "完成",
|
20: "出错",
|
};
|
|
const typeMap = {
|
1: "预测模拟",
|
2: "实时模拟",
|
3: "历史模拟",
|
};
|
|
// 跳过字段列表
|
const skipKeys = [
|
"geom",
|
"id",
|
"serviceName",
|
"updateTime",
|
"updateUser",
|
"createUser",
|
"bak",
|
];
|
|
// 处理 data 字段解析
|
function parseDataField(dataStr) {
|
if (typeof dataStr !== "string") return [];
|
|
try {
|
const parsed = JSON.parse(dataStr);
|
const fields = {
|
total: "降雨总量（mm）：",
|
duration: "降雨时长（小时）：",
|
intensity: "降雨强度（mm/小时）：",
|
prediction: "降雨场次：",
|
model: "降雨模式：",
|
history: "历史降雨：",
|
};
|
|
const result = Object.entries(parsed)
|
.filter(([k]) => fields[k])
|
.map(([k, v]) => ({
|
name: fields[k],
|
value: v || "无",
|
}));
|
|
// 处理雨量计数据
|
if (parsed.type == 2 && parsed.gauges && Array.isArray(parsed.gauges)) {
|
const gaugeNames = parsed.gauges.map((g) => g.name).join(", ") || "无";
|
result.push({
|
name: "雨量计列表：",
|
value: "查看雨量计列表",
|
isClickable: true,
|
gauges: parsed.gauges,
|
});
|
}
|
|
return result;
|
} catch (e) {
|
return [{ name: "数据：", value: dataStr || "无" }];
|
}
|
}
|
|
// 格式化时间戳
|
function formatDate(timestamp) {
|
return dayjs(timestamp).format("YYYY-MM-DD HH:mm:ss");
|
}
|
|
// 格式化 selectedScheme 数据
|
watch(
|
() => props.selectedScheme,
|
(newScheme) => {
|
if (!newScheme || typeof newScheme !== "object") {
|
formattedData.value = [];
|
return;
|
}
|
|
const entries = Object.entries(newScheme);
|
const areaType = newScheme.areaType;
|
|
// console.log(newScheme, "news");
|
|
const result = entries.reduce((acc, [key, value]) => {
|
if (skipKeys.includes(key)) return acc;
|
|
switch (key) {
|
case "createTime":
|
acc.push({ name: "创建时间：", value: formatDate(value) });
|
break;
|
case "areaType":
|
acc.push({ name: "区域类别：", value: areaTypeMap[value] || "未知" });
|
break;
|
case "status":
|
acc.push({ name: "仿真状态：", value: statusMap[value] || "未知" });
|
break;
|
case "type":
|
if (![1, 2].includes(areaType)) {
|
acc.push({ name: "模拟类别：", value: typeMap[value] || "未知" });
|
}
|
break;
|
case "areaName":
|
acc.push({ name: "区域名称：", value: value || "无" });
|
break;
|
case "result":
|
acc.push({ name: "仿真结果：", value: value || "无" });
|
break;
|
case "name":
|
acc.push({ name: "仿真方案：", value: value || "无" });
|
break;
|
case "data":
|
acc.push(...parseDataField(value));
|
break;
|
default:
|
acc.push({ name: `${key}：`, value: value || "无" });
|
}
|
|
return acc;
|
}, []);
|
|
formattedData.value = result;
|
},
|
{ immediate: true }
|
);
|
const dialogVisible = ref(false);
|
const gaugesData = ref([]);
|
|
// 打开雨量计弹窗
|
function openGaugeDialog(gauges) {
|
if (Array.isArray(gauges) && gauges.length > 0) {
|
gaugesData.value = gauges.map((g) => ({
|
name: g.name || "未知",
|
x: g.x != null ? g.x.toFixed(2) : "-",
|
y: g.y != null ? g.y.toFixed(2) : "-",
|
r: g.r || "-",
|
}));
|
dialogVisible.value = true;
|
} else {
|
ElMessage({
|
message: "雨量计数据出错，请重新新建模拟方案！",
|
type: "warning",
|
});
|
}
|
}
|
|
// 关闭弹窗
|
function handleClose(done) {
|
done();
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.listCard {
|
margin-bottom: 20px;
|
border-radius: 8px;
|
color: white;
|
.left-top {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
|
span {
|
font-weight: bold;
|
}
|
|
.clickable-text {
|
margin-right: 5px;
|
background-color: #61f7d4;
|
color: black;
|
border: none;
|
cursor: pointer;
|
padding: 5px 10px;
|
border-radius: 4px;
|
font-size: 14px;
|
|
&:hover {
|
background-color: #43c6b9;
|
}
|
}
|
}
|
|
.details {
|
padding-left: 8px;
|
|
.input-group {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
|
.input-item {
|
display: flex;
|
align-items: center;
|
|
label {
|
text-align: left;
|
white-space: nowrap;
|
margin-right: 10px;
|
flex: 1;
|
}
|
|
span {
|
flex: 4;
|
text-align: left;
|
}
|
}
|
}
|
}
|
}
|
|
.mess {
|
position: absolute;
|
top: 10%;
|
left: 100%;
|
z-index: 5000;
|
}
|
|
.top {
|
display: flex;
|
width: 100%;
|
height: 41px;
|
color: white;
|
line-height: 41px;
|
font-size: 16px;
|
font-weight: 700;
|
cursor: pointer;
|
text-indent: 7px;
|
letter-spacing: 2px;
|
font-weight: bolder;
|
}
|
|
.clickable {
|
color: #5bc0de;
|
cursor: pointer;
|
text-decoration: underline;
|
}
|
|
.dialoog {
|
::v-deep .el-dialog__title {
|
color: #fff !important;
|
}
|
|
::v-deep .el-dialog {
|
background-color: rgb(5, 75, 69) !important;
|
}
|
|
.el-dialog__body {
|
padding-top: 10px;
|
padding-bottom: 10px;
|
}
|
|
.table-container .el-table {
|
font-size: 14px;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
}
|
</style>
|
