forked from github/dataease
feat(仪表板): Tab组件支持轮播
This commit is contained in:
wangjiahao
parent
ae1f3293fe
commit
5991e9c11f
@ -103,6 +103,8 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
|
||||
}
|
||||
if (item.type === 'de-tabs') {
|
||||
item.style.fontSize = item.style.fontSize || 16
|
||||
item.style.carouselEnable = item.style.carouselEnable || false
|
||||
item.style.switchTime = item.style.switchTime || 5
|
||||
}
|
||||
if (item.type === 'custom') {
|
||||
item.options.manualModify = false
|
||||
|
||||
@ -272,6 +272,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
scrollLeft: 50,
|
||||
scrollTop: 10,
|
||||
// 需要展示属性设置的组件类型
|
||||
@ -393,6 +394,16 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'element.style.carouselEnable': {
|
||||
handler(newVal, oldVla) {
|
||||
this.initCarousel()
|
||||
}
|
||||
},
|
||||
'element.style.switchTime': {
|
||||
handler(newVal, oldVla) {
|
||||
this.initCarousel()
|
||||
}
|
||||
},
|
||||
activeTabName: {
|
||||
handler(newVal, oldVla) {
|
||||
this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
|
||||
@ -439,10 +450,26 @@ export default {
|
||||
this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
|
||||
this.setContentThemeStyle()
|
||||
},
|
||||
mounted() {
|
||||
this.initCarousel()
|
||||
},
|
||||
beforeDestroy() {
|
||||
bus.$off('add-new-tab', this.addNewTab)
|
||||
},
|
||||
methods: {
|
||||
initCarousel() {
|
||||
this.timer && clearInterval(this.timer)
|
||||
if (this.element.style.carouselEnable) {
|
||||
const switchTime = (this.element.style.switchTime || 5) * 1000
|
||||
let switchCount = 1
|
||||
// 轮播定时器
|
||||
this.timer = setInterval(() => {
|
||||
switchCount++
|
||||
const nowIndex = switchCount % this.element.options.tabList.length
|
||||
this.activeTabName = this.element.options.tabList[nowIndex].name
|
||||
}, switchTime)
|
||||
}
|
||||
},
|
||||
initScroll() {
|
||||
this.scrollLeft = 50
|
||||
this.scrollTop = 10
|
||||
|
||||
@ -112,6 +112,36 @@
|
||||
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('panel.carousel')">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-checkbox
|
||||
v-model="styleInfo.carouselEnable"
|
||||
size="mini"
|
||||
>{{ $('common.enable') }}
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="8"
|
||||
style="text-align: right;padding-right: 10px"
|
||||
>
|
||||
{{ $('panel.switch_time') }}
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input
|
||||
v-model="styleInfo.switchTime"
|
||||
:disabled="!styleInfo.carouselEnable"
|
||||
type="number"
|
||||
size="mini"
|
||||
:min="2"
|
||||
class="hide-icon-number"
|
||||
>
|
||||
<template slot="append">S</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<i
|
||||
slot="reference"
|
||||
|
||||
@ -1875,10 +1875,12 @@ export default {
|
||||
back_parent: 'Back to previous'
|
||||
},
|
||||
panel: {
|
||||
carousel: 'Carousel',
|
||||
switch_time: 'Switch time',
|
||||
position_adjust: 'Position',
|
||||
space_top: 'Top',
|
||||
space_left: 'Left',
|
||||
space_width: 'Widht',
|
||||
space_width: 'Width',
|
||||
space_height: 'Height',
|
||||
to_top: 'To Top',
|
||||
down: 'Down',
|
||||
|
||||
@ -1875,6 +1875,8 @@ export default {
|
||||
back_parent: '返回上一級'
|
||||
},
|
||||
panel: {
|
||||
carousel: '輪播',
|
||||
switch_time: '切換時間',
|
||||
position_adjust: '位置',
|
||||
space_top: '上',
|
||||
space_left: '左',
|
||||
|
||||
@ -1875,6 +1875,8 @@ export default {
|
||||
back_parent: '返回上一级'
|
||||
},
|
||||
panel: {
|
||||
carousel: '轮播',
|
||||
switch_time: '切换时间',
|
||||
position_adjust: '位置',
|
||||
space_top: '上',
|
||||
space_left: '左',
|
||||
|
||||
@ -192,7 +192,7 @@
|
||||
@command="chartFieldEdit"
|
||||
>
|
||||
<span class="el-dropdown-link">
|
||||
<i class="el-icon-s-tools" />
|
||||
<i class="el-icon-s-tools"/>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
@ -267,7 +267,7 @@
|
||||
@command="chartFieldEdit"
|
||||
>
|
||||
<span class="el-dropdown-link">
|
||||
<i class="el-icon-s-tools" />
|
||||
<i class="el-icon-s-tools"/>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
@ -362,7 +362,7 @@
|
||||
style="padding: 6px;"
|
||||
>
|
||||
{{ $t('chart.change_chart_type') }}
|
||||
<i class="el-icon-caret-bottom" />
|
||||
<i class="el-icon-caret-bottom"/>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</span>
|
||||
@ -490,8 +490,8 @@
|
||||
>
|
||||
<span class="data-area-label">
|
||||
<span v-if="view.type && view.type.includes('table')">{{
|
||||
$t('chart.drag_block_table_data_column')
|
||||
}}</span>
|
||||
$t('chart.drag_block_table_data_column')
|
||||
}}</span>
|
||||
<span
|
||||
v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall' || view.type === 'area')"
|
||||
>{{ $t('chart.drag_block_type_axis') }}</span>
|
||||
@ -499,18 +499,18 @@
|
||||
v-else-if="view.type && view.type.includes('pie')"
|
||||
>{{ $t('chart.drag_block_pie_label') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('funnel')">{{
|
||||
$t('chart.drag_block_funnel_split')
|
||||
}}</span>
|
||||
$t('chart.drag_block_funnel_split')
|
||||
}}</span>
|
||||
<span v-else-if="view.type && view.type.includes('radar')">{{
|
||||
$t('chart.drag_block_radar_label')
|
||||
}}</span>
|
||||
$t('chart.drag_block_radar_label')
|
||||
}}</span>
|
||||
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('treemap')">{{
|
||||
$t('chart.drag_block_treemap_label')
|
||||
}}</span>
|
||||
$t('chart.drag_block_treemap_label')
|
||||
}}</span>
|
||||
<span v-else-if="view.type && view.type === 'word-cloud'">{{
|
||||
$t('chart.drag_block_word_cloud_label')
|
||||
}}</span>
|
||||
$t('chart.drag_block_word_cloud_label')
|
||||
}}</span>
|
||||
<span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
|
||||
<span v-show="view.type !== 'richTextView'"> / </span>
|
||||
<span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
|
||||
@ -633,8 +633,8 @@
|
||||
>
|
||||
<span class="data-area-label">
|
||||
<span v-if="view.type && view.type.includes('table')">{{
|
||||
$t('chart.drag_block_table_data_column')
|
||||
}}</span>
|
||||
$t('chart.drag_block_table_data_column')
|
||||
}}</span>
|
||||
<span
|
||||
v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall' || view.type === 'area')"
|
||||
>{{ $t('chart.drag_block_value_axis') }}</span>
|
||||
@ -642,30 +642,30 @@
|
||||
v-else-if="view.type && view.type.includes('pie')"
|
||||
>{{ $t('chart.drag_block_pie_angel') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('funnel')">{{
|
||||
$t('chart.drag_block_funnel_width')
|
||||
}}</span>
|
||||
$t('chart.drag_block_funnel_width')
|
||||
}}</span>
|
||||
<span v-else-if="view.type && view.type.includes('radar')">{{
|
||||
$t('chart.drag_block_radar_length')
|
||||
}}</span>
|
||||
$t('chart.drag_block_radar_length')
|
||||
}}</span>
|
||||
<span v-else-if="view.type && view.type.includes('gauge')">{{
|
||||
$t('chart.drag_block_gauge_angel')
|
||||
}}</span>
|
||||
$t('chart.drag_block_gauge_angel')
|
||||
}}</span>
|
||||
<span
|
||||
v-else-if="view.type && view.type.includes('text')"
|
||||
>{{ $t('chart.drag_block_label_value') }}</span>
|
||||
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
|
||||
<span v-else-if="view.type && view.type.includes('tree')">{{
|
||||
$t('chart.drag_block_treemap_size')
|
||||
}}</span>
|
||||
$t('chart.drag_block_treemap_size')
|
||||
}}</span>
|
||||
<span v-else-if="view.type && view.type === 'chart-mix'">{{
|
||||
$t('chart.drag_block_value_axis_main')
|
||||
}}</span>
|
||||
$t('chart.drag_block_value_axis_main')
|
||||
}}</span>
|
||||
<span
|
||||
v-else-if="view.type && view.type === 'liquid'"
|
||||
>{{ $t('chart.drag_block_progress') }}</span>
|
||||
<span v-else-if="view.type && view.type === 'word-cloud'">{{
|
||||
$t('chart.drag_block_word_cloud_size')
|
||||
}}</span>
|
||||
$t('chart.drag_block_word_cloud_size')
|
||||
}}</span>
|
||||
<span v-show="view.type !== 'richTextView'"> / </span>
|
||||
<span>{{ $t('chart.quota') }}</span>
|
||||
<i
|
||||
@ -1116,7 +1116,7 @@
|
||||
class="padding-tab"
|
||||
style="width: 350px;"
|
||||
>
|
||||
<position-adjust />
|
||||
<position-adjust/>
|
||||
</el-tab-pane>
|
||||
|
||||
</el-tabs>
|
||||
@ -1268,7 +1268,7 @@
|
||||
width="800px"
|
||||
class="dialog-css"
|
||||
>
|
||||
<quota-filter-editor :item="quotaItem" />
|
||||
<quota-filter-editor :item="quotaItem"/>
|
||||
<div
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
@ -1295,7 +1295,7 @@
|
||||
width="800px"
|
||||
class="dialog-css"
|
||||
>
|
||||
<dimension-filter-editor :item="dimensionItem" />
|
||||
<dimension-filter-editor :item="dimensionItem"/>
|
||||
<div
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
@ -1655,14 +1655,12 @@ import ScrollCfg from '@/views/chart/components/senior/ScrollCfg'
|
||||
import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
|
||||
import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
|
||||
import { equalsAny } from '@/utils/StringUtils'
|
||||
import MarginSelector from '@/views/chart/components/componentStyle/MarginSelector'
|
||||
import PositionAdjust from '@/views/chart/view/PositionAdjust'
|
||||
|
||||
export default {
|
||||
name: 'ChartEdit',
|
||||
components: {
|
||||
PositionAdjust,
|
||||
MarginSelector,
|
||||
ScrollCfg,
|
||||
CalcChartFieldEdit,
|
||||
ChartFieldEdit,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user