From 75134e86655dedcb2ad574146dadaad1a24f6f01 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期二, 13 五月 2025 14:09:24 +0800
Subject: [PATCH] 修改很多很多很多
---
src/views/left/KGSimOption/RealTimeSimulation.vue | 272 ++++++++++++++++++++++++------------------------------
1 files changed, 121 insertions(+), 151 deletions(-)
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 {
--
Gitblit v1.9.3