other-list.php 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <?php
  2. include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_right.php");
  3. ?>
  4. <!doctype html>
  5. <html class="fixed sidebar-left-collapsed">
  6. <head>
  7. <!-- jstree CSS -->
  8. <link rel="stylesheet" href="/Common/assets/vendor/jstree/themes/default/style.css" />
  9. <?php include("bim-support-header.html"); ?>
  10. <script src="./script/js/global.js"></script>
  11. <script src="./script/js/pdfobject.min.js"></script>
  12. <script type="application/javascript">
  13. var url_href = window.location.href;
  14. var url = new URL(url_href);
  15. var type = url.searchParams.get("type");
  16. if (type === null) {
  17. window.location.href = "other-list.php?type=收費建議";
  18. }
  19. var userName = "<?php echo $_SESSION['name'] ?>";
  20. var role = "<?php echo ($groupName); ?>";
  21. var right = <?php echo ($right); ?>;
  22. var $grid;
  23. pageHeader = "BIM相關資源";
  24. </script>
  25. <style>
  26. .menu-item.active {
  27. color: #0088CC;
  28. }
  29. .jstree-anchor {
  30. width: 95%;
  31. text-overflow: ellipsis;
  32. overflow: hidden;
  33. white-space: nowrap;
  34. }
  35. th {
  36. text-align: center;
  37. width: 30%;
  38. font-size: 18px;
  39. }
  40. td {
  41. text-align: center;
  42. font-size: 18px;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <canvas id="c"></canvas>
  48. <section class="body">
  49. <!-- start: header -->
  50. <header-menu></header-menu>
  51. <!-- end: header -->
  52. <div class="inner-wrapper">
  53. <!-- start: sidebar -->
  54. <side-bar></side-bar>
  55. <!-- end: sidebar -->
  56. <section role="main" class="content-body">
  57. <header class="page-header">
  58. <h2>{{pageHeader}}</h2>
  59. </header>
  60. <!-- start: page -->
  61. <section class="content-with-menu content-with-menu-has-toolbar media-gallery">
  62. <div class="content-with-menu-container">
  63. <inner-menu>
  64. <template v-slot:inner-equipment>
  65. <other-list></other-list>
  66. </template>
  67. </inner-menu>
  68. <div class="inner-body mg-main">
  69. <div class="inner-toolbar">
  70. <ul>
  71. <search-bar></search-bar>
  72. <li id="reset" style="padding-top: 10px;">
  73. <div class="input-group input-search" style="table-layout: auto;">
  74. <button class="btn btn-primary" type="button" id="resetbtn" data-toggle="tooltip"><i class="fa fa-undo"></i></button>
  75. </div>
  76. </li>
  77. </ul>
  78. </div>
  79. <filter-content2></filter-content2>
  80. <div class="row">
  81. <div class="col-md-6">
  82. <section class="panel">
  83. <div class="panel-body">
  84. <h5 class="text-semibold text-dark text-uppercase">檔案下載</h5>
  85. <div id="treeAjaxHTML" style="height:400px;overflow: auto;"></div>
  86. </div>
  87. </section>
  88. <section class="panel">
  89. <div class="panel-body">
  90. <h5 class="text-semibold text-dark text-uppercase">檔案資訊</h5>
  91. <div id="fileTable" style="height:200px">
  92. <table class="table table-bordered mb-none" style="height: 100%;">
  93. <tbody>
  94. <tr>
  95. <th>檔案名稱</th>
  96. <td id="fileName"></td>
  97. </tr>
  98. <tr>
  99. <th>詳細資訊</th>
  100. <td id="fileDetail">尚未填寫</td>
  101. </tr>
  102. <tr>
  103. <th>檔案日期</th>
  104. <td id="fileDate"></td>
  105. </tr>
  106. <tr>
  107. <th>下載連結</th>
  108. <td id="fileLink"><a id="fileHerf" href="#" target="_blank"><i class="fa fa-download">檔案下載</i></a></td>
  109. </tr>
  110. </tbody>
  111. </table>
  112. </div>
  113. </div>
  114. </section>
  115. </div>
  116. <div class="col-md-6">
  117. <section class="panel">
  118. <div class="panel-body">
  119. <div id="pdfFile" style="height:720px"></div>
  120. </div>
  121. </section>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. </section>
  127. <!-- end: page -->
  128. </section>
  129. </div>
  130. </section>
  131. <?php include("bim-support-body.html"); ?>
  132. <script>
  133. vm.mount('.body');
  134. addUserImage(userName.charAt(0), role);
  135. $(document).ready(function() {
  136. PDFObject.embed("./assets/null.pdf", "#pdfFile");
  137. /*載入jstree */
  138. $('#treeAjaxHTML').jstree({
  139. 'core': {
  140. 'themes': {
  141. 'responsive': false
  142. },
  143. 'check_callback': true,
  144. 'data': {
  145. 'url': './script/php/getBIMData.php?folder=' + type, // 使用type獲取檔案目錄
  146. }
  147. },
  148. 'search': {
  149. 'show_only_matches': true,
  150. },
  151. 'types': { //依據檔案類型設定不同icon
  152. 'default': {
  153. 'icon': 'fa fa-folder'
  154. },
  155. 'file': {
  156. 'icon': 'fa fa-file-o'
  157. },
  158. 'pdf': {
  159. 'icon': 'fa fa-file-pdf-o'
  160. },
  161. 'word': {
  162. 'icon': 'fa fa-file-word-o'
  163. },
  164. 'excel': {
  165. 'icon': 'fa fa-file-excel-o'
  166. },
  167. 'ppt': {
  168. 'icon': 'fa fa-file-powerpoint-o'
  169. },
  170. 'f-open': {
  171. 'icon': 'fa fa-folder-open'
  172. },
  173. 'f-closed': {
  174. 'icon': 'fa fa-folder'
  175. }
  176. },
  177. 'plugins': ['types', 'search']
  178. }).on('select_node.jstree', function(event, data) {
  179. data.instance.toggle_node(data.node);
  180. //點選pdf時預覽
  181. if (data.node.text.includes(".pdf")) {
  182. PDFObject.embed(data.node.a_attr.href, "#pdfFile");
  183. } else {
  184. if (data.node.text.includes(".")) {
  185. PDFObject.embed("./assets/notPDF.pdf", "#pdfFile");
  186. }
  187. }
  188. //將檔案資訊填入下方表格
  189. if (data.node.text.includes(".")) {
  190. $("#fileName").empty();
  191. $("#fileName").append(data.node.text);
  192. $("#fileHerf").attr("href", data.node.a_attr.href);
  193. $("#fileDate").empty();
  194. $("#fileDate").append(data.node.a_attr.time);
  195. }
  196. }).bind('loaded.jstree', function(e, data) {});
  197. $("#treeAjaxHTML").on('open_node.jstree', function(event, data) {
  198. data.instance.set_type(data.node, 'f-open');
  199. });
  200. $("#treeAjaxHTML").on('close_node.jstree', function(event, data) {
  201. data.instance.set_type(data.node, 'f-closed');
  202. });
  203. });
  204. // 搜尋jstree
  205. $("#resetbtn").on('click', function(event) {
  206. $("#treeAjaxHTML").jstree("clear_search");
  207. $("#quicksearch").val('');
  208. })
  209. $("#searchBtn").on('click', function(event) {
  210. var search = $("#quicksearch").val();
  211. $("#treeAjaxHTML").jstree("search", search);
  212. })
  213. $("#quicksearch").on('keyup', function(e) {
  214. if (e.key === 'Enter' || e.keyCode === 13) {
  215. var search = $("#quicksearch").val();
  216. $("#treeAjaxHTML").jstree("search", search);
  217. }
  218. });
  219. $('[data-toggle="tooltip"]').tooltip({
  220. container: "body",
  221. placement: "right",
  222. title: "重置搜尋結果"
  223. });
  224. </script>
  225. <script src="/Common/assets/vendor/jstree/jstree.js"></script>
  226. </body>
  227. </html>