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

<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true" backUrl="/pages/index/index">
			<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 uniFab from '@/components/uni-fab/uni-fab.vue';
	import loginService from '@/api/auth/loginService.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 使用mixin (在main.js注册全局组件)
		onShow(option) {
			this.$auth.checkLogin()
		},
		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()
		},
		
		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() {
			  loginService
				.getSaleStatisticsForYear2({
				  yqid: this.yqid,
				  lyid: '',
				})
				.then(({ data }) => {
				  let keys = data.map(item => item.building_name);
				  let values = data.map(item => item.nowYearIncome);
				  let res = {
				  	categories: keys,
				  	series: [{
				  		name: "税收",
				  		data: values
				  	}]
				  };
				  this.BNDSSchartData = JSON.parse(JSON.stringify(res));
				  
				  let values2 = data.map(item => item.nowYearSale);
				  let res2 = {
				  	categories: keys,
				  	series: [{
				  		name: "销售",
				  		data: values2
				  	}]
				  };
				  this.BNDXSchartData = JSON.parse(JSON.stringify(res2));
				});
			},

			

			// 楼宇新增企业月增量
			AppFirstAddNwe() {
				loginService.AppFirstAddNwe({
					searchid: this.yzlLYid
				}).then(({
					data
				}) => {
					let keys = Object.keys(data[0]);
					let values = Object.values(data[0]);
					let res4 = {
						categories: keys,
						series: [{
							name: "新增企业数",
							data: values
						}]
					};
					this.chartDataLLXZL = JSON.parse(JSON.stringify(res4));
				}).catch(e => {
					console.log(e)
				})
			},



			changeSSLYId() {
				this.AppFirstAddTotle()
			},

			// 税收
			AppFirstAddTotle() {
				loginService.AppFirstAddTotle({
					searchid: this.ssqsLYid
				}).then(({
					data
				}) => {
					let keys = Object.keys(data[0]);
					let values = Object.values(data[0]);
					let res4 = {
						categories: keys,
						series: [{
							name: "税收",
							data: values
						}]
					};
					this.chartDataSSLY = JSON.parse(JSON.stringify(res4));
				}).catch(e => {
					console.log(e)
				})
			},

			getSaleStatisticsForPark() {
				loginService.getSaleStatisticsForPark({

				}).then(({
					data
				}) => {
					console.log(data, '===============.data')
					let peopelList = [{
							name: '博士生',
							value: data[0].DoctoralStudent,
						},
						{
							name: '硕士生',
							value: data[0].Postgraduate,
						},
						{
							name: '本科生',
							value: data[0].Undergraduate,
						},
						{
							name: '本科以下',
							value: data[0].BelowUndergraduate,
						},
					]
					let res2 = {
						series: [{
							data: peopelList
						}]
					};
					this.chartDataSBRS = JSON.parse(JSON.stringify(res2));
				}).catch(e => {
					console.log(e)
				})
			},

			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
					this.AppFirstAddTotle()
					this.AppFirstAddNwe()
				}).catch(e => {
					console.log(e)
				})
			},
			
			

			AppFirst() {
				loginService.AppFirst().then(({
					data
				}) => {
					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));

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

			getStatisticsForPark() {
				loginService.getStatisticsForPark({
				}).then(({
					data
				}) => {
					let buildNameArr = data.map(item => item.park_name)
					let buildQYZS = data.map(item => item.qycount)
					let buildSSZE = data.map(item => item.ssze)
					let buildSBRS = data.map(item => item.sbuser)
					let res = {
						categories: buildNameArr,
						series: [{
							name: "企业总数",
							data: buildQYZS
						}]
					};
					this.chartDataYQQYZS = JSON.parse(JSON.stringify(res));

					// chartDataSBRS
					let resCB = {
						categories: buildNameArr,
						series: [{
							name: "企业参保人数统计",
							data: buildSBRS
						}]
					};
					this.chartDataYQSBRS = JSON.parse(JSON.stringify(resCB));
				}).catch(e => {
					console.log(e)
				})
			},


		},
	}
</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>