dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
taojinlong 2022-04-20 15:43:47 +08:00
commit 0b12557071
11 changed files with 137 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,6 +31,7 @@
:track-menu="trackMenu"
:search-count="searchCount"
:terminal-type="scaleCoefficientType"
:scale="scale"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
/>
@ -41,6 +42,7 @@
:chart="chart"
:track-menu="trackMenu"
:search-count="searchCount"
:scale="scale"
@onChartClick="chartClick"
@onJumpClick="jumpClick"
/>
@ -177,7 +179,8 @@ export default {
pre: null,
preCanvasPanel: null,
sourceCustomAttrStr: null,
sourceCustomStyleStr: null
sourceCustomStyleStr: null,
scale: 1
}
},
@ -412,11 +415,11 @@ export default {
},
// 根据仪表板的缩放比例，修改视图内部参数
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 customStyleChart = JSON.parse(this.sourceCustomStyleStr)
recursionTransObj(customAttrTrans, customAttrChart, scale, this.scaleCoefficientType)
recursionTransObj(customStyleTrans, customStyleChart, scale, this.scaleCoefficientType)
recursionTransObj(customAttrTrans, customAttrChart, this.scale, this.scaleCoefficientType)
recursionTransObj(customStyleTrans, customStyleChart, this.scale, this.scaleCoefficientType)
// 移动端地图标签不显示
if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') {

8
frontend/src/components/canvas/utils/utils.js
View File

@ -96,10 +96,10 @@ export function panelInit(componentData, componentStyle) {
item.sizey = (item.sizey || 5)
// 初始化密度为最高密度
if (componentStyle.aidedDesign.matrixBase !== 4) {
item.x = (item.x - 1) * componentStyle.aidedDesign.matrixBase + 1
item.y = (item.y - 1) * componentStyle.aidedDesign.matrixBase + 1
item.sizex = item.sizex * componentStyle.aidedDesign.matrixBase
item.sizey = item.sizey * componentStyle.aidedDesign.matrixBase
item.x = (item.x - 1) * 4 + 1
item.y = (item.y - 1) * 4 + 1
item.sizex = item.sizex * 4
item.sizey = item.sizey * 4
}
item.mobileSelected = (item.mobileSelected || false)
item.mobileStyle = (item.mobileStyle || deepCopy(BASE_MOBILE_STYLE))

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

@ -55,7 +55,8 @@ export const DEFAULT_SIZE = {
liquidOutlineDistance: 8,
liquidWaveLength: 128,
liquidWaveCount: 3,
liquidShape: 'circle'
liquidShape: 'circle',
tablePageMode: 'page'
}
export const DEFAULT_LABEL = {
show: false,

37
frontend/src/views/chart/chart/gauge/gauge.js
View File

@ -1,8 +1,9 @@
import { componentStyle } from '../common/common'
import { hexColorToRGBA } from '@/views/chart/chart/util'
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
let customAttr = {}
if (chart.customAttr) {
@ -50,6 +51,25 @@ export function baseGaugeOption(chart_option, chart) {
value: chart.data.series[0].data[0]
}
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
if (chart.senior) {
const range = []
@ -87,29 +107,30 @@ export function baseGaugeOption(chart_option, chart) {
show: false
}
chart_option.series[0].axisTick = {
splitNumber: 5, // TODO 刻度间隔数
length: 10, // TODO 子刻度线长度
splitNumber: getScaleValue(5, scale), // 刻度间隔数
length: getScaleValue(10, scale), // 子刻度线长度
lineStyle: {
color: 'auto',
width: 2// TODO 子刻度线宽度
width: getScaleValue(2, scale) // 子刻度线宽度
}
}
chart_option.series[0].splitLine = {
length: 18, // TODO 刻度线长度
length: getScaleValue(18, scale), // 刻度线长度
lineStyle: {
color: 'auto',
width: 2// TODO 刻度线宽度
width: getScaleValue(2, scale) // 刻度线宽度
}
}
chart_option.series[0].axisLabel = {
color: 'auto',
distance: 20, // TODO 刻度值文字里刻度线距离
fontSize: 20// TODO 刻度值字体大小
distance: getScaleValue(20, scale), // 刻度值文字里刻度线距离
fontSize: getScaleValue(20, scale)// 刻度值字体大小
}
}
}
}
}
console.log(chart_option.series[0])
// console.log(chart_option);
componentStyle(chart_option, chart)
return chart_option

27
frontend/src/views/chart/chart/gauge/gauge_antv.js
View File

@ -1,8 +1,9 @@
import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv'
import { Gauge } from '@antv/g2plot'
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
// theme
const theme = getTheme(chart)
@ -76,20 +77,20 @@ export function baseGaugeOptionAntV(plot, container, chart, action) {
axis: {
label: {
style: {
fontSize: 14// TODO 刻度值字体大小
fontSize: getScaleValue(14, scale) // 刻度值字体大小
}
},
tickLine: {
length: -12, // TODO 刻度线长度
length: getScaleValue(12, scale) * -1, // 刻度线长度
style: {
lineWidth: 1// TODO 刻度线宽度
lineWidth: getScaleValue(1, scale)// 刻度线宽度
}
},
subTickLine: {
count: 4, // TODO 子刻度数
length: -6, // TODO 子刻度线长度
count: 4, // 子刻度数
length: getScaleValue(6, scale) * -1, // 子刻度线长度
style: {
lineWidth: 1// TODO 子刻度线宽度
lineWidth: getScaleValue(1, scale)// 子刻度线宽度
}
}
}
@ -113,11 +114,21 @@ export function baseGaugeOptionAntV(plot, container, chart, action) {
},
pin: {
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) {

7
frontend/src/views/chart/components/ChartComponent.vue
View File

@ -115,6 +115,11 @@ export default {
terminalType: {
type: String,
default: 'pc'
},
scale: {
type: Number,
required: false,
default: 1
}
},
data() {
@ -210,7 +215,7 @@ export default {
} else if (chart.type === 'radar') {
chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
} 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') {
chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart, this.terminalType)
} else if (chart.type === 'treemap') {

7
frontend/src/views/chart/components/ChartComponentG2.vue
View File

@ -50,6 +50,11 @@ export default {
type: Number,
required: false,
default: 0
},
scale: {
type: Number,
required: false,
default: 1
}
},
data() {
@ -153,7 +158,7 @@ export default {
} else if (chart.type === 'radar') {
this.myChart = baseRadarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} 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') {
this.myChart = basePieOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'pie-rose') {

23
frontend/src/views/chart/components/ChartComponentS2.vue
View File

@ -6,9 +6,9 @@
</span>
<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-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" />
<el-row v-show="chart.type === 'table-info'" class="table-page">
<el-row v-show="showPage" class="table-page">
<span class="total-style">
{{ $t('chart.total') }}
<span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
@ -99,7 +99,8 @@ export default {
pageSize: 20,
show: 0
},
tableData: []
tableData: [],
showPage: false
}
},
@ -135,17 +136,19 @@ export default {
methods: {
initData() {
let datas = []
this.showPage = false
if (this.chart.data && this.chart.data.fields) {
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') {
if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && datas.length > this.currentPage.pageSize) {
// 计算分页
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)
this.showPage = true
}
} else {
this.fields = []
@ -380,12 +383,18 @@ export default {
.table-dom-info{
height:calc(100% - 36px);
}
.table-dom-info-pull{
height:calc(100%);
}
.table-dom-normal{
height:100%;
}
.table-dom-info-drill{
height:calc(100% - 36px - 12px);
}
.table-dom-info-drill-pull{
height:calc(100% - 12px);
}
.table-dom-normal-drill{
height:calc(100% - 12px);
}
@ -409,4 +418,10 @@ export default {
.page-style >>> .el-input__inner{
height: 24px;
}
.page-style >>> button{
background: transparent!important;
}
.page-style >>> li{
background: transparent!important;
}
</style>

12
frontend/src/views/chart/components/shape-attr/SizeSelector.vue
View File

@ -84,7 +84,13 @@
</el-form>
<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-option
v-for="item in pageSizeOptions"
@ -110,6 +116,9 @@
<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-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 v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
@ -340,6 +349,7 @@ export default {
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.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
}
}

9
frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
View File

@ -81,7 +81,13 @@
</el-form>
<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-option
v-for="item in pageSizeOptions"
@ -355,6 +361,7 @@ export default {
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.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
this.sizeForm.tableColumnMode = this.sizeForm.tableColumnMode ? this.sizeForm.tableColumnMode : DEFAULT_SIZE.tableColumnMode

30
frontend/src/views/chart/components/table/TableNormal.vue
View File

@ -23,6 +23,7 @@
:resizable="true"
sortable
:title="field.name"
:width="columnWidth"
>
<!-- <template slot="header">-->
<!-- <span>{{ field.name }}</span>-->
@ -30,7 +31,7 @@
</ux-table-column>
</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">
{{ $t('chart.total') }}
<span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
@ -56,6 +57,7 @@
<script>
import { hexColorToRGBA } from '../../chart/util'
import eventBus from '@/components/canvas/utils/eventBus'
import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
export default {
name: 'TableNormal',
@ -118,7 +120,9 @@ export default {
page: 1,
pageSize: 20,
show: 0
}
},
showPage: false,
columnWidth: DEFAULT_SIZE.tableColumnWidth
}
},
computed: {
@ -162,17 +166,29 @@ export default {
initData() {
const that = this
let datas = []
this.showPage = false
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)
// 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))
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
const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
const pageEnd = pageStart + this.currentPage.pageSize
datas = datas.slice(pageStart, pageEnd)
this.showPage = true
}
} else {
this.fields = []
@ -191,7 +207,7 @@ export default {
this.$nextTick(() => {
if (this.$refs.tableContainer) {
let pageHeight = 0
if (this.chart.type === 'table-info') {
if (this.showPage) {
pageHeight = 36
}
const currentHeight = this.$refs.tableContainer.offsetHeight
@ -378,4 +394,10 @@ export default {
.page-style >>> .el-input__inner{
height: 24px;
}
.page-style >>> button{
background: transparent!important;
}
.page-style >>> li{
background: transparent!important;
}
</style>