邓洁: echarts的loading

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);
+  }
+}

src/components/content/airInfo/AirInfo.vue

@@ -19,7 +19,11 @@
                  :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showSpeedLoading">
+          <div class="loading" v-if="loadingText==='加载中...'"></div>
+          <span>{{loadingText}}</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="containerWind"></div>
           <div style="width: 1px;"></div>
         </div>
@@ -39,7 +43,11 @@
                  :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showLoading">
+          <div class="loading" ></div>
+          <span>加载中...</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="containerAir"></div>
           <div style="width: 1px;"></div>
         </div>
@@ -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)
 }
 

src/components/content/badGasInfo/BadGasInfo.vue

@@ -24,7 +24,11 @@
       >
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showLoading">
+          <div class="loading" ></div>
+          <span>加载中...</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="containerBad"></div>
           <div style="width: 1px"></div>
         </div>
@@ -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)
       })

src/components/content/fanInfo/FanInfo.vue

@@ -77,7 +77,11 @@
                  :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showLoading">
+          <div class="loading" ></div>
+          <span>加载中...</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="containerFan"></div>
           <div style="width: 1px;"></div>
         </div>
@@ -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
 }

src/components/content/usedEle/UsedEle.vue

@@ -38,7 +38,11 @@
             <div class="value">345v</div>
           </div>
         </div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showLoading">
+          <div class="loading" ></div>
+          <span>加载中...</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="containerEle"></div>
           <div style="width: 1px;"></div>
         </div>
@@ -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()
   })

src/components/content/windPressure/WindPressureList.vue

@@ -13,7 +13,11 @@
                  :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
-        <div class="chat-dialog">
+        <div class="loading-block" v-if="showLoading">
+          <div class="loading" ></div>
+          <span>加载中...</span>
+        </div>
+        <div class="chat-dialog" v-else>
           <div id="container"></div>
           <div style="width: 1px;"></div>
         </div>
@@ -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)
       })