Как разработать приложение для отслеживания полетов с диаграммой Ганта React

Наш компонент Syncfusion React Gantt Chart — это специализированный инструмент для работы с диаграммами, который поддерживает настройку различных элементов диаграммы Ганта, таких как временные шкалы, панели задач, заголовки столбцов, ячейки, метки и всплывающие подсказки.

В этой статье мы увидим, как настроить эти элементы диаграммы Ганта для разработки приложения для отслеживания полетов. Как мы все знаем, рейсы планируются в разных аэропортах в разное время. В этом приложении мы собираемся отображать все запланированные бои и статус их отслеживания в реальном времени в разных аэропортах.

Вы также можете подробно проверить статус каждого рейса, развернув каждый аэропорт, как показано на следующем снимке экрана.

Настройка элементов диаграммы Ганта

Мы собираемся настроить следующие элементы диаграммы Ганта для разработки нашего приложения для отслеживания полетов:

Панель задач

Панель задач можно использовать для отображения различных статусов, таких как автоматический или ручной, незапланированный или запланированный (родительский, дочерний, веха). Вы можете настроить его с помощью клиентского события taskbarTemplate или queryTaskbarInfo.

См. следующий пример кода.

// Based on the current time, validated the flights into three categories:
// 1. Completed journey – Denoted by green
// 2. In journey        - Denoted by light green
// 3. Not yet started   - Denoted by gray
taskbarTemplate(props) {
var startTime = props.ganttProperties.startDate.getTime();
var endTime = props.ganttProperties.endDate.getTime();
var currentTime = new Date('02/13/2021 15:25:00').getTime();
if (endTime < currentTime) {
return (
<div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style={{ height: "100%", borderRadius: "5px", backgroundColor: "#006400" }}>
{<div>
<span className="e-task-label" style={{ position: "absolute", zIndex: 1, top: "15px", fontFamily: "Segoe UI", fontSize: "12px", color: 'white', textOverflow: "ellipsis", overflow: "hidden" }}>
<b>{props.Name}</b></span>
</div>}
</div>);
} else if (startTime < currentTime) {
return (
<div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style={{ height: "100%", borderRadius: "5px", backgroundColor: "#90EE90" }}>
{<div>
<span className="e-task-label" style={{ position: "absolute", zIndex: 1, top: "15px", fontFamily: "Segoe UI", fontSize: "12px", color: 'white', textOverflow: "ellipsis", overflow: "hidden" }}>
<b>{props.Name}</b></span>
</div>}
</div>);
} else {
return (
<div className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" style={{ height: "100%", borderRadius: "5px", backgroundColor: "#C0C0C0" }}>
{<div>
<span className="e-task-label" style={{ position: "absolute", zIndex: 1, top: "15px", fontFamily: "Segoe UI", fontSize: "12px", color: 'white', textOverflow: "ellipsis", overflow: "hidden" }}>
<b>{props.Name}</b></span>
</div>}
</div>);
}
};

Ячейки сетки

Вы можете настроить ячейки сетки, используя клиентское событие querycellinfo. Аргумент этого события будет иметь значения данных, столбца и элемента ячейки. Это событие будет запускаться перед рендерингом каждой ячейки. Настройте элементы ячейки каждой ячейки в этом событии.

// Based on the current time, validated the flights into three categories:
// 1. Completed journey   - Denoted by green
// 2. In journey          - Denoted by light green
// 3. Not yet started     - Denoted by gray
queryCell(props) {
if (!props.data.hasChildRecords && props.column.field == 'Name') {
var startTime = props.data.ganttProperties.startDate.getTime();
var endTime = props.data.ganttProperties.endDate.getTime();
var currentTime = new Date('02/13/2021 15:25:00').getTime();
if (endTime < currentTime) {
props.cell.style.backgroundColor = '#006400';
} else if (startTime < currentTime) {
props.cell.style.backgroundColor = '#90EE90';
} else {
props.cell.style.backgroundColor = '#C0C0C0';
}
}
}

Столбец заголовка

Столбец заголовка можно настроить с помощью свойства шаблон заголовка. Вы также можете визуализировать элементы HTML внутри шаблона, чтобы настроить заголовок столбца.

См. следующий код.

<ColumnsDirective>
{/**Column header template*/}
<ColumnDirective field="Model" headerText='Flight' headerTemplate={() => {
return (<div style={{ marginLeft: "20px" }}><img src="./image/airplane.png" width="20" height="20" className="e-image" /></div>);
}} ></ColumnDirective>
</ColumnsDirective>

Подсказка

Подсказку панели задач диаграммы Ганта также можно настроить с помощью свойства шаблон. Получите данные Ганта внутри шаблона для отображения во всплывающей подсказке.

См. следующий код.

// Template code for taskbar tooltip.
tooltipTemplate(props) {
var data = props.taskData;
return (
<table>
<tr><img src="./image/airplane.png" ></img></tr>
<tr><td>Flight</td><td>{data.Name}</td></tr>
<tr><td>From</td><td>{data.From}</td></tr>
<tr><td>To</td><td>{data.To}</td></tr>
<tr><td>Dep</td><td>{data.Dep.getHours()} : {data.Dep.getMinutes()}</td></tr>
<tr><td>Arr</td><td>{data.Arr.getHours()} : {data.Arr.getMinutes()}</td></tr>
<tr><td>Model</td><td>{data.Model}</td></tr>
</table>
);
}

Пример GitHub

Для получения дополнительной информации см. Приложение для отслеживания полетов с использованием демоверсии React Gantt Chart.

Вывод

В этой статье мы объяснили, как настроить наш компонент Syncfusion React Gantt Chart для разработки приложения для отслеживания полетов. Попробуйте идеи, данные в этом сообщении в блоге, и оставьте свой отзыв в разделе комментариев ниже. Обратитесь к этому примеру браузера и этим страницам документации, чтобы узнать больше о возможностях нашей диаграммы Ганта.

Наша диаграмма Ганта также доступна на наших платформах Blazor, ASP.NET (MVC и Web Forms), JavaScript, Angular, Vue, WPF и UWP. Используйте их для создания удивительных веб-приложений!

Вы можете связаться с нами через наш форум поддержки, систему поддержки Direct-Trac или портал обратной связи. Мы всегда рады Вам помочь!

Если вам понравилась эта запись в блоге, мы думаем, вам также понравятся следующие статьи:

Первоначально опубликовано на https://www.syncfusion.com 5 мая 2021 г.