417

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