feat：完善整体样式

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;
       }

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');

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%);
       }
     }

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>

src/hooks/socket.js

@@ -1,9 +1,9 @@
 import { ref } from 'vue'
 
 export function useWebSocket(url) {
-  let socket = ref(null)
+  let socket = ref(null) // socket对象
-  let data = ref(null)
+  let data = ref(null) // 存储接收到的数据
-  let isConnected = ref(false)
+  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)

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;

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({
+      init()
-        // tooltip: {
+    }
-        //   trigger: 'item'
+  )
-        // },
+  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 {
+  .age {
-    width: vw(253);
+    width: vw(290);
     height: vh(120);
   }
 </style>

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 {
+    .age-box {
-      width: vw(253);
+      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;

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 {
+          &-tag--warning {
-              color: #ee2c2c;
+            @extend .item-tag;
-              border: 1px solid #ee2c2c;
+            background: #feae00;
-              box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
           }
-            &--primary {
+          &-tag--error {
-              color: #00aaff;
+            @extend .item-tag;
-              border: 1px solid #00aaff;
+            background: #d9011b;
-              box-shadow: inset 0 0 vw(8) 0 #00aaff;
           }
+          &-tag--primary {
+            @extend .item-tag;
+            background: #2380fb;
           }
           .content {
             margin-left: vw(4);

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);

src/views/home/components/gauge.vue

@@ -3,25 +3,34 @@
 </template>
 
 <script setup>
-  import * as echarts from 'echarts'
   import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
 
   const props = defineProps({
-    id: {
+    value: {
-      type: String,
+      type: Number,
-      default: () => ''
+      default: () => 0
+    },
+    colors: {
+      type: Array,
+      default: () => ['#02F9FA', '#0063FF']
     }
   })
 
-  let gaugeChart = null
+  const { id, setOption } = useEchart()
 
-  onMounted(() => {
+  let params = null
+
+  watch(
+    () => props.value,
+    () => {
       init()
-  })
+    }
+  )
+
   const init = () => {
-    // 基于准备好的dom，初始化echarts实例
+    if (!params) {
-    gaugeChart = echarts.init(document.getElementById(props.id))
+      params = {
-    gaugeChart.setOption({
         series: [
           {
             type: 'gauge',
@@ -33,7 +42,24 @@
             splitNumber: 10,
             center: ['50%', '60%'],
             itemStyle: {
-            color: '#58D9F9',
+              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,
@@ -41,11 +67,11 @@
             },
             progress: {
               show: true,
-            roundCap: true,
+              roundCap: false,
               width: fitChartSize(6)
             },
             axisLine: {
-            roundCap: true,
+              roundCap: false,
               lineStyle: {
                 width: fitChartSize(6)
               }
@@ -85,20 +111,21 @@
             },
             data: [
               {
-              value: 80
+                value: props.value
               }
             ]
           }
         ]
-    })
-    window.addEventListener('resize', resize)
       }
-  const resize = () => {
+    } else {
-    if (gaugeChart) {
+      params.series[0].data[0].value = props.value
-      gaugeChart.dispose()
+    }
+    setOption(params)
+  }
+
+  onMounted(() => {
     init()
-    }
+  })
-  }
 </script>
 
 <style lang="scss" scoped>

src/views/home/index.vue

@@ -1,32 +1,31 @@
 <template>
-  <!-- <Header title="奉节县旅游指挥调度中心" is-skip :nav-left="navLeft" :nav-right="navRight" />
+  <box1 />
-  <CoreVideo /> -->
-  <box1 :data="data" />
   <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 = [
+  watch(
-    { name: '安全', path: '/monitor' },
+    () => isConnected.value,
-    { name: '景区', path: '/scenic' },
+    (val) => {
-    { name: '交通', path: '/traffic' }
+      if (val) {
-  ]
+        sendMessage(
-  const navRight = [
+          JSON.stringify({
-    { name: '停车' },
+            action: 'start',
-    { name: '工单', path: '/workOrder' },
+            type: 'index',
-    { name: '舆情', path: '/sentiment' },
+            scenitspot: 'index'
-    { name: '酒店' }
+          })
-  ]
+        )
+      }
+    }
+  )
 </script>

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> -->

src/views/scenic/components/box-1.vue

@@ -1,9 +1,20 @@
 <template>
   <div class="box-1">
     <div class="header">
-      <div>
+      <div class="header__left">
-        <div class="label">今年总游客数</div>
+        <img src="@/assets/images/ticket.png" />
-        <countup v-for="item in count" :endVal="item" />
+        <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,14 +118,36 @@
     .header {
       display: flex;
       margin-top: vh(10);
-      & > div:nth-child(1) {
+      &__left {
-        width: vw(300) !important;
+        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);
@@ -130,20 +163,12 @@
         .error {
           color: #ff4400;
         }
+      }
+
       .countup-wrap {
-        margin-top: vh(10);
+        color: #02f9fa;
-        display: inline-block;
-        width: vw(40);
-        height: vh(40);
-        margin-right: vw(4);
-        border-radius: vw(4);
-        color: #ffffff;
         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;
       }
     }
   }

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="flex mt-8">
-      <div class="box-3 mr-10">
+      <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');
+      .icon {
-      background-size: 100% 100%;
+        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);
+      width: vw(660);
-      height: vh(230);
+      height: vh(240);
     }
     .full {
       cursor: pointer;

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>

src/views/scenic/components/ticket.vue

@@ -189,7 +189,7 @@
 
 <style scoped lang="scss">
   .ticket {
-    width: 100%;
+    width: vw(250);
     height: vh(300);
   }
 </style>

src/views/scenic/components/top.vue

@@ -181,7 +181,7 @@
 
 <style scoped lang="scss">
   .top {
-    width: 100%;
+    width: vw(240);
     height: vh(360);
   }
 </style>

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>

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="flex mt-8">
-      <div class="box-2 mr-10 rela">
+      <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%;