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

production

Browse Source
This commit is contained in:
Alessandro Francia
2018-06-29 14:58:31 +02:00
parent 768c3a67d5
commit 50392f136c
9 changed files with 385 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Step/wwwroot/assets/styles/base/card.less
+116
View File
@@ -659,4 +659,120 @@
}
}
}
}
.card-production-cms{
width: 1008px;
height: 752px;
display: flex;
background-color: @color-label-grey;
}
.card-queue-production{
width: 513px;
height: 752px;
background-color: @color-background-white;
display: flex;
flex-flow: column;
.card-queue-production-header{
height: 63px;
width: 100%;
display: flex;
flex-flow: row;
border-bottom: solid 2px @color-label-grey;
.title{
width: 100%;
height: 100%;
display: flex;
align-items: center;
margin-left: 24px;
font-size: 20px;
color: @color-darkish-blue;
justify-content: flex-start;
}
.group-button{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
i{
font-size: 24px;
}
}
}
.card-queue-production-body{
height: 623px;
width: 100%;
display: flex;
flex-flow: column;
.queue-body{
height: calc(~'100% - 63px');
width: calc(~'100% - 16px');
display: flex;
flex-flow: column;
align-items: center;
justify-content: flex-start;
margin: 16px 0 0 8px;
.element-queue{
display: flex;
flex-flow: row;
align-items: center;
margin-bottom: 16px;
width: 400px;
label.number{
display: flex;
height: 100%;
margin-right: 16px;
font-size: 20px;
color: @color-greyish-brown;
}
}
}
.queue-footer{
display: flex;
margin: 20px 0 0 8px;
border-top: solid 2px @color-whitethree;
height: 47px;
width: 97%;
label{
width: 100%;
height: 100%;
display: flex;
align-items: center;
margin-left: 24px;
font-size: 20px;
color: @color-darkish-blue;
justify-content: flex-start;
}
}
}
.card-queue-production-footer{
height: 62px;
width: 100%;
display: flex;
border-top: solid 2px @color-label-grey;
.add-item{
display: flex;
width: 100%;
height: 100%;
flex-flow: row;
align-items: center;
justify-content: center;
label{
font-size: 20px;
color: @color-darkish-blue;
}
i{
font-size: 24px;
}
}
}
}
.card-job-production{
width: 494px;
height: 752px;
background-color: @color-background-white;
}
Step/wwwroot/assets/styles/base/production.less
+31 -12
View File
@@ -30,28 +30,47 @@
.box-left{
height: 100%;
width: 1280px;
display: flex;
flex-flow: row;
background-color: @color-background-white;
.box-header{
width: 1040px;
height: 80px;
.box-left-video{
display: flex;
flex-flow: row;
justify-content: center;
width: 100%;
height: 100%;
flex-flow: column;
align-items: center;
float:left;
button.btn{
margin: 0;
float: left;
.box-header{
width: 1040px;
height: 80px;
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
button.btn{
margin: 0;
}
button.btn.pressed{
background-image: linear-gradient(to bottom, @color-silver, @color-white2);
border: none !important;
box-shadow: inset @button-shadow !important;
}
}
button.btn.pressed{
background-image: linear-gradient(to bottom, @color-silver, @color-white2);
border: none !important;
box-shadow: inset @button-shadow !important;
.cnc{
width: 1024px;
height: 768px;
box-shadow: inset 0 4px 7px 0 @color-black-40;
background-color: green;
display: flex;
flex-flow: row;
}
}
.settings{
display: flex;
flex-flow: column;
float: right;
width:232px;
margin-right:8px;
.setting-top{
height: 488px;
width: 232px;
Step/wwwroot/assets/styles/style.css
+135 -4
View File
@@ -3937,6 +3937,118 @@ footer .container button.big:before {
.card-element-queue .card-element-queue-right button.btn i.fa.fa-trash {
font-size: 24px;
}
.card-production-cms {
width: 1008px;
height: 752px;
display: flex;
background-color: #979797;
}
.card-queue-production {
width: 513px;
height: 752px;
background-color: #fff;
display: flex;
flex-flow: column;
}
.card-queue-production .card-queue-production-header {
height: 63px;
width: 100%;
display: flex;
flex-flow: row;
border-bottom: solid 2px #979797;
}
.card-queue-production .card-queue-production-header .title {
width: 100%;
height: 100%;
display: flex;
align-items: center;
margin-left: 24px;
font-size: 20px;
color: #002680;
justify-content: flex-start;
}
.card-queue-production .card-queue-production-header .group-button {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.card-queue-production .card-queue-production-header .group-button i {
font-size: 24px;
}
.card-queue-production .card-queue-production-body {
height: 623px;
width: 100%;
display: flex;
flex-flow: column;
}
.card-queue-production .card-queue-production-body .queue-body {
height: calc(100% - 63px);
width: calc(100% - 16px);
display: flex;
flex-flow: column;
align-items: center;
justify-content: flex-start;
margin: 16px 0 0 8px;
}
.card-queue-production .card-queue-production-body .queue-body .element-queue {
display: flex;
flex-flow: row;
align-items: center;
margin-bottom: 16px;
width: 400px;
}
.card-queue-production .card-queue-production-body .queue-body .element-queue label.number {
display: flex;
height: 100%;
margin-right: 16px;
font-size: 20px;
color: #4b4b4b;
}
.card-queue-production .card-queue-production-body .queue-footer {
display: flex;
margin: 20px 0 0 8px;
border-top: solid 2px #e7e7e7;
height: 47px;
width: 97%;
}
.card-queue-production .card-queue-production-body .queue-footer label {
width: 100%;
height: 100%;
display: flex;
align-items: center;
margin-left: 24px;
font-size: 20px;
color: #002680;
justify-content: flex-start;
}
.card-queue-production .card-queue-production-footer {
height: 62px;
width: 100%;
display: flex;
border-top: solid 2px #979797;
}
.card-queue-production .card-queue-production-footer .add-item {
display: flex;
width: 100%;
height: 100%;
flex-flow: row;
align-items: center;
justify-content: center;
}
.card-queue-production .card-queue-production-footer .add-item label {
font-size: 20px;
color: #002680;
}
.card-queue-production .card-queue-production-footer .add-item i {
font-size: 24px;
}
.card-job-production {
width: 494px;
height: 752px;
background-color: #fff;
}
@keyframes selectedanimation {
0% {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -9428,29 +9540,48 @@ footer .container button.big:before {
.production-container .production-box .production-left-box .box-left {
height: 100%;
width: 1280px;
display: flex;
flex-flow: row;
background-color: #fff;
}
.production-container .production-box .production-left-box .box-left .box-header {
.production-container .production-box .production-left-box .box-left .box-left-video {
display: flex;
width: 100%;
height: 100%;
flex-flow: column;
align-items: center;
float: left;
}
.production-container .production-box .production-left-box .box-left .box-left-video .box-header {
width: 1040px;
height: 80px;
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
float: left;
}
.production-container .production-box .production-left-box .box-left .box-header button.btn {
.production-container .production-box .production-left-box .box-left .box-left-video .box-header button.btn {
margin: 0;
}
.production-container .production-box .production-left-box .box-left .box-header button.btn.pressed {
.production-container .production-box .production-left-box .box-left .box-left-video .box-header button.btn.pressed {
background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
border: none !important;
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
}
.production-container .production-box .production-left-box .box-left .box-left-video .cnc {
width: 1024px;
height: 768px;
box-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.4);
background-color: green;
display: flex;
flex-flow: row;
}
.production-container .production-box .production-left-box .box-left .settings {
display: flex;
flex-flow: column;
float: right;
width: 232px;
margin-right: 8px;
}
.production-container .production-box .production-left-box .box-left .settings .setting-top {
height: 488px;
Step/wwwroot/src/app.modules.js
+8
View File
@@ -117,11 +117,19 @@ export const HeadProduction = () =>
export const CardAxesProduction = () =>
import ("./modules/base-components/cards/card-axes-production.vue");
export const CardProductionCms = () =>
import ("./modules/base-components/cards/card-production-cms.vue");
export const CardFolderPath = () =>
import ("./modules/base-components/cards/card-folder-path.vue");
export const CardElementQueue = () =>
import ("./modules/base-components/cards/card-element-queue.vue");
export const CardQueueProduction = () =>
import ("./modules/base-components/cards/card-queue-production.vue");
export const CardJobProduction = () =>
import ("./modules/base-components/cards/card-job-production.vue");
// Test pages
export const TestLoader = () =>
Step/wwwroot/src/app.routes.js
+7 -1
View File
@@ -36,7 +36,10 @@ import {
CardAxesProduction,
CardFolderPath,
ModalIframe,
CardElementQueue
CardElementQueue,
CardProductionCms,
CardQueueProduction,
CardJobProduction
} from "./app.modules";
export let routes = [
@@ -63,6 +66,9 @@ export let routes = [
{ path: "/head-spindle", component: HeadSpindle, meta: { title: "Step - Head-Spindle", area: "head-spindle" } },
{ path: "/head-production", component: HeadProduction, meta: { title: "Step - Head-Production", area: "head-production" } },
{ path: "/card-axes-production", component: CardAxesProduction, meta: { title: "Step - Card-Axes-Production", area: "card-axes-production" } },
{ path: "/card-production-cms", component: CardProductionCms, meta: { title: "Step - Card-Production-Cms", area: "card-production-cms" } },
{ path: "/card-queue-production", component: CardQueueProduction, meta: { title: "Step - Card-Queue-Production", area: "card-queue-production" } },
{ path: "/card-job-production", component: CardJobProduction, meta: { title: "Step - Card-Job-Production", area: "card-job-production" } },
{ path: "/card-folder-path", component: CardFolderPath, meta: { title: "Step - Card-Folder-Path", area: "card-folder-path" } },
{ path: "/card-element-queue", component: CardElementQueue, meta: { title: "Step - Card-Element-Queue", area: "card-element-queue" } },
Step/wwwroot/src/components/production.vue
+10 -5
View File
@@ -6,12 +6,17 @@
<process-selection-maintenance></process-selection-maintenance>
</div>
<div class="box-left">
<div class="box-header">
<button class="btn" :class="{'pressed': activeCms}" @click="clickCms()">CMS</button>
<button class="btn" :class="{'pressed': activeCnc}" @click="clickCnc()">CNC</button>
</div>
<div class="video">
<div class="box-left-video">
<div class="box-header">
<button class="btn" :class="{'pressed': activeCms}" @click="clickCms()">CMS</button>
<button class="btn" :class="{'pressed': activeCnc}" @click="clickCnc()">CNC</button>
</div>
<div class="cnc" v-if="activeCnc">
</div>
<div class="cms" v-if="activeCms">
</div>
</div>
<div class="settings">
<div class="setting-top">
Step/wwwroot/src/modules/base-components/cards/card-job-production.vue
+12
View File
@@ -0,0 +1,12 @@
<template>
<div class="test-container">
<div class="card-job-production">
</div>
</div>
</template>
<script>
export default {
}
</script>
Step/wwwroot/src/modules/base-components/cards/card-production-cms.vue
+20
View File
@@ -0,0 +1,20 @@
<template>
<div class="test-container">
<div class="card-production-cms">
<div class="">
<card-queue-production></card-queue-production>
</div>
<div class="">
</div>
</div>
</div>
</template>
<script>
import cardQueueProduction from "./card-queue-production.vue";
export default {
components:{
cardQueueProduction
}
}
</script>
Step/wwwroot/src/modules/base-components/cards/card-queue-production.vue
+46
View File
@@ -0,0 +1,46 @@
<template>
<div class="test-container">
<div class="card-queue-production">
<div class="card-queue-production-header">
<div class="title">
<label>Coda</label>
</div>
<div class="group-button">
<button class="btn"><i class="fa fa-floppy-o"></i></button>
<button class="btn"></button>
<button class="btn"></button>
</div>
</div>
<div class="card-queue-production-body">
<div class="queue-body scrollable">
<div class="element-queue">
<label class="number">1</label><card-element-queue></card-element-queue>
</div>
<div class="element-queue">
<label class="number">2</label><card-element-queue></card-element-queue>
</div>
<div class="element-queue">
<label class="number">3</label><card-element-queue></card-element-queue>
</div>
</div>
<div class="queue-footer">
<label>6 elementi in coda</label>
</div>
</div>
<div class="card-queue-production-footer">
<div class="add-item">
<label>Aggiungi elemento</label>
<button class="btn"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</div>
</template>
<script>
import cardElementQueue from "./card-element-queue.vue";
export default {
components:{
cardElementQueue
}
}
</script>