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

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

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

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

	import {
		goToPage
	} from "@/utils/common.js"

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

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

	let dataList = ref([{
			name: '项目总数',
			key: "projectsNum",
			count: "",
			throughKey: null,
		}, {
			name: '项目前期数',
			key: 'XMQQ',
			count: "",
			throughKey: 1,
		}, {
			name: '待开工项目数',
			key: 'DKG',
			count: "",
			throughKey: 6,
		}, {
			name: '施工阶段数',
			key: 'SGJD',
			count: "",
			throughKey: 7,
		},
		{
			name: '暂停施工数',
			key: 'ZTSG',
			count: "",
			throughKey: 8,
		}, {
			name: '已完工项目数',
			key: 'YWG',
			count: "",
			throughKey: "A",
		}
	])

	// 柱状图
	let opts = {
		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: "单位：万元",
			}]
		},
		extra: {
			column: {
				type: "group",
				width: 14,
				barBorderRadius: [12, 12, 12, 12],
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
			}
		}
	}

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

	let showBar = ref(false)

	let fullData = ref({})

	function filterData(data) {
		// 所有数据
		fullData.value = data

		// 上面六个数
		for (let i in dataList.value) {
			if (typeof(data[dataList.value[i].key]) === 'number') {
				dataList.value[i].count = data[dataList.value[i].key].toString() ?? "--"
			} else {
				dataList.value[i].count = data[dataList.value[i].key] ?? "--"
			}
		}

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

		showBar.value = true
	}

	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;
	}

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

	// 穿透--项目
	const throughToDetail = clickStatus => {
		// 隐藏
		let isHideObj = {
			isHide: searchData.value.containHide ? null : 0
		}
		if ((searchData.value.containHide ?? "") === "") isHideObj.isHide = null;

		let params = Object.assign(isHideObj, searchData.value, {
			year: projectYear.value,
			status: clickStatus,
		})

		// 状态
		if (clickStatus !== null) {
			// 如果点击的不是总数
			if (searchData.value.status && searchData.value.status !== clickStatus) {
				// 如果已选且与点击的不一样
				params.status = -1;
			}
		} else {
			params.status = searchData.value.status;
		}

		uni.$u.route({
			url: "/pages/countAnalysis/fundPlan/through/index",
			params
		})
	}

	// 穿透--问题
	const throughWithQuestion = () => {
		let searchYear = searchData.value.year ? searchData.value.year : projectYear.value;
		let beginDateStart = `${searchYear}/01/01`;
		let beginDateEnd = `${searchYear}/12/31`;

		uni.$u.route({
			url: "/pages/oversee/index",
			params: {
				beginDate: beginDateStart,
				endDate: beginDateEnd,
				status: searchData.value.status,
				subName: searchData.value.subName,
				indusKind: searchData.value.indusKind,
				containHide: searchData.value.containHide,
				kind: searchData.value.kind,
			}
		})
	}

	// 穿透--金额
	const throughWithAmt = key => {
		let url = "/pages/countAnalysis/through/index?key=" + key + "&";

		let params = Object.assign({}, searchData.value);

		if (searchData.value.year) {
			params = Object.assign(params, {
				year: projectYear.value
			});
		}

		// 隐藏
		let isHideObj = {
			isHide: searchData.value.containHide ? null : 0
		}
		if ((searchData.value.containHide ?? "") === "") isHideObj.isHide = null;
		params = Object.assign(params, isHideObj);

		Object.keys(params).forEach((key) => {
			let value = params[key];
			if ((value ?? "") === "") delete params[key]
		})

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

			url = url += item;
		}

		if (!searchData.value.year) {
			url = `${url}year=${projectYear.value}`
		}

		uni.navigateTo({
			url
		})
	}

	onLoad(() => {
		uni.$on('fundPlanSearch', 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];
			}
			searchData.value = optionFilter;
			getfundPlanDetail(optionFilter).then(res => {
				filterData(res.data)
			});
		});

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

	onUnload(() => {
		uni.$off('fundPlanSearch');
	})
</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="3">
					<u-grid-item v-for="(item,index) in dataList" :key="index">
						<view class="count-item" @click="throughToDetail(item.throughKey)">
							<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="status">
				<view class="status-item question-num" @click="throughWithQuestion()">
					<view class="status-item-name">问题项目数</view>

					<view class="status-item-num">{{fullData.problemNum}}个</view>
				</view>

				<view class="status-item year-plan" @click="throughWithAmt('yearAmt')">
					<view class="status-item-name">年度计划总金额（万元）</view>

					<view class="status-item-num">{{fullData.yearAmt}}</view>
				</view>

				<view class="status-item real-cost" @click="throughWithAmt('compAmt')">
					<view class="status-item-name">实际投入总金额（万元）</view>

					<view class="status-item-num">{{fullData.compAmt}}</view>
				</view>
			</view>

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

			<view class="charts-description">月度实际投资情况</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>
	.container {
		background: #fff;
	}

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

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

	.count {
		width: 100%;
		height: 300rpx;
		margin-top: 34rpx;

		.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: 32rpx;
				color: #9E9E9E;
			}
		}
	}

	.status {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 192rpx;
		margin-top: 68rpx;

		.status-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 30%;
			height: 100%;
			padding: 30rpx;
			border-radius: 40rpx;

			.status-item-name {
				font-size: 24rpx;
			}

			.status-item-num {
				// word-break: break-all;
				font-size: 26rpx;
				text-align: left;
				font-weight: 500;
			}
		}

		.question-num {
			background: #E3E1FF;
			color: #1869F6;
		}

		.year-plan {
			background: #DFFFF9;
			color: #00B893
		}

		.real-cost {
			background: #FFECE5;
			color: #FF530F;
		}
	}

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

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