feat: 4096*2160图表调整（现在6个）
This commit is contained in:
wangjr
parent
720ab40f9c
commit
818eb2517e
@ -85,7 +85,7 @@ export const constantRouterMap = [
|
||||
{
|
||||
path: 'productionCommandCenter',
|
||||
name: 'productionCommandCenter',
|
||||
component: () => import(/* webpackChunkName: "largeScreen" */ '@/views/largeScreen/ProductionCommandCenter1')
|
||||
component: () => import(/* webpackChunkName: "largeScreen" */ '@/views/largeScreen/ProductionCommandCenter2')
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
303
src/views/largeScreen/ProductionCommandCenter2.vue
Normal file
303
src/views/largeScreen/ProductionCommandCenter2.vue
Normal file
@ -0,0 +1,303 @@
|
||||
<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="2000" height="1480" 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%);
|
||||
}
|
||||
.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 {
|
||||
width: 2000px; // 2236 * 0.615
|
||||
height: 1480px; // 1217 * 1.154
|
||||
}
|
||||
.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