src/views/3DOverview/components/LeftContentMonitor.vue

@@ -25,6 +25,7 @@ export default {
 
 <style scoped>
 .left-content-monitoring {
+  flex: 1;
   width: 100%;
   height: calc(100% - 32px);
   display: flex;

src/views/3DOverview/components/RightContentProductRate.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height: calc(100% - 36px); width: 100%;">
+  <div style="height: calc(100% - 36px); width: 100%; position: relative;">
     <div :id="id" ref="techy-line-chart" class="techy-chart" />
   </div>
 </template>
@@ -35,15 +35,15 @@ export default {
       option: {
         color: ['#59CBE8', '#E93CAC', '#FF7345', '#9452FF', '#6A6E87', '#52FFF1'],
         grid: {
-          top: '20%',
+          top: '45%',
           left: 0,
           right: 12,
-          bottom: 0,
+          bottom: '5%',
           containLabel: true
         },
         legend: {
           width: '72%',
-          top: 0,
+          top: '20%',
           right: 12,
           itemWidth: 12,
           itemHeight: 8,
@@ -268,7 +268,10 @@ export default {
 </script>
 <style scoped>
 .techy-chart {
-  height: 100%;
+  /* background: #cccc; */
+  position: absolute;
+  top: -36%;
+  height: 150%;
   width: 100%;
 }
 

src/views/3DOverview/components/RightContentQualityAnalysis.vue

@@ -55,6 +55,7 @@ export default {
   grid-auto-rows: min-content;
   gap: calc(4px * var(--beilv)) calc(6px * var(--beilv));
   justify-content: end;
+  align-content: center;
 }
 
 .analysis-item {

src/views/3DOverview/index.vue

@@ -43,7 +43,6 @@
             </div>
           </div>
 
-
           <div class="techy-body-part__right">
             <div class="realtime">
               <techy-container title="实时产量和能耗" icon="折角的菜单图标">
@@ -73,7 +72,7 @@
             </techy-container>
           </div>
           <div class="ft-monitor" style="flex: 1;">
-            <techy-container title="现场实时监控" icon="安全帽图标">
+            <techy-container title="现场实时监控" icon="安全帽图标" style="display: flex; flex-direction: column;">
               <LeftContentMonitor />
             </techy-container>
           </div>