forked from github/dataease
feat: antv图库 标题支持修改 数据源图标更换 数据集部分bug修复
This commit is contained in:
dataeaseShu
parent
1d8e1373e1
commit
14d676faa0
@ -1,13 +1,13 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.5C7.07786 1.5 5.30656 1.7586 3.98986 2.1975C3.33543 2.41564 2.75172 2.69192 2.31622 3.03514C1.88917 3.37169 1.5 3.86104 1.5 4.5V13.5C1.5 14.139 1.88917 14.6283 2.31622 14.9649C2.75172 15.3081 3.33543 15.5844 3.98986 15.8025C5.30656 16.2414 7.07786 16.5 9 16.5C10.9221 16.5 12.6934 16.2414 14.0101 15.8025C14.6646 15.5844 15.2483 15.3081 15.6838 14.9649C16.1108 14.6283 16.5 14.139 16.5 13.5V4.5C16.5 3.86104 16.1108 3.37169 15.6838 3.03514C15.2483 2.69192 14.6646 2.41564 14.0101 2.1975C12.6934 1.7586 10.9221 1.5 9 1.5ZM15 6.39495C14.6991 6.54883 14.365 6.68421 14.0101 6.8025C12.6934 7.2414 10.9221 7.5 9 7.5C7.07786 7.5 5.30656 7.2414 3.98986 6.8025C3.63499 6.68421 3.30092 6.54883 3 6.39495V9C3 9.00091 3.00012 9.00435 3.00229 9.01147C3.00484 9.01983 3.01112 9.03634 3.02631 9.06107C3.05814 9.11293 3.12306 9.1909 3.24468 9.28674C3.49231 9.4819 3.89712 9.69045 4.4642 9.87948C5.59052 10.2549 7.19422 10.5 9 10.5C10.8058 10.5 12.4095 10.2549 13.5358 9.87948C14.1029 9.69045 14.5077 9.4819 14.7553 9.28674C14.8769 9.1909 14.9419 9.11293 14.9737 9.06107C14.9889 9.03634 14.9952 9.01983 14.9977 9.01147C14.9999 9.00429 15 9.00105 15 9.00017C15 9.0002 15 9.00012 15 9.00017V6.39495ZM15 10.8949C14.6991 11.0488 14.365 11.1842 14.0101 11.3025C12.6934 11.7414 10.9221 12 9 12C7.07786 12 5.30656 11.7414 3.98986 11.3025C3.63499 11.1842 3.30092 11.0488 3 10.8949V13.5C3 13.5007 2.99999 13.5039 3.00229 13.5115C3.00484 13.5198 3.01112 13.5363 3.02631 13.5611C3.05814 13.6129 3.12306 13.6909 3.24468 13.7867C3.49231 13.9819 3.89712 14.1905 4.4642 14.3795C5.59052 14.7549 7.19422 15 9 15C10.8058 15 12.4095 14.7549 13.5358 14.3795C14.1029 14.1905 14.5077 13.9819 14.7553 13.7867C14.8769 13.6909 14.9419 13.6129 14.9737 13.5611C14.9889 13.5363 14.9952 13.5198 14.9977 13.5115C15 13.5039 15 13.5007 15 13.5V10.8949Z" fill="#1F2329"/>
|
||||
<g clip-path="url(#clip0_3097_94188)">
|
||||
<path d="M15 19.5832C17.5313 19.5832 19.5834 17.5311 19.5834 14.9998C19.5834 12.4685 17.5313 10.4165 15 10.4165C12.4687 10.4165 10.4167 12.4685 10.4167 14.9998C10.4167 17.5311 12.4687 19.5832 15 19.5832Z" fill="#F54A45"/>
|
||||
<path d="M14.7916 12.9165C14.6766 12.9165 14.5833 13.0098 14.5833 13.1248V15.6248C14.5833 15.7399 14.6766 15.8332 14.7916 15.8332H15.2083C15.3234 15.8332 15.4166 15.7399 15.4166 15.6248V13.1248C15.4166 13.0098 15.3234 12.9165 15.2083 12.9165H14.7916Z" fill="white"/>
|
||||
<path d="M14.7916 16.2498C14.6766 16.2498 14.5833 16.3431 14.5833 16.4582V16.8748C14.5833 16.9899 14.6766 17.0832 14.7916 17.0832H15.2083C15.3234 17.0832 15.4166 16.9899 15.4166 16.8748V16.4582C15.4166 16.3431 15.3234 16.2498 15.2083 16.2498H14.7916Z" fill="white"/>
|
||||
<g clip-path="url(#clip0_4341_151955)">
|
||||
<path d="M14 19.5C17.0376 19.5 19.5 17.0376 19.5 14C19.5 10.9624 17.0376 8.5 14 8.5C10.9624 8.5 8.5 10.9624 8.5 14C8.5 17.0376 10.9624 19.5 14 19.5Z" fill="#F54A45"/>
|
||||
<path d="M13.75 11.5C13.6119 11.5 13.5 11.6119 13.5 11.75V14.75C13.5 14.8881 13.6119 15 13.75 15H14.25C14.3881 15 14.5 14.8881 14.5 14.75V11.75C14.5 11.6119 14.3881 11.5 14.25 11.5H13.75Z" fill="white"/>
|
||||
<path d="M13.75 15.5C13.6119 15.5 13.5 15.6119 13.5 15.75V16.25C13.5 16.3881 13.6119 16.5 13.75 16.5H14.25C14.3881 16.5 14.5 16.3881 14.5 16.25V15.75C14.5 15.6119 14.3881 15.5 14.25 15.5H13.75Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3097_94188">
|
||||
<rect width="10" height="10" fill="white" transform="translate(10 10)"/>
|
||||
<clipPath id="clip0_4341_151955">
|
||||
<rect width="12" height="12" fill="white" transform="translate(8 8)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.7 KiB |
@ -17,9 +17,9 @@ export function randomRange(min, max) {
|
||||
return returnStr
|
||||
}
|
||||
|
||||
export function equalsAny(target,...sources) {
|
||||
export function equalsAny(target, ...sources) {
|
||||
for (let i = 0; i < sources.length; i++) {
|
||||
if (target === sources[i]){
|
||||
if (target === sources[i]) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,7 +19,20 @@
|
||||
style="cursor: default;display: block;"
|
||||
>
|
||||
<div style="padding:6px 4px 0;margin: 0;">
|
||||
<p style="overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
|
||||
<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>
|
||||
<title-remark
|
||||
v-if="remarkCfg.show"
|
||||
style="text-shadow: none!important;"
|
||||
@ -53,10 +66,22 @@ 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 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'
|
||||
export default {
|
||||
name: 'ChartComponentG2',
|
||||
components: { TitleRemark, ViewTrackBar },
|
||||
directives: {
|
||||
clickoutside
|
||||
},
|
||||
props: {
|
||||
chart: {
|
||||
type: Object,
|
||||
@ -98,6 +123,7 @@ export default {
|
||||
top: '0px'
|
||||
},
|
||||
pointParam: null,
|
||||
chartTitleEditer: false,
|
||||
dynamicAreaCode: null,
|
||||
borderRadius: '0px',
|
||||
chartHeight: '100%',
|
||||
@ -131,6 +157,12 @@ export default {
|
||||
return {
|
||||
borderRadius: this.borderRadius
|
||||
}
|
||||
},
|
||||
panelInfo() {
|
||||
return this.$store.state.panel.panelInfo
|
||||
},
|
||||
mainActiveName() {
|
||||
return this.$store.state.panel.mainActiveName
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -383,6 +415,228 @@ 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') 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)
|
||||
}
|
||||
@ -392,4 +646,27 @@ export default {
|
||||
|
||||
<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,7 +19,20 @@
|
||||
style="cursor: default;display: block;"
|
||||
>
|
||||
<div style="padding:6px 4px 0;margin: 0;">
|
||||
<p style="overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
|
||||
<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>
|
||||
<title-remark
|
||||
v-if="remarkCfg.show"
|
||||
style="text-shadow: none!important;"
|
||||
@ -83,10 +96,21 @@ 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 { compareItem } from '@/views/chart/chart/compare'
|
||||
import {
|
||||
getChartDetails
|
||||
} from '@/api/chart/chart'
|
||||
import {
|
||||
viewEditSave
|
||||
} from '@/api/chart/chart'
|
||||
export default {
|
||||
name: 'ChartComponentS2',
|
||||
components: { TitleRemark, ViewTrackBar },
|
||||
directives: {
|
||||
clickoutside
|
||||
},
|
||||
props: {
|
||||
chart: {
|
||||
type: Object,
|
||||
@ -122,6 +146,7 @@ export default {
|
||||
left: '0px',
|
||||
top: '0px'
|
||||
},
|
||||
chartTitleEditer: false,
|
||||
pointParam: null,
|
||||
dynamicAreaCode: null,
|
||||
borderRadius: '0px',
|
||||
@ -141,6 +166,7 @@ export default {
|
||||
},
|
||||
title_show: true,
|
||||
antVRenderStatus: false,
|
||||
chartTitleUpdate: '',
|
||||
currentPage: {
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
@ -165,6 +191,12 @@ export default {
|
||||
return {
|
||||
borderRadius: this.borderRadius
|
||||
}
|
||||
},
|
||||
panelInfo() {
|
||||
return this.$store.state.panel.panelInfo
|
||||
},
|
||||
mainActiveName() {
|
||||
return this.$store.state.panel.mainActiveName
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -411,7 +443,228 @@ 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') 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()
|
||||
@ -511,4 +764,28 @@ 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>
|
||||
|
||||
@ -253,13 +253,19 @@ export default {
|
||||
computed: {
|
||||
...mapState([
|
||||
'batchOptStatus'
|
||||
])
|
||||
]),
|
||||
title() {
|
||||
return this.chart.name
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'chart': {
|
||||
handler: function() {
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
title(val) {
|
||||
this.titleForm = { ...this.titleForm, title: val }
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -361,11 +361,23 @@
|
||||
|
||||
<!--chart-mix-start-->
|
||||
<span v-show="showProperty('mix')">
|
||||
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_bar') }}</el-divider>
|
||||
<el-form-item :label="$t('chart.adapt')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
|
||||
<el-divider
|
||||
content-position="center"
|
||||
class="divider-style"
|
||||
>{{ $t('chart.chart_bar') }}</el-divider>
|
||||
<el-form-item
|
||||
:label="$t('chart.adapt')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="sizeForm.barDefault"
|
||||
@change="changeBarSizeCase('barDefault')"
|
||||
>{{ $t('chart.adapt') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
|
||||
<el-form-item
|
||||
:label="$t('chart.bar_gap')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.barGap"
|
||||
:disabled="sizeForm.barDefault"
|
||||
@ -378,7 +390,10 @@
|
||||
@change="changeBarSizeCase('barGap')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_line') }}</el-divider>
|
||||
<el-divider
|
||||
content-position="center"
|
||||
class="divider-style"
|
||||
>{{ $t('chart.chart_line') }}</el-divider>
|
||||
<el-form-item
|
||||
:label="$t('chart.line_width')"
|
||||
class="form-item form-item-slider"
|
||||
@ -393,8 +408,15 @@
|
||||
@change="changeBarSizeCase('lineWidth')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
|
||||
<el-form-item
|
||||
:label="$t('chart.line_symbol')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-select
|
||||
v-model="sizeForm.lineSymbol"
|
||||
:placeholder="$t('chart.line_symbol')"
|
||||
@change="changeBarSizeCase('lineSymbol')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
@ -417,12 +439,24 @@
|
||||
@change="changeBarSizeCase('lineSymbolSize')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase('lineSmooth')">{{ $t('chart.line_smooth') }}
|
||||
<el-form-item
|
||||
:label="$t('chart.line_smooth')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="sizeForm.lineSmooth"
|
||||
@change="changeBarSizeCase('lineSmooth')"
|
||||
>{{ $t('chart.line_smooth') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_scatter') }}</el-divider>
|
||||
<el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
|
||||
<el-divider
|
||||
content-position="center"
|
||||
class="divider-style"
|
||||
>{{ $t('chart.chart_scatter') }}</el-divider>
|
||||
<el-form-item
|
||||
:label="$t('chart.bubble_symbol')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-select
|
||||
v-model="sizeForm.scatterSymbol"
|
||||
:placeholder="$t('chart.line_symbol')"
|
||||
|
||||
@ -1588,7 +1588,7 @@ import CustomSortEdit from '@/views/chart/components/compare/CustomSortEdit'
|
||||
import ScrollCfg from '@/views/chart/components/senior/ScrollCfg'
|
||||
import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
|
||||
import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
|
||||
import { equalsAny } from "@/utils/StringUtils";
|
||||
import { equalsAny } from '@/utils/StringUtils'
|
||||
|
||||
export default {
|
||||
name: 'ChartEdit',
|
||||
@ -1854,6 +1854,10 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
setTitle(val) {
|
||||
this.chart.name = val
|
||||
this.view.name = val
|
||||
},
|
||||
resetChartData() {
|
||||
this.getChart(this.param.id)
|
||||
},
|
||||
@ -1880,9 +1884,9 @@ export default {
|
||||
// v1.16.0 需求，拆分环形图
|
||||
convertChart(chart) {
|
||||
// v1.16.0，将有内径的饼图和玫瑰图转换成环形图和玫瑰环形图
|
||||
if (equalsAny(chart.type,'pie','pie-rose')) {
|
||||
let customAttr = chart.customAttr;
|
||||
if (typeof chart.customAttr === 'string'){
|
||||
if (equalsAny(chart.type, 'pie', 'pie-rose')) {
|
||||
let customAttr = chart.customAttr
|
||||
if (typeof chart.customAttr === 'string') {
|
||||
customAttr = JSON.parse(customAttr)
|
||||
}
|
||||
if (customAttr.size.pieInnerRadius > 0) {
|
||||
@ -2354,9 +2358,9 @@ export default {
|
||||
this.httpRequest.msg = err.response.data.message
|
||||
return true
|
||||
}).then(() => {
|
||||
//视图为编辑状态才进行转换
|
||||
// 视图为编辑状态才进行转换
|
||||
if (this.editStatue) {
|
||||
this.convertChart(this.chart);
|
||||
this.convertChart(this.chart)
|
||||
this.convertChart(this.view)
|
||||
}
|
||||
})
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
>
|
||||
<div style="flex: 1">
|
||||
<el-row>
|
||||
<el-row>
|
||||
<el-row style="max-width: 480px;">
|
||||
<span class="mb8">
|
||||
{{ $t('dataset.field_exp') }}
|
||||
<el-tooltip
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
icon="el-icon-refresh-left"
|
||||
@click="syncField"
|
||||
>{{ $t('dataset.sync_field') }}</deBtn>
|
||||
|
||||
</el-col>
|
||||
<el-col
|
||||
style="text-align: right"
|
||||
|
||||
@ -803,6 +803,7 @@ export default {
|
||||
bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
|
||||
bus.$off('delete-condition', this.deleteCustomComponent)
|
||||
bus.$off('current-component-change', this.asideRefresh)
|
||||
bus.$off('aside-set-title', this.asideSetTitle)
|
||||
const elx = this.$refs.rightPanel
|
||||
elx && elx.remove()
|
||||
},
|
||||
@ -825,12 +826,18 @@ export default {
|
||||
bus.$on('change_panel_right_draw', this.changeRightDrawOpen)
|
||||
bus.$on('delete-condition', this.deleteCustomComponent)
|
||||
bus.$on('current-component-change', this.asideRefresh)
|
||||
bus.$on('aside-set-title', this.asideSetTitle)
|
||||
},
|
||||
asideRefresh() {
|
||||
if (this.$refs['chartEditRef']) {
|
||||
this.$refs['chartEditRef'].resetChartData()
|
||||
}
|
||||
},
|
||||
asideSetTitle(val) {
|
||||
if (this.$refs['chartEditRef']) {
|
||||
this.$refs['chartEditRef'].setTitle(val)
|
||||
}
|
||||
},
|
||||
deleteCustomComponent(param) {
|
||||
param && param.componentId && this.componentData.forEach(com => {
|
||||
if (com.type === 'custom-button' && com.options.attrs.filterIds) {
|
||||
|
||||
@ -330,6 +330,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
tabActive: 'all',
|
||||
currentNodeId: '',
|
||||
dsTypeRelate: false,
|
||||
expandedArray: [],
|
||||
tData: [],
|
||||
@ -437,11 +438,31 @@ export default {
|
||||
this.key = ''
|
||||
this.showSearchInput = false
|
||||
},
|
||||
dfsTableData(arr, id) {
|
||||
arr.some((ele) => {
|
||||
if (ele.id === id) {
|
||||
this.$refs.myDsTree?.setCurrentNode(ele)
|
||||
this.showInfo({ data: ele })
|
||||
this.expandedArray.push(id)
|
||||
return true
|
||||
} else if (ele.children?.length) {
|
||||
this.dfsTableData(ele.children, id)
|
||||
}
|
||||
return false
|
||||
})
|
||||
},
|
||||
queryTreeDatas() {
|
||||
this.treeLoading = true
|
||||
if (this.showView === 'Datasource') {
|
||||
listDatasource().then((res) => {
|
||||
this.tData = this.buildTree(res.data)
|
||||
this.$nextTick(() => {
|
||||
const currentNodeId = sessionStorage.getItem('datasource-current-node')
|
||||
if (currentNodeId) {
|
||||
sessionStorage.setItem('datasource-current-node', '')
|
||||
this.dfsTableData(this.tData, currentNodeId)
|
||||
}
|
||||
})
|
||||
}).finally(() => {
|
||||
this.treeLoading = false
|
||||
})
|
||||
@ -569,6 +590,7 @@ export default {
|
||||
},
|
||||
nodeClick(node, data) {
|
||||
if (node.type === 'folder') return
|
||||
this.currentNodeId = this.showView !== 'Driver' && node.id
|
||||
this.showInfo(data)
|
||||
},
|
||||
clickFileMore(param) {
|
||||
@ -613,6 +635,7 @@ export default {
|
||||
if (this.showView === 'Datasource') {
|
||||
const param = { ...row, ...{ showModel: 'show' }}
|
||||
this.switchMain('DsForm', param, this.tData, this.dsTypes)
|
||||
this.currentNodeId && sessionStorage.setItem('datasource-current-node', this.currentNodeId)
|
||||
return
|
||||
}
|
||||
this.editDriver = true
|
||||
@ -634,6 +657,9 @@ export default {
|
||||
}
|
||||
method(parma).then((res) => {
|
||||
if (res.success) {
|
||||
if (datasource.id === this.currentNodeId) {
|
||||
sessionStorage.setItem('datasource-current-node', '')
|
||||
}
|
||||
this.openMessageSuccess('commons.delete_success')
|
||||
this.switchMain('', {}, this.tData, this.dsTypes)
|
||||
this.refreshType(datasource)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user