Gozintograph: Unterschied zwischen den Versionen

Aus FLBK-Wiki
Zur Navigation springen Zur Suche springen
← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
VisuellWikitext
Zeile 23: Zeile 23:
Im folgenden Beispiel werden fünf Bauteile \( B_1, B_2, B_3, B_4, B_5 \) aus vier Einzelteilen \( E_1, E_2, E_3, E_4 \) gefertigt.   
Im folgenden Beispiel werden fünf Bauteile \( B_1, B_2, B_3, B_4, B_5 \) aus vier Einzelteilen \( E_1, E_2, E_3, E_4 \) gefertigt.   
Die Pfeile zeigen, welche Einzelteile in welches Bauteil eingehen. Die Zahlen an den Pfeilen geben die Stückzahl an.
Die Pfeile zeigen, welche Einzelteile in welches Bauteil eingehen. Die Zahlen an den Pfeilen geben die Stückzahl an.
<!-- VARIANTE B – KORRIGIERT -->
<!-- VARIANTE B – FINAL OPTIMIERT -->
<html>
<html>
<style>
<style>
   .gozinto-wrap {
   .gozinto-wrap {
     width:95vw;
     width:95vw;
     height:55vw;
     height:50vw;
     max-width:1100px;
     max-width:1100px;
     max-height:500px;
     max-height:480px;
     border:0;
     border:0;
     margin:0;
     margin:0;
Zeile 51: Zeile 51:
   }
   }


   .node-text {
  /* Einheitliche Schriftgröße */
     font-family: sans-serif;
   .node-text, .count-text {
     font-family:sans-serif;
     font-size:14px;
     font-size:14px;
     fill:#000;
     fill:#000;
Zeile 70: Zeile 71:
     stroke:#000;
     stroke:#000;
     stroke-width:1.5;
     stroke-width:1.5;
  }
  .count-text {
    font-family:sans-serif;
    font-size:11px;
    text-anchor:middle;
    dominant-baseline:middle;
    pointer-events:none;
   }
   }
</style>
</style>


<div class="gozinto-wrap">
<div class="gozinto-wrap">
<svg id="gozinto_svg" viewBox="0 0 1400 600" preserveAspectRatio="xMinYMin meet">
<svg id="gozinto_svg" viewBox="0 0 1400 520" preserveAspectRatio="xMinYMin meet">
</svg>
</svg>
</div>
</div>
Zeile 89: Zeile 82:
(function(){
(function(){
   const svg = document.getElementById("gozinto_svg");
   const svg = document.getElementById("gozinto_svg");
  // leicht reduzierte Abstände
   const scale = 100;
   const scale = 100;
   const yOffset = 20;
   const yOffset = 5;          // früher 20 → Grafik rückt nach oben
  const xOffsetGlobal = 80;   // gesamte Grafik leicht nach rechts (zentrieren)


   function svgEl(name, attrs){
   function svgEl(name, attrs){
Zeile 98: Zeile 94:
   }
   }


  // ---- SVG-Koordinaten aus Mausposition ----
   function getSVGcoords(evt){
   function getSVGcoords(evt){
     const pt = svg.createSVGPoint();
     const pt = svg.createSVGPoint();
Zeile 106: Zeile 101:
   }
   }


   // ---- NODE (rechteck) ----
   // ----------- NODE -----------
   function createNode(id, cx, cy, w, h, label){
   function createNode(id, cx, cy, w, h, label){
    cx += xOffsetGlobal/scale;  // gesamte Grafik nach rechts versetzt
     const g = svgEl("g", {"data-id":id});
     const g = svgEl("g", {"data-id":id});
     const rect = svgEl("rect", {
     const rect = svgEl("rect", {
       class:"node-rect",
       class:"node-rect",
       x:(cx-w/2)*scale, y:(cy-h/2)*scale + yOffset,
       x:(cx-w/2)*scale, y:(cy-h/2)*scale + yOffset,
       width:w*scale, height:h*scale,
       width:w*scale, height:h*scale, rx:6, ry:6
      rx:6, ry:6
     });
     });
     const text = svgEl("text", {
     const text = svgEl("text", {
       class:"node-text",
       class:"node-text",
       x:cx*scale, y:cy*scale+yOffset,
       x:cx*scale, y:cy*scale+yOffset,
       "text-anchor":"middle", "dominant-baseline":"middle"
       "text-anchor":"middle",
      "dominant-baseline":"middle"
     });
     });
     text.textContent = label;
     text.textContent = label;
Zeile 126: Zeile 124:
     svg.appendChild(g);
     svg.appendChild(g);


     let node = {id,cx,cy,w,h,rect,text,g};
     const node = {id,cx,cy,w,h,rect,text,g};


     // ---- Dragging ----
     // Draggen
     let dragging=false, start={};
     let dragging=false, start={};


Zeile 162: Zeile 160:
   }
   }


   // --- Geometrie Hilfsfunktionen ---
   // ------- Geometrie -------
   function intersectRectBorder(node, tx, ty){
   function intersectRectBorder(node, tx, ty){
     const cx=node.cx, cy=node.cy, w2=node.w/2, h2=node.h/2;
     const cx=node.cx, cy=node.cy, w2=node.w/2, h2=node.h/2;
Zeile 169: Zeile 167:


     if(Math.abs(dx)>1e-9){
     if(Math.abs(dx)>1e-9){
       let t1=(-w2)/dx;
       let t1=(-w2)/dx; let y1=cy+t1*dy;
      let y1=cy+t1*dy;
       if(t1>0 && y1>=cy-h2 && y1<=cy+h2) pts.push({x:cx-w2,y:y1,t:t1});
       if(t1>0 && y1>=cy-h2 && y1<=cy+h2) pts.push({x:cx-w2,y:y1,t:t1});
       let t2=(w2)/dx;
       let t2=(w2)/dx; let y2=cy+t2*dy;
      let y2=cy+t2*dy;
       if(t2>0 && y2>=cy-h2 && y2<=cy+h2) pts.push({x:cx+w2,y:y2,t:t2});
       if(t2>0 && y2>=cy-h2 && y2<=cy+h2) pts.push({x:cx+w2,y:y2,t:t2});
     }
     }
     if(Math.abs(dy)>1e-9){
     if(Math.abs(dy)>1e-9){
       let t3=(-h2)/dy;
       let t3=(-h2)/dy; let x3=cx+t3*dx;
      let x3=cx+t3*dx;
       if(t3>0 && x3>=cx-w2 && x3<=cx+w2) pts.push({x:x3,y:cy-h2,t:t3});
       if(t3>0 && x3>=cx-w2 && x3<=cx+w2) pts.push({x:x3,y:cy-h2,t:t3});
       let t4=(h2)/dy;
       let t4=(h2)/dy; let x4=cx+t4*dx;
      let x4=cx+t4*dx;
       if(t4>0 && x4>=cx-w2 && x4<=cx+w2) pts.push({x:x4,y:cy+h2,t:t4});
       if(t4>0 && x4>=cx-w2 && x4<=cx+w2) pts.push({x:x4,y:cy+h2,t:t4});
     }
     }
     pts.sort((a,b)=>a.t-b.t);
     pts.sort((a,b)=>a.t-b.t);
     return pts[0] || {x:cx,y:cy};
     return pts[0] || {x:cx,y:cy};
Zeile 214: Zeile 207:


     text.textContent=amount;
     text.textContent=amount;
     g.appendChild(lineA);
     g.appendChild(lineA);
     g.appendChild(lineB);
     g.appendChild(lineB);
Zeile 220: Zeile 212:
     g.appendChild(text);
     g.appendChild(text);
     g.appendChild(arrow);
     g.appendChild(arrow);
     svg.appendChild(g);
     svg.appendChild(g);


Zeile 240: Zeile 231:


     const px=p=>[p.x*scale, p.y*scale+yOffset];
     const px=p=>[p.x*scale, p.y*scale+yOffset];
 
     const F=px(pF), Ci=px(pCircleIn), Co=px(pCircleOut), T=px(pT);
     const F = px(pF);
    const Ci = px(pCircleIn);
    const Co = px(pCircleOut);
    const T = px(pT);


     e.lineA.setAttribute("d",`M ${F[0]} ${F[1]} L ${Ci[0]} ${Ci[1]}`);
     e.lineA.setAttribute("d",`M ${F[0]} ${F[1]} L ${Ci[0]} ${Ci[1]}`);
Zeile 257: Zeile 244:


     let ux=T[0]-Co[0], uy=T[1]-Co[1];
     let ux=T[0]-Co[0], uy=T[1]-Co[1];
     let L=Math.sqrt(ux*ux+uy*uy);
     let L=Math.sqrt(ux*ux+uy*uy); if(L<1e-6) L=1;
    if(L<1e-6) L=1;
     ux/=L; uy/=L;
     ux/=L; uy/=L;


Zeile 266: Zeile 252:
   function updateAllEdges(){ edges.forEach(updateEdge); }
   function updateAllEdges(){ edges.forEach(updateEdge); }


   // ---- NODES ----
   // ------------ Nodes ------------
   const nodes={};
   const nodes={};


Zeile 282: Zeile 268:
   nodes.B5=createNode("B5",10,3.3,1.0,0.5,"B5");
   nodes.B5=createNode("B5",10,3.3,1.0,0.5,"B5");


   // ---- EDGES ----
   // ------------ Verbindungen ------------
   makeConnection(nodes.E1,nodes.B1,"2",2.2,-0.2);
   makeConnection(nodes.E1,nodes.B1,"2",2.2,-0.2);
   makeConnection(nodes.E2,nodes.B1,"1",2.2, 0.2);
   makeConnection(nodes.E2,nodes.B1,"1",2.2, 0.2);

Version vom 14. November 2025, 11:22 Uhr

Ein Gozintograph (von engl. *goes into* = „geht hinein“) ist ein gerichteter Graph, der die Zerlegung eines Endprodukts in seine Einzelteile oder Komponenten beschreibt. Jede Kante stellt dabei eine „Gozinto“-Beziehung dar: Sie zeigt von einer Komponente (Teil) auf das Produkt, in das sie eingeht. Der Gozintograph ist ein zentrales Hilfsmittel in der Produktionsplanung und Stücklistenverwaltung.

Definition

Ein Gozintograph ist ein gerichteter, azyklischer Graph \( G = (V, E) \), wobei:

  • \( V \) die Menge der Knoten darstellt (Produkte oder Teile),
  • \( E \subseteq V \times V \) die gerichteten Kanten darstellt, welche „geht-in“-Beziehungen symbolisieren.

Eine Kante \( (v_i, v_j, a_{ij}) \) mit der Beschriftung \( a_{ij} \) zeigt an, dass zur Herstellung eines Teils \( v_j \) genau \( a_{ij} \) Einheiten von Teil \( v_i \) benötigt werden.

Zusammenhang zu Matrizen

Die Informationen eines Gozintographen lassen sich in einer sogenannten Gozintomatrix darstellen. Diese ist eine Matrix \( A = (a_{ij}) \), bei der das Element \( a_{ij} \) die Anzahl der Einheiten von Komponente \( i \) angibt, die für die Herstellung von Produkt \( j \) benötigt wird. In der Produktionsplanung kann die benötigte Gesamtmenge aller Einzelteile über die Gleichung

\[ \mathbf{x} = (I - A)^{-1} \mathbf{y} \]

bestimmt werden, wobei \( \mathbf{y} \) den Vektor der Endprodukte und \( \mathbf{x} \) den Vektor der benötigten Teilemengen beschreibt.

Beispiele

Produktion eines Produkts aus Einzelteilen

Im folgenden Beispiel werden fünf Bauteile \( B_1, B_2, B_3, B_4, B_5 \) aus vier Einzelteilen \( E_1, E_2, E_3, E_4 \) gefertigt. Die Pfeile zeigen, welche Einzelteile in welches Bauteil eingehen. Die Zahlen an den Pfeilen geben die Stückzahl an.

Beispiel 2: Rezeptstruktur eines Gerichts

Rezeptstruktur eines Gerichts

Im nächsten Beispiel wird der Gozintograph genutzt, um die Zutatenstruktur eines Rezepts zu zeigen. Das Endprodukt „Pizza“ besteht aus mehreren Zwischenprodukten („Teig“, „Soße“) und Basiszutaten. Auch hier zeigen Pfeile mit Zahlen, welche Mengen von Zutaten in die jeweiligen Komponenten eingehen.

Abgerufen von „https://wiki.flbk-hamm.de/index.php?title=Gozintograph&oldid=2314“