chart.vue

<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;
                .SEARCH{
                    height:50px;
                    padding:0 8px;
                    display:flex;
                    align-items: center;
                    position: relative;
                    >input{
                        background: white;
                        height:35px;
                        line-height: 35px;
                        flex:1;
                        border-radius: 5px;
                        font-size: 12px;
                        padding:0 25px 0 8px;
                        border: 1px solid #2d8cf0;
                        box-sizing: border-box;
                    }
                    .iconfont{
                        width: 40px;
                        height:35px;
                        font-size:12px;
                        position: absolute;
                        color:#ed4014;
                        line-height: 35px;
                        text-align: center;
                        right:8px;
                    }
                }
                .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;
                            text-align: right;
                            padding-right:10px;
                        }
                        >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;
              }
            }
        }
        .img{
            width:100%;
            display: flex;
            justify-content: center;
            img{
                width:100%;
                height:300px;
            }
        }
    }
</style>

<template>
  <div id="healthCardStatisticsChart">
      <div class="HEADER">
          <div class="TITLE">
              <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">{{hdr.iAll}}</div>
                <div class="t">应参与人员</div>
            </div>
            <div class="center" @click="routerToList(0)">
                <div class="n">{{hdr.iAllJoin}}</div>
                <div class="t">已参与人员</div>
            </div>
            <div class="right" @click="routerToList(1)">
                <div class="n">{{hdr.iAllNotJoin}}</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" v-show="set1.length > 0">
                    <canvas id="myChart1" width="400" height="300" style="width:100%;height:300px;"></canvas>
                </div>
                <div class="img" v-if="set1.length <= 0">
                    <img src="@/assets/noData.jpg" class="_img" alt="">
                </div>
            </div>
            <div>
                <h3>2.体温情况</h3>
                <div ref="chart4" v-show="set4.length > 0">
                    <canvas id="myChart4" width="400" height="300" style="width:100%;height:300px;"></canvas>
                </div>
                <div class="img" v-if="set4.length <= 0">
                    <img src="@/assets/noData.jpg" class="_img" alt="">
                </div>
            </div>
            <div>
                <h3>3.自2020年1月1日起，是否在湖北停留或路过，或接触过来自湖北的人员饼状图</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>4.是否接触过疑似或确诊的新型肺炎患者</h3>
                <div ref="chart3" v-show="set3.length > 0">
                    <canvas id="myChart3" width="400" height="300" style="width:100%;height:300px;"></canvas>
                </div>
                <div class="img" v-if="set3.length <= 0">
                    <img src="@/assets/noData.jpg" class="_img" alt="">
                </div>
            </div>
        </div>
        <div v-show="activeTab == 1" class="activeTab2" ref="scrollDom" @scroll="scrollToBottom">
            <div class="SEARCH">
                <input type="text" placeholder="输入姓名进行搜索" v-model="searchvalue" @input="changeInput"/>
                <span class="iconfont icon-chacha" v-if="searchvalue" @click="delSearchValue"></span>
            </div>
            <div class="items" v-for="(item,index) in list" :key="index" @click="routerToPunchClockDetail(item)">
                <div class="avatar">
                    <img src="" alt="">
                    <span>{{item.sEmploeeName[0]}}</span>
                </div>
                <div class="item">
                    <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>
</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);

require('@antv/f2/lib/interaction/pan'); // 引入图表平移交互
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
F2.Chart.plugins.register(ScrollBar); // 这里进行全局注册，也可以给 chart 的实例注册

export default {
  name: 'healthCardStatisticsChart',
  data () {
    return {
        activeTab:0,
        myChart1:null,
        myChart2:null,
        myChart3:null,
        myChart4:null,
        set1:[],
        set2:[],
        set3:[],
        set4:[],
        list:[],
        page:1,
        per_page:20,
        y:0,
        searchvalue:''
    }
  },
  components:{
      Tab, TabItem
  },
  computed:{
    ...mapState({
        hdr:state => state.healthStatistics.hdr,
        openId:state => state.healthStatistics.openId
    })
  },
  async mounted(){
  },
  async activated(){
    window.d = this;
    
    if(this.activeTab == 0){
        await this.getData();
    }else{
        this.page = 1;
        this.per_page = 20;
        this.list = [];
        await this.getList();
    }
    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.myChart4.changeSize(this.$refs['chart4'].offsetWidth); // 清除
            this.myChart4.destroy();
            this.renderChart1();
            this.renderChart2();
            this.renderChart3();
            this.renderChart4();

        })
    });
    
    this.$nextTick(async ()=>{
        await this.renderChart1();
        await this.renderChart2();
        await this.renderChart3();
        await this.renderChart4();
    })
  },
  methods:{
    async changeInput(){
        this.page = 1;
        this.per_page = 20;
        this.list = [];
        await this.getList(true);
    },
    async delSearchValue(){
        this.searchvalue = '';
        this.page = 1;
        this.per_page = 20;
        this.list = [];
        await this.getList(true);
    },
    switchTabItem(index){
        this.activeTab = index;
        if(this.activeTab == 0){
            this.getData();
        }else{
            this.getList();
        }
    },
    renderChart1 () {
        this.myChart1 = new F2.Chart({
            id: 'myChart1',
            pixelRatio: window.devicePixelRatio,
            plugins: [PieLabel,Legend]
        });
        this.myChart1.source(this.set1);
        this.myChart1.coord('polar', {
            transposed: true,
            radius: 0.9,
        });
        this.myChart1.axis(false);
        this.myChart1.tooltip(false);
        this.myChart1.legend('title', {
            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.value,
                fill: '#343434',
                fontWeight: 'bold'
                };
            },
            label2: function label2(data) {
                return {
                text: data.title,
                fill: '#999'
                };
            },
            onClick: function onClick(ev) {
                const data = ev.data;
                if (data) {
                }
            }
        });
        this.myChart1.interval()
            .position('const*value')
            .color('title', [ '#ff9900', '#19be6b', '#2d8cf0' ])
            .adjust('stack')
        this.myChart1.render();
    },
    renderChart2 () {
        this.myChart2 = new F2.Chart({
            id: 'myChart2',
            pixelRatio: window.devicePixelRatio,
            plugins: [PieLabel,Legend]
        });
        this.myChart2.source(this.set2);
        this.myChart2.coord('polar', {
            transposed: true,
            radius: 0.9,
        });
        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.pieLabel({
            sidePadding: 30,
            activeShape: true,
            label1: function label1(data) {
                return {
                text: data.value,
                fill: '#343434',
                fontWeight: 'bold'
                };
            },
            label2: function label2(data) {
                return {
                text: data.title,
                fill: '#999'
                };
            },
            onClick: function onClick(ev) {
                const data = ev.data;
                if (data) {
                }
            }
        });
        this.myChart2.interval()
            .position('const*value')
            .color('title', [ '#ff9900', '#19be6b' ])
            .adjust('stack')
        this.myChart2.render();
    },
    renderChart3 () {
        this.myChart3 = new F2.Chart({
            id: 'myChart3',
            pixelRatio: window.devicePixelRatio,
            plugins: [PieLabel,Legend]
        });
        this.myChart3.source(this.set3);
        this.myChart3.coord('polar', {
            transposed: true,
            radius: 0.9,
        });
        this.myChart3.axis(false);
        this.myChart3.tooltip(false);
        this.myChart3.legend('title', {
            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.value,
                fill: '#343434',
                fontWeight: 'bold'
                };
            },
            label2: function label2(data) {
                return {
                text: data.title,
                fill: '#999'
                };
            },
            onClick: function onClick(ev) {
                const data = ev.data;
                if (data) {
                }
            }
        });
        this.myChart3.interval()
            .position('const*value')
            .color('title', [ '#ff9900', '#19be6b' ])
            .adjust('stack')
        this.myChart3.render();
    },
    renderChart4 () {
        this.myChart4 = new F2.Chart({
            id: 'myChart4',
            pixelRatio: window.devicePixelRatio,
            plugins: [PieLabel,Legend]
        });
        this.myChart4.source(this.set4);
        this.myChart4.coord('polar', {
            transposed: true,
            radius: 0.9,
        });
        this.myChart4.axis(false);
        this.myChart4.tooltip(false);
        this.myChart4.legend('title', {
            position: 'bottom'
        })
        this.myChart4.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.myChart4.pieLabel({
            sidePadding: 30,
            activeShape: true,
            label1: function label1(data) {
                return {
                text: data.value,
                fill: '#343434',
                fontWeight: 'bold'
                };
            },
            label2: function label2(data) {
                return {
                text: data.title,
                fill: '#999'
                };
            },
            onClick: function onClick(ev) {
                const data = ev.data;
                if (data) {
                }
            }
        });
        this.myChart4.interval()
            .position('const*value')
            .color('title', [ '#19be6b', '#ff9900','#2d8cf0' ])
            .adjust('stack')
        this.myChart4.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}
            ],
            params:{},
        },'加载中',{});
        if(Util.getType(res) == 'object') {
            this.set1 = [
                {
                    title:'感染',
                    value:res.set1[0].iFever,
                    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,
                    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'
                }
            ];
            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);
        }
    },
    async getList(flag){
        if(this.per_page < 20){
            this.$vux.toast.text('已加载全部数据!', 'middle')
            return false;
        }
        let postData = [
            {key:'url',value:'HealthLog'},
            {key:'dDate',value: this.hdr.dDate},
            {key:'iCompanyId',value: this.hdr.iCompanyId},
            {key:'iType',value:'1'}
        ];
        this.searchvalue && (postData.push({key:'searchvalue',value:this.searchvalue}));

        let res = await this.request('getStatisticalDetails',{
            data:postData,
            params:{
                page:this.page,
                per_page:this.per_page
            },
        },'加载中',{});
        if(res && res.length > 0){
            if(flag){
                this.list = res;
            }else{
                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}});
    },
    routerToPunchClockDetail(item){
        this.$router.push({name:'punchClockDetail',params:{id:'1',address:'1',openId:item.sCreateAppid},query:{readOnly:'2',dDate:new Date(Util.dateFormat(this.hdr.dDate,'yyyy-MM-dd')).getTime()}})
    }
  }
}
</script>