| | |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="降雨数据:" v-show="forms.prediction == '降雨场次'"> |
| | | <el-form-item label="降雨年份:" v-show="forms.prediction == '降雨场次'"> |
| | | <el-select |
| | | v-model="forms.showRainYears" |
| | | placeholder="请选择" |
| | | popper-class="mySelectStyle" |
| | | @change="changeYear" |
| | | > |
| | | <el-option |
| | | v-for="item in rainYears" |
| | | :key="item.id" |
| | | :label="item.label" |
| | | :value="item.label" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="降雨数据:" v-show="showSelect"> |
| | | <el-select |
| | | @change="rainFallChange" |
| | | v-model="forms.showRainFall" |
| | | placeholder="请选择" |
| | | popper-class="mySelectStyle" |
| | |
| | | v-for="item in rainFall" |
| | | :key="item.rainfallId" |
| | | :label="item.rainfallName" |
| | | :value="item.rainfallName" |
| | | :value="item" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="方案名称:"> |
| | | <el-input |
| | | v-model="forms.schemeName" |
| | | v-model="forms.name" |
| | | type="text" |
| | | placeholder="请输入" |
| | | ></el-input> |
| | |
| | | > |
| | | </el-form-item> |
| | | <el-form-item label="降雨强度:"> |
| | | <el-input |
| | | v-model="forms.rainfallIntensity" |
| | | type="number" |
| | | placeholder="请输入" |
| | | > |
| | | <el-input v-model="forms.intensity" type="number" placeholder="请输入"> |
| | | <template #append>mm/h</template></el-input |
| | | > |
| | | </el-form-item> |
| | |
| | | import { initeWaterPrimitiveView } from "@/utils/water"; |
| | | import { useSimStore } from "@/store/simulation.js"; // 引入 Store |
| | | import { SimAPIStore } from "@/store/simAPI"; |
| | | import { getRainfallData } from "@/api/hpApi"; |
| | | import { getRainfallDataYears } from "@/api/hpApi"; |
| | | import { EventBus } from "@/eventBus"; // 引入事件总线 |
| | | |
| | | |
| | | onMounted(() => { |
| | | getRain(); |
| | | }); |
| | | onMounted(() => {}); |
| | | |
| | | // 获取 Store 实例 |
| | | const simStore = SimAPIStore(); |
| | | |
| | | // 注入模拟操作方法 |
| | | const { startSimulate, endSimulate } = inject("simulateActions"); |
| | | |
| | | function startPlay() { |
| | | console.log("开始模拟按钮被点击"); |
| | | console.log("当前选中的区域:", props.selectedArea); |
| | | initeWaterPrimitiveView(); |
| | | startSimulate(); |
| | | } |
| | | |
| | | // 定义 Props |
| | | const props = defineProps({ |
| | |
| | | |
| | | const forms = reactive({ |
| | | rainfall: 50, |
| | | schemeName: "", |
| | | rainfallIntensity: 70, |
| | | name: "", |
| | | intensity: 70, |
| | | duration: null, |
| | | prediction: "降雨场次", |
| | | mode: "正态分布", |
| | | showRainFall: "", |
| | | hours: null, |
| | | type: 1, |
| | | geom: null, // 先设置为 null 或者其他默认值, |
| | | showRainYears: "", |
| | | }); |
| | | |
| | | // 降雨场次选择 |
| | | const rainFall = ref({}); |
| | | // 降雨年份选择 |
| | | const rainYears = [ |
| | | { |
| | | label: "2024", |
| | | value: "2024", |
| | | id: 1, |
| | | }, |
| | | { |
| | | label: "2025", |
| | | value: "2025", |
| | | id: 2, |
| | | }, |
| | | ]; |
| | | |
| | | const getRain = () => { |
| | | getRainfallData().then((res) => { |
| | | rainFall.value = res.data.pageData; |
| | | console.log(res.data, "res"); |
| | | }); |
| | | const showSelect = ref(false); |
| | | const changeYear = (val) => { |
| | | if (val) { |
| | | showSelect.value = true; |
| | | } |
| | | if (val == "2024") { |
| | | getRainfallDataYears(2024).then((res) => { |
| | | rainFall.value = res.data.pageData; |
| | | // console.log(rainFall.value, "2024"); |
| | | }); |
| | | } else if (val == "2025") { |
| | | getRainfallDataYears(2025).then((res) => { |
| | | rainFall.value = res.data.pageData; |
| | | // console.log(rainFall.value, "2025"); |
| | | }); |
| | | } |
| | | }; |
| | | // 降雨场次选择 |
| | | const rainFallChange = (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 |
| | | forms.duration = decimalHours; |
| | | forms.intensity = val.rainIntensityHour; |
| | | forms.rainfall = val.rainfallTotalValue; |
| | | }; |
| | | |
| | | // 切换详情显示 |
| | |
| | | forms.duration = calculateHoursDifference(val); |
| | | }; |
| | | |
| | | const resetForm = () => { |
| | | forms.rainfall = 50; |
| | | forms.name = ""; |
| | | forms.intensity = 70; |
| | | forms.duration = null; |
| | | forms.prediction = "降雨场次"; |
| | | forms.mode = "正态分布"; |
| | | forms.showRainFall = ""; |
| | | forms.hours = null; |
| | | forms.type = 1; |
| | | forms.geom = null; // 先设置为 null 或者其他默认值, |
| | | }; |
| | | |
| | | // 打开保存方案对话框 |
| | | const openSaveDialog = async () => { |
| | | const params = { |
| | | name: forms.schemeName, |
| | | geom: props.selectedArea, |
| | | type: 1, |
| | | rainfall: forms.rainfall, |
| | | duration: forms.duration, |
| | | intensity: forms.rainfallIntensity, |
| | | mode: forms.mode, |
| | | prediction: forms.prediction, |
| | | }; |
| | | await simStore.addSimCheme(params); |
| | | EventBus.emit("close-selectArea"); |
| | | |
| | | // 在 setup 内部更新 geom 的值 |
| | | try { |
| | | forms.geom = props.selectedArea; |
| | | await simStore.addSimCheme(forms); |
| | | resetForm(); |
| | | EventBus.emit("close-selectArea"); |
| | | } catch (err) {} |
| | | }; |
| | | |
| | | // 注入模拟操作方法 |
| | | const { startSimulate, endSimulate } = inject("simulateActions"); |
| | | |
| | | // 开始模拟 |
| | | async function startPlay() { |
| | | try { |
| | | formData.geom = props.selectedArea; |
| | | // 保存方案 |
| | | const res = await simStore.addSimCheme(forms); |
| | | const schemeId = res.data?.data?.id; |
| | | |
| | | if (!schemeId) { |
| | | ElMessage.error("方案保存失败,未获取到有效 ID"); |
| | | return; |
| | | } |
| | | |
| | | // 调用求解器 |
| | | const simStartRes = await getSimStart(schemeId); |
| | | console.log(simStartRes, "getSimStart 返回结果"); |
| | | |
| | | // 关闭选择区域窗口、初始化视图并开始模拟 |
| | | EventBus.emit("close-selectArea"); |
| | | // 暂时不在此处开始模拟,模拟都在方案列表中进行模拟 |
| | | // initeWaterPrimitiveView(); |
| | | // startSimulate(); |
| | | |
| | | ElMessage.warning({ |
| | | message: "请返回方案列表开始模拟!", |
| | | duration: 10000, // 提示框显示时长,单位为毫秒,默认是3000毫秒 |
| | | }); |
| | | |
| | | } catch (error) { |
| | | ElMessage.error("启动模拟失败,请稍后再试"); |
| | | } |
| | | } |
| | | |
| | | // 打开方案 |
| | | const openPlan = () => { |
| | | // getRain(); |
| | | console.log("打开方案按钮被点击"); |
| | | }; |
| | | </script> |