12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <template>
- <div>
- <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
- <AnalysisChart shadow="always" :option="option" height="800" v-loading="loading"></AnalysisChart>
- </div>
- </template>
- <script>
- import AnalysisChart from '@/components/Analysis/AnalysisChart'
- import { dateFormat } from '@/utils/date'
- export default {
- name: 'StatisticsCard',
- components: {
- AnalysisChart
- },
- props: {
- api: Function,
- assignFn: Function
- },
- data () {
- return {
- loading: false,
- option: {},
- searchItems: [
- {
- label: '月份',
- prop: 'month',
- type: 'datePicker',
- options: {
- placeholder: '请选择月份',
- clearable: false,
- type: 'month',
- valueFormat: 'yyyy-MM',
- format: 'yyyy 年 MM 月'
- }
- }
- ],
- searchValues: {
- month: dateFormat('YYYY-mm', new Date())
- }
- }
- },
- created () {
- this.onInit()
- },
- methods: {
- async onInit () {
- this.loading = true
- try {
- const { data } = await this.api({
- ...this.searchValues
- })
- if (this.assignFn) {
- this.option = this.assignFn(data)
- return
- }
- this.option = data
- } catch (error) {
- this.$message.error(error)
- } finally {
- this.loading = false
- }
- },
- onSearch () {
- this.onInit()
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|