历史模拟

guonan

2025-05-28 86f2633b4c70675bd90e79c9bdaf8a1eb8f95938

历史模拟

 src/components/monifangzhen/echartInfo.vue

@@ -350,6 +350,7 @@
            rainfallData.value = rainfallData.value.map((item) => ({
              ...item,
              intensity: item.intensity * 60,
              total: item.total * 60,
            }));
          }


 src/components/tools/LayerTree.vue

@@ -101,7 +101,9 @@
    // 初始化地形数据（使用await等待Promise解析）
    TerrainLayer = await earthCtrl.factory.createTerrainLayer({
      sourceType: "ctb",
      url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem",
      url: "http://106.120.22.26:9103/gisserver/ctsserver/sunhugoudem",
      // url: "https://tiles1.geovisearth.com/base/v1/terrain?token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
      requestVertexNormals: true,
    });

    treeMap.set("地形数据", TerrainLayer);
@@ -187,27 +189,27 @@
  if (label === "综合监测设备信息") {
    simStore.DeviceShowSwitch = checked;
    if (checked) {
    if (!treeMap.get("综合监测设备信息")) {
      if (!treeMap.get("综合监测设备信息")) {
      } else {
        toggleLayerVisible("综合监测设备信息", true);
      }
    } else {
      toggleLayerVisible("综合监测设备信息", true);
      toggleLayerVisible("综合监测设备信息", false);
    }
  } else {
    toggleLayerVisible("综合监测设备信息", false);
    return;
  }
  return;
}
if (label === "孙胡沟隐患点") {
  if (label === "孙胡沟隐患点") {
    simStore.DangerShowSwitch = checked;
    if (checked) {
    if (!treeMap.get("孙胡沟隐患点")) {
      if (!treeMap.get("孙胡沟隐患点")) {
      } else {
        toggleLayerVisible("孙胡沟隐患点", true);
      }
    } else {
      toggleLayerVisible("孙胡沟隐患点", true);
      toggleLayerVisible("孙胡沟隐患点", false);
    }
  } else {
    toggleLayerVisible("孙胡沟隐患点", false);
    return;
  }
  return;
}

  // 其他图层的处理逻辑
  const list = treeMap.get(label);

 src/components/tools/Message.vue

@@ -178,7 +178,7 @@
          };

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

 src/components/tools/TopographyDia.vue

@@ -46,7 +46,7 @@
}

/deep/ .el-input__wrapper {
  background-color: #fff !important;
  // background-color: #8b2f2f !important;
  border: none !important;
}
</style>

 src/store/simAPI.js

@@ -31,14 +31,23 @@
        }

        if (forms.type === 1 || forms.type === 3) {
            if (!forms.geom || !forms.rainfall || !forms.intensity || !forms.duration) {
            if (!forms.geom) {
                ElMessage.warning('请选择模拟区域')
                return false
            }

            if (!forms.rainfall || !forms.intensity || !forms.duration) {
                ElMessage.warning('请确保表单均已填写')
                return false
            }
        }
        if (forms.type === 2) {
            if (!forms.geom || !forms.gauges) {
                ElMessage.warning('请确保表单均已填写')
            if (!forms.geom) {
                ElMessage.warning('请选择模拟区域')
                return false
            }
            if (forms.gauges.length === 0) {
                ElMessage.warning('请选择雨量计设备')
                return false
            }
        }
@@ -80,7 +89,7 @@
                    intensityUnit: forms.intensityUnit || 'mm/15min'
                })
            }
            console.log(params, '保存方案参数')
            // console.log(params, '保存方案参数')
            const res = await createSimData(params)
            ElMessage.success('方案保存成功')
            return res

 src/views/left/CitySim.vue

@@ -10,7 +10,11 @@
    <div class="left-top" v-if="simStore.selectTab == '重点区域仿真'">
      重点区域仿真（10m精度）
    </div>
    <div class="forms">
    <div class="left-top" v-if="simStore.selectTab == '重点沟仿真'">
      历史模拟
    </div>

    <div class="forms" :class="{ 'no-background': !showBackground }">
      <el-form
        :rules="rules"
        :model="forms"
@@ -106,7 +110,7 @@
            v-if="forms.fileList.length !== 0"
            v-model="forms.hours"
            type="datetime"
            placeholder="Select date and time"
            placeholder="请选择开始时间"
          />
          <el-date-picker
            v-if="forms.fileList.length == 0"
@@ -169,6 +173,14 @@

const options = reactive([]);

// 历史模拟选中区域
const props = defineProps({
  selectedArea: {
    type: Object,
    required: true,
  },
});

const intensityOptions = ref([
  { value: "mm/h", label: "mm/h" },
  { value: "mm/5min", label: "mm/5min" },
@@ -193,6 +205,8 @@
  fetchRegionData(1);
});

const showBackground = ref(true); // 默认显示背景图

// 监听 selectTab 的变化
watch(selectTab, (newVal) => {
  let type;
@@ -203,10 +217,21 @@
    case "重点区域仿真":
      type = 2;
      break;
    case "重点沟仿真":
      type = 3;
      break;
    default:
      type = 1; // 默认值
  }
  // 根据 type 设置是否显示背景图（因为历史模拟中表单带了背景图）
  if (type == 3) {
    showBackground.value = false;
  } else {
    showBackground.value = true;
  }
  fetchRegionData(type);
  // Tab切换的时候清空表单
  resetForm();
});

// 注入父组件提供的方法
@@ -245,6 +270,9 @@

const addSimCheme = async () => {
  try {
    if (selectTab.value == "重点沟仿真") {
      forms.geom = props.selectedArea;
    }
    await simStore.addSimCheme(forms);
    resetForm(); // 只有在保存成功后才重置表单
    EventBus.emit("close-selectArea");
@@ -471,6 +499,9 @@
async function startPlay() {
  try {
    // 保存方案
    if (selectTab.value == "重点沟仿真") {
      forms.geom = props.selectedArea;
    }
    const res = await simStore.addSimCheme(forms);
    const schemeId = res.data?.data?.id;

@@ -508,6 +539,12 @@
  height: 100%;
  padding: 10px 10px 0px 0px;
  box-sizing: border-box;
  transition: background 0.3s ease; // 可选过渡效果
}

.forms.no-background {
  margin-top: 0px;
  background-image: none;
}
/deep/ .el-input-group__append,
.el-input-group__prepend {

 src/views/left/KGSim.vue

@@ -36,7 +36,8 @@
        <el-radio label="预测模拟">预测模拟</el-radio>
      </el-radio-group>
      <div v-if="selectedSimulation === '历史模拟'">
        <HistorySimulation :selectedArea="selectedArea" />
        <!-- <HistorySimulation :selectedArea="selectedArea" /> -->
        <CitySim :selectedArea="selectedArea" />
      </div>
      <div v-if="selectedSimulation === '实时模拟'">
        <RealTimeSimulation :selectedArea="selectedArea" />
@@ -51,6 +52,7 @@
<script setup>
import { ref, computed, onMounted, reactive } from "vue";
import HistorySimulation from "./KGSimOption/HistorySimulation.vue";
import CitySim from './CitySim.vue'
import PredictiveSimulation from "./KGSimOption/PredictiveSimulation.vue";
import RealTimeSimulation from "./KGSimOption/RealTimeSimulation.vue";
import { getRegionData } from "@/api/trApi";

 src/views/left/KGSimOption/HistorySimulation.vue

@@ -202,7 +202,6 @@
    });
  } catch (error) {
    ElMessage.error("启动模拟失败，请稍后再试");
    console.log(error, "errorerrorerror");
  }
}
</script>

 src/views/left/KGSimOption/PredictiveSimulation.vue

@@ -209,12 +209,12 @@
};
// 降雨场次选择
const rainFallChange = (val) => {
  console.log(val, "val");
  // console.log(val, "val");
  const decimalHours = (val.rainfallDuration.match(/(\d+)时(\d+)分/) || [])
    .slice(1)
    .reduce((acc, curr, i) => acc + parseInt(curr, 10) / (i === 0 ? 1 : 60), 0)
    .toFixed(1);
  console.log(parseFloat(decimalHours)); // 输出: 2.6
  // console.log(parseFloat(decimalHours)); // 输出: 2.6
  forms.duration = decimalHours;
  forms.intensity = val.rainIntensityHour;
  forms.rainfall = val.rainfallTotalValue;