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

严智鑫

2025-09-22 16170b1d8429f7c31bb1a323b93c2de5137f2c6f

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

@@ -1,12 +1,61 @@
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
import request from '@/utils/request'
import { useRoute } from 'vue-router'

const route = useRoute()
const dashboardRef = ref(null)
const standardWidth = 2220 // 设计稿标准宽度
const standardHeight = 1224 // 设计稿标准高度，
const standardHeight = 1224 // 设计稿标准高度

// 从路由参数中获取目标值
const yieldTarget1 = ref(Number(localStorage.getItem('yieldTarget1')) || Number(route.query.yieldTarget1) || 0)
const yieldTarget2 = ref(Number(localStorage.getItem('yieldTarget2')) || Number(route.query.yieldTarget2) || 0)
const utilizationTarget1 = ref(Number(localStorage.getItem('utilizationTarget1')) || Number(route.query.utilizationTarget1) || 0)
const utilizationTarget2 = ref(Number(localStorage.getItem('utilizationTarget2')) || Number(route.query.utilizationTarget2) || 0)
const quantityTarget1 = ref(Number(localStorage.getItem('quantityTarget1')) || Number(route.query.quantityTarget1) || 0)
const quantityTarget2 = ref(Number(localStorage.getItem('quantityTarget2')) || Number(route.query.quantityTarget2) || 0)
const quantityTarget3 = ref(Number(localStorage.getItem('quantityTarget3')) || Number(route.query.quantityTarget3) || 0)

// 监听路由参数变化
watch(() => route.query, (newQuery) => {
  if (newQuery.yieldTarget1) {
    yieldTarget1.value = Number(newQuery.yieldTarget1)
    localStorage.setItem('yieldTarget1', newQuery.yieldTarget1)
    updateOptionYield(yieldTarget1.value, yieldTarget2.value)
  }
  if (newQuery.yieldTarget2) {
    yieldTarget2.value = Number(newQuery.yieldTarget2)
    localStorage.setItem('yieldTarget2', newQuery.yieldTarget2)
    updateOptionYield(yieldTarget1.value, yieldTarget2.value)
  }
  if (newQuery.utilizationTarget1) {
    utilizationTarget1.value = Number(newQuery.utilizationTarget1)
    localStorage.setItem('utilizationTarget1', newQuery.utilizationTarget1)
    updateOptionUtilization(utilizationTarget1.value, utilizationTarget2.value)
  }
  if (newQuery.utilizationTarget2) {
    utilizationTarget2.value = Number(newQuery.utilizationTarget2)
    localStorage.setItem('utilizationTarget2', newQuery.utilizationTarget2)
    updateOptionUtilization(utilizationTarget1.value, utilizationTarget2.value)
  }
  if (newQuery.quantityTarget1) {
    quantityTarget1.value = Number(newQuery.quantityTarget1)
    localStorage.setItem('quantityTarget1', newQuery.quantityTarget1)
    updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value)
  }
  if (newQuery.quantityTarget2) {
    quantityTarget2.value = Number(newQuery.quantityTarget2)
    localStorage.setItem('quantityTarget2', newQuery.quantityTarget2)
    updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value)
  }
  if (newQuery.quantityTarget3) {
    quantityTarget3.value = Number(newQuery.quantityTarget3)
    localStorage.setItem('quantityTarget3', newQuery.quantityTarget3)
    updateOptionQuantity(quantityTarget1.value, quantityTarget2.value, quantityTarget3.value)
  }
}, { deep: true })

// 计算缩放比例并应用
const setScale = () => {
@@ -49,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);
@@ -65,12 +131,12 @@
// 单小时产量数据
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;
      updateOptionYield();
    if (res.code === 200 && res.data && res.data.dailyStats) {
      yieldData.value = res.data.dailyStats;
      updateOptionYield(yieldTarget1.value, yieldTarget2.value);
    }
  } catch (error) {
    console.error('获取单小时产量数据失败:', error);
@@ -85,7 +151,7 @@
    });
    if (res.code === 200) {
      utilizationData.value = res.data;
      updateOptionUtilization();
      updateOptionUtilization(utilizationTarget1.value, utilizationTarget2.value);
    }
  } catch (error) {
    console.error('获取利用率数据失败:', error);
@@ -95,12 +161,61 @@
// 加载在制量数据
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;
      updateOptionQuantity();

    // 获取库位数据（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) {
    console.error('获取在制量数据失败:', error);
@@ -150,18 +265,19 @@
  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++) {
    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);
  }
  

  return { dates, daysInMonth };
}

@@ -170,29 +286,29 @@
  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)) {
    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;

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

  // 用于计算总计
@@ -202,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;
      }
    }
  });
@@ -224,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);
@@ -254,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: [
@@ -319,7 +430,6 @@
        gridIndex: 0,
        axisLabel: {
          fontSize: 20,
          formatter: '{value} ',
          color: 'white',
          show: false
        },
@@ -332,7 +442,6 @@
        gridIndex: 1,
        axisLabel: {
          fontSize: 20,
          formatter: '{value} ',
          color: 'white',
          show: false
        },
@@ -356,13 +465,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,27 +492,25 @@
        },
        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);
  }
  draw('drawLineChart_day51', OptionDayMode);
}

const updateOptionYield = () => {
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)
  );

  // 获取当月日期数组
@@ -411,28 +522,43 @@

  // 为每个日期准备数据
  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);
    }
  });

  // 单小时产量的配置 - 分上下两个子图表
  const OptionYield = {
    title: {
      text: '单小时产量',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white'
      }
    },
    title: [
      {
        text: '单小时产量',
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white'
        }
      },
      {
        text: '目标' + targetValue1,
        bottom: 140, //
        textStyle: {
          color: 'white',
          fontSize: 17
        },
      },
      {
        text: '目标' + targetValue2,
        bottom: 35, // 
        textStyle: {
          color: 'white',
          fontSize: 17
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
@@ -445,10 +571,11 @@
      x: 'left',
      y: 'center',
      orient: 'vertical',
      itemGap: 90,
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white',
        color: 'white'
      }
    },
    grid: [{
@@ -544,7 +671,26 @@
        label: {
          show: true,
          fontSize: 20,
          color: 'white'
          color: 'white',
          formatter: '{c}'  // 显示数值
        },
        areaStyle: {
          color: '#000000',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue1,
              name: 'Line',
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      },
      {
@@ -566,21 +712,35 @@
        label: {
          show: true,
          fontSize: 20,
          color: 'white'
          color: 'white',
          formatter: '{c}'  // 显示数值
        },
        areaStyle: {
          color: 'white',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue2,
              name: 'Line',
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      }
    ]
  };

  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 = () => {
const updateOptionUtilization = (targetValue1, targetValue2) => {
  // 按日期排序并处理数据
  const sortedData = [...utilizationData.value].sort((a, b) =>
    new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
@@ -590,33 +750,51 @@
  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 => {
    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 === '标准') {
        line1Data[dateIndex] = item.utilizationRate || null;  
        line1Data[dateIndex] = item.utilizationRate || null;
      } else if (item.lineNo === '定制') {
        line2Data[dateIndex] = item.utilizationRate || null;  
        line2Data[dateIndex] = item.utilizationRate || null;
      }
    }
  });

  // 利用率的配置 - 分上下两个子图表
  const OptionUtilization = {
    title: {
      text: '利用率',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white'
      }
    },
    title: [
      {
        text: '利用率',
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white'
        }
      },
      {
        text: '目标' + targetValue1 + '%',
        bottom: 140, //
        textStyle: {
          color: 'white',
          fontSize: 17
        },
      },
      {
        text: '目标' + targetValue2 + '%',
        bottom: 35, // 
        textStyle: {
          color: 'white',
          fontSize: 17
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
@@ -628,7 +806,8 @@
      icon: 'roundRect',
      x: 'left',
      y: 'center',
      orient:'vertical',
      orient: 'vertical',
      itemGap: 90,
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
@@ -686,8 +865,8 @@
      {
        type: 'value',
        gridIndex: 0,
        // min: 96, // 设置最小值为96%
        // max: 98,
        min: 96, // 设置最小值为96%
        max: 97.6,
        axisLabel: {
          fontSize: 20,
          color: 'white',
@@ -701,8 +880,8 @@
      {
        type: 'value',
        gridIndex: 1,
        // min: 96, // 设置最小值为96%
        // max: 98,
        min: 96, // 设置最小值为96%
        max: 97.6,
        axisLabel: {
          fontSize: 20,
          color: 'white',
@@ -733,9 +912,27 @@
        data: line1Data,
        label: {
          show: true,
          fontSize: 20,
          fontSize: 17,
          color: 'white',
          formatter: '{c}%'
        },
        areaStyle: {
          color: '#000000',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue1,
              name: 'Line',
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      },
      {
@@ -756,55 +953,48 @@
        data: line2Data,
        label: {
          show: true,
          fontSize: 20,
          fontSize: 17,
          color: 'white',
          formatter: '{c}%'
        },
        areaStyle: {
          color: 'white',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue2,
              name: "line",
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      }
    ]
  };

  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 = () => {
  // 按日期排序并处理数据
  const sortedData = [...quantityData.value].sort((a, b) =>
    new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
  );

const updateOptionQuantity = (targetValue1, targetValue2, targetValue3) => {
  // 获取当月日期数组
  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 = {
    title: {
    title: [{
      text: '在制量',
      textStyle: {
        fontSize: 20,
@@ -812,6 +1002,31 @@
        color: 'white'
      }
    },
    {
      text: '目标' + targetValue1,
      bottom: 160, //
      textStyle: {
        color: 'white',
        fontSize: 17
      },
    },
    {
      text: '目标' + targetValue2,
      bottom: 95, // 
      textStyle: {
        color: 'white',
        fontSize: 17
      },
    },
    {
      text: '目标' + targetValue3,
      bottom: 20, // 
      textStyle: {
        color: 'white',
        fontSize: 17
      },
    },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
@@ -823,7 +1038,8 @@
      icon: 'roundRect',
      x: 'left',
      y: 'center',
      orient:'vertical',
      orient: 'vertical',
      itemGap: 50,
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
@@ -966,6 +1182,24 @@
          show: true,
          fontSize: 20,
          color: 'white'
        },
        areaStyle: {
          color: '#91cc75',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue1,
              name: 'Line',
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      },
      {
@@ -988,6 +1222,24 @@
          show: true,
          fontSize: 20,
          color: 'white'
        },
        areaStyle: {
          color: '#000000',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue2,
              name: 'Line',
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      },
      {
@@ -1010,52 +1262,129 @@
          show: true,
          fontSize: 20,
          color: 'white'
        },
        areaStyle: {
          color: 'white',
          opacity: 0.3
        },
        markLine: {
          data: [
            {
              yAxis: targetValue3,
              name: 'Line',
              label: {
                formatter: '',
              },
              lineStyle: {
                width: 2,
              }
            }
          ]
        }
      }
    ]
  };

  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()
  window.addEventListener('resize', handleResize)

  // 确保DOM加载完成后再初始化图表
  nextTick(() => {
    loadNotCompleteData();
    loadYieldData();
    loadUtilizationData();
    loadInventoryData();
    loadPlannedData();
  });
  nextTick(async () => {
    try {
      // 从localStorage中获取目标值，如果没有则从路由参数获取，都没有则使用默认值0
      yieldTarget1.value = Number(localStorage.getItem('yieldTarget1')) || Number(route.query.yieldTarget1) || 0
      yieldTarget2.value = Number(localStorage.getItem('yieldTarget2')) || Number(route.query.yieldTarget2) || 0
      utilizationTarget1.value = Number(localStorage.getItem('utilizationTarget1')) || Number(route.query.utilizationTarget1) || 0
      utilizationTarget2.value = Number(localStorage.getItem('utilizationTarget2')) || Number(route.query.utilizationTarget2) || 0
      quantityTarget1.value = Number(localStorage.getItem('quantityTarget1')) || Number(route.query.quantityTarget1) || 0
      quantityTarget2.value = Number(localStorage.getItem('quantityTarget2')) || Number(route.query.quantityTarget2) || 0
      quantityTarget3.value = Number(localStorage.getItem('quantityTarget3')) || Number(route.query.quantityTarget3) || 0

  // 设置定时刷新
  const refreshInterval = setInterval(() => {
    loadYieldData();
    loadUtilizationData();
    loadInventoryData();
    loadPlannedData();
    console.log('数据已刷新');
  }, 30000); // 每分钟刷新一次
      // 按顺序加载数据
      await loadNotCompleteData()
      await loadYieldData()
      await loadUtilizationData()
      await loadInventoryData()
      await loadPlannedData()

  onUnmounted(() => {
    clearInterval(refreshInterval);
  });
      // 设置定时刷新数据
      refreshInterval = setInterval(async () => {
        try {
          await loadYieldData()
          await loadUtilizationData()
          await loadInventoryData()
          await loadPlannedData()
          console.log('数据已刷新')
        } catch (error) {
          console.error('数据刷新失败:', error)
        }
      }, 15000) // 每15秒刷新一次

      // 添加监听localStorage变化的定时器
      checkTargetsInterval = setInterval(() => {
        const newYieldTarget1 = Number(localStorage.getItem('yieldTarget1'))
        const newYieldTarget2 = Number(localStorage.getItem('yieldTarget2'))
        const newUtilizationTarget1 = Number(localStorage.getItem('utilizationTarget1'))
        const newUtilizationTarget2 = Number(localStorage.getItem('utilizationTarget2'))
        const newQuantityTarget1 = Number(localStorage.getItem('quantityTarget1'))
        const newQuantityTarget2 = Number(localStorage.getItem('quantityTarget2'))
        const newQuantityTarget3 = Number(localStorage.getItem('quantityTarget3'))

        // 检查目标值是否有变化
        if (newYieldTarget1 !== yieldTarget1.value || newYieldTarget2 !== yieldTarget2.value) {
          yieldTarget1.value = newYieldTarget1
          yieldTarget2.value = newYieldTarget2
          updateOptionYield(newYieldTarget1, newYieldTarget2)
        }
        if (newUtilizationTarget1 !== utilizationTarget1.value || newUtilizationTarget2 !== utilizationTarget2.value) {
          utilizationTarget1.value = newUtilizationTarget1
          utilizationTarget2.value = newUtilizationTarget2
          updateOptionUtilization(newUtilizationTarget1, newUtilizationTarget2)
        }
        if (newQuantityTarget1 !== quantityTarget1.value || 
            newQuantityTarget2 !== quantityTarget2.value || 
            newQuantityTarget3 !== quantityTarget3.value) {
          quantityTarget1.value = newQuantityTarget1
          quantityTarget2.value = newQuantityTarget2
          quantityTarget3.value = newQuantityTarget3
          updateOptionQuantity(newQuantityTarget1, newQuantityTarget2, newQuantityTarget3)
        }
      }, 1000) // 每秒检查一次

    } catch (error) {
      console.error('初始化数据失败:', error)
    }
  })
})

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

</script>
@@ -1070,10 +1399,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;">
@@ -1082,8 +1411,8 @@
                总计划量-片数、平方</div>
              <div id="textDay" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">日期：</div>
              <br>
              <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">片数：</div>
              <div id="textarea" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">平方数：</div>
              <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">片数：</div>
            </div>
          </div>

@@ -1110,202 +1439,148 @@

<script>
export default {
  mounted() {

    const OptionYear = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          label: {
            fontSize: 16,
            color: 'white' // 设置提示框文字颜色为白色
  data() {
    return {
      timer: null,
      OptionYear: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              fontSize: 16,
              color: 'white' // 设置提示框文字颜色为白色
            }
          }
        }
      },
      legend: {
        data: ['计划量', '一线', '二线'],
        icon: 'roundRect',
        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' // 设置工具框图标颜色为白色
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          axisTick: { alignWithLabel: true },
          boundaryGap: true,
          axisLabel: {
        title: {
          text: '已完成                    已完成',
          left: '48%',
          bottom: 0, // 
          textStyle: {
            color: 'white',
            fontSize: 16
          },
        },
        legend: {
          data: ['计划量', '一线', '二线'],
          icon: 'roundRect',
          itemGap: 90,
          y: '80%',
          textStyle: {
            fontSize: 20,
            interval: 'auto',
            margin: 15,
            formatter: (value, index) => {
              // 如果是日期格式
              if (value.includes('-')) {
                // 对第一个日期显示完整年月日
                if (index === 0) {
                  return value;  // 返回完整日期 (例如: 2024-03-21)
            fontWeight: 'bold',
            color: 'white'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '20%',
          top: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { alignWithLabel: true },
            boundaryGap: true,
            axisLabel: {
              fontSize: 20,
              interval: 'auto',
              formatter: (value, index) => {
                // 如果是日期格式
                if (value.includes('-')) {
                  // 对第一个日期显示完整年月日
                  if (index === 0) {
                    return value;  // 返回完整日期 (例如: 2024-03-21)
                  }
                  // 其他日期只显示月-日
                  return value.split('-').slice(1).join('-');  // (例如: 03-21)
                }
                // 其他日期只显示月-日
                return value.split('-').slice(1).join('-');  // (例如: 03-21)
              }
              return value;
                return value;
              },
              color: 'white' // 设置 x 轴标签颜色为白色
            },
            color: 'white' // 设置 x 轴标签颜色为白色
          },
          nameTextStyle: {
            fontSize: 20,
            color: 'white' // 设置 x 轴名称颜色为白色
            nameTextStyle: {
              fontSize: 20,
              color: 'white' // 设置 x 轴名称颜色为白色
            },
            position: 'top',
            offset: 15 // 调整 x 轴标签的位置
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            fontSize: 20,
            color: 'white' // 设置 y 轴标签颜色为白色
          },
          nameTextStyle: {
            fontSize: 20,
            color: 'white' // 设置 y 轴名称颜色为白色
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              fontSize: 20,
              color: 'white' // 设置 y 轴标签颜色为白色
            },
            nameTextStyle: {
              fontSize: 20,
              color: 'white' // 设置 y 轴名称颜色为白色
            }
          }
        }
      ],
      series: [
        {
          name: '计划量',
          type: 'bar',
          barWidth: '30%',
          barGap: '10%',
          label: {
            show: true,
            fontSize: 16,
            formatter: (params) => params.value,
            color: 'white',
            position: 'top'
        ],
        series: [
          {
            name: '计划量',
            type: 'bar',
            barWidth: '30%',
            barGap: '10%',
            label: {
              show: true,
              fontSize: 16,
              formatter: (params) => params.value,
              color: 'white',
              position: 'top'
            }
          },
          {
            name: '一线',
            type: 'bar',
            barWidth: '30%',
            barGap: '10%',
            label: {
              show: true,
              fontSize: 16,
              formatter: (params) => params.value,
              color: 'white',
              position: 'top'
            }
          },
          {
            name: '二线',
            type: 'bar',
            barWidth: '30%',
            barGap: '10%',
            itemStyle: {
              color: '#4a86e8'
            },
            label: {
              show: true,
              fontSize: 16,
              formatter: (params) => params.value,
              color: 'white',
              position: 'top'
            }
          }
        },
        {
          name: '一线',
          type: 'bar',
          barWidth: '30%',
          barGap: '10%',
          label: {
            show: true,
            fontSize: 16,
            formatter: (params) => params.value,
            color: 'white',
            position: 'top'
          },
        },
        {
          name: '二线',
          type: 'bar',
          barWidth: '30%',
          barGap: '10%',
          itemStyle: {
            color: '#4a86e8'
          },
          label: {
            show: true,
            fontSize: 16,
            formatter: (params) => params.value,
            color: 'white',
            position: 'top'
          },
        }
      ]
        ]
      }
    };


    // 请求当日产量
    // request.post('/deviceInteraction/primitiveTask/findDailyOutput',
    //   {
    //     "dayCount": 1
    //   }).then((res) => {
    //     if (res.code == 200) {
    //       const modeOptions = res.data;
    //       console.log("获取当日产量",modeOptions);
    //       this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
    //       // this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
    //       // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
    //     } else {
    //       console.error('请求当日产量数据失败:', error);
    //     }
    //   });

    //请求日产量-月
    request.post('/deviceInteraction/primitiveTask/findDailyOutput',
      {
        "dayCount": 30
      }).then((res) => {
        if (res.code == 200) {
          const modeOptions = res.data;
          const modeOptions2 = [res.data[res.data.length - 1]];
          // this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
          //this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
          // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
          this.drawDay('drawLineChart_day11', OptionYear, modeOptions2);
        } else {
          console.error('请求日产量-月数据失败:', error);
        }
      });
    //请求计划量
    // request.post('/deviceInteraction/primitiveTask/findPlannedQuantity',
    //   {
    //     "dayCount": 30
    //   }).then((res) => {
    //     if (res.code == 200) {
    //       const modeOptions = res.data;
    //       this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
    //       let textDay = document.getElementById('textDay');
    //       let textprice = document.getElementById('textprice');
    //       let textarea = document.getElementById('textarea');

    //       let y_pingfang = res.data.map(v => { return v.area_sum });
    //       let y_pianshu = res.data.map(v => { return v.task_quantity_sum });
    //       let y_pingfang_sum = 0;
    //       let y_pianshu_sum = 0;
    //       for (let i = 0; i < y_pingfang.length; i++) {
    //         y_pingfang_sum += y_pingfang[i];
    //       }
    //       for (let i = 0; i < y_pianshu.length; i++) {
    //         y_pianshu_sum += y_pianshu[i];
    //       }

    //       textDay.innerHTML = "日期：" + "<br>" + res.data[0].CreateDate + " - " + res.data[res.data.length - 1].CreateDate;
    //       textprice.innerHTML = "片数：" + y_pianshu_sum;
    //       textarea.innerHTML = "平方数：" + Number(y_pingfang_sum).toFixed(2);
    //       // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
    //     } else {
    //       console.error('请求计划量-月数据失败:', error);
    //     }
    //   });

  },
  mounted() {
    this.fetchData();
    // 每半分钟刷新一次数据
    this.timer = setInterval(() => {
      this.fetchData();
    }, 30000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    draw(name, Option) {
@@ -1313,9 +1588,6 @@
      myChart.setOption(Option);
    },
    drawDay(name, Option, data) {
      // console.log(data);
      //Option.title.text="日看板";
      //日看板- 计划量，一线完成，二线完成（片数）
      let x_data = data.map(v => { return v.date });
      let y_jihua = data.map(v => { return v.plan });
      let y_one = data.map(v => { return v.line1 });
@@ -1327,7 +1599,6 @@
      this.draw(name, Option);
    },
    drawYear(name, Option, data) {
      //计划量- 平方，片数
      let x_data = data.map(v => { return v.CreateDate });
      let y_pingfang = data.map(v => { return v.area_sum });
      let y_pianshu = data.map(v => { return v.task_quantity_sum });
@@ -1337,44 +1608,31 @@
      Option.series[1].data = y_pianshu;
      this.draw(name, Option);
    },
    requsstData() {

    },
    // // 渲染单小时产量图表
    // drawYieldChart(data) {
    //   const option = { ...OptionYield };
    //   option.xAxis.data = data.map(v => v.date);
    //   option.series[0].data = data.map(v => v.line1_yield);
    //   option.series[1].data = data.map(v => v.line2_yield);
    //   this.draw('drawLineChart_yield', option);
    // },
    // // 渲染利用率图表
    // drawUtilizationChart(data) {
    //   const option = { ...OptionUtilization };
    //   option.xAxis.data = data.map(v => v.date);
    //   option.series[0].data = data.map(v => v.line1_utilization);
    //   option.series[1].data = data.map(v => v.line2_utilization);
    //   this.draw('drawLineChart_utilization', option);
    // },
    // // 渲染在制量图表
    // drawQuantityChart(data) {
    //   const option = { ...OptionQuantity };
    //   option.xAxis.data = data.map(v => v.date);
    //   option.series[0].data = data.map(v => v.semi_finished);
    //   option.series[1].data = data.map(v => v.location_7014);
    //   option.series[2].data = data.map(v => v.location_7016);
    //   this.draw('drawLineChart_quantity', option);
    // },

    fetchData() {
      // 请求日产量-月
      request.post('/deviceInteraction/primitiveTask/findDailyOutput', {
        "dayCount": 30
      }).then((res) => {
        if (res.code == 200) {
          const modeOptions = res.data;
          const modeOptions2 = [res.data[res.data.length - 1]];
          this.drawDay('drawLineChart_day11', this.OptionYear, modeOptions2);
        } else {
          console.error('请求日产量-月数据失败:', res);
        }
      }).catch((error) => {
        console.error('请求数据时发生错误:', error);
      });
    }
  }
}
};
</script>

<style scoped>
.dashboard-container {
  position: absolute;
  width: 2218px;
  

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