Egalware/cms_thermo_active
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix dashboard

Browse Source
This commit is contained in:
Alessio
2020-05-14 09:44:44 +02:00
parent 9a21aae816
commit 0c48eec85c
9 changed files with 202 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Thermo.Active/wwwroot/assets/styles/base/dashboard.less
+44 -15
View File
@@ -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;
Thermo.Active/wwwroot/assets/styles/style.css
+53 -8
View File
@@ -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;
Thermo.Active/wwwroot/package-lock.json
Generated
+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",
Thermo.Active/wwwroot/package.json
+2 -1
View File
@@ -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",
Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/base-components/componente.vue
+3
View File
@@ -1,5 +1,6 @@
<template>
<div class="component">
<div>
<label>(num)</label>
<div class="specific">
<label>TEMPO RISCALDO</label>
@@ -13,6 +14,8 @@
<label>TEMPO CICLO NETTO</label>
<label>2'51''</label>
</div>
</div>
<span></span>
</div>
</template>
Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.ts
+3 -1
View File
@@ -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;
}
Thermo.Active/wwwroot/src/app_modules_thermo/dashboard/dashboard.vue
+3 -13
View File
@@ -20,7 +20,7 @@
<label>5:18:40</label>
</div>
<div class="specific">
<div>
<div class="actual">
<div class="specific">
<label>PEZZI/ORA</label>
<label>18,2</label>
@@ -30,20 +30,10 @@
<label>3'12''</label>
</div>
</div>
<div></div>
<div>GRAFICO</div>
<componente></componente>
<aside class="scrollable">
<componente></componente>
<componente></componente>
<componente></componente>
<componente></componente>
<componente></componente>
<componente></componente>
<componente></componente>
<componente></componente>
<componente></componente>
<componente></componente>
<componente></componente>
<componente v-for="iter in components" :key="iter"></componente>
</aside>
</div>
</section>
Thermo.Active/wwwroot/src/components/app-ribbon.ts
+88
View File
@@ -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;
};
}
Thermo.Active/wwwroot/src/components/app-ribbon.vue
+1 -79
View File
@@ -20,84 +20,6 @@
</div>
</div>
</template>
<script>
import { alarmsModelActions } from "src/store";
import { Factory, MessageService, messageService } from "src/_base";
export default {
props: {
showExpander: { default: false },
status: { default: null },
expanded: { default: false },
hasService: { default: false }
},
watch: {
hasService: function(oldV,newV) {
this.serviceExpanded = !this.expanded;
},
opened:function(){
if(this.$store.state.alarms.opened || this.$store.state.alarms.serviceOpened)
messageService.publishToChannel("HMI-show-alarms");
else
messageService.publishToChannel("HMI-hide-alarms",300);
},
serviceOpened:function(){
if(this.$store.state.alarms.opened || this.$store.state.alarms.serviceOpened)
messageService.publishToChannel("HMI-show-alarms");
else
messageService.publishToChannel("HMI-hide-alarms",300);
}
},
methods: {
// 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);
}
}
},
data: function() {
return {
serviceExpanded: false
};
},
computed: {
opened: function() {
return this.$store.state.alarms.opened;
},
serviceOpened: function() {
return this.$store.state.alarms.serviceOpened;
},
mainExpanded: function() {
if (!this.hasService) return this.expanded;
return !this.serviceExpanded && this.expanded;
}
}
};
<script lang="ts" src="./app-ribbon.ts">
</script>