index.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!DOCTYPE html>
  2. <html >
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>在线绘制流程</title>
  6. <link rel="icon" href="favicon.ico">
  7. <link rel="stylesheet" href="css/diagram-js.css" />
  8. <link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
  9. <link rel="stylesheet" href="css/app.css" />
  10. <style>
  11. .item{
  12. display: none;
  13. cursor: pointer;
  14. }
  15. .bjs-powered-by {
  16. display: none;
  17. }
  18. .buttons > li {
  19. /* display: inline-block; */
  20. margin-right: 10px;
  21. height: 26px;
  22. line-height: 26px;
  23. float: left;
  24. }
  25. .buttons > li > a.btn {
  26. background: #00BCD4;
  27. border: none;
  28. outline: none;
  29. padding: 0px 10px;
  30. color: #fff;
  31. display: inline-block;
  32. opacity: 1;
  33. height: 26px;
  34. font-size: 14px;
  35. line-height: 26px;
  36. }
  37. .label {
  38. background: #00BCD4;
  39. border: none;
  40. outline: none;
  41. padding: 0px 10px;
  42. color: #fff;
  43. display: inline-block;
  44. cursor: pointer;
  45. opacity: 1;
  46. height: 26px;
  47. font-size: 14px;
  48. line-height: 26px;
  49. }
  50. .sy-mask{width:100%;
  51. height:100%;
  52. position:fixed;
  53. background:rgba(0,0,0,0.8);
  54. left:0;top:0;z-index:1000;
  55. display: none;
  56. }
  57. .sy-alert{
  58. 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}
  59. </style>
  60. </head>
  61. <body>
  62. <div class="content with-diagram" id="js-drop-zone">
  63. <div class="message error">
  64. <div class="note">
  65. <p>无法显示bpms2.0</p>
  66. <div class="details">
  67. <span>错误详细信息</span>
  68. <pre></pre>
  69. </div>
  70. </div>
  71. </div>
  72. <div class="canvas" id="js-canvas"></div>
  73. <div class="properties-panel-parent" id="js-properties-panel"></div>
  74. </div>
  75. <ul class="buttons">
  76. <li class="item upload">
  77. <form id="form1" name="myForm" onsubmit="return false" method="post" enctype="multipart/form-data" title="上传文件">
  78. <input type="file" name="uploadFile" id="uploadFile" accept=".bpmn">
  79. <label class="label" for="uploadFile" >导入</label>
  80. </form>
  81. </li>
  82. <li class="item download">
  83. <a class="btn" href id="downloadBpmn">导出</a>
  84. </li>
  85. <li class="item submit">
  86. <a class="btn" id="js-download-diagram">
  87. 部署
  88. </a>
  89. </li>
  90. </ul>
  91. <div class="sy-alert sy-alert-model animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert" >
  92. <div class="sy-title">部署流程</div>
  93. <div class="sy-content">
  94. 确认是否部署该流程
  95. <!-- <div class="form">-->
  96. <!-- <p class="input-item"><input id="deploymentName" type="text" placeholder="请输入流程名称"></p>-->
  97. <!-- </div>-->
  98. </div>
  99. <div class="sy-btn">
  100. <button id="sure">确定</button>
  101. <button class="cancel" >取消</button>
  102. </div>
  103. </div>
  104. <div class="sy-mask cancel"></div>
  105. <script src="index.js"></script>
  106. </body>
  107. </html>