泛微薪资核算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