From 742cecf2dd52906ff00a50461839bda83a3cbc6d Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期三, 30 四月 2025 17:18:20 +0800
Subject: [PATCH] 修改y轴动态变化
---
src/components/monifangzhen/RiverLevel.vue | 66 -----
src/assets/css/global.css | 92 ++++++
src/store/simAPI.js | 6
src/components/monifangzhen/echartInfo.vue | 521 ++++++++++++---------------------------
src/components/monifangzhen/ResultAssess.vue | 43 ---
src/views/Home.vue | 2
src/views/left/KGSimOption/PredictiveSimulation.vue | 10
src/views/left/CitySim.vue | 36 ++
8 files changed, 287 insertions(+), 489 deletions(-)
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index 4291542..83651c5 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -19,6 +19,7 @@
text-indent: 80px;
letter-spacing: 2px;
}
+
.left-content {
margin-top: 20px;
background: url("@/assets/img/left/leftbg.png");
@@ -26,6 +27,7 @@
width: 100%;
height: calc(100% - 70px);
}
+
.el-button {
background-color: #009688 !important;
border-color: #009688 !important;
@@ -38,30 +40,22 @@
border-color: #009688 !important;
color: #fff !important;
}
+
.el-picker-panel__icon-btn {
color: #fff !important;
font-size: 18px;
}
-.el-date-range-picker__header [class*="arrow-left"] {
- color: #ffffff;
-}
+
.el-select-dropdown__item.is-hovering {
background-color: #009688;
}
-.el-select__placeholder {
- color: white;
-}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
color: white !important;
background-color: rgb(38, 124, 124, 0.5) !important;
}
-.el-select__placeholder,
-.el-form-item__label,
-.el-input__inner {
- color: #fff !important;
-}
+
.el-slider__bar {
background-color: #009688 !important;
border-color: #009688 !important;
@@ -70,3 +64,79 @@
.el-slider__button {
border-color: rgb(0, 150, 136) !important;
}
+
+.el-select-dropdown {
+ background: rgba(8, 75, 66, 1) !important;
+ color: white !important;
+}
+
+.el-picker-panel__body div {
+ background: #084b42 !important;
+}
+
+.el-picker-panel {
+ background: rgba(8, 75, 66, 1) !important;
+}
+
+.el-select-dropdown__item {
+ color: white !important;
+ font-size: 12px !important;
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+ color: #409eff !important;
+}
+
+.el-input__wrapper {
+ background: rgba(8, 75, 66, 1) !important;
+ border: 2px solid #437a74 !important;
+ box-shadow: none !important;
+}
+
+.el-select__wrapper {
+ background: rgba(8, 75, 66, 1) !important;
+ border: 2px solid #437a74 !important;
+ box-shadow: none !important;
+}
+
+.el-time-spinner__item:hover:not(.is-disabled):not(.is-active),
+.el-date-table td.current:not(.disabled) .el-date-table-cell__text {
+ background: #009688 !important;
+}
+
+.el-picker-panel__footer {
+ background-color: #084b42 !important;
+}
+
+.el-date-table td.end-date .el-date-table-cell__text,
+.el-date-table td.start-date .el-date-table-cell__text {
+ background-color: #61f7d4 !important;
+}
+
+.el-date-table td.today .el-date-table-cell__text {
+ color: #61f7d4 !important;
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover,
+.el-time-panel__btn.confirm,
+.el-date-editor .el-range-separator,
+.el-date-editor .el-range-input,
+.el-time-panel__btn,
+.el-time-spinner__item,
+.el-date-table th,
+.el-picker-panel__body,
+.el-select__placeholder,
+.el-form-item__label,
+.el-input__inner,
+.el-select__placeholder,
+.el-date-range-picker__header [class*="arrow-left"] {
+ color: white !important;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__wrapper {
+ height: 100% !important;
+ width: 100% !important;
+}
diff --git a/src/components/monifangzhen/ResultAssess.vue b/src/components/monifangzhen/ResultAssess.vue
index 5166186..25de815 100644
--- a/src/components/monifangzhen/ResultAssess.vue
+++ b/src/components/monifangzhen/ResultAssess.vue
@@ -260,47 +260,4 @@
color: white !important;
}
</style>
-<style>
-.el-select-dropdown {
- background: rgba(8, 75, 66, 1) !important;
- color: white !important;
-}
-.el-picker-panel__body {
- color: white !important;
-}
-
-.el-picker-panel__body div {
- background: transparent !important;
-}
-
-.el-picker-panel {
- background: rgba(8, 75, 66, 1) !important;
-}
-
-.el-select-dropdown__item {
- color: white !important;
- font-size: 12px !important;
-}
-
-.el-date-table th {
- color: white !important;
-}
-
-.el-select-dropdown__item.hover,
-.el-select-dropdown__item:hover {
- color: #409eff !important;
-}
-
-.el-input__wrapper {
- background: rgba(8, 75, 66, 1) !important;
- border: 2px solid #437a74 !important;
- box-shadow: none !important;
-}
-
-.el-select__wrapper {
- background: rgba(8, 75, 66, 1) !important;
- border: 2px solid #437a74 !important;
- box-shadow: none !important;
-}
-</style>
diff --git a/src/components/monifangzhen/RiverLevel.vue b/src/components/monifangzhen/RiverLevel.vue
index 0324b18..e09e00b 100644
--- a/src/components/monifangzhen/RiverLevel.vue
+++ b/src/components/monifangzhen/RiverLevel.vue
@@ -194,70 +194,4 @@
color: white !important;
}
</style>
-<style>
-.el-select-dropdown {
- background: rgba(8, 75, 66, 1) !important;
- color: white !important;
-}
-.el-picker-panel__body {
- color: white !important;
-}
-
-.el-picker-panel__body div {
- background: transparent !important;
-}
-
-.el-picker-panel {
- background: rgba(8, 75, 66, 1) !important;
-}
-
-.el-select-dropdown__item {
- color: white !important;
- font-size: 12px !important;
-}
-
-.el-date-table th {
- color: white !important;
-}
-
-.el-select-dropdown__item.hover,
-.el-select-dropdown__item:hover {
- color: #409eff !important;
-}
-
-.el-input__wrapper {
- background: rgba(8, 75, 66, 1) !important;
- border: 2px solid #437a74 !important;
- box-shadow: none !important;
-}
-
-.el-select__wrapper {
- background: rgba(8, 75, 66, 1) !important;
- border: 2px solid #437a74 !important;
- box-shadow: none !important;
-}
-
-.level-list {
- display: flex;
- margin-top: 10px;
- flex-wrap: wrap;
-
- .level-item {
- width: 150px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- background: rgba(8, 75, 66, 1);
- color: white;
- margin-right: 10px;
- margin-bottom: 10px;
- cursor: pointer;
- border-radius: 5px;
-
- &.active {
- background: #11b6a6;
- }
- }
-}
-</style>
diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue
index 4570ec0..f065103 100644
--- a/src/components/monifangzhen/echartInfo.vue
+++ b/src/components/monifangzhen/echartInfo.vue
@@ -317,279 +317,163 @@
return timeOnly;
};
-//鍒濆鍖栧苟閰嶇疆绗竴涓狤Charts鍥捐〃锛堥檷闆ㄦ暟鎹浘琛級
const setEcharts1 = () => {
- // 鑾峰彇DOM鍏冪礌骞跺垵濮嬪寲ECharts瀹炰緥
+ // 1. 鍒濆鍖栧浘琛�
const chartDom = document.getElementById("echarts1");
myChart1 = echarts.init(chartDom);
- // 鍝嶅簲寮忔暟鎹畾涔�
- let rainfallData = ref([]); // 瀛樺偍浠嶫SON鍔犺浇鐨勫師濮嬮檷闆ㄦ暟鎹�
- let data1 = ref([]); // 瀛樺偍闄嶉洦鏁版嵁锛坢m/min锛�
- let data2 = ref([]); // 瀛樺偍绱闆ㄩ噺鏁版嵁锛坢m锛�
- let xAxisData = ref([]); // 瀛樺偍x杞存椂闂存暟鎹�
- let updateInterval = null; // 瀹氭椂鍣↖D
- let dataIndex = ref(0); // 褰撳墠鏁版嵁绱㈠紩
+ // 2. 鏁版嵁瀹氫箟锛堝畬鍏ㄤ繚鎸佹偍鐨勫師濮嬪彉閲忥級
+ let rainfallData = ref([]);
+ let data1 = ref([]);
+ let data2 = ref([]);
+ let xAxisData = ref([]);
+ let updateInterval = null;
+ let dataIndex = ref(0);
- // 浠嶫SON鏂囦欢鍔犺浇闄嶉洦鏁版嵁
+
+ // 4. 鍔ㄦ�佽绠梇杞达紙鏂板鐨勬牳蹇冮�昏緫锛�
+ const getDynamicYAxis = (dataArray) => {
+ const currentMax = Math.max(...dataArray, 1); // 纭繚鏈�灏忔樉绀鸿寖鍥�
+ const step = Math.ceil(currentMax / 3);
+ return {
+ max: step * 3,
+ interval: step,
+ };
+ };
+
+ // 5. 鍔犺浇鏁版嵁锛堝畬鍏ㄤ繚鎸佹偍鐨勯�昏緫锛�
const loadJsonData = async () => {
try {
- // 鍙戣捣缃戠粶璇锋眰鑾峰彇鏁版嵁
const response = await fetch("/json/rainfall.json");
const result = await response.json();
- // 楠岃瘉鏁版嵁鏍煎紡
- if (result && result.data && Array.isArray(result.data)) {
+ if (result?.data?.length) {
rainfallData.value = result.data;
+ xAxisData.value = ["00:00"] || syncTimeWithTimeline(); // 鍒濆鏃堕棿鐐�
- // 璁＄畻鏁版嵁鐨勬渶澶у�肩敤浜巠杞村埢搴�
- const maxValue = Math.max(
- ...rainfallData.value.map((item) => item.value)
- );
- const maxTotal = Math.max(
- ...rainfallData.value.map((item) => item.total)
- );
-
- // 鍒濆鍖栨椂闂磋酱鍜岀涓�涓暟鎹偣
- xAxisData.value = ["00:00"]; // 璧峰鏃堕棿
if (rainfallData.value.length > 0) {
- data1.value.push(rainfallData.value[0].value); // 娣诲姞绗竴涓檷闆ㄦ暟鎹�
- data2.value.push(rainfallData.value[0].total); // 娣诲姞绗竴涓疮璁￠洦閲�
+ data1.value = [rainfallData.value[0].value];
+ data2.value = [rainfallData.value[0].total];
+ updateChart(); // 鍒濆鍖栧浘琛�
}
-
- // 璁＄畻y杞村弬鏁板苟鏇存柊鍥捐〃
- const yAxis1Params = calculateYAxisParams(maxValue); // 宸︿晶y杞达紙闄嶉洦鏁版嵁锛�
- const yAxis2Params = calculateYAxisParams(maxTotal); // 鍙充晶y杞达紙绱闆ㄩ噺锛�
- updateChart(yAxis1Params, yAxis2Params);
- } else {
- console.error(
- "Invalid JSON format: 'data' is missing or not an array!"
- );
}
} catch (error) {
- console.error("Error fetching data:", error);
+ console.error("鏁版嵁鍔犺浇澶辫触:", error);
}
};
- /**
- * 璁＄畻y杞村弬鏁帮紙鐢熸垚鍧囧寑鍒嗗竷鐨勫埢搴︼級
- * @param {number} max - 鏁版嵁鏈�澶у��
- * @returns {Object} 鍖呭惈max鍜宨nterval鐨勫璞�
- */
- const calculateYAxisParams = (max) => {
- const step = Math.ceil(max / 3); // 灏嗚寖鍥村垎鎴�3绛変唤锛堜骇鐢�4涓埢搴︾偣锛�
- return {
- max: step * 3, // 纭繚鏈�澶у�兼槸姝ラ暱鐨勬暣鏁板��
- interval: step, // 鍒诲害闂撮殧
- };
- };
-
- /**
- * 鏇存柊鍥捐〃閰嶇疆
- * @param {Object} yAxis1Params - 宸︿晶y杞村弬鏁�
- * @param {Object} yAxis2Params - 鍙充晶y杞村弬鏁�
- */
- const updateChart = (yAxis1Params, yAxis2Params) => {
+ // 6. 鍥捐〃閰嶇疆锛堜粎淇敼Y杞撮儴鍒嗭級
+ const updateChart = () => {
const option = {
- animation: false, // 绂佺敤鍔ㄧ敾鎻愰珮鎬ц兘
-
- // 鎻愮ず妗嗛厤缃�
- tooltip: {
- trigger: "axis", // 鍧愭爣杞磋Е鍙�
- axisPointer: {
- // 鎸囩ず鍣ㄦ牱寮�
- type: "cross", // 鍗佸瓧鍑嗘槦鎸囩ず鍣�
- crossStyle: { color: "#fff" }, // 鐧借壊绾挎潯
- },
- },
-
- // 鍥捐〃甯冨眬
- grid: {
- left: "1%",
- right: "1%",
- bottom: "1%", // 杈硅窛
- containLabel: true, // 鍖呭惈鍧愭爣杞存爣绛�
- },
-
- // 鍥句緥閰嶇疆
+ // >>> 淇濇寔鎮ㄥ師鏈夌殑鎵�鏈夐厤缃� <<<
+ animation: false,
+ tooltip: { trigger: "axis" },
+ grid: { left: "1%", right: "1%", bottom: "1%", containLabel: true },
legend: {
- data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"], // 绯诲垪鍚嶇О
- textStyle: { color: "#fff" }, // 鐧借壊鏂囧瓧
- right: "10px", // 闈犲彸瀵归綈
+ data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"],
+ textStyle: { color: "#fff" },
},
- // x杞撮厤缃紙鏃堕棿杞达級
+ // >>> 鎮ㄥ師鏉ョ殑xAxis閰嶇疆锛堝畬鍏ㄤ笉鍙橈級 <<<
xAxis: [
{
- type: "category", // 绫荤洰杞�
- data: xAxisData.value, // 鏃堕棿鏁版嵁
- axisPointer: { type: "shadow" }, // 闃村奖鎸囩ず鍣�
- axisLabel: {
- color: "#fff", // 鐧借壊鏍囩
- rotate: 0, // 涓嶆棆杞�
- },
+ type: "category",
+ data: xAxisData.value, // 鎮ㄧ殑鏃堕棿鏁版嵁
+ axisLabel: { color: "#fff", rotate: 0 },
},
],
- // y杞撮厤缃紙鍙寉杞达級
+ // >>> 淇敼鐨刌杞撮厤缃紙鍔ㄦ�佽寖鍥达級 <<<
yAxis: [
- // 宸︿晶y杞达紙闄嶉洦鏁版嵁锛�
{
- type: "value",
- name: "鍗曚綅:mm",
- min: 0, // 鏈�灏忓�间负0
- max: yAxis1Params.max, // 鍔ㄦ�佽绠楃殑鏈�澶у��
- interval: yAxis1Params.interval, // 鍔ㄦ�佽绠楃殑闂撮殧
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "right", // 鏍囩鍙冲榻�
- },
- nameTextStyle: {
- padding: [0, 0, 0, 30], // 鍚嶇О鍙充晶鍐呰竟璺�
- color: "#fff",
- },
- splitLine: { show: false }, // 涓嶆樉绀虹綉鏍肩嚎
- },
- // 鍙充晶y杞达紙绱闆ㄩ噺锛�
- {
+ // 宸︿晶Y杞达紙闄嶉洦锛�
type: "value",
name: "鍗曚綅:mm",
min: 0,
- max: yAxis2Params.max,
- interval: yAxis2Params.interval,
- axisLabel: {
- formatter: "{value}",
- color: "#fff",
- align: "left", // 鏍囩宸﹀榻�
- },
- nameTextStyle: {
- padding: [0, 10, 0, 0], // 鍚嶇О宸︿晶鍐呰竟璺�
- color: "#fff",
- },
- splitLine: { show: true }, // 鏄剧ず缃戞牸绾�
+ ...getDynamicYAxis(data1.value), // 鍔ㄦ�佽寖鍥�
+ axisLabel: { color: "#fff" },
+ splitLine: { show: false },
+ },
+ {
+ // 鍙充晶Y杞达紙绱锛�
+ type: "value",
+ name: "鍗曚綅:mm",
+ min: 0,
+ ...getDynamicYAxis(data2.value), // 鍔ㄦ�佽寖鍥�
+ axisLabel: { color: "#fff" },
+ splitLine: { show: true },
},
],
- // 鏁版嵁绯诲垪閰嶇疆
+ // >>> 淇濇寔鎮ㄥ師鏈夌殑series閰嶇疆 <<<
series: [
- // 鏌辩姸鍥撅紙闄嶉洦鏁版嵁锛�
{
name: "闄嶉洦鏁版嵁",
- type: "bar", // 鏌辩姸鍥�
- tooltip: {
- valueFormatter: (value) => value + " mm/min", // 鎻愮ず妗嗗崟浣�
- },
- data: data1.value, // 缁戝畾鏁版嵁
- itemStyle: { color: "#3268fe" }, // 钃濊壊鏌辩姸鍥�
- label: { show: false, color: "#fff" }, // 涓嶆樉绀烘暟鎹爣绛�
+ type: "bar",
+ data: data1.value,
+ itemStyle: { color: "#3268fe" },
},
- // 鎶樼嚎鍥撅紙绱闆ㄩ噺锛�
{
name: "绱闆ㄩ噺",
- type: "line", // 鎶樼嚎鍥�
- yAxisIndex: 1, // 浣跨敤绗簩涓獃杞�
- tooltip: {
- valueFormatter: (value) => value + " mm", // 鎻愮ず妗嗗崟浣�
- },
- data: data2.value, // 缁戝畾鏁版嵁
- lineStyle: { color: "#ffb637" }, // 榛勮壊绾挎潯
- label: { show: false, color: "#fff" }, // 涓嶆樉绀烘暟鎹爣绛�
+ type: "line",
+ yAxisIndex: 1,
+ data: data2.value,
+ lineStyle: { color: "#ffb637" },
},
],
};
-
- // 搴旂敤閰嶇疆鍒板浘琛�
- myChart1.setOption(option);
+ myChart1.setOption(option, true);
};
- // 瀹氭椂鏇存柊鍥捐〃鏁版嵁
+ // 7. 鏁版嵁鏇存柊锛堜繚鎸佹偍鐨勬椂闂撮�昏緫锛�
const updateData = () => {
- // 妫�鏌ユ槸鍚﹁繕鏈夋暟鎹渶瑕佹樉绀�
if (dataIndex.value < rainfallData.value.length) {
- const newItem = rainfallData.value[dataIndex.value];
-
- // 娣诲姞鏂版暟鎹�
- data1.value.push(newItem.value); // 娣诲姞闄嶉洦鏁版嵁
- data2.value.push(newItem.total); // 娣诲姞绱闆ㄩ噺
- xAxisData.value.push(syncTimeWithTimeline()); // 娣诲姞鏃堕棿鐐�
-
- dataIndex.value++; // 閫掑绱㈠紩
-
- // 鏇存柊鍥捐〃锛堜繚鎸佸師鏈墆杞磋寖鍥达級
- updateChart(
- {
- max: myChart1.getOption().yAxis[0].max,
- interval: myChart1.getOption().yAxis[0].interval,
- },
- {
- max: myChart1.getOption().yAxis[1].max,
- interval: myChart1.getOption().yAxis[1].interval,
- }
- );
+ const item = rainfallData.value[dataIndex.value];
+ data1.value.push(item.value);
+ data2.value.push(item.total);
+ xAxisData.value.push(syncTimeWithTimeline()); // 鎮ㄧ殑鏃堕棿鐢熸垚鏂规硶
+ dataIndex.value++;
+ updateChart(); // 鍔ㄦ�佽皟鏁碮杞�
} else {
- console.log("All data has been displayed.");
- stopUpdating(); // 鏁版嵁鍏ㄩ儴鏄剧ず瀹屾垚鍚庡仠姝㈡洿鏂�
+ stopUpdating();
}
};
- //鍚姩瀹氭椂鏇存柊
+ // 8. 鎺у埗鏂规硶锛堝畬鍏ㄤ笉鍙橈級
const startUpdating = (interval = 1000) => {
if (!updateInterval) {
updateInterval = setInterval(updateData, interval);
- console.log("Started updating...");
}
};
- //鍋滄瀹氭椂鏇存柊
const stopUpdating = () => {
if (updateInterval) {
clearInterval(updateInterval);
updateInterval = null;
- console.log("Stopped updating...");
}
};
- //閲嶇疆鍥捐〃鏁版嵁鍜岀姸鎬�
const resetLoading = () => {
- stopUpdating(); // 鍋滄褰撳墠鏇存柊
-
- // 閲嶇疆鐘舵��
+ stopUpdating();
dataIndex.value = 0;
data1.value = [];
data2.value = [];
xAxisData.value = ["00:00"];
-
- // 閲嶆柊鍔犺浇绗竴涓暟鎹偣锛堝鏋滄湁鏁版嵁锛�
- if (rainfallData.value.length > 0) {
- data1.value.push(rainfallData.value[0].value);
- data2.value.push(rainfallData.value[0].total);
+ if (rainfallData.value.length) {
+ data1.value = [rainfallData.value[0].value];
+ data2.value = [rainfallData.value[0].total];
}
-
- // 閲嶆柊缁樺埗鍥捐〃锛堜繚鎸佸師鏈墆杞磋寖鍥达級
- updateChart(
- {
- max: myChart1.getOption().yAxis[0].max,
- interval: myChart1.getOption().yAxis[0].interval,
- },
- {
- max: myChart1.getOption().yAxis[1].max,
- interval: myChart1.getOption().yAxis[1].interval,
- }
- );
-
- console.log("Reset loading...");
+ updateChart();
};
- // 鍒濆鍖栵細鍔犺浇鏁版嵁
+ // 9. 鍒濆鍖�
loadJsonData();
- // 杩斿洖鍏叡鎺ュ彛
return {
- myChart1, // 鍥捐〃瀹炰緥
- startUpdating, // 鍚姩鏇存柊鏂规硶
- stopUpdating, // 鍋滄鏇存柊鏂规硶
- resetLoading, // 閲嶇疆鏂规硶
+ myChart1,
+ startUpdating,
+ stopUpdating,
+ resetLoading,
};
};
@@ -597,263 +481,178 @@
const chartDom = document.getElementById("echarts2");
myChart2 = echarts.init(chartDom);
- let jsonData = ref([]); // 瀛樺偍浠� JSON 鏂囦欢涓姞杞界殑鏁版嵁
- let data1 = ref([]); // 瀹炴椂娴侀噺鏁版嵁
- let data2 = ref([]); // 绱娴侀噺鏁版嵁
- let xAxisData = ref([]); // 鍔ㄦ�佹椂闂磋酱
- let updateInterval = null; // 瀹氭椂鍣ㄥ彉閲�
- let dataIndex = ref(0); // 褰撳墠鏁版嵁绱㈠紩锛岀敤浜庢寜椤哄簭鏇存柊
+ let jsonData = ref([]);
+ let data1 = ref([]);
+ let data2 = ref([]);
+ let xAxisData = ref([]);
+ let updateInterval = null;
+ let dataIndex = ref(0);
- // 鍔犺浇 JSON 鏁版嵁
+ // 鍔犺浇 JSON 鏁版嵁锛堝畬鍏ㄤ繚鎸佸師鏈夐�昏緫锛�
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;
-
- // 璁＄畻 value 鍜� total 鐨勬渶澶у��
- const maxValue = Math.max(...jsonData.value.map((item) => item.value));
- const maxTotal = Math.max(...jsonData.value.map((item) => item.total));
-
- // 鍒濆鍖栨椂闂磋酱锛堜粠00:00寮�濮嬶級
- xAxisData.value = ["00:00"] || syncTimeWithTimeline(); // 鍒濆鏃堕棿鐐�
-
- // 鍒濆鍖栧浘琛紙浠呭姞杞界涓�涓暟鎹偣锛�
+ xAxisData.value = ["00:00"] || syncTimeWithTimeline(); // 淇濇寔鎮ㄧ殑鏃堕棿鍒濆鍖�
+
if (jsonData.value.length > 0) {
- data1.value.push(jsonData.value[0].value); // 瀹炴椂娴侀噺
- data2.value.push(jsonData.value[0].total); // 绱娴侀噺
+ data1.value.push(jsonData.value[0].value);
+ data2.value.push(jsonData.value[0].total);
}
-
- // 鏍规嵁鏈�澶у�艰缃� y 杞村弬鏁板苟鍒濆鍖栧浘琛�
- const yAxis1Params = calculateYAxisParams(maxValue);
- const yAxis2Params = calculateYAxisParams(maxTotal);
- updateChart(yAxis1Params, yAxis2Params);
- } else {
- console.error(
- "Invalid JSON format: 'data' is missing or not an array!"
- );
+ updateChart(); // 鍒濆鍖栨椂鑷姩璁＄畻Y杞磋寖鍥�
}
} catch (error) {
- console.error("Error fetching data:", error);
+ console.error("鏁版嵁鍔犺浇澶辫触:", error);
}
};
- // 璁＄畻 y 杞村弬鏁帮紙鏈�澶氭湁 4 涓偣锛�
- const calculateYAxisParams = (max) => {
- const step = Math.ceil(max / 3); // 鏈�澶氭湁 4 涓偣锛堝寘鎷� 0锛夛紝鎵�浠ュ垎鎴� 3 浠�
+ // 鍔ㄦ�佽绠梇杞村弬鏁帮紙鏂板鏍稿績鍔熻兘锛�
+ const calculateDynamicYAxis = (dataArray) => {
+ const currentMax = Math.max(...dataArray, 1); // 纭繚鏈�灏忔樉绀鸿寖鍥�
+ const step = Math.ceil(currentMax / 3);
return {
- max: step * 3, // 纭繚鏈�澶у�兼槸姝ラ暱鐨勬暣鏁板��
- interval: step,
+ max: step * 3,
+ interval: step
};
};
- // 鏇存柊鍥捐〃閰嶇疆
- const updateChart = (yAxis1Params, yAxis2Params) => {
+ // 鏇存柊鍥捐〃閰嶇疆锛堜粎淇敼Y杞撮儴鍒嗭級
+ const updateChart = () => {
const option = {
- animation: false, // 绂佺敤鍔ㄧ敾
+ // >>> 淇濇寔鎮ㄥ師鏈夌殑鎵�鏈夐厤缃� <<<
+ animation: false,
tooltip: {
trigger: "axis",
- axisPointer: {
- type: "cross",
- crossStyle: {
- color: "#fff",
- },
- },
+ axisPointer: { type: "cross" }
},
grid: {
left: "1%",
right: "1%",
bottom: "1%",
- containLabel: true,
+ containLabel: true
},
legend: {
data: ["瀹炴椂娴侀噺", "绱娴侀噺"],
- textStyle: {
- color: "#fff",
- },
- right: "10px", // 灏嗗浘渚嬮潬鍙宠创杈�
+ textStyle: { color: "#fff" },
+ right: "10px"
},
- xAxis: [
- {
- type: "category",
- data: xAxisData.value, // 浣跨敤鍔ㄦ�佹椂闂磋酱
- axisPointer: {
- type: "shadow",
- },
- axisLabel: {
- color: "#fff",
- rotate: 0, // 灏嗘棆杞搴﹁缃负0锛屽彇娑堝�炬枩
- },
- },
- ],
+
+ // >>> 鎮ㄥ師鏉ョ殑xAxis閰嶇疆锛堝畬鍏ㄤ笉鍙橈級 <<<
+ xAxis: [{
+ type: "category",
+ data: xAxisData.value,
+ axisLabel: { color: "#fff", rotate: 0 }
+ }],
+
+ // >>> 淇敼鐨刌杞撮厤缃紙鍔ㄦ�佽寖鍥达級 <<<
yAxis: [
- {
+ { // 宸︿晶Y杞达紙瀹炴椂娴侀噺锛�
type: "value",
name: "鍗曚綅:m鲁/min",
min: 0,
- max: yAxis1Params.max,
- interval: yAxis1Params.interval,
- axisLabel: {
+ ...calculateDynamicYAxis(data1.value),
+ axisLabel: {
formatter: "{value}",
color: "#fff",
- align: "right", // 灏嗘爣绛惧彸瀵归綈
+ align: "right"
},
nameTextStyle: {
- padding: [0, 0, 0, 20], // 鍦ㄥ彸渚ф坊鍔犱竴浜涘唴杈硅窛
- color: "#fff",
+ padding: [0, 0, 0, 20],
+ color: "#fff"
},
- splitLine: {
- show: false, // 鍏抽棴宸︿晶 y 杞寸殑妯嚎
- },
+ splitLine: { show: false }
},
- {
+ { // 鍙充晶Y杞达紙绱娴侀噺锛�
type: "value",
name: "鍗曚綅:m鲁",
min: 0,
- max: yAxis2Params.max,
- interval: yAxis2Params.interval,
- axisLabel: {
+ ...calculateDynamicYAxis(data2.value),
+ axisLabel: {
formatter: "{value}",
color: "#fff",
- align: "left", // 灏嗘爣绛惧彸瀵归綈
+ align: "left"
},
nameTextStyle: {
- padding: [0, 10, 0, 0], // 鍦ㄥ彸渚ф坊鍔犱竴浜涘唴杈硅窛
- color: "#fff",
+ padding: [0, 10, 0, 0],
+ color: "#fff"
},
- splitLine: {
- show: true, // 淇濈暀鍙充晶 y 杞寸殑妯嚎
- },
- },
+ splitLine: { show: true }
+ }
],
+
+ // >>> 淇濇寔鎮ㄥ師鏈夌殑series閰嶇疆 <<<
series: [
{
name: "瀹炴椂娴侀噺",
type: "bar",
- tooltip: {
- valueFormatter: function (value) {
- return value + " m鲁/min";
- },
- },
+ tooltip: { valueFormatter: value => value + " m鲁/min" },
data: data1.value,
- itemStyle: {
- color: "blue", // 璁剧疆鏌辩姸鍥鹃鑹蹭负钃濊壊
- },
- label: {
- show: false,
- color: "#fff",
- },
+ itemStyle: { color: "blue" }
},
{
name: "绱娴侀噺",
type: "line",
yAxisIndex: 1,
- tooltip: {
- valueFormatter: function (value) {
- return value + " m鲁";
- },
- },
+ tooltip: { valueFormatter: value => value + " m鲁" },
data: data2.value,
- lineStyle: {
- color: "#ffb637", // 璁剧疆鎶樼嚎鍥剧嚎鏉￠鑹蹭负榛勮壊
- },
- label: {
- show: false, // 纭繚鏍囩涓嶆樉绀�
- color: "#fff",
- },
- },
- ],
+ lineStyle: { color: "#ffb637" }
+ }
+ ]
};
-
- myChart2.setOption(option);
+ myChart2.setOption(option, true); // 寮哄埗鍒锋柊
};
- // 瀹氫箟鎸夐『搴忔洿鏂版暟鎹殑鏂规硶
+ // 鏁版嵁鏇存柊锛堜繚鎸佹偍鐨勬椂闂撮�昏緫锛�
const updateData = () => {
if (dataIndex.value < jsonData.value.length) {
- // 鑾峰彇褰撳墠绱㈠紩鐨勬暟鎹」
const newItem = jsonData.value[dataIndex.value];
- data1.value.push(newItem.value); // 娣诲姞瀹炴椂娴侀噺
- data2.value.push(newItem.total); // 娣诲姞绱娴侀噺
-
- const nextTime = syncTimeWithTimeline();
- xAxisData.value.push(nextTime);
-
- // 鏇存柊褰撳墠绱㈠紩
- dataIndex.value += 2;
-
- // 鏇存柊鍥捐〃
- updateChart(
- {
- max: myChart2.getOption().yAxis[0].max,
- interval: myChart2.getOption().yAxis[0].interval,
- }, // 宸︿晶 y 杞翠繚鎸佷笉鍙�
- {
- max: myChart2.getOption().yAxis[1].max,
- interval: myChart2.getOption().yAxis[1].interval,
- } // 鍙充晶 y 杞翠繚鎸佷笉鍙�
- );
+ data1.value.push(newItem.value);
+ data2.value.push(newItem.total);
+ xAxisData.value.push(syncTimeWithTimeline()); // 鎮ㄧ殑鏃堕棿鐢熸垚鏂规硶
+ dataIndex.value += 2; // 淇濇寔鎮ㄧ殑绱㈠紩姝ラ暱
+ updateChart(); // 鑷姩璋冩暣Y杞�
} else {
- console.log("All data has been displayed.");
- stopUpdating(); // 鍋滄瀹氭椂鏇存柊
+ stopUpdating();
}
};
- // 鍚姩瀹氭椂鏇存柊
+ // 鎺у埗鏂规硶锛堝畬鍏ㄤ笉鍙橈級
const startUpdating = (interval = 1000) => {
if (!updateInterval) {
- updateInterval = setInterval(updateData, interval); // 姣忛殧 interval 姣鏇存柊涓�娆℃暟鎹�
- console.log("Started updating...");
+ updateInterval = setInterval(updateData, interval);
}
};
- // 鍋滄瀹氭椂鏇存柊
const stopUpdating = () => {
if (updateInterval) {
clearInterval(updateInterval);
updateInterval = null;
- console.log("Stopped updating...");
}
};
- // 閲嶇疆鍔犺浇
const resetLoading = () => {
- stopUpdating(); // 鍋滄瀹氭椂鍣�
- dataIndex.value = 0; // 閲嶇疆鏁版嵁绱㈠紩
- data1.value = []; // 娓呯┖瀹炴椂娴侀噺鏁版嵁
- data2.value = []; // 娓呯┖绱娴侀噺鏁版嵁
- xAxisData.value = ["00:00"]; // 閲嶇疆鏃堕棿杞�
-
- // 閲嶆柊鍔犺浇绗竴涓暟鎹偣
- if (jsonData.value.length > 0) {
- data1.value.push(jsonData.value[0].value); // 瀹炴椂娴侀噺
- data2.value.push(jsonData.value[0].total); // 绱娴侀噺
+ stopUpdating();
+ dataIndex.value = 0;
+ 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);
}
-
- // 閲嶆柊缁樺埗鍥捐〃
- updateChart(
- {
- max: myChart2.getOption().yAxis[0].max,
- interval: myChart2.getOption().yAxis[0].interval,
- }, // 宸︿晶 y 杞翠繚鎸佷笉鍙�
- {
- max: myChart2.getOption().yAxis[1].max,
- interval: myChart2.getOption().yAxis[1].interval,
- } // 鍙充晶 y 杞翠繚鎸佷笉鍙�
- );
-
- console.log("Reset loading...");
+ updateChart();
};
- // 鍒濆鍖栧姞杞� JSON 鏁版嵁
+ // 鍒濆鍖�
loadJsonData();
return {
myChart2,
startUpdating,
stopUpdating,
- resetLoading,
+ resetLoading
};
};
diff --git a/src/store/simAPI.js b/src/store/simAPI.js
index 05a135e..82c4223 100644
--- a/src/store/simAPI.js
+++ b/src/store/simAPI.js
@@ -47,6 +47,7 @@
// 淇濆瓨鏂规閫昏緫
const saveScheme = async (forms) => {
+ // forms.hours = dayjs(val[0]).format("YYYY-MM-DD HH:mm:ss");
if (isLoading.value) {
ElMessage.warning('姝ｅ湪淇濆瓨锛岃绋嶅��...')
return
@@ -63,7 +64,9 @@
type: forms.type,
status: 0,
data: JSON.stringify({
- startTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+ startTime: Array.isArray(forms.hours)
+ ? dayjs(forms.hours[0]).format("YYYY-MM-DD HH:mm:ss")
+ : dayjs(forms.hours).format("YYYY-MM-DD HH:mm:ss"),
type: forms.type,
total: forms.rainfall,
duration: forms.duration,
@@ -98,6 +101,7 @@
})
// 鐢ㄦ埛纭鍚庢墽琛屼繚瀛�
await saveScheme(forms)
+ console.log(forms, 'ffffffffff')
} catch (error) {
if (error !== 'cancel') {
console.error('淇濆瓨鍑洪敊:', error)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 58efc3a..81967cc 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -53,7 +53,7 @@
// import Device from "@/components/menu/Device.vue";
import Detail from "@/components/tools/Detail.vue";
// 涓嶅彲浠ュ垹闄わ紝鍚﹀垯鍏ㄥ眬鏍峰紡浼氫涪鎺夛紝涓嶇煡閬撳師鍥�
-import ResultAssess from "@/components/monifangzhen/ResultAssess.vue";
+// import ResultAssess from "@/components/monifangzhen/ResultAssess.vue";
// import DangerAssess from "@/components/monifangzhen/DangerAssess.vue";
import { showDeviceDetail } from "@/store";
import { setupTokenRefresh } from "@/api/hpApi.js"
diff --git a/src/views/left/CitySim.vue b/src/views/left/CitySim.vue
index ca8286c..cc75ab4 100644
--- a/src/views/left/CitySim.vue
+++ b/src/views/left/CitySim.vue
@@ -80,9 +80,28 @@
<template #append>mm</template>
</el-input>
</el-form-item>
-
+ <el-form-item label="閫夋嫨鏃堕棿:">
+ <el-date-picker
+ v-if="forms.fileList.length !== 0"
+ v-model="forms.hours"
+ type="datetime"
+ placeholder="Select date and time"
+ />
+ <el-date-picker
+ v-if="forms.fileList.length == 0"
+ v-model="forms.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"
+ />
+ </el-form-item>
<el-form-item label="闄嶉洦鏃堕暱:">
<el-input
+ disabled
v-model="forms.duration"
style="max-width: 600px"
placeholder="Please input"
@@ -120,6 +139,7 @@
import { SimAPIStore } from "@/store/simAPI";
import { getRegionData } from "@/api/trApi";
import { storeToRefs } from "pinia";
+import dayjs from "dayjs";
const simStore = SimAPIStore();
const { selectTab } = storeToRefs(simStore);
@@ -173,7 +193,20 @@
fileList: [],
type: 3,
rainFallList: [],
+ hours: "",
});
+
+// 璁＄畻绱鏃堕暱
+const calculateHoursDifference = (val) => {
+ if (!val || val.length !== 2) return 0;
+ const [startDate, endDate] = val;
+ const diffInHours = dayjs(endDate).diff(dayjs(startDate), "hour", true); // true 琛ㄧず杩斿洖娴偣鏁�
+ return diffInHours;
+};
+
+const change = (val) => {
+ forms.duration = calculateHoursDifference(val);
+};
const addSimCheme = async () => {
await simStore.addSimCheme(forms);
@@ -188,6 +221,7 @@
forms.intensity = "";
forms.fileList = [];
forms.rainFallList = [];
+ forms.hours = "";
};
// 璁＄畻灞炴�э細鑾峰彇涓婁紶鏂囦欢鐨勫悕绉板垪琛�
diff --git a/src/views/left/KGSimOption/PredictiveSimulation.vue b/src/views/left/KGSimOption/PredictiveSimulation.vue
index 379702b..8364488 100644
--- a/src/views/left/KGSimOption/PredictiveSimulation.vue
+++ b/src/views/left/KGSimOption/PredictiveSimulation.vue
@@ -81,12 +81,12 @@
><template #append>h</template></el-input
>
</el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="openPlan">鎵撳紑鏂规</el-button>
+ <el-button type="primary" @click="openSaveDialog">淇濆瓨鏂规</el-button>
+ <el-button type="success" @click="startPlay">寮�濮嬫ā鎷�</el-button>
+ </el-form-item>
</el-form>
- <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>
</div>
</template>
<script setup>
--
Gitblit v1.9.3