subject_gxj/xj_project_app/pages/countAnalysis/fundUse/index.vue

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"

	import {
		getfundPlanUse,
	} from "@/api/work/countAnalysis.js"

	function backToBefore() {
		uni.reLaunch({
			url: "/pages/index"
		});
	};

	function goToPage(url) {
		uni.navigateTo({
			url
		})
	}

	function searchClick() {
		goToPage('/pages/countAnalysis/search/index?page=fundUseSearch')
	}

	let projectYear = ref(null);
	let yearShow = ref(false);
	let defaultIndex = ref([0]);
	let yearColumns = ref([
		["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012",
			"2013",
			"2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026",
			"2027", "2028", "2029", "2030", "2031", "2032", "2033"
		]
	])
	const yearShowChoose = () => {
		yearShow.value = true;
	}
	const yearClose = e => {
		if (e) {
			projectYear.value = e.value[0];
			getPageDate();
		}

		yearShow.value = false;
	}

	const getPageDate = () => {
		let params = Object.assign({}, searchObj, {
			year: projectYear.value
		})
		getfundPlanUse(params).then(res => {
			filterData(res.data)
		});
	}

	let dataList = ref([{
		name: '项目总数（个）',
		key: "num",
		count: ""
	}, {
		name: '项目计划总金额（万元）',
		key: "totalAmt",
		count: ""
	}, {
		name: '项目年度计划总金额（万元）',
		key: "yearAmt",
		count: ""
	}, {
		name: '年度实际投入金额（万元）',
		key: "compAmt",
		count: ""
	}])

	let pieOpts = ref({
		color: ["#90B5F4", "#6497EE", "#1869F6", "#FF8229", "#FFAC71"],
		padding: [5, 5, 5, 5],
		enableScroll: false,
		legend: {
			show: false
		},
		extra: {
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				customRadius: 70,
				labelWidth: 15,
				border: false,
				offsetAngle: -90
			}
		}
	})

	let pieChartDataText = ref([]);
	let pieChartData = ref({
		series: [{
			data: []
		}]
	})

	let barOpts = {
		color: ["#1869F6", "#90B5F4"],
		touchMoveLimit: 24,
		enableScroll: true,
		dataLabel: false,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
			scrollShow: true,
			itemCount: 8,
		},
		yAxis: {
			showTitle: true,
			data: [{
				min: 0,
				title: "单位：万元",
				// titleOffsetX: -30,
			}]
		},
		extra: {
			column: {
				type: "group",
				width: 14,
				barBorderRadius: [12, 12, 12, 12],
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
			}
		}
	}

	let barChartData = ref({
		categories: [],
		series: [{
			name: "月统计金额",
			data: []
		}]
	})

	let showBar = ref(false)

	let showPie = ref(false)

	function filterData(data) {
		// 上面四个数
		for (let i in dataList.value) {
			dataList.value[i].count = data[dataList.value[i].key] ?? "0"
		}

		// 饼状图数据
		let pieList = []
		for (let i in data.listIndusKind) {
			pieList.push({
				"name": data.listIndusKind[i].title,
				"value": data.listIndusKind[i].num || 0,
				"labelShow": false
			})
		}
		pieList.sort(sortByValue('value', -1))

		pieChartDataText.value = pieChartData.value.series[0].data = pieList;
		showPie.value = true

		// 柱状图数据
		let categoriesList = []
		let seriesList = []
		for (let i in data.listMonthAmt) {
			categoriesList.push(data.listMonthAmt[i].month + "月")
			seriesList.push(data.listMonthAmt[i].amtYear)
		}
		barChartData.value.categories = categoriesList.length > 0 ? categoriesList : ["无数据"]
		barChartData.value.series[0].data = seriesList
		showBar.value = true
	}

	const sortByValue = (attr, rev) => {
		if (rev == undefined) {
			rev = 1
		} else {
			(rev) ? 1: -1;
		}
		return function(a, b) {
			a = a[attr];
			b = b[attr];
			if (a < b) {
				return rev * -1
			}
			if (a > b) {
				return rev * 1
			}
			return 0;
		}
	}

	let searchObj = [];
	const goToThrough = function(key) {
		let url = "/pages/countAnalysis/through/index?key=" + key + "&";

		for (let i in searchObj) {
			let item = null

			if (!((searchObj[i] ?? "") === "")) {
				item = `${i}=${searchObj[i]}&`;
			} else {
				item = `${i}=&`;
			}

			url = url += item;
		}

		if (key === "num" || key === "totalAmt") {
			let beginDateStart = projectYear.value + "/01/01";
			let beginDateEnd = projectYear.value + "/12/31";
			url = `${url}beginDateStart=${beginDateStart}&beginDateEnd=${beginDateEnd}`
		} else {
			url = `${url}year=${projectYear.value}`
		}

		uni.navigateTo({
			url
		})
	}

	const barClick = function(e) {
		let index = e.currentIndex.index;
		let clickMonth = barChartData.value.categories[index];
		clickMonth = clickMonth ? clickMonth.slice(0, clickMonth.length - 1) : clickMonth;

		let url = "/pages/countAnalysis/through/index?key=compAmt&month=" + clickMonth + "&";

		let params = Object.assign({}, searchObj, {
			year: projectYear.value
		})

		for (let i in params) {
			let item = null
			if (!(params[i] ?? "") === "") {
				item = `${i}=${params[i]}&`;
			} else {
				item = `${i}=&`;
			}

			url = url += item;
		}

		uni.navigateTo({
			url
		})
	}

	onLoad(() => {
		uni.$on("fundUseSearch", resolve => {
			let optionFilter = Object.assign({}, resolve);
			let filterArr = ["null", "undefined", ""];
			for (let i in optionFilter) {
				if (filterArr.includes(optionFilter[i])) {
					optionFilter[i] = null;
				};
			};
			if (optionFilter.year) {
				projectYear.value = optionFilter.year;
				defaultIndex.value = [projectYear.value - 2000];
			}
			searchObj = optionFilter;
			getfundPlanUse(optionFilter).then(res => {
				filterData(res.data);
			});
		});

		projectYear.value = new Date().getFullYear();
		defaultIndex.value = [projectYear.value - 2000];
		getPageDate();
	});

	onUnload(() => {
		uni.$off('fundUseSearch');
	})
</script>

<template>
	<view class="container">
		<page-title @searchClick='searchClick' showSearch>资金使用</page-title>

		<view class="main">
			<view class="choose-year" @click="yearShowChoose()">
				年度：{{projectYear}}
				<u-icon name="arrow-right" color="#000" size="14" customStyle="margin-left:5rpx"></u-icon>
			</view>

			<view class="count">
				<u-grid :border="false" col="2">
					<u-grid-item v-for="(item,index) in dataList" :key="index" @click="goToThrough(item.key)">
						<view class="count-item">
							<view class="count-item-num">{{item.count}}</view>
							<view class="count-item-name">{{item.name}}</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>

			<view class="pie" v-if="showPie">
				<view class="pie-area">
					<qiun-data-charts type="pie" :opts="pieOpts" :chartData="pieChartData" />
				</view>

				<view class="pie-text">
					<view class="pie-item" v-for="(item,index) in pieChartDataText" :key="index">
						<view class="pie-item-name">{{item.name}}</view>
						<view class="pie-item-value">{{item.value}}</view>
					</view>
				</view>
			</view>

			<view class="charts" v-if="showBar">
				<qiun-data-charts type="line" :opts="barOpts" :ontouch="true" :chartData="barChartData" @getIndex="barClick" />
			</view>

			<view class="charts-description">月度实际投资情况</view>

			<view class="gap-bottom"></view>
		</view>

		<!-- 年度选择 -->
		<u-picker :show="yearShow" :defaultIndex="defaultIndex" :columns="yearColumns" @confirm="yearClose"
			@cancel="yearClose" @close="yearClose" closeOnClickOverlay></u-picker>
	</view>
</template>


<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.container {
		background: #fff;
	}

	.main {
		position: absolute;
		top: 10%;
		left: 0;
		width: 100%;
		height: 95%;
		padding: 40rpx 4%;
		background-color: #fff;
	}

	.count {
		width: 100%;
		height: 300rpx;

		.count-item {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			width: 100%;
			height: 150rpx;
			text-align: center;

			.count-item-num {
				font-size: 40rpx;
				font-weight: 500;
				color: #343437;
			}

			.count-item-name {
				font-size: 26rpx;
				color: #9E9E9E;
			}
		}
	}

	.choose-year {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 32rpx;
		font-weight: 500;
		color: #000;
	}

	.pie {
		display: flex;
		min-height: 400rpx;
		margin-top: 68rpx;
		background: #EAF0FA;
		border-radius: 40rpx;

		.pie-area {
			width: 50%;
		}

		.pie-text {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 400rpx;
			width: 50%;
			padding: 20rpx;
			box-sizing: border-box;

			.pie-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				margin-bottom: 10rpx;
			}
		}
	}

	.charts {
		width: 100%;
		height: 508rpx;
		margin-top: 40rpx;
	}

	.charts-description {
		width: 100%;
		margin-top: 34rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #343437;
	}
</style>