Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
D
dataease
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
njgzx
dataease
Commits
fe63b85f
提交
fe63b85f
authored
2月 21, 2022
作者:
wangjiahao
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 视图组件支持设置背景图片
上级
fe01f43d
隐藏空白字符变更
内嵌
并排
正在显示
12 个修改的文件
包含
296 行增加
和
114 行删除
+296
-114
Toolbar.vue
frontend/src/components/canvas/components/Toolbar.vue
+2
-1
UserView.vue
frontend/src/components/canvas/custom-component/UserView.vue
+83
-55
chart.js
frontend/src/views/chart/chart/chart.js
+8
-0
common.js
frontend/src/views/chart/chart/common/common.js
+1
-1
common_antv.js
frontend/src/views/chart/chart/common/common_antv.js
+1
-1
ChartComponent.vue
frontend/src/views/chart/components/ChartComponent.vue
+1
-1
ChartComponentG2.vue
frontend/src/views/chart/components/ChartComponentG2.vue
+1
-1
ChartComponentS2.vue
frontend/src/views/chart/components/ChartComponentS2.vue
+3
-15
BackgroundColorSelector.vue
...rt/components/component-style/BackgroundColorSelector.vue
+163
-33
LabelNormal.vue
frontend/src/views/chart/components/normal/LabelNormal.vue
+1
-1
TableNormal.vue
frontend/src/views/chart/components/table/TableNormal.vue
+1
-3
ChartEdit.vue
frontend/src/views/chart/view/ChartEdit.vue
+31
-2
没有找到文件。
frontend/src/components/canvas/components/Toolbar.vue
浏览文件 @
fe63b85f
...
@@ -126,7 +126,8 @@ export default {
...
@@ -126,7 +126,8 @@ export default {
'targetLinkageInfo'
,
'targetLinkageInfo'
,
'mobileLayoutStatus'
,
'mobileLayoutStatus'
,
'mobileComponentData'
,
'mobileComponentData'
,
'componentDataCache'
'componentDataCache'
,
'styleChangeTimes'
])
])
},
},
created
()
{
created
()
{
...
...
frontend/src/components/canvas/custom-component/UserView.vue
浏览文件 @
fe63b85f
...
@@ -8,62 +8,64 @@
...
@@ -8,62 +8,64 @@
'rect-shape'
'rect-shape'
]"
]"
>
>
<EditBarView
v-if=
"editBarViewShowFlag"
:is-edit=
"isEdit"
:view-id=
"element.propValue.viewId"
@
showViewDetails=
"openChartDetailsDialog"
/>
<div
:style=
"componentBackGround"
>
<div
v-if=
"requestStatus==='error'"
class=
"chart-error-class"
>
<EditBarView
v-if=
"editBarViewShowFlag"
:is-edit=
"isEdit"
:view-id=
"element.propValue.viewId"
@
showViewDetails=
"openChartDetailsDialog"
/>
<div
class=
"chart-error-message-class"
>
<div
v-if=
"requestStatus==='error'"
class=
"chart-error-class"
>
{{
message
}}
,
{{
$t
(
'chart.chart_show_error'
)
}}
<div
class=
"chart-error-message-class"
>
<br>
{{
message
}}
,
{{
$t
(
'chart.chart_show_error'
)
}}
{{
$t
(
'chart.chart_error_tips'
)
}}
<br>
{{
$t
(
'chart.chart_error_tips'
)
}}
</div>
</div>
<plugin-com
v-if=
"chart.isPlugin"
:ref=
"element.propValue.id"
:component-name=
"chart.type + '-view'"
:obj=
"
{chart, trackMenu, searchCount, terminalType: scaleCoefficientType}"
class="chart-class"
/>
<chart-component
v-else-if=
"charViewShowFlag"
:ref=
"element.propValue.id"
class=
"chart-class"
:chart=
"chart"
:track-menu=
"trackMenu"
:search-count=
"searchCount"
:terminal-type=
"scaleCoefficientType"
@
onChartClick=
"chartClick"
@
onJumpClick=
"jumpClick"
/>
<chart-component-g2
v-else-if=
"charViewG2ShowFlag"
:ref=
"element.propValue.id"
class=
"chart-class"
:chart=
"chart"
:track-menu=
"trackMenu"
:search-count=
"searchCount"
@
onChartClick=
"chartClick"
@
onJumpClick=
"jumpClick"
/>
<chart-component-s2
v-else-if=
"charViewS2ShowFlag"
:ref=
"element.propValue.id"
class=
"chart-class"
:chart=
"chart"
:track-menu=
"trackMenu"
:search-count=
"searchCount"
@
onChartClick=
"chartClick"
@
onJumpClick=
"jumpClick"
/>
<table-normal
v-else-if=
"tableShowFlag"
:ref=
"element.propValue.id"
:show-summary=
"chart.type === 'table-normal'"
:chart=
"chart"
class=
"table-class"
/>
<label-normal
v-else-if=
"labelShowFlag"
:ref=
"element.propValue.id"
:chart=
"chart"
class=
"table-class"
/>
<div
style=
"position: absolute;left: 8px;bottom:8px;"
>
<drill-path
:drill-filters=
"drillFilters"
@
onDrillJump=
"drillJump"
/>
</div>
</div>
</div>
<plugin-com
v-if=
"chart.isPlugin"
:ref=
"element.propValue.id"
:component-name=
"chart.type + '-view'"
:obj=
"
{chart, trackMenu, searchCount, terminalType: scaleCoefficientType}"
class="chart-class"
/>
<chart-component
v-else-if=
"charViewShowFlag"
:ref=
"element.propValue.id"
class=
"chart-class"
:chart=
"chart"
:track-menu=
"trackMenu"
:search-count=
"searchCount"
:terminal-type=
"scaleCoefficientType"
@
onChartClick=
"chartClick"
@
onJumpClick=
"jumpClick"
/>
<chart-component-g2
v-else-if=
"charViewG2ShowFlag"
:ref=
"element.propValue.id"
class=
"chart-class"
:chart=
"chart"
:track-menu=
"trackMenu"
:search-count=
"searchCount"
@
onChartClick=
"chartClick"
@
onJumpClick=
"jumpClick"
/>
<chart-component-s2
v-else-if=
"charViewS2ShowFlag"
:ref=
"element.propValue.id"
class=
"chart-class"
:chart=
"chart"
:track-menu=
"trackMenu"
:search-count=
"searchCount"
@
onChartClick=
"chartClick"
@
onJumpClick=
"jumpClick"
/>
<table-normal
v-else-if=
"tableShowFlag"
:ref=
"element.propValue.id"
:show-summary=
"chart.type === 'table-normal'"
:chart=
"chart"
class=
"table-class"
/>
<label-normal
v-else-if=
"labelShowFlag"
:ref=
"element.propValue.id"
:chart=
"chart"
class=
"table-class"
/>
<div
style=
"position: absolute;left: 8px;bottom:8px;"
>
<drill-path
:drill-filters=
"drillFilters"
@
onDrillJump=
"drillJump"
/>
</div>
</div>
</div>
</div>
</
template
>
</
template
>
...
@@ -90,6 +92,7 @@ import EditBarView from '@/components/canvas/components/Editor/EditBarView'
...
@@ -90,6 +92,7 @@ import EditBarView from '@/components/canvas/components/Editor/EditBarView'
import
{
customAttrTrans
,
customStyleTrans
,
recursionTransObj
}
from
'@/components/canvas/utils/style'
import
{
customAttrTrans
,
customStyleTrans
,
recursionTransObj
}
from
'@/components/canvas/utils/style'
import
ChartComponentS2
from
'@/views/chart/components/ChartComponentS2'
import
ChartComponentS2
from
'@/views/chart/components/ChartComponentS2'
import
PluginCom
from
'@/views/system/plugin/PluginCom'
import
PluginCom
from
'@/views/system/plugin/PluginCom'
import
{
hexColorToRGBA
}
from
'@/views/chart/chart/util'
export
default
{
export
default
{
name
:
'UserView'
,
name
:
'UserView'
,
components
:
{
PluginCom
,
ChartComponentS2
,
EditBarView
,
ChartComponent
,
TableNormal
,
LabelNormal
,
DrillPath
,
ChartComponentG2
},
components
:
{
PluginCom
,
ChartComponentS2
,
EditBarView
,
ChartComponent
,
TableNormal
,
LabelNormal
,
DrillPath
,
ChartComponentG2
},
...
@@ -168,6 +171,31 @@ export default {
...
@@ -168,6 +171,31 @@ export default {
this
.
bindPluginEvent
()
this
.
bindPluginEvent
()
},
},
computed
:
{
computed
:
{
// 视图
componentBackGround
()
{
const
customStyle
=
JSON
.
parse
(
this
.
chart
.
customStyle
)
let
style
=
{
height
:
'100%'
,
width
:
'100%'
,
backgroundSize
:
'100% 100% !important'
,
borderRadius
:
'0px'
}
if
(
customStyle
&&
customStyle
.
background
)
{
style
.
borderRadius
=
customStyle
.
background
.
borderRadius
+
'px!important'
if
(
customStyle
.
background
.
backgroundType
===
'outImage'
&&
typeof
(
customStyle
.
background
.
outImage
)
===
'string'
)
{
style
=
{
background
:
`url(
${
customStyle
.
background
.
outImage
}
) no-repeat`
,
...
style
}
}
else
if
(
!
customStyle
.
background
.
backgroundType
||
customStyle
.
background
.
backgroundType
===
'color'
)
{
style
=
{
background
:
hexColorToRGBA
(
customStyle
.
background
.
color
,
customStyle
.
background
.
alpha
),
...
style
}
}
}
return
style
},
scaleCoefficient
()
{
scaleCoefficient
()
{
if
(
this
.
terminal
===
'pc'
&&
!
this
.
mobileLayoutStatus
)
{
if
(
this
.
terminal
===
'pc'
&&
!
this
.
mobileLayoutStatus
)
{
return
1.1
return
1.1
...
...
frontend/src/views/chart/chart/chart.js
浏览文件 @
fe63b85f
import
{
ApplicationContext
}
from
"@/utils/ApplicationContext"
;
import
{
BASE_MOBILE_STYLE
,
HYPERLINKS
}
from
"@/components/canvas/custom-component/component-list"
;
import
store
from
"@/store"
;
import
{
deepCopy
,
resetID
}
from
"@/components/canvas/utils/utils"
;
export
const
DEFAULT_COLOR_CASE
=
{
export
const
DEFAULT_COLOR_CASE
=
{
value
:
'default'
,
value
:
'default'
,
colors
:
[
'#5470c6'
,
'#91cc75'
,
'#fac858'
,
'#ee6666'
,
'#73c0de'
,
'#3ba272'
,
'#fc8452'
,
'#9a60b4'
,
'#ea7ccc'
],
colors
:
[
'#5470c6'
,
'#91cc75'
,
'#fac858'
,
'#ee6666'
,
'#73c0de'
,
'#3ba272'
,
'#fc8452'
,
'#9a60b4'
,
'#ea7ccc'
],
...
@@ -192,7 +197,10 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
...
@@ -192,7 +197,10 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
}
}
}
}
export
const
DEFAULT_BACKGROUND_COLOR
=
{
export
const
DEFAULT_BACKGROUND_COLOR
=
{
backgroundType
:
'color'
,
color
:
'#ffffff'
,
color
:
'#ffffff'
,
outImage
:
null
,
innerImage
:
null
,
alpha
:
100
,
alpha
:
100
,
borderRadius
:
5
borderRadius
:
5
}
}
...
...
frontend/src/views/chart/chart/common/common.js
浏览文件 @
fe63b85f
...
@@ -174,7 +174,7 @@ export function componentStyle(chart_option, chart) {
...
@@ -174,7 +174,7 @@ export function componentStyle(chart_option, chart) {
chart_option
.
radar
.
splitArea
=
customStyle
.
split
.
splitArea
chart_option
.
radar
.
splitArea
=
customStyle
.
split
.
splitArea
}
}
if
(
customStyle
.
background
)
{
if
(
customStyle
.
background
)
{
chart_option
.
backgroundColor
=
hexColorToRGBA
(
customStyle
.
background
.
color
,
customStyle
.
background
.
alpha
)
//
chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
}
}
}
}
}
frontend/src/views/chart/chart/common/common_antv.js
浏览文件 @
fe63b85f
...
@@ -40,7 +40,7 @@ export function getTheme(chart) {
...
@@ -40,7 +40,7 @@ export function getTheme(chart) {
customStyle
=
JSON
.
parse
(
chart
.
customStyle
)
customStyle
=
JSON
.
parse
(
chart
.
customStyle
)
// bg
// bg
if
(
customStyle
.
background
)
{
if
(
customStyle
.
background
)
{
bgColor
=
hexColorToRGBA
(
customStyle
.
background
.
color
,
customStyle
.
background
.
alpha
)
//
bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
}
// legend
// legend
if
(
customStyle
.
legend
)
{
if
(
customStyle
.
legend
)
{
...
...
frontend/src/views/chart/components/ChartComponent.vue
浏览文件 @
fe63b85f
...
@@ -7,7 +7,7 @@
...
@@ -7,7 +7,7 @@
:style=
"trackBarStyleTime"
:style=
"trackBarStyleTime"
@
trackClick=
"trackClick"
@
trackClick=
"trackClick"
/>
/>
<div
:id=
"chartId"
style=
"width: 100%;height: 100%;overflow: hidden;"
:style=
"
{ borderRadius: borderRadius}"
/>
<div
:id=
"chartId"
style=
"width: 100%;height: 100%;overflow: hidden;"
/>
<div
v-if=
"chart.type === 'map'"
class=
"map-zoom-box"
>
<div
v-if=
"chart.type === 'map'"
class=
"map-zoom-box"
>
<div
style=
"margin-bottom: 0.5em;"
>
<div
style=
"margin-bottom: 0.5em;"
>
<el-button
size=
"mini"
icon=
"el-icon-plus"
circle
@
click=
"roamMap(true)"
/>
<el-button
size=
"mini"
icon=
"el-icon-plus"
circle
@
click=
"roamMap(true)"
/>
...
...
frontend/src/views/chart/components/ChartComponentG2.vue
浏览文件 @
fe63b85f
...
@@ -87,7 +87,7 @@ export default {
...
@@ -87,7 +87,7 @@ export default {
},
},
bg_class
()
{
bg_class
()
{
return
{
return
{
borderRadius
:
this
.
borderRadius
//
borderRadius: this.borderRadius
}
}
}
}
},
},
...
...
frontend/src/views/chart/components/ChartComponentS2.vue
浏览文件 @
fe63b85f
<
template
>
<
template
>
<div
ref=
"chartContainer"
style=
"padding: 0;width: 100%;height: 100%;overflow: hidden;"
:style=
"bg_class"
>
<div
ref=
"chartContainer"
style=
"padding: 0;width: 100%;height: 100%;overflow: hidden;"
>
<view-track-bar
ref=
"viewTrack"
:track-menu=
"trackMenu"
class=
"track-bar"
:style=
"trackBarStyleTime"
@
trackClick=
"trackClick"
/>
<view-track-bar
ref=
"viewTrack"
:track-menu=
"trackMenu"
class=
"track-bar"
:style=
"trackBarStyleTime"
@
trackClick=
"trackClick"
/>
<span
v-if=
"chart.type"
v-show=
"title_show"
ref=
"title"
:style=
"title_class"
style=
"cursor: default;display: block;"
>
<span
v-if=
"chart.type"
v-show=
"title_show"
ref=
"title"
:style=
"title_class"
style=
"cursor: default;display: block;"
>
<p
style=
"padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;"
>
{{
chart
.
title
}}
</p>
<p
style=
"padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;"
>
{{
chart
.
title
}}
</p>
</span>
</span>
<div
ref=
"tableContainer"
style=
"width: 100%;overflow: hidden;padding: 8px;"
:style=
"
{background:container_bg_class.background}"
>
<div
ref=
"tableContainer"
style=
"width: 100%;overflow: hidden;padding: 8px;"
>
<div
v-if=
"chart.type === 'table-normal'"
:id=
"chartId"
style=
"width: 100%;overflow: hidden;"
:class=
"chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'"
/>
<div
v-if=
"chart.type === 'table-normal'"
:id=
"chartId"
style=
"width: 100%;overflow: hidden;"
:class=
"chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'"
/>
<div
v-if=
"chart.type === 'table-info'"
:id=
"chartId"
style=
"width: 100%;overflow: hidden;"
:class=
"chart.drill ? 'table-dom-info-drill' : 'table-dom-info'"
/>
<div
v-if=
"chart.type === 'table-info'"
:id=
"chartId"
style=
"width: 100%;overflow: hidden;"
:class=
"chart.drill ? 'table-dom-info-drill' : 'table-dom-info'"
/>
<div
v-if=
"chart.type === 'table-pivot'"
:id=
"chartId"
style=
"width: 100%;overflow: hidden;"
class=
"table-dom-normal"
/>
<div
v-if=
"chart.type === 'table-pivot'"
:id=
"chartId"
style=
"width: 100%;overflow: hidden;"
class=
"table-dom-normal"
/>
...
@@ -109,7 +109,6 @@ export default {
...
@@ -109,7 +109,6 @@ export default {
},
},
bg_class
()
{
bg_class
()
{
return
{
return
{
borderRadius
:
this
.
borderRadius
}
}
}
}
},
},
...
@@ -259,12 +258,7 @@ export default {
...
@@ -259,12 +258,7 @@ export default {
}
}
},
},
setBackGroundBorder
()
{
setBackGroundBorder
()
{
if
(
this
.
chart
.
customStyle
)
{
const
customStyle
=
JSON
.
parse
(
this
.
chart
.
customStyle
)
if
(
customStyle
.
background
)
{
this
.
borderRadius
=
(
customStyle
.
background
.
borderRadius
||
0
)
+
'px'
}
}
},
},
chartResize
()
{
chartResize
()
{
this
.
initData
()
this
.
initData
()
...
@@ -325,12 +319,6 @@ export default {
...
@@ -325,12 +319,6 @@ export default {
this
.
$refs
.
title
.
style
.
fontSize
=
customStyle
.
text
.
fontSize
+
'px'
this
.
$refs
.
title
.
style
.
fontSize
=
customStyle
.
text
.
fontSize
+
'px'
}
}
}
}
if
(
customStyle
.
background
)
{
this
.
title_class
.
background
=
hexColorToRGBA
(
customStyle
.
background
.
color
,
customStyle
.
background
.
alpha
)
this
.
borderRadius
=
(
customStyle
.
background
.
borderRadius
||
0
)
+
'px'
this
.
container_bg_class
.
background
=
hexColorToRGBA
(
customStyle
.
background
.
color
,
customStyle
.
background
.
alpha
)
}
}
}
},
},
...
...
frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
浏览文件 @
fe63b85f
<
template
>
<
template
>
<div
style=
"width: 100%"
>
<div
style=
"width: 100%"
>
<el-col>
<el-col>
<el-form
ref=
"colorForm"
:model=
"colorForm"
label-width=
"80px"
size=
"mini"
>
<el-row>
<el-form-item
:label=
"$t('chart.color')"
class=
"form-item"
>
<el-col
:span=
"5"
class=
"col-label-item"
>
<el-color-picker
v-model=
"colorForm.color"
class=
"color-picker-style"
:predefine=
"predefineColors"
@
change=
"changeBackgroundStyle"
/>
<el-radio
v-model=
"colorForm.backgroundType"
label=
"color"
@
change=
"changeBackgroundStyle"
><span
class=
"label-item"
>
{{
$t
(
'chart.color'
)
}}
</span></el-radio>
</el-form-item>
</el-col>
<el-form-item
:label=
"$t('chart.not_alpha')"
class=
"form-item form-item-slider"
>
<el-col
:span=
"19"
>
<el-slider
v-model=
"colorForm.alpha"
show-input
:show-input-controls=
"false"
input-size=
"mini"
@
change=
"changeBackgroundStyle"
/>
<el-color-picker
v-model=
"colorForm.color"
:predefine=
"predefineColors"
size=
"mini"
style=
"cursor: pointer;z-index: 1004;"
@
change=
"changeBackgroundStyle"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item
:label=
"$t('chart.border_radius')"
class=
"form-item form-item-slider"
>
<el-row
style=
"height: 60px;margin-top:10px;overflow: hidden"
>
<el-col
:span=
"5"
class=
"col-label-item"
>
<el-radio
v-model=
"colorForm.backgroundType"
label=
"outImage"
@
change=
"changeBackgroundStyle"
><span
class=
"label-item"
>
{{
$t
(
'panel.photo'
)
}}
</span></el-radio>
</el-col>
<el-col
:span=
"9"
>
<el-upload
action=
""
accept=
".jpeg,.jpg,.png,.gif,.svg"
class=
"avatar-uploader"
list-type=
"picture-card"
:class=
"
{disabled:uploadDisabled}"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-change="onChange"
:http-request="upload"
>
<i
class=
"el-icon-plus"
/>
</el-upload>
<el-dialog
top=
"25vh"
width=
"600px"
:modal-append-to-body=
"false"
:visible
.
sync=
"dialogVisible"
>
<img
width=
"100%"
:src=
"dialogImageUrl"
alt=
""
>
</el-dialog>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"5"
class=
"col-label-item"
>
<span
class=
"label-item"
>
{{
$t
(
'chart.border_radius'
)
}}
</span>
</el-col>
<el-col
:span=
"19"
>
<el-slider
v-model=
"colorForm.borderRadius"
show-input
:show-input-controls=
"false"
input-size=
"mini"
@
change=
"changeBackgroundStyle"
/>
<el-slider
v-model=
"colorForm.borderRadius"
show-input
:show-input-controls=
"false"
input-size=
"mini"
@
change=
"changeBackgroundStyle"
/>
</el-form-item>
</el-col>
</el-form>
</el-row>
<el-row
v-if=
"colorForm.backgroundType==='color'"
>
<el-col
:span=
"5"
class=
"col-label-item"
>
<span
class=
"label-item"
>
{{
$t
(
'chart.not_alpha'
)
}}
</span>
</el-col>
<el-col
:span=
"19"
>
<el-slider
v-model=
"colorForm.alpha"
show-input
:show-input-controls=
"false"
input-size=
"mini"
@
change=
"changeBackgroundStyle"
/>
</el-col>
</el-row>
</el-col>
</el-col>
<!--
<el-form
ref=
"colorForm"
:model=
"colorForm"
label-width=
"80px"
size=
"mini"
:disabled=
"param && !hasDataPermission('manage',param.privileges)"
>
-->
<!-- <!–
<el-form-item
:label=
"$t('chart.color')"
class=
"form-item"
>
–>
-->
<!-- <!–
<el-color-picker
v-model=
"colorForm.color"
class=
"color-picker-style"
:predefine=
"predefineColors"
@
change=
"changeBackgroundStyle"
/>
–>
-->
<!-- <!–
</el-form-item>
–>
-->
<!--
<el-form-item
:label=
"$t('chart.not_alpha')"
class=
"form-item form-item-slider"
>
-->
<!--
<el-slider
v-model=
"colorForm.alpha"
show-input
:show-input-controls=
"false"
input-size=
"mini"
@
change=
"changeBackgroundStyle"
/>
-->
<!--
</el-form-item>
-->
<!--
<el-form-item
:label=
"$t('chart.border_radius')"
class=
"form-item form-item-slider"
>
-->
<!--
<el-slider
v-model=
"colorForm.borderRadius"
show-input
:show-input-controls=
"false"
input-size=
"mini"
@
change=
"changeBackgroundStyle"
/>
-->
<!--
</el-form-item>
-->
<!--
</el-form>
-->
<!--
</el-col>
-->
</div>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
import
{
COLOR_PANEL
,
DEFAULT_BACKGROUND_COLOR
}
from
'../../chart/chart'
import
{
COLOR_PANEL
,
DEFAULT_BACKGROUND_COLOR
}
from
'../../chart/chart'
import
{
deepCopy
}
from
'@/components/canvas/utils/utils'
export
default
{
export
default
{
name
:
'BackgroundColorSelector'
,
name
:
'BackgroundColorSelector'
,
...
@@ -34,6 +84,10 @@ export default {
...
@@ -34,6 +84,10 @@ export default {
},
},
data
()
{
data
()
{
return
{
return
{
fileList
:
[],
dialogImageUrl
:
''
,
dialogVisible
:
false
,
uploadDisabled
:
false
,
colorForm
:
JSON
.
parse
(
JSON
.
stringify
(
DEFAULT_BACKGROUND_COLOR
)),
colorForm
:
JSON
.
parse
(
JSON
.
stringify
(
DEFAULT_BACKGROUND_COLOR
)),
predefineColors
:
COLOR_PANEL
predefineColors
:
COLOR_PANEL
}
}
...
@@ -62,41 +116,117 @@ export default {
...
@@ -62,41 +116,117 @@ export default {
customStyle
=
JSON
.
parse
(
chart
.
customStyle
)
customStyle
=
JSON
.
parse
(
chart
.
customStyle
)
}
}
if
(
customStyle
.
background
)
{
if
(
customStyle
.
background
)
{
debugger
this
.
colorForm
=
customStyle
.
background
this
.
colorForm
=
customStyle
.
background
this
.
colorForm
.
backgroundType
=
this
.
colorForm
.
backgroundType
||
'color'
if
(
this
.
colorForm
.
outImage
&&
typeof
(
this
.
colorForm
.
outImage
)
===
'string'
)
{
this
.
fileList
.
push
({
url
:
this
.
colorForm
.
outImage
})
}
}
}
}
}
},
onChangeType
()
{
this
.
changeBackgroundStyle
()
},
handleRemove
(
file
,
fileList
)
{
this
.
uploadDisabled
=
false
this
.
colorForm
.
outImage
=
null
this
.
fileList
=
[]
this
.
changeBackgroundStyle
()
},
handlePictureCardPreview
(
file
)
{
this
.
dialogImageUrl
=
file
.
url
this
.
dialogVisible
=
true
},
onChange
(
file
,
fileList
)
{
var
_this
=
this
_this
.
uploadDisabled
=
true
const
reader
=
new
FileReader
()
reader
.
onload
=
function
()
{
_this
.
colorForm
.
outImage
=
reader
.
result
_this
.
changeBackgroundStyle
()
}
this
.
$store
.
state
.
styleChangeTimes
++
reader
.
readAsDataURL
(
file
.
raw
)
},
upload
(
file
)
{
// console.log('this is upload')
}
}
}
}
}
}
</
script
>
</
script
>
<
style
scoped
>
<
style
scoped
>
.shape-item
{
.shape-item
{
padding
:
6px
;
padding
:
6px
;
border
:
none
;
border
:
none
;
width
:
100%
;
width
:
100%
;
display
:
flex
;
display
:
flex
;
justify-content
:
space-between
;
justify-content
:
space-between
;
align-items
:
center
;
align-items
:
center
;
}
}
.form-item-slider
>>>
.el-form-item__label
{
.form-item-slider
>>>
.el-form-item__label
{
font-size
:
12px
;
font-size
:
12px
;
line-height
:
38px
;
line-height
:
38px
;
}
}
.form-item
>>>
.el-form-item__label
{
.form-item
>>>
.el-form-item__label
{
font-size
:
12px
;
font-size
:
12px
;
}
}
.el-select-dropdown__item
{
.el-select-dropdown__item
{
padding
:
0
20px
;
padding
:
0
20px
;
}
}
span
{
span
{
font-size
:
12px
font-size
:
12px
}
}
.el-form-item
{
.el-form-item
{
margin-bottom
:
6px
;
margin-bottom
:
6px
;
}
}
.color-picker-style
{
.color-picker-style
{
cursor
:
pointer
;
cursor
:
pointer
;
z-index
:
1003
;
z-index
:
1003
;
}
}
.avatar-uploader
>>>
.el-upload
{
width
:
100px
;
height
:
60px
;
line-height
:
70px
;
}
.avatar-uploader
>>>
.el-upload-list
li
{
width
:
100px
!important
;
height
:
60px
!important
;
}
.disabled
>>>
.el-upload--picture-card
{
display
:
none
;
}
.shape-item
{
padding
:
6px
;
border
:
none
;
width
:
100%
;
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
}
.form-item-slider
>>>
.el-form-item__label
{
font-size
:
12px
;
line-height
:
38px
;
}
.form-item
>>>
.el-form-item__label
{
font-size
:
12px
;
}
.el-select-dropdown__item
{
padding
:
0
20px
;
}
span
{
font-size
:
12px
}
.el-form-item
{
margin-bottom
:
6px
;
}
.label-item
{
font-size
:
12px
;
font-weight
:
bold
;
}
.col-label-item
{
text-align
:
right
;
padding-right
:
10px
;
}
</
style
>
</
style
>
frontend/src/views/chart/components/normal/LabelNormal.vue
浏览文件 @
fe63b85f
...
@@ -161,7 +161,7 @@ export default {
...
@@ -161,7 +161,7 @@ export default {
this
.
title_class
.
fontWeight
=
customStyle
.
text
.
isBolder
?
'bold'
:
'normal'
this
.
title_class
.
fontWeight
=
customStyle
.
text
.
isBolder
?
'bold'
:
'normal'
}
}
if
(
customStyle
.
background
)
{
if
(
customStyle
.
background
)
{
this
.
bg_class
.
background
=
hexColorToRGBA
(
customStyle
.
background
.
color
,
customStyle
.
background
.
alpha
)
//
this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
}
}
}
},
},
...
...
frontend/src/views/chart/components/table/TableNormal.vue
浏览文件 @
fe63b85f
<
template
>
<
template
>
<div
ref=
"tableContainer"
:style=
"bg_class"
style=
"padding: 8px;width: 100%;height: 100%;overflow: hidden;"
>
<div
ref=
"tableContainer"
style=
"padding: 8px;width: 100%;height: 100%;overflow: hidden;"
>
<el-row
style=
"height: 100%;"
>
<el-row
style=
"height: 100%;"
>
<p
v-show=
"title_show"
ref=
"title"
:style=
"title_class"
>
{{
chart
.
title
}}
</p>
<p
v-show=
"title_show"
ref=
"title"
:style=
"title_class"
>
{{
chart
.
title
}}
</p>
<ux-grid
<ux-grid
...
@@ -124,8 +124,6 @@ export default {
...
@@ -124,8 +124,6 @@ export default {
computed
:
{
computed
:
{
bg_class
()
{
bg_class
()
{
return
{
return
{
background
:
hexColorToRGBA
(
'#ffffff'
,
0
),
borderRadius
:
this
.
borderRadius
}
}
}
}
},
},
...
...
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @
fe63b85f
...
@@ -825,8 +825,8 @@
...
@@ -825,8 +825,8 @@
</el-tabs>
</el-tabs>
<el-col
style=
"height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;"
>
<el-col
style=
"height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;"
>
<el-row
style=
"width: 100%;height: 100%;
"
class=
"padding-lr"
>
<el-row
:style=
"componentBackGround
"
class=
"padding-lr"
>
<div
ref=
"imageWrapper"
style=
"height: 100%"
>
<div
ref=
"imageWrapper"
style=
"height: 100%
;
"
>
<plugin-com
<plugin-com
v-if=
"httpRequest.status && chart.type && view.isPlugin"
v-if=
"httpRequest.status && chart.type && view.isPlugin"
ref=
"dynamicChart"
ref=
"dynamicChart"
...
@@ -1064,6 +1064,7 @@ import { compareItem } from '@/views/chart/chart/compare'
...
@@ -1064,6 +1064,7 @@ import { compareItem } from '@/views/chart/chart/compare'
import
ChartComponentS2
from
'@/views/chart/components/ChartComponentS2'
import
ChartComponentS2
from
'@/views/chart/components/ChartComponentS2'
import
DimensionExtItem
from
'@/views/chart/components/drag-item/DimensionExtItem'
import
DimensionExtItem
from
'@/views/chart/components/drag-item/DimensionExtItem'
import
PluginCom
from
'@/views/system/plugin/PluginCom'
import
PluginCom
from
'@/views/system/plugin/PluginCom'
import
{
hexColorToRGBA
}
from
'@/views/chart/chart/util'
export
default
{
export
default
{
name
:
'ChartEdit'
,
name
:
'ChartEdit'
,
components
:
{
components
:
{
...
@@ -1206,6 +1207,32 @@ export default {
...
@@ -1206,6 +1207,32 @@ export default {
computed
:
{
computed
:
{
chartType
()
{
chartType
()
{
return
this
.
chart
.
type
return
this
.
chart
.
type
},
// 视图
componentBackGround
()
{
const
customStyle
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
view
.
customStyle
))
let
style
=
{
height
:
'100%'
,
width
:
'100%'
,
backgroundSize
:
'100% 100% !important'
}
debugger
if
(
customStyle
&&
customStyle
.
background
)
{
style
[
'borderRadius'
]
=
customStyle
.
background
.
borderRadius
+
'px'
if
(
customStyle
.
background
.
backgroundType
===
'outImage'
&&
typeof
(
customStyle
.
background
.
outImage
)
===
'string'
)
{
style
=
{
background
:
`url(
${
customStyle
.
background
.
outImage
}
) no-repeat`
,
...
style
}
}
else
if
(
!
customStyle
.
background
.
backgroundType
||
customStyle
.
background
.
backgroundType
===
'color'
)
{
style
=
{
background
:
hexColorToRGBA
(
customStyle
.
background
.
color
,
customStyle
.
background
.
alpha
),
...
style
}
}
}
return
style
}
}
},
},
watch
:
{
watch
:
{
...
@@ -1233,6 +1260,7 @@ export default {
...
@@ -1233,6 +1260,7 @@ export default {
// this.initAreas()
// this.initAreas()
},
},
mounted
()
{
mounted
()
{
debugger
this
.
bindPluginEvent
()
this
.
bindPluginEvent
()
// this.get(this.$store.state.chart.viewId);
// this.get(this.$store.state.chart.viewId);
this
.
getData
(
this
.
param
.
id
)
this
.
getData
(
this
.
param
.
id
)
...
@@ -1531,6 +1559,7 @@ export default {
...
@@ -1531,6 +1559,7 @@ export default {
this
.
closeChangeChart
()
this
.
closeChangeChart
()
// 从仪表板入口关闭
// 从仪表板入口关闭
if
(
this
.
$route
.
path
.
indexOf
(
'panel'
)
>
-
1
)
{
if
(
this
.
$route
.
path
.
indexOf
(
'panel'
)
>
-
1
)
{
this
.
$store
.
commit
(
'recordSnapshot'
)
bus
.
$emit
(
'PanelSwitchComponent'
,
{
name
:
'PanelEdit'
})
bus
.
$emit
(
'PanelSwitchComponent'
,
{
name
:
'PanelEdit'
})
}
}
this
.
$success
(
this
.
$t
(
'commons.save_success'
))
this
.
$success
(
this
.
$t
(
'commons.save_success'
))
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论