<template>
|
<div class="screenWarp" :style="'background-image:url('+screenBg+')'" ref="cover">
|
<screen-title :title="nowlayOut.appName" :bgImg="screenTitleBg" v-if="isHeader"></screen-title>
|
<div class="pageWarp" ref="pageWarp">
|
<vue-draggable-resizable :w="item.w" :h="item.h" :x="item.x" :y="item.y" :parent="true" :debug="false" :snap="true" :snapTolerance="5" :draggable="false" :resizable="false" style="transition: none; will-change: transform;" v-for="(item,i) in nowlayOut.children" :key="i">
|
<div style="width:100%;height:100%;">
|
<layout-box :title="item.name">
|
<div style="width:100%;height:100%" :id="'layout-box'+item.id" :ref="'layout-box'+item.id" v-if="isNow"></div>
|
</layout-box>
|
</div>
|
</vue-draggable-resizable>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
|
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
|
import LayoutBox from "@/components/LayoutBox";
|
import {
|
screenAllConfig
|
} from '@/assets/js/api'
|
let clientWidth, clientHeight;
|
import charts from '@/assets/js/charts';
|
import ScreenTitle from '../components/screenTitle.vue'
|
export default {
|
components: {
|
VueDraggableResizable,
|
LayoutBox,
|
ScreenTitle,
|
},
|
data() {
|
return {
|
nowlayOut: {},
|
modularArr: [],
|
modularTitle: charts.modularTitle,
|
modularBg: charts.modularBg,
|
modularData: charts.modularData,
|
screenTitleBg: null,
|
screenBg: null,
|
isHeader: true,
|
isNow: true,
|
state: 1,
|
}
|
},
|
mounted() {
|
if (this.$route.query.userId) {
|
localStorage.setItem('userId', this.$route.query.userId);
|
}
|
this.nowlayOut.appName = this.$route.query.name;
|
if (this.$route.query.head && this.$route.query.head == 1) {
|
this.isHeader = false
|
}
|
this.$nextTick(() => {
|
if (this.$route.query.newPlatform) {
|
this.$store.dispatch('app/setNewPlatform', this.$route.query.newPlatform)
|
}
|
clientWidth = this.$refs.pageWarp.clientWidth;
|
clientHeight = this.$refs.pageWarp.clientHeight;
|
this.loadLayout();
|
})
|
window.addEventListener('resize', () => {
|
this.$nextTick(() => {
|
location.reload()
|
})
|
})
|
},
|
methods: {
|
|
// 加载布局数据
|
loadLayout() {
|
let sendData = {
|
appId: this.$route.query.id
|
}
|
screenAllConfig(sendData).then((res) => {
|
if (res.data && res.data.data && res.data.code == 1) {
|
this.nowlayOut = res.data.data;
|
this.nowlayOut.children.map((item) => {
|
for (const key in this.modularData) {
|
if (item.type == this.modularData[key].chartData.type) {
|
item.setData = this.modularData[key].chartData.setData
|
}
|
}
|
this.modularTitle.map((item) => {
|
if (item.name == this.nowlayOut.headPic) {
|
this.screenTitleBg = item.img;
|
}
|
});
|
this.modularBg.map((item) => {
|
if (item.name == this.nowlayOut.bgPic) {
|
this.screenBg = item.img;
|
}
|
});
|
item.x *= clientWidth;
|
item.y *= clientHeight;
|
item.w *= clientWidth;
|
item.h *= clientHeight;
|
setTimeout(() => {
|
let nowBox = this.$refs[`layout-box${item.id}`];
|
let modular = require(`@/components/charts/${item.type}.vue`).default;
|
let modularExtend = Vue.extend(modular);
|
let chartModular = new modularExtend().$mount();
|
chartModular.id = `chart${item.id}`
|
if (nowBox[0].children.length > 0) {
|
nowBox[0].replaceChild(chartModular.$el, nowBox[0].children[0])
|
} else {
|
nowBox[0].appendChild(chartModular.$el)
|
this.modularArr.push(chartModular);
|
}
|
if (chartModular.id == "chart14" && sessionStorage.getItem('newPlatform')) {
|
this.$nextTick(() => {
|
chartModular.$children[0].setData()
|
})
|
} else {
|
chartModular.setData();
|
}
|
chartModular.resize();
|
}, 0)
|
|
})
|
|
window.addEventListener("message", (msg) => {
|
// 处理数据
|
this.state = msg.data.state
|
if (this.state == 1) {
|
this.modularArr.map(item => {
|
if (item.postData) {
|
item.postData()
|
}
|
})
|
} else if (this.state == 0) {
|
this.modularArr.map(item => {
|
if (item.outClear) {
|
item.outClear()
|
}
|
})
|
}
|
});
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
}
|
},
|
beforeDestroy() {
|
this.modularArr.map(item => {
|
if (item.outClear) {
|
item.outClear()
|
}
|
})
|
this.isNow = false
|
}
|
}
|
</script>
|
|
<style scoped>
|
.screenWarp {
|
width: 100%;
|
height: 100%;
|
background-color: #031d67;
|
background-size: 100% 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.pageWarp {
|
width: 100%;
|
flex: 1;
|
}
|
|
.contextmenu {
|
margin: 0;
|
background: #27343e;
|
z-index: 3000;
|
position: absolute;
|
list-style-type: none;
|
padding: 5px 0;
|
border-radius: 4px;
|
font-size: 12px;
|
font-weight: 400;
|
color: #bcc9d4;
|
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
}
|
|
.contextmenu li {
|
padding: 0 6px;
|
line-height: 28px;
|
height: 28px;
|
border-left: 2px solid transparent;
|
cursor: pointer;
|
overflow: hidden;
|
padding-right: 3em;
|
display: flex;
|
align-items: center;
|
}
|
|
.contextmenu li i {
|
margin-right: 8px;
|
}
|
|
.contextmenu li:hover {
|
background-color: #1d262e;
|
color: #2681ff;
|
border-left: 2px solid #2681ff;
|
}
|
</style>
|
