From 94dc999e2107401cb9e6c65dd67bc17eecc5e548 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期一, 28 四月 2025 11:40:02 +0800
Subject: [PATCH] 修改图表时间以及将避险点修改为避险场所
---
src/views/left/KGSimOption/PredictiveSimulation.vue | 210 +++++++++++++++++++++++++---------------------------
1 files changed, 102 insertions(+), 108 deletions(-)
diff --git a/src/views/left/KGSimOption/PredictiveSimulation.vue b/src/views/left/KGSimOption/PredictiveSimulation.vue
index adf5c24..379702b 100644
--- a/src/views/left/KGSimOption/PredictiveSimulation.vue
+++ b/src/views/left/KGSimOption/PredictiveSimulation.vue
@@ -6,11 +6,16 @@
isCollapsed ? "灞曞紑" : "鏀惰捣"
}}</span>
</div>
- <div class="details" :class="{ hidden: isCollapsed }">
- <div class="input-item">
- <label>棰勬祴鏁版嵁:</label>
+ <el-form
+ :class="{ hidden: isCollapsed }"
+ :model="forms"
+ class="details"
+ label-width="auto"
+ style="max-width: 600px"
+ >
+ <el-form-item label="棰勬祴鏁版嵁:">
<el-select
- v-model="selectedForecastData"
+ v-model="forms.prediction"
placeholder="璇烽�夋嫨"
popper-class="mySelectStyle"
>
@@ -18,40 +23,48 @@
v-for="item in ForecastData"
:key="item.id"
:label="item.name"
- :value="item.id"
+ :value="item.name"
></el-option>
</el-select>
- </div>
- <div class="input-item">
- <label>鏂规鍚嶇О:</label>
+ </el-form-item>
+ <el-form-item label="闄嶉洦鏁版嵁:" v-show="forms.prediction == '闄嶉洦鍦烘'">
+ <el-select
+ v-model="forms.showRainFall"
+ placeholder="璇烽�夋嫨"
+ popper-class="mySelectStyle"
+ >
+ <el-option
+ v-for="item in rainFall"
+ :key="item.rainfallId"
+ :label="item.rainfallName"
+ :value="item.rainfallName"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏂规鍚嶇О:">
<el-input
- v-model="schemeName"
+ v-model="forms.schemeName"
type="text"
placeholder="璇疯緭鍏�"
></el-input>
- </div>
- <div class="input-item" style="margin-bottom: 10px">
- <label>闄嶉洦闆ㄩ噺:</label>
+ </el-form-item>
+ <el-form-item label="闄嶉洦闆ㄩ噺:">
+ <el-input v-model="forms.rainfall" type="number" placeholder="璇疯緭鍏�">
+ <template #append>mm</template></el-input
+ >
+ </el-form-item>
+ <el-form-item label="闄嶉洦寮哄害:">
<el-input
- v-model="totalRainfall"
+ v-model="forms.rainfallIntensity"
type="number"
placeholder="璇疯緭鍏�"
- ></el-input>
- <span>mm</span>
- </div>
- <div class="input-item" style="margin-bottom: 10px">
- <label>闄嶉洦寮哄害:</label>
- <el-input
- v-model="rainfallIntensity"
- 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="闄嶉洦妯″紡:">
<el-select
- v-model="selectedRainfallPatterns"
+ v-model="forms.mode"
placeholder="璇烽�夋嫨"
popper-class="mySelectStyle"
>
@@ -62,60 +75,31 @@
:value="item.id"
></el-option>
</el-select>
- </div>
- <div class="input-item">
- <label>棰勮鏃堕暱:</label>
- <el-input
- v-model="rainfallDuration"
- type="number"
- placeholder="璇疯緭鍏�"
- ></el-input>
- <span>h</span>
- </div>
- <!-- <div>
- <label>浠跨湡鍙傛暟:</label>
- <div style="width: 100%; height: 43px; background-color: #fff;"></div>
- </div> -->
- </div>
+ </el-form-item>
+ <el-form-item label="棰勮鏃堕暱:">
+ <el-input v-model="forms.duration" type="number" placeholder="璇疯緭鍏�"
+ ><template #append>h</template></el-input
+ >
+ </el-form-item>
+ </el-form>
<div class="buttons">
<el-button type="primary" @click="openPlan">鎵撳紑鏂规</el-button>
<el-button type="primary" @click="openSaveDialog">淇濆瓨鏂规</el-button>
<el-button type="success" @click="startPlay">寮�濮嬫ā鎷�</el-button>
</div>
-
- <!-- 淇濆瓨鏂规瀵硅瘽妗� -->
- <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>{{ selectedForecastDataName }}</p>
- <p><strong>闄嶉洦闆ㄩ噺锛�</strong>{{ totalRainfall }} mm</p>
- <p><strong>闄嶉洦寮哄害锛�</strong>{{ rainfallIntensity }} mm/h</p>
- <p><strong>闄嶉洦妯″紡锛�</strong>{{ selectedRainfallPatternsName }}</p>
- <p><strong>棰勮鏃堕暱锛�</strong>{{ rainfallDuration }} h</p>
- </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>
</div>
</template>
<script setup>
-import { ref, computed, inject } from "vue";
+import { ref, computed, inject, reactive, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
import { useSimStore } from "@/store/simulation.js"; // 寮曞叆 Store
import { SimAPIStore } from "@/store/simAPI";
+import { getRainfallData } from "@/api/hpApi";
+
+onMounted(() => {
+ getRain();
+});
// 鑾峰彇 Store 瀹炰緥
const simStore = SimAPIStore();
@@ -140,12 +124,6 @@
// 鏁版嵁缁戝畾
const isCollapsed = ref(false); // 鎺у埗灞曞紑/鏀惰捣鐘舵��
-const totalRainfall = ref(50); // 闄嶉洦闆ㄩ噺
-const schemeName = ref("鏂规鍚嶇О"); // 鏂规鍚嶇О
-const rainfallIntensity = ref(70); // 闄嶉洦寮哄害
-const rainfallDuration = ref(5); // 棰勮鏃堕暱
-const selectedForecastData = ref("4"); // 榛樿閫変腑鈥滆嚜瀹氫箟鍙傛暟鈥�
-const selectedRainfallPatterns = ref("1"); // 榛樿閫変腑鈥滄鎬佸垎甯冣��
const saveDialogVisible = ref(false); // 鎺у埗淇濆瓨鏂规瀵硅瘽妗嗙殑鏄剧ず鐘舵��
// 棰勬祴鏁版嵁閫夐」
@@ -164,22 +142,25 @@
{ id: "4", name: "鎸佺画涓婂崌" },
];
-
-// 璁＄畻灞炴�э細鑾峰彇褰撳墠閫変腑鐨勯娴嬫暟鎹悕绉�
-const selectedForecastDataName = computed(() => {
- const selected = ForecastData.find(
- (item) => item.id === selectedForecastData.value
- );
- return selected ? selected.name : "";
+const forms = reactive({
+ rainfall: 50,
+ schemeName: "",
+ rainfallIntensity: 70,
+ duration: 5,
+ prediction: "闄嶉洦鍦烘",
+ mode: "姝ｆ�佸垎甯�",
+ showRainFall: "",
});
-// 璁＄畻灞炴�э細鑾峰彇褰撳墠閫変腑鐨勯檷闆ㄦā寮忓悕绉�
-const selectedRainfallPatternsName = computed(() => {
- const selected = RainfallPatterns.find(
- (item) => item.name === selectedRainfallPatterns.value
- );
- return selected ? selected.name : "";
-});
+// 闄嶉洦鍦烘閫夋嫨
+const rainFall = ref({});
+
+const getRain = () => {
+ getRainfallData().then((res) => {
+ rainFall.value = res.data.pageData;
+ console.log(res.data, "res");
+ });
+};
// 鍒囨崲璇︽儏鏄剧ず
const toggleDetails = () => {
@@ -188,40 +169,38 @@
// 鎵撳紑淇濆瓨鏂规瀵硅瘽妗�
const openSaveDialog = async () => {
- const forms = {
- name: schemeName.value,
+ const params = {
+ name: forms.schemeName,
geom: props.selectedArea,
type: 1,
- rainfall: totalRainfall.value,
- duration: rainfallDuration.value,
- intensity: rainfallIntensity.value,
- mode: selectedRainfallPatterns.value,
- prediction: selectedForecastDataName.value,
+ rainfall: forms.rainfall,
+ duration: forms.duration,
+ intensity: forms.rainfallIntensity,
+ mode: forms.mode,
+ prediction: forms.prediction,
};
- await simStore.addSimCheme(forms);
+ await simStore.addSimCheme(params);
};
-
-// 鍏抽棴淇濆瓨鏂规瀵硅瘽妗�
-const handleClose = () => {
- saveDialogVisible.value = false;
-};
-
// 鎵撳紑鏂规
const openPlan = () => {
+ // getRain();
console.log("鎵撳紑鏂规鎸夐挳琚偣鍑�");
};
</script>
-<style scoped>
+<style lang="less" scoped>
.history-simulation {
margin-bottom: 20px;
}
.details {
- margin-top: 10px;
- transition: height 0.3s ease, opacity 0.3s ease;
- overflow: hidden;
+ width: 100%;
+ height: 100%;
+ padding: 0px 10px 0px 0px;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
}
.hidden {
@@ -231,6 +210,7 @@
.buttons {
margin-top: 10px;
+ margin-right: 10px;
display: flex;
gap: 10px;
}
@@ -274,4 +254,18 @@
.custom-dialog {
z-index: 3000 !important; /* 纭繚瀵硅瘽妗嗚鐩栧叾浠栧厓绱� */
}
+/deep/ .el-input-group__append,
+.el-input-group__prepend {
+ background-color: #084b42;
+ color: #fff;
+}
+/deep/ .el-form-item__label {
+ color: #61f7d4 !important;
+}
+/deep/ .el-select {
+ margin-bottom: 0px !important;
+}
+/deep/ .el-form-item {
+ margin-top: 10px;
+}
</style>
--
Gitblit v1.9.3