55701efeb721b4aed931113e8ae02ca9cc124f5e.svn-base 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <template>
  2. <div class="pane-container" style="position: relactive">
  3. <div>{{ messagechart }}</div>
  4. <!-- 单独画出来的转换表格 -->
  5. <el-button v-if="isChart" type="text" style="z-index: 1;position: absolute;top:10px;right: 100px" @click="handleTable()">切换表格</el-button>
  6. <!-- 切换出来的表格 -->
  7. <div v-if="isTable" class="table" style="width: 100%;height:100%;background: #fff;z-index: 1;position: absolute;top:0px;right: 0px;">
  8. <el-button type="text" style="float: right;margin-right: 100px;line-height: 30px;" @click="handleChart()">切换图表</el-button>
  9. <el-button type="text" style="z-index: 1;position: absolute;top:7px;right: 200px" @click="handleExport()">导出</el-button>
  10. <el-table style="width: 100%" height="310" border="true" fit highlight-current-row :data="data">
  11. <template v-for="(item,index) in schema">
  12. <el-table-column :key="index" :prop="item.Column" :label="item.Comment" />
  13. </template>
  14. </el-table>
  15. </div>
  16. <component :is="currentType.componentName" :data="chartData" :schema="schema" :chart-style="chartStyle" class="visualize-window" />
  17. <div v-if="isEditMode" class="chart-style-panel">
  18. <el-form label-position="top" size="mini">
  19. <el-form-item :label="$t('chart.chartType')+':'">
  20. <div class="chart-type-list">
  21. <span v-for="item in chartTypeList" :key="item.type" :class="{activedIcon :item.type===chartType, disabledIcon: !isUsable(item)}" @click="switchChartType(item)">
  22. <el-tooltip :content="item.name +': '+item.matchRule.desc" placement="top">
  23. <svg-icon class="icon" :icon-class="isUsable(item)? item.icon : (item.icon + '_disabled')" />
  24. </el-tooltip>
  25. </span>
  26. </div>
  27. </el-form-item>
  28. </el-form>
  29. </div>
  30. </div>
  31. </template>
  32. <script>
  33. import lineChart from '@/widgets/lineChart'
  34. import DataTable from '@/widgets/DataTable'
  35. import BarChart from '@/widgets/BarChart'
  36. import StackBarChart from '@/widgets/StackBarChart'
  37. import HorizontalBar from '@/widgets/horizontalBar'
  38. import PieChart from '@/widgets/PieChart'
  39. import BarLineChart from '@/widgets/BarLineChart'
  40. import LineBarChart from '@/widgets/LineBarChart'
  41. import chartTypeList from '@/utils/chartTypeList'
  42. import { json2excel } from '@/utils/index.js'
  43. import store from '../store'
  44. export default {
  45. inject: ['reload'],
  46. components: { lineChart, DataTable, BarChart, StackBarChart, PieChart, HorizontalBar, BarLineChart, LineBarChart },
  47. props: {
  48. data: {
  49. type: Array,
  50. required: true
  51. },
  52. schema: {
  53. type: Array,
  54. required: true
  55. },
  56. chartStyle: {
  57. require: false,
  58. type: Object
  59. },
  60. chartType: {
  61. type: String,
  62. default: 'table'
  63. },
  64. isEditMode: {
  65. type: Boolean,
  66. default: true
  67. },
  68. messagechart: {
  69. type: String,
  70. required: true
  71. }
  72. },
  73. data() {
  74. return {
  75. chartTypeList,
  76. isTable: false,
  77. isChart: false
  78. }
  79. },
  80. computed: {
  81. allSelected() {
  82. return store.state.caculCols.concat(store.state.dimensions)
  83. },
  84. chartData() {
  85. console.log('this.schema============', this.schema)
  86. return this.currentType.dataTransfer ? this.currentType.dataTransfer(this.data, this.schema) : this.data
  87. },
  88. currentType() {
  89. return chartTypeList.find(item => item.type === this.chartType)
  90. }
  91. },
  92. watch: {
  93. messagechart(curVal, oldVal) {
  94. console.log(curVal, oldVal)
  95. },
  96. allSelected: {
  97. deep: true,
  98. immediate: true,
  99. handler(newVal) {
  100. if (!this.currentType.matchRule.isUsable(store.state.dimensions, store.state.caculCols)) {
  101. // this.$emit('update:chartType', 'table')
  102. }
  103. console.log('this.chartType!!!!!!!!!!!!!!!!!!!!!!!!!!!!', this.chartType)
  104. if (this.chartType === 'table') {
  105. this.isChart = false
  106. this.isTable = false
  107. } else {
  108. this.isChart = true
  109. this.isTable = false
  110. }
  111. // this.reload()
  112. }
  113. }
  114. },
  115. methods: {
  116. // 切换表格
  117. handleTable() {
  118. console.log('切换表格')
  119. console.log('chartTypeList', this.chartTypeList)
  120. console.log('this.schema============', this.schema)
  121. console.log('this.data============', this.data)
  122. console.log('messagechart', this.messagechart)
  123. this.isTable = true
  124. this.isChart = false
  125. },
  126. handleChart() {
  127. console.log('切换图表')
  128. this.isChart = true
  129. this.isTable = false
  130. },
  131. handleExport() {
  132. console.log('this.data', this.data)
  133. console.log('this.schema', this.schema)
  134. // 当前的表头
  135. var arr_sche = this.schema
  136. var arr_data = this.data
  137. var head_arr = []
  138. var field_arr = []
  139. arr_sche.forEach(function(item) {
  140. head_arr.push(item.Comment)
  141. field_arr.push(item.Column)
  142. })
  143. // var arr = [
  144. // { 'avgdim': 0, 'avgmonthage': 0, 'barid': '3252518126826816512', 'barname': '营养评估测试专用1896', 'bigcowclass': '育肥牛', 'bw': 0, 'cowclass': '新增编辑编辑111', 'cowclassid': '3242684891527644160', 'cowsum': 0, 'dayspre': 0, 'dayw': 0, 'emp': '李四', 'fat': 0, 'fetal': 0, 'id': '3396049090298512384', 'lactose': 0, 'pastureid': '3025176271438480383', 'pro': 0, 'product': 0, 'productdate': '2021-05-07', 'source': '', 'tem': 0 }]
  145. var excelDatasTabChart1 = [
  146. {
  147. tHeader: head_arr,
  148. filterVal: field_arr,
  149. tableDatas: arr_data,
  150. sheetName: '自定义图表'
  151. }
  152. ]
  153. json2excel(excelDatasTabChart1, '自定义图表', true, 'xlsx')
  154. },
  155. isUsable(chart) {
  156. return chart.matchRule.isUsable(store.state.dimensions, store.state.caculCols)
  157. },
  158. switchChartType(chart) {
  159. if (!chart.matchRule.isUsable(store.state.dimensions, store.state.caculCols)) {
  160. return
  161. }
  162. this.$emit('update:chartType', chart.type)
  163. }
  164. }
  165. }
  166. </script>
  167. <style lang="scss" scoped>
  168. .pane-container {
  169. display: flex;
  170. height: 100%;
  171. .visualize-window {
  172. width: 100%;
  173. }
  174. .chart-style-panel {
  175. width: 200px;
  176. flex-shrink: 0;
  177. padding: 10px;
  178. .chart-type-list {
  179. width: 100%;
  180. display: grid;
  181. justify-items: center;
  182. grid-template-columns: repeat(5, 1fr);
  183. grid-auto-rows: 1fr;
  184. grid-gap: 10px;
  185. span {
  186. line-height: initial;
  187. height: 100%;
  188. font-size: 22px;
  189. cursor: pointer;
  190. text-align: center;
  191. width: 100%;
  192. position: relative;
  193. .icon {
  194. position: absolute;
  195. top: 0;
  196. left: 0;
  197. right: 0;
  198. bottom: 0;
  199. margin: auto;
  200. }
  201. }
  202. span::before {
  203. content: "";
  204. width: 100%;
  205. padding-bottom: 100%;
  206. display: block;
  207. }
  208. .disabledIcon {
  209. cursor: not-allowed;
  210. }
  211. .activedIcon {
  212. background: #c9c9c9;
  213. }
  214. }
  215. }
  216. }
  217. </style>