<template>
|
<div class="pageWarp" ref="pageWarp">
|
<vue-draggable-resizable :w="item.w" :h="item.h" :x="item.x" :y="item.y" @dragging="onDrag" @resizing="onResize"
|
@refLineParams="getRefLineParams" :parent="true" :debug="false" :snap="true" :snapTolerance="5"
|
style="transition: none; will-change: transform;" @activated="onActived(item)" v-for="(item,i) in layOut.children"
|
:key="i">
|
<div @contextmenu.prevent.stop="openMenu(item,$event)" style="width:100%;height:100%;">
|
<layout-box :title="item.name">
|
<div v-if="item.type=='latticeBar'" style="width:100%;height:100%">
|
<lattice-bar :id="'chart'+item.id" :ref="'chart'+item.id"></lattice-bar>
|
</div>
|
<div v-else-if="item.type=='ImgPieChart'" style="width:100%;height:100%">
|
<img-pie-chart :id="'chart'+item.id" :ref="'chart'+item.id"></img-pie-chart>
|
</div>
|
<div v-else-if="item.type=='TriangleBarChart'" style="width:100%;height:100%">
|
<triangle-bar-chart :id="'chart'+item.id" :ref="'chart'+item.id"></triangle-bar-chart>
|
</div>
|
<div v-else-if="item.type=='AbeamProChart'" style="width:100%;height:100%">
|
<div class="flexCon">
|
<div class="con">
|
<abeam-pro-chart :id="'chart'+item.id" :ref="'chart'+item.id"></abeam-pro-chart>
|
</div>
|
</div>
|
</div>
|
</layout-box>
|
</div>
|
</vue-draggable-resizable>
|
|
<!--<div class="chartCon">
|
<layout-box title="电源状态">
|
<div class="chartItem">
|
<pross-pie-chart id="ProssPieChart1" ref="ProssPieChart1"></pross-pie-chart>
|
</div>
|
<div class="chartItem">
|
<pross-pie-chart id="ProssPieChart2" ref="ProssPieChart2"></pross-pie-chart>
|
</div>
|
<div class="chartItem">
|
<pross-pie-chart id="ProssPieChart3" ref="ProssPieChart3"></pross-pie-chart>
|
</div>
|
<div class="chartItem">
|
<pross-pie-chart id="ProssPieChart4" ref="ProssPieChart4"></pross-pie-chart>
|
</div>
|
</layout-box>
|
</div> -->
|
<span class="ref-line v-line" v-for="(item,index) in vLine" :key="'vLine'+index" v-show="item.display"
|
:style="{ left: item.position, top: item.origin, height: item.lineLength}"></span>
|
<span class="ref-line h-line" v-for="(item,index) in hLine" :key="'hLine'+index" v-show="item.display"
|
:style="{ top: item.position, left: item.origin, width: item.lineLength}"></span>
|
<ul v-show="rightMenuVisible" :style="{left:contextmenuLeft+'px',top:contextmenuTop+'px'}" class="contextmenu">
|
<li><i class="el-icon-refresh-right"></i> 重新加载</li>
|
<li @click="removeModular"><i class="el-icon-delete"></i> 删除</li>
|
</ul>
|
</div>
|
</template>
|
|
<script>
|
import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
|
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
|
import LayoutBox from "@/components/LayoutBox";
|
import latticeBar from './charts/latticeBar.vue'
|
import ImgPieChart from './charts/imgPieChart.vue';
|
import TriangleBarChart from './charts/triangleBarChart.vue';
|
import AbeamProChart from './charts/abeamProChart.vue';
|
// import ProssPieChart from '../components/charts/prossPieChart.vue';
|
|
export default {
|
props: ['layOut'],
|
components: {
|
VueDraggableResizable,
|
LayoutBox,
|
latticeBar,
|
ImgPieChart,
|
TriangleBarChart,
|
AbeamProChart,
|
// ProssPieChart,
|
},
|
data() {
|
return {
|
draggableActived: null,
|
vLine: [],
|
hLine: [],
|
rightMenuVisible: false,
|
contextmenuTop: 0,
|
contextmenuLeft: 0,
|
clickItem: null,
|
}
|
},
|
watch: {
|
rightMenuVisible(value) {
|
if (value) {
|
document.body.addEventListener('click', this.closeMenu)
|
} else {
|
document.body.removeEventListener('click', this.closeMenu)
|
}
|
}
|
},
|
mounted() {
|
//禁止鼠标右键菜单
|
document.oncontextmenu = function () {
|
return false;
|
};
|
this.loadLayout();
|
// this.$refs.ProssPieChart1.setData({
|
// title: '交流停电数量',
|
// data: 56,
|
// color: '#37a9b3'
|
// });
|
},
|
methods: {
|
// 选中要调整的面板时
|
onActived(panel) {
|
this.draggableActived = panel;
|
},
|
//面板改变大小时
|
onResize(x, y, width, height) {
|
this.layOut.children.filter((card) => {
|
if (this.draggableActived.id === card.id) {
|
card.w = width;
|
card.h = height;
|
card.x = x;
|
card.y = y;
|
let nowChart = `chart${this.draggableActived.id}`;
|
this.$refs[nowChart][0].resize();
|
}
|
return true;
|
});
|
},
|
//面板改变位置时
|
onDrag(x, y) {
|
this.layOut.children.filter((card) => {
|
if (this.draggableActived.id === card.id) {
|
card.x = x;
|
card.y = y;
|
}
|
return true;
|
});
|
},
|
// 辅助线回调事件
|
getRefLineParams(params) {
|
const {
|
vLine,
|
hLine
|
} = params
|
this.vLine = vLine
|
this.hLine = hLine
|
},
|
//模块右键菜单打开
|
openMenu(clickItem, e) {
|
this.clickItem = clickItem;
|
this.contextmenuLeft = e.clientX
|
this.contextmenuTop = e.clientY
|
this.rightMenuVisible = true
|
},
|
//模块右键菜单关闭
|
closeMenu() {
|
this.rightMenuVisible = false
|
},
|
//删除大屏数据模块
|
removeModular() {
|
this.layOut.children.map((item, i) => {
|
if (item.name == this.clickItem.name) {
|
this.layOut.children.splice(i, 1);
|
}
|
})
|
},
|
// 加载布局数据
|
loadLayout() {
|
let width = this.$refs.pageWarp.clientWidth;
|
let height = this.$refs.pageWarp.clientHeight;
|
this.layOut.children.map((item) => {
|
item.x *= width;
|
item.y *= height;
|
item.w *= width;
|
item.h *= height;
|
let nowChart = `chart${item.id}`;
|
this.$refs[nowChart][0].setData(item.setData);
|
this.$refs[nowChart][0].resize();
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.pageWarp {
|
width: 100%;
|
height: calc(100% - 52px);
|
background-color: #031D67;
|
background-image: url("../assets/images/bg-box.png");
|
background-size: 100% 100%;
|
padding: 10px;
|
}
|
|
.chartCon {
|
width: 33.33%;
|
height: 50%;
|
padding: 10px;
|
float: left;
|
box-sizing: border-box;
|
}
|
|
.flexCon {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.flexCon .con {
|
width: 100%;
|
height: 60%;
|
}
|
|
.chartCon .chartItem {
|
width: 50%;
|
height: 48%;
|
float: left;
|
margin-bottom: 2%;
|
}
|
|
.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;
|
}
|
|
.flexCon {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.flexCon .con {
|
width: 100%;
|
height: 60%;
|
}
|
</style>
|
