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

<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true" backUrl="/pages/index/index">
			<block slot="content">数据分析</block>
		</cu-custom>

		<view class="header-line">
			<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="ssfx-box">
						<qiun-data-charts type="pie" :opts="optsSS" :chartData="chartDataYQSS" />
					</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="line" :opts="opts4" :chartData="chartDataLYQYZS" />
					</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="ssfx-box">
						<qiun-data-charts type="pie" :opts="optsSS" :chartData="chartDataSS" />
					</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="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 {
				show: 2,
				LYList: [],
				ssInfo: {},
				rzList: [],
				ssqsLYid: '',
				yzlLYid: '',
				chartData: {},
				//您可以通过修改 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"
						}
					}
				},
				chartDataLYQYZS: {},
				chartDataSS: {},
				chartDataSBRS: {},
				chartDataYQQYZS: {},
				chartDataYQSS: {},
				chartDataYQSBRS: {},
				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()
		},
		
		mounted() {
			this.getServerData();
			this.getStatisticsForPark()
			this.getStatisticsForBuild()
			this.AppFirst()
		},
		methods: {
			changeData() {
				this.AppFirstAddNwe()
			},
			
			changeShow(index) {
				this.show = index
			},
			
			// 楼宇新增企业月增量
			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)
				})
			},
			
			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)
				})
			},

			getStatisticsForBuild() {
				loginService.getStatisticsForBuild({}).then(({
					data
				}) => {
					let buildNameArr = data.map(item => item.building_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.chartDataLYQYZS = JSON.parse(JSON.stringify(res));

					// chartDataSBRS
					let resCB = {
						categories: buildNameArr,
						series: [{
							name: "企业参保人数统计",
							data: buildSBRS
						}]
					};
					this.chartDataSBRS = JSON.parse(JSON.stringify(resCB));
					let ssList = data.map((item) => {
						return {
							name: item.building_name,
							value: item.ssze
						}
					})
					let res2 = {
						series: [{
							data: ssList
						}]
					};
					this.chartDataSS = JSON.parse(JSON.stringify(res2));

				}).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));
					let ssList = data.map((item) => {
						return {
							name: item.park_name,
							value: item.ssze
						}
					})
					let res2 = {
						series: [{
							data: ssList
						}]
					};
					this.chartDataYQSS = JSON.parse(JSON.stringify(res2));
				}).catch(e => {
					console.log(e)
				})
			},


			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					
				}, 500);
			},

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

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