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
index 3524a3d5..d4c4876d 100644
--- 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
@@ -34,9 +34,9 @@ let options = {
     formatter: "健康监测<br>{b1}:{c1}人",
   },
   grid: {
-    left: "2%",
-    right: "4%",
-    top: "5%",
+    left: 0,
+    right: 0,
+    top: "13%",
     bottom: "5%",
     containLabel: true,
   },
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
index 1c9afe02..cf26e2f9 100644
--- 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
@@ -1,183 +1,182 @@
 <template>
-    <div class='congestion'>
-        <WgtTitle :title="'指标变化情况'"></WgtTitle>
-      <div class="board">
-         <div id="ChangesIndictors" class="keep-ratio" >
+  <div class='congestion'>
+    <WgtTitle :title="'指标变化情况'"></WgtTitle>
+    <div class="board">
+      <div id="ChangesIndictors" class="keep-ratio">
 
-         </div>
-       </div>
+      </div>
     </div>
-  </template>
+  </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;
+<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);
-        });
+  },
+  mounted() {
+
+    setTimeout(() => {
+      this.$nextTick(() => {
+        var myChart = echarts.init(document.getElementById('ChangesIndictors'));
+        myChart.setOption(chartsStatistics);
       });
-    },
-  }
-  </script>
+    });
+  },
+}
+</script>
   
-  <style lang='scss' scoped>
+<style lang='scss' scoped>
+.showClass {
+  color: #00EBC1;
+}
 
-    .showClass {
-        color:#00EBC1;
-    }
+::v-deep .el-table .cell {
+  padding-left: 0px !important;
+}
 
-  ::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 .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 {
-    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__body-wrapper {
-    background-color: #064258;
-    color: #fff;
-  }
+::v-deep .el-table tr:hover td {
+  background: #1b2528 !important;
+  color: #00D1FF;
+}
 
-  ::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(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: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;
-  }
+::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;
+  --keep-ratio: scaleX(1);
 
-  .congestion {
-    display: inline-flex;
+  .board {
+    height: 300px;
     width: 100%;
-    height: 310px;
-    flex-direction: column;
+    padding: 0px 20px;
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 93%);
 
-    .board{
-      height: 280px;
+    #ChangesIndictors {
+      display: inline-flex;
+      height: 240px;
       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>
+}
+
+.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/congestionIndicator/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue
index 43026c0f..4b5734b7 100644
--- 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
@@ -1,277 +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 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>
+          </div>
+          <span class="num">
+            {{ it.num }}
+          </span>
+        </div>
+      </div>
     </div>
-  </template>
+  </div>
+</template>
   
-  <script>
-  import WgtTitle from '../../../../../widgets/title'
-  import * as echarts from "echarts";
+<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;
+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);
-        });
+  },
+  mounted() {
+
+    setTimeout(() => {
+      this.$nextTick(() => {
+        var myChart = echarts.init(document.getElementById('ChangesIndictors'));
+        myChart.setOption(chartsStatistics);
       });
-    },
-  }
-  </script>
+    });
+  },
+}
+</script>
   
-  <style lang='scss' scoped>
+<style lang='scss' scoped>
+.showClass {
+  color: #00EBC1;
+}
 
-    .showClass {
-        color:#00EBC1;
-    }
+::v-deep .el-table .cell {
+  padding-left: 0px !important;
+}
 
-  ::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 .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 {
-    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__body-wrapper {
-    background-color: #064258;
-    color: #fff;
-  }
+::v-deep .el-table tr:hover td {
+  background: #1b2528 !important;
+  color: #00D1FF;
+}
 
-  ::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(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: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;
-  }
+::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;
 
-  .congestion {
-    display: inline-flex;
+  .board {
+    height: 275px;
     width: 100%;
-    height: 310px;
+    padding: 0px 0px;
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    display: flex;
+    align-items: center;
     flex-direction: column;
+    margin-top: 20px;
 
-    .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;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 93%);
 
-        >div:first-child {
-            .barTitle {
-                background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%);
-            }
+    .bodySort {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      padding: 5px 10px;
 
-            .lineHight .inner {
-                background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%);
-            }
+      >div:first-child {
+        .barTitle {
+          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;
-
+        .lineHight .inner {
+          background: linear-gradient(180deg, #FF6969 0%, #FFB904 100%);
+        }
+      }
 
-            .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;
-            }
+      >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;
 
-            .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;
-                }
-            }
+        .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;
         }
-      }
 
-      .textStr {
-        display: inline-flex;
-        width:100%;
-        height:45px;
-        flex-direction: row;
+        .lineHight {
+          width: 60%;
+          height: 8px;
+          background: linear-gradient(180deg, #0BA7DA10 0%, #4FD3FF10 100%);
+          border-radius: 6px 6px 6px 6px;
+          opacity: 1;
+          margin: 0 15px;
 
-        > div {
+          >.inner {
             display: inline-flex;
-            min-width: 80px;
-            height: 26px;
-            background: linear-gradient(180deg,  #005C7950 0%, #009BCC50 100%);
-            border-radius: 2px 2px 2px 2px;
+            height: 8px;
+            background: linear-gradient(180deg, #0BA7DA 0%, #61D8FF 100%);
+            border-radius: 6px 6px 6px 6px;
             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;
+            position: relative;
+            top: -7px;
+          }
         }
+      }
+    }
 
-        .action {
-            background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
-        }
+    .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>
+}
+
+.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/trafficIndicators/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
index 6d43ac32..cb4e8bdb 100644
--- 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
@@ -1,160 +1,187 @@
-
 /* 数据 */
-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 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
+  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% 处的颜色
             },
-            borderRadius: 6
-         },
-         label: { show: false }
-      })
-   } else {
-      dataList.push({
-         name: item,
-         value: valueList[index],
-         itemStyle:{
-            borderRadius: 6
-         }
-      })
-   }
-})
+          ],
+          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",
-      },
+  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',
+  },
+  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)",
       },
-   },
-   yAxis: [{
-      type: 'value',
+    },
+    axisLabel: {
+      show: true,
+      color: "#B6E6FF",
+      fontSize: 8,
+      fontFamily: "Source Han Sans CN-Regular",
+    },
+  },
+  yAxis: [
+    {
+      type: "value",
       name: "",
       max: 1200,
-      min:0,
-      splitNumber:5,
+      min: 0,
+      splitNumber: 5,
       nameTextStyle: {
-         color: '#B6E6FF',
-         fontSize: 13,
-         fontFamily: 'Source Han Sans CN-Regular',
-         align: "left",
-         verticalAlign: "center",
+        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]
-         // }
+        fontSize: 13,
+        color: "#B6E6FF",
+        fontFamily: "HarmonyOS Sans-Regular",
+        // formatter:function(value,index){
+        //    return yList[index]
+        // }
       },
       axisLine: {
-         show: false,
+        show: false,
       },
       axisTick: {
-         show: false
+        show: false,
       },
       splitLine: {
-         lineStyle: {
-            color: 'rgba(49, 217, 255, 0.5)',
-         }
+        lineStyle: {
+          color: "rgba(49, 217, 255, 0.5)",
+        },
       },
-   }],
-   series: [
-      {
-         name: '交通特征',
-         type: 'line',
-         symbol: 'circle',
-         symbolSize: 0,
+    },
+  ],
+  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: "#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], // 折线图的数据
-       },
-   ]
-}
+      // 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
index 96fed411..e750558b 100644
--- 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
@@ -3,51 +3,59 @@ import * as echarts from "echarts";
 function contains(arr, val) {
   var i = arr.length;
   while (i--) {
-      if (arr[i].name === val) {
-          return i;
-      }
+    if (arr[i].name === val) {
+      return i;
+    }
   }
   return false;
 }
 let list = [
   {
-      name: '交通特征',
-      max: 88,
+    name: "交通特征",
+    max: 88,
   },
   {
-      name: '拥挤度',
-      max: 88,
+    name: "拥挤度",
+    max: 88,
   },
   {
-      name: '饱和度',
-      max:188,
+    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;
-      },
+    show: true,
+    trigger: "item",
+    formatter: (data) => {
+      // console.log(data.seriesIndex);
+      var tip = '<span class="echarts-tip-h5">' + data.seriesName + "</span>";
+      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;
+    },
+  },
+  grid: {
+    top: "5%", //上边距
+    right: "0", //右边距
+    left: "0", //左边距
+    bottom: "0%", //下边距
+    padding: "50px",
+    containLabel: true,
   },
   // legend: {
   //     show: true,
@@ -62,88 +70,92 @@ let options = {
   //     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}}`;
-          },
+    name: {
+      textStyle: {
+        color: "#fff",
+        fontSize: 16,
       },
-      center: ['50%', '50%'],
-      radius: '60%',
-      startAngle: 90,
-      splitNumber: 5,
-      shape: 'circle',
-      splitArea: {
-          areaStyle: {
-              color: [ '#07A3FB99','#07A3FB8010', '#07A3FB30','#07A3FB60','#07A3FB80'],
-          },
+      rich: {
+        a: {
+          fontSize: 12,
+          color: "#FFFFFF",
+          padding: [0, 0, 8, 0],
+        },
+        b: {
+          fontSize: 18,
+          color: "#ACD3FF",
+        },
       },
-      axisLabel: {
-          show: false,
+      formatter: (a) => {
+        let i = contains(list, a); // 处理对应要显示的样式
+        return `{a| ${a}}`;
       },
-      axisLine: {
-          show: false,
+    },
+    center: ["50%", "50%"],
+    radius: "60%",
+    startAngle: 90,
+    splitNumber: 5,
+    shape: "circle",
+    splitArea: {
+      areaStyle: {
+        color: [
+          "#07A3FB99",
+          "#07A3FB8010",
+          "#07A3FB30",
+          "#07A3FB60",
+          "#07A3FB80",
+        ],
       },
-      splitLine: {
-          show: true,
-          lineStyle: {
-              color: 'rgba(50, 72, 130, 0.4)',
-          },
+    },
+    axisLabel: {
+      show: false,
+    },
+    axisLine: {
+      show: false,
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "rgba(50, 72, 130, 0.4)",
       },
-      indicator: list,
+    },
+    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
-                  ),
+    {
+      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",
               },
-          },
-          itemStyle: {
-              color: 'rgba(245, 166, 35, 0.2)',
-              borderColor: 'rgba(235, 171, 86, 00)',
-              borderWidth: 10,
-          },
-          data: data1,
+            ],
+            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
+export default options;
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
index 0e86d8aa..e43bf4ec 100644
--- 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
@@ -35,7 +35,7 @@
         </div> -->
       <ProgressBar :dataList="dataList" class="keep-ratio progressbar" :selectIndex="7" />
       <div class="body">
-        <div style="width:70%">
+        <div class="body-l">
           <div class="searchPanel_1">
             <!-- <el-from ref="form"> -->
             <RadioGroup :options="[{ key: '1', label: '菏泽' }, { key: '3', label: '济南' }]" v-model="direction"
@@ -310,7 +310,7 @@ export default {
   
 <style lang='scss' scoped>
 .progressbar {
-  margin: 10px;
+  margin: 15px;
 
 }
 
@@ -332,9 +332,10 @@ export default {
       flex-direction: column;
       height: 100%;
       width: 33%;
-      margin-right: 20px;
+      // margin-right: 20px;
       border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.1), rgba(55, 231, 255, 0)) 1 1;
+      border: none;
+      // 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;
     }
@@ -394,7 +395,13 @@ export default {
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
+    --keep-ratio: scaleX(1);
 
+    .body-l {
+      width: 70%;
+      padding: 0 20px;
+      margin-right: 20px;
+    }
 
     .searchPanel_1 {
       position: absolute;
@@ -406,6 +413,7 @@ export default {
       margin-bottom: 10px;
       z-index: 1000;
 
+
       div {
         white-space: nowrap;
         margin-right: 4px;
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
index 7951fbe0..bb3b0aea 100644
--- 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
@@ -1,75 +1,76 @@
 <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 :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> 
     </div>
-  </template>
+</template>
   
-  <script>
+<script>
 import { number } from 'echarts';
 
 
-  export default {
+export default {
     name: 'ProgressBar',
     components: {
     },
-    props:{
-        dataList:{
-            type:Array,
+    props: {
+        dataList: {
+            type: Array,
             default: () => {
                 return []
             }
         },
     },
     data() {
-      return {
-        selectIndex:0,
-        selectLine:-1,
-      }
+        return {
+            selectIndex: 0,
+            selectLine: -1,
+        }
     },
-  
+
     created() {
-      
+
     },
     methods: {
-        selectItem(index,num){
+        selectItem(index, num) {
             this.selectIndex = index;
             this.selectLine = num
         }
     },
     mounted() {
-      
+
     },
-  }
-  </script>
+}
+</script>
   
-  <style lang='scss' scoped>
-  .congestion {
+<style lang='scss' scoped>
+.congestion {
     width: 100%;
-    height:35px;
+    height: 35px;
     display: inline-flex;
     flex-direction: row;
 
-    > div {
+    >div {
         position: relative;
         width: 100%;
-        height:35px;
+        height: 35px;
         display: inline-flex;
-        flex-direction: row;  
+        flex-direction: row;
 
         >.item .after {
             position: absolute;
             display: inline-flex;
-            left:0px;
-            top:-5px;
-            width:45px !important;
-            height:35px !important;
+            left: 0px;
+            top: -5px;
+            width: 45px !important;
+            height: 35px !important;
             background-color: transparent;
             cursor: pointer;
         }
@@ -78,20 +79,20 @@ import { number } from 'echarts';
             content: "";
             position: absolute;
             display: inline-flex;
-            left:0px;
-            top:8px;
-            width:45px !important;
-            height:3px !important;
+            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;
+            right: 0px;
+            top: -5px;
+            width: 45px;
+            height: 35px;
             background-color: transparent;
             cursor: pointer;
         }
@@ -100,96 +101,97 @@ import { number } from 'echarts';
             content: "";
             position: absolute;
             display: inline-flex;
-            left:0px;
-            top:8px;
-            width:45px !important;
-            height:3px !important;
+            left: 0px;
+            top: 8px;
+            width: 45px !important;
+            height: 3px !important;
             background-color: #C7C7C7;
         }
 
         .item.action .after::after {
-            background-color: #72FDC9 ;
+            background-color: #72FDC9;
         }
 
-        .item.action.Aafter  .after::after{
-            background-color: #C7C7C7  !important;
+        .item.action.Aafter .after::after {
+            background-color: #C7C7C7 !important;
         }
 
-       > .item.action.Aafter .before::after {
-            background-color: #72FDC9 ;
+        >.item.action.Aafter .before::after {
+            background-color: #72FDC9;
         }
 
-        > .item.action.Abefore .after::after {
-            background-color: #72FDC9 ;
+        >.item.action.Abefore .after::after {
+            background-color: #72FDC9;
         }
 
-        > .bef::before {
+        >.bef::before {
             background-color: #72FDC9 !important;
         }
 
-        > .aft::after {
+        >.aft::after {
             background-color: #72FDC9 !important;
         }
 
-        > .item.action span {
-            background-color: #72FDC9 ;
+        >.item.action span {
+            background-color: #72FDC9;
             cursor: pointer;
         }
 
-        > .item.action span::after {
-            border-color: #72FDC9 ;
+        >.item.action span::after {
+            border-color: #72FDC9;
         }
 
-        > .action div {
-            color:#72FDC9 !important;
+        >.action div {
+            color: #72FDC9 !important;
         }
-        
+
 
         >.item {
             position: relative;
             width: 180px;
-            height:35px;
+            height: 35px;
             display: inline-flex;
             flex-direction: column;
             justify-items: center;
-           
+
 
             >span {
                 position: absolute;
-                display:inline-flex;
+                display: inline-flex;
                 width: 9px;
                 height: 9px;
                 background: #C7C7C7;
                 border-radius: 50%;
                 opacity: 1;
-                left:53px;
+                left: 53px;
             }
 
             >div {
                 position: relative;
-                display:inline-flex;
-                width:100%;
+                display: inline-flex;
+                width: 100%;
                 align-items: center;
                 justify-content: center;
                 top: 5px;
-                margin-top:10px;
-                color:#C7C7C7;
+                margin-top: 10px;
+                font-size: 14px;
+                color: #C7C7C7;
             }
 
             >span::after {
                 content: "";
                 position: absolute;
-                display:inline-flex;
+                display: inline-flex;
                 width: 15px;
                 height: 15px;
-                border:1px solid #C7C7C7;
+                border: 1px solid #C7C7C7;
                 border-radius: 50%;
                 opacity: 1;
-                top:-3.5px;
-                left:-3px;
+                top: -3.5px;
+                left: -3px;
             }
         }
     }
-  }
-  </style>
+}
+</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
index 08046b04..e23bb841 100644
--- 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
@@ -1,180 +1,190 @@
 <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>
+  <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>
+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>
+
+}
+</script>
   
-  <style lang='scss' scoped>
+<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;
+}
+
+.el-tabs__content {
+  height: 100%;
+}
+
+.footTabs {
+  display: inline;
+  width: 99%;
+  height: 100%;
+}
+
+
+.content {
+  width: 100%;
+  display: inline-flex;
+  justify-content: space-between;
+  pointer-events: none;
+  margin-top: 19px;
+  margin-left: 19px;
+
+  >div {
+    pointer-events: auto;
+  }
 
-   ::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;
-   }
+  .content-w {
+    width: 66.5%;
+  }
 
-   ::v-deep .el-tabs__active-bar {
-    min-width:128px;
-   }
+  .content-max {
+    width: 100%;
 
-   ::v-deep .el-tabs__nav-wrap::after {
-    background-color: #133242;
-    opacity: 0.1;
-   }
+  }
 
-   .footTabs {
-     display: inline;
-     width:99%;
+  .content-l {
+    width: 25%;
+    margin-left: 0px;
+  }
 
-   }
+}
 
+.TrafficFlow {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 6;
+  color: white;
 
-   .content {
+
+  .content {
     width: 100%;
-    display: inline-flex;
-    justify-content: space-between;
+    margin: auto;
+    display: flex;
+    flex: 1;
     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: calc(50%);
+      min-width: 460px;
+      margin-right: 20px;
 
     }
 
-    .content-l {
-      width: 25%;
-      margin-left:0px;
+
+    .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%;
+    }
   }
 
-  .TrafficFlow {
+  .foot {
     width: 100%;
-    height: 100%;
-    position: relative;
-    z-index: 6;
-    color: white;
-  
+    margin: auto;
+    display: flex;
+    flex: 1;
+    pointer-events: none;
+    margin-top: 19px;
+
+    >div {
+      pointer-events: auto;
+    }
 
-    .content {
+    .foot-w {
       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: 70%;
+      height: 330px;
+    }
 
-      }
-  
-      .foot-l {
-        width: 67%;
-      }
-      .foot-m {
-        width: 613px;
-      }
-      .foot-r {
-        margin-left:20px;
-        width: 33%;
-      }
+    .foot-m {
+      width: 613px;
+    }
+
+    .foot-r {
+      margin-left: 20px;
+      width: 33%;
     }
   }
-  </style>
+}
+</style>
   
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue
index 8e247109..a74e198f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorQuery/index.vue
@@ -1,519 +1,506 @@
 <template>
-    <div class='congestion'>
-        <div  class="buttonbar" >
-            <div class="button" >
-                <i class="el-icon-refresh-right"></i>刷新
-            </div>
-            <div class="button" >
-                <i class="el-icon-upload2"></i>导出Excal
-            </div>
-        </div>
-      <div class="board">
- 
-         <div class="weaterMain" >
-            <el-table
-                :border="false"
-                :data="tableData"
-                height="790"
-                style="width: 100%">
-                <el-table-column
-                prop="nem"
-                label=""
-                width="30">
-                </el-table-column>
-                <el-table-column
-                prop="address"
-                label="桩号范围"
-               >
-                </el-table-column>
-                <el-table-column
-                prop="name"
-                label="能见度"
-                class-name="showClass"
-                >
-                <template slot-scope="scope">
-                    <span class="showClass">{{scope.row.name}}</span>
-                </template>
-                </el-table-column>
-                <el-table-column
-                prop="date"
-                label="发生时间"
-                >
-                </el-table-column>
-            </el-table>
-            </div>
-       </div>
+  <div class='congestion'>
+    <div class="buttonbar">
+      <div class="button">
+        <i class="el-icon-refresh-right"></i>刷新
+      </div>
+      <div class="button">
+        <i class="el-icon-upload2"></i>导出Excal
+      </div>
     </div>
-  </template>
-  
-  <script>
- 
-  export default {
-    name: 'IndicatorQuery',
-    components: {
-       
-    },
-    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'
-        },{
-          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'
-        },{
-          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'
-        },{
-          date: '2023-12-31 13:00:00',
-          name: '2640.78m',
-          address: 'K100+000-K110+000'
-        },
-        ]
-       }
-    },
+    <div class="board">
+
+      <div class="weaterMain">
+        <el-table :border="false" :data="tableData" style="width: 100%">
+          <el-table-column prop="nem" label="" width="30">
+          </el-table-column>
+          <el-table-column prop="address" label="桩号范围">
+          </el-table-column>
+          <el-table-column prop="name" label="能见度" class-name="showClass">
+            <template slot-scope="scope">
+              <span class="showClass">{{ scope.row.name }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="date" label="发生时间">
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
   
-    created() {
-      
-    },
-    methods: {
-      selectItem(index){
-        this.selectIndex = index;
+<script>
+
+export default {
+  name: 'IndicatorQuery',
+  components: {
+
+  },
+  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'
+      }, {
+        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'
+      }, {
+        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'
+      }, {
+        date: '2023-12-31 13:00:00',
+        name: '2640.78m',
+        address: 'K100+000-K110+000'
       },
-    },
-    mounted() {
-   
-      setTimeout(() => {
-        this.$nextTick(() => {
-         
-        });
-      });
-    },
-  }
-  </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;
-  }
+  created() {
 
-  ::v-deep .el-table {
-    border:0px !important;
-    background-color: transparent;
-    font-size:12px !important;
-  }
+  },
+  methods: {
+    selectItem(index) {
+      this.selectIndex = index;
+    },
+  },
+  mounted() {
 
-  ::v-deep .el-table__body-wrapper {
-    background-color: #064258;
-    color: #fff;
-  }
+    setTimeout(() => {
+      this.$nextTick(() => {
 
-  ::v-deep .el-table tr:hover td {
-    background: #1b2528 !important;
-    color:#00D1FF;
-  }
+      });
+    });
+  },
+}
+</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: 100%;
+  flex-direction: column;
+
+  .buttonbar {
+    display: inline-flex;
+    flex-direction: row;
+    padding-top: 15px;
 
-  ::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; 
-  }
+    >.button {
+      display: inline-flex;
+      min-width: 90px;
+      height: 28px;
+      background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+      border-radius: 2px 2px 2px 2px;
+      justify-content: center;
+      align-items: center;
+      padding: 1px 10px;
+      ;
+      opacity: 1;
+      font-size: 14px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      margin-left: 15px;
+    }
 
-  ::v-deep .el-table tr {
-    background-color: #133242 !important;
-    border-collapse:0;
-    border:0px !important;
-    background-color: transparent !important;
   }
 
-  .congestion {
-    display: inline-flex;
+  .board {
+    height: 880px;
     width: 100%;
-    height: 100%;
+    padding: 0px 0px;
+    border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     flex-direction: column;
+    margin-top: 20px;
+
+
 
-    .buttonbar {
+    .warningList {
       display: inline-flex;
-      flex-direction: row;
-      padding-top:15px;
+      flex-direction: column;
+      width: 100%;
+      height: calc(100% - 40px);
 
-      > .button {
+      >div {
         display: inline-flex;
-        min-width:90px;
-        height:28px;
-        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+        width: 100%;
+        height: 138px;
+        background: #133242;
         border-radius: 2px 2px 2px 2px;
-        justify-content: center;
-        align-items: center;
-        padding: 1px 10px;;
         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: #FFFFFF;
-        margin-left:15px;
-      }
+        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;
+              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;
+          }
+        }
 
+      }
     }
 
-    .board{
-      height: 880px;
+    .weaterMain {
+      display: inline-flex;
+      flex-direction: row;
       width: 100%;
-      padding: 0px 0px;
-      border-radius: 5px 5px 5px 5px;
-      opacity: 1;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-direction: column;
-      margin-top:20px;
+      height: 100%;
+      ;
 
-  
 
-      .warningList {
-        display: inline-flex;
-        flex-direction: column;
-        width:100%;
-        height:calc(100% - 40px);
+      .buttons {
+        width: 100%;
+        height: 38px;
 
         >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;
-                            font-weight: 400;
-                            color: #F4A125
-                        }
-
-                }
-            }
+          display: inline-flex;
+          width: 10%;
+          height: 35px;
+          justify-content: center;
+          align-items: center;
+          font-size: 12px;
+          font-family: PangMenZhengDao;
+          font-weight: 800;
+          color: #FFFFFF;
+          z-index: 9;
+        }
 
-            >.right-w {
-                margin-left:30px;
-                display: inline-flex;
-                width:100%;
-                height:100%;
-                flex-direction: column;
-
-                .right-row {
-                    margin-bottom: 10px;
-                }
-                
-                .right-text {
-                    color:#fff;
-                }
-            }
+        >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%);
         }
-      }
 
-      .weaterMain {
-        display: inline-flex;
-        flex-direction: row;
-        width:100%;
-        height: 100%;;
-
-       
-        .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;
-                font-weight: 800;
-                color: #FFFFFF;
-                z-index: 9;
-            }
+        .yelSel::after {
+          background: linear-gradient(180deg, #FFFA79 0%, rgba(255, 208, 137, 0) 100%);
+        }
 
-            >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;
-            }
+        .bluSel::after {
+          background: linear-gradient(180deg, #121ADE 0%, rgba(40, 18, 228, 0) 100%);
+        }
 
-            .redSel::after {
-                background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%);
-            }
+        .orgSel::after {
+          background: linear-gradient(180deg, #FFA623 0%, rgba(255, 173, 53, 0) 100%);
+        }
+      }
 
-            .yelSel::after {
-                background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,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;
+      }
 
-            .bluSel::after {
-                background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%);
-            }
+      .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;
+      }
 
-            .orgSel::after{
-                background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%);
-            }
-        }
+      .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;
 
-        .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;
+        >span.text {
+          display: inline-flex;
+          font-size: 16px;
+          font-family: PangMenZhengDao;
+          font-weight: 400;
+          color: #FFFFFF;
         }
 
-        .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;
-                font-weight: 400;
-                color: #FFFFFF; 
-            }
 
-          
-            .num {
-                display: inline-flex;
-                justify-content: center;
-            align-items: center;
-                font-size: 22px;
-                font-family: PangMenZhengDao;
-                font-weight: 400;
-                color: #D9001B;
-            }
+        .num {
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 22px;
+          font-family: PangMenZhengDao;
+          font-weight: 400;
+          color: #D9001B;
         }
       }
-
     }
+
   }
-      .charts {
-        height:180px;
-        width: 100%;
-      }
-  
-  </style>
+}
+
+.charts {
+  height: 180px;
+  width: 100%;
+}
+</style>
   
\ No newline at end of file