feat：对接首页数据

src/api/home.js

@@ -0,0 +1,9 @@
+import request from './request'
+
+// 彩云天气
+export function getWeatherApi() {
+  return request({
+    url: '/api/largeScreen/source/weather',
+    method: 'get'
+  })
+}

src/components/Header/index.vue

@@ -27,11 +27,11 @@
       </li>
     </ul>
     <div class="weather">
-      <span>25˚C-晴</span>
+      <span>{{ weatherData?.temperature }}-{{ weatherData?.skycon }}</span>
       <span class="line">|</span>
-      <span>风速：A2-4级</span>
+      <span>风速：{{ weatherData?.windSpeed }}</span>
       <span class="line">|</span>
-      <span>空气质量：A2-优</span>
+      <span>空气质量：{{ weatherData?.airQuality }}</span>
       <span class="ml-20">{{ currentDate }}</span>
     </div>
     <div v-if="isBack" class="back" @click="handleBack">
@@ -45,6 +45,8 @@
   import title2 from '@/assets/images/title-2.png'
   import title2Select from '@/assets/images/title-2-select.png'
 
+  import { getWeatherApi } from '@/api/home'
+
   let props = defineProps({
     title: {
       type: String,
@@ -74,6 +76,7 @@
   const emit = defineEmits(['change'])
   const router = useRouter()
   let currentDate = ref('')
+  let weatherData = ref({})
 
   const name = computed(() => {
     if (!props.isSkip && props.navLeft.length > 0) {
@@ -108,7 +111,13 @@
       emit('on-change', index)
     }
   }
+  const getWeather = async () => {
+    let res = await getWeatherApi()
+    weatherData.value = res.data
+    console.log(res, '====')
+  }
   onMounted(() => {
+    getWeather()
     getCurrentDate()
     setInterval(() => {
       getCurrentDate()

src/views/home/components/age.vue

@@ -14,9 +14,9 @@
     () => homeData.value?.userPortrait?.ageRate,
     () => {
       setOption({
-        tooltip: {
+        // tooltip: {
-          trigger: 'item'
+        //   trigger: 'item'
-        },
+        // },
         legend: {
           orient: 'vertical',
           left: '60%',

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

@@ -198,13 +198,19 @@
               <div>调度</div>
               <div>空余</div>
             </div>
-            <div class="cell" v-for="(item, index) in homeData?.carShipData?.car.info" :key="index">
+            <div class="content">
+              <div
+                class="cell"
+                v-for="(item, index) in homeData?.carShipData?.car.info"
+                :key="index"
+              >
                 <div>{{ item.scenic_area }}</div>
                 <div>{{ item.started_count }}<span class="unit-1">辆</span></div>
                 <div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
               </div>
             </div>
           </div>
+        </div>
         <div>
           <div class="ship">
             <div class="label">车总数</div>
@@ -218,6 +224,7 @@
                 <div>调度</div>
                 <div>空余</div>
               </div>
+              <div class="content">
                 <div
                   class="cell"
                   v-for="(item, index) in homeData?.carShipData.ship.info"
@@ -231,6 +238,7 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="hotel">
         <div>
           <div class="item">
@@ -244,18 +252,19 @@
           <div class="item">
             <div class="label">总入住</div>
             <countup
-              class="value"
+              class="value success"
-              color="#02F9FA"
               :end-val="homeData?.hotelData.info.total_guest_count || 0"
             />
           </div>
           <div class="item">
             <div class="label">总入住率</div>
+            <div class="flex align-center">
               <countup
-              class="value"
+                class="value success"
-              color="#02F9FA"
                 :end-val="homeData?.hotelData.info.occupancy_rate || 0"
               />
+              <span class="suffix">%</span>
+            </div>
           </div>
         </div>
         <div>
@@ -387,7 +396,7 @@
       & > div {
         position: relative;
         flex: 1;
-        height: vh(110);
+        height: vh(113);
         display: flex;
         align-items: center;
         background-image: url('@/assets/images/bg-4.png');
@@ -434,6 +443,7 @@
           width: vw(200);
           height: vh(100);
           z-index: 2;
+          background: rgba(0, 150, 255, 0.17);
           .header {
             display: flex;
             height: vh(18);
@@ -447,6 +457,23 @@
               color: #52b8ff;
             }
           }
+          .content {
+            overflow-y: auto;
+            height: vh(82);
+            /* 滚动条整体样式 */
+            &::-webkit-scrollbar {
+              width: vw(4); /* 滚动条的宽度 */
+            }
+            /* 滚动条轨道 */
+            &::-webkit-scrollbar-track {
+              background: 'transparent'; /* 轨道的背景色 */
+            }
+            /* 滚动条滑块 */
+            &::-webkit-scrollbar-thumb {
+              background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+              border-radius: 5px; /* 滑块的圆角 */
+            }
+          }
           .cell {
             display: flex;
             height: vh(27);
@@ -507,13 +534,23 @@
             font-size: vw(24);
             color: #ffffff;
           }
+          .success {
+            color: #02f9fa;
+          }
+          .suffix {
+            margin-top: vh(10);
+            font-weight: bold;
+            font-size: vw(24);
+            color: #02f9fa;
+            color: #02f9fa;
+          }
         }
       }
       & > div:nth-child(2) {
         padding-top: vh(10);
-        margin-top: vh(8);
+        margin-top: vh(6);
         width: vw(360);
-        height: vh(140);
+        height: vh(156);
         background-image: url('@/assets/images/bg-4.png');
         background-size: 100% 100%;
       }
@@ -521,7 +558,7 @@
   }
   .occupancy {
     :deep(.title-3) {
-      margin-top: vh(10);
+      margin-top: vh(6);
     }
   }
   .title1 {