|
@@ -1,59 +1,53 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <header class="mui-bar mui-bar-nav">
|
|
|
- <h1 class="mui-title">异常统计</h1>
|
|
|
- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
|
|
- </header>
|
|
|
+ <common @asynCallBack="asynCallBack"></common>
|
|
|
+ <top-header :pageTitle="pageTitle" ></top-header>
|
|
|
+
|
|
|
<div class="mui-content">
|
|
|
- <div class="fyy-temper-date">
|
|
|
- <a href="" class="mui-col-xs-5">2020-03-19</a>
|
|
|
- <span class="mui-col-xs-2">至</span>
|
|
|
- <a href="" class="mui-col-xs-5">2020-03-19</a>
|
|
|
- </div>
|
|
|
+ <div class="fyy-temper-date">
|
|
|
+ <a @click="selectStartDate" class="mui-col-xs-5" v-text="dataForm.startTime"></a>
|
|
|
+ <span class="mui-col-xs-2">至</span>
|
|
|
+ <a @click="selectEndDate" class="mui-col-xs-5" v-text="dataForm.endTime"></a>
|
|
|
+ </div>
|
|
|
<ul class="mui-table-view mui-grid-view mui-grid-9 vongi-statistics">
|
|
|
<li class="mui-table-view-cell mui-media mui-col-xs-4">
|
|
|
<div class="vongi-statistics-body">
|
|
|
<span class="mui-icon mui-icon-home iconfont icon-qiyegongchangjianzhu"></span>
|
|
|
<div class="mui-media-body">异常数量</div>
|
|
|
- <div class="mui-media-body mui-h3 color4fc5f7">158</div>
|
|
|
+ <div class="mui-media-body mui-h3 color4fc5f7" v-text="companyTotalCount"> </div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="mui-table-view-cell mui-media mui-col-xs-4">
|
|
|
<div class="vongi-statistics-body">
|
|
|
<span class="mui-icon mui-icon-home iconfont icon-ziyuan"></span>
|
|
|
<div class="mui-media-body">异常人数</div>
|
|
|
- <div class="mui-media-body mui-h3 colorfe616c">28</div>
|
|
|
+ <div class="mui-media-body mui-h3 colorfe616c" v-text="personTotalCount"> </div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="mui-table-view-cell mui-media mui-col-xs-4">
|
|
|
<div class="vongi-statistics-body">
|
|
|
<span class="mui-icon mui-icon-home iconfont icon-renshu"></span>
|
|
|
<div class="mui-media-body">未测人员</div>
|
|
|
- <div class="mui-media-body mui-h3 colorf8b155">28</div>
|
|
|
+ <div class="mui-media-body mui-h3 colorf8b155" v-text="undetectedCount"> </div>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div class="mui-content-padded vongi-yctj-list">
|
|
|
<ul class="mui-table-view mui-table-view-chevron">
|
|
|
<li class="mui-table-view-cell mui-collapse">
|
|
|
- <a class="mui-navigate-right" href="#">异常单位列表</a>
|
|
|
+ <a class="mui-navigate-right" @touchend="setNowOpen(1)" >异常单位列表</a>
|
|
|
<ul class="mui-table-view mui-table-view-chevron">
|
|
|
- <li class="mui-table-view-cell mui-media">
|
|
|
- <a href="javascript:;" class="mui-navigate-right">
|
|
|
- <div class="mui-media-body">
|
|
|
- 荆鹏软件
|
|
|
- <h4 class='mui-pull-right'><span class="colorfe616c">2</span>人</h4>
|
|
|
- </div>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li class="mui-table-view-cell mui-media">
|
|
|
- <a href="javascript:;" class="mui-navigate-right">
|
|
|
+
|
|
|
+ <li class="mui-table-view-cell mui-media" v-for="(item,index) in companyList">
|
|
|
+ <router-link :to="{name: 'HouseKeeperControlHealthAbnormalRecord', query: {companyId: item.id,companyName:doEscape(item.name),filter:1,queryDate:item.date}}"
|
|
|
+ class="mui-navigate-right">
|
|
|
<div class="mui-media-body">
|
|
|
- 荆鹏软件
|
|
|
- <h4 class='mui-pull-right'><span class="colorfe616c">2</span>人</h4>
|
|
|
+ {{item.name}}
|
|
|
+ <h4 class='mui-pull-right'><span class="colorfe616c" v-text="item.personCount"></span>人</h4>
|
|
|
</div>
|
|
|
- </a>
|
|
|
+ </router-link>
|
|
|
</li>
|
|
|
+
|
|
|
</ul>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -61,18 +55,14 @@
|
|
|
<div class="mui-content-padded vongi-yctj-list">
|
|
|
<ul class="mui-table-view mui-table-view-chevron">
|
|
|
<li class="mui-table-view-cell mui-collapse">
|
|
|
- <a class="mui-navigate-right" href="#">未检测员工列表</a>
|
|
|
+ <a class="mui-navigate-right" @touchend="setNowOpen(2)">未检测员工列表</a>
|
|
|
<ul class="mui-table-view mui-table-view-chevron">
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- <a href="javascript:;" class="mui-navigate-right">
|
|
|
- {{姓名}}<span class="iconfont icon-erweima1 color55f868"></span>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- <a href="javascript:;" class="mui-navigate-right">
|
|
|
- {{姓名}}<span class="iconfont icon-erweima1 colorfe616c"></span>
|
|
|
- </a>
|
|
|
+ <li class="mui-table-view-cell" v-for="(item,index) in personList">
|
|
|
+ <router-link :to="{name: 'CommonHealthCert', query: {personId: item.id}}" class="mui-navigate-right">
|
|
|
+ {{item.name}}<span class="iconfont icon-erweima1 color55f868" :style="'color:'+getGreenCodeColor(item['healthyCode'])" ></span>
|
|
|
+ </router-link>
|
|
|
</li>
|
|
|
+
|
|
|
</ul>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -82,8 +72,219 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-</script>
|
|
|
+ require('$project/assets/js/mui.picker.min.js');
|
|
|
+ import * as API_ControlHealth from '@/apis/HouseKeeper/control/health'
|
|
|
+ import Common from '$project/components/Common.vue'
|
|
|
+ import Loading from '$project/components/Loading.vue'
|
|
|
+ import isReachBottom from '$project/utils/isReachBottom'
|
|
|
+ import TopHeader from '$project/components/TopHeader.vue'
|
|
|
+ import {
|
|
|
+ mapGetters,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex'
|
|
|
+ import {
|
|
|
+ currentTimeStamp,
|
|
|
+ parseUnixTime,
|
|
|
+ beforeTimeStamp
|
|
|
+ } from '$project/utils'
|
|
|
+ export default {
|
|
|
+ name: 'HouseKeeperAdminHealthAbnormalRecord',
|
|
|
+ components: {
|
|
|
+ Common,
|
|
|
+ Loading,
|
|
|
+ TopHeader
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageTitle: "异常统计",
|
|
|
+ isLoading: false,
|
|
|
+ dataForm: {
|
|
|
+ startTime: '',
|
|
|
+ endTime: '',
|
|
|
+ },
|
|
|
+ personTotalCount: 0,
|
|
|
+ companyTotalCount: 0,
|
|
|
+ undetectedCount: 0,
|
|
|
+ companyList: [],
|
|
|
+ personList: [],
|
|
|
+ personListForm: {
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ startTime: '',
|
|
|
+ totalPage: 1,
|
|
|
+ endTime: 0
|
|
|
+ },
|
|
|
+ nowOpen: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.queryDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
|
|
|
|
|
|
+ //定义当前日期范围
|
|
|
+ if (this.$store.state.control_abnormal_statistics_startTime) {
|
|
|
+ this.dataForm.startTime = this.$store.state.control_abnormal_statistics_startTime;
|
|
|
+ } else {
|
|
|
+ this.dataForm.startTime = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
|
|
|
+ this.$store.commit('setControlAbnormalStatisticsStartTime', this.dataForm.startTime);
|
|
|
+ this.personListForm.startTime = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.$store.state.control_abnormal_statistics_endTime) {
|
|
|
+ this.dataForm.endTime = this.$store.state.control_abnormal_statistics_endTime;
|
|
|
+ } else {
|
|
|
+ this.dataForm.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
|
|
|
+ this.$store.commit('setControlAbnormalStatisticsEndTime', this.dataForm.endTime);
|
|
|
+ this.personListForm.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
|
|
|
+ }
|
|
|
+
|
|
|
+ //this.personListForm.startTime = parseUnixTime(beforeTimeStamp(7), '{y}-{m}-{d}');
|
|
|
+ //this.personListForm.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ asynCallBack(){},
|
|
|
+ setNowOpen(val) {
|
|
|
+ this.nowOpen = val;
|
|
|
+ console.log('当前' + this.nowOpen);
|
|
|
+ },
|
|
|
+ //选择起始日期
|
|
|
+ selectStartDate() {
|
|
|
+ var _this = this;
|
|
|
+ var picker = new mui.DtPicker({
|
|
|
+ "type": "date",
|
|
|
+ "beginYear": 2020,
|
|
|
+ "endYear": 2040,
|
|
|
+ "endDate": new Date(),
|
|
|
+ "value": _this.dataForm.startTime
|
|
|
+ });
|
|
|
+ picker.show(function(rs) {
|
|
|
+ _this.dataForm.startTime = rs.text;
|
|
|
+ _this.$store.commit('setControlAbnormalStatisticsStartTime', _this.dataForm.startTime);
|
|
|
+ _this.getUnusalStatistic();
|
|
|
+ picker.dispose();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //选择结束日期
|
|
|
+ selectEndDate() {
|
|
|
+ var _this = this;
|
|
|
+ var beginDate = new Date(_this.dataForm.startTime);
|
|
|
+ beginDate.setDate(beginDate.getDate());
|
|
|
+ var endDate = new Date();
|
|
|
+ endDate.setDate(endDate.getDate());
|
|
|
+ var picker = new mui.DtPicker({
|
|
|
+ "type": "date",
|
|
|
+ "beginYear": 2020,
|
|
|
+ "beginDate": beginDate,
|
|
|
+ "endDate": endDate,
|
|
|
+ "value": _this.dataForm.endTime
|
|
|
+ });
|
|
|
+ picker.show(function(rs) {
|
|
|
+ _this.dataForm.endTime = rs.text;
|
|
|
+ _this.$store.commit('setControlAbnormalStatisticsEndTime', _this.dataForm.endTime);
|
|
|
+ _this.getUnusalStatistic();
|
|
|
+ _this.getPersonList();
|
|
|
+ picker.dispose();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取统计数据
|
|
|
+ getUnusalStatistic() {
|
|
|
+ this.isLoading = true;
|
|
|
+ API_ControlHealth.getAbnormalStatistics(this.dataForm).then(response => {
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ this.personTotalCount = response.personTotalCount;
|
|
|
+ this.companyTotalCount = response.companyTotalCount;
|
|
|
+ this.undetectedCount = response.undetectedCount;
|
|
|
+ this.companyList = response.list;
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ this.mui.toast(error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取未检测人员列表
|
|
|
+ getPersonList() {
|
|
|
+ this.isLoading = true;
|
|
|
+ API_ControlHealth.getUndetectedPersonList(this.personListForm).then(response => {
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ if (this.personListForm.pageIndex == 1) {
|
|
|
+ this.personList = response.data; // 数据数组
|
|
|
+ this.personListForm.pageIndex = response.pageNumber; //当前页数
|
|
|
+ this.personListForm.totalPage = response.totalPage; //总页数
|
|
|
+ } else {
|
|
|
+ this.personList = [ // 当前数据与第二页数据合并到一个数组中
|
|
|
+ ...this.personList,
|
|
|
+ ...response.data
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ this.personListForm.pageIndex++;
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ this.mui.toast(error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //下拉事件
|
|
|
+ handleScrool() {
|
|
|
+ //console.log(window.screen.height + '-' + document.body.scrollTop + '-' + document.body.clientHeight)
|
|
|
+ if (isReachBottom()) {
|
|
|
+ console.log('到达底部' + this.nowOpen)
|
|
|
+ if (this.nowOpen == 2 && this.personListForm.pageIndex <= this.personListForm.totalPage && this.isLoading == false) {
|
|
|
+ this.getPersonList();
|
|
|
+ } else {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ doEscape(str) {
|
|
|
+ return escape(str);
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取健康码颜色值
|
|
|
+ getGreenCodeColor(healthyCode) {
|
|
|
+ var healthyCode = healthyCode || '11';
|
|
|
+ var color = {
|
|
|
+ "00": '#09ae47',
|
|
|
+ "01": '#e5aa37',
|
|
|
+ "10": '#fe616c',
|
|
|
+ "11": '#C0C0C0'
|
|
|
+ }
|
|
|
+ return color[healthyCode];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //显示数据
|
|
|
+ this.getUnusalStatistic();
|
|
|
+ //获取未检测人员列表
|
|
|
+ this.getPersonList();
|
|
|
+ //监控下拉加载事件
|
|
|
+ var _this = this;
|
|
|
+ window.addEventListener('scroll', _this.handleScrool);
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ //销毁监听事件
|
|
|
+ var _this = this;
|
|
|
+ window.removeEventListener('scroll', _this.handleScrool);
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'dataForm.startTime': {
|
|
|
+ handler(newValue) {
|
|
|
+ this.personListForm.startTime = newValue;
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ 'dataForm.endTime': {
|
|
|
+ handler(newValue) {
|
|
|
+ this.personListForm.endTime = newValue;
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
<style scoped src="$project/assets/css/sczpfyy.css"></style>
|
|
|
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
<style src="$project/assets/css/iconfont.css"></style>
|