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 {
color: white;
}
div[id^='__qiankun_microapp_wrapper_'] {
height: 100%;
}
//ant design
.ant-layout {
background-color: #eee !important;
}
.ant-tabs-content {
.yy-tabs-content-holder {
height: 100% !important;
}
.yy-tabs-content {
height: 100% !important;
overflow: auto !important;
}
src/util/axios.js
......@@ -89,7 +89,10 @@ export const SetSource = function (source) {
const callback = resp => {
if (resp.status === 401) {
message.warning("session过期,请重新登录!");
//外网
window.location.href="/center-home/view/login"
//内网
// window.location.href="/api/auth/login"
return null;
}
else if (resp.status !== 200) {
......
src/view/Manage/Map/Component/Relation.jsx
......@@ -45,184 +45,182 @@ class Relation extends React.Component {
componentDidMount() {
const { type, loadMoreData } = this.props;
setTimeout(() => {
const container = document.getElementById(`container${type||''}`);
if (!container) return;
const width = container.scrollWidth || 500;
const height = container.scrollHeight || 500;
const container = document.getElementById(`container${type||''}`);
if (!container) return;
const width = container.scrollWidth || 500;
const height = container.scrollHeight || 500;
G6.registerNode(
'relation-node',
{
draw(cfg, group) {
group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r: cfg.size/2,
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();
G6.registerNode(
'relation-node',
{
draw(cfg, group) {
group.addShape('circle', {
attrs: {
x: 0,
y: 0,
r: cfg.size/2,
fill: colors[cfg.cluster % colors.length],
},
});
if (cfg.dbType==='Dir') {
if (!cfg.children) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 8,
y: bbox.height/2,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
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,
}
});
}
const text = group.addShape('text', {
attrs: {
x: 0,
y: 0,
fill: '#000',
fontSize: globalFontSize,
textAlign: 'center',
textBaseline: 'middle',
text: (cfg.label||''),
}
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;
const bbox = text.getBBox();
if (cfg.dbType==='Dir') {
if (!cfg.children) {
group.addShape('marker', {
attrs: {
x: bbox.maxX + 8,
y: bbox.height/2,
r: 6,
symbol: EXPAND_ICON,
stroke: '#73d13d',
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({
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({
container: `container${type||''}`,
width,
height,
plugins: [tooltip],
linkCenter: true,
maxZoom: 1,
modes: {
default: [
{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
const data = item.get('model');
graph.updateItem(item, {
collapsed,
});
data.collapsed = collapsed;
return true;
},
graph = new G6.TreeGraph({
container: `container${type||''}`,
width,
height,
plugins: [tooltip],
linkCenter: true,
maxZoom: 1,
modes: {
default: [
{
type: 'collapse-expand',
onChange: function onChange(item, collapsed) {
const data = item.get('model');
graph.updateItem(item, {
collapsed,
});
data.collapsed = collapsed;
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: () => {
return 20;
},
getHGap: () => {
return 40;
},
radial: true,
'drag-canvas',
'zoom-canvas',
],
},
layout: {
type: 'compactBox',
direction: 'RL',
getId: function getId(d) {
return d.id;
},
defaultNode: {
type: 'relation-node',
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
getHeight: () => {
return 26;
},
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,
// },
// }
getWidth: () => {
return 26;
},
});
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) {
const node = e.item;
const model = node.getModel();
graph.on('node:click', function (e) {
const node = e.item;
const model = node.getModel();
if (model.dbType==='Dir') {
const children = model.children;
if (!children && loadMoreData) {
loadMoreData(model.dirId||'');
}
} else {
//通过资产id跳转到资产详情页
// model.tableModelId
// history && history.push(`${ContextPath}/home`);
if (model.dbType==='Dir') {
const children = model.children;
if (!children && loadMoreData) {
loadMoreData(model.dirId||'');
}
});
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);
};
} else {
//通过资产id跳转到资产详情页
// model.tableModelId
// history && history.push(`${ContextPath}/home`);
}
}, 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 { Card } from 'antd';
import './SquareItem.less';
class SquareItem extends React.Component {
onItemClick = () => {
......@@ -18,7 +20,7 @@ class SquareItem extends React.Component {
render() {
const { item } = this.props;
return (
<>
<div className='map-square-item'>
{
item && (
item.dbType==='Dir' ? <Card title={
......@@ -38,7 +40,7 @@ class SquareItem extends React.Component {
</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 { Alert } from 'antd';
import ImportActionHeader from './ImportActionHeader';
import ImportActionTable from './ImportActionTable';
import ImportActionIndex from './ImportActionIndex';
......@@ -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 [indexData, setIndexData] = useState([]);
const [fileds, setFileds] = useState([]);
......@@ -61,14 +63,17 @@ const ImportAction = () => {
return (
<>
<Alert
message="表格可以通过拖拽来排序"
type="info"
closable
className='mb-3'
/>
<ImportActionTable data={tableData} onChange={onTableChange} />
<ImportActionIndex data={indexData} fileds={fileds} onChange={onIndexChange} />
{ <ImportActionHeader editable={action!=='detail'} /> }
{
action!=='detail' && <Alert
message="表格可以通过拖拽来排序"
type="info"
closable
className='mb-3'
/>
}
<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';
const { Option } = Select;
const type = 'DragableBodyRow';
const type = 'DragableIndexBodyRow';
const modes = [
'主键索引',
......@@ -127,7 +127,7 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
};
const ImportActionIndex = (props) => {
const { data, fileds, onChange } = props;
const { data, fileds, onChange, editable } = props;
const [form] = Form.useForm();
const [editingKey, setEditingKey] = useState('');
const [suggests, setSuggests] = useState([]);
......@@ -245,8 +245,10 @@ const ImportActionIndex = (props) => {
title: '操作',
dataIndex: 'action',
render: (_, record) => {
const editable = isEditing(record);
return editable ? (
if (!editable) return null;
return isEditing(record) ? (
<>
<Typography.Link className='mr-3' disabled={editingKey === ''} onClick={() => save()}>
保存
......@@ -307,9 +309,11 @@ const ImportActionIndex = (props) => {
return (
<>
<Divider>数据表索引</Divider>
<div className='d-flex mb-3'>
<Button type="primary" onClick={onAddClick} style={{ marginLeft: 'auto' }} disabled={ editingKey!=='' } >新增行</Button>
</div>
{
editable && <div className='d-flex mb-3'>
<Button type="primary" onClick={onAddClick} style={{ marginLeft: 'auto' }} disabled={ editingKey!=='' } >新增行</Button>
</div>
}
<DndProvider backend={HTML5Backend} >
<Form form={form} component={false}>
<Table
......@@ -317,11 +321,11 @@ const ImportActionIndex = (props) => {
body: {
cell: EditableCell,
//编辑状态下不允许拖动
row: editingKey===''?DragableBodyRow:null,
row: (editable&&editingKey==='')?DragableBodyRow:null,
},
}}
onRow={(record, index) => {
if (editingKey!=='') return null;
if (!editable || editingKey!=='') return null;
return {
index,
......
src/view/Manage/Model/Component/ImportActionTable.jsx
......@@ -4,7 +4,7 @@ import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
const type = 'DragableBodyRow';
const type = 'DragableTableBodyRow';
const EditableCell = ({
editing,
......@@ -91,7 +91,7 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
};
const ImportActionTable = (props) => {
const { data, onChange } = props;
const { data, onChange, editable } = props;
const [form] = Form.useForm();
const [editingKey, setEditingKey] = useState('');
const [recommends, setRecommends] = useState([]);
......@@ -100,7 +100,8 @@ const ImportActionTable = (props) => {
const isEditing = (record) => record.key === editingKey;
const onAddClick = () => {
const newData = [{}, ...data];
//test
const newData = [{key: -1}, ...data];
onChange && onChange(newData);
edit(newData[0]);
......@@ -128,9 +129,11 @@ const ImportActionTable = (props) => {
const cancel = () => {
const newData = [...data];
const item = newData[editingKey];
const index = newData.findIndex((item) => editingKey === item.key);
const item = newData[index];
if (!item.name || item.name==='') {
newData.splice(editingKey, 1);
newData.splice(index, 1);
onChange && onChange(newData);
}
......@@ -283,8 +286,9 @@ const ImportActionTable = (props) => {
title: '操作',
dataIndex: 'action',
render: (_, record) => {
const editable = isEditing(record);
return editable ? (
if (!editable) return null;
return isEditing(record) ? (
<>
<Typography.Link className='mr-3' disabled={editingKey === ''} onClick={() => save()}>
保存
......@@ -344,9 +348,11 @@ const ImportActionTable = (props) => {
return (
<>
<Divider>数据表结构</Divider>
<div className='d-flex mb-3'>
<Button type="primary" onClick={onAddClick} style={{ marginLeft: 'auto' }} disabled={ editingKey!=='' } >新增行</Button>
</div>
{
editable && <div className='d-flex mb-3'>
<Button type="primary" onClick={onAddClick} style={{ marginLeft: 'auto' }} disabled={ editingKey!=='' } >新增行</Button>
</div>
}
<DndProvider backend={HTML5Backend} >
<Form form={form} component={false} onValuesChange={onValuesChange}>
<Table
......@@ -354,11 +360,11 @@ const ImportActionTable = (props) => {
body: {
cell: EditableCell,
//编辑状态下不允许拖动
row: editingKey===''?DragableBodyRow:null,
row: (editable&&editingKey==='')?DragableBodyRow:null,
},
}}
onRow={(record, index) => {
if (editingKey!=='') return null;
if (!editable || editingKey!=='') return null;
return {
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