Skip to content

W
WX_h5
Commit 661b6456 authored by 张锡奇's avatar 张锡奇
Browse files
Options

upload

parent a5dcb94c
Hide whitespace changes
Inline Side-by-side
Showing with 295 additions and 100 deletions
src/libs/host.js
View file @ 661b6456
...@@ -31,7 +31,7 @@ function urlFun(name){ ...@@ -31,7 +31,7 @@ function urlFun(name){
/** /**
* 健康打卡统计 * 健康打卡统计
*/ */
health:`http://47.97.206.38:23253` health:`https://weixin.huansi.net/apiproxy/huansi/service/proxy/1225621052093239296`
} }
return url[name] return url[name]
} }
......
src/libs/util.js
View file @ 661b6456
...@@ -7,6 +7,7 @@ var nowMonth = now.getMonth(); //当前月 ...@@ -7,6 +7,7 @@ var nowMonth = now.getMonth(); //当前月
var nowYear = now.getYear(); //当前年 var nowYear = now.getYear(); //当前年
nowYear += (nowYear < 2000) ? 1900 : 0; // nowYear += (nowYear < 2000) ? 1900 : 0; //
var y = 0;
let util = { let util = {
...@@ -489,6 +490,22 @@ util.Colors.prototype.getHslArray= function() { ...@@ -489,6 +490,22 @@ util.Colors.prototype.getHslArray= function() {
} }
return HSL; 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(){ // util.pageReturn = function(){
// /*微信自带返回按钮，不刷新，刷新页面start*/ // /*微信自带返回按钮，不刷新，刷新页面start*/
// if (util.isIos()) { // if (util.isIos()) {
......
src/router/health.js
View file @ 661b6456
...@@ -36,7 +36,7 @@ module.exports = [ ...@@ -36,7 +36,7 @@ module.exports = [
} }
}, },
{ {
path:'statistics/list', path:'statistics/list:type',
name:'healthCardStatisticsList', name:'healthCardStatisticsList',
component:()=> import('@/view/healthCard/statistics/list.vue'), component:()=> import('@/view/healthCard/statistics/list.vue'),
meta:{ meta:{
......
src/store/index.js
View file @ 661b6456
...@@ -6,6 +6,7 @@ import searchOrder from './modules/tiip/searchOrder'; ...@@ -6,6 +6,7 @@ import searchOrder from './modules/tiip/searchOrder';
import profitAnalysis from './modules/tiip/profitAnalysis'; import profitAnalysis from './modules/tiip/profitAnalysis';
import kanban from './modules/tiip/kanban'; import kanban from './modules/tiip/kanban';
import checkProgress from './modules/tiip/checkProgress'; import checkProgress from './modules/tiip/checkProgress';
import healthStatistics from './modules/health/statistics';
Vue.use(Vuex); Vue.use(Vuex);
...@@ -22,7 +23,8 @@ const store = new Vuex.Store({ ...@@ -22,7 +23,8 @@ const store = new Vuex.Store({
searchOrder, searchOrder,
profitAnalysis, profitAnalysis,
kanban, kanban,
checkProgress checkProgress,
healthStatistics
} }
}); });
......
src/store/modules/health/statistics.js 0 → 100644
View file @ 661b6456
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
View file @ 661b6456
...@@ -76,6 +76,8 @@ ...@@ -76,6 +76,8 @@
.time{ .time{
font-size:14px; font-size:14px;
color:#8a8a8a; color:#8a8a8a;
text-align: right;
padding-right:10px;
} }
>div{ >div{
flex:1; flex:1;
...@@ -130,7 +132,15 @@ ...@@ -130,7 +132,15 @@
} }
} }
} }
.img{
width:100%;
display: flex;
justify-content: center;
img{
width:100%;
height:300px;
}
}
} }
</style> </style>
...@@ -138,23 +148,20 @@ ...@@ -138,23 +148,20 @@
<div id="healthCardStatisticsChart"> <div id="healthCardStatisticsChart">
<div class="HEADER"> <div class="HEADER">
<div class="TITLE"> <div class="TITLE">
<h1>每日健康打卡（02月03日）</h1> <h1>每日健康打卡（{{hdr.sMonth}}{{Number(hdr.iDay) > 10 ? hdr.iDay : '0' + hdr.iDay}}日）</h1>
<h3>已结束</h3> <!-- <h3>已结束</h3> -->
</div>
<div class="DESC">
今日回复0个，总回复数229人，平均耗时长2分39秒
</div> </div>
<div class="Card"> <div class="Card">
<div class="left"> <div class="left">
<div class="n">282</div> <div class="n">{{hdr.iAll}}</div>
<div class="t">应参与人员</div> <div class="t">应参与人员</div>
</div> </div>
<div class="center"> <div class="center" @click="routerToList(0)">
<div class="n">229</div> <div class="n">{{hdr.iAllJoin}}</div>
<div class="t">已参与人员</div> <div class="t">已参与人员</div>
</div> </div>
<div class="right"> <div class="right" @click="routerToList(1)">
<div class="n">53</div> <div class="n">{{hdr.iAllNotJoin}}</div>
<div class="t">未参与人员</div> <div class="t">未参与人员</div>
</div> </div>
</div> </div>
...@@ -184,18 +191,21 @@ ...@@ -184,18 +191,21 @@
</div> </div>
</div> </div>
</div> </div>
<div v-show="activeTab == 1" class="activeTab2"> <div v-show="activeTab == 1" class="activeTab2" ref="scrollDom" @scroll="scrollToBottom">
<div class="items" v-for="(item,index) in [1,2,3,4,5,5,5,5,5,5,5,5,5]" :key="index"> <div class="items" v-for="(item,index) in list" :key="index">
<div class="avatar"> <div class="avatar">
<img src="" alt=""> <img src="" alt="">
<span>张</span> <span>{{item.sEmploeeName[0]}}</span>
</div> </div>
<div class="item"> <div class="item">
<div class="name">张锡奇</div> <div class="name">{{item.sEmploeeName}}</div>
<div class="time">2020-02-05 22:12:34</div> <div class="time">{{item.dCheckDate}}</div>
<i class="iconfont icon-youjiantou"></i> <i class="iconfont icon-youjiantou"></i>
</div> </div>
</div> </div>
<div class="img" v-if="list.length <= 0">
<img src="@/assets/noData.jpg" class="_img" alt="">
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -219,7 +229,13 @@ export default { ...@@ -219,7 +229,13 @@ export default {
myChart1:null, myChart1:null,
myChart2:null, myChart2:null,
myChart3:null, myChart3:null,
set1:[],
set2:[],
set3:[],
list:[],
page:1,
per_page:20,
y:0
} }
}, },
components:{ components:{
...@@ -227,14 +243,21 @@ export default { ...@@ -227,14 +243,21 @@ export default {
}, },
computed:{ computed:{
...mapState({ ...mapState({
hdr:state => state.healthStatistics.hdr
}) })
}, },
async mounted(){ async mounted(){
}, },
async activated(){ async activated(){
window.d = this; window.d = this;
if(this.activeTab == 0){
await this.getData();
}else{
this.page = 1;
this.per_page = 20;
await this.getList();
}
window.addEventListener("resize",()=>{ window.addEventListener("resize",()=>{
setTimeout(()=>{ setTimeout(()=>{
this.myChart1.changeSize(this.$refs['chart1'].offsetWidth); // 清除 this.myChart1.changeSize(this.$refs['chart1'].offsetWidth); // 清除
...@@ -258,31 +281,19 @@ export default { ...@@ -258,31 +281,19 @@ export default {
methods:{ methods:{
switchTabItem(index){ switchTabItem(index){
this.activeTab = index; this.activeTab = index;
if(this.activeTab == 0){
this.getData();
}else{
this.getList();
}
}, },
renderChart1 () { renderChart1 () {
const data = [{
const: 'const',
type: '交通出行',
money: 51.39
}, {
const: 'const',
type: '饮食',
money: 356.68
}, {
const: 'const',
type: '生活日用',
money: 20.00
}, {
const: 'const',
type: '住房缴费',
money: 116.53
}];
this.myChart1 = new F2.Chart({ this.myChart1 = new F2.Chart({
id: 'myChart1', id: 'myChart1',
pixelRatio: window.devicePixelRatio, pixelRatio: window.devicePixelRatio,
plugins: [PieLabel,Legend] plugins: [PieLabel,Legend]
}); });
this.myChart1.source(data); this.myChart1.source(this.set1);
this.myChart1.coord('polar', { this.myChart1.coord('polar', {
transposed: true, transposed: true,
radius: 0.9, radius: 0.9,
...@@ -290,7 +301,7 @@ export default { ...@@ -290,7 +301,7 @@ export default {
}); });
this.myChart1.axis(false); this.myChart1.axis(false);
this.myChart1.tooltip(false); this.myChart1.tooltip(false);
this.myChart1.legend('type', { this.myChart1.legend('title', {
position: 'bottom' position: 'bottom'
}) })
this.myChart1.guide() this.myChart1.guide()
...@@ -304,14 +315,14 @@ export default { ...@@ -304,14 +315,14 @@ export default {
activeShape: true, activeShape: true,
label1: function label1(data) { label1: function label1(data) {
return { return {
text: '￥' + data.money, text: data.value,
fill: '#343434', fill: '#343434',
fontWeight: 'bold' fontWeight: 'bold'
}; };
}, },
label2: function label2(data) { label2: function label2(data) {
return { return {
text: data.type, text: data.title,
fill: '#999' fill: '#999'
}; };
}, },
...@@ -322,35 +333,18 @@ export default { ...@@ -322,35 +333,18 @@ export default {
} }
}); });
this.myChart1.interval() this.myChart1.interval()
.position('const*money') .position('title*value')
.color('type', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ]) .color('title', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ])
.adjust('stack') .adjust('stack')
this.myChart1.render(); this.myChart1.render();
}, },
renderChart2 () { renderChart2 () {
const data = [{
const: 'const',
type: '交通出行',
money: 51.39
}, {
const: 'const',
type: '饮食',
money: 356.68
}, {
const: 'const',
type: '生活日用',
money: 20.00
}, {
const: 'const',
type: '住房缴费',
money: 116.53
}];
this.myChart2 = new F2.Chart({ this.myChart2 = new F2.Chart({
id: 'myChart2', id: 'myChart2',
pixelRatio: window.devicePixelRatio, pixelRatio: window.devicePixelRatio,
plugins: [PieLabel,Legend] plugins: [PieLabel,Legend]
}); });
this.myChart2.source(data); this.myChart2.source(this.set2);
this.myChart2.coord('polar', { this.myChart2.coord('polar', {
transposed: true, transposed: true,
radius: 0.9, radius: 0.9,
...@@ -358,7 +352,7 @@ export default { ...@@ -358,7 +352,7 @@ export default {
}); });
this.myChart2.axis(false); this.myChart2.axis(false);
this.myChart2.tooltip(false); this.myChart2.tooltip(false);
this.myChart2.legend('type', { this.myChart2.legend('title', {
position: 'bottom' position: 'bottom'
}) })
this.myChart2.guide() this.myChart2.guide()
...@@ -372,14 +366,14 @@ export default { ...@@ -372,14 +366,14 @@ export default {
activeShape: true, activeShape: true,
label1: function label1(data) { label1: function label1(data) {
return { return {
text: '￥' + data.money, text: data.value,
fill: '#343434', fill: '#343434',
fontWeight: 'bold' fontWeight: 'bold'
}; };
}, },
label2: function label2(data) { label2: function label2(data) {
return { return {
text: data.type, text: data.title,
fill: '#999' fill: '#999'
}; };
}, },
...@@ -390,35 +384,18 @@ export default { ...@@ -390,35 +384,18 @@ export default {
} }
}); });
this.myChart2.interval() this.myChart2.interval()
.position('const*money') .position('title*value')
.color('type', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ]) .color('title', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ])
.adjust('stack') .adjust('stack')
this.myChart2.render(); this.myChart2.render();
}, },
renderChart3 () { renderChart3 () {
const data = [{
const: 'const',
type: '交通出行',
money: 51.39
}, {
const: 'const',
type: '饮食',
money: 356.68
}, {
const: 'const',
type: '生活日用',
money: 20.00
}, {
const: 'const',
type: '住房缴费',
money: 116.53
}];
this.myChart3 = new F2.Chart({ this.myChart3 = new F2.Chart({
id: 'myChart3', id: 'myChart3',
pixelRatio: window.devicePixelRatio, pixelRatio: window.devicePixelRatio,
plugins: [PieLabel,Legend] plugins: [PieLabel,Legend]
}); });
this.myChart3.source(data); this.myChart3.source(this.set3);
this.myChart3.coord('polar', { this.myChart3.coord('polar', {
transposed: true, transposed: true,
radius: 0.9, radius: 0.9,
...@@ -426,7 +403,7 @@ export default { ...@@ -426,7 +403,7 @@ export default {
}); });
this.myChart3.axis(false); this.myChart3.axis(false);
this.myChart3.tooltip(false); this.myChart3.tooltip(false);
this.myChart3.legend('type', { this.myChart3.legend('title', {
position: 'bottom' position: 'bottom'
}) })
this.myChart3.guide() this.myChart3.guide()
...@@ -440,14 +417,14 @@ export default { ...@@ -440,14 +417,14 @@ export default {
activeShape: true, activeShape: true,
label1: function label1(data) { label1: function label1(data) {
return { return {
text: '￥' + data.money, text: data.value,
fill: '#343434', fill: '#343434',
fontWeight: 'bold' fontWeight: 'bold'
}; };
}, },
label2: function label2(data) { label2: function label2(data) {
return { return {
text: data.type, text: data.title,
fill: '#999' fill: '#999'
}; };
}, },
...@@ -458,11 +435,89 @@ export default { ...@@ -458,11 +435,89 @@ export default {
} }
}); });
this.myChart3.interval() this.myChart3.interval()
.position('const*money') .position('title*value')
.color('type', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ]) .color('title', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ])
.adjust('stack') .adjust('stack')
this.myChart3.render(); 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> </script>
\ No newline at end of file
src/view/healthCard/statistics/index.vue
View file @ 661b6456
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
<template> <template>
<div id="healthCardStatisticsIndex"> <div id="healthCardStatisticsIndex">
<div class="items" v-for="(item,index) in list" :key="index"> <div class="items" v-for="(item,index) in list" :key="index">
<div class="HEAD"> <div class="HEAD" @click="routerToChart(item)">
<div class="left"> <div class="left">
<span>{{item.iAllJoin}}/{{item.iAll}}</span> <span>{{item.iAllJoin}}/{{item.iAll}}</span>
</div> </div>
...@@ -145,6 +145,10 @@ export default { ...@@ -145,6 +145,10 @@ export default {
if(res && res.length > 0) { if(res && res.length > 0) {
this.list = res; this.list = res;
} }
},
routerToChart(item){
this.$store.dispatch('saveHealthStatisticsHdr',item);
this.$router.push({name:'healthCardStatisticsChart'});
} }
} }
} }
......
src/view/healthCard/statistics/list.vue
View file @ 661b6456
...@@ -51,6 +51,15 @@ ...@@ -51,6 +51,15 @@
} }
} }
.img{
width:100%;
display: flex;
justify-content: center;
img{
width:100%;
height:300px;
}
}
} }
</style> </style>
...@@ -58,19 +67,22 @@ ...@@ -58,19 +67,22 @@
<div id="healthCardStatisticsList"> <div id="healthCardStatisticsList">
<div class="CONTENT"> <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 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">已填写（229）</tab-item> <tab-item :selected="activeTab == 0">已填写（{{list1.length}}）</tab-item>
<tab-item :selected="activeTab == 1">未填写（53）</tab-item> <tab-item :selected="activeTab == 1">未填写（{{list2.length}}）</tab-item>
</tab> </tab>
<div class="activeTab2"> <div class="activeTab2">
<div class="items" v-for="(item,index) in [1,2,3,4,5,5,5,5,5,5,5,5,5]" :key="index"> <div class="items" v-for="(item,index) in (activeTab == 0 ? list1 : list2)" :key="index">
<div class="avatar"> <div class="avatar">
<img src="" alt=""> <img src="" alt="">
<span>张</span> <span>{{item.sEmploeeName[0]}}</span>
</div> </div>
<div class="item"> <div class="item">
<div class="name">张锡奇</div> <div class="name">{{item.sEmploeeName}}</div>
</div> </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> </div>
</div> </div>
...@@ -86,6 +98,12 @@ export default { ...@@ -86,6 +98,12 @@ export default {
data () { data () {
return { return {
activeTab:0, activeTab:0,
page1:1,
per_page1:20,
page2:1,
per_page2:20,
list1:[],
list2:[]
} }
}, },
components:{ components:{
...@@ -93,19 +111,91 @@ export default { ...@@ -93,19 +111,91 @@ export default {
}, },
computed:{ computed:{
...mapState({ ...mapState({
hdr:state => state.healthStatistics.hdr
}) })
}, },
async mounted(){ async mounted(){
}, },
async activated(){ async activated(){
window.d = this; window.d = this;
this.activeTab = this.$route.params.type;
this.clean();
await this.getList1();
await this.getList2();
}, },
methods:{ methods:{
clean(){
this.page1 = 1;
this.per_page1 = 20;
this.list1 = [];
this.page2 = 1;
this.per_page2 = 20;
this.list2 = [];
},
switchTabItem(index){ switchTabItem(index){
this.activeTab = 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();
}
}
} }
} }
} }
......
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