subject_gxj/xj_project_app/pages/workRegion/index.vue

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

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

	import {
		getOverdueNum
	} from "@/api/work/overdue.js"

	import {
		getannouncementList,
		getUnwriteReportList,
		getHomeStats
	} from "@/api/home.js"

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

	import {
		getMessageNum
	} from "@/api/work/message.js"

	import store from '@/store'

	import {
		checkRoleById
	} from "@/utils/permission.js"

	import iconEnterpriseInfo from "@/static/func/enterpriseInfos.svg";
	import iconProjectInfo from "@/static/func/projectInfo.svg";
	import iconReserveProject from "@/static/func/reserveProject.svg";
	import iconContact from "@/static/func/contact.svg";
	import iconQuestionList from "@/static/func/questionList.svg";
	import iconQuestionInput from "@/static/func/questionInput.svg";
	import iconQuestionTrace from "@/static/func/questionTrace.svg";
	import iconFundPlan from "@/static/func/fundPlan.svg";
	import iconFundUse from "@/static/func/fundUse.svg";
	import iconProjectPercents from "@/static/func/projectPercents.svg";
	import iconImportant from "@/static/func/important.svg";
	import iconPreFlow from "@/static/func/preFlow.svg";
	import iconWeekly from "@/static/func/weekly.svg";
	import iconMonthly from "@/static/func/monthly.svg";
	import iconYearly from "@/static/func/yearly.svg";
	import iconOverdued from "@/static/func/overdued.svg";
	import iconOverdueWill from "@/static/func/overdueWill.svg";

	// 项目信息
	let projectYear = ref(2023);

	// 选择年
	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];
			// 获取最新数据
			getProjectInfo();
		}

		yearShow.value = false;
	}

	// 选择分类
	let projectKind = ref(null);
	let projectKindId = null;
	let kindShow = ref(false);
	let kindColumns = ref([]);
	const kindShowChoose = function() {
		kindShow.value = true;
	}
	const kindClose = function(e) {
		if (e) {
			projectKind.value = e.value[0];
			projectKindId = hyflFull.find(item => item.value === projectKind.value).key;
			// 获取最新数据
			getProjectInfo();
		}

		kindShow.value = false;
	}
	let hyflFull = [];
	const getHYFL = function() {
		getHYFLlist().then(res => {
			hyflFull = res.data.list;
			kindColumns.value = [res.data.list.map(item => item.value)];
		})
	};

	// 选择地点
	let projectArea = ref(null);
	let projectAreaId = null;
	let areaShow = ref(false);
	let areaColumns = ref([]);
	const areaShowChoose = function() {
		areaShow.value = true;
	}
	const areaClose = function(e) {
		if (e) {
			projectArea.value = e.value[0];
			projectAreaId = jsddFull.find(item => item.value === projectArea.value).key;
			// 获取最新数据
			getProjectInfo();
		}

		areaShow.value = false;
	}
	let jsddFull = [];
	const getJSDD = function() {
		getJSDDlist().then(res => {
			jsddFull = res.data.list;
			areaColumns.value = [res.data.list.map(item => item.value)];
		})
	};

	let projectNum = ref([{
		name: "亿元以下",
		key: "numAmt1",
		value: 0,
	}, {
		name: "1-5亿",
		key: "numAmt2",
		value: 0,
	}, {
		name: "5-10亿",
		key: "numAmt3",
		value: 0,
	}, {
		name: "10亿以上",
		key: "numAmt4",
		value: 0,
	}]);

	let fundNum = ref([{
		name: "年度计划投资",
		key: "amtJh",
		value: 0,
	}, {
		name: "当月计划投资",
		key: "monthPlan",
		value: 0,
	}, {
		name: "年度完成投资",
		key: "amtSj",
		value: 0,
	}]);

	let fullPercents = ref(0);

	let pieOpts = ref({
		color: ["#03873F", "#00B250", "#1BBF65", "#31DF80", "#69E2A0"],
		enableScroll: false,
		legend: {
			show: false
		},
		extra: {
			pie: {
				customRadius: 80,
				border: false,
			}
		}
	})

	let ringOpts = ref({
		color: ["#3E76FC", "#7AA2FF", "#B8CDFF"],
		enableScroll: false,

		legend: {
			show: false
		},
		title: {
			name: "300",
			fontSize: 14,
			color: "#3D3D3D"
		},
		subtitle: {
			name: "项目总数",
			fontSize: 14,
			color: "#3D3D3D"
		},
		extra: {
			ring: {
				customRadius: 55,
				ringWidth: 20,
				border: false,
			}
		}
	})


	let ringTotal = ref(0);
	let ringChartData = ref({
		series: [{
			data: [{
				name: '新建项目',
				value: 100,
				labelShow: false
			}, {
				name: '续建项目',
				value: 100,
				labelShow: false
			}, {
				name: '储备项目',
				value: 100,
				labelShow: false
			}]
		}]
	})

	let showRing = ref(false)
	let showPie = ref(false)

	let pieChartData = ref({
		series: [{
			data: [{
				name: "无数据",
				value: 0,
				labelShow: false
			}]
		}]
	})

	function getProjectInfo() {
		getHomeStats({
			year: projectYear.value,
			indusKind: projectKindId,
			buildAddre: projectAreaId
		}).then(res => {
			const {
				data
			} = res;

			for (let i in projectNum.value) {
				projectNum.value[i].value = data[projectNum.value[i].key] ?? "--";
			}
			for (let i in fundNum.value) {
				fundNum.value[i].value = data[fundNum.value[i].key] ?? "--";
			}
			fullPercents.value = (data.numBl ?? "") === "" ? 0 : parseFloat(data.numBl);

			// 圆环图
			numNew.value = ringChartData.value.series[0].data[0].value = data.numNew;
			numOld.value = ringChartData.value.series[0].data[1].value = data.numOld;
			numNo.value = ringChartData.value.series[0].data[2].value = data.numNo;
			ringOpts.value.title.name = data.numTotal ?? "0";
			showRing.value = true;

			let tempArr = [];
			for (let i in data.buildAddress) {
				tempArr.push({
					name: data.buildAddress[i].title,
					value: data.buildAddress[i].num,
					labelShow: false
				})
			}
			if (data.buildAddress.length > 0) {
				pieChartData.value.series[0].data = tempArr
			} else {
				pieChartData.value.series[0].data = [{
					name: "无数据",
					value: 0,
					labelShow: false
				}]
			};

			showPie.value = true;
		})
	}

	let numNew = ref(0);
	let numOld = ref(0);
	let numNo = ref(0);

	// 公告列表
	let announcementList = ref([]);

	function getAnnounceMent() {
		getannouncementList({
			pageNo: 1,
			pageSize: 3
		}).then(res => {
			let titleList = res.data.list.map(item => {
				return item.title
			})
			announcementList.value = titleList.length > 0 ? titleList : ['当前暂无公告'];
		})
	}

	// 逾期数量
	let overdueWill = ref(0);
	let overdued = ref(0);

	function getOverdue() {
		getOverdueNum().then(res => {
			let bigItem = functionList.value.find(item => item.name === "问题督办");

			let willItem = bigItem.funcList.find(item => item.name === "预期提醒");
			willItem.badgeValue = res.data.willOver ?? 0;

			let overduedItem = bigItem.funcList.find(item => item.name === "已逾期");
			overduedItem.badgeValue = res.data.isOver ?? 0;

			// overdueWill.value = res.data.willOver ?? 0;
			// overdued.value = res.data.isOver ?? 0;
		})
	}

	// 功能列表
	let functionList = ref([{
			name: '基本信息',
			permissionCode: '712',
			funcList: [{
				name: '企业信息',
				url: '/pages/enterpriseInfo/index',
				icon: iconEnterpriseInfo,
				permissionCode: '7121'
			}, {
				name: '项目台账',
				url: '/pages/projectInfo/index',
				icon: iconProjectInfo,
				permissionCode: '7111'
			}, {
				name: '储备项目',
				url: '/pages/cbProject/index',
				icon: iconReserveProject,
				permissionCode: '7112'
			}, {
				name: '联系人',
				url: '/pages/contact/index',
				icon: iconContact,
				permissionCode: '7112'
			}]
		},
		{
			name: '由项目申报单位填写',
			permissionCode: '811',
			funcList: [{
				name: '周报',
				url: '/pages/weekly/index',
				icon: iconWeekly,
				permissionCode: '8112'
			}, {
				name: '月报',
				url: '/pages/monthly/index',
				icon: iconMonthly,
				permissionCode: '8113'
			}, {
				name: '年度计划',
				url: '/pages/yearly/index',
				icon: iconYearly,
				permissionCode: '8111'
			}]
		},
		{
			name: '问题督办',
			permissionCode: '713',
			funcList: [{
				name: '问题清单',
				url: '/pages/oversee/index',
				icon: iconQuestionList,
				permissionCode: '7131'
			}, {
				name: '问题录入',
				url: '/pages/questionInput/index',
				icon: iconQuestionInput,
				permissionCode: '7132'
			}, {
				name: '问题跟踪',
				url: '/pages/questionTrace/index',
				icon: iconQuestionTrace,
				permissionCode: '7133'
			}, {
				name: '预期提醒',
				url: '/pages/overdue/index',
				icon: iconOverdueWill,
				permissionCode: '7133',
				showBadge: true,
				badgeValue: 0
			}, {
				name: '已逾期',
				url: '/pages/overdue/overdued/index',
				icon: iconOverdued,
				permissionCode: '7133',
				showBadge: true,
				badgeValue: 0
			}]
		},
		{
			name: '统计分析',
			permissionCode: '714',
			lastLine: true,
			funcList: [{
				name: '资金计划',
				url: '/pages/countAnalysis/fundPlan/index',
				icon: iconFundPlan,
				permissionCode: '7141',
			}, {
				name: '资金使用',
				url: '/pages/countAnalysis/fundUse/index',
				icon: iconFundUse,
				permissionCode: '7142'
			}, {
				name: '项目进度',
				url: '/pages/countAnalysis/projectProcess/index',
				icon: iconProjectPercents,
				permissionCode: '7143'
			}, {
				name: '重大事项',
				url: '/pages/important/index',
				icon: iconImportant,
				permissionCode: '7143'
			}, {
				name: '前期手续',
				url: '/pages/preFlow/index',
				icon: iconPreFlow,
				permissionCode: '7143'
			}]
		},
	])

	// 判断功能菜单权限
	const roles = store.getters && store.getters.permissions;

	function judgeFuncList() {
		let tempList = JSON.parse(JSON.stringify(functionList.value))
		for (let i in tempList) {
			//如果父级都没权限 直接移除
			if (!roles.includes(tempList[i].permissionCode)) {
				tempList[i].ban = true
			} else {
				let funcListSon = tempList[i].funcList
				for (let j in funcListSon) {
					if (!roles.includes(funcListSon[j].permissionCode)) {
						funcListSon[j].ban = true
					}
				}
			}
		}

		let filterList = tempList.filter(item => {
			return !item.ban
		})

		for (let i in filterList) {
			let filterListSon = filterList[i].funcList.filter(item => {
				return !item.ban
			})
			filterList[i].funcList = filterListSon
		}

		functionList.value = filterList
	}

	function goToPage(url, permissionCode) {
		if (permissionCode) {
			let havePermission = checkRoleById([permissionCode])
			if (!havePermission) return
		}

		uni.navigateTo({
			url
		})
	}

	// =============================未填写周报月报
	let popupShow = ref(false)
	let unWriteList = ref([])
	let unWriteListTotal = ref(0)

	function getUnwirteList() {
		getUnwriteReportList().then(res => {
			if (res.data.list.length > 0) {
				popupShow.value = true;
				unWriteList.value = res.data.list;
				unWriteListTotal.value = res.data.list.length;
			}
		})
	}

	function goToWriteReport(item) {
		const {
			sub_id: subId,
			month1: kj_month,
		} = item;
		let year = item.month1.substr(0, 4)
		let startDate = item.month1.substr(0, 10)
		if (item.kind === "1") { // 周报		
			uni.navigateTo({
				url: `/pages/weekly/input/index?subId=${subId}&startDate=${startDate}&year=${year}&kj_month=${kj_month}`
			})
		} else { // 月报	
			let kjMonth = kj_month.substring(0, 4) + '年' + kj_month.substring(4, 6) + '月';
			uni.navigateTo({
				url: `/pages/monthly/input/index?subId=${subId}&startDate=${startDate}&year=${year}&kj_month=${kjMonth}`
			})
		}
	}

	function popupClose() {
		popupShow.value = false
	}

	function getMessageCount() {
		getMessageNum().then(res => {
			if (res.data.count) {
				uni.setTabBarBadge({ //显示数字
					index: 1, //tabbar下标
					text: res.data.count + '' //数字
				})
			} else {
				uni.removeTabBarBadge({ //显示数字
					index: 1, //tabbar下标
				})
			}
		})
	}

	onLoad(() => {
		let now = new Date();
		projectYear.value = now.getFullYear();
		defaultIndex.value = [projectYear.value - 2000];
		judgeFuncList(); //判断权限
		getAnnounceMent(); //获取公告
		getHYFL(); //获取行业分类
		getJSDD(); //获取建设地点
		getProjectInfo(); //获取项目数据
		getOverdue(); //获取逾期数量
		getUnwirteList(); //获取未填写周报月报信息
		getMessageCount(); //获取未读消息数量
	});

	onShow(() => {
		if (popupShow.value) {
			getUnwirteList();
		}
	})
</script>

<template>
	<view class="container">
		<!-- 头 固定-->
		<view class="title-content">
			<!-- <text class="title">工作台</text> -->

			<!-- 搜索 -->
			<!-- 			<view class="search">
				<view class="search-input">
					<view class="search-icon"></view>
					<input @focus="goToPage('/pages/search/index')" placeholder="项目、领导电话..."
						placeholder-style="color: #D8D8D8;font-size:24rpx" />
				</view>

				<view class="search-focus" @click="goToPage('/pages/focus/index')">
					<view class="search-focus-icon"></view>
					关注
				</view>
			</view> -->
			<view class="title">
				<view class="title-text">工作台</view>
				<view class="title-search" @click="goToPage('/pages/search/index')"></view>
			</view>
		</view>

		<!-- <view class="top-blue"> -->
		<!-- 新增功能 -->
		<!-- 		<view class="special-funcs">
				<view class="special-func-item gov" @click="goToPage('/pages/policy/search/index')">
					<view class="special-func-title">
						<view class="special-func-name">政策文件</view>
						<u-icon name="arrow-right" color="#fff" size="16" customStyle="margin-top:2rpx"></u-icon>
					</view>
				</view>

				<view class="special-func-item todo" @click="goToPage('/pages/process/index')">
					<view class="special-func-title">
						<view class="special-func-name">办事流程</view>
						<u-icon name="arrow-right" color="#fff" size="16" customStyle="margin-top:2rpx"></u-icon>
					</view>
				</view>

				<view class="special-func-item images" @click="goToPage('/pages/projectImage/index')">
					<view class="special-func-title">
						<view class="special-func-name">项目形象进度</view>
						<u-icon name="arrow-right" color="#fff" size="16" customStyle="margin-top:2rpx"></u-icon>
					</view>
				</view>
			</view>
 -->
		<!-- 公告 -->
		<!-- <view class="announcementList"> -->
		<!-- <view class="announcementList-text">通知公告</view> -->
		<!-- 				<u-notice-bar :text="announcementList" url="/pages/announcement/list/index" direction="column"
					mode="link" bgColor="#FFF7DC " color="#FF8D02"></u-notice-bar>
			</view> -->

		<!-- </view> -->
		<!-- 功能区 -->
		<view class="function-list">
			<view class="func-kind" v-for="item in functionList">
				<view class="func-kind-title">
					<view class="func-kind-icon"></view>
					{{item.name}}
				</view>

				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in item.funcList" :key="listIndex"
						@click="goToPage(listItem.url,listItem.permissionCode)">
						<view class="grid-item">
							<u-badge v-if="listItem.showBadge" class="badge-num" type="error" max="99"
								:value="listItem.badgeValue"></u-badge>
							<view class="grid-item-icon">
								<image :src="listItem.icon"></image>
							</view>

							{{listItem.name}}
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<!-- 项目信息 -->
		<view class="project-info">


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

				<view class="choose-year border" @click="kindShowChoose()">
					{{projectKind ??"行业分类"}}
					<u-icon name="arrow-right" color="#343437" size="14" customStyle="margin-left:10rpx"></u-icon>
				</view>

				<view class="choose-year" @click="areaShowChoose()">
					{{projectArea ??"建设地点"}}
					<u-icon name="arrow-right" color="#343437" size="14" customStyle="margin-left:10rpx"></u-icon>
				</view>
			</view>
			<view class="project-num-box">
				<view class="project-num">
					<view class="project-num-title blue">
						亿元项目数（单位：个）
					</view>

					<view class="project-num-minbox">
						<view class=" project-num-item" v-for="(item,index) in projectNum" :key="index">
							<view class="project-num-value">{{item.value}}</view>
							<text style="color:#82828C">{{item.name}}</text>
						</view>
					</view>
				</view>

				<view class="project-num">
					<view class="project-num-title">
						资金使用情况（单位：万元）
						<u-icon name="arrow-right" color="#7D7D9C" size="14"></u-icon>
					</view>
					<view class="project-num-minbox">
						<view class="project-num-item" v-for="(item,index) in fundNum" :key="index">
							<view class="project-num-value">{{item.value}}</view>
							<text style="color:#82828C">{{item.name}}</text>
						</view>
					</view>
				</view>

				<view class="project-process">
					实际整体进度

					<view class="line-progress">
						<u-line-progress :percentage="fullPercents" inactiveColor="#C1CEED" activeColor="#5D5AFF" :showText="false"
							height="13"></u-line-progress>
					</view>

					<view class="percent">
						{{fullPercents}}%
					</view>
				</view>
			</view>
		</view>

		<!-- 饼图 -->
		<view class="charts">
			<view class="charts-item">
				<view class="charts-item-title">单位：个</view>

				<view class="charts-item-ring">
					<qiun-data-charts v-if="showRing" type="ring" :opts="ringOpts" :chartData="ringChartData" />
				</view>

				<view class="charts-item-description">
					<view class="charts-item-key">
						<view class="charts-item-color"></view>
						<view class="charts-item-name">新建项目</view>
					</view>
					<view class="charts-item-value">{{numNew}}</view>
				</view>

				<view class="charts-item-description">
					<view class="charts-item-key">
						<view class="charts-item-color"></view>
						<view class="charts-item-name">续建项目</view>
					</view>
					<view class="charts-item-value">{{numOld}}</view>
				</view>

				<view class="charts-item-description">
					<view class="charts-item-key">
						<view class="charts-item-color"></view>
						<view class="charts-item-name">储备项目</view>
					</view>
					<view class="charts-item-value">{{numNo}}</view>
				</view>
			</view>

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

				<view class="charts-item-text">建设地点</view>
				<view class="charts-item-text">投资占比</view>
			</view>
		</view>

		<!-- 逾期提醒 -->
		<!-- 	<view class="overdue">
			<view class="overdue-item" @click="goToPage('/pages/overdue/index')">
				<view class="overdue-icon overdue-will">
					<view class="badge-box">
						<u-badge class="badge-num" type="error" max="99" :value="overdueWill"></u-badge>
					</view>
				</view>

				<view class="overdue-item-text">
					预期提醒
					<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:20rpx"></u-icon>
				</view>
			</view>

			<view class="overdue-item" @click="goToPage('/pages/overdue/overdued/index')">
				<view class="overdue-icon overdued">
					<view class="badge-box">
						<u-badge class="badge-num" type="error" max="99" :value="overdued"></u-badge>
					</view>
				</view>

				<view class="overdue-item-text">
					已逾期
					<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:20rpx"></u-icon>
				</view>
			</view>
		</view>
 -->
		<!-- 周报日报年度计划 -->
		<!-- 	<view v-if="roles.includes('811')" class="report">
			<view v-if="roles.includes('8112')" class="report-item" @click="goToPage('/pages/weekly/index','8112')">
				<view class="report-icon weekly"></view>
				<view class="report-item-text">周报</view>
			</view>

			<view v-if="roles.includes('8113')" class="report-item" @click="goToPage('/pages/monthly/index','8113')">
				<view class="report-icon monthly"></view>
				<view class="report-item-text">月报</view>
			</view>

			<view v-if="roles.includes('8111')" class="report-item" @click="goToPage('/pages/yearly/index','8111')">
				<view class="report-icon yearly"></view>
				<view class="report-item-text">年度计划</view>
			</view>
		</view>-->

		<!-- 中部间隔 -->
		<view class="gap-line"></view>



		<!-- 底部间隔 -->
		<view class="gap-bottom"></view>

		<!-- 周报月报弹窗 -->
		<u-popup :show="popupShow" :round="20" @close="popupClose()" mode="center" closeable>
			<view class="remind-box">
				<text class="remind-title">提示</text>

				<view class="remind-card" v-for="(item,index) in unWriteList" :key="index">
					<view class="remind-item">
						<view class="remind-item-name">类型</view>
						<view class="remind-item-content">{{item.kind==='1'?'缺失周报':'缺失月报'}}</view>
					</view>

					<view class="remind-item">
						<view class="remind-item-name">项目名称</view>
						<view class="remind-item-content">{{item.sub_name || '--'}}</view>
					</view>

					<view class="remind-item">
						<view class="remind-item-name">说明</view>
						<view class="remind-item-content">{{item.remark || '--'}}</view>
					</view>

					<view class="remind-item">
						<view class="remind-item-btn" @click="goToWriteReport(item)">
							{{item.kind==='1'?'填写周报':'填写月报'}}
						</view>
					</view>

					<view class="remind-count">
						{{index + 1}}/{{unWriteListTotal}}
					</view>
				</view>
			</view>
		</u-popup>

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

		<!-- 行业选择 -->
		<u-picker :show="kindShow" :columns="kindColumns" @confirm="kindClose" @cancel="kindClose" @close="kindClose"
			closeOnClickOverlay></u-picker>

		<!-- 地点选择 -->
		<u-picker :show="areaShow" :columns="areaColumns" @confirm="areaClose" @cancel="areaClose" @close="areaClose"
			closeOnClickOverlay></u-picker>
	</view>
</template>

<style lang="scss" scoped>
	@font-face {
		font-family: TITLETEXT;
		src: url('@/font/RuiZiAoYunJingShenPinBoJianMianFei-Shan(REEJI-PinboGB-Flash)-2.ttf');
	}

	page {
		height: 100%;
		background-color: #F9FBFF;
	}

	.container {
		background: #F9FBFF;
	}

	.title-content {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 190rpx;
		padding-top: 100rpx;
		background-color: #1763E7;
		z-index: 1;

		.title {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			font-weight: 700;
			color: #FFF;

			.title-search {
				position: absolute;
				right: 3%;
				width: 46rpx;
				height: 46rpx;
				background-image: url("@/static/search.png");
				background-size: 100% 100%;
			}
		}


	}

	.search {
		display: flex;
		justify-content: space-between;
		width: 92%;
		height: 68rpx;
		margin: 32rpx auto 44rpx;

		.search-input {
			display: flex;
			align-items: center;
			width: 592rpx;
			height: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			text-align: left;
			background-color: #fff;
			border-radius: 16rpx;

			.search-icon {
				width: 28rpx;
				height: 32rpx;
				margin-right: 26rpx;
				background-image: url('@/static/search-black.png');
				background-size: 100% 100%;
			}
		}

		.search-focus {
			width: 50rpx;
			height: 100%;
			font-size: 24rpx;
			color: #fff;
			font-weight: 400;
			line-height: 30rpx;

			.search-focus-icon {
				width: 36rpx;
				height: 32rpx;
				margin: 0 auto 10rpx;
				background-image: url('@/static/focus.png');
				background-size: 100% 100%;
			}
		}
	}

	.top-blue {
		width: 100%;
		height: 722rpx;
		padding-top: 288rpx;
		margin-bottom: 82rpx;
		background: #1763E7;
		border-radius: 0 0 40rpx 40rpx;
	}

	.announcementList {
		width: 92%;
		height: 72rpx;
		margin: 0 auto 32rpx;
		padding: 10rpx 0;
		color: #FF8D02;
		background-color: #FFF7DC;
		border-radius: 26rpx;

		.announcementList-text {
			margin-bottom: 18rpx;
			font-size: 28rpx;
		}
	}

	::v-deep .u-notice-bar {
		width: 100%;
		// padding: 0;
		border-radius: 19rpx;
	}

	::v-deep .u-notice__swiper__item__text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.special-funcs {
		display: flex;
		justify-content: space-between;
		width: 92%;
		height: 210rpx;
		margin: 50rpx auto 32rpx;
		background-size: 100% 100%;

		.special-func-item {
			width: 200rpx;
			height: 210rpx;
			padding: 34rpx 18rpx;
			box-sizing: border-box;
			background-size: 100% 100%;

			.special-func-title {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
			}

			.special-func-name {
				color: #FFFFFF;
				line-height: 34rpx;
				font-size: 32rpx;
				font-family: TITLETEXT;
			}
		}

		.gov {
			background-image: url('@/static/special-gov.png');
		}

		.todo {
			background-image: url('@/static/special-todo.png');
		}

		.images {
			background-image: url('@/static/special-image.png');
		}
	}

	.project-info-select {
		display: flex;
		justify-content: space-between;
		width: calc(100% - 48rpx);
		height: 80rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);

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

		.border {
			border-left: 3rpx solid #EAF0FD;
			border-right: 3rpx solid #EAF0FD;
			;
		}
	}

	.project-info {
		width: calc(100% - 48rpx);
		min-height: 326rpx;
		margin: 0 auto 25rpx;
		border-radius: 28rpx;
		background-color: #F9FBFF;
		border: 2rpx solid #C1CEED;
		overflow: hidden;

		.project-num-box {
			width: 100%;

			.project-num {
				width: 100%;
				height: 222rpx;
				padding: 40rpx 32rpx;
				box-sizing: border-box;
				border-bottom: 3rpx solid #EAF0FD;
			}
		}

		.project-num-title {
			display: flex;
			justify-content: space-between;
			margin-bottom: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #E49F15;
		}

		.blue {
			color: #1763E7
		}

		.project-num-minbox {
			display: flex;
		}

		.project-num-item {
			flex: 1;
			margin: auto 0;
			font-size: 24rpx;
			color: #343437;
			text-align: center;

			.project-num-value {
				margin-bottom: 8rpx;
				font-size: 36rpx;
				color: #343437;
				font-weight: 700;
			}
		}

		.project-process {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 108rpx;
			padding: 0 36rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #4B17E7;

			.line-progress {
				width: 50%;
			}

			.percent {
				color: #4B17E7;
			}
		}
	}

	.charts {
		display: flex;
		justify-content: space-between;
		width: calc(100% - 48rpx);
		height: 438rpx;
		margin: 0 auto 54rpx;
		gap: 30rpx;

		.charts-item {
			width: 336rpx;
			height: 100%;
			padding: 22rpx 32rpx;
			box-sizing: border-box;
			border-radius: 40rpx;
			border: 3rpx solid rgba(200, 216, 247, 0.302);

			.charts-item-title {
				font-size: 24rpx;
				color: #343437;
			}

			.charts-item-ring {
				height: 250rpx;
				margin: 0 auto;
			}

			.charts-item-pie {
				width: 100%;
				height: 300rpx;
				margin: 0 auto;
			}

			.charts-item-text {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #3D3D3D;
			}
		}
	}

	.charts-item-description {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 4rpx 0;
		font-size: 24rpx;

		.charts-item-key {
			display: flex;
			align-items: center;
		}

		.charts-item-color {
			width: 24rpx;
			height: 24rpx;
			margin-right: 16rpx;
			background: #3E76FC;
			border-radius: 6rpx;
		}

		.charts-item-name {
			color: #82828C;
		}

		.charts-item-value {
			font-weight: 500;
			color: #343437;
		}
	}

	.overdue {
		display: flex;
		justify-content: space-between;
		width: 92%;
		height: 136rpx;
		margin: 25rpx auto;
		border-radius: 28rpx;
		backdrop-filter: blur(40rpx);
	}

	.overdue-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 328rpx;
		height: 136rpx;
		padding: 0 28rpx 0 44rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		color: #001D4F;
		font-weight: 400;
		font-family: TITLETEXT;
		background-color: #fff;
		border-radius: 28rpx;

		.overdue-icon {
			background-size: 100% 100%;
			background-position: center center;
		}

		.overdue-will {
			width: 52rpx;
			height: 53rpx;
			background-image: url('@/static/overdue-warn.png');

			.badge-num {
				position: absolute;
				top: 40rpx;
				right: -36rpx;
			}
		}

		.overdued {
			width: 61rpx;
			height: 54rpx;
			background-image: url('@/static/overdue.png');

			.badge-num {
				position: absolute;
				top: 40rpx;
				right: -36rpx
			}
		}

		.badge-box {
			position: relative;
		}

		.overdue-item-text {
			display: flex;
			align-items: center;
		}
	}

	.report {
		display: flex;
		justify-content: space-between;
		width: 92%;
		margin: 25rpx auto 0;
		padding: 0 78rpx;
		height: 164rpx;
		border-radius: 28rpx;
		background: #fff;
	}

	.report-item {
		width: 128rpx;
		height: 142rpx;
		margin: auto 0;
		text-align: center;

		.report-icon {
			width: 96rpx;
			height: 96rpx;
			margin: 0 auto;
			background-size: 100% 100%;
		}

		.weekly {
			background-image: url('@/static/icon-weekly.svg');
		}

		.monthly {
			background-image: url('@/static/icon-monthly.svg');
		}

		.yearly {
			background-image: url('@/static/icon-yearly.svg');
		}

		.report-item-text {
			margin-top: 10rpx;
			color: #000;
			font-size: 28rpx;
		}
	}

	.gap-line {
		width: 100%;
		height: 20rpx;
		background: #E8ECF4;
	}

	.function-list {
		width: 100%;
		min-height: 100rpx;
		margin: 200rpx auto 0;
		padding: 32rpx;
		box-sizing: border-box;

		.func-kind-title {
			position: relative;
			display: flex;
			align-items: center;
			width: 158rpx;
			height: 48rpx;
			padding-left: 27rpx;
			margin-bottom: 32rpx;
			font-weight: 400;
			color: #001D4F;
			line-height: 30rpx;
			font-size: 32rpx;
			font-family: TITLETEXT;
			background: linear-gradient(90deg, rgba(23, 99, 231, 0.37) 0%, rgba(255, 255, 255, 0) 100%);
			white-space: nowrap;

			.func-kind-icon {
				position: absolute;
				top: 0;
				left: -9rpx;
				width: 18rpx;
				height: 48rpx;
				margin-right: 18rpx;
				background: #1869F6;
				border-radius: 9rpx;
			}
		}

		.grid-item {
			height: 92rpx;
			margin: 18rpx 0 46rpx;
			font-size: 24rpx;
			color: #343437;

			.badge-num {
				position: absolute;
				top: 0;
				right: 25rpx;
			}

			.grid-item-icon {
				width: 56rpx;
				height: 56rpx;
				margin: 0 auto 6rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.bottom-item {
			margin-bottom: 0;
		}
	}

	.gap-bottom {
		width: 100%;
		height: 100rpx;
	}

	.remind-box {
		width: 672rpx;
		min-height: 464rpx;
		max-height: 858rpx;
		padding: 16rpx 40rpx;
		overflow: hidden;
		overflow-y: scroll;

		.remind-title {
			color: #FF4800;
			font-size: 36rpx;
		}

		.remind-card {
			position: relative;
			min-height: 376rpx;
			padding-bottom: 32rpx;
			border-bottom: 2rpx solid #D8D8D8;

			.remind-count {
				position: absolute;
				top: 0;
				right: -40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 134rpx;
				height: 64rpx;
				font-size: 32rpx;
				color: #1869F6;
				background: #CEE0FF;
				border-radius: 32rpx 0rpx 0rpx 32rpx;
			}
		}

		.remind-item {
			display: flex;
			align-items: flex-start;
			margin-top: 40rpx;
			font-size: 32rpx;

			.remind-item-name {
				min-width: 192rpx;
				color: #9E9E9E;
			}

			.remind-item-content {
				color: #343437;
				float: left;
			}

			.remind-item-btn {
				width: 100%;
				height: 84rpx;
				line-height: 84rpx;
				font-size: 36rpx;
				color: #fff;
				text-align: center;
				background: #1869F6;
				border-radius: 16rpx;
			}
		}
	}

	::v-deep .u-popup__content {
		overflow: hidden;
	}
</style>