|
|
@@ -1,6 +1,11 @@
|
|
|
<template>
|
|
|
<div class="sc-workflow-design">
|
|
|
- <div class="box-scale">
|
|
|
+ <div class="zoom-scale">
|
|
|
+ <el-button circle icon="plus" :disabled="zoom >= 150" @click="onZoom(1)" />
|
|
|
+ <span>{{ zoom }}%</span>
|
|
|
+ <el-button circle icon="minus" :disabled="zoom <= 40" @click="onZoom(-1)" />
|
|
|
+ </div>
|
|
|
+ <div class="box-scale" :style="`transform: scale(${zoom / 100})`">
|
|
|
<node-wrap v-if="nodeConfig" v-model="nodeConfig" :disabled="disabled"></node-wrap>
|
|
|
<div class="node-wrap">
|
|
|
<div class="node-wrap-box node-wrap-box--disabled end-node" :class="[`node-wrap-box--${nodeConfig.lastNode_local_status}`]">
|
|
|
@@ -47,6 +52,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ zoom: 100,
|
|
|
nodeConfig: this.modelValue,
|
|
|
selectVisible: false,
|
|
|
activeSelected: [] /*,
|
|
|
@@ -77,6 +83,14 @@ export default {
|
|
|
this.$nextTick(() => {
|
|
|
this.$refs.useselect.open(type, data)
|
|
|
})
|
|
|
+ },
|
|
|
+ onZoom(n) {
|
|
|
+ this.zoom += 10 * n
|
|
|
+ if (this.zoom <= 40) {
|
|
|
+ this.zoom = 40
|
|
|
+ } else if (this.zoom >= 150) {
|
|
|
+ this.zoom = 150
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -85,7 +99,26 @@ export default {
|
|
|
<style lang="scss">
|
|
|
.sc-workflow-design {
|
|
|
height: 100%;
|
|
|
+ background: #f6f8f9;
|
|
|
//width: 100%;
|
|
|
+
|
|
|
+ .box-scale {
|
|
|
+ transform-origin: 50% 0px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zoom-scale {
|
|
|
+ z-index: 999;
|
|
|
+ position: fixed;
|
|
|
+ top: 178px;
|
|
|
+ right: 40px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin: 0 10px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #7a7a7a;
|
|
|
+ width: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.sc-workflow-design .box-scale {
|
|
|
display: inline-block;
|
xlsea