From e49c02db91d6438f65d4c9c97b938802c35d435e Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期三, 30 四月 2025 17:09:47 +0800
Subject: [PATCH] Merge branch 'master' of http://103.135.160.14:9034/r/NslWeb
---
src/views/GisView.vue | 268 +++++++++++++----------
src/components/monifangzhen/echartInfo.vue | 296 ++++++++++++--------------
src/components/menu/TimeLine.vue | 63 ++++-
3 files changed, 334 insertions(+), 293 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index 8496f8e..84ee093 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -2,20 +2,30 @@
<div class="timeline-container">
<div class="controls">
<div class="control-btn" @click="skipBackward">
- <img src="@/assets/img/timeline/left.png" class="fas fa-step-backward" />
+ <img
+ src="@/assets/img/timeline/left.png"
+ class="fas fa-step-backward"
+ />
</div>
<div class="control-btn play-btn" @click="togglePlay">
<img v-show="isPlaying" src="@/assets/img/timeline/stop.png" />
<img v-show="!isPlaying" src="@/assets/img/timeline/start.png" />
</div>
<div class="control-btn" @click="skipForward">
- <img src="@/assets/img/timeline/right.png" class="fas fa-step-forward" />
+ <img
+ src="@/assets/img/timeline/right.png"
+ class="fas fa-step-forward"
+ />
</div>
<div class="speed-control">
<div @click="toggleSpeedMenu">{{ playbackRate }}X</div>
<div class="speed-menu" v-show="showSpeedMenu">
- <div v-for="rate in playbackRates" :key="rate" @click.capture="setPlaybackRate(rate)"
- :class="{ active: playbackRate === rate }">
+ <div
+ v-for="rate in playbackRates"
+ :key="rate"
+ @click.capture="setPlaybackRate(rate)"
+ :class="{ active: playbackRate === rate }"
+ >
{{ rate }}X
</div>
</div>
@@ -25,21 +35,39 @@
<div class="timeline">
<div class="dates">
<div class="current-date">褰撳墠鎾斁鏃堕棿锛歿{ currentPlayingTime }}</div>
- <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
+ <div
+ v-for="(date, index) in visibleDates"
+ :key="index"
+ class="date-label"
+ >
<!-- {{ formatDate(date) }} -->
</div>
</div>
<div class="timeline-track" ref="timelineTrack" @click="seekToPosition">
- <div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div>
- <div class="timeline-cursor" :style="{ left: progressPercentage + '%' }"></div>
+ <div
+ class="timeline-progress"
+ :style="{ width: progressPercentage + '%' }"
+ ></div>
+ <div
+ class="timeline-cursor"
+ :style="{ left: progressPercentage + '%' }"
+ ></div>
<div class="time-markers">
- <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker">
+ <div
+ v-for="(time, index) in timeMarkers"
+ :key="index"
+ class="time-marker"
+ >
{{ time }}
</div>
</div>
</div>
</div>
- <el-button @click="handleBack" style="margin-top: 26px; margin-left: 30px; margin-right: 10px">缁撴潫妯℃嫙</el-button>
+ <el-button
+ @click="handleBack"
+ style="margin-top: 26px; margin-left: 30px; margin-right: 10px"
+ >缁撴潫妯℃嫙</el-button
+ >
</div>
</template>
@@ -67,10 +95,10 @@
import { fetchWaterSimulationData } from "@/api/trApi.js";
import { EventBus } from "@/eventBus";
import { ElMessage } from "element-plus";
-import { useSimStore } from '@/store/simulation'
-import { storeToRefs } from 'pinia'
-const simStore = useSimStore()
-const { selectedScheme } = storeToRefs(simStore)
+import { useSimStore } from "@/store/simulation";
+import { storeToRefs } from "pinia";
+const simStore = useSimStore();
+const { selectedScheme } = storeToRefs(simStore);
const emit = defineEmits(["timeUpdate", "isPlaying", "playbackFinished"]);
@@ -301,7 +329,10 @@
let closestIndex = 0;
let minDiff = Infinity;
waterTimestamps.value.forEach((timestamp, index) => {
- const diff = Math.abs(dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") - currentTimeValue);
+ const diff = Math.abs(
+ dayjs(timestamp).diff(dayjs(waterTimestamps.value[0]), "second") -
+ currentTimeValue
+ );
if (diff < minDiff) {
minDiff = diff;
closestIndex = index;
@@ -317,7 +348,7 @@
console.log('閫変腑鏂规宸叉敼鍙�:', newVal)
}
}
-)
+);
watch(
() => currentTime.value,
() => {
@@ -400,7 +431,7 @@
}, 3000);
ElMessage({ message: "妯℃嫙杩涚▼姝ｅ湪鍏抽棴涓�...", type: "success" }); // 鏄剧ず娑堟伅閫氱煡鐢ㄦ埛妯℃嫙杩涚▼姝ｅ湪鍏抽棴
endSimulate();
- isWaterPrimitiveCreated.value = false
+ isWaterPrimitiveCreated.value = false;
destoryWaterPrimitive();
EventBus.emit("hide-schemeInfo");
}
diff --git a/src/components/monifangzhen/echartInfo.vue b/src/components/monifangzhen/echartInfo.vue
index b5d66fd..4570ec0 100644
--- a/src/components/monifangzhen/echartInfo.vue
+++ b/src/components/monifangzhen/echartInfo.vue
@@ -13,11 +13,6 @@
<div class="echartCont">
<p>鏂潰妯℃嫙</p>
<div class="echartBox">
- <!-- <div>
- <button id="startButton">寮�濮嬪姞杞�</button>
- <button id="pauseButton">鏆傚仠鍔犺浇</button>
- <button id="resetButton">閲嶇疆鍔犺浇</button>
- </div> -->
<div id="echarts2" style="width: 100%; height: 100%"></div>
</div>
</div>
@@ -112,19 +107,18 @@
import dayjs from "dayjs";
import { getRainfall } from "@/api";
-let dataIntervalId = null; // 瀹氭椂鍣� ID
+let dataIntervalId = null; // 琛ㄦ牸瀹氭椂鍣� ID
const jsonData = ref([]); // JSON 鏁版嵁
const tableData = ref([]); // 琛ㄦ牸鏁版嵁
const currentIndex = ref(0); // 褰撳墠鍔犺浇绱㈠紩
const isPaused = ref(false); // 鏄惁鏆傚仠鏍囧織
-const chart1Data = ref(null);
-const chart2Data = ref(null);
-let intervalId1 = null;
-let intervalId2 = null;
+const chart1Data = ref(null); //闄嶉洦鏁版嵁
+const chart2Data = ref(null); //鏂潰鏁版嵁
+let intervalId1 = null; //闄嶉洦鏁版嵁瀹氭椂鍣�
+let intervalId2 = null; //鏂潰鏁版嵁瀹氭椂鍣�
+// 鏍规嵁鏃堕棿杞村尮閰嶇殑x杞寸殑鏃堕棿鏄剧ず
const nowTime = ref(null);
-
-const isFinished = ref(true);
const props = defineProps({
isDynamicMode: {
@@ -138,7 +132,6 @@
watch(
() => props.isFinish,
(newVal) => {
- isFinished.value = newVal;
if (!newVal) {
resetTable();
chart1Data.value.resetLoading();
@@ -153,28 +146,13 @@
EventBus.on("reset-table", () => {
resetTable(); // 璋冪敤閲嶇疆琛ㄦ牸鐨勫嚱鏁�
});
+
+// 娓呴櫎echarts鍥捐〃
EventBus.on("clear-echart", () => {
- clearEchartData(); // 璋冪敤娓呴櫎鍑芥暟
+ chart1Data.value.resetLoading();
+ chart2Data.value.resetLoading();
});
-// 娓呴櫎 echart1/2鏁版嵁鐨勫嚱鏁�
-const clearEchartData = () => {
- if (myChart1) {
- const currentOption = myChart1.getOption(); // 鑾峰彇褰撳墠鍥捐〃閰嶇疆
- currentOption.series.forEach((series) => {
- series.data = []; // 娓呯┖姣忎釜绯诲垪鐨勬暟鎹�
- });
- currentOption.xAxis[0].data = [];
- myChart1.setOption(currentOption);
- }
- if (myChart2) {
- const currentOption = myChart2.getOption();
- currentOption.series.forEach((series) => {
- series.data = [];
- });
- currentOption.xAxis[0].data = [];
- myChart2.setOption(currentOption);
- }
-};
+
// 娓呴櫎濞佽儊瀵硅薄涓殑鏁版嵁
const resetTable = () => {
currentIndex.value = 0;
@@ -191,11 +169,9 @@
if (intervalId1) {
clearInterval(intervalId1);
chart1Data.value.stopUpdating(); // 姣忛殧 1 绉掓洿鏂颁竴娆�
-
intervalId1 = null;
}
if (intervalId2) {
- console.log(intervalId2, "鏆傚仠");
clearInterval(intervalId2);
chart2Data.value.stopUpdating(); // 姣忛殧 1 绉掓洿鏂颁竴娆�
intervalId2 = null;
@@ -205,6 +181,8 @@
dataIntervalId = null;
}
};
+
+// 鐩戝惉鏃堕棿杞寸粨鏉熸ā鎷�
EventBus.on("hide-schemeInfo", handleHideSchemeInfo);
// 鐩戝惉鐖剁粍浠朵紶閫掔殑鏁版嵁鍙樺寲
@@ -257,11 +235,7 @@
let myChart1 = null;
let myChart2 = null;
-const getRandomInt = (min = 0, max = 100) => {
- const minCeiled = Math.ceil(min);
- const maxFloored = Math.floor(max);
- return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
-};
+// 濞佽儊瀵硅薄鏁版嵁
const getDangerInfo = async () => {
try {
const response = await fetch(
@@ -315,15 +289,6 @@
});
};
-const getRainfallData = async () => {
- try {
- const res = await getRainfall();
- rainfallData.value = res.data;
- } catch (error) {
- console.error("Error fetching rainfall data:", error);
- }
-};
-
const rainClick = () => {
rainChangeShow.value = !rainChangeShow.value;
let desc = { func_name: "RainChange", visibility: rainChangeShow.value };
@@ -343,6 +308,7 @@
charts.style.height = style.height;
};
+// 鏃堕棿杞存椂闂存埅鍙栧鐞�
const syncTimeWithTimeline = () => {
// 2025-05-24 00:25
// // 灏嗘椂闂村瓧绗︿覆杞崲涓哄垎閽熸暟 (鏍煎紡: "YYYY-MM-DD mm:ss")
@@ -351,26 +317,32 @@
return timeOnly;
};
+//鍒濆鍖栧苟閰嶇疆绗竴涓狤Charts鍥捐〃锛堥檷闆ㄦ暟鎹浘琛級
const setEcharts1 = () => {
+ // 鑾峰彇DOM鍏冪礌骞跺垵濮嬪寲ECharts瀹炰緥
const chartDom = document.getElementById("echarts1");
myChart1 = echarts.init(chartDom);
- let rainfallData = ref([]); // 瀛樺偍浠� JSON 鏂囦欢涓姞杞界殑鏁版嵁
- let data1 = ref([]); // 闄嶉洦鏁版嵁鏁版嵁
- let data2 = ref([]); // 绱闆ㄩ噺鏁版嵁
- let xAxisData = ref([]); // 鍔ㄦ�佹椂闂磋酱
- let updateInterval = null; // 瀹氭椂鍣ㄥ彉閲�
- let dataIndex = ref(0); // 褰撳墠鏁版嵁绱㈠紩锛岀敤浜庢寜椤哄簭鏇存柊
+ // 鍝嶅簲寮忔暟鎹畾涔�
+ 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); // 褰撳墠鏁版嵁绱㈠紩
- // 鍔犺浇 JSON 鏁版嵁
+ // 浠嶫SON鏂囦欢鍔犺浇闄嶉洦鏁版嵁
const loadJsonData = async () => {
try {
+ // 鍙戣捣缃戠粶璇锋眰鑾峰彇鏁版嵁
const response = await fetch("/json/rainfall.json");
const result = await response.json();
+
+ // 楠岃瘉鏁版嵁鏍煎紡
if (result && result.data && Array.isArray(result.data)) {
rainfallData.value = result.data;
- // 璁＄畻 value 鍜� total 鐨勬渶澶у��
+ // 璁＄畻鏁版嵁鐨勬渶澶у�肩敤浜巠杞村埢搴�
const maxValue = Math.max(
...rainfallData.value.map((item) => item.value)
);
@@ -378,18 +350,16 @@
...rainfallData.value.map((item) => item.total)
);
- // 鍒濆鍖栨椂闂磋酱锛堜粠00:00寮�濮嬶級
- xAxisData.value = ["00:00"]; // 鍒濆鏃堕棿鐐�
-
- // 鍒濆鍖栧浘琛紙浠呭姞杞界涓�涓暟鎹偣锛�
+ // 鍒濆鍖栨椂闂磋酱鍜岀涓�涓暟鎹偣
+ 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.push(rainfallData.value[0].value); // 娣诲姞绗竴涓檷闆ㄦ暟鎹�
+ data2.value.push(rainfallData.value[0].total); // 娣诲姞绗竴涓疮璁￠洦閲�
}
- // 鏍规嵁鏈�澶у�艰缃� y 杞村弬鏁板苟鍒濆鍖栧浘琛�
- const yAxis1Params = calculateYAxisParams(maxValue);
- const yAxis2Params = calculateYAxisParams(maxTotal);
+ // 璁＄畻y杞村弬鏁板苟鏇存柊鍥捐〃
+ const yAxis1Params = calculateYAxisParams(maxValue); // 宸︿晶y杞达紙闄嶉洦鏁版嵁锛�
+ const yAxis2Params = calculateYAxisParams(maxTotal); // 鍙充晶y杞达紙绱闆ㄩ噺锛�
updateChart(yAxis1Params, yAxis2Params);
} else {
console.error(
@@ -401,74 +371,87 @@
}
};
- // 璁＄畻 y 杞村弬鏁帮紙鏈�澶氭湁 4 涓偣锛�
+ /**
+ * 璁＄畻y杞村弬鏁帮紙鐢熸垚鍧囧寑鍒嗗竷鐨勫埢搴︼級
+ * @param {number} max - 鏁版嵁鏈�澶у��
+ * @returns {Object} 鍖呭惈max鍜宨nterval鐨勫璞�
+ */
const calculateYAxisParams = (max) => {
- const step = Math.ceil(max / 3); // 鏈�澶氭湁 4 涓偣锛堝寘鎷� 0锛夛紝鎵�浠ュ垎鎴� 3 浠�
+ const step = Math.ceil(max / 3); // 灏嗚寖鍥村垎鎴�3绛変唤锛堜骇鐢�4涓埢搴︾偣锛�
return {
max: step * 3, // 纭繚鏈�澶у�兼槸姝ラ暱鐨勬暣鏁板��
- interval: step,
+ interval: step, // 鍒诲害闂撮殧
};
};
- // 鏇存柊鍥捐〃閰嶇疆
+ /**
+ * 鏇存柊鍥捐〃閰嶇疆
+ * @param {Object} yAxis1Params - 宸︿晶y杞村弬鏁�
+ * @param {Object} yAxis2Params - 鍙充晶y杞村弬鏁�
+ */
const updateChart = (yAxis1Params, yAxis2Params) => {
const option = {
- animation: false, // 绂佺敤鍔ㄧ敾
+ animation: false, // 绂佺敤鍔ㄧ敾鎻愰珮鎬ц兘
+
+ // 鎻愮ず妗嗛厤缃�
tooltip: {
- trigger: "axis",
+ trigger: "axis", // 鍧愭爣杞磋Е鍙�
axisPointer: {
- type: "cross",
- crossStyle: {
- color: "#fff",
- },
+ // 鎸囩ず鍣ㄦ牱寮�
+ type: "cross", // 鍗佸瓧鍑嗘槦鎸囩ず鍣�
+ crossStyle: { color: "#fff" }, // 鐧借壊绾挎潯
},
},
+
+ // 鍥捐〃甯冨眬
grid: {
left: "1%",
right: "1%",
- bottom: "1%",
- containLabel: true,
+ bottom: "1%", // 杈硅窛
+ containLabel: true, // 鍖呭惈鍧愭爣杞存爣绛�
},
+
+ // 鍥句緥閰嶇疆
legend: {
- data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"],
- textStyle: {
- color: "#fff",
- },
- right: "10px", // 灏嗗浘渚嬮潬鍙宠创杈�
+ data: ["闄嶉洦鏁版嵁", "绱闆ㄩ噺"], // 绯诲垪鍚嶇О
+ textStyle: { color: "#fff" }, // 鐧借壊鏂囧瓧
+ right: "10px", // 闈犲彸瀵归綈
},
+
+ // x杞撮厤缃紙鏃堕棿杞达級
xAxis: [
{
- type: "category",
- data: xAxisData.value, // 浣跨敤鍔ㄦ�佹椂闂磋酱
- axisPointer: {
- type: "shadow",
- },
+ type: "category", // 绫荤洰杞�
+ data: xAxisData.value, // 鏃堕棿鏁版嵁
+ axisPointer: { type: "shadow" }, // 闃村奖鎸囩ず鍣�
axisLabel: {
- color: "#fff",
- rotate: 0, // 灏嗘棆杞搴﹁缃负0锛屽彇娑堝�炬枩
+ color: "#fff", // 鐧借壊鏍囩
+ rotate: 0, // 涓嶆棆杞�
},
},
],
+
+ // y杞撮厤缃紙鍙寉杞达級
yAxis: [
+ // 宸︿晶y杞达紙闄嶉洦鏁版嵁锛�
{
type: "value",
name: "鍗曚綅:mm",
- min: 0,
- max: yAxis1Params.max,
- interval: yAxis1Params.interval,
+ min: 0, // 鏈�灏忓�间负0
+ max: yAxis1Params.max, // 鍔ㄦ�佽绠楃殑鏈�澶у��
+ interval: yAxis1Params.interval, // 鍔ㄦ�佽绠楃殑闂撮殧
axisLabel: {
formatter: "{value}",
color: "#fff",
- align: "right", // 灏嗘爣绛惧彸瀵归綈
+ align: "right", // 鏍囩鍙冲榻�
},
nameTextStyle: {
- padding: [0, 0, 0, 30], // 鍦ㄥ彸渚ф坊鍔犱竴浜涘唴杈硅窛
+ padding: [0, 0, 0, 30], // 鍚嶇О鍙充晶鍐呰竟璺�
color: "#fff",
},
- splitLine: {
- show: false, // 鍏抽棴宸︿晶 y 杞寸殑妯嚎
- },
+ splitLine: { show: false }, // 涓嶆樉绀虹綉鏍肩嚎
},
+ // 鍙充晶y杞达紙绱闆ㄩ噺锛�
{
type: "value",
name: "鍗曚綅:mm",
@@ -478,99 +461,87 @@
axisLabel: {
formatter: "{value}",
color: "#fff",
- align: "left", // 灏嗘爣绛惧彸瀵归綈
+ align: "left", // 鏍囩宸﹀榻�
},
nameTextStyle: {
- padding: [0, 10, 0, 0], // 鍦ㄥ彸渚ф坊鍔犱竴浜涘唴杈硅窛
+ padding: [0, 10, 0, 0], // 鍚嶇О宸︿晶鍐呰竟璺�
color: "#fff",
},
- splitLine: {
- show: true, // 淇濈暀鍙充晶 y 杞寸殑妯嚎
- },
+ splitLine: { show: true }, // 鏄剧ず缃戞牸绾�
},
],
+
+ // 鏁版嵁绯诲垪閰嶇疆
series: [
+ // 鏌辩姸鍥撅紙闄嶉洦鏁版嵁锛�
{
name: "闄嶉洦鏁版嵁",
- type: "bar",
+ type: "bar", // 鏌辩姸鍥�
tooltip: {
- valueFormatter: function (value) {
- return value + " mm/min";
- },
+ valueFormatter: (value) => value + " mm/min", // 鎻愮ず妗嗗崟浣�
},
- data: data1.value,
- itemStyle: {
- color: "#3268fe",
- },
- label: {
- show: false,
- color: "#fff",
- },
+ data: data1.value, // 缁戝畾鏁版嵁
+ itemStyle: { color: "#3268fe" }, // 钃濊壊鏌辩姸鍥�
+ label: { show: false, color: "#fff" }, // 涓嶆樉绀烘暟鎹爣绛�
},
+ // 鎶樼嚎鍥撅紙绱闆ㄩ噺锛�
{
name: "绱闆ㄩ噺",
- type: "line",
- yAxisIndex: 1,
+ type: "line", // 鎶樼嚎鍥�
+ yAxisIndex: 1, // 浣跨敤绗簩涓獃杞�
tooltip: {
- valueFormatter: function (value) {
- return value + " mm";
- },
+ valueFormatter: (value) => value + " mm", // 鎻愮ず妗嗗崟浣�
},
- data: data2.value,
- lineStyle: {
- color: "#ffb637",
- },
- label: {
- show: false, // 纭繚鏍囩涓嶆樉绀�
- color: "#fff",
- },
+ data: data2.value, // 缁戝畾鏁版嵁
+ lineStyle: { color: "#ffb637" }, // 榛勮壊绾挎潯
+ label: { show: false, color: "#fff" }, // 涓嶆樉绀烘暟鎹爣绛�
},
],
};
+ // 搴旂敤閰嶇疆鍒板浘琛�
myChart1.setOption(option);
};
- // 瀹氫箟鎸夐『搴忔洿鏂版暟鎹殑鏂规硶
+ // 瀹氭椂鏇存柊鍥捐〃鏁版嵁
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()); // 娣诲姞鏃堕棿鐐�
- const nextTime = syncTimeWithTimeline();
- xAxisData.value.push(nextTime);
+ dataIndex.value++; // 閫掑绱㈠紩
- // 鏇存柊褰撳墠绱㈠紩
- dataIndex.value++;
-
- // 鏇存柊鍥捐〃
+ // 鏇存柊鍥捐〃锛堜繚鎸佸師鏈墆杞磋寖鍥达級
updateChart(
{
max: myChart1.getOption().yAxis[0].max,
interval: myChart1.getOption().yAxis[0].interval,
- }, // 宸︿晶 y 杞翠繚鎸佷笉鍙�
+ },
{
max: myChart1.getOption().yAxis[1].max,
interval: myChart1.getOption().yAxis[1].interval,
- } // 鍙充晶 y 杞翠繚鎸佷笉鍙�
+ }
);
} else {
console.log("All data has been displayed.");
- stopUpdating(); // 鍋滄瀹氭椂鏇存柊
+ stopUpdating(); // 鏁版嵁鍏ㄩ儴鏄剧ず瀹屾垚鍚庡仠姝㈡洿鏂�
}
};
- // 鍚姩瀹氭椂鏇存柊
+ //鍚姩瀹氭椂鏇存柊
const startUpdating = (interval = 1000) => {
if (!updateInterval) {
- updateInterval = setInterval(updateData, interval); // 姣忛殧 interval 姣鏇存柊涓�娆℃暟鎹�
+ updateInterval = setInterval(updateData, interval);
console.log("Started updating...");
}
};
- // 鍋滄瀹氭椂鏇存柊
+ //鍋滄瀹氭椂鏇存柊
const stopUpdating = () => {
if (updateInterval) {
clearInterval(updateInterval);
@@ -579,43 +550,46 @@
}
};
- // 閲嶇疆鍔犺浇
+ //閲嶇疆鍥捐〃鏁版嵁鍜岀姸鎬�
const resetLoading = () => {
- stopUpdating(); // 鍋滄瀹氭椂鍣�
- dataIndex.value = 0; // 閲嶇疆鏁版嵁绱㈠紩
- data1.value = []; // 娓呯┖闄嶉洦鏁版嵁鏁版嵁
- data2.value = []; // 娓呯┖绱闆ㄩ噺鏁版嵁
- xAxisData.value = ["00:00"]; // 閲嶇疆鏃堕棿杞�
+ 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); // 绱闆ㄩ噺
+ data1.value.push(rainfallData.value[0].value);
+ data2.value.push(rainfallData.value[0].total);
}
- // 閲嶆柊缁樺埗鍥捐〃
+ // 閲嶆柊缁樺埗鍥捐〃锛堜繚鎸佸師鏈墆杞磋寖鍥达級
updateChart(
{
max: myChart1.getOption().yAxis[0].max,
interval: myChart1.getOption().yAxis[0].interval,
- }, // 宸︿晶 y 杞翠繚鎸佷笉鍙�
+ },
{
max: myChart1.getOption().yAxis[1].max,
interval: myChart1.getOption().yAxis[1].interval,
- } // 鍙充晶 y 杞翠繚鎸佷笉鍙�
+ }
);
console.log("Reset loading...");
};
- // 鍒濆鍖栧姞杞� JSON 鏁版嵁
+ // 鍒濆鍖栵細鍔犺浇鏁版嵁
loadJsonData();
+ // 杩斿洖鍏叡鎺ュ彛
return {
- myChart1,
- startUpdating,
- stopUpdating,
- resetLoading,
+ myChart1, // 鍥捐〃瀹炰緥
+ startUpdating, // 鍚姩鏇存柊鏂规硶
+ stopUpdating, // 鍋滄鏇存柊鏂规硶
+ resetLoading, // 閲嶇疆鏂规硶
};
};
@@ -891,7 +865,7 @@
};
onMounted(() => {
- // getRainfallData();
+ // 鏃堕棿杞存椂闂寸殑鍙樺寲
EventBus.on("time-update", (time) => {
nowTime.value = time;
});
@@ -903,7 +877,6 @@
});
onBeforeUnmount(() => {
- EventBus.off("time-update"); // 娓呯悊浜嬩欢鐩戝惉
nowTime.value = null;
if (intervalId1) clearInterval(intervalId1);
if (intervalId2) clearInterval(intervalId2);
@@ -915,6 +888,7 @@
onUnmounted(() => {
EventBus.off("reset-table"); // 绉婚櫎浜嬩欢鐩戝惉
EventBus.off("clear-echart");
+ EventBus.off("time-update"); // 娓呯悊浜嬩欢鐩戝惉
});
</script>
diff --git a/src/views/GisView.vue b/src/views/GisView.vue
index f2c202c..9aaf488 100644
--- a/src/views/GisView.vue
+++ b/src/views/GisView.vue
@@ -3,24 +3,43 @@
</template>
<script setup>
-import { onMounted, onUnmounted, ref, watch } from "vue"
-import { createPoint, initHandler, initView, addTileset, addTerrain } from "@/utils/map.js"
-import { loadAreaPolygon } from "@/utils/area.js"
-import { loadAreaPolygonAll } from "@/utils/area_all.js"
-import { isVisibleDistance } from "@/utils/customEntity"
-import { getDistrictCount, getDistrictCountByCity } from "@/api/index"
-import { useRoute } from "vue-router"
-const route = useRoute()
-let handler = null
-function initMap () {
- window.Cesium = SmartEarth.Cesium
- window.earthCtrl = new SmartEarth.EarthCtrl("gis-view")
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import {
+ createPoint,
+ initHandler,
+ initView,
+ addTileset,
+ addTerrain,
+} from "@/utils/map.js";
+import { loadAreaPolygon } from "@/utils/area.js";
+import { loadAreaPolygonAll } from "@/utils/area_all.js";
+import { isVisibleDistance } from "@/utils/customEntity";
+import { getDistrictCount, getDistrictCountByCity } from "@/api/index";
+import { useRoute } from "vue-router";
+const route = useRoute();
+let handler = null;
+function initMap() {
+ window.Cesium = SmartEarth.Cesium;
+ window.earthCtrl = new SmartEarth.EarthCtrl("gis-view");
window.viewer = earthCtrl.viewer;
- const date = new Date(2025, 3, 11, 12, 0, 0, 0);
+
+ // 1. 璁剧疆鍒濆鏃堕棿
+ const date = new Date(2025, 3, 11, 16, 0, 0, 0);
const julianDate = SmartEarth.Cesium.JulianDate.fromDate(date);
+ // earthCtrl.viewer.clock.currentTime = julianDate;
+
+ // 2. 閰嶇疆鏃堕挓閫夐」锛岀姝㈣嚜鍔ㄦ帹杩涙椂闂�
+ earthCtrl.viewer.clockViewModel.shouldAnimate = false; // 绂佺敤鍔ㄧ敾
+ earthCtrl.viewer.clockViewModel.clockRange =
+ SmartEarth.Cesium.ClockRange.CLAMPED; // 闄愬埗鏃堕棿鑼冨洿
+ earthCtrl.viewer.clockViewModel.multiplier = 0; // 璁剧疆鏃堕棿鎺ㄨ繘閫熷害涓�0
+
+ // 3. 璁剧疆褰撳墠鏃堕棿骞堕攣瀹�
earthCtrl.viewer.clock.currentTime = julianDate;
+
+
//鏄剧ずfps
- earthCtrl.showFPS = true
+ earthCtrl.showFPS = true;
earthCtrl.factory.createImageryLayer({
sourceType: "mapworld",
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7eb11c0c503429878691ac917238f87f",
@@ -30,28 +49,31 @@
maximumLevel: 18,
layer: "",
tileMatrixSetID: "",
- })
+ });
// 鍏抽棴鍦板舰娣卞害妫�娴�
// viewer.scene.globe.depthTestAgainstTerrain = false;
}
-function addCityPolygon () {
- const url = `/json/110000.geo.json`
+function addCityPolygon() {
+ const url = `/json/110000.geo.json`;
let wallLayer = earthCtrl.factory.createTrailWallLayer({
url: "/json/110000.geojson",
color: "LIGHTSTEELBLUE", //棰滆壊
height: 2000, //楂樺害
speed: 3,
- })
+ });
const dataSourcePromise = Cesium.GeoJsonDataSource.load(url, {
clampToGround: true,
- })
+ });
return dataSourcePromise.then(function (dataSource) {
- viewer.dataSources.add(dataSource)
- const polygonEntity = dataSource.entities.values
+ viewer.dataSources.add(dataSource);
+ const polygonEntity = dataSource.entities.values;
// console.log("polygonEntity", polygonEntity)
- const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(1000, 50000000)
- polygonEntity.forEach(entity => {
+ const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(
+ 1000,
+ 50000000
+ );
+ polygonEntity.forEach((entity) => {
// console.log("entity", entity)
entity.polygon.material = new Cesium.ColorMaterialProperty(
@@ -62,24 +84,24 @@
// minimumAlpha: 0.2,
// maximumAlpha: 0.9,
// })
- )
+ );
- entity.polygon.distanceDisplayCondition = distanceDisplayCondition
+ entity.polygon.distanceDisplayCondition = distanceDisplayCondition;
- const properties = entity.properties
- const center = properties.centroid.getValue()
- const fullname = properties.fullname.getValue()
- const districtCount = properties.districtCount.getValue() || 0
+ const properties = entity.properties;
+ const center = properties.centroid.getValue();
+ const fullname = properties.fullname.getValue();
+ const districtCount = properties.districtCount.getValue() || 0;
- const position = Cesium.Cartesian3.fromDegrees(center[0], center[1])
- const positions = entity.polygon.hierarchy._value.positions
+ const position = Cesium.Cartesian3.fromDegrees(center[0], center[1]);
+ const positions = entity.polygon.hierarchy._value.positions;
- entity.position = position
+ entity.position = position;
// 鍒ゆ柇鏄惁涓轰笢鍩庡尯鎴栬タ鍩庡尯
- let labelText = fullname || "榛樿鏍囩"
+ let labelText = fullname || "榛樿鏍囩";
if (fullname === "涓滃煄鍖�" || fullname === "瑗垮煄鍖�") {
// 灏嗘枃鏈媶鍒嗕负绔栧垪
- labelText = fullname.split("").join("\n")
+ labelText = fullname.split("").join("\n");
}
entity.label = {
// 鏂囨湰銆傛敮鎸佹樉寮忔崲琛岀鈥� \ n鈥�
@@ -118,7 +140,7 @@
disableDepthTestDistance: Number.POSITIVE_INFINITY,
// 鏄惁鏄剧ず
show: true,
- }
+ };
entity.polyline = {
positions: positions,
width: 5,
@@ -132,16 +154,16 @@
),
clampToGround: true,
distanceDisplayCondition: distanceDisplayCondition,
- }
+ };
- viewer.entities.add(entity)
- })
+ viewer.entities.add(entity);
+ });
// 鑾峰彇 GeoJSON 涓殑绗竴涓� Polygon feature
- })
+ });
}
-function flyToHomeView () {
+function flyToHomeView() {
const view = {
destination: {
x: -2355432.569004413,
@@ -153,27 +175,27 @@
roll: 0.00031421159527500464,
heading: 6.140424766644804,
},
- }
- viewer.scene.camera.flyTo(view)
+ };
+ viewer.scene.camera.flyTo(view);
}
-let htmlEntityList = []
-function initDistrictCount () {
- getDistrictCount().then(res => {
- res.data.forEach(item => {
- const { districtName, count, lat, lon } = item
- item.name = `${item.districtName}\n${item.count}`
- item.longitude = item.lon
- item.latitude = item.lat
- item.showBillboard = false
- item.showLabel = true
+let htmlEntityList = [];
+function initDistrictCount() {
+ getDistrictCount().then((res) => {
+ res.data.forEach((item) => {
+ const { districtName, count, lat, lon } = item;
+ item.name = `${item.districtName}\n${item.count}`;
+ item.longitude = item.lon;
+ item.latitude = item.lat;
+ item.showBillboard = false;
+ item.showLabel = true;
item.label = {
text: item.name,
backgroundColor: SmartEarth.Cesium.Color.SKYBLUE.withAlpha(0.8),
font: "14pt Source Han Sans CN",
fillColor: SmartEarth.Cesium.Color.WHITE,
showBackground: true,
- }
+ };
// createPoint(item)
const html = earthCtrl.view.createScreenDialog({
html: `
@@ -185,41 +207,45 @@
lon: item.lon,
lat: item.lat,
height: 0,
- })
- html.maxVisibleDistance = 69000
- html.minVisibleDistance = 20000
+ });
+ html.maxVisibleDistance = 69000;
+ html.minVisibleDistance = 20000;
html.element.addEventListener("click", () => {
viewer.camera.flyTo({
- destination: Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, 12000),
+ destination: Cesium.Cartesian3.fromDegrees(
+ item.longitude,
+ item.latitude,
+ 12000
+ ),
orientation: {
pitch: Cesium.Math.toRadians(-90),
heading: Cesium.Math.toRadians(0),
roll: 0,
},
duration: 2,
- })
- })
+ });
+ });
- htmlEntityList.push(html)
- })
- })
+ htmlEntityList.push(html);
+ });
+ });
}
-function initDistrictCountByCity () {
- getDistrictCountByCity().then(res => {
- res.data.forEach(item => {
- const { districtName, count, lat, lon } = item
- item.name = `${item.districtName}\n${item.count}`
- item.longitude = item.lon
- item.latitude = item.lat
- item.showBillboard = false
- item.showLabel = true
+function initDistrictCountByCity() {
+ getDistrictCountByCity().then((res) => {
+ res.data.forEach((item) => {
+ const { districtName, count, lat, lon } = item;
+ item.name = `${item.districtName}\n${item.count}`;
+ item.longitude = item.lon;
+ item.latitude = item.lat;
+ item.showBillboard = false;
+ item.showLabel = true;
item.label = {
text: item.name,
backgroundColor: SmartEarth.Cesium.Color.SKYBLUE.withAlpha(0.8),
font: "14pt Source Han Sans CN",
fillColor: SmartEarth.Cesium.Color.WHITE,
showBackground: true,
- }
+ };
// createPoint(item)
const html = earthCtrl.view.createScreenDialog({
html: `
@@ -231,80 +257,90 @@
lon: item.lon,
lat: item.lat,
height: 0,
- })
- html.maxVisibleDistance = 50000000
- html.minVisibleDistance = 70000
+ });
+ html.maxVisibleDistance = 50000000;
+ html.minVisibleDistance = 70000;
html.element.addEventListener("click", () => {
viewer.camera.flyTo({
- destination: Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude, 45000),
+ destination: Cesium.Cartesian3.fromDegrees(
+ item.longitude,
+ item.latitude,
+ 45000
+ ),
orientation: {
pitch: Cesium.Math.toRadians(-90),
heading: Cesium.Math.toRadians(0),
roll: 0,
},
duration: 2,
- })
- })
+ });
+ });
- htmlEntityList.push(html)
- })
- })
+ htmlEntityList.push(html);
+ });
+ });
}
watch(
() => route.fullPath,
- val => {
+ (val) => {
if (val != "/") {
// clusterLayer.dataSource.show = false
- htmlEntityList.forEach(item => {
- item.show = false
- })
- removeCameraChange()
+ htmlEntityList.forEach((item) => {
+ item.show = false;
+ });
+ removeCameraChange();
} else {
- handleCameraChange()
+ handleCameraChange();
// clusterLayer.dataSource.show = true
- htmlEntityList.forEach(item => {
- item.show = isVisibleDistance(item.minVisibleDistance, item.maxVisibleDistance)
- })
+ htmlEntityList.forEach((item) => {
+ item.show = isVisibleDistance(
+ item.minVisibleDistance,
+ item.maxVisibleDistance
+ );
+ });
}
}
-)
-function handleCameraChange () {
- viewer.camera.changed.addEventListener(toggleHtmlLayerByVisibleDistance)
+);
+function handleCameraChange() {
+ viewer.camera.changed.addEventListener(toggleHtmlLayerByVisibleDistance);
}
-function removeCameraChange () {
- viewer.camera.changed.removeEventListener(toggleHtmlLayerByVisibleDistance)
+function removeCameraChange() {
+ viewer.camera.changed.removeEventListener(toggleHtmlLayerByVisibleDistance);
}
-let cameraChangeTimer = null
+let cameraChangeTimer = null;
-function toggleHtmlLayerByVisibleDistance () {
+function toggleHtmlLayerByVisibleDistance() {
if (cameraChangeTimer) {
- clearTimeout(cameraChangeTimer)
- cameraChangeTimer = null
- return
+ clearTimeout(cameraChangeTimer);
+ cameraChangeTimer = null;
+ return;
}
cameraChangeTimer = setTimeout(() => {
- htmlEntityList.forEach(item => {
- item.show = isVisibleDistance(item.minVisibleDistance, item.maxVisibleDistance)
- })
- }, 100)
+ htmlEntityList.forEach((item) => {
+ item.show = isVisibleDistance(
+ item.minVisibleDistance,
+ item.maxVisibleDistance
+ );
+ });
+ }, 100);
}
onMounted(() => {
- initMap()
- addCityPolygon()
- initHandler()
+ initMap();
+ addCityPolygon();
+ initHandler();
// initView()
- loadAreaPolygon("/json/nsl_area.geojson")
- loadAreaPolygonAll("/json/geometry.json", true)
- flyToHomeView()
- initDistrictCount()
- initDistrictCountByCity()
- handleCameraChange()
+ loadAreaPolygon("/json/nsl_area.geojson");
+ loadAreaPolygonAll("/json/geometry.json", true);
+ flyToHomeView();
+ initDistrictCount();
+ initDistrictCountByCity();
+ handleCameraChange();
// 璁剧疆 billboard 鐐瑰嚮浜嬩欢
-})
+});
onUnmounted(() => {
- removeCameraChange()
-})
+ removeCameraChange();
+});
</script>
<style lang="less" scoped>
--
Gitblit v1.9.3