Skip to content

W
WX_h5
Commit 817b8a0e authored by 张锡奇's avatar 张锡奇
Browse files
Options

upload

parent a881acb2
Show whitespace changes
Inline Side-by-side
Showing with 501 additions and 411 deletions
src/App.vue
View file @ 817b8a0e
<template>
<div id="app">
<v-app>
<keep-alive>
<keep-alive >
<router-view v-wechat-title="$route.meta.title"/>
</keep-alive>
</v-app>
......
src/libs/host.js
View file @ 817b8a0e
......@@ -31,8 +31,8 @@ function urlFun(name){
/**
* 健康打卡统计
*/
health:`https://weixin.huansi.net/apiproxy/huansi/service/proxy/1225621052093239296`,
// health:`https://weixin.huansi.net/apiproxy/huansi/service/proxy/1227787695263191040`, //测试地址
// health:`https://weixin.huansi.net/apiproxy/huansi/service/proxy/1225621052093239296`,
health:`https://weixin.huansi.net/apiproxy/huansi/service/proxy/1227787695263191040`, //测试地址
// health:`http://xuxiaoming.vaiwan.com`
}
return url[name]
......
src/view/healthCard/index.vue
View file @ 817b8a0e
......@@ -25,7 +25,7 @@
<div class="vApp">
<div class="keepAlive">
<keep-alive>
<router-view></router-view>
<router-view ></router-view>
</keep-alive>
</div>
<div class="TABBAR" v-if="showTabbar">
......@@ -147,6 +147,7 @@ export default {
if(result && result.length > 0){
result[0].iEmploeeId = result[0].iIden;
result[0].openId = result[0].sCreateAppid;
result[0].bBackFromother = result[0].bBackFromother ? 'true' : 'false';
this.$store.dispatch('saveHealthBaseData',result[0]);
}
}
......
src/view/healthCard/returnTrack/chart.vue
View file @ 817b8a0e
......@@ -103,15 +103,15 @@
</div>
<div class="Card">
<div class="left">
<div class="n">{{hdr.iAll}}</div>
<div class="n">{{hdr.bBackFromotherAll}}</div>
<div class="t">应参与人员</div>
</div>
<div class="center" @click="routerToList(0)">
<div class="n">{{hdr.iAllJoin}}</div>
<div class="n">{{hdr.bBackFromotherTrue}}</div>
<div class="t">已参与人员</div>
</div>
<div class="right" @click="routerToList(1)">
<div class="n">{{hdr.iAllNotJoin}}</div>
<div class="n">{{hdr.bBackFromotherFalse}}</div>
<div class="t">未参与人员</div>
</div>
</div>
......@@ -119,7 +119,7 @@
<div class="CONTENT">
<div class="activeTab1">
<div>
<h3>1.目前健康状况</h3>
<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>
......@@ -128,14 +128,18 @@
</div>
</div>
<div>
<h3>2.体温情况</h3>
<div ref="chart4" v-show="set2.length > 0">
<h3>2.返程时间</h3>
<div ref="chart2" 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>
<h3>3.返程详情</h3>
<customerTable :columns="columns" :list="set3" :tableStyle="tableStyle"></customerTable>
</div>
</div>
</div>
</div>
......@@ -144,12 +148,14 @@
<script>
import Util from '@/libs/util.js';
import {mapState} from 'vuex';
import { Tab, TabItem } from 'vux'
import { Tab, TabItem,ChinaAddressV4Data } 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);
import customerTable from '@/components/Table'
require('@antv/f2/lib/interaction/pan'); // 引入图表平移交互
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
......@@ -161,17 +167,70 @@ export default {
return {
myChart1:null,
myChart2:null,
hdr:{},
set1:[],
set2:[],
set3:[],
columns:[
{
width:'30%',
name:'人员',
align:'center',
field:'sEmploeeName',
fixed:true,
fixedLeftWidth:'0px'
},
{
width:'20%',
name:'返程日期',
align:'center',
field:'dBackDate'
},
{
width:'50%',
name:'出发地',
align:'center',
render: (h,params) => {
return h('span',params.row.address.join(','))
}
},
{
width:'20%',
name:'详情',
align:'center',
render: (h,params) => {
return h('span',{
style: {
'text-decoration':'underline',
'color':'#2d8cf0'
},
on:{
'click':()=>{
this.$router.push({name:'healthCardReturnTrack',params:{iEmploeeId:params.row.iIden,iCompanyId:params.row.iCompanyId},query:{openId:params.row.sCreateAppid,readOnly:1}})
}
}
},'详情')
}
}
],
tableStyle:{
theadBgColor:'rgba(223,238,253,1)',
complexTrBgColor:'white',
singleTrBgColor:'#eef4fe',
theadTdBorder:false,
tbodyTdBorder:false,
tbodyHeight:'auto',
tbodyTrBorderBottom:'1px solid #dbe9f8',
width:'100%'
},
}
},
components:{
Tab, TabItem
Tab, TabItem,customerTable
},
computed:{
...mapState({
hdr:state => state.healthStatistics.hdr,
openId:state => state.healthStatistics.openId
baseData:state => state.healthStatistics.baseData,
})
},
async mounted(){
......@@ -247,127 +306,93 @@ export default {
this.myChart1.render();
},
renderChart2 () {
this.myChart2 = new F2.Chart({
id: 'myChart2',
pixelRatio: window.devicePixelRatio,
plugins: [PieLabel,Legend]
pixelRatio: window.devicePixelRatio
});
this.myChart2.source(this.set2);
this.myChart2.coord('polar', {
transposed: true,
radius: 0.9,
let originX = [],originY = [];
this.set2.forEach((x,y)=> {
if(y<=3){
originX.push(x.dBackDate);
originY.push(x.iCount);
}
});
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.source(this.set2, {
dBackDate: {
type:'cat',
values:originX
}
});
this.myChart2.pieLabel({
sidePadding: 30,
activeShape: true,
label1: function label1(data) {
return {
text: data.value,
fill: '#343434',
fontWeight: 'bold'
};
this.myChart2.tooltip({
showCrosshairs: true,
showItemMarker: false,
background: {
radius: 2,
fill: '#1890FF',
padding: [ 3, 5 ]
},
label2: function label2(data) {
return {
text: data.title,
fill: '#999'
};
nameStyle: {
fill: '#fff'
},
onClick: function onClick(ev) {
const data = ev.data;
if (data) {
onShow: function onShow(ev) {
const items = ev.items;
items[0].name = items[0].title;
}
});
this.myChart2.line().position('dBackDate*iCount');
this.myChart2.point().position('dBackDate*iCount').style({
lineWidth: 1,
stroke: '#fff'
});
this.myChart2.interaction('pan');
// 定义进度条
this.myChart2.scrollBar({
mode: 'x',
xStyle: {
offsetY: -5
}
});
this.myChart2.interval()
.position('const*value')
.color('title', [ '#ff9900', '#19be6b' ])
.adjust('stack')
this.myChart2.render();
},
async getData(){
let res = await this.request('getStatisticalDetails',{
let res = await this.request('getHealthbacklog',{
data:[
{key:'url',value:'statistical_details_data'},
{key:'dDate',value: this.hdr.dDate},
{key:'iCompanyId',value: this.hdr.iCompanyId}
{key:'iCompanyId',value: this.baseData.iCompanyId}
],
params:{},
},'加载中',{});
if(Util.getType(res) == 'object') {
if(res.set1.length > 0) {
this.hdr = res.set1[0];
this.set1 = [
{
title:'感染',
value:res.set1[0].iFever,
title:'已返程',
value:res.set1[0].bBackFromotherTrue,
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,
title:'未返程',
value:res.set1[0].bBackFromotherFalse,
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'
if(res.set2.length > 0) this.set2 = res.set2;
this.set3 = res.set3;
this.set3.map(z=>{
z.address = z.sBackaddress.split(',')
z.address.map((x,i)=>{
ChinaAddressV4Data.map(y=>{
if(x == y.value){
z.address[i] = y.name;
}
];
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){
......
src/view/healthCard/returnTrack/index.vue
View file @ 817b8a0e
......@@ -149,7 +149,7 @@
</style>
<template>
<div id="healthCardReturnTrack">
<div class="editArea" v-if="showEditArea">
<div class="editArea" v-if="showEditArea && !readOnly">
<i class='iconfont icon-banben'></i>
<span>表单已填写</span>
<div class="editBtn">
......@@ -159,14 +159,14 @@
<div class="iCard" :style="{'margin-bottom':'10px','margin-top':showEditArea ? '0' : '8px'}">
<div class="list">
<div class="tip">1. 是否从其他城市返回<span style="color:red;">*</span></div>
<v-radio-group v-model="baseData.bBackFromother" :disabled="!!baseData.bBackFromother" @change="changeRadio">
<div style="margin-bottom:10px;"><v-radio value="1" label="从其他城市返回"/></div>
<div><v-radio value="0" label="一直在工作地，无需返程"/></div>
<v-radio-group v-model="baseData.bBackFromother" :disabled="baseData.bBackFromother == 'true' ? (showEditArea || submitForm.length > 0) : showEditArea" @change="changeRadio">
<div style="margin-bottom:10px;"><v-radio value="true" label="从其他城市返回"/></div>
<div><v-radio value="false" label="一直在工作地，无需返程"/></div>
</v-radio-group>
</div>
</div>
<div class="CONTENT" v-if="baseData.bBackFromother">
<div v-for="(item,index) in filterSubmitForm" :key="index" >
<div v-for="(item,index) in submitForm" :key="index" >
<div class="deleteArea">
<span style="color:#3399ff;">返回统计（{{index + 1}}）</span>
<span style="color:#ff6600;" @click="del(index)" v-if="!showEditArea">删除</span>
......@@ -242,7 +242,7 @@
</div>
</div>
</div>
<div class="addBtn" @click="add" v-if="!showEditArea">
<div class="addBtn" @click="add" v-if="!showEditArea && baseData.bBackFromother == 'true'">
<i class='iconfont icon-jia1'></i>
</div>
</div>
......@@ -279,33 +279,70 @@ export default {
submitForm:[],
isDisabled:false,
isOtherCityReturn:'',
list:list()
list:list(),
baseData:{},
readOnly:false
}
},
computed:{
...mapState({
baseData:state => state.healthStatistics.baseData,
}),
filterSubmitForm(){
return this.submitForm.filter(x=>x.iStatus != 3);
}
})
},
async activated(){
if (window.history && window.history.pushState) {
// 往历史记录里面添加一条新的当前页面的url
history.pushState(null, null, document.URL);
// 给 popstate 绑定一个方法 监听页面刷新
window.addEventListener('popstate', this.backChange, false);//false阻止默认事件
}
window.d = this;
this.$store.dispatch('saveHealthStatisticsOpen',this.$route.query.openId);
if(this.$route.query.hasOwnProperty('readOnly')){
this.readOnly = this.$route.query.readOnly;
}else{
this.readOnly = false;
}
await this.getHealthcompany();
await this.getHealthData();
},
methods:{
async getHealthcompany(){
let result = await this.request('getHealthcompany',{
data:[
{key: "url", value: "check_bhavecompany"},
{key: "openid", value: this.$route.query.openId}
]
})
if(result && result.length > 0){
result[0].iEmploeeId = result[0].iIden;
result[0].openId = result[0].sCreateAppid;
result[0].bBackFromother = result[0].bBackFromother ? 'true' : 'false';
this.baseData = result[0];
}
},
backChange() {
const that = this;
wx.miniProgram.switchTab({
url:'/pages/home'
})
},
changeRadio(e){
let data = util.deepClone(this.baseData);
this.request('saveHealthemploee',{
data:{
iIden:data.iIden,
iStatus:2,
bBackFromother:e == '1' ? true : false
bBackFromother:e == 'true' ? true : false
}
}).then(res=>{
data.bBackFromother = e;
if(e == 'true'){
let data = list();
data.iCompanyId = this.baseData.iCompanyId;
data.iEmploeeId = this.baseData.iEmploeeId;
this.submitForm.push(data);
}
this.$store.dispatch('saveHealthBaseData',data);
})
},
......@@ -313,7 +350,7 @@ export default {
let res = await this.request('getHealthbacklog',{
data:[
{key:'url',value:'HealthBackLog'},
{key:'iEmploeeId',value: this.$route.params.iEmploeeId},
{key:'iEmploeeId',value: this.baseData.iEmploeeId},
],
params:{},
},'加载中',{});
......@@ -327,17 +364,19 @@ export default {
this.isDisabled = true;
this.showEditArea = true;
}else{
if(this.baseData.bBackFromother == 'true'){
let data = list();
data.iCompanyId = this.$route.params.iCompanyId;
data.iEmploeeId = this.$route.params.iEmploeeId;
data.iCompanyId = this.baseData.iCompanyId;
data.iEmploeeId = this.baseData.iEmploeeId;
this.submitForm.push(data);
}
}
}
},
add(){
let data = list();
data.iCompanyId = this.$route.params.iCompanyId;
data.iEmploeeId = this.$route.params.iEmploeeId;
data.iCompanyId = this.baseData.iCompanyId;
data.iEmploeeId = this.baseData.iEmploeeId;
this.submitForm.push(data);
},
edit(){
......@@ -369,13 +408,19 @@ export default {
del(index){
this.$vux.confirm.show({
title:"提示",
content:'是否删除？',
content:'该数据将永久删除，是否删除？',
showCancelButton:true,
onConfirm :()=> {
onConfirm :async ()=> {
if(this.submitForm[index].iStatus == 1){
this.submitForm.splice(index,1);
}else if(this.submitForm[index].iStatus == 2){
this.submitForm[index].iStatus = 3;
let res = await this.request('saveHealthbacklog',{
data:[Object.assign(this.submitForm[index],{iStatus:3})],
params:{},
},'加载中',{});
if(res.iStatus == 1){
this.submitForm.splice(index,1);
}
}
},
onCancel () {}
......@@ -411,5 +456,8 @@ export default {
return true;
}
},
deactivated(){
window.removeEventListener('popstate', this.backChange, false);//false阻止默认事件
}
}
</script>
\ No newline at end of file
src/view/healthCard/statistics/index.vue
View file @ 817b8a0e
......@@ -5,54 +5,70 @@
height:100%;
display: flex;
flex-direction: column;
.items{
flex-grow:1;
height:1px;
overflow: auto;
-webkit-overflow-scrolling: touch;
.item{
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;
.iCard{
margin:10px 15px;
padding:0 10px;
.left{
flex:1;
color:white;
font-size:18px;
.HEAD{
height:40px;
line-height: 40px;
border-bottom: 1px solid #EDF4FF;
font-size: 18px;
font-weight: bold;
}
.right{
flex:1;
text-align: right;
display:flex;
}
.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;
div{
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%;
color:white;
text-align: center;
}
.month{
font-size:14px;
}
.day{
font-size:18px;
font-weight: bold;
.img{
width:100%;
display: flex;
justify-content: center;
img{
width:100%;
height:200px;
}
}
}
}
.returnTrack{
.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;
margin:20px 0;
.left,.right,.center{
display: flex;
flex-wrap: wrap;
......@@ -73,19 +89,11 @@
}
}
}
.FOOTER{
text-align: center;
>button{
width:200px !important;
}
.item:last-child{
margin-bottom:15px;
}
}
.img{
width:100%;
display: flex;
justify-content: center;
img{
width:100%;
height:300px;
}
}
.btn{
......@@ -101,48 +109,73 @@
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="items" v-if="list.length > 0">
<div class="item" v-for="(item,index) in list" :key="index" @click="routerToChart(item)" >
<div class="HEAD" >
<div class="left">
<span>{{item.iAllJoin}}/{{item.iAll}}</span>
<div class="statisics">
<div class="iCard">
<div class="HEAD">
每日健康统计
</div>
<div class="right">
<div class="day">{{item.iDay}}</div>
<div class="month">{{item.sMonth}}</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 class="img" v-if="list.length <= 0">
<img src="@/assets/noData.jpg" class="_img" alt="">
</div>
</div>
</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">{{item.iAll}}</div>
<div class="n">{{returnTrack.bBackFromotherAll || 0}}</div>
<div class="t">应参与人员</div>
</div>
<div class="center">
<div class="n">{{item.iAllJoin}}</div>
<div class="n">{{returnTrack.bBackFromotherTrue || 0}}</div>
<div class="t">已参与人员</div>
</div>
<div class="right">
<div class="n">{{item.iAllNotJoin}}</div>
<div class="n">{{returnTrack.bBackFromotherFalse || 0}}</div>
<div class="t">未参与人员</div>
</div>
</div>
<div class="FOOTER btn">
<button @click="routerToReturnChart">查看详情</button>
</div>
</div>
<div class="img" v-if="list.length <= 0">
<img src="@/assets/noData.jpg" class="_img" alt="">
</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>
</template>
......@@ -158,7 +191,11 @@ export default {
return {
list:[],
openId:'',
copyUrl:''
copyUrl:'',
h:0,
cardH:0,
itemH:0,
returnTrack:{}
}
},
components:{
......@@ -166,34 +203,44 @@ export default {
},
computed:{
...mapState({
baseData:state => state.healthStatistics.baseData,
})
},
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;
if (window.history && window.history.pushState) {
// 往历史记录里面添加一条新的当前页面的url
history.pushState(null, null, document.URL);
// 给 popstate 绑定一个方法 监听页面刷新
window.addEventListener('popstate', this.backChange, false);//false阻止默认事件
}
await this.getData();
// axios({
// method: 'get',
// url:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/1227787695263191040/sendmessage/excel/?iCompanyID=1382&t=0.34324224',
// responseType: 'blob'
// })
// .then(data => {
// let url = window.URL.createObjectURL(data.data)
// let link = document.createElement('a')
// link.style.display = 'none'
// link.href = url
// console.log(url)
// link.setAttribute('download', 'product.xls')
// document.body.appendChild(link)
// link.click()
// })
await this.getReturnTrack();
this.renderResize();
},
methods:{
backChange() {
const that = this;
wx.miniProgram.switchTab({
url:'/pages/home'
})
},
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:[
......@@ -206,6 +253,8 @@ export default {
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');
}else{
this.cardH = 210;
}
},
routerToChart(item){
......@@ -223,7 +272,27 @@ export default {
showCancelButton:false,
})
},1000)
},
async getReturnTrack(){
let res = await this.request('getHealthbacklog',{
data:[
{key:'url',value:'statistical_details_data'},
{key:'iCompanyId',value: this.baseData.iCompanyId}
],
params:{},
},'加载中',{});
if(Util.getType(res) == 'object') {
this.returnTrack = res.set1[0];
}
},
routerToReturnChart(){
this.$router.push({name:'healthCardReturnTrackChart'});
}
},
deactivated(){
// 移除监听
window.removeEventListener("resize", this.renderResize, false)
window.removeEventListener('popstate', this.backChange, false);//false阻止默认事件
}
}
</script>
\ No newline at end of file
src/view/healthCard/statistics/temp.vue
View file @ 817b8a0e
......@@ -5,70 +5,54 @@
height:100%;
display: flex;
flex-direction: column;
.items{
flex-grow:1;
height:1px;
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{
margin:15px 15px 0 15px;
.HEAD{
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background: #6b9bf7;
height:60px;
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;
}
padding:0 10px;
.left{
flex:1;
color:white;
font-size:18px;
font-weight: bold;
}
.DATE1{
.right{
flex:1;
text-align: right;
display:flex;
flex-wrap: wrap;
div{
width:100%;
text-align: center;
}
color:white;
}
.img{
width:100%;
display: flex;
justify-content: center;
img{
width:100%;
height:300px;
.month{
font-size:14px;
}
.day{
font-size:18px;
font-weight: bold;
}
}
}
.returnTrack{
.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;
margin:20px 0;
.left,.right,.center{
display: flex;
flex-wrap: wrap;
......@@ -89,11 +73,19 @@
}
}
}
.FOOTER{
text-align: center;
>button{
width:200px !important;
}
.item:last-child{
margin-bottom:15px;
}
}
.img{
width:100%;
display: flex;
justify-content: center;
img{
width:100%;
height:300px;
}
}
.btn{
......@@ -109,72 +101,48 @@
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 class="items" v-if="list.length > 0">
<div class="item" v-for="(item,index) in list" :key="index" @click="routerToChart(item)" >
<div class="HEAD" >
<div class="left">
<span>{{item.iAllJoin}}/{{item.iAll}}</span>
</div>
<div class="img" v-if="list.length <= 0">
<img src="@/assets/noData.jpg" class="_img" alt="">
<div class="right">
<div class="day">{{item.iDay}}</div>
<div class="month">{{item.sMonth}}</div>
</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="n">{{item.iAll}}</div>
<div class="t">应参与人员</div>
</div>
<div class="center">
<div class="n">{{returnTrack.bBackFromotherTrue || 0}}</div>
<div class="n">{{item.iAllJoin}}</div>
<div class="t">已参与人员</div>
</div>
<div class="right">
<div class="n">{{returnTrack.bBackFromotherFalse || 0}}</div>
<div class="n">{{item.iAllNotJoin}}</div>
<div class="t">未参与人员</div>
</div>
</div>
<div class="FOOTER btn">
<button @click="routerToReturnChart">查看详情</button>
</div>
</div>
<div class="img" v-if="list.length <= 0">
<img src="@/assets/noData.jpg" class="_img" alt="">
</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>
</template>
......@@ -190,11 +158,7 @@ export default {
return {
list:[],
openId:'',
copyUrl:'',
h:0,
cardH:0,
itemH:0,
returnTrack:{}
copyUrl:''
}
},
components:{
......@@ -208,30 +172,28 @@ export default {
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)
// axios({
// method: 'get',
// url:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/1227787695263191040/sendmessage/excel/?iCompanyID=1382&t=0.34324224',
// responseType: 'blob'
// })
// .then(data => {
// let url = window.URL.createObjectURL(data.data)
// let link = document.createElement('a')
// link.style.display = 'none'
// link.href = url
// console.log(url)
// link.setAttribute('download', 'product.xls')
// document.body.appendChild(link)
// link.click()
// })
},
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:[
......@@ -261,21 +223,6 @@ export default {
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'});
}
}
}
......
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