From bae6796d4dce8ebc6ac7c57be2ef92473b54e122 Mon Sep 17 00:00:00 2001
From: wangjuncheng <1>
Date: 星期五, 20 六月 2025 10:50:52 +0800
Subject: [PATCH] loading
---
src/components/monifangzhen/WaterDepthContent.vue | 34 ++++++----------
src/components/monifangzhen/WaterVelocityContent.vue | 45 ++++++++--------------
2 files changed, 30 insertions(+), 49 deletions(-)
diff --git a/src/components/monifangzhen/WaterDepthContent.vue b/src/components/monifangzhen/WaterDepthContent.vue
index 1ed7d79..c7cfe2f 100644
--- a/src/components/monifangzhen/WaterDepthContent.vue
+++ b/src/components/monifangzhen/WaterDepthContent.vue
@@ -1,13 +1,10 @@
<template>
- <div class="water-depth-content">
- <!-- 鎻愮ず淇℃伅 -->
+ <div class="water-depth-content" v-loading="localLoading" element-loading-text="姘存繁鏁版嵁鍔犺浇涓�..."
+ element-loading-background="rgba(11, 34, 20, 0.3)">
<div v-if="showSelectPrompt" style="font-weight: bold;">
璇峰湪鍦板浘涓�夊彇鍞竴娴嬮噺鐐�
</div>
-
- <!-- 姝ｅ父鍐呭 -->
<div v-else>
- <!-- 浣嶇疆淇℃伅 -->
<div class="location-info">
<h3>浣嶇疆淇℃伅</h3>
<p class="coordinates">
@@ -15,8 +12,6 @@
绾害锛�<strong>{{ safeCurrentInfo.latitude.toFixed(3) }}</strong>
</p>
</div>
-
- <!-- 姘存繁淇℃伅 -->
<div class="depth-info">
<h3>姘存繁淇℃伅 (m)</h3>
<p>
@@ -26,8 +21,6 @@
</p>
</div>
</div>
-
- <!-- 鍥捐〃瀹瑰櫒 -->
<div class="chart-placeholder">
<div ref="chartDom" style="width: 100%; height: 300px;"></div>
</div>
@@ -41,6 +34,7 @@
import { storeToRefs } from 'pinia';
import { getFlowRate } from '@/api/trApi.js';
import { EventBus } from '@/eventBus';
+import { ElMessage } from 'element-plus';
const simStore = useSimStore();
const { currentInfo } = storeToRefs(simStore);
@@ -48,6 +42,9 @@
// 鍥捐〃 DOM 寮曠敤
const chartDom = ref(null);
let myChart = null;
+
+// 鍔犺浇鐘舵�佸彉閲忥紙灞�閮� loading锛�
+const localLoading = ref(false); // <<< 鏂板鍙橀噺
// 瀹夊叏鑾峰彇缁忕含搴�
const safeCurrentInfo = computed(() => {
@@ -233,8 +230,10 @@
lat: lat,
serviceName: serviceInfo
};
+ localLoading.value = true;
+
return getFlowRate(params).then(data => {
- console.log('鑾峰彇鍒扮殑鏁版嵁1111111111111111111111:', data);
+ // console.log('鑾峰彇鍒扮殑鏁版嵁:', data);
if (data && data.code === 200) {
return data.data; // 杩斿洖鍘熷鏁版嵁鏁扮粍
} else {
@@ -242,18 +241,17 @@
}
}).catch(error => {
console.error('鑾峰彇鏁版嵁鏃跺彂鐢熼敊璇�:', error);
+ ElMessage.warning('鏁版嵁鏈夎锛岃鑱旂郴绠＄悊鍛樻垨閲嶆柊杩涜妯℃嫙锛�');
return [];
+ }).finally(() => {
+ localLoading.value = false;
});
}
-
// 鐩戝惉 currentInfo 鍙樺寲
watch(
() => currentInfo.value,
async (newVal) => {
if (!newVal || showSelectPrompt.value || !chartDom.value) return;
- // console.log('缁忓害:', newVal.longitude);
- // console.log('绾害:', newVal.latitude);
- // console.log('鏈嶅姟鍚嶇О:', newVal.serviceInfo);
// 閿�姣佹棫鍥捐〃
if (myChart) {
myChart.dispose();
@@ -269,19 +267,15 @@
if (!showSelectPrompt.value && chartDom.value) {
myChart = echarts.init(chartDom.value);
initChart(myChart);
-
// 娣诲姞 resize 鐩戝惉鍣�
window.addEventListener('resize', debounce(() => {
if (myChart) myChart.resize();
}, 200));
}
-
// 娉ㄥ唽浜嬩欢鎬荤嚎鐩戝惉
EventBus.on('clear-water-depth', clear);
});
-
onBeforeUnmount(() => {
- // 绉婚櫎 resize 鐩戝惉
window.removeEventListener('resize', debounce(() => {
if (myChart) myChart.resize();
}, 200));
@@ -298,11 +292,8 @@
// 娓呯┖鏂规硶
function clear() {
- // 娓呯┖ store 涓殑缁忕含搴︿俊鎭�
currentInfo.value.longitude = 0.0;
currentInfo.value.latitude = 0.0;
-
- // 娓呴櫎 ECharts 鍥捐〃
if (myChart) {
myChart.clear(); // 娓呴櫎鍥捐〃鏁版嵁鍜屽浘褰�
myChart.dispose(); // 閿�姣佸疄渚嬶紝閲婃斁璧勬簮
@@ -321,6 +312,7 @@
<style scoped>
.water-depth-content {
+ position: relative;
padding-left: 8px;
padding-top: 8px;
border-radius: 6px;
diff --git a/src/components/monifangzhen/WaterVelocityContent.vue b/src/components/monifangzhen/WaterVelocityContent.vue
index ef17253..ae7cbab 100644
--- a/src/components/monifangzhen/WaterVelocityContent.vue
+++ b/src/components/monifangzhen/WaterVelocityContent.vue
@@ -1,13 +1,10 @@
<template>
- <div class="water-velocity-content">
- <!-- 鎻愮ず淇℃伅 -->
+ <div class="water-velocity-content" v-loading="localLoading" element-loading-text="姘存繁鏁版嵁鍔犺浇涓�..."
+ element-loading-background="rgba(11, 34, 20, 0.3)">
<div v-if="showSelectPrompt" style="font-weight: bold;">
璇峰湪鍦板浘涓�夊彇鍞竴娴嬮噺鐐�
</div>
-
- <!-- 姝ｅ父鍐呭 -->
<div v-else>
- <!-- 浣嶇疆淇℃伅 -->
<div class="location-info">
<h3>浣嶇疆淇℃伅</h3>
<p class="coordinates">
@@ -15,8 +12,6 @@
绾害锛�<strong>{{ safeCurrentInfo.latitude.toFixed(3) }}</strong>
</p>
</div>
-
- <!-- 娴侀�熶俊鎭� -->
<div class="velocity-info">
<h3>娴侀�熶俊鎭� (m/s)</h3>
<p>
@@ -26,8 +21,6 @@
</p>
</div>
</div>
-
- <!-- 鍥捐〃鍖哄煙 -->
<div class="chart-placeholder">
<div ref="chartDom" style="width: 100%; height: 300px;"></div>
</div>
@@ -41,6 +34,7 @@
import { storeToRefs } from 'pinia';
import { getFlowRate } from '@/api/trApi.js'; // 鍋囪浣犳湁鐪熷疄鎺ュ彛
import { EventBus } from '@/eventBus';
+import { ElMessage } from 'element-plus';
const simStore = useSimStore();
const { currentInfo } = storeToRefs(simStore);
@@ -48,6 +42,9 @@
// 鍥捐〃 DOM 寮曠敤
const chartDom = ref(null);
let myChart = null;
+
+// 鍔犺浇鐘舵�佸彉閲�
+const localLoading = ref(false); // <<< 鏂板灞�閮� loading 鍙橀噺
// 瀹夊叏鑾峰彇缁忕含搴�
const safeCurrentInfo = computed(() => {
@@ -94,6 +91,7 @@
}, wait);
};
}
+
// 鏃堕棿鏍煎紡鍖栧伐鍏峰嚱鏁�
function formatDateTime(date) {
const d = new Date(date);
@@ -103,20 +101,18 @@
const hours = String(d.getHours()).padStart(2, '0');
const minutes = String(d.getMinutes()).padStart(2, '0');
const seconds = String(d.getSeconds()).padStart(2, '0');
-
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
+
// 鑾峰彇骞舵洿鏂板浘琛�
async function fetchDataAndUpdateChart(chart) {
const info = currentInfo.value;
if (!info || showSelectPrompt.value || !chartDom.value) return;
-
const { longitude, latitude, serviceInfo } = info;
+ localLoading.value = true;
const result = await getFlowRateInfo(longitude, latitude, serviceInfo);
-
if (result && Array.isArray(result)) {
myData.value = result;
-
const option = {
title: {
text: '娴侀�熷彉鍖栬秼鍔�',
@@ -152,7 +148,6 @@
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
-
return `${month}-${day} \n${hours}:${minutes}`;
},
interval: 'auto',
@@ -193,7 +188,7 @@
}
},
{
- type: 'inside', // 鍐呴儴婊氬姩锛堟敮鎸侀紶鏍囨粴杞拰鎵嬪娍锛�
+ type: 'inside',
start: 0,
end: 100
}
@@ -211,7 +206,7 @@
color: '#3268fe'
},
smooth: false,
- progressive: 0 // 绂佹寮傛娓叉煋浠ユ彁鍗囧ぇ鏁版嵁閲忎笅鐨勫搷搴旈�熷害
+ progressive: 0
}],
textStyle: {
color: '#fff',
@@ -220,8 +215,10 @@
animation: false
};
- chart.setOption(option, true); // 鍚堝苟閰嶇疆
+ chart.setOption(option, true);
}
+
+ localLoading.value = false;
}
// 鍒濆鍖栧浘琛�
@@ -237,7 +234,7 @@
serviceName: serviceInfo
};
return getFlowRate(params).then(data => {
- console.log('222222222222222222鑾峰彇鍒扮殑鏁版嵁:', data);
+ // console.log('鑾峰彇鍒扮殑鏁版嵁:', data);
if (data && data.code === 200) {
return data.data; // 杩斿洖鍘熷鏁版嵁鏁扮粍
} else {
@@ -245,6 +242,7 @@
}
}).catch(error => {
console.error('鑾峰彇鏁版嵁鏃跺彂鐢熼敊璇�:', error);
+ ElMessage.warning('鏁版嵁鏈夎锛岃鑱旂郴绠＄悊鍛樻垨閲嶆柊杩涜妯℃嫙锛�');
return [];
});
}
@@ -254,14 +252,10 @@
() => currentInfo.value,
async (newVal) => {
if (!newVal || showSelectPrompt.value || !chartDom.value) return;
- // console.log('缁忓害:', newVal.longitude);
- // console.log('绾害:', newVal.latitude);
- // console.log('鏈嶅姟鍚嶇О:', newVal.serviceInfo);
// 閿�姣佹棫鍥捐〃
if (myChart) {
myChart.dispose();
}
-
// 鍒涘缓鏂板浘琛�
myChart = echarts.init(chartDom.value);
await fetchDataAndUpdateChart(myChart);
@@ -273,29 +267,24 @@
if (!showSelectPrompt.value && chartDom.value) {
myChart = echarts.init(chartDom.value);
initChart(myChart);
-
// 娣诲姞 resize 鐩戝惉鍣�
window.addEventListener('resize', debounce(() => {
if (myChart) myChart.resize();
}, 200));
}
-
// 娉ㄥ唽浜嬩欢鎬荤嚎鐩戝惉
EventBus.on('clear-water-velocity', clear);
});
onBeforeUnmount(() => {
- // 绉婚櫎 resize 鐩戝惉
window.removeEventListener('resize', debounce(() => {
if (myChart) myChart.resize();
}, 200));
-
// 娓呯悊鍥捐〃
if (myChart) {
myChart.dispose();
myChart = null;
}
-
// 绉婚櫎浜嬩欢鐩戝惉
EventBus.off('clear-water-velocity', clear);
});
@@ -313,7 +302,6 @@
myChart = null;
}
}
-
// 鏆撮湶 resize 鏂规硶渚涘閮ㄨ皟鐢�
function resizeChart() {
if (myChart) {
@@ -325,6 +313,7 @@
<style scoped>
.water-velocity-content {
+ position: relative;
padding-left: 8px;
padding-top: 8px;
border-radius: 6px;
--
Gitblit v1.9.3