wangjuncheng
2025-07-08 66032f62b4a3b6a649fc02b392ae41278399b58b
src/views/left/CitySim.vue
@@ -1,10 +1,6 @@
<template>
  <div style="width: 100%; height: 100%">
    <div
      class="left-top"
      v-if="simStore.selectTab == '行政区划仿真'"
      style="margin-top: 0px"
    >
    <div class="left-top" v-if="simStore.selectTab == '行政区划仿真'" style="margin-top: 0px">
      行政区划仿真(30m精度)
    </div>
    <div class="left-top" v-if="simStore.selectTab == '重点区域仿真'">
@@ -15,132 +11,56 @@
    </div>
    <div class="forms" :class="{ 'no-background': !showBackground }">
      <el-form
        :rules="rules"
        :model="forms"
        label-width="auto"
        style="max-width: 600px"
      >
      <el-form :rules="rules" :model="forms" label-width="auto" style="max-width: 600px">
        <el-form-item label="方案名称:">
          <el-input
            v-model="forms.name"
            style="max-width: 600px"
            placeholder="请输入方案名称"
          >
          <el-input v-model="forms.name" style="max-width: 600px" placeholder="请输入方案名称">
          </el-input>
        </el-form-item>
        <el-form-item label="上传参数">
          <el-upload
            v-model:file-list="forms.fileList"
            class="upload-demo"
            :auto-upload="false"
            :multiple="false"
            :on-change="handleFileChange"
            :limit="1"
            :on-exceed="handleExceed"
            :before-upload="beforeUpload"
            accept=".xlsx,.xls,.csv"
          >
          <el-upload :on-remove="handleRemove" v-model:file-list="forms.fileList" class="upload-demo"
            :auto-upload="false" :multiple="false" :on-change="handleFileChange" :limit="1" :on-exceed="handleExceed"
            :before-upload="beforeUpload" accept=".xlsx,.xls,.csv">
            <el-button type="primary">点击上传降雨数据</el-button>
            <template #append>mm/h</template>
          </el-upload>
        </el-form-item>
        <el-form-item label="雨强单位" v-if="forms.fileList.length !== 0">
          <el-select
            v-model="forms.intensityUnit"
            placeholder="Select"
            style="max-width: 600px"
          >
            <el-option
              v-for="item in intensityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          <el-select v-model="forms.intensityUnit" placeholder="请选择雨强单位" style="max-width: 600px"
            :disabled="!!forms.intensityUnit">
            <el-option v-for="item in intensityOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="行政区域:"
          v-if="simStore.selectTab == '行政区划仿真'"
        >
          <el-select
            @change="changeGeom"
            v-model="forms.geom"
            placeholder="请选择模拟区域"
            style="max-width: 600px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
        <el-form-item label="行政区域:" v-if="simStore.selectTab == '行政区划仿真'">
          <el-select @change="changeGeom" v-model="forms.geom" placeholder="请选择模拟区域" style="max-width: 600px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="重点区域:"
          v-if="simStore.selectTab == '重点区域仿真'"
        >
          <el-select
            @change="changeGeom"
            v-model="forms.geom"
            placeholder="请选择模拟区域"
            style="max-width: 600px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
        <el-form-item label="重点区域:" v-if="simStore.selectTab == '重点区域仿真'">
          <el-select @change="changeGeom" v-model="forms.geom" placeholder="请选择模拟区域" style="max-width: 600px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="降雨量:">
          <el-input
            v-model="forms.rainfall"
            style="max-width: 600px"
            placeholder="请输入降雨量"
          >
          <el-input v-model="forms.rainfall" style="max-width: 600px" placeholder="请输入降雨量">
            <template #append>mm</template>
          </el-input>
        </el-form-item>
        <el-form-item label="选择时间:">
          <el-date-picker
            v-if="forms.fileList.length !== 0"
            v-model="forms.hours"
            type="datetime"
            placeholder="请选择开始时间"
          />
          <el-date-picker
            v-if="forms.fileList.length == 0"
            v-model="forms.hours"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
            @change="change"
          />
          <el-date-picker v-if="forms.fileList.length !== 0" v-model="forms.hours" type="datetime"
            placeholder="请选择开始时间" />
          <el-date-picker v-if="forms.fileList.length == 0" v-model="forms.hours" type="datetimerange"
            start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss" @change="change" />
        </el-form-item>
        <el-form-item label="降雨时长:">
          <el-input
            disabled
            v-model="forms.duration"
            style="max-width: 600px"
            placeholder="请输入降雨时长"
          >
          <el-input disabled v-model="forms.duration" style="max-width: 600px" placeholder="请输入降雨时长">
            <template #append>h</template>
          </el-input>
        </el-form-item>
        <el-form-item label="降雨强度:">
          <el-input
            v-model="forms.intensity"
            style="max-width: 600px"
            placeholder="请输入降雨强度"
          >
          <el-input v-model="forms.intensity" style="max-width: 600px" placeholder="请输入降雨强度">
            <template #append>mm/h</template>
          </el-input>
        </el-form-item>
@@ -184,6 +104,7 @@
const intensityOptions = ref([
  { value: "mm/h", label: "mm/h" },
  { value: "mm/5min", label: "mm/5min" },
  { value: "mm/min", label: "mm/min" },
]);
// 定义一个方法,用于根据 type 获取区域数据
@@ -274,9 +195,11 @@
      forms.geom = props.selectedArea;
    }
    await simStore.addSimCheme(forms);
    // 打印拦挡坝所需要的数据
    // printDamEntities();
    resetForm(); // 只有在保存成功后才重置表单
    EventBus.emit("close-selectArea");
  } catch (error) {}
  } catch (error) { }
};
// 重置表单
@@ -327,7 +250,6 @@
// 解析Excel文件
const parseExcel = (data) => {
  const workbook = XLSX.read(data, { type: "array" });
  console.log(workbook, "wokr");
  const firstSheetName = workbook.SheetNames[0];
  const worksheet = workbook.Sheets[firstSheetName];
  const jsonData = XLSX.utils.sheet_to_json(worksheet, {
@@ -336,14 +258,6 @@
  });
  processData(jsonData);
};
const transformKeys = (data) => {
  return data.map((item) => ({
    time: item["时间"], // "时间" → "time"
    intensity: parseFloat(item["小时雨强mm/h"]), // 转为浮点数
    total: parseFloat(item["累计雨量"]), // 转为浮点数
  }));
};
/**
@@ -378,58 +292,249 @@
  if (!header) return "";
  // 直接匹配 "mm/h"、"m/s" 等常见单位
  const unitRegex = /(mm\/h|m\/s|mm|℃|%|hPa|km\/h)/; // 根据需要扩展
  const unitRegex = /(mm\/h|mm\/1min|mm\/5min|mm\/15min)/; // 根据需要扩展
  const match = header.match(unitRegex);
  return match ? match[0] : "";
};
// 处理数据
const transformKeys = (data) => {
  return data.map((item) => ({
    time: item["时间"], // "时间" → "time"
    intensity: parseFloat(item["小时雨强"]), // 转为浮点数
    total: parseFloat(item["累计雨量"]), // 转为浮点数
  }));
};
// 可配置的字段名匹配规则
const COLUMN_MATCH_RULES = {
  time: ["时间", "time", "datetime", "date"],
  intensity: [
    "雨强",
    "小时雨强",
    "rain_intensity",
    "rain_rate",
    "hour_rain",
    "降雨强度",
  ],
  totalRainfall: [
    "累计雨量",
    "总雨量",
    "total_rain",
    "cumulative_rainfall",
    "降雨总量",
  ],
};
/**
 * 自动匹配字段名
 * @param {Object} headers - 表头对象(第一行)
 * @returns {{time: string, intensity: string, totalRainfall: string}}
 */
function matchColumns(headers) {
  const matched = {
    time: null,
    intensity: null,
    totalRainfall: null,
  };
  for (const header of Object.keys(headers)) {
    const cleanHeader = header.trim();
    if (
      !matched.time &&
      COLUMN_MATCH_RULES.time.some((k) => cleanHeader.includes(k))
    ) {
      matched.time = header;
    }
    if (
      !matched.intensity &&
      COLUMN_MATCH_RULES.intensity.some((k) => cleanHeader.includes(k))
    ) {
      matched.intensity = header;
    }
    if (
      !matched.totalRainfall &&
      COLUMN_MATCH_RULES.totalRainfall.some((k) => cleanHeader.includes(k))
    ) {
      matched.totalRainfall = header;
    }
  }
  return matched;
}
/**
 * 数据处理主函数
 * @param {Array} data - 解析后的原始数据数组,每个元素是一个对象
 */
const processData = (data) => {
  // 1. 检查数据是否为空
  // 检查是否为空数据
  if (data.length === 0) {
    ElMessage.warning("文件内容为空!");
    return;
  }
  // 2. 获取表头(第一列是时间列)
  const tableColumns = Object.keys(data[0]);
  const timeColumn = tableColumns[0]; // 假设第一列是时间
  // 匹配列名(例如“时间”、“小时雨强”)
  const columns = matchColumns(data[0]);
  // 3. 校验时间列是否按升序排列
  if (!isTimeColumnSorted(data, timeColumn)) {
    ElMessage.error("时间列必须按升序排列!");
  // 校验必要字段是否存在
  if (!columns.time) {
    ElMessage.error(
      "未找到有效的时间列,请检查列名是否为“时间”或其他支持的格式"
    );
    forms.fileList = [];
    return; // 终止处理
    return;
  }
  const intensityColumn = tableColumns[1]; // 雨强列(如 "小时雨强(mm/h)")
  console.log(intensityColumn, "intensityColumnintensityColumnintensityColumn");
  // 3. 提取第二列的单位(如 "(mm/h)" → "mm/h")
  const intensityUnit = extractUnitFromHeader(intensityColumn);
  forms.intensityUnit = intensityUnit; // 存储单位(可选)
  if (!columns.intensity) {
    ElMessage.error(
      "未找到有效的雨强列,请检查列名是否为“小时雨强”或其他支持的格式"
    );
    forms.fileList = [];
    return;
  }
  // 4. 如果校验通过,继续处理数据
  forms.rainFallList = transformKeys(data);
  console.log(forms.rainFallList, "data");
  // 校验时间列是否升序排列
  if (!isTimeColumnSorted(data, columns.time)) {
    ElMessage.error("时间列必须按升序排列!");
    forms.fileList = [];
    return;
  }
  // 5. 计算降雨时长、最大雨强、累计雨量(原逻辑)
  const firstTime = parseDateTime(data[0][timeColumn]);
  const lastTime = parseDateTime(data[data.length - 1][timeColumn]);
  const timeDuration = Math.floor((lastTime - firstTime) / 1000);
  forms.duration = (timeDuration / 3600).toFixed(2);
  // 提取单位(如 mm/h),若没有则设为空字符串
  forms.intensityUnit = extractUnitFromHeader(columns.intensity) || "";
  const maxValue = Math.max(
    ...data.map((row) => {
      const value = parseFloat(row[tableColumns[1]]);
      return isNaN(value) ? -Infinity : value;
    })
  // 将原始数据转换为统一结构的对象数组
  const rawRainFallList = data.map((row) => ({
    time: row[columns.time],
    intensity: parseFloat(row[columns.intensity]),
    total: columns.totalRainfall
      ? parseFloat(row[columns.totalRainfall])
      : undefined,
  }));
  // 更新 forms.rainFallList,可用于图表显示等用途
  forms.rainFallList = rawRainFallList;
  // 判断是否为整小时数据(即相邻时间间隔是否为整小时)
  const isHourlyData = checkIfHourlyData(rawRainFallList);
  let hourlyRainfallList = [];
  if (!isHourlyData) {
    // 如果不是整小时数据,按小时进行聚合处理
    hourlyRainfallList = aggregateToHourlyRainfall(rawRainFallList);
    console.log(hourlyRainfallList, "修正后的小时雨强");
  } else {
    // 如果是整小时数据,直接使用原始雨强值
    hourlyRainfallList = rawRainFallList.map((item) => ({
      time: item.time,
      intensity: item.intensity,
    }));
  }
  // 计算起始时间和结束时间(毫秒数)
  const firstTime = parseDateTime(hourlyRainfallList[0]?.time);
  const lastTime = parseDateTime(
    hourlyRainfallList[hourlyRainfallList.length - 1]?.time
  );
  // 计算持续时间(单位:小时)
  const durationSeconds = Math.floor((lastTime - firstTime) / 1000);
  forms.duration = (durationSeconds / 3600).toFixed(2); // 单位:小时
  // 找出最大小时雨强
  const maxIntensity = Math.max(
    ...hourlyRainfallList.map((item) => item.intensity).filter((v) => !isNaN(v))
  ).toFixed(2);
  forms.intensity = maxValue;
  forms.intensity = maxIntensity;
  const lastValue = data[data.length - 1][tableColumns[2]];
  forms.rainfall = lastValue;
  // 若有总降雨量列,取出最后一个值作为总降雨量
  if (columns.totalRainfall) {
    const lastTotal = parseFloat(data[data.length - 1][columns.totalRainfall]);
    forms.rainfall = isNaN(lastTotal) ? 0 : lastTotal.toFixed(2);
  } else {
    forms.rainfall = 0;
  }
};
/**
 * 检查数据是否为整小时记录
 * @param {Array} rainList - 原始降雨数据列表,每个元素包含 time 和 intensity
 * @returns {boolean} - 是否为整小时数据
 */
function checkIfHourlyData(rainList) {
  if (rainList.length < 2) return true; // 只有一个点,默认视为整小时数据
  for (let i = 1; i < rainList.length; i++) {
    // 解析两个相邻时间点
    const time1 = parseDateTime(rainList[i - 1].time);
    const time2 = parseDateTime(rainList[i].time);
    // 计算时间差(分钟)
    const diffMinutes = Math.abs(time2 - time1) / (1000 * 60);
    // 如果时间差不是整小时(不能被60整除),则不是整小时数据
    if (diffMinutes % 60 !== 0) {
      return false;
    }
  }
  return true;
}
/**
 * 将任意时间粒度的雨强数据,按小时聚合为“小时雨强”
 * @param {Array} rainList - 原始数据列表,每个元素包含 time 和 intensity
 * @returns {Array} - 按小时分组的聚合结果
 */
function aggregateToHourlyRainfall(rainList) {
  const grouped = {}; // 用于临时存储每个小时的数据
  for (const item of rainList) {
    // 解析时间字符串为时间戳
    const timestamp = parseDateTime(item.time);
    // 如果解析失败,跳过当前项
    if (isNaN(timestamp)) {
      console.warn("无效的时间格式,已跳过", item.time);
      continue;
    }
    // 将时间戳转为 Date 对象以便操作日期
    const dt = new Date(timestamp);
    // 构造年月日+小时键(如:"2024-08-25 14")
    const year = String(dt.getFullYear()).padStart(4, "0");
    const month = String(dt.getMonth() + 1).padStart(2, "0"); // 注意月份从0开始
    const date = String(dt.getDate()).padStart(2, "0");
    const hour = String(dt.getHours()).padStart(2, "0");
    const hourKey = `${year}-${month}-${date} ${hour}`;
    // 初始化该小时的聚合对象
    if (!grouped[hourKey]) {
      grouped[hourKey] = {
        time: `${hourKey}:00:00`, // 标准化为整点时间
        intensity: 0,
      };
    }
    // 累加该小时内所有雨强值
    grouped[hourKey].intensity += item.intensity;
  }
  // 将聚合结果转为数组并保留两位小数
  const result = Object.values(grouped).map((item) => ({
    time: item.time,
    intensity: Number(item.intensity.toFixed(2)),
  }));
  return result;
}
/**
 * 解析日期时间字符串或Excel数字日期,返回时间戳(毫秒数)
 * @param {string|number} dateString - 日期字符串或Excel数字日期
@@ -485,6 +590,16 @@
  ElMessage.warning("每次只能上传一个文件");
};
const handleRemove = () => {
  forms.rainfall = null;
  forms.duration = null;
  forms.intensity = null;
  forms.fileList = [];
  forms.rainFallList = [];
  forms.hours = null;
  forms.intensityUnit = "";
};
const beforeUpload = (file) => {
  const isExcel = file.name.endsWith(".xlsx") || file.name.endsWith(".xls");
  const isCSV = file.name.endsWith(".csv");
@@ -512,22 +627,69 @@
    // 调用求解器
    const simStartRes = await getSimStart(schemeId);
    console.log(simStartRes, "getSimStart 返回结果");
    // 关闭选择区域窗口、初始化视图并开始模拟
    EventBus.emit("close-selectArea");
    simStore.shouldPoll = true;
    // 暂时不在此处开始模拟,模拟都在方案列表中进行模拟
    // initeWaterPrimitiveView();
    // startSimulate();
    ElMessage.warning({
      message: "请返回方案列表开始模拟!",
      message: "请返回方案列表等待模拟结果!",
      duration: 10000, // 提示框显示时长,单位为毫秒,默认是3000毫秒
    });
  } catch (error) {
    console.error("启动模拟过程中发生错误:", error);
    // ElMessage.error("启动模拟失败,请稍后再试");
  }
}
// ========================================拦挡坝===============================================================
// 获取拦挡坝数据
function printDamEntities() {
  const entities = viewer.entities.values;
  const damDataList = [];
  for (let i = 0; i < entities.length; i++) {
    const entity = entities[i];
    if (entity.name && (entity.name === '栏档坝1' || entity.name === '栏档坝2')) {
      damDataList.push({
        name: entity.name,
        position: entity.position?._value,
        heading: entity.heading?._value ?? entity.heading,
        pitch: entity.pitch?._value ?? entity.pitch,
        roll: entity.roll?._value ?? entity.roll,
        modelScale: entity.model?.scale?._value ?? entity.model?.scale
      });
    }
  }
  if (damDataList.length > 0) {
    console.log("【栏档坝实体数据列表】:", damDataList);
    deleteDamEntitiesAfterDelay();
  } else {
    console.log("未找到任何名为 '栏档坝1' 或 '栏档坝2' 的实体");
  }
}
// 保存方案后定时清除新建的拦挡坝数据
function deleteDamEntitiesAfterDelay() {
  setTimeout(() => {
    const entities = Array.from(viewer.entities.values);
    const damsToDelete = entities.filter(
      entity => entity.name === '栏档坝1' || entity.name === '栏档坝2'
    );
    damsToDelete.forEach(entity => {
      viewer.entities.remove(entity);
    });
    if (damsToDelete.length > 0) {
      console.log(`【已删除】共 ${damsToDelete.length} 个栏档坝实体`);
    } else {
      console.log("未找到任何可删除的栏档坝实体");
    }
  }, 5000);
}
</script>
@@ -546,12 +708,18 @@
  margin-top: 0px;
  background-image: none;
}
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #084b42;
  color: #fff;
}
/deep/ .el-form-item__label {
  color: #61f7d4 !important;
}
/deep/ .el-upload-list__item-file-name {
  white-space: normal;
}
</style>