mt-fe-group/chenzhou
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 3d position

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
2024-01-19 09:47:47 +08:00
parent bbc22e41e0
commit d78e93b494
2 changed files with 358 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/MainPage.vue
View File

@@ -29,7 +29,7 @@ const handlePageChange = (page) => {
/>
<div v-else class="pages-wrapper">
<NavMenu @change="handlePageChange" />
<TriplePage v-if="currentPage === '3d'" line="10" />
<TriplePage v-if="currentPage === '3d'" line="8" />
<DataPage v-if="currentPage === 'data'" />
<AlertListPage v-if="currentPage === 'alert'" />
<RealtimePage v-if="currentPage === 'realtime'" />

358
src/pages/3D.vue
View File

@@ -9,7 +9,111 @@ const props = defineProps({
</script>
<template>
<div class="triple-page" :class="['line-' + line]"></div>
<div class="triple-page" :class="['line-' + line]">
<div class="info-1" v-if="line == '1'">
<div class="info"><h1>M7上片</h1></div>
<div class="info"><h1>M6上片</h1></div>
<div class="info"><h1>M7磨边机</h1></div>
<div class="info"><h1>M6磨边机</h1></div>
<div class="info"><h1>M7清洗机</h1></div>
<div class="info"><h1>M6清洗机</h1></div>
</div>
<div class="info-2" v-if="line == '2'">
<div class="info"><h1>Z7钻孔机</h1></div>
<div class="info"><h1>Z6钻孔机</h1></div>
<div class="info"><h1>S7清洗机</h1></div>
<div class="info"><h1>S6清洗机</h1></div>
<div class="info"><h1>S7前储片台</h1></div>
<div class="info"><h1>S6前储片台</h1></div>
<div class="info"><h1>S7丝印机</h1></div>
<div class="info"><h1>S6丝印机</h1></div>
<div class="info"><h1>S7固化炉</h1></div>
<div class="info"><h1>S6固化炉</h1></div>
<div class="info"><h1>S7后储片台</h1></div>
<div class="info"><h1>S6后储片台</h1></div>
</div>
<div class="info-3" v-if="line == '3'">
<div class="info"><h1>B1前储片台</h1></div>
</div>
<div class="info-4" v-if="line == '4'">
<div class="info"><h1>B2清洗机</h1></div>
<div class="info"><h1>B2下片</h1></div>
<div class="info"><h1>B2后储片台</h1></div>
</div>
<div class="info-5" v-if="line == '5'">
<div class="info"><h1>M5上片</h1></div>
<div class="info"><h1>M4上片</h1></div>
<div class="info"><h1>M3上片</h1></div>
<div class="info"><h1>M5磨边机</h1></div>
<div class="info"><h1>M4磨边机</h1></div>
<div class="info"><h1>M3磨边机</h1></div>
<div class="info"><h1>M5清洗机</h1></div>
<div class="info"><h1>M4清洗机</h1></div>
<div class="info"><h1>M3清洗机</h1></div>
</div>
<div class="info-6" v-if="line == '6'">
<div class="info"><h1>Z5钻孔机</h1></div>
<div class="info"><h1>Z4钻孔机</h1></div>
<div class="info"><h1>Z3钻孔机</h1></div>
<div class="info"><h1>S5清洗机</h1></div>
<div class="info"><h1>S4清洗机</h1></div>
<div class="info"><h1>S3清洗机</h1></div>
<div class="info"><h1>S5前储片台</h1></div>
<div class="info"><h1>S4前储片台</h1></div>
<div class="info"><h1>S3前储片台</h1></div>
<div class="info"><h1>S5丝印机</h1></div>
<div class="info"><h1>S4丝印机</h1></div>
<div class="info"><h1>S3丝印机</h1></div>
</div>
<div class="info-7" v-if="line == '7'">
<div class="info"><h1>S5后储片台</h1></div>
<div class="info"><h1>S4后储片台</h1></div>
<div class="info"><h1>S3后储片台</h1></div>
<div class="info"><h1>S5固化炉</h1></div>
<div class="info"><h1>S4固化炉</h1></div>
<div class="info"><h1>S3固化炉</h1></div>
<div class="info"><h1>B2前储片台</h1></div>
</div>
<div class="info-8" v-if="line == '8'">
<div class="info"><h1>B1前储片台</h1></div>
<div class="info"><h1>B1清洗机</h1></div>
<div class="info"><h1>B1下片</h1></div>
<div class="info"><h1>B1后储片台</h1></div>
</div>
<div class="info-9" v-if="line == '9'">
<div class="info"><h1>M2上片</h1></div>
<div class="info"><h1>M1上片</h1></div>
<div class="info"><h1>M2磨边机</h1></div>
<div class="info"><h1>M1磨边机</h1></div>
<div class="info"><h1>M2清洗机</h1></div>
<div class="info"><h1>M1清洗机</h1></div>
</div>
<div class="info-10" v-if="line == '10'">
<!-- <div class="info"><h1>M2清洗机</h1></div>
<div class="info"><h1>M1清洗机</h1></div> -->
<div class="info"><h1>Z2钻孔机</h1></div>
<div class="info"><h1>Z1钻孔机</h1></div>
<div class="info"><h1>S2清洗机</h1></div>
<div class="info"><h1>S1清洗机</h1></div>
<div class="info"><h1>S2前储片台</h1></div>
<div class="info"><h1>S1前储片台</h1></div>
<div class="info"><h1>S2丝印机</h1></div>
<div class="info"><h1>S1丝印机</h1></div>
</div>
<div class="info-11" v-if="line == '11'">
<div class="info"><h1>S7后储片台</h1></div>
<div class="info"><h1>S6后储片台</h1></div>
<div class="info"><h1>S7固化炉</h1></div>
<div class="info"><h1>S6固化炉</h1></div>
<div class="info"><h1>B3前储片台</h1></div>
</div>
<div class="info-12" v-if="line == '12'">
<div class="info"><h1>B3前储片台</h1></div>
<div class="info"><h1>B3清洗机</h1></div>
<div class="info"><h1>B3下片</h1></div>
<div class="info"><h1>B3后储片台</h1></div>
</div>
</div>
</template>
<style scoped>
@@ -23,8 +127,260 @@ const props = defineProps({
z-index: -1;
width: 100%;
height: 100%;
color: #fff;
}
.info {
width: 180px;
height: auto;
padding: 12px;
background: url(../assets/info-rect.png) 100% 100% / cover no-repeat;
display: inline-block;
position: absolute;
}
.info h1 {
font-size: 24px;
line-height: 1;
text-align: center;
letter-spacing: 1.5px;
font-weight: 500;
}
.info-1 .info:nth-child(1) {
left: 490px;
bottom: 250px;
}
.info-1 .info:nth-child(2) {
left: 790px;
bottom: 210px;
}
.info-1 .info:nth-child(3) {
left: 660px;
top: 480px;
}
.info-1 .info:nth-child(4) {
left: 910px;
top: 510px;
}
.info-1 .info:nth-child(5) {
left: 880px;
top: 220px;
}
.info-1 .info:nth-child(6) {
left: 1100px;
top: 260px;
}
/* info-2 */
.info-2 .info:nth-child(1) {
left: 580px;
bottom: 200px;
}
.info-2 .info:nth-child(2) {
left: 940px;
bottom: 200px;
}
.info-2 .info:nth-child(3) {
left: 640px;
bottom: 360px;
}
.info-2 .info:nth-child(4) {
left: 940px;
bottom: 360px;
}
.info-2 .info:nth-child(5) {
left: 660px;
bottom: 580px;
}
.info-2 .info:nth-child(6) {
left: 1060px;
bottom: 520px;
}
.info-2 .info:nth-child(7) {
left: 720px;
top: 190px;
}
.info-2 .info:nth-child(8) {
left: 1100px;
top: 260px;
}
.info-2 .info:nth-child(9) {
left: 800px;
top: 120px;
}
.info-2 .info:nth-child(10) {
left: 1100px;
top: 144px;
}
.info-2 .info:nth-child(11) {
left: 800px;
top: 10px;
}
.info-2 .info:nth-child(12) {
left: 1100px;
top: 20px;
}
/* info 3 */
.info-3 .info:nth-child(1) {
left: 500px;
bottom: 420px;
}
/* info 4 */
.info-4 .info:nth-child(1) {
left: 580px;
bottom: 200px;
}
.info-4 .info:nth-child(2) {
left: 800px;
top: 100px;
}
.info-4 .info:nth-child(3) {
left: 1240px;
top: 40px;
}
/* info 5 */
.info-5 .info:nth-child(1) {
left: 490px;
bottom: 300px;
}
.info-5 .info:nth-child(2) {
left: 740px;
bottom: 280px;
}
.info-5 .info:nth-child(3) {
left: 960px;
bottom: 240px;
}
.info-5 .info:nth-child(4) {
left: 460px;
bottom: 490px;
}
.info-5 .info:nth-child(5) {
left: 760px;
bottom: 490px;
}
.info-5 .info:nth-child(6) {
left: 1060px;
bottom: 450px;
}
.info-5 .info:nth-child(7) {
left: 570px;
top: 190px;
}
.info-5 .info:nth-child(8) {
left: 890px;
top: 200px;
}
.info-5 .info:nth-child(9) {
left: 1190px;
top: 200px;
}
/* info 6 */
.info-6 .info:nth-child(1) {
left: 480px;
bottom: 530px;
}
.info-6 .info:nth-child(2) {
left: 720px;
bottom: 470px;
}
.info-6 .info:nth-child(3) {
left: 990px;
bottom: 460px;
}
.info-6 .info:nth-child(4) {
left: 510px;
top: 260px;
}
.info-6 .info:nth-child(5) {
left: 810px;
top: 260px;
}
.info-6 .info:nth-child(6) {
left: 1110px;
top: 280px;
}
.info-6 .info:nth-child(7) {
left: 600px;
top: 110px;
}
.info-6 .info:nth-child(8) {
left: 900px;
top: 110px;
}
.info-6 .info:nth-child(9) {
left: 1200px;
top: 110px;
}
.info-6 .info:nth-child(10) {
left: 650px;
top: 20px;
}
.info-6 .info:nth-child(11) {
left: 950px;
top: 30px;
}
.info-6 .info:nth-child(12) {
left: 1230px;
top: 20px;
}
/* info 7 */
.info-7 .info:nth-child(1) {
left: 400px;
bottom: 440px;
}
.info-7 .info:nth-child(2) {
left: 670px;
bottom: 440px;
}
.info-7 .info:nth-child(3) {
left: 960px;
bottom: 450px;
}
.info-7 .info:nth-child(4) {
left: 310px;
bottom: 260px;
}
.info-7 .info:nth-child(5) {
left: 620px;
bottom: 260px;
}
.info-7 .info:nth-child(6) {
left: 1110px;
bottom: 240px;
}
.info-7 .info:nth-child(7) {
left: 800px;
top: 50px;
}
/* info 8 */
.info-8 .info:nth-child(1) {
left: 660px;
bottom: 550px;
}
.info-8 .info:nth-child(2) {
left: 990px;
bottom: 690px;
}
.info-8 .info:nth-child(3) {
left: 700px;
top: 80px;
}
.info-8 .info:nth-child(4) {
left: 1100px;
top: 80px;
}
/* other */
.line-1 {
background: url(../assets/model/F1.png) no-repeat;
background-size: 1920px 1080px;