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;
+          &-tag--warning {
-              border: 1px solid #02f9fa;
+            @extend .item-tag;
-              box-shadow: inset 0 0 vw(8) 0 #0be1ab;
+            background: #feae00;
-            }
+          }
-            &--error {
+          &-tag--error {
-              color: #ee2c2c;
+            @extend .item-tag;
-              border: 1px solid #ee2c2c;
+            background: #d9011b;
-              box-shadow: inset 0 0 vw(8) 0 #ee2c2c;
+          }
-            }
+          &-tag--primary {
-            &--primary {
+            @extend .item-tag;
-              color: #00aaff;
+            background: #2380fb;
-              border: 1px solid #00aaff;
-              box-shadow: inset 0 0 vw(8) 0 #00aaff;
-            }
           }
           .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,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: {
+    value: {
-      type: String,
+      type: Number,
-      default: () => ''
+      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>

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,43 +118,57 @@
     .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);
+          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);
+        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%;