guonan
2025-05-20 f1fbe8049ba01186f033037e6ae36d51915c7418
src/components/monifangzhen/schemeInfo.vue
@@ -1,13 +1,18 @@
<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>
@@ -16,14 +21,22 @@
        <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>
@@ -39,12 +52,17 @@
      </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 } });
@@ -54,13 +72,12 @@
// 状态管理
const formattedData = ref([]);
// 映射表
const areaTypeMap = {
  0: "自定义区域仿真",
  1: "行政区划仿真",
  2: "重点区域仿真",
  3: "重点沟仿真"
  3: "重点沟仿真",
};
const statusMap = {
@@ -68,17 +85,25 @@
  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) {
@@ -92,24 +117,24 @@
      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,
      });
    }
@@ -136,7 +161,7 @@
    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;
@@ -185,11 +210,11 @@
// 打开雨量计弹窗
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 {