From 676b88540e032cde4500b6b4356e770550f31062 Mon Sep 17 00:00:00 2001
From: yyl <279235553@qq.com>
Date: Wed, 10 Jan 2024 11:05:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=9C=80=E6=96=B0=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/App.vue                          |   6 +-
 ruoyi-ui/src/common/menuData.js               |   6 +
 .../components/dailyDisposal/index.vue        |   2 +-
 .../components/dayTotal/index.vue             |   2 +-
 .../components/eventQuery/assets/charts2.js   |  17 -
 .../components/eventQuery/index.vue           |  70 ++-
 .../components/eventSource/index.vue          |   2 +-
 .../components/monthStatistics/index.vue      |   2 +-
 .../components/railway/index.vue              |   2 +-
 .../components/railwayDay/index.vue           |   2 +-
 .../components/typeAnalysis/index.vue         |   2 +-
 .../components/roadNetwork/index.vue          |   2 +-
 .../components/weatherForecast/index.vue      |   2 +-
 .../components/TemperatureTrend/index.vue     |   2 +-
 .../components/visibilityTrends/index.vue     |   2 +-
 .../components/weaterData/index.vue           |   2 +-
 .../components/infoWarning/index.vue          |   2 +-
 .../components/infowWarningList/index.vue     |   2 +-
 .../classification/assets/charts.js           | 102 ++++-
 .../components/classification/index.vue       |  42 +-
 .../components/congestion/index.vue           |   2 +-
 .../components/flowstate/index.vue            |   2 +-
 .../components/heightway/index.vue            |   2 +-
 .../components/situation/index.vue            |   2 +-
 .../trafficFlow/components/traffic/index.vue  |   2 +-
 .../components/unblocked/index.vue            |   2 +-
 .../changesIndicators/assets/charts3.js       | 377 +++++++++++++++
 .../components/changesIndicators/index.vue    | 183 ++++++++
 .../composeFeatures/assets/charts.js          | 137 ++++++
 .../components/composeFeatures/index.vue      |  76 ++++
 .../components/congestionIndicator/index.vue  | 277 ++++++++++++
 .../components/crowding/assets/charts.js      | 137 ++++++
 .../components/crowding/index.vue             |  76 ++++
 .../roadIndicators/assets/chart1.js           | 111 +++++
 .../roadIndicators/assets/chart2.js           | 111 +++++
 .../roadIndicators/assets/chart3.js           | 111 +++++
 .../components/roadIndicators/index.vue       | 374 +++++++++++++++
 .../components/saturationMax/assets/charts.js | 137 ++++++
 .../components/saturationMax/index.vue        |  76 ++++
 .../trafficIndicators/ElQuarterPicker.vue     | 393 ++++++++++++++++
 .../trafficIndicators/assets/charts.js        | 160 +++++++
 .../trafficIndicators/assets/charts2.js       | 149 ++++++
 .../trafficIndicators/assets/charts3.js       | 208 +++++++++
 .../components/trafficIndicators/index.vue    | 428 ++++++++++++++++++
 .../trafficIndicators/progressBar.vue         | 195 ++++++++
 .../components/IndicatorAnalysis/index.vue    | 180 ++++++++
 .../perception/trafficSituation/index.vue     | 146 ++++++
 .../pages/perception/widgets/title/index.vue  |  21 +-
 48 files changed, 4296 insertions(+), 50 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/assets/chart1.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/assets/chart2.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/assets/chart3.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/ElQuarterPicker.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts3.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/index.vue

diff --git a/ruoyi-ui/src/App.vue b/ruoyi-ui/src/App.vue
index acf0ba9b..8299b2a0 100644
--- a/ruoyi-ui/src/App.vue
+++ b/ruoyi-ui/src/App.vue
@@ -10,13 +10,13 @@
   <div id="app">
     <router-view />
     <websocket />
-    <websocket_phone />
+    <!-- <websocket_phone /> -->
   </div>
 </template>
 
 <script>
 import websocket from "@/views/websocket";
-import websocket_phone from "@/views/websocket_phone";
+// import websocket_phone from "@/views/websocket_phone";
 export default {
   name: "App",
   data() {
@@ -26,7 +26,7 @@ export default {
   },
   components: {
     websocket,
-    websocket_phone
+    // websocket_phone
   },
   watch: {
     $route(to, from) {
diff --git a/ruoyi-ui/src/common/menuData.js b/ruoyi-ui/src/common/menuData.js
index 00a26945..d7432487 100644
--- a/ruoyi-ui/src/common/menuData.js
+++ b/ruoyi-ui/src/common/menuData.js
@@ -31,6 +31,12 @@ export default [
         name: "perceptionMeteorologyCheck",
         component: "perception/meteorologyCheck/index.vue",
       },
+      {
+        title: "交通态势分析",
+        path: "/perception/trafficSituation",
+        name: "perceptionTrafficSituation",
+        component: "perception/trafficSituation/index.vue",
+      }
     ],
   },
   {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
index 6f40aa2a..5afc5ba4 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="require('../../../widgets/title/assets/titleB04.png')"></WgtTitle>
+      <WgtTitle :title="'感知事件源分析'"></WgtTitle>
       <div class="board">
         <div class="charts" id="dailyDisposal"></div>
        </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
index 0dea5c9c..819bc403 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="require('../../../widgets/title/assets/titleB03.png')"></WgtTitle>
+      <WgtTitle :title="'日累计感知事件'"></WgtTitle>
       <div class="board">
         <div class="charts" id="daytotal"></div>
        </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
index 8dc15efb..f6326f19 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js
@@ -106,23 +106,6 @@ let data = [{
           right: -19,
           fontSize: 50,
           color: "#fff",
-          backgroundColor:new echarts.graphic.LinearGradient(
-            0,
-            0,
-            1,
-            0,
-            [
-              {
-                offset: 0,
-                color: "#5CC5FF55", // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: "#5CC5FF00", // 100% 处的颜色
-              },
-            ],
-            false
-          ),
            rich:{
               a:{
                   fontSize: 12,
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
index c915ce98..35741097 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="require('../../../widgets/title/assets/titleB07.png')"></WgtTitle>
+      <WgtTitle :title="'感知事件类型分析'" ></WgtTitle>
       <div class="board">
         <div class="searchPanel">
           <el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择">
@@ -59,6 +59,22 @@
   import chart3 from "./assets/charts3";
   import ElQuarterPicker from './ElQuarterPicker'
 
+  const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => {   
+  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
+	ctx.beginPath();    
+  ctx.fillStyle = gr;
+	ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);    
+	ctx.lineTo(width - radius + x, y);    
+	ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);    
+	ctx.lineTo(width + x, height + y - radius);    
+	ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);    
+	ctx.lineTo(radius + x, height +y);    
+	ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);    
+	ctx.closePath();    
+  //ctx.stroke();
+  ctx.fill()
+}
+
   export default {
     name: 'EventQuery',
     components: {
@@ -171,6 +187,58 @@
              myChart2.setOption(chart2);
              var myChart3 = echarts.init(document.getElementById('chart3'));
              myChart3.setOption(chart3);
+
+             
+        const domMap = document.getElementById("chart2");
+        let parentDiv = domMap.firstChild; 
+        // 创建canvas
+        let canvas = document.createElement('canvas');
+        canvas.width = parentDiv.offsetWidth;
+        canvas.height =parentDiv.offsetHeight;
+        parentDiv.appendChild(canvas);
+        const context = canvas.getContext('2d'); 
+        
+        // 填充渐变颜色
+        var gr = context.createLinearGradient(247, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+       
+      
+        context.lineWidth = 1; // 设置线段宽度
+      
+        // 绘制圆角矩形
+        drawRoundRect(context, 300, 78, 160, 24, 12,gr)
+         
+        var gr = context.createLinearGradient(240, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        drawRoundRect(context, 300, 148, 160, 24, 12,gr)
+         
+        var gr = context.createLinearGradient(240, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        drawRoundRect(context, 300, 218, 160, 24, 12,gr)
+        
+        var gr = context.createLinearGradient(400, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        
+
+        drawRoundRect(context, 460, 78, 160, 24, 12,gr)
+        var gr = context.createLinearGradient(350, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        drawRoundRect(context, 460, 148, 160, 24, 12,gr)
+        var gr = context.createLinearGradient(300, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        drawRoundRect(context, 460, 218, 160, 24, 12,gr)
         });
       });
     },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
index b31fca19..34948032 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="require('../../../widgets/title/assets/titleB04.png')"></WgtTitle>
+      <WgtTitle :title="'感知事件源分析'"></WgtTitle>
       <div class="board">
         <div class="charts" id="eventSource"></div>
        </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
index 8f091ac3..4414ea2d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="require('../../../widgets/title/assets/titleB06.png')"></WgtTitle>
+      <WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle>
       <div class="board">
         <div class="charts" id="monthStatistics"></div>
        </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
index e26bae9d..e4733b37 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='situation'>
-      <WgtTitle :title="require('../../../widgets/title/assets/titleB01.png')"></WgtTitle>
+      <WgtTitle :title="'路段感知事件排名'"></WgtTitle>
       <div class="board">
         <!-- <div class="tag">
           <div class="checked">路段车流量Top10</div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
index 1520a8c9..d7640c6c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='congestion'>
-    <WgtTitle :title="require('../../../widgets/title/assets/titleB02.png')"></WgtTitle>
+    <WgtTitle :title="'路段日感知事件'"></WgtTitle>
     <div class="board">
       <div class="charts" id="railwayDay"></div>
      </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
index 6ed951b8..d5e5483e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="require('../../../widgets/title/assets/titleB02.png')"></WgtTitle>
+      <WgtTitle :title="'感知事件类型分析'"></WgtTitle>
       <div class="board">
         <div class="charts" id="typeAnalysis"></div>
        </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/roadNetwork/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/roadNetwork/index.vue
index f66e5fc5..8396104f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/roadNetwork/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/roadNetwork/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="require('../../../widgets/title/assets/title_w01.png')"></WgtTitle>
+      <WgtTitle :title="'路网交通状况'"></WgtTitle>
       <div class="board">
         <div class="showRoad" >
             <div :class="it.type?it.type+' item':'item'" v-for="(it,index) in dataList" >
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue
index 1cae3717..cff12622 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherForecast/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="require('../../../widgets/title/assets/title_w02.png')"></WgtTitle>
+      <WgtTitle :title="'天气预报'"></WgtTitle>
       <div class="board">
         <div class="showRoad" >
            <div class="weaterIcon" >
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
index 5a414476..05bdf22e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="require('../../../../../widgets/title/assets/title_w2.png')"></WgtTitle>
+      <WgtTitle :title="'气温变化趋势'"></WgtTitle>
       <div class="board">
         <div class="charts" id="temperatureTrend"></div>
        </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue
index 9d06554f..e5753033 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="require('../../../../../widgets/title/assets/title_w1.png')"></WgtTitle>
+      <WgtTitle :title="'能见度变化趋势'"></WgtTitle>
       <div class="board">
         <div class="charts" id="VisibilityTrends"></div>
        </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue
index 3594fb11..99e5d046 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="require('../../../../../widgets/title/assets/title_w.png')"></WgtTitle>
+      <WgtTitle :title="'气象监测数据'"></WgtTitle>
       <div class="board">
         <div class="showRoad" >
             <div :class="it.type?it.type+' item':'item'" v-for="(it,index) in dataList" >
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue
index adff04b6..0447b5ae 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-        <WgtTitle :title="require('../../../../../widgets/title/assets/title_w02.png')"></WgtTitle>
+        <WgtTitle :title="'气象预警信息'"></WgtTitle>
       <div class="board">
          <div class="weaterMain" >
             <div class="weaterTitle" >
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue
index cd43bb50..d4e3a942 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-        <WgtTitle :title="require('../../../../../widgets/title/assets/title_w02.png')"></WgtTitle>
+        <WgtTitle :title="'能见度异常信息'"></WgtTitle>
       <div class="board">
          <div class="weaterMain" >
             <el-table
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
index 0241b732..a992f55b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/assets/charts.js
@@ -2,6 +2,47 @@
 import * as echarts from "echarts";
 let color = ['#4278F8F9', 'transparent','#5372C4F9', 'transparent', '#0046FFF9',  'transparent','#FB9434F9',  'transparent','#854101F9', 'transparent', '#05E599F9', 'transparent','#219F73F9', 'transparent','#7CEDD5F9', 'transparent',];
 let colorend = ['#4278F800', 'transparent', '#5372C400',  'transparent','#0046FF00', 'transparent', '#FB943400',  'transparent','#85410100',  'transparent','#05E59900', 'transparent','#219F7300', 'transparent','#7CEDD500', 'transparent',];
+const datas = [
+    {
+       name: '客1',
+       // num:''
+       value: 13456,
+    },
+    {
+       name: '客2',
+       value: 13456,
+    },
+    {
+       name: '客3',
+       value: 13456,
+    },
+    {
+        name: '专1',
+        // num:''
+        value: 13456,
+     },
+     {
+        name: '专2',
+        value: 13456,
+     },
+     {
+        name: '专3',
+        value: 13456,
+     },
+     {
+        name: '货1',
+        value: 13456,
+     },
+     {
+        name: '货2',
+        value: 13456,
+     },
+ ];
+
+ let sum = 0;
+for (var i of datas) {
+   sum += i.value;
+}
 
 var options = {
     tooltip: {
@@ -11,19 +52,71 @@ var options = {
     },
     legend: {
         orient: 'vertical',
-        right: 10,
+        right: 40,
+        top:50,
+        formatter:(name)=>{
+            let res = datas.filter(v => v.name === name);
+            let str = ''
+            str = '{name1|' + res[0].name + '}{name2|' + res[0].value + '}辆'+ '{name2|' + res[0].value/sum * 100 + '}%'
+            return str
+        },
+        icon: 'circle',
+        itemWidth:10,
+        itemHeight:10,
+        itemGap: 20,
+        borderRadius:50,
         itemStyle:{
+  
+        },
+        textStyle:{
+            rich:{
+                background: {
+                   background: '#DEDEDE',
+                   fontSize: 14,
+                   align: 'left',
+                   padding: [0, 10, 20, 0],
+                },
+                name1: {
+                   color: '#fff',
+                   fontSize: 14,
+                   Width: 12,
+                   align: 'left',
+                   padding: [0, 0, 0, 10],
+                },
+                name2: {
+                   color: '#37E7FF',
+                   fontSize: 14,
+                   align: 'left',
+                   padding: [0, 0, 0, 10],
+                },
+                value: {
+                   color: '#ccc',
+                   fontSize: 14,
+                   align: 'left',
+                },
+                title: {
+                   //  color: '#fff',
+                   color: "#C60020",
+                   fontWeight:'bold',
+                   fontSize: 40,
+                }
+            },
             color:"#fff",
         },
-        data: ['客1', '18-22℃', '18℃以下', '数据异常', 
-                '阀开', '强开', '阀关', '强关', '损坏']
+        data: [
+            {
+                name:'客1',
+                backgroundColor:'#5CC5FF',
+        }, '客2', '客3', '货1', 
+                '货2', '专1', '专2', '专3']
     },
     series: [
         {
-            name: '温度区间',
+            name: '',
             type: 'pie',
             selectedMode: 'single',
             radius: [0, '50%'],
+            center:['25%','50%'],
             label: {
                 normal: {
                     position: 'inner',
@@ -44,6 +137,7 @@ var options = {
             name: '',
             type: 'pie',
             radius: ['60%', '70%'],
+            center:['25%','50%'],
             label: {
                 position: 'inner',
                 show: false
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/index.vue
index 15ea8de6..5a72c9eb 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/classification/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='classification'>
-    <WgtTitle :title="require('../../../widgets/title/assets/title10.png')"></WgtTitle>
+    <WgtTitle :title="'全路车流量状况'"></WgtTitle>
     <div class="board">
       <!-- <div v-for="(item, index) in list" class="list">
           <div class="title">{{ item.label }}</div>
@@ -26,6 +26,22 @@
 import * as echarts from "echarts";
 import WgtTitle from '../../../widgets/title'
 import chartsStatistics from "./assets/charts";
+
+const drawRoundRect = ( ctx, x, y, width, height, radius ) => {   
+  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
+	ctx.beginPath();    
+	ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);    
+	ctx.lineTo(width - radius + x, y);    
+	ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);    
+	ctx.lineTo(width + x, height + y - radius);    
+	ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);    
+	ctx.lineTo(radius + x, height +y);    
+	ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);    
+	ctx.closePath();    
+  //ctx.stroke();
+  ctx.fill()
+}
+
 export default {
   name: 'Classification',
   components: {
@@ -63,6 +79,28 @@ export default {
         // var myChart2 = echarts.init(document.getElementById('busEchartBox2'));
         // myChart2.setOption(chartsStatistics);
 
+        const domMap = document.getElementById("classification");
+        let parentDiv = domMap.firstChild; 
+        // 创建canvas
+        let canvas = document.createElement('canvas');
+        canvas.width = parentDiv.offsetWidth;
+        canvas.height =parentDiv.offsetHeight;
+        parentDiv.appendChild(canvas);
+        const context = canvas.getContext('2d'); 
+        
+        // 填充渐变颜色
+        var gr = context.createLinearGradient(247, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        context.fillStyle = gr
+      
+        context.lineWidth = 1; // 设置线段宽度
+      
+        for (var i = 0;i < 8;i++)
+        // 绘制圆角矩形
+        drawRoundRect(context, 340, 50 + 34 * i, 300, 24, 12)
+        
       });
     });
   },
@@ -97,7 +135,7 @@ export default {
       display: inline-flex;
       width:100%;
       height:350px;
-      
+
     }
 
     .title {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/index.vue
index 9c394488..db54de35 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='congestion'>
-    <WgtTitle :title="require('../../../widgets/title/assets/title12.png')"></WgtTitle>
+    <WgtTitle :title="'在途车流量车型分类'"></WgtTitle>
     <div class="board">
       <div class="charts" id="congestionEchartBox"></div>
      </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue
index 4335d578..fc5600a3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='flowstate'>
-    <WgtTitle :title="require('../../../widgets/title/assets/title21.png')"></WgtTitle>
+    <WgtTitle :title="'全路车流量状况'"></WgtTitle>
     <div class="board">
       <div class="tag1">方向：济南</div>
       <div class="tag2">方向：菏泽</div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue
index 443d200b..55a2a836 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='heightway'>
-    <WgtTitle :title="require('../../../widgets/title/assets/title20.png')"></WgtTitle>
+    <WgtTitle :title="'交通路段状态'"></WgtTitle>
     <div class="board">
         <div class="searchPanel">
           <div >起始桩号：k</div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue
index 4654b49a..d0457f1f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/situation/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='situation'>
-    <WgtTitle :title="require('../../../widgets/title/assets/title00.png')"></WgtTitle>
+    <WgtTitle :title="'路段交通量情况'"></WgtTitle>
     <div class="board">
       <div class="tag">
         <div class="checked">路段车流量Top10</div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/traffic/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/traffic/index.vue
index 6b06702a..53743d41 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/traffic/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/traffic/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='traffic'>
-    <WgtTitle :title="require('../../../widgets/title/assets/title00.png')"></WgtTitle>
+    <WgtTitle :title="'路网交通状况'"></WgtTitle>
     <div class="board">
       <div v-for="(item, index) in list">
         <div>{{ item.label }}</div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/unblocked/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/unblocked/index.vue
index c4afea18..fe87acab 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/unblocked/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/unblocked/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class='unblocked'>
-    <WgtTitle :title="require('../../../widgets/title/assets/title11.png')"></WgtTitle>
+    <WgtTitle :title="'666'"></WgtTitle>
     <div class="uboard">
       <div class="charts" id="unblockedEchartBox"></div>
       <div class="content">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
new file mode 100644
index 00000000..a2c98960
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
@@ -0,0 +1,377 @@
+import * as echarts from "echarts";
+
+let xData = [
+    "1月",
+    "2月",
+    "3月",
+    "4月",
+    "5月",
+    "6月",
+    "7月",
+    "8月",
+    "9月",
+    "10月",
+    "11月",
+    "12月"
+  ];
+  let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
+  let data2= [120, 340, 750, 600, 400, 700, 900, 200, 540, 320, 370, 500];
+  let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
+  let options = {
+    tooltip: {
+      show:false,
+      trigger: "axis",
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+      },
+      textStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
+      borderColor: "rgba(3, 31, 71, .0)",
+      formatter: "健康监测<br>{b1}：{c1}人",
+    },
+    grid: {
+      left: "2%",
+      right: "4%",
+      top: "5%",
+      bottom: "5%",
+      containLabel: true,
+    },
+    xAxis: {
+      data: xData,
+      show: true,
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#1C82C5",
+        },
+      },
+      axisLabel: {
+        interval: 0,
+        align: "center",
+        rotate: "1",
+        margin: "20",
+        textStyle: {
+          fontSize: 12,
+          color: "#50A2C1",
+        },
+      },
+    },
+    yAxis: [
+      {
+        min: 0,
+        axisLine: {
+          lineStyle: {
+            color: "#1C82C5",
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(28, 130, 197, .3)",
+            type: "solid",
+          },
+        },
+        axisLabel: {
+          color: "#DEEBFF",
+          textStyle: {
+            fontSize: 12,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+    ],
+    legend: {
+      // orient: 'vertical',
+      icon: "circle",
+      itemHeight: 6,
+      itemWidth: 6,
+      top: "0%",
+      x: "80%",
+      textStyle: {
+        color: "#fff",
+      },
+    
+      data:[
+        {
+          name:"交通特征",
+          itemStyle:{
+            color:'#51BFA4',
+          },
+        },
+        {
+          name:"饱和度",
+          itemStyle:{
+            color:'#08BAF4',
+          },
+        },
+        {
+          name:"拥挤度",
+          itemStyle:{
+            color:'#E2BA74',
+          },
+        }
+      ],
+    },
+    series: [
+      {
+        name: "饱和度",
+        type: "bar",
+        barWidth: "10px",
+        selectedMode:false,
+        select:{
+          itemStyle:{
+            opacity: 1,
+            color: function (params) {
+              var a = params;
+             
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "#1AC5FD", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#003B4E", // 100% 处的颜色
+                  },
+                ],
+                false
+              );
+            },
+          },
+        },
+        itemStyle: {
+          // lenged文本
+          opacity: 0.6,
+          color: function (params) {
+            var a = params.name;
+            console.log("==========a=============",a);
+            return new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: "#1AC5FD", // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#003B4E", // 100% 处的颜色
+                },
+              ],
+              false
+            );
+          },
+        },
+        data: data2,
+      },
+      {
+        name: "",
+        type: "scatter",
+        emphasis: {
+           scale: false
+        },
+        symbol:
+           "image://data:image/png;base64,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",
+        symbolSize: [26, 26],
+        symbolOffset:['-85%',0],
+        itemStyle: {
+           color: "#FFF",
+           shadowColor: "rgba(0, 255, 254, 0.53)",
+           shadowBlur: 5,
+           borderWidth: 1,
+           opacity: 1
+        },
+        z: 1,
+        zlevel: 10,
+        left:'-100%',
+        data: data2,
+        animationDelay: 100
+      },
+      // 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
+      {
+        name: "交通特征",
+        type: "bar",
+        barWidth: "10px",
+        barGap: "120%",
+        selectedMode:false,
+        select:{
+          itemStyle:{
+            opacity: 1,
+            color: function (params) {
+              var a = params;
+             
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "#00E4BB53", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#00E4BB53", // 100% 处的颜色
+                  },
+                ],
+                false
+              );
+            },
+          },
+        },
+        itemStyle: {
+          // lenged文本
+          opacity: 0.6,
+          color: function (params) {
+            var a = params.name;
+            console.log("==========a=============",a);
+            return new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: "#00E4BB", // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#00E4BB00", // 100% 处的颜色
+                },
+              ],
+              false
+            );
+          },
+        },
+        data: data1,
+      },
+    // 进度条的小圆圈
+{
+  name: "",
+  type: "scatter",
+  emphasis: {
+     scale: false
+  },
+  symbol:
+     "image://data:image/png;base64,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",
+  symbolSize: [26, 26],
+  symbolOffset:['1%',0],
+  itemStyle: {
+     color: "#FFF",
+     shadowColor: "#00E4BB53",
+     shadowBlur: 5,
+     borderWidth: 1,
+     opacity: 1
+  },
+  z: 2,
+  zlevel: 10,
+  left:10,
+  data: data1,
+  animationDelay: 500
+},
+{
+  name: "拥挤度",
+  type: "bar",
+  barWidth: "10px",
+  selectedMode:false,
+  select:{
+    itemStyle:{
+      opacity: 1,
+      color: function (params) {
+        var a = params;
+       
+        return new echarts.graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1,
+          [
+            {
+              offset: 0,
+              color: "#1AC5FD", // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: "#003B4E", // 100% 处的颜色
+            },
+          ],
+          false
+        );
+      },
+    },
+  },
+  itemStyle: {
+    // lenged文本
+    opacity: 0.6,
+    color: function (params) {
+      var a = params.name;
+      console.log("==========a=============",a);
+      return new echarts.graphic.LinearGradient(
+        0,
+        0,
+        0,
+        1,
+        [
+          {
+            offset: 0,
+            color: "#FCBE39", // 0% 处的颜色
+          },
+          {
+            offset: 1,
+            color: "#FCBE3900", // 100% 处的颜色
+          },
+        ],
+        false
+      );
+    },
+  },
+  data: data2,
+},
+{
+  name: "",
+  type: "scatter",
+  emphasis: {
+     scale: false
+  },
+  symbol:
+     "image://data:image/png;base64,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",
+  symbolSize: [26, 26],
+  symbolOffset:['85%',0],
+  itemStyle: {
+     color: "#FCBE39",
+     shadowColor: "#FCBE3953",
+     shadowBlur: 5,
+     borderWidth: 1,
+     opacity: 1
+  },
+  z: 1,
+  zlevel: 10,
+  left:'-100%',
+  data: data2,
+  animationDelay: 100
+},
+    ],
+  };
+
+
+  export default options;
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue
new file mode 100644
index 00000000..86d08165
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue
@@ -0,0 +1,183 @@
+<template>
+    <div class='congestion'>
+        <WgtTitle :title="'指标变化情况'"></WgtTitle>
+      <div class="board">
+         <div id="ChangesIndictors" >
+
+         </div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import WgtTitle from '../../../../../widgets/title'
+  import * as echarts from "echarts";
+  import chartsStatistics from './assets/charts3';
+
+  export default {
+    name: 'ChangesIndictors',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+        tableData: [{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },
+        ]
+       }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+      selectItem(index){
+        this.selectIndex = index;
+      },
+    },
+    mounted() {
+   
+      setTimeout(() => {
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('ChangesIndictors'));
+          myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+
+    .showClass {
+        color:#00EBC1;
+    }
+
+  ::v-deep .el-table .cell {
+    padding-left:0px !important;
+  }
+
+  ::v-deep .el-table .el-table__header-wrapper th {
+    background-color: #064258 !important;
+    color:#00D1FF;
+    border-color: #064258 !important;
+    border:0px !important;
+    font-size:12px !important;
+  }
+
+  ::v-deep .el-table {
+    border:0px !important;
+    background-color: transparent;
+    font-size:12px !important;
+  }
+
+  ::v-deep .el-table__body-wrapper {
+    background-color: #064258;
+    color: #fff;
+  }
+
+  ::v-deep .el-table tr:hover td {
+    background: #1b2528 !important;
+    color:#00D1FF;
+  }
+
+  ::v-deep .el-table tr:nth-child(odd) td{
+    background-color: #13272F ;
+    border:0px !important; 
+  }
+  ::v-deep .el-table tr:nth-child(even) td{
+    border:0px !important; 
+  }
+
+  ::v-deep .el-table tr {
+    background-color: #133242 !important;
+    border-collapse:0;
+    border:0px !important;
+    background-color: transparent !important;
+  }
+
+  .congestion {
+    display: inline-flex;
+    width: 100%;
+    height: 310px;
+    flex-direction: column;
+
+    .board{
+      height: 280px;
+      width: 100%;
+      padding: 0px 0px;
+      border-radius: 5px 5px 5px 5px;
+      opacity: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: row;
+      margin-top:20px;
+
+      background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 93%);
+
+      #ChangesIndictors {
+         display: inline-flex;
+        height: 240px;
+        width: 100%;
+      }
+    }
+  }
+      .charts {
+        height:180px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js
new file mode 100644
index 00000000..a02bbe25
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js
@@ -0,0 +1,137 @@
+import * as echarts from "echarts";
+var options = {
+
+   color: ["#07A3FB"],
+   grid: {
+      left: "2%",
+      right: "5%",
+      bottom: "10%",
+      top: "10%",
+      containLabel: true,
+   },
+   legend: {
+      show:false,
+      icon: 'rect',
+      top: '0%',
+      right: '5%',
+      data: ['实时数据'],
+      itemWidth:18,
+      itemHeight: 5,
+      itemGap: 30,
+      itemStyle:{
+         color:"#FFD15C",
+      },
+      textStyle: {
+        fontSize: 12,
+        color: '#fff',
+        padding: [0, 0, 0, 10],
+      },
+   },
+   xAxis: {
+      type: "category",
+      axisLine: {
+         lineStyle: {
+            color: "#07A3FB",
+            fontSize: 12,
+         },
+      },
+      axisLabel: {
+         // interval:0,
+         color: "#BDD8FB",
+         fontSize: 12,
+      },
+      axisTick: {
+         show: false,
+      },
+      data: [
+         "1月",
+         "2月",
+         "3月",
+         "4月",
+         "5月",
+         "6月",
+         "7月",
+         "8月",
+         "9月",
+         "10月",
+         "11月",
+         "12月",
+      ],
+   },
+   yAxis: {
+      type: "value",
+      min: 0,
+      max:800,
+      minInterval: 100,
+      nameTextStyle: {
+         fontSize: 12,
+         color: "#BDD8FB",
+         align: "center",
+      },
+      splitLine: {
+         lineStyle: {
+            color: "#07A3FB",
+            // type: 'dashed', // dotted 虚线
+         },
+      },
+      splitArea: { show: false },
+      axisLine: {
+         show: false,
+      },
+      axisTick: {
+         show: false,
+      },
+      axisLabel: {
+         fontSize: 12,
+         fontFamily: "Bebas",
+         color: "#BDD8FB",
+      },
+   },
+   series: [
+      {
+         type: "line",
+         // symbol: "none",
+         showSymbol: false,
+         smooth: true, // 是否曲线
+         name: "实时数据", // 图例对应类别
+         data: [112, 122, 723, 623, 530, 612, 626,728, 531, 423 ,625, 423, 423], // 纵坐标数据
+         lineStyle :{
+            color:"#07A3FB"
+         },
+         areaStyle: {
+            // 区域颜色
+            // color: new graphic.LinearGradient(0, 0, 0, 1, [
+            // 	{
+            // 		offset: 0,
+            // 		color: "#5090FF",
+            // 	},
+            // 	{
+            // 		offset: 1,
+            // 		color: "#1057E5",
+            // 	},
+            // ]),
+            color: {
+               type: 'linear',
+               x: 0,  //右
+               y: 0,  //下
+               x2: 0,  //左
+               y2: 1,  //上
+               colorStops: [
+                  {
+                     offset: 0.1,
+                     color: '#07A3FB99' // 0% 处的颜色
+                  },
+                  {
+                     offset: 1,
+                     opacity:0.01,
+                     color: '#07A3FB00' // 100% 处的颜色
+                  }
+               ]
+            },
+         },
+      },
+     
+   ],
+};
+
+export default options;
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/index.vue
new file mode 100644
index 00000000..0d8d3520
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/index.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="'近一年交通组成特征指数最大值'"></WgtTitle>
+      <div class="board">
+        <div class="charts" id="composeFeatures"></div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  
+  import WgtTitle from '../../../../../widgets/title'
+  import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts";
+  export default {
+    name: 'ComposeFeatures',
+    components: {
+      WgtTitle
+    },
+    data() {
+      return {
+        myChart:null, 
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+      reiszeChart(){
+        this.$nextTick(() => {
+          if ( this.myChart ) {
+            this.myChart.resize();
+          }
+        });
+      }
+    },
+    update(){
+     
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          this.myChart = echarts.init(document.getElementById('composeFeatures'));
+          this.myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    .board{
+      height:150px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+      opacity: 0.8;
+      border: 1px solid;
+      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     
+    }
+  }
+      .charts {
+        height:120px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue
new file mode 100644
index 00000000..ea55ede4
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue
@@ -0,0 +1,277 @@
+<template>
+    <div class='congestion'>
+        <WgtTitle :title="'指标变化情况'"></WgtTitle>
+      <div class="board">
+         <div class="textStr" >
+            <div class="textbar action" >
+                拥挤度
+            </div>
+            <div class="textbar" >
+                饱和度
+            </div>
+            <div class="textbar" >
+                交通组成特征指数
+            </div>
+         </div>
+         <div class="bodySort" >
+             <div v-for="(it,index) in tableData"  class="sortItem" >
+                <span class="barTitle">
+                    TOP{{ index + 1 }}
+                </span>
+                <div class="text" >
+                    {{  it.name }}
+                </div>
+                <div class="lineHight" >
+                    <div class="inner" :style="{width:it.num/count * 100 + '%'}" >
+
+                    </div>
+                </div>
+                <span class="num">
+                    {{ it.num }}
+                </span>
+             </div>
+         </div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import WgtTitle from '../../../../../widgets/title'
+  import * as echarts from "echarts";
+
+
+  export default {
+    name: 'CongestionIndicator',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+        count:2000,
+        tableData: [{
+           name:"大学城-长清",
+           num:1036,
+        },{
+           name:"大学城-长清",
+           num:1036,
+        },
+        {
+           name:"大学城-长清",
+           num:1036,
+        },
+        {
+           name:"大学城-长清",
+           num:1036,
+        },
+        {
+           name:"大学城-长清",
+           num:1036,
+        },
+        {
+           name:"大学城-长清",
+           num:1036,
+        },
+        {
+           name:"大学城-长清",
+           num:1036,
+        }
+        ]
+       }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+      selectItem(index){
+        this.selectIndex = index;
+      },
+    },
+    mounted() {
+   
+      setTimeout(() => {
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('ChangesIndictors'));
+          myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+
+    .showClass {
+        color:#00EBC1;
+    }
+
+  ::v-deep .el-table .cell {
+    padding-left:0px !important;
+  }
+
+  ::v-deep .el-table .el-table__header-wrapper th {
+    background-color: #064258 !important;
+    color:#00D1FF;
+    border-color: #064258 !important;
+    border:0px !important;
+    font-size:12px !important;
+  }
+
+  ::v-deep .el-table {
+    border:0px !important;
+    background-color: transparent;
+    font-size:12px !important;
+  }
+
+  ::v-deep .el-table__body-wrapper {
+    background-color: #064258;
+    color: #fff;
+  }
+
+  ::v-deep .el-table tr:hover td {
+    background: #1b2528 !important;
+    color:#00D1FF;
+  }
+
+  ::v-deep .el-table tr:nth-child(odd) td{
+    background-color: #13272F ;
+    border:0px !important; 
+  }
+  ::v-deep .el-table tr:nth-child(even) td{
+    border:0px !important; 
+  }
+
+  ::v-deep .el-table tr {
+    background-color: #133242 !important;
+    border-collapse:0;
+    border:0px !important;
+    background-color: transparent !important;
+  }
+
+  .congestion {
+    display: inline-flex;
+    width: 100%;
+    height: 310px;
+    flex-direction: column;
+
+    .board{
+      height: 280px;
+      width: 100%;
+      padding: 0px 0px;
+      border-radius: 5px 5px 5px 5px;
+      opacity: 1;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      margin-top:20px;
+
+      background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 93%);
+
+      .bodySort {
+        position: relative;
+        display: inline-block;
+        width:100%;
+        height:100%;
+        overflow: auto;
+        padding:20px 10px;
+
+        >div:first-child {
+            .barTitle {
+                background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%);
+            }
+
+            .lineHight .inner {
+                background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%);
+            }
+        }
+
+        >div {
+            display: inline-flex;
+            width:95%;
+            height: 41px;
+            background: #0D517460;
+            border-radius: 0px 0px 0px 0px;
+            margin:5px;
+            font-size: 14px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            color: #FFFFFF;
+            align-items: center;
+
+
+            .barTitle {
+                position: relative;
+                display: inline-flex;
+                width: 48px;
+                height: 19px;
+                font-size: 14px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 500;
+                color: #FFFFFF;
+                background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%);
+                border-radius: 6px 6px 6px 6px;
+                opacity: 1;
+                justify-content: center;
+                align-items: center;
+                margin:0 10px;
+            }
+
+            .lineHight {
+                width: 60%;
+                height: 8px;
+                background: linear-gradient(180deg, #0BA7DA10 0%, #4FD3FF10 100%);
+                border-radius: 6px 6px 6px 6px;
+                opacity: 1;
+                margin:0 15px;
+
+                > .inner {
+                    display: inline-flex;
+                    height:8px;
+                    background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%);
+                    border-radius: 6px 6px 6px 6px;
+                    opacity: 1;
+                    position: relative;
+                    top:-7px;
+                }
+            }
+        }
+      }
+
+      .textStr {
+        display: inline-flex;
+        width:100%;
+        height:45px;
+        flex-direction: row;
+
+        > div {
+            display: inline-flex;
+            min-width: 80px;
+            height: 26px;
+            background: linear-gradient(180deg,  #005C7950 0%, #009BCC50 100%);
+            border-radius: 2px 2px 2px 2px;
+            opacity: 1;
+            color:#fff;
+            font-size: 12px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            color: #FFFFFF;
+            justify-content: center;
+            align-items: center;
+            margin-left:20px;
+            padding:0 15px;
+            cursor: pointer;
+        }
+
+        .action {
+            background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+        }
+      }
+    }
+  }
+      .charts {
+        height:180px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js
new file mode 100644
index 00000000..cc2e5b2e
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js
@@ -0,0 +1,137 @@
+import * as echarts from "echarts";
+var options = {
+
+   color: ["#E29E37"],
+   grid: {
+      left: "2%",
+      right: "5%",
+      bottom: "10%",
+      top: "10%",
+      containLabel: true,
+   },
+   legend: {
+      show:false,
+      icon: 'rect',
+      top: '0%',
+      right: '5%',
+      data: ['实时数据'],
+      itemWidth:18,
+      itemHeight: 5,
+      itemGap: 30,
+      itemStyle:{
+         color:"#FFD15C",
+      },
+      textStyle: {
+        fontSize: 12,
+        color: '#fff',
+        padding: [0, 0, 0, 10],
+      },
+   },
+   xAxis: {
+      type: "category",
+      axisLine: {
+         lineStyle: {
+            color: "#E29E37",
+            fontSize: 12,
+         },
+      },
+      axisLabel: {
+         // interval:0,
+         color: "#BDD8FB",
+         fontSize: 12,
+      },
+      axisTick: {
+         show: false,
+      },
+      data: [
+         "1月",
+         "2月",
+         "3月",
+         "4月",
+         "5月",
+         "6月",
+         "7月",
+         "8月",
+         "9月",
+         "10月",
+         "11月",
+         "12月",
+      ],
+   },
+   yAxis: {
+      type: "value",
+      min: 0,
+      max:800,
+      minInterval: 100,
+      nameTextStyle: {
+         fontSize: 12,
+         color: "#BDD8FB",
+         align: "center",
+      },
+      splitLine: {
+         lineStyle: {
+            color: "#E29E37",
+            // type: 'dashed', // dotted 虚线
+         },
+      },
+      splitArea: { show: false },
+      axisLine: {
+         show: false,
+      },
+      axisTick: {
+         show: false,
+      },
+      axisLabel: {
+         fontSize: 12,
+         fontFamily: "Bebas",
+         color: "#BDD8FB",
+      },
+   },
+   series: [
+      {
+         type: "line",
+         // symbol: "none",
+         showSymbol: false,
+         smooth: true, // 是否曲线
+         name: "实时数据", // 图例对应类别
+         data: [112, 122, 723, 623, 530, 612, 626,728, 531, 423 ,625, 423, 423], // 纵坐标数据
+         lineStyle :{
+            color:"#E29E37"
+         },
+         areaStyle: {
+            // 区域颜色
+            // color: new graphic.LinearGradient(0, 0, 0, 1, [
+            // 	{
+            // 		offset: 0,
+            // 		color: "#5090FF",
+            // 	},
+            // 	{
+            // 		offset: 1,
+            // 		color: "#1057E5",
+            // 	},
+            // ]),
+            color: {
+               type: 'linear',
+               x: 0,  //右
+               y: 0,  //下
+               x2: 0,  //左
+               y2: 1,  //上
+               colorStops: [
+                  {
+                     offset: 0.1,
+                     color: '#E29E3799' // 0% 处的颜色
+                  },
+                  {
+                     offset: 1,
+                     opacity:0.01,
+                     color: '#E29E3700' // 100% 处的颜色
+                  }
+               ]
+            },
+         },
+      },
+     
+   ],
+};
+
+export default options;
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/index.vue
new file mode 100644
index 00000000..5f9b5811
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/index.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="'近一年拥挤度最大值'"></WgtTitle>
+      <div class="board">
+        <div class="charts" id="Crowding"></div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  
+  import WgtTitle from '../../../../../widgets/title'
+  import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts";
+  export default {
+    name: 'Crowding',
+    components: {
+      WgtTitle
+    },
+    data() {
+      return {
+        myChart:null, 
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+      reiszeChart(){
+        this.$nextTick(() => {
+          if ( this.myChart ) {
+            this.myChart.resize();
+          }
+        });
+      }
+    },
+    update(){
+     
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          this.myChart = echarts.init(document.getElementById('Crowding'));
+          this.myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    .board{
+      height:150px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+      opacity: 0.8;
+      border: 1px solid;
+      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     
+    }
+  }
+      .charts {
+        height:120px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/assets/chart1.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/assets/chart1.js
new file mode 100644
index 00000000..89019d28
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/assets/chart1.js
@@ -0,0 +1,111 @@
+const value = [0,85]
+const rate = value[1] + '%'
+var options = {
+    title: {
+        text: rate,
+        left: 'center',
+        top: '30%',
+        itemGap:5,
+        textStyle: {
+            color: '#73FFC9',
+            fontSize: '22',
+            fontWeight: 600
+        },
+        subtext: '交通特征',
+        subtextStyle: {
+           color: '#fff',
+            fontSize: '12',
+            fontWeight: 600,
+        }
+    },
+    angleAxis: {
+        max: 100,
+        // 隐藏刻度线
+        show: false,
+        startAngle: 90,
+    },
+    radiusAxis: {
+        type: 'category',
+        show: true,
+        axisLabel: {
+            show: false,
+        },
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false
+        },
+    },
+    polar: {
+        radius: '150%' //图形大小
+    },
+    series: [
+        // 最内刻度线
+      {
+
+         type: "gauge",
+         radius: "85%",
+         clockwise: true,
+         startAngle: "90", 
+         endAngle: "-269.9999", 
+         splitNumber: 15, //线的条数
+         pointer: {
+            show: false
+         },
+         axisLine: {
+            show: false
+         },
+         axisTick: {
+            show: false
+         },
+         tooltip: {
+            show: false
+         },
+         splitLine: {
+            show: true,
+            length: 2,
+            lineStyle: {
+               color: "#73FFC9",
+               width: 1
+            }
+         },
+         axisLabel: {
+            show: false
+         }
+      },{
+        type: 'bar',
+        polar: {
+            center: ['50%', '50%'], // 中心（圆心）坐标
+            radius: '100%' //图形大小
+        },
+        coordinateSystem: 'polar',  // 使用极坐标坐标系
+        data: [value],
+        showBackground: true,
+        roundCap: true,
+        backgroundStyle: {
+            color: '#1A607750',
+        },
+        radius: "100%",
+        barWidth: 10,
+        itemStyle: {
+            normal: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: '#73FFC900'
+                    }, {
+                        offset: 1, color: '#73FFC9'
+                    }],
+                    global: false
+                }
+            }
+        },
+    }]
+}
+
+export default options;
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/assets/chart2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/assets/chart2.js
new file mode 100644
index 00000000..51af9f61
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/assets/chart2.js
@@ -0,0 +1,111 @@
+const value = 76
+const rate = value + '%'
+var options = {
+    title: {
+        text: rate,
+        left: 'center',
+        top: '30%',
+        itemGap:5,
+        textStyle: {
+            color: '#FFD25D',
+            fontSize: '22',
+            fontWeight: 600
+        },
+        subtext: '拥挤度',
+        subtextStyle: {
+           color: '#fff',
+            fontSize: '12',
+            fontWeight: 600,
+        }
+    },
+    angleAxis: {
+        max: 100,
+        // 隐藏刻度线
+        show: false,
+        startAngle: 90,
+    },
+    radiusAxis: {
+        type: 'category',
+        show: true,
+        axisLabel: {
+            show: false,
+        },
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false
+        },
+    },
+    polar: {
+        radius: '150%' //图形大小
+    },
+    series: [
+        // 最内刻度线
+      {
+
+         type: "gauge",
+         radius: "85%",
+         clockwise: true,
+         startAngle: "90", 
+         endAngle: "-269.9999", 
+         splitNumber: 15, //线的条数
+         pointer: {
+            show: false
+         },
+         axisLine: {
+            show: false
+         },
+         axisTick: {
+            show: false
+         },
+         tooltip: {
+            show: false
+         },
+         splitLine: {
+            show: true,
+            length: 2,
+            lineStyle: {
+               color: "#FFD25D",
+               width: 1
+            }
+         },
+         axisLabel: {
+            show: false
+         }
+      },{
+        type: 'bar',
+        polar: {
+            center: ['50%', '50%'], // 中心（圆心）坐标
+            radius: '100%' //图形大小
+        },
+        coordinateSystem: 'polar',  // 使用极坐标坐标系
+        data: [value],
+        showBackground: true,
+        roundCap: true,
+        backgroundStyle: {
+            color: '#1A607750',
+        },
+        radius: "100%",
+        barWidth: 10,
+        itemStyle: {
+            normal: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: '#FFD25D00'
+                    }, {
+                        offset: 1, color: '#FFD25D'
+                    }],
+                    global: false
+                }
+            }
+        },
+    }]
+}
+
+export default options;
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/assets/chart3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/assets/chart3.js
new file mode 100644
index 00000000..e6a4dfa5
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/assets/chart3.js
@@ -0,0 +1,111 @@
+const value = 56
+const rate = value + '%'
+var options = {
+    title: {
+        text: rate,
+        left: 'center',
+        top: '30%',
+        itemGap:5,
+        textStyle: {
+            color: '#16ABFF',
+            fontSize: '22',
+            fontWeight: 600
+        },
+        subtext: '饱和度',
+        subtextStyle: {
+           color: '#fff',
+            fontSize: '12',
+            fontWeight: 600,
+        }
+    },
+    angleAxis: {
+        max: 100,
+        // 隐藏刻度线
+        show: false,
+        startAngle: 90,
+    },
+    radiusAxis: {
+        type: 'category',
+        show: true,
+        axisLabel: {
+            show: false,
+        },
+        axisLine: {
+            show: false,
+        },
+        axisTick: {
+            show: false
+        },
+    },
+    polar: {
+        radius: '150%' //图形大小
+    },
+    series: [
+        // 最内刻度线
+      {
+
+         type: "gauge",
+         radius: "85%",
+         clockwise: true,
+         startAngle: "90", 
+         endAngle: "-269.9999", 
+         splitNumber: 15, //线的条数
+         pointer: {
+            show: false
+         },
+         axisLine: {
+            show: false
+         },
+         axisTick: {
+            show: false
+         },
+         tooltip: {
+            show: false
+         },
+         splitLine: {
+            show: true,
+            length: 2,
+            lineStyle: {
+               color: "#16ABFF",
+               width: 1
+            }
+         },
+         axisLabel: {
+            show: false
+         }
+      },{
+        type: 'bar',
+        polar: {
+            center: ['50%', '50%'], // 中心（圆心）坐标
+            radius: '100%' //图形大小
+        },
+        coordinateSystem: 'polar',  // 使用极坐标坐标系
+        data: [value],
+        showBackground: true,
+        roundCap: true,
+        backgroundStyle: {
+            color: '#1A607750',
+        },
+        radius: "100%",
+        barWidth: 10,
+        itemStyle: {
+            normal: {
+                color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [{
+                        offset: 0, color: '#16ABFF00'
+                    }, {
+                        offset: 1, color: '#16ABFF'
+                    }],
+                    global: false
+                }
+            }
+        },
+    }]
+}
+
+export default options;
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/index.vue
new file mode 100644
index 00000000..45ae9c13
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/index.vue
@@ -0,0 +1,374 @@
+<template>
+    <div class='congestion'>
+        <WgtTitle :title="'道路指标情况'"></WgtTitle>
+      <div class="board">
+         <div id="roadChart1" >
+
+         </div>
+         <div id="roadChart2" >
+
+        </div>
+        <div id="roadChart3" >
+
+        </div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import WgtTitle from '../../../../../widgets/title'
+  import chartsStatistics from './assets/chart1';
+  import chartsStatistics2 from './assets/chart2';
+  import chartsStatistics3 from './assets/chart3';
+  import * as echarts from "echarts";
+
+  export default {
+    name: 'RoadIndicators',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+        tableData: [{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },
+        ]
+       }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+      selectItem(index){
+        this.selectIndex = index;
+      },
+    },
+    mounted() {
+   
+      setTimeout(() => {
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('roadChart1'));
+          myChart.setOption(chartsStatistics);
+          var myChart2 = echarts.init(document.getElementById('roadChart2'));
+          myChart2.setOption(chartsStatistics2);
+          var myChart3 = echarts.init(document.getElementById('roadChart3'));
+          myChart3.setOption(chartsStatistics3);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+
+    .showClass {
+        color:#00EBC1;
+    }
+
+  ::v-deep .el-table .cell {
+    padding-left:0px !important;
+  }
+
+  ::v-deep .el-table .el-table__header-wrapper th {
+    background-color: #064258 !important;
+    color:#00D1FF;
+    border-color: #064258 !important;
+    border:0px !important;
+    font-size:12px !important;
+  }
+
+  ::v-deep .el-table {
+    border:0px !important;
+    background-color: transparent;
+    font-size:12px !important;
+  }
+
+  ::v-deep .el-table__body-wrapper {
+    background-color: #064258;
+    color: #fff;
+  }
+
+  ::v-deep .el-table tr:hover td {
+    background: #1b2528 !important;
+    color:#00D1FF;
+  }
+
+  ::v-deep .el-table tr:nth-child(odd) td{
+    background-color: #13272F ;
+    border:0px !important; 
+  }
+  ::v-deep .el-table tr:nth-child(even) td{
+    border:0px !important; 
+  }
+
+  ::v-deep .el-table tr {
+    background-color: #133242 !important;
+    border-collapse:0;
+    border:0px !important;
+    background-color: transparent !important;
+  }
+
+  .congestion {
+    display: inline-flex;
+    width: 100%;
+    height: 188px;
+    flex-direction: column;
+
+    .board{
+      height: 150px;
+      width: 100%;
+      padding: 0px 0px;
+      border-radius: 5px 5px 5px 5px;
+      opacity: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: row;
+      margin-top:20px;
+
+      background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 93%);
+
+      > div {
+        display: inline-flex;
+        width:33%;
+        height:100%;
+        position: relative;
+        top:-10px;
+      }
+
+      .warningList {
+        display: inline-flex;
+        flex-direction: column;
+        width:100%;
+        height:calc(100% - 40px);
+
+        >div {
+            display: inline-flex;
+            width:100%;
+            height:138px;
+            background: #133242;
+            border-radius: 2px 2px 2px 2px;
+            opacity: 1;
+            border: 1px solid;
+            border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1;
+            overflow: hidden;
+            margin-top:20px;
+            padding:23px 29px;
+            font-size: 14px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            color: #37E7FF;  
+
+            >.left-w {
+                display: inline-flex;
+                width:40%;
+                height:100%;
+                flex-direction: column;
+
+                .left-row {
+                    margin:2px;
+                    display: inline-flex;
+                    width:100%;
+                    height:30px;
+                    flex-direction: row;
+
+                    >.value {
+                        color:#fff;
+                    }
+
+                    .org {
+                            font-size: 14px;
+                            font-family: PangMenZhengDao, PangMenZhengDao;
+                            font-weight: 400;
+                            color: #F4A125
+                        }
+
+                }
+            }
+
+            >.right-w {
+                margin-left:30px;
+                display: inline-flex;
+                width:100%;
+                height:100%;
+                flex-direction: column;
+
+                .right-row {
+                    margin-bottom: 10px;
+                }
+                
+                .right-text {
+                    color:#fff;
+                }
+            }
+
+        }
+      }
+
+      .weaterMain {
+        display: inline-flex;
+        flex-direction: row;
+        width:100%;
+        height: 40px;
+
+       
+        .buttons {
+            width:100%;
+            height:38px;
+            >div {
+                display: inline-flex;
+                width:10%;
+                height:35px;
+                justify-content: center;
+                align-items: center;
+                font-size: 12px;
+                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-weight: 800;
+                color: #FFFFFF;
+                z-index: 9;
+            }
+
+            >div::after {
+                content: "";
+                position: absolute;
+                display: inline-flex;
+                width: 55px;
+                height: 36px;
+                background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%);
+                border-radius: 50%;
+                opacity: 1;  
+                z-index:-1;
+            }
+
+            .redSel::after {
+                background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%);
+            }
+
+            .yelSel::after {
+                background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%);
+            }
+
+            .bluSel::after {
+                background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%);
+            }
+
+            .orgSel::after{
+                background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%);
+            }
+        }
+
+        .weaterTitle::after {
+            content: "";
+            position: absolute;
+            top:0px;
+            left:0px;
+            width:100%;
+            height:2px;
+            background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%);
+            border-radius: 0px 0px 0px 0px;
+            opacity: 1;
+        }
+        .weaterTitle::before {
+            content: "";
+            position: absolute;
+            top:38px;
+            left:0px;
+            width:100%;
+            height:2px;
+            background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%);
+            border-radius: 0px 0px 0px 0px;
+            opacity: 1;
+        }
+
+        .weaterTitle {
+            position: relative;
+            display: inline-flex;
+            width: 277px;
+            height: 38px;
+            background: linear-gradient(269deg, rgba(55,231,255,0) 6%, rgba(55,231,255,0.6) 50%, rgba(55,231,255,0) 92%);
+            border-radius: 0px 0px 0px 0px;
+            opacity: 1;
+            justify-content: center;
+            align-items: center;
+
+            >span.text {
+                display: inline-flex;
+                font-size: 16px;
+                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-weight: 400;
+                color: #FFFFFF; 
+            }
+
+          
+            .num {
+                display: inline-flex;
+                justify-content: center;
+            align-items: center;
+                font-size: 22px;
+                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-weight: 400;
+                color: #D9001B;
+            }
+        }
+      }
+
+    }
+  }
+      .charts {
+        height:180px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js
new file mode 100644
index 00000000..38574b1e
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js
@@ -0,0 +1,137 @@
+import * as echarts from "echarts";
+var options = {
+
+   color: ["#32BB8A", "#01B3E4"],
+   grid: {
+      left: "2%",
+      right: "5%",
+      bottom: "10%",
+      top: "10%",
+      containLabel: true,
+   },
+   legend: {
+      show:false,
+      icon: 'rect',
+      top: '0%',
+      right: '5%',
+      data: ['实时数据'],
+      itemWidth:18,
+      itemHeight: 5,
+      itemGap: 30,
+      itemStyle:{
+         color:"#FFD15C",
+      },
+      textStyle: {
+        fontSize: 12,
+        color: '#fff',
+        padding: [0, 0, 0, 10],
+      },
+   },
+   xAxis: {
+      type: "category",
+      axisLine: {
+         lineStyle: {
+            color: "#32BB8A",
+            fontSize: 12,
+         },
+      },
+      axisLabel: {
+         // interval:0,
+         color: "#BDD8FB",
+         fontSize: 12,
+      },
+      axisTick: {
+         show: false,
+      },
+      data: [
+         "1月",
+         "2月",
+         "3月",
+         "4月",
+         "5月",
+         "6月",
+         "7月",
+         "8月",
+         "9月",
+         "10月",
+         "11月",
+         "12月",
+      ],
+   },
+   yAxis: {
+      type: "value",
+      min: 0,
+      max:800,
+      minInterval: 100,
+      nameTextStyle: {
+         fontSize: 12,
+         color: "#BDD8FB",
+         align: "center",
+      },
+      splitLine: {
+         lineStyle: {
+            color: "#32BB8A",
+            // type: 'dashed', // dotted 虚线
+         },
+      },
+      splitArea: { show: false },
+      axisLine: {
+         show: false,
+      },
+      axisTick: {
+         show: false,
+      },
+      axisLabel: {
+         fontSize: 12,
+         fontFamily: "Bebas",
+         color: "#BDD8FB",
+      },
+   },
+   series: [
+      {
+         type: "line",
+         // symbol: "none",
+         showSymbol: false,
+         smooth: true, // 是否曲线
+         name: "实时数据", // 图例对应类别
+         data: [112, 122, 723, 623, 530, 612, 626,728, 531, 423 ,625, 423, 423], // 纵坐标数据
+         lineStyle :{
+            color:"#32BB8A"
+         },
+         areaStyle: {
+            // 区域颜色
+            // color: new graphic.LinearGradient(0, 0, 0, 1, [
+            // 	{
+            // 		offset: 0,
+            // 		color: "#5090FF",
+            // 	},
+            // 	{
+            // 		offset: 1,
+            // 		color: "#1057E5",
+            // 	},
+            // ]),
+            color: {
+               type: 'linear',
+               x: 0,  //右
+               y: 0,  //下
+               x2: 0,  //左
+               y2: 1,  //上
+               colorStops: [
+                  {
+                     offset: 0.1,
+                     color: '#32BB8A99' // 0% 处的颜色
+                  },
+                  {
+                     offset: 1,
+                     opacity:0.01,
+                     color: '#32BB8A01' // 100% 处的颜色
+                  }
+               ]
+            },
+         },
+      },
+     
+   ],
+};
+
+export default options;
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/index.vue
new file mode 100644
index 00000000..5fa590b3
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/index.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="'近一年饱和度最大值'"></WgtTitle>
+      <div class="board">
+        <div class="charts" id="temperatureTrend"></div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  
+  import WgtTitle from '../../../../../widgets/title'
+  import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts";
+  export default {
+    name: 'SaturationMax',
+    components: {
+      WgtTitle
+    },
+    data() {
+      return {
+        myChart:null,
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+      reiszeChart(){
+        this.$nextTick(() => {
+          if ( this.myChart ) {
+            this.myChart.resize();
+          }
+        });
+      }
+    },
+    update(){
+     
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          this.myChart = echarts.init(document.getElementById('temperatureTrend'));
+          this.myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    .board{
+      height:150px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+      opacity: 0.8;
+      border: 1px solid;
+      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     
+    }
+  }
+      .charts {
+        height:120px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/ElQuarterPicker.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/ElQuarterPicker.vue
new file mode 100644
index 00000000..65cd0296
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/ElQuarterPicker.vue
@@ -0,0 +1,393 @@
+<template>
+    <div class="el-quarter-picker">
+      <el-popover
+        v-model="visible"
+        :disabled="!canPopover"
+        :tabindex="null"
+        placement="bottom-start"
+        transition="el-zoom-in-top"
+        trigger="click">
+   
+        <div class="el-date-picker">
+          <div class="el-picker-panel__body">
+            <div class="el-date-picker__header el-date-picker__header--bordered" style="margin:0px; line-height:30px">
+              <button
+                type="button"
+                @click="clickLast"
+                aria-label="前一年"
+                class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"></button>
+              <span role="button" class="el-date-picker__header-label" @click="clickYear">{{ title }}</span>
+              <button
+                type="button"
+                @click="clickNext"
+                aria-label="后一年"
+                class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
+            </div>
+            <div class="el-picker-panel__content" style="margin:0px; width:100%">
+              <table class="el-month-table" style="">
+                <tbody>
+                <tr v-for="line in lineCount" :key="line">
+                  <td v-for="index in (line * 4 <= viewList.length ? 4 : viewList.length - (line - 1) * 4)" :key="index" :class="{ today: viewList[(line - 1) * 4 + index - 1].current, current: viewList[(line - 1) * 4 + index - 1].active }">
+                    <div><a class="cell" @click="clickItem(viewList[(line - 1) * 4 + index - 1])">{{ viewList[(line - 1) * 4 + index - 1].label }}</a></div>
+                  </td>
+                </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+   
+        <el-input
+          slot="reference"
+          @change="changeText"
+          @mouseenter.native="mouseEnter"
+          @mouseleave.native="mouseLeave"
+          :placeholder="placeholder"
+          v-model="text"
+          :size="size"
+          :readonly="!canEdit"
+          :disabled="disabled">
+          <i slot="prefix" class="el-input__icon el-icon-date"></i>
+          <i slot="suffix" class="el-input__icon el-icon-circle-close" v-show="showClear" style="cursor:pointer" @click.stop="clear"></i>
+        </el-input>
+      </el-popover>
+    </div>
+  </template>
+   
+  <script>
+  export default {
+    name: 'ElQuarterPicker',
+    props: {
+      placeholder: {
+        type: String,
+        default: ''
+      },
+      size: {
+        type: String,
+        default: ''
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      clearable: {
+        type: Boolean,
+        default: true
+      },
+      editable: {
+        type: Boolean,
+        default: true
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      format: {
+        type: String,
+        default: 'yyyy年第Q季度'
+      },
+      valueFormat: {
+        type: String,
+        default: 'yyyy-qq'
+      },
+      value: {
+        type: String,
+        default: ''
+      }
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    },
+    watch: {
+      value(val) {
+        // console.log('change-------', val)
+        this.changeValue(val)
+      },
+      readonly(val) {
+        this.canEdit = !val && this.editable
+        this.canPopover = !this.disabled && !val
+      },
+      editable(val) {
+        this.canEdit = !this.readonly && val
+      },
+      disabled(val) {
+        this.canPopover = !val && !this.readonly
+      }
+    },
+    data() {
+      return {
+        visible: false,
+        showClear: false, // 控制清空按钮展示
+        canEdit: true, // 是否可编辑
+        canPopover: true, // 选择器弹出是否可用
+        text: '', // 文本框值
+        viewType: 1, // 视图类型，1季度，2年度
+        viewYear: 0, // 当前年份
+        viewList: [], // 数据列表
+        lineCount: 0, // 数据行数
+        title: '', // 选择器标题
+        data: [0, 0] // 当前选择年度-季度
+      }
+    },
+    mounted() {
+      // console.log('mounted--------', this.value)
+      this.changeValue(this.value)
+   
+      // 设置文本框是否可编辑
+      this.canEdit = !this.readonly && this.editable
+      this.canPopover = !this.disabled && !this.readonly
+   
+      // 监听按键(上下左右键可以切换季度)
+      document.onkeydown = (event) => {
+        if (this.visible) {
+          const data = [this.data[0], this.data[1]]
+          if (data[0] < 1 || data[1] < 1) {
+            // 以当前季度为标准
+            const curDate = new Date()
+            data[0] = curDate.getFullYear()
+            data[1] = parseInt(curDate.getMonth() / 3) + 1
+          }
+          if (event.code === 'ArrowLeft') {
+            // 上一个季度
+            if (data[1] === 1) {
+              data[0] = data[0] - 1
+              data[1] = 4
+            } else {
+              data[1] = data[1] - 1
+            }
+          } else if (event.code === 'ArrowRight') {
+            // 下一个季度
+            if (data[1] === 4) {
+              data[0] = data[0] + 1
+              data[1] = 1
+            } else {
+              data[1] = data[1] + 1
+            }
+          } else if (event.code === 'ArrowUp') {
+            // 上一年季度
+            data[0] = data[0] - 1
+          } else if (event.code === 'ArrowDown') {
+            // 下一年季度
+            data[0] = data[0] + 1
+          } else {
+            return
+          }
+   
+          // 超过年限的不处理
+          if (data[0] < 1000 || data[0] > 9999) {
+            return
+          }
+          this.data = data
+          this.viewType = 1
+          this.viewYear = data[0]
+          this.$emit('change', this.formatTo(data, this.valueFormat))
+        }
+      }
+    },
+    destroyed() {
+      document.onkeydown = null
+    },
+    methods: {
+      // 季度文本变更
+      changeText() {
+        if (this.checkFormat(this.format, this.text)) {
+          // 设置值
+          this.formatFrom(this.text, this.format)
+          this.$emit('change', this.formatTo(this.data, this.valueFormat))
+        } else {
+          // 输入了无效的格式，还原回原来的值
+          if (this.data[0] < 1 || this.data[1] < 1) {
+            this.text = ''
+          } else {
+            this.text = this.formatTo(this.data, this.format)
+          }
+        }
+        this.visible = false
+      },
+      // 鼠标进入
+      mouseEnter() {
+        if (!this.disabled && !this.readonly && this.clearable && this.text !== '') {
+          this.showClear = true
+        }
+      },
+      // 鼠标离开
+      mouseLeave() {
+        if (!this.disabled && this.clearable) {
+          this.showClear = false
+        }
+      },
+      // 清除季度
+      clear() {
+        this.showClear = false
+        this.visible = false
+        this.$emit('change', '')
+      },
+      // 季度值变更
+      changeValue(val) {
+        this.viewType = 1
+        if (val) {
+          // 反向格式化
+          this.formatFrom(val, this.valueFormat)
+          this.text = this.formatTo(this.data, this.format)
+          this.viewYear = this.data[0]
+        } else {
+          this.text = ''
+          this.data = [0, 0]
+          this.viewYear = new Date().getFullYear()
+        }
+        this.initView()
+      },
+      // 初始化视图数据
+      initView() {
+        const list = []
+        const curDate = new Date()
+        const curYear = curDate.getFullYear()
+        const curQuarter = parseInt(curDate.getMonth() / 3) + 1
+        if (this.viewType === 1) {
+          let index = 0
+          for (const i of '一二三四') {
+            index++
+            const item = { label: '第' + i + '季度', year: this.viewYear, quarter: index, current: false, active: false }
+            if (this.viewYear === curYear && index === curQuarter) {
+              item.current = true
+            } else if (this.viewYear === this.data[0] && index === this.data[1]) {
+              item.active = true
+            }
+            list.push(item)
+          }
+          this.title = this.viewYear + ' 年'
+        } else {
+          const start = parseInt(this.viewYear / 10) * 10
+          this.viewYear = start
+          for (let i = 0; i < 10; i++) {
+            const year = start + i
+            const item = { label: year + '', year: year, current: false, active: false }
+            if (year === curYear) {
+              item.current = true
+            } else if (year === this.data[0]) {
+              item.active = true
+            }
+            list.push(item)
+          }
+          this.title = start + ' 年 - ' + (start + 9) + ' 年'
+        }
+        this.viewList = list
+        this.lineCount = parseInt(list.length / 4)
+        if (list.length % 4 > 0) {
+          this.lineCount++
+        }
+      },
+      // 校验季度格式是否正确
+      checkFormat(pattern, val) {
+        // 格式转成正则表达式
+        let text = ''
+        for (const char of pattern) {
+          const dict = '\\^$.+?*[]{}!'
+          if (dict.indexOf(char) === -1) {
+            text += char
+          } else {
+            text += '\\' + char
+          }
+        }
+        text = text.replace('yyyy', '[1-9]\\d{3}')
+        text = text.replace('qq', '0[1-4]')
+        text = text.replace('q', '[1-4]')
+        text = text.replace('Q', '[一二三四]')
+        text = '^' + text + '$'
+        const patt = new RegExp(text)
+        return patt.test(val)
+      },
+      // 格式化季度到指定格式
+      formatTo(data, pattern) {
+        let text = pattern.replace('yyyy', '' + data[0])
+        text = text.replace('qq', '0' + data[1])
+        text = text.replace('q', '' + data[1])
+        text = text.replace('Q', '一二三四'.substr(data[1] - 1, 1))
+        return text
+      },
+      // 以指定格式解析季度
+      formatFrom(str, pattern) {
+        const year = this.findText(str, pattern, 'yyyy')
+        const quarter = this.findText(str, pattern, ['qq', 'q', 'Q'])
+        this.data = [year, quarter]
+      },
+      // 查找文本数值
+      findText(str, pattern, find) {
+        if (find instanceof Array) {
+          for (const f of find) {
+            const val = this.findText(str, pattern, f)
+            if (val !== -1) {
+              return val
+            }
+          }
+          return -1
+        }
+        const index = pattern.indexOf(find)
+        if (index === -1) {
+          return index
+        }
+        const val = str.substr(index, find.length)
+        if (find === 'Q') {
+          return '一二三四'.indexOf(val) + 1
+        } else {
+          return parseInt(val)
+        }
+      },
+      // 年份点击
+      clickYear() {
+        if (this.viewType !== 1) {
+          return
+        }
+        // 切换年度选择器
+        this.viewType = 2
+        this.initView()
+      },
+      // 季度选择
+      clickItem(item) {
+        // console.log('select--------', item)
+        if (this.viewType === 1) {
+          // 选择季度
+          this.$emit('change', this.formatTo([item.year, item.quarter], this.valueFormat))
+          this.visible = false
+        } else {
+          // 选择年度
+          this.viewType = 1
+          this.viewYear = item.year
+          this.initView()
+        }
+      },
+      // 上一年
+      clickLast() {
+        if (this.viewYear > 1000) {
+          if (this.viewType === 1) {
+            this.viewYear--
+            this.initView()
+          } else {
+            this.viewYear = this.viewYear - 10
+            this.initView()
+          }
+        }
+      },
+      // 下一年
+      clickNext() {
+        if (this.viewYear < 9999) {
+          if (this.viewType === 1) {
+            this.viewYear++
+            this.initView()
+          } else {
+            this.viewYear = this.viewYear + 10
+            this.initView()
+          }
+        }
+      }
+    }
+  }
+  </script>
+   
+  <style>
+    .el-quarter-picker {
+      width: 180px;
+      display: inline-block;
+    }
+  </style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
new file mode 100644
index 00000000..6d43ac32
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
@@ -0,0 +1,160 @@
+
+/* 数据 */
+let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别
+let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903  ]; // 人数
+var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"]
+/* 数据整合 */
+let dataList = [];
+nameList.map((item, index) => {
+   if (index === 4) {
+      dataList.push({
+         name: item,
+         value: valueList[index],
+         itemStyle: {
+            color: {
+               type: 'linear',
+               x: 0,
+               y: 0,
+               x2: 0,
+               y2: 1,
+               colorStops: [{
+                  offset: 0, color: '#FFB904' // 0% 处的颜色
+               }, {
+                  offset: 1, color: '#FF6969' // 100% 处的颜色
+               }],
+               global: false // 缺省为 false
+            },
+            borderRadius: 6
+         },
+         label: { show: false }
+      })
+   } else {
+      dataList.push({
+         name: item,
+         value: valueList[index],
+         itemStyle:{
+            borderRadius: 6
+         }
+      })
+   }
+})
+
+var options = {
+   legend: {
+      // orient: 'vertical',
+      icon: "circle",
+      itemHeight: 8,
+      itemWidth: 8,
+      top: "5%",
+      x: "right",
+      textStyle: {
+        color: "#fff",
+      },
+    },
+   grid: {
+      top: '25%',//上边距
+      right: '0',//右边距
+      left: '0',//左边距
+      bottom: "0%",//下边距
+      containLabel: true,
+   },
+   xAxis: {
+      type: 'category',
+      data: nameList,
+      axisTick: {
+         show: false //隐藏X轴刻度
+      },
+      axisLine: {
+         lineStyle: {
+            color: "rgba(49, 217, 255, 0.8)"
+         }
+      },
+      axisLabel: {
+         show: true,
+         color: '#B6E6FF',
+         fontSize:8,
+         fontFamily: 'Source Han Sans CN-Regular',
+      },
+   },
+   yAxis: [{
+      type: 'value',
+      name: "",
+      max: 1200,
+      min:0,
+      splitNumber:5,
+      nameTextStyle: {
+         color: '#B6E6FF',
+         fontSize: 13,
+         fontFamily: 'Source Han Sans CN-Regular',
+         align: "left",
+         verticalAlign: "center",
+      },
+      axisLabel: {
+         fontSize: 13,
+         color: '#B6E6FF',
+         fontFamily: 'HarmonyOS Sans-Regular',
+         // formatter:function(value,index){
+         //    return yList[index]
+         // }
+      },
+      axisLine: {
+         show: false,
+      },
+      axisTick: {
+         show: false
+      },
+      splitLine: {
+         lineStyle: {
+            color: 'rgba(49, 217, 255, 0.5)',
+         }
+      },
+   }],
+   series: [
+      {
+         name: '交通特征',
+         type: 'line',
+         symbol: 'circle',
+         symbolSize: 0,
+
+         // yAxisIndex: 1, // 与第二个 y 轴关联
+         itemStyle: {
+           color: '#32BB8A',
+         },
+         lineStyle: {
+           width:2,
+         },
+         data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据
+       },
+       {
+         name: '饱和度',
+         type: 'line',
+         symbol: 'circle',
+         symbolSize: 0,
+
+         // yAxisIndex: 1, // 与第二个 y 轴关联
+         itemStyle: {
+           color: '#07A3FB',
+         },
+         lineStyle: {
+           width: 2,
+         },
+         data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
+       },
+       {
+         name: '拥挤度',
+         type: 'line',
+         symbol: 'circle',
+         symbolSize: 0,
+         // yAxisIndex: 1, // 与第二个 y 轴关联
+         itemStyle: {
+           color: '#E2BA74',
+         },
+         lineStyle: {
+           width: 2,
+         },
+         data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
+       },
+   ]
+}
+
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js
new file mode 100644
index 00000000..96fed411
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js
@@ -0,0 +1,149 @@
+import * as echarts from "echarts";
+
+function contains(arr, val) {
+  var i = arr.length;
+  while (i--) {
+      if (arr[i].name === val) {
+          return i;
+      }
+  }
+  return false;
+}
+let list = [
+  {
+      name: '交通特征',
+      max: 88,
+  },
+  {
+      name: '拥挤度',
+      max: 88,
+  },
+  {
+      name: '饱和度',
+      max:188,
+  },
+];
+let data1 = [[80, 50, 55, 80, 50, 80, 48, 43]];
+let data2 = [[60, 60, 65, 60, 70, 40, 80, 63]];
+let options = {
+ 
+  tooltip: {
+      show: true,
+      trigger: 'item',
+      formatter: (data) => {
+          // console.log(data.seriesIndex);
+          var tip = '<h5 class="echarts-tip-h5">' + data.seriesName + '</h5>';
+          let tmpData = [];
+          if (data.seriesIndex === 0) {
+              tmpData = data1;
+          } else if (data.seriesIndex === 1) {
+              tmpData = data2;
+          }
+          console.log(tmpData)
+          data.value.forEach((item, index) => {
+              // console.log(list[index].name)
+              tip += '<div>';
+              tip += '<div>' + list[index].name + ': '+ tmpData[0][index] + '万</div>'
+              tip += '</div>';
+          });
+          return tip;
+      },
+  },
+  // legend: {
+  //     show: true,
+  //     icon: 'circle',
+  //     left: '15%',
+  //     top: '3%',
+  //     orient: 'horizontal',
+  //     textStyle: {
+  //         fontSize: 14,
+  //         color: '#fff',
+  //     },
+  //     data: ['数据1', '数据2'],
+  // },
+  radar: {
+      name: {
+          textStyle: {
+              color: '#fff',
+              fontSize: 16,
+          },
+          rich: {
+              a: {
+                  fontSize: 16,
+                  color: '#FFFFFF',
+                  padding: [0, 0, 8, 0],
+              },
+              b: {
+                  fontSize: 18,
+                  color: '#ACD3FF',
+              },
+          },
+          formatter: (a) => {
+              let i = contains(list, a); // 处理对应要显示的样式
+              return `{a| ${a}}`;
+          },
+      },
+      center: ['50%', '50%'],
+      radius: '60%',
+      startAngle: 90,
+      splitNumber: 5,
+      shape: 'circle',
+      splitArea: {
+          areaStyle: {
+              color: [ '#07A3FB99','#07A3FB8010', '#07A3FB30','#07A3FB60','#07A3FB80'],
+          },
+      },
+      axisLabel: {
+          show: false,
+      },
+      axisLine: {
+          show: false,
+      },
+      splitLine: {
+          show: true,
+          lineStyle: {
+              color: 'rgba(50, 72, 130, 0.4)',
+          },
+      },
+      indicator: list,
+  },
+  series: [
+      {
+          name: '数据1',
+          type: 'radar',
+          symbol: 'circle',
+          symbolSize: 3,
+          areaStyle: {
+              normal: {
+                  color: new echarts.graphic.LinearGradient(
+                      0,
+                      1,
+                      0,
+                      0,
+                      [
+                          {
+                              offset: 0,
+                              color: '#DC6A00',
+                          },
+                          {
+                              offset: 1,
+                              color: '#099CCD',
+                          },
+                      ],
+                      false
+                  ),
+              },
+          },
+          itemStyle: {
+              color: 'rgba(245, 166, 35, 0.2)',
+              borderColor: 'rgba(235, 171, 86, 00)',
+              borderWidth: 10,
+          },
+          data: data1,
+      },
+  ],
+};
+
+
+
+export default options;
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts3.js
new file mode 100644
index 00000000..fceb5480
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts3.js
@@ -0,0 +1,208 @@
+import * as echarts from "echarts";
+
+let xData = [
+    "1月",
+    "2月",
+    "3月",
+    "4月",
+    "5月",
+    "6月",
+    "7月",
+    "8月",
+    "9月",
+    "10月",
+    "11月",
+    "12月"
+  ];
+  let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
+  let options = {
+    tooltip: {
+      show:false,
+      trigger: "axis",
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+      },
+      textStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
+      borderColor: "rgba(3, 31, 71, .1)",
+      formatter: "健康监测<br>{b1}：{c1}人",
+    },
+    grid: {
+      left: "2%",
+      right: "4%",
+      top: "5%",
+      bottom: "5%",
+      containLabel: true,
+    },
+    xAxis: {
+      data: xData,
+      show: true,
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: "#fff",
+        },
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#1C82C5",
+        },
+      },
+      axisLabel: {
+        interval: 0,
+        align: "center",
+        rotate: "1",
+        margin: "20",
+        textStyle: {
+          fontSize: 12,
+          color: "#50A2C1",
+        },
+      },
+    },
+    yAxis: [
+      {
+        min: 0,
+        axisLine: {
+          lineStyle: {
+            color: "#1C82C5",
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(28, 130, 197, .3)",
+            type: "solid",
+          },
+        },
+        axisLabel: {
+          color: "#DEEBFF",
+          textStyle: {
+            fontSize: 12,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+    ],
+    legend: {
+      show: false,
+      top: "5%",
+      left: "50%",
+      textStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      itemGap: 12, // 设置间距
+    },
+    series: [
+      // 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
+      {
+        name: "种植面积",
+        type: "bar",
+        barWidth: "10px",
+        barGap: "-100%",
+        selectedMode:true,
+        select:{
+          itemStyle:{
+            opacity: 1,
+            color: function (params) {
+              var a = params;
+             
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "#01D5BC", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#003B4E", // 100% 处的颜色
+                  },
+                ],
+                false
+              );
+            },
+          },
+        },
+        itemStyle: {
+          // lenged文本
+          opacity: 0.6,
+          color: function (params) {
+            var a = params.name;
+            console.log("==========a=============",a);
+            if ( a == "6月" ) {
+                return new echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: "#01D5BC", // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: "#003B4E", // 100% 处的颜色
+                      },
+                    ],
+                    false
+                  );
+            } else
+            return new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: "#61D8FF", // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#003B4E", // 100% 处的颜色
+                },
+              ],
+              false
+            );
+          },
+        },
+        data: data1,
+      },
+    // 进度条的小圆圈
+{
+  name: "小圈圈",
+  type: "scatter",
+  emphasis: {
+     scale: false
+  },
+  symbol:
+     "image://data:image/png;base64,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",
+  symbolSize: [26, 26],
+  itemStyle: {
+     color: "#FFF",
+     shadowColor: "rgba(0, 255, 254, 0.53)",
+     shadowBlur: 5,
+     borderWidth: 1,
+     opacity: 1
+  },
+  z: 2,
+  zlevel: 10,
+  data: data1,
+  animationDelay: 500
+}
+    ],
+  };
+
+
+  export default options;
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
new file mode 100644
index 00000000..b8cc3996
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
@@ -0,0 +1,428 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="'交通指标分析'" ></WgtTitle>
+      <div class="board">
+        <!-- <div class="searchPanel">
+          <el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择">
+            <el-option
+              v-for="item in areaOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择">
+            <el-option
+              v-for="item in yearOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <el-date-picker
+          size="mini"
+          v-if="year != 'quarter'"
+          class="selectRoad"
+            v-model="dateTime"
+            style="width:140px;"
+            :type="year"
+            placeholder="请选择"
+        />
+        <el-quarter-picker  size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" aria-placeholder="请选季度" />
+
+          <el-button type="primary" size="mini" class="btnSearch"  icon="el-icon-search">查询</el-button>
+          <el-button class="btnReset"  size="mini" icon="el-icon-refresh-left" >重置</el-button>
+        </div> -->
+        <ProgressBar  :dataList="dataList"  class="progressbar" :selectIndex="7" />
+        <div class="body" >
+          <div  style="width:70%" >
+            <div class="searchPanel_1" >
+            <el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择">
+            <el-option
+              v-for="item in areaOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择">
+            <el-option
+              v-for="item in yearOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <el-date-picker
+          size="mini"
+          v-if="year != 'quarter'"
+          class="selectRoad"
+            v-model="dateTime"
+            style="width:140px;"
+            :type="year"
+            placeholder="请选择"
+        />
+        <el-quarter-picker  size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" aria-placeholder="请选季度" />
+
+          <el-button type="primary" size="mini" class="btnSearch"  icon="el-icon-search">查询</el-button>
+          <el-button class="btnReset"  size="mini" icon="el-icon-refresh-left" >重置</el-button>
+        </div>
+           <div  id="chart1" ></div>
+          </div>
+          <div  class="chartOrg" >
+              <div  class="itemChart"   >
+                <div  class="title">上月指标</div>
+                <div id="chart2" ></div>
+              </div>
+              <div  class="itemChart"   >
+                <div  class="title">上月指标</div>
+                <div id="chart3" ></div>
+              </div>
+          </div>
+        </div>
+
+      </div>  
+
+    </div>
+  </template>
+  
+  <script>
+  
+  import WgtTitle from '../../../../../widgets/title'
+  import ProgressBar from './progressBar.vue';
+  import * as echarts from "echarts";
+  import chart1 from "./assets/charts";
+  import chart2 from "./assets/charts2";
+  import chart3 from "./assets/charts3";
+  import ElQuarterPicker from './ElQuarterPicker'
+
+  const drawRoundRect = ( ctx, x, y, width, height, radius ,gr) => {   
+  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
+	ctx.beginPath();    
+  ctx.fillStyle = gr;
+	ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);    
+	ctx.lineTo(width - radius + x, y);    
+	ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);    
+	ctx.lineTo(width + x, height + y - radius);    
+	ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);    
+	ctx.lineTo(radius + x, height +y);    
+	ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);    
+	ctx.closePath();    
+  //ctx.stroke();
+  ctx.fill()
+}
+
+  export default {
+    name: 'EventQuery',
+    components: {
+      WgtTitle,
+      ProgressBar,
+      ElQuarterPicker
+    },
+    data() {
+      return {
+        yearOptions:[
+        {
+            value: 'year',
+           label: '年'
+        },{
+            value: 'month',
+           label: '月'
+        },
+        {
+            value: 'date',
+           label: '日'
+        },
+        {
+            value: 'quarter',
+           label: '季'
+        },],
+        areaOptions: [{
+          value: '济南',
+          label: '济南'
+        }, {
+          value: '菏泽',
+          label: '菏泽'
+      }],
+      dateTime:"",
+      area: '济南',
+      dataList:[
+        {
+          title:"殷家林枢纽"
+        },
+        {
+          title:"大学城立交"
+        },
+        {
+          title:"长清立交"
+        },
+        {
+          title:"松竹枢纽"
+        },
+        {
+          title:"孝里立交"
+        },
+        {
+          title:"平阴立交"
+        },
+        {
+          title:"孔村枢纽"
+        },
+        {
+          title:"平阴南立交"
+        },
+        {
+          title:"魏雪枢纽"
+        },
+        {
+          title:"东平立交"
+        },
+        {
+          title:"东平湖枢纽"
+        },
+        {
+          title:"韩岗立交"
+        },
+        {
+          title:"梁山立交"
+        },
+        {
+          title:"鄄郓枢纽"
+        },
+        {
+          title:"嘉祥西立交"
+        },
+        {
+          title:"王官屯枢纽"
+        }
+      ],
+      quarter:"",
+      year:"2024",
+        list:[
+          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
+          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
+          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
+          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
+          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'},
+          {name:'大学城-长清', direction:'济南方向', state:"正常",speed:'108.14km/h', follow:'161'}
+        ]
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+  
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+            var myChart1 = echarts.init(document.getElementById('chart1'));
+             myChart1.setOption(chart1);
+             var myChart2 = echarts.init(document.getElementById('chart2'));
+             myChart2.setOption(chart2);
+             var myChart3 = echarts.init(document.getElementById('chart3'));
+             myChart3.setOption(chart2);
+
+             
+        const domMap = document.getElementById("chart2");
+        let parentDiv = domMap.firstChild; 
+        // 创建canvas
+        let canvas = document.createElement('canvas');
+        canvas.width = parentDiv.offsetWidth;
+        canvas.height =parentDiv.offsetHeight;
+        parentDiv.appendChild(canvas);
+        const context = canvas.getContext('2d'); 
+        
+        // 填充渐变颜色
+        var gr = context.createLinearGradient(247, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+       
+      
+        context.lineWidth = 1; // 设置线段宽度
+      
+        // 绘制圆角矩形
+        drawRoundRect(context, 300, 78, 160, 24, 12,gr)
+         
+        var gr = context.createLinearGradient(240, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        drawRoundRect(context, 300, 148, 160, 24, 12,gr)
+         
+        var gr = context.createLinearGradient(240, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        drawRoundRect(context, 300, 218, 160, 24, 12,gr)
+        
+        var gr = context.createLinearGradient(400, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        
+
+        drawRoundRect(context, 460, 78, 160, 24, 12,gr)
+        var gr = context.createLinearGradient(350, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        drawRoundRect(context, 460, 148, 160, 24, 12,gr)
+        var gr = context.createLinearGradient(300, 63, 450, 0);
+        // 颜色断点
+        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        drawRoundRect(context, 460, 218, 160, 24, 12,gr)
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+
+.progressbar {
+    margin:10px;
+              
+ }
+
+  .congestion {
+    width: 100%;
+    .body {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: 395px;
+        width:100%;
+        font-size: 14px;
+
+     
+        
+        > div {
+            display: inline-flex;
+            flex-direction: column;
+            height:100%;
+            width:33%;
+            margin-right:20px;
+            border: 1px solid;
+             border-image: linear-gradient(360deg, rgba(55, 231, 255,0.1), rgba(55, 231, 255, 0)) 1 1;
+            background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #064258 100%);
+            padding: 10px;
+        }
+
+        .chartOrg {
+          flex-direction: row !important;
+
+          >div {
+            display: inline-flex;
+            flex-direction: column;
+            width:50%;
+            height:100%;
+          }
+
+          .itemChart {
+
+            >.title {
+              display: inline-flex;
+              width:100%;
+              height:30px;
+              font-size: 16px;
+              font-family: PingFang SC, PingFang SC;
+              font-weight: 500;
+              color: #30BFEC;
+            }
+
+            #chart2 {
+              display: inline-flex;
+              width:100%;
+              height:100%;
+            }
+
+            #chart3 {
+              display: inline-flex;
+              width:100%;
+              height:100%;
+            }
+          }
+        }
+
+        #chart1 {
+          display: inline-flex;
+            height:100%;
+            width:100%;
+        }
+      }
+
+    .board{
+      height:320px;
+      width: 100%;
+      padding:10px 0px;
+    
+      border-radius: 5px 5px 5px 5px;
+      opacity: 1;
+     
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: column;
+
+  
+      .searchPanel_1{
+        position:absolute;
+        display: flex;
+        align-items: center;
+        height: 40px;
+        width:100%;
+        font-size: 14px;
+        margin-bottom: 10px;
+    div{
+      white-space: nowrap;
+      margin-right: 4px;
+    }
+    .inputZh{
+      width: 47px;
+      ::v-deep{
+        .el-input__inner{
+          background-color: #064258 !important;
+          border-width: 0px !important;
+        }
+      }
+    }
+    .inputJl{
+      margin-left: 5px;
+      margin-right: 10px;
+    }
+    .selectRoad{
+      width:89px;
+      border:1px solid #00B3CC;
+      ::v-deep{
+        .el-input__inner{
+          background-color: #064258 !important;
+          border-width: 0px !important;
+        }
+      }
+    }
+    .btnSearch{
+      background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+      margin-left: 10px;
+      border-color: transparent;
+    }
+    .btnReset{
+      background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);;
+      border-color: transparent;
+      color: white;
+    }
+   }
+
+    }
+  }
+      .charts {
+        height:100px;
+        width: 100%;
+      }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue
new file mode 100644
index 00000000..7951fbe0
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue
@@ -0,0 +1,195 @@
+<template>
+    <div class='congestion'>
+       <div :style="{width: dataList.length * 300}" >
+        <div :class="selectIndex == index?selectLine < 1?'item action Abefore':'item action Aafter':selectIndex + selectLine == index?selectLine < 1?'item action Aafter':'item action Abefore':'item'" v-for="(item,index) in dataList"   :key="index"  >
+            <i class="after" @click="selectItem(index,-1)"></i>
+            <i class="before" @click="selectItem(index,+1)" ></i>
+            <span></span>
+            <div>{{ item.title }}</div>
+        </div>
+        </div> 
+    </div>
+  </template>
+  
+  <script>
+import { number } from 'echarts';
+
+
+  export default {
+    name: 'ProgressBar',
+    components: {
+    },
+    props:{
+        dataList:{
+            type:Array,
+            default: () => {
+                return []
+            }
+        },
+    },
+    data() {
+      return {
+        selectIndex:0,
+        selectLine:-1,
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+        selectItem(index,num){
+            this.selectIndex = index;
+            this.selectLine = num
+        }
+    },
+    mounted() {
+      
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    height:35px;
+    display: inline-flex;
+    flex-direction: row;
+
+    > div {
+        position: relative;
+        width: 100%;
+        height:35px;
+        display: inline-flex;
+        flex-direction: row;  
+
+        >.item .after {
+            position: absolute;
+            display: inline-flex;
+            left:0px;
+            top:-5px;
+            width:45px !important;
+            height:35px !important;
+            background-color: transparent;
+            cursor: pointer;
+        }
+
+        >.item .after::after {
+            content: "";
+            position: absolute;
+            display: inline-flex;
+            left:0px;
+            top:8px;
+            width:45px !important;
+            height:3px !important;
+            background-color: #C7C7C7;
+        }
+
+        >.item .before {
+            position: absolute;
+            display: inline-flex;
+            right:0px;
+            top:-5px;
+            width:45px;
+            height:35px;
+            background-color: transparent;
+            cursor: pointer;
+        }
+
+        >.item .before::after {
+            content: "";
+            position: absolute;
+            display: inline-flex;
+            left:0px;
+            top:8px;
+            width:45px !important;
+            height:3px !important;
+            background-color: #C7C7C7;
+        }
+
+        .item.action .after::after {
+            background-color: #72FDC9 ;
+        }
+
+        .item.action.Aafter  .after::after{
+            background-color: #C7C7C7  !important;
+        }
+
+       > .item.action.Aafter .before::after {
+            background-color: #72FDC9 ;
+        }
+
+        > .item.action.Abefore .after::after {
+            background-color: #72FDC9 ;
+        }
+
+        > .bef::before {
+            background-color: #72FDC9 !important;
+        }
+
+        > .aft::after {
+            background-color: #72FDC9 !important;
+        }
+
+        > .item.action span {
+            background-color: #72FDC9 ;
+            cursor: pointer;
+        }
+
+        > .item.action span::after {
+            border-color: #72FDC9 ;
+        }
+
+        > .action div {
+            color:#72FDC9 !important;
+        }
+        
+
+        >.item {
+            position: relative;
+            width: 180px;
+            height:35px;
+            display: inline-flex;
+            flex-direction: column;
+            justify-items: center;
+           
+
+            >span {
+                position: absolute;
+                display:inline-flex;
+                width: 9px;
+                height: 9px;
+                background: #C7C7C7;
+                border-radius: 50%;
+                opacity: 1;
+                left:53px;
+            }
+
+            >div {
+                position: relative;
+                display:inline-flex;
+                width:100%;
+                align-items: center;
+                justify-content: center;
+                top: 5px;
+                margin-top:10px;
+                color:#C7C7C7;
+            }
+
+            >span::after {
+                content: "";
+                position: absolute;
+                display:inline-flex;
+                width: 15px;
+                height: 15px;
+                border:1px solid #C7C7C7;
+                border-radius: 50%;
+                opacity: 1;
+                top:-3.5px;
+                left:-3px;
+            }
+        }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue
new file mode 100644
index 00000000..08046b04
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue
@@ -0,0 +1,180 @@
+<template>
+    <div class='TrafficFlow'>
+      <section class="content">
+          <RoadIndicators class="content-l" />
+          <SaturationMax class="content-l" />
+          <Crowding class="content-l" />
+          <ComposeFeatures class="content-l" />
+        </section>
+        <section   class="content" >
+          <TrafficIndicators class="content-max" />
+        </section>
+        <section   class="foot" >
+          <ChangesIndictors class="foot-l" />
+          <CongestionIndicator class="foot-r" />
+        </section>  
+    </div>
+  </template>
+  
+  <script> 
+  import RoadIndicators from './components/roadIndicators';
+  import SaturationMax from './components/saturationMax';
+  import Crowding from './components/crowding';
+  import ComposeFeatures from './components/composeFeatures';
+  import TrafficIndicators from './components/trafficIndicators';
+  import ChangesIndictors from './components/changesIndicators';
+  import CongestionIndicator from './components/congestionIndicator';
+
+  export default {
+    name: 'IndicatorAnalysis',
+    components: {
+      RoadIndicators,
+      SaturationMax,
+      Crowding,
+      ComposeFeatures,
+      TrafficIndicators,
+      ChangesIndictors,
+      CongestionIndicator,
+    },
+    data(){
+        return {
+            activeName:"first"
+        }
+    },
+    methods:{
+      changeTabs(){
+        
+      }
+    }
+    
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+
+   ::v-deep .el-tabs__item{
+    display: inline-flex;
+    justify-content: center;
+    font-size: 16px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    min-width:128px;
+    position: relative;
+    left:10px;
+   }
+
+   ::v-deep .el-tabs__active-bar {
+    min-width:128px;
+   }
+
+   ::v-deep .el-tabs__nav-wrap::after {
+    background-color: #133242;
+    opacity: 0.1;
+   }
+
+   .footTabs {
+     display: inline;
+     width:99%;
+
+   }
+
+
+   .content {
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-between;
+    pointer-events: none;
+    margin-top: 19px;
+    margin-left:19px;
+    >div {
+      pointer-events: auto;
+    }
+
+    .content-w {
+      width:66.5%;
+    }
+
+    .content-max {
+      width:100%;
+
+    }
+
+    .content-l {
+      width: 25%;
+      margin-left:0px;
+    }
+
+  }
+
+  .TrafficFlow {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 6;
+    color: white;
+  
+
+    .content {
+      width: 100%;
+      margin: auto;
+      display: flex;
+      flex: 1;
+      pointer-events: none;
+      margin-top: 19px;
+    
+  
+      .content-l {
+        width: calc(50%);
+        min-width:460px;
+        margin-right:20px;
+
+      }
+  
+  
+      .content-m {
+        display: inline-flex;
+        flex-direction: column;
+        width: calc(100% / 4 );
+        margin-right:20px;
+
+        .content-m-t {
+            width:100%;
+            height:240px;
+            margin-bottom: 20px;
+        }
+      }
+      .content-r {
+        width: 30%;
+      }
+    }
+    .foot{
+      width: 100%;
+      margin: auto;
+      display: flex;
+      flex: 1;
+      pointer-events: none;
+      margin-top: 8px;
+      >div {
+        pointer-events: auto;
+      }
+
+      .foot-w {
+        width:100%;
+
+      }
+  
+      .foot-l {
+        width: 67%;
+      }
+      .foot-m {
+        width: 613px;
+      }
+      .foot-r {
+        margin-left:20px;
+        width: 33%;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/index.vue
new file mode 100644
index 00000000..5c1934de
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/index.vue
@@ -0,0 +1,146 @@
+<template>
+    <div class='TrafficFlowMax'>
+        <el-tabs class="footTabs" v-model="activeName"  @tab-click="changeTabs">
+            <el-tab-pane label="综合指标分析" name="first">
+              <IndicatorAnalysis />
+            </el-tab-pane>
+            <el-tab-pane label="综合指标查询" name="second">
+             
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+  </template>
+  
+  <script> 
+  import IndicatorAnalysis from './components/IndicatorAnalysis';
+
+  export default {
+    name: 'trafficSituation',
+    components: {
+      IndicatorAnalysis
+    },
+    data(){
+        return {
+            activeName:"first"
+        }
+    },
+    methods:{
+      changeTabs(){
+        
+      }
+    }
+    
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+
+   ::v-deep .el-tabs__item{
+    display: inline-flex;
+    justify-content: center;
+    font-size: 16px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    min-width:128px;
+    position: relative;
+    left:10px;
+   }
+
+   ::v-deep .el-tabs__active-bar {
+    min-width:128px;
+   }
+
+   ::v-deep .el-tabs__nav-wrap::after {
+    background-color: #133242;
+    opacity: 0.1;
+   }
+
+   ::v-deep .el-tabs__header {
+    margin:0px !important;
+   }
+
+   .footTabs {
+     display: inline;
+     width:99%;
+
+   }
+
+  .TrafficFlowMax {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 6;
+    color: white;
+    padding: 15px 25px;
+  
+    .head{
+      width: 98%;
+      margin: auto;
+      margin-top: 15px;
+    }
+    .content {
+      width: 98%;
+      margin: auto;
+      display: flex;
+      flex: 1;
+      pointer-events: none;
+      margin-top: 19px;
+      >div {
+        pointer-events: auto;
+      }
+  
+      .content-l {
+        width: calc(50%);
+        min-width:460px;
+        margin-right:20px;
+
+      }
+  
+  
+      .content-m {
+        display: inline-flex;
+        flex-direction: column;
+        width: calc(100% / 4 );
+        margin-right:20px;
+
+        .content-m-t {
+            width:100%;
+            height:240px;
+            margin-bottom: 20px;
+        }
+      }
+      .content-r {
+        width: 49.4%;
+      }
+    }
+    .foot{
+      width: 98%;
+      margin: auto;
+      display: flex;
+      justify-content: space-between;
+      flex: 1;
+      pointer-events: none;
+      margin-top: 8px;
+      >div {
+        pointer-events: auto;
+      }
+
+      .foot-w {
+        width:100%;
+
+      }
+  
+      .foot-l {
+        width: 726px;
+      }
+      .foot-m {
+        width: 613px;
+      }
+      .foot-r {
+        width: 493px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/widgets/title/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/widgets/title/index.vue
index 62015d54..776aacd6 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/widgets/title/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/widgets/title/index.vue
@@ -2,7 +2,7 @@
   <div class='wgtTitle'>
     <div class="title">
       <img src="./assets/left.png" class="imgLeft" />
-      <img :src="title" class="imgTitle" />
+      <span>{{ title }}</span>
     </div>
     <img src="./assets/right.png" class="imgRight" />
   </div>
@@ -12,7 +12,7 @@
 export default {
   name: 'WgtTitle',
   props: {
-    title: ''
+    title: '',
   },
   data() {
     return {
@@ -32,7 +32,7 @@ export default {
 <style lang='scss' scoped>
 .wgtTitle {
   width: 100%;
-  background: linear-gradient(to right, #183d4b, #1790b800);
+  background: linear-gradient(to right, #237E9B, #1790b800);
   height: 36px;
   display: flex;
   justify-content: space-between;
@@ -43,7 +43,22 @@ export default {
     display: flex;
     align-items: center;
     margin:0 !important;
+   
 
+  span {
+    display: inline-flex;
+    position: relative;
+    top:-3px;
+    height: 25px;
+    color: transparent;
+    background: linear-gradient(180deg, #fff 15%, #4DD4FF 100%);
+    text-shadow: 0px 3px 0px rgba(0,0,0,0.08);
+    font-size: 24px;
+    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+    font-weight: 400;
+    background-clip: text;
+  }
+  
     .imgLeft {
       height: 22px;
       width: 18px;