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