From 75134e86655dedcb2ad574146dadaad1a24f6f01 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期二, 13 五月 2025 14:09:24 +0800
Subject: [PATCH] 修改很多很多很多

---
 src/components/tools/LayerTree.vue                     |    1 
 src/api/hpApi.js                                       |    2 
 src/store/simulation.js                                |    4 
 vue.config.js                                          |    2 
 src/store/simAPI.js                                    |    2 
 src/views/left/KGSimOption/RealTimeSimulation copy.vue |  341 ++++++++++++++++++
 src/views/left/KGSimOption/PredictiveSimulation.vue    |   70 ++-
 src/views/left/KGSimOption/HistorySimulation.vue       |  311 +++++++----------
 src/views/mnfz.vue                                     |    2 
 src/views/left/CitySim.vue                             |   12 
 src/components/monifangzhen/schemeCard.vue             |   50 +-
 src/views/left/KGSimOption/RealTimeSimulation.vue      |  272 ++++++--------
 12 files changed, 681 insertions(+), 388 deletions(-)

diff --git a/src/api/hpApi.js b/src/api/hpApi.js
index fa674f7..1d1a0cc 100644
--- a/src/api/hpApi.js
+++ b/src/api/hpApi.js
@@ -4,7 +4,7 @@
 export async function fetchToken() {
   try {
     const response = await axios.post("/hp/auth/getToken", {
-      username: "yxxx",
+      username: "yunweiyonghu",
       password: "c2d6bba7f0a67701a97550684e39fa5f",
       systemName: "RS_SYSTEM",
     });
diff --git a/src/components/monifangzhen/schemeCard.vue b/src/components/monifangzhen/schemeCard.vue
index 427bb00..0d535d6 100644
--- a/src/components/monifangzhen/schemeCard.vue
+++ b/src/components/monifangzhen/schemeCard.vue
@@ -1,8 +1,13 @@
 <template>
   <div class="listCard">
     <!-- <div>鏂规鏁伴噺: {{ simStore.schemCard.length }}</div> -->
-    <el-card v-if="!schemeInfoShow" v-for="(item, key) in schemeList" :key="key"
-      :class="{ selected: selectedId === item.id }" @click="selectScheme(item.id)">
+    <el-card
+      v-if="!schemeInfoShow"
+      v-for="(item, key) in schemeList"
+      :key="key"
+      :class="{ selected: selectedId === item.id }"
+      @click="selectScheme(item.id)"
+    >
       <div>
         <p>鏂规鍚嶇О : {{ item.name }}</p>
         <p>鍒涘缓鏃堕棿 : {{ formatTime(item.createTime) }}</p>
@@ -15,15 +20,26 @@
       </div>
       <div class="cardMenu">
         <div style="float: right; margin-top: 3px">
-          <el-button size="small" @click="setSchemClick(item)">鏂规璇︽儏</el-button>
+          <el-button size="small" @click="setSchemClick(item)"
+            >鏂规璇︽儏</el-button
+          >
           <el-button size="small" @click="startPlay(item)">杩涘叆妯℃嫙</el-button>
           <!--  :disabled="item.taskStatus !== 2" -->
         </div>
       </div>
     </el-card>
-    <schemeInfo v-if="schemeInfoShow" :selectedScheme="currentScheme" @back="handleBack" />
+    <schemeInfo
+      v-if="schemeInfoShow"
+      :selectedScheme="currentScheme"
+      @back="handleBack"
+    />
   </div>
-  <Message @close="close" class="mess" v-show="messageShow" :mesData="mesData" />
+  <Message
+    @close="close"
+    class="mess"
+    v-show="messageShow"
+    :mesData="mesData"
+  />
 </template>
 
 <script setup>
@@ -73,7 +89,7 @@
   //   alert("褰撳墠鏂规灏氭湭瀹屾垚锛屾棤娉曡繘鍏ユā鎷燂紒");
   //   return;
   // }
-  simStore.setSelectedScheme(item)
+  simStore.setSelectedScheme(item);
 
   currentScheme.value = item;
   schemeInfoShow.value = true;
@@ -96,7 +112,6 @@
 
 // 娉ㄥ唽浜嬩欢鐩戝惉鍣�
 EventBus.on("hide-schemeInfo", handleHideSchemeInfo);
-
 
 /////////////////////// 璋冪敤鎺ュ彛锛堜娇鐢ㄦ椂鎵撳紑锛� ///////////////////////
 import { getRegionData, getSimData, deleteSimData } from "@/api/trApi.js";
@@ -150,17 +165,15 @@
     });
     return;
   }
-  const selectedScheme = schemeList.value.find((item) => item.id === selectedId.value);
+  const selectedScheme = schemeList.value.find(
+    (item) => item.id === selectedId.value
+  );
   const schemeName = selectedScheme ? selectedScheme.name : "鏈煡鏂规";
-  ElMessageBox.confirm(
-    `纭畾瑕佸垹闄ゆ柟妗� "${schemeName}" 鍚�?`,
-    "鍒犻櫎鏂规",
-    {
-      confirmButtonText: "纭畾",
-      cancelButtonText: "鍙栨秷",
-      type: "warning",
-    }
-  )
+  ElMessageBox.confirm(`纭畾瑕佸垹闄ゆ柟妗� "${schemeName}" 鍚�?`, "鍒犻櫎鏂规", {
+    confirmButtonText: "纭畾",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
     .then(() => {
       deleteSimData(selectedId.value).then((res) => {
         getScheme();
@@ -170,8 +183,7 @@
         message: `鏂规 "${schemeName}" 鍒犻櫎鎴愬姛`,
       });
     })
-    .catch(() => {
-    });
+    .catch(() => {});
 };
 /////////////////////// 璋冪敤鎺ュ彛缁撴潫 ///////////////////////
 onUnmounted(() => {
diff --git a/src/components/tools/LayerTree.vue b/src/components/tools/LayerTree.vue
index 0ced3a5..214ca3e 100644
--- a/src/components/tools/LayerTree.vue
+++ b/src/components/tools/LayerTree.vue
@@ -384,6 +384,7 @@
 </script>
 
 <style lang="less" scoped>
+@import url("../../assets/css/infobox.css");
 .layer-tree {
   background: url("@/assets/img/tools/plotting_new.png");
   width: 200px;
diff --git a/src/store/simAPI.js b/src/store/simAPI.js
index e945bf1..ad7952c 100644
--- a/src/store/simAPI.js
+++ b/src/store/simAPI.js
@@ -94,6 +94,7 @@
 
     // 淇濆瓨鏂规寮圭獥
     const addSimCheme = async (forms) => {
+        // 琛ㄥ崟楠岃瘉
         if (!validateForm(forms)) {
             throw new Error('琛ㄥ崟楠岃瘉鏈�氳繃'); // 鎶涘嚭閿欒锛岄樆姝㈢户缁墽琛�
         }
@@ -117,6 +118,7 @@
     }
 
 
+
     return {
         selectTab,
         isLoading,
diff --git a/src/store/simulation.js b/src/store/simulation.js
index 751e1f7..75c6ac6 100644
--- a/src/store/simulation.js
+++ b/src/store/simulation.js
@@ -27,8 +27,11 @@
     const schemCard = ref([])
     const backToHome = ref(false)
     const selectedScheme = ref(null)
+    const rainFalls = ref()
     const setSelectedScheme = (scheme) => {
         selectedScheme.value = scheme
+        rainFalls.value = JSON.parse(scheme.data).rainfalls
+        console.log(rainFalls.value, 'shceme')
     }
     const clearSelectedScheme = () => {
         selectedScheme.value = null
@@ -141,6 +144,7 @@
         showDangerAssess,
         schemCard,
         backToHome,
+        rainFalls,
 
         // 鏂规鐩稿叧鏂规硶
         setSchemCard,
diff --git a/src/views/left/CitySim.vue b/src/views/left/CitySim.vue
index e40b495..59b9b16 100644
--- a/src/views/left/CitySim.vue
+++ b/src/views/left/CitySim.vue
@@ -11,7 +11,12 @@
       閲嶇偣鍖哄煙浠跨湡锛�10m绮惧害锛�
     </div>
     <div class="forms">
-      <el-form :model="forms" label-width="auto" style="max-width: 600px">
+      <el-form
+        :rules="rules"
+        :model="forms"
+        label-width="auto"
+        style="max-width: 600px"
+      >
         <el-form-item label="鏂规鍚嶇О:">
           <el-input
             v-model="forms.name"
@@ -466,7 +471,10 @@
 };
 
 // 寮�濮嬫ā鎷�
-function startPlay() {
+async function startPlay() {
+  // 寮�濮嬫ā鎷熷墠闇�瑕佸厛淇濆瓨鏂规
+  await simStore.addSimCheme(forms);
+  EventBus.emit("close-selectArea");
   initeWaterPrimitiveView();
   startSimulate();
 }
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>
diff --git a/src/views/left/KGSimOption/PredictiveSimulation.vue b/src/views/left/KGSimOption/PredictiveSimulation.vue
index 3592e33..24f1adb 100644
--- a/src/views/left/KGSimOption/PredictiveSimulation.vue
+++ b/src/views/left/KGSimOption/PredictiveSimulation.vue
@@ -43,7 +43,7 @@
       </el-form-item>
       <el-form-item label="鏂规鍚嶇О:">
         <el-input
-          v-model="forms.schemeName"
+          v-model="forms.name"
           type="text"
           placeholder="璇疯緭鍏�"
         ></el-input>
@@ -54,11 +54,7 @@
         >
       </el-form-item>
       <el-form-item label="闄嶉洦寮哄害:">
-        <el-input
-          v-model="forms.rainfallIntensity"
-          type="number"
-          placeholder="璇疯緭鍏�"
-        >
+        <el-input v-model="forms.intensity" type="number" placeholder="璇疯緭鍏�">
           <template #append>mm/h</template></el-input
         >
       </el-form-item>
@@ -114,23 +110,12 @@
 import { getRainfallData } from "@/api/hpApi";
 import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
 
-
 onMounted(() => {
   getRain();
 });
 
 // 鑾峰彇 Store 瀹炰緥
 const simStore = SimAPIStore();
-
-// 娉ㄥ叆妯℃嫙鎿嶄綔鏂规硶
-const { startSimulate, endSimulate } = inject("simulateActions");
-
-function startPlay() {
-  console.log("寮�濮嬫ā鎷熸寜閽鐐瑰嚮");
-  console.log("褰撳墠閫変腑鐨勫尯鍩燂細", props.selectedArea);
-  initeWaterPrimitiveView();
-  startSimulate();
-}
 
 // 瀹氫箟 Props
 const props = defineProps({
@@ -162,13 +147,15 @@
 
 const forms = reactive({
   rainfall: 50,
-  schemeName: "",
-  rainfallIntensity: 70,
+  name: "",
+  intensity: 70,
   duration: null,
   prediction: "闄嶉洦鍦烘",
   mode: "姝ｆ�佸垎甯�",
   showRainFall: "",
   hours: null,
+  type: 1,
+  geom: null, // 鍏堣缃负 null 鎴栬�呭叾浠栭粯璁ゅ��,
 });
 
 // 闄嶉洦鍦烘閫夋嫨
@@ -192,23 +179,42 @@
   forms.duration = calculateHoursDifference(val);
 };
 
+const resetForm = () => {
+  forms.rainfall = 50;
+  forms.name = "";
+  forms.intensity = 70;
+  forms.duration = null;
+  forms.prediction = "闄嶉洦鍦烘";
+  forms.mode = "姝ｆ�佸垎甯�";
+  forms.showRainFall = "";
+  forms.hours = null;
+  forms.type = 1;
+  forms.geom = null; // 鍏堣缃负 null 鎴栬�呭叾浠栭粯璁ゅ��,
+};
+
 // 鎵撳紑淇濆瓨鏂规瀵硅瘽妗�
 const openSaveDialog = async () => {
-  const params = {
-    name: forms.schemeName,
-    geom: props.selectedArea,
-    type: 1,
-    rainfall: forms.rainfall,
-    duration: forms.duration,
-    intensity: forms.rainfallIntensity,
-    mode: forms.mode,
-    prediction: forms.prediction,
-  };
-  await simStore.addSimCheme(params);
-  EventBus.emit("close-selectArea");
-
+  // 鍦� setup 鍐呴儴鏇存柊 geom 鐨勫��
+  try {
+    forms.geom = props.selectedArea;
+    await simStore.addSimCheme(forms);
+    resetForm();
+    EventBus.emit("close-selectArea");
+  } catch (err) {}
 };
 
+// 娉ㄥ叆妯℃嫙鎿嶄綔鏂规硶
+const { startSimulate, endSimulate } = inject("simulateActions");
+
+// 寮�濮嬫ā鎷�
+async function startPlay() {
+  forms.geom = props.selectedArea;
+  await simStore.addSimCheme(forms);
+  EventBus.emit("close-selectArea");
+  initeWaterPrimitiveView();
+  startSimulate();
+}
+
 // 鎵撳紑鏂规
 const openPlan = () => {
   // getRain();
diff --git a/src/views/left/KGSimOption/RealTimeSimulation copy.vue b/src/views/left/KGSimOption/RealTimeSimulation copy.vue
new file mode 100644
index 0000000..a5ac07e
--- /dev/null
+++ b/src/views/left/KGSimOption/RealTimeSimulation copy.vue
@@ -0,0 +1,341 @@
+<template>
+  <div class="real-time-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-input
+            v-model="schemeName"
+            type="text"
+            placeholder="璇疯緭鍏�"
+          ></el-input>
+        </div>
+        <div class="input-item">
+          <label>闆ㄩ噺鏁版嵁:</label>
+          <el-select
+            v-model="selectedRainfall"
+            placeholder="璇烽�夋嫨"
+            popper-class="mySelectStyle"
+          >
+            <el-option
+              v-for="item in rainfallData"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="table-container">
+        <div
+          class="table-row"
+          v-for="(item, index) in filteredTableData"
+          :key="index"
+        >
+          <input type="checkbox" v-model="item.selected" />
+          <span>{{ item.name }}</span>
+        </div>
+      </div>
+      <!-- <div style="margin-top: 10px;">
+        <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>
+      <el-button type="success" @click="futurePredictions">鏈潵棰勬祴</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, defineProps, computed, inject } from "vue";
+import { ElMessage } from "element-plus";
+import { initeWaterPrimitiveView } from "@/utils/water";
+import { SimAPIStore } from "@/store/simAPI";
+import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
+
+// 鑾峰彇 Store 瀹炰緥
+const simStore = SimAPIStore();
+
+// 鑾峰彇 Store 瀹炰緥
+const schemeName = ref("鏂规鍚嶇О"); // 鏂规鍚嶇О
+
+// 宸ュ叿鍑芥暟锛氭繁鎷疯礉骞惰缃粯璁ら�変腑鐘舵��
+function deepCloneAndSetSelected(data) {
+  const newData = {};
+  for (const key in data) {
+    newData[key] = data[key].map((item) => ({ ...item, selected: true }));
+  }
+  return newData;
+}
+
+// 鎺ユ敹鐖剁粍浠朵紶閫掔殑 props
+const props = defineProps({
+  selectedArea: {
+    type: Object,
+    required: true,
+  },
+});
+
+// 瀛愮粍浠跺唴閮ㄧ姸鎬�
+const rainfallData = ref([]); // 闆ㄩ噺鏁版嵁
+const tableData = ref({}); // 琛ㄦ牸鏁版嵁锛堟寜闆ㄩ噺鏁版嵁鍒嗙粍锛�
+const selectedRainfall = ref(""); // 褰撳墠閫変腑鐨勯洦閲忔暟鎹�
+const isCollapsed = ref(false); // 鎺у埗灞曞紑/鏀惰捣鐘舵��
+const saveDialogVisible = ref(false); // 鎺у埗淇濆瓨鏂规瀵硅瘽妗嗘樉绀虹姸鎬�
+
+// 妯℃嫙涓嶅悓鍖哄煙鐨勬暟鎹�
+const areaDataMap = {
+  瀛欒儭娌�: {
+    rainfallData: [
+      { id: "1", name: "姘旇薄瀹炴椂鏁版嵁 - 瀛欒儭娌�" },
+      { id: "2", name: "闆ㄩ噺璁″疄鏃舵暟鎹� - 瀛欒儭娌�" },
+    ],
+    tableData: {
+      1: [
+        { id: "001", name: "瀛欒儭娌熸皵璞＄珯001" },
+        { id: "002", name: "瀛欒儭娌熸皵璞＄珯002" },
+      ],
+      2: [
+        { id: "003", name: "瀛欒儭娌熼洦閲忚003" },
+        { id: "004", name: "瀛欒儭娌熼洦閲忚004" },
+      ],
+    },
+  },
+  楸兼按娲炲悗娌�: {
+    rainfallData: [
+      { id: "1", name: "姘旇薄瀹炴椂鏁版嵁 - 楸兼按娲炲悗娌�" },
+      { id: "2", name: "闆ㄩ噺璁″疄鏃舵暟鎹� - 楸兼按娲炲悗娌�" },
+    ],
+    tableData: {
+      1: [
+        { id: "005", name: "楸兼按娲炲悗娌熸皵璞＄珯005" },
+        { id: "006", name: "楸兼按娲炲悗娌熸皵璞＄珯006" },
+      ],
+      2: [
+        { id: "007", name: "楸兼按娲炲悗娌熼洦閲忚007" },
+        { id: "008", name: "楸兼按娲炲悗娌熼洦閲忚008" },
+      ],
+    },
+  },
+  浜庡瑗挎矡: {
+    rainfallData: [
+      { id: "1", name: "姘旇薄瀹炴椂鏁版嵁 - 浜庡瑗挎矡" },
+      { id: "2", name: "闆ㄩ噺璁″疄鏃舵暟鎹� - 浜庡瑗挎矡" },
+    ],
+    tableData: {
+      1: [
+        { id: "009", name: "浜庡瑗挎矡姘旇薄绔�009" },
+        { id: "010", name: "浜庡瑗挎矡姘旇薄绔�010" },
+      ],
+      2: [
+        { id: "011", name: "浜庡瑗挎矡闆ㄩ噺璁�011" },
+        { id: "012", name: "浜庡瑗挎矡闆ㄩ噺璁�012" },
+      ],
+    },
+  },
+};
+
+// 鏍规嵁 selectedArea 鏇存柊鏁版嵁
+watch(
+  () => props.selectedArea,
+  (newArea) => {
+    if (areaDataMap[newArea]) {
+      rainfallData.value = areaDataMap[newArea].rainfallData;
+      // 浣跨敤娣辨嫹璐濊缃粯璁ら�変腑鐘舵��
+      tableData.value = deepCloneAndSetSelected(areaDataMap[newArea].tableData);
+      selectedRainfall.value = ""; // 娓呯┖閫変腑鐨勯洦閲忔暟鎹�
+    } else {
+      rainfallData.value = [];
+      tableData.value = {};
+      selectedRainfall.value = "";
+    }
+  },
+  { immediate: true } // 绔嬪嵆鎵ц涓�娆★紝纭繚鍒濆鏁版嵁姝ｇ‘
+);
+
+// 鍔ㄦ�佽绠楄〃鏍兼暟鎹�
+const filteredTableData = computed(() => {
+  return selectedRainfall.value && tableData.value[selectedRainfall.value]
+    ? tableData.value[selectedRainfall.value]
+    : [];
+});
+
+// 鑾峰彇褰撳墠閫変腑鐨勯洦閲忔暟鎹悕绉�
+const selectedRainfallName = computed(() => {
+  const selected = rainfallData.value.find(
+    (item) => item.id === selectedRainfall.value
+  );
+  return selected ? selected.name : "";
+});
+
+// 鑾峰彇褰撳墠閫変腑鐨勮澶囦俊鎭�
+const selectedDevices = computed(() => {
+  return filteredTableData.value.filter((item) => item.selected);
+});
+
+// 灏佽鏋勯�犺〃鍗曠殑鏂规硶
+const buildSchemeForm = () => {
+  return {
+    name: schemeName.value,
+    geom: props.selectedArea,
+    type: 2,
+    gauges: [
+      {
+        id: "xxxxxxxxxxxxxx",
+        name: "闆ㄩ噺璁�1",
+        x: 119.0,
+        y: 28.0,
+        r: 10000,
+      },
+      {
+        id: "xxxxxxxxxxxxxx",
+        name: "闆ㄩ噺璁�2",
+        x: 119.0,
+        y: 28.0,
+        r: 10000,
+      },
+    ],
+  };
+};
+
+// 鎵撳紑淇濆瓨鏂规瀵硅瘽妗�
+const openSaveDialog = async () => {
+  await simStore.addSimCheme(buildSchemeForm());
+  EventBus.emit("close-selectArea");
+};
+
+// 鍏抽棴淇濆瓨鏂规瀵硅瘽妗�
+const handleClose = () => {
+  saveDialogVisible.value = false;
+};
+
+// 娉ㄥ叆妯℃嫙鎿嶄綔鏂规硶
+const { startSimulate, endSimulate } = inject("simulateActions");
+
+async function startPlay() {
+  const selectedItems = filteredTableData.value.filter((item) => item.selected);
+  if (selectedItems.length > 0) {
+    console.log(
+      "閫変腑鐨勯」锛�",
+      selectedItems.map((item) => item.name)
+    );
+  } else {
+    console.log("鏈�変腑浠讳綍椤�");
+  }
+  console.log("褰撳墠閫変腑鐨勫尯鍩燂細", props.selectedArea);
+  console.log("褰撳墠閫変腑鐨勯洦閲忔暟鎹細", selectedRainfall.value);
+  // 寮�濮嬫ā鎷熷墠闇�瑕佸厛淇濆瓨鏂规
+  await simStore.addSimCheme(buildSchemeForm());
+  EventBus.emit("close-selectArea");
+  initeWaterPrimitiveView();
+  startSimulate();
+}
+
+const toggleDetails = () => {
+  isCollapsed.value = !isCollapsed.value;
+};
+
+const futurePredictions = () => {
+  console.log("鏈潵棰勬祴鎸夐挳琚偣鍑�");
+};
+</script>
+
+<style scoped>
+.custom-dialog {
+  z-index: 3000 !important;
+}
+.real-time-simulation {
+  margin-bottom: 20px;
+}
+
+.clickable-text {
+  margin-left: 160px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #61f7d4;
+}
+
+.details {
+  margin-top: 10px;
+  transition: height 0.3s ease, opacity 0.3s ease;
+  overflow: hidden;
+}
+
+.hidden {
+  height: 0;
+  opacity: 0;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-right: 10px;
+  box-sizing: border-box;
+}
+
+.input-item {
+  display: flex;
+  align-items: center;
+}
+
+label {
+  text-align: left;
+  white-space: nowrap;
+  margin-right: 10px;
+}
+
+.el-select {
+  flex: 4;
+  text-align: left;
+  margin-bottom: 10px;
+}
+
+.table-container {
+  font-size: 12px;
+  height: 120px;
+  overflow-y: auto;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 5px;
+}
+
+.table-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 0;
+  border-bottom: 1px solid #ddd;
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.table-row span {
+  flex: 1;
+  text-align: left;
+}
+
+.table-row input[type="checkbox"] {
+  margin-right: 10px;
+}
+
+.buttons {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
+}
+
+.el-button {
+  flex: 1;
+}
+</style>
diff --git a/src/views/left/KGSimOption/RealTimeSimulation.vue b/src/views/left/KGSimOption/RealTimeSimulation.vue
index 443be5c..b998506 100644
--- a/src/views/left/KGSimOption/RealTimeSimulation.vue
+++ b/src/views/left/KGSimOption/RealTimeSimulation.vue
@@ -6,82 +6,65 @@
         isCollapsed ? "灞曞紑" : "鏀惰捣"
       }}</span>
     </div>
-    <div class="details" :class="{ hidden: isCollapsed }">
-      <div class="input-group">
-        <div class="input-item">
-          <label>鏂规鍚嶇О:</label>
-          <el-input
-            v-model="schemeName"
-            type="text"
-            placeholder="璇疯緭鍏�"
-          ></el-input>
+
+    <el-form
+      :model="formData"
+      label-width="auto"
+      style="max-width: 600px; padding-right: 10px; box-sizing: border-box"
+    >
+      <el-collapse-transition style="margin-top: 10px">
+        <div v-show="!isCollapsed">
+          <el-form-item label="鏂规鍚嶇О:">
+            <el-input
+              v-model="formData.name"
+              type="text"
+              placeholder="璇疯緭鍏�"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="闆ㄩ噺鏁版嵁:">
+            <el-select
+              v-model="formData.selectedRainfall"
+              placeholder="璇烽�夋嫨"
+              popper-class="mySelectStyle"
+            >
+              <el-option
+                v-for="item in rainfallData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <div class="table-container">
+              <div
+                class="table-row"
+                v-for="(item, index) in filteredTableData"
+                :key="index"
+              >
+                <input type="checkbox" v-model="item.selected" />
+                <span>{{ item.name }}</span>
+              </div>
+            </div>
+          </el-form-item>
         </div>
-        <div class="input-item">
-          <label>闆ㄩ噺鏁版嵁:</label>
-          <el-select
-            v-model="selectedRainfall"
-            placeholder="璇烽�夋嫨"
-            popper-class="mySelectStyle"
-          >
-            <el-option
-              v-for="item in rainfallData"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            ></el-option>
-          </el-select>
-        </div>
-      </div>
-      <div class="table-container">
-        <div
-          class="table-row"
-          v-for="(item, index) in filteredTableData"
-          :key="index"
-        >
-          <input type="checkbox" v-model="item.selected" />
-          <span>{{ item.name }}</span>
-        </div>
-      </div>
-      <!-- <div style="margin-top: 10px;">
+      </el-collapse-transition>
+    </el-form>
+
+    <!-- <div style="margin-top: 10px;">
         <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>
       <el-button type="success" @click="futurePredictions">鏈潵棰勬祴</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></p>
-        <ul>
-          <li v-for="item in selectedDevices" :key="item.id">{{ item.name }}</li>
-        </ul>
-      </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, watch, defineProps, computed, inject } from "vue";
+import { ref, watch, defineProps, computed, inject, reactive } from "vue";
 import { ElMessage } from "element-plus";
 import { initeWaterPrimitiveView } from "@/utils/water";
 import { SimAPIStore } from "@/store/simAPI";
@@ -90,27 +73,28 @@
 // 鑾峰彇 Store 瀹炰緥
 const simStore = SimAPIStore();
 
-// 鑾峰彇 Store 瀹炰緥
-const schemeName = ref("鏂规鍚嶇О"); // 鏂规鍚嶇О
-
-// 娉ㄥ叆妯℃嫙鎿嶄綔鏂规硶
-const { startSimulate, endSimulate } = inject("simulateActions");
-
-function startPlay() {
-  const selectedItems = filteredTableData.value.filter((item) => item.selected);
-  if (selectedItems.length > 0) {
-    console.log(
-      "閫変腑鐨勯」锛�",
-      selectedItems.map((item) => item.name)
-    );
-  } else {
-    console.log("鏈�変腑浠讳綍椤�");
-  }
-  console.log("褰撳墠閫変腑鐨勫尯鍩燂細", props.selectedArea);
-  console.log("褰撳墠閫変腑鐨勯洦閲忔暟鎹細", selectedRainfall.value);
-  initeWaterPrimitiveView();
-  startSimulate();
-}
+// 琛ㄥ崟鏁版嵁
+const formData = reactive({
+  name: "鏂规鍚嶇О",
+  selectedRainfall: "",
+  type: 2,
+  gauges: [
+    {
+      id: "xxxxxxxxxxxxxx",
+      name: "闆ㄩ噺璁�1",
+      x: 119.0,
+      y: 28.0,
+      r: 10000,
+    },
+    {
+      id: "xxxxxxxxxxxxxx",
+      name: "闆ㄩ噺璁�2",
+      x: 119.0,
+      y: 28.0,
+      r: 10000,
+    },
+  ],
+});
 
 // 宸ュ叿鍑芥暟锛氭繁鎷疯礉骞惰缃粯璁ら�変腑鐘舵��
 function deepCloneAndSetSelected(data) {
@@ -128,13 +112,9 @@
     required: true,
   },
 });
-
-// 瀛愮粍浠跺唴閮ㄧ姸鎬�
-const rainfallData = ref([]); // 闆ㄩ噺鏁版嵁
+const rainfallData = ref([]);
 const tableData = ref({}); // 琛ㄦ牸鏁版嵁锛堟寜闆ㄩ噺鏁版嵁鍒嗙粍锛�
-const selectedRainfall = ref(""); // 褰撳墠閫変腑鐨勯洦閲忔暟鎹�
 const isCollapsed = ref(false); // 鎺у埗灞曞紑/鏀惰捣鐘舵��
-const saveDialogVisible = ref(false); // 鎺у埗淇濆瓨鏂规瀵硅瘽妗嗘樉绀虹姸鎬�
 
 // 妯℃嫙涓嶅悓鍖哄煙鐨勬暟鎹�
 const areaDataMap = {
@@ -192,31 +172,34 @@
 watch(
   () => props.selectedArea,
   (newArea) => {
-    if (areaDataMap[newArea]) {
-      rainfallData.value = areaDataMap[newArea].rainfallData;
+    console.log(newArea.label, "new");
+    if (areaDataMap[newArea.label]) {
+      rainfallData.value = areaDataMap[newArea.label].rainfallData;
       // 浣跨敤娣辨嫹璐濊缃粯璁ら�変腑鐘舵��
-      tableData.value = deepCloneAndSetSelected(areaDataMap[newArea].tableData);
-      selectedRainfall.value = ""; // 娓呯┖閫変腑鐨勯洦閲忔暟鎹�
+      tableData.value = deepCloneAndSetSelected(
+        areaDataMap[newArea.label].tableData
+      );
+      formData.selectedRainfall = ""; // 娓呯┖閫変腑鐨勯洦閲忔暟鎹�
     } else {
       rainfallData.value = [];
       tableData.value = {};
-      selectedRainfall.value = "";
+      formData.selectedRainfall = "";
     }
-  },
-  { immediate: true } // 绔嬪嵆鎵ц涓�娆★紝纭繚鍒濆鏁版嵁姝ｇ‘
+  }
+  // { immediate: true } // 绔嬪嵆鎵ц涓�娆★紝纭繚鍒濆鏁版嵁姝ｇ‘
 );
 
 // 鍔ㄦ�佽绠楄〃鏍兼暟鎹�
 const filteredTableData = computed(() => {
-  return selectedRainfall.value && tableData.value[selectedRainfall.value]
-    ? tableData.value[selectedRainfall.value]
+  return formData.selectedRainfall && tableData.value[formData.selectedRainfall]
+    ? tableData.value[formData.selectedRainfall]
     : [];
 });
 
 // 鑾峰彇褰撳墠閫変腑鐨勯洦閲忔暟鎹悕绉�
 const selectedRainfallName = computed(() => {
   const selected = rainfallData.value.find(
-    (item) => item.id === selectedRainfall.value
+    (item) => item.id === formData.selectedRainfall
   );
   return selected ? selected.name : "";
 });
@@ -226,61 +209,42 @@
   return filteredTableData.value.filter((item) => item.selected);
 });
 
+const resetForm = () => {
+  formData.name = "";
+  formData.selectedRainfall = "";
+};
+
 // 鎵撳紑淇濆瓨鏂规瀵硅瘽妗�
 const openSaveDialog = async () => {
-  const forms = {
-    name: schemeName.value,
-    geom: props.selectedArea,
-    type: 2,
-    gauges: [
-      {
-        id: "xxxxxxxxxxxxxx",
-        name: "闆ㄩ噺璁�1",
-        x: 119.0,
-        y: 28.0,
-        r: 10000,
-      },
-      {
-        id: "xxxxxxxxxxxxxx",
-        name: "闆ㄩ噺璁�2",
-        x: 119.0,
-        y: 28.0,
-        r: 10000,
-      },
-    ],
-  };
-  await simStore.addSimCheme(forms);
+  try {
+    formData.geom = props.selectedArea;
+    await simStore.addSimCheme(formData);
+    resetForm();
+    EventBus.emit("close-selectArea");
+  } catch (err) {}
+};
+
+// 娉ㄥ叆妯℃嫙鎿嶄綔鏂规硶
+const { startSimulate, endSimulate } = inject("simulateActions");
+
+async function startPlay() {
+  const selectedItems = filteredTableData.value.filter((item) => item.selected);
+  if (selectedItems.length > 0) {
+    console.log(
+      "閫変腑鐨勯」锛�",
+      selectedItems.map((item) => item.name)
+    );
+  } else {
+    console.log("鏈�変腑浠讳綍椤�");
+  }
+  console.log("褰撳墠閫変腑鐨勫尯鍩燂細", props.selectedArea);
+  // 寮�濮嬫ā鎷熷墠闇�瑕佸厛淇濆瓨鏂规
+  formData.geom = props.selectedArea;
+  await simStore.addSimCheme(formData);
   EventBus.emit("close-selectArea");
-};
-
-// 鍏抽棴淇濆瓨鏂规瀵硅瘽妗�
-const handleClose = () => {
-  saveDialogVisible.value = false;
-};
-
-// // 纭淇濆瓨
-// const confirmSave = () => {
-//   // 鏋勯�犳柊鐨勬柟妗堝璞�
-//   const newScheme = {
-//     name: schemeName.value,//鏂规鍚嶇О
-//     id: Date.now().toString(), // 鍞竴 ID
-//     area: props.selectedArea, // 鍖哄煙
-//     name: selectedRainfallName.value, // 鏂规鍚嶇О锛堥洦閲忔暟鎹被鍨嬶級
-//     createTime: new Date().toISOString(), // 鍒涘缓鏃堕棿
-//     taskStatus:1, // 鍒濆鐘舵�佷负鏈紑濮�
-//     rainfallType: selectedRainfallName.value, // 闆ㄩ噺鏁版嵁绫诲瀷
-//     devices: selectedDevices.value.map((item) => item.name), // 璁惧淇℃伅
-//   };
-
-//   // 璋冪敤 Store 鐨勬柟娉曟坊鍔犳柟妗�
-//   simStore.addSchemCard(newScheme);
-
-//   console.log("淇濆瓨鏂规鎴愬姛", newScheme);
-//   ElMessage.success("鏂规宸蹭繚瀛�");
-
-//   // 鍏抽棴瀵硅瘽妗�
-//   saveDialogVisible.value = false;
-// };
+  initeWaterPrimitiveView();
+  startSimulate();
+}
 
 const toggleDetails = () => {
   isCollapsed.value = !isCollapsed.value;
@@ -321,6 +285,8 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
+  padding-right: 10px;
+  box-sizing: border-box;
 }
 
 .input-item {
@@ -343,6 +309,7 @@
 .table-container {
   font-size: 12px;
   height: 120px;
+  width: 90%;
   overflow-y: auto;
   border: 1px solid #ddd;
   border-radius: 4px;
@@ -372,7 +339,10 @@
 .buttons {
   margin-top: 20px;
   display: flex;
+  justify-content: flex-end;
   gap: 10px;
+  padding-right: 10px;
+  box-sizing: border-box;
 }
 
 .el-button {
diff --git a/src/views/mnfz.vue b/src/views/mnfz.vue
index 2c3352b..399744d 100644
--- a/src/views/mnfz.vue
+++ b/src/views/mnfz.vue
@@ -295,7 +295,7 @@
     url: "/json/line.json",
     color: "#00FF00",
     width: 12.0,
-    pointColor: "#73FFA7",
+    pointColor: "#FFFF73",
     speed: 2,
     far: 50000,
   });
diff --git a/vue.config.js b/vue.config.js
index 4a72e7e..10c4b22 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -30,7 +30,7 @@
         secure: false
       },
       '/hp': {
-        target: 'http://192.168.56.106:9511',
+        target: 'http://192.168.56.106:9522',
         changeOrigin: true,
         pathRewrite: {
           '^/hp': ''

--
Gitblit v1.9.3