index.vue 4.2 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>{{params.Name}}</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="deleteSystem">删除系统</el-button>
  18. </div>
  19. </el-row>
  20. <div v-if="activeTab=='detail'" style="height:calc(100% - 110px)">
  21. <div>开发中...</div>
  22. </div>
  23. <!-- 系统内设备 -->
  24. <deviceTable v-if="activeTab=='Equipment'" :params="params" :type="activeTab"></deviceTable>
  25. <!-- 系统所在竖井 -->
  26. <cenoteTable v-else-if="activeTab=='cenote'" :params="params" :type="activeTab"></cenoteTable>
  27. <!-- 系统所在业务空间 -->
  28. <spaceTable v-else-if="activeTab=='space'" :params="params" :type="activeTab"></spaceTable>
  29. </div>
  30. </div>
  31. </template>
  32. <script>
  33. import { mapGetters } from "vuex"
  34. import { queryLinkSys, deleteGeneralSys } from '@/api/scan/request'
  35. import cenoteTable from '@/components/ledger/system/table/cenoteTable'
  36. import deviceTable from '@/components/ledger/system/table/deviceTable'
  37. import spaceTable from '@/components/ledger/system/table/spaceTable'
  38. export default {
  39. data() {
  40. return {
  41. params: {}, //参数-包含系统id 分区类型
  42. tabsList: [
  43. { Code: 'detail', Name: '系统详情' },
  44. { Code: 'Equipment', Name: '系统内设备' },
  45. { Code: 'cenote', Name: '系统所在竖井' },
  46. { Code: 'space', Name: '系统所在业务空间' },
  47. ], //tab页
  48. activeTab: 'detail', //当前选中的tab
  49. systemDetails: {}, //系统信息
  50. }
  51. },
  52. computed: {
  53. ...mapGetters("layout", ["projectId", "userId", "secret"])
  54. },
  55. components: {
  56. cenoteTable,
  57. deviceTable,
  58. spaceTable
  59. },
  60. created() {
  61. this.params = this.$route.query;
  62. this.getSystemDetails();
  63. },
  64. mounted() { },
  65. watch: {
  66. projectId() { }
  67. },
  68. methods: {
  69. // 返回
  70. goBack() {
  71. this.$router.push({
  72. name: "systemlist",
  73. params: this.params
  74. })
  75. },
  76. // 查询系统详情
  77. getSystemDetails() {
  78. let pa = {
  79. Filters: `SysID="${this.params.SysID}"`
  80. }
  81. queryLinkSys(pa, res => {
  82. this.systemDetails = res.Content[0];
  83. })
  84. },
  85. // 删除系统
  86. deleteSystem() {
  87. this.$confirm("此操作将删除系统,是否继续?", "提示", {
  88. confirmButtonText: '确定',
  89. cancelButtonText: '取消',
  90. type: 'warning'
  91. }).then(() => {
  92. let pa = [{
  93. SysID: this.systemDetails.SysID
  94. }]
  95. this.removeSys(pa)
  96. }).catch(() => {
  97. this.$message("取消删除")
  98. })
  99. },
  100. async removeSys(param) {
  101. await deleteGeneralSys(param, res => {
  102. this.$message.success("删除成功")
  103. this.goBack()
  104. })
  105. },
  106. }
  107. };
  108. </script>
  109. <style scoped lang='less'>
  110. .box {
  111. .condition {
  112. padding: 10px;
  113. display: flex;
  114. height: 100%;
  115. flex-direction: column;
  116. border: 1px solid #dfe6ec;
  117. background: #fff;
  118. margin-bottom: 10px;
  119. .header {
  120. padding-bottom: 10px;
  121. span {
  122. line-height: 33px;
  123. margin-left: 15px;
  124. }
  125. }
  126. .spaceTypes {
  127. .types {
  128. float: left;
  129. width: calc(100% - 200px);
  130. /deep/ .el-tabs__item.is-top {
  131. border-top: 2px solid transparent;
  132. &.is-active {
  133. border-top: 2px solid #409eff;
  134. }
  135. }
  136. }
  137. .deleBtn {
  138. float: left;
  139. width: 200px;
  140. text-align: right;
  141. height: 40px;
  142. border-bottom: 1px solid #e4e7ed;
  143. }
  144. }
  145. .main {
  146. margin-top: 10px;
  147. height: calc(100% - 96px);
  148. }
  149. .footer {
  150. margin-bottom: 10px;
  151. }
  152. }
  153. }
  154. </style>
  155. <style lang="less">
  156. .el-table th {
  157. background-color: #d9d9d9;
  158. color: #000;
  159. }
  160. </style>