看板大屏2修改页面

huang

2025-04-17 3a0087aa5e3eed5d9d7a793a17dc01fd1d6df80c

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

@@ -4,8 +4,9 @@
import request from '@/utils/request'

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


// 计算缩放比例并应用
const setScale = () => {
@@ -44,21 +45,22 @@
// 存储所有图表实例
const charts = []

// 获取能耗数据
const loadEnergyData = async () => {

// 计划量数据
const loadPlannedData = async () => {
  try {
    const res = await request({
      url: '/deviceInteraction/energy/consumption/chartEnergy',
      method: 'post'
    })
    const res = await request.post('/deviceInteraction/plannedAmount/chartPlanned', {
      dayCount: 30  // 确保请求30天的数据
    });
    if (res.code === 200) {
      console.log('能耗数据加载成功')
      // 暂时不处理能耗数据
      plannedData.value = res.data;
      updateOptionPlanned();
    }
  } catch (error) {
    console.error('获取能耗数据失败:', error)
    console.error('获取计划量数据失败:', error);
  }
}


// 单小时产量数据
const loadYieldData = async () => {
@@ -105,10 +107,10 @@
  }
}

const plannedData = ref([]) // 计划量数据
const yieldData = ref([]) // 单小时产量数据
const utilizationData = ref([]) // 利用率数据
const quantityData = ref([]) // 在制量数据


const notCompleteData = ref([]) // 完整数据集
const displayedData = ref([]) // 当前显示的数据集
@@ -136,28 +138,277 @@
  }
}

// 在 setup 中定义 draw 方法
const draw = (name, Option) => {
  const chart = echarts.init(document.getElementById(name))
  chart.setOption(Option)
  charts.push(chart)
}

const updateOptionYield = () => {
  // 按日期排序并处理数据
  const sortedData = [...yieldData.value].sort((a, b) => 
    new Date(a.recordTime) - new Date(b.recordTime)
  );
  
  // 生成最近30天的日期
// 辅助函数：生成当前月份的日期数组
const generateMonthDates = () => {
  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 = 29; i >= 0; i--) {
    const date = new Date();
    date.setDate(today.getDate() - i);
    // 确保年月日格式完整
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
  for (let i = 1; i <= daysInMonth; i++) {
    const date = new Date(currentYear, currentMonth, i);
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${i}`;
    dates.push(formattedDate);
  }
  
  // 分离一线和二线数据
  const line1Data = Array(30).fill(0);
  const line2Data = Array(30).fill(0);
  return { dates, daysInMonth };
}

const updateOptionPlanned = () => {
  // 按日期排序并处理数据
  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()}`);
  }
  const daysInMonth = dates.length;

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

  // 用于计算总计
  let totalSquare = 0;
  let totalPieces = 0;

  // 根据API返回的数据结构进行分组处理
  sortedData.forEach(item => {
    const date = new Date(item.recordTime);
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    const dateIndex = dates.indexOf(formattedDate);
    if (dateIndex !== -1) {
      // 根据type字段区分平方和片数
      if (item.type === '平方') {
        squareData[dateIndex] = item.value;
        totalSquare += item.value || 0;
      } else if (item.type === '片数') {
        pieceData[dateIndex] = item.value;
        totalPieces += item.value || 0;
      }
    }
  });

  // 更新右侧统计数据
  const textDay = document.getElementById('textDay');
  const textprice = document.getElementById('textprice');
  const textarea = document.getElementById('textarea');

  if (textDay && textprice && textarea) {
    // 格式化日期显示
    const formatDate = (date) => {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    };

    textDay.innerHTML = "日期：<br>" + formatDate(firstDayOfMonth) + " - " + formatDate(lastDayOfMonth);
    textprice.innerHTML = "片数：" + Math.floor(totalPieces);
    textarea.innerHTML = "平方数：" + Math.floor(totalSquare);
  }

  // 计划量图表配置
  const OptionDayMode = {
    title: {
      text: `${currentMonthName}完成量`,
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        label: {
          fontSize: 16,
          color: 'white'
        }
      }
    },
    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') + '}';
            }
      }
    },
    grid: [
      {
        left: '3%',
        right: '3%',
        top: '15%',
        height: '35%',
        containLabel: true
      },
      {
        left: '3%',
        right: '3%',
        top: '55%',
        height: '35%',
        containLabel: true
      }
    ],
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: dates,
        gridIndex: 0,
        axisLabel: {
          show: false
        }
      },
      {
        type: 'category',
        boundaryGap: false,
        data: dates,
        gridIndex: 1,
        axisLabel: {
          fontSize: 20,
          color: 'white',
          interval: 'auto',
          formatter: (value, index) => {
            if (value.includes('-')) {
              if (index === 0) {
                //return value.slice(2);
              }
              return value.split('-').slice(2).join('-');
            }
            return value;
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        gridIndex: 0,
        axisLabel: {
          fontSize: 20,
          formatter: '{value} ',
          color: 'white',
          show: false
        },
        splitLine: {
          show: false
        }
      },
      {
        type: 'value',
        gridIndex: 1,
        axisLabel: {
          fontSize: 20,
          formatter: '{value} ',
          color: 'white',
          show: false
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '平方',
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 0,
        lineStyle: {
          width: 4,
          color: '#000000'
        },
        itemStyle: {
          color: '#000000'
        },
        label: {
          show: true,
          fontSize: 20,
          formatter: (params) => {
            return params.value ? Math.floor(Number(params.value)) : '0';
          },
          color: 'white'
        },
        data: squareData
      },
      {
        name: '片数',
        type: 'line',
        xAxisIndex: 1,
        yAxisIndex: 1,
        connectNulls: false,
        lineStyle: {
          width: 4,
          color: 'white'
        },
        itemStyle: {
          color: 'white'
        },
        label: {
          show: true,
          fontSize: 20,
          color: 'white'
        },
        data: pieceData
      }
    ]
  };

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

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

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

  // 分离一线和二线数据
  const line1Data = Array(daysInMonth).fill(0);
  const line2Data = Array(daysInMonth).fill(0);

  // 为每个日期准备数据
  sortedData.forEach(item => {
    const date = new Date(item.recordTime);
@@ -177,7 +428,7 @@
    title: {
      text: '单小时产量',
      textStyle: {
        fontSize: 25,
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white'
      }
@@ -190,21 +441,25 @@
    },
    legend: {
      data: ['一线', '二线'],
      icon: 'roundRect',
      x: 'left',
      y: 'center',
      orient: 'vertical',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white'
        color: 'white',
      }
    },
    grid: [{
      left: '3%',
      right: '4%',
      left: '5%',
      right: '1%',
      top: '15%',
      height: '35%',
      height: '30%',
      containLabel: true
    }, {
      left: '3%',
      right: '4%',
      left: '5%',
      right: '1%',
      top: '55%',
      height: '35%',
      containLabel: true
@@ -227,16 +482,16 @@
        axisLabel: {
          fontSize: 20,
          color: 'white',
          interval: 'auto',
          interval: 0,  // 设置为 0 表示显示所有标签
          formatter: (value, index) => {
            // 如果是日期格式
            if (value.includes('-')) {
              // 对第一个日期显示完整年月日
              if (index === 0) {
                return value;  // 返回完整日期 (例如: 2024-03-21)
                //return value.slice(2);  // 返回完整日期 (例如: 2024-03-21)
              }
              // 其他日期只显示月-日
              return value.split('-').slice(1).join('-');  // (例如: 03-21)
              return value.split('-').slice(2).join('-');  // (例如: 03-21)
            }
            return value;
          }
@@ -250,11 +505,11 @@
        axisLabel: {
          fontSize: 20,
          color: 'white',
          show:false
          show: false
        },
        splitLine: {
          show: false // 隐藏横线
                }
        }
      },
      {
        type: 'value',
@@ -262,11 +517,11 @@
        axisLabel: {
          fontSize: 20,
          color: 'white',
          show:false
          show: false
        },
        splitLine: {
          show: false // 隐藏横线
                }
        }
      }
    ],
    series: [
@@ -277,10 +532,10 @@
        yAxisIndex: 0,
        lineStyle: {
          width: 4,
          color: '#91cc75'  // 设置一线颜色
          color: '#000000'  // 设置一线颜色
        },
        itemStyle: {
          color: '#91cc75'
          color: '#000000'
        },
        emphasis: {
          focus: 'series'
@@ -288,7 +543,7 @@
        data: line1Data,
        label: {
          show: true,
          fontSize: 15,
          fontSize: 20,
          color: 'white'
        }
      },
@@ -299,10 +554,10 @@
        yAxisIndex: 1,
        lineStyle: {
          width: 4,
          color: '#5470c6'  // 设置二线颜色
          color: 'white'  // 设置二线颜色
        },
        itemStyle: {
          color: '#5470c6'
          color: 'white'
        },
        emphasis: {
          focus: 'series'
@@ -310,49 +565,44 @@
        data: line2Data,
        label: {
          show: true,
          fontSize: 15,
          fontSize: 20,
          color: 'white'
        }
      }
    ]
  };

  const chart = echarts.init(document.getElementById('drawLineChart_yield'));
  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);
  }
}

const updateOptionUtilization = () => {
  // 按日期排序并处理数据
  const sortedData = [...utilizationData.value].sort((a, b) => 
  const sortedData = [...utilizationData.value].sort((a, b) =>
    new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
  );
  
  // 生成最近30天的日期
  const today = new Date();
  const dates = [];
  for (let i = 29; i >= 0; i--) {
    const date = new Date();
    date.setDate(today.getDate() - i);
    // 确保年月日格式完整
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    dates.push(formattedDate);
  }
  
  // 分离一线和二线数据
  const line1Data = Array(30).fill(0);
  const line2Data = Array(30).fill(0);
  

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

  // 分离标准和定制数据
  const line1Data = Array(daysInMonth).fill(0); 
  const line2Data = 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.lineNo === '一线') {
        line1Data[dateIndex] = item.utilizationRate;
      } else if (item.lineNo === '二线') {
        line2Data[dateIndex] = item.utilizationRate;
      if (item.lineNo === '标准') {
        line1Data[dateIndex] = item.utilizationRate || null;  
      } else if (item.lineNo === '定制') {
        line2Data[dateIndex] = item.utilizationRate || null;  
      }
    }
  });
@@ -362,7 +612,7 @@
    title: {
      text: '利用率',
      textStyle: {
        fontSize: 25,
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white'
      }
@@ -374,7 +624,11 @@
      }
    },
    legend: {
      data: ['一线', '二线'],
      data: ['标准', '定制'],
      icon: 'roundRect',
      x: 'left',
      y: 'center',
      orient:'vertical',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
@@ -382,14 +636,14 @@
      }
    },
    grid: [{
      left: '3%',
      right: '4%',
      left: '5%',
      right: '1%',
      top: '15%',
      height: '35%',
      containLabel: true
    }, {
      left: '3%',
      right: '4%',
      left: '5%',
      right: '1%',
      top: '55%',
      height: '35%',
      containLabel: true
@@ -412,16 +666,16 @@
        axisLabel: {
          fontSize: 20,
          color: 'white',
          interval: 'auto',
          interval: 0,  // 设置为 0 表示显示所有标签
          formatter: (value, index) => {
            // 如果是日期格式
            if (value.includes('-')) {
              // 对第一个日期显示完整年月日
              if (index === 0) {
                return value;  // 返回完整日期 (例如: 2024-03-21)
                //return value.slice(2);  // 返回完整日期 (例如: 2024-03-21)
              }
              // 其他日期只显示月-日
              return value.split('-').slice(1).join('-');  // (例如: 03-21)
              return value.split('-').slice(2).join('-');  // (例如: 03-21)
            }
            return value;
          }
@@ -432,42 +686,46 @@
      {
        type: 'value',
        gridIndex: 0,
        // min: 96, // 设置最小值为96%
        // max: 98,
        axisLabel: {
          fontSize: 20,
          color: 'white',
          formatter: '{value}%',
          show:false
          show: false
        },
        splitLine: {
          show: false // 隐藏横线
                }
        }
      },
      {
        type: 'value',
        gridIndex: 1,
        // min: 96, // 设置最小值为96%
        // max: 98,
        axisLabel: {
          fontSize: 20,
          color: 'white',
          formatter: '{value}%',
          show:false
          show: false
        },
        splitLine: {
          show: false // 隐藏横线
                }
        }
      }
    ],
    series: [
      {
        name: '一线',
        name: '标准',
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 0,
        lineStyle: {
          width: 4,
          color: '#91cc75'  // 设置一线颜色
          color: '#000000'
        },
        itemStyle: {
          color: '#91cc75'
          color: '#000000'
        },
        emphasis: {
          focus: 'series'
@@ -475,22 +733,22 @@
        data: line1Data,
        label: {
          show: true,
          fontSize: 15,
          fontSize: 20,
          color: 'white',
          formatter: '{c}%'
        }
      },
      {
        name: '二线',
        name: '定制',
        type: 'line',
        xAxisIndex: 1,
        yAxisIndex: 1,
        lineStyle: {
          width: 4,
          color: '#5470c6'  // 设置二线颜色
          color: 'white'
        },
        itemStyle: {
          color: '#5470c6'
          color: 'white'
        },
        emphasis: {
          focus: 'series'
@@ -498,41 +756,36 @@
        data: line2Data,
        label: {
          show: true,
          fontSize: 15,
          fontSize: 20,
          color: 'white',
          formatter: '{c}%'
        }
      }
    ]
  };
  
  const chart = echarts.init(document.getElementById('drawLineChart_utilization'));
  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);
  }
}

const updateOptionQuantity = () => {
  // 按日期排序并处理数据
  const sortedData = [...quantityData.value].sort((a, b) => 
  const sortedData = [...quantityData.value].sort((a, b) =>
    new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
  );
  
  // 生成最近30天的日期
  const today = new Date();
  const dates = [];
  for (let i = 29; i >= 0; i--) {
    const date = new Date();
    date.setDate(today.getDate() - i);
    // 确保年月日格式完整
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    dates.push(formattedDate);
  }
  

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

  // 分离各库位数据
  const semiData = Array(30).fill(0);
  const data7014 = Array(30).fill(0);
  const data7016 = Array(30).fill(0);
  
  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);
@@ -541,9 +794,9 @@
    if (dateIndex !== -1) {
      if (item.locationCode === '半成品') {
        semiData[dateIndex] = item.quantity;
      } else if (item.locationCode === '7014库位') {
      } else if (item.locationCode === '7014') {
        data7014[dateIndex] = item.quantity;
      } else if (item.locationCode === '7016库位') {
      } else if (item.locationCode === '7016') {
        data7016[dateIndex] = item.quantity;
      }
    }
@@ -554,7 +807,7 @@
    title: {
      text: '在制量',
      textStyle: {
        fontSize: 25,
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white'
      }
@@ -566,7 +819,11 @@
      }
    },
    legend: {
      data: ['半成品', '7014库位', '7016库位'],
      data: ['半成品', '7014', '7016'],
      icon: 'roundRect',
      x: 'left',
      y: 'center',
      orient:'vertical',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
@@ -575,22 +832,22 @@
    },
    grid: [
      {
        left: '3%',
        right: '4%',
        left: '5%',
        right: '1%',
        top: '15%',
        height: '20%',
        containLabel: true
      }, 
      },
      {
        left: '3%',
        right: '4%',
        left: '5%',
        right: '1%',
        top: '45%',
        height: '20%',
        containLabel: true
      },
      {
        left: '3%',
        right: '4%',
        left: '5%',
        right: '1%',
        top: '75%',
        height: '25%',
        containLabel: true
@@ -631,16 +888,16 @@
        axisLabel: {
          fontSize: 20,
          color: 'white',
          interval: 'auto',
          interval: 0,  // 设置为 0 表示显示所有标签
          formatter: (value, index) => {
            // 如果是日期格式
            if (value.includes('-')) {
              // 对第一个日期显示完整年月日
              if (index === 0) {
                return value;  // 返回完整日期 (例如: 2024-03-21)
                //return value.slice(2);  // 返回完整日期 (例如: 2024-03-21)
              }
              // 其他日期只显示月-日
              return value.split('-').slice(1).join('-');  // (例如: 03-21)
              return value.split('-').slice(2).join('-');  // (例如: 03-21)
            }
            return value;
          }
@@ -707,21 +964,21 @@
        data: semiData,
        label: {
          show: true,
          fontSize: 14,
          fontSize: 20,
          color: 'white'
        }
      },
      {
        name: '7014库位',
        name: '7014',
        type: 'line',
        xAxisIndex: 1,
        yAxisIndex: 1,
        lineStyle: {
          width: 4,
          color: 'red'  // 设置颜色
          color: '#000000'  // 设置颜色
        },
        itemStyle: {
          color: 'red'
          color: '#000000'
        },
        emphasis: {
          focus: 'series'
@@ -729,21 +986,21 @@
        data: data7014,
        label: {
          show: true,
          fontSize: 14,
          fontSize: 20,
          color: 'white'
        }
      },
      {
        name: '7016库位',
        name: '7016',
        type: 'line',
        xAxisIndex: 2,
        yAxisIndex: 2,
        lineStyle: {
          width: 4,
          color: '#fac858'  // 设置颜色
          color: 'white'  // 设置颜色
        },
        itemStyle: {
          color: '#fac858'
          color: 'white'
        },
        emphasis: {
          focus: 'series'
@@ -751,36 +1008,44 @@
        data: data7016,
        label: {
          show: true,
          fontSize: 14,
          fontSize: 20,
          color: 'white'
        }
      }
    ]
  };
  
  const chart = echarts.init(document.getElementById('drawLineChart_quantity'));
  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);
  }
}


onMounted(() => {
  setScale()
  window.addEventListener('resize', handleResize)
  loadEnergyData();
  loadNotCompleteData();
  loadYieldData();
  loadUtilizationData();
  loadInventoryData();
  

  // 确保DOM加载完成后再初始化图表
  nextTick(() => {
    loadNotCompleteData();
    loadYieldData();
    loadUtilizationData();
    loadInventoryData();
    loadPlannedData();
  });

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

  onUnmounted(() => {
    clearInterval(refreshInterval);
  });
@@ -815,11 +1080,10 @@
              <div
                style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #ccc;">
                总计划量-片数、平方</div>
              <div id="textDay" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">日期：2023-03-01 -
                2023-03-01</div>
                <br>
              <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">片数：25</div>
              <div id="textarea" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">平方数：2999</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>
          </div>

@@ -847,187 +1111,6 @@
<script>
export default {
  mounted() {
    const OptionDayMode = {
      title: {
        text: '计划量看板',
        textStyle: {
          fontSize: 25,
          fontWeight: 'bold',
          color: 'white' // 设置标题颜色为白色
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          label: {
            fontSize: 16,
            color: 'white' // 设置提示框文字颜色为白色
          }
        }
      },
      legend: {
        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%',
          top: '15%',
          height: '35%',
          containLabel: true
        },
        {
          left: '3%',
          right: '4%',
          top: '55%',
          height: '35%',
          containLabel: true
        }
      ],
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: [],
          gridIndex: 0,
          axisLabel: {
            show: false,
            fontSize: 20,
            color: 'white'
          },
          splitLine: {
            show: false // 隐藏横线
          }
        },
        {
          type: 'category',
          boundaryGap: false,
          data: [],
          gridIndex: 1,
          axisLabel: {
            fontSize: 20,
            color: 'white',
            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;
            }
          },
          splitLine: {
            show: false // 隐藏横线
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          gridIndex: 0,
          axisLabel: {
            fontSize: 20,
            formatter: '{value} ',
            color: 'white',
            show: false
          },
          splitLine: {
            show: false // 隐藏横线
          },
          nameTextStyle: {
            fontSize: 20,
            color: 'white' // 设置 y 轴名称颜色为白色
          }
        },
        {
          type: 'value',
          gridIndex: 1,
          axisLabel: {
            fontSize: 20,
            formatter: '{value} ',
            color: 'white',
            show: false
          },
          splitLine: {
            show: false // 隐藏横线
          },
          nameTextStyle: {
            fontSize: 20,
            color: 'white' // 设置 y 轴名称颜色为白色
          }
        }
      ],
      series: [
        {
          name: '平方',
          type: 'line',
          xAxisIndex: 0,
          yAxisIndex: 0,
          barWidth: '40%',
          barGap: '10%',
          lineStyle: {
            width: 4,
            color: '#91cc75'
          },
          itemStyle: {
            color: '#91cc75'
          },
          label: {
            show: true,
            fontSize: 16,
            formatter: (params) => {
              // 保留两位小数
              return params.value ? Number(params.value).toFixed(2) : '0.00';
            },
            color: 'white' // 设置数据标签颜色为白色
          }
        },
        {
          name: '片数',
          type: 'line',
          xAxisIndex: 1,
          yAxisIndex: 1,
          barWidth: '40%',
          barGap: '10%',
          lineStyle: {
            width: 4,
            color: '#5470c6'
          },
          itemStyle: {
            color: '#5470c6'
          },
          label: {
            show: true,
            fontSize: 16,
            color: 'white' // 设置数据标签颜色为白色
          }
        }
      ]
    };

    const OptionYear = {
      tooltip: {
@@ -1041,10 +1124,12 @@
        }
      },
      legend: {
        data: ['计划量', '一线', '二线'],
        icon: 'roundRect',
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white' // 设置图例文字颜色为白色
          color: 'white'
        }
      },
      toolbox: {
@@ -1142,6 +1227,9 @@
          type: 'bar',
          barWidth: '30%',
          barGap: '10%',
          itemStyle: {
            color: '#4a86e8'
          },
          label: {
            show: true,
            fontSize: 16,
@@ -1152,20 +1240,23 @@
        }
      ]
    };


    // 请求当日产量
    request.post('/deviceInteraction/primitiveTask/findDailyOutput',
      {
        "dayCount": 1
      }).then((res) => {
        if (res.code == 200) {
          const modeOptions = res.data;
          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": 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',
@@ -1174,44 +1265,46 @@
      }).then((res) => {
        if (res.code == 200) {
          const modeOptions = res.data;
          //this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
          this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
          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');
    // 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];
          }
    //       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);
        }
      });
    //       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);
    //     }
    //   });

  },
  methods: {
@@ -1280,8 +1373,8 @@
<style scoped>
.dashboard-container {
  position: absolute;
  width: 1920px;
  /* 设计稿宽度 */
  width: 2218px;
  
  background: linear-gradient(to bottom, #001f3f, #0074d9d7);
  color: white;
  overflow: hidden;