新增领导架构topo功能

src/consts/urlConsts.js

@@ -219,7 +219,11 @@ export const FasSerUrl = {
   uploadTextPlan: completePrefix(baseURI, 'file/plan/{appId}/texts'),
   getTreeNodeTypeUrl: completePrefix(baseURI, 'api/riskModel/riskSource/getChildTypeByPid?riskSourceId={riskSourceId}'),// 根据节点ID获取子节点可能的类型
   getAllUserUrl: completePrefix(baseURI, 'api/common/user/list'),//获取所有用户
-  queryFmeaControlObjUrl: completePrefix(baseURI, 'api/riskModel/fmea/{ids}/controlObjCount')//根据fmea id查询关联对象个数
+  queryFmeaControlObjUrl: completePrefix(baseURI, 'api/riskModel/fmea/{ids}/controlObjCount'),//根据fmea id查询关联对象个数
+  queryTopographyUrl: completePrefix(baseURI, 'api/Topography/{appId}'),//获取Topo图数据
+  updateTopographyUrl: completePrefix(baseURI, 'api/Topography/updateTopo'),//更新Topo图数据
+  queryNodeDetailUrl: completePrefix(baseURI, 'api/Topography/detail/{id}'),//获取node节点详情
+  saveNodeDetailUrl:completePrefix(baseURI, 'api/Topography/detail'),//保存nodeDetail详情
 };
 
 

src/services/preControlService.js

@@ -194,3 +194,30 @@ export const queryAllUserAction = () => {
   return commonGet(FasSerUrl.getAllUserUrl);
 };
 
+/**
+ * 获取节点
+ */
+export const queryTopographyAction = (appId) => {
+  return commonGet(formatUrl(FasSerUrl.queryTopographyUrl,{ appId }));
+};
+
+/**
+ * 更新节点
+ */
+export const updateTopographyAction = (params) => {
+  return commonPost(FasSerUrl.updateTopographyUrl, params);
+};
+
+/**
+ * 获取节点详情
+ */
+export const nodeDetailTopoAction = (id) => {
+  return commonGet(formatUrl(FasSerUrl.queryNodeDetailUrl,{ id }));
+};
+
+/**
+ * 保存节点详情
+ */
+export const nodeDetailTopoSaveAction = (nodeDatil) => {
+  return commonPost(FasSerUrl.saveNodeDetailUrl, nodeDatil );
+};
\ No newline at end of file

src/styles/view/planMgmt/leaderStruct.scss

@@ -43,12 +43,198 @@
       border-right-color: rgba(201, 201, 201, 1);
       border-right-style: solid;
       border-width: 1px;
+
+      .tooltip-content {
+        width: 251px;
+        background: #345fa6;
+        box-shadow: inset 0px 3px 6px rgba(0,0,0,0.16);
+        opacity: 1;
+        border-radius: 7px;
+        padding: 22px 24px;
+
+        .tooltip-item {
+          height: 24px;
+          line-height: 24px;
+          font-size: 13px;
+          font-weight: bold;
+          color: white;
+
+          .item-name {
+            display: inline-block;
+          }
+
+          .item-value {
+            display: inline-block;
+            padding-left: 10px;
+          }
+
+          .amosicon {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
     }
 
     .leader-struct-right {
       width: 300px;
-      padding-top: 20px;
-      padding-left: 20px;
+      // padding-top: 20px;
+      // padding-left: 20px;
+
+      .ant-table-title{
+        display: none;
+      }
+    }
+
+  }
+  
+}
+.leader-struct-model {
+  .amos-modal-content {
+    max-height: 55rem;
+    overflow: hidden;
+
+    .control-model-line1 {
+      display: flex;
+      justify-content: space-around;
+
+      .leader-struct_input {
+        width: 13rem;
+      }
     }
   }
+
+  .amos-modal-header {
+    background: $biz-title-color;
+  }
+
+  .amos-modal-footer {
+    background: $biz-title-color;
+  }
+
+  .ant-table-title {
+    display: none;
+  }
+
+  .ant-table-content {
+    .editable-cell {
+      position: relative;
+    }
+
+    .editable-cell-input-wrapper,
+    .editable-cell-text-wrapper {
+      padding-right: 24px;
+    }
+
+    .editable-cell-text-wrapper {
+      padding: 5px 24px 5px 5px;
+    }
+
+    .editable-cell-icon,
+    .editable-cell-icon-check {
+      position: absolute;
+      right: 0;
+      width: 20px;
+      cursor: pointer;
+    }
+
+    .editable-cell-icon {
+      display: none;
+      line-height: 18px;
+    }
+
+    .editable-cell-icon-check {
+      line-height: 28px;
+    }
+
+    .editable-cell:hover .editable-cell-icon {
+      display: inline-block;
+    }
+
+    .editable-cell-icon:hover,
+    .editable-cell-icon-check:hover {
+      color: #108ee9;
+    }
+
+    .amos-input {
+      width: 90% !important;
+    }
+
+    .control-model-measure-content {
+      .amos-input {
+        width: 90% !important;
+
+        + button {
+          width: 10% !important;
+        }
+      }
+    }
+
+    .ant-table-body {
+      max-height: 200px !important;
+      margin-right: -17px;
+      overflow-y: scroll;
+
+      .operation-items {
+        padding: 0;
+        background: white;
+        border: 0;
+      }
+    }
+
+    .ant-table-header {
+      margin-right: -17px;
+
+      table:first-child {
+        border: 0;
+
+        tr {
+          th {
+            border-top: 1px solid #e9e9e9;
+          }
+
+          th:first-child {
+            border-top: 1px solid #e9e9e9;
+            border-left: 1px solid #e9e9e9;
+          }
+
+          .operation-items {
+            padding: 0;
+            background: white;
+            border: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .control-model-measures-detail {
+    .basic-info {
+      padding-bottom: 10px;
+      line-height: 45px;
+      border-bottom: 1px solid #f2f2f2;
+    }
+
+    .patrol-page-table {
+      padding-top: 10px;
+
+      .ant-table-title {
+        display: none;
+      }
+    }
+  }
+
+  .risk-factor-select {
+    width: 15rem;
+  }
+
+  .risk-lever-input {
+    width: 15rem;
+  }
+
+  .task-work-model {
+    display: flex;
+    justify-content: space-around;
+  }
 }

src/view/bizview/common/editableCell/EditableCell.js

@@ -7,9 +7,20 @@ class EditableCell extends Component {
     editable: false
   };
 
+  componentWillMount = () => {
+    const { editable } = this.props || {};
+    if(editable){
+      this.setState({editable});
+    }
+  };
+
+
   handleChange = e => {
     const value = e.target.value;
     this.setState({ value });
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
   };
 
   check = () => {

src/view/planMgmt/common/conf.js

@@ -14,7 +14,8 @@ export const pageUrl = {
 };
 
 export const leaderStructButton = [
-  { key: 'add', text: '添加', icon: 'tianjia' },
+  // { key: 'add', text: '添加', icon: 'tianjia' },
   { key: 'edit', text: '编辑', icon: 'xiugai' },
-  { key: 'delete', text: '删除', icon: 'shanchu' }
+  { key: 'save', text: '保存', icon: 'baocun' },
+  // { key: 'delete', text: '删除', icon: 'shanchu' }
 ];

src/view/planMgmt/cusVizLib/index.js

@@ -49,7 +49,11 @@ class CusVizLib extends Component {
       this.setState({ appId: data.id, visible: true });
     }
     if (itemKey === 'leaderStruct') {
-      browserHistory.push(pageUrl.leaderStruct);
+      let path = {
+        pathname: pageUrl.leaderStruct,
+        state: { appId: data.id }
+      }
+      browserHistory.push(path);
     }
   }
 
@@ -96,7 +100,7 @@ class CusVizLib extends Component {
   render() {
     const { visible } = this.state;
     return (
-      <div>
+      <div style={{height:'100%'}}>  
         <VizlibView {...this.props}  extraEventHandle={this.onItemClick} extraMenus={extraMenus} />
         <Modal
           header="预案上传"

src/view/planMgmt/view/leaderStruct/LeaderStructModel.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form, AmosAlert, Input, Button } from 'amos-framework';
+import EditableCell from './../../../bizview/common/editableCell/EditableCell';
+import AmosGridTable from './../../../bizview/common/tableComponent/table/AmosGridTable';
+import BizIcon from './../../../common/icon/BizIcon';
+import { nodeDetailTopoAction, nodeDetailTopoSaveAction } from './../../../../services/preControlService';
+
+const FormItem = Form.Item;
+const getColumns = (self) => {
+  let oper = <Button icon={<BizIcon icon="tianjia" />} transparent onClick={() => {self.onAdd();}} />;
+  return [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+      width: '47%',
+      render: (text, record) => <EditableCell value={text} editable={ true } onChange={(text) => self.onCellChange(record, text, 'name')} />,
+      className: 'uant-table-thead'
+    },
+    {
+      title: '属性值',
+      dataIndex: 'value',
+      key: 'value',
+      width: '50%',
+      render: (text, record) => <EditableCell value={text} editable={ true } onChange={(text) => self.onCellChange(record, text, 'value')} />,
+      className: 'uant-table-thead'
+    },
+    {
+      title: oper,
+      width: '3%',
+      render: (text, record) => {
+        return (
+          <Button
+            icon={<BizIcon icon="shanchu" />}
+            transparent
+            onClick={() => self.onDelete(record.key)}
+          />
+        );
+      },
+      className: 'uant-table-thead operation-items'
+    }
+  ];
+};
+
+/**
+ * 领导架构编辑
+ */
+class LeaderStructModel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchParam: [],
+      maintenances: [],
+      last: false,
+      form: {
+        name: '',
+        evaluateModelId: -1,
+        nodeDetail: []
+      },
+      rules: {
+        key: [{ required: true, message: '属性名不能为空' },{ max: 50, message: '长度不能大于50个字符',}]
+      }
+    };
+  }
+
+  componentWillMount = () => {
+    const { selectNode } = this.props || {};
+    debugger;
+    this.getNodeDetail(selectNode);
+  };
+
+  getNodeDetail = (selectNode) => {
+    let form = {};
+    nodeDetailTopoAction(selectNode.id).then(data => {
+      if(data){
+        form.nodeDetail = JSON.parse(data.nodeDetail) || [];
+        this.setState({
+          form
+        });
+      }
+    });
+  }
+
+  onCellChange = (record, text, type) => {
+    const { form } = this.state;
+    const target = form.nodeDetail.find(item => item.key === record.key);
+    if (target) {
+      target[type] = text;
+      this.setState({ form });
+    } else {
+      let obj = {};
+      obj[type] = text;
+      form.nodeDetail.push(obj);
+      this.setState({ form });
+    }
+    console.log(type);
+  };
+
+  onDelete = (index) => {
+    let { form } = this.state;
+    form.nodeDetail = form.nodeDetail.filter(item => item.key !== index);
+    form.nodeDetail.map(item => {
+      if (item.key > index) {
+        item.key -= 1;
+      }
+    });
+    this.setState({ form });
+  }
+
+  onAdd = () => {
+    let { form } = this.state;
+    let key = form.nodeDetail.length + 1;
+    let newObj = { key, name: '', value: ''};
+    form.nodeDetail.push(newObj);
+    this.setState({ form });
+  }
+
+  handleSubmit = nodeid => {
+    debugger;
+    this.form.validate((valid, dataValues) => {
+      debugger;
+      if (valid) {
+        let { form } = this.state;
+        form.nodeid = nodeid;
+        this.nodeDetailEdit(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);
+      }
+    );
+  };
+
+  /**
+   * 获取表格刷新方法
+   */
+  reload = r => {
+    this.setState(
+      {
+        reload: () => {
+          r();
+          this.setState({ selectedRows: [], selectedRowKeys: [] });
+        }
+      },
+      r()
+    );
+  };
+
+  render() {
+    const { form, rules } = this.state;
+    const { selectNode } = this.props;
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 },
+        className: 'colspanlab'
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 14 },
+        className: 'colspan'
+      }
+    };
+
+    return (
+      <div>
+        <Form model={form} rules={rules} ref={component => this.form = component}>
+          <FormItem label={<span>当前节点</span>} {...formItemLayout}>
+            <Input className="leader-struct_input"  value={selectNode.text} disabled={ true }/>
+          </FormItem>
+          <FormItem label={<span>属性</span>} field="nodeDetail" className='editable-table' >
+            <AmosGridTable
+              rowKey="key"
+              columns={getColumns(this)}
+              callBack={this.reload}
+              dataList={form.nodeDetail || []}
+              getTableDataAction={() => {}}
+              isChecked={false}
+              isPageable={false}
+            />
+          </FormItem>
+        </Form>
+      </div> 
+    );
+  }
+}
+
+LeaderStructModel.propTypes = {
+  reloadPage: PropTypes.func
+};
+export default LeaderStructModel;

src/view/planMgmt/view/leaderStruct/LeaderStructRightGrid.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Form } from 'amos-framework';
+import AmosGridTable from './../../../bizview/common/tableComponent/table/AmosGridTable';
+
+const FormItem = Form.Item;
+const getColumns = (self) => {
+  // let oper = <Button icon={<BizIcon icon="tianjia" />} transparent onClick={() => {self.onAdd();}} />;
+  return [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+      width: '47%',
+      // render: (text, record) => <EditableCell value={text} onChange={(text) => self.onCellChange(record, text, 'name')} />,
+      // className: 'uant-table-thead'
+    },
+    {
+      title: '属性值',
+      dataIndex: 'value',
+      key: 'value',
+      width: '50%',
+      // render: (text, record) => <EditableCell value={text} onChange={(text) => self.onCellChange(record, text, 'value')} />,
+      // className: 'uant-table-thead'
+    }
+  ];
+};
+
+/**
+ * 属性表格
+ */
+class LeaderStructRightGrid extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      // searchParam: [],
+      // maintenances: [],
+      // last: false,
+      // form: {
+      //   name: '',
+      //   evaluateModelId: -1,
+      //   nodeDetail: []
+      // },
+      // rules: {
+      //   key: [{ required: true, message: '属性名不能为空' },{ max: 50, message: '长度不能大于50个字符',}]
+      // }
+    };
+  }
+
+  componentWillMount = () => {
+    const { selectNode } = this.props || {};
+    // this.getNodeDetail(selectNode);
+  };
+  
+
+ 
+
+  /**
+   * 获取表格刷新方法
+   */
+  reload = r => {
+    this.setState(
+      {
+        reload: () => {
+          r();
+          this.setState({ selectedRows: [], selectedRowKeys: [] });
+        }
+      },
+      r()
+    );
+  };
+
+  render() {
+    const { nodeDetail } = this.props;
+
+    return (
+      <div>
+        <AmosGridTable
+          rowKey="key"
+          columns={getColumns(this)}
+          callBack={this.reload}
+          dataList={nodeDetail || []}
+          getTableDataAction={() => {}}
+          isChecked={false}
+          isPageable={false}
+        />
+      </div>
+    );
+  }
+}
+
+LeaderStructRightGrid.propTypes = {
+  reloadPage: PropTypes.func
+};
+export default LeaderStructRightGrid;

src/view/planMgmt/view/leaderStruct/index.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { browserHistory } from 'amos-react-router';
-import { Button } from 'amos-framework';
+import { Modal, Button, message } 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 LeaderStructModel from './LeaderStructModel';
+import LeaderStructRightGrid from './LeaderStructRightGrid';
+
+const goObj = go.GraphObject.make;
 
 /**
  * 领导架构
@@ -15,19 +21,292 @@ class LeaderStruct extends Component {
   constructor(props){
     super(props);
     this.state = {
-
+      nodeData: [],
+      nodeAttrs: undefined,
+      linkData: [],
+      modal: false,
+      toolBarFlag: '',
+      selectNode: {},
+      rightGridData: []
     };
+    this.diagram = null; //gojs图
+    this.updateTopologyData = {};
+  }
+
+  // componentWillMount(){
+  //   let { appId } = this.props.location.state;
+  //   debugger;
+
+  // }
+
+  componentDidMount() {
+    let { appId } = this.props.location.state;
+    debugger;
+    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,
+				 {
+			// 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,
+			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";
+			}
+		});
+	}
+
+  // 选择节点
+  nodeSelectionChanged = (node) => {
+    console.log(node,'node');
+    this.reloadSelectNode(node.data.id);
+    this.setState({ selectNode: node.data || {}})
+  }
+
+  reloadSelectNode = (id) => {
+    nodeDetailTopoAction(id).then(data => {
+      this.setState({ rightGridData: data ? JSON.parse(data.nodeDetail) : []});
+    });
+  }
+
+  // 提示框 
+  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);
+  }
+
+  hideToolTip = (diagram, tool) => {
+    let toolTipDIV = document.getElementById('toolTipDIV');
+    toolTipDIV.style.display = 'none';
+  }
+
+  getNodeDetail = (id) => {
+    nodeDetailTopoAction(id).then(data => {
+      this.setState({
+        nodeAttrs: data
+      });
+    });
+  }
+
+  onOk = () => {
+    let { selectNode } = this.state;
+    if (selectNode.id) {
+      this.model.handleSubmit(selectNode.id);
+    } else {
+      AmosAlert.warning('提示','请选择节点后，再进行操作');
+    }
+    // this.setState({ model: false, toolBarFlag: '' })
+  };
+
+  cancel = () => {
+    this.setState({ modal: false, toolBarFlag: '' });
+  };
+
+  renderDetail = () => {
+    let { nodeAttrs } = this.state;
+    let detailData = nodeAttrs != undefined && nodeAttrs.nodeDetail ? JSON.parse(nodeAttrs.nodeDetail) : [{name:'无',value:'无'}];
+    return (<div id="toolTipDIV" className="tooltip-content" style={{ position: 'absolute', zIndex: 1000 ,display: 'none'}}>
+      {detailData && detailData.map(item => {
+        return (<div key={item.name} className="tooltip-item">
+          <div className="item-name">{item.name}: </div>
+          <div className="item-value">{item.value}</div>
+        </div>); 
+      })}
+    </div>);
+  }
+
+  renderCanvas = () => {
+    let { nodeData, linkData } = this.state;
+    const myToolTip = goObj(go.HTMLInfo, {
+      show: this.showToolTip,
+      hide: this.hideToolTip
+    });
+
+    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,
+        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',
+        {
+          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),
+        goObj(go.Panel,'Auto',
+          goObj(go.Shape, 'RoundedRectangle',
+          { fill: 'white' }),
+          goObj(go.TextBlock,
+            {
+              editable: true,
+              margin: 10,
+              font: '15px sans-serif'
+            },
+            new go.Binding('text', 'text')
+          ),
+        ),
+        // 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
+        },
+      )
+    );
+     
+
+    this.diagram.linkTemplate =
+      goObj(go.Link,
+        { routing: go.Link.Orthogonal,
+          corner: 10 ,
+          relinkableFrom: true,
+          relinkableTo: true,
+          reshapable: true,
+        },
+      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:
+        linkToPortIdProperty: 'toPort',      // identifies data property names
+        nodeDataArray: nodeData || [],
+        linkDataArray: linkData || []
+      });
+
   }
 
   onButtonClick = (key)=>{
     if (key === 'goback') {
       browserHistory.goBack();
-    } else {
+    } 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('拓扑图保存成功!');
+      });
+    }else if(key === 'edit'){
+      const { selectNode } = this.state;
+      if(selectNode.id){
+        this.setState({ modal: true });
+      }else{
+        message.danger('请选择节点!');
+      }
+    }else{
       console.log('暂未开发');
     }
+    this.setState({toolBarFlag: key});
+  }
+
+  getHeader = () => {
+    const { toolBarFlag } = this.state;
+    if (toolBarFlag === 'edit') {
+      return '编辑节点属性';
+    }
+  }
+
+  getContext = () => {
+    let {  toolBarFlag, selectNode } = this.state;
+    if (toolBarFlag) {
+      if (toolBarFlag === 'edit') { //编辑
+        return <LeaderStructModel 
+                  cancel={this.cancel} 
+                  selectNode={selectNode}  
+                  reloadSelectNode={this.reloadSelectNode}
+                  ref={component => this.model = component} 
+                />;
+      }
+    }
+  };
+
+  getFooter = () => {
+    const { toolBarFlag } = this.state;
+    if (toolBarFlag === 'edit') {
+      return (<div><Button type="minor" onClick={() => this.cancel()}>取消</Button><Button  onClick={() => this.onOk()}>确定</Button></div> );
+    }
   }
 
   render() {
+    const { nodeData = [],toolBarFlag ,modal, rightGridData } = this.state;
+    
     return (
       <div className='leader-struct-root' >
         <div className='leader-struct-header'>
@@ -39,26 +318,32 @@ 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='' />
+
+            {/* <img src='/src/view/planMgmt/view/leaderStruct/company.jpg' alt='' /> */}
+
+            <div ref="goJsDiv" style={{height:'100%'}}/>
+            {this.renderDetail()}
+            
+
           </div>
           <div className='leader-struct-right'>
-            组织指挥
-            <br />
-          指挥机构：换流站消防中队
-            <br />
-          指战员：辛猛
-            <br />
-          电话：12312352523
-            <br />
-          副指挥员：李宁
-            <br />
-          电话12312352523
-            <br />
-          副指挥员：刘伟
-            <br />
-          电话：12345689564
+            <LeaderStructRightGrid nodeDetail = { rightGridData }/>
           </div>
         </div>
+
+        <Modal
+          header={this.getHeader(toolBarFlag)}
+          visible={modal}
+          destroyContent
+          width='45%'
+          className="leader-struct-model"
+          content={this.getContext(toolBarFlag)}
+          onCancel={() => this.cancel()}
+          onOk={() => this.onOk()}
+          outterClosable={false}
+          footer={this.getFooter()}
+        />
+
       </div>
     );
   }