4.22

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

@@ -48,13 +48,13 @@
       <div class="box">
         <div class="pt-10">
           <Title3 title="拥堵次数占比" />
-          <jam-count :list="homeStore.trafficInfoData.data.countRate" />
+          <jam-count :text="'暂无拥堵'" :list="homeStore.trafficInfoData.data.countRate" />
         </div>
       </div>
       <div class="box">
         <div class="pt-10">
           <Title3 title="拥堵时长" />
-          <jam-duration :list="homeStore.trafficInfoData.data.timeRate" />
+          <jam-duration :text="'暂无拥堵'" :list="homeStore.trafficInfoData.data.timeRate" />
         </div>
       </div>
     </div>
@@ -78,7 +78,7 @@
       <div>
         <div v-for="item in homeStore.carStopInfoData.spotInfo">
           <div class="label">{{ item.name }}</div>
-          <div class="value" :class="{ error: item.type == 1, success: item.type == 0 }">
+          <div class="value" :class="{ error: item.type == 1, success: item.type == 0,type3: item.type==2 }">
             {{ item.value }}
           </div>
         </div>
@@ -108,8 +108,12 @@
       </div>
       <div class="box-1">
         <div class="pt-10">
-          <Title3 title="停车场空余" />
-          <vacancy :list="homeStore.carStopInfoData.dataList2" />
+          <Title3 title="停车场使用" />
+		   <el-carousel trigger="click" interval="5000">
+			<el-carousel-item v-for="item in splitList" :key="item">
+			  <vacancy :list="item" />
+			</el-carousel-item>
+		  </el-carousel>
         </div>
       </div>
     </div>
@@ -259,7 +263,17 @@
   const shipMove = computed(() => {
     return homeStore.carShipData?.ship?.info.length > 3
   })
-
+  const splitArray = (arr,len)=>{
+	    let result = [];
+	    for (let i = 0; i < arr.length; i += len) {
+	      result.push(arr.slice(i, i + len));
+	    }
+	    return result;
+  }
+  const splitList = computed(()=>{
+	  let splittedArrays = splitArray(homeStore.carStopInfoData.dataList2, 3);
+	  return splittedArrays
+  })
   const parkData = computed(() => {
     return [{ data: homeStore.carStopInfoData.dataList.map((item) => item.value) }]
   })
@@ -273,6 +287,7 @@
   const congestionXAxisData = computed(() => {
     return homeStore.trafficInfoData.data.congestion.map((item) => item.name)
   })
+  console.log(homeStore.carStopInfoData.spotInfo,'homeStore.carStopInfoData.spotInfo')
 </script>
 
 <style lang="scss" scoped>
@@ -352,11 +367,14 @@
           color: #ffffff;
         }
         .error {
-          color: #e21b1b;
+          color: #F15A25;
         }
         .success {
-          color: #02f9fa;
+          color: #02F9FA;
         }
+		.type3{
+		  color:#E21B1B;
+		}
       }
     }
     .car-ship {

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

@@ -3,7 +3,7 @@
 	<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 v-if="condShow==1" class="nYong-du">{{text}}</div>
 	</div>
 
 </template>
@@ -16,7 +16,11 @@
     list: {
       type: Array,
       default: () => []
-    }
+    },
+	text:{
+		type: String,
+		default: '暂无数据'
+	}
   })
 
   const { id, setOption } = useEchart()
@@ -145,7 +149,8 @@
 		width: 100%;
 		height: 100%;
 		font-size:vw(18);
-		color:#999;
+		// color:#999;
+		color:#02f9fa;
 		display: flex;
 		align-items: center;
 		justify-content: center;

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

@@ -3,7 +3,7 @@
   <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 v-if="condShow==1" class="nYong-du">{{text}}</div>
   </div>
 	 
 </template>
@@ -18,7 +18,11 @@
     list: {
       type: Array,
       default: () => []
-    }
+    },
+	text:{
+		type: String,
+		default: '暂无数据'
+	}
   })
   let condShow = ref(0)
   let aIndex = 1
@@ -208,7 +212,8 @@
 		width: 100%;
 		height: 100%;
 		font-size:vw(18);
-		color:#999;
+		// color:#999;
+		color:#02f9fa;
 		display: flex;
 		align-items: center;
 		justify-content: center;