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

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

View File

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

View File

@@ -58,7 +58,7 @@
></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="legend-title">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp; {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover placement="top" trigger="hover" width="211"> <el-popover placement="top" trigger="hover" width="211">
<div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div> <div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
@@ -1597,6 +1597,17 @@
} }
</style> </style>
<style lang="scss" scoped> <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 { .project-title {
background: #eeeeee; background: #eeeeee;
height: 36px; height: 36px;

View File

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

View File

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

View File

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

View File

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

View File

@@ -46,6 +46,17 @@
width: calc(100% - 60px); width: calc(100% - 60px);
padding: 5px 20px 0px 0; 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*/ /*metric样式--end*/
.label-center{ .label-center{
vertical-align: middle; vertical-align: middle;
@@ -301,7 +312,7 @@
></promql-input> ></promql-input>
--> -->
<el-row> <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; {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
<el-popover placement="top" trigger="hover" width="211"> <el-popover placement="top" trigger="hover" width="211">
<div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div> <div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>

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>--> <!-- <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>?--> <!--<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" <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="errorMsg"><span>{{errorMsg}}</span></div>
<div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div> <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
</div> </div>
@@ -38,7 +39,7 @@
<el-row v-if="plugins.indexOf('metric-input') > -1 || plugins.indexOf('metric-selector') > -1" <el-row v-if="plugins.indexOf('metric-input') > -1 || plugins.indexOf('metric-selector') > -1"
style="width: 100%;"> style="width: 100%;">
<el-col <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 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 :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i <span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i
@@ -62,10 +63,12 @@
style="color: #f56c6c">*</sup></label> style="color: #f56c6c">*</sup></label>
</el-col> </el-col>
<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%',}"> :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"> <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>--> <!--<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="errorMsg"><span>{{errorMsg}}</span></div>
<div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div> <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
</div> </div>
@@ -619,9 +622,38 @@
/deep/ .el-cascader-menu:last-child .el-cascader-node, /deep/ .el-cascader-node__label { /deep/ .el-cascader-menu:last-child .el-cascader-node, /deep/ .el-cascader-node__label {
padding: 0; 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 { .nz-cascade {
padding: 0 20px 0 30px; padding: 0 10px 0 18px;
position: relative;
} }
.nz-cascade .nz-icon-moban { .nz-cascade .nz-icon-moban {
display: none; display: none;
@@ -629,6 +661,9 @@
.nz-cascade-temp .nz-icon-moban{ .nz-cascade-temp .nz-icon-moban{
display: inline-block; display: inline-block;
position: absolute;
left: 2px;
/*background: #F8F9FB;*/ /*background: #F8F9FB;*/
} }
.temp-form-box{ .temp-form-box{