feat： system-char-config 添加
This commit is contained in:
zhangyu
@@ -104,7 +104,7 @@
|
||||
.element-item {
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
.vue-tags-input{
|
||||
display: inline-block;
|
||||
@@ -121,8 +121,15 @@
|
||||
}
|
||||
.system-chart-config-left{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
border: 1px solid $--border-color-light;
|
||||
border-radius: 2px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
ul{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.system-chart-item {
|
||||
font-size: 14px;
|
||||
padding: 3px 5px;
|
||||
@@ -140,5 +147,10 @@
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
//.el-select__tags > span {
|
||||
// display: flex;
|
||||
// width: 100%;
|
||||
// overflow-x: auto;
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -95,13 +95,7 @@
|
||||
import { fromRoute } from '@/components/common/js/constants'
|
||||
import editRigthBox from '@/components/common/mixin/editRigthBox'
|
||||
import { resetZIndex } from '@/components/common/js/common'
|
||||
import chartPreview from '@/components/charts/chartPreview'
|
||||
import alertChartParam from '@/components/page/dashboard/alertChartParam'
|
||||
import promqlInput from '@/components/page/dashboard/explore/promqlInput'
|
||||
import richTextEditor from '@/components/charts/richTextEditor'
|
||||
import selectPanel from '@/components/common/popBox/selectPanel'
|
||||
import nezhaColor from '@/components/common/nezhaColor'
|
||||
import diagram from '@/components/common/ChartDiagram/diagram'
|
||||
import chartConfig from '@/components/common/rightBox/chart/chartConfig'
|
||||
import otherChartConfig from '@/components/common/rightBox/chart/otherChartConfig'
|
||||
import systemChartConfig from '@/components/common/rightBox/chart/systemChartConfig'
|
||||
@@ -127,14 +121,7 @@ export default {
|
||||
},
|
||||
mixins: [rz, editRigthBox],
|
||||
components: {
|
||||
System,
|
||||
'chart-preview': chartPreview,
|
||||
'alert-chart-param': alertChartParam,
|
||||
'promql-input': promqlInput,
|
||||
'rich-text-editor': richTextEditor,
|
||||
selectPanel,
|
||||
nezhaColor,
|
||||
diagram,
|
||||
chartConfig,
|
||||
systemChartConfig,
|
||||
otherChartConfig
|
||||
@@ -267,14 +254,20 @@ export default {
|
||||
span: 4,
|
||||
height: 4,
|
||||
unit: 2,
|
||||
type: 'stat',
|
||||
type: 'singleStat',
|
||||
param: {
|
||||
refer: 1,
|
||||
system: '',
|
||||
systemGroup: '',
|
||||
systemSelect: '',
|
||||
sort: 'desc',
|
||||
limit: 100
|
||||
limit: undefined,
|
||||
nullType: 'null',
|
||||
statistics: 'last',
|
||||
valueMapping: {
|
||||
show: true,
|
||||
mapping: []
|
||||
}
|
||||
}
|
||||
}
|
||||
delete this.editChart.elements
|
||||
|
||||
@@ -10,6 +10,7 @@ export default {
|
||||
case 'singleStat':
|
||||
case 'bar':
|
||||
case 'treemap':
|
||||
case 'guage':
|
||||
case 'pie':
|
||||
return false
|
||||
default: return false
|
||||
@@ -25,6 +26,7 @@ export default {
|
||||
case 'singleStat':
|
||||
case 'bar':
|
||||
case 'treemap':
|
||||
case 'guage':
|
||||
case 'pie':
|
||||
return true
|
||||
default: return false
|
||||
@@ -39,6 +41,7 @@ export default {
|
||||
case 'table':
|
||||
case 'singleStat':
|
||||
case 'bar':
|
||||
case 'guage':
|
||||
case 'treemap':
|
||||
case 'pie':
|
||||
return false
|
||||
@@ -54,6 +57,7 @@ export default {
|
||||
return false
|
||||
case 'singleStat':
|
||||
case 'bar':
|
||||
case 'guage':
|
||||
case 'treemap':
|
||||
case 'pie':
|
||||
return true
|
||||
@@ -69,6 +73,7 @@ export default {
|
||||
case 'point':
|
||||
case 'singleStat':
|
||||
case 'bar':
|
||||
case 'guage':
|
||||
case 'treemap':
|
||||
case 'pie':
|
||||
return false
|
||||
|
||||
@@ -25,19 +25,20 @@
|
||||
:label="$t('dashboard.panel.chartForm.group')"
|
||||
class="form-item--half-width"
|
||||
prop="param.systemGroup"
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
>
|
||||
<el-select size="small">
|
||||
|
||||
<el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags>
|
||||
<el-option v-for="item in groupList" :value="item.name" :key="item.name" :label="item.name"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="selectList.length"
|
||||
:label="$t('dashboard.panel.chartForm.select')"
|
||||
class="form-item--half-width"
|
||||
prop="param.stack"
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
prop="param.systemSelect"
|
||||
>
|
||||
<el-input size="small"/>
|
||||
<el-select size="small" v-model="chartConfig.param.systemSelect">
|
||||
<el-option v-for="item in selectList" :value="item.name" :key="item.name" :label="item.name"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-items--half-width-group">
|
||||
@@ -62,10 +63,9 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('dashboard.panel.chartForm.limit')"
|
||||
:label="$t('dashboard.panel.chartForm.result')"
|
||||
class="form-item--half-width"
|
||||
prop="param.limit"
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
>
|
||||
<el-input-number :controls="false" v-model="chartConfig.param.limit" size="small"/>
|
||||
</el-form-item>
|
||||
@@ -177,6 +177,206 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- valueMapping -->
|
||||
<div v-if="isShowValueMapping(chartConfig.type)">
|
||||
<div class="form__sub-title">
|
||||
<span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
|
||||
<el-switch
|
||||
v-model="chartConfig.param.valueMapping.show"
|
||||
size="small"
|
||||
@change="change"
|
||||
></el-switch>
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<el-row v-if="chartConfig.param.valueMapping.show">
|
||||
<div
|
||||
v-for="(item,index) in chartConfig.param.valueMapping.mapping"
|
||||
:key="index"
|
||||
>
|
||||
<div class="chart-title chart-title-config">
|
||||
<span class="endpoint-title-content">
|
||||
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showMapping(index)"></i>
|
||||
<span v-show="!item.show" class="title-content-left">
|
||||
<span v-if="item.type === 'value'">
|
||||
{{item.value}}
|
||||
</span>
|
||||
<span v-if="item.type === 'range'">
|
||||
{{item.from}} -> {{item.to}}
|
||||
</span>
|
||||
<span v-if="item.type === 'regx'">
|
||||
{{item.regx}}
|
||||
</span>
|
||||
<div :style="{background:item.color.bac}" class="prev-mapping-box">
|
||||
<span :style="{color:item.color.text}">
|
||||
{{item.display || "T"}}
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<span @click="addMapping('')">
|
||||
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
|
||||
</span>
|
||||
<span class="nz-icon-copy">
|
||||
<i @click="copyMapping(index)" class="nz-icon nz-icon-override"></i>
|
||||
</span>
|
||||
<span class="nz-icon-minus-medium">
|
||||
<i @click="removeMapping(index)" class="nz-icon nz-icon-minus"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<transition-group appear tag="div" name="el-zoom-in-top">
|
||||
<el-row
|
||||
v-show="item.show"
|
||||
:key="1"
|
||||
class="thresholds-item"
|
||||
>
|
||||
<div>
|
||||
<el-select
|
||||
v-model="item.type"
|
||||
size="small"
|
||||
style="width: 100px"
|
||||
@change="(val)=>{mappingItemChange(index,val)}"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in mappingTypeList"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
:key="item.value"/>
|
||||
</el-select>
|
||||
</div>
|
||||
<el-form-item
|
||||
v-if="item.type === 'value'"
|
||||
:prop="'param.valueMapping.mapping.' + index + 'value'"
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
class="thresholds-from-item"
|
||||
>
|
||||
<el-input-number
|
||||
:controls="false"
|
||||
size="small"
|
||||
v-model="item.value"
|
||||
placeholder="value"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="item.type === 'range'"
|
||||
:prop="'param.valueMapping.mapping.' + index + 'from'"
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
class="thresholds-from-item"
|
||||
>
|
||||
<el-input-number
|
||||
:controls="false"
|
||||
size="small"
|
||||
v-model="item.from"
|
||||
placeholder="from"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="item.type === 'range'"
|
||||
:prop="'param.valueMapping.mapping.' + index + 'to'"
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
class="thresholds-from-item"
|
||||
>
|
||||
<el-input-number
|
||||
:controls="false"
|
||||
size="small"
|
||||
v-model="item.to"
|
||||
placeholder="to"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="item.type === 'regx'"
|
||||
:prop="'param.valueMapping.mapping.' + index + 'regx'"
|
||||
:rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
|
||||
class="thresholds-from-item"
|
||||
>
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="item.regx"
|
||||
placeholder="regx"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row v-show="item.show" :key="2" class="thresholds-item">
|
||||
<div>
|
||||
<div class='mapping-display'>Display</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-input v-model="item.display" style="margin-right: 10px" size="small"/>
|
||||
</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)}"/>
|
||||
</el-row>
|
||||
</transition-group>
|
||||
</div>
|
||||
<div @click="addMapping" class="thresholds-add">
|
||||
Add valueMapping
|
||||
</div>
|
||||
</el-row>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<!-- table column-->
|
||||
<div v-if="isTable(chartConfig.type)">
|
||||
<div class="form__sub-title">
|
||||
<span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
|
||||
</div>
|
||||
<div v-for="(item,index) in chartConfig.param.columns" :key="index">
|
||||
<div class="chart-title chart-title-config">
|
||||
<span class="endpoint-title-content">
|
||||
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showColumns(index)"></i>
|
||||
<span v-show="!item.show" class="title-content-left">
|
||||
<span>
|
||||
{{item.value}}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<span @click="addColumns('')">
|
||||
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
|
||||
</span>
|
||||
<span class="nz-icon-copy">
|
||||
<i @click="copyColumns(index)" class="nz-icon nz-icon-override"></i>
|
||||
</span>
|
||||
<span class="nz-icon-minus-medium">
|
||||
<i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<transition-group appear tag="div" name="el-zoom-in-top">
|
||||
<el-row class="thresholds-item" v-show="item.show" :key="1">
|
||||
<div>
|
||||
<div class='mapping-display'>Title</div>
|
||||
</div>
|
||||
<el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
|
||||
<el-input size="small" v-model="item.title" placeholder="regx"></el-input>
|
||||
</el-form-item>
|
||||
<div>
|
||||
<div class='mapping-display'>Unit</div>
|
||||
</div>
|
||||
<el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable
|
||||
placeholder=""
|
||||
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
@change="unitSelected"
|
||||
>
|
||||
</el-cascader>
|
||||
</el-row>
|
||||
<el-row class="thresholds-item" v-show="item.show" :key="2">
|
||||
<div>
|
||||
<div class='mapping-display'>Display</div>
|
||||
</div>
|
||||
<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-form-item>
|
||||
</el-row>
|
||||
</transition-group>
|
||||
</div>
|
||||
<div @click="addColumns" class="thresholds-add">
|
||||
Add Colums
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -184,14 +384,20 @@
|
||||
<script>
|
||||
import publicConfig from '@/components/common/rightBox/chart/publicConfig'
|
||||
import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
|
||||
import nezhaColor from '@/components/common/nezhaColor'
|
||||
export default {
|
||||
name: 'systemChartConfig',
|
||||
mixins: [publicConfig, chartTypeShow],
|
||||
components: {
|
||||
nezhaColor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
systemData: [],
|
||||
loading: false,
|
||||
rules: {},
|
||||
groupList: [],
|
||||
selectList: [],
|
||||
chartTypeList: [
|
||||
{
|
||||
id: 'singleStat',
|
||||
@@ -204,6 +410,18 @@ export default {
|
||||
{
|
||||
id: 'pie',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
|
||||
},
|
||||
{
|
||||
id: 'guage',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
|
||||
},
|
||||
{
|
||||
id: 'treemap',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.treemap.label')
|
||||
},
|
||||
{
|
||||
id: 'table',
|
||||
name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -220,6 +438,9 @@ export default {
|
||||
this.systemData = res.data.list
|
||||
if (res.data.list.length) {
|
||||
this.chartConfig.param.system = res.data.list[0].name
|
||||
this.groupList = res.data.list[0].group
|
||||
this.selectList = res.data.list[0].select
|
||||
this.$refs.chartForm.clearValidate()
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
@@ -228,33 +449,32 @@ export default {
|
||||
},
|
||||
chartTypeChange (type) {
|
||||
switch (type) {
|
||||
case 'group':
|
||||
this.chartConfig.height = ''
|
||||
this.chartConfig.span = 12
|
||||
this.chartConfig.param = {
|
||||
collapse: false
|
||||
case 'singleStat':
|
||||
case 'bar':
|
||||
case 'pie':
|
||||
case 'guage':
|
||||
case 'treemap':
|
||||
this.chartConfig.param.valueMapping = {
|
||||
show: true,
|
||||
mapping: []
|
||||
}
|
||||
this.chartConfig.param.refer = 1
|
||||
delete this.chartConfig.param.columns
|
||||
break
|
||||
case 'text':
|
||||
this.chartConfig.param = {
|
||||
text: ''
|
||||
}
|
||||
break
|
||||
case 'diagram':
|
||||
this.chartConfig.param = {
|
||||
topo: ''
|
||||
}
|
||||
break
|
||||
case 'url':
|
||||
this.chartConfig.param = {
|
||||
url: ''
|
||||
}
|
||||
case 'table':
|
||||
this.chartConfig.param.columns = []
|
||||
this.chartConfig.param.refer = 1
|
||||
delete this.chartConfig.param.valueMapping
|
||||
break
|
||||
}
|
||||
this.change()
|
||||
},
|
||||
changeSystem (item) {
|
||||
this.chartConfig.param.system = item.name
|
||||
this.chartConfig.param.systemGroup = ''
|
||||
this.chartConfig.param.systemSelect = ''
|
||||
this.groupList = item.group
|
||||
this.selectList = item.select
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
Reference in New Issue
Block a user