甘特图 dhtmlxGantt.js UA实例

最新推荐文章于 2025-06-20 22:04:44 发布

原创最新推荐文章于 2025-06-20 22:04:44 发布 · 578 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#甘特图 #javascript #UA

UA 专栏收录该内容

47 篇文章

订阅专栏

摘要：本文介绍了一个基于AngularJS的排产资源占用甘特图系统，包含前端界面展示和后端控制逻辑。系统通过HTML模板实现甘特图展示区域、查询条件表单和数据绑定，使用JavaScript控制器处理数据查询、甘特图初始化和交互逻辑。主要功能包括：1）查询工厂、作业岛类型的排产资源占用情况；2）甘特图展示资源占用时间分布；3）数据字典加载和表单验证。系统采用只读模式展示甘特图，禁用编辑功能，确保数据安全性和稳定性。

1.SchedulingResourceOccupationGanTTScreen-list.html

<link href="Scheduling.SchedulingApp/styles/dhtmlxgantt.css" rel="stylesheet">
<style>
    .MainCommandActionButton {
        margin-top: 20px !important;
    }

    /* 启用复制功能 */
    .ui-grid-disable-selection {
        -webkit-touch-callout: default;
        -webkit-user-select: text;
        -khtml-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
        cursor: auto;
    }
</style>
<div id="itemlist" class="content-area content-area-relative" style="height: calc(93% - 30px) !important">
    <!--查询条件与功能按钮-->
    <div class="col-md-40" style="margin-left: 15px; margin-top: 10px;">
        <div class="side-panel-property-area-body">

            <sit-property-grid sit-id="add_form" sit-layout="Horizontal" sit-type="Fluid" sit-mode="edit"
                sit-columns="5">
                <sit-property sit-widget="sit-select" sit-value="vm.Status.value" sit-validation="{ required: true }"
                    sit-options="vm.Status.options" sit-to-display="'ItemName'" sit-to-keep="'ItemValue'"
                    style="max-width:200px;">查询类型:</sit-property>
                <sit-property sit-widget="sit-select" sit-value="vm.Factory.value" sit-validation="{ required: true }"
                    sit-options="vm.Factory.options" sit-to-display="'ItemName'" sit-to-keep="'ItemValue'"
                    style="max-width:200px;">工厂:</sit-property>

                <sit-property sit-widget="sit-select" sit-value="vm.OperatingIslandType.value"
                    sit-validation="{ required: false }" sit-options="vm.OperatingIslandType.options"
                    sit-to-display="'ItemName'" sit-to-keep="'ItemValue'" style="max-width:200px;">作业岛类型:</sit-property>

                <sit-property sit-widget="sit-datepicker" sit-value="vm.StartDate" sit-validation="{required: true}"
                    sit-options="vm.dateOptions" sit-format="'yyyy-MM-dd'" sit-read-only="false" style="max-width:150px;">开始日期:</sit-property>

                <sit-property sit-widget="sit-datepicker" sit-value="vm.EndDate" sit-validation="{required: true}"
                    sit-options="vm.dateOptions" sit-format="'yyyy-MM-dd'" sit-read-only="false" style="max-width:150px;">结束日期:</sit-property>
                    
                <sit-command-bar sit-type="action">
                    <sit-command sit-icon="fa-search" sit-type="main" sit-name="com.siemens.customcommand.search"
                        sit-tooltip="" ng-show="false" sit-label="">
                    </sit-command> 
                    <sit-command sit-icon="fa-search" sit-type="main" sit-name="com.siemens.customcommand.search" ng-show="vm.validInputs"
                        sit-tooltip="查询" ng-click="vm.searchButtonHandler" sit-label="查询">
                    </sit-command>
                </sit-command-bar>
            </sit-property-grid>
        </div>
    </div>

    <div style="width:100%;margin-top: 5px;">
        <!-- grid列表 -->
        <div id="listClass" style="width:100%; height: 100%; padding:0px 16px 0 16px; margin-top: 3px;">
            <div id="divGantt" class="gantt-container" style="height:90vh;"></div>
        </div>
    </div>



</div>

2.SchedulingResourceOccupationGanTTScreen-list-ctrl.js

(function () {
    'use strict';
    angular.module('Scheduling.SchedulingApp.SchedulingResourceOccupationGanTT').config(ListScreenRouteConfig);

    ListScreenController.$inject = ['Scheduling.SchedulingApp.SchedulingResourceOccupationGanTT.SchedulingResourceOccupationGanTTScreen.service',
        '$state', '$stateParams',
        '$rootScope', '$scope', 'common.services.authentication', 'common.base', 'common.services.logger.service', 'common.widgets.notificationTile.globalService', 'commonService',
        'common.widgets.busyIndicator.service', 'i18nService'];
    function ListScreenController(dataService, $state, $stateParams, $rootScope, $scope, auth, base, loggerService, notificationService, commonService, busyIndicatorService, i18nService) {
        //国际化 
        i18nService.setCurrentLang('zh-cn');
        var self = this;
        var logger, rootstate, messageservice, backendService, signalManager;

        activate();

        // Initialization function
        function activate() {
            logger = loggerService.getModuleLogger('Scheduling.SchedulingApp.SchedulingResourceOccupationGanTT.SchedulingResourceOccupationGanTTScreen');

            init();
            registerEvents();
        }

        function init() {
            logger.logDebug('Initializing controller.......');

            rootstate = 'home.Scheduling_SchedulingApp_SchedulingResourceOccupationGanTT_SchedulingResourceOccupationGanTTScreen';
            messageservice = base.widgets.messageOverlay.service;
            backendService = base.services.runtime.backendService;
            signalManager = base.services.signal.service;

            //Initialize Model Data
            self.selectedItem = null;
            self.isButtonVisible = false;
            self.validInputs = false;
            self.searchButtonHandler = searchButtonHandler;//查询
            //查询类型
            self.Status = {
                value: { 'ItemValue': '作业岛', 'ItemName': '作业岛' },
                options: [

                    { 'ItemValue': '作业岛', 'ItemName': '作业岛' },
                    { 'ItemValue': '班组', 'ItemName': '班组' }
                ]
            };
            //工厂
            self.Factory = {
                value: { 'ItemValue': '', 'ItemName': '--请选择--' },
                options: [
                    { 'ItemValue': '', 'ItemName': '--请选择--' }
                ]
            };
            //作业岛类型
            self.OperatingIslandType = {
                value: { 'ItemValue': '', 'ItemName': '--请选择--' },
                options: [
                    { 'ItemValue': '', 'ItemName': '--请选择--' }
                ]
            };
            //作业岛编号
            self.OperatingIsland = {
                value: { 'ItemValue': '', 'ItemName': '--请选择--' },
                options: [
                    { 'ItemValue': '', 'ItemName': '--请选择--' }
                ]
            };
            self.searchParams = {};
            //获取数据字典
            GetDectionary();
            GanttInit();
        }
        //查询
        function searchButtonHandler(clickedCommand) {
            initGanttData();
        }

        //甘特图初始化
        function GanttInit() {
            //////////////////////////
            //汉化           
            gantt.i18n.setLocale("cn");
            // 完全禁用任务拖动
            // 1. 初始化配置
            gantt.config.date_format = "%Y/%m/%d";
            gantt.config.select_task = false;
            // 禁用所有交互事件（包括双击编辑）
            gantt.config.interaction = {
                click: false,//禁用单击
                dblclick: false,//禁用双击
                drag: false,// 禁用任务拖动
                resize: false//// 禁用调整大小
            };
            // 仅允许查看但禁止修改
            gantt.config.readonly = true;

            // 禁用任务点击选中
            gantt.config.subscales = [
                { unit: "day", step: 1, date: "%D" }
            ];
            // 初始化时禁用任务创建按钮
            gantt.config.show_add_button = false;
            gantt.config.toolbar = []; // 清空工具栏
            gantt.config.show_quick_info = false; // 隐藏快速操作栏
            gantt.config.show_grid_header = false; // 隐藏表头操作栏
            gantt.config.columns = [
                { name: "text", label: "任务名称", width: 200, tree: true },
                { name: "start_date", label: "开始时间", width: 110, align: "center" },
                { name: "end_date", label: "结束时间", width: 110, align: "center" },
                { name: "duration", label: "持续时间", width: 80, align: "center" }
              ];
              
              
            // 2. 加载数据
            gantt.init("divGantt");
            gantt.config.work_time = true;  // 必须启用工作时间模式
            gantt.config.split_tasks = true; // 启用任务分割
            gantt.config.show_unscheduled = true; // 可选：允许显示未安排的任务段
            // 或通过事件拦截（更灵活）
            gantt.attachEvent("onBeforeTaskDrag", function () {
                return false; // 取消拖动操作
            });
        }
        //甘特图数据绑定
        function GantData(serverData) {
            console.log("serverData-------------", JSON.stringify(serverData));
            if (serverData.length==0) {
                console.log("serverData-----1111111111111111111--------");
                //清空数据
                gantt.clearAll(); 
            }
            else {
                console.log("serverData-----22222222222222222--------");
                gantt.parse({
                    data: serverData,
                    // links: [
                    //     { id: 1, source: 2, target: 3, type: "0" } // 0表示"完成-开始"依赖关系
                    // ]
                });
            }

            // 刷新视图使配置生效
            gantt.render();
        }
        //甘特图数据查询
        function initGanttData() {
            self.searchParams.FactoryCode = self.Factory.value.ItemName;
            self.searchParams.OperatingIslandTypeCode = self.OperatingIslandType.value.ItemValue;
            self.searchParams.TypeCode = self.Status.value.ItemValue;
            self.searchParams.StartDate = moment(self.StartDate).format('YYYY-MM-DD HH:mm:ss');
            self.searchParams.EndDate = moment(self.EndDate).format('YYYY-MM-DD HH:mm:ss');
            dataService.getSchedulingGanttList(self.searchParams).then(function (data) {
                if ((data) && (data.succeeded)) {
                    //数据绑定 
                    GantData(data.data.ReturnValue);
                } else {

                }
            }, backendService.backendError);

            // let dd=[
            //     //  { id: 1, text: "PM01", start_date: "2025-05-1", end_date: "2025-05-15", progress: 1 },
            //     {
            //         id: 1,
            //         text: "PM01",
            //         start_date: "2025-05-01", end_date: "2025-05-10"
            //     },
            //     { id: 2, text: "APS000001", start_date: "2025-05-01", end_date: "2025-05-4", parent: 1 },
            //     { id: 3, text: "APS000002", start_date: "2025-05-6 23:59:59", end_date: "2025-05-10", parent: 1 },
            //     { id: 4, text: "PM02", start_date: "2025-05-15", duration: 10, parent: 0 },
            //     { id: 5, text: "PM03", start_date: "2025-05-16", end_date: "2025-05-20", parent: 0 }
            // ];
            // GantData(dd);
        }
        //获取数据字典数据
        function GetDectionary() {
            var dicParamObj = {};
            dicParamObj.ItemCodeList = ['FactoryDic', 'OperatingIslandTypeDic', 'OperatingIslandDic', 'StatusDic'];//可以一次查询多个
            dataService.getDectionary(dicParamObj).then(function (data) {
                if ((data) && (data.succeeded)) {
                    var resData = data.data.DictionaryDataList;
                    //工厂
                    var factoryDicArry = resData.filter(t => t.CategoryCode == 'FactoryDic')
                        .map(function (item) {
                            return { 'ItemValue': item.ItemValue, 'ItemName': item.ItemName }
                        }).sort((a, b) => a.ItemValue.localeCompare(b.ItemValue));
                    self.Factory.options.push(...factoryDicArry);
                    //作业岛类型
                    var operatingIslandTypeDicArry = resData.filter(t => t.CategoryCode == 'OperatingIslandTypeDic')
                        .map(function (item) {
                            return { 'ItemValue': item.ItemValue, 'ItemName': item.ItemName }
                        }).sort((a, b) => a.ItemValue.localeCompare(b.ItemValue));
                    self.OperatingIslandType.options.push(...operatingIslandTypeDicArry);
                    // //作业岛编号
                    // var operatingIslandDicArry = resData.filter(t => t.CategoryCode == 'OperatingIslandDic')
                    //     .map(function (item) {
                    //         return { 'ItemValue': item.ItemValue, 'ItemName': item.ItemName }
                    //     }).sort((a, b) => a.ItemValue.localeCompare(b.ItemValue));
                    // self.OperatingIsland.options.push(...operatingIslandDicArry);

                } else {
                    self.Factory.options = [];
                    self.OperatingIslandType.options = [];
                    self.OperatingIsland.options = [];

                }
            }, backendService.backendError);
        }
        function registerEvents() {
            $scope.$on('sit-property-grid.validity-changed', onPropertyGridValidityChange);
        }
        function onPropertyGridValidityChange(event, params) {
            self.validInputs = params.validity;
        }
    }

    ListScreenRouteConfig.$inject = ['$stateProvider'];
    function ListScreenRouteConfig($stateProvider) {
        var moduleStateName = 'home.Scheduling_SchedulingApp_SchedulingResourceOccupationGanTT';
        var moduleStateUrl = 'Scheduling_SchedulingApp_SchedulingResourceOccupationGanTT';
        var moduleFolder = 'Scheduling.SchedulingApp/modules/SchedulingResourceOccupationGanTT';

        var state = {
            name: moduleStateName + '_SchedulingResourceOccupationGanTTScreen',
            url: '/' + moduleStateUrl + '_SchedulingResourceOccupationGanTTScreen',
            views: {
                'Canvas@': {
                    templateUrl: moduleFolder + '/SchedulingResourceOccupationGanTTScreen-list.html',
                    controller: ListScreenController,
                    controllerAs: 'vm'
                }
            },
            data: {
                title: '排产资源暂用甘特图'
            }
        };
        $stateProvider.state(state);
    }
}());