更改bug

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue

@@ -54,8 +54,10 @@ export default {
   padding: 8px 16px 16px;
 
   .row_01 {
-    flex-basis: 55%; margin-bottom: 15px;
-    display: flex; align-items: stretch;
+    flex-basis: 55%;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: stretch;
     pointer-events: none;
 
     > div {
@@ -77,14 +79,16 @@ export default {
         width: 100%;
         flex-basis: 50%;
         margin-bottom: 15px;
-        &:last-child{ margin-bottom: 0;}
+        &:last-child {
+          margin-bottom: 0;
+        }
       }
     }
-
   }
 
   .row_02 {
-    flex: 1; height: 0;
+    flex: 1;
+    height: 0;
     // pointer-events: none;
   }
 }

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue

@@ -5,7 +5,7 @@
     <section class="row_02">
       <!-- 在途车流量车型分类 -->
       <!--  全路段拥堵状况 -->
-      <Congestion class="unit_01"></Congestion>
+      <Congestion class="unit_01" />
       <!--  畅通率 -->
       <!-- <Unblocked class="content-m" /> -->
       <!-- 全路车流量状况 -->
@@ -48,9 +48,12 @@ export default {
   height: 100%;
   padding: 14px;
 
-  .row_01 { height: 160px;}
+  .row_01 {
+    height: 160px;
+  }
 
-  .row_02 { overflow: hidden;
+  .row_02 {
+    overflow: hidden;
     // --keep-ratio: scaleX(1);
     display: flex;
     pointer-events: none;
@@ -59,8 +62,13 @@ export default {
     > div {
       pointer-events: auto;
     }
-    .unit_01{ flex-basis: 50%; margin-right: 14px;}
-    .unit_02{ flex-basis: 50%;}
+    .unit_01 {
+      flex-basis: 50%;
+      margin-right: 14px;
+    }
+    .unit_02 {
+      flex-basis: 50%;
+    }
   }
 
   .row_03 {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js

@@ -29,7 +29,7 @@ let options = {
     left: 0,
     right: 0,
     top: "15%",
-    bottom: "6%",
+    bottom: "8%",
     containLabel: true,
   },
   xAxis: {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/index.vue

@@ -158,12 +158,13 @@ export default {
 .congestion {
   display: inline-flex;
   width: 100%;
-  height: 310px;
+  // height: 310px;
   flex-direction: column;
   --keep-ratio: scaleX(1);
 
   .board {
-    height: 300px;
+    // height: 300px;
+    flex: 1;
     width: 100%;
     padding: 0px 20px;
     border-radius: 5px 5px 5px 5px;
@@ -175,15 +176,20 @@ export default {
     background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 93%);
 
     #ChangesIndictors {
-      display: inline-flex;
-      height: 280px;
+      // display: inline-flex;
+      height: 180px;
+      // width: 100%;
       width: 100%;
+      display: flex;
+      flex: 1;
+      // height: 0;
+      position: relative;
     }
   }
 }
 
-.charts {
-  height: 180px;
-  width: 100%;
-}
+// .charts {
+//   height: 180px;
+//   width: 100%;
+// }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'近一年交通组成特征指数最大值'"></WgtTitle>
     <div class="board">
       <div class="charts keep-ratio" id="composeFeatures"></div>
@@ -8,24 +8,21 @@
 </template>
 
 <script>
-  
-  import WgtTitle from '../../../../../widgets/title'
+import WgtTitle from "../../../../../widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 export default {
-    name: 'ComposeFeatures',
+  name: "ComposeFeatures",
   components: {
-      WgtTitle
+    WgtTitle,
   },
   data() {
     return {
       myChart: null,
-      }
+    };
   },
 
-    created() {
-      
-    },
+  created() {},
   methods: {
     reiszeChart() {
       this.$nextTick(() => {
@@ -33,44 +30,45 @@
           this.myChart.resize();
         }
       });
-      }
     },
-    update(){
-     
   },
+  update() {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-          this.myChart = echarts.init(document.getElementById('composeFeatures'));
+        this.myChart = echarts.init(document.getElementById("composeFeatures"));
         this.myChart.setOption(chartsStatistics);
       });
     });
   },
-  }
+};
 </script>
 
-  <style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
   .board {
-      height:150px;
+    // height: 150px;
+    flex: 1;
     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: 1;
     border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+    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>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/congestionIndicator/index.vue

@@ -165,7 +165,8 @@ export default {
   flex-direction: column;
 
   .board {
-    height: 275px;
+    // height: 275px;
+    flex: 1;
     width: 100%;
     padding: 0px 0px;
     border-radius: 5px 5px 5px 5px;
@@ -173,23 +174,29 @@ export default {
     display: flex;
     align-items: center;
     flex-direction: column;
-    margin-top: 20px;
-
+    margin-top: 10px;
+    overflow: hidden;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, #064258 93%);
 
     .bodySort {
-      position: relative;
-      display: inline-block;
-      width: 100%;
-      height: 100%;
+      flex: 1;
+      // height: 120px;
+      // position: relative;
+      // display: inline-block;
+      // width: 100%;
+      // height: 100%;
       overflow: auto;
-      padding: 5px 10px;
+      // padding: 5px 10px;
 
       > div:first-child {
         .barTitle {
           background: linear-gradient(180deg, #ff6969 0%, #ffb904 100%);
         }
 
+        .text {
+          font-size: 12px;
+        }
+
         .lineHight .inner {
           background: linear-gradient(180deg, #ff6969 0%, #ffb904 100%);
         }
@@ -197,11 +204,11 @@ export default {
 
       > div {
         display: inline-flex;
-        width: 95%;
+        width: 100%;
         height: 41px;
         background: #0d517460;
         border-radius: 0px 0px 0px 0px;
-        margin: 5px;
+        // margin: 5px;
         font-size: 14px;
         font-family: PingFang SC, PingFang SC;
         font-weight: 500;
@@ -225,6 +232,10 @@ export default {
           margin: 0 10px;
         }
 
+        .text {
+          font-size: 12px;
+        }
+
         .lineHight {
           width: 60%;
           height: 8px;
@@ -249,7 +260,7 @@ export default {
     .textStr {
       display: inline-flex;
       width: 100%;
-      height: 45px;
+      height: 35px;
       flex-direction: row;
 
       > div {
@@ -278,8 +289,8 @@ export default {
   }
 }
 
-.charts {
-  height: 180px;
-  width: 100%;
-}
+// .charts {
+//   height: 180px;
+//   width: 100%;
+// }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'近一年拥挤度最大值'"></WgtTitle>
     <div class="board">
       <div class="charts keep-ratio" id="Crowding"></div>
@@ -8,24 +8,21 @@
 </template>
 
 <script>
-  
-  import WgtTitle from '../../../../../widgets/title'
+import WgtTitle from "../../../../../widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 export default {
-    name: 'Crowding',
+  name: "Crowding",
   components: {
-      WgtTitle
+    WgtTitle,
   },
   data() {
     return {
       myChart: null,
-      }
+    };
   },
 
-    created() {
-      
-    },
+  created() {},
   methods: {
     reiszeChart() {
       this.$nextTick(() => {
@@ -33,44 +30,45 @@
           this.myChart.resize();
         }
       });
-      }
     },
-    update(){
-     
   },
+  update() {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-          this.myChart = echarts.init(document.getElementById('Crowding'));
+        this.myChart = echarts.init(document.getElementById("Crowding"));
         this.myChart.setOption(chartsStatistics);
       });
     });
   },
-  }
+};
 </script>
 
-  <style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
   .board {
-      height:150px;
+    // height: 150px;
+    flex: 1;
     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: 1;
     border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+    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>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/roadIndicators/index.vue

@@ -1,119 +1,122 @@
 <template>
-    <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'道路指标情况'"></WgtTitle>
     <div class="board">
-         <div id="roadChart1" class="keep-ratio" >
-
-         </div>
-         <div id="roadChart2" class="keep-ratio" >
-
-        </div>
-        <div id="roadChart3" class="keep-ratio" >
-
-        </div>
+      <div id="roadChart1" class="keep-ratio"></div>
+      <div id="roadChart2" class="keep-ratio"></div>
+      <div id="roadChart3" class="keep-ratio"></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 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',
+  name: "RoadIndicators",
   components: {
-        WgtTitle
+    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'
+      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",
         },
-  
-    created() {
-      
+        {
+          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'));
+        var myChart = echarts.init(document.getElementById("roadChart1"));
         myChart.setOption(chartsStatistics);
-          var myChart2 = echarts.init(document.getElementById('roadChart2'));
+        var myChart2 = echarts.init(document.getElementById("roadChart2"));
         myChart2.setOption(chartsStatistics2);
-          var myChart3 = echarts.init(document.getElementById('roadChart3'));
+        var myChart3 = echarts.init(document.getElementById("roadChart3"));
         myChart3.setOption(chartsStatistics3);
       });
     });
   },
-  }
+};
 </script>
 
-  <style lang='scss' scoped>
-
+<style lang="scss" scoped>
 .showClass {
-        color:#00EBC1;
+  color: #00ebc1;
 }
 
 ::v-deep .el-table .cell {
@@ -122,7 +125,7 @@
 
 ::v-deep .el-table .el-table__header-wrapper th {
   background-color: #064258 !important;
-    color:#00D1FF;
+  color: #00d1ff;
   border-color: #064258 !important;
   border: 0px !important;
   font-size: 12px !important;
@@ -141,11 +144,11 @@
 
 ::v-deep .el-table tr:hover td {
   background: #1b2528 !important;
-    color:#00D1FF;
+  color: #00d1ff;
 }
 
 ::v-deep .el-table tr:nth-child(odd) td {
-    background-color: #13272F ;
+  background-color: #13272f;
   border: 0px !important;
 }
 ::v-deep .el-table tr:nth-child(even) td {
@@ -162,11 +165,12 @@
 .congestion {
   display: inline-flex;
   width: 100%;
-    height: 188px;
+  // height: 188px;
   flex-direction: column;
 
   .board {
-      height: 150px;
+    // height: 150px;
+    flex: 1;
     width: 100%;
     padding: 0px 0px;
     border-radius: 5px 5px 5px 5px;
@@ -201,14 +205,19 @@
         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;
+        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;  
+        color: #37e7ff;
 
         > .left-w {
           display: inline-flex;
@@ -231,9 +240,8 @@
               font-size: 14px;
               font-family: PangMenZhengDao;
               font-weight: 400;
-                            color: #F4A125
+              color: #f4a125;
             }
-
           }
         }
 
@@ -252,7 +260,6 @@
             color: #fff;
           }
         }
-
       }
     }
 
@@ -262,7 +269,6 @@
       width: 100%;
       height: 40px;
 
-       
       .buttons {
         width: 100%;
         height: 38px;
@@ -275,7 +281,7 @@
           font-size: 12px;
           font-family: PangMenZhengDao;
           font-weight: 800;
-                color: #FFFFFF;
+          color: #ffffff;
           z-index: 9;
         }
 
@@ -285,26 +291,46 @@
           display: inline-flex;
           width: 55px;
           height: 36px;
-                background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%);
+          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%);
+          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%);
+          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%);
+          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%);
+          background: linear-gradient(
+            180deg,
+            #ffa623 0%,
+            rgba(255, 173, 53, 0) 100%
+          );
         }
       }
 
@@ -315,7 +341,12 @@
         left: 0px;
         width: 100%;
         height: 2px;
-            background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%);
+        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;
       }
@@ -326,7 +357,12 @@
         left: 0px;
         width: 100%;
         height: 2px;
-            background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%);
+        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;
       }
@@ -336,7 +372,12 @@
         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%);
+        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;
@@ -347,10 +388,9 @@
           font-size: 16px;
           font-family: PangMenZhengDao;
           font-weight: 400;
-                color: #FFFFFF; 
+          color: #ffffff;
         }
 
-          
         .num {
           display: inline-flex;
           justify-content: center;
@@ -358,17 +398,14 @@
           font-size: 22px;
           font-family: PangMenZhengDao;
           font-weight: 400;
-                color: #D9001B;
+          color: #d9001b;
         }
       }
     }
-
   }
 }
 .charts {
   height: 180px;
   width: 100%;
 }
-  
 </style>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'近一年饱和度最大值'"></WgtTitle>
     <div class="board">
       <div class="charts keep-ratio" id="temperatureTrend"></div>
@@ -8,24 +8,21 @@
 </template>
 
 <script>
-  
-  import WgtTitle from '../../../../../widgets/title'
+import WgtTitle from "../../../../../widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 export default {
-    name: 'SaturationMax',
+  name: "SaturationMax",
   components: {
-      WgtTitle
+    WgtTitle,
   },
   data() {
     return {
       myChart: null,
-      }
+    };
   },
 
-    created() {
-      
-    },
+  created() {},
   methods: {
     reiszeChart() {
       this.$nextTick(() => {
@@ -33,44 +30,47 @@
           this.myChart.resize();
         }
       });
-      }
     },
-    update(){
-     
   },
+  update() {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-          this.myChart = echarts.init(document.getElementById('temperatureTrend'));
+        this.myChart = echarts.init(
+          document.getElementById("temperatureTrend")
+        );
         this.myChart.setOption(chartsStatistics);
       });
     });
   },
-  }
+};
 </script>
 
-  <style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
   .board {
-      height:150px;
+    // height: 150px;
+    flex: 1;
     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: 1;
     border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+    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>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js

@@ -81,7 +81,7 @@ var options = {
     top: "25%", //上边距
     right: "0", //右边距
     left: "0", //左边距
-    bottom: "0%", //下边距
+    bottom: "5%", //下边距
     containLabel: true,
   },
   xAxis: {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue

@@ -92,7 +92,7 @@
         <div class="chartOrg">
           <div class="itemChart">
             <div class="title">上月指标</div>
-            <div id="chart2" class=""></div>
+            <div id="chart2" class="keep-ratio"></div>
           </div>
           <div class="itemChart">
             <div class="title">本月指标</div>
@@ -317,20 +317,20 @@ export default {
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
         // 绘制圆角矩形
-        drawRoundRect(context, 98, 11, 90, 22, 12, gr);
+        drawRoundRect(context, 98, 41, 90, 22, 12, gr);
 
         var gr = context.createLinearGradient(35, 0, 75, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-        drawRoundRect(context, -1, 146, 80, 20, 12, gr);
+        drawRoundRect(context, -1, 176, 80, 20, 12, gr);
 
         var gr = context.createLinearGradient(230, 0, 275, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
         context.lineWidth = 1; // 设置线段宽度
-        drawRoundRect(context, 211, 146, 220, 20, 12, gr);
+        drawRoundRect(context, 211, 176, 220, 20, 12, gr);
 
         const domMap3 = document.getElementById("chart3");
         let parentDiv3 = domMap3.firstChild;
@@ -348,20 +348,20 @@ export default {
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
         // 绘制圆角矩形
-        drawRoundRect(context3, 98, 14, 90, 20, 12, gr);
+        drawRoundRect(context3, 98, 44, 90, 20, 12, gr);
 
         var gr = context3.createLinearGradient(35, 0, 75, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-        drawRoundRect(context3, -1, 148, 80, 20, 12, gr);
+        drawRoundRect(context3, -1, 178, 80, 20, 12, gr);
 
         var gr = context3.createLinearGradient(240, 0, 290, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
         context3.lineWidth = 1; // 设置线段宽度
-        drawRoundRect(context3, 211, 148, 200, 20, 12, gr);
+        drawRoundRect(context3, 211, 178, 200, 20, 12, gr);
       });
     });
   },
@@ -374,14 +374,15 @@ export default {
 }
 
 .congestion {
-  width: 100%;
-  margin: 5px 0;
+  // width: 100%;
+  // margin: 5px 0;
 
   .body {
     display: flex;
     flex-direction: row;
     align-items: center;
-    height: 395px;
+    // height: 395px;
+    flex: 1;
     width: 100%;
     font-size: 14px;
 
@@ -417,6 +418,7 @@ export default {
           font-family: PingFang SC, PingFang SC;
           font-weight: 500;
           color: #30bfec;
+          padding-top: 20px;
         }
 
         #chart2 {
@@ -441,9 +443,10 @@ export default {
   }
 
   .board {
-    height: 320px;
+    // height: 320px;
+    flex: 1;
     width: 100%;
-    padding: 10px 0px;
+    padding-top: 10px;
 
     border-radius: 5px 5px 5px 5px;
     opacity: 1;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/index.vue

@@ -4,9 +4,9 @@
       <RoadIndicators class="content-l" />
       <SaturationMax class="content-l" />
       <Crowding class="content-l" />
-      <ComposeFeatures class="content-l" />
+      <ComposeFeatures class="content-l" style="margin-right: 0" />
     </section>
-    <section class="content">
+    <section class="content-c">
       <TrafficIndicators class="content-max" />
     </section>
     <section class="foot">
@@ -79,36 +79,43 @@ export default {
   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;
-  }
-
-  .content-w {
-    width: 66.5%;
-  }
-
-  .content-max {
-    width: 100%;
-  }
-
-  .content-l {
-    width: 25%;
-    margin-left: 0px;
-  }
-}
+// .content {
+//   // width: 100%;
+//   // display: inline-flex;
+//   // justify-content: space-between;
+//   // pointer-events: none;
+//   // margin-top: 19px;
+//   // margin-left: 19px;
+//   width: 100%;
+//   margin: auto;
+//   display: flex;
+//   flex: 1;
+//   pointer-events: none;
+//   margin-top: 19px;
+//   flex-basis: 20%;
+
+//   > div {
+//     pointer-events: auto;
+//   }
+
+//   .content-w {s
+//     width: 66.5%;
+//   }
+
+//   .content-l {
+//     margin-right: 20px;
+//     flex-basis: 25%;
+//     display: flex;
+//     flex-direction: column;
+//   }
+// }
 
 .TrafficFlow {
   width: 100%;
   height: 100%;
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  // position: relative;
   z-index: 6;
   color: white;
 
@@ -119,36 +126,48 @@ export default {
     flex: 1;
     pointer-events: none;
     margin-top: 19px;
+    flex-basis: 25%;
 
-    .content-l {
-      width: calc(50%);
-      min-width: 460px;
-      margin-right: 20px;
+    > div {
+      pointer-events: auto;
     }
 
-    .content-m {
-      display: inline-flex;
-      flex-direction: column;
-      width: calc(100% / 4);
-      margin-right: 20px;
+    // .content-w {
+    //   width: 66.5%;
+    // }
 
-      .content-m-t {
-        width: 100%;
-        height: 240px;
-        margin-bottom: 20px;
+    .content-l {
+      margin-right: 20px;
+      flex-basis: 25%;
+      display: flex;
+      flex-direction: column;
     }
   }
+  .content-c {
+    width: 100%;
+    margin: auto;
+    display: flex;
+    // flex: 1;
+    pointer-events: none;
+    margin-top: 19px;
+    flex-basis: 50%;
 
-    .content-r {
-      width: 30%;
+    .content-max {
+      flex: 1;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: column;
     }
   }
-
   .foot {
     width: 100%;
     margin: auto;
     display: flex;
-    flex: 1;
+    height: 0;
+    // flex: 1;
+    flex-basis: 35%;
     pointer-events: none;
     margin-top: 19px;
 
@@ -161,8 +180,8 @@ export default {
     }
 
     .foot-l {
-      width: 70%;
-      height: 330px;
+      flex-basis: 70%;
+      // height: 330px;
     }
 
     .foot-m {
@@ -171,7 +190,9 @@ export default {
 
     .foot-r {
       margin-left: 20px;
-      width: 33%;
+      flex-basis: 30%;
+      flex: 1;
+      display: flex;
     }
   }
 }

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="TrafficFlowMax">
-    <el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
+    <el-tabs class="full_tab" v-model="activeName" @tab-click="changeTabs">
       <el-tab-pane label="综合指标分析" name="first">
         <IndicatorAnalysis />
       </el-tab-pane>
@@ -33,6 +33,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.full_tab {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  ::v-deep .el-tabs__header {
+  }
+  ::v-deep .el-tabs__content {
+    flex: 1;
+    .el-tab-pane {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 ::v-deep .el-tabs__item {
   display: inline-flex;
   justify-content: center;
@@ -58,10 +74,10 @@ export default {
   margin: 0px !important;
 }
 
-.footTabs {
-  display: inline;
-  width: 99%;
-}
+// .footTabs {
+//   display: inline;
+//   width: 99%;
+// }
 
 .TrafficFlowMax {
   width: 100%;
@@ -87,11 +103,11 @@ export default {
       pointer-events: auto;
     }
 
-    .content-l {
-      width: calc(50%);
-      min-width: 460px;
-      margin-right: 20px;
-    }
+    // .content-l {
+    //   width: calc(50%);
+    //   min-width: 460px;
+    //   margin-right: 20px;
+    // }
 
     .content-m {
       display: inline-flex;