泛微薪资核算iframe表格
parent
8ec05fab81
commit
c31ec3957a
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 832 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@ -1,64 +0,0 @@
|
||||
.chartWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #e5e5e5;
|
||||
padding: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.talentTableBox, .flowRateTableBox, .profitTableBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > div:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
padding: 40px 10px 8px;
|
||||
overflow: hidden;
|
||||
|
||||
:global {
|
||||
.ant-tabs {
|
||||
height: 100%;
|
||||
line-height: normal;
|
||||
|
||||
.ant-tabs-content-holder {
|
||||
flex: 1;
|
||||
|
||||
.ant-tabs-content {
|
||||
height: 100%;
|
||||
|
||||
.ant-tabs-tabpane {
|
||||
overflow-y: auto;
|
||||
|
||||
& > div {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 2%;
|
||||
top: 2%;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
margin-bottom: 8px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
.peopleFlowWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #e5e5e5;
|
||||
overflow: auto;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 人员流量表
|
||||
* Description:
|
||||
* Date: 2023/4/27
|
||||
*/
|
||||
import React, { FunctionComponent } from "react";
|
||||
import styles from "./index.less";
|
||||
|
||||
interface OwnProps {
|
||||
}
|
||||
|
||||
type Props = OwnProps;
|
||||
|
||||
const index: FunctionComponent<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<div className={styles.peopleFlowWrapper}>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default index;
|
||||
@ -0,0 +1,119 @@
|
||||
const PersonnelCategoryBar = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const myChart = echarts.init(document.getElementById("changeStatistics"));
|
||||
// 配置项
|
||||
const option = {
|
||||
tooltip: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 默认为直线，可选为：'line' | 'shadow'
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
top: 10,
|
||||
right: "0%",
|
||||
bottom: "4%",
|
||||
// true: 数值离DOM盒子的距离 false: 坐标轴离DOM盒子的距离
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["公司本部", "公司1", "公司2", "公司3", "公司4", "公司5", "公司6", "公司7"],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontSize: 10,
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontSize: 12
|
||||
},
|
||||
// 修改坐标轴线样式
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(93,126,158,1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "入职",
|
||||
type: "bar",
|
||||
showBackground: false,
|
||||
barWidth: "10%",
|
||||
data: [250, 250, 320, 410, 280, 320, 405, 405],
|
||||
// bar 样式修改
|
||||
itemStyle: {
|
||||
barBorderRadius: 10,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#3EA1FF" },
|
||||
{ offset: 0.5, color: "#72CFFF" },
|
||||
{ offset: 1, color: "#72CFFF" }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "离职",
|
||||
type: "bar",
|
||||
showBackground: false,
|
||||
barWidth: "10%",
|
||||
data: [370, 370, 260, 110, 390, 280, 110, 110],
|
||||
// bar 样式修改
|
||||
itemStyle: {
|
||||
barBorderRadius: 10,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#00D5FF" },
|
||||
{ offset: 0.5, color: "#B2FDB2" },
|
||||
{ offset: 1, color: "#B2FDB2" }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "调职",
|
||||
type: "bar",
|
||||
showBackground: false,
|
||||
barWidth: "10%",
|
||||
data: [310, 310, 80, 280, 310, 70, 280, 280],
|
||||
// bar 样式修改
|
||||
itemStyle: {
|
||||
barBorderRadius: 10,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#1455FF" },
|
||||
{ offset: 0.5, color: "#5F9CFF" },
|
||||
{ offset: 1, color: "#5F9CFF" }
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default PersonnelCategoryBar;
|
||||
@ -0,0 +1,103 @@
|
||||
import { getPie3D } from "@/utils/chart";
|
||||
|
||||
const color = ["#FE772D", "#FEDB4B", "#2A71FF", "#00EDFE"];
|
||||
|
||||
const DegreeStructurePie = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const myChart = echarts.init(document.getElementById("degreeStructure"));
|
||||
// 配置项
|
||||
const option = {
|
||||
...getPie3D(setLabel([
|
||||
{
|
||||
name: "研究生（博士）",
|
||||
value: 176
|
||||
},
|
||||
{
|
||||
name: "研究生（硕士）",
|
||||
value: 288
|
||||
},
|
||||
{
|
||||
name: "本科",
|
||||
value: 588
|
||||
},
|
||||
{
|
||||
name: "大专及以下",
|
||||
value: 78
|
||||
}
|
||||
], color), 0.6, 240, 26, 18, 1, true)
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption({
|
||||
...option,
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
icon: "circle",
|
||||
top: "25%",
|
||||
left: "10%",
|
||||
itemGap: 28,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#ffffff"//字体颜色
|
||||
}
|
||||
}
|
||||
});
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default DegreeStructurePie;
|
||||
|
||||
export const setLabel = (optionData: any, color: any) => {
|
||||
return optionData.map((item: any, index: number) => {
|
||||
return {
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: color[index]
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
color: color[index],
|
||||
position: "right",
|
||||
// distance:-10,
|
||||
offset: [0, 3],
|
||||
formatter: [
|
||||
"{d|{d}%}",
|
||||
"————",
|
||||
// '{c|{c}}{b|台}',
|
||||
"{b|{b}}"
|
||||
].join("\n"), // 用\n来换行
|
||||
rich: {
|
||||
b: {
|
||||
// color: '#fff',
|
||||
lineHeight: 25,
|
||||
align: "left",
|
||||
color: color[index]
|
||||
},
|
||||
c: {
|
||||
fontSize: 22,
|
||||
textShadowColor: "#1c90a6",
|
||||
textShadowOffsetX: 0,
|
||||
textShadowOffsetY: 2,
|
||||
textShadowBlur: 5,
|
||||
color: color[index]
|
||||
},
|
||||
d: {
|
||||
color: color[index],
|
||||
align: "left"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
length2: 30,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: color[index]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,47 @@
|
||||
import { getPie3D } from "@/utils/chart";
|
||||
import { setLabel } from "./degreeStructurePie";
|
||||
|
||||
const color = ["#BD42EF", "#6D45F3", "#3358F3", "#6ECDE5"];
|
||||
const GradAnalysisPie = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const myChart = echarts.init(document.getElementById("gradAnalysis"));
|
||||
// 配置项
|
||||
const option = {
|
||||
...getPie3D(setLabel([
|
||||
{
|
||||
name: "正高级",
|
||||
value: 500
|
||||
},
|
||||
{
|
||||
name: "副高级",
|
||||
value: 1120
|
||||
},
|
||||
{
|
||||
name: "中级",
|
||||
value: 4567
|
||||
},
|
||||
{
|
||||
name: "初级",
|
||||
value: 5278
|
||||
}
|
||||
], color), 0.6, 240, 26, 18, 1, false)
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption({
|
||||
...option,
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
icon: "circle",
|
||||
top: "25%",
|
||||
left: "10%",
|
||||
itemGap: 28,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#ffffff"//字体颜色
|
||||
}
|
||||
}
|
||||
});
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default GradAnalysisPie;
|
||||
@ -0,0 +1,96 @@
|
||||
const PersonnelCategoryBar = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const myChart = echarts.init(document.getElementById("personnelCategory"));
|
||||
// 配置项
|
||||
const option = {
|
||||
tooltip: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 默认为直线，可选为：'line' | 'shadow'
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
top: 10,
|
||||
right: "0%",
|
||||
bottom: "4%",
|
||||
// true: 数值离DOM盒子的距离 false: 坐标轴离DOM盒子的距离
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["领导班子", "海外中国籍", "正式在岗", "海外外籍", "退休返聘", "其他临时", "劳务派遣", "内退"],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontSize: 10,
|
||||
rotate: 60,
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontSize: 12
|
||||
},
|
||||
// 修改坐标轴线样式
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(93,126,158,1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "直接访问",
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: "30%",
|
||||
data: [10, 52, 200, 334, 390, 1030, 220, 210],
|
||||
// bar 样式修改
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#3EA1FF" },
|
||||
{ offset: 0.5, color: "#72CFFF" },
|
||||
{ offset: 1, color: "#72CFFF" }
|
||||
]),
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#AFD8FF" },
|
||||
{ offset: 0.7, color: "#AFD8FF" },
|
||||
{ offset: 1, color: "#AFD8FF" }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default PersonnelCategoryBar;
|
||||
@ -0,0 +1,64 @@
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 框架组件
|
||||
* Description:
|
||||
* Date: 2023/5/4
|
||||
*/
|
||||
import React, { FC, useState } from "react";
|
||||
import cs from "classnames";
|
||||
import styles from "./index.less";
|
||||
|
||||
interface OwnProps {
|
||||
position: string;
|
||||
tabList: Array<any>;
|
||||
children: any;
|
||||
titleImg: any;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
type Props = OwnProps;
|
||||
const FrameComp: FC<Props> = (props) => {
|
||||
const { position, children, tabList, titleImg } = props;
|
||||
const [active, setActive] = useState<number>(0);
|
||||
|
||||
return (
|
||||
<div className={styles.frameWrapper}>
|
||||
<div className={styles.headerTop}>
|
||||
<div className={cs(styles.headerLeft, { [styles["halfHeaderLeft"]]: position === "right" })}>
|
||||
<img src={titleImg} alt=""/>
|
||||
{
|
||||
position === "right" &&
|
||||
<ul className={styles.tabWrapper}>
|
||||
{
|
||||
_.map(tabList, (item, index) => {
|
||||
const classes = cs({
|
||||
[styles["liActive"]]: index === active
|
||||
});
|
||||
return <li key={index} onClick={() => setActive(index)} className={classes}>{item}</li>;
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
<span className={styles.moreWrapper}>More <img src={require("../../../../assets/images/more.png")}
|
||||
alt=""/></span>
|
||||
</div>
|
||||
{
|
||||
position === "bottom" &&
|
||||
<ul className={styles.tabWrapper}>
|
||||
{
|
||||
_.map(tabList, (item, index) => {
|
||||
const classes = cs({
|
||||
[styles["liActive"]]: index === active
|
||||
});
|
||||
return <li key={index} onClick={() => setActive(index)} className={classes}>{item}</li>;
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FrameComp;
|
||||
@ -0,0 +1,125 @@
|
||||
.topPageWrapper {
|
||||
height: 1.25rem;
|
||||
position: relative;
|
||||
background: url("../../../../assets/images/head_bg1.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
line-height: 0.875rem;
|
||||
position: relative;
|
||||
|
||||
.updateTime {
|
||||
color: #fff;
|
||||
line-height: 0;
|
||||
margin-top: 0.0625rem;
|
||||
|
||||
img {
|
||||
width: 0.225rem;
|
||||
margin-right: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 4.475rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logoWrapper, .showTime {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.showTime {
|
||||
right: 2.375rem;
|
||||
top: 0.4rem;
|
||||
text-align: right;
|
||||
color: #fff;
|
||||
|
||||
.dateDay {
|
||||
padding: 0 .35rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logoWrapper {
|
||||
top: 0.1rem;
|
||||
left: 2.375rem;
|
||||
line-height: 0.875rem;
|
||||
|
||||
img {
|
||||
width: 1.675rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mapWrapper {
|
||||
width: 10.625rem;
|
||||
height: 8.125rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.frameWrapper {
|
||||
background: url("../../../../assets/images/frame_bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
.headerTop {
|
||||
height: 0.475rem;
|
||||
position: relative;
|
||||
background: url("../../../../assets/images/frame_title_bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.halfHeaderLeft {
|
||||
left: 1.45rem !important;
|
||||
}
|
||||
|
||||
.headerLeft {
|
||||
position: absolute;
|
||||
left: 0.7375rem;
|
||||
top: 0.0625rem;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
height: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.moreWrapper {
|
||||
color: #fff;
|
||||
font-size: 0.175rem;
|
||||
position: absolute;
|
||||
right: 0.3375rem;
|
||||
top: 0.1rem;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 0.2375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tabWrapper {
|
||||
margin-left: 0.775rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tabWrapper {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0 0.3375rem;
|
||||
|
||||
li {
|
||||
padding: 0.1rem 0.175rem;
|
||||
font-size: 14px;
|
||||
color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li.liActive {
|
||||
background: url("../../../../assets/images/tabSelected.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position-y: .125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 地图组件
|
||||
* Description:
|
||||
* Date: 2023/5/4
|
||||
*/
|
||||
import React, { FC } from "react";
|
||||
import Chart from "@/utils/chart";
|
||||
import { mapOptions } from "./options";
|
||||
import styles from "./index.less";
|
||||
|
||||
interface OwnProps {
|
||||
}
|
||||
|
||||
type Props = OwnProps;
|
||||
const Map: FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<div className={styles.mapWrapper}>
|
||||
<Chart renderer={"canvas"} option={mapOptions({})}/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Map;
|
||||
@ -0,0 +1,243 @@
|
||||
import "echarts/map/js/china";
|
||||
// 地图数据
|
||||
const mapData = {
|
||||
citys: [
|
||||
{
|
||||
name: "浙江",
|
||||
value: [120.15, 29.28, -2],
|
||||
symbolSize: 2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#FFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "四川",
|
||||
value: [103.36, 30.65, -5],
|
||||
symbolSize: 2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#FFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "内蒙古",
|
||||
value: [112.17, 42.81, -23],
|
||||
symbolSize: 2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#FFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "江苏",
|
||||
value: [120.26, 32.54, -1],
|
||||
symbolSize: 2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#FFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "西藏",
|
||||
value: [89.13, 30.66, -1],
|
||||
symbolSize: 2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#FFF"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
export const salaryData = {
|
||||
header: ["业务板块", "二级机构", "人员类型", "起始时间", "截止时间", "发薪人数", "固定薪酬", "浮动薪酬", "薪酬合计", "薪酬固浮化"],
|
||||
data: [
|
||||
["国内工程", "建设集团", "领导班子", "2023.1", "2023.1", "23", "20,000", "20,000", "20,000", "20,000"],
|
||||
["国内工程", "建设集团", "领导班子", "2023.1", "2023.1", "23", "20,000", "20,000", "20,000", "20,000"],
|
||||
["国内工程", "建设集团", "领导班子", "2023.1", "2023.1", "23", "20,000", "20,000", "20,000", "20,000"],
|
||||
["国内工程", "建设集团", "领导班子", "2023.1", "2023.1", "23", "20,000", "20,000", "20,000", "20,000"],
|
||||
["国内工程", "建设集团", "领导班子", "2023.1", "2023.1", "23", "20,000", "20,000", "20,000", "20,000"],
|
||||
["国内工程", "建设集团", "领导班子", "2023.1", "2023.1", "23", "20,000", "20,000", "20,000", "20,000"],
|
||||
["国内工程", "建设集团", "领导班子", "2023.1", "2023.1", "23", "20,000", "20,000", "20,000", "20,000"],
|
||||
["国内工程", "建设集团", "领导班子", "2023.1", "2023.1", "23", "20,000", "20,000", "20,000", "20,000"]
|
||||
]
|
||||
};
|
||||
|
||||
export const mapOptions = (params) => ({
|
||||
title: {
|
||||
show: false,
|
||||
text: "全国物流输送图",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
geo: [
|
||||
{
|
||||
nameMap: {
|
||||
China: "中国"
|
||||
},
|
||||
map: "china",
|
||||
zlevel: 5,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
//圆环显示文字
|
||||
return params.name === "江苏" || params.name === "浙江" || params.name === "四川" || params.name === "内蒙古" || params.name === "西藏" ? params.name : "";
|
||||
},
|
||||
fontSize: 12,
|
||||
color: "#FFF"
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
color: "#FFF"
|
||||
}
|
||||
},
|
||||
zoom: 1.2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "rgba(148,224,250, .5)", //区域边框颜色
|
||||
areaColor: "rgba(82,164,238,.1)", //区域颜色
|
||||
borderWidth: 1, //区域边框宽度
|
||||
shadowBlur: 5,
|
||||
shadowColor: "rgba(3,113,173,.7)"
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: "rgba(148,224,250, .5)",
|
||||
areaColor: "rgba(6,89,176,.3)",
|
||||
borderWidth: 2.5,
|
||||
shadowBlur: 5,
|
||||
shadowColor: "rgba(3,113,173,.5)"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
nameMap: {
|
||||
China: "中国"
|
||||
},
|
||||
map: "china",
|
||||
zlevel: 4,
|
||||
top: "11%",
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
zoom: 1.2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// borderColor: 'rgba(255,209,163, .5)', //区域边框颜色
|
||||
areaColor: "rgba(73,86,166,.1)", //区域颜色
|
||||
borderWidth: 0.5, //区域边框宽度
|
||||
shadowBlur: 5,
|
||||
shadowColor: "rgba(107,91,237,.7)"
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: "transparent",
|
||||
areaColor: "transparent",
|
||||
borderWidth: 1,
|
||||
shadowBlur: 5,
|
||||
shadowColor: "transparent"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
nameMap: {
|
||||
China: "中国"
|
||||
},
|
||||
map: "china",
|
||||
zlevel: 3,
|
||||
top: "12%",
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
zoom: 1.2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: "rgba(73,86,166,.1)", //区域颜色
|
||||
borderWidth: 0.5, //区域边框宽度
|
||||
shadowBlur: 5,
|
||||
shadowColor: "rgba(107,91,237,.7)"
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: "transparent",
|
||||
areaColor: "transparent",
|
||||
borderWidth: 1,
|
||||
shadowBlur: 5,
|
||||
shadowColor: "transparent"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
nameMap: {
|
||||
China: "中国"
|
||||
},
|
||||
map: "china",
|
||||
zlevel: 2,
|
||||
top: "13%",
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
zoom: 1.2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// borderColor: 'rgba(255,209,163, .5)', //区域边框颜色
|
||||
areaColor: "rgba(73,86,166,.1)", //区域颜色
|
||||
borderWidth: 0.5, //区域边框宽度
|
||||
shadowBlur: 5,
|
||||
shadowColor: "rgba(107,91,237,.7)"
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: "transparent",
|
||||
areaColor: "transparent",
|
||||
borderWidth: 1,
|
||||
shadowBlur: 5,
|
||||
shadowColor: "transparent"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "地点",
|
||||
type: "custom",
|
||||
coordinateSystem: "geo",
|
||||
zlevel: 12,
|
||||
renderItem(params, api) {
|
||||
//具体实现自定义图标的方法
|
||||
return {
|
||||
type: "image",
|
||||
style: {
|
||||
image: require("../../../../assets/images/zs.png"),
|
||||
x: api.coord([
|
||||
mapData.citys[params.dataIndex].value[0],
|
||||
mapData.citys[params.dataIndex].value[1]
|
||||
])[0],
|
||||
y: api.coord([
|
||||
mapData.citys[params.dataIndex].value[0],
|
||||
mapData.citys[params.dataIndex].value[1]
|
||||
])[1]
|
||||
}
|
||||
};
|
||||
},
|
||||
data: mapData.citys
|
||||
}
|
||||
]
|
||||
});
|
||||
export const userOptions = (params = {}) => ({
|
||||
header: params.header,
|
||||
data: params.data
|
||||
});
|
||||
@ -0,0 +1,115 @@
|
||||
.screenWrapperRoot {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.screenWrapper {
|
||||
line-height: 1.15;
|
||||
min-height: 100vh;
|
||||
background: url("../../../assets/images/pageBg.png") top center no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.screenMain {
|
||||
display: flex;
|
||||
min-width: 1024px;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
padding: 0 0.6875rem;
|
||||
|
||||
.screenColCenter {
|
||||
flex: 5 1;
|
||||
margin: 0 0.125rem;
|
||||
position: relative;
|
||||
|
||||
.cardWrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
padding: 0.25rem 0.125rem 0;
|
||||
|
||||
& > li:not(:last-child) {
|
||||
margin-right: 0.275rem;
|
||||
}
|
||||
|
||||
& > li {
|
||||
flex: 1;
|
||||
min-height: 1.1625rem;
|
||||
background: url("../../../assets/images/card_bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 0.725rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.cardInner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #FFF;
|
||||
min-width: 1.125rem;
|
||||
text-align: center;
|
||||
|
||||
span:first-child {
|
||||
font-size: 0.275rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenCol {
|
||||
flex: 3 1;
|
||||
|
||||
.personnelCate, .ageStruct, .degreeStructure, .gradAnalysis {
|
||||
height: 3.875rem;
|
||||
padding: 0 0.3375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.screenFooter {
|
||||
display: flex;
|
||||
min-width: 1024px;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
padding: 0 0.6875rem;
|
||||
|
||||
& > div:first-child {
|
||||
margin-right: 0.125rem;
|
||||
}
|
||||
|
||||
.screenFooterCol {
|
||||
flex: 1;
|
||||
|
||||
.payrollStatistics {
|
||||
padding-bottom: 0.2375rem !important;
|
||||
|
||||
:global {
|
||||
.dv-scroll-board {
|
||||
.rows .row-item, .header {
|
||||
font-size: 0.15rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payrollStatistics, .personnelChangeStatistics {
|
||||
height: 3.5rem;
|
||||
padding: 0 0.3375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,114 @@
|
||||
.profitWrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #e5e5e5;
|
||||
padding: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.profitLeft {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 580px;
|
||||
overflow: hidden;
|
||||
|
||||
& > :not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
& > div:first-child {
|
||||
& > div {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
background: #FFF;
|
||||
position: relative;
|
||||
padding: 40px 10px 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
top: 2%;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-tabs {
|
||||
height: 100%;
|
||||
line-height: normal;
|
||||
|
||||
.ant-tabs-content-holder {
|
||||
flex: 1;
|
||||
|
||||
.ant-tabs-content {
|
||||
height: 100%;
|
||||
|
||||
.ant-tabs-tabpane {
|
||||
overflow-y: auto;
|
||||
|
||||
& > div {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profitRight {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
& > div:first-child {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
background: #fff;
|
||||
flex: 1;
|
||||
padding: 40px 10px 8px;
|
||||
position: relative;
|
||||
height: 100px;
|
||||
|
||||
:global {
|
||||
.ant-tabs {
|
||||
height: 100%;
|
||||
line-height: normal;
|
||||
|
||||
.ant-tabs-content-holder {
|
||||
flex: 1;
|
||||
|
||||
.ant-tabs-content {
|
||||
height: 100%;
|
||||
|
||||
.ant-tabs-tabpane {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
top: 2%;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
const AgeStaticsPie = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const myChart = echarts.init(document.getElementById("ageStatics"));
|
||||
// 配置项
|
||||
const option = {
|
||||
legend: {
|
||||
icon: "circle",
|
||||
bottom: "0%",
|
||||
left: "center",
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#787E95"//字体颜色
|
||||
}
|
||||
},
|
||||
color: ["#5FCD7B", "#F5CB49", "#7599F5", "#64BFDB"],
|
||||
series: [
|
||||
{
|
||||
name: "司龄统计",
|
||||
type: "pie",
|
||||
radius: ["45%", "60%"],
|
||||
avoidLabelOverlap: false,
|
||||
animation: false,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: "{d}%",
|
||||
padding: [0, -25],
|
||||
position: "outer" //文字显示在内部，如果在外边把这个去掉就好
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: "1-3年" },
|
||||
{ value: 35, name: "3-5年" },
|
||||
{ value: 20, name: "5-8年" },
|
||||
{ value: 5, name: "8年以上" }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default AgeStaticsPie;
|
||||
@ -0,0 +1,56 @@
|
||||
const EducationStaticsRedar = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const myChart = echarts.init(document.getElementById("educationStatics"));
|
||||
// 配置项
|
||||
const option = {
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
indicator: [
|
||||
{ name: "博士及以上", max: 800, axisLabel: { show: true } },
|
||||
{ name: "硕士", max: 800 },
|
||||
{ name: "本科", max: 800 },
|
||||
{ name: "大专", max: 800 },
|
||||
{ name: "大专一下", max: 800 }
|
||||
],
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "学历统计",
|
||||
type: "radar",
|
||||
data: [
|
||||
{
|
||||
value: [210, 400, 800, 230, 180],
|
||||
name: "学历统计"
|
||||
}
|
||||
],
|
||||
label: {
|
||||
show: false,
|
||||
formatter: function (params: any) {
|
||||
return params.value;
|
||||
}
|
||||
},
|
||||
itemStyle: { //此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现
|
||||
color: "#4D95E9",
|
||||
borderColor: "#4D95E9"
|
||||
},
|
||||
areaStyle: {
|
||||
color: "rgba(77,149,233,0.26)"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default EducationStaticsRedar;
|
||||
@ -0,0 +1,44 @@
|
||||
const GenderStaticsPie = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const myChart = echarts.init(document.getElementById("genderStatics"));
|
||||
// 配置项
|
||||
const option = {
|
||||
legend: {
|
||||
icon: "circle",
|
||||
bottom: "0%",
|
||||
left: "center",
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#787E95"//字体颜色
|
||||
}
|
||||
},
|
||||
color: ["#A6BEF3", "#205CE1"],
|
||||
grid: {
|
||||
bottom: "10%",
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "性别统计",
|
||||
type: "pie",
|
||||
startAngle:-180,
|
||||
radius: [40, 70],
|
||||
roseType: "radius",
|
||||
animation: false,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 70, name: "男" },
|
||||
{ value: 30, name: "女" }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default GenderStaticsPie;
|
||||
@ -0,0 +1,141 @@
|
||||
.structureCardWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
|
||||
& > span {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
|
||||
li:last-child {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
li.active {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 12px;
|
||||
color: #D4D4D4;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
& > div:first-child {
|
||||
& > span:first-child {
|
||||
font-size: 24px;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 14px;
|
||||
color: #D4D4D4;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.charts {
|
||||
height: 62px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 0.5px solid #e5e5e5;
|
||||
padding-top: 10px;
|
||||
|
||||
& > span {
|
||||
& > span:first-child {
|
||||
font-size: 12px;
|
||||
color: #D4D4D4;
|
||||
font-weight: 400;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.structureFrameWrapper {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 5px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: .5px solid #e5e5e5;
|
||||
padding-bottom: 14px;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabBox {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20px 32px 0 0;
|
||||
|
||||
li:last-child {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
li.active {
|
||||
color: #1E66F6;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
cursor: pointer;
|
||||
font-weight: 550;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,85 @@
|
||||
const InternStaticsBar = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const myChart = echarts.init(document.getElementById("internStatics"));
|
||||
// 配置项
|
||||
const option = {
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#1D3039"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
fontSize: 12,
|
||||
color: "#D4D4D4"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
offset: 0,
|
||||
data: ["项目实习生", "销售实习生", "技术实习生", "大区实习生", "客服实习生"],
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLine: {
|
||||
//这是x轴文字颜色
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#787E95",
|
||||
fontSize: 10
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: [34, 19, 15, 32, 11],
|
||||
type: "bar",
|
||||
barWidth: "25%",
|
||||
realtimeSort: true,
|
||||
yAxisIndex: 0,
|
||||
itemStyle: {
|
||||
color: "#4CAEFF" //设定单个柱子颜色
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: "right",
|
||||
fontWeight: "bold",
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default InternStaticsBar;
|
||||
@ -0,0 +1,50 @@
|
||||
const LineStaticsPie = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const myChart = echarts.init(document.getElementById("lineStatics"));
|
||||
// 配置项
|
||||
const option = {
|
||||
legend: {
|
||||
icon: "circle",
|
||||
bottom: "0%",
|
||||
left: "center",
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#787E95"//字体颜色
|
||||
}
|
||||
},
|
||||
color: ["#61D485", "#F4CB48", "#7499F5", "#65BFDC", "#ED9C5F"],
|
||||
series: [
|
||||
{
|
||||
name: "司龄统计",
|
||||
type: "pie",
|
||||
radius: ["45%", "60%"],
|
||||
center: ['50%', '41%'],
|
||||
avoidLabelOverlap: false,
|
||||
animation: false,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: "{d}%",
|
||||
padding: [0, -25],
|
||||
position: "outer" //文字显示在内部，如果在外边把这个去掉就好
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: "项目" },
|
||||
{ value: 15, name: "市场" },
|
||||
{ value: 20, name: "销售" },
|
||||
{ value: 15, name: "支撑" },
|
||||
{ value: 10, name: "销售1" }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default LineStaticsPie;
|
||||
@ -0,0 +1,182 @@
|
||||
const RankingBar = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const colorList = ["#1E66F6", "#70CDFF", "#00C48B", "#FFD700", "#1E66F6", "#70CDFF", "#00C48B", "#FFD700"];
|
||||
const myChart = echarts.init(document.getElementById("rankingCharts"));
|
||||
// 配置项
|
||||
const option = {
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: "{value} "
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#1D3039"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
fontSize: 12,
|
||||
color: "#D4D4D4"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
offset: 0,
|
||||
inverse: true, //升序
|
||||
// axisLabel: {
|
||||
// color: "#787E95",
|
||||
// fontSize: 16
|
||||
// },
|
||||
data: ["契约锁", "泛微北京", "泛微上海", "产品研发中心", "泛微华南一部", "泛微广州一部", "泛微杭州", "EBU事业一部"],
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
axisLine: {
|
||||
//这是x轴文字颜色
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#787E95",
|
||||
fontSize: 14,
|
||||
formatter: function (value: any, index: number) {
|
||||
if (index == 0) {
|
||||
return "{one|" + "} {a| " + value + "}";
|
||||
} else if (index == 1) {
|
||||
return "{two|" + "} {a|" + value + "}";
|
||||
} else if (index == 2) {
|
||||
return "{three|" + "} {a|" + value + "}";
|
||||
}
|
||||
return value;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
color: "#787E95",
|
||||
fontSize: 14
|
||||
},
|
||||
// 第一名
|
||||
one: {
|
||||
width: 40,
|
||||
height: 20,
|
||||
margin: 10,
|
||||
align: "center",
|
||||
backgroundColor: {
|
||||
image: require("../../../../assets/images/one.png")
|
||||
}
|
||||
},
|
||||
two: {
|
||||
width: 40,
|
||||
height: 20,
|
||||
margin: 10,
|
||||
align: "center",
|
||||
backgroundColor: {
|
||||
image: require("../../../../assets/images/two.png")
|
||||
}
|
||||
},
|
||||
three: {
|
||||
width: 40,
|
||||
height: 20,
|
||||
marginRight: 20,
|
||||
align: "center",
|
||||
backgroundColor: {
|
||||
image: require("../../../../assets/images/three.png")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
data: [4096, 1412, 1337, 788, 788, 347, 332, 291],
|
||||
inverse: true,//数组翻转显示
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false//不显示y轴的线
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: function (params: any, index: any) {
|
||||
return colorList[index];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: _.map([4096, 1412, 1337, 788, 788, 347, 332, 291], (it, idx) => ({
|
||||
value: it,
|
||||
itemStyle: {
|
||||
color: colorList[idx], //设定单个柱子颜色
|
||||
borderColor: colorList[idx], //设定单个柱子边框颜色
|
||||
barBorderRadius: [10, 10, 10, 10]
|
||||
}
|
||||
})),
|
||||
type: "bar",
|
||||
barWidth: "20%",
|
||||
realtimeSort: true,
|
||||
yAxisIndex: 0,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "right",
|
||||
fontWeight: "bold",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(220, 220, 220, 0.8)",
|
||||
barBorderRadius: [10, 10, 10, 10]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "bar",
|
||||
yAxisIndex: 1,//使两个柱状图重合的效果
|
||||
barWidth: "25%",
|
||||
data: _.map([5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000], (it, idx) => ({
|
||||
value: it,
|
||||
itemStyle: {
|
||||
color: "none",
|
||||
borderColor: colorList[idx],
|
||||
borderWidth: 2,
|
||||
barBorderRadius: [10, 10, 10, 10]
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default RankingBar;
|
||||
@ -0,0 +1,48 @@
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 人才结构表框组件
|
||||
* Description:
|
||||
* Date: 2023/5/5
|
||||
*/
|
||||
import React, { FC, useState } from "react";
|
||||
import styles from "./index.less";
|
||||
import cs from "classnames";
|
||||
|
||||
interface OwnProps {
|
||||
title: string;
|
||||
children: any;
|
||||
tabList?: Array<any>;
|
||||
}
|
||||
|
||||
type Props = OwnProps;
|
||||
|
||||
const StructureFrame: FC<Props> = (props) => {
|
||||
const { children, tabList, title } = props;
|
||||
const [active, setActive] = useState<number>(0);
|
||||
|
||||
return (
|
||||
<div className={styles.structureFrameWrapper}>
|
||||
<div className={styles.header}>
|
||||
<img src={require("../../../../assets/images/frame_icon.png")} alt=""/>
|
||||
<span>{title}</span>
|
||||
</div>
|
||||
{
|
||||
!_.isEmpty(tabList) &&
|
||||
<ul className={styles.tabBox}>
|
||||
{
|
||||
_.map(tabList, (it, idx) => {
|
||||
const classes = cs({
|
||||
[styles["active"]]: idx === active
|
||||
});
|
||||
return <li key={it} className={classes} onClick={() => setActive(idx)}>{it}</li>;
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StructureFrame
|
||||
;
|
||||
@ -0,0 +1,111 @@
|
||||
.structureWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #e5e5e5;
|
||||
overflow: auto;
|
||||
|
||||
.structureColumn_1 {
|
||||
display: flex;
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
|
||||
& > li:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
& > li {
|
||||
flex: 1;
|
||||
border-radius: 5px;
|
||||
background: #FFF;
|
||||
max-height: 160px;
|
||||
min-height: 100px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.structureColumn_2 {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.multipleCharts {
|
||||
height: 330px;
|
||||
display: flex;
|
||||
|
||||
& > div:not(:last-child) {
|
||||
div {
|
||||
border-right: .5px solid #e5e5e5;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: 700;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.structureColumn_3 {
|
||||
display: flex;
|
||||
|
||||
& > div:first-child {
|
||||
flex: 4 1;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
& > div:last-child {
|
||||
flex: 2 1;
|
||||
}
|
||||
|
||||
.monthlyTrendsChartsBox {
|
||||
width: 100%;
|
||||
min-height: 438px;
|
||||
max-height: 438px;
|
||||
}
|
||||
|
||||
.rankingChartsBox {
|
||||
width: 100%;
|
||||
min-height: 480px;
|
||||
max-height: 480px;
|
||||
height: 480px;
|
||||
|
||||
:global {
|
||||
.dv-capsule-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.capsule-container {
|
||||
.unit-label {
|
||||
font-size: 12px;
|
||||
color: #D4D4D4;
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.label-column {
|
||||
font-size: 16px;
|
||||
color: #787E95;
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue