fix: 修稿 edit echart 的问题 以及 部分属性 保存未生效的问题

This commit is contained in:
zhangyu
2021-12-08 14:37:57 +08:00
parent 806bac5550
commit 69381b01bc
5 changed files with 21 additions and 15 deletions

View File

@@ -87,7 +87,6 @@ export default {
chartOption.axisLabel = { chartOption.axisLabel = {
margin: 8, margin: 8,
formatter (params) { formatter (params) {
console.log(document.getElementById('chart-canvas-' + self.chartInfo.id))
const dataLength = chartOption.series.data.length || 1 const dataLength = chartOption.series.data.length || 1
const chartWidth = (document.getElementById('chart-canvas-' + self.chartInfo.id).offsetWidth - 80) / dataLength// 容器宽 - padding - 空余 const chartWidth = (document.getElementById('chart-canvas-' + self.chartInfo.id).offsetWidth - 80) / dataLength// 容器宽 - padding - 空余
const length = Math.ceil((chartWidth) / 16) const length = Math.ceil((chartWidth) / 16)

View File

@@ -136,11 +136,11 @@ export default {
this.noData = !n || n.length < 1 this.noData = !n || n.length < 1
this.copyDataList = n.map(item => { this.copyDataList = n.map(item => {
let param = item.param let param = item.param
try { // try {
param = JSON.parse(item.param) // param = JSON.parse(item.param)
} catch (e) { // } catch (e) {
console.info(e) // console.info(e)
} // }
param.showHeader = true param.showHeader = true
return { return {
...item, ...item,

View File

@@ -513,6 +513,7 @@
size="small" size="small"
v-model.number="item.value" v-model.number="item.value"
placeholder="value" placeholder="value"
@change="change"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@@ -526,6 +527,7 @@
size="small" size="small"
v-model.number="item.from" v-model.number="item.from"
placeholder="from" placeholder="from"
@change="change"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@@ -538,6 +540,7 @@
:controls="false" :controls="false"
size="small" size="small"
v-model.number="item.to" v-model.number="item.to"
@change="change"
placeholder="to" placeholder="to"
></el-input> ></el-input>
</el-form-item> </el-form-item>
@@ -551,6 +554,7 @@
size="small" size="small"
v-model="item.regx" v-model="item.regx"
placeholder="regx" placeholder="regx"
@change="change"
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-row> </el-row>
@@ -559,7 +563,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" :placeholder="$t('placeholder.chart.display')" size="small"/> <el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change"/>
</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>
@@ -605,7 +609,7 @@
<div class='mapping-display'>Title</div> <div class='mapping-display'>Title</div>
</div> </div>
<el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item" style="flex: 1"> <el-form-item :prop="'param.columns.' + index + '.title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item" style="flex: 1">
<el-input size="small" v-model="item.title" placeholder="regx"></el-input> <el-input size="small" v-model="item.title" placeholder="regx" @change="change"></el-input>
</el-form-item> </el-form-item>
<div> <div>
<div class='mapping-display'>Unit</div> <div class='mapping-display'>Unit</div>
@@ -624,7 +628,7 @@
<div class='mapping-display'>Display</div> <div class='mapping-display'>Display</div>
</div> </div>
<el-form-item :prop="'param.columns.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item"> <el-form-item :prop="'param.columns.' + 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" size="small" @change="change"/>
</el-form-item> </el-form-item>
</el-row> </el-row>
</transition-group> </transition-group>

View File

@@ -67,7 +67,7 @@
class="form-item--half-width" class="form-item--half-width"
prop="param.limit" prop="param.limit"
> >
<el-input :controls="false" v-model.number="chartConfig.param.limit" :placeholder="$t('placeholder.system.limit')" size="small"/> <el-input :controls="false" v-model.number="chartConfig.param.limit" :placeholder="$t('placeholder.system.limit')" size="small" @change="change"/>
</el-form-item> </el-form-item>
</div> </div>
</div> </div>
@@ -258,6 +258,7 @@
size="small" size="small"
v-model.number="item.value" v-model.number="item.value"
placeholder="value" placeholder="value"
@change="change"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@@ -271,6 +272,7 @@
size="small" size="small"
v-model.number="item.from" v-model.number="item.from"
placeholder="from" placeholder="from"
@change="change"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@@ -284,6 +286,7 @@
size="small" size="small"
v-model.number="item.to" v-model.number="item.to"
placeholder="to" placeholder="to"
@change="change"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
@@ -296,6 +299,7 @@
size="small" size="small"
v-model="item.regx" v-model="item.regx"
placeholder="regx" placeholder="regx"
@change="change"
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-row> </el-row>
@@ -304,7 +308,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" size="small" @change="change"/>
</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>
@@ -350,7 +354,7 @@
<div class='mapping-display'>Title</div> <div class='mapping-display'>Title</div>
</div> </div>
<el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item" style="flex: 1"> <el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item" style="flex: 1">
<el-input size="small" v-model="item.title" placeholder="regx"></el-input> <el-input size="small" v-model="item.title" placeholder="regx" @change="change"></el-input>
</el-form-item> </el-form-item>
<div> <div>
<div class='mapping-display'>Unit</div> <div class='mapping-display'>Unit</div>
@@ -369,7 +373,7 @@
<div class='mapping-display'>Display</div> <div class='mapping-display'>Display</div>
</div> </div>
<el-form-item :prop="'param.columns.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item"> <el-form-item :prop="'param.columns.' + 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" size="small" @change="change"/>
</el-form-item> </el-form-item>
</el-row> </el-row>
</transition-group> </transition-group>

View File

@@ -399,7 +399,6 @@ export default {
this.chart.panelId = this.showPanel.id this.chart.panelId = this.showPanel.id
this.chart.panelName = this.showPanel.name this.chart.panelName = this.showPanel.name
this.chart.param = JSON.parse(this.chart.param) this.chart.param = JSON.parse(this.chart.param)
this.chart.datasource = 'metrics'
if (!this.chart.groupId || this.chart.groupId == -1) { if (!this.chart.groupId || this.chart.groupId == -1) {
this.chart.groupId = '' this.chart.groupId = ''
} }
@@ -502,7 +501,7 @@ export default {
this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => { this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
if (response.code === 200) { if (response.code === 200) {
this.chartListLoading = false this.chartListLoading = false
this.dataList = chartData.data.list.map(item => { this.dataList = response.data.list.map(item => {
return { return {
...item, ...item,
hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件 hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件