fix:修改 应为1.2图标库的样式错乱

This commit is contained in:
zhangyu
2020-09-17 10:46:47 +08:00
parent 9871537b69
commit a644766b94
4 changed files with 27 additions and 15 deletions

View File

@@ -11,6 +11,9 @@
.nz-chart-dropdown{ .nz-chart-dropdown{
height: 75px; height: 75px;
} }
.legend-item{
max-width: 100%;
}
</style> </style>
<template> <template>
<div class="nz-chart-resize"> <div class="nz-chart-resize">
@@ -555,7 +558,7 @@
val = Number(item.data[1]); val = Number(item.data[1]);
} }
sum +=val; sum +=val;
str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`; str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 200px; line-height: 18px; font-size: 12px;">`;
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`; str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName} </div>`;
str += `<div style="padding-left: 10px;">`; str += `<div style="padding-left: 10px;">`;
str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2); str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);

View File

@@ -58,7 +58,7 @@
<i class="nz-icon nz-icon-shuidi" <i class="nz-icon nz-icon-shuidi"
v-show="item.show" v-show="item.show"
v-for="(item,index) in modelTop" v-for="(item,index) in modelTop"
:style="{top:(item.y- 80 + 49*(1-zoom*1))+'px',left:(item.x- 26 + 6*(1-zoom))+'px',transform:'scale('+zoom+')'}" :style="{top:(item.y- 80 + 49*(1-zoom))+'px',left:(item.x- 26 + 6*(1-zoom))+'px',transform:'scale('+zoom+')'}"
:ref="'modelTopId'+index" :ref="'modelTopId'+index"
@mousedown="modelTopClick(item,index)" @mousedown="modelTopClick(item,index)"
> >
@@ -471,7 +471,7 @@
this.nodes = new Vis.DataSet(nodes); this.nodes = new Vis.DataSet(nodes);
this.edges = new Vis.DataSet(edges); this.edges = new Vis.DataSet(edges);
this.network.setData({ this.network.setData({
nodes:this_.nodes, nodes: this_.nodes,
edges: this_.edges edges: this_.edges
}); });
this_.network.moveTo({ this_.network.moveTo({
@@ -561,7 +561,7 @@
setPopPosition(selId){//设置节点工具栏位置以及是否显示 setPopPosition(selId){//设置节点工具栏位置以及是否显示
if(!selId){return} if(!selId){return}
let position=this.network.canvasToDOM(this.network.getPositions([selId])[selId]); let position=this.network.canvasToDOM(this.network.getPositions([selId])[selId]);
this.networkPop.style.top = position.y - 85 + 85*(1-this.zoom*1)+'px'; this.networkPop.style.top = position.y - 85 + 85*(1-this.zoom)+'px';
this.networkPop.style.left = position.x - 32*this.zoom - 5*(1-this.zoom) +'px'; this.networkPop.style.left = position.x - 32*this.zoom - 5*(1-this.zoom) +'px';
if(!this.isFullScreen&&this.NodeArr.length===0&&!this.editVisNetwork){ if(!this.isFullScreen&&this.NodeArr.length===0&&!this.editVisNetwork){
this.networkPopShow=true; this.networkPopShow=true;
@@ -913,8 +913,7 @@
return false return false
}); });
this.network.on("resize", function (params,a) {//检测resize this.network.on("resize", function (params) {//检测resize
setTimeout(()=>{ setTimeout(()=>{
this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y; this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
this_.modelTopUpdate(); this_.modelTopUpdate();

View File

@@ -24,7 +24,9 @@
<!--<span class="chart-title-icon"><i class="nz-icon nz-icon-caret-bottom el-icon&#45;&#45;right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>--> <!--<span class="chart-title-icon"><i class="nz-icon nz-icon-caret-bottom el-icon&#45;&#45;right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
</span> </span>
<div style="height: 34px"> <div style="height: 34px">
<i class="nz-icon nz-icon-edit float-right " @click="editVisNetworkChange(true)" v-show="!editVisNetwork" :title="$t('project.topology.edit')"></i> <button style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime" @click="editVisNetworkChange(true)" v-show="!editVisNetwork">
<i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
</button>
<pick-time v-show="!editVisNetwork" :showTimePicker="false" class="float-right pickTime" :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time> <pick-time v-show="!editVisNetwork" :showTimePicker="false" class="float-right pickTime" :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
<!--<i class="nz-icon nz-icon-zoomin float-right"></i>--> <!--<i class="nz-icon nz-icon-zoomin float-right"></i>-->
<!--<i class="nz-icon nz-icon-exit-full-screen float-right"></i>--> <!--<i class="nz-icon nz-icon-exit-full-screen float-right"></i>-->
@@ -251,7 +253,7 @@
}, },
formatNodesArr(arr){ formatNodesArr(arr){
let arr1=[]; let arr1=[];
if(!arr || arr.length==0){ if(!arr || arr.length===0){
this.topologyLoading=false; this.topologyLoading=false;
return arr1 return arr1
} }
@@ -280,12 +282,13 @@
formatEdgesArr(arr){ formatEdgesArr(arr){
let arr1=[]; let arr1=[];
if(!arr){return arr1} if(!arr){return arr1}
arr.forEach((item,index)=>{ arr.forEach((item)=>{
console.log(item); console.log(item);
item.from=item.source; item.from=item.source;
item.to=item.target; item.to=item.target;
item.label=''; item.label='';
item.title='title'; item.title='title';
console.log(item.expressions);
item.expressions.forEach((item1,index)=>{ item.expressions.forEach((item1,index)=>{
this.$get('/prom/api/v1/query?query=' + item1.metric).then(res=>{ this.$get('/prom/api/v1/query?query=' + item1.metric).then(res=>{
// item.value=res.data.result[0].value;i // item.value=res.data.result[0].value;i
@@ -309,7 +312,7 @@
dealImg(url) { dealImg(url) {
// 处理后端传过来的图片流乱码问题 // 处理后端传过来的图片流乱码问题
if (url) { if (url) {
return new Promise((resolve,reject)=>{ return new Promise((resolve)=>{
this.$axios this.$axios
.get(url, { .get(url, {
responseType: "arraybuffer" responseType: "arraybuffer"
@@ -338,7 +341,7 @@
// this.reload(); // this.reload();
} }
}, },
dateChange(val) { dateChange() {
if(this.editVisNetwork) { if(this.editVisNetwork) {
return return
} }
@@ -366,10 +369,10 @@
.facade-top /deep/.active-icon{ .facade-top /deep/.active-icon{
margin-top: 0; margin-top: 0;
} }
.nz-icon-edit{ /*.nz-icon-edit{*/
margin-right: 12px; /*margin-right: 12px;*/
margin-top: 10px; /*margin-top: 10px;*/
} /*}*/
.vis-network .nz-icon-refresh{ .vis-network .nz-icon-refresh{
margin-right: 12px; margin-right: 12px;
margin-top: 10px; margin-top: 10px;

View File

@@ -288,5 +288,12 @@
/deep/ .el-upload-list { /deep/ .el-upload-list {
height: 40px; height: 40px;
} }
.el-upload .nz-icon-upload{
font-size: 67px;
color: #c0c4cc;
margin: 40px 0 16px;
line-height: 50px;
display: inline-block;
}
/*去除上传文件动画end*/ /*去除上传文件动画end*/
</style> </style>