diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 8be484db7e..68c9336d48 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1338,6 +1338,7 @@ export default {
table_align_left: 'Left',
table_align_center: 'Center',
table_align_right: 'Right',
+ table_scroll_bar_color: 'Scroll Bar Color',
draw_back: 'Draw Back',
senior: 'Senior',
senior_cfg: 'Senior Config',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 36d4a2d7b9..bb327cf02d 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1338,6 +1338,7 @@ export default {
table_align_left: '左對齊',
table_align_center: '居中',
table_align_right: '右對齊',
+ table_scroll_bar_color: '滾動條顏色',
draw_back: '收回',
senior: '高級',
senior_cfg: '高級設置',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 61be12d916..c408133eff 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1337,6 +1337,7 @@ export default {
table_align_left: '左对齐',
table_align_center: '居中',
table_align_right: '右对齐',
+ table_scroll_bar_color: '滚动条颜色',
draw_back: '收回',
senior: '高级',
senior_cfg: '高级设置',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 25e805936d..1ec2129aa4 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -29,7 +29,9 @@ export const DEFAULT_COLOR_CASE = {
seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
areaBorderColor: '#303133',
gradient: false,
- areaBaseColor: '#FFFFFF'
+ areaBaseColor: '#FFFFFF',
+ tableScrollBarColor: 'rgba(0, 0, 0, 0.15)',
+ tableScrollBarHoverColor: 'rgba(0, 0, 0, 0.4)'
}
export const DEFAULT_COLOR_CASE_DARK = {
@@ -45,7 +47,9 @@ export const DEFAULT_COLOR_CASE_DARK = {
tableBorderColor: '#CCCCCC',
seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
areaBorderColor: '#EBEEF5',
- areaBaseColor: '5470C6'
+ areaBaseColor: '5470C6',
+ tableScrollBarColor: 'rgba(255, 255, 255, 0.5)',
+ tableScrollBarHoverColor: 'rgba(255, 255, 255, 0.8)'
}
export const DEFAULT_SIZE = {
barDefault: true,
diff --git a/frontend/src/views/chart/chart/common/common_table.js b/frontend/src/views/chart/chart/common/common_table.js
index 0a318f5e08..154b383410 100644
--- a/frontend/src/views/chart/chart/common/common_table.js
+++ b/frontend/src/views/chart/chart/common/common_table.js
@@ -1,4 +1,4 @@
-import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { hexColorToRGBA, resetRgbOpacity } from '@/views/chart/chart/util'
import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
export function getCustomTheme(chart) {
@@ -7,6 +7,8 @@ export function getCustomTheme(chart) {
const borderColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableBorderColor, DEFAULT_COLOR_CASE.alpha)
const headerAlign = DEFAULT_SIZE.tableHeaderAlign
const itemAlign = DEFAULT_SIZE.tableItemAlign
+ const scrollBarColor = DEFAULT_COLOR_CASE.tableScrollBarColor
+ const scrollBarHoverColor = DEFAULT_COLOR_CASE.tableScrollBarHoverColor
const theme = {
background: {
@@ -105,6 +107,10 @@ export function getCustomTheme(chart) {
fontSize: DEFAULT_SIZE.tableItemFontSize,
textAlign: headerAlign
}
+ },
+ scrollBar: {
+ thumbColor: scrollBarColor,
+ thumbHoverColor: scrollBarHoverColor
}
}
@@ -156,6 +162,9 @@ export function getCustomTheme(chart) {
theme.dataCell.bolderText.fill = c.tableFontColor
theme.dataCell.text.fill = c.tableFontColor
theme.dataCell.measureText.fill = c.tableFontColor
+
+ theme.scrollBar.thumbColor = c.tableScrollBarColor
+ theme.scrollBar.thumbHoverColor = resetRgbOpacity(c.tableScrollBarColor, 1.5)
}
// size
if (customAttr.size) {
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index 00084eace9..5e04f41dc9 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -1,5 +1,6 @@
import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { equalsAny, includesAny } from '@/utils/StringUtils'
+import _ from 'lodash'
export function hexColorToRGBA(hex, alpha) {
const rgb = [] // 定义rgb数组
@@ -49,6 +50,7 @@ export const TYPE_CONFIGS = [
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
+ 'tableScrollBarColor',
'alpha'
],
'size-selector-ant-v': [
@@ -95,6 +97,7 @@ export const TYPE_CONFIGS = [
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
+ 'tableScrollBarColor',
'alpha'
],
'size-selector-ant-v': [
@@ -144,6 +147,7 @@ export const TYPE_CONFIGS = [
'tableHeaderFontColor',
'tableFontColor',
'tableBorderColor',
+ 'tableScrollBarColor',
'alpha'
],
'size-selector-ant-v': [
@@ -1769,6 +1773,7 @@ export const TYPE_CONFIGS = [
'tableItemBgColor',
'tableHeaderFontColor',
'tableFontColor',
+ 'tableScrollBarColor',
'alpha'
],
'size-selector': [
@@ -1808,6 +1813,7 @@ export const TYPE_CONFIGS = [
'tableItemBgColor',
'tableHeaderFontColor',
'tableFontColor',
+ 'tableScrollBarColor',
'alpha'
],
'size-selector': [
@@ -3411,15 +3417,18 @@ function handleSetZeroMultiDimension(chart, data) {
let insertCount = 0
dimensionInfoMap.forEach((dimensionInfo, field) => {
if (dimensionInfo.set.size < subDimensionSet.size) {
- const toBeFillDimension = [...subDimensionSet].filter(item => !dimensionInfo.set.has(item))
- toBeFillDimension.forEach(dimension => {
- data.splice(dimensionInfo.index + insertCount, 0, {
- field,
- value: 0,
- category: dimension
- })
+ let subInsertIndex = 0
+ subDimensionSet.forEach(dimension => {
+ if (!dimensionInfo.set.has(dimension)) {
+ data.splice(dimensionInfo.index + insertCount + subInsertIndex, 0, {
+ field,
+ value: 0,
+ category: dimension
+ })
+ }
+ subInsertIndex++
})
- insertCount += toBeFillDimension.size
+ insertCount += subDimensionSet.size - dimensionInfo.set.size
}
})
}
@@ -3440,3 +3449,21 @@ function handleIgnoreData(chart, data) {
}
}
}
+
+export function resetRgbOpacity(sourceColor, times) {
+ if (sourceColor?.startsWith('rgb')) {
+ const numbers = sourceColor.match(/(\d(\.\d+)?)+/g)
+ if (numbers?.length === 4) {
+ const opacity = parseFloat(numbers[3])
+ if (_.isNumber(opacity)) {
+ let resultOpacity = (opacity * times).toFixed(2)
+ if (resultOpacity > 1) {
+ resultOpacity = 1
+ }
+ const colorArr = numbers.slice(0, 3).concat(resultOpacity)
+ return `rgba(${colorArr.join(',')})`
+ }
+ }
+ }
+ return sourceColor
+}
diff --git a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
index e4972fc2d0..3390f8b5ef 100644
--- a/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
@@ -248,6 +248,20 @@
@change="changeColorCase('tableBorderColor')"
/>
+
+
+
import { hexColorToRGBA } from '../../chart/util'
import eventBus from '@/components/canvas/utils/eventBus'
-import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
+import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
import { mapState } from 'vuex'
export default {
@@ -154,7 +154,9 @@ export default {
scrollTimer: null,
scrollTop: 0,
showIndex: false,
- indexLabel: '序号'
+ indexLabel: '序号',
+ scrollBarColor: DEFAULT_COLOR_CASE.tableScrollBarColor,
+ scrollBarHoverColor: DEFAULT_COLOR_CASE.tableScrollBarHoverColor
}
},
computed: {
@@ -176,6 +178,12 @@ export default {
borderRadius: this.borderRadius
}
},
+ tableStyle() {
+ return {
+ width: '100%',
+ '--scroll-bar-color': this.scrollBarColor
+ }
+ },
...mapState([
'previewCanvasScale'
])
@@ -309,6 +317,7 @@ export default {
this.table_header_class.background = hexColorToRGBA(customAttr.color.tableHeaderBgColor, customAttr.color.alpha)
this.table_item_class.color = customAttr.color.tableFontColor
this.table_item_class.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha)
+ this.scrollBarColor = customAttr.color.tableScrollBarColor ? customAttr.color.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
}
if (customAttr.size) {
this.table_header_class.fontSize = customAttr.size.tableTitleFontSize + 'px'
@@ -498,7 +507,7 @@ export default {
}
-
diff --git a/frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue b/frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue
index 421557c96c..7960725df9 100644
--- a/frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue
+++ b/frontend/src/views/panel/subjectSetting/panelStyle/PanelColorSelector.vue
@@ -190,6 +190,19 @@
@change="changeColorCase('tableBorderColor')"
/>
+
+
+