subject_gxj/xj_project_app_2024_2_18/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";
	import {
		getInfo,
	} from "@/api/login.js"
	import {
		getJSDDlist,
		getXMLXlist,
		getHYFLlist,
	} from "@/api/work/projectInfo.js"

	import {
		getXMXZlist,

	} from "@/api/home.js"
	import store from '@/store'
	import {
		timeFormat
	} from "@/utils/timeFormatter.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: ''
	})

	// 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);
	let redTotal = ref(0);
	let greenTotal = ref(0);
	let yellowTotal = ref(0);

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

		if (firstGetCount) getAmtCountValue(searchInfo.value);

		getProjectInfoList(searchInfo.value).then(res => {
			console.log(res);
			loading.value = false
			projectList.value = projectList.value.concat(res.data.list);
			listTotal.value = res.data.total;
			redTotal.value = res.data.redNum;
			greenTotal.value = res.data.greenNum;
			yellowTotal.value = res.data.yellowNum;
			if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list
					.length)) {
				moreListFlag = false;
			}
			console.log();
		}).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/morePage/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;
			}
		})
	};



	//是否展开筛选条件
	let isUnfold = ref(false)
	//投资分析帅选条件
	let investmentAnalysisFrom = ref({
		kind: ''
	})

	let cardCurrut = ref(0)

	function onChangeCard(e) {
		if (cardCurrut.value == e) {
			projectList.value[cardCurrut.value].isOpen = !projectList.value[cardCurrut.value].isOpen
		} else {
			projectList.value[cardCurrut.value].isOpen = false
			projectList.value[e].isOpen = true
			cardCurrut.value = e
		}


	}
	let pageForm = ref({
		beginDateStart: null,
		beginDateEnd: null,
		kind: null,
		indusKind: null,
		propKind: null,
		subjectId: null,
		status: null,
		subName: null,
		startAmt: null,
		endAmt: null,
		isHide: null,
		light: ['红灯项目', '黄灯项目'],
	})
	// ====================================选择开始时间
	let beginDateStart = ref(null)
	let beginTimeShow = ref(false)

	function showBeginTimeChoose() {
		beginTimeShow.value = true
	}

	function beginTimeClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			pageForm.value.beginDateStart = time
		}
		beginTimeShow.value = false
	}

	// ====================================选择结束时间
	let beginDateEnd = ref(null)
	let endTimeShow = ref(false)

	function showEndTimeChoose() {
		endTimeShow.value = true
	}

	function endTimeClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			pageForm.value.beginDateEnd = time
		}
		endTimeShow.value = false
	}

	// ====================================选择项目类型
	let kindShow = ref(false);
	let kindColumns = ref([]);

	function showKindChoose() {
		kindShow.value = true
	}

	function kindClose(e) {
		if (e) pageForm.value.kind = e.value[0];
		kindShow.value = false;
	}

	let kindFull = [];
	const getXMLX = function() {
		getXMLXlist().then(res => {
			kindFull = res.data.list;
			kindFull.unshift({
				key: null,
				value: "所有类型"
			});

			kindColumns.value = [res.data.list.map(item => item.value)];
		})
	};

	// ====================================选择行业分类
	let industKindOrgin = []
	let IndustKindList = ref([])
	let IndustKindShow = ref(false)

	function showIndustKindChoose() {
		IndustKindShow.value = true
	}

	function IndustKindClose(e) {
		if (e) pageForm.value.indusKind = e.value[0];
		IndustKindShow.value = false
	}

	// ====================================选择行业状态
	// let statusList = ref([
	// 	["请选择", "暂存", "项目申报", "待审批", "审批中", "核准备案中", "计划编制", "待开工", "施工中", "年度竣工", "不同意", "已竣工"]
	// ])
	let statusList = ref([
		["请选择", "暂存", "项目前期", "待开工", "施工中", "暂停施工", "已竣工"]
	])

	let statusShow = ref(false)

	function showStatusChoose() {
		statusShow.value = true
	}

	function statusClose(e) {
		if (e) pageForm.value.status = e.value[0];
		statusShow.value = false;
	}

	// ====================================选择隐藏状态
	let isHideNameList = ref([
		["请选择",
			"正常",
			"隐藏"
		]
	])
	let isHideNameShow = ref(false)

	function showIsHideNameChoose() {
		isHideNameShow.value = true
	}

	function isHideNameClose(e) {
		if (e) pageForm.value.isHideName = e.value[0];
		isHideNameShow.value = false;
	}

	// =====================================地点
	let areaShow = ref(false);
	let areaColumns = ref([]);
	const showAreaChoose = function() {
		areaShow.value = true;
	}
	const areaClose = function(e) {
		if (e) pageForm.value.subjectId = e.value[0];
		areaShow.value = false;
	}
	let jsddFull = [];

	const getJSDD = function() {
		getJSDDlist().then(res => {
			jsddFull = res.data.list;
			jsddFull.push({
				key: null,
				value: "所有地区"
			});

			areaColumns.value = [res.data.list.map(item => item.value)];
			areaColumns.value[0].unshift("所有地区");
		})
	};

	// =====================================性质
	let xmxzShow = ref(false);
	let xmxzColumns = ref([]);
	const showXmxzChoose = function() {
		xmxzShow.value = true;
	}
	const xmxzClose = function(e) {
		if (e) pageForm.value.propKind = e.value[0];
		xmxzShow.value = false;
	}
	let xmxzFull = [];

	const getXMXZ = function() {
		getXMXZlist().then(res => {
			xmxzFull = res.data.list;
			xmxzFull.unshift({
				key: null,
				value: "所有性质"
			});

			xmxzColumns.value = [res.data.list.map(item => item.value)];
		})
	};

	// =====================================灯
	let lightShow = ref(false);
	const kindUnit = store.getters && store.getters.kindUnit;

	function judgeLightShow() {
		if ((kindUnit ?? '') === '') {
			// 为空就请求一下
			getInfo().then(res => {
				lightShow.value = res?.data?.user?.kindUnit === "1";
			})
		} else {
			lightShow.value = kindUnit === "1";
		}
	}


	function confirmParams() {

		// let statusObj = {
		// 	"请选择": "",
		// 	"暂存": "0",
		// 	"项目申报": "1",
		// 	"待审批": "2",
		// 	"审批中": "3",
		// 	"核准备案中": "4",
		// 	"计划编制": "5",
		// 	"待开工": "6",
		// 	"施工中": "7",
		// 	"不同意": "8",
		// 	"年度竣工": "9",
		// 	"已竣工": "A"
		// }
		let statusObj = {
			"请选择": "",
			"暂存": "0",
			"项目前期": "1",
			"待开工": "6",
			"施工中": "7",
			"暂停施工": "8",
			//"年度竣工": "9",
			"已竣工": "A"
		}

		let isHideNameObj = {
			"请选择": "",
			"正常": "0",
			"隐藏": "1",
		}

		let lightObj = {
			"绿灯项目": "0",
			"黄灯项目": "1",
			"红灯项目": "2"
		}
		let lightText = ""
		for (let i in pageForm.value.light) {
			lightText += lightObj[pageForm.value.light[i]] + ","
		}
		if (lightText.length > 0) lightText = lightText.substr(0, lightText.length - 1);
		let paramsData = {
			"beginDateStart": pageForm.value.beginDateStart,
			"beginDateEnd": pageForm.value.beginDateEnd,
			"kind": kindFull.find(item => item.value === pageForm.value.kind)?.key,
			"indusKind": industKindOrgin.find(item => item.value === pageForm.value.indusKind)?.key,
			"subjectId": jsddFull.find(item => item.value === pageForm.value.subjectId)?.key,
			"propKind": xmxzFull.find(item => item.value === pageForm.value.propKind)?.key,
			"status": statusObj[pageForm.value.status],
			"subName": pageForm.value.subName,
			"startAmt": pageForm.value.startAmt,
			"endAmt": pageForm.value.endAmt,
			"isHide": isHideNameObj[pageForm.value.isHideName],
			"light": lightText
		}
		searchInfo.value = Object.assign(searchInfo.value, paramsData);
		searchInfo.value.pageNo = 1;
		projectList.value = [];
		listTotal.value = 0;
		moreListFlag = true;
		console.log(searchInfo.value, '请求参数');
		getList();

	}




	onLoad(async () => {
		let now = new Date();
		let year = now.getFullYear();
		// 开始时间
		searchInfo.value.beginDateStart = beginDateStart.value = pageForm.value.beginDateStart = year +
			"/01/01";
		// 结束时间
		searchInfo.value.beginDateEnd = beginDateEnd.value = pageForm.value.beginDateEnd = year + "/12/31";


		// 行业分类列表
		const res = await getHYFLlist()
		industKindOrgin = res.data.list
		let titleList = res.data.list.map(item => item.value)
		titleList.unshift("请选择")
		IndustKindList.value = [titleList]
		getJSDD(); // 建设地点列表
		getXMXZ(); // 项目性质列表
		getXMLX(); // 项目类型列表
		judgeLightShow()
		console.log(searchInfo.value);
		confirmParams()
	});

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

<template>
	<view class="container">
		<page-title @searchClick='searchClick'>红黄灯项目({{listTotal}})</page-title>
		<view class="stats-layer-next">
			<view class="condition-btn">
				<view class="text">
					2024
				</view>
				<image src="../../static/images/interArrow.svg" mode="" :class="isUnfold ? 'open-btn':''"
					@click="isUnfold = !isUnfold">
				</image>
			</view>

			<view class="condition-from" :style="isUnfold ? {height:'800rpx'} :''">
				<view class="item">
					<view class="item-label">开始日期</view>
					<view class="item-text" @click="showBeginTimeChoose()">
						<view v-if="pageForm.beginDateStart">{{pageForm.beginDateStart}}</view>
						<view v-else class="text">请选择开始日期</view>
						<u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="item-label">结束日期</view>
					<view class="item-text" @click="showEndTimeChoose()">
						<view v-if="pageForm.beginDateEnd">{{pageForm.beginDateEnd}}</view>
						<view v-else class="text">请选择结束日期</view>
						<u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="item-label">项目类型</view>
					<view class="item-text" @click="showKindChoose()">
						<view v-if="pageForm.kind">{{pageForm.kind}}</view>
						<view v-else class="text">请选择类型</view>
						<u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="item-label">项目性质</view>
					<view class="item-text" @click="showXmxzChoose()">
						<view v-if="pageForm.propKind">{{pageForm.propKind}}</view>
						<view v-else class="text">请选择行业分类</view>
						<u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="item-label">建设地点</view>
					<view class="item-text" @click="showAreaChoose()">
						<view v-if="pageForm.subjectId">{{pageForm.subjectId}}</view>
						<view v-else class="text">请选择建设地点</view>
						<u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="item-label">行业分类</view>
					<view class="item-text" @click="showIndustKindChoose()">
						<view v-if="pageForm.indusKind">{{pageForm.indusKind}}</view>
						<view v-else class="text">请选择行业分类</view>
						<u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="item-label">状态</view>
					<view class="item-text" @click="showStatusChoose()">
						<view v-if="pageForm.status">{{pageForm.status}}</view>
						<view v-else class="text">请选择状态</view>
						<u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="item-label">隐藏状态</view>
					<view class="item-text" @click="showIsHideNameChoose()">
						<view v-if="pageForm.isHideName">{{pageForm.isHideName}}</view>
						<view v-else class="text">请选择隐藏状态</view>
						<u-icon name="arrow-right" color="#DDDDDD" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="item-label">金额范围</view>
					<view class="card-item-range">
						<input v-model="pageForm.startAmt" class="card-item-input center-input" placeholder="最小值"
							placeholder-style="color: #D8D8D8" maxlength="20" type="number" />
						~
						<input v-model="pageForm.endAmt" class="card-item-input center-input" placeholder="最大值"
							placeholder-style="color: #D8D8D8" maxlength="20" type="number" />
					</view>
				</view>
				<view class="item">
					<view class="item-label">项目名称</view>
					<view class="card-item-range">
						<input v-model="pageForm.subName" class="card-item-input center-input" placeholder="请输入项目名称"
							placeholder-style="color: #D8D8D8" maxlength="20" type="number" />
					</view>
				</view>
				<!-- 红黄绿灯 -->
				<view style="margin-top: 20rpx;">
					<u-checkbox-group v-model="pageForm.light" style="width: 500rpx">
						<u-checkbox :customStyle="{display:'flex',justifyContent:'space-evenly',width:'50%'}"
							label-size="16px" iconColor='#fff' activeColor='#002F69' v-for="(item, index) in lightList"
							:key="index" :label="item.name" :name="item.name">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="form-confrom" style="margin-top: 20rpx;" @click="confirmParams()">
					确定
				</view>
			</view>

		</view>

		<view class="cards-list" :style="isUnfold ? {marginTop:'30rpx'} :''">
			<view class="count-value" style="display: flex;flex-direction: row;"
				:style="isUnfold ? {paddingTop:'30rpx'} :''">
				<view class="status-fgw">
					<image class="status-fgw-light" src="../../static/images/red.svg" mode=""></image>
					<view class="status-num">
						<view class="number">
							{{redTotal}} <text class="dw">个</text>
						</view>
						<view class="number-palin">
							红灯项目
						</view>
					</view>
				</view>
				<view class="status-fgw">
					<image class="status-fgw-light" src="../../static/images/yellow.svg" mode=""></image>
					<view class="status-num">
						<view class="number" style="color:#E6AA00;">
							{{yellowTotal}} <text class="dw" style="color:#E6AA00;">个</text>
						</view>
						<view class="number-palin">
							黄灯项目
						</view>
					</view>
				</view>
				<view class="status-fgw">
					<image class="status-fgw-light" src="../../static/images/green.svg" mode=""></image>
					<view class="status-num">
						<view class="number" style="color:#327002;">
							{{greenTotal}} <text class="dw" style="color:#327002;">个</text>
						</view>
						<view class="number-palin">
							绿灯项目
						</view>
					</view>
				</view>

			</view>

			<view class="cards-list" style="marginTop:30rpx;width: 100%">
				<view class="count-value" style="paddingTop:30rpx;border-radius: 12rpx;">
					<view class="stats-list">
						<view class="stats-item">
							<view class="item-num">
								<text class="number">{{countList[0].value}}</text>
								<text class="unit">万</text>
							</view>
							<view class="item-name">
								年度计划投资
							</view>
						</view>
						<view class="line">

						</view>
						<view class="stats-item">
							<view class="item-num">
								<text class="number">{{countList[2].value}}</text>
								<text class="unit">万</text>
							</view>
							<view class="item-name">
								当月完成金额
							</view>
						</view>



					</view>
					<view class="bar-layer">
						<view class="bar-item">
							<view class="line-progress">
								<u-line-progress :percentage="countList[1].value" inactiveColor="#E9F2FF"
									activeColor="#6EAAF7" :showText="false" height="10"></u-line-progress>
							</view>
							<view class="item-text">
								<view class="text-name">
									年度占比
								</view>
								<view class="text-rote">
									{{countList[1].value + '%'}}
								</view>
							</view>
						</view>
						<view class="bar-item">
							<view class="line-progress">
								<u-line-progress :percentage="countList[3].value" inactiveColor="#E9F2FF"
									activeColor="#6EAAF7" :showText="false" height="10"></u-line-progress>
							</view>
							<view class="item-text">
								<view class="text-name">
									当月占比
								</view>
								<view class="text-rote">
									{{countList[3].value + '%'}}
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>

			<view v-for="(item,index) in projectList" :key="index">
				<view class="card" :style="!item.isOpen ? '' :{paddingBottom:'0 !important'}">
					<view class="project-layer" :style="!item.isOpen ? {border:'none'}:''">
						<text class="card-name-num">{{(index+1<10?'0'+(index+1):index+1)}}</text>
						<view class="name">
							{{item.subName ?? "--"}}
						</view>
						<view class="card-status" @click="onChangeCard(index)">
							<image class="status-light" src="../../static/images/red.svg" mode=""
								v-if="item.status_fgw=='2'"></image>
							<image class="status-light" src="../../static/images/green.svg" mode=""
								v-if="item.status_fgw=='0'||item.status_fgw==null"></image>
							<image class="status-light" src="../../static/images/yellow.svg" mode=""
								v-if="item.status_fgw=='1'">
							</image>
							<view class="status-name">
								{{item.status ?? "--"}}
							</view>
							<image class="status-switch" src="../../static/images/liaghtUp.svg" mode=""
								:class="item.isOpen ?'card-status-icon-change' :''">
							</image>
						</view>
					</view>


					<view class="card-content-box" :style="item.isOpen ? {height:'286rpx'} :''">
						<view class="line">

						</view>
						<view class="card-item" style="margin-top: 5rpx;">
							<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 content-red">{{item.status ?? "--"}}</view>
						</view>
						<view class="card-btn-list">
							<view class="button" @click="goToReport('weekly',item.id,item.subName)">
								周报
							</view>
							<view class="button" @click="goToReport('monthly',item.id,item.subName)">
								月报
							</view>
							<view class="button" v-if="!item.isAttention"
								@click="changeFocus(item.id,item.isAttention)">
								关注
							</view>
							<view class="button" @click="changeFocus(item.id,item.isAttention)" v-else>
								取消关注
							</view>
							<view class="button" v-if="item.usersub == 1" @click="goToDetail(item.id,item.subName)">
								项目详情
							</view>
							<view class="button" v-else @click="goToDetail(item.id,item.subName)">
								项目详情
							</view>
							<view class="button" @click="goToReport('more',item.id,item.subName)">
								更多
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="no-list" v-if="projectList.length===0">
				<image src="@/static/text-nocontent.png" mode=""></image>
				<text>未搜索到相关内容</text>
			</view>
		</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>
		<!-- 开始时间 -->
		<u-datetime-picker :show="beginTimeShow" @confirm="beginTimeClose" @cancel="beginTimeClose"
			@close="beginTimeClose" v-model="beginDateStart" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose"
			v-model="beginDateEnd" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 行业分类 -->
		<u-picker :show="IndustKindShow" :columns="IndustKindList" @confirm="IndustKindClose" @cancel="IndustKindClose"
			@close="IndustKindClose" closeOnClickOverlay></u-picker>
		<!-- 行业状态 -->
		<u-picker :show="statusShow" :columns="statusList" @confirm="statusClose" @cancel="statusClose"
			@close="statusClose" closeOnClickOverlay></u-picker>
		<!-- 地点选择 -->
		<u-picker :show="areaShow" :columns="areaColumns" @confirm="areaClose" @cancel="areaClose" @close="areaClose"
			closeOnClickOverlay></u-picker>
		<!-- 性质选择 -->
		<u-picker :show="xmxzShow" :columns="xmxzColumns" @confirm="xmxzClose" @cancel="xmxzClose" @close="xmxzClose"
			closeOnClickOverlay></u-picker>
		<!-- 项目类型 -->
		<u-picker :show="kindShow" :columns="kindColumns" @confirm="kindClose" @cancel="kindClose" @close="kindClose"
			closeOnClickOverlay></u-picker>
		<!-- 隐藏状态 -->
		<u-picker :show="isHideNameShow" :columns="isHideNameList" @confirm="isHideNameClose" @cancel="isHideNameClose"
			@close="isHideNameClose" closeOnClickOverlay></u-picker>
	</view>
</template>

<style lang="scss" scoped>
	.stats-layer-next{
		margin-top: 20rpx;
		padding-top: 60rpx;
	}
	.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-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 38rpx;
		gap: 44rpx;
		width: 100%;
		background-color: #fff;

		.bar-layer {
			display: flex;
			justify-content: center;
			gap: 10%;
			width: 100%;

			.bar-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10rpx;
				width: 200rpx;

				.item-text {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 10rpx;

					.text-name {
						font-size: 28rpx;
						font-weight: 500;
						color: #000;
						white-space: nowrap;
					}

					.text-rote {
						font-size: 28rpx;
						font-weight: 500;
						color: #C44E00;
					}
				}

				.line-progress {
					width: 100%;
				}
			}

		}

		.stats-list {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 35rpx;


			.line {
				height: 50rpx;
				border-right: 2rpx solid #EBEBEB;
				border-top: none;
			}

			.stats-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.item-num {
					display: flex;
					justify-content: center;
					align-items: flex-end;
					gap: 10rpx;
					color: #0033A8;

					.number {
						font-size: 36rpx;
						font-weight: 800;
						color: #C44E00;
					}

					.unit {
						font-size: 28rpx;
						font-weight: 500;
						color: #C44E00;
					}

				}

				.item-name {
					font-size: 25rpx;
					white-space: nowrap;
				}
			}
		}

	}



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


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



	.count-value {
		display: flex;

		.status-fgw {
			display: flex;

			.status-fgw-light {
				width: 72rpx;
				height: 72rpx;
			}

			.status-num {
				.number {
					font-size: 36rpx;
					color: #E02020;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					font-weight: 500;

					.dw {
						font-size: 20rpx;
						color: #E02020;
						font-weight: 500;
					}
				}

				.number-palin {
					font-weight: 500;
					font-size: 24rpx;
					color: #444444;
				}
			}
		}
	}
</style>