From e185715da3eb168373efa60f684774a0694990f2 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期四, 15 五月 2025 14:18:48 +0800
Subject: [PATCH] Merge branch 'master' of http://103.135.160.14:9034/r/NslWeb
---
src/components/tools/LayerTree.vue | 1
vue.config.js | 2
src/store/simAPI.js | 2
src/components/monifangzhen/echartInfo.vue | 321 +++++++-----
src/assets/css/infobox.css | 15
src/views/left/KGSimOption/PredictiveSimulation.vue | 70 +-
src/views/left/KGSimOption/HistorySimulation.vue | 313 +++++-------
src/views/mnfz.vue | 2
src/views/left/CitySim.vue | 12
src/components/monifangzhen/schemeCard.vue | 50 +
src/api/hpApi.js | 2
src/store/simulation.js | 4
src/views/left/KGSimOption/RealTimeSimulation copy.vue | 341 ++++++++++++++
src/views/left/KGSimOption/RealTimeSimulation.vue | 272 +++++------
14 files changed, 877 insertions(+), 530 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/assets/css/infobox.css b/src/assets/css/infobox.css
index 431c5e9..3a14a8c 100644
--- a/src/assets/css/infobox.css
+++ b/src/assets/css/infobox.css
@@ -150,7 +150,8 @@
height: 100%;
z-index: 40;
border-radius: 4px;
- padding: 10px 10px;
+ padding: 10px 0px;
+ box-sizing: border-box;
}
.echartCont p {
@@ -165,6 +166,13 @@
width: 100%;
height: 30%;
}
+
+.echartBox {
+ flex: 1;
+ margin-top: 10px;
+ height: calc(100% - 41px);
+}
+
/* .echarts1{
width: 100%;
height: 100%;
@@ -173,11 +181,6 @@
width: 100%;
height: 100%;
} */
-.echartBox {
- flex: 1;
- margin-top: 10px;
- height: calc(100% - 41px);
-}
.listinfo-btns {
width: 100%;
diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue
index f065103..8ac5c1d 100644
--- a/src/components/monifangzhen/echartInfo.vue
+++ b/src/components/monifangzhen/echartInfo.vue
@@ -105,7 +105,9 @@
onUnmounted,
} from "vue";
import dayjs from "dayjs";
-import { getRainfall } from "@/api";
+import { useSimStore } from "@/store/simulation";
+const simStore = useSimStore();
+const { rainFalls } = simStore;
let dataIntervalId = null; // 琛ㄦ牸瀹氭椂鍣� ID
const jsonData = ref([]); // JSON 鏁版嵁
@@ -224,11 +226,11 @@
// 瑙﹀彂浜嬩欢锛屽皢褰撳墠琛岀殑 ID 鍙戦�佸埌鍦板浘缁勪欢
EventBus.emit("row-clicked", row.id);
}
-const listData = cityData.listData;
-const data = ref([
- 8.16, 15.38, 13.94, 9.46, 86.42, 71.32, 28.52, 25.9, 13.74, 14.54, 15.53,
- 9.17, 0, 0.09, 0.86, 8.15, 44.8, 21.86, 6.2, 4.98, 2.82, 2.36, 3.1, 1.06,
-]);
+// const listData = cityData.listData;
+// const data = ref([
+// 8.16, 15.38, 13.94, 9.46, 86.42, 71.32, 28.52, 25.9, 13.74, 14.54, 15.53,
+// 9.17, 0, 0.09, 0.86, 8.15, 44.8, 21.86, 6.2, 4.98, 2.82, 2.36, 3.1, 1.06,
+// ]);
const rainChangeShow = ref(false);
const tableContainer = ref(null);
@@ -317,23 +319,69 @@
return timeOnly;
};
-const setEcharts1 = () => {
- // 1. 鍒濆鍖栧浘琛�
- const chartDom = document.getElementById("echarts1");
- myChart1 = echarts.init(chartDom);
+// 鏆傛椂鍏堜笉鐢紝涓昏鍔熻兘涓轰竴鍒嗛挓鎻掑�煎叚鍗佷釜鏁版嵁
+// function processData(originalData) {
+// const processedData = [];
+// let currentTotal = 0; // 鍔ㄦ�佺疮鍔犵殑 total
- // 2. 鏁版嵁瀹氫箟锛堝畬鍏ㄤ繚鎸佹偍鐨勫師濮嬪彉閲忥級
+// for (let i = 0; i < originalData.length; i++) {
+// const current = originalData[i];
+// const targetIntensity = current.intensity;
+// let remainingIntensity = targetIntensity; // 鍓╀綑闇�瑕佸垎閰嶇殑 intensity
+
+// // 鐢熸垚60涓偣锛堝姩鎬侀殢鏈哄～鍏咃紝鍏佽鍑虹幇浣庡�煎拰楂樺�硷級
+// for (let j = 0; j < 60; j++) {
+// // 1. 鍔ㄦ�佺敓鎴� intensity锛堥殢鏈猴紝浣嗘渶鍚庝竴鐐硅ˉ瓒冲墿浣欏�硷級
+// let intensity;
+// if (j === 59) {
+// intensity = remainingIntensity; // 鏈�鍚庝竴鐐瑰己鍒剁敤瀹屽墿浣欏��
+// } else {
+// // 闅忔満鐢熸垚涓�涓瘮渚嬶紙0.1~0.5涔嬮棿鐨勪綆姒傜巼 + 鍋跺皵楂樺�硷級
+// const isLowValue = Math.random() < 0.7; // 70%姒傜巼鐢熸垚浣庡��
+// const maxAllowed = remainingIntensity / (60 - j); // 纭繚涓嶈秴鍓╀綑鍊�
+// intensity = isLowValue
+// ? Math.random() * maxAllowed * 0.3 // 浣庡�艰寖鍥�
+// : Math.random() * maxAllowed * 1.5; // 鍋跺皵楂樺��
+// }
+// remainingIntensity -= intensity;
+
+// // 2. 瀹炴椂绱姞 total
+// currentTotal += intensity;
+
+// processedData.push({
+// time: current.time,
+// intensity: intensity,
+// total: currentTotal,
+// });
+// }
+
+// // 楠岃瘉褰撳墠娈电殑鎬� intensity 鏄惁鍖归厤鍘熷鏁版嵁
+// console.log(
+// `Segment ${i}: Generated intensity sum = ${(
+// targetIntensity - remainingIntensity
+// ).toFixed(2)}, Original = ${targetIntensity}`
+// );
+// }
+
+// return processedData;
+// }
+
+// 璁剧疆闄嶉洦鍥捐〃
+const setEcharts1 = () => {
+ const chartDom = document.getElementById("echarts1");
+ const myChart1 = echarts.init(chartDom);
+
+ // 鍥捐〃鏁版嵁
let rainfallData = ref([]);
let data1 = ref([]);
let data2 = ref([]);
- let xAxisData = ref([]);
+ let xAxisData = ref(["00:00"]);
let updateInterval = null;
let dataIndex = ref(0);
-
- // 4. 鍔ㄦ�佽绠梇杞达紙鏂板鐨勬牳蹇冮�昏緫锛�
+ // 鍔ㄦ�佽绠梇杞磋寖鍥�
const getDynamicYAxis = (dataArray) => {
- const currentMax = Math.max(...dataArray, 1); // 纭繚鏈�灏忔樉绀鸿寖鍥�
+ const currentMax = Math.max(...dataArray, 1);
const step = Math.ceil(currentMax / 3);
return {
max: step * 3,
@@ -341,20 +389,21 @@
};
};
- // 5. 鍔犺浇鏁版嵁锛堝畬鍏ㄤ繚鎸佹偍鐨勯�昏緫锛�
+ // 鍔犺浇JSON鏁版嵁
const loadJsonData = async () => {
try {
- const response = await fetch("/json/rainfall.json");
- const result = await response.json();
-
- if (result?.data?.length) {
- rainfallData.value = result.data;
- xAxisData.value = ["00:00"] || syncTimeWithTimeline(); // 鍒濆鏃堕棿鐐�
-
+ // 杩欎釜result鏄敤鐨勪笂杩扮殑鎻掑�硷紙鏆傛椂鍏堜笉鐢級
+ // const result = processData(simStore.rainFalls);
+ const result = simStore.rainFalls;
+ if (result?.length) {
+ rainfallData.value = result;
if (rainfallData.value.length > 0) {
- data1.value = [rainfallData.value[0].value];
- data2.value = [rainfallData.value[0].total];
- updateChart(); // 鍒濆鍖栧浘琛�
+ // data1.value = [rainfallData.value[0].intensity];
+ // data2.value = [rainfallData.value[0].total];
+ // 榛樿鍒濆浠�0寮�濮嬬殑
+ data1.value = [0];
+ data2.value = [0];
+ updateChart();
}
}
} catch (error) {
@@ -362,60 +411,70 @@
}
};
- // 6. 鍥捐〃閰嶇疆锛堜粎淇敼Y杞撮儴鍒嗭級
+ // 鏇存柊鍥捐〃閰嶇疆
const updateChart = () => {
const option = {
- // >>> 淇濇寔鎮ㄥ師鏈夌殑鎵�鏈夐厤缃� <<<
animation: false,
tooltip: { trigger: "axis" },
- grid: { left: "1%", right: "1%", bottom: "1%", containLabel: true },
+ // // 璋冩暣grid甯冨眬瑙ｅ喅Y杞存爣绛炬樉绀洪棶棰�
+ grid: {
+ // left: "1%", // 宸︿晶鐣欐洿澶氱┖闂�
+ // right: "1%", // 鍙充晶鐣欐洿澶氱┖闂�
+ bottom: "1%",
+ containLabel: false,
+ },
legend: {
data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"],
textStyle: { color: "#fff" },
+ right: "10px",
+ // 娣诲姞legend鐐瑰嚮浜嬩欢澶勭悊
+ selected: {
+ 闄嶉洦鏁版嵁: true,
+ 绱闆ㄩ噺: true,
+ },
},
-
- // >>> 鎮ㄥ師鏉ョ殑xAxis閰嶇疆锛堝畬鍏ㄤ笉鍙橈級 <<<
xAxis: [
{
type: "category",
- data: xAxisData.value, // 鎮ㄧ殑鏃堕棿鏁版嵁
+ data: xAxisData.value,
axisLabel: { color: "#fff", rotate: 0 },
},
],
-
- // >>> 淇敼鐨刌杞撮厤缃紙鍔ㄦ�佽寖鍥达級 <<<
yAxis: [
{
- // 宸︿晶Y杞达紙闄嶉洦锛�
type: "value",
name: "鍗曚綅:mm",
min: 0,
- ...getDynamicYAxis(data1.value), // 鍔ㄦ�佽寖鍥�
+ ...getDynamicYAxis(data1.value),
axisLabel: { color: "#fff" },
splitLine: { show: false },
+ // 纭繚鍚嶇О鏄剧ず瀹屾暣
+ nameTextStyle: {
+ color: "#fff",
+ },
},
{
- // 鍙充晶Y杞达紙绱锛�
type: "value",
name: "鍗曚綅:mm",
min: 0,
- ...getDynamicYAxis(data2.value), // 鍔ㄦ�佽寖鍥�
+ ...getDynamicYAxis(data2.value),
axisLabel: { color: "#fff" },
splitLine: { show: true },
+ nameTextStyle: {
+ color: "#fff",
+ },
},
],
-
- // >>> 淇濇寔鎮ㄥ師鏈夌殑series閰嶇疆 <<<
series: [
{
name: "闄嶉洦鏁版嵁",
- type: "bar",
+ type: "bar", // 鏄庣‘鎸囧畾绫诲瀷
data: data1.value,
itemStyle: { color: "#3268fe" },
},
{
name: "绱闆ㄩ噺",
- type: "line",
+ type: "line", // 鏄庣‘鎸囧畾绫诲瀷
yAxisIndex: 1,
data: data2.value,
lineStyle: { color: "#ffb637" },
@@ -425,32 +484,30 @@
myChart1.setOption(option, true);
};
- // 7. 鏁版嵁鏇存柊锛堜繚鎸佹偍鐨勬椂闂撮�昏緫锛�
+ // 鏁版嵁鏇存柊
const updateData = () => {
if (dataIndex.value < rainfallData.value.length) {
const item = rainfallData.value[dataIndex.value];
- data1.value.push(item.value);
+ data1.value.push(item.intensity);
data2.value.push(item.total);
- xAxisData.value.push(syncTimeWithTimeline()); // 鎮ㄧ殑鏃堕棿鐢熸垚鏂规硶
+ xAxisData.value.push(syncTimeWithTimeline());
dataIndex.value++;
- updateChart(); // 鍔ㄦ�佽皟鏁碮杞�
+ updateChart();
} else {
stopUpdating();
}
};
- // 8. 鎺у埗鏂规硶锛堝畬鍏ㄤ笉鍙橈級
- const startUpdating = (interval = 1000) => {
+ // 鎺у埗鏂规硶
+ const startUpdating = (interval = 60000) => {
if (!updateInterval) {
updateInterval = setInterval(updateData, interval);
}
};
const stopUpdating = () => {
- if (updateInterval) {
- clearInterval(updateInterval);
- updateInterval = null;
- }
+ clearInterval(updateInterval);
+ updateInterval = null;
};
const resetLoading = () => {
@@ -460,13 +517,13 @@
data2.value = [];
xAxisData.value = ["00:00"];
if (rainfallData.value.length) {
- data1.value = [rainfallData.value[0].value];
+ data1.value = [rainfallData.value[0].intensity];
data2.value = [rainfallData.value[0].total];
}
updateChart();
};
- // 9. 鍒濆鍖�
+ // 鍒濆鍖�
loadJsonData();
return {
@@ -479,146 +536,138 @@
const setEcharts2 = () => {
const chartDom = document.getElementById("echarts2");
- myChart2 = echarts.init(chartDom);
+ const myChart2 = echarts.init(chartDom);
- let jsonData = ref([]);
- let data1 = ref([]);
- let data2 = ref([]);
- let xAxisData = ref([]);
- let updateInterval = null;
+ // 鍥捐〃鏁版嵁锛堜笌echarts1淇濇寔鐩稿悓缁撴瀯锛�
+ let flowData = ref([]); // 鍘熷鏁版嵁
+ let data1 = ref([]); // 瀹炴椂娴侀噺
+ let data2 = ref([]); // 绱娴侀噺
+ let xAxisData = ref(["00:00"]);
+ let updateInterval = ref(null);
let dataIndex = ref(0);
- // 鍔犺浇 JSON 鏁版嵁锛堝畬鍏ㄤ繚鎸佸師鏈夐�昏緫锛�
+ // 鍔ㄦ�佽绠梇杞磋寖鍥�
+ const calculateDynamicYAxis = (dataArray) => {
+ const currentMax = Math.max(...dataArray, 1);
+ const step = Math.ceil(currentMax / 3);
+ return {
+ max: step * 3,
+ interval: step,
+ };
+ };
const loadJsonData = async () => {
try {
const response = await fetch("/json/浜庡瑗挎矡鏂潰涓嬫暟鎹�.json");
const result = await response.json();
- if (result && result.data && Array.isArray(result.data)) {
- jsonData.value = result.data;
- xAxisData.value = ["00:00"] || syncTimeWithTimeline(); // 淇濇寔鎮ㄧ殑鏃堕棿鍒濆鍖�
-
- if (jsonData.value.length > 0) {
- data1.value.push(jsonData.value[0].value);
- data2.value.push(jsonData.value[0].total);
+ if (result?.data?.length) {
+ flowData.value = result.data;
+ if (flowData.value.length > 0) {
+ data1.value = [flowData.value[0].value];
+ data2.value = [flowData.value[0].total];
+ updateChart();
}
- updateChart(); // 鍒濆鍖栨椂鑷姩璁＄畻Y杞磋寖鍥�
}
} catch (error) {
console.error("鏁版嵁鍔犺浇澶辫触:", error);
}
};
- // 鍔ㄦ�佽绠梇杞村弬鏁帮紙鏂板鏍稿績鍔熻兘锛�
- const calculateDynamicYAxis = (dataArray) => {
- const currentMax = Math.max(...dataArray, 1); // 纭繚鏈�灏忔樉绀鸿寖鍥�
- const step = Math.ceil(currentMax / 3);
- return {
- max: step * 3,
- interval: step
- };
- };
-
- // 鏇存柊鍥捐〃閰嶇疆锛堜粎淇敼Y杞撮儴鍒嗭級
+ // 鍥捐〃閰嶇疆锛堜笌echarts1淇濇寔鐩稿悓缁撴瀯鍜屾牱寮忥級
const updateChart = () => {
const option = {
- // >>> 淇濇寔鎮ㄥ師鏈夌殑鎵�鏈夐厤缃� <<<
animation: false,
tooltip: {
trigger: "axis",
- axisPointer: { type: "cross" }
+ axisPointer: { type: "cross" },
},
grid: {
- left: "1%",
- right: "1%",
+ // 娉ㄩ噴鏄洜涓� y杞翠笂鐨勫崟浣嶈瑕嗙洊鎺変簡
+ // left: "1%",
+ // right: "1%",
bottom: "1%",
- containLabel: true
+ containLabel: false,
},
legend: {
data: ["瀹炴椂娴侀噺", "绱娴侀噺"],
textStyle: { color: "#fff" },
- right: "10px"
+ right: "10px",
+ selected: {
+ 瀹炴椂娴侀噺: true,
+ 绱娴侀噺: true,
+ },
},
-
- // >>> 鎮ㄥ師鏉ョ殑xAxis閰嶇疆锛堝畬鍏ㄤ笉鍙橈級 <<<
- xAxis: [{
- type: "category",
- data: xAxisData.value,
- axisLabel: { color: "#fff", rotate: 0 }
- }],
-
- // >>> 淇敼鐨刌杞撮厤缃紙鍔ㄦ�佽寖鍥达級 <<<
+ xAxis: [
+ {
+ type: "category",
+ data: xAxisData.value,
+ axisLabel: {
+ color: "#fff",
+ rotate: 0,
+ },
+ },
+ ],
yAxis: [
- { // 宸︿晶Y杞达紙瀹炴椂娴侀噺锛�
+ {
type: "value",
name: "鍗曚綅:m鲁/min",
min: 0,
...calculateDynamicYAxis(data1.value),
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "right"
- },
+ axisLabel: { color: "#fff" },
+ splitLine: { show: false },
nameTextStyle: {
- padding: [0, 0, 0, 20],
- color: "#fff"
+ color: "#fff",
},
- splitLine: { show: false }
},
- { // 鍙充晶Y杞达紙绱娴侀噺锛�
+ {
type: "value",
name: "鍗曚綅:m鲁",
min: 0,
...calculateDynamicYAxis(data2.value),
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "left"
- },
+ axisLabel: { color: "#fff" },
+ splitLine: { show: true },
nameTextStyle: {
- padding: [0, 10, 0, 0],
- color: "#fff"
+ color: "#fff",
},
- splitLine: { show: true }
- }
+ },
],
-
- // >>> 淇濇寔鎮ㄥ師鏈夌殑series閰嶇疆 <<<
series: [
{
name: "瀹炴椂娴侀噺",
type: "bar",
- tooltip: { valueFormatter: value => value + " m鲁/min" },
data: data1.value,
- itemStyle: { color: "blue" }
+ itemStyle: {
+ color: "#3268fe",
+ },
},
{
name: "绱娴侀噺",
type: "line",
yAxisIndex: 1,
- tooltip: { valueFormatter: value => value + " m鲁" },
data: data2.value,
- lineStyle: { color: "#ffb637" }
- }
- ]
+ lineStyle: {
+ color: "#ffb637",
+ },
+ },
+ ],
};
- myChart2.setOption(option, true); // 寮哄埗鍒锋柊
+ myChart2.setOption(option, true);
};
- // 鏁版嵁鏇存柊锛堜繚鎸佹偍鐨勬椂闂撮�昏緫锛�
+ // 鏁版嵁鏇存柊锛堜笌echarts1鐩稿悓閫昏緫锛�
const updateData = () => {
- if (dataIndex.value < jsonData.value.length) {
- const newItem = jsonData.value[dataIndex.value];
- data1.value.push(newItem.value);
- data2.value.push(newItem.total);
- xAxisData.value.push(syncTimeWithTimeline()); // 鎮ㄧ殑鏃堕棿鐢熸垚鏂规硶
- dataIndex.value += 2; // 淇濇寔鎮ㄧ殑绱㈠紩姝ラ暱
- updateChart(); // 鑷姩璋冩暣Y杞�
+ if (dataIndex.value < flowData.value.length) {
+ const item = flowData.value[dataIndex.value];
+ data1.value.push(item.value);
+ data2.value.push(item.total);
+ xAxisData.value.push(syncTimeWithTimeline());
+ dataIndex.value++;
+ updateChart();
} else {
stopUpdating();
}
};
- // 鎺у埗鏂规硶锛堝畬鍏ㄤ笉鍙橈級
+ // 鎺у埗鏂规硶锛堜笌echarts1瀹屽叏涓�鑷达級
const startUpdating = (interval = 1000) => {
if (!updateInterval) {
updateInterval = setInterval(updateData, interval);
@@ -638,9 +687,9 @@
data1.value = [];
data2.value = [];
xAxisData.value = ["00:00"];
- if (jsonData.value.length) {
- data1.value.push(jsonData.value[0].value);
- data2.value.push(jsonData.value[0].total);
+ if (flowData.value.length > 0) {
+ data1.value = [flowData.value[0].value];
+ data2.value = [flowData.value[0].total];
}
updateChart();
};
@@ -652,7 +701,7 @@
myChart2,
startUpdating,
stopUpdating,
- resetLoading
+ resetLoading,
};
};
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..d60999b 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,60 @@
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;
+ padding-right: 10px;
+ box-sizing: border-box;
}
.clickable-text {
@@ -273,9 +209,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 141a4de..ccc9563 100644
--- a/src/views/mnfz.vue
+++ b/src/views/mnfz.vue
@@ -299,7 +299,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