From c478619b44e437b9df2179adfa79a1e50b6be222 Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期三, 23 四月 2025 10:22:05 +0800
Subject: [PATCH] 提交
---
vue.config.js | 2
src/store/simAPI.js | 16 +
src/api/trApi.js | 2
src/views/left/KGSimOption/PredictiveSimulation.vue | 374 ++++++++++++++++++++++++++--------------------
src/views/left/CitySim.vue | 70 ++++---
5 files changed, 265 insertions(+), 199 deletions(-)
diff --git a/src/api/trApi.js b/src/api/trApi.js
index 9d7bd66..0fee9ce 100644
--- a/src/api/trApi.js
+++ b/src/api/trApi.js
@@ -8,7 +8,7 @@
name: undefined,
type: undefined,
pageNum: 1,
- pageSize: 10
+ pageSize: 100000
};
const finalParams = { ...defaultParams, ...params };
const response = await instance.get('/region/selectPage', {
diff --git a/src/store/simAPI.js b/src/store/simAPI.js
index c62550f..bc0ffc9 100644
--- a/src/store/simAPI.js
+++ b/src/store/simAPI.js
@@ -1,6 +1,6 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage, ElMessageBox, formMetaProps } from 'element-plus'
import { createSimData } from '@/api/trApi';
export const SimAPIStore = defineStore('SimAPI', () => {
@@ -28,7 +28,7 @@
case '棰勬祴妯℃嫙': return 1
case '瀹炴椂妯℃嫙': return 2
case '鍘嗗彶妯℃嫙': return 3
- default: return 0
+ default: return 3
}
}
@@ -56,12 +56,20 @@
try {
const params = {
+ geom: forms.eare,
areaType: getAreaType(selectTab.value),
createTime: Date.now(),
name: forms.name,
- type: getRainType(forms.type),
+ type: forms.type,
status: 0,
- data: forms.data
+ data: JSON.stringify({
+ type: forms.type,
+ total: forms.rainfall,
+ duration: forms.duration,
+ intensity: forms.intensity,
+ prediction: forms.prediction,
+ mode: forms.mode
+ })
}
const res = await createSimData(params)
ElMessage.success('鏂规淇濆瓨鎴愬姛')
diff --git a/src/views/left/CitySim.vue b/src/views/left/CitySim.vue
index 7565ca9..45d5aa2 100644
--- a/src/views/left/CitySim.vue
+++ b/src/views/left/CitySim.vue
@@ -46,7 +46,7 @@
style="max-width: 600px"
>
<el-option
- v-for="item in cityOptions"
+ v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
@@ -63,7 +63,7 @@
style="max-width: 600px"
>
<el-option
- v-for="item in earesOptions"
+ v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
@@ -119,57 +119,60 @@
import { initeWaterPrimitiveView } from "@/utils/water";
import { SimAPIStore } from "@/store/simAPI";
import { getRegionData } from "@/api/trApi";
+import { storeToRefs } from "pinia";
-const cityOptions = reactive([]);
+const simStore = SimAPIStore();
+const { selectTab } = storeToRefs(simStore);
-onMounted(() => {
- getRegionData({ type: 1 }).then((res) => {
- console.log(res, "res");
+const options = reactive([]);
+
+// 瀹氫箟涓�涓柟娉曪紝鐢ㄤ簬鏍规嵁 type 鑾峰彇鍖哄煙鏁版嵁
+const fetchRegionData = (type) => {
+ getRegionData({ type: type }).then((res) => {
// 浣跨敤鍝嶅簲寮忔暟缁勭殑鏂规硶鏇存柊鍐呭
- cityOptions.splice(
+ options.splice(
0,
- cityOptions.length,
+ options.length,
...res.data.map((item) => ({
value: item.geom,
label: item.name,
}))
);
});
+};
+
+onMounted(() => {
+ fetchRegionData(1);
});
-const simStore = SimAPIStore();
+// 鐩戝惉 selectTab 鐨勫彉鍖�
+watch(selectTab, (newVal) => {
+ let type;
+ switch (newVal) {
+ case "琛屾斂鍖哄垝浠跨湡":
+ type = 1;
+ break;
+ case "閲嶇偣鍖哄煙浠跨湡":
+ type = 2;
+ break;
+ default:
+ type = 1; // 榛樿鍊�
+ }
+ fetchRegionData(type);
+});
// 娉ㄥ叆鐖剁粍浠舵彁渚涚殑鏂规硶
const { startSimulate, endSimulate } = inject("simulateActions");
// 琛ㄥ崟鏁版嵁
const forms = reactive({
name: "",
- eare: "鍖椾含甯�",
+ eare: "",
eares: "瀛欒儭娌�",
rainfall: "",
duration: "",
intensity: "",
fileList: [],
-});
-
-const earesOptions = [
- { value: "瀛欒儭娌�", label: "瀛欒儭娌�" },
- { value: "楸兼按娲炲悗娌�", label: "楸兼按娲炲悗娌�" },
- { value: "浜庡瑗挎矡", label: "浜庡瑗挎矡" },
- { value: "鍖楁渤娌�", label: "鍖楁渤娌�" },
- { value: "榫欐硥宄潙", label: "榫欐硥宄潙" },
-];
-
-// 璁＄畻灞炴�э細鑾峰彇瀵硅瘽妗嗘爣棰�
-const dialogTitle = computed(() => {
- return simStore.selectTab === "琛屾斂鍖哄垝浠跨湡"
- ? "琛屾斂鍖哄垝浠跨湡"
- : "閲嶇偣鍖哄煙浠跨湡";
-});
-
-// 璁＄畻灞炴�э細鑾峰彇涓婁紶鏂囦欢鐨勫悕绉板垪琛�
-const uploadedFilesText = computed(() => {
- return forms.fileList.map((file) => file.name).join(", ") || "鏃�";
+ type: 3,
});
const addSimCheme = async () => {
@@ -178,7 +181,7 @@
// 閲嶇疆琛ㄥ崟
const resetForm = () => {
- forms.eare = "鍖椾含甯�";
+ forms.eare = "";
forms.eares = "瀛欒儭娌�";
forms.rainfall = "";
forms.duration = "";
@@ -186,6 +189,11 @@
forms.fileList = [];
};
+// 璁＄畻灞炴�э細鑾峰彇涓婁紶鏂囦欢鐨勫悕绉板垪琛�
+const uploadedFilesText = computed(() => {
+ return forms.fileList.map((file) => file.name).join(", ") || "鏃�";
+});
+
// 鏂囦欢鍙樺寲鏃惰Е鍙戣В鏋�
const handleFileChange = (file) => {
const reader = new FileReader();
diff --git a/src/views/left/KGSimOption/PredictiveSimulation.vue b/src/views/left/KGSimOption/PredictiveSimulation.vue
index bfdf287..40d5190 100644
--- a/src/views/left/KGSimOption/PredictiveSimulation.vue
+++ b/src/views/left/KGSimOption/PredictiveSimulation.vue
@@ -1,98 +1,124 @@
- <template>
- <div class="history-simulation">
- <div class="left-top">
- <span>棰勬祴妯℃嫙</span>
- <span class="clickable-text" @click="toggleDetails">{{ isCollapsed ? '灞曞紑' : '鏀惰捣' }}</span>
+<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>
</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>
- </div>
- <div class="input-item">
- <label>鏂规鍚嶇О:</label>
- <el-input v-model="schemeName" type="text" placeholder="璇疯緭鍏�"></el-input>
- </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>
+ <div class="input-item">
+ <label>鏂规鍚嶇О:</label>
+ <el-input
+ v-model="schemeName"
+ type="text"
+ placeholder="璇疯緭鍏�"
+ ></el-input>
+ </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="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>{{ schemeName }}</p>
- <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>
+ <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>{{ schemeName }}</p>
+ <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 { ElMessage } from 'element-plus';
+import { ref, 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();
// 娉ㄥ叆妯℃嫙鎿嶄綔鏂规硶
const { startSimulate, endSimulate } = inject("simulateActions");
@@ -108,60 +134,84 @@
const props = defineProps({
selectedArea: {
type: String,
- required: true
- }
+ required: true,
+ },
});
// 鏁版嵁缁戝畾
const isCollapsed = ref(false); // 鎺у埗灞曞紑/鏀惰捣鐘舵��
const totalRainfall = ref(50); // 闄嶉洦闆ㄩ噺
-const schemeName = ref('鏂规鍚嶇О'); // 鏂规鍚嶇О
+const schemeName = ref("鏂规鍚嶇О"); // 鏂规鍚嶇О
const rainfallIntensity = ref(70); // 闄嶉洦寮哄害
const rainfallDuration = ref(5); // 棰勮鏃堕暱
-const selectedForecastData = ref('4'); // 榛樿閫変腑鈥滆嚜瀹氫箟鍙傛暟鈥�
-const selectedRainfallPatterns = ref('1'); // 榛樿閫変腑鈥滄鎬佸垎甯冣��
+const selectedForecastData = ref("4"); // 榛樿閫変腑鈥滆嚜瀹氫箟鍙傛暟鈥�
+const selectedRainfallPatterns = ref("1"); // 榛樿閫変腑鈥滄鎬佸垎甯冣��
const saveDialogVisible = ref(false); // 鎺у埗淇濆瓨鏂规瀵硅瘽妗嗙殑鏄剧ず鐘舵��
// 棰勬祴鏁版嵁閫夐」
const ForecastData = [
- { id: '1', name: '闄嶉洦鍦烘' },
- { id: '2', name: '姘旇薄鏁版嵁' },
- { id: '3', name: '閫愬皬鏃堕鎶ユ暟鎹�' },
- { id: '4', name: '鑷畾涔夊弬鏁�' }
+ { id: "1", name: "闄嶉洦鍦烘" },
+ { id: "2", name: "姘旇薄鏁版嵁" },
+ { id: "3", name: "閫愬皬鏃堕鎶ユ暟鎹�" },
+ { id: "4", name: "鑷畾涔夊弬鏁�" },
];
// 闄嶉洦妯″紡閫夐」
const RainfallPatterns = [
- { id: '1', name: '姝ｆ�佸垎甯�' },
- { id: '2', name: '骞冲潎鍒嗗竷' },
- { id: '3', name: '娉㈠姩骞冲潎鍒嗗竷' },
- { id: '4', name: '鎸佺画涓婂崌' }
+ { id: "1", name: "姝ｆ�佸垎甯�" },
+ { id: "2", name: "骞冲潎鍒嗗竷" },
+ { id: "3", name: "娉㈠姩骞冲潎鍒嗗竷" },
+ { id: "4", name: "鎸佺画涓婂崌" },
];
// 璁＄畻灞炴�э細鑾峰彇褰撳墠閫変腑鐨勯娴嬫暟鎹悕绉�
const selectedForecastDataName = computed(() => {
- const selected = ForecastData.find(item => item.id === selectedForecastData.value);
- return selected ? selected.name : '';
+ const selected = ForecastData.find(
+ (item) => item.id === selectedForecastData.value
+ );
+ return selected ? selected.name : "";
});
// 璁＄畻灞炴�э細鑾峰彇褰撳墠閫変腑鐨勯檷闆ㄦā寮忓悕绉�
const selectedRainfallPatternsName = computed(() => {
- const selected = RainfallPatterns.find(item => item.id === selectedRainfallPatterns.value);
- return selected ? selected.name : '';
+ const selected = RainfallPatterns.find(
+ (item) => item.name === selectedRainfallPatterns.value
+ );
+ return selected ? selected.name : "";
});
// 鍒囨崲璇︽儏鏄剧ず
const toggleDetails = () => {
isCollapsed.value = !isCollapsed.value;
};
+// const simStore = SimAPIStore();
// 鎵撳紑淇濆瓨鏂规瀵硅瘽妗�
-const openSaveDialog = () => {
- if (!props.selectedArea || !selectedForecastData.value ||!schemeName.value || !totalRainfall.value || !rainfallIntensity.value || !selectedRainfallPatterns.value || !rainfallDuration.value) {
- ElMessage.warning('璇峰厛濉啓鎵�鏈夊繀濉」');
- return;
- }
- saveDialogVisible.value = true;
+const openSaveDialog = async () => {
+ const forms = {
+ name: schemeName.value,
+ type: 1,
+ rainfall: totalRainfall.value,
+ duration: rainfallDuration.value,
+ intensity: rainfallIntensity.value,
+ mode: selectedRainfallPatterns.value,
+ prediction: selectedForecastDataName.value,
+ };
+ console.log(forms, "forms");
+ await simStore.addSimCheme(forms);
+ // if (
+ // !props.selectedArea ||
+ // !selectedForecastData.value ||
+ // !schemeName.value ||
+ // !totalRainfall.value ||
+ // !rainfallIntensity.value ||
+ // !selectedRainfallPatterns.value ||
+ // !rainfallDuration.value
+ // ) {
+ // ElMessage.warning("璇峰厛濉啓鎵�鏈夊繀濉」");
+ // return;
+ // }
+ // saveDialogVisible.value = true;
};
// 鍏抽棴淇濆瓨鏂规瀵硅瘽妗�
@@ -178,7 +228,7 @@
name: selectedForecastDataName.value, // 鏂规鍚嶇О锛堥娴嬫暟鎹被鍨嬶級
createTime: new Date().toISOString(), // 鍒涘缓鏃堕棿
taskStatus: 1, // 鍒濆鐘舵�佷负鏈紑濮�
- simulationType: '棰勬祴妯℃嫙', // 妯℃嫙绫诲瀷
+ simulationType: "棰勬祴妯℃嫙", // 妯℃嫙绫诲瀷
forecastData: selectedForecastDataName.value, // 棰勬祴鏁版嵁
totalRainfall: `${totalRainfall.value} mm`, // 闄嶉洦闆ㄩ噺
schemeName: schemeName.value, // 闄嶉洦鎬婚噺
@@ -199,69 +249,69 @@
// 鎵撳紑鏂规
const openPlan = () => {
- console.log('鎵撳紑鏂规鎸夐挳琚偣鍑�');
+ console.log("鎵撳紑鏂规鎸夐挳琚偣鍑�");
};
</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>
diff --git a/vue.config.js b/vue.config.js
index eb25a59..45ca340 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -21,7 +21,7 @@
hot: true,
proxy: {
'/api': {
- target: 'http://192.168.56.107:8078',
+ target: 'http://192.168.56.107:8077',
changeOrigin: true,
// pathRewrite: {
// '^/api': ''
--
Gitblit v1.9.3