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

// 引入Day.js库
const dayjs = require('dayjs');
let  statusOpt= [
    { label: '待生产', value: 4 },
    { label: '生产中', value: 5 },
    { label: '待下达', value: 8 }
  ];

// 获取本月日期列表的函数
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;
}
export const columns =  [
    {
      columnKey: 'index',
      slot: 'index',
      label: '序号',
      type: 'index',
      width: 55,
      align: 'center',
      showOverflowTooltip: true,
      fixed: 'left'
    },
    {
      slot: 'code',
      prop: 'code',
      label: '生产订单号',
      align: 'center',
      minWidth: 180,
      sortable: true
    },
    {
      prop: 'productionPlanCode',
      label: '计划编号',
      align: 'center',
      minWidth: 150
    },
    {
      prop: 'produceRoutingName',
      label: '工艺路线',
      align: 'center',
      minWidth: 170
    },
    {
      prop: 'productCode',
      label: '编码',
      align: 'center',
      minWidth: 110
    },
    {
      prop: 'productName',
      label: '名称',
      align: 'center',
      minWidth: 170
    },
    {
      prop: 'brandNo',
      label: '牌号',
      align: 'center'
    },

    {
      prop: 'batchNo',
      label: '批次号',
      align: 'center',
      minWidth: 100,
      showOverflowTooltip: true
    },
    {
      prop: 'model',
      label: '型号',
      align: 'center',
      showOverflowTooltip: true
    },

    {
      prop: 'priority',
      label: '优先级',
      align: 'center',
      minWidth: 120,
      slot: 'priority',
      sortable: 'custom'
    },

    {
      prop: 'formingNum',
      label: '要求生产数量',
      align: 'center',
      showOverflowTooltip: true,
      minWidth: 110
    },
    {
      prop: 'formingWeight',
      label: '要求生产重量',
      align: 'center',
      showOverflowTooltip: true,
      minWidth: 110,
      slot: 'formingWeight'
    },
    {
      prop: 'planStartTime',
      label: '计划开始时间',
      align: 'center',
      showOverflowTooltip: true,
      minWidth: 110
    },

    {
      prop: 'planCompleteTime',
      label: '计划结束时间',
      align: 'center',
      showOverflowTooltip: true,
      minWidth: 110
    },

    {
      prop: 'workCenterName',
      label: '工作中心',
      align: 'center',
      minWidth: 110,
      showOverflowTooltip: true
    },

    {
      prop: 'firstTaskName',
      label: '首工序',
      align: 'center',
      minWidth: 110,
      showOverflowTooltip: true
    },

    {
      prop: 'createTime',
      label: '创建时间',
      align: 'center',
      showOverflowTooltip: true,
      minWidth: 110,
      sortable: 'custom'
    },
    {
      slot: 'status',
      label: '状态',
      align: 'center',
      formatter: (row) => {
        const obj = statusOpt.find((i) => i.value == row.status);
        return obj && obj.label;
      }
    },

    {
      prop: 'serialNo',
      label: '客户代号',
      align: 'center',
      showOverflowTooltip: true
    },

    {
      prop: 'simpleName',
      label: '客户简称',
      align: 'center',
      showOverflowTooltip: true
    }
  ];
export const lineOption = (data, itemStyle = {}) => {
    const colors = [
        ['#2f9bff', 'rgba(47, 155, 255, 0.08)'],
        ['#5ee0b0', 'rgba(94, 224, 176, 0.1)']
    ];
    return {
        tooltip: {
            formatter: (item) => {
                if (Array.isArray(item)) {
                    const title = item[0] ? item[0].name : '';
                    const rows = item
                        .map((i) => i.marker + i.seriesName + "：" + i.value + '%')
                        .join('<br/>');
                    return title + '<br/>' + rows;
                }
                return item.name + "：" + item.seriesName + " " + item.value
            },
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: 'rgba(82, 217, 230, 0.42)',
                    width: 1,
                    type: 'dashed'
                }
            },
            backgroundColor: 'rgba(6, 17, 17, 0.92)',
            borderColor: 'rgba(82, 217, 230, 0.35)',
            textStyle: {
                color: '#e8fbff'
            }
        },
        legend: {
            // bottom: '2%',
            itemGap: window.innerHeight * 0.014,
            icon: 'roundRect',

            textStyle: {
                fontSize: window.innerHeight * 0.013,
                color: '#c8e9ee'
            }
        },
        grid: {
            left: 38,
            right: 24,
            top: 40,
            bottom: 24,
            containLabel: true
        },
        color: colors.map((item) => item[0]),
        xAxis: {
            type: 'category',
            data: ['10/2', '10/3', '10/4', '10/5', '10/6', '10/7', '10/8'],
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: 'rgba(82, 217, 230, 0.44)'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                fontSize: window.innerHeight * 0.012,
                color: '#b9dce2',
                margin: 10
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(82, 217, 230, 0.06)'
                }
            }

        },
        yAxis: [
            {
                type: 'value',
                max: 100,
                min: 0,
                axisLabel: {
                    show: true,
                    color: '#b9dce2',
                    formatter: "{value}%", //右侧Y轴文字显示

                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(82, 217, 230, 0.16)',
                        type: 'dashed'
                    }
                },
                nameTextStyle: {
                    align: 'center',
                    color: "#333",
                    fontSize: window.innerHeight * 0.012,
                    padding: [0, 20, -3, 0]
                },
            },

        ],
        series: [
            {
                name: '过程控',
                symbol: 'circle',
                symbolSize: 8,
                data: data[0],
                type: 'line',
                smooth: true,
                showSymbol: true,
                lineStyle: {
                    width: 3,
                    color: colors[0][0],
                    shadowBlur: 12,
                    shadowColor: colors[0][0]
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: 'rgba(47, 155, 255, 0.22)' },
                            { offset: 0.62, color: colors[0][1] },
                            { offset: 1, color: 'rgba(47, 155, 255, 0)' }
                        ]
                    }
                },
                itemStyle: {
                    color: colors[0][0],
                    borderColor: '#dff5ff',
                    borderWidth: 2,
                    shadowBlur: 10,
                    shadowColor: colors[0][0]
                },
                emphasis: {
                    focus: 'series',
                    scale: true
                },
                z: 4
            }, {
                name: '产品控',
                symbol: 'circle',
                symbolSize: 8,
                data: data[1],
                type: 'line', 
                smooth: true,
                showSymbol: true,
                lineStyle: {
                    width: 3,
                    color: colors[1][0],
                    shadowBlur: 12,
                    shadowColor: colors[1][0]
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: 'rgba(94, 224, 176, 0.2)' },
                            { offset: 0.62, color: colors[1][1] },
                            { offset: 1, color: 'rgba(94, 224, 176, 0)' }
                        ]
                    }
                },
                itemStyle: {
                    color: colors[1][0],
                    borderColor: '#e4fff5',
                    borderWidth: 2,
                    shadowBlur: 10,
                    shadowColor: colors[1][0]
                },
                emphasis: {
                    focus: 'series',
                    scale: true
                },
                z: 5
            }
        ]
    }
}
export const barOption = ( xData,series) => {
    const monthLabelMap = {
        '一月': '1月',
        '二月': '2月',
        '三月': '3月',
        '四月': '4月',
        '五月': '5月',
        '六月': '6月',
        '七月': '7月',
        '八月': '8月',
        '九月': '9月',
        '十月': '10月',
        '十一月': '11月',
        '十二月': '12月'
    };
    const barColors = [
        ['rgba(255, 209, 102, 0.96)', 'rgba(236, 178, 87, 0.36)'],
        ['rgba(47, 155, 255, 0.98)', 'rgba(35, 150, 255, 0.32)'],
        ['rgba(91, 210, 167, 0.96)', 'rgba(91, 210, 167, 0.3)']
    ];
    const chartSeries = series.map((item, index) => {
        if (item.type === 'bar') {
            const color = barColors[index % barColors.length];
            return {
                ...item,
                barWidth: item.barWidth || 14,
                barMaxWidth: 18,
                barGap: '38%',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(82, 217, 230, 0.055)',
                    borderColor: 'rgba(82, 217, 230, 0.14)',
                    borderWidth: 1
                },
                itemStyle: {
                    ...(item.itemStyle || {}),
                    borderRadius: [3, 3, 0, 0],
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: color[0] },
                            { offset: 0.52, color: color[0] },
                            { offset: 1, color: color[1] }
                        ]
                    },
                    shadowBlur: 12,
                    shadowColor: color[0]
                },
                emphasis: {
                    focus: 'series',
                    itemStyle: {
                        shadowBlur: 18,
                        shadowColor: color[0]
                    }
                },
                z: 3
            };
        }
        if (item.type === 'line') {
            return {
                ...item,
                symbol: 'circle',
                symbolSize: item.symbolSize || 10,
                lineStyle: {
                    width: 3,
                    color: item.itemStyle && item.itemStyle.color ? item.itemStyle.color : '#ff8a4c',
                    shadowBlur: 12,
                    shadowColor: item.itemStyle && item.itemStyle.color ? item.itemStyle.color : '#ff8a4c'
                },
                itemStyle: {
                    ...(item.itemStyle || {}),
                    borderColor: '#fff7ef',
                    borderWidth: 2,
                    shadowBlur: 10,
                    shadowColor: item.itemStyle && item.itemStyle.color ? item.itemStyle.color : '#ff8a4c'
                },
                z: 5
            };
        }
        return item;
    });
    return {
        tooltip: {
            formatter: (item) => {
                if (Array.isArray(item)) {
                    const title = item[0] ? item[0].name : '';
                    const rows = item
                        .map((i) => i.seriesName + "：" + i.value)
                        .join('<br/>');
                    return title + '<br/>' + rows;
                }
                return item.name + "：" + item.seriesName + " " + item.value
            },
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                shadowStyle: {
                    color: 'rgba(82, 217, 230, 0.08)'
                }
            },
            backgroundColor: 'rgba(6, 17, 17, 0.92)',
            borderColor: 'rgba(82, 217, 230, 0.35)',
            textStyle: {
                color: '#e8fbff'
            }
        },
        legend: {
            // bottom: '2%',
            itemGap: window.innerHeight * 0.014,

            textStyle: {
                fontSize: window.innerHeight * 0.013,
                color: '#9fc7cf'
            }
        },
        grid: {
            left: 34,
            right: 44,
            top: 36,
            bottom: 30,
            containLabel: true
        },
        color: ['#2396ff', '#5bd2a7', '#ff844a', '#ffd166'],
        xAxis: {
            type: 'category',
            data:xData ,
            axisLine: {
                lineStyle: {
                    color: 'rgba(185, 220, 226, 0.45)'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                fontSize: Math.max(11, Math.min(13, window.innerHeight * 0.012)),
                color: '#b9dce2',
                interval: 0,
                margin: 9,
                hideOverlap: false,
                formatter: (value) => monthLabelMap[value] || value
            }

        },
        yAxis: [
            {
                type: 'value',
                // name: '(个)',
                axisLabel: {
                    color: '#b9dce2'
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(82, 217, 230, 0.16)',
                        type: 'dashed'
                    }
                },
                nameTextStyle: {
                    align: 'center',
                    color: "#333",
                    fontSize: window.innerHeight * 0.012,
                    padding: [0, 20, -3, 0]
                },
            },
            {
                type: 'value',
                max: 100,
                min: 0,
                axisLabel: {
                    show: true,
                    color: '#b9dce2',
                    formatter: "{value}%", //右侧Y轴文字显示

                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            }
        ],
        series: chartSeries
    }
}

export const pieOption = (data) => {
    const colors = [
        ['#4ee6a3', '#1d8b68'],
        ['#36adff', '#1762c7'],
        ['#ffd66b', '#b88421'],
        ['#ff7070', '#b83243'],
        ['#9b79ff', '#5c40bd'],
        ['#48dfea', '#1c8590']
    ];
    const pieData = data.map((item, index) => {
        const color = colors[index % colors.length];
        return {
            ...item,
            itemStyle: {
                borderRadius: 6,
                borderWidth: 2,
                borderColor: '#071719',
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: color[0] },
                        { offset: 1, color: color[1] }
                    ]
                },
                shadowBlur: 10,
                shadowColor: color[0]
            }
        };
    });
    return {
        color: colors.map((item) => item[0]),
        tooltip: {
            // formatter: '{b}：{c}' + '%',
            trigger: 'item',
            backgroundColor: 'rgba(6, 17, 17, 0.92)',
            borderColor: 'rgba(82, 217, 230, 0.35)',
            textStyle: {
                color: '#e8fbff'
            }
        },
        // legend: {
        //     orient: 'horizontal',
        //     left: 'right',
        //     right: '15%',
        //     bottom: '5%',
        //     itemGap: window.innerHeight * 0.018,
        //     textStyle: {
        //         fontSize: window.innerHeight * 0.014,
        //     }
        // },
        series: [
            {
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['0%', '29%'],
                silent: true,
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                itemStyle: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.7,
                        colorStops: [
                            { offset: 0, color: 'rgba(82, 217, 230, 0.18)' },
                            { offset: 0.56, color: 'rgba(8, 24, 27, 0.92)' },
                            { offset: 1, color: 'rgba(6, 17, 17, 0.98)' }
                        ]
                    },
                    shadowBlur: 18,
                    shadowColor: 'rgba(82, 217, 230, 0.16)'
                },
                z: 1,
                data: [{ value: 1 }]
            },
            {
                center: ['50%', '50%'],
                avoidLabelOverlap: true,
                label: {
                    position: 'outside',
                    show: true,
                    bleedMargin: 12,
                    formatter: (item) => {
                        return item.name + '\n' + item.value + '/' + item.percent + '%'
                    },
                    lineHeight: 18,
                    fontSize: Math.max(12, window.innerHeight * 0.011),
                    color:"#d9edf2",
                    overflow: 'break'
                },
                labelLine: {
                    show: true,
                    length: 10,
                    length2: 18,
                    lineStyle: {
                        width: 1.2,
                        opacity: 0.86
                    }

                },
                type: 'pie',
                radius: ['36%', '58%'],
                clockwise: true,
                minAngle: 6,
                emphasis: {
                    focus: 'self',
                    scaleSize: 5,
                    label: {
                        color: '#f2fbfb',
                        fontWeight: 700
                    },
                    itemStyle: {
                        shadowBlur: 18
                    }
                },
                z: 2,
                data: pieData
            }
        ]
    }
}