gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改tooltip的样式

Browse Source
This commit is contained in:
zhangyu
2021-02-04 17:06:04 +08:00
parent 537c03de0d
commit d817ee3be7
4 changed files with 181 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -7,7 +7,7 @@
<div class="resize-box resize-box-echarts" ref="resizeBox">
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
<loading :ref="'localLoading'+chartIndex"></loading>
<div :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.rule}" :id="'chartTitle'+chartIndex" class="clearfix chartTitle" v-if="chartTitleShow">
<div :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.rule}" :id="'chartTitle'+chartIndex" class="clearfix chartTitle">
<el-popover
v-if="isError"
placement="top-start"
@@ -38,9 +38,9 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-icon" v-if="filter.from != $CONSTANTS.fromRoute.rule"><i :class="{'visible':caretShow,'hidden':!caretShow}" class="nz-icon nz-icon-xialaxuanze "></i></span>
<span class="chart-title-icon" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow"><i :class="{'visible':caretShow,'hidden':!caretShow}" class="nz-icon nz-icon-xialaxuanze "></i></span>
</span>
<ul :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" :id="'dropdownUl'+chartIndex" slot="dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" v-if="filter.from != $CONSTANTS.fromRoute.rule" v-show="dropdownMenuShow" >
<ul :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" :id="'dropdownUl'+chartIndex" slot="dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow" v-show="dropdownMenuShow" >
<li v-show="!isExplore" @click="refreshChart" class="el-dropdown-menu__item">
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
<li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`" v-show="!isExplore">

41
nezha-fronted/src/components/common/project/L5/topoTooltip.vue
View File

@@ -1,7 +1,7 @@
<template>
<div style="display: flex;">
<div class="tooltip-box" style="display: flex;" v-if="chartData.tooltipShow">
<span class="temp-dom"></span>
<div style="width: 400px;height: 400px;" v-if="chartData.displayChart">
<div class="tooltip-box-chart" style="" v-if="chartData.displayChart&&chartData.tooltipShow">
<line-chart-block v-if="chartData.type !== 'table'"
:key="'inner' + chartData.id"
:from="'project'"
@@ -12,7 +12,6 @@
:chart-index="0"
:chartTitleShow="false"
:chart-data="chartData">
</line-chart-block>
</div>
@@ -25,7 +24,9 @@
<!--:panel-id="-1"-->
<!--:chart-data="chartData"-->
<!--:chart-index="0"></chart-table>-->
<expression-info :chart-data="chartData"/>
<div class="tooltip-box-info">
<expression-info :chart-data="chartData" :filterTime="filterTime"/>
</div>
</div>
</template>
@@ -45,6 +46,7 @@
chartDataParent:{
type:Object,
},
filterTime:{},
},
watch:{
chartDataParent:{
@@ -58,10 +60,6 @@
data(){
return{
tempDom: {height: 400, width: ""},
filterTime: [
bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
],
chartDataTemp:{"id":8832,"prev":null,"next":null,"panelId":0,"title":"123","span":12,"height":400,"createAt":"2021-01-27 07:36:19","type":"line","unit":2,"weight":0,"pid":null,"buildIn":null,"seq":null,"param":{"last":0,"legendValue":{"total":"off","min":"off","avg":"off","last":"off","max":"off"},"threshold":"","valueMapping":{"mapping":[{"color":{"bac":"#fff","text":"#000"},"text":"","value":""}],"type":"text"},"url":"","nullType":"connected"},"elements":[{"id":14926,"chartId":null,"expression":"cache_evictions_total","type":"expert","legend":"","buildIn":null,"seq":null},{"id":14927,"chartId":null,"expression":"appDevice","type":"expert","legend":"","buildIn":null,"seq":null}],"sync":null,"asset":null,"isLoaded":true,"from":"__vue_devtool_undefined__","draggable":true,"resizable":true,"editable":true},
chartData:{},
filter:{
@@ -148,6 +146,7 @@
setTimeout(()=>{
this.$nextTick(() => {
let res=chartItem.res;
console.log(res);
if (res.length > 0) {
let series = [];
let singleStatRlt = '';
@@ -391,10 +390,34 @@
}
</script>
<style scoped>
<style lang="scss" scoped>
.temp-dom {
visibility: hidden;
font-size: 14px;
position: fixed;
}
.tooltip-box{
background: #FFFFFF;
box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.11);
border-radius: 4px;
padding: 10px;
max-height: 400px;
min-height: 200px;
.tooltip-box-chart{
border: 1px solid #E7EAED;
width: 400px;
height: 400px;
margin-right: 10px;
}
.tooltip-box-info{
border: 1px solid #E7EAED;
background: #FFFFFF;
max-height: 400px;
min-height: 200px;
min-width: 186px;
max-width: 300px;
}
}
</style>

73
nezha-fronted/src/components/common/project/popData/expressionInfo.vue
View File

@@ -1,27 +1,36 @@
<template>
<div class="expressionInfo">
<div v-if="expressionInfoData.length===0">No Data</div>
<div v-if="expressionInfoData.length>0">
<el-row v-for="(item,index) in expressionInfoData" :key="index">
{{item.legend.alias}}
{{item.showValue}}
<div class="expression-info">
<div class="expression-info-title">{{filterTime[1]}}</div>
<div class="expression-info-content" v-if="expressionInfoData.length===0">No Data</div>
<div class="expression-info-content" v-if="expressionInfoData.length>0">
<el-row v-for="(item,index) in expressionInfoData" :key="index" v-if="index<20">
<el-col class="info-title" :span="18">{{item.legend.alias}}</el-col>
<el-col class="info-content" :span="6" :style="{background:computeData(item).fill,color:computeData(item).text}">{{item.showValue}}</el-col>
</el-row>
</div>
</div>
</template>
<script>
import chartDataFormat from "@/components/charts/chartDataFormat";
export default {
name:"expressionInfo",
props:{
chartData:{
}
},
filterTime:{},
},
watch:{
chartData(){
this.expressionInfoData=[];
if(this.chartData.res.length>0){
this.chartData.res.forEach((item,index)=>{
if(item.status==='success'){
this.expressionInfoData=this.expressionInfoData.concat(item.data.result);
}
});
console.log(this.expressionInfoData);
}
}
},
data(){
@@ -30,7 +39,6 @@
}
},
mounted(){
console.log(this.chartData);
if(this.chartData.res.length>0){
this.chartData.res.forEach((item,index)=>{
if(item.status==='success'){
@@ -41,7 +49,16 @@
}
},
methods:{
computeData(item){
if(item.level){
return this.chartData.valueMapping.find((item2)=>item.level===item2.level).color
} else {
return {
fill:'#ffffff',
text:'#000000',
}
}
}
},
beforeDestroy(){
@@ -49,6 +66,38 @@
}
</script>
<style scoped>
<style lang="scss" scoped>
.expression-info{
padding: 5px;
height: 100%;
font-size: 14px;
color: #666666;
letter-spacing: 0;
.expression-info-title{
font-size: 14px;
color: #333333;
letter-spacing: 0;
font-weight: 600;
line-height: 40px;
height: 40px;
border-bottom: 1px dashed #DCE1E7;
}
.expression-info-content{
height: calc(100% - 60px);
overflow-y: auto;
padding:5px;
}
.info-title{
overflow: hidden;
padding-right: 10px;
text-overflow: ellipsis;
line-height: 20px;
font-weight: 500;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
}
.info-content{
text-align: center;
}
}
</style>

107
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -174,7 +174,7 @@
v-if="tooltipPosition.show&&!editTopologyFlag"
@mouseover="tooltipOver"
@mouseout="tooltipOut">
<topoTooltip :chartDataParent="chartData"/>
<topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
</div>
</div>
<!--<div class="left-bottom" v-if="editTopologyFlag">-->
@@ -267,6 +267,7 @@
export default {
data(){
return {
imgInit:false,//判断图片是否加载完成
toolGroup:'基本形状',
editFlag:true,
tools:Tools,
@@ -423,6 +424,9 @@
};
}
},
created(){
this.addNodeInit();
},
mounted(){
document.getElementById('topology-canvas'+this.topologyIndexF).addEventListener('mousemove',this.canvasMove);
window.addEventListener('resize',this.winResize)
@@ -450,6 +454,7 @@
let endTime=this.filterTime[1];
let startTime=this.filterTime[0];
let step=bus.getStep(startTime,endTime);
console.log(data);
data.pens&&data.pens.forEach((item,index)=>{
this.chartGetData.push({id:item.id,res:[]});
let arr=item.data.expressArr.map((ele)=>{
@@ -499,6 +504,7 @@
let endTime=this.filterTime[1];
let startTime=this.filterTime[0];
let step=bus.getStep(startTime,endTime);
console.log(data);
data.pens&&data.pens.forEach((item,index)=>{
this.chartGetData.push({id:item.id,res:[]});
let arr=item.data.expressArr.map((ele)=>{
@@ -517,7 +523,11 @@
Promise.all(promiseArr).then((res)=>{
getTopology(this.topologyIndex).open(data);
getTopology(this.topologyIndex).lock(1);
if(this.fromOverView){
getTopology(this.topologyIndex).centerView();
// getTopology(this.topologyIndex).fitView();
this.getNodesArr();
}
});
})
});
@@ -532,7 +542,7 @@
}
getTopology(this.topologyIndex).data.projectId=this.obj.id;
getTopology(this.topologyIndex).lock(1);
this.addNodeInit();
this.getModule()//获取module
resolve()
})
@@ -542,7 +552,7 @@
return new Promise(resolve=>{
this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{
let data=res.data.topo;
if(!data.pens){
if(!res.data.topo || !data.pens){
data={
bkColor:'#FFFFFF',
gridSize:10,
@@ -550,9 +560,24 @@
lineWidth:1,
ruleColor:"#4e4e4e"
};
}
this.saveData={...data};
resolve(data);
}else{
let timer=setInterval(()=>{
if(!this.imgInit){
return
}
clearInterval(timer);
data.pens.forEach((item=>{
console.log(item,this.iconArray.find(item1=>item1.id==item.imageId))
if(item.type===0&&item.data.imageId){
item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image
}
}))
this.saveData={...data};
resolve(data);
},100)
}
})
});
},
@@ -595,12 +620,12 @@
pen.animateType=selLevel.animateType;
pen.font.color=selLevel.color.text;
onChangeAnimateLine(pen,pen.animateType);
pen.font.color=selLevel.color.text;
}
} else {
if(pen.type===0&&pen.animatePlay){// 判断valueMapping 给相应的状态
onChangeAnimate(pen,pen.animateType);
}else if(pen.type===1&&pen.animatePlay){// 判断valueMapping 给相应的状态
console.log(123123123);
onChangeAnimateLine(pen,pen.animateType);
}
}
@@ -784,7 +809,7 @@
setTimeout(()=>{
this.dragFlag=true;
},100);
event.dataTransfer.setData('Text',JSON.stringify(node.data));
event.dataTransfer.setData('Text',JSON.stringify({...node.data,data:{imageId:node.data.imageId}}));
},
dragFlagChange(node){
getTopology(this.topologyIndex).addNode(
@@ -794,7 +819,8 @@
...node.data.rect,
x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth/2-50,
y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight/2-50
}
},
data:{imageId:node.data.imageId}
});
setTimeout(()=>{
this.dragFlag=true;
@@ -802,7 +828,7 @@
},
onMessage(event,data){
// console.log('onMessage',event,data);
console.log('onMessage',event,data);
// console.log(getTopology(this.topologyIndex))
if(getTopology(this.topologyIndex)){
this.cachesIndex=getTopology(this.topologyIndex).caches.index;
@@ -812,8 +838,9 @@
;
}
if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
if(data.type===0&& !data.data){
if(data.type===0&& !data.data.moduleId){
data.data={
...data.data,
moduleId:'',
moduleName:'',
show:false,
@@ -889,15 +916,17 @@
switch(event){
case 'moveInNode':
case 'moveInLine':
if(this.timer3){
clearTimeout(this.timer3);
this.timer3=null
}
// if(this.timer3){
// clearTimeout(this.timer3);
// this.timer3=null
// }
this.chartData={...data.data,...this.chartGetData.find(item=>item.id===data.id)};
this.tooltipPosition.show=true;
break;
case 'moveOutNode':
case 'moveOutLine':
this.tooltipPosition.show=false;
return
if(!this.timer3){
this.timer3=setTimeout(()=>{
this.tooltipPosition.show=false;
@@ -911,7 +940,6 @@
},300)
}
break;
}
// 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
setTimeout(()=>{
@@ -1184,34 +1212,35 @@
})
},
addNodeInit(selImageId){
addNodeInit(){
this.$get('/project/topo/icon').then(res=>{
this.imgageLoading=true;
this.tools[1].children=[];
let promiseArr=[];
res.data.list.forEach((item,index)=>{
item.imageName=item.name;
delete item.name;
this.dealImg(`/project/topo/icon/${item.id}`).then((data)=>{
item.image=data;
if(index===res.data.list.length-1){
setTimeout(()=>{
promiseArr.push( this.dealImg(`/project/topo/icon/${item.id}`));
});
Promise.all(promiseArr).then(res2=>{
this.iconArray=[...res.data.list];
this.iconArray.forEach(item=>{
this.iconArray.forEach((item,index)=>{
this.tools[1].children.push({
...imageTemp,
data:{
...imageTemp.data,
text:item.imageName,
image:item.image,
image:res2[index],
imageId:item.id,
}
})
item.image=res2[index];
});
this.imgageLoading=false;
},100)
}
console.log(this.iconArray);
this.imgInit=true;
})
});
})
},
@@ -1302,7 +1331,7 @@
},
//保存
saveTopology(){
let topologyData=getTopology(this.topologyIndex).data;
let topologyData=getTopology(this.topologyIndex).pureData();
let flag=true;
topologyData.pens.forEach(item=>{
if(item.type===0&&((flag&& !item.data)||(flag&&item.data&& !item.data.moduleId))){
@@ -1311,8 +1340,15 @@
});
if(flag){
this.editTopologyFlag=false;
localStorage.setItem('data',JSON.stringify(topologyData));
topologyData.pens.forEach(item=>{
if(item.type===0&&JSON.stringify(item.data.imageId)){
item.image="";
item.animateFrames=[];
item.animateReady=null;
delete item.img;
delete item.lastImage;
}
});
this.$put('/project/topo',{topo:JSON.stringify(topologyData),projectId:this.projectInfo.id}).then(res=>{
this.prevent_opt.save=false;
if(res.code===200){
@@ -1328,7 +1364,6 @@
getTopology(this.topologyIndex).canvasPos=domRect;
this.reload();
})
this.getNodesArr();
}
}).catch(res=>{
this.prevent_opt.save=false;
@@ -1380,14 +1415,14 @@
this.tooltipPosition.left=e.offsetX+20;
},
tooltipOver(){
clearTimeout(this.timer3);
this.timer3=null
// clearTimeout(this.timer3);
// this.timer3=null
},
tooltipOut(){
this.timer3=setTimeout(()=>{
this.tooltipPosition.show=false;
this.timer3=null
},300)
// this.timer3=setTimeout(()=>{
// this.tooltipPosition.show=false;
// this.timer3=null
// },300)
},
nodeDefaultWidth(nodeName){
switch(nodeName){
@@ -1402,7 +1437,9 @@
destroyed(){
getTopology(this.topologyIndex).destroy();
setTopology(this.topologyIndex,null);
if(document.getElementById('topology-canvas'+this.topologyIndexF)){
document.getElementById('topology-canvas'+this.topologyIndexF).removeEventListener('mousemove',this.canvasMove);
}
window.removeEventListener('resize',this.winResize)
}
}