subject_gxj/xj_project_app/pages/light/index.vue

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

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

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

	import {
		addFocus,
		cancelFocus
	} from "@/api/work/focus.js";

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

	let scrollTop = ref(0)
	let loading = ref(true)
	// 参数
	let searchInfo = ref({
		pageNo: 1,
		pageSize: 10,
		beginDateStart: null,
		beginDateEnd: null,
		light: 2
	})

	// tabs
	let tabsCurrent = ref(0);
	let lightList = [{
		name: "红灯项目"
	}, {
		name: "黄灯项目"
	}]
	const lightChange = e => {
		if (e.name === "黄灯项目") {
			searchInfo.value.light = 1;
			defaultCurrent.value = 1;
		} else {
			searchInfo.value.light = 2;
			defaultCurrent.value = 0;
		};
	}

	// swiper
	let defaultCurrent = ref(0);
	const chgangeSwiperItem = function(e) {
		tabsCurrent.value = e.detail.current;

		searchInfo.value.light = e.detail.current === 0 ? 2 : 1;

		searchInfo.value.pageNo = 1;
		projectList.value = [];
		moreListFlag = true;
		firstGetCount = true;
		getList();
	}
	const ReachBottom = e => {
		if (!moreListFlag) {
			return uni.showToast({
				title: "已经到底了。",
				icon: "none",
				duration: 2000
			})
		}
		searchInfo.value.pageNo++;
		getList();
	}

	// 触底加载flag
	let moreListFlag = true

	// 获取列表
	let projectList = ref([]);
	let listTotal = ref(0);

	function getList(params) {
		if (searchInfo.value.pageNo == 1) loading.value = true;

		if (firstGetCount) getAmtCountValue(searchInfo.value);

		getProjectInfoList(searchInfo.value).then(res => {
			loading.value = false
			projectList.value = projectList.value.concat(res.data.list);
			listTotal.value = res.data.total;
			if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list
					.length)) {
				moreListFlag = false;
			}

		}).catch(() => {
			loading.value = false
		})
	}

	function goToDetail(id, subName) {
		uni.navigateTo({
			url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}`
		})
	}

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

	function goToReport(type, subId, subName) {
		if (type === 'wtdb') {
			uni.navigateTo({
				url: `/pages/problemSupervision/index?type=${type}&subId=${subId}&subName=${subName}`
			})
		} else if (type === 'qtldjbm') {
			uni.navigateTo({
				url: `/pages/leadersList/index?type=${type}&subId=${subId}&subName=${subName}`
			})
		} else if (type === 'xcyx') {
			uni.navigateTo({
				url: `/pages/projectImageAndVideo/index?type=${type}&subId=${subId}&subName=${subName}`
			})
		} else if (type === 'more') {
			uni.navigateTo({
				url: `/pages/projectBtnList/index?type=${type}&subId=${subId}&subName=${subName}`
			})

		} else {
			uni.navigateTo({
				url: `/pages/projectInfo/report/index?type=${type}&subId=${subId}&subName=${subName}`
			})
		}
	}

	// 折叠/展开
	const changeFoldItem = (status, id) => {
		let item = projectList.value.find(item => item.id === id);
		item.unfold = status;
	}

	// 收藏/取消
	function changeFocus(id, status) {
		let item = projectList.value.find(item => item.id === id);

		if (status) {
			cancelFocus({
				subId: id
			}).then(res => {
				if (res.code === 200) {
					item.isAttention = 0;
				}
			}).catch(() => {
				uni.showToast({
					title: "更改收藏状态失败。",
					icon: "none",
					duration: 2000
				})
			})
		} else {
			addFocus({
				subId: id
			}).then(res => {
				if (res.code === 200) {
					item.isAttention = 1;
				}
			}).catch(() => {
				uni.showToast({
					title: "更改收藏状态失败。",
					icon: "none",
					duration: 2000
				})
			})
		}
	}

	// 选择年
	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 = function() {
		yearShow.value = true;
	}
	const yearClose = function(e) {
		if (e) {
			projectYear.value = e.value[0];
			searchInfo.value.beginDateStart = projectYear.value + "/01/01";
			searchInfo.value.beginDateEnd = projectYear.value + "/12/31";
			// 获取最新数据
			searchInfo.value.pageNo = 1;
			projectList.value = [];
			moreListFlag = true;
			getList();
		}

		yearShow.value = false;
	}

	let seachFalg = ref(true)

	// 统计
	let countList = ref([{
		title: "年度计划投资（万元）",
		key: "sumYearAmt",
		value: 0,
		color: ""
	}, {
		title: "全年占比",
		key: "yearRt",
		value: 0,
		color: "",
		isRate: true,
	}, {
		title: "当月完成金额（万元）",
		key: "sumMonthAmtSj",
		value: 0,
		color: "count-special-value"
	}, {
		title: "当月占比",
		key: "monthRt",
		value: 0,
		color: "count-special-value",
		isRate: true,
	}]);
	let firstGetCount = true;
	const getAmtCountValue = paramsOrginal => {
		getAmtCount(paramsOrginal).then(res => {
			firstGetCount = false
			for (let i in countList.value) {
				countList.value[i].value = res.data[countList.value[i].key] ?? 0;
			}
		})
	};


	onLoad(() => {
		let year = projectYear.value = new Date().getFullYear();
		searchInfo.value.beginDateStart = year + "/01/01";
		searchInfo.value.beginDateEnd = year + "/12/31";
		defaultIndex.value = [year - 2000];

		getList();
	});

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop
	})

	onPullDownRefresh(() => {
		let year = projectYear.value = new Date().getFullYear();
		searchInfo.value.beginDateStart = year + "/01/01";
		searchInfo.value.beginDateEnd = year + "/12/31";
		searchInfo.value.pageNo = 1;
		projectList.value = [];
		moreListFlag = true;
		firstGetCount = true;
		try {
			getList();
		} finally {
			uni.stopPullDownRefresh()
		}
	})

	function searchClick() {
		goToPage('/pages/projectInfo/search/index')
	}

	onReachBottom(() => {
		return;
		if (!moreListFlag) {
			return uni.showToast({
				title: "已经到底了。",
				icon: "none",
				duration: 2000
			})
		}
		searchInfo.value.pageNo++;
		getList();
	})
</script>

<template>
	<view class="container">
		<page-title @searchClick='searchClick'>红黄灯项目</page-title>

		<view class="cards-list">
			<view class="tabs">
				<u-tabs :list="lightList" @click="lightChange" activeStyle='color:#1763E7' :scrollable='false'
					:current="tabsCurrent" lineWidth='174rpx'></u-tabs>
			</view>

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

			<view class="count-value">
				<view class="count-item" v-for="(item,index) in countList" :key="index">
					<view class="count-item-value" :class="item.color">{{item.value}}{{item.isRate ? "%" : ""}}</view>
					<view class="count-item-description">{{item.title}}</view>
				</view>
			</view>

			<swiper class="swiper" :current="defaultCurrent" @change="chgangeSwiperItem">
				<swiper-item>
					<scroll-view class="swiper-item-content" scroll-y @scrolltolower="ReachBottom">
						<view v-for="(item,index) in projectList" :key="index">
							<!-- 未折叠卡片 -->
							<view class="card" v-if="item.unfold">
								<!-- 项目名称 -->
								<view class="card-item">
									<view class="card-item-name">项目名称</view>

									<view class="card-item-content">{{item.subName ?? "--"}}</view>
								</view>

								<!-- 总投资（万元） -->
								<view class="card-item">
									<view class="card-item-name">总投资（万元）</view>
									<view class="card-item-content">{{item.amtTotal ?? "--"}}</view>
								</view>

								<!-- 年度计划投资-申报单位（万元） -->
								<view class="card-item">
									<view class="card-item-name">年度计划投资-申报单位（万元）</view>
									<view class="card-item-content">{{item.yearAmt ?? "--"}}</view>
								</view>

								<!-- 已完成投资（万元）-->
								<view class="card-item">
									<view class="card-item-name">已完成投资（万元）</view>
									<view class="card-item-content">{{item.yearAmtSj ?? "--"}}</view>
								</view>

								<!-- 当前状态 -->
								<view class="card-item">
									<view class="card-item-name">当前状态</view>
									<view class="card-item-content">{{item.status || "--"}}</view>
								</view>

								<!-- 功能按钮 -->
								<view class="card-item">
									<!-- 项目查看按钮(特殊) -->
									<view class="card-btn fat-btn special-btn" @click="goToDetail(item.id,item.subName)"
										v-if="item.usersub == 1">
										项目查看</view>
									<!-- 项目查看按钮 -->
									<view class="card-btn fat-btn project-btn" @click="goToDetail(item.id,item.subName)" v-else>项目查看
									</view>
									<!-- 关注按钮 -->
									<view class="card-btn fat-btn focus-btn" @click="changeFocus(item.id,item.isAttention)"
										v-if="!item.isAttention">关注</view>
									<view class="card-btn fat-btn focus-btn-no" @click="changeFocus(item.id,item.isAttention)" v-else>
										取消关注</view>
								</view>

								<!-- 周月年报按钮 -->
								<view class="card-item bottom-item">
									<view class="card-btn thin-btn report-btn" @click="goToReport('weekly',item.id,item.subName)">周报
									</view>

									<view class="card-btn thin-btn report-btn" @click="goToReport('monthly',item.id,item.subName)">月报
									</view>

									<view class="card-btn thin-btn more-btn" @click="goToReport('more',item.id,item.subName)">更多操作
									</view>
								</view>

								<!-- 编号 -->
								<view class="card-fold-option"
									:class="item.status_fgw === '2' ? 'card-fold-red' :item.status_fgw === '1' ?'card-fold-yellow':''">
									<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

									<view class="card-fold-center" @click.stop="changeFoldItem(false,item.id)">
										<view class="card-fold-btn card-unfold-btn"></view>
									</view>

									<view class="card-fold-chaos"></view>
								</view>
							</view>

							<!-- 折叠卡片 -->
							<view class="card-fold" v-else>
								{{item.subName ?? "--"}}

								<view class="card-fold-option"
									:class="item.status_fgw === '2' ? 'card-fold-red' :item.status_fgw === '1' ?'card-fold-yellow':''">
									<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

									<view class="card-fold-center" @click.stop="changeFoldItem(true, item.id)">
										<view class="card-fold-btn"></view>
									</view>

									<view class="card-fold-chaos"></view>
								</view>
							</view>
						</view>

						<empty-show v-if="projectList.length===0"></empty-show>

						<view class="gap-bottom"></view>
					</scroll-view>
				</swiper-item>

				<swiper-item>
					<scroll-view class="swiper-item-content" scroll-y @scrolltolower="ReachBottom">
						<view v-for="(item,index) in projectList" :key="index">
							<!-- 未折叠卡片 -->
							<view class="card" v-if="item.unfold">
								<!-- 项目名称 -->
								<view class="card-item">
									<view class="card-item-name">项目名称</view>

									<view class="card-item-content">{{item.subName ?? "--"}}</view>
								</view>

								<!-- 总投资（万元） -->
								<view class="card-item">
									<view class="card-item-name">总投资（万元）</view>
									<view class="card-item-content">{{item.amtTotal ?? "--"}}</view>
								</view>

								<!-- 年度计划投资-申报单位（万元） -->
								<view class="card-item">
									<view class="card-item-name">年度计划投资-申报单位（万元）</view>
									<view class="card-item-content">{{item.yearAmt ?? "--"}}</view>
								</view>

								<!-- 已完成投资（万元）-->
								<view class="card-item">
									<view class="card-item-name">已完成投资（万元）</view>
									<view class="card-item-content">{{item.yearAmtSj ?? "--"}}</view>
								</view>

								<!-- 当前状态 -->
								<view class="card-item">
									<view class="card-item-name">当前状态</view>
									<view class="card-item-content">{{item.status ?? "--"}}</view>
								</view>

								<!-- 功能按钮 -->
								<view class="card-item">
									<!-- 项目查看按钮(特殊) -->
									<view class="card-btn fat-btn special-btn" @click="goToDetail(item.id,item.subName)"
										v-if="item.usersub == 1">
										项目查看</view>
									<!-- 项目查看按钮 -->
									<view class="card-btn fat-btn project-btn" @click="goToDetail(item.id,item.subName)" v-else>项目查看
									</view>
									<!-- 关注按钮 -->
									<view class="card-btn fat-btn focus-btn" @click="changeFocus(item.id,item.isAttention)"
										v-if="!item.isAttention">关注</view>
									<view class="card-btn fat-btn focus-btn-no" @click="changeFocus(item.id,item.isAttention)" v-else>
										取消关注</view>
								</view>

								<!-- 周月年报按钮 -->
								<view class="card-item bottom-item">
									<view class="card-btn thin-btn report-btn" @click="goToReport('weekly',item.id,item.subName)">周报
									</view>

									<view class="card-btn thin-btn report-btn" @click="goToReport('monthly',item.id,item.subName)">月报
									</view>

									<view class="card-btn thin-btn more-btn" @click="goToReport('more',item.id,item.subName)">更多操作
									</view>
								</view>

								<!-- 编号 -->
								<view class="card-fold-option"
									:class="item.status_fgw === '2' ? 'card-fold-red' :item.status_fgw === '1' ?'card-fold-yellow':''">
									<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

									<view class="card-fold-center" @click.stop="changeFoldItem(false,item.id)">
										<view class="card-fold-btn card-unfold-btn"></view>
									</view>

									<view class="card-fold-chaos"></view>
								</view>
							</view>

							<!-- 折叠卡片 -->
							<view class="card-fold" v-else>
								{{item.subName ?? "--"}}

								<view class="card-fold-option"
									:class="item.status_fgw === '2' ? 'card-fold-red' :item.status_fgw === '1' ?'card-fold-yellow':''">
									<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

									<view class="card-fold-center" @click.stop="changeFoldItem(true, item.id)">
										<view class="card-fold-btn"></view>
									</view>

									<view class="card-fold-chaos"></view>
								</view>
							</view>
						</view>

						<empty-show v-if="projectList.length===0"></empty-show>

						<view class="gap-bottom"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<u-back-top :scroll-top="scrollTop"></u-back-top>

		<u-loading-page :loading="loading"></u-loading-page>

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

<style lang="scss" scoped>
	.tabs {
		width: 100%;
		height: 90rpx;
		margin: 0 auto 20rpx;
		border-radius: 28rpx;
		background: #FFF;
	}

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

	.count-value {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 200rpx;
		margin: 20rpx 0;
		background: linear-gradient(180deg, #FFFFFF 2%, #A5C6FF 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		border: 4rpx solid #fff;

		.count-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 50%;
			height: 50%;
			text-align: center;

			.count-item-value {
				margin-bottom: 8rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #FF4000;
			}

			.count-special-value {
				color: #330DDF;
			}

			.count-item-description {
				font-size: 24rpx;
				color: #343437;
			}
		}
	}

	.swiper {
		width: 100%;
		height: calc(100vh - 268rpx);

		.swiper-item-content {
			height: 100%;
			padding: 20rpx 0 30rpx;
		}
	}

	.card-box {
		padding: 0 36rpx 36rpx 36rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		border: 2rpx solid #C2C9D4;
	}

	.project-btn {
		width: 48% !important;
		background: #1869F6;
	}

	.focus-btn {
		width: 48% !important;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 3rpx solid #1869F6;
		color: #1869F6;

	}

	.focus-btn-no {
		width: 48% !important;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 3rpx solid #FF2D2D;
		color: #FF2D2D;
	}

	.lamp {
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 72rpx;
			height: 72rpx;
			margin-right: 20rpx;
		}

		text {
			font-size: 32rpx;
		}
	}

	.card-box2 {
		padding: 0 0 36rpx 0;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
	}

	.focusText {
		font-size: 12rpx;
		margin-right: 12rpx;
	}

	.card {
		padding-top: 16rpx;
		overflow: hidden;
	}

	.light-item {
		margin-bottom: 32rpx;
	}

	.card-light {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card-light-bottom {
		width: 122rpx;
		height: 44rpx;
		margin: auto 0;
		background-size: 100% 100%;
	}

	.light-red {
		background-image: url('@/static/icon-light-red.png');
	}

	.light-yellow {
		background-image: url('@/static/icon-light-yellow.png');
	}

	.light-green {
		background-image: url('@/static/icon-light-green.png');
	}

	.focus {
		width: 46rpx;
		height: 40rpx;
		background-image: url("@/static/focus-off.png");
		background-size: 100% 100%;
	}

	.focus-on {
		background-image: url("@/static/focus-on.png");
	}

	.more-btn {
		background-color: #fff;
		color: #1869F6;

		font-size: 32rpx;
	}

	.special-btn {
		width: 48% !important;
		background: linear-gradient(225deg, #2428F1 0%, #12C8C2 94%);
	}

	.bottom-item {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
		row-gap: 20rpx;
		margin-bottom: 64rpx;
	}

	.card-value {
		position: absolute;
		bottom: 0;
		right: 50%;
		transform: translate(50%);
		width: 255rpx;
		height: 68rpx;
		padding-right: 22rpx;
		text-align: center;
		line-height: 68rpx;
		color: #1869F6;
		font-size: 32rpx;
		background: linear-gradient(90deg, rgba(211, 227, 255, 0) 0%, rgba(178, 206, 255, 0.5548) 54%, rgba(219, 232, 255, 0) 100%);
	}

	.card-fold {
		position: relative;
		width: 100%;
		min-height: 152rpx;
		margin-bottom: 20rpx;
		padding: 24rpx 30rpx 52rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.card-fold-option {
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 38rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: linear-gradient(270deg, #CADDFF 4%, rgba(219, 232, 255, 0) 100%);
		z-index: 999;

		.card-fold-count {
			flex: 1;
			font-size: 28rpx;
			color: #1869F6;
		}

		.card-fold-center {
			flex: 1;

			.card-fold-btn {
				width: 32rpx;
				height: 20rpx;
				margin: 0 auto;
				background-image: url("@/static/icon-fold.png");
				background-size: 100% 100%;
			}

			.card-unfold-btn {
				transform: rotate(180deg);
			}
		}

		.card-fold-chaos {
			flex: 1;
		}
	}

	.card-fold-red {
		background: linear-gradient(270deg, #FF8080 0%, rgba(219, 232, 255, 0) 100%);

		.card-fold-count {
			color: #FF0000;
		}

		.card-fold-center {
			.card-fold-btn {
				background-image: url("@/static/icon-fold-red.png");
			}
		}
	}

	.card-fold-yellow {
		background: linear-gradient(270deg, #FFAA00 4%, rgba(219, 232, 255, 0) 100%);

		.card-fold-count {
			color: #E19703;
		}

		.card-fold-center {
			.card-fold-btn {
				background-image: url("@/static/icon-fold-yellow.png");
			}
		}
	}


	.gap-bottom {
		width: 100%;
		height: 60rpx;
	}
</style>