index.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <div class="box">
  3. <el-container>
  4. <el-header>
  5. <div class="boxName">
  6. 第二屏详情
  7. </div>
  8. <div class="spaceName">
  9. <b>空间名称:</b>{{spaceDetails.RoomLocalName?spaceDetails.RoomLocalName:"-"}}
  10. </div>
  11. </el-header>
  12. <el-container>
  13. <el-aside width="500px">
  14. <div class="aside-top">
  15. <div class="aside-top-left">
  16. <p><b>空间功能区类型:</b>{{spaceDetails.RoomFuncType?spaceDetails.RoomFuncType:"-"}}</p>
  17. <p><b>备注文字:</b>{{spaceDetails.Intro?spaceDetails.Intro:"-"}}</p>
  18. </div>
  19. <div class="aside-top-right">
  20. <p><b>空间二维码:</b><span v-if="!spaceDetails.RoomQRCode">-</span></p>
  21. <!-- <img src="./1.png" alt="" v-if="spaceDetails.QrCode"> -->
  22. <img :src="'/image-service/common/file_get/'+ spaceDetails.RoomQRCode +'?systemId=dataPlatform'" alt="二维码图片"
  23. v-if="spaceDetails.RoomQRCode">
  24. </div>
  25. </div>
  26. <div>
  27. <p><b>位置图片:</b></p>
  28. </div>
  29. </el-aside>
  30. <el-main>
  31. <el-tabs v-model="activeTab" type='card'>
  32. <template v-for="(item,index) in tabsList">
  33. <el-tab-pane :name="item.Code" :key="index" :label="item.Name">
  34. <!-- 静态数据 -->
  35. <div v-if="activeTab === 'staticData'" style="width:100%">
  36. <iframe height="100%" width="100%" :src="iframeSrc" id="staticData"></iframe>
  37. </div>
  38. <!-- 动态数据 -->
  39. <div v-if="activeTab === 'dynamicData'" style="width:100%">
  40. <!-- <iframe height="100%" width="100%" :src="iframeSrc"></iframe> -->
  41. </div>
  42. <!-- 对象关系 -->
  43. <div v-if="activeTab === 'objectRelationship'" style="width:100%">
  44. <!-- <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
  45. <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
  46. <iframe height="100%" width="100%" :src="iframeSrc"></iframe> -->
  47. </div>
  48. </el-tab-pane>
  49. </template>
  50. </el-tabs>
  51. </el-main>
  52. </el-container>
  53. </el-container>
  54. </div>
  55. </template>
  56. <script>
  57. import { mapGetters } from 'vuex'
  58. import { queryZone, getAllbusiness } from '@/api/scan/request'
  59. export default {
  60. data() {
  61. return {
  62. tabsList: [
  63. { Code: 'staticData', Name: '静态数据' },
  64. { Code: 'dynamicData', Name: '动态数据' },
  65. { Code: 'objectRelationship', Name: '对象关系' }
  66. ],
  67. activeTab: 'staticData',
  68. spaceDetails: {},
  69. iframeSrc: '',
  70. projectId: ''
  71. }
  72. },
  73. created() {
  74. if (this.$route.query.RoomID && this.$route.query.zone) {
  75. this.getData();
  76. }
  77. },
  78. computed: {
  79. ...mapGetters('layout', ['userInfo', 'projects', 'userId', 'secret'])
  80. },
  81. methods: {
  82. getData() {
  83. // 获取空间信息
  84. let params = {
  85. data: {
  86. Filters: `RoomID="${this.$route.query.RoomID}"`
  87. },
  88. zone: this.$route.query.zone
  89. }
  90. queryZone(params, res => {
  91. this.spaceDetails = res.Content[0];
  92. if (this.$route.query.RoomID && this.$route.query.zone) {
  93. this.setFrame();
  94. }
  95. })
  96. },
  97. // 设置静态数据tab的iframe地址
  98. setFrame() {
  99. this.projectId = localStorage.getItem('projectId');
  100. document.getElementById("staticData").contentWindow.location.reload(true);
  101. this.iframeSrc = `${process.env.BASE_URL}:8889/#/details?perjectId=${this.projectId}&secret=${this.secret}&FmId=${this.$route.query.RoomID}&type=0&code=${this.$route.query.zone}`
  102. }
  103. },
  104. watch: {
  105. // 监听路由地址,并判断有RoomID和zone,重新请求空间
  106. "$route"(){
  107. if (this.$route.query.RoomID && this.$route.query.zone) {
  108. this.getData();
  109. }
  110. }
  111. }
  112. }
  113. </script>
  114. <style lang="less" scoped>
  115. #screenBox .screen-router[data-v-6c06ede0] {
  116. padding: 0;
  117. }
  118. .el-header {
  119. padding: 0;
  120. height: 80px !important;
  121. .boxName {
  122. color: #fff;
  123. font-size: 16px;
  124. line-height: 50px;
  125. height: 50px !important;
  126. padding: 0 20px;
  127. background-color: #3f4f62;
  128. }
  129. .spaceName {
  130. font-size: 14px;
  131. line-height: 30px;
  132. padding: 0 20px;
  133. border-bottom: 1px solid black;
  134. box-sizing: border-box;
  135. }
  136. }
  137. .el-aside {
  138. color: #333;
  139. border: 1px solid #e4e7ed;
  140. margin: 20px 0 0 20px;
  141. padding: 20px;
  142. box-sizing: border-box;
  143. .aside-top {
  144. overflow: hidden;
  145. .aside-top-left {
  146. float: left;
  147. width: 300px;
  148. }
  149. .aside-top-right {
  150. float: right;
  151. img {
  152. margin-left: -10px;
  153. width: 140px;
  154. height: 140px;
  155. }
  156. }
  157. }
  158. }
  159. .el-main {
  160. color: #333;
  161. text-align: center;
  162. }
  163. .el-tabs__content {
  164. height: 750px;
  165. }
  166. #pane-staticData {
  167. height: 750px;
  168. div {
  169. height: 100%;
  170. }
  171. }
  172. </style>