邓洁: echarts的loading

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