index.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <template>
  2. <div class="box">
  3. <div class="condition">
  4. <div class="header">
  5. <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
  6. <span>{{spaceDetails.RoomLocalName||spaceDetails.RoomName||''}}</span>
  7. </div>
  8. <el-row class="spaceTypes">
  9. <div class="types">
  10. <el-tabs v-model="activeTab" type='card'>
  11. <template v-for="(item,index) in tabsList">
  12. <el-tab-pane :name="item.Code" :key="index" :label="item.Name"></el-tab-pane>
  13. </template>
  14. </el-tabs>
  15. </div>
  16. <div class="deleBtn">
  17. <el-button size="small" @click="deleteSpace">删除业务空间</el-button>
  18. </div>
  19. </el-row>
  20. <div v-if="activeTab=='detail'" style="height:calc(100% - 110px)">
  21. <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
  22. </div>
  23. <!-- 空间内设备列表--服务于空间的设备 -->
  24. <eqToSpaceTable v-else-if="activeTab=='equipment' || activeTab=='equipmentFor'" :params="params" :type="activeTab"></eqToSpaceTable>
  25. <!-- 空间内系统 -->
  26. <syInSpaceTable v-else-if="activeTab=='generalSystem'" :params="params" :type="activeTab"></syInSpaceTable>
  27. </div>
  28. </div>
  29. </template>
  30. <script>
  31. import { mapGetters } from "vuex"
  32. import { queryZone, deleteZone } from '@/api/scan/request'
  33. import eqToSpaceTable from '@/components/business_space/newTables/eqToSpaceTable'
  34. import syInSpaceTable from '@/components/business_space/newTables/syInSpaceTable'
  35. export default {
  36. data() {
  37. return {
  38. params: {}, //参数-包含空间id 分区类型 进入方式(1-平面图 2-列表)
  39. tabsList: [
  40. { Code: 'detail', Name: '空间详情' },
  41. { Code: 'equipment', Name: '空间内设备' },
  42. { Code: 'equipmentFor', Name: '服务于空间的设备' },
  43. { Code: 'generalSystem', Name: '空间内系统' },
  44. ], //tab页
  45. activeTab: 'detail', //当前选中的tab
  46. spaceDetails: {}, //空间信息
  47. iframeSrc: '', //空间详情iframe
  48. }
  49. },
  50. computed: {
  51. ...mapGetters("layout", ["projectId", "userId", "secret"])
  52. },
  53. components: {
  54. eqToSpaceTable,
  55. syInSpaceTable
  56. },
  57. created() {
  58. this.params = this.$route.query;
  59. this.getSpaceDetails();
  60. this.setFrame()
  61. },
  62. mounted() { },
  63. watch: {
  64. projectId() { }
  65. },
  66. methods: {
  67. // 返回
  68. goBack() {
  69. this.$router.push({
  70. name: "spacelist",
  71. params: this.params
  72. })
  73. },
  74. // 查询空间详情
  75. getSpaceDetails() {
  76. let pa = {
  77. data: {
  78. Filters: `RoomID="${this.params.RoomID}"`
  79. },
  80. zone: this.params.zone
  81. }
  82. queryZone(pa, res => {
  83. this.spaceDetails = res.Content[0];
  84. this.params.BuildingId = this.spaceDetails.BuildingId;
  85. this.params.FloorId = this.spaceDetails.FloorId;
  86. })
  87. },
  88. // 设置iframe
  89. setFrame() {
  90. this.iframeSrc =
  91. `${process.env.BASE_URL}:8889/#/details?perjectId=${this.projectId}&secret=${this.secret}&FmId=${this.params.RoomID}&type=0&code=${this.params.zone}`;
  92. },
  93. // 删除业务空间
  94. deleteSpace() {
  95. let pa = {
  96. data: [{
  97. Id: this.spaceDetails.RoomID
  98. }],
  99. zone: this.params.zone
  100. }
  101. deleteZone(pa, res => {
  102. console.log(res)
  103. })
  104. }
  105. }
  106. };
  107. </script>
  108. <style scoped lang='less'>
  109. .box {
  110. .condition {
  111. padding: 10px;
  112. display: flex;
  113. height: 100%;
  114. flex-direction: column;
  115. border: 1px solid #dfe6ec;
  116. background: #fff;
  117. margin-bottom: 10px;
  118. .header {
  119. padding-bottom: 10px;
  120. span {
  121. line-height: 33px;
  122. margin-left: 15px;
  123. }
  124. }
  125. .spaceTypes {
  126. .types {
  127. float: left;
  128. width: calc(100% - 200px);
  129. /deep/ .el-tabs__item.is-top {
  130. border-top: 2px solid transparent;
  131. &.is-active {
  132. border-top: 2px solid #409eff;
  133. }
  134. }
  135. }
  136. .deleBtn {
  137. float: left;
  138. width: 200px;
  139. text-align: right;
  140. height: 40px;
  141. border-bottom: 1px solid #e4e7ed;
  142. }
  143. }
  144. .main {
  145. margin-top: 10px;
  146. height: calc(100% - 96px);
  147. }
  148. .footer {
  149. margin-bottom: 10px;
  150. }
  151. }
  152. }
  153. </style>
  154. <style lang="less">
  155. .el-table th {
  156. background-color: #d9d9d9;
  157. color: #000;
  158. }
  159. </style>