|
@@ -0,0 +1,144 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="box">
|
|
|
+ <el-container>
|
|
|
+ <el-header>
|
|
|
+ <div class="boxName">
|
|
|
+ 第二屏详情
|
|
|
+ </div>
|
|
|
+ <div class="spaceName">
|
|
|
+ 空间名称:{{spaceDetails.RoomLocalName}}
|
|
|
+ </div>
|
|
|
+ </el-header>
|
|
|
+ <el-container>
|
|
|
+ <el-aside width="500px">
|
|
|
+ Aside
|
|
|
+ </el-aside>
|
|
|
+ <el-main>
|
|
|
+ <el-tabs v-model="activeTab" type='card'>
|
|
|
+ <template v-for="(item,index) in tabsList">
|
|
|
+ <el-tab-pane :name="item.Code" :key="index" :label="item.Name">
|
|
|
+ <!-- 静态数据 -->
|
|
|
+ <div v-if="activeTab === 'staticData'" style="width:100%">
|
|
|
+ <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
|
|
|
+ </div>
|
|
|
+ <!-- 动态数据 -->
|
|
|
+ <div v-if="activeTab === 'dynamicData'" style="width:100%">
|
|
|
+ <iframe height="100%" width="100%" :src="iframeSrc"></iframe>
|
|
|
+ </div>
|
|
|
+ <!-- 对象关系 -->
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </template>
|
|
|
+ </el-tabs>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import { queryZone } from '@/api/scan/request'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabsList: [
|
|
|
+ { Code: 'staticData', Name: '静态数据' },
|
|
|
+ { Code: 'dynamicData', Name: '动态数据' },
|
|
|
+ { Code: 'objectRelationship', Name: '对象关系' }
|
|
|
+ ],
|
|
|
+ activeTab: 'staticData',
|
|
|
+ spaceDetails: {},
|
|
|
+ iframeSrc: '',
|
|
|
+ projectId: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (this.$route.query.RoomID && this.$route.query.zone) {
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
+ this.setFrame();
|
|
|
+ },
|
|
|
+ updated() { },
|
|
|
+ mounted() { },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters('layout', ['userInfo', 'projects', 'userId', 'secret'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ // 获取空间本地名称
|
|
|
+ let params = {
|
|
|
+ data: {
|
|
|
+ Filters: `RoomID="${this.$route.query.RoomID}"`
|
|
|
+ },
|
|
|
+ zone: this.$route.query.zone
|
|
|
+ }
|
|
|
+ queryZone(params, res => {
|
|
|
+ this.spaceDetails = res.Content[0];
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 设置静态数据tab的iframe
|
|
|
+ setFrame() {
|
|
|
+ this.projectId = localStorage.getItem('projectId');
|
|
|
+ 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: {
|
|
|
+ $route(to, from) {
|
|
|
+ // 监听路由变化就重新获取空间名称
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+#screenBox .screen-router[data-v-6c06ede0] {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.el-header {
|
|
|
+ padding: 0;
|
|
|
+ height: 80px !important;
|
|
|
+ .boxName {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 50px;
|
|
|
+ height: 50px !important;
|
|
|
+ padding: 0 20px;
|
|
|
+ background-color: #3f4f62;
|
|
|
+ }
|
|
|
+ .spaceName {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 0 20px;
|
|
|
+ border-bottom: 1px solid black;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-aside {
|
|
|
+ // background-color: #d3dce6;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 200px;
|
|
|
+}
|
|
|
+.el-main {
|
|
|
+ // background-color: #e9eef3;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.el-tabs__content {
|
|
|
+ height: 750px;
|
|
|
+}
|
|
|
+#pane-staticData {
|
|
|
+ height: 750px;
|
|
|
+ div {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|