index.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <link rel="stylesheet" href="./static/style/public.css">
  8. <title>4DCAD</title>
  9. </head>
  10. <body>
  11. <div class="body">
  12. <div id="cad"></div>
  13. <!-- <div class="content">
  14. <ul>
  15. <li>
  16. <div class="itemTitle">
  17. <span>增添细节</span>
  18. </div>
  19. <ul class="chose" id="architecture">
  20. <li attr-type="user-line">
  21. <div><i></i></div><span>随画</span>
  22. </li>
  23. <li attr-type="door">
  24. <div><i class="iconfont icon_door"></i></div><span>门</span>
  25. </li>
  26. <li attr-type="casement">
  27. <div><i class="iconfont icon_window"></i></div><span>窗户</span>
  28. </li>
  29. <li attr-type="column">
  30. <div><i class="iconfont icon_column"></i></div><span>柱子</span>
  31. </li>
  32. <li attr-type="point">
  33. <div><i class="iconfont icon_point"></i></div><span>点</span>
  34. </li>
  35. <li attr-type="slideDoor">
  36. <div><i class="iconfont icon_point"></i></div><span>移门</span>
  37. </li>
  38. <li attr-type="tagging">
  39. <div><i class="iconfont icon_point"></i></div><span>标注</span>
  40. </li>
  41. <li attr-type="groundCase">
  42. <div><i class="iconfont icon_point"></i></div><span>落地窗</span>
  43. </li>
  44. <li attr-type="bayCase">
  45. <div><i class="iconfont icon_point"></i></div><span>飘窗</span>
  46. </li>
  47. <li attr-type="furnColumn">
  48. <div><i class="iconfont icon_column"></i></div><span>独立柱</span>
  49. </li>
  50. <li attr-type="furnFlue">
  51. <div><i class="iconfont icon_column"></i></div><span>独立柱</span>
  52. </li>
  53. <li attr-type="line">
  54. <div><i class="iconfont icon_column"></i></div><span>墙</span>
  55. </li>
  56. </ul>
  57. <a id="aaa">导出</a>
  58. <a id="bbb">测试</a>
  59. </li>
  60. </ul>
  61. <a class="btn" id="resove">&lt;</a>
  62. <a class="btn" id="back">&gt;</a>
  63. </div> -->
  64. </div>
  65. </body>
  66. </html>
  67. <script src="./static/three95.min.js"></script>
  68. <script src="./static/jquery-2.1.1.min.js"></script>
  69. <script src="./static/data.js"></script>
  70. <script>
  71. //解析查询字符串
  72. function getQueryStringArgs() {
  73. //取得查询字符串,并去掉开头'?'
  74. var qs = location.search.length ? location.search.substring(1) : '';
  75. //保存数据的对象
  76. var args = {},
  77. //以分割符'&'分割字符串,并以数组形式返回
  78. items = qs.length ? qs.split('&') : [],
  79. item = null,
  80. name = null,
  81. value = null,
  82. i = 0,
  83. len = items.length;
  84. //逐个将每一项添加到args对象中
  85. for (; i < len; i++) {
  86. item = items[i].split('=');
  87. //解码操作,因为查询字符串经过编码的
  88. name = decodeURIComponent(item[0]);
  89. value = decodeURIComponent(item[1]);
  90. value = item[1];
  91. if (name.length) {
  92. args[name] = value;
  93. }
  94. }
  95. return args;
  96. }
  97. function main() {
  98. let args = getQueryStringArgs()
  99. window.test_debugger = true
  100. $.ajax({
  101. url: 'https://4dkk.4dage.com/data/data' + args.m + '/houst_floor.json?m=36',
  102. // url: '/static/t-knpQzAP.json',
  103. method: 'GET',
  104. success(data) {
  105. let $layer = document.querySelector('#cad')
  106. window.cad = structureCAD({
  107. data:
  108. {
  109. block: [],
  110. column: [],
  111. door: [],
  112. hole: [],
  113. segment: [],
  114. "vertex-xy": [],
  115. "vertex-z": []
  116. }, layer: $layer
  117. });
  118. cad.loadData(JSON.parse(data));
  119. // cad.
  120. setTimeout(() => cad.getData(true), 500)
  121. }
  122. })
  123. }
  124. main()
  125. </script>