vue-insagent-app/pages/tools/achievement/achievement.vue

<template>
	<view>
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="headers ">
			<view class="dis a-c j-start ">
				<u-icon name="arrow-left" color="#fff" size="40" @tap="back"></u-icon>
				<text style="margin: auto;">业绩管理</text>
			</view>
		</view>
		<view class="" style="padding-top: 98px;">
			<view class="summaryData">
				<view class="summarycount dis j-s ">
					<view class="sum dis a-c f-c j-c">
						<text>{{totalsumPremium}}</text>
						<text>年度签单保费</text>
					</view>
					<view class="sum dis a-c f-c j-c">
						<text>{{totalsumCount}}</text>
						<text>年度成交单数</text>
					</view>
				</view>
			</view>
		</view>
		<view style="padding:0  16px 16px;background-color: #F8FAFE;">
			<u-tabs :list="list" style="background-color:#F8FAFE;" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
			<view class="dis j-end">
				<u-subsection :list="subsectionlist" :current="subsectioncurrent"
					style="width: 100px;margin-top: 5px;box-shadow: 0px 4px 10px 0px #DAE3F4;" buttonColor="#3D74FE"
					bgColor="#fff" active-color="#fff" @change="subsection"></u-subsection>
			</view>
			<view class="echarts">
				<view class="totalCount dis j-s" v-if="current==0">
					<view class="dis f-c a-c" style="font-size: 24rpx;">
						<text class="title1">总价</text>
						<text style="color: #426CF3;">{{sumPremium}}</text>
					</view>
					<view class="dis f-c a-c" style="font-size: 24rpx;">
						<text class="title2">交强</text>
						<text style="color: #EA754B;">{{jqPremium}}</text>
					</view>
					<view class="dis f-c a-c" style="font-size: 24rpx;">
						<text class="title3">商业</text>
						<text style="color: #56C073;">{{syPremium}}</text>
					</view>
				</view>
				<view class="totalCount dis j-c" v-if="current==1">
					<view class="dis f-c a-c" style="font-size: 24rpx;">
						<text class="title1">增增员人数</text>
						<text style="color: #426CF3;">{{employeeIncreaseCount}}</text>
					</view>

				</view>
				<view class="totalCount dis j-s" v-if="current==2">
					<view class="dis f-c a-c" style="font-size: 24rpx;">
						<text class="title1">手续费</text>
						<text style="color: #426CF3;">{{haldingAmount}}</text>
					</view>
					<view class="dis f-c a-c" style="font-size: 24rpx;">
						<text class="title2">非跟单</text>
						<text style="color: #EA754B;">{{documentaryAmount}}</text>
					</view>
					<view class="dis f-c a-c" style="font-size: 24rpx;">
						<text class="title3">推广费</text>
						<text style="color: #56C073;">{{promotionAmount}}</text>
					</view>
				</view>
				<view class="" style="height:300px;width: 100%;">
					<qiun-data-charts v-show="current==0" type="column" :opts="opts1" :chartData="chartData1"
						:ontouch="true" />
					<qiun-data-charts v-show="current==1" type="column" :opts="opts2" :chartData="chartData2"
						:ontouch="true" />
					<qiun-data-charts v-show="current==2" type="column" :opts="opts3" :chartData="chartData3"
						:ontouch="true" />
				</view>

			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				dataInfo: {
					searchDay: "",
					searchMonth: "",
					searchType: "1",
					searchYear: ""
				},

				chartData1: {},
				chartData2: {},
				chartData3: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts1: {
					dataLabel: false,
					color: ["#426CF3", "#EA754B", "#56C073"],
					padding: [15, 15, 0, 5],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {
						show: false,
						position: "top"
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4
					},
					yAxis: {
						disableGrid: true,
						data: [{
							unit: '/元',
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 8,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				opts2: {
					dataLabel: false,
					color: ["#426CF3", "#EA754B", "#56C073"],
					padding: [15, 15, 0, 5],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {
						show: false,
						position: "top"
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4
					},
					yAxis: {
						disableGrid: true,
						data: [{
							unit: '/人',
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 8,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				opts3: {
					dataLabel: false,
					color: ["#426CF3", "#EA754B", "#56C073"],
					padding: [15, 15, 0, 5],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {
						show: false,
						position: "top"
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4
					},
					yAxis: {
						disableGrid: true,
						data: [{
							unit: '/元',
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 8,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				list: [{
					name: '数据报表'
				}, {
					name: '增员报表'
				}, {
					name: '收入报表',
				}],
				subsectionlist: [{
						name: '年'
					},
					{
						name: '月'
					},
					{
						name: '日'
					}
				],
				current: 0,
				subsectioncurrent: 0,
				jqPremium: "",
				sumPremium: "",
				syPremium: "",
				employeeIncreaseCount: "",
				haldingAmount: "",
				documentaryAmount: "",
				promotionAmount: "",
				totalsumPremium: "",
				totalsumCount: "",
			}
		},
		onReady() {
			this.getServerData1();
		},
		onLoad() {
			this.transformTime();
			this.totalsummt();
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			async totalsummt() {
				let res = await this.$http.get('/app/reporet/getAllpremium?year=' + this.dataInfo.searchYear);
				this.totalsumPremium = res.data.sumPremium;
				this.totalsumCount = res.data.sumCount;
			},
			async getServerData1() {
				let res = await this.$http.post('/app/reporet/premiumReport', this.dataInfo);
				if (res.code == '200') {
					this.jqPremium = res.data.jqPremium;
					this.sumPremium = res.data.sumPremium;
					this.syPremium = res.data.syPremium;
					let rualit = {
						categories: res.data.dateList,
						series: [{
								name: "总价",
								data: res.data.sumPremiumList
							},
							{
								name: "交强",
								data: res.data.jqPremiumList
							},
							{
								name: "商业",
								data: res.data.syPremiumList
							}
						]
					};
					this.chartData1 = JSON.parse(JSON.stringify(rualit));
				}

			},
			async getServerData2() {
				let res = await this.$http.post('/app/reporet/employeeIncreaseReport', this.dataInfo);
				if (res.code == '200') {
					this.employeeIncreaseCount = res.data.employeeIncreaseCount;
					let rualit = {
						categories: res.data.dateList,
						series: [{
							name: "人数",
							data: res.data.employeeIncreaseReportList

						}, ]
					};
					this.chartData2 = JSON.parse(JSON.stringify(rualit));
				}

			},
			async getServerData3() {
				let res = await this.$http.post('/app/reporet/revenueReport', this.dataInfo);
				if (res.code == '200') {
					this.haldingAmount = res.data.haldingAmount;
					this.documentaryAmount = res.data.documentaryAmount;
					this.promotionAmount = res.data.promotionAmount;
					let rualit = {
						categories: res.data.dateList,
						series: [{
							name: "手续费金额",
							data: res.data.haldingAmountList
						}, {
							name: "非跟单金额",
							data: res.data.documentaryAmountList
						}, {
							name: "推广费金额",
							data: res.data.promotionAmountList
						}]
					};
					this.chartData3 = JSON.parse(JSON.stringify(rualit));
				}
			},
			change(index) {
				this.current = index;
				this.subsectioncurrent = 0;
				this.dataInfo.searchType = '1';
				if (index == 0) {
					this.getServerData1();
				} else if (index == 1) {
					this.getServerData2();
				} else {
					this.getServerData3();
				}
			},
			async subsection(index) {
				this.subsectioncurrent = index;
				switch (index) {
					case 0:
						this.dataInfo.searchType = '1';

						break;
					case 1:
						this.dataInfo.searchType = '2';
						break;
					case 2:
						this.dataInfo.searchType = '3';
						break;
				}
				if (this.current == 0) {
					this.getServerData1();
				} else if (this.current == 1) {
					this.getServerData2();
				} else {
					this.getServerData3();
				}
			},
			//页面返回按钮
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			//当前时间
			transformTime(day) {
				var date = new Date();
				date.setFullYear(date.getFullYear());
				date.setTime(date.getTime());
				var strYear = date.getFullYear();
				var strDay = day ? date.getDate() - day : date.getDate();
				var strMonth = date.getMonth() + 1;
				if (strMonth < 10) {
					strMonth = "0" + strMonth;
				}
				if (strDay < 10) {
					strDay = "0" + strDay;
				}
				this.dataInfo.searchYear = strYear;
				this.dataInfo.searchMonth = strMonth;
				this.dataInfo.searchDay = strDay;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8FAFE;
		height: 100vh;
	}

	.totalCount {
		padding: 0 10px;

		.title1 {

			&::before {
				content: "";
				display: inline-block;
				width: 6px;
				height: 6px;
				background-color: #426CF3;
				border-radius: 50%;
				margin-right: 4px;
			}
		}

		.title2 {
			&::before {
				content: "";
				display: inline-block;
				width: 6px;
				height: 6px;
				background-color: #EA754B;
				border-radius: 50%;
				margin-right: 4px;
			}
		}

		.title3 {
			&::before {
				content: "";
				display: inline-block;
				width: 6px;
				height: 6px;
				background-color: #56C073;
				border-radius: 50%;
				margin-right: 4px;
			}
		}
	}

	.echarts {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 6px;
		margin-top: 10px;
		padding: 10px 0;
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 16px;
		padding-top: 50px;
		height: auto;
		background: #3D74FE;

		text {
			font-size: 18px;
			font-weight: bold;
			color: #fff;
		}
	}

	.summaryData {
		width: 100%;
		height: auto;
		background: #F8FAFE;
		background-image: url("/static/image/team/bg2.png");
		background-size: 100% 100%;
		padding: 16px;

		.summarycount {
			width: 100%;
			height: 62px;
			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px #DAE3F4;
			border-radius: 6px;

			.sum {
				width: 50%;
				height: 100%;

				text:nth-child(1) {
					font-size: 32rpx;
					color: #232832;
					font-weight: bold;

				}

				text:nth-child(2) {
					font-size: 24rpx;
					color: rgba(51, 51, 51, 0.8);
				}
			}

		}
	}
</style>