forked from github/dataease
commit
79f2de8f2e
@ -14,7 +14,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/g2plot": "^2.3.32",
|
||||
"@antv/s2": "^1.6.0",
|
||||
"@antv/s2": "^1.7.0",
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"@tinymce/tinymce-vue": "^3.2.8",
|
||||
"axios": "^0.21.1",
|
||||
|
@ -37,6 +37,16 @@
|
||||
@onChartClick="chartClick"
|
||||
@onJumpClick="jumpClick"
|
||||
/>
|
||||
<chart-component-s2
|
||||
v-if="charViewS2ShowFlag"
|
||||
:ref="element.propValue.id"
|
||||
class="chart-class"
|
||||
:chart="chart"
|
||||
:track-menu="trackMenu"
|
||||
:search-count="searchCount"
|
||||
@onChartClick="chartClick"
|
||||
@onJumpClick="jumpClick"
|
||||
/>
|
||||
<table-normal
|
||||
v-if="tableShowFlag"
|
||||
:ref="element.propValue.id"
|
||||
@ -71,10 +81,11 @@ import { areaMapping } from '@/api/map/map'
|
||||
import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
|
||||
import EditBarView from '@/components/canvas/components/Editor/EditBarView'
|
||||
import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
|
||||
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
|
||||
|
||||
export default {
|
||||
name: 'UserView',
|
||||
components: { EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
|
||||
components: { ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
@ -169,8 +180,11 @@ export default {
|
||||
charViewG2ShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
|
||||
},
|
||||
charViewS2ShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
|
||||
},
|
||||
tableShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && this.chart.type.includes('table')
|
||||
return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && this.renderComponent() === 'echarts'
|
||||
},
|
||||
labelShowFlag() {
|
||||
return this.httpRequest.status && this.chart.type && this.chart.type.includes('text')
|
||||
|
@ -1016,7 +1016,11 @@ export default {
|
||||
filter_exp: 'Filter Value',
|
||||
filter_type: 'Filter Type',
|
||||
filter_value_can_not_str: 'Value type can not input string',
|
||||
enum_value_can_not_null: 'Enum Value can not empty.'
|
||||
enum_value_can_not_null: 'Enum Value can not empty.',
|
||||
table_config: 'Table Config',
|
||||
table_column_width_config: 'Column Width',
|
||||
table_column_adapt: 'Adapt',
|
||||
table_column_custom: 'Custom'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
|
||||
|
@ -1016,7 +1016,11 @@ export default {
|
||||
filter_exp: '過濾值',
|
||||
filter_type: '過濾方式',
|
||||
filter_value_can_not_str: '數值類型字段過濾值不能包含文本',
|
||||
enum_value_can_not_null: '字段枚舉值不能為空'
|
||||
enum_value_can_not_null: '字段枚舉值不能為空',
|
||||
table_config: '表格配置',
|
||||
table_column_width_config: '列寬調整',
|
||||
table_column_adapt: '自適應',
|
||||
table_column_custom: '自定義'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多個 Sheet 頁,默認抽取第一個',
|
||||
|
@ -1018,7 +1018,11 @@ export default {
|
||||
filter_exp: '过滤值',
|
||||
filter_type: '过滤方式',
|
||||
filter_value_can_not_str: '数值类型字段过滤值不能包含文本',
|
||||
enum_value_can_not_null: '字段枚举值不能为空'
|
||||
enum_value_can_not_null: '字段枚举值不能为空',
|
||||
table_config: '表格配置',
|
||||
table_column_width_config: '列宽调整',
|
||||
table_column_adapt: '自适应',
|
||||
table_column_custom: '自定义'
|
||||
},
|
||||
dataset: {
|
||||
sheet_warn: '有多个 Sheet 页,默认抽取第一个',
|
||||
|
@ -31,6 +31,8 @@ export const DEFAULT_SIZE = {
|
||||
tableTitleHeight: 36,
|
||||
tableItemHeight: 36,
|
||||
tablePageSize: '20',
|
||||
tableColumnMode: 'adapt',
|
||||
tableColumnWidth: 100,
|
||||
gaugeMin: 0,
|
||||
gaugeMax: 100,
|
||||
gaugeStartAngle: 225,
|
||||
|
76
frontend/src/views/chart/chart/common/common_table.js
Normal file
76
frontend/src/views/chart/chart/common/common_table.js
Normal file
@ -0,0 +1,76 @@
|
||||
import { hexColorToRGBA } from '@/views/chart/chart/util'
|
||||
import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
|
||||
|
||||
export function getCustomTheme(chart) {
|
||||
const theme = {
|
||||
background: {
|
||||
color: '#00000000'
|
||||
},
|
||||
colCell: {
|
||||
cell: {
|
||||
backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
|
||||
},
|
||||
bolderText: {
|
||||
fill: DEFAULT_COLOR_CASE.tableFontColor,
|
||||
fontSize: DEFAULT_SIZE.tableTitleFontSize
|
||||
}
|
||||
},
|
||||
dataCell: {
|
||||
cell: {
|
||||
backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableItemBgColor, DEFAULT_COLOR_CASE.alpha)
|
||||
},
|
||||
text: {
|
||||
fill: DEFAULT_COLOR_CASE.tableFontColor,
|
||||
fontSize: DEFAULT_SIZE.tableItemFontSize
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let customAttr = {}
|
||||
if (chart.customAttr) {
|
||||
customAttr = JSON.parse(chart.customAttr)
|
||||
// color
|
||||
if (customAttr.color) {
|
||||
const c = JSON.parse(JSON.stringify(customAttr.color))
|
||||
theme.colCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
|
||||
theme.colCell.bolderText.fill = c.tableFontColor
|
||||
theme.dataCell.cell.backgroundColor = hexColorToRGBA(c.tableItemBgColor, c.alpha)
|
||||
theme.dataCell.text.fill = c.tableFontColor
|
||||
}
|
||||
// size
|
||||
if (customAttr.size) {
|
||||
const s = JSON.parse(JSON.stringify(customAttr.size))
|
||||
theme.colCell.bolderText.fontSize = parseInt(s.tableTitleFontSize)
|
||||
theme.dataCell.text.fontSize = parseInt(s.tableItemFontSize)
|
||||
}
|
||||
}
|
||||
|
||||
return theme
|
||||
}
|
||||
|
||||
export function getSize(chart) {
|
||||
const size = {}
|
||||
let customAttr = {}
|
||||
if (chart.customAttr) {
|
||||
customAttr = JSON.parse(chart.customAttr)
|
||||
// size
|
||||
if (customAttr.size) {
|
||||
const s = JSON.parse(JSON.stringify(customAttr.size))
|
||||
size.colCfg = {
|
||||
height: s.tableTitleHeight
|
||||
}
|
||||
size.cellCfg = {
|
||||
height: s.tableItemHeight
|
||||
}
|
||||
if (!s.tableColumnMode || s.tableColumnMode === 'adapt') {
|
||||
delete size.cellCfg.width
|
||||
size.layoutWidthType = 'compact'
|
||||
} else {
|
||||
delete size.layoutWidthType
|
||||
size.cellCfg.width = s.tableColumnWidth
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return size
|
||||
}
|
108
frontend/src/views/chart/chart/table/table-info.js
Normal file
108
frontend/src/views/chart/chart/table/table-info.js
Normal file
@ -0,0 +1,108 @@
|
||||
import { TableSheet } from '@antv/s2'
|
||||
import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
|
||||
|
||||
export function baseTableInfo(s2, container, chart, action, tableData) {
|
||||
const containerDom = document.getElementById(container)
|
||||
|
||||
// data
|
||||
const fields = chart.data.fields
|
||||
if (!fields || fields.length === 0) {
|
||||
if (s2) {
|
||||
s2.destroy()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
const columns = []
|
||||
const meta = []
|
||||
fields.forEach(ele => {
|
||||
columns.push(ele.dataeaseName)
|
||||
|
||||
meta.push({
|
||||
field: ele.dataeaseName,
|
||||
name: ele.name
|
||||
})
|
||||
})
|
||||
|
||||
// data config
|
||||
const s2DataConfig = {
|
||||
fields: {
|
||||
columns: columns
|
||||
},
|
||||
meta: meta,
|
||||
data: tableData
|
||||
}
|
||||
|
||||
// options
|
||||
const s2Options = {
|
||||
width: containerDom.offsetWidth,
|
||||
height: containerDom.offsetHeight,
|
||||
// showSeriesNumber: true
|
||||
style: getSize(chart)
|
||||
}
|
||||
|
||||
// 开始渲染
|
||||
if (s2) {
|
||||
s2.destroy()
|
||||
}
|
||||
s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
|
||||
|
||||
// theme
|
||||
const customTheme = getCustomTheme(chart)
|
||||
s2.setThemeCfg({ theme: customTheme })
|
||||
|
||||
return s2
|
||||
}
|
||||
|
||||
export function baseTableNormal(s2, container, chart, action, tableData) {
|
||||
const containerDom = document.getElementById(container)
|
||||
|
||||
// data
|
||||
const fields = chart.data.fields
|
||||
if (!fields || fields.length === 0) {
|
||||
if (s2) {
|
||||
s2.destroy()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
const columns = []
|
||||
const meta = []
|
||||
fields.forEach(ele => {
|
||||
columns.push(ele.dataeaseName)
|
||||
|
||||
meta.push({
|
||||
field: ele.dataeaseName,
|
||||
name: ele.name
|
||||
})
|
||||
})
|
||||
|
||||
// data config
|
||||
const s2DataConfig = {
|
||||
fields: {
|
||||
columns: columns
|
||||
},
|
||||
meta: meta,
|
||||
data: tableData
|
||||
}
|
||||
|
||||
// options
|
||||
const s2Options = {
|
||||
width: containerDom.offsetWidth,
|
||||
height: containerDom.offsetHeight,
|
||||
// showSeriesNumber: true
|
||||
style: getSize(chart)
|
||||
}
|
||||
|
||||
// 开始渲染
|
||||
if (s2) {
|
||||
s2.destroy()
|
||||
}
|
||||
s2 = new TableSheet(containerDom, s2DataConfig, s2Options)
|
||||
|
||||
// theme
|
||||
const customTheme = getCustomTheme(chart)
|
||||
s2.setThemeCfg({ theme: customTheme })
|
||||
|
||||
return s2
|
||||
}
|
368
frontend/src/views/chart/components/ChartComponentS2.vue
Normal file
368
frontend/src/views/chart/components/ChartComponentS2.vue
Normal file
@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<div ref="chartContainer" style="padding: 0;width: 100%;height: 100%;overflow: hidden;" :style="bg_class">
|
||||
<view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
|
||||
<span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
|
||||
<p style="padding:6px 10px 0 10px;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;">{{ chart.title }}</p>
|
||||
</span>
|
||||
<div style="width: 100%;overflow: hidden;padding: 8px;" :style="{height:chartHeight,background:container_bg_class.background}">
|
||||
<div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
|
||||
<div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-info" />
|
||||
<el-row v-show="chart.type === 'table-info'" class="table-page">
|
||||
<span class="total-style">
|
||||
{{ $t('chart.total') }}
|
||||
<span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
|
||||
{{ $t('chart.items') }}
|
||||
</span>
|
||||
<el-pagination
|
||||
small
|
||||
:current-page="currentPage.page"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
:page-size="currentPage.pageSize"
|
||||
:pager-count="5"
|
||||
layout="prev, pager, next"
|
||||
:total="currentPage.show"
|
||||
class="page-style"
|
||||
@current-change="pageClick"
|
||||
@size-change="pageChange"
|
||||
/>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from 'vue-uuid'
|
||||
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
|
||||
import { hexColorToRGBA } from '@/views/chart/chart/util'
|
||||
import { baseTableInfo, baseTableNormal } from '@/views/chart/chart/table/table-info'
|
||||
|
||||
export default {
|
||||
name: 'ChartComponentS2',
|
||||
components: { ViewTrackBar },
|
||||
props: {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
filter: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
trackMenu: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return ['drill']
|
||||
}
|
||||
},
|
||||
searchCount: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
chartId: uuid.v1(),
|
||||
showTrackBar: true,
|
||||
trackBarStyle: {
|
||||
position: 'absolute',
|
||||
left: '0px',
|
||||
top: '0px'
|
||||
},
|
||||
pointParam: null,
|
||||
dynamicAreaCode: null,
|
||||
borderRadius: '0px',
|
||||
chartHeight: '100%',
|
||||
title_class: {
|
||||
margin: '0 0',
|
||||
width: '100%',
|
||||
fontSize: '18px',
|
||||
color: '#303133',
|
||||
textAlign: 'left',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'normal',
|
||||
background: hexColorToRGBA('#ffffff', 0)
|
||||
},
|
||||
container_bg_class: {
|
||||
background: hexColorToRGBA('#ffffff', 0)
|
||||
},
|
||||
title_show: true,
|
||||
antVRenderStatus: false,
|
||||
currentPage: {
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
show: 0
|
||||
},
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
trackBarStyleTime() {
|
||||
return this.trackBarStyle
|
||||
},
|
||||
bg_class() {
|
||||
return {
|
||||
borderRadius: this.borderRadius
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chart: {
|
||||
handler(newVal, oldVla) {
|
||||
this.initData()
|
||||
this.initTitle()
|
||||
this.calcHeightDelay()
|
||||
new Promise((resolve) => { resolve() }).then(() => {
|
||||
this.drawView()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
resize() {
|
||||
this.drawEcharts()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.preDraw()
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
let datas = []
|
||||
if (this.chart.data) {
|
||||
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
|
||||
const attr = JSON.parse(this.chart.customAttr)
|
||||
this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
|
||||
datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
|
||||
if (this.chart.type === 'table-info') {
|
||||
// 计算分页
|
||||
this.currentPage.show = datas.length
|
||||
const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
|
||||
const pageEnd = pageStart + this.currentPage.pageSize
|
||||
datas = datas.slice(pageStart, pageEnd)
|
||||
}
|
||||
} else {
|
||||
this.fields = []
|
||||
datas = []
|
||||
this.resetPage()
|
||||
}
|
||||
this.tableData = datas
|
||||
},
|
||||
preDraw() {
|
||||
this.initData()
|
||||
this.initTitle()
|
||||
this.calcHeightDelay()
|
||||
new Promise((resolve) => { resolve() }).then(() => {
|
||||
this.drawView()
|
||||
})
|
||||
const that = this
|
||||
window.onresize = function() {
|
||||
that.initData()
|
||||
that.initTitle()
|
||||
that.calcHeightDelay()
|
||||
new Promise((resolve) => { resolve() }).then(() => {
|
||||
that.drawView()
|
||||
})
|
||||
}
|
||||
},
|
||||
drawView() {
|
||||
const chart = this.chart
|
||||
// type
|
||||
// if (chart.data) {
|
||||
this.antVRenderStatus = true
|
||||
if (!chart.data || (!chart.data.datas && !chart.data.series)) {
|
||||
chart.data = {
|
||||
datas: [{}],
|
||||
series: [
|
||||
{
|
||||
data: [0]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
if (chart.type === 'table-info') {
|
||||
this.myChart = baseTableInfo(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
|
||||
} else if (chart.type === 'table-normal') {
|
||||
this.myChart = baseTableNormal(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
|
||||
} else {
|
||||
if (this.myChart) {
|
||||
this.antVRenderStatus = false
|
||||
this.myChart.destroy()
|
||||
}
|
||||
}
|
||||
|
||||
if (this.myChart && this.searchCount > 0) {
|
||||
this.myChart.options.animation = false
|
||||
}
|
||||
|
||||
if (this.myChart && this.antVRenderStatus) {
|
||||
this.myChart.render()
|
||||
}
|
||||
this.setBackGroundBorder()
|
||||
},
|
||||
|
||||
antVAction(param) {
|
||||
console.log(param)
|
||||
if (this.chart.type === 'treemap') {
|
||||
this.pointParam = param.data.data
|
||||
} else {
|
||||
this.pointParam = param.data
|
||||
}
|
||||
if (this.trackMenu.length < 2) { // 只有一个事件直接调用
|
||||
this.trackClick(this.trackMenu[0])
|
||||
} else { // 视图关联多个事件
|
||||
this.trackBarStyle.left = param.x + 'px'
|
||||
this.trackBarStyle.top = (param.y + 10) + 'px'
|
||||
this.$refs.viewTrack.trackButtonClick()
|
||||
}
|
||||
},
|
||||
setBackGroundBorder() {
|
||||
if (this.chart.customStyle) {
|
||||
const customStyle = JSON.parse(this.chart.customStyle)
|
||||
if (customStyle.background) {
|
||||
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
|
||||
}
|
||||
}
|
||||
},
|
||||
chartResize() {
|
||||
this.initData()
|
||||
this.initTitle()
|
||||
this.calcHeightDelay()
|
||||
new Promise((resolve) => { resolve() }).then(() => {
|
||||
this.drawView()
|
||||
})
|
||||
},
|
||||
trackClick(trackAction) {
|
||||
const param = this.pointParam
|
||||
if (!param || !param.data || !param.data.dimensionList) {
|
||||
// 地图提示没有关联字段 其他没有维度信息的 直接返回
|
||||
if (this.chart.type === 'map') {
|
||||
this.$warning(this.$t('panel.no_drill_field'))
|
||||
}
|
||||
return
|
||||
}
|
||||
const linkageParam = {
|
||||
option: 'linkage',
|
||||
viewId: this.chart.id,
|
||||
dimensionList: this.pointParam.data.dimensionList,
|
||||
quotaList: this.pointParam.data.quotaList
|
||||
}
|
||||
const jumpParam = {
|
||||
option: 'jump',
|
||||
viewId: this.chart.id,
|
||||
dimensionList: this.pointParam.data.dimensionList,
|
||||
quotaList: this.pointParam.data.quotaList
|
||||
}
|
||||
switch (trackAction) {
|
||||
case 'drill':
|
||||
this.$emit('onChartClick', this.pointParam)
|
||||
break
|
||||
case 'linkage':
|
||||
this.$store.commit('addViewTrackFilter', linkageParam)
|
||||
break
|
||||
case 'jump':
|
||||
this.$emit('onJumpClick', jumpParam)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
// title and bg
|
||||
initTitle() {
|
||||
if (this.chart.customStyle) {
|
||||
const customStyle = JSON.parse(this.chart.customStyle)
|
||||
if (customStyle.text) {
|
||||
this.title_show = customStyle.text.show
|
||||
// this.title_class.fontSize = customStyle.text.fontSize + 'px'
|
||||
this.title_class.color = customStyle.text.color
|
||||
this.title_class.textAlign = customStyle.text.hPosition
|
||||
this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
|
||||
this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
|
||||
|
||||
if (this.$refs.title) {
|
||||
this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px'
|
||||
}
|
||||
}
|
||||
if (customStyle.background) {
|
||||
this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
|
||||
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
|
||||
|
||||
this.container_bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
calcHeightRightNow() {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.chartContainer) {
|
||||
const currentHeight = this.$refs.chartContainer.offsetHeight
|
||||
if (this.$refs.title) {
|
||||
const titleHeight = this.$refs.title.offsetHeight
|
||||
this.chartHeight = (currentHeight - titleHeight) + 'px'
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
calcHeightDelay() {
|
||||
this.calcHeightRightNow()
|
||||
setTimeout(() => {
|
||||
this.calcHeightRightNow()
|
||||
}, 100)
|
||||
},
|
||||
|
||||
pageChange(val) {
|
||||
this.currentPage.pageSize = val
|
||||
this.initData()
|
||||
this.drawView()
|
||||
},
|
||||
|
||||
pageClick(val) {
|
||||
this.currentPage.page = val
|
||||
this.initData()
|
||||
this.drawView()
|
||||
},
|
||||
|
||||
resetPage() {
|
||||
this.currentPage = {
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
show: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table-dom-info{
|
||||
height:calc(100% - 36px);
|
||||
}
|
||||
.table-dom-normal{
|
||||
height:100%;
|
||||
}
|
||||
.table-page{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.page-style{
|
||||
margin-right: auto;
|
||||
}
|
||||
.total-style{
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.page-style >>> .el-input__inner{
|
||||
height: 24px;
|
||||
}
|
||||
</style>
|
@ -81,6 +81,16 @@
|
||||
</el-form>
|
||||
|
||||
<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-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
|
||||
<el-option
|
||||
v-for="item in pageSizeOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<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" />
|
||||
@ -92,20 +102,29 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.table_title_height')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
<el-slider v-model="sizeForm.tableTitleHeight" :min="20" :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 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-slider v-model="sizeForm.tableItemHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
|
||||
<el-option
|
||||
v-for="item in pageSizeOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-form-item :label="$t('chart.table_column_width_config')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase">
|
||||
<el-radio label="adapt"><span>{{ $t('chart.table_column_adapt') }}</span></el-radio>
|
||||
<el-radio label="custom">
|
||||
<span>{{ $t('chart.table_column_custom') }}</span>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<el-tooltip class="item" effect="dark" placement="bottom">
|
||||
<div slot="content">
|
||||
列宽并非任何时候都能生效。
|
||||
<br>
|
||||
容器宽度优先级高于列宽,即(表格容器宽度 / 列数 > 指定列宽),则列宽优先取(容器宽度 / 列数)。
|
||||
</div>
|
||||
<i class="el-icon-info" style="cursor: pointer;color: #606266;margin-left: 4px;" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="sizeForm.tableColumnMode === 'custom'" label="" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.tableColumnWidth" :min="100" :max="500" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@ -322,6 +341,9 @@ export default {
|
||||
this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
|
||||
|
||||
this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
|
||||
|
||||
this.sizeForm.tableColumnMode = this.sizeForm.tableColumnMode ? this.sizeForm.tableColumnMode : DEFAULT_SIZE.tableColumnMode
|
||||
this.sizeForm.tableColumnWidth = this.sizeForm.tableColumnWidth ? this.sizeForm.tableColumnWidth : DEFAULT_SIZE.tableColumnWidth
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -361,7 +383,9 @@ export default {
|
||||
.el-select-dropdown__item{
|
||||
padding: 0 20px;
|
||||
}
|
||||
span{font-size: 12px}
|
||||
span{
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.el-form-item{
|
||||
margin-bottom: 6px;
|
||||
|
@ -565,7 +565,7 @@
|
||||
<el-collapse-item
|
||||
v-show="view.render && view.render === 'antv' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud' && chart.type !== 'treemap'"
|
||||
name="size"
|
||||
:title="$t('chart.size')"
|
||||
:title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
|
||||
>
|
||||
<size-selector-ant-v
|
||||
:param="param"
|
||||
@ -769,8 +769,16 @@
|
||||
class="chart-class"
|
||||
@onChartClick="chartClick"
|
||||
/>
|
||||
<chart-component-s2
|
||||
v-if="httpRequest.status && chart.type && chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'"
|
||||
ref="dynamicChart"
|
||||
:chart-id="chart.id"
|
||||
:chart="chart"
|
||||
class="chart-class"
|
||||
@onChartClick="chartClick"
|
||||
/>
|
||||
<table-normal
|
||||
v-if="httpRequest.status && chart.type && chart.type.includes('table')"
|
||||
v-if="httpRequest.status && chart.type && chart.type.includes('table') && renderComponent() === 'echarts'"
|
||||
:show-summary="chart.type === 'table-normal'"
|
||||
:chart="chart"
|
||||
class="table-class"
|
||||
@ -973,10 +981,12 @@ import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAn
|
||||
import SplitSelectorAntV from '@/views/chart/components/component-style/SplitSelectorAntV'
|
||||
import CompareEdit from '@/views/chart/components/compare/CompareEdit'
|
||||
import { compareItem } from '@/views/chart/chart/compare'
|
||||
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
|
||||
|
||||
export default {
|
||||
name: 'ChartEdit',
|
||||
components: {
|
||||
ChartComponentS2,
|
||||
CompareEdit,
|
||||
SplitSelectorAntV,
|
||||
SizeSelectorAntV,
|
||||
|
Loading…
Reference in New Issue
Block a user