Vue_New/src/xt_pages/medicalScheduling/schedulingStatistics.vue

<template>
    <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs="crumbs"></bread-crumb>
            <div style="display:flex;align-items:center">
                <el-button type="primary" icon="el-icon-printer">打印</el-button>
            </div>
        </div>
        <div class="app-container">
            <div class="cell clearfix">
                <el-input
                size="small"
                style="width: 150px;"
                class="filter-item"
                v-model.trim="keywords"
                placeholder="请输入医护人员姓名"
                @keyup.enter.native='toSearch'
                />
                <el-button
                size="small"
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                @click="toSearch"
                >搜索</el-button
                >
                <el-select style="margin-left:10px;width:150px;margin-right:10px;" v-model="typeValue" placeholder="请选择" @change="changeOption">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-radio v-model="timeSlot" label="1">周</el-radio>
                <el-radio v-model="timeSlot" label="2">月</el-radio>
                <el-radio v-model="timeSlot" label="3">自定义</el-radio>
                <div style="display:flex;" v-if="timeSlot == '1'">
                    <el-button @click="lastclick" type="text" style="margin:0 10px;">&lt;上一周({{ weekNum - 1 }})</el-button>
                    <div class="dateBox">{{ weekDayArr[0] }}-{{ weekDayArr[6] }}({{ weekNum }})</div>
                    <el-button @click="nextclick" type="text" style="margin:0 10px;">下一周({{ weekNum + 1 }})&gt;</el-button>
                </div>
                <div style="display:flex;" v-if="timeSlot == '2'">
                    <!-- <el-button @click="lastclick" type="text" style="margin:0 10px;">&lt;上个月({{  }})</el-button>
                    <div class="dateBox">{{  }}-{{  }}({{  }})</div>
                    <el-button @click="nextclick" type="text" style="margin:0 10px;">下个月({{  }})&gt;</el-button> -->
                    <el-date-picker
                    @change='changeMonth'
                    v-model="monthTime"
                    type="month"
                    placeholder="选择月">
                    </el-date-picker>
                </div>
                <div style="display:flex;align-items: center;" v-if="timeSlot == '3'">
                    <el-date-picker
                    style="width:140px;"
                    v-model="customTime1"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                    </el-date-picker>-
                    <el-date-picker
                    style="width:140px;"
                    v-model="customTime2"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
                
            </div>
            <div class="tableTitle">统计图</div>
            <div class="cell clearfix" style="margin:0;">
                <p class="point"></p>
                <p class="pointTitle">工时/小时</p>
            </div>
            <div>
                <line-chart :options="chart"></line-chart>
            </div>
            <div class="tableTitle">统计表</div>
            <el-table
                :data="tableData"
                height="250"
                border
                style="width: 100%">
                <el-table-column
                align="center"
                prop="date"
                label="日期"
                width="180">
                </el-table-column>
                <el-table-column
                align="center"
                prop="name"
                label="姓名"
                width="180">
                </el-table-column>
                <el-table-column
                align="center"
                prop="address"
                label="地址">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>


<script>
import echarts from "echarts";
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import LineChart from "../qcd/components/LineChart";
export default {
    components:{
        BreadCrumb,
        LineChart
    },
    data(){
        return{
            pickerOptions: {
                disabledDate(time) {
                    let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear()-1)).getTime() - 24 * 3600 * 1000;
                    return time.getTime() > Date.now() || time.getTime() < threeMonths;;
                }
            },
            crumbs: [
                { path: false, name: '医护排班' },
                { path: '/medicalScheduling/index', name: '排班统计' }
            ],
            keywords:'',
            options: [{
                value: '0',
                label: '全部'
            }, {
                value: '2',
                label: '医生'
            }, {
                value: '3',
                label: '护士'
            }],
            typeValue:'0',
            weekNum:'',
            weekDayArr:[],
            todayDate:'',
            clen:7,
            nowYear: new Date().getFullYear(),

            timeSlot:'1',
            monthTime:'',
            customTime1:'',
            customTime2:'',

            chart: {
                title: {
                    text: "ECharts 入门示例"
                },
                tooltip: {},
                legend: {
                    data: [],
                    left: 0
                },
                xAxis: {
                    data: []
                },
                yAxis: {
                    axisLabel: {
                        formatter: "{value} %"
                    },
                    show: false
                },
                series: [
                    {
                        name: "",
                        type: "bar",
                        data: [],
                        barWidth: 30,
                        label: {
                        normal: {
                            show: true,
                            position: "top",
                            formatter: (params) => {
                            if(this.percent.length > 0){
                                let str = ''
                                str = params.data + '('+ this.percent[params.dataIndex] +'%)'
                                return str
                            }else{
                                let str = ''
                                str = params.data
                                return str
                            }
                            }
                        }
                        },
                        //配置样式
                        itemStyle: {
                        //通常情况下：

                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        normal: {
                            color: function(params) {
                            //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                            var colorList = [
                                ["#A9E0F3", "#9FBDFC"],

                                ["#FFD7C0", "#FF9994"]
                            ];

                            var index = params.dataIndex;
                            if (params.dataIndex >= colorList.length) {
                                index = params.dataIndex % colorList.length;
                            }

                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: colorList[index][0] },
                                // { offset: 0.5, color: colorList[index][1] },
                                { offset: 1, color: colorList[index][1] }
                            ]);
                            },
                            barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
                        },

                        //鼠标悬停时：
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.2)"
                        }
                        }
                    }
                ],
                dataZoom: [
                    {
                        // Y轴固定,让内容滚动
                        type: 'slider',
                        show: false,
                        xAxisIndex: [0],
                        start: 1,
                        end: 20, // 设置X轴刻度之间的间隔(根据数据量来调整)
                        zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
                    },
                    {
                        type: 'inside',
                        xAxisIndex: [0],
                        start: 1,
                        end: 20,
                        zoomLock: true // 锁定区域禁止缩放
                    }
                ]
            },

            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
                }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }]

        }
    },
    created(){
        let year = new Date().getFullYear()
        let month = new Date().getMonth() + 1
        let date = new Date().getDate()
        this.weekNum = this.getYearWeek(year,month,date)
        this.todayDate=this.formatDate(new Date())
        this.setDate(new Date())
    },
    methods:{
        toSearch(){},
        formatDate(date){      
            var year = date.getFullYear()+'.'       
            var month = (date.getMonth()+1)+'.';
            var day = date.getDate();
            return year+month+day
        }, 
        addDate(date,n){        
            date.setDate(date.getDate()+n);        
            return date;
        },  
        setDate(date){           
            var week = date.getDay()-1;
            date = this.addDate(date,week*-1);
            this.currentFirstDate = new Date(date);
            this.currentDate = new Date(date)
            for(var i = 0;i<this.clen; i++){     
                this.weekDayArr.push(this.formatDate(i==0 ? date : this.addDate(date,1)))
            }         
        },
        //上一周 
        lastclick(){
            this.weekDayArr=[]
            this.setDate(this.addDate(this.currentFirstDate,-7));   
            if (this.weekNum == 1) {
                let year = this.nowYear - 1
                let month = 12
                let date = 31
                this.weekNum = this.getYearWeek(year, month, date)
                this.nowYear = this.nowYear - 1
            }
            this.weekNum = this.weekNum - 1
        },
        //下一周
        nextclick(){ 
            this.weekDayArr=[]                
            this.setDate(this.addDate(this.currentFirstDate,7));
            this.weekNum = this.weekNum + 1
            if (this.weekNum == 53) {
                let year = this.nowYear + 1
                let month = 1
                let date = 1
                this.weekNum = this.getYearWeek(year, month, date)
                this.nowYear = this.nowYear + 1
            }
        },
        getYearWeek(year,month,date){
            /*  
                dateNow是当前日期 
                dateFirst是当年第一天  
                dataNumber是当前日期是今年第多少天  
                用dataNumber + 当前年的第一天的周差距的和在除以7就是本年第几周  
            */      
            let dateNow = new Date(year, parseInt(month) - 1, date);
            let dateFirst = new Date(year, 0, 1);
            let dataNumber = Math.round((dateNow.valueOf() - dateFirst.valueOf()) / 86400000);
            return Math.ceil((dataNumber + ((dateFirst.getDay() + 1) - 1)) / 7);        
            },
            getTimestamp(time) { //把时间日期转成时间戳
            return (new Date(time)).getTime() / 1000
        },

        changeMonth(value){
            console.log(value)
            console.log('monthStartTime',value.getTime() / 1000)
            let monthStartTime = value.getTime() / 1000
            var nowDate = new Date(value);
            var cloneNowDate = new Date(value);
            var fullYear = nowDate.getFullYear();
            var month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
            var endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
            let monthEndTime = this.getFullDate(cloneNowDate.setDate(endOfMonth))
            
            
            console.log('monthEndTime',this.getTimestamp(monthEndTime))
            
        },
        getFullDate(targetDate) {
            var D, y, m, d;
            if (targetDate) {
                D = new Date(targetDate);
                y = D.getFullYear();
                m = D.getMonth() + 1;
                d = D.getDate();
            } else {
                y = fullYear;
                m = month;
                d = date;
            }
            m = m > 9 ? m : '0' + m;
            d = d > 9 ? d : '0' + d;
            return y + '-' + m + '-' + d;
        },
        getTimestamp(time) { //把时间日期转成时间戳
            return (new Date(time)).getTime() / 1000
        },
    }
}
</script>


<style lang="scss" scoped>
.dateBox{
    border: 1px solid #DCDFE6;
    height: 36px;
    line-height: 36px;
    text-align: center;
    padding: 0 10px;
    border-radius: 4px;
}
.tableTitle {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  margin-bottom: 10px;
}
.point {
  width: 13px;
  height: 13px;
  background: linear-gradient(
    0deg,
    rgba(169, 224, 243, 1),
    rgba(159, 189, 252, 1)
  );
  border-radius: 7px;
  margin-right: 8px;
}
.pointTitle {
  font-size: 13px;
}
</style>