diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index da033cd36a..a7663d7af6 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -126,8 +126,7 @@ export default {
'targetLinkageInfo',
'mobileLayoutStatus',
'mobileComponentData',
- 'componentDataCache',
- 'styleChangeTimes'
+ 'componentDataCache'
])
},
created() {
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index afb2d2f3bd..a0243333f4 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -8,65 +8,63 @@
'rect-shape'
]"
>
-
-
-
-
- {{ message }},{{ $t('chart.chart_show_error') }}
-
- {{ $t('chart.chart_error_tips') }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+ {{ message }},{{ $t('chart.chart_show_error') }}
+
+ {{ $t('chart.chart_error_tips') }}
+
+
+
+
+
+
+
+
+
@@ -92,7 +90,6 @@ import EditBarView from '@/components/canvas/components/Editor/EditBarView'
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import PluginCom from '@/views/system/plugin/PluginCom'
-import { hexColorToRGBA } from '@/views/chart/chart/util'
export default {
name: 'UserView',
components: { PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
@@ -169,31 +166,6 @@ export default {
},
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() {
if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
return 1.1
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 179f42bcc7..df770bd6e8 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -1,8 +1,3 @@
-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 = {
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
@@ -197,10 +192,7 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
}
}
export const DEFAULT_BACKGROUND_COLOR = {
- backgroundType: 'color',
color: '#ffffff',
- outImage: null,
- innerImage: null,
alpha: 100,
borderRadius: 5
}
diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js
index 34445d128d..3945d4f4bf 100644
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@@ -174,7 +174,7 @@ export function componentStyle(chart_option, chart) {
chart_option.radar.splitArea = customStyle.split.splitArea
}
if (customStyle.background) {
- // chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+ chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
}
}
diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js
index b67db98842..4175a70bf1 100644
--- a/frontend/src/views/chart/chart/common/common_antv.js
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@@ -40,7 +40,7 @@ export function getTheme(chart) {
customStyle = JSON.parse(chart.customStyle)
// bg
if (customStyle.background) {
- // bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+ bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
// legend
if (customStyle.legend) {
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index aaadf57ee5..3082ccf498 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -7,7 +7,7 @@
:style="trackBarStyleTime"
@trackClick="trackClick"
/>
-
+
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index ce766e8f2a..66c9437c86 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -87,7 +87,7 @@ export default {
},
bg_class() {
return {
- // borderRadius: this.borderRadius
+ borderRadius: this.borderRadius
}
}
},
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 318997f0f1..e4b4b3b1fd 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -1,10 +1,10 @@
-
+
{{ chart.title }}
-
+
@@ -109,6 +109,7 @@ export default {
},
bg_class() {
return {
+ borderRadius: this.borderRadius
}
}
},
@@ -258,7 +259,12 @@ export default {
}
},
setBackGroundBorder() {
-
+ if (this.chart.customStyle) {
+ const customStyle = JSON.parse(this.chart.customStyle)
+ if (customStyle.background) {
+ this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
+ }
+ }
},
chartResize() {
this.initData()
@@ -319,6 +325,12 @@ export default {
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)
+ }
}
},
diff --git a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
index 58f84de123..d51a1ed91c 100644
--- a/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
+++ b/frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
@@ -1,82 +1,24 @@
-
-
- {{ $t('chart.color') }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ $t('panel.photo') }}
-
-
-
-
-
-
-
-
-
-
-
-
- {{ $t('chart.border_radius') }}
-
-
-
-
-
-
-
- {{ $t('chart.not_alpha') }}
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
+
+
+
+
+
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index a9e5e42994..616692f810 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -161,7 +161,7 @@ export default {
this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
}
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)
}
}
},
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 1735e2e801..c9afef2d35 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -1,5 +1,5 @@
-
+
{{ chart.title }}
-
-
+
+
-1) {
- this.$store.commit('recordSnapshot')
bus.$emit('PanelSwitchComponent', { name: 'PanelEdit' })
}
this.$success(this.$t('commons.save_success'))