Skip to content

S
szse
Commit 5c4f848b by zhaochengxiang
Options

数据地图问题修改

parent de0be0e4
Showing with 277 additions and 195 deletions
src/index.less
...@@ -62,11 +62,23 @@ code { ...@@ -62,11 +62,23 @@ code {
color: white; color: white;
} }
div[id^='__qiankun_microapp_wrapper_'] {
height: 100%;
}
//ant design //ant design
.ant-layout { .ant-layout {
background-color: #eee !important; background-color: #eee !important;
} }
.ant-tabs-content { .yy-tabs-content-holder {
height: 100% !important;
}
.yy-tabs-content {
height: 100% !important; height: 100% !important;
overflow: auto !important;
} }
src/util/axios.js
...@@ -89,7 +89,10 @@ export const SetSource = function (source) { ...@@ -89,7 +89,10 @@ export const SetSource = function (source) {
const callback = resp => { const callback = resp => {
if (resp.status === 401) { if (resp.status === 401) {
message.warning("session过期,请重新登录!"); message.warning("session过期,请重新登录!");
//外网
window.location.href="/center-home/view/login" window.location.href="/center-home/view/login"
//内网
// window.location.href="/api/auth/login"
return null; return null;
} }
else if (resp.status !== 200) { else if (resp.status !== 200) {
......
src/view/Manage/Map/Component/Relation.jsx
...@@ -45,184 +45,182 @@ class Relation extends React.Component { ...@@ -45,184 +45,182 @@ class Relation extends React.Component {
componentDidMount() { componentDidMount() {
const { type, loadMoreData } = this.props; const { type, loadMoreData } = this.props;
setTimeout(() => { const container = document.getElementById(`container${type||''}`);
const container = document.getElementById(`container${type||''}`); if (!container) return;
if (!container) return;
const width = container.scrollWidth || 500;
const width = container.scrollWidth || 500; const height = container.scrollHeight || 500;
const height = container.scrollHeight || 500;
G6.registerNode( G6.registerNode(
'relation-node', 'relation-node',
{ {
draw(cfg, group) { draw(cfg, group) {
group.addShape('circle', { group.addShape('circle', {
attrs: { attrs: {
x: 0, x: 0,
y: 0, y: 0,
r: cfg.size/2, r: cfg.size/2,
fill: colors[cfg.cluster % colors.length], fill: colors[cfg.cluster % colors.length],
}, },
}); });
const text = group.addShape('text', {
attrs: {
x: 0,
y: 0,
fill: '#000',
fontSize: globalFontSize,
textAlign: 'center',
textBaseline: 'middle',
text: (cfg.label||''),
}
});
const bbox = text.getBBox();
if (cfg.dbType==='Dir') { const text = group.addShape('text', {
if (!cfg.children) { attrs: {
group.addShape('marker', { x: 0,
attrs: { y: 0,
x: bbox.maxX + 8, fill: '#000',
y: bbox.height/2, fontSize: globalFontSize,
r: 6, textAlign: 'center',
symbol: EXPAND_ICON, textBaseline: 'middle',
stroke: '#73d13d', text: (cfg.label||''),
lineWidth: 2,
}
});
} else if ((cfg.children||[]).length>0) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 8,
y: bbox.height/2,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
}
});
}
} }
});
return group;
},
update: undefined,
},
'single-node'
);
const tooltip = new G6.Tooltip({ const bbox = text.getBBox();
offsetX: 10,
offsetY: 10, if (cfg.dbType==='Dir') {
// the types of items that allow the tooltip show up if (!cfg.children) {
// 允许出现 tooltip 的 item 类型 group.addShape('marker', {
itemTypes: ['node'], attrs: {
// custom the tooltip's content x: bbox.maxX + 8,
// 自定义 tooltip 内容 y: bbox.height/2,
getContent: (e) => { r: 6,
const outDiv = document.createElement('div'); symbol: EXPAND_ICON,
outDiv.style.width = 'fit-content'; stroke: '#73d13d',
//outDiv.style.padding = '0px 0px 20px 0px'; lineWidth: 2,
outDiv.innerHTML = ` }
<h4>${e.item.getModel().text||''}</h4> });
`; } else if ((cfg.children||[]).length>0) {
return outDiv; group.addShape('marker', {
attrs: {
x: bbox.maxX + 8,
y: bbox.height/2,
r: 6,
symbol: cfg.collapsed ? EXPAND_ICON : COLLAPSE_ICON,
stroke: cfg.collapsed ? '#73d13d' : '#ff4d4f',
lineWidth: 2,
}
});
}
}
return group;
}, },
}); update: undefined,
},
'single-node'
);
const tooltip = new G6.Tooltip({
offsetX: 10,
offsetY: 10,
// the types of items that allow the tooltip show up
// 允许出现 tooltip 的 item 类型
itemTypes: ['node'],
// custom the tooltip's content
// 自定义 tooltip 内容
getContent: (e) => {
const outDiv = document.createElement('div');
outDiv.style.width = 'fit-content';
//outDiv.style.padding = '0px 0px 20px 0px';
outDiv.innerHTML = `
<h4>${e.item.getModel().text||''}</h4>
`;
return outDiv;
},
});
graph = new G6.TreeGraph({ graph = new G6.TreeGraph({
container: `container${type||''}`, container: `container${type||''}`,
width, width,
height, height,
plugins: [tooltip], plugins: [tooltip],
linkCenter: true, linkCenter: true,
maxZoom: 1, maxZoom: 1,
modes: { modes: {
default: [ default: [
{ {
type: 'collapse-expand', type: 'collapse-expand',
onChange: function onChange(item, collapsed) { onChange: function onChange(item, collapsed) {
const data = item.get('model'); const data = item.get('model');
graph.updateItem(item, { graph.updateItem(item, {
collapsed, collapsed,
}); });
data.collapsed = collapsed; data.collapsed = collapsed;
return true; return true;
},
}, },
'drag-canvas',
'zoom-canvas',
],
},
layout: {
type: 'compactBox',
direction: 'RL',
getId: function getId(d) {
return d.id;
},
getHeight: () => {
return 26;
},
getWidth: () => {
return 26;
}, },
getVGap: () => { 'drag-canvas',
return 20; 'zoom-canvas',
}, ],
getHGap: () => { },
return 40; layout: {
}, type: 'compactBox',
radial: true, direction: 'RL',
getId: function getId(d) {
return d.id;
}, },
defaultNode: { getHeight: () => {
type: 'relation-node', return 26;
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
}, },
defaultEdge: { getWidth: () => {
type: 'cubic-horizontal', return 26;
size: 2,
color: '#e2e2e2',
// style: {
// endArrow: {
// path: 'M 0,0 L 12, 6 L 9,0 L 12, -6 Z',
// fill: '#91d5ff',
// d: -40,
// },
// }
}, },
}); getVGap: () => {
return 20;
},
getHGap: () => {
return 40;
},
radial: true,
},
defaultNode: {
type: 'relation-node',
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
},
defaultEdge: {
type: 'cubic-horizontal',
size: 2,
color: '#e2e2e2',
// style: {
// endArrow: {
// path: 'M 0,0 L 12, 6 L 9,0 L 12, -6 Z',
// fill: '#91d5ff',
// d: -40,
// },
// }
},
});
this.layoutGraph(); this.layoutGraph();
graph.on('node:click', function (e) { graph.on('node:click', function (e) {
const node = e.item; const node = e.item;
const model = node.getModel(); const model = node.getModel();
if (model.dbType==='Dir') { if (model.dbType==='Dir') {
const children = model.children; const children = model.children;
if (!children && loadMoreData) { if (!children && loadMoreData) {
loadMoreData(model.dirId||''); loadMoreData(model.dirId||'');
}
} else {
//通过资产id跳转到资产详情页
// model.tableModelId
// history && history.push(`${ContextPath}/home`);
} }
} else {
}); //通过资产id跳转到资产详情页
// model.tableModelId
if (typeof window !== 'undefined') { // history && history.push(`${ContextPath}/home`);
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
} }
}, 100);
});
if (typeof window !== 'undefined') {
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
}
} }
......
src/view/Manage/Map/Component/SquareItem.jsx
import React from 'react'; import React from 'react';
import { Card } from 'antd'; import { Card } from 'antd';
import './SquareItem.less';
class SquareItem extends React.Component { class SquareItem extends React.Component {
onItemClick = () => { onItemClick = () => {
...@@ -18,7 +20,7 @@ class SquareItem extends React.Component { ...@@ -18,7 +20,7 @@ class SquareItem extends React.Component {
render() { render() {
const { item } = this.props; const { item } = this.props;
return ( return (
<> <div className='map-square-item'>
{ {
item && ( item && (
item.dbType==='Dir' ? <Card title={ item.dbType==='Dir' ? <Card title={
...@@ -38,7 +40,7 @@ class SquareItem extends React.Component { ...@@ -38,7 +40,7 @@ class SquareItem extends React.Component {
</Card> </Card>
) )
} }
</> </div>
); );
} }
} }
......
src/view/Manage/Map/Component/SquareItem.less 0 → 100644
.map-square-item {
.yy-card-head {
background-color: #ff4d4f !important;
.yy-card-head-title {
color: #fff !important;
:hover {
color: #1890ff;
}
}
}
}
\ No newline at end of file
src/view/Manage/Model/Component/ImportAction.jsx
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Alert } from 'antd'; import { Alert } from 'antd';
import ImportActionHeader from './ImportActionHeader';
import ImportActionTable from './ImportActionTable'; import ImportActionTable from './ImportActionTable';
import ImportActionIndex from './ImportActionIndex'; import ImportActionIndex from './ImportActionIndex';
...@@ -21,7 +22,8 @@ for (let i = 0; i < 20; i++) { ...@@ -21,7 +22,8 @@ for (let i = 0; i < 20; i++) {
}); });
} }
const ImportAction = () => { const ImportAction = (props) => {
const { action } = props;
const [ tableData, setTableData ] = useState([...originData]); const [ tableData, setTableData ] = useState([...originData]);
const [indexData, setIndexData] = useState([]); const [indexData, setIndexData] = useState([]);
const [fileds, setFileds] = useState([]); const [fileds, setFileds] = useState([]);
...@@ -61,14 +63,17 @@ const ImportAction = () => { ...@@ -61,14 +63,17 @@ const ImportAction = () => {
return ( return (
<> <>
<Alert { <ImportActionHeader editable={action!=='detail'} /> }
message="表格可以通过拖拽来排序" {
type="info" action!=='detail' && <Alert
closable message="表格可以通过拖拽来排序"
className='mb-3' type="info"
/> closable
<ImportActionTable data={tableData} onChange={onTableChange} /> className='mb-3'
<ImportActionIndex data={indexData} fileds={fileds} onChange={onIndexChange} /> />
}
<ImportActionTable data={tableData} onChange={onTableChange} editable={action!=='detail'} />
<ImportActionIndex data={indexData} fileds={fileds} onChange={onIndexChange} editable={action!=='detail'} />
</> </>
); );
}; };
......
src/view/Manage/Model/Component/ImportActionHeader.jsx 0 → 100644
import React from 'react';
import { Form, Input, Row, Col } from 'antd';
const ImportActionHeader = (props) => {
const { editable } = props;
return (
<Form
// {...layout}
name="basic"
>
<Row gutter={10}>
<Col span={12}>
<Form.Item
label="模型名称"
name="name"
rules={[{ required: true, message: '请输入模型名称!' }]}
>
<Input disabled={editable} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="模型描述"
name="desc"
disabled={editable}
rules={[{ required: true, message: '请输入模型描述!' }]}
>
<Input disabled={editable} />
</Form.Item>
</Col>
</Row>
</Form>
)
}
export default ImportActionHeader;
\ No newline at end of file
src/view/Manage/Model/Component/ImportActionIndex.jsx
...@@ -6,7 +6,7 @@ import update from 'immutability-helper'; ...@@ -6,7 +6,7 @@ import update from 'immutability-helper';
const { Option } = Select; const { Option } = Select;
const type = 'DragableBodyRow'; const type = 'DragableIndexBodyRow';
const modes = [ const modes = [
'主键索引', '主键索引',
...@@ -127,7 +127,7 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) => ...@@ -127,7 +127,7 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
}; };
const ImportActionIndex = (props) => { const ImportActionIndex = (props) => {
const { data, fileds, onChange } = props; const { data, fileds, onChange, editable } = props;
const [form] = Form.useForm(); const [form] = Form.useForm();
const [editingKey, setEditingKey] = useState(''); const [editingKey, setEditingKey] = useState('');
const [suggests, setSuggests] = useState([]); const [suggests, setSuggests] = useState([]);
...@@ -245,8 +245,10 @@ const ImportActionIndex = (props) => { ...@@ -245,8 +245,10 @@ const ImportActionIndex = (props) => {
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
render: (_, record) => { render: (_, record) => {
const editable = isEditing(record);
return editable ? ( if (!editable) return null;
return isEditing(record) ? (
<> <>
<Typography.Link className='mr-3' disabled={editingKey === ''} onClick={() => save()}> <Typography.Link className='mr-3' disabled={editingKey === ''} onClick={() => save()}>
保存 保存
...@@ -307,9 +309,11 @@ const ImportActionIndex = (props) => { ...@@ -307,9 +309,11 @@ const ImportActionIndex = (props) => {
return ( return (
<> <>
<Divider>数据表索引</Divider> <Divider>数据表索引</Divider>
<div className='d-flex mb-3'> {
<Button type="primary" onClick={onAddClick} style={{ marginLeft: 'auto' }} disabled={ editingKey!=='' } >新增行</Button> editable && <div className='d-flex mb-3'>
</div> <Button type="primary" onClick={onAddClick} style={{ marginLeft: 'auto' }} disabled={ editingKey!=='' } >新增行</Button>
</div>
}
<DndProvider backend={HTML5Backend} > <DndProvider backend={HTML5Backend} >
<Form form={form} component={false}> <Form form={form} component={false}>
<Table <Table
...@@ -317,11 +321,11 @@ const ImportActionIndex = (props) => { ...@@ -317,11 +321,11 @@ const ImportActionIndex = (props) => {
body: { body: {
cell: EditableCell, cell: EditableCell,
//编辑状态下不允许拖动 //编辑状态下不允许拖动
row: editingKey===''?DragableBodyRow:null, row: (editable&&editingKey==='')?DragableBodyRow:null,
}, },
}} }}
onRow={(record, index) => { onRow={(record, index) => {
if (editingKey!=='') return null; if (!editable || editingKey!=='') return null;
return { return {
index, index,
......
src/view/Manage/Model/Component/ImportActionTable.jsx
...@@ -4,7 +4,7 @@ import { DndProvider, useDrag, useDrop } from 'react-dnd'; ...@@ -4,7 +4,7 @@ import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend'; import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper'; import update from 'immutability-helper';
const type = 'DragableBodyRow'; const type = 'DragableTableBodyRow';
const EditableCell = ({ const EditableCell = ({
editing, editing,
...@@ -91,7 +91,7 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) => ...@@ -91,7 +91,7 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
}; };
const ImportActionTable = (props) => { const ImportActionTable = (props) => {
const { data, onChange } = props; const { data, onChange, editable } = props;
const [form] = Form.useForm(); const [form] = Form.useForm();
const [editingKey, setEditingKey] = useState(''); const [editingKey, setEditingKey] = useState('');
const [recommends, setRecommends] = useState([]); const [recommends, setRecommends] = useState([]);
...@@ -100,7 +100,8 @@ const ImportActionTable = (props) => { ...@@ -100,7 +100,8 @@ const ImportActionTable = (props) => {
const isEditing = (record) => record.key === editingKey; const isEditing = (record) => record.key === editingKey;
const onAddClick = () => { const onAddClick = () => {
const newData = [{}, ...data]; //test
const newData = [{key: -1}, ...data];
onChange && onChange(newData); onChange && onChange(newData);
edit(newData[0]); edit(newData[0]);
...@@ -128,9 +129,11 @@ const ImportActionTable = (props) => { ...@@ -128,9 +129,11 @@ const ImportActionTable = (props) => {
const cancel = () => { const cancel = () => {
const newData = [...data]; const newData = [...data];
const item = newData[editingKey]; const index = newData.findIndex((item) => editingKey === item.key);
const item = newData[index];
if (!item.name || item.name==='') { if (!item.name || item.name==='') {
newData.splice(editingKey, 1); newData.splice(index, 1);
onChange && onChange(newData); onChange && onChange(newData);
} }
...@@ -283,8 +286,9 @@ const ImportActionTable = (props) => { ...@@ -283,8 +286,9 @@ const ImportActionTable = (props) => {
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
render: (_, record) => { render: (_, record) => {
const editable = isEditing(record); if (!editable) return null;
return editable ? (
return isEditing(record) ? (
<> <>
<Typography.Link className='mr-3' disabled={editingKey === ''} onClick={() => save()}> <Typography.Link className='mr-3' disabled={editingKey === ''} onClick={() => save()}>
保存 保存
...@@ -344,9 +348,11 @@ const ImportActionTable = (props) => { ...@@ -344,9 +348,11 @@ const ImportActionTable = (props) => {
return ( return (
<> <>
<Divider>数据表结构</Divider> <Divider>数据表结构</Divider>
<div className='d-flex mb-3'> {
<Button type="primary" onClick={onAddClick} style={{ marginLeft: 'auto' }} disabled={ editingKey!=='' } >新增行</Button> editable && <div className='d-flex mb-3'>
</div> <Button type="primary" onClick={onAddClick} style={{ marginLeft: 'auto' }} disabled={ editingKey!=='' } >新增行</Button>
</div>
}
<DndProvider backend={HTML5Backend} > <DndProvider backend={HTML5Backend} >
<Form form={form} component={false} onValuesChange={onValuesChange}> <Form form={form} component={false} onValuesChange={onValuesChange}>
<Table <Table
...@@ -354,11 +360,11 @@ const ImportActionTable = (props) => { ...@@ -354,11 +360,11 @@ const ImportActionTable = (props) => {
body: { body: {
cell: EditableCell, cell: EditableCell,
//编辑状态下不允许拖动 //编辑状态下不允许拖动
row: editingKey===''?DragableBodyRow:null, row: (editable&&editingKey==='')?DragableBodyRow:null,
}, },
}} }}
onRow={(record, index) => { onRow={(record, index) => {
if (editingKey!=='') return null; if (!editable || editingKey!=='') return null;
return { return {
index, index,
......
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