|
@@ -1,12 +1,11 @@
|
|
|
<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>
|
|
|
- <div class="mui-content fyy-wall">
|
|
|
+ <common @asynCallBack="asynCallBack"></common>
|
|
|
+ <top-header :pageTitle="companyName+pageTitle"></top-header>
|
|
|
+
|
|
|
+ <div class="mui-content fyy-wall">
|
|
|
<div class="fyy-wall-top">
|
|
|
- <div class="fyy-wall-date">
|
|
|
+ <div class="fyy-wall-date" v-text="queryDate">
|
|
|
2020-04-03
|
|
|
</div>
|
|
|
<ul class="mui-table-view mui-grid-view mui-grid-9 fyy-statistics">
|
|
@@ -15,13 +14,13 @@
|
|
|
<div class="fyy-wall-number fyy-wall-small">
|
|
|
<div class="mui-media-body" style="margin-bottom:5px">
|
|
|
<span class="mui-icon iconfont icon-renyuanjieshao"></span>
|
|
|
- <p class="mui-col-xs-7">已测员工</p>
|
|
|
- <span class="mui-col-xs-5"><span class="color55f868">18</span><span class="fyy-danwei">人</span></span>
|
|
|
+ <p class="mui-col-xs-7" >已测员工</p>
|
|
|
+ <span class="mui-col-xs-5"><span class="color55f868" v-text="detail.checkedPersonNum">18</span><span class="fyy-danwei">人</span></span>
|
|
|
</div>
|
|
|
<div class="mui-media-body">
|
|
|
<span class="mui-icon iconfont icon-yuangongruzhi"></span>
|
|
|
<p class="mui-col-xs-7">应测员工</p>
|
|
|
- <span class="mui-col-xs-5"><span class="color4fc5f7">100</span><span class="fyy-danwei">人</span></span>
|
|
|
+ <span class="mui-col-xs-5"><span class="color4fc5f7" v-text="detail.personNum">100</span><span class="fyy-danwei">人</span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -32,12 +31,12 @@
|
|
|
<div class="mui-media-body" style="margin-bottom:5px">
|
|
|
<span class="mui-icon iconfont icon-renshu"></span>
|
|
|
<p class="mui-col-xs-6">已测访客</p>
|
|
|
- <span class="mui-col-xs-6"><span class="colorf8b155">18</span><span class="fyy-danwei">人</span></span>
|
|
|
+ <span class="mui-col-xs-6"><span class="colorf8b155" v-text="detail.checkedVisitorNum">18</span><span class="fyy-danwei">人</span></span>
|
|
|
</div>
|
|
|
<div class="mui-media-body">
|
|
|
<span class="mui-icon iconfont icon-leijicishu1"></span>
|
|
|
<p class="mui-col-xs-6">当日异常</p>
|
|
|
- <span class="mui-col-xs-6"><span class="colorfe616c">5000</span><span class="fyy-danwei">人</span></span>
|
|
|
+ <span class="mui-col-xs-6"><span class="colorfe616c" v-text="detail.totalCheckNum">5000</span><span class="fyy-danwei">人</span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -51,12 +50,12 @@
|
|
|
<div class="mui-media-body" style="margin-bottom:5px">
|
|
|
<span class="mui-icon iconfont icon-baojing"></span>
|
|
|
<p class="mui-col-xs-8">当日异常<span style="margin:0 15px">/</span>累计异常</p>
|
|
|
- <span class="mui-col-xs-4"><span class="colorfe616c">0</span>人 <span style="margin:0 15px">/</span><span class="colorfe616c">1</span>人</span>
|
|
|
+ <span class="mui-col-xs-4"><span class="colorfe616c" v-text="detail.dayAbnormalNum">0</span>人 <span style="margin:0 15px">/</span><span class="colorfe616c">1</span>人</span>
|
|
|
</div>
|
|
|
<div class="mui-media-body">
|
|
|
<span class="mui-icon iconfont icon-shijian"></span>
|
|
|
<p class="mui-col-xs-8">连续无异常天数</p>
|
|
|
- <span class="mui-col-xs-4"><span class="color55f868">6</span>天</span>
|
|
|
+ <span class="mui-col-xs-4"><span class="color55f868" v-text="detail.normalDays">6</span>天</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -67,114 +66,236 @@
|
|
|
<div id="slider" class="mui-slider mui-fullscreen fyy-slider">
|
|
|
<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 mui-active" href="#item1mobile" style="width:30%">
|
|
|
+ <a class="mui-control-item " :class=" nowItem==''?'mui-active':''" @click="changeItem('')" style="width:30%">
|
|
|
全部测温记录
|
|
|
</a>
|
|
|
- <a class="mui-control-item" href="#item2mobile" style="width:36%">
|
|
|
+ <a class="mui-control-item" :class=" nowItem=='person'?'mui-active':''" @click="changeItem('person')" style="width:36%">
|
|
|
内部员工测温记录
|
|
|
</a>
|
|
|
- <a class="mui-control-item" href="#item3mobile" style="width:34%">
|
|
|
+ <a class="mui-control-item" :class=" nowItem=='visitor'?'mui-active':''" @click="changeItem('visitor')" style="width:34%">
|
|
|
访客测温记录
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mui-slider-group">
|
|
|
- <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
|
|
|
+ <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
|
|
|
<div id="scroll1" class="mui-scroll-wrapper">
|
|
|
<div class="mui-scroll">
|
|
|
<ul class="mui-table-view">
|
|
|
- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-pull-left">
|
|
|
- <div class="mui-content-padded">
|
|
|
- <div class="mui-media-object">
|
|
|
- <img src="~$project/assets/img/zhaop1.jpg">
|
|
|
- <span class="mui-icon iconfont icon-erweima1 color55f868"></span>
|
|
|
- </div>
|
|
|
- <div class="mui-media-body">
|
|
|
- <span>冯银银</span>
|
|
|
- <span class="mui-pull-right color55f868">36.5</span>
|
|
|
- </div>
|
|
|
- <p>04-03 <span>09:07</span></p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-pull-left">
|
|
|
- <div class="mui-content-padded">
|
|
|
- <div class="mui-media-object">
|
|
|
- <img src="~$project/assets/img/zhaop1.jpg">
|
|
|
- <span class="mui-icon iconfont icon-erweima1 colorfe616c"></span>
|
|
|
- </div>
|
|
|
- <div class="mui-media-body">
|
|
|
- <span>冯银银</span>
|
|
|
- <span class="mui-pull-right colorfe616c">38.5</span>
|
|
|
- </div>
|
|
|
- <p>04-03 <span>09:07</span></p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-pull-left">
|
|
|
- <div class="mui-content-padded">
|
|
|
- <div class="mui-media-object">
|
|
|
- <img src="~$project/assets/img/zhaop1.jpg">
|
|
|
- <span class="mui-icon iconfont icon-erweima1 color999"></span>
|
|
|
- </div>
|
|
|
- <div class="mui-media-body">
|
|
|
- <span>冯银银</span>
|
|
|
- <span class="mui-pull-right color55f868">36.5</span>
|
|
|
- </div>
|
|
|
- <p>04-03 <span>09:07</span></p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div id="item2mobile" class="mui-slider-item mui-control-content">
|
|
|
- <div class="mui-scroll-wrapper">
|
|
|
- <div class="mui-scroll">
|
|
|
- <ul class="mui-table-view">
|
|
|
- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-pull-left">
|
|
|
- <div class="mui-content-padded">
|
|
|
- <div class="mui-media-object">
|
|
|
- <img src="~$project/assets/img/zhaop1.jpg">
|
|
|
- <span class="mui-icon iconfont icon-erweima1 color55f868"></span>
|
|
|
- </div>
|
|
|
- <div class="mui-media-body">
|
|
|
- <span>冯银银</span>
|
|
|
- <span class="mui-pull-right color55f868">36.5</span>
|
|
|
- </div>
|
|
|
- <p>04-03 <span>09:07</span></p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div id="item3mobile" class="mui-slider-item mui-control-content">
|
|
|
- <div class="mui-scroll-wrapper">
|
|
|
- <div class="mui-scroll">
|
|
|
- <ul class="mui-table-view">
|
|
|
- <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-pull-left">
|
|
|
+
|
|
|
+ <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-pull-left" v-for="(item,index) in recordList">
|
|
|
<div class="mui-content-padded">
|
|
|
<div class="mui-media-object">
|
|
|
- <img src="~$project/assets/img/zhaop1.jpg">
|
|
|
- <span class="mui-icon iconfont icon-erweima1 color55f868"></span>
|
|
|
+
|
|
|
+ <img :src="item.faceImage" >
|
|
|
+
|
|
|
+ <span class="mui-icon iconfont icon-erweima1 " :class="item.temperature>maxTemperature?'colorfe616c':'color55f868'"></span>
|
|
|
</div>
|
|
|
<div class="mui-media-body">
|
|
|
- <span>冯银银</span>
|
|
|
- <span class="mui-pull-right color55f868">36.5</span>
|
|
|
+ <span v-text="item.personName">冯银银</span>
|
|
|
+ <span class="mui-pull-right " :class="item.temperature>maxTemperature?'colorfe616c':'color55f868'">{{item.temperature}}</span>
|
|
|
</div>
|
|
|
- <p>04-03 <span>09:07</span></p>
|
|
|
+ <p>{{item.recordTime?item.recordTime.substring(5,10):''}} <span>{{item.recordTime?item.recordTime.substring(10,16):''}}</span></p>
|
|
|
</div>
|
|
|
</li>
|
|
|
+
|
|
|
+
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <loading :visible="isLoading"></loading>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
+
|
|
|
<script>
|
|
|
+ import * as API_ControlWall from '@/apis/HouseKeeper/Health/wall'
|
|
|
+
|
|
|
+ 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'
|
|
|
+ export default {
|
|
|
+ name: 'MasterAttendanceInfo',
|
|
|
+ components: {
|
|
|
+ Common,
|
|
|
+ Loading,
|
|
|
+ TopHeader
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageTitle: '健康公示墙',
|
|
|
+
|
|
|
+ isLoading: false,
|
|
|
+
|
|
|
+ queryDate: '',
|
|
|
+ detailForm: {
|
|
|
+ queryDate: '',
|
|
|
+
|
|
|
+ },
|
|
|
+ listForm: {
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 15,
|
|
|
+ queryDate: '',
|
|
|
+
|
|
|
+ totalPage: 1,
|
|
|
+ type: ''
|
|
|
+ },
|
|
|
+ //总访客数
|
|
|
+ recordsTotal: 0,
|
|
|
+ nowItem: '',
|
|
|
+ companyId: '',
|
|
|
+ companyName: '',
|
|
|
+ detail: {},
|
|
|
+ recordList: [],
|
|
|
+ isLoading: false,
|
|
|
+ maxTemperature: 37.3,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ //赋值时间
|
|
|
+ var now = new Date();
|
|
|
+ var year = now.getFullYear(); //得到年份
|
|
|
+ var month = now.getMonth();//得到月份
|
|
|
+ var date = now.getDate();//得到日期
|
|
|
+
|
|
|
+ this.queryDate = year+"-"+month+"-"+date;
|
|
|
+ this.detailForm.queryDate = this.queryDate;
|
|
|
+ this.listForm.queryDate = this.queryDate;
|
|
|
+
|
|
|
+ if (this.$route.query.companyId) {
|
|
|
+ this.companyId = this.$route.query.companyId;
|
|
|
+ }
|
|
|
+ this.getNumData();
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ getNumData() {
|
|
|
+ this.isLoading = true;
|
|
|
+ API_ControlWall.healthShowNumData(this.detailForm).then(response => {
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ this.detail = response;
|
|
|
+
|
|
|
+ //访问总人数
|
|
|
+ this.recordsTotal = response.checkedVisitorNum;
|
|
|
+
|
|
|
+ //获取列表数据
|
|
|
+ this.getList();
|
|
|
+ }).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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+//item切换事件
|
|
|
+ changeItem(type) {
|
|
|
+ this.nowItem = type;
|
|
|
+ this.listForm.type = type;
|
|
|
+ this.listForm.pageIndex = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ //排序
|
|
|
+ vistorList(list) {
|
|
|
+ var vtindex = 0;
|
|
|
+ for (var index = 0; index < list.length; index++) {
|
|
|
+ if (list[index]['person'] == undefined) {
|
|
|
+ var voindex = this.recordsTotal - vtindex;
|
|
|
+ vtindex++;
|
|
|
+ list[index]['personName'] = list[index]['personName'] != '未识别' ? list[index]['personName'] : '访客' + voindex;
|
|
|
+ list[index]['isVistor'] = true;
|
|
|
+ } else {
|
|
|
+ list[index]['personName'] = list[index]['person']['name'];
|
|
|
+ list[index]['isVistor'] = false;
|
|
|
+ }
|
|
|
+ list[index]['faceImage'] = list[index]['faceImage'] ? list[index]['faceImage'] : 'img/wu.jpg';
|
|
|
+ }
|
|
|
+ return list;
|
|
|
+ },
|
|
|
+ goto(id){
|
|
|
+
|
|
|
+ this.$router.push({
|
|
|
+ name: 'HouseKeeperControlHealthWorkerTemperature',
|
|
|
+ query: {id:id}
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //提交
|
|
|
+ getList() {
|
|
|
+ this.isLoading = true;
|
|
|
+ API_ControlWall.healthShowPicData(this.listForm).then(response => {
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ 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.detectedNum = response.detectedNum;
|
|
|
+ this.listForm.pageIndex++;
|
|
|
+ this.isLoading = false;
|
|
|
+
|
|
|
+ //遍历排序重置
|
|
|
+ this.recordList = this.vistorList(this.recordList);
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ asynCallBack() {
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //监控下拉加载事件
|
|
|
+ var _this = this;
|
|
|
+ //document.getElementById('scroll1').addEventListener('scroll', _this.handleScrool);
|
|
|
+ window.addEventListener('scroll', _this.handleScrool);
|
|
|
+
|
|
|
+ //定时刷新
|
|
|
+ setInterval(function() {
|
|
|
+ _this.listForm.pageIndex = 1
|
|
|
+
|
|
|
+ //获取详情数据
|
|
|
+ _this.getNumData();
|
|
|
+
|
|
|
+ }, 30 * 1000);
|
|
|
+
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ //销毁监听事件
|
|
|
+ var _this = this;
|
|
|
+ window.removeEventListener('scroll', _this.handleScrool);
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped src="$project/assets/css/sczpfyy.css"></style>
|