Skip to content

A
amos-convertor-view
Commit 8a9ee1f4 authored by 单奇雲's avatar 单奇雲
Browse files
Options

新增TOPO节点添加及删除功能

parent 1407f9c8
Hide whitespace changes
Inline Side-by-side
Showing with 155 additions and 134 deletions
src/consts/urlConsts.js
View file @ 8a9ee1f4
......@@ -224,6 +224,7 @@ export const FasSerUrl = {
updateTopographyUrl: completePrefix(baseURI, 'api/Topography/updateTopo'),//更新Topo图数据
queryNodeDetailUrl: completePrefix(baseURI, 'api/Topography/detail/{id}'),//获取node节点详情
saveNodeDetailUrl:completePrefix(baseURI, 'api/Topography/detail'),//保存nodeDetail详情
deleteTopoUrl:completePrefix(baseURI, 'api/Topography/{type}/{id}'),//删除点/线
};
......
src/services/preControlService.js
View file @ 8a9ee1f4
......@@ -220,4 +220,11 @@ export const nodeDetailTopoAction = (id) => {
*/
export const nodeDetailTopoSaveAction = (nodeDatil) => {
return commonPost(FasSerUrl.saveNodeDetailUrl, nodeDatil );
};
/**
* 删除节点/线
*/
export const deleteTopoAction = (id, type) => {
return commonDelete(formatUrl(FasSerUrl.deleteTopoUrl, { id, type }));
};
\ No newline at end of file
src/styles/view/planMgmt/leaderStruct.scss
View file @ 8a9ee1f4
......@@ -44,6 +44,15 @@
border-right-style: solid;
border-width: 1px;
.leader-struct-palette{
border: 1px solid rgb(201, 201, 201);
height: 10%;
}
.leader-struct-diagram{
height: 90%;
}
.tooltip-content {
width: 251px;
background: #345fa6;
......
src/view/planMgmt/common/conf.js
View file @ 8a9ee1f4
......@@ -17,5 +17,5 @@ export const leaderStructButton = [
// { key: 'add', text: '添加', icon: 'tianjia' },
{ key: 'edit', text: '编辑', icon: 'xiugai' },
{ key: 'save', text: '保存', icon: 'baocun' },
// { key: 'delete', text: '删除', icon: 'shanchu' }
{ key: 'delete', text: '删除', icon: 'shanchu' }
];
src/view/planMgmt/view/leaderStruct/LeaderStructModel.js
View file @ 8a9ee1f4
......@@ -66,7 +66,6 @@ class LeaderStructModel extends Component {
componentWillMount = () => {
const { selectNode } = this.props || {};
debugger;
this.getNodeDetail(selectNode);
};
......@@ -116,35 +115,34 @@ class LeaderStructModel extends Component {
this.setState({ form });
}
handleSubmit = nodeid => {
debugger;
handleSubmit = node => {
this.form.validate((valid, dataValues) => {
debugger;
if (valid) {
let { form } = this.state;
form.nodeid = nodeid;
this.nodeDetailEdit(form);
form.nodeid = node.nodeid;
form.nodekey = node.key;
// this.nodeDetailEdit(form);
form.nodeDetail = JSON.stringify(form.nodeDetail);
this.props.saveTopography(form);
} else {
return false;
}
});
};
nodeDetailEdit = body => {
debugger;
body.nodeDetail = JSON.stringify(body.nodeDetail);
nodeDetailTopoSaveAction(body).then(
data => {
AmosAlert.success('提示', '操作成功');
// this.props.reloadPage();
this.props.cancel();
this.props.reloadSelectNode(this.props.selectNode.id);
},
err => {
AmosAlert.error('提示', err);
}
);
};
// nodeDetailEdit = body => {
// body.nodeDetail = JSON.stringify(body.nodeDetail);
// nodeDetailTopoSaveAction(body).then(
// data => {
// AmosAlert.success('提示', '操作成功');
// this.props.cancel();
// this.props.reloadSelectNode(this.props.selectNode.id);
// },
// err => {
// AmosAlert.error('提示', err);
// }
// );
// };
/**
* 获取表格刷新方法
......
src/view/planMgmt/view/leaderStruct/index.js
View file @ 8a9ee1f4
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { browserHistory } from 'amos-react-router';
import { Modal, Button, message } from 'amos-framework';
import { Modal, Button, message, AmosAlert } from 'amos-framework';
import BizIcon from './../../../common/icon/BizIcon';
import ToolBar from './ToolBar';
import go from 'amos-gojs';
import { queryTopographyAction, updateTopographyAction, nodeDetailTopoAction } from './../../../../services/preControlService';
import { queryTopographyAction, updateTopographyAction, nodeDetailTopoAction, deleteTopoAction } from './../../../../services/preControlService';
import LeaderStructModel from './LeaderStructModel';
import LeaderStructRightGrid from './LeaderStructRightGrid';
......@@ -27,75 +27,65 @@ class LeaderStruct extends Component {
modal: false,
toolBarFlag: '',
selectNode: {},
selectNodeType: '',
rightGridData: []
};
this.diagram = null; //gojs图
this.myPalette = null; //工具栏
this.updateTopologyData = {};
}
// componentWillMount(){
// let { appId } = this.props.location.state;
// debugger;
// }
componentDidMount() {
let { appId } = this.props.location.state;
debugger;
this.fetchData(appId);
}
fetchData = (appId) => {
queryTopographyAction(appId).then(res =>{
this.setState({nodeData: res.nodeData , linkData: res.linkData })
this.renderCanvas();
});
}
// this function is the Node.dragComputation, to limit the movement of the parts
stayInFixedArea = (part, pt, gridpt) => {
let diagram = part.diagram;
if (diagram === null) {return pt;}
// compute the document area without padding
let v = diagram.documentBounds.copy();
v.subtractMargin(diagram.padding);
// get the bounds of the part being dragged
let b = part.actualBounds;
let loc = part.location;
// now limit the location appropriately
let x = Math.max(v.x, Math.min(pt.x, v.right - b.width)) + (loc.x - b.x);
let y = Math.max(v.y, Math.min(pt.y, v.bottom - b.height)) + (loc.y - b.y);
return new go.Point(x, y);
}
makePort = (name, align, spot, output, input) => {
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
// the port is basically just a transparent rectangle that stretches along the side of the node,
// and becomes colored when the mouse passes over it
return goObj(go.Shape,
makePort = (name, spot, output, input) => {
// the port is basically just a small transparent square
return goObj(go.Shape, "Circle",
{
// fill: "transparent", // changed to a color in the mouseEnter event handler
strokeWidth: 0, // no stroke
width: 0, // if not stretching horizontally, just 8 wide
height: 0, // if not stretching vertically, just 8 tall
alignment: align, // align the port on the main Shape
stretch: 0,
fill: null, // not seen, by default; set to a translucent gray by showSmallPorts, defined below
stroke: null,
desiredSize: new go.Size(7, 7),
alignment: spot, // align the port on the main Shape
alignmentFocus: spot, // just inside the Shape
portId: name, // declare this object to be a "port"
fromSpot: spot, // declare where links may connect at this port
fromLinkable: output, // declare whether the user may draw links from here
toSpot: spot, // declare where links may connect at this port
toLinkable: input, // declare whether the user may draw links to here
cursor: "pointer", // show a different cursor to indicate potential link point
mouseEnter: function(e, port) { // the PORT argument will be this Shape
if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
},
mouseLeave: function(e, port) {
port.fill = "transparent";
fromSpot: spot, toSpot: spot, // declare where links may connect at this port
fromLinkable: output, toLinkable: input, // declare whether the user may draw links to/from here
cursor: "pointer" // show a different cursor to indicate potential link point
});
}
//展示 连接点
showSmallPorts = (e,node) => {
node && node.ports.each(function(port) {
if (port.portId !== "") { // don't change the default port, which is the big shape
port.fill = "rgba(0,0,0,.3)";
}
});
}
hideSmallPorts = (e,node) => {
node && node.ports.each(function(port) {
if (port.portId !== "") { // don't change the default port, which is the big shape
port.fill = null;
}
});
}
// 选择节点
nodeSelectionChanged = (node) => {
console.log(node,'node');
this.reloadSelectNode(node.data.id);
this.setState({ selectNode: node.data || {}})
if(node.isSelected){
// console.log(node.data,'selected');
this.reloadSelectNode(node.data.id);
this.setState({ selectNode: node.data || {}, selectNodeType: node.type.name || ''});
}
}
reloadSelectNode = (id) => {
......@@ -106,12 +96,14 @@ class LeaderStruct extends Component {
// 提示框
showToolTip = (obj, diagram, tool) => {
let toolTipDIV = document.getElementById('toolTipDIV');
let pt = diagram.lastInput.viewPoint;
toolTipDIV.style.left = `${pt.x + 12}px`;
toolTipDIV.style.top = `${pt.y}px`;
toolTipDIV.style.display = 'block';
this.getNodeDetail(obj.data.id);
if(!obj.data.isPalette){
let toolTipDIV = document.getElementById('toolTipDIV');
let pt = diagram.lastInput.viewPoint;
toolTipDIV.style.left = `${pt.x + 12}px`;
toolTipDIV.style.top = `${pt.y}px`;
toolTipDIV.style.display = 'block';
this.getNodeDetail(obj.data.id);
}
}
hideToolTip = (diagram, tool) => {
......@@ -129,12 +121,11 @@ class LeaderStruct extends Component {
onOk = () => {
let { selectNode } = this.state;
if (selectNode.id) {
this.model.handleSubmit(selectNode.id);
if (selectNode) {
this.model.handleSubmit(selectNode);
} else {
AmosAlert.warning('提示','请选择节点后，再进行操作');
}
// this.setState({ model: false, toolBarFlag: '' })
};
cancel = () => {
......@@ -162,65 +153,51 @@ class LeaderStruct extends Component {
});
this.diagram = goObj(go.Diagram, this.refs.goJsDiv, {
allowZoom: false, // disallow zooming
// initialContentAlignment: go.Spot.TopLeft,
contentAlignment: go.Spot.Center,
initialPosition: new go.Point(0, 0),
'undoManager.isEnabled': true, //// enable undo & redo 是否可撤回
'animationManager.isEnabled': false, // 过渡动画
// 'textEditingTool.defaultTextEditor': this.customEditor,
ModelChanged: (e) => { // just for demonstration purposes,
ModelChanged: (e,value) => { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page's TextArea
console.log(e.model.toJson(), 'model');
this.updateTopologyData = JSON.parse(e.model.toJson());
// this.props.nodeChange(e);
}
},
SelectionMoved: (e) => {
// setTimeout(()=> {
// this.updateTopo();
// },0);
},
ViewportBoundsChanged: () => {
// setTimeout(()=> {
// this.updateTopo();
// },0);
}
});
this.diagram.nodeTemplateMap.add('leaderStruct',
goObj(go.Node, 'Vertical',
goObj(go.Node, 'Spot',
{
locationSpot: go.Spot.Center,
// locationObjectName: 'ICON',
// selectionObjectName: 'ICON',
dragComputation: this.stayInFixedArea,
selectionChanged: this.nodeSelectionChanged,
toolTip: myToolTip
},
new go.Binding('position', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
goObj(go.Panel,'Auto',
goObj(go.Shape, 'RoundedRectangle',
{ fill: 'white' }),
goObj(go.TextBlock,
{
editable: true,
margin: 10,
font: '15px sans-serif'
font: '15px sans-serif',
editable: true,
},
new go.Binding('text', 'text')
new go.Binding('text', 'text').makeTwoWay()
),
),
// this.makePort("T", go.Spot.Top, go.Spot.Top, false, true),
// this.makePort("L", go.Spot.Left, go.Spot.Left, true, true),
// this.makePort("R", go.Spot.Right, go.Spot.Right, true, true),
// this.makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false),
{
selectionAdornmentTemplate:
goObj(go.Adornment, 'Auto',
goObj(go.Shape, 'RoundedRectangle',
{ fill: null, stroke: '#108ee9', strokeWidth: 3, margin:3 }),
goObj(go.Placeholder)
) // end Adornment
goObj(go.Adornment, 'Auto',
goObj(go.Shape, 'RoundedRectangle',
{ fill: null, stroke: '#108ee9', strokeWidth: 3, margin:3 }),
goObj(go.Placeholder)
) // end Adornment
},
this.makePort("T", go.Spot.Top, false, true),
this.makePort("L", go.Spot.Left, true, true),
this.makePort("R", go.Spot.Right, true, true),
this.makePort("B", go.Spot.Bottom, true, false),
{
mouseEnter: this.showSmallPorts,
mouseLeave: this.hideSmallPorts,
},
)
);
......@@ -233,13 +210,12 @@ class LeaderStruct extends Component {
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
selectionChanged: this.nodeSelectionChanged,
},
goObj(go.Shape, { strokeWidth: 2 }),
goObj(go.Shape, { toArrow: "OpenTriangle" })
);
// nodeData = [{"id":"2-00014","key":"00014","category":"Picture","group":"03000","text":"上海NPC A","source":"single-way","treeid":"4","singlePort":"00014"},{"id":"2-00015","key":"00015","category":"Picture","group":"03000","text":"上海NPC B","source":"single-way","treeid":"4","singlePort":"00015"},{"id":"2-00016","key":"00016","category":"Picture","group":"03000","text":"上海NPC C","source":"single-way","treeid":"4","singlePort":"00016"},{"id":"2-00017","key":"00017","category":"Picture","group":"03000","text":"上海NPC D","source":"single-way","treeid":"4","singlePort":"00017"},{"id":"2-00020","key":"00020","category":"Picture","group":"03000","text":"XAPMTSAP1","source":"single-way","treeid":"4","singlePort":"00020"}]
// linkData = [{"id":"c02e649cecff53fe8a0e96a1e56a18f8","from":"00020","to":"00014","treeid":"4","warnState":0,"warnMessage":"","hasArrow":true,"fromPort":"00020","toPort":"00014"},{"id":"f8072d2df9545646b2460c813085014f","from":"00020","to":"00015","treeid":"4","warnState":0,"warnMessage":"","hasArrow":true,"fromPort":"00020","toPort":"00015"},{"id":"8767ffa2a97d50a7a59c9391cff9810e","from":"00015","to":"00016","treeid":"4","warnState":0,"warnMessage":"","hasArrow":true,"fromPort":"00020","toPort":"00016"},{"id":"3c3ec3b00372557e936c3c8eefe92da8","from":"00015","to":"00017","treeid":"4","warnState":0,"warnMessage":"","hasArrow":true,"fromPort":"00020","toPort":"00017"}]
this.diagram.model = goObj(go.GraphLinksModel,
{
linkFromPortIdProperty: 'fromPort', // required information:
......@@ -248,34 +224,68 @@ class LeaderStruct extends Component {
linkDataArray: linkData || []
});
this.myPalette =
goObj(go.Palette, this.refs.myPaletteDiv,
{
nodeTemplateMap: this.diagram.nodeTemplateMap, // share the templates used by myDiagram
model: new go.GraphLinksModel([ // specify the contents of the Palette
{ category: "leaderStruct", text: "节点", isPalette: true }
]
)
});
}
onButtonClick = (key)=>{
const { selectNode, selectNodeType } = this.state;
if (key === 'goback') {
browserHistory.goBack();
} else if (key === 'save'){
const { nodeDataArray,linkDataArray } = this.updateTopologyData;
const params = {
appId: this.props.location.state.appId,
nodeData: nodeDataArray,
linkData: linkDataArray
};
updateTopographyAction(params).then(data => {
message.success('拓扑图保存成功!');
});
this.saveTopography(null);
}else if(key === 'edit'){
const { selectNode } = this.state;
if(selectNode.id){
if(selectNode && selectNodeType === "Spot"){
this.setState({ modal: true });
}else{
message.danger('请选择节点!');
}
}else if(key === 'delete'){
if(selectNode && selectNodeType){
selectNode.id && deleteTopoAction(selectNode.id, selectNodeType).then(data =>{
message.success('删除成功!');
});
this.diagram.commandHandler.deleteSelection();
this.setState({ selectNode: {}, selectNodeType: '' });
}else{
message.danger('请选择节点!');
}
}else{
console.log('暂未开发');
}
this.setState({toolBarFlag: key});
}
saveTopography = (nodeDetail) => {
const { nodeDataArray,linkDataArray } = this.updateTopologyData;
const params = {
appId: this.props.location.state.appId,
nodeData: nodeDataArray,
linkData: linkDataArray,
nodeDetail: nodeDetail
};
updateTopographyAction(params).then(data => {
AmosAlert.success('提示', '拓扑图保存成功!');
this.cancel();
this.diagram.model = goObj(go.GraphLinksModel,
{
linkFromPortIdProperty: 'fromPort', // required information:
linkToPortIdProperty: 'toPort', // identifies data property names
nodeDataArray: data.nodeData || [],
linkDataArray: data.linkData || []
});
}).catch(e => {
AmosAlert.error('错误', '保存失败');
});;
}
getHeader = () => {
const { toolBarFlag } = this.state;
if (toolBarFlag === 'edit') {
......@@ -291,6 +301,7 @@ class LeaderStruct extends Component {
cancel={this.cancel}
selectNode={selectNode}
reloadSelectNode={this.reloadSelectNode}
saveTopography={this.saveTopography}
ref={component => this.model = component}
/>;
}
......@@ -318,19 +329,14 @@ class LeaderStruct extends Component {
</div>
<div className='leader-struct-content'>
<div className='leader-struct-left'>
{/* <img src='/src/view/planMgmt/view/leaderStruct/company.jpg' alt='' /> */}
<div ref="goJsDiv" style={{height:'100%'}}/>
<div ref="myPaletteDiv" className='leader-struct-palette' id = "myPaletteDiv"/>
<div ref="goJsDiv" className='leader-struct-diagram'/>
{this.renderDetail()}
</div>
<div className='leader-struct-right'>
<LeaderStructRightGrid nodeDetail = { rightGridData }/>
</div>
</div>
<Modal
header={this.getHeader(toolBarFlag)}
visible={modal}
......@@ -343,7 +349,6 @@ class LeaderStruct extends Component {
outterClosable={false}
footer={this.getFooter()}
/>
</div>
);
}
......
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