detailsDialog.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <template>
  2. <el-dialog :visible.sync="isShow.details" :width="width">
  3. <span slot="title">
  4. <span v-show="step == 1">{{title}}</span>
  5. <span v-show="step == 2 || step == 3">
  6. <el-button type="text" @click="goBack" icon="el-icon-arrow-left"></el-button>
  7. </span>
  8. </span>
  9. <div id="detailsDialog" v-show="step == 1">
  10. <p class="influence-p">{{list.name}}</p>
  11. <el-tabs type="border-card">
  12. <el-tab-pane label="空间详情">
  13. <div class="saga-details">
  14. <iframe height="400px" v-if="isShow.details" width="100%" :src="iframeSrc"></iframe>
  15. </div>
  16. </el-tab-pane>
  17. <el-tab-pane label="与空间相关联的设备">
  18. <div>
  19. <equip-table ref="myEquip"></equip-table>
  20. </div>
  21. </el-tab-pane>
  22. </el-tabs>
  23. </div>
  24. <div v-show="step == 2">
  25. <add-equip :activeTabType="activeTabType" ref="addEquip"></add-equip>
  26. </div>
  27. <div id="detailsDialog" v-if="step == 3">
  28. <iframe v-if="step == 3" height="400px" width="100%" :src="iframeSrc2"></iframe>
  29. </div>
  30. <div v-show="step == 1" style="line-height: 50px;">
  31. <el-button @click="step = 3">编辑信息</el-button>
  32. <el-button type="danger" @click="delSpace" plain>删除该业务空间</el-button>
  33. <el-dropdown style="margin-left: 10px;" :hide-on-click="false" @command="addMyEquip">
  34. <span class="el-dropdown-link">
  35. 添加设备<i class="el-icon-arrow-down el-icon--right"></i>
  36. </span>
  37. <el-dropdown-menu slot="dropdown">
  38. <el-dropdown-item command="EquipinSpace">空间内的设备</el-dropdown-item>
  39. <el-dropdown-item command="EquipforSpace">服务于空间的设备</el-dropdown-item>
  40. <el-dropdown-item command="EquipXSpace">其他关系的设备</el-dropdown-item>
  41. </el-dropdown-menu>
  42. </el-dropdown>
  43. </div>
  44. </el-dialog>
  45. </template>
  46. <script>
  47. import { deleteZone } from "@/api/scan/request";
  48. import equipTable from "@/components/business_space/table/equipTable";
  49. import addEquip from "@/components/business_space/table/addEquip";
  50. import {
  51. mapGetters,
  52. mapActions
  53. } from "vuex";
  54. export default {
  55. components: {
  56. equipTable,
  57. addEquip
  58. },
  59. computed: {
  60. ...mapGetters("layout", [
  61. "projectId",
  62. "secret",
  63. "userId"
  64. ])
  65. },
  66. props: {
  67. width: {
  68. type: String,
  69. default: "1200px"
  70. },
  71. title: {
  72. type: String,
  73. default: "头部信息"
  74. },
  75. isShow: {
  76. type: Object
  77. },
  78. param: {
  79. type: Object
  80. },
  81. activeTabType: {
  82. type: Object,
  83. default: function() {
  84. return {
  85. "code": "GeneralZone",
  86. "name": "默认分区",
  87. "rel_type": "99"
  88. }
  89. }
  90. }
  91. },
  92. data() {
  93. return {
  94. step: 1,
  95. data: null,
  96. proj: null,
  97. activeName: "1",
  98. list: {},
  99. iframeSrc: "",
  100. iframeSrc2: "",
  101. buildMess: ""
  102. };
  103. },
  104. created() {},
  105. methods: {
  106. handleClick() {},
  107. getData(list, buildMess) {
  108. this.step = 1;
  109. this.list = list;
  110. this.buildMess = buildMess;
  111. this.$nextTick(() => {
  112. this.$refs.myEquip.getData(list, this.activeTabType);
  113. });
  114. let perjectId = this.projectId,
  115. secret = this.secret;
  116. this.iframeSrc =
  117. process.env.BASE_URL +
  118. ":8889/#/details?perjectId=" +
  119. perjectId +
  120. "&secret=" +
  121. secret +
  122. "&FmId=" +
  123. list.id +
  124. "&type=0&code=" + this.activeTabType.code;
  125. this.iframeSrc2 =
  126. process.env.BASE_URL +
  127. ":8889/#/changeMess?perjectId=" +
  128. perjectId +
  129. "&secret=" +
  130. secret +
  131. "&id=" +
  132. list.id +
  133. "&type=" + this.activeTabType.code;
  134. },
  135. addMyEquip(str) {
  136. this.step = 2;
  137. this.$nextTick(() => {
  138. console.log(this.activeTabType)
  139. this.$refs.addEquip.getData(this.list, this.buildMess, str, this.activeTabType);
  140. });
  141. },
  142. goBack() {
  143. this.step = 1;
  144. this.$refs.myEquip.getData(this.list, this.activeTabType);
  145. },
  146. delSpace() {
  147. this.$confirm("此操作将永久删除该业务空间, 是否继续?", "删除", {
  148. confirmButtonText: "确定",
  149. cancelButtonText: "取消",
  150. type: "warning"
  151. })
  152. .then(() => {
  153. let param = {
  154. zone: this.activeTabType.code,
  155. data: [{RoomID: this.list.id}]
  156. }
  157. deleteZone(param, res => {
  158. if (res.Result == 'success') {
  159. this.$message({ type: "success", message: "删除成功!" })
  160. this.$emit("del")
  161. }
  162. })
  163. })
  164. .catch(() => {
  165. this.$message({
  166. type: "info",
  167. message: "已取消删除"
  168. });
  169. });
  170. }
  171. }
  172. };
  173. </script>
  174. <style lang="less">
  175. .el-dialog__header{
  176. .el-dropdown{
  177. font-size: 12px;
  178. line-height: 33px;
  179. }
  180. }
  181. #detailsDialog {
  182. .el-tabs__content {
  183. max-height: 400px;
  184. }
  185. .influence-p {
  186. height: 40px;
  187. line-height: 40px;
  188. font-size: 17px;
  189. margin-bottom: 10px;
  190. }
  191. }
  192. </style>