@@ -6,6 +6,7 @@ import Container from "./components/Base/Container.vue"; | |||
import DatetimeTool from "./components/HeadTime.vue"; | |||
import AppHeader from "./components/Base/Header.vue"; | |||
import Tools from "./components/Tools.vue"; | |||
import FullEqList from "./FullEqList.vue"; | |||
const mainContainer = ref(null); | |||
const props = defineProps({ | |||
@@ -47,24 +48,14 @@ function handleResolutionChange(width, height) { | |||
<template> | |||
<div id="main-container" ref="mainContainer" class="main-container"> | |||
<div id="main-container__fulleq"></div> | |||
<div id="main-container__fulleq"> | |||
<FullEqList /> | |||
</div> | |||
<DatetimeTool /> | |||
<Tools @change-resolution="handleResolutionChange" /> | |||
<AppHeader /> | |||
<div class="alert-list-page"> | |||
<div | |||
style=" | |||
position: absolute; | |||
top: 0; | |||
left: -279px; | |||
width: calc(100% + 279px); | |||
height: 100%; | |||
background: #ccc3; | |||
" | |||
> | |||
<!-- <ThreeD :line="line ?? '1'" /> --> | |||
</div> | |||
<Container class="alert-list" title="报警列表" icon="cube"> | |||
<div class="alert-list__table" style=""> | |||
<el-table | |||
@@ -0,0 +1,119 @@ | |||
<!-- | |||
filename: FullEqList.vue | |||
author: liubin | |||
date: 2024-03-05 14:13:06 | |||
description: | |||
--> | |||
<script setup> | |||
import "./full-eq-list.css"; | |||
</script> | |||
<template> | |||
<div class="absolute v-1 tag-container"> | |||
<span class="name-tag">M7上片</span> | |||
<span class="name-tag">M6上片</span> | |||
<span class="name-tag">M5上片</span> | |||
<span class="name-tag">M4上片</span> | |||
<span class="name-tag">M3上片</span> | |||
<span class="name-tag">M2上片</span> | |||
<span class="name-tag">M1上片</span> | |||
</div> | |||
<div class="absolute v-2 tag-container"> | |||
<span class="name-tag">M7磨边机</span> | |||
<span class="name-tag">M6磨边机</span> | |||
<span class="name-tag">M5磨边机</span> | |||
<span class="name-tag">M4磨边机</span> | |||
<span class="name-tag">M3磨边机</span> | |||
<span class="name-tag">M2磨边机</span> | |||
<span class="name-tag">M1磨边机</span> | |||
</div> | |||
<div class="absolute v-3 tag-container"> | |||
<span class="name-tag">M7清洗机</span> | |||
<span class="name-tag">M6清洗机</span> | |||
<span class="name-tag">M5清洗机</span> | |||
<span class="name-tag">M4清洗机</span> | |||
<span class="name-tag">M3清洗机</span> | |||
<span class="name-tag">M2清洗机</span> | |||
<span class="name-tag">M1清洗机</span> | |||
</div> | |||
<div class="absolute z-1 v-4 tag-container"> | |||
<span class="name-tag">Z7钻孔机</span> | |||
<span class="name-tag">Z6钻孔机</span> | |||
<span class="name-tag">Z5钻孔机</span> | |||
<span class="name-tag">Z4钻孔机</span> | |||
<span class="name-tag">Z3钻孔机</span> | |||
<span class="name-tag">Z2钻孔机</span> | |||
<span class="name-tag">Z1钻孔机</span> | |||
</div> | |||
<div class="absolute z-1 v-5 tag-container"> | |||
<span class="name-tag">S7清洗机</span> | |||
<span class="name-tag">S6清洗机</span> | |||
<span class="name-tag">S5清洗机</span> | |||
<span class="name-tag">S4清洗机</span> | |||
<span class="name-tag">S3清洗机</span> | |||
<span class="name-tag">S2清洗机</span> | |||
<span class="name-tag">S1清洗机</span> | |||
</div> | |||
<div class="absolute z-1 v-6 tag-container"> | |||
<span class="name-tag">S7前储片台</span> | |||
<span class="name-tag">S6前储片台</span> | |||
<span class="name-tag">S5前储片台</span> | |||
<span class="name-tag">S4前储片台</span> | |||
<span class="name-tag">S3前储片台</span> | |||
<span class="name-tag">S2前储片台</span> | |||
<span class="name-tag">S1前储片台</span> | |||
</div> | |||
<div class="absolute z-2 v-7 tag-container"> | |||
<span class="name-tag">S7丝印机</span> | |||
<span class="name-tag">S6丝印机</span> | |||
<span class="name-tag">S5丝印机</span> | |||
<span class="name-tag">S4丝印机</span> | |||
<span class="name-tag">S3丝印机</span> | |||
<span class="name-tag">S2丝印机</span> | |||
<span class="name-tag">S1丝印机</span> | |||
</div> | |||
<div class="absolute z-2 v-8 tag-container"> | |||
<span class="name-tag">S7固化炉</span> | |||
<span class="name-tag">S6固化炉</span> | |||
<span class="name-tag">S5固化炉</span> | |||
<span class="name-tag">S4固化炉</span> | |||
<span class="name-tag">S3固化炉</span> | |||
<span class="name-tag">S2固化炉</span> | |||
<span class="name-tag">S1固化炉</span> | |||
</div> | |||
<div class="absolute z-1 v-10 tag-container"> | |||
<span class="name-tag">D2镀膜机</span> | |||
<span class="name-tag">D1镀膜机</span> | |||
</div> | |||
<div class="absolute z-1 v-9 tag-container"> | |||
<span class="name-tag">S7后储片台</span> | |||
<span class="name-tag">S6后储片台</span> | |||
<span class="name-tag">S5后储片台</span> | |||
<span class="name-tag">S4后储片台</span> | |||
<span class="name-tag">S3后储片台</span> | |||
<span class="name-tag">S2后储片台</span> | |||
<span class="name-tag">S1后储片台</span> | |||
</div> | |||
<div class="absolute z-3 tag-container"> | |||
<span class="name-tag">B3前储片台</span> | |||
<span class="name-tag">B2前储片台</span> | |||
<span class="name-tag">B1前储片台</span> | |||
</div> | |||
<div class="absolute z-3 b-1 tag-container"> | |||
<span class="name-tag">B3清洗机</span> | |||
<span class="name-tag">B2清洗机</span> | |||
<span class="name-tag">B1清洗机</span> | |||
</div> | |||
<div class="absolute z-3 b-2 tag-container"> | |||
<span class="name-tag">B3下片</span> | |||
<span class="name-tag">B2下片</span> | |||
<span class="name-tag">B1下片</span> | |||
</div> | |||
<div class="absolute z-3 b-3 tag-container"> | |||
<span class="name-tag">B3后储片台</span> | |||
<span class="name-tag">B2后储片台</span> | |||
<span class="name-tag">B1后储片台</span> | |||
</div> | |||
</template> | |||
<style scoped lang="scss"></style> |
@@ -9,6 +9,7 @@ import TodayYield from "./components/mainscreen/TodayYield.vue"; | |||
import SumYield from "./components/mainscreen/SumYield.vue"; | |||
import TodayRate from "./components/mainscreen/TodayRate.vue"; | |||
import SumRate from "./components/mainscreen/SumRate.vue"; | |||
import FullEqList from "./FullEqList.vue"; | |||
const mainContainer = ref(null); | |||
const props = defineProps({ | |||
@@ -50,52 +51,8 @@ function handleResolutionChange(width, height) { | |||
<template> | |||
<div id="main-container" ref="mainContainer" class="main-container"> | |||
<div id="main-container__fulleq" style="background-color: #cc03"> | |||
<div class="absolute v-1 tag-container"> | |||
<span class="name-tag">M1上片</span> | |||
<span class="name-tag">M2上片</span> | |||
<span class="name-tag">M3上片</span> | |||
<span class="name-tag">M4上片</span> | |||
<span class="name-tag">M5上片</span> | |||
<span class="name-tag">M6上片</span> | |||
<span class="name-tag">M7上片</span> | |||
</div> | |||
<div class="absolute v-2 tag-container"> | |||
<span class="name-tag">M1磨边机</span> | |||
<span class="name-tag">M2磨边机</span> | |||
<span class="name-tag">M3磨边机</span> | |||
<span class="name-tag">M4磨边机</span> | |||
<span class="name-tag">M5磨边机</span> | |||
<span class="name-tag">M6磨边机</span> | |||
<span class="name-tag">M7磨边机</span> | |||
</div> | |||
<div class="absolute v-3 tag-container"> | |||
<span class="name-tag">M1清洗机</span> | |||
<span class="name-tag">M2清洗机</span> | |||
<span class="name-tag">M3清洗机</span> | |||
<span class="name-tag">M4清洗机</span> | |||
<span class="name-tag">M5清洗机</span> | |||
<span class="name-tag">M6清洗机</span> | |||
<span class="name-tag">M7清洗机</span> | |||
</div> | |||
<div class="absolute z-1 v-4 tag-container"> | |||
<span class="name-tag">Z1钻孔机</span> | |||
<span class="name-tag">Z2钻孔机</span> | |||
<span class="name-tag">Z3钻孔机</span> | |||
<span class="name-tag">Z4钻孔机</span> | |||
<span class="name-tag">Z5钻孔机</span> | |||
<span class="name-tag">Z6钻孔机</span> | |||
<span class="name-tag">Z7钻孔机</span> | |||
</div> | |||
<div class="absolute z-1 v-5 tag-container"> | |||
<span class="name-tag">S1清洗机</span> | |||
<span class="name-tag">S2清洗机</span> | |||
<span class="name-tag">S3清洗机</span> | |||
<span class="name-tag">S4清洗机</span> | |||
<span class="name-tag">S5清洗机</span> | |||
<span class="name-tag">S6清洗机</span> | |||
<span class="name-tag">S7清洗机</span> | |||
</div> | |||
<div id="main-container__fulleq"> | |||
<FullEqList /> | |||
</div> | |||
<DatetimeTool /> | |||
<Tools @change-resolution="handleResolutionChange" /> | |||
@@ -212,106 +169,6 @@ function handleResolutionChange(width, height) { | |||
background: url(./assets/bg.png) 100% / cover no-repeat; | |||
} | |||
#main-container__fulleq { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 10000; | |||
background: url(./assets/full-lines.png) 100% / cover no-repeat; | |||
} | |||
.name-tag { | |||
padding: 5px; | |||
border-radius: 5px; | |||
background: #ccc3; | |||
backdrop-filter: blur(3px); | |||
color: #000a; | |||
font-size: 12px; | |||
/* font-weight: 600; */ | |||
transition: background 0.1s ease-out; | |||
user-select: none; | |||
width: 72px; | |||
text-align: center; | |||
position: absolute; | |||
/* cursor: pointer; */ | |||
/* transform: rotate(-45deg); */ | |||
box-shadow: 0 0 5px 2px #0003; | |||
} | |||
/* .name-tag:hover { | |||
background: #666c; | |||
} */ | |||
.tag-container > .name-tag:first-child { | |||
bottom: 214px; | |||
left: -128px; | |||
} | |||
.tag-container > .name-tag:nth-child(2) { | |||
bottom: 182px; | |||
left: -100px; | |||
} | |||
.tag-container > .name-tag:nth-child(3) { | |||
bottom: 150px; | |||
left: -88px; | |||
} | |||
.tag-container > .name-tag:nth-child(4) { | |||
bottom: 118px; | |||
left: -68px; | |||
} | |||
.tag-container > .name-tag:nth-child(5) { | |||
bottom: 86px; | |||
left: -52px; | |||
} | |||
.tag-container > .name-tag:nth-child(6) { | |||
bottom: 32px; | |||
left: -20px; | |||
} | |||
.tag-container > .name-tag:nth-child(7) { | |||
top: 0; | |||
left: 0; | |||
} | |||
.absolute { | |||
position: absolute; | |||
padding: 8px; | |||
background: #f001; | |||
} | |||
.v-1 { | |||
bottom: 160px; | |||
left: 430px; | |||
} | |||
.v-2 { | |||
bottom: 200px; | |||
left: 480px; | |||
} | |||
.v-3 { | |||
bottom: 250px; | |||
left: 620px; | |||
} | |||
.z-1 > .name-tag:first-child { | |||
bottom: 205px; | |||
left: -155px; | |||
} | |||
.z-1 > .name-tag:nth-child(2) { | |||
bottom: 180px; | |||
left: -130px; | |||
} | |||
.v-4 { | |||
bottom: 300px; | |||
left: 730px; | |||
} | |||
.v-5 { | |||
bottom: 340px; | |||
left: 790px; | |||
} | |||
.pages-wrapper { | |||
flex: 1; | |||
display: flex; | |||
@@ -0,0 +1,179 @@ | |||
#main-container__fulleq { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
background: url(./assets/full-lines.png) 100% / cover no-repeat; | |||
} | |||
.name-tag { | |||
padding: 5px; | |||
border-radius: 5px; | |||
background: #ccc3; | |||
backdrop-filter: blur(3px); | |||
color: #000a; | |||
font-size: 12px; | |||
/* font-weight: 600; */ | |||
transition: background 0.1s ease-out; | |||
user-select: none; | |||
width: 72px; | |||
text-align: center; | |||
position: absolute; | |||
/* cursor: pointer; */ | |||
/* transform: rotate(-45deg); */ | |||
box-shadow: 0 0 5px 2px #0003; | |||
} | |||
/* .name-tag:hover { | |||
background: #666c; | |||
} */ | |||
.tag-container > .name-tag:first-child { | |||
bottom: 214px; | |||
left: -128px; | |||
} | |||
.tag-container > .name-tag:nth-child(2) { | |||
bottom: 182px; | |||
left: -100px; | |||
} | |||
.tag-container > .name-tag:nth-child(3) { | |||
bottom: 150px; | |||
left: -88px; | |||
} | |||
.tag-container > .name-tag:nth-child(4) { | |||
bottom: 118px; | |||
left: -68px; | |||
} | |||
.tag-container > .name-tag:nth-child(5) { | |||
bottom: 86px; | |||
left: -52px; | |||
} | |||
.tag-container > .name-tag:nth-child(6) { | |||
bottom: 32px; | |||
left: -20px; | |||
} | |||
.tag-container > .name-tag:nth-child(7) { | |||
top: 0; | |||
left: 0; | |||
} | |||
.absolute { | |||
position: absolute; | |||
padding: 8px; | |||
} | |||
.v-1 { | |||
bottom: 160px; | |||
left: 430px; | |||
} | |||
.v-2 { | |||
bottom: 200px; | |||
left: 480px; | |||
} | |||
.v-3 { | |||
bottom: 250px; | |||
left: 620px; | |||
} | |||
.z-1 > .name-tag:first-child { | |||
bottom: 205px; | |||
left: -155px; | |||
} | |||
.z-1 > .name-tag:nth-child(2) { | |||
bottom: 180px; | |||
left: -130px; | |||
} | |||
.v-4 { | |||
bottom: 300px; | |||
left: 730px; | |||
} | |||
.v-5 { | |||
bottom: 340px; | |||
left: 780px; | |||
} | |||
.v-6 { | |||
bottom: 360px; | |||
left: 840px; | |||
} | |||
.z-2 > .name-tag:first-child { | |||
bottom: 205px; | |||
left: -140px; | |||
} | |||
.z-2 > .name-tag:nth-child(2) { | |||
bottom: 180px; | |||
left: -110px; | |||
} | |||
.z-2 > .name-tag:nth-child(3) { | |||
bottom: 152px; | |||
left: -70px; | |||
} | |||
.z-2 > .name-tag:nth-child(4) { | |||
bottom: 128px; | |||
left: -50px; | |||
} | |||
.z-2 > .name-tag:nth-child(5) { | |||
bottom: 100px; | |||
left: -36px; | |||
} | |||
.v-7 { | |||
bottom: 380px; | |||
left: 880px; | |||
} | |||
.v-8 { | |||
bottom: 410px; | |||
left: 930px; | |||
} | |||
.v-9 { | |||
bottom: 440px; | |||
left: 1020px; | |||
} | |||
.v-10 { | |||
bottom: 260px; | |||
left: 1100px; | |||
} | |||
.z-3 { | |||
bottom: 550px; | |||
left: 1400px; | |||
/* background: #c003; */ | |||
} | |||
.z-3 > .name-tag:first-child { | |||
bottom: 235px; | |||
left: -155px; | |||
} | |||
.z-3 > .name-tag:nth-child(2) { | |||
bottom: 188px; | |||
left: -85px; | |||
} | |||
.z-3 > .name-tag:nth-child(3) { | |||
bottom: 120px; | |||
left: 35px; | |||
} | |||
.b-1 { | |||
bottom: 570px; | |||
left: 1440px; | |||
} | |||
.b-2 { | |||
bottom: 600px; | |||
left: 1490px; | |||
} | |||
.b-3 { | |||
bottom: 620px; | |||
left: 1530px; | |||
} |