Merge branch 'master' of http://47.110.145.204:8085/godwithdh/wx_h5

src/libs/apiMap.js

+import healthApi from './healthApi';
 const methodMap = {
    /**
     * 产品颜色销售排行TOP50
@@ -81,4 +82,4 @@ const methodMap = {
    getTipProcurementProgress:{url:"/pbcontracthdr/",method:"post",host:"default"},
 
 };
-export default methodMap;
+export default Object.assign(methodMap,healthApi);

src/libs/healthApi.js

+module.exports = {
+    getStatisticalDetails:{url:"/healthlog/",method:"post",host:"health"},
+}
\ No newline at end of file

src/libs/host.js

@@ -27,6 +27,11 @@ function urlFun(name){
          */
         // inside:`http://192.168.4.39:5003`,
         inside:`https://weixin.huansi.net/apiproxy/huansi/ERP`,
+
+        /**
+         * 健康打卡统计
+         */
+        health:`https://weixin.huansi.net/apiproxy/huansi/service/proxy/1225621052093239296`
     }
     return url[name]
 }

src/libs/util.js

@@ -7,6 +7,7 @@ var nowMonth = now.getMonth(); //当前月
 var nowYear = now.getYear(); //当前年
 nowYear += (nowYear < 2000) ? 1900 : 0; //
 
+var y = 0;
 
 let util = {
 
@@ -489,6 +490,22 @@ util.Colors.prototype.getHslArray= function() {
     }
     return HSL;
 };
+
+util.scrollToBottom = function(scrollDom){
+  if(scrollDom.scrollTop > y){
+      // console.log('向下')
+      let offsetHeight = scrollDom.offsetHeight;
+      let scrollHeight = scrollDom.scrollHeight;
+      let scrollTop = scrollDom.scrollTop;
+      if(scrollHeight - offsetHeight - scrollTop <= 0){
+          y = 0;
+          return true;
+      }
+  }else if(scrollDom.scrollTop < y){
+      // console.log('向上')
+  }
+  y = scrollDom.scrollTop;
+}
 // util.pageReturn = function(){
 //    /*微信自带返回按钮，不刷新，刷新页面start*/
 //   if (util.isIos()) {

src/router/health.js

@@ -26,6 +26,22 @@ module.exports = [
                 meta:{
                     title: '员工健康'
                 }
+            },
+            {
+                path:'statistics/chart',
+                name:'healthCardStatisticsChart',
+                component:()=> import('@/view/healthCard/statistics/chart.vue'),
+                meta:{
+                    title: '员工健康'
+                }
+            },
+            {
+                path:'statistics/list/:type',
+                name:'healthCardStatisticsList',
+                component:()=> import('@/view/healthCard/statistics/list.vue'),
+                meta:{
+                    title: '员工健康'
+                }
             }
         ]
     },

src/store/index.js

@@ -6,6 +6,7 @@ import searchOrder from './modules/tiip/searchOrder';
 import profitAnalysis from './modules/tiip/profitAnalysis';
 import kanban from './modules/tiip/kanban';
 import checkProgress from './modules/tiip/checkProgress';
+import healthStatistics from './modules/health/statistics';
 
 Vue.use(Vuex);
 
@@ -22,7 +23,8 @@ const store = new Vuex.Store({
     searchOrder,
     profitAnalysis,
     kanban,
-    checkProgress
+    checkProgress,
+    healthStatistics
   }
 });
 

src/store/modules/health/statistics.js

+import Util from '@/libs/util';
+import Vue from 'vue';
+
+const obj = {
+    state: {
+        hdr:{},
+        dtl:{}
+    },
+    mutations: {
+        saveHealthStatisticsHdr(state,data){
+            state.hdr = data;
+        },
+        saveHealthStatisticsDtl(state,data){
+            state.dtl = data;
+        },
+    },
+    actions: {
+        saveHealthStatisticsHdr({commit},data){
+            commit('saveHealthStatisticsHdr',data);
+        },
+        saveHealthStatisticsDtl({commit},data){
+            commit('saveHealthStatisticsDtl',data);
+        },
+    }
+};
+
+export default obj;

src/view/healthCard/statistics/chart.vue

+<style lang="less" >
+    @import url('../../../styles/common.less');
+    #healthCardStatisticsChart{
+        background: #f6f5f9;
+        height:100%;
+        display: flex;
+        flex-direction: column;
+        .TITLE{
+            display:flex;
+            align-items: center;
+            padding:10px 15px;
+            h1{
+                font-size:20px;
+                font-weight: bold;
+            }
+            h3{
+                width:auto;
+                font-size:12px;
+                text-align: center;
+                border:1px solid #ccc;
+                border-radius: 6px;
+                padding:2px 4px;
+            }
+        }
+        .CONTENT{
+            flex-grow: 1;
+            height:1px;
+            display: flex;
+            flex-direction: column;
+            .activeTab1{
+                flex-grow: 1;
+                height:1px;
+                background: white;
+                overflow: auto;
+                -webkit-overflow-scrolling: touch;
+                >div{
+                    padding:10px;
+                    h3{
+                        font-weight: bold;
+                    }
+                }
+            }
+            .activeTab2{
+                flex-grow: 1;
+                height:1px;
+                background: white;
+                overflow: auto;
+                -webkit-overflow-scrolling: touch;
+                .items{
+                    display: flex;
+                    height:60px;
+                    align-items: center;
+                    margin:10px;
+                    .avatar{
+                        height:50px;
+                        width:50px;
+                        border-radius: 50%;
+                        background: #3a8af7;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        color:white;
+                        font-size:22px;
+                        margin-right:10px;
+                    }
+                    .item{
+                        flex:1;
+                        height:60px;
+                        border-bottom:1px solid #f6f6f6;
+                        box-sizing: border-box;
+                        display: flex;
+                        align-items: center;
+                        .name{
+                            font-size:14px;
+                        }
+                        .time{
+                            font-size:14px;
+                            color:#8a8a8a;
+                            text-align: right;
+                            padding-right:10px;
+                        }
+                        >div{
+                            flex:1;
+                        }
+                        >i{
+                            font-size: 12px;
+                        }
+                    }
+                }
+                
+            }
+        }
+        .DESC{
+            padding:0 15px;
+            font-size:14px;
+            color:#8a8a8a;
+        }
+        .Card{
+            margin:10px 15px;
+            font-size:12px;
+            overflow:hidden;
+            background:#fff;
+            border-radius:5px;
+            box-shadow:0 1px 3px #bababa;
+            width:auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding:10px 0;
+            margin-bottom: 30px;
+            .left,.center{
+                border-right:1px solid #f1f1f1;
+            }
+            .left,.right,.center{
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: center;
+              align-items: center;
+              flex:1;
+              .n{
+                width:100%;
+                color:#6a6a6a;
+                font-weight: bold;
+                font-size:20px;
+                text-align: center;
+              }
+              .t{
+                width:100%;
+                font-size:14px;
+                text-align: center;
+                color:#8a8a8a;
+              }
+            }
+        }
+        .img{
+            width:100%;
+            display: flex;
+            justify-content: center;
+            img{
+                width:100%;
+                height:300px;
+            }
+        }
+    }
+</style>
+
+<template>
+  <div id="healthCardStatisticsChart">
+      <div class="HEADER">
+          <div class="TITLE">
+              <h1>每日健康打卡（{{hdr.sMonth}}{{Number(hdr.iDay) > 10 ? hdr.iDay : '0' + hdr.iDay}}日）</h1>
+              <!-- <h3>已结束</h3> -->
+          </div>
+          <div class="Card">
+            <div class="left">
+                <div class="n">{{hdr.iAll}}</div>
+                <div class="t">应参与人员</div>
+            </div>
+            <div class="center" @click="routerToList(0)">
+                <div class="n">{{hdr.iAllJoin}}</div>
+                <div class="t">已参与人员</div>
+            </div>
+            <div class="right" @click="routerToList(1)">
+                <div class="n">{{hdr.iAllNotJoin}}</div>
+                <div class="t">未参与人员</div>
+            </div>
+          </div>
+      </div>
+      <div class="CONTENT">
+        <tab v-model="activeTab" prevent-default @on-before-index-change="switchTabItem" bar-active-color="#4572d7" active-color="#4572d7" default-color="#8a8a8a">
+            <tab-item :selected="activeTab == 0">数据统计</tab-item>
+            <tab-item :selected="activeTab == 1">详细数据</tab-item>
+        </tab>
+        <div v-show="activeTab == 0" class="activeTab1">
+            <div>
+                <h3>1.目前健康状况</h3>
+                <div ref="chart1">
+                    <canvas id="myChart1" width="400" height="300" style="width:100%;height:300px;"></canvas>
+                </div>
+            </div>
+            <div>
+                <h3>2.自2020年1月1日起，是否在湖北停留或路过，或解除过来自湖北的人员饼状图</h3>
+                <div ref="chart2">
+                    <canvas id="myChart2" width="400" height="300" style="width:100%;height:300px;"></canvas>
+                </div>
+            </div>
+            <div>
+                <h3>3.是否接触过疑似或确诊的新型肺炎患者</h3>
+                <div ref="chart3">
+                    <canvas id="myChart3" width="400" height="300" style="width:100%;height:300px;"></canvas>
+                </div>
+            </div>
+        </div>
+        <div v-show="activeTab == 1" class="activeTab2" ref="scrollDom" @scroll="scrollToBottom">
+            <div class="items" v-for="(item,index) in list" :key="index">
+                <div class="avatar">
+                    <img src="" alt="">
+                    <span>{{item.sEmploeeName[0]}}</span>
+                </div>
+                <div class="item">
+                    <div class="name">{{item.sEmploeeName}}</div>
+                    <div class="time">{{item.dCheckDate}}</div>
+                    <i class="iconfont icon-youjiantou"></i>
+                </div>
+            </div>
+            <div class="img" v-if="list.length <= 0">
+                <img src="@/assets/noData.jpg" class="_img" alt="">
+            </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import Util from '@/libs/util.js';
+import {mapState} from 'vuex';
+import { Tab, TabItem } from 'vux'
+const F2 = require('@antv/f2/lib/index')
+const PieLabel = require('@antv/f2/lib/plugin/pie-label'); // 引入 PieLabel 模块
+const Legend = require('@antv/f2/lib/plugin/legend');
+F2.Chart.plugins.register(Legend); // 方式一：全局注册
+F2.Chart.plugins.register(PieLabel);
+
+export default {
+  name: 'healthCardStatisticsChart',
+  data () {
+    return {
+        activeTab:0,
+        myChart1:null,
+        myChart2:null,
+        myChart3:null,
+        set1:[],
+        set2:[],
+        set3:[],
+        list:[],
+        page:1,
+        per_page:20,
+        y:0
+    }
+  },
+  components:{
+      Tab, TabItem
+  },
+  computed:{
+    ...mapState({
+        hdr:state => state.healthStatistics.hdr
+    })
+  },
+  async mounted(){
+  },
+  async activated(){
+    window.d = this;
+    
+    if(this.activeTab == 0){
+        await this.getData();
+    }else{
+        this.page = 1;
+        this.per_page = 20;
+        await this.getList();
+    }
+    window.addEventListener("resize",()=>{
+        setTimeout(()=>{
+            this.myChart1.changeSize(this.$refs['chart1'].offsetWidth); // 清除
+            this.myChart1.destroy();
+            this.myChart2.changeSize(this.$refs['chart2'].offsetWidth); // 清除
+            this.myChart2.destroy();
+            this.myChart3.changeSize(this.$refs['chart3'].offsetWidth); // 清除
+            this.myChart3.destroy();
+            this.renderChart1();
+            this.renderChart2();
+            this.renderChart3();
+        })
+    });
+    
+    this.$nextTick(async ()=>{
+        await this.renderChart1();
+        await this.renderChart2();
+        await this.renderChart3();
+    })
+  },
+  methods:{
+    switchTabItem(index){
+        this.activeTab = index;
+        if(this.activeTab == 0){
+            this.getData();
+        }else{
+            this.getList();
+        }
+    },
+    renderChart1 () {
+        this.myChart1 = new F2.Chart({
+            id: 'myChart1',
+            pixelRatio: window.devicePixelRatio,
+            plugins: [PieLabel,Legend]
+        });
+        this.myChart1.source(this.set1);
+        this.myChart1.coord('polar', {
+            transposed: true,
+            radius: 0.9,
+            innerRadius: 0.5
+        });
+        this.myChart1.axis(false);
+        this.myChart1.tooltip(false);
+        this.myChart1.legend('title', {
+            position: 'bottom'
+        })
+        this.myChart1.guide()
+        .html({
+            position: [ '50%', '50%' ],
+            html: '<div style="text-align: center;width:150px;height: 50px;">\n      <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n      <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n      </div>'
+        });
+        
+        this.myChart1.pieLabel({
+            sidePadding: 30,
+            activeShape: true,
+            label1: function label1(data) {
+                return {
+                text: data.value,
+                fill: '#343434',
+                fontWeight: 'bold'
+                };
+            },
+            label2: function label2(data) {
+                return {
+                text: data.title,
+                fill: '#999'
+                };
+            },
+            onClick: function onClick(ev) {
+                const data = ev.data;
+                if (data) {
+                }
+            }
+        });
+        this.myChart1.interval()
+            .position('title*value')
+            .color('title', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ])
+            .adjust('stack')
+        this.myChart1.render();
+    },
+    renderChart2 () {
+        this.myChart2 = new F2.Chart({
+            id: 'myChart2',
+            pixelRatio: window.devicePixelRatio,
+            plugins: [PieLabel,Legend]
+        });
+        this.myChart2.source(this.set2);
+        this.myChart2.coord('polar', {
+            transposed: true,
+            radius: 0.9,
+            innerRadius: 0.5
+        });
+        this.myChart2.axis(false);
+        this.myChart2.tooltip(false);
+        this.myChart2.legend('title', {
+            position: 'bottom'
+        })
+        this.myChart2.guide()
+        .html({
+            position: [ '50%', '50%' ],
+            html: '<div style="text-align: center;width:150px;height: 50px;">\n      <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n      <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n      </div>'
+        });
+        
+        this.myChart2.pieLabel({
+            sidePadding: 30,
+            activeShape: true,
+            label1: function label1(data) {
+                return {
+                text: data.value,
+                fill: '#343434',
+                fontWeight: 'bold'
+                };
+            },
+            label2: function label2(data) {
+                return {
+                text: data.title,
+                fill: '#999'
+                };
+            },
+            onClick: function onClick(ev) {
+                const data = ev.data;
+                if (data) {
+                }
+            }
+        });
+        this.myChart2.interval()
+            .position('title*value')
+            .color('title', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ])
+            .adjust('stack')
+        this.myChart2.render();
+    },
+    renderChart3 () {
+        this.myChart3 = new F2.Chart({
+            id: 'myChart3',
+            pixelRatio: window.devicePixelRatio,
+            plugins: [PieLabel,Legend]
+        });
+        this.myChart3.source(this.set3);
+        this.myChart3.coord('polar', {
+            transposed: true,
+            radius: 0.9,
+            innerRadius: 0.5
+        });
+        this.myChart3.axis(false);
+        this.myChart3.tooltip(false);
+        this.myChart3.legend('title', {
+            position: 'bottom'
+        })
+        this.myChart3.guide()
+        .html({
+            position: [ '50%', '50%' ],
+            html: '<div style="text-align: center;width:150px;height: 50px;">\n      <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n      <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n      </div>'
+        });
+        
+        this.myChart3.pieLabel({
+            sidePadding: 30,
+            activeShape: true,
+            label1: function label1(data) {
+                return {
+                text: data.value,
+                fill: '#343434',
+                fontWeight: 'bold'
+                };
+            },
+            label2: function label2(data) {
+                return {
+                text: data.title,
+                fill: '#999'
+                };
+            },
+            onClick: function onClick(ev) {
+                const data = ev.data;
+                if (data) {
+                }
+            }
+        });
+        this.myChart3.interval()
+            .position('title*value')
+            .color('title', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ])
+            .adjust('stack')
+        this.myChart3.render();
+    },
+    async getData(){
+        let res = await this.request('getStatisticalDetails',{
+            data:[
+                {key:'url',value:'statistical_details_data'},
+                {key:'dDate',value: this.hdr.dDate},
+                {key:'iCompanyId',value: this.hdr.iCompanyId || "1"}
+            ],
+            params:{},
+        },'加载中',{});
+        if(Util.getType(res) == 'object') {
+            this.set1 = [
+                {
+                    title:'感染',
+                    value:res.set1[0].iFever
+                },
+                {
+                    title:'健康',
+                    value:res.set1[0].iHealthy
+                },
+                {
+                    title:'其他',
+                    value:res.set1[0].iOther
+                }
+            ];
+            this.set2 = [
+                {
+                    title:'接触',
+                    value:res.set2[0].bHaveBeenTrue
+                },
+                {
+                    title:'未接触',
+                    value:res.set2[0].bHaveBeenFalse
+                }
+            ];
+            this.set3 = [
+                {
+                    title:'停留',
+                    value:res.set3[0].bTouchTrue
+                },
+                {
+                    title:'未停留',
+                    value:res.set3[0].bTouchFalse
+                }
+            ];
+        }
+    },
+    async getList(){
+        if(this.per_page < 20){
+            this.$vux.toast.text('已加载全部数据!', 'middle')
+            return false;
+        }
+        let res = await this.request('getStatisticalDetails',{
+            data:[
+                {key:'url',value:'HealthLog'},
+                {key:'dDate',value: this.hdr.dDate},
+                {key:'iCompanyId',value: this.hdr.iCompanyId || "1"},
+                {key:'iType',value:'1'}
+            ],
+            params:{
+                page:this.page,
+                per_page:this.per_page
+            },
+        },'加载中',{});
+        if(res && res.length > 0){
+            this.list = this.list.concat(res);
+            this.page++;
+            this.per_page = res.length;
+        }
+    },
+    scrollToBottom(){
+        let scrollDom = this.$refs['scrollDom'];
+        if(Util.scrollToBottom(scrollDom)){
+            this.getList();
+        }
+    },
+    routerToList(type){
+        this.$router.push({name:'healthCardStatisticsList',params:{type:type}});
+    }
+  }
+}
+</script>
\ No newline at end of file

src/view/healthCard/statistics/index.vue

 <style lang="less" >
     @import url('../../../styles/common.less');
     #healthCardStatisticsIndex{
-        background: #f6f5f9;
+        background: white;
         height:100%;
         display: flex;
         flex-direction: column;
-        
+        .items{
+          // flex-grow:1;
+          // height:1px;
+          margin:15px 15px 0 15px;
+          .HEAD{
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px;
+            background: #6b9bf7;
+            height:60px;
+            display: flex;
+            align-items: center;
+            padding:0 10px;
+            .left{
+              flex:1;
+              color:white;
+              font-size:18px;
+              font-weight: bold;
+            }
+            .right{
+              flex:1;
+              text-align: right;
+              display:flex;
+              flex-wrap: wrap;
+              div{
+                width:100%;
+                color:white;
+              }
+              .month{
+                font-size:14px;
+              }
+              .day{
+                font-size:18px;
+                font-weight: bold;
+              }
+            }
+          }
+          .CONTENT{
+            border-bottom-left-radius: 6px;
+            border-bottom-right-radius: 6px;
+            border:2px solid #6b9bf7;
+            border-top:0;
+            padding:10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .left,.right,.center{
+              display: flex;
+              flex-wrap: wrap;
+              justify-content: center;
+              align-items: center;
+              flex:1;
+              .n{
+                width:100%;
+                color:#527cd9;
+                font-weight: bold;
+                font-size:20px;
+                text-align: center;
+              }
+              .t{
+                width:100%;
+                font-size:14px;
+                text-align: center;
+              }
+            }
+          }
+        }
+        .items:last-child{
+          margin-bottom:15px;
+        }
     }
 </style>
 
 <template>
   <div id="healthCardStatisticsIndex">
-    
+    <div class="items" v-for="(item,index) in list" :key="index">
+      <div class="HEAD" @click="routerToChart(item)">
+        <div class="left">
+          <span>{{item.iAllJoin}}/{{item.iAll}}</span>
+        </div>
+        <div class="right">
+          <div class="day">{{item.iDay}}</div>
+          <div class="month">{{item.sMonth}}</div>
+        </div>
+      </div>   
+      <div class="CONTENT">
+        <div class="left">
+          <div class="n">{{item.iAll}}</div>
+          <div class="t">应参与人员</div>
+        </div>
+        <div class="center">
+          <div class="n">{{item.iAllJoin}}</div>
+          <div class="t">已参与人员</div>
+        </div>
+        <div class="right">
+          <div class="n">{{item.iAllNotJoin}}</div>
+          <div class="t">未参与人员</div>
+        </div>
+      </div>      
+    </div>
   </div>
 </template>
 
@@ -23,7 +115,7 @@ export default {
   name: 'healthCardStatisticsIndex',
   data () {
     return {
-
+      list:[]
     }
   },
   components:{
@@ -39,9 +131,25 @@ export default {
   },
   async activated(){
     window.d = this;
+    await this.getData();
   },
   methods:{
-    
+    async getData(){
+      let res = await this.request('getStatisticalDetails',{
+          data:[
+              {key:'url',value:'statistical_details'},
+              {key:'openid',value:'3'}
+          ],
+          params:{},
+      },'加载中',{});
+      if(res && res.length > 0) {
+        this.list = res;
+      }
+    },
+    routerToChart(item){
+      this.$store.dispatch('saveHealthStatisticsHdr',item);
+      this.$router.push({name:'healthCardStatisticsChart'});
+    }
   }
 }
 </script>
\ No newline at end of file

src/view/healthCard/statistics/list.vue

+<style lang="less" >
+    @import url('../../../styles/common.less');
+    #healthCardStatisticsList{
+        background: #f6f5f9;
+        height:100%;
+        display: flex;
+        flex-direction: column;
+        .CONTENT{
+            flex-grow: 1;
+            height:1px;
+            display: flex;
+            flex-direction: column;
+            .activeTab2{
+                flex-grow: 1;
+                height:1px;
+                background: white;
+                overflow: auto;
+                -webkit-overflow-scrolling: touch;
+                .items{
+                    display: flex;
+                    height:60px;
+                    align-items: center;
+                    margin:10px;
+                    .avatar{
+                        height:50px;
+                        width:50px;
+                        border-radius: 50%;
+                        background: #3a8af7;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        color:white;
+                        font-size:22px;
+                        margin-right:10px;
+                    }
+                    .item{
+                        flex:1;
+                        height:60px;
+                        border-bottom:1px solid #f6f6f6;
+                        box-sizing: border-box;
+                        display: flex;
+                        align-items: center;
+                        .name{
+                            font-size:14px;
+                        }
+                        >div{
+                            flex:1;
+                        }
+                    }
+                }
+                
+            }
+        }
+        .img{
+            width:100%;
+            display: flex;
+            justify-content: center;
+            img{
+                width:100%;
+                height:300px;
+            }
+        }
+    }
+</style>
+
+<template>
+  <div id="healthCardStatisticsList">
+      <div class="CONTENT">
+        <tab v-model="activeTab" prevent-default @on-before-index-change="switchTabItem" bar-active-color="#4572d7" active-color="#4572d7" default-color="#8a8a8a">
+            <tab-item :selected="activeTab == 0">已填写（{{list1.length}}）</tab-item>
+            <tab-item :selected="activeTab == 1">未填写（{{list2.length}}）</tab-item>
+        </tab>
+        <div class="activeTab2">
+            <div class="items" v-for="(item,index) in (activeTab == 0 ? list1 : list2)" :key="index">
+                <div class="avatar">
+                    <img src="" alt="">
+                    <span>{{item.sEmploeeName[0]}}</span>
+                </div>
+                <div class="item">
+                    <div class="name">{{item.sEmploeeName}}</div>
+                </div>
+            </div>
+            <div class="img" v-if="(activeTab == 0 ? list1 : list2).length <= 0">
+                <img src="@/assets/noData.jpg" class="_img" alt="">
+            </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script>
+import Util from '@/libs/util.js';
+import {mapState} from 'vuex';
+import { Tab, TabItem } from 'vux'
+
+export default {
+  name: 'healthCardStatisticsList',
+  data () {
+    return {
+        activeTab:0,
+        page1:1,
+        per_page1:20,
+        page2:1,
+        per_page2:20,
+        list1:[],
+        list2:[]
+    }
+  },
+  components:{
+      Tab, TabItem
+  },
+  computed:{
+    ...mapState({
+        hdr:state => state.healthStatistics.hdr
+    })
+  },
+  async mounted(){
+    
+  },
+  async activated(){
+    window.d = this;
+    this.activeTab = this.$route.params.type;
+    this.clean();
+    await this.getList1();
+    await this.getList2();
+  },
+  methods:{
+    clean(){
+        this.page1 = 1;
+        this.per_page1 = 20;
+        this.list1 = [];
+        this.page2 = 1;
+        this.per_page2 = 20;
+        this.list2 = [];
+    },
+    switchTabItem(index){
+        this.activeTab = index;
+        if(this.activeTab == 0){
+            this.getList1();
+        }else{this.activeTab == 1}{
+            this.getList2();
+        }
+    },
+    async getList1(){
+        if(this.per_page1 < 20){
+            this.$vux.toast.text('已加载全部数据!', 'middle')
+            return false;
+        }
+        let res = await this.request('getStatisticalDetails',{
+            data:[
+                {key:'url',value:'HealthLog'},
+                {key:'dDate',value: this.hdr.dDate},
+                {key:'iCompanyId',value:'1'},
+                {key:'iType',value:'1'}
+            ],
+            params:{
+                page:this.page1,
+                per_page:this.per_page1
+            },
+        },'加载中',{});
+        if(res && res.length > 0){
+            this.list1 = this.list1.concat(res);
+            this.page1++;
+            this.per_page1 = res.length;
+        }
+    },
+    async getList2(){
+        if(this.per_page2 < 20){
+            this.$vux.toast.text('已加载全部数据!', 'middle')
+            return false;
+        }
+        let res = await this.request('getStatisticalDetails',{
+            data:[
+                {key:'url',value:'HealthLog'},
+                {key:'dDate',value:this.hdr.dDate},
+                {key:'iCompanyId',value:'1'},
+                {key:'iType',value:'0'}
+            ],
+            params:{
+                page:this.page2,
+                per_page:this.per_page2
+            },
+        },'加载中',{});
+        if(res && res.length > 0){
+            this.list2 = this.list2.concat(res);
+            this.page2++;
+            this.per_page2 = res.length;
+        }
+    },
+    scrollToBottom(){
+        let scrollDom = this.$refs['scrollDom'];
+        if(Util.scrollToBottom(scrollDom)){
+            if(this.activeTab == 0){
+                this.getList1();
+            }else{this.activeTab == 1}{
+                this.getList2();
+            }
+        }
+    }
+  }
+}
+</script>
\ No newline at end of file