Skip to content

D
dataease
提交 a27e61ae authored 作者: junjie's avatar junjie
浏览文件
操作

feat(视图):视图 表格 组件样式，支持'颜色'与'字体'属性修改

上级 0c477f5b
显示空白字符变更
内嵌 并排
正在显示 包含 111 行增加 和 19 行删除
frontend/src/lang/zh.js
浏览文件 @ a27e61ae
......@@ -700,7 +700,13 @@ export default {
rose_radius: '圆角',
view_name: '视图名称',
name_can_not_empty: '名称不能为空',
custom_count: '记录数'
custom_count: '记录数',
table_title_fontsize: '表头字体大小',
table_item_fontsize: '表格字体大小',
table_header_bg: '表头背景',
table_item_bg: '表格背景',
table_item_font_color: '字体颜色',
stripe: '斑马纹'
},
dataset: {
datalist: '数据集',
......
frontend/src/views/chart/chart/chart.js
浏览文件 @ a27e61ae
export const DEFAULT_COLOR_CASE = {
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
alpha: 100
alpha: 100,
tableHeaderBgColor: '#e8eaec',
tableItemBgColor: '#ffffff',
tableFontColor: '#606266',
tableStripe: true
}
export const DEFAULT_SIZE = {
barDefault: true,
......@@ -18,7 +22,9 @@ export const DEFAULT_SIZE = {
pieRoseType: 'radius',
pieRoseRadius: 5,
funnelWidth: 80,
radarShape: 'polygon'
radarShape: 'polygon',
tableTitleFontSize: 12,
tableItemFontSize: 12
}
export const DEFAULT_LABEL = {
show: false,
......
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
浏览文件 @ a27e61ae
......@@ -8,8 +8,8 @@
>
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.color_case')" class="form-item">
<el-select v-model="colorForm.colorCase" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
<el-form-item v-if="chart.type && !chart.type.includes('table')" :label="$t('chart.color_case')" class="form-item">
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
<div style="float: left">
<span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
......@@ -18,6 +18,20 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.table_header_bg')" class="form-item">
<colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
</el-form-item>
<el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_bg')" class="form-item">
<colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
</el-form-item>
<el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_font_color')" class="form-item">
<colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
</el-form-item>
<el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.stripe')" class="form-item">
<el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>
</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="changeColorCase" />
</el-form-item>
......@@ -31,6 +45,8 @@
</template>
<script>
import { DEFAULT_COLOR_CASE } from '../../chart/chart'
export default {
name: 'ColorSelector',
props: {
......@@ -88,10 +104,7 @@ export default {
colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
}
],
colorForm: {
colorCase: 'default',
alpha: 100
}
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE))
}
},
watch: {
......@@ -101,8 +114,7 @@ export default {
if (chart.customAttr) {
const customAttr = JSON.parse(chart.customAttr)
if (customAttr.color) {
this.colorForm.colorCase = customAttr.color.value
this.colorForm.alpha = customAttr.color.alpha
this.colorForm = customAttr.color
}
}
}
......@@ -114,13 +126,12 @@ export default {
changeColorCase() {
const that = this
const items = this.colorCases.filter(ele => {
return ele.value === that.colorForm.colorCase
})
this.$emit('onColorChange', {
value: items[0].value,
colors: items[0].colors,
alpha: this.colorForm.alpha
return ele.value === that.colorForm.value
})
const val = JSON.parse(JSON.stringify(this.colorForm))
val.value = items[0].value
val.colors = items[0].colors
this.$emit('onColorChange', val)
}
}
}
......
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
浏览文件 @ a27e61ae
......@@ -85,6 +85,19 @@
</el-radio-group>
</el-form-item>
</el-form>
<el-form v-if="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
<el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
<el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.table_item_fontsize')" class="form-item">
<el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon--right" /></el-button>
......@@ -116,7 +129,8 @@ export default {
{ name: this.$t('chart.line_symbol_diamond'), value: 'diamond' },
{ name: this.$t('chart.line_symbol_pin'), value: 'pin' },
{ name: this.$t('chart.line_symbol_arrow'), value: 'arrow' }
]
],
fontSize: []
}
},
watch: {
......@@ -133,8 +147,19 @@ export default {
}
},
mounted() {
this.init()
},
methods: {
init() {
const arr = []
for (let i = 10; i <= 30; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeBarSizeCase() {
this.$emit('onSizeChange', this.sizeForm)
}
......
frontend/src/views/chart/components/table/TableNormal.vue
浏览文件 @ a27e61ae
......@@ -8,6 +8,9 @@
:height="height"
:checkbox-config="{highlight: true}"
:width-resize="true"
:header-row-style="table_header_class"
:row-style="getRowStyle"
class="table-class"
>
<ux-table-column
v-for="field in fields"
......@@ -59,6 +62,21 @@ export default {
bg_class: {
background: hexColorToRGBA('#ffffff', 0)
},
table_header_class: {
fontSize: '12px',
color: '#606266',
background: '#e8eaec'
},
table_item_class: {
fontSize: '12px',
color: '#606266',
background: '#ffffff'
},
table_item_class_stripe: {
fontSize: '12px',
color: '#606266',
background: '#ffffff'
},
title_show: true
}
},
......@@ -91,6 +109,23 @@ export default {
}, 100)
},
initStyle() {
if (this.chart.customAttr) {
const customAttr = JSON.parse(this.chart.customAttr)
if (customAttr.color) {
this.table_header_class.color = customAttr.color.tableFontColor
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)
}
if (customAttr.size) {
this.table_header_class.fontSize = customAttr.size.tableTitleFontSize + 'px'
this.table_item_class.fontSize = customAttr.size.tableItemFontSize + 'px'
}
this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class))
if (customAttr.color.tableStripe) {
this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha - 40)
}
}
if (this.chart.customStyle) {
const customStyle = JSON.parse(this.chart.customStyle)
if (customStyle.text) {
......@@ -104,11 +139,20 @@ export default {
this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
}
},
getRowStyle({ row, rowIndex }) {
if (rowIndex % 2 === 0) {
return this.table_item_class_stripe
} else {
return this.table_item_class
}
}
}
}
</script>
<style scoped>
.table-class>>>.body--wrapper{
background: rgba(1,1,1,0);
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论