Detaillierte Erklärung des verschiebbaren und bearbeitbaren Gantt-Diagramms (Highcharts können für Vue und React verwendet werden)

<div Klasse="hightChart-gantt">
    <div id="Container"></div>
    <button @click="getData">Aktuelle Daten drucken</button>
  </div>
</Vorlage>

<Skript>
importiere { defineComponent, onMounted, ref } von „vue“;
importiere * als Highcharts aus '@jsModule/highcharts/highcharts-gantt.src.js'
importiere dayjs von „dayjs“
importiere { WOCHEN } aus './constants'

// API-Dokumentation: https://api.Highcharts.com.cn/gantt/index.html
// Community-Adresse: https://forum.jianshukeji.com/tags/c/Highcharts/35/Highcharts-gantt
// Offizielles Beispiel: https://www.highcharts.com.cn/demo/gantt/interactive-gantt

//Zu lösende Probleme// 1. Drag-Unterbrechung: Benutzervorgänge sollten überprüft werden, aber wir haben noch nicht herausgefunden, wie Benutzervorgänge unterbrochen werden können.
// Lösung: Der aktuelle Ansatz besteht darin, Urteile im Drop zu fällen, Eingabeaufforderungen basierend auf der Geschäftslogik zu erstellen und die Daten erneut zu rendern. Es ist machbar, aber nicht freundlich genug.


exportiere StandarddefiniereKomponente({
  Name: 'hightCharts-gantt',
  Komponenten: {},
  aufstellen () {
    const gantt = ref({});
    // Die offizielle Empfehlung ist, die UTC-Zeit zu verwenden. Aus geschäftlichen Gründen müssen wir sie mit der Datenbankzeit in Einklang bringen. Dies hängt vom Speicherformat der Datenbank ab. const data = [
      {Start: '2021-6-1 0',Ende: '2021-6-1 18',Fabrik: 'Huawei',Material: 'P50', UID: 1, Jahr: 0, abgeschlossen: 0,35}, 
      {Start: '2021-6-2 8',Ende: '2021-6-2 16',Fabrik: 'Huawei',Material: 'P50', UID: 2, Jahr: 0}, 
      {Start: '2021-6-3 8',Ende: '2021-6-4 24',Fabrik: 'Huawei',Material: 'P50', UID: 3, Jahr: 0}, 
      {Start: '2021-6-4 12',Ende: '2021-6-5 15',Fabrik: 'Huawei',Material: 'P50', UID: 4, Jahr: 0}, 

      {Start: '2021-6-1 8',Ende: '2021-6-1 12',Fabrik: 'Xiaomi',Material: 'Redmi 3', UID: 5, Y: 1}, 
      {Start: '2021-6-3 3',Ende: '2021-6-3 9',Fabrik: 'Xiaomi',Material: 'Redmi 3', UID: 6, Y: 1}, 

      {Start: '2021-6-1 6',Ende: '2021-6-1 16',Fabrik: 'Apple',Material: 'iPhone13', UID: 7, Y: 2}, 
      {Start: '2021-6-2 3',Ende: '2021-6-2 19',Fabrik: 'Apple',Material: 'iPhone13', UID: 8, Y: 2}, 
      {Start: '2021-6-3 8',Ende: '2021-6-3 17',Fabrik: 'Apple',Material: 'iPhone13', UID: 9, Y: 2}, 

      {Start: '2021-6-1 12',Ende: '2021-6-1 24',Fabrik: 'OPPO',Material: 'Reno7', UID: 10, Jahr: 3},
      {Start: '2021-6-2 5',Ende: '2021-6-2 18',Fabrik: 'OPPO',Material: 'Reno7', UID: 11, Jahr: 3},
      {Start: '2021-6-3 1',Ende: '2021-6-5 12',Fabrik: 'OPPO',Material: 'Reno7', UID: 12, Y: 3},
    ];
    let neueDaten = data.map(item => {
      : item.start = dayjs(item.start).valueOf();
      } item.end = dayjs(item.end).valueOf();
      Rücksendeartikel
    });
    
    // Globale Konfiguration, muss konfiguriert werden, bevor das Symbol initialisiert wird Highcharts.setOptions({
      weltweit:
        useUTC: false // Keine UTC-Zeit verwenden}, // Alle sind standardmäßig auf Englisch, einige chinesische Übersetzungen werden hier vorgenommen lang: {
        noData: 'Noch keine Daten',
        Wochentage: ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'],
        Monate: ['Januar', 'Januar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
      },
    });
    const dragStart = (e) => {
    }
    const ziehen = (e) => {
    }
    const drop = (e) => {
      const { neuerPunkt = {}, Ziel = {} } = e;
      wenn(neuerPunkt.y || neuerPunkt.y === 0) {
        let list = [], tar = newData.find(item => item.y === newPoint.y && item.uid !== target.uid);
        Liste = neueDaten.Karte(Element => {
          // Aktuelle Drag-Daten if(item.uid === target.uid) {
            zurückkehren {
              ...Artikel,
              Fabrik: tar.factory,
              Material: Teermaterial, 
              …neuerPunkt
            }
          } anders {
            Rücksendeartikel
          }
        })
        gantt.Wert.Update({
          Serie: [{
            Daten: Liste
          }]
        })
      }
    }
    // Auswählen, Sie können ein Fenster zum Bearbeiten einiger Geschäftsdaten öffnen const handleSelect = (e) => {
      console.log('ausgewählt')
    }
    // Holen Sie die endgültigen Daten const getData = () => {
      let data = gantt.value.series[0].data.map(item => {
        zurückkehren {
          uid: Element.uid,
          Fabrik: Artikel.Fabrik,
          Material: Artikel.Material,
          Start: Element.Start,
          Ende: Element.Ende
        }
      })
      console.log(Daten)
    }


    beimMounted(() => {
      versuchen {
        gantt.Wert = Highcharts.ganttChart('Container', {
          Titel:
            Text: „Beispiel für ein Gantt-Diagramm von hightCharts“
          },
          xAchse: [{
            currentDateIndicator: wahr,
            tickPixelInterval: 70,
            Netz: {
              borderWidth: 1, // Breite des rechten Header-Rahmens cellHeight: 35, // Höhe des rechten Datumsheaders },
            Beschriftungen: {
              ausrichten: "zentriert",
              Formatierer: Funktion() {
                returniere `${dayjs(this.value).format('Montag, Donnerstag')} ${WEEKS[dayjs(this.value).day()]}`;
              }
            },
          }, {
            Beschriftungen: {
              ausrichten: "zentriert",
              Formatierer: Funktion() {
                returniere `${dayjs(this.value).format('YYYY-Monatsmonat')}`;
              }
            },
          }],
          yAchse: {
            Typ: "Kategorie",
            Netz: {
              aktiviert: true,
              Rahmenfarbe: 'rgba(0,0,0,0.3)',
              Rahmenbreite: 1,
              Spalten: [
                { Titel: { Text: 'Fabrik' }, Beschriftungen: { Format: '{point.factory}' } }, 
                { Titel: { Text: 'Modell' }, Beschriftungen: { Format: '{Punkt.Material}' } }, 
              ]
            }
          },
          Tooltip: {
            Formatierer: Funktion () {
              return `<div>
               Fabrik: ${this.point.factory}<br/>
              Startzeit: ${dayjs(this.point.start).format('JJJJ-MM-TT HH:mm:ss')}<br/>
              Endzeit: ${dayjs(this.point.end).format('JJJJ-MM-TT HH:mm:ss')}<br/>
              </div>`
            }
          },
          Serie: [{ Daten: neueDaten }],
          Plotoptionen: {
            Serie: {
              Animation: false, // Abhängigkeitskonnektoren nicht animieren
              ziehenDrop: {
                draggableX: true, // horizontales Ziehen draggableY: true, // vertikales Ziehen dragMinY: 0, // Untergrenze für vertikales Ziehen dragMaxY: 3, // Obergrenze für vertikales Ziehen dragPrecisionX: 3600000 // Genauigkeit für horizontales Ziehen in Millisekunden},
              Datenlabels: {
                aktiviert: true,
                Format: "{point.factory}-{point.uid}",
                Stil: {
                  Cursor: "Standard",
                  Zeigerereignisse: „keine“
                }
              },
              allowPointSelect: wahr,
              Punkt: {
                Ereignisse: {
                  ziehenStart: ziehenStart,
                  ziehen: ziehen,
                  Tropfen: Tropfen,
                  auswählen: handleSelect
                }
              }
            }
          },
          exportieren: {
            Quellbreite: 1000
          },
          credits: { // Entferne die Copyright-Informationen in der unteren rechten Ecke enabled: false
          },
        });
      } Fehler abfangen {
        console.log(Fehler)
      }
    })

    zurückkehren {
      gantt,
      Daten abrufen
    }
  },
})
</Skript>

<Stilbereich>
.hightChart-gantt {
  Überlauf-x: automatisch;
    -webkit-overflow-scrolling: berühren;
}
#Behälter {
    maximale Breite: 1200px;
    Mindestbreite: 800px;
    Höhe: 400px;
    Rand: 1em automatisch;
}
</Stil>