Skip to content

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

upload

parent 64ec0f9b
Hide whitespace changes
Inline Side-by-side
Showing with 715 additions and 6 deletions
src/libs/apiMap.js
View file @ a5dcb94c
import healthApi from './healthApi';
const methodMap = {
/**
* 产品颜色销售排行TOP50
......@@ -81,4 +82,4 @@ const methodMap = {
getTipProcurementProgress:{url:"/pbcontracthdr/",method:"post",host:"default"},
};
export default methodMap;
export default Object.assign(methodMap,healthApi);
src/libs/healthApi.js 0 → 100644
View file @ a5dcb94c
module.exports = {
getStatisticalDetails:{url:"/healthlog/",method:"post",host:"health"},
}
\ No newline at end of file
src/libs/host.js
View file @ a5dcb94c
......@@ -27,6 +27,11 @@ function urlFun(name){
*/
// inside:`http://192.168.4.39:5003`,
inside:`https://weixin.huansi.net/apiproxy/huansi/ERP`,
/**
* 健康打卡统计
*/
health:`http://47.97.206.38:23253`
}
return url[name]
}
......
src/router/health.js
View file @ a5dcb94c
......@@ -26,6 +26,22 @@ module.exports = [
meta:{
title: '员工健康'
}
},
{
path:'statistics/chart',
name:'healthCardStatisticsChart',
component:()=> import('@/view/healthCard/statistics/chart.vue'),
meta:{
title: '员工健康'
}
},
{
path:'statistics/list',
name:'healthCardStatisticsList',
component:()=> import('@/view/healthCard/statistics/list.vue'),
meta:{
title: '员工健康'
}
}
]
}
......
src/view/healthCard/statistics/chart.vue 0 → 100644
View file @ a5dcb94c
<style lang="less" >
@import url('../../../styles/common.less');
#healthCardStatisticsChart{
background: #f6f5f9;
height:100%;
display: flex;
flex-direction: column;
.TITLE{
display:flex;
align-items: center;
padding:10px 15px;
h1{
font-size:20px;
font-weight: bold;
}
h3{
width:auto;
font-size:12px;
text-align: center;
border:1px solid #ccc;
border-radius: 6px;
padding:2px 4px;
}
}
.CONTENT{
flex-grow: 1;
height:1px;
display: flex;
flex-direction: column;
.activeTab1{
flex-grow: 1;
height:1px;
background: white;
overflow: auto;
-webkit-overflow-scrolling: touch;
>div{
padding:10px;
h3{
font-weight: bold;
}
}
}
.activeTab2{
flex-grow: 1;
height:1px;
background: white;
overflow: auto;
-webkit-overflow-scrolling: touch;
.items{
display: flex;
height:60px;
align-items: center;
margin:10px;
.avatar{
height:50px;
width:50px;
border-radius: 50%;
background: #3a8af7;
display: flex;
justify-content: center;
align-items: center;
color:white;
font-size:22px;
margin-right:10px;
}
.item{
flex:1;
height:60px;
border-bottom:1px solid #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
.name{
font-size:14px;
}
.time{
font-size:14px;
color:#8a8a8a;
}
>div{
flex:1;
}
>i{
font-size: 12px;
}
}
}
}
}
.DESC{
padding:0 15px;
font-size:14px;
color:#8a8a8a;
}
.Card{
margin:10px 15px;
font-size:12px;
overflow:hidden;
background:#fff;
border-radius:5px;
box-shadow:0 1px 3px #bababa;
width:auto;
display: flex;
justify-content: center;
align-items: center;
padding:10px 0;
margin-bottom: 30px;
.left,.center{
border-right:1px solid #f1f1f1;
}
.left,.right,.center{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
flex:1;
.n{
width:100%;
color:#6a6a6a;
font-weight: bold;
font-size:20px;
text-align: center;
}
.t{
width:100%;
font-size:14px;
text-align: center;
color:#8a8a8a;
}
}
}
}
</style>
<template>
<div id="healthCardStatisticsChart">
<div class="HEADER">
<div class="TITLE">
<h1>每日健康打卡（02月03日）</h1>
<h3>已结束</h3>
</div>
<div class="DESC">
今日回复0个，总回复数229人，平均耗时长2分39秒
</div>
<div class="Card">
<div class="left">
<div class="n">282</div>
<div class="t">应参与人员</div>
</div>
<div class="center">
<div class="n">229</div>
<div class="t">已参与人员</div>
</div>
<div class="right">
<div class="n">53</div>
<div class="t">未参与人员</div>
</div>
</div>
</div>
<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">数据统计</tab-item>
<tab-item :selected="activeTab == 1">详细数据</tab-item>
</tab>
<div v-show="activeTab == 0" class="activeTab1">
<div>
<h3>1.目前健康状况</h3>
<div ref="chart1">
<canvas id="myChart1" width="400" height="300" style="width:100%;height:300px;"></canvas>
</div>
</div>
<div>
<h3>2.自2020年1月1日起，是否在湖北停留或路过，或解除过来自湖北的人员饼状图</h3>
<div ref="chart2">
<canvas id="myChart2" width="400" height="300" style="width:100%;height:300px;"></canvas>
</div>
</div>
<div>
<h3>3.是否接触过疑似或确诊的新型肺炎患者</h3>
<div ref="chart3">
<canvas id="myChart3" width="400" height="300" style="width:100%;height:300px;"></canvas>
</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 class="avatar">
<img src="" alt="">
<span>张</span>
</div>
<div class="item">
<div class="name">张锡奇</div>
<div class="time">2020-02-05 22:12:34</div>
<i class="iconfont icon-youjiantou"></i>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js';
import {mapState} from 'vuex';
import { Tab, TabItem } 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);
export default {
name: 'healthCardStatisticsChart',
data () {
return {
activeTab:0,
myChart1:null,
myChart2:null,
myChart3:null,
}
},
components:{
Tab, TabItem
},
computed:{
...mapState({
})
},
async mounted(){
},
async activated(){
window.d = this;
window.addEventListener("resize",()=>{
setTimeout(()=>{
this.myChart1.changeSize(this.$refs['chart1'].offsetWidth); // 清除
this.myChart1.destroy();
this.myChart2.changeSize(this.$refs['chart2'].offsetWidth); // 清除
this.myChart2.destroy();
this.myChart3.changeSize(this.$refs['chart3'].offsetWidth); // 清除
this.myChart3.destroy();
this.renderChart1();
this.renderChart2();
this.renderChart3();
})
});
this.$nextTick(async ()=>{
await this.renderChart1();
await this.renderChart2();
await this.renderChart3();
})
},
methods:{
switchTabItem(index){
this.activeTab = index;
},
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.coord('polar', {
transposed: true,
radius: 0.9,
innerRadius: 0.5
});
this.myChart1.axis(false);
this.myChart1.tooltip(false);
this.myChart1.legend('type', {
position: 'bottom'
})
this.myChart1.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.myChart1.pieLabel({
sidePadding: 30,
activeShape: true,
label1: function label1(data) {
return {
text: '￥' + data.money,
fill: '#343434',
fontWeight: 'bold'
};
},
label2: function label2(data) {
return {
text: data.type,
fill: '#999'
};
},
onClick: function onClick(ev) {
const data = ev.data;
if (data) {
}
}
});
this.myChart1.interval()
.position('const*money')
.color('type', [ '#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.coord('polar', {
transposed: true,
radius: 0.9,
innerRadius: 0.5
});
this.myChart2.axis(false);
this.myChart2.tooltip(false);
this.myChart2.legend('type', {
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.pieLabel({
sidePadding: 30,
activeShape: true,
label1: function label1(data) {
return {
text: '￥' + data.money,
fill: '#343434',
fontWeight: 'bold'
};
},
label2: function label2(data) {
return {
text: data.type,
fill: '#999'
};
},
onClick: function onClick(ev) {
const data = ev.data;
if (data) {
}
}
});
this.myChart2.interval()
.position('const*money')
.color('type', [ '#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.coord('polar', {
transposed: true,
radius: 0.9,
innerRadius: 0.5
});
this.myChart3.axis(false);
this.myChart3.tooltip(false);
this.myChart3.legend('type', {
position: 'bottom'
})
this.myChart3.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.myChart3.pieLabel({
sidePadding: 30,
activeShape: true,
label1: function label1(data) {
return {
text: '￥' + data.money,
fill: '#343434',
fontWeight: 'bold'
};
},
label2: function label2(data) {
return {
text: data.type,
fill: '#999'
};
},
onClick: function onClick(ev) {
const data = ev.data;
if (data) {
}
}
});
this.myChart3.interval()
.position('const*money')
.color('type', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14' ])
.adjust('stack')
this.myChart3.render();
},
}
}
</script>
\ No newline at end of file
src/view/healthCard/statistics/index.vue
View file @ a5dcb94c
<style lang="less" >
@import url('../../../styles/common.less');
#healthCardStatisticsIndex{
background: #f6f5f9;
background: white;
height:100%;
display: flex;
flex-direction: column;
.items{
// flex-grow:1;
// height:1px;
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;
padding:0 10px;
.left{
flex:1;
color:white;
font-size:18px;
font-weight: bold;
}
.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;
justify-content: center;
align-items: center;
.left,.right,.center{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
flex:1;
.n{
width:100%;
color:#527cd9;
font-weight: bold;
font-size:20px;
text-align: center;
}
.t{
width:100%;
font-size:14px;
text-align: center;
}
}
}
}
.items:last-child{
margin-bottom:15px;
}
}
</style>
<template>
<div id="healthCardStatisticsIndex">
<div class="items" v-for="(item,index) in list" :key="index">
<div class="HEAD">
<div class="left">
<span>{{item.iAllJoin}}/{{item.iAll}}</span>
</div>
<div class="right">
<div class="day">{{item.iDay}}</div>
<div class="month">{{item.sMonth}}</div>
</div>
</div>
<div class="CONTENT">
<div class="left">
<div class="n">{{item.iAll}}</div>
<div class="t">应参与人员</div>
</div>
<div class="center">
<div class="n">{{item.iAllJoin}}</div>
<div class="t">已参与人员</div>
</div>
<div class="right">
<div class="n">{{item.iAllNotJoin}}</div>
<div class="t">未参与人员</div>
</div>
</div>
</div>
</div>
</template>
......@@ -23,7 +115,7 @@ export default {
name: 'healthCardStatisticsIndex',
data () {
return {
list:[]
}
},
components:{
......@@ -39,9 +131,21 @@ export default {
},
async activated(){
window.d = this;
await this.getData();
},
methods:{
async getData(){
let res = await this.request('getStatisticalDetails',{
data:[
{key:'url',value:'statistical_details'},
{key:'openid',value:'3'}
],
params:{},
},'加载中',{});
if(res && res.length > 0) {
this.list = res;
}
}
}
}
</script>
\ No newline at end of file
src/view/healthCard/statistics/list.vue 0 → 100644
View file @ a5dcb94c
<style lang="less" >
@import url('../../../styles/common.less');
#healthCardStatisticsList{
background: #f6f5f9;
height:100%;
display: flex;
flex-direction: column;
.CONTENT{
flex-grow: 1;
height:1px;
display: flex;
flex-direction: column;
.activeTab2{
flex-grow: 1;
height:1px;
background: white;
overflow: auto;
-webkit-overflow-scrolling: touch;
.items{
display: flex;
height:60px;
align-items: center;
margin:10px;
.avatar{
height:50px;
width:50px;
border-radius: 50%;
background: #3a8af7;
display: flex;
justify-content: center;
align-items: center;
color:white;
font-size:22px;
margin-right:10px;
}
.item{
flex:1;
height:60px;
border-bottom:1px solid #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
.name{
font-size:14px;
}
>div{
flex:1;
}
}
}
}
}
}
</style>
<template>
<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>
<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="avatar">
<img src="" alt="">
<span>张</span>
</div>
<div class="item">
<div class="name">张锡奇</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Util from '@/libs/util.js';
import {mapState} from 'vuex';
import { Tab, TabItem } from 'vux'
export default {
name: 'healthCardStatisticsList',
data () {
return {
activeTab:0,
}
},
components:{
Tab, TabItem
},
computed:{
...mapState({
})
},
async mounted(){
},
async activated(){
window.d = this;
},
methods:{
switchTabItem(index){
this.activeTab = index;
}
}
}
</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