泥位计

guonan

10 天以前 b6ab34b586ee40b552fa64815148f58935e789ea

 src/components/tools/Message.vue

@@ -1,72 +1,238 @@
<template>
  <div class="message">
    <div class="message-top">模拟方案详情</div>
    <div class="message-top">方案详情</div>
    <div class="message-close" @click="closeMsg"></div>
    <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">{{ item.value }}</div>
        <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>
      </div>
    </div>
    <div class="message-btn" @click="startPlay">开始模拟</div>

    <!-- 雨量计弹窗 -->
    <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="x" label="经度(X)"></el-table-column>
          <el-table-column prop="y" label="纬度(Y)"></el-table-column>
          <el-table-column prop="r" label="半径(r)"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineEmits } from "vue";
import { ElMessage } from "element-plus";
import { ref, defineProps, defineEmits, watch } from "vue";

defineProps({
  data: {
// 定义 props
const props = defineProps({
  mesData: {
    type: Object,
    default: null,
    default: () => ({}),
  },
});

const messageList = ref([
  {
    name: "方案名称：",
    value: "降雨30mm数据",
// 响应式数据
const messageList = ref([]);
const gaugesData = ref([]); // 存储雨量计数据
const dialogVisible = ref(false); // 控制弹窗是否可见

// 打开弹窗
function openDialog() {
  if (gaugesData.value.length > 0) {
    dialogVisible.value = true;
  } else {
    ElMessage({
      message: "未找到雨量计数据！",
      type: "warning",
    });
  }
}

// 关闭弹窗
function handleClose(done) {
  done();
}

// 监听 mesData 变化并更新 messageList 和 gaugesData
watch(
  () => props.mesData,
  (newMesData) => {
    if (!newMesData || typeof newMesData !== "object") {
      console.warn("Invalid mesData received:", newMesData);
      messageList.value = [];
      return;
    }

    const formattedData = [];
    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 (key === "createTime" && typeof value === "number") {
        formattedData.push({ name: "创建时间：", value: formatDate(value) });
        continue;
      }

      if (key === "updateTime" && typeof value === "number") {
        formattedData.push({ name: "结束时间：", value: formatDate(value) });
        continue;
      }

      if (key === "areaType") {
        const areaTypeMap = {
          0: "自定义区域仿真",
          1: "行政区划仿真",
          2: "重点区域仿真",
          3: "重点沟仿真",
        };
        formattedData.push({
          name: "区域类别：",
          value: areaTypeMap[value] || "未知",
        });
        continue;
      }

      if (key === "status") {
        const statusMap = {
          0: "创建仿真",
          1: "预处理",
          2: "分析中",
          10: "完成",
          20: "出错",
        };
        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] || "未知",
          });
        }
        continue;
      }

      if (key === "result") {
        formattedData.push({ name: "仿真结果：", value: value || "无" });
        continue;
      }

      if (key === "areaName") {
        formattedData.push({ name: "区域名称：", value: value || "无" });
        continue;
      }

      if (key === "name") {
        formattedData.push({ name: "仿真方案：", value: value || "无" });
        continue;
      }

      if (key === "data" && typeof value === "string") {
        try {
          const parsedData = JSON.parse(value);

          // 处理 data 中的各个字段
          const addField = (fieldKey, label) => {
            if (parsedData[fieldKey] !== undefined) {
              formattedData.push({
                name: `${label}：`,
                value: parsedData[fieldKey] || "无",
              });
            }
          };

          addField("total", "降雨总量（mm）");
          addField("duration", "降雨时长(h)");
          addField("intensity", "降雨强度（mm/h");
          addField("prediction", "降雨场次");
          addField("model", "降雨模式");
          addField("history", "历史降雨");

          // 判断 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) : "-",
              y: gauge.y != null ? gauge.y.toFixed(2) : "-",
              r: gauge.r || "-",
            }));

            const gaugeNames = gaugesData.value.map((g) => g.name).join(", ");
            formattedData.push({
              name: "雨量计列表：",
              value: gaugeNames || "无",
            });
          }
        } catch (e) {
          formattedData.push({ name: "数据：", value: value || "无" });
        }
        continue;
      }

      formattedData.push({ name: `${key}：`, value: value || "无" });
    }

    messageList.value = formattedData;
  },
  {
    name: "模拟区域：",
    value: cityData.listData[0] || "孙胡沟",
  },
  {
    name: "降雨数据：",
    value: "降雨强度30MM",
  },
  {
    name: "预演开始时间：",
    value: "2025-01-15 12:55:18",
  },
  {
    name: "预演结束时间：",
    value: "2025-01-15 18:35:00",
  },
  {
    name: "创建时间：",
    value: "2025-01-15 8:15:28",
  },
]);
  { immediate: true }
);

// 格式化时间戳
function formatDate(timestamp) {
  const date = new Date(timestamp);
  return date.toLocaleString();
}

// 定义 emit 方法
const emit = defineEmits(["close"]);
const closeMsg = () => {
  emit("close");
};

const startPlay = () => {
  simStore.rightShow = true;
  simStore.flowShow = true;
  simStore.messageShow = false;
};

// import { useSimStore } from "@/store/simulation";
// const simStore = useSimStore();
// const closeMsg = () => {
//   console.log("guanbi");
//   simStore.messageShow = false;
// };
</script>

<style lang="less" scoped>
@@ -75,6 +241,9 @@
  width: 391px;
  height: 392px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.message-top {
@@ -103,38 +272,55 @@

.message-context {
  position: absolute;
  top: 60px;
  top: 50px;
  left: 20px;
  width: 350px;
  height: 65%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch;
}

.message-item {
  height: 23px;
  margin-top: 15px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  margin: 2px 0;
  padding: 4px 4px;
  border-radius: 4px;
}

.message-name {
  font-weight: 700;
  color: #94e0c4;
  margin-right: 8px;
  white-space: nowrap;
}

.message-value {
  color: #e1eee9;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 200px;
}
.table-container {
  max-height: 500px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 4px;
}

.message-btn {
  background: url("@/assets/img/tools/messagebtn.png") no-repeat;
  position: absolute;
  bottom: 60px;
  right: 60px;
  width: 105px;
  height: 26px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  line-height: 26px;
.el-dialog__body {
  padding-top: 10px;
  padding-bottom: 10px;
}
/deep/.el-dialog__title {
  color: #fff !important;
}
.table-container .el-table {
  font-size: 14px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>