elizebeth/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" @click='toPrint'>打印</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"
                    @change="changeTime">
                    </el-date-picker>-
                    <el-date-picker
                    style="width:140px;"
                    v-model="customTime2"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions"
                    @change="changeTimeTwo">
                    </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 class='statisticsTable' :data="tableData" height="250" border>
                <el-table-column fixed align="center" prop="date" label="医护姓名" width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.user_name}}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="modeItem.class_name" property="number" align="center" min-width="100" v-for="(modeItem, index) in scheduleList" :key="index">
                    <template slot-scope="scope">
                        <span>{{ getCount(scope.row.doctor_id,modeItem.class_name) }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="address" label="总工时/小时">
                   <template slot-scope="scope">
                        <span v-if="scope.row.totalminute">{{ scope.row.totalminute / 60 }}</span>
                    </template> 
                </el-table-column>
                <el-table-column align="center" prop="attendance" label="出勤/天">
                    <!-- <span v-if='scope.row.attendance'>{{ scope.row.attendance ? scope.row.attendance : '' }}</span> -->
                </el-table-column>
                <el-table-column align="center" prop="absence" label="缺勤/天">
                    <!-- <span v-if="scope.row.absence">{{ scope.row.absence ? scope.row.absence : '' }}</span> -->
                </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";
import {getDoctorList,getScheduleList,getScheduleListTotal,toSearchTotal,changeOption,getchartlist }  from '@/api/doctorSchedule'
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",
                            }
                        },
                        //配置样式
                        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: [],
            scheduleList:[],
            start_time:0,
            end_time:0,

            doctorlist:[],
            doctorArr:[],
            nurseArr:[]

        }
    },
    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())

        //获取所以医护人员
        this.getDoctorList()


        //获取所有排班种
        this.getScheduleList()
    
        // 获取统计表的数据
        this.getlist()
        
        
      
    },
    methods:{
        getDoctorList(){
            getDoctorList().then(response=>{
             if(response.data.state == 1){
                var list =  response.data.data.list
                var doctorlist =  response.data.data.doctorlist
                var nurselist =  response.data.data.nurselist
                this.doctorArr = doctorlist
                this.nurseArr = nurselist

                this.doctorlist.push(...nurselist)
                this.doctorlist.push(...doctorlist)
                
                console.log("医护列表",this.doctorlist)
                //获取统计图数据
                this.getchartlist()
             }
               
           })
        },
        //搜索
        toSearch(){
            if(this.timeSlot == 1){
               this.start_time = this.getTimestamp(this.weekDayArr[0]),
               this.end_time = this.getTimestamp(this.weekDayArr[6])
            }
            const params = {
              keyword:this.keywords, 
            }
            console.log("params",params)
            toSearchTotal(params).then(response=>{
             if(response.data.state == 1){
                var scheudleTotal = response.data.data.scheduletotal 
                console.log("scheduletotal",scheudleTotal) 
                var list = response.data.data.list
                console.log("list",list)
                var workday = response.data.data.workDay
                console.log("workday",workday)
                var noWorkDay = response.data.data.noWorkDay
                console.log("noworkday",noWorkDay)


                let tempArr = [], newArr = []
                for (let i = 0; i < scheudleTotal.length; i++) {
                    if (tempArr.indexOf(scheudleTotal[i].user_name) === -1) {
                        newArr.push({
                            user_name: scheudleTotal[i].user_name,
                            doctor_id:scheudleTotal[i].doctor_id,
                            list: [{class_name:scheudleTotal[i].class_name,doctor_id:scheudleTotal[i].doctor_id,Count:scheudleTotal[i].Count}]
                        })
                        tempArr.push(scheudleTotal[i].user_name);
                    } else {
                        for (let j = 0; j < newArr.length; j++) {
                            if (newArr[j].user_name == scheudleTotal[i].user_name) {
                                newArr[j].list.push({class_name:scheudleTotal[i].class_name,doctor_id:scheudleTotal[i].doctor_id,Count:scheudleTotal[i].Count})
                            }
                        }
                    }
                }

                newArr.map(item => {
                    list.map(it => {
                        if(item.doctor_id == it.doctor_id){
                            item.totalminute = it.totalminute
                        }
                    })
                })
                newArr.map(item => {
                    workday.map(it => {
                        if(item.doctor_id == it.doctor_id){
                            item.attendance = it.Count
                        }
                    })
                })
                newArr.map(item => {
                    noWorkDay.map(it => {
                        if(item.doctor_id == it.doctor_id){
                            item.absence = it.Count
                        }
                    })
                })
                
                let arr = [...newArr]
                
                if(this.keywords != ''){
                    this.tableData = arr
                }else {
                    arr.sort(this.compare('doctor_id'))
                    this.doctorlist.sort(this.compare('admin_user_id'))
                    this.doctorlist.forEach((item, index) => {
                      if (arr[index] && item.admin_user_id == arr[index].doctor_id) {
                    
                      }else{
                        arr.splice(index, 0, {user_name: item.user_name, doctor_id: item.admin_user_id, list: []})
                      }
                    })
                    console.log('newArr',arr)
                    this.tableData = arr
                }
              }
          })  
        },
        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))
            this.start_time = monthStartTime
            this.end_time = this.getTimestamp(monthEndTime)
            console.log('monthEndTime',this.getTimestamp(monthEndTime))
            this.getlist()
        },
        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
        },

        //获取所有班种
        getScheduleList(){
          getScheduleList().then(response=>{
             if(response.data.state == 1){
                var schedulelist = response.data.data.scheduleList
                console.log("schedulelist",schedulelist)
                this.scheduleList = schedulelist
             }
          })
        },

        //获取统计表数据
        getlist(){
            if(this.timeSlot == 1){
               this.start_time = this.getTimestamp(this.weekDayArr[0]),
               this.end_time = this.getTimestamp(this.weekDayArr[6])
            }
            const params = {
                start_time:this.start_time,
                end_time:this.end_time,
            }
            console.log("params",params)
            getScheduleListTotal(params).then(response=>{
                if(response.data.state == 1){
                    //获取每个班次对应的次数
                    var scheudleTotal =  response.data.data.scheudletotal
                    console.log("scheudletotal",scheudleTotal)
                    //获取总分钟数
                    var list = response.data.data.list
                    console.log("list",list)
                    var workday = response.data.data.workDay
                    console.log("workday",workday)
                    var noWorkDay = response.data.data.noWorkDay
                    console.log("noWorkDay",noWorkDay)

                    let tempArr = [], newArr = []
                    for (let i = 0; i < scheudleTotal.length; i++) {
                        if (tempArr.indexOf(scheudleTotal[i].user_name) === -1) {
                            newArr.push({
                                user_name: scheudleTotal[i].user_name,
                                doctor_id:scheudleTotal[i].doctor_id,
                                list: [{class_name:scheudleTotal[i].class_name,doctor_id:scheudleTotal[i].doctor_id,Count:scheudleTotal[i].Count}]
                            })
                            tempArr.push(scheudleTotal[i].user_name);
                        } else {
                            for (let j = 0; j < newArr.length; j++) {
                                if (newArr[j].user_name == scheudleTotal[i].user_name) {
                                    newArr[j].list.push({class_name:scheudleTotal[i].class_name,doctor_id:scheudleTotal[i].doctor_id,Count:scheudleTotal[i].Count})
                                }
                            }
                        }
                    }

                    newArr.map(item => {
                        list.map(it => {
                            if(item.doctor_id == it.doctor_id){
                                item.totalminute = it.totalminute
                            }
                        })
                    })
                    newArr.map(item => {
                        workday.map(it => {
                            if(item.doctor_id == it.doctor_id){
                                item.attendance = it.Count
                            }
                        })
                    })
                    newArr.map(item => {
                        noWorkDay.map(it => {
                            if(item.doctor_id == it.doctor_id){
                                item.absence = it.Count
                            }
                        })
                    })
                    
                    let arr = [...newArr]

                    arr.sort(this.compare('doctor_id'))
                    this.doctorlist.sort(this.compare('admin_user_id'))
                    this.doctorlist.forEach((item, index) => {
                      if (arr[index] && item.admin_user_id == arr[index].doctor_id) {
                    
                      }else{
                        arr.splice(index, 0, {user_name: item.user_name, doctor_id: item.admin_user_id, list: []})
                      }
                    })
                    

                    console.log('newArr',arr)
                    this.tableData = arr
                }
            })
        },
        changeOption(val){
            if(this.timeSlot == 1){
               this.start_time = this.getTimestamp(this.weekDayArr[0]),
               this.end_time = this.getTimestamp(this.weekDayArr[6])
            }
            const params = {
              doctor_type: parseInt(val),
            }
            console.log("params",params)
            changeOption(params).then(response=>{
              if(response.data.state == 1){
                var scheudleTotal =  response.data.data.scheduletotal
                console.log("scheduletotal",scheudleTotal)
                var list = response.data.data.list
                console.log("list",list)
                var workday = response.data.data.workday
                console.log("workday",workday)
                var noWorkDay = response.data.data.workday
                console.log("worknoday",noWorkDay)


                let tempArr = [], newArr = []
                    for (let i = 0; i < scheudleTotal.length; i++) {
                        if (tempArr.indexOf(scheudleTotal[i].user_name) === -1) {
                            newArr.push({
                                user_name: scheudleTotal[i].user_name,
                                doctor_id:scheudleTotal[i].doctor_id,
                                list: [{class_name:scheudleTotal[i].class_name,doctor_id:scheudleTotal[i].doctor_id,Count:scheudleTotal[i].Count}]
                            })
                            tempArr.push(scheudleTotal[i].user_name);
                        } else {
                            for (let j = 0; j < newArr.length; j++) {
                                if (newArr[j].user_name == scheudleTotal[i].user_name) {
                                    newArr[j].list.push({class_name:scheudleTotal[i].class_name,doctor_id:scheudleTotal[i].doctor_id,Count:scheudleTotal[i].Count})
                                }
                            }
                        }
                    }

                    newArr.map(item => {
                        list.map(it => {
                            if(item.doctor_id == it.doctor_id){
                                item.totalminute = it.totalminute
                            }
                        })
                    })
                    newArr.map(item => {
                        workday.map(it => {
                            if(item.doctor_id == it.doctor_id){
                                item.attendance = it.Count
                            }
                        })
                    })
                    newArr.map(item => {
                        noWorkDay.map(it => {
                            if(item.doctor_id == it.doctor_id){
                                item.absence = it.Count
                            }
                        })
                    })
                    
                    let arr = [...newArr]
                    if(val == 0){
                        arr.sort(this.compare('doctor_id'))
                        this.doctorlist.sort(this.compare('admin_user_id'))
                        this.doctorlist.forEach((item, index) => {
                          if (arr[index] && item.admin_user_id == arr[index].doctor_id) {
                        
                          }else{
                            arr.splice(index, 0, {user_name: item.user_name, doctor_id: item.admin_user_id, list: []})
                          }
                        })
                        

                        console.log('newArr',arr)
                        this.tableData = arr
                    }else if(val == 2){
                        arr.sort(this.compare('doctor_id'))
                        this.doctorArr.sort(this.compare('admin_user_id'))
                        this.doctorArr.forEach((item, index) => {
                          if (arr[index] && item.admin_user_id == arr[index].doctor_id) {
                        
                          }else{
                            arr.splice(index, 0, {user_name: item.user_name, doctor_id: item.admin_user_id, list: []})
                          }
                        })
                        

                        console.log('newArr',arr)
                        this.tableData = arr
                    }else if(val == 3){
                        arr.sort(this.compare('doctor_id'))
                        this.nurseArr.sort(this.compare('admin_user_id'))
                        this.nurseArr.forEach((item, index) => {
                          if (arr[index] && item.admin_user_id == arr[index].doctor_id) {
                        
                          }else{
                            arr.splice(index, 0, {user_name: item.user_name, doctor_id: item.admin_user_id, list: []})
                          }
                        })
                        

                        console.log('newArr',arr)
                        this.tableData = arr
                    }
                    
              }
            })
        },
        changeTime(val){
            this.start_time = val.getTime()/1000
            this.getlist()
        },
        changeTimeTwo(val){
            this.end_time = val.getTime()/1000
            this.getlist()
        },
        compare(property){
            return function(a,b){
                var value1 = a[property];
                var value2 = b[property];
                return value2 - value1;
            }
        },
        getCount(id,name){
            if(id != undefined){
                let Count = '';
                this.tableData.map(item => {
                    if(item.doctor_id == id){
                        if(item.list){
                            item.list.map(it => {
                                if(it.class_name == name){
                                    Count = it.Count
                                }
                            })
                        }
                        
                    }
                })
                return Count
            }   
        },
        toPrint(){
            this.$router.push({
                path: '/medicalScheduling/statistics/print',
                // query: { date: date }
            }) 
        },
        //获取统计图数据
        getchartlist(){
           getchartlist().then(response=>{
                if(response.data.state == 1){
                    var workdaylist =  response.data.data.workDaylist
                    console.log("早年公共",workdaylist)


                    let arr = [...workdaylist]

                    arr.sort(this.compare('doctor_id'))
                    this.doctorlist.sort(this.compare('admin_user_id'))
                    this.doctorlist.forEach((item, index) => {
                        if (arr[index] && item.admin_user_id == arr[index].doctor_id) {
                        
                        }else{
                          arr.splice(index, 0, {user_name: item.user_name, doctor_id: item.admin_user_id,workminute: 0})
                        }
                    })
                    console.log('arrrrrrrrrrrrrrr',arr)

                    let chartX = []
                    let chartY = []
                    arr.map(item => {
                        chartX.push(item.user_name)
                        chartY.push(item.workminute / 60)
                    })
                    this.chart.xAxis.data = chartX
                    this.chart.series[0].data = chartY

                    this.getArrLength(this.chart.xAxis.data)
                }
           })
        },
        getArrLength(result){
            if(result.length > 10){
                var dataZoom_end = (10/result.length)*100;
                this.chart.dataZoom[0].end = dataZoom_end
            }else{
                var dataZoom_end = 100;
                this.chart.dataZoom[0].end = dataZoom_end
            }
        }
    }
}
</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;
}
.statisticsTable{
    ::-webkit-scrollbar{
        height:15px !important;
    }
}

</style>