fix：修改 chartTemp 新增组件使用错误的问题
This commit is contained in:
zhangyu
@@ -338,10 +338,11 @@ export default {
|
||||
this.$emit('changeTab', tab)
|
||||
},
|
||||
closeRightBox (refresh) {
|
||||
console.log('close')
|
||||
this.rightBox.chart.show = false
|
||||
this.rightBox.chartTemp.show = false
|
||||
this.chart = {}
|
||||
this.$store.dispatch('clearPanel')
|
||||
this.chart = {}
|
||||
if (refresh) {
|
||||
this.refresh()
|
||||
if (this.from === fromRoute.chartTemp) {
|
||||
|
||||
@@ -38,7 +38,14 @@
|
||||
</template>
|
||||
</select-panel>
|
||||
</el-form-item>
|
||||
|
||||
<!-- varType -->
|
||||
<el-form-item :label="$t('dashboard.panel.chartForm.varType')" class="form-item--half-width" v-if="from === 'chartTemp'">
|
||||
<el-select id="chart-box-varType" v-model="editChart.varType" :disabled="!!editChart.id" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" clearable placeholder="" size="small" value-key="chartType">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
|
||||
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--group-->
|
||||
<el-form-item :label="$t('dashboard.panel.chartForm.group')" class="form-item--half-width" prop="group">
|
||||
<el-select id="chart-box-group" v-model="editChart.groupId" :disabled="editChart.type==='group'" clearable placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
|
||||
@@ -176,6 +183,10 @@ export default {
|
||||
prevChart: {},
|
||||
filterPanel: '',
|
||||
groupArr: [],
|
||||
varTypeArr: [
|
||||
{ name: 'Asset', id: 1 },
|
||||
{ name: 'Endpoint', id: 2 }
|
||||
],
|
||||
panelName: '',
|
||||
rules: {
|
||||
name: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
|
||||
@@ -191,6 +202,7 @@ export default {
|
||||
/* 关闭弹框 */
|
||||
esc (refresh) {
|
||||
this.prevent_opt.save = false
|
||||
console.log(12313)
|
||||
this.$emit('close', refresh)
|
||||
},
|
||||
// 保存endpoint
|
||||
@@ -437,6 +449,13 @@ export default {
|
||||
if (!this.editChart.param.link) {
|
||||
this.$set(this.editChart.param, 'link', '')
|
||||
}
|
||||
if (!this.editChart.param.enable) {
|
||||
this.editChart.param.enable = {
|
||||
thresholds: false,
|
||||
legend: false,
|
||||
valueMapping: false
|
||||
}
|
||||
}
|
||||
if (this.editChart.param.enable.legend && !this.editChart.param.legend) {
|
||||
this.editChart.param.legend = { placement: 'bottom', values: [], show: true }
|
||||
}
|
||||
|
||||
@@ -89,7 +89,32 @@
|
||||
</template>
|
||||
</nzDataList>
|
||||
<transition name="right-box">
|
||||
<chart-box :chart="object" :show-panel="showPanel" :from="'chartTemp'" @close="closeChartBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" ref="addChartModal" v-if="rightBox.show"></chart-box>
|
||||
<!-- <chart-box-->
|
||||
<!-- :chart="object"-->
|
||||
<!-- :show-panel="showPanel"-->
|
||||
<!-- :from="'chartTemp'"-->
|
||||
<!-- @close="closeChartBox"-->
|
||||
<!-- @delete-chart="delChart"-->
|
||||
<!-- @on-create-success="createSuccess"-->
|
||||
<!-- @on-delete-success="delChartOk"-->
|
||||
<!-- @reload="panelReload"-->
|
||||
<!-- @reloadOnlyPanel="panelReloadOnlyPanel"-->
|
||||
<!-- ref="addChartModal"-->
|
||||
<!-- v-if="rightBox.show"></chart-box>-->
|
||||
<chart-right-box
|
||||
v-if="rightBox.show"
|
||||
v-loading="rightBox.loading"
|
||||
ref="addChartModal"
|
||||
:chart="object"
|
||||
:from="'chartTemp'"
|
||||
:show-panel="showPanel"
|
||||
@close="closeChartBox"
|
||||
@reload="panelReload"
|
||||
@reloadOnlyPanel="panelReloadOnlyPanel"
|
||||
@delete-chart="delChart"
|
||||
@on-create-success="createSuccess"
|
||||
@on-delete-success="delChartOk"
|
||||
></chart-right-box>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
@@ -102,6 +127,8 @@ import dataListMixin from '@/components/common/mixin/dataList'
|
||||
import chartTmplTable from '@/components/common/table/settings/chartTmplTable'
|
||||
import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
|
||||
import routerPathParams from '@/components/common/mixin/routerPathParams'
|
||||
import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
|
||||
import {randomcolor} from "@/components/common/js/radomcolor/randomcolor";
|
||||
|
||||
export default {
|
||||
name: 'chartTemp',
|
||||
@@ -110,7 +137,8 @@ export default {
|
||||
deleteButton,
|
||||
chartTmplTable,
|
||||
'export-excel': exportXLSX,
|
||||
topToolMoreOptions
|
||||
topToolMoreOptions,
|
||||
chartRightBox
|
||||
},
|
||||
mixins: [dataListMixin, routerPathParams],
|
||||
data () {
|
||||
@@ -157,17 +185,28 @@ export default {
|
||||
id: '',
|
||||
name: '',
|
||||
type: 'line',
|
||||
span: 12,
|
||||
height: '400',
|
||||
span: 4,
|
||||
datasource: 'metrics',
|
||||
varType: 1,
|
||||
height: 4,
|
||||
unit: 2,
|
||||
param: { url: '', threshold: '' },
|
||||
elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
|
||||
param: {
|
||||
stack: 0,
|
||||
nullType: 'null',
|
||||
legend: { placement: 'bottom', values: [], show: true },
|
||||
enable: {
|
||||
legend: true,
|
||||
valueMapping: false,
|
||||
thresholds: false
|
||||
},
|
||||
thresholdShow: true,
|
||||
thresholds: [{ value: undefined, color: randomcolor() }]
|
||||
},
|
||||
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
|
||||
panel: '',
|
||||
sync: '',
|
||||
sync: 0,
|
||||
remark: '',
|
||||
groupId: -1,
|
||||
panelId: 0,
|
||||
varType: 1
|
||||
groupId: ''
|
||||
},
|
||||
showPanel: {
|
||||
name: 'template',
|
||||
@@ -184,16 +223,57 @@ export default {
|
||||
this.object = this.newObject()
|
||||
this.object.panelId = 0
|
||||
this.object.panelName = 'template'
|
||||
this.object.param.thresholds = [{ value: undefined, color: randomcolor() }]
|
||||
this.rightBox.show = true
|
||||
},
|
||||
edit (u) {
|
||||
if (!u.param) {
|
||||
u.param = { url: '', threshold: '' }
|
||||
}
|
||||
this.object = JSON.parse(JSON.stringify(u))
|
||||
edit (data, copy) {
|
||||
if (copy) {
|
||||
this.object = JSON.parse(JSON.stringify(data))
|
||||
this.object.x = 0
|
||||
this.object.y = 0
|
||||
this.object.panelId = this.showPanel.id
|
||||
this.object.panelName = this.showPanel.name
|
||||
this.object.id = ''
|
||||
this.object.elements.forEach((item) => {
|
||||
item.id = ''
|
||||
item.chartId = ''
|
||||
delete item.seq
|
||||
})
|
||||
if (this.object.datasource !== 'metrics' && this.object.datasource !== 'log') {
|
||||
delete this.object.elements
|
||||
}
|
||||
if (!this.object.groupId || this.object.groupId == -1) {
|
||||
this.object.groupId = ''
|
||||
}
|
||||
this.rightBox.show = true
|
||||
} else {
|
||||
this.rightBox.show = true
|
||||
this.rightBox.loading = true
|
||||
this.$get('visual/panel/chart/' + data.id).then(res => {
|
||||
this.rightBox.loading = false
|
||||
if (res.code === 200) {
|
||||
const chartData = res.data.data
|
||||
this.object = JSON.parse(JSON.stringify(chartData))
|
||||
this.object.panelId = this.showPanel.id
|
||||
this.object.panelName = this.showPanel.name
|
||||
this.object.param = JSON.parse(this.object.param)
|
||||
if (!this.object.groupId || this.object.groupId == -1) {
|
||||
this.object.groupId = ''
|
||||
}
|
||||
if (this.object.type == 'table') {
|
||||
const arr = this.object.param.indexs ? this.object.param.indexs.split(',') : []
|
||||
this.object.param.tags = arr.map((item) => {
|
||||
return {
|
||||
text: item,
|
||||
tiClasses: ['ti-valid']
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
chartBySync (row) {
|
||||
this.$post('visual/panel/chart/syncTmpl', { pid: row.id }).then(res => {
|
||||
@@ -240,6 +320,7 @@ export default {
|
||||
},
|
||||
closeChartBox (refresh) {
|
||||
this.rightBox.show = false
|
||||
this.chart = {}
|
||||
if (refresh) {
|
||||
this.getTableData()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user