Auparavant, j'ai utilisé React + AntDesign pour implémenter un tableau de synchronisation simple, mais plus tard, j'ai eu des exigences plus complexes et j'ai nécessité l'affichage de 2 000 tâches en même temps, ce qui impliquait des problèmes de performance. Une démo qui répond essentiellement aux besoins suivants, mais le mécanisme de rendu de React a causé des problèmes de performance majeurs. très coincé. Après y avoir réfléchi, j'ai décidé d'utiliser la bande originale de la bande originale JS + CSS + HTML pour l'implémenter, car les performances sous la bande originale de Soundtrack JS sont les meilleures. Parlons des exigences de la nouvelle version:
La tâche est affichée dans une structure d'arbre à gauche, pliable
Le côté droit montre la durée de la tâche pour exécuter
Besoin d'utiliser des lignes pour lier la relation entre les tâches
Vous pouvez zoomer sur le droit pour afficher l'état de la tâche détaillée
Lors du zoom, les graphiques restent dans une certaine proportion des deux extrémités avec la souris comme centre.
Lors de la mise à l'échelle du graphique, cela signifie que le temps pris pour la tâche et les coordonnées doivent changer en conséquence en conséquence en fonction de la proportion d'élargissement de l'image.
Lorsque la souris se déplace sur le tableau de synchronisation, une ligne semble provoquer l'heure et les informations actuelles.
Difficultés de mise en œuvre
Zoom de souris, Zoom de l'axe X
Le zoom de souris génère la mise à l'échelle de l'axe X du tableau de synchronisation. La mise à l'échelle des cartes de synchronisation fournit trois idées ici:
Faire l'interception des données, intercepter les données avant et après selon un certain algorithme, puis rendez-vous à la page entière
Utilisez Scalex de CSS3 pour mettre à l'échelle le DOM du tableau de distribution
Le changement réel de la largeur du diagramme de synchronisation Dom, la longueur de la tâche exécutée, la longueur des lignes de connexion et le temps prévu requis pour la tâche exécutée sont tous affichés en pourcentages.
Avantages et inconvénients de trois idées:
Avantages: il n'est pas nécessaire d'exploiter les attributs CSS du DOM, et il est plus pratique de le renvoyer entre eux. Inconvénients: Pour l'utilisation de DOM Redaw, il consomme de graves performances et est très lent lors du rendu avec un grand nombre de tâches.
Avantages: changez simplement le CSS du DOM, chargez rapidement et traitez davantage. Inconvénients: l'informatique est gênante.
Avantages: Chargement rapide et très fluide. Inconvénients: il y aura certaines erreurs lors de l'utilisation de calculs en pourcentage, et vous les verrez lorsque vous zoomerez dans une certaine mesure. (Toute la question est considérée, j'utilise le troisième type)
// Fonction qui calcule le pourcentage de largeur // Fin: heure de fin de la tâche // Démarrage: heure de début de la tâche // maxtime: valeur maximale de toutes les tâches // mintime: valeur minimale de toutes les tâches heure de début // heure: Tous les temps de début de l'ordre de la tâche et l'heure de fin // tâche_width: longueur de tâche, longueur de la ligne de connexion horizontale, valeur gauche de la ligne de connexion verticale const widthfun = function (fin, starttime, maxtime, mintime) {const task_width = (((((((((((((((((maxtime, mintill Numéro (Fintime) - Numéro (starttime)) / ((maxtime || time [Time.length - 1]) - (mintime || time [0])) * (body_width - arbre_box_dom.offsetwidth)) / dom.offset width ) * 100; return task_width> 100?Zoom de souris, gardez la souris comme centre, zoomez des deux côtés
Passons d'abord le diagramme du processus d'inférence:
// Explication de l'élément Figure // Dom = Dom ci-dessus du tableau de synchronisation // Doml1, domel2 = dom.scrollleft; // domel1 représente le dom.scrollleft précédent; // domel2 représente le dom.scrollleft actuel; // échelle représente le courant L'échelle de l'agrandissement // Scale1 représente le grossissement de la dernière fois // arbre_dom.offsetwidth représente la largeur de l'arbre à gauche // Clientx1 représente la distance entre le côté gauche de la position de la souris de la dernière fois = E.Clientx - Tree_dom.offsetWidth // ClientX2 représente la distance entre la position actuelle de la souris et le diagramme de synchronisation // Échelle avec la souris comme centre, la formule est: DOML2 = DOMEL1 (SCALE / SCALE1) + Clientx1 (Scale / Scale1) - E.Clientx + Tree_dom.OffsetWidth // Formule Explication: // 1. Scale / Scale1 représente le rapport de mise à l'échelle de ce temps, à l'exception du rapport de mise à l'échelle de la précédente, indiquant le rapport de mise à l'échelle actuel // La largeur de la largeur de la large Le volume gauche évoluera également pendant la deuxième mise à l'échelle, de sorte que la largeur à gauche doit être multipliée par l'échelle de mise à l'échelle // La largeur sur le côté gauche de la distance de position de la souris par rapport au graphique de synchronisation sera également mise à l'échelle lors du zoom, de sorte que vous devrait également se multiplier par l'échelle de mise à l'échelle // La distance réelle sur le côté gauche de la distance de position de la souris par rapport au tableau de synchronisation à la fin est égale à la mise à l'échelle de la longueur du défilement gauche // Code de page Time_box_parent.scrollleft = (Time_box_parent. Scrollleft + E.Clientx - Tree_box_dom.offsetWidth) * (Scale_X / Scale_X1) - E.Clien TX + Tree_Box_dom.offsetWidth;
Utilisez des connexions pour représenter les relations entre les tâches
plan:
Lorsqu'il est utilisé, CSS3 + JS + HTML5 est dessiné avec des pseudo-éléments.
Enveloppez les images d'angle droit avec DOM et définissez leur position et leur hauteur.
Dessiner avec des étiquettes
Pour et contre:
Avantages: aucune étiquette supplémentaire n'est ajoutée, ce qui est bénéfique pour le rendu. Inconvénients: la tâche parent génère plusieurs tâches enfants, et il est difficile d'ajouter des pseudo-classes et de définir la hauteur et la largeur des pseudo-classes.
Avantages: pratique, calculez simplement la hauteur de la tâche de l'enfant à partir de la tâche parent. Inconvénients: quand il y a trop de tâches, il y aura beaucoup de photos, ce qui affectera grandement les performances.
Avantages: La hauteur et la position de chaque élément sont contrôlées individuellement, avec une contrôlabilité élevée et une couleur de rétroaction peuvent être ajoutées. Inconvénients: Ajout de plus d'éléments, qui ont un impact sur le rendu (j'utilise le troisième type, qui est une méthode stupide. Un grand gars avec une meilleure méthode peut fournir des suggestions, merci)
Idées de mise en œuvre:
Utilisez une variable pour enregistrer la profondeur de hiérarchie de chaque tâche. Utilisez les variables accumulées pour obtenir la hauteur de la ligne verticale et la valeur supérieure de la ligne horizontale dans une certaine proportion. (Utilisez la fonction de pourcentage de largeur ci-dessus)
Unité d'heure: jour, heure, minute, deuxième
C'est une idée de mise en œuvre relativement simple:
Étant donné que l'échelle du temps 4 de cette démo est une échelle, déterminez si la différence entre le horodatage minimum et le horodatage maximum est divisé par 4, s'il y a encore un jour (60 * 60 * 24, converti en secondes), descendant Commandez du grand à petit obtenir l'unité d'heure.