From 75134e86655dedcb2ad574146dadaad1a24f6f01 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期二, 13 五月 2025 14:09:24 +0800
Subject: [PATCH] 修改很多很多很多
---
src/views/left/KGSimOption/HistorySimulation.vue | 311 +++++++++++++++++++++------------------------------
1 files changed, 130 insertions(+), 181 deletions(-)
diff --git a/src/views/left/KGSimOption/HistorySimulation.vue b/src/views/left/KGSimOption/HistorySimulation.vue
index 0b05ed8..c96aee6 100644
--- a/src/views/left/KGSimOption/HistorySimulation.vue
+++ b/src/views/left/KGSimOption/HistorySimulation.vue
@@ -1,17 +1,22 @@
<template>
- <div class="history-simulation">
- <div class="left-top">
- <span>鍘嗗彶妯℃嫙</span>
- <span class="clickable-text" @click="toggleDetails">{{
- isCollapsed ? "灞曞紑" : "鏀惰捣"
- }}</span>
- </div>
- <div class="details" :class="{ hidden: isCollapsed }">
- <div class="input-group">
- <div class="input-item">
- <label>鍘嗗彶闆ㄦ儏:</label>
+ <div class="left-top">
+ <span>鍘嗗彶妯℃嫙</span>
+ <span class="clickable-text" @click="toggleDetails">{{
+ isCollapsed ? "灞曞紑" : "鏀惰捣"
+ }}</span>
+ </div>
+ <el-form
+ ref="historySimForm"
+ class="history-simulation"
+ :model="formData"
+ label-width="auto"
+ style="max-width: 600px"
+ >
+ <el-collapse-transition style="margin-top: 10px">
+ <div v-show="!isCollapsed">
+ <el-form-item label="鍘嗗彶闆ㄦ儏:" prop="history">
<el-select
- v-model="rainfallHistory"
+ v-model="formData.history"
placeholder="璇烽�夋嫨"
popper-class="mySelectStyle"
>
@@ -20,118 +25,77 @@
:key="item.id"
:label="item.name"
:value="item.name"
- ></el-option>
+ />
</el-select>
- </div>
- </div>
- <div class="input-group">
- <div class="input-item">
- <label>鏂规鍚嶇О:</label>
+ </el-form-item>
+
+ <el-form-item label="鏂规鍚嶇О:" prop="name">
+ <el-input v-model="formData.name" type="text" placeholder="璇疯緭鍏�" />
+ </el-form-item>
+
+ <el-form-item label="闄嶉洦鎬婚噺:" prop="rainfall">
<el-input
- v-model="schemeName"
- type="text"
- placeholder="璇疯緭鍏�"
- ></el-input>
- </div>
- <div class="input-item">
- <label>闄嶉洦鎬婚噺:</label>
- <el-input
- v-model="totalRainfall"
+ v-model="formData.rainfall"
type="number"
placeholder="璇疯緭鍏�"
- ></el-input>
- <span>mm</span>
- </div>
- <div class="input-item">
- <label>闄嶉洦寮哄害:</label>
+ >
+ <template #append>mm</template>
+ </el-input>
+ </el-form-item>
+
+ <el-form-item label="闄嶉洦寮哄害:" prop="intensity">
<el-input
- v-model="rainfallIntensity"
+ v-model="formData.intensity"
type="number"
placeholder="璇疯緭鍏�"
- ></el-input>
- <span>mm/h</span>
- </div>
- <div class="input-item">
- <label>閫夋嫨鏃堕棿:</label>
+ >
+ <template #append>mm/h</template>
+ </el-input>
+ </el-form-item>
+
+ <el-form-item label="閫夋嫨鏃堕棿:" prop="hours">
<el-date-picker
- v-model="hours"
+ v-model="formData.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"
+ @change="handleTimeChange"
/>
- <span>h</span>
- </div>
- <div class="input-item">
- <label>闄嶉洦鏃堕暱:</label>
- <el-input
- disabled
- v-model="rainfallDuration"
- type="number"
- placeholder="璇疯緭鍏�"
- ></el-input>
- <span>h</span>
- </div>
- </div>
- <!-- <div>
- <label>浠跨湡鍙傛暟:</label>
- <div style="width: 100%; height: 60px; background-color: #fff"></div>
- </div> -->
- </div>
- <div class="buttons">
- <el-button type="primary" @click="openSaveDialog">淇濆瓨鏂规</el-button>
- <el-button type="success" @click="startPlay">寮�濮嬫ā鎷�</el-button>
- </div>
+ </el-form-item>
- <!-- 淇濆瓨鏂规瀵硅瘽妗� -->
- <!-- <el-dialog
- v-model="saveDialogVisible"
- title="淇濆瓨鏂规"
- width="50%"
- :before-close="handleClose"
- custom-class="custom-dialog"
- >
- <div class="dialog-content">
- <p><strong>鏂规鍚嶇О锛�</strong>{{ schemeName }}</p>
- <p><strong>鎵�閫夐噸鐐规矡锛�</strong>{{ props.selectedArea }}</p>
- <p><strong>妯℃嫙绫诲瀷锛�</strong>鍘嗗彶妯℃嫙</p>
- <p><strong>鍘嗗彶闆ㄦ儏锛�</strong>{{ selectedRainfallName }}</p>
- <p><strong>闄嶉洦鎬婚噺锛�</strong>{{ totalRainfall }} mm</p>
- <p><strong>闄嶉洦寮哄害锛�</strong>{{ rainfallIntensity }} mm/h</p>
- <p><strong>闄嶉洦鏃堕暱锛�</strong>{{ rainfallDuration }} h</p>
+ <el-form-item label="闄嶉洦鏃堕暱:" prop="duration">
+ <el-input
+ v-model="formData.duration"
+ type="number"
+ placeholder="鑷姩璁＄畻"
+ disabled
+ >
+ <template #append>h</template>
+ </el-input>
+ </el-form-item>
</div>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="saveDialogVisible = false">鍙栨秷</el-button>
- <el-button type="primary" @click="confirmSave">纭畾淇濆瓨</el-button>
- </span>
- </template>
- </el-dialog> -->
+ </el-collapse-transition>
+ </el-form>
+ <div class="buttons">
+ <el-button type="primary" @click="openSaveDialog">淇濆瓨鏂规</el-button>
+ <el-button type="success" @click="startPlay">寮�濮嬫ā鎷�</el-button>
</div>
</template>
<script setup>
-import { ref, computed, inject } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ref, computed, reactive, inject } from "vue";
+import { ElMessage } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
-import { useSimStore } from "@/store/simulation.js"; // 寮曞叆 Store
+import { useSimStore } from "@/store/simulation.js";
import { getRainfallData } from "@/api/hpApi.js";
import { SimAPIStore } from "@/store/simAPI";
-import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
+import { EventBus } from "@/eventBus";
// 鑾峰彇 Store 瀹炰緥
const simStore = SimAPIStore();
-
-// 娴嬭瘯鑾峰彇闆ㄩ噺鏁版嵁
-// const getRainData = () => {
-// getRainfallData()
-// .then((a) => {
-// console.log(a, '瀹忓浘鑾峰彇闆ㄩ噺鏁版嵁');
-// })
-// };
// 娉ㄥ叆妯℃嫙鎿嶄綔鏂规硶
const { startSimulate, endSimulate } = inject("simulateActions");
@@ -144,15 +108,19 @@
},
});
-// 鏁版嵁缁戝畾
-const rainfallHistory = ref("XX骞�50mm闄嶉洦"); // 榛樿閫変腑绗簩椤�
-const totalRainfall = ref(50); // 闄嶉洦鎬婚噺
-const schemeName = ref("鏂规鍚嶇О"); // 鏂规鍚嶇О
-const rainfallIntensity = ref(70); // 闄嶉洦寮哄害
-const hours = ref(null);
-const rainfallDuration = ref(null); // 闄嶉洦鏃堕暱
-const isCollapsed = ref(false); // 鎺у埗璇︽儏鐨勫睍寮�/鏀惰捣鐘舵��
-const saveDialogVisible = ref(false); // 鎺у埗淇濆瓨鏂规瀵硅瘽妗嗙殑鏄剧ず鐘舵��
+// 琛ㄥ崟鏁版嵁
+const formData = reactive({
+ history: "XX骞�50mm闄嶉洦",
+ name: "鏂规鍚嶇О",
+ rainfall: 50,
+ intensity: 70,
+ hours: null,
+ duration: null,
+ type: 3,
+});
+
+// 鎺у埗璇︽儏鐨勫睍寮�/鏀惰捣鐘舵��
+const isCollapsed = ref(false);
// 鍘嗗彶闆ㄦ儏鏁版嵁
const HistoricalRainData = [
@@ -166,7 +134,7 @@
// 鑾峰彇褰撳墠閫変腑鐨勫巻鍙查洦鎯呭悕绉�
const selectedRainfallName = computed(() => {
const selected = HistoricalRainData.find(
- (item) => item.name === rainfallHistory.value
+ (item) => item.name === formData.history
);
return selected ? selected.name : "";
});
@@ -178,92 +146,58 @@
const { calculateHoursDifference } = inject("calculateHours");
-const change = (val) => {
- rainfallDuration.value = calculateHoursDifference(val);
+const handleTimeChange = (val) => {
+ formData.duration = calculateHoursDifference(val);
+};
+
+const resetForm = () => {
+ formData.name = "鏂规鍚嶇О";
+ formData.rainfall = 50;
+ formData.intensity = 70;
+ formData.hours = null;
+ formData.duration = null;
};
// 鎵撳紑淇濆瓨鏂规瀵硅瘽妗�
-const openSaveDialog = async () => {
- const forms = {
- name: schemeName.value,
- geom: props.selectedArea,
- type: 3,
- rainfall: totalRainfall.value,
- intensity: rainfallIntensity.value,
- duration: rainfallDuration.value,
- history: rainfallHistory.value,
- };
- await simStore.addSimCheme(forms);
- EventBus.emit("close-selectArea");
-};
-
-// 鍏抽棴淇濆瓨鏂规瀵硅瘽妗�
-const handleClose = () => {
- saveDialogVisible.value = false;
-};
+async function openSaveDialog() {
+ try {
+ formData.geom = props.selectedArea;
+ await simStore.addSimCheme(formData);
+ resetForm();
+ EventBus.emit("close-selectArea");
+ ElMessage.success("鏂规淇濆瓨鎴愬姛");
+ } catch (error) {
+ // ElMessage.error("鏂规淇濆瓨澶辫触");
+ console.log(error);
+ }
+}
// 寮�濮嬫ā鎷�
-function startPlay() {
- console.log("寮�濮嬫ā鎷熸寜閽鐐瑰嚮");
- console.log("褰撳墠閫変腑鐨勫尯鍩燂細", props.selectedArea);
- initeWaterPrimitiveView();
- startSimulate();
+async function startPlay() {
+ try {
+ formData.geom = props.selectedArea;
+ await simStore.addSimCheme(formData);
+ EventBus.emit("close-selectArea");
+ initeWaterPrimitiveView();
+ startSimulate();
+ ElMessage.success("妯℃嫙寮�濮�");
+ } catch (error) {
+ ElMessage.error("妯℃嫙鍚姩澶辫触");
+ }
}
</script>
<style scoped>
.history-simulation {
- margin-bottom: 20px;
-}
-
-.details {
- margin-top: 10px;
- transition: height 0.3s ease, opacity 0.3s ease;
- overflow: hidden;
-}
-
-.hidden {
- height: 0;
- opacity: 0;
+ padding: 10px 10px 0px 0px;
+ box-sizing: border-box;
}
.buttons {
margin-top: 20px;
display: flex;
gap: 10px;
- justify-content: space-evenly;
-}
-
-.input-group {
- display: flex;
- flex-direction: column;
- gap: 10px;
-}
-
-.input-item {
- display: flex;
- align-items: center;
-}
-
-label {
- text-align: left;
- white-space: nowrap;
- margin-right: 10px;
-}
-
-.el-input {
- flex: 4;
-}
-
-span {
- flex: 1;
- text-align: left;
-}
-
-.el-select {
- flex: 4;
- text-align: left;
- margin-bottom: 10px;
+ justify-content: flex-end;
}
.clickable-text {
@@ -273,9 +207,24 @@
color: #61f7d4;
}
-/* 鑷畾涔� Dialog 鐨� z-index */
-.custom-dialog {
- z-index: 5000 !important;
- /* 纭繚瀵硅瘽妗嗚鐩栧叾浠栧厓绱� */
+:deep(.el-form-item__content) {
+ display: flex;
+ align-items: center;
+}
+
+:deep(.el-input) {
+ flex: 1;
+}
+
+:deep(.el-select) {
+ width: 100%;
+}
+:deep(.el-input-group__append),
+:deep(.el-input-group__prepend) {
+ background-color: #084b42;
+ color: #fff;
+}
+:deep(.el-form-item__label) {
+ color: #61f7d4 !important;
}
</style>
--
Gitblit v1.9.3