From a8e5c275a8724feff972502c1b2db348dba4482b Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期五, 16 五月 2025 09:57:50 +0800
Subject: [PATCH] 对接中科软接口
---
src/views/left/KGSimOption/RealTimeSimulation.vue | 222 +++++++++++++++++++++++++------------------------------
1 files changed, 102 insertions(+), 120 deletions(-)
diff --git a/src/views/left/KGSimOption/RealTimeSimulation.vue b/src/views/left/KGSimOption/RealTimeSimulation.vue
index b998506..217790c 100644
--- a/src/views/left/KGSimOption/RealTimeSimulation.vue
+++ b/src/views/left/KGSimOption/RealTimeSimulation.vue
@@ -23,15 +23,16 @@
</el-form-item>
<el-form-item label="闆ㄩ噺鏁版嵁:">
<el-select
+ @change="handleChange"
v-model="formData.selectedRainfall"
placeholder="璇烽�夋嫨"
popper-class="mySelectStyle"
>
<el-option
- v-for="item in rainfallData"
+ v-for="item in options"
:key="item.id"
:label="item.name"
- :value="item.id"
+ :value="item.name"
></el-option>
</el-select>
</el-form-item>
@@ -39,11 +40,11 @@
<div class="table-container">
<div
class="table-row"
- v-for="(item, index) in filteredTableData"
+ v-for="(item, index) in shgList"
:key="index"
>
<input type="checkbox" v-model="item.selected" />
- <span>{{ item.name }}</span>
+ <span>{{ item.deviceName }}</span>
</div>
</div>
</el-form-item>
@@ -56,7 +57,7 @@
<div style="width: 100%; height: 60px; background-color: #fff;"></div>
</div> -->
<div class="buttons">
- <el-button type="primary" @click="openSaveDialog">淇濆瓨鏂规</el-button>
+ <el-button type="primary" @click="saveSim">淇濆瓨鏂规</el-button>
<el-button type="success" @click="startPlay">寮�濮嬫ā鎷�</el-button>
<el-button type="success" @click="futurePredictions">鏈潵棰勬祴</el-button>
</div>
@@ -64,11 +65,20 @@
</template>
<script setup>
-import { ref, watch, defineProps, computed, inject, reactive } from "vue";
+import {
+ ref,
+ watch,
+ defineProps,
+ computed,
+ inject,
+ reactive,
+ onMounted,
+} from "vue";
import { ElMessage } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
import { SimAPIStore } from "@/store/simAPI";
import { EventBus } from "@/eventBus"; // 寮曞叆浜嬩欢鎬荤嚎
+import { getDeviceInfo } from "@/api/hpApi";
// 鑾峰彇 Store 瀹炰緥
const simStore = SimAPIStore();
@@ -78,32 +88,8 @@
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,
- },
- ],
+ gauges: [],
});
-
-// 宸ュ叿鍑芥暟锛氭繁鎷疯礉骞惰缃粯璁ら�変腑鐘舵��
-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({
@@ -112,111 +98,107 @@
required: true,
},
});
-const rainfallData = ref([]);
+
const tableData = ref({}); // 琛ㄦ牸鏁版嵁锛堟寜闆ㄩ噺鏁版嵁鍒嗙粍锛�
const isCollapsed = 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" },
- ],
- },
- },
+// 闆ㄩ噺璁′笅鎷夋
+const options = ref([
+ { id: "1", name: "姘旇薄瀹炴椂鏁版嵁" },
+ { id: "2", name: "闆ㄩ噺璁″疄鏃舵暟鎹�" },
+]);
+
+// 闆ㄩ噺璁″垪琛�
+const shgList = ref([]);
+// 鎵�鏈夌殑闆ㄩ噺璁″垪琛�
+const rainListNoFilter = ref([]);
+
+// 鑾峰彇鎵�鏈夐洦閲忚鏁版嵁锛堟潵鑷帴鍙ｏ級
+const getRainListAll = () => {
+ // 闆ㄩ噺璁＄被鍨媔d
+ const ids = "1874719366287368194";
+ getDeviceInfo(ids).then((res) => {
+ rainListNoFilter.value = res.data.pageData;
+ // 鏍规嵁褰撳墠閫夋嫨鐨勫尯鍩熻嚜鍔ㄨ繃婊�
+ updateShgListByArea();
+ });
};
-// 鏍规嵁 selectedArea 鏇存柊鏁版嵁
+// 鏍规嵁 props.selectedArea.label 杩囨护闆ㄩ噺璁″垪琛紝骞惰缃� selected: true
+const updateShgListByArea = () => {
+ const currentArea = props.selectedArea?.label;
+
+ if (!currentArea) {
+ shgList.value = [];
+ return;
+ }
+
+ shgList.value = rainListNoFilter.value
+ .filter((item) => item.deviceName?.includes(currentArea))
+ .map((device) => ({
+ ...device,
+ selected: true, // 榛樿閫変腑
+ }));
+};
+
+// 涓嬫媺妗嗛�変腑鍊肩殑琛ㄦ牸鏁版嵁鍙樺寲
+const handleChange = async (item) => {
+ formData.selectedRainfall = item;
+
+ if (item === "闆ㄩ噺璁″疄鏃舵暟鎹�") {
+ if (!props.selectedArea) {
+ ElMessage.warning("璇峰厛閫夋嫨鍖哄煙");
+ shgList.value = [];
+ return;
+ }
+ // 濡傛灉杩樻病鏈夊姞杞借繃鏁版嵁锛屽垯鍏堣姹傛帴鍙ｅ姞杞�
+ if (rainListNoFilter.value.length === 0) {
+ getRainListAll(); // 鍔犺浇鍏ㄩ儴鏁版嵁鍚庝細鑷姩杩囨护
+ } else {
+ updateShgListByArea(); // 宸叉湁鏁版嵁灏辩洿鎺ヨ繃婊�
+ }
+ } else {
+ shgList.value = [];
+ }
+};
+
+// 鐩戝惉鍖哄煙鍙樺寲锛岄噸鏂拌繃婊ゆ暟鎹�
watch(
() => props.selectedArea,
(newArea) => {
- console.log(newArea.label, "new");
- if (areaDataMap[newArea.label]) {
- rainfallData.value = areaDataMap[newArea.label].rainfallData;
- // 浣跨敤娣辨嫹璐濊缃粯璁ら�変腑鐘舵��
- tableData.value = deepCloneAndSetSelected(
- areaDataMap[newArea.label].tableData
- );
- formData.selectedRainfall = ""; // 娓呯┖閫変腑鐨勯洦閲忔暟鎹�
- } else {
- rainfallData.value = [];
- tableData.value = {};
- formData.selectedRainfall = "";
+ if (!newArea) {
+ ElMessage.warning("璇烽�夋嫨涓�涓尯鍩�");
+ shgList.value = [];
+ } else if (formData.selectedRainfall === "闆ㄩ噺璁″疄鏃舵暟鎹�") {
+ handleChange(formData.selectedRainfall);
}
- }
- // { immediate: true } // 绔嬪嵆鎵ц涓�娆★紝纭繚鍒濆鏁版嵁姝ｇ‘
+ },
+ { immediate: true }
);
-// 鍔ㄦ�佽绠楄〃鏍兼暟鎹�
-const filteredTableData = computed(() => {
- return formData.selectedRainfall && tableData.value[formData.selectedRainfall]
- ? tableData.value[formData.selectedRainfall]
- : [];
-});
-
-// 鑾峰彇褰撳墠閫変腑鐨勯洦閲忔暟鎹悕绉�
-const selectedRainfallName = computed(() => {
- const selected = rainfallData.value.find(
- (item) => item.id === formData.selectedRainfall
- );
- return selected ? selected.name : "";
-});
-
-// 鑾峰彇褰撳墠閫変腑鐨勮澶囦俊鎭�
-const selectedDevices = computed(() => {
- return filteredTableData.value.filter((item) => item.selected);
-});
-
+// 閲嶇疆琛ㄥ崟
const resetForm = () => {
formData.name = "";
formData.selectedRainfall = "";
+ shgList.value = [];
};
-// 鎵撳紑淇濆瓨鏂规瀵硅瘽妗�
-const openSaveDialog = async () => {
+const updateSelectedGauges = () => {
+ formData.gauges = shgList.value
+ .filter((item) => item.selected)
+ .map((item) => ({
+ id: item.deviceCode,
+ deviceName: item.deviceName,
+ x: item.longitude,
+ y: item.latitude,
+ r: 10000,
+ }));
+};
+
+// 淇濆瓨鏂规
+const saveSim = async () => {
try {
+ updateSelectedGauges();
formData.geom = props.selectedArea;
await simStore.addSimCheme(formData);
resetForm();
@@ -309,7 +291,7 @@
.table-container {
font-size: 12px;
height: 120px;
- width: 90%;
+ width: 96%;
overflow-y: auto;
border: 1px solid #ddd;
border-radius: 4px;
--
Gitblit v1.9.3