v3-lab-xcx/pages/views/dataBoard/dataBoard.vue

<!-- 数据看板-首页 -->
<template>
	<view class="dataBoard">
		<nav-bar :title="title" style="position: absolute; z-index: 1000;"></nav-bar>
		<view class="header">
			<img class="header-bg" src="@/pages/images/dataBoard/dataBoard-icon1.png">
			<view class="header-t">
				<img class="header-t-l" src="@/pages/images/icon_aqbj.png">
				<view class="header-t-r">管理面板</view>
			</view>
			<view class="header-b">
				<view class="header-b-li">
					<view class="header-b-li-t color-A">999</view>
					<view class="header-b-li-b">今日访问人数</view>
				</view>
				<view class="line"></view>
				<view class="header-b-li">
					<view class="header-b-li-t color-B">165</view>
					<view class="header-b-li-b">今日实验人数</view>
				</view>
				<view class="line"></view>
				<view class="header-b-li">
					<view class="header-b-li-t color-C">39</view>
					<view class="header-b-li-b">今日值日人数</view>
				</view>
				<view class="line"></view>
				<view class="header-b-li">
					<view class="header-b-li-t color-D">562</view>
					<view class="header-b-li-b">今日检查次数</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-x @scrolltolower="scrollGet">
			<view class="tabTitle_tow">
				<view class="tabTitle_tow_li" @tap="tabClickTow(item,index)" :key="index"
					v-for="(item,index) in tabTextTow">
					<view :class="{on:curTabTow==index}" class="tabTitle_tow_text">{{item}}</view>
					<view :class="{on:curTabTow==index}" class="tabTitle_tow_across"></view>
				</view>
			</view>
		</scroll-view>
		<lab-page v-if="pageType==1"></lab-page>
		<hazard-sources v-if="pageType==2"></hazard-sources>
	</view>
	
</template>


<script>
	import {
		navBar
	} from '@/pages/component/navbar.vue'
	import {labPage} from '@/pages/views/dataBoard/labPage.vue'
	import {hazardSources} from '@/pages/views/dataBoard/hazardSources.vue'
	import {
		config
	} from '@/api/request/config.js'
	import {

	} from '@/pages_basics/api/index.js'
	export default {
		name: "dataBoard",
		components: {
			navBar,
			labPage,
			hazardSources,
		},
		data() {
			return {
				pageType:2,
				navHeight: uni.getStorageSync('navHeight'),
				title: '实验室安全智能监测与控制系统',
				baseUrl: config.base_url,

				// 查询参数
				queryParams: {
					page: 1,
					pageSize: 10,
				},
				dataList: [],
				total: 0,
				tabTextTow: ['实验室','危险源','危化品','安全隐患','预警处置','设备管控','大仪预约','笼位预约','资源预约'],
				curTabTow: 0,
			}
		},
		created() {

		},
		beforeMount() {

		},
		mounted() {},
		methods: {
			//滚动加载事件
			scrollGet() {
				if (this.total / this.queryParams.pageSize <= this.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//顶部tab点击
			tabClickTow(item, index) {
				this.curTabTow = index;
			},

			async getList() {
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.queryParams));
				const {
					data
				} = await laboratoryAppletPassOutList(obj);
				if (data.code == 200) {
					let list = [];
					if (this.queryParams.page != 1) {
						list = JSON.parse(JSON.stringify(this.dataList));
					}
					data.data.records.forEach((item) => {
						let num = 0;
						list.forEach((minItem) => {
							if (item.showInTime == minItem.showInTime) {
								num++
								minItem.list.push(item)
							}
						})
						if (num == 0) {
							list.push({
								showInTime: item.showInTime,
								list: [item]
							})
						}
					})
					this.$set(this, 'dataList', list);
					this.$set(this, 'total', data.data.total);
					if (data.data.total / this.queryParams.pageSize <= this.queryParams.page) {
						this.$set(this, 'getDataType', true);
					}
				}
			},
		},
	}
</script>


<style lang="stylus" scoped>
	.dataBoard {
		height: 100%;
		width: 100%;
		background: #363744;

		.header {
			width: 750rpx;
			height: 476rpx;
			position: relative;

			.header-bg {
				width: 750rpx;
				height: 476rpx;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 100;
			}

			.header-t {
				width: 100%;
				height: 50rpx;
				position: absolute;
				left: 0;
				top: 154rpx;
				z-index: 200;

				.header-t-l {
					width: 300rpx;
					height: 50rpx;
					position: absolute;
					left: 30rpx;
					top: 0;
				}

				.header-t-r {
					position: absolute;
					right: 0;
					top: 0;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 50rpx;
					text-align: left;
					width: 160rpx;
					height: 50rpx;
					background: rgba(54, 55, 68, 0.6);
					padding-left: 24rpx;
					border-radius: 24rpx 0 0 24rpx;
				}
			}

			.header-b {
				position: absolute;
				left: 30rpx;
				top: 302rpx;
				z-index: 200;
				width: 689rpx;
				height: 150rpx;
				background: rgba(62, 65, 79, 0.4);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.header-b-li {
					flex: 1;
					text-align: center;

					.header-b-li-t {
						font-weight: 400;
						font-size: 36rpx;
						line-height: 50rpx;
						margin-top: 32rpx;
						margin-bottom: 9rpx;
					}

					.header-b-li-b {
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 34rpx;
					}
				}

				.line {
					width: 2rpx;
					height: 30rpx;
					background: #D8D8D8;
				}

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

				.color-B {
					color: #2EA805;
				}

				.color-C {
					color: #00FFE5;
				}

				.color-D {
					color: #FF8C00;
				}
			}
		}
		.tabTitle_tow {
			height: 80rpx;
			white-space: nowrap;
			display: inline-flex;
			background: #3E414F;
			.tabTitle_tow_li {
				position: relative;
				width: 152rpx;
				height: 80rpx;
				text-align center;
				padding-top: 18rpx;
				box-sizing: border-box;
		
				.tabTitle_tow_text {
					display: inline-block;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 46rpx;
					position: relative;
		
					&.on {
						color: #0183FA;
					}
				}
		
				.tabTitle_tow_across {
					width: 50rpx;
					height: 4rpx;
					background: #0183FA;
					border-radius: 2rpx;
					margin-left: 33%;
					margin-top: 16rpx;
					display none;
		
					&.on {
						display block;
					}
				}
		
			}
		}
	}
</style>