waterElectricityMinApp/pagesRepairs/home/home.vue

<template>
	<view class="container">
		<view class="top_bg"></view>

		<!-- 状态统计区域 管理者端 -->
		<view class="top_types2" v-if="btns.includes('首页分段器')">
			<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">{{ workCount }}</view>
					<view class="box_info">工单数</view>
				</view>

				<view class="bottom_box">
					<view class="box_num">{{ processCount }}</view>
					<view class="box_info">处理中</view>
				</view>
				<view class="bottom_box">
					<view class="box_num">{{ finishCount }}</view>
					<view class="box_info">已完成</view>
				</view>
				<!-- <view class="bottom_box">
					<view class="box_num">{{ timeoutCount }}</view>
					<view class="box_info">已超时</view>
				</view> -->
				<view class="bottom_box">
					<view class="box_num">{{ offlineCount }}</view>
					<view class="box_info">转线下</view>
				</view>
			</view>
		</view>

		<!-- 状态统计区域 后勤 维修师傅端 -->
		<view class="top_types" v-else>
			<view class="types_box">
				<view class="box_num">{{ workCount }}</view>
				<view class="box_info">工单数</view>
			</view>

			<view class="types_box">
				<view class="box_num">{{ processCount }}</view>
				<view class="box_info">处理中</view>
			</view>
			<view class="types_box" v-if="btns.includes('分段器按钮')">
				<view class="box_num">{{ offlineCount }}</view>
				<view class="box_info">转线下</view>
			</view>
			<view class="types_box">
				<view class="box_num">{{ finishCount }}</view>
				<view class="box_info">已完成</view>
			</view>
			<!-- <view class="types_box">
				<view class="box_num">{{ timeoutCount }}</view>
				<view class="box_info">已超时</view>
			</view> -->
		</view>

		<!-- 排班区域 -->
		<view class="watch" v-if="tableData.length">
			<view class="watch_title">
				<img src="../../static/images/repairsImg/watch.png" />
				排班
			</view>
			<!-- 表格区域 -->
			<uni-table stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="80" align="center">姓名</uni-th>
					<uni-th width="60" align="center">工种</uni-th>
					<uni-th width="80" align="center">接单状态</uni-th>
					<uni-th width="70" align="center">值班班次</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<!-- 姓名区域 -->
					<uni-td align="center">{{ item.userName }}</uni-td>
					<!-- 工种区域 -->
					<uni-td align="center">{{ item.workTypeName ? item.workTypeName : '未知' }}</uni-td>
					<!-- 状态区域 -->
					<uni-td align="center">
						<picker :disabled="!btns.includes('表格编辑')" @change="bindPickerChange($event, item)" :range="typeArray">
							<view class="watch_color2" v-if="item.state === 1">{{ typeArray[item.state - 1] }}</view>
							<view class="watch_color3" v-if="item.state === 2">{{ typeArray[item.state - 1] }}</view>
						</picker>
					</uni-td>
					<!-- 是否值班 -->
					<uni-td align="center">
						<view @click="handleChange(item, index)">{{ getCutting(item.shifts || []) || '暂无排班' }}</view>
					</uni-td>
				</uni-tr>
			</uni-table>

			<!-- 是否值班弹窗区域 -->
			<uni-popup ref="popup_work" background-color="#fff">
				<view class="watch_pop">
					<view class="poop_title">
						<view class="cancel" @click="$refs.popup_work.close()">取消</view>
						<view class="confirm" @click="handlePopConfirm">确定</view>
					</view>

					<view class="poop_body">
						<view class="body_item" v-for="item in workArray" :key="item.id" @click="handleChangeWork(item)">
							<view class="body_item_info">
								{{ item.name }}
							</view>
							<view class="body_item_icon" v-if="defaultList.some((ele) => ele.name == item.name)">✔</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>

		<!-- 排行榜区域 -->
		<view class="rank" v-if="btns.includes('图表')">
			<view class="rank_title">
				<img src="../../static/images/repairsImg/rank.png" />
				工单完成排行榜
			</view>
			<!-- 排行榜柱状图 -->
			<view class="rank_charts">
				<!-- 加上canvas2d属性后 模拟器上图表显示异常，真机没有问题，开发时不添加canvas2d属性，发布时添加canvas2d属性 -->
				<qiun-data-charts canvas2d type="bar" :opts="opts" :chartData="chartData" />
			</view>
		</view>

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

<script>
export default {
	data() {
		return {
			// 按钮权限
			btns: [],
			// 是否值班弹窗默认选中数组
			defaultList: [],
			// 改变的是第几个索引
			changeIndex: 0,
			// 排班状态数组
			typeArray: ['正常接单', '停止接单'],
			// 值班状态数组
			workArray: [],
			// 分段器数组数据
			items: ['团队数据统计', '个人数据统计'],
			// 分段器当前索引
			current: 0,
			// 柱状图数据
			chartData: {
				categories: [],
				series: [
					{
						name: '好评数',
						data: []
					},
					{
						name: '完成数',
						data: []
					}
				]
			},
			// 柱状图配置
			opts: {
				color: ['#1890FF', '#91CB74'],
				padding: [15, 30, 0, 5],
				xAxis: {
					boundaryGap: 'justify',
					disableGrid: false,
					gridType: 'dash',
					gridColor: '#E5E5E5',
					min: 0,
					axisLine: false
				},
				extra: {
					bar: {
						width: 10,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
						linearType: 'custom',
						barBorderCircle: true,
						seriesGap: 0
					}
				}
			},
			// 表格数据
			tableData: [],
			schoolId: '',
			userId: '',
			// 工单数单数
			workCount: '',
			// 处理中单数
			processCount: '',
			// 已完成单数
			finishCount: '',
			// 已超时单数
			timeoutCount: '',
			// 转线下
			offlineCount: '',
			// 当前页
			currentPage: 1,
			// 每页多少条数据
			pageCount: 100,
			// 总条数
			total: null
		}
	},
	props: ['msgTotal'],
	mounted() {
		const repairsUserInfo = uni.getStorageSync('repairsUserInfo')
		this.btns = repairsUserInfo.btns
		this.schoolId = repairsUserInfo.schoolId
		this.userId = repairsUserInfo.userId
		if (this.btns.includes('图表')) {
			this.getChartData()
		}
		if (this.btns.includes('表格编辑')) {
			this.getWatchClass()
		}
		if (this.btns.includes('表格编辑')) {
			this.getTeamCount()
		} else {
			this.getCount()
		}
		// 获取表格数据
		this.getWatchData()
	},
	methods: {
		// 获取图表数据
		async getChartData() {
			const res = await this.$myRequest_repairs({
				url: '/repairUser/queryPositiveReviewPage',
				data: {
					currentPage: 1,
					pageCount: 100,
					schoolId: this.schoolId
				}
			})
			// console.log(res)
			if (res.code === '200') {
				// 姓名数组
				this.chartData.categories = res.data.list.map((ele) => ele.userName)
				// 好评数数组
				this.chartData.series[0].data = res.data.list.map((ele) => ele.evaluateCount)
				// 完成数数组
				this.chartData.series[1].data = res.data.list.map((ele) => ele.finishCount)
			}
		},
		// 获取排班班次数组
		async getWatchClass() {
			const res = await this.$myRequest_repairs({
				url: '/repairShiftSettings/queryPageRepairShiftSettings',
				data: {
					currentPage: 1,
					pageCount: 100,
					name: ''
				}
			})
			// console.log(res)
			if (res.code === '200') {
				this.workArray = res.data.list
			}
		},
		// 获取排班数据
		async getWatchData() {
			const res = await this.$myRequest_repairs({
				url: '/repairClassesSettings/queryPageUserClasses',
				data: {
					currentPage: this.currentPage,
					pageCount: this.pageCount,
					schoolId: this.schoolId,
					userId: this.btns.includes('表格编辑') ? '' : this.userId
				}
			})
			// console.log(res)
			if (res.code === '200') {
				this.total = res.data.totalCount
				this.tableData = res.data.list
			}
		},
		// 获取团队数据统计单数
		async getTeamCount() {
			const res = await this.$myRequest_repairs({
				url: '/repairRecord/queryLogisticHomeCount',
				data: {
					schoolId: this.schoolId
				}
			})
			// console.log(res)
			if (res.code === '200') {
				this.workCount = res.data.workCount
				this.processCount = res.data.processCount
				this.finishCount = res.data.finishCount
				this.timeoutCount = res.data.timeoutCount
				this.offlineCount = res.data.offlineCount
			}
		},
		// 获取个人数据统计单数
		async getCount() {
			const res = await this.$myRequest_repairs({
				url: '/repairRecord/queryMasterHomeCount',
				data: {
					userId: this.userId
				}
			})
			// console.log(res)
			if (res.code === '200') {
				this.workCount = res.data.workCount
				this.processCount = res.data.processCount
				this.finishCount = res.data.finishCount
				this.timeoutCount = res.data.timeoutCount
				this.offlineCount = res.data.offlineCount
			}
		},
		// 是否值班弹窗确定按钮回调
		handlePopConfirm() {
			// uni.showModal({
			// 	title: '提示',
			// 	content: '确定修改是否值班状态吗？',
			// 	success: (res) => {
			// 		if (res.confirm) {
			// 			this.tableData[this.changeIndex].shifts = this.defaultList
			// 			console.log('用户点击确定')
			// 		} else if (res.cancel) {
			// 			console.log('用户点击取消')
			// 		}
			// 	}
			// })
			this.$refs.popup_work.close()
			this.tableData[this.changeIndex].shifts = this.defaultList
			// console.log(this.tableData[this.changeIndex])
			this.handleEdit(this.tableData[this.changeIndex])
		},
		// 点击值班状态回调
		handleChange(item, index) {
			if (this.btns.includes('表格编辑')) {
				this.$refs.popup_work.open('bottom')
				this.changeIndex = index
				this.defaultList = JSON.parse(JSON.stringify(item.shifts || []))
			}
		},
		// 切换值班状态回调
		handleChangeWork(item) {
			let temIndex
			let flag = this.defaultList.some((ele, index) => {
				if (ele.name == item.name) {
					temIndex = index
				}
				return ele.name == item.name
			})
			if (flag) {
				this.defaultList.splice(temIndex, 1)
			} else {
				this.defaultList.push(item)
			}
			// 修改数组的排序,id小的在前面
			this.defaultList.sort((a, b) => a.id - b.id)
		},

		// 切换接单状态回调
		bindPickerChange(e, item) {
			// uni.showModal({
			// 	title: '提示',
			// 	content: '确定修改接单状态吗？',
			// 	success: (res) => {
			// 		if (res.confirm) {
			// 			item.state = e.detail.value + 1
			// 			console.log('用户点击确定')
			// 		} else if (res.cancel) {
			// 			console.log('用户点击取消')
			// 		}
			// 	}
			// })
			item.state = e.detail.value * 1 + 1
			if (item.state === 1) {
				item.stateStr = '正常接单'
			} else {
				item.stateStr = '停止接单'
			}
			this.handleEdit(item)
		},
		// 修改排班表请求
		async handleEdit(item) {
			const res = await this.$myRequest_repairs({
				url: '/repairClassesSettings/updateUserClasses',
				method: 'post',
				data: {
					id: item.id,
					userName: item.userName,
					userPhone: item.userPhone,
					workTypeName: item.workTypeName,
					state: item.state,
					stateStr: item.stateStr,
					classId: item.classId,
					shifts: item.shifts
				}
			})
			// console.log(res)
			if (res.code === '200') {
				uni.showToast({
					title: '编辑成功',
					icon: 'success'
				})
				setTimeout(() => {
					this.getWatchData()
					this.getWatchClass()
				}, 1500)
			}
		},

		// 点击悬浮消息按钮回调
		handleGoMsg() {
			uni.navigateTo({
				url: `/pagesRepairs/message/message`
			})
		},
		// 点击悬浮加号按钮回调
		handleGoRepairs() {
			uni.$emit('goToRepairs', {
				show: 'repairs',
				title: '报修'
			})
		},
		// 顶部分段器切换回调
		onClickItem(e) {
			if (this.current != e.currentIndex) {
				this.current = e.currentIndex
				// console.log(this.current)
				if (this.current === 0) {
					// 团队数据
					this.getTeamCount()
				} else {
					// 个人数据
					this.getCount()
				}
			}
		},
		// 把数组每一项的第一个文字切割出来
		getCutting(list) {
			let str = ''
			list.forEach((ele, index) => {
				if (index !== 0 && list.length > 1) {
					str += '、' + ele.name.substring(0, 1)
				} else {
					str += ele.name.substring(0, 1)
				}
			})
			return str
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: calc(100vh - 152rpx);
	font-size: 32rpx;
	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;
			}
		}

		.watch_color2 {
			color: #1e7dfb;
		}

		.watch_color3 {
			color: #ff5733;
		}

		.watch_td {
			display: flex;
		}

		.watch_pop {
			width: 100%;
			height: 575rpx;
			overflow-y: auto;
			background-color: #fff;

			.poop_title {
				box-sizing: border-box;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				font-size: 34rpx;
				border-bottom: 1rpx solid #f5f5f5;

				.cancel {
					color: #888888;
				}

				.confirm {
					color: #1e7dfb;
				}
			}

			.poop_body {
				margin-top: 50rpx;

				.body_item {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100rpx;
					border-bottom: 1rpx solid #f5f5f5;

					.body_item_info {
					}

					.body_item_icon {
						position: absolute;
						top: 30rpx;
						right: 85rpx;
						color: #1e7dfb;
					}
				}
			}
		}
	}

	.rank {
		position: relative;
		box-sizing: border-box;
		margin: 0 auto 100rpx;
		padding: 0 30rpx;
		width: 690rpx;
		height: 945rpx;
		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 {
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 0;
			width: 630rpx;
			height: 850rpx;
		}
	}

	.fixed {
		z-index: 2;
		position: fixed;
		right: 0;
		bottom: 160rpx;
		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>