guonan
2025-05-20 f1fbe8049ba01186f033037e6ae36d51915c7418
src/components/tools/Message.vue
@@ -5,17 +5,27 @@
    <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>
@@ -24,11 +34,6 @@
          <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>
@@ -54,12 +59,11 @@
function openDialog() {
  if (gaugesData.value.length > 0) {
    dialogVisible.value = true;
  }else {
  } else {
    ElMessage({
      message: "未找到雨量计数据!",
      type: "warning",
    });
    return; // 阻止后续逻辑执行
  }
}
@@ -79,10 +83,25 @@
    }
    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) });
@@ -96,7 +115,10 @@
          2: "重点区域仿真",
          3: "重点沟仿真",
        };
        formattedData.push({ name: "区域类别:", value: areaTypeMap[value] || "未知" });
        formattedData.push({
          name: "区域类别:",
          value: areaTypeMap[value] || "未知",
        });
        continue;
      }
@@ -108,14 +130,20 @@
          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;
      }
@@ -138,11 +166,14 @@
      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] || "无",
              });
            }
          };
@@ -153,8 +184,12 @@
          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) : "-",
@@ -162,8 +197,11 @@
              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 || "无" });
@@ -175,8 +213,6 @@
    }
    messageList.value = formattedData;
    console.log(messageList.value, 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwww');
  },
  { immediate: true }
);
@@ -264,8 +300,8 @@
  max-width: 200px;
}
.table-container {
  max-height: 500px;  // 控制最大高度,超过则出现滚动条
  overflow-y: auto;   // 垂直滚动
  max-height: 500px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 4px;
}
@@ -274,7 +310,7 @@
  padding-top: 10px;
  padding-bottom: 10px;
}
/deep/.el-dialog__title{
/deep/.el-dialog__title {
  color: #fff !important;
}
.table-container .el-table {
@@ -282,4 +318,4 @@
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
</style>