From 2a030da24a0612fd2cfb60b04775384dd65f8f75 Mon Sep 17 00:00:00 2001 From: Alessio Date: Thu, 14 May 2020 11:02:47 +0200 Subject: [PATCH] fix archinterface and dashboard --- .../assets/styles/base/arch-interface.less | 282 ++---------------- .../wwwroot/assets/styles/base/dashboard.less | 52 ++-- Thermo.Active/wwwroot/assets/styles/style.css | 31 -- Thermo.Active/wwwroot/package-lock.json | 5 + Thermo.Active/wwwroot/package.json | 3 +- .../wwwroot/src/app.business-logic.ts | 2 + .../arch-interface/arch-interface.ts | 2 +- .../app_modules_thermo/dashboard/dashboard.ts | 2 +- .../dashboard/dashboard.vue | 6 +- .../setup/components/setup.vue | 2 +- .../wwwroot/src/modules/app-header.ts | 3 +- .../wwwroot/src/modules/app-header.vue | 1 + 12 files changed, 69 insertions(+), 322 deletions(-) diff --git a/Thermo.Active/wwwroot/assets/styles/base/arch-interface.less b/Thermo.Active/wwwroot/assets/styles/base/arch-interface.less index 8e917d71..45bc99a2 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/arch-interface.less +++ b/Thermo.Active/wwwroot/assets/styles/base/arch-interface.less @@ -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; diff --git a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less index adc81778..9a7ae31e 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less +++ b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less @@ -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; - } + \ No newline at end of file diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css index 23c8c9e1..cdb49c10 100644 --- a/Thermo.Active/wwwroot/assets/styles/style.css +++ b/Thermo.Active/wwwroot/assets/styles/style.css @@ -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, diff --git a/Thermo.Active/wwwroot/package-lock.json b/Thermo.Active/wwwroot/package-lock.json index d1cff7d8..7555c3aa 100644 --- a/Thermo.Active/wwwroot/package-lock.json +++ b/Thermo.Active/wwwroot/package-lock.json @@ -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", diff --git a/Thermo.Active/wwwroot/package.json b/Thermo.Active/wwwroot/package.json index f0bb4d3a..362b070e 100644 --- a/Thermo.Active/wwwroot/package.json +++ b/Thermo.Active/wwwroot/package.json @@ -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", diff --git a/Thermo.Active/wwwroot/src/app.business-logic.ts b/Thermo.Active/wwwroot/src/app.business-logic.ts index 0ea51ce9..f798c178 100644 --- a/Thermo.Active/wwwroot/src/app.business-logic.ts +++ b/Thermo.Active/wwwroot/src/app.business-logic.ts @@ -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); }); diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/arch-interface/arch-interface.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/components/arch-interface/arch-interface.ts index 9e13f8d0..a9e03765 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/arch-interface/arch-interface.ts +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/arch-interface/arch-interface.ts @@ -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(){ diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts index f9aff7e9..d1a10f97 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts @@ -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(){ diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue index b6b2d1c8..42d5c93a 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue @@ -1,4 +1,6 @@ \ No newline at end of file diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue index 2ddfaebe..6013ba30 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/components/setup.vue @@ -79,7 +79,7 @@ statusImage="fa fa-minus-circle" > -
+
diff --git a/Thermo.Active/wwwroot/src/modules/app-header.ts b/Thermo.Active/wwwroot/src/modules/app-header.ts index bbbbd315..242c6d9c 100644 --- a/Thermo.Active/wwwroot/src/modules/app-header.ts +++ b/Thermo.Active/wwwroot/src/modules/app-header.ts @@ -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 } }) diff --git a/Thermo.Active/wwwroot/src/modules/app-header.vue b/Thermo.Active/wwwroot/src/modules/app-header.vue index 2bc89f89..4d7bf646 100644 --- a/Thermo.Active/wwwroot/src/modules/app-header.vue +++ b/Thermo.Active/wwwroot/src/modules/app-header.vue @@ -85,6 +85,7 @@ +