| | |
| | | <template> |
| | | <div class="listCard"> |
| | | <div class="top"><span>方案详情</span> |
| | | </div> |
| | | <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"> |
| | | <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"> |
| | | <span |
| | | :class="{ clickable: item.isClickable }" |
| | | @click="item.isClickable ? openGaugeDialog(item.gauges) : null" |
| | | > |
| | | {{ item.value }} |
| | | </span> |
| | | </div> |
| | |
| | | <p style="text-align: center">暂无方案信息</p> |
| | | </div> |
| | | </div> |
| | | <div> |
| | | |
| | | </div> |
| | | <div></div> |
| | | </div> |
| | | <Message @close="close" class="mess" v-show="messageShow" :mesData="mesData" /> |
| | | <Message |
| | | @close="close" |
| | | class="mess" |
| | | v-show="messageShow" |
| | | :mesData="mesData" |
| | | /> |
| | | <!-- 添加雨量计弹窗 --> |
| | | <div class="dialoog"> |
| | | <el-dialog v-model="dialogVisible" title="雨量计详情" width="50%" :before-close="handleClose"> |
| | | <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> |
| | |
| | | </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 { |
| | | ElDialog, |
| | | ElTable, |
| | | ElTableColumn, |
| | | ElButton, |
| | | ElMessage, |
| | | } from "element-plus"; |
| | | import dayjs from "dayjs"; |
| | | // 公共依赖 |
| | | const props = defineProps({ selectedScheme: { type: Object, default: null } }); |
| | |
| | | // 状态管理 |
| | | const formattedData = ref([]); |
| | | |
| | | |
| | | // 映射表 |
| | | const areaTypeMap = { |
| | | 0: "自定义区域仿真", |
| | | 1: "行政区划仿真", |
| | | 2: "重点区域仿真", |
| | | 3: "重点沟仿真" |
| | | 3: "重点沟仿真", |
| | | }; |
| | | |
| | | const statusMap = { |
| | |
| | | 1: "预处理", |
| | | 2: "分析中", |
| | | 10: "完成", |
| | | 20: "出错" |
| | | 20: "出错", |
| | | }; |
| | | |
| | | const typeMap = { |
| | | 1: "预测模拟", |
| | | 2: "实时模拟", |
| | | 3: "历史模拟" |
| | | 3: "历史模拟", |
| | | }; |
| | | |
| | | // 跳过字段列表 |
| | | const skipKeys = ["geom", "id", "serviceName", "updateTime", "updateUser", "createUser", "bak"]; |
| | | const skipKeys = [ |
| | | "geom", |
| | | "id", |
| | | "serviceName", |
| | | "updateTime", |
| | | "updateUser", |
| | | "createUser", |
| | | "bak", |
| | | ]; |
| | | |
| | | // 处理 data 字段解析 |
| | | function parseDataField(dataStr) { |
| | |
| | | intensity: "降雨强度(mm/小时):", |
| | | prediction: "降雨场次:", |
| | | model: "降雨模式:", |
| | | history: "历史降雨:" |
| | | history: "历史降雨:", |
| | | }; |
| | | |
| | | const result = Object.entries(parsed) |
| | | .filter(([k]) => fields[k]) |
| | | .map(([k, v]) => ({ |
| | | name: fields[k], |
| | | value: v || "无" |
| | | value: v || "无", |
| | | })); |
| | | |
| | | // 处理雨量计数据 |
| | | if (parsed.gauges && Array.isArray(parsed.gauges)) { |
| | | const gaugeNames = parsed.gauges.map(g => g.name).join(", ") || "无"; |
| | | if (parsed.type == 2 && parsed.gauges && Array.isArray(parsed.gauges)) { |
| | | const gaugeNames = parsed.gauges.map((g) => g.name).join(", ") || "无"; |
| | | result.push({ |
| | | name: "雨量计列表:", |
| | | value: '查看雨量计列表', |
| | | value: "查看雨量计列表", |
| | | isClickable: true, |
| | | gauges: parsed.gauges |
| | | gauges: parsed.gauges, |
| | | }); |
| | | } |
| | | |
| | |
| | | const entries = Object.entries(newScheme); |
| | | const areaType = newScheme.areaType; |
| | | |
| | | console.log(newScheme, 'news'); |
| | | // console.log(newScheme, "news"); |
| | | |
| | | const result = entries.reduce((acc, [key, value]) => { |
| | | if (skipKeys.includes(key)) return acc; |
| | |
| | | // 打开雨量计弹窗 |
| | | function openGaugeDialog(gauges) { |
| | | if (Array.isArray(gauges) && gauges.length > 0) { |
| | | gaugesData.value = gauges.map(g => ({ |
| | | 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 || "-" |
| | | r: g.r || "-", |
| | | })); |
| | | dialogVisible.value = true; |
| | | } else { |