甘特图 dhtmlxGantt.js UA实例

摘要：本文介绍了一个基于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 functionfunction 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 Dataself.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);}
}());