component-detail.php 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  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. <?php include("bim-support-header.html"); ?>
  8. <script src="./script/js/global.js"></script>
  9. <script>
  10. var isFavorite = false;
  11. var revitVersion = "";
  12. var url_href = window.location.href;
  13. var url = new URL(url_href);
  14. name = url.searchParams.get("object");
  15. parent = url.searchParams.get("parent");
  16. var userName = "<?php echo $_SESSION['name'] ?>";
  17. var role = "<?php echo ($groupName); ?>";
  18. var right = <?php echo ($right); ?>;
  19. var header = [];
  20. var sizeHeader = [];
  21. var value = [];
  22. var sizeValue = [];
  23. pageHeader = "元件庫";
  24. </script>
  25. <style>
  26. .hide-image {
  27. display: none;
  28. }
  29. .preview:hover .hide-image {
  30. display: block;
  31. position: absolute;
  32. padding: 8px;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <section class="body">
  38. <!-- start: header -->
  39. <header-menu></header-menu>
  40. <!-- end: header -->
  41. <div class="inner-wrapper">
  42. <!-- start: sidebar -->
  43. <side-bar></side-bar>
  44. <!-- end: sidebar -->
  45. <section role="main" class="content-body">
  46. <header class="page-header">
  47. <h2>{{pageHeader}}</h2>
  48. </header>
  49. <!-- start: page -->
  50. <section class="content-with-menu content-with-menu-has-toolbar media-gallery">
  51. <div class="content-with-menu-container">
  52. <inner-menu>
  53. <template v-slot:inner-equipment>
  54. <equipment-list></equipment-list>
  55. </template>
  56. </inner-menu>
  57. <div class="inner-body mg-main">
  58. <div class="inner-toolbar">
  59. <ul>
  60. <li>
  61. <label>
  62. <span id="insertComponentName" style="font-size: 30px; color: white;"></span>
  63. </label>
  64. </li>
  65. <li class="right">
  66. <a href="#" onclick="goBack()"><i class="fa fa-undo"></i> 返回</a>
  67. </li>
  68. <li class="right">
  69. <div style="cursor: pointer;" onclick="AddFavorite();"><i id="heart" class="fa fa-heart"></i><span id="favorite"> 加入清單</span></div>
  70. </li>
  71. </ul>
  72. </div>
  73. <div class="row">
  74. <div class="col-md-6">
  75. <div class="tabs">
  76. <ul class="nav nav-tabs nav-justified">
  77. <li class="active">
  78. <a href="#content" data-toggle="tab" class="text-center">3D元件模型</a>
  79. </li>
  80. <li>
  81. <a href="#2D-TAB" data-toggle="tab" class="text-center">2D圖例</a>
  82. </li>
  83. </ul>
  84. <div class="tab-content">
  85. <div id="content" class="tab-pane active" style="width:100%; position: relative; padding: 0 0 0;">
  86. </div>
  87. <div id="2D-TAB" class="tab-pane" style="overflow: auto;">
  88. <img id="2DImage" style="width: 100%; aspect-ratio: 1 / 1;" onerror="this.src='./assets/images/not-found-2D-image.png'">
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. <div class="col-md-6">
  94. <section class="panel">
  95. <div class="panel-body" style="padding: 0px;">
  96. <div class="table-responsive">
  97. <table class="table table-bordered mb-none">
  98. <tbody id="table">
  99. </tbody>
  100. </table>
  101. </div>
  102. </div>
  103. </section>
  104. <h3>尺寸:</h3>
  105. <section class="panel">
  106. <div class="panel-body" style="padding: 0px;">
  107. <div class="table-responsive">
  108. <table class="table table-bordered mb-none">
  109. <tbody id="sizeTable">
  110. </tbody>
  111. </table>
  112. </div>
  113. </div>
  114. </section>
  115. </div>
  116. </div>
  117. </div>
  118. </section>
  119. <!-- end: page -->
  120. </section>
  121. </div>
  122. </section>
  123. <script>
  124. /*Vue */
  125. vm.mount('.body');
  126. addUserImage(userName.charAt(0), role);
  127. </script>
  128. <?php include("bim-support-body.html"); ?>
  129. <script>
  130. $(document).ready(function() {
  131. $.ajax({
  132. url: "./script/php/equipment_group_detail.php",
  133. type: "GET",
  134. data: {
  135. object: name,
  136. parent: parent
  137. },
  138. contentType: "application/json",
  139. dataType: "json"
  140. }).done(function(data) {
  141. header = data.header;
  142. value = data.value;
  143. sizeHeader = data.sizeHeader;
  144. sizeValue = data.sizeValue;
  145. for (var i = 0; i < header.length; i++) {
  146. if (value[i] == null)
  147. value[i] = "";
  148. if (header[i] == "元件版本")
  149. revitVersion = value[i];
  150. if (data.header[i] == "族群品類" || data.header[i] == "族群名稱" || data.header[i] == "類型名稱") {
  151. $('#table').append("<tr><td><div class='preview'>" + data.header[i] + "<img src='/Common/assets/images/" + data.header[i] + ".jpg' class='hide-image'></div></td><td><div>" + data.value[i] + "</div></td></tr>");
  152. } else {
  153. $('#table').append("<tr><td><div>" + data.header[i] + "</div></td><td><div>" + data.value[i] + "</div></td></tr>");
  154. }
  155. }
  156. for (var i = 0; i < sizeHeader.length; i++) {
  157. if (value[i] == null)
  158. value[i] = "";
  159. if (data.sizeHeader[i] != "空" && data.sizeValue[i] != "空") {
  160. $('#sizeTable').append("<tr><td>" + data.sizeHeader[i] + "</td><td>" + data.sizeValue[i] + "</td></tr>");
  161. } else
  162. $('#sizeTable').append("<tr><td>無資料</td><td>無資料</td></tr>");
  163. }
  164. $("#insertComponentName").text(name);
  165. $("#2DImage").attr("src","./assets/glb/Revit元件/" + parent + "/" + name + ".PNG");
  166. }).error(function(error) {
  167. console.log(error.responseText);
  168. });
  169. $.ajax({
  170. url: "./script/php/addFavorite.php",
  171. type: "GET",
  172. data: {
  173. CheckFavorite: parent + "/" + name
  174. },
  175. contentType: "application/json",
  176. dataType: "json"
  177. }).done(function(data) {
  178. isFavorite = data;
  179. if (isFavorite) {
  180. $("#heart").css("color", "Tomato");
  181. $("#favorite").html('移出清單');
  182. } else {
  183. $("#heart").css("color", "white");
  184. $("#favorite").html('加入清單');
  185. }
  186. }).error(function(error) {
  187. console.log(error.responseText);
  188. });
  189. });
  190. $(".nav-parent").each(function() {
  191. var parents = [];
  192. var lastIndex = parent.lastIndexOf("/");
  193. if (parent.slice(0, lastIndex) == $(this).context.children[0].outerHTML.split('"')[3]) {
  194. parents = parent.split("/");
  195. $(this).context.classList.add("nav-expanded");
  196. var temp = $(this).context.parentNode.parentNode;
  197. for (var i = 0; i < parents.length - 1; i++) {
  198. temp.classList.add("nav-expanded");
  199. temp = temp.parentNode.parentNode;
  200. }
  201. }
  202. });
  203. $(".dropdown-btn, .menu-item").each(function() {
  204. if ($(this).css("background").includes("rgb(0, 136, 204)")) {
  205. $(this).css("background", "rgba(0,0,0,0)");
  206. }
  207. });
  208. $(".menu-item").each(function() {
  209. if ($(this).context.outerHTML.includes(parent)) {
  210. $(this).css("background", "#0088cc");
  211. }
  212. });
  213. function goBack() {
  214. window.location.href = "component-list.php?parent=" + parent;
  215. }
  216. $(".dropdown-btn").each(function() {
  217. $(this).context.href = "component-list.php?parent=" + $(this).context.innerText;
  218. });
  219. function AddFavorite() {
  220. var stack_bar_top = {
  221. "dir1": "down",
  222. "dir2": "right",
  223. "push": "top",
  224. "spacing1": 0,
  225. "spacing2": 0
  226. };
  227. if (isFavorite) {
  228. $.ajax({
  229. url: "./script/php/addFavorite.php",
  230. type: "POST",
  231. data: {
  232. DelFavorite: parent + "/" + name,
  233. username: userName
  234. }
  235. }).done(function(data) {
  236. var notice = new PNotify({
  237. title: '通知',
  238. text: '移出清單成功!',
  239. type: 'success',
  240. addclass: 'stack-bar-top',
  241. stack: stack_bar_top,
  242. width: "100%"
  243. });
  244. isFavorite = false;
  245. $("#heart").css("color", "white");
  246. $("#favorite").html('加入清單');
  247. }).error(function(error) {
  248. var notice = new PNotify({
  249. title: '通知',
  250. text: '移出清單失敗!',
  251. type: 'error',
  252. addclass: 'stack-bar-top',
  253. stack: stack_bar_top,
  254. width: "100%"
  255. });
  256. console.log(error);
  257. });
  258. } else {
  259. $.ajax({
  260. url: "./script/php/addFavorite.php",
  261. type: "POST",
  262. data: {
  263. AddFavorite: parent + "/" + name,
  264. username: userName,
  265. revitVersion: revitVersion
  266. }
  267. }).done(function(data) {
  268. var notice = new PNotify({
  269. title: '通知',
  270. text: '加入清單成功!',
  271. type: 'success',
  272. addclass: 'stack-bar-top',
  273. stack: stack_bar_top,
  274. width: "100%"
  275. });
  276. isFavorite = true;
  277. $("#heart").css("color", "Tomato");
  278. $("#favorite").html('移出清單');
  279. }).error(function() {
  280. var notice = new PNotify({
  281. title: '通知',
  282. text: '加入清單失敗!',
  283. type: 'error',
  284. addclass: 'stack-bar-top',
  285. stack: stack_bar_top,
  286. width: "100%"
  287. });
  288. });
  289. }
  290. }
  291. </script>
  292. <!-- Vendor -->
  293. <script src="script/js/3Dpic-detail.js" type="module" async></script>
  294. </body>
  295. </html>