Skip to content

S
szse
Commit 524551b1 by zhaochengxiang
Options

方块图调整

parent a0673093
Showing with 116 additions and 203 deletions
src/view/Manage/Map/Component/Org.jsx
import React from 'react'; import React from 'react';
import G6 from '@antv/g6'; import G6 from '@antv/g6';
let graph = null;
const globalFontSize = 20; const globalFontSize = 20;
const maxTextWidth = 160; 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 { class Org extends React.Component {
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
...@@ -42,7 +19,7 @@ class Org extends React.Component { ...@@ -42,7 +19,7 @@ class Org extends React.Component {
parentData.children = [...parentData.children, ...childData]; parentData.children = [...parentData.children, ...childData];
this.graph?.changeData(); this.graph?.changeData();
this.graph?.updateItem(graph.findById(parentNodeId), { this.graph?.updateItem(this.graph?.findById(parentNodeId), {
collapsed: false, collapsed: false,
}); });
...@@ -88,7 +65,7 @@ const init = (ctx) => function (container, data) { ...@@ -88,7 +65,7 @@ const init = (ctx) => function (container, data) {
}, },
}); });
graph = new G6.TreeGraph({ var graph = new G6.TreeGraph({
container, container,
width, width,
height, height,
...@@ -113,19 +90,16 @@ const init = (ctx) => function (container, data) { ...@@ -113,19 +90,16 @@ const init = (ctx) => function (container, data) {
], ],
}, },
defaultNode: { defaultNode: {
type: 'org-node', size: 26,
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
}, },
defaultEdge: { defaultEdge: {
type: 'flow-line', type: 'cubic-vertical',
size: 2, size: 2,
color: '#e2e2e2', color: '#e2e2e2',
style: {
endArrow: {
path: 'M 0,0 L 12, 6 L 9,0 L 12, -6 Z',
fill: '#91d5ff',
d: -20,
},
}
}, },
layout: { layout: {
type: 'compactBox', type: 'compactBox',
...@@ -134,10 +108,10 @@ const init = (ctx) => function (container, data) { ...@@ -134,10 +108,10 @@ const init = (ctx) => function (container, data) {
return d.id; return d.id;
}, },
getVGap: function getVGap() { getVGap: function getVGap() {
return 40; return 200;
}, },
getHGap: function getHGap() { getHGap: function getHGap() {
return 80; return 40;
}, },
}, },
}); });
...@@ -165,8 +139,21 @@ const init = (ctx) => function (container, data) { ...@@ -165,8 +139,21 @@ const init = (ctx) => function (container, data) {
}; };
graph.node(function (node) { graph.node(function (node) {
return { return {
style: {
fill: (node.dbType==='Dir'||node.dbType==='More')?'#40a9ff':'#fff',
stroke: '#096dd9'
},
label: fittingString(node.text||'', maxTextWidth, globalFontSize), 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) { ...@@ -210,112 +197,3 @@ const init = (ctx) => function (container, data) {
return graph; 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 React from 'react';
import { Card } from 'antd'; import { Row, Col } from 'antd';
import { FolderAddOutlined, FileOutlined } from '@ant-design/icons'; import classnames from 'classnames';
import './SquareItem.less'; import './SquareItem.less';
// const colors = [ import dirImg from "./assets/1.png";
// 'from-orange-400 to-pink-600', import assetImg from "./assets/3.png";
// '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',
// ];
class SquareItem extends React.Component { class SquareItem extends React.Component {
...@@ -32,27 +26,26 @@ class SquareItem extends React.Component { ...@@ -32,27 +26,26 @@ class SquareItem extends React.Component {
const title = (item.dbType==='Dir') ? (item.dirName||'') : (item.cnName||''); const title = (item.dbType==='Dir') ? (item.dirName||'') : (item.cnName||'');
const content = (item.dbType==='Dir') ? item.tableModelCount : (item.enName||''); const content = (item.dbType==='Dir') ? item.tableModelCount : (item.enName||'');
const rightClasses = classnames('right', {
'right-asset': (item.dbType!=='Dir')
});
return ( return (
<div className='map-square-item'> <Row className='map-square-item' onClick={this.onItemClick} style={{ cursor: (item.dbType==='Dir')?'pointer':'default' }}>
<Card <Col span={8} className='left'>
hoverable={item.dbType==='Dir'} <div className='flex' style={{ height: '100%', justifyContent: 'center', alignItems: 'center' }}>
onClick={this.onItemClick} <img src={(item.dbType==='Dir')?dirImg:assetImg} style={{ width: '38px', height: '38px' }} alt="" />
bordered={false} </div>
className="overflow-hidden" </Col>
cover={ <Col span={16} className={rightClasses} style={{ backgroundPosition: 'bottom right' }}>
<div className='flex px-4 py-3 leading-6 font-semibold text-white ' style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#2593fc' }}> <div className='flex' style={{ height: '100%', alignItems: 'center' }}>
<span className='flex-auto self-center textOverflow' title={title}>{title}</span> <div>
<cite className='flex opacity-75 hover:opacity-100 transition-opacity duration-200'> <div className='title textOverflow' title={title}>{title}</div>
{ <div className='content textOverflow' title={content}>{content}</div>
(item.dbType==='Dir') ? <FolderAddOutlined className='rounded-full' style={{ fontSize: '1.5em' }} /> : <FileOutlined className='rounded-full' style={{ fontSize: '1.5em' }} />
}
</cite>
</div> </div>
} </div>
> </Col>
<div className='text-center textOverflow' title={content}>{content}</div> </Row>
</Card>
</div>
); );
} }
} }
......
src/view/Manage/Map/Component/SquareItem.less
.map-square-item { .map-square-item {
.yy-card-head-title { height: 104px;
color: #fff !important; box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.08);
font-size: 20px !important; border-radius: 4px;
font-weight: bold !important;
.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 { .content {
font-size: 18px !important; font-size: 25px;
height: 76px !important; 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 { ...@@ -41,7 +41,7 @@ class Tree extends React.Component {
parentData.children = [...parentData.children, ...childData]; parentData.children = [...parentData.children, ...childData];
this.graph?.changeData(); this.graph?.changeData();
this.graph?.updateItem(graph.findById(parentNodeId), { this.graph?.updateItem(this.graph?.findById(parentNodeId), {
collapsed: false, collapsed: false,
}); });
...@@ -136,7 +136,7 @@ const init = (ctx) => function (container, data) { ...@@ -136,7 +136,7 @@ const init = (ctx) => function (container, data) {
return 20; return 20;
}, },
getHGap: function getHGap() { getHGap: function getHGap() {
return 100; return 200;
}, },
}, },
}); });
...@@ -217,18 +217,29 @@ G6.registerNode( ...@@ -217,18 +217,29 @@ G6.registerNode(
const rect = group.addShape('rect', { const rect = group.addShape('rect', {
attrs: { attrs: {
fill: '#fff', fill: '#fff',
stroke: '#666', // stroke: '#666',
radius: 5, radius: 2,
shadowOffsetX: 1,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.09)',
shadowBlur: 16,
cursor: (cfg.dbType==='Dir'||cfg.dbType==='More')?'pointer':'default', 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 content = (cfg.label||'').replace(/(.{19})/g, '$1\n');
const text = group.addShape('text', { const text = group.addShape('text', {
attrs: { attrs: {
x: 0, x: 0,
y: 0, y: 8,
fill: '#000', fill: '#000',
fontSize: globalFontSize, fontSize: globalFontSize,
textAlign: 'left', textAlign: 'left',
...@@ -245,7 +256,7 @@ G6.registerNode( ...@@ -245,7 +256,7 @@ G6.registerNode(
group.addShape('marker', { group.addShape('marker', {
attrs: { attrs: {
x: bbox.maxX + 12, x: bbox.maxX + 12,
y: bbox.height/2 -3, y: bbox.height/2 + 8 -3,
r: 6, r: 6,
symbol: EXPAND_ICON, symbol: EXPAND_ICON,
stroke: '#73d13d', stroke: '#73d13d',
...@@ -257,7 +268,7 @@ G6.registerNode( ...@@ -257,7 +268,7 @@ G6.registerNode(
group.addShape('marker', { group.addShape('marker', {
attrs: { attrs: {
x: bbox.maxX + 12, x: bbox.maxX + 12,
y: bbox.height/2 -3, y: bbox.height/2 + 8 -3,
r: 6, r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON, symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f', stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
...@@ -268,6 +279,12 @@ G6.registerNode( ...@@ -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({ rect.attr({
x: bbox.minX - 10, x: bbox.minX - 10,
y: bbox.minY - 10, y: bbox.minY - 10,
......
src/view/Manage/Map/MapContent.jsx
...@@ -12,7 +12,7 @@ import Relation from './Component/Relation'; ...@@ -12,7 +12,7 @@ import Relation from './Component/Relation';
import { dispatch, dispatchLatest } from '../../../model'; import { dispatch, dispatchLatest } from '../../../model';
const column = 4; const column = 4;
const defaultLoadCount = column*3; const defaultLoadCount = 10;
class MapContent extends React.Component { class MapContent extends React.Component {
...@@ -85,6 +85,7 @@ class MapContent extends React.Component { ...@@ -85,6 +85,7 @@ class MapContent extends React.Component {
const _treeData = { const _treeData = {
text: topic.name || '', text: topic.name || '',
name: topic.name || '',
dirId: topic.id, dirId: topic.id,
id: `d${topic.id}`, id: `d${topic.id}`,
dbType: 'Dir', dbType: 'Dir',
...@@ -124,16 +125,16 @@ class MapContent extends React.Component { ...@@ -124,16 +125,16 @@ class MapContent extends React.Component {
item.index = (index+start); item.index = (index+start);
if (item.dbType === 'Dir') { if (item.dbType === 'Dir') {
item.text = item.dirName || ''; item.text = item.name = item.dirName || '';
item.id = `d${pDirId}${item.dirId || ''}${index}`; item.id = `d${pDirId}${item.dirId || ''}${index}`;
} else if (item.dbType === 'Table') { } else if (item.dbType === 'Table') {
item.text = item.cnName || ''; item.text = item.name = item.cnName || '';
item.tid = item.id||''; item.tid = item.id||'';
item.id = `t${pDirId}${item.id || ''}${index}`; item.id = `t${pDirId}${item.id || ''}${index}`;
} }
if (index === defaultLoadCount) { if (index === defaultLoadCount) {
item.text = '点击加载更多'; item.text = item.name = '点击加载更多';
item.dbType = 'More'; item.dbType = 'More';
} }
...@@ -275,7 +276,7 @@ class MapContent extends React.Component { ...@@ -275,7 +276,7 @@ class MapContent extends React.Component {
} }
onLevelChange = (value) => { 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); this.queryAllDirectoryAsTreeByDirLevel(false, value - 1);
}); });
} }
...@@ -289,7 +290,8 @@ class MapContent extends React.Component { ...@@ -289,7 +290,8 @@ class MapContent extends React.Component {
const group = curTableModelData.slice(index*column, index*column+column); const group = curTableModelData.slice(index*column, index*column+column);
return ( return (
<List.Item key={key} style={style}> <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) => { group && group.map((item, index) => {
return ( return (
...@@ -301,12 +303,13 @@ class MapContent extends React.Component { ...@@ -301,12 +303,13 @@ class MapContent extends React.Component {
}) })
} }
</Row> </Row>
</div>
</List.Item> </List.Item>
); );
}; };
render() { 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; const { curTableModelData, breadcrumbContents, orgModelData, treeModelData, relationModelData, orgChildData, treeChildData, relationChildData, parentNodeId, currentLevel, totalLevel } = this.state;
let groups = []; let groups = [];
...@@ -318,7 +321,7 @@ class MapContent extends React.Component { ...@@ -318,7 +321,7 @@ class MapContent extends React.Component {
if (type === 'square') { if (type === 'square') {
return ( 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' && <> type === 'square' && <>
<div className="flex mb-3"> <div className="flex mb-3">
...@@ -373,7 +376,7 @@ class MapContent extends React.Component { ...@@ -373,7 +376,7 @@ class MapContent extends React.Component {
); );
} else { } else {
return ( 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)' //backgroundImage: 'linear-gradient(to bottom left,#2e3b4e,#0d0d13 52%,#0d0d13)'
}}> }}>
{ {
......
src/view/Manage/Map/index.jsx
...@@ -13,10 +13,10 @@ const graphModes = [ ...@@ -13,10 +13,10 @@ const graphModes = [
title: '方块图', title: '方块图',
key: 'square' key: 'square'
}, },
// { {
// title: '组织图', title: '组织图',
// key: 'org', key: 'org',
// }, },
{ {
title: '树形图', title: '树形图',
key: 'tree', key: 'tree',
......
src/view/Manage/Model/index.jsx
import React from 'react'; 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 copy from "copy-to-clipboard";
import ModelTree from './Component/ModelTree'; 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