新版式

2025-11-26 23:25:22 +08:00
parent 2f34ab23a6
commit d05a0f645e
6 changed files with 123 additions and 30 deletions
--- a/dist11.25.zip
+++ b/dist11.25.zip
--- a/src/components/Line/index.vue
+++ b/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;
--- a/src/components/PieRow/index.vue
+++ b/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){
--- a/src/views/scenic/components/box-1.vue
+++ b/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;
 	}
--- a/src/views/scenic/components/box-2.vue
+++ b/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,16 +137,16 @@
          </div>
          <PieRow
            label="告警总数"
-            :dataList="scenicStore.secureData.dataList"
+            :dataList="scenicStore?.secureData.dataList"
            :total="alarmTotal"
            width="100%"
-            :height="450"
+            :height="140"
          />
        </div>
      </div>
    </div>
-    <div class="flex mt-8">
-      <div class="box-3 mr-8">
+    <div class="flex mt-8" >
+      <div class="box-3 mr-8" >
        <div class="look-box">
          <Title1 title="交通信息" />
          <div @click="hanldeLookMap" class="look-btn">查看详情</div>
@@ -167,8 +167,8 @@
          <div class="border mr-8">
            <Title3 title="拥堵次数占比" />
            <jam
-              :width="220"
-              :height="700"
+              width="100%"
+              :height="200"
              sub-title="拥堵频次总数"
              :list="scenicStore.trafficData.data.countRate"
 			  :text="'暂无拥堵'"
@@ -178,8 +178,8 @@
            <Title3 title="拥堵时长占比" />
            <jam
 			 :text="'暂无拥堵'"
-              :width="220"
-              :height="720"
+              width="100%"
+              :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"
-              :height="800"
+              width="100%"
+              :height="200"
            />
          </div>
          <div class="border flex-1">
            <Title3 title="购票来源" />
            <TicketSource
              :list="scenicStore.userPortraitData.data.channel"
-              :width="240"
-              :height="800"
+              width="100%"
+              :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);
-      // height: vh(475);
+      // width: vw(650);
+      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 {
--- a/src/views/traffic/components/box-1.vue
+++ b/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;