feat: 4096*2160版本调整iframe可操作

src/views/largeScreen/ProductionCommandCenter3.vue

@@ -2,33 +2,19 @@
 <script>
 import ProductData from './components/ProductData.vue'
 import Production from './components/Production.vue'
-import PowerConsumption from './components/PowerConsumption.vue'
-import ProductOutput from './components/ProductOutput.vue'
 import ProductQualityRate from './components/ProductQualityRate.vue'
-import ProductQualificationRate from './components/ProductQualificationRate.vue'
-import FurnaceProductionContribution from './components/FurnaceProductionContribution.vue'
-import SafetyEvents from './components/SafetyEvents.vue'
-import ElectrodeConsumption from './components/ElectrodeConsumption.vue'
-import UnitPowerConsumption from './components/UnitPowerConsumption.vue'
 import FurnaceTemperatureStability from './components/FurnaceTemperatureStability.vue'
+import UnitPowerConsumption from './components/UnitPowerConsumption.vue'
 import PowerUsage from './components/PowerUsage.vue'
-import ReactiveCompensationEfficiency from './components/ReactiveCompensationEfficiency.vue'
 
 export default {
   components: {
     ProductData,
     Production,
-    PowerConsumption,
-    ProductOutput,
     ProductQualityRate,
-    ProductQualificationRate,
-    FurnaceProductionContribution,
-    SafetyEvents,
     FurnaceTemperatureStability,
-    ElectrodeConsumption,
-    PowerUsage,
     UnitPowerConsumption,
-    ReactiveCompensationEfficiency
+    PowerUsage
   }
 }
 </script>
@@ -43,7 +29,10 @@ export default {
       <div class="safetyManagement"><div class="safetyManagementFont">安全管理</div></div> -->
     </div>
     <div class="operatingStatusBox">
-      <div class="operatingStatus">
+      <div class="operatingStatus1">
+        <iframe width="100%" height="100%" src="https://e.baidu.com/?refer=50008978"></iframe>
+      </div>
+      <div class="operatingStatus left">
         <div class="operatingStatusFont">工厂整体运行状态</div>
         <div class="operatingStatusContent">
           <div class="contentBox">
@@ -76,10 +65,7 @@ export default {
           </div>
         </div>
       </div>
-      <div class="operatingStatus1">
+      <div class="operatingStatus right">
-        <iframe width="100%" height="100%" src="https://www.baidu.com"></iframe>
-      </div>
-      <div class="operatingStatus">
         <div class="operatingStatusFont">能耗与电耗分析</div>
         <div class="operatingStatusContent">
           <div class="contentBox">
@@ -119,12 +105,14 @@ export default {
 
 <style scoped lang="less">
 .main {
+  position: relative;
   width: 256rem; // 416 * 0.615
   height: 135rem; // 114.1875 * 1.154
-  // background: radial-gradient(50% 50% at 50% 50%, #0f3b8c 0%, #0e357e 33.17%, #041026 100%);
+  background: radial-gradient(50% 50% at 50% 50%, #0f3b8c 0%, #0e357e 33.17%, #041026 100%);
-  position: relative;
 }
 .middleTitle {
+  position: relative;
+  z-index: 9999;
   width: 256rem; // 415.8125 * 0.615
   height: 11.77rem; // 10.19919 * 1.154
   flex-shrink: 0;
@@ -236,10 +224,10 @@ export default {
 }
 .operatingStatus1 {
   position: absolute;
-  z-index: -1;
+  z-index: 1;
   width: 100%; // 2236 * 0.615
-  height: 100%; // 1217 * 1.154
+  height: calc(100% - 11.77rem); // 1217 * 1.154
-  top: 0;
+  top: 11.77rem; // 10.19919 * 1.154
   left: 0;
 }
 .operatingStatusFont {
@@ -255,12 +243,23 @@ export default {
   background-image: url('~@/assets/Group 1142814701.svg');
 }
 .operatingStatusBox {
-  display: flex;
+  // position: relative;
-  justify-content: space-between;
+  // display: flex;
-  margin: 0px 100px; // 215 * 0.615
+  // justify-content: space-between;
+  // margin: 0px 100px; // 215 * 0.615
 }
 .operatingStatus {
+  position: absolute;
+  z-index: 9999;
   width: 900px; // 941 * 0.615
+  top: 11.77rem;
+  margin-top: 5rem;
+  &.left {
+    left: 100px;
+  }
+  &.right {
+    right: 100px;
+  }
 }
 .operatingStatusContent {
   display: flex;
@@ -295,7 +294,7 @@ export default {
     .contentBoxCont {
       background: linear-gradient(126.97deg, rgba(6, 11, 40, 0.74) 28.26%, rgba(10, 14, 35, 0.71) 91.2%);
       border: 0.94px solid #3675c9;
-      height: 344px; // 298 * 1.154
+      height: 380px; // 298 * 1.154
     }
   }
   .contentBox1{