| | |
| | | <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('雨量计列表'))"> |
| | | <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 |
| | | 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);"> |
| | | |
| | | <!-- 雨量计弹窗 --> |
| | | <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="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> |
| | |
| | | function openDialog() { |
| | | if (gaugesData.value.length > 0) { |
| | | dialogVisible.value = true; |
| | | }else { |
| | | } else { |
| | | ElMessage({ |
| | | message: "未找到雨量计数据!", |
| | | type: "warning", |
| | | }); |
| | | return; // 阻止后续逻辑执行 |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | const formattedData = []; |
| | | const areaType = newMesData.areaType !== undefined ? newMesData.areaType : null; |
| | | const areaType = |
| | | newMesData.areaType !== undefined ? newMesData.areaType : null; |
| | | |
| | | // 获取当前的 type 值 |
| | | const currentType = newMesData.type; |
| | | |
| | | for (const [key, value] of Object.entries(newMesData)) { |
| | | if (["geom", "id", "serviceName", "updateTime", "updateUser", "createUser", "bak"].includes(key)) continue; |
| | | if ( |
| | | [ |
| | | "geom", |
| | | "id", |
| | | "serviceName", |
| | | "updateTime", |
| | | "updateUser", |
| | | "createUser", |
| | | "bak", |
| | | ].includes(key) |
| | | ) |
| | | continue; |
| | | |
| | | if (key === "createTime" && typeof value === "number") { |
| | | formattedData.push({ name: "创建时间:", value: formatDate(value) }); |
| | |
| | | 2: "重点区域仿真", |
| | | 3: "重点沟仿真", |
| | | }; |
| | | formattedData.push({ name: "区域类别:", value: areaTypeMap[value] || "未知" }); |
| | | formattedData.push({ |
| | | name: "区域类别:", |
| | | value: areaTypeMap[value] || "未知", |
| | | }); |
| | | continue; |
| | | } |
| | | |
| | |
| | | 10: "完成", |
| | | 20: "出错", |
| | | }; |
| | | formattedData.push({ name: "仿真状态:", value: statusMap[value] || "未知" }); |
| | | 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] || "未知" }); |
| | | formattedData.push({ |
| | | name: "模拟类别:", |
| | | value: typeMap[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] || "无" }); |
| | | formattedData.push({ |
| | | name: `${label}:`, |
| | | value: parsedData[fieldKey] || "无", |
| | | }); |
| | | } |
| | | }; |
| | | |
| | |
| | | addField("model", "降雨模式"); |
| | | addField("history", "历史降雨"); |
| | | |
| | | // 处理雨量计数据 |
| | | if (parsedData.gauges && Array.isArray(parsedData.gauges)) { |
| | | // 判断 type 是否为 2,决定是否添加雨量计信息 |
| | | if ( |
| | | currentType == 2 && |
| | | parsedData.gauges && |
| | | Array.isArray(parsedData.gauges) |
| | | ) { |
| | | gaugesData.value = parsedData.gauges.map((gauge) => ({ |
| | | name: gauge.name || "未知", |
| | | x: gauge.x != null ? gauge.x.toFixed(2) : "-", |
| | |
| | | r: gauge.r || "-", |
| | | })); |
| | | |
| | | const gaugeNames = gaugesData.value.map(g => g.name).join(", "); |
| | | formattedData.push({ name: "雨量计列表:", value: gaugeNames || "无" }); |
| | | const gaugeNames = gaugesData.value.map((g) => g.name).join(", "); |
| | | formattedData.push({ |
| | | name: "雨量计列表:", |
| | | value: gaugeNames || "无", |
| | | }); |
| | | } |
| | | } catch (e) { |
| | | formattedData.push({ name: "数据:", value: value || "无" }); |
| | |
| | | } |
| | | |
| | | messageList.value = formattedData; |
| | | console.log(messageList.value, 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwww'); |
| | | |
| | | }, |
| | | { immediate: true } |
| | | ); |
| | |
| | | max-width: 200px; |
| | | } |
| | | .table-container { |
| | | max-height: 500px; // 控制最大高度,超过则出现滚动条 |
| | | overflow-y: auto; // 垂直滚动 |
| | | max-height: 500px; |
| | | overflow-y: auto; |
| | | padding: 10px; |
| | | border-radius: 4px; |
| | | } |
| | |
| | | padding-top: 10px; |
| | | padding-bottom: 10px; |
| | | } |
| | | /deep/.el-dialog__title{ |
| | | /deep/.el-dialog__title { |
| | | color: #fff !important; |
| | | } |
| | | .table-container .el-table { |
| | |
| | | border-radius: 4px; |
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
| | | } |
| | | </style> |
| | | </style> |