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

detail filter ui

Browse Source
This commit is contained in:
Alessandro
2019-01-18 10:44:35 +01:00
parent a3be062238
commit d1a3207c97
4 changed files with 285 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/assets/styles/base/report.less
+97 -8
View File
@@ -91,6 +91,7 @@
flex-flow: row;
margin-top: 18px;
border-right: solid 2px @color-whitegrey;
position: relative;
.mx-datepicker-range{
width: 170px;
height: 70px;
@@ -179,6 +180,7 @@
font-size: 18px;
line-height: 1;
color: @color-darkish-blue;
cursor: pointer;
span{
text-decoration-line: underline;
text-decoration-color: @color-darkish-blue;
@@ -186,6 +188,92 @@
}
}
}
div.advanced-filters{
z-index: 100;
height: 80px;
width: 100%;
display: flex;
flex-flow: row;
background-color: @color-background-white;
position: absolute;
top: 80px;
> div {
display: flex;
flex-flow: column;
height: 70px;
margin-right: 24px;
label.intervaldate{
width: 253px;
}
select{
width: 192px;
height: 48px;
border-radius: 2px;
box-shadow: 0 1px 2px 0 @color-black-40;
border: solid 1px @color-silver;
font-size: 18px;
line-height: 1.11;
color: @color-greyish-brown;
padding-left: 16px;
}
div.interval-time{
display: flex;
flex-flow: row;
input[type="time"]{
width: 112px;
height: 48px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 @color-black-50;
font-size: 18px;
line-height: 1.11;
color: @color-silver;
}
input[type="time"]:first-child{
margin-right: 16px;
}
input[type="time"]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
}
input.program{
width: 256px;
height: 48px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 @color-black-50;
font-size: 18px;
line-height: 1.11;
color: @color-silver;
padding-left: 16px;
}
.reports-select-operator{
width: 192px;
height: 48px;
border-radius: 2px;
box-shadow: 0 1px 2px 0 @color-black-40;
font-size: 18px;
line-height: 1.11;
color: @color-greyish-brown;
}
.reports-select-shift{
width: 144px;
height: 48px;
border-radius: 2px;
box-shadow: 0 1px 2px 0 @color-black-40;
}
label.label_advanced_filters{
margin-top: 35px;
font-size: 18px;
line-height: 1;
color: @color-darkish-blue;
span{
text-decoration-line: underline;
text-decoration-color: @color-darkish-blue;
text-decoration-style: solid;
}
}
}
}
}
.body-left-center {
width: 1448px;
@@ -282,13 +370,10 @@
max-width:97px;
text-align: center;
}
th:nth-child(5),td:nth-child(5){
width:100px;
max-width:100px;
}
th:nth-child(6), td:nth-child(6){
width:100px;
max-width: 100px;
th:last-child{
font-size: 23px;
font-weight: bold;
cursor: pointer;
}
th, td{
overflow: hidden;
@@ -318,6 +403,9 @@
color: @color-scarlet;
}
}
td:last-child{
width: 10px;
}
&.selected{
background-color: rgba(23, 145, 255, 0.75);
color: @color-white;
@@ -350,12 +438,13 @@
box-shadow: 0 1px 2px 0 @color-black-40;
background-image: linear-gradient(to bottom,@color-white2, @color-silver);
}
button:active{
button.active{
width: 48px;
height: 48px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 @color-black-40;
background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
color: @color-clear-blue;
}
}
.body-right-header-right {
Step/wwwroot/assets/styles/style.css
+97 -10
View File
@@ -14828,6 +14828,7 @@ footer .container button.big:before {
flex-flow: row;
margin-top: 18px;
border-right: solid 2px #dddddd;
position: relative;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header .mx-datepicker-range {
width: 170px;
@@ -14918,12 +14919,99 @@ footer .container button.big:before {
font-size: 18px;
line-height: 1;
color: #002680;
cursor: pointer;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div label.label_advanced_filters span {
text-decoration-line: underline;
text-decoration-color: #002680;
text-decoration-style: solid;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters {
z-index: 100;
height: 80px;
width: 100%;
display: flex;
flex-flow: row;
background-color: #fff;
position: absolute;
top: 80px;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div {
display: flex;
flex-flow: column;
height: 70px;
margin-right: 24px;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div label.intervaldate {
width: 253px;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div select {
width: 192px;
height: 48px;
border-radius: 2px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
border: solid 1px #bbbcbc;
font-size: 18px;
line-height: 1.11;
color: #4b4b4b;
padding-left: 16px;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time {
display: flex;
flex-flow: row;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"] {
width: 112px;
height: 48px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
font-size: 18px;
line-height: 1.11;
color: #bbbcbc;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"]:first-child {
margin-right: 16px;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div input.program {
width: 256px;
height: 48px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
font-size: 18px;
line-height: 1.11;
color: #bbbcbc;
padding-left: 16px;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div .reports-select-operator {
width: 192px;
height: 48px;
border-radius: 2px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
font-size: 18px;
line-height: 1.11;
color: #4b4b4b;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div .reports-select-shift {
width: 144px;
height: 48px;
border-radius: 2px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div label.label_advanced_filters {
margin-top: 35px;
font-size: 18px;
line-height: 1;
color: #002680;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div label.label_advanced_filters span {
text-decoration-line: underline;
text-decoration-color: #002680;
text-decoration-style: solid;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center {
width: 1448px;
max-height: 681px;
@@ -15031,15 +15119,10 @@ footer .container button.big:before {
max-width: 97px;
text-align: center;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(5),
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(5) {
width: 100px;
max-width: 100px;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(6),
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(6) {
width: 100px;
max-width: 100px;
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:last-child {
font-size: 23px;
font-weight: bold;
cursor: pointer;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th,
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td {
@@ -15073,6 +15156,9 @@ footer .container button.big:before {
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tbody tr td.red {
color: #d0021b;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tbody tr td:last-child {
width: 10px;
}
.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tbody tr.selected {
background-color: rgba(23, 145, 255, 0.75);
color: #fff;
@@ -15104,12 +15190,13 @@ footer .container button.big:before {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
}
.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-left button:active {
.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-left button.active {
width: 48px;
height: 48px;
border-radius: 2px;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
color: #1791ff;
}
.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-right {
width: calc(100% - 158px);
Step/wwwroot/src/app_modules/reports/components/reports.ts
+32
View File
@@ -24,6 +24,9 @@ export default class Reports extends Vue {
public selectedTab: string = "Production";
selectDiagram: boolean = false;
selectMoreFilter: boolean = false;
selectTable: boolean = true;
public selectTab(value){
this.selectedTab = value;
@@ -31,4 +34,33 @@ export default class Reports extends Vue {
timeformat() {
return (moment() as any)._locale._longDateFormat.LT;
}
viewDiagram(){
if(!this.selectDiagram){
this.selectDiagram = true;
this.selectTable = false;
}
console.log("Diagram active");
}
viewTable(){
if(!this.selectTable){
this.selectDiagram = false;
this.selectTable = true;
}
console.log("Diagram active");
}
viewMoreFilter(){
if(!this.selectMoreFilter){
this.selectMoreFilter = true;
}
else{
this.selectMoreFilter = false;
}
}
openModalSelectField(){
console.log("Modal");
}
}
Step/wwwroot/src/app_modules/reports/components/reports.vue
+59 -14
View File
@@ -21,15 +21,50 @@
</div>
<div class="reports-box-body" v-if="selectedTab == 'Production'">
<div class="reports-box-body-left">
<div class="body-left-header">
<div class="body-left-header" v-if="selectDiagram">
<div>
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
</div>
<div>
<label>{{'reports_body_header_axes_x' | localize("Asse X")}}</label>
<select><option>{{'reports_body_header_option_axes_x_program_name' | localize("Nome Programma")}}</option></select>
</div>
<div>
<label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
<select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
</div>
<div>
<label class="label_advanced_filters" @click="viewMoreFilter()" v-if="!selectMoreFilter"><span>{{'reports_body_header_diagram_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
<label class="label_advanced_filters" @click="viewMoreFilter()" v-if="selectMoreFilter"><span>{{'reports_body_header_diagram_label_hide_advanced_filters' | localize("Nascondi filtri avanzati")}}</span> <i class="fa fa-caret-up"></i></label>
</div>
<div class="advanced-filters" v-if="selectMoreFilter">
<div>
<label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
<div class="interval-time">
<input type="time"/>
<input type="time"/>
</div>
</div>
<div>
<label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
<input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
</div>
<div>
<label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
<select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
</div>
<div>
<label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
<select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
</div>
</div>
</div>
<div class="body-left-header" v-if="!selectDiagram">
<div>
<label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
<date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
</div>
<!-- <div>
<label>{{'reports_body_header_label_date' | localize("Intervallo date")}}</label>
<select class="reports-select-interval-date"><option>{{'reports_body_header_option_date_lastmonth' | localize("Ultimo mese")}}</option></select>
</div> -->
<div>
<label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
<div class="interval-time">
@@ -70,6 +105,7 @@
<th>{{'reports_table_quality' | localize("Qualità")}}</th>
<th>{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
<th>{{'reports_table_shift' | localize("Turno")}}</th>
<th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
</tr>
</thead>
<tbody>
@@ -87,6 +123,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -102,6 +139,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -117,6 +155,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -132,6 +171,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -147,6 +187,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -162,6 +203,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -177,6 +219,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -192,6 +235,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -207,6 +251,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -222,6 +267,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -237,6 +283,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -252,6 +299,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -267,6 +315,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -282,6 +331,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<tr>
<td colspan="1">Finestra02.pgm</td>
@@ -297,6 +347,7 @@
<td colspan="1">Buono</td>
<td colspan="1">Nome utente</td>
<td colspan="1">1°</td>
<td></td>
</tr>
<!-- <tr v-for="(row,index) in data" :key="index" @click="selectAlarm(row)" :class="{selected: selectedAlarm == row}">
<td colspan="1">{{row.id}}</td>
@@ -319,8 +370,8 @@
<div class="reports-box-body-right">
<div class="body-right-header">
<div class="body-right-header-left">
<button><i class="fa fa-bars fa-2x"></i></button>
<button><i class="fa fa-signal fa-2x"></i></button>
<button :class="{'active': selectTable}"><i class="fa fa-bars fa-2x" @click="viewTable()"></i></button>
<button :class="{'active': selectDiagram}"><i class="fa fa-signal fa-2x" @click="viewDiagram()"></i></button>
</div>
<div class="body-right-header-right">
<button><i class="fa fa-print fa-2x"></i></button>
@@ -415,12 +466,6 @@
</div>
</div>
<div class="reports-box-body" v-if="selectedTab == 'Alarms'">
<div class="reports-box-body-left">
</div>
<div class="reports-box-body-right">
</div>
<div class="reports-box-body-left">
<div class="body-left-header">
<div>
@@ -455,7 +500,7 @@
</div>
</div>
<div class="body-left-center">
Events
Alarms
</div>
</div>
<div class="reports-box-body-right">