From 65dc7a8dab046264766f7ae32070ded7bf34e6fe Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期二, 15 四月 2025 15:09:12 +0800
Subject: [PATCH] change
---
src/views/left/KGSimOption/PredictiveSimulation.vue | 301 ++++++++++++++++++++++++++-----------------------
1 files changed, 160 insertions(+), 141 deletions(-)
diff --git a/src/views/left/KGSimOption/PredictiveSimulation.vue b/src/views/left/KGSimOption/PredictiveSimulation.vue
index ba29131..43ba4a7 100644
--- a/src/views/left/KGSimOption/PredictiveSimulation.vue
+++ b/src/views/left/KGSimOption/PredictiveSimulation.vue
@@ -1,89 +1,95 @@
-<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-item">
- <label>棰勬祴鏁版嵁:</label>
- <el-select v-model="selectedForecastData" placeholder="璇烽�夋嫨" popper-class="mySelectStyle">
- <el-option
- v-for="item in ForecastData"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
+ <template>
+ <div class="history-simulation">
+ <div class="left-top">
+ <span>棰勬祴妯℃嫙</span>
+ <span class="clickable-text" @click="toggleDetails">{{ isCollapsed ? '灞曞紑' : '鏀惰捣' }}</span>
</div>
- <div class="input-item" style="margin-bottom: 10px;">
- <label>闄嶉洦闆ㄩ噺:</label>
- <el-input v-model="totalRainfall" type="number" placeholder="璇疯緭鍏�"></el-input>
- <span>mm</span>
+ <div class="details" :class="{ hidden: isCollapsed }">
+ <div class="input-item">
+ <label>棰勬祴鏁版嵁:</label>
+ <el-select v-model="selectedForecastData" placeholder="璇烽�夋嫨" popper-class="mySelectStyle">
+ <el-option
+ v-for="item in ForecastData"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ ></el-option>
+ </el-select>
+ </div>
+ <div class="input-item" style="margin-bottom: 10px;">
+ <label>闄嶉洦闆ㄩ噺:</label>
+ <el-input v-model="totalRainfall" 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>
+ <el-select v-model="selectedRainfallPatterns" placeholder="璇烽�夋嫨" popper-class="mySelectStyle">
+ <el-option
+ v-for="item in RainfallPatterns"
+ :key="item.id"
+ :label="item.name"
+ :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>
- <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 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>
- <div class="input-item">
- <label>闄嶉洦妯″紡:</label>
- <el-select v-model="selectedRainfallPatterns" placeholder="璇烽�夋嫨" popper-class="mySelectStyle">
- <el-option
- v-for="item in RainfallPatterns"
- :key="item.id"
- :label="item.name"
- :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>
- <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>{{ 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>
+ <!-- 淇濆瓨鏂规瀵硅瘽妗� -->
+ <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>{{ 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 } from 'vue';
import { ElMessage } from 'element-plus';
import { initeWaterPrimitiveView } from "@/utils/water";
+import { useSimStore } from "@/store/simulation.js"; // 寮曞叆 Store
+
+// 鑾峰彇 Store 瀹炰緥
+const simStore = useSimStore();
+
+// 娉ㄥ叆妯℃嫙鎿嶄綔鏂规硶
const { startSimulate, endSimulate } = inject("simulateActions");
function startPlay() {
@@ -92,6 +98,7 @@
initeWaterPrimitiveView();
startSimulate();
}
+
// 瀹氫箟 Props
const props = defineProps({
selectedArea: {
@@ -158,16 +165,28 @@
// 纭淇濆瓨
const confirmSave = () => {
- console.log('淇濆瓨鏂规鎴愬姛', {
- 鍖哄煙: props.selectedArea,
- 妯℃嫙绫诲瀷: '棰勬祴妯℃嫙',
- 棰勬祴鏁版嵁: selectedForecastDataName.value,
- 闄嶉洦闆ㄩ噺: `${totalRainfall.value} mm`,
- 闄嶉洦寮哄害: `${rainfallIntensity.value} mm/h`,
- 闄嶉洦妯″紡: selectedRainfallPatternsName.value,
- 棰勮鏃堕暱: `${rainfallDuration.value} h`
- });
- ElMessage.success('鏂规宸蹭繚瀛�');
+ // 鏋勯�犳柊鐨勬柟妗堝璞�
+ const newScheme = {
+ id: Date.now().toString(), // 鍞竴 ID
+ area: props.selectedArea, // 鍖哄煙
+ name: selectedForecastDataName.value, // 鏂规鍚嶇О锛堥娴嬫暟鎹被鍨嬶級
+ createTime: new Date().toISOString(), // 鍒涘缓鏃堕棿
+ taskStatus: 0, // 鍒濆鐘舵�佷负鏈紑濮�
+ simulationType: '棰勬祴妯℃嫙', // 妯℃嫙绫诲瀷
+ forecastData: selectedForecastDataName.value, // 棰勬祴鏁版嵁
+ totalRainfall: `${totalRainfall.value} mm`, // 闄嶉洦闆ㄩ噺
+ rainfallIntensity: `${rainfallIntensity.value} mm/h`, // 闄嶉洦寮哄害
+ rainfallPattern: selectedRainfallPatternsName.value, // 闄嶉洦妯″紡
+ rainfallDuration: `${rainfallDuration.value} h`, // 棰勮鏃堕暱
+ };
+
+ // 璋冪敤 Store 鐨勬柟娉曟坊鍔犳柟妗�
+ simStore.addSchemCard(newScheme);
+
+ console.log("淇濆瓨鏂规鎴愬姛", newScheme);
+ ElMessage.success("鏂规宸蹭繚瀛�");
+
+ // 鍏抽棴瀵硅瘽妗�
saveDialogVisible.value = false;
};
@@ -177,65 +196,65 @@
};
</script>
-<style scoped>
-.history-simulation {
- margin-bottom: 20px;
-}
+ <style scoped>
+ .history-simulation {
+ margin-bottom: 20px;
+ }
-.details {
- margin-top: 10px;
- transition: height 0.3s ease, opacity 0.3s ease;
- overflow: hidden;
-}
+ .details {
+ margin-top: 10px;
+ transition: height 0.3s ease, opacity 0.3s ease;
+ overflow: hidden;
+ }
-.hidden {
- height: 0;
- opacity: 0;
-}
+ .hidden {
+ height: 0;
+ opacity: 0;
+ }
-.buttons {
- margin-top: 10px;
- display: flex;
- gap: 10px;
-}
-.el-button {
- flex: 1;
-}
-.input-item {
- display: flex;
- align-items: center;
-}
+ .buttons {
+ margin-top: 10px;
+ display: flex;
+ gap: 10px;
+ }
+ .el-button {
+ flex: 1;
+ }
+ .input-item {
+ display: flex;
+ align-items: center;
+ }
-label {
- text-align: left;
- white-space: nowrap;
- margin-right: 10px;
-}
+ label {
+ text-align: left;
+ white-space: nowrap;
+ margin-right: 10px;
+ }
-.el-input {
- flex: 4;
-}
+ .el-input {
+ flex: 4;
+ }
-span {
- flex: 1;
- text-align: left;
-}
+ span {
+ flex: 1;
+ text-align: left;
+ }
-.el-select {
- flex: 4;
- text-align: left;
- margin-bottom: 10px;
-}
+ .el-select {
+ flex: 4;
+ text-align: left;
+ margin-bottom: 10px;
+ }
-.clickable-text {
- margin-left: 160px;
- cursor: pointer;
- font-size: 14px;
- color: #61f7d4;
-}
+ .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