historyDialog.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <el-dialog title="本次对应记录" :visible.sync="dialogVisible" width="70%" @close="handleClose" id="historyAction" custom-class="act-history">
  3. <span>提示:可使用Contorl+F 搜索关键字</span>
  4. <div>
  5. <el-table :data="tableData" style="width: 100%;" :show-header="showheader" height="400px">
  6. <el-table-column>
  7. <el-table-column label="数据源" align="right">
  8. <template slot-scope="scope">
  9. <div v-for="t in scope.row.leftList" :key="t.id">
  10. <el-tooltip :content="t.Datasource" placement="top">
  11. <div>{{t.Datasource}}</div>
  12. </el-tooltip>
  13. </div>
  14. </template>
  15. </el-table-column>
  16. <el-table-column label="位置标签" align="right">
  17. <template slot-scope="scope">
  18. <div v-for="t in scope.row.leftList" :key="t.id">
  19. <el-tooltip :content="t.LocationFlag.toString()" placement="top">
  20. <div>{{t.LocationFlag.toString()}}</div>
  21. </el-tooltip>
  22. </div>
  23. </template>
  24. </el-table-column>
  25. <el-table-column label="设备标识" width="200px" class-name="bgf5" align="right">
  26. <template slot-scope="scope">
  27. <div v-for="t in scope.row.leftList" :key="t.id">
  28. <el-tooltip :content="t.EquipmentMark" placement="top">
  29. <div>{{t.EquipmentMark}}</div>
  30. </el-tooltip>
  31. </div>
  32. </template>
  33. </el-table-column>
  34. </el-table-column>
  35. <el-table-column>
  36. <el-table-column label="设备实例名称" width="200px" class-name="bgf5 border-l">
  37. <template slot-scope="scope">
  38. <div v-for="t in scope.row.rightList" :key="t.id">
  39. <el-tooltip :content="t.EquipLocalName" placement="top">
  40. <div>{{t.EquipLocalName}}</div>
  41. </el-tooltip>
  42. </div>
  43. </template>
  44. </el-table-column>
  45. <el-table-column label="设备实例编码">
  46. <template slot-scope="scope">
  47. <div v-for="t in scope.row.rightList" :key="t.id">
  48. <el-tooltip :content="t.ObjectID" placement="top">
  49. <div>{{t.ObjectID}}</div>
  50. </el-tooltip>
  51. </div>
  52. </template>
  53. </el-table-column>
  54. <el-table-column label="所在建筑楼层">
  55. <template slot-scope="scope">
  56. <div v-for="t in scope.row.rightList" :key="t.id">
  57. <el-tooltip :content="t.BuildLocalName&&t.FloorLocalName?t.BuildLocalName+'-'+t.FloorLocalName:''" placement="top">
  58. <div>{{t.BuildLocalName&&t.FloorLocalName?t.BuildLocalName+'-'+t.FloorLocalName:''}}</div>
  59. </el-tooltip>
  60. </div>
  61. </template>
  62. </el-table-column>
  63. <el-table-column label="所在业务空间">
  64. <template slot-scope="scope">
  65. <div v-for="t in scope.row.rightList" :key="t.id">
  66. <el-tooltip :content="t.RoomLocalName" placement="top">
  67. <div>{{t.RoomLocalName}}</div>
  68. </el-tooltip>
  69. </div>
  70. </template>
  71. </el-table-column>
  72. </el-table-column>
  73. <el-table-column label="操作" width="100px">
  74. <template slot-scope="scope">
  75. <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" plain>清除对应</el-button>
  76. </template>
  77. </el-table-column>
  78. </el-table>
  79. </div>
  80. </el-dialog>
  81. </template>
  82. <script>
  83. import { dynamicDeleteRelation } from "@/api/scan/request";
  84. export default {
  85. data() {
  86. return {
  87. dialogVisible: false, //弹窗显示与隐藏
  88. showheader: false,
  89. tableData: [] //数据list
  90. };
  91. },
  92. methods: {
  93. showDialog(data) {
  94. this.tableData = data;
  95. this.dialogVisible = true;
  96. },
  97. handleClose(done) { },
  98. //清除关系
  99. handleDelete(i, t) {
  100. let param = [];
  101. let object = {
  102. Objs: t.rightList,
  103. Points: t.leftList
  104. };
  105. param.push(object);
  106. dynamicDeleteRelation(param, res => {
  107. if (res.Result == "success") {
  108. this.$message.success("清除关联成功");
  109. this.tableData.splice(i, 1);
  110. this.$emit("delSuc");
  111. }
  112. });
  113. }
  114. },
  115. mounted() { },
  116. created() { }
  117. };
  118. </script>
  119. <style lang="scss" scoped>
  120. #historyAction {
  121. /deep/ .act-history.el-dialog {
  122. max-height: 60%;
  123. overflow-y: auto;
  124. overflow-x: hidden;
  125. td.bgf5 {
  126. background-color: #f5f7fa;
  127. }
  128. td {
  129. border-bottom: 1px solid #ccc;
  130. border-top: 1px solid #ccc;
  131. div {
  132. line-height: 34px;
  133. white-space: nowrap;
  134. text-overflow: ellipsis;
  135. overflow: hidden;
  136. }
  137. }
  138. .border-l {
  139. border-left: 2px solid #ccc;
  140. }
  141. }
  142. }
  143. </style>