| 1 |
- var Xui=function(){"use strict";function n(n){return{metadata:n.metadata,collapse:!1,dropdown:!1}}function t(n){var t=this;return{metadata:n.metadata,setFloor:function(n){return t.setFloor(n)}}}function o(n){var t=this;return{metadata:n.metadata,setMode:function(n){return t.setMode(n)}}}var e=function(n){this.app=n};return e.prototype.init=function(){var e=this,i=PetiteVue.reactive;this.data={UIInfo:n,UIFloors:t,UIControls:o,setMode:function(n){e.app.Camera[n]&&e.app.Camera[n]()},setFloor:function(n){return e.app.Scene.gotoFloor(n)},metadata:i({loaded:!1,mode:"panorama",thumb:null,floors:null,floorIndex:0,title:"",description:""})},PetiteVue.createApp(this.data).mount(this.app.$plugins.querySelector("[xui_components]")),this.app.use("MinMap"),this.app.store.on("metadata",(function(n){n.entry&&(e.data.metadata.thumb=e.app.resource.getUserResourceURL("thumb-2k.jpg")),e.data.metadata.title=n.title,e.data.metadata.description=n.description})),this.app.Camera.on("floor.changed",(function(n){var t=n.floorIndex,o=n.allVisible;e.data.metadata.floorIndex=o?"all":t})),this.app.Camera.on("mode.changing",(function(n){var t=n.toMode;e.data.metadata.mode=t})),this.app.Scene.on("ready",(function(){e.data.metadata.thumb=null,e.data.metadata.loaded=!0})),this.app.Scene.on("loaded",(function(){e.data.metadata.floors=((e.app.store.getValue("flooruser")||{}).floors||[]).map((function(n){return{name:n.name,subgroup:n.subgroup}})).reverse()}))},function(n,t){return new Promise((function(o){var i=new e(n,t);i.$name="Xui",i.$html='<div xui-components v-scope :style="metadata.thumb && { backgroundImage:`url(${metadata.thumb})`}"> <div xui-components-loading v-show="!metadata.loaded"> <div class="lds-dual-ring"></div> </div> <div xui-components-info v-scope="UIInfo({metadata})" v-show="metadata.loaded"> <div class="title" :class="{collapse:collapse}" @click="dropdown=!dropdown"> <div class="pick" @click="collapse=!collapse"> <i class="iconfont sdk-back"></i> </div> <div class="text"> <div>{{ metadata.title }}</div> </div> <div class="drop" :class="{dropdown:dropdown}"> <i class="iconfont sdk-pull-down"></i> </div> </div> <div class="description" v-show="dropdown && !collapse" @click="dropdown=false"> <div class="text" v-html="metadata.description"></div> </div> </div> <div xui-components-floors v-scope="UIFloors({metadata})" v-show="metadata.loaded"> <ul v-show="metadata.floors && metadata.floors.length>1 && metadata.mode!=\'panorama\'"> <li :class="{active:\'all\' == metadata.floorIndex}" @click="setFloor(\'all\')" v-if="metadata.mode==\'dollhouse\'">全部</li> <li v-for="item in metadata.floors" :class="{active:item.subgroup == metadata.floorIndex}" @click="setFloor(item.subgroup)">{{item.name}}</li> </ul> </div> <div xui-components-controls v-scope="UIControls({metadata})" v-show="metadata.loaded"> <div class="buttons"> <div @click="setMode(\'panorama\')"><i class="iconfont" :class="[metadata.mode==\'panorama\'?\'sdk-panorama-active\':\'sdk-panorama\']"></i></div> <div @click="setMode(\'floorplan\')"><i class="iconfont" :class="[metadata.mode==\'floorplan\'?\'sdk-floorplan-active\':\'sdk-floorplan\']"></i></div> <div @click="setMode(\'dollhouse\')"><i class="iconfont" :class="[metadata.mode==\'dollhouse\'?\'sdk-dollhouse-active\':\'sdk-dollhouse\']"></i></div> </div> <div class="buttons"></div> </div> </div> \x3c!-- <template id="xui-components-loading">\n <div class="lds-dual-ring"></div>\n</template> --\x3e \x3c!-- <template id="xui-components-info">\n <div class="title" :class="{collapse:collapse}" @click="dropdown=!dropdown">\n <div class="pick" @click="collapse=!collapse">\n <i class="iconfont sdk-back"></i>\n </div>\n <div class="text">\n <div>{{ metadata.title }}</div>\n </div>\n <div class="drop" :class="{dropdown:dropdown}">\n <i class="iconfont sdk-pull-down"></i>\n </div>\n </div>\n <div class="description" v-show="dropdown && !collapse" @click="dropdown=false">\n <div class="text" v-html="metadata.description"></div>\n </div>\n</template>\n<template id="xui-components-floors">\n <ul v-show="metadata.floors && metadata.floors.length>1 && metadata.mode!=\'panorama\'">\n <li :class="{active:\'all\' == metadata.floorIndex}" @click="setFloor(\'all\')" v-if="metadata.mode==\'dollhouse\'">全部</li>\n <li v-for="item in metadata.floors" :class="{active:item.subgroup == metadata.floorIndex}" @click="setFloor(item.subgroup)">{{item.name}}</li>\n </ul>\n</template>\n<template id="xui-components-controls">\n <div class="buttons">\n <div @click="setMode(\'panorama\')"><i class="iconfont" :class="[metadata.mode==\'panorama\'?\'sdk-panorama-active\':\'sdk-panorama\']"></i></div>\n <div @click="setMode(\'floorplan\')"><i class="iconfont" :class="[metadata.mode==\'floorplan\'?\'sdk-floorplan-active\':\'sdk-floorplan\']"></i></div>\n <div @click="setMode(\'dollhouse\')"><i class="iconfont" :class="[metadata.mode==\'dollhouse\'?\'sdk-dollhouse-active\':\'sdk-dollhouse\']"></i></div>\n </div>\n <div class="buttons"></div>\n</template> --\x3e <style> html {\n box-sizing: border-box;\n -webkit-text-size-adjust: 100%;\n word-break: normal;\n -moz-tab-size: 4;\n tab-size: 4;\n }\n\n *,\n ::before,\n ::after {\n background-repeat: no-repeat;\n box-sizing: inherit;\n appearance: none;\n -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n text-rendering: optimizeLegibility !important;\n -webkit-font-smoothing: antialiased !important;\n }\n\n ::before,\n ::after {\n text-decoration: inherit;\n vertical-align: inherit;\n }\n\n * {\n padding: 0;\n margin: 0;\n }\n [xui-components] {\n width: 100%;\n height: 100%;\n pointer-events: none;\n font-size: 14px;\n user-select: none;\n background-repeat: no-repeat;\n background-position: center center;\n background-size: cover;\n }\n\n [xui_min_map] {\n top: 20px;\n right: 20px;\n } </style> <style> [xui-components-info] {\n position: absolute;\n left: 0;\n top: 20px;\n height: 34px;\n border-radius: 0 34px 34px 0;\n background: rgba(0, 0, 0, 0.3);\n pointer-events: all;\n color: rgba(255, 255, 255, 0.88);\n z-index: 100;\n }\n [xui-components-info] .title {\n display: flex;\n align-items: center;\n padding-right: 30px;\n width: 100%;\n height: 100%;\n cursor: pointer;\n transition: all 0.1s;\n position: relative;\n }\n [xui-components-info] .title .pick {\n width: 34px;\n height: 34px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n position: relative;\n transition: all 0.1s;\n }\n [xui-components-info] .title .pick::after {\n content: \'\';\n position: absolute;\n width: 1px;\n height: 65%;\n background: linear-gradient(transparent, #fff, transparent);\n top: 50%;\n transform: translateY(-50%);\n right: 0;\n }\n [xui-components-info] .title .text {\n width: 240px;\n padding-left: 20px;\n transition: width 0.3s;\n }\n [xui-components-info] .title .text div {\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n [xui-components-info] .title .drop {\n cursor: pointer;\n display: flex;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 24px;\n align-items: center;\n justify-content: flex-start;\n color: inherit;\n }\n [xui-components-info] .title .drop i {\n font-size: 14px;\n transition: transform 0.2s ease-in-out;\n }\n [xui-components-info] .title .drop.dropdown i {\n transform: rotate(180deg);\n }\n [xui-components-info] .title.collapse {\n padding-right: 0;\n }\n [xui-components-info] .title.collapse .pick i {\n transform: rotate(180deg);\n }\n [xui-components-info] .title.collapse .text,\n [xui-components-info] .title.collapse .drop,\n [xui-components-info] .title.collapse .pick::after {\n display: none;\n }\n [xui-components-info] .description {\n position: absolute;\n left: 10px;\n top: calc(100% + 10px);\n background: rgba(15, 15, 15, 0.3);\n border-radius: 10px;\n }\n [xui-components-info] .description .text {\n padding: 20px;\n width: 400px;\n letter-spacing: 1px;\n overflow: hidden;\n word-break: break-all;\n white-space: normal;\n line-height: 1.5;\n }\n [xui-components-info] a {\n color: rgba(14, 235, 168, 0.7);\n } </style> <style> [xui-components-floors] {\n pointer-events: all;\n position: absolute;\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n }\n [xui-components-floors] ul {\n margin: 0;\n padding: 0;\n list-style: none;\n width: 50px;\n border-radius: 6px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 20px 6px;\n background: rgba(0, 0, 0, 0.3);\n }\n [xui-components-floors] li {\n color: rgba(255, 255, 255, 0.7);\n margin-top: 20px;\n cursor: pointer;\n }\n [xui-components-floors] li:first-child {\n margin-top: 0px;\n }\n [xui-components-floors] li.active {\n color: rgba(14, 235, 168, 0.7);\n } </style> <style> [xui-components-controls] {\n width: 100%;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 20px;\n height: 34px;\n display: flex;\n justify-content: space-between;\n transition: bottom 0.3s ease;\n z-index: 100;\n }\n [xui-components-controls] .buttons {\n pointer-events: all;\n display: flex;\n align-items: center;\n justify-content: space-around;\n height: 34px;\n border-radius: 17px;\n background-color: rgba(0, 0, 0, 0.3);\n }\n [xui-components-controls] .buttons i {\n font-size: 18px;\n color: #fff;\n }\n [xui-components-controls] .buttons:first-child {\n margin-left: 20px;\n }\n [xui-components-controls] .buttons:first-child > div {\n position: relative;\n margin-left: 20px;\n margin-right: 20px;\n cursor: pointer;\n }\n [xui-components-controls] .buttons:last-child {\n margin-right: 20px;\n } </style> <style> [xui-components-loading] {\n position: absolute;\n left: 50%;\n top: 50%;\n z-index: 100000;\n }\n .lds-dual-ring {\n display: inline-block;\n width: 70px;\n height: 70px;\n }\n .lds-dual-ring:after {\n content: \' \';\n display: block;\n width: 54px;\n height: 54px;\n margin: 8px;\n border-radius: 50%;\n border: 4px solid #fff;\n border-color: #fff transparent #fff transparent;\n animation: lds-dual-ring 1.2s linear infinite;\n }\n @keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n } </style> ',i.$load=function(){return i.init()},o(i)}))}}();
|
