zhgdyunapp/pages/projectEnd/laborManage/staffAttendance/workAttendanceAnalyse.vue

<template>
	<view class="addIssue">
		<view class="fixedheader">
			<headers :showBack="true">
				<view class="headerName">
					工种出勤分析
				</view>
			</headers>
		</view>
		<view class="content" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
			<view class="content-header">
				<view @click="chartsType = item.id" :class="{'header_active': chartsType == item.id}" v-for="item in chartsTypeList" :key="item.id">{{item.title}}</view>
			</view>
			<view class="box4_main" v-if="chartsType == 1">
				<view class="box4_main-box_charts">
					<qiun-data-charts type="pie" :opts="opts2" :chartData="chartData2" />
				</view>
				<view class="box4_main-box_roll">
					<view class="box4_main-box" v-for="(item,index) in provinceList" :key="index">
						<view>
							<view class="bg_color" :style="{'background-color': colorList[index]}"></view>
							<view>{{item.name}}</view>
						</view>
						<view>{{item.value}} 人</view>
						<view>{{item.ratioNum}} %</view>
					</view>
				</view>
			</view>
			<view class="bar_wrap" v-else-if="chartsType == 2">
				<!-- 单位 -->
				<view class="bar_wrap-box" v-for="(item,index) in provinceList" :key="index">
					<view class="bar_wrap-box-header">
						<view>
							<view>{{item.name}}</view>
							<view>{{item.ratio}}%</view>
						</view>
						<view>{{item.value}}人</view>
					</view>
					<view class="showRatioBar">
						<view :style="{width: 90 +'%'}"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobileTopHeight: 0,
				chartsTypeList: [{
					id: 1,
					title: "饼图"
				},{
					id: 2,
					title: "条形图"
				}],
				chartsType: 1,
				provinceList: [],
				chartData2: {},
				opts2: {
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					tooltipShow: false,
					legend: {
						show: false,
					},
					extra: {
						pie: {
							activeOpacity: 0,
							activeRadius: 0,
							offsetAngle: 0,
							labelWidth: 0,
							border: false,
							borderWidth: 0,
							borderColor: "#FFFFFF"
						}
					}
				},
				colorList: ['#00b0f0', '#0070c0', '#c00000', '#ff0000', '#ffc000', '#ffff00', '#92d050', '#00b050',
					'#002060', '#7030a0', '#262626',
					'#a6a6a6', '#660010', '#b21016', '#c00000', '#ff0000', '#ffc000', '#ffff00', '#00b0f0', '#0070c0',
					'#92d050', '#00b050', '#002060', '#7030a0', '#262626',
					'#a6a6a6', '#660010', '#b21016'
				],
				projectDetail: {},
			}
		},
		onLoad() {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			this.getSelectProjectLabourWorkerCount();
		},
		mounted() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo', res)
					console.log(res)
				}
			})
		},
		methods: {
			// 工种出勤分析
			getSelectProjectLabourWorkerCount() {
				var that = this
				this.sendRequest({
					url: 'xmgl/workerAppHome/selectProjectLabourWorkerCount',
					data: {
						projectSn: this.projectDetail.projectSn,
					},
					method: "POST",
					success(res) {
						if (res.code == 200) {
							that.provinceList = res.result.map(item => {
								return {
									...item,
									name: item.typeName,
									value: item.personNum,
								}
							});
							that.chartData2 =  {
								series: [{
									data: that.provinceList,
								}]
							};
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.bar_wrap {

		.bar_wrap-box {
			margin-top: 26rpx;

			.bar_wrap-box-header {
				display: flex;
				align-items: center;
				justify-content: space-between;

				>view:first-child {
					display: flex;
					font-size: 28rpx;
					color: #1A1A1A;

					>view:last-child {
						font-size: 28rpx;
						color: #808080;
						margin-left: 40rpx;
					}
				}

				>view:last-child {
					font-size: 28rpx;
					color: #3190F3;
				}
			}

			.showRatioBar {
				margin-top: 20rpx;
				height: 20rpx;
				background: #F2F2F2;
				position: relative;
				> view {
					height: 100%;
					background-color: #2F8FF3;
					position: absolute;
					left: 0;
				}
			}
		}
	}

	.box4_main {
		margin-top: 26rpx;

		.box4_main-box_charts {
			height: 312rpx;
		}

		.box4_main-box_roll {
			overflow-y: scroll;
			margin-top: 26rpx;
			// height: 442rpx;

			.box4_main-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 50rpx;

				>view:first-child {
					width: 240rpx;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #1A1A1A;
					position: relative;

					.bg_color {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
					}

					>view:nth-child(n + 2) {
						margin-left: 12rpx;
					}
				}

				>view:first-child::before {
					content: '';
					width: 3rpx;
					height: 26rpx;
					background: #D9D9D9;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				>view:nth-child(n + 2) {
					width: 180rpx;
					font-size: 28rpx;
					color: #1A1A1A;
					text-align: right;
					// margin-left: 142rpx;
				}
			}
		}
	}

	.content {
		padding: 26rpx;
	}

	.content-header {
		width: 218rpx;
		height: 64rpx;
		background: #F2F3F7;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		padding: 4rpx;

		>view {
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #4D4D4D;
			border-radius: 6rpx;
		}

		.header_active {
			background: #FFFFFF;
			color: #3190F3;
		}
	}

	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		/deep/ .headerBox {
			border-bottom: none;
		}

		.headerName {
			z-index: 1;
		}
	}
</style>