jp-xpgj-GA-file/src/projects/business/views/Control/Home.vue

<template>
	<div>
		<common @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content vongi-jyj">
			<div class="ord-user mui-content-padded">
				<div class="flew-items ">
					<div class="user-pic">
						<img :src="person_data?person_data.faceImageUrl:''">
					</div>
					<div class="user-info">
						<h2 v-if="person_data">{{person_data.name}}</h2>
						<p v-text="person_popedom?(person_popedom.job?person_popedom.job:person_popedom.personRoleName):''"></p>
					</div>
				</div>
				<a class="signOut" @click="doLoginOut">
					退出
					<i class="iconfont icon-tuichu"></i>
				</a>
			</div>
			<div class="mui-card icon_number">
				<div class="mui-card-header">
					开发区健康统计
					<a class="mui-navigate-right iconfont icon-riqi" @click="selectDate" v-text="listForm.date"></a>
				</div>
				<div class="mui-card-content">
					<div class="mui-col-xs-6">
						<a>
							<span class="icon_number_green" v-text="detail.totalNum"></span>
							<div class="mui-media-body mui-ellipsis">应测人数</div>
						</a>
					</div>
					<div class="mui-col-xs-6">
						<a>
							<span class="icon_number_blue" v-text="detail.totalCheckNum"></span>
							<div class="mui-media-body mui-ellipsis">已测人数</div>
						</a>
					</div>
					<div class="mui-col-xs-6">
						<a>
							<span class="icon_number_red" v-text="detail.totalAbnormalNum"></span>
							<div class="mui-media-body mui-ellipsis">异常人数</div>
						</a>
					</div>
					<div class="mui-col-xs-6">
						<a>
							<span class="icon_number_yellow" v-text="detail.leaveNum"></span>
							<div class="mui-media-body mui-ellipsis">离荆人数</div>
						</a>
					</div>
				</div>
			</div>
			<!-- <div class="mui-card card_img">
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group">
						<div class="mui-slider-item">
							<a href="#">
								<img src="~$project/assets/img/green.png">
							</a>
						</div>
						<div class="mui-slider-item">
							<a href="#">
								<img src="~$project/assets/img/green.png">
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
			</div> -->
			<div class="mui-card">
				<div class="mui-card-content index-floor-2">
					<ul class="mui-table-view">
						<li v-for="(item,index) in recordList" class="mui-table-view-cell flew-sp">
							<div class="mui-ellipsis mui-col-xs-6" v-text="item.companyName"></div>
							<div class="mui-media-body mui-col-xs-6 mui-text-right">
								<span class="green">已测{{item.totalCheckNum}}</span> /
								<span class="blue">应测{{item.totalNum}}</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	require('$project/assets/js/mui.picker.min.js');
	import * as API_statistic from '@/apis/Control/statistic'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import isReachBottom from '$project/utils/isReachBottom'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	import * as types from '$project/store/mutation-types'
	export default {
		name: 'Control',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '开发区监管端',

				listForm: {
					date: '',
					pageIndex: '',
					pageSize: 20,
					totalPage: 1,
				},
				recordList: [],

				detail: {}
			}
		},
		created() {
			this.listForm.date = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
		},
		methods: {
			//选择时间
			selectDate() {
				var _this = this;
				var picker = new mui.DtPicker({
					"type": "date",
					"beginYear": 2020,
					"endYear": 2040,
					"endDate": new Date(),
					"value": _this.listForm.date
				});
				picker.show(function(rs) {
					_this.listForm.date = rs.text;
					_this.listForm.pageIndex = 1;
					_this.getList();
					picker.dispose();
				});
			},
			//获取统计详情
			getInfo() {
				this.isLoading = true;
				API_statistic.companySuperviseAllData({
					date: this.listForm.date
				}).then(response => {

					this.detail = response;

					this.isLoading = false;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取列表
			getList() {
				this.isLoading = true;
				API_statistic.companySuperviseListData(this.listForm).then(response => {
					this.isLoading = false;
					
					if (response) {
						if (this.listForm.pageIndex == 1) {
							this.recordList = response.data;
							this.listForm.pageIndex = response.pageNumber;
							this.listForm.totalPage = response.totalPage;
						} else {
							this.recordList = [
								...this.recordList,
								...response.data
							];
						}
					}
					this.listForm.pageIndex++;
					
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//下拉事件
			handleScrool() {
				if (isReachBottom()) {
					console.log('到达底部')
					if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
						this.getList();
					} else {
						return;
					}
				}
			},
			//退出登录
			loginOut() {
				this.isLoading = true;
				API_User.logOut().then(response => {
					this.isLoading = false;

					window.location.href = '../home/#/';

				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			doLoginOut() {
				var btnArray = ['否', '是'];
				mui.confirm('是否确认退出登录', '提示', btnArray, function(e) {
					if (e.index == 1) {
						_this.loginOut();
					}
				})
			},
			asynCallBack() {},
		},
		mounted() {
			//获取统计详情
			this.getInfo();
			this.getList();
			//监控下拉加载事件
			var _this = this;
			window.addEventListener('scroll', _this.handleScrool);
		},
		destroyed() {
			//销毁监听事件
			var _this = this;
			window.removeEventListener('scroll', _this.handleScrool);
		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				menu_list: 'menu_list',
				common_menu_list: 'common_menu_list',
			})
		}
	}
</script>

<style scoped src="$project/assets/css/xpgj.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>
<style>
</style>