fix the merge of the dashboard
This commit is contained in:
Alessio
@@ -8,13 +8,145 @@
|
||||
.dashboard{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// background-image: url("../../assets/icons/png/bg.png");
|
||||
background-color: white;
|
||||
background-image: url("../../assets/icons/png/bg.png");
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-start;
|
||||
|
||||
.header{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
|
||||
.ribbon-container{
|
||||
width: 496px;
|
||||
height: 80px;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.box-date{
|
||||
display: flex;
|
||||
width: 40%;
|
||||
margin-left: 100px;
|
||||
|
||||
div{
|
||||
flex-shrink: 0;
|
||||
font-size: 47px;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
time {
|
||||
flex-shrink: 0;
|
||||
transition: color 200ms ease-in-out;
|
||||
margin-left: 28px;
|
||||
display: flex;
|
||||
font-size: 120px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.arch{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
|
||||
.box-gauge{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.gauge-container{
|
||||
display: inline-block;
|
||||
|
||||
.gauge{
|
||||
width: 126px;
|
||||
height: 92px;
|
||||
}
|
||||
|
||||
path.value{
|
||||
stroke: @color-clear-blue;
|
||||
stroke-width: 5;
|
||||
}
|
||||
|
||||
text{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
path.dial{
|
||||
stroke: @color-whitegrey;
|
||||
stroke-width: 5;
|
||||
}
|
||||
}
|
||||
|
||||
span{
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 53px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
label{
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.header-buttons{
|
||||
display: inline-block;
|
||||
|
||||
.box-close-dashboard{
|
||||
height: 70px;
|
||||
text-align: right;
|
||||
|
||||
button.modal-close{
|
||||
background-color: #4B4B4B;
|
||||
margin: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-info {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
font-size: 25px;
|
||||
color: @color-input-light;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
margin-right: 21px;
|
||||
|
||||
button.profile {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url("../profile.png");
|
||||
color: #000;
|
||||
background-size: cover;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
&.colorWhite {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
div{
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
section{
|
||||
margin-top: 250px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 15px;
|
||||
@@ -284,141 +416,3 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
// out: false, sourceMap: false, main: ../style.less
|
||||
@import "grid-system.less";
|
||||
@import "colors.less";
|
||||
@import "fonts.less";
|
||||
@modal: modal;
|
||||
.dashboard{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background-image: url("../../assets/icons/png/bg.png");
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
|
||||
.ribbon-container{
|
||||
width: 496px;
|
||||
height: 80px;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.box-date{
|
||||
display: flex;
|
||||
width: 40%;
|
||||
margin-left: 100px;
|
||||
|
||||
div{
|
||||
flex-shrink: 0;
|
||||
font-size: 47px;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
time {
|
||||
flex-shrink: 0;
|
||||
transition: color 200ms ease-in-out;
|
||||
margin-left: 28px;
|
||||
display: flex;
|
||||
font-size: 120px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.arch{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
|
||||
.box-gauge{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.gauge-container{
|
||||
display: inline-block;
|
||||
|
||||
.gauge{
|
||||
width: 126px;
|
||||
height: 92px;
|
||||
}
|
||||
|
||||
path.value{
|
||||
stroke: @color-clear-blue;
|
||||
stroke-width: 5;
|
||||
}
|
||||
|
||||
text{
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
path.dial{
|
||||
stroke: @color-whitegrey;
|
||||
stroke-width: 5;
|
||||
}
|
||||
}
|
||||
|
||||
span{
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 53px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
label{
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.header-buttons{
|
||||
display: inline-block;
|
||||
|
||||
.box-close-dashboard{
|
||||
height: 70px;
|
||||
text-align: right;
|
||||
|
||||
button.modal-close{
|
||||
background-color: #4B4B4B;
|
||||
margin: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-info {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
font-size: 25px;
|
||||
color: @color-input-light;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
margin-right: 21px;
|
||||
|
||||
button.profile {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url("../profile.png");
|
||||
color: #000;
|
||||
background-size: cover;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
&.colorWhite {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
div{
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -44,7 +44,7 @@ html {
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
display: block;
|
||||
z-index: 9999;
|
||||
z-index: 1000;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
pointer-events: all;
|
||||
@@ -79,17 +79,7 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// .slide-enter-active,
|
||||
// .slide-leave-active
|
||||
// {
|
||||
// transition: left,right 0s ease-in-out;
|
||||
// }
|
||||
|
||||
// .slide-enter,
|
||||
// .slide-leave-to {
|
||||
// transition: right,left 0s ease-in-out
|
||||
// }
|
||||
|
||||
|
||||
.sidebar{
|
||||
|
||||
|
||||
@@ -4040,12 +4040,119 @@
|
||||
.dashboard {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
background-image: url("../../assets/icons/png/bg.png");
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.dashboard .header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.dashboard .header .ribbon-container {
|
||||
width: 496px;
|
||||
height: 80px;
|
||||
z-index: 900;
|
||||
}
|
||||
.dashboard .header .box-date {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
margin-left: 100px;
|
||||
}
|
||||
.dashboard .header .box-date div {
|
||||
flex-shrink: 0;
|
||||
font-size: 47px;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
}
|
||||
.dashboard .header .box-date time {
|
||||
flex-shrink: 0;
|
||||
transition: color 200ms ease-in-out;
|
||||
margin-left: 28px;
|
||||
display: flex;
|
||||
font-size: 120px;
|
||||
}
|
||||
.dashboard .header .arch {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
.dashboard .header .arch .box-gauge {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.dashboard .header .arch .box-gauge .gauge-container {
|
||||
display: inline-block;
|
||||
}
|
||||
.dashboard .header .arch .box-gauge .gauge-container .gauge {
|
||||
width: 126px;
|
||||
height: 92px;
|
||||
}
|
||||
.dashboard .header .arch .box-gauge .gauge-container path.value {
|
||||
stroke: #1791ff;
|
||||
stroke-width: 5;
|
||||
}
|
||||
.dashboard .header .arch .box-gauge .gauge-container text {
|
||||
font-size: 20px;
|
||||
}
|
||||
.dashboard .header .arch .box-gauge .gauge-container path.dial {
|
||||
stroke: #dddddd;
|
||||
stroke-width: 5;
|
||||
}
|
||||
.dashboard .header .arch .box-gauge span {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 53px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.dashboard .header .arch .box-gauge label {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dashboard .header .header-buttons {
|
||||
display: inline-block;
|
||||
}
|
||||
.dashboard .header .header-buttons .box-close-dashboard {
|
||||
height: 70px;
|
||||
text-align: right;
|
||||
}
|
||||
.dashboard .header .header-buttons .box-close-dashboard button.modal-close {
|
||||
background-color: #4B4B4B;
|
||||
margin: 23px;
|
||||
}
|
||||
.dashboard .header .header-buttons .user-info {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
font-size: 25px;
|
||||
color: #4b4b4b;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
margin-right: 21px;
|
||||
}
|
||||
.dashboard .header .header-buttons .user-info button.profile {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url("../profile.png");
|
||||
color: #000;
|
||||
background-size: cover;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.dashboard .header .header-buttons .user-info button.profile.colorWhite {
|
||||
color: #FFF;
|
||||
}
|
||||
.dashboard .header .header-buttons .user-info div {
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.dashboard section {
|
||||
margin-top: 250px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 15px;
|
||||
@@ -4251,114 +4358,6 @@
|
||||
text-align: center;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
.dashboard {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background-image: url("../../assets/icons/png/bg.png");
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
}
|
||||
.dashboard .ribbon-container {
|
||||
width: 496px;
|
||||
height: 80px;
|
||||
z-index: 900;
|
||||
}
|
||||
.dashboard .box-date {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
margin-left: 100px;
|
||||
}
|
||||
.dashboard .box-date div {
|
||||
flex-shrink: 0;
|
||||
font-size: 47px;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
}
|
||||
.dashboard .box-date time {
|
||||
flex-shrink: 0;
|
||||
transition: color 200ms ease-in-out;
|
||||
margin-left: 28px;
|
||||
display: flex;
|
||||
font-size: 120px;
|
||||
}
|
||||
.dashboard .arch {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
.dashboard .arch .box-gauge {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.dashboard .arch .box-gauge .gauge-container {
|
||||
display: inline-block;
|
||||
}
|
||||
.dashboard .arch .box-gauge .gauge-container .gauge {
|
||||
width: 126px;
|
||||
height: 92px;
|
||||
}
|
||||
.dashboard .arch .box-gauge .gauge-container path.value {
|
||||
stroke: #1791ff;
|
||||
stroke-width: 5;
|
||||
}
|
||||
.dashboard .arch .box-gauge .gauge-container text {
|
||||
font-size: 20px;
|
||||
}
|
||||
.dashboard .arch .box-gauge .gauge-container path.dial {
|
||||
stroke: #dddddd;
|
||||
stroke-width: 5;
|
||||
}
|
||||
.dashboard .arch .box-gauge span {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 53px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.dashboard .arch .box-gauge label {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
.dashboard .header-buttons {
|
||||
display: inline-block;
|
||||
}
|
||||
.dashboard .header-buttons .box-close-dashboard {
|
||||
height: 70px;
|
||||
text-align: right;
|
||||
}
|
||||
.dashboard .header-buttons .box-close-dashboard button.modal-close {
|
||||
background-color: #4B4B4B;
|
||||
margin: 23px;
|
||||
}
|
||||
.dashboard .header-buttons .user-info {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
font-size: 25px;
|
||||
color: #4b4b4b;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
margin-right: 21px;
|
||||
}
|
||||
.dashboard .header-buttons .user-info button.profile {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url("../profile.png");
|
||||
color: #000;
|
||||
background-size: cover;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.dashboard .header-buttons .user-info button.profile.colorWhite {
|
||||
color: #FFF;
|
||||
}
|
||||
.dashboard .header-buttons .user-info div {
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.modal.pirometro-info {
|
||||
width: 1820px;
|
||||
height: 980px;
|
||||
@@ -4781,12 +4780,6 @@
|
||||
.circle-gantt .specific div:first-of-type label {
|
||||
margin-left: 37%;
|
||||
}
|
||||
.main-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.circle-gantt .specific div:last-of-type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -4843,6 +4836,12 @@ body {
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.main-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
.container #app nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -4856,7 +4855,7 @@ body {
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
display: block;
|
||||
z-index: 9999;
|
||||
z-index: 1000;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
pointer-events: all;
|
||||
|
||||
@@ -17,7 +17,6 @@ import ShowVuotoInfo from "@/app_modules_thermo/setup/vuoto/show-vuoto-info.vue"
|
||||
import ShowImbutituraInfo from "@/app_modules_thermo/setup/imbutitura/show-imbutitura-info.vue";
|
||||
import ShowOpzioniInfo from "@/app_modules_thermo/setup/opzioni/show-opzioni-info.vue";
|
||||
import AvvioProduzione from "@/app_modules_thermo/setup/avvio-pruduzione/avvio-produzione.vue";
|
||||
import Dashboard from "@/app_modules_thermo/dashboard/dashboard.vue";
|
||||
import ShowArretramentoRiscaldiInfo from "@/app_modules_thermo/processo/arretramento-riscaldi/show-arretramento-riscladi-info.vue";
|
||||
// import { DataService } from "./services/dataService";
|
||||
// import { ToolingService } from "./services/toolingService";
|
||||
@@ -53,7 +52,6 @@ let HMIScreenshotInterval;
|
||||
let HMIprodTimeout;
|
||||
let RerenderInterval;
|
||||
|
||||
messageService.subscribeToChannel("show-dashboard-info", () => { ModalHelper.ShowModal(Dashboard); });
|
||||
messageService.subscribeToChannel("show-avvio-produzione-info", () => { ModalHelper.ShowModal(AvvioProduzione); });
|
||||
messageService.subscribeToChannel("show-arretramento-riscaldi-info", () => { ModalHelper.ShowModal(ShowArretramentoRiscaldiInfo); });
|
||||
messageService.subscribeToChannel("show-opzioni-info", () => { ModalHelper.ShowModal(ShowOpzioniInfo); });
|
||||
|
||||
@@ -1,48 +1,6 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<section>
|
||||
<div class="specific">
|
||||
<div>
|
||||
<img src="assets/icons/png/inv.png">
|
||||
<label>218°C</label>
|
||||
</div>
|
||||
<div>
|
||||
<button>-</button>
|
||||
<div class="specific">
|
||||
<label>setpoint</label>
|
||||
<label>278°C</label>
|
||||
</div>
|
||||
<button>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>TEMPO RESTANTE</label>
|
||||
<label>5:18:40</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<div class="actual">
|
||||
<div class="specific">
|
||||
<label>PEZZI/ORA</label>
|
||||
<label>18,2</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>TEMPO/CICLO</label>
|
||||
<label>3'12''</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>GRAFICO</div>
|
||||
<componente></componente>
|
||||
<aside class="scrollable">
|
||||
<componente v-for="iter in components" :key="iter"></componente>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./dashboard.ts"></script>
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<div class="header">
|
||||
<app-ribbon
|
||||
:status="{'alarm': ribbonStatus == 3, 'working': ribbonStatus == 1, 'warning': ribbonStatus == 2}"
|
||||
:expanded="ribbonStatus>1"
|
||||
@@ -100,6 +58,44 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<section>
|
||||
<div class="specific">
|
||||
<div>
|
||||
<img src="assets/icons/png/inv.png">
|
||||
<label>218°C</label>
|
||||
</div>
|
||||
<div>
|
||||
<button>-</button>
|
||||
<div class="specific">
|
||||
<label>setpoint</label>
|
||||
<label>278°C</label>
|
||||
</div>
|
||||
<button>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>TEMPO RESTANTE</label>
|
||||
<label>5:18:40</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<div class="actual">
|
||||
<div class="specific">
|
||||
<label>PEZZI/ORA</label>
|
||||
<label>18,2</label>
|
||||
</div>
|
||||
<div class="specific">
|
||||
<label>TEMPO/CICLO</label>
|
||||
<label>3'12''</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>GRAFICO</div>
|
||||
<componente></componente>
|
||||
<aside class="scrollable">
|
||||
<componente v-for="iter in components" :key="iter"></componente>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./dashboard.ts"></script>
|
||||
@@ -18,5 +18,5 @@ export default class Setup extends Vue {
|
||||
|
||||
showDashboard() {
|
||||
appModelActions.ShowDashboard(this.$store);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -80,8 +80,6 @@
|
||||
></setup-button>
|
||||
|
||||
<div class="setup-play">
|
||||
<!-- <img class="dim" src="assets/icons/svg/setup-play.svg" @click="sendMessage('show-avvio-produzione-info')"/> -->
|
||||
<img class="dim" src="assets/icons/svg/setup-play.svg" @click="sendMessage('show-dashboard-info')"/>
|
||||
<img class="dim" src="assets/icons/svg/setup-play.svg" @click="showDashboard()"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user