index.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>TA Flow Builder</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="">
  8. <meta name="author" content="Gang Tao">
  9. <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
  10. <link rel="stylesheet" type="text/css" href="./css/bootstrap-treeview.min.css" />
  11. <link rel="stylesheet" type="text/css" href="./css/jsplumb.css" />
  12. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  13. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  14. <!--[if lt IE 9]>
  15. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  16. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  17. <![endif]-->
  18. <style type="text/css">
  19. html,
  20. body {
  21. /* padding-top: 60px;
  22. padding-bottom: 40px; */
  23. float: center;
  24. width: 100%;
  25. height: 99%;
  26. }
  27. .btn.active.focus,
  28. .btn.active:focus,
  29. .btn.focus,
  30. .btn:active.focus,
  31. .btn:active:focus,
  32. .btn:focus {
  33. outline: none;
  34. }
  35. .button {
  36. outline: none;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <div class="flow-fluid" style="height: 100%;">
  42. <div class="row" style="margin-top: 10px;margin-left: 0;margin-right: 0;">
  43. <button class="btn btn-primary button" style="margin-left:140px;" data-toggle="modal"
  44. data-target="#Modal">+</button>
  45. </div>
  46. <div class="row" style="margin: 0;height: 80%;">
  47. <!-- <div class="col-md-2">
  48. <div class="panel panel-default" style="margin:2px;height:400px">
  49. <div class="panel-body">
  50. <div id="control-panel">
  51. </div>
  52. </div>
  53. </div>
  54. </div> -->
  55. <div class="col-md-12" style="height:100%">
  56. <div class="panel1 panel-default" style="margin:0px;height:100%">
  57. <div class="panel-body" style="padding: 0;">
  58. <div id="flow-panel" class='col-md-12' style="height:100%">
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <!-- <div class="col-md-4">
  64. <div class="panel panel-default" style="margin:2px;height:400px">
  65. <div class="panel-body">
  66. Data Preview
  67. </div>
  68. </div>
  69. </div> -->
  70. </div>
  71. </div>
  72. <!-- 模态框(Modal) -->
  73. <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
  74. data-backdrop="static">
  75. <div class="modal-dialog" style="z-index: 1060;">
  76. <div class="modal-content">
  77. <div class="modal-header">
  78. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  79. <h4 class="modal-title" id="myModalLabel">添加节点类别</h4>
  80. </div>
  81. <div class="modal-body">
  82. <form role="form" id="bbb" onsubmit="return false">
  83. <!-- <div class="form-group">
  84. <input type="text" id="columns" class="form-control" placeholder="请输入第几列">
  85. </div> -->
  86. <div class="form-group">
  87. <label style="vertical-align: middle;display:inline-block;width: 100%;">1
  88. <input type="text" id="types1" class="form-control" placeholder="请输入节点类别名字"
  89. style="width: 92%;display:inline-block;" onkeydown="bbb()">
  90. </label>
  91. </div>
  92. </form>
  93. </div>
  94. <div class="modal-footer">
  95. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  96. <button type="button" class="btn btn-primary" id="SubmitB">提交更改</button>
  97. </div>
  98. </div><!-- /.modal-content -->
  99. </div><!-- /.modal -->
  100. </div>
  101. <!-- 模态框(Modal) -->
  102. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
  103. data-backdrop="static">
  104. <div class="modal-dialog" style="z-index: 1060;">
  105. <div class="modal-content">
  106. <div class="modal-header">
  107. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  108. <h4 class="modal-title" id="myModalLabel">添加节点</h4>
  109. </div>
  110. <div class="modal-body">
  111. <div>
  112. <input type="text" id="column" class="form-control" placeholder="请输入第几列" style="display:none" />
  113. </div>
  114. <form role="form" id="aaa" onsubmit="return false">
  115. <!-- <div class="row" style="margin-top: 10px;margin-left: 0;margin-right: 0;margin-bottom: 20px;">
  116. <button class="btn btn-primary button" onclick="addInput()">+</button>
  117. </div> -->
  118. <div class="form-group">
  119. <label style="vertical-align: middle;display:inline-block;width: 100%;">1
  120. <input type="text" id="names1" class="form-control" placeholder="请输入节点名字"
  121. style="width: 92%;display:inline-block;" onkeydown="addInput()">
  122. </label>
  123. </div>
  124. </form>
  125. </div>
  126. <div class="modal-footer">
  127. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  128. <button type="button" class="btn btn-primary" id="SubmitA">提交更改</button>
  129. </div>
  130. </div><!-- /.modal-content -->
  131. </div><!-- /.modal -->
  132. </div>
  133. <!-- <hr> -->
  134. <!-- <div class="footer">
  135. <div class="container">
  136. <p>Make Data Collecting Interesting :)</p>
  137. </div>
  138. </div> -->
  139. <script type='text/javascript'></script>
  140. <script type="text/javascript" src="./libs/jquery-1.11.1.min.js"></script>
  141. <script type="text/javascript" src="./libs/jquery-ui-1.9.2.min.js"></script>
  142. <script type="text/javascript" src="./libs/d3.min.js"></script>
  143. <script type="text/javascript" src="./libs/bootstrap.min.js"></script>
  144. <script type="text/javascript" src="./libs/bootstrap-treeview.min.js"></script>
  145. <script type="text/javascript" src="./libs/json2.js"></script>
  146. <script type="text/javascript" src="./libs/jquery.jsPlumb-1.7.2.js"></script>
  147. <script type="text/javascript" src="./libs/biltong-0.2.js"></script>
  148. <script type="text/javascript" src="./libs/jsBezier-0.6.js"></script>
  149. <script type="text/javascript" src="./main.js"></script>
  150. </body>
  151. </html>