AIPlatform/src/js/console.js

const $ = require('jquery');
require("../css/reset.less")
require("../css/console.less")
require("../images/logo.png")

// import 'zrender/lib/svg/svg';
const echarts = require('echarts');
const {post,setCookie,delCookie,getCookie} = require('../js/utils.js');

$(function(){
//   var mySwiper = new Swiper('.swiper-container',{
//     // autoplay : 500,//可选选项，自动滑动
//     loop : true,//可选选项，开启循环
//     slidesPerView : 3,
//   })
    $(".partWrap").css({
        height:$(window).height()-38+'px'
    })
    $(".partTitle p span").html(getCookie("hospital"))
  initConsole()//质控列表
  getBarData()//图标数据获取
  dateChange()
  $(window).click(function(){
    window.parent.userActionHide()
  })
})
//所有数据切换日期筛选
function dateChange(){
    $(".monthYear .mon").click(function(){
        $(this).css({
            backgroundColor:'#5A8EEE',
            color:'#fff'
        }).siblings().css({
            color:'#5A8EEE',
            backgroundColor:'#fff'
        })
        getBarData(1)
    })
    $(".monthYear .year").click(function(){
        $(this).css({
            backgroundColor:'#5A8EEE',
            color:'#fff'
        }).siblings().css({
            color:'#5A8EEE',
            backgroundColor:'#fff'
        })
        getBarData(2)
    })
}
//控制台数
function initConsole(result){
    let url = {
        '本月病历数':require("../images/icon6.png"),
        '本月不合格病历-机器':require("../images/icon7.png"),
        '本月质控数-机器':require("../images/icon10.png"),
        '本月甲级病历-机器':require("../images/icon8.png"),
        '本月乙级病历-机器':require("../images/icon9.png"),
        '本年病历数':require("../images/icon6.png"),
        '本年不合格病历-机器':require("../images/icon7.png"),
        '本年质控数-机器':require("../images/icon10.png"),
        '本年甲级病历-机器':require("../images/icon8.png"),
        '本年乙级病历-机器':require("../images/icon9.png"),
    }
    let dom = '';
    for(let i in result){
        if(i.indexOf("人工")==-1){
            let name = i.split("-")[0];
            let num = 0;
            if(name=='本月病历数'||name=='本年病历数'){
                num = result[i]
            }else{
                num = result[name+'-人工']+result[i]
            }
            dom += `
                <li class="partLi">
                    <div class="partIn">
                        <p class="top">${name}</p>
                        <p class="btm clearfix">
                        <img src="${url[i]}" alt="">
                        <span>${num}</span>
                        </p>
                    </div>
                </li>
            `
        }
    }
    $(".partAll").html(dom)
}
//获取图表数据
function getBarData(type){
    post('/console/mrStatistics',{//出院人数统计，各科室甲级病历占比，病历数统计
        "type": type||1//1月2年
    }).then((res)=>{
        let data = res.data;
        if(data.code == 0){
            let result = data.data
            let result1 = data.data['出院人数统计']||[]
            let result2 = data.data['各科室甲级病历占比']||[]
            let result3 = data.data['病历数统计']||[]
            let dataX2=[],dataY2=[];
            for(let i = 0;i < result2.length;i++){
                dataX2.push(result2[i].deptName)
                dataY2.push(result2[i].firstPercent.replace('%',''))
            }
            personNum(result1)
            lineChart(dataX2,dataY2)
            setNumDetail(result3)
        }
    })
    post('/console/averageStatistics',{//平均住院日，平均住院费用，各科室质控平均分
        type:type||1
    }).then((res)=>{
        let data = res.data;
        if(data.code == 0){
            let result1 = data.data['平均住院费用']||[]
            let result2 = data.data['平均住院日']||[]
            let dataX1=[],dataY1=[],dataX2=[],dataY2=[];
            for(let i = 0;i < result1.length;i++){
                dataX1.push(result1[i].deptName)
                dataY1.push(result1[i].averageValue)
            }
            barChartPay(dataX1,dataY1)
            barChart(result2)
        }
    })
    post('/console/resultStatistics',{//各科室缺陷占比，各模块缺陷占比排行，条目缺陷占比
        type:type||1
    }).then((res)=>{
        let data = res.data;
        if(data.code == 0){
            let result1 = data.data['各模块缺陷占比排行']||[]
            let result2 = data.data['各科室缺陷占比']||[]
            let result3 = data.data['条目缺陷占比']||[]
            for(let i = 0;i < result2.length;i++){
                result2[i].value = result2[i].num
            }
            for(let i = 0;i < result3.length;i++){
                result3[i].value = result3[i].num
            }
            queList(result1)
            emptyCircle(result2)
            emptyCircleB(result3)
            panDetail(result2)
            panDetailB(result3)
        }
    })
}
//part01
function personNum(data){
    $(".personNum").html("总人数："+data['总人数'])
    $(".died").html(data['死亡人数'])
    $(".newborn").html(data['新生儿人数'])
    $(".patientNum").html(data['手术病人数'])
}
//part02
function setNumDetail(data){
    if(data.length == 0)return
    let str = ''
    for(let i = 0;i < data.length;i++){
        str += `
            <li class="${i==0?'fst':''}">
            <p class="numShow">${data[i].num}</p>
            <p class="explainNum">${data[i].name}</p>
            </li>
        `
        if(data[i].name == '甲级病历'){
            let tmp = []
            data[i].value = data[i].num
            tmp.push(data[i])
            tmp.push({percentStr:(1-data[i].percent)*100+'%',value:data[i].totleNum - data[i].num})
            part02pan(tmp,'fen01')
        }
        if(data[i].name == '乙级病历'){
            let tmp = []
            data[i].value = data[i].num
            tmp.push(data[i])
            tmp.push({percentStr:(1-data[i].percent)*100+'%',value:data[i].totleNum - data[i].num})
            part02pan(tmp,'fen02')
        }
        if(data[i].name == '丙级病历'){
            let tmp = []
            data[i].value = data[i].num
            tmp.push(data[i])
            tmp.push({percentStr:(1-data[i].percent)*100+'%',value:data[i].totleNum - data[i].num})
            part02pan(tmp,'fen03')
        }
    }
    $('.bingli').html(str)
}

//part02pan
function part02pan(data,dom){
    dom = echarts.init(document.getElementById(dom));
    $(window).resize(function(){
        dom.resize()
    });
    let bgColor = '#fff';
    let title = '总量';
    let color = ['#37CBCB','#dedede'];
    let echartData = data;
    option = {
        backgroundColor: bgColor,
        color: color,
        title: [{
            text:'{val|' + echartData[0].percentStr + '}',
            top: 'center',
            left: 'center',
            textStyle: {
                rich: {
                    val: {
                        fontSize: 14,
                        color: '#333',
                        fontWeight: 'bold',
                        padding: [10, 0]
                    },
                    name: {
                        fontSize: 12,
                        fontWeight: 'normal',
                        color: '#777',
                    }
                }
            }
        }],
        series: [{
            name: '',
            type: 'pie',
            radius: ['70%', '90%'],
            data: echartData,
            hoverAnimation:false,
            label: {
                normal: {
                    show:false,
                }
            },
        }]
    };      
    dom.setOption(option);
}
//折现图
function lineChart(dataX,dataY){
    var myCharts = echarts.init(document.getElementById('lineChart'));
    $(window).resize(function(){
        myCharts.resize()
    });
    option = {
        color:"#5A8EEE",
        tooltip: {
            trigger: 'axis',
            color:'#fff',
            formatter: function(param) {           
                return '<div style="color:#fff;"> '+ param[0].name + "<br>" +"甲级病历占比："+ param[0].value+"%" + "<br>"
                '</div>'
            }
        },
        grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        title:[{
            text: '百分比',
            top: 15,
            left: 0,
            textStyle: {
                fontSize: 14,
                color:'#666666',
                fontWeight: 400
            }
        }],
        toolbox: {
            show: false,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {

                },
                saveAsImage: {}
            },
            emphasis:{
                iconStyle:{
                    color:'red'
                }
            },
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dataX,
            axisLabel: {//x轴刻度
                textStyle: {
                    color: '#333'
                },
                rotate:'45'
            },
            axisLine: {//x轴
                lineStyle:{
                    color:'#AAAAAA'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %',
                textStyle: {
                    color: '#333333'
                }
            },
            
            axisLine: {//y轴
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine:{//分割线
                lineStyle:{
                    color:'#EFF3FC'
                }
            }
        },
        series: [
            {
                name: '甲级病历占比：',
                type: 'line',
                data: dataY,
            }
        ]
    };
    myCharts.setOption(option);
}
//柱状图住院费用
function barChartPay(dataX,dataY){
    var myCharts = echarts.init(document.getElementById('barChartPay'));
    var lengthNum = dataX.length;
    $(window).resize(function(){
        myCharts.resize()
    });
    option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: dataX,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {//x轴刻度
                    textStyle: {
                        color: '#333'
                    },
                    rotate:lengthNum>8?30:0
                },
                axisLine: {//x轴
                    lineStyle:{
                        color:'#AAAAAA'
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {//y轴
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {//y轴刻度
                    textStyle: {
                        color: '#333333'
                    }
                },
                splitLine:{//分割线
                    lineStyle:{
                        color:'#EFF3FC'
                    }
                }
            }
            
        ],
        title:[{
            text: '平均住院费用',
            top: 15,
            left: 10,
            textStyle: {
                fontSize: 14,
                color:'#666666',
                fontWeight: 400
            }
        }],
        series: [
            {
                name: '平均住院费用',
                type: 'bar',
                barWidth: lengthNum<5?'8%':'23%',
                data: dataY
            }
        ]
    };
    myCharts.setOption(option);
}
//柱状图住院日期
function barChart(data){
    var myChart = echarts.init(document.getElementById('barChart'));
    $(window).resize(function(){
        myChart.resize()
    });
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];
    let app = {}
    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: echarts.util.reduce(posList, function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };
    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            var labelOption = {
                normal: {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                }
            };
            myChart.setOption({
                series: [{
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }]
            });
        }
    };
    var labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 12,
        rich: {
            name: {
                textBorderColor: '#fff'
            }
        }
    };
    let dataX = []
    let data1 = []
    let data2 = []
    let data3 = []
    for(let i = 0;i < data.length;i++){
        dataX.push(data[i].name)
        data1.push(data[i].averageValue)
        data2.push(data[i].lastAverageValue)
        data3.push(data[i].lastYearAverageValue)
    }

    console.log(dataX)
    option = {
        color: ['#5A8EEE', '#FAD336', '#37CBCB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        title:[{
            text: '天数',
            top: 15,
            left: 10,
            textStyle: {
                fontSize: 14,
                color:'#666666',
                fontWeight: 400
            }
        }],
        legend: {
            itemWidth :8,
            itemHeight :8,
            right:15,
            top:15,
            formatter: function (name) {
                return name;
            }
        },
        toolbox: {
            show: false,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data:  dataX,
                axisLabel: {//x轴刻度
                    textStyle: {
                        color: '#333'
                    },
                    rotate:'45'
                },
                axisLine: {//x轴
                    lineStyle:{
                        color:'#AAAAAA'
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {//y轴
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine:{//分割线
                    lineStyle:{
                        color:'#EFF3FC'
                    }
                }
            }
        ],
        series: [
            {
                name: '上月',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                barWidth: '15%',
                data: data2
            },
            {
                name: '去年本月',
                type: 'bar',
                label: labelOption,
                barWidth: '15%',
                data: data3
            },
            {
                name: '本月',
                type: 'bar',
                label: labelOption,
                barWidth: '15%',
                data: data1
            }
        ]
    };
    myChart.setOption(option);
}
//空心饼图
function emptyCircle(data){
    console.log(data,1111111111)
    var myChart = echarts.init(document.getElementById('emptyCircle'));
    $(window).resize(function(){
        myChart.resize()
    });
    let bgColor = '#fff';
    let title = '总量';
    let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
    let echartData = data;
    let total = 0;
    for(let i = 0;i < echartData.length;i++){
        total += echartData[i].num
    }
    option = {
        backgroundColor: bgColor,
        color: color,
        title: [{
            text: data.length>0?'{val|' + total + '}\n{name|' + title + '}':'',
            top: 'center',
            left: 'center',
            textStyle: {
                rich: {
                    val: {
                        fontSize: 24,
                        color: '#333',
                        fontWeight: 'bold',
                        padding: [10, 0]
                    },
                    name: {
                        fontSize: 12,
                        fontWeight: 'normal',
                        color: '#777',
                    }
                }
            }
        }],
        tooltip: {
            trigger: 'item',
            // formatter: '{b} : {c}  ({d}%)',
            formatter:function(item){
                const {name, num, percentStr} = item.data
                return `${name} : ${num} (${percentStr})`
            }
        },
        series: [{
            name: '',
            type: 'pie',
            radius: ['70%', '90%'],
            data: echartData,
            hoverAnimation:true,
            hoverOffset:5,
            itemStyle: {
                normal: {
                    borderColor: bgColor,
                    borderWidth: 2
                }
            },
            labelLine: {
                normal: {
                    length: 20,
                    length2: 120,
                    lineStyle: {
                        color: '#e6e6e6'
                    }
                }
            },
            label: {
                normal: {
                    show:false,
                    formatter: params => {
                        return params.name == 'A类'?params.name:''
                    },
                    padding: [0 , -100, 25, -100],
                    rich: {
                        icon: {
                            fontSize: 16
                        },
                        name: {
                            fontSize: 14,
                            padding: [0, 10, 0, 4],
                            color: '#666666'
                        },
                        value: {
                            fontSize: 18,
                            fontWeight: 'bold',
                            color: '#333333'
                        }
                    }
                }
            },
        }]
    };      
    myChart.setOption(option);
}
function emptyCircleB(data){
    var myChart = echarts.init(document.getElementById('emptyCircleB'));
    $(window).resize(function(){
        myChart.resize()
    });
    let bgColor = '#fff';
    let title = '总量';
    let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
    let echartData = data;
    console.log(data)
    let total = 0;
    for(let i = 0;i < echartData.length;i++){
        total += echartData[i].num
    }
    option = {
        backgroundColor: bgColor,
        color: color,
        title: [{
            text: data.length>0?'{val|' + total + '}\n{name|' + title + '}':'',
            top: 'center',
            left: 'center',
            textStyle: {
                rich: {
                    val: {
                        fontSize: 24,
                        color: '#333',
                        fontWeight: 'bold',
                        padding: [10, 0]
                    },
                    name: {
                        fontSize: 12,
                        fontWeight: 'normal',
                        color: '#777',
                    }
                }
            }
        }],
        tooltip: {
            trigger: 'item',
            // formatter: '{b} : {c}  ({d}%)',
            formatter:function(item){
                const {name, num, percentStr} = item.data
                return `${name} : ${num} (${percentStr})`
            }
        },
        series: [{
            name: '',
            type: 'pie',
            radius: ['70%', '90%'],
            data: echartData,
            hoverAnimation:true,
            hoverOffset:5,
            itemStyle: {
                normal: {
                    borderColor: bgColor,
                    borderWidth: 2
                }
            },
            labelLine: {
                normal: {
                    length: 20,
                    length2: 120,
                    lineStyle: {
                        color: '#e6e6e6'
                    }
                }
            },
            label: {
                normal: {
                    show:false,
                    formatter: params => {
                        return params.name == 'A类'?params.name:''
                    },
                    padding: [0 , -100, 25, -100],
                    rich: {
                        icon: {
                            fontSize: 16
                        },
                        name: {
                            fontSize: 14,
                            padding: [0, 10, 0, 4],
                            color: '#666666'
                        },
                        value: {
                            fontSize: 18,
                            fontWeight: 'bold',
                            color: '#333333'
                        }
                    }
                }
            },
        }]
    };      
    myChart.setOption(option);
}
//缺陷列表渲染
function queList(data){
    let strAll = '',tmp = `
    <tr class="thead">
      <td class="td01">排名</td>
      <td class="td02">缺陷名称</td>
      <td class="td03">数量</td>
      <td class="td04">占比</td>
    </tr>`
    for(let i = 0;i < data.length;i++){
        strAll += `
            <tr>
                <td style="text-align:center;"><i style="background:${i < 3?'#bea571':'#eff3fc'};color:${i < 3?'#fff':'#999'};">${i+1}</i></td>
                <td>${data[i].name}</td>
                <td>${data[i].num}</td>
                <td>${data[i].percentStr}</td>
            </tr>
        `
    }
    $(".qtable").html(tmp+strAll)
}
//饼图列表注释渲染
function panDetail(data){
    let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
    let strAll = '';
    for(let i = 0;i < data.length;i++){
        strAll += `
            <tr class="explainLi">
                <td class="deptName" title="${data[i].name}"><i class="tip" style="background-color:${color[i]}"></i>${data[i].name}</td>
                <td class="deptNum">${data[i].num}</td>
                <td class="percent">(${data[i].percentStr})</td>
            </tr>
        `
    }
    $(".explainPan table").html(strAll);
    $(".explainPan").css({
        marginTop:-($(".explainPan").height()/2-20)+'px'
    })
}
function panDetailB(data){
    let color = ['#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336','#F2637B','#975FE4', '#399FFF', '#37CBCB', '#4CCB73','#FAD336'];
    let strAll = '';
    for(let i = 0;i < data.length;i++){
        strAll += `
            <tr class="explainLi">
                <td class="deptName" title="${data[i].name}"><i class="tip" style="background-color:${color[i]}"></i>${data[i].name}</td>
                <td class="deptNum">${data[i].num}</td>
                <td class="percent">(${data[i].percentStr})</td>
            </tr>
        `
    }
    $(".explainPanB table").html(strAll);
    $(".explainPan").css({
        marginTop:-($(".explainPan").height()/2-20)+'px'
    })
}