改bug

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js

@@ -25,7 +25,7 @@ let options = {
     left: "2%",
     right: "4%",
     top: "30px",
-    bottom: "5%",
+    bottom: "20px",
     containLabel: true,
   },
   xAxis: {

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

@@ -613,8 +613,10 @@ export default {
 
     .unit_con {
       flex: 1;
+      height: 0; padding: 0;
       margin: 95px 20px 30px; position: relative;
       // &.unit_con_02{ margin: 105px 0px 20px; }
+      display: flex; align-items: center;
     }
 
     .empty {
@@ -623,7 +625,7 @@ export default {
 
     .chart_div {
       width: 100%;
-      height: 100%;
+      height:200px;
     }
   }
 

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

@@ -84,7 +84,7 @@ export default {
   }
 
   .row_02 {
-    flex: 1;
+    flex: 1; height: 0;
     // pointer-events: none;
   }
 }

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue

@@ -2,7 +2,7 @@
     <div class='congestion'>
       <WgtTitle :title="'气温变化趋势'"></WgtTitle>
       <div class="board">
-        <div class="charts keep-ratio " id="temperatureTrend"></div>
+        <div class="charts" id="temperatureTrend"></div>
        </div>
     </div>
   </template>
@@ -51,10 +51,9 @@
   
   <style lang='scss' scoped>
   .congestion {
-    width: 100%;
+    display: flex; flex-direction: column;
     .board{
-      height:260px;
+      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;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue

@@ -2,7 +2,7 @@
     <div class='congestion'>
       <WgtTitle :title="'能见度变化趋势'"></WgtTitle>
       <div class="board">
-        <div class="charts keep-ratio " id="VisibilityTrends"></div>
+        <div class="charts" id="VisibilityTrends"></div>
        </div>
     </div>
   </template>
@@ -52,25 +52,22 @@
   
   <style lang='scss' scoped>
   .congestion {
-    width: 100%;
+  display: flex; flex-direction: column; align-items: stretch;
     .board{
-      height:260px;
+      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;
-      display: flex;
+      display: flex; flex-direction: column;
-      justify-content: space-between;
+      justify-content: center;
-      align-items: center;
+      align-items: stretch; 
-     
     }
   }
       .charts {
         height:200px;
-        width: 100%;
       }
   
   </style>

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue

@@ -100,9 +100,9 @@
   
   <style lang='scss' scoped>
   .congestion {
-    width: 100%;
+    width: 100%; display: flex;
     .board{
-      height:260px;
+      flex: 1;
       width: 100%;
       padding: 0px 20px;
       background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
@@ -112,15 +112,12 @@
       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: flex-start;
+      align-items: center;
       flex-direction: row;
       overflow: auto;
 
       .showRoad {
-        display: inline-flex;
+        display: flex;
-        width:100%;
-        height:35px;
-        flex-direction: row;
         flex-wrap: wrap;
 
         > .item {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue

@@ -1,6 +1,5 @@
 <template>
     <div class='congestion'>
-      <div class="board">
          <div class="queryList" >
             <Card v-for="(item, index) in data" :cardData="item" :keyMap="keyMap" :hasBtn="false" :gap="'10px'" :key="index">
               <template #form-start="{ data }">
@@ -15,7 +14,7 @@
             <TemperatureTrend ref="temper" class="charts-ms"  />
             <VisibilityTrends ref="visibility" class="charts-ms"  />
          </div>
-       </div>
+
     </div>
   </template>
   
@@ -107,22 +106,14 @@
   .congestion {
     width: 100%;
     height:100%;
+    display: flex; flex-direction: column;
+
 
-    .board{
-      height: calc(100% - 235px);
-      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;
 
       .queryCharts {
         display: inline-flex;
         width:100%;
-        height: 316px;
+        flex:1;
 
         .charts-l {
             width:30%;
@@ -130,7 +121,7 @@
 
         .charts-ms {
           width:40%;
-          margin-left:20px;
+          margin-left:14px;
         }
       }
 
@@ -160,11 +151,6 @@
       }
 
   }
-  }
-      .charts {
-        height:180px;
-        width: 100%;
-      }
   
   </style>
   

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

@@ -1,11 +1,11 @@
 <template>
   <div class="TrafficFlow">
-    <section class="content">
+    <section class="row_01">
-      <RoadNetwork class="content-l" />
+      <RoadNetwork class="unit_01" />
-      <WeatherForecast class="content-l" style="margin-right: 0" />
+      <WeatherForecast class="unit_02" style="margin-right: 0" />
     </section>
-    <section class="foot">
+    <section class="row_02">
-      <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">
           <div class="foot-shot">
             <SortFaceForecast />
@@ -73,59 +73,31 @@ export default {
   opacity: 0.1;
 }
 
-.footTabs {
+.full_tab {
-  display: inline;
   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%;}
+  }
 }
 
 .TrafficFlow {
   width: 100%;
   height: 100%;
-  position: relative;
+  display: flex; align-items: stretch;
-  z-index: 6;
-  color: white;
-
-  .head {
-    width: 98%;
-    margin: auto;
-    margin-top: 15px;
-  }
-  .content {
-    width: 98%;
-    margin: auto;
-    display: flex;
-    flex: 1;
-    pointer-events: none;
-    margin-top: 19px;
-    > div {
-      pointer-events: auto;
-    }
-
-    .content-l {
-      width: calc(50%);
-      min-width: 460px;
-      margin-right: 20px;
-    }
-
-    .content-m {
-      display: inline-flex;
   flex-direction: column;
-      width: calc(100% / 4);
+  padding: 14px;
-      margin-right: 20px;
+  .row_01 {
-
+    display: flex; flex-direction: row; align-items: stretch;
-      .content-m-t {
+    .unit_01,.unit_02{
-        width: 100%;
+      flex-basis: 50%;
-        height: 240px;
-        margin-bottom: 20px;
-      }
     }
-    .content-r {
+    .unit_01{ margin-right: 14px;}
-      width: 49.4%;
   }
-  }
+  .row_02 {
-  .foot {
+    flex: 1;
-    width: 98%;
-    margin: auto;
     display: flex;
     justify-content: space-between;
     flex: 1;

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

@@ -130,11 +130,11 @@ export default {
 
 <style lang="scss" scoped>
 .classification {
-  width: 100%;
+  display: flex;
-  height: 100%;
+  flex-direction: column;
 
   .board {
-    height: 400px;
+    flex:1;
     width: 100%;
     padding: 0px 30px;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);

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

@@ -198,7 +198,10 @@ export default {
 
 .heightway {
   width: 100%;
+  display: flex;
+  flex-direction: column;
   .board {
+    flex: 1;
     height: 400px;
     width: 100%;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);

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

@@ -10,9 +10,11 @@
           断面交通量Top10
         </div>
       </div>
+      <div class="chart_box">
         <div class="charts keep-ratio" id="situationEchartBox"></div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -52,10 +54,9 @@ export default {
 
 <style lang="scss" scoped>
 .situation {
-  width: 100%;
+  display: flex; flex-direction: column;
   .board {
-    height: 400px;
+    flex: 1;
-    width: 100%;
     padding: 0px 30px;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     border-radius: 5px 5px 5px 5px;
@@ -69,13 +70,14 @@ export default {
       1 1;
     display: flex;
     justify-content: flex-start;
-    align-items: center;
+    align-items: stretch;
     flex-direction: column;
   }
+  .chart_box{
+    flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center;
     .charts {
-    // margin-top: -40px;
+      flex-basis: 310px;
-    height: 400px;
+    }
-    width: 100%;
   }
   .tag {
     margin-top: 15px;

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

@@ -49,11 +49,10 @@ export default {
 
 <style lang='scss' scoped>
 .traffic {
-  width: 100%;
+  display: flex; flex-direction: column;
 
   .board {
-    height: 139px;
+    flex: 1;
-    width: 100%;
     padding: 0px 70px;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     border-radius: 5px 5px 5px 5px;

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

@@ -1,22 +1,20 @@
 <template>
-  <div class="TrafficFlow">
+  <div class="TrafficFlow fl-col">
     <!-- 交通路网状况 -->
-    <Traffic class="head" />
+    <Traffic class="row_01" />
-    <section class="content">
+    <section class="row_02">
       <!-- 在途车流量车型分类 -->
       <!--  全路段拥堵状况 -->
-      <Congestion class="content-l"></Congestion>
+      <Congestion class="unit_01"></Congestion>
       <!--  畅通率 -->
       <!-- <Unblocked class="content-m" /> -->
       <!-- 全路车流量状况 -->
-      <Flowstate class="content-r" />
+      <Flowstate class="unit_02" />
     </section>
-    <section class="foot">
+    <section class="row_03">
-      <!-- 交通路段状态 -->
+      <Heightway class="unit_01" />
-      <Heightway class="foot-l" />
+      <Classification class="unit_02" />
-      <Classification class="foot-m" />
+      <Situation class="unit_03" />
-      <!-- 路段交通量情况 -->
-      <Situation class="foot-r" />
     </section>
   </div>
 </template>
@@ -48,68 +46,45 @@ export default {
 .TrafficFlow {
   width: 100%;
   height: 100%;
-  position: relative;
+  padding: 14px;
-  z-index: 6;
-  color: white;
 
-  .head {
+  .row_01 { height: 160px;}
-    width: 98%;
-    margin: auto;
-    margin-top: 15px;
-  }
 
-  .content {
+  .row_02 { overflow: hidden;
-    --keep-ratio: scaleX(1);
+    // --keep-ratio: scaleX(1);
-    width: 98%;
-    margin: auto;
     display: flex;
-    flex: 1;
     pointer-events: none;
-    margin-top: 19px;
+    margin-top: 14px;
 
     > div {
       pointer-events: auto;
     }
-
+    .unit_01{ flex-basis: 50%; margin-right: 14px;}
-    .content-l {
+    .unit_02{ flex-basis: 50%;}
-      width: 49.4%;
-      margin-right: 20px;
-    }
-
-    .content-m {
-      width: 260px;
   }
 
-    .content-r {
+  .row_03 {
-      width: 49.4%;
-    }
-  }
-
-  .foot {
-    --keep-ratio: scaleX(1);
-    width: 98%;
-    margin: auto;
     display: flex;
     flex: 1;
     pointer-events: none;
-    margin-top: 19px;
+    margin-top: 14px;
 
     > div {
       pointer-events: auto;
     }
 
-    .foot-l {
+    .unit_01 {
       width: 756px;
-      margin-right: 20px;
+      margin-right: 14px;
     }
 
-    .foot-m {
+    .unit_02 {
       width: 580px;
-      margin-right: 20px;
+      margin-right: 14px;
     }
 
-    .foot-r {
+    .unit_03 {
-      width: 500px;
+      flex:1;
     }
   }
 }