forked from github/dataease
fix: 仪表板 title 修改相关bug修复
This commit is contained in:
dataeaseShu
parent
c3ce2beb2e
commit
c6011186da
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
382
frontend/src/views/chart/components/ChartTitleUpdate.vue
Normal 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>
|
||||
@ -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', '')
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user