看板2更新

huang

2025-04-18 1460aa1d5f2b5722d43ed31724594c006213bea7

看板2更新

 UI-Project/src/views/KanbanData/kanbanData.vue

@@ -392,6 +392,12 @@
    return
  }

  // 检查是否存在相同日期和生产线的记录（排除当前记录）
  if (checkExists(row.recordDate, row.lineNo, yieldData.value, row.id)) {
    ElMessage.error('该日期和生产线的记录已存在')
    return
  }

  try {
    // 转换日期格式为服务器需要的格式 yyyy-MM-dd HH:mm:ss
    const date = new Date(row.recordDate);
@@ -431,6 +437,12 @@
    return
  }

  // 检查是否存在相同日期和生产线的记录（排除当前记录）
  if (checkExists(row.recordDate, row.lineNo, utilizationData.value, row.id)) {
    ElMessage.error('该日期和生产线的记录已存在')
    return
  }

  try {
    // 转换日期格式为服务器需要的格式 yyyy-MM-dd HH:mm:ss
    const date = new Date(row.recordDate);
@@ -470,6 +482,12 @@
    return
  }

  // 检查是否存在相同日期和类型的记录（排除当前记录）
  if (checkExists(row.recordDate, row.locationCode, quantityData.value, row.id)) {
    ElMessage.error('该日期和类型的记录已存在')
    return
  }

  try {
    // 拼接日期时间字符串，确保是当天的00:00:00
    const dateStr = row.recordDate;

 UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue

@@ -150,10 +150,10 @@
  const today = new Date();
  const currentYear = today.getFullYear();
  const currentMonth = today.getMonth();
  

  // 获取当月的天数
  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
  

  // 生成日期数组
  const dates = [];
  for (let i = 1; i <= daysInMonth; i++) {
@@ -161,7 +161,7 @@
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${i}`;
    dates.push(formattedDate);
  }
  

  return { dates, daysInMonth };
}

@@ -170,20 +170,20 @@
  const sortedData = [...plannedData.value].sort((a, b) =>
    new Date(a.recordTime) - new Date(b.recordTime)
  );
  

  // 获取当前日期
  const today = new Date();
  const currentYear = today.getFullYear();
  const currentMonth = today.getMonth();
  

  // 获取当月名称
  const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  const currentMonthName = monthNames[currentMonth];
  

  // 获取当月的第一天和最后一天
  const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
  const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0);
  

  // 生成当月所有日期的数组
  const dates = [];
  for (let d = new Date(firstDayOfMonth); d <= lastDayOfMonth; d.setDate(d.getDate() + 1)) {
@@ -192,7 +192,7 @@
  const daysInMonth = dates.length;

  // 分离平方和片数数据
  const squareData = Array(daysInMonth).fill(0); 
  const squareData = Array(daysInMonth).fill(0);
  const pieceData = Array(daysInMonth).fill(0);

  // 用于计算总计
@@ -261,9 +261,9 @@
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white',
           formatter: function (name) {
                return '{vertical|' + name.split('').join('\n') + '}';
            }
        formatter: function (name) {
          return '{vertical|' + name.split('').join('\n') + '}';
        }
      }
    },
    grid: [
@@ -356,13 +356,17 @@
        },
        label: {
          show: true,
          fontSize: 20,
          fontSize: 15,
          formatter: (params) => {
            return params.value ? Math.floor(Number(params.value)) : '0';
          },
          color: 'white'
        },
        data: squareData
        data: squareData,
        areaStyle: {
          color: '#000000',
          opacity: 0.3
        }
      },
      {
        name: '片数',
@@ -379,21 +383,26 @@
        },
        label: {
          show: true,
          fontSize: 20,
          fontSize: 15,
          color: 'white'
        },
        data: pieceData
        data: pieceData,
        areaStyle: {
          color: 'white',
          opacity: 0.3
        }
      }
    ]
  };

  // 绘制图表
  const chartDom = document.getElementById('drawLineChart_day51');
  if (chartDom) {
    const chart = echarts.init(chartDom);
    chart.setOption(OptionDayMode);
    charts.push(chart);
  }
  // const chartDom = document.getElementById('drawLineChart_day51');
  // if (chartDom) {
  //   const chart = echarts.init(chartDom);
  //   chart.setOption(OptionDayMode);
  //   charts.push(chart);
  // }
  draw('drawLineChart_day51', OptionDayMode)
}

const updateOptionYield = () => {
@@ -545,6 +554,10 @@
          show: true,
          fontSize: 20,
          color: 'white'
        },
        areaStyle: {
          color: '#000000',
          opacity: 0.3
        }
      },
      {
@@ -567,17 +580,22 @@
          show: true,
          fontSize: 20,
          color: 'white'
        },
        areaStyle: {
          color: 'white',
          opacity: 0.3
        }
      }
    ]
  };

  const chartDom = document.getElementById('drawLineChart_yield');
  if (chartDom) {
    const chart = echarts.init(chartDom);
    chart.setOption(OptionYield);
    charts.push(chart);
  }
  // const chartDom = document.getElementById('drawLineChart_yield');
  // if (chartDom) {
  //   const chart = echarts.init(chartDom);
  //   chart.setOption(OptionYield);
  //   charts.push(chart);
  // }
  draw('drawLineChart_yield', OptionYield)
}

const updateOptionUtilization = () => {
@@ -590,8 +608,8 @@
  const { dates, daysInMonth } = generateMonthDates();

  // 分离标准和定制数据
  const line1Data = Array(daysInMonth).fill(0); 
  const line2Data = Array(daysInMonth).fill(0); 
  const line1Data = Array(daysInMonth).fill(null);
  const line2Data = Array(daysInMonth).fill(null);

  // 为每个日期准备数据
  sortedData.forEach(item => {
@@ -600,9 +618,9 @@
    const dateIndex = dates.indexOf(formattedDate);
    if (dateIndex !== -1) {
      if (item.lineNo === '标准') {
        line1Data[dateIndex] = item.utilizationRate || null;  
        line1Data[dateIndex] = item.utilizationRate || null;
      } else if (item.lineNo === '定制') {
        line2Data[dateIndex] = item.utilizationRate || null;  
        line2Data[dateIndex] = item.utilizationRate || null;
      }
    }
  });
@@ -628,13 +646,29 @@
      icon: 'roundRect',
      x: 'left',
      y: 'center',
      orient:'vertical',
      orient: 'vertical',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white'
      }
    },
    // toolbox: {
    //   show: true,
    //   itemSize: 20,
    //   iconStyle: {
    //     borderColor: 'white'
    //   },
    //   feature: {
    //     dataZoom: {
    //       yAxisIndex: 'none'
    //     },
    //     dataView: { readOnly: false },
    //     magicType: { type: ['line', 'bar'] },
    //     restore: {},
    //     saveAsImage: {}
    //   },
    // },
    grid: [{
      left: '5%',
      right: '1%',
@@ -686,8 +720,8 @@
      {
        type: 'value',
        gridIndex: 0,
        // min: 96, // 设置最小值为96%
        // max: 98,
        min: 96, // 设置最小值为96%
        max: 97.6,
        axisLabel: {
          fontSize: 20,
          color: 'white',
@@ -701,8 +735,8 @@
      {
        type: 'value',
        gridIndex: 1,
        // min: 96, // 设置最小值为96%
        // max: 98,
        min: 96, // 设置最小值为96%
        max: 97.6,
        axisLabel: {
          fontSize: 20,
          color: 'white',
@@ -733,9 +767,13 @@
        data: line1Data,
        label: {
          show: true,
          fontSize: 20,
          fontSize: 17,
          color: 'white',
          formatter: '{c}%'
        },
        areaStyle: {
          color: '#000000',
          opacity: 0.3
        }
      },
      {
@@ -756,20 +794,26 @@
        data: line2Data,
        label: {
          show: true,
          fontSize: 20,
          fontSize: 17,
          color: 'white',
          formatter: '{c}%'
        },
        areaStyle: {
          color: 'white',
          opacity: 0.3
        }
      }
    ]
  };

  const chartDom = document.getElementById('drawLineChart_utilization');
  if (chartDom) {
    const chart = echarts.init(chartDom);
    chart.setOption(OptionUtilization);
    charts.push(chart);
  }
  // const chartDom = document.getElementById('drawLineChart_utilization');
  // if (chartDom) {
  //   const chart = echarts.init(chartDom);
  //   chart.setOption(OptionUtilization);
  //   charts.push(chart);
  // }
  draw('drawLineChart_utilization',OptionUtilization);
  
}

const updateOptionQuantity = () => {
@@ -823,7 +867,7 @@
      icon: 'roundRect',
      x: 'left',
      y: 'center',
      orient:'vertical',
      orient: 'vertical',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
@@ -966,6 +1010,10 @@
          show: true,
          fontSize: 20,
          color: 'white'
        },
        areaStyle: {
          color: '#91cc75',
          opacity: 0.3
        }
      },
      {
@@ -988,6 +1036,10 @@
          show: true,
          fontSize: 20,
          color: 'white'
        },
        areaStyle: {
          color: '#000000',
          opacity: 0.3
        }
      },
      {
@@ -1010,17 +1062,22 @@
          show: true,
          fontSize: 20,
          color: 'white'
        },
        areaStyle: {
          color: 'white',
          opacity: 0.3
        }
      }
    ]
  };

  const chartDom = document.getElementById('drawLineChart_quantity');
  if (chartDom) {
    const chart = echarts.init(chartDom);
    chart.setOption(OptionQuantity);
    charts.push(chart);
  }
  // const chartDom = document.getElementById('drawLineChart_quantity');
  // if (chartDom) {
  //   const chart = echarts.init(chartDom);
  //   chart.setOption(OptionQuantity);
  //   charts.push(chart);
  // }
  draw('drawLineChart_quantity',OptionQuantity);
}


@@ -1070,10 +1127,10 @@

      <div style="width:100% ;height: 1080px;">
        <div style="width:100% ;height: 25%;border: 1px solid #ccc;">
          <div id="drawLineChart_day11" style="height: 100%;width: 30%;border: 1px solid #ccc;float: left;">日单达成率-片数
          <div id="drawLineChart_day11" style="height: 100%;width: 25%;border: 1px solid #ccc;float: left;">日单达成率-片数
          </div>

          <div style="width:70% ;height: 100%;border: 1px solid #ccc;float: left;">
          <div style="width:75% ;height: 100%;border: 1px solid #ccc;float: left;">
            <div id="drawLineChart_day51" style="height: 100%;width: 80%;border: 1px solid #ccc;float: left;">计划量-片数、平方
            </div>
            <div id="drawLineChart_day91" style="height: 100%;width: 20%;float: left;">
@@ -1126,31 +1183,34 @@
      legend: {
        data: ['计划量', '一线', '二线'],
        icon: 'roundRect',
        itemGap: 50,
        y:'bottom',
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white'
        }
      },
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        },
        iconStyle: {
          color: 'white' // 设置工具框图标颜色为白色
        }
      },
      // toolbox: {
      //   show: true,
      //   feature: {
      //     dataZoom: {
      //       yAxisIndex: 'none'
      //     },
      //     dataView: { readOnly: false },
      //     magicType: { type: ['line', 'bar'] },
      //     restore: {},
      //     saveAsImage: {}
      //   },
      //   iconStyle: {
      //     color: 'white' // 设置工具框图标颜色为白色
      //   }
      // },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        bottom: '20%',
        top: '10%',
        containLabel: true
      },
      xAxis: [
@@ -1179,7 +1239,8 @@
          nameTextStyle: {
            fontSize: 20,
            color: 'white' // 设置 x 轴名称颜色为白色
          }
          },
          position: 'top'
        }
      ],
      yAxis: [
@@ -1374,7 +1435,7 @@
.dashboard-container {
  position: absolute;
  width: 2218px;
  

  background: linear-gradient(to bottom, #001f3f, #0074d9d7);
  color: white;
  overflow: hidden;