|
@@ -7,12 +7,26 @@
|
|
第二屏详情
|
|
第二屏详情
|
|
</div>
|
|
</div>
|
|
<div class="spaceName">
|
|
<div class="spaceName">
|
|
- 空间名称:{{spaceDetails.RoomLocalName}}
|
|
|
|
|
|
+ <b>空间名称:</b>{{spaceDetails.RoomLocalName?spaceDetails.RoomLocalName:"-"}}
|
|
</div>
|
|
</div>
|
|
</el-header>
|
|
</el-header>
|
|
<el-container>
|
|
<el-container>
|
|
<el-aside width="500px">
|
|
<el-aside width="500px">
|
|
- Aside
|
|
|
|
|
|
+ <div class="aside-top">
|
|
|
|
+ <div class="aside-top-left">
|
|
|
|
+ <p><b>空间功能区类型:</b>{{spaceDetails.RoomFuncType?spaceDetails.RoomFuncType:"-"}}</p>
|
|
|
|
+ <p><b>备注文字:</b>{{spaceDetails.Intro?spaceDetails.Intro:"-"}}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="aside-top-right">
|
|
|
|
+ <p><b>空间二维码:</b><span v-if="!spaceDetails.RoomQRCode">-</span></p>
|
|
|
|
+ <!-- <img src="./1.png" alt="" v-if="spaceDetails.QrCode"> -->
|
|
|
|
+ <img :src="'/image-service/common/file_get/'+ spaceDetails.RoomQRCode +'?systemId=dataPlatform'" alt="二维码图片"
|
|
|
|
+ v-if="spaceDetails.RoomQRCode">
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <p><b>位置图片:</b></p>
|
|
|
|
+ </div>
|
|
</el-aside>
|
|
</el-aside>
|
|
<el-main>
|
|
<el-main>
|
|
<el-tabs v-model="activeTab" type='card'>
|
|
<el-tabs v-model="activeTab" type='card'>
|
|
@@ -20,17 +34,17 @@
|
|
<el-tab-pane :name="item.Code" :key="index" :label="item.Name">
|
|
<el-tab-pane :name="item.Code" :key="index" :label="item.Name">
|
|
<!-- 静态数据 -->
|
|
<!-- 静态数据 -->
|
|
<div v-if="activeTab === 'staticData'" style="width:100%">
|
|
<div v-if="activeTab === 'staticData'" style="width:100%">
|
|
- <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
|
|
|
|
|
|
+ <iframe height="100%" width="100%" :src="iframeSrc" id="staticData"></iframe>
|
|
</div>
|
|
</div>
|
|
<!-- 动态数据 -->
|
|
<!-- 动态数据 -->
|
|
<div v-if="activeTab === 'dynamicData'" style="width:100%">
|
|
<div v-if="activeTab === 'dynamicData'" style="width:100%">
|
|
- <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
|
|
|
|
|
|
+ <!-- <iframe height="100%" width="100%" :src="iframeSrc"></iframe> -->
|
|
</div>
|
|
</div>
|
|
<!-- 对象关系 -->
|
|
<!-- 对象关系 -->
|
|
<div v-if="activeTab === 'objectRelationship'" style="width:100%">
|
|
<div v-if="activeTab === 'objectRelationship'" style="width:100%">
|
|
|
|
+ <!-- <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
|
|
<iframe height="100%" width="100%" :src="iframeSrc"></iframe>
|
|
<iframe height="100%" width="100%" :src="iframeSrc"></iframe>
|
|
- <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
|
|
|
|
- <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
|
|
|
|
|
|
+ <iframe height="100%" width="100%" :src="iframeSrc"></iframe> -->
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
</template>
|
|
</template>
|
|
@@ -43,7 +57,7 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import { mapGetters } from 'vuex'
|
|
-import { queryZone } from '@/api/scan/request'
|
|
|
|
|
|
+import { queryZone, getAllbusiness } from '@/api/scan/request'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
@@ -63,16 +77,13 @@ export default {
|
|
if (this.$route.query.RoomID && this.$route.query.zone) {
|
|
if (this.$route.query.RoomID && this.$route.query.zone) {
|
|
this.getData();
|
|
this.getData();
|
|
}
|
|
}
|
|
- this.setFrame();
|
|
|
|
},
|
|
},
|
|
- updated() { },
|
|
|
|
- mounted() { },
|
|
|
|
computed: {
|
|
computed: {
|
|
...mapGetters('layout', ['userInfo', 'projects', 'userId', 'secret'])
|
|
...mapGetters('layout', ['userInfo', 'projects', 'userId', 'secret'])
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
getData() {
|
|
getData() {
|
|
- // 获取空间本地名称
|
|
|
|
|
|
+ // 获取空间信息
|
|
let params = {
|
|
let params = {
|
|
data: {
|
|
data: {
|
|
Filters: `RoomID="${this.$route.query.RoomID}"`
|
|
Filters: `RoomID="${this.$route.query.RoomID}"`
|
|
@@ -81,18 +92,24 @@ export default {
|
|
}
|
|
}
|
|
queryZone(params, res => {
|
|
queryZone(params, res => {
|
|
this.spaceDetails = res.Content[0];
|
|
this.spaceDetails = res.Content[0];
|
|
|
|
+ if (this.$route.query.RoomID && this.$route.query.zone) {
|
|
|
|
+ this.setFrame();
|
|
|
|
+ }
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- // 设置静态数据tab的iframe
|
|
|
|
|
|
+ // 设置静态数据tab的iframe地址
|
|
setFrame() {
|
|
setFrame() {
|
|
this.projectId = localStorage.getItem('projectId');
|
|
this.projectId = localStorage.getItem('projectId');
|
|
|
|
+ document.getElementById("staticData").contentWindow.location.reload(true);
|
|
this.iframeSrc = `${process.env.BASE_URL}:8889/#/details?perjectId=${this.projectId}&secret=${this.secret}&FmId=${this.$route.query.RoomID}&type=0&code=${this.$route.query.zone}`
|
|
this.iframeSrc = `${process.env.BASE_URL}:8889/#/details?perjectId=${this.projectId}&secret=${this.secret}&FmId=${this.$route.query.RoomID}&type=0&code=${this.$route.query.zone}`
|
|
- },
|
|
|
|
|
|
+ }
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
- $route(to, from) {
|
|
|
|
- // 监听路由变化就重新获取空间名称
|
|
|
|
- this.getData();
|
|
|
|
|
|
+ // 监听路由地址,并判断有RoomID和zone,重新请求空间
|
|
|
|
+ "$route"(){
|
|
|
|
+ if (this.$route.query.RoomID && this.$route.query.zone) {
|
|
|
|
+ this.getData();
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -122,13 +139,28 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.el-aside {
|
|
.el-aside {
|
|
- // background-color: #d3dce6;
|
|
|
|
color: #333;
|
|
color: #333;
|
|
- text-align: center;
|
|
|
|
- line-height: 200px;
|
|
|
|
|
|
+ border: 1px solid #e4e7ed;
|
|
|
|
+ margin: 20px 0 0 20px;
|
|
|
|
+ padding: 20px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ .aside-top {
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ .aside-top-left {
|
|
|
|
+ float: left;
|
|
|
|
+ width: 300px;
|
|
|
|
+ }
|
|
|
|
+ .aside-top-right {
|
|
|
|
+ float: right;
|
|
|
|
+ img {
|
|
|
|
+ margin-left: -10px;
|
|
|
|
+ width: 140px;
|
|
|
|
+ height: 140px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.el-main {
|
|
.el-main {
|
|
- // background-color: #e9eef3;
|
|
|
|
color: #333;
|
|
color: #333;
|
|
text-align: center;
|
|
text-align: center;
|
|
}
|
|
}
|