Skip to content

D
dataease
Unverified 提交 6700c639 authored 作者: XiaJunjie2020's avatar XiaJunjie2020 提交者： GitHub
浏览文件
操作

Merge pull request #293 from dataease/pr@dev@refactor_视图样式界面调整

refactor: 视图样式界面优化
上级 fc4e032e f2ac1b6a
隐藏空白字符变更
内嵌 并排
正在显示 包含 1370 行增加 和 724 行删除
frontend/src/views/chart/components/component-style/BackgroundColorSelector.vue
浏览文件 @ 6700c639
<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/components/component-style/LegendSelector.vue
浏览文件 @ 6700c639
<template> <template>
<div> <div style="width: 100%">
<div style="width: 100%"> <el-col>
<el-popover <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
v-model="isSetting" <el-form-item :label="$t('chart.show')" class="form-item">
placement="right" <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
width="400" </el-form-item>
trigger="click" <div v-show="legendForm.show">
> <el-form-item :label="$t('chart.icon')" class="form-item">
<el-col> <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
<el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini"> <el-option
<!-- <el-form-item :label="$t('chart.show')" class="form-item">--> v-for="item in iconSymbolOptions"
<!-- <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>--> :key="item.value"
<!-- </el-form-item>--> :label="item.name"
<el-form-item :label="$t('chart.icon')" class="form-item"> :value="item.value"
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle"> />
<el-option </el-select>
v-for="item in iconSymbolOptions" </el-form-item>
:key="item.value" <el-form-item :label="$t('chart.orient')" class="form-item">
:label="item.name" <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
:value="item.value" <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
/> <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
</el-select> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.orient')" class="form-item"> <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle"> <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
<el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button> <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
<el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button> </el-select>
</el-radio-group> </el-form-item>
</el-form-item> <el-form-item :label="$t('chart.text_color')" class="form-item">
<el-form-item :label="$t('chart.text_fontsize')" class="form-item"> <el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" @change="changeLegendStyle" />
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle"> </el-form-item>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <el-form-item :label="$t('chart.text_h_position')" class="form-item">
</el-select> <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
</el-form-item> <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-form-item :label="$t('chart.text_color')" class="form-item"> <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<colorPicker v-model="legendForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLegendStyle" /> <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-form-item> </el-radio-group>
<el-form-item :label="$t('chart.text_h_position')" class="form-item"> </el-form-item>
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle"> <el-form-item :label="$t('chart.text_v_position')" class="form-item">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button> <el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button> <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button> <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
</el-radio-group> <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</el-form-item> </el-radio-group>
<el-form-item :label="$t('chart.text_v_position')" class="form-item"> </el-form-item>
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle"> </div>
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button> </el-form>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button> </el-col>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button> <!-- <div style="width: 100%">-->
</el-radio-group> <!-- <el-popover-->
</el-form-item> <!-- v-model="isSetting"-->
</el-form> <!-- placement="right"-->
</el-col> <!-- width="400"-->
<!-- trigger="click"-->
<!-- >-->
<!-- <el-col>-->
<!-- <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">-->
<!-- &lt;!&ndash; <el-form-item :label="$t('chart.show')" class="form-item">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!-- <el-form-item :label="$t('chart.icon')" class="form-item">-->
<!-- <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">-->
<!-- <el-option-->
<!-- v-for="item in iconSymbolOptions"-->
<!-- :key="item.value"-->
<!-- :label="item.name"-->
<!-- :value="item.value"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.orient')" class="form-item">-->
<!-- <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">-->
<!-- <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>-->
<!-- <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
<!-- <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">-->
<!-- <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.text_color')" class="form-item">-->
<!-- <colorPicker v-model="legendForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLegendStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.text_h_position')" class="form-item">-->
<!-- <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">-->
<!-- <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>-->
<!-- <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>-->
<!-- <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.text_v_position')" class="form-item">-->
<!-- <el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">-->
<!-- <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>-->
<!-- <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>-->
<!-- <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-col>-->
<el-button slot="reference" size="mini" class="shape-item" :disabled="!legendForm.show || !hasDataPermission('manage',param.privileges)"> <!-- <el-button slot="reference" size="mini" class="shape-item" :disabled="!legendForm.show || !hasDataPermission('manage',param.privileges)">-->
{{ $t('chart.legend') }}<i class="el-icon-setting el-icon--right" /> <!-- {{ $t('chart.legend') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
<el-switch <!-- <el-switch-->
v-model="legendForm.show" <!-- v-model="legendForm.show"-->
:disabled="!hasDataPermission('manage',param.privileges)" <!-- :disabled="!hasDataPermission('manage',param.privileges)"-->
class="switch-style" <!-- class="switch-style"-->
@click.stop.native <!-- @click.stop.native-->
@change="changeLegendStyle" <!-- @change="changeLegendStyle"-->
/> <!-- />-->
</el-button> <!-- </el-button>-->
</el-popover> <!-- </el-popover>-->
</div> <!-- </div>-->
</div> </div>
</template> </template>
...@@ -171,4 +218,8 @@ export default { ...@@ -171,4 +218,8 @@ export default {
right: 10px; right: 10px;
margin-top: -4px; margin-top: -4px;
} }
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style> </style>
frontend/src/views/chart/components/component-style/SplitSelector.vue
浏览文件 @ 6700c639
<template> <template>
<div> <div style="width: 100%">
<div style="width: 100%"> <el-col>
<el-popover <el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
placement="right" <el-form-item :label="$t('chart.name')" class="form-item">
width="400" <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
trigger="click" </el-form-item>
> <el-form-item :label="$t('chart.color')" class="form-item">
<el-col> <el-color-picker v-model="splitForm.name.color" class="color-picker-style" @change="changeSplitStyle" />
<el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini"> </el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item"> <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox> <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
</el-form-item> <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
<el-form-item :label="$t('chart.color')" class="form-item"> </el-select>
<colorPicker v-model="splitForm.name.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" /> </el-form-item>
</el-form-item> <el-form-item :label="$t('chart.axis_line')" class="form-item">
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider"> <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle"> </el-form-item>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <el-form-item :label="$t('chart.axis_color')" class="form-item">
</el-select> <el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.axis_line')" class="form-item"> <el-form-item :label="$t('chart.axis_label')" class="form-item">
<el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox> <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.axis_color')" class="form-item"> <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<colorPicker v-model="splitForm.axisLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" /> <el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" @change="changeSplitStyle" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.axis_label')" class="form-item"> <el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
<el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox> <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
</el-form-item> <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
<el-form-item :label="$t('chart.axis_label_color')" class="form-item"> </el-select>
<colorPicker v-model="splitForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" /> </el-form-item>
</el-form-item> <el-form-item :label="$t('chart.split_line')" class="form-item">
<el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider"> <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle"> </el-form-item>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <el-form-item :label="$t('chart.split_color')" class="form-item">
</el-select> <el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" @change="changeSplitStyle" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.split_line')" class="form-item"> <el-form-item :label="$t('chart.shadow')" class="form-item">
<el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox> <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.split_color')" class="form-item"> </el-form>
<colorPicker v-model="splitForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" /> </el-col>
</el-form-item> <!-- <div style="width: 100%">-->
<el-form-item :label="$t('chart.shadow')" class="form-item"> <!-- <el-popover-->
<el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox> <!-- placement="right"-->
</el-form-item> <!-- width="400"-->
</el-form> <!-- trigger="click"-->
</el-col> <!-- >-->
<!-- <el-col>-->
<!-- <el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">-->
<!-- <el-form-item :label="$t('chart.name')" class="form-item">-->
<!-- <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.color')" class="form-item">-->
<!-- <colorPicker v-model="splitForm.name.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">-->
<!-- <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">-->
<!-- <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.axis_line')" class="form-item">-->
<!-- <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.axis_color')" class="form-item">-->
<!-- <colorPicker v-model="splitForm.axisLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.axis_label')" class="form-item">-->
<!-- <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.axis_label_color')" class="form-item">-->
<!-- <colorPicker v-model="splitForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">-->
<!-- <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">-->
<!-- <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.split_line')" class="form-item">-->
<!-- <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.split_color')" class="form-item">-->
<!-- <colorPicker v-model="splitForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.shadow')" class="form-item">-->
<!-- <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-col>-->
<el-button slot="reference" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="shape-item"> <!-- <el-button slot="reference" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">-->
{{ $t('chart.split') }}<i class="el-icon-setting el-icon--right" /> <!-- {{ $t('chart.split') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
</el-button> <!-- </el-button>-->
</el-popover> <!-- </el-popover>-->
</div> <!-- </div>-->
</div> </div>
</template> </template>
...@@ -156,4 +197,8 @@ export default { ...@@ -156,4 +197,8 @@ export default {
right: 10px; right: 10px;
margin-top: -4px; margin-top: -4px;
} }
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style> </style>
frontend/src/views/chart/components/component-style/TitleSelector.vue
浏览文件 @ 6700c639
<template> <template>
<div> <div style="width: 100%">
<div style="width: 100%"> <el-col>
<el-popover <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
v-model="isSetting" <el-form-item :label="$t('chart.show')" class="form-item">
placement="right" <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
width="400" </el-form-item>
trigger="click" <div v-show="titleForm.show">
> <el-form-item :label="$t('chart.title')" class="form-item">
<el-col> <el-input
<el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini"> v-model="titleForm.title"
<!-- <el-form-item :label="$t('chart.show')" class="form-item">--> size="mini"
<!-- <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>--> :placeholder="$t('chart.title')"
<!-- </el-form-item>--> clearable
<el-form-item :label="$t('chart.title')" class="form-item"> @blur="changeTitleStyle"
<el-input @input="inputOnInput($event)"
v-model="titleForm.title" />
size="mini" </el-form-item>
:placeholder="$t('chart.title')" <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
clearable <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
@blur="changeTitleStyle" <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@input="inputOnInput($event)" </el-select>
/> </el-form-item>
</el-form-item> <el-form-item :label="$t('chart.text_color')" class="form-item">
<el-form-item :label="$t('chart.text_fontsize')" class="form-item"> <el-color-picker v-model="titleForm.color" class="color-picker-style" @change="changeTitleStyle" />
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle"> </el-form-item>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <el-form-item :label="$t('chart.text_h_position')" class="form-item">
</el-select> <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
</el-form-item> <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-form-item :label="$t('chart.text_color')" class="form-item"> <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<colorPicker v-model="titleForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTitleStyle" /> <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-form-item> </el-radio-group>
<el-form-item :label="$t('chart.text_h_position')" class="form-item"> </el-form-item>
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle"> <el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button> <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button> <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button> <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
</el-radio-group> <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</el-form-item> </el-radio-group>
<el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item"> </el-form-item>
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle"> <el-form-item :label="$t('chart.text_style')" class="form-item">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button> <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button> <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button> </el-form-item>
</el-radio-group> </div>
</el-form-item> </el-form>
<el-form-item :label="$t('chart.text_style')" class="form-item"> </el-col>
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox> <!-- <div style="width: 100%">-->
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox> <!-- <el-popover-->
</el-form-item> <!-- v-model="isSetting"-->
</el-form> <!-- placement="right"-->
</el-col> <!-- width="400"-->
<!-- trigger="click"-->
<!-- >-->
<!-- <el-col>-->
<!-- <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">-->
<!-- &lt;!&ndash; <el-form-item :label="$t('chart.show')" class="form-item">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!-- <el-form-item :label="$t('chart.title')" class="form-item">-->
<!-- <el-input-->
<!-- v-model="titleForm.title"-->
<!-- size="mini"-->
<!-- :placeholder="$t('chart.title')"-->
<!-- clearable-->
<!-- @blur="changeTitleStyle"-->
<!-- @input="inputOnInput($event)"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
<!-- <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">-->
<!-- <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.text_color')" class="form-item">-->
<!-- <colorPicker v-model="titleForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTitleStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.text_h_position')" class="form-item">-->
<!-- <el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">-->
<!-- <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>-->
<!-- <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>-->
<!-- <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">-->
<!-- <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">-->
<!-- <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>-->
<!-- <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>-->
<!-- <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.text_style')" class="form-item">-->
<!-- <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>-->
<!-- <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-col>-->
<el-button slot="reference" size="mini" class="shape-item" :disabled="!titleForm.show || !hasDataPermission('manage',param.privileges)"> <!-- <el-button slot="reference" size="mini" class="shape-item" :disabled="!titleForm.show || !hasDataPermission('manage',param.privileges)">-->
{{ $t('chart.title') }}<i class="el-icon-setting el-icon--right" /> <!-- {{ $t('chart.title') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
<el-switch <!-- <el-switch-->
v-model="titleForm.show" <!-- v-model="titleForm.show"-->
:disabled="!hasDataPermission('manage',param.privileges)" <!-- :disabled="!hasDataPermission('manage',param.privileges)"-->
class="switch-style" <!-- class="switch-style"-->
@click.stop.native <!-- @click.stop.native-->
@change="changeTitleStyle" <!-- @change="changeTitleStyle"-->
/> <!-- />-->
</el-button> <!-- </el-button>-->
</el-popover> <!-- </el-popover>-->
</div> <!-- </div>-->
</div> </div>
</template> </template>
...@@ -170,4 +215,8 @@ export default { ...@@ -170,4 +215,8 @@ export default {
right: 10px; right: 10px;
margin-top: -4px; margin-top: -4px;
} }
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style> </style>
frontend/src/views/chart/components/component-style/XAxisSelector.vue
浏览文件 @ 6700c639
<template> <template>
<div> <div style="width: 100%">
<div style="width: 100%"> <el-col>
<el-popover <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
v-model="isSetting" <el-form-item :label="$t('chart.show')" class="form-item">
placement="right" <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
width="400" </el-form-item>
trigger="click" <div v-show="axisForm.show">
> <el-form-item :label="$t('chart.position')" class="form-item">
<el-col> <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini"> <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<!-- <el-form-item :label="$t('chart.show')" class="form-item">--> <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
<!-- <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>--> </el-radio-group>
<!-- </el-form-item>--> </el-form-item>
<el-form-item :label="$t('chart.position')" class="form-item"> <el-form-item :label="$t('chart.name')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle"> <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button> </el-form-item>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button> <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
</el-radio-group> <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeXAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeXAxisStyle" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item"> <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" /> <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider"> <el-form-item :label="$t('chart.axis_type')" class="form-item">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" /> <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
</el-radio-group>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item"> </span>
<colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" /> <el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeXAxisStyle" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider"> <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle"> <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-divider /> </span>
<el-form-item :label="$t('chart.axis_show')" class="form-item"> <el-divider />
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox> <el-form-item :label="$t('chart.content_formatter')" class="form-item">
</el-form-item> <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
<span v-show="axisForm.splitLine.show"> </el-form-item>
<el-form-item :label="$t('chart.axis_color')" class="form-item"> </div>
<colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" /> </el-form>
</el-form-item> </el-col>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider"> <!-- <div style="width: 100%">-->
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" /> <!-- <el-popover-->
</el-form-item> <!-- v-model="isSetting"-->
<el-form-item :label="$t('chart.axis_type')" class="form-item"> <!-- placement="right"-->
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle"> <!-- width="400"-->
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button> <!-- trigger="click"-->
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button> <!-- >-->
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button> <!-- <el-col>-->
</el-radio-group> <!-- <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">-->
</el-form-item> <!-- &lt;!&ndash; <el-form-item :label="$t('chart.show')" class="form-item">&ndash;&gt;-->
</span> <!-- &lt;!&ndash; <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>&ndash;&gt;-->
<el-divider /> <!-- &lt;!&ndash; </el-form-item>&ndash;&gt;-->
<el-form-item :label="$t('chart.axis_label_show')" class="form-item"> <!-- <el-form-item :label="$t('chart.position')" class="form-item">-->
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox> <!-- <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">-->
</el-form-item> <!-- <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>-->
<span v-show="axisForm.axisLabel.show"> <!-- <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>-->
<el-form-item :label="$t('chart.axis_label_color')" class="form-item"> <!-- </el-radio-group>-->
<colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" /> <!-- </el-form-item>-->
</el-form-item> <!-- <el-form-item :label="$t('chart.name')" class="form-item">-->
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider"> <!-- <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />-->
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle"> <!-- </el-form-item>-->
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <!-- <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">-->
</el-select> <!-- <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />-->
</el-form-item> <!-- </el-form-item>-->
</span> <!-- <el-form-item :label="$t('chart.axis_name_color')" class="form-item">-->
<el-divider /> <!-- <colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />-->
<el-form-item :label="$t('chart.content_formatter')" class="form-item"> <!-- </el-form-item>-->
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" /> <!-- <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">-->
</el-form-item> <!-- <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">-->
</el-form> <!-- <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
</el-col> <!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-divider />-->
<!-- <el-form-item :label="$t('chart.axis_show')" class="form-item">-->
<!-- <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <span v-show="axisForm.splitLine.show">-->
<!-- <el-form-item :label="$t('chart.axis_color')" class="form-item">-->
<!-- <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.axis_type')" class="form-item">-->
<!-- <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">-->
<!-- <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>-->
<!-- <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>-->
<!-- <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- </span>-->
<!-- <el-divider />-->
<!-- <el-form-item :label="$t('chart.axis_label_show')" class="form-item">-->
<!-- <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <span v-show="axisForm.axisLabel.show">-->
<!-- <el-form-item :label="$t('chart.axis_label_color')" class="form-item">-->
<!-- <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">-->
<!-- <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">-->
<!-- <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </span>-->
<!-- <el-divider />-->
<!-- <el-form-item :label="$t('chart.content_formatter')" class="form-item">-->
<!-- <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-col>-->
<el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show || !hasDataPermission('manage',param.privileges)"> <!-- <el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show || !hasDataPermission('manage',param.privileges)">-->
{{ $t('chart.xAxis') }}<i class="el-icon-setting el-icon--right" /> <!-- {{ $t('chart.xAxis') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
<el-switch <!-- <el-switch-->
v-model="axisForm.show" <!-- v-model="axisForm.show"-->
:disabled="!hasDataPermission('manage',param.privileges)" <!-- :disabled="!hasDataPermission('manage',param.privileges)"-->
class="switch-style" <!-- class="switch-style"-->
@click.stop.native <!-- @click.stop.native-->
@change="changeXAxisStyle" <!-- @change="changeXAxisStyle"-->
/> <!-- />-->
</el-button> <!-- </el-button>-->
</el-popover> <!-- </el-popover>-->
</div> <!-- </div>-->
</div> </div>
</template> </template>
...@@ -191,4 +257,8 @@ export default { ...@@ -191,4 +257,8 @@ export default {
right: 10px; right: 10px;
margin-top: -4px; margin-top: -4px;
} }
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style> </style>
frontend/src/views/chart/components/component-style/YAxisSelector.vue
浏览文件 @ 6700c639
<template> <template>
<div> <div style="width: 100%">
<div style="width: 100%"> <el-col>
<el-popover <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
v-model="isSetting" <el-form-item :label="$t('chart.show')" class="form-item">
placement="right" <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
width="400" </el-form-item>
trigger="click" <div v-show="axisForm.show">
> <el-form-item :label="$t('chart.position')" class="form-item">
<el-col> <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini"> <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<!-- <el-form-item :label="$t('chart.show')" class="form-item">--> <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
<!-- <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>--> </el-radio-group>
<!-- </el-form-item>--> </el-form-item>
<el-form-item :label="$t('chart.position')" class="form-item"> <el-form-item :label="$t('chart.name')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle"> <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button> </el-form-item>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button> <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
</el-radio-group> <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" @change="changeYAxisStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" @change="changeYAxisStyle" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item"> <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" /> <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider"> <el-form-item :label="$t('chart.axis_type')" class="form-item">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" /> <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
</el-radio-group>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item"> </span>
<colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" /> <el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" @change="changeYAxisStyle" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider"> <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle"> <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-divider /> </span>
<el-form-item :label="$t('chart.axis_show')" class="form-item"> <el-divider />
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox> <el-form-item :label="$t('chart.content_formatter')" class="form-item">
</el-form-item> <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
<span v-show="axisForm.splitLine.show"> </el-form-item>
<el-form-item :label="$t('chart.axis_color')" class="form-item"> </div>
<colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" /> </el-form>
</el-form-item> </el-col>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider"> <!-- <div style="width: 100%">-->
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" /> <!-- <el-popover-->
</el-form-item> <!-- v-model="isSetting"-->
<el-form-item :label="$t('chart.axis_type')" class="form-item"> <!-- placement="right"-->
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle"> <!-- width="400"-->
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button> <!-- trigger="click"-->
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button> <!-- >-->
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button> <!-- <el-col>-->
</el-radio-group> <!-- <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">-->
</el-form-item> <!-- &lt;!&ndash; <el-form-item :label="$t('chart.show')" class="form-item">&ndash;&gt;-->
</span> <!-- &lt;!&ndash; <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>&ndash;&gt;-->
<el-divider /> <!-- &lt;!&ndash; </el-form-item>&ndash;&gt;-->
<el-form-item :label="$t('chart.axis_label_show')" class="form-item"> <!-- <el-form-item :label="$t('chart.position')" class="form-item">-->
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox> <!-- <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">-->
</el-form-item> <!-- <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>-->
<span v-show="axisForm.axisLabel.show"> <!-- <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>-->
<el-form-item :label="$t('chart.axis_label_color')" class="form-item"> <!-- </el-radio-group>-->
<colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" /> <!-- </el-form-item>-->
</el-form-item> <!-- <el-form-item :label="$t('chart.name')" class="form-item">-->
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider"> <!-- <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />-->
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle"> <!-- </el-form-item>-->
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <!-- <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">-->
</el-select> <!-- <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />-->
</el-form-item> <!-- </el-form-item>-->
</span> <!-- <el-form-item :label="$t('chart.axis_name_color')" class="form-item">-->
<el-divider /> <!-- <colorPicker v-model="axisForm.nameTextStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />-->
<el-form-item :label="$t('chart.content_formatter')" class="form-item"> <!-- </el-form-item>-->
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" /> <!-- <el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item form-item-slider">-->
</el-form-item> <!-- <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">-->
</el-form> <!-- <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
</el-col> <!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-divider />-->
<!-- <el-form-item :label="$t('chart.axis_show')" class="form-item">-->
<!-- <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <span v-show="axisForm.splitLine.show">-->
<!-- <el-form-item :label="$t('chart.axis_color')" class="form-item">-->
<!-- <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.axis_type')" class="form-item">-->
<!-- <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">-->
<!-- <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>-->
<!-- <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>-->
<!-- <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- </span>-->
<!-- <el-divider />-->
<!-- <el-form-item :label="$t('chart.axis_label_show')" class="form-item">-->
<!-- <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <span v-show="axisForm.axisLabel.show">-->
<!-- <el-form-item :label="$t('chart.axis_label_color')" class="form-item">-->
<!-- <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">-->
<!-- <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">-->
<!-- <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </span>-->
<!-- <el-divider />-->
<!-- <el-form-item :label="$t('chart.content_formatter')" class="form-item">-->
<!-- <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-col>-->
<el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show || !hasDataPermission('manage',param.privileges)"> <!-- <el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show || !hasDataPermission('manage',param.privileges)">-->
{{ $t('chart.yAxis') }}<i class="el-icon-setting el-icon--right" /> <!-- {{ $t('chart.yAxis') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
<el-switch <!-- <el-switch-->
v-model="axisForm.show" <!-- v-model="axisForm.show"-->
:disabled="!hasDataPermission('manage',param.privileges)" <!-- :disabled="!hasDataPermission('manage',param.privileges)"-->
class="switch-style" <!-- class="switch-style"-->
@click.stop.native <!-- @click.stop.native-->
@change="changeYAxisStyle" <!-- @change="changeYAxisStyle"-->
/> <!-- />-->
</el-button> <!-- </el-button>-->
</el-popover> <!-- </el-popover>-->
</div> <!-- </div>-->
</div> </div>
</template> </template>
...@@ -191,4 +257,8 @@ export default { ...@@ -191,4 +257,8 @@ export default {
right: 10px; right: 10px;
margin-top: -4px; margin-top: -4px;
} }
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style> </style>
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
浏览文件 @ 6700c639
<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" <div v-if="sourceType==='view' || sourceType==='panelEchart'">
width="400" <el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">
trigger="click" <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;">
<el-col> <div style="float: left">
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini"> <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
<div v-if="sourceType==='view' || sourceType==='panelEchart'"> </div>
<el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item"> <span style="margin-left: 4px;">{{ option.name }}</span>
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase"> </el-option>
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;"> </el-select>
<div style="float: left"> </el-form-item>
<span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
</div>
<span style="margin-left: 4px;">{{ option.name }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item"> <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
<colorPicker v-model="colorForm.dimensionColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" /> <el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" @change="changeColorCase" />
</el-form-item> </el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item"> <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
<colorPicker v-model="colorForm.quotaColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" /> <el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" @change="changeColorCase" />
</el-form-item> </el-form-item>
</div> </div>
<div v-if="sourceType==='view' || sourceType==='panelTable'"> <div v-if="sourceType==='view' || sourceType==='panelTable'">
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item"> <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
<colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" /> <el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" @change="changeColorCase" />
</el-form-item> </el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item"> <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :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-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" @change="changeColorCase" />
</el-form-item> </el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item"> <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
<colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" /> <el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" @change="changeColorCase" />
</el-form-item> </el-form-item>
<!-- 暂时不支持该功能--> <!-- 暂时不支持该功能-->
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">--> <!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
<!-- <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>--> <!-- <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
</div> </div>
<el-form-item v-show="chart.type && !chart.type.includes('text')" :label="$t('chart.not_alpha')" class="form-item form-item-slider"> <el-form-item v-show="chart.type && !chart.type.includes('text')" :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-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
<!-- <div style="width: 100%">-->
<!-- <el-popover-->
<!-- placement="right"-->
<!-- width="400"-->
<!-- trigger="click"-->
<!-- >-->
<!-- <el-col>-->
<!-- <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">-->
<!-- <div v-if="sourceType==='view' || sourceType==='panelEchart'">-->
<!-- <el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :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}" />-->
<!-- </div>-->
<!-- <span style="margin-left: 4px;">{{ option.name }}</span>-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-button slot="reference" :disabled="param && !hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button> <!-- <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">-->
</el-popover> <!-- <colorPicker v-model="colorForm.dimensionColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />-->
</div> <!-- </el-form-item>-->
<!-- <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">-->
<!-- <colorPicker v-model="colorForm.quotaColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />-->
<!-- </el-form-item>-->
<!-- </div>-->
<!-- <div v-if="sourceType==='view' || sourceType==='panelTable'">-->
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">-->
<!-- <colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />-->
<!-- </el-form-item>-->
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :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-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">-->
<!-- <colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />-->
<!-- </el-form-item>-->
<!-- &lt;!&ndash; 暂时不支持该功能&ndash;&gt;-->
<!-- &lt;!&ndash; <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!-- </div>-->
<!-- <el-form-item v-show="chart.type && !chart.type.includes('text')" :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>-->
<!-- </el-form>-->
<!-- </el-col>-->
<!-- <el-button slot="reference" :disabled="param && !hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon&#45;&#45;right" /></el-button>-->
<!-- </el-popover>-->
<!-- </div>-->
</div> </div>
</template> </template>
...@@ -226,4 +268,8 @@ export default { ...@@ -226,4 +268,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/components/shape-attr/LabelSelector.vue
浏览文件 @ 6700c639
<template> <template>
<div> <div style="width: 100%;">
<div style="width: 100%"> <el-col>
<el-popover <el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :disabled="!hasDataPermission('manage',param.privileges)" :model="labelForm" label-width="80px" size="mini">
v-model="isSetting" <el-form-item :label="$t('chart.show')" class="form-item">
placement="right" <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
width="400" </el-form-item>
trigger="click" <div v-show="labelForm.show">
> <el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">
<el-col> <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
<el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini"> </el-form-item>
<!-- <el-form-item :label="$t('chart.show')" class="form-item">--> <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<!-- <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>--> <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
<!-- </el-form-item>--> <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
<el-form-item :label="$t('chart.pie_label_line_show')" class="form-item"> </el-select>
<el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox> </el-form-item>
</el-form-item> <el-form-item :label="$t('chart.text_color')" class="form-item">
<el-form-item :label="$t('chart.text_fontsize')" class="form-item"> <el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr"> </el-form-item>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <el-form-item :label="$t('chart.label_position')" class="form-item">
</el-select> <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
</el-form-item> <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
<el-form-item :label="$t('chart.text_color')" class="form-item"> </el-select>
<colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" /> </el-form-item>
</el-form-item> <el-form-item class="form-item">
<el-form-item :label="$t('chart.label_position')" class="form-item"> <span slot="label">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr"> <span class="span-box">
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" /> <span>{{ $t('chart.content_formatter') }}</span>
</el-select> <el-tooltip class="item" effect="dark" placement="bottom">
</el-form-item> <div slot="content">
<el-form-item class="form-item"> 字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。
<span slot="label"> </div>
<span class="span-box"> <i class="el-icon-info" style="cursor: pointer;" />
<span>{{ $t('chart.content_formatter') }}</span> </el-tooltip>
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。
</div>
<i class="el-icon-info" style="cursor: pointer;" />
</el-tooltip>
</span>
</span> </span>
<el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" /> </span>
</el-form-item> <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
</el-form> </el-form-item>
</div>
</el-form>
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini"> <el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :disabled="!hasDataPermission('manage',param.privileges)" :model="labelForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item"> <el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox> <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item"> <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr"> <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item"> <el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" /> <el-color-picker v-model="labelForm.color" class="color-picker-style" @change="changeLabelAttr" />
</el-form-item> </el-form-item>
<el-form-item class="form-item"> <el-form-item class="form-item">
<span slot="label"> <span slot="label">
<span class="span-box"> <span class="span-box">
<span>{{ $t('chart.content_formatter') }}</span> <span>{{ $t('chart.content_formatter') }}</span>
</span> </span>
</span> </span>
<el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" /> <el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
<!-- <div style="width: 100%">-->
<!-- <el-popover-->
<!-- v-model="isSetting"-->
<!-- placement="right"-->
<!-- width="400"-->
<!-- trigger="click"-->
<!-- >-->
<!-- <el-col>-->
<!-- <el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">-->
<!-- &lt;!&ndash; <el-form-item :label="$t('chart.show')" class="form-item">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!-- <el-form-item :label="$t('chart.pie_label_line_show')" class="form-item">-->
<!-- <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
<!-- <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">-->
<!-- <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.text_color')" class="form-item">-->
<!-- <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.label_position')" class="form-item">-->
<!-- <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">-->
<!-- <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item class="form-item">-->
<!-- <span slot="label">-->
<!-- <span class="span-box">-->
<!-- <span>{{ $t('chart.content_formatter') }}</span>-->
<!-- <el-tooltip class="item" effect="dark" placement="bottom">-->
<!-- <div slot="content">-->
<!-- 字符串模板 模板变量有：<br>{a}：系列名。<br>{b}：数据名。<br>{c}：数据值。<br>{d}：百分比（用于饼图等）。-->
<!-- </div>-->
<!-- <i class="el-icon-info" style="cursor: pointer;" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- </span>-->
<!-- <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">-->
<!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
<!-- <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
<!-- <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">-->
<!-- <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.text_color')" class="form-item">-->
<!-- <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />-->
<!-- </el-form-item>-->
<!-- <el-form-item class="form-item">-->
<!-- <span slot="label">-->
<!-- <span class="span-box">-->
<!-- <span>{{ $t('chart.content_formatter') }}</span>-->
<!-- </span>-->
<!-- </span>-->
<!-- <el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-col>-->
<el-button slot="reference" size="mini" class="shape-item" :disabled="!labelForm.show || !hasDataPermission('manage',param.privileges)"> <!-- <el-button slot="reference" size="mini" class="shape-item" :disabled="!labelForm.show || !hasDataPermission('manage',param.privileges)">-->
{{ $t('chart.label') }}<i class="el-icon-setting el-icon--right" /> <!-- {{ $t('chart.label') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
<el-switch <!-- <el-switch-->
v-model="labelForm.show" <!-- v-model="labelForm.show"-->
:disabled="!hasDataPermission('manage',param.privileges)" <!-- :disabled="!hasDataPermission('manage',param.privileges)"-->
class="switch-style" <!-- class="switch-style"-->
@click.stop.native <!-- @click.stop.native-->
@change="changeLabelAttr" <!-- @change="changeLabelAttr"-->
/> <!-- />-->
</el-button> <!-- </el-button>-->
</el-popover> <!-- </el-popover>-->
</div> <!-- </div>-->
</div> </div>
</template> </template>
...@@ -189,4 +250,8 @@ export default { ...@@ -189,4 +250,8 @@ export default {
right: 10px; right: 10px;
margin-top: -4px; margin-top: -4px;
} }
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style> </style>
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
浏览文件 @ 6700c639
<template> <template>
<div> <div style="width: 100%">
<div style="width: 100%"> <el-col>
<el-popover <el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
placement="right" <el-form-item :label="$t('chart.adapt')" class="form-item">
width="400" <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
trigger="click" </el-form-item>
> <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
<el-col> <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
<el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini"> </el-form-item>
<el-form-item :label="$t('chart.adapt')" class="form-item"> <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox> <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider"> </el-form>
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
</el-form-item> <el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider"> <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" /> <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
</el-form-item> </el-form-item>
</el-form> <el-form-item :label="$t('chart.line_type')" class="form-item">
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">
<el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini"> <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
<el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider"> <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" /> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.line_type')" class="form-item"> <el-form-item :label="$t('chart.line_symbol')" class="form-item">
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase"> <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
<el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button> <el-option
<el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button> v-for="item in lineSymbolOptions"
</el-radio-group> :key="item.value"
</el-form-item> :label="item.name"
<el-form-item :label="$t('chart.line_symbol')" class="form-item"> :value="item.value"
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase"> />
<el-option </el-select>
v-for="item in lineSymbolOptions" </el-form-item>
:key="item.value" <el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
:label="item.name" <el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
:value="item.value" </el-form-item>
/> <el-form-item :label="$t('chart.line_smooth')" class="form-item">
</el-select> <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider"> <el-form-item :label="$t('chart.line_area')" class="form-item">
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" /> <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.line_smooth')" class="form-item"> </el-form>
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
</el-form-item> <el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.line_area')" class="form-item"> <el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
<el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox> <el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
</el-form-item> </el-form-item>
</el-form> <el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
<el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini"> </el-form-item>
<el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" /> <span v-show="chart.type && chart.type.includes('pie-rose')">
</el-form-item> <el-form-item :label="$t('chart.rose_type')" class="form-item">
<el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider"> <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">
<el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" /> <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>
</el-form-item> <el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>
</el-radio-group>
<span v-show="chart.type && chart.type.includes('pie-rose')"> </el-form-item>
<el-form-item :label="$t('chart.rose_type')" class="form-item"> <el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">
<el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase"> <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
<el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button> </el-form-item>
<el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button> </span>
</el-radio-group> </el-form>
</el-form-item>
<el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider"> <el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
<el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" /> <el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">
</el-form-item> <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
</span> </el-form-item>
</el-form> </el-form>
<el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini"> <el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider"> <el-form-item :label="$t('chart.shape')" class="form-item">
<el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" /> <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
</el-form-item> <el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
</el-form> <el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
</el-radio-group>
<el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini"> </el-form-item>
<el-form-item :label="$t('chart.shape')" class="form-item"> </el-form>
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
<el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button> <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
<el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button> <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
</el-radio-group> <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
</el-form-item> <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-form> </el-select>
</el-form-item>
<el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini"> <el-form-item :label="$t('chart.table_item_fontsize')" class="form-item">
<el-form-item :label="$t('chart.table_title_fontsize')" class="form-item"> <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
<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-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> </el-select>
</el-select> </el-form-item>
</el-form-item> <el-form-item :label="$t('chart.table_title_height')" class="form-item">
<el-form-item :label="$t('chart.table_item_fontsize')" class="form-item"> <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
<el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase"> </el-form-item>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <el-form-item :label="$t('chart.table_item_height')" class="form-item">
</el-select> <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.table_title_height')" class="form-item"> </el-form>
<el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
</el-form-item> <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
<el-form-item :label="$t('chart.table_item_height')" class="form-item"> <el-form-item :label="$t('chart.min')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" /> <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
</el-form-item> </el-form-item>
</el-form> <el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini"> </el-form-item>
<el-form-item :label="$t('chart.min')" class="form-item form-item-slider"> <el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" /> <el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.max')" class="form-item form-item-slider"> <el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" /> <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider"> </el-form>
<el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
</el-form-item> <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
<el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider"> <el-form-item :label="$t('chart.dimension_show')" class="form-item">
<el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" /> <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
</el-form-item> </el-form-item>
</el-form> <el-form-item :label="$t('chart.dimension_font_size')" class="form-item">
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
<el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini"> <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
<el-form-item :label="$t('chart.dimension_show')" class="form-item"> </el-select>
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox> </el-form-item>
</el-form-item> <el-form-item :label="$t('chart.quota_show')" class="form-item">
<el-form-item :label="$t('chart.dimension_font_size')" class="form-item"> <el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase"> </el-form-item>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <el-form-item :label="$t('chart.quota_font_size')" class="form-item">
</el-select> <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
</el-form-item> <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
<el-form-item :label="$t('chart.quota_show')" class="form-item"> </el-select>
<el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox> </el-form-item>
</el-form-item> <el-form-item :label="$t('chart.space_split')" class="form-item">
<el-form-item :label="$t('chart.quota_font_size')" class="form-item"> <el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase"> </el-form-item>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> </el-form>
</el-select> </el-col>
</el-form-item> <!-- <el-popover-->
<el-form-item :label="$t('chart.space_split')" class="form-item"> <!-- placement="right"-->
<el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" /> <!-- width="400"-->
</el-form-item> <!-- trigger="click"-->
</el-form> <!-- >-->
</el-col> <!-- <el-col>-->
<!-- <el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">-->
<el-button slot="reference" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon--right" /></el-button> <!-- <el-form-item :label="$t('chart.adapt')" class="form-item">-->
</el-popover> <!-- <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>-->
</div> <!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">-->
<!-- <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.line_type')" class="form-item">-->
<!-- <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">-->
<!-- <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>-->
<!-- <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.line_symbol')" class="form-item">-->
<!-- <el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">-->
<!-- <el-option-->
<!-- v-for="item in lineSymbolOptions"-->
<!-- :key="item.value"-->
<!-- :label="item.name"-->
<!-- :value="item.value"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.line_smooth')" class="form-item">-->
<!-- <el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.line_area')" class="form-item">-->
<!-- <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">-->
<!-- <el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- <span v-show="chart.type && chart.type.includes('pie-rose')">-->
<!-- <el-form-item :label="$t('chart.rose_type')" class="form-item">-->
<!-- <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">-->
<!-- <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>-->
<!-- <el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- </span>-->
<!-- </el-form>-->
<!-- <el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">-->
<!-- <el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">-->
<!-- <el-form-item :label="$t('chart.shape')" class="form-item">-->
<!-- <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">-->
<!-- <el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>-->
<!-- <el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <el-form v-show="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-item :label="$t('chart.table_title_height')" class="form-item">-->
<!-- <el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.table_item_height')" class="form-item">-->
<!-- <el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">-->
<!-- <el-form-item :label="$t('chart.min')" class="form-item form-item-slider">-->
<!-- <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.max')" class="form-item form-item-slider">-->
<!-- <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">-->
<!-- <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">-->
<!-- <el-form-item :label="$t('chart.dimension_show')" class="form-item">-->
<!-- <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.dimension_font_size')" class="form-item">-->
<!-- <el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @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.quota_show')" class="form-item">-->
<!-- <el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.quota_font_size')" class="form-item">-->
<!-- <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @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.space_split')" class="form-item">-->
<!-- <el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-col>-->
<!-- <el-button slot="reference" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon&#45;&#45;right" /></el-button>-->
<!-- </el-popover>-->
</div> </div>
</template> </template>
......
frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
浏览文件 @ 6700c639
<template> <template>
<div> <div style="width: 100%">
<div style="width: 100%"> <el-col>
<el-popover <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini" :disabled="!hasDataPermission('manage',param.privileges)">
v-model="isSetting" <el-form-item :label="$t('chart.show')" class="form-item">
placement="right" <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
width="400" </el-form-item>
trigger="click" <div v-show="tooltipForm.show">
> <el-form-item :label="$t('chart.trigger_position')" class="form-item">
<el-col> <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
<el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini"> <el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
<!-- <el-form-item :label="$t('chart.show')" class="form-item">--> <el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>
<!-- <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>--> </el-radio-group>
<!-- </el-form-item>--> </el-form-item>
<el-form-item :label="$t('chart.trigger_position')" class="form-item"> <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr"> <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
<el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button> <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
<el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button> </el-select>
</el-radio-group> </el-form-item>
</el-form-item> <el-form-item :label="$t('chart.text_color')" class="form-item">
<el-form-item :label="$t('chart.text_fontsize')" class="form-item"> <el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" @change="changeTooltipAttr" />
<el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr"> </el-form-item>
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" /> <el-form-item class="form-item">
</el-select> <span slot="label">
</el-form-item> <span class="span-box">
<el-form-item :label="$t('chart.text_color')" class="form-item"> <span>{{ $t('chart.content_formatter') }}</span>
<colorPicker v-model="tooltipForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTooltipAttr" /> <el-tooltip class="item" effect="dark" placement="bottom">
</el-form-item> <div slot="content">
<el-form-item class="form-item"> 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
<span slot="label"> <br>
<span class="span-box"> 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。
<span>{{ $t('chart.content_formatter') }}</span> <br>
<el-tooltip class="item" effect="dark" placement="bottom"> 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
<div slot="content"> <br><br>
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
<br> <br>
在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
<br> <br>
不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为： 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
<br><br> <br>
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无） 饼图、仪表板、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
<br> </div>
散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无） <i class="el-icon-info" style="cursor: pointer;" />
<br> </el-tooltip>
地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
<br>
饼图、仪表板、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
</div>
<i class="el-icon-info" style="cursor: pointer;" />
</el-tooltip>
</span>
</span> </span>
<el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" /> </span>
</el-form-item> <el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
</el-form> </el-form-item>
</el-col> </div>
</el-form>
</el-col>
<!-- <div style="width: 100%">-->
<!-- <el-popover-->
<!-- v-model="isSetting"-->
<!-- placement="right"-->
<!-- width="400"-->
<!-- trigger="click"-->
<!-- >-->
<!-- <el-col>-->
<!-- <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">-->
<!-- &lt;!&ndash; <el-form-item :label="$t('chart.show')" class="form-item">&ndash;&gt;-->
<!-- &lt;!&ndash; <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>&ndash;&gt;-->
<!-- &lt;!&ndash; </el-form-item>&ndash;&gt;-->
<!-- <el-form-item :label="$t('chart.trigger_position')" class="form-item">-->
<!-- <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">-->
<!-- <el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>-->
<!-- <el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="$t('chart.text_fontsize')" class="form-item">-->
<!-- <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">-->
<!-- <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.text_color')" class="form-item">-->
<!-- <colorPicker v-model="tooltipForm.textStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeTooltipAttr" />-->
<!-- </el-form-item>-->
<!-- <el-form-item class="form-item">-->
<!-- <span slot="label">-->
<!-- <span class="span-box">-->
<!-- <span>{{ $t('chart.content_formatter') }}</span>-->
<!-- <el-tooltip class="item" effect="dark" placement="bottom">-->
<!-- <div slot="content">-->
<!-- 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。-->
<!-- <br>-->
<!-- 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。-->
<!-- <br>-->
<!-- 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：-->
<!-- <br><br>-->
<!-- 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）-->
<!-- <br>-->
<!-- 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）-->
<!-- <br>-->
<!-- 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）-->
<!-- <br>-->
<!-- 饼图、仪表板、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）-->
<!-- </div>-->
<!-- <i class="el-icon-info" style="cursor: pointer;" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- </span>-->
<!-- <el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-col>-->
<el-button slot="reference" size="mini" class="shape-item" :disabled="!tooltipForm.show || !hasDataPermission('manage',param.privileges)"> <!-- <el-button slot="reference" size="mini" class="shape-item" :disabled="!tooltipForm.show || !hasDataPermission('manage',param.privileges)">-->
{{ $t('chart.tooltip') }}<i class="el-icon-setting el-icon--right" /> <!-- {{ $t('chart.tooltip') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
<el-switch <!-- <el-switch-->
v-model="tooltipForm.show" <!-- v-model="tooltipForm.show"-->
:disabled="!hasDataPermission('manage',param.privileges)" <!-- :disabled="!hasDataPermission('manage',param.privileges)"-->
class="switch-style" <!-- class="switch-style"-->
@click.stop.native <!-- @click.stop.native-->
@change="changeTooltipAttr" <!-- @change="changeTooltipAttr"-->
/> <!-- />-->
</el-button> <!-- </el-button>-->
</el-popover> <!-- </el-popover>-->
</div> <!-- </div>-->
</div> </div>
</template> </template>
...@@ -165,4 +214,8 @@ export default { ...@@ -165,4 +214,8 @@ export default {
right: 10px; right: 10px;
margin-top: -4px; margin-top: -4px;
} }
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style> </style>
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ 6700c639
...@@ -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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论