center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat: 指标卡阈值设置

Browse Source
This commit is contained in:
junjun 2022-04-13 12:01:39 +08:00
parent 02b05220d2
commit df9a31bd78
13 changed files with 676 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/lang/en.js
View File

@ -1068,7 +1068,24 @@ export default {
count_distinct: 'Distinct Count',
table_page_mode: 'Page Mode',
page_mode_page: 'Page',
page_mode_pull: 'Pull'
page_mode_pull: 'Pull',
exp_can_not_empty: 'Condition can not be empty',
value_formatter: 'Value Formatter',
value_formatter_type: 'Formatter Type',
value_formatter_auto: 'Auto',
value_formatter_value: 'Value',
value_formatter_percent: 'Percent',
value_formatter_unit: 'Unit',
value_formatter_decimal_count: 'Decimal Count',
value_formatter_suffix: 'Unit Suffix',
value_formatter_thousand_separator: 'Thousand Separator',
value_formatter_example: 'Example',
unit_none: 'None',
unit_thousand: 'Thousand',
unit_ten_thousand: 'Ten Thousand',
unit_million: 'Million',
unit_hundred_million: 'Hundred Million',
formatter_decimal_count_error: 'Range 0-10'
},
dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

19
frontend/src/lang/tw.js
View File

@ -1068,7 +1068,24 @@ export default {
count_distinct: '去重計數',
table_page_mode: '分頁模式',
page_mode_page: '翻頁',
page_mode_pull: '下拉'
page_mode_pull: '下拉',
exp_can_not_empty: '條件不能為空',
value_formatter: '數值格式',
value_formatter_type: '格式類型',
value_formatter_auto: '自動',
value_formatter_value: '數值',
value_formatter_percent: '百分比',
value_formatter_unit: '數量單位',
value_formatter_decimal_count: '小數位數',
value_formatter_suffix: '單位後綴',
value_formatter_thousand_separator: '千分符',
value_formatter_example: '示例',
unit_none: '無',
unit_thousand: '千',
unit_ten_thousand: '萬',
unit_million: '百萬',
unit_hundred_million: '億',
formatter_decimal_count_error: '請輸入0-10的整數'
},
dataset: {
sheet_warn: '有多個 Sheet 頁，默認抽取第一個',

19
frontend/src/lang/zh.js
View File

@ -1071,7 +1071,24 @@ export default {
count_distinct: '去重计数',
table_page_mode: '分页模式',
page_mode_page: '翻页',
page_mode_pull: '下拉'
page_mode_pull: '下拉',
exp_can_not_empty: '条件不能为空',
value_formatter: '数值格式',
value_formatter_type: '格式类型',
value_formatter_auto: '自动',
value_formatter_value: '数值',
value_formatter_percent: '百分比',
value_formatter_unit: '数量单位',
value_formatter_decimal_count: '小数位数',
value_formatter_suffix: '单位后缀',
value_formatter_thousand_separator: '千分符',
value_formatter_example: '示例',
unit_none: '无',
unit_thousand: '千',
unit_ten_thousand: '万',
unit_million: '百万',
unit_hundred_million: '亿',
formatter_decimal_count_error: '请输入0-10的整数'
},
dataset: {
sheet_warn: '有多个 Sheet 页，默认抽取第一个',

3
frontend/src/views/chart/chart/chart.js
View File

@ -277,7 +277,8 @@ export const DEFAULT_FUNCTION_CFG = {
sliderRange: [0, 10]
}
export const DEFAULT_THRESHOLD = {
gaugeThreshold: ''
gaugeThreshold: '',
labelThreshold: []
}
// chart config
export const BASE_BAR = {

71
frontend/src/views/chart/chart/formatter.js Normal file
View File

@ -0,0 +1,71 @@
export const formatterItem = {
type: 'auto', // auto,value,percent
unit: 1, // 换算单位
suffix: '', // 单位后缀
decimalCount: 2, // 小数位数
thousandSeparator: true// 千分符
}
// 单位list
export const unitList = [
{ name: 'unit_none', value: 1 },
{ name: 'unit_thousand', value: 1000 },
{ name: 'unit_ten_thousand', value: 10000 },
{ name: 'unit_million', value: 1000000 },
{ name: 'unit_hundred_million', value: 100000000 }
]
// 格式化方式
export const formatterType = [
{ name: 'value_formatter_auto', value: 'auto' },
{ name: 'value_formatter_value', value: 'value' },
{ name: 'value_formatter_percent', value: 'percent' }
]
export function valueFormatter(value, formatter) {
// 1.unit 2.decimal 3.thousand separator and suffix
let result
if (formatter.type === 'auto') {
result = transSeparatorAndSuffix(transUnit(value, formatter), formatter)
} else if (formatter.type === 'value') {
result = transSeparatorAndSuffix(transDecimal(transUnit(value, formatter), formatter), formatter)
} else if (formatter.type === 'percent') {
value = value * 100
result = transSeparatorAndSuffix(transDecimal(value, formatter), formatter)
} else {
result = value
}
return result
}
function transUnit(value, formatter) {
return value / formatter.unit
}
function transDecimal(value, formatter) {
return value.toFixed(formatter.decimalCount)
}
function transSeparatorAndSuffix(value, formatter) {
let str = value + ''
if (formatter.thousandSeparator) {
const thousandsReg = /(\d)(?=(\d{3})+$)/g
const numArr = str.split('.')
numArr[0] = numArr[0].replace(thousandsReg, '$1,')
str = numArr.join('.')
}
if (formatter.type === 'percent') {
str += '%'
} else {
if (formatter.unit === 1000) {
str += '千'
} else if (formatter.unit === 10000) {
str += '万'
} else if (formatter.unit === 1000000) {
str += '百万'
} else if (formatter.unit === 100000000) {
str += '亿'
}
}
return str + formatter.suffix.replace(/(^\s*)|(\s*$)/g, '')
}

26
frontend/src/views/chart/components/drag-item/DimensionItem.vue
View File

@ -77,6 +77,9 @@
</el-dropdown>
</el-dropdown-item>
<el-dropdown-item v-if="chart.render === 'antv' && chart.type.includes('table')" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
<span>{{ $t('chart.value_formatter') }}...</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
<span>{{ $t('chart.show_name_set') }}</span>
</el-dropdown-item>
@ -92,6 +95,7 @@
<script>
import { getItemType } from '@/views/chart/components/drag-item/utils'
import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
import { formatterItem } from '@/views/chart/chart/formatter'
export default {
name: 'DimensionItem',
@ -109,6 +113,10 @@ export default {
type: Number,
required: true
},
chart: {
type: Object,
required: true
},
dimensionData: {
type: Array,
required: true
@ -120,7 +128,8 @@ export default {
},
data() {
return {
tagType: 'success'
tagType: 'success',
formatterItem: formatterItem
}
},
watch: {
@ -132,8 +141,14 @@ export default {
}
},
mounted() {
this.init()
},
methods: {
init() {
if (!this.item.formatterCfg) {
this.item.formatterCfg = JSON.parse(JSON.stringify(this.formatterItem))
}
},
clickItem(param) {
if (!param) {
return
@ -148,6 +163,9 @@ export default {
case 'filter':
this.editFilter()
break
case 'formatter':
this.valueFormatter()
break
default:
break
}
@ -203,6 +221,12 @@ export default {
},
getItemTagType() {
this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
},
valueFormatter() {
this.item.index = this.index
this.item.formatterType = 'quota'
this.$emit('valueFormatter', this.item)
}
}
}

19
frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
View File

@ -99,6 +99,9 @@
<el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
<span>{{ $t('chart.filter') }}...</span>
</el-dropdown-item>
<el-dropdown-item v-if="chart.render === 'antv' && chart.type.includes('table')" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
<span>{{ $t('chart.value_formatter') }}...</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
<span>{{ $t('chart.show_name_set') }}</span>
</el-dropdown-item>
@ -115,6 +118,7 @@
import { compareItem } from '@/views/chart/chart/compare'
import { getItemType } from '@/views/chart/components/drag-item/utils'
import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
import { formatterItem } from '@/views/chart/chart/formatter'
export default {
name: 'QuotaExtItem',
@ -149,7 +153,8 @@ export default {
return {
compareItem: compareItem,
disableEditCompare: false,
tagType: 'success'
tagType: 'success',
formatterItem: formatterItem
}
},
watch: {
@ -175,6 +180,9 @@ export default {
if (!this.item.compareCalc) {
this.item.compareCalc = JSON.parse(JSON.stringify(this.compareItem))
}
if (!this.item.formatterCfg) {
this.item.formatterCfg = JSON.parse(JSON.stringify(this.formatterItem))
}
},
isEnableCompare() {
let xAxis = null
@ -207,6 +215,9 @@ export default {
case 'filter':
this.editFilter()
break
case 'formatter':
this.valueFormatter()
break
default:
break
}
@ -291,6 +302,12 @@ export default {
},
getItemTagType() {
this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
},
valueFormatter() {
this.item.index = this.index
this.item.formatterType = 'quota'
this.$emit('valueFormatter', this.item)
}
}
}

19
frontend/src/views/chart/components/drag-item/QuotaItem.vue
View File

@ -99,6 +99,9 @@
<el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
<span>{{ $t('chart.filter') }}...</span>
</el-dropdown-item>
<el-dropdown-item v-if="chart.render === 'antv' && chart.type.includes('table')" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
<span>{{ $t('chart.value_formatter') }}...</span>
</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
<span>{{ $t('chart.show_name_set') }}</span>
</el-dropdown-item>
@ -115,6 +118,7 @@
import { compareItem } from '@/views/chart/chart/compare'
import { getItemType } from '@/views/chart/components/drag-item/utils'
import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
import { formatterItem } from '@/views/chart/chart/formatter'
export default {
name: 'QuotaItem',
@ -149,7 +153,8 @@ export default {
return {
compareItem: compareItem,
disableEditCompare: false,
tagType: 'success'
tagType: 'success',
formatterItem: formatterItem
}
},
watch: {
@ -172,6 +177,9 @@ export default {
if (!this.item.compareCalc) {
this.item.compareCalc = JSON.parse(JSON.stringify(this.compareItem))
}
if (!this.item.formatterCfg) {
this.item.formatterCfg = JSON.parse(JSON.stringify(this.formatterItem))
}
},
isEnableCompare() {
let xAxis = null
@ -204,6 +212,9 @@ export default {
case 'filter':
this.editFilter()
break
case 'formatter':
this.valueFormatter()
break
default:
break
}
@ -288,6 +299,12 @@ export default {
},
getItemTagType() {
this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
},
valueFormatter() {
this.item.index = this.index
this.item.formatterType = 'quota'
this.$emit('valueFormatter', this.item)
}
}
}

54
frontend/src/views/chart/components/normal/LabelNormal.vue
View File

@ -136,7 +136,8 @@ export default {
const customAttr = JSON.parse(this.chart.customAttr)
if (customAttr.color) {
this.label_class.color = customAttr.color.dimensionColor
this.label_content_class.color = customAttr.color.quotaColor
// color threshold
this.colorThreshold(customAttr.color.quotaColor)
}
if (customAttr.size) {
this.dimensionShow = customAttr.size.dimensionShow
@ -168,6 +169,57 @@ export default {
chartResize() {
// 指定图表的配置项和数据
this.calcHeight()
},
colorThreshold(valueColor) {
if (this.chart.senior) {
const senior = JSON.parse(this.chart.senior)
if (senior.threshold.labelThreshold && senior.threshold.labelThreshold.length > 0) {
const value = this.chart.data.series[0].data[0]
for (let i = 0; i < senior.threshold.labelThreshold.length; i++) {
let flag = false
const t = senior.threshold.labelThreshold[i]
if (t.term === 'eq') {
if (value === t.value) {
this.label_content_class.color = t.color
flag = true
}
} else if (t.term === 'not_eq') {
if (value !== t.value) {
this.label_content_class.color = t.color
flag = true
}
} else if (t.term === 'lt') {
if (value < t.value) {
this.label_content_class.color = t.color
flag = true
}
} else if (t.term === 'gt') {
if (value > t.value) {
this.label_content_class.color = t.color
flag = true
}
} else if (t.term === 'le') {
if (value <= t.value) {
this.label_content_class.color = t.color
flag = true
}
} else if (t.term === 'ge') {
if (value >= t.value) {
this.label_content_class.color = t.color
flag = true
}
}
if (flag) {
break
} else if (i === senior.threshold.labelThreshold.length - 1) {
this.label_content_class.color = valueColor
}
}
} else {
this.label_content_class.color = valueColor
}
}
}
}
}

129
frontend/src/views/chart/components/senior/Threshold.vue
View File

@ -1,10 +1,11 @@
<template>
<div style="width: 100%">
<!--仪表盘-->
<el-col v-if="chart.type && chart.type === 'gauge'">
<el-form ref="thresholdForm" :model="thresholdForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.threshold_range')+'(%)'" class="form-item">
<span>0,</span>
<el-input v-model="thresholdForm.gaugeThreshold" style="width: 100px;margin: 0 10px;" :placeholder="$t('chart.threshold_range')" size="mini" clearable @change="changeThreshold" />
<el-input v-model="thresholdForm.gaugeThreshold" style="width: 100px;margin: 0 10px;" :placeholder="$t('chart.threshold_range')" size="mini" clearable @change="gaugeThresholdChange" />
<span>,100</span>
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
@ -17,14 +18,65 @@
</el-form-item>
</el-form>
</el-col>
<!--指标卡-->
<el-col v-if="chart.type && chart.type === 'text'">
<el-col>
<el-button
:title="$t('chart.edit')"
icon="el-icon-edit"
type="text"
size="small"
style="width: 24px;margin-left: 4px;"
@click="editLabelThreshold"
/>
<el-col style="padding: 0 18px;">
<el-row v-for="(item,index) in thresholdForm.labelThreshold" :key="index" class="line-style">
<el-col :span="8">
<span v-if="item.term === 'eq'" :title="$t('chart.filter_eq')">{{ $t('chart.filter_eq') }}</span>
<span v-else-if="item.term === 'not_eq'" :title="$t('chart.filter_not_eq')">{{ $t('chart.filter_not_eq') }}</span>
<span v-else-if="item.term === 'lt'" :title="$t('chart.filter_lt')">{{ $t('chart.filter_lt') }}</span>
<span v-else-if="item.term === 'gt'" :title="$t('chart.filter_gt')">{{ $t('chart.filter_gt') }}</span>
<span v-else-if="item.term === 'le'" :title="$t('chart.filter_le')">{{ $t('chart.filter_le') }}</span>
<span v-else-if="item.term === 'ge'" :title="$t('chart.filter_ge')">{{ $t('chart.filter_ge') }}</span>
</el-col>
<el-col :span="8">
<span :title="item.value">{{ item.value }}</span>
</el-col>
<el-col :span="8">
<span :style="{width:'14px', height:'14px', backgroundColor: item.color}" />
</el-col>
</el-row>
</el-col>
</el-col>
</el-col>
<!--编辑阈值-->
<el-dialog
v-if="editLabelThresholdDialog"
v-dialogDrag
:title="$t('chart.threshold')"
:visible="editLabelThresholdDialog"
:show-close="false"
width="50%"
class="dialog-css"
>
<text-threshold-edit :threshold="thresholdForm.labelThreshold" @onLabelThresholdChange="thresholdChange" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeLabelThreshold">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="changeLabelThreshold">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
import TextThresholdEdit from '@/views/chart/components/senior/dialog/TextThresholdEdit'
export default {
name: 'Threshold',
components: { TextThresholdEdit },
props: {
chart: {
type: Object,
@ -33,7 +85,9 @@ export default {
},
data() {
return {
thresholdForm: JSON.parse(JSON.stringify(DEFAULT_THRESHOLD))
thresholdForm: JSON.parse(JSON.stringify(DEFAULT_THRESHOLD)),
editLabelThresholdDialog: false,
thresholdArr: []
}
},
watch: {
@ -58,12 +112,18 @@ export default {
}
if (senior.threshold) {
this.thresholdForm = senior.threshold
if (!this.thresholdForm.labelThreshold) {
this.thresholdForm.labelThreshold = []
}
} else {
this.thresholdForm = JSON.parse(JSON.stringify(DEFAULT_THRESHOLD))
}
}
},
changeThreshold() {
this.$emit('onThresholdChange', this.thresholdForm)
},
gaugeThresholdChange() {
// check input
if (this.thresholdForm.gaugeThreshold) {
const arr = this.thresholdForm.gaugeThreshold.split(',')
@ -79,7 +139,49 @@ export default {
}
}
}
this.$emit('onThresholdChange', this.thresholdForm)
this.changeThreshold()
},
editLabelThreshold() {
this.editLabelThresholdDialog = true
},
closeLabelThreshold() {
this.editLabelThresholdDialog = false
},
changeLabelThreshold() {
// check line config
for (let i = 0; i < this.thresholdArr.length; i++) {
const ele = this.thresholdArr[i]
if (!ele.term || ele.term === '') {
this.$message({
message: this.$t('chart.exp_can_not_empty'),
type: 'error',
showClose: true
})
return
}
if (!ele.value) {
this.$message({
message: this.$t('chart.value_can_not_empty'),
type: 'error',
showClose: true
})
return
}
if (parseFloat(ele.value).toString() === 'NaN') {
this.$message({
message: this.$t('chart.value_error'),
type: 'error',
showClose: true
})
return
}
}
this.thresholdForm.labelThreshold = JSON.parse(JSON.stringify(this.thresholdArr))
this.changeThreshold()
this.closeLabelThreshold()
},
thresholdChange(val) {
this.thresholdArr = val
}
}
}
@ -120,4 +222,25 @@ span{
cursor: pointer;
z-index: 1003;
}
.line-style >>> span{
display: inline-block;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin: 0 10px;
}
.dialog-css >>> .el-dialog__title {
font-size: 14px;
}
.dialog-css >>> .el-dialog__header {
padding: 20px 20px 0;
}
.dialog-css >>> .el-dialog__body {
padding: 10px 20px 20px;
}
</style>

162
frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<el-col>
<el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addThreshold" />
<div style="max-height: 50vh;overflow-y: auto;">
<el-row v-for="(item,index) in thresholdArr" :key="index" class="line-item">
<el-col :span="6">
<el-select v-model="item.term" size="mini" @change="changeThreshold">
<el-option-group
v-for="(group,idx) in valueOptions"
:key="idx"
:label="group.label"
>
<el-option
v-for="opt in group.options"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-option-group>
</el-select>
</el-col>
<el-col :span="10" style="text-align: center;">
<el-input v-model="item.value" class="value-item" :placeholder="$t('chart.drag_block_label_value')" size="mini" clearable @change="changeThreshold" />
</el-col>
<el-col :span="4" style="text-align: center;">
<el-color-picker v-model="item.color" show-alpha class="color-picker-style" :predefine="predefineColors" @change="changeThreshold" />
</el-col>
<el-col :span="4">
<el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeThreshold(index)" />
</el-col>
</el-row>
</div>
</el-col>
</template>
<script>
import { COLOR_PANEL } from '@/views/chart/chart/chart'
export default {
name: 'TextThresholdEdit',
props: {
threshold: {
type: Array,
required: true
}
},
data() {
return {
thresholdArr: [],
thresholdObj: {
term: 'eq',
value: '0',
color: '#ff0000ff'
},
valueOptions: [
{
label: '',
options: [{
value: 'eq',
label: this.$t('chart.filter_eq')
}, {
value: 'not_eq',
label: this.$t('chart.filter_not_eq')
}]
},
{
label: '',
options: [{
value: 'lt',
label: this.$t('chart.filter_lt')
}, {
value: 'gt',
label: this.$t('chart.filter_gt')
}]
},
{
label: '',
options: [{
value: 'le',
label: this.$t('chart.filter_le')
}, {
value: 'ge',
label: this.$t('chart.filter_ge')
}]
}
],
predefineColors: COLOR_PANEL
}
},
mounted() {
this.init()
},
methods: {
init() {
this.thresholdArr = JSON.parse(JSON.stringify(this.threshold))
},
addThreshold() {
this.thresholdArr.push(JSON.parse(JSON.stringify(this.thresholdObj)))
this.changeThreshold()
},
removeThreshold(index) {
this.thresholdArr.splice(index, 1)
this.changeThreshold()
},
changeThreshold() {
this.$emit('onLabelThresholdChange', this.thresholdArr)
}
}
}
</script>
<style scoped>
.line-item {
width: 100%;
border-radius: 4px;
border: 1px solid #DCDFE6;
padding: 4px 14px;
margin-bottom: 10px;
display: flex;
justify-content: left;
align-items: center;
}
.form-item >>> .el-form-item__label {
font-size: 12px;
}
span {
font-size: 12px;
}
.value-item {
position: relative;
display: inline-block;
width: 200px !important;
}
.select-item {
position: relative;
display: inline-block;
width: 100px !important;
}
.el-select-dropdown__item {
padding: 0 20px;
font-size: 12px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
width: 28px;
height: 28px;
margin-top: 6px;
}
.color-picker-style >>> .el-color-picker__trigger{
width: 28px;
height: 28px;
}
</style>

87
frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<div>
<el-form ref="form" :model="formatterItem.formatterCfg" label-width="80px" size="mini" class="formatter-form">
<el-form-item :label="$t('chart.value_formatter_type')">
<el-radio-group v-model="formatterItem.formatterCfg.type" @change="getExampleValue">
<el-radio v-for="radio in typeList" :key="radio.value" :label="radio.value">{{ $t('chart.' + radio.name) }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-show="formatterItem.formatterCfg.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')">
<el-input-number v-model="formatterItem.formatterCfg.decimalCount" :min="0" :max="10" size="mini" @change="getExampleValue" />
</el-form-item>
<el-form-item v-show="formatterItem.formatterCfg.type !== 'percent'" :label="$t('chart.value_formatter_unit')">
<el-select v-model="formatterItem.formatterCfg.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="getExampleValue">
<el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_suffix')">
<el-input v-model="formatterItem.formatterCfg.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="getExampleValue" />
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_thousand_separator')">
<el-checkbox v-model="formatterItem.formatterCfg.thousandSeparator" @change="getExampleValue" />
</el-form-item>
<el-form-item :label="$t('chart.value_formatter_example')">
<span>{{ exampleResult }}</span>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { formatterType, unitList, valueFormatter } from '@/views/chart/chart/formatter'
export default {
name: 'ValueFormatterEdit',
props: {
formatterItem: {
type: Object,
required: true
},
chart: {
type: Object,
required: true
}
},
data() {
return {
typeList: formatterType,
unitList: unitList,
exampleResult: '20000000'
}
},
mounted() {
this.getExampleValue()
},
methods: {
getExampleValue() {
this.exampleResult = valueFormatter(20000000, this.formatterItem.formatterCfg)
}
}
}
</script>
<style scoped>
.el-form-item{
margin-bottom: 10px!important;
}
.formatter-form >>> .el-form-item__label{
font-size: 12px!important;
font-weight: 400!important;
}
.formatter-form >>> .el-radio__label{
font-size: 12px!important;
font-weight: 400!important;
}
.el-select-dropdown__item >>> span{
font-size: 12px!important;
}
.exp-style{
color: #C0C4CC;
font-size: 12px;
}
</style>

68
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -366,10 +366,12 @@
:item="item"
:dimension-data="dimension"
:quota-data="quota"
:chart="chart"
@onDimensionItemChange="dimensionItemChange"
@onDimensionItemRemove="dimensionItemRemove"
@editItemFilter="showDimensionEditFilter"
@onNameEdit="showRename"
@valueFormatter="valueFormatter"
/>
</transition-group>
</draggable>
@ -445,6 +447,7 @@
@editItemFilter="showQuotaEditFilter"
@onNameEdit="showRename"
@editItemCompare="showQuotaEditCompare"
@valueFormatter="valueFormatter"
/>
</transition-group>
</draggable>
@ -893,7 +896,7 @@
<el-tab-pane :label="$t('chart.senior')" class="padding-tab" style="width: 300px;">
<el-row class="view-panel">
<div
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge'))"
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge')) || view.type === 'text'"
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
class="attr-style theme-border-class"
>
@ -913,7 +916,7 @@
</el-collapse>
</el-row>
<el-row
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge'))"
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text')"
>
<span class="padding-lr">{{ $t('chart.analyse_cfg') }}</span>
<el-collapse v-model="styleActiveNames" class="style-collapse">
@ -930,7 +933,7 @@
/>
</el-collapse-item>
<el-collapse-item
v-if="view.type && (view.type.includes('gauge'))"
v-if="view.type && (view.type.includes('gauge') || view.type === 'text')"
name="threshold"
:title="$t('chart.threshold')"
>
@ -1116,6 +1119,7 @@
</div>
</el-dialog>
<!--同环比设置-->
<el-dialog
v-if="showEditQuotaCompare"
v-dialogDrag
@ -1131,6 +1135,23 @@
<el-button type="primary" size="mini" @click="saveQuotaEditCompare">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
<!--数值格式-->
<el-dialog
v-if="showValueFormatter"
v-dialogDrag
:title="$t('chart.value_formatter') + ' - ' + valueFormatterItem.name"
:visible="showValueFormatter"
:show-close="false"
width="600px"
class="dialog-css"
>
<value-formatter-edit :formatter-item="valueFormatterItem" :chart="chart" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeValueFormatter">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveValueFormatter">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
</el-row>
</template>
@ -1213,9 +1234,11 @@ import Threshold from '@/views/chart/components/senior/Threshold'
import TotalCfg from '@/views/chart/components/shape-attr/TotalCfg'
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
import { pluginTypes } from '@/api/chart/chart'
import ValueFormatterEdit from '@/views/chart/components/value-formatter/ValueFormatterEdit'
export default {
name: 'ChartEdit',
components: {
ValueFormatterEdit,
LabelNormalText,
TotalCfg,
Threshold,
@ -1366,7 +1389,9 @@ export default {
quotaItemCompare: {},
showEditQuotaCompare: false,
preChartId: '',
pluginRenderOptions: []
pluginRenderOptions: [],
showValueFormatter: false,
valueFormatterItem: {}
}
},
@ -2273,11 +2298,11 @@ export default {
},
addXaxisExt(e) {
if (this.view.type !== 'table-info') {
this.dragCheckType(this.view.xaxis, 'd')
this.dragCheckType(this.view.xaxisExt, 'd')
}
this.dragMoveDuplicate(this.view.xaxis, e)
if ((this.view.type === 'map' || this.view.type === 'word-cloud') && this.view.xaxis.length > 1) {
this.view.xaxis = [this.view.xaxis[0]]
this.dragMoveDuplicate(this.view.xaxisExt, e)
if ((this.view.type === 'map' || this.view.type === 'word-cloud') && this.view.xaxisExt.length > 1) {
this.view.xaxisExt = [this.view.xaxisExt[0]]
}
this.calcData(true)
},
@ -2544,6 +2569,33 @@ export default {
this.view.customAttr.label.position = 'middle'
}
}
},
valueFormatter(item) {
this.valueFormatterItem = JSON.parse(JSON.stringify(item))
this.showValueFormatter = true
},
closeValueFormatter() {
this.showValueFormatter = false
},
saveValueFormatter() {
const ele = this.valueFormatterItem.formatterCfg.decimalCount
if (ele === undefined || ele.toString().indexOf('.') > -1 || parseInt(ele).toString() === 'NaN' || parseInt(ele) < 0 || parseInt(ele) > 10) {
this.$message({
message: this.$t('chart.formatter_decimal_count_error'),
type: 'error',
showClose: true
})
return
}
// 更新指标
if (this.valueFormatterItem.formatterType === 'quota') {
this.view.yaxis[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg
} else if (this.valueFormatterItem.formatterType === 'quotaExt') {
this.view.yaxisExt[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg
}
this.calcData(true)
this.closeValueFormatter()
}
}
}