leromro-mini/pages_qiun/pages/main/index.vue

<template>
	<view class="window">
		<!-- #ifndef H5 -->
		<view class="topLine" :style="{ height: topBar + 'px' }"></view>
		<!-- #endif -->
		<view class="nav row_align_center" id="nav">
			<li class="li_5" :class="['iconfont icon-zuojiantou back']" @click="gotoBack()"></li>
			<text class="title li_5">{{ title ? title : '' }}</text>
			<li class="iconfont icon-zuojiantou back hidden"></li>
		</view>
		<view class="row_align_center head" id="head">
			<!-- 日期下拉列表 -->
			<drop-down ref="caleDrop" @tap="changDrop(1)" @changeItem="changeTime" :list="timeArray" :contentTop="top"
				selectWidth="260rpx" contentLeft="0"></drop-down>
			<!-- 日历选择日期 -->
			<view v-if="showCalendar"
				:class="['dropdown-item__selected', listWidth != '150rpx' ? 'dropdown-item__right' : 'dropdown-item__left']"
				@click="openCalendar" class="calendar_drag">
				<view class="selected__name">{{ nowDate }}</view>
				<li class="iconfont icon-calendar" style="margin-left: 10rpx;"></li>
			</view>
			<!-- 公司区域下拉列表 -->
			<drop-down ref="companyDrop" @tap="changDrop(2)" @changeItem="changeLocation" :list="locationArray"
				:contentTop="top" contentRight="10" :selectWidth="showCalendar ? '200rpx' : '300rpx'" listWidth="75%">
			</drop-down>
		</view>
		<uni-calendar ref="calendar" :insert="false" :start-date="startDate" :end-date="endDate" :clearDate="false"
			@confirm="confirm">
		</uni-calendar>
		<!--滑动列表头-->
		<wuc-tab id="wuctab" :tab-list="tabList" :tabCur.sync="tabCur" tab-class="text-center text-white bg-blue"
			select-class="text-white"></wuc-tab>
		<!--主体内容-->
		<view class="data_body" :style="{ height: scrollHeight }">
			<view v-if="tabCur == 0">
				<wechat :scrollHeight="scrollHeight" />
			</view>
			<view v-else-if="tabCur == 1">
				<user-operate :scrollHeight="scrollHeight" />
			</view>
			<view v-else-if="tabCur == 2">
				<user-healthy :scrollHeight="scrollHeight" />
			</view>
			<view v-else-if="tabCur == 3">
				<user-server :scrollHeight="scrollHeight"></user-server>
			</view>
		</view>
		<!--水印-->
		<view class="water-mark-mask row_wrap" :style="{ height: scrollHeight }">
			<text class="container" v-for="(count, index) in 10" :key="index">{{ info.name }}</text>
		</view>
	</view>
</template>
<script>
import Wechat from "../../components/data-center/wechat.vue"
import UserOperate from "../../components/data-center/user-operate.vue"
import UserHealthy from "../../components/data-center/user-healthy.vue"
import UserServer from "../../components/data-center/user-server.vue"
import WucTab from '../../components/wuc-tab/wuc-tab.vue'
import DropDown from '../../components/drop-down/drop-down.vue'
import UniCalendar from '../../components/uni-calendar/uni-calendar.vue'

import Config from '../../static/js/config'
import Common from "../../static/js/common"

export default {
	components: {
		WucTab,
		DropDown,
		UniCalendar,
		Wechat,
		UserOperate,
		UserHealthy,
		UserServer,
	},
	data() {
		return {
			tabList: Config.TABLIST, //标签头
			timeArray: Config.TIMEARRAY, //时间数组
			info: '大便超人', //用户数据
			title: "数据报表中心", //标题
			showDataTime: "today", //选中的时间
			tabCur: 0, //标签头下标
			topBar: 17, //导航高
			top: '180', //下拉栏位置
			scrollHeight: "100%", //数据展示体高度
			nowDate: Common.getNowDate(), //现在日期
			endDate: Common.getNowDate(), //日历可选日期范围的结束时间
			startDate: Common.getPreMonth(Common.getNowDate()), //日历可选日期范围的开始时间,
			showCalendar: false,
		};
	},
	computed: {
		locationArray() {
			return [{
				value: "GDBJ-ENTRY-1",
				text: "天猫"
			}, {
				value: "GDBJ-ENTRY-201",
				text: "京东"
			}];
		}
	},
	methods: {
		gotoBack() {
			Common.navigateBack("/index/index");
		},
		changDrop(index) {
			if (index == 1 && this.$refs.companyDrop.showList) {
				this.$refs.companyDrop.closePopup()
			} else if (index == 2 && this.$refs.caleDrop.showList) {
				this.$refs.caleDrop.closePopup()
			}
		},
		// 打开日历
		openCalendar() {
			this.$refs.calendar.open();
		},
		// 日历选择日期
		confirm(e) {
			if (this.nowDate != e.fulldate || !this.showCalendar) {
				this.showCalendar = true;
				this.$refs.caleDrop.selectAuto();
				this.nowDate = e.fulldate;
				this.showDataTime = e.fulldate.replace(/-/g, "");
				Common.tipMsg("当前时间:" + this.showDataTime)
			}
		},
		//下拉选择时间
		changeTime(e) {
			if (e.value == "auto") {
				this.openCalendar();
			} else if (this.showDataTime != e.value) {
				this.showDataTime = e.value;
				this.showCalendar = false;
				Common.tipMsg("当前时间:" + this.showDataTime)
			}
		},
		changeLocation(e) {
			Common.tipMsg("当前选中平台:" + e.text)
		},
		//获取设备信息
		async getTelephoneInfo() {
			var telephoneInfo = await Common.getTelephoneInfo();
			let hasHeight = 0;
			if (telephoneInfo.top >= 40) {
				this.top = telephoneInfo.statusBarHeight * 2 + 150;
				this.topBar = telephoneInfo.statusBarHeight;
			}

			// 设置滚动高度
			const query = wx.createSelectorQuery();
			query.select('#nav').boundingClientRect();
			query.select('#head').boundingClientRect();
			query.select('#wuctab').boundingClientRect();
			query.exec(res => {
				res.map((item, index) => {
					hasHeight += item.height;
				})
				this.scrollHeight = (telephoneInfo.screenHeight - hasHeight - this.topBar) + 'px';
			})
		},
		getH5Info() {
			uni.getSystemInfo({
				success: e => {
					let hasHeight = 0;
					let element = wx.createSelectorQuery().in(this);
					element.select('#nav').boundingClientRect();
					element.select('#head').boundingClientRect();
					element.select('#wuctab').boundingClientRect();
					element.exec(res => {
						res.map((item, index) => {
							hasHeight += item.height;
						})
						this.scrollHeight = (e.screenHeight - hasHeight) + 'px';
					})
				},
				fail: (err) => {
					reject(err);
				}
			})
		}
	},
	onReady() {
		//#ifndef H5
		uni.showShareMenu();
		this.getTelephoneInfo();
		//#endif
		//#ifdef H5
		this.getH5Info();
		//#endif
	}
};
</script>
<style lang="scss">
page,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.li_5 {
	list-style-type: none;
}

.window {
	height: 100vh;
	overflow: hidden;

	.topLine {
		background-color: #40A2ED;
		width: 100%;
	}

	scroll-view {
		box-sizing: border-box;
	}

	.swiper {
		box-sizing: border-box;
	}

	.nav {
		background-image: url(http://photo.gdbjyy.cn/image/BCAI/top_bg.jpg);
		background-size: 100% 100%;

		.back {
			font-size: 54rpx;
			padding: 20rpx 14rpx 15rpx 14rpx;
			color: #fff;
		}

		.title {
			color: #fff;
			font-size: 30rpx;
			flex: 1;
			text-align: center;
		}

		.hidden {
			visibility: hidden;
		}
	}

	.head {
		padding: 0 16rpx 14rpx 16rpx;
		color: #fff;
		background-color: #40A2ED;
		justify-content: space-between;
		font-size: 26rpx !important;

		.calendar_drag {
			width: 340rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.calendar_name {
				margin-right: 10rpx;
			}

			.icon-calendar {
				font-size: 26rpx;
				margin-top: 4rpx;
			}
		}
	}

	.data_body {
		overflow: auto;
		text-align: center;
		color: #333333;
		background-repeat: repeat;
		background-color: #ffffff;
		position: relative;

		.item {
			padding: 0 20rpx;
			margin-bottom: 20rpx;

			.name {
				font-weight: 600;
				font-size: 36rpx;
			}

			.operate {
				view {
					padding: 5rpx 12rpx;
					color: #fff;
				}

				.bg-blue {
					background-color: #40A2ED;
				}

				.bg-yellow {
					background-color: #FFC300;
				}
			}

			.tip {
				margin-bottom: 30rpx;

				.update {
					color: #C4100A;
					margin-left: auto;
					font-size: 30rpx;
				}
			}
		}

		.cry {
			font-size: 96rpx;
			margin-bottom: 10rpx;
		}
	}
}

.water-mark-mask {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1000;
	justify-content: space-between;
	pointer-events: none; //无视鼠标事件，相当于鼠标事件透传下去一样
	flex: 1;
	overflow: hidden;

	text {
		width: 50%;
		color: #909399;
		opacity: 0.25;
		transform: rotate(-15deg);
	}
}

.histogram {
	height: 100%;
	width: 100%;

	canvas {
		margin-top: 40rpx;
	}
}
</style>