@ -2,7 +2,7 @@
< div class = "schedule-preview-wrap" >
< div class = "schedule-preview-wrap" >
< div ref = "ganttContainerRef" class = "schedule-gantt-container" : style = "{ height }" > < / div >
< div ref = "ganttContainerRef" class = "schedule-gantt-container" : style = "{ height }" > < / div >
< div class = "schedule-detail-panel" >
< div class = "schedule-detail-panel" >
< div class = "schedule-detail-title" > 计划信息 < / div >
< div class = "schedule-detail-title" > { { t ( 'GanttChart.GanttPanel.detailTitle' ) } } < / div >
< div v-if ="!editable" class="schedule-status-legend" >
< div v-if ="!editable" class="schedule-status-legend" >
< div
< div
v - for = "item in sortedPlanStatusList"
v - for = "item in sortedPlanStatusList"
@ -16,14 +16,14 @@
< / div >
< / div >
< template v-if ="activePreviewDevice" >
< template v-if ="activePreviewDevice" >
< el -descriptions :column ="1" border size = "small" >
< el -descriptions :column ="1" border size = "small" >
< el -descriptions -item label = "设备名称 > { { activePreviewDevice . deviceName } } < / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item :label ="t('GanttChart.GanttPanel.deviceNameLabel') > { { activePreviewDevice . deviceName } } < / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item label = "设备ID > { { activePreviewDevice . deviceId } } < / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item :label ="t('GanttChart.GanttPanel.deviceIdLabel') > { { activePreviewDevice . deviceId } } < / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item label = "产能 > { { activePreviewDevice . ratedCapacity ? ? '-' } } < / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item :label ="t('GanttChart.GanttPanel.capacityLabel') > { { activePreviewDevice . ratedCapacity ? ? '-' } } < / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item v-if ="'dailyAverageValue' in activePreviewDevice" label="每日报工平均值 "> {{ activePreviewDevice.dailyAverageValue ? ? ' - ' }} < / el -descriptions -item >
< el -descriptions -item v-if ="'dailyAverageValue' in activePreviewDevice" :label="t('GanttChart.GanttPanel.dailyAvgLabel') "> {{ activePreviewDevice.dailyAverageValue ? ? ' - ' }} < / el -descriptions -item >
< el -descriptions -item v-if ="'dataCollectionCapacity' in activePreviewDevice" label="数据采集产能 "> {{ activePreviewDevice.dataCollectionCapacity ? ? ' - ' }} < / el -descriptions -item >
< el -descriptions -item v-if ="'dataCollectionCapacity' in activePreviewDevice" :label="t('GanttChart.GanttPanel.dataCollectionCapacityLabel') "> {{ activePreviewDevice.dataCollectionCapacity ? ? ' - ' }} < / el -descriptions -item >
< el -descriptions -item label = "计划条数 > { { activePreviewDevice . plans ? . length ? ? 0 } } < / e l - d e s c r i p t i o n s - i t e m >
< el -descriptions -item :label ="t('GanttChart.GanttPanel.planCountLabel') > { { activePreviewDevice . plans ? . length ? ? 0 } } < / e l - d e s c r i p t i o n s - i t e m >
< / e l - d e s c r i p t i o n s >
< / e l - d e s c r i p t i o n s >
< div class = "schedule-plan-list-title" > 计划明细 < / div >
< div class = "schedule-plan-list-title" > { { t ( 'GanttChart.GanttPanel.planDetailTitle' ) } } < / div >
< div class = "schedule-plan-list" >
< div class = "schedule-plan-list" >
< div
< div
v - for = "(plan, index) in activePreviewTask ? [activePreviewTask] : (activePreviewDevice?.plans ?? [])"
v - for = "(plan, index) in activePreviewTask ? [activePreviewTask] : (activePreviewDevice?.plans ?? [])"
@ -40,60 +40,60 @@
{ { PLAN _STATUS _COLOR _MAP [ plan . planStatus ] . label } }
{ { PLAN _STATUS _COLOR _MAP [ plan . planStatus ] . label } }
< / span >
< / span >
< / div >
< / div >
< div > 计划编码 ： { { plan . taskCode ? ? '-' } } < / div >
< div > { { t ( 'GanttChart.GanttPanel.planCodeColon' ) } } { { plan . taskCode ? ? '-' } } < / div >
< div > 计划数量 ： { { plan . planNumber ? ? '-' } } < / div >
< div > { { t ( 'GanttChart.GanttPanel.planNumberColon' ) } } { { plan . planNumber ? ? '-' } } < / div >
< div > 交货日期 ： { { plan . deliveryDateStr ? ? '-' } } < / div >
< div > { { t ( 'GanttChart.GanttPanel.deliveryDateColon' ) } } { { plan . deliveryDateStr ? ? '-' } } < / div >
< div > 开始 ： { { plan . planStartTimeStr || '-' } } < / div >
< div > { { t ( 'GanttChart.GanttPanel.startColon' ) } } { { plan . planStartTimeStr || '-' } } < / div >
< div > 结束 ： { { plan . planEndTimeStr || '-' } } < / div >
< div > { { t ( 'GanttChart.GanttPanel.endColon' ) } } { { plan . planEndTimeStr || '-' } } < / div >
< div > 最晚开工 ： { { plan . latestStartTimeStr || '-' } } < / div >
< div > { { t ( 'GanttChart.GanttPanel.latestStartColon' ) } } { { plan . latestStartTimeStr || '-' } } < / div >
< / div >
< / div >
< / div >
< / div >
< / template >
< / template >
< el -empty v -else description = "暂无计划信息 :image-size ="80" / >
< el -empty v -else :description ="t('GanttChart.GanttPanel.emptyDescription') :image-size ="80" / >
< / div >
< / div >
< / div >
< / div >
< el -dialog v -if = " props.editable " v -model = " taskAdjustDialogVisible " title = "调整任务 width = "420px" append -to -body >
< el -dialog v -if = " props.editable " v -model = " taskAdjustDialogVisible " :title ="t('GanttChart.GanttPanel.adjustTaskTitle') width = "420px" append -to -body >
< el -form label -width = " 90px " >
< el -form label -width = " 90px " >
< el -form -item label = "设备 >
< el -form -item :label ="t('GanttChart.GanttPanel.deviceLabel') >
< el -select v-model ="taskAdjustForm.deviceTaskId" placeholder="请选择设备 " class="!w-full">
< el -select v-model ="taskAdjustForm.deviceTaskId" :placeholder="t('GanttChart.GanttPanel.devicePlaceholder') " class="!w-full">
< el -option v -for = " item in previewDeviceOptions " :key ="item.value" :label ="item.label" :value ="item.value" / >
< el -option v -for = " item in previewDeviceOptions " :key ="item.value" :label ="item.label" :value ="item.value" / >
< / e l - s e l e c t >
< / e l - s e l e c t >
< / e l - f o r m - i t e m >
< / e l - f o r m - i t e m >
< el -form -item label = "开始日期 >
< el -form -item :label ="t('GanttChart.GanttPanel.startDateLabel') >
< el -date -picker
< el -date -picker
v - model = "taskAdjustForm.startDate"
v - model = "taskAdjustForm.startDate"
type = "date"
type = "date"
value - format = "YYYY-MM-DD"
value - format = "YYYY-MM-DD"
placeholder = "请选择开始日期
: placeholder = "t('GanttChart.GanttPanel.startDatePlaceholder')
class = "!w-full"
class = "!w-full"
/ >
/ >
< / e l - f o r m - i t e m >
< / e l - f o r m - i t e m >
< el -form -item label = "天数 >
< el -form -item :label ="t('GanttChart.GanttPanel.durationLabel') >
< el -input -number v -model = " taskAdjustForm.duration " :min ="1" :max ="365" class = "!w-full" / >
< el -input -number v -model = " taskAdjustForm.duration " :min ="1" :max ="365" class = "!w-full" / >
< / e l - f o r m - i t e m >
< / e l - f o r m - i t e m >
< / e l - f o r m >
< / e l - f o r m >
< template # footer >
< template # footer >
< el -button @ click = "taskAdjustDialogVisible = false" > 取消 < / e l - b u t t o n >
< el -button @ click = "taskAdjustDialogVisible = false" > { { t ( 'GanttChart.GanttPanel.buttonCancel' ) } } < / e l - b u t t o n >
< el -button type = "primary" @click ="handleTaskAdjustSubmit" > 确 定 < / el -button >
< el -button type = "primary" @click ="handleTaskAdjustSubmit" > {{ t ( ' GanttChart.GanttPanel.buttonConfirm ' ) }} < / el -button >
< / template >
< / template >
< / e l - d i a l o g >
< / e l - d i a l o g >
< el -dialog v -if = " props.editable " v -model = " startDateEditorVisible " title = "修改开始时间 width = "360px" append -to -body >
< el -dialog v -if = " props.editable " v -model = " startDateEditorVisible " :title ="t('GanttChart.GanttPanel.editStartDateTitle') width = "360px" append -to -body >
< el -form label -width = " 80px " >
< el -form label -width = " 80px " >
< el -form -item label = "开始时间 >
< el -form -item :label ="t('GanttChart.GanttPanel.startTimeLabel') >
< el -date -picker
< el -date -picker
v - model = "startDateEditorValue"
v - model = "startDateEditorValue"
type = "datetime"
type = "datetime"
value - format = "YYYY-MM-DD HH:mm:ss"
value - format = "YYYY-MM-DD HH:mm:ss"
placeholder = "请选择开始时间
: placeholder = "t('GanttChart.GanttPanel.startTimePlaceholder')
class = "!w-full"
class = "!w-full"
/ >
/ >
< / e l - f o r m - i t e m >
< / e l - f o r m - i t e m >
< / e l - f o r m >
< / e l - f o r m >
< template # footer >
< template # footer >
< el -button @ click = "startDateEditorVisible = false" > 取消 < / e l - b u t t o n >
< el -button @ click = "startDateEditorVisible = false" > { { t ( 'GanttChart.GanttPanel.buttonCancel' ) } } < / e l - b u t t o n >
< el -button type = "primary" @click ="handleStartDateEditorSubmit" > 确 定 < / el -button >
< el -button type = "primary" @click ="handleStartDateEditorSubmit" > {{ t ( ' GanttChart.GanttPanel.buttonConfirm ' ) }} < / el -button >
< / template >
< / template >
< / e l - d i a l o g >
< / e l - d i a l o g >
< / template > < / template >
@ -102,16 +102,19 @@
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { gantt } from 'dhtmlx-gantt' import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css' import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import { useI18n } from '@/hooks/web/useI18n'
defineOptions ( { name : 'ScheduleGanttPanel' } ) defineOptions ( { name : 'ScheduleGanttPanel' } )
const { t } = useI18n ( )
/ / 计 划 状 态 颜 色 映 射 表 / / 计 划 状 态 颜 色 映 射 表
const PLAN _STATUS _COLOR _MAP = { const PLAN _STATUS _COLOR _MAP = {
1 : { label : '已排产' , color : '#409eff' , textColor : '#ffffff' , sort : 1 } ,
1 : { label : t ( 'GanttChart.GanttPanel.statusScheduled' ) , color : '#409eff' , textColor : '#ffffff' , sort : 1 } ,
8 : { label : '已开工' , color : '#67c23a' , textColor : '#ffffff' , sort : 2 } ,
8 : { label : t ( 'GanttChart.GanttPanel.statusStarted' ) , color : '#67c23a' , textColor : '#ffffff' , sort : 2 } ,
3 : { label : '暂停' , color : '#e6a23c' , textColor : '#ffffff' , sort : 3 } ,
3 : { label : t ( 'GanttChart.GanttPanel.statusPaused' ) , color : '#e6a23c' , textColor : '#ffffff' , sort : 3 } ,
4 : { label : '待入库' , color : '#f56c6c' , textColor : '#ffffff' , sort : 4 } ,
4 : { label : t ( 'GanttChart.GanttPanel.statusPendingStorage' ) , color : '#f56c6c' , textColor : '#ffffff' , sort : 4 } ,
5 : { label : '已入库' , color : '#8e7cc3' , textColor : '#ffffff' , sort : 5 } ,
5 : { label : t ( 'GanttChart.GanttPanel.statusStored' ) , color : '#8e7cc3' , textColor : '#ffffff' , sort : 5 } ,
} }
const sortedPlanStatusList = Object . entries ( PLAN _STATUS _COLOR _MAP ) const sortedPlanStatusList = Object . entries ( PLAN _STATUS _COLOR _MAP )
@ -339,25 +342,25 @@ const buildTaskTooltipHtml = (task: any, start?: Date, end?: Date) => {
const plan = task ? . _planData
const plan = task ? . _planData
if ( plan ) {
if ( plan ) {
return `
return `
< div > < b > 任务明细 < / b > < / div >
< div > < b > ${ t ( 'GanttChart.GanttPanel.tooltipTaskDetail' ) } < / b > < / div >
< div > 任务单： $ { plan . taskCode ? ? '-' } < / div >
< div > ${ t ( 'GanttChart.GanttPanel.tooltipTaskCode' ) } $ { plan . taskCode ? ? '-' } < / div >
< div > 产品： $ { plan . productCode ? ? '-' } / $ { plan . productName ? ? '-' } < / div >
< div > ${ t ( 'GanttChart.GanttPanel.tooltipProduct' ) } $ { plan . productCode ? ? '-' } / $ { plan . productName ? ? '-' } < / div >
< div > 明细ID： $ { plan . taskDetailId ? ? '-' } < / div >
< div > ${ t ( 'GanttChart.GanttPanel.tooltipDetailId' ) } $ { plan . taskDetailId ? ? '-' } < / div >
< div > 计划数量： $ { plan . planNumber ? ? '-' } < / div >
< div > ${ t ( 'GanttChart.GanttPanel.tooltipPlanNumber' ) } $ { plan . planNumber ? ? '-' } < / div >
< div > 开始： $ { formatTooltipDateTime ( start ? ? task ? . start _date ) } < / div >
< div > ${ t ( 'GanttChart.GanttPanel.tooltipStart' ) } $ { formatTooltipDateTime ( start ? ? task ? . start _date ) } < / div >
< div > 结束： $ { formatTooltipDateTime ( end ? ? task ? . end _date ) } < / div >
< div > ${ t ( 'GanttChart.GanttPanel.tooltipEnd' ) } $ { formatTooltipDateTime ( end ? ? task ? . end _date ) } < / div >
< div > 最晚开工： $ { formatTooltipDateTime ( plan . latestStartTimeStr ) } < / div >
< div > ${ t ( 'GanttChart.GanttPanel.tooltipLatestStart' ) } $ { formatTooltipDateTime ( plan . latestStartTimeStr ) } < / div >
`
`
}
}
const device = task ? . _deviceData
const device = task ? . _deviceData
const summary = getDeviceTaskSummary ( task )
const summary = getDeviceTaskSummary ( task )
return `
return `
< div > < b > 汇总 < / b > < / div >
< div > < b > ${ t ( 'GanttChart.GanttPanel.tooltipSummary' ) } < / b > < / div >
< div > 设备： $ { device ? . deviceName ? ? '-' } < / div >
< div > ${ t ( 'GanttChart.GanttPanel.tooltipDevice' ) } $ { device ? . deviceName ? ? '-' } < / div >
< div > 任务明细条数： $ { summary . planCount } < / div >
< div > ${ t ( 'GanttChart.GanttPanel.tooltipDetailCount' ) } $ { summary . planCount } < / div >
< div > 计划总数： $ { summary . totalPlanNumber } < / div >
< div > ${ t ( 'GanttChart.GanttPanel.tooltipTotalPlanNumber' ) } $ { summary . totalPlanNumber } < / div >
< div > 最早计划开始： $ { summary . earliestStart } < / div >
< div > ${ t ( 'GanttChart.GanttPanel.tooltipEarliestStart' ) } $ { summary . earliestStart } < / div >
< div > 最晚计划结束： $ { summary . latestEnd } < / div >
< div > ${ t ( 'GanttChart.GanttPanel.tooltipLatestEnd' ) } $ { summary . latestEnd } < / div >
`
`
} }
const getTaskByTooltipNode = ( node : HTMLElement ) => { const getTaskByTooltipNode = ( node : HTMLElement ) => {
@ -617,7 +620,7 @@ const openTaskAdjustDialog = (task: any) => {
const handleTaskAdjustSubmit = ( ) => { const handleTaskAdjustSubmit = ( ) => {
if ( ! taskAdjustTaskId . value || ! props . editable ) return
if ( ! taskAdjustTaskId . value || ! props . editable ) return
if ( ! taskAdjustForm . deviceTaskId || ! taskAdjustForm . startDate ) {
if ( ! taskAdjustForm . deviceTaskId || ! taskAdjustForm . startDate ) {
message . warning ( '请完善设备和开始日期' )
message . warning ( t ( 'GanttChart.GanttPanel.warningCompleteDeviceDate' ) )
return
return
}
}
const task = gantt . getTask ( taskAdjustTaskId . value )
const task = gantt . getTask ( taskAdjustTaskId . value )
@ -643,7 +646,7 @@ const handleStartDateEditorSubmit = () => {
}
}
const newStart = dayjs ( startDateEditorValue . value )
const newStart = dayjs ( startDateEditorValue . value )
if ( ! newStart . isValid ( ) ) {
if ( ! newStart . isValid ( ) ) {
message . warning ( '请选择有效的时间' )
message . warning ( t ( 'GanttChart.GanttPanel.warningValidTime' ) )
return
return
}
}
const duration = Math . max ( Number ( task . duration ) || 1 , 1 )
const duration = Math . max ( Number ( task . duration ) || 1 , 1 )
@ -717,14 +720,14 @@ const initGanttPreview = () => {
gantt . config . columns = [
gantt . config . columns = [
{
{
name : 'text' ,
name : 'text' ,
label : '任务名称' ,
label : t ( 'GanttChart.GanttPanel.columnTaskName' ) ,
tree : true ,
tree : true ,
width : '*' ,
width : '*' ,
min _width : 200
min _width : 200
} ,
} ,
{
{
name : 'start_date' ,
name : 'start_date' ,
label : '开始时间' ,
label : t ( 'GanttChart.GanttPanel.columnStartTime' ) ,
align : 'center' ,
align : 'center' ,
width : 210 ,
width : 210 ,
template : ( task : any ) =>
template : ( task : any ) =>
@ -734,7 +737,7 @@ const initGanttPreview = () => {
} ,
} ,
{
{
name : 'duration' ,
name : 'duration' ,
label : '天数' ,
label : t ( 'GanttChart.GanttPanel.columnDays' ) ,
align : 'center' ,
align : 'center' ,
width : 60 ,
width : 60 ,
template : ( task : any ) =>
template : ( task : any ) =>
@ -750,7 +753,7 @@ const initGanttPreview = () => {
]
]
gantt . config . scales = [
gantt . config . scales = [
{ unit : 'month' , step : 1 , format : ( date ) => dayjs ( date ) . format ( 'YYYY年M月' ) } ,
{ unit : 'month' , step : 1 , format : ( date ) => dayjs ( date ) . format ( t ( 'GanttChart.GanttPanel.scaleMonthFormat' ) ) } ,
{ unit : 'day' , step : 1 , format : ( date ) => dayjs ( date ) . format ( 'MM-DD' ) }
{ unit : 'day' , step : 1 , format : ( date ) => dayjs ( date ) . format ( 'MM-DD' ) }
]
]
