mirror of
https://github.com/dataease/dataease.git
synced 2026-06-16 20:42:07 +08:00
Merge remote-tracking branch 'origin/dev-v3' into dev-v3
# Conflicts: # core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
This commit is contained in:
wangjiahao
@@ -891,3 +891,7 @@ strong {
|
||||
.ed-popper.is-light .ed-popper__arrow {
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
}
|
||||
|
||||
.ed-collapse-item:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
@@ -258,421 +258,427 @@ watch(
|
||||
<template>
|
||||
<el-row class="view-panel" :class="'style-' + themes">
|
||||
<div class="attr-style">
|
||||
<el-row class="de-collapse-style">
|
||||
<el-collapse v-model="state.attrActiveNames" class="style-collapse">
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="position"
|
||||
:title="t('visualization.position')"
|
||||
v-if="positionComponentShow"
|
||||
>
|
||||
<component-position :themes="themes" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="basicStyle"
|
||||
:title="t('chart.basic_style')"
|
||||
v-if="showProperties('basic-style-selector')"
|
||||
>
|
||||
<basic-style-selector
|
||||
:property-inner="propertyInnerAll['basic-style-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="basicStyle"
|
||||
:title="t('chart.basic_style')"
|
||||
v-if="showProperties('dual-basic-style-selector')"
|
||||
>
|
||||
<DualBasicStyleSelector
|
||||
:property-inner="propertyInnerAll['dual-basic-style-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<div v-if="showProperties('bullet-graph-selector')">
|
||||
<el-collapse-item :effect="themes" name="bullet" :title="t('chart.progress_target')">
|
||||
<bullet-target-selector
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
:selector-type="'target'"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
<el-scrollbar>
|
||||
<el-row class="de-collapse-style">
|
||||
<el-collapse v-model="state.attrActiveNames" class="style-collapse">
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="position"
|
||||
:title="t('visualization.position')"
|
||||
v-if="positionComponentShow"
|
||||
>
|
||||
<component-position :themes="themes" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :effect="themes" name="measure" :title="t('chart.progress_current')">
|
||||
<bullet-measure-selector
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="basicStyle"
|
||||
:title="t('chart.basic_style')"
|
||||
v-if="showProperties('basic-style-selector')"
|
||||
>
|
||||
<basic-style-selector
|
||||
:property-inner="propertyInnerAll['basic-style-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
:selector-type="'measure'"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
style="margin-bottom: 0 !important"
|
||||
:effect="themes"
|
||||
name="range"
|
||||
:title="t('chart.range_bg')"
|
||||
name="basicStyle"
|
||||
:title="t('chart.basic_style')"
|
||||
v-if="showProperties('dual-basic-style-selector')"
|
||||
>
|
||||
<bullet-range-selector
|
||||
<DualBasicStyleSelector
|
||||
:property-inner="propertyInnerAll['dual-basic-style-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
:selector-type="'range'"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
</div>
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
v-model="chart.customStyle.text.show"
|
||||
v-if="showProperties('title-selector')"
|
||||
:change-model="chart.customStyle.text"
|
||||
@modelChange="val => onTextChange(val, 'show')"
|
||||
name="title"
|
||||
:title="$t('chart.title')"
|
||||
>
|
||||
<title-selector
|
||||
:property-inner="propertyInnerAll['title-selector']"
|
||||
<div v-if="showProperties('bullet-graph-selector')">
|
||||
<el-collapse-item :effect="themes" name="bullet" :title="t('chart.progress_target')">
|
||||
<bullet-target-selector
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
:selector-type="'target'"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="measure"
|
||||
:title="t('chart.progress_current')"
|
||||
>
|
||||
<bullet-measure-selector
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
:selector-type="'measure'"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
style="margin-bottom: 0 !important"
|
||||
:effect="themes"
|
||||
name="range"
|
||||
:title="t('chart.range_bg')"
|
||||
>
|
||||
<bullet-range-selector
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
:selector-type="'range'"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
</div>
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
@onTextChange="onTextChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
v-if="showProperties('legend-selector')"
|
||||
v-model="chart.customStyle.legend.show"
|
||||
:change-model="chart.customStyle.legend"
|
||||
@modelChange="val => onLegendChange(val, 'show')"
|
||||
name="legend"
|
||||
:title="$t('chart.legend')"
|
||||
>
|
||||
<legend-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['legend-selector']"
|
||||
v-model="chart.customStyle.text.show"
|
||||
v-if="showProperties('title-selector')"
|
||||
:change-model="chart.customStyle.text"
|
||||
@modelChange="val => onTextChange(val, 'show')"
|
||||
name="title"
|
||||
:title="$t('chart.title')"
|
||||
>
|
||||
<title-selector
|
||||
:property-inner="propertyInnerAll['title-selector']"
|
||||
:themes="themes"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
@onTextChange="onTextChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onLegendChange="onLegendChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="background"
|
||||
:title="t('visualization.background')"
|
||||
v-if="showProperties('background-overall-component') && commonBackgroundPop"
|
||||
>
|
||||
<background-overall-common
|
||||
:common-background-pop="commonBackgroundPop"
|
||||
v-if="showProperties('legend-selector')"
|
||||
v-model="chart.customStyle.legend.show"
|
||||
:change-model="chart.customStyle.legend"
|
||||
@modelChange="val => onLegendChange(val, 'show')"
|
||||
name="legend"
|
||||
:title="$t('chart.legend')"
|
||||
>
|
||||
<legend-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['legend-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onLegendChange="onLegendChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="background"
|
||||
:title="t('visualization.background')"
|
||||
v-if="showProperties('background-overall-component') && commonBackgroundPop"
|
||||
>
|
||||
<background-overall-common
|
||||
:common-background-pop="commonBackgroundPop"
|
||||
:themes="themes"
|
||||
@onBackgroundChange="onBackgroundChange"
|
||||
component-position="component"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<collapse-switch-item
|
||||
v-if="showProperties('border-style') && commonBorderPop && !batchOptStatus"
|
||||
v-model="commonBorderPop.borderActive"
|
||||
@modelChange="val => onActiveChange(val)"
|
||||
:themes="themes"
|
||||
@onBackgroundChange="onBackgroundChange"
|
||||
component-position="component"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<collapse-switch-item
|
||||
v-if="showProperties('border-style') && commonBorderPop && !batchOptStatus"
|
||||
v-model="commonBorderPop.borderActive"
|
||||
@modelChange="val => onActiveChange(val)"
|
||||
:themes="themes"
|
||||
:title="t('visualization.board')"
|
||||
name="borderSetting"
|
||||
class="common-style-area"
|
||||
>
|
||||
<common-border-setting
|
||||
:style-info="commonBorderPop"
|
||||
:themes="themes"
|
||||
@onStyleAttrChange="onStyleAttrChange"
|
||||
></common-border-setting>
|
||||
</collapse-switch-item>
|
||||
:title="t('visualization.board')"
|
||||
name="borderSetting"
|
||||
class="common-style-area"
|
||||
>
|
||||
<common-border-setting
|
||||
:style-info="commonBorderPop"
|
||||
:themes="themes"
|
||||
@onStyleAttrChange="onStyleAttrChange"
|
||||
></common-border-setting>
|
||||
</collapse-switch-item>
|
||||
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="symbolicStyle"
|
||||
:title="t('chart.symbolic')"
|
||||
v-if="showProperties('symbolic-style-selector')"
|
||||
>
|
||||
<SymbolicStyleSelector
|
||||
:property-inner="propertyInnerAll['symbolic-style-selector']"
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="symbolicStyle"
|
||||
:title="t('chart.symbolic')"
|
||||
v-if="showProperties('symbolic-style-selector')"
|
||||
>
|
||||
<SymbolicStyleSelector
|
||||
:property-inner="propertyInnerAll['symbolic-style-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
v-if="showProperties('indicator-value-selector')"
|
||||
name="indicator-value"
|
||||
:title="t('chart.indicator_value')"
|
||||
>
|
||||
<indicator-value-selector
|
||||
ref="indicatorValueRef"
|
||||
:property-inner="propertyInnerAll['indicator-value-selector']"
|
||||
:themes="themes"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:quota-fields="props.quotaData"
|
||||
@onIndicatorChange="onIndicatorChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
v-if="showProperties('indicator-value-selector')"
|
||||
name="indicator-value"
|
||||
:title="t('chart.indicator_value')"
|
||||
>
|
||||
<indicator-value-selector
|
||||
ref="indicatorValueRef"
|
||||
:property-inner="propertyInnerAll['indicator-value-selector']"
|
||||
v-model="chart.customAttr.indicatorName.show"
|
||||
v-if="showProperties('indicator-name-selector')"
|
||||
:change-model="chart.customAttr.indicatorName"
|
||||
@modelChange="val => onIndicatorNameChange(val, 'show')"
|
||||
:title="t('visualization.indicator_name')"
|
||||
name="indicator-name"
|
||||
>
|
||||
<indicator-name-selector
|
||||
ref="indicatorNameRef"
|
||||
:property-inner="propertyInnerAll['indicator-name-selector']"
|
||||
:themes="themes"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:quota-fields="props.quotaData"
|
||||
@onIndicatorNameChange="onIndicatorNameChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
v-if="showProperties('misc-selector') && !chart.type.includes('mix')"
|
||||
name="size"
|
||||
:title="t('visualization.component_size')"
|
||||
>
|
||||
<misc-selector
|
||||
:property-inner="propertyInnerAll['misc-selector']"
|
||||
:themes="themes"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:quota-fields="props.quotaData"
|
||||
:mobile-in-pc="mobileInPc"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
v-if="showProperties('misc-style-selector')"
|
||||
name="size"
|
||||
:title="selectorSpec['misc-style-selector']?.title || t('chart.tooltip_axis')"
|
||||
>
|
||||
<misc-style-selector
|
||||
:property-inner="propertyInnerAll['misc-style-selector']"
|
||||
:themes="themes"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:quota-fields="props.quotaData"
|
||||
@onChangeMiscStyleForm="onChangeMiscStyleForm"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:quota-fields="props.quotaData"
|
||||
@onIndicatorChange="onIndicatorChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
v-model="chart.customAttr.indicatorName.show"
|
||||
v-if="showProperties('indicator-name-selector')"
|
||||
:change-model="chart.customAttr.indicatorName"
|
||||
@modelChange="val => onIndicatorNameChange(val, 'show')"
|
||||
:title="t('visualization.indicator_name')"
|
||||
name="indicator-name"
|
||||
>
|
||||
<indicator-name-selector
|
||||
ref="indicatorNameRef"
|
||||
:property-inner="propertyInnerAll['indicator-name-selector']"
|
||||
v-if="showProperties('label-selector')"
|
||||
v-model="chart.customAttr.label.show"
|
||||
:change-model="chart.customAttr.label"
|
||||
@modelChange="val => onLabelChange({ data: val }, 'show')"
|
||||
:title="t('chart.label')"
|
||||
name="label"
|
||||
>
|
||||
<label-selector
|
||||
:property-inner="propertyInnerAll['label-selector']"
|
||||
:themes="themes"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:all-fields="props.allFields"
|
||||
@onLabelChange="onLabelChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<collapse-switch-item
|
||||
v-if="showProperties('tooltip-selector')"
|
||||
v-model="chart.customAttr.tooltip.show"
|
||||
:themes="themes"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:quota-fields="props.quotaData"
|
||||
@onIndicatorNameChange="onIndicatorNameChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
v-if="showProperties('misc-selector') && !chart.type.includes('mix')"
|
||||
name="size"
|
||||
:title="t('visualization.component_size')"
|
||||
>
|
||||
<misc-selector
|
||||
:property-inner="propertyInnerAll['misc-selector']"
|
||||
:themes="themes"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:quota-fields="props.quotaData"
|
||||
:mobile-in-pc="mobileInPc"
|
||||
@onMiscChange="onMiscChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
v-if="showProperties('misc-style-selector')"
|
||||
name="size"
|
||||
:title="selectorSpec['misc-style-selector']?.title || t('chart.tooltip_axis')"
|
||||
>
|
||||
<misc-style-selector
|
||||
:property-inner="propertyInnerAll['misc-style-selector']"
|
||||
:themes="themes"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:quota-fields="props.quotaData"
|
||||
@onChangeMiscStyleForm="onChangeMiscStyleForm"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
v-if="showProperties('label-selector')"
|
||||
v-model="chart.customAttr.label.show"
|
||||
:change-model="chart.customAttr.label"
|
||||
@modelChange="val => onLabelChange({ data: val }, 'show')"
|
||||
:title="t('chart.label')"
|
||||
name="label"
|
||||
>
|
||||
<label-selector
|
||||
:property-inner="propertyInnerAll['label-selector']"
|
||||
:themes="themes"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:all-fields="props.allFields"
|
||||
@onLabelChange="onLabelChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<collapse-switch-item
|
||||
v-if="showProperties('tooltip-selector')"
|
||||
v-model="chart.customAttr.tooltip.show"
|
||||
:themes="themes"
|
||||
:change-model="chart.customAttr.tooltip"
|
||||
:title="t('chart.tooltip')"
|
||||
:show-switch="showPropertySwitch('tooltip-selector', 'show')"
|
||||
name="tooltip"
|
||||
@modelChange="val => onTooltipChange({ data: val }, 'show')"
|
||||
>
|
||||
<tooltip-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['tooltip-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
:all-fields="props.allFields"
|
||||
@onTooltipChange="onTooltipChange"
|
||||
@onExtTooltipChange="onExtTooltipChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<collapse-switch-item
|
||||
v-if="showProperties('table-header-selector')"
|
||||
v-model="chart.customAttr.tableHeader.showTableHeader"
|
||||
:change-model="chart.customAttr.tableHeader"
|
||||
:effect="themes"
|
||||
:title="t('chart.table_header')"
|
||||
:show-switch="showPropertySwitch('table-header-selector', 'showTableHeader')"
|
||||
name="tableHeader"
|
||||
@modelChange="val => onTableHeaderChange(val, 'showTableHeader')"
|
||||
>
|
||||
<table-header-selector
|
||||
:property-inner="propertyInnerAll['table-header-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onTableHeaderChange="onTableHeaderChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="tableCell"
|
||||
:title="t('chart.table_cell')"
|
||||
v-if="showProperties('table-cell-selector')"
|
||||
>
|
||||
<table-cell-selector
|
||||
:property-inner="propertyInnerAll['table-cell-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onTableCellChange="onTableCellChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="tableTotal"
|
||||
:title="t('chart.table_total')"
|
||||
v-if="showProperties('table-total-selector')"
|
||||
>
|
||||
<table-total-selector
|
||||
:property-inner="propertyInnerAll['table-total-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onTableTotalChange="onTableTotalChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="quadrant"
|
||||
:title="t('chart.quadrant')"
|
||||
v-if="showProperties('quadrant-selector')"
|
||||
>
|
||||
<quadrant-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['quadrant-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onChangeQuadrantForm="onChangeQuadrantForm"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="flowMapLineSelector"
|
||||
:title="t('chart.line')"
|
||||
v-if="showProperties('flow-map-line-selector')"
|
||||
>
|
||||
<flow-map-line-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['flow-map-line-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onChangeFlowMapLineForm="onChangeFlowMapLineForm"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="flowMapPointSelector"
|
||||
:title="t('visualization.component_annotation')"
|
||||
v-if="showProperties('flow-map-point-selector')"
|
||||
>
|
||||
<flow-map-point-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['flow-map-point-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onChangeFlowMapPointForm="onChangeFlowMapPointForm"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
:change-model="chart.customAttr.tooltip"
|
||||
:title="t('chart.tooltip')"
|
||||
:show-switch="showPropertySwitch('tooltip-selector', 'show')"
|
||||
name="tooltip"
|
||||
@modelChange="val => onTooltipChange({ data: val }, 'show')"
|
||||
>
|
||||
<tooltip-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['tooltip-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
:all-fields="props.allFields"
|
||||
@onTooltipChange="onTooltipChange"
|
||||
@onExtTooltipChange="onExtTooltipChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<collapse-switch-item
|
||||
v-if="showProperties('table-header-selector')"
|
||||
v-model="chart.customAttr.tableHeader.showTableHeader"
|
||||
:change-model="chart.customAttr.tableHeader"
|
||||
:effect="themes"
|
||||
:title="t('chart.table_header')"
|
||||
:show-switch="showPropertySwitch('table-header-selector', 'showTableHeader')"
|
||||
name="tableHeader"
|
||||
@modelChange="val => onTableHeaderChange(val, 'showTableHeader')"
|
||||
>
|
||||
<table-header-selector
|
||||
:property-inner="propertyInnerAll['table-header-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onTableHeaderChange="onTableHeaderChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="tableCell"
|
||||
:title="t('chart.table_cell')"
|
||||
v-if="showProperties('table-cell-selector')"
|
||||
>
|
||||
<table-cell-selector
|
||||
:property-inner="propertyInnerAll['table-cell-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onTableCellChange="onTableCellChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="tableTotal"
|
||||
:title="t('chart.table_total')"
|
||||
v-if="showProperties('table-total-selector')"
|
||||
>
|
||||
<table-total-selector
|
||||
:property-inner="propertyInnerAll['table-total-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onTableTotalChange="onTableTotalChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="quadrant"
|
||||
:title="t('chart.quadrant')"
|
||||
v-if="showProperties('quadrant-selector')"
|
||||
>
|
||||
<quadrant-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['quadrant-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onChangeQuadrantForm="onChangeQuadrantForm"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="flowMapLineSelector"
|
||||
:title="t('chart.line')"
|
||||
v-if="showProperties('flow-map-line-selector')"
|
||||
>
|
||||
<flow-map-line-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['flow-map-line-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onChangeFlowMapLineForm="onChangeFlowMapLineForm"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
:effect="themes"
|
||||
name="flowMapPointSelector"
|
||||
:title="t('visualization.component_annotation')"
|
||||
v-if="showProperties('flow-map-point-selector')"
|
||||
>
|
||||
<flow-map-point-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['flow-map-point-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onChangeFlowMapPointForm="onChangeFlowMapPointForm"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
||||
<el-collapse v-model="state.styleActiveNames" class="style-collapse">
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
v-if="showProperties('x-axis-selector')"
|
||||
v-model="chart.customStyle.xAxis.show"
|
||||
:change-model="chart.customStyle.xAxis"
|
||||
@modelChange="val => onChangeXAxisForm(val, 'show')"
|
||||
name="xAxis"
|
||||
:title="selectorSpec['x-axis-selector']?.title || t('chart.xAxis')"
|
||||
>
|
||||
<x-axis-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['x-axis-selector']"
|
||||
<el-collapse v-model="state.styleActiveNames" class="style-collapse">
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onChangeXAxisForm="onChangeXAxisForm"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
v-if="showProperties('y-axis-selector')"
|
||||
v-model="chart.customStyle.yAxis.show"
|
||||
:change-model="chart.customStyle.yAxis"
|
||||
@modelChange="val => onChangeYAxisForm(val, 'show')"
|
||||
name="yAxis"
|
||||
:title="t('chart.yAxis')"
|
||||
>
|
||||
<y-axis-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['y-axis-selector']"
|
||||
v-if="showProperties('x-axis-selector')"
|
||||
v-model="chart.customStyle.xAxis.show"
|
||||
:change-model="chart.customStyle.xAxis"
|
||||
@modelChange="val => onChangeXAxisForm(val, 'show')"
|
||||
name="xAxis"
|
||||
:title="selectorSpec['x-axis-selector']?.title || t('chart.xAxis')"
|
||||
>
|
||||
<x-axis-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['x-axis-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onChangeXAxisForm="onChangeXAxisForm"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onChangeYAxisForm="onChangeYAxisForm"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
v-if="showProperties('y-axis-selector')"
|
||||
v-model="chart.customStyle.yAxis.show"
|
||||
:change-model="chart.customStyle.yAxis"
|
||||
@modelChange="val => onChangeYAxisForm(val, 'show')"
|
||||
name="yAxis"
|
||||
:title="t('chart.yAxis')"
|
||||
>
|
||||
<y-axis-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['y-axis-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onChangeYAxisForm="onChangeYAxisForm"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
v-if="showProperties('dual-y-axis-selector')"
|
||||
v-model="chart.customStyle.yAxis.show"
|
||||
:change-model="chart.customStyle.yAxis"
|
||||
@modelChange="val => onChangeYAxisForm(val, 'show')"
|
||||
name="yAxis"
|
||||
:title="selectorSpec['dual-y-axis-selector']?.title ?? t('chart.yAxis')"
|
||||
>
|
||||
<dual-y-axis-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['dual-y-axis-selector']"
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onChangeYAxisForm="onChangeYAxisForm"
|
||||
@onChangeYAxisExtForm="onChangeYAxisExtForm"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
v-if="showProperties('dual-y-axis-selector')"
|
||||
v-model="chart.customStyle.yAxis.show"
|
||||
:change-model="chart.customStyle.yAxis"
|
||||
@modelChange="val => onChangeYAxisForm(val, 'show')"
|
||||
name="yAxis"
|
||||
:title="selectorSpec['dual-y-axis-selector']?.title ?? t('chart.yAxis')"
|
||||
>
|
||||
<dual-y-axis-selector
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['dual-y-axis-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onChangeYAxisForm="onChangeYAxisForm"
|
||||
@onChangeYAxisExtForm="onChangeYAxisExtForm"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
v-if="showProperties('summary-selector')"
|
||||
v-model="chart.customAttr.basicStyle.showSummary"
|
||||
:change-model="chart.customAttr.basicStyle"
|
||||
@modelChange="val => onBasicStyleChange({ data: val }, 'showSummary')"
|
||||
:title="t('chart.table_summary')"
|
||||
name="summary"
|
||||
>
|
||||
<summary-selector
|
||||
:property-inner="propertyInnerAll['summary-selector']"
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
</el-collapse>
|
||||
</el-row>
|
||||
v-if="showProperties('summary-selector')"
|
||||
v-model="chart.customAttr.basicStyle.showSummary"
|
||||
:change-model="chart.customAttr.basicStyle"
|
||||
@modelChange="val => onBasicStyleChange({ data: val }, 'showSummary')"
|
||||
:title="t('chart.table_summary')"
|
||||
name="summary"
|
||||
>
|
||||
<summary-selector
|
||||
:property-inner="propertyInnerAll['summary-selector']"
|
||||
:themes="themes"
|
||||
:chart="chart"
|
||||
@onBasicStyleChange="onBasicStyleChange"
|
||||
/>
|
||||
</collapse-switch-item>
|
||||
</el-collapse>
|
||||
</el-row>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-row>
|
||||
</template>
|
||||
@@ -700,7 +706,6 @@ span {
|
||||
}
|
||||
|
||||
.attr-style {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -293,481 +293,490 @@ const onPlaceholderChange = () => {
|
||||
|
||||
<template>
|
||||
<div class="attr-style">
|
||||
<input
|
||||
id="input"
|
||||
ref="files"
|
||||
type="file"
|
||||
accept=".jpeg,.jpg,.png,.gif,.svg"
|
||||
hidden
|
||||
@click="
|
||||
e => {
|
||||
e.target.value = ''
|
||||
}
|
||||
"
|
||||
@change="reUpload"
|
||||
/>
|
||||
<el-row class="de-collapse-style">
|
||||
<el-collapse v-model="styleActiveNames" class="style-collapse">
|
||||
<el-collapse-item :effect="themes" name="basicStyle" :title="t('chart.basic_style')">
|
||||
<el-form size="small" @keydown.stop.prevent.enter label-position="top">
|
||||
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
:effect="themes"
|
||||
size="small"
|
||||
v-model="chart.customStyle.component.titleShow"
|
||||
>
|
||||
{{ t('chart.show') + t('chart.title') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-input
|
||||
:effect="themes"
|
||||
:disabled="!chart.customStyle.component.titleShow"
|
||||
v-model.lazy="chart.customStyle.component.title"
|
||||
@change="onTitleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('components.title_color')"
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
v-model="chart.customStyle.component.titleColor"
|
||||
:trigger-width="204"
|
||||
show-alpha
|
||||
:disabled="!chart.customStyle.component.titleShow"
|
||||
is-custom
|
||||
:predefine="COLOR_PANEL"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="!mobileInPc && isDashboard() && isMainCanvas(element.canvasId)"
|
||||
class="form-item margin-bottom-8"
|
||||
:class="'form-item-' + themes"
|
||||
:label="t('visualization.query_position')"
|
||||
>
|
||||
<el-radio-group
|
||||
v-model="element.freeze"
|
||||
:effect="themes"
|
||||
size="small"
|
||||
@change="onFreezeChange"
|
||||
>
|
||||
<el-radio :effect="themes" style="min-width: 80px" :value="true">{{
|
||||
t('visualization.to_top')
|
||||
}}</el-radio>
|
||||
<el-radio :effect="themes" style="min-width: 80px" :value="false">{{
|
||||
t('visualization.default')
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<background-overall-common
|
||||
:common-background-pop="commonBackgroundPop"
|
||||
:themes="themes"
|
||||
@onBackgroundChange="onBackgroundChangeV2"
|
||||
component-position="component"
|
||||
/>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :effect="themes" name="addition" :title="t('v_query.query_condition')">
|
||||
<el-form
|
||||
size="small"
|
||||
@keydown.stop.prevent.enter
|
||||
label-position="top"
|
||||
style="padding-bottom: 8px"
|
||||
>
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="t('visualization.board')"
|
||||
class="form-item w100"
|
||||
:class="'form-item-' + themes"
|
||||
<el-scrollbar>
|
||||
<input
|
||||
id="input"
|
||||
ref="files"
|
||||
type="file"
|
||||
accept=".jpeg,.jpg,.png,.gif,.svg"
|
||||
hidden
|
||||
@click="
|
||||
e => {
|
||||
e.target.value = ''
|
||||
}
|
||||
"
|
||||
@change="reUpload"
|
||||
/>
|
||||
<el-row class="de-collapse-style">
|
||||
<el-collapse v-model="styleActiveNames" class="style-collapse">
|
||||
<el-collapse-item :effect="themes" name="basicStyle" :title="t('chart.basic_style')">
|
||||
<el-form size="small" @keydown.stop.prevent.enter label-position="top">
|
||||
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
:effect="themes"
|
||||
size="small"
|
||||
v-model="chart.customStyle.component.titleShow"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
:trigger-width="106"
|
||||
is-custom
|
||||
show-alpha
|
||||
v-model="chart.customStyle.component.borderColor"
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="t('chart.background')"
|
||||
class="form-item w100"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
:trigger-width="106"
|
||||
is-custom
|
||||
show-alpha
|
||||
v-model="chart.customStyle.component.bgColor"
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item
|
||||
:effect="themes"
|
||||
class="form-item"
|
||||
:label="t('visualization.query_condition_space')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="chart.customStyle.component.queryConditionSpacing"
|
||||
:min="0"
|
||||
:effect="themes"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:effect="themes"
|
||||
class="form-item"
|
||||
:label="t('visualization.query_condition_height')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="chart.customStyle.component.queryConditionHeight"
|
||||
:min="32"
|
||||
:effect="themes"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
:effect="themes"
|
||||
size="small"
|
||||
@change="handleCurrentPlaceholderCustomChange"
|
||||
v-model="chart.customStyle.component.placeholderShow"
|
||||
{{ t('chart.show') + t('chart.title') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-input
|
||||
:effect="themes"
|
||||
:disabled="!chart.customStyle.component.titleShow"
|
||||
v-model.lazy="chart.customStyle.component.title"
|
||||
@change="onTitleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('components.title_color')"
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
{{ t('v_query.custom_condition_style') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('visualization.text_html')"
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<div style="display: flex; align-items: center; width: 100%">
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
:trigger-width="56"
|
||||
style="max-width: 56px; min-width: 56px"
|
||||
is-custom
|
||||
v-model="chart.customStyle.component.titleColor"
|
||||
:trigger-width="204"
|
||||
show-alpha
|
||||
v-model="chart.customStyle.component.text"
|
||||
:disabled="!chart.customStyle.component.placeholderShow"
|
||||
@change="handleCurrentPlaceholderCustomChange"
|
||||
:predefine="predefineColors"
|
||||
:disabled="!chart.customStyle.component.titleShow"
|
||||
is-custom
|
||||
:predefine="COLOR_PANEL"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="!mobileInPc && isDashboard() && isMainCanvas(element.canvasId)"
|
||||
class="form-item margin-bottom-8"
|
||||
:class="'form-item-' + themes"
|
||||
:label="t('visualization.query_position')"
|
||||
>
|
||||
<el-radio-group
|
||||
v-model="element.freeze"
|
||||
:effect="themes"
|
||||
size="small"
|
||||
@change="onFreezeChange"
|
||||
>
|
||||
<el-radio :effect="themes" style="min-width: 80px" :value="true">{{
|
||||
t('visualization.to_top')
|
||||
}}</el-radio>
|
||||
<el-radio :effect="themes" style="min-width: 80px" :value="false">{{
|
||||
t('visualization.default')
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<background-overall-common
|
||||
:common-background-pop="commonBackgroundPop"
|
||||
:themes="themes"
|
||||
@onBackgroundChange="onBackgroundChangeV2"
|
||||
component-position="component"
|
||||
/>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item :effect="themes" name="addition" :title="t('v_query.query_condition')">
|
||||
<el-form
|
||||
size="small"
|
||||
@keydown.stop.prevent.enter
|
||||
label-position="top"
|
||||
style="padding-bottom: 8px"
|
||||
>
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="t('visualization.board')"
|
||||
class="form-item w100"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
:trigger-width="106"
|
||||
is-custom
|
||||
show-alpha
|
||||
v-model="chart.customStyle.component.borderColor"
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="t('chart.background')"
|
||||
class="form-item w100"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
:trigger-width="106"
|
||||
is-custom
|
||||
show-alpha
|
||||
v-model="chart.customStyle.component.bgColor"
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item
|
||||
:effect="themes"
|
||||
class="form-item"
|
||||
:label="t('visualization.query_condition_space')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="chart.customStyle.component.placeholderSize"
|
||||
@change="handleCurrentPlaceholderCustomChange"
|
||||
:min="10"
|
||||
:max="40"
|
||||
:disabled="!chart.customStyle.component.placeholderShow"
|
||||
style="margin-left: 8px"
|
||||
step-strictly
|
||||
v-model="chart.customStyle.component.queryConditionSpacing"
|
||||
:min="0"
|
||||
:effect="themes"
|
||||
controls-position="right"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; width: 100%; margin-top: 8px">
|
||||
<el-select
|
||||
v-model="currentPlaceholder"
|
||||
:disabled="!chart.customStyle.component.placeholderShow"
|
||||
@change="handleCurrentPlaceholder"
|
||||
:effect="themes"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in element.propValue"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('visualization.tips_world')"
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-input
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:effect="themes"
|
||||
@change="onPlaceholderChange"
|
||||
:disabled="!chart.customStyle.component.placeholderShow || !currentPlaceholder"
|
||||
v-model.lazy="currentSearch.placeholder"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('v_query.query_condition_width')"
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-input-number
|
||||
:effect="themes"
|
||||
:min="100"
|
||||
controls-position="right"
|
||||
@change="onPlaceholderChange"
|
||||
:disabled="!chart.customStyle.component.placeholderShow || !currentPlaceholder"
|
||||
v-model.lazy="currentSearch.queryConditionWidth"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
v-model="chart.customStyle.component.labelShow"
|
||||
name="legend"
|
||||
:title="t('visualization.query_condition_name')"
|
||||
>
|
||||
<el-form
|
||||
:class="!chart.customStyle.component.labelShow && 'is-disabled'"
|
||||
:disabled="!chart.customStyle.component.labelShow"
|
||||
label-position="top"
|
||||
size="small"
|
||||
style="padding-bottom: 8px"
|
||||
>
|
||||
<el-form-item
|
||||
:effect="themes"
|
||||
class="form-item"
|
||||
:label="t('visualization.position_adjust')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-radio-group :effect="themes" v-model="chart.customStyle.component.layout">
|
||||
<el-radio value="vertical" :effect="themes">
|
||||
{{ t('visualization.condition_top') }}
|
||||
</el-radio>
|
||||
<el-radio value="horizontal" :effect="themes">
|
||||
{{ t('visualization.condition_left') }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('chart.textColor')"
|
||||
class="form-item margin-bottom-8"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
is-custom
|
||||
show-alpha
|
||||
style="width: 50px"
|
||||
v-model="chart.customStyle.component.labelColor"
|
||||
:predefine="predefineColors"
|
||||
/><el-tooltip
|
||||
:content="t('visualization.font_size')"
|
||||
:effect="toolTip"
|
||||
placement="top"
|
||||
class="form-item"
|
||||
:label="t('visualization.query_condition_height')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-select
|
||||
style="width: 80px; margin: 0 8px"
|
||||
<el-input-number
|
||||
v-model="chart.customStyle.component.queryConditionHeight"
|
||||
:min="32"
|
||||
:effect="themes"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
:effect="themes"
|
||||
v-model="chart.customStyle.component.fontSize"
|
||||
:placeholder="t('chart.text_fontsize')"
|
||||
size="small"
|
||||
@change="handleCurrentPlaceholderCustomChange"
|
||||
v-model="chart.customStyle.component.placeholderShow"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in fontSizeList"
|
||||
:key="option.value"
|
||||
:label="option.name"
|
||||
:value="option.value"
|
||||
{{ t('v_query.custom_condition_style') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('visualization.text_html')"
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<div style="display: flex; align-items: center; width: 100%">
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
:trigger-width="56"
|
||||
style="max-width: 56px; min-width: 56px"
|
||||
is-custom
|
||||
show-alpha
|
||||
v-model="chart.customStyle.component.text"
|
||||
:disabled="!chart.customStyle.component.placeholderShow"
|
||||
@change="handleCurrentPlaceholderCustomChange"
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
<el-input-number
|
||||
v-model="chart.customStyle.component.placeholderSize"
|
||||
@change="handleCurrentPlaceholderCustomChange"
|
||||
:min="10"
|
||||
:max="40"
|
||||
:disabled="!chart.customStyle.component.placeholderShow"
|
||||
style="margin-left: 8px"
|
||||
step-strictly
|
||||
:effect="themes"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-select>
|
||||
</el-tooltip>
|
||||
<el-tooltip :effect="toolTip" placement="bottom">
|
||||
<template #content>
|
||||
{{ t('chart.bolder') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: chart.customStyle.component.fontWeight === 'bold'
|
||||
}"
|
||||
style="margin-right: 8px"
|
||||
@click="checkBold('fontWeight')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip :effect="toolTip" placement="bottom">
|
||||
<template #content>
|
||||
{{ t('chart.italic') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: chart.customStyle.component.fontStyle === 'italic'
|
||||
}"
|
||||
@click="checkItalic('fontStyle')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_italic_outlined"
|
||||
><icon_italic_outlined class="svg-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:effect="themes"
|
||||
class="form-item"
|
||||
:label="t('visualization.query_name_space2')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="chart.customStyle.component.nameboxSpacing"
|
||||
:min="0"
|
||||
:max="50"
|
||||
:effect="themes"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</collapse-switch-item>
|
||||
<el-collapse-item :effect="themes" name="button" :title="t('commons.button')">
|
||||
<el-form
|
||||
size="small"
|
||||
@keydown.stop.prevent.enter
|
||||
label-position="top"
|
||||
style="padding-bottom: 8px"
|
||||
>
|
||||
<el-form-item
|
||||
:effect="themes"
|
||||
class="form-item"
|
||||
:label="t('visualization.show_button')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-checkbox-group :effect="themes" v-model="chart.customStyle.component.btnList">
|
||||
<el-checkbox class="checkbox-with_icon" :effect="themes" size="small" label="sure">
|
||||
{{ t('commons.adv_search.search') }}
|
||||
<el-tooltip
|
||||
:effect="toolTip"
|
||||
:content="t('visualization.query_tips')"
|
||||
placement="top"
|
||||
<div style="display: flex; align-items: center; width: 100%; margin-top: 8px">
|
||||
<el-select
|
||||
v-model="currentPlaceholder"
|
||||
:disabled="!chart.customStyle.component.placeholderShow"
|
||||
@change="handleCurrentPlaceholder"
|
||||
:effect="themes"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
|
||||
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</el-checkbox>
|
||||
<br />
|
||||
<el-checkbox style="margin-top: 8px" :effect="themes" size="small" label="clear">
|
||||
{{ t('commons.clear') }}
|
||||
</el-checkbox>
|
||||
<br />
|
||||
<el-checkbox style="margin-top: 8px" :effect="themes" size="small" label="reset">
|
||||
{{ t('commons.adv_search.reset') }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
:label="t('visualization.button_color')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
:trigger-width="108"
|
||||
is-custom
|
||||
show-alpha
|
||||
v-model="chart.customStyle.component.btnColor"
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('visualization.button_text')"
|
||||
class="form-item margin-bottom-8"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
is-custom
|
||||
show-alpha
|
||||
v-model="chart.customStyle.component.labelColorBtn"
|
||||
:predefine="predefineColors"
|
||||
/><el-tooltip
|
||||
:content="t('visualization.font_size')"
|
||||
:effect="toolTip"
|
||||
placement="top"
|
||||
<el-option
|
||||
v-for="item in element.propValue"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('visualization.tips_world')"
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-select
|
||||
style="width: 80px; margin: 0 8px"
|
||||
<el-input
|
||||
:effect="themes"
|
||||
v-model="chart.customStyle.component.fontSizeBtn"
|
||||
:placeholder="t('chart.text_fontsize')"
|
||||
size="small"
|
||||
@change="onPlaceholderChange"
|
||||
:disabled="!chart.customStyle.component.placeholderShow || !currentPlaceholder"
|
||||
v-model.lazy="currentSearch.placeholder"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('v_query.query_condition_width')"
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-input-number
|
||||
:effect="themes"
|
||||
:min="100"
|
||||
controls-position="right"
|
||||
@change="onPlaceholderChange"
|
||||
:disabled="!chart.customStyle.component.placeholderShow || !currentPlaceholder"
|
||||
v-model.lazy="currentSearch.queryConditionWidth"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
<collapse-switch-item
|
||||
:themes="themes"
|
||||
v-model="chart.customStyle.component.labelShow"
|
||||
name="legend"
|
||||
:title="t('visualization.query_condition_name')"
|
||||
>
|
||||
<el-form
|
||||
:class="!chart.customStyle.component.labelShow && 'is-disabled'"
|
||||
:disabled="!chart.customStyle.component.labelShow"
|
||||
label-position="top"
|
||||
size="small"
|
||||
style="padding-bottom: 8px"
|
||||
>
|
||||
<el-form-item
|
||||
:effect="themes"
|
||||
class="form-item"
|
||||
:label="t('visualization.position_adjust')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-radio-group :effect="themes" v-model="chart.customStyle.component.layout">
|
||||
<el-radio value="vertical" :effect="themes">
|
||||
{{ t('visualization.condition_top') }}
|
||||
</el-radio>
|
||||
<el-radio value="horizontal" :effect="themes">
|
||||
{{ t('visualization.condition_left') }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('chart.textColor')"
|
||||
class="form-item margin-bottom-8"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
is-custom
|
||||
show-alpha
|
||||
style="width: 50px"
|
||||
v-model="chart.customStyle.component.labelColor"
|
||||
:predefine="predefineColors"
|
||||
/><el-tooltip
|
||||
:content="t('visualization.font_size')"
|
||||
:effect="toolTip"
|
||||
placement="top"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in fontSizeList"
|
||||
:key="option.value"
|
||||
:label="option.name"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-tooltip>
|
||||
<el-tooltip :effect="toolTip" placement="bottom">
|
||||
<template #content>
|
||||
{{ t('chart.bolder') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: chart.customStyle.component.fontWeightBtn === 'bold'
|
||||
}"
|
||||
style="margin-right: 8px"
|
||||
@click="checkBold('fontWeightBtn')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-select
|
||||
style="width: 80px; margin: 0 8px"
|
||||
:effect="themes"
|
||||
v-model="chart.customStyle.component.fontSize"
|
||||
:placeholder="t('chart.text_fontsize')"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in fontSizeList"
|
||||
:key="option.value"
|
||||
:label="option.name"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-tooltip>
|
||||
<el-tooltip :effect="toolTip" placement="bottom">
|
||||
<template #content>
|
||||
{{ t('chart.bolder') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: chart.customStyle.component.fontWeight === 'bold'
|
||||
}"
|
||||
style="margin-right: 8px"
|
||||
@click="checkBold('fontWeight')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip :effect="toolTip" placement="bottom">
|
||||
<template #content>
|
||||
{{ t('chart.italic') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: chart.customStyle.component.fontStyleBtn === 'italic'
|
||||
}"
|
||||
@click="checkItalic('fontStyleBtn')"
|
||||
<el-tooltip :effect="toolTip" placement="bottom">
|
||||
<template #content>
|
||||
{{ t('chart.italic') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: chart.customStyle.component.fontStyle === 'italic'
|
||||
}"
|
||||
@click="checkItalic('fontStyle')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_italic_outlined"
|
||||
><icon_italic_outlined class="svg-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:effect="themes"
|
||||
class="form-item"
|
||||
:label="t('visualization.query_name_space2')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="chart.customStyle.component.nameboxSpacing"
|
||||
:min="0"
|
||||
:max="50"
|
||||
:effect="themes"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</collapse-switch-item>
|
||||
<el-collapse-item :effect="themes" name="button" :title="t('commons.button')">
|
||||
<el-form
|
||||
size="small"
|
||||
@keydown.stop.prevent.enter
|
||||
label-position="top"
|
||||
style="padding-bottom: 8px"
|
||||
>
|
||||
<el-form-item
|
||||
:effect="themes"
|
||||
class="form-item"
|
||||
:label="t('visualization.show_button')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-checkbox-group :effect="themes" v-model="chart.customStyle.component.btnList">
|
||||
<el-checkbox
|
||||
class="checkbox-with_icon"
|
||||
:effect="themes"
|
||||
size="small"
|
||||
label="sure"
|
||||
>
|
||||
{{ t('commons.adv_search.search') }}
|
||||
<el-tooltip
|
||||
:effect="toolTip"
|
||||
:content="t('visualization.query_tips')"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
|
||||
<Icon name="icon_info_outlined"
|
||||
><icon_info_outlined class="svg-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</el-checkbox>
|
||||
<br />
|
||||
<el-checkbox style="margin-top: 8px" :effect="themes" size="small" label="clear">
|
||||
{{ t('commons.clear') }}
|
||||
</el-checkbox>
|
||||
<br />
|
||||
<el-checkbox style="margin-top: 8px" :effect="themes" size="small" label="reset">
|
||||
{{ t('commons.adv_search.reset') }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
:label="t('visualization.button_color')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
:trigger-width="108"
|
||||
is-custom
|
||||
show-alpha
|
||||
v-model="chart.customStyle.component.btnColor"
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="t('visualization.button_text')"
|
||||
class="form-item margin-bottom-8"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
is-custom
|
||||
show-alpha
|
||||
v-model="chart.customStyle.component.labelColorBtn"
|
||||
:predefine="predefineColors"
|
||||
/><el-tooltip
|
||||
:content="t('visualization.font_size')"
|
||||
:effect="toolTip"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_italic_outlined"
|
||||
><icon_italic_outlined class="svg-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-row>
|
||||
<el-select
|
||||
style="width: 80px; margin: 0 8px"
|
||||
:effect="themes"
|
||||
v-model="chart.customStyle.component.fontSizeBtn"
|
||||
:placeholder="t('chart.text_fontsize')"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in fontSizeList"
|
||||
:key="option.value"
|
||||
:label="option.name"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-tooltip>
|
||||
<el-tooltip :effect="toolTip" placement="bottom">
|
||||
<template #content>
|
||||
{{ t('chart.bolder') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: chart.customStyle.component.fontWeightBtn === 'bold'
|
||||
}"
|
||||
style="margin-right: 8px"
|
||||
@click="checkBold('fontWeightBtn')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_bold_outlined"><icon_bold_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip :effect="toolTip" placement="bottom">
|
||||
<template #content>
|
||||
{{ t('chart.italic') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: chart.customStyle.component.fontStyleBtn === 'italic'
|
||||
}"
|
||||
@click="checkItalic('fontStyleBtn')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_italic_outlined"
|
||||
><icon_italic_outlined class="svg-icon"
|
||||
/></Icon>
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-row>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -779,7 +788,6 @@ const onPlaceholderChange = () => {
|
||||
}
|
||||
|
||||
.attr-style {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
|
||||
@@ -4992,6 +4992,7 @@ span {
|
||||
:deep(.ed-collapse) {
|
||||
width: 100%;
|
||||
border-top: unset;
|
||||
border-bottom: unset;
|
||||
}
|
||||
:deep(.ed-form-item) {
|
||||
.ed-radio.ed-radio--small .ed-radio__inner {
|
||||
|
||||
Reference in New Issue
Block a user