uni-zhihuikuangshan-2/components/personnel-orientation-population-trend/personnel-orientation-population-trend.vue

<template>
	<view>
		<view class="section">
			<view class="title" @click="change_qushi_title()">{{qushi_title}}
				<uni-icons type="bottom" style="margin-left: 10rpx;"></uni-icons>
			</view>
			<view class="charts-box" v-if="qushi_type == 0">
				<qiun-data-charts type="column" :opts="column_1" tooltipFormat="personnel_statistics_ren"
					:chartData="chartData_column_1" />
			</view>
			<view class="charts-box" v-if="qushi_type == 1">
				<qiun-data-charts type="column" :opts="column_2" tooltipFormat="personnel_statistics_ren"
					:chartData="chartData_column_2" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "personnel-orientation-population-trend",
		props:[
			"mine"
		],
		data() {
			return {
				// 周、月下井趋势
				column_1: {
					legend: {
						position: "top",
					},
					dataLabel: false,
					xAxis: {
						disableGrid: true
					},
					extra: {
						column: {
							type: "stack",
							width: 20
						}
					}
				},
				column_2: {
					legend: {
						position: "top",
					},
					dataLabel: false,
					xAxis: {
						disableGrid: true,
						fontSize: 11
					},
					extra: {
						column: {
							type: "stack",
							width: 10
						}
					}
				},
				chartData_column_1: {},
				chartData_column_2: {},
				
				qushi_title: "周下井人数趋势",
				qushi_title_list: ["周下井人数趋势", "月下井人数趋势"],
				qushi_type: 0
			};
		},
		mounted() {
			// console.log(this.mine)
			this.getServerData()
		},
		methods: {
			getServerData() {
				this.$p_api.personnel_getPeopleXJQS({
					type: "week",
					mine: this.mine
				}).then((res)=>{
					this.chartData_column_1 = res.data.data
				})
				this.$p_api.personnel_getPeopleXJQS({
					type: "month",
					mine: this.mine
				}).then((res)=>{
					this.chartData_column_2 = res.data.data
				})
				
		// 		setTimeout(() => {
		// 			let res = {
		// 				categories: ["30日", "31日", "1日", "2日", "3日", "4日", "5日"],
		// 				series: [{
		// 						name: "早班",
		// 						data: [35, 36, 31, 33, 13, 34, 32]
		// 					},
		// 					{
		// 						name: "中班",
		// 						data: [18, 27, 21, 24, 6, 28, 2]
		// 					},
		// 					{
		// 						name: "晚班",
		// 						data: [18, 27, 21, 24, 6, 28, 4]
		// 					}
		// 				]
		// 			};
		// 			this.chartData_column_1 = JSON.parse(JSON.stringify(res));
		// 		}, 500);

		// 		setTimeout(() => {
		// 			let res = {
		// 				categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",
		// 					"12月"
		// 				],
		// 				series: [{
		// 						name: "早班",
		// 						data: [35, 36, 31, 33, 13, 34, 32, 31, 33, 13, 34, 32]
		// 					},
		// 					{
		// 						name: "中班",
		// 						data: [18, 27, 21, 24, 6, 28, 2, 31, 33, 13, 34, 32]
		// 					},
		// 					{
		// 						name: "晚班",
		// 						data: [18, 27, 21, 24, 6, 28, 4, 31, 33, 13, 34, 32]
		// 					}
		// 				]
		// 			};
		// 			this.chartData_column_2 = JSON.parse(JSON.stringify(res));
		// 		}, 500);
		
			},

			change_qushi_title(type) {
				uni.showActionSheet({
					itemList: this.qushi_title_list,
					success: (res) => {
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						this.qushi_title = this.qushi_title_list[res.tapIndex]
						this.qushi_type = res.tapIndex
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.charts-box {
		width: 350px;
		height: 300px;
	}

	.content {
		width: 750rpx;

		box-sizing: border-box;
		padding: 25rpx;
	}

	.section {
		background-color: #FFFFFF;
		border-radius: 8px;
		overflow: hidden;

		padding-bottom: 30rpx;
		margin-bottom: 25rpx;

		.title {
			padding: 40rpx 20rpx 0;
			font-weight: 700;
		}
	}
</style>