Merge remote-tracking branch 'origin/dev' into dev

This commit is contained in:
junjun 2022-09-22 15:26:29 +08:00
commit b0ca765e21
12 changed files with 424 additions and 22 deletions

View File

@ -25,7 +25,6 @@
</template>
<script>
import { log } from '@antv/g2plot/lib/utils';
import tableBody from "./tableBody";
export default {
components: { tableBody },
@ -112,6 +111,9 @@ export default {
},
},
methods: {
toggleRowSelection(row) {
this.$refs.table.toggleRowSelection(row, true);
},
handlerSelected(multipleSelection) {
this.multipleSelectionCach = [
...this.multipleSelectionCach,

View File

@ -445,7 +445,7 @@ export default {
cost: 'cost',
developer: 'developer',
edition: 'edition',
installation_time: 'Installation time:'
installation_time: 'Install time'
},
table: {
dynamicTips1: 'Fixed header, sorted by header order',
@ -910,6 +910,11 @@ export default {
password_input_error: 'Original password input error'
},
chart: {
margin_model: 'Model',
margin_model_auto: 'Auto',
margin_model_absolute: 'Absolute',
margin_model_relative: 'Relative',
margin_placeholder: 'Please enter a number from 0-100',
rich_text_view_result_tips: 'The rich text view selects only the first result',
rich_text_view: 'Rich Text View',
view_reset: 'View Reset',

View File

@ -910,6 +910,11 @@ export default {
password_input_error: '原始密碼輸入錯誤'
},
chart: {
margin_model: '模式',
margin_model_auto: '自動',
margin_model_absolute: '絕對',
margin_model_relative: '相對',
margin_placeholder: '請輸入0-100數字',
rich_text_view_result_tips: '富文本只选取第一条结果',
rich_text_view: '富文本视图',
view_reset: '視圖重置',

View File

@ -909,6 +909,11 @@ export default {
password_input_error: '原始密码输入错误'
},
chart: {
margin_model: '模式',
margin_model_auto: '自动',
margin_model_absolute: '绝对',
margin_model_relative: '相对',
margin_placeholder: '请输入0-100数字',
rich_text_view_result_tips: '富文本只选取第一条结果',
rich_text_view: '富文本视图',
view_reset: '视图重置',

View File

@ -1389,6 +1389,14 @@ div:focus {
width: 2px;
background: #3370ff;
}
.explain {
font-size: 12px;
font-weight: 400;
line-height: 20px;
margin-left: 8px;
color: var(--deTextSecondary, #646a73);
}
}
.de-foot {

View File

@ -217,6 +217,15 @@ export const DEFAULT_LEGEND_STYLE = {
fontSize: '12'
}
}
export const DEFAULT_MARGIN_STYLE = {
marginModel: 'auto',
marginTop: 40,
marginBottom: 44,
marginLeft: 15,
marginRight: 10
}
export const DEFAULT_XAXIS_STYLE = {
show: true,
position: 'bottom',

View File

@ -186,11 +186,38 @@ export function componentStyle(chart_option, chart) {
chart_option.radar.splitLine = customStyle.split.splitLine
chart_option.radar.splitArea = customStyle.split.splitArea
}
if (customStyle.margin && customStyle.margin.marginModel && customStyle.margin.marginModel !== 'auto') {
const unit = getMarginUnit(customStyle.margin)
const result = { containLabel: true }
const realUnit = (unit === '%' ? unit : '')
if (customStyle.margin.marginTop != null) {
result.top = customStyle.margin.marginTop + realUnit
}
if (customStyle.margin.marginBottom != null) {
result.bottom = customStyle.margin.marginBottom + realUnit
}
if (customStyle.margin.marginLeft != null) {
result.left = customStyle.margin.marginLeft + realUnit
}
if (customStyle.margin.marginRight != null) {
result.right = customStyle.margin.marginRight + realUnit
}
if (!chart_option.grid) {
chart_option.grid = {}
}
Object.assign(chart_option.grid, JSON.parse(JSON.stringify(result)))
}
if (customStyle.background) {
chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
}
}
}
export const getMarginUnit = marginForm => {
if (!marginForm.marginModel || marginForm.marginModel === 'auto') return null
if (marginForm.marginModel === 'absolute') return 'px'
if (marginForm.marginModel === 'relative') return '%'
return null
}
const hexToRgba = (hex, opacity) => {
let rgbaColor = ''

View File

@ -1538,9 +1538,17 @@ export const TYPE_CONFIGS = [
properties: [
'color-selector',
'size-selector',
'title-selector'
'title-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'quotaColor',
'dimensionColor'
@ -1582,9 +1590,17 @@ export const TYPE_CONFIGS = [
properties: [
'color-selector',
'size-selector',
'title-selector'
'title-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'quotaColor',
'dimensionColor'
@ -1627,9 +1643,17 @@ export const TYPE_CONFIGS = [
'color-selector',
'size-selector',
'label-selector',
'title-selector'
'title-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -1674,9 +1698,17 @@ export const TYPE_CONFIGS = [
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
'legend-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -1754,9 +1786,17 @@ export const TYPE_CONFIGS = [
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
'legend-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -1835,9 +1875,17 @@ export const TYPE_CONFIGS = [
'y-axis-selector',
'y-axis-ext-selector',
'title-selector',
'legend-selector'
'legend-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -1920,9 +1968,17 @@ export const TYPE_CONFIGS = [
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
'legend-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -1999,9 +2055,17 @@ export const TYPE_CONFIGS = [
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
'legend-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -2078,9 +2142,17 @@ export const TYPE_CONFIGS = [
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
'legend-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -2157,9 +2229,17 @@ export const TYPE_CONFIGS = [
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
'legend-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -2236,9 +2316,17 @@ export const TYPE_CONFIGS = [
'label-selector',
'tooltip-selector',
'title-selector',
'legend-selector'
'legend-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -2294,9 +2382,17 @@ export const TYPE_CONFIGS = [
'label-selector',
'tooltip-selector',
'title-selector',
'legend-selector'
'legend-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -2354,9 +2450,17 @@ export const TYPE_CONFIGS = [
'tooltip-selector',
'split-selector',
'title-selector',
'legend-selector'
'legend-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -2417,9 +2521,17 @@ export const TYPE_CONFIGS = [
'size-selector',
'label-selector',
'tooltip-selector',
'title-selector'
'title-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -2468,9 +2580,17 @@ export const TYPE_CONFIGS = [
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
'legend-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -2544,9 +2664,17 @@ export const TYPE_CONFIGS = [
'label-selector',
'tooltip-selector',
'title-selector',
'legend-selector'
'legend-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',
@ -2599,9 +2727,17 @@ export const TYPE_CONFIGS = [
'color-selector',
'label-selector',
'tooltip-selector',
'title-selector'
'title-selector',
'margin-selector'
],
propertyInner: {
'margin-selector': [
'marginModel',
'marginTop',
'marginBottom',
'marginLeft',
'marginRight'
],
'color-selector': [
'value',
'custom',

View File

@ -0,0 +1,171 @@
<template>
<div style="width: 100%">
<el-col>
<el-form ref="marginForm" :model="marginForm" label-width="80px" size="mini" :rules="rules">
<el-form-item v-show="showProperty('marginModel')" :label="$t('chart.margin_model')" class="form-item">
<el-radio-group v-model="marginForm.marginModel" size="mini" @change="changeMarginStyle('marginModel')">
<el-radio-button label="auto">{{ $t('chart.margin_model_auto') }}</el-radio-button>
<el-radio-button label="absolute">{{ $t('chart.margin_model_absolute') }}</el-radio-button>
<el-radio-button label="relative">{{ $t('chart.margin_model_relative') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<div v-show="showProperty('marginModel') && marginForm.marginModel !== 'auto'">
<el-form-item v-show="showProperty('marginTop')" :label="$t('chart.text_pos_top')" class="form-item" prop="marginTop">
<el-input v-model="marginForm.marginTop" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
<template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
</el-input>
</el-form-item>
<el-form-item v-show="showProperty('marginBottom')" :label="$t('chart.text_pos_bottom')" class="form-item" prop="marginBottom">
<el-input v-model="marginForm.marginBottom" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
<template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
</el-input>
</el-form-item>
<el-form-item v-show="showProperty('marginLeft')" :label="$t('chart.text_pos_left')" class="form-item" prop="marginLeft">
<el-input v-model="marginForm.marginLeft" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
<template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
</el-input>
</el-form-item>
<el-form-item v-show="showProperty('marginRight')" :label="$t('chart.text_pos_right')" class="form-item" prop="marginRight">
<el-input v-model="marginForm.marginRight" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
<template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
</el-input>
</el-form-item>
</div>
</el-form>
</el-col>
</div>
</template>
<script>
import { DEFAULT_MARGIN_STYLE } from '../../chart/chart'
import { getMarginUnit } from '@/views/chart/chart/common/common'
export default {
name: 'MarginSelector',
props: {
param: {
type: Object,
required: true
},
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
return {
marginForm: JSON.parse(JSON.stringify(DEFAULT_MARGIN_STYLE)),
rules: {
marginTop: [
{ validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
],
marginBottom: [
{ validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
],
marginLeft: [
{ validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
],
marginRight: [
{ validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
]
}
}
},
computed: {
unitSuffix() {
return getMarginUnit(this.marginForm)
}
},
watch: {
'chart': {
handler: function() {
this.initData()
}
}
},
mounted() {
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.margin) {
this.marginForm = customStyle.margin
}
}
},
changeMarginStyle(value, modifyName) {
this.marginForm['modifyName'] = modifyName
this.$emit('onMarginChange', this.marginForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
},
validateMarginNumber(rule, value, callBack) {
if (value == null || value === '') {
callBack()
return
}
if (value < 0 || value > 100) {
callBack(new Error(this.$t('chart.margin_placeholder')))
this.marginForm[rule.field] = 0
}
}
}
}
</script>
<style scoped>
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style>

View File

@ -757,6 +757,7 @@
@onChangeSplitForm="onChangeSplitForm"
@onTextChange="onTextChange"
@onLegendChange="onLegendChange"
@onMarginChange="onMarginChange"
@onChangeBackgroundForm="onChangeBackgroundForm"
/>
</el-tab-pane>
@ -1999,6 +2000,10 @@ export default {
this.view.customStyle.legend = val
this.calcStyle()
},
onMarginChange(val) {
this.view.customStyle.margin = val
this.calcStyle()
},
onLabelChange(val) {
this.view.customAttr.label = val

View File

@ -260,6 +260,21 @@
@onChangeBackgroundForm="onChangeBackgroundForm($event,'background-color-selector')"
/>
</el-collapse-item>
<el-collapse-item
v-show="showPropertiesCollapse(['margin-selector'])"
name="margin"
:title="$t('panel.margin')"
>
<margin-selector
v-if="showProperties('margin-selector')"
:param="param"
class="attr-selector"
:chart="chart"
:property-inner="propertyInnerAll['margin-selector']"
@onMarginChange="onMarginChange($event,'margin-selector')"
/>
</el-collapse-item>
</el-collapse>
</el-row>
</div>
@ -284,6 +299,7 @@ import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxis
import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
import TitleSelectorAntV from '@/views/chart/components/component-style/TitleSelectorAntV'
import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
import MarginSelector from '@/views/chart/components/component-style/MarginSelector'
import LegendSelectorAntV from '@/views/chart/components/component-style/LegendSelectorAntV'
import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
import SplitSelector from '@/views/chart/components/component-style/SplitSelector'
@ -314,6 +330,7 @@ export default {
SizeSelectorAntV,
SizeSelector,
ColorSelector,
MarginSelector,
PluginCom
},
props: {
@ -432,6 +449,10 @@ export default {
val['propertyName'] = propertyName
this.$emit('onLegendChange', val)
},
onMarginChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onMarginChange', val)
},
onChangeBackgroundForm(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onChangeBackgroundForm', val)

View File

@ -104,6 +104,7 @@
@selection-change="handleSelectionChange"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
ref="multipleTable"
>
<el-table-column type="selection" width="55" />
<el-table-column
@ -507,11 +508,18 @@ export default {
const { currentPage, pageSize } = this.paginationConfig;
datasetTaskList(currentPage, pageSize, param, showLoading).then(
(response) => {
const multipleSelection = this.multipleSelection.map(ele => ele.id)
this.data = response.data.listObject;
// this.data.forEach((item) => {
// this.taskStatus(item);
// });
this.paginationConfig.total = response.data.itemCount;
if (multipleSelection.length) {
this.$nextTick(() => {
this.data.forEach(row => {
if (multipleSelection.includes(row.id)) {
this.$refs.multipleTable.toggleRowSelection(row);
}
});
})
}
}
);
},