refator: 批量样式设置显示优化

This commit is contained in:
wangjiahao 2022-05-26 14:15:48 +08:00
parent ca41d05200
commit b0b46fd4c1
5 changed files with 56 additions and 32 deletions

View File

@ -82,6 +82,7 @@ import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog'
import bus from '@/utils/bus'
import { buildFilterMap } from '@/utils/conditionUtil'
import { hasDataPermission } from '@/utils/permission'
export default {
components: { UserViewMobileDialog, ComponentWrapper, UserViewDialog, CanvasOptBar },
model: {
@ -176,7 +177,7 @@ export default {
showUnpublishedArea() {
// return this.panelInfo.status === 'unpublished'
if (this.mainActiveName === 'PanelMain' && this.activeTab === 'PanelList') {
return this.panelInfo.status === 'unpublished' && this.panelInfo.privileges.indexOf('manage') === -1
return this.panelInfo.status === 'unpublished' && !hasDataPermission('manage', this.panelInfo.privileges)
} else {
return this.panelInfo.status === 'unpublished'
}
@ -270,12 +271,15 @@ export default {
this._isMobile()
const _this = this
const erd = elementResizeDetectorMaker()
const canvasMain = document.getElementById('canvasInfoMain')
// div
erd.listenTo(document.getElementById('canvasInfoMain'), element => {
_this.$nextTick(() => {
_this.restore()
if (canvasMain) {
erd.listenTo(canvasMain, element => {
_this.$nextTick(() => {
_this.restore()
})
})
})
}
// div
const tempCanvas = document.getElementById('canvasInfoTemp')
if (tempCanvas) {

View File

@ -468,7 +468,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position'
'position-v'
],
'tooltip-selector-ant-v': [
'show',
@ -540,7 +540,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position'
'position-v'
],
'tooltip-selector-ant-v': [
'show',
@ -605,7 +605,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position'
'position-v'
],
'tooltip-selector-ant-v': [
'show',
@ -670,7 +670,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position'
'position-h'
],
'tooltip-selector-ant-v': [
'show',
@ -743,7 +743,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position'
'position-h'
],
'tooltip-selector-ant-v': [
'show',
@ -815,7 +815,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position'
'position-pie'
],
'tooltip-selector-ant-v': [
'show',
@ -866,7 +866,8 @@ export const TYPE_CONFIGS = [
'label-selector-ant-v': [
'show',
'fontSize',
'color'
'color',
'position-pie'
],
'tooltip-selector-ant-v': [
'show',
@ -919,7 +920,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position'
'position-v'
],
'tooltip-selector-ant-v': [
'show',
@ -1113,7 +1114,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position'
'position-h'
],
'tooltip-selector-ant-v': [
'show',
@ -1308,7 +1309,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position',
'position-v',
'formatter',
'gaugeFormatter'
],
@ -1512,7 +1513,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position',
'position-v',
'formatter'
],
'tooltip-selector': [
@ -1594,7 +1595,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position',
'position-v',
'formatter'
],
'tooltip-selector': [
@ -1668,7 +1669,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position',
'position-v',
'formatter'
],
'tooltip-selector': [
@ -1742,7 +1743,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position',
'position-h',
'formatter'
],
'tooltip-selector': [
@ -1817,7 +1818,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position',
'position-h',
'formatter'
],
'tooltip-selector': [
@ -1892,7 +1893,7 @@ export const TYPE_CONFIGS = [
'labelLine',
'fontSize',
'color',
'position',
'position-v',
'formatter'
],
'tooltip-selector': [
@ -1951,7 +1952,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position',
'position-pie',
'formatter'
],
'tooltip-selector': [
@ -2009,7 +2010,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position',
'position-v',
'formatter'
],
'tooltip-selector': [
@ -2123,7 +2124,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position',
'position-v',
'formatter'
],
'tooltip-selector': [
@ -2193,7 +2194,7 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position',
'position-h',
'formatter'
],
'tooltip-selector': [
@ -2249,7 +2250,6 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
'position',
'formatter'
],
'tooltip-selector': [

View File

@ -17,9 +17,19 @@
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
</el-form-item>
<el-form-item v-show="showProperty('position') && chart.type !== 'map'" :label="$t('chart.label_position')" class="form-item">
<el-form-item v-show="showProperty('position-pie') " :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
<el-option v-for="option in labelPositionPie" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('position-h') " :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
<el-option v-for="option in labelPositionH" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('position-v') " :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
<el-option v-for="option in labelPositionV" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('formatter')" class="form-item">

View File

@ -14,9 +14,19 @@
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
</el-form-item>
<el-form-item v-show="showProperty('position')" :label="$t('chart.label_position')" class="form-item">
<el-form-item v-show="showProperty('position-v')" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
<el-option v-for="option in labelPositionV" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('position-pie')" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
<el-option v-for="option in labelPositionPie" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="showProperty('position-h')" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
<el-option v-for="option in labelPositionH" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
</div>

View File

@ -82,10 +82,10 @@ export default {
this.batchOptChange('customStyle', 'xAxis', val)
},
onChangeYAxisForm(val) {
this.batchOptChange('customStyle', 'xAxis', val)
this.batchOptChange('customStyle', 'yAxis', val)
},
onChangeYAxisExtForm(val) {
this.batchOptChange('customStyle', 'yAxis', val)
this.batchOptChange('customStyle', 'yAxisExt', val)
},
onChangeSplitForm(val) {
this.batchOptChange('customStyle', 'split', val)