|
@@ -1,191 +1,219 @@
|
|
|
<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>
|
|
|
+ <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>
|
|
|
- <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>
|
|
|
+ <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 { zoneCreate } 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 = [{RoomID: this.list.id}];
|
|
|
- zoneCreate(param, res => {
|
|
|
- if (res.Result == 'success') {
|
|
|
- this.$message({ type: "success", message: "删除成功!" })
|
|
|
- this.$emit("del")
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.$message({
|
|
|
- type: "info",
|
|
|
- message: "已取消删除"
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
+import { zoneCreate } 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 +
|
|
|
+ window.__systemConf.BASE_URL +
|
|
|
+ ":8889/#/details?perjectId=" +
|
|
|
+ perjectId +
|
|
|
+ "&secret=" +
|
|
|
+ secret +
|
|
|
+ "&FmId=" +
|
|
|
+ list.id +
|
|
|
+ "&type=0&code=" +
|
|
|
+ this.activeTabType.code;
|
|
|
+ this.iframeSrc2 =
|
|
|
+ // process.env.BASE_URL +
|
|
|
+ window.__systemConf.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 = [{ RoomID: this.list.id }];
|
|
|
+ zoneCreate(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;
|
|
|
- }
|
|
|
- }
|
|
|
+.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>
|