From f4551c852cfe34e70a4ea4e84680907e189673ec Mon Sep 17 00:00:00 2001 From: guonan <guonan201020@163.com> Date: 星期三, 23 四月 2025 11:45:33 +0800 Subject: [PATCH] 实时模拟 --- src/store/simAPI.js | 30 +++---- src/views/left/KGSimOption/HistorySimulation.vue | 4 src/views/left/KGSimOption/RealTimeSimulation.vue | 198 +++++++++++++++++++++++++++++-------------------- 3 files changed, 131 insertions(+), 101 deletions(-) diff --git a/src/store/simAPI.js b/src/store/simAPI.js index e912de0..648747e 100644 --- a/src/store/simAPI.js +++ b/src/store/simAPI.js @@ -22,29 +22,24 @@ } } - // 鑾峰彇闄嶉洦绫诲瀷 - const getRainType = (tabName) => { - switch (tabName) { - case '棰勬祴妯℃嫙': return 1 - case '瀹炴椂妯℃嫙': return 2 - case '鍘嗗彶妯℃嫙': return 3 - default: return 3 - } - } - // 楠岃瘉琛ㄥ崟 const validateForm = (forms) => { if (!forms?.name) { ElMessage.warning('璇疯緭鍏ユ柟妗堝悕绉�') return false } - if (!forms.name - || !forms.geom - || !forms.rainfall - || !forms.intensity - || !forms.duration) { - ElMessage.warning('璇风‘淇濊〃鍗曞潎宸插~鍐�') - return false + + if (forms.type === 1 || forms.type === 3) { + if (!forms.geom || !forms.rainfall || !forms.intensity || !forms.duration) { + ElMessage.warning('璇风‘淇濊〃鍗曞潎宸插~鍐�') + return false + } + } + if (forms.type === 2) { + if (!forms.geom || !forms.gauges) { + ElMessage.warning('璇风‘淇濊〃鍗曞潎宸插~鍐�') + return false + } } return true } @@ -74,6 +69,7 @@ prediction: forms.prediction, history: forms.history, mode: forms.mode, + gauges: forms.gauges }) } const res = await createSimData(params) diff --git a/src/views/left/KGSimOption/HistorySimulation.vue b/src/views/left/KGSimOption/HistorySimulation.vue index 22daa86..ea6c347 100644 --- a/src/views/left/KGSimOption/HistorySimulation.vue +++ b/src/views/left/KGSimOption/HistorySimulation.vue @@ -72,7 +72,7 @@ </div> <!-- 淇濆瓨鏂规瀵硅瘽妗� --> - <el-dialog + <!-- <el-dialog v-model="saveDialogVisible" title="淇濆瓨鏂规" width="50%" @@ -94,7 +94,7 @@ <el-button type="primary" @click="confirmSave">纭畾淇濆瓨</el-button> </span> </template> - </el-dialog> + </el-dialog> --> </div> </template> diff --git a/src/views/left/KGSimOption/RealTimeSimulation.vue b/src/views/left/KGSimOption/RealTimeSimulation.vue index 3d5675c..5c5825c 100644 --- a/src/views/left/KGSimOption/RealTimeSimulation.vue +++ b/src/views/left/KGSimOption/RealTimeSimulation.vue @@ -2,7 +2,9 @@ <div class="real-time-simulation"> <div class="left-top"> <span>瀹炴椂妯℃嫙</span> - <span class="clickable-text" @click="toggleDetails">{{ isCollapsed ? '灞曞紑' : '鏀惰捣' }}</span> + <span class="clickable-text" @click="toggleDetails">{{ + isCollapsed ? "灞曞紑" : "鏀惰捣" + }}</span> </div> <div class="details" :class="{ hidden: isCollapsed }"> <div class="input-group"> @@ -16,7 +18,11 @@ </div> <div class="input-item"> <label>闆ㄩ噺鏁版嵁:</label> - <el-select v-model="selectedRainfall" placeholder="璇烽�夋嫨" popper-class="mySelectStyle"> + <el-select + v-model="selectedRainfall" + placeholder="璇烽�夋嫨" + popper-class="mySelectStyle" + > <el-option v-for="item in rainfallData" :key="item.id" @@ -27,7 +33,11 @@ </div> </div> <div class="table-container"> - <div class="table-row" v-for="(item, index) in filteredTableData" :key="index"> + <div + class="table-row" + v-for="(item, index) in filteredTableData" + :key="index" + > <input type="checkbox" v-model="item.selected" /> <span>{{ item.name }}</span> </div> @@ -43,7 +53,7 @@ <el-button type="success" @click="futurePredictions">鏈潵棰勬祴</el-button> </div> - <!-- 淇濆瓨鏂规瀵硅瘽妗� --> + <!-- 淇濆瓨鏂规瀵硅瘽妗� <el-dialog v-model="saveDialogVisible" title="淇濆瓨鏂规" @@ -66,32 +76,37 @@ <el-button type="primary" @click="confirmSave">纭畾淇濆瓨</el-button> </span> </template> - </el-dialog> + </el-dialog> --> </div> </template> <script setup> -import { ref, watch, defineProps, computed, inject } from 'vue'; -import { ElMessage } from 'element-plus'; +import { ref, watch, defineProps, computed, inject } from "vue"; +import { ElMessage } from "element-plus"; import { initeWaterPrimitiveView } from "@/utils/water"; -import { useSimStore } from "@/store/simulation.js"; // 寮曞叆 Store +import { SimAPIStore } from "@/store/simAPI"; // 鑾峰彇 Store 瀹炰緥 -const simStore = useSimStore(); +const simStore = SimAPIStore(); + +// 鑾峰彇 Store 瀹炰緥 const schemeName = ref("鏂规鍚嶇О"); // 鏂规鍚嶇О // 娉ㄥ叆妯℃嫙鎿嶄綔鏂规硶 const { startSimulate, endSimulate } = inject("simulateActions"); function startPlay() { - const selectedItems = filteredTableData.value.filter(item => item.selected); + const selectedItems = filteredTableData.value.filter((item) => item.selected); if (selectedItems.length > 0) { - console.log('閫変腑鐨勯」锛�', selectedItems.map(item => item.name)); + console.log( + "閫変腑鐨勯」锛�", + selectedItems.map((item) => item.name) + ); } else { - console.log('鏈�変腑浠讳綍椤�'); + console.log("鏈�変腑浠讳綍椤�"); } - console.log('褰撳墠閫変腑鐨勫尯鍩燂細', props.selectedArea); - console.log('褰撳墠閫変腑鐨勯洦閲忔暟鎹細', selectedRainfall.value); + console.log("褰撳墠閫変腑鐨勫尯鍩燂細", props.selectedArea); + console.log("褰撳墠閫変腑鐨勯洦閲忔暟鎹細", selectedRainfall.value); initeWaterPrimitiveView(); startSimulate(); } @@ -100,7 +115,7 @@ function deepCloneAndSetSelected(data) { const newData = {}; for (const key in data) { - newData[key] = data[key].map(item => ({ ...item, selected: true })); + newData[key] = data[key].map((item) => ({ ...item, selected: true })); } return newData; } @@ -109,14 +124,14 @@ const props = defineProps({ selectedArea: { type: String, - required: true - } + required: true, + }, }); // 瀛愮粍浠跺唴閮ㄧ姸鎬� const rainfallData = ref([]); // 闆ㄩ噺鏁版嵁 const tableData = ref({}); // 琛ㄦ牸鏁版嵁锛堟寜闆ㄩ噺鏁版嵁鍒嗙粍锛� -const selectedRainfall = ref(''); // 褰撳墠閫変腑鐨勯洦閲忔暟鎹� +const selectedRainfall = ref(""); // 褰撳墠閫変腑鐨勯洦閲忔暟鎹� const isCollapsed = ref(false); // 鎺у埗灞曞紑/鏀惰捣鐘舵�� const saveDialogVisible = ref(false); // 鎺у埗淇濆瓨鏂规瀵硅瘽妗嗘樉绀虹姸鎬� @@ -124,52 +139,52 @@ const areaDataMap = { 瀛欒儭娌�: { rainfallData: [ - { id: '1', name: '姘旇薄瀹炴椂鏁版嵁 - 瀛欒儭娌�' }, - { id: '2', name: '闆ㄩ噺璁″疄鏃舵暟鎹� - 瀛欒儭娌�' } + { id: "1", name: "姘旇薄瀹炴椂鏁版嵁 - 瀛欒儭娌�" }, + { id: "2", name: "闆ㄩ噺璁″疄鏃舵暟鎹� - 瀛欒儭娌�" }, ], tableData: { - '1': [ - { id: '001', name: '瀛欒儭娌熸皵璞$珯001' }, - { id: '002', name: '瀛欒儭娌熸皵璞$珯002' } + 1: [ + { id: "001", name: "瀛欒儭娌熸皵璞$珯001" }, + { id: "002", name: "瀛欒儭娌熸皵璞$珯002" }, ], - '2': [ - { id: '003', name: '瀛欒儭娌熼洦閲忚003' }, - { id: '004', name: '瀛欒儭娌熼洦閲忚004' } - ] - } + 2: [ + { id: "003", name: "瀛欒儭娌熼洦閲忚003" }, + { id: "004", name: "瀛欒儭娌熼洦閲忚004" }, + ], + }, }, 楸兼按娲炲悗娌�: { rainfallData: [ - { id: '1', name: '姘旇薄瀹炴椂鏁版嵁 - 楸兼按娲炲悗娌�' }, - { id: '2', name: '闆ㄩ噺璁″疄鏃舵暟鎹� - 楸兼按娲炲悗娌�' } + { id: "1", name: "姘旇薄瀹炴椂鏁版嵁 - 楸兼按娲炲悗娌�" }, + { id: "2", name: "闆ㄩ噺璁″疄鏃舵暟鎹� - 楸兼按娲炲悗娌�" }, ], tableData: { - '1': [ - { id: '005', name: '楸兼按娲炲悗娌熸皵璞$珯005' }, - { id: '006', name: '楸兼按娲炲悗娌熸皵璞$珯006' } + 1: [ + { id: "005", name: "楸兼按娲炲悗娌熸皵璞$珯005" }, + { id: "006", name: "楸兼按娲炲悗娌熸皵璞$珯006" }, ], - '2': [ - { id: '007', name: '楸兼按娲炲悗娌熼洦閲忚007' }, - { id: '008', name: '楸兼按娲炲悗娌熼洦閲忚008' } - ] - } + 2: [ + { id: "007", name: "楸兼按娲炲悗娌熼洦閲忚007" }, + { id: "008", name: "楸兼按娲炲悗娌熼洦閲忚008" }, + ], + }, }, 浜庡瑗挎矡: { rainfallData: [ - { id: '1', name: '姘旇薄瀹炴椂鏁版嵁 - 浜庡瑗挎矡' }, - { id: '2', name: '闆ㄩ噺璁″疄鏃舵暟鎹� - 浜庡瑗挎矡' } + { id: "1", name: "姘旇薄瀹炴椂鏁版嵁 - 浜庡瑗挎矡" }, + { id: "2", name: "闆ㄩ噺璁″疄鏃舵暟鎹� - 浜庡瑗挎矡" }, ], tableData: { - '1': [ - { id: '009', name: '浜庡瑗挎矡姘旇薄绔�009' }, - { id: '010', name: '浜庡瑗挎矡姘旇薄绔�010' } + 1: [ + { id: "009", name: "浜庡瑗挎矡姘旇薄绔�009" }, + { id: "010", name: "浜庡瑗挎矡姘旇薄绔�010" }, ], - '2': [ - { id: '011', name: '浜庡瑗挎矡闆ㄩ噺璁�011' }, - { id: '012', name: '浜庡瑗挎矡闆ㄩ噺璁�012' } - ] - } - } + 2: [ + { id: "011", name: "浜庡瑗挎矡闆ㄩ噺璁�011" }, + { id: "012", name: "浜庡瑗挎矡闆ㄩ噺璁�012" }, + ], + }, + }, }; // 鏍规嵁 selectedArea 鏇存柊鏁版嵁 @@ -180,11 +195,11 @@ rainfallData.value = areaDataMap[newArea].rainfallData; // 浣跨敤娣辨嫹璐濊缃粯璁ら�変腑鐘舵�� tableData.value = deepCloneAndSetSelected(areaDataMap[newArea].tableData); - selectedRainfall.value = ''; // 娓呯┖閫変腑鐨勯洦閲忔暟鎹� + selectedRainfall.value = ""; // 娓呯┖閫変腑鐨勯洦閲忔暟鎹� } else { rainfallData.value = []; tableData.value = {}; - selectedRainfall.value = ''; + selectedRainfall.value = ""; } }, { immediate: true } // 绔嬪嵆鎵ц涓�娆★紝纭繚鍒濆鏁版嵁姝g‘ @@ -199,22 +214,41 @@ // 鑾峰彇褰撳墠閫変腑鐨勯洦閲忔暟鎹悕绉� const selectedRainfallName = computed(() => { - const selected = rainfallData.value.find(item => item.id === selectedRainfall.value); - return selected ? selected.name : ''; + const selected = rainfallData.value.find( + (item) => item.id === selectedRainfall.value + ); + return selected ? selected.name : ""; }); // 鑾峰彇褰撳墠閫変腑鐨勮澶囦俊鎭� const selectedDevices = computed(() => { - return filteredTableData.value.filter(item => item.selected); + return filteredTableData.value.filter((item) => item.selected); }); // 鎵撳紑淇濆瓨鏂规瀵硅瘽妗� -const openSaveDialog = () => { - if (!props.selectedArea || !selectedRainfall.value || selectedDevices.value.length === 0) { - ElMessage.warning('璇峰厛閫夋嫨鍖哄煙銆侀洦閲忔暟鎹苟鍕鹃�夎澶�'); - return; - } - saveDialogVisible.value = true; +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); }; // 鍏抽棴淇濆瓨鏂规瀵硅瘽妗� @@ -222,36 +256,36 @@ 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), // 璁惧淇℃伅 - }; +// // 纭淇濆瓨 +// 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); +// // 璋冪敤 Store 鐨勬柟娉曟坊鍔犳柟妗� +// simStore.addSchemCard(newScheme); - console.log("淇濆瓨鏂规鎴愬姛", newScheme); - ElMessage.success("鏂规宸蹭繚瀛�"); +// console.log("淇濆瓨鏂规鎴愬姛", newScheme); +// ElMessage.success("鏂规宸蹭繚瀛�"); - // 鍏抽棴瀵硅瘽妗� - saveDialogVisible.value = false; -}; +// // 鍏抽棴瀵硅瘽妗� +// saveDialogVisible.value = false; +// }; const toggleDetails = () => { isCollapsed.value = !isCollapsed.value; }; const futurePredictions = () => { - console.log('鏈潵棰勬祴鎸夐挳琚偣鍑�'); + console.log("鏈潵棰勬祴鎸夐挳琚偣鍑�"); }; </script> @@ -342,4 +376,4 @@ .el-button { flex: 1; } -</style> \ No newline at end of file +</style> -- Gitblit v1.9.3