bill
/
drawing-board-service


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
    }

    .scene {
      width: 100%;
      height: 100%;
    }

    #floors {
      pointer-events: all;
      position: fixed;
      left: 20px;
      z-index: 10;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, .6);
      border-radius: 6px 6px 6px 6px;
      overflow: hidden;
      transition: all .3s;
      padding: 5px 13px;
      min-width: 30px;
    }

    #floors li {
      height: 36px;
      cursor: pointer;
      color: hsla(0, 0%, 100%, .7);
      font-size: 14px;
      line-height: 40px;
      max-width: 83vw;
      text-align: center;
      position: relative;
      color: #fff;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .active {
      color: #00c8af !important;
    }
  </style>
</head>

<body>
  <div id="scene" class="scene"></div>
  <div class="map"></div>
  <ul id="floors" style="display: none;"></ul>
  <script>
    const params = new URLSearchParams(location.search)
    let host = params.get('host') || ''

    const $script1 = document.createElement('script')
    $script1.src = `${host}/sdk/kankan-sdk-deps.js`
    document.documentElement.appendChild($script1)

    const $script2 = document.createElement('script')
    $script2.src = `${host}/sdk/kankan-sdk.js`
    document.documentElement.appendChild($script2)


    let loadPackCount = 0
    $script1.onload = () => {
      ++loadPackCount
      init()
    }
    $script2.onload = () => {
      ++loadPackCount
      init()
    }

    const init = async () => {
      if (loadPackCount < 2) return;
      await setTimeout(() => { }, 1000)
      var kankan = new KanKan({
        dom: '#scene',
        num: params.get('m'),
        server: host,
        resource: host + '/oss/'
      })

      const setCurrentFloor = (id) => {
        const $old = document.querySelector(`#floors > .active`)
        if ($old) {
          $old.classList.remove('active')
        }
        const $item = document.querySelector(`#floors > li[attr-id='${id}']`)
        kankan.Scene.gotoFloor(Number(id))
        $item && $item.classList.add('active')
      }

      const renderFloors = (floors) => {
        const $floors = document.querySelector('#floors')
        if (floors.length <= 1) return;
        $floors.style.display = 'block'
        $floors.innerHTML = floors.map(item => `<li attr-id="${item.id}">${item.name}</li>`).join('')
        $floors.addEventListener('click', ev => {
          const dom = ev.target
          const id = dom.getAttribute('attr-id')
          if (!id) return;
          setCurrentFloor(id)
        })
      }


      kankan.store.on('flooruser', floor => {
        renderFloors(floor.floors)
      })
      kankan.Scene.on('loaded', () => {
        const player = kankan.core.get('Player')
        player.viewLinkManager.addEventListener('loaded', () => {
          player.viewLinkManager.hideAllViews()
        })
        setCurrentFloor(kankan.Scene.floorId)
      })
      kankan.Scene.on('ready', async () => {
        let metadata = await kankan.store.get('metadata')
        metadata.surveillances = 0

      })
      kankan.render()
    }
  </script>

  <script>
  </script>
</body>

</html>