From 9eba6f3e999e7bc1f360b9a4b11dd2b204fb0feb Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期二, 15 四月 2025 09:59:43 +0800
Subject: [PATCH] 开始模拟跳转
---
src/views/left/KGSim.vue | 55 +++++---
src/views/left/KGSimOption/HistorySimulation.vue | 288 ++++++++++++++++++++++++++---------------------
src/views/left/Simulation.vue | 7
3 files changed, 200 insertions(+), 150 deletions(-)
diff --git a/src/views/left/KGSim.vue b/src/views/left/KGSim.vue
index c337e65..59b684f 100644
--- a/src/views/left/KGSim.vue
+++ b/src/views/left/KGSim.vue
@@ -29,32 +29,47 @@
<!-- 鍘嗗彶妯℃嫙 -->
<div class="history-simulation-wrapper">
- <el-radio-group v-model="selectedSimulation" style="margin-bottom: 10px;">
+ <el-radio-group v-model="selectedSimulation" style="margin-bottom: 10px">
<el-radio label="鍘嗗彶妯℃嫙">鍘嗗彶妯℃嫙</el-radio>
<el-radio label="瀹炴椂妯℃嫙">瀹炴椂妯℃嫙</el-radio>
<el-radio label="棰勬祴妯℃嫙">棰勬祴妯℃嫙</el-radio>
</el-radio-group>
<div v-if="selectedSimulation === '鍘嗗彶妯℃嫙'">
- <HistorySimulation :selectedArea="selectedArea"/>
+ <HistorySimulation
+ :selectedArea="selectedArea"
+ @start="start"
+ @end="end"
+ />
</div>
<div v-if="selectedSimulation === '瀹炴椂妯℃嫙'">
<RealTimeSimulation :selectedArea="selectedArea" />
</div>
<div v-if="selectedSimulation === '棰勬祴妯℃嫙'">
- <PredictiveSimulation :selectedArea="selectedArea"/>
+ <PredictiveSimulation :selectedArea="selectedArea" />
</div>
</div>
</div>
</template>
<script setup>
-import { ref, computed } from 'vue';
-import HistorySimulation from './KGSimOption/HistorySimulation.vue';
-import PredictiveSimulation from './KGSimOption/PredictiveSimulation.vue';
-import RealTimeSimulation from './KGSimOption/RealTimeSimulation.vue';
+import { ref, computed } from "vue";
+import HistorySimulation from "./KGSimOption/HistorySimulation.vue";
+import PredictiveSimulation from "./KGSimOption/PredictiveSimulation.vue";
+import RealTimeSimulation from "./KGSimOption/RealTimeSimulation.vue";
-const selectedSimulation = ref('鍘嗗彶妯℃嫙');
-const selectedArea = ref('瀛欒儭娌�');
+const emit = defineEmits(["start", "end"]);
+
+function end() {
+ emit("end");
+}
+
+function start() {
+ // initeWaterPrimitiveView();
+ emit("start");
+}
+
+const selectedSimulation = ref("鍘嗗彶妯℃嫙");
+const selectedArea = ref("瀛欒儭娌�");
const earesOptions = [
{ value: "瀛欒儭娌�", label: "瀛欒儭娌�" },
{ value: "楸兼按娲炲悗娌�", label: "楸兼按娲炲悗娌�" },
@@ -64,9 +79,9 @@
];
// 鍔ㄦ�佽繃婊ら�夐」
-const searchQuery = ref('');
+const searchQuery = ref("");
const filteredOptions = computed(() => {
- return earesOptions.filter(option =>
+ return earesOptions.filter((option) =>
option.label.toLowerCase().includes(searchQuery.value.toLowerCase())
);
});
@@ -77,11 +92,11 @@
};
const handleStart = () => {
- console.log('寮�濮嬫寜閽鐐瑰嚮');
+ console.log("寮�濮嬫寜閽鐐瑰嚮");
};
const handleAdd = () => {
- console.log('鍔犺浇鎸夐挳琚偣鍑�');
+ console.log("鍔犺浇鎸夐挳琚偣鍑�");
};
</script>
@@ -91,7 +106,7 @@
<style scoped>
.simulation-module {
- color: #61f7d4;
+ color: #61f7d4;
}
.simulation-area {
@@ -99,7 +114,7 @@
}
.engineering-buttons {
- .el-button{
+ .el-button {
width: 100px;
}
}
@@ -107,7 +122,7 @@
.history-simulation-wrapper {
margin-bottom: 20px;
height: 100%; /* 鍥哄畾楂樺害 */
- overflow: auto;
+ overflow: auto;
}
/* 鑷畾涔夊崟閫夋鏍峰紡 */
:deep(.el-radio__input.is-checked .el-radio__inner) {
@@ -118,13 +133,13 @@
:deep(.el-radio__input.is-checked + .el-radio__label) {
color: inherit; /* 璁╂枃瀛楅鑹茶窡闅忕埗绾� */
}
-:deep(.el-select__placeholder ) {
+:deep(.el-select__placeholder) {
color: #fff; /* 璁╂枃瀛楅鑹茶窡闅忕埗绾� */
}
-:deep(.el-radio ) {
+:deep(.el-radio) {
color: #fff; /* 璁╂枃瀛楅鑹茶窡闅忕埗绾� */
}
-:deep(.el-input__inner ) {
+:deep(.el-input__inner) {
color: #fff; /* 璁╂枃瀛楅鑹茶窡闅忕埗绾� */
}
/* .mySelectStyle {
@@ -138,4 +153,4 @@
color: #009688 !important;
}
} */
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/left/KGSimOption/HistorySimulation.vue b/src/views/left/KGSimOption/HistorySimulation.vue
index 7a20ee3..bc2b332 100644
--- a/src/views/left/KGSimOption/HistorySimulation.vue
+++ b/src/views/left/KGSimOption/HistorySimulation.vue
@@ -1,91 +1,118 @@
<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>
- <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 class="buttons">
- <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>{{ 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 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>
+ <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 class="buttons">
+ <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>{{ 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';
+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");
+ initeWaterPrimitiveView();
+ emit("start");
}
// 瀹氫箟 Props
const props = defineProps({
- selectedArea: {
- type: String,
- required: true
- }
+ selectedArea: {
+ type: String,
+ required: true,
+ },
});
// 鏁版嵁缁戝畾
-const rainfallHistory = ref('2'); // 榛樿閫変腑绗簩椤�
+const rainfallHistory = ref("2"); // 榛樿閫変腑绗簩椤�
const totalRainfall = ref(50); // 闄嶉洦鎬婚噺
const rainfallIntensity = ref(70); // 闄嶉洦寮哄害
const rainfallDuration = ref(5); // 闄嶉洦鏃堕暱
@@ -94,123 +121,130 @@
// 鍘嗗彶闆ㄦ儏鏁版嵁
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: '鏂板闄嶉洦鍘嗗彶鏁版嵁' }
+ { 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 selected = HistoricalRainData.find(item => item.id === rainfallHistory.value);
- return selected ? selected.name : '';
+ const selected = HistoricalRainData.find(
+ (item) => item.id === rainfallHistory.value
+ );
+ return selected ? selected.name : "";
});
// 鍒囨崲璇︽儏鏄剧ず
const toggleDetails = () => {
- isCollapsed.value = !isCollapsed.value;
+ isCollapsed.value = !isCollapsed.value;
};
// 鎵撳紑淇濆瓨鏂规瀵硅瘽妗�
const openSaveDialog = () => {
- if (!props.selectedArea || !rainfallHistory.value || !totalRainfall.value || !rainfallIntensity.value || !rainfallDuration.value) {
- ElMessage.warning('璇峰厛濉啓鎵�鏈夊繀濉」');
- return;
- }
- saveDialogVisible.value = true;
+ if (
+ !props.selectedArea ||
+ !rainfallHistory.value ||
+ !totalRainfall.value ||
+ !rainfallIntensity.value ||
+ !rainfallDuration.value
+ ) {
+ ElMessage.warning("璇峰厛濉啓鎵�鏈夊繀濉」");
+ return;
+ }
+ saveDialogVisible.value = true;
};
// 鍏抽棴淇濆瓨鏂规瀵硅瘽妗�
const handleClose = () => {
- saveDialogVisible.value = false;
+ saveDialogVisible.value = false;
};
// 纭淇濆瓨
const confirmSave = () => {
- console.log('淇濆瓨鏂规鎴愬姛', {
- 鍖哄煙: props.selectedArea,
- 妯℃嫙绫诲瀷: '鍘嗗彶妯℃嫙',
- 鍘嗗彶闆ㄦ儏: selectedRainfallName.value,
- 闄嶉洦鎬婚噺: `${totalRainfall.value} mm`,
- 闄嶉洦寮哄害: `${rainfallIntensity.value} mm/h`,
- 闄嶉洦鏃堕暱: `${rainfallDuration.value} h`
- });
- ElMessage.success('鏂规宸蹭繚瀛�');
- saveDialogVisible.value = false;
+ console.log("淇濆瓨鏂规鎴愬姛", {
+ 鍖哄煙: props.selectedArea,
+ 妯℃嫙绫诲瀷: "鍘嗗彶妯℃嫙",
+ 鍘嗗彶闆ㄦ儏: selectedRainfallName.value,
+ 闄嶉洦鎬婚噺: `${totalRainfall.value} mm`,
+ 闄嶉洦寮哄害: `${rainfallIntensity.value} mm/h`,
+ 闄嶉洦鏃堕暱: `${rainfallDuration.value} h`,
+ });
+ ElMessage.success("鏂规宸蹭繚瀛�");
+ saveDialogVisible.value = false;
};
-
// 寮�濮嬫ā鎷�
const startSimulation = () => {
- console.log('寮�濮嬫ā鎷熸寜閽鐐瑰嚮');
- console.log('褰撳墠閫変腑鐨勫尯鍩燂細', props.selectedArea);
+ console.log("寮�濮嬫ā鎷熸寜閽鐐瑰嚮");
+ console.log("褰撳墠閫変腑鐨勫尯鍩燂細", props.selectedArea);
};
</script>
<style scoped>
.history-simulation {
- margin-bottom: 20px;
+ margin-bottom: 20px;
}
.details {
- margin-top: 10px;
- transition: height 0.3s ease, opacity 0.3s ease;
- overflow: hidden;
+ margin-top: 10px;
+ transition: height 0.3s ease, opacity 0.3s ease;
+ overflow: hidden;
}
.hidden {
- height: 0;
- opacity: 0;
+ height: 0;
+ opacity: 0;
}
.buttons {
- margin-top: 20px;
- display: flex;
- gap: 10px;
+ margin-top: 20px;
+ display: flex;
+ gap: 10px;
}
.input-group {
- display: flex;
- flex-direction: column;
- gap: 10px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
}
.input-item {
- display: flex;
- align-items: center;
+ display: flex;
+ align-items: center;
}
label {
- text-align: left;
- white-space: nowrap;
- margin-right: 10px;
+ text-align: left;
+ white-space: nowrap;
+ margin-right: 10px;
}
.el-input {
- flex: 4;
+ flex: 4;
}
span {
- flex: 1;
- text-align: left;
+ flex: 1;
+ text-align: left;
}
.el-select {
- flex: 4;
- text-align: left;
- margin-bottom: 10px;
+ flex: 4;
+ text-align: left;
+ margin-bottom: 10px;
}
.clickable-text {
- margin-left: 160px;
- cursor: pointer;
- font-size: 14px;
- color: #61f7d4;
+ margin-left: 160px;
+ cursor: pointer;
+ font-size: 14px;
+ color: #61f7d4;
}
/* 鑷畾涔� Dialog 鐨� z-index */
.custom-dialog {
- z-index: 3000 !important;
- /* 纭繚瀵硅瘽妗嗚鐩栧叾浠栧厓绱� */
+ z-index: 3000 !important;
+ /* 纭繚瀵硅瘽妗嗚鐩栧叾浠栧厓绱� */
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/left/Simulation.vue b/src/views/left/Simulation.vue
index 062861f..004ce79 100644
--- a/src/views/left/Simulation.vue
+++ b/src/views/left/Simulation.vue
@@ -9,11 +9,11 @@
<el-tab-pane label="琛屾斂鍖哄垝浠跨湡" name="first"
><city-sim :clickValue="clickValue" @start="start" @end="end"
/></el-tab-pane>
- <el-tab-pane label="閲嶇偣鍖哄煙浠跨湡" name="second" @start="start" @end="end"
- ><city-sim :clickValue="clickValue"
+ <el-tab-pane label="閲嶇偣鍖哄煙浠跨湡" name="second"
+ ><city-sim :clickValue="clickValue" @start="start" @end="end"
/></el-tab-pane>
<el-tab-pane label="閲嶇偣娌熶豢鐪�" name="third">
- <kg-sim :clickValue="clickValue" />
+ <kg-sim :clickValue="clickValue" @start="start" @end="end" />
</el-tab-pane>
</el-tabs>
</template>
@@ -35,6 +35,7 @@
function start() {
emits("start");
+ console.log("寮�濮嬫ā鎷�");
}
function end() {
emits("end");
--
Gitblit v1.9.3