production scada

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

@@ -1722,21 +1722,27 @@
     box-shadow: 0 1px 2px 0 @color-black-40;
     background-color: @color-background-white;
     flex-flow: row;
-    .group-text-scada{
+    // .group-text-scada{
+    //     display: flex;
+    //     width: 153px;
+    //     height: 40px;
+    //     margin-left: 16px;
+    //     flex-flow: column;
+    //     .text{
+    //         font-size: 14px;
+    //         color: @color-darkish-blue;
+    //     }
+    //     .number{
+    //         font-size: 20px;
+    //         font-weight: 600;
+    //         color: @color-darkish-blue;
+    //     }
+    // }
+    .card-scada-prod-body{
+        width: 100%;
+        height: 100%;
         display: flex;
-        width: 153px;
-        height: 40px;
-        margin-left: 16px;
-        flex-flow: column;
-        .text{
-            font-size: 14px;
-            color: @color-darkish-blue;
-        }
-        .number{
-            font-size: 20px;
-            font-weight: 600;
-            color: @color-darkish-blue;
-        }
+        flex-flow: row;
     }
 }
 

Step/wwwroot/assets/styles/style.css

@@ -7862,21 +7862,11 @@ footer .container button.big:before {
   background-color: #fff;
   flex-flow: row;
 }
-.card-scada-production .group-text-scada {
+.card-scada-production .card-scada-prod-body {
+  width: 100%;
+  height: 100%;
   display: flex;
-  width: 153px;
-  height: 40px;
-  margin-left: 16px;
-  flex-flow: column;
-}
-.card-scada-production .group-text-scada .text {
-  font-size: 14px;
-  color: #002680;
-}
-.card-scada-production .group-text-scada .number {
-  font-size: 20px;
-  font-weight: 600;
-  color: #002680;
+  flex-flow: row;
 }
 .card-report {
   width: 288px;

Step/wwwroot/src/app_modules/production/components/card-scada-production.ts

@@ -1,5 +1,7 @@
 import Vue from "vue";
 import Component from "vue-class-component";
+import { store, AppModel } from "src/store";
+import { scadaService } from "src/services/scadaService";
 
 @Component({
   components: {
@@ -7,5 +9,39 @@ import Component from "vue-class-component";
   }
 })
 export default class CardScadaProduction extends Vue {
-    
+  get scadaId() {
+    let currentIdScada;
+    let scada = (this.$store.state as AppModel).scada.scadaItems.filter(s => s.isInProductionPage == true);
+    if(scada.length > 0){
+      currentIdScada = scada[0].id;
+    }
+    else{
+      currentIdScada = null;
+    }
+    return currentIdScada;
+  }
+
+  get items(): scada.baseControl[] {
+    return (this.$store.getters.getScadaItems(this.scadaId))
+  }
+
+  get buttons() {
+    return this.items.filter(i => i.type == "buttonControl");
+  }
+
+  get inputs() {
+    return this.items.filter(i => i.type == "inputControl");
+  }
+
+  get images() {
+    return this.items.filter(i => i.type == "imageControl");
+  }
+
+  get progressBars(){
+    return this.items.filter(i => i.type == "progressControl");
+  }
+
+  mounted() {
+    scadaService.ListScada();
+  }
 }

Step/wwwroot/src/app_modules/production/components/card-scada-production.vue

@@ -1,7 +1,53 @@
 <template>
   <!-- <div class="test-container"> -->
       <div class="card-scada-production">
-        <div class="group-text-scada">
+        <div class="card-scada-prod-body">
+            <button
+            class="btn"
+            v-for="(item, idx) in buttons"
+            :key="'btn_' + idx"
+            :style="{ top: `${item.position.y}px`,
+                        left: `${item.position.x}px`,
+                        width: `${item.size.x}px`,
+                        height: `${item.size.y}px`,
+                        textAlign: item.label.textAlign,
+                        backgroundColor: item.label.backgroundColor,
+                        color: item.label.textColor,
+                        fontSize: `${item.label.textSize}px`
+                    }"
+            >{{item.label.textContent}}</button>
+
+            <input type="number" class="form-control"
+            v-for="(item, idx) in inputs"
+            :key="'inp_' + idx"
+            :style="{ top: `${item.position.y}px`,
+                        left: `${item.position.x}px`,
+                        width: `${item.size.x}px`,
+                        height: `${item.size.y}px`,
+                        textAlign: item.label.textAlign,
+                        backgroundColor: item.label.backgroundColor,
+                        color: item.label.textColor,
+                        fontSize: `${item.label.textSize}px`
+                    }">
+
+            <img
+            v-for="(item, idx) in images"
+            :key="'img_' + idx"
+            :style="{ top: `${item.position.y}px`,
+                        left: `${item.position.x}px`,
+                        width: `${item.size.x}px`,
+                        height: `${item.size.y}px`
+                    }">
+            <progress v-for="(item, idx) in progressBars"
+            :key="'pro_' + idx"
+            :style="{ top: `${item.position.y}px`,
+                        left: `${item.position.x}px`,
+                        width: `${item.size.x}px`,
+                        height: `${item.size.y}px`,
+                    }"
+            :value="item.memValueIndex" max="1000"></progress>
+        </div>
+        <!-- <div class="group-text-scada">
             <div class="text">
                 {{'card_scada_production_text_countdown_title' | localize("Count Down (min)")}}
             </div>
@@ -9,7 +55,10 @@
                 4399
             </div>
         </div>
-        <div class="image-big">
+        <div class="card-scada-prod-body">
+
+        </div> -->
+        <!-- <div class="image-big">
             <img :src="imgSource" alt="">
         </div>
         <div class="image-button-1">
@@ -17,7 +66,7 @@
         </div>
         <div class="image-button-2">
             <img :src="imgSource" alt="">
-        </div>
+        </div> -->
       </div>
   <!-- </div> -->
 </template>

Step/wwwroot/src/services/scadaService.ts

@@ -5,7 +5,6 @@ import { store } from "../store";
 export class ScadaService extends baseRestService {
 
   async ListScada(): Promise<scada.ScadaInterface[]> {
-    debugger
     let result = await this.Get<scada.ScadaInterface[]>('/api/scada/list');
 
     scadaActions.setScada(store, result);