From ab1ab210a9e60538e04a7637308bd3a1f3731f76 Mon Sep 17 00:00:00 2001
From: zjc <1034206993@qq.com>
Date: Thu, 2 Jan 2025 18:32:49 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=AE=8C=E5=96=84=E6=95=B4?=
 =?UTF-8?q?=E4=BD=93=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/legend-item-1.png          | Bin 0 -> 8963 bytes
 src/assets/images/legend-item-2.png          | Bin 0 -> 9366 bytes
 src/assets/images/more-col.png               | Bin 0 -> 3775 bytes
 src/components/CoreVideo/index.vue           |   4 +-
 src/components/Correspondence/index.vue      |   2 +-
 src/components/Header/index.vue              |  10 +-
 src/components/Map/index.vue                 |  26 +--
 src/hooks/socket.js                          |  13 +-
 src/styles/common.scss                       |   4 +-
 src/views/home/components/age.vue            |  75 +++++--
 src/views/home/components/box-1.vue          |  52 ++---
 src/views/home/components/box-2.vue          |  37 ++--
 src/views/home/components/box-3.vue          |  23 ++-
 src/views/home/components/gauge.vue          | 199 +++++++++++--------
 src/views/home/index.vue                     |  33 ++-
 src/views/scenic/components/age-ratio.vue    | 134 ++++++++++++-
 src/views/scenic/components/box-1.vue        | 104 ++++++----
 src/views/scenic/components/box-2.vue        | 160 +++++++++++----
 src/views/scenic/components/jam.vue          | 144 ++++++++++++++
 src/views/scenic/components/ticket.vue       |   2 +-
 src/views/scenic/components/top.vue          |   2 +-
 src/views/scenic/components/traffic-flow.vue |   2 +-
 src/views/sentiment/index.vue                |  23 ++-
 23 files changed, 744 insertions(+), 305 deletions(-)
 create mode 100644 src/assets/images/legend-item-1.png
 create mode 100644 src/assets/images/legend-item-2.png
 create mode 100644 src/assets/images/more-col.png
 create mode 100644 src/views/scenic/components/jam.vue

diff --git a/src/assets/images/legend-item-1.png b/src/assets/images/legend-item-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b3886f8f0b6a6b35d61bdc22f2513dc5495dedd
GIT binary patch
literal 8963
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/legend-item-2.png b/src/assets/images/legend-item-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..bde6a94f9aab4b99b1c88d3407cb62169a6cd98f
GIT binary patch
literal 9366
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
ZQvu&FKKk~7>_4LsjGUB`WHrb*_<ze1Nkaet

literal 0
HcmV?d00001

diff --git a/src/assets/images/more-col.png b/src/assets/images/more-col.png
new file mode 100644
index 0000000000000000000000000000000000000000..b42a93afdcb3e28d7901235082f59c5c3ed0fd08
GIT binary patch
literal 3775
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
ajE57cCqhGN&l(>#QedEGqD#RO!~O?Ro8X-Q

literal 0
HcmV?d00001

diff --git a/src/components/CoreVideo/index.vue b/src/components/CoreVideo/index.vue
index 701e0de..99de71b 100644
--- a/src/components/CoreVideo/index.vue
+++ b/src/components/CoreVideo/index.vue
@@ -64,7 +64,7 @@
     background-color: transparent !important;
   }
   .core-video {
-    margin: vh(10);
+    margin: vw(8);
     width: vw(300);
     border-radius: vw(2);
     background-image: url('@/assets/images/bg-1.png');
@@ -135,7 +135,7 @@
       }
       &-img {
         width: 100%;
-        height: vh(164);
+        height: vw(164);
         display: block;
         object-fit: cover;
       }
diff --git a/src/components/Correspondence/index.vue b/src/components/Correspondence/index.vue
index d98e79c..bdd0353 100644
--- a/src/components/Correspondence/index.vue
+++ b/src/components/Correspondence/index.vue
@@ -49,7 +49,7 @@
 <style lang="scss" scoped>
   .box-4-content {
     position: relative;
-    margin: vh(10);
+    margin: vw(8);
     width: vw(300);
     height: vh(1060);
     background-image: url('@/assets/images/bg-1.png');
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
index 434f5b4..af87fdc 100644
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -98,12 +98,6 @@
       minute
     )}:${fillZero(second)}`
   }
-  const handleCommand = (e) => {
-    console.log(e, '=========')
-    title.value = e.name
-    otherScenic.value = e.name
-    current.value = ''
-  }
   // 返回上一页
   const handleBack = () => {
     router.go(-1)
@@ -128,8 +122,9 @@
   const setNav = async () => {
     switch (router.currentRoute.value.path) {
       case '/home':
-        isSkip.value = true
         title.value = '奉节县旅游指挥调度中心'
+        isSkip.value = true
+        isBack.value = false
         navLeft.value = [
           { name: '安全', path: '/monitor' },
           { name: '景区', path: '/scenic' },
@@ -286,6 +281,7 @@
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
+        text-shadow: 0 4px 7px rgba(0, 150, 255, 0.75);
         background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
       }
     }
diff --git a/src/components/Map/index.vue b/src/components/Map/index.vue
index cece93b..ef4f9d8 100644
--- a/src/components/Map/index.vue
+++ b/src/components/Map/index.vue
@@ -3,19 +3,7 @@
 </template>
 
 <script setup>
-  import axios from 'axios'
-  const fetchData = async () => {
-    try {
-      const res = await axios.get(
-        'https://jiaotong.baidu.com/openapi/v2/event/alarmlist?nodeId=7162&roadType=1,2,3,4,5&eventSource=1,2,3&ak=hPEEq9eAtL3t1SXL8hqNYQkGmWT1oOWh&returnType=1'
-      )
-      console.log(res, '数据')
-    } catch (error) {
-      console.error(error)
-    }
-  }
   onMounted(() => {
-    // fetchData()
     var map = new BMapGL.Map('container')
     map.centerAndZoom(new BMapGL.Point(109.643452, 31.028006), 15)
     map.enableScrollWheelZoom(true)
@@ -32,11 +20,6 @@
       {
         strokeStyle: 'solid',
         strokeColor: 'red ',
-        // strokeTexture: {
-        //   url: 'https://mapopen-pub-jsapigl.bj.bcebos.com/svgmodel/Icon_road_blue_arrow.png',
-        //   width: 16,
-        //   height: 64
-        // },
         strokeWeight: 4,
         strokeOpacity: 0.8
       }
@@ -52,16 +35,9 @@
   :deep(.anchorBL) {
     display: none;
   }
-  // ::v-deep {
-  //   .BMap_cpyCtrl {
-  //     display: none;
-  //   }
-  //   .anchorBL {
-  //     display: none;
-  //   }
-  // }
   .map {
     width: 100%;
     height: vh(700);
+    background-color: transparent;
   }
 </style>
diff --git a/src/hooks/socket.js b/src/hooks/socket.js
index 655033b..2cb5fda 100644
--- a/src/hooks/socket.js
+++ b/src/hooks/socket.js
@@ -1,9 +1,9 @@
 import { ref } from 'vue'
 
 export function useWebSocket(url) {
-  let socket = ref(null)
-  let data = ref(null)
-  let isConnected = ref(false)
+  let socket = ref(null) // socket对象
+  let data = ref(null) // 存储接收到的数据
+  let isConnected = ref(false) // 是否连接成功
 
   const connectWebSocket = () => {
     socket.value = new WebSocket(url, 'echo-protocol', {
@@ -15,13 +15,6 @@ export function useWebSocket(url) {
     socket.value.onopen = () => {
       isConnected.value = true
       console.log('WebSocket connected')
-      sendMessage(
-        JSON.stringify({
-          action: 'start',
-          type: 'index',
-          scenitspot: 'index'
-        })
-      )
     }
     socket.value.onerror = (error) => {
       console.error('WebSocket error:', error)
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 8d1d75e..2c15c8f 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -38,10 +38,10 @@
   margin-top: vw(8) !important;
 }
 .pt-10 {
-  padding-top: vh(10) !important;
+  padding-top: vw(10) !important;
 }
 .pb-10 {
-  padding-bottom: vh(10) !important;
+  padding-bottom: vw(10) !important;
 }
 .mb-10 {
   margin-bottom: vh(10) !important;
diff --git a/src/views/home/components/age.vue b/src/views/home/components/age.vue
index 308a7ce..5a541e0 100644
--- a/src/views/home/components/age.vue
+++ b/src/views/home/components/age.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="age-ratio" :id="id" />
+  <div class="age" :id="id" />
 </template>
 
 <script setup>
@@ -10,22 +10,27 @@
 
   const homeData = inject('homeData')
 
+  let params = null
+
   watch(
     () => homeData.value?.userPortrait?.ageRate,
     () => {
-      setOption({
-        // tooltip: {
-        //   trigger: 'item'
-        // },
+      init()
+    }
+  )
+  const init = () => {
+    if (!params) {
+      params = {
         legend: {
           orient: 'vertical',
-          left: '60%',
+          left: '54%',
           y: 'center',
           itemHeight: fitChartSize(8),
           itemWidth: fitChartSize(8),
           itemGap: fitChartSize(10),
           formatter: function (name) {
-            return '{name|' + name + '}'
+            let obj = homeData.value?.userPortrait?.ageRate.find((item) => item.name == name)
+            return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
           },
           textStyle: {
             rich: {
@@ -43,8 +48,9 @@
         series: [
           {
             type: 'pie',
+            silent: true,
             center: ['30%', '50%'],
-            radius: ['50%', '70%'],
+            radius: ['60%', '70%'],
             itemStyle: {
               borderColor: 'transparent',
               borderRadius: fitChartSize(2),
@@ -56,16 +62,61 @@
               fontSize: fitChartSize(12)
             },
             data: homeData.value?.userPortrait?.ageRate || []
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: ['30%', '50%'],
+            radius: ['54%', '58%'],
+            itemStyle: {
+              borderColor: 'transparent',
+              borderRadius: fitChartSize(2),
+              borderWidth: fitChartSize(2)
+            },
+            label: {
+              show: false,
+              color: '#D3F0FE',
+              fontSize: fitChartSize(12)
+            },
+            data: homeData.value?.userPortrait?.ageRate || []
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: ['30%', '50%'],
+            radius: ['0', '40%'],
+            itemStyle: {
+              color: '#065EAD'
+            },
+            label: {
+              show: false
+            },
+            data: [100]
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: ['30%', '50%'],
+            radius: ['0', '26%'],
+            itemStyle: {
+              color: '#0477D1'
+            },
+            label: {
+              show: false
+            },
+            data: [100]
           }
         ]
-      })
+      }
+    } else {
     }
-  )
+    setOption(params)
+  }
 </script>
 
 <style lang="scss" scoped>
-  .age-ratio {
-    width: vw(253);
+  .age {
+    width: vw(290);
     height: vh(120);
   }
 </style>
diff --git a/src/views/home/components/box-1.vue b/src/views/home/components/box-1.vue
index d6a8b6d..0c78173 100644
--- a/src/views/home/components/box-1.vue
+++ b/src/views/home/components/box-1.vue
@@ -6,9 +6,10 @@
       </template>
     </Title1>
     <div class="flex pt-20">
-      <!--   :class="{ core: index == 0, queue: index == 1, congestion: index == 2 }" -->
       <div class="item" v-for="(item, index) in homeData?.scenicSpot" :key="index">
-        <img class="item-icon" src="@/assets/images/core.png" alt="" />
+        <img v-if="index == 0" class="item-icon" src="@/assets/images/core.png" />
+        <img v-if="index == 1" class="item-icon" src="@/assets/images/queue.png" />
+        <img v-if="index == 2" class="item-icon" src="@/assets/images/congestion.png" />
         <span class="item-label">{{ item.name }}</span>
         <div class="item-value flex align-end rela">
           <countup :end-val="item.value" /><span class="unit">个</span>
@@ -89,19 +90,19 @@
         <Title2 title="景区承载量" />
         <div class="statistic">
           <div class="statistic-item">
-            <gauge id="gauge1" />
+            <gauge :value="80" />
             <span class="statistic-title">三峡之巅</span>
           </div>
           <div class="statistic-item">
-            <gauge id="gauge2" />
+            <gauge :value="50" />
             <span class="statistic-title">三峡之巅</span>
           </div>
           <div class="statistic-item">
-            <gauge id="gauge3" />
+            <gauge :value="50" />
             <span class="statistic-title">三峡之巅</span>
           </div>
           <div class="statistic-item">
-            <gauge id="gauge4" />
+            <gauge :value="50" />
             <span class="statistic-title">三峡之巅</span>
           </div>
         </div>
@@ -152,7 +153,7 @@
 
     <Title1 title="游客画像" />
     <div class="flex">
-      <div class="box-1">
+      <div class="age-box">
         <Title3 title="年龄/性别占比" />
         <age />
         <div class="count">总人数：<countup :end-val="ageRateTotal" /></div>
@@ -161,7 +162,8 @@
           v-for="(item, index) in homeData?.userPortrait.genderRate"
           :key="index"
         >
-          <img class="icon" src="@/assets/images/man.png" />
+          <img v-if="item.name == '男'" class="icon" src="@/assets/images/man.png" />
+          <img v-if="item.name == '女'" class="icon" src="@/assets/images/woman.png" />
           <div class="bg">
             <span class="text">{{ item.name }}性</span>
             <div class="progress">
@@ -183,7 +185,7 @@
       </div>
       <div class="box-1">
         <Title3 title="购票来源" />
-        <div class="count">总人数：<countup :end-val="channelTotal" /></div>
+        <div class="count">游客总数：<countup :end-val="channelTotal" /></div>
         <ticket />
       </div>
     </div>
@@ -253,7 +255,7 @@
       }
       &-label {
         position: absolute;
-        left: vw(80);
+        left: vw(70);
         top: vh(-10);
         font-weight: 400;
         font-size: vw(14);
@@ -261,7 +263,7 @@
       }
       &-value {
         position: absolute;
-        left: vw(80);
+        left: vw(70);
         .countup-wrap {
           color: #02f9fa;
           font-size: vw(28);
@@ -274,15 +276,6 @@
       font-size: vw(14);
       margin-bottom: vh(4);
     }
-    .core {
-      background-image: url('@/assets/images/core.png');
-    }
-    .queue {
-      background-image: url('@/assets/images/queue.png');
-    }
-    .congestion {
-      background-image: url('@/assets/images/congestion.png');
-    }
     .box {
       width: vw(384);
       height: vh(320);
@@ -327,16 +320,22 @@
         }
       }
     }
-    .box-1 {
-      width: vw(253);
+    .age-box {
+      width: vw(290);
       height: vh(290);
       background-image: url('@/assets/images/bg-3.png');
       background-size: 100% 100%;
       &:nth-child(1) {
-        margin-right: vw(10);
+        margin-right: vw(8);
       }
+    }
+    .box-1 {
+      width: vw(240);
+      height: vh(290);
+      background-image: url('@/assets/images/bg-3.png');
+      background-size: 100% 100%;
       &:nth-child(2) {
-        margin-right: vw(10);
+        margin-right: vw(8);
       }
     }
     .count {
@@ -375,8 +374,11 @@
         color: rgba(255, 255, 255, 0.9);
       }
       .progress {
-        width: vw(120);
+        width: vw(170);
         margin-left: vw(4);
+        :deep(.el-progress-bar__outer) {
+          background-color: #0858ae !important;
+        }
       }
       .man {
         font-weight: bold;
diff --git a/src/views/home/components/box-2.vue b/src/views/home/components/box-2.vue
index 4c0e2f8..99553e3 100644
--- a/src/views/home/components/box-2.vue
+++ b/src/views/home/components/box-2.vue
@@ -94,21 +94,21 @@
       </div>
       <div class="right">
         <div class="item">
-          <span class="tag tag--success">普通</span>
+          <span class="item-tag--warning">重要</span>
           <p class="content">
             工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
             工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
           </p>
         </div>
         <div class="item">
-          <span class="tag tag--error">普通</span>
+          <span class="item-tag--error">紧急</span>
           <p class="content">
             工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
             工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
           </p>
         </div>
         <div class="item">
-          <span class="tag tag--primary">普通</span>
+          <span class="item-tag--primary">普通</span>
           <p class="content">
             工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
             工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工单信息工工单信息工单信息工单信息工单信息工单信息
@@ -272,6 +272,7 @@
             .progress {
               width: vw(100);
               :deep(.el-progress-bar__outer) {
+                height: vh(4) !important;
                 background-color: #0858ae !important;
               }
             }
@@ -304,29 +305,27 @@
           &:nth-last-child(1) {
             margin-bottom: 0;
           }
-          .tag {
+          &-tag {
             padding: 0 vw(16);
             font-weight: bold;
             font-size: vw(14);
+            color: #fff;
             display: flex;
             align-items: center;
             justify-content: center;
             border-radius: vw(2);
-            &--success {
-              color: #02f9fa;
-              border: 1px solid #02f9fa;
-              box-shadow: inset 0 0 vw(8) 0 #0be1ab;
-            }
-            &--error {
-              color: #ee2c2c;
-              border: 1px solid #ee2c2c;
-              box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
-            }
-            &--primary {
-              color: #00aaff;
-              border: 1px solid #00aaff;
-              box-shadow: inset 0 0 vw(8) 0 #00aaff;
-            }
+          }
+          &-tag--warning {
+            @extend .item-tag;
+            background: #feae00;
+          }
+          &-tag--error {
+            @extend .item-tag;
+            background: #d9011b;
+          }
+          &-tag--primary {
+            @extend .item-tag;
+            background: #2380fb;
           }
           .content {
             margin-left: vw(4);
diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue
index dd4dc86..f1a4223 100644
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="box-4">
     <Title1 title="交通信息" />
-    <div class="flex justify-evenly pt-10 pb-20">
+    <div class="traffic-info flex justify-evenly pt-10 pb-20">
       <div v-for="item in list" class="cell">
         <img class="icon" :src="item.icon" alt="" width="64" height="64" />
         <div>
@@ -318,12 +318,15 @@
 <style lang="scss" scoped>
   .box-4 {
     margin-top: vh(120);
-    width: vw(750);
+    width: vw(774);
     height: vh(950);
     padding-left: vw(8);
     box-sizing: border-box;
     background-image: url('@/assets/images/bg-5.png');
     background-size: 100% 100%;
+    .traffic-info {
+      height: vh(80);
+    }
     .cell {
       display: flex;
       align-items: center;
@@ -403,25 +406,33 @@
         background-size: 100% 100%;
         .car {
           @extend .icon;
-          padding-left: vw(90);
           width: vw(352);
           height: vw(70);
+          padding-left: vw(90);
+          margin-left: vw(10);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
           background-image: url('@/assets/images/icon-6.png');
           background-size: 100% 100%;
         }
         .ship {
           @extend .icon;
-          padding-left: vw(90);
           width: vw(352);
           height: vw(70);
+          padding-left: vw(90);
+          margin-left: vw(10);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
           background-image: url('@/assets/images/icon-7.png');
           background-size: 100% 100%;
         }
         .label {
+          margin-bottom: vh(6);
           font-weight: 400;
           font-size: vw(14);
           color: rgba(255, 255, 255, 0.9);
-          margin-bottom: vh(6);
         }
         .value {
           font-weight: bold;
@@ -437,7 +448,7 @@
         .table {
           position: absolute;
           left: vw(160);
-          width: vw(200);
+          width: vw(226);
           height: vh(96);
           z-index: 2;
           background: rgba(0, 150, 255, 0.17);
diff --git a/src/views/home/components/gauge.vue b/src/views/home/components/gauge.vue
index 354f761..363fe2b 100644
--- a/src/views/home/components/gauge.vue
+++ b/src/views/home/components/gauge.vue
@@ -3,102 +3,129 @@
 </template>
 
 <script setup>
-  import * as echarts from 'echarts'
   import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
 
   const props = defineProps({
-    id: {
-      type: String,
-      default: () => ''
+    value: {
+      type: Number,
+      default: () => 0
+    },
+    colors: {
+      type: Array,
+      default: () => ['#02F9FA', '#0063FF']
     }
   })
 
-  let gaugeChart = null
+  const { id, setOption } = useEchart()
+
+  let params = null
+
+  watch(
+    () => props.value,
+    () => {
+      init()
+    }
+  )
+
+  const init = () => {
+    if (!params) {
+      params = {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            radius: '100%',
+            splitNumber: 10,
+            center: ['50%', '60%'],
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 1,
+                y: 1,
+                x2: 0,
+                y2: 0,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: props.value > 50 ? '#FFCBB9' : '#02F9FA'
+                  },
+                  {
+                    offset: 1,
+                    color: props.value > 50 ? '#FF4603' : '#0063FF'
+                  }
+                ],
+                global: false
+              },
+              shadowColor: 'rgba(0,138,255,0.45)',
+              shadowBlur: 10,
+              shadowOffsetX: 2,
+              shadowOffsetY: 2
+            },
+            progress: {
+              show: true,
+              roundCap: false,
+              width: fitChartSize(6)
+            },
+            axisLine: {
+              roundCap: false,
+              lineStyle: {
+                width: fitChartSize(6)
+              }
+            },
+            pointer: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            detail: {
+              width: '100%',
+              lineHeight: 20,
+              height: 20,
+              offsetCenter: [0, '20%'],
+              valueAnimation: true,
+              formatter: function (value) {
+                return '{value|' + value.toFixed(0) + '}{unit|%}'
+              },
+              rich: {
+                value: {
+                  fontSize: fitChartSize(12),
+                  fontWeight: 'bolder',
+                  color: '#02F9FA'
+                },
+                unit: {
+                  fontSize: fitChartSize(12),
+                  color: '#02F9FA'
+                }
+              }
+            },
+            data: [
+              {
+                value: props.value
+              }
+            ]
+          }
+        ]
+      }
+    } else {
+      params.series[0].data[0].value = props.value
+    }
+    setOption(params)
+  }
 
   onMounted(() => {
     init()
   })
-  const init = () => {
-    // 基于准备好的dom，初始化echarts实例
-    gaugeChart = echarts.init(document.getElementById(props.id))
-    gaugeChart.setOption({
-      series: [
-        {
-          type: 'gauge',
-          startAngle: 180,
-          endAngle: 0,
-          min: 0,
-          max: 100,
-          radius: '100%',
-          splitNumber: 10,
-          center: ['50%', '60%'],
-          itemStyle: {
-            color: '#58D9F9',
-            shadowColor: 'rgba(0,138,255,0.45)',
-            shadowBlur: 10,
-            shadowOffsetX: 2,
-            shadowOffsetY: 2
-          },
-          progress: {
-            show: true,
-            roundCap: true,
-            width: fitChartSize(6)
-          },
-          axisLine: {
-            roundCap: true,
-            lineStyle: {
-              width: fitChartSize(6)
-            }
-          },
-          pointer: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          splitLine: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          },
-          detail: {
-            width: '100%',
-            lineHeight: 20,
-            height: 20,
-            offsetCenter: [0, '20%'],
-            valueAnimation: true,
-            formatter: function (value) {
-              return '{value|' + value.toFixed(0) + '}{unit|%}'
-            },
-            rich: {
-              value: {
-                fontSize: fitChartSize(12),
-                fontWeight: 'bolder',
-                color: '#02F9FA'
-              },
-              unit: {
-                fontSize: fitChartSize(12),
-                color: '#02F9FA'
-              }
-            }
-          },
-          data: [
-            {
-              value: 80
-            }
-          ]
-        }
-      ]
-    })
-    window.addEventListener('resize', resize)
-  }
-  const resize = () => {
-    if (gaugeChart) {
-      gaugeChart.dispose()
-      init()
-    }
-  }
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index ef23ee1..3f2e225 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,32 +1,31 @@
 <template>
-  <!-- <Header title="奉节县旅游指挥调度中心" is-skip :nav-left="navLeft" :nav-right="navRight" />
-  <CoreVideo /> -->
-  <box1 :data="data" />
+  <box1 />
   <box2 />
   <box3 />
-  <!-- <Correspondence /> -->
 </template>
 
 <script setup>
   import box1 from './components/box-1.vue'
   import box2 from './components/box-2.vue'
   import box3 from './components/box-3.vue'
-
   import { useWebSocket } from '@/hooks/socket'
 
-  const { data, sendMessage } = useWebSocket('ws://36.138.38.16:81/ws/third-party')
+  const { data, isConnected, sendMessage } = useWebSocket('ws://36.138.38.16:81/ws/third-party')
 
   provide('homeData', data)
 
-  const navLeft = [
-    { name: '安全', path: '/monitor' },
-    { name: '景区', path: '/scenic' },
-    { name: '交通', path: '/traffic' }
-  ]
-  const navRight = [
-    { name: '停车' },
-    { name: '工单', path: '/workOrder' },
-    { name: '舆情', path: '/sentiment' },
-    { name: '酒店' }
-  ]
+  watch(
+    () => isConnected.value,
+    (val) => {
+      if (val) {
+        sendMessage(
+          JSON.stringify({
+            action: 'start',
+            type: 'index',
+            scenitspot: 'index'
+          })
+        )
+      }
+    }
+  )
 </script>
diff --git a/src/views/scenic/components/age-ratio.vue b/src/views/scenic/components/age-ratio.vue
index 639b928..9a19eca 100644
--- a/src/views/scenic/components/age-ratio.vue
+++ b/src/views/scenic/components/age-ratio.vue
@@ -1,4 +1,136 @@
 <template>
+  <div class="age" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const { id, setOption } = useEchart()
+
+  let params = null
+
+  onMounted(() => {
+    init()
+  })
+
+  const init = () => {
+    if (!params) {
+      const center = ['50%', '40%']
+      params = {
+        legend: {
+          x: 'left',
+          y: '76%',
+          itemHeight: fitChartSize(8),
+          itemWidth: fitChartSize(8),
+          itemGap: fitChartSize(14),
+          formatter: function (name) {
+            // let obj = homeData.value?.userPortrait?.ageRate.find((item) => item.name == name)
+            // return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
+            return '{name|' + name + '}'
+          },
+          textStyle: {
+            rich: {
+              name: {
+                color: '#fff',
+                fontSize: fitChartSize(14)
+              },
+              value: {
+                color: '#00D5F6',
+                fontSize: fitChartSize(14)
+              }
+            }
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            silent: true,
+            center: center,
+            radius: ['60%', '70%'],
+            itemStyle: {
+              borderColor: 'transparent',
+              borderRadius: fitChartSize(2),
+              borderWidth: fitChartSize(2)
+            },
+            label: {
+              show: false,
+              color: '#D3F0FE',
+              fontSize: fitChartSize(12)
+            },
+            data: [
+              { value: 484, name: '19岁以下' },
+              { value: 300, name: '18-30岁' },
+              { value: 1048, name: '30-40岁' },
+              { value: 580, name: '40-60岁' },
+              { value: 735, name: '60岁以上' }
+            ]
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: center,
+            radius: ['54%', '58%'],
+            itemStyle: {
+              borderColor: 'transparent',
+              borderRadius: fitChartSize(2),
+              borderWidth: fitChartSize(2)
+            },
+            label: {
+              show: false,
+              color: '#D3F0FE',
+              fontSize: fitChartSize(12)
+            },
+            data: [
+              { value: 484, name: '19岁以下' },
+              { value: 300, name: '18-30岁' },
+              { value: 1048, name: '30-40岁' },
+              { value: 580, name: '40-60岁' },
+              { value: 735, name: '60岁以上' }
+            ]
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: center,
+            radius: ['0', '40%'],
+            itemStyle: {
+              color: '#065EAD'
+            },
+            label: {
+              show: false
+            },
+            data: [100]
+          },
+          {
+            type: 'pie',
+            silent: true,
+            center: center,
+            radius: ['0', '26%'],
+            itemStyle: {
+              color: '#0477D1'
+            },
+            label: {
+              show: false
+            },
+            data: [100]
+          }
+        ]
+      }
+    } else {
+    }
+    setOption(params)
+  }
+</script>
+
+<style lang="scss" scoped>
+  .age {
+    width: vw(240);
+    height: vh(240);
+  }
+</style>
+
+<!-- <template>
   <div class="age-ratio" :id="id" />
 </template>
 
@@ -90,4 +222,4 @@
     width: vw(280);
     height: vh(240);
   }
-</style>
+</style> -->
diff --git a/src/views/scenic/components/box-1.vue b/src/views/scenic/components/box-1.vue
index 00713b7..bccdc52 100644
--- a/src/views/scenic/components/box-1.vue
+++ b/src/views/scenic/components/box-1.vue
@@ -1,9 +1,20 @@
 <template>
   <div class="box-1">
     <div class="header">
-      <div>
-        <div class="label">今年总游客数</div>
-        <countup v-for="item in count" :endVal="item" />
+      <div class="header__left">
+        <img src="@/assets/images/ticket.png" />
+        <div class="header__left-item">
+          <div class="label">当日购票量：</div>
+          <countup :endVal="1234" />
+        </div>
+        <div class="header__left-item">
+          <div class="label">未来3天购票量：</div>
+          <countup :endVal="1234" />
+        </div>
+        <div class="header__left-item">
+          <div class="label">3天后购票量：</div>
+          <countup :endVal="1234" />
+        </div>
       </div>
       <div>
         <div>
@@ -82,7 +93,7 @@
             </p>
           </div>
         </div>
-        <div class="more">查看更多</div>
+        <img class="more" src="@/assets/images/more-col.png" alt="查看更多" />
       </div>
     </div>
   </div>
@@ -98,7 +109,7 @@
 <style scoped lang="scss">
   .box-1 {
     margin-top: vh(120);
-    width: vw(800);
+    width: vw(900);
     height: vh(950);
     padding: vw(10);
     box-sizing: border-box;
@@ -107,43 +118,57 @@
     .header {
       display: flex;
       margin-top: vh(10);
-      & > div:nth-child(1) {
-        width: vw(300) !important;
+      &__left {
+        display: flex;
+        align-items: center;
+        > img {
+          width: vw(74);
+          height: auto;
+        }
+      }
+      &__left-item {
+        position: relative;
+        width: vw(120);
+        height: vh(58);
+        padding-left: vw(10);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background-image: url('@/assets/images/ticket-item-bg.png');
+        background-size: 100% 100%;
+        .label {
+          position: absolute;
+          top: vh(-4);
+          font-weight: 400;
+          font-size: vw(14);
+          color: #ffffff;
+        }
       }
       & > div:nth-child(2) {
         flex: 1;
         display: flex;
         justify-content: space-between;
+        .label {
+          font-weight: 400;
+          font-size: vw(16);
+          color: #ffffff;
+        }
+        .value {
+          font-weight: bold;
+          font-size: vw(28);
+          color: #02f9fa;
+          text-align: center;
+          line-height: vh(60);
+        }
+        .error {
+          color: #ff4400;
+        }
       }
-      .label {
-        font-weight: 400;
-        font-size: vw(16);
-        color: #ffffff;
-      }
-      .value {
-        font-weight: bold;
-        font-size: vw(28);
-        color: #02f9fa;
-        text-align: center;
-        line-height: vh(60);
-      }
-      .error {
-        color: #ff4400;
-      }
+
       .countup-wrap {
-        margin-top: vh(10);
-        display: inline-block;
-        width: vw(40);
-        height: vh(40);
-        margin-right: vw(4);
-        border-radius: vw(4);
-        color: #ffffff;
+        color: #02f9fa;
         font-size: vw(28);
         font-weight: bold;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
       }
     }
     .main {
@@ -232,18 +257,9 @@
       }
       .more {
         cursor: pointer;
+        width: auto;
+        height: vh(100);
         margin-top: vh(12);
-        width: vw(26);
-        height: vh(98);
-        font-weight: 400;
-        font-size: vw(14);
-        line-height: vh(10);
-        color: #ffffff;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: #034e99;
       }
     }
   }
diff --git a/src/views/scenic/components/box-2.vue b/src/views/scenic/components/box-2.vue
index 5ed6517..4180d70 100644
--- a/src/views/scenic/components/box-2.vue
+++ b/src/views/scenic/components/box-2.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="flex">
-      <div class="box mr-10">
+      <div class="box mr-8">
         <Title1 title="排队信息" />
         <div class="count-box flex justify-between">
           <count-item label="今日出票" :count="35600" suffix="张" />
@@ -16,7 +16,7 @@
           <Line :width="520" :height="300" />
         </div>
       </div>
-      <div class="box mr-10">
+      <div class="box mr-8">
         <Title1 title="景区承载" />
         <div class="flex">
           <progress1 :width="200" :height="70" />
@@ -32,7 +32,7 @@
           <Line :width="520" :height="300" />
         </div>
       </div>
-      <div class="box-1 mr-10">
+      <div class="box-1 mr-8">
         <Title1 title="停车信息" />
         <div class="flex">
           <div class="flex">
@@ -42,21 +42,21 @@
           </div>
           <div class="ml-20 flex flex-1 justify-between">
             <count-item label="总停车场数" :count="561" suffix="个" />
-            <count-item label="总停车位数" :count="150000" suffix="个" />
+            <count-item label="总停车位数" :count="15" suffix="个" />
           </div>
         </div>
         <div class="flex">
-          <div class="border flex-1">
+          <div class="border mr-8 flex-1">
             <div class="pt-10">
               <Title3 title="今日景区承载量" />
             </div>
-            <Line :width="350" :height="300" />
+            <Line :width="360" :height="300" />
           </div>
           <div class="border flex-1">
             <div class="pt-10">
               <Title3 title="车辆归属地占比" />
             </div>
-            <PieRow :width="340" :height="300" />
+            <PieRow :width="360" :height="300" />
           </div>
         </div>
       </div>
@@ -75,8 +75,8 @@
         </div>
       </div>
     </div>
-    <div class="flex mt-10">
-      <div class="box-3 mr-10">
+    <div class="flex mt-8">
+      <div class="box-3 mr-8">
         <Title1 title="交通信息" />
         <div class="count-box flex">
           <count-item label="总通景路段" :count="35600" suffix="张" />
@@ -85,25 +85,41 @@
           <count-item label="拥堵持续时间" :count="35600" suffix="S" />
         </div>
         <div class="flex">
-          <div class="border">
+          <div class="border mr-8">
             <Title3 title="今日交通负载" />
             <traffic-flow />
           </div>
-          <div class="border">
+          <div class="border mr-8">
             <Title3 title="今日交通负载" />
-            <PieCol :width="230" :height="300" />
+            <jam :width="220" :height="160" />
+            <div class="legend">
+              <ul class="legend__wrapper">
+                <li class="legend-item" v-for="(item, index) in 6" :key="index">
+                  <p class="legend-item-label">路段1</p>
+                  <p class="legend-item-value">10%</p>
+                </li>
+              </ul>
+            </div>
           </div>
           <div class="border">
             <Title3 title="今日交通负载" />
-            <PieCol :width="230" :height="300" />
+            <jam :width="220" :height="160" />
+            <div class="legend">
+              <ul class="legend__wrapper">
+                <li class="legend-item" v-for="(item, index) in 6" :key="index">
+                  <p class="legend-item-label">路段1</p>
+                  <p class="legend-item-value">10%</p>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>
 
-      <div class="box-4 mr-10">
+      <div class="box-4 mr-8">
         <Title1 title="用户画像" />
         <div class="flex">
-          <div class="flex-1">
+          <div class="border mr-8 flex-1">
             <Title3 title="年龄/性别占比" />
             <age-ratio />
             <div class="count">总人数：<countup endVal="124563" /></div>
@@ -136,7 +152,7 @@
               </div>
             </div>
           </div>
-          <div class="border flex-1">
+          <div class="border mr-8 flex-1">
             <Title3 title="客源地分析TOP5" />
             <top />
           </div>
@@ -151,14 +167,15 @@
       <div class="box-5">
         <Title1 title="车船信息" />
         <div class="flex mb-6">
-          <div class="border pt-10 pb-10">
+          <div class="border mr-8 pt-10 pb-10">
             <Title2 title="车车车车车车" />
             <div class="car-box mt-10">
-              <div class="pr-20">
+              <img class="icon" src="@/assets/images/icon-6.png" />
+              <div class="car-item pr-20">
                 <div class="label">车总数</div>
                 <div class="value">130辆</div>
               </div>
-              <div>
+              <div class="car-item">
                 <div class="label">今日累计运营(班次)</div>
                 <div class="value">130次</div>
               </div>
@@ -178,11 +195,12 @@
           <div class="border pt-10 pb-10">
             <Title2 title="船船船船船船" />
             <div class="car-box mt-10">
-              <div class="pr-20">
+              <img class="icon" src="@/assets/images/icon-6.png" />
+              <div class="car-item pr-20">
                 <div class="label">车总数</div>
                 <div class="value">130辆</div>
               </div>
-              <div>
+              <div class="car-item">
                 <div class="label">今日累计运营(班次)</div>
                 <div class="value">130次</div>
               </div>
@@ -200,7 +218,7 @@
             </div>
           </div>
         </div>
-        <div class="border">
+        <div class="border pt-10 pb-10">
           <div id="car-ship" class="car-ship" />
           <img class="full" src="@/assets/images/full.png" @click="show = true" />
         </div>
@@ -218,6 +236,7 @@
   import BigCarShipMap from './big-car-ship-map.vue'
   import AgeRatio from './age-ratio.vue'
   import top from './top.vue'
+  import jam from './jam.vue'
   import ticket from './ticket.vue'
   import TrafficFlow from './traffic-flow.vue'
 
@@ -239,6 +258,70 @@
   :deep(.anchorBL) {
     display: none;
   }
+  .legend {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @mixin icon($column) {
+      width: vw(50);
+      height: vh(60);
+      display: flex;
+      flex-direction: $column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      gap: vw(8);
+      width: vw(170);
+    }
+    &-item {
+      color: #fff;
+    }
+    &-item:nth-child(1) {
+      @include icon(column);
+      background-image: url('@/assets/images/legend-item-1.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(2) {
+      @include icon(column);
+      background-image: url('@/assets/images/legend-item-1.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(3) {
+      @include icon(column);
+      background-image: url('@/assets/images/legend-item-1.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(4) {
+      @include icon(column-reverse);
+      background-image: url('@/assets/images/legend-item-2.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(5) {
+      @include icon(column-reverse);
+      background-image: url('@/assets/images/legend-item-2.png');
+      background-size: 100% 100%;
+    }
+    &-item:nth-child(6) {
+      @include icon(column-reverse);
+      background-image: url('@/assets/images/legend-item-2.png');
+      background-size: 100% 100%;
+    }
+    &-item-label {
+      font-weight: 400;
+      font-size: vw(12);
+      line-height: vh(14);
+    }
+    &-item-value {
+      font-weight: bold;
+      font-size: vw(16);
+      line-height: vh(18);
+    }
+  }
   .dialog {
     :deep(.el-dialog) {
       width: vw(2540);
@@ -279,51 +362,54 @@
     }
     .border {
       position: relative;
-      overflow: hidden;
       padding: 0 vw(10);
-      margin: 0 vw(8);
       box-sizing: border-box;
       background-image: url('@/assets/images/bg-3.png');
       background-size: 100% 100%;
     }
     .box {
       @extend .bg;
-      width: vw(570);
+      width: vw(510);
       height: vh(475);
     }
     .box-1 {
       @extend .bg;
-      width: vw(750);
       height: vh(475);
     }
     .box-2 {
       @extend .bg;
-      width: vw(440);
       height: vh(475);
     }
     .box-3 {
       @extend .bg;
-      width: vw(850);
       height: vh(465);
     }
     .box-4 {
       @extend .bg;
-      width: vw(840);
       height: vh(465);
     }
     .box-5 {
       @extend .bg;
-      width: vw(650);
       height: vh(465);
     }
     .car-box {
-      width: vw(350);
+      width: vw(316);
       height: vh(74);
-      padding-left: vw(75);
       display: flex;
       align-items: center;
-      background-image: url('@/assets/images/icon-6.png');
-      background-size: 100% 100%;
+      .icon {
+        position: absolute;
+        width: vw(350);
+        height: vw(74);
+      }
+      .car-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        &:nth-child(2) {
+          padding-left: vw(80);
+        }
+      }
       .label {
         font-weight: 400;
         font-size: vw(14);
@@ -333,12 +419,12 @@
         font-weight: bold;
         font-size: vw(24);
         color: #02f9fa;
-        margin-top: vh(10);
+        margin-top: vh(6);
       }
     }
     .car-ship {
-      width: vw(630);
-      height: vh(230);
+      width: vw(660);
+      height: vh(240);
     }
     .full {
       cursor: pointer;
diff --git a/src/views/scenic/components/jam.vue b/src/views/scenic/components/jam.vue
new file mode 100644
index 0000000..f0b41fc
--- /dev/null
+++ b/src/views/scenic/components/jam.vue
@@ -0,0 +1,144 @@
+<template>
+  <div
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
+</template>
+
+<script setup>
+  import styleUtil from '@/utils/styleUtil'
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const props = defineProps({
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  })
+
+  const { id, setOption } = useEchart()
+
+  var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA', '']
+  var title = ['企业', '农业', '工业', '纺织']
+  var dataValue = ['15', '30', '35', '20']
+  var dataList = title.map((item, index) => {
+    return {
+      name: item,
+      value: dataValue[index]
+    }
+  })
+
+  var defaultCofig = {
+    color: colorList,
+    series: [
+      {
+        type: 'pie',
+        startAngle: 360,
+        center: ['50%', '40%'],
+        radius: ['65%', '80%'],
+        label: {
+          show: false
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          {
+            value: 50,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 1,
+                y: 1,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 150, 255, 0)'
+                  },
+                  {
+                    offset: 0.5,
+                    color: 'rgba(0, 150, 255, 0.47)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(0, 150, 255, 0)'
+                  }
+                ]
+              }
+            }
+          },
+
+          {
+            name: 'bottom',
+            value: 50,
+            itemStyle: {
+              color: 'transparent'
+            }
+          }
+        ]
+      },
+      {
+        type: 'pie',
+        center: ['50%', '40%'],
+        radius: ['55%', '70%'],
+        itemStyle: {
+          borderWidth: fitChartSize(4),
+          borderColor: '#093672'
+        },
+        label: {
+          show: true,
+          position: 'center',
+          fontWeight: 'bold',
+          formatter: function (o) {
+            return `{value|123456}` + '\n' + `{name|整改率}`
+          },
+          rich: {
+            value: {
+              color: '#fff',
+              fontSize: fitChartSize(24),
+              fontWeight: 'bold',
+              padding: [0, 0, 5, 0]
+            },
+            name: {
+              color: '#7894A8',
+              fontSize: fitChartSize(12)
+            }
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: dataList
+      }
+    ]
+  }
+
+  const init = () => {
+    setOption({
+      ...defaultCofig,
+      ...props.config
+    })
+  }
+
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/scenic/components/ticket.vue b/src/views/scenic/components/ticket.vue
index dc508ea..9de5971 100644
--- a/src/views/scenic/components/ticket.vue
+++ b/src/views/scenic/components/ticket.vue
@@ -189,7 +189,7 @@
 
 <style scoped lang="scss">
   .ticket {
-    width: 100%;
+    width: vw(250);
     height: vh(300);
   }
 </style>
diff --git a/src/views/scenic/components/top.vue b/src/views/scenic/components/top.vue
index 908d803..82a435b 100644
--- a/src/views/scenic/components/top.vue
+++ b/src/views/scenic/components/top.vue
@@ -181,7 +181,7 @@
 
 <style scoped lang="scss">
   .top {
-    width: 100%;
+    width: vw(240);
     height: vh(360);
   }
 </style>
diff --git a/src/views/scenic/components/traffic-flow.vue b/src/views/scenic/components/traffic-flow.vue
index eef029c..38093ef 100644
--- a/src/views/scenic/components/traffic-flow.vue
+++ b/src/views/scenic/components/traffic-flow.vue
@@ -96,7 +96,7 @@
 
 <style scoped lang="scss">
   .traffic-flow {
-    width: vw(278);
+    width: vw(260);
     height: vh(300);
   }
 </style>
diff --git a/src/views/sentiment/index.vue b/src/views/sentiment/index.vue
index 502ec72..9f72b5e 100644
--- a/src/views/sentiment/index.vue
+++ b/src/views/sentiment/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="flex">
-      <div class="box-1 mr-10">
+      <div class="box-1 mr-8">
         <Title1 title="最新舆情" />
         <div class="list">
           <div class="item" v-for="(item, index) in hotNewList" :key="index">
@@ -20,7 +20,7 @@
           </div>
         </div>
       </div>
-      <div class="box-2 mr-10">
+      <div class="box-2 mr-8">
         <div class="flex justify-center">
           <div class="top flex justify-evenly">
             <count-item label="今日舆情总数" :count="total" suffix="条" color="#ffffff" />
@@ -35,13 +35,13 @@
           </div>
         </div>
       </div>
-      <div class="box-1">
+      <div class="box-3">
         <Title1 title="数据来源分析" />
         <data-source />
       </div>
     </div>
-    <div class="flex mt-10">
-      <div class="box-2 mr-10 rela">
+    <div class="flex mt-8">
+      <div class="box-2 mr-8 rela">
         <Title1 title="舆情指数" />
         <div class="select-box">
           <Select v-model="params.id" :options="options" @on-change="getLineChart" />
@@ -54,11 +54,11 @@
           :seriesConfig="{ smooth: false, symbol: 'circle' }"
         />
       </div>
-      <div class="box-1 mr-10 rela">
+      <div class="box-1 mr-8 rela">
         <Title1 title="地域分析" />
         <Area />
       </div>
-      <div class="box-1 mr-10">
+      <div class="box-3">
         <Title1 title="词频分析" />
         <word-cloud />
       </div>
@@ -128,7 +128,9 @@
     right: vw(10);
   }
   .container {
+    flex: 1;
     margin-top: vh(120);
+    box-sizing: border-box;
     .bg {
       background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
     }
@@ -137,7 +139,7 @@
       margin-top: vh(35);
     }
     .box-1 {
-      width: vw(780);
+      width: vw(790);
       height: vh(470);
       @extend .bg;
     }
@@ -146,6 +148,11 @@
       height: vh(470);
       @extend .bg;
     }
+    .box-3 {
+      width: vw(810);
+      height: vh(470);
+      @extend .bg;
+    }
     .border {
       background-image: url('@/assets/images/bg-3.png');
       background-size: 100% 100%;