Merge branch 'master' of http://10.153.19.25:10105/r/JiuMuMES

严智鑫

2025-09-22 16170b1d8429f7c31bb1a323b93c2de5137f2c6f

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

@@ -98,12 +98,29 @@
// 计划量数据
const loadPlannedData = async () => {
  try {
    const res = await request.post('/deviceInteraction/plannedAmount/chartPlanned', {
      dayCount: 30  // 确保请求30天的数据
    });
    const res = await request.post('/deviceInteraction/primitiveTask/findFinishQuantity', {});
    if (res.code === 200) {
      plannedData.value = res.data;
      updateOptionPlanned();
      // 确保数据存在
      if (res.data && Array.isArray(res.data)) {
        plannedData.value = res.data.map(item => ([
          {
            recordTime: item.CreateDate,
            type: '平方',
            value: item.area_sum || 0
          },
          {
            recordTime: item.CreateDate,
            type: '片数',
            value: item.task_quantity_sum || 0
          }
        ])).flat(); 
        
        updateOptionPlanned();
      } else {
        console.error('计划量数据格式不正确:', res.data);
      }
    } else {
      console.error('获取计划量数据失败:', res.message);
    }
  } catch (error) {
    console.error('获取计划量数据失败:', error);
@@ -114,11 +131,11 @@
// 单小时产量数据
const loadYieldData = async () => {
  try {
    const res = await request.post('/deviceInteraction/yield/chartYield', {
    const res = await request.post('/deviceInteraction/taskingLog/findHourlyOutput', {
      dayCount: 30  // 确保请求30天的数据
    });
    if (res.code === 200) {
      yieldData.value = res.data;
    if (res.code === 200 && res.data && res.data.dailyStats) {
      yieldData.value = res.data.dailyStats;
      updateOptionYield(yieldTarget1.value, yieldTarget2.value);
    }
  } catch (error) {
@@ -144,11 +161,60 @@
// 加载在制量数据
const loadInventoryData = async () => {
  try {
    const res = await request.post('/deviceInteraction/quantity/chartQuantity', {
      dayCount: 30  // 确保请求30天的数据
    // 获取日期数组
    const { dates } = generateMonthDates();

    // 获取半成品数据
    const resQuantity = await request.post('/deviceInteraction/quantity/chartQuantity', {
      dayCount: 30
    });
    if (res.code === 200) {
      quantityData.value = res.data;

    // 获取库位数据（7014和7016）
    const resWareHouse = await request.post('/deviceInteraction/taskingLog/selectWareHouse', {
      dayCount: 30
    });

    if (resQuantity.code === 200 && resWareHouse.code === 200) {
      // 处理半成品数据
      const semiData = Array(dates.length).fill(0);
      const data7014 = Array(dates.length).fill(0);
      const data7016 = Array(dates.length).fill(0);

      // 处理半成品数据
      if (resQuantity.data) {
        resQuantity.data.forEach(item => {
          if (item.locationCode === '半成品') {
            const date = new Date(item.recordTime || item.recordDate);
            const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
            const dateIndex = dates.indexOf(formattedDate);
            if (dateIndex !== -1) {
              semiData[dateIndex] = item.quantity;
            }
          }
        });
      }

      // 处理库位数据
      if (resWareHouse.data) {
        resWareHouse.data.forEach(item => {
          const dateIndex = dates.indexOf(item.date);
          if (dateIndex !== -1) {
            if (item.warehouse === 7014) {
              data7014[dateIndex] = item.count;
            } else if (item.warehouse === 7016) {
              data7016[dateIndex] = item.count;
            }
          }
        });
      }

      // 更新图表数据
      quantityData.value = {
        semiData,
        data7014,
        data7016
      };

      updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value);
    }
  } catch (error) {
@@ -207,7 +273,8 @@
  const dates = [];
  for (let i = 1; i <= daysInMonth; i++) {
    const date = new Date(currentYear, currentMonth, i);
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${i}`;
    // 修改日期格式为 YYYY-MM-DD
    const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
    dates.push(formattedDate);
  }

@@ -236,7 +303,7 @@
  // 生成当月所有日期的数组
  const dates = [];
  for (let d = new Date(firstDayOfMonth); d <= lastDayOfMonth; d.setDate(d.getDate() + 1)) {
    dates.push(`${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`);
    dates.push(`${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`);
  }
  const daysInMonth = dates.length;

@@ -251,16 +318,15 @@
  // 根据API返回的数据结构进行分组处理
  sortedData.forEach(item => {
    const date = new Date(item.recordTime);
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    const dateIndex = dates.indexOf(formattedDate);
    if (dateIndex !== -1) {
      // 根据type字段区分平方和片数
      if (item.type === '平方') {
        squareData[dateIndex] = item.value;
        totalSquare += item.value || 0;
        squareData[dateIndex] = Number(item.value) || 0;
        totalSquare += Number(item.value) || 0;
      } else if (item.type === '片数') {
        pieceData[dateIndex] = item.value;
        totalPieces += item.value || 0;
        pieceData[dateIndex] = Number(item.value) || 0;
        totalPieces += Number(item.value) || 0;
      }
    }
  });
@@ -273,7 +339,9 @@
  if (textDay && textprice && textarea) {
    // 格式化日期显示
    const formatDate = (date) => {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${date.getFullYear()}-${month}-${day}`;
    };

    textDay.innerHTML = "日期：<br>" + formatDate(firstDayOfMonth) + " - " + formatDate(lastDayOfMonth);
@@ -303,16 +371,10 @@
    legend: {
      data: ['平方', '片数'],
      icon: 'roundRect',
      // x:'left',
      // y:'center',
      // orient: 'vertical', 
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white',
        formatter: function (name) {
          return '{vertical|' + name.split('').join('\n') + '}';
        }
        color: 'white'
      }
    },
    grid: [
@@ -368,7 +430,6 @@
        gridIndex: 0,
        axisLabel: {
          fontSize: 20,
          formatter: '{value} ',
          color: 'white',
          show: false
        },
@@ -381,7 +442,6 @@
        gridIndex: 1,
        axisLabel: {
          fontSize: 20,
          formatter: '{value} ',
          color: 'white',
          show: false
        },
@@ -444,20 +504,13 @@
    ]
  };

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

const updateOptionYield = (targetValue1, targetValue2) => {
  // 按日期排序并处理数据
  const sortedData = [...yieldData.value].sort((a, b) =>
    new Date(a.recordTime) - new Date(b.recordTime)
    new Date(a.date) - new Date(b.date)
  );

  // 获取当月日期数组
@@ -469,15 +522,12 @@

  // 为每个日期准备数据
  sortedData.forEach(item => {
    const date = new Date(item.recordTime);
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    const date = new Date(item.date);
    const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    const dateIndex = dates.indexOf(formattedDate);
    if (dateIndex !== -1) {
      if (item.lineNo === '一线') {
        line1Data[dateIndex] += item.yieldvalue;
      } else if (item.lineNo === '二线') {
        line2Data[dateIndex] += item.yieldvalue;
      }
      line1Data[dateIndex] = Number(item.line1HourlyAvg || 0);
      line2Data[dateIndex] = Number(item.line2HourlyAvg || 0);
    }
  });

@@ -621,7 +671,8 @@
        label: {
          show: true,
          fontSize: 20,
          color: 'white'
          color: 'white',
          formatter: '{c}'  // 显示数值
        },
        areaStyle: {
          color: '#000000',
@@ -661,7 +712,8 @@
        label: {
          show: true,
          fontSize: 20,
          color: 'white'
          color: 'white',
          formatter: '{c}'  // 显示数值
        },
        areaStyle: {
          color: 'white',
@@ -685,12 +737,6 @@
    ]
  };

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

@@ -710,7 +756,7 @@
  // 为每个日期准备数据
  sortedData.forEach(item => {
    const date = new Date(item.recordTime || item.recordDate);
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    const dateIndex = dates.indexOf(formattedDate);
    if (dateIndex !== -1) {
      if (item.lineNo === '标准') {
@@ -768,22 +814,6 @@
        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%',
@@ -949,46 +979,18 @@
    ]
  };

  // 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 = (targetValue1, targetValue2, targetValue3) => {
  // 按日期排序并处理数据

  const sortedData = [...quantityData.value].sort((a, b) =>
    new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
  );

  // 获取当月日期数组
  const { dates, daysInMonth } = generateMonthDates();

  // 分离各库位数据
  const semiData = Array(daysInMonth).fill(0);
  const data7014 = Array(daysInMonth).fill(0);
  const data7016 = Array(daysInMonth).fill(0);

  // 为每个日期准备数据
  sortedData.forEach(item => {
    const date = new Date(item.recordTime || item.recordDate);
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    const dateIndex = dates.indexOf(formattedDate);
    if (dateIndex !== -1) {
      if (item.locationCode === '半成品') {
        semiData[dateIndex] = item.quantity;
      } else if (item.locationCode === '7014') {
        data7014[dateIndex] = item.quantity;
      } else if (item.locationCode === '7016') {
        data7016[dateIndex] = item.quantity;
      }
    }
  });
  // 使用quantityData中的数据
  const semiData = quantityData.value?.semiData || Array(daysInMonth).fill(0);
  const data7014 = quantityData.value?.data7014 || Array(daysInMonth).fill(0);
  const data7016 = quantityData.value?.data7016 || Array(daysInMonth).fill(0);

  // 在制量的配置 - 上中下三层布局
  const OptionQuantity = {
@@ -1283,15 +1285,11 @@
    ]
  };

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

let refreshInterval = null
let checkTargetsInterval = null

onMounted(() => {
  setScale()
@@ -1317,7 +1315,7 @@
      await loadPlannedData()

      // 设置定时刷新数据
      const refreshInterval = setInterval(async () => {
      refreshInterval = setInterval(async () => {
        try {
          await loadYieldData()
          await loadUtilizationData()
@@ -1330,7 +1328,7 @@
      }, 15000) // 每15秒刷新一次

      // 添加监听localStorage变化的定时器
      const checkTargetsInterval = setInterval(() => {
      checkTargetsInterval = setInterval(() => {
        const newYieldTarget1 = Number(localStorage.getItem('yieldTarget1'))
        const newYieldTarget2 = Number(localStorage.getItem('yieldTarget2'))
        const newUtilizationTarget1 = Number(localStorage.getItem('utilizationTarget1'))
@@ -1360,10 +1358,6 @@
        }
      }, 1000) // 每秒检查一次

      onUnmounted(() => {
        clearInterval(refreshInterval)
        clearInterval(checkTargetsInterval)
      })
    } catch (error) {
      console.error('初始化数据失败:', error)
    }
@@ -1371,7 +1365,19 @@
})

onUnmounted(() => {
  // 清理事件监听器
  window.removeEventListener('resize', handleResize)
  
  // 清理定时器
  if (refreshInterval) {
    clearInterval(refreshInterval)
    refreshInterval = null
  }
  if (checkTargetsInterval) {
    clearInterval(checkTargetsInterval)
    checkTargetsInterval = null
  }
  
  // 清理所有图表实例
  charts.forEach(chart => {
    if (chart && !chart.isDisposed()) {