泛微薪资核算iframe表格
parent
c31ec3957a
commit
70d0508a9c
Binary file not shown.
|
After Width: | Height: | Size: 950 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 254 B |
Binary file not shown.
|
After Width: | Height: | Size: 1017 B |
Binary file not shown.
|
After Width: | Height: | Size: 389 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
@ -0,0 +1,172 @@
|
||||
@node-color: #1890ff;
|
||||
@line-width: 1px;
|
||||
@line-color: @node-color;
|
||||
@expand-icon-size: 16px;
|
||||
.text-overflow-ellipsis() {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.org-chart {
|
||||
&-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
&-table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
line-height: 1.5715;
|
||||
|
||||
.expand-icon {
|
||||
display: inline-block;
|
||||
width: @expand-icon-size;
|
||||
height: @expand-icon-size;
|
||||
border-radius: 50%;
|
||||
background-color: @line-color;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
margin-left: -@expand-icon-size / 2;
|
||||
margin-bottom: -@expand-icon-size / 2;
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
|
||||
&-expanded,
|
||||
&-collapsed {
|
||||
&::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-collapsed {
|
||||
&::after {
|
||||
content: '';
|
||||
width: 2px;
|
||||
height: 8px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: darken(@line-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
|
||||
&.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-node {
|
||||
display: inline-block;
|
||||
//border: 1px solid @node-color;
|
||||
//padding: 0.5rem;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-line {
|
||||
height: 20px;
|
||||
position: relative;
|
||||
|
||||
&:not(&-children) {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: @line-width;
|
||||
height: 100%;
|
||||
background-color: @line-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-children {
|
||||
&:nth-child(odd) {
|
||||
border-right: @line-width solid @line-color;
|
||||
}
|
||||
|
||||
&:not(:first-child, :last-child) {
|
||||
border-top: @line-width solid @line-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 水平
|
||||
&&-horizontal {
|
||||
.expand-icon {
|
||||
top: 50%;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
margin: -@expand-icon-size / 2 -@expand-icon-size / 2 auto auto;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:nth-child(odd) {
|
||||
> .org-chart-table-line-children {
|
||||
border-bottom: @line-width solid @line-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child, :last-child) {
|
||||
> .org-chart-table-line-children {
|
||||
border-left: @line-width solid @line-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.org-chart-table {
|
||||
&-node {
|
||||
margin: 5px 0;
|
||||
width: 120px;
|
||||
|
||||
&-content {
|
||||
.text-overflow-ellipsis();
|
||||
}
|
||||
}
|
||||
|
||||
&-line {
|
||||
height: auto;
|
||||
width: 20px;
|
||||
|
||||
&:not(&-children) {
|
||||
&:before {
|
||||
top: auto;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: @line-width;
|
||||
}
|
||||
}
|
||||
|
||||
&-children {
|
||||
&:nth-child(odd),
|
||||
&:not(:first-child, :last-child) {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
import classNames from "classnames";
|
||||
import React from "react";
|
||||
import { OrgChartProps } from "./interface";
|
||||
import OrgChartNode from "./components/OrgChartNode";
|
||||
import ChartWrapper from "./components/ChartWrapper";
|
||||
import styles from "./OrgChart.less";
|
||||
|
||||
const OrgChart = (props: OrgChartProps) => {
|
||||
const { data, className, style, pan, zoom, maxZoom,minZoom,zoomStep, ...otherProps } = props;
|
||||
return !!data ? (
|
||||
<ChartWrapper
|
||||
pan={pan}
|
||||
zoom={zoom}
|
||||
maxZoom={maxZoom}
|
||||
minZoom={minZoom}
|
||||
zoomStep={zoomStep}
|
||||
>
|
||||
<div className={classNames(styles["org-chart-container"], className)} style={style}>
|
||||
<OrgChartNode {...otherProps} data={data}/>
|
||||
</div>
|
||||
</ChartWrapper>
|
||||
) : null;
|
||||
};
|
||||
|
||||
OrgChart.defaultProps = {
|
||||
direction: "vertical",
|
||||
expandAll: true,
|
||||
expandable: false
|
||||
};
|
||||
|
||||
export default OrgChart;
|
||||
@ -0,0 +1,126 @@
|
||||
import React from "react";
|
||||
import styles from "../OrgChart.less";
|
||||
|
||||
|
||||
const clsPrefix = "cp-react-org-chart-chart-wrapper";
|
||||
|
||||
export default class ChartWrapper extends React.PureComponent {
|
||||
|
||||
static propTypes = {};
|
||||
|
||||
static defaultProps = {
|
||||
maxZoom: 2,
|
||||
minZoom: 0.5,
|
||||
zoomStep: 0.03
|
||||
};
|
||||
|
||||
state = {
|
||||
scale: 1,
|
||||
isMove: false,
|
||||
translateX: 0,
|
||||
translateY: 0,
|
||||
originX: 0,
|
||||
originY: 0
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener("mousemove", this.onMouseMove);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("mousemove", this.onMouseMove);
|
||||
}
|
||||
|
||||
onZoom = e => {
|
||||
const { zoom, maxZoom, minZoom, zoomStep } = this.props;
|
||||
|
||||
if (!zoom) return;
|
||||
const { deltaY, pageX, pageY } = e;
|
||||
|
||||
const { offsetWidth, offsetHeight } = this.wrapper;
|
||||
let { scale } = this.state;
|
||||
const { translateX, translateY } = this.state;
|
||||
if (deltaY < 0 && scale < maxZoom) {
|
||||
scale += zoomStep;
|
||||
}
|
||||
if (deltaY > 0 && scale > minZoom) {
|
||||
scale -= zoomStep;
|
||||
}
|
||||
this.setState({
|
||||
scale,
|
||||
originX: pageX,
|
||||
originY: pageY
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
toggleMove(isMove) {
|
||||
this.setState({ isMove });
|
||||
}
|
||||
|
||||
onMouseDown = e => {
|
||||
this.toggleMove(true);
|
||||
const { pageX, pageY } = e;
|
||||
const { translateX, translateY } = this.state;
|
||||
this.pageX = pageX;
|
||||
this.pageY = pageY;
|
||||
this.translateX = translateX;
|
||||
this.translateY = translateY;
|
||||
};
|
||||
|
||||
onMouseUp = e => {
|
||||
this.toggleMove(false);
|
||||
};
|
||||
|
||||
onMouseMove = e => {
|
||||
|
||||
const { isMove, scale } = this.state;
|
||||
if (!isMove) return;
|
||||
const { pageX, pageY } = e;
|
||||
const x = (pageX - this.pageX) / scale + this.translateX;
|
||||
const y = (pageY - this.pageY) / scale + this.translateY;
|
||||
this.setState({
|
||||
translateX: x,
|
||||
translateY: y
|
||||
});
|
||||
};
|
||||
|
||||
getProps() {
|
||||
const { zoom, pan } = this.props;
|
||||
const props = {};
|
||||
if (zoom) {
|
||||
props.onWheel = this.onZoom;
|
||||
}
|
||||
if (pan) {
|
||||
props.onMouseUp = this.onMouseUp;
|
||||
props.onMouseDown = this.onMouseDown;
|
||||
props.onMouseMove = this.onMouseMove;
|
||||
}
|
||||
return props;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
const { scale, translateX, translateY, isMove, originX, originY } = this.state;
|
||||
const cursor = isMove ? "move" : "default";
|
||||
const props = this.getProps();
|
||||
return (
|
||||
<div className={styles[clsPrefix]} style={{ overflow: "hidden", flex: 1 }}>
|
||||
<div
|
||||
ref={node => {
|
||||
this.wrapper = node;
|
||||
}}
|
||||
style={{
|
||||
cursor,
|
||||
transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`,
|
||||
transformOrigin: `${originX}px ${originY}px`
|
||||
}}
|
||||
className={styles["chart-wrapper-main"]}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,180 @@
|
||||
import classNames from "classnames";
|
||||
import React from "react";
|
||||
import { OrgChartNodeDataType, OrgChartNodeProps, RowProps } from "../interface";
|
||||
import OrgChartNodeRow from "./OrgChartNodeRow";
|
||||
import styles from "../OrgChart.less";
|
||||
|
||||
const OrgChartNode = (props: OrgChartNodeProps) => {
|
||||
const {
|
||||
data,
|
||||
expandAll,
|
||||
expandable,
|
||||
direction,
|
||||
renderNode,
|
||||
onExpand,
|
||||
onClick
|
||||
} = props;
|
||||
|
||||
const [expanded, setExpanded] = React.useState<boolean>(false);
|
||||
|
||||
const handleExpandChange = () => {
|
||||
const newExpanded = !expanded;
|
||||
setExpanded(newExpanded);
|
||||
onExpand?.(newExpanded, data);
|
||||
};
|
||||
|
||||
const getOrgNodeRow = (
|
||||
span: number,
|
||||
data: OrgChartNodeDataType
|
||||
): RowProps => {
|
||||
const contentNode: React.ReactNode = (
|
||||
<div className={styles["org-chart-table-node-content"]} title={data.label}>
|
||||
{data.label}
|
||||
</div>
|
||||
);
|
||||
|
||||
return [
|
||||
{
|
||||
span,
|
||||
content: (
|
||||
<td>
|
||||
<div
|
||||
className={classNames(styles["org-chart-table-node"], data.className)}
|
||||
style={data.style}
|
||||
onClick={() => onClick?.(data)}>
|
||||
{!!renderNode ? renderNode(data, contentNode) : contentNode}
|
||||
</div>
|
||||
</td>
|
||||
)
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
const getLineRow = (span: number): RowProps => {
|
||||
return [
|
||||
{
|
||||
span,
|
||||
content: (
|
||||
<td className={styles["org-chart-table-line"]}>
|
||||
{expandable ? (
|
||||
<div
|
||||
className={classNames({
|
||||
[styles["expand-icon"]]: expandable,
|
||||
[styles["expand-icon-expanded"]]: expandable && expanded,
|
||||
[styles["expand-icon-collapsed"]]: expandable && !expanded
|
||||
})}
|
||||
onClick={() => handleExpandChange()}></div>
|
||||
) : null}
|
||||
</td>
|
||||
)
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
const getChildrenLineRow = (span: number, itemSpan: number): RowProps => {
|
||||
const cells: RowProps = [];
|
||||
for (let index = 0; index < span; index = index + itemSpan) {
|
||||
cells.push({
|
||||
span: 1,
|
||||
content: (
|
||||
<td
|
||||
key={index}
|
||||
className={classNames(
|
||||
styles["org-chart-table-line"],
|
||||
styles["org-chart-table-line-children"],
|
||||
{
|
||||
[styles["hidden"]]: !expanded
|
||||
}
|
||||
)}>
|
||||
|
||||
</td>
|
||||
)
|
||||
});
|
||||
}
|
||||
return cells;
|
||||
};
|
||||
|
||||
const getChildrenNode = (
|
||||
datas: OrgChartNodeDataType[] = [],
|
||||
itemSpan: number
|
||||
): RowProps => {
|
||||
const cells: RowProps = [];
|
||||
datas.forEach((data, index) => {
|
||||
cells[itemSpan * index] = {
|
||||
span: itemSpan,
|
||||
content: (
|
||||
<td
|
||||
key={data.key}
|
||||
className={classNames(styles["org-chart-table-node-children"], {
|
||||
[styles["hidden"]]: !expanded
|
||||
})}>
|
||||
<OrgChartNode {...props} data={data}/>
|
||||
</td>
|
||||
)
|
||||
};
|
||||
});
|
||||
return cells;
|
||||
};
|
||||
|
||||
const getRows = (): RowProps[] => {
|
||||
if (data) {
|
||||
const rows: RowProps[] = [];
|
||||
const childrenLength = data?.children?.length || 0;
|
||||
const span = childrenLength * 2;
|
||||
|
||||
rows.push(getOrgNodeRow(span, data));
|
||||
// 判断是否有子节点
|
||||
if (data.children?.length ?? 0 > 0) {
|
||||
rows.push(getLineRow(span));
|
||||
rows.push(getChildrenLineRow(span, 1));
|
||||
rows.push(getChildrenNode(data.children, 2));
|
||||
}
|
||||
|
||||
if (direction === "horizontal") {
|
||||
const newRow: RowProps[] = [];
|
||||
rows.forEach((row, rowIndex) => {
|
||||
row.forEach((cell, cellIndex) => {
|
||||
newRow[cellIndex] = newRow[cellIndex] || [];
|
||||
newRow[cellIndex][rowIndex] = cell;
|
||||
});
|
||||
});
|
||||
return newRow;
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
const rows = React.useMemo(() => {
|
||||
return getRows();
|
||||
}, [data, expanded, direction]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (expandable === true) {
|
||||
setExpanded(!!expandAll);
|
||||
} else {
|
||||
setExpanded(true);
|
||||
}
|
||||
}, [expandAll, expandable]);
|
||||
|
||||
return (
|
||||
<table
|
||||
className={classNames(styles["org-chart-table"], {
|
||||
[styles["org-chart-table-horizontal"]]: direction === "horizontal",
|
||||
[styles["org-chart-table-vertical"]]: direction === "vertical"
|
||||
})}>
|
||||
<tbody>
|
||||
{rows.map((row, index) => (
|
||||
<OrgChartNodeRow
|
||||
key={index}
|
||||
index={index}
|
||||
row={row}
|
||||
direction={direction}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrgChartNode;
|
||||
@ -0,0 +1,27 @@
|
||||
import { OrgChartNodeProps, RowProps } from '../interface';
|
||||
import React from 'react';
|
||||
|
||||
export interface OrgChartNodeRowProps
|
||||
extends Pick<OrgChartNodeProps, 'direction'> {
|
||||
className?: string;
|
||||
index: number;
|
||||
row: RowProps;
|
||||
}
|
||||
|
||||
const OrgChartNodeRow = (props: OrgChartNodeRowProps) => {
|
||||
const { className, index, row, direction } = props;
|
||||
|
||||
return (
|
||||
<tr key={index} className={className}>
|
||||
{row.map((cell, cellIndex) => {
|
||||
return React.cloneElement(cell.content, {
|
||||
key: cellIndex,
|
||||
...(direction === 'horizontal' ? { rowSpan: cell.span } : {}),
|
||||
...(direction === 'vertical' ? { colSpan: cell.span } : {}),
|
||||
});
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrgChartNodeRow;
|
||||
@ -0,0 +1,5 @@
|
||||
import { OrgChartNodeDataType, OrgChartProps } from './interface';
|
||||
import OrgChart from './OrgChart';
|
||||
|
||||
export { OrgChartNodeDataType, OrgChartProps };
|
||||
export default OrgChart;
|
||||
@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
|
||||
export interface CellProps {
|
||||
span: number;
|
||||
content: React.ReactElement;
|
||||
}
|
||||
|
||||
export type RowProps = CellProps[];
|
||||
|
||||
export interface OrgChartNodeDataType {
|
||||
key: string | number;
|
||||
label: string;
|
||||
operatingIncome?: string;
|
||||
operatingIncomePercent?: string;
|
||||
operatingProfit?: string;
|
||||
operatingProfitPercent?: string;
|
||||
children?: OrgChartNodeDataType[];
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export interface OrgChartNodeProps {
|
||||
data: OrgChartNodeDataType;
|
||||
expandAll?: boolean;
|
||||
expandable?: boolean;
|
||||
direction?: "horizontal" | "vertical";
|
||||
renderNode?: (
|
||||
node: OrgChartNodeDataType,
|
||||
originNode: React.ReactNode
|
||||
) => React.ReactNode;
|
||||
onExpand?: (expanded: boolean, node: OrgChartNodeDataType) => void;
|
||||
onClick?: (node: OrgChartNodeDataType) => void;
|
||||
}
|
||||
|
||||
export interface OrgChartProps extends Partial<OrgChartNodeProps> {
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
pan?: boolean;
|
||||
zoom?: boolean;
|
||||
maxZoom?: number;
|
||||
minZoom?: number;
|
||||
zoomStep?: number;
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 框架组件
|
||||
* Description:
|
||||
* Date: 2023/5/6
|
||||
*/
|
||||
import React, { FunctionComponent } from "react";
|
||||
import styles from "./index.less";
|
||||
|
||||
interface OwnProps {
|
||||
children: any;
|
||||
title: string;
|
||||
}
|
||||
|
||||
type Props = OwnProps;
|
||||
|
||||
const frameBox: FunctionComponent<Props> = (props) => {
|
||||
const { children, title } = props;
|
||||
|
||||
return (
|
||||
<div className={styles.frameBoxWrapper}>
|
||||
<div className={styles.header}><span><span>{title}</span></span></div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default frameBox;
|
||||
@ -0,0 +1,28 @@
|
||||
.frameBoxWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.header {
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
|
||||
& > span {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
span {
|
||||
border-left: 5px solid #0055F3;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,193 @@
|
||||
.frameCard1Wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > div:first-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
& > div:last-child {
|
||||
& > span:first-child {
|
||||
font-size: 24px;
|
||||
color: #14224F;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 12px;
|
||||
color: #D4D4D4;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 83px;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 0.5px solid #e5e5e5;
|
||||
padding-top: 10px;
|
||||
|
||||
& > span {
|
||||
img {
|
||||
width: 8px;
|
||||
margin-left: 8px;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& > span:first-child {
|
||||
font-size: 12px;
|
||||
color: #D4D4D4;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.frameCard2Wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 16px;
|
||||
background: url("../../../../assets/images/top_bottom.png") no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position-y: bottom;
|
||||
|
||||
& > div {
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > span:first-child {
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
& > div:last-child {
|
||||
& > span:first-child {
|
||||
font-size: 24px;
|
||||
color: #FFF;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 12px;
|
||||
color: #FFF;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
color: #FFF;
|
||||
padding: 0 8px;
|
||||
height: 33px;
|
||||
|
||||
& > span {
|
||||
img {
|
||||
width: 8px;
|
||||
margin-left: 8px;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& > span:first-child {
|
||||
font-size: 12px;
|
||||
color: #FFF;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 12px;
|
||||
color: #FFF;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,136 @@
|
||||
const PersonnelFlowBar = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const myChart = echarts.init(document.getElementById("personnelFlowBar"));
|
||||
// 配置项
|
||||
const option = {
|
||||
tooltip: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 默认为直线，可选为：'line' | 'shadow'
|
||||
type: "shadow"
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
let str = params[0].name + "<br>";
|
||||
for (let item of params) {
|
||||
str += item.seriesName + " : " + item.value + "%<br>";
|
||||
}
|
||||
return str;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
icon: "circle",
|
||||
top: "-1%",
|
||||
right: "2%",
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#B8B8B8"//字体颜色
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "2%",
|
||||
right: "2%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
show: false
|
||||
},
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "#B8B8B8",
|
||||
fontSize: 16,
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "%",
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "#787E95",
|
||||
fontSize: 14
|
||||
// formatter: '{value} 人'
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#787E95",
|
||||
fontSize: 16
|
||||
},
|
||||
// 修改坐标轴线样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "transparent"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(93,126,158,1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "今年",
|
||||
type: "bar",
|
||||
showBackground: false,
|
||||
barWidth: "15%",
|
||||
barGap: "80%",
|
||||
data: initData([12, 10, 23, 15, 3, 7, 11, 20, 17, 15, 8, 12]),
|
||||
// bar 样式修改
|
||||
itemStyle: {
|
||||
color: "#3EA1FF"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "去年",
|
||||
type: "bar",
|
||||
showBackground: false,
|
||||
barWidth: "15%",
|
||||
data: initData([7, 12, 8, 12, 12, 5, 8, 15, 18, 12, 9, 7]),
|
||||
// bar 样式修改
|
||||
itemStyle: {
|
||||
color: "#0ED8F9"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default PersonnelFlowBar;
|
||||
|
||||
|
||||
const initData = (arr: Array<number>) => {
|
||||
const total = _.reduce(arr, (pre: number, cur: number) => pre + cur, 0);
|
||||
const serie = [];
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
const num = arr[i];
|
||||
const numcount = Percentage(num, total);
|
||||
serie.push(numcount);
|
||||
}
|
||||
return serie;
|
||||
};
|
||||
|
||||
const Percentage = (num: number, total: number) => {
|
||||
return (Math.round(num / total * 100));// 小数点后两位百分比
|
||||
};
|
||||
@ -0,0 +1,161 @@
|
||||
const TrendsInSeparationsCharts = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const myChart = echarts.init(document.getElementById("trendsInSeparationsCharts"));
|
||||
// 配置项
|
||||
const option = {
|
||||
tooltip: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 默认为直线，可选为：'line' | 'shadow'
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
icon: "circle",
|
||||
top: "5%",
|
||||
right: "center",
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 12,//字体大小
|
||||
color: "#787E95"//字体颜色
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "2%",
|
||||
right: "2%",
|
||||
bottom: "3%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
show: false
|
||||
},
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "#B8B8B8",
|
||||
fontSize: 16,
|
||||
show: true
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "人",
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "#787E95",
|
||||
fontSize: 14
|
||||
// formatter: '{value} 人'
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#787E95",
|
||||
fontSize: 16
|
||||
},
|
||||
// 修改坐标轴线样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "transparent"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(93,126,158,1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
// 修改坐标值样式
|
||||
axisLabel: {
|
||||
color: "#787E95",
|
||||
fontSize: 14,
|
||||
formatter: '{value} %'
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#787E95",
|
||||
fontSize: 16
|
||||
},
|
||||
// 修改坐标轴线样式
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "transparent"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(93,126,158,1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "主动离职",
|
||||
type: "bar",
|
||||
stack:"Search Engine",
|
||||
showBackground: false,
|
||||
barWidth: "10%",
|
||||
barGap: "100%",
|
||||
data: [80, 30, 10, 38, 45, 70, 70, 70, 40, 50, 30, 10],
|
||||
// bar 样式修改
|
||||
itemStyle: {
|
||||
barBorderRadius: 2,
|
||||
color: "#00C48B"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "辞退",
|
||||
type: "bar",
|
||||
stack:"Search Engine",
|
||||
showBackground: false,
|
||||
barWidth: "10%",
|
||||
data: [20, 10, 5, 10, 10, 1, 1, 12, 10, 15, 5, 2],
|
||||
// bar 样式修改
|
||||
itemStyle: {
|
||||
barBorderRadius: 2,
|
||||
color: "#FFA400"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "离职率",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
data: [10, 4, 2, 5, 5, 7, 7, 10, 4, 6, 4, 2],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#66EFE8",
|
||||
lineStyle: {
|
||||
color: "#66EFE8"
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default TrendsInSeparationsCharts;
|
||||
@ -1,6 +1,201 @@
|
||||
@gap: 16px;
|
||||
@cardWidth: calc(~"20vw" - 4 * @gap / 5);
|
||||
.peopleFlowWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #e5e5e5;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.headerCardWrapper {
|
||||
display: flex;
|
||||
margin-bottom: @gap;
|
||||
padding: 0;
|
||||
|
||||
& > li:not(:last-child) {
|
||||
margin-right: @gap;
|
||||
|
||||
}
|
||||
|
||||
& > li:not(:first-child) {
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
& > li:first-child {
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
& > li {
|
||||
width: @cardWidth;
|
||||
min-height: 220px;
|
||||
border-radius: 5px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.contentBox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.contentBoxLeft {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.contenBoxTop {
|
||||
flex: 1;
|
||||
|
||||
.chartsBox {
|
||||
flex: 4 1;
|
||||
display: flex;
|
||||
|
||||
& > ul {
|
||||
width: @cardWidth;
|
||||
margin: 0 @gap 0 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
& > li:first-child {
|
||||
margin-bottom: @gap;
|
||||
}
|
||||
|
||||
& > li {
|
||||
background: #FFF;
|
||||
min-height: 220px;
|
||||
border-radius: 5px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex: 3 1;
|
||||
background: #FFF;
|
||||
border-radius: 5px;
|
||||
min-height: 220px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > ul {
|
||||
margin: 20px 16px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
|
||||
& > li:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > li.active {
|
||||
font-size: 16px;
|
||||
color: #0055F3;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid #0055F3;
|
||||
}
|
||||
|
||||
& > li:not(:last-child) {
|
||||
margin-right: 26px;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
min-height: 377px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.contenBoxBottom {
|
||||
flex: 1;
|
||||
margin-top: @gap;
|
||||
background: #FFF;
|
||||
border-radius: 5px;
|
||||
|
||||
.trendsInSeparations {
|
||||
min-height: 220px;
|
||||
max-height: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rankingBox {
|
||||
width: @cardWidth;
|
||||
margin-left: @gap;
|
||||
background: #FFF;
|
||||
border-radius: 5px;
|
||||
|
||||
.trainingRanking {
|
||||
overflow-y: auto;
|
||||
|
||||
.rankDescBox {
|
||||
display: flex;
|
||||
font-size: 4px;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.rankNum {
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.rankNumber {
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rankDescPersBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > span:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 8px;
|
||||
|
||||
& > span:first-child {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 12px;
|
||||
color: #B8B8B8;
|
||||
font-weight: 400;
|
||||
min-width: 130px;
|
||||
max-width: 130px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rankRow {
|
||||
background: #FEFAED;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-list-item {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,52 @@
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 公司组件
|
||||
* Description:
|
||||
* Date: 2023/5/10
|
||||
*/
|
||||
import React, { FunctionComponent } from "react";
|
||||
import { OrgChartNodeDataType } from "@/components/reactChart/interface";
|
||||
import styles from "./index.less";
|
||||
import classNames from "classnames";
|
||||
|
||||
interface OwnProps {
|
||||
node: OrgChartNodeDataType;
|
||||
}
|
||||
|
||||
type Props = OwnProps;
|
||||
|
||||
const CompanyItem: FunctionComponent<Props> = (props) => {
|
||||
const { node } = props;
|
||||
const classes = classNames(styles["header"], {
|
||||
[styles["parent"]]: node.key === 0
|
||||
});
|
||||
return (
|
||||
<div className={styles.companyItemWrapper}>
|
||||
<div className={classes}>{node?.label}</div>
|
||||
<div className={styles.contBox}>
|
||||
<div>
|
||||
<div>
|
||||
<span>营业收入</span>
|
||||
<span>{node?.operatingIncome}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>同比</span>
|
||||
<span>{node?.operatingIncomePercent}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>利润总额</span>
|
||||
<span>{node?.operatingProfit}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>同比</span>
|
||||
<span>{node?.operatingProfitPercent}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyItem;
|
||||
@ -0,0 +1,94 @@
|
||||
const IncomeStatisticsRadar = (echarts: any) => {
|
||||
// 实例化对象
|
||||
const myChart = echarts.init(document.getElementById("incomeStatisticsRadar"));
|
||||
// 配置项
|
||||
const option = {
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
legend: {
|
||||
show: true, //是否显示图例
|
||||
icon: "rect", //图例形状
|
||||
bottom: "2%", // 图例距离顶部边距
|
||||
left: "center", // 图例距离左侧边距
|
||||
itemWidth: 10, // 图例标记的图形宽度。[ default: 25 ]
|
||||
itemHeight: 10, // 图例标记的图形高度。[ default: 14 ]
|
||||
itemGap: 30, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
|
||||
orient: "horizontal", // 图例列表的布局朝向,'horizontal'为横向,''为纵向.
|
||||
textStyle: { // 图例的公用文本样式。
|
||||
fontSize: 14,
|
||||
color: "#D4D4D4"
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
// , axisLabel: { show: true } 该属性加上会报错
|
||||
indicator: [
|
||||
{ name: "销售", max: 20000 },
|
||||
{ name: "客服", max: 20000 },
|
||||
{ name: "开发", max: 20000 },
|
||||
{ name: "其他", max: 20000 },
|
||||
{ name: "项目", max: 20000 }
|
||||
],
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "人均浮动收入",
|
||||
type: "radar",
|
||||
data: [
|
||||
{
|
||||
value: [9000, 2000, 9000, 6000, 6000],
|
||||
name: "人均浮动收入"
|
||||
}
|
||||
],
|
||||
label: {
|
||||
show: false,
|
||||
formatter: function (params: any) {
|
||||
return params.value;
|
||||
}
|
||||
},
|
||||
itemStyle: { //此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现
|
||||
color: "#64C3FF",
|
||||
borderColor: "#64C3FF"
|
||||
},
|
||||
areaStyle: {
|
||||
color: "rgba(100,195,255,0.26)"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "人均固定收入",
|
||||
type: "radar",
|
||||
data: [
|
||||
{
|
||||
value: [5500, 8000, 5000, 8800, 8900],
|
||||
name: "人均固定收入"
|
||||
}
|
||||
],
|
||||
label: {
|
||||
show: false,
|
||||
formatter: function (params: any) {
|
||||
return params.value;
|
||||
}
|
||||
},
|
||||
itemStyle: { //此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现
|
||||
color: "#66EFE8",
|
||||
borderColor: "#66EFE8"
|
||||
},
|
||||
areaStyle: {
|
||||
color: "rgba(102,239,232,0.26)"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// 配置项给实例对象
|
||||
myChart.setOption(option);
|
||||
return myChart;
|
||||
};
|
||||
|
||||
export default IncomeStatisticsRadar;
|
||||
@ -0,0 +1,100 @@
|
||||
.companyItemWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.header {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
font-size: 16px;
|
||||
background: #199DFF;
|
||||
}
|
||||
|
||||
.parent {
|
||||
background: #1E66F6 !important;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.contBox {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
color: #B8B8B8;
|
||||
font-size: 12px;
|
||||
border: 1px solid rgba(25, 157, 255, 1);
|
||||
border-top: none;
|
||||
|
||||
& > div:first-child {
|
||||
border-right: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > div:first-child {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
& > span:last-child {
|
||||
color: #787E95;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.regionItemWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #EBF5FF;
|
||||
min-width: 116px;
|
||||
|
||||
.header {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.contBox {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
color: #B8B8B8;
|
||||
font-size: 12px;
|
||||
|
||||
& > div:first-child {
|
||||
border-right: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
& > span:last-child {
|
||||
color: #787E95;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.regionItemWrapperChild {
|
||||
background: #EAFCFC;
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 公司组件
|
||||
* Description:
|
||||
* Date: 2023/5/10
|
||||
*/
|
||||
import React, { FunctionComponent } from "react";
|
||||
import { OrgChartNodeDataType } from "@/components/reactChart/interface";
|
||||
import styles from "./index.less";
|
||||
import classNames from "classnames";
|
||||
|
||||
interface OwnProps {
|
||||
node: OrgChartNodeDataType;
|
||||
}
|
||||
|
||||
type Props = OwnProps;
|
||||
|
||||
const RegionItem: FunctionComponent<Props> = (props) => {
|
||||
const { node } = props;
|
||||
const classes = classNames(styles["regionItemWrapper"], {
|
||||
[styles["regionItemWrapperChild"]]: node.key === 20 || node.key === 21 || node.key === 22 || node.key === 23 || node.key === 24 || node.key === 25
|
||||
});
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div className={styles.header}>{node?.label}</div>
|
||||
<div className={styles.contBox}>
|
||||
<div>
|
||||
<div>
|
||||
<span>营业收入</span>
|
||||
<span>{node?.operatingIncome}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>同比</span>
|
||||
<span>{node?.operatingIncomePercent}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>利润总额</span>
|
||||
<span>{node?.operatingProfit}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>同比</span>
|
||||
<span>{node?.operatingProfitPercent}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegionItem;
|
||||
@ -1,114 +1,277 @@
|
||||
.profitWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #e5e5e5;
|
||||
padding: 8px;
|
||||
overflow: hidden;
|
||||
overflow: hidden auto;
|
||||
|
||||
.profitLeft {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 580px;
|
||||
overflow: hidden;
|
||||
& > div:not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
& > :not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.profitHeader {
|
||||
display: flex;
|
||||
|
||||
& > div:first-child {
|
||||
& > div {
|
||||
height: 100% !important;
|
||||
}
|
||||
& > div:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
background: #FFF;
|
||||
position: relative;
|
||||
padding: 40px 10px 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
top: 2%;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
//数据看板
|
||||
.dataTableWrapper {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
thead th {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-tabs {
|
||||
height: 100%;
|
||||
line-height: normal;
|
||||
tbody {
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td.title {
|
||||
font-size: 14px;
|
||||
color: #9A9A9A;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
td.col3 {
|
||||
img {
|
||||
width: 15px;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.dataVal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > span:first-child {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
line-height: 36px;
|
||||
|
||||
.ant-tabs-content-holder {
|
||||
flex: 1;
|
||||
& > span:first-child {
|
||||
font-size: 22px;
|
||||
color: #0055F3;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ant-tabs-content {
|
||||
height: 100%;
|
||||
& > span:last-child {
|
||||
font-size: 12px;
|
||||
color: #D4D4D4;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tabs-tabpane {
|
||||
overflow-y: auto;
|
||||
& > span:last-child {
|
||||
margin-top: 8px;
|
||||
|
||||
& > span:first-child {
|
||||
font-size: 12px;
|
||||
color: #9A9A9A;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
& > span:last-child {
|
||||
font-size: 12px;
|
||||
color: #FF4751;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profitRight {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
& > div:first-child {
|
||||
margin-bottom: 16px;
|
||||
//
|
||||
.incomeStatisticsRadar {
|
||||
min-height: 360px;
|
||||
max-height: 360px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
background: #fff;
|
||||
flex: 1;
|
||||
padding: 40px 10px 8px;
|
||||
position: relative;
|
||||
height: 100px;
|
||||
// 团队分析排名
|
||||
.teamRankingWrapper, .personRankingWrapper {
|
||||
min-height: 360px;
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
|
||||
:global {
|
||||
.ant-tabs {
|
||||
height: 100%;
|
||||
line-height: normal;
|
||||
.rankDescBox {
|
||||
display: flex;
|
||||
font-size: 4px;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.rankNum {
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.rankNumber {
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ant-tabs-content-holder {
|
||||
flex: 1;
|
||||
.rankDescPersBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ant-tabs-content {
|
||||
height: 100%;
|
||||
& > span:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 8px;
|
||||
|
||||
& > span:first-child {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ant-tabs-tabpane {
|
||||
overflow-y: auto;
|
||||
}
|
||||
& > span:last-child {
|
||||
font-size: 12px;
|
||||
color: #B8B8B8;
|
||||
font-weight: 400;
|
||||
min-width: 130px;
|
||||
max-width: 130px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rankDescPersBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > span:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 8px;
|
||||
|
||||
& > span:first-child {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 12px;
|
||||
color: #B8B8B8;
|
||||
font-weight: 400;
|
||||
min-width: 130px;
|
||||
max-width: 130px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
top: 2%;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
.rankRow {
|
||||
background: #FEFAED;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-select {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.ant-list-item {
|
||||
padding: 6px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.rankingTabWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 32px;
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
|
||||
& > li.active {
|
||||
color: #0055F3;
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid #0055F3;
|
||||
}
|
||||
|
||||
& > li:not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
& > li {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
min-width: 95px;
|
||||
max-width: 95px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profitCenter {
|
||||
display: flex;
|
||||
|
||||
& > div:first-child {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
min-height: 200px;
|
||||
background: #FFF;
|
||||
border-radius: 5px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.totalLaborCost {
|
||||
min-height: 326px;
|
||||
max-height: 326px;
|
||||
}
|
||||
}
|
||||
|
||||
.profitBottom {
|
||||
min-height: 800px;
|
||||
background: #FFF;
|
||||
border-radius: 5px;
|
||||
|
||||
//& > div {
|
||||
// height: 100%;
|
||||
//
|
||||
// & > div {
|
||||
// height: 100%;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue