center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge branch 'dev' into pr@dev@refactor_app-template

Browse Source
This commit is contained in:
王嘉豪 2022-11-24 18:45:40 +08:00 committed by GitHub
commit f2c9ad54fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 213 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/canvas/components/editor/Preview.vue
View File

@ -1,10 +1,6 @@
<template>
<div
:id="previewMainDomId"
v-loading="dataLoading"
:element-loading-text="$t('panel.data_loading')"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(220,220,220,1)"
class="bg"
:style="customStyle"
@scroll="canvasScroll"
@ -120,6 +116,7 @@ import { userLoginInfo } from '@/api/systemInfo/userLogin'
import html2canvas from 'html2canvasde'
import { queryAll } from '@/api/panel/pdfTemplate'
import PDFPreExport from '@/views/panel/export/PDFPreExport'
import { listenGlobalKeyDownPreview } from '@/components/canvas/utils/shortcutKey'
const erd = elementResizeDetectorMaker()
export default {
@ -351,6 +348,9 @@ export default {
}
},
created() {
if (this.canvasId === 'canvas-main') {
listenGlobalKeyDownPreview()
}
// 取消视图请求
this.$cancelRequest('/chart/view/getData/**')
this.$cancelRequest('/api/link/viewDetail/**')
@ -614,7 +614,8 @@ export default {
},
downloadAsPDF() {
this.dataLoading = true
const domId = this.canvasInfoTemp
this.$emit('change-load-status', true)
const domId = this.previewMainDomId
setTimeout(() => {
this.exporting = true
this.backScreenShot = true
@ -625,6 +626,7 @@ export default {
html2canvas(document.getElementById(domId)).then(canvas => {
const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
this.dataLoading = false
this.$emit('change-load-status', false)
this.exporting = false
this.backScreenShot = false
if (snapshot !== '') {
@ -632,7 +634,7 @@ export default {
this.pdfExportShow = true
}
})
}, 1500)
}, 2500)
}, 500)
},
closePreExport() {

20
frontend/src/components/canvas/store/copy.js
View File

@ -25,6 +25,24 @@ export default {
}
},
mutations: {
// 复制到粘贴板
copyToClipboard(state) {
if (state.curComponent) {
Vue.prototype.$copyText('datease-component-' + state.curComponent.id)
}
},
passFromClipboard(state, componentId) {
state.componentData.forEach(item => {
if (item.id === componentId) {
state.copyData = {
data: deepCopy(item),
index: state.componentData.length
}
}
})
state.isCut = false
this.commit('paste')
},
copyMultiplexingComponents(state) {
let pYMax = 0
const _this = this
@ -89,10 +107,8 @@ export default {
paste(state, needAdaptor) {
if (!state.copyData) {
toast('请选择组件')
return
}
const data = state.copyData.data
// 仪表板复制的组件默认不在移动端部署中mobileSelected = false
data.mobileSelected = false

27
frontend/src/components/canvas/utils/shortcutKey.js
View File

@ -56,7 +56,27 @@ export function listenGlobalKeyDown() {
if (keyCode === ctrlKey || keyCode === commandKey) {
isCtrlOrCommandDown = true
} else if (isCtrlOrCommandDown) {
if (keyCode === zKey || keyCode === yKey || keyCode === vKey || keyCode === cKey || keyCode === sKey || keyCode === enlargeKey) {
if (keyCode === zKey || keyCode === yKey || keyCode === cKey || keyCode === sKey || keyCode === enlargeKey) {
e.preventDefault()
unlockMap[keyCode]()
}
}
}
window.onkeyup = (e) => {
if (e.keyCode === ctrlKey || e.keyCode === commandKey) {
isCtrlOrCommandDown = false
}
}
}
export function listenGlobalKeyDownPreview() {
window.onkeydown = (e) => {
const { keyCode } = e
if (keyCode === ctrlKey || keyCode === commandKey) {
isCtrlOrCommandDown = true
} else if (isCtrlOrCommandDown) {
if (keyCode === enlargeKey) {
e.preventDefault()
unlockMap[keyCode]()
}
@ -71,12 +91,11 @@ export function listenGlobalKeyDown() {
}
function copy() {
store.commit('copy')
store.commit('copyToClipboard')
}
function paste() {
store.commit('paste')
store.commit('recordSnapshot')
}
function cut() {

2
frontend/src/components/widget/deWidget/DeTabs.vue
View File

@ -470,8 +470,8 @@ export default {
let switchCount = 1
// 轮播定时器
this.timer = setInterval(() => {
switchCount++
const nowIndex = switchCount % this.element.options.tabList.length
switchCount++
this.activeTabName = this.element.options.tabList[nowIndex].name
}, switchTime)
}

11
frontend/src/components/widget/deWidget/TabStyle.vue
View File

@ -135,8 +135,9 @@
type="number"
size="mini"
:min="2"
:max="3600"
class="hide-icon-number"
@change="styleChange"
@change="switchTimeChange"
>
<template slot="append">S</template>
</el-input>
@ -180,6 +181,14 @@ export default {
const current = this.$refs[pickKey]
current && (current.showPicker = true)
},
switchTimeChange() {
if (!this.styleInfo.switchTime || this.styleInfo.switchTime < 2) {
this.styleInfo.switchTime = 2
} else if (this.styleInfo.switchTime && this.styleInfo.switchTime > 3600) {
this.styleInfo.switchTime = 3600
}
this.styleChange()
},
styleChange() {
this.$store.commit('canvasChange')
}

1
frontend/src/icons/svg/percentage-bar-stack-horizontal.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663834987781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1963" width="200" height="200"><path transform="rotate(90 319.99999999999994,513.6666870117189) " id="svg_1" d="m-64,641.66667l768,0l0,85.33333l-768,0l0,-85.33333zm21.33333,-341.33334l85.33334,0l0,298.66667l-85.33334,0l0,-298.66667zm640,256l85.33334,0l0,42.66667l-85.33334,0l0,-42.66667zm-533.33333,-213.33333l85.33333,0l0,256l-85.33333,0l0,-256zm106.66667,42.66667l85.33333,0l0,213.33333l-85.33333,0l0,-213.33333zm106.66666,42.66666l85.33334,0l0,170.66667l-85.33334,0l0,-170.66667zm106.66667,42.66667l85.33333,0l0,128l-85.33333,0l0,-128zm106.66667,42.66667l85.33333,0l0,85.33333l-85.33333,0l0,-85.33333z"/><path transform="rotate(90 551,513.3333129882814) " id="svg_2" opacity="0.6" d="m188.33333,278.66667l85.33334,0l0,213.33333l-85.33334,0l0,-213.33333zm640,256l85.33334,0l0,213.33333l-85.33334,0l0,-213.33333zm-533.33333,-213.33334l85.33333,0l0,213.33334l-85.33333,0l0,-213.33334zm106.66667,42.66667l85.33333,0l0,213.33333l-85.33333,0l0,-213.33333zm106.66666,42.66667l85.33334,0l0,213.33333l-85.33334,0l0,-213.33333zm106.66667,42.66666l85.33333,0l0,213.33334l-85.33333,0l0,-213.33334zm106.66667,42.66667l85.33333,0l0,213.33333l-85.33333,0l0,-213.33333z"/><path transform="rotate(90 739,513.6666870117189) " stroke="null" id="svg_3" d="m1016.33333,343l85.33334,0l0,341.33333l-85.33334,0l0,-341.33333zm-640,0l85.33334,0l0,85.33333l-85.33334,0l0,-85.33333zm533.33334,0l85.33333,0l0,298.66667l-85.33333,0l0,-298.66667zm-106.66667,0l85.33333,0l0,256l-85.33333,0l0,-256zm-106.66667,0l85.33334,0l0,213.33333l-85.33334,0l0,-213.33333zm-106.66666,0l85.33333,0l0,170.66667l-85.33333,0l0,-170.66667zm-106.66667,0l85.33333,0l0,128l-85.33333,0l0,-128z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

1
frontend/src/lang/en.js
View File

@ -1135,6 +1135,7 @@ export default {
chart_percentage_bar_stack: 'Percentage Stack Bar',
chart_bar_horizontal: 'Horizontal Bar',
chart_bar_stack_horizontal: 'Stack Horizontal Bar',
chart_percentage_bar_stack_horizontal: 'Horizontal Percentage Stack Bar',
chart_line: 'Base Line',
chart_line_stack: 'Stack Line',
chart_pie: 'Pie',

1
frontend/src/lang/tw.js
View File

@ -1135,6 +1135,7 @@ export default {
chart_percentage_bar_stack: '百分比柱狀圖',
chart_bar_horizontal: '橫嚮柱狀圖',
chart_bar_stack_horizontal: '橫嚮堆疊柱狀圖',
chart_percentage_bar_stack_horizontal: '橫嚮百分比柱狀圖',
chart_line: '基礎摺線圖',
chart_line_stack: '堆疊摺線圖',
chart_pie: '餅圖',

1
frontend/src/lang/zh.js
View File

@ -1134,6 +1134,7 @@ export default {
chart_percentage_bar_stack: '百分比柱状图',
chart_bar_horizontal: '横向柱状图',
chart_bar_stack_horizontal: '横向堆叠柱状图',
chart_percentage_bar_stack_horizontal: '横向百分比柱状图',
chart_line: '基础折线图',
chart_line_stack: '堆叠折线图',
chart_pie: '饼图',

3
frontend/src/views/background/index.vue
View File

@ -112,7 +112,7 @@
:http-request="upload"
:file-list="fileList"
>
<i class="el-icon-plus" />
<i class="el-icon-plus"/>
</el-upload>
<el-dialog
top="25vh"
@ -375,6 +375,7 @@ export default {
}
.main-row {
background-size: 100% 100% !important;
padding-left: 10px;
height: 250px;
overflow-y: auto;

1
frontend/src/views/chart/chart/bar/bar_antv.js
View File

@ -203,6 +203,7 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
} else {
delete options.isStack
}
options.isPercent = chart.type.includes('percentage')
// custom color
options.color = antVCustomColor(chart)
if (customAttr.color.gradient) {

30
frontend/src/views/chart/chart/common/common_antv.js
View File

@ -1,7 +1,7 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_EXT_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/chart/chart'
import { equalsAny } from '@/utils/StringUtils'
import { equalsAny, includesAny } from '@/utils/StringUtils'
export function getPadding(chart) {
if (chart.drill) {
@ -166,11 +166,8 @@ export function getLabel(chart) {
extStack = JSON.parse(JSON.stringify(chart.extStack))
}
if (chart.type === 'bar-stack' ||
chart.type === 'line-stack' ||
chart.type === 'bar-stack-horizontal' ||
chart.type === 'percentage-bar-stack'
) {
if (equalsAny(chart.type, 'bar-stack', 'line-stack',
'bar-stack-horizontal', 'percentage-bar-stack', 'percentage-bar-stack-horizontal')) {
let f
if (extStack && extStack.length > 0) {
f = yAxis[0]
@ -189,7 +186,10 @@ export function getLabel(chart) {
f.formatterCfg = formatterItem
}
// 百分比堆叠柱状图保留小数处理
if (chart.type === 'percentage-bar-stack') {
if (chart.type.includes('percentage')) {
if (!param.value) {
return
}
f.formatterCfg.type = 'percent'
f.formatterCfg.decimalCount = l.reserveDecimalCount
f.formatterCfg.thousandSeparator = false
@ -278,10 +278,8 @@ export function getTooltip(chart) {
}
let obj
if (chart.type === 'bar-stack' ||
chart.type === 'line-stack' ||
chart.type === 'bar-stack-horizontal' ||
chart.type === 'percentage-bar-stack') {
if (equalsAny(chart.type, 'bar-stack', 'line-stack',
'bar-stack-horizontal', 'percentage-bar-stack', 'percentage-bar-stack-horizontal')) {
let f
if (extStack && extStack.length > 0) {
obj = { name: param.category, value: param.value }
@ -301,7 +299,11 @@ export function getTooltip(chart) {
if (!f.formatterCfg) {
f.formatterCfg = formatterItem
}
if (chart.type === 'percentage-bar-stack') {
if (chart.type.includes('percentage')) {
if (!param.value) {
obj.value = 0
return obj
}
// 保留小数位数和标签保持一致，这边拿一下标签的配置
const l = JSON.parse(JSON.stringify(customAttr.label))
f.formatterCfg.type = 'percent'
@ -329,7 +331,7 @@ export function getTooltip(chart) {
res = valueFormatter(param.value, formatterItem)
}
}
} else if (chart.type.includes('pie') || chart.type.includes('funnel')) {
} else if (includesAny(chart.type, 'pie', 'funnel')) {
obj = { name: param.field, value: param.value }
for (let i = 0; i < yAxis.length; i++) {
const f = yAxis[i]
@ -339,7 +341,7 @@ export function getTooltip(chart) {
res = valueFormatter(param.value, formatterItem)
}
}
} else if ((chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type.includes('radar') || chart.type.includes('area')) && !chart.type.includes('group')) {
} else if (includesAny(chart.type, 'bar', 'line', 'scatter', 'radar', 'area') && !chart.type.includes('group')) {
obj = { name: param.category, value: param.value }
for (let i = 0; i < yAxis.length; i++) {
const f = yAxis[i]

81
frontend/src/views/chart/chart/util.js
View File

@ -1154,6 +1154,87 @@ export const TYPE_CONFIGS = [
]
}
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'percentage-bar-stack-horizontal',
title: 'chart.chart_percentage_bar_stack_horizontal',
icon: 'percentage-bar-stack-horizontal',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'x-axis-selector-ant-v',
'y-axis-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
],
propertyInner: {
'color-selector': [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [
'barDefault',
'barGap'
],
'label-selector-ant-v': [
'show',
'fontSize',
'color',
'position-h',
'reserveDecimalCount'
],
'tooltip-selector-ant-v': [
'show',
'textStyle'
],
'x-axis-selector-ant-v': [
'show',
'position',
'name',
'nameTextStyle',
'axisValue',
'splitLine',
'axisForm',
'axisLabel'
],
'y-axis-selector-ant-v': [
'show',
'position',
'name',
'nameTextStyle',
'splitLine',
'axisForm',
'axisLabel'
],
'title-selector-ant-v': [
'show',
'title',
'fontSize',
'color',
'hPosition',
'isItalic',
'isBolder',
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
'icon',
'orient',
'textStyle',
'hPosition',
'vPosition'
]
}
},
{
render: 'antv',
category: 'chart.chart_type_distribute',

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

@ -57,6 +57,7 @@ import TitleRemark from '@/views/chart/view/TitleRemark'
import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
import ChartTitleUpdate from './ChartTitleUpdate.vue'
import { equalsAny } from '@/utils/StringUtils'
export default {
name: 'ChartComponentG2',
@ -233,13 +234,13 @@ export default {
this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
} else if (chart.type === 'bar-group') {
this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
} else if (chart.type === 'bar-stack' || chart.type === 'percentage-bar-stack') {
} else if (equalsAny(chart.type, 'bar-stack', 'percentage-bar-stack')) {
this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
} else if (chart.type === 'bar-group-stack') {
this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, true)
} else if (chart.type === 'bar-horizontal') {
this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
} else if (chart.type === 'bar-stack-horizontal') {
} else if (equalsAny(chart.type, 'bar-stack-horizontal', 'percentage-bar-stack-horizontal')) {
this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
} else if (chart.type === 'line') {
this.myChart = baseLineOptionAntV(this.myChart, this.chartId, chart, this.antVAction)

44
frontend/src/views/dataset/data/FieldEdit.vue
View File

@ -130,8 +130,8 @@
"
>
<span style="font-size: 12px; color: #c0c0c0">{{
$t('dataset.calc_field')
}}</span>
$t('dataset.calc_field')
}}</span>
</span>
</template>
</el-table-column>
@ -180,8 +180,8 @@
/>
</span>
<span style="color: #8492a6; font-size: 12px">{{
data.label
}}</span>
data.label
}}</span>
</template>
</el-cascader>
<span class="select-svg-icon">
@ -284,8 +284,8 @@
v-if="scope.row.deExtractType === 3"
class="field-class"
>{{
$t('dataset.value') + '(' + $t('dataset.float') + ')'
}}</span>
$t('dataset.value') + '(' + $t('dataset.float') + ')'
}}</span>
</span>
<span v-if="scope.row.deExtractType === 5">
<svg-icon
@ -308,8 +308,8 @@
"
>
<span style="font-size: 12px; color: #c0c0c0">{{
$t('dataset.calc_field')
}}</span>
$t('dataset.calc_field')
}}</span>
</span>
</template>
</el-table-column>
@ -356,7 +356,7 @@
"
command="copy"
>
<i class="el-icon-document-copy" />
<i class="el-icon-document-copy"/>
{{ $t('dataset.copy') }}
</el-dropdown-item>
<el-dropdown-item
@ -365,7 +365,7 @@
"
command="delete"
>
<i class="el-icon-delete" />
<i class="el-icon-delete"/>
{{ $t('chart.delete') }}
</el-dropdown-item>
</slot>
@ -470,8 +470,8 @@
"
>
<span style="font-size: 12px; color: #c0c0c0">{{
$t('dataset.calc_field')
}}</span>
$t('dataset.calc_field')
}}</span>
</span>
</template>
</el-table-column>
@ -520,8 +520,8 @@
/>
</span>
<span style="color: #8492a6; font-size: 12px">{{
data.label
}}</span>
data.label
}}</span>
</template>
</el-cascader>
<span class="select-svg-icon">
@ -616,8 +616,8 @@
v-if="scope.row.deExtractType === 3"
class="field-class"
>{{
$t('dataset.value') + '(' + $t('dataset.float') + ')'
}}</span>
$t('dataset.value') + '(' + $t('dataset.float') + ')'
}}</span>
</span>
<span v-if="scope.row.deExtractType === 5">
<svg-icon
@ -640,8 +640,8 @@
"
>
<span style="font-size: 12px; color: #c0c0c0">{{
$t('dataset.calc_field')
}}</span>
$t('dataset.calc_field')
}}</span>
</span>
</template>
</el-table-column>
@ -689,7 +689,7 @@
"
command="copy"
>
<i class="el-icon-document-copy" />
<i class="el-icon-document-copy"/>
{{ $t('dataset.copy') }}
</el-dropdown-item>
<el-dropdown-item
@ -698,7 +698,7 @@
"
command="delete"
>
<i class="el-icon-delete" />
<i class="el-icon-delete"/>
{{ $t('chart.delete') }}
</el-dropdown-item>
</slot>
@ -742,7 +742,7 @@
</template>
<script>
import { post, fieldListDQ, batchEdit, dateformats } from '@/api/dataset/dataset'
import { batchEdit, dateformats, fieldListDQ, post } from '@/api/dataset/dataset'
import CalcFieldEdit from './CalcFieldEdit'
import { getFieldName } from '@/views/dataset/data/utils'
import msgCfm from '@/components/msgCfm/index'
@ -839,7 +839,7 @@ export default {
})
},
getFields(item) {
if (item.deExtractType == 0) {
if (item.deExtractType === 0) {
const children = this.dateformats
return [
{ label: this.$t('dataset.text'), value: 0 },

15
frontend/src/views/link/view/index.vue
View File

@ -1,11 +1,18 @@
<template>
<div style="width: 100%;height: 100vh;background-color: #f7f8fa">
<div
v-loading="dataLoading"
style="width: 100%;height: 100vh;background-color: #f7f8fa"
:element-loading-text="$t('panel.data_loading')"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(220,220,220,1)"
>
<Preview
v-if="show"
:component-data="mainCanvasComponentData"
:canvas-style-data="canvasStyleData"
:panel-info="panelInfo"
:user-id="user"
@change-load-status="setLoading"
/>
</div>
</template>
@ -38,7 +45,8 @@ export default {
return {
canvasId: 'canvas-main',
show: false,
panelInfo: {}
panelInfo: {},
dataLoading: false
}
},
computed: {
@ -55,6 +63,9 @@ export default {
this.viewLog()
},
methods: {
setLoading(status) {
this.dataLoading = !!status
},
viewLog() {
const param = {
panelId: this.resourceId,

13
frontend/src/views/panel/edit/index.vue
View File

@ -644,7 +644,7 @@ export default {
},
// 显示视图工具栏
showViewToolsAside() {
return !this.batchOptStatus && this.curComponent && (this.curComponent.type === 'view')
return !this.batchOptStatus && this.curComponent && (this.curComponent.type === 'view' || this.curComponent.type === 'de-tabs')
},
showBatchViewToolsAside() {
return this.batchOptStatus
@ -790,8 +790,8 @@ export default {
}
},
created() {
// Global listening for key events
listenGlobalKeyDown()
document.addEventListener('paste', this.passFromClipboard)
},
mounted() {
this.initWatermark()
@ -808,6 +808,7 @@ export default {
this.init(this.$store.state.panel.panelInfo.id)
},
beforeDestroy() {
document.removeEventListener('paste', this.passFromClipboard)
bus.$off('component-on-drag', this.componentOnDrag)
// bus.$off('component-dialog-edit', this.editDialog)
// bus.$off('button-dialog-edit', this.editButtonDialog)
@ -821,6 +822,14 @@ export default {
elx && elx.remove()
},
methods: {
passFromClipboard(event) {
// 获取解析 粘贴的文本
const text = (event.clipboardData || window.clipboardData).getData('text')
if (text && text.includes('datease-component-')) {
event.preventDefault()
this.$store.commit('passFromClipboard', text.replace('datease-component-', ''))
}
},
initWatermark() {
if (this.panelInfo.watermarkInfo) {
userLoginInfo().then(res => {