FE-lab-xcx/pages_manage/views/laboratory/meLaboratory.vue

<!-- 实验室列表 -->
<template>
	<view id="meLaboratory">
		<view class="top-picker-max-box">
			<view class="top-picker-box">
				<picker @change="facultyChange" :value="facultyIndex" :range="facultyArray">
					<view class="picker-view">
						<view>{{!facultyIndex?'二级单位':facultyArray[facultyIndex]}}</view>
						<img class="picker-img" src="@/pages_manage/images/icon_06.png" alt="">
					</view>
				</picker>
			</view>
			<view class="top-picker-box">
				<picker @change="subjectChange" :value="subjectIndex" :range="subjectArray">
					<view class="picker-view">
						<view>{{!subjectIndex?'分类':subjectArray[subjectIndex]}}</view>
						<img class="picker-img" src="@/pages_manage/images/icon_06.png" alt="">
					</view>
				</picker>
			</view>
			<view class="top-picker-box">
				<picker @change="levelChange" :value="levelIndex" :range="levelArray">
					<view class="picker-view">
						<view>{{!levelIndex?'分级':levelArray[levelIndex]}}</view>
						<img class="picker-img" src="@/pages_manage/images/icon_06.png" alt="">
					</view>
				</picker>
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="for-max-box">
			<img class="null-img" v-if="!dataList[0]" src="@/pages_manage/images/null-data-1.png">
			<view class="for-box" v-for="(item,index) in dataList" :key="index" @click="tableButton('subDetail',item)">
				<view class="title-box">
					<view :style="'border:1rpx solid '+item.levelColor+';background:#fff;color:'+item.levelColor+';'">
						{{ item.levelName }}
					</view>
					<view>{{ item.subName}}</view>
					<img src="@/pages_manage/images/icon_04.png">
				</view>
				<view class="address-box"><span>{{ item.typeName }}</span>{{ item.deptName }}</view>
				<view class="address-box-two">
					<img src="@/pages_manage/images/icon_14.png">
					<view>{{ item.buildName}} {{ item.floorName}} {{ item.subName}} {{ item.roomName}}</view>
				</view>
			</view>
			<view class="get-data-null-p" v-if="getDataType">- 没有更多数据 -</view>
		</scroll-view>
	</view>
</template>

<script>
	import $mqtt from '@/utils/mqtt.min.js';
	import {
		config
	} from '@/api/request/config.js'
	import {
		laboratoryList,
		subject_class,
		listDepartments,
		mangerControl,
		laboratoryInfo
	} from '@/api/apiDemo/index.js'
	import {
		systemDeptDropList,
		laboratoryClassTypeGetList,
		laboratoryClassLevelGetList,
		laboratoryAppletSubList,
		laboratoryAppletGetSubDetailInfo
	} from '@/pages_manage/api/index.js'
	export default {
		data() {
			return {
				total: 0,
				dataList: [],
				getDataType: false,
				//院系选择器数据
				facultyList: [],
				facultyArray: [],
				facultyIndex: "",
				//分类选择器数据
				subjectList: [],
				subjectArray: [],
				subjectIndex: "",
				//级别选择器数据
				levelList: [],
				levelArray: [],
				levelIndex: "",
				// 查询参数
				queryParams: {
					page: 1,
					pageSize: 10,
				},
			}
		},
		onLoad() {

		},
		onShow() {
			this.systemDeptDropList();
			this.laboratoryClassTypeGetList();
			this.laboratoryClassLevelGetList();
			this.getList()
		},
		methods: {
			//选择学院
			facultyChange: function(e) {
				if (this.facultyArray[0]) {
					this.facultyIndex = parseInt(e.target.value);
					this.getList();
				}
			},
			//选择类型
			subjectChange: function(e) {
				if (this.subjectArray[0]) {
					this.subjectIndex = parseInt(e.target.value);
					this.getList();
				}
			},
			//选择级别
			levelChange: function(e) {
				if (this.levelArray[0]) {
					this.levelIndex = parseInt(e.target.value);
					this.getList();
				}
			},
			//获取院系
			async systemDeptDropList() {
				const {
					data
				} = await systemDeptDropList({
					deptName: '',
					level: 2,
					deptType: 1
				});
				if (data.code == 200) {
					let list = [];
					for (let i = 0; i < data.data.length; i++) {
						list.push(data.data[i].deptName)
					}
					this.facultyArray = list;
					list.unshift('全部');
					this.facultyList = data.data;
					this.facultyList.unshift({
						deptName: "全部",
						deptId: ""
					})
				}
			},
			//分类下拉列表
			async laboratoryClassTypeGetList() {
				const {
					data
				} = await laboratoryClassTypeGetList();
				if (data.code == 200) {
					let list = [];
					for (let i = 0; i < data.data.length; i++) {
						list.push(data.data[i].typeName)
					}
					this.subjectArray = list;
					list.unshift('全部分类');
					this.subjectList = data.data;
					this.subjectList.unshift({
						typeName: "全部分类",
						typeId: ""
					})
				}
			},
			//分级下拉列表
			async laboratoryClassLevelGetList() {
				const {
					data
				} = await laboratoryClassLevelGetList();
				if (data.code == 200) {
					let list = [];
					for (let i = 0; i < data.data.length; i++) {
						list.push(data.data[i].levelName)
					}
					this.levelArray = list;
					list.unshift('全部分类');
					this.levelList = data.data;
					this.levelList.unshift({
						levelName: "全部分类",
						levelId: ""
					})
				}
			},
			//滚动加载事件
			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();
					})
				}
			},
			//获取实验室列表
			async getList() {
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.queryParams));
				obj.deptId = this.facultyIndex ? this.facultyList[this.facultyIndex].deptId : '';
				obj.typeId = this.subjectIndex ? this.subjectList[this.subjectIndex].typeId : '';
				obj.levelId = this.levelIndex ? this.levelList[this.levelIndex].levelId : '';
				const {
					data
				} = await laboratoryAppletSubList(obj);
				if (data.code == 200) {
					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);
					}
				}
			},
			tableButton(type, row) {
				let self = this;
				if (type == 'subDetail') {
					//实验室详情
					this.laboratoryAppletGetSubDetailInfo(row.infoId)

				}
			},
			//获取实验室详情
			async laboratoryAppletGetSubDetailInfo(infoId) {
				const {
					data
				} = await laboratoryAppletGetSubDetailInfo({
					infoId: infoId
				});
				if (data.code == 200) {
					uni.navigateTo({
						url: '/pages_manage/views/laboratory/infoPage?infoData=' + encodeURIComponent(JSON.stringify(data.data))
					});
				}
			},
		},
	}
</script>

<style lang="stylus" scoped>
	#meLaboratory {
		height: 100%;

		display flex;
		flex-direction column;

		.top-picker-max-box {
			display: flex;
			padding: 0 20rpx;
			background #fff;
			border-bottom: 1rpx solid #E0E0E0;

			.top-picker-box {
				line-height: 80rpx;
				height: 80rpx;

				.picker-view {
					display flex;

					view {
						display: block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
					}

					.picker-img {
						width: 24rpx;
						height: 13rpx;
						margin-top: 36rpx;
						margin-left: 13rpx;
					}
				}
			}

			.top-picker-box:nth-child(1) {
				text-align left;
				width: 320rpx;

				.picker-view {
					view {
						max-width: 260rpx;
					}
				}
			}

			.top-picker-box:nth-child(2) {
				text-align left;
				width: 215rpx;

				.picker-view {
					view {
						max-width: 156rpx;
					}
				}
			}

			.top-picker-box:nth-child(3) {
				text-align right;
				width: 195rpx;

				.picker-view {
					view {
						flex: 1;

					}
				}
			}
		}

		.for-max-box {
			flex: 1;

			overflow-y scroll;

			.null-img {
				display block;
				width: 276rpx;
				height: 321rpx;
				position absolute;
				top: 200rpx;
				left: 274rpx;
			}

			.for-box:nth-child(1) {
				border-top: none;
			}

			.for-box {
				border-top: 4rpx solid #dedede;
				overflow hidden;
				background #ffffff;
				margin-bottom: 20rpx;

				.title-box {
					margin: 20rpx 20rpx 0;

					display flex;

					view:nth-child(1) {
						height: 40rpx;
						line-height: 40rpx;
						font-size: 20rpx;
						border-radius: 10rpx;
						padding: 0 20rpx;
						color: #fff;
						margin-right: 20rpx;
					}

					view:nth-child(2) {
						line-height: 42rpx;
						font-size: 30rpx;
						color: #333;
						max-width: 600rpx;
						flex: 1;
					}

					img {
						width: 12rpx;
						height: 20rpx;
						margin-top: 11rpx;
					}

					.colorA {
						background: #aa2315;
					}

					.colorB {
						background: #ff9b09;
					}

					.colorC {
						background: #3ea3e9;
					}

					.colorD {
						background: #3ea34c;
					}

				}

				.address-box {
					margin: 20rpx 20rpx;
					font-size: 26rpx;
					color: #999999;

					span {
						margin-right: 60rpx;
					}
				}

				.address-box-two {
					display flex;
					margin: 0 20rpx 20rpx 20rpx;

					img {
						width: 28rpx;
						height: 30rpx;
						margin-right: 18rpx;
					}

					view {
						line-height: 30rpx;
						font-size: 24rpx;
						color: #999999;
					}
				}

				/*安全报警*/
				.for-img-box {
					border-top: 1rpx solid #e0e0e0;
					margin: 0 20rpx;

					.for-img-min-box {
						display flex img {
							width: 30rpx;
							height: 27rpx;
							margin-top: 24rpx;
							margin-right: 10rpx;
						}

						view {
							line-height: 74rpx;
							text-align center;
							font-size: 28rpx;
							color: #EE3A3A;
						}
					}
				}

				.button-view {
					margin: 0 20rpx;
					border-top: 1rpx dashed #e0e0e0;
					line-height: 90rpx;
					text-align: center;
					font-size: 26rpx;
					color: #333;
				}
			}

			.get-data-null-p {
				text-align: center;
				line-height: 40rpx;
				padding-bottom: 40px;
				color: #999;
			}
		}
	}
</style>