Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
D
dataease
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
zhu
dataease
Commits
fe63b85f
提交
fe63b85f
authored
2月 21, 2022
作者:
wangjiahao
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 视图组件支持设置背景图片
上级
fe01f43d
显示空白字符变更
内嵌
并排
正在显示
12 个修改的文件
包含
229 行增加
和
47 行删除
+229
-47
Toolbar.vue
frontend/src/components/canvas/components/Toolbar.vue
+2
-1
UserView.vue
frontend/src/components/canvas/custom-component/UserView.vue
+28
-0
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
+151
-21
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,6 +8,7 @@
...
@@ -8,6 +8,7 @@
'rect-shape'
'rect-shape'
]"
]"
>
>
<div
:style=
"componentBackGround"
>
<EditBarView
v-if=
"editBarViewShowFlag"
:is-edit=
"isEdit"
:view-id=
"element.propValue.viewId"
@
showViewDetails=
"openChartDetailsDialog"
/>
<EditBarView
v-if=
"editBarViewShowFlag"
:is-edit=
"isEdit"
:view-id=
"element.propValue.viewId"
@
showViewDetails=
"openChartDetailsDialog"
/>
<div
v-if=
"requestStatus==='error'"
class=
"chart-error-class"
>
<div
v-if=
"requestStatus==='error'"
class=
"chart-error-class"
>
<div
class=
"chart-error-message-class"
>
<div
class=
"chart-error-message-class"
>
...
@@ -66,6 +67,7 @@
...
@@ -66,6 +67,7 @@
<drill-path
:drill-filters=
"drillFilters"
@
onDrillJump=
"drillJump"
/>
<drill-path
:drill-filters=
"drillFilters"
@
onDrillJump=
"drillJump"
/>
</div>
</div>
</div>
</div>
</div>
</
template
>
</
template
>
<
script
>
<
script
>
...
@@ -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-form>
</el-col>
</el-col>
</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-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
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论