1

wangjuncheng

2025-06-30 e084592304b0499d05eaa31d59c463a8649352c2

 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,53 +85,99 @@
  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) {
  if (typeof dataStr !== "string") return [];
  // console.log(dataStr, '方案详情内的降雨数据');

  try {
    const parsed = JSON.parse(dataStr);
    const fields = {
      total: "降雨总量（mm）：",
      duration: "降雨时长（小时）：",
      intensity: "降雨强度（mm/小时）：",
      intensity: "降雨强度（mm/小时）：", // 统一为 mm/h
      prediction: "降雨场次：",
      model: "降雨模式：",
      history: "历史降雨："
      history: "历史降雨：",
    };

    let { total, duration, intensity, intensityUnit } = parsed;

    // 根据 intensityUnit 确定转换系数
    let factor = 1;
    switch (intensityUnit) {
      case "mm/min":
        factor = 60;
        break;
      case "mm/5min":
        factor = 12;
        break;
      case "mm/h":
        factor = 1;
        break;
      default:
        factor = 1;
    }

    // 转换单位：将 intensity 和 total 统一为按小时计算的值
    intensity = intensity != null ? (intensity * factor).toFixed(2) : "无";
    total = total != null ? (total * factor).toFixed(2) : "无";

    // 控制台输出你需要的关键字段
    // console.log('转换后的降雨强度（mm/h）:', intensity);
    // console.log('转换后的降雨总量（mm）:', total);

    // 处理 duration，如果非数字则设为默认值
    duration = duration != null ? parseInt(duration) : "无";

    const result = Object.entries(parsed)
      .filter(([k]) => fields[k])
      .map(([k, v]) => ({
        name: fields[k],
        value: v || "无"
      }));
      .map(([k, v]) => {
        let displayValue = v || "无";
        if (k === "total") displayValue = total;
        if (k === "duration") displayValue = duration;
        if (k === "intensity") displayValue = intensity;

        return {
          name: fields[k],
          value: displayValue,
        };
      });

    // 处理雨量计数据
    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,
      });
    }

    return result;
  } catch (e) {
    console.error("解析 dataStr 出错：", e);
    return [{ name: "数据：", value: dataStr || "无" }];
  }
}
@@ -136,7 +199,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 +248,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 {
@@ -211,7 +274,6 @@
  margin-bottom: 20px;
  border-radius: 8px;
  color: white;

  .left-top {
    display: flex;
    justify-content: space-between;
@@ -239,7 +301,7 @@
  }

  .details {
    padding: 8px;
    padding-left: 8px;

    .input-group {
      display: flex;