| | |
|---|
| | | <template> |
|---|
| | | <el-main> |
|---|
| | | <el-main style="overflow:auto;padding: 0px;height: 90vh"> |
|---|
| | | <div class="scale"> |
|---|
| | | <el-button icon="el-icon-plus" size="small" @click="scale += 10" :disabled="scale >= 150" circle></el-button> |
|---|
| | | <span>{{ scale }}%</span> |
|---|
| | | <el-button icon="el-icon-minus" size="small" @click="scale -= 10" :disabled="scale <= 40" circle></el-button> |
|---|
| | | </div> |
|---|
| | | <div class="design" :style="'transform: scale('+ scale / 100 +');'"> |
|---|
| | | <div class="design" :style="'transform: scale('+ scale / 100 +');transform-origin:left top'"> |
|---|
| | | <process-tree-viewer ref="process-tree" @selectedNode="nodeSelected"/> |
|---|
| | | </div> |
|---|
| | | <el-drawer :title="selectedNode.name" :visible.sync="showConfig" |
|---|
| | |
|---|
| | | components: { ProcessTreeViewer,NodeConfig }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | scale: 100, |
|---|
| | | scale: 90, |
|---|
| | | selected: {}, |
|---|
| | | showInput: false, |
|---|
| | | showConfig: false |
|---|
| | |
|---|
| | | }, |
|---|
| | | computed:{ |
|---|
| | | selectedNode(){ |
|---|
| | | console.log("ProcessDiagramViewer-selectedNode",this.$store.state) |
|---|
| | | return this.$store.state.selectedNode |
|---|
| | | } |
|---|
| | | }, |
|---|
| | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | test(){ |
|---|
| | | console.log("test") |
|---|
| | | }, |
|---|
| | | validate(){ |
|---|
| | | return this.$refs["process-tree"].validateProcess() |
|---|
| | | }, |
|---|
| | | nodeSelected(node){ |
|---|
| | | console.log('配置节点bbb', node) |
|---|
| | | this.showConfig = true |
|---|
| | | } |
|---|
| | | }, |
|---|
