subject_gxj/xj_project_app/pages/analysis/report/index.vue

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";

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

	import {
		getHYFLlist,
	} from "@/api/work/projectInfo.js";

	import {
		getYearReportData,
		getYearReportTableData
	} from "@/api/work/analysis.js";

	import config from '@/config.js';

	// 年度
	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 = function() {
		yearShow.value = true;
	}
	const yearClose = function(e) {
		if (e) {
			searchInfo.year = e.value[0];
			// getTableData();
		}
		yearShow.value = false;
	}

	// 是否隐藏
	let hideFull = [{
		key: true,
		value: "包含"
	}, {
		key: false,
		value: "不包含"
	}, ];
	let hideColumns = ref([
		["包含", "不包含"]
	])
	let hideShow = ref(false);
	const hideShowChoose = function() {
		hideShow.value = true;
	}
	const hideClose = function(e) {
		if (e) {
			searchInfo.isHide = e.value[0];
			// getTableData();
		}
		hideShow.value = false;
	}

	// 行业分类
	let hyflFull = []


	let hyflShow = ref(false);
	let hyflList = ref([]);
	const getHYFL = () => {
		getHYFLlist().then(res => {
			hyflList.value = res.data.list;
		})
	}
	let hyflSelectIndex = [];
	let hyflChooseList = [];
	const hyflSelect = e => {
		hyflSelectIndex = e.detail.index;
	}
	const hyflShowChoose = () => {
		hyflSelectIndex = [];
		hyflShow.value = true
	}

	const closeHyflPopup = type => {
		if (type === "confirm") {
			let tempArr = [];
			for (let i in hyflSelectIndex) {
				tempArr.push(hyflList.value[hyflSelectIndex[i]])
			};
			hyflChooseList = tempArr;
			searchInfo.hyfl = tempArr.map(item => item.value).join("、");
		}
		hyflShow.value = false;
	}

	// 搜索条件
	let searchInfo = reactive({
		year: null, //年度
		isHide: "包含", //是否隐藏,
		hyfl: null,
	})
	const createReport = () => {
		uni.$u.route({
			url: "/pages/analysis/media/index",
			params: {
				year: searchInfo.year,
				containHide: hideFull.find(item => item.value === searchInfo.isHide)?.key,
				hyfl: hyflChooseList.map(item => item.key).join(","),
				token: uni.getStorageSync('App-Token'),
			}
		})
		// 老版本下载pdf
		// getYearReportData(params).then(res => {
		// 	return console.log(res);
		// 	let url =
		// 		`${baseUrlIp}/projects/outApi/projects/statics/downReportPdf?url=${res.data.url}&year=${res.data.year}`
		// 	downLoadFile(url)
		// })
	}


	// 列表数据
	let showList = ref([{
		text: "行业分类",
		key: "hyflName",
		value: null,
		width: "200rpx"
	}, {
		text: "数量",
		key: "totalNum",
		value: null,
		width: "100rpx"
	}, {
		text: "总投资金额（亿元）",
		key: "totalAmt",
		value: null,
		width: "200rpx"
	}, {
		text: "年度计划投资金额（亿元）",
		key: "yearPlan",
		value: null,
		width: "200rpx"
	}, {
		text: "占比",
		key: "planRate",
		value: null,
		width: "100rpx"
	}, {
		text: "已完成金额（亿元）",
		key: "endAmt",
		value: null,
		width: "200rpx"
	}, ])
	let tableList = ref([]);
	const getTableData = () => {
		let params = {
			year: searchInfo.year,
			containHide: hideFull.find(item => item.value === searchInfo.isHide)?.key,
			// hyfl: hyflFull.find(item => item.value === searchInfo.hyfl)?.key ?? "",
		}

		getYearReportTableData(params).then(res => {
			tableList.value = res.data.hyflData;
		})
	}

	let isDownload = ref(false); // 是否正在下载
	let downloadPrecent = ref(0); //下载进度
	// 文件预览
	const downLoadFile = url => {
		isDownload.value = true;
		let downloadTask = uni.downloadFile({
			url,
			success: function(res) {
				isDownload.value = false;
				let filepathss = plus.io.convertLocalFileSystemURL(res.tempFilePath);
				setTimeout(
					() =>
					uni.openDocument({
						filePath: filepathss,
						showMenu: false,
						success: function() {},
						fail: function(failRes) {
							uni.showToast({
								title: '暂不支持此类型',
								duration: 2000,
								icon: "none",
							});
						}
					}),
					1000
				);
			},
			fail: function(failRes) {
				isDownload.value = false;
			}
		});

		downloadTask.onProgressUpdate(res => {
			downloadPrecent.value = res.progress;
		})
	}

	onLoad(() => {
		let now = new Date();
		searchInfo.year = now.getFullYear();
		defaultIndex.value = [searchInfo.year - 2000];
	})
</script>

<template>
	<view class="container">
		<page-title>投资分析报告</page-title>

		<view class="cards-list">
			<view class="card only-card">
				<!-- 年度 -->
				<view class="card-item first-card-item" @click="yearShowChoose()">
					<view class="card-item-name">年度</view>
					<view class="card-item-description">
						<view v-if="searchInfo.year">{{searchInfo.year}}</view>
						<view v-else class="remind-text">请选择年度</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
				<!-- 行业分类 -->
				<view class="card-item" @click="hyflShowChoose()">
					<view class="card-item-name">行业分类</view>
					<view class="card-item-description">
						<view v-if="searchInfo.hyfl">{{searchInfo.hyfl}}</view>
						<view v-else class="remind-text">请选择类型</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 是否隐藏 -->
				<view class="card-item" @click="hideShowChoose()">
					<view class="card-item-name">是否包含隐藏</view>
					<view class="card-item-description">
						<view v-if="searchInfo.isHide">{{searchInfo.isHide}}</view>
						<view v-else class="remind-text">请选择</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
			</view>

			<view class="search-btn" @click="createReport()">生成报告</view>

			<!-- 	<scroll-view class="swiper-item-content" scroll-y>
				<uni-table stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center" v-for="(showItem,showIndex) in showList" :index="showIndex"
							:width="showItem.width">{{showItem.text}}</uni-th>
					</uni-tr>

					<uni-tr v-for="(item,index) in tableList" :key="index">
						<uni-td align="center" v-for="(showItem,showIndex) in showList" :index="showIndex">
							{{item[showItem.key] ?? "--"}}
						</uni-td>
					</uni-tr>
				</uni-table>
			</scroll-view> -->

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

		<!-- 年度选择 -->
		<u-picker :show="yearShow" :defaultIndex="defaultIndex" :columns="yearColumns" @confirm="yearClose"
			@cancel="yearClose" @close="yearClose" closeOnClickOverlay></u-picker>
		<!-- 是否隐藏 -->
		<u-picker :show="hideShow" :columns="hideColumns" @confirm="hideClose" @cancel="hideClose" @close="hideClose"
			closeOnClickOverlay></u-picker>
		<!-- 行业分类 -->
		<u-popup :show="hyflShow" @open="getHYFL()" mode="center">
			<view class="user-choose">
				<view class="user-choose-title">
					<view class="uesr-choose-icon hide"></view>
					行业分类
					<view class="uesr-choose-icon" @click="closeHyflPopup('close')"></view>
				</view>

				<view class="search-item">
					<scroll-view class="swiper-item-content" scroll-y>
						<uni-table type="selection" emptyText="暂无更多数据" @selection-change="hyflSelect">
							<!-- 表头行 -->
							<uni-tr :style="{backgroundColor: '#c4daff'}">
								<uni-th align="center" :style="{color: '#1869F6',fontWeight: 'bold'}">行业分类</uni-th>
							</uni-tr>
							<!-- 表格数据行 -->
							<uni-tr v-for="(item,index) in hyflList" :key="index">
								<uni-td align="center">{{item.value}}</uni-td>
							</uni-tr>
						</uni-table>
					</scroll-view>
				</view>

				<view class="search-btn" @click="closeHyflPopup('confirm')">确定</view>
			</view>
		</u-popup>

		<u-overlay :show="isDownload">
			<view class="download-box">
				<view class="loading-box">
					<view class="loading-icon">
						<u-loading-icon v-if="downloadPrecent !== '100'" size="40"></u-loading-icon>
						<u-icon v-else name="checkmark" size="40"></u-icon>
					</view>

					<view class="loading-text">附件下载中</view>

					<view class="loading-progress">
						<u-line-progress :percentage="downloadPrecent" activeColor="#1869F6"></u-line-progress>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<style lang="scss" scoped>
	.search-btn {
		width: 98%;
		height: 84rpx;
		margin: 40rpx auto 56rpx;
		line-height: 84rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 36rpx;
		background: #1763E7;
		border-radius: 16rpx;
	}

	.download-box {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.loading-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 360rpx;
			height: 360rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 40rpx;
		}

		.loading-icon {
			flex: 4;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.loading-text {
			flex: 1;
			display: flex;
			align-items: flex-end;
			text-align: center;
		}

		.loading-progress {
			flex: 1;
			display: flex;
			align-items: flex-end;
		}
	}

	.swiper-item-content {
		height: 1200rpx;
	}

	::v-deep .uni-table-scroll {
		height: 1000rpx;
	}

	.user-choose {
		width: 666rpx;
		height: 1220rpx;
		padding: 30rpx 28rpx;

		.user-choose-title {
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin-bottom: 54rpx;
			font-weight: 500;
			color: #3D3D3D;
			font-size: 32rpx;

			.uesr-choose-icon {
				width: 44rpx;
				height: 44rpx;
				background: url("@/static/message-close.svg");
				background-size: 100% 100%;
			}

			.hide {
				background: none;
			}
		}

		.search-item {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			width: 606rpx;
			height: 950rpx;
			padding: 26rpx 30rpx;
			margin-bottom: 32rpx;
			font-size: 28rpx;
			border-radius: 20rpx;
			border: 2rpx solid #D0D9E7;

			.search-item-name {
				min-width: 128rpx;
				color: #939AA5;
			}

			.search-item-content {
				color: #3D3D3D;
				text-align: right;
			}

			.swiper-item-content {
				height: 900rpx;
			}
		}

		.search-btn {
			width: 606rpx;
			height: 64rpx;
			margin-top: 50rpx;
			line-height: 64rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 28rpx;
			background: #1869F6;
			border-radius: 16rpx;
		}
	}

	::v-deep .u-popup__content {
		border-radius: 28rpx !important;
	}

	::v-deep .uni-table-th-content {
		// color: #1869F6 !important;
		// font-weight: bold;
	}
</style>