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

style：样式微调

Browse Source
This commit is contained in:
zhangyu
2020-09-07 14:33:34 +08:00
parent 55b9f2e033
commit c667c659a2
4 changed files with 138 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/common/language/en.js
View File

@@ -855,7 +855,7 @@ const en = {
cancel:'cancel',
addLine:'Add Line',
lineName:'Line Name',
width:'width',
width:'thickness',
option:'Option',
arrows:'Arrows',
color:'Color',

194
nezha-fronted/src/components/common/project/addLine.vue
View File

@@ -21,73 +21,68 @@
<el-input v-model="form.lineName" size="small"></el-input>
</el-form-item>
<el-row class="form-title">{{$t('project.topology.option')}}</el-row>
<el-form-item :label="$t('project.topology.width')" prop="width" class="line-name">
<el-input v-model="form.width" size="small"></el-input>
</el-form-item>
<!--<el-form-item label="roundness" class="line-name">-->
<!--<el-input v-model="form.roundness"></el-input>-->
<!--</el-form-item>-->
<!--<el-form-item label="type" class="line-name">-->
<!--<el-select v-model="form.type" placeholder="" :popper-append-to-body="false">-->
<!--&lt;!&ndash;'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'&ndash;&gt;-->
<!--<el-option label="dynamic" value="dynamic"></el-option>-->
<!--<el-option label="continuous" value="continuous"></el-option>-->
<!--<el-option label="discrete" value="discrete"></el-option>-->
<!--<el-option label="diagonalCross" value="diagonalCross"></el-option>-->
<!--<el-option label="straightCross" value="straightCross"></el-option>-->
<!--<el-option label="horizontal" value="horizontal"></el-option>-->
<!--<el-option label="vertical" value="vertical"></el-option>-->
<!--<el-option label="curvedCW" value="curvedCW"></el-option>-->
<!--<el-option label="cubicBezier" value="cubicBezier"></el-option>-->
<!--</el-select>-->
<!--</el-form-item>-->
<el-form-item :label="$t('project.topology.arrows')" prop="arrows" class="arrows">
<el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" size="small">
<div slot="prefix">
<img v-if="form.arrows=='from'" src="./image/leftArrow.png" />
<img v-if="form.arrows=='to'" src="./image/rightArrow.png" />
<img v-if="form.arrows=='from;to'" src="./image/LRArrow.png" />
<img v-if="form.arrows=='0'" src="./image/noArrow.png" />
<div class="line-option">
<el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">
<el-input v-model="form.width" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('project.topology.arrows')" prop="arrows" class="arrows">
<el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" size="small">
<div slot="prefix">
<img v-if="form.arrows=='from'" src="./image/leftArrow.png" />
<img v-if="form.arrows=='to'" src="./image/rightArrow.png" />
<img v-if="form.arrows=='from;to'" src="./image/LRArrow.png" />
<img v-if="form.arrows=='0'" src="./image/noArrow.png" />
</div>
<el-option label="from" value="from"><img src="./image/leftArrow.png" /></el-option>
<el-option label="to" value="to"><img src="./image/rightArrow.png" /></el-option>
<el-option label="from;to" value="from;to"><img src="./image/LRArrow.png" /></el-option>
<el-option label="" value="0"><img src="./image/noArrow.png" /></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('project.topology.color')" class="color">
<div class="color-show" @click="colorPickerClick" v-clickoutside="colorOut">
<div class="color-show-left" :style="{background:form.color}"></div>
<span> {{form.color}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-show="showPicker"></i>
</span>
</div>
<el-option label="from" value="from"><img src="./image/leftArrow.png" /></el-option>
<el-option label="to" value="to"><img src="./image/rightArrow.png" /></el-option>
<el-option label="from;to" value="from;to"><img src="./image/LRArrow.png" /></el-option>
<el-option label="" value="0"><img src="./image/noArrow.png" /></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('project.topology.color')" class="color">
<div class="color-show" @click="colorPickerClick">
<div class="color-show-left" :style="{background:form.color}"></div>
<span> {{form.color}}</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="form.color"
:predefine="predefineColors"
ref="colorPicker"
@active-change="colorChange"
>
</el-color-picker>
</div>
</el-form-item>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="form.color"
:predefine="predefineColors"
ref="colorPicker"
@active-change="colorChange"
>
</el-color-picker>
</div>
</el-form-item>
</div>
<div class="right-box-sub-title">
<span>{{$t('alert.config.expr')}}</span>
<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div>
<el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<el-row class="element-item expr" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<el-form-item :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + index">
<el-row>
<template>
<el-col class="expr-title" style="">
{{$t('project.topology.chartName')}}
</el-col>
<el-col style="width: calc(100% - 140px);">
<el-input
v-model="form.name[index]"
type="text"
size="small"
></el-input>
</el-col>
<el-col style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
</template>
</el-row>
</el-form-item>
<el-row>
<template>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
{{$t('project.topology.chartName')}}
</el-col>
<el-col style="width: calc(100% - 140px);">
<el-input v-model="name[index-1]" type="text" size="small"></el-input>
</el-col>
<el-col style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
</template>
</el-row>
<el-row>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
<el-col class="expr-title">
{{$t('project.topology.unit')}}
</el-col>
<el-col style="width: calc(100% - 120px);">
@@ -110,10 +105,11 @@
@change="expressionChange"
@removeExpression="removeExpression"
:showRemove="false"
:projectRightBox="true"
></promql-input>
<el-row>
<template>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
<el-col class="expr-title">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
<i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
@@ -172,11 +168,12 @@
lineId:n.id,
width:n.width,
lineName:n.label,
name:[],
};
if( n.expressions){
n.expressions.forEach((item,index)=>{
this.addExpression();
this.name[index]=item.name;
this.form.name[index]=item.name;
this.unit[index]=item.unit;
this.expressions[index]=item.metric;
this.legends[index]=item.legend;
@@ -191,7 +188,7 @@
data(){
return{
form:{
arrows:'',
arrows:'0',
label:'',
color:'#1e90ff',
lineName:'',
@@ -199,6 +196,7 @@
width:'',
type:'',
roundness:'',
name:[],
},
predefineColors: [
'#ff4500',
@@ -209,18 +207,18 @@
'#1e90ff',
'#c71585',
],
showPicker:false,
unitOptions: chartDataFormat.unitOptions(),
promqlKeys:[],
expressions: [],
promqlCount:0,
elementIds:[],
legends:[],
name:[],
unit:[],
rules:{
arrows: [
{ required: true, message: '', trigger: 'change' },
],
// arrows: [
// { required: true, message: '', trigger: 'change' },
// ],
lineName: [
{ required: true, message: '', trigger: 'change' },
],
@@ -249,7 +247,7 @@
model.expressions=[];
this.promqlKeys.forEach((item,index)=>{
model.expressions.push({
"name": this.name[index],
"name": this.form.name[index],
"unit": this.unit[index],
"metric": this.expressions[index],
"legend": this.legends[index],
@@ -265,7 +263,7 @@
addExpression() {
this.expressions.push('');
this.legends.push('');
this.name.push('');
this.form.name.push('');
this.unit.push('');
this.promqlKeys.push(getUUID());
this.elementIds.push("");
@@ -275,7 +273,7 @@
if (this.promqlCount >= 1) {
this.expressions.splice(index, 1);
this.legends.splice(index, 1);
this.name.splice(index, 1);
this.form.name.splice(index, 1);
this.unit.splice(index, 1);
this.promqlKeys.splice(index, 1);
this.elementIds.splice(index, 1);
@@ -301,6 +299,7 @@
this.esc();
},
colorPickerClick(){
this.showPicker=true;
this.$refs['colorPicker'].showPicker=true;
},
colorChange(val){
@@ -313,6 +312,9 @@
let b = parseInt(rgb[2].split(')')[0]);
let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return hex;
},
colorOut(){
this.showPicker=false;
}
},
@@ -345,7 +347,7 @@
border-radius: 5px;
display: flex;
align-items: center;
width: calc(100% - 30px);
width: calc(100% - 60px);
height: 30px;
}
.color-show-left{
@@ -372,7 +374,7 @@
.arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
border: 1px solid #DCDFE6;
height: 28px;
width: calc(100% - 30px);
width: calc(100% - 60px);
}
.arrows /deep/ .el-input__inner{
display: none;
@@ -384,6 +386,52 @@
/deep/ .el-select{
width: 262px;
}
.line-option{
display: flex;
flex-wrap: wrap;
}
.line-option > div{
width: 50%;
}
.line-option .line-width .el-input{
width: clac(100% - 60px);
}
/deep/ .el-select .el-input .el-select__caret{
vertical-align: middle;
}
.color-arrows{
color: #C0C4CC;
position: absolute;
right: 65px;
}
.color-arrows .nz-icon{
font-size: 14px;
}
.element-item{
padding: 20px 0;
border-bottom: 1px dashed #dfe7f2;
width: 100%;
}
.element-item.expr /deep/ .el-form-item__content{
position: relative;
margin-left: 0 !important;
}
.element-item.expr /deep/ .el-form-item__content .el-row{
margin-bottom: 0;
}
.element-item.expr /deep/ .el-form-item__content .el-form-item__error{
left: 120px;
}
.expr-title{
width: 120px;
padding-right: 20px;
text-align: right;
color: #666;
opacity: 0.6;
font-size: 14px;
letter-spacing: 0;
line-height: 22px;
}
.el-row {
margin-bottom: 20px;
line-height: 32px;

9
nezha-fronted/src/components/common/project/topology.vue
View File

@@ -165,10 +165,12 @@
NodeArr(n){
if(n.length===2){
this.lineData={
arrows:'',
arrows:'0',
label:'',
color:'#1e90ff',
lineId:'',
width:'1',
dashed:'[5,5]',
id:'',
};
this.addLineShow=true;
@@ -634,7 +636,6 @@
},
//工具栏点击后显示对应内容
popDataShowUpdate(key,flag){//key 显示对应的弹窗 flag是否不显示工具栏
// console.log(key);
this.popDataShow={
endpoint:false,
asset:false,
@@ -645,7 +646,6 @@
main:false,
};
if(key&&!this.editVisNetwork){
// console.log(this.lineData);
if(key==='total'&&this.selNodeId){
this.totalId=this.selNodeId;
this.totalArray=this.nodesArray;
@@ -685,7 +685,6 @@
let this_=this;
this.init('modal');
this.network.on("click", function (params) {
console.log(params);
this_.networkPopClose();
if(!params.edges.length&&!params.nodes.length){
this_.popDataShowUpdate('',true);
@@ -725,7 +724,6 @@
this_.isLineAdd=false;
}
if(!this_.editVisNetwork){
console.log(this_.lineData);
if(this_.lineData.expressions&&this_.lineData.expressions.length){
this_.popDataShowUpdate('total')
}else{
@@ -816,7 +814,6 @@
setTimeout(()=>{
this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
console.log(this_.zoom);
this_.modelTopUpdate();
this_.selNodeArrUpdate();
if(this_.networkPopShow){

15
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -24,7 +24,7 @@
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
<el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i class="el-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
<span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i class="el-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
<el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue" style="text-align: left;" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel>
</el-dropdown>
<label style="line-height: 30px;" v-else>{{$t("alert.config.expr")}}</label>
@@ -66,7 +66,8 @@
plugins: {type: Array},
styleType: Number,
historyParam:{type:Object},
showRemove:{type:Boolean,default:true}
showRemove:{type:Boolean,default:true},
projectRightBox:{type:Boolean,default:false}
},
data(){
return {
@@ -245,6 +246,16 @@
z-index: 2100;
background-color: #FFF;
}
.expr-title{
width: 120px;
padding-right: 20px;
text-align: right;
color: #666;
opacity: 0.6;
font-size: 14px;
letter-spacing: 0;
line-height: 22px;
}
</style>
<style>
.metric-selector-pop{