spaceTable.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <div id="eqInSp">
  3. <el-row>
  4. <el-button type="primary" @click="add">添加{{inSpaceType}}</el-button>
  5. <el-tooltip
  6. class="item"
  7. effect="dark"
  8. content="可前往“全部关系总览”中,按系统内包含的设备与空间关系计算"
  9. placement="right"
  10. >
  11. <el-button>按系统内设备与业务空间关系计算</el-button>
  12. </el-tooltip>
  13. </el-row>
  14. <div class="table-box">
  15. <el-table
  16. :data="tableData"
  17. style="width: 100%"
  18. height="100%"
  19. v-loading="loading"
  20. :header-cell-style="headerStyle"
  21. >
  22. <el-table-column :label="`${inSpaceType}名称`" show-overflow-tooltip min-width="100">
  23. <template slot-scope="scope">
  24. <div>{{ scope.row.RoomLocalName || scope.row.RoomName||''}}</div>
  25. </template>
  26. </el-table-column>
  27. <el-table-column
  28. prop="RoomLocalID"
  29. :label="`${inSpaceType}本地编码`"
  30. show-overflow-tooltip
  31. min-width="100"
  32. ></el-table-column>
  33. <el-table-column :label="`${inSpaceType}类型`" show-overflow-tooltip min-width="100">
  34. <template slot-scope="scope">
  35. <div>{{ spaceType[scope.row.ObjectType]}}</div>
  36. </template>
  37. </el-table-column>
  38. <el-table-column prop="action" label="操作" min-width="100">
  39. <template slot-scope="scope">
  40. <el-tooltip class="item" effect="dark" content="删除关系" placement="left">
  41. <el-button
  42. size="mini"
  43. @click="handleDelete(scope.$index, scope.row)"
  44. type="danger"
  45. plain
  46. icon="el-icon-delete"
  47. ></el-button>
  48. </el-tooltip>
  49. </template>
  50. </el-table-column>
  51. <template slot="empty">
  52. <div style="height: 60%;transform: translateY(50%);">
  53. <i class="icon-wushuju iconfont"></i>
  54. 可前往“全部关系总览”中计算竖井内系统
  55. </div>
  56. </template>
  57. </el-table>
  58. </div>
  59. <!-- 添加空间弹窗 -->
  60. <addSpaceDialog
  61. :dialogVisible.sync="dialogVisible"
  62. ref="addSpaceDialog"
  63. @refresh="refresh"
  64. :type="type"
  65. :params="params"
  66. :spaceType="spaceType"
  67. :floorType="floorType"
  68. ></addSpaceDialog>
  69. </div>
  70. </template>
  71. <script>
  72. import { queryLinkSys, spaceInSysUnlink } from "@/api/scan/request";
  73. import { mapGetters } from "vuex";
  74. import addSpaceDialog from "@/components/ledger/system/dialog/addSpaceDialog";
  75. export default {
  76. components: {
  77. addSpaceDialog
  78. },
  79. computed: {
  80. ...mapGetters("layout", ["projectId"])
  81. },
  82. data() {
  83. return {
  84. inSpaceType: "业务空间",
  85. dialogVisible: false,
  86. headerStyle: {
  87. backgroundColor: "#e1e4e5",
  88. color: "#2b2b2b",
  89. lineHeight: "30px"
  90. }, // 列表样式
  91. loading: false, // loading
  92. tableData: [] //列表数据
  93. };
  94. },
  95. props: {
  96. params: Object,
  97. type: String,
  98. spaceType: Object,
  99. floorType: {}
  100. },
  101. created() {
  102. this.getTableData();
  103. },
  104. methods: {
  105. // 获取列表数据
  106. getTableData() {
  107. let params = {
  108. Filters: `SysID='${this.params.SysID}'`,
  109. Cascade: [
  110. {
  111. Name: "zoneSpaceBaseTableList"
  112. }
  113. ]
  114. };
  115. queryLinkSys(params, res => {
  116. this.tableData = res.Content[0].ZoneSpaceBaseTable || [];
  117. });
  118. },
  119. // 删除关系
  120. handleDelete(index, row) {
  121. this.$confirm("确认删除该关系?", "提示", {
  122. confirmButtonText: "确定",
  123. cancelButtonText: "取消",
  124. type: "warning"
  125. })
  126. .then(() => {
  127. let params = {
  128. data: [
  129. {
  130. SysId: this.params.SysID,
  131. SpaceId: row.RoomID
  132. }
  133. ],
  134. type:row.ObjectType
  135. };
  136. this.deleteSyInSh(params);
  137. })
  138. .catch(() => {
  139. this.$message("取消删除");
  140. });
  141. },
  142. // 删除系统所在竖井关系
  143. deleteSyInSh(params) {
  144. spaceInSysUnlink(params, res => {
  145. this.$message.success("删除成功");
  146. this.getTableData();
  147. });
  148. },
  149. // 改变pagesize
  150. handleSizeChange(pageSize) {
  151. this.page.pageSize = pageSize;
  152. this.getTableData();
  153. },
  154. // 改变pageno
  155. handleCurrentChange(pageNo) {
  156. this.page.pageNumber = pageNo;
  157. this.getTableData();
  158. },
  159. // 添加设备
  160. add() {
  161. this.dialogVisible = true;
  162. },
  163. //刷新
  164. refresh(){
  165. this.dialogVisible = false;
  166. this.getTableData()
  167. }
  168. },
  169. watch: {
  170. type() {
  171. // this.getTableData()
  172. }
  173. }
  174. };
  175. </script>
  176. <style lang="less" scoped>
  177. #eqInSp {
  178. height: 100%;
  179. .table-box {
  180. margin-top: 10px;
  181. height: calc(100% - 50px);
  182. }
  183. }
  184. </style>