xw_admin/src/views/finance/feesStatistics/index.vue

<template>
	<el-container class="mainBox mainBoxHeaderNoBorder">
		<el-main class="nopadding">
			<el-scrollbar>
				<div class="searchMain">
					<scSearch ref="scSearch" :searchList="searchList" @fetchSelectData="getSelectData"></scSearch>
					<div class="searchItem searchBtn">
						<el-button :size="size" type="primary" icon="el-icon-search" @click="upSearch">查询</el-button>
						<el-button :size="size" type="info" icon="el-icon-RefreshRight" @click="reset">重置</el-button>
						<scExport :size="size" @exportData="exportData" @updateShow="exportChangeShow" :show="exportShow" type="11">
							<el-button :size="size" icon="sc-icon-Download" :disabled="exportShow" @click="exportData">下载</el-button>
						</scExport>
					</div>
				</div>
				<div class="mainMiddle">
					<div class="echartsView">
						<scEcharts ref="c1" height="300px" :option="option"></scEcharts>
					</div>
					<div class="tableView">
						<feesTable :info="feesData.tableList"></feesTable>
					</div>
				</div>
			</el-scrollbar>
		</el-main>
	</el-container>

</template>

<script>
import scEcharts from '@/components/scEcharts';
import feesTable from './components/table'
export default {
	components: {
		scEcharts,
		feesTable
	},
	data() {
		return {
			size:'small',
			dialog: {
				save: false,
				show: false,
			},
			option:{},
			feesData:{
				tableList:{}
			},

			selection: [],
			exportShow:false,
			searchList:[
				{name:'成本类型',type:'select',code:['type_name'], data:[], placeholder:"请选择费用类型",show:true},
				{name:'成本类别',type:'select',code:['category_name'], data:[], placeholder:"请选择费用类别",show:true},
				{name:'时间粒度',type:'select',code:['date_type'],
					data:[
						{date_type:'hour',label:'按时'},
						{date_type:'day',label:'按天'},
						{date_type:'month',label:'按月'},
						{date_type:'year',label:'按年'},
					], placeholder:"请选择时间粒度",show:true},
				{name:'时间范围',type:'date',code:'time',show:true},
			],
			params: {
				page:1,
				pageSize:30,
				date_type:'day',
				// start:'2024-01-01',
				// end:'2024-12-31'
			},
		}
	},
	created(){

	},
	mounted() {
		this.getData();
	},
	methods: {
		async getSelectData(item) {
			let {data, params} = item;
			this.params = params;
			let searchParams = this.$TOOL.objCopy(params);
			searchParams.field = ""
			if (typeof data.code === 'string') {
				searchParams.field = data.code;
			} else {
				searchParams.field = data.code[0];
			}
			if (data.type == 'select') {
				const res = await this.$API.finance.cost.field.post(searchParams);
				if (res.code == 200) {
					if (res.data && res.data.length > 0) {
						res.data.forEach(item => {
							item.label = item[data.code];
							item.value = item.id;
						})
					}
					this.searchList.forEach(item => {
						if (item.code == data.code) {
							item.data = res.data;
						}
					})
				}
			}
		},

		async getData() {
			const res = await this.$API.finance.cost.summary.post(this.params);
			if(res.code == 200){
				res.data.tableList.data = this.setTableList(res.data.tableList.data);
				this.feesData = res.data;

				console.log(this.feesData)
				let option = {
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						boundaryGap: false,
						type: 'category',
						data: this.feesData.dateRange
					},
					yAxis: [{
						type: 'value',
						name: '',
						splitLine: {
							show: false
						}
					}],
					series: this.setList(this.feesData.summaryList),
				};
				this.option = option;
			}
		},
		setList(data){
			let newData = data[0].cost_item.map(item => ({
				name: item,
				data: [],
				type:'bar',
				symbol: 'none',
				stack:'fees'
			}));
			if(data && data.length>0){
				data.forEach(item => {
					item.cost_amount.forEach((amount, index) => {
						newData[index].data.push(amount);
					});
				});
			}
			return newData
		},
		setTableList(data){
			let newData = data.columns.map(column => [column]);
			if(data.rows && data.rows.length>0){
				data.rows.forEach((row, rowIndex) => {
					data.columns.forEach((columnName, columnIndex) => {
						newData[columnIndex][1 + rowIndex] = row[columnIndex]==0?'-':'¥'+row[columnIndex];
					});
				});
			}
			return newData
		},

		//表格选择后回调事件
		selectionChange(selection){
			this.selection = selection;
		},

		// 下载导出
		exportChangeShow(params){
			if(params.type == 11){
				this.exportShow = params.status==0?true:false
			}
		},
		async exportData() {
			if(this.exportShow) return
			const res = await this.$API.orders.order.maintenance.export.post(this.params);
			if(res.code == 200){
				this.$message.success('开始导出');
			}
		},
		upSearch(){
			// this.$refs.table.upData(this.params);
		},
		reset(){
			this.params = {};
			this.$refs.scSearch.reload();
			// this.$refs.table.reload();
		},
		handleSaveSuccess(){
			// this.$refs.table.refresh();
		},
	}
}
</script>

<style lang="scss" scoped>
.logoCell{
	display: flex;
	align-items: center;
	height: 20px;
	margin: 0 auto;
}
</style>