yd_qycpfb/jp-mobile/pages/analysiscf/analysiscf.vue

<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true" backUrl="/pages/indexcf/indexcf">
			<block slot="content">数据分析</block>
		</cu-custom>
		<view class="header-line-2">
			<!-- <jp-picker v-model="yqid" rangeKey="label" rangeValue="value" :range="parkList"
				:onChangeNew="changeYQId" empty="选择园区">
			</jp-picker> -->

			<picker @change="changeYQId" :value="yqIndex" :range="showYQList">
				<view class=" picker action">
					<view style="color: #fff;">{{showYQList[yqIndex]}}</view>
				</view>
			</picker>
		</view>

		<view class="header-line">
			<view @click="changeShow(2)" :class="show == 2 ? 'actClass' : ''">楼宇</view>
			<view @click="changeShow(1)" :class="show == 1 ? 'actClass' : ''">统计报表</view>
		</view>
		<view class="page-box" v-show="show != 1">
			<view class="yqshpmfxBox">
				<view class="tab-header">
					<view class="header-name">楼宇税收排名分析</view>
				</view>
				<view class="pmfx-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true" />
				</view>
				<view class="line-box"></view>
				<view class="ssbox">
					<view class="ss-left-box">
						<view class="num">{{ssInfo.yearTax}}<text class="unit">万元</text></view>
						<view style="height: 20rpx;"></view>
						<view class="unit">税收总额</view>
					</view>
					<view class="ss-right-box">
						<view class="right-text-box">
							<view class="num">{{ssInfo.monthrTax}}<text class="unit">万元</text></view>
							<view style="height: 20rpx;"></view>
							<view class="unit">本月税收（占比）</view>
						</view>
						<view class="pie-box">
							<qiun-data-charts type="arcbar" :opts="opts2" :chartData="chartData2" />
						</view>
					</view>
				</view>
			</view>
			<view class="page-center-box">
				<view class="center-left-box">
					<view class="center-title">楼宇入住率排名分析</view>
					<view class="table-line" v-for="(item, index) in rzList" :key="index">
						<view class="index">{{index + 1 }}</view>
						<view class="name">{{item.name}}</view>
						<view class="percent">{{item.value}}%</view>
					</view>
				</view>
				<view class="center-right-box">
					<view class="center-title">楼宇企业数量类型分析</view>
					<view class="right-box-in">
						<qiun-data-charts type="pie" :opts="opts3" :chartData="chartData3" />
					</view>
				</view>
			</view>
			<view class="yqqsBox">
				<view class="tab-header">
					<view class="header-name">楼宇税收趋势分析</view>
					<jp-picker v-model="ssqsLYid" rangeKey="label" rangeValue="value" :range="LYList"
						:onChangeNew="changeSSLYId">

					</jp-picker>
				</view>
				<view class="pmfx-box">
					<qiun-data-charts type="line" :opts="opts4" :chartData="chartDataSSLY" />
				</view>
				<view style="height: 20rpx;"></view>
			</view>

			<view class="yqqsBox">
				<view class="tab-header">
					<view class="header-name">楼宇新增企业月增长量</view>
					<jp-picker v-model="yzlLYid" rangeKey="label" rangeValue="value" :range="LYList"
						:onChangeNew="changeData">
					</jp-picker>
				</view>
				<view class="pmfx-box">
					<qiun-data-charts type="line" :opts="opts4" :chartData="chartDataLLXZL" />
				</view>
				<view style="height: 20rpx;"></view>
			</view>
		</view>
		<view v-show="show == 1">
			<view class="page-box">
				<view class="yqqsBox">
					<view class="tab-header">
						<view class="header-name">园区企业总数统计分析</view>
					</view>
					<view class="pmfx-box">
						<qiun-data-charts type="line" :opts="opts4" :chartData="chartDataYQQYZS" />
					</view>
					<view style="height: 20rpx;"></view>
				</view>
			</view>

			<view class="page-box">
				<view class="yqqsBox">
					<view class="tab-header">
						<view class="header-name">本年度税收额分析</view>
					</view>
					<view class="pmfx-box">
						<qiun-data-charts type="column" :opts="opts" :chartData="BNDSSchartData" :ontouch="true" />
					</view>
					<view style="height: 20rpx;"></view>
				</view>
			</view>

			<view class="page-box">
				<view class="yqqsBox">
					<view class="tab-header">
						<view class="header-name">本年度销售额分析</view>
					</view>
					<view class="pmfx-box">
						<qiun-data-charts type="column" :opts="opts" :chartData="BNDXSchartData" :ontouch="true" />
					</view>
					<view style="height: 20rpx;"></view>
				</view>
			</view>

			<view class="page-box">
				<view class="yqqsBox">
					<view class="tab-header">
						<view class="header-name">园区企业参保人数统计分析</view>
					</view>
					<view class="pmfx-box">
						<qiun-data-charts type="line" :opts="opts4" :chartData="chartDataYQSBRS" />
					</view>
					<view style="height: 20rpx;"></view>
				</view>
			</view>

			<view class="page-box">
				<view class="yqqsBox">
					<view class="tab-header">
						<view class="header-name">人才分析</view>
					</view>
					<view class="pmfx-box">
						<qiun-data-charts type="pie" :opts="optsSS" :chartData="chartDataSBRS" />
					</view>
					<view style="height: 20rpx;"></view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import loginService from '@/api/auth/loginService.js'
	export default {

		components: {

		},
		data() {
			return {
				yqIndex: 0,
				show: 2,
				parkList: [],
				LYList: [],
				ssInfo: {},
				rzList: [],
				ssqsLYid: '',
				yzlLYid: '',
				yqid: '',
				chartData: {},
				BNDSSchartData: {},
				BNDXSchartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1FD094"],
					padding: [15, 15, 0, 5],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},

				chartData2: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts2: {
					color: ["#1890FF"],
					title: {
						name: '',
						fontSize: 0,
					},
					subtitle: {
						name: '',
						fontSize: 0,
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 4,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},

				chartData3: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts3: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: true,
					legend: {
						show: false
					},
					dataLabel: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				chartData4: {},
				chartDataSSLY: {},
				chartDataLLXZL: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts4: {
					color: ["#1890FF"],
					padding: [15, 10, 30, 15],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
						rotateAngle: 45,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				chartDataSBRS: {},
				chartDataYQQYZS: {},
				chartDataYQSBRS: {},
				chartDataSSEFX: {},
				showYQList: [],
				optsSS: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: true,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			}
		},

		created() {
			// this.getParkList()
			// this.getAllparkList()
		},

		mounted() {
			this.AppFirst()
			this.AppFirstAddTotle()
			this.AppFirstAddNwe()
		},

		methods: {
			changeData() {
				this.AppFirstAddNwe()
			},

			getAllparkList() {
				loginService.parkList({
					current: 1,
					size: 1000000,
				}).then(({
					data
				}) => {
					this.parkList = data.records.map((item) => {
						return {
							label: item.parkName,
							value: item.id
						}
					})
					this.showYQList = data.records.map((item) => item.parkName)
					this.yqid = this.parkList[0].value

				}).catch(e => {
					console.log(e)
				})
			},



			changeYQId(e) {
				console.log('更改园区id')
				console.log(e, '================>e')
				this.yqIndex = e.detail.value
				this.yqid = this.parkList[this.yqIndex].value
			},

			changeShow(index) {
				this.show = index
				if (index == 1) {
				this.getStatisticsForPark()
				this.getSaleStatisticsForPark()
				this.getSaleStatisticsForYear2()
				}
			},

			getSaleStatisticsForYear2() {
				
					
						let res = {
							categories: [2020, 2021, 2022, 2023, 2024],
							series: [{
								name: "税收",
								data: [1020, 980, 1011, 947, 1024]
							}]
						};
						this.BNDSSchartData = JSON.parse(JSON.stringify(res));

						let res2 = {
							categories: [2020, 2021, 2022, 2023, 2024],
							series: [{
								name: "销售",
								data: [2020, 1980, 3011, 1947, 2324]
							}]
						};
						this.BNDXSchartData = JSON.parse(JSON.stringify(res2));
					
			},



			// 楼宇新增企业月增量
			AppFirstAddNwe() {
				
				let res4 = {
					categories: ['1月', '2月', '3月', '4月'],
					series: [{
						name: "新增企业数",
						data: [5,0,2,7]
					}]
				};
				this.chartDataLLXZL = JSON.parse(JSON.stringify(res4));
				
			},



			changeSSLYId() {
				this.AppFirstAddTotle()
			},

			// 税收
			AppFirstAddTotle() {
				
					
					let res4 = {
						categories: ['1月', '2月', '3月', '4月'],
						series: [{
							name: "税收",
							data: [345,125,467,789]
						}]
					};
					this.chartDataSSLY = JSON.parse(JSON.stringify(res4));
				
			},

			getSaleStatisticsForPark() {
				
					let peopelList = [{
							name: '博士生',
							value: 29,
						},
						{
							name: '硕士生',
							value: 58,
						},
						{
							name: '本科生',
							value: 472,
						},
						{
							name: '本科以下',
							value: 289,
						},
					]
					let res2 = {
						series: [{
							data: peopelList
						}]
					};
					this.chartDataSBRS = JSON.parse(JSON.stringify(res2));
				
			},

			getParkList() {
				loginService.list({
					current: 1,
					size: 1000000,
				}).then(({
					data
				}) => {
					this.LYList = data.records.map((item) => {
						return {
							label: item.buildingName,
							value: item.id
						}
					})
					this.ssqsLYid = this.LYList[0].value
					this.yzlLYid = this.LYList[0].value
					
				}).catch(e => {
					console.log(e)
				})
			},



			AppFirst() {
				let data = [{
					"B9": "1365.24",
					"B4": "638.81",
					"B8": "71.15",
					"B5": "69.44",
					"B10": "2.3"
				}, {
					"percentage": "0",
					"yearTax": "0.0",
					"monthrTax": "0.0"
				}, {
					"B10": "35.92",
					"B4": "36.99",
					"B5": "41.55",
					"B6": "30.38",
					"B8": "81.97",
					"B9": "92.14"
				}, {
					"5": "21.62",
					"5,10": "14.19",
					"1,10": "12.16",
					"1": "4.73",
					"5,12": "4.05",
					"2": "3.38",
					"5,10,16": "2.70",
					"4": "2.03",
					"5,12,13": "2.03",
					"5,10,11": "2.03",
					"5,9": "1.35",
					"5,10,14": "0.68",
					"1,17,18": "0.68",
					"1,12": "0.68",
					"5,1": "0.68",
					"6": "0.68",
					"5,10,9": "0.68",
					"5,17,18": "0.68",
					"7": "0.68",
					"5,15,10": "0.68",
					"5,17": "0.68",
					"5,10,15": "0.68",
					"9": "0.68",
					"1,9": "0.68"
				}];
				let lyssList = data[0]
				let keys = Object.keys(lyssList);
				let values = Object.values(lyssList);
				let res = {
					categories: keys,
					series: [{
						name: "税收",
						data: values
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
				this.ssInfo = data[1]

				let res2 = {
					series: [{
						color: "#2fc25b",
						data: Number(this.ssInfo.percentage).toFixed(2)
					}]
				};
				this.chartData2 = JSON.parse(JSON.stringify(res2));

				let rzList = data[2];
				const rzListNew = [];
				for (const key in rzList) {
					if (rzList.hasOwnProperty(key)) {
						rzListNew.push({
							name: key,
							value: parseFloat(rzList[key]).toFixed(2)
						});
					}
				}
				this.rzList = rzListNew.slice(0, 5)

				let lyslList = data[3]
				let lyslListNew = []
				for (const key in lyslList) {
					if (lyslList.hasOwnProperty(key)) {
						lyslListNew.push({
							'name': this.$dictUtils.getDictLabel("industrial_type", key, '-'),
							'value': parseFloat(lyslList[key]).toFixed(2) * 100
						});
					}
				}

				let res3 = {
					series: [{
						data: lyslListNew
					}]
				}

				this.chartData3 = JSON.parse(JSON.stringify(res3));


			},

			getStatisticsForPark() {
				
					let res = {
						categories: ['亭湖产业园', '数字基地', '环保产业园','光电产业园', '兴泰产业园'],
						series: [{
							name: "企业总数",
							data: [12, 20, 3, 7, 8]
						}]
					};
					this.chartDataYQQYZS = JSON.parse(JSON.stringify(res));

					// chartDataSBRS
					let resCB = {
						categories: ['亭湖产业园', '数字基地', '环保产业园','光电产业园', '兴泰产业园'],
						series: [{
							name: "企业参保人数统计",
							data: [82, 70, 35, 72, 81]
						}]
					};
					this.chartDataYQSBRS = JSON.parse(JSON.stringify(resCB));
				
			},


		},
	}
</script>

<style>
	@font-face {
		font-family: 'DIN';
		/* 自定义字体名称 */
		src: url('/static/fonts/DINSchrift.ttf');
		/* 字体文件路径 */
	}


	.header-line {
		display: flex;
		background: #36A7F3;
		font-weight: normal;
		font-size: 32rpx;
		color: #fff;
		justify-content: space-around;
		height: 240rpx;
		line-height: 80rpx;
	}

	.header-line-2 {
		background: #36A7F3;
		font-weight: normal;
		font-size: 32rpx;
		color: #fff !important;
		line-height: 40rpx;
		padding-left: 40rpx;
	}

	.text-grey {
		color: #fff;
	}

	.page-box {
		position: relative;
		top: -160rpx;
	}

	.yqshpmfxBox {
		width: 706rpx;
		border-radius: 40rpx;
		background: #fff;
		margin-left: auto;
		margin-right: auto;
		box-shadow: 0px 8px 16px 2px rgba(101, 101, 101, 0.2);
	}

	.actClass {
		color: #FAF82F;
	}

	.yqqsBox {
		margin-top: 30rpx;
		width: 706rpx;
		border-radius: 40rpx;
		background: #fff;
		margin-left: auto;
		margin-right: auto;
		box-shadow: 0px 8px 16px 2px rgba(101, 101, 101, 0.2);
	}

	.tab-header {
		display: flex;
		justify-content: space-between;
		padding-left: 40rpx;
		padding-right: 40rpx;
		border-bottom: 1rpx solid #D5D4D0;
		align-items: center;
	}

	.header-name {
		font-size: 32rpx;
		color: #40547E;
		line-height: 102rpx;
	}

	.pmfx-box {
		height: 440rpx;
	}

	.ssfx-box {
		height: 650rpx;
	}

	.line-box {
		height: 30rpx;
		border-bottom: 1rpx solid #D5D4D0;
	}

	.ssbox {
		display: flex;
	}

	.ss-left-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 156rpx;
		border-right: 1rpx solid #D5D4D0;
	}

	.ss-right-box {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.num {
		font-weight: bold;
		font-size: 44rpx;
		font-family: 'DIN';
		color: #070303;
	}

	.unit {
		font-size: 28rpx;
		color: #07245A;
		opacity: 0.7;
	}

	.right-text-box {
		flex: 1;
	}

	.pie-box {
		height: 156rpx;
		width: 110rpx;
	}

	.page-center-box {
		display: flex;
		width: 706rpx;
		margin-left: auto;
		margin-right: auto;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.center-left-box {
		width: 344rpx;
		border-radius: 40rpx;
		border-radius: 40rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		background: #fff;
		box-shadow: 0px 8px 16px 2px rgba(101, 101, 101, 0.2);
		padding-bottom: 30rpx;
	}

	.center-right-box {
		width: 344rpx;
		border-radius: 40rpx;
		border-radius: 40rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		background: #fff;
		box-shadow: 0px 8px 16px 2px rgba(101, 101, 101, 0.2);
		padding-bottom: 30rpx;
	}

	.center-title {
		font-size: 24rpx;
		color: #064875;
		line-height: 18px;
		opacity: 0.7;
		padding-left: 22rpx;
		padding-top: 23rpx;
		padding-bottom: 23rpx;
	}

	.table-line {
		display: flex;
		line-height: 50rpx;
		height: 50rpx;
	}

	.table-line:nth-child(odd) {
		background-color: #fff;
	}

	.table-line:nth-child(even) {
		background-color: #F1F6F9;
	}

	.index {
		width: 15%;
		text-align: center;
		font-size: 28rpx;
		color: #122F64;
		font-family: 'DIN';
	}

	.name {
		font-size: 26rpx;
		color: #242323;
		width: 65%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.percent {
		font-weight: bold;
		font-size: 28rpx;
		color: #219BED;
		font-family: 'DIN';
	}

	.right-box-in {
		height: 220rpx;
	}
</style>