Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
D
dataease
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
zhu
dataease
Commits
df9a31bd
提交
df9a31bd
authored
4月 13, 2022
作者:
junjun
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 指标卡阈值设置
上级
02b05220
隐藏空白字符变更
内嵌
并排
正在显示
13 个修改的文件
包含
676 行增加
和
19 行删除
+676
-19
en.js
frontend/src/lang/en.js
+18
-1
tw.js
frontend/src/lang/tw.js
+18
-1
zh.js
frontend/src/lang/zh.js
+18
-1
chart.js
frontend/src/views/chart/chart/chart.js
+2
-1
formatter.js
frontend/src/views/chart/chart/formatter.js
+71
-0
DimensionItem.vue
...nd/src/views/chart/components/drag-item/DimensionItem.vue
+25
-1
QuotaExtItem.vue
...end/src/views/chart/components/drag-item/QuotaExtItem.vue
+18
-1
QuotaItem.vue
frontend/src/views/chart/components/drag-item/QuotaItem.vue
+18
-1
LabelNormal.vue
frontend/src/views/chart/components/normal/LabelNormal.vue
+53
-1
Threshold.vue
frontend/src/views/chart/components/senior/Threshold.vue
+126
-3
TextThresholdEdit.vue
...iews/chart/components/senior/dialog/TextThresholdEdit.vue
+162
-0
ValueFormatterEdit.vue
...s/chart/components/value-formatter/ValueFormatterEdit.vue
+87
-0
ChartEdit.vue
frontend/src/views/chart/view/ChartEdit.vue
+60
-8
没有找到文件。
frontend/src/lang/en.js
浏览文件 @
df9a31bd
...
...
@@ -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'
,
...
...
frontend/src/lang/tw.js
浏览文件 @
df9a31bd
...
...
@@ -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 頁,默認抽取第一個'
,
...
...
frontend/src/lang/zh.js
浏览文件 @
df9a31bd
...
...
@@ -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 页,默认抽取第一个'
,
...
...
frontend/src/views/chart/chart/chart.js
浏览文件 @
df9a31bd
...
...
@@ -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
=
{
...
...
frontend/src/views/chart/chart/formatter.js
0 → 100644
浏览文件 @
df9a31bd
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
,
''
)
}
frontend/src/views/chart/components/drag-item/DimensionItem.vue
浏览文件 @
df9a31bd
...
...
@@ -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
)
}
}
}
...
...
frontend/src/views/chart/components/drag-item/QuotaExtItem.vue
浏览文件 @
df9a31bd
...
...
@@ -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
)
}
}
}
...
...
frontend/src/views/chart/components/drag-item/QuotaItem.vue
浏览文件 @
df9a31bd
...
...
@@ -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
)
}
}
}
...
...
frontend/src/views/chart/components/normal/LabelNormal.vue
浏览文件 @
df9a31bd
...
...
@@ -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
}
}
}
}
}
...
...
frontend/src/views/chart/components/senior/Threshold.vue
浏览文件 @
df9a31bd
<
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
>
frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue
0 → 100644
浏览文件 @
df9a31bd
<
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
>
frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue
0 → 100644
浏览文件 @
df9a31bd
<
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
>
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @
df9a31bd
...
...
@@ -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
.
xaxis
Ext
,
'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
.
xaxis
Ext
,
e
)
if
((
this
.
view
.
type
===
'map'
||
this
.
view
.
type
===
'word-cloud'
)
&&
this
.
view
.
xaxis
Ext
.
length
>
1
)
{
this
.
view
.
xaxis
Ext
=
[
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
()
}
}
}
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论