FE-lab-xcx/pages_safetyCheck/views/inspectManage/inspectList.vue

<!-- 检查和自查列表 -->
<template>
	<view class="snapshotList">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="title" @click="planClick()">
				<view class="title-l">
					<view class="title-l-t">{{optionData.planTitle}}</view>
					<view class="title-l-b">
						<view v-if="optionData.checkCategory">
							{{optionData.checkCategory==1?'校院巡查':(optionData.checkCategory==2?'学院自查':'')}}
						</view>
						<view v-if="optionData.checkTypeName">{{optionData.checkTypeName}}</view>
						<view v-if="optionData.crossCheck==1">交叉互检</view>
					</view>
				</view>
				<img class="title-r" src="@/pages_safetyCheck/images/icon_wd_gd@1x.png">
			</view>
			<view class="tabTitleTow">
				<view :class="tabIndexTow==index?'tab-C':'tab-D'" v-for="(item,index) in tabListTow"
					@click="tabClickTow(index)">{{item}}</view>
			</view>
			<view>
				<view class="level">
					<view class="level-li"
						:style="levelId==item.levelId?'border:1rpx solid '+item.levelColor+';background:'+item.levelColorTow+';':'levelColor-B'"
						@click="levelClick(item.levelId)" v-for="(item,index) in levelList">{{item.levelName}}</view>
					<view class="level-r" v-if="tabIndexTow == 0">
						<view :class="manageStatus == 0 ?'level-r-B':'level-r-A'" @click="checkFlagChange(0)">未完成</view>
						<view :class="manageStatus == 2 ?'level-r-B':'level-r-A'" @click="checkFlagChange(2)">已完成</view>
					</view>
				</view>
				<view class="srearch">
					<view class="srearch-n" @click="srearchClick()">
						<view class="srearch-l">
							<img src="@/pages_safetyCheck/images/icon_aqjc_ss.png">
						</view>
						<input class="srearch-c" type="text" v-model="searchValue" placeholder="搜索实验室" disabled />
					</view>
				</view>

			</view>
			<view class="list">
				<view class="list-li" @click="listClick(item)" v-for="(item,index) in dataList">
					<view class="list-li-t">
						<img class="list-li-t-l" src="@/pages_safetyCheck/images/icon_aqjc_shiyanshi.png">
						<view class="list-li-t-c">{{item.subName}}</view>
						<view class="list-li-t-r"
							:style="'border:1rpx solid '+item.classLevelColor+';background:'+item.classLevelColorTow+';'">
							<text
								:style="'border-right:1rpx solid '+item.classLevelColor+';color:'+item.classLevelColor+';'">{{item.classLevelName?item.classLevelName:''}}</text>
							<text
								:style="'color:'+item.classLevelColor+';'">{{item.classTypeNames?item.classTypeNames:''}}</text>
						</view>
					</view>
					<view class="list-li-b">
						<view class="list-li-b-t">
							<img src="@/pages/images/icon_sy_zc@1x.png">
							{{tabIndexTow==0?(item.roomNum?item.roomNum:'-'):(item.subRoom?item.subRoom:'-')}}房间＆{{item.buildName?item.buildName:''}}
						</view>
						<view class="list-li-b-b">
							<view class="list-li-b-b-l">
								<img src="@/pages/images/icon_sy_zc@1x.png">
								{{item.deptName}}
							</view>
							<view :class="item.manageStatus==2?'finished':'notFinished'" v-if="tabIndexTow==0">
								{{item.manageStatus==2?'已完成':'未完成'}}
							</view>
						</view>
					</view>

				</view>
				<view class="get-data-null-p" v-if="getDataType">- 没有更多数据 -</view>
			</view>
			<img v-if="tabIndexTow==0" class="saoCode" @click="saoCode()"
				src="@/pages_safetyCheck/images/icon_aqjc_saoma.png">
		</scroll-view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		systemDeptDropList,
	} from '@/pages/api/index.js'
	import {
		laboratorySubRelInfoGetRelList,
		laboratoryLevelConfigGetWebLevelTitleList,
		securityAppCheckManageList,
		securityAppCheckDangerGetCheckDangerSubList,
		securityAppCheckDangerReviewSubList,
		securityAppCheckSetOptionList,
	} from '@/pages_safetyCheck/api/index.js'
	export default {
		name: "snapshotList",
		components: {

		},
		data() {
			return {
				baseUrl: config.base_url,
				pageType: 0,
				userType: 1,
				tabListTow: ['检查任务', '复查验证', '隐患整改'],
				tabIndexTow: 0,
				//学院选择
				deptData: {
					index: null,
					list: [],
					id: null,
					name: null
				},
				deptIndex: null,
				deptList: [],
				//弹层实验室数据
				popupType: false,
				roomList: [],
				//级别
				levelList: [],
				levelId: null,
				optionData: null,
				//实验室/房间号
				searchValue: '',
				subId: '',
				planSetId: null,
				// 查询参数
				queryParams: {
					page: 1,
					pageSize: 20,
				},
				dataList: [],
				total: 0,
				getDataType: false,
				manageStatus: null,
			}
		},
		onLoad(option) {
			let optionData = JSON.parse(decodeURIComponent(option.infoData))
			uni.setNavigationBarTitle({
				title: optionData.checkPlanSetVoList.checkName
			})
			this.$set(this, 'tabListTow',
				optionData.checkCategory == 1 ? ['检查任务', '复查验证', '隐患整改'] :
				(optionData.checkCategory == 2 ? ['自查任务', '复查验证', '隐患整改'] : [])
			)
			this.$set(this, 'optionData', optionData);
			this.$set(this, 'planSetId', optionData.checkPlanSetVoList.planSetId);
		},
		created() {
			this.systemDeptDropList();
			this.laboratoryLevelConfigGetWebLevelTitleList();
		},
		mounted() {
			let self = this;
			setTimeout(() => {
				self.getList();
			}, 100);
		},
		methods: {
			//滚动事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//级别切换
			levelClick(id) {
				if (this.levelId == id) {
					this.$set(this, 'levelId', null);
				} else {
					this.$set(this, 'levelId', id);
				}
				this.$set(this, 'getDataType', false);
				this.$set(this.queryParams, 'page', 1);
				this.getList();
			},
			//符合/不符合
			checkFlagChange(type) {
				if (this.manageStatus == type) {
					this.$set(this, 'manageStatus', null);
				} else {
					this.$set(this, 'manageStatus', type);
				}
				this.$set(this.queryParams, 'page', 1);
				this.getList()
			},
			//查询类型切换
			tabClickTow(index) {
				this.$set(this.queryParams, 'page', 1);
				this.$set(this, 'deptData', {
					index: null,
					list: this.deptData.list,
					id: null,
					name: null
				});
				this.$set(this, 'searchValue', null);
				this.$set(this, 'levelId', null);
				this.$set(this, 'getDataType', false);
				this.$set(this, 'dataList', []);
				this.$set(this, 'total', 0);
				this.$set(this, 'tabIndexTow', index);
				this.$nextTick(() => {
					this.getList();
				})
			},
			//实验室搜索框跳转
			srearchClick() {
				let infoData = this.optionData;
				infoData.pageType = this.tabIndexTow;
				infoData.laboratoryStatus = this.tabIndexTow;
				infoData.tabIndexTow = this.tabIndexTow;
				uni.navigateTo({
					url: '/pages_safetyCheck/views/snapshotManage/laboratorySearch?form=' + encodeURIComponent(
						JSON.stringify(infoData))
				});
			},
			//计划详情
			planClick() {
				let infoData = {
					planId: this.optionData.planId
				};
				uni.navigateTo({
					url: '/pages_safetyCheck/views/planDetail?infoData=' + encodeURIComponent(JSON.stringify(
						infoData))
				});
			},
			//实验室列表数据选择
			listClick(row) {
				let infoData = row;
				infoData.pageType = this.tabIndexTow;
				infoData.planTitle = this.optionData.planTitle;
				infoData.checkCategory = this.optionData.checkCategory;
				infoData.checkTypeName = this.optionData.checkTypeName;
				infoData.crossCheck = this.optionData.crossCheck;
				infoData.checkPlanSetVoList = this.optionData.checkPlanSetVoList;
				uni.navigateTo({
					url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItems?infoData=' + encodeURIComponent(
						JSON.stringify(infoData))
				});
			},
			//搜索房间接口
			async buildBySub() {
				let self = this;
				const {
					data
				} = await laboratorySubRelInfoGetRelList({
					'searchValue': this.form.searchValue,
				});
				if (data.code == 200) {
					if (data.data[0]) {
						this.roomList = data.data;
					} else {
						uni.showToast({
							title: '未找到相关实验室',
							icon: "none",
							mask: true,
							duration: 2000
						});
					}
				}
			},

			//查询检查项
			async securityAppCheckSetOptionList(item) {
				let self = this;
				let upData = item;
				let obj = {
					page: 1,
					pageSize: 20,
					checkStatus: '0',
					manageId: upData.manageId,
				}
				const {
					data
				} = await securityAppCheckSetOptionList(obj);
				if (data.code == 200) {
					if (data.data.records[0]) {
						let infoData = self.optionData;
						infoData.pageType = self.tabIndexTow;;
						infoData.itemsStatus = 0;
						infoData.subName = upData.subName;
						infoData.roomNum = upData.roomNum;
						infoData.subId = data.data.records[0].subId;
						infoData.manageId = data.data.records[0].manageId;
						infoData.setOptionId = data.data.records[0].setOptionId;
						infoData.hazardCheckPro = data.data.records[0].hazardCheckPro;
						uni.navigateTo({
							url: '/pages_safetyCheck/views/inspectManage/conductInspections?infoData=' +
								encodeURIComponent(
									JSON
									.stringify(infoData))
						});
					} else {
						self.dialogStatus = 0;
						self.dialogVisible = false;
						uni.showToast({
							title: '该实验室暂无检查项!',
							icon: "none",
							mask: true,
							duration: 2000
						});
						return
					}
				}
			},
			/******调用摄像头******/
			saoCode() {
				let self = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						let list = res.result.split("?")[1].split("&");
						let codeData = {};
						list.forEach((item) => {
							codeData[item.split("=")[0]] = item.split("=")[1];
						})
						if (codeData.code) {
							self.saoList(codeData.subId);
						} else {
							uni.showToast({
								title: '请扫描正确的二维码',
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					}
				});
			},
			//扫一扫查询数据
			async saoList(subId) {
				let obj = {
					planSetId: this.planSetId,
					subId: subId,
				}
				if (this.tabIndexTow == 0) {
					//检查计划
					const {
						data
					} = await securityAppCheckManageList(obj);
					if (data.code == 200) {
						if (data.data.records[0]) {
							this.securityAppCheckSetOptionListTow(data.data.records[0], 0)
							//跳转检查项列表页面
							/* let infoData = data.data.records[0];
							infoData.pageType = this.tabIndexTow;
							infoData.checkPlanSetVoList = this.optionData.checkPlanSetVoList;
							uni.navigateTo({
								url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItems?infoData=' +
									encodeURIComponent(
										JSON.stringify(infoData))
							}); */
						} else {
							//未找到数据提示
							uni.showToast({
								title: '未找到该实验室与本计划批次关联的数据',
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					}
				} else if (this.tabIndexTow == 1) {
					//复查计划
					obj.planId = this.optionData.planId;
					const {
						data
					} = await securityAppCheckDangerReviewSubList(obj);
					if (data.code == 200) {
						if (data.data[0] && data.data[0].stayExamineCheckNum != 0) {
							//跳转检查项列表页面
							let infoData = data.data[0];
							infoData.pageType = this.tabIndexTow;
							infoData.checkPlanSetVoList = this.optionData.checkPlanSetVoList;
							uni.navigateTo({
								url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItems?infoData=' +
									encodeURIComponent(
										JSON.stringify(infoData))
							});
						} else {
							//未找到数据提示
							uni.showToast({
								title: '未找到该实验室与本计划批次关联的数据',
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					}
				} else if (this.tabIndexTow == 2) {
					//整改计划
					obj.planId = this.optionData.planId;
					obj.userId = uni.getStorageSync('userId');
					const {
						data
					} = await securityAppCheckDangerGetCheckDangerSubList(obj);
					if (data.code == 200) {
						if (data.data[0]) {
							//跳转检查项列表页面
							let infoData = data.data[0];
							infoData.pageType = this.tabIndexTow;
							infoData.checkPlanSetVoList = this.optionData.checkPlanSetVoList;
							uni.navigateTo({
								url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItems?infoData=' +
									encodeURIComponent(
										JSON.stringify(infoData))
							});
						} else {
							//未找到数据提示
							uni.showToast({
								title: '未找到该实验室与本计划批次关联的数据',
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					}
				}
			},
			async securityAppCheckSetOptionListTow(item, checkStatus) {
				let self = this;
				let upData = item;
				let obj = {
					page: 1,
					pageSize: 20,
					checkStatus: checkStatus,
					manageId: upData.manageId,
				}
				this.inspectRemporaryList = [];
				const {
					data
				} = await securityAppCheckSetOptionList(obj);
				if (data.code == 200 && checkStatus == 0) { //先查询待检查数据
					if (data.data.records[0]) {
						let infoData = self.optionData;
						infoData.pageType = 0;
						infoData.subName = upData.subName;
						infoData.roomNum = upData.roomNum;
						infoData.subId = data.data.records[0].subId;
						infoData.manageId = data.data.records[0].manageId;
						infoData.setOptionId = data.data.records[0].setOptionId;
						infoData.hazardCheckPro = data.data.records[0].hazardCheckPro;
						infoData.checkCategory = data.data.records[0].checkCategory;
						uni.navigateTo({
							url: '/pages_safetyCheck/views/inspectManage/conductInspections?infoData=' +
								encodeURIComponent(
									JSON
									.stringify(infoData))
						});
					} else {
						uni.showToast({
							title: '该实验室暂无检查工作!',
							icon: "none",
							mask: true,
							duration: 2000
						});
					}
				}
			},
			//学院选择
			deptChange(e) {
				let self = this;
				self.deptData.list.forEach(function(item, index) {
					if (index == e.detail.value) {
						if (!item.deptId) {
							self.$set(self.deptData, 'id', null)
							self.$set(self.deptData, 'name', null)
						} else {
							self.$set(self.deptData, 'id', item.deptId)
							self.$set(self.deptData, 'name', item.deptName)
						}
					}
				})
				this.$set(this, 'getDataType', false);
				this.$set(this.queryParams, 'page', 1);
				this.getList();
			},
			//获取院系
			async systemDeptDropList() {
				const {
					data
				} = await systemDeptDropList({
					deptName: '',
					level: 2,
					deptType: 1
				});
				if (data.code == 200) {
					data.data.unshift({
						deptid: null,
						deptName: '全部'
					})
					this.$set(this.deptData, 'list', data.data);
				}
			},
			//获取分级
			async laboratoryLevelConfigGetWebLevelTitleList() {
				let self = this;
				const {
					data
				} = await laboratoryLevelConfigGetWebLevelTitleList({});
				if (data.code == 200) {
					data.data.forEach(function(item) {
						item.levelName = item.levelName.split('/')[0]
						if (item.levelColor) {
							item.levelColorTow = self.hexToRgb(item.levelColor, 0.2)
						}
					})
					this.$set(this, 'levelList', data.data);
				}
			},
			//回车触发
			carriageReturnRequest() {
				this.$set(this, 'getDataType', false);
				this.$set(this.queryParams, 'page', 1);
				this.getList();
			},
			//检查任务
			async getList() {
				let self = this;

				let obj = JSON.parse(JSON.stringify(this.queryParams));
				obj.planSetId = this.planSetId;
				obj.deptId = this.deptData.id ? this.deptData.id : '';
				obj.searchValue = this.searchValue ? this.searchValue : '';
				obj.levelId = this.levelId ? this.levelId : '';
				if (this.manageStatus == 0 || this.manageStatus == 2) {
					obj.manageStatus = this.manageStatus;
				} else {
					obj.manageStatus = '';
				}
				if (this.tabIndexTow == 0) {
					//检查计划
					const {
						data
					} = await securityAppCheckManageList(obj);
					if (data.code == 200) {

						data.data.records.forEach(function(item) {
							if (item.classLevelColor) {
								item.classLevelColorTow = self.hexToRgb(item.classLevelColor, 0.2)
							}

						})
						if (self.queryParams.page == 1) {
							this.dataList = data.data.records;
							this.total = data.data.total;
							if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
								this.$set(this, 'getDataType', true);
							}
						} else {
							this.dataList = [...this.dataList, ...data.data.records]
							this.total = data.data.total;
							if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
								this.$set(this, 'getDataType', true);
							}
						}

					}
				} else if (this.tabIndexTow == 1) {
					//复查计划
					obj.planId = this.optionData.planId;
					const {
						data
					} = await securityAppCheckDangerReviewSubList(obj);
					if (data.code == 200) {
						this.dataList = data.data;
						this.$set(this, 'getDataType', true);
						// 后台接口暂时不支持分页
						// if (self.queryParams.page == 1) {
						// 	this.dataList = data.data.records;
						// 	this.total = data.data.total;
						// 	if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
						// 		this.$set(this, 'getDataType', true);
						// 	}
						// } else {
						// 	this.dataList = [...this.dataList, ...data.data.records]
						// 	this.total = data.data.total;
						// 	if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
						// 		this.$set(this, 'getDataType', true);
						// 	}
						// }
					}

				} else if (this.tabIndexTow == 2) {
					//整改计划
					obj.planId = this.optionData.planId;
					obj.userId = uni.getStorageSync('userId');
					const {
						data
					} = await securityAppCheckDangerGetCheckDangerSubList(obj);
					if (data.code == 200) {
						this.dataList = data.data;
						this.$set(this, 'getDataType', true);
						// 后台接口暂时不支持分页
						// if (self.queryParams.page == 1) {
						// 	this.dataList = data.data.records;
						// 	this.total = data.data.total;
						// 	if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
						// 		this.$set(this, 'getDataType', true);
						// 	}
						// } else {
						// 	this.dataList = [...this.dataList, ...data.data.records]
						// 	this.total = data.data.total;
						// 	if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
						// 		this.$set(this, 'getDataType', true);
						// 	}
						// }
					}

				}
			},
			//十六进制颜色值和RGB格式转换
			hexToRgb(hex, opacity = 1) {
				// 去除#号
				var color = hex.replace("#", "");
				// 分割成红、绿、蓝三部分的16进制字符串
				var red = parseInt(color.substring(0, 2), 16);
				var green = parseInt(color.substring(2, 4), 16);
				var blue = parseInt(color.substring(4, 6), 16);
				return `RGB(${red}, ${green}, ${blue},${opacity})`;
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.snapshotList {
		height: 100%;
		display flex;
		overflow: hidden;

		.info-max-box {
			padding-top: 20rpx;
		}

		.title {
			width: 690rpx;
			margin: 0 30rpx 20rpx;
			height: 150rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.title-l {
				width: 594rpx;

				.title-l-t {
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.title-l-b {
					display: flex;
					justify-content: flex-start;
					margin-top: 16rpx;

					>view {
						width: 130rpx;
						height: 50rpx;
						background: rgba(1, 131, 250, 0.2);
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-size: 24rpx;
						color: #0183FA;
						line-height: 50rpx;
						text-align: center;
						margin-right: 14rpx;
					}
				}
			}

			.title-r {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.tabTitleTow {
			width: 690rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			margin: 20rpx 0 0 30rpx;

			>view:nth-of-type(1) {
				width: 230rpx;
				height: 80rpx;
				border-radius: 50rpx 0rpx 0rpx 50rpx;
			}

			>view:nth-of-type(2) {
				width: 230rpx;
				height: 80rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}

			>view:nth-of-type(3) {
				width: 230rpx;
				height: 80rpx;
				border-radius: 0rpx 50rpx 50rpx 0rpx;
			}

			.tab-C {
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				background: #0183FA;
			}

			.tab-D {
				font-size: 30rpx;
				color: #333333;
				line-height: 80rpx;
				text-align: center;
				background: #FFFFFF;
			}
		}

		.srearch {
			width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			overflow: hidden;
			display: flex;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.college {
				width: 200rpx;
				height: 60rpx;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				border: 2rpx solid #E0E0E0;
				font-size: 24rpx;
				color: #333333;
				line-height: 60rpx;
				text-align: left;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 26rpx;
				box-sizing: border-box;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				>view {
					width: 124rpx;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				>img {
					display: block;
					width: 24rpx;
					height: 12rpx;
				}
			}

			.srearch-n {
				width: 690rpx;
				height: 60rpx;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				border: 2rpx solid #E0E0E0;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.srearch-l {
					width: 60rpx;
					height: 60rpx;

					>img {
						width: 20rpx;
						height: 20rpx;
						margin: 20rpx 0 0 26rpx;
					}
				}

				.srearch-c {
					flex: 1;
					height: 58rpx;
					font-size: 24rpx;
					color: #999999;
					line-height: 30rpx;
					text-align: left;
				}

				.srearch-r {
					width: 90rpx;
					height: 60rpx;

					>img {
						width: 30rpx;
						height: 30rpx;
						margin: 14rpx 22rpx 0 30rpx;
					}


				}
			}
		}

		.level {
			width: 750rpx;
			height: 80rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: flex-start;
			padding: 30rpx 30rpx 0;
			box-sizing: border-box;
			margin-top: 20rpx;

			.level-li {
				width: 100rpx;
				height: 50rpx;
				background: #F5F5F5;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				border: 2rpx solid #E0E0E0;
				margin-right: 10rpx;
				font-size: 24rpx;
				color: #333333;
				line-height: 50rpx;
				text-align: center;
			}

			.level-r {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin: 0 20rpx 0 30rpx;

				.level-r-A {
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					border: 1rpx solid #E0E0E0;
					width: 100rpx;
					height: 60rpx;
					background: #E0E0E0;
					font-weight: normal;
					font-size: 24rpx;
					color: #333333;
					line-height: 60rpx;
					text-align: center;
					margin-right: 10rpx;
				}

				.level-r-B {
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					border: 1rpx solid #0183FA;
					width: 100rpx;
					height: 60rpx;
					background: #0183FA;
					font-weight: normal;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: center;
					margin-right: 10rpx;
				}
			}

			#levelColor-A {
				background: rgba(255, 0, 0, 0.2);
				color: #FF0000;
				border: 1rpx solid #FF0000;
			}

			#levelColor-B {
				background: #F5F5F5;
				color: #333333;
				border: 2rpx solid #E0E0E0;
			}

		}

		.list {
			width: 750rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.list-li {
				width: 690rpx;
				min-height: 240rpx;
				background: #FFFFFF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				.list-li-t {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					height: 90rpx;
					border-bottom: 2rpx dashed #D8D8D8;

					.list-li-t-l {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}

					.list-li-t-c {
						width: 264rpx;
						font-size: 30rpx;
						color: #333333;
						line-height: 30rpx;
						text-align: left;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-right: 24rpx;
					}

					.list-li-t-r {
						display: flex;
						justify-content: flex-start;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						width: 200rpx;
						height: 40rpx;
						margin-left: 10rpx;

						>text {
							display: inline-block;
							flex: 1;
							text-align: center;
							font-size: 24rpx;
							line-height: 40rpx;
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.list-li-b {
					overflow: hidden;

					.list-li-b-t {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						>img {
							width: 28rpx;
							height: 26rpx;
							margin-right: 16rpx;
						}

						font-size: 28rpx;
						color: #666666;
						line-height: 30rpx;
						text-align: left;
						margin-top: 32rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

					}

					.list-li-b-b {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 20rpx;

						.list-li-b-b-l {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							>img {
								width: 28rpx;
								height: 26rpx;
								margin-right: 16rpx;
							}

							font-size: 28rpx;
							color: #666666;
							line-height: 30rpx;
							text-align: left;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.finished {
							width: 110rpx;
							height: 40rpx;
							background: rgba(1, 131, 250, 0.2);
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							font-size: 24rpx;
							color: #0183FA;
							line-height: 40rpx;
							text-align: center;
						}

						.notFinished {
							width: 110rpx;
							height: 40rpx;
							background: #E0E0E0;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							font-size: 24rpx;
							color: #666666;
							line-height: 40rpx;
							text-align: center;
						}
					}
				}
			}
		}

		.get-data-null-p {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		#color-A {
			color: #0183FA;
		}

		#color-B {
			color: #FF8C00;
		}

		#color-C {
			color: #16B531;
		}

		.saoCode {
			position: fixed;
			left: 288rpx;
			bottom: 20rpx;
			width: 160rpx;
			height: 160rpx;
		}
	}
</style>