From 2d1d42f83a79b9a63237269c496649ff3ff1f79b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com> Date: Wed, 3 Jan 2024 14:50:59 +0800 Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81:=20echarts=E7=9A=84loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/index.scss | 31 +++++++++++++++++++ src/components/content/airInfo/AirInfo.vue | 28 +++++++++++++---- .../content/badGasInfo/BadGasInfo.vue | 11 +++++-- src/components/content/fanInfo/FanInfo.vue | 12 +++++-- src/components/content/usedEle/UsedEle.vue | 8 ++++- .../content/windPressure/WindPressureList.vue | 12 +++++-- 6 files changed, 88 insertions(+), 14 deletions(-) diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index ad8b43c..ddb1749 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -679,3 +679,34 @@ input[type="number"] { align-items: center; color: #2fb0df; } +//loading +.loading-block{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height:900px; + font-size: 55px; + color: #38CAFB; + letter-spacing: 3px; + .loading { + margin-bottom: 20px; + width: 100px; + height: 100px; + border: 2px solid #38CAFB; + border-top-color: transparent; + border-radius: 100%; + animation: circle infinite 0.75s linear; + } + +} + +// 转转转动画 +@keyframes circle { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/src/components/content/airInfo/AirInfo.vue b/src/components/content/airInfo/AirInfo.vue index dcc44bd..1bdb540 100644 --- a/src/components/content/airInfo/AirInfo.vue +++ b/src/components/content/airInfo/AirInfo.vue @@ -19,7 +19,11 @@ :modal="false">
-
+
+
+ {{loadingText}} +
+
@@ -39,7 +43,11 @@ :modal="false">
-
+
+
+ 加载中... +
+
@@ -63,6 +71,7 @@ import ItemInfo from "./childComps/ItemInfo.vue"; import TimeRangeBtn from "@/components/timeRangeBtn/index.vue" import * as echarts from 'echarts'; import {getEchartsInfo} from "../../../api/largeScreen"; +import {ElMessage} from "element-plus"; let myEcharts = reactive({}); let myAirEcharts = reactive({}); @@ -71,15 +80,17 @@ const props = defineProps({ airData: Array }); const windSpeed = ref(0) +const loadingText = ref('加载中...') const windSpeedId = ref(0) const airTitle = ref('') const airList = ref([]) const timeList = ref(["年", "月", "日"]); const selectTimeButton = ref(2); const isWindSpeedVisited = ref(false); +const showSpeedLoading = ref(false) const isAirVisited = ref(false); +const showLoading = ref(false) watch(() => props.list, (now) => { - console.log('props.list', now) airList.value?.forEach(item => { now.forEach(newItem => { if (item.equipmentId === newItem.equipmentId) { @@ -98,19 +109,25 @@ watch(() => props.airData, (now) => { } }, {deep: true}); const getChartInfo = (equipmentId) => { + isWindSpeedVisited.value = true + showSpeedLoading.value=true getEchartsInfo(equipmentId).then(res => { if (res?.code === 1000) { - isWindSpeedVisited.value = true + showSpeedLoading.value=false nextTick(() => { initChart(res.data.dates, res.data.values) }) + }else { + loadingText.value=res.msg } }) } const getGasChartInfo = (equipmentId) => { + isAirVisited.value = true + showLoading.value=true getEchartsInfo(equipmentId).then(res => { if (res?.code === 1000) { - isAirVisited.value = true + showLoading.value = false nextTick(() => { initAirChart(res.data.dates, res.data.values) }) @@ -118,7 +135,6 @@ const getGasChartInfo = (equipmentId) => { }) } const handleOpenChart = () => { - // isWindSpeedVisited.value = true getChartInfo(windSpeedId.value) } diff --git a/src/components/content/badGasInfo/BadGasInfo.vue b/src/components/content/badGasInfo/BadGasInfo.vue index 2b96b74..48e6b66 100644 --- a/src/components/content/badGasInfo/BadGasInfo.vue +++ b/src/components/content/badGasInfo/BadGasInfo.vue @@ -24,7 +24,11 @@ >
-
+
+
+ 加载中... +
+
@@ -56,6 +60,7 @@ const props = defineProps({ const timeList = ref(["年", "月", "日"]); const selectTimeButton = ref(2); const isBadGasVisited = ref(false); +const showLoading = ref(false) const badGasList = ref([]); let myEcharts = reactive({}); const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png")); @@ -132,10 +137,12 @@ const changeData = (item) => { }; }; const getBadGasChartInfo = () => { + isBadGasVisited.value = true + showLoading.value=true let id = props.tunnelId getBadGasEchartsInfo(id).then(res => { if (res?.code === 1000) { - isBadGasVisited.value = true + showLoading.value=false nextTick(() => { initChart(res.data.dates, res.data) }) diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue index 559dceb..9f9c3c1 100644 --- a/src/components/content/fanInfo/FanInfo.vue +++ b/src/components/content/fanInfo/FanInfo.vue @@ -77,7 +77,11 @@ :modal="false">
-
+
+
+ 加载中... +
+
@@ -114,6 +118,7 @@ const stateA = ref(false) const stateB = ref(false) const stateC = ref(false) const isVisited = ref(false) +const showLoading = ref(false) const fanIndex = ref(0) let myEcharts = reactive({}); @@ -151,9 +156,11 @@ watch(() => props.list, (now) => { handleOnMounted() }, {deep: true}); const getFanInfo = (equipmentId) => { + isVisited.value = true + showLoading.value=true getFanEchartsInfo(equipmentId).then(res => { if (res?.code === 1000) { - isVisited.value = true + showLoading.value=false nextTick(() => { initChart(res.data.dates, res.data.currentsA,res.data.currentsB,res.data.currentsC) }) @@ -161,6 +168,7 @@ const getFanInfo = (equipmentId) => { }) } const handleOpenChart = (item,index) => { + getFanInfo(item.equipmentId) fanIndex.value=index+1 } diff --git a/src/components/content/usedEle/UsedEle.vue b/src/components/content/usedEle/UsedEle.vue index 059eb08..cf09b65 100644 --- a/src/components/content/usedEle/UsedEle.vue +++ b/src/components/content/usedEle/UsedEle.vue @@ -38,7 +38,11 @@
345v
-
+
+
+ 加载中... +
+
@@ -58,6 +62,7 @@ const props = defineProps({ }); let myEcharts = reactive({}); const isVisited = ref(false); +const showLoading = ref(false) const eleData = ref([]) const electricityConsumptionMonthly = ref(0) const monthlySavings = ref(4000) @@ -121,6 +126,7 @@ const getBasicData = (data) => { const handleOpenChart = () => { console.log('用电量弹窗') isVisited.value = true + // showLoading.value=true nextTick(() => { initChart() }) diff --git a/src/components/content/windPressure/WindPressureList.vue b/src/components/content/windPressure/WindPressureList.vue index 217edf4..5bee122 100644 --- a/src/components/content/windPressure/WindPressureList.vue +++ b/src/components/content/windPressure/WindPressureList.vue @@ -13,7 +13,11 @@ :modal="false">
-
+
+
+ 加载中... +
+
@@ -45,9 +49,9 @@ const windSort = ref(1) const timeList = ref(["年", "月", "日"]); const selectTimeButton = ref(2); const isVisited = ref(false); +const showLoading = ref(false) let myEcharts = reactive({}); const wpList = ref([]); -const chartData = ref() watch(() => props.list, (now) => { wpList.value.forEach(item => { now.forEach(newItem => { @@ -63,9 +67,11 @@ watch(() => props.winData, (now) => { }, {deep: true}); const getWindInfo = (equipmentId) => { + isVisited.value = true + showLoading.value=true getEchartsInfo(equipmentId).then(res => { if (res?.code === 1000) { - isVisited.value = true + showLoading.value=false nextTick(() => { initChart(res.data.dates, res.data.values) })