kankan.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  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. <title>Document</title>
  7. <style>
  8. html,
  9. body {
  10. width: 100%;
  11. height: 100%;
  12. margin: 0;
  13. overflow: hidden;
  14. }
  15. .scene {
  16. width: 100%;
  17. height: 100%;
  18. }
  19. #floors {
  20. pointer-events: all;
  21. position: fixed;
  22. left: 20px;
  23. z-index: 10;
  24. top: 50%;
  25. transform: translateY(-50%);
  26. background: rgba(0, 0, 0, .6);
  27. border-radius: 6px 6px 6px 6px;
  28. overflow: hidden;
  29. transition: all .3s;
  30. padding: 5px 13px;
  31. min-width: 30px;
  32. }
  33. #floors li {
  34. height: 36px;
  35. cursor: pointer;
  36. color: hsla(0, 0%, 100%, .7);
  37. font-size: 14px;
  38. line-height: 40px;
  39. max-width: 83vw;
  40. text-align: center;
  41. position: relative;
  42. color: #fff;
  43. text-overflow: ellipsis;
  44. overflow: hidden;
  45. white-space: nowrap;
  46. }
  47. .active {
  48. color: #00c8af !important;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <div id="scene" class="scene"></div>
  54. <div class="map"></div>
  55. <ul id="floors" style="display: none;"></ul>
  56. <script>
  57. const params = new URLSearchParams(location.search)
  58. let host = params.get('host') || ''
  59. const $script1 = document.createElement('script')
  60. $script1.src = `${host}/sdk/kankan-sdk-deps.js`
  61. document.documentElement.appendChild($script1)
  62. const $script2 = document.createElement('script')
  63. $script2.src = `${host}/sdk/kankan-sdk.js`
  64. document.documentElement.appendChild($script2)
  65. let loadPackCount = 0
  66. $script1.onload = () => {
  67. ++loadPackCount
  68. init()
  69. }
  70. $script2.onload = () => {
  71. ++loadPackCount
  72. init()
  73. }
  74. const init = async () => {
  75. if (loadPackCount < 2) return;
  76. await setTimeout(() => { }, 1000)
  77. var kankan = new KanKan({
  78. dom: '#scene',
  79. num: params.get('m'),
  80. server: host,
  81. resource: host + '/oss/'
  82. })
  83. const setCurrentFloor = (id) => {
  84. const $old = document.querySelector(`#floors > .active`)
  85. if ($old) {
  86. $old.classList.remove('active')
  87. }
  88. const $item = document.querySelector(`#floors > li[attr-id='${id}']`)
  89. kankan.Scene.gotoFloor(Number(id))
  90. $item && $item.classList.add('active')
  91. }
  92. const renderFloors = (floors) => {
  93. const $floors = document.querySelector('#floors')
  94. if (floors.length <= 1) return;
  95. $floors.style.display = 'block'
  96. $floors.innerHTML = floors.map(item => `<li attr-id="${item.id}">${item.name}</li>`).join('')
  97. $floors.addEventListener('click', ev => {
  98. const dom = ev.target
  99. const id = dom.getAttribute('attr-id')
  100. if (!id) return;
  101. setCurrentFloor(id)
  102. })
  103. }
  104. kankan.store.on('flooruser', floor => {
  105. renderFloors(floor.floors)
  106. })
  107. kankan.Scene.on('loaded', () => {
  108. const player = kankan.core.get('Player')
  109. player.viewLinkManager.addEventListener('loaded', () => {
  110. player.viewLinkManager.hideAllViews()
  111. })
  112. setCurrentFloor(kankan.Scene.floorId)
  113. })
  114. kankan.Scene.on('ready', async () => {
  115. let metadata = await kankan.store.get('metadata')
  116. metadata.surveillances = 0
  117. })
  118. kankan.render()
  119. }
  120. </script>
  121. <script>
  122. </script>
  123. </body>
  124. </html>