From 88eb805c468f91a5f756228fe16b75a2368ddc6b Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Fri, 27 Dec 2024 14:50:53 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AF=B9=E6=8E=A5=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home.js                     |  9 ++++
 src/components/Header/index.vue     | 15 ++++--
 src/views/home/components/age.vue   |  6 +--
 src/views/home/components/box-3.vue | 83 +++++++++++++++++++++--------
 4 files changed, 84 insertions(+), 29 deletions(-)
 create mode 100644 src/api/home.js

diff --git a/src/api/home.js b/src/api/home.js
new file mode 100644
index 0000000..f42dcfb
--- /dev/null
+++ b/src/api/home.js
@@ -0,0 +1,9 @@
+import request from './request'
+
+// 彩云天气
+export function getWeatherApi() {
+  return request({
+    url: '/api/largeScreen/source/weather',
+    method: 'get'
+  })
+}
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
index c937472..8bff1d1 100644
--- a/src/components/Header/index.vue
+++ b/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()
diff --git a/src/views/home/components/age.vue b/src/views/home/components/age.vue
index 12c9ca6..308a7ce 100644
--- a/src/views/home/components/age.vue
+++ b/src/views/home/components/age.vue
@@ -14,9 +14,9 @@
     () => homeData.value?.userPortrait?.ageRate,
     () => {
       setOption({
-        tooltip: {
-          trigger: 'item'
-        },
+        // tooltip: {
+        //   trigger: 'item'
+        // },
         legend: {
           orient: 'vertical',
           left: '60%',
diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue
index 6e2d2cd..1a0afd7 100644
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -198,10 +198,16 @@
               <div>调度</div>
               <div>空余</div>
             </div>
-            <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 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>
@@ -218,14 +224,16 @@
                 <div>调度</div>
                 <div>空余</div>
               </div>
-              <div
-                class="cell"
-                v-for="(item, index) in homeData?.carShipData.ship.info"
-                :key="index"
-              >
-                <div>白帝城</div>
-                <div>{{ item.started_count }}<span class="unit-1">辆</span></div>
-                <div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
+              <div class="content">
+                <div
+                  class="cell"
+                  v-for="(item, index) in homeData?.carShipData.ship.info"
+                  :key="index"
+                >
+                  <div>白帝城</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>
@@ -244,18 +252,19 @@
           <div class="item">
             <div class="label">总入住</div>
             <countup
-              class="value"
-              color="#02F9FA"
+              class="value success"
               :end-val="homeData?.hotelData.info.total_guest_count || 0"
             />
           </div>
           <div class="item">
             <div class="label">总入住率</div>
-            <countup
-              class="value"
-              color="#02F9FA"
-              :end-val="homeData?.hotelData.info.occupancy_rate || 0"
-            />
+            <div class="flex align-center">
+              <countup
+                class="value success"
+                :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 {