waterElectricityMinApp/pagesRepairs/home/home.vue

<template>
	<view class="container">
		<view class="top_bg" @click="permission = !permission"></view>

		<!-- 状态统计区域 -->
		<view class="top_types" v-if="!permission">
			<view class="types_box">
				<view class="box_num">100</view>
				<view class="box_info">工单数</view>
			</view>

			<view class="types_box">
				<view class="box_num">10</view>
				<view class="box_info">处理中</view>
			</view>
			<view class="types_box">
				<view class="box_num">50</view>
				<view class="box_info">已完成</view>
			</view>
			<view class="types_box">
				<view class="box_num">60</view>
				<view class="box_info">已超时</view>
			</view>
		</view>

		<view class="top_types2" v-else>
			<view class="top">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#6FB6B8"></uni-segmented-control>
			</view>
			<view class="bottom">
				<view class="bottom_box">
					<view class="box_num">100</view>
					<view class="box_info">工单数</view>
				</view>

				<view class="bottom_box">
					<view class="box_num">10</view>
					<view class="box_info">处理中</view>
				</view>
				<view class="bottom_box">
					<view class="box_num">50</view>
					<view class="box_info">已完成</view>
				</view>
				<view class="bottom_box">
					<view class="box_num">60</view>
					<view class="box_info">已超时</view>
				</view>
			</view>
		</view>

		<!-- 排班区域 -->
		<view class="watch">
			<view class="watch_title">
				<img src="../../static/images/repairsImg/watch.png" />
				排班
			</view>
			<!-- 表格区域 -->
			<uni-table stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="50" align="center">姓名</uni-th>
					<uni-th width="50" align="center">工种</uni-th>
					<uni-th width="80" align="center">状态</uni-th>
					<uni-th width="80" align="center">是否值班</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.name }}</uni-td>
					<uni-td align="center">{{ item.type }}</uni-td>
					<uni-td align="center">{{ item.status }}</uni-td>
					<uni-td align="center">{{ item.work }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<!-- 排行榜区域 -->
		<view class="rank">
			<view class="rank_title">
				<img src="../../static/images/repairsImg/rank.png" />
				工单完成排行榜
			</view>
			<!-- 排行榜柱状图 -->
			<view class="rank_charts">
				<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
			</view>
		</view>

		<!-- 悬浮按钮区域 -->
		<view class="fixed">
			<img src="../../static/images/repairsImg/add.png" />
			<uni-badge :offset="[5, 5]" absolute="rightTop" text="8">
				<img class="img" src="../../static/images/repairsImg/message.png" @click="handleGoMsg" />
			</uni-badge>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			permission: true,
			items: ['团队数据统计', '个人数据统计'],
			current: 0,
			chartData: {
				categories: ['张三', '李四', '王五', '老六', '刘八'],
				series: [
					{
						name: '好评数',
						data: [35, 36, 31, 33, 13]
					},
					{
						name: '完成数',
						data: [18, 27, 21, 24, 6]
					}
				]
			},
			opts: {
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [15, 30, 0, 5],
				enableScroll: false,
				legend: {},
				xAxis: {
					boundaryGap: 'justify',
					disableGrid: false,
					min: 0,
					axisLine: false,
					max: 40
				},
				yAxis: {},
				extra: {
					bar: {
						type: 'group',
						width: 15,
						meterBorde: 1,
						meterFillColor: '#FFFFFF',
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
						linearType: 'custom',
						barBorderCircle: true,
						seriesGap: 2,
						categoryGap: 2
					}
				}
			},
			tableData: [
				{
					name: '张三',
					type: '电工',
					status: 0,
					work: 0
				},
				{
					name: '张三三',
					type: '泥工',
					status: 0,
					work: 0
				},
				{
					name: '张三',
					type: '电工',
					status: 0,
					work: 0
				},
				{
					name: '张三三',
					type: '泥工',
					status: 0,
					work: 0
				},
				{
					name: '张三',
					type: '电工',
					status: 0,
					work: 0
				},
				{
					name: '张三三',
					type: '泥工',
					status: 0,
					work: 0
				}
			]
		}
	},
	mounted() {},
	methods: {
		handleGoMsg() {
			uni.navigateTo({
				url: '/pagesRepairs/message/message'
			})
		},
		onClickItem(e) {
			if (this.current != e.currentIndex) {
				this.current = e.currentIndex
				console.log(this.current)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: calc(100vh - 102rpx);
	overflow-y: auto;

	.top_bg {
		height: 165rpx;
		background-color: #6fb6b8;
	}

	.top_types {
		display: flex;
		justify-content: space-evenly;
		margin: auto;
		margin-top: -100rpx;
		width: 690rpx;
		height: 188rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.25);
		background-color: #fff;

		.types_box {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.box_num {
				font-size: 46rpx;
				color: #ff5733;
			}
			.box_info {
				margin-top: 10rpx;
				font-size: 34rpx;
			}
		}
	}

	.top_types2 {
		box-sizing: border-box;
		margin: auto;
		margin-top: -100rpx;
		padding: 0 30rpx;
		width: 690rpx;
		height: 282rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.25);
		background-color: #fff;

		.top {
			height: 112rpx;
			border-bottom: 1rpx solid #e6e6e6;
		}

		.bottom {
			display: flex;
			justify-content: space-evenly;
			height: 170rpx;

			.bottom_box {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.box_num {
					font-size: 46rpx;
					color: #ff5733;
				}
				.box_info {
					margin-top: 10rpx;
					font-size: 34rpx;
				}
			}
		}
	}

	.watch {
		box-sizing: border-box;
		margin: 20rpx auto;
		padding: 0 30rpx;
		width: 690rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.25);

		.watch_title {
			display: flex;
			align-items: center;
			height: 95rpx;
			font-size: 36rpx;
			border-bottom: 1rpx solid #e6e6e6;

			img {
				margin-right: 14rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	}

	.rank {
		box-sizing: border-box;
		margin: 0 auto 100rpx;
		padding: 0 30rpx;
		width: 690rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.25);

		.rank_title {
			display: flex;
			align-items: center;
			height: 95rpx;
			font-size: 36rpx;
			border-bottom: 1rpx solid #e6e6e6;

			img {
				margin-right: 14rpx;
				width: 41rpx;
				height: 41rpx;
			}
		}

		.rank_charts {
			height: 650rpx;
		}
	}

	.fixed {
		z-index: 2;
		position: fixed;
		right: 0;
		bottom: 155rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 252rpx;
		height: 123rpx;
		border-radius: 150rpx 0 0 150rpx;
		box-shadow: 0px 0px 7rpx rgba(0, 0, 0, 0.15);
		background-color: #fff;

		img {
			width: 76rpx;
			height: 76rpx;
		}

		.img {
			width: 88rpx;
			height: 88rpx;
		}
	}
}
</style>