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