index.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <!-- 编辑器-热点 -->
  3. <div>
  4. <!-- 内嵌的全景场景预览区域 -->
  5. <div
  6. class="app-player"
  7. ref="layer"
  8. >
  9. <Core/>
  10. </div>
  11. <!-- 初始和热点 底部的 全景场景列表 -->
  12. <toolbar></toolbar>
  13. <setting @select="handleSelectScene"></setting>
  14. <!-- <toolbar></toolbar> -->
  15. <div class="dialog" v-if="show">
  16. <Select
  17. @updateList="undatePano"
  18. :panos="list"
  19. :current="activeItem"
  20. @cancle="show = false"
  21. :title="'选择场景'"
  22. :name="'scene'"
  23. @submit="handelSelect"
  24. >
  25. <template slot="list" slot-scope="{ data }">
  26. <div class="pano-con">
  27. <div class="ui-remark">{{ data.name }}</div>
  28. <ul>
  29. <li
  30. v-for="(item, i) in data.arr"
  31. @click="activeItem = item"
  32. :class="{ 'li-active': item.id == activeItem.id }"
  33. :key="i"
  34. >
  35. <div class="typeli">
  36. <i class="iconfont iconedit_type_3d" :class="{'iconedit_type_panorama':item.type!=='house'}"></i>
  37. </div>
  38. <div class="img">
  39. <img :src="item.icon" alt="">
  40. </div>
  41. <div class="ui-title">
  42. <span>{{item.sceneTitle}}</span>
  43. </div>
  44. </li>
  45. </ul>
  46. </div>
  47. </template>
  48. </Select>
  49. </div>
  50. </div>
  51. </template>
  52. <script>
  53. import Setting from "./Setting";
  54. import Select from "@/components/select";
  55. import Core from "@/framework/core/index.vue";
  56. import Toolbar from "@/framework/Toolbar.vue";
  57. export default {
  58. name: "home",
  59. components: {
  60. Setting,
  61. Select,
  62. Core,
  63. Toolbar,
  64. },
  65. mounted(){
  66. },
  67. watch: {
  68. show(newVal){
  69. if (newVal) {
  70. this.searchKey = ''
  71. }
  72. else{
  73. this.activeWebsite = ''
  74. }
  75. },
  76. activeWebsite(newVal){
  77. if (!newVal||!newVal.sceneCode) {
  78. return
  79. }
  80. let tmp = ''
  81. this.list.forEach(item=>{
  82. if (!tmp) {
  83. tmp = item.arr.find(i=>{
  84. return newVal.sceneCode==i.sceneCode
  85. })
  86. }
  87. })
  88. this.activeItem = tmp || this.activeItem
  89. }
  90. },
  91. data(){
  92. return {
  93. show:false,
  94. list:[],
  95. activeItem: "",
  96. searchKey: "",
  97. activeWebsite:''
  98. }
  99. },
  100. methods:{
  101. undatePano(data){
  102. this.searchKey = data
  103. },
  104. handleSelectScene(data){
  105. this.activeWebsite = data
  106. this.show=true
  107. },
  108. handelSelect() {
  109. this.$bus.emit('selectUrl',this.activeItem)
  110. this.show = false
  111. }
  112. }
  113. };
  114. </script>
  115. <style lang="less" scoped>
  116. .app-player {
  117. padding: 10px;
  118. position: relative;
  119. display: flex;
  120. height: calc(100% - 260px); // 260: 底部toolbar的高度
  121. flex-direction: column;
  122. &.page-guide {
  123. height: calc(100% - 210px);
  124. }
  125. }
  126. .dialog {
  127. position: fixed;
  128. z-index: 30;
  129. left: 0;
  130. top: 0;
  131. width: 100%;
  132. height: 100%;
  133. background-color: rgba(0, 0, 0, 0.5);
  134. }
  135. .pano-con{
  136. height: auto;
  137. background: none;
  138. padding: 10px 0;
  139. .ui-remark{
  140. padding-left: 10px;
  141. }
  142. }
  143. </style>