效果图
文件夹结果
index.tsx
import React, { useState, useEffect, useRef,useCallback } from 'react';
import { useParams } from 'react-router-dom';
import { createContext } from 'react';
import './style/index.css';
import './style/index.less';
import ModoTable from '@/components/Table';
import {
Layout,
Button,Tag,
Tooltip,
Notification,
Pagination,
Space,
Spin,
Popconfirm,
Form,
Input,
Slider,
Switch,
Tree,
Typography,
Tabs,
Select,
Dropdown,
Menu,
Grid,
Radio,
Trigger,
Empty,
Message,
Drawer,
Table,
TableColumnProps,
Modal,
InputNumber,
} from '@arco-design/web-react';
import {udtList,forList, brokerList,respoolTarget,respoolList,getDiagramList,diagramAdd} from "../../api";
import group from './images/group.png';
import edit from './images/edit.png';
import line from './images/line.png';
import add from './images/add.png';
import del from './images/del.png';
import reset from './images/reset.png';
import { icons } from './utils/icons';
import { IconExclamationCircle,IconRedo, IconMinus, IconDown, IconUndo, IconDelete, IconStar, IconPlus , IconApps, IconList, IconEdit, IconSearch,IconExport,IconEyeInvisible ,IconSync,IconPrinter ,IconLocation } from '@arco-design/web-react/icon';
import _ from 'lodash'
import mockData from './mock/data.ts'
import { IconFullscreen,IconFullscreenExit,IconLessen,IconAdd,IconBrush, IconFileEditLine, IconTitle ,IconEnlarge,IconReduce,IconNodeTree,IconMindMap} from 'modo-design/icon';
require('static/guid');
const { Title, Paragraph, Text } = Typography;
const ConfigContext = createContext({});
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;
const Row = Grid.Row;
const Col = Grid.Col;
const global = require('global');
if (!global.go){
let go= require(`../../../../../public/static/gojs/go.js`);
var GO = go.GraphObject.make;
}else{
let go=global.go;
var GO = go.GraphObject.make;
}
let poolOptions_=[];
let defaultBrokerOptions=[];
let poolOptionsAddArr=[];
let diagramDom=null;
var lastStroked = null;
let rootKey='root';
function ReceiveDiagram(){
let record=useParams();
const [modal, contextHolder] = Modal.useModal();
const diagramId = record?record.id : guid();
let resPool=record?record.resPool : 'hac';
let resPoolName=record?record.resPoolName:'资源池中心名称'
console.log('VocationalWorkPool-props',record)
var diagramRef = React.createRef();
const formRef = useRef();
const [form] = Form.useForm();
const [formPhysics] = Form.useForm();
const [loading, setLoading] =useState(false);
const [tabLoading, setTabLoading] =useState(false);
const [tabData, setTabData] =useState([]);
const [canUndo, setCanUndo] =useState(false);
const [canRedo, setCanRedo] =useState(false);
const [scale, setScale] =useState(0.7);
const [visible, setVisible] = useState(false);
const [node, setNode] = useState(null);
const [angle, setAngle] =useState(90);
// const [content, setContent] = useState(null);
// const [nodeSpacing, setNodeSpacing] = useState(20);
const [selectType, setSelectType] = useState('allocation');
const [levelNames, setLevelNames] = useState('源池');
// const [isphysics, setIsphysics] = useState(true);
// const [rootSelectType, setRootSelectType] = useState('allocation');
const [modalConfirmData, setModalConfirmData] = useState({});
const [rootShow, setRootShow] = useState('');
const [formDataPhysics, setFormDataPhysics] = useState({});
const [isShowTip, setIsShowTip] = useState(false);
const [drawerLoading, setDrawerLoading] = useState(false);
const [showbroker, setShowbroker] = useState(false);
const [childFromData, setChildFromData] = useState([]);
const [overViewShow, setOverViewShow] = useState(false);
const columns = [
{
title: '名称',
dataIndex: 'fileName',
width: 250,
ellipsis: true,
render: (col, record) => {
let fileType=record.fileName.split('.').pop();
return <>
<img src={fileTypeMap[fileType]?.img || txtImg} className='tab-file-img' />
<Tooltip content={record.fileName || '--'}>
{record.fileName || '--'}
</Tooltip>
</>
}
},
{
title: '状态',
dataIndex: 'state',
ellipsis: true,
width: 100,
render: (col, record) => (
<div className="list-item-value">
<Tag
effect="text"
color={stateMap[record.state]?.color ? stateMap[record.state]?.color : 'gray'}
>
{stateMap[record.state]?.label ? (
<>
{stateMap[record.state]?.label}{' '}
</>
) : (
'暂无数据'
)}
</Tag>
</div>
),
},
{
title: '接收的字节数',
dataIndex: 'fileSize',
ellipsis: true,
render: (col, record) => (
<Tooltip content={bytesToSize(record.fileSize || 0)}>{bytesToSize(record.fileSize || 0)}</Tooltip>
),
},
{
title: '收到的记录',
dataIndex: 'fileSize',
ellipsis: true,
render: (col, record) => (
<Tooltip content={bytesToSize(record.fileSize || 0)}>{bytesToSize(record.fileSize || 0)}</Tooltip>
),
},
{
title: '发送字节数',
dataIndex: 'fileSize',
ellipsis: true,
render: (col, record) => (
<Tooltip content={bytesToSize(record.fileSize || 0)}>{bytesToSize(record.fileSize || 0)}</Tooltip>
),
},
{
title: '已发送记录',
dataIndex: 'fileSize',
ellipsis: true,
render: (col, record) => (
<Tooltip content={bytesToSize(record.fileSize || 0)}>{bytesToSize(record.fileSize || 0)}</Tooltip>
),
},
];
const [diagramData, setDiagramData] = useState([
{
"key":'root',
root:true,
"name":resPoolName,
isolationType:'1',//子节点分配的方式
isShared:false,
childIsPhysical:true,//子节点的隔离类型式
localIsPhysical:true,//这个本节点的隔离类型-默认为true
chlidIsolationType:'1',//子节点分配的方式
// localIsPhysical:true,
// childIsPhysical:true,
source:group
},
])
const [businessTypeOptions, setBusinessTypeOptions] = useState([
{
memberCode:'222',
memberName:'222',
}
]);
const [poolOptions, setPoolOptions] = useState([]);
// const [filterPool, setFilterPool] = useState([]);
const [udtList, setUdtList] = useState([]);
const [allocationRatio, setAllocationRatio] = useState('allocation');
const [formData, setFormData] = useState(
{
businessType:'',
broker:'',
scale:'',
}
);
const getUdtList= ()=>{
udtList().then(response => {
const { data }=response;
if(data.code=='200'){
setUdtList(data.data);
}else{
}
}).catch((err) => {
})
}
const getBrokerList= ()=>{
var res={
data:{
"resPoolCode" :"hac",
"resPoolName" :"哈池",
"brokers":[
{
"brokerId": "111",
"brokerIp": "111",
"workGroups": "default",
},
{
"brokerId": "222",
"brokerIp": "222",
"workGroups": "default",
},
{
"brokerId": "333",
"brokerIp": "333",
"workGroups": "default",
},
{
"brokerId": "444",
"brokerIp": "444",
"workGroups": "default",
},
{
"brokerId": "555",
"brokerIp": "555",
"workGroups": "default",
},
{
"brokerId": "666",
"brokerIp": "666",
"workGroups": "default",
},
{
"brokerId": "777",
"brokerIp": "777",
"workGroups": "default",
},
{
"brokerId": "888",
"brokerIp": "888",
"workGroups": "default",
},
{
"brokerId": "999",
"brokerIp": "999",
"workGroups": "default",
},
{
"brokerId": "100",
"brokerIp": "100",
"workGroups": "default",
},
],
"createUser":"",
"createDate":"",
"updateUser":"",
"updateDate":""
}
};
// setPoolOptions(res.data.brokers);
// poolOptions_=res.data.brokers;
// defaultBrokerOptions=res.data.brokers;
// // return
brokerList({resPool}).then(response => {
const { data }=response;
if(data.code=='200'){
setPoolOptions(data.data.brokers || []);//data.data.brokers
poolOptions_=data.data.brokers|| [];
defaultBrokerOptions=data.data.brokers || [];
poolOptionsAddArr=data.data.brokers|| [];
}else{
setPoolOptions([]);
poolOptions_=[];
defaultBrokerOptions=[];
poolOptionsAddArr=[];
}
}).catch((err) => {
// setPoolOptions([]);
// poolOptions_=[];
// defaultBrokerOptions=[];
})
}
const getRespoolTarget=()=>{
var param={
resPool:'',
};
setDrawerLoading(true);
respoolTarget(param)
.then(response => {
setDrawerLoading(false);
const { data }=response;
let arr=[];
if(data.code == '200' && data.data.length > 0 ){
data.data.forEach(item=>{
arr.push({
memberCode:item.resPoolCode,
memberName:item.resPoolName,
})
})
setBusinessTypeOptions(arr);
}else{
setBusinessTypeOptions([]);
}
}).catch((err) => {
console.log(err);
setDrawerLoading(false);
})
}
const getforList=()=>{
setDrawerLoading(true);
forList().then(response => {
setDrawerLoading(false);
console.log('租户接口',response)
const { data }=response;
let arr=[];
if(data.length > 0 ){
data.forEach(item=>{
arr.push({
memberCode:item.name,
memberName:item.label,
})
})
setBusinessTypeOptions(arr);
}else{
setBusinessTypeOptions([]);
}
}).catch((err) => {
console.log(err)
// setBusinessTypeOptions([]);
setDrawerLoading(false);
})
}
const getIsolationDim=(type)=>{
var res={
data:{
"requestId": "6c102166f2aa450588149e6846819c4c",
"code": "200",
"data": [
{
"id": "isolation_dim_biz",
"dimCode": "udt_res_isolation_dim",
"dimName": "udt资源隔离维度",
"memberCode": "biz",
"memberName": "业务",
"descr": ""
},
{
"id": "isolation_dim_tenant",
"dimCode": "udt_res_isolation_dim",
"dimName": "udt资源隔离维度",
"memberCode": "tenant",
"memberName": "租户",
"descr": ""
},
{
"id": "isolation_dim_target_res",
"dimCode": "udt_res_isolation_dim",
"dimName": "udt资源隔离维度",
"memberCode": "target_re",
"memberName": "目标资源池",
"descr": ""
},
{
"id": "isolation_dim_batch_type",
"dimCode": "udt_res_isolation_dim",
"dimName": "udt资源隔离维度",
"memberCode": "batch_type",
"memberName": "任务周期",
"descr": ""
}
],
"success": true,
"message": null,
"devMsg": null,
"hasPrivilege": true
}
};
//type:'center' 目标池 udt_res_isolation_biz：业务，udt_res_isolation_tenant：租户，udt_res_isolation_batch_type：任务周期
var param={
type:type?type:'',
};
setDrawerLoading(true);
respoolList(param)
.then(response => {
const { data }=response;
setDrawerLoading(false);
if(data.success){
setBusinessTypeOptions(data.data);
}else{
setBusinessTypeOptions([]);
}
}).catch((err) => {
console.log(err)
setDrawerLoading(false);
})
}
const formItemLayout = {
labelCol: {
span: 6,
},
wrapperCol: {
span: 17,
},
};
//根节点新增
let rootSelectType_='';
const brokerValidateFun=(fromData,diagram,fromNode)=>{
//broker验证
let parentData=fromData;//在这里就是当前的fromData
let parent=fromNode.findTreeParentNode();
let nodeDataArray=diagram.model.nodeDataArray;
//当前的物理隔离是broker 的情况下
let brotherData = nodeDataArray.filter((item) => {
return item.parent ==fromData.key;
});//找到当前下级节点的同级数组
if(fromData.chlidIsolationType=='2'){//根节点选择 broker 的逻辑
let brotherBrokerIds=[];//找到同级的数组的brokerText组成一个数组
brotherData.forEach(itm=>{
if(itm.brokerText && itm.brokerText.length>0){
itm.brokerText.forEach(itm=>{
brotherBrokerIds.push(itm);
})
}
});
let isParent=parent && parentData.brokerText && parentData.brokerText.length > 0 ;
let poolOptionsAddArr_=JSON.parse(JSON.stringify(poolOptionsAddArr));
let pool_newArr=poolOptionsAddArr_.map(itm=>{
if((brotherBrokerIds.indexOf(itm.brokerId)>-1 )|| (isParent && parentData.brokerText.indexOf(itm.brokerId) == -1)){//找得到禁用
itm.disabled='true';
return itm
}else{
itm.disabled='false';
return itm
};
});
poolOptionsAddArr=pool_newArr;
}
//broker验证结束
}
// const addNodeFun=(fromNode,fromData,diagram,brokerData,allocationData,averageData)=>{
// const level=fromNode.findTreeLevel();
// if(fromData.chlidIsolationType=='1'){
// setAllocationRatio('allocation')
// }else if(fromData.chlidIsolationType=='3'){
// setAllocationRatio('average');
// }else{
// setAllocationRatio('broker');
// };
// setModalConfirmData({
// fromData,diagram,averageData,allocationData,brokerData,
// });
// let restFromFun=()=>{
// formRef.current?formRef.current.resetFields():'';
// if(formRef.current){
// formRef.current.setFieldsValue({
// businessType:'',
// broker:'',
// scale:0,
// isShared:'false',
// });
// }
// if(formPhysics){
// let obj={
// isphysics:true,
// rootSelectType:'allocation',
// }
// setFormDataPhysics(obj);//子节点分配
// formPhysics.setFieldsValue(obj);
// }
// }
// let disabledFromFun=()=>{
// setModalConfirmData({
// fromData,diagram,averageData,allocationData,brokerData,disabled:true
// });
// formRef.current?formRef.current.resetFields():'';
// if(formRef.current){
// formRef.current.setFieldsValue({
// businessType:'',
// broker:'',
// scale:0,
// isShared:'false',
// });
// }
// if(formPhysics){
// formPhysics.resetFields();
// formPhysics.setFieldsValue({
// isphysics:false,
// rootSelectType:'allocation',
// });
// }
// }
// let levelName='源池';
// if(level==0){
// levelName='源池';
// restFromFun();
// getRespoolTarget();//请求目标池的数据
// }else if(level==1){
// levelName='业务类型';
// getIsolationDim('udt_res_isolation_biz');
// restFromFun();
// }else if(level==2){
// levelName='租户';
// disabledFromFun();
// getforList();
// }else if(level==3){
// levelName='任务周期';
// disabledFromFun();
// getIsolationDim('udt_res_isolation_batch_type');
// }
// setLevelNames(levelName);
// if(fromData.chlidIsolationType !='2'){//只有根节点是选择了broker的情况下，下面新增节点才能选择broker，否则禁用
// setShowbroker(true);
// }else{
// setShowbroker(false);
// }
// brokerValidateFun(fromData,diagram,fromNode);
// }
// const addRoot=(e,obj,node)=>{
// setRootShow('rootAdd');
// var fromNode = obj.part;
// setNode(fromNode);
// var diagram = fromNode.diagram;
// console.log('rootKey',rootKey)
// if(!rootKey){
// Message.warning('根节点没有Id,检查数据新增!');
// }
// diagram.startTransaction("Add State");
// var fromData = fromNode.data;
// var model = diagram.model;
// var brokerData= {
// "key":guid(), //动态生成key
// secondaryNot:true,//动态控制是否是二级
// businessName:'源池',//二级业务名称
// businessVal:'',//二级业务名称的值
// allocationRatio:false,//控制是否有分配比例--
// allocationRatioText:'',//分配比例的值
// broker:true,//控制是否有分配broker
// brokerText:[ ],
// isolationType:'2',
// isShared:false,
// total:false,//控制总占比
// totalVal:'',
// average:false,
// chlidIsolationType:"2",
// childIsPhysical:'',//子级的物理隔离
// localIsPhysical:fromData.childIsPhysical,//这个本级的物理隔离-默认为true
// "parent":rootKey};
// var allocationData={
// "key":guid(), //动态生成key
// secondaryNot:true,//动态控制是否是二级
// businessName:'源池',//二级业务名称
// businessVal:'',//二级业务名称的值
// allocationRatio:true,//控制是否有分配比例--
// allocationRatioText:'',//分配比例的值
// broker:false,//控制是否有分配broker
// brokerText:[ ],
// total:false,//控制总占比
// totalVal:'',
// isolationType:'1',
// isShared:false,
// average:false,
// chlidIsolationType:"1",
// childIsPhysical:'',//子级的物理隔离
// localIsPhysical:fromData.childIsPhysical,//这个本级的物理隔离-默认为true
// "parent":rootKey
// };
// var averageData={//只有选择业务类型
// "key":guid(), //动态生成key
// secondaryNot:true,//动态控制是否是二级
// businessName:'源池',//二级业务名称
// businessVal:'',//二级业务名称的值
// allocationRatio:false,//控制是否有分配比例--
// allocationRatioText:'',//分配比例的值
// broker:false,//控制是否有分配broker
// brokerText:[ ],
// average:true,
// total:false,//控制总占比
// totalVal:'',
// isolationType:'3',
// isShared:false,
// chlidIsolationType:"3",
// childIsPhysical:'',//子级的物理隔离
// localIsPhysical:fromData.childIsPhysical,//这个本级的物理隔离-默认为true
// "parent":rootKey
// };
// addNodeFun(fromNode,fromData,diagram,brokerData,allocationData,averageData);
// setVisible(true);
// };
const onChangeRadio=(checked,e)=>{
setSelectType(checked);
}
//子节点新增
// const addNodeAndLink=(e, obj)=> {
// setRootShow('chidRootAdd');
// var fromNode = obj.part;
// setNode(fromNode);
// var diagram = fromNode.diagram;
// diagram.startTransaction("Add State");
// var fromData = fromNode.data;
// var model = diagram.model;
// const level=fromNode.findTreeLevel();
// let levelName='业务类型';
// if(level==1){
// levelName='业务类型';
// }else if(level==2){
// levelName='租户';
// }else if(level==3){
// levelName='任务周期';
// }
// let allocationData={
// "key":guid(), //动态生成key
// secondaryNot:true,
// businessName:levelName,
// businessVal:'',
// allocationRatio:true,//控制是否有分配比例--
// allocationRatioText:'',//分配比例的值
// broker:false,//控制是否有分配broker
// brokerText:[ ],
// total:false,//控制总占比
// isolationType:'1',
// isShared:false,
// average:false,
// totalVal:'',
// chlidIsolationType:'1',
// childIsPhysical:'',//子级的物理隔离
// localIsPhysical:fromData.childIsPhysical,//这个本级的物理隔离-默认为true 默认新增取父级的childIsPhysical的值
// "parent":fromData.key }
// let brokerData={
// "key":guid(), //动态生成key
// secondaryNot:true,
// businessName:levelName,
// businessVal:'',
// allocationRatio:false,//控制是否有分配比例--
// allocationRatioText:'',//分配比例的值
// broker:true,//控制是否有分配broker
// brokerText:[ ],
// total:false,//控制总占比
// totalVal:'',
// isShared:false,
// average:false,
// isolationType:'2',
// chlidIsolationType:'2',
// childIsPhysical:'',//子级的物理隔离
// localIsPhysical:fromData.childIsPhysical,//这个本级的物理隔离-默认为true
// "parent":fromData.key };
// var averageData={//只有选择业务类型
// "key":guid(), //动态生成key
// secondaryNot:true,
// businessName:levelName,
// businessVal:'',
// allocationRatio:false,//控制是否有分配比例--
// allocationRatioText:'',//分配比例的值
// broker:false,//控制是否有分配broker
// brokerText:[ ],
// average:true,
// total:false,//控制总占比
// isolationType:'3',
// isShared:false,
// totalVal:'',
// chlidIsolationType:'3',
// childIsPhysical:'',//子级的物理隔离
// localIsPhysical:fromData.childIsPhysical,//这个本级的物理隔离-默认为true 默认新增取父级的childIsPhysical的值
// "parent":fromData.key
// };
// if(level==2){
// Message.warning('不能进行新增了!');
// return
// }else{
// addNodeFun(fromNode,fromData,diagram,brokerData,allocationData,averageData);
// setVisible(true);
// }
// }
// const delNodeAndLink=(e, obj)=> {
// var fromNode = obj.part;
// // var fromData = fromNode.data;
// var diagram = fromNode.diagram;
// if (fromNode !== null) {
// diagram.startTransaction("remove dept");
// diagram.removeParts(fromNode.findTreeParts());
// diagram.commitTransaction("remove dept");
// }
// }
const unquire=(arr , key,node)=> {
let concatArr = []
arr.sort((a, b) => {
return a - b
}); //排序
for (let i = 0; i < arr.length; i++) {
if (arr[0][key] === arr[arr.length - 1][key]) { //如果第一项等于最后一项 , 代表整个数组都相同
concatArr.push(arr)
break;
} else if (arr[0][key] !== arr[i][key]) { //获取与第一项不同的元素的下标
concatArr.push(arr.splice(0, i)) //将数组截取
concatArr.push(...unquire(arr,key)) //截取后的数组进行递归 , 由于上一步用的为push , 所以返回的为复杂数组[[]] , 所以需要使用展开运算符进行扁平化
break;
}
}
return concatArr
}
const brotherPoolFilter=(fromData,childDatas,brotherBrokerIds,level)=>{
//兄弟层级的时候，也就是一级的时候 可能回显有问题
let brotherPool=defaultBrokerOptions.filter(itm=>brotherBrokerIds.indexOf(itm.brokerId) == -1);//返回找不到的数组
let brokerText=fromData.broker && fromData.brokerText != undefined && fromData.brokerText.length > 0 ? fromData.brokerText:[];
//defaultBrokerOptions 拿到初始的数据
let itselfPool=defaultBrokerOptions.filter(itm=>brokerText.indexOf(itm.brokerId) > -1);//返回找到数组
let pool=itselfPool.concat(brotherPool);
let pool_new=JSON.parse(JSON.stringify(pool));
if(childDatas.length>0 && level == 1){//只有一级的情况下才有 当前节点下面有子级 那么找到子级的broker 和当前的层级做比较，有一样的数据禁用，没有一样的不禁用
let chidBrokerIp=[];
childDatas.forEach(item=>{
if(item.brokerText && item.brokerText.length>0){
item.brokerText.forEach(ip=>{
chidBrokerIp.push(ip);
})
}
});
pool_new.map(itm=>{
if(chidBrokerIp.indexOf(itm.brokerId)>-1){
itm.disabled=true;
return itm
}else{
itm.disabled=false;
return itm
};
});
poolOptions_=pool_new;
}else{
poolOptions_=pool;
}
}
const editRootAndLink=(e, obj)=> {
setRootShow('rootEidt');
setShowbroker(false);
var fromNode = obj.part;
var fromData = fromNode.data;
var diagram = fromNode.diagram;
const level=fromNode.findTreeLevel();
//找到当前节点的下级节点
let child=fromNode.findTreeChildrenNodes();
let childDatas=[];
if(child){
child.each(function(chid) {
let chidNode=chid.part;
let chidData=chidNode.data;
childDatas.push(chidData)
});
}
setChildFromData(childDatas);
setModalConfirmData({
fromData,diagram,
});
setNode(fromNode);
if(level==1){
getRespoolTarget();
}
setTimeout(()=>{
if(formPhysics){
let isphysics=fromData.childIsPhysical ==='' ? true:fromData.childIsPhysical;
let rootSelectType=fromData.chlidIsolationType=='3' ?'average':fromData.chlidIsolationType == '2' ? 'broker':'allocation';
setFormDataPhysics({
isphysics:isphysics,
rootSelectType:rootSelectType,
});//子节点分配
formPhysics.setFieldsValue({
isphysics:isphysics,
rootSelectType:rootSelectType,
});
}
},500)
setVisible(true);
}
//编辑
// const editNodeAndLink=(e, obj)=> {
// var fromNode = obj.part;
// var fromData = fromNode.data;
// var diagram = fromNode.diagram;
// setNode(fromNode);
// setLevelNames(fromData.businessName);
// setRootShow('childEidt');
// setModalConfirmData({
// fromData,diagram
// });
// // setIsFistEdit();
// //判断是否第一次编辑
// // if(fromData.){
// // }
// let nodeDataArray=diagram.model.nodeDataArray;
// let parent=fromNode.findTreeParentNode();
// let parentData=parent?parent.part.data:'';
// if(parentData.chlidIsolationType != '2' ){//只有根节点是选择了broker的情况下，下面新增节点才能选择broker，否则禁用
// setShowbroker(true);
// }else{
// setShowbroker(false);
// }
// //找出同一层级兄弟节点的
// // let arr=unquire(nodeDataArray,'parent',fromData);
// const level=fromNode.findTreeLevel();
// if(fromData.allocationRatio){
// setAllocationRatio('allocation')
// }else if(fromData.average){
// setAllocationRatio('average');
// }else{
// setAllocationRatio('broker');
// }
// if(level==3 ||level==4){
// setModalConfirmData({
// fromData,diagram,disabled:true
// });
// if(formPhysics){
// let isphysics=fromData.childIsPhysical ==='' ? true:fromData.childIsPhysical;
// let rootSelectType=fromData.chlidIsolationType=='3' ?'average':fromData.chlidIsolationType == '2' ? 'broker':'allocation';
// formPhysics.setFieldsValue({
// isphysics:isphysics,
// rootSelectType:rootSelectType,
// });
// }
// }
// if(level==1){
// // getIsolationDim('center');
// getRespoolTarget();
// }else if(level==2){
// getIsolationDim('udt_res_isolation_biz');
// }else if(level==3){
// // forList
// getforList();
// // getIsolationDim('udt_res_isolation_tenant');
// }else if(level==4){
// getIsolationDim('udt_res_isolation_batch_type');
// }
// //找到当前节点的下级节点
// let child=fromNode.findTreeChildrenNodes();
// let childDatas=[];
// if(child){
// child.each(function(chid) {
// let chidNode=chid.part;
// let chidData=chidNode.data;
// childDatas.push(chidData)
// });
// }
// setChildFromData(childDatas);
// let brotherData = nodeDataArray.filter((item) => {
// return item.parent ==fromData.parent;
// });//找到同级的数组
// //broker 的判断
// if(fromData.isolationType=='2'||fromData.broker){//根节点选择 broker 的逻辑
// let brotherBrokerIds=[];//找到同级的数组的brokerText组成一个数组
// brotherData.forEach(itm=>{
// if(itm.brokerText && itm.brokerText.length>0){
// itm.brokerText.forEach(itm=>{
// brotherBrokerIds.push(itm);
// })
// }
// });
// if(parent && parentData.brokerText && parentData.brokerText.length>0){//子级的broker 数据过滤逻辑
// //过滤找到父及的brokerText的brokerIp
// let parentBrokerText=parentData.brokerText;
// //找到父级对应的下拉框 option 数据
// let parentBroker=defaultBrokerOptions.filter(itm=>parentBrokerText.indexOf(itm.brokerId) > -1);//返回找到数组
// if(parentBroker.length>0){//带有父级的broker的下级的broker option 就是父级选择的broker数据
// poolOptions_=parentBroker;
// }else{
// poolOptions_=[];
// }
// if(brotherData.length > 0 ){//带有父级的broker的下级 踢掉已经选择的数据的逻辑
// let brotherPool=parentBroker.filter(itm=>brotherBrokerIds.indexOf(itm.brokerId) == -1);//返回找不到的数组
// let brokerText=fromData.broker && fromData.brokerText != undefined && fromData.brokerText.length > 0 ? fromData.brokerText:[];
// let itselfPool=parentBroker.filter(itm=>brokerText.indexOf(itm.brokerId) > -1);//返回找到数组
// let pool=itselfPool.concat(brotherPool);
// if(pool.length > 0){
// poolOptions_=pool;
// }else{
// poolOptions_=[];
// }
// }
// }else if(parent && parentData.brokerText && parentData.brokerText.length == 0 ){//有父级且有父级的broker且父级broker的数据为【】
// if(brotherBrokerIds.length > 0){
// brotherPoolFilter(fromData,childDatas,brotherBrokerIds,level);
// }else if(parentData.allocationRatio && level==2){
// poolOptions_=defaultBrokerOptions;
// }else{
// poolOptions_=[];
// }
// }else{//同级过滤broker 的逻辑
// brotherPoolFilter(fromData,childDatas,brotherBrokerIds,level);
// }
// }else{ //根节点选择 比例 的逻辑 allocationRatio：true
// if(level!=1 && parentData.allocationRatio && (fromData.isolationType=='1' || fromData.allocationRatio)){//加上判断逻辑严谨性
// let totalVal=0;
// //占比=当前的层级totalVal*父级的totalVal（parentData.totalVal）
// totalVal=Number(parentData.allocationRatioText) * Number(fromData.allocationRatioText);
// diagram.model.setDataProperty(fromData, 'total' , true);
// }else if(level!=1 && (fromData.isolationType=='1' || fromData.allocationRatio)){
// let parents=fromNode.findTreeParentChain();
// let parentsNoedes=[];
// let parentsDatas=[];
// if(parents){
// parents.each(chids=>{
// let pNode_=chids.part;
// let pData_=chids.part.data;
// if (!parentsDatas.includes(pData_)) {
// parentsDatas.push(pData_);
// parentsNoedes.push(pNode_);
// }
// })
// }
// let isallocationRatio=false;
// if(parentsDatas.length>0){//当前节点所有父级节点
// // parentsDatas.forEach(iNode=>{
// for(let i=0;i < parentsDatas.length;i++){
// if(parentsDatas[i].allocationRatio && parentsDatas[i].key != fromData.key){
// isallocationRatio=true;
// break;
// }else{
// isallocationRatio=false;
// }
// }
// }
// if(isallocationRatio){
// diagram.model.setDataProperty(fromData, 'total' , true);
// }
// }
// }
// if(fromData.average){
// diagram.model.setDataProperty(fromData, 'total' , false);
// }
// setTimeout(()=>{
// formRef.current?formRef.current.resetFields():'';
// if(formRef.current){
// formRef.current.setFieldsValue({
// businessType:fromData.businessVal,
// broker:fromData.brokerText,
// scale:Number(fromData.allocationRatioText),
// isShared:fromData.isShared?'true':'false',
// });
// }
// if(formPhysics){
// let isphysics=fromData.childIsPhysical ==='' ? true:fromData.childIsPhysical;
// let rootSelectType=fromData.chlidIsolationType=='3' ?'average':fromData.chlidIsolationType == '2' ? 'broker':'allocation';
// setFormDataPhysics({
// isphysics:isphysics,
// rootSelectType:rootSelectType,
// });//子节点分配
// formPhysics.setFieldsValue({
// isphysics:isphysics,
// rootSelectType:rootSelectType,
// });
// }
// },500)
// setVisible(true);
// }
const businessTypeFilter=(val,type)=>{
return businessTypeOptions.find(object => {
if(object[type] == val){
return object;
}else if(object['memberName'] == val){
return object;
}
});
}
const changeChildrenType=(diagram,rootSelect,fromData)=>{
let formPhysicsData=formPhysics.getFieldsValue();
console.log('编辑的时候旧的',formDataPhysics,'编辑的时候新的',formPhysicsData)
if(formPhysicsData &&( (formPhysicsData.isphysics !== formDataPhysics.isphysics )|| (formPhysicsData.rootSelectType !== formDataPhysics.rootSelectType)) ){
let nodeDataArray=diagram.model.nodeDataArray;
let brotherData = nodeDataArray.filter((item) => {
return item.parent ==fromData.key;
});//找到同级的数组
let data= brotherData.map(itm=>{
diagram.model.setDataProperty(itm, 'localIsPhysical' , formPhysicsData.isphysics);
if(rootSelect=='allocation'){
diagram.model.setDataProperty(itm, 'allocationRatio' , true);
diagram.model.setDataProperty(itm, 'broker' , false);
diagram.model.setDataProperty(itm, 'average' , false);
diagram.model.setDataProperty(itm, 'allocationRatioText' , ''); //重新选择比例的情况下清空之前填写的数据
}else if(rootSelect == 'average'){
diagram.model.setDataProperty(itm, 'allocationRatio' , false);
diagram.model.setDataProperty(itm, 'broker' , false);
diagram.model.setDataProperty(itm, 'total' , false); //平均分配的情况下去掉总占比
diagram.model.setDataProperty(itm, 'average' , true);
}else{
diagram.model.setDataProperty(itm, 'allocationRatio' , false);
diagram.model.setDataProperty(itm, 'broker' , true);
diagram.model.setDataProperty(itm, 'average' , false);
diagram.model.setDataProperty(itm, 'brokerText' , []); //重新选择比例的情况下清空之前填写的数
}
});
}
}
const changeChildIsPhysicalFun=(type,diagram,fromData,model,formPhysicsData,rootSelect,averageData,allocationData,brokerData)=>{
diagram.model.setDataProperty(fromData, 'childIsPhysical' , formPhysicsData.isphysics);
if(rootSelect=='allocation'){
if(type == 'rootAdd' || type == 'chidRootAdd'){
model.addNodeData(Object.assign({},allocationData,{
localIsPhysical:formPhysicsData.isphysics
}));
}
diagram.model.setDataProperty(fromData, 'chlidIsolationType' , '1');
}else if(rootSelect == 'average'){
if(type == 'rootAdd' || type == 'chidRootAdd'){
model.addNodeData(Object.assign({},averageData,{localIsPhysical:formPhysicsData.isphysics}));
}
diagram.model.setDataProperty(fromData, 'chlidIsolationType' , '3');
}else{//broker
if(type == 'rootAdd' || type == 'chidRootAdd'){
model.addNodeData(Object.assign({},brokerData,{localIsPhysical:formPhysicsData.isphysics}));
}
diagram.model.setDataProperty(fromData, 'chlidIsolationType' , '2');
};
let nodeDataArray=diagram.model.nodeDataArray || [];
console.log('nodeDataArray',nodeDataArray)
}
const filterBroker=(diagram,fromData,model,formPhysicsData,rootSelect,averageData,allocationData,brokerData)=>{
console.log(childFromData,rootSelect,formDataPhysics)
let childData=childFromData[0];
// let brokerTextStr='';
// if(childData.brokerText && childData.brokerText.length>0){
// brokerTextStr=childData.brokerText.toString();
// }
console.log('childData.broker')
if(rootSelect != 'broker' && childData.chlidIsolationType == '2' ){//当前选择子节点分配方式的值
Message.warning('子节点的子节点分配方式为【固定broker】，请先修改!');
return
}else{
changeChildrenType(diagram,rootSelect,fromData);
changeChildIsPhysicalFun('rootEidt',diagram,fromData,model,formPhysicsData,rootSelect,averageData,allocationData,brokerData);
setVisible(false);
}
}
const saveDrawer=()=>{
}
const showToolTip=(obj, diagram)=> {
var node = obj.part;
let { brokerText }=node.data;
//brokerText大于6的情况下才显示tip
if (obj !== null && brokerText.length >= 6) {
var node = obj.part;
var e = diagram.lastInput;
updateInfoBox(e.viewPoint, node.data);
} else {
if (lastStroked !== null) lastStroked.stroke = null;
lastStroked = null;
document.getElementById(`infoBoxHolder${diagramId}`).innerHTML = "";
}
}
const updateInfoBox=(mousePt, data)=> {
var box = document.getElementById(`infoBoxHolder${diagramId}`);
box.innerHTML = "";
var infobox = document.createElement("div");
var leftBorder = document.createElement("div");
infobox.id = "infoBox";
leftBorder.id = "leftBorder";
const brokerText=data.brokerText;
if(brokerText.length>0){
brokerText.forEach(item=>{
var child = document.createElement("div");
child.className='infoValues';
child.textContent=item + ' , ';
infobox.appendChild(child);
});
}
box.appendChild(leftBorder);
box.appendChild(infobox);
box.style.left = mousePt.x + 30 + "px";
box.style.top = mousePt.y + 8 + "px";
}
let tooltiptemplate =
GO("ToolTip",
{visible:false},
new go.Binding("visible", "totalVal", (data,node)=> {
let totalVal=String(data);
if (totalVal && totalVal.length >= 4){
return true;
}else{
return false;
}
}),
GO(go.TextBlock,
{ margin: 3, editable: false ,},
new go.Binding("text", "totalVal", (data)=>{
return data+'%';
}),
)
);
let myToolTip = GO(go.HTMLInfo, {
show: showToolTip,
});
//节点点击
const clickNode=(e, obj)=>{
var fromNode = obj.part;
console.log('clickNode',fromNode.data,e, obj)
setVisible(true);
}
//竖着排列
const nodeTemplateDomV=()=>{
return GO(go.Node, 'Vertical',
{ click:clickNode},
new go.Binding("maxSize", "root", function(a) { return (a ? new go.Size(400, 250) : new go.Size(400, NaN)); }),
GO(go.Shape, "Rectangle",
{
fill: '#165DFF', strokeWidth: 2, stroke: '#165DFF',
height: 3,
width:310,//宽等于180+120
figure: "RoundedTopRectangle",
stretch: go.GraphObject.Vertical,
alignment: go.Spot.Top,
visible: false
},
new go.Binding("visible", "", (data,node)=> {
const nodeData = node.part.data;
if(!nodeData.rootTwo){
return true;
}else{
return false;
}
}),
),
//只有根节点展示
GO(go.Panel, "Auto",
{ visible: true,},
new go.Binding("visible", "", (data,node)=> {
const nodeData = node.part.data;
if(!nodeData.rootTwo){
return true;
}else{
return false;
}
}),
GO(go.Shape, "Rectangle", {
width:310,
figure: "RoundedBottomRectangle",
minSize: new go.Size(310, 100),
fill: "white",
stroke: '#E5E6EB',},
),
GO(go.Panel, "Table",
{visible: false,},
new go.Binding("visible", "source", function(a) {
return (a ? true : false);
}),
GO(go.Panel,"Auto",
// {row: 0, column: 0, visible: false, columnSpan: 4,
// maxSize:new go.Size(160, NaN),
// margin: new go.Margin(0.2, 0, 0, 0), },
// new go.Binding("visible", "source", function(a) {
// return (a ? true : false);
// }),
// GO(go.Shape, "Rectangle", {
// fill: "white",
// height:34,stroke: "#E5E6EB", strokeWidth: 0, }),
// GO(go.Panel,"Horizontal",
// GO(go.Picture,
// { visible: false, maxSize: new go.Size(15, 15),
// alignment: go.Spot.Center,
// margin: new go.Margin(0, 5, 4, 0),
// },
// new go.Binding("source", "source"),
// new go.Binding("visible", "source", function(a) { return (a ? true : false); }),
// ),
// GO(go.TextBlock,
// {
// name: 'TEXT',
// alignment: go.Spot.Center,
// font: 'bold 12pt PingFangSC, PingFangSC-Regular',
// editable: false,
// stroke: "#165DFF", maxSize: new go.Size(130, NaN),
// },
// new go.Binding("text", "name").makeTwoWay()),
// ),
),//根节点表头
GO(go.RowColumnDefinition,
{row: 1, separatorStrokeWidth: 1,separatorStroke: "#E5E6EB",
},//c9cbd3 线条有问题 visible: false,
),//底部的横线 #E5E6EB
GO(go.RowColumnDefinition,
{ column: 1, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" },
),//纵向的竖线
GO(go.Panel,"Auto",
{row: 1, column: 0, },//上左下右 margin: new go.Margin(0, 15, 0, 15)
GO(go.Shape, { fill: "#F7F8FA",
height:30,
width:120,
stroke: "#F7F8FA", strokeWidth: 0,
}
),
GO(go.TextBlock, "名称", {
alignment: go.Spot.Center,stroke: "#86909C",
},
),),
GO(go.RowColumnDefinition,
{ row: 1, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" },
),//底部的横线
GO(go.TextBlock, "", { row: 1, column: 1,
alignment: go.Spot.Left,
font: '400 14px sans-serif',
width:180,
margin: new go.Margin(0, 0, 0, 10),
},
new go.Binding("text", "childIsPhysical",function(data,node) {
if(data === true){
return '物理';
}else if(data === false){
return '逻辑';
}else{
return '暂无数据';
}
}),
),
GO(go.RowColumnDefinition,
{ row: 4, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" },
),//底部的横线
GO(go.Panel,"Auto",
{ row: 4, column: 0 ,},
GO(go.Shape, { fill: "#F7F8FA",
// minSize: new go.Size(100, 30),
height:30,
width:120,
stroke: "#F7F8FA", strokeWidth: 0,
}
),
GO(go.TextBlock, "数据量", { alignment: go.Spot.Center,stroke: "#86909C", },
),
),
GO(go.TextBlock, '',{
row: 4,width:150, column: 1,
width:180,
margin: new go.Margin(0, 0, 0, 10),
font: '400 14px sans-serif',
alignment: go.Spot.Left,
visible:false
},
new go.Binding("text", "chlidIsolationType",function(data,node) {
const nodeData = node.part.data;
if(data == '1'){
return '按比例';
}else if(data == '3'){
return '平均分配';
}else if(data == '2'){
return '固定broker';
}else{
return '暂无数据';
}
}),
new go.Binding("visible", "", (data,node)=> {
const nodeData = node.part.data;
if(nodeData.root){
return true;
}else{
return false;
}
})
),
GO(go.RowColumnDefinition,
{ row: 6, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//底部的横线
GO(go.Panel,"Auto",
{row: 6, column: 0, },
GO(go.Shape, "RoundedRectangle", { fill: "white", stroke: "#E5E6EB", strokeWidth: 0, }),
GO(go.TextBlock, "业务类型", {
alignment: go.Spot.Center,stroke: "#86909C",
},
new go.Binding("text", "yufd"),
),
),
),
//二级节点只有二级以下的节点控制
GO(go.Panel, "Table",
{visible: true, },
GO(go.RowColumnDefinition,
{ row: 1, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" },//c9cbd3 线条有问题 visible: false,
),//底部的横线 #E5E6EB
GO(go.RowColumnDefinition,
{ column: 1, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//纵向的竖线
GO(go.Panel,"Auto",
{row: 1, column: 0, },
GO(go.Shape, { fill: "#F7F8FA",
height:30,
width:120,
stroke: "#F7F8FA", strokeWidth: 0,
}
),
GO(go.TextBlock, "名称", {
alignment: go.Spot.Center,stroke: "#86909C",
},
),),
GO(go.RowColumnDefinition,
{ row: 2, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//底部的横线
GO(go.TextBlock, "暂无数据", { row: 1, column: 1,
alignment: go.Spot.Left,
font: '400 14px sans-serif',
width:180,
margin: new go.Margin(0, 0, 0, 10),
},
new go.Binding("text", "name",function(data) { return (data ? data : '暂无数据'); })),
GO(go.Panel,"Auto",
{ row: 2, column: 0 , visible: false, },
new go.Binding("visible", "broker", function(a) { return (a ? true : false); }),
GO(go.Shape, { fill: "#F7F8FA",
height:70,
width:120,
stroke: "#F7F8FA", strokeWidth: 0,
}
),
GO(go.TextBlock, "分配broker", { alignment: go.Spot.Center,stroke: "#86909C", },
),
),
GO(go.TextBlock,
{ row: 2, column: 1, margin: 2 ,
width:180,
visible: false,
name:'SHAPE',
toolTip: myToolTip,
margin: new go.Margin(10, 15, 10, 10),
overflow: go.TextBlock.OverflowEllipsis,
maxLines: 3,
font: '400 14px sans-serif',
mouseEnter: function(e, obj, prev) { // change group's background brush
var box = document.getElementById(`infoBoxHolder${diagramId}`);
let styleObj={
top: '2%',
left: '-5%',
opacity:1,
}
},
mouseLeave: function(e, obj, next) { // restore to original brush
var box = document.getElementById(`infoBoxHolder${diagramId}`);
box.innerHTML = "";
}
},
new go.Binding("text", "brokerText",function(val) {
if(val.length >= 6){
const arr=val.slice(0,5)
let strVal=arr.join(', ');
let html=`${strVal}...+${val.length}`;
return (html ? html : '')
}else if(val.length < 6 && val.length != 0){
let strVal=val.join(', ');
return (strVal ? strVal : '')
}else{
return ('暂无数据');
}
}),
new go.Binding("visible", "broker", function(a) { return (a ? true : false); }),
),
GO(go.RowColumnDefinition,
{ row: 3, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//底部的横线
GO(go.Panel,"Auto",
{ row: 3, column: 0 ,visible:true},
GO(go.Shape, { fill: "#F7F8FA",
height:30,
width:120,
stroke: "#F7F8FA", strokeWidth: 0,
}
),
GO(go.TextBlock, "数据量", { alignment: go.Spot.Center,stroke: "#86909C", },
),
),
GO(go.TextBlock, '暂无数据',{visible:true, row: 3,width:150, column: 1,
width:180,
margin: new go.Margin(0, 0, 0, 10),
font: '400 14px sans-serif',
alignment: go.Spot.Left,},
new go.Binding("text", "dataNum",function(data) { return (data?data :'暂无数据'); }),
),
GO(go.RowColumnDefinition,
{ row: 4, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//底部的横线
GO(go.Panel,"Auto",
{ row: 4, column: 0 , },
GO(go.Shape, { fill: "#F7F8FA",
// minSize: new go.Size(100, 30),
height:30,
width:120,
stroke: "#F7F8FA", strokeWidth: 0,
}
),
GO(go.TextBlock, "流速", { alignment: go.Spot.Center,stroke: "#86909C", },
),
),
GO(go.TextBlock, '暂无数据',{
row: 4,width:150, column: 1,
width:180,
margin: new go.Margin(0, 0, 0, 10),
font: '400 14px sans-serif',
alignment: go.Spot.Left,},
new go.Binding("text", "velocityFlow",function(data,node) {
return (data?data+'/s' :'暂无数据');
}),
),
GO(go.RowColumnDefinition,
{ row: 5, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//底部的横线
GO(go.Panel,"Auto",
{ row: 5, column: 0 , },
GO(go.Shape, { fill: "#F7F8FA",
// minSize: new go.Size(100, 30),
height:30,
width:120,
stroke: "#F7F8FA", strokeWidth: 0,
}
),
GO(go.TextBlock, "其他", { alignment: go.Spot.Center,stroke: "#86909C", },
),
),
GO(go.TextBlock, '暂无数据',{
row: 5,width:150, column: 1,
width:180,
margin: new go.Margin(0, 0, 0, 10),
font: '400 14px sans-serif',
alignment: go.Spot.Left,},
new go.Binding("text", "other",(data,node)=> {
const nodeData = node.part.data;
return (data?data :'暂无数据');
// if(data == '1'){
// return '按比例';
// }else if(data == '3'){
// return '平均分配';
// }else if(data == '2'){
// return '固定broker';
// }else{
// return '暂无数据';
// }
}),
),
// GO(go.RowColumnDefinition,
// { row: 6, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//底部的横线
// GO(go.Panel,"Auto",
// {row: 6, column: 0, columnSpan: 3,width:120,height:32,margin: new go.Margin(0.2, 0, 0, 0), },
// GO(go.Shape, "RoundedRectangle", { fill: "white", stroke: "#E5E6EB", strokeWidth: 0, }),
// GO(go.Picture, edit,
// {
// margin: new go.Margin(0, 10, 0, 10),
// maxSize: new go.Size(25, 25),
// alignment: go.Spot.Left,
// cursor:'pointer',
// click: editNodeAndLink
// },
// ),
// GO(go.Picture, del,
// {
// margin: new go.Margin(0, 10, 0, 10),
// maxSize: new go.Size(25, 25),
// alignment: go.Spot.Center,
// cursor:'pointer',
// click: delNodeAndLink },
// ),
// GO(go.Picture, line,
// {
// margin: new go.Margin(70, 77, 70, 78),
// maxSize: new go.Size(20, 20),
// alignment: go.Spot.Left,
// },
// ),
// GO(go.Picture, add,
// {
// margin: new go.Margin(0, 0, 0, 10),
// maxSize: new go.Size(25, 25),
// alignment: go.Spot.Right,
// cursor:'pointer',
// click: addNodeAndLink },
// ),
// ),
),//结束
),
//只有根节点展示新增按钮
GO(go.Panel, "Vertical",
GO("TreeExpanderButton",
new go.Binding('fill', '#E8F3FF')
),
),
); // end Node
}
// const nodeTemplateDomH=()=>{
// return GO(go.Node, 'Horizontal',
// new go.Binding("maxSize", "root", function(a) { return (a ? new go.Size(450, 200) : new go.Size(450, NaN)); }),
// GO(go.Panel, 'Vertical',
// GO(go.Shape, "Rectangle",
// {
// fill: '#165DFF', strokeWidth: 2, stroke: '#165DFF',
// height: 3,
// width:310,
// figure: "RoundedTopRectangle",
// stretch: go.GraphObject.Vertical,
// alignment: go.Spot.Top,
// visible: false
// },
// new go.Binding("visible", "", (data,node)=> {
// const nodeData = node.part.data;
// if(!nodeData.rootTwo){
// return true;
// }else{
// return false;
// }
// }),
// ),
// GO(go.Panel, "Auto",
// { visible: false,},
// new go.Binding("visible", "", (data,node)=> {
// const nodeData = node.part.data;
// if(!nodeData.rootTwo){
// return true;
// }else{
// return false;
// }
// }),
// GO(go.Shape, "Rectangle", {
// width:310,
// figure: "RoundedBottomRectangle",
// minSize: new go.Size(310, 100),
// fill: "white",
// stroke: '#E5E6EB',},
// ),
// GO(go.Panel, "Table",
// {visible: false,},
// new go.Binding("visible", "source", function(a) {
// return (a ? true : false);
// }),
// GO(go.Panel,"Auto",
// {row: 0, column: 0, columnSpan: 3,visible: false,
// maxSize:new go.Size(160, NaN),
// margin: new go.Margin(0.2, 0, 0, 0), },
// new go.Binding("visible", "source", function(a) {
// return (a ? true : false);
// }),
// GO(go.Shape, "Rectangle", {
// fill: "white",
// height:34,stroke: "#E5E6EB", strokeWidth: 0, }),
// GO(go.Panel,"Horizontal",
// GO(go.Picture,
// { visible: false, maxSize: new go.Size(15, 15),
// alignment: go.Spot.Center,
// margin: new go.Margin(0, 5, 4, 0),
// },
// new go.Binding("source", "source"),
// new go.Binding("visible", "source", function(a) { return (a ? true : false); }),
// ),
// GO(go.TextBlock,
// {
// name: 'TEXT',
// alignment: go.Spot.Center,
// font: 'bold 12pt PingFangSC, PingFangSC-Regular',
// editable: false,
// stroke: "#165DFF", maxSize: new go.Size(130, NaN),
// },
// new go.Binding("text", "name").makeTwoWay()),
// ),
// ),//根节点表头
// GO(go.RowColumnDefinition,
// {row: 1, separatorStrokeWidth: 1,separatorStroke: "#E5E6EB",
// },//c9cbd3 线条有问题 visible: false,
// ),//底部的横线 #E5E6EB
// GO(go.RowColumnDefinition,
// { column: 1, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" },
// ),//纵向的竖线
// GO(go.Panel,"Auto",
// {row: 1, column: 0, },
// GO(go.Shape, { fill: "#F7F8FA",
// height:30,
// width:120,
// stroke: "#F7F8FA", strokeWidth: 0,
// }
// ),
// GO(go.TextBlock, "子节点隔离类型", {
// alignment: go.Spot.Center,stroke: "#86909C",
// },
// ),),
// GO(go.RowColumnDefinition,
// { row: 2, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" },
// ),//底部的横线
// GO(go.TextBlock, "", { row: 1, column: 1,
// alignment: go.Spot.Left,
// font: '400 14px sans-serif',
// width:180,
// margin: new go.Margin(0, 0, 0, 10),
// },
// new go.Binding("text", "childIsPhysical",function(data,node) {
// if(data === true){
// return '物理';
// }else if(data === false){
// return '逻辑';
// }else{
// return '暂无数据';
// }
// }),
// ),
// GO(go.RowColumnDefinition,
// { row: 4, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" },
// ),//底部的横线
// GO(go.Panel,"Auto",
// { row: 4, column: 0 , },
// GO(go.Shape, { fill: "#F7F8FA",
// height:30,
// width:120,
// stroke: "#F7F8FA", strokeWidth: 0,
// }
// ),
// GO(go.TextBlock, "子节点分配方式", { alignment: go.Spot.Center,stroke: "#86909C", },
// ),
// ),
// GO(go.TextBlock, '',{
// row: 4,width:150, column: 1,
// width:180,
// margin: new go.Margin(0, 0, 0, 10),
// font: '400 14px sans-serif',
// alignment: go.Spot.Left,
// visible:false
// },
// new go.Binding("text", "chlidIsolationType",function(data,node) {
// const nodeData = node.part.data;
// if(data == '1'){
// return '按比例';
// }else if(data == '3'){
// return '平均分配';
// }else if(data == '2'){
// return '固定broker';
// }else{
// return '暂无数据';
// }
// }),
// new go.Binding("visible", "", (data,node)=> {
// const nodeData = node.part.data;
// if(nodeData.root){
// return true;
// }else{
// return false;
// }
// })
// ),
// // GO(go.RowColumnDefinition,
// // { row: 5, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//底部的横线
// // GO(go.Panel,"Auto",
// // {row: 6, column: 0, columnSpan: 3,width:120,height:32,margin: new go.Margin(0.2, 0, 0, 0), },
// // GO(go.Shape, "RoundedRectangle", { fill: "white", stroke: "#E5E6EB", strokeWidth: 0, }),
// // GO(go.Picture, edit,
// // {
// // margin: new go.Margin(0, 10, 0, 10),
// // maxSize: new go.Size(25, 25),
// // alignment: go.Spot.Left,
// // cursor:'pointer',
// // click: editRootAndLink
// // },
// // ),
// // GO(go.Picture, add,
// // {
// // margin: new go.Margin(0, 10, 0, 10),
// // maxSize: new go.Size(25, 25),
// // alignment: go.Spot.Center,
// // cursor:'pointer',
// // click: addRoot,
// // },
// // ),
// // ),
// ),
// GO(go.Panel, "Table",
// {visible: false, },
// new go.Binding("visible", "secondaryNot", (data,node)=> {
// return (data? true : false);
// }),
// //总占比的节点
// GO(go.Panel,"Auto",
// {row: 0, column: 0, columnSpan: 3,visible: false,
// maxSize:new go.Size(160, NaN),
// margin: new go.Margin(0.2, 0, 0, 0), },
// // new go.Binding("visible", "total", function(data) {
// // return data?true:false;
// // }),
// GO(go.Shape, "Rectangle", {
// fill: "white",
// height:34,stroke: "#E5E6EB", strokeWidth: 0, }),
// GO(go.Shape, "Rectangle", {
// height:24,
// width:160,
// fill: "#E8F3FF", stroke: "#E5E6EB", strokeWidth: 0, margin: new go.Margin(0, 20, 0, 10), }),
// GO(go.Panel,"Horizontal",
// GO(go.Picture, reset,
// {
// margin: new go.Margin(0, 5, 0, 0),
// maxSize: new go.Size(10, 10),
// alignment: go.Spot.Right,
// },
// ),
// GO(go.TextBlock,
// { font: '400 14px sans-serif',
// overflow: go.TextBlock.OverflowEllipsis,
// toolTip: tooltiptemplate,
// },
// new go.Binding("text", "totalVal",function(data) {
// let totalVal=String(data);
// if (totalVal && totalVal.length >= 4){
// let data_=Number(data).toFixed(4);
// // let str= totalVal.slice(0,4);
// return ('总占比:'+data_+'%');
// }else if(totalVal && totalVal.length < 4){
// let str= totalVal.slice(0,4)
// return ('总占比:'+str+'%');
// }else{
// return ('总占比:0%');
// }
// }),
// ),
// ),
// ),//总占比的节点结束
// GO(go.RowColumnDefinition,
// { row: 1, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" },//c9cbd3 线条有问题 visible: false,
// ),//底部的横线 #E5E6EB
// GO(go.RowColumnDefinition,
// { column: 1, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//纵向的竖线
// GO(go.Panel,"Auto",
// {row: 1, column: 0, },
// GO(go.Shape, { fill: "#F7F8FA",
// height:30,
// width:120,
// stroke: "#F7F8FA", strokeWidth: 0,
// }
// ),
// GO(go.TextBlock, "业务类型", { alignment: go.Spot.Center,stroke: "#86909C", },
// new go.Binding("text", "businessName"),
// ),),
// GO(go.RowColumnDefinition,
// { row: 2, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//底部的横线
// GO(go.TextBlock, "暂无数据", { row: 1, column: 1,
// alignment: go.Spot.Left,
// font: '400 14px sans-serif',
// width:180,
// margin: new go.Margin(0, 0, 0, 10),
// },
// new go.Binding("text", "businessVal",function(data) { return (data ? data : '暂无数据'); })),
// GO(go.Panel,"Auto",
// { row: 2, column: 0 , visible: false, },
// new go.Binding("visible", "broker", function(a) { return (a ? true : false); }),
// GO(go.Shape, { fill: "#F7F8FA",
// height:70,
// width:120,
// stroke: "#F7F8FA", strokeWidth: 0,
// }
// ),
// GO(go.TextBlock, "分配broker", { alignment: go.Spot.Center,stroke: "#86909C", },
// ),
// ),
// GO(go.TextBlock,
// { row: 2, column: 1, margin: 2 ,
// width:180,
// visible: false,
// name:'SHAPE',
// toolTip: myToolTip,
// margin: new go.Margin(10, 15, 10, 10),
// overflow: go.TextBlock.OverflowEllipsis,
// maxLines: 3,
// font: '400 14px sans-serif',
// mouseEnter: function(e, obj, prev) { // change group's background brush
// var box = document.getElementById(`infoBoxHolder${diagramId}`);
// // box.style.opacity='1';
// let styleObj={
// top: '13%',
// left: '-3%',
// opacity:1,
// }
// // document.styleSheets[0].addRule('#infoBoxHolder::after',styleObj);
// },
// mouseLeave: function(e, obj, next) { // restore to original brush
// var box = document.getElementById(`infoBoxHolder${diagramId}`);
// // document.styleSheets[0].addRule('#infoBoxHolder::after','content: "' + latestContent + '"');
// box.innerHTML = "";
// }
// },
// new go.Binding("text", "brokerText",function(val) {
// if(val.length >= 6){
// const arr=val.slice(0,5)
// let strVal=arr.join(', ');
// let html=`${strVal}...+${val.length}`;
// return (html ? html : '')
// }else if(val.length < 6 && val.length != 0){
// let strVal=val.join(', ');
// return (strVal ? strVal : '')
// }else{
// return ('暂无数据');
// }
// }),
// new go.Binding("visible", "broker", function(a) { return (a ? true : false); }),
// ),
// GO(go.RowColumnDefinition,
// { row: 3, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//底部的横线
// GO(go.Panel,"Auto",
// { row: 3, column: 0 ,visible:false},
// // new go.Binding("visible", "allocationRatio", function(a) { return (a ? true : false); }),
// GO(go.Shape, { fill: "#F7F8FA",
// // minSize: new go.Size(100, 30),
// height:30,
// width:120,
// stroke: "#F7F8FA", strokeWidth: 0,
// }
// ),
// GO(go.TextBlock, "分配比例", { alignment: go.Spot.Center,stroke: "#86909C", },
// ),
// ),
// GO(go.TextBlock, '暂无数据',{visible:false, row: 3,width:150, column: 1,
// width:180,
// margin: new go.Margin(0, 0, 0, 10),
// font: '400 14px sans-serif',
// alignment: go.Spot.Left,},
// new go.Binding("text", "allocationRatioText",function(a) { return (a?a +'%':'暂无数据'); }),
// new go.Binding("visible", "allocationRatio", function(a) { return (a ? true : false); }),
// ),
// GO(go.RowColumnDefinition,
// { row: 4, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//底部的横线
// GO(go.Panel,"Auto",
// { row: 4, column: 0 , },
// GO(go.Shape, { fill: "#F7F8FA",
// // minSize: new go.Size(100, 30),
// height:30,
// width:120,
// stroke: "#F7F8FA", strokeWidth: 0,
// }
// ),
// GO(go.TextBlock, "子节点隔离类型", { alignment: go.Spot.Center,stroke: "#86909C", },
// ),
// ),
// GO(go.TextBlock, '暂无数据',{
// row: 4,width:150, column: 1,
// width:180,
// margin: new go.Margin(0, 0, 0, 10),
// font: '400 14px sans-serif',
// alignment: go.Spot.Left,},
// new go.Binding("text", "childIsPhysical",function(data,node) {
// if(data === true){
// return '物理';
// }else if(data === false){
// return '逻辑';
// }else{
// return '暂无数据';
// }
// }),
// ),
// GO(go.RowColumnDefinition,
// { row: 5, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//底部的横线
// GO(go.Panel,"Auto",
// { row: 5, column: 0 , },
// GO(go.Shape, { fill: "#F7F8FA",
// // minSize: new go.Size(100, 30),
// height:30,
// width:120,
// stroke: "#F7F8FA", strokeWidth: 0,
// }
// ),
// GO(go.TextBlock, "子节点分配方式", { alignment: go.Spot.Center,stroke: "#86909C", },
// ),
// ),
// GO(go.TextBlock, '暂无数据',{
// row: 5,width:150, column: 1,
// width:180,
// margin: new go.Margin(0, 0, 0, 10),
// font: '400 14px sans-serif',
// alignment: go.Spot.Left,},
// new go.Binding("text", "chlidIsolationType",(data,node)=> {
// const nodeData = node.part.data;
// if(data == '1'){
// return '按比例';
// }else if(data == '3'){
// return '平均分配';
// }else if(data == '2'){
// return '固定broker';
// }else{
// return '暂无数据';
// }
// }),
// ),
// GO(go.RowColumnDefinition,
// { row: 6, separatorStrokeWidth: 1, separatorStroke: "#E5E6EB" }),//底部的横线
// GO(go.Panel,"Auto",
// {row: 6, column: 0, columnSpan: 3,width:120,height:32,margin: new go.Margin(0.2, 0, 0, 0), },
// GO(go.Shape, "RoundedRectangle", { fill: "white", stroke: "#E5E6EB", strokeWidth: 0, }),
// GO(go.Picture, edit,
// {
// margin: new go.Margin(0, 10, 0, 10),
// maxSize: new go.Size(25, 25),
// alignment: go.Spot.Left,
// cursor:'pointer',
// click: editNodeAndLink
// },
// ),
// GO(go.Picture, del,
// {
// margin: new go.Margin(0, 10, 0, 10),
// maxSize: new go.Size(25, 25),
// alignment: go.Spot.Center,
// cursor:'pointer',
// click: delNodeAndLink },
// ),
// // GO(go.Panel, "Auto",
// // {
// // margin: new go.Margin(0, 10, 0, 10),
// // alignment: go.Spot.Center,
// // },
// // GO(
// // go.Shape,
// // {
// // width: 24,
// // height: 24,
// // fill: '#F2F3F5',
// // strokeWidth: 1,
// // stroke: '#F2F3F5',
// // cursor: 'pointer',
// // },
// // {
// // click: delNodeAndLink,
// // },
// // ),
// // GO(
// // go.Shape,
// // {
// // width: 10,
// // height: 10,
// // alignment: go.Spot.Center,
// // margin: new go.Margin(8, 6, 10, 3),//上左下右
// // // fill: '#4E5969',
// // strokeWidth: 0,
// // stroke: '#4E5969',
// // shadowVisible: false,
// // cursor: 'pointer',
// // geometry: go.Geometry.parse(icons.delete, true),
// // },
// // {
// // click: delNodeAndLink,
// // },
// // ),
// // ),
// GO(go.Picture, line,
// {
// margin: new go.Margin(70, 77, 70, 78),
// maxSize: new go.Size(20, 20),
// alignment: go.Spot.Left,
// },
// ),
// // GO(go.Panel, "Auto",
// // {
// // margin: new go.Margin(0, 0, 0, 10),
// // alignment: go.Spot.Right,
// // },
// // GO(
// // go.Shape,
// // {
// // width: 24,
// // height: 24,
// // fill: '#E8F3FF',
// // strokeWidth: 1,
// // stroke: '#E8F3FF',
// // cursor: 'pointer',
// // },
// // {
// // click: addNodeAndLink,
// // },
// // ),
// // GO(
// // go.Shape,
// // {
// // width: 10,
// // height: 10,
// // fill: '#2a3fff',
// // strokeWidth: 0,
// // stroke: '#2a3fff',
// // alignment: go.Spot.Center,
// // margin: new go.Margin(8, 6, 10, 3),//上左下右
// // shadowVisible: false,
// // cursor: 'pointer',
// // geometry: go.Geometry.parse(icons.create, true),
// // },
// // {
// // click: addNodeAndLink,
// // },
// // ),
// // ),
// GO(go.Picture, add,
// {
// margin: new go.Margin(0, 0, 0, 10),
// maxSize: new go.Size(25, 25),
// alignment: go.Spot.Right,
// cursor:'pointer',
// click: addNodeAndLink },
// ),
// ),
// ),//结束
// ),
// ),
// GO("TreeExpanderButton",
// {
// position: new go.Point(45, 5),
// },
// new go.Binding('fill', '#E8F3FF')
// ),
// ); // end Node
// }
const init = (type) => {
let myDiagramDiv=document.getElementById(`myDiagramDiv${diagramId}`,);
let diagram =GO(go.Diagram,myDiagramDiv,{
scale: scale,
'toolManager.hoverDelay': 100, // tooltip提示显示延时
'toolManager.toolTipDuration': 10000,
"undoManager.isEnabled": true ,
grid: GO(go.Panel, "Grid",//网格
GO(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.1 }),
GO(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.1 }),
),
layout: GO(go.TreeLayout, {
comparer: go.LayoutVertex.smartComparer,
angle: angle,
layerSpacing: 35,
alternateAngle: 90,
nodeSpacing:20,
alternateLayerSpacing: 35,
alternateAlignment: go.TreeLayout.AlignmentBus,
alternateNodeSpacing: 20,
})
});
diagramDom=diagram;
go.Shape.defineFigureGenerator("RoundedTopRectangle", function(shape, w, h) {
// this figure takes one parameter, the size of the corner
var p1 = 5; // default corner size
if (shape !== null) {
var param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
var geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
geo.add(new go.PathFigure(0, p1)
.add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
.add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w, h))
.add(new go.PathSegment(go.PathSegment.Line, 0, h).close()));
// don't intersect with two top corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
return geo;
});
go.Shape.defineFigureGenerator("RoundedBottomRectangle", function(shape, w, h) {
// this figure takes one parameter, the size of the corner
var p1 = 5; // default corner size
if (shape !== null) {
var param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
var geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
geo.add(new go.PathFigure(0, 0)
.add(new go.PathSegment(go.PathSegment.Line, w, 0))
.add(new go.PathSegment(go.PathSegment.Line, w, h - p1))
.add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, p1, h))
.add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()));
// don't intersect with two bottom corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, -0.3 * p1);
return geo;
});
// define a simple Node template
diagram.nodeTemplate =nodeTemplateDomV();
diagram.linkTemplate= GO(go.Link, go.Link.Orthogonal,
{ corner: 5, relinkableFrom: true, relinkableTo: true },
GO(go.Shape, { strokeWidth: 1.5, stroke: "#E5E6EB" }));
const myOverview =
GO(go.Overview, `diagram-overview${diagramId}`, // the HTML DIV element for the Overview
{
observed: diagram,
}
);
diagram.addModelChangedListener(function(evt) {
if(evt){
setCanUndo(true);
}
})
diagram.addDiagramListener('ObjectContextClicked',(a,b,c,d)=>{
})
diagram.addDiagramListener('ViewportBoundsChanged', (a, b, c, d, e, f) => {
})
getDiagramData(diagram);
var infoBoxH = document.getElementById(`infoBoxHolder${diagramId}`);
infoBoxH.addEventListener("mousemove", function() {
var box = document.getElementById(`infoBoxHolder${diagramId}`);
box.style.left = parseInt(box.style.left) + "px";
box.style.top = parseInt(box.style.top) + 30 + "px";
}, false);
}
const getDiagramData=()=>{
let param={
resPool:resPool,
dataDirection:'receive',
}
console.log('mock',mockData)
let resNew_=mockData;
diagramDom.model = go.Model.fromJson({
"class": "go.TreeModel",
"nodeDataArray": resNew_
});
return
setLoading(true);
getDiagramList(param).then(response=>{
setLoading(false);
let {data}=response;
let resNew=[];
let list=data.data||[];
if(data.code=='200' && list.length > 0){
list.forEach(item=>{
if(item.parentIsolationId){//根节点
let brokerIds=item.brokers||[];
resNew.push(
{
...item,
chlidIsolationType:item.childAlloType,//存在子级的选择的比例，broker ,平均
key:item.id,
isolationType:item.localAlloType||'',//存在本级选择的比例，broker ,平均
businessName:item.dimCatalogName,//业务名称
businessVal:item.dimName||'',//业务值
businessValCode:item.dimCode,
allocationRatio:item.localAlloType == '1'?true:false,//比例
allocationRatioText:item.percentage || 0,//比例值
broker:item.localAlloType == '2'?true:false,//broker
brokerText:brokerIds, //broker值
average:item.localAlloType == '3'?true:false,//平均分配
parent:item.parentIsolationId,
isShared:item.isShared?true:false,
"secondaryNot": true,
"total": item.totalPerc?true:false,
"totalVal": item.totalPerc || 0,
localIsPhysical:item.localIsPhysical=='true'? true: item.localIsPhysical == 'false' ? false :'',
childIsPhysical:item.childIsPhysical=='true'? true: item.childIsPhysical == 'false' ? false :'',
}
)
}else{
rootKey=item.id;
resNew.push({
...item,
"key":item.id,
root:true,
"name":resPoolName,
isolationType:item.localAlloType||'',
isShared:item.isShared?true:false,
chlidIsolationType:item.childAlloType,
localIsPhysical:item.localIsPhysical=='true'? true: item.localIsPhysical == 'false' ? false :'',
childIsPhysical:item.childIsPhysical=='true'? true: item.childIsPhysical == 'false' ? false :'',
source:group,
})
}
});
}else{
diagramDom.model = go.Model.fromJson({
"class": "go.TreeModel",
"nodeDataArray": diagramData
});
}
}).catch(err=>{
setLoading(false)
console.log(err);
diagramDom.model = go.Model.fromJson({
"class": "go.TreeModel",
"nodeDataArray": diagramData
});
})
}
const handleZoom = value => {
diagramDom.scale=value;
setScale(value);
};
const lessScale = () => {
let scaleVal = scale;
if (scaleVal >= 0.11) {
scaleVal -= 0.01;
}
handleZoom(scaleVal)
setScale(scaleVal);
};
const addScale = () => {
let scaleVal = scale;
if (scaleVal < 1) {
scaleVal += 0.01;
};
handleZoom(scaleVal);
setScale(scaleVal);
}
useEffect(()=>{
getBrokerList();
getRespoolTarget();
init();
},[])
const undo=()=>{
diagramDom.commandHandler.undo();
setCanUndo(diagramDom.commandHandler.canUndo());
setCanRedo(diagramDom.commandHandler.canRedo());
}
const redo=()=>{
diagramDom.commandHandler.redo();
setCanUndo(diagramDom.commandHandler.canUndo());
setCanRedo(diagramDom.commandHandler.canRedo());
}
const renovate=()=>{
diagramDom.clear();
getDiagramData();
}
// const broadwise=()=>{
// diagramDom.nodeTemplate=nodeTemplateDomH();
// diagramDom.layout.angle=0;
// }
const direction=()=>{
diagramDom.nodeTemplate=nodeTemplateDomV();
diagramDom.layout.angle=90;
}
const thumbnail=()=>{
setOverViewShow(!overViewShow);
}
const filterCode=(item)=>{
let businessName=item.businessName;
let dimCode='';
switch (businessName) {
case '源池':
return 'target_re';
case '业务类型':
return 'biz';
case '租户':
return 'tenant';
case '任务周期':
return 'batch_type' ;
default:
return dimCode;
}
}
const handelSave=()=>{
if(diagramDom){
let data= diagramDom.model.toJson();
let save_=JSON.parse(data);
const arr=save_.nodeDataArray;
console.log('arr---保存数据',arr)
let arr_=JSON.parse(JSON.stringify(arr));
let filterLocalAlloType=(itm)=>{
let val='';
if(itm.allocationRatio){
val='1';
}else if(itm.broker){
val='2';
}else if(itm.average){
val='3';
}else{
val=itm.isolationType?itm.isolationType:'1'
}
return val;
}
let paramData = arr_.map(item=>{
let obj={
'childAlloType':item.chlidIsolationType,
"id": item.key, //id
childIsPhysical:item.childIsPhysical,//子级的物理隔离
localIsPhysical:item.localIsPhysical,//这个本级的物理隔离
dataDirection:'receive',
isShared:item.isShared,
"resPoolCode": resPool,//资源池名称
"localAlloType": filterLocalAlloType(item), // 资源隔离类型 isolationType 1:比例，2：broker //---- 目前按比例（2）、平均分配（3）、固定broker（1）
"dimCatalogName": item.root?item.name:item.businessName||'', // 维度类型名称
"dimCatalogCode": filterCode(item), //维度类型编码
"dimName": item.businessVal || '',// 维度名称
"dimCode": item.businessValCode || '', // 维度编码
"percentage": item.allocationRatioText||'', //资源占比
"brokers": item.brokerText || [], // 资源分配brokerIds
"parentIsolationId": item.parent || '', //父节点id
"parentDimCode": "", //父节点维度编码
totalPerc:item.total?item.totalVal||'':'',
"isLogicGroup": false, //是否逻辑调度，当前，默认否
"isPhysics":"",//是否物理隔离（预留字段，当前为空）
"isExtend":"",//是否继承父级隔离规则（预留字段，当前为空）
"extConf":"", //配置详情（预留字段，当前为空）
"isolationAlg":"",//资源分配算法（预留字段，当前为空）
"isCompete":"",//是否允许资源抢占（预留字段，当前为空）
}
return obj;
})
console.log('paramData---保存数据',paramData);
// return
const param=[];
setLoading(true);
diagramAdd(paramData).then(res=>{
setLoading(false);
const { data }=res;
if(data.code=='200'){
Message.success('保存成功');
}else{
Message.error(data.msg);
}
}).catch(err=>{setLoading(false);console.log(err)})
}
}
const onValuesChange = (changeValue, values) => {
setFormData(values);
};
const isphysicsOnChange=(value)=>{
if((rootShow=='rootEidt'||rootShow=='childEidt' )&& formDataPhysics && formDataPhysics.isphysics !== value){
setIsShowTip(true);
// Message.warning('修改隔离类型将影响该子级的所有隔离类型，修改后将重新分配数据!')
}else{
setIsShowTip(false);
}
}
const rootSelectTypeOnChange=(value)=>{
if((rootShow=='rootEidt'||rootShow=='childEidt') && formDataPhysics && formDataPhysics.rootSelectType !== value){
// Message.warning('修改隔离类型将影响该子级的所有隔离类型，修改后将重新分配数据!')
setIsShowTip(true);
}else{
setIsShowTip(false);
}
}
return(
<div className='diagram-modal'>
<div className='page-tool-bar'>
{/* <div className="tool-bar-left">
<Tooltip position='bottom' content='回退'>
<IconUndo onClick={() => { undo() }} className={ canUndo ? 'canUndo': 'undo'} />
</Tooltip>
<Tooltip position='bottom' content='前进'>
<IconRedo onClick={() => { redo() }} className={canRedo ? 'canRedo': 'redo'} />
</Tooltip>
<Tooltip position='bottom' content='刷新'>
<IconSync onClick={() => { renovate() }} className='canRedo' />
</Tooltip>
<span className="split-line"></span>
<Tooltip position='bottom' content='放大'>
<IconEnlarge onClick={() => { addScale() }} className='canRedo' />
</Tooltip>
<Tooltip position='bottom' content='缩小'>
<IconReduce onClick={() => { lessScale() }} className='canRedo' />
</Tooltip>
<span className="split-line"></span>
<Tooltip position='bottom' content='横向'>
<IconMindMap onClick={() => { broadwise() }} className='canRedo' />
</Tooltip>
<Tooltip position='bottom' content='纵向'>
<IconNodeTree onClick={() => { direction() }} className='canRedo' />
</Tooltip>
<Tooltip position='bottom' content='缩略图'>
<IconEyeInvisible onClick={() => { thumbnail() }} className='canRedo' />
</Tooltip>
</div> */}
{/* <div className="tool-bar-right">
<Button type='secondary' className='rest' onClick={()=>renovate()}>重置</Button>
<Button type='primary' onClick={()=>handelSave()}>保存</Button>
</div> */}
</div>
<div className='page-tool-content'>
<Spin loading={loading}>
<div
id={`myDiagramDiv${diagramId}`}
ref={diagramRef}
className="diagram"
></div>
<div className={overViewShow?'overViewWrap rapshow':'overViewWrap rapnone'}>
<div id={`diagram-overview${diagramId}`} className="diagram-overview"></div>
<div className="oper">
<Button
className="less"
shape="circle"
size="mini"
type="text"
icon={<IconLessen style={{ fontSize: 16, color: '#165DFF' }} />}
onClick={lessScale}
></Button>
<Slider
className="slider"
value={scale}
min={0.1}
max={1}
step={0.01}
onChange={value => handleZoom(value)}
style={{ width: 75, margin: 10 }}
formatTooltip={value => `${Math.round(value * 100)}%`}
/>
<Button
className="add"
shape="circle"
size="mini"
type="text"
icon={<IconAdd style={{ fontSize: 16, color: '#165DFF' }} />}
onClick={addScale}
></Button>
<span className="text" style={{ color: ' #1D2129', marginLeft: 10 }}>
{Math.round(scale * 100)}%
</span>
</div>
</div>
<div id={`infoBoxHolder${diagramId}`} className="infoBoxHolder">
</div>
</Spin>
</div>
<Drawer
width={'60%'}
title={<span>节点信息</span>}
visible={visible}
className="diagram-drawer"
onOk={() => saveDrawer()}
onCancel={() => {
setVisible(false);
}}
afterClose={()=>{
setIsShowTip(false);
}}
>
<ModoTable
className="file-table"
loading={tabLoading}
checkStrictly={true}
pagination={false}
rowKey="logId"
columns={columns}
data={tabData}
scroll={{
x: false,
y: 'calc(100vh - 470px)',
}}
/>
</Drawer>
</div>
)
}
export default ReceiveDiagram;
style
index.less
.diagram-modal{
width: 100%;
height: calc(100% - 100px);
.page-tool-bar{
border-bottom: 1px solid #E5E6EB;
background: white;
padding: 4px 16px !important;
height: 35px!important;
.split-line {
display: inline-block;
height: 10px;
width: 1px;
background: #E5E6EB;
margin-top: 10px;
}
.tool-bar-right{
.rest{
margin-right: 12px;
}
}
}
.page-tool-content{
height: calc(100% - 50px);
.arco-spin{
height: 100%;
width: 100%;
.arco-spin-children{
height: 100%;
width: 100%;
}
}
.arco-spin-loading .arco-spin-children::after{
z-index: 2;
}
.diagram{
width:100%;
height: 100%;
background-color: #fff;
}
#container{
width:100%;
height: 500px;
background-color: #fff;
}
.infoBoxHolder {
z-index: 300;
position: absolute;
left: 5px;
// background-color: #1D2129;
padding: 5px;
border-radius: 2px;
}
// .infoBoxHolder::after{
// content: " ";
// position: absolute;
// top: 13%;
// left: 0%;
// margin-left: -5px;
// border-width: 5px;
// border-style: solid;
// border-color: transparent #1D2129 transparent transparent;
// }
#leftBorder{
position: absolute;
top: 13%;
left: 0%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #1D2129 transparent transparent;
}
#infoBox {
background-color: #1D2129;
color: white;
opacity: 0.9;
padding: 8px;
position: relative;
width: 165px;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
.infoValues{
float: left;
}
}
#infoBox:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.overViewWrap{
width: 186px;
height: 120px;
border-radius: 4px;
border: 1px solid #165DFF;
position: absolute !important;
bottom: 16px;
left: 16px;
// width: 204px;
// height: 180px;
background: #FFFFFF;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1000);
// border-radius: 4px;
// border: 1px solid #E5E6EB;
z-index: 999;
.diagram-overview {
// width: 180px;
// height: 118px;
// margin: 12px 12px 10px;
width: 100%;
height: 90px;
// height: 100%;
}
.oper{
margin: 10px 0;
display: flex;
// padding: 0 20px 12px;
align-items: center;
position: relative;
z-index: 999;
// .position{
// margin-right: 6px;
// }
.less{
position: absolute;
left: 10px;
line-height: 24px;
}
.slider{
position: absolute;
left: 30px;
}
.add{
position: absolute;
right: 45px;
line-height: 24px;
}
.text{
position: absolute;
right: 10px;
}
.arco-btn-text:not(.arco-btn-disabled):not(.arco-btn-loading):hover {
background-color: transparent;
}
}
}
.rapshow{
display: block;
}
.rapnone{
display: none;
}
.tooltip{
display: flex;
position: fixed;
align-items: center;
justify-content: center;
height: 34px;
width: 170px;
background-color: #000;
color: #fff;
visibility: hidden;
z-index: 100;
border-radius: 6px;
font-size: 12px;
}
.tooltip::after {
content: " ";
position: absolute;
top: 43%;
left: -2%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
}
.diagram-box{
// background: white;
// .diagram-tool-bar{
// height: 40px;
// line-height: 40px;
// margin: 0px 20px;
// border-bottom: 1px solid #E5E6EB;
// }
// cursor: pointer;
}
}
.trigger-class{
width: 150px;
// height: 20px;
background: white;
display: flex;
flex-direction: column;
text-align: center;
padding: 10px;
.arco-select-option{
list-style: none;
height: 30px;
line-height: 30px;
&:hover{
// color: white;
background-color: rgb( 242,243,245 );
}
}
}
.diagram-drawer{
.arco-spin{
width: 100%;
}
.tip{
height: 30px;
background: #E8F3FF;
line-height: 30px;
padding: 0px 10px;
display: -webkit-box;
align-items: center;
margin-bottom: 10px;
.arco-icon{
color: #165DFF;
padding-right: 5px;
}
.arco-typography{
line-height: 30px;
}
}
.title{
color: var(--color-text-2);
height: 30px;
}
.border-line{
width: 100%;
height: 0;
border-top: 1px solid var(--color-neutral-3);
padding-bottom: 8px;
margin-top: 10px;
}
.form-box{
.arco-form-item{
margin-bottom: 15px;
.arco-form-label-item{
margin-bottom: 5px;
cursor: pointer;
// position:absolute ;
}
}
.scale-item{
display: flex;
justify-content: space-between;
align-items: center;
.btn{
margin-left: 5px;
width: 30px;
height: 28px;
text-align: center;
line-height: 28px;
padding: 0px;
border-radius: 2px;
}
}
}
}
.modal-confirm-box{
padding: 20px 20px;
width: 500px;
.arco-modal-header{
display: none;
}
.arco-modal-content{
margin-top: 20px;
.arco-radio-button{
line-height: 28px;
}
}
.arco-modal-footer{
text-align: right;
margin-top: 0px;
}
}
index.css
/* .page-tool-bar{padding:7px 16px;height:28px}.page-tool-bar .tool-bar-right{text-align:right;display:inline-block;float:right;}.page-tool-bar .tool-bar-left{text-align:left;display:inline-grid;float:left;font-size:14px;grid-template-columns:14px 14px 14px 1px 14px 14px 1px 14px 1px 14px 14px 14px 14px 14px ;grid-column-gap:11px}.page-tool-bar .tool-bar-left .arco-btn-size-default{padding:0;font-size:12px;height:28px;border-radius:var(--border-radius-small)}.page-tool-bar .tool-bar-left .arco-btn span{margin-left:4px;color:#1D2129}.page-tool-bar .tool-bar-left .iconDelete{color:#FDCDC5}.page-tool-bar .tool-bar-left .canDelete{color:#F53F3F}.page-tool-bar .tool-bar-left .arco-icon,.page-tool-bar .tool-bar-left .moda-icon{height:28px;cursor:pointer}.page-tool-bar .tool-bar-left .moda-icon{color:#4E5969}.page-tool-bar .tool-bar-left .redo,.page-tool-bar .tool-bar-left .undo{color:#C9CDD4}.page-tool-bar .tool-bar-left .canUndo{color:#4E5969!important}.page-tool-bar .tool-bar-left .arco-input-group-wrapper .arco-input-inner-wrapper{height:28px}.page-tool-bar .tool-bar-left .arco-input-group-addafter,.page-tool-bar .tool-bar-left .arco-input-group-addbefore{height:28px;padding:0 6px;cursor:pointer}.page-tool-bar .tool-bar-left .arco-input-group-addafter svg,.page-tool-bar .tool-bar-left .arco-input-group-addbefore svg{color:#4E5969}.page-tool-bar .tool-bar-left .arco-input-number-step-button svg{width:10px}.page-tool-bar .tool-bar-left .arco-input-inner-wrapper{padding-left:17px;padding-right:17px}.page-tool-bar .tool-bar-left .split-line{display:inline-block;height:10px;width:1px;background:#E5E6EB;margin-top:10px} */
.page-tool-bar{
padding:7px 16px;
height:28px
}
.page-tool-bar .tool-bar-right{
text-align:right;
display:inline-block;
float:right;
}
.page-tool-bar .tool-bar-left{
text-align:left;
display:inline-grid;
float:left;
font-size:14px;
grid-template-columns:14px 14px 14px 1px 14px 14px 1px 14px 14px 14px;
grid-column-gap:11px
}
.page-tool-bar .tool-bar-left .arco-btn-size-default{
padding:0;
font-size:12px;
height:28px;
border-radius:var(--border-radius-small)
}
.page-tool-bar .tool-bar-left .arco-btn span{
margin-left:4px;
color:#1D2129
}
.page-tool-bar .tool-bar-left .iconDelete{
color:#FDCDC5
}
.page-tool-bar .tool-bar-left .canDelete{
color:#F53F3F
}
.page-tool-bar .tool-bar-left .arco-icon,.page-tool-bar .tool-bar-left .moda-icon{
height:28px;
cursor:pointer
}
.page-tool-bar .tool-bar-left .moda-icon{
color:#4E5969
}
.page-tool-bar .tool-bar-left .redo,.page-tool-bar .tool-bar-left .undo{
color:#C9CDD4
}
.page-tool-bar .tool-bar-left .canUndo{
color:#4E5969!important
}
.page-tool-bar .tool-bar-left .arco-input-group-wrapper .arco-input-inner-wrapper{
height:28px
}
.page-tool-bar .tool-bar-left .arco-input-group-addafter,.page-tool-bar .tool-bar-left .arco-input-group-addbefore{
height:28px;
padding:0 6px;
cursor:pointer
}
.page-tool-bar .tool-bar-left .arco-input-group-addafter svg,.page-tool-bar .tool-bar-left .arco-input-group-addbefore svg{
color:#4E5969
}
.page-tool-bar .tool-bar-left .arco-input-number-step-button svg{
width:10px
}
.page-tool-bar .tool-bar-left .arco-input-inner-wrapper{
padding-left:17px;
padding-right:17px
}
.page-tool-bar .tool-bar-left .split-line{
display:inline-block;
height:10px;
width:1px;
background:#E5E6EB;
margin-top:10px
}
mock.ts
import group from '../images/group.png';
export default [
{
"key":'1', //动态生成key
name:'node1',
dataNum:'23',
velocityFlow:5000,
other:'1/34/434/4343',
"parent":''
},
{
"key":'2', //动态生成key
name:'node2',
dataNum:300,
velocityFlow:5000,
other:'1/34/434/4343',
"parent":'1'
},
{
"key":'2-1', //动态生成key
name:'node3',
dataNum:300,
velocityFlow:5000,
other:'1/34/434/4343',
"parent":'1'
},
{
"key":'3-1', //动态生成key
name:'node4',
dataNum:300,
velocityFlow:5000,
other:'1/34/434/4343',
"parent":'2-1'
}
]
images 可以换成自己定义的，也可以不要，我这里是没有任何按钮，可以不要整个images的icon,utiils也是多余的代码，不需要，核心的代码就是上面的index,和less文件
浙公网安备 33010602011771号