mt-fe-group
/
chenzhou
7
0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

update main-screen

master
DESKTOP-FUDKNA8\znjsz 6 maanden geleden
bovenliggende
1b33520b61
commit
8ff6fd02df
4 gewijzigde bestanden met toevoegingen van 305 en 159 verwijderingen
Zij-aan-zij weergave
Diff opties
Statistieken weergeven Download Patch-bestand Download Diff-bestand
  1. +4
    -13
      src/AlertListScreen.vue
  2. +119
    -0
      src/FullEqList.vue
  3. +3
    -146
      src/MainScreen.vue
  4. +179
    -0
      src/full-eq-list.css

+ 4
- 13
src/AlertListScreen.vue Bestand weergeven

@@ -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


+ 119
- 0
src/FullEqList.vue Bestand weergeven

@@ -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>

+ 3
- 146
src/MainScreen.vue Bestand weergeven

@@ -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;


+ 179
- 0
src/full-eq-list.css Bestand weergeven

@@ -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;
}

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan