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

feat：侧滑弹框修改 panel Chat完成70%

Browse Source
This commit is contained in:
zhangyu
2020-10-14 17:04:10 +08:00
parent 94249cf447
commit 05cdb743a2
2 changed files with 80 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -259,7 +259,7 @@ li{
}
.nz-btn.nz-btn-size-small-new{
height: 24px;
line-height: 24px;
line-height: 22px;
text-align: center;
min-width: 60px;
padding: 0 10px;
@@ -1040,9 +1040,6 @@ li{
.right-box .el-form-item__label {
line-height: 30px;
}
.right-box-sub-title {
padding: 8px 0;
}
.right-box-line {
margin-bottom: 18px;
background-color: #DCDFE6;
@@ -1096,12 +1093,14 @@ li{
display: inline-block;
padding-top: 20px;
font-size: 14px;
font-weight: bold;
color: $box-title-color;
}
.right-box-sub-title {
font-size: 14px;
color: $box-title-color;
padding-bottom: 5px;
background: #F6F6F6;
padding: 8px 12px 5px 12px;
}
.pop-title {
line-height: 25px;
@@ -1198,7 +1197,7 @@ li{
.dc-asset-state-out {
background-color: orange;
}
.dc-asset-state-high {
.dc-asset-state-P1 {
background-color: rgba(255, 0, 0, 0.6);
}
.chart-box-dropdown {
@@ -1300,17 +1299,23 @@ li{
.right-box-add-endpoint .right-box-form {
height: 100%;
}
.right-box-form .half-form-item{
.right-box-form>.el-form-item.half-form-item{
display: inline-block;
width: 400px;
width: 350px;
}
.right-box-form>.el-form-item.half-form-item:nth-child(odd){
display: inline-block;
width: 350px;
margin-left: 0;
}
.right-box-form .one-third-form-item-left{
display: inline-block;
width: 247px;
width: 220px;
}
.right-box-form .one-third-form-item-right{
margin-left: 10px;
display: inline-block;
width: 148px;
width: 110px;
.el-form-item__label{
width: 20px !important;
}
@@ -1320,6 +1325,8 @@ li{
}
.right-box-form>.el-form-item {
margin-bottom: 18px;
width: calc(100% - 70px);
margin-left: 70px;
}
.right-box-form .el-select {
width: 100%;
@@ -2142,3 +2149,43 @@ li{
.content-row-box .content-col-box:first-child{
margin-left: 0;
}
.right-box-small-title{
font-family: Roboto-Regular;
font-size: 14px;
color: #333333;
letter-spacing: 0;
text-align: left;
width: calc(100% - 100px);
margin-left: 100px;
}
.right-box-form .form-row-item{
padding: 20px 20px 20px 0;
border: 1px dashed #dfe7f2;
width: calc(100% - 120px);
margin-left: 70px;
position: relative;
}
.right-box-form .form-row-item .nz-icon-minus{
color: #EC7F66;
}
.right-box-form .nz-icon-minus-medium{
padding: 2px 6px;
background: rgba(236,127,102,.1);
border-radius: 4px;
cursor: pointer;
}
.right-box-form .form-row-item .nz-icon-minus-position{
position: absolute;
top: 50%;
right: -55px;
transform: translate(-50%,-50%);
}
.right-box-form>.el-form-item.half-form-item-other{
display: inline-block;
width: 350px;
}
.right-box-form>.el-form-item.half-form-item-other:nth-child(odd){
display: inline-block;
width: 390px;
margin-left: 0;
}

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

@@ -96,8 +96,8 @@
<el-input size="small" maxlength="64" show-word-limit v-model="editChart.title"></el-input>
</el-form-item>
<div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
<div class="line-100" style="margin-bottom: 20px;"></div>
<div class="right-box-small-title">{{$t('dashboard.panel.chartForm.option')}}</div>
<div style="margin-bottom: 20px;width: 100%"></div>
<!-- type unit start-->
<el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="type" class="half-form-item">
@@ -108,7 +108,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.unit')" prop="unit" class="half-form-item" style="width: 415px;">
<el-form-item :label="$t('dashboard.panel.chartForm.unit')" prop="unit" class="half-form-item">
<el-cascader filterable placeholder="" popper-class="dc-dropdown" size="mini" style="width: 100%"
:options="unitOptions"
:props="{ expandTrigger: 'hover',emitPath:false }"
@@ -128,7 +128,7 @@
</el-select>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.high')" prop="hight" class="half-form-item" style="width: 415px;">
<el-form-item :label="$t('dashboard.panel.chartForm.high')" prop="hight" class="half-form-item">
<el-autocomplete
v-model="editChart.height"
:fetch-suggestions="querySearch"
@@ -158,11 +158,11 @@
</el-select>
</el-form-item>
<el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold" class="half-form-item" style="width: 415px">
<el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold" class="half-form-item">
<el-input size="mini" type="input" v-model="editChart.param.threshold"></el-input>
</el-form-item>
<div v-if="!isUrl&&!isAlert" class="right-box-sub-title">
<div v-if="!isUrl&&!isAlert" class="right-box-sub-title" style="margin-bottom: 20px">
<span>{{$t('alert.config.expr')}}</span>
<span v-if="!isSingleStat" style="height: 19px;display: inline-block;line-height: 1;" class="float-right" @click="addExpression">
<span class="create-square-box">
@@ -171,13 +171,13 @@
</span>
</div>
<div v-if="isAlert" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
<div v-if="!isUrl" class="line-100"></div>
<div v-if="!isUrl" style="width: 100%"></div>
<el-row v-if="isAlert" class="element-item">
<alert-chart-param ref="alertParamBox" @on-enter-complate="getAlertParam"></alert-chart-param>
</el-row>
<el-row v-if="!isUrl &&!isAlert" class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<el-row v-if="!isUrl &&!isAlert" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
<promql-input
:ref="'promql-'+(index-1)"
:id="promqlKeys[index-1]"
@@ -188,6 +188,7 @@
:plugins="['metric-selector', 'metric-input', 'remove']"
@change="expressionChange"
@removeExpression="removeExpression"
:showRemove="false"
></promql-input>
<el-row>
<template v-if="editChart.type != 'singleStat'">
@@ -214,13 +215,16 @@
</el-col>
</template>
</el-row>
<span class="nz-icon-minus-medium nz-icon-minus-position">
<i class="nz-icon nz-icon-minus" @click="removeExpression"></i>
</span>
</el-row>
<!--value mapping start-->
<div class="right-box-sub-title" v-if="editChart.type == 'singleStat'">
<span>{{$t('dashboard.panel.chartForm.valMapping.name')}}</span>
<span class="float-right" @click="addMapping"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div>
<div class="line-100" style="margin-bottom: 20px;" v-if="editChart.type == 'singleStat'"></div>
<div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'"></div>
<el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="span" v-if="editChart.type == 'singleStat'">
<el-radio-group v-model="editChart.param.valueMapping.type" fill="#FA901C" text-color="#FA901C" size="small" class="val-mapping-type" @change="valueMappingChange">
<el-radio-button label="value" border class="no-fill">{{$t('dashboard.panel.chartForm.valMapping.value')}}</el-radio-button>
@@ -229,18 +233,18 @@
</el-form-item>
<template v-if="editChart.type == 'singleStat'&&editChart.param.valueMapping.type == 'value'">
<template v-for="(mapping,index) in editChart.param.valueMapping.mapping">
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" prop="span" class="half-form-item" >
<el-input size="mini" type="input" v-model="mapping.value"></el-input>
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" prop="span" class="half-form-item-other" >
<el-input size="mini" type="input" v-model="mapping.value" style="display: inline-block;;"></el-input>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item" style="width: 415px;">
<el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 21px);"></el-input>
<div @click="delMapping(index)" style="display: inline-block"><i class="nz-icon nz-icon-minus"></i></div>
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other">
<el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 40px);"></el-input>
<span @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px"><i class="nz-icon nz-icon-minus"></i></span>
</el-form-item>
</template>
</template>
<template v-if="editChart.type == 'singleStat'&&editChart.param.valueMapping.type == 'range'">
<template v-for="(mapping,index) in editChart.param.valueMapping.mapping">
<div class="half-form-item">
<div class="half-form-item-other" style="display: inline-block;margin-left: 70px">
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" prop="span" class="one-third-form-item-left" >
<el-input size="mini" type="input" v-model="mapping.from"></el-input>
</el-form-item>
@@ -248,8 +252,8 @@
<el-input size="mini" type="input" v-model="mapping.to"></el-input>
</el-form-item>
</div>
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item" style="width: 415px;">
<el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 21px);" ></el-input>
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other">
<el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 40px);" ></el-input>
<div @click="delMapping(index)" style="display: inline-block"><i class="nz-icon nz-icon-minus"></i></div>
</el-form-item>
</template>
@@ -260,9 +264,9 @@
<div class="right-box-sub-title" >
<span>{{$t('dashboard.panel.chartForm.legendValue')}}</span>
</div>
<div class="line-100" style="margin-bottom: 20px;" ></div>
<div style="margin-bottom: 20px; width: 100%" ></div>
<div style="display: flex;">
<span style="margin-left: 50px;"></span>
<span style="margin-left: 150px;"></span>
<template v-for="item in sortedOptionKeys">
<div style="flex: 1">
<span style="margin-right: 10px;color:rgb(102, 102, 102)">{{item.label}}</span>
@@ -587,11 +591,9 @@
this.subCount = 0;
// 保存完成,进行删除操作
//('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
//console.log('box第二步，删除之前，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
this.elements.splice(this.deleteIndex, 1);
this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
//console.log('box第二步，删除完毕，elements='+JSON.stringify(this.elements),' elementTarget='+JSON.stringify(this.elementTarget),' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
this.$nextTick(() => {
this.$refs.chartTag.forEach((item, index) => {
@@ -1207,7 +1209,6 @@
legend: this.legends[index],
});
});
//console.info(elements)
params.elements = elements;
if (valid) {
this.$refs.chartsPreview.show(params);
@@ -1299,7 +1300,6 @@
this.setIsOtherChart();
n.param&&!n.param.legendValue&&this.$set(this.editChart.param,'legendValue',{min:'off',max:'off',avg:'off',last:'off',total:'off'})
}
//console.info(this.showPanel);
this.$set(this.editChart, "panelName", this.showPanel.name);
if (this.showPanel.id) {
this.panelId = this.showPanel.id;
@@ -1315,7 +1315,6 @@
deep: true,
immediate: true,
handler(n) {
// console.info((JSON.parse(JSON.stringify(n))))
let panel = this.panelData.find(p => {
return p.name == n.panelName;
});