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

feat： 添加 placeholder

Browse Source
This commit is contained in:
zhangyu
2021-12-03 11:44:45 +08:00
parent c039a9ac61
commit 6eb567a13e
5 changed files with 51 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
View File

@@ -18,6 +18,23 @@
width: 100%; width: 100%;
} }
} }
.metrics-input-box{
.input-box .el-textarea .el-textarea__inner {
width: 508px;
}
.metric-selector-input-box{
line-height: 32px;
.el-input__count{
right: -38px !important;
}
}
.el-col-24{
line-height: 32px;
}
.el-input--small{
line-height: 32px;
}
}
.chart-title-config { .chart-title-config {
border: 1px solid $--border-color-light; border: 1px solid $--border-color-light;
border-radius: 2px; border-radius: 2px;
@@ -29,6 +46,9 @@
margin-bottom: 10px; margin-bottom: 10px;
box-sizing: border-box; box-sizing: border-box;
height: 32px; height: 32px;
.nz-icon{
cursor: pointer;
}
.title-content-left{ .title-content-left{
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -58,6 +78,7 @@
justify-items: center; justify-items: center;
.el-form-item__content{ .el-form-item__content{
display: flex; display: flex;
line-height: 32px;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
width: 100%; width: 100%;

38
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -9,6 +9,7 @@
> >
<div <div
v-if="chartConfig.elements" v-if="chartConfig.elements"
class="metrics-input-box"
> >
<el-form-item <el-form-item
:key="index" :key="index"
@@ -27,14 +28,14 @@
</span> </span>
</span> </span>
<span> <span>
<span @click="addExpression('')"> <span @click="addExpression('')" style="margin-right: 5px">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i> <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span> </span>
<span class="nz-icon-copy"> <span @click="copyExpression(index - 1)" style="margin-right: 5px">
<i @click="copyExpression(index - 1)" class="nz-icon nz-icon-override"></i> <i class="nz-icon nz-icon-override"></i>
</span> </span>
<span class="nz-icon-minus-medium"> <span @click="removeExpression(index - 1)" class="nz-icon-minus-medium" style="margin-right: 5px">
<i @click="removeExpression(index - 1)" class="nz-icon nz-icon-minus"></i> <i class="nz-icon nz-icon-minus"></i>
</span> </span>
</span> </span>
</div> </div>
@@ -56,7 +57,7 @@
@change="expressionChange" @change="expressionChange"
@removeExpression="removeExpression" @removeExpression="removeExpression"
></promql-input> ></promql-input>
<el-row style="margin-top: 18px"> <el-row style="margin-top: 18px;display: flex">
<el-col class="legend-title"> <el-col class="legend-title">
<span class="legend-title__span">{{$t('dashboard.panel.chartForm.legend')}}&nbsp;</span> <span class="legend-title__span">{{$t('dashboard.panel.chartForm.legend')}}&nbsp;</span>
<el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside"> <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
@@ -64,7 +65,7 @@
<i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i> <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
</el-popover> </el-popover>
</el-col> </el-col>
<el-col style="width: calc(100% - 160px);"> <el-col style="flex: 1">
<el-input maxlength="512" show-word-limit size="small" type="text" v-model="legends[index-1]" ></el-input> <el-input maxlength="512" show-word-limit size="small" type="text" v-model="legends[index-1]" ></el-input>
</el-col> </el-col>
</el-row> </el-row>
@@ -150,7 +151,7 @@
prop="param.limit"> prop="param.limit">
<el-input-number <el-input-number
size="small" size="small"
placeholder="" :placeholder="$t('placeholder.log.limit')"
v-model="chartConfig.param.limit" v-model="chartConfig.param.limit"
:controls="false" :controls="false"
@change="change"/> @change="change"/>
@@ -319,7 +320,7 @@
v-model="chartConfig.param.legend.values" v-model="chartConfig.param.legend.values"
multiple multiple
collapse-tags collapse-tags
placeholder="" :placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside" popper-class="right-box-select-top prevent-clickoutside"
size="small" size="small"
@change="change, $forceUpdate()" @change="change, $forceUpdate()"
@@ -363,7 +364,7 @@
<el-input-number <el-input-number
size="small" size="small"
style="margin-top: 3px" style="margin-top: 3px"
placeholder="" :placeholder="$t('placeholder.chart.threshold')"
v-model="item.value" v-model="item.value"
:controls="false" :controls="false"
@blur="sortThresholds" @blur="sortThresholds"
@@ -419,14 +420,14 @@
</span> </span>
</span> </span>
<span> <span>
<span @click="addMapping('')"> <span @click="addMapping('')" style="margin-right: 5px">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i> <i class="nz-icon nz-icon-create-square"></i>
</span> </span>
<span class="nz-icon-copy"> <span @click="copyMapping(index)" style="margin-right: 5px">
<i @click="copyMapping(index)" class="nz-icon nz-icon-override"></i> <i class="nz-icon nz-icon-override"></i>
</span> </span>
<span class="nz-icon-minus-medium"> <span @click="removeMapping(index)" style="margin-right: 5px">
<i @click="removeMapping(index)" class="nz-icon nz-icon-minus"></i> <i class="nz-icon nz-icon-minus"></i>
</span> </span>
</span> </span>
</div> </div>
@@ -507,7 +508,7 @@
<div class='mapping-display'>Display</div> <div class='mapping-display'>Display</div>
</div> </div>
<el-form-item :prop="'param.valueMapping.mapping.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item"> <el-form-item :prop="'param.valueMapping.mapping.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" size="small"/> <el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small"/>
</el-form-item> </el-form-item>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/> <nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
</el-row> </el-row>
@@ -618,9 +619,6 @@ export default {
data () { data () {
return { return {
rules: { rules: {
'param.limit': [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
]
}, },
promqlType: 'log', promqlType: 'log',
chartTypeList: [ chartTypeList: [

2
nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
View File

@@ -22,7 +22,7 @@
id="chart-box-type" id="chart-box-type"
v-model="chartConfig.type" v-model="chartConfig.type"
:disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length" :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
placeholder="" :placeholder="$t('el.select.placeholder')"
popper-class="right-box-select-top prevent-clickoutside" popper-class="right-box-select-top prevent-clickoutside"
size="small" size="small"
value-key="chartType" value-key="chartType"

12
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -251,7 +251,7 @@ export default {
this.chartConfig.param.valueMapping.mapping.push({ this.chartConfig.param.valueMapping.mapping.push({
type: 'value', type: 'value',
show: true, show: true,
value: '', value: undefined,
display: '', display: '',
color: { color: {
bac: '#FFFFFFFF', bac: '#FFFFFFFF',
@@ -276,21 +276,25 @@ export default {
if (mapping.type === 'value') { if (mapping.type === 'value') {
this.chartConfig.param.valueMapping.mapping[index] = { this.chartConfig.param.valueMapping.mapping[index] = {
...mapping, ...mapping,
value: '' value: undefined
} }
} }
this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'value')
if (mapping.type === 'range') { if (mapping.type === 'range') {
this.chartConfig.param.valueMapping.mapping[index] = { this.chartConfig.param.valueMapping.mapping[index] = {
...mapping, ...mapping,
from: '', from: undefined,
to: '' to: undefined
} }
this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'from')
this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'to')
} }
if (mapping.type === 'regx') { if (mapping.type === 'regx') {
this.chartConfig.param.valueMapping.mapping[index] = { this.chartConfig.param.valueMapping.mapping[index] = {
...mapping, ...mapping,
regx: '' regx: ''
} }
this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'regx')
} }
this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index]) this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
this.change() this.change()

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

@@ -26,7 +26,7 @@
class="form-item--half-width" class="form-item--half-width"
prop="param.systemGroup" prop="param.systemGroup"
> >
<el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags> <el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')">
<el-option v-for="item in groupList" :value="item.name" :key="item.name" :label="item.name"/> <el-option v-for="item in groupList" :value="item.name" :key="item.name" :label="item.name"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -36,7 +36,7 @@
class="form-item--half-width" class="form-item--half-width"
prop="param.systemSelect" prop="param.systemSelect"
> >
<el-select size="small" v-model="chartConfig.param.systemSelect"> <el-select size="small" v-model="chartConfig.param.systemSelect" :placeholder="$t('el.select.placeholder')">
<el-option v-for="item in selectList" :value="item.name" :key="item.name" :label="item.name"/> <el-option v-for="item in selectList" :value="item.name" :key="item.name" :label="item.name"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
@@ -67,7 +67,7 @@
class="form-item--half-width" class="form-item--half-width"
prop="param.limit" prop="param.limit"
> >
<el-input-number :controls="false" v-model="chartConfig.param.limit" size="small"/> <el-input-number :controls="false" v-model="chartConfig.param.limit" :placeholder="$t('placeholder.system.limit')" size="small"/>
</el-form-item> </el-form-item>
</div> </div>
</div> </div>