303 lines
9.4 KiB
Vue
303 lines
9.4 KiB
Vue
<template>
|
||
<div style="width: 100%;height: 100%" v-loading="loading">
|
||
<hexagonBox
|
||
ref="hexagonBox"
|
||
:hexData="data"
|
||
:col="col"
|
||
:length="length"
|
||
:colorFrom="'level'"
|
||
:colorSet="colorSet"
|
||
:infoSet="infoSet"
|
||
:infoShow="infoShow"
|
||
:infoHide="infoHide"
|
||
:hexagonEdge="hexagonEdge"
|
||
:from="from"
|
||
:hexagonSvgID="hexagonSvgID"
|
||
:showTooltip="showTooltip"
|
||
@changeAsset="changeAsset"
|
||
@assetMove="assetMove"
|
||
@closeAsset="closeAsset"
|
||
/>
|
||
<alertLabel
|
||
v-if="showTooltip&&assetData.show"
|
||
v-loading="assetData.loading"
|
||
ref="alertLabel"
|
||
:id="assetData.id"
|
||
:that="assetData"
|
||
:type="'asset'"
|
||
:LRTriangle="LRTriangle"
|
||
:style="{
|
||
'transform-origin': `0px 300px`,
|
||
transform:`scale(${assetData.rate})`
|
||
}"
|
||
></alertLabel>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import hexagonBox from '../honeycomb/hexagonFigureSvg'
|
||
import alertLabel from '../alert/alertLabel2'
|
||
function textMouseDown(e){
|
||
window.event? window.event.cancelBubble = true : e.stopPropagation();
|
||
}
|
||
function textMouseEnter(e){
|
||
window.event? window.event.cancelBubble = true : e.stopPropagation();
|
||
}
|
||
function textMouseLeave(e){
|
||
window.event? window.event.cancelBubble = true : e.stopPropagation();
|
||
}
|
||
export default {
|
||
name:"messageAsset",
|
||
components:{
|
||
hexagonBox,
|
||
alertLabel
|
||
},
|
||
props:{
|
||
data:{},
|
||
col:{},
|
||
length:{},
|
||
from:{},
|
||
hexagonSvgID:{
|
||
type:String,
|
||
default:'hexagonSvg'
|
||
},
|
||
showTooltip:{
|
||
type:Boolean,
|
||
default:false,
|
||
},
|
||
},
|
||
watch:{
|
||
data:{
|
||
immediate: false,
|
||
deep: true,
|
||
handler() {
|
||
}
|
||
},
|
||
col:{
|
||
immediate: false,
|
||
deep: true,
|
||
handler() {
|
||
}
|
||
},
|
||
length:{
|
||
immediate: false,
|
||
deep: true,
|
||
handler() {
|
||
}
|
||
},
|
||
|
||
},
|
||
data(){
|
||
return{
|
||
hexagonEdge:90,
|
||
loading:false,
|
||
assetData:{
|
||
id:'',
|
||
loading:false,
|
||
show:false,
|
||
rate:1,
|
||
position:{
|
||
top:0,
|
||
left:0,
|
||
mt:0,
|
||
},
|
||
},
|
||
boxWidth:'',
|
||
LRTriangle:true,//true 左三角 false 右
|
||
}
|
||
},
|
||
methods:{
|
||
colorSet(item){//设置方块颜色
|
||
// let color = item.level==='P1'?'#FAAFAF':(item.level==='P2'?'#FFCF92':'#99D7C2');
|
||
// let color = level ==='P1'?'#FAAFAF':(level==='P2'?'#FFCF92':'#99D7C2');
|
||
let alert=item.alert[0];
|
||
if(alert.P1>0){
|
||
return{
|
||
color:'#FAAFAF',
|
||
hoverColor:'#FFCDCD',
|
||
};
|
||
} else if(alert.P2>0){
|
||
return{
|
||
color:'#FFAB99',
|
||
hoverColor:'#FABEB2',
|
||
};
|
||
} else if(alert.P3>0){
|
||
return{
|
||
color:'#FFCF92',
|
||
hoverColor:'#FFE0B8',
|
||
};
|
||
}else{
|
||
return{ color:'#99D7C2',hoverColor:'#B2ECD9'}
|
||
}
|
||
},
|
||
infoSet(group,allHexagonRect,allHexagonText,data,item,fontSize,that){
|
||
// 设置内部文本
|
||
// group 对应六边形所在的组。allHexagonRect吧所有文本框放入，方便控制显示隐藏。data 六边形的相关数 data.center 中心点。that 子组件实例
|
||
let rgbColor='0,0,0';
|
||
let str='';
|
||
let textPaddingWidth='';
|
||
let textPaddingHeight='';
|
||
let rect0=group.rect(that.hexagonEdge+20, that.hexagonEdge/3)
|
||
.attr({
|
||
x: data.center[0]-that.hexagonEdge/2-10,
|
||
y: data.center[1]-that.hexagonEdge,
|
||
rx:5,
|
||
ry:5,
|
||
}).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
|
||
str=this.from==='asset'?item.host:item.module;
|
||
str+='';
|
||
if(str.length>=15){
|
||
str=str.slice(0,12)+"..."
|
||
}
|
||
let text0=group.text(str).attr({x:0,y:0,style:'cursor:text'}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600,cursor:'text'});
|
||
textPaddingWidth=(that.hexagonEdge+20)-(text0.bbox().width);
|
||
textPaddingHeight=(that.hexagonEdge/3)-(text0.bbox().height);
|
||
text0.attr({
|
||
x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2,
|
||
y: data.center[1]-that.hexagonEdge + textPaddingHeight/2-4,
|
||
}).hide();
|
||
allHexagonRect.push(rect0);
|
||
allHexagonText.push(text0);
|
||
text0.on('mousedown',textMouseDown);
|
||
|
||
|
||
let rect1=group.rect(that.hexagonEdge+20, that.hexagonEdge/3)
|
||
.attr({
|
||
x: data.center[0]-that.hexagonEdge/2-10,
|
||
y: data.center[1]-that.hexagonEdge/2-7.5,
|
||
rx:6,
|
||
ry:6,
|
||
}).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
|
||
str="P1 : "+item.alert[0].P1;
|
||
if(str.length>=15){
|
||
str=str.slice(0,12)+"..."
|
||
}
|
||
let text1=group.text(str).attr({x:0,y:0,style:'cursor:default'}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600,cursor:'default'});
|
||
textPaddingWidth=(that.hexagonEdge+20)-(text1.bbox().width);
|
||
textPaddingHeight=(that.hexagonEdge/3)-(text1.bbox().height);
|
||
text1.attr({
|
||
x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2,
|
||
y: data.center[1]-that.hexagonEdge/2-7.5 +textPaddingHeight/2-4,
|
||
}).hide();
|
||
|
||
|
||
|
||
allHexagonRect.push(rect1);
|
||
allHexagonText.push(text1);
|
||
|
||
|
||
let rect2=group.rect(that.hexagonEdge+20, that.hexagonEdge/3).attr({
|
||
x: data.center[0]-that.hexagonEdge/2-10,
|
||
y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 +0.5,
|
||
rx:6,
|
||
ry:6,
|
||
}).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
|
||
str="P2 : "+item.alert[0].P2;
|
||
if(str.length>=15){
|
||
str=str.slice(0,12)+"..."
|
||
}
|
||
let text2=group.text(str).attr({x:0,y:0,style:'cursor:default'}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600,cursor:'default'});
|
||
textPaddingWidth=(that.hexagonEdge+20)-(text2.bbox().width);
|
||
textPaddingHeight=(that.hexagonEdge/3)-(text2.bbox().height);
|
||
text2.attr({
|
||
x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2,
|
||
y: data.center[1]-that.hexagonEdge/2 + that.hexagonEdge/3 + 0.5+textPaddingHeight/2-4,
|
||
}).hide();
|
||
allHexagonRect.push(rect2);
|
||
allHexagonText.push(text2);
|
||
|
||
|
||
let rect3=group.rect(that.hexagonEdge+20, that.hexagonEdge/3)
|
||
.attr({
|
||
x: data.center[0]-that.hexagonEdge/2-10,
|
||
y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 + 5.5,
|
||
rx:6,
|
||
ry:6,
|
||
}).fill({ color: `rgba(${rgbColor},0)`}).data({color:rgbColor});
|
||
str="P3 : "+item.alert[0].P3;
|
||
if(str.length>=15){
|
||
str=str.slice(0,12)+"..."
|
||
}
|
||
let text3=group.text(str).attr({x:0,y:0,style:'cursor:default'}).font({size:fontSize}).fill({opacity:0,color:'#fff',weight:600,cursor:'default'});
|
||
textPaddingWidth=(that.hexagonEdge+20)-(text3.bbox().width);
|
||
textPaddingHeight=(that.hexagonEdge/3)-(text3.bbox().height);
|
||
text3.attr({
|
||
x: data.center[0]-that.hexagonEdge/2-10 +textPaddingWidth/2,
|
||
y: data.center[1]-that.hexagonEdge/2+ that.hexagonEdge/3*2 +5.5+textPaddingHeight/2-4,
|
||
}).hide();
|
||
|
||
allHexagonRect.push(rect3);
|
||
allHexagonText.push(text3);
|
||
|
||
},
|
||
infoShow(allHexagonRect,allHexagonText){
|
||
allHexagonRect.forEach(item=>{
|
||
let rgbColor = item.data('color')
|
||
item.fill({ color: `rgba(${rgbColor},0.2)`})
|
||
})
|
||
allHexagonText.forEach(item=>{
|
||
item.fill({ opacity:1}).show()
|
||
});
|
||
},
|
||
infoHide(allHexagonRect,allHexagonText){
|
||
allHexagonRect.forEach(item=>{
|
||
let rgbColor = item.data('color')
|
||
item.fill({ color: `rgba(${rgbColor},0)`})
|
||
});
|
||
allHexagonText.forEach(item=>{
|
||
item.fill({ opacity:0}).hide();
|
||
});
|
||
},
|
||
changeAsset(data,e){
|
||
this.assetData.id=data;
|
||
let boxWidth=document.getElementsByClassName('content-right')[0].offsetWidth;
|
||
console.log(boxWidth);
|
||
this.boxWidth=boxWidth;
|
||
// this.assetData.rate=window.screen.height/1297;
|
||
this.$nextTick(()=>{
|
||
this.assetData.show=true;
|
||
this.$nextTick(()=>{
|
||
this.calcPosition(e)
|
||
})
|
||
})
|
||
},
|
||
assetMove(e){
|
||
if(!this.assetData.show){return}
|
||
this.calcPosition(e)
|
||
},
|
||
calcPosition(e){
|
||
let boxWidth=this.boxWidth;
|
||
let minus=(e.pageY-300)+this.$refs.alertLabel.$el.offsetHeight-window.innerHeight;
|
||
// window.innerHeight
|
||
if(minus<=0){
|
||
this.assetData.position.top=e.pageY-300;
|
||
this.assetData.position.mt=300;
|
||
} else if(minus>0){
|
||
this.assetData.position.top=window.innerHeight-this.$refs.alertLabel.$el.offsetHeight;
|
||
this.assetData.position.mt=e.pageY-(window.innerHeight-this.$refs.alertLabel.$el.offsetHeight);
|
||
}
|
||
if(boxWidth/2>e.pageX-200){
|
||
this.assetData.position.left=e.pageX + 35;
|
||
this.LRTriangle=true;
|
||
}else{
|
||
this.assetData.position.left=e.pageX - 35 - this.$refs.alertLabel.$el.offsetWidth;
|
||
this.LRTriangle=false
|
||
}
|
||
},
|
||
closeAsset(){
|
||
this.assetData.show=false
|
||
},
|
||
endLoading(){
|
||
this.loading=false;
|
||
},
|
||
startLoading(){
|
||
this.loading=true;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|