提交 0b125570 authored 作者: taojinlong's avatar taojinlong

Merge branch 'dev' of github.com:dataease/dataease into dev

...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
:track-menu="trackMenu" :track-menu="trackMenu"
:search-count="searchCount" :search-count="searchCount"
:terminal-type="scaleCoefficientType" :terminal-type="scaleCoefficientType"
:scale="scale"
@onChartClick="chartClick" @onChartClick="chartClick"
@onJumpClick="jumpClick" @onJumpClick="jumpClick"
/> />
...@@ -41,6 +42,7 @@ ...@@ -41,6 +42,7 @@
:chart="chart" :chart="chart"
:track-menu="trackMenu" :track-menu="trackMenu"
:search-count="searchCount" :search-count="searchCount"
:scale="scale"
@onChartClick="chartClick" @onChartClick="chartClick"
@onJumpClick="jumpClick" @onJumpClick="jumpClick"
/> />
...@@ -177,7 +179,8 @@ export default { ...@@ -177,7 +179,8 @@ export default {
pre: null, pre: null,
preCanvasPanel: null, preCanvasPanel: null,
sourceCustomAttrStr: null, sourceCustomAttrStr: null,
sourceCustomStyleStr: null sourceCustomStyleStr: null,
scale: 1
} }
}, },
...@@ -412,11 +415,11 @@ export default { ...@@ -412,11 +415,11 @@ export default {
}, },
// 根据仪表板的缩放比例,修改视图内部参数 // 根据仪表板的缩放比例,修改视图内部参数
mergeScale() { mergeScale() {
const scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient this.scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
const customAttrChart = JSON.parse(this.sourceCustomAttrStr) const customAttrChart = JSON.parse(this.sourceCustomAttrStr)
const customStyleChart = JSON.parse(this.sourceCustomStyleStr) const customStyleChart = JSON.parse(this.sourceCustomStyleStr)
recursionTransObj(customAttrTrans, customAttrChart, scale, this.scaleCoefficientType) recursionTransObj(customAttrTrans, customAttrChart, this.scale, this.scaleCoefficientType)
recursionTransObj(customStyleTrans, customStyleChart, scale, this.scaleCoefficientType) recursionTransObj(customStyleTrans, customStyleChart, this.scale, this.scaleCoefficientType)
// 移动端地图标签不显示 // 移动端地图标签不显示
if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') { if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') {
......
...@@ -96,10 +96,10 @@ export function panelInit(componentData, componentStyle) { ...@@ -96,10 +96,10 @@ export function panelInit(componentData, componentStyle) {
item.sizey = (item.sizey || 5) item.sizey = (item.sizey || 5)
// 初始化密度为最高密度 // 初始化密度为最高密度
if (componentStyle.aidedDesign.matrixBase !== 4) { if (componentStyle.aidedDesign.matrixBase !== 4) {
item.x = (item.x - 1) * componentStyle.aidedDesign.matrixBase + 1 item.x = (item.x - 1) * 4 + 1
item.y = (item.y - 1) * componentStyle.aidedDesign.matrixBase + 1 item.y = (item.y - 1) * 4 + 1
item.sizex = item.sizex * componentStyle.aidedDesign.matrixBase item.sizex = item.sizex * 4
item.sizey = item.sizey * componentStyle.aidedDesign.matrixBase item.sizey = item.sizey * 4
} }
item.mobileSelected = (item.mobileSelected || false) item.mobileSelected = (item.mobileSelected || false)
item.mobileStyle = (item.mobileStyle || deepCopy(BASE_MOBILE_STYLE)) item.mobileStyle = (item.mobileStyle || deepCopy(BASE_MOBILE_STYLE))
......
...@@ -55,7 +55,8 @@ export const DEFAULT_SIZE = { ...@@ -55,7 +55,8 @@ export const DEFAULT_SIZE = {
liquidOutlineDistance: 8, liquidOutlineDistance: 8,
liquidWaveLength: 128, liquidWaveLength: 128,
liquidWaveCount: 3, liquidWaveCount: 3,
liquidShape: 'circle' liquidShape: 'circle',
tablePageMode: 'page'
} }
export const DEFAULT_LABEL = { export const DEFAULT_LABEL = {
show: false, show: false,
......
import { componentStyle } from '../common/common' import { componentStyle } from '../common/common'
import { hexColorToRGBA } from '@/views/chart/chart/util' import { hexColorToRGBA } from '@/views/chart/chart/util'
import { DEFAULT_THRESHOLD } from '@/views/chart/chart/chart' import { DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
import { getScaleValue } from '@/components/canvas/utils/style'
export function baseGaugeOption(chart_option, chart) { export function baseGaugeOption(chart_option, chart, scale = 1) {
// 处理shape attr // 处理shape attr
let customAttr = {} let customAttr = {}
if (chart.customAttr) { if (chart.customAttr) {
...@@ -50,6 +51,25 @@ export function baseGaugeOption(chart_option, chart) { ...@@ -50,6 +51,25 @@ export function baseGaugeOption(chart_option, chart) {
value: chart.data.series[0].data[0] value: chart.data.series[0].data[0]
} }
chart_option.series[0].data.push(y) chart_option.series[0].data.push(y)
chart_option.series[0].axisTick = {
splitNumber: getScaleValue(5, scale), // 刻度间隔数
length: getScaleValue(10, scale), // 子刻度线长度
lineStyle: {
width: getScaleValue(2, scale) // 子刻度线宽度
}
}
chart_option.series[0].splitLine = {
length: getScaleValue(18, scale), // 刻度线长度
lineStyle: {
width: getScaleValue(2, scale) // 刻度线宽度
}
}
chart_option.series[0].axisLabel = {
distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
fontSize: getScaleValue(20, scale)// 刻度值字体大小
}
// threshold // threshold
if (chart.senior) { if (chart.senior) {
const range = [] const range = []
...@@ -87,29 +107,30 @@ export function baseGaugeOption(chart_option, chart) { ...@@ -87,29 +107,30 @@ export function baseGaugeOption(chart_option, chart) {
show: false show: false
} }
chart_option.series[0].axisTick = { chart_option.series[0].axisTick = {
splitNumber: 5, // TODO 刻度间隔数 splitNumber: getScaleValue(5, scale), // 刻度间隔数
length: 10, // TODO 子刻度线长度 length: getScaleValue(10, scale), // 子刻度线长度
lineStyle: { lineStyle: {
color: 'auto', color: 'auto',
width: 2// TODO 子刻度线宽度 width: getScaleValue(2, scale) // 子刻度线宽度
} }
} }
chart_option.series[0].splitLine = { chart_option.series[0].splitLine = {
length: 18, // TODO 刻度线长度 length: getScaleValue(18, scale), // 刻度线长度
lineStyle: { lineStyle: {
color: 'auto', color: 'auto',
width: 2// TODO 刻度线宽度 width: getScaleValue(2, scale) // 刻度线宽度
} }
} }
chart_option.series[0].axisLabel = { chart_option.series[0].axisLabel = {
color: 'auto', color: 'auto',
distance: 20, // TODO 刻度值文字里刻度线距离 distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
fontSize: 20// TODO 刻度值字体大小 fontSize: getScaleValue(20, scale)// 刻度值字体大小
} }
} }
} }
} }
} }
console.log(chart_option.series[0])
// console.log(chart_option); // console.log(chart_option);
componentStyle(chart_option, chart) componentStyle(chart_option, chart)
return chart_option return chart_option
......
import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv' import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv'
import { Gauge } from '@antv/g2plot' import { Gauge } from '@antv/g2plot'
import { DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart' import { DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
import { getScaleValue } from '@/components/canvas/utils/style'
export function baseGaugeOptionAntV(plot, container, chart, action) { export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
let max, labelContent, startAngel, endAngel let max, labelContent, startAngel, endAngel
// theme // theme
const theme = getTheme(chart) const theme = getTheme(chart)
...@@ -76,20 +77,20 @@ export function baseGaugeOptionAntV(plot, container, chart, action) { ...@@ -76,20 +77,20 @@ export function baseGaugeOptionAntV(plot, container, chart, action) {
axis: { axis: {
label: { label: {
style: { style: {
fontSize: 14// TODO 刻度值字体大小 fontSize: getScaleValue(14, scale) // 刻度值字体大小
} }
}, },
tickLine: { tickLine: {
length: -12, // TODO 刻度线长度 length: getScaleValue(12, scale) * -1, // 刻度线长度
style: { style: {
lineWidth: 1// TODO 刻度线宽度 lineWidth: getScaleValue(1, scale)// 刻度线宽度
} }
}, },
subTickLine: { subTickLine: {
count: 4, // TODO 子刻度数 count: 4, // 子刻度数
length: -6, // TODO 子刻度线长度 length: getScaleValue(6, scale) * -1, // 子刻度线长度
style: { style: {
lineWidth: 1// TODO 子刻度线宽度 lineWidth: getScaleValue(1, scale)// 子刻度线宽度
} }
} }
} }
...@@ -113,11 +114,21 @@ export function baseGaugeOptionAntV(plot, container, chart, action) { ...@@ -113,11 +114,21 @@ export function baseGaugeOptionAntV(plot, container, chart, action) {
}, },
pin: { pin: {
style: { style: {
stroke: theme.styleSheet.paletteQualitative10[index % theme.styleSheet.paletteQualitative10.length] stroke: theme.styleSheet.paletteQualitative10[index % theme.styleSheet.paletteQualitative10.length],
r: getScaleValue(10, scale)
}
}
}
} else {
options.indicator = {
pin: {
style: {
r: getScaleValue(10, scale)
} }
} }
} }
} }
console.log(options.indicator.pin)
// 开始渲染 // 开始渲染
if (plot) { if (plot) {
......
...@@ -115,6 +115,11 @@ export default { ...@@ -115,6 +115,11 @@ export default {
terminalType: { terminalType: {
type: String, type: String,
default: 'pc' default: 'pc'
},
scale: {
type: Number,
required: false,
default: 1
} }
}, },
data() { data() {
...@@ -210,7 +215,7 @@ export default { ...@@ -210,7 +215,7 @@ export default {
} else if (chart.type === 'radar') { } else if (chart.type === 'radar') {
chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart) chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
} else if (chart.type === 'gauge') { } else if (chart.type === 'gauge') {
chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart) chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart, this.scale)
} else if (chart.type === 'scatter') { } else if (chart.type === 'scatter') {
chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart, this.terminalType) chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart, this.terminalType)
} else if (chart.type === 'treemap') { } else if (chart.type === 'treemap') {
......
...@@ -50,6 +50,11 @@ export default { ...@@ -50,6 +50,11 @@ export default {
type: Number, type: Number,
required: false, required: false,
default: 0 default: 0
},
scale: {
type: Number,
required: false,
default: 1
} }
}, },
data() { data() {
...@@ -153,7 +158,7 @@ export default { ...@@ -153,7 +158,7 @@ export default {
} else if (chart.type === 'radar') { } else if (chart.type === 'radar') {
this.myChart = baseRadarOptionAntV(this.myChart, this.chartId, chart, this.antVAction) this.myChart = baseRadarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'gauge') { } else if (chart.type === 'gauge') {
this.myChart = baseGaugeOptionAntV(this.myChart, this.chartId, chart, this.antVAction) this.myChart = baseGaugeOptionAntV(this.myChart, this.chartId, chart, this.antVAction, this.scale)
} else if (chart.type === 'pie') { } else if (chart.type === 'pie') {
this.myChart = basePieOptionAntV(this.myChart, this.chartId, chart, this.antVAction) this.myChart = basePieOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'pie-rose') { } else if (chart.type === 'pie-rose') {
......
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
</span> </span>
<div ref="tableContainer" style="width: 100%;overflow: hidden;" :style="{background:container_bg_class.background}"> <div ref="tableContainer" style="width: 100%;overflow: hidden;" :style="{background:container_bg_class.background}">
<div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" /> <div v-if="chart.type === 'table-normal'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'" />
<div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? 'table-dom-info-drill' : 'table-dom-info'" /> <div v-if="chart.type === 'table-info'" :id="chartId" style="width: 100%;overflow: hidden;" :class="chart.drill ? (showPage ? 'table-dom-info-drill' : 'table-dom-info-drill-pull') : (showPage ? 'table-dom-info' : 'table-dom-info-pull')" />
<div v-if="chart.type === 'table-pivot'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" /> <div v-if="chart.type === 'table-pivot'" :id="chartId" style="width: 100%;overflow: hidden;" class="table-dom-normal" />
<el-row v-show="chart.type === 'table-info'" class="table-page"> <el-row v-show="showPage" class="table-page">
<span class="total-style"> <span class="total-style">
{{ $t('chart.total') }} {{ $t('chart.total') }}
<span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span> <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
...@@ -99,7 +99,8 @@ export default { ...@@ -99,7 +99,8 @@ export default {
pageSize: 20, pageSize: 20,
show: 0 show: 0
}, },
tableData: [] tableData: [],
showPage: false
} }
}, },
...@@ -135,17 +136,19 @@ export default { ...@@ -135,17 +136,19 @@ export default {
methods: { methods: {
initData() { initData() {
let datas = [] let datas = []
this.showPage = false
if (this.chart.data && this.chart.data.fields) { if (this.chart.data && this.chart.data.fields) {
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields)) this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
const attr = JSON.parse(this.chart.customAttr) const attr = JSON.parse(this.chart.customAttr)
this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20) this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
datas = JSON.parse(JSON.stringify(this.chart.data.tableRow)) datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
if (this.chart.type === 'table-info') { if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && datas.length > this.currentPage.pageSize) {
// 计算分页 // 计算分页
this.currentPage.show = datas.length this.currentPage.show = datas.length
const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
const pageEnd = pageStart + this.currentPage.pageSize const pageEnd = pageStart + this.currentPage.pageSize
datas = datas.slice(pageStart, pageEnd) datas = datas.slice(pageStart, pageEnd)
this.showPage = true
} }
} else { } else {
this.fields = [] this.fields = []
...@@ -380,12 +383,18 @@ export default { ...@@ -380,12 +383,18 @@ export default {
.table-dom-info{ .table-dom-info{
height:calc(100% - 36px); height:calc(100% - 36px);
} }
.table-dom-info-pull{
height:calc(100%);
}
.table-dom-normal{ .table-dom-normal{
height:100%; height:100%;
} }
.table-dom-info-drill{ .table-dom-info-drill{
height:calc(100% - 36px - 12px); height:calc(100% - 36px - 12px);
} }
.table-dom-info-drill-pull{
height:calc(100% - 12px);
}
.table-dom-normal-drill{ .table-dom-normal-drill{
height:calc(100% - 12px); height:calc(100% - 12px);
} }
...@@ -409,4 +418,10 @@ export default { ...@@ -409,4 +418,10 @@ export default {
.page-style >>> .el-input__inner{ .page-style >>> .el-input__inner{
height: 24px; height: 24px;
} }
.page-style >>> button{
background: transparent!important;
}
.page-style >>> li{
background: transparent!important;
}
</style> </style>
...@@ -84,7 +84,13 @@ ...@@ -84,7 +84,13 @@
</el-form> </el-form>
<el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini"> <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :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-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_mode')" class="form-item">
<el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase">
<el-option :label="$t('chart.page_mode_page')" value="page" />
<el-option :label="$t('chart.page_mode_pull')" value="pull" />
</el-select>
</el-form-item>
<el-form-item v-show="chart.type && chart.type === 'table-info' && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
<el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase"> <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
<el-option <el-option
v-for="item in pageSizeOptions" v-for="item in pageSizeOptions"
...@@ -110,6 +116,9 @@ ...@@ -110,6 +116,9 @@
<el-form-item :label="$t('chart.table_item_height')" class="form-item form-item-slider"> <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="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_column_width_config')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="1000" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
</el-form-item>
</el-form> </el-form>
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini"> <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
...@@ -340,6 +349,7 @@ export default { ...@@ -340,6 +349,7 @@ export default {
this.sizeForm.liquidWaveLength = this.sizeForm.liquidWaveLength ? this.sizeForm.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength this.sizeForm.liquidWaveLength = this.sizeForm.liquidWaveLength ? this.sizeForm.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength
this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
this.sizeForm.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
} }
} }
......
...@@ -81,7 +81,13 @@ ...@@ -81,7 +81,13 @@
</el-form> </el-form>
<el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini"> <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :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-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_mode')" class="form-item">
<el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase">
<el-option :label="$t('chart.page_mode_page')" value="page" />
<el-option :label="$t('chart.page_mode_pull')" value="pull" />
</el-select>
</el-form-item>
<el-form-item v-show="chart.type && chart.type === 'table-info' && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
<el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase"> <el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
<el-option <el-option
v-for="item in pageSizeOptions" v-for="item in pageSizeOptions"
...@@ -355,6 +361,7 @@ export default { ...@@ -355,6 +361,7 @@ export default {
this.sizeForm.liquidWaveLength = this.sizeForm.liquidWaveLength ? this.sizeForm.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength this.sizeForm.liquidWaveLength = this.sizeForm.liquidWaveLength ? this.sizeForm.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength
this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount this.sizeForm.liquidWaveCount = this.sizeForm.liquidWaveCount ? this.sizeForm.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount
this.sizeForm.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize 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.tableColumnMode = this.sizeForm.tableColumnMode ? this.sizeForm.tableColumnMode : DEFAULT_SIZE.tableColumnMode
......
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
:resizable="true" :resizable="true"
sortable sortable
:title="field.name" :title="field.name"
:width="columnWidth"
> >
<!-- <template slot="header">--> <!-- <template slot="header">-->
<!-- <span>{{ field.name }}</span>--> <!-- <span>{{ field.name }}</span>-->
...@@ -30,7 +31,7 @@ ...@@ -30,7 +31,7 @@
</ux-table-column> </ux-table-column>
</ux-grid> </ux-grid>
<el-row v-show="chart.type === 'table-info'" class="table-page"> <el-row v-show="showPage" class="table-page">
<span class="total-style"> <span class="total-style">
{{ $t('chart.total') }} {{ $t('chart.total') }}
<span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span> <span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
...@@ -56,6 +57,7 @@ ...@@ -56,6 +57,7 @@
<script> <script>
import { hexColorToRGBA } from '../../chart/util' import { hexColorToRGBA } from '../../chart/util'
import eventBus from '@/components/canvas/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
export default { export default {
name: 'TableNormal', name: 'TableNormal',
...@@ -118,7 +120,9 @@ export default { ...@@ -118,7 +120,9 @@ export default {
page: 1, page: 1,
pageSize: 20, pageSize: 20,
show: 0 show: 0
} },
showPage: false,
columnWidth: DEFAULT_SIZE.tableColumnWidth
} }
}, },
computed: { computed: {
...@@ -162,17 +166,29 @@ export default { ...@@ -162,17 +166,29 @@ export default {
initData() { initData() {
const that = this const that = this
let datas = [] let datas = []
this.showPage = false
if (this.chart.data) { if (this.chart.data) {
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields)) this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
const attr = JSON.parse(this.chart.customAttr) const attr = JSON.parse(this.chart.customAttr)
this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20) this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
// column width
const containerWidth = this.$refs.tableContainer.offsetWidth
const columnWidth = attr.size.tableColumnWidth ? attr.size.tableColumnWidth : this.columnWidth
if (columnWidth < (containerWidth / this.fields.length)) {
this.columnWidth = containerWidth / this.fields
} else {
this.columnWidth = columnWidth
}
datas = JSON.parse(JSON.stringify(this.chart.data.tableRow)) datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
if (this.chart.type === 'table-info') { if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && datas.length > this.currentPage.pageSize) {
// 计算分页 // 计算分页
this.currentPage.show = datas.length this.currentPage.show = datas.length
const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
const pageEnd = pageStart + this.currentPage.pageSize const pageEnd = pageStart + this.currentPage.pageSize
datas = datas.slice(pageStart, pageEnd) datas = datas.slice(pageStart, pageEnd)
this.showPage = true
} }
} else { } else {
this.fields = [] this.fields = []
...@@ -191,7 +207,7 @@ export default { ...@@ -191,7 +207,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
if (this.$refs.tableContainer) { if (this.$refs.tableContainer) {
let pageHeight = 0 let pageHeight = 0
if (this.chart.type === 'table-info') { if (this.showPage) {
pageHeight = 36 pageHeight = 36
} }
const currentHeight = this.$refs.tableContainer.offsetHeight const currentHeight = this.$refs.tableContainer.offsetHeight
...@@ -378,4 +394,10 @@ export default { ...@@ -378,4 +394,10 @@ export default {
.page-style >>> .el-input__inner{ .page-style >>> .el-input__inner{
height: 24px; height: 24px;
} }
.page-style >>> button{
background: transparent!important;
}
.page-style >>> li{
background: transparent!important;
}
</style> </style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论