placeholder

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

@@ -1,4 +1,5 @@
 // out: false, sourceMap: false, main: ../style.less
+
 .head-spindle,
 .head-awj {
     &>*, & {
@@ -156,6 +157,17 @@
   }
 }
 
+.head-place-holder{
+  width: 240px;
+  height: 102px;
+  margin: 4px;
+  margin-bottom: 6px;
+  margin-top: 6px;
+  background-color: #4e585e;
+  border-radius: 2px;
+}
+
+
 .head-std {
     &>* {
         box-sizing: border-box;

Step/wwwroot/assets/styles/style.css

@@ -2027,6 +2027,15 @@ footer .container button.big:before {
   border-color: #fff !important;
   color: #fff;
 }
+.head-place-holder {
+  width: 240px;
+  height: 102px;
+  margin: 4px;
+  margin-bottom: 6px;
+  margin-top: 6px;
+  background-color: #4e585e;
+  border-radius: 2px;
+}
 .head-std {
   width: 240px;
   height: 102px;

Step/wwwroot/src/modules/mheads.vue

@@ -15,7 +15,10 @@
             :pressure="getHeadsProperty(h.id).ActualPressure"
             @overridePlus="overridePlus()" @overrideMinus="overrideMinus()"
             ></head-std>
-   <div class="head-place-holder"></div>
+   <div class="head-place-holder" v-if="heads.length <4"></div>
+   <div class="head-place-holder" v-if="heads.length <3"></div>
+   <div class="head-place-holder" v-if="heads.length <2"></div>
+   <div class="head-place-holder" v-if="heads.length <1 || (heads.length>4 && heads.length%2)"></div>
   <!-- <head-std :percentage="40" :load="55" :tool=1 :rpm=160000 title="head2"  process="1"></head-std>
   <head-std :percentage="100" :load="65" :tool=2 title="head3"  process="1"></head-std>
   <head-std title="head4" :load="100" process="1"></head-std>
@@ -33,9 +36,6 @@ export default {
   computed: {
     heads: function() {
       return this.$store.state.machineInfo.heads;
-    },
-    placeholdersCount: function() {
-      return Math.max(4 - this.$store.state.machineInfo.heads, 0);
     }
   },
   methods: {