Skip to content

S
szse
Commit 524551b1 by zhaochengxiang
Options

方块图调整

parent a0673093
Showing with 115 additions and 202 deletions
src/view/Manage/Map/Component/Org.jsx
import React from 'react';
import G6 from '@antv/g6';
let graph = null;
const globalFontSize = 20;
const maxTextWidth = 160;
const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
return [
['M', x - r, y - r],
['a', r, r, 0, 1, 0, r * 2, 0],
['a', r, r, 0, 1, 0, -r * 2, 0],
['M', x + 2 - r, y - r],
['L', x + r - 2, y - r],
];
};
const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
return [
['M', x - r, y - r],
['a', r, r, 0, 1, 0, r * 2, 0],
['a', r, r, 0, 1, 0, -r * 2, 0],
['M', x + 2 - r, y - r],
['L', x + r - 2, y - r],
['M', x, y - 2 * r + 2],
['L', x, y - 2],
];
};
class Org extends React.Component {
componentDidUpdate(prevProps, prevState) {
......@@ -42,7 +19,7 @@ class Org extends React.Component {
parentData.children = [...parentData.children, ...childData];
this.graph?.changeData();
this.graph?.updateItem(graph.findById(parentNodeId), {
this.graph?.updateItem(this.graph?.findById(parentNodeId), {
collapsed: false,
});
......@@ -88,7 +65,7 @@ const init = (ctx) => function (container, data) {
},
});
graph = new G6.TreeGraph({
var graph = new G6.TreeGraph({
container,
width,
height,
......@@ -113,19 +90,16 @@ const init = (ctx) => function (container, data) {
],
},
defaultNode: {
type: 'org-node',
size: 26,
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
},
defaultEdge: {
type: 'flow-line',
type: 'cubic-vertical',
size: 2,
color: '#e2e2e2',
style: {
endArrow: {
path: 'M 0,0 L 12, 6 L 9,0 L 12, -6 Z',
fill: '#91d5ff',
d: -20,
},
}
},
layout: {
type: 'compactBox',
......@@ -134,10 +108,10 @@ const init = (ctx) => function (container, data) {
return d.id;
},
getVGap: function getVGap() {
return 40;
return 200;
},
getHGap: function getHGap() {
return 80;
return 40;
},
},
});
......@@ -165,8 +139,21 @@ const init = (ctx) => function (container, data) {
};
graph.node(function (node) {
return {
style: {
fill: (node.dbType==='Dir'||node.dbType==='More')?'#40a9ff':'#fff',
stroke: '#096dd9'
},
label: fittingString(node.text||'', maxTextWidth, globalFontSize),
labelCfg: {
position: 'bottom',
offset: -5,
style: {
rotate: Math.PI / 2,
textAlign: 'start',
},
},
};
});
......@@ -210,112 +197,3 @@ const init = (ctx) => function (container, data) {
return graph;
}
G6.registerNode(
'org-node',
{
draw(cfg, group) {
const rect = group.addShape('rect', {
attrs: {
fill: '#fff',
stroke: '#666',
radius: 5,
cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
},
});
const text = group.addShape('text', {
attrs: {
x: 0,
y: 0,
fill: '#000',
fontSize: globalFontSize,
textAlign: 'left',
textBaseline: 'middle',
text: (cfg.label||''),
cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
}
});
const bbox = text.getBBox();
if (cfg.dbType==='Dir') {
if (!cfg.children) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 12,
y: (bbox.height/2) -3,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
lineWidth: 2,
cursor: 'pointer',
}
});
} else if ((cfg.children||[]).length>0) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 12,
y: (bbox.height/2) -3,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
cursor: 'pointer',
}
});
}
}
rect.attr({
x: bbox.minX - 10,
y: bbox.minY - 10,
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
height: bbox.height + 20,
});
return group;
},
update: undefined,
},
'rect',
);
G6.registerEdge(
'flow-line',
{
getPath(points) {
const startPoint = points[0];
const endPoint = points[1];
return [
['M', startPoint.x, startPoint.y],
['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
['L', endPoint.x, (startPoint.y + endPoint.y) / 2],
['L', endPoint.x, endPoint.y],
];
},
getShapeStyle(cfg) {
const startPoint = cfg.startPoint;
const endPoint = cfg.endPoint;
const controlPoints = this.getControlPoints(cfg);
let points = [startPoint]; // the start point
// the control points
if (controlPoints) {
points = points.concat(controlPoints);
}
// the end point
points.push(endPoint);
const path = this.getPath(points);
const style = Object.assign(
{},
G6.Global.defaultEdge.style,
{
path,
},
cfg.style,
);
return style;
},
},
'line'
);
\ No newline at end of file
src/view/Manage/Map/Component/SquareItem.jsx
import React from 'react';
import { Card } from 'antd';
import { FolderAddOutlined, FileOutlined } from '@ant-design/icons';
import { Row, Col } from 'antd';
import classnames from 'classnames';
import './SquareItem.less';
// const colors = [
// 'from-orange-400 to-pink-600',
// 'from-fuchsia-500 to-purple-600',
// 'from-purple-500 to-indigo-500',
// 'from-cyan-400 to-lightBlue-500',
// 'from-green-400 to-cyan-500',
// 'from-yellow-400 to-orange-500',
// ];
import dirImg from "./assets/1.png";
import assetImg from "./assets/3.png";
class SquareItem extends React.Component {
......@@ -32,27 +26,26 @@ class SquareItem extends React.Component {
const title = (item.dbType==='Dir') ? (item.dirName||'') : (item.cnName||'');
const content = (item.dbType==='Dir') ? item.tableModelCount : (item.enName||'');
const rightClasses = classnames('right', {
'right-asset': (item.dbType!=='Dir')
});
return (
<div className='map-square-item'>
<Card
hoverable={item.dbType==='Dir'}
onClick={this.onItemClick}
bordered={false}
className="overflow-hidden"
cover={
<div className='flex px-4 py-3 leading-6 font-semibold text-white ' style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#2593fc' }}>
<span className='flex-auto self-center textOverflow' title={title}>{title}</span>
<cite className='flex opacity-75 hover:opacity-100 transition-opacity duration-200'>
{
(item.dbType==='Dir') ? <FolderAddOutlined className='rounded-full' style={{ fontSize: '1.5em' }} /> : <FileOutlined className='rounded-full' style={{ fontSize: '1.5em' }} />
}
</cite>
<Row className='map-square-item' onClick={this.onItemClick} style={{ cursor: (item.dbType==='Dir')?'pointer':'default' }}>
<Col span={8} className='left'>
<div className='flex' style={{ height: '100%', justifyContent: 'center', alignItems: 'center' }}>
<img src={(item.dbType==='Dir')?dirImg:assetImg} style={{ width: '38px', height: '38px' }} alt="" />
</div>
</Col>
<Col span={16} className={rightClasses} style={{ backgroundPosition: 'bottom right' }}>
<div className='flex' style={{ height: '100%', alignItems: 'center' }}>
<div>
<div className='title textOverflow' title={title}>{title}</div>
<div className='content textOverflow' title={content}>{content}</div>
</div>
}
>
<div className='text-center textOverflow' title={content}>{content}</div>
</Card>
</div>
</Col>
</Row>
);
}
}
......
src/view/Manage/Map/Component/SquareItem.less
.map-square-item {
.yy-card-head-title {
color: #fff !important;
font-size: 20px !important;
font-weight: bold !important;
height: 104px;
box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.08);
border-radius: 4px;
.left {
height: 100%;
background: #2452B9;
border-top-color: 4px;
border-bottom-left-radius: 4px;
}
.right {
padding: 0 10px;
background-image: url('./assets/2.png');
background-repeat:no-repeat;
}
.right-asset {
background-image: url('./assets/4.png');
}
.title {
color: #C1C1C1;
font-size: 14px;
}
.yy-card-body {
font-size: 18px !important;
height: 76px !important;
.content {
font-size: 25px;
font-weight: bold;
color: #575757;
margin-top: 10px;
}
}
\ No newline at end of file
src/view/Manage/Map/Component/Tree.jsx
......@@ -41,7 +41,7 @@ class Tree extends React.Component {
parentData.children = [...parentData.children, ...childData];
this.graph?.changeData();
this.graph?.updateItem(graph.findById(parentNodeId), {
this.graph?.updateItem(this.graph?.findById(parentNodeId), {
collapsed: false,
});
......@@ -136,7 +136,7 @@ const init = (ctx) => function (container, data) {
return 20;
},
getHGap: function getHGap() {
return 100;
return 200;
},
},
});
......@@ -217,18 +217,29 @@ G6.registerNode(
const rect = group.addShape('rect', {
attrs: {
fill: '#fff',
stroke: '#666',
radius: 5,
// stroke: '#666',
radius: 2,
shadowOffsetX: 1,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.09)',
shadowBlur: 16,
cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default',
},
});
const topRect = group.addShape('rect', {
attrs: {
height: 4,
fill: '#2593fc',
}
})
const content = (cfg.label||'').replace(/(.{19})/g, '$1\n');
const text = group.addShape('text', {
attrs: {
x: 0,
y: 0,
y: 8,
fill: '#000',
fontSize: globalFontSize,
textAlign: 'left',
......@@ -245,7 +256,7 @@ G6.registerNode(
group.addShape('marker', {
attrs: {
x: bbox.maxX + 12,
y: bbox.height/2 -3,
y: bbox.height/2 + 8 -3,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
......@@ -257,7 +268,7 @@ G6.registerNode(
group.addShape('marker', {
attrs: {
x: bbox.maxX + 12,
y: bbox.height/2 -3,
y: bbox.height/2 + 8 -3,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
......@@ -268,6 +279,12 @@ G6.registerNode(
}
}
topRect.attr({
x: bbox.minX - 10,
y: bbox.minY - 10,
width: bbox.width + (cfg.dbType==='Dir'&&(!cfg.children||((cfg.children||[]).length>0)) ? 38 : 20),
})
rect.attr({
x: bbox.minX - 10,
y: bbox.minY - 10,
......
src/view/Manage/Map/MapContent.jsx
......@@ -12,7 +12,7 @@ import Relation from './Component/Relation';
import { dispatch, dispatchLatest } from '../../../model';
const column = 4;
const defaultLoadCount = column*3;
const defaultLoadCount = 10;
class MapContent extends React.Component {
......@@ -85,6 +85,7 @@ class MapContent extends React.Component {
const _treeData = {
text: topic.name || '',
name: topic.name || '',
dirId: topic.id,
id: `d${topic.id}`,
dbType: 'Dir',
......@@ -124,16 +125,16 @@ class MapContent extends React.Component {
item.index = (index+start);
if (item.dbType === 'Dir') {
item.text = item.dirName || '';
item.text = item.name = item.dirName || '';
item.id = `d${pDirId}${item.dirId || ''}${index}`;
} else if (item.dbType === 'Table') {
item.text = item.cnName || '';
item.text = item.name = item.cnName || '';
item.tid = item.id||'';
item.id = `t${pDirId}${item.id || ''}${index}`;
}
if (index === defaultLoadCount) {
item.text = '点击加载更多';
item.text = item.name = '点击加载更多';
item.dbType = 'More';
}
......@@ -275,7 +276,7 @@ class MapContent extends React.Component {
}
onLevelChange = (value) => {
this.setState({ currentLevel: value, parentNodeId: null }, () => {
this.setState({ currentLevel: value, parentNodeId: null, orgModelData: null, treeModelData: null, relationModelData: null }, () => {
this.queryAllDirectoryAsTreeByDirLevel(false, value - 1);
});
}
......@@ -289,7 +290,8 @@ class MapContent extends React.Component {
const group = curTableModelData.slice(index*column, index*column+column);
return (
<List.Item key={key} style={style}>
<Row gutter={10} style={{ width: '100%' }}>
<div style={{ width: '100%' }}>
<Row gutter={30} style={{ padding: '0 2px' }}>
{
group && group.map((item, index) => {
return (
......@@ -301,12 +303,13 @@ class MapContent extends React.Component {
})
}
</Row>
</div>
</List.Item>
);
};
render() {
const { type, topic, switchMode } = this.props;
const { type, switchMode } = this.props;
const { curTableModelData, breadcrumbContents, orgModelData, treeModelData, relationModelData, orgChildData, treeChildData, relationChildData, parentNodeId, currentLevel, totalLevel } = this.state;
let groups = [];
......@@ -318,7 +321,7 @@ class MapContent extends React.Component {
if (type === 'square') {
return (
<div className='p-3 from-blueGray-200 bg-gradient-to-b' style={{ height: '100%' }}>
<div className='p-3' style={{ height: '100%', backgroundColor: '#fff' }}>
{
type === 'square' && <>
<div className="flex mb-3">
......@@ -373,7 +376,7 @@ class MapContent extends React.Component {
);
} else {
return (
<div className='position-relative from-blueGray-200 bg-gradient-to-b' style={{ height: '100%', overflow: 'hidden',
<div className='position-relative' style={{ height: '100%', overflow: 'hidden', backgroundColor: '#fff'
//backgroundImage: 'linear-gradient(to bottom left,#2e3b4e,#0d0d13 52%,#0d0d13)'
}}>
{
......
src/view/Manage/Map/index.jsx
......@@ -13,10 +13,10 @@ const graphModes = [
title: '方块图',
key: 'square'
},
// {
// title: '组织图',
// key: 'org',
// },
{
title: '组织图',
key: 'org',
},
{
title: '树形图',
key: 'tree',
......
src/view/Manage/Model/index.jsx
import React from 'react';
import { Row, Col, Button, Input, Space, Popover } from 'antd';
import { Row, Col, Button, Input, Space } from 'antd';
import copy from "copy-to-clipboard";
import ModelTree from './Component/ModelTree';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment