linweidong
/
besure_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'

Browse Source
pull/3/head
liutao 2 weeks ago
parent 91c2ef7e80 f2e2bcb99e
commit c83a78d3a3
4 changed files with 10172 additions and 8738 deletions
Show Stats Download Patch File Download Diff File

1
.gitignore vendored
Unescape Escape View File

@ -9,3 +9,4 @@ auto-*.d.ts
.history .history
pnpm-lock.yaml pnpm-lock.yaml
/.vscode /.vscode
.env.cklocal

309
src/views/mes/components/ScheduleGanttPanel.vue
Unescape Escape View File

@ -1,42 +1,45 @@
<template> <template>
<div class="schedule-preview-wrap"> <div class="schedule-preview-wrap">
<div ref="ganttContainerRef" class="schedule-gantt-container" :style="{ height }"></div> <div class="gantt-main-area">
<div class="schedule-detail-panel"> <div class="schedule-status-legend">
<div class="schedule-detail-title">{{ t('GanttChart.GanttPanel.detailTitle') }}</div> <div v-for="item in sortedPlanStatusList" :key="item.key" class="legend-item"
<div v-if="!editable" class="schedule-status-legend"> :style="{ borderLeftColor: item.color }">
<div
v-for="item in sortedPlanStatusList"
:key="item.key"
class="legend-item"
:style="{ borderLeftColor: item.color }"
>
<span class="legend-color" :style="{ backgroundColor: item.color }"></span> <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
<span class="legend-label">{{ item.label }}</span> <span class="legend-label">{{ item.label }}</span>
</div> </div>
</div> </div>
<div ref="ganttContainerRef" class="schedule-gantt-container" :style="{ height }"></div>
</div>
<div class="schedule-detail-panel">
<div class="schedule-detail-title">{{ t('GanttChart.GanttPanel.detailTitle') }}</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="t('GanttChart.GanttPanel.deviceNameLabel')">{{ activePreviewDevice.deviceName }}</el-descriptions-item> <el-descriptions-item :label="t('GanttChart.GanttPanel.deviceNameLabel')">{{ activePreviewDevice.deviceName
<el-descriptions-item :label="t('GanttChart.GanttPanel.deviceIdLabel')">{{ activePreviewDevice.deviceId }}</el-descriptions-item> }}</el-descriptions-item>
<el-descriptions-item :label="t('GanttChart.GanttPanel.capacityLabel')">{{ activePreviewDevice.ratedCapacity ?? '-' }}</el-descriptions-item> <el-descriptions-item :label="t('GanttChart.GanttPanel.deviceIdLabel')">{{ activePreviewDevice.deviceId
<el-descriptions-item v-if="'dailyAverageValue' in activePreviewDevice" :label="t('GanttChart.GanttPanel.dailyAvgLabel')">{{ activePreviewDevice.dailyAverageValue ?? '-' }}</el-descriptions-item> }}</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="t('GanttChart.GanttPanel.capacityLabel')">{{ activePreviewDevice.ratedCapacity
<el-descriptions-item :label="t('GanttChart.GanttPanel.planCountLabel')">{{ activePreviewDevice.plans?.length ?? 0 }}</el-descriptions-item> ?? '-' }}</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="t('GanttChart.GanttPanel.dataCollectionCapacityLabel')">{{
activePreviewDevice.dataCollectionCapacity ?? '-' }}</el-descriptions-item>
<el-descriptions-item :label="t('GanttChart.GanttPanel.planCountLabel')">{{ activePreviewDevice.plans?.length
?? 0 }}</el-descriptions-item>
</el-descriptions> </el-descriptions>
<div class="schedule-plan-list-title">{{ t('GanttChart.GanttPanel.planDetailTitle') }}</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 ?? [])"
:key="`${activePreviewDevice?.deviceId}-${plan.taskDetailId}-${index}`" :key="`${activePreviewDevice?.deviceId}-${plan.taskDetailId}-${index}`"
:class="['schedule-plan-item', { 'schedule-plan-item-active': plan.sourceType === 'CURRENT' }]" :class="['schedule-plan-item', { 'schedule-plan-item-active': plan.sourceType === 'CURRENT' }]">
>
<div class="schedule-plan-item-head"> <div class="schedule-plan-item-head">
<span class="schedule-plan-item-title">{{ plan.productCode ?? '-' }} / {{ plan.productName ?? '-' }}</span> <span class="schedule-plan-item-title">{{ plan.productCode ?? '-' }} / {{ plan.productName ?? '-'
<span }}</span>
v-if="plan.planStatus && PLAN_STATUS_COLOR_MAP[plan.planStatus]" <span v-if="plan.planStatus && PLAN_STATUS_COLOR_MAP[plan.planStatus]" class="plan-status-tag"
class="plan-status-tag" :style="{ backgroundColor: PLAN_STATUS_COLOR_MAP[plan.planStatus].color }">
:style="{ backgroundColor: PLAN_STATUS_COLOR_MAP[plan.planStatus].color }"
>
{{ PLAN_STATUS_COLOR_MAP[plan.planStatus].label }} {{ PLAN_STATUS_COLOR_MAP[plan.planStatus].label }}
</span> </span>
</div> </div>
@ -53,21 +56,18 @@
</div> </div>
</div> </div>
<el-dialog v-if="props.editable" v-model="taskAdjustDialogVisible" :title="t('GanttChart.GanttPanel.adjustTaskTitle')" 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="t('GanttChart.GanttPanel.deviceLabel')"> <el-form-item :label="t('GanttChart.GanttPanel.deviceLabel')">
<el-select v-model="taskAdjustForm.deviceTaskId" :placeholder="t('GanttChart.GanttPanel.devicePlaceholder')" 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" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="t('GanttChart.GanttPanel.startDateLabel')"> <el-form-item :label="t('GanttChart.GanttPanel.startDateLabel')">
<el-date-picker <el-date-picker v-model="taskAdjustForm.startDate" type="date" value-format="YYYY-MM-DD"
v-model="taskAdjustForm.startDate" :placeholder="t('GanttChart.GanttPanel.startDatePlaceholder')" class="!w-full" />
type="date"
value-format="YYYY-MM-DD"
:placeholder="t('GanttChart.GanttPanel.startDatePlaceholder')"
class="!w-full"
/>
</el-form-item> </el-form-item>
<el-form-item :label="t('GanttChart.GanttPanel.durationLabel')"> <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" />
@ -75,25 +75,23 @@
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="taskAdjustDialogVisible = false">{{ t('GanttChart.GanttPanel.buttonCancel') }}</el-button> <el-button @click="taskAdjustDialogVisible = false">{{ t('GanttChart.GanttPanel.buttonCancel') }}</el-button>
<el-button type="primary" @click="handleTaskAdjustSubmit">{{ t('GanttChart.GanttPanel.buttonConfirm') }}</el-button> <el-button type="primary" @click="handleTaskAdjustSubmit">{{ t('GanttChart.GanttPanel.buttonConfirm')
}}</el-button>
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-if="props.editable" v-model="startDateEditorVisible" :title="t('GanttChart.GanttPanel.editStartDateTitle')" 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="t('GanttChart.GanttPanel.startTimeLabel')"> <el-form-item :label="t('GanttChart.GanttPanel.startTimeLabel')">
<el-date-picker <el-date-picker v-model="startDateEditorValue" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
v-model="startDateEditorValue" :placeholder="t('GanttChart.GanttPanel.startTimePlaceholder')" class="!w-full" />
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
:placeholder="t('GanttChart.GanttPanel.startTimePlaceholder')"
class="!w-full"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="startDateEditorVisible = false">{{ t('GanttChart.GanttPanel.buttonCancel') }}</el-button> <el-button @click="startDateEditorVisible = false">{{ t('GanttChart.GanttPanel.buttonCancel') }}</el-button>
<el-button type="primary" @click="handleStartDateEditorSubmit">{{ t('GanttChart.GanttPanel.buttonConfirm') }}</el-button> <el-button type="primary" @click="handleStartDateEditorSubmit">{{ t('GanttChart.GanttPanel.buttonConfirm')
}}</el-button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
@ -702,20 +700,29 @@ const initGanttPreview = () => {
return return
} }
gantt.plugins({ tooltip: true, inline_edit: true,undo: true }) // 加载甘特图插件
gantt.config.readonly = !props.editable gantt.plugins({ tooltip: true, inline_edit: true, undo: true })
gantt.config.drag_move = !!props.editable
gantt.config.drag_links = false // 编辑相关配置
gantt.config.drag_progress = false gantt.config.readonly = !props.editable // 是否只读模式
gantt.config.drag_resize = !!props.editable gantt.config.drag_move = !!props.editable // 是否允许拖动任务
gantt.config.order_branch = !!props.editable gantt.config.drag_links = false // 是否允许拖动链接
gantt.config.order_branch_free = !!props.editable gantt.config.drag_progress = false // 是否允许拖动进度
gantt.config.details_on_dblclick = false gantt.config.drag_resize = !!props.editable // 是否允许调整任务大小
gantt.config.show_progress = false gantt.config.order_branch = !!props.editable // 是否允许分支内排序
gantt.config.row_height = 40 gantt.config.order_branch_free = !!props.editable // 是否允许跨分支排序
gantt.config.scale_height = 44 gantt.config.details_on_dblclick = false // 双击是否显示详情
gantt.config.xml_date = '%Y-%m-%d %H:%i' gantt.config.show_progress = false // 是否显示进度条
gantt.config.task_height = 24
// 布局相关配置
gantt.config.row_height = 48 // 任务行高度
gantt.config.scale_height = 70 // 时间轴高度
gantt.config.xml_date = '%Y-%m-%d %H:%i' // 日期格式
gantt.config.task_height = 36 // 任务条高度
gantt.config.min_column_width = 80 // 最小列宽
gantt.config.column_width = 90 // 默认列宽
gantt.config.bar_height = 34 // 任务条实际高度
gantt.config.resize_step = 15 // 调整步长
gantt.config.columns = [ gantt.config.columns = [
{ {
@ -760,7 +767,7 @@ const initGanttPreview = () => {
gantt.templates.tooltip_text = (start, end, task: any) => buildTaskTooltipHtml(task, start, end) gantt.templates.tooltip_text = (start, end, task: any) => buildTaskTooltipHtml(task, start, end)
gantt.templates.task_class = (_start, _end, task: any) => { gantt.templates.task_class = (_start, _end, task: any) => {
if (!task?._planData) return '' if (!task?._planData) return ''
// 当 editable 为 false 时，根据 planStatus 显示对应的颜色 // 当 editable 为 false 时，根据 planStatus 显示对应的颜色
if (!props.editable) { if (!props.editable) {
const planStatus = task._planData?.planStatus const planStatus = task._planData?.planStatus
@ -780,7 +787,7 @@ const initGanttPreview = () => {
} }
return statusMap[planStatus] || 'schedule-plan-task-default' return statusMap[planStatus] || 'schedule-plan-task-default'
} }
// 当 editable 为 true 时，使用原来的逻辑 // 当 editable 为 true 时，使用原来的逻辑
const sourceType = String(task?._planData?.sourceType ?? '').toUpperCase() const sourceType = String(task?._planData?.sourceType ?? '').toUpperCase()
return sourceType === 'HISTORY' ? 'schedule-plan-task-history' : 'schedule-plan-task' return sourceType === 'HISTORY' ? 'schedule-plan-task-history' : 'schedule-plan-task'
@ -794,12 +801,12 @@ const initGanttPreview = () => {
const ganttData = buildPreviewGanttData(previewScheduleList.value) const ganttData = buildPreviewGanttData(previewScheduleList.value)
gantt.parse(ganttData) gantt.parse(ganttData)
// 强制刷新所有任务的样式，确保颜色正确应用 // 强制刷新所有任务的样式，确保颜色正确应用
gantt.eachTask((task: any) => { gantt.eachTask((task: any) => {
gantt.refreshTask(task.id) gantt.refreshTask(task.id)
}) })
initTaskTooltips() initTaskTooltips()
if (ganttData.data.length) { if (ganttData.data.length) {
@ -858,7 +865,7 @@ const initGanttPreview = () => {
startDateEditorTaskId.value = taskId startDateEditorTaskId.value = taskId
startDateEditorValue.value = dayjs(task.start_date).format('YYYY-MM-DD HH:mm:ss') startDateEditorValue.value = dayjs(task.start_date).format('YYYY-MM-DD HH:mm:ss')
startDateEditorVisible.value = true startDateEditorVisible.value = true
} catch {} } catch { }
} }
ganttContainerRef.value.addEventListener('click', gridClickHandler, true) ganttContainerRef.value.addEventListener('click', gridClickHandler, true)
tooltipCleanupFns.value.push(() => { tooltipCleanupFns.value.push(() => {
@ -988,11 +995,20 @@ onBeforeUnmount(() => {
.schedule-preview-wrap { .schedule-preview-wrap {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%;
gap: 12px; gap: 12px;
overflow: hidden;
} }
.schedule-gantt-container { .gantt-main-area {
flex: 1; flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.schedule-gantt-container {
min-width: 0; min-width: 0;
border: 1px solid var(--el-border-color); border: 1px solid var(--el-border-color);
border-radius: 4px; border-radius: 4px;
@ -1010,9 +1026,7 @@ onBeforeUnmount(() => {
} }
.schedule-status-legend { .schedule-status-legend {
display: grid; display: flex;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 8px;
margin-bottom: 12px; margin-bottom: 12px;
padding: 8px; padding: 8px;
background: var(--el-fill-color-light); background: var(--el-fill-color-light);
@ -1026,6 +1040,7 @@ onBeforeUnmount(() => {
padding: 4px 8px; padding: 4px 8px;
border-left: 3px solid; border-left: 3px solid;
font-size: 12px; font-size: 12px;
margin-right: 20px
} }
.legend-color { .legend-color {
@ -1052,15 +1067,18 @@ onBeforeUnmount(() => {
overflow: auto; overflow: auto;
max-height: 55vh; max-height: 55vh;
border: 1px solid var(--el-border-color); border: 1px solid var(--el-border-color);
border-radius: 4px; border-radius: 8px;
padding: 8px; padding: 8px;
} }
.schedule-plan-item { .schedule-plan-item {
padding: 8px; padding: 8px;
border-radius: 4px; border-radius: 8px;
background: var(--el-fill-color-light); background: var(--el-fill-color-light);
font-size: 14px;
line-height: 1.4;
} }
.schedule-plan-item-head { .schedule-plan-item-head {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1068,55 +1086,135 @@ onBeforeUnmount(() => {
gap: 8px; gap: 8px;
margin-bottom: 4px; margin-bottom: 4px;
} }
.schedule-plan-item-title { .schedule-plan-item-title {
font-weight: 600; font-weight: 600;
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 16px;
} }
.plan-status-tag { .plan-status-tag {
display: inline-block; display: inline-block;
padding: 2px 8px; padding: 4px 8px;
border-radius: 2px; border-radius: 4px;
font-size: 12px; font-size: 10px;
color: #ffffff; color: #ffffff;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
} }
.schedule-plan-item-active { .schedule-plan-item-active {
border: 1px solid var(--el-color-success-light-5); border: 1px solid var(--el-color-success-light-5);
background: var(--el-color-success-light-9); background: var(--el-color-success-light-9);
} }
.schedule-plan-item + .schedule-plan-item { .schedule-plan-item+.schedule-plan-item {
margin-top: 8px; margin-top: 8px;
} }
.schedule-gantt-container :deep(.gantt_grid_data .gantt_row) { .schedule-gantt-container :deep(.gantt_grid_data .gantt_row) {
font-weight: 600; font-weight: 600;
background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%);
border-bottom: 1px solid #e2e8f0;
height: 48px;
display: flex;
align-items: flex-end;
}
.schedule-gantt-container :deep(.gantt_grid_data .gantt_row:nth-child(even)) {
background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
}
.schedule-gantt-container :deep(.gantt_grid_data .gantt_row:hover) {
background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%) !important;
} }
.schedule-gantt-container :deep(.gantt_grid_data .gantt_cell) { .schedule-gantt-container :deep(.gantt_grid_data .gantt_cell) {
text-overflow: clip; text-overflow: clip;
font-size: 13px;
color: #4b5563;
border-right: 1px solid #e5e7eb;
padding: 0 12px;
line-height: 36px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.schedule-gantt-container :deep(.gantt_scale_line) {
border-bottom: 2px solid #d1d5db;
background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
display: flex;
align-items: center;
margin-bottom: 2px;
}
.schedule-gantt-container :deep(.gantt_scale_line:last-child) {
margin-bottom: 0;
border-bottom: 1px solid #e5e7eb;
}
.schedule-gantt-container :deep(.gantt_scale_cell) {
font-size: 14px;
font-weight: 600;
color: #374151;
border-right: 1px solid #e5e7eb;
padding: 0 8px;
text-align: center;
background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
display: flex;
align-items: center;
justify-content: center;
height: 35px;
}
.schedule-gantt-container :deep(.gantt_scale_line:last-child .gantt_scale_cell) {
font-size: 13px;
font-weight: 500;
color: #6b7280;
background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
border-bottom: 1px solid #e5e7eb;
height: 35px;
}
.schedule-gantt-container :deep(.gantt_task_bg) {
background: #ffffff;
} }
.schedule-gantt-container :deep(.gantt_task_bg .gantt_task_cell) { .schedule-gantt-container :deep(.gantt_task_bg .gantt_task_cell) {
border-right-width: 2px; border-right: 1px solid #f3f4f6;
border-bottom: 1px solid #f3f4f6;
} }
.schedule-gantt-container :deep(.gantt-inline-editor-trigger) { .schedule-gantt-container :deep(.gantt_task_bg .gantt_task_row:nth-child(even)) {
display: inline-block; background: #f9fafb;
width: 100%; }
overflow: visible;
cursor: pointer; .schedule-gantt-container :deep(.gantt_task_bg .gantt_task_row:hover) {
background: #f3f4f6 !important;
}
.schedule-gantt-container :deep(.gantt_task_line) {
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border: none;
}
.schedule-gantt-container :deep(.gantt_task_content) {
font-size: 12px;
font-weight: 500;
color: #ffffff;
padding: 0 12px;
line-height: 32px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task) {
background: #67c23a; background: #67c23a;
border-color: #67c23a;
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task .gantt_task_content) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task .gantt_task_content) {
@ -1125,8 +1223,7 @@ onBeforeUnmount(() => {
/* 已排产状态 - 蓝色 */ /* 已排产状态 - 蓝色 */
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-1) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-1) {
background: #409eff !important; background: #3b82f6 !important;
border-color: #409eff !important;
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-1 .gantt_task_content) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-1 .gantt_task_content) {
@ -1135,8 +1232,7 @@ onBeforeUnmount(() => {
/* 已开工状态 - 绿色 */ /* 已开工状态 - 绿色 */
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-8) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-8) {
background: #67c23a !important; background: #10b981 !important;
border-color: #67c23a !important;
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-8 .gantt_task_content) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-8 .gantt_task_content) {
@ -1145,8 +1241,7 @@ onBeforeUnmount(() => {
/* 暂停状态 - 橙色 */ /* 暂停状态 - 橙色 */
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-3) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-3) {
background: #e6a23c !important; background: #f59e0b !important;
border-color: #e6a23c !important;
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-3 .gantt_task_content) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-3 .gantt_task_content) {
@ -1155,8 +1250,7 @@ onBeforeUnmount(() => {
/* 待入库状态 - 红色 */ /* 待入库状态 - 红色 */
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-4) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-4) {
background: #f56c6c !important; background: #ef4444 !important;
border-color: #f56c6c !important;
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-4 .gantt_task_content) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-4 .gantt_task_content) {
@ -1165,8 +1259,7 @@ onBeforeUnmount(() => {
/* 已入库状态 - 紫色 */ /* 已入库状态 - 紫色 */
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-5) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-5) {
background: #8e7cc3 !important; background: #8b5cf6 !important;
border-color: #8e7cc3 !important;
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-5 .gantt_task_content) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-5 .gantt_task_content) {
@ -1175,8 +1268,7 @@ onBeforeUnmount(() => {
/* 其他状态 - 深灰 */ /* 其他状态 - 深灰 */
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-2) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-2) {
background: #606266 !important; background: #4b5563 !important;
border-color: #606266 !important;
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-2 .gantt_task_content) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-status-2 .gantt_task_content) {
@ -1185,17 +1277,17 @@ onBeforeUnmount(() => {
/* 默认状态 */ /* 默认状态 */
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-default) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-default) {
background: #909399; background: #6b7280;
border-color: #909399;
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-default .gantt_task_content) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-default .gantt_task_content) {
color: #ffffff; color: #ffffff;
} }
/* 历史任务 */
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-history) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-history) {
background: #909399; background: #9ca3af;
border-color: #909399; opacity: 0.7;
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-history .gantt_task_content) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-history .gantt_task_content) {
@ -1204,5 +1296,28 @@ onBeforeUnmount(() => {
:deep(.gantt_tooltip) { :deep(.gantt_tooltip) {
z-index: 5000 !important; z-index: 5000 !important;
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid #e5e7eb !important;
border-radius: 8px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
padding: 12px !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
:deep(.gantt_tooltip) div {
margin-bottom: 6px !important;
}
:deep(.gantt_tooltip) div:last-child {
margin-bottom: 0 !important;
}
:deep(.gantt_tree_content) {
line-height: 50px;
}
:deep(.gantt_tree_icon.gantt_close:before) {
margin-top: 5px;
} }
</style> </style>

147
src/views/mes/tasksummary/components/ScheduleGanttPanelEditable.vue
Unescape Escape View File

@ -751,19 +751,27 @@ const initGanttPreview = () => {
} }
gantt.plugins({ tooltip: true, inline_edit: true,undo: true }) gantt.plugins({ tooltip: true, inline_edit: true,undo: true })
gantt.config.readonly = false
gantt.config.drag_move = true // 编辑相关配置
gantt.config.drag_links = false gantt.config.readonly = false // 是否只读模式
gantt.config.drag_progress = false gantt.config.drag_move = true // 是否允许拖动任务
gantt.config.drag_resize = true gantt.config.drag_links = false // 是否允许拖动链接
gantt.config.order_branch = true gantt.config.drag_progress = false // 是否允许拖动进度
gantt.config.order_branch_free = true gantt.config.drag_resize = true // 是否允许调整任务大小
gantt.config.details_on_dblclick = false gantt.config.order_branch = true // 是否允许分支内排序
gantt.config.show_progress = false gantt.config.order_branch_free = true // 是否允许跨分支排序
gantt.config.row_height = 40 gantt.config.details_on_dblclick = false // 双击是否显示详情
gantt.config.scale_height = 44 gantt.config.show_progress = false // 是否显示进度条
gantt.config.xml_date = '%Y-%m-%d %H:%i'
gantt.config.task_height = 24 // 布局相关配置
gantt.config.row_height = 48 // 任务行高度
gantt.config.scale_height = 70 // 时间轴高度
gantt.config.xml_date = '%Y-%m-%d %H:%i' // 日期格式
gantt.config.task_height = 36 // 任务条高度
gantt.config.min_column_width = 80 // 最小列宽
gantt.config.column_width = 90 // 默认列宽
gantt.config.bar_height = 34 // 任务条实际高度
gantt.config.resize_step = 15 // 调整步长
gantt.config.columns = [ gantt.config.columns = [
{ {
@ -1054,17 +1062,102 @@ onBeforeUnmount(() => {
.schedule-gantt-container :deep(.gantt_grid_data .gantt_row) { .schedule-gantt-container :deep(.gantt_grid_data .gantt_row) {
font-weight: 600; font-weight: 600;
background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%);
border-bottom: 1px solid #e2e8f0;
height: 48px;
display: flex;
align-items: flex-end;
}
.schedule-gantt-container :deep(.gantt_grid_data .gantt_row:nth-child(even)) {
background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
}
.schedule-gantt-container :deep(.gantt_grid_data .gantt_row:hover) {
background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%) !important;
} }
.schedule-gantt-container :deep(.gantt_grid_data .gantt_cell) { .schedule-gantt-container :deep(.gantt_grid_data .gantt_cell) {
text-overflow: clip; text-overflow: clip;
font-size: 13px;
color: #4b5563;
border-right: 1px solid #e5e7eb;
padding: 0 12px;
line-height: 36px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.schedule-gantt-container :deep(.gantt_scale_line) {
border-bottom: 2px solid #d1d5db;
background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
display: flex;
align-items: center;
margin-bottom: 2px;
}
.schedule-gantt-container :deep(.gantt_scale_line:last-child) {
margin-bottom: 0;
border-bottom: 1px solid #e5e7eb;
}
.schedule-gantt-container :deep(.gantt_scale_cell) {
font-size: 14px;
font-weight: 600;
color: #374151;
border-right: 1px solid #e5e7eb;
padding: 0 8px;
text-align: center;
background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
display: flex;
align-items: center;
justify-content: center;
height: 35px;
}
.schedule-gantt-container :deep(.gantt_scale_line:last-child .gantt_scale_cell) {
font-size: 13px;
font-weight: 500;
color: #6b7280;
background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
border-bottom: 1px solid #e5e7eb;
height: 35px;
}
.schedule-gantt-container :deep(.gantt_task_bg) {
background: #ffffff;
} }
.schedule-gantt-container :deep(.gantt_task_bg .gantt_task_cell) { .schedule-gantt-container :deep(.gantt_task_bg .gantt_task_cell) {
border-right-width: 2px; border-right: 1px solid #f3f4f6;
border-bottom: 1px solid #f3f4f6;
}
.schedule-gantt-container :deep(.gantt_task_bg .gantt_task_row:nth-child(even)) {
background: #f9fafb;
}
.schedule-gantt-container :deep(.gantt_task_bg .gantt_task_row:hover) {
background: #f3f4f6 !important;
}
.schedule-gantt-container :deep(.gantt_task_line) {
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border: none;
} }
.schedule-gantt-container :deep(.gantt-inline-editor-trigger) { .schedule-gantt-container :deep(.gantt_task_content) {
font-size: 12px;
font-weight: 500;
color: #ffffff;
padding: 0 12px;
line-height: 32px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.schedule-gantt-container :deep(.gantt_inline-editor-trigger) {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
overflow: visible; overflow: visible;
@ -1073,7 +1166,6 @@ onBeforeUnmount(() => {
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task) {
background: #67c23a; background: #67c23a;
border-color: #67c23a;
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task .gantt_task_content) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task .gantt_task_content) {
@ -1081,8 +1173,8 @@ onBeforeUnmount(() => {
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-history) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-history) {
background: #909399; background: #9ca3af;
border-color: #909399; opacity: 0.7;
} }
.schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-history .gantt_task_content) { .schedule-gantt-container :deep(.gantt_task_line.schedule-plan-task-history .gantt_task_content) {
@ -1091,5 +1183,24 @@ onBeforeUnmount(() => {
:deep(.gantt_tooltip) { :deep(.gantt_tooltip) {
z-index: 5000 !important; z-index: 5000 !important;
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid #e5e7eb !important;
border-radius: 8px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
padding: 12px !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
:deep(.gantt_tooltip) div {
margin-bottom: 6px !important;
}
:deep(.gantt_tooltip) div:last-child {
margin-bottom: 0 !important;
}
:deep(.gantt_tree_content) {
line-height: 50px;
} }
</style> </style>

18453
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save