123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
- import { getAction } from '@/api/manage'
- import { CHART_LIST } from '../utils/Utils'
- export const OnlAutoChartMixins = {
- data() {
- return {
- url: {
- list: '/diagram/diagramConfiguration/getChartsData'
- },
- chartData: [],
- head: {},
- items: [],
- onlineGraphType: CHART_LIST, // 图表类型字典
- spinning: true,
- cggraphreportData: {},
- aliases: []
- }
- },
- computed: {
- graphTypeDictOptions() { // 获取需要渲染的图表类型
- var graphTypes = this.head.graphType ? this.head.graphType.split(',') : []
- var charts = []
- console.log(this.onlineGraphType)
- console.log(CHART_LIST)
- this.onlineGraphType.forEach(function(item, i) {
- if (graphTypes.indexOf(item.value) >= 0 && item.value !== 'table') {
- charts.push(item)
- }
- })
- return charts
- }
- },
- created() {
- this.init()
- },
- methods: {
- init(queryParam) {
- if (this.propsChartData) {
- this.setChartData(JSON.parse(JSON.stringify(this.propsChartData)))
- this.spinning = false
- this.cggraphreportData = JSON.parse(JSON.stringify(this.propsChartData))
- this.setAliases(this.cggraphreportData)
- } else {
- const url = this.$route.fullPath
- const code = this.code || url.replace('/online/cggraphreport/chart/', '')
- this.spinning = true
- if (queryParam) {
- queryParam = encodeURI(JSON.stringify(queryParam))
- }
- getAction(this.url.list, { code: code, params: queryParam || '' }).then((res) => { // 根据code获取渲染数据
- if (res.success) {
- this.setChartData(res.result)
- this.cggraphreportData = res.result
- this.setAliases(this.cggraphreportData)
- }
- if (res.code === 510) {
- this.$message.warning(res.message)
- }
- this.spinning = false
- })
- }
- },
- setChartData(data) { // 设置基础data
- this.head = data.head
- this.items = data.items
- var sqlData = []
- if (data.head.dataType === 'json' && data.head.cgrSql) {
- sqlData = JSON.parse(data.head.cgrSql.replace(/↵/g, ''))
- } else if ((data.head.dataType === 'sql' || data.head.dataType === 'bean') && data.head.aggregate === true) {
- sqlData = data.data.aggregate
- } else if ((data.head.dataType === 'sql' || data.head.dataType === 'bean') && data.head.aggregate === false) {
- sqlData = data.data.data
- }
- this.chartData = sqlData
- },
- getCol() {
- const graphTypes = this.head.graphType.split(',')
- if (this.head.displayTemplate === 'single') {
- return { xl: 24, lg: 24, md: 24, sm: 24 }
- } else if (this.head.displayTemplate === 'double' && graphTypes.length > 1) {
- return { xl: 12, lg: 12, md: 12, sm: 12 }
- } else if (this.head.displayTemplate === 'double' && graphTypes.length <= 1) {
- return { xl: 24, lg: 24, md: 24, sm: 24 }
- }
- return {}
- },
- getChartType(type) { // 获取是否包含改类型图表
- if (this.head.graphType) {
- const graphTypes = this.head.graphType.split(',')
- return graphTypes.indexOf(type) >= 0
- } else {
- return false
- }
- },
- isOnlyTable() { // 判断是否只有table和treeTable
- if (this.head.graphType) {
- const graphTypes = this.head.graphType.split(',')
- let flag = false
- switch (graphTypes.length) {
- case 1:
- flag = graphTypes.indexOf('table') >= 0 || graphTypes.indexOf('treeTable') >= 0
- break
- case 2:
- flag = graphTypes.indexOf('table') >= 0 && graphTypes.indexOf('treeTable') >= 0
- break
- default:
- flag = false
- }
- return flag
- } else {
- return false
- }
- },
- setAliases(data) {
- if (data.items) {
- const groupFields = data.head.groupField.split(',')
- data.items.forEach(item => {
- if (groupFields.indexOf(item.fieldName) >= 0) {
- this.aliases.push({
- field: item.fieldName,
- alias: item.fieldTxt
- })
- }
- })
- }
- }
- }
- }
|