xwgd/font-end
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main #1

Merged
wangjiarun merged 4 commits from main into dev 2025-09-07 17:59:25 +08:00
Conversation 0 Commits 4 Files Changed 47 +154 -55
3 changed files with 154 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f357808c2b - Show all commits

5
src/assets/Component 2.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="700" height="45" viewBox="0 0 700 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M331.727 43.9333L295.822 1H3.8147e-06" stroke="#5EBFFF" stroke-width="0.878432"/>
<path d="M0.937073 1.93335V43.9333" stroke="#3DD4FF" stroke-width="0.878432"/>
<path d="M88.0817 14.7406C86.8449 16.296 85.0084 17.7296 82.5722 19.0414C85.0084 20.0158 88.0161 20.8872 91.5955 21.6556L89.8808 24.0449C87.8568 23.5952 86.0016 23.0892 84.315 22.527C82.6284 21.9648 81.0262 21.3089 79.5082 20.5593C75.9851 22.0772 72.1435 23.2391 67.9832 24.0449L66.409 21.768C70.6255 20.9435 74.0455 20.0158 76.6691 18.9851C75.451 18.273 74.2048 17.411 72.9305 16.399L71.3845 18.0856H67.7302C70.4662 15.2559 72.7525 12.5386 74.589 9.93379H78.0184L76.7535 11.7047H86.3951C86.9386 11.7047 87.3977 11.789 87.7725 11.9577C88.1473 12.1264 88.4097 12.3606 88.5596 12.6604C88.6533 12.8478 88.7001 13.0446 88.7001 13.2507C88.7001 13.7192 88.494 14.2158 88.0817 14.7406ZM74.589 14.4876C76.1632 15.7244 77.8404 16.7926 79.6207 17.6921C81.4947 16.7364 83.0501 15.6963 84.2869 14.5719C84.4556 14.422 84.5399 14.3095 84.5399 14.2346C84.5399 14.1596 84.3993 14.1221 84.1182 14.1221H74.8701C74.8514 14.1409 74.7577 14.2627 74.589 14.4876ZM86.5076 33.6304H69.4449L70.3444 26.2656C70.4381 25.4223 70.6911 24.8039 71.1034 24.4103C71.5344 24.0168 72.1716 23.82 73.0149 23.82H85.1583C85.8892 23.82 86.4514 23.9887 86.8449 24.326C87.2384 24.6446 87.4352 25.1225 87.4352 25.7596C87.4352 25.9658 87.4258 26.1157 87.4071 26.2094L86.5076 33.6304ZM72.537 31.1567H83.9215L84.5399 26.2937H73.1273L72.537 31.1567ZM124.4 12.1545L124.09 14.6281H103.092L103.402 12.1545H112.481L111.722 9.76513H114.927L115.77 12.1545H124.4ZM104.976 24.8039C104.357 28.8517 103.373 31.9906 102.024 34.2207L99.3538 33.5179C100.16 32.075 100.787 30.6039 101.237 29.1047C101.649 27.6992 101.968 26.1438 102.193 24.4385L102.614 21.515C102.746 20.7092 102.98 20.147 103.317 19.8284C103.673 19.4911 104.235 19.3225 105.004 19.3225H108.349L107.225 15.5839H109.951L111.16 19.3225H115.826L117.513 15.612H120.436L118.75 19.3225H123.837L123.556 21.8524H105.425L104.976 24.8039ZM154.927 19.8847H138.455L139.354 12.6604C139.56 11.3861 140.263 10.749 141.462 10.749H153.662C154.318 10.749 154.824 10.927 155.18 11.2831C155.536 11.6391 155.714 12.1451 155.714 12.801C155.714 13.0071 155.705 13.1664 155.686 13.2789L154.927 19.8847ZM152.875 13.1383H141.996L141.49 17.4672H152.397L152.875 13.1383ZM144.133 33.2087H134.491L135.644 24.0168C135.85 22.7612 136.524 22.1335 137.667 22.1335H143.177C143.833 22.1335 144.329 22.3115 144.667 22.6675C145.023 23.0049 145.201 23.5015 145.201 24.1574C145.201 24.3822 145.192 24.5509 145.173 24.6633L144.133 33.2087ZM156.136 33.2649H146.185L147.253 24.0168C147.459 22.7612 148.143 22.1335 149.305 22.1335H155.152C155.789 22.1335 156.276 22.3115 156.613 22.6675C156.97 23.0049 157.148 23.5108 157.148 24.1855C157.148 24.3916 157.138 24.5509 157.119 24.6633L156.136 33.2649ZM142.671 24.4666H138.145L137.33 30.8475H141.912L142.671 24.4666ZM154.59 24.4666H149.727L149.052 30.9037H153.887L154.59 24.4666ZM191.863 12.1545L191.554 14.6281H170.556L170.865 12.1545H179.945L179.186 9.76513H182.39L183.233 12.1545H191.863ZM172.439 24.8039C171.821 28.8517 170.837 31.9906 169.488 34.2207L166.817 33.5179C167.623 32.075 168.251 30.6039 168.701 29.1047C169.113 27.6992 169.432 26.1438 169.656 24.4385L170.078 21.515C170.209 20.7092 170.444 20.147 170.781 19.8284C171.137 19.4911 171.699 19.3225 172.467 19.3225H175.812L174.688 15.5839H177.415L178.623 19.3225H183.29L184.976 15.612H187.9L186.213 19.3225H191.301L191.02 21.8524H172.889L172.439 24.8039ZM223.206 16.7645H205.159L205.721 11.9858C205.834 10.9364 206.518 10.4117 207.773 10.4117H221.969C222.55 10.4117 223 10.5803 223.318 10.9176C223.637 11.2362 223.758 11.686 223.684 12.2669L223.206 16.7645ZM221.041 12.042H208.336L208.223 12.8853H220.929L221.041 12.042ZM207.97 15.1341H220.676L220.76 14.2627H208.054L207.97 15.1341ZM225.37 19.463H202.573L202.77 17.664H225.595L225.37 19.463ZM203.22 30.4821L203.444 28.683H211.877L212.018 27.5305H204.063L204.738 22.0772C204.794 21.5713 204.991 21.1683 205.328 20.8685C205.684 20.5687 206.152 20.4188 206.733 20.4188H221.182C222.662 20.4188 223.327 21.0653 223.178 22.3583L222.643 27.5305H214.717L214.576 28.683H223.318L223.093 30.4821H214.379L214.267 31.6346H224.92L224.667 33.546H201.252L201.477 31.6346H211.568L211.681 30.4821H203.22ZM212.58 22.1053H207.211L207.099 23.1735H212.468L212.58 22.1053ZM220.479 23.1735L220.591 22.1053H215.279L215.166 23.1735H220.479ZM212.299 24.7477H206.902L206.79 25.8439H212.187L212.299 24.7477ZM214.885 25.8439H220.226L220.338 24.7477H214.998L214.885 25.8439Z" fill="#60F2FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
src/assets/title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

204
src/views/largeScreen/productionCommandCenter.vue
View File

@ -1,157 +1,251 @@
<script> <script></script>
</script>
<template> <template>
<div class="main"> <div class="main">
<div id="middleTitle" class="middleTitle"> <div id="middleTitle" class="middleTitle">
<div class="cockpit"><div class="cockpitFont">驾驶舱</div></div> <!-- <div class="cockpit"><div class="cockpitFont">驾驶舱</div></div>
<div class="branchPlantProCap"><div class="branchPlantProCapFont">分厂产能</div></div> <div class="branchPlantProCap"><div class="branchPlantProCapFont">分厂产能</div></div> -->
<div class="middleTitleFont">雄伟光大生产指挥中心</div> <div class="middleTitleFont"><img src="@/assets/title.png" alt="" /></div>
<div class="productionEfficiency"><div class="productionEfficiencyFont">生产效能</div></div> <!-- <div class="productionEfficiency"><div class="productionEfficiencyFont">生产效能</div></div>
<div class="safetyManagement"><div class="safetyManagementFont">安全管理</div></div> <div class="safetyManagement"><div class="safetyManagementFont">安全管理</div></div> -->
</div>
<div></div>
<div class="operatingStatusBox">
<div class="operatingStatus"> <div class="operatingStatus">
<div class="operatingStatusFont">工厂整体运行状态</div> <div class="operatingStatusFont">工厂整体运行状态</div>
<div class="operatingStatusContent">
<div class="contentBox">
<div class="contentBoxFont">
<img src="@/assets/Component 1.svg" alt="" />
</div>
<div class="contentBoxCont"></div>
</div>
<div class="contentBox">
<div class="contentBoxFont">
<img src="@/assets/Component 6.svg" alt="" />
<span>单位：t</span>
</div>
<div class="contentBoxCont"></div>
</div>
<div class="contentBox">
<div class="contentBoxFont">
<img src="@/assets/Component 7.svg" alt="" />
<span>单位：kWh/t</span>
</div>
<div class="contentBoxCont"></div>
</div>
</div>
</div>
<div class="operatingStatus">
<div class="operatingStatusFont">产能与产品结构</div>
<div class="operatingStatusContent">
<div class="contentBox">
<div class="contentBoxFont">
<img src="@/assets/Component 2.svg" alt="" />
<span>单位：t</span>
</div>
<div class="contentBoxCont"></div>
</div>
<div class="contentBox">
<div class="contentBoxFont">
<img src="@/assets/Component 8.svg" alt="" />
<span>百分比</span>
</div>
<div class="contentBoxCont"></div>
</div>
<div class="contentBox">
<div class="contentBoxFont">
<img src="@/assets/Component 7.svg" alt="" />
<span>单位：kWh/t</span>
</div>
<div class="contentBoxCont"></div>
</div>
</div>
</div>
<div class="operatingStatus1">
<iframe width="2236" height="1217"></iframe>
</div>
<div class="operatingStatus">
<div class="operatingStatusFont">安全监测</div>
</div>
<div class="operatingStatus">
<div class="operatingStatusFont">能耗与电耗分析</div>
</div> </div>
<a-row :gutter="24">
<a-col ></a-col>
</a-row>
</div> </div>
</div> </div>
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.main { .main {
width: 416rem; width: 416rem;
height: 114.1875rem; height: 114.1875rem;
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%);
} }
.middleTitle{ .middleTitle {
width: 415.8125rem; width: 415.8125rem;
height: 10.19919rem; height: 10.19919rem;
flex-shrink: 0; flex-shrink: 0;
padding-top:3.44rem; padding-top: 33.81px;
display: inline-block; display: inline-block;
background-image: url("~@/assets/title1.svg"); background-image: url('~@/assets/title1.svg');
} }
.middleTitleFont{ .middleTitleFont {
text-align: center; text-align: center;
text-shadow: 0 3.008px 7.519px #010A14; text-shadow: 0 3.008px 7.519px #010a14;
font-family: "DingTalk JinBuTi"; font-family: 'DingTalk JinBuTi';
font-size: 3.75rem; font-size: 3.75rem;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 3.75rem; /* 100% */ line-height: 3.75rem; /* 100% */
letter-spacing: 0.75rem; letter-spacing: 0.75rem;
background: linear-gradient(180deg, #FFF 0%, #96DBF2 66.32%); background: linear-gradient(180deg, #fff 0%, #96dbf2 66.32%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.cockpit{ .cockpit {
width: 25.96338rem; width: 25.96338rem;
height: 4.8125rem; height: 4.8125rem;
flex-shrink: 0; flex-shrink: 0;
margin-left: 67.92rem; margin-left: 67.92rem;
background-image: url("~@/assets/Group 2785.svg"); background-image: url('~@/assets/Group 2785.svg');
} }
.cockpitFont{ .cockpitFont {
text-align: center; text-align: center;
text-shadow: 0 3.008px 7.519px #010A14; text-shadow: 0 3.008px 7.519px #010a14;
font-family: "DingTalk JinBuTi"; font-family: 'DingTalk JinBuTi';
font-size: 2.8125rem; font-size: 2.8125rem;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
//line-height: 2.8125rem; /* 100% */ //line-height: 2.8125rem; /* 100% */
letter-spacing: 0.75rem; letter-spacing: 0.75rem;
background: linear-gradient(180deg, #FFF 0%, #DFF7FF 66.32%); background: linear-gradient(180deg, #fff 0%, #dff7ff 66.32%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.branchPlantProCap{ .branchPlantProCap {
width: 25.96338rem; width: 25.96338rem;
height: 4.8125rem; height: 4.8125rem;
flex-shrink: 0; flex-shrink: 0;
margin-left: 94.04rem; margin-left: 94.04rem;
background-image: url("~@/assets/Group 2789.png"); background-image: url('~@/assets/Group 2789.png');
} }
.branchPlantProCapFont{ .branchPlantProCapFont {
text-align: center; text-align: center;
text-shadow: 0 3.008px 7.519px #010A14; text-shadow: 0 3.008px 7.519px #010a14;
font-family: "DingTalk JinBuTi"; font-family: 'DingTalk JinBuTi';
font-size: 2.8125rem; font-size: 2.8125rem;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
//line-height: 2.8125rem; /* 100% */ //line-height: 2.8125rem; /* 100% */
letter-spacing: 0.75rem; letter-spacing: 0.75rem;
background: linear-gradient(180deg, rgba(177, 245, 255, 0.80) 0%, rgba(150, 219, 242, 0.80) 66.32%); background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.productionEfficiency{ .productionEfficiency {
width: 26.0625rem; width: 26.0625rem;
height: 4.8125rem; height: 4.8125rem;
flex-shrink: 0; flex-shrink: 0;
margin-left: 296rem; margin-left: 296rem;
background-image: url("~@/assets/Group 2790.svg"); background-image: url('~@/assets/Group 2790.svg');
} }
.productionEfficiencyFont{ .productionEfficiencyFont {
text-align: center; text-align: center;
text-shadow: 0 3.008px 7.519px #010A14; text-shadow: 0 3.008px 7.519px #010a14;
font-family: "DingTalk JinBuTi"; font-family: 'DingTalk JinBuTi';
font-size: 2.8125rem; font-size: 2.8125rem;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
//line-height: 2.8125rem; /* 100% */ //line-height: 2.8125rem; /* 100% */
letter-spacing: 0.75rem; letter-spacing: 0.75rem;
background: linear-gradient(180deg, rgba(177, 245, 255, 0.80) 0%, rgba(150, 219, 242, 0.80) 66.32%); background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.safetyManagement{ .safetyManagement {
width: 26.0625rem; width: 26.0625rem;
height: 4.8125rem; height: 4.8125rem;
flex-shrink: 0; flex-shrink: 0;
margin-left: 322rem; margin-left: 322rem;
background-image: url("~@/assets/Group 2791.svg"); background-image: url('~@/assets/Group 2791.svg');
} }
.safetyManagementFont{ .safetyManagementFont {
text-align: center; text-align: center;
text-shadow: 0 3.008px 7.519px #010A14; text-shadow: 0 3.008px 7.519px #010a14;
font-family: "DingTalk JinBuTi"; font-family: 'DingTalk JinBuTi';
font-size: 2.8125rem; font-size: 2.8125rem;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
//line-height: 2.8125rem; /* 100% */ //line-height: 2.8125rem; /* 100% */
letter-spacing: 0.75rem; letter-spacing: 0.75rem;
background: linear-gradient(180deg, rgba(177, 245, 255, 0.80) 0%, rgba(150, 219, 242, 0.80) 66.32%); background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
background-clip: text; background-clip: text;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.operatingStatus{ .operatingStatus {
width: 58.8125rem; width: 941px;
height: 3.5rem;
flex-shrink: 0;
margin-left: 13.8rem;
background-image: url("~@/assets/Group 1142814701.svg");
} }
.operatingStatusFont{ .operatingStatus1 {
color: #FFF; width: 2236px;
margin-left: 3.12rem; height: 1217px;
font-family: "DingTalk JinBuTi"; }
.operatingStatusFont {
color: #fff;
font-family: 'DingTalk JinBuTi';
font-size: 1.8745rem; font-size: 1.8745rem;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 180%; /* 2.81175rem */ line-height: 180%; /* 2.81175rem */
letter-spacing: 0.37488rem; letter-spacing: 0.37488rem;
height: 3.5rem;
flex-shrink: 0;
background-image: url('~@/assets/Group 1142814701.svg');
}
.operatingStatusBox {
display: flex;
justify-content: space-between;
margin: 0px 215px;
}
.operatingStatusContent {
display: flex;
flex-direction: column;
height: 1300px;
justify-content: space-evenly;
.contentBox {
width: 936px;
height: 343px;
flex-shrink: 0;
.contentBoxFont {
span {
/* 单位：t */
position: relative;
left: -335px;
font-family: 'DingTalk JinBuTi';
font-style: italic;
font-weight: 400;
font-size: 15px;
line-height: 150%;
/* or 22px */
text-align: center;
letter-spacing: 0.2em;
color: #60f2ff;
}
}
.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: 298px;
}
}
} }
</style> </style>