ZhivkoPetkov

titan html

Jun 24th, 2019
476
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.68 KB | None | 0 0
  1. <html>
  2.   <head>
  3.     <title>TITAN Manual assembly line</title>
  4.   </head>
  5.   <body>
  6.       <div class="backgroundImage"  *ngIf="line!==undefined && line !==null">
  7.     <table class="firstTable">
  8.       <tr><td style="font-size: 180%; font-weight: bold; float:left" *ngIf="line.name =='Line1'">TITAN 1</td></tr>
  9.       <tr><td style="font-size: 180%; font-weight: bold; float:left" *ngIf="line.name =='Line2'">TITAN 2</td></tr>
  10.       <tr><td style="font-size: 180%; font-weight: bold; float:left" *ngIf="line.name =='Line3'">TITAN 3</td></tr>
  11.       <tr><td class="underline-text-abb">Branch 1</td></tr>
  12.       <tr style="text-align: center">
  13.  
  14.       <table style="width: 100%; height: 100%;">
  15.         <tr>
  16.         <td  class="infoTable">
  17.         <tr *ngFor="let machine of line.machines; let i = index;" style="text-align: center" >
  18.         <td *ngIf="machine.name == 'TI1' || machine.name == 'TI2' || machine.name == 'TI3'" style="font-size: 250%">
  19.              {{machine.actual}}
  20.         </td>
  21.         <tr style="color: black; font-weight: bold">Actual</tr>
  22.         </td>
  23.        
  24.         <td  class="infoTable">
  25.         <tr *ngFor="let machine of line.machines; let i = index;" >
  26.         <td *ngIf="machine.name == 'TI1' || machine.name == 'TI2' || machine.name == 'TI3'" style="font-size: 250%">
  27.               {{machine.performance  | number : '1.0-0'}}%
  28.         </td>
  29.         <tr style="color: black; font-weight: bold">Perfm.</tr>
  30.         </td>
  31.  
  32.         <td  class="infoTable">
  33.         <tr *ngFor="let machine of line.machines; let i = index;"  >
  34.         <td *ngIf="machine.name == 'TI1' || machine.name == 'TI2' || machine.name == 'TI3'" style="font-size: 250%">
  35.               {{machine.target}}
  36.         </td>
  37.         <tr style="color: black; font-weight: bold">Target</tr>
  38.         </td>
  39.           </tr>
  40.       </table>
  41.      
  42.     </tr>
  43.       <tr><td class="underline-text-abb" style="margin-top: 10%">Branch 2</td></tr>
  44.       <table style="width: 100%; height: 100%;">
  45.         <tr>
  46.           <td  class="infoTable">
  47.             <tr *ngFor="let machine of line.machines; let i = index;" style="text-align: center" >
  48.             <td *ngIf="machine.name == 'TI1' || machine.name == 'TI2' || machine.name == 'TI3'" style="font-size: 250%">
  49.              {{SumBranchActuals(line.operators, 'Branch 2')}}
  50.             </td>
  51.           <tr style="color: black; font-weight: bold">Actual</tr>
  52.         </td>
  53.        
  54.         <td  class="infoTable">
  55.           <tr *ngFor="let machine of line.machines; let i = index;" >
  56.           <td *ngIf="machine.name == 'TI1' || machine.name == 'TI2' || machine.name == 'TI3'" style="font-size: 250%">
  57.               {{SumBranchActuals(line.operators, 'Branch 2') * 100 / SumBranchTargets(line.operators, 'Branch 2')  | number : '1.0-0'}}%
  58.             </td>
  59.             <tr style="color: black; font-weight: bold">Perfm.</tr>
  60.         </td>
  61.  
  62.         <td  class="infoTable">
  63.           <tr *ngFor="let machine of line.machines; let i = index;"  >
  64.           <td *ngIf="machine.name == 'TI1' || machine.name == 'TI2' || machine.name == 'TI3'" style="font-size: 250%">
  65.               {{SumBranchTargets(line.operators, 'Branch 2')}}
  66.             </td>
  67.             <tr style="color: black; font-weight: bold">Target</tr>
  68.         </td>
  69.         </tr>
  70.       </table>
  71.       <tr><td class="underline-text-abb" style="margin-top: 10%">Branch 3</td></tr>
  72.       <tr>
  73.           <table style="width: 100%; height: 100%;">
  74.               <tr>
  75.                 <td  class="infoTable">
  76.                   <tr *ngFor="let machine of line.machines; let i = index;" style="text-align: center" >
  77.                   <td *ngIf="machine.name == 'TI1' || machine.name == 'TI2' || machine.name == 'TI3'" style="font-size: 250%">
  78.                       {{SumBranchActuals(line.operators, 'Branch 3')}}
  79.                   </td>
  80.                 <tr style="color: black; font-weight: bold">Actual</tr>
  81.               </td>
  82.              
  83.               <td  class="infoTable">
  84.                 <tr *ngFor="let machine of line.machines; let i = index;" >
  85.                 <td *ngIf="machine.name == 'TI1' || machine.name == 'TI2' || machine.name == 'TI3'" style="font-size: 250%">
  86.                     {{SumBranchActuals(line.operators, 'Branch 3') * 100/  SumBranchTargets(line.operators, 'Branch 3') | number : '1.0-0'}}%
  87.                   </td>
  88.                   <tr style="color: black; font-weight: bold">Perfm.</tr>
  89.               </td>
  90.      
  91.               <td  class="infoTable">
  92.                 <tr *ngFor="let machine of line.machines; let i = index;"  >
  93.                 <td *ngIf="machine.name == 'TI1' || machine.name == 'TI2' || machine.name == 'TI3'" style="font-size: 250%">
  94.                     {{SumBranchTargets(line.operators, 'Branch 3')}}
  95.                   </td>
  96.                   <tr style="color: black; font-weight: bold">Target</tr>
  97.               </td>
  98.               </tr>
  99.           </table>
  100.         <td>
  101.       </td></tr>
  102.     </table>
  103.  
  104.     <table class="secondTable" style="margin-top: 2%; justify-content: center">
  105.       <tr style="font-weight:bold">
  106.         <td>Station</td>
  107.         <td>Actual</td>
  108.         <td>Target</td>
  109.         <td>Performance</td>
  110.         <!-- <td>Graph</td>
  111.        <td>Run</td> -->
  112.       </tr>
  113.       <tr *ngFor="let operator of line.operators" [ngStyle]="{'background': operator.actual > 50 && operator.performance < 65 ? 'red' : ''}" >
  114.          <td *ngIf="operator.branch=='Branch 1'">{{operator.name}}</td>
  115.          <td *ngIf="operator.branch=='Branch 1'">{{operator.actual}}</td>
  116.          <td *ngIf="operator.branch=='Branch 1'">{{operator.target}}</td>
  117.          <td *ngIf="operator.branch=='Branch 1'">{{operator.performance | number : '1.0-0'}}%</td>
  118.      </tr>
  119.  
  120.  
  121.      <tr style="font-weight:bold">
  122.          <td>Station</td>
  123.          <td>Actual</td>
  124.          <td>Target</td>
  125.          <td>Performance</td>
  126.        </tr>
  127.       <tr *ngFor="let operator of line.operators" [ngStyle]="{'background': operator.actual > 50 && operator.performance < 65 ? 'red' : ''}" >
  128.        <ng-container *ngIf="operator.branch=='Branch 2'">
  129.          <td>{{operator.name}}</td>
  130.          <td>{{operator.actual}}</td>
  131.          <td>{{operator.target}}</td>
  132.          <td>{{operator.performance | number : '1.0-0'}}%</td>
  133.        </ng-container>
  134.        
  135.      </tr>
  136.        
  137.      <tr style="font-weight:bold">
  138.        <td>Station</td>
  139.        <td>Actual</td>
  140.        <td>Target</td>
  141.        <td>Performance</td>
  142.      </tr>
  143.          <tr *ngFor="let operator of line.operators" [ngStyle]="{'background': operator.actual > 50 && operator.performance < 65 ? 'red' : ''}" >
  144.            <ng-container *ngIf="operator.branch=='Branch 3'">
  145.              <td>{{operator.name}}</td>
  146.              <td>{{operator.actual}}</td>
  147.              <td>{{operator.target}}</td>
  148.              <td>{{operator.performance | number : '1.0-0'}}%</td>
  149.            </ng-container>
  150.      </table>
  151.  
  152.  
  153. <table class="thirdTable">
  154. <tr>
  155.  <div style="padding:0px; background:white; color:black; font-size: 200%">{{time | date : 'shortDate'}} {{time | date : 'H:mm'}} </div>
  156. </tr>
  157.  
  158. <!--
  159.  
  160. <tr style="background: white;font: 200%">
  161.    <td style="float:right">
  162.        <tr>
  163.            555 pcs
  164.        </tr>
  165.        <tr>
  166.           P 100%
  167.        </tr>
  168.  
  169.       <table>
  170.          <tr style="color:red; font: 95%">
  171.              <td>B1</td><td>B2</td><td>B3</td>
  172.          </tr>
  173.          <tr>
  174.                <td>80</td>
  175.                <td style="margin-right: 30%">85</td>
  176.                <td>90</td>
  177.          </tr>
  178.       </table>
  179.    </td>
  180.  
  181.    <td style="background: gray">
  182.    ASM1
  183.    </td>
  184.  </tr> -->
  185.  
  186.  
  187.    
  188. </table>
  189. </div>
  190. </body>
  191.       <router-outlet></router-outlet>
  192. </html>
Advertisement
Add Comment
Please, Sign In to add comment