feat(mes): 添加甘特图任务类型映射和国际化支持

新增甘特图组件的任务类型映射,使用 BarcodeBizTypeEnum 枚举来处理后端类型。同时,优化了中文国际化设置,确保甘特图组件在中文环境下的正确显示。
pull/871/MERGE
YunaiV 2026-03-16 21:44:30 +08:00
parent 81a8f262aa
commit 98c8b9a5cf
2 changed files with 54 additions and 101 deletions

View File

@ -4,9 +4,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// TODO @AI绿progress绿
import { gantt } from 'dhtmlx-gantt' import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css' import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import { BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
/** /**
* GanttChart - 甘特图组件 * GanttChart - 甘特图组件
@ -47,100 +47,29 @@ const initGantt = () => {
return return
} }
// locale //
gantt.locale = { gantt.i18n.setLocale('cn')
date: {
month_full: [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月'
],
month_short: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月'
],
day_full: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
day_short: ['日', '一', '二', '三', '四', '五', '六']
},
// TODO @AIlinter
labels: {
new_task: '新任务',
icon_save: '保存',
icon_cancel: '取消',
icon_details: '详情',
icon_edit: '编辑',
icon_delete: '删除',
confirm_closing: '',
confirm_deleting: '确认删除?',
section_description: '描述',
section_time: '时间',
section_type: '类型',
column_wbs: 'WBS',
column_text: '任务名称',
column_start_date: '开始时间',
column_duration: '时长',
column_add: '',
link: '关联',
confirm_link_deleting: '将被删除',
link_start: '(开始)',
link_end: '(结束)',
type_task: '任务',
type_project: '项目',
type_milestone: '里程碑',
minutes: '分钟',
hours: '小时',
days: '天',
weeks: '周',
months: '月',
years: '年'
}
}
// //
gantt.config.date_format = '%Y-%m-%d %H:%i:%s' gantt.config.date_format = '%Y-%m-%d %H:%i:%s'
gantt.config.duration_unit = 'hour' gantt.config.duration_unit = 'hour' // 使 duration_step
gantt.config.duration_step = 8 // 1 = 8 gantt.config.duration_step = 8 // 1 = 8
gantt.config.row_height = 36 gantt.config.row_height = 36 // KTG gantt 36
gantt.config.bar_height = 24 gantt.config.bar_height = 24 // KTG gantt
gantt.config.fit_tasks = true gantt.config.fit_tasks = true // KTG fit_tasks = true
gantt.config.auto_scheduling = false gantt.config.auto_scheduling = false // KTG gantt false
gantt.config.drag_links = false gantt.config.drag_links = false // KTG drag_links = false
gantt.config.details_on_create = false gantt.config.details_on_create = true // KTG details_on_create = true
gantt.config.details_on_dblclick = false gantt.config.details_on_dblclick = true // KTG details_on_dblclick = true
gantt.config.show_progress = true gantt.config.show_progress = true // KTG gantt progress
gantt.config.open_tree_initially = true gantt.config.open_tree_initially = true // KTG open_tree_initially = true
gantt.config.auto_types = false // projectKTG auto_types = false
gantt.config.drag_resize = false //
gantt.config.drag_move = false //
gantt.config.drag_progress = false // KTG drag_progress = false
// xml_date date_format
// // > > 8
if (props.readonly) {
gantt.config.drag_move = false
gantt.config.drag_resize = false
gantt.config.drag_progress = false
} else {
gantt.config.drag_move = true
gantt.config.drag_resize = true
gantt.config.drag_progress = false
}
// > > 8 KTG
const weekScaleTemplate = (date: Date) => { const weekScaleTemplate = (date: Date) => {
const dateToStr = gantt.date.date_to_str('%M %d') const dateToStr = gantt.date.date_to_str('%M %d')
const endDate = gantt.date.add(gantt.date.add(date, 1, 'week'), -1, 'day') const endDate = gantt.date.add(gantt.date.add(date, 1, 'week'), -1, 'day')
@ -158,7 +87,7 @@ const initGantt = () => {
{ unit: 'hour', step: 8, format: '%H:%i' } { unit: 'hour', step: 8, format: '%H:%i' }
] ]
gantt.config.scale_height = 50 gantt.config.scale_height = 50
gantt.config.show_task_cells = true gantt.config.show_task_cells = true //
// //
gantt.config.columns = [ gantt.config.columns = [
@ -197,13 +126,16 @@ const initGantt = () => {
// //
gantt.templates.task_class = (_start: any, _end: any, task: any) => { gantt.templates.task_class = (_start: any, _end: any, task: any) => {
if (task.type === gantt.config.types.project) return 'gantt-project-bar' if (task.type === gantt.config.types.project) {
return 'gantt-project-bar'
}
return '' return ''
} }
gantt.templates.task_cell_class = () => '' gantt.templates.task_cell_class = () => '' // KTG gantt
gantt.templates.task_row_class = () => '' gantt.templates.task_row_class = () => '' // KTG gantt
// //
// KTG onAfterTaskUpdate id onAfterTaskDrag emit
if (!props.readonly) { if (!props.readonly) {
gantt.attachEvent('onAfterTaskDrag', (id: string | number) => { gantt.attachEvent('onAfterTaskDrag', (id: string | number) => {
const task = gantt.getTask(id) const task = gantt.getTask(id)
@ -216,7 +148,7 @@ const initGantt = () => {
}) })
} }
// TODO @AI //
gantt.attachEvent('onTaskClick', (id: string | number) => { gantt.attachEvent('onTaskClick', (id: string | number) => {
emit('task-click', id) emit('task-click', id)
return true return true
@ -233,13 +165,14 @@ const loadData = (tasks: any[]) => {
return return
} }
gantt.clearAll() gantt.clearAll()
// TODO @AI使mes utils // type 使 MesBizTypeConstants gantt
// type: 301=(project), 303=(task) const TYPE_MAP: Record<number, string> = {
const TYPE_MAP: Record<number, string> = { 301: 'project', 303: 'task' } [BarcodeBizTypeEnum.WORKORDER]: 'project',
[BarcodeBizTypeEnum.TASK]: 'task'
}
const transformed = { const transformed = {
data: tasks.map((item: any) => ({ data: tasks.map((item: any) => ({
...item, ...item,
// TODO @AI TYPE_MAP?
type: TYPE_MAP[item.type] || item.type, type: TYPE_MAP[item.type] || item.type,
start_date: item.startDate ? new Date(item.startDate) : undefined, start_date: item.startDate ? new Date(item.startDate) : undefined,
end_date: item.endDate ? new Date(item.endDate) : undefined end_date: item.endDate ? new Date(item.endDate) : undefined
@ -260,7 +193,7 @@ watch(
{ deep: true } { deep: true }
) )
// TODO @AI /** 组件挂载后初始化甘特图 */
onMounted(() => { onMounted(() => {
initGantt() initGantt()
if (props.tasks?.length) { if (props.tasks?.length) {
@ -268,7 +201,7 @@ onMounted(() => {
} }
}) })
// TODO @AI /** 组件卸载前清理甘特图 */
onBeforeUnmount(() => { onBeforeUnmount(() => {
if (ganttInited.value) { if (ganttInited.value) {
gantt.clearAll() gantt.clearAll()
@ -292,4 +225,23 @@ defineExpose({ loadData })
.gantt-project-bar .gantt_task_progress { .gantt-project-bar .gantt_task_progress {
background: #7b68ee; background: #7b68ee;
} }
/* 甘特条圆角 */
.gantt_task_line {
border-radius: 8px;
}
/* 周末背景色 */
.weekend {
background: #f0f0f0 !important;
}
/* 行悬浮高亮 */
.gantt_grid_data .gantt_row:hover,
.gantt_grid_data .gantt_row.odd:hover {
background-color: #f3f1fe !important;
}
/* 选中行高亮 */
.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
background-color: #f3f1fe !important;
}
</style> </style>

View File

@ -423,6 +423,7 @@ export enum BarcodeBizTypeEnum {
PROCARD = 300, PROCARD = 300,
WORKORDER = 301, WORKORDER = 301,
TRANSORDER = 302, TRANSORDER = 302,
TASK = 303,
// DV 设备模块 [400, 500) // DV 设备模块 [400, 500)
MACHINERY = 400, MACHINERY = 400,
// TM 工具模块 [500, 600) // TM 工具模块 [500, 600)