|
|
@@ -6,35 +6,104 @@
|
|
|
<div id="stencil"></div>
|
|
|
</Sider>
|
|
|
<Layout>
|
|
|
- <!-- 顶部工具栏 -->
|
|
|
- <Header class="header">
|
|
|
- <div style="display: flex;align-items: center;margin-right: 50px">
|
|
|
- <Button @click="()=>{this.graph.exportPNG('',{padding:50})}">导出PNG</Button>
|
|
|
- <Button @click="exportJson" style="margin-left:10px;">导出JSON</Button>
|
|
|
- <Upload action="" accept=".json" :before-upload="uploadJson">
|
|
|
- <Button style="margin:7px 0 0 10px;">导入JSON</Button>
|
|
|
- </Upload>
|
|
|
- </div>
|
|
|
- <div style="min-width: 800px">
|
|
|
- <Tag color="blue">方向键移动</Tag>
|
|
|
- <Tag color="blue">右键画布拖动</Tag>
|
|
|
- <Tag color="blue">ctrl+C 复制</Tag>
|
|
|
- <Tag color="blue">ctrl+X 剪切</Tag>
|
|
|
- <Tag color="blue">ctrl+V 粘贴</Tag>
|
|
|
- <Tag color="blue">ctrl+X 撤销</Tag>
|
|
|
- <Tag color="blue">ctrl+shift+Z 撤回撤销</Tag>
|
|
|
- <Tag color="blue">ctrl+alt+A 全选</Tag>
|
|
|
- <Tag color="blue">del 删除</Tag>
|
|
|
- </div>
|
|
|
- </Header>
|
|
|
<!-- 中间流程图 -->
|
|
|
<Content>
|
|
|
<div id="container" ref="container" style="width:100%;height:100%"/>
|
|
|
</Content>
|
|
|
<!-- 底部按钮 -->
|
|
|
<Footer class="footer">
|
|
|
- <DkButton style="margin-right: 10px;" ref="save" type="primary" @click="save">{{ $t('save') }}</DkButton>
|
|
|
- <DkButton ref="close" @click="close('/process/process-flow/index')">{{ $t('close') }}</DkButton>
|
|
|
+ <div class="tools">
|
|
|
+ <Poptip trigger="hover" >
|
|
|
+ <Button icon="ios-bulb"></Button>
|
|
|
+ <div slot="content" style="background: #f8f8f9">
|
|
|
+ <Card title="快捷键说明" icon="ios-options" :padding="0" shadow style="width: 300px;">
|
|
|
+ <CellGroup>
|
|
|
+ <Cell title="整体移动画布" extra="右键按住空白处拖动" />
|
|
|
+ <Cell title="多选" extra="左键按住空白处拖动" />
|
|
|
+ <Cell title="放大">
|
|
|
+ <div slot="extra" style="display: flex;align-items: center">
|
|
|
+ <div class="key">Ctrl</div>
|
|
|
+ <div class="key">Alt</div>
|
|
|
+ <div class="key">+</div>
|
|
|
+ <div style="padding-left:3px">或</div>
|
|
|
+ <div class="key">Ctrl</div>
|
|
|
+ <div style="padding-left:3px">+ 鼠标滚轮</div>
|
|
|
+ </div>
|
|
|
+ </Cell>
|
|
|
+ <Cell title="缩小">
|
|
|
+ <div slot="extra" style="display: flex">
|
|
|
+ <div class="key">Ctrl</div>
|
|
|
+ <div class="key">Alt</div>
|
|
|
+ <div class="key">-</div>
|
|
|
+ <div style="padding-left:3px">或</div>
|
|
|
+ <div class="key">Ctrl</div>
|
|
|
+ <div style="padding-left:3px">+ 鼠标滚轮</div>
|
|
|
+ </div>
|
|
|
+ </Cell>
|
|
|
+ <Cell title="复制">
|
|
|
+ <div slot="extra" style="display: flex">
|
|
|
+ <div class="key">Ctrl</div>
|
|
|
+ <div class="key">C</div>
|
|
|
+ </div>
|
|
|
+ </Cell>
|
|
|
+ <Cell title="剪切">
|
|
|
+ <div slot="extra" style="display: flex">
|
|
|
+ <div class="key">Ctrl</div>
|
|
|
+ <div class="key">X</div>
|
|
|
+ </div>
|
|
|
+ </Cell>
|
|
|
+ <Cell title="粘贴">
|
|
|
+ <div slot="extra" style="display: flex">
|
|
|
+ <div class="key">Ctrl</div>
|
|
|
+ <div class="key">V</div>
|
|
|
+ </div>
|
|
|
+ </Cell>
|
|
|
+ <Cell title="撤销">
|
|
|
+ <div slot="extra" style="display: flex">
|
|
|
+ <div class="key">Ctrl</div>
|
|
|
+ <div class="key">Z</div>
|
|
|
+ </div>
|
|
|
+ </Cell>
|
|
|
+ <Cell title="撤回撤销">
|
|
|
+ <div slot="extra" style="display: flex">
|
|
|
+ <div class="key">Ctrl</div>
|
|
|
+ <div class="key">Shift</div>
|
|
|
+ <div class="key">Z</div>
|
|
|
+ </div>
|
|
|
+ </Cell>
|
|
|
+ <Cell title="全选">
|
|
|
+ <div slot="extra" style="display: flex">
|
|
|
+ <div class="key">Ctrl</div>
|
|
|
+ <div class="key">Alt</div>
|
|
|
+ <div class="key">A</div>
|
|
|
+ </div>
|
|
|
+ </Cell>
|
|
|
+ <Cell title="删除">
|
|
|
+ <div slot="extra" style="display: flex">
|
|
|
+ <div class="key">Del</div>
|
|
|
+ </div>
|
|
|
+ </Cell>
|
|
|
+
|
|
|
+ </CellGroup>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ </Poptip>
|
|
|
+ <Tooltip content="导出PNG">
|
|
|
+ <Button icon="ios-camera" @click="()=>{this.graph.exportPNG('',{padding:50})}"></Button>
|
|
|
+ </Tooltip>
|
|
|
+ <Tooltip content="导出JSON">
|
|
|
+ <Button icon="ios-cloud-download" @click="exportJson"></Button>
|
|
|
+ </Tooltip>
|
|
|
+ <Tooltip content="导入JSON">
|
|
|
+ <Upload action="" accept=".json" :before-upload="uploadJson">
|
|
|
+ <Button icon="ios-cloud-upload"></Button>
|
|
|
+ </Upload>
|
|
|
+ </Tooltip>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <DkButton style="margin-right: 10px;" ref="save" type="primary" @click="save">{{ $t('save') }}</DkButton>
|
|
|
+ <DkButton ref="close" @click="close('/process/process-flow/index')">{{ $t('close') }}</DkButton>
|
|
|
+ </div>
|
|
|
</Footer>
|
|
|
</Layout>
|
|
|
</Layout>
|
|
|
@@ -433,16 +502,56 @@ export default {
|
|
|
}
|
|
|
|
|
|
/deep/ .ivu-layout-header {
|
|
|
- height: 52px !important;
|
|
|
+ height: 552px !important;
|
|
|
line-height: 52px !important;
|
|
|
}
|
|
|
|
|
|
.footer {
|
|
|
- background: #ededed;
|
|
|
+ background: #fff;
|
|
|
display: flex;
|
|
|
- justify-content: right;
|
|
|
- padding: 10px 50px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 30px;
|
|
|
}
|
|
|
+.key{
|
|
|
+ align-items: center;
|
|
|
+ background-image: linear-gradient(180deg,#f2f4f5,#fff);
|
|
|
+ border: 1px solid #d1d5d9;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 1px 0 0 #b8bfc4, inset 0 2px 0 0 #fff;
|
|
|
+ color: #666;
|
|
|
+ display: flex;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ height: 20px;
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 5px;
|
|
|
+ min-width: 20px;
|
|
|
+ padding: 0 5px;
|
|
|
+}
|
|
|
+/deep/ .ivu-card-head{
|
|
|
+ padding: 7px 8px!important;
|
|
|
+}
|
|
|
+/deep/ .ivu-cell{
|
|
|
+ padding: 3px 8px!important;
|
|
|
+}
|
|
|
+/deep/ .ivu-cell-group{
|
|
|
+ padding: 2px 0 !important;
|
|
|
+}
|
|
|
+/deep/ .ivu-btn-icon-only{
|
|
|
+ padding: 0 !important;
|
|
|
+ font-size: 28px!important;
|
|
|
+ width: 48px!important;
|
|
|
+ height: 48px!important;
|
|
|
+ /*border: none!important;*/
|
|
|
+ /*border-radius:0px!important;*/
|
|
|
+}
|
|
|
+/deep/ .ivu-tooltip{
|
|
|
+ height: 48px!important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</style>
|
|
|
|
|
|
|
