1.存货绑定工艺路线弹出框显示默认选中的2.gantt研究

小小儁爺

2026-01-22 492411a8891687156f7d9fda103f144f23eb1bf6

 src/views/gantt/index.vue

@@ -2,10 +2,33 @@
  <div style="padding: 0 10px">

    <div style="padding: 10px 0;display: flex;">
      <el-button type="primary" size="mini" @click="ganttUndo">回退拖动操作</el-button>
      <el-button type="primary" size="mini" @click="ganttRedo">前进拖动操作</el-button>
      <el-button type="primary" size="mini" @click="ganttZoomIn">放大</el-button>
      <el-button type="primary" size="mini" @click="ganttZoomOut">缩小</el-button>
      <el-select
        v-model="scaleValue"
        size="mini"
        placeholder="请选择"
        @change="val=>changeTimeScale(val,true)"
      >
        <el-option
          v-for="item in scaleArr"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
      <el-select
        v-model="priorityMethod"
        size="mini"
        style="margin-left: 10px;"
        placeholder="请选择"
        @change="priorityMethodChange"
      >
        <el-option
          v-for="item in priorityMethodArr"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
      <el-date-picker
        v-model="ganttDateRange"
        style="margin-left: 10px;"
@@ -13,6 +36,7 @@
        value-format="yyyy-MM-dd"
        type="daterange"
        :clearable="false"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
@@ -24,36 +48,87 @@
      <el-button size="mini" @click="handleClearSelection">
        清空复选框选择
      </el-button>

      <el-button size="mini" type="primary" @click="prepareArrange">
        预排
      </el-button>
      <el-button size="mini" disabled>
        预排进度：{{ canArrangeNumber }}/{{ needArrangeNumber }}
      </el-button>

    </div>

    <div id="gantt_here" style="width:100%; height:90vh;" />
    <div id="gantt_here" style="width:100%; height:calc(90vh - 50px);" />

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalTasks"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { gantt } from '@/components/dhtmlxGantt'
import '@/components/dhtmlxGantt/codebase/dhtmlxgantt.css'
import { handleDateReduceOneDay } from '@/utils/global'
import { handleDateReduceOneDay, handleDatetime, handleDatetime2 } from '@/utils/global'
import { nanoid } from 'nanoid'

export default {
  data() {
    return {
      value: 'default',
      ganttDateRange: ['2025-04-01', '2025-05-10'],
      selectedIds: []
      scaleArr: [
        { code: '30min', name: '30min' },
        { code: '60min', name: '60min' },
        { code: '240min', name: '240min' },
        { code: '360min', name: '360min' }
      ],
      scaleValue: '240min',
      ganttDateRange: ['2026-01-22', '2026-01-25'], // '2026-01-20', '2026-01-25'
      selectedIds: [],
      // 分页相关数据
      currentPage: 1,
      pageSize: 100,
      totalTasks: 0,
      allTasks: [], // 存储所有任务数据
      paginatedTasks: [], // 当前页的任务数据

      fivePeriodsTimeName: ['OneStartDate', 'TwoStartDate', 'ThreeStartDate', 'FourStartDate', 'FiveStartDate'], // 五个时间段的键名
      needArrangeNumber: 5000, // 假设需要排产数量5000
      canArrangeNumber: 0, // 能排数量默认为 0
      priorityMethod: 'device', // device 设备   time  时间
      priorityMethodArr: [
        { code: 'device', name: '设备优先' },
        { code: 'time', name: '时间优先' }
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now() - 24 * 60 * 60 * 1000
        }
      }
    }
  },
  mounted() {
    // 初始化甘特图配置
    this.initGantt()

    // 改变日期范围配置
    this.ganttDateRangeChange(this.ganttDateRange)
    this.init()

    // 然后加载任务数据（会自动渲染当前页）
    // this.loadTasks()
  },
  methods: {

    init() {
      // gantt.clearAll()

    initGantt() {
      gantt.plugins({
        auto_scheduling: true,
        critical_path: true,
        drag_timeline: true,
        grouping: true,
@@ -63,183 +138,48 @@
        tooltip: true,
        undo: true
      })
      gantt.config.multiselect = true // 开启多任务选择
      /* ↓↓↓ Auto-scheduling configuration ↓↓↓ */
      gantt.config.auto_scheduling = true

      function renderDiv(task, date, className) {
        const el = document.createElement('div')
        el.className = className
        const sizes = gantt.getTaskPosition(task, date)
        el.style.left = sizes.left + 'px'
        el.style.top = sizes.top + 'px'
        return el
      }

      gantt.attachEvent('onGanttReady', function() {
        // gantt.addTaskLayer(function draw_deadline(task) {
        //   const constraintType = gantt.getConstraintType(task);
        //   const types = gantt.config.constraint_types;
        //   if (constraintType != types.ASAP && constraintType != types.ALAP && task.constraint_date) {
        //     const dates = gantt.getConstraintLimitations(task);
        //
        //     const els = document.createElement("div");
        //
        //     if (dates.earliestStart) {
        //       els.appendChild(renderDiv(task, dates.earliestStart, 'constraint-marker earliest-start'));
        //     }
        //
        //     if (dates.latestEnd) {
        //       els.appendChild(renderDiv(task, dates.latestEnd, 'constraint-marker latest-end'));
        //     }
        //
        //     els.title = gantt.locale.labels[constraintType] + " " + gantt.templates.task_date(task.constraint_date);
        //
        //     if (els.children.length)
        //       return els;
        //   }
        //   return false;
        // });
      })
      /* ↑↑↑ Auto-scheduling configuration ↑↑↑ */

      /* ↓↓↓ Group configuration ↓↓↓ */
      gantt.serverList('task_priority', [
        { key: 1, label: '高' },
        { key: 2, label: '中等' },
        { key: 3, label: '低' }
      ])

      gantt.serverList('task_status', [
        { key: 1, label: 'Planning' },
        { key: 2, label: 'Not started' },
        { key: 3, label: 'In Progress' },
        { key: 4, label: 'Complete' }
      ])

      gantt.i18n.setLocale('cn')
      gantt.config.multiselect = true // 开启多任务选择
      gantt.config.show_links = false // 不显示连接线

      function byId(list, id) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].key == id) {
            return list[i].label || ''
          }
        }
        return ''
      }
      // 不再对齐时间轴刻度（比如天格子），而是按“小时”对齐
      gantt.config.round_dnd_dates = false
      // 最小步长还是 1 小时，但你已经从“天格子”变成“小时格子”了
      // gantt.config.time_step = 60 // 60 分钟 = 1 小时
      gantt.config.time_step = 1 //  1分钟

      /* ↑↑↑ Group configuration ↑↑↑ */
      gantt.config.row_height = 32 // 行高
      gantt.config.bar_height = 20 // bar高
      gantt.config.xml_date = '%Y-%m-%d %H:%i' // gantt的日期格式
      gantt.config.drag_progress = false // 禁止通过拖动进度条改变任务进度
      gantt.config.readonly = true // 只读模式

      /* ↓↓↓ Zoom configuration ↓↓↓ */
      const zoomConfig = {
        levels: [
          {
            name: 'hour',
            scale_height: 27,
            min_column_width: 50,
            scales: [
              { unit: 'day', format: '%Y年%M%d号' },
              { unit: 'hour', format: '%H时' }
            ]
          },
          {
            name: 'day',
            scale_height: 27,
            min_column_width: 80,
            scales: [
              // { unit: 'day', step: 1, format: '%d %M' }
              { unit: 'day', step: 1, format: '%M%d号' }
            ]
          },
          {
            name: 'week',
            scale_height: 50,
            min_column_width: 70,
            scales: [
              // {
              //   unit: 'week', step: 1, format: function(date) {
              //     const dateToStr = gantt.date.date_to_str('%d %M')
              //     const endDate = gantt.date.add(date, -6, 'day')
              //     const weekNum = gantt.date.date_to_str('%W')(date)
              //     return '第' + weekNum + '周, ' + dateToStr(date) + ' - ' + dateToStr(endDate)
              //   }
              // },
              // %M
              { unit: 'week', format: '%Y年第%W周' },
              { unit: 'day', step: 1, format: '%M%d号' }
              // { unit: 'day', step: 1, format: '%j %D' }
              // { unit: 'day', step: 1, format: '星期%D' }
            ]
          },
          {
            name: 'month',
            scale_height: 50,
            min_column_width: 120,
            scales: [
              // { unit: 'month', format: '%Y年%F' },
              { unit: 'month', format: '%Y年%M' },
              { unit: 'week', format: '第%W周' }
            ]
          },
          {
            name: 'quarter',
            height: 50,
            min_column_width: 90,
            scales: [
              // {
              //   unit: 'quarter', step: 1, format: function(date) {
              //     const dateToStr = gantt.date.date_to_str('%M')
              //     const endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day')
              //     return dateToStr(date) + ' - ' + dateToStr(endDate)
              //   }
              // },
              { unit: 'month', step: 1, format: '%Y年%M' }
            ]
          },
          {
            name: 'year',
            scale_height: 50,
            min_column_width: 30,
            scales: [
              { unit: 'year', step: 1, format: '%Y年' }

            ]
          }
        ],
        useKey: 'ctrlKey',
        trigger: 'wheel',
        element: function() {
          return gantt.$root.querySelector('.gantt_task')
        }
      }

      gantt.ext.zoom.init(zoomConfig)
      gantt.ext.zoom.setLevel('week')
      /* ↑↑↑ Zoom configuration ↑↑↑ */
      // 刻度值改变
      this.changeTimeScale()

      // 是否是工作时间
      /* ↓↓↓ Working Time configuration ↓↓↓ */
      gantt.templates.scale_cell_class = function(date) {
        if (!gantt.isWorkTime(date)) {
          return 'weekend'
        }
      }

      gantt.templates.timeline_cell_class = function(item, date) {
        if (!gantt.isWorkTime({ date: date, task: item })) {
          return 'weekend'
        }
      }

      gantt.config.work_time = true

      gantt.addCalendar({
        id: 'custom1',
        worktime: {
          hours: ['8:00-12:30', '13:00-17:30'], // global work hours for weekdays
          days: [0, 1, 1, 1, 1, 1, 1]
        }
      })
      // gantt.templates.scale_cell_class = function(date) {
      //   if (!gantt.isWorkTime(date)) {
      //     return 'weekend'
      //   }
      // }
      //
      // gantt.templates.timeline_cell_class = function(item, date) {
      //   if (!gantt.isWorkTime({ date: date, task: item })) {
      //     return 'weekend'
      //   }
      // }
      //
      // gantt.config.work_time = true
      //
      // gantt.addCalendar({
      //   id: 'customCalendar1',
      //   worktime: {
      //     hours: ['00:00-24:00'], // global work hours for weekdays
      //     days: [1, 1, 1, 1, 1, 1, 1]
      //   }
      // })

      // gantt.addCalendar({
      //   id: 'custom2',
@@ -248,15 +188,12 @@
      // })
      /* ↑↑↑ Working Time configuration ↑↑↑ */

      // 甘特图列参数设置
      /* ↓↓↓ Grid Columns configuration ↓↓↓ */

      gantt.config.reorder_grid_columns = true

      const textEditor = { type: 'text', map_to: 'text' }
      const startDateEditor = { type: 'date', map_to: 'start_date' }
      const durationEditor = { type: 'number', map_to: 'duration', min: 0, max: 100 }

      // 甘特图列名称
      const durationEditor = { type: 'number', map_to: 'duration', min: 1, max: 100 }
      gantt.config.columns = [
        {
          name: 'checked',
@@ -271,14 +208,23 @@
            return `<input type="checkbox" class="taskCheckBox" data-action="check-row" ${checked} />`
          }
        },
        { name: 'wbs', label: '节点', width: 80, template: gantt.getWBSCode },
        { name: 'text', tree: true, label: '任务名称', width: 200, resize: true, editor: textEditor },
        // { name: 'wbs', label: '节点', width: 80, template: gantt.getWBSCode },
        { name: 'text', tree: true, align: 'center', label: '任务名称', width: 240, resize: true, editor: textEditor },
        { name: 'saleOrder', align: 'center', label: '销售订单', width: 100, resize: true },
        { name: 'partName', align: 'center', label: '产品名称', width: 80, resize: true },
        { name: 'partCode', align: 'center', label: '产品编码', width: 80, resize: true },
        {
          name: 'progress', align: 'center', label: '进度', width: 120, resize: true, template: function(task) {
            return `<input type="range"  onmousedown="event.preventDefault()" onmouseup="event.preventDefault()" id="taskRange" value="${task.progress * 100}"/> ${task.progress * 100}%`
            // return `<el-progress :percentage='${task.progress * 100}'></el-progress> ${task.progress * 100}%`
          }
        },
        { name: 'start_date', align: 'center', label: '开始日期', width: 80, resize: true, editor: startDateEditor },
        {
          name: 'duration',
          width: 60,
          align: 'center',
          label: '工期(天)',
          label: '时长(分钟)',
          resize: true,
          editor: durationEditor,
          template: function(task) {
@@ -286,533 +232,52 @@
            // return (task.duration || 0) + 1 // 在当前duration的基础上加1
            return task.duration
          }
        },
        {
          name: 'owner', align: 'center', width: 75, label: '负责人', template: function(task) {
            if (task.type == gantt.config.types.project) {
              return ''
            }

            const store = gantt.getDatastore('resource')
            const assignments = task[gantt.config.resource_property]

            if (!assignments || !assignments.length) {
              return 'Unassigned'
            }

            if (assignments.length == 1) {
              return store.getItem(assignments[0].resource_id).text
            }

            let result = ''
            assignments.forEach(function(assignment) {
              const owner = store.getItem(assignment.resource_id)
              if (!owner) {
                return
              }
              result += '<div class=\'owner-label\' title=\'' + owner.text + '\'>' + owner.text.substr(0, 1) + '</div>'
            })

            return result
          },
          resize: true
        },
        {
          name: 'priority', width: 60, label: '优先级', align: 'center', resize: true, template: function(task) {
            return byId(gantt.serverList('task_priority'), task.priority)
          }
        },
        { name: 'add', width: 44 }
        }
        // { name: 'add', width: 44 }
      ]

      /* ↑↑↑ Grid Columns configuration ↑↑↑ */

      /* ↓↓↓ Resource configuration ↓↓↓ */
      function getResourceAssignments(resourceId) {
        let assignments
        const store = gantt.getDatastore(gantt.config.resource_store)
        const resource = store.getItem(resourceId)

        if (resource.$level === 0) {
          assignments = []
          store.getChildren(resourceId).forEach(function(childId) {
            assignments = assignments.concat(gantt.getResourceAssignments(childId))
          })
        } else if (resource.$level === 1) {
          assignments = gantt.getResourceAssignments(resourceId)
        } else {
          assignments = gantt.getResourceAssignments(resource.$resource_id, resource.$task_id)
        }
        return assignments
      }

      gantt.templates.resource_cell_class = function(start_date, end_date, resource, tasks) {
        const css = []
        css.push('resource_marker')
        if (tasks.length <= 1) {
          css.push('workday_ok')
        } else {
          css.push('workday_over')
        }
        return css.join(' ')
      }

      gantt.templates.resource_cell_value = function(start_date, end_date, resource, tasks) {
        let result = 0
        tasks.forEach(function(item) {
          const assignments = gantt.getResourceAssignments(resource.id, item.id)
          assignments.forEach(function(assignment) {
            const task = gantt.getTask(assignment.task_id)
            result += assignment.value * 1
          })
        })

        if (result % 1) {
          result = Math.round(result * 10) / 10
        }
        return '<div>' + result + '</div>'
      }

      gantt.locale.labels.section_resources = 'Owners'
      gantt.locale.labels.section_calendar = 'Calendar'

      // 汉化窗口
      gantt.locale.labels = {
        dhx_cal_today_button: '今天',
        day_tab: '日',
        week_tab: '周',
        month_tab: '月',
        new_event: '新建日程',
        icon_save: '保存',
        icon_cancel: '关闭',
        icon_details: '详细',
        icon_edit: '编辑',
        icon_delete: '删除',
        confirm_closing: '请确认是否撤销修改!', // Your changes will be lost, are your sure?
        confirm_deleting: '是否删除计划?',
        section_description: '描述:',
        section_resources: '自定义选择:',
        section_calendar: '自定义选择2:',
        section_time: '时间范围:',
        section_type: '类型:',
        section_text: '计划名称:',
        section_test: '测试:',
        section_projectClass: '项目类型:',
        taskProjectType_0: '项目任务',
        taskProjectType_1: '普通任务',
        section_head: '负责人:',
        section_priority: '优先级:',
        taskProgress: '任务状态',
        taskProgress_0: '未开始',
        taskProgress_1: '进行中',
        taskProgress_2: '已完成',
        taskProgress_3: '已延期',
        taskProgress_4: '搁置中',
        section_template: 'Details',
        /* grid columns */
        column_text: '计划名称',
        column_start_date: '开始时间',
        column_duration: '持续时间',
        column_add: '',
        column_priority: '难度',
        /* link confirmation */
        link: '关联',
        confirm_link_deleting: '将被删除',
        message_ok: '确定',
        message_cancel: '取消',
        link_start: ' (开始)',
        link_end: ' (结束)',

        type_task: '任务',
        type_project: '项目',
        type_milestone: '里程碑',
        minutes: '分钟',
        hours: '小时',
        days: '天',
        weeks: '周',
        months: '月',
        years: '年'
      }

      gantt.config.lightbox.sections = [
        { name: 'description', height: 38, map_to: 'text', type: 'textarea', focus: true },
        {
          name: 'resources', type: 'resources', map_to: 'owner', options: gantt.serverList('people'), default_value: 8
        },
        {
          name: 'calendar', height: 25, map_to: 'calendar_id', type: 'select', options: [
            { key: '', label: '默认' },
            { key: 'custom1', label: '选项一' },
            { key: 'custom2', label: '选项二' }
          ]
        },

        { name: 'time', type: 'duration', map_to: 'auto' }
      ]

      gantt.config.resource_store = 'resource'
      gantt.config.resource_property = 'owner'
      gantt.config.order_branch = true
      gantt.config.open_tree_initially = true

      gantt.config.show_errors = false // 发生异常时，不允许弹出警告到 UI 界面

      const resourcesStore = gantt.createDatastore({
        name: gantt.config.resource_store,
        type: 'treeDatastore',
        initItem: function(item) {
          item.parent = item.parent || gantt.config.root_id
          item[gantt.config.resource_property] = item.parent
          item.open = true
          return item
        }
      })

      resourcesStore.attachEvent('onParse', function() {
        const people = []
        resourcesStore.eachItem(function(res) {
          if (!resourcesStore.hasChild(res.id)) {
            const copy = gantt.copy(res)
            copy.key = res.id
            copy.label = res.text
            people.push(copy)
          }
        })
        gantt.updateCollection('people', people)
      })

      resourcesStore.parse([
        { id: 1, text: 'QA', parent: null },
        { id: 2, text: 'Development', parent: null },
        { id: 3, text: 'Sales', parent: null },
        { id: 4, text: 'Other', parent: null },
        { id: 5, text: 'Unassigned', parent: 4 },
        { id: 6, text: 'John', parent: 1, unit: 'hours/day' },
        { id: 7, text: 'Mike', parent: 2, unit: 'hours/day' },
        { id: 8, text: 'Anna', parent: 2, unit: 'hours/day' },
        { id: 9, text: 'Bill', parent: 3, unit: 'hours/day' },
        { id: 10, text: 'Floe', parent: 3, unit: 'hours/day' }
      ])
      /* ↑↑↑ Resource configuration ↑↑↑ */

      /* ↓↓↓ Layout configuration ↓↓↓ */
      gantt.config.grid_elastic_columns = true

      // let currentLayout = 'default'

      /* ↑↑↑ Layout configuration ↑↑↑ */

      // 自定义浮动框的显示内容   tooltip浮动框显示的End Date被追加1的问题修复（应该显示数据库的原始值）
      gantt.templates.tooltip_text = function(start, end, task) {
        return '<b>任务:</b> ' + task.text + '<br/><b>开始时间:</b> ' + `${gantt.date.date_to_str('%Y-%m-%d')(start)}` + '<br/><b>结束时间:</b> ' + handleDateReduceOneDay(end)
        // return '<b>任务:</b> ' + task.text + '<br/><b>开始时间:</b> ' + `${gantt.date.date_to_str('%Y-%m-%d')(start)}` + '<br/><b>结束时间:</b> ' + handleDateReduceOneDay(end)
        // return '<b>任务:</b> ' + task.text + '<br/><b>开始时间:</b> ' + handleDatetime2(start) + '<br/><b>结束时间:</b> ' + handleDateReduceOneDay(end) + '<br/><b>进度:</b> ' + task.progress * 100 + '%'
        return '<b>任务:</b> ' + task.text +
          '<br/><b>' + `${task.type === 'task' ? '产能' : '生产数量'}` + ' :</b> ' + task.producedCount +
          '<br/><b>进度:</b> ' + task.progress * 100 + '%' +
          '<br/><b>开始时间:</b> ' + handleDatetime2(start) +
          '<br/><b>结束时间:</b> ' + handleDatetime2(end)
      }

      gantt.templates.task_text = function(start, end, task) {
        // return '<span style="color: white; font-weight: bold; text-shadow: 1px 1px 1px #000;">' +
        //   task.description + ' - ' +
        //   '</span>'
        // return task.description
        // return task.progress * 100 + '%'

        if (task.type === 'task2') {
          return `<div  class="task2Css">${task.producedCount}</div>`
          // return task.producedCount
        }
        if (task.type === 'task3') {
          return `<div  class="task3Css">${task.producedCount}</div>`
        }
        return ''
      }

      // 设置持续时间单位为小时
      // gantt.config.duration_unit = 'hour'

      gantt.config.duration_unit = 'minute'
      gantt.config.duration_step = 1
      // gantt.config.show_task_cells = false  //隐藏甘特图内部刻度线
      gantt.init('gantt_here')
      gantt.parse({
        'data': [
          {
      // 注意：这里不立即加载数据，而是等待loadTasks被调用

            'id': 1,
            'text': '项目1',
            'type': 'project',
            'start_date': '2025-04-02 00:00',
            'end_date': '2025-04-07 00:00',
            'duration': 5,
            'progress': 0.4,
            'owner': [{ 'resource_id': '5', 'value': 3 }],
            'parent': 0,
            'checked': false
          },
          {
            'id': 2,
            'text': '项目2',
            'type': 'project',
            'start_date': '02-04-2025 00:00',
            'duration': 8,
            'progress': 0.6,
            'owner': [{ 'resource_id': '5', 'value': 4 }],
            'parent': '1',
            checked: false
          },
          {
            'id': 3,
            'text': '项目3',
            'type': 'project',
            'start_date': '11-04-2025 00:00',
            'duration': 8,
            'parent': '1',
            'progress': 0.6,
            'owner': [{ 'resource_id': '5', 'value': 2 }],
            checked: false
          },
          {
            'id': 4,
            'text': '项目4',
            'type': 'project',
            'start_date': '13-04-2025 00:00',
            'duration': 5,
            'parent': '1',
            'progress': 0.5,
            'owner': [{ 'resource_id': '5', 'value': 4 }],
            'priority': 3,
            checked: true
          },
          {
            'id': 5,
            'text': '任务5',
            'calendar_id': 'custom1',
            'type': 'task',
            'start_date': '03-04-2025 00:00',
            'duration': 7,
            'parent': '2',
            'progress': 0.6,
            'owner': [{ 'resource_id': '6', 'value': 5 }],
            'priority': 1,
            checked: true
          },
          {
            'id': 6,
            'text': '任务6',
            'type': 'task',
            'calendar_id': 'custom1',
            'start_date': '03-04-2025 12:00',
            'duration': 7,
            'parent': '2',
            'progress': 0.6,
            'owner': [{ 'resource_id': '7', 'value': 1 }],
            'priority': 2,
            checked: false
          },
          {
            'id': 7,
            'text': '任务7',
            'calendar_id': 'custom1',
            'type': 'task',
            'start_date': '12-04-2025 00:00',
            'duration': 8,
            'parent': '3',
            'progress': 0.6,
            'owner': [{ 'resource_id': '10', 'value': 2 }],
            checked: false
          },
          {
            'id': 8,
            'text': '任务8',
            'calendar_id': 'custom1',
            'type': 'task',
            'start_date': '14-04-2025 00:00',
            'duration': 5,
            'parent': '4',
            'progress': 0.5,
            'owner': [{ 'resource_id': '10', 'value': 4 }, { 'resource_id': '9', 'value': 5 }],
            'priority': 1,
            checked: false
          },
          {
            'id': 9,
            'text': '任务9',
            'type': 'task',
            'start_date': '21-04-2025 00:00',
            'duration': 4,
            'parent': '4',
            'progress': 0.5,
            'owner': [{ 'resource_id': '7', 'value': 3 }],
            checked: false
          },
          {
            'id': 10,
            'text': '任务10',
            'type': 'task',
            'start_date': '27-04-2025 00:00',
            'duration': 3,
            'parent': '4',
            'progress': 0.5,
            'owner': [{ 'resource_id': '8', 'value': 5 }],
            'priority': 2,
            checked: false
          },
          {
            'id': 11,
            'text': '任务11',
            'type': 'project',
            'progress': 0.6,
            'start_date': '02-04-2025 00:00',
            'duration': 13,
            'owner': [{ 'resource_id': '5', 'value': 4 }],
            'parent': 0,
            checked: false
          },
          {
            'id': 12,
            'text': '任务12',
            'calendar_id': 'custom2',
            'type': 'task',
            'start_date': '03-04-2025 00:00',
            'duration': 5,
            'parent': '11',
            'progress': 1,
            'owner': [{ 'resource_id': '7', 'value': 6 }],
            checked: false
          },
          {
            'id': 13,
            'text': '项目13',
            'type': 'project',
            'start_date': '03-04-2025 00:00',
            'duration': 11,
            'parent': '11',
            'progress': 0.5,
            'owner': [{ 'resource_id': '5', 'value': 2 }],
            checked: false
          },
          {
            'id': 14,
            'text': '任务14',
            'calendar_id': 'custom2',
            'type': 'task',
            'start_date': '03-04-2025 00:00',
            'duration': 6,
            'parent': '11',
            'owner': [],
            'progress': 0.8,
            checked: false
          },
          {
            'id': 15,
            'text': '项目15',
            'type': 'project',
            'start_date': '03-04-2025 00:00',
            'duration': 5,
            'parent': '11',
            'progress': 0.2,
            'owner': [{ 'resource_id': '5', 'value': 5 }],
            checked: false
          },
          {
            'id': 16,
            'text': '任务16',
            'calendar_id': 'custom2',
            'type': 'task',
            'start_date': '03-04-2025 00:00',
            'duration': 7,
            'parent': '11',
            'progress': 0,
            'owner': [{ 'resource_id': '7', 'value': 2 }],
            'priority': 1,
            checked: false
          },
          {
            'id': 17,
            'text': '任务17',
            'type': 'task',
            'start_date': '03-04-2025 00:00',
            'duration': 2,
            'parent': '13',
            'progress': 1,
            'owner': [{ 'resource_id': '8', 'value': 1 }],
            'priority': 2,
            checked: false
          },
          {
            'id': 25,
            'text': '任务18',
            'type': 'task',
            'start_date': '06-04-2025 00:00',
            'parent': '13',
            'progress': 0,
            'owner': [{ 'resource_id': '5', 'value': 1 }],
            'duration': 2,
            checked: false
          },
          {
            'id': 18,
            'text': '任务19',
            'type': 'task',
            'start_date': '10-04-2025 00:00',
            'duration': 2,
            'parent': '13',
            'progress': 0.8,
            'owner': [{ 'resource_id': '6', 'value': 2 }],
            'priority': 3,
            checked: false
          },
          {
            'id': 19,
            'text': '任务20',
            'calendar_id': 'custom1',
            'type': 'task',
            'start_date': '13-04-2025 00:00',
            'duration': 4,
            'parent': '13',
            'progress': 0.2,
            'owner': [{ 'resource_id': '6', 'value': 3 }],
            checked: false
          },
          {
            'id': 20,
            'text': '任务21',
            'type': 'task',
            'start_date': '13-04-2025 00:00',
            'duration': 4,
            'parent': '13',
            'progress': 0,
            'owner': [{ 'resource_id': '8', 'value': 4 }],
            'priority': 1,
            checked: false
          },
          {
            'id': 21,
            'text': '任务22',
            'type': 'task',
            'start_date': '03-04-2025 00:00',
            'duration': 4,
            'parent': '15',
            'progress': 0.5,
            'owner': [{ 'resource_id': '6', 'value': 5 }],
            checked: false
          },
          {
            'id': 22,
            'text': '任务23',
            'calendar_id': 'custom1',
            'type': 'task',
            'start_date': '03-04-2025 00:00',
            'duration': 4,
            'parent': '15',
            'progress': 0.1,
            'owner': [{ 'resource_id': '8', 'value': 3 }],
            'priority': 1,
            checked: false
          },
          {
            'id': 23,
            'text': '任务24',
            'type': 'task',
            'start_date': '03-04-2025 00:00',
            'duration': 5,
            'parent': '15',
            'progress': 0,
            'owner': [{ 'resource_id': '8', 'value': 5 }],
            'priority': 1,
            checked: false
          },
          {
            'id': 24,
            'text': '任务25',
            // 'type': 'milestone',
            'type': 'task',
            'start_date': '20-04-2025 00:00',
            'parent': '11',
            'progress': 0,
            'owner': [{ 'resource_id': '5', 'value': 3 }],
            'duration': 2,
            checked: false
          }
        ]

      })

      // 绑定甘特图点击事件（官方推荐的事件委托用法）<span data-allow-html class='source-item source-aggregated' data-group-key='source-group-2' data-url='https://juejin.cn/post/7352376280387764278' data-id='turn0fetch0'><span data-allow-html class='source-item-num' data-group-key='source-group-2' data-id='turn0fetch0' data-url='https://juejin.cn/post/7352376280387764278'><span class='source-item-num-name' data-allow-html>https://juejin.cn/post/7352376280387764278</span></span></span>
      // 绑定甘特图点击事件（官方推荐的事件委托用法）
      gantt.attachEvent('onTaskClick', (id, e) => {
        // 找到点击的是否是复选框
        const checkbox = e.target.closest('[data-action="check-row"]')
@@ -825,6 +290,11 @@
        const task = gantt.getTask(id)
        if (task) {
          task.checked = !task.checked
          // 同时更新全局数据
          const globalTask = this.allTasks.find(t => t.id === id)
          if (globalTask) {
            globalTask.checked = task.checked
          }
          gantt.updateTask(id) // 只刷新这一行，性能更好
          this.syncSelected() // 同步到 Vue 的 selectedIds
        }
@@ -835,52 +305,554 @@

      // 初始化完成后同步一次选中状态
      this.syncSelected()

      // this.loadTasks()
    },

    // 加载任务数据
    loadTasks() {
      // 接口获取到的数据  //这是待排数据
      const rows = [
        {
          'wo_code': null,
          'YearDate': '2026-01-20',
          'children': [
            {
              'AdvaDevicNumber': 'JG010',
              'AdvaDevicName': '精工设备10#',
              'AdvaDevicCropMob': '10',
              'AdvaDevicRhythm': '5.0',
              'OneStartDate': '08:00~11:30',
              'TwoStartDate': '13:00~18:00',
              'ThreeStartDate': '',
              'FourStartDate': '',
              'FiveStartDate': ''
            },
            {
              'AdvaDevicNumber': 'SB001',
              'AdvaDevicName': '设备001',
              'AdvaDevicCropMob': '30',
              'AdvaDevicRhythm': '5.0',
              'OneStartDate': '08:00~11:30',
              'TwoStartDate': '13:00~18:00',
              'ThreeStartDate': '',
              'FourStartDate': '',
              'FiveStartDate': ''
            }
          ]
        },
        {
          'wo_code': null,
          'YearDate': '2026-01-21',
          'children': [
            {
              'AdvaDevicNumber': 'JG010',
              'AdvaDevicName': '精工设备10#',
              'AdvaDevicCropMob': '10',
              'AdvaDevicRhythm': '5.0',
              'OneStartDate': '08:00~11:30',
              'TwoStartDate': '13:00~18:00',
              'ThreeStartDate': '',
              'FourStartDate': '',
              'FiveStartDate': ''
            },
            {
              'AdvaDevicNumber': 'SB001',
              'AdvaDevicName': '设备001',
              'AdvaDevicCropMob': '30',
              'AdvaDevicRhythm': '5.0',
              'OneStartDate': '08:00~11:30',
              'TwoStartDate': '13:00~18:00',
              'ThreeStartDate': '',
              'FourStartDate': '',
              'FiveStartDate': ''
            }
          ]
        },
        {
          'wo_code': null,
          'YearDate': '2026-01-22',
          'children': [
            {
              'AdvaDevicNumber': 'JG010',
              'AdvaDevicName': '精工设备10#',
              'AdvaDevicCropMob': '10',
              'AdvaDevicRhythm': '5.0',
              'OneStartDate': '08:00~11:30',
              'TwoStartDate': '13:00~18:00',
              'ThreeStartDate': '',
              'FourStartDate': '',
              'FiveStartDate': ''
            },
            {
              'AdvaDevicNumber': 'SB001',
              'AdvaDevicName': '设备001',
              'AdvaDevicCropMob': '30',
              'AdvaDevicRhythm': '5.0',
              'OneStartDate': '08:00~11:30',
              'TwoStartDate': '13:00~18:00',
              'ThreeStartDate': '',
              'FourStartDate': '',
              'FiveStartDate': ''
            }
          ]
        },
        {
          'wo_code': null,
          'YearDate': '2026-01-23',
          'children': [
            {
              'AdvaDevicNumber': 'JG010',
              'AdvaDevicName': '精工设备10#',
              'AdvaDevicCropMob': '10',
              'AdvaDevicRhythm': '5.0',
              'OneStartDate': '08:00~11:30',
              'TwoStartDate': '13:00~18:00',
              'ThreeStartDate': '',
              'FourStartDate': '',
              'FiveStartDate': ''
            },
            {
              'AdvaDevicNumber': 'SB001',
              'AdvaDevicName': '设备001',
              'AdvaDevicCropMob': '30',
              'AdvaDevicRhythm': '5.0',
              'OneStartDate': '08:00~11:30',
              'TwoStartDate': '13:00~18:00',
              'ThreeStartDate': '',
              'FourStartDate': '',
              'FiveStartDate': ''
            }
          ]
        },
        {
          'wo_code': null,
          'YearDate': '2026-01-24',
          'children': [
            {
              'AdvaDevicNumber': 'JG010',
              'AdvaDevicName': '精工设备10#',
              'AdvaDevicCropMob': '10',
              'AdvaDevicRhythm': '5.0',
              'OneStartDate': '08:00~11:30',
              'TwoStartDate': '13:00~18:00',
              'ThreeStartDate': '',
              'FourStartDate': '',
              'FiveStartDate': ''
            },
            {
              'AdvaDevicNumber': 'SB001',
              'AdvaDevicName': '设备001',
              'AdvaDevicCropMob': '30',
              'AdvaDevicRhythm': '5.0',
              'OneStartDate': '08:00~11:30',
              'TwoStartDate': '13:00~18:00',
              'ThreeStartDate': '',
              'FourStartDate': '',
              'FiveStartDate': ''
            }
          ]
        },
        {
          'wo_code': null,
          'YearDate': '2026-01-25',
          'children': [
            {
              'AdvaDevicNumber': 'JG010',
              'AdvaDevicName': '精工设备10#',
              'AdvaDevicCropMob': '10',
              'AdvaDevicRhythm': '5.0',
              'OneStartDate': '08:00~11:30',
              'TwoStartDate': '13:00~18:00',
              'ThreeStartDate': '',
              'FourStartDate': '',
              'FiveStartDate': ''
            },
            {
              'AdvaDevicNumber': 'SB001',
              'AdvaDevicName': '设备001',
              'AdvaDevicCropMob': '30', // 稼动率    需要除100
              'AdvaDevicRhythm': '5.0', // 生产节拍
              'OneStartDate': '08:00~11:30',
              'TwoStartDate': '13:00~18:00',
              'ThreeStartDate': '',
              'FourStartDate': '',
              'FiveStartDate': ''
            }
          ]
        }
      ]

      // 这是已排数据
      const Cont = [
        {
          'wo_code': 'MO-2023-06-0007_1',
          'eqp_code': 'JG010',
          'time_start': '2026-01-21 13:51:55',
          'time_end': '2026-01-21 18:00:00',
          'status': 'S',
          'alloc_qty': 298.00,
          'part_code': '302',
          'part_name': '8504光机',
          'uom_name': '只'
        },
        {
          'wo_code': 'MO-2023-06-0007_1',
          'eqp_code': 'JG010',
          'time_start': '2026-01-22 08:00:00',
          'time_end': '2026-01-22 11:30:00',
          'status': 'S',
          'alloc_qty': 252.00,
          'part_code': '302',
          'part_name': '8504光机',
          'uom_name': '只'
        },
        {
          'wo_code': 'MO-2023-06-0007_1',
          'eqp_code': 'JG010',
          'time_start': '2026-01-22 13:00:00',
          'time_end': '2026-01-22 18:00:00',
          'status': 'S',
          'alloc_qty': 360,
          'part_code': '302',
          'part_name': '8504光机',
          'uom_name': '只'
        },
        {
          'wo_code': 'MO-2023-06-0007_1',
          'eqp_code': 'JG010',
          'time_start': '2026-01-23 08:00:00',
          'time_end': '2026-01-23 11:30:00',
          'status': 'S',
          'alloc_qty': 252.00,
          'part_code': '302',
          'part_name': '8504光机',
          'uom_name': '只'
        },
        {
          'wo_code': 'MO-2023-06-0007_1',
          'eqp_code': 'JG010',
          'time_start': '2026-01-23 13:00:00',
          'time_end': '2026-01-23 15:00:00',
          'status': 'S',
          'alloc_qty': 144.00,
          'part_code': '302',
          'part_name': '8504光机',
          'uom_name': '只'
        }
        // {
        //   'wo_code': 'MO-2023-06-0007_1',
        //   'eqp_code': 'JG010',
        //   'time_start': '2026-01-24 08:00:00',
        //   'time_end': '2026-01-24 11:30:00',
        //   'status': 'S',
        //   'alloc_qty': 252.00,
        //   'part_code': '302',
        //   'part_name': '8504光机',
        //   'uom_name': '只'
        // },
        // {
        //   'wo_code': 'MO-2023-06-0007_1',
        //   'eqp_code': 'JG010',
        //   'time_start': '2026-01-24 13:00:00',
        //   'time_end': '2026-01-24 18:00:00',
        //   'status': 'S',
        //   'alloc_qty': 360.00,
        //   'part_code': '302',
        //   'part_name': '8504光机',
        //   'uom_name': '只'
        // },
        // {
        //   'wo_code': 'MO-2023-06-0007_1',
        //   'eqp_code': 'JG010',
        //   'time_start': '2026-01-25 08:00:00',
        //   'time_end': '2026-01-25 11:30:00',
        //   'status': 'S',
        //   'alloc_qty': 252.00,
        //   'part_code': '302',
        //   'part_name': '8504光机',
        //   'uom_name': '只'
        // },
        // {
        //   'wo_code': 'MO-2023-06-0007_1',
        //   'eqp_code': 'JG010',
        //   'time_start': '2026-01-25 13:00:00',
        //   'time_end': '2026-01-25 18:00:00',
        //   'status': 'S',
        //   'alloc_qty': 360.00,
        //   'part_code': '302',
        //   'part_name': '8504光机',
        //   'uom_name': '只'
        // }
      ]

      const newArr = []
      // 这一步的操作主要是要做产能背景的显示
      rows.forEach((item, index) => {
        // 数据接口返回的时间范围要在日期选择范围之内
        if (new Date(item.YearDate).getTime() >= new Date(this.ganttDateRange[0]).getTime() && new Date(item.YearDate).getTime() <= new Date(this.ganttDateRange[1]).getTime()) {
          item.children.forEach((it, ind) => {
            // 这里应该要生成一个以设备维度为基础的数组   不重不漏
            if (!newArr.map(i => i.partCode).includes(it.AdvaDevicNumber)) {
              console.log(' it.AdvaDevicNumber,', it.AdvaDevicNumber)
              newArr.push({
                id: it.AdvaDevicNumber,
                type: 'project',
                text: '任务名称预留',
                partName: it.AdvaDevicName,
                partCode: it.AdvaDevicNumber,
                start_date: handleDatetime2(item.YearDate + ' ' + it.OneStartDate.split('~')[0]), // 这个是无效的，只是为了预排prepareArrange方法里面不报错
                end_date: handleDatetime2(item.YearDate + ' ' + it.OneStartDate.split('~')[1]), // 这个是无效的，只是为了预排prepareArrange方法里面不报错
                // duration: this.calculateTimeRangeInMinutes(it.OneStartDate),
                render: 'split', // 用于在一个工作时间段内显示不下，需要进行分割显示
                checked: false,
                progress: 0,
                parent: 0,
                saleOrder: 'SO-2026-01001'
              })
            }

            // 因为是五个时间段，所有要有个循环次数为5的循环
            for (let i = 0; i < 5; i++) { // 这次循环是为了显示产能
              if (it[this.fivePeriodsTimeName[i]]) {
                const duration = this.calculateTimeRangeInMinutes(it[this.fivePeriodsTimeName[i]]) // 工期 单位 分钟
                newArr.push({
                  // id:  index.toString() + ind.toString() + i.toString(),
                  id: nanoid(),
                  type: 'task',
                  text: '任务名称预留',
                  partName: it.AdvaDevicName,
                  partCode: it.AdvaDevicNumber,
                  start_date: handleDatetime2(item.YearDate + ' ' + it[this.fivePeriodsTimeName[i]].split('~')[0]),
                  // start_date: new Date(handleDatetime2(item.YearDate + ' ' + it[this.fivePeriodsTimeName[i]].split('~')[0])).getTime() < new Date().getTime() ? handleDatetime2(new Date()) : handleDatetime2(item.YearDate + ' ' + it[this.fivePeriodsTimeName[i]].split('~')[0]),
                  // end_date: new Date(handleDatetime2(item.YearDate + ' ' + it[this.fivePeriodsTimeName[i]].split('~')[1])).getTime() < new Date().getTime() ? handleDatetime2(new Date()) : handleDatetime2(item.YearDate + ' ' + it[this.fivePeriodsTimeName[i]].split('~')[1]),
                  end_date: handleDatetime2(item.YearDate + ' ' + it[this.fivePeriodsTimeName[i]].split('~')[1]),
                  duration,
                  checked: false,
                  progress: 0,
                  parent: it.AdvaDevicNumber,
                  saleOrder: 'SO-2026-01001',
                  //  要在每一个时间段内算出能生产多少个     工期（分钟）乘以60 除以生产节拍 * 稼动率
                  producedCount: (duration * 60 / it.AdvaDevicRhythm) * (it.AdvaDevicCropMob / 100),
                  AdvaDevicRhythm: it.AdvaDevicRhythm, // 生产节拍
                  AdvaDevicCropMob: it.AdvaDevicCropMob // 稼动率    需要除100
                })
              }
            }
          })
        }
      })

      // 这一步的操作是做已排的显示
      const scheduledDevices = [...new Set(Cont.map(i => i.eqp_code))]// 这是已排的设备编码
      Cont.forEach(item => {
        if (scheduledDevices.includes(item.eqp_code)) {
          newArr.push({
            id: nanoid(),
            type: 'task3',
            text: '任务名称预留',
            partName: item.part_name,
            partCode: item.part_code,
            start_date: item.time_start,
            end_date: item.time_end,
            // duration: this.calculateTimeRangeInMinutes(it.OneStartDate),
            duration: this.calculateTimeRangeInMinutes(item.time_start.split(' ')[1] + '~' + item.time_end.split(' ')[1]),
            checked: false,
            progress: 0,
            parent: item.eqp_code,
            saleOrder: 'SO-2026-01001',
            producedCount: item.alloc_qty
          })
        }
      })

      // task 代表的是产能  task2 代表的是可以排产的值   task3 代表的是已排产的值
      // task2 的值得从 task减去task3的时间  代表可排产时间
      // 若同一父节点的值相同时,当task的开始时间和结束时间与task3相等时,代表此段不能再排产
      // 当task的开始时间等于task3的开始时间,但task的结束时间大于task3的结束时间时，这时候，可排产时间为：task3的结束时间到task的结束时间
      const task = newArr.filter(item => item.type === 'task')
      const task3 = newArr.filter(item => item.type === 'task3')
      task.forEach(item => { // 总产能
        task3.forEach(it => { // 已排数据
          if (item.parent === it.parent) { // 说明是在同一个设备下
            // 当两个时间相等时说明肯定不能排产了
            if (new Date(item.start_date).getTime() === new Date(it.start_date).getTime() && new Date(item.end_date).getTime() === new Date(it.end_date).getTime()) {
              item.schedulingPossible = false
            }

            if (new Date(item.start_date).getTime() === new Date(it.start_date).getTime() && new Date(item.end_date).getTime() > new Date(it.end_date).getTime()) {
              item.start_date2 = it.end_date
            }

            // 不知道要不要注释掉  待验证
            // if (new Date(item.start_date).getTime() < new Date().getTime() && item.producedCount !== it.producedCount) {
            //   item.start_date2 = handleDatetime2(new Date())
            // }
          }
        })
      })

      // 使用原有的示例数据作为基础
      this.allTasks = newArr.filter(i => i.schedulingPossible !== false)
      // this.allTasks = newArr

      this.totalTasks = this.allTasks.length
      this.updatePaginatedTasks()
      this.renderGanttChart()

      // this.prepareArrange()
    },

    // 更新分页后的任务数据
    updatePaginatedTasks() {
      const startIndex = (this.currentPage - 1) * this.pageSize
      const endIndex = Math.min(startIndex + this.pageSize, this.allTasks.length)
      this.paginatedTasks = this.allTasks.slice(startIndex, endIndex)
      // this.paginatedTasks = JSON.parse(JSON.stringify(this.allTasks.slice(startIndex, endIndex)))
    },

    // 拆分时间字符串并分别计算分钟值
    calculateTimeRangeInMinutes(timeRangeStr) {
      // 分割字符串，获取开始时间和结束时间
      const [startTimeStr, endTimeStr] = timeRangeStr.split('~')

      // 将时间字符串（HH:MM）转换为总分钟数
      const timeStringToMinutes = (timeStr) => {
        const [hours, minutes] = timeStr.split(':').map(Number)
        return hours * 60 + (minutes || 0)
      }

      const startMinutes = timeStringToMinutes(startTimeStr)
      const endMinutes = timeStringToMinutes(endTimeStr)

      // 返回时间差（分钟）
      return endMinutes - startMinutes
    },

    // 刻度值改变
    changeTimeScale(val, boolean) {
      let scaleConfig
      switch (this.scaleValue) {
        case '30min':
          scaleConfig = [
            { unit: 'day', step: 1, format: '%Y-%m-%d 星期%D' },
            { unit: 'minute', step: 30, format: '%H:%i' } // 子尺度
          ]
          break
        case '60min':
          scaleConfig = [
            { unit: 'day', step: 1, format: '%Y-%m-%d 星期%D' },
            // { unit: 'hour', step: 1, format: '%H:%i' },
            { unit: 'minute', step: 60, format: '%H:%i' }
          ]
          break
        case '240min':
          scaleConfig = [
            { unit: 'day', step: 1, format: '%Y-%m-%d 星期%D' },
            { unit: 'minute', step: 240, format: '%H:%i' } // 每4小时一个刻度
          ]
          break
        case '360min':
          scaleConfig = [
            { unit: 'day', step: 1, format: '%Y-%m-%d 星期%D' },
            { unit: 'minute', step: 360, format: '%H:%i' } // 每6小时一个刻度
            // { unit: 'hour', step: 6, format: '%H:%i' } // 每6小时一个刻度
          ]
          break
        default:
          scaleConfig = [
            { unit: 'hour', step: 1, format: '%Y-%m-%d 星期%D' },
            { unit: 'minute', step: 60, format: '%H:%i' }
          ]
      }
      gantt.config.start_date = new Date(this.ganttDateRange[0] + ' 00:00')
      gantt.config.end_date = new Date(this.ganttDateRange[1] + ' 24:00')
      gantt.config.scales = scaleConfig
      if (boolean) {
        // gantt.render()// gantt重绘
        this.renderGanttChart()
      }
    },

    // 渲染甘特图
    renderGanttChart() {
      gantt.clearAll()
      console.log(JSON.parse(JSON.stringify(this.paginatedTasks)))
      gantt.parse({
        'data': this.paginatedTasks
      })
      // 确保甘特图重新渲染
      // gantt.render()
    },

    // 页大小改变
    handleSizeChange(newSize) {
      console.log('执行2')
      this.pageSize = newSize
      this.currentPage = 1 // 重置到第一页
      this.updatePaginatedTasks()
      this.renderGanttChart()
      this.syncSelected()
    },

    // 当前页改变
    handleCurrentChange(newPage) {
      console.log('执行1')
      // 计算最大页数，防止超出范围
      const maxPage = Math.ceil(this.totalTasks / this.pageSize)
      if (newPage > maxPage) {
        this.currentPage = maxPage
      } else if (newPage < 1) {
        this.currentPage = 1
      } else {
        this.currentPage = newPage
      }

      this.updatePaginatedTasks()
      this.renderGanttChart()
      this.syncSelected()
    },
    // 甘特图日期改变
    ganttDateRangeChange(val) {
      gantt.config.start_date = val[0]
      gantt.config.end_date = val[1]
      gantt.render()
    },
      this.priorityMethodChange()// 清空已排值
      gantt.config.start_date = new Date(val[0] + ' 00:00')
      gantt.config.end_date = new Date(val[1] + ' 24:00')

    ganttUndo() {
      gantt.undo()
    },
    ganttRedo() {
      gantt.redo()
    },
    ganttZoomIn() {
      gantt.ext.zoom.zoomIn()
    },
    ganttZoomOut() {
      gantt.ext.zoom.zoomOut()
    },
      this.loadTasks()

      // gantt.render()
    },
    // 从甘特图中同步选中的 id 到 Vue data
    syncSelected() {
      const tasks = gantt.serialize().data || []
      this.selectedIds = tasks.filter(t => t.checked).map(t => t.id)
      // 同步当前页面任务到全局数据
      gantt.eachTask((task) => {
        const globalTask = this.allTasks.find(t => t.id === task.id)
        if (globalTask) {
          globalTask.checked = task.checked
        }
      })

      // 获取所有选中的任务ID
      // this.selectedIds = [...new Set(this.allTasks.filter(t => t.checked).map(t => t.id))]//数组去重
      this.selectedIds = this.allTasks.filter(t => t.checked).map(t => t.id)
      console.log(this.selectedIds)
    },

    // 获取选中任务（示例）
    handleGetSelected() {
      const tasks = gantt.serialize().data || []
      const selected = tasks.filter(t => t.checked)
      this.$notify.success(`当前已选中${selected.length} 条任务`)
      const selected = this.allTasks.filter(t => t.checked)
      // this.$notify.success(`当前已选中${selected.length} 条任务`)
      this.$notify.success(`点击了`)
    },

    // 清空所有选择
    handleClearSelection() {
      // 获取所有任务
      const tasks = gantt.serialize().data || []

      // 遍历所有任务，将 checked 属性设置为 false
      tasks.forEach(task => {
      this.allTasks.forEach(task => {
        task.checked = false
      })

      // 更新所有任务显示
      // 更新当前页面显示的任务
      gantt.eachTask((task) => {
        task.checked = false
        gantt.updateTask(task.id)
@@ -891,8 +863,104 @@

      // 显示提示信息
      this.$notify.success('已清空所有选择')
    }
    },
    // 预排
    prepareArrange() {
      this.priorityMethodChange()

      this.loadTasks()

      // 优先方式  time  device
      if (this.priorityMethod === 'time') {
        this.allTasks.sort((a, b) => a.start_date - b.start_date)
      }
      if (this.priorityMethod === 'device') {
        this.allTasks.sort((a, b) => parseFloat(a.AdvaDevicCropMob) - parseFloat(b.AdvaDevicCropMob))
      }

      // 在这个循环里面还得考虑一个点，在已排的数据上不能再排了
      // 相当于在task 和task3中   要在task里面剔除掉task3的时间段
      const newArr = []
      // this.canArrangeNumber = 0
      let needArrangeNumber = this.needArrangeNumber
      this.allTasks.forEach(item => {
        // if (item.type === 'task') { // 这里的判断条件还得加个日期判断
        if (item.type === 'task' &&
          new Date(item.start_date).getTime() >= new Date(this.ganttDateRange[0] + ' 00:00:00').getTime() &&
          new Date(item.end_date).getTime() >= new Date().getTime()) { // 这里的判断条件还得加个日期判断 结束时间要大于目前时间
          let ratio = 1 // 默认系数 1

          if (item.start_date2) {
            const d = this.calculateTimeRangeInMinutes(item.start_date2.split(' ')[1] + '~' + handleDatetime2(item.end_date).split(' ')[1])
            ratio = Math.round((d / item.duration) * 100) / 100
          }

          if (
            new Date(item.start_date).getTime() < new Date().getTime() &&
            new Date(item.end_date).getTime() >= new Date().getTime()
          ) {
            const d = this.calculateTimeRangeInMinutes(handleDatetime2(new Date()).split(' ')[1] + '~' + handleDatetime2(item.end_date).split(' ')[1])
            ratio = Math.round((d / item.duration) * 100) / 100
          }

          // 这个地方的count值 得变更  item.producedCount  得乘以个系数  默认系数 1
          const count = needArrangeNumber > 0 && needArrangeNumber <= item.producedCount * ratio ? needArrangeNumber : item.producedCount * ratio
          needArrangeNumber = needArrangeNumber - item.producedCount * ratio // 剩余待排值

          if (count > 0 && (needArrangeNumber > 0 || Math.abs(needArrangeNumber) < item.producedCount * ratio)) { // 一定是大于零且小于整条的生产值的
            // duration   单位 分钟
            const duration = (count / (item.AdvaDevicCropMob / 100)) * item.AdvaDevicRhythm / 60
            // if (count < item.producedCount && new Date().getTime() <= new Date(item.start_date).getTime()) {
            // duration = duration * (count / item.producedCount)   //好像注释掉就对了  待验证
            // }

            const obj = {
              id: nanoid(),
              type: 'task2',
              text: '任务名称111',
              partName: item.partName,
              partCode: item.partCode,
              start_date: new Date(item.start_date).getTime() < new Date().getTime() ? handleDatetime2(new Date()) : (item.start_date2 ? item.start_date2 : handleDatetime2(item.start_date)),
              // end_date: handleDatetime2(item.end_date),
              // end_date: item.end_date,
              duration, // 代表的是进度条
              checked: false,
              progress: 0,
              parent: item.parent,
              saleOrder: item.saleOrder,
              producedCount: count <= item.producedCount ? Math.round(count) : item.producedCount
              // producedCount: count <= item.producedCount ? count : item.producedCount
            }
            this.canArrangeNumber += parseFloat(obj.producedCount)
            if (Math.abs(this.canArrangeNumber - this.needArrangeNumber) === 1) {
              obj.producedCount = obj.producedCount + (this.needArrangeNumber - this.canArrangeNumber)
            }

            newArr.push({ ...obj })
          }
        }
      })

      // for (let i = 0; i < this.allTasks.length; i++) {
      //
      // }

      this.allTasks = [...this.allTasks, ...newArr]

      console.log(JSON.parse(JSON.stringify(this.allTasks)), '888')

      this.totalTasks = this.allTasks.length
      this.updatePaginatedTasks()
      this.renderGanttChart()
    },
    // 清空已排值
    priorityMethodChange() {
      this.canArrangeNumber = 0
      this.allTasks = this.allTasks.filter(i => i.type !== 'task2')
      this.totalTasks = this.allTasks.length
      this.updatePaginatedTasks()
      this.renderGanttChart()
    }
  }
}

@@ -906,86 +974,106 @@
  margin: unset;
}

.local_storage {
  background: lavender;
  border: 2px dotted orange;
  font-weight: bold;
}
/*.gantt_task_cell {*/
/*  background: rgba(5, 185, 100, .1);*/
/*}*/

.gantt_grid_scale .gantt_grid_head_cell,
.gantt_task .gantt_task_scale .gantt_scale_cell {
  font-weight: bold;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
}
/*!*非工作日*!*/
/*.weekend {*/
/*  background: rgba(255, 255, 255, 0.1);*/
/*}*/

.resource_marker {
  text-align: center;
}
/*.row-completed {*/
/*  background-color: #bee4be !important; !* 浅绿色 *!*/
/*}*/

.resource_marker div {
  width: 28px;
  height: 28px;
  line-height: 29px;
  display: inline-block;
  border-radius: 15px;
  color: #FFF;
  margin: 3px;
}
/*.gantt_grid_head_cell[data-column-id="duration"],*/
/*.gantt_row .gantt_cell[data-column-name="duration"] {*/
/*  background-color: #f5f5f5 !important;*/
/*}*/

.resource_marker.workday_ok div {
  background: #51c185;
}
/* 为任务条内部的进度条添加圆角，保持视觉统一 */
/*.gantt_task_progress {*/
/*border-radius: 10px !important; !* 建议与任务条半径一致 *!*/
/*}*/

.resource_marker.workday_over div {
  background: #ff8686;
}
/*.gantt_bar_task {*/
/*border-radius: 10px !important;*/
/*padding: 3px !important;*/
/*transform: scaleX(-1) !important;*/
/*}*/

.owner-label {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  display: inline-block;
  border: 1px solid #cccccc;
  border-radius: 25px;
  background: #e6e6e6;
  color: #6f6f6f;
  margin: 0 3px;
  font-weight: bold;
}

.weekend {
  background: LightGoldenrodYellow;
}

.constraint-marker {
  position: absolute;

  -moz-box-sizing: border-box;
  box-sizing: border-box;

  width: 56px;
  height: 56px;
  margin-top: -11px;

  opacity: 0.4;
  z-index: 1;
  background: url("https://docs.dhtmlx.com/gantt/samples/common/constraint-arrow.svg") center no-repeat;
  background-size: cover;
}

.constraint-marker.earliest-start {
  margin-left: -53px;
}

.constraint-marker.latest-end {
  margin-left: -3px;
  transform: rotate(180deg);
}
/*.gantt_bar_project {*/
/*border-radius: 10px !important;*/
/*}*/

.taskCheckBox {
  cursor: pointer;
  z-index: 99999 !important;
}

/* 分页容器样式 */
.pagination-container {
  margin-top: 10px;
  display: flex;
  justify-content: end;
  padding: 10px 0;
  background-color: #fff;
  border-top: 1px solid #ebeef5;
}

#taskRange {
  width: 80px;
  height: 6px;
  border-radius: 2px;
}

/* 隐藏滑块 */
#taskRange::-webkit-slider-thumb {
  opacity: 0;
  -webkit-appearance: none !important;
  width: 1px !important;
  height: 1px !important;
}

#taskRange::-moz-range-thumb {
  opacity: 0;
  width: 1px !important;
  height: 1px !important;
}

#taskRange::-ms-thumb {
  opacity: 0;
  width: 1px !important;
  height: 1px !important;
}

.task2Css {
  width: 100%;
  height: 100%;
  margin-left: 0;
  background-color: #ac96ff;
}

.task3Css {
  width: 100%;
  height: 100%;
  margin-left: 0;
  background-color: rgb(255, 145, 0);
}

.gantt_scale_cell {
  border: none !important;
}

.gantt_task_scale {
  margin-left: -35px;
}

.gantt_scale_line:last-child {
  width: 105%;
}

/*.gantt_task_bg:first-child > .gantt_task_row:first-child > .gantt_last_cell {*/
/*  border-top: 1px solid rgb(166, 166, 166);*/
/*}*/
</style>