422

src/components/Line/index.vue

@@ -4,7 +4,8 @@
 		  :id="id"
 		  :style="{
 		    width: styleUtil.px2vw(width),
-		    height: styleUtil.px2vh(height)
+		    height: styleUtil.px2vh(height),
+			opacity:data.length?1:0,
 		  }"
 		/>
 		<div v-if="condShow==0" class="nYong-du">加载中...</div>
@@ -172,7 +173,7 @@
     [() => props.data, () => props.xAxisData],
     (val) => {
 	  aIndex+=1
-	  if(aIndex>=3&&!val[0].length){
+	  if(aIndex>=3&&!val[0][0].data.length){
 		  condShow.value = 1
 	  }
       if (val[0].length > 0 && val[1].length > 0) {
@@ -181,7 +182,7 @@
           init()
         }, 1000)
       }else{
-		  
+		  // condShow.value = 1
 	  }
     },
     { immediate: true }

src/components/PieRow/index.vue

@@ -4,7 +4,8 @@
 		  :id="id"
 		  :style="{
 		    width: styleUtil.px2vw(width),
-		    height: styleUtil.px2vh(height)
+		    height: styleUtil.px2vh(height),
+			opacity:dataList.length?1:0,
 		  }"
 		/>
 		<div v-if="condShow==0" class="nYong-du">加载中...</div>
@@ -47,7 +48,7 @@
     }
   })
 
-  const { id, setOption } = useEchart()
+  const { id, setOption,chartVal,dispose ,clearOption} = useEchart()
 
   var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
 
@@ -106,6 +107,7 @@
   watch(
     () => props.dataList,
     (newVal) => {
+		console.log(chartVal.value,newVal,'newValnewValnewValnewValnewVal')
 		aIndex+=1
 		if(aIndex>=3&&!newVal.length){
 			  condShow.value = 1
@@ -125,7 +127,11 @@
             ...defaultCofig,
             ...props.config
           })
+		  
         })
+      }else{
+		
+		 
 	  }
     },
     { immediate: true }
@@ -146,5 +152,6 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
+	
 	}
 </style>

src/components/RegionTop/index.vue

@@ -1,12 +1,18 @@
 <!-- 客源地分析TOP5 -->
 <template>
+
+  <div style="position:relative;">
   	<div
   	  :id="id"
   	  :style="{
   	    width: styleUtil.px2vw(width),
-      height: styleUtil.px2vh(height)
+  	    height: styleUtil.px2vh(height),
+		opacity:list.length?1:0,
   	  }"
   	/>
+  	<div v-if="condShow==0" class="nYong-du">加载中...</div>
+  	<div v-if="condShow==1" class="nYong-du">暂无数据</div>
+  </div>
 </template>
 
 <script setup>
@@ -31,13 +37,21 @@
 
   const { id, setOption } = useEchart()
   let params = null
-
+	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(() => {
 			 init()
 		   }, 1000)
+	   }
+
     },
     {
       immediate: true
@@ -165,6 +179,19 @@
 </script>
 
 <style scoped lang="scss">
+	.nYong-du{
+		position:absolute;
+		left:0;
+		top:0;
+		width: 100%;
+		height: 100%;
+		font-size:vw(18);
+		// color:#999;
+		color:#02f9fa;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
   .top {
     width: vw(250);
     height: vh(366);

src/components/TicketSource/index.vue

@@ -6,7 +6,8 @@
   	  :id="id"
   	  :style="{
   	    width: styleUtil.px2vw(width),
-  	    height: styleUtil.px2vh(height)
+  	    height: styleUtil.px2vh(height),
+		opacity:list.length?1:0,
   	  }"
   	/>
   	<div v-if="condShow==0" class="nYong-du">加载中...</div>
@@ -42,7 +43,8 @@
   watch(
     () => props.list,
     (val) => {
-		if(aIndex>=3&&!newVal.length){
+		aIndex+=1
+		if(aIndex>=3&&!val.length){
 			  condShow.value = 1
 		}
       if (val.length > 0) {

src/hooks/echart.js

@@ -4,14 +4,22 @@ import { guid } from '@/utils/util'
 
 export function useEchart() {
   let chart = null
+  let chartVal = ref(null)
   let id = ref(guid())
   const initChart = () => {
     const dom = document.getElementById(id.value)
     chart = echarts.init(dom)
+	chartVal.value = chart
   }
   const setOption = (params, update = false) => {
     chart.setOption(params, update)
   }
+  const clearOption = () => {
+	   // 将series设置为空数组，可以清空图表内容
+    chart.setOption({
+		series:[]
+	})
+  }
   const dispose = () => {
     chart.dispose()
     chart = null
@@ -25,5 +33,5 @@ export function useEchart() {
     window.addEventListener('resize', resize)
   })
 
-  return { id, chart, setOption, dispose, initChart }
+  return { id, chart, setOption, dispose, initChart,chartVal,clearOption }
 }

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

@@ -27,7 +27,7 @@
         <img class="icon" src="@/assets/images/icon-4.png" alt="" />
         <div>
           <countup :end-val="homeStore.trafficInfoData.info.zdydsc" />
-          <div class="label">最大拥堵时长 </div>
+          <div class="label">最大拥堵时长(分钟) </div>
         </div>
       </div>
     </div>

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

@@ -1,7 +1,9 @@
 <!-- 拥堵次数占比 -->
 <template>
 	<div style="position: relative;">
-		<div class="jam-count" :id="id" />
+		<div class="jam-count" :style="{
+			opacity:list.length?1:0,
+		}" :id="id" />
 		<div v-if="condShow==0" class="nYong-du">加载中...</div>
 		<div v-if="condShow==1" class="nYong-du">{{text}}</div>
 	</div>
@@ -81,7 +83,8 @@
           itemGap: fitChartSize(6),
           formatter: (name) => {
             let obj = props.list.find((item) => item.name == name)
-            return '{name|' + name + '} {value|' + obj?.count + '}{value|%}'
+			console.log(obj,'5555555555555555555')
+            return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
           },
           textStyle: {
             rich: {

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

@@ -1,7 +1,9 @@
 <template>
   <!-- 拥堵时长 -->
   <div style="position:relative;">
-	  <div  class="jam" :id="id" />
+	  <div  class="jam" :style="{
+			opacity:list.length?1:0,
+		}" :id="id" />
 	  <div v-if="condShow==0" class="nYong-du">加载中...</div>
 	  <div v-if="condShow==1" class="nYong-du">{{text}}</div>
   </div>

src/views/scenic/components/big-map.vue

@@ -131,8 +131,8 @@
       number: 0
     },
     {
-      label: '行驶',
+      label: '运行',
-      value: '行驶',
+      value: '运行',
       number: 0
     },
     {

src/views/scenic/components/jam.vue

@@ -5,7 +5,8 @@
   	  :id="id"
   	  :style="{
   	    width: styleUtil.px2vw(width),
-  	    height: styleUtil.px2vh(height)
+  	    height: styleUtil.px2vh(height),
+		opacity:list.length?1:0,
   	  }"
   	/>
   	<div v-if="condShow==0" class="nYong-du">加载中...</div>

src/views/scenic/components/traffic-flow.vue

@@ -1,6 +1,13 @@
 <!-- 交通负载 -->
 <template>
-  <div class="traffic-flow" :id="id" />
+  
+  <div style="position: relative;">
+  	<div class="traffic-flow" :style="{
+			opacity:list.length?1:0,
+		}" :id="id" />
+  	<div v-if="condShow==0" class="nYong-du">加载中...</div>
+  	<div v-if="condShow==1" class="nYong-du">{{text}}</div>
+  </div>
 </template>
 
 <script setup>
@@ -13,14 +20,24 @@
     list: {
       type: Array,
       default: () => []
+    },
+	text:{
+		type: String,
+		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) {
         setTimeout(() => {
+			condShow.value = 2
           init()
         }, 1000)
       }
@@ -126,6 +143,19 @@
 </script>
 
 <style scoped lang="scss">
+	.nYong-du{
+		position:absolute;
+		left:0;
+		top:0;
+		width: 100%;
+		height: 100%;
+		font-size:vw(18);
+		// color:#999;
+		color:#02f9fa;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
   .traffic-flow {
     width: vw(260);
     height: vh(300);

src/views/vehicles/components/big-map.vue

@@ -133,8 +133,8 @@ import PubSub from 'pubsub-js'
       number: 0
     },
     {
-      label: '行驶',
+      label: '运行',
-      value: '行驶',
+      value: '运行',
       number: 0
     },
     {