|
|
@@ -18,12 +18,46 @@
|
|
|
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') || ''
|
|
|
@@ -56,16 +90,46 @@
|
|
|
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}']`)
|
|
|
+ console.log(id)
|
|
|
+ kankan.Scene.gotoFloor(Number(id))
|
|
|
+ $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()
|
|
|
}
|
