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

src/router/health.js

@@ -89,6 +89,16 @@ module.exports = [
                     activeTab:1
                 }
             },
+            {
+                path:'returnTrack/chart',
+                name:'healthCardReturnTrackChart',
+                component:()=> import('@/view/healthCard/returnTrack/chart.vue'),
+                meta:{
+                    title: '返程统计',
+                    showTabbar:true,
+                    activeTab:1
+                }
+            },
         ]
     }
 ]
\ No newline at end of file

src/view/healthCard/returnTrack/chart.vue

+<style lang="less" >
+    @import url('../../../styles/common.less');
+    #healthCardReturnTrackChart{
+        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;
+                    }
+                }
+            }
+        }
+        .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="healthCardReturnTrackChart">
+      <div class="HEADER">
+          <div class="TITLE">
+              <h1>返程统计</h1>
+          </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">
+        <div class="activeTab1">
+            <div>
+                <h3>1.目前健康状况</h3>
+                <div ref="chart1" v-show="set1.length > 0">
+                    <canvas id="myChart1" width="400" height="300" style="width:100%;height:300px;"></canvas>
+                </div>
+                <div class="img" v-if="set1.length <= 0">
+                    <img src="@/assets/noData.jpg" class="_img" alt="">
+                </div>
+            </div>
+            <div>
+                <h3>2.体温情况</h3>
+                <div ref="chart4" v-show="set2.length > 0">
+                    <canvas id="myChart2" width="400" height="300" style="width:100%;height:300px;"></canvas>
+                </div>
+                <div class="img" v-if="set2.length <= 0">
+                    <img src="@/assets/noData.jpg" class="_img" alt="">
+                </div>
+            </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);
+
+require('@antv/f2/lib/interaction/pan'); // 引入图表平移交互
+const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
+F2.Chart.plugins.register(ScrollBar); // 这里进行全局注册，也可以给 chart 的实例注册
+
+export default {
+  name: 'healthCardReturnTrackChart',
+  data () {
+    return {
+        myChart1:null,
+        myChart2:null,
+        set1:[],
+        set2:[],
+    }
+  },
+  components:{
+      Tab, TabItem
+  },
+  computed:{
+    ...mapState({
+        hdr:state => state.healthStatistics.hdr,
+        openId:state => state.healthStatistics.openId
+    })
+  },
+  async mounted(){
+  },
+  async activated(){
+    window.d = this;
+    await this.getData();
+    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.renderChart1();
+            this.renderChart2();
+        })
+    });
+    
+    this.$nextTick(async ()=>{
+        await this.renderChart1();
+        await this.renderChart2();
+    })
+  },
+  methods:{
+    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,
+        });
+        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('const*value')
+            .color('title', [ '#ff9900', '#19be6b', '#2d8cf0' ])
+            .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,
+        });
+        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('const*value')
+            .color('title', [ '#ff9900', '#19be6b' ])
+            .adjust('stack')
+        this.myChart2.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}
+            ],
+            params:{},
+        },'加载中',{});
+        if(Util.getType(res) == 'object') {
+            this.set1 = [
+                {
+                    title:'感染',
+                    value:res.set1[0].iFever,
+                    const: 'const'
+                },
+                {
+                    title:'健康',
+                    value:res.set1[0].iHealthy,
+                    const: 'const'
+                },
+                {
+                    title:'其他',
+                    value:res.set1[0].iOther,
+                    const: 'const'
+                }
+            ];
+            this.set2 = [
+                {
+                    title:'接触',
+                    value:res.set2[0].bHaveBeenTrue,
+                    const: 'const'
+                },
+                {
+                    title:'未接触',
+                    value:res.set2[0].bHaveBeenFalse,
+                    const: 'const'
+                }
+            ];
+            this.set3 = [
+                {
+                    title:'停留',
+                    value:res.set3[0].bTouchTrue,
+                    const: 'const'
+                },
+                {
+                    title:'未停留',
+                    value:res.set3[0].bTouchFalse,
+                    const: 'const'
+                }
+            ];
+            this.set4 = [
+                {
+                    title:'正常体温',
+                    value:res.set4[0].iNormalCount,
+                    const: 'const'
+                },
+                {
+                    title:'低烧',
+                    value:res.set4[0].iLowCount,
+                    const: 'const'
+                },
+                {
+                    title:'发烧',
+                    value:res.set4[0].iHighCount,
+                    const: 'const'
+                }
+            ];
+            this.set1 = this.set1.filter(x=>x.value > 0);
+            this.set2 = this.set2.filter(x=>x.value > 0);
+            this.set3 = this.set3.filter(x=>x.value > 0);
+            this.set4 = this.set4.filter(x=>x.value > 0);
+        }
+    },
+    routerToList(type){
+        // this.$router.push({name:'healthCardStatisticsList',params:{type:type}});
+    },
+  }
+}
+</script>
\ No newline at end of file

src/view/healthCard/statistics/temp.vue

+<style lang="less" >
+    @import url('../../../styles/common.less');
+    #healthCardStatisticsIndex{
+        background: white;
+        height:100%;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        .iCard{
+          margin:10px 15px;
+          padding:0 10px;
+          .HEAD{
+            height:40px;
+            line-height: 40px;
+            border-bottom: 1px solid #EDF4FF;
+            font-size: 18px;
+            font-weight: bold;
+          }
+        }
+        .statisics{
+          .CONTENT{
+            display: flex;
+            flex-wrap: wrap;
+            padding-top: 10px;
+            overflow-y: scroll;
+            -webkit-overflow-scrolling: touch;
+            .item{
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              flex-wrap: wrap;
+              margin-bottom:10px;
+              .DATE{
+                width:70%;
+                height:40px;
+                border-radius: 50%;
+                margin-bottom:5px;
+                border:4px solid #2d8cf0;
+                border-left-color: transparent;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                transform: rotate(45deg);
+                >div{
+                  transform: rotate(-45deg);
+                  font-size:12px;
+                }
+              }
+              .DATE1{
+                width:100%;
+                text-align: center;
+              }
+            }
+            .img{
+              width:100%;
+              display: flex;
+              justify-content: center;
+              img{
+                width:100%;
+                height:300px;
+              }
+            }
+          }
+        }
+        .returnTrack{
+          .CONTENT{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin:20px 0;
+            .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;
+              }
+            }
+          }
+          .FOOTER{
+            text-align: center;
+            >button{
+              width:200px !important;
+            }
+          }
+        }
+        .btn{
+          height:40px;
+          margin:0 15px 10px 15px;
+          >button{
+            height:40px;
+            color:white;
+            width:100%;
+            line-height: 40px;
+            background: #2d8cf0;
+            border-radius: 5px;
+            font-size:14px;
+          }
+        }
+        
+        @media screen and (max-width:500px){
+          .item,.DATE1{
+            width:25%;
+          }
+        }
+        @media screen and (min-width:500px) and (max-width:2000px){
+          .item,.DATE1{
+            width:10%;
+          }
+        }
+    }
+</style>
+
+<template>
+  <div id="healthCardStatisticsIndex">
+    <div class="statisics">
+      <div class="iCard">
+        <div class="HEAD">
+          每日健康统计
+        </div>
+        <div class="CONTENT" :style="{'max-height':cardH + 'px'}">
+          <div class="item" v-for="(item,index) in list" :key="index" @click="routerToChart(item)" v-if="list.length > 0" ref="item" :style="{'height':itemH + 'px'}">
+            <div class="DATE" ref="date" :style="{'height':h+'px'}">
+              <div>
+                <span style="font-weight:bold;">{{item.iAll}}</span><span>/{{item.iAllJoin}}</span>
+              </div>
+            </div>
+            <div class="DATE1" style="height:18px;">{{item.dDate}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="img" v-if="list.length <= 0">
+        <img src="@/assets/noData.jpg" class="_img" alt="">
+      </div>
+    </div>
+
+    <div class="btn" v-if="list.length > 0">
+      <!-- <span v-show="false" id="copyUrl">{{copyUrl}}</span> -->
+      <button @click="exportExcel" class="copy" :data-clipboard-text="copyUrl">导出excel</button>
+    </div>
+
+    <div class="returnTrack">
+      <div class="iCard">
+        <div class="HEAD">
+          员工返程统计
+        </div>
+        <div class="CONTENT">
+          <div class="left">
+            <div class="n">{{returnTrack.bBackFromotherAll || 0}}</div>
+            <div class="t">应参与人员</div>
+          </div>
+          <div class="center">
+            <div class="n">{{returnTrack.bBackFromotherTrue || 0}}</div>
+            <div class="t">已参与人员</div>
+          </div>
+          <div class="right">
+            <div class="n">{{returnTrack.bBackFromotherFalse || 0}}</div>
+            <div class="t">未参与人员</div>
+          </div>
+        </div>
+        <div class="FOOTER btn">
+          <button @click="routerToReturnChart">查看详情</button>
+        </div>  
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Util from '@/libs/util.js';
+import {mapState} from 'vuex';
+import axios from 'axios';
+import ClipboardJS from 'clipboard'
+import { setTimeout } from 'timers';
+export default {
+  name: 'healthCardStatisticsIndex',
+  data () {
+    return {
+      list:[],
+      openId:'',
+      copyUrl:'',
+      h:0,
+      cardH:0,
+      itemH:0,
+      returnTrack:{}
+    }
+  },
+  components:{
+    
+  },
+  computed:{
+    ...mapState({
+
+    })
+  },
+  async mounted(){
+    this.openId=this.$route.query.openId;
+    this.$store.dispatch('saveHealthStatisticsOpen',this.openId);
+    window.addEventListener("resize", this.renderResize, false)
+  },
+  async activated(){
+    window.d = this;
+    await this.getData();
+    await this.getReturnTrack();
+    this.renderResize();
+  },
+  beforeDestroy () {
+      // 移除监听
+      window.removeEventListener("resize", this.renderResize, false)
+  },
+  methods:{
+    renderResize() {
+      if(this.list.length > 0){
+        let ref = this.$refs['date'][0];
+        this.h = ref.offsetWidth;
+        this.$nextTick(()=>{
+          let item = this.$refs['item'][0];
+          this.itemH = this.h + 18 + 5;
+          this.cardH = this.itemH * 2 + 30;
+        })
+      }
+    },
+    async getData(){
+      let res = await this.request('getStatisticalDetails',{
+          data:[
+              {key:'url',value:'statistical_details'},
+              {key:'openid',value:this.openId}
+          ],
+          params:{},
+      },'加载中',{});
+      if(res && res.length > 0) {
+        this.list = res;
+        this.copyUrl = `https://weixin.huansi.net/apiproxy/huansi/service/proxy/1225621052093239296/sendmessage/excel/?iCompanyID=${this.list[0].iCompanyId}&t=${Math.random()}`
+        new ClipboardJS('.copy');
+      }
+    },
+    routerToChart(item){
+      this.$store.dispatch('saveHealthStatisticsHdr',item);
+      this.$router.push({name:'healthCardStatisticsChart'});
+    },
+    async exportExcel(){
+      this.$vux.loading.show();
+      setTimeout(async ()=>{
+        new ClipboardJS('.copy');
+        this.$vux.loading.hide();
+        this.$vux.confirm.show({
+          title:"提示",
+          content:'已复制导出链接，请手动打开浏览器粘贴并下载！',
+          showCancelButton:false,
+        })
+      },1000)
+    },
+    async getReturnTrack(){
+      let res = await this.request('getHealthbacklog',{
+          data:[
+              {key:'url',value:'statistical_details_data'},
+              {key:'iCompanyId',value: '1382'}
+          ],
+          params:{},
+      },'加载中',{});
+      if(Util.getType(res) == 'object') {
+        this.returnTrack = res.set1[0];
+      }
+    },
+    routerToReturnChart(){
+      this.$router.push({name:'healthCardReturnTrackChart'});
+    }
+  }
+}
+</script>
\ No newline at end of file