feat ：样式调整 （90%）
This commit is contained in:
zhangyu
File diff suppressed because it is too large
Load Diff
@@ -9,17 +9,24 @@
|
||||
<!--<div> 保存为图片 </div>-->
|
||||
<div class="top-tool-item" @click="del"> <i class="nz-icon nz-icon-delete"/> </div>
|
||||
<div class="top-tool-item top-tool-item-scale">
|
||||
<el-input-number
|
||||
size="mini"
|
||||
v-model="scaleNum"
|
||||
:max="500"
|
||||
:min="25"
|
||||
:step="20"
|
||||
:precision="0"
|
||||
id="scaleNum"
|
||||
@change="scale">
|
||||
</el-input-number>
|
||||
<span class="percent">%</span>
|
||||
<span class="scale-number">
|
||||
<span class="scale-number-minus scale-number-symbol" @click="changeScale(-25)">-</span>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
width="111"
|
||||
trigger="click"
|
||||
class="scale-number-box"
|
||||
popper-class="scale-number-popover"
|
||||
>
|
||||
<div class="scale-num-pop" style=" width: 91px;min-width: 91px">
|
||||
<div @click="scale(50)" :class="['scale-num-pop',scaleNum==50?'is-active':'']">50</div>
|
||||
<div @click="scale(100)" :class="['scale-num-pop',scaleNum==100?'is-active':'']">100</div>
|
||||
<div @click="scale(200)" :class="['scale-num-pop',scaleNum==200?'is-active':'']">200</div>
|
||||
</div>
|
||||
<span class="scale-number-content" slot="reference">{{scaleNum}}%</span>
|
||||
</el-popover>
|
||||
<span class="scale-number-add scale-number-symbol" @click="changeScale(25)">+</span>
|
||||
</span>
|
||||
</div>
|
||||
<!--<div class="top-tool-item" @click="clear"> 清空画布 </div>-->
|
||||
|
||||
@@ -105,7 +112,18 @@
|
||||
fitView(){//自适应画布大小
|
||||
getTopology(this.index).fitView();
|
||||
},
|
||||
changeScale(num){
|
||||
this.scaleNum+=num;
|
||||
if(this.scaleNum<25){
|
||||
this.scaleNum=25
|
||||
}
|
||||
if(this.scaleNum>400){
|
||||
this.scaleNum=400
|
||||
}
|
||||
this.scale(this.scaleNum)
|
||||
},
|
||||
scale(val){
|
||||
this.scaleNum=val;
|
||||
getTopology(this.index).scaleTo(val/100);
|
||||
},
|
||||
del(){
|
||||
@@ -124,7 +142,26 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.scale-number-popover{
|
||||
width: 111px;
|
||||
min-width: 111px;
|
||||
.el-popover{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.scale-number-popover .scale-num-pop{
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
width: 91px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.scale-number-popover .scale-num-pop.is-active{
|
||||
color: #FA901C;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.tool-top {
|
||||
border-radius: 2px;
|
||||
@@ -153,6 +190,35 @@
|
||||
left: 68px;
|
||||
font-size:12px ;
|
||||
}
|
||||
.scale-number{
|
||||
width: 91px;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
justify-content: space-between;
|
||||
.scale-number-content{
|
||||
width: 59px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
line-height: 28px;
|
||||
}
|
||||
.scale-number-symbol{
|
||||
background: #E9E9E9;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
/deep/ .el-input--mini{
|
||||
input{
|
||||
border: none;
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<div class="flex middle special-select mb10" style="width: 75px;height: 28px;display: inline-block;margin: 0 40px 0 20px">
|
||||
<div class="flex middle special-select mb10" style="width: 75px;height: 28px;display: inline-block;margin: 0 40px 0 20px;background: #fff">
|
||||
<div class="full pr10">
|
||||
<el-select v-model="lineName" placeholder="请选择" size="small"
|
||||
:popper-append-to-body="false"
|
||||
@@ -107,7 +107,7 @@
|
||||
:class="{'nz-btn-disabled':prevent_opt.save}">
|
||||
{{$t('project.topology.save')}}
|
||||
</button>
|
||||
<button @click="cancelTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
|
||||
<button @click="cancelTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
|
||||
{{$t('project.topology.cancel')}}
|
||||
</button>
|
||||
</span>
|
||||
@@ -448,7 +448,9 @@
|
||||
this.chartGetData[index].res=obj.arr;
|
||||
if(obj.item.type===0){// 判断valueMapping 给相应的状态
|
||||
// obj.item.animateType='warning';
|
||||
// onChangeAnimate(obj.item,'warning')
|
||||
if(obj.item.animateType){
|
||||
onChangeAnimate(obj.item,obj.item.animateType)
|
||||
}
|
||||
}else if(obj.item.type===1){// 判断valueMapping 给相应的状态
|
||||
// onChangeAnimateLine(obj.item,'beads')
|
||||
}
|
||||
@@ -465,9 +467,45 @@
|
||||
|
||||
reload(){
|
||||
this.getTopologyData().then((data)=>{
|
||||
getTopology(this.topologyIndex).open(data);
|
||||
getTopology(this.topologyIndex).lock(1);
|
||||
this.getNodesArr();
|
||||
this.openTopologyData(data).then(()=>{
|
||||
//获取对应的值 给节点 连线添加对应动画
|
||||
console.log(data);
|
||||
this.lineName=data.lineName?data.lineName:this.lineName;
|
||||
this.chartGetData=[];
|
||||
let axiosArr=[];
|
||||
let endTime=this.filterTime[1];
|
||||
let startTime=this.filterTime[0];
|
||||
let step=bus.getStep(startTime,endTime);
|
||||
data.pens&&data.pens.forEach(item=>{
|
||||
console.log(item.id);
|
||||
this.chartGetData.push({id:item.id,res:[]});
|
||||
let arr=item.data.expressArr.map((ele)=>{
|
||||
let query=encodeURIComponent(ele);
|
||||
query+='&nullType='+'connected';
|
||||
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
|
||||
});
|
||||
axiosArr.push({item,arr});
|
||||
});
|
||||
|
||||
axios.all(axiosArr).then(all=>{
|
||||
all.forEach((obj,index)=>{
|
||||
this.chartGetData[index].res=obj.arr;
|
||||
if(obj.item.type===0){// 判断valueMapping 给相应的状态
|
||||
// obj.item.animateType='warning';
|
||||
if(obj.item.animateType){
|
||||
onChangeAnimate(obj.item,obj.item.animateType)
|
||||
}
|
||||
}else if(obj.item.type===1){// 判断valueMapping 给相应的状态
|
||||
// onChangeAnimateLine(obj.item,'beads')
|
||||
}
|
||||
})
|
||||
}).then(()=>{
|
||||
getTopology(this.topologyIndex).open(data);
|
||||
getTopology(this.topologyIndex).lock(1);
|
||||
});
|
||||
|
||||
this.getNodesArr();
|
||||
})
|
||||
});
|
||||
},
|
||||
openTopologyData(data){
|
||||
@@ -489,7 +527,7 @@
|
||||
getTopologyData(){
|
||||
return new Promise(resolve=>{
|
||||
let data=localStorage.getItem('data');
|
||||
data=data?JSON.parse(data):{bkColor:'#FFFFFF'};
|
||||
data=data?JSON.parse(data):{bkColor:'#FFFFFF',gridSize:10,gridColor:'#ededed',lineWidth:1,ruleColor:"#4e4e4e"};
|
||||
this.saveData={...data};
|
||||
resolve(data);
|
||||
});
|
||||
@@ -638,7 +676,7 @@
|
||||
animatePlay:data.animatePlay,
|
||||
fillStyle:data.fillStyle,
|
||||
strokeStyle:data.strokeStyle,
|
||||
lineWidth:0,
|
||||
lineWidth:this.nodeDefaultWidth(data.name),
|
||||
iconToolState:true,
|
||||
//chart 配置项
|
||||
valueMapping:[],
|
||||
@@ -650,6 +688,8 @@
|
||||
type:'line',
|
||||
displayChart:true,
|
||||
aggregation:'last',
|
||||
title:'',
|
||||
url:'',
|
||||
}
|
||||
}else if(data.type==1&& !data.data){
|
||||
//连线是否自动计算锚点
|
||||
@@ -672,6 +712,9 @@
|
||||
type:'line',
|
||||
displayChart:true,
|
||||
aggregation:'last',
|
||||
title:'',
|
||||
moduleName:'',
|
||||
url:'',
|
||||
}
|
||||
}
|
||||
if(data.type===0||data.type===1){
|
||||
@@ -717,6 +760,10 @@
|
||||
case 'node':
|
||||
case 'addNode':
|
||||
this.modulesDiff(data);
|
||||
if(data.data.expressArr.length===0){
|
||||
data.data.expressArr.push('');
|
||||
data.data.legends.push('');
|
||||
}
|
||||
this.props={
|
||||
node:data,
|
||||
line:null,
|
||||
@@ -744,6 +791,10 @@
|
||||
pen:data,
|
||||
pens:null,
|
||||
};
|
||||
if(data.data.expressArr.length===0){
|
||||
data.data.expressArr.push('');
|
||||
data.data.legends.push('');
|
||||
}
|
||||
this.$nextTick(()=>{
|
||||
if(this.$refs.CanvasProps){
|
||||
this.$refs.CanvasProps.tab='1';
|
||||
@@ -1106,6 +1157,7 @@
|
||||
this.toolShow.attrCord=[domRect.width-350,0];
|
||||
this.toolShow.height=domRect.height;
|
||||
getTopology(this.topologyIndex).canvasPos=domRect;
|
||||
this.reload();
|
||||
})
|
||||
this.getNodesArr();
|
||||
}else{
|
||||
@@ -1158,6 +1210,15 @@
|
||||
this.timer3=null
|
||||
},300)
|
||||
},
|
||||
nodeDefaultWidth(nodeName){
|
||||
switch(nodeName){
|
||||
case 'myCube':
|
||||
case "rectangleImg":
|
||||
return 0;
|
||||
default:
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyed(){
|
||||
getTopology(this.topologyIndex).destroy();
|
||||
@@ -1173,6 +1234,7 @@
|
||||
.el-collapse-item__header {
|
||||
padding: 0 10px;
|
||||
background-color: #ffffff;
|
||||
height: 32px;
|
||||
}
|
||||
.el-collapse-item__header.is-active{
|
||||
background: #F6F6F6;
|
||||
@@ -1511,7 +1573,7 @@
|
||||
}
|
||||
|
||||
.props {
|
||||
width: 400px;
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
border: none;
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user