From 0c48eec85c9b9ca9999bee6bb4a30149227a2d1f Mon Sep 17 00:00:00 2001 From: Alessio Date: Thu, 14 May 2020 09:44:44 +0200 Subject: [PATCH] fix dashboard --- .../wwwroot/assets/styles/base/dashboard.less | 59 +++++++++---- Thermo.Active/wwwroot/assets/styles/style.css | 61 +++++++++++-- Thermo.Active/wwwroot/package-lock.json | 5 ++ Thermo.Active/wwwroot/package.json | 3 +- .../dashboard/base-components/componente.vue | 3 + .../app_modules_thermo/dashboard/dashboard.ts | 4 +- .../dashboard/dashboard.vue | 16 +--- .../wwwroot/src/components/app-ribbon.ts | 88 +++++++++++++++++++ .../wwwroot/src/components/app-ribbon.vue | 80 +---------------- 9 files changed, 202 insertions(+), 117 deletions(-) diff --git a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less index 2f06f8a9..e1eb9b40 100644 --- a/Thermo.Active/wwwroot/assets/styles/base/dashboard.less +++ b/Thermo.Active/wwwroot/assets/styles/base/dashboard.less @@ -17,29 +17,36 @@ section{ display: flex; justify-content: flex-end; + padding-right: 15px; + padding-bottom: 50px; .specific{ display: flex; flex-direction: column; + justify-content: flex-end; div{ display: flex; } + //inizio sezione style del primo specific &:first-of-type{ + //mettere qui margin + margin-right: 15%; div{ &:first-of-type{ img{ + flex-shrink: 0; width: 41px; height: 41px; object-fit: contain; } label{ - + flex-shrink: 0; font-size: 54px; font-weight: normal; font-stretch: normal; @@ -53,8 +60,10 @@ } &:last-of-type{ + margin: unset; button{ + flex-shrink: 0; width: 65px; height: 65px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5); @@ -67,6 +76,7 @@ } label{ + flex-shrink: 0; &:first-of-type{ @@ -100,7 +110,9 @@ } + //inizio sezione style del secondo specific label{ + flex-shrink: 0; &:first-of-type{ @@ -128,14 +140,18 @@ } + //inizio sezione style del terzo specific &:last-of-type{ + //mettere qui margin + margin-left: 15%; div{ width: 542px; height: 71px; background-color: rgba(0, 0, 0, 0.5); + } - &:first-of-type{ + .actual{ background-color: unset; width: unset; height: unset; @@ -144,11 +160,12 @@ background-color: unset; width: unset; height: unset; + margin: unset; label{ + flex-shrink: 0; &:first-of-type{ - font-size: 26px; font-weight: 500; font-stretch: normal; @@ -160,7 +177,6 @@ } &:last-of-type{ - font-size: 120px; font-weight: 300; font-stretch: normal; @@ -177,29 +193,42 @@ } - &:last-of-type{ - width: 641px; - height: 84px; - } - - } - - aside{ width: 641px; height: 310px; + overflow-x: hidden; .component{ width: 621px; + height: 77px; } } .component{ + width: 641px; + height: 84px; background-color: #e8e8e8; + flex-direction: column; + justify-content: flex-end; + div{ + margin:auto; + padding: 0px 15px; + width: unset; + height: unset; + background-color: unset; + } + + span{ + flex-shrink: 0; + width: 100%; + height: 1px; + background-color: #676767; + } + label{ - + flex-shrink: 0; font-size: 54px; font-weight: 500; font-stretch: normal; @@ -214,11 +243,12 @@ height: unset; width: unset; background-color: unset; + margin: unset; label{ + flex-shrink: 0; &:first-of-type{ - font-size: 12px; font-weight: 500; font-stretch: normal; @@ -230,7 +260,6 @@ } &:last-of-type{ - font-size: 25px; font-weight: 500; font-stretch: normal; diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css index 1928cec1..4a67fdf5 100644 --- a/Thermo.Active/wwwroot/assets/styles/style.css +++ b/Thermo.Active/wwwroot/assets/styles/style.css @@ -4048,20 +4048,28 @@ .dashboard section { display: flex; justify-content: flex-end; + padding-right: 15px; + padding-bottom: 50px; } .dashboard section .specific { display: flex; flex-direction: column; + justify-content: flex-end; } .dashboard section .specific div { display: flex; } +.dashboard section .specific:first-of-type { + margin-right: 15%; +} .dashboard section .specific:first-of-type div:first-of-type img { + flex-shrink: 0; width: 41px; height: 41px; object-fit: contain; } .dashboard section .specific:first-of-type div:first-of-type label { + flex-shrink: 0; font-size: 54px; font-weight: normal; font-stretch: normal; @@ -4071,7 +4079,11 @@ text-align: right; color: #4b4b4b; } +.dashboard section .specific:first-of-type div:last-of-type { + margin: unset; +} .dashboard section .specific:first-of-type div:last-of-type button { + flex-shrink: 0; width: 65px; height: 65px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5); @@ -4082,6 +4094,9 @@ font-size: 50px; text-align: center; } +.dashboard section .specific:first-of-type div:last-of-type label { + flex-shrink: 0; +} .dashboard section .specific:first-of-type div:last-of-type label:first-of-type { font-size: 12px; font-weight: 500; @@ -4102,6 +4117,9 @@ text-align: center; color: #4b4b4b; } +.dashboard section .specific label { + flex-shrink: 0; +} .dashboard section .specific label:first-of-type { font-size: 26px; font-weight: 500; @@ -4122,22 +4140,29 @@ text-align: center; color: #4b4b4b; } +.dashboard section .specific:last-of-type { + margin-left: 15%; +} .dashboard section .specific:last-of-type div { width: 542px; height: 71px; background-color: rgba(0, 0, 0, 0.5); } -.dashboard section .specific:last-of-type div:first-of-type { +.dashboard section .specific:last-of-type .actual { background-color: unset; width: unset; height: unset; } -.dashboard section .specific:last-of-type div:first-of-type .specific { +.dashboard section .specific:last-of-type .actual .specific { background-color: unset; width: unset; height: unset; + margin: unset; } -.dashboard section .specific:last-of-type div:first-of-type .specific label:first-of-type { +.dashboard section .specific:last-of-type .actual .specific label { + flex-shrink: 0; +} +.dashboard section .specific:last-of-type .actual .specific label:first-of-type { font-size: 26px; font-weight: 500; font-stretch: normal; @@ -4147,7 +4172,7 @@ text-align: center; color: #4b4b4b; } -.dashboard section .specific:last-of-type div:first-of-type .specific label:last-of-type { +.dashboard section .specific:last-of-type .actual .specific label:last-of-type { font-size: 120px; font-weight: 300; font-stretch: normal; @@ -4157,21 +4182,37 @@ text-align: center; color: #4b4b4b; } -.dashboard section .specific:last-of-type div:last-of-type { - width: 641px; - height: 84px; -} .dashboard section .specific:last-of-type aside { width: 641px; height: 310px; + overflow-x: hidden; } .dashboard section .specific:last-of-type aside .component { width: 621px; + height: 77px; } .dashboard section .specific:last-of-type .component { + width: 641px; + height: 84px; background-color: #e8e8e8; + flex-direction: column; + justify-content: flex-end; +} +.dashboard section .specific:last-of-type .component div { + margin: auto; + padding: 0px 15px; + width: unset; + height: unset; + background-color: unset; +} +.dashboard section .specific:last-of-type .component span { + flex-shrink: 0; + width: 100%; + height: 1px; + background-color: #676767; } .dashboard section .specific:last-of-type .component label { + flex-shrink: 0; font-size: 54px; font-weight: 500; font-stretch: normal; @@ -4185,6 +4226,10 @@ height: unset; width: unset; background-color: unset; + margin: unset; +} +.dashboard section .specific:last-of-type .component .specific label { + flex-shrink: 0; } .dashboard section .specific:last-of-type .component .specific label:first-of-type { font-size: 12px; 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..d6f02da1 100644 --- a/Thermo.Active/wwwroot/package.json +++ b/Thermo.Active/wwwroot/package.json @@ -31,7 +31,8 @@ "vue-smooth-dnd": "0.8.1", "vue2-ace-editor": "0.0.15", "vue2-datepicker": "3.4.1", - "vuex": "3.1.3" + "vuex": "3.1.3", + "svg-gauge": "1.0.6" }, "devDependencies": { "@babel/plugin-proposal-export-default-from": "7.8.3", diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/componente.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/componente.vue index 67f05901..f0fad60c 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/componente.vue +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/componente.vue @@ -1,5 +1,6 @@ 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 bd8b7a02..b07aa6ed 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts @@ -2,11 +2,13 @@ import Vue from 'vue'; import Component from 'vue-class-component'; import {Prop} from 'vue-property-decorator'; import Componente from "./base-components/componente.vue"; +import Gauge from "svg-gauge"; @Component({ components:{ componente:Componente } }) export default class Dashboard extends Vue{ - + @Prop({ default: 9 }) + components: number; } \ No newline at end of file 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 7ab93867..1bc0f713 100644 --- a/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue +++ b/Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue @@ -20,7 +20,7 @@
-
+
@@ -30,20 +30,10 @@
-
+
GRAFICO
diff --git a/Thermo.Active/wwwroot/src/components/app-ribbon.ts b/Thermo.Active/wwwroot/src/components/app-ribbon.ts index e69de29b..e5883c48 100644 --- a/Thermo.Active/wwwroot/src/components/app-ribbon.ts +++ b/Thermo.Active/wwwroot/src/components/app-ribbon.ts @@ -0,0 +1,88 @@ +import Vue from 'vue'; +import {Prop,Watch} from 'vue-property-decorator'; +import { alarmsModelActions } from "src/store"; +import { messageService } from "src/_base"; +import Component from 'vue-class-component'; + +@Component({}) +export default class AppRibbon extends Vue{ + + @Prop({ default: false }) + showExpander: boolean; + @Prop()//{ default: null } + status; + @Prop({ default: false }) + expanded: boolean; + @Prop({ default: false }) + hasService: boolean; + + @Watch('hasService') + hasServiceChanged(oldV,newV) { + this.serviceExpanded = !this.expanded; + }; + + @Watch('opened') + openedChanged(){ + if(this.$store.state.alarms.opened || this.$store.state.alarms.serviceOpened) + messageService.publishToChannel("HMI-show-alarms"); + else + messageService.publishToChannel("HMI-hide-alarms",300); + + }; + + @Watch('serviceOpened') + serviceOpenedChanged(){ + if(this.$store.state.alarms.opened || this.$store.state.alarms.serviceOpened) + messageService.publishToChannel("HMI-show-alarms"); + else + messageService.publishToChannel("HMI-hide-alarms",300); + }; + + + // hasService() { + // return !this.$slots["service"]; + // }, + toggleServiceExpanded() { + if(this.$store.state.alarms.opened && !this.serviceExpanded) + alarmsModelActions.toggleServiceOpened(this.$store,true); + else if(this.serviceExpanded) + alarmsModelActions.toggleServiceOpened(this.$store,!this.$store.state.alarms.serviceOpened); + + this.serviceExpanded = true; + alarmsModelActions.toggleOpened(this.$store, false); + + }; + + toggleExpanded() { + if(this.status.alarm || this.status.warning) + { + if(this.$store.state.alarms.serviceOpened && this.serviceExpanded) + alarmsModelActions.toggleOpened(this.$store,true); + else if(!this.serviceExpanded) + alarmsModelActions.toggleOpened(this.$store,!this.$store.state.alarms.opened); + + this.serviceExpanded = false; + alarmsModelActions.toggleServiceOpened(this.$store, false); + } + }; + + + serviceExpanded:boolean= false; + + get opened() { + + return this.$store.state.alarms.opened; + }; + + get serviceOpened() { + + return this.$store.state.alarms.serviceOpened; + }; + + get mainExpanded() { + if (!this.hasService) return this.expanded; + + return !this.serviceExpanded && this.expanded; + }; + +} \ No newline at end of file diff --git a/Thermo.Active/wwwroot/src/components/app-ribbon.vue b/Thermo.Active/wwwroot/src/components/app-ribbon.vue index 4adab300..5e1487bd 100644 --- a/Thermo.Active/wwwroot/src/components/app-ribbon.vue +++ b/Thermo.Active/wwwroot/src/components/app-ribbon.vue @@ -20,84 +20,6 @@
-