update

src/views/3DOverview/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="v3d-outter" ref="v3d-outter">
     <!-- <V3DApp @3d-loaded="handle3DLoaded" /> -->
-    <!-- 正式内容: -->
     <!-- <div v-if="showPage" id="v3d-main-content"> -->
     <div v-if="true" id="v3d-main-content">
       <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
@@ -9,12 +8,16 @@
       <section id="techy-body-part">
         <div class="upper-part">
           <div class="techy-body-part__left">
-            <techy-container title="订单完成情况" icon="default" style="flex: 0;">
-              <LeftContentOrder />
-            </techy-container>
-            <techy-container title="公用工程消耗" icon="菱形叠加" style="flex:1;">
-              <LeftContentPublicConsume />
-            </techy-container>
+            <div class="order">
+              <techy-container title="订单完成情况" icon="default">
+                <LeftContentOrder />
+              </techy-container>
+            </div>
+            <div class="public">
+              <techy-container title="公用工程消耗" icon="菱形叠加">
+                <LeftContentPublicConsume />
+              </techy-container>
+            </div>
           </div>
 
           <div class="techy-body-part__middle">
@@ -41,38 +44,44 @@
           </div>
 
           <div class="techy-body-part__right">
-            <techy-container title="实时产量和能耗" icon="折角的菜单图标" style="height: 22vh">
-              <RightContentRealtimeProduction />
-            </techy-container>
+            <div class="realtime">
+              <techy-container title="实时产量和能耗" icon="折角的菜单图标">
+                <RightContentRealtimeProduction />
+              </techy-container>
+            </div>
 
-            <techy-container title="工序质量分析" icon="趋势放大镜图标" style="flex: 0">
-              <RightContentQualityAnalysis />
-            </techy-container>
+            <div class="ws-quality">
+              <techy-container title="工序质量分析" icon="趋势放大镜图标">
+                <RightContentQualityAnalysis />
+              </techy-container>
+            </div>
 
-            <techy-container title="产线成品率" icon="default" style="flex: 1">
-              <RightContentProductRate />
-            </techy-container>
+            <div class="production">
+              <techy-container title="产线成品率" icon="default">
+                <RightContentProductRate />
+              </techy-container>
+            </div>
           </div>
         </div>
 
         <!-- 底部 -->
         <div class="bottom-part">
-          <div style="width: 25%; min-width: 480px; height: 100%;">
+          <div class="eq-check">
             <techy-container title="设备巡检提示" icon="电脑警告菜单图标" style="flex: 0; align-self: stretch;">
               <LeftContentEquipmentCheck />
             </techy-container>
           </div>
-          <div style="flex: 1;">
+          <div class="ft-monitor" style="flex: 1;">
             <techy-container title="现场实时监控" icon="安全帽图标">
               <LeftContentMonitor />
             </techy-container>
           </div>
-          <div style="flex: 1;max-width: 320px;">
+          <div class="fault-analysis">
             <techy-container title="缺陷分类分析" icon="菜单放大镜图标">
               <RightContentFaultAnalysis />
             </techy-container>
           </div>
-          <div style="width: 25%; min-width: 480px;">
+          <div class="eq-alert">
             <techy-container title="设备报警提示" icon="电脑警告图标">
               <RightContentAlert />
             </techy-container>
@@ -160,6 +169,7 @@ export default {
   -webkit-font-smoothing: antialiased;
   font-weight: 300;
   position: relative;
+  /* overflow: auto; */
 }
 
 #v3d-outter *::-webkit-scrollbar {
@@ -195,48 +205,87 @@ export default {
 }
 
 #techy-body-part {
+  height: 20vh;
   flex: 1 1;
   display: flex;
-  /* gap: 16px; */
-  gap: calc(100vmin / 1920 * 36);
+  gap: calc(16px * var(--beilv));
   flex-direction: column;
 }
 
 .upper-part {
   flex: 1 1;
-  padding: calc(100vmin / 1920 * 36);
+  height: 20vh;
+  padding: calc(24px * var(--beilv));
   padding-bottom: 0;
   display: flex;
-  /* justify-content: space-between; */
-  gap: calc(100vmin / 1920 * 36);
+  gap: calc(16px * var(--beilv));
+}
+
+/* 订单完成情况 */
+.order {
+  height: calc(232px * var(--beilv));
+  flex: 0;
+}
+/* 公用工程消耗 */
+.public {
+  height: calc(472px * var(--beilv));
+  flex: 1;
+  overflow: hidden;
+}
+
+/* 实时产量和能耗 */
+.realtime {
+  height: calc(256px * var(--beilv));
+}
+/* 工序质量分析 */
+.ws-quality {
+  height: calc(228px * var(--beilv));
+  flex: 1;
+}
+/* 产线成品率 */
+.production {
+  height: calc(195px * var(--beilv));
 }
 
 .bottom-part {
-  height: 22vh;
-  padding: 0 calc(100vmin / 1920 * 36) calc(100vmin / 1920 * 36);
+  height: calc(224px * var(--beilv));
+  padding: 0 calc(24px * var(--beilv)) calc(24px * var(--beilv));
   display: flex;
-  /* gap: 16px; */
-  gap: calc(100vmin / 1920 * 36);
+  gap: calc(16px * var(--beilv));
+}
+
+/* 设备巡检提示 */
+.eq-check,
+.eq-alert {
+  width: calc(472px * var(--beilv));
+}
+
+/* 现场实时监控 */
+.ft-monitor {
+}
+
+/* 缺陷分类分析  */
+.fault-analysis {
+  width: calc(290px * var(--beilv));
+}
+
+/* 设备报警提示 */
+.eq-alert {
 }
 
 .techy-body-part__left,
 .techy-body-part__right {
-  height: 100%;
-  width: 25%;
-  min-width: 480px;
+  /* height: 100%; */
+  /* height: calc(512px * var(--beilv));
+  flex: 1; */
+  width: calc(472px * var(--beilv));
   overflow: hidden;
-  /* background: rgba(20, 69, 100, 0.425);
-  backdrop-filter: blur(2px); */
 
   display: flex;
   flex-direction: column;
-  gap: calc(100vmin / 1920 * 36);
+  gap: calc(16px * var(--beilv));
 }
 
-/* .techy-body-part__left {
-  width: 35%;
-} */
-
 .techy-body-part__right-col-2 {
   flex: 1;
   display: flex;