subject_gxj/xj_project_app_2024_2_18/pages/analysis/index.vue

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

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

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

	import {
		getXMXZlist,
	} from "@/api/home.js";

	import {
		getIndustyRateValueData,
		getIndustyRateAmtData,
		getAreaRateData,
		getYearRateData
	} from "@/api/work/analysis.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];
		yearShow.value = false;
	}

	// 建设地点
	let jsddFull = [];
	let jsddColumns = ref([]);
	const getJSDD = function() {
		getJSDDlist().then(res => {
			jsddFull = res.data.list;
			jsddColumns.value = [res.data.list.map(item => item.value)];
		})
	};
	let jsddShow = ref(false);
	const jsddShowChoose = function() {
		jsddShow.value = true;
	}
	const jsddClose = function(e) {
		if (e) searchInfo.subjectId = e.value[0];
		jsddShow.value = false;
	}

	// 项目类型
	let xmlxFull = [];
	let xmlxColumns = ref([]);
	const getXMLX = function() {
		getXMLXlist().then(res => {
			xmlxFull = res.data.list;
			xmlxColumns.value = [res.data.list.map(item => item.value)];
		})
	};
	let xmlxShow = ref(false);
	const xmlxShowChoose = function() {
		xmlxShow.value = true;
	}
	const xmlxClose = function(e) {
		if (e) searchInfo.kind = e.value[0];
		xmlxShow.value = false;
	}

	// 项目性质
	let xmxzFull = [];
	let xmxzColumns = ref([]);
	const getXMXZ = () => {
		getXMXZlist().then(res => {
			xmxzFull = res.data.list;
			xmxzFull.unshift({
				key: null,
				value: "所有性质"
			});

			xmxzFull = xmxzFull.filter(item => item.value !== "储备项目");
			xmxzColumns.value = [xmxzFull.map(item => item.value)];
		})
	};
	let xmxzShow = ref(false);
	const xmxzShowChoose = () => {
		xmxzShow.value = true;
	}
	const xmxzClose = e => {
		if (e) searchInfo.propKind = e.value[0];
		xmxzShow.value = false;
	}

	// 是否隐藏
	let hideFull = [{
		key: null,
		value: "所有"
	}, {
		key: 1,
		value: "隐藏"
	}, {
		key: 0,
		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];
		hideShow.value = false;
	}

	// 行业分类
	let hyflFull = []
	let hyflColumns = ref([])
	const getHYFL = () => {
		getHYFLlist().then(res => {
			hyflFull = res.data.list;
			hyflFull.unshift({
				key: null,
				value: "所有分类"
			});

			hyflColumns.value = [res.data.list.map(item => item.value)];
		})
	}
	let hyflShow = ref(false)
	const hyflShowChoose = () => {
		hyflShow.value = true
	}
	const hyflClose = e => {
		if (e) searchInfo.hyfl = e.value[0];
		hyflShow.value = false
	}

	// 亿元项目
	let yTypeFull = [{
			key: null,
			value: "全部"
		},
		{
			key: 1,
			value: "亿元以下"
		},
		{
			key: 2,
			value: "1-5亿"
		},
		{
			key: 3,
			value: "5-10亿"
		},
		{
			key: 4,
			value: "10亿以上"
		},
	]
	let yTypeColumns = ref([
		["全部", "亿元以下", "1-5亿", "5-10亿", "10亿以上"]
	])
	let yTypeShow = ref(false)
	const yTypeShowChoose = () => {
		yTypeShow.value = true
	}
	const yTypeClose = e => {
		if (e) searchInfo.yType = e.value[0];
		yTypeShow.value = false
	}

	// 取值模式
	let modeFull = [{
			key: 1,
			value: "实际值"
		},
		{
			key: 2,
			value: "预测值"
		}
	]
	let modeColumns = ref([
		["实际值", "预测值"]
	])
	let modeShow = ref(false)
	const modeShowChoose = () => {
		modeShow.value = true
	}
	const modeClose = e => {
		if (e) searchInfo.mode = e.value[0];
		modeShow.value = false
	}

	// 资金来源
	let zjlyFull = []
	let zjlyColumns = ref([])
	const getZJLY = () => {
		getZJLYlist().then(res => {
			zjlyFull = res.data.list;
			zjlyFull.unshift({
				key: null,
				value: "所有来源"
			});

			zjlyColumns.value = [res.data.list.map(item => item.value)];
		})
	}
	let zjlyShow = ref(false)
	const zjlyShowChoose = () => {
		zjlyShow.value = true
	}
	const zjlyClose = e => {
		if (e) searchInfo.zjly = e.value[0];
		zjlyShow.value = false
	}

	// 同比/环比
	let yearOnYearFull = [{
		key: 1,
		value: "同比"
	}, {
		key: 2,
		value: "环比"
	}];
	let yearOnYearColumns = ref([
		["同比", "环比"]
	])
	let yearOnYearShow = ref(false);
	const yearOnYearShowChoose = function() {
		yearOnYearShow.value = true;
	}
	const yearOnYearClose = function(e) {
		if (e) searchInfo.kindType = e.value[0];
		yearOnYearShow.value = false;
	}

	// 页面主题
	let titleMark = null;
	let titleText = ref("");
	let titleEnum = {
		"industyRateValue": {
			text: "行业占比分析-数量",
			showArray: [{
				text: "行业分类",
				key: "title",
				width: "200rpx"
			}, {
				text: "项目数量",
				key: "num",
				width: "100rpx",
				through: true,
			}, {
				text: "占比（%）",
				key: "rage",
				width: "100rpx"
			}],
			emitFunction: function(data) {
				getIndustryRateValue(data);
			}
		},
		"industyRateAmt": {
			text: "行业占比分析-金额",
			showArray: [{
				text: "行业分类",
				key: "title",
				width: "200rpx"
			}, {
				text: "投资金额（万元）",
				key: "num",
				width: "100rpx",
				through: true,
			}, {
				text: "占比（%）",
				key: "rage",
				width: "100rpx"
			}],
			emitFunction: function(data) {
				getIndustryAmtValue(data);
			}
		},
		"areaRate": {
			text: "区县占比分析",
			showArray: [{
					text: "建设地点",
					key: "jsddName",
					width: "150rpx",
					through: true,
				},
				// {
				// 	text: "项目数",
				// 	key: "totalNum",
				// 	width: "150rpx",
				// },
				{
					text: "投资完成率（%）",
					key: "amtRate",
					width: "180rpx",
					through: true,
				}, {
					text: "开工率（%）",
					key: "beginRate",
					width: "150rpx",
					through: true,
				}
			],
			emitFunction: function(data) {
				getAreaRateValue(data);
			}
		},
		"yearRate": {
			text: "年度投资分析",
			showArray: [{
				text: "月份",
				key: "strmonth",
			}, {
				text: "上年度投资（万元）",
				key: "amt_last1",
			}, {
				text: "本年度投资（万元）",
				key: "amt_cur",
			}, {
				text: "增速（%）",
				key: "num_bl",
			}],
			emitFunction: function(data) {
				getYearRateValue(data)
			}
		},
	};

	// 展示列表
	let showList = ref([]);
	const combineshowList = () => {
		let chooseList = titleEnum[titleMark].showArray;

		if (titleMark === "yearRate") {
			if (searchInfo.kindType === "同比") {
				chooseList = [{
					text: "月份",
					key: "strmonth",
					width: "100rpx"
				}, {
					text: "上年度投资（万元）",
					key: "amt_last1",
					width: "200rpx"
				}, {
					text: "本年度投资（万元）",
					key: "amt_cur",
					width: "200rpx"
				}, {
					text: "增速（%）",
					key: "num_bl",
					width: "100rpx"
				}]
			} else { //环比
				chooseList = [{
					text: "月份",
					key: "strmonth",
					width: "100rpx"
				}, {
					text: "上月度投资（万元）",
					key: "amt_last1",
					width: "200rpx"
				}, {
					text: "本月度投资（万元）",
					key: "amt_cur",
					width: "200rpx"
				}, {
					text: "增速（%）",
					key: "num_bl",
					width: "100rpx"
				}]
			}
		}

		let tempArr = [];
		for (let i in chooseList) {
			tempArr.push(Object.assign({
				value: null
			}, chooseList[i]));
		}
		showList.value = tempArr;
	}

	// 搜索内容	
	let listTotal = ref(0);
	let itemList = ref([]);
	let searchInfo = reactive({
		year: null, //年度
		subjectId: null, //建设地点
		kind: null, //项目类型
		propKind: null, //项目性质
		isHide: "所有", //是否隐藏,
		hyfl: null, //行业分类，
		yType: null, //亿元项目
		mode: "实际值", //取值模式，
		kindType: "同比", //同比/环比
	});

	const getList = () => {
		let params = {
			year: searchInfo.year, //年度
			subjectId: jsddFull.find(item => item.value === searchInfo.subjectId)?.key, //建设地点
			kind: xmlxFull.find(item => item.value === searchInfo.kind)?.key, //项目类型
			propKind: xmxzFull.find(item => item.value === searchInfo.propKind)?.key, //项目性质
			isHide: hideFull.find(item => item.value === searchInfo.isHide)?.key, //是否隐藏
			hyfl: hyflFull.find(item => item.value === searchInfo.hyfl)?.key, //行业分类
			yType: yTypeFull.find(item => item.value === searchInfo.yType)?.key, //亿元项目
			mode: modeFull.find(item => item.value === searchInfo.mode)?.key, //取值模式
			zjly: zjlyFull.find(item => item.value === searchInfo.zjly)?.key, //资金来源
			kindType: yearOnYearFull.find(item => item.value === searchInfo.kindType)?.key, //同比/环比
		};

		if (titleMark === "yearRate") combineshowList()
		titleEnum[titleMark].emitFunction(params);
	}

	// 行业占比分析-数量
	const getIndustryRateValue = params => {
		getIndustyRateValueData(params).then(res => {
			itemList.value = res.data.list;
			listTotal.value = res.data.list.length;
			createPieData(res.data.list);
		})
	}

	// 行业占比分析-金额
	const getIndustryAmtValue = params => {
		getIndustyRateAmtData(params).then(res => {
			itemList.value = res.data.list;
			listTotal.value = res.data.list.length;
			createPieData(res.data.list);
		})
	}

	// 区县占比分析
	const getAreaRateValue = params => {
		getAreaRateData(params).then(res => {
			itemList.value = res.data.list;
			listTotal.value = res.data.list.length;
			createPieData(res.data.list, "jsddName", "totalNum", true);
		})
	}

	// 年度投资分析
	const getYearRateValue = params => {
		getYearRateData(params).then(res => {
			itemList.value = res.data.list;
			listTotal.value = res.data.list.length;
			createLineData(res.data.list);
		})
	}

	// 穿透
	const goToProjectList = (item, keyword) => {
		// 判断是否有操作
		let chooseList = titleEnum[titleMark].showArray;
		let haveThroughOption = chooseList.find(item => item.key === keyword)?.through;
		if (!haveThroughOption) return;

		let params = {
			year: searchInfo.year, //年度
			subjectId: jsddFull.find(item => item.value === searchInfo.subjectId)?.key, //建设地点
			kind: xmlxFull.find(item => item.value === searchInfo.kind)?.key, //项目类型
			propKind: xmxzFull.find(item => item.value === searchInfo.propKind)?.key, //项目性质
			isHide: hideFull.find(item => item.value === searchInfo.isHide)?.key, //是否隐藏
			zbCheck: 1
		};

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

		if (titleMark === "industyRateValue" || titleMark === "industyRateAmt") {
			params.indusKind = item.indusKind;
			params.queryType = 0;
		}

		if (titleMark === "areaRate") {
			params.subjectId = item.subjectId;
			params.queryType = 0;
		}

		let url = "/pages/analysis/projectList/index?";
		for (let i in params) {
			let item = null
			if (!((params[i] ?? "") === "")) {
				item = `${i}=${params[i]}&`;
			} else {
				item = `${i}=&`;
			}

			url = url += item;
		};

		uni.navigateTo({
			url
		})
	}

	// 饼图
	let showPie = ref(false);
	const pieOpts = {
		color: ["#90B5F4", "#6497EE", "#1869F6", "#FF8229", "#FFAC71"],
		padding: [0, 5, 0, 5],
		enableScroll: false,
		legend: {
			show: false
		},
		extra: {
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				border: false,
				offsetAngle: -90
			}
		}
	}
	let pieChartData = ref({
		series: [{
			data: []
		}]
	})
	const createPieData = (list, name = "title", unit = "num", isDoublePie = false) => {
		// 饼状图数据
		let pieList = []
		for (let i in list) {
			pieList.push({
				"name": list[i][name],
				"value": list[i][unit] ?? 0,
				"labelShow": false
			})
		}
		pieChartData.value.series[0].data = pieList;
		if (isDoublePie) {
			createDoublePieData(list);
		} else {
			showPie.value = true;
		}
	}

	// 双饼
	let itemListOrderByAmt = ref([])
	let showDoublePie = ref(false);
	const pieDoubleOpts = {
		color: ["#90B5F4", "#6497EE", "#1869F6", "#FF8229", "#FFAC71"],
		padding: [0, 5, 0, 5],
		enableScroll: false,
		legend: {
			show: false
		},
		extra: {
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				border: false,
				offsetAngle: -90,
				customRadius: 50,
			}
		}
	}
	let doublePieChartData = ref({
		series: [{
			data: []
		}]
	})
	const createDoublePieData = list => {
		itemListOrderByAmt.value = JSON.parse(JSON.stringify(itemList.value));
		itemListOrderByAmt.value.sort(sortByValue('amt', -1));



		let pieList = [];
		for (let i in itemListOrderByAmt.value) {
			pieList.push({
				"name": itemListOrderByAmt.value[i].jsddName,
				"value": itemListOrderByAmt.value[i].amt ?? 0,
				"labelShow": false
			})
		}
		doublePieChartData.value.series[0].data = pieList;


		showDoublePie.value = true;
	}

	const sortByValue = (attr, rev) => {
		if (rev == undefined) {
			rev = 1
		} else {
			(rev) ? 1: -1;
		}
		return function(a, b) {
			a = a[attr];
			b = b[attr];
			if (a < b) {
				return rev * -1
			}
			if (a > b) {
				return rev * 1
			}
			return 0;
		}
	}


	// 折线图
	let showLine = ref(false);
	const LineOpts = {
		color: ["#1869F6", "#000"],
		touchMoveLimit: 24,
		enableScroll: true,
		dataLabel: false,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
			scrollShow: true,
			itemCount: 6,
		},
		yAxis: {
			showTitle: true,
			gridType: "dash",
			data: [{
				title: "增速（%）",
			}]
		},
		extra: {
			column: {
				type: "group",
				width: 14,
				barBorderRadius: [12, 12, 12, 12],
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
			},
			line: {
				activeType: "none"
			},
			markLine: {
				// type: "dash",
				data: [{
					value: 0,
					// labelText: "0",
					lineColor: "#000"
				}]
			}
		}
	}
	let LineChartData = ref({
		categories: [],
		series: [{
			name: "增速（%）",
			data: []
		}]
	})
	const createLineData = list => {
		let categoriesList = []
		let seriesList = []
		for (let i in list) {
			categoriesList.push(list[i].strmonth + "月")
			seriesList.push(list[i].num_bl)
		}
		LineChartData.value.categories = categoriesList.length > 0 ? categoriesList : ["无数据"]
		LineChartData.value.series[0].data = seriesList;

		showLine.value = true;
	}

	// 取整
	const filterInt = value => {
		let expectNull = Number(value ?? 0);
		return parseInt(expectNull);
	}

	onLoad(options => {
		// 标题
		titleMark = options.type;
		titleText.value = titleEnum[titleMark].text;
		// 列表
		combineshowList();
		// 年度
		let now = new Date();
		searchInfo.year = now.getFullYear();
		defaultIndex.value = [searchInfo.year - 2000];
		// 建设地点
		getJSDD();
		// 项目类型
		getXMLX();
		// 项目性质
		getXMXZ();
		// 页面列表
		getList();

		if (titleMark === "yearRate") {
			// 行业分类
			getHYFL();
			// 资金来源
			getZJLY();
		}
	})
</script>

<template>
	<view class="container">
		<page-title>{{titleText}}</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="jsddShowChoose()">
					<view class="card-item-name">建设地点</view>
					<view class="card-item-description">
						<view v-if="searchInfo.subjectId">{{searchInfo.subjectId}}</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="xmlxShowChoose()">
					<view class="card-item-name">项目类型</view>
					<view class="card-item-description">
						<view v-if="searchInfo.kind">{{searchInfo.kind}}</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="xmxzShowChoose()">
					<view class="card-item-name">项目性质</view>
					<view class="card-item-description">
						<view v-if="searchInfo.propKind">{{searchInfo.propKind}}</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" v-if="titleMark === 'yearRate'" @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" v-if="titleMark === 'yearRate'" @click="zjlyShowChoose()">
					<view class="card-item-name">资金来源</view>
					<view class="card-item-description">
						<view v-if="searchInfo.zjly">{{searchInfo.zjly}}</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" v-if="titleMark === 'yearRate'" @click="yTypeShowChoose()">
					<view class="card-item-name">亿元项目</view>
					<view class="card-item-description">
						<view v-if="searchInfo.yType">{{searchInfo.yType}}</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 class="card-item" v-if="titleMark === 'yearRate'" @click="modeShowChoose()">
					<view class="card-item-name">取值模式</view>
					<view class="card-item-description">
						<view v-if="searchInfo.mode">{{searchInfo.mode}}</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" v-if="titleMark === 'yearRate'" @click="yearOnYearShowChoose()">
					<view class="card-item-name">同比/环比</view>
					<view class="card-item-description">
						<view v-if="searchInfo.kindType">{{searchInfo.kindType}}</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="getList()">确定</view>

			<view class="double-pie" v-if="showDoublePie">
				<view class="double-pie-area">
					<view class="double-pie-item">
						<qiun-data-charts type="pie" :opts="pieDoubleOpts" :chartData="pieChartData" tooltipFormat="tooltipDemo2" />
					</view>

					<view class="double-pie-item">
						<qiun-data-charts type="pie" :opts="pieDoubleOpts" :chartData="doublePieChartData"
							tooltipFormat="tooltipDemo3" />
					</view>
				</view>

				<view class="double-pie-description">
					<view class="double-pie-descriptionItem">项目数</view>
					<view class="double-pie-descriptionItem">实际投资金额</view>
				</view>

				<view class="double-pie-data">
					<view class="double-pie-textArea">
						<view class="double-pie-textItem" v-for="(item,index) in itemList" :key="index">
							<view class="double-pie-name">{{item.jsddName ?? "--"}}</view>
							<view class="double-pie-project">{{item.totalNum ?? "--"}}个</view>
						</view>
					</view>

					<view class="double-pie-textArea">
						<view class="double-pie-textItem" v-for="(item,index) in itemListOrderByAmt" :key="index">
							<view class="double-pie-name">{{item.jsddName ?? "--"}}</view>
							<view class="double-pie-amt">{{filterInt(item.amt)}}万元</view>
						</view>
					</view>
				</view>
			</view>

			<view class="pie" v-if="showPie">
				<qiun-data-charts v-if="titleMark==='industyRateValue' || titleMark==='areaRate'" type="pie" :opts="pieOpts"
					:chartData="pieChartData" tooltipFormat="tooltipDemo2" />
				<qiun-data-charts v-if="titleMark==='industyRateAmt'" type="pie" :opts="pieOpts" :chartData="pieChartData"
					tooltipFormat="tooltipDemo3" />
			</view>

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

			<uni-table stripe border 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 itemList" :key="index">
					<uni-td align="center" v-for="(showItem,showIndex) in showList" :index="showIndex"
						@click="goToProjectList(item,showItem.key)">
						{{item[showItem.key] ?? "--"}}
					</uni-td>
				</uni-tr>
			</uni-table>

			<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="jsddShow" :columns="jsddColumns" @confirm="jsddClose" @cancel="jsddClose" @close="jsddClose"
			closeOnClickOverlay></u-picker>
		<!-- 项目类型 -->
		<u-picker :show="xmlxShow" :columns="xmlxColumns" @confirm="xmlxClose" @cancel="xmlxClose" @close="xmlxClose"
			closeOnClickOverlay></u-picker>
		<!-- 项目性质 -->
		<u-picker :show="xmxzShow" :columns="xmxzColumns" @confirm="xmxzClose" @cancel="xmxzClose" @close="xmxzClose"
			closeOnClickOverlay></u-picker>
		<!-- 是否隐藏 -->
		<u-picker :show="hideShow" :columns="hideColumns" @confirm="hideClose" @cancel="hideClose" @close="hideClose"
			closeOnClickOverlay></u-picker>
		<!-- 行业分类 -->
		<u-picker :show="hyflShow" :columns="hyflColumns" @confirm="hyflClose" @cancel="hyflClose" @close="hyflClose"
			closeOnClickOverlay></u-picker>
		<!-- 亿元项目 -->
		<u-picker :show="yTypeShow" :columns="yTypeColumns" @confirm="yTypeClose" @cancel="yTypeClose" @close="yTypeClose"
			closeOnClickOverlay></u-picker>
		<!-- 取值模式 -->
		<u-picker :show="modeShow" :columns="modeColumns" @confirm="modeClose" @cancel="modeClose" @close="modeClose"
			closeOnClickOverlay></u-picker>
		<!-- 资金来源 -->
		<u-picker :show="zjlyShow" :columns="zjlyColumns" @confirm="zjlyClose" @cancel="zjlyClose" @close="zjlyClose"
			closeOnClickOverlay></u-picker>
		<!-- 同比/环比 -->
		<u-picker :show="yearOnYearShow" :columns="yearOnYearColumns" @confirm="yearOnYearClose" @cancel="yearOnYearClose"
			@close="yearOnYearClose" closeOnClickOverlay></u-picker>
	</view>
</template>

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

	.card {
		padding-bottom: 60rpx;
	}

	.pie {
		height: 300rpx;
		margin: 0 auto 36rpx;
		background: #EAF0FA;
		border-radius: 40rpx;
	}

	.double-pie {
		min-height: 300rpx;
		margin: 0 auto 36rpx;
		background: #EAF0FA;
		border-radius: 40rpx;

		.double-pie-area {
			display: flex;
			width: 100%;
			height: 300rpx;

			.double-pie-item {
				width: 50%;
				height: 300rpx;
			}
		}

		.double-pie-description {
			display: flex;
			width: 100%;
			margin-bottom: 30rpx;

			.double-pie-descriptionItem {
				width: 50%;
				text-align: center;
			}
		}

		.double-pie-data {
			display: flex;
			width: 100%;
			min-height: 100rpx;
			padding-bottom: 20rpx;
		}

		.double-pie-textArea {
			width: 50%;
		}

		.double-pie-textItem {
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #001643;

			.double-pie-project {
				flex: 1;
				font-weight: 500;
				text-align: right;
				margin-right: 20rpx;
			}

			.double-pie-name {
				flex: 1;
			}

			.double-pie-amt {
				flex: 1;
				font-weight: 500;
				text-align: right;
			}
		}
	}

	.line {
		width: 100%;
		height: 400rpx;
		margin: 0 auto 36rpx;
		background: #FFF;
		border-radius: 40rpx;
		overflow: hidden;
	}

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

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

	::v-deep .uni-table-th,
	.uni-table-td {
		padding: 0;
	}
</style>