StatisticsCard.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <div>
  3. <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
  4. <AnalysisChart shadow="always" :option="option" height="800" v-loading="loading"></AnalysisChart>
  5. </div>
  6. </template>
  7. <script>
  8. import AnalysisChart from '@/components/Analysis/AnalysisChart'
  9. import { dateFormat } from '@/utils/date'
  10. export default {
  11. name: 'StatisticsCard',
  12. components: {
  13. AnalysisChart
  14. },
  15. props: {
  16. api: Function,
  17. assignFn: Function
  18. },
  19. data () {
  20. return {
  21. loading: false,
  22. option: {},
  23. searchItems: [
  24. {
  25. label: '月份',
  26. prop: 'month',
  27. type: 'datePicker',
  28. options: {
  29. placeholder: '请选择月份',
  30. clearable: false,
  31. type: 'month',
  32. valueFormat: 'yyyy-MM',
  33. format: 'yyyy 年 MM 月'
  34. }
  35. }
  36. ],
  37. searchValues: {
  38. month: dateFormat('YYYY-mm', new Date())
  39. }
  40. }
  41. },
  42. created () {
  43. this.onInit()
  44. },
  45. methods: {
  46. async onInit () {
  47. this.loading = true
  48. try {
  49. const { data } = await this.api({
  50. ...this.searchValues
  51. })
  52. if (this.assignFn) {
  53. this.option = this.assignFn(data)
  54. return
  55. }
  56. this.option = data
  57. } catch (error) {
  58. this.$message.error(error)
  59. } finally {
  60. this.loading = false
  61. }
  62. },
  63. onSearch () {
  64. this.onInit()
  65. }
  66. }
  67. }
  68. </script>
  69. <style lang="scss" scoped>
  70. </style>