From 5e5ce522dbbac4784dd31bcb50dd3ec30f029be8 Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Mon, 16 Dec 2024 18:28:02 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E5=96=84=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/components/box-3.vue         | 130 --------------
 src/views/home/components/box-4.vue         | 140 +++++++++++++--
 src/views/home/components/lodging-ratio.vue | 188 ++++++++++++++++++++
 src/views/home/index.vue                    |   6 +-
 4 files changed, 317 insertions(+), 147 deletions(-)
 create mode 100644 src/views/home/components/lodging-ratio.vue

diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue
index c18403c..d6f97e3 100644
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -1,5 +1,4 @@
 <template>
-<<<<<<< HEAD
   <div class="box-3">
     <div class="header">
       <div class="flex">
@@ -244,132 +243,3 @@
     }
   }
 </style>
-=======
-	<!-- 内容 -->
-	<div class="box-3-content">
-		<!-- header -->
-		<div class="header">
-			<div class="li-1">
-				今年总游客数
-				<div class="li-num">
-					<span>6</span>
-					<span>6</span>
-					<span>6</span>
-					<span>6</span>
-					<span>6</span>
-					<span>6</span>
-				</div>
-			</div>
-			<div class="li-1">
-				全县区总游客人数
-				<div class="li-num">
-					<span>6</span>
-					<span>6</span>
-					<span>6</span>
-					<span>6</span>
-					<span>6</span>
-					<span>6</span>
-				</div>
-			</div>
-			<div class="li-1">
-				全在园人数
-				<div class="li-num">
-					<span>6</span>
-					<span>6</span>
-					<span>6</span>
-					<span>6</span>
-					<span>6</span>
-					<span>6</span>
-				</div>
-			</div>
-			<div class="li-1 li-2">
-				景区安全度 <span class="color1">安全</span>
-			</div>
-			<div class="li-1 li-2">
-				景区游玩舒适度 <span class="color1">舒适</span>
-			</div>
-			<div class="li-1 li-2">
-				景区接待情况 <span class="color2">排队</span>
-			</div>
-			<div class="li-1 li-2">
-				交通拥挤度 <span class="color1">舒适</span>
-			</div>
-			<div class="li-1 li-2">
-				停车场负荷度 <span class="color1">超负荷</span>
-			</div>
-		</div>
-		<!-- section -->
-		<div class="section">
-			
-		</div>
-		<!-- footer -->
-		<div class="footer">
-			
-		</div>
-	</div>
-</template>
-
-<script setup>
-	
-</script>
-<style lang="scss" scoped>
-	.box-3-content{
-		// margin-top:200px;
-		.header{
-			margin:0 auto;
-			width:vw(1618);
-			height:vh(128);
-			background-image: url('/src/assets/images/header-top-bg.png');
-			background-size: contain;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			.li-2{
-				text-align: center;
-				span{
-					display: block;
-					font-size:vw(28);
-					font-weight: bold;
-					margin-top:vw(10);
-					text-align: center;
-				}
-				.color1{
-					color:#02F9FA;
-				}
-				.color2{
-					color:#FF4400;
-				}
-				.color3{
-					color:#E21B1B;
-				}
-			}
-			.li-1{
-				font-weight: 400;
-				font-size: vw(16);
-				color: rgba(255,255,255,0.9);
-				text-align: left;
-				font-style: normal;
-				text-transform: none;
-				margin-right:vw(10);
-				.li-num{
-					margin-top:vh(10);
-					span{
-						display: inline-block;
-						margin:vw(2);
-						width: vw(40);
-						height: vh(40);
-						line-height: vh(40);
-						text-align: center;
-						font-weight: bold;
-						font-size:vw(28);
-						background: linear-gradient( 180deg, #00B7FF 0%, #0033FF 100%);
-						border-radius: vw(4);
-						border: 1px solid;
-						border-image: linear-gradient(180deg, rgba(55, 216, 252, 0), rgba(131, 226, 255, 1)) 1 1;
-					}
-				}
-			}
-		}
-	}
-</style>
->>>>>>> 897d91a9c6208a60428d9db9f9bd4745e1233705
diff --git a/src/views/home/components/box-4.vue b/src/views/home/components/box-4.vue
index e530809..78f333f 100644
--- a/src/views/home/components/box-4.vue
+++ b/src/views/home/components/box-4.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="box-4">
-    <!-- <Title1 title="交通信息" />
+    <Title1 title="交通信息" />
     <div class="flex justify-evenly pt-10">
       <div v-for="item in list" class="cell">
         <img class="icon" :src="item.icon" alt="" width="64" height="64" />
@@ -97,7 +97,7 @@
       <div class="flex-1">
         <Title1 title="酒店信息" class="title1" />
       </div>
-    </div> -->
+    </div>
     <div class="flex">
       <div class="car-ship">
         <div class="mb-6">
@@ -114,9 +114,19 @@
               <div>空余</div>
             </div>
             <div class="cell">
-              <div class="label">车牌号</div>
-              <div>车长</div>
-              <div>车速</div>
+              <div>白帝城</div>
+              <div>5<span class="unit-1">辆</span></div>
+              <div>1<span class="unit-1">辆</span></div>
+            </div>
+            <div class="cell">
+              <div>白帝城</div>
+              <div>5<span class="unit-1">辆</span></div>
+              <div>1<span class="unit-1">辆</span></div>
+            </div>
+            <div class="cell">
+              <div>白帝城</div>
+              <div>5<span class="unit-1">辆</span></div>
+              <div>1<span class="unit-1">辆</span></div>
             </div>
           </div>
         </div>
@@ -126,12 +136,56 @@
             <div class="flex align-center">
               <countup class="value" :end-val="130" /> <span class="unit">辆</span>
             </div>
+            <div class="table">
+              <div class="header">
+                <div>景区</div>
+                <div>调度</div>
+                <div>空余</div>
+              </div>
+              <div class="cell">
+                <div>白帝城</div>
+                <div>5<span class="unit-1">辆</span></div>
+                <div>1<span class="unit-1">辆</span></div>
+              </div>
+              <div class="cell">
+                <div>白帝城</div>
+                <div>5<span class="unit-1">辆</span></div>
+                <div>1<span class="unit-1">辆</span></div>
+              </div>
+              <div class="cell">
+                <div>白帝城</div>
+                <div>5<span class="unit-1">辆</span></div>
+                <div>1<span class="unit-1">辆</span></div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
       <div class="hotel">
-        <div> 3 </div>
-        <div> 4 </div>
+        <div>
+          <div class="item">
+            <div class="label">车库总数</div>
+            <countup class="value" :end-val="500" />
+          </div>
+          <div class="item">
+            <div class="label">房间总数</div>
+            <countup class="value" :end-val="500" />
+          </div>
+          <div class="item">
+            <div class="label">总入住</div>
+            <countup class="value" :end-val="500" />
+          </div>
+          <div class="item">
+            <div class="label">总入住率</div>
+            <countup class="value" :end-val="500" />
+          </div>
+        </div>
+        <div>
+          <div class="pt-6">
+            <Title3 title="酒店入住人数及入住率" />
+          </div>
+          <lodging-ratio />
+        </div>
       </div>
     </div>
   </div>
@@ -139,8 +193,10 @@
 
 <script setup>
   import jam from './jam.vue'
-  import TrafficFlow from './traffic-flow.vue'
   import vacancy from './vacancy.vue'
+  import TrafficFlow from './traffic-flow.vue'
+  import LodgingRatio from './lodging-ratio.vue'
+
   import countup from 'vue-countup-v3'
   import icon1 from '@/assets/images/icon-1.png'
   import icon2 from '@/assets/images/icon-2.png'
@@ -227,10 +283,10 @@
       }
       & > div {
         flex: 1;
+        height: vh(70);
         display: flex;
         align-items: center;
         justify-content: space-evenly;
-        height: vh(70);
         background-image: url('@/assets/images/bg-4.png');
         background-size: 100% 100%;
         .label {
@@ -263,10 +319,12 @@
         background-image: url('@/assets/images/bg-4.png');
         background-size: 100% 100%;
         .icon {
+          padding-left: vw(90);
           width: vw(352);
           height: vh(70);
-          padding-top: vh(10);
-          padding-left: vw(90);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
           background-size: 100% 100%;
           box-sizing: border-box;
         }
@@ -298,7 +356,7 @@
         .table {
           position: absolute;
           left: vw(160);
-          width: vw(200);
+          width: vw(220);
           height: vh(100);
           z-index: 2;
           .header {
@@ -316,19 +374,73 @@
           }
           .cell {
             display: flex;
-            height: vh(30);
-            line-height: vh(30);
+            height: vh(27);
+            line-height: vh(27);
             text-align: center;
             background: #074686;
+            &:nth-child(2n + 1) {
+              background: rgba(0, 150, 255, 0.1);
+            }
             & > div {
               flex: 1;
             }
+            & > div:nth-child(1) {
+              font-weight: 400;
+              font-size: vw(14);
+              color: rgba(255, 255, 255, 0.9);
+            }
+            & > div:nth-child(2) {
+              font-weight: bold;
+              font-size: vw(18);
+              color: #ffffff;
+            }
+            & > div:nth-child(3) {
+              font-weight: bold;
+              font-size: vw(18);
+              color: #02f9fa;
+            }
+            .unit-1 {
+              font-size: vw(12);
+            }
           }
         }
       }
     }
     .hotel {
       flex: 1;
+      margin-left: vw(6);
+      & > div:nth-child(1) {
+        display: flex;
+        width: vw(360);
+        height: vh(70);
+        background-image: url('@/assets/images/bg-4.png');
+        background-size: 100% 100%;
+        .item {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          .label {
+            font-weight: 400;
+            font-size: vw(14);
+            color: rgba(255, 255, 255, 0.9);
+          }
+          .value {
+            margin-top: vh(10);
+            font-weight: bold;
+            font-size: vw(24);
+            color: #ffffff;
+          }
+        }
+      }
+      & > div:nth-child(2) {
+        margin-top: vh(10);
+        width: vw(360);
+        height: vh(140);
+        background-image: url('@/assets/images/bg-4.png');
+        background-size: 100% 100%;
+      }
     }
   }
 </style>
diff --git a/src/views/home/components/lodging-ratio.vue b/src/views/home/components/lodging-ratio.vue
new file mode 100644
index 0000000..9341e56
--- /dev/null
+++ b/src/views/home/components/lodging-ratio.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="lodging-ratio" id="lodging-ratio" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import * as echarts from 'echarts'
+
+  let topChart = null
+  let result = [
+    { name: '酒店1', value: 86 },
+    { name: '酒店2', value: 83 },
+    { name: '酒店3', value: 73 }
+  ]
+  let option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      show: false
+    },
+    legend: {
+      show: false
+    },
+    grid: {
+      left: '4%',
+      right: '4%',
+      top: '16%',
+      bottom: '-10%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        splitLine: {
+          show: false
+        },
+        type: 'value',
+        show: false
+      }
+    ],
+    yAxis: [
+      {
+        splitLine: {
+          show: false
+        },
+        axisLine: {
+          show: false
+        },
+        type: 'category',
+        axisTick: {
+          show: false
+        },
+        data: result.map((item) => item.name),
+        axisLabel: {
+          show: false
+        }
+      },
+      {
+        type: 'category',
+        inverse: true,
+        axisTick: 'none',
+        axisLine: 'none',
+        show: true,
+        axisLabel: {
+          textStyle: {
+            color: '#fff',
+            fontSize: fitChartSize(12)
+          },
+          verticalAlign: 'bottom',
+          padding: [0, 0, 6, 0],
+          inside: true,
+          formatter: function (value) {
+            return `{value|${value}}`
+          },
+          rich: {
+            name: {
+              align: 'center',
+              color: '#D3E5FF',
+              fontSize: fitChartSize(14),
+              fontFamily: 'Source Han Sans CN'
+            },
+            value: {
+              align: 'center',
+              color: '#fff',
+              fontSize: fitChartSize(14),
+              fontFamily: 'Source Han Sans CN'
+            }
+          }
+        },
+        data: result.map((item) => item.value)
+      }
+    ],
+    series: [
+      {
+        name: '',
+        type: 'bar',
+        barWidth: fitChartSize(4),
+        MaxSize: 0,
+        showBackground: true,
+        barBorderRadius: [30, 0, 0, 30],
+        backgroundStyle: {
+          color: 'rgba(0, 150, 255, 0.15)'
+        },
+        label: {
+          show: true,
+          offset: [10, -13],
+          color: '#D3E5FF',
+          fontWeight: 500,
+          position: 'left',
+          align: 'left',
+          fontSize: fitChartSize(14),
+          fontFamily: 'Source Han Sans CN',
+          formatter: function (params) {
+            return params.data.name
+          }
+        },
+        data: result.map((item, index) => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              barBorderRadius: [3, 0, 0, 3],
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(255, 112, 33, 0)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(255, 112, 33, 1)'
+                  }
+                ]
+              }
+            }
+          }
+        })
+      },
+      {
+        name: '外圆',
+        type: 'scatter',
+        emphasis: {
+          scale: false
+        },
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: fitChartSize(10),
+        z: 2,
+        data: result.map((item, index) => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              color: '#fff',
+              opacity: 1
+            }
+          }
+        }),
+        animationDelay: 500
+      }
+    ]
+  }
+  const init = () => {
+    topChart = echarts.init(document.getElementById('lodging-ratio'))
+    topChart.setOption(option)
+  }
+  const resize = () => {
+    if (topChart) {
+      topChart.dispose()
+      topChart = null
+      init()
+    }
+  }
+  onMounted(() => {
+    init()
+    window.addEventListener('resize', resize)
+  })
+</script>
+
+<style scoped lang="scss">
+  .lodging-ratio {
+    width: 100%;
+    height: vh(110);
+  }
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 3cd269e..9abe4da 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,6 +1,6 @@
 <template>
   <main class="wrapper">
-    <!-- <box1 /> -->
+    <box1 />
     <div class="header">
       <ul class="nav-left">
         <li class="nav-left-item">安全</li>
@@ -15,8 +15,8 @@
         <li class="nav-right-item">酒店</li>
       </ul>
     </div>
-    <!-- <box2 />
-    <box3 /> -->
+    <box2 />
+    <box3 />
     <box4 />
   </main>
 </template>