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 +++++++++++++---------------------
1 files changed, 13 insertions(+), 21 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;
--
Gitblit v1.9.3