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', cancel:'cancel',
addLine:'Add Line', addLine:'Add Line',
lineName:'Line Name', lineName:'Line Name',
width:'width', width:'thickness',
option:'Option', option:'Option',
arrows:'Arrows', arrows:'Arrows',
color:'Color', 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-input v-model="form.lineName" size="small"></el-input>
</el-form-item> </el-form-item>
<el-row class="form-title">{{$t('project.topology.option')}}</el-row> <el-row class="form-title">{{$t('project.topology.option')}}</el-row>
<el-form-item :label="$t('project.topology.width')" prop="width" class="line-name"> <div class="line-option">
<el-input v-model="form.width" size="small"></el-input> <el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">
</el-form-item> <el-input v-model="form.width" size="small"></el-input>
<!--<el-form-item label="roundness" class="line-name">--> </el-form-item>
<!--<el-input v-model="form.roundness"></el-input>--> <el-form-item :label="$t('project.topology.arrows')" prop="arrows" class="arrows">
<!--</el-form-item>--> <el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" size="small">
<!--<el-form-item label="type" class="line-name">--> <div slot="prefix">
<!--<el-select v-model="form.type" placeholder="" :popper-append-to-body="false">--> <img v-if="form.arrows=='from'" src="./image/leftArrow.png" />
<!--&lt;!&ndash;'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'&ndash;&gt;--> <img v-if="form.arrows=='to'" src="./image/rightArrow.png" />
<!--<el-option label="dynamic" value="dynamic"></el-option>--> <img v-if="form.arrows=='from;to'" src="./image/LRArrow.png" />
<!--<el-option label="continuous" value="continuous"></el-option>--> <img v-if="form.arrows=='0'" src="./image/noArrow.png" />
<!--<el-option label="discrete" value="discrete"></el-option>--> </div>
<!--<el-option label="diagonalCross" value="diagonalCross"></el-option>--> <el-option label="from" value="from"><img src="./image/leftArrow.png" /></el-option>
<!--<el-option label="straightCross" value="straightCross"></el-option>--> <el-option label="to" value="to"><img src="./image/rightArrow.png" /></el-option>
<!--<el-option label="horizontal" value="horizontal"></el-option>--> <el-option label="from;to" value="from;to"><img src="./image/LRArrow.png" /></el-option>
<!--<el-option label="vertical" value="vertical"></el-option>--> <el-option label="" value="0"><img src="./image/noArrow.png" /></el-option>
<!--<el-option label="curvedCW" value="curvedCW"></el-option>--> </el-select>
<!--<el-option label="cubicBezier" value="cubicBezier"></el-option>--> </el-form-item>
<!--</el-select>--> <el-form-item :label="$t('project.topology.color')" class="color">
<!--</el-form-item>--> <div class="color-show" @click="colorPickerClick" v-clickoutside="colorOut">
<el-form-item :label="$t('project.topology.arrows')" prop="arrows" class="arrows"> <div class="color-show-left" :style="{background:form.color}"></div>
<el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" size="small"> <span> {{form.color}}</span>
<div slot="prefix"> <span class="color-arrows">
<img v-if="form.arrows=='from'" src="./image/leftArrow.png" /> <i class="nz-icon nz-icon-arrow-down" v-show="!showPicker"></i>
<img v-if="form.arrows=='to'" src="./image/rightArrow.png" /> <i class="nz-icon nz-icon-arrow-up" v-show="showPicker"></i>
<img v-if="form.arrows=='from;to'" src="./image/LRArrow.png" /> </span>
<img v-if="form.arrows=='0'" src="./image/noArrow.png" />
</div> </div>
<el-option label="from" value="from"><img src="./image/leftArrow.png" /></el-option> <div class="color-content" ref="color-content">
<el-option label="to" value="to"><img src="./image/rightArrow.png" /></el-option> <el-color-picker
<el-option label="from;to" value="from;to"><img src="./image/LRArrow.png" /></el-option> v-model="form.color"
<el-option label="" value="0"><img src="./image/noArrow.png" /></el-option> :predefine="predefineColors"
</el-select> ref="colorPicker"
</el-form-item> @active-change="colorChange"
<el-form-item :label="$t('project.topology.color')" class="color"> >
<div class="color-show" @click="colorPickerClick"> </el-color-picker>
<div class="color-show-left" :style="{background:form.color}"></div> </div>
<span> {{form.color}}</span> </el-form-item>
</div> </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="right-box-sub-title"> <div class="right-box-sub-title">
<span>{{$t('alert.config.expr')}}</span> <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> <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div> </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> <el-row>
<template> <el-col class="expr-title">
<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">
{{$t('project.topology.unit')}} {{$t('project.topology.unit')}}
</el-col> </el-col>
<el-col style="width: calc(100% - 120px);"> <el-col style="width: calc(100% - 120px);">
@@ -110,10 +105,11 @@
@change="expressionChange" @change="expressionChange"
@removeExpression="removeExpression" @removeExpression="removeExpression"
:showRemove="false" :showRemove="false"
:projectRightBox="true"
></promql-input> ></promql-input>
<el-row> <el-row>
<template> <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; {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover"> <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> <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, lineId:n.id,
width:n.width, width:n.width,
lineName:n.label, lineName:n.label,
name:[],
}; };
if( n.expressions){ if( n.expressions){
n.expressions.forEach((item,index)=>{ n.expressions.forEach((item,index)=>{
this.addExpression(); this.addExpression();
this.name[index]=item.name; this.form.name[index]=item.name;
this.unit[index]=item.unit; this.unit[index]=item.unit;
this.expressions[index]=item.metric; this.expressions[index]=item.metric;
this.legends[index]=item.legend; this.legends[index]=item.legend;
@@ -191,7 +188,7 @@
data(){ data(){
return{ return{
form:{ form:{
arrows:'', arrows:'0',
label:'', label:'',
color:'#1e90ff', color:'#1e90ff',
lineName:'', lineName:'',
@@ -199,6 +196,7 @@
width:'', width:'',
type:'', type:'',
roundness:'', roundness:'',
name:[],
}, },
predefineColors: [ predefineColors: [
'#ff4500', '#ff4500',
@@ -209,18 +207,18 @@
'#1e90ff', '#1e90ff',
'#c71585', '#c71585',
], ],
showPicker:false,
unitOptions: chartDataFormat.unitOptions(), unitOptions: chartDataFormat.unitOptions(),
promqlKeys:[], promqlKeys:[],
expressions: [], expressions: [],
promqlCount:0, promqlCount:0,
elementIds:[], elementIds:[],
legends:[], legends:[],
name:[],
unit:[], unit:[],
rules:{ rules:{
arrows: [ // arrows: [
{ required: true, message: '', trigger: 'change' }, // { required: true, message: '', trigger: 'change' },
], // ],
lineName: [ lineName: [
{ required: true, message: '', trigger: 'change' }, { required: true, message: '', trigger: 'change' },
], ],
@@ -249,7 +247,7 @@
model.expressions=[]; model.expressions=[];
this.promqlKeys.forEach((item,index)=>{ this.promqlKeys.forEach((item,index)=>{
model.expressions.push({ model.expressions.push({
"name": this.name[index], "name": this.form.name[index],
"unit": this.unit[index], "unit": this.unit[index],
"metric": this.expressions[index], "metric": this.expressions[index],
"legend": this.legends[index], "legend": this.legends[index],
@@ -265,7 +263,7 @@
addExpression() { addExpression() {
this.expressions.push(''); this.expressions.push('');
this.legends.push(''); this.legends.push('');
this.name.push(''); this.form.name.push('');
this.unit.push(''); this.unit.push('');
this.promqlKeys.push(getUUID()); this.promqlKeys.push(getUUID());
this.elementIds.push(""); this.elementIds.push("");
@@ -275,7 +273,7 @@
if (this.promqlCount >= 1) { if (this.promqlCount >= 1) {
this.expressions.splice(index, 1); this.expressions.splice(index, 1);
this.legends.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.unit.splice(index, 1);
this.promqlKeys.splice(index, 1); this.promqlKeys.splice(index, 1);
this.elementIds.splice(index, 1); this.elementIds.splice(index, 1);
@@ -301,6 +299,7 @@
this.esc(); this.esc();
}, },
colorPickerClick(){ colorPickerClick(){
this.showPicker=true;
this.$refs['colorPicker'].showPicker=true; this.$refs['colorPicker'].showPicker=true;
}, },
colorChange(val){ colorChange(val){
@@ -313,6 +312,9 @@
let b = parseInt(rgb[2].split(')')[0]); let b = parseInt(rgb[2].split(')')[0]);
let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return hex; return hex;
},
colorOut(){
this.showPicker=false;
} }
}, },
@@ -345,7 +347,7 @@
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
width: calc(100% - 30px); width: calc(100% - 60px);
height: 30px; height: 30px;
} }
.color-show-left{ .color-show-left{
@@ -372,7 +374,7 @@
.arrows /deep/ .el-input.el-input--prefix.el-input--suffix{ .arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
border: 1px solid #DCDFE6; border: 1px solid #DCDFE6;
height: 28px; height: 28px;
width: calc(100% - 30px); width: calc(100% - 60px);
} }
.arrows /deep/ .el-input__inner{ .arrows /deep/ .el-input__inner{
display: none; display: none;
@@ -384,6 +386,52 @@
/deep/ .el-select{ /deep/ .el-select{
width: 262px; 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 { .el-row {
margin-bottom: 20px; margin-bottom: 20px;
line-height: 32px; line-height: 32px;

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

@@ -165,10 +165,12 @@
NodeArr(n){ NodeArr(n){
if(n.length===2){ if(n.length===2){
this.lineData={ this.lineData={
arrows:'', arrows:'0',
label:'', label:'',
color:'#1e90ff', color:'#1e90ff',
lineId:'', lineId:'',
width:'1',
dashed:'[5,5]',
id:'', id:'',
}; };
this.addLineShow=true; this.addLineShow=true;
@@ -634,7 +636,6 @@
}, },
//工具栏点击后显示对应内容 //工具栏点击后显示对应内容
popDataShowUpdate(key,flag){//key 显示对应的弹窗 flag是否不显示工具栏 popDataShowUpdate(key,flag){//key 显示对应的弹窗 flag是否不显示工具栏
// console.log(key);
this.popDataShow={ this.popDataShow={
endpoint:false, endpoint:false,
asset:false, asset:false,
@@ -645,7 +646,6 @@
main:false, main:false,
}; };
if(key&&!this.editVisNetwork){ if(key&&!this.editVisNetwork){
// console.log(this.lineData);
if(key==='total'&&this.selNodeId){ if(key==='total'&&this.selNodeId){
this.totalId=this.selNodeId; this.totalId=this.selNodeId;
this.totalArray=this.nodesArray; this.totalArray=this.nodesArray;
@@ -685,7 +685,6 @@
let this_=this; let this_=this;
this.init('modal'); this.init('modal');
this.network.on("click", function (params) { this.network.on("click", function (params) {
console.log(params);
this_.networkPopClose(); this_.networkPopClose();
if(!params.edges.length&&!params.nodes.length){ if(!params.edges.length&&!params.nodes.length){
this_.popDataShowUpdate('',true); this_.popDataShowUpdate('',true);
@@ -725,7 +724,6 @@
this_.isLineAdd=false; this_.isLineAdd=false;
} }
if(!this_.editVisNetwork){ if(!this_.editVisNetwork){
console.log(this_.lineData);
if(this_.lineData.expressions&&this_.lineData.expressions.length){ if(this_.lineData.expressions&&this_.lineData.expressions.length){
this_.popDataShowUpdate('total') this_.popDataShowUpdate('total')
}else{ }else{
@@ -816,7 +814,6 @@
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;
console.log(this_.zoom);
this_.modelTopUpdate(); this_.modelTopUpdate();
this_.selNodeArrUpdate(); this_.selNodeArrUpdate();
if(this_.networkPopShow){ 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-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 class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
<el-dropdown-menu style="display: none"></el-dropdown-menu> <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-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> </el-dropdown>
<label style="line-height: 30px;" v-else>{{$t("alert.config.expr")}}</label> <label style="line-height: 30px;" v-else>{{$t("alert.config.expr")}}</label>
@@ -66,7 +66,8 @@
plugins: {type: Array}, plugins: {type: Array},
styleType: Number, styleType: Number,
historyParam:{type:Object}, historyParam:{type:Object},
showRemove:{type:Boolean,default:true} showRemove:{type:Boolean,default:true},
projectRightBox:{type:Boolean,default:false}
}, },
data(){ data(){
return { return {
@@ -245,6 +246,16 @@
z-index: 2100; z-index: 2100;
background-color: #FFF; 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>
<style> <style>
.metric-selector-pop{ .metric-selector-pop{