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} = require('../js/utils.js');

$(function(){
//   var mySwiper = new Swiper('.swiper-container',{
//     // autoplay : 500,//可选选项，自动滑动
//     loop : true,//可选选项，开启循环
//     slidesPerView : 3,
//   })
    $(".partWrap").css({
        height:$(window).height()-38+'px'
    })
  initConsole()//质控列表
  getBarData()//图标数据获取
  dateChange()
})
//所有数据切换日期筛选
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
            initConsole(result)
        }
    })
    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)
            }
            for(let i = 0;i < result2.length;i++){
                dataX2.push(result2[i].deptName)
                dataY2.push(result2[i].averageValue)
            }
            barChartPay(dataX1,dataY1)
            barChart(dataX2,dataY2)
        }
    })
    post('/console/resultStatistics',{//饼图数据
        type:type||1
    }).then((res)=>{
        let data = res.data;
        if(data.code == 0){
            let result1 = data.data['缺陷排行列表']
            let result2 = data.data['各科室缺陷占比']
            for(let i = 0;i < result2.length;i++){
                result2[i].value = result2[i].num
            }
            queList(result1)
            emptyCircle(result2)
            panDetail(result2)
        }
    })

}
//柱状图住院费用
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(dataX,dataY){
    var myChart = echarts.init(document.getElementById('barChart'));
    var lengthNum = dataX.length;
    $(window).resize(function(){
        myChart.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
            }
        ]
    };
    myChart.setOption(option);
    
}
//空心饼图
function emptyCircle(data){
    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}%)'
        },
        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"><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'
    })
}