Merge branch 'feature/sottocofano' into new/UnderTheHood
This commit is contained in:
Thermo_SIM
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 572 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 224 B |
Binary file not shown.
|
After Width: | Height: | Size: 299 B |
Binary file not shown.
|
After Width: | Height: | Size: 434 B |
Binary file not shown.
|
After Width: | Height: | Size: 338 B |
Binary file not shown.
|
After Width: | Height: | Size: 471 B |
Binary file not shown.
|
After Width: | Height: | Size: 733 B |
Binary file not shown.
|
After Width: | Height: | Size: 525 B |
Binary file not shown.
|
After Width: | Height: | Size: 890 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 504 B |
Binary file not shown.
|
After Width: | Height: | Size: 853 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
@@ -1,4 +1,3 @@
|
||||
|
||||
// out: false, sourceMap: false, main: ../style.less
|
||||
@import "colors.less";
|
||||
|
||||
@@ -16,7 +15,9 @@
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out, box-shadow 0ms 0ms;
|
||||
transition: width 200ms ease-in-out, height 200ms ease-in-out,
|
||||
padding 200ms ease-in-out, background-color 200ms ease-in-out,
|
||||
box-shadow 0ms 0ms;
|
||||
|
||||
&.expanded {
|
||||
width: 494px;
|
||||
@@ -27,7 +28,9 @@
|
||||
padding: 72px 24px 24px 0px;
|
||||
height: calc(~"100vh - 120px");
|
||||
box-shadow: @color-alarm-list-shadow;
|
||||
transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out, box-shadow 20ms 180ms;
|
||||
transition: width 200ms ease-in-out, height 200ms ease-in-out,
|
||||
padding 200ms ease-in-out, background-color 200ms ease-in-out,
|
||||
box-shadow 20ms 180ms;
|
||||
}
|
||||
|
||||
&.alarm {
|
||||
@@ -40,7 +43,7 @@
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
|
||||
&>.content {
|
||||
& > .content {
|
||||
height: calc(~"100% - 60px");
|
||||
padding-right: 24px;
|
||||
padding-left: 24px;
|
||||
@@ -52,7 +55,7 @@
|
||||
margin-left: -100%;
|
||||
}
|
||||
|
||||
&>.general-buttons {
|
||||
& > .general-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
@@ -83,7 +86,7 @@
|
||||
|
||||
.sources {
|
||||
span.source {
|
||||
border: 1px solid @color-greyish-brown !important;
|
||||
border: 1px solid @color-greyish-brown !important;
|
||||
color: @color-greyish-brown;
|
||||
}
|
||||
}
|
||||
@@ -195,7 +198,6 @@
|
||||
margin-bottom: 8px;
|
||||
|
||||
&.warning {
|
||||
|
||||
.content h2,
|
||||
.content .summary {
|
||||
color: @color-squash;
|
||||
@@ -203,7 +205,6 @@
|
||||
}
|
||||
|
||||
&.alarm {
|
||||
|
||||
.content h2,
|
||||
.content .summary {
|
||||
color: @color-scarlet;
|
||||
@@ -238,11 +239,11 @@
|
||||
.sourcecontainer {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
color: @color-greyish-brown ;
|
||||
color: @color-greyish-brown;
|
||||
font-weight: 600;
|
||||
|
||||
.source {
|
||||
border: 1px solid @color-warm-grey !important;
|
||||
border: 1px solid @color-warm-grey !important;
|
||||
padding: 0 5px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
@@ -344,7 +345,7 @@
|
||||
span {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
line-height: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
@@ -357,7 +358,6 @@
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
span,
|
||||
i {
|
||||
color: #4b4b4b;
|
||||
@@ -400,7 +400,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
.message-box-header {
|
||||
height: calc(~'100% - 20px');
|
||||
height: calc(~"100% - 20px");
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
@@ -472,10 +472,8 @@
|
||||
|
||||
&.enablemodify {
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
button.btn-hidden {
|
||||
visibility: hidden;
|
||||
|
||||
@@ -535,7 +533,6 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.addattach {
|
||||
@@ -555,13 +552,21 @@
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
padding: 14px 17px;
|
||||
border: none;
|
||||
background-image: linear-gradient(to bottom, @color-white2, @color-silver);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
@color-white2,
|
||||
@color-silver
|
||||
);
|
||||
color: @color-darkish-blue;
|
||||
|
||||
&:active {
|
||||
background-image: linear-gradient(to bottom, @color-silver, @color-white2);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
@color-silver,
|
||||
@color-white2
|
||||
);
|
||||
border: none !important;
|
||||
box-shadow: inset @button-shadow !important;
|
||||
box-shadow: inset @button-shadow !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -661,7 +666,7 @@
|
||||
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&>.content {
|
||||
& > .content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -677,7 +682,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.alarm-history-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -868,7 +872,6 @@
|
||||
.checkboxesView,
|
||||
.checkboxesViewUser {
|
||||
width: calc(~"100% - 8px");
|
||||
;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
z-index: 100;
|
||||
@@ -926,11 +929,11 @@
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background: #dddddd
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background: #FFF
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
th:nth-child(1),
|
||||
@@ -985,25 +988,24 @@
|
||||
overflow-x: hidden;
|
||||
|
||||
&.without-footer {
|
||||
height: 620px
|
||||
height: 620px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
margin: 20px 0px;
|
||||
background-color: #E5E5E5;
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 15px;
|
||||
box-shadow: inset 0 1px 3px 0 #9F9F9F;
|
||||
box-shadow: inset 0 1px 3px 0 #9f9f9f;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
width: 16px;
|
||||
background: #9F9F9F;
|
||||
border: 4px solid #E5E5E5;
|
||||
background: #9f9f9f;
|
||||
border: 4px solid #e5e5e5;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@@ -1033,7 +1035,6 @@
|
||||
display: block;
|
||||
margin: auto;
|
||||
|
||||
|
||||
&.warning {
|
||||
background-color: #f5a623;
|
||||
color: #4b4b4b;
|
||||
@@ -1077,7 +1078,6 @@
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
|
||||
div.group-label-button {
|
||||
text-align: center;
|
||||
margin: 8px 0 8px 0;
|
||||
@@ -1087,7 +1087,7 @@
|
||||
padding: 0px;
|
||||
|
||||
&.disabled {
|
||||
opacity: .65;
|
||||
opacity: 0.65;
|
||||
cursor: default;
|
||||
box-shadow: none !important;
|
||||
pointer-events: none;
|
||||
@@ -1107,7 +1107,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -24427,4 +24427,4 @@ body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
"env": "development",
|
||||
"api": {
|
||||
"enabled": true,
|
||||
"apiServerUrl": "http://localhost:9000/"
|
||||
"apiServerUrl": "http://95.236.130.105:9000/"
|
||||
},
|
||||
"allUIVisible": false
|
||||
}
|
||||
@@ -13,7 +13,7 @@
|
||||
<script src="Scripts/jquery.mousewheel.js"></script>
|
||||
<script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
|
||||
<script src="Scripts/raphael-2.1.4.min.js"></script>
|
||||
<script src="http://localhost:9000/signalr/hubs" async></script>
|
||||
<script src="http://95.236.130.105:9000/signalr/hubs" async></script>
|
||||
|
||||
<link href="assets/styles/style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
Generated
+132
-23
@@ -3491,9 +3491,9 @@
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.0.0-rc.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-rc.1.tgz",
|
||||
"integrity": "sha512-yR+BS90EOXTNieasf8ce9J3TFCpm2DGqoqdbtiwQ33hon3FyIznLX7sKavAq1VmfBnOeV6It0Htg4aniv8ph1g==",
|
||||
"version": "npm:vue-loader@16.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
|
||||
"integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
@@ -6011,6 +6011,15 @@
|
||||
"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
|
||||
"dev": true
|
||||
},
|
||||
"copy-anything": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.1.tgz",
|
||||
"integrity": "sha512-lA57e7viQHOdPQcrytv5jFeudZZOXuyk47lZym279FiDQ8jeZomXiGuVf6ffMKkJ+3TIai3J1J3yi6M+/4U35g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-what": "^3.7.1"
|
||||
}
|
||||
},
|
||||
"copy-concurrently": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
|
||||
@@ -8942,6 +8951,16 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"lru-cache": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
|
||||
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"yallist": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"schema-utils": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
|
||||
@@ -8955,11 +8974,14 @@
|
||||
}
|
||||
},
|
||||
"semver": {
|
||||
"version": "7.3.2",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
|
||||
"integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
|
||||
"version": "7.3.4",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
|
||||
"integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"lru-cache": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
@@ -8970,6 +8992,13 @@
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"yallist": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
|
||||
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -9016,16 +9045,16 @@
|
||||
}
|
||||
},
|
||||
"fs-extra": {
|
||||
"version": "9.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
|
||||
"integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
|
||||
"version": "9.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
|
||||
"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"at-least-node": "^1.0.0",
|
||||
"graceful-fs": "^4.2.0",
|
||||
"jsonfile": "^6.0.1",
|
||||
"universalify": "^1.0.0"
|
||||
"universalify": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"graceful-fs": {
|
||||
@@ -10214,6 +10243,13 @@
|
||||
"integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
|
||||
"dev": true
|
||||
},
|
||||
"image-size": {
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
|
||||
"integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"import-cwd": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
|
||||
@@ -10806,6 +10842,12 @@
|
||||
"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
|
||||
"dev": true
|
||||
},
|
||||
"is-what": {
|
||||
"version": "3.12.0",
|
||||
"resolved": "https://registry.npmjs.org/is-what/-/is-what-3.12.0.tgz",
|
||||
"integrity": "sha512-2ilQz5/f/o9V7WRWJQmpFYNmQFZ9iM+OXRonZKcYgTkCzjb949Vi4h282PD1UfmgHk666rcWonbRJ++KI41VGw==",
|
||||
"dev": true
|
||||
},
|
||||
"is-windows": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
|
||||
@@ -10997,15 +11039,6 @@
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.6",
|
||||
"universalify": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"universalify": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
|
||||
"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"jsprim": {
|
||||
@@ -11063,6 +11096,75 @@
|
||||
"invert-kv": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"less": {
|
||||
"version": "3.13.1",
|
||||
"resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",
|
||||
"integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"copy-anything": "^2.0.1",
|
||||
"errno": "^0.1.1",
|
||||
"graceful-fs": "^4.1.2",
|
||||
"image-size": "~0.5.0",
|
||||
"make-dir": "^2.1.0",
|
||||
"mime": "^1.4.1",
|
||||
"native-request": "^1.0.5",
|
||||
"source-map": "~0.6.0",
|
||||
"tslib": "^1.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"make-dir": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
|
||||
"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"pify": "^4.0.1",
|
||||
"semver": "^5.6.0"
|
||||
}
|
||||
},
|
||||
"mime": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
|
||||
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"pify": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
|
||||
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"less-loader": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz",
|
||||
"integrity": "sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"clone": "^2.1.1",
|
||||
"loader-utils": "^1.1.0",
|
||||
"pify": "^4.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"clone": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
|
||||
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
|
||||
"dev": true
|
||||
},
|
||||
"pify": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
|
||||
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"leven": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
|
||||
@@ -11735,6 +11837,13 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"native-request": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/native-request/-/native-request-1.0.8.tgz",
|
||||
"integrity": "sha512-vU2JojJVelUGp6jRcLwToPoWGxSx23z/0iX+I77J3Ht17rf2INGjrhOoQnjVo60nQd8wVsgzKkPfRXBiVdD2ag==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"natural-compare": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
|
||||
@@ -17296,9 +17405,9 @@
|
||||
}
|
||||
},
|
||||
"universalify": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
|
||||
"integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
|
||||
"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
|
||||
@@ -53,6 +53,8 @@
|
||||
"eslint": "^7.13.0",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"file-loader": "^1.1.4",
|
||||
"less": "^3.0.4",
|
||||
"less-loader": "^5.0.0",
|
||||
"style-loader": "1.2.1",
|
||||
"terser-webpack-plugin": "1.3.0",
|
||||
"ts-loader": "6.2.1",
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
declare module server {
|
||||
|
||||
export interface channels {
|
||||
[id: string]: channel[]
|
||||
}
|
||||
|
||||
export interface channel {
|
||||
value: number;
|
||||
id: number;
|
||||
bank: string;
|
||||
position: string;
|
||||
page: string;
|
||||
wire: string;
|
||||
profinet: string;
|
||||
label: string;
|
||||
visible: boolean;
|
||||
forceEnabled?: boolean;
|
||||
forcedValue?: number;
|
||||
isForced?: boolean;
|
||||
forceZero?: boolean;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -12,6 +12,7 @@ import { store, appModelActions, machineStatusActions } from "@/store";
|
||||
import paddle from "@/app_modules_thermo/components/paddle/paddle.vue";
|
||||
import Dashboard from "@/app_modules_thermo/dashboard/dashboard.vue";
|
||||
import PreDashboard from "@/app_modules_thermo/preriscaldo-dashboard/preriscaldo-dashboard.vue";
|
||||
import sottoCofano from "@/app_modules_thermo/sotto-cofano/sotto-cofano.vue";
|
||||
|
||||
|
||||
import * as iziToast from "izitoast";
|
||||
@@ -38,7 +39,8 @@ declare var cmsClient;
|
||||
dashboard: Dashboard,
|
||||
predashboard: PreDashboard,
|
||||
alarmList,
|
||||
printGantt
|
||||
printGantt,
|
||||
sottoCofano
|
||||
}
|
||||
})
|
||||
export default class app extends Vue {
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<router-view :class="{'blur':applyBlurInternal}" />
|
||||
<modal-container name="modal" container-name="modal-internal" :inform-hmi="false"></modal-container>
|
||||
</div>
|
||||
|
||||
<sotto-cofano></sotto-cofano>
|
||||
<paddle></paddle>
|
||||
|
||||
<app-footer :class="{'blur':(applyBlur || applyBlurNc)}"></app-footer>
|
||||
|
||||
@@ -4,13 +4,14 @@ import {
|
||||
store, AppModel,/*, MachineStatusModel, machineStatusActions, localizationModelActions, machineInfoActions*/
|
||||
machineStatusActions
|
||||
} from "@/store";
|
||||
import { UserInfoDialog, MachineInfoDialog, ContactInfoDialog,CmsconnectInfoDialog } from "@/app_modules/machine";
|
||||
import { UserInfoDialog, MachineInfoDialog, ContactInfoDialog, CmsconnectInfoDialog } from "@/app_modules/machine";
|
||||
|
||||
import { ModalHelper } from "./components/modals/ModalHelper";
|
||||
import Vue from "vue";
|
||||
import { loginService, machineService, localizationService } from "./services";
|
||||
import { prodService } from "./services/prodService";
|
||||
import * as iziToast from "izitoast";
|
||||
import { underTheHoodService } from "./services/underTheHoodService";
|
||||
|
||||
// import { UsersService } from "./services/usersService";
|
||||
|
||||
@@ -70,6 +71,9 @@ async function loadMachineConfig() {
|
||||
|
||||
await prodService.GetProdPanel();
|
||||
|
||||
await underTheHoodService.getChannels();
|
||||
await underTheHoodService.getChannelsConfig();
|
||||
|
||||
// load default language
|
||||
if (!(store.state as AppModel).localization.currentLanguage) {
|
||||
localizationService.changeCurrentLanguage(mcresult.defaultLanguage);
|
||||
@@ -375,12 +379,12 @@ function enableScroll(element) {
|
||||
|
||||
function takescreenshot() {
|
||||
var ricetta = (store.state as AppModel).prod.panel.nomeRicetta;
|
||||
if(!ricetta || ricetta =="")
|
||||
if (!ricetta || ricetta == "")
|
||||
ricetta = "_noRecipe";
|
||||
|
||||
if (typeof cmsClient != "undefined") {
|
||||
var response = cmsClient.takeScreenshot(ricetta);
|
||||
if(response != "")
|
||||
if (typeof cmsClient != "undefined") {
|
||||
var response = cmsClient.takeScreenshot(ricetta);
|
||||
if (response != "")
|
||||
var resp = JSON.parse(response);
|
||||
|
||||
if (response != "" && resp && resp.error) {
|
||||
@@ -393,7 +397,7 @@ function takescreenshot() {
|
||||
transitionOut: "fadeOut",
|
||||
});
|
||||
}
|
||||
else{
|
||||
else {
|
||||
(iziToast as any).success({
|
||||
title: "Screenshot",
|
||||
message: resp.path,
|
||||
@@ -401,7 +405,7 @@ function takescreenshot() {
|
||||
timeout: 10000,
|
||||
class: "t-error",
|
||||
transitionOut: "fadeOut",
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -31,6 +31,7 @@ import { routes as productionRoutes } from "./app_modules_thermo/processo/route"
|
||||
import { routes as SetupRoutes } from "@/app_modules_thermo/setup/route.js";
|
||||
import { routes as ProgrPreriscaldoRoutes } from "@/app_modules_thermo/programmazione-preriscaldo/route";
|
||||
import { routes as users } from "./app_modules/users/route";
|
||||
//import { routes as ioRoutes } from "@/app_modules_thermo/sotto-cofano/route";
|
||||
|
||||
export let routes = [
|
||||
{ path: "", component: productionRoutes[0].component, name: productionRoutes[0].name, meta: { title: "Dashboard" } },
|
||||
@@ -74,6 +75,7 @@ injectRoutes(routes, ProgrPreriscaldoRoutes);
|
||||
// injectRoutes(routes, scada);
|
||||
// injectRoutes(routes, reports);
|
||||
injectRoutes(routes, users);
|
||||
// injectRoutes(routes, ioRoutes);
|
||||
|
||||
|
||||
|
||||
|
||||
+1
@@ -0,0 +1 @@
|
||||
@import "../../../variable.less";
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import Header from "../../../header/my-header.vue";
|
||||
import MenuSx from "../../../menu-sx/menu-sx.vue";
|
||||
import AssiTable from "../../../Assi/components/tables/assi-table/assi-table.vue";
|
||||
|
||||
@Component({
|
||||
components: { Header, MenuSx, AssiTable }
|
||||
})
|
||||
export default class Assi extends Vue {}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="column-page">
|
||||
<AssiTable></AssiTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "assi.less";
|
||||
</style>
|
||||
<script lang="ts" src="./assi.ts"></script>
|
||||
+555
@@ -0,0 +1,555 @@
|
||||
@import "../../../../variable.less";
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.log-assi-table {
|
||||
width: 1384px;
|
||||
height: 886px;
|
||||
margin: 20px 20px 0 20px;
|
||||
tbody {
|
||||
height: 752px;
|
||||
}
|
||||
thead {
|
||||
width: 1400px;
|
||||
height: 34px;
|
||||
opacity: 0.5;
|
||||
background-color: @fill-under-grey-1-2;
|
||||
}
|
||||
th {
|
||||
display: inline-block;
|
||||
}
|
||||
tbody {
|
||||
vertical-align: unset;
|
||||
border-color: unset;
|
||||
tr {
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fill-under-grey-3-2 {
|
||||
background-color: @fill-under-grey-3-2;
|
||||
}
|
||||
.fill-under-grey-1-2 {
|
||||
background-color: @fill-under-grey-1-2;
|
||||
}
|
||||
|
||||
.axis-assi {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 0px 12px 9px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
color: @white;
|
||||
text-align: left !important;
|
||||
float: left;
|
||||
&-inner {
|
||||
}
|
||||
}
|
||||
|
||||
.position-assi {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 0px 12px 111px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: left !important;
|
||||
float: left;
|
||||
color: @white;
|
||||
&-inner {
|
||||
}
|
||||
}
|
||||
|
||||
.velocity-assi {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 0 12px 60px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: left !important;
|
||||
float: left;
|
||||
color: @white;
|
||||
&-inner {
|
||||
}
|
||||
}
|
||||
|
||||
.torque-assi {
|
||||
width: 114px;
|
||||
height: 12px;
|
||||
margin: 10px 0px 12px 34px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
text-align: left !important;
|
||||
color: @white;
|
||||
&-inner {
|
||||
width: 253px;
|
||||
height: 16px;
|
||||
margin: 24px 69px 24px 142px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
float: left;
|
||||
text-align: initial;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.status-assi {
|
||||
width: 114px;
|
||||
height: 12px;
|
||||
margin: 10px 0px 12px 7px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
text-align: left !important;
|
||||
color: @white;
|
||||
&-inner {
|
||||
}
|
||||
}
|
||||
|
||||
.error-code-assi {
|
||||
width: 114px;
|
||||
height: 12px;
|
||||
margin: 0 34px 0 13px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
text-align: left !important;
|
||||
color: @white;
|
||||
&-inner {
|
||||
}
|
||||
}
|
||||
|
||||
.fase-motion-assi {
|
||||
width: 114px;
|
||||
height: 12px;
|
||||
margin: 10px 430px 12px 0px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
text-align: left !important;
|
||||
color: @white;
|
||||
&-inner {
|
||||
}
|
||||
}
|
||||
|
||||
.tr-zero-level {
|
||||
width: 1400px;
|
||||
.icon-toggle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 20px 0px 23px 7px;
|
||||
float: left;
|
||||
.icon-closed {
|
||||
width: 16px;
|
||||
height: 11px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-top: 8px solid @white;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-open {
|
||||
width: 16px;
|
||||
height: 11px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-left: 8px solid @white;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.axis {
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 10px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
.position {
|
||||
width: 42px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 133px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
.velocity {
|
||||
width: 25px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 95px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
.torque {
|
||||
width: 58px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 55px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center !important;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
.status {
|
||||
width: 58px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 42px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: right;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
.error-code {
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 100px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
.fase-motion {
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 119px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.tr-n-level {
|
||||
margin-left: 33px;
|
||||
width: 1370px;
|
||||
.axis {
|
||||
width: 23px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 19px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
.position {
|
||||
width: 45px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 110px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
.velocity {
|
||||
width: 26px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 94px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
.torque {
|
||||
width: 55px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 55px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
.status {
|
||||
width: 43px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 59px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: right;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
.error-code {
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 100px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
.fase-motion {
|
||||
width: 42px;
|
||||
height: 16px;
|
||||
margin: 24px 40px 24px 119px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.button-align {
|
||||
width: 81px;
|
||||
height: 48px;
|
||||
object-fit: contain;
|
||||
margin: 8px 0 8px 100px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
|
||||
&-label {
|
||||
width: 44px;
|
||||
height: 21px;
|
||||
padding: 14px 18px 13px 19px;
|
||||
object-fit: contain;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.button-slaves-position {
|
||||
width: 205px;
|
||||
height: 48px;
|
||||
margin-left: 10px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
|
||||
&-label {
|
||||
width: 168px;
|
||||
height: 21px;
|
||||
padding: 14px 18px 13px 19px;
|
||||
object-fit: contain;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.button-probe {
|
||||
width: 89px;
|
||||
height: 48px;
|
||||
margin: 0 18px 0 10px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
|
||||
&-label {
|
||||
width: 52px;
|
||||
height: 21px;
|
||||
padding: 14px 18px 13px 19px;
|
||||
object-fit: contain;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.controlli-button-group-container {
|
||||
display: inline-block;
|
||||
margin-left: 30px;
|
||||
margin-right: 187px;
|
||||
|
||||
.controlli-button-group-n {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.button-control-minus {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
|
||||
}
|
||||
|
||||
.button-control-plus {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
|
||||
}
|
||||
.controlli-field {
|
||||
width: 106px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 3px 0 @black-50;
|
||||
background-color: @very-light-pink-two;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-control-value-label {
|
||||
margin: 8px 8px 8px 8px;
|
||||
}
|
||||
|
||||
.controlli-button-minus-icon {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.controlli-button-plus-icon {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.controlli {
|
||||
object-fit: contain;
|
||||
}
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class AssiTable extends Vue {
|
||||
data = [];
|
||||
groupedData = [];
|
||||
hon = false;
|
||||
groupVisible: string[] = [];
|
||||
|
||||
mounted() {
|
||||
this.hon = false;
|
||||
this.data = [
|
||||
{
|
||||
axis: "W1",
|
||||
group: "W",
|
||||
level: 0,
|
||||
position: 227.71,
|
||||
velocity: 374,
|
||||
torque: "0.85 Nm",
|
||||
status: "Upper",
|
||||
errorCode: 150,
|
||||
faseMotion: 123654
|
||||
},
|
||||
{
|
||||
axis: "W2",
|
||||
group: "W",
|
||||
level: 1,
|
||||
position: 227.71,
|
||||
velocity: 374,
|
||||
torque: "0.85 Nm",
|
||||
status: "Upper",
|
||||
errorCode: 150,
|
||||
faseMotion: 123654
|
||||
},
|
||||
{
|
||||
axis: "W3",
|
||||
group: "W",
|
||||
level: 1,
|
||||
position: 227.71,
|
||||
velocity: 374,
|
||||
torque: "0.85 Nm",
|
||||
status: "Upper",
|
||||
errorCode: 150,
|
||||
faseMotion: 123654
|
||||
},
|
||||
{
|
||||
axis: "Z1",
|
||||
group: "Z",
|
||||
level: 0,
|
||||
position: 227.71,
|
||||
velocity: 374,
|
||||
torque: "0.85 Nm",
|
||||
status: "Upper",
|
||||
errorCode: 150,
|
||||
faseMotion: 123654
|
||||
},
|
||||
{
|
||||
axis: "Z2",
|
||||
group: "Z",
|
||||
level: 1,
|
||||
position: 227.71,
|
||||
velocity: 374,
|
||||
torque: "0.85 Nm",
|
||||
status: "Upper",
|
||||
errorCode: 150,
|
||||
faseMotion: 123654
|
||||
}
|
||||
];
|
||||
this.groupReduce(this.data);
|
||||
}
|
||||
|
||||
groupReduce(data) {
|
||||
this.groupedData = data.reduce((acc, item) => {
|
||||
if (Object.keys(acc).length > 0 && acc[item.group]) {
|
||||
acc[item.group].push({
|
||||
axis: item.axis,
|
||||
level: item.level,
|
||||
position: item.position,
|
||||
velocity: item.velocity,
|
||||
torque: item.torque,
|
||||
status: item.status,
|
||||
errorCode: item.errorCode,
|
||||
faseMotion: item.faseMotion,
|
||||
group: item.group
|
||||
});
|
||||
} else {
|
||||
acc[item.group] = [
|
||||
{
|
||||
axis: item.axis,
|
||||
level: item.level,
|
||||
position: item.position,
|
||||
velocity: item.velocity,
|
||||
torque: item.torque,
|
||||
status: item.status,
|
||||
errorCode: item.errorCode,
|
||||
faseMotion: item.faseMotion,
|
||||
group: item.group
|
||||
}
|
||||
];
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
openCollapse(group: string) {
|
||||
const idx = this.groupVisible.indexOf(group);
|
||||
if (idx >= 0) this.groupVisible.splice(idx, 1);
|
||||
else this.groupVisible.push(group);
|
||||
}
|
||||
}
|
||||
+178
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div>
|
||||
<table class="log-assi-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="axis-assi">Axis</th>
|
||||
<th class="position-assi">Position</th>
|
||||
<th class="velocity-assi">Velocity</th>
|
||||
<th class="torque-assi">Torque</th>
|
||||
<th class="status-assi">Status</th>
|
||||
<th class="error-code-assi">Error Code</th>
|
||||
<th class="fase-motion-assi">Fase Motion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<div v-for="group of groupedData" :key="group.level">
|
||||
<div v-for="(item, index) of group" :key="`${item.axis}_${index}`">
|
||||
<tr
|
||||
v-if="item.level === 0"
|
||||
:class="[
|
||||
index % 2 === 0
|
||||
? 'tr-zero-level fill-under-grey-3-2'
|
||||
: 'tr-zero-level fill-under-grey-1-2'
|
||||
]"
|
||||
>
|
||||
<td data-toggle="toggle">
|
||||
<span class="icon-toggle">
|
||||
<span
|
||||
v-if="groupVisible.includes(item.group)"
|
||||
class="icon-closed"
|
||||
@click="openCollapse(item.group)"
|
||||
></span>
|
||||
<span
|
||||
v-else
|
||||
class="icon-open"
|
||||
@click="openCollapse(item.group)"
|
||||
></span>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="axis">
|
||||
{{ item.axis }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="position">
|
||||
{{ item.position }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="velocity">
|
||||
{{ item.velocity }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="torque">
|
||||
{{ item.torque }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="status">
|
||||
{{ item.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="error-code">
|
||||
{{ item.errorCode }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="fase-motion">
|
||||
{{ item.faseMotion }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="">
|
||||
<span class="button-align pointer">
|
||||
<span class="button-align-label">Align</span>
|
||||
</span>
|
||||
<span class="button-slaves-position pointer">
|
||||
<span class="button-slaves-position-label"
|
||||
>Set Slaves Position</span
|
||||
>
|
||||
</span>
|
||||
<span class="button-probe pointer">
|
||||
<span class="button-probe-label">Probe</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-else-if="groupVisible.includes(item.group)"
|
||||
:ref="`${item.axis.charAt(0)}`"
|
||||
:class="[
|
||||
index % 2 === 0
|
||||
? 'tr-n-level fill-under-grey-3-2'
|
||||
: 'tr-n-level fill-under-grey-1-2'
|
||||
]"
|
||||
>
|
||||
<td>
|
||||
<span class="axis">
|
||||
{{ item.axis }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="position">
|
||||
{{ item.position }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="velocity">
|
||||
{{ item.velocity }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="torque">
|
||||
{{ item.torque }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="status">
|
||||
{{ item.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="error-code">
|
||||
{{ item.errorCode }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="fase-motion">
|
||||
{{ item.faseMotion }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="controlli-button-group-container">
|
||||
<span class="controlli-button-group-n">
|
||||
<span class="button-control-minus pointer">
|
||||
<span class="controlli-button-minus-icon">
|
||||
<img
|
||||
src="assets/icons/sotto-cofano/png/ico-bt-minus.png"
|
||||
srcset="
|
||||
assets/icons/sotto-cofano/png/ico-bt-minus@2x.png 2x,
|
||||
assets/icons/sotto-cofano/png//ico-bt-minus@3x.png 3x
|
||||
"
|
||||
class="icobt-"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span class="controlli">
|
||||
<span class="controlli-field">
|
||||
<span class="label">00000</span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="button-control-plus pointer">
|
||||
<span class="controlli-button-plus-icon">
|
||||
<img
|
||||
src="assets/icons/sotto-cofano/png/ico-bt-plus.png"
|
||||
srcset="
|
||||
assets/icons/sotto-cofano/png/ico-bt-plus@2x.png 2x,
|
||||
assets/icons/sotto-cofano/png/ico-bt-plus@3x.png 3x
|
||||
"
|
||||
class="icobt-"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "assi-table.less";
|
||||
</style>
|
||||
<script lang="ts" src="./assi-table.ts"></script>
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
@import "../../../variable.less";
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.column-page-header {
|
||||
width: 672px;
|
||||
margin: 0 0 0 20px;
|
||||
> title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
line-height: 1.96;
|
||||
text-align: center;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
.row-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
a {
|
||||
cursor: pointer;
|
||||
height: 45px;
|
||||
padding: 0 13px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: @white;
|
||||
text-decoration: underline;
|
||||
|
||||
&.upper {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-list-input {
|
||||
height: 100px;
|
||||
}
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
import { store } from "@/store";
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import Header from "../../../header/my-header.vue";
|
||||
import MenuSx from "../../../menu-sx/menu-sx.vue";
|
||||
import InputTable from "../tables/inputTab/input.vue";
|
||||
import OutputTable from "../tables/outputTab/output.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
Header,
|
||||
MenuSx,
|
||||
InputTable,
|
||||
OutputTable
|
||||
}
|
||||
})
|
||||
export default class IO extends Vue {
|
||||
|
||||
get items(): server.channels {
|
||||
return store.state.underTheHood.ioChannels;
|
||||
}
|
||||
|
||||
get config(): { [id: string]: number[] } {
|
||||
return store.state.underTheHood.ioChannelsConfig;
|
||||
}
|
||||
|
||||
}
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="column-page">
|
||||
<div class="column-page-header">
|
||||
<title>INPUT</title>
|
||||
<div class="row-list">
|
||||
<a href>Pinned</a>
|
||||
<template v-for="(group, idx) in ['di','ai']">
|
||||
<a
|
||||
class="upper"
|
||||
v-for="(inputid, idx2) in config[group]"
|
||||
:key="`h-${idx}-${idx2}`"
|
||||
>{{`${group} ${inputid}`}}</a>
|
||||
</template>
|
||||
</div>
|
||||
<InputTable></InputTable>
|
||||
</div>
|
||||
<div class="column-page-header">
|
||||
<title>OUTPUT</title>
|
||||
|
||||
<div class="row-list">
|
||||
<a href>Pinned</a>
|
||||
<template v-for="(group, idx) in ['do','ao']">
|
||||
<a
|
||||
class="upper"
|
||||
v-for="(inputid, idx2) in config[group]"
|
||||
:key="`h-${idx}-${idx2}`"
|
||||
>{{`${group} ${inputid}`}}</a>
|
||||
</template>
|
||||
</div>
|
||||
<OutputTable></OutputTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "io";
|
||||
</style>
|
||||
<script src="./io.ts" lang="ts"></script>
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import Component from "vue-class-component";
|
||||
import Vue from "vue";
|
||||
import { Prop } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class inputRow extends Vue {
|
||||
|
||||
@Prop()
|
||||
pinned: boolean;
|
||||
|
||||
@Prop()
|
||||
item: server.channel;
|
||||
|
||||
@Prop()
|
||||
group: string;
|
||||
|
||||
|
||||
}
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<tr>
|
||||
<td class="pointer">
|
||||
<button class="pointer" @click="$emit('click')">
|
||||
<img
|
||||
v-if="pinned"
|
||||
src="/assets/icons/sotto-cofano/png/ico-bt-selez-auto-pin.png"
|
||||
class="ico-bt-selez-auto-pin-input"
|
||||
/>
|
||||
<img
|
||||
v-if="!pinned"
|
||||
src="/assets/icons/sotto-cofano/png/ico-bt-selez-auto-pin-grey.png"
|
||||
class="ico-bt-selez-auto-pin-input"
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ item.page }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ item.wire }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ item.profinet }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ item.label | localize(item.label) }}</span>
|
||||
</td>
|
||||
<td v-if="group=='di'">
|
||||
<span
|
||||
:class="
|
||||
item.value
|
||||
? 'value-button-input-container-on pointer'
|
||||
: 'value-button-input-container-off pointer'
|
||||
"
|
||||
>
|
||||
<span v-if="item.value == 1" class="value-button-input-container-on-label">ON</span>
|
||||
<span v-if="item.value == 0" class="value-button-input-container-off-label">OFF</span>
|
||||
</span>
|
||||
</td>
|
||||
<td v-if="group=='ai'" class="ai">
|
||||
<span>{{item.value}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<script src="./input-row-item.ts" lang="ts">
|
||||
</script>
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
@import "../../../../variable.less";
|
||||
|
||||
th,
|
||||
td {
|
||||
&.input-description {
|
||||
width: 350px;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
&.ai {
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
span {
|
||||
margin: 0 20px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.value-button-input-container-off {
|
||||
width: 48px;
|
||||
height: 25px;
|
||||
margin: 20px 10px 19px 10px;
|
||||
padding: 3px 0;
|
||||
border-radius: 2px;
|
||||
float: right;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: @greyish-brown;
|
||||
&-label {
|
||||
width: 48px;
|
||||
height: 19px;
|
||||
padding: 2px 0 0 0px;
|
||||
text-shadow: 0 0 4px @black-50;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
.value-button-input-container-on {
|
||||
width: 48px;
|
||||
height: 25px;
|
||||
margin: 20px 10px 19px 10px;
|
||||
padding: 3px 0;
|
||||
border-radius: 2px;
|
||||
float: right;
|
||||
background-color: @clear-blue;
|
||||
&-label {
|
||||
width: 48px;
|
||||
height: 19px;
|
||||
padding: 2px 0 0 0px;
|
||||
text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: #e8e8e8;
|
||||
}
|
||||
}
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
import { store } from "@/store";
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import inputRow from "./input-row-item.vue";
|
||||
|
||||
@Component({
|
||||
components: { inputRow }
|
||||
})
|
||||
export default class InputTable extends Vue {
|
||||
|
||||
pinned = [];
|
||||
|
||||
|
||||
|
||||
pin(item: server.channel) {
|
||||
let found = this.pinned.findIndex(i => i == item);
|
||||
if (found >= 0) this.pinned.splice(found, 1);
|
||||
else
|
||||
this.pinned.push(item);
|
||||
}
|
||||
|
||||
isPinned(item: server.channel): boolean {
|
||||
return this.pinned.findIndex(i => i == item) >= 0;
|
||||
}
|
||||
|
||||
get items(): server.channels {
|
||||
return store.state.underTheHood.ioChannels;
|
||||
}
|
||||
|
||||
get config(): { [id: string]: number[] } {
|
||||
return store.state.underTheHood.ioChannelsConfig;
|
||||
}
|
||||
}
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="table-container scrollable">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Page</th>
|
||||
<th>Wire</th>
|
||||
<th>Profinet</th>
|
||||
<th class="input-description">Description</th>
|
||||
<th class="center">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-if="pinned.length">
|
||||
<tr class="group-row">
|
||||
<td colspan="6">{{'pinned' | localize('Pinned')}}</td>
|
||||
</tr>
|
||||
<input-row
|
||||
@click="pin(item)"
|
||||
:pinned="isPinned(item)"
|
||||
:item="item"
|
||||
v-for="(item, index) of pinned"
|
||||
:key="`pinned-${idx}-${index}`"
|
||||
></input-row>
|
||||
</template>
|
||||
|
||||
<template v-for="(group, idx) in ['di','ai']">
|
||||
<template v-for="(bankid, idx2) in config[group]">
|
||||
<tr class="group-row" :key="`h-${idx}-${idx2}`">
|
||||
<td colspan="6">{{ `${group} ${bankid}`}}</td>
|
||||
</tr>
|
||||
|
||||
<input-row
|
||||
:group="group"
|
||||
@click="pin(item)"
|
||||
:pinned="isPinned(item)"
|
||||
:item="item"
|
||||
:id="`input-${group}`"
|
||||
v-for="(item, index) of items[group].filter(i => i.bank == bankid)"
|
||||
:key="`h-${idx}-${idx2}-${index}`"
|
||||
></input-row>
|
||||
</template>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "input.less";
|
||||
</style>
|
||||
<script lang="ts" src="./input.ts"></script>
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<table class="output-table">
|
||||
<thead>
|
||||
<tr class="bg-header">
|
||||
<th><span></span></th>
|
||||
<th><span class="page-output">Page</span></th>
|
||||
<th><span class="wire-output">Wire</span></th>
|
||||
<th><span class="profinet-output">Profinet</span></th>
|
||||
<th><span class="description-output">Description</span></th>
|
||||
<th><span class="value-output">Value</span></th>
|
||||
<th><span class="edit-output">Force</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<div class="tr-container-output" v-for="i of items" :key="i.nome">
|
||||
<div class="output-label">
|
||||
<tr class="tr-container-output-nome">
|
||||
<th>
|
||||
<span class="group-title">{{ i.nome }}</span>
|
||||
</th>
|
||||
</tr>
|
||||
</div>
|
||||
|
||||
<tr v-for="(item, index) of arrayReduced[i.nome]" :key="index">
|
||||
<td>
|
||||
<span class="controlli-bt-button-secondary-icon-output pointer">
|
||||
<img
|
||||
src="/assets/icons/sotto-cofano/png/ico-bt-selez-auto-pin-grey.png"
|
||||
srcset="
|
||||
/assets/icons/sotto-cofano/png/ico-bt-selez-auto-pin-grey@2x.png 2x,
|
||||
/assets/icons/sotto-cofano/png/ico-bt-selez-auto-pin-grey@3x.png 3x
|
||||
"
|
||||
class="ico-bt-selez-auto-pin-output"
|
||||
/>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="page-inner-output">{{ item.page }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="wire-inner-output">{{ item.wire }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="profinet-inner-output">{{ item.profinet }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="description-inner-output">
|
||||
{{ item.description }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
:class="
|
||||
item.value === 1
|
||||
? 'value-button-output-container-on pointer'
|
||||
: 'value-button-output-container-off pointer'
|
||||
"
|
||||
>
|
||||
<span
|
||||
v-if="item.value === 1"
|
||||
class="value-button-output-container-on-label"
|
||||
>ON</span
|
||||
>
|
||||
<span
|
||||
v-if="item.value === 0"
|
||||
class="value-button-output-container-off-label"
|
||||
>OFF</span
|
||||
>
|
||||
</span>
|
||||
</td>
|
||||
<td v-if="i.nome.includes('DO')">
|
||||
<span class="edit-button-output-container">
|
||||
<span class="edit-button-output-container-oval-left">
|
||||
<span class="edit-button-output-container-oval-left-text"
|
||||
>0</span
|
||||
>
|
||||
</span>
|
||||
<span class="edit-button-output-container-oval-center">
|
||||
<span class="edit-button-output-container-oval-center-text"
|
||||
>1</span
|
||||
>
|
||||
</span>
|
||||
<!-- <span class="edit-button-output-container-oval-right">
|
||||
<span class="edit-button-output-container-oval-right-text"
|
||||
>0</span
|
||||
>
|
||||
</span> -->
|
||||
</span>
|
||||
<span class="x-button-container">
|
||||
<span class="x-button-content">
|
||||
<span class="x-button-content-label">×</span>
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td v-if="i.nome.includes('AO')">
|
||||
<span class="controlli-a-field">
|
||||
<span class="controlli-a-label">
|
||||
1024
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</div>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "output.less";
|
||||
</style>
|
||||
<script lang="ts" src="./output.ts"></script>
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
import Component from "vue-class-component";
|
||||
import Vue from "vue";
|
||||
import { Prop } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class inputRow extends Vue {
|
||||
|
||||
@Prop()
|
||||
pinned: boolean;
|
||||
|
||||
@Prop()
|
||||
item: server.channel;
|
||||
|
||||
|
||||
}
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<tr>
|
||||
<td class="pointer">
|
||||
<button class="pointer" @click="$emit('click')">
|
||||
<img
|
||||
v-if="pinned"
|
||||
src="/assets/icons/sotto-cofano/png/ico-bt-selez-auto-pin.png"
|
||||
class="ico-bt-selez-auto-pin-input"
|
||||
/>
|
||||
<img
|
||||
v-if="!pinned"
|
||||
src="/assets/icons/sotto-cofano/png/ico-bt-selez-auto-pin-grey.png"
|
||||
class="ico-bt-selez-auto-pin-input"
|
||||
/>
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ item.page }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ item.wire }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ item.profinet }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>{{ item.label | localize(item.label) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
:class="
|
||||
item.value
|
||||
? 'value-button-input-container-on pointer'
|
||||
: 'value-button-input-container-off pointer'
|
||||
"
|
||||
>
|
||||
<span v-if="item.value == 1" class="value-button-input-container-on-label">ON</span>
|
||||
<span v-if="item.value == 0" class="value-button-input-container-off-label">OFF</span>
|
||||
</span>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</template>
|
||||
<script src="./output-row-item.ts" lang="ts">
|
||||
</script>
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@import "../../../../variable.less";
|
||||
|
||||
th,
|
||||
td {
|
||||
&.output-description {
|
||||
width: 220px;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
&.force {
|
||||
width: 130px;
|
||||
max-width: 130px;
|
||||
}
|
||||
}
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
import { store } from "@/store";
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import outputRow from "./output-row-item.vue";
|
||||
|
||||
|
||||
@Component({
|
||||
components: { outputRow }
|
||||
})
|
||||
export default class OutputTable extends Vue {
|
||||
pinned = [];
|
||||
|
||||
|
||||
pin(item: server.channel) {
|
||||
let found = this.pinned.findIndex(i => i == item);
|
||||
if (found >= 0) this.pinned.splice(found, 1);
|
||||
else
|
||||
this.pinned.push(item);
|
||||
}
|
||||
|
||||
isPinned(item: server.channel): boolean {
|
||||
return this.pinned.findIndex(i => i == item) >= 0;
|
||||
}
|
||||
|
||||
get items(): server.channels {
|
||||
return store.state.underTheHood.ioChannels;
|
||||
}
|
||||
}
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="table-container scrollable">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Page</th>
|
||||
<th>Wire</th>
|
||||
<th>Profinet</th>
|
||||
<th class="output-description">Description</th>
|
||||
<th class="center">Value</th>
|
||||
<th class="center force">Force</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-if="pinned.length">
|
||||
<tr class="group-row">
|
||||
<td colspan="6">{{'pinned' | localize('Pinned')}}</td>
|
||||
</tr>
|
||||
<output-row
|
||||
@click="pin(item)"
|
||||
:pinned="isPinned(item)"
|
||||
:item="item"
|
||||
v-for="(item, index) of pinned"
|
||||
:key="`pinned-${idx}-${index}`"
|
||||
></output-row>
|
||||
</template>
|
||||
|
||||
<template v-for="(group, idx) in Object.keys(items)">
|
||||
<tr class="group-row" :key="`h-${idx}`">
|
||||
<td colspan="6">{{group | localize(group)}}</td>
|
||||
</tr>
|
||||
|
||||
<output-row
|
||||
@click="pin(item)"
|
||||
:pinned="isPinned(item)"
|
||||
:item="item"
|
||||
:id="`output-${group}`"
|
||||
v-for="(item, index) of items[group]"
|
||||
:key="`h-${idx}-${index}`"
|
||||
></output-row>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "output.less";
|
||||
</style>
|
||||
<script lang="ts" src="./output.ts"></script>
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@import "../../../variable.less";
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.log-ciclo-automatico-table {
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: @fill-under-grey-3-2;
|
||||
}
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: @fill-under-grey-1-2;
|
||||
}
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import LogCicloAutomaticoTable from "../tables/log-ciclo-automatico-table/log-ciclo-automatico-table.vue";
|
||||
import Header from "../../../header/my-header.vue";
|
||||
import MenuSx from "../../../menu-sx/menu-sx.vue";
|
||||
|
||||
@Component({
|
||||
components: { Header, MenuSx, LogCicloAutomaticoTable }
|
||||
})
|
||||
export default class LogCicloAutomatico extends Vue {}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="column-page">
|
||||
<LogCicloAutomaticoTable></LogCicloAutomaticoTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "log-ciclo-automatico.less";
|
||||
</style>
|
||||
<script lang="ts" src="./log-ciclo-automatico.ts"></script>
|
||||
+186
@@ -0,0 +1,186 @@
|
||||
@import "../../../../variable.less";
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.log-ciclo-automatico-table {
|
||||
width: 1384px;
|
||||
height: 886px;
|
||||
margin: 20px 20px 0 20px;
|
||||
thead {
|
||||
height: 34px;
|
||||
opacity: 0.5;
|
||||
background-color: @fill-under-grey-1-2;
|
||||
}
|
||||
th {
|
||||
display: inline-block;
|
||||
}
|
||||
tbody {
|
||||
overflow-y: scroll;
|
||||
height: 752px;
|
||||
tr {
|
||||
display: inline-block;
|
||||
width: 1358px;
|
||||
height: 64px;
|
||||
float: left;
|
||||
&-inner {
|
||||
width: 1358px;
|
||||
height: 64px;
|
||||
margin: 34px 26px 0 0;
|
||||
padding: 0 2px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-ciclo {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 149px 12px 9px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
color: @white;
|
||||
text-align: left !important;
|
||||
float: left;
|
||||
&-inner {
|
||||
width: 177px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 0px 10px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
float: left;
|
||||
text-align: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.class-ciclo {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 36px 12px 0px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @white;
|
||||
&-inner {
|
||||
width: 35px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 0px 47px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.recipe-ciclo {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 108px 12px 0px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
float: left;
|
||||
color: @white;
|
||||
&-inner {
|
||||
width: 121px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 0px 51px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.message-ciclo {
|
||||
width: 114px;
|
||||
height: 12px;
|
||||
margin: 10px 0px 12px 0px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
float: left;
|
||||
text-align: left !important;
|
||||
color: @white;
|
||||
&-inner {
|
||||
width: 751px;
|
||||
height: 64px;
|
||||
margin: 18px 0px 0px 50px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
float: left;
|
||||
text-align: initial;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.button-details {
|
||||
width: 99px;
|
||||
float: right;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 14px 0px 13px 0px;
|
||||
margin: 8px 8px 8px 8px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
|
||||
cursor: pointer;
|
||||
&-label {
|
||||
width: 62px;
|
||||
height: 21px;
|
||||
object-fit: contain;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
+120
@@ -0,0 +1,120 @@
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class LogCicloAutomaticoTable extends Vue {
|
||||
rowData = [];
|
||||
|
||||
mounted() {
|
||||
this.rowData = [
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Donec quis orci eget orci vehicula condimentum. Curabitur in libero ut massa volutpat convallis. Morbi odio odio, elementum eu, interdum eu, tincidunt in, leo. Maecenas pulvinar lobortis est. Phasellus sit amet erat."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
class: "Error",
|
||||
recipe: "Recipe name [30]",
|
||||
message:
|
||||
"Fusce lacus purus, aliquet at, feugiat non, pretium quis, lectus. Suspendisse potenti. In eleifend quam a odio. In hac habitasse platea dictumst. Maecenas ut massa quis augue luctus tincidunt."
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
goToDetails() {
|
||||
this.$router.push({ path: "/io" });
|
||||
}
|
||||
}
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<table class="log-ciclo-automatico-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="date-ciclo">Date</th>
|
||||
<th class="class-ciclo">Class</th>
|
||||
<th class="recipe-ciclo">Recipe</th>
|
||||
<th class="message-ciclo">Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, i) of rowData" :key="i" class="tr-inner">
|
||||
<td>
|
||||
<span class="date-ciclo-inner">
|
||||
{{ item.date }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="class-ciclo-inner">
|
||||
{{ item.class }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="recipe-ciclo-inner">
|
||||
{{ item.recipe }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="message-ciclo-inner">
|
||||
{{ item.message }}
|
||||
</span>
|
||||
<span class="button-details" @click="goToDetails()">
|
||||
<span class="button-details-label">Details</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "log-ciclo-automatico-table.less";
|
||||
</style>
|
||||
<script lang="ts" src="./log-ciclo-automatico-table.ts"></script>
|
||||
+1
@@ -0,0 +1 @@
|
||||
@import "../../../variable.less";
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import Header from "../../../header/my-header.vue";
|
||||
import MenuSx from "../../../menu-sx/menu-sx.vue";
|
||||
import LogMisurazioniTable from "../../../LogMisurazioni/components/tables/log-misurazioni-table/log-misurazioni-table.vue";
|
||||
|
||||
@Component({
|
||||
components: { Header, MenuSx, LogMisurazioniTable }
|
||||
})
|
||||
export default class LogMisurazioni extends Vue {}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="column-page">
|
||||
<LogMisurazioniTable></LogMisurazioniTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "log-misurazioni.less";
|
||||
</style>
|
||||
<script src="./log-misurazioni.ts" lang="ts"></script>
|
||||
+163
@@ -0,0 +1,163 @@
|
||||
@import "../../../../variable.less";
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.log-misurazioni-table {
|
||||
width: 1384px;
|
||||
height: 886px;
|
||||
margin: 20px 20px 0 20px;
|
||||
thead {
|
||||
height: 34px;
|
||||
opacity: 0.5;
|
||||
background-color: @fill-under-grey-1-2;
|
||||
}
|
||||
th {
|
||||
display: inline-block;
|
||||
}
|
||||
tbody tr:nth-child(odd) {
|
||||
background-color: @fill-under-grey-3-2;
|
||||
}
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: @fill-under-grey-1-2;
|
||||
}
|
||||
tbody {
|
||||
overflow-y: scroll;
|
||||
height: 752px;
|
||||
tr {
|
||||
display: inline-block;
|
||||
width: 1358px;
|
||||
height: 64px;
|
||||
float: left;
|
||||
&-inner {
|
||||
width: 1358px;
|
||||
height: 64px;
|
||||
margin: 34px 26px 0 0;
|
||||
padding: 0 2px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-misurazioni {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 0px 12px 9px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
color: @white;
|
||||
text-align: left !important;
|
||||
float: left;
|
||||
&-inner {
|
||||
width: 164px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 10px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left !important;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.recipe-misurazioni {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 0px 12px 267px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
float: left;
|
||||
color: @white;
|
||||
&-inner {
|
||||
width: 121px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 139px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center !important;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.type-misurazioni {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 0 12px 448px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: left !important;
|
||||
float: left;
|
||||
color: @white;
|
||||
&-inner {
|
||||
width: 48px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 410px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.value-misurazioni {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 268px 12px 124px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: left !important;
|
||||
color: @white;
|
||||
&-inner {
|
||||
width: 253px;
|
||||
height: 16px;
|
||||
margin: 24px 69px 24px 142px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
float: left;
|
||||
text-align: initial;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class LogMisurazioniTable extends Vue {
|
||||
rowData = [];
|
||||
|
||||
mounted() {
|
||||
this.rowData = [
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
},
|
||||
{
|
||||
date: "2020-09-16 00:23:20 UTC",
|
||||
recipe: "Recipe name [30]",
|
||||
type: "Lenght",
|
||||
value: "568.08 mm [589.92 mm - 21.84 mm]"
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<table class="log-misurazioni-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="date-misurazioni">Date</th>
|
||||
<th class="recipe-misurazioni">Recipe</th>
|
||||
<th class="type-misurazioni">Type</th>
|
||||
<th class="value-misurazioni">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, i) of rowData" :key="i" class="tr-inner">
|
||||
<td>
|
||||
<span class="date-misurazioni-inner">
|
||||
{{ item.date }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="recipe-misurazioni-inner">
|
||||
{{ item.recipe }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="type-misurazioni-inner">
|
||||
{{ item.type }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="value-misurazioni-inner">
|
||||
{{ item.value }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "log-misurazioni-table.less";
|
||||
</style>
|
||||
<script lang="ts" src="./log-misurazioni-table.ts"></script>
|
||||
+1
@@ -0,0 +1 @@
|
||||
@import "../../../variable.less";
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import Header from "../../../header/my-header.vue";
|
||||
import MenuSx from "../../../menu-sx/menu-sx.vue";
|
||||
import RiscaldiTable from "../../../Riscaldi/components/tables/riscaldi-table/riscaldi-table.vue";
|
||||
|
||||
@Component({
|
||||
components: { Header, MenuSx, RiscaldiTable }
|
||||
})
|
||||
export default class Riscaldi extends Vue {}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="column-page">
|
||||
<RiscaldiTable></RiscaldiTable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "riscaldi.less";
|
||||
</style>
|
||||
<script lang="ts" src="./riscaldi.ts"></script>
|
||||
+268
@@ -0,0 +1,268 @@
|
||||
@import "../../../../variable.less";
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.riscaldi-table {
|
||||
width: 1384px;
|
||||
height: 886px;
|
||||
margin: 20px 20px 0 20px;
|
||||
thead {
|
||||
height: 34px;
|
||||
opacity: 0.5;
|
||||
background-color: @fill-under-grey-1-2;
|
||||
}
|
||||
th {
|
||||
display: inline-block;
|
||||
}
|
||||
tbody {
|
||||
overflow-y: scroll;
|
||||
height: 752px;
|
||||
tr:nth-child(odd) {
|
||||
background-color: @fill-under-grey-3-2;
|
||||
}
|
||||
tr {
|
||||
display: inline-block;
|
||||
width: 1358px;
|
||||
height: 64px;
|
||||
|
||||
&-inner {
|
||||
width: 1358px;
|
||||
height: 64px;
|
||||
margin: 34px 26px 0 0;
|
||||
padding: 0 2px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cell-id {
|
||||
height: 16px;
|
||||
margin: 10px 0px 12px 9px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
&-inner {
|
||||
width: 6px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 10px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.current {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 0px 12px 173px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @white;
|
||||
&-inner {
|
||||
width: 44px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 216px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.set {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 0px 12px 226px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @white;
|
||||
&-inner {
|
||||
width: 21px;
|
||||
height: 16px;
|
||||
margin: 24px 0px 24px 260px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
width: 63px;
|
||||
height: 12px;
|
||||
margin: 10px 0 12px 325px;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 0.86;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
float: left;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
.button-details {
|
||||
width: 93px;
|
||||
float: right;
|
||||
padding: 14px 0px 13px 0px;
|
||||
margin: 8px 8px 8px 8px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
|
||||
cursor: pointer;
|
||||
&-label {
|
||||
width: 62px;
|
||||
height: 21px;
|
||||
object-fit: contain;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.ok-button {
|
||||
width: 55px;
|
||||
height: 25px;
|
||||
margin: 20px 263px 19px 336px;
|
||||
padding: 3px 16px;
|
||||
border-radius: 2px;
|
||||
background-color: @booger;
|
||||
&-label {
|
||||
width: 23px;
|
||||
height: 19px;
|
||||
text-shadow: 0 0 4px @black-50;
|
||||
margin: 3px 16px 3px 16px;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.broken-button {
|
||||
width: 87px;
|
||||
height: 25px;
|
||||
margin: 20px 247px 19px 320px;
|
||||
padding: 3px 16px;
|
||||
border-radius: 2px;
|
||||
background-color: @scarlet;
|
||||
&-label {
|
||||
width: 55px;
|
||||
height: 19px;
|
||||
margin: 3px 16px 3px 16px;
|
||||
text-shadow: 0 0 4px @black-50;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.error-button {
|
||||
width: 96px;
|
||||
height: 25px;
|
||||
margin: 20px 243px 19px 315px;
|
||||
padding: 3px 16px;
|
||||
border-radius: 2px;
|
||||
background-color: @scarlet;
|
||||
&-label {
|
||||
width: 64px;
|
||||
height: 19px;
|
||||
margin: 3px 16px 3px 16px;
|
||||
text-shadow: 0 0 4px @black-50;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-button {
|
||||
width: 96px;
|
||||
height: 25px;
|
||||
margin: 20px 243px 19px 315px;
|
||||
padding: 3px 16px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: @macaroni-and-cheese;
|
||||
&-label {
|
||||
width: 79px;
|
||||
height: 19px;
|
||||
margin: 3px 0px 3px 0px;
|
||||
text-shadow: 0 0 4px @black-50;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
color: @very-light-pink;
|
||||
}
|
||||
}
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class RiscaldiTable extends Vue {
|
||||
rowData = [];
|
||||
typeStatusButton: string;
|
||||
|
||||
mounted() {
|
||||
this.rowData = [
|
||||
{
|
||||
cellId: "1",
|
||||
current: "0.06 A",
|
||||
set: "8%",
|
||||
status: "broken"
|
||||
},
|
||||
{
|
||||
cellId: "1",
|
||||
current: "0.06 A",
|
||||
set: "8%",
|
||||
status: "ok"
|
||||
},
|
||||
{
|
||||
cellId: "1",
|
||||
current: "0.06 A",
|
||||
set: "8%",
|
||||
status: "error 23"
|
||||
},
|
||||
{
|
||||
cellId: "1",
|
||||
current: "0.06 A",
|
||||
set: "8%",
|
||||
status: "error 12"
|
||||
},
|
||||
{
|
||||
cellId: "1",
|
||||
current: "0.06 A",
|
||||
set: "8%",
|
||||
status: "warning 3"
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<table class="riscaldi-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="cell-id">Cell ID</th>
|
||||
<th class="current">Current</th>
|
||||
<th class="set">Set</th>
|
||||
<th class="status">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, i) of rowData" :key="i" class="tr-inner">
|
||||
<td>
|
||||
<span class="cell-id-inner">
|
||||
{{ item.cellId }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="current-inner">
|
||||
{{ item.current }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="set-inner">
|
||||
{{ item.set }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="status-inner">
|
||||
<span v-if="item.status === 'ok'" class="ok-button status-ok">
|
||||
<span class="ok-button-label">OK</span>
|
||||
</span>
|
||||
<span v-else-if="item.status === 'broken'" class="broken-button">
|
||||
<span class="broken-button-label">Broken</span>
|
||||
</span>
|
||||
<span v-else-if="item.status === 'error 23'" class="error-button">
|
||||
<span class="error-button-label">Error 23</span>
|
||||
</span>
|
||||
<span v-else-if="item.status === 'error 12'" class="error-button">
|
||||
<span class="error-button-label">Error 12</span>
|
||||
</span>
|
||||
<span
|
||||
v-else-if="item.status === 'warning 3'"
|
||||
class="warning-button"
|
||||
>
|
||||
<span class="warning-button-label">Warning 3</span>
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="button-details" @click="goToDetails()">
|
||||
<span class="button-details-label">Details</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "riscaldi-table.less";
|
||||
</style>
|
||||
<script lang="ts" src="./riscaldi-table.ts"></script>
|
||||
@@ -0,0 +1,6 @@
|
||||
.header-container {
|
||||
width: 1920px;
|
||||
height: 193px;
|
||||
// background-color: #657178;
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class MyHeader extends Vue {}
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div class="header-container"></div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "my-header.less";
|
||||
</style>
|
||||
<script src="./my-header.ts" lang="ts"></script>
|
||||
@@ -0,0 +1,27 @@
|
||||
@import "../variable.less";
|
||||
|
||||
.rettangle {
|
||||
width: calc(~"100% - 72px");
|
||||
height: 72px;
|
||||
|
||||
background-color: @fill-under-grey-4-2;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding: 0 36px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #bbbcbc;
|
||||
|
||||
&.white {
|
||||
color: @white;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.BG-fascia-sx {
|
||||
width: 496px;
|
||||
height: 886px;
|
||||
background-color: @fill-under-grey-1-2;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
|
||||
@Component({})
|
||||
export default class MenuSx extends Vue {
|
||||
|
||||
@Prop()
|
||||
value: string;
|
||||
|
||||
// get currentRoute() {
|
||||
// return this.value;
|
||||
// }
|
||||
// set currentRoute( v:string ) {
|
||||
// this.$emit("input", v);
|
||||
// }
|
||||
|
||||
go(v: string) {
|
||||
this.$emit("input", v);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="BG-fascia-sx">
|
||||
<div
|
||||
class="rettangle"
|
||||
@click="go('io')"
|
||||
:class="{white: this.value == 'io'}"
|
||||
>{{'i-o' | localize("I/O")}}</div>
|
||||
<!-- <div
|
||||
class="rettangle"
|
||||
@click="go('log-ciclo-automatico')"
|
||||
:class="{white: this.value == 'log-ciclo-automatico'}"
|
||||
>{{'log-ciclo-automatico' | localize("Log ciclo automatico")}}</div>
|
||||
<div
|
||||
class="rettangle"
|
||||
@click="go('log-misurazioni')"
|
||||
:class="{white: this.value == 'log-misurazioni'}"
|
||||
>{{'log-misurazioni' | localize("Log misurazioni")}}</div>
|
||||
<div
|
||||
class="rettangle"
|
||||
@click="go('assi')"
|
||||
:class="{white: this.value == 'assi'}"
|
||||
>{{'log-assi' | localize('Log assi')}}</div>
|
||||
<div
|
||||
class="rettangle"
|
||||
@click="go('riscaldi')"
|
||||
:class="{white: this.value == 'riscaldi'}"
|
||||
>{{'riscaldi' | localize("Riscaldi")}}</div>-->
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import "menu-sx.less";
|
||||
</style>
|
||||
<script src="./menu-sx.ts" lang="ts"></script>
|
||||
@@ -0,0 +1,33 @@
|
||||
import Io from "./InputOutput/components/io/io.vue";
|
||||
import LogCicloAutomatico from "./LogCicloAutomatico/components/log-ciclo-automatico/log-ciclo-automatico.vue";
|
||||
import LogMisurazioni from "./LogMisurazioni/components/log-misurazioni/log-misurazioni.vue";
|
||||
import Assi from "./Assi/components/assi/assi.vue";
|
||||
import Riscaldi from "./Riscaldi/components/riscaldi/riscaldi.vue";
|
||||
|
||||
export const routes = [
|
||||
{
|
||||
name: 'io',
|
||||
path: "/io",
|
||||
component: Io
|
||||
},
|
||||
{
|
||||
name: 'log-ciclo-automatico',
|
||||
path: "/log-ciclo-automatico",
|
||||
component: LogCicloAutomatico
|
||||
},
|
||||
{
|
||||
name: 'log-misurazioni',
|
||||
path: "/log-misurazioni",
|
||||
component: LogMisurazioni
|
||||
},
|
||||
{
|
||||
name: 'assi',
|
||||
path: "/assi",
|
||||
component: Assi
|
||||
},
|
||||
{
|
||||
name: 'riscaldi',
|
||||
path: "/riscaldi",
|
||||
component: Riscaldi
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,133 @@
|
||||
@import url(./variable.less);
|
||||
|
||||
// MODULES MAIN STYLE
|
||||
.main-container {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 193px 1fr;
|
||||
grid-template-columns: 495px 1fr;
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
thead {
|
||||
width: 674px;
|
||||
height: 34px;
|
||||
padding: 10px 0 0;
|
||||
|
||||
background-color: @fill-under-grey-1-2;
|
||||
border-bottom: 2px solid @light-grey-blue;
|
||||
box-sizing: border-box;
|
||||
|
||||
tr {
|
||||
th {
|
||||
background-color: @fill-under-grey-1-2;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 34px;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
min-width: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tbody {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
margin: 0;
|
||||
|
||||
td {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
color: #e8e8e8;
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: @fill-under-grey-3-2;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background-color: @fill-under-grey-1-2;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
margin: 20px 0px;
|
||||
background-color: #5a656b;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
width: 16px;
|
||||
background: #3e464a;
|
||||
border: 4px solid #5a656b;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
height: 600px;
|
||||
|
||||
tr.group-row {
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
background: transparent !important;
|
||||
td {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
height: auto;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
td.pointer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button.pointer {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
// padding: 6px;
|
||||
object-fit: contain;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
background-image: linear-gradient(to bottom, #818a8f 0%, #42494e 98%);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.column-menu {
|
||||
grid-row: 2;
|
||||
border-top: @white 2px solid;
|
||||
}
|
||||
|
||||
.column-page {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
width: 1424px;
|
||||
height: 885px;
|
||||
border-top: @white 2px solid;
|
||||
background-color: @fill-under-grey-2-2;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import Component from "vue-class-component";
|
||||
import Vue from "vue";
|
||||
import menuSx from "./menu-sx/menu-sx.vue";
|
||||
import io from "./InputOutput/components/io/io.vue";
|
||||
import logCicloAutomatico from "./LogCicloAutomatico/components/log-ciclo-automatico/log-ciclo-automatico.vue";
|
||||
import logMisurazioni from "./LogMisurazioni/components/log-misurazioni/log-misurazioni.vue";
|
||||
import assi from "./Assi/components/assi/assi.vue";
|
||||
import riscaldi from "./Riscaldi/components/riscaldi/riscaldi.vue";
|
||||
|
||||
@Component({
|
||||
components: { menuSx, io, logCicloAutomatico, logMisurazioni, assi, riscaldi }
|
||||
})
|
||||
export default class Sottocofano extends Vue {
|
||||
|
||||
panel: string = 'io';
|
||||
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="column-menu sub-main-container">
|
||||
<menu-sx v-model="panel"></menu-sx>
|
||||
</div>
|
||||
<io v-if="panel == 'io'" />
|
||||
<log-ciclo-automatico v-if="panel == 'log-ciclo-automatico'" />
|
||||
<log-misurazioni v-if="panel == 'log-misurazioni'" />
|
||||
<assi v-if="panel == 'assi'" />
|
||||
<riscaldi v-if="panel == 'riscaldi'" />
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
@import url(./sotto-cofano.less);
|
||||
</style>
|
||||
<script lang="ts" src="./sotto-cofano.ts"></script>
|
||||
@@ -0,0 +1,31 @@
|
||||
// Colors
|
||||
@white: #ffffff;
|
||||
|
||||
@fill-under-grey-1-2: #4e585e;
|
||||
|
||||
@fill-under-grey-2-2: #657178;
|
||||
|
||||
@fill-under-grey-4-2: #808e96;
|
||||
|
||||
@light-grey-blue: #bbbcbc;
|
||||
|
||||
@fill-under-grey-3-2: #747f85;
|
||||
|
||||
@very-light-pink: #e8e8e8;
|
||||
|
||||
@very-light-pink-two: #dddddd;
|
||||
|
||||
@greyish-brown: #545454;
|
||||
|
||||
@clear-blue: #1791ff;
|
||||
|
||||
@black-50: rgba(0, 0, 0, 0.5);
|
||||
|
||||
@very-light-pink-two: #dddddd;
|
||||
|
||||
@booger: #90c03d;
|
||||
|
||||
@scarlet: #d0021b;
|
||||
|
||||
@macaroni-and-cheese: #e7ba2d;
|
||||
|
||||
@@ -29,12 +29,12 @@ export default class AppFooter extends Vue {
|
||||
}
|
||||
|
||||
toggleMainView() {
|
||||
// appModelActions.MainViewToggle(this.$store);
|
||||
appModelActions.MainViewToggle(this.$store);
|
||||
}
|
||||
|
||||
OpenMainView(direction: any) {
|
||||
// if (direction && direction == "up" && !this.$store.isMainViewLiftedUp)
|
||||
// appModelActions.MainViewLiftUp(this.$store);
|
||||
if (direction && direction == "up" && !this.$store.isMainViewLiftedUp)
|
||||
appModelActions.MainViewLiftUp(this.$store);
|
||||
}
|
||||
|
||||
openProgram(path: string) {
|
||||
|
||||
@@ -95,6 +95,16 @@
|
||||
</div>
|
||||
|
||||
<div class="machine-area">
|
||||
<button
|
||||
@mouseup="toggleMainView()"
|
||||
style="min-width:45px"
|
||||
class="under"
|
||||
:class="{'pressed':state.isMainViewLiftedUp}"
|
||||
:title="'footer_tooltip_under_hood' | localize('Open/Close Under-the-hood area')"
|
||||
>
|
||||
<i class="fa fa-gear"></i>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="under"
|
||||
:disabled="state.machineStatus.cycleProd.mode==1"
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { CONFIGURATION } from "@/config";
|
||||
import { store } from "@/store";
|
||||
import { underTheHoodActions } from "@/store/underTheHood.store";
|
||||
import { baseRestService } from "@/_base/baseRestService";
|
||||
|
||||
export class UnderTheHoodService extends baseRestService {
|
||||
BASE_URL = async () => (await CONFIGURATION).api.apiServerUrl;
|
||||
async getChannels() {
|
||||
let result = await this.Get<server.channels>((await this.BASE_URL()) + "/api/underthehood/channels_io");
|
||||
underTheHoodActions.SetIOChannels(store, result);
|
||||
return result;
|
||||
}
|
||||
|
||||
async getChannelsConfig() {
|
||||
let result = await this.Get<{ [id: string]: number[] }>((await this.BASE_URL()) + "/api/configuration/configIO");
|
||||
underTheHoodActions.SetIOChannelsConfig(store, result);
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
export const underTheHoodService = new UnderTheHoodService();
|
||||
@@ -21,6 +21,7 @@ import { usersStore, UsersStoreModel } from "./users.store";
|
||||
import { warmersStore, WarmersStoreModel } from "./warmers.store";
|
||||
import { modulesStore, ModulesStoreModel } from "./modules.store";
|
||||
import { cmsConnectStore, CmsConnectStoreModel } from "./cmsConnect.store";
|
||||
import { underTheHoodStore, UnderTheHoodStoreModel } from "./underTheHood.store";
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
@@ -51,6 +52,7 @@ export interface AppModel {
|
||||
warmers: WarmersStoreModel;
|
||||
modules: ModulesStoreModel;
|
||||
cmsConnect: CmsConnectStoreModel;
|
||||
underTheHood: UnderTheHoodStoreModel;
|
||||
}
|
||||
|
||||
// Mutations Name
|
||||
@@ -76,7 +78,7 @@ const _store = {
|
||||
|
||||
state: {
|
||||
currentUser: null,
|
||||
isMainViewLiftedUp: false,
|
||||
isMainViewLiftedUp: true,
|
||||
isFavSoftkeySelection: false,
|
||||
isShowDashboard: false,
|
||||
isShowPreDashboard: false
|
||||
@@ -100,7 +102,8 @@ const _store = {
|
||||
users: usersStore,
|
||||
warmers: warmersStore,
|
||||
cmsConnect: cmsConnectStore,
|
||||
modules: modulesStore
|
||||
modules: modulesStore,
|
||||
underTheHood: underTheHoodStore
|
||||
},
|
||||
|
||||
mutations: {
|
||||
|
||||
@@ -10,6 +10,7 @@ import { jobEditorStoreActions } from "./jobEditor.store";
|
||||
import { UsersStoreModel, UsersActions } from "./users.store";
|
||||
import { WarmersStoreModel, warmersActions } from "./warmers.store";
|
||||
import { ModulesStoreModel, modulesActions } from "./modules.store";
|
||||
import { UnderTheHoodStoreModel, underTheHoodActions } from "./underTheHood.store";
|
||||
|
||||
export {
|
||||
store,
|
||||
@@ -32,6 +33,6 @@ export {
|
||||
jobEditorStoreActions,
|
||||
UsersActions,
|
||||
UsersStoreModel,
|
||||
CmsConnectActions,
|
||||
CmsConnectActions,
|
||||
WarmersStoreModel, warmersActions
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import Vue from "vue";
|
||||
import { CONFIGURATION } from "@/config";
|
||||
|
||||
export interface UnderTheHoodStoreModel {
|
||||
ioChannels: server.channels;
|
||||
ioChannelsConfig: { [id: string]: number[] }
|
||||
}
|
||||
|
||||
|
||||
export interface UnderTheHoodActions {
|
||||
SetIOChannels(context, model: server.channels)
|
||||
SetIOChannelsConfig(context, model: { [id: string]: number[] })
|
||||
}
|
||||
|
||||
export interface UnderTheHoodGetters {
|
||||
}
|
||||
|
||||
export const underTheHoodStore = {
|
||||
|
||||
state: {
|
||||
ioChannels: {},
|
||||
ioChannelsConfig: {},
|
||||
} as UnderTheHoodStoreModel,
|
||||
|
||||
getters: {
|
||||
},
|
||||
|
||||
mutations: {
|
||||
|
||||
SetIOChannels(state: UnderTheHoodStoreModel, model: server.channels) {
|
||||
state.ioChannels = model;
|
||||
},
|
||||
SetIOChannelsConfig(state: UnderTheHoodStoreModel, model: { [id: string]: number[] }) {
|
||||
state.ioChannelsConfig = model;
|
||||
},
|
||||
},
|
||||
|
||||
actions: {
|
||||
|
||||
async SetIOChannels(context, model: server.channels) {
|
||||
context.commit("SetIOChannels", model);
|
||||
},
|
||||
async SetIOChannelsConfig(context, model: { [id: string]: number[] }) {
|
||||
context.commit("SetIOChannelsConfig", model);
|
||||
},
|
||||
} as UnderTheHoodActions
|
||||
|
||||
}
|
||||
|
||||
export const underTheHoodActions = underTheHoodStore.actions as UnderTheHoodActions;
|
||||
@@ -36,7 +36,7 @@ module.exports = {
|
||||
contentBase: __dirname,
|
||||
historyApiFallback: true,
|
||||
port: 8900,
|
||||
host: "0.0.0.0"
|
||||
host: "0.0.0.0",
|
||||
// hot: true,
|
||||
},
|
||||
entry: ['./src/main.ts'],
|
||||
@@ -101,8 +101,12 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
use: ['style-loader', 'css-loader' ],
|
||||
},
|
||||
{
|
||||
test: /\.less$/i,
|
||||
use: [ 'vue-style-loader', 'css-loader', 'less-loader'],
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user