v3-h5-web/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="imagesUrl('dataBoard/dataBoard-icon1.png')">
			<view class="header-t">
				<img class="header-t-l" :src="rectangleLogo">
				<img class="header-t-r" @click="outButton" :src="imagesUrl('dataBoard/dataBoard-icon5.png')">
				<!-- <view class="header-t-r" @click="outButton">管理面板</view> -->
			</view>
			<view class="header-b">
				<view class="header-b-li">
					<view class="header-b-li-t color-A">{{visitorCount}}</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">{{labOccupancyCount}}</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">{{dutyCount}}</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">{{checkCount}}</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" class="pageFlex"></lab-page>
		<hazard-sources v-if="pageType==2" class="pageFlex"></hazard-sources>
		<hazardous-chemicals v-if="pageType==3" class="pageFlex"></hazardous-chemicals>
		<security-hidden v-if="pageType==4" class="pageFlex"></security-hidden>
		<warning-dispose v-if="pageType==5" class="pageFlex" style="flex:1;"></warning-dispose>
		<equipment-control v-if="pageType==6" class="pageFlex"></equipment-control>
		<da-yi-reservation v-if="pageType==7" class="pageFlex"></da-yi-reservation>
		<cage-position v-if="pageType==8" class="pageFlex"></cage-position>
		<resource-reservation v-if="pageType==9" class="pageFlex"></resource-reservation>
	</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 hazardousChemicals from '@/pages/views/dataBoard/hazardousChemicals.vue'
	import securityHidden from '@/pages/views/dataBoard/securityHidden.vue'
	import warningDispose from '@/pages/views/dataBoard/warningDispose.vue'
	import equipmentControl from '@/pages/views/dataBoard/equipmentControl.vue'
	import daYiReservation from '@/pages/views/dataBoard/daYiReservation.vue'
	import cagePosition from '@/pages/views/dataBoard/cagePosition.vue'
	import resourceReservation from '@/pages/views/dataBoard/resourceReservation.vue'
	import {
		config
	} from '@/api/request/config.js'
	import {
		reportAppStatisticsCountStatistics
	} from '@/pages/api/index.js'
	export default {
		name: "dataBoard",
		components: {
			navBar,
			labPage,
			hazardSources,
			hazardousChemicals,
			securityHidden,
			warningDispose,
			equipmentControl,
			daYiReservation,
			cagePosition,
			resourceReservation,
		},
		data() {
			return {
				pageType: 1,
				rectangleLogo: uni.getStorageSync('rectangleLogo'),
				navHeight: uni.getStorageSync('navHeight'),
				title: '实验室安全智慧化管控系统',
				baseUrl: config.base_url,

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

		},
		beforeMount() {

		},
		mounted() {
			this.reportAppStatisticsCountStatistics();
		},
		methods: {
			//返回按钮
			outButton() {
				this.$parent.goHome();
			},
			//滚动加载事件
			scrollGet() {

			},
			//顶部tab点击
			tabClickTow(item, index) {
				this.curTabTow = index;
				this.pageType = index + 1
			},
			//人员统计
			async reportAppStatisticsCountStatistics() {
				let self = this;
				const {
					data
				} = await reportAppStatisticsCountStatistics();
				if (data.code == 200) {
					this.$set(self, 'visitorCount', data.data.visitorCount);
					this.$set(self, 'labOccupancyCount', data.data.labOccupancyCount);
					this.$set(self, 'dutyCount', data.data.dutyCount);
					this.$set(self, 'checkCount', data.data.checkCount);
				}
			},
			async getList() {
				let self = this;
				const {
					data
				} = await reportAppStatisticsPersonDeviceSafety();
				if (data.code == 200) {
					this.dataList = data.data;
				}
			},


		},
	}
</script>


<style lang="stylus" scoped>
	.dataBoard {
		display: flex;
		flex-direction: column;
		flex:1;
		// height: 100%;
		// width: 100%;
		background: #363744;

		.pageFlex {
			display: flex;
		}

		.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%;
				position: absolute;
				left: 0;
				top: 164rpx;
				z-index: 200;

				.header-t-l {
					width: 400rpx;
					height: 88rpx;
					position: absolute;
					left: 0rpx;
					top: 0;
				}

				.header-t-r {
					width: 130rpx;
					height: 109rpx;
					position: fixed;
					right: 0;
					top: 180rpx;
					/* position: absolute;
					right: 0;
					top: 20rpx;
					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:6rpx auto 0;
					display none;

					&.on {
						display block;
					}
				}

			}
		}
	}
</style>