新版式

src/components/Line/index.vue

@@ -224,7 +224,7 @@
 		top:0;
 		width: 100%;
 		height: 100%;
-		font-size:vw(18);
+		font-size:font-vw(18);
 		// color:#999;
 		color:#02f9fa;
 		display: flex;

src/components/PieRow/index.vue

@@ -59,7 +59,7 @@
   watch(
     () => props.dataList,
     (newVal) => {
-		console.log(newVal,'333333')
+		console.log(newVal,'监听数据切换变化')
 		aIndex+=1
 		
 		if(aIndex>=3&&!newVal.length){

src/views/scenic/components/box-1.vue

@@ -29,7 +29,54 @@
       <iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="http://192.168.77.200/map/sxzd/sxzd.html"></iframe>
       <iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="http://192.168.77.200/map/lqh/lqh.html"></iframe>
     </div>
-    <div class="footer">
+	
+	<div class="box-1" style="padding: 0;margin:0;">
+	  <Title1 title="停车信息" />
+	  <div class="">
+	    <div class=" flex flex-1">
+	      <circle-progress
+	        v-for="(item, index) in garageList"
+	        :key="index"
+	        :width="80"
+	        :height="50"
+	        :value="parseFloat(item.rate)"
+	        :title="item.occupied"
+	        :subTitle="`${item.name}`"
+	      />
+	    </div>
+	    <div class="ml-20 mb-10 flex flex-1 justify-between">
+	      <count-item label="总停车场" :count="scenicStore.stopCarData.info.count" suffix="个" />
+	      <count-item
+	        label="剩余车位数"
+	        :count="scenicStore.stopCarData.info.occupiedSpaces"
+	        suffix="个"
+	      />
+	    </div>
+	  </div>
+	  <div class="flex">
+	    <div class="border mr-8 flex-1">
+	      <div class="pt-10">
+	        <Title3 title="今日景区车流量" />
+	      </div>
+	      <Line width="100%" :height="105" :data="carBearData" :xAxisData="carBearXAxisData" />
+	    </div>
+	    <div class="border flex-1">
+	      <div class="pt-10">
+	        <Title3 title="车辆归属地占比" />
+	      </div>
+	      <PieRow
+	        label="今日停车累计"
+	        :dataList="dataLists"
+	        :total="carTotal"
+	        width="98%"
+	        :height="105"
+	      />
+	    </div>
+	  </div>
+	</div>
+	
+	
+    <div class="footer" v-if="false">
       <div class="">
         <div class="item">
           <circle-progress
@@ -139,7 +186,31 @@ import pubSub from 'pubsub-js'
   const scenicStore = useScenicStore()
   const { initMap, addMarker, map, marker } = useMap()
  import { useHomeStore } from '@/stores/home'
+ const carBearData = computed(() => {
 	 
+   return [{ data: scenicStore.stopCarData.dataList.map((item) => item.value) }]
+ })
+ const carBearXAxisData = computed(() => {
+   return scenicStore.stopCarData.dataList.map((item) => item.name)
+ })
+ 
+ const garageList = computed(() => {
+   return scenicStore.stopCarData.headList
+ })
+ 
+  let dataLists = ref([])
+  watch(
+    () => scenicStore.stopCarData.dataLists,
+    (val) => {
+      // console.log(val.length, 'watch 监听')
+      if (val.length) {
+        dataLists.value = val
+      } else {
+        dataLists.value = []
+      }
+    },
+    { immediate: true }
+  )
  const homeStore = useHomeStore()
   let props = defineProps({
     scenicSpotId: {
@@ -220,6 +291,14 @@ import pubSub from 'pubsub-js'
 </script>
 
 <style scoped lang="scss">
+	.border {
+	  position: relative;
+	  padding: 0 vw(10);
+	  box-sizing: border-box;
+	  background-image: url('@/assets/images/bg-3.png');
+	  background-size: 100% 100%;
+	  flex:1;
+	}
 	.coll-box{
 		flex:1 !important;
 	}

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

@@ -32,18 +32,18 @@
           </div>
           <Line
             width="100%"
-            :height="440"
+            :height="140"
             :data="scenicQueueData"
             :xAxisData="scenicQueueXAxisData"
           />
         </div>
       </div>
-      <div class="box mr-8">
+      <div class="box box-9 mr-8">
         <Title1 title="景区承载" />
 	
-        <div class="">
+        <div class="flex">
           <circle-progress
-            :width="170"
+            :width="60"
             :height="50"
             :value="scenicStore.scenicBearData.header.jqRate"
             :title="`${scenicStore.scenicBearData.header.jqRate}%`"
@@ -68,13 +68,13 @@
           </div>
           <Line
             width="100%"
-            :height="390"
+            :height="125"
             :data="scenicBearData"
             :xAxisData="scenicBearXAxisData"
           />
         </div>
       </div>
-      <div class="box-1 mr-8" style="padding: 0;">
+      <div class="box-1 mr-8" v-if="false" style="padding: 0;">
         <Title1 title="停车信息" />
         <div class="">
           <div class=" flex flex-1">
@@ -102,7 +102,7 @@
             <div class="pt-10">
               <Title3 title="今日景区车流量" />
             </div>
-            <Line width="100%" :height="390" :data="carBearData" :xAxisData="carBearXAxisData" />
+            <Line width="100%" :height="105" :data="carBearData" :xAxisData="carBearXAxisData" />
           </div>
           <div class="border flex-1">
             <div class="pt-10">
@@ -113,7 +113,7 @@
               :dataList="dataLists"
               :total="carTotal"
               width="100%"
-              :height="300"
+              :height="110"
             />
           </div>
         </div>
@@ -137,10 +137,10 @@
           </div>
           <PieRow
             label="告警总数"
-            :dataList="scenicStore.secureData.dataList"
+            :dataList="scenicStore?.secureData.dataList"
             :total="alarmTotal"
             width="100%"
-            :height="450"
+            :height="140"
           />
         </div>
       </div>
@@ -167,8 +167,8 @@
           <div class="border mr-8">
             <Title3 title="拥堵次数占比" />
             <jam
-              :width="220"
+              width="100%"
-              :height="700"
+              :height="200"
               sub-title="拥堵频次总数"
               :list="scenicStore.trafficData.data.countRate"
 			  :text="'暂无拥堵'"
@@ -178,8 +178,8 @@
             <Title3 title="拥堵时长占比" />
             <jam
 			 :text="'暂无拥堵'"
-              :width="220"
+              width="100%"
-              :height="720"
+              :height="200"
               sub-title="拥堵总时长(分钟)"
               :list="scenicStore.trafficData.data.timeRate"
             />
@@ -189,7 +189,7 @@
 
       <div class="box-4 mr-8">
         <Title1 title="用户画像" />
-        <div class="flex" style="height: 100%;">
+        <div class="flex" style="height: 88%;">
           <div class="border mr-8 flex-1">
             <Title3 title="年龄/性别占比" />
             <age :list="scenicStore.userPortraitData.data.ageRate" />
@@ -221,16 +221,16 @@
             <Title3 title="客源地分析TOP5" />
             <RegionTop
               :list="scenicStore.userPortraitData.data.provinceRate"
-              :width="250"
+              width="100%"
-              :height="800"
+              :height="200"
             />
           </div>
           <div class="border flex-1">
             <Title3 title="购票来源" />
             <TicketSource
               :list="scenicStore.userPortraitData.data.channel"
-              :width="240"
+              width="100%"
-              :height="800"
+              :height="200"
             />
           </div>
         </div>
@@ -649,7 +649,7 @@
 		  align-items: center;
 		  background: #0a4190;
 		  border-radius: vw(4);
-		  font-size: vw(18); /* 16×1.2 */
+		  font-size: font-vw(18); /* 16×1.2 */
 		  font-weight:700;
 		  color: #fff;
 		  z-index: 999;
@@ -1055,6 +1055,7 @@
   }
   .container {
     margin: vh(120) 0 0 vw(10);
+	flex:1;
     .count-box {
       padding: 0 vw(10);
       height: vh(140);
@@ -1072,28 +1073,40 @@
     }
     .box {
       @extend .bg;
-      width: vw(650);
+      // width: vw(650);
-      // height: vh(475);
+      height: vh(880);
+	  min-width: vw(800);
+	  flex:1;
+    }
+	.box-9{
+		// width: vw(750);
 	}
     .box-1 {
       @extend .bg;
+	  	  
       // height: vh(475);
     }
     .box-2 {
       @extend .bg;
-      // height: vh(475);
+      height: vh(880);
+	  flex:1;
     }
     .box-3 {
       @extend .bg;
+	  flex:1;
+	  // width: vw(750);
       // height: vh(465);
     }
     .box-4 {
       @extend .bg;
+	  flex:1;
       // height: vh(465);
     }
     .box-5 {
+		// width: vw(750);
       @extend .bg;
       // height: vh(465);
+	  height:100%;
 	  flex:1;
     }
     .car-box {

src/views/traffic/components/box-1.vue

@@ -233,9 +233,10 @@
       &__legend {
         flex: 1;
 		display: flex;
+		flex-wrap: wrap;
         &-item {
           position: relative;
-          width: 100%;
+          width: 50%;
           height: vh(50);
           display: flex;
           align-items: center;