feat 交通大屏

src/components/CoreVideo/index.vue

@@ -23,7 +23,7 @@
 <style lang="scss" scoped>
   .core-video {
     margin: vh(10);
-    width: vw(326);
+    width: vw(300);
     border-radius: vw(2);
     background-image: url('@/assets/images/bg-1.png');
     background-size: 100% 100%;

src/components/Correspondence/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="box-4-content" >
+  <div class="box-4-content">
     <div class="top-box">
       <div class="title">融合通信</div>
       <div class="icon-box flex">
@@ -52,22 +52,22 @@
 </template>
 
 <script setup>
-	import { fitChartSize } from '@/utils/dataUtil'
+  import { fitChartSize } from '@/utils/dataUtil'
-	const props = defineProps({
+  const props = defineProps({
-	  width: {
+    width: {
-	    type: Number,
+      type: Number,
-	    default: () => 0
+      default: () => 0
-	  },
+    },
-	  id: {
+    id: {
-	    type: String,
+      type: String,
-	    default: () => ''
+      default: () => ''
-	  }
+    }
-	})
+  })
 </script>
 
 <style lang="scss" scoped>
   .box-4-content {
-    width: vw(315);
+    width: vw(300);
     height: vh(1060);
     background-image: url('/src/assets/images/rt-bg.png');
     background-repeat: no-repeat;

src/components/Line/index.vue

@@ -164,7 +164,8 @@
       defaultConfig.legend.data.push(item.name)
     })
     lineChart.setOption({
-      ...defaultConfig
+      ...defaultConfig,
+      ...props.config
     })
     // // 开启轮播
     // startTooltipLoop()

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

@@ -46,7 +46,18 @@
         </div>
         <Title3 title="景区排队人数" />
         <div class="pt-20">
-          <Line :width="370" :height="140" />
+          <Line
+            :width="370"
+            :height="140"
+            :config="{ legend: false }"
+            :data="[
+              {
+                name: '企业数',
+                data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
+              }
+            ]"
+            :xAxisData="xAxisData"
+          />
         </div>
       </div>
       <div class="box">
@@ -71,7 +82,35 @@
         </div>
         <Title3 title="今日景区承载量" />
         <div class="pt-20">
-          <Line :width="370" :height="140" />
+          <Line
+            :width="370"
+            :height="140"
+            :config="{ legend: false }"
+            :data="[
+              {
+                name: '企业数',
+                data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
+              }
+            ]"
+            :xAxisData="[
+              '12-16 10:00',
+              '12-16 14:00',
+              '12-16 16:00',
+              '12-16 22:00',
+              '12-17 02:00',
+              '12-17 06:00',
+              '12-17 10:00',
+              '12-17 14:00',
+              '12-17 16:00',
+              '12-16 22:00',
+              '12-18 02:00',
+              '12-18 06:00',
+              '12-8 10:00',
+              '12-18 14:00',
+              '12-18 16:00',
+              '12-18 20:00'
+            ]"
+          />
         </div>
       </div>
     </div>
@@ -142,6 +181,24 @@
   import top from './top.vue'
   import gauge from './gauge.vue'
   import ticket from './ticket.vue'
+  let xAxisData = ref([
+    '12-16 10:00',
+    '12-16 14:00',
+    '12-16 16:00',
+    '12-16 22:00',
+    '12-17 02:00',
+    '12-17 06:00',
+    '12-17 10:00',
+    '12-17 14:00',
+    '12-17 16:00',
+    '12-16 22:00',
+    '12-18 02:00',
+    '12-18 06:00',
+    '12-8 10:00',
+    '12-18 14:00',
+    '12-18 16:00',
+    '12-18 20:00'
+  ])
 </script>
 
 <style lang="scss" scoped>

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

@@ -14,15 +14,71 @@
       <div class="box">
         <div class="pt-10">
           <Title3 title="拥堵路段总数" />
-          <div class="pt-20">
+          <div class="">
-            <Line :width="250" :height="170" />
+            <Line
+              :width="250"
+              :height="150"
+              :config="{ legend: false }"
+              :data="[
+                {
+                  name: '企业数',
+                  data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
+                }
+              ]"
+              :xAxisData="[
+                '12-16 10:00',
+                '12-16 14:00',
+                '12-16 16:00',
+                '12-16 22:00',
+                '12-17 02:00',
+                '12-17 06:00',
+                '12-17 10:00',
+                '12-17 14:00',
+                '12-17 16:00',
+                '12-16 22:00',
+                '12-18 02:00',
+                '12-18 06:00',
+                '12-8 10:00',
+                '12-18 14:00',
+                '12-18 16:00',
+                '12-18 20:00'
+              ]"
+            />
           </div>
         </div>
       </div>
       <div class="box">
         <div class="pt-10">
           <Title3 title="拥堵路段总数" />
-          <Line :width="250" :height="120" />
+          <Line
+            :width="250"
+            :height="150"
+            :config="{ legend: false }"
+            :data="[
+              {
+                name: '企业数',
+                data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
+              }
+            ]"
+            :xAxisData="[
+              '12-16 10:00',
+              '12-16 14:00',
+              '12-16 16:00',
+              '12-16 22:00',
+              '12-17 02:00',
+              '12-17 06:00',
+              '12-17 10:00',
+              '12-17 14:00',
+              '12-17 16:00',
+              '12-16 22:00',
+              '12-18 02:00',
+              '12-18 06:00',
+              '12-8 10:00',
+              '12-18 14:00',
+              '12-18 16:00',
+              '12-18 20:00'
+            ]"
+          />
         </div>
       </div>
       <div class="box">
@@ -73,7 +129,35 @@
         <div class="pt-10">
           <Title3 title="拥堵路段总数" />
           <div class="pt-20">
-            <Line :width="250" :height="120" />
+            <Line
+              :width="250"
+              :height="120"
+              :config="{ legend: false }"
+              :data="[
+                {
+                  name: '企业数',
+                  data: [64, 159, 112, 86, 151, 131, 118, 232, 23, 64, 159, 112, 86, 151, 131, 118]
+                }
+              ]"
+              :xAxisData="[
+                '12-16 10:00',
+                '12-16 14:00',
+                '12-16 16:00',
+                '12-16 22:00',
+                '12-17 02:00',
+                '12-17 06:00',
+                '12-17 10:00',
+                '12-17 14:00',
+                '12-17 16:00',
+                '12-16 22:00',
+                '12-18 02:00',
+                '12-18 06:00',
+                '12-8 10:00',
+                '12-18 14:00',
+                '12-18 16:00',
+                '12-18 20:00'
+              ]"
+            />
           </div>
         </div>
       </div>
@@ -181,7 +265,7 @@
           </div>
         </div>
         <div>
-          <div class="pt-6">
+          <div class="lodging">
             <Title3 title="酒店入住人数及入住率" />
           </div>
           <lodging-ratio />
@@ -194,9 +278,8 @@
 <script setup>
   import jam from './jam.vue'
   import vacancy from './vacancy.vue'
-  import TrafficFlow from './traffic-flow.vue'
   import LodgingRatio from './lodging-ratio.vue'
-
+  import TrafficFlow from './traffic-flow.vue'
   import countup from 'vue-countup-v3'
   import icon1 from '@/assets/images/icon-1.png'
   import icon2 from '@/assets/images/icon-2.png'
@@ -228,14 +311,9 @@
 </script>
 
 <style lang="scss" scoped>
-  .title1 {
-    :deep(.title) {
-      width: vw(300) !important;
-    }
-  }
   .box-4 {
     margin-top: vh(120);
-    width: vw(710);
+    width: vw(750);
     height: vh(950);
     padding: vw(8);
     box-sizing: border-box;
@@ -356,7 +434,7 @@
         .table {
           position: absolute;
           left: vw(160);
-          width: vw(220);
+          width: vw(200);
           height: vh(100);
           z-index: 2;
           .header {
@@ -435,7 +513,8 @@
         }
       }
       & > div:nth-child(2) {
-        margin-top: vh(10);
+        padding-top: vh(10);
+        margin-top: vh(8);
         width: vw(360);
         height: vh(140);
         background-image: url('@/assets/images/bg-4.png');
@@ -443,4 +522,14 @@
       }
     }
   }
+  .lodging {
+    :deep(.title-3) {
+      margin-top: vh(10);
+    }
+  }
+  .title1 {
+    :deep(.title) {
+      width: vw(300) !important;
+    }
+  }
 </style>

src/views/home/components/lodging-ratio.vue

@@ -23,7 +23,7 @@
     grid: {
       left: '4%',
       right: '4%',
-      top: '16%',
+      top: '20%',
       bottom: '-10%',
       containLabel: true
     },
@@ -183,6 +183,6 @@
 <style scoped lang="scss">
   .lodging-ratio {
     width: 100%;
-    height: vh(110);
+    height: vh(120);
   }
 </style>

src/views/home/index.vue

@@ -11,10 +11,14 @@
   import box2 from './components/box-2.vue'
   import box3 from './components/box-3.vue'
   import box4 from './components/box-4.vue'
-  const navLeft = [{ name: '安全',path: '/roadTesting' }, { name: '景区', path: '/scenic' }, { name: '交通',path: '/traffic'  }]
+  const navLeft = [
+    { name: '安全', path: '/monitor' },
+    { name: '景区', path: '/scenic' },
+    { name: '交通', path: '/traffic' }
+  ]
   const navRight = [
     { name: '停车' },
-    { name: '工单',path: '/workOrder' },
+    { name: '工单', path: '/workOrder' },
     { name: '舆情', path: '/sentiment' },
     { name: '酒店' }
   ]

src/views/scenic/components/age-ratio.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="age-ratio" :id="id" />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { guid } from '@/utils/util'
+
+  let ageChart = null
+  let id = ref(guid())
+
+  const init = () => {
+    // 基于准备好的dom，初始化echarts实例
+    ageChart = echarts.init(document.getElementById(id.value))
+    ageChart.setOption({
+      legend: {
+        orient: 'horizontal',
+        x: 'left',
+        y: 'bottom',
+        data: ['19岁以下', '18-30岁', '30-40岁', '40-60岁', '60岁以上'],
+        itemHeight: fitChartSize(8),
+        itemWidth: fitChartSize(8),
+        itemGap: fitChartSize(10),
+        formatter: function (name) {
+          return '{title|' + name + '}'
+        },
+        textStyle: {
+          rich: {
+            title: {
+              color: '#fff',
+              fontSize: fitChartSize(14)
+            },
+            value: {
+              color: '#00D5F6',
+              fontSize: fitChartSize(14)
+            }
+          }
+        }
+      },
+      series: [
+        {
+          type: 'pie',
+          center: ['50%', '40%'],
+          radius: ['65%', '75%'],
+          itemStyle: {
+            borderColor: 'transparent',
+            borderRadius: fitChartSize(2),
+            borderWidth: fitChartSize(2)
+          },
+          label: {
+            show: false,
+            color: '#D3F0FE',
+            fontSize: fitChartSize(12)
+          },
+          labelLine: {
+            normal: {
+              lineStyle: {
+                type: 'dashed'
+              }
+            }
+          },
+          data: [
+            { value: 484, name: '19岁以下' },
+            { value: 300, name: '18-30岁' },
+            { value: 1048, name: '30-40岁' },
+            { value: 580, name: '40-60岁' },
+            { value: 735, name: '60岁以上' }
+          ]
+        }
+      ]
+    })
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (ageChart) {
+      ageChart.dispose()
+      ageChart = null
+      init()
+    }
+  }
+
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style lang="scss" scoped>
+  .age-ratio {
+    width: vw(280);
+    height: vh(240);
+  }
+</style>

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

@@ -98,7 +98,7 @@
 <style scoped lang="scss">
   .box-1 {
     margin-top: vh(120);
-    width: vw(810);
+    width: vw(800);
     height: vh(950);
     padding: vw(10);
     box-sizing: border-box;

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

@@ -3,7 +3,7 @@
     <div class="flex">
       <div class="box mr-10">
         <Title1 title="排队信息" />
-        <div class="top flex justify-between">
+        <div class="count-box flex justify-between">
           <count-item label="今日出票" :count="35600" suffix="张" />
           <count-item label="今日接待人数" :count="35600" suffix="人" />
           <count-item label="排队人数" :count="35600" suffix="人" />
@@ -62,7 +62,7 @@
       </div>
       <div class="box-2">
         <Title1 title="安全信息 " />
-        <div class="top flex">
+        <div class="count-box flex">
           <count-item label="当前告警总数" :count="561" suffix="次" />
           <count-item label="安全告警总数" :count="561" suffix="次" />
           <count-item label="已解除告警数" :count="561" />
@@ -78,7 +78,7 @@
     <div class="flex mt-10">
       <div class="box-3 mr-10">
         <Title1 title="交通信息" />
-        <div class="top flex">
+        <div class="count-box flex">
           <count-item label="总通景路段" :count="35600" suffix="张" />
           <count-item label="通景路段拥堵数" :count="35600" suffix="人" />
           <count-item label="拥堵开始时间" :count="35600" suffix="人" />
@@ -86,24 +86,68 @@
         </div>
         <div class="flex">
           <div class="border">
-            <Line :width="260" :height="330" />
+            <Title3 title="今日交通负载" />
+            <traffic-flow />
           </div>
           <div class="border">
-            <PieCol :width="230" :height="330" />
+            <Title3 title="今日交通负载" />
+            <PieCol :width="230" :height="300" />
           </div>
           <div class="border">
-            <PieCol :width="230" :height="330" />
+            <Title3 title="今日交通负载" />
+            <PieCol :width="230" :height="300" />
           </div>
         </div>
       </div>
+
       <div class="box-4 mr-10">
         <Title1 title="用户画像" />
         <div class="flex">
-          <div class="border">1</div>
+          <div class="flex-1">
-          <div class="border">2</div>
+            <Title3 title="年龄/性别占比" />
-          <div class="border">3</div>
+            <age-ratio />
+            <div class="count">总人数：<countup endVal="124563" /></div>
+            <div class="cell pt-20">
+              <img class="icon" src="@/assets/images/man.png" />
+              <div class="bg">
+                <span class="text">男性</span>
+                <div class="progress">
+                  <el-progress
+                    :percentage="50"
+                    :show-text="false"
+                    color="linear-gradient( to right, #074D90 0%, #55E0FF 100%)"
+                  />
+                </div>
+                <span class="man">50%</span>
+              </div>
+            </div>
+            <div class="cell pt-20">
+              <img class="icon" src="@/assets/images/woman.png" />
+              <div class="bg">
+                <span class="text">女性</span>
+                <div class="progress">
+                  <el-progress
+                    :percentage="50"
+                    :show-text="false"
+                    color="linear-gradient( to right, #0A4482 0%, #FF7021 100%)"
+                  />
+                </div>
+                <span class="woman">50%</span>
+              </div>
+            </div>
+          </div>
+          <div class="border flex-1">
+            <Title3 title="客源地分析TOP5" />
+            <top />
+          </div>
+          <div class="border flex-1">
+            <Title3 title="购票来源" />
+            <div class="count">总人数：<countup endVal="124563" /></div>
+            <ticket />
+          </div>
         </div>
       </div>
+
       <div class="box-5">
         <Title1 title="车船信息" />
         <div class="flex mb-6">
@@ -172,6 +216,11 @@
   import carIcon from '@/assets/images/car.png'
   import shipIcon from '@/assets/images/ship.png'
   import BigCarShipMap from './big-car-ship-map.vue'
+  import AgeRatio from './age-ratio.vue'
+  import top from './top.vue'
+  import ticket from './ticket.vue'
+  import TrafficFlow from './traffic-flow.vue'
+
   const { initMap, addMarker } = useMap()
   let show = ref(false)
   onMounted(() => {
@@ -222,7 +271,7 @@
   .container {
     flex: 1;
     margin: vh(120) vw(10) 0 vw(10);
-    .top {
+    .count-box {
       padding: 0 vw(10);
       height: vh(70);
     }
@@ -233,7 +282,7 @@
       position: relative;
       overflow: hidden;
       padding: 0 vw(10);
-      margin: 0 vw(10);
+      margin: 0 vw(8);
       box-sizing: border-box;
       background-image: url('@/assets/images/bg-3.png');
       background-size: 100% 100%;
@@ -300,5 +349,109 @@
       width: vw(50);
       z-index: 999;
     }
+    .count {
+      margin: vw(20) vw(20) 0 vw(20);
+      height: vh(24);
+      font-weight: bold;
+      font-size: vw(14);
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border-left: vw(4) solid #37d8fc;
+      border-right: vw(4) solid #37d8fc;
+      background: rgba(0, 150, 255, 0.19);
+    }
+    .cell {
+      margin-left: vw(10);
+      display: flex;
+      align-items: center;
+      .bg {
+        display: flex;
+        align-items: center;
+        height: vh(20);
+        padding-right: vw(10);
+        background: linear-gradient(to right, rgba(0, 150, 255, 0), rgba(0, 150, 255, 0.17) 100%);
+      }
+      .icon {
+        width: vw(26);
+        height: vh(28);
+        margin-right: vw(4);
+      }
+      .text {
+        font-weight: 400;
+        font-size: vw(14);
+        color: rgba(255, 255, 255, 0.9);
+      }
+      .progress {
+        width: vw(120);
+        margin-left: vw(4);
+      }
+      .man {
+        font-weight: bold;
+        font-size: vw(14);
+        color: #02f9fa;
+        margin-left: vw(10);
+      }
+      .woman {
+        font-weight: bold;
+        font-size: vw(14);
+        color: #f15a25;
+        margin-left: vw(10);
+      }
+    }
+    .ticket-box {
+      margin-top: vh(20);
+      width: 100%;
+      height: vh(106);
+      background-color: radial-gradient(to right, #0a4190 0%, rgba(0, 77, 136, 0.6) 100%);
+      .title {
+        width: vw(253);
+        height: vh(28);
+        display: flex;
+        align-items: center;
+        background-image: url('@/assets/images/title-5.png');
+        background-size: 100% 100%;
+        & > span {
+          padding-left: vw(22);
+          font-weight: bold;
+          font-size: vw(15);
+          background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
+          color: transparent; /* 兼容其他浏览器 */
+        }
+      }
+    }
+    .ticket-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      & > img {
+        width: vw(74);
+        height: vh(74);
+      }
+      & > div {
+        flex: 1;
+        height: vh(58);
+        display: flex;
+        align-items: center;
+        background-image: url('@/assets/images/ticket-item-bg.png');
+        background-size: 100% 100%;
+      }
+      .label {
+        padding-left: vw(10);
+        font-weight: 400;
+        font-size: vw(14);
+        color: rgba(255, 255, 255, 0.9);
+      }
+      .countup-wrap {
+        color: #02f9fa;
+        font-size: vw(28);
+        font-weight: bold;
+      }
+    }
   }
 </style>

src/views/scenic/components/ticket.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="ticket" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import * as echarts from 'echarts'
+  import { guid } from '@/utils/util'
+
+  let id = ref(guid())
+  let ticketChart = null
+  var qxzbData = [
+    {
+      name: '处理中',
+      value: 500,
+      full: 1000 // 最大值
+    },
+    {
+      name: '超期中',
+      value: 756,
+      full: 1000
+    },
+    {
+      name: '延期中',
+      value: 800,
+      full: 1000
+    }
+  ]
+  var returnData = function (qxzbData, name) {
+    for (var a = 0; a < qxzbData.length; a++) {
+      if (qxzbData[a].name == name) {
+        return qxzbData[a].value
+      }
+    }
+  }
+  let option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      formatter: function (rsp) {
+        if (rsp.name != '') {
+          return rsp.name + '<br/>' + rsp.marker + ' ' + rsp.value + ' （' + rsp.percent + '）'
+        }
+      }
+    },
+    legend: {
+      x: 'center',
+      y: 'bottom',
+      data: qxzbData,
+      itemHeight: fitChartSize(8),
+      itemWidth: fitChartSize(8),
+      itemGap: fitChartSize(20),
+      formatter: function (name) {
+        return '{title|' + name + '}  {value|' + returnData(qxzbData, name) + '}'
+      },
+      textStyle: {
+        rich: {
+          title: {
+            color: '#fff',
+            fontSize: fitChartSize(14)
+          },
+          value: {
+            color: '#00D5F6',
+            fontSize: fitChartSize(14)
+          }
+        }
+      }
+    },
+    color: ['#F15A25', '#01FEFE', '#12B5FD'],
+    series: [
+      {
+        name: qxzbData[0].name, //最里面的圈
+        type: 'pie',
+        clockWise: false, //顺时加载
+        radius: ['15%', '25%'],
+        center: ['50%', '40%'],
+        label: {
+          normal: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        itemStyle: {
+          emphasis: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: qxzbData[0].value,
+            name: qxzbData[0].name
+          },
+          {
+            value: qxzbData[0].full,
+            itemStyle: {
+              normal: {
+                color: '#07439C'
+              }
+            }
+          }
+        ]
+      },
+      {
+        name: qxzbData[1].name, //第二个圈
+        type: 'pie',
+        clockWise: false, //顺时加载
+        radius: ['35%', '45%'],
+        center: ['50%', '40%'],
+        label: {
+          normal: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        itemStyle: {
+          emphasis: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: qxzbData[1].value,
+            name: qxzbData[1].name
+          },
+          {
+            value: qxzbData[1].full,
+            itemStyle: {
+              normal: {
+                color: '#07439C'
+              }
+            }
+          }
+        ]
+      },
+      {
+        name: qxzbData[2].name, //最外层圈
+        type: 'pie',
+        clockWise: false, //顺时加载
+        radius: ['55%', '65%'],
+        center: ['50%', '40%'],
+        label: {
+          normal: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        itemStyle: {
+          emphasis: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: qxzbData[2].value,
+            name: qxzbData[2].name
+          },
+          {
+            value: qxzbData[2].full,
+            itemStyle: {
+              normal: {
+                color: '#07439C'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+  const init = () => {
+    ticketChart = echarts.init(document.getElementById(id.value))
+    ticketChart.setOption(option)
+  }
+  const resize = () => {
+    if (ticketChart) {
+      ticketChart.resize()
+    }
+  }
+  onMounted(() => {
+    init()
+    window.addEventListener('resize', resize)
+  })
+</script>
+
+<style scoped lang="scss">
+  .ticket {
+    width: 100%;
+    height: vh(300);
+  }
+</style>

src/views/scenic/components/top.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="top" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import * as echarts from 'echarts'
+  import { guid } from '@/utils/util'
+
+  let id = ref(guid())
+  let topChart = null
+  let colorList = [
+    'rgba(255, 38, 38, 1)',
+    'rgba(255, 96, 0, 1)',
+    'rgba(255, 165, 7, 1)',
+    'rgba(0, 234, 255, 1)',
+    'rgba(0, 132, 255, 1)',
+    '#2379FF'
+  ]
+  let colorListA = [
+    'rgba(255, 38, 38, 0.1)',
+    'rgba(255, 96, 0, 0.1)',
+    'rgba(255, 165, 7, 0.1)',
+    'rgba(0, 234, 255, 0.1)',
+    'rgba(0, 132, 255, 0.1)',
+    '#49B1FF'
+  ]
+  let result = [
+    { name: '河北', value: 86 },
+    { name: '山西', value: 83 },
+    { name: '河南', value: 73 },
+    { name: '内蒙', value: 61 },
+    { name: '辽宁', value: 61 }
+  ]
+  let option = {
+    color: colorList,
+    backgroundColor: 'transparent',
+    tooltip: {
+      show: false
+    },
+    legend: {
+      show: false
+    },
+    grid: {
+      left: '4%',
+      right: '4%',
+      top: '6%',
+      bottom: '4%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        splitLine: {
+          show: false
+        },
+        type: 'value',
+        show: false
+      }
+    ],
+    yAxis: [
+      {
+        splitLine: {
+          show: false
+        },
+        axisLine: {
+          show: false
+        },
+        type: 'category',
+        axisTick: {
+          show: false
+        },
+        data: result.map((item) => item.name),
+        axisLabel: {
+          show: false
+        }
+      },
+      {
+        type: 'category',
+        inverse: true,
+        axisTick: 'none',
+        axisLine: 'none',
+        show: true,
+        axisLabel: {
+          textStyle: {
+            color: '#fff',
+            fontSize: fitChartSize(12)
+          },
+          verticalAlign: 'bottom',
+          padding: [0, 0, 10, 0],
+          inside: true,
+          formatter: function (value) {
+            return `{value|${value}}`
+          },
+          rich: {
+            name: {
+              align: 'center',
+              color: '#D3E5FF',
+              fontSize: fitChartSize(14),
+              fontFamily: 'Source Han Sans CN'
+            },
+            value: {
+              align: 'center',
+              color: '#fff',
+              fontSize: fitChartSize(14),
+              fontFamily: 'Source Han Sans CN'
+            }
+          }
+        },
+        data: result.map((item) => item.value)
+      }
+    ],
+    series: [
+      {
+        name: '',
+        type: 'bar',
+        barWidth: fitChartSize(12),
+        MaxSize: 0,
+        showBackground: true,
+        barBorderRadius: [30, 0, 0, 30],
+        backgroundStyle: {
+          color: 'rgba(0, 150, 255, 0.15)'
+        },
+        label: {
+          show: true,
+          offset: [10, -17],
+          color: '#D3E5FF',
+          fontWeight: 500,
+          position: 'left',
+          align: 'left',
+          fontSize: fitChartSize(14),
+          fontFamily: 'Source Han Sans CN',
+          formatter: function (params) {
+            return params.data.name
+          }
+        },
+        data: result.map((item, index) => {
+          return {
+            name: item.name,
+            value: item.value,
+            itemStyle: {
+              barBorderRadius: [3, 0, 0, 3],
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: colorListA[index]
+                  },
+                  {
+                    offset: 1,
+                    color: colorList[index]
+                  }
+                ]
+              }
+            }
+          }
+        })
+      }
+    ]
+  }
+  const init = () => {
+    topChart = echarts.init(document.getElementById(id.value))
+    topChart.setOption(option)
+  }
+  const resize = () => {
+    if (topChart) {
+      topChart.dispose()
+      topChart = null
+      init()
+    }
+  }
+  onMounted(() => {
+    init()
+    window.addEventListener('resize', resize)
+  })
+</script>
+
+<style scoped lang="scss">
+  .top {
+    width: 100%;
+    height: vh(300);
+  }
+</style>

src/views/scenic/components/traffic-flow.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="traffic-flow" id="traffic-flow" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import * as echarts from 'echarts'
+
+  let trafficChart = null
+
+  let option = {
+    grid: {
+      left: '4%',
+      right: '4%',
+      top: '10%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: {
+      boundaryGap: true,
+      type: 'category',
+      data: ['河北', '山西', '河南', '内蒙', '辽宁'],
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(5, 72, 134, 1)'
+        }
+      },
+      axisLabel: {
+        fontSize: fitChartSize(12),
+        color: 'rgba(255,255,255,0.9)'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        fontSize: fitChartSize(12),
+        color: 'rgba(255,255,255,0.9)'
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: 'rgba(0, 150, 255,0.4)',
+          type: 'dashed'
+        }
+      }
+    },
+    series: [
+      {
+        data: [820, 932, 901, 934, 1290],
+        type: 'bar',
+        showBackground: true,
+        barWidth: fitChartSize(8),
+        itemStyle: {
+          barBorderRadius: [3, 3, 0, 0],
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(0, 208, 255, 0)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0, 208, 255, 1)'
+              }
+            ]
+          }
+        },
+        backgroundStyle: {
+          color: 'rgba(0, 150, 255, 0.15)'
+        }
+      }
+    ]
+  }
+  const init = () => {
+    trafficChart = echarts.init(document.getElementById('traffic-flow'))
+    trafficChart.setOption(option)
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (trafficChart) {
+      trafficChart.dispose()
+      trafficChart = null
+      init()
+    }
+  }
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style scoped lang="scss">
+  .traffic-flow {
+    width: vw(278);
+    height: vh(300);
+  }
+</style>

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

@@ -74,7 +74,7 @@
 					<div class="tp-item">3号摄像机</div>
 					<div class="tp-item item-bg-2">3号点位</div>
 				</div>
-				<div class="rt-text">严重拥堵</div>
+				<div class="rt-text rt-text-2">常规拥堵</div>
 			</div>
 			<div class="title-num">
 				<div class="item-box">
@@ -463,6 +463,10 @@
 					line-height: vh(40);
 					padding-left: vw(40);
 				}
+				.rt-text-2{
+					background-image: url('/src/assets/images/t-b-2.png');
+					background-size: 100% 100%;
+				}
 			}
 		}
 	}