123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176 |
- <template>
- <div class="box">
- <el-container>
- <el-header>
- <div class="boxName">
- 第二屏详情
- </div>
- <div class="spaceName">
- <b>空间名称:</b>{{spaceDetails.RoomLocalName?spaceDetails.RoomLocalName:"-"}}
- </div>
- </el-header>
- <el-container>
- <el-aside width="500px">
- <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-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" id="staticData"></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, getAllbusiness } 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();
- }
- },
- 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];
- if (this.$route.query.RoomID && this.$route.query.zone) {
- this.setFrame();
- }
- })
- },
- // 设置静态数据tab的iframe地址
- setFrame() {
- 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}`
- }
- },
- watch: {
- // 监听路由地址,并判断有RoomID和zone,重新请求空间
- "$route"(){
- if (this.$route.query.RoomID && this.$route.query.zone) {
- 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 {
- color: #333;
- 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 {
- color: #333;
- text-align: center;
- }
- .el-tabs__content {
- height: 750px;
- }
- #pane-staticData {
- height: 750px;
- div {
- height: 100%;
- }
- }
- </style>
|