fix archinterface and dashboard

This commit is contained in:
Alessio
2020-05-14 11:02:47 +02:00
parent eb631908bf
commit 2a030da24a
12 changed files with 69 additions and 322 deletions
@@ -1,109 +1,38 @@
// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
.kW {
width: 16px;
height: 11px;
font-family: WorkSans;
font-size: 12px;
font-weight: 800;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
margin-left:20px ;
color: @color-darkish-blue;
}
.Potenza {
width: 65px;
height: 65px;
font-family: WorkSans;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
margin-left: -8px;
color: @color-darkish-blue;
}
// }
// #SecondArchInfo
// .Combined-Shape {
// width: 68px;
// height: 50px;
// box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.5);
// background-color: var(--light-grey-blue);
// }
// .Combined-Shape-Copy-3 {
// width: 55px;
// height: 21px;
// background-color: var(--darkish-blue);
// }
// .Valor2{
// width: 27px;
// height: 23px;
// font-family: WorkSans;
// font-size: 18.9px;
// font-weight: 500;
// font-stretch: normal;
// font-style: normal;
// line-height: normal;
// letter-spacing: normal;
// text-align: center;
// color: var(--darkish-blue);
// }
.Bar {
width: 16px;
height: 11px;
font-family: WorkSans;
font-size: 9.7px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: @color-darkish-blue;
}
.Aria {
width: 23px;
height: 14px;
font-family: WorkSans;
font-size: 10px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: end;
color: @color-darkish-blue;
}
// #ThirdArchInfo
// .Combined-Shape-Copy-3 {
// width: 64px;
// height: 49px;
// background-color: var(--darkish-blue);
// }
// .Valor3{
// width: 50px;
// height: 23px;
// .kW {
// width: 16px;
// height: 11px;
// font-family: WorkSans;
// font-size: 18.9px;
// font-weight: 500;
// font-size: 12px;
// font-weight: 800;
// font-stretch: normal;
// font-style: normal;
// line-height: normal;
// letter-spacing: normal;
// text-align: center;
// margin-left:20px ;
// color: @color-darkish-blue;
// }
// .Potenza {
// width: 65px;
// height: 65px;
// font-family: WorkSans;
// font-size: 14px;
// font-weight: normal;
// font-stretch: normal;
// font-style: normal;
// line-height: normal;
// letter-spacing: normal;
// text-align: center;
// margin-left: -8px;
// color: @color-darkish-blue;
// }
// .bar {
// width: 16px;
// .Bar {
// width: 16px;
// height: 11px;
// font-family: WorkSans;
// font-size: 9.7px;
@@ -115,172 +44,19 @@
// text-align: center;
// color: @color-darkish-blue;
// }
// .Vuoto {
// width: 35px;
// .Aria {
// width: 23px;
// height: 14px;
// font-family: WorkSans;
// font-size: 12px;
// font-size: 10px;
// font-weight: normal;
// font-stretch: normal;
// font-style: normal;
// line-height: normal;
// letter-spacing: normal;
// text-align: center;
// text-align: end;
// color: @color-darkish-blue;
// }
// .divider-columnt {
// width: 2px;
// height: 48px;
// // background-color: @color-light-grey-blue;
// }
// .wrapper {
// position: relative;
// margin: auto;
// }
//da scommentare
// .wrapper{
// width: 90px;
// height: 90px;
// display:flex;
// }
// .meter {
// width: 50%; height: 50%;
// transform: rotateX(180deg);
// }
// //da scommentare
// .meter{
// width: 50%; height: 50%;
// margin-top:200px;
// // width: 300%;
// // height: 100%;
// transform: rotateX(180deg);
// }
// .outline, #mask {
// stroke: white;
// stroke-width: 65;
// }
// .range {
// stroke-width: 60;
// }
// .lbl {
// background-color: #4B4C51;
// border-radius: 2px;
// color: white;
// font-family: 'courier new';
// font-size: 15pt;
// font-weight: bold;
// padding: 4px 4px 2px 4px;
// right: -48px;
// top: 57%;
// }
// .meter_needle {
// height: 40%;
// left: 0;
// margin: auto;
// position: absolute;
// right: 0;
// top: 10%;
// transform-origin: bottom center;
// /*orientation fix*/
// transform: rotate(270deg);
// }
// .backgound-circle{
// stroke-width: 10;
// fill: none;
// stroke-dasharray: 145,80;
// stroke:gray ;
// }
// .value-circle{
// stroke-width: 10;
// stroke-dasharray: 145,80;
// fill: none;
// stroke:blue ;
// }
// //da scommentare
// path {
// stroke-width: 7;
// stroke-dasharray: none;
// fill: none;
// }
// #background-circle {
// stroke: grey;
// }
// #value-circle {
// stroke: blue;
// }
body {
// background-color: rgba(0,0,0,0.8);
color:@color-darkish-blue;
font-family: Hevletica, sans-serif;
}
.info {
clear: both;
padding: 10px;
font-size: 0.9em;
}
/* ------ Default Style ---------- */
.gauge-container {
width: 90px;
height: 90px;
display: block;
float: left;
padding: -130px;
// background-color: rgb(167, 154, 154); background container
margin: 56px;
border-radius: 3px;
position: relative;
margin-top:60px;
margin-left: -10px;
}
.label {
// display: inline-block;
color:@color-darkish-blue;
font-family: monospace;
font-size: 1.5em;
// padding: 5px 10px;
margin-left:10px;
}
.gauge-container > .gauge > .dial {
stroke:@color-darkish-blue;
stroke-width: 2;
// fill: rgba(0,0,0,0);
}
.gauge-container > .gauge > .value {
stroke:@color-darkish-blue;
stroke-width: 2;
// fill: rgba(0,0,0,0);
}
.gauge-container > .gauge > .value-text { //valore sotto l'arco
color:@color-darkish-blue;
font-family: sans-serif;
font-weight: bold;
font-size: 3.9px;
margin-top:10px;
}
/* ------- Alternate Style ------- */
.wrapper {
height: 20px;
float: left;
margin: 10px;
overflow: hidden;
}
.wrapper > .gauge-container {
margin: 0;
}
.gauge-container.three > .gauge > .dial {
stroke:@color-silver;
@@ -291,7 +67,7 @@ margin-left:10px;
stroke-width: 5;
}
.gauge-container.three > .gauge > .value-text {
fill: color-darkish-blue;
fill: @color-darkish-blue;
}
.labels{
display:flex;
@@ -1,29 +1,28 @@
// out: false, sourceMap: false, main: ../style.less
@import "colors.less";
body {
background-color: rgba(0,0,0,0.8);
color: #999;
font-family: Hevletica, sans-serif;
}
// body {
// background-color: rgba(0,0,0,0.8);
// color: #999;
// font-family: Hevletica, sans-serif;
// }
.info {
clear: both;
padding: 10px;
font-size: 0.9em;
}
a.link {
color: rgb(47, 227, 255);
text-decoration: none;
}
// .info {
// clear: both;
// padding: 10px;
// font-size: 0.9em;
// }
// a.link {
// color: rgb(47, 227, 255);
// text-decoration: none;
// }
.warn {
font-size: 0.8em;
background-color: darken(orange, 15%);
color: #fff;
padding: 10px;
}
// .warn {
// font-size: 0.8em;
// background-color: darken(orange, 15%);
// color: #fff;
// padding: 10px;
// }
/* ------ Default Style ---------- */
.gauge-container {
width: 150px;
height: 150px;
@@ -61,14 +60,5 @@ body {
font-weight: bold;
font-size: 0.8em;
}
/* ------- Alternate Style ------- */
.wrapper {
height: 100px;
float: left;
margin: 7px;
overflow: hidden;
}
.wrapper > .gauge-container {
margin: 0;
}
@@ -23208,27 +23208,6 @@ footer .container button.big:before {
text-align: center;
color: #4b4b4b;
}
body {
background-color: rgba(0, 0, 0, 0.8);
color: #999;
font-family: Hevletica, sans-serif;
}
.info {
clear: both;
padding: 10px;
font-size: 0.9em;
}
a.link {
color: #2fe3ff;
text-decoration: none;
}
.warn {
font-size: 0.8em;
background-color: #b37300;
color: #fff;
padding: 10px;
}
/* ------ Default Style ---------- */
.gauge-container {
width: 150px;
height: 150px;
@@ -23266,16 +23245,6 @@ a.link {
font-weight: bold;
font-size: 0.8em;
}
/* ------- Alternate Style ------- */
.wrapper {
height: 100px;
float: left;
margin: 7px;
overflow: hidden;
}
.wrapper > .gauge-container {
margin: 0;
}
a,
a:visited,
a:hover,
+5
View File
@@ -15816,6 +15816,11 @@
"has-flag": "^3.0.0"
}
},
"svg-gauge": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/svg-gauge/-/svg-gauge-1.0.6.tgz",
"integrity": "sha512-gRkznVhtS18eOM/GMPDXAvrLZOpqzNVDg4bFAPAEjiDKd1tZHFIe8Bwt3G6TFg/H+pFboetPPI+zoV+bOL26QQ=="
},
"svg-tags": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+2 -1
View File
@@ -14,14 +14,15 @@
"axios": "0.19.2",
"brace": "0.11.1",
"chart.js": "^2.9.3",
"core-js": "^3.4.4",
"izitoast": "1.2.0",
"moment": "2.24.0",
"qrcode": "^1.4.4",
"raphael": "^2.3.0",
"sprintf-js": "1.1.2",
"svg-gauge": "^1.0.6",
"v-tooltip": "^2.0.3",
"vee-validate": "2.1.1",
"core-js": "^3.4.4",
"vue": "^2.6.11",
"vue-chartjs": "^3.5.0",
"vue-class-component": "7.2.3",
@@ -16,6 +16,7 @@ import ShowEstrazioneInfo from "@/app_modules_thermo/setup/estrazione/components
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 ShowDashboardInfo 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";
@@ -51,6 +52,7 @@ let HMIScreenshotInterval;
let HMIprodTimeout;
let RerenderInterval;
messageService.subscribeToChannel("show-dashboard-info", () => { ModalHelper.ShowModal(ShowDashboardInfo); });
messageService.subscribeToChannel("show-arretramento-riscaldi-info", () => { ModalHelper.ShowModal(ShowArretramentoRiscaldiInfo); });
messageService.subscribeToChannel("show-opzioni-info", () => { ModalHelper.ShowModal(ShowOpzioniInfo); });
messageService.subscribeToChannel("show-vuoto-info", () => { ModalHelper.ShowModal(ShowVuotoInfo); });
@@ -1,6 +1,6 @@
import Vue from "vue";
import Component from "vue-class-component";
declare var Gauge:any
import Gauge from "svg-gauge";
@Component({})
export default class archinterface extends Vue{
mounted(){
@@ -1,7 +1,7 @@
import Vue from "vue";
import Component from "vue-class-component";
declare var Gauge:any
import Gauge from "svg-gauge";
@Component({})
export default class dashboard extends Vue{
mounted(){
@@ -1,4 +1,6 @@
<template>
<div id="gauge1" class="gauge-container">
</div>
<!-- <div id="gauge1" class="gauge-container">
</div> -->
<div id="gauge3" class="gauge-container three">
</div>
</template>
@@ -79,7 +79,7 @@
statusImage="fa fa-minus-circle"
></setup-button>
<div class="setup-play">
<div class="setup-play" @click="sendMessage('show-dashboard-info')">
<img class="dim" src="assets/icons/svg/setup-play.svg" />
</div>
</div>
@@ -7,13 +7,14 @@ import { /*Factory,*/ messageService } from "@/_base";
//import { Watch } from "vue-property-decorator";
import AppRibbon from "@/components/app-ribbon.vue";
import UserInfo from "@/app_modules/machine/components/user-info.vue";
import Archinterface from "@/app_modules_thermo/components/arch-interface/arch-interface.vue";
declare let $: any;
@Component({
name: "app-header", components: {
appRibbon: AppRibbon, userInfo: UserInfo, processInfo: ProcessInfo,
appRibbon: AppRibbon, userInfo: UserInfo, processInfo: ProcessInfo,archinterface:Archinterface
}
})
@@ -85,6 +85,7 @@
<button v-if="p.visible && !mainStatus" class="save-circle"></button>
<button v-if="p.visible && !mainStatus" class="dot-circle"></button>
</div>
<archinterface></archinterface>
<user-info></user-info>
</header>