kd-aiot-frontend-mes/src/views/home/data.js

// 引入Day.js库
const dayjs = require('dayjs');
// 获取本月日期列表的函数
function getDatesInMonth() {
  let year = dayjs().year();
  let month = dayjs().month();
  const dates = [];
  const startDate = dayjs(new Date(year, month, 1));
  const endDate = dayjs(new Date(year, month + 1, 1)).subtract(1, 'day');
  let currentDate = startDate;
  while (currentDate.isBefore(endDate) || currentDate.isSame(endDate, 'day')) {
    dates.push(currentDate.format('YYYY-MM-DD'));
    currentDate = currentDate.add(1, 'day');
  }
  return dates;
}

let statusOpt = [
  { label: '待生产', value: '4' },
  { label: '生产中', value: '5' },
  { label: '已完成', value: '6' },
  { label: '已延期', value: '7' }
];

let daysOpt = [
  { label: '已延期', value: -1 },
  { label: '已完成', value: 0 }
];

export const columns = [
  {
    columnKey: 'index',
    label: '序号',
    type: 'index',
    width: 55,
    align: 'center',
    showOverflowTooltip: true,
    fixed: 'left'
  },
  {
    prop: 'batchNo',
    label: '批次号',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    prop: 'code',
    label: '生产工单编码',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    prop: 'status',
    label: '工单状态',
    align: 'center',
    showOverflowTooltip: true,
    formatter: (row) => {
      let result = statusOpt.find((item) => item.value == row.status);
      return result ? result.label : '';
    }
  },
  {
    prop: 'planStartTime',
    label: '计划开始时间',
    minWidth: '120',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    prop: 'planCompleteTime',
    label: '计划完成时间',
    minWidth: '120',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    prop: 'productName',
    label: '产品名称',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    prop: 'productCode',
    label: '产品编码',
    align: 'center',
    showOverflowTooltip: true
  },
  // {
  //     prop: 'specification',
  //     label: '规格型号',
  //     align: 'center',
  //     showOverflowTooltip: true,
  // },
  {
    prop: 'formingNum',
    label: '数量（个）',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    prop: 'taskName',
    label: '生产工序',
    align: 'center',
    showOverflowTooltip: true
  },
  {
    prop: 'days',
    label: '交期状态',
    align: 'center',
    showOverflowTooltip: true,
    formatter: (row) => {
      let result = daysOpt.find((item) => item.value == row.days);
      return result ? result.label : row.days ? '剩余' + row.days + '天' : '';
    }
  }
];

export const barOption = (series, itemStyle = {}) => {
  const axisLabel = {
    color: 'rgba(203, 231, 244, 0.72)',
    fontSize: Math.max(11, window.innerHeight * 0.011),
    hideOverlap: true
  };
  const formatAxisValue = (value) => {
    if (Math.abs(value) >= 10000) {
      return (value / 10000).toFixed(value % 10000 === 0 ? 0 : 1) + '万';
    }
    return value;
  };
  const defaultXAxis = {
    type: 'category',
    data: [
      '一月',
      '二月',
      '三月',
      '四月',
      '五月',
      '六月',
      '七月',
      '八月',
      '九月',
      '十月',
      '十一月',
      '十二月'
    ],
    axisLabel,
    axisLine: {
      lineStyle: {
        color: 'rgba(125, 211, 252, 0.35)'
      }
    },
    axisTick: {
      lineStyle: {
        color: 'rgba(125, 211, 252, 0.35)'
      }
    }
  };
  const xAxis = {
    ...defaultXAxis,
    ...(itemStyle.xAxis || {}),
    axisLabel: {
      ...defaultXAxis.axisLabel,
      ...((itemStyle.xAxis && itemStyle.xAxis.axisLabel) || {})
    },
    axisLine: {
      ...defaultXAxis.axisLine,
      ...((itemStyle.xAxis && itemStyle.xAxis.axisLine) || {})
    },
    axisTick: {
      ...defaultXAxis.axisTick,
      ...((itemStyle.xAxis && itemStyle.xAxis.axisTick) || {})
    }
  };
  return {
    backgroundColor: 'transparent',
    tooltip: {
      formatter: (item) => {
        return item.name + '：' + item.seriesName + ' ' + item.value + '个';
      },
      trigger: 'item',
      borderWidth: 1,
      borderColor: 'rgba(103, 232, 249, 0.42)',
      backgroundColor: 'rgba(4, 13, 25, 0.94)',
      extraCssText: 'box-shadow:0 8px 24px rgba(0,0,0,.28);border-radius:6px;',
      textStyle: {
        color: '#e0faff'
      }
    },
    legend: {
      // bottom: '2%',
      itemGap: window.innerHeight * 0.014,

      textStyle: {
        color: 'rgba(224, 242, 254, 0.78)',
        fontSize: Math.max(12, window.innerHeight * 0.013)
      },
      icon: 'roundRect'
    },
    grid: {
      top: 50,
      left: 34,
      right: 22,
      bottom: 20,
      containLabel: true
    },
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: '#67e8f9' },
          { offset: 0.52, color: '#22d3ee' },
          { offset: 1, color: '#0369a1' }
        ]
      },
      '#fbbf24'
    ],
    xAxis,
    yAxis: [
      {
        type: 'value',
        name: '(个)',
        splitNumber: 4,
        minInterval: 1,
        nameTextStyle: {
          align: 'center',
          color: 'rgba(224, 242, 254, 0.72)',
          fontSize: Math.max(11, window.innerHeight * 0.011),
          padding: [0, 12, -3, 0]
        },
        axisLabel: {
          ...axisLabel,
          margin: 12,
          formatter: formatAxisValue
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(125, 211, 252, 0.14)',
            type: [4, 6]
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(125, 211, 252, 0.3)'
          }
        }
      }
    ],
    ...itemStyle,
    xAxis,
    series: series.map((item) => {
      if (item.type === 'bar') {
        return {
          ...item,
          barMaxWidth: 26,
          barMinWidth: 8,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(56, 189, 248, 0.04)',
            borderRadius: [8, 8, 0, 0]
          },
          itemStyle: {
            borderRadius: [8, 8, 0, 0],
            shadowBlur: 14,
            shadowColor: 'rgba(56, 189, 248, 0.36)',
            ...(item.itemStyle || {})
          }
        };
      }
      return {
        ...item,
        lineStyle: {
          width: 3,
          color: '#fbbf24',
          shadowBlur: 12,
          shadowColor: 'rgba(251, 191, 36, 0.5)',
          ...(item.lineStyle || {})
        },
        itemStyle: {
          color: '#fbbf24',
          borderColor: '#fff7ad',
          borderWidth: 2,
          ...(item.itemStyle || {})
        }
      };
    })
  };
};

export const pieOption = (data) => {
  return {
    color: ['#398f4e', '#458ef7', '#fdc537', '#fe6869', '#975fe6'],
    tooltip: {
      formatter: '{b}：{c}' + '%',
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      left: 'right',
      right: '15%',
      bottom: '5%',
      itemGap: window.innerHeight * 0.018,
      textStyle: {
        fontSize: window.innerHeight * 0.014
      }
    },
    series: [
      {
        center: ['50%', '40%'],
        label: {
          position: 'outside',
          show: true,
          formatter: (item) => {
            return item.name + '：' + item.value + '%';
          },
          fontSize: window.innerHeight * 0.014
          // color:"#fff"
        },
        labelLine: {
          show: true
        },
        type: 'pie',
        radius: '60%',
        itemStyle: {
          borderWidth: 0,
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        data
      }
    ]
  };
};

export const pieOptions = (data) => {
  return {
    backgroundColor: 'transparent',
    color: ['#22d87a', '#35c9ff', '#ffd247', '#ff7890', '#9b78e6', '#2dd4bf', '#fb923c'],
    tooltip: {
      // formatter: '{b}：{c}' + '%',
      formatter: function (params) {
        return `${params.name}<br/>数量: ${params.value}<br/>占比: ${params.percent}%`;
      },
      trigger: 'item',
      borderWidth: 1,
      borderColor: 'rgba(103, 232, 249, 0.42)',
      backgroundColor: 'rgba(4, 13, 25, 0.94)',
      extraCssText: 'box-shadow:0 8px 24px rgba(0,0,0,.28);border-radius:6px;',
      textStyle: {
        color: '#e0faff'
      }
    },
    // legend: {
    //   orient: 'horizontal',
    //   left: 'right',
    //   right: '15%',
    //   bottom: '5%',
    //   itemGap: window.innerHeight * 0.018,
    //   textStyle: {
    //     fontSize: window.innerHeight * 0.014
    //   }
    // },
    series: [
      {
        center: ['52%', '52%'],
        label: {
          position: 'outside',
          show: true,
          formatter: (item) => {
            return `{name|${item.name}}  {value|${item.value}}`;
          },
          color: 'rgba(224, 242, 254, 0.84)',
          width: 128,
          overflow: 'break',
          lineHeight: 19,
          rich: {
            name: {
              color: 'rgba(169, 197, 210, 0.92)',
              fontSize: 12,
              fontWeight: 600,
              lineHeight: 19,
              textShadowBlur: 8,
              textShadowColor: 'rgba(56, 189, 248, 0.2)'
            },
            value: {
              color: '#ffe37a',
              fontSize: 15,
              fontWeight: 700,
              lineHeight: 19,
              textBorderColor: 'rgba(7, 18, 31, 0.68)',
              textBorderWidth: 2,
              textShadowBlur: 14,
              textShadowColor: 'rgba(250, 204, 21, 0.68)'
            }
          }
        },
        labelLine: {
          show: true,
          length: 16,
          length2: 24,
          smooth: true,
          lineStyle: {
            width: 1.6,
            color: 'rgba(125, 211, 252, 0.68)'
          }
        },
        type: 'pie',
        radius: ['43%', '66%'],
        startAngle: 120,
        minAngle: 4,
        avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 10,
          borderWidth: 3,
          borderColor: '#07111f',
          shadowBlur: 20,
          shadowColor: 'rgba(34, 211, 238, 0.26)'
        },
        emphasis: {
          scaleSize: 7,
          itemStyle: {
            shadowBlur: 26,
            shadowColor: 'rgba(103, 232, 249, 0.48)'
          }
        },
        data
      },
      {
        type: 'pie',
        center: ['52%', '52%'],
        radius: ['35%', '36%'],
        silent: true,
        label: {
          show: false
        },
        data: [
          {
            value: 1,
            itemStyle: {
              color: 'rgba(103, 232, 249, 0.24)',
              shadowBlur: 18,
              shadowColor: 'rgba(56, 189, 248, 0.32)'
            }
          }
        ]
      }
    ]
  };
};

// ==================== 首页大屏静态数据 ====================
// 数据来源：五品四数.xlsx（各分厂生产指标 + 1-12月工单入库数量）
// metrics 顺序：计划数、投入数、产出数、在制品数、合格品数
// defective 顺序：返工品、返修品、废品
// inWarehouse 顺序：1月 ~ 12月

export const monthLabels = [
  '一月',
  '二月',
  '三月',
  '四月',
  '五月',
  '六月',
  '七月',
  '八月',
  '九月',
  '十月',
  '十一月',
  '十二月'
];

// 工厂（分厂）切换选项
export const factoryOptions = [
  { id: '1', name: '机加一分厂' },
  { id: '2', name: '机加二分厂' },
  { id: '3', name: '特种作业分厂' },
  { id: '4', name: '总装分厂' }
];

export const mesStaticData = {
  // 机加一分厂
  1: {
    metrics: [24386, 20500, 9412, 10730, 8630],
    defective: [314, 113, 355],
    inWarehouse: [1030, 1058, 1098, 1073, 1104, 1093, 1055, 1046, 500, 0, 0, 0]
  },
  // 机加二分厂
  2: {
    metrics: [19828, 17700, 8461, 8616, 7840],
    defective: [230, 102, 289],
    inWarehouse: [960, 983, 971, 969, 978, 975, 982, 950, 400, 0, 0, 0]
  },
  // 特种作业分厂
  3: {
    metrics: [10256, 9000, 4840, 4080, 4535],
    defective: [35, 0, 270],
    inWarehouse: [550, 538, 544, 552, 546, 540, 551, 547, 202, 0, 0, 0]
  },
  // 总装分厂（返修数、1月入库数原表为空，按 0 处理）
  4: {
    metrics: [3600, 2600, 1530, 980, 1452],
    defective: [18, 0, 60],
    inWarehouse: [0, 33, 230, 220, 225, 212, 240, 223, 87, 0, 0, 0]
  },
  // 企业合计
  ALL: {
    metrics: [58070, 49800, 24243, 24406, 22457],
    defective: [597, 215, 974],
    inWarehouse: [2540, 2612, 2843, 2814, 2853, 2820, 2828, 2766, 1189, 0, 0, 0]
  }
};