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

NEZ-1812 style：value mapping修改icon选择器样式

Browse Source
This commit is contained in:
18317449825
2022-05-17 13:40:08 +08:00
parent b3382bb99a
commit 0946cd5c61
6 changed files with 84 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/assets/css/components/common/nezhaColor.scss
View File

@@ -65,7 +65,8 @@
border-radius: 5px;
display: flex;
align-items: center;
height: 30px;
height: 32px;
box-sizing: border-box;
}
.color-show .color-text {

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

@@ -148,31 +148,39 @@
padding-left: 10px;
box-sizing: border-box;
}
.mapping-iconSelect {
.mapping-display-input{
input{
padding-left: 42px;
}
.el-input__prefix{
display: flex;
justify-content: space-between;
align-items: center;
width: 76px;
height: 32px;
padding:0px 5px;
left: 10px;
}
}
.mapping-iconSelect {
width: 22px;
height: 22px;
box-sizing: border-box;
border: 1px solid $--border-color-light;
border: 1px dotted #fa901c;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
i{
font-size: 12px;
color: #fa901c;
}
}
.mapping-icon{
font-size: 18px;
margin-left: 6px;
}
span{
font-size: 14px;
color: $--color-text-placeholder;
}
.el-icon-arrow-down{
transition: transform .2s;
color: $--color-text-placeholder;
}
.el-icon-arrow-down.is-active{
transform: rotate(-180deg);
}
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
.thresholds-add{
@@ -261,19 +269,14 @@
height: 100%;
width: calc(60% - 10px);
}
//.el-select__tags > span {
// display: flex;
// width: 100%;
// overflow-x: auto;
//}
}
}
.mapping-iconPop{
.mapping-iconList{
width: 285px;
height: 175px;
width: 240px;
height: 130px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
@@ -293,10 +296,10 @@
i{
font-size: 18px;
}
&:nth-of-type(6n+1){
&:nth-of-type(5n+1){
margin-left: 0;
}
&:nth-of-type(-n+6){
&:nth-of-type(-n+5){
margin-top: 0;
}
}

2
nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
View File

@@ -111,7 +111,7 @@
.color-show{
display: inline-block;
position: relative;
top: 1px;
top: 0px;
}
.topology-box{
width: 100%;

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

@@ -668,7 +668,10 @@
<div>
<div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
</div>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
<el-popover
slot="prefix"
placement="top-start"
trigger="manual"
popper-class="mapping-iconPop no-style-class"
@@ -680,14 +683,14 @@
<i :class="subItem.value"></i>
</li>
</ul>
<div class="mapping-iconSelect" slot="reference" @click="chooseIcon(isChoose[index],index)">
<div slot="reference" @click="chooseIcon(isChoose[index],index)">
<i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
<span v-else>{{$t('el.select.placeholder')}}</span>
<i class="el-icon-arrow-down" :class="{'is-active':isChoose[index]}"></i>
<div v-else class="mapping-iconSelect">
<i class="nz-icon nz-icon-create-square"></i>
</div>
</div>
</el-popover>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
</el-input>
</el-form-item>
<nezhaColor
:color-val="item.color"

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

@@ -60,6 +60,8 @@ export default {
],
mappingIconList: [
{
value: undefined
}, {
value: 'nz-icon nz-icon-Router'
}, {
value: 'nz-icon nz-icon-Computer'
@@ -315,7 +317,7 @@ export default {
// icon点击
iconActive (item, subItem, index) {
if (item.icon === subItem.value) {
this.chartConfig.param.valueMapping[index].icon = ''
this.chartConfig.param.valueMapping[index].icon = undefined
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
} else {
this.chartConfig.param.valueMapping[index].icon = subItem.value

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

@@ -630,7 +630,10 @@
<div>
<div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
</div>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
<el-popover
slot="prefix"
placement="top-start"
trigger="manual"
popper-class="mapping-iconPop no-style-class"
@@ -642,20 +645,21 @@
<i :class="subItem.value"></i>
</li>
</ul>
<div class="mapping-iconSelect" slot="reference" @click="chooseIcon(isChoose[index],index)">
<div slot="reference" @click="chooseIcon(isChoose[index],index)">
<i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
<span v-else>{{$t('el.select.placeholder')}}</span>
<i class="el-icon-arrow-down" :class="{'is-active':isChoose[index]}"></i>
<div v-else class="mapping-iconSelect">
<i class="nz-icon nz-icon-create-square"></i>
</div>
</div>
</el-popover>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
</el-input>
</el-form-item>
<nezhaColor
:color-val="item.color"
:single="false"
:value-arr="[{name:'icon',value:item.color.icon,key:'icon'},{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]"
@colorChange="(val,key)=>{colorChange(val, key, index)}"
style="margin-right:1px"
/>
</el-row>
</transition-group>