亚洲精品aⅴ一区二区三区四区,国精产品999国精产品官网,亚洲一区91

用DHTMLX建立一套高交互的前端DashBord UI

原創(chuàng)|使用教程|編輯：何躍|2021-12-07 16:40:27.883|閱讀 395 次

概述：在前后端分離的情況下，很多企業(yè)的各類業(yè)務(wù)系統(tǒng)開始從只關(guān)注業(yè)務(wù)升級(jí)到同時(shí)關(guān)心交互與效率的層面，那么一套可以滿足一線人員操作又能滿足管理人員根據(jù)圖表做決策的系統(tǒng)的開發(fā)需求就來(lái)了，DHTMLX可以一試！

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

DHTMLX Suite包括20多個(gè)UI部件，有助于開發(fā)全功能的網(wǎng)絡(luò)應(yīng)用程序。其中包含了一線辦事人員會(huì)用到的美觀的下拉框、輸入框、表格、按鈕，也包含了管理人員需要的各類圖表，例如餅圖、折線圖等。具體舉例，作為售票大廳工作的你甚至可以創(chuàng)建一個(gè)全面的儀表盤來(lái)可視化和監(jiān)控票務(wù)系統(tǒng)的性能。

本篇將為身為技術(shù)的你還原這類系統(tǒng)是如何打造的，。

在這個(gè)JavaScript儀表盤教程中，我們將描述如何在Suite UI部件和Optimus微框架的幫助下建立和配置一個(gè)互動(dòng)儀表盤。

案例預(yù)覽

DHTMLX的UI儀表盤允許用戶創(chuàng)建一個(gè)新的票據(jù)，將其分配給不同的公司部門，并監(jiān)控其表現(xiàn)。這個(gè)演示是用以下DHTMLX工具創(chuàng)建的：

Grid 顯示收到的通知清單。
Charts 追蹤年度銷售情況的圖表，估計(jì)銷售、市場(chǎng)、質(zhì)量保證和技術(shù)支持部門的業(yè)績(jī)。
Window 創(chuàng)建新票據(jù)的窗口。
DataView 數(shù)據(jù)視圖來(lái)顯示開放票據(jù)的列表。
Pagination 以簡(jiǎn)化數(shù)據(jù)網(wǎng)格中的導(dǎo)航。
Toolbar 為整個(gè)用戶界面儀表板提供導(dǎo)航。
布局（Layout）用于附加和安排所有的用戶界面組件。

創(chuàng)建 JavaScript UI Dashboard

首先，咱們并在你的設(shè)備上運(yùn)行它。你可能會(huì)注意到，構(gòu)建UI儀表盤的DHTMLX部件被劃分為視圖。你可以分別初始化或配置每個(gè)小部件，也可以將其刪除。

讓我們對(duì)基于Optimus框架的UI儀表板演示做一個(gè)概述。
我們將從index.html文件開始。在文件的頭部部分，你可以找到 suite.js 和 suite.css。我們包括DHTMLX Suite及其所有的組件。此外，你可以看到app.js和app.css來(lái)配置webpack。

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <title>DHTMLX - UI Dashboard</title>
        ...
 
        <!-- Suite -->
        <script type="text/javascript" src="./lib/suite/suite.js"></script>
        <link rel="stylesheet" href="./lib/suite/suite.css"/>
 
        <!-- App -->
        <script type="text/javascript" src="./app.js"></script>
        <link rel="stylesheet" href="./app.css"/>
    </head>
   <body>
        <section class="demo--container" id="top_layout">這是一個(gè)空的界面應(yīng)用標(biāo)簽，記得ID要寫呀</section>
    </body>
  <script>
//應(yīng)用程序的初始化是通過(guò)render()方法進(jìn)行的。
        const app = new uidashboard.UIDashboardApp();
        app.render("#top_layout");
    </script>

該演示的下一個(gè)主要文件是index.js。它包括渲染我們應(yīng)用程序的UIDashboardApp類。在index.html中，它被用來(lái)初始化我們上面描述的演示。

export class UIDashboardApp extends App {
    init() {
        this.tickets = getTickets();
        this.store = new Store(initialState);
        this.params.store = this.store;
        this.state = this.store.getState();
        this.subscribe();
        dhx.scrollViewConfig.enable = true;
 
        this.show("", TopLayout, { tickets: this.tickets, schedulerData, ganttData }); // TopLayout view
        this.use(HistoryManager);
    }
 
    subscribe() {
        this.on("modeChanged", id => {
            this.state.mode = id || "dashboard";
        });
 
        this.on("addTicketClicked", obj => {
            this.tickets.add(
                {
                    title: obj.title,
                    text: obj.comment,
                    type: obj.type,
                    icon: "Avatar_01",
                    name: `${obj.name} ${obj.lastName}`,
                    comments: "0",
                    time: new Date().getTime(),
                },
                0
            );
        });
    }
}

UIDashboardApp類繼承了index.js文件中的所有類。TopLayout類是UI儀表板演示的下一個(gè)重要部分。

import "./assets/styles/main.scss"; 
import { App } from "dhx-optimus";
import Store from "dhx-optimus-store"; 
import { getLocationParams } from "./helpers/url"; 
import TopLayout from "./views/TopLayout"; // 頂部菜單
import HistoryManager from "./components/HistoryManager";
import { getTickets } from "./services/dataService";

總而言之，index.html和index.js文件是UI儀表板演示的基礎(chǔ)。你可以在文檔中了解更多關(guān)于使用這些文件以及如何使用Optimus構(gòu)建應(yīng)用程序的信息。

儀表盤演示的下一個(gè)組成部分是一個(gè)視圖文件塊。你可以在view文件夾中找到所有這些文件。每個(gè)視圖都是一個(gè)ViewName.js文件。讓我們從TopLayout.js視圖開始，它 "聯(lián)合 "了整個(gè)演示。

在這里你可以看到TopLayout類是如何建立和啟動(dòng)的。它包括Layout和Tabbar：

export default class TopLayout extends View {
    init() {
        this.ui = new dhx.Layout(null, layoutConfig);
 
        this.navigationBar = new dhx.Tabbar(this.ui.getCell("tabbar"), {
            mode: "top",
            tabAlign: "center",
            tabWidth: 200,
            noContent: true,
            views: [
                { id: "dashboard", tab: "Dashboard" },
            ],
        });
 
        this.navigationBar.events.on("change", id => {
            this.fire("modeChanged", [id]);
        });
 
        this.show(this.ui.getCell("top"), TopBar);
 
        return this.ui;
    }
 
    ready() {
        this.observe(
            state => state.mode,
            mode => {
                const cell = this.navigationBar.getCell(this.app.state.mode);
                if (cell) {
                    cell.show();
                }
                this.changeView(mode);
            }
        );
    }
 
    changeView(id) {
        switch (id) {
            case "dashboard":
                this.show(this.ui.getCell("center"), Dashboard, { tickets: this.params.tickets });
                break;
            default:
                this.show(this.ui.getCell("center"), NotReady);
                break;
        }
    }
}

然后，你可以通過(guò)將其劃分為三個(gè)單元來(lái)配置Layout。

const layoutConfig = {
    rows: [
        {
            id: "top",
            height: "content",
        },
        {
            id: "tabbar",
            height: "content",
        },
        {
            css: "cell_center",
            id: "center",
        },
    ],
};

請(qǐng)關(guān)注最后輸出的區(qū)域（上圖）。

TopLayout類繼承于以下內(nèi)容：

import { View } from "dhx-optimus"; 
import TopBar from "./TopBar";
import Dashboard from "./Dashboard"; // Dashboard demo

現(xiàn)在我們準(zhǔn)備概覽Dashboard視圖，它將初始化UI儀表板演示。讓我們打開Dashboard.js文件。

在這里你可以看到Dashboard的初始化以及Layout的配置：

export default class Dashboard extends View {
    init() {
        this.ui = new dhx.Layout(null, {
            type: "space",
            cols: [
                {
                    type: "wide",
                    rows: [
                        {
                            height: "50%",
                            cols: [
                                {
                                    id: "left-top",
                                },
                                {
                                    id: "left-bottom",
                                },
                            ],
                        },
                        {
                            id: "center",
                        },
                    ],
                },
                {
                    id: "right",
                    width: "30%",
                    minWidth: 440,
                    maxWidth: 440,
                },
            ],
        });
 
        this.show(this.ui.getCell("right"), Notifications);
        this.show(this.ui.getCell("center"), Tickets, { tickets: this.params.tickets });
        this.show(this.ui.getCell("left-top"), SalesChart);
        this.show(this.ui.getCell("left-bottom"), NotificationsChart);
 
        return this.ui;
    }
}

因此，我們把Layout的中心單元分成了4個(gè)部分。

// 儀表盤繼承與以下類
import { View } from "dhx-optimus"; 
import Notifications from "./Notifications";
import Tickets from "./Tickets";
import SalesChart from "./SalesChart";
import NotificationsChart from "./NotificationsChart";

這就是DHTMLX UI儀表盤演示的創(chuàng)建方式。你會(huì)發(fā)現(xiàn)，視圖的結(jié)構(gòu)是非常相同的。每個(gè)視圖都會(huì)建立儀表盤演示的部分，并在必要時(shí)繼承底部的類。你可以打開每個(gè)視圖的文件，探索它們的結(jié)構(gòu)，并根據(jù)你的要求來(lái)配置它們。

紙上覺來(lái)終覺錢，要知此事請(qǐng)看DEMO代碼，結(jié)合上述對(duì)區(qū)域劃分的方法，找到使用DHTMLX快捷開發(fā)業(yè)務(wù)系統(tǒng)的方法！

以上您也可以直接下載DHTMLX SUITE從0開始體驗(yàn)。