Skip to content

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

upload

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