fix: 修稿 edit echart 的问题 以及 部分属性 保存未生效的问题
This commit is contained in:
@@ -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)
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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, // 搜索条件
|
||||||
|
|||||||
Reference in New Issue
Block a user