417

src/views/home/components/box-2.vue

@@ -6,13 +6,16 @@
           <div class="item">
             <div class="label">今年总游客数</div>
             <scroll-number :count="homeStore.visitorInfoData.total_count_this_year" prefix="1" />
+			<!-- -->
           </div>
           <div class="item">
             <div class="label">今⽇总游客数</div>
             <scroll-number :count="homeStore.visitorInfoData.total_count_today" prefix="2" />
+			<!--  -->
           </div>
           <div class="item">
             <div class="label">总在园人数</div>
+			<!--  -->
             <scroll-number
               :count="homeStore.visitorInfoData.total_count_today_within_three_hours"
               prefix="3"
@@ -295,13 +298,20 @@
       background-size: 100% 100%;
       .left {
         display: flex;
-        width: vw(740);
+        width: vw(840);
         margin-top: vh(20);
+		flex:1;
+		
       }
       .right {
         flex: 1;
         display: flex;
         margin-top: vh(20);
+		justify-content: center;
+		.item{
+			flex:1;
+			text-align:center;
+		}
       }
       .item {
         margin-right: vh(20);
@@ -326,6 +336,9 @@
           }
         }
       }
+	  .item:last-child{
+		  margin:0;
+	  }
       .countup-wrap {
         display: inline-block;
         width: vw(40);

src/views/home/components/box-3.vue

@@ -35,13 +35,14 @@
       <div class="box">
         <div class="pt-10">
           <Title3 title="拥堵路段总数" />
-          <Line
-            :width="250"
-            :height="150"
-            :config="{ legend: false }"
-            :data="congestionData"
-            :xAxisData="congestionXAxisData"
-          />
+		  <Line
+		    :width="250"
+		    :height="150"
+		    :config="{ legend: false }"
+		    :data="congestionData"
+		    :xAxisData="congestionXAxisData"
+		  />
+        
         </div>
       </div>
       <div class="box">

src/views/home/components/jam-count.vue

@@ -1,6 +1,11 @@
 <!-- 拥堵次数占比 -->
 <template>
-  <div class="jam-count" :id="id" />
+	<div style="position: relative;">
+		<div class="jam-count" :id="id" />
+		<div v-if="condShow==0" class="nYong-du">加载中...</div>
+		<div v-if="condShow==1" class="nYong-du">暂无数据</div>
+	</div>
+
 </template>
 
 <script setup>
@@ -18,12 +23,18 @@
 
   let params = null
   const colorList = ['#FDC40A', '#FF5232', '#50F0A6']
-
+  let condShow = ref(0)
+  let aIndex = 1
   watch(
     () => props.list,
     (val) => {
+		aIndex+=1
+		if(aIndex>=3&&!val.length){
+		   condShow.value = 1
+		}
       if (val.length > 0) {
         setTimeout(() => {
+			condShow.value = 2
           init()
         }, 1000)
       }
@@ -127,6 +138,18 @@
 </script>
 
 <style scoped lang="scss">
+	.nYong-du{
+		position:absolute;
+		left:0;
+		top:0;
+		width: 100%;
+		height: 100%;
+		font-size:vw(18);
+		color:#999;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
   .jam-count {
     width: vw(250);
     height: vh(150);

src/views/home/components/jam-duration.vue

@@ -1,6 +1,11 @@
 <template>
   <!-- 拥堵时长 -->
-  <div class="jam" :id="id" />
+  <div style="position:relative;">
+	  <div  class="jam" :id="id" />
+	  <div v-if="condShow==0" class="nYong-du">加载中...</div>
+	  <div v-if="condShow==1" class="nYong-du">暂无数据</div>
+  </div>
+	 
 </template>
 
 <script setup>
@@ -15,12 +20,18 @@
       default: () => []
     }
   })
-
+  let condShow = ref(0)
+  let aIndex = 1
   watch(
     () => props.list,
     (val) => {
+		aIndex+=1
+		if(aIndex>=3&&!val.length){
+		   condShow.value = 1
+		}
       if (val.length > 0) {
         setTimeout(() => {
+			condShow.value = 2
           init()
         }, 1000)
       }
@@ -29,7 +40,7 @@
   )
 
   let params = null
-
+	
   const setSeriesData = () => {
     return props.list.map((item) => {
       return {
@@ -190,6 +201,18 @@
 </script>
 
 <style scoped lang="scss">
+	.nYong-du{
+		position:absolute;
+		left:0;
+		top:0;
+		width: 100%;
+		height: 100%;
+		font-size:vw(18);
+		color:#999;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
   .jam {
     width: vw(250);
     height: vh(160);