center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

refactor: 批量修改样式优化

Browse Source
This commit is contained in:
wangjiahao 2022-05-20 13:08:26 +08:00
parent 7db5e73125
commit fec7a67787
13 changed files with 87 additions and 649 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
View File

@ -124,7 +124,7 @@ public class PanelGroupService {
if (StringUtils.isEmpty(panelId)) { // 新建
checkPanelName(request.getName(), request.getPid(), PanelConstants.OPT_TYPE_INSERT, null, request.getNodeType());
panelId = newPanel(request);
panelGroupMapper.insert(request);
panelGroupMapper.insertSelective(request);
// 清理权限缓存
clearPermissionCache();
sysAuthService.copyAuth(panelId, SysAuthConstants.AUTH_SOURCE_TYPE_PANEL);

2
frontend/src/components/DeDrag/index.vue
View File

@ -1851,7 +1851,7 @@ export default {
}
.batchSetting{
opacity: 0.7;
opacity: 0.9;
}
.positionChange{

2
frontend/src/components/canvas/components/Editor/EditBar.vue
View File

@ -91,7 +91,7 @@ export default {
},
// batch operation area
batchOptAreaShow() {
return this.batchOptStatus && this.element.type === 'view'
return this.batchOptStatus && this.element.type === 'view' && !this.element.isPlugin
},
// 联动区域按钮显示
linkageAreaShow() {

14
frontend/src/components/canvas/components/Editor/Preview.vue
View File

@ -256,13 +256,15 @@ export default {
})
// 监听画布div变动事件
const tempCanvas = document.getElementById('canvasInfoTemp')
erd.listenTo(document.getElementById('canvasInfoTemp'), element => {
_this.$nextTick(() => {
// 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
_this.mainHeight = tempCanvas.scrollHeight + 'px!important'
this.$emit('mainHeightChange', _this.mainHeight)
if (tempCanvas) {
erd.listenTo(document.getElementById('canvasInfoTemp'), element => {
_this.$nextTick(() => {
// 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
_this.mainHeight = tempCanvas.scrollHeight + 'px!important'
this.$emit('mainHeightChange', _this.mainHeight)
})
})
})
}
eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
_this.$store.commit('clearLinkageSettingInfo', false)
_this.canvasStyleDataInit()

5
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -412,8 +412,11 @@ export default {
this.chart.customAttr = this.sourceCustomAttrStr
updateParams['customAttr'] = this.sourceCustomAttrStr
} else if (param.custom === 'customStyle') {
this.sourceCustomStyleStr = this.chart.customStyle
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
// view's title use history
if (param.property === 'text') {
param.value.title = sourceCustomStyle.text.title
}
sourceCustomStyle[param.property] = param.value
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr

11
frontend/src/store/index.js
View File

@ -125,7 +125,8 @@ const data = {
changeProperties: {
customStyle: {},
customAttr: {}
}
},
allViewRender: []
},
mutations: {
...animation.mutations,
@ -550,7 +551,7 @@ const data = {
// get view base info
const viewBaseInfo = state.componentViewsData[id]
// get properties
const viewConfig = TYPE_CONFIGS.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
const viewConfig = state.allViewRender.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
const viewProperties = viewConfig ? viewConfig[0].properties : []
if (state.mixProperties.length > 0) {
// If it exists , taking the intersection
@ -641,6 +642,12 @@ const data = {
customStyle: {},
customAttr: {}
}
},
initViewRender(state, pluginViews) {
pluginViews.forEach(plugin => {
plugin.isPlugin = true
})
state.allViewRender = [...TYPE_CONFIGS, ...pluginViews]
}
},
modules: {

3
frontend/src/views/chart/chart/chart.js
View File

@ -8,7 +8,8 @@ export const DEFAULT_COLOR_CASE = {
tableStripe: true,
dimensionColor: '#000000',
quotaColor: '#000000',
tableBorderColor: '#cfdaf4'
tableBorderColor: '#cfdaf4',
seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false}
}
export const DEFAULT_SIZE = {
barDefault: true,

32
frontend/src/views/chart/components/component-style/TitleSelector.vue
View File

@ -6,7 +6,7 @@
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="titleForm.show">
<el-form-item :label="$t('chart.title')" class="form-item">
<el-form-item v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
<el-input
v-model="titleForm.title"
size="mini"
@ -51,6 +51,7 @@
<script>
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
import { checkViewTitle } from '@/components/canvas/utils/utils'
import { mapState } from 'vuex'
export default {
name: 'TitleSelector',
@ -79,6 +80,11 @@ export default {
}
}
},
computed: {
...mapState([
'batchOptStatus'
])
},
mounted() {
this.init()
this.initData()
@ -96,7 +102,9 @@ export default {
if (customStyle.text) {
this.titleForm = customStyle.text
}
this.titleForm.title = this.chart.title
if (!this.batchOptStatus) {
this.titleForm.title = this.chart.title
}
}
},
init() {
@ -110,15 +118,17 @@ export default {
this.fontSize = arr
},
changeTitleStyle() {
if (this.titleForm.title.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
this.titleForm.title = this.chart.title
return
}
if (checkViewTitle('update', this.chart.id, this.titleForm.title)) {
this.$error(this.$t('chart.title_repeat'))
this.titleForm.title = this.chart.title
return
if (!this.batchOptStatus) {
if (this.titleForm.title.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
this.titleForm.title = this.chart.title
return
}
if (checkViewTitle('update', this.chart.id, this.titleForm.title)) {
this.$error(this.$t('chart.title_repeat'))
this.titleForm.title = this.chart.title
return
}
}
if (!this.titleForm.show) {
this.isSetting = false

33
frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
View File

@ -6,7 +6,7 @@
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="titleForm.show">
<el-form-item :label="$t('chart.title')" class="form-item">
<el-form-item v-if="!this.batchOptStatus" :label="$t('chart.title')" class="form-item">
<el-input
v-model="titleForm.title"
size="mini"
@ -43,8 +43,8 @@
<script>
import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
import { checkTitle } from '@/api/chart/chart'
import { checkViewTitle } from '@/components/canvas/utils/utils'
import { mapState } from 'vuex'
export default {
name: 'TitleSelectorAntV',
@ -66,6 +66,11 @@ export default {
predefineColors: COLOR_PANEL
}
},
computed: {
...mapState([
'batchOptStatus'
])
},
watch: {
'chart': {
handler: function() {
@ -90,7 +95,9 @@ export default {
if (customStyle.text) {
this.titleForm = customStyle.text
}
this.titleForm.title = this.chart.title
if (!this.batchOptStatus) {
this.titleForm.title = this.chart.title
}
}
},
init() {
@ -104,15 +111,17 @@ export default {
this.fontSize = arr
},
changeTitleStyle() {
if (this.titleForm.title.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
this.titleForm.title = this.chart.title
return
}
if (checkViewTitle('update', this.chart.id, this.titleForm.title)) {
this.$error(this.$t('chart.title_repeat'))
this.titleForm.title = this.chart.title
return
if (!this.batchOptStatus) {
if (this.titleForm.title.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
this.titleForm.title = this.chart.title
return
}
if (checkViewTitle('update', this.chart.id, this.titleForm.title)) {
this.$error(this.$t('chart.title_repeat'))
this.titleForm.title = this.chart.title
return
}
}
this.$emit('onTextChange', this.titleForm)
},

5
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -1170,7 +1170,7 @@ export default {
chartProperties() {
const _this = this
if (_this.chart && _this.chart.render) {
const viewConfig = TYPE_CONFIGS.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
const viewConfig = this.allViewRender.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
if (viewConfig && viewConfig.length) {
return viewConfig[0].properties
} else {
@ -1188,7 +1188,8 @@ export default {
},
...mapState([
'curComponent',
'panelViewEditInfo'
'panelViewEditInfo',
'allViewRender'
])
/* pluginRenderOptions() {
const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []

7
frontend/src/views/chart/view/ChartStyle.vue
View File

@ -12,7 +12,7 @@
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
class="attr-style theme-border-class"
>
<el-row v-if="chart.mode!=='batchOpt'" class="padding-lr">
<el-row v-if="!batchOptStatus" class="padding-lr">
<span class="title-text">{{ $t('chart.style_priority') }}</span>
<el-row>
<el-radio-group
@ -274,6 +274,7 @@ import LegendSelectorAntV from '@/views/chart/components/component-style/LegendS
import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
import SplitSelector from '@/views/chart/components/component-style/SplitSelector'
import SplitSelectorAntV from '@/views/chart/components/component-style/SplitSelectorAntV'
import { mapState } from 'vuex'
export default {
name: 'ChartStyle',
@ -321,7 +322,9 @@ export default {
}
},
computed: {
...mapState([
'batchOptStatus'
])
},
created() {

609
frontend/src/views/chart/view/ChartStyleBack.vue
View File

@ -1,609 +0,0 @@
<template>
<el-row class="view-panel">
<plugin-com
v-if="view.isPlugin"
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
class="attr-style theme-border-class"
:component-name="view.type + '-style'"
:obj="{view, param, chart}"
/>
<div
v-else
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
class="attr-style theme-border-class"
>
<el-row class="padding-lr">
<span class="title-text">{{ $t('chart.style_priority') }}</span>
<br>
<span class="title-text">{{ view.render }}</span>
<br>
<span class="title-text">{{ view.type }}</span>
<el-row>
<el-radio-group
v-model="view.stylePriority"
class="radio-span"
size="mini"
@change="calcStyle"
>
<el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
<el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
</el-radio-group>
</el-row>
</el-row>
<el-row>
<span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
<el-collapse v-model="attrActiveNames" class="style-collapse">
<el-collapse-item name="color" :title="$t('chart.color')">
{{ 'color-selector' }}
<color-selector
:param="param"
class="attr-selector"
:chart="chart"
@onColorChange="onColorChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.render && view.render === 'echarts' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud'"
name="size"
:title="$t('chart.size')"
>
{{ 'size-selector' }}
<size-selector
:param="param"
class="attr-selector"
:chart="chart"
@onSizeChange="onSizeChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.render && view.render === 'antv' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud' && chart.type !== 'treemap' && chart.type !== 'funnel' && chart.type !== 'bar-stack'"
name="size"
:title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
>
{{ 'size-selector-ant-v' }}
<size-selector-ant-v
: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') && view.type !== 'word-cloud' && view.type !== 'label'"
name="label"
:title="$t('chart.label')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'label-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'label-selector-ant-v' }}
</span>
<label-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onLabelChange="onLabelChange"
/>
<label-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
: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') && view.type !== 'liquid' && view.type !== 'gauge' && view.type !== 'label'"
name="tooltip"
:title="$t('chart.tooltip')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'tooltip-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'tooltip-selector-ant-v' }}
</span>
<tooltip-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onTooltipChange="onTooltipChange"
/>
<tooltip-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onTooltipChange="onTooltipChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type === 'table-pivot'"
name="totalCfg"
:title="$t('chart.total_cfg')"
>
{{ 'total-cfg' }}
<total-cfg
:param="param"
class="attr-selector"
:chart="chart"
@onTotalCfgChange="onTotalCfgChange"
/>
</el-collapse-item>
</el-collapse>
</el-row>
<el-row>
<span class="padding-lr">{{ $t('chart.module_style') }}</span>
<el-collapse v-model="styleActiveNames" class="style-collapse">
<el-collapse-item
v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
name="xAxis"
:title="$t('chart.xAxis')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'x-axis-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'x-axis-selector-ant-v' }}
</span>
<x-axis-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeXAxisForm="onChangeXAxisForm"
/>
<x-axis-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeXAxisForm="onChangeXAxisForm"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
name="yAxis"
:title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'y-axis-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'y-axis-selector-ant-v' }}
</span>
<y-axis-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisForm"
/>
<y-axis-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisForm"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && view.type === 'chart-mix'"
name="yAxisExt"
:title="$t('chart.yAxis_ext')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'y-axis-ext-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'y-axis-ext-selector-ant-v' }}
</span>
<y-axis-ext-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisExtForm"
/>
<y-axis-ext-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisExtForm"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && view.type.includes('radar')"
name="split"
:title="$t('chart.split')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'split-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'split-selector-ant-v' }}
</span>
<split-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeSplitForm="onChangeSplitForm"
/>
<split-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeSplitForm="onChangeSplitForm"
/>
</el-collapse-item>
<el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
<span v-show="view.render && view.render === 'echarts'">
{{ 'title-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'title-selector-ant-v' }}
</span>
<title-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onTextChange="onTextChange"
/>
<title-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onTextChange="onTextChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && view.type !== 'label' && (chart.type !== 'treemap' || chart.render === 'antv') && view.type !== 'liquid' && view.type !== 'waterfall' && chart.type !== 'gauge' && chart.type !== 'word-cloud'"
name="legend"
:title="$t('chart.legend')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'legend-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'legend-selector-ant-v' }}
</span>
<legend-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onLegendChange="onLegendChange"
/>
<legend-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onLegendChange="onLegendChange"
/>
</el-collapse-item>
<el-collapse-item
v-if="view.customStyle && view.customStyle.background"
name="background"
:title="$t('chart.background')"
>
{{ background-color-selector }}
<background-color-selector
:param="param"
class="attr-selector"
:chart="chart"
@onChangeBackgroundForm="onChangeBackgroundForm"
/>
</el-collapse-item>
</el-collapse>
</el-row>
</div>
</el-row>
</template>
<script>
import PluginCom from '@/views/system/plugin/PluginCom'
import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
import LabelSelectorAntV from '@/views/chart/components/shape-attr/LabelSelectorAntV'
import TooltipSelector from '@/views/chart/components/shape-attr/TooltipSelector'
import TooltipSelectorAntV from '@/views/chart/components/shape-attr/TooltipSelectorAntV'
import TotalCfg from '@/views/chart/components/shape-attr/TotalCfg'
import XAxisSelector from '@/views/chart/components/component-style/XAxisSelector'
import XAxisSelectorAntV from '@/views/chart/components/component-style/XAxisSelectorAntV'
import YAxisSelector from '@/views/chart/components/component-style/YAxisSelector'
import YAxisSelectorAntV from '@/views/chart/components/component-style/YAxisSelectorAntV'
import YAxisExtSelector from '@/views/chart/components/component-style/YAxisExtSelector'
import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxisExtSelectorAntV'
import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
import TitleSelectorAntV from '@/views/chart/components/component-style/TitleSelectorAntV'
import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
import LegendSelectorAntV from '@/views/chart/components/component-style/LegendSelectorAntV'
import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
import SplitSelector from "@/views/chart/components/component-style/SplitSelector";
import SplitSelectorAntV from "@/views/chart/components/component-style/SplitSelectorAntV";
export default {
name: 'ChartStyleBack',
components: {
SplitSelectorAntV,
SplitSelector,
BackgroundColorSelector,
LegendSelectorAntV,
LegendSelector,
TitleSelectorAntV,
TitleSelector,
YAxisExtSelectorAntV,
YAxisExtSelector,
YAxisSelectorAntV,
YAxisSelector,
XAxisSelectorAntV,
XAxisSelector,
TotalCfg,
TooltipSelectorAntV,
TooltipSelector,
LabelSelectorAntV, LabelSelector, SizeSelectorAntV, SizeSelector, ColorSelector, PluginCom
},
props: {
chart: {
type: Object,
required: true
},
param: {
type: Object,
required: true
},
view: {
type: Object,
required: true
},
properties: {
type: Array,
required: false
}
},
data() {
return {
attrActiveNames: [],
styleActiveNames: []
}
},
created() {
},
methods: {
calcStyle() {
this.$emit('calcStyle')
},
onColorChange(val) {
this.$emit('onColorChange', val)
},
onSizeChange(val) {
this.$emit('onSizeChange', val)
},
onLabelChange(val) {
this.$emit('onLabelChange', val)
},
onTooltipChange(val) {
this.$emit('onTooltipChange', val)
},
onTotalCfgChange(val) {
this.$emit('onTotalCfgChange', val)
},
onChangeXAxisForm(val) {
this.$emit('onChangeXAxisForm', val)
},
onChangeYAxisForm(val) {
this.$emit('onChangeYAxisForm', val)
},
onChangeYAxisExtForm(val) {
this.$emit('onChangeYAxisExtForm', val)
},
onChangeSplitForm(val) {
this.$emit('onChangeSplitForm', val)
},
onTextChange(val) {
this.$emit('onTextChange', val)
},
onLegendChange(val) {
this.$emit('onLegendChange', val)
},
onChangeBackgroundForm(val) {
this.$emit('onChangeBackgroundForm', val)
}
}
}
</script>
<style lang='scss' scoped>
.padding-lr {
padding: 0 6px;
}
.col {
width: 40%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col + .col {
margin-left: 10px;
}
.view-panel {
display: flex;
height: 100%;
background-color: #f7f8fa;
}
.blackTheme .view-panel {
background-color: var(--MainBG);
}
.el-form-item {
margin-bottom: 0;
}
span {
font-size: 12px;
}
.tab-header > > > .el-tabs__header {
border-top: solid 1px #eee;
border-right: solid 1px #eee;
}
.tab-header > > > .el-tabs__item {
font-size: 12px;
padding: 0 20px !important;
}
.blackTheme .tab-header > > > .el-tabs__item {
background-color: var(--MainBG);
}
.tab-header > > > .el-tabs__nav-scroll {
padding-left: 0 !important;
}
.tab-header > > > .el-tabs__header {
margin: 0 !important;
}
.tab-header > > > .el-tabs__content {
height: calc(100% - 40px);
}
.chart-icon {
width: 20px;
height: 20px;
}
.el-radio {
margin: 5px;
}
.el-radio > > > .el-radio__label {
padding-left: 0;
}
.attr-style {
height: calc(100vh - 56px - 60px - 40px - 40px);
}
.blackTheme .attr-style {
color: var(--TextPrimary);
}
.attr-selector {
width: 100%;
height: 100%;
margin: 6px 0;
padding: 0 4px;
display: flex;
align-items: center;
background-color: white
}
.blackTheme .attr-selector {
background-color: var(--MainBG)
}
.dialog-css > > > .el-dialog__title {
font-size: 14px;
}
.dialog-css > > > .el-dialog__header {
padding: 20px 20px 0;
}
.dialog-css > > > .el-dialog__body {
padding: 10px 20px 20px;
}
.blackTheme .theme-border-class {
color: var(--TextPrimary) !important;
background-color: var(--ContentBG);
}
.blackTheme .padding-lr {
border-color: var(--TableBorderColor) !important;
}
.blackTheme .theme-item-class {
background-color: var(--MainBG) !important;
border-color: var(--TableBorderColor) !important;
}
.icon-class {
color: #6c6c6c;
}
.blackTheme .icon-class {
color: #cccccc;
}
.radio-span > > > .el-radio__label {
margin-left: 4px;
}
.view-title-name {
display: -moz-inline-box;
display: inline-block;
width: 130px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 45px;
}
::v-deep .item-axis {
width: 128px !important;
}
::v-deep .el-slider__input {
width: 80px !important;
}
::v-deep .el-input-number--mini {
width: 100px !important;
}
::v-deep .el-slider__runway.show-input{
width: 80px!important;
}
.no-senior {
width: 100%;
text-align: center;
font-size: 12px;
padding-top: 40px;
overflow: auto;
border-right: 1px solid #e6e6e6;
height: 100%;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
</style>

11
frontend/src/views/panel/list/PanelMain.vue
View File

@ -30,6 +30,7 @@ import PanelList from '../list/PanelList'
import PanelViewShow from '../list/PanelViewShow'
import ShareTree from '../GrantAuth/shareTree'
import Enshrine from '../enshrine/index'
import { pluginTypes } from '@/api/chart/chart'
export default {
name: 'PanelMain',
@ -59,6 +60,16 @@ export default {
}
},
mounted() {
// init all views (include plugins) base info
localStorage.removeItem('plugin-views')
pluginTypes().then(res => {
const plugins = res.data
localStorage.setItem('plugin-views', JSON.stringify(plugins))
this.$store.commit('initViewRender', plugins)
}).catch(e => {
localStorage.setItem('plugin-views', null)
this.$store.commit('initViewRender', plugins)
})
this.clear()
},
methods: {