From 55f950b56d94154fab0f807a417df2202aaae499 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期一, 14 四月 2025 18:27:25 +0800
Subject: [PATCH] 2
---
src/views/left/KGSimOption/HistorySimulation.vue | 319 +++++++++++++++++++++++++++--------------------------
1 files changed, 163 insertions(+), 156 deletions(-)
diff --git a/src/views/left/KGSimOption/HistorySimulation.vue b/src/views/left/KGSimOption/HistorySimulation.vue
index 197a6bd..7a20ee3 100644
--- a/src/views/left/KGSimOption/HistorySimulation.vue
+++ b/src/views/left/KGSimOption/HistorySimulation.vue
@@ -1,209 +1,216 @@
<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>
- <el-select v-model="rainfallHistory" placeholder="璇烽�夋嫨" popper-class="mySelectStyle">
- <el-option v-for="item in HistoricalRainData" :key="item.id" :label="item.name" :value="item.id"></el-option>
- </el-select>
- </div>
+ <div class="left-top">
+ <span>鍘嗗彶妯℃嫙</span>
+ <span class="clickable-text" @click="toggleDetails">{{ isCollapsed ? '灞曞紑' : '鏀惰捣' }}</span>
</div>
- <div class="input-group">
- <div class="input-item">
- <label>闄嶉洦鎬婚噺:</label>
- <el-input v-model="totalRainfall" type="number" placeholder="璇疯緭鍏�"></el-input>
- <span>mm</span>
- </div>
- <div class="input-item">
- <label>闄嶉洦寮哄害:</label>
- <el-input v-model="rainfallIntensity" type="number" placeholder="璇疯緭鍏�"></el-input>
- <span>mm/h</span>
- </div>
- <div class="input-item">
- <label>闄嶉洦鏃堕暱:</label>
- <el-input v-model="rainfallDuration" type="number" placeholder="璇疯緭鍏�"></el-input>
- <span>h</span>
- </div>
+ <div class="details" :class="{ hidden: isCollapsed }">
+ <div class="input-group">
+ <div class="input-item">
+ <label>鍘嗗彶闆ㄦ儏:</label>
+ <el-select v-model="rainfallHistory" placeholder="璇烽�夋嫨" popper-class="mySelectStyle">
+ <el-option v-for="item in HistoricalRainData" :key="item.id" :label="item.name"
+ :value="item.id"></el-option>
+ </el-select>
+ </div>
+ </div>
+ <div class="input-group">
+ <div class="input-item">
+ <label>闄嶉洦鎬婚噺:</label>
+ <el-input v-model="totalRainfall" type="number" placeholder="璇疯緭鍏�"></el-input>
+ <span>mm</span>
+ </div>
+ <div class="input-item">
+ <label>闄嶉洦寮哄害:</label>
+ <el-input v-model="rainfallIntensity" type="number" placeholder="璇疯緭鍏�"></el-input>
+ <span>mm/h</span>
+ </div>
+ <div class="input-item">
+ <label>闄嶉洦鏃堕暱:</label>
+ <el-input 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>
- <label>浠跨湡鍙傛暟:</label>
- <div style="width: 100%; height: 60px; background-color: #fff;"></div>
+ <div class="buttons">
+ <el-button type="primary" @click="openSaveDialog">淇濆瓨鏂规</el-button>
+ <el-button type="success" @click="startPlay">寮�濮嬫ā鎷�</el-button>
</div>
- </div>
- <div class="buttons">
- <el-button type="primary" @click="openSaveDialog">淇濆瓨鏂规</el-button>
- <el-button type="success" @click="startSimulation">寮�濮嬫ā鎷�</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>{{ 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>
- </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-dialog v-model="saveDialogVisible" title="淇濆瓨鏂规" width="50%" :before-close="handleClose"
+ custom-class="custom-dialog">
+ <div class="dialog-content">
+ <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>
+ </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 } from 'vue';
- import { ElMessage } from 'element-plus';
-
- // 瀹氫箟 Props
- const props = defineProps({
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { ElMessage } from 'element-plus';
+import { initeWaterPrimitiveView } from "@/utils/water";
+
+const emit = defineEmits(["start", "end"]);
+function endPlay() {
+ emit("end");
+}
+
+function startPlay() {
+ initeWaterPrimitiveView();
+ emit("start");
+}
+// 瀹氫箟 Props
+const props = defineProps({
selectedArea: {
- type: String,
- required: true
+ type: String,
+ required: true
}
- });
-
- // 鏁版嵁缁戝畾
- const rainfallHistory = ref('2'); // 榛樿閫変腑绗簩椤�
- const totalRainfall = ref(50); // 闄嶉洦鎬婚噺
- const rainfallIntensity = ref(70); // 闄嶉洦寮哄害
- const rainfallDuration = ref(5); // 闄嶉洦鏃堕暱
- const isCollapsed = ref(false); // 鎺у埗璇︽儏鐨勫睍寮�/鏀惰捣鐘舵��
- const saveDialogVisible = ref(false); // 鎺у埗淇濆瓨鏂规瀵硅瘽妗嗙殑鏄剧ず鐘舵��
-
- // 鍘嗗彶闆ㄦ儏鏁版嵁
- const HistoricalRainData = [
+});
+
+// 鏁版嵁缁戝畾
+const rainfallHistory = ref('2'); // 榛樿閫変腑绗簩椤�
+const totalRainfall = ref(50); // 闄嶉洦鎬婚噺
+const rainfallIntensity = ref(70); // 闄嶉洦寮哄害
+const rainfallDuration = ref(5); // 闄嶉洦鏃堕暱
+const isCollapsed = ref(false); // 鎺у埗璇︽儏鐨勫睍寮�/鏀惰捣鐘舵��
+const saveDialogVisible = ref(false); // 鎺у埗淇濆瓨鏂规瀵硅瘽妗嗙殑鏄剧ず鐘舵��
+
+// 鍘嗗彶闆ㄦ儏鏁版嵁
+const HistoricalRainData = [
{ id: '1', name: 'XX骞�75mm闄嶉洦' },
{ id: '2', name: 'XX骞�50mm闄嶉洦' },
{ id: '3', name: 'XX骞�75mm闄嶉洦' },
{ id: '4', name: 'XX骞�100mm闄嶉洦' },
{ id: '5', name: '鏂板闄嶉洦鍘嗗彶鏁版嵁' }
- ];
-
- // 鑾峰彇褰撳墠閫変腑鐨勫巻鍙查洦鎯呭悕绉�
- const selectedRainfallName = computed(() => {
+];
+
+// 鑾峰彇褰撳墠閫変腑鐨勫巻鍙查洦鎯呭悕绉�
+const selectedRainfallName = computed(() => {
const selected = HistoricalRainData.find(item => item.id === rainfallHistory.value);
return selected ? selected.name : '';
- });
-
- // 鍒囨崲璇︽儏鏄剧ず
- const toggleDetails = () => {
+});
+
+// 鍒囨崲璇︽儏鏄剧ず
+const toggleDetails = () => {
isCollapsed.value = !isCollapsed.value;
- };
-
- // 鎵撳紑淇濆瓨鏂规瀵硅瘽妗�
- const openSaveDialog = () => {
+};
+
+// 鎵撳紑淇濆瓨鏂规瀵硅瘽妗�
+const openSaveDialog = () => {
if (!props.selectedArea || !rainfallHistory.value || !totalRainfall.value || !rainfallIntensity.value || !rainfallDuration.value) {
- ElMessage.warning('璇峰厛濉啓鎵�鏈夊繀濉」');
- return;
+ ElMessage.warning('璇峰厛濉啓鎵�鏈夊繀濉」');
+ return;
}
saveDialogVisible.value = true;
- };
-
- // 鍏抽棴淇濆瓨鏂规瀵硅瘽妗�
- const handleClose = () => {
+};
+
+// 鍏抽棴淇濆瓨鏂规瀵硅瘽妗�
+const handleClose = () => {
saveDialogVisible.value = false;
- };
-
- // 纭淇濆瓨
- const confirmSave = () => {
+};
+
+// 纭淇濆瓨
+const confirmSave = () => {
console.log('淇濆瓨鏂规鎴愬姛', {
- 鍖哄煙: props.selectedArea,
- 妯℃嫙绫诲瀷: '鍘嗗彶妯℃嫙',
- 鍘嗗彶闆ㄦ儏: selectedRainfallName.value,
- 闄嶉洦鎬婚噺: `${totalRainfall.value} mm`,
- 闄嶉洦寮哄害: `${rainfallIntensity.value} mm/h`,
- 闄嶉洦鏃堕暱: `${rainfallDuration.value} h`
+ 鍖哄煙: props.selectedArea,
+ 妯℃嫙绫诲瀷: '鍘嗗彶妯℃嫙',
+ 鍘嗗彶闆ㄦ儏: selectedRainfallName.value,
+ 闄嶉洦鎬婚噺: `${totalRainfall.value} mm`,
+ 闄嶉洦寮哄害: `${rainfallIntensity.value} mm/h`,
+ 闄嶉洦鏃堕暱: `${rainfallDuration.value} h`
});
ElMessage.success('鏂规宸蹭繚瀛�');
saveDialogVisible.value = false;
- };
-
- // 寮�濮嬫ā鎷�
- const startSimulation = () => {
+};
+
+// 寮�濮嬫ā鎷�
+const startSimulation = () => {
console.log('寮�濮嬫ā鎷熸寜閽鐐瑰嚮');
console.log('褰撳墠閫変腑鐨勫尯鍩燂細', props.selectedArea);
- };
- </script>
-
- <style scoped>
- .history-simulation {
+};
+</script>
+
+<style scoped>
+.history-simulation {
margin-bottom: 20px;
- }
-
- .details {
+}
+
+.details {
margin-top: 10px;
transition: height 0.3s ease, opacity 0.3s ease;
overflow: hidden;
- }
-
- .hidden {
+}
+
+.hidden {
height: 0;
opacity: 0;
- }
-
- .buttons {
+}
+
+.buttons {
margin-top: 20px;
display: flex;
gap: 10px;
- }
-
- .input-group {
+}
+
+.input-group {
display: flex;
flex-direction: column;
gap: 10px;
- }
-
- .input-item {
+}
+
+.input-item {
display: flex;
align-items: center;
- }
-
- label {
+}
+
+label {
text-align: left;
white-space: nowrap;
margin-right: 10px;
- }
-
- .el-input {
+}
+
+.el-input {
flex: 4;
- }
-
- span {
+}
+
+span {
flex: 1;
text-align: left;
- }
-
- .el-select {
+}
+
+.el-select {
flex: 4;
text-align: left;
margin-bottom: 10px;
- }
-
- .clickable-text {
+}
+
+.clickable-text {
margin-left: 160px;
cursor: pointer;
font-size: 14px;
color: #61f7d4;
- }
-
- /* 鑷畾涔� Dialog 鐨� z-index */
- .custom-dialog {
- z-index: 3000 !important; /* 纭繚瀵硅瘽妗嗚鐩栧叾浠栧厓绱� */
- }
- </style>
\ No newline at end of file
+}
+
+/* 鑷畾涔� Dialog 鐨� z-index */
+.custom-dialog {
+ z-index: 3000 !important;
+ /* 纭繚瀵硅瘽妗嗚鐩栧叾浠栧厓绱� */
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3