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

fix: 仪表板 title 修改相关bug修复

Browse Source
This commit is contained in:
dataeaseShu 2022-10-31 15:18:11 +08:00
parent c3ce2beb2e
commit c6011186da
8 changed files with 439 additions and 620 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/widget/DeWidget/DeSelectGrid.vue
View File

@ -24,18 +24,19 @@
v-model="checkAll"
:indeterminate="isIndeterminate"
@change="handleCheckAllChange"
>
{{ $t('commons.all') }}</el-checkbox>
/>{{ $t('commons.all') }}
<el-checkbox-group
v-model="value"
@change="handleCheckedChange"
>
<el-checkbox
v-for="item in data.filter(node => !keyWord || (node.id && node.id.includes(keyWord)))"
:key="item.id"
:label="item.id"
>{{ item.id }}</el-checkbox>
<template v-for="item in data.filter(node => !keyWord || (node.id && node.id.includes(keyWord)))">
<el-checkbox
:key="item.id"
:label="item.id"
>{{ item.id }}</el-checkbox>
<br :key="item.id">
</template>
</el-checkbox-group>
</div>
@ -407,13 +408,11 @@ export default {
.checkbox-group-container {
label.el-checkbox {
display: block !important;
margin: 10px !important;
margin: 10px 10px 0 10px !important;
}
.el-checkbox-group>label {
display: block !important;
margin: 10px !important;
margin: 10px 10px 0 10px !important;
}
}

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

@ -19,20 +19,7 @@
style="cursor: default;display: block;"
>
<div style="padding:6px 4px 0;margin: 0;">
<input
v-if="chartTitleEditer"
ref="chartTitle"
v-model.lazy="chartTitleUpdate"
v-clickoutside="lostFocus"
type="text"
class="chart-input-title"
@blur="changeEditStatus"
>
<p
v-else
style="overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;min-width: 30px"
@click.stop="handleTitleEditer"
>{{ chart.title }}</p>
<chart-title-update :chart-info="chartInfo" />
<title-remark
v-if="remarkCfg.show"
style="text-shadow: none!important;"
@ -66,23 +53,10 @@ import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_clou
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 { compareItem } from '@/views/chart/chart/compare'
import { mapState } from 'vuex'
import clickoutside from 'element-ui/src/utils/clickoutside.js'
import bus from '@/utils/bus'
import {
getChartDetails
} from '@/api/chart/chart'
import {
viewEditSave
} from '@/api/chart/chart'
import ChartTitleUpdate from './ChartTitleUpdate.vue'
export default {
name: 'ChartComponentG2',
components: { TitleRemark, ViewTrackBar },
directives: {
clickoutside
},
components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
props: {
chart: {
type: Object,
@ -124,7 +98,6 @@ export default {
top: '0px'
},
pointParam: null,
chartTitleEditer: false,
dynamicAreaCode: null,
borderRadius: '0px',
chartHeight: '100%',
@ -159,16 +132,10 @@ export default {
borderRadius: this.borderRadius
}
},
panelInfo() {
return this.$store.state.panel.panelInfo
},
mainActiveName() {
return this.$store.state.panel.mainActiveName
},
...mapState([
'mobileLayoutStatus',
'previewVisible'
])
chartInfo() {
const { id, title } = this.chart
return { id, title }
}
},
watch: {
chart: {
@ -422,258 +389,9 @@ export default {
this.calcHeightRightNow()
}, 100)
},
lostFocus() {
this.chartTitleEditer = false
},
getChartDetail() {
getChartDetails(this.chart.id, this.panelInfo.id, { queryFrom: 'panel_edit' }).then(response => {
const chartView = JSON.parse(JSON.stringify(response.data))
chartView.viewFields = chartView.viewFields ? JSON.parse(chartView.viewFields) : []
chartView.xaxis = chartView.xaxis ? JSON.parse(chartView.xaxis) : []
chartView.xaxisExt = chartView.xaxisExt ? JSON.parse(chartView.xaxisExt) : []
chartView.yaxis = chartView.yaxis ? JSON.parse(chartView.yaxis) : []
chartView.yaxisExt = chartView.yaxisExt ? JSON.parse(chartView.yaxisExt) : []
chartView.extStack = chartView.extStack ? JSON.parse(chartView.extStack) : []
chartView.drillFields = chartView.drillFields ? JSON.parse(chartView.drillFields) : []
chartView.extBubble = chartView.extBubble ? JSON.parse(chartView.extBubble) : []
chartView.customAttr = chartView.customAttr ? JSON.parse(chartView.customAttr) : {}
chartView.customStyle = chartView.customStyle ? JSON.parse(chartView.customStyle) : {}
chartView.customFilter = chartView.customFilter ? JSON.parse(chartView.customFilter) : {}
chartView.senior = chartView.senior ? JSON.parse(chartView.senior) : {}
const viewSave = this.buildParam(chartView, true, 'chart', false, false)
if (!viewSave) return
viewEditSave(this.panelInfo.id, viewSave).then(() => {
bus.$emit('aside-set-title', this.chart.title)
})
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
})
},
handleTitleEditer() {
if (this.mainActiveName !== 'PanelEdit' || this.mobileLayoutStatus || this.previewVisible) return
this.chartTitleEditer = true
this.chartTitleUpdate = this.chart.title
this.$nextTick(() => {
this.$refs.chartTitle.focus()
})
},
buildParam(chartView, getData, trigger, needRefreshGroup = false, switchType = false, switchRender = false) {
if (!chartView.resultCount ||
chartView.resultCount === '' ||
isNaN(Number(chartView.resultCount)) ||
String(chartView.resultCount).includes('.') ||
parseInt(chartView.resultCount) < 1) {
chartView.resultCount = '1000'
}
const view = JSON.parse(JSON.stringify(chartView))
view.id = chartView.id
view.sceneId = chartView.sceneId
view.name = this.chartTitleUpdate
view.title = this.chartTitleUpdate
view.tableId = chartView.tableId
if (view.type === 'map' && view.xaxis.length > 1) {
view.xaxis = [view.xaxis[0]]
}
view.xaxis.forEach(function(ele) {
if (!ele.dateStyle || ele.dateStyle === '') {
ele.dateStyle = 'y_M_d'
}
if (!ele.datePattern || ele.datePattern === '') {
ele.datePattern = 'date_sub'
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
if (!ele.filter) {
ele.filter = []
}
})
if (view.type === 'table-pivot' || view.type === 'bar-group') {
view.xaxisExt.forEach(function(ele) {
if (!ele.dateStyle || ele.dateStyle === '') {
ele.dateStyle = 'y_M_d'
}
if (!ele.datePattern || ele.datePattern === '') {
ele.datePattern = 'date_sub'
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
if (!ele.filter) {
ele.filter = []
}
})
}
if (view.type === 'map' && view.yaxis.length > 1) {
view.yaxis = [view.yaxis[0]]
}
view.yaxis.forEach(function(ele) {
if (!ele.chartType) {
ele.chartType = 'bar'
}
if (ele.chartId) {
ele.summary = ''
} else {
if (!ele.summary || ele.summary === '') {
if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
ele.summary = 'count'
} else {
ele.summary = 'sum'
}
}
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
if (!ele.filter) {
ele.filter = []
}
if (!ele.compareCalc) {
ele.compareCalc = compareItem
}
})
if (view.type === 'chart-mix') {
view.yaxisExt.forEach(function(ele) {
if (!ele.chartType) {
ele.chartType = 'bar'
}
if (ele.chartId) {
ele.summary = ''
} else {
if (!ele.summary || ele.summary === '') {
if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
ele.summary = 'count'
} else {
ele.summary = 'sum'
}
}
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
if (!ele.filter) {
ele.filter = []
}
if (!ele.compareCalc) {
ele.compareCalc = compareItem
}
})
}
view.extStack.forEach(function(ele) {
if (!ele.dateStyle || ele.dateStyle === '') {
ele.dateStyle = 'y_M_d'
}
if (!ele.datePattern || ele.datePattern === '') {
ele.datePattern = 'date_sub'
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
})
view.extBubble.forEach(function(ele) {
if (!ele.summary || ele.summary === '') {
if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
ele.summary = 'count'
} else {
ele.summary = 'sum'
}
}
})
if (view.type === 'label') {
if (view.xaxis.length > 1) {
view.xaxis.splice(1, view.xaxis.length)
}
}
if (view.type.startsWith('pie') ||
view.type.startsWith('funnel') ||
view.type.startsWith('text') ||
view.type.startsWith('gauge') ||
view.type === 'treemap' ||
view.type === 'liquid' ||
view.type === 'word-cloud' ||
view.type === 'waterfall' ||
view.type.includes('group')) {
if (view.yaxis.length > 1) {
view.yaxis.splice(1, view.yaxis.length)
}
}
if (view.type === 'line-stack' && trigger === 'chart') {
view.customAttr.size.lineArea = true
}
if (view.type === 'line' && trigger === 'chart') {
view.customAttr.size.lineArea = false
}
if (view.type === 'treemap' && trigger === 'chart') {
view.customAttr.label.show = true
}
if (view.type === 'liquid' ||
(view.type.includes('table') && view.render === 'echarts') ||
view.type.includes('text') ||
view.type.includes('gauge') ||
view.type === 'table-pivot') {
view.drillFields = []
}
view.customFilter.forEach(function(ele) {
if (ele && !ele.filter) {
ele.filter = []
}
})
view.xaxis = JSON.stringify(view.xaxis)
view.viewFields = JSON.stringify(view.viewFields)
view.xaxisExt = JSON.stringify(view.xaxisExt)
view.yaxis = JSON.stringify(view.yaxis)
view.yaxisExt = JSON.stringify(view.yaxisExt)
view.customAttr = JSON.stringify(view.customAttr)
view.customStyle = JSON.stringify(view.customStyle)
view.customFilter = JSON.stringify(view.customFilter)
view.extStack = JSON.stringify(view.extStack)
view.drillFields = JSON.stringify(view.drillFields)
view.extBubble = JSON.stringify(view.extBubble)
view.senior = JSON.stringify(view.senior)
delete view.data
return view
},
changeEditStatus() {
this.lostFocus()
if (this.chartTitleUpdate.length > 50) {
this.$error(this.$t('chart.title_limit'))
return
}
if (this.chartTitleUpdate === this.chart.title) return
this.chart.title = this.chartTitleUpdate
this.getChartDetail()
},
initRemark() {
this.remarkCfg = getRemark(this.chart)
}
}
}
</script>
<style scoped lang="scss">
.chart-input-title{
word-break: break-word;
font: 12px / 1.231 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Microsoft YaHei", "PingFang SC", sans-serif, "Segoe UI Symbol";
overflow: visible;
margin: 0;
padding: 0;
font-weight: 400;
font-family: inherit;
border-radius: 2px;
color: #182b50;
font-size: 12px;
line-height: 26px;
padding-left: 10px;
padding-right: 10px;
background: transparent;
outline: none;
border-width: 0px 0px 1px;
border-image: initial;
border-bottom: 1px solid rgb(200, 203, 204);
z-index: 2;
height: 21px;
min-width: 100px;
}
</style>

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

@ -19,20 +19,7 @@
style="cursor: default;display: block;"
>
<div style="padding:6px 4px 0;margin: 0;">
<input
v-if="chartTitleEditer"
ref="chartTitle"
v-model.lazy="chartTitleUpdate"
v-clickoutside="lostFocus"
type="text"
class="chart-input-title"
@blur="changeEditStatus"
>
<p
v-else
style="overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;min-width: 30px"
@click.stop="handleTitleEditer"
>{{ chart.title }}</p>
<chart-title-update :chart-info="chartInfo" />
<title-remark
v-if="remarkCfg.show"
style="text-shadow: none!important;"
@ -96,22 +83,10 @@ import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/chart/table/table-info'
import TitleRemark from '@/views/chart/view/TitleRemark'
import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import clickoutside from 'element-ui/src/utils/clickoutside.js'
import bus from '@/utils/bus'
import { mapState } from 'vuex'
import { compareItem } from '@/views/chart/chart/compare'
import {
getChartDetails
} from '@/api/chart/chart'
import {
viewEditSave
} from '@/api/chart/chart'
import ChartTitleUpdate from './ChartTitleUpdate.vue'
export default {
name: 'ChartComponentS2',
components: { TitleRemark, ViewTrackBar },
directives: {
clickoutside
},
components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
props: {
chart: {
type: Object,
@ -147,7 +122,6 @@ export default {
left: '0px',
top: '0px'
},
chartTitleEditer: false,
pointParam: null,
dynamicAreaCode: null,
borderRadius: '0px',
@ -167,7 +141,6 @@ export default {
},
title_show: true,
antVRenderStatus: false,
chartTitleUpdate: '',
currentPage: {
page: 1,
pageSize: 20,
@ -193,16 +166,10 @@ export default {
borderRadius: this.borderRadius
}
},
panelInfo() {
return this.$store.state.panel.panelInfo
},
mainActiveName() {
return this.$store.state.panel.mainActiveName
},
...mapState([
'mobileLayoutStatus',
'previewVisible'
])
chartInfo() {
const { id, title } = this.chart
return { id, title }
}
},
watch: {
chart: {
@ -448,228 +415,6 @@ export default {
this.calcHeightRightNow()
}, 100)
},
lostFocus() {
this.chartTitleEditer = false
},
getChartDetail() {
getChartDetails(this.chart.id, this.panelInfo.id, { queryFrom: 'panel_edit' }).then(response => {
const chartView = JSON.parse(JSON.stringify(response.data))
chartView.viewFields = chartView.viewFields ? JSON.parse(chartView.viewFields) : []
chartView.xaxis = chartView.xaxis ? JSON.parse(chartView.xaxis) : []
chartView.xaxisExt = chartView.xaxisExt ? JSON.parse(chartView.xaxisExt) : []
chartView.yaxis = chartView.yaxis ? JSON.parse(chartView.yaxis) : []
chartView.yaxisExt = chartView.yaxisExt ? JSON.parse(chartView.yaxisExt) : []
chartView.extStack = chartView.extStack ? JSON.parse(chartView.extStack) : []
chartView.drillFields = chartView.drillFields ? JSON.parse(chartView.drillFields) : []
chartView.extBubble = chartView.extBubble ? JSON.parse(chartView.extBubble) : []
chartView.customAttr = chartView.customAttr ? JSON.parse(chartView.customAttr) : {}
chartView.customStyle = chartView.customStyle ? JSON.parse(chartView.customStyle) : {}
chartView.customFilter = chartView.customFilter ? JSON.parse(chartView.customFilter) : {}
chartView.senior = chartView.senior ? JSON.parse(chartView.senior) : {}
const viewSave = this.buildParam(chartView, true, 'chart', false, false)
if (!viewSave) return
viewEditSave(this.panelInfo.id, viewSave).then(() => {
bus.$emit('aside-set-title', this.chart.title)
})
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
})
},
handleTitleEditer() {
if (this.mainActiveName !== 'PanelEdit' || this.mobileLayoutStatus || this.previewVisible) return
this.chartTitleEditer = true
this.chartTitleUpdate = this.chart.title
this.$nextTick(() => {
this.$refs.chartTitle.focus()
})
},
buildParam(chartView, getData, trigger, needRefreshGroup = false, switchType = false, switchRender = false) {
if (!chartView.resultCount ||
chartView.resultCount === '' ||
isNaN(Number(chartView.resultCount)) ||
String(chartView.resultCount).includes('.') ||
parseInt(chartView.resultCount) < 1) {
chartView.resultCount = '1000'
}
const view = JSON.parse(JSON.stringify(chartView))
view.id = chartView.id
view.sceneId = chartView.sceneId
view.name = this.chartTitleUpdate
view.title = this.chartTitleUpdate
view.tableId = chartView.tableId
if (view.type === 'map' && view.xaxis.length > 1) {
view.xaxis = [view.xaxis[0]]
}
view.xaxis.forEach(function(ele) {
if (!ele.dateStyle || ele.dateStyle === '') {
ele.dateStyle = 'y_M_d'
}
if (!ele.datePattern || ele.datePattern === '') {
ele.datePattern = 'date_sub'
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
if (!ele.filter) {
ele.filter = []
}
})
if (view.type === 'table-pivot' || view.type === 'bar-group') {
view.xaxisExt.forEach(function(ele) {
if (!ele.dateStyle || ele.dateStyle === '') {
ele.dateStyle = 'y_M_d'
}
if (!ele.datePattern || ele.datePattern === '') {
ele.datePattern = 'date_sub'
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
if (!ele.filter) {
ele.filter = []
}
})
}
if (view.type === 'map' && view.yaxis.length > 1) {
view.yaxis = [view.yaxis[0]]
}
view.yaxis.forEach(function(ele) {
if (!ele.chartType) {
ele.chartType = 'bar'
}
if (ele.chartId) {
ele.summary = ''
} else {
if (!ele.summary || ele.summary === '') {
if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
ele.summary = 'count'
} else {
ele.summary = 'sum'
}
}
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
if (!ele.filter) {
ele.filter = []
}
if (!ele.compareCalc) {
ele.compareCalc = compareItem
}
})
if (view.type === 'chart-mix') {
view.yaxisExt.forEach(function(ele) {
if (!ele.chartType) {
ele.chartType = 'bar'
}
if (ele.chartId) {
ele.summary = ''
} else {
if (!ele.summary || ele.summary === '') {
if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
ele.summary = 'count'
} else {
ele.summary = 'sum'
}
}
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
if (!ele.filter) {
ele.filter = []
}
if (!ele.compareCalc) {
ele.compareCalc = compareItem
}
})
}
view.extStack.forEach(function(ele) {
if (!ele.dateStyle || ele.dateStyle === '') {
ele.dateStyle = 'y_M_d'
}
if (!ele.datePattern || ele.datePattern === '') {
ele.datePattern = 'date_sub'
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
})
view.extBubble.forEach(function(ele) {
if (!ele.summary || ele.summary === '') {
if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
ele.summary = 'count'
} else {
ele.summary = 'sum'
}
}
})
if (view.type === 'label') {
if (view.xaxis.length > 1) {
view.xaxis.splice(1, view.xaxis.length)
}
}
if (view.type.startsWith('pie') ||
view.type.startsWith('funnel') ||
view.type.startsWith('text') ||
view.type.startsWith('gauge') ||
view.type === 'treemap' ||
view.type === 'liquid' ||
view.type === 'word-cloud' ||
view.type === 'waterfall' ||
view.type.includes('group')) {
if (view.yaxis.length > 1) {
view.yaxis.splice(1, view.yaxis.length)
}
}
if (view.type === 'line-stack' && trigger === 'chart') {
view.customAttr.size.lineArea = true
}
if (view.type === 'line' && trigger === 'chart') {
view.customAttr.size.lineArea = false
}
if (view.type === 'treemap' && trigger === 'chart') {
view.customAttr.label.show = true
}
if (view.type === 'liquid' ||
(view.type.includes('table') && view.render === 'echarts') ||
view.type.includes('text') ||
view.type.includes('gauge') ||
view.type === 'table-pivot') {
view.drillFields = []
}
view.customFilter.forEach(function(ele) {
if (ele && !ele.filter) {
ele.filter = []
}
})
view.xaxis = JSON.stringify(view.xaxis)
view.viewFields = JSON.stringify(view.viewFields)
view.xaxisExt = JSON.stringify(view.xaxisExt)
view.yaxis = JSON.stringify(view.yaxis)
view.yaxisExt = JSON.stringify(view.yaxisExt)
view.customAttr = JSON.stringify(view.customAttr)
view.customStyle = JSON.stringify(view.customStyle)
view.customFilter = JSON.stringify(view.customFilter)
view.extStack = JSON.stringify(view.extStack)
view.drillFields = JSON.stringify(view.drillFields)
view.extBubble = JSON.stringify(view.extBubble)
view.senior = JSON.stringify(view.senior)
delete view.data
return view
},
changeEditStatus() {
this.lostFocus()
if (this.chartTitleUpdate.length > 50) {
this.$error(this.$t('chart.title_limit'))
return
}
if (this.chartTitleUpdate === this.chart.title) return
this.chart.title = this.chartTitleUpdate
this.getChartDetail()
},
pageChange(val) {
this.currentPage.pageSize = val
this.initData()
@ -769,28 +514,4 @@ export default {
.page-style ::v-deep li{
background: transparent!important;
}
.chart-input-title{
word-break: break-word;
font: 12px / 1.231 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Microsoft YaHei", "PingFang SC", sans-serif, "Segoe UI Symbol";
overflow: visible;
margin: 0;
padding: 0;
font-weight: 400;
font-family: inherit;
border-radius: 2px;
color: #182b50;
font-size: 12px;
line-height: 26px;
padding-left: 10px;
padding-right: 10px;
background: transparent;
outline: none;
border-width: 0px 0px 1px;
border-image: initial;
border-bottom: 1px solid rgb(200, 203, 204);
z-index: 2;
height: 21px;
min-width: 100px;
}
</style>

382
frontend/src/views/chart/components/ChartTitleUpdate.vue Normal file
View File

@ -0,0 +1,382 @@
<template>
<el-input
v-if="chartTitleEditer"
ref="chartTitle"
v-model.lazy="chartTitleUpdate"
v-clickoutside="lostFocus"
clearable
type="text"
class="chart-input-title"
@blur="changeEditStatus"
/>
<p
v-else
style="overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline-block;min-width: 30px"
@click.stop="handleTitleEditer"
>{{ chart.title }}</p>
</template>
<script>
import clickoutside from 'element-ui/src/utils/clickoutside.js'
import { mapState } from 'vuex'
import { checkViewTitle } from '@/components/canvas/utils/utils'
import { getChartDetails, viewEditSave } from '@/api/chart/chart'
import bus from '@/utils/bus'
import { compareItem } from '@/views/chart/chart/compare'
export default {
directives: {
clickoutside
},
props: {
chartInfo: {
type: Object,
default: () => {}
}
},
data() {
return {
chartTitleEditer: false,
chartTitleUpdate: '',
chart: {}
}
},
computed: {
mainActiveName() {
return this.$store.state.panel.mainActiveName
},
...mapState(['mobileLayoutStatus', 'previewVisible']),
panelInfo() {
return this.$store.state.panel.panelInfo
}
},
watch: {
chartInfo: {
handler(val) {
const { id, title } = this.chartInfo
this.chart = { id, title }
},
immediate: true,
deep: true
}
},
methods: {
changeEditStatus() {
this.lostFocus()
if (this.chartTitleUpdate.length > 50) {
this.$error(this.$t('chart.title_limit'))
return
}
if (this.chartTitleUpdate.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
this.chartTitleUpdate = this.chart.title
return
}
if (checkViewTitle('update', this.chart.id, this.chartTitleUpdate)) {
this.$error(this.$t('chart.title_repeat'))
this.chartTitleUpdate = this.chart.title
return
}
if (this.chartTitleUpdate === this.chart.title) return
this.chart.title = this.chartTitleUpdate
this.getChartDetail()
},
buildParam(
chartView,
getData,
trigger,
needRefreshGroup = false,
switchType = false,
switchRender = false
) {
if (
!chartView.resultCount ||
chartView.resultCount === '' ||
isNaN(Number(chartView.resultCount)) ||
String(chartView.resultCount).includes('.') ||
parseInt(chartView.resultCount) < 1
) {
chartView.resultCount = '1000'
}
const view = JSON.parse(JSON.stringify(chartView))
view.id = chartView.id
view.sceneId = chartView.sceneId
view.name = this.chartTitleUpdate
view.title = this.chartTitleUpdate
view.tableId = chartView.tableId
if (view.type === 'map' && view.xaxis.length > 1) {
view.xaxis = [view.xaxis[0]]
}
view.xaxis.forEach(function(ele) {
if (!ele.dateStyle || ele.dateStyle === '') {
ele.dateStyle = 'y_M_d'
}
if (!ele.datePattern || ele.datePattern === '') {
ele.datePattern = 'date_sub'
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
if (!ele.filter) {
ele.filter = []
}
})
if (view.type === 'table-pivot' || view.type === 'bar-group') {
view.xaxisExt.forEach(function(ele) {
if (!ele.dateStyle || ele.dateStyle === '') {
ele.dateStyle = 'y_M_d'
}
if (!ele.datePattern || ele.datePattern === '') {
ele.datePattern = 'date_sub'
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
if (!ele.filter) {
ele.filter = []
}
})
}
if (view.type === 'map' && view.yaxis.length > 1) {
view.yaxis = [view.yaxis[0]]
}
view.yaxis.forEach(function(ele) {
if (!ele.chartType) {
ele.chartType = 'bar'
}
if (ele.chartId) {
ele.summary = ''
} else {
if (!ele.summary || ele.summary === '') {
if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
ele.summary = 'count'
} else {
ele.summary = 'sum'
}
}
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
if (!ele.filter) {
ele.filter = []
}
if (!ele.compareCalc) {
ele.compareCalc = compareItem
}
})
if (view.type === 'chart-mix') {
view.yaxisExt.forEach(function(ele) {
if (!ele.chartType) {
ele.chartType = 'bar'
}
if (ele.chartId) {
ele.summary = ''
} else {
if (!ele.summary || ele.summary === '') {
if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
ele.summary = 'count'
} else {
ele.summary = 'sum'
}
}
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
if (!ele.filter) {
ele.filter = []
}
if (!ele.compareCalc) {
ele.compareCalc = compareItem
}
})
}
view.extStack.forEach(function(ele) {
if (!ele.dateStyle || ele.dateStyle === '') {
ele.dateStyle = 'y_M_d'
}
if (!ele.datePattern || ele.datePattern === '') {
ele.datePattern = 'date_sub'
}
if (!ele.sort || ele.sort === '') {
ele.sort = 'none'
}
})
view.extBubble.forEach(function(ele) {
if (!ele.summary || ele.summary === '') {
if (ele.id === 'count' || ele.deType === 0 || ele.deType === 1) {
ele.summary = 'count'
} else {
ele.summary = 'sum'
}
}
})
if (view.type === 'label') {
if (view.xaxis.length > 1) {
view.xaxis.splice(1, view.xaxis.length)
}
}
if (
view.type.startsWith('pie') ||
view.type.startsWith('funnel') ||
view.type.startsWith('text') ||
view.type.startsWith('gauge') ||
view.type === 'treemap' ||
view.type === 'liquid' ||
view.type === 'word-cloud' ||
view.type === 'waterfall' ||
view.type.includes('group')
) {
if (view.yaxis.length > 1) {
view.yaxis.splice(1, view.yaxis.length)
}
}
if (view.type === 'line-stack' && trigger === 'chart') {
view.customAttr.size.lineArea = true
}
if (view.type === 'line' && trigger === 'chart') {
view.customAttr.size.lineArea = false
}
if (view.type === 'treemap' && trigger === 'chart') {
view.customAttr.label.show = true
}
if (
view.type === 'liquid' ||
(view.type.includes('table') && view.render === 'echarts') ||
view.type.includes('text') ||
view.type.includes('gauge') ||
view.type === 'table-pivot'
) {
view.drillFields = []
}
view.customFilter.forEach(function(ele) {
if (ele && !ele.filter) {
ele.filter = []
}
})
view.xaxis = JSON.stringify(view.xaxis)
view.viewFields = JSON.stringify(view.viewFields)
view.xaxisExt = JSON.stringify(view.xaxisExt)
view.yaxis = JSON.stringify(view.yaxis)
view.yaxisExt = JSON.stringify(view.yaxisExt)
view.customAttr = JSON.stringify(view.customAttr)
view.customStyle = JSON.stringify(view.customStyle)
view.customFilter = JSON.stringify(view.customFilter)
view.extStack = JSON.stringify(view.extStack)
view.drillFields = JSON.stringify(view.drillFields)
view.extBubble = JSON.stringify(view.extBubble)
view.senior = JSON.stringify(view.senior)
delete view.data
return view
},
lostFocus() {
this.chartTitleEditer = false
},
handleTitleEditer() {
if (
this.mainActiveName !== 'PanelEdit' ||
this.mobileLayoutStatus ||
this.previewVisible
) { return }
this.chartTitleEditer = true
this.chartTitleUpdate = this.chart.title
this.$nextTick(() => {
this.$refs.chartTitle.focus()
})
},
getChartDetail() {
getChartDetails(this.chart.id, this.panelInfo.id, {
queryFrom: 'panel_edit'
}).then((response) => {
const chartView = JSON.parse(JSON.stringify(response.data))
chartView.viewFields = chartView.viewFields
? JSON.parse(chartView.viewFields)
: []
chartView.xaxis = chartView.xaxis ? JSON.parse(chartView.xaxis) : []
chartView.xaxisExt = chartView.xaxisExt
? JSON.parse(chartView.xaxisExt)
: []
chartView.yaxis = chartView.yaxis ? JSON.parse(chartView.yaxis) : []
chartView.yaxisExt = chartView.yaxisExt
? JSON.parse(chartView.yaxisExt)
: []
chartView.extStack = chartView.extStack
? JSON.parse(chartView.extStack)
: []
chartView.drillFields = chartView.drillFields
? JSON.parse(chartView.drillFields)
: []
chartView.extBubble = chartView.extBubble
? JSON.parse(chartView.extBubble)
: []
chartView.customAttr = chartView.customAttr
? JSON.parse(chartView.customAttr)
: {}
chartView.customStyle = chartView.customStyle
? JSON.parse(chartView.customStyle)
: {}
chartView.customFilter = chartView.customFilter
? JSON.parse(chartView.customFilter)
: {}
chartView.senior = chartView.senior ? JSON.parse(chartView.senior) : {}
const viewSave = this.buildParam(chartView, true, 'chart', false, false)
if (!viewSave) return
viewEditSave(this.panelInfo.id, viewSave).then(() => {
this.chart.title = this.chartTitleUpdate
bus.$emit('aside-set-title', this.chart.title)
})
this.$store.commit('recordViewEdit', {
viewId: this.chart.id,
hasEdit: true
})
})
}
}
}
</script>
<style scoped lang="scss">
::v-deep.chart-input-title {
word-break: break-word;
font: 12px / 1.231 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
'Microsoft YaHei', 'PingFang SC', sans-serif, 'Segoe UI Symbol';
overflow: visible;
margin: 0;
padding: 0;
font-weight: 400;
font-family: inherit;
border-radius: 2px;
line-height: 26px;
padding-left: 10px;
padding-right: 10px;
background: transparent;
outline: none;
border-width: 0px 0px 1px;
border-image: initial;
border-bottom: 1px solid rgb(200, 203, 204);
z-index: 2;
height: 21px;
min-width: 20%;
max-width: 50%;
.el-input__inner {
height: 21px;
font-size: 12px;
color: #182b50;
font-weight: 400;
font-family: inherit;
border-radius: 0;
border: none;
line-height: 21px;
background: transparent;
}
.el-input__suffix {
.el-input__icon {
line-height: 21px;
}
}
}
</style>

15
frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
View File

@ -70,14 +70,6 @@ export default {
}
}
},
watch: {
content: {
handler(newValue) {
this.$emit('onRemarkChange', newValue)
}
}
},
computed: {
customStyle() {
let style = {}
@ -115,6 +107,13 @@ export default {
'canvasStyleData'
])
},
watch: {
content: {
handler(newValue) {
this.$emit('onRemarkChange', newValue)
}
}
},
created() {
if (!this.showTable) {
this.init.plugins = this.init.plugins.replace(' table', '')

15
frontend/src/views/chart/components/normal/LabelNormal.vue
View File

@ -11,7 +11,7 @@
style="cursor: default;display: block;"
>
<div>
<p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
<chart-title-update :chart-info="chartInfo" />
<title-remark
v-if="chart.render && chart.render === 'antv' && remarkCfg.show"
style="text-shadow: none!important;"
@ -47,10 +47,11 @@ import eventBus from '@/components/canvas/utils/eventBus'
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
import TitleRemark from '@/views/chart/view/TitleRemark'
import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import ChartTitleUpdate from '../ChartTitleUpdate.vue'
export default {
name: 'LabelNormal',
components: { TitleRemark },
components: { TitleRemark, ChartTitleUpdate },
props: {
chart: {
type: Object,
@ -110,12 +111,10 @@ export default {
}
},
computed: {
// bg_class() {
// return {
// background: hexColorToRGBA('#ffffff', 0),
// borderRadius: this.borderRadius
// }
// }
chartInfo() {
const { id, title } = this.chart
return { id, title }
}
},
watch: {
chart() {

15
frontend/src/views/chart/components/normal/LabelNormalText.vue
View File

@ -18,7 +18,7 @@
style="cursor: default;display: block;"
>
<div>
<p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
<chart-title-update :chart-info="chartInfo" />
<title-remark
v-if="chart.render && chart.render === 'antv' && remarkCfg.show"
style="text-shadow: none!important;"
@ -59,10 +59,11 @@ import eventBus from '@/components/canvas/utils/eventBus'
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
import TitleRemark from '@/views/chart/view/TitleRemark'
import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import ChartTitleUpdate from '../ChartTitleUpdate.vue'
export default {
name: 'LabelNormalText',
components: { TitleRemark, ViewTrackBar },
components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
props: {
chart: {
type: Object,
@ -137,13 +138,11 @@ export default {
computed: {
trackBarStyleTime() {
return this.trackBarStyle
},
chartInfo() {
const { id, title } = this.chart
return { id, title }
}
// bg_class() {
// return {
// background: hexColorToRGBA('#ffffff', 0),
// borderRadius: this.borderRadius
// }
// }
},
watch: {
chart() {

22
frontend/src/views/system/datasource/DsConfiguration.vue
View File

@ -291,7 +291,6 @@
['oracle', 'sqlServer', 'pg', 'redshift', 'db2'].includes(form.type)
"
class="schema-label"
prop="configuration.schema"
>
<template slot="label">
<span class="name">{{ $t('datasource.schema') }}<i class="required" /></span>
@ -308,6 +307,8 @@
filterable
:placeholder="$t('fu.search_bar.please_select')"
class="de-select"
@change="validatorSchema"
@blur="validatorSchema"
>
<el-option
v-for="item in schemas"
@ -316,6 +317,12 @@
:value="item"
/>
</el-select>
<div
v-if="configurationSchema"
class="el-form-item__error"
>
{{ $t('datasource.please_choose_schema') }}
</div>
</el-form-item>
<el-form-item
@ -896,13 +903,6 @@ export default {
trigger: 'blur'
}
],
'configuration.schema': [
{
required: true,
message: i18n.t('datasource.please_input_connect_timeout'),
trigger: 'blur'
}
],
url: [
{
required: true,
@ -919,6 +919,7 @@ export default {
]
},
api_table_title: '',
configurationSchema: false,
schemas: [],
showEmpty: false,
canEdit: false,
@ -1013,9 +1014,10 @@ export default {
certinKey: false
}
},
watch: {},
created() {},
methods: {
validatorSchema() {
this.configurationSchema = !this.form.configuration.schema
},
getSchema() {
this.$refs.DsConfig.validate((valid) => {
if (valid) {