123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194 |
- <template>
- <el-dialog :visible.sync="isShow.details" :width="width">
- <span slot="title">
- <span v-show="step == 1">{{title}}</span>
- <span v-show="step == 2 || step == 3">
- <el-button type="text" @click="goBack" icon="el-icon-arrow-left"></el-button>
- </span>
- </span>
- <div id="detailsDialog" v-show="step == 1">
- <p class="influence-p">{{list.name}}</p>
- <el-tabs type="border-card">
- <el-tab-pane label="空间详情">
- <div class="saga-details">
- <iframe height="400px" v-if="isShow.details" width="100%" :src="iframeSrc"></iframe>
- </div>
- </el-tab-pane>
- <el-tab-pane label="与空间相关联的设备">
- <div>
- <equip-table ref="myEquip"></equip-table>
- </div>
- </el-tab-pane>
- </el-tabs>
- </div>
- <div v-show="step == 2">
- <add-equip :activeTabType="activeTabType" ref="addEquip"></add-equip>
- </div>
- <div id="detailsDialog" v-if="step == 3">
- <iframe v-if="step == 3" height="400px" width="100%" :src="iframeSrc2"></iframe>
- </div>
- <div v-show="step == 1" style="line-height: 50px;">
- <el-button @click="step = 3">编辑信息</el-button>
- <el-button type="danger" @click="delSpace" plain>删除该业务空间</el-button>
- <el-dropdown style="margin-left: 10px;" :hide-on-click="false" @command="addMyEquip">
- <span class="el-dropdown-link">
- 添加设备<i class="el-icon-arrow-down el-icon--right"></i>
- </span>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item command="EquipinSpace">空间内的设备</el-dropdown-item>
- <el-dropdown-item command="EquipforSpace">服务于空间的设备</el-dropdown-item>
- <el-dropdown-item command="EquipXSpace">其他关系的设备</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </div>
- </el-dialog>
- </template>
- <script>
- import { deleteZone } from "@/api/scan/request";
- import equipTable from "@/components/business_space/table/equipTable";
- import addEquip from "@/components/business_space/table/addEquip";
- import {
- mapGetters,
- mapActions
- } from "vuex";
- export default {
- components: {
- equipTable,
- addEquip
- },
- computed: {
- ...mapGetters("layout", [
- "projectId",
- "secret",
- "userId"
- ])
- },
- props: {
- width: {
- type: String,
- default: "1200px"
- },
- title: {
- type: String,
- default: "头部信息"
- },
- isShow: {
- type: Object
- },
- param: {
- type: Object
- },
- activeTabType: {
- type: Object,
- default: function() {
- return {
- "code": "GeneralZone",
- "name": "默认分区",
- "rel_type": "99"
- }
- }
- }
- },
- data() {
- return {
- step: 1,
- data: null,
- proj: null,
- activeName: "1",
- list: {},
- iframeSrc: "",
- iframeSrc2: "",
- buildMess: ""
- };
- },
- created() {},
- methods: {
- handleClick() {},
- getData(list, buildMess) {
- this.step = 1;
- this.list = list;
- this.buildMess = buildMess;
- this.$nextTick(() => {
- this.$refs.myEquip.getData(list, this.activeTabType);
- });
- let perjectId = this.projectId,
- secret = this.secret;
- this.iframeSrc =
- process.env.BASE_URL +
- ":8889/#/details?perjectId=" +
- perjectId +
- "&secret=" +
- secret +
- "&FmId=" +
- list.id +
- "&type=0&code=" + this.activeTabType.code;
- this.iframeSrc2 =
- process.env.BASE_URL +
- ":8889/#/changeMess?perjectId=" +
- perjectId +
- "&secret=" +
- secret +
- "&id=" +
- list.id +
- "&type=" + this.activeTabType.code;
- },
- addMyEquip(str) {
- this.step = 2;
- this.$nextTick(() => {
- console.log(this.activeTabType)
- this.$refs.addEquip.getData(this.list, this.buildMess, str, this.activeTabType);
- });
- },
- goBack() {
- this.step = 1;
- this.$refs.myEquip.getData(this.list, this.activeTabType);
- },
- delSpace() {
- this.$confirm("此操作将永久删除该业务空间, 是否继续?", "删除", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- })
- .then(() => {
- let param = {
- zone: this.activeTabType.code,
- data: [{RoomID: this.list.id}]
- }
- deleteZone(param, res => {
- if (res.Result == 'success') {
- this.$message({ type: "success", message: "删除成功!" })
- this.$emit("del")
- }
- })
- })
- .catch(() => {
- this.$message({
- type: "info",
- message: "已取消删除"
- });
- });
- }
- }
- };
- </script>
- <style lang="less">
- .el-dialog__header{
- .el-dropdown{
- font-size: 12px;
- line-height: 33px;
- }
- }
- #detailsDialog {
- .el-tabs__content {
- max-height: 400px;
- }
- .influence-p {
- height: 40px;
- line-height: 40px;
- font-size: 17px;
- margin-bottom: 10px;
- }
- }
- </style>
|