@@ -6,6 +6,7 @@ import Container from "./components/Base/Container.vue"; | |||||
import DatetimeTool from "./components/HeadTime.vue"; | import DatetimeTool from "./components/HeadTime.vue"; | ||||
import AppHeader from "./components/Base/Header.vue"; | import AppHeader from "./components/Base/Header.vue"; | ||||
import Tools from "./components/Tools.vue"; | import Tools from "./components/Tools.vue"; | ||||
import FullEqList from "./FullEqList.vue"; | |||||
const mainContainer = ref(null); | const mainContainer = ref(null); | ||||
const props = defineProps({ | const props = defineProps({ | ||||
@@ -47,24 +48,14 @@ function handleResolutionChange(width, height) { | |||||
<template> | <template> | ||||
<div id="main-container" ref="mainContainer" class="main-container"> | <div id="main-container" ref="mainContainer" class="main-container"> | ||||
<div id="main-container__fulleq"></div> | |||||
<div id="main-container__fulleq"> | |||||
<FullEqList /> | |||||
</div> | |||||
<DatetimeTool /> | <DatetimeTool /> | ||||
<Tools @change-resolution="handleResolutionChange" /> | <Tools @change-resolution="handleResolutionChange" /> | ||||
<AppHeader /> | <AppHeader /> | ||||
<div class="alert-list-page"> | <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"> | <Container class="alert-list" title="报警列表" icon="cube"> | ||||
<div class="alert-list__table" style=""> | <div class="alert-list__table" style=""> | ||||
<el-table | <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 SumYield from "./components/mainscreen/SumYield.vue"; | ||||
import TodayRate from "./components/mainscreen/TodayRate.vue"; | import TodayRate from "./components/mainscreen/TodayRate.vue"; | ||||
import SumRate from "./components/mainscreen/SumRate.vue"; | import SumRate from "./components/mainscreen/SumRate.vue"; | ||||
import FullEqList from "./FullEqList.vue"; | |||||
const mainContainer = ref(null); | const mainContainer = ref(null); | ||||
const props = defineProps({ | const props = defineProps({ | ||||
@@ -50,52 +51,8 @@ function handleResolutionChange(width, height) { | |||||
<template> | <template> | ||||
<div id="main-container" ref="mainContainer" class="main-container"> | <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> | </div> | ||||
<DatetimeTool /> | <DatetimeTool /> | ||||
<Tools @change-resolution="handleResolutionChange" /> | <Tools @change-resolution="handleResolutionChange" /> | ||||
@@ -212,106 +169,6 @@ function handleResolutionChange(width, height) { | |||||
background: url(./assets/bg.png) 100% / cover no-repeat; | 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 { | .pages-wrapper { | ||||
flex: 1; | flex: 1; | ||||
display: flex; | 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; | |||||
} |