mirror of
https://github.com/dataease/dataease.git
synced 2025-02-27 22:15:43 +08:00
801 lines
24 KiB
Vue
801 lines
24 KiB
Vue
<template>
|
||
<div
|
||
ref="chartContainer"
|
||
style="padding: 0;width: 100%;height: 100%;overflow: hidden;"
|
||
:style="bg_class"
|
||
>
|
||
<view-track-bar
|
||
ref="viewTrack"
|
||
:track-menu="trackMenu"
|
||
class="track-bar"
|
||
:style="trackBarStyleTime"
|
||
@trackClick="trackClick"
|
||
/>
|
||
<span
|
||
v-if="chart.type"
|
||
v-show="title_show"
|
||
ref="title"
|
||
:style="title_class"
|
||
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>
|
||
<title-remark
|
||
v-if="remarkCfg.show"
|
||
style="text-shadow: none!important;"
|
||
:remark-cfg="remarkCfg"
|
||
/>
|
||
</div>
|
||
</span>
|
||
<div
|
||
ref="tableContainer"
|
||
style="width: 100%;overflow: hidden;"
|
||
:style="{background:container_bg_class.background}"
|
||
>
|
||
<div
|
||
v-if="chart.type === 'table-normal'"
|
||
:id="chartId"
|
||
style="width: 100%;overflow: hidden;"
|
||
:class="chart.drill ? 'table-dom-normal-drill' : 'table-dom-normal'"
|
||
/>
|
||
<div
|
||
v-if="chart.type === 'table-info'"
|
||
:id="chartId"
|
||
style="width: 100%;overflow: hidden;"
|
||
:class="chart.drill ? (showPage ? 'table-dom-info-drill' : 'table-dom-info-drill-pull') : (showPage ? 'table-dom-info' : 'table-dom-info-pull')"
|
||
/>
|
||
<div
|
||
v-if="chart.type === 'table-pivot'"
|
||
:id="chartId"
|
||
style="width: 100%;overflow: hidden;"
|
||
class="table-dom-normal"
|
||
/>
|
||
<el-row
|
||
v-show="showPage"
|
||
class="table-page"
|
||
>
|
||
<span class="total-style">
|
||
{{ $t('chart.total') }}
|
||
<span>{{ (chart.data && chart.data.tableRow)?chart.data.tableRow.length:0 }}</span>
|
||
{{ $t('chart.items') }}
|
||
</span>
|
||
<el-pagination
|
||
small
|
||
:current-page="currentPage.page"
|
||
:page-sizes="[10,20,50,100]"
|
||
:page-size="currentPage.pageSize"
|
||
:pager-count="5"
|
||
layout="prev, pager, next"
|
||
:total="currentPage.show"
|
||
class="page-style"
|
||
@current-change="pageClick"
|
||
@size-change="pageChange"
|
||
/>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { uuid } from 'vue-uuid'
|
||
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
|
||
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,
|
||
required: true
|
||
},
|
||
filter: {
|
||
type: Object,
|
||
required: false,
|
||
default: function() {
|
||
return {}
|
||
}
|
||
},
|
||
trackMenu: {
|
||
type: Array,
|
||
required: false,
|
||
default: function() {
|
||
return ['drill']
|
||
}
|
||
},
|
||
searchCount: {
|
||
type: Number,
|
||
required: false,
|
||
default: 0
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
myChart: null,
|
||
chartId: uuid.v1(),
|
||
showTrackBar: true,
|
||
trackBarStyle: {
|
||
position: 'absolute',
|
||
left: '0px',
|
||
top: '0px'
|
||
},
|
||
chartTitleEditer: false,
|
||
pointParam: null,
|
||
dynamicAreaCode: null,
|
||
borderRadius: '0px',
|
||
chartHeight: '100%',
|
||
title_class: {
|
||
margin: '0 0',
|
||
width: '100%',
|
||
fontSize: '18px',
|
||
color: '#303133',
|
||
textAlign: 'left',
|
||
fontStyle: 'normal',
|
||
fontWeight: 'normal',
|
||
background: ''
|
||
},
|
||
container_bg_class: {
|
||
background: hexColorToRGBA('#ffffff', 0)
|
||
},
|
||
title_show: true,
|
||
antVRenderStatus: false,
|
||
chartTitleUpdate: '',
|
||
currentPage: {
|
||
page: 1,
|
||
pageSize: 20,
|
||
show: 0
|
||
},
|
||
tableData: [],
|
||
showPage: false,
|
||
scrollTimer: null,
|
||
scrollTop: 0,
|
||
remarkCfg: {
|
||
show: false,
|
||
content: ''
|
||
}
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
trackBarStyleTime() {
|
||
return this.trackBarStyle
|
||
},
|
||
bg_class() {
|
||
return {
|
||
borderRadius: this.borderRadius
|
||
}
|
||
},
|
||
panelInfo() {
|
||
return this.$store.state.panel.panelInfo
|
||
},
|
||
mainActiveName() {
|
||
return this.$store.state.panel.mainActiveName
|
||
}
|
||
},
|
||
watch: {
|
||
chart: {
|
||
handler(newVal, oldVla) {
|
||
this.initData()
|
||
this.initTitle()
|
||
this.calcHeightDelay()
|
||
new Promise((resolve) => { resolve() }).then(() => {
|
||
this.drawView()
|
||
})
|
||
},
|
||
deep: true
|
||
},
|
||
resize() {
|
||
this.drawEcharts()
|
||
}
|
||
},
|
||
mounted() {
|
||
this.preDraw()
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.scrollTimer)
|
||
this.destroyS2()
|
||
},
|
||
methods: {
|
||
initData() {
|
||
let datas = []
|
||
this.showPage = false
|
||
if (this.chart.data && this.chart.data.fields) {
|
||
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
|
||
const attr = JSON.parse(this.chart.customAttr)
|
||
this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)
|
||
datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
|
||
if (this.chart.type === 'table-info' && (attr.size.tablePageMode === 'page' || !attr.size.tablePageMode) && datas.length > this.currentPage.pageSize) {
|
||
// 计算分页
|
||
this.currentPage.show = datas.length
|
||
const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
|
||
const pageEnd = pageStart + this.currentPage.pageSize
|
||
datas = datas.slice(pageStart, pageEnd)
|
||
this.showPage = true
|
||
}
|
||
} else {
|
||
this.fields = []
|
||
datas = []
|
||
this.resetPage()
|
||
}
|
||
this.tableData = datas
|
||
},
|
||
preDraw() {
|
||
this.initData()
|
||
this.initTitle()
|
||
this.calcHeightDelay()
|
||
new Promise((resolve) => { resolve() }).then(() => {
|
||
this.drawView()
|
||
})
|
||
const that = this
|
||
window.onresize = function() {
|
||
that.initData()
|
||
that.initTitle()
|
||
that.calcHeightDelay()
|
||
new Promise((resolve) => { resolve() }).then(() => {
|
||
that.drawView()
|
||
})
|
||
}
|
||
},
|
||
destroyS2() {
|
||
if (!this.myChart) return
|
||
for (const i in this.myChart) {
|
||
this.$delete(this.myChart, i)
|
||
}
|
||
this.myChart = null
|
||
},
|
||
drawView() {
|
||
const chart = this.chart
|
||
// type
|
||
// if (chart.data) {
|
||
this.antVRenderStatus = true
|
||
if (!chart.data || (!chart.data.datas && !chart.data.series)) {
|
||
chart.data = {
|
||
datas: [{}],
|
||
series: [
|
||
{
|
||
data: [0]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
if (chart.type === 'table-info') {
|
||
this.myChart = baseTableInfo(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
|
||
} else if (chart.type === 'table-normal') {
|
||
this.myChart = baseTableNormal(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
|
||
} else if (chart.type === 'table-pivot') {
|
||
this.myChart = baseTablePivot(this.myChart, this.chartId, chart, this.antVAction, this.tableData)
|
||
} else {
|
||
if (this.myChart) {
|
||
this.antVRenderStatus = false
|
||
this.myChart.destroy()
|
||
this.destroyS2()
|
||
}
|
||
}
|
||
|
||
if (this.myChart && this.searchCount > 0) {
|
||
this.myChart.options.animation = false
|
||
}
|
||
|
||
if (this.myChart && this.antVRenderStatus) {
|
||
this.myChart.render()
|
||
this.initScroll()
|
||
}
|
||
this.setBackGroundBorder()
|
||
},
|
||
|
||
antVAction(param) {
|
||
const cell = this.myChart.getCell(param.target)
|
||
const meta = cell.getMeta()
|
||
const nameIdMap = this.chart.data.fields.reduce((pre, next) => {
|
||
pre[next['dataeaseName']] = next['id']
|
||
return pre
|
||
}, {})
|
||
|
||
let rowData
|
||
if (this.chart.type === 'table-pivot') {
|
||
rowData = { ...meta.rowQuery, ...meta.colQuery }
|
||
rowData[meta.valueField] = meta.fieldValue
|
||
} else if (this.showPage) {
|
||
const rowIndex = (this.currentPage.page - 1) * this.currentPage.pageSize + meta.rowIndex
|
||
rowData = this.chart.data.tableRow[rowIndex]
|
||
} else {
|
||
rowData = this.chart.data.tableRow[meta.rowIndex]
|
||
}
|
||
const dimensionList = []
|
||
for (const key in rowData) {
|
||
if (meta.fieldValue === rowData[key]) {
|
||
dimensionList.push({ id: nameIdMap[key], value: rowData[key] })
|
||
}
|
||
}
|
||
|
||
this.pointParam = {
|
||
data: {
|
||
dimensionList: dimensionList,
|
||
quotaList: [],
|
||
name: meta.fieldValue || 'null'
|
||
}
|
||
}
|
||
|
||
if (this.trackMenu.length < 2) { // 只有一个事件直接调用
|
||
this.trackClick(this.trackMenu[0])
|
||
} else { // 视图关联多个事件
|
||
this.trackBarStyle.left = param.x + 'px'
|
||
this.trackBarStyle.top = (param.y + 10) + 'px'
|
||
this.$refs.viewTrack.trackButtonClick()
|
||
}
|
||
},
|
||
setBackGroundBorder() {
|
||
if (this.chart.customStyle) {
|
||
const customStyle = JSON.parse(this.chart.customStyle)
|
||
if (customStyle.background) {
|
||
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
|
||
}
|
||
}
|
||
},
|
||
chartResize() {
|
||
this.initData()
|
||
this.initTitle()
|
||
this.calcHeightDelay()
|
||
new Promise((resolve) => { resolve() }).then(() => {
|
||
this.drawView()
|
||
})
|
||
},
|
||
trackClick(trackAction) {
|
||
const param = this.pointParam
|
||
if (!param || !param.data || !param.data.dimensionList) {
|
||
// 地图提示没有关联字段 其他没有维度信息的 直接返回
|
||
if (this.chart.type === 'map') {
|
||
this.$warning(this.$t('panel.no_drill_field'))
|
||
}
|
||
return
|
||
}
|
||
const linkageParam = {
|
||
option: 'linkage',
|
||
name: this.pointParam.data.name,
|
||
viewId: this.chart.id,
|
||
dimensionList: this.pointParam.data.dimensionList,
|
||
quotaList: this.pointParam.data.quotaList
|
||
}
|
||
const jumpParam = {
|
||
option: 'jump',
|
||
name: this.pointParam.data.name,
|
||
viewId: this.chart.id,
|
||
dimensionList: this.pointParam.data.dimensionList,
|
||
quotaList: this.pointParam.data.quotaList
|
||
}
|
||
switch (trackAction) {
|
||
case 'drill':
|
||
this.$emit('onChartClick', this.pointParam)
|
||
break
|
||
case 'linkage':
|
||
this.$store.commit('addViewTrackFilter', linkageParam)
|
||
break
|
||
case 'jump':
|
||
this.$emit('onJumpClick', jumpParam)
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
},
|
||
// title and bg
|
||
initTitle() {
|
||
if (this.chart.customStyle) {
|
||
const customStyle = JSON.parse(this.chart.customStyle)
|
||
if (customStyle.text) {
|
||
this.title_show = customStyle.text.show
|
||
// this.title_class.fontSize = customStyle.text.fontSize + 'px'
|
||
this.title_class.color = customStyle.text.color
|
||
this.title_class.textAlign = customStyle.text.hPosition
|
||
this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
|
||
this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
|
||
|
||
if (this.$refs.title) {
|
||
this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px'
|
||
}
|
||
|
||
this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
|
||
this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
|
||
this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
|
||
}
|
||
if (customStyle.background) {
|
||
this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
|
||
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
|
||
|
||
this.container_bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
|
||
}
|
||
}
|
||
this.initRemark()
|
||
},
|
||
|
||
calcHeightRightNow() {
|
||
this.$nextTick(() => {
|
||
if (this.$refs.chartContainer) {
|
||
const currentHeight = this.$refs.chartContainer.offsetHeight
|
||
if (this.$refs.title) {
|
||
const titleHeight = this.$refs.title.offsetHeight
|
||
this.chartHeight = (currentHeight - titleHeight) + 'px'
|
||
this.$refs.tableContainer.style.height = this.chartHeight
|
||
}
|
||
}
|
||
})
|
||
},
|
||
calcHeightDelay() {
|
||
this.calcHeightRightNow()
|
||
setTimeout(() => {
|
||
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()
|
||
this.drawView()
|
||
},
|
||
|
||
pageClick(val) {
|
||
this.currentPage.page = val
|
||
this.initData()
|
||
this.drawView()
|
||
},
|
||
|
||
resetPage() {
|
||
this.currentPage = {
|
||
page: 1,
|
||
pageSize: 20,
|
||
show: 0
|
||
}
|
||
},
|
||
|
||
initScroll() {
|
||
clearInterval(this.scrollTimer)
|
||
// 首先回到最顶部，然后计算行高*行数作为top，最后判断：如果top<数据量*行高，继续滚动，否则回到顶部
|
||
const customAttr = JSON.parse(this.chart.customAttr)
|
||
const senior = JSON.parse(this.chart.senior)
|
||
|
||
this.scrollTop = 0
|
||
this.myChart.store.set('scrollY', this.scrollTop)
|
||
this.myChart.render()
|
||
|
||
if (senior && senior.scrollCfg && senior.scrollCfg.open && (this.chart.type === 'table-normal' || (this.chart.type === 'table-info' && !this.showPage))) {
|
||
const rowHeight = customAttr.size.tableItemHeight
|
||
const headerHeight = customAttr.size.tableTitleHeight
|
||
|
||
this.scrollTimer = setInterval(() => {
|
||
const top = rowHeight * senior.scrollCfg.row
|
||
const dom = document.getElementById(this.chartId)
|
||
if ((dom.offsetHeight - headerHeight + this.scrollTop) < rowHeight * this.chart.data.tableRow.length) {
|
||
this.scrollTop += top
|
||
} else {
|
||
this.scrollTop = 0
|
||
}
|
||
this.myChart.store.set('scrollY', this.scrollTop)
|
||
this.myChart.render()
|
||
}, senior.scrollCfg.interval)
|
||
}
|
||
},
|
||
initRemark() {
|
||
this.remarkCfg = getRemark(this.chart)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.table-dom-info{
|
||
height:calc(100% - 36px);
|
||
}
|
||
.table-dom-info-pull{
|
||
height:calc(100%);
|
||
}
|
||
.table-dom-normal{
|
||
height:100%;
|
||
}
|
||
.table-dom-info-drill{
|
||
height:calc(100% - 36px - 12px);
|
||
}
|
||
.table-dom-info-drill-pull{
|
||
height:calc(100% - 12px);
|
||
}
|
||
.table-dom-normal-drill{
|
||
height:calc(100% - 12px);
|
||
}
|
||
.table-page{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
margin-top: 8px;
|
||
}
|
||
.page-style{
|
||
margin-right: auto;
|
||
}
|
||
.total-style{
|
||
flex: 1;
|
||
font-size: 12px;
|
||
color: #606266;
|
||
white-space:nowrap;
|
||
}
|
||
.page-style ::v-deep .el-input__inner{
|
||
height: 24px;
|
||
}
|
||
.page-style ::v-deep button{
|
||
background: transparent!important;
|
||
}
|
||
.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>
|