Commit ad41ad53 authored by godwithdh's avatar godwithdh
parents b7d92335 a881acb2
......@@ -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
This diff is collapsed.
......@@ -226,4 +226,4 @@ export default {
}
}
}
</script>
\ No newline at end of file
</script>
<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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment