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

NEZ-1228 fix：chart编辑页面 value mappint 切换报错，页面无法点击

Browse Source
This commit is contained in:
zhangyu
2021-11-11 17:25:54 +08:00
parent e616322f05
commit 713fa0706c
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -444,11 +444,11 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'" id="chart-box-valueMapping-type1"> <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'" id="chart-box-valueMapping-type1">
<template v-for="(mapping, index) in editChart.param.valueMapping.mapping"> <div v-for="(mapping, index) in editChart.param.valueMapping.mapping" :key="index">
<el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.value')" class="form-item--half-width-other" prop="span" > <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" class="form-item--half-width-other" prop="span" >
<el-input v-model="mapping.value" size="small" style="display: inline-block;;" type="input"></el-input> <el-input v-model="mapping.value" size="small" style="display: inline-block;;" type="input"></el-input>
</el-form-item> </el-form-item>
<el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other form-item--half-width-other-two" prop="span"> <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other form-item--half-width-other-two" prop="span">
<el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input"></el-input> <el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input"></el-input>
<!--颜色选择器 start--> <!--颜色选择器 start-->
<div class="color-show"> <div class="color-show">
@@ -457,11 +457,11 @@
<!--颜色选择器 end--> <!--颜色选择器 end-->
<span class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span> <span class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
</el-form-item> </el-form-item>
</template> </div>
</template> </template>
<template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'" id="chart-box-valueMapping-type2"> <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'" id="chart-box-valueMapping-type2">
<template v-for="(mapping, index) in editChart.param.valueMapping.mapping"> <div v-for="(mapping, index) in editChart.param.valueMapping.mapping" :key="index">
<div :key="index" class="form-item--half-width-other" style="display: inline-block;margin-left: 15px"> <div class="form-item--half-width-other" style="display: inline-block;margin-left: 15px">
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" class="one-third-form-item-left" prop="span" > <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" class="one-third-form-item-left" prop="span" >
<el-input v-model="mapping.from" size="small" type="input"></el-input> <el-input v-model="mapping.from" size="small" type="input"></el-input>
</el-form-item> </el-form-item>
@@ -469,17 +469,16 @@
<el-input v-model="mapping.to" size="small" type="input"></el-input> <el-input v-model="mapping.to" size="small" type="input"></el-input>
</el-form-item> </el-form-item>
</div> </div>
<el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other-two range" prop="span"> <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other-two range" prop="span">
<el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input" ></el-input> <el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input" ></el-input>
<!--颜色选择器 start--> <!--颜色选择器 start-->
<div class="color-show"> <div class="color-show">
<nezhaColor :color-val="mapping.color" :single="false" :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}"/> <nezhaColor :color-val="mapping.color" :single="false" :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}"/>
</div> </div>
<!--颜色选择器 end--> <!--颜色选择器 end-->
<span class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span> <span class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
</el-form-item> </el-form-item>
</template> </div>
</template> </template>
<!--value mapping end--> <!--value mapping end-->
@@ -1715,6 +1714,7 @@ export default {
}) })
}, },
valueMappingChange: function (value) { valueMappingChange: function (value) {
console.log(this.editChart.param.valueMapping.type)
if (this.editChart.param.valueMapping.type == 'value') { if (this.editChart.param.valueMapping.type == 'value') {
this.editChart.param.valueMapping.mapping = [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }] this.editChart.param.valueMapping.mapping = [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
this.showPicker = [{ bac: false, text: false }] this.showPicker = [{ bac: false, text: false }]