Skip to content

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

refactor: 视图样式界面优化

上级 fc4e032e
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 112 行增加 和 49 行删除
frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
浏览文件 @ f2ac1b6a
<template> <template>
<div> <div style="width: 100%">
<div style="width: 100%"> <el-col>
<el-popover <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini" :disabled="param && !hasDataPermission('manage',param.privileges)">
placement="right" <el-form-item :label="$t('chart.color')" class="form-item">
width="400" <el-color-picker v-model="colorForm.color" class="color-picker-style" @change="changeBackgroundStyle" />
trigger="click" </el-form-item>
> <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-col> <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" />
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini"> </el-form-item>
<el-form-item :label="$t('chart.color')" class="form-item"> </el-form>
<colorPicker v-model="colorForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" /> </el-col>
</el-form-item> <!-- <div style="width: 100%">-->
<el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider"> <!-- <el-popover-->
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeBackgroundStyle" /> <!-- placement="right"-->
</el-form-item> <!-- width="400"-->
</el-form> <!-- trigger="click"-->
</el-col> <!-- >-->
<!-- <el-col>-->
<!-- <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">-->
<!-- <el-form-item :label="$t('chart.color')" class="form-item">-->
<!-- <colorPicker v-model="colorForm.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeBackgroundStyle" />-->
<!-- </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="changeBackgroundStyle" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-col>-->
<el-button slot="reference" :disabled="param && !hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.background') }}<i class="el-icon-setting el-icon--right" /></el-button> <!-- <el-button slot="reference" :disabled="param && !hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.background') }}<i class="el-icon-setting el-icon&#45;&#45;right" /></el-button>-->
</el-popover> <!-- </el-popover>-->
</div> <!-- </div>-->
</div> </div>
</template> </template>
...@@ -100,4 +110,8 @@ export default { ...@@ -100,4 +110,8 @@ export default {
.el-form-item{ .el-form-item{
margin-bottom: 6px; margin-bottom: 6px;
} }
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style> </style>
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ f2ac1b6a
...@@ -330,37 +330,73 @@ ...@@ -330,37 +330,73 @@
</el-row> </el-row>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 360px;"> <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 360px;">
<div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;" class="attr-style"> <el-row class="view-panel">
<el-row class="padding-lr"> <div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;" class="attr-style">
<span>{{ $t('chart.style_priority') }}</span> <el-row class="padding-lr">
<el-row> <span>{{ $t('chart.style_priority') }}</span>
<el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save"> <el-row>
<el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio> <el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
<el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio> <el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
</el-radio-group> <el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
</el-radio-group>
</el-row>
</el-row> </el-row>
</el-row>
<el-row class="padding-lr">
<span>{{ $t('chart.shape_attr') }}</span>
<el-row> <el-row>
<color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" /> <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
<size-selector v-show="chart.type !== 'map'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" /> <el-collapse v-model="attrActiveNames" class="style-collapse">
<label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" /> <el-collapse-item name="color" :title="$t('chart.color')">
<tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" /> <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
</el-collapse-item>
<el-collapse-item v-show="chart.type !== 'map'" name="size" :title="$t('chart.size')">
<size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
</el-collapse-item>
<el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text')" name="label" :title="$t('chart.label')">
<label-selector :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
</el-collapse-item>
<el-collapse-item v-show="!view.type.includes('table') && !view.type.includes('text')" name="tooltip" :title="$t('chart.tooltip')">
<tooltip-selector :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
</el-collapse-item>
</el-collapse>
<!-- <el-row>-->
<!-- <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />-->
<!-- <size-selector v-show="chart.type !== 'map'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />-->
<!-- <label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />-->
<!-- <tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />-->
<!-- </el-row>-->
</el-row> </el-row>
</el-row>
<el-row class="padding-lr">
<span>{{ $t('chart.module_style') }}</span>
<el-row> <el-row>
<x-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" /> <span class="padding-lr">{{ $t('chart.module_style') }}</span>
<y-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" /> <el-collapse v-model="styleActiveNames" class="style-collapse">
<split-selector v-show="view.type && view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" /> <el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" name="xAxis" :title="$t('chart.xAxis')">
<title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" /> <x-axis-selector :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<legend-selector v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" /> </el-collapse-item>
<background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" /> <el-collapse-item v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" name="yAxis" :title="$t('chart.yAxis')">
<y-axis-selector :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
</el-collapse-item>
<el-collapse-item v-show="view.type && view.type.includes('radar')" name="split" :title="$t('chart.split')">
<split-selector :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
</el-collapse-item>
<el-collapse-item name="title" :title="$t('chart.title')">
<title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
</el-collapse-item>
<el-collapse-item v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" name="legend" :title="$t('chart.legend')">
<legend-selector :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
</el-collapse-item>
<el-collapse-item name="background" :title="$t('chart.background')">
<background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
</el-collapse-item>
</el-collapse>
<!-- <el-row>-->
<!-- <x-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />-->
<!-- <y-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />-->
<!-- <split-selector v-show="view.type && view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />-->
<!-- <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
<!-- <legend-selector v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />-->
<!-- <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />-->
<!-- </el-row>-->
</el-row> </el-row>
</el-row> </div>
</div> </el-row>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -610,7 +646,9 @@ export default { ...@@ -610,7 +646,9 @@ export default {
editDsField: false, editDsField: false,
changeDsTitle: '', changeDsTitle: '',
filterItem: {}, filterItem: {},
places: [] places: [],
attrActiveNames: [],
styleActiveNames: []
} }
}, },
computed: { computed: {
...@@ -1452,14 +1490,25 @@ export default { ...@@ -1452,14 +1490,25 @@ export default {
.attr-selector{ .attr-selector{
width:100%; width:100%;
height: 32px; height: 100%;
margin:0 0 6px 0; margin:6px 0;
padding:0 4px; padding:0 4px;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: white background-color: white
} }
.style-collapse>>>.el-collapse-item__content {
padding-bottom: 0!important;
}
.style-collapse>>>.el-collapse-item__header {
height: 34px;
line-height: 34px;
padding: 0 0 0 6px;
font-size: 12px;
font-weight: 400;
}
.disabled-none-cursor{ .disabled-none-cursor{
cursor: not-allowed; cursor: not-allowed;
pointer-events:none; pointer-events:none;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论