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

style：修改metric的输入框的样式

Browse Source
This commit is contained in:
zhangyu
2021-03-18 17:03:29 +08:00
parent 5ac601a412
commit a415b457c5
8 changed files with 142 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -441,6 +441,9 @@ li{
.el-textarea .el-input__count { /*防止字数限制提示信息遮挡内容和滚动条*/
right: 20px;
}
.no-resize .el-textarea__inner {
padding: 5px 20px 5px 15px;
}
.el-textarea__inner {
padding: 5px 60px 5px 15px;
}

13
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -58,7 +58,7 @@
></promql-input>
<el-row>
<template>
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
<el-col class="legend-title">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover placement="top" trigger="hover" width="211">
<div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
@@ -1597,6 +1597,17 @@
}
</style>
<style lang="scss" scoped>
.legend-title{
width: 110px;
padding-right: 10px;
text-align: left;
padding-left:10px;
margin-left: 10px;
height: 32px;
line-height: 32px;
background: #E7EAED;
color: #606266;
}
.project-title {
background: #eeeeee;
height: 36px;

1
nezha-fronted/src/components/common/project/L5/services/canvas.js
View File

@@ -180,6 +180,7 @@ export const imageTemp={
"width":100,
"height":100,
},
imageRatio:false,
"lineWidth":0,
"rotate":0,
"offsetRotate":0,

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

@@ -424,7 +424,7 @@
const canvasOptions={
rotateCursor:'/img/rotate.cur',
translateKey:'None',
disableEmptyLine:true,
disableEmptyLine:false,
autoExpandDistance:0,
minScale:0.01,
};
@@ -853,15 +853,15 @@
clearInterval(timer);
let promiseArr=[];
let self=this;
for(let i=0;i<data.pens.length;i++){
let line=data.pens[i]
if(line.type===1){
if(!data.pens.find(item=>item.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){
data.pens.splice(i, 1);
i--;
}
}
}
// for(let i=0;i<data.pens.length;i++){
// let line=data.pens[i]
// if(line.type===1){
// if(!data.pens.find(item=>item.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){
// data.pens.splice(i, 1);
// i--;
// }
// }
// }
data.pens.forEach((item=>{
if(item.type===0&&item.data.imageId){
item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image;
@@ -1769,8 +1769,10 @@
this.editTopologyFlag=true;
setTimeout(()=>{
getTopology(this.topologyIndex).lock(0);
getTopology(this.topologyIndex).data.pens.forEach((item)=>{//停止动画 以及赋值默认data
getTopology(this.topologyIndex).data.pens.forEach((item,index)=>{//停止动画 以及赋值默认data
if(item.animatePlay){
item.stopAnimate();
}
if(!item.data.expressArr.length) {
item.data.expressArr=[''];
item.data.legends=[''];
@@ -1780,7 +1782,7 @@
item.fillStyle=item.data.fillStyle;
item.strokeStyle=item.data.strokeStyle;
item.animatePlay=false;
item.font.color="#000000";
item.fontColor="#000000";
item.gradientType=item.data.gradientType?item.data.gradientType:0;
if(!item.data.gradientColor){
item.data.gradientType=0;
@@ -1798,7 +1800,7 @@
item.fromArrowColor=item.data.arrowColor;
item.toArrowColor=item.data.arrowColor;
item.animatePlay=false;
item.font.color="#000000";
item.fontColor="#000000";
}
})
let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
@@ -2073,8 +2075,10 @@
},
},
destroyed(){
if(getTopology(this.topologyIndex)){
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);
}

64
nezha-fronted/src/components/common/project/topologyPrev.vue
View File

@@ -93,6 +93,8 @@
:toolShow="toolShow">
</topology-top-tool>
</span>
<span class="float-right">
<button @click="previewTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
@@ -175,7 +177,7 @@
<button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button" v-has="'project_topo_save'"
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button" v-has="'project_topo_save'"
>
<i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
</button>
@@ -251,7 +253,7 @@
<div class="module-rect-left" :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}"></div>
</div>
<!--节点连线相关的 tooltip-->
<div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px'}"
<div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
v-if="tooltipPosition.show&&!editTopologyFlag"
@mouseover="tooltipOver"
@mouseout="tooltipOut"
@@ -422,7 +424,7 @@
const canvasOptions={
rotateCursor:'/img/rotate.cur',
translateKey:'None',
disableEmptyLine:true,
disableEmptyLine:false,
autoExpandDistance:0,
minScale:0.01,
};
@@ -517,6 +519,7 @@
top:0,
left:0,
show:false,
height:400
},
chartData:{},
chartGetData:[],
@@ -796,6 +799,8 @@
let canvas=new Topology('topology-canvas'+this.topologyIndexF,canvasOptions);
canvas.open(data);
setTopology(this.topologyIndex,canvas);
}else{
getTopology(this.topologyIndex).open(data);
}
this.topologyLoading=false;
if(!getTopology(this.topologyIndex).data.name){
@@ -848,15 +853,15 @@
clearInterval(timer);
let promiseArr=[];
let self=this;
for(let i=0;i<data.pens.length;i++){
let line=data.pens[i]
if(line.type===1){
if(!data.pens.find(item=>item.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){
data.pens.splice(i, 1);
i--;
}
}
}
// for(let i=0;i<data.pens.length;i++){
// let line=data.pens[i]
// if(line.type===1){
// if(!data.pens.find(item=>item.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){
// data.pens.splice(i, 1);
// i--;
// }
// }
// }
data.pens.forEach((item=>{
if(item.type===0&&item.data.imageId){
item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image;
@@ -878,7 +883,9 @@
this.projectInfoShow=data.data.projectInfo;
this.projectAlertShow=data.data.alertInfo;
}
if(!data.bkImage){
data.bkImage=undefined;
}
Promise.all(promiseArr).then(res=>{
res.forEach((response,index)=>{
let item=data.pens[index];
@@ -933,18 +940,21 @@
if(maxLevel!==0){
if(pen.type===0){// 判断valueMapping 给相应的状态
let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
pen.font.color=selLevel.color.text;
if(selLevel){
pen.fontColor=selLevel.color.text;
pen.fillStyle=selLevel.color.fill;
pen.strokeStyle=selLevel.color.line;
pen.bkType=0;
}
onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
}else if(pen.type===1){// 判断valueMapping 给相应的状态
let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
if(selLevel){
pen.animateColor=selLevel.color.fill;
pen.strokeStyle=selLevel.color.line;
pen.animateType=selLevel.animateType;
pen.font.color=selLevel.color.text;
pen.fontColor=selLevel.color.text;
}
onChangeAnimateLine(pen,pen.animateType);
}
} else {
@@ -1361,10 +1371,6 @@
pen:data,
pens:null,
};
if(data.data.expressArr.length===0){
data.data.expressArr.push('');
data.data.legends.push('');
}
this.$nextTick(()=>{
if(this.$refs.CanvasProps){
if(this.penId!==data.id){
@@ -1763,14 +1769,20 @@
this.editTopologyFlag=true;
setTimeout(()=>{
getTopology(this.topologyIndex).lock(0);
getTopology(this.topologyIndex).data.pens.forEach((item)=>{//停止动画 以及赋值默认data
getTopology(this.topologyIndex).data.pens.forEach((item,index)=>{//停止动画 以及赋值默认data
if(item.animatePlay){
item.stopAnimate();
}
if(!item.data.expressArr.length) {
item.data.expressArr=[''];
item.data.legends=[''];
}
item.animateType=item.data.animateType;
if(item.type===0){
item.fillStyle=item.data.fillStyle;
item.strokeStyle=item.data.strokeStyle;
item.animatePlay=false;
item.font.color="#000000";
item.fontColor="#000000";
item.gradientType=item.data.gradientType?item.data.gradientType:0;
if(!item.data.gradientColor){
item.data.gradientType=0;
@@ -1788,7 +1800,7 @@
item.fromArrowColor=item.data.arrowColor;
item.toArrowColor=item.data.arrowColor;
item.animatePlay=false;
item.font.color="#000000";
item.fontColor="#000000";
}
})
let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
@@ -2058,10 +2070,15 @@
zoomMap(num){
getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale+num);
},
penToBottom(){
getTopology(this.topologyIndex).bottom()
},
},
destroyed(){
if(getTopology(this.topologyIndex)){
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);
}
@@ -2514,6 +2531,7 @@
position: relative;
border: 1px solid #eeeeee;
border-radius: 2px;
overflow: hidden;
.pickTime{
margin-top: -13px;
}

6
nezha-fronted/src/components/common/rightBox/exprTempBox.vue
View File

@@ -144,7 +144,7 @@
params.expression=params.expression[0];
if(!params.expression[0]) {
this.prevent_opt.save=false;
this.$message.error(this.$t('expressionError'));
this.$message.error(this.$t('config.exprTemp.expressionError'));
return
}
if(valid){
@@ -229,5 +229,7 @@
</script>
<style scoped lang="scss">
/deep/ .metric-selector-title{
margin-left: 0 !important;
}
</style>

13
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -46,6 +46,17 @@
width: calc(100% - 60px);
padding: 5px 20px 0px 0;
}
.legend-title{
width: 110px;
padding-right: 10px;
text-align: left;
padding-left:10px;
margin-left: 10px;
height: 32px;
line-height: 32px;
background: #E7EAED;
color: #606266;
}
/*metric样式--end*/
.label-center{
vertical-align: middle;
@@ -301,7 +312,7 @@
></promql-input>
-->
<el-row>
<el-col style="width: 120px; padding-right: 20px; text-align: left; padding-left:10px; color: #666">
<el-col class="legend-title">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover placement="top" trigger="hover" width="211">
<div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>

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

@@ -28,7 +28,8 @@
<!-- <el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>-->
<!--<editor :styleType="styleType" :metric-list="metricStore" :history-param="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>?-->
<el-input @keyup.enter.native="expressionChange" v-model="expressionList[index]" :id="inputId"
@input="metricKeyDown"></el-input>
@input="metricKeyDown" type="textarea"
:autosize="{ minRows: 1, maxRows: 6}" class="not-fixed-height no-resize"></el-input>
<div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
<div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
</div>
@@ -38,7 +39,7 @@
<el-row v-if="plugins.indexOf('metric-input') > -1 || plugins.indexOf('metric-selector') > -1"
style="width: 100%;">
<el-col
:style="{'width':plugins.indexOf('metric-selector') > -1 ? '120px':'100%', 'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ', 'text-align':'left', 'color': '#666','font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold'}">
:class="[plugins.indexOf('metric-selector') > -1 ?'metric-selector-title':'metric-null-title']">
<el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i
@@ -62,10 +63,12 @@
style="color: #f56c6c">*</sup></label>
</el-col>
<el-col
:class="plugins.indexOf('metric-selector') > -1 ?'metric-selector-input-box':'metric-null-input-box'"
:style="{'width':plugins.indexOf('metric-selector') > -1 ? 'calc(100% - 120px)':'100%',height: '100%',}">
<div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
<!--<editor :styleType="styleType" :metric-list="metricStore" :historyParam="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>-->
<el-input v-model="expressionList[index]" @change="metricChange" @input="metricKeyDown"></el-input>
<el-input v-model="expressionList[index]" @change="metricChange" @input="metricKeyDown" type="textarea"
:autosize="{ minRows: 1, maxRows: 6}" class="not-fixed-height no-resize"></el-input>
<div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
<div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
</div>
@@ -619,9 +622,38 @@
/deep/ .el-cascader-menu:last-child .el-cascader-node, /deep/ .el-cascader-node__label {
padding: 0;
}
.metric-selector-title{
/*'width':plugins.indexOf('metric-selector') > -1 ? '110px':'100%',*/
/*'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ',*/
/*'text-align':'left', 'color': '#666',*/
/*'font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold',*/
width:110px;
margin-left: 10px;
height: 33px;
text-align: left;
padding: 0 0 0 10px;
font-weight: 400;
line-height: 33px;
background: #E7EAED;
font-family: ArialMT;
font-size: 14px;
color: #333333;
letter-spacing: 0;
}
.metric-selector-input-box{
width: calc(100% - 120px);
}
.metric-null-input-box{
width: 100%;
}
.metric-null-title{
width:100%;
font-weight: bold;
letter-spacing: 0;
}
.nz-cascade {
padding: 0 20px 0 30px;
padding: 0 10px 0 18px;
position: relative;
}
.nz-cascade .nz-icon-moban {
display: none;
@@ -629,6 +661,9 @@
.nz-cascade-temp .nz-icon-moban{
display: inline-block;
position: absolute;
left: 2px;
/*background: #F8F9FB;*/
}
.temp-form-box{