You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
salary-management-oneself/src/pages/personnelReport/constants.js

935 lines
16 KiB
JavaScript

import { G2, measureTextWidth } from "@ant-design/plots";
const G = G2.getEngine("canvas");
export const structureCardList = [
{
title: "当期总人数",
active: 0,
number: 489,
unit: "人",
color: "#FFBB31",
tabList: ["本月", "上月"]
},
{
title: "本月入职",
active: 0,
number: 100,
unit: "人",
color: "#3DA5F6",
tabList: ["本月", "上月"]
},
{
title: "本月离职",
active: 0,
number: 23,
unit: "人",
color: "#5FD5C7",
tabList: ["本月", "上月"]
},
{
title: "年度累计入职",
active: 0,
number: 238,
unit: "人",
color: "#2B6DF6",
tabList: ["本年", "去年"]
},
{
title: "年度累计离职",
active: 0,
number: 198,
unit: "人",
color: "#B571EA",
tabList: ["本年", "去年"]
},
{
title: "平均年龄",
active: 0,
number: 28.0,
unit: "岁",
color: "#5FCC7B",
tabList: ["本年", "去年"]
}
];
//人员流动数据
export const flowingData = [
{
type: "当期总人数",
value: 27
},
{
type: "本月入职",
value: 25
},
{
type: "本月离职",
value: 18
},
{
type: "年度累计入职",
value: 15
},
{
type: "年度累计离职",
value: 10
},
{
type: "平均年龄",
value: 5
}
];
//人员流动配置信息
export const flowingConfig = {
appendPadding: 10,
data: flowingData,
angleField: "value",
colorField: "type",
radius: 1,
// 设置圆弧起始角度
startAngle: Math.PI,
endAngle: Math.PI * 1.5,
label: {
type: "inner",
offset: "-2%",
content: "{name}",
style: {
fontSize: 15
}
},
interactions: [],
pieStyle: {
lineWidth: 0
}
};
//司龄占比数据
export const seniorityData = [
{
type: "5年",
value: 100
},
{
type: "10年",
value: 200
},
{
type: "15年",
value: 300
},
{
type: "其他",
value: 200
}
];
//性别占比数据
export const genderData = [
{
type: "男",
value: 20
},
{
type: "女",
value: 80
}
];
//学历占比数据
export const degreeData = [
{
type: "大专",
value: 45
},
{
type: "大专以下",
value: 35
},
{
type: "全日制本科",
value: 11
},
{
type: "硕士",
value: 6
},
{
type: "研究生",
value: 1
},
{
type: "中专",
value: 1
},
{
type: "博士",
value: 1
}
];
//条线占比数据
export const linesData = [
{
type: "条线1",
value: 35
},
{
type: "条线2",
value: 25
},
{
type: "条线3",
value: 15
},
{
type: "条线4",
value: 17
},
{
type: "条线5",
value: 8
}
];
//实习生占比数据
export const internData = [
{
type: "1",
value: 17
},
{
type: "2",
value: 25
},
{
type: "3",
value: 8
},
{
type: "4",
value: 35
},
{
type: "5",
value: 15
}
];
export const seniorityConfig = {
appendPadding: 10,
data: [],
angleField: "value",
colorField: "type",
radius: 0.75,
label: {
type: "inner",
offset: "-30%",
content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
style: {
fontSize: 14,
textAlign: "center"
}
},
interactions: []
};
//人员流动情况趋势图数据信息
export const flowingTrendData = [
{
"name": "入职",
"年份": "2022",
"年份流动信息": 18.9
},
{
"name": "入职",
"年份": "2023",
"年份流动信息": 28.8
},
{
"name": "离职",
"年份": "2022",
"年份流动信息": 12.4
},
{
"name": "离职",
"年份": "2023",
"年份流动信息": 23.2
},
{
"name": "在职",
"年份": "2022",
"年份流动信息": 12.4
},
{
"name": "在职",
"年份": "2023",
"年份流动信息": 23.2
}
];
//人员流动情况趋势图配置信息
export const flowingTrendconfig = {
data: flowingTrendData,
isGroup: true,
xField: "年份",
yField: "年份流动信息",
seriesField: "name",
// 分组柱状图 组内柱子间的间距 (像素级别)
dodgePadding: 2,
// 分组柱状图 组间的间距 (像素级别)
intervalPadding: 50,
label: {
// 可手动配置 label 数据标签位置
position: "middle",
// 'top', 'middle', 'bottom'
// 可配置附加的布局方法
layout: [
// 柱形图数据标签位置自动调整
{
type: "interval-adjust-position"
}, // 数据标签防遮挡
{
type: "interval-hide-overlap"
}, // 数据标签文颜色自动调整
{
type: "adjust-color"
}
]
}
};
//机构人员排名数数据
export const institutionData = [
{
stage: "机构一",
number: 253
},
{
stage: "机构二",
number: 151
},
{
stage: "机构三",
number: 113
},
{
stage: "机构四",
number: 87
},
{
stage: "机构五",
number: 59
}
];
//机构人员排名配置信息
export const institutionConfig = {
data: institutionData,
xField: "stage",
yField: "number",
dynamicHeight: true
// legend: false
};
//人员异动分析数数据
export const personChangeData = [
{
type: "全员离职率",
value: 253
},
{
type: "关键岗位离职率",
value: 151
},
{
type: "绩优员工离职率",
value: 113
}
];
export const personChangeConfig = {
appendPadding: 10,
data: [],
angleField: "value",
colorField: "type",
radius: 0.75,
label: {
type: "spider",
labelHeight: 28,
content: "{name}\n{percentage}"
},
interactions: []
};
//详细图表柱状图
export const multiplData = [
{ "city": "12", "type": "今年", "value": 18000 },
{ "city": "12", "type": "去年", "value": 11000 },
{ "city": "11", "type": "今年", "value": 18000 },
{ "city": "11", "type": "去年", "value": 11000 },
{ "city": "10", "type": "今年", "value": 18000 },
{ "city": "10", "type": "去年", "value": 11000 },
{ "city": "09", "type": "今年", "value": 18000 },
{ "city": "09", "type": "去年", "value": 11000 },
{ "city": "08", "type": "今年", "value": 18000 },
{ "city": "08", "type": "去年", "value": 11000 },
{ "city": "07", "type": "今年", "value": 17000 },
{ "city": "07", "type": "去年", "value": 6000 },
{ "city": "06", "type": "今年", "value": 9000 },
{ "city": "06", "type": "去年", "value": 8500 },
{ "city": "05", "type": "今年", "value": 14000 },
{ "city": "05", "type": "去年", "value": 9000 },
{ "city": "04", "type": "今年", "value": 14000 },
{ "city": "04", "type": "去年", "value": 9000 },
{ "city": "03", "type": "今年", "value": 16000 },
{ "city": "03", "type": "去年", "value": 5000 },
{ "city": "02", "type": "今年", "value": 9000 },
{ "city": "02", "type": "去年", "value": 8500 },
{ "city": "01", "type": "今年", "value": 14500 },
{ "city": "01", "type": "去年", "value": 8500 }
];
//人员流动情况趋势图配置信息
export const multipleConfig = {
data: [],
xField: "city",
yField: "value",
seriesField: "type",
isGroup: true,
columnStyle: {
radius: [20, 20, 0, 0]
}
};
//培训管理分析数据
export const trainingData = [
{
type: "人均培训费用",
value: 20
},
{
type: "人均培训时长",
value: 80
}
];
//培训排名
export const rankingData = [
{
label: "财务部",
type: "前五",
value: 2800
},
{
label: "销售部",
type: "前五",
value: 1800
},
{
label: "策划部",
type: "前五",
value: 950
},
{
label: "运营部",
type: "前五",
value: 500
},
{
label: "后勤部",
type: "前五",
value: 170
},
{
label: "财务部1",
type: "后五",
value: 2260
},
{
label: "销售部1",
type: "后五",
value: 1300
},
{
label: "策划部1",
type: "后五",
value: 900
},
{
label: "运营部1",
type: "后五",
value: 390
},
{
label: "后勤部1",
type: "后五",
value: 100
}
];
export const rankingConfig = {
data: [],
isGroup: true,
xField: "value",
yField: "label",
seriesField: "type",
dodgePadding: 4,
label: {
// 可手动配置 label 数据标签位置
position: "middle",
// 'left', 'middle', 'right'
// 可配置附加的布局方法
layout: [
// 柱形图数据标签位置自动调整
{
type: "interval-adjust-position"
}, // 数据标签防遮挡
{
type: "interval-hide-overlap"
}, // 数据标签文颜色自动调整
{
type: "adjust-color"
}
]
}
};
//人效分析数据
export const humanAnalysisData = [
{
"name": "销售投入回报",
"company": "公司1",
"value": 18.9
},
{
"name": "销售投入回报",
"company": "公司2",
"value": 28.8
},
{
"name": "人均利润",
"company": "公司1",
"value": 12.4
},
{
"name": "人均利润",
"company": "公司2",
"value": 23.2
},
{
"name": "人均销售额",
"company": "公司1",
"value": 12.4
},
{
"name": "人均销售额",
"company": "公司2",
"value": 23.2
}
];
export const humanAnalysisconfig = {
data: humanAnalysisData,
isGroup: true,
xField: "company",
yField: "value",
seriesField: "name",
// 分组柱状图 组内柱子间的间距 (像素级别)
dodgePadding: 2,
// 分组柱状图 组间的间距 (像素级别)
intervalPadding: 50,
label: {
// 可手动配置 label 数据标签位置
position: "middle",
// 'top', 'middle', 'bottom'
// 可配置附加的布局方法
layout: [
// 柱形图数据标签位置自动调整
{
type: "interval-adjust-position"
}, // 数据标签防遮挡
{
type: "interval-hide-overlap"
}, // 数据标签文颜色自动调整
{
type: "adjust-color"
}
]
}
};
//人效排名数据
export const humanEfficiencyRankingData = [
{
title: "员工1",
description: "公司1",
rank: 1
},
{
title: "员工2",
description: "公司2",
rank: 2
},
{
title: "员工3",
description: "公司3",
rank: 3
},
{
title: "员工4",
description: "公司4",
rank: 4
}
];
//销售新客户合同数量排名
export const saleEfficiencyRankingData = [
{
title: "员工5",
description: "公司1",
rank: 1
},
{
title: "员工6",
description: "公司2",
rank: 2
},
{
title: "员工7",
description: "公司3",
rank: 3
},
{
title: "员工8",
description: "公司4",
rank: 4
}
];
//新销售有效合同
export const newSaleEfficiencyRankingData = [
{
title: "员工9",
description: "公司1",
rank: 1
},
{
title: "员工10",
description: "公司2",
rank: 2
},
{
title: "员工11",
description: "公司3",
rank: 3
},
{
title: "员工12",
description: "公司4",
rank: 4
}
];
//人工总成本数据
export const totalLaborCostdata = [
{
time: "Jan.",
value: 350,
count: 800
},
{
time: "Feb.",
value: 900,
count: 600
},
{
time: "Mar.",
value: 300,
count: 400
},
{
time: "Apr.",
value: 450,
count: 380
},
{
time: "May.",
value: 470,
count: 220
},
{
time: "Jun.",
value: 470,
count: 220
},
{
time: "Jul.",
value: 470,
count: 220
},
{
time: "Aug.",
value: 470,
count: 220
}
];
export const totalLaborCostConfig = {
data: [totalLaborCostdata, totalLaborCostdata],
xField: "time",
yField: ["value", "count"],
yAxis: {
// 格式化左坐标轴
value: {
min: 0,
label: {
formatter: (val) => `${val}W`
}
},
// 隐藏右坐标轴
count: false
},
geometryOptions: [
{
geometry: "column",
color: "#5B8FF9",
columnWidthRatio: 0.4,
label: {
position: "middle"
}
},
{
geometry: "line",
smooth: true,
color: "#5AD8A6"
}
],
interactions: [],
annotations: {
value: [
{
type: "text",
position: ["2019-06", "max"],
content: "柱线混合图"
}
],
count: [
{
type: "dataMarker",
top: true,
position: ["2019-05", 400],
line: {
length: 20
},
text: {
content: "",
style: {
textAlign: "left"
}
}
}
]
}
};
//人均收入配置数据 1、人均固定收入 2、人均浮动收入
export const fixedIncomePerData = [
{
type: "销售",
value: 27
},
{
type: "项目",
value: 25
},
{
type: "开发",
value: 18
},
{
type: "客服",
value: 15
},
{
type: "其他",
value: 10
},
{
type: "其他",
value: 5
}
];
export const floatingIncomePerData = [
{
type: "销售",
value: 18
},
{
type: "项目",
value: 29
},
{
type: "开发",
value: 23
},
{
type: "客服",
value: 3
},
{
type: "其他",
value: 22
},
{
type: "其他",
value: 5
}
];
//人均收入配置信息
export const perCapitaIncomeConfig = {
appendPadding: 10,
data: [],
angleField: "value",
colorField: "type",
radius: 1,
innerRadius: 0.64,
meta: {
value: {
formatter: (v) => `${v} ¥`
}
},
label: {
type: "inner",
offset: "-50%",
style: {
textAlign: "center"
},
autoRotate: false,
content: "{value}"
},
statistic: {
title: {
offsetY: -4,
customHtml: (container, view, datum) => {
const { width, height } = container.getBoundingClientRect();
const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
//总计
const text = datum ? datum.type : "";
return renderStatistic(d, text, {
fontSize: 28
});
}
},
content: {
offsetY: 4,
style: {
fontSize: "32px"
},
customHtml: (container, view, datum, data) => {
const { width } = container.getBoundingClientRect();
const text = datum ? `¥ ${datum.value}` : `¥ ${data.reduce((r, d) => r + d.value, 0)}`;
return renderStatistic(width, "", {
fontSize: 32
});
}
}
},
// 添加 中心统计文本 交互
interactions: []
};
//人均人工成本数据
export const laborCostsPerCapitaData = [
{
year: "Jan.",
value: 3,
count: 10
},
{
year: "Feb.",
value: 4,
count: 4
},
{
year: "Mar.",
value: 3.5,
count: 5
},
{
year: "Apr.",
value: 5,
count: 5
},
{
year: "May.",
value: 4.9,
count: 4.9
},
{
year: "Jun.",
value: 6,
count: 35
},
{
year: "Jul.",
value: 7,
count: 7
},
{
year: "Aug.",
value: 9,
count: 1
}
];
export const laborCostsPerCapitaConfig = {
data: [laborCostsPerCapitaData, laborCostsPerCapitaData],
xField: "year",
yField: ["value", "count"],
geometryOptions: [
{
geometry: "line",
smooth: true,
color: "#5B8FF9",
label: {
formatter: (datum) => {
return `${datum.value}w`;
}
},
lineStyle: {
lineWidth: 3,
lineDash: [5, 5]
}
},
{
geometry: "line",
smooth: true,
color: "#5AD8A6",
lineStyle: {
lineWidth: 4,
opacity: 0.5
},
label: {
formatter: (datum) => {
return `${datum.count}w`;
}
},
point: {
shape: "circle",
size: 4,
style: {
opacity: 0.5,
stroke: "#5AD8A6",
fill: "#fff"
}
}
}
]
};
function renderStatistic(containerWidth, text, style) {
const { width: textWidth, height: textHeight } = measureTextWidth(text, style);
const R = containerWidth / 2; // r^2 = (w / 2)^2 + (h - offsetY)^2
let scale = 1;
if (containerWidth < textWidth) {
scale = Math.min(Math.sqrt(Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))), 1);
}
const textStyleStr = `width:${containerWidth}px;`;
return `<div style="${textStyleStr};font-size:${scale}em;line-height:${scale < 1 ? 1 : "inherit"};">${text}</div>`;
}