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

This commit is contained in:
wangjr 2025-09-09 22:39:32 +08:00
parent 308fe083d2
commit 200067194c

View File

@ -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">
<iframe width="100%" height="100%" src="https://www.baidu.com"></iframe>
</div>
<div class="operatingStatus">
<div class="operatingStatus right">
<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%);
position: relative;
background: radial-gradient(50% 50% at 50% 50%, #0f3b8c 0%, #0e357e 33.17%, #041026 100%);
}
.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
top: 0;
height: calc(100% - 11.77rem); // 1217 * 1.154
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;
justify-content: space-between;
margin: 0px 100px; // 215 * 0.615
// position: relative;
// display: flex;
// 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{