selezione di processo sx

Step/wwwroot/assets/styles/base/colors.less

@@ -15,6 +15,7 @@
 @color-whitetwo: #f8f8f8;
 @color-white3: #dfdfdf;
 @color-silver: #bbbcbc;
+@color-battleship-grey: #657178;
 
 @color-nice-blue: #1756ad;
 @color-slate-gray:#5c656b;

Step/wwwroot/assets/styles/base/nc.less

@@ -1,14 +1,22 @@
 // out: false, sourceMap: false, main: ../style.less
 @import "colors.less";
 
+.hmi-container{
+  position: absolute;
+  left:0;
+  border-radius: 2px;
+  width: 1088px;
+  background-color: #4e585e;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
+  height: 784px;
+}
+
 #nc-hmi{
   position: absolute;
+  top:0;
   left: 48px;
   height: 784px;
   width: 1040px;
-  border-radius: 2px;
-  background-color: #4e585e;
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
 }
 
 #nc-hmi-img{

Step/wwwroot/assets/styles/base/process-info.less

@@ -93,3 +93,34 @@
 }
 
 
+.process-selection{
+  position: absolute;
+  width: 48px;
+  height:790px;
+  background-color: @color-battleship-grey;
+  .process{
+    font-size: 48px;
+    font-weight: 600;
+    color:#fff;
+    height: 148px;
+    box-sizing: border-box;
+    border-bottom: 4px solid #fff;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-flow: column;
+
+    cursor: pointer;
+    small{
+      font-size: 18px;
+      font-weight: normal;
+    }
+
+    &.selected{
+      cursor: default;
+      background-color: #4e585e;
+    }
+  }
+
+}

Step/wwwroot/assets/styles/style.css

@@ -1080,6 +1080,33 @@ footer .container button.big:before {
 .process-info .status.READY {
   color: #1791ff;
 }
+.process-selection {
+  position: absolute;
+  width: 48px;
+  height: 790px;
+  background-color: #657178;
+}
+.process-selection .process {
+  font-size: 48px;
+  font-weight: 600;
+  color: #fff;
+  height: 148px;
+  box-sizing: border-box;
+  border-bottom: 4px solid #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: column;
+  cursor: pointer;
+}
+.process-selection .process small {
+  font-size: 18px;
+  font-weight: normal;
+}
+.process-selection .process.selected {
+  cursor: default;
+  background-color: #4e585e;
+}
 #alarm-list,
 #service-list {
   position: absolute;
@@ -1388,14 +1415,21 @@ footer .container button.big:before {
   color: #d0021b;
   font-weight: bold;
 }
+.hmi-container {
+  position: absolute;
+  left: 0;
+  border-radius: 2px;
+  width: 1088px;
+  background-color: #4e585e;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
+  height: 784px;
+}
 #nc-hmi {
   position: absolute;
+  top: 0;
   left: 48px;
   height: 784px;
   width: 1040px;
-  border-radius: 2px;
-  background-color: #4e585e;
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
 }
 #nc-hmi-img {
   position: absolute;

Step/wwwroot/src/components/under-the-hood.vue

@@ -4,6 +4,8 @@
       <span>Siemens HMI</span>
       <button class="close" @click="toggleMainView()">&times;</button>
     </header>
+    <div class="hmi-container">
+      <process-selection></process-selection>
       <div id="nc-hmi">
 
         <img id="nc-hmi-img" src="assets/images/Siemens_Placeholder.jpg" v-if="isSiemens">
@@ -12,6 +14,7 @@
         <img id="nc-hmi-img" src="assets/images/Demo_Placeholder.jpg" v-if="isDemo">
 
       </div >
+      </div>
       <div class="keys-area">
         <nc-soft-keys></nc-soft-keys>
         <mheads></mheads>
@@ -26,13 +29,15 @@ import plcSoftKeys from "src/modules/plc-softkeys.vue";
 import ncSoftKeys from "src/modules/nc-softkeys.vue";
 import mheads from "src/modules/mheads.vue";
 import jogMenu from "src/modules/under-the-hood/jog-menu.vue";
+import { processSelection } from "src/modules/under-the-hood";
 
 export default {
   components: {
     plcSoftKeys,
     ncSoftKeys,
     mheads,
-    jogMenu
+    jogMenu,
+    processSelection
   },
   computed: {
     isMainViewLiftedUp: function() {

Step/wwwroot/src/modules/under-the-hood/index.js

@@ -3,5 +3,6 @@ import onOffSoftKey from "./soft-key2.vue";
 import procedureSoftKey from "./soft-key3.vue";
 // import mhead from "./mhead.vue";
 // import jogMenu from "./jog-menu.vue";
+import processSelection from "./process-selection.vue";
 
-export { groupSoftKey, onOffSoftKey, procedureSoftKey }
+export { groupSoftKey, onOffSoftKey, procedureSoftKey, processSelection }

Step/wwwroot/src/modules/under-the-hood/process-selection.vue

@@ -0,0 +1,29 @@
+<template>
+<div class="process-selection">
+  <div class="process selected">
+    <span>1</span>
+  </div>
+    <div class="process ">
+    <span>2</span>
+  </div>
+    <div class="process ">
+    <span>3</span>
+    <small>AUX</small>
+  </div>
+    <div class="process ">
+    <span>4</span>
+    <small>AUX</small>
+  </div>
+    <div class="process ">
+    <span>5</span>
+    <small>AUX</small>
+  </div>
+</div>
+
+</template>
+<script>
+export default {
+
+}
+</script>
+