123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- <template>
- <div ref="rightDrawer" class="right-drawer">
- <div ref="miniMap" class="drawer-map"></div>
- <div class="right-drawer-content">
- <div class="right-drawer-title">属性面板</div>
- <div class="right-drawer-body">
- <div class="right-drawer-body-item">
- <div class="right-drawer-body-item-title">节点名称</div>
- <div class="right-drawer-body-item-content">
- <input class="normal-input" type="text" v-model="drawerNode.nodeText" @change="changeNodeText"/>
- </div>
- </div>
- <div class="right-drawer-body-item">
- <div class="right-drawer-body-item-title">线条文本</div>
- <div class="right-drawer-body-item-content">
- <input class="normal-input" type="text" v-model="drawerEdge.edgeText" @change="changeEdgeText"/>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- props: {
- drawerType: {
- type: String,
- default: 'grid'
- },
- selectCell: {
- type: Object | String,
- default: () => {}
- },
- graph: {
- type: Object | String,
- default: () => {}
- },
- grid: {
- type: Object
- },
- },
- data() {
- return {
- drawerNode: {
- fill: '',
- nodeText: '',
- fontSize: null,
- fontFill: '',
- strokeWidth: null,
- stroke: '',
- //其它参数
- nodeType: '',
- entityId: '',
- itemId: '',
- flowNodeType: '',
- groupIdentify: '',
- childFlowIdentify: '',
- methodName: '',
- methodParams: '',
- methodType: '',
- hasMethodParams: false,
- methodExp: '',
- flowJudges: [],
- // isJudgeNode: '0'
- },
- drawerEdge: {
- isCondition: false,
- edgeText: '',
- edgeSelect: true,
- edgeWidth: null,
- edgeColor: ''
- },
- }
- },
- watch: {
- selectCell: {
- handler(val) {
- if (val) {
- if (val.isNode()) { //节点
- this.drawerNode.fill = val.store.data.attrs.body.fill;
- this.drawerNode.nodeText = val.store.data.attrs.label.text;
- this.drawerNode.fontFill = val.store.data.attrs.label.fill;
- this.drawerNode.fontSize = Number(val.store.data.attrs.label.fontSize);
- this.drawerNode.strokeWidth = Number(val.store.data.attrs.body.strokeWidth);
- this.drawerNode.stroke = val.store.data.attrs.body.stroke;
- this.drawerNode.nodeType = val.store.data.attrs.nodeData.type;
- const flowNode = val.store.data.attrs.nodeData.flowNode;
- this.drawerNode.entityId = flowNode.entityId;
- this.drawerNode.itemId = flowNode.itemId;
- this.drawerNode.flowNodeType = flowNode.flowNodeType;
- this.drawerNode.groupIdentify = flowNode.groupIdentify;
- this.drawerNode.childFlowIdentify = flowNode.childFlowIdentify;
- this.drawerNode.methodExp = flowNode.methodExp;
- this.drawerNode.methodType = flowNode.methodType;
- this.drawerNode.flowJudges = flowNode.flowJudges;
- } else { //边
- this.drawerEdge.edgeText = val.store.data.labels ? val.store.data.labels[0].text != undefined ? val.store.data.labels[0].text : val.store.data.labels[0].attrs.label.text : '';
- console.log('his.drawerEdge.edgeText',this.drawerEdge.edgeText)
- this.drawerEdge.edgeWidth = Number(val.store.data.attrs.line.strokeWidth);
- this.drawerEdge.edgeColor = val.store.data.attrs.line.stroke;
- //处理条件连线
- let sourceNode = this.graph.getCellById(val.store.data.source.cell);
- // console.log(sourceNode, val)
- //判断源节点是否为条件节点
- // if (sourceNode.store.data.attrs.nodeData.type === 'polygon') {
- // this.drawerEdge.isCondition = true;
- // if (this.drawerEdge.edgeText === '') {
- // this.drawerEdge.edgeText = this.drawerEdge.edgeSelect ? '是' : '否';
- // //修改线条文本
- // this.changeEdgeText();
- // }
- // this.drawerEdge.edgeSelect = this.drawerEdge.edgeText === '是' ? true : false;
- // } else {
- // this.drawerEdge.isCondition = false;
- // }
- }
- }
- },
- immediate: true,
- deep: false
- },
- },
- methods: {
- // 节点设置
- changeNodeText() {
- this.selectCell.attr('label/text', this.drawerNode.nodeText);
- },
- // 边设置
- changeEdgeText() {
- // console.log(this.drawerEdge.edgeText);
- this.selectCell.setLabels(
- [{ attrs: { label: { text: this.drawerEdge.edgeText } } }]
- )
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .right-drawer{
- margin-left: 20px;
- flex: 1;
- .drawer-map{
- height: 150px;
- }
- .right-drawer-content{
- margin-top: 20px;
- .right-drawer-title{
- font-size: 16px;
- font-weight: bold;
- line-height: 30px;
- background-color: #e5f1f1;
- }
- .right-drawer-body-item-title{
- line-height: 24px;
- }
- .normal-input{
- width: 200px;
- padding: 5px 10px;
- }
- }
- }
- </style>
|