<!-- 收入分析 --> <template> <view class="revenue"> <view class="revenue-search"> <view class="revenue-search-item" @click="incomeTypePicker = true"> <u--input placeholder="请输入内容" v-model="searchContent.text" suffixIcon="arrow-down" :readonly="true" ></u--input> </view> <view class="revenue-search-item"> <!-- <u-button text="搜索" type="primary" class="revenue-search-item-btn" @click="searchClick"></u-button> --> </view> </view> <view class="revenue-line"> <ColumnChart v-if="chartData.series[0].data.length" :chartData="chartData" :title="title" :opts="opts"/> <view class="empty" v-else> <u-empty></u-empty> </view> </view> <u-picker :show="incomeTypePicker" :columns="dictList" @confirm="incomeTypeConfirm" @cancel="incomeTypePicker = false" ></u-picker> </view> </template> <script> import ColumnChart from '@/components/columnChart.vue' export default { components: { ColumnChart }, props: { title: { type: String, default: '' }, opts: { type: Object, default: () => { return { xAxis: { rotateLabel: false, labelCount: 6 }, yAxis: { showTitle: true, splitNumber: 5, data: [{ title: '元', titleOffsetY: -5 }] }, legend: { show: false }, dataLabel: false, extra: { column: { width: 20 } } } } } }, data() { return { chartData: { categories: [], series: [{ name: '', data: [] }] }, searchContent: { text: '', value: '' }, dictList: [[]], incomeTypePicker: false, reportType: '', queryDate: '' } }, created() { this.getDict(); }, methods: { getData({ reportType, queryDate }) { this.reportType = reportType this.queryDate = queryDate this.getIncomeData() }, getDict() { uni.$u.api.getDictApi({ type: 'income_type'}).then(res => { console.log(res) if (res.code === 200) { let list = res.data.map((item => { return { text: item.dictLabel, value: item.dictValue } })) this.dictList = [list] this.searchContent = this.dictList[0][0] } }) }, getIncomeData() { uni.$u.api.operationalAnalysisApi.getIncomeDataApi({ reportType: this.reportType, queryDate: this.queryDate, incomeType: this.searchContent.value }).then(res => { console.log(res) if (res.code === 200) { if (res.data.itemList && res.data.itemList.length) { this.chartData.categories = res.data.itemList.map(item => { return item.statisTime }) this.chartData.series[0].data = res.data.itemList.map(item => { return item.amt }) } else { this.chartData.categories = [] this.chartData.series[0].data = [] } } }) }, incomeTypeConfirm(e) { this.searchContent = e.value[0] this.getIncomeData() this.incomeTypePicker = false }, searchClick() { // this.getIncomeData() } } } </script> <style lang="scss" scoped> .revenue { background-color: #fff; border-radius: 5px; &-search { margin-bottom: 12px; padding: 19px 15px 0 15px; display: flex; &-item { width: 48%; margin-right: 2%; &-btn { width: 50%; height: 38px; } } } } .empty { padding: 15px; } </style>