jp-xpgj-GA-file/src/projects/business/views/Master/Health/Worker.vue

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

		<div class="mui-content fyy-wall vongi-zgtz">
			<div class="mui-content-padded fyy-date mui-clearfix">
				<h5>{{person_data.companyName}}
					<a class="mui-navigate-right mui-pull-right" v-html="curDate" @click="selectDate()">2020-03-19</a>
				</h5>
			</div>
			<div class="vongi-clasadmin">
				<h4>职工健康码统计</h4>
				<div class="vongi-clasadmin-list">
					<div class="vongi-clasadmin-ma mui-col-xs-3" v-for="(item,index) in statList" :key="index">
						<span :style="'color:'+getGreenCodeColor(item.healthyCode)" v-text="item.total">2953</span>
						<div class="mui-media-body" v-text="getCodeStatusName(item.healthyCode)">绿码</div>
					</div>

				</div>
				<div class="vongi-zgtz-search">
					<div class="mui-input-row mui-search">
						<input type="search" class="setinput" placeholder="请输入姓名" v-model="setinput" @change="searchK">
					</div>
				</div>
			</div>
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item " :class="selectedIndex==0?'mui-active':''" style="width:30%" @click="ckSelectedIndex(0)">
							全部<span class="mui-badge" v-html="allCount">3</span>
						</a>
						<a class="mui-control-item" :class="selectedIndex==1?'mui-active':''" style="width:36%" @click="ckSelectedIndex(1)">
							正常记录<span class="mui-badge" v-html="doneCount">2</span>
						</a>
						<a class="mui-control-item" :class="selectedIndex==2?'mui-active':''" style="width:34%" @click="ckSelectedIndex(2)">
							异常记录<span class="mui-badge" v-html="undoCount">1</span>
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll vongi-yctj-list">
								<ul class="mui-table-view mui-table-view-chevron vongi-zgtz">
									<li class="mui-table-view-cell mui-collapse vongi-archives" v-for="(item,index) in allList" :key="index">
										<a class="mui-navigate-right">
											{{item.name}}
											<h4 class='mui-pull-right'><span class="color4fc5f7">{{item.num2}}</span>/<span class="color4fc5f7">{{item.num1}}</span></h4>
										</a>
										<ul class="mui-table-view mui-table-view-chevron">
											<li class="mui-table-view-cell" v-for="(mod,index2) in item.list" :key="index2">
												<a   @click="viewDetail(mod)" :class="{'mui-navigate-right': mod.upLoad}">
													<div class="mui-pull-left flew-items">
														<div class="mui-media-object flew"><img v-if="mod.faceImageUrl!=null" :src="mod.faceImageUrl + '?x-oss-process=image/resize,m_fill,w_64'"
															 width="50" /></div>
														<h4 v-html="mod.name"></h4>
														<span class="mui-icon iconfont icon-erweima1  " :style="'color:'+getGreenCodeColor(mod.healthyCode)"></span>
													</div>
													<div class="mui-pull-right color55f868" v-if="mod.upLoad">已上报</div>
													<div class="mui-pull-right colorfe616c" v-if="!mod.upLoad">未上报</div>

												</a>
											</li>

										</ul>
									</li>

								</ul>
							</div>
						</div>
					</div>


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

	</div>

</template>


<script>
	require('$project/assets/js/mui.picker.min.js');
	import * as API_Health from '@/apis/Master/health'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'MasterHealthWorker',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '职工台账列表',

				rightLink: {
					show: true,
					icon: 'icon-tongji',
					style: 'font-size:12px',
					title: '健康统计'
				},
				id: '',
				detail: [],
				curDate: '',
				isLoading: false,
				jsonList: [],
				allList: [],
				allCount: 0,

				undoCount: 0,

				doneCount: 0,
				selectedIndex: 0,
				setinput: "",
				listForm: {
					pageSize: 500,
					pageIndex: 1,
					totalPage: 1,
					pageIndex1: 1,
					totalPage1: 1,
					pageIndex2: 1,
					totalPage2: 1,
				},

				statList: [],
			}
		},
		created() {
			this.curDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
		},
		methods: {
			ckSelectedIndex(num) {
				this.selectedIndex = num;
				var allList = [];


				var map = new Map();
				for (var i in this.jsonList) {
					var mod = this.jsonList[i];

					if (num == 0) {

					} else if (num == 1 && !mod.upLoad) {
						continue;
					} else if (num == 2 && mod.upLoad) {
						continue;
					}

					var key = "(未分组)";
					if (mod.teacherInfo == null) {

					} else {
						key = mod.teacherInfo.jobType;
					}

					if (map.get(key) == null) {
						var arr = [];
						map.set(key, arr);
					}
					map.get(key).push(mod);
				}

				map.forEach(function(value, key) {
					var num1 = value.length;
					var num2 = 0;
					for (var i in value) {
						var le = value[i];
						if (le.upLoad) {
							num2++;

						} else {

						}
					}
					var mod = {
						name: key,
						list: value,
						num1: num1,
						num2: num2
					};
					allList.push(mod);
				});
				this.allList = allList;
			},
			searchK() {
				var inp = this.setinput;
				this.allList = [];
				this.queryList();
			},
			async queryList() {
				this.isLoading = true;
				await this.pageList('', this.listForm.pageIndex).then(page => {


					var map = new Map();
					for (var i in page.data) {
						var mod = page.data[i];
						var key = "(未分组)";
						if (mod.teacherInfo == null) {

						} else {
							key = mod.teacherInfo.jobType;
						}

						if (map.get(key) == null) {
							var arr = [];
							map.set(key, arr);
						}
						map.get(key).push(mod);
					}
					var self = this;
					this.jsonList = page.data;
					var allList = self.allList = [];
					self.allCount = page.data.length;
					var doneCount = 0;
					var undoCount = 0;
					map.forEach(function(value, key) {
						var num1 = value.length;
						var num2 = 0;
						for (var i in value) {
							var le = value[i];
							if (le.upLoad) {
								num2++;
								doneCount++;
							} else {
								undoCount++;
							}
						}
						var mod = {
							name: key,
							list: value,
							num1: num1,
							num2: num2
						};
						allList.push(mod);
					});
					self.doneCount = doneCount;
					self.undoCount = undoCount;

					//this.allCount = page.recordsTotal;
					this.listForm.pageIndex = page.pageNumber;
					this.listForm.totalPage = page.totalPage;
				});


				this.isLoading = false;
			},
			selectDate() {
				var dtPicker = new mui.DtPicker({
					type: 'date'
				});

				dtPicker.show((selectItems) => {
					var year = selectItems.y.value;
					var month = selectItems.m.value;
					var day = selectItems.d.value;

					this.curDate = year + "-" + month + "-" + day;

					this.queryList();
				});
			},
			pageList(status, index) {
				return API_Health.workerPageList({
					setinput: this.setinput,
					companyId: this.person_data.companyId,
					queryDate: this.curDate,
					status: status,
					pageIndex: index,
					pageSize: 500
				});
			},
			viewDetail(item) {
				if (item.upLoad) {
					this.$router.push({
						name: 'MasterHealthWorkerInfo',
						query: {
							id: item.personHealthLedgerId
						}
					})
				}
			},
			//获取健康码颜色值
			getGreenCodeColor(healthyCode) {
				var healthyCode = healthyCode || '11';
				var color = {
					"00": '#09ae47',
					"01": '#e5aa37',
					"10": '#fe616c',
					"11": '#C0C0C0'
				}
				return color[healthyCode];
			},

			//判断状态
			getCodeStatusName(code) {
				if (code == '00') {
					return '绿码';
				} else if (code == '01') {
					return '黄码';
				} else if (code == '10') {
					return '红码';
				} else if (code == '11') {
					return '灰码';
				} else {
					return '无码';
				}
			},
			//获取绿码统计数据
			getHealthyCodeStat() {
				this.isLoading = true;
				API_Health.getHealthyCodeStat(this.person_data.companyId, '3').then(response => {
					this.isLoading = false;
					this.statList = response;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			asynCallBack() {},
		},
		mounted() {
			//获取列表
			this.queryList();
			//获取绿码统计数据
			this.getHealthyCodeStat();
			//document.getElementById('app').style.height = '100%';

		},


		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>

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

<style>
</style>