feat: 4096*2160版本将iframe作为背景
This commit is contained in:
wangjr
parent
818eb2517e
commit
308fe083d2
@ -85,7 +85,7 @@ export const constantRouterMap = [
|
|||||||
{
|
{
|
||||||
path: 'productionCommandCenter',
|
path: 'productionCommandCenter',
|
||||||
name: 'productionCommandCenter',
|
name: 'productionCommandCenter',
|
||||||
component: () => import(/* webpackChunkName: "largeScreen" */ '@/views/largeScreen/ProductionCommandCenter2')
|
component: () => import(/* webpackChunkName: "largeScreen" */ '@/views/largeScreen/ProductionCommandCenter3')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
<!-- 4096*2160版本 多图表 -->
|
||||||
<script>
|
<script>
|
||||||
import ProductData from './components/ProductData.vue'
|
import ProductData from './components/ProductData.vue'
|
||||||
import Production from './components/Production.vue'
|
import Production from './components/Production.vue'
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
<!-- 4096*2160版本 6个图表-->
|
||||||
<script>
|
<script>
|
||||||
import ProductData from './components/ProductData.vue'
|
import ProductData from './components/ProductData.vue'
|
||||||
import Production from './components/Production.vue'
|
import Production from './components/Production.vue'
|
||||||
|
|||||||
309
src/views/largeScreen/ProductionCommandCenter3.vue
Normal file
309
src/views/largeScreen/ProductionCommandCenter3.vue
Normal file
@ -0,0 +1,309 @@
|
|||||||
|
<!-- 4096*2160版本 6个图表 iframe作为背景-->
|
||||||
|
<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 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="main">
|
||||||
|
<div id="middleTitle" class="middleTitle">
|
||||||
|
<!-- <div class="cockpit"><div class="cockpitFont">驾驶舱</div></div>
|
||||||
|
<div class="branchPlantProCap"><div class="branchPlantProCapFont">分厂产能</div></div> -->
|
||||||
|
<div class="middleTitleFont"><img src="@/assets/title.png" alt="" /></div>
|
||||||
|
<!-- <div class="productionEfficiency"><div class="productionEfficiencyFont">生产效能</div></div>
|
||||||
|
<div class="safetyManagement"><div class="safetyManagementFont">安全管理</div></div> -->
|
||||||
|
</div>
|
||||||
|
<div class="operatingStatusBox">
|
||||||
|
<div class="operatingStatus">
|
||||||
|
<div class="operatingStatusFont">工厂整体运行状态</div>
|
||||||
|
<div class="operatingStatusContent">
|
||||||
|
<div class="contentBox">
|
||||||
|
<div class="contentBoxFont">
|
||||||
|
<img src="@/assets/Component 1.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="contentBoxCont">
|
||||||
|
<product-data></product-data>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="contentBox">
|
||||||
|
<div class="contentBoxFont">
|
||||||
|
<img src="@/assets/Component 6.svg" alt="" />
|
||||||
|
<span>单位：t</span>
|
||||||
|
</div>
|
||||||
|
<div class="contentBoxCont">
|
||||||
|
<production></production>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="contentBox">
|
||||||
|
<div class="contentBoxFont">
|
||||||
|
<img src="@/assets/Component 8.svg" alt="" />
|
||||||
|
<span>百分比</span>
|
||||||
|
</div>
|
||||||
|
<div class="contentBoxCont">
|
||||||
|
<div class="contentBoxCont">
|
||||||
|
<product-quality-rate></product-quality-rate>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="operatingStatus1">
|
||||||
|
<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">
|
||||||
|
<div class="contentBoxFont">
|
||||||
|
<img src="@/assets/Component 12.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="contentBoxCont">
|
||||||
|
<PowerUsage />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="contentBox">
|
||||||
|
<div class="contentBoxFont">
|
||||||
|
<img src="@/assets/Component 13.svg" alt="" />
|
||||||
|
<span>单位：kWh/t</span>
|
||||||
|
</div>
|
||||||
|
<div class="contentBoxCont">
|
||||||
|
<div class="contentBoxCont">
|
||||||
|
<UnitPowerConsumption />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="contentBox">
|
||||||
|
<div class="contentBoxFont">
|
||||||
|
<img src="@/assets/Component 5.svg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="contentBoxCont">
|
||||||
|
<div class="contentBoxCont">
|
||||||
|
<furnace-temperature-stability></furnace-temperature-stability>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.main {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.middleTitle {
|
||||||
|
width: 256rem; // 415.8125 * 0.615
|
||||||
|
height: 11.77rem; // 10.19919 * 1.154
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-top: 16px; // 33.81 * 1.154
|
||||||
|
display: inline-block;
|
||||||
|
background-image: url('~@/assets/title1.svg');
|
||||||
|
background-size: auto 72%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top center;
|
||||||
|
}
|
||||||
|
.middleTitleFont {
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 3.47px 8.68px #010a14; // 3.008 * 1.154, 7.519 * 1.154
|
||||||
|
font-family: 'DingTalk JinBuTi';
|
||||||
|
font-size: 4.33rem; // 3.75 * 1.154
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 4.33rem; // 3.75 * 1.154
|
||||||
|
letter-spacing: 0.87rem; // 0.75 * 1.154
|
||||||
|
|
||||||
|
background: linear-gradient(180deg, #fff 0%, #96dbf2 66.32%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.cockpit {
|
||||||
|
width: 15.97rem; // 25.96338 * 0.615
|
||||||
|
height: 5.55rem; // 4.8125 * 1.154
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 41.77rem; // 67.92 * 0.615
|
||||||
|
background-image: url('~@/assets/Group 2785.svg');
|
||||||
|
}
|
||||||
|
.cockpitFont {
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 3.47px 8.68px #010a14;
|
||||||
|
font-family: 'DingTalk JinBuTi';
|
||||||
|
font-size: 3.25rem; // 2.8125 * 1.154
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.87rem;
|
||||||
|
|
||||||
|
background: linear-gradient(180deg, #fff 0%, #dff7ff 66.32%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.branchPlantProCap {
|
||||||
|
width: 15.97rem;
|
||||||
|
height: 5.55rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 57.84rem; // 94.04 * 0.615
|
||||||
|
background-image: url('~@/assets/Group 2789.png');
|
||||||
|
}
|
||||||
|
.branchPlantProCapFont {
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 3.47px 8.68px #010a14;
|
||||||
|
font-family: 'DingTalk JinBuTi';
|
||||||
|
font-size: 3.25rem;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.87rem;
|
||||||
|
|
||||||
|
background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.productionEfficiency {
|
||||||
|
width: 16.03rem; // 26.0625 * 0.615
|
||||||
|
height: 5.55rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 182.04rem; // 296 * 0.615
|
||||||
|
background-image: url('~@/assets/Group 2790.svg');
|
||||||
|
}
|
||||||
|
.productionEfficiencyFont {
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 3.47px 8.68px #010a14;
|
||||||
|
font-family: 'DingTalk JinBuTi';
|
||||||
|
font-size: 3.25rem;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.87rem;
|
||||||
|
|
||||||
|
background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.safetyManagement {
|
||||||
|
width: 16.03rem;
|
||||||
|
height: 5.55rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 198.03rem; // 322 * 0.615
|
||||||
|
background-image: url('~@/assets/Group 2791.svg');
|
||||||
|
}
|
||||||
|
.safetyManagementFont {
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 3.47px 8.68px #010a14;
|
||||||
|
font-family: 'DingTalk JinBuTi';
|
||||||
|
font-size: 3.25rem;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.87rem;
|
||||||
|
|
||||||
|
background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.operatingStatus1 {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
width: 100%; // 2236 * 0.615
|
||||||
|
height: 100%; // 1217 * 1.154
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.operatingStatusFont {
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'DingTalk JinBuTi';
|
||||||
|
font-size: 2.16rem; // 1.8745 * 1.154
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 180%;
|
||||||
|
letter-spacing: 0.43rem; // 0.37488 * 1.154
|
||||||
|
height: 4.04rem; // 3.5 * 1.154
|
||||||
|
flex-shrink: 0;
|
||||||
|
background-image: url('~@/assets/Group 1142814701.svg');
|
||||||
|
}
|
||||||
|
.operatingStatusBox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0px 100px; // 215 * 0.615
|
||||||
|
}
|
||||||
|
.operatingStatus {
|
||||||
|
width: 900px; // 941 * 0.615
|
||||||
|
}
|
||||||
|
.operatingStatusContent {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 1500px; // 1300 * 1.154
|
||||||
|
justify-content: space-around;
|
||||||
|
.contentBox {
|
||||||
|
width: 900px; // 936 * 0.615
|
||||||
|
height: 410px; // 343 * 1.154
|
||||||
|
flex-shrink: 0;
|
||||||
|
.contentBoxFont {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 99;
|
||||||
|
right: 0; // 335 * 0.615
|
||||||
|
top: 10px; // 9 * 1.154
|
||||||
|
font-family: 'DingTalk JinBuTi';
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 17px; // 15 * 1.154
|
||||||
|
line-height: 150%;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: #60f2ff;
|
||||||
|
&.half {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.contentBox1{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
> div {
|
||||||
|
width: 49%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user