feat:修改首页loading

src/views/Dashboard/src/DashboardView.vue

@@ -135,7 +135,7 @@ const ETDobj = reactive({
   ETD_Radius: [],
   download_name: ''
 })
-const ETDLoading = ref(false)
+const ETDLoading = ref(true)
 const GetETDEcharts = () => {
   const currentDate = new Date()
   let tenyear = currentDate.getFullYear()
@@ -164,7 +164,7 @@ const GetETDEcharts = () => {
       }
     })
     .finally(() => {
-      ETDLoading.value = true
+      ETDLoading.value = false
     })
 }
 // 获取KPI Departure图表数据
@@ -174,7 +174,7 @@ const KPIobj = reactive({
   ETD_Radius: [],
   download_name: ''
 })
-const KPILoading = ref(false)
+const KPILoading = ref(true)
 const GetKPIEcharts = () => {
   $api
     .GetKPIEcharts({
@@ -189,7 +189,7 @@ const GetKPIEcharts = () => {
       }
     })
     .finally(() => {
-      KPILoading.value = true
+      KPILoading.value = false
     })
 }
 // 获取KPI Arrival图表数据
@@ -199,7 +199,7 @@ const Arrivalobj = reactive({
   ETD_Radius: [],
   download_name: ''
 })
-const KPIArrivalLoading = ref(false)
+const KPIArrivalLoading = ref(true)
 const GetKPIArrivalEcharts = () => {
   $api
     .GetKPIEcharts({
@@ -214,7 +214,7 @@ const GetKPIArrivalEcharts = () => {
       }
     })
     .finally(() => {
-      KPIArrivalLoading.value = true
+      KPIArrivalLoading.value = false
     })
 }
 // 获取Pending Departure图表数据
@@ -224,7 +224,7 @@ const Pendingobj = reactive({
   ETD_Radius: [],
   download_name: ''
 })
-const PendingLoading = ref(false)
+const PendingLoading = ref(true)
 const GetPendingEcharts = () => {
   $api
     .GetPendingEcharts({
@@ -239,7 +239,7 @@ const GetPendingEcharts = () => {
       }
     })
     .finally(() => {
-      PendingLoading.value = true
+      PendingLoading.value = false
     })
 }
 // 获取Pending Arrival图表数据
@@ -249,7 +249,7 @@ const PendingArrivalobj = reactive({
   ETD_Radius: [],
   download_name: ''
 })
-const PendingArrivalLoading = ref(false)
+const PendingArrivalLoading = ref(true)
 const GetPendingArrivalEcharts = () => {
   $api
     .GetPendingEcharts({
@@ -264,7 +264,7 @@ const GetPendingArrivalEcharts = () => {
       }
     })
     .finally(() => {
-      PendingArrivalLoading.value = true
+      PendingArrivalLoading.value = false
     })
 }
 // 获取ContainerCount
@@ -277,7 +277,7 @@ const containerObj = reactive({
   download_name: ''
 })
 const containerType = ref([])
-const containerLoading = ref(false)
+const containerLoading = ref(true)
 const GetContainerCountEcharts = (val: any) => {
   const currentDate = new Date()
   let tenyear = currentDate.getFullYear()
@@ -314,11 +314,11 @@ const GetContainerCountEcharts = (val: any) => {
       }
     })
     .finally(() => {
-      containerLoading.value = true
+      containerLoading.value = false
     })
 }
 //获取CO2 Origin
-const EmissionLoading = ref(false)
+const EmissionLoading = ref(true)
 const EmissionObj = reactive({
   bar_title: '',
   barList: [],
@@ -341,7 +341,7 @@ const GetCo2EmissionEcharts = () => {
       }
     })
     .finally(() => {
-      EmissionLoading.value = true
+      EmissionLoading.value = false
     })
 }
 //获取CO2 Destination
@@ -353,7 +353,7 @@ const DestinationObj = reactive({
   interval: 0,
   download_name: ''
 })
-const DestinationLoading = ref(false)
+const DestinationLoading = ref(true)
 const GetCo2DestinationEcharts = () => {
   $api
     .GetCo2DestinationEcharts({})
@@ -368,7 +368,7 @@ const GetCo2DestinationEcharts = () => {
       }
     })
     .finally(() => {
-      DestinationLoading.value = true
+      DestinationLoading.value = false
     })
 }
 const topdestinationinType = ref()
@@ -386,7 +386,7 @@ const Top1OInterval_dest = reactive({
   Max: 0,
   interval: 0
 })
-const TopOriginLoading = ref(false)
+const TopOriginLoading = ref(true)
 const GetTop10ODEcharts = () => {
   $api
     .GetTop10ODEcharts({})
@@ -403,7 +403,7 @@ const GetTop10ODEcharts = () => {
       }
     })
     .finally(() => {
-      TopOriginLoading.value = true
+      TopOriginLoading.value = false
     })
 }
 onMounted(() => {
@@ -888,7 +888,7 @@ const ClickParams = (val: any) => {
                       ref="pie_chart_kpi_departure"
                       @ClickParams="ClickParams(item.title + '0')"
                       :PieData="KPIobj"
-                      :isLoading="KPILoading"
+                      v-vloading="KPILoading"
                       style="height: 300px"
                     ></PieChart>
                   </div>
@@ -896,7 +896,7 @@ const ClickParams = (val: any) => {
                     <PieChart
                       ref="pie_chart_kpi_arrival"
                       :PieData="Arrivalobj"
-                      :isLoading="KPIArrivalLoading"
+                      v-vloading="KPIArrivalLoading"
                       @ClickParams="ClickParams(item.title + '1')"
                       style="height: 300px"
                     ></PieChart>
@@ -926,7 +926,7 @@ const ClickParams = (val: any) => {
                     <PieChart
                       ref="pie_chart_pending_departure"
                       :PieData="Pendingobj"
-                      :isLoading="PendingLoading"
+                      v-vloading="PendingLoading"
                       @ClickParams="ClickParams(item.title + '0')"
                       style="height: 300px"
                     ></PieChart>
@@ -936,7 +936,7 @@ const ClickParams = (val: any) => {
                       ref="pie_chart_pending_arrival"
                       @ClickParams="ClickParams(item.title + '1')"
                       :PieData="PendingArrivalobj"
-                      :isLoading="PendingArrivalLoading"
+                      v-vloading="PendingArrivalLoading"
                       style="height: 300px"
                     ></PieChart>
                   </div>
@@ -1015,7 +1015,7 @@ const ClickParams = (val: any) => {
                   ref="pie_chart_ETD"
                   @ClickParams="ClickParams(item.title)"
                   :PieData="ETDobj"
-                  :isLoading="ETDLoading"
+                  v-vloading="ETDLoading"
                   style="height: 300px"
                 ></PieChart>
               </template>
@@ -1066,7 +1066,7 @@ const ClickParams = (val: any) => {
                 <BarChart
                   ref="seller_chart_Container_count"
                   :BarData="containerObj"
-                  :isLoading="containerLoading"
+                  v-vloading="containerLoading"
                   style="height: 300px"
                   :barHeight="{ height: '300px' }"
                 ></BarChart>
@@ -1111,7 +1111,7 @@ const ClickParams = (val: any) => {
                       ref="seller_chart_top10_origin"
                       @clickParams="ClickParams(item.title1)"
                       :SellerData="Top10Obj.OriginData"
-                      :isLoading="TopOriginLoading"
+                      v-vloading="TopOriginLoading"
                       :Interval="Top1OInterval"
                     ></SellerChart>
                   </div>
@@ -1128,7 +1128,7 @@ const ClickParams = (val: any) => {
                       @clickParams="ClickParams(item.title2)"
                       :SellerData="Top10Obj.DestinationData"
                       :Interval="Top1OInterval_dest"
-                      :isLoading="TopOriginLoading"
+                      v-vloading="TopOriginLoading"
                       style="height: 272px"
                     ></SellerChart>
                   </div>
@@ -1167,7 +1167,7 @@ const ClickParams = (val: any) => {
                   ref="seller_chart_CO2_origin"
                   :BarData="EmissionObj"
                   @clickParams="ClickParams(item.title)"
-                  :isLoading="EmissionLoading"
+                  v-vloading="EmissionLoading"
                   style="height: 250px"
                   :barHeight="{ height: '250px' }"
                 ></BarChart>
@@ -1201,7 +1201,7 @@ const ClickParams = (val: any) => {
                 <BarChart
                   ref="seller_chart_CO2_destination"
                   :BarData="DestinationObj"
-                  :isLoading="DestinationLoading"
+                  v-vloading="DestinationLoading"
                   style="height: 250px"
                   @clickParams="ClickParams(item.title)"
                   :barHeight="{ height: '250px' }"

src/views/Dashboard/src/components/BarChart.vue

@@ -4,11 +4,9 @@ import * as echarts from 'echarts'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
 const props = defineProps({
   BarData: Object,
-  barHeight: Object,
-  isLoading: Boolean
+  barHeight: Object
 })
 const bar_data = ref(props.BarData)
-const bar_loading = ref(props.isLoading)
 const bar_ref = ref()
 watch(
   () => props.BarData,
@@ -27,16 +25,6 @@ watch(
     deep: true
   }
 )
-watch(
-  () => props.isLoading,
-  (current) => {
-    bar_loading.value = current
-    initChart()
-  },
-  {
-    deep: true
-  }
-)
 // 最大值
 const Max = computed(() => {
   return bar_data.value?.Max
@@ -222,21 +210,11 @@ const clickParams = () => {
 }
 const initChart = () => {
   const bar_chart = echarts.init(bar_ref.value)
-  bar_chart.showLoading({
-    text: 'Loading',
-    color: '#ed6d00',
-    textColor: '#ed6d00',
-    maskColor: 'rgb(43, 47, 54,0.7)',
-    zlevel: 0
+  bar_chart.setOption(initOption)
+  //图表响应式
+  window.addEventListener('resize', () => {
+    bar_chart.resize()
   })
-  if (bar_loading.value) {
-    bar_chart.hideLoading()
-    bar_chart.setOption(initOption)
-    //图表响应式
-    window.addEventListener('resize', () => {
-      bar_chart.resize()
-    })
-  }
 }
 defineExpose({
   paramsdata

src/views/Dashboard/src/components/PieChart.vue

@@ -3,11 +3,9 @@
 import * as echarts from 'echarts'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
 const props = defineProps({
-  PieData: Object,
-  isLoading: Boolean
+  PieData: Object
 })
 const pie_data = ref(props.PieData)
-const pie_loading = ref(props.isLoading)
 watch(
   () => props.PieData,
   (current) => {
@@ -20,16 +18,6 @@ watch(
     deep: true
   }
 )
-watch(
-  () => props.isLoading,
-  (current) => {
-    pie_loading.value = current
-    initChart()
-  },
-  {
-    deep: true
-  }
-)
 const pie_ref = ref()
 
 // legend
@@ -189,21 +177,11 @@ const clickParams = () => {
 }
 const initChart = () => {
   const pie_chart = echarts.init(pie_ref.value)
-  pie_chart.showLoading({
-    text: 'Loading',
-    color: '#ed6d00',
-    textColor: '#ed6d00',
-    maskColor: 'rgb(43, 47, 54,0.7)',
-    zlevel: 0
+  pie_chart.setOption(initOption)
+  //图表响应式
+  window.addEventListener('resize', () => {
+    pie_chart.resize()
   })
-  if (pie_loading.value) {
-    pie_chart.hideLoading()
-    pie_chart.setOption(initOption)
-    //图表响应式
-    window.addEventListener('resize', () => {
-      pie_chart.resize()
-    })
-  }
 }
 defineExpose({
   paramsdata

src/views/Dashboard/src/components/SellerChart.vue

@@ -4,12 +4,10 @@ import * as echarts from 'echarts'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
 const props = defineProps({
   SellerData: Array,
-  Interval: Object,
-  isLoading: Boolean
+  Interval: Object
 })
 const seller_data = ref(props.SellerData)
 const seller_interval = ref(props.Interval)
-const seller_loading = ref(props.isLoading)
 const seller_ref = ref()
 watch(
   () => props.SellerData,
@@ -33,16 +31,6 @@ watch(
     deep: true
   }
 )
-watch(
-  () => props.isLoading,
-  (current) => {
-    seller_loading.value = current
-    initChart()
-  },
-  {
-    deep: true
-  }
-)
 // 最大值
 const Max = computed(() => {
   return seller_interval.value?.Max
@@ -193,21 +181,11 @@ const initChart = () => {
   })
   const seller_chart = echarts.init(seller_ref.value)
   //图表响应式
-  seller_chart.showLoading({
-    text: 'Loading',
-    color: '#ed6d00',
-    textColor: '#ed6d00',
-    maskColor: 'rgb(43, 47, 54,0.7)',
-    zlevel: 0
+  seller_chart.setOption(initOption)
+  //图表响应式
+  window.addEventListener('resize', () => {
+    seller_chart.resize()
   })
-  if (seller_loading.value) {
-    seller_chart.hideLoading()
-    seller_chart.setOption(initOption)
-    //图表响应式
-    window.addEventListener('resize', () => {
-      seller_chart.resize()
-    })
-  }
 }
 defineExpose({
   paramsdata,