123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 |
- <!DOCTYPE html>
- <html >
- <head>
- <meta charset="utf-8" />
- <title>在线绘制流程</title>
- <link rel="icon" href="favicon.ico">
- <link rel="stylesheet" href="css/diagram-js.css" />
- <link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
- <link rel="stylesheet" href="css/app.css" />
- <style>
- .item{
- display: none;
- cursor: pointer;
- }
- .bjs-powered-by {
- display: none;
- }
- .buttons > li {
- /* display: inline-block; */
- margin-right: 10px;
- height: 26px;
- line-height: 26px;
- float: left;
- }
- .buttons > li > a.btn {
- background: #00BCD4;
- border: none;
- outline: none;
- padding: 0px 10px;
- color: #fff;
- display: inline-block;
- opacity: 1;
- height: 26px;
- font-size: 14px;
- line-height: 26px;
- }
- .label {
- background: #00BCD4;
- border: none;
- outline: none;
- padding: 0px 10px;
- color: #fff;
- display: inline-block;
- cursor: pointer;
- opacity: 1;
- height: 26px;
- font-size: 14px;
- line-height: 26px;
- }
- .sy-mask{width:100%;
- height:100%;
- position:fixed;
- background:rgba(0,0,0,0.8);
- left:0;top:0;z-index:1000;
- display: none;
- }
- .sy-alert{
- position:fixed;display:none;background:#fff;border-radius:5px;overflow:hidden;width:300px;max-width:90%;max-height:80%;left:0;right:0;margin:0 auto;z-index:9999}.sy-alert.animated{-webkit-animation-duration:.3s;animation-duration:.3s}.sy-alert .sy-title{height:45px;color:#333;line-height:45px;font-size:15px;border-bottom:1px solid #eee;padding:0 12px}.sy-alert .sy-content{padding:20px;text-align:center;font-size:14px;line-height:24px;color:#666;overflow-y:auto}.sy-alert .sy-btn{height:50%;border-top:1px solid #eee;overflow:hidden}.sy-alert .sy-btn button{float:left;border:0;color:#333;cursor:pointer;background:#fff;width:50%;line-height:45px;font-size:15px;text-align:center}.sy-alert .sy-btn button:nth-child(1){color:#888;border-right:1px solid #eee}.sy-alert.sy-alert-alert .sy-btn button{float:none;width:100%}.sy-alert.sy-alert-tips{text-align:center;width:150px;background:rgba(0,0,0,0.7)}.sy-alert.sy-alert-tips .sy-content{padding:8px;color:#fff;font-size:14px}.sy-alert.sy-alert-model .sy-content{text-align:left}.sy-alert.sy-alert-model .sy-content .form .input-item{margin-bottom:12px;position:relative}.sy-alert.sy-alert-model .sy-content .form .input-item input{display:block;position:relative;width:100%;border:1px solid #eee;padding:10px}.sy-alert.sy-alert-model .sy-content .form .input-item .getcode{border:0;top:0;right:0;position:absolute;background:0;line-height:37px;color:#f60;width:100px;text-align:center}
- </style>
- </head>
- <body>
- <div class="content with-diagram" id="js-drop-zone">
- <div class="message error">
- <div class="note">
- <p>无法显示bpms2.0</p>
- <div class="details">
- <span>错误详细信息</span>
- <pre></pre>
- </div>
- </div>
- </div>
- <div class="canvas" id="js-canvas"></div>
- <div class="properties-panel-parent" id="js-properties-panel"></div>
- </div>
- <ul class="buttons">
- <li class="item upload">
- <form id="form1" name="myForm" onsubmit="return false" method="post" enctype="multipart/form-data" title="上传文件">
- <input type="file" name="uploadFile" id="uploadFile" accept=".bpmn">
- <label class="label" for="uploadFile" >导入</label>
- </form>
- </li>
- <li class="item download">
- <a class="btn" href id="downloadBpmn">导出</a>
- </li>
- <li class="item submit">
- <a class="btn" id="js-download-diagram">
- 部署
- </a>
- </li>
- </ul>
- <div class="sy-alert sy-alert-model animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert" >
- <div class="sy-title">部署流程</div>
- <div class="sy-content">
- 确认是否部署该流程
- <!-- <div class="form">-->
- <!-- <p class="input-item"><input id="deploymentName" type="text" placeholder="请输入流程名称"></p>-->
- <!-- </div>-->
- </div>
- <div class="sy-btn">
- <button id="sure">确定</button>
- <button class="cancel" >取消</button>
- </div>
- </div>
- <div class="sy-mask cancel"></div>
- <script src="index.js"></script>
- </body>
- </html>
|