缺少产线时间冲突爆红问题

klp-ui/src/views/wms/productionLine/GanttChart.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="gantt-chart-wrapper">
+    <div ref="ganttContainer" class="gantt-container"></div>
+    <div class="gantt-info">
+      <el-card class="task-table-card" shadow="never" style="margin-bottom: 16px;">
+        <div slot="header">生产任务列表</div>
+        <el-table :data="tasks" size="mini" stripe>
+          <el-table-column prop="remark" label="任务名称" min-width="120" />
+          <el-table-column prop="productId" label="产品ID" width="100" />
+          <el-table-column prop="startDate" label="开始时间" width="140">
+            <template slot-scope="scope">{{ formatDate(scope.row.startDate) }}</template>
+          </el-table-column>
+          <el-table-column prop="endDate" label="结束时间" width="140">
+            <template slot-scope="scope">{{ formatDate(scope.row.endDate) }}</template>
+          </el-table-column>
+          <el-table-column prop="quantity" label="数量" width="80" />
+          <el-table-column prop="orderId" label="订单编号" width="120" />
+        </el-table>
+      </el-card>
+      <el-card class="order-table-card" shadow="never">
+        <div slot="header">相关订单信息</div>
+        <el-table :data="orders" size="mini" stripe>
+          <el-table-column prop="orderCode" label="订单编号" width="120" />
+          <el-table-column prop="salesManager" label="负责人" width="120" />
+          <el-table-column prop="customerName" label="客户" width="120" />
+          <el-table-column prop="orderStatus" label="状态" width="100" />
+        </el-table>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import Gantt from 'frappe-gantt';
+const colorClasses = [
+  'gantt-color-1', 'gantt-color-2', 'gantt-color-3', 'gantt-color-4', 'gantt-color-5',
+  'gantt-color-6', 'gantt-color-7', 'gantt-color-8', 'gantt-color-9', 'gantt-color-10'
+];
+function getColorClass(lineId, orderId, idx) {
+  // 先按产线分色，同产线下不同订单再细分
+  if (!lineId) return colorClasses[idx % colorClasses.length];
+  const base = Math.abs(Number(lineId)) % colorClasses.length;
+  if (!orderId) return colorClasses[base];
+  return colorClasses[(base + Math.abs(Number(orderId)) % colorClasses.length) % colorClasses.length];
+}
+export default {
+  name: 'GanttChart',
+  props: {
+    tasks: {
+      type: Array,
+      default: () => []
+    },
+    orders: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    tasks: {
+      handler() {
+        this.renderGantt();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.renderGantt();
+  },
+  methods: {
+    renderGantt() {
+      if (!this.$refs.ganttContainer) return;
+      this.$refs.ganttContainer.innerHTML = '';
+      if (!this.tasks || this.tasks.length === 0) return;
+      const data = this.tasks.map((item, idx) => ({
+        id: String(item.detailId || idx),
+        name: item.remark || `任务${idx+1}`,
+        start: item.startDate ? this.formatDate(item.startDate) : '',
+        end: item.endDate ? this.formatDate(item.endDate) : '',
+        progress: 100,
+        custom_class: getColorClass(item.lineId, item.orderId, idx),
+      }));
+      // 调试：打印data，确认custom_class
+      console.log('Gantt data:', data);
+      new Gantt(this.$refs.ganttContainer, data, {
+        view_mode: 'Month',
+        language: 'zh',
+        custom_popup_html: null
+      });
+    },
+    formatDate(val) {
+      if (!val) return '';
+      const d = typeof val === 'string' ? new Date(val) : val;
+      return d.toISOString().slice(0, 10);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.gantt-chart-wrapper {
+  width: 100%;
+  min-height: 400px;
+}
+.gantt-container {
+  width: 100%;
+  min-height: 220px;
+  height: auto;
+  overflow: visible;
+  position: relative;
+}
+.gantt-container svg {
+  display: block;
+  width: 100% !important;
+  height: auto !important;
+}
+.gantt-info {
+  margin-top: 8px;
+}
+.order-info {
+  margin-bottom: 8px;
+}
+</style>
+
+<style>
+.bar.gantt-color-1 { fill: #409EFF !important; }
+.bar.gantt-color-2 { fill: #67C23A !important; }
+.bar.gantt-color-3 { fill: #E6A23C !important; }
+.bar.gantt-color-4 { fill: #F56C6C !important; }
+.bar.gantt-color-5 { fill: #909399 !important; }
+.bar.gantt-color-6 { fill: #13C2C2 !important; }
+.bar.gantt-color-7 { fill: #B37FEB !important; }
+.bar.gantt-color-8 { fill: #FF85C0 !important; }
+.bar.gantt-color-9 { fill: #36CBCB !important; }
+.bar.gantt-color-10 { fill: #FFC53D !important; }
+</style> 

klp-ui/src/views/wms/productionLine/GanttChartEcharts.vue

@@ -0,0 +1,181 @@
+<template>
+  <div ref="ganttChart" class="echarts-gantt-wrapper" style="width:100%;height:320px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+const colorList = [
+  '#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399',
+  '#13C2C2', '#B37FEB', '#FF85C0', '#36CBCB', '#FFC53D'
+];
+function getColor(lineId, orderId, idx) {
+  if (!lineId) return colorList[idx % colorList.length];
+  const base = Math.abs(Number(lineId)) % colorList.length;
+  if (!orderId) return colorList[base];
+  return colorList[(base + Math.abs(Number(orderId)) % colorList.length) % colorList.length];
+}
+export default {
+  name: 'GanttChartEcharts',
+  props: {
+    tasks: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      chart: null
+    };
+  },
+  watch: {
+    tasks: {
+      handler() {
+        this.renderChart();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.renderChart();
+    window.addEventListener('resize', this.resizeChart);
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose();
+    window.removeEventListener('resize', this.resizeChart);
+  },
+  methods: {
+    renderChart() {
+      if (!this.$refs.ganttChart) return;
+      if (this.chart) this.chart.dispose();
+      this.chart = echarts.init(this.$refs.ganttChart);
+      if (!this.tasks || this.tasks.length === 0) {
+        this.chart.clear();
+        return;
+      }
+      // 处理数据，兼容多种字段名，保证任务名唯一
+      const taskData = this.tasks.map((item, idx) => {
+        const name = (item.remark || item.taskName || item.productName || item.name || `任务${idx+1}`) + (item.productName ? `-${item.productName}` : '');
+        const start = item.startDate || item.start_time || item.start || item.start_date;
+        const end = item.endDate || item.end_time || item.end || item.end_date;
+        return {
+          name,
+          value: [start, end],
+          itemStyle: {
+            color: getColor(item.lineId, item.orderId, idx),
+            borderRadius: 6
+          },
+          lineId: item.lineId,
+          orderId: item.orderId,
+          productId: item.productId,
+          quantity: item.quantity,
+          startDate: start,
+          endDate: end
+        };
+      });
+      // Y轴任务名
+      const yData = taskData.map(d => d.name);
+      // X轴时间范围
+      const minDate = Math.min(...taskData.map(d => new Date(d.value[0]).getTime()));
+      const maxDate = Math.max(...taskData.map(d => new Date(d.value[1]).getTime()));
+      // 自动调整时间轴范围，避免跨度过大导致任务条重叠
+      const oneMonth = 30 * 24 * 3600 * 1000;
+      let xMin = minDate - oneMonth;
+      let xMax = maxDate + oneMonth;
+      // 如果跨度大于一年，仍然只扩展一个月
+      // 如果跨度小于一个月，最小跨度为两个月
+      if (xMax - xMin < 2 * oneMonth) {
+        xMax = xMin + 2 * oneMonth;
+      }
+      console.log(taskData);
+      
+      // 配置
+      const option = {
+        tooltip: {
+          confine: true,
+          formatter: params => {
+            const d = Array.isArray(params.data) ? params.data[3] : params.data;
+            return `任务：${d.name}` +
+              `<br/>开始：${d.startDate}` +
+              `<br/>结束：${d.endDate}` +
+              `<br/>日产能：${d.capacity != null ? d.capacity : d.capacity || ''}` +
+              `<br/>总产能：${d.totalCapacity != null ? d.totalCapacity : d.total_capacity || ''}` +
+              `<br/>目标生产：${d.planQuantity != null ? d.planQuantity : d.plan_quantity || ''}` +
+              `<br/>天数：${d.days != null ? d.days : d.day || ''}` +
+              `<br/>数量：${d.quantity != null ? d.quantity : ''}`;
+          }
+        },
+        grid: { left: 120, right: 40, top: 30, bottom: 80 },
+        xAxis: {
+          type: 'time',
+          min: xMin,
+          max: xMax,
+          axisLabel: {
+            formatter: v => echarts.format.formatTime('yyyy-MM-dd', v),
+            rotate: 45 // 关键：倾斜45度
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: yData,
+          axisTick: { show: false },
+          axisLine: { show: false },
+          axisLabel: { fontWeight: 'bold' }
+        },
+        series: [{
+          type: 'custom',
+          renderItem: (params, api) => {
+            const categoryIndex = api.value(2);
+            const start = api.coord([api.value(0), categoryIndex]);
+            const end = api.coord([api.value(1), categoryIndex]);
+            const barHeight = 18;
+            const d = Array.isArray(params.data) ? params.data[3] : params.data;
+            // 调试：输出d
+            // console.log('renderItem d:', d);
+            let fillColor = api.style().fill;
+            if (d && d.itemStyle && d.itemStyle.color) {
+              fillColor = d.itemStyle.color;
+            } else if (d && d.name && d.name.indexOf('预览') !== -1) {
+              // 兜底：只要是预览条，强制绿色或红色
+              fillColor = '#67C23A';
+            }
+            return {
+              type: 'rect',
+              shape: {
+                x: start[0],
+                y: start[1] - barHeight / 2,
+                width: end[0] - start[0],
+                height: barHeight,
+                r: 6
+              },
+              style: {
+                ...api.style(),
+                fill: fillColor
+              }
+            };
+          },
+          encode: {
+            x: [0, 1],
+            y: 2
+          },
+          data: taskData.map((d, i) => [d.value[0], d.value[1], i, d]),
+          itemStyle: {
+            borderRadius: 6
+          }
+        }]
+      };
+      this.chart.setOption(option);
+    },
+    resizeChart() {
+      if (this.chart) this.chart.resize();
+    }
+  }
+};
+</script>
+
+<style>
+.echarts-gantt-wrapper {
+  width: 100%;
+  min-height: 220px;
+  background: #fff;
+}
+</style> 

klp-ui/src/views/wms/productionLine/index.vue

@@ -1,158 +1,182 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="产线编号" prop="lineCode">
-        <el-input
-          v-model="queryParams.lineCode"
-          placeholder="请输入产线编号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="产线名称" prop="lineName">
-        <el-input
-          v-model="queryParams.lineName"
-          placeholder="请输入产线名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-     
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+  <div class="production-line-page">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="列表" name="list">
+        <!-- 原有列表内容 -->
+        <div v-show="activeTab === 'list'">
+          <!-- 保持原有内容不变 -->
+          <div class="list-content">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+              <el-form-item label="产线编号" prop="lineCode">
+                <el-input
+                  v-model="queryParams.lineCode"
+                  placeholder="请输入产线编号"
+                  clearable
+                  @keyup.enter.native="handleQuery"
+                />
+              </el-form-item>
+              <el-form-item label="产线名称" prop="lineName">
+                <el-input
+                  v-model="queryParams.lineName"
+                  placeholder="请输入产线名称"
+                  clearable
+                  @keyup.enter.native="handleQuery"
+                />
+              </el-form-item>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
 
-    <el-table v-loading="loading" :data="productionLineList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="产线ID" align="center" prop="lineId" v-if="true"/>
-      <el-table-column label="产线编号" align="center" prop="lineCode" />
-      <el-table-column label="产线名称" align="center" prop="lineName" />
-      <el-table-column label="日产能" align="center" prop="capacity" />
-      <el-table-column label="产能单位" align="center" prop="unit" />
-      <el-table-column label="是否启用" align="center" prop="isEnabled">
-        <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.isEnabled"
-            :active-value="1"
-            :inactive-value="0"
-            active-text="启用"
-            inactive-text="禁用"
-            @change="handleEnabledChange(scope.row)"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button
+                  type="primary"
+                  plain
+                  icon="el-icon-plus"
+                  size="mini"
+                  @click="handleAdd"
+                >新增</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button
+                  type="success"
+                  plain
+                  icon="el-icon-edit"
+                  size="mini"
+                  :disabled="single"
+                  @click="handleUpdate"
+                >修改</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button
+                  type="danger"
+                  plain
+                  icon="el-icon-delete"
+                  size="mini"
+                  :disabled="multiple"
+                  @click="handleDelete"
+                >删除</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button
+                  type="warning"
+                  plain
+                  icon="el-icon-download"
+                  size="mini"
+                  @click="handleExport"
+                >导出</el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+            <el-table v-loading="loading" :data="productionLineList" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="55" align="center" />
+              <el-table-column label="产线ID" align="center" prop="lineId" v-if="true"/>
+              <el-table-column label="产线编号" align="center" prop="lineCode" />
+              <el-table-column label="产线名称" align="center" prop="lineName" />
+              <el-table-column label="日产能" align="center" prop="capacity" />
+              <el-table-column label="产能单位" align="center" prop="unit" />
+              <el-table-column label="是否启用" align="center" prop="isEnabled">
+                <template slot-scope="scope">
+                  <el-switch
+                    v-model="scope.row.isEnabled"
+                    :active-value="1"
+                    :inactive-value="0"
+                    active-text="启用"
+                    inactive-text="禁用"
+                    @change="handleEnabledChange(scope.row)"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="备注" align="center" prop="remark" />
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-edit"
+                    @click="handleUpdate(scope.row)"
+                  >修改</el-button>
+                  <el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-delete"
+                    @click="handleDelete(scope.row)"
+                  >删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
 
-    <!-- 添加或修改产线对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="产线编号" prop="lineCode">
-          <el-input v-model="form.lineCode" placeholder="请输入产线编号" />
-        </el-form-item>
-        <el-form-item label="产线名称" prop="lineName">
-          <el-input v-model="form.lineName" placeholder="请输入产线名称" />
-        </el-form-item>
-        <el-form-item label="日产能" prop="capacity">
-          <el-input v-model="form.capacity" placeholder="请输入日产能" />
-        </el-form-item>
-        <el-form-item label="产能单位" prop="unit">
-          <el-input v-model="form.unit" placeholder="请输入产能单位" />
-        </el-form-item>
-        <el-form-item label="是否启用" prop="isEnabled">
-          <el-switch
-            v-model="form.isEnabled"
-            :active-value="1"
-            :inactive-value="0"
-            active-text="启用"
-            inactive-text="禁用"
-          />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+            <pagination
+              v-show="total>0"
+              :total="total"
+              :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize"
+              @pagination="getList"
+            />
+
+            <!-- 添加或修改产线对话框 -->
+            <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+              <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                <el-form-item label="产线编号" prop="lineCode">
+                  <el-input v-model="form.lineCode" placeholder="请输入产线编号" />
+                </el-form-item>
+                <el-form-item label="产线名称" prop="lineName">
+                  <el-input v-model="form.lineName" placeholder="请输入产线名称" />
+                </el-form-item>
+                <el-form-item label="日产能" prop="capacity">
+                  <el-input v-model="form.capacity" placeholder="请输入日产能" />
+                </el-form-item>
+                <el-form-item label="产能单位" prop="unit">
+                  <el-input v-model="form.unit" placeholder="请输入产能单位" />
+                </el-form-item>
+                <el-form-item label="是否启用" prop="isEnabled">
+                  <el-switch
+                    v-model="form.isEnabled"
+                    :active-value="1"
+                    :inactive-value="0"
+                    active-text="启用"
+                    inactive-text="禁用"
+                  />
+                </el-form-item>
+                <el-form-item label="备注" prop="remark">
+                  <el-input v-model="form.remark" placeholder="请输入备注" />
+                </el-form-item>
+              </el-form>
+              <div slot="footer" class="dialog-footer">
+                <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+              </div>
+            </el-dialog>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="甘特图" name="gantt">
+        <div v-show="activeTab === 'gantt'">
+          <div style="margin-bottom: 16px; display: flex; gap: 16px; align-items: center;">
+            <el-select v-model="selectedLineId" placeholder="选择产线" style="width: 180px" @change="fetchGanttData">
+              <el-option v-for="item in lineList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
+            </el-select>
+          </div>
+          <GanttChartEcharts :tasks="ganttTasks" v-if="ganttTasks.length > 0" />
+          <el-empty v-else description="暂无甘特图数据" />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-import { listProductionLine, getProductionLine, delProductionLine, addProductionLine, updateProductionLine } from "@/api/wms/productionLine";
+import GanttChartEcharts from './GanttChartEcharts.vue';
+import { listProductionLine, getProductionLine, delProductionLine, addProductionLine, updateProductionLine, ganttProductionLine } from "@/api/wms/productionLine";
+import { listOrder } from '@/api/wms/order';
 
 export default {
   name: "ProductionLine",
+  components: { GanttChartEcharts },
   data() {
     return {
       // 按钮loading
@@ -204,11 +228,22 @@ export default {
         isEnabled: [
           { required: true, message: "是否启用不能为空", trigger: "blur" }
         ],
-      }
+      },
+      activeTab: 'list',
+      lineList: [],
+      orderList: [],
+      selectedLineId: null,
+      selectedOrderId: null,
+      ganttTasks: [],
+      ganttOrders: [],
+      ganttOrder: {},
+      ganttOrderDetails: []
     };
   },
   created() {
     this.getList();
+    this.loadLines();
+    this.loadOrders();
   },
   methods: {
     /** 查询产线列表 */
@@ -341,7 +376,36 @@ export default {
         .finally(() => {
           this.loading = false;
         });
+    },
+    loadLines() {
+      listProductionLine({}).then(res => {
+        this.lineList = res.rows || [];
+      });
+    },
+    loadOrders() {
+      listOrder({}).then(res => {
+        this.orderList = res.rows || [];
+      });
+    },
+    fetchGanttData() {
+      if (!this.selectedLineId) {
+        this.ganttTasks = [];
+        this.ganttOrders = [];
+        return;
+      }
+      ganttProductionLine({
+        lineId: this.selectedLineId
+      }).then(res => {
+        this.ganttTasks = res.data.tasks || [];
+        this.ganttOrders = res.data.orders || [];
+      });
     }
   }
 };
 </script>
+
+<style scoped>
+.production-line-page {
+  padding: 16px;
+}
+</style>