8ca724dce34f2cc94c2745334a2fbc9bf251d204.svn-base 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. import { getAction } from '@/api/manage'
  2. import { CHART_LIST } from '../utils/Utils'
  3. export const OnlAutoChartMixins = {
  4. data() {
  5. return {
  6. url: {
  7. list: '/diagram/diagramConfiguration/getChartsData'
  8. },
  9. chartData: [],
  10. head: {},
  11. items: [],
  12. onlineGraphType: CHART_LIST, // 图表类型字典
  13. spinning: true,
  14. cggraphreportData: {},
  15. aliases: []
  16. }
  17. },
  18. computed: {
  19. graphTypeDictOptions() { // 获取需要渲染的图表类型
  20. var graphTypes = this.head.graphType ? this.head.graphType.split(',') : []
  21. var charts = []
  22. console.log(this.onlineGraphType)
  23. console.log(CHART_LIST)
  24. this.onlineGraphType.forEach(function(item, i) {
  25. if (graphTypes.indexOf(item.value) >= 0 && item.value !== 'table') {
  26. charts.push(item)
  27. }
  28. })
  29. return charts
  30. }
  31. },
  32. created() {
  33. this.init()
  34. },
  35. methods: {
  36. init(queryParam) {
  37. if (this.propsChartData) {
  38. this.setChartData(JSON.parse(JSON.stringify(this.propsChartData)))
  39. this.spinning = false
  40. this.cggraphreportData = JSON.parse(JSON.stringify(this.propsChartData))
  41. this.setAliases(this.cggraphreportData)
  42. } else {
  43. const url = this.$route.fullPath
  44. const code = this.code || url.replace('/online/cggraphreport/chart/', '')
  45. this.spinning = true
  46. if (queryParam) {
  47. queryParam = encodeURI(JSON.stringify(queryParam))
  48. }
  49. getAction(this.url.list, { code: code, params: queryParam || '' }).then((res) => { // 根据code获取渲染数据
  50. if (res.success) {
  51. this.setChartData(res.result)
  52. this.cggraphreportData = res.result
  53. this.setAliases(this.cggraphreportData)
  54. }
  55. if (res.code === 510) {
  56. this.$message.warning(res.message)
  57. }
  58. this.spinning = false
  59. })
  60. }
  61. },
  62. setChartData(data) { // 设置基础data
  63. this.head = data.head
  64. this.items = data.items
  65. var sqlData = []
  66. if (data.head.dataType === 'json' && data.head.cgrSql) {
  67. sqlData = JSON.parse(data.head.cgrSql.replace(/↵/g, ''))
  68. } else if ((data.head.dataType === 'sql' || data.head.dataType === 'bean') && data.head.aggregate === true) {
  69. sqlData = data.data.aggregate
  70. } else if ((data.head.dataType === 'sql' || data.head.dataType === 'bean') && data.head.aggregate === false) {
  71. sqlData = data.data.data
  72. }
  73. this.chartData = sqlData
  74. },
  75. getCol() {
  76. const graphTypes = this.head.graphType.split(',')
  77. if (this.head.displayTemplate === 'single') {
  78. return { xl: 24, lg: 24, md: 24, sm: 24 }
  79. } else if (this.head.displayTemplate === 'double' && graphTypes.length > 1) {
  80. return { xl: 12, lg: 12, md: 12, sm: 12 }
  81. } else if (this.head.displayTemplate === 'double' && graphTypes.length <= 1) {
  82. return { xl: 24, lg: 24, md: 24, sm: 24 }
  83. }
  84. return {}
  85. },
  86. getChartType(type) { // 获取是否包含改类型图表
  87. if (this.head.graphType) {
  88. const graphTypes = this.head.graphType.split(',')
  89. return graphTypes.indexOf(type) >= 0
  90. } else {
  91. return false
  92. }
  93. },
  94. isOnlyTable() { // 判断是否只有table和treeTable
  95. if (this.head.graphType) {
  96. const graphTypes = this.head.graphType.split(',')
  97. let flag = false
  98. switch (graphTypes.length) {
  99. case 1:
  100. flag = graphTypes.indexOf('table') >= 0 || graphTypes.indexOf('treeTable') >= 0
  101. break
  102. case 2:
  103. flag = graphTypes.indexOf('table') >= 0 && graphTypes.indexOf('treeTable') >= 0
  104. break
  105. default:
  106. flag = false
  107. }
  108. return flag
  109. } else {
  110. return false
  111. }
  112. },
  113. setAliases(data) {
  114. if (data.items) {
  115. const groupFields = data.head.groupField.split(',')
  116. data.items.forEach(item => {
  117. if (groupFields.indexOf(item.fieldName) >= 0) {
  118. this.aliases.push({
  119. field: item.fieldName,
  120. alias: item.fieldTxt
  121. })
  122. }
  123. })
  124. }
  125. }
  126. }
  127. }