change

wangjuncheng

2025-04-23 5fb123a96da4132d01b0d69c4a8a783d622c7760

change

 src/components/monifangzhen/schemeCard.vue

@@ -9,7 +9,7 @@
        <p>
          方案状态 :
          <span style="color: aquamarine">{{
            statusText[item.taskStatus] || "未知"
            statusText[item.status] || "未知"
          }}</span>
        </p>
      </div>
@@ -23,7 +23,6 @@
    </el-card>
    <schemeInfo v-if="schemeInfoShow" :selectedScheme="currentScheme" @back="handleBack" />
  </div>

  <Message @close="close" class="mess" v-show="messageShow" :mesData="mesData" />
</template>

@@ -49,9 +48,11 @@
}

const statusText = {
  0: "未开始",
  1: "进行中",
  2: "已完成",
  0: "创建仿真",
  1: "预处理",
  2: "分析中",
  10: "完成",
  20: "出错",
};
function formatTime(time) {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");

 src/components/monifangzhen/schemeInfo.vue

@@ -5,35 +5,11 @@
      <!-- <el-button class="clickable-text" @click="handleBack">结束模拟</el-button> -->
    </div>
    <div class="details">
      <div v-if="selectedScheme">
      <div v-if="formattedData.length > 0">
        <div class="input-group">
          <div class="input-item">
            <label>方案名称:</label>
            <span>{{ selectedScheme.name }}</span>
          </div>
          <div class="input-item">
            <label>创建时间:</label>
            <span>{{ formatTime(selectedScheme.createTime) }}</span>
          </div>
          <div class="input-item">
            <label>方案状态:</label>
            <span>{{ statusText[selectedScheme.taskStatus] || "未知" }}</span>
          </div>
          <div class="input-item">
            <label>开始时间:</label>
            <span>{{ selectedScheme.startTime }}</span>
          </div>
          <div class="input-item">
            <label>结束时间:</label>
            <span>{{ selectedScheme.endTime }}</span>
          </div>
          <div class="input-item">
            <label>文件数量:</label>
            <span>{{ selectedScheme.fileCount }}</span>
          </div>
          <div class="input-item">
            <label>输出周期:</label>
            <span>{{ selectedScheme.outputPeriod }} 秒</span>
          <div v-for="(item, index) in formattedData" :key="index" class="input-item">
            <label>{{ item.name }}</label>
            <span>{{ item.value }}</span>
          </div>
        </div>
      </div>
@@ -51,7 +27,7 @@
</template>

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

@@ -76,10 +52,191 @@
    default: null,
  },
});
// 格式化后的数据
const formattedData = ref([]);

// 格式化时间
function formatTime(time) {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
// 监听 selectedScheme 的变化
watch(
  () => props.selectedScheme,
  (newScheme) => {
    console.log(newScheme, "弹窗的数据");

    // 检查数据有效性
    if (!newScheme || typeof newScheme !== "object") {
      console.warn("Invalid selectedScheme received:", newScheme);
      formattedData.value = [];
      return;
    }

    // 将所有字段转换为列表形式
    const data = [];

    // 提前解析 areaType，确保其存在性
    const areaType = newScheme.areaType !== undefined ? newScheme.areaType : null;

    for (const [key, value] of Object.entries(newScheme)) {
      // 跳过不需要的字段
      if (["geom", "id", "serviceName", "updateTime", "updateUser", "createUser", "bak"].includes(key)) continue;

      // 特殊处理 createTime 字段
      if (key === "createTime" && typeof value === "number") {
        data.push({
          name: "创建时间：",
          value: formatDate(value),
        });
        continue;
      }

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

      // 处理 status 字段
      if (key === "status") {
        const statusMap = {
          0: "创建仿真",
          1: "预处理",
          2: "分析中",
          10: "完成",
          20: "出错",
        };
        data.push({
          name: "仿真状态：",
          value: statusMap[value] || "未知",
        });
        continue;
      }

      // 处理 type 字段（仅在 areaType 不为 1 或 2 时显示）
      if (key === "type") {
        if (![1, 2].includes(areaType)) {
          const typeMap = {
            1: "预测模拟",
            2: "实时模拟",
            3: "历史模拟",
          };
          data.push({
            name: "模拟类别：",
            value: typeMap[value] || "未知",
          });
        }
        continue;
      }

      // 处理 result 字段
      if (key === "result") {
        data.push({
          name: "仿真结果：",
          value: value || "无",
        });
        continue;
      }

      // 处理 name 字段
      if (key === "name") {
        data.push({
          name: "仿真方案：",
          value: value || "无",
        });
        continue;
      }

      // 处理 data 字段
      if (key === "data" && typeof value === "string") {
        try {
          const parsedData = JSON.parse(value);

          // 处理 data.total 字段
          if (parsedData.total !== undefined) {
            data.push({
              name: "降雨总量（mm）：",
              value: parsedData.total || "无",
            });
          }

          // 处理 data.duration 字段
          if (parsedData.duration !== undefined) {
            data.push({
              name: "降雨时长（分钟）：",
              value: parsedData.duration || "无",
            });
          }

          // 处理 data.intensity 字段
          if (parsedData.intensity !== undefined) {
            data.push({
              name: "降雨强度（mm/小时）：",
              value: parsedData.intensity || "无",
            });
          }

          // 处理 data.prediction 字段
          if (parsedData.prediction !== undefined) {
            data.push({
              name: "降雨场次：",
              value: parsedData.prediction || "无",
            });
          }

          // 处理 data.model 字段
          if (parsedData.model !== undefined) {
            data.push({
              name: "降雨模式：",
              value: parsedData.model || "无",
            });
          }

          // 处理 data.history 字段
          if (parsedData.history !== undefined) {
            data.push({
              name: "历史降雨：",
              value: parsedData.history || "无",
            });
          }

          // 处理 data.gauges 字段
          if (parsedData.gauges !== undefined) {
            data.push({
              name: "雨量计列表：",
              value: Array.isArray(parsedData.gauges) ? parsedData.gauges.join(", ") : "无",
            });
          }
        } catch (e) {
          data.push({
            name: "数据：",
            value: value || "无",
          });
        }
        continue;
      }

      // 其他字段直接展示
      data.push({
        name: `${key}：`,
        value: value || "无",
      });
    }

    // 更新 formattedData
    formattedData.value = data;
  },
  { immediate: true } // 立即执行一次
);

// 格式化时间戳为日期
function formatDate(timestamp) {
  return dayjs(timestamp).format("YYYY-MM-DD HH:mm:ss");
}

// 定义任务状态的文本映射

 src/components/tools/Message.vue

@@ -1,6 +1,6 @@
<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">
@@ -14,61 +14,215 @@

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

// 定义 props
const props = defineProps({
  mesData: {
    type: Object,
    default: () => ({}), // 默认值是一个空对象
    default: () => ({}),
  },
});

// 定义 messageList
const messageList = ref([]);

// 监听 props.mesData 的变化
watch(
  () => props.mesData, // 监听 props.mesData
  () => props.mesData,
  (newMesData) => {
    if (newMesData) {
      messageList.value = [
        { name: "方案名称：", value: newMesData.name || "无" },
        { name: "模拟区域：", value: newMesData.area || "无" },
        { name: "降雨数据：", value: newMesData.fileName || "无" },
        { name: "预演开始时间：", value: newMesData.startTime || "无" },
        { name: "预演结束时间：", value: newMesData.endTime || "无" },
        { name: "创建时间：", value: newMesData.createTime || "无" },
      ];
    console.log(newMesData, '弹窗的数据');

    // 检查数据有效性
    if (!newMesData || typeof newMesData !== "object") {
      console.warn("Invalid mesData received:", newMesData);
      messageList.value = [];
      return;
    }

    // 将所有字段转换为列表形式
    const formattedData = [];

    // 提前解析 areaType，确保其存在性
    const areaType = newMesData.areaType !== undefined ? newMesData.areaType : null;

    for (const [key, value] of Object.entries(newMesData)) {
      // 跳过不需要的字段
      if (["geom", "id", "serviceName", "updateTime", "updateUser", "createUser", "bak"].includes(key)) continue;

      // 特殊处理 createTime 字段
      if (key === "createTime" && typeof value === "number") {
        formattedData.push({
          name: "创建时间：",
          value: formatDate(value),
        });
        continue;
      }

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

      // 处理 status 字段
      if (key === "status") {
          const statusMap = {
            0: "创建仿真",
            1: "预处理",
            2: "分析中",
            10: "完成",
            20: "出错",
          };
          formattedData.push({
          name: "仿真状态：",
          value: statusMap[value] || "未知",
        });
        continue;
      }

      // 处理 type 字段（仅在 areaType 不为 1 或 2 时显示）
      if (key === "type") {
        if (![1, 2].includes(areaType)) {
          const typeMap = {
            1: "预测模拟",
            2: "实时模拟",
            3: "历史模拟",
          };
          formattedData.push({
            name: "模拟类别：",
            value: typeMap[value] || "未知",
          });
        }
        continue;
      }

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

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

      // 处理 data 字段
      if (key === "data" && typeof value === "string") {
        try {
          const parsedData = JSON.parse(value);

          // 处理 data.total 字段
          if (parsedData.total !== undefined) {
            formattedData.push({
              name: "降雨总量（mm）：",
              value: parsedData.total || "无",
            });
          }

          // 处理 data.duration 字段
          if (parsedData.duration !== undefined) {
            formattedData.push({
              name: "降雨时长（分钟）：",
              value: parsedData.duration || "无",
            });
          }

          // 处理 data.intensity 字段
          if (parsedData.intensity !== undefined) {
            formattedData.push({
              name: "降雨强度（mm/小时）：",
              value: parsedData.intensity || "无",
            });
          }

          // 处理 data.prediction 字段
          if (parsedData.prediction !== undefined) {
            formattedData.push({
              name: "降雨场次：",
              value: parsedData.prediction || "无",
            });
          }

          // 处理 data.model 字段
          if (parsedData.model !== undefined) {
            formattedData.push({
              name: "降雨模式：",
              value: parsedData.model || "无",
            });
          }

          // 处理 data.history 字段
          if (parsedData.history !== undefined) {
            formattedData.push({
              name: "历史降雨：",
              value: parsedData.history || "无",
            });
          }

          // 处理 data.gauges 字段
          if (parsedData.gauges !== undefined) {
            formattedData.push({
              name: "雨量计列表：",
              value: Array.isArray(parsedData.gauges) ? parsedData.gauges.join(", ") : "无",
            });
          }
        } catch (e) {
          formattedData.push({
            name: "数据：",
            value: value || "无",
          });
        }
        continue;
      }

      // 其他字段直接展示
      formattedData.push({
        name: `${key}：`,
        value: value || "无",
      });
    }

    // 更新 messageList
    messageList.value = formattedData;
  },
  { 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>
.message {
  background: url("@/assets/img/tools/messagebg.png");
  width: 391px;
  height: 392px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 确保上下内容均匀分布 */
}

.message-top {
@@ -97,26 +251,38 @@

.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;
  // justify-content: space-between; /* 左右对齐 */
  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; /* 最大宽度限制 */
}

.message-btn {

 src/views/GisView.vue

@@ -23,7 +23,7 @@
  earthCtrl.showFPS = true
  earthCtrl.factory.createImageryLayer({
    sourceType: "mapworld",
    url: "https://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=3ec79cf7a9dcc6bb18411a5414b148cb",
    url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7eb11c0c503429878691ac917238f87f",
    layers: "tdtBasicLayer",
    style: "default",
    format: "image/jpeg",