其他分享
首页 > 其他分享> > BI大屏例子

BI大屏例子

作者:互联网

 

 

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
        <!DOCTYPE html>
        <html lang="en">

        <head>
            <meta charset="utf-8" />
            <title>全院实时监控</title>
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta content="width=device-width, initial-scale=1" name="viewport" />
            <meta content="实时监控->门诊实时监控" name="description" />
            <jsp:include page="/WEB-INF/views/bi3/framework/basePath.jsp"></jsp:include>
            <jsp:include page="/WEB-INF/views/bi3/framework/linkInclude.jsp"></jsp:include>
            <jsp:include page="/WEB-INF/views/bi3/framework/scriptInclude.jsp"></jsp:include>
        </head>

        <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white"
            style="background-color: white; margin: 0 20px!important; overflow-x: hidden;">
            <div class="page-header navbar navbar-fixed-top">
                <div class="page-header-inner">
                    <div class="page-bar" style="height: 50px;margin: 0px">
                        <ul class="page-breadcrumb">
                            <li>
                                <span>实时监控</span>
                                <i class="fa fa-circle"></i>
                            </li>
                            <li>
                                <span>实时监控</span>
                            </li>
                        </ul>
                        <div class="page-toolbar">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default" id="refresh">刷新</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page-wrapper">
                <div class="page-container">
                    <div class="row">
                        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                <div class="portlet light bordered">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <span class="caption-subject font-dark bold uppercase" id="t_visit">就诊人次</span>
                                        </div>
                                    </div>
                                    <div class="portlet-body">
                                        <div id="visitPie" class="chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                <div class="portlet light bordered">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <span class="caption-subject font-dark bold uppercase" id="t_pay">缴费人次</span>
                                        </div>
                                    </div>
                                    <div class="portlet-body">
                                        <div id="payPie" class="chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                <div class="portlet light bordered">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <span class="caption-subject font-dark bold uppercase" id="t_drug">取药人次</span>
                                        </div>
                                    </div>
                                    <div class="portlet-body">
                                        <div id="drugPie" class="chart"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                <div class="portlet light bordered">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <span class="caption-subject font-dark bold uppercase"  id="t_check">检查人次</span>
                                        </div>
                                    </div>
                                    <div class="portlet-body">
                                        <div id="checkPie" class="chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <a class="dashboard-stat dashboard-stat-v2 blue" href="javascript:;">
                                        <div class="visual">
                                            <i class="fa fa-bar-chart"></i>
                                        </div>
                                        <div class="details">
                                            <div class="number">
                                                <span id="realtime_inhos_num">0</span>
                                            </div>
                                            <div class="desc">入院人次</div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <a class="dashboard-stat dashboard-stat-v2 red" href="javascript:;">
                                        <div class="visual">
                                            <i class="fa fa-bar-chart"></i>
                                        </div>
                                        <div class="details">
                                            <div class="number">
                                                <span id="real_outhos_num">0</span>
                                            </div>
                                            <div class="desc">出院人次</div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="page-container">
                            </div>
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <a class="dashboard-stat dashboard-stat-v2 green" href="javascript:;">
                                        <div class="visual">
                                            <i class="fa fa-bar-chart"></i>
                                        </div>
                                        <div class="details">
                                            <div class="number">
                                                <span id="inpatientNum">0</span>
                                            </div>
                                            <div class="desc">在院患者数</div>
                                        </div>
                                    </a>
                                </div>

                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <a class="dashboard-stat dashboard-stat-v2 purple" href="javascript:;">
                                        <div class="visual">
                                            <i class="fa fa-bar-chart"></i>
                                        </div>
                                        <div class="details">
                                            <div class="number">
                                                <span id="opsDoneNum">0</span>
                                            </div>
                                            <div class="desc">手术患者数</div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                            <div class="portlet light bordered">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <span class="caption-subject font-dark bold uppercase">门诊科室实时数据</span>
                                    </div>
                                </div>
                                <table class="table table-striped table-bordered table-hover nowrap" id="deptVisitTable"
                                    style="margin-top:0!important;">
                                    <thead>
                                        <tr>
                                            <th>科室</th>
                                            <th>已就诊</th>
                                            <th>待就诊</th>
                                            <th>总就诊人次</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                            <div class="portlet light bordered">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <span class="caption-subject font-dark bold uppercase">门诊就诊实时数据</span>
                                    </div>
                                </div>
                                <div class="portlet-body">
                                    <div id="outdeptInfoBar" class="CSSAnimationChart"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                            <div class="portlet light bordered">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <span class="caption-subject font-dark bold uppercase">住院科室实时数据</span>
                                    </div>
                                </div>
                                <div class="portlet-body">
                                    <div id="deptInfoBar" class="CSSAnimationChart"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="portlet light bordered">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <span class="caption-subject font-dark bold uppercase" id="dzpz">门诊科室当日电子凭证使用率</span>
                                    </div>
                                </div>
                                <div class="portlet-body">
                                    <div id="outdeptInfoBar_dzpz" class="CSSAnimationChart"></div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-8 col-xs-8">
                            <div class="portlet light bordered">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <span class="caption-subject font-dark bold uppercase"><span
                                                id="linkedDrugName"></span>取药人次</span>
                                    </div>
                                </div>
                                <div class="portlet-body">
                                    <div id="drugBar" class="chart"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-8 col-xs-8">
                            <div class="portlet light bordered">
                                <div class="portlet-title">
                                    <div class="caption">
                                        <span class="caption-subject font-dark bold uppercase"><span
                                                id="linkedCheckName"></span>检查人次</span>
                                    </div>
                                </div>
                                <div class="portlet-body">
                                    <div id="checkBar" class="chart"></div>
                                </div>
                            </div>
                        </div>
                        <!-- </div>
                    <div class="row"> -->
                        
                        <div class="col-lg-4 col-md-4 col-sm-8 col-xs-8">
                            <table class="table table-striped table-bordered table-hover nowrap" id="deptPayTable"
                                style="margin-top:0!important;">
                                <thead>
                                    <tr>
                                        <th>科室</th>
                                        <th>已缴费</th>
                                        <th>待缴费</th>
                                        <th>总缴费人次</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                            <!-- </div> -->
                        </div>
                    </div>

                </div>
            </div>
            <script>
                $(function () {

                    $(".portlet.light.bordered").css("padding-top", 0);
                    $(".portlet-title").css("min-height", "20px");

                    $("#refresh").click(function () {
                        refreshChart();
                    });

                    refreshChart();

                    window.setTimeout(function(){                        
                        window.location.reload();                
                    },1000*300);
                });

                //刷新页面
                function refreshChart() {
                    //就诊人次饼图
                    var sql = "select '已就诊' name1,sum(t.REPORTED_CNT) value1, '待就诊' name2, sum(t.PENDING_CNT) value2 from CLI_REALTIME_WAITVISIT t";
                    drawCommonPie(sql, visitPie, '1','t_visit');
                    //缴费人次饼图
                    sql = "select '已缴费' name1, sum(t.FEE_NUM) value1, '待缴费' name2, sum(t.FEE_WAITING_NUM) value2 from CLI_REALTIME_WAITPAY t";
                    drawCommonPie(sql, payPie, '2','t_pay');
                    //取药人次饼图
                    sql = "select '已取药' name1, sum(t.REPORTED_CNT) value1, '待取药' name2, sum(t.PENDING_CNT) value2 from CLI_REALTIME_WAITDRUG t";
                    drawCommonPie(sql, drugPie, '3','t_drug');
                    //检查人次饼图
                    sql = "select '已检查' name1, sum(t.endNum) value1, '待检查' name2, sum(t.waitingNum) value2 from CLI_REALTIME_WAITCHECK t";
                    drawCommonPie(sql, checkPie, '4','t_check');
                    //就诊人次柱图
                    sql = "select t.DEPT_NAME dept, t.REPORTED_CNT done_cnt,t.PENDING_CNT wait_cnt, t.ALL_CNT all_cnt from CLI_REALTIME_WAITVISIT t order by t.REPORTED_CNT desc";
                    drawDeptVisitTable(sql, "deptVisitTable");
                    //缴费人次柱图
                    sql = "select t.dept_name dept, t.fee_num done_cnt,t.FEE_WAITING_NUM wait_cnt, t.ALL_NUM all_cnt from CLI_REALTIME_WAITPAY t order by t.fee_num desc";
                    drawDeptPayTable(sql, "deptPayTable");
                    //取药人次柱图
                    sql = "select t.DEPT name,t.ALL_NUM value from CLI_REALTIME_WAITDRUG t where t.ALL_NUM<>0 order by t.ALL_NUM desc";
                    drawCommonBar(sql, drugBar, '取药人次', 'linkedDrugName');
                    //检查人次柱图
                    sql = "select t.device_type name,t.waitingNum+t.endNum value from CLI_REALTIME_WAITCHECK t where t.waitingNum+t.endNum<>0 order by t.waitingNum+t.endNum desc";
                    drawCommonBar(sql, checkBar, '检查人次', 'linkedCheckName');

                    //住院科室实时信息柱图
                    drawDeptInfoBar();
                    //门诊实时就诊
                    drawOutDeptInfoBar();
                    //电子凭证使用
                    drawOutDeptInfoBar_dzpz();

                    //入院人次
                    sql = "select nvl(sum(t.realtime_inhos_num),0) value from REALTIME_INHOS_NUM t";
                    drawCommonSingleValue(sql, "realtime_inhos_num");
                    // 出院人次20200520
                    //sql="select nvl(sum(t.NURSE_NUM),0) value from INH_REAL_NURSEAMOUNT t";
                    sql = "select nvl(sum(t.real_outhos_num),0) value from REALTIME_OUTHOS_NUM t";
                    drawCommonSingleValue(sql, "real_outhos_num");
                    //在院患者数(单值)
                    sql = "select nvl(sum(t.realtime_inpatient_num),0) value from REALTIME_INPATIENT_NUM t";
                    drawCommonSingleValue(sql, "inpatientNum");
                    //当日已做手术台数(单值)
                    sql = "select nvl(sum(t.ops_num),0) value from REALTIME_DO_OPS t";
                    drawCommonSingleValue(sql, "opsDoneNum");
                }
                //单值共通
                function drawCommonSingleValue(sql, id) {
                    $.ajax({
                        type: "POST",
                        url: "inHosRealTimeMonitor/drawCommonSingleValue.ajax?random=" + Math.random(),
                        dataType: "json",
                        data: {
                            "sql": sql
                        },
                        success: function (data) {
                            //debugger;
                            $("#" + id).attr("data-value", data).counterUp();
                        },
                        error: function () { }
                    });
                }

                //医保电子凭证使用率
                function drawOutDeptInfoBar_dzpz() {
                    var sql = "";
                    sql = sql + "select 科室名称 dept_name, ";
                    sql = sql + "结算笔数 num1, ";
                    sql = sql + "挂号笔数 num2, ";
                    sql = sql + "医保电子凭证结算笔数 num3, ";
                    sql = sql + "医保电子凭证挂号笔数 num4, ";
                    sql = sql + "医保电子凭证使用率 num5 ";
                    sql = sql + "from CLI_DZPZSY@his ";
                    sql = sql + "order by 医保电子凭证使用率 desc ";

                    var chart = echarts.init(outdeptInfoBar_dzpz, myEcharts.theme);
                    chart.showLoading({
                        text: '加载中...',
                        effect: 'spin'
                    });
                    $.ajax({
                        type: "POST",
                        url: "inHosRealTimeMonitor/drawDeptInfo.ajax?random=" + Math.random(),
                        dataType: "json",
                        data: {
                            "sql": sql
                        },
                        success: function (data) {
                            var s = 0;
                            var s1 =0; 
                            for (var i=data[1].length-1; i>=0; i--) {
                                s += data[1][i] + data[2][i];
                                s1 += data[3][i] + data[4][i];
                            }
                            if(s==0)
                            {
                                s2 = "0%";
                            }
                            else{
                                s2 = (s1 / s * 100).toFixed(2)+"%";
                            }

                            $("#dzpz").html('门诊科室当日电子凭证使用率:' + s2);
                            var seriesData = [{
                                name: '结算笔数',
                                type: 'bar',
                                data: data[1]
                            }, {
                                name: '挂号笔数',
                                type: 'bar',
                                data: data[2]
                            }, {
                                name: '医保电子凭证结算笔数',
                                type: 'bar',
                                data: data[3]
                            }, {
                                name: '医保电子凭证挂号笔数',
                                type: 'bar',
                                data: data[4]
                            }, {
                                name: '医保电子凭证使用率',
                                type: 'line',
                                label: {
                                    show: true
                                },
                                yAxisIndex: 1,
                                data: data[5]
                            }
                            ];
                            console.log(data);
                            var chartParam = {};
                            chartParam.yAxis0_name = "笔数";
                            chartParam.yAxis1_name = "使用率";
                            chartParam.xAxis_axisLabel_rotate = 30;
                            chartParam.xAxis_data = data[0];
                            chartParam.series = seriesData;
                            chartParam.dataZoom_show = true;
                            chartParam.dataZoom_start = 0;
                            chartParam.dataZoom_end = 100;
                            myEcharts.line_bar(chart, chartParam);
                            chart.hideLoading();
                        },
                        error: function () { }
                    });
                }

                function drawOutDeptInfoBar() {
                    var sql = "";
                    sql = sql + "select  a.time_part dept_name,nvl(b.MZRS,0) MZRS,nvl(b.JZRS,0) JZRS ";
                    sql = sql + "from DIM_TIME a left join ";
                    sql = sql + "(select  ";
                    sql = sql + "to_char(t.reg_date,'hh24') time_part, ";
                    sql = sql + "sum(case when t.dept_name not like '%急%' then 1 else 0 end) MZRS, ";
                    sql = sql + "sum(case when t.dept_name  like '%急%' then 1 else 0 end) JZRS ";
                    sql = sql + " from fin_opr_register@his t ";
                    sql = sql + "where t.reg_date between trunc(sysdate) and trunc(sysdate) + 1 ";
                    sql = sql + "and t.trans_type = 1 and t.valid_flag = 1 ";
                    sql = sql + "GROUP BY to_char(t.reg_date,'hh24') ";
                    sql = sql + ")b on a.time_part = b.time_part ";
                    sql = sql + "ORDER BY a.time_part";

                    var chart = echarts.init(outdeptInfoBar, myEcharts.theme);
                    chart.showLoading({
                        text: '加载中...',
                        effect: 'spin'
                    });
                    $.ajax({
                        type: "POST",
                        url: "inHosRealTimeMonitor/drawDeptInfo.ajax?random=" + Math.random(),
                        dataType: "json",
                        data: {
                            "sql": sql
                        },
                        success: function (data) {
                            var seriesData = [{
                                name: '门诊人次',
                                type: 'line',
                                data: data[1]
                            }, {
                                name: '急诊人次',
                                type: 'bar',
                                label: {
                                    show: true
                                },
                                //yAxisIndex:1,
                                data: data[2]
                            }
                            ];
                            debugger;
                            console.log(data);
                            var chartParam = {};
                            chartParam.yAxis0_name = "门诊人次";
                            //chartParam.yAxis1_name = "急诊人次";
                            chartParam.xAxis_axisLabel_rotate = 30;
                            chartParam.xAxis_data = data[0];
                            chartParam.series = seriesData;
                            chartParam.dataZoom_show = true;
                            chartParam.dataZoom_start = 0;
                            chartParam.dataZoom_end = 100;
                            myEcharts.line_bar(chart, chartParam);
                            chart.hideLoading();
                        },
                        error: function () { }
                    });
                }

                //住院科室实时信息柱图
                function drawDeptInfoBar() {
                    var sql = "";
                    sql = sql + "select t.dept_name, ";
                    sql = sql + "    sum(t.inhos_num) inhos_num, ";    //入院人次
                    sql = sql + "    sum(t.hos_num) hos_num, ";        //在院人次
                    sql = sql + "    sum(t.outhos_num) outhos_num, ";  //出院人次
                    sql = sql + "    sum(t.beduse_ratio) beduse_ratio "; //床位使用率
                    sql = sql + "from (select t.dept_name,t.dept_code, ";
                    sql = sql + "            t.realtime_inhos_num inhos_num, ";
                    sql = sql + "            0                    outhos_num, ";
                    sql = sql + "            0                    hos_num, ";
                    sql = sql + "            0                    beduse_ratio ";
                    sql = sql + "        from REALTIME_INHOS_NUM t ";
                    sql = sql + "        union ";
                    sql = sql + "        select t.dept_name,t.dept_code, ";
                    sql = sql + "            0                 inhos_num, ";
                    sql = sql + "            t.real_outhos_num outhos_num, ";
                    sql = sql + "            0                 hos_num, ";
                    sql = sql + "            0                 beduse_ratio ";
                    sql = sql + "        from REALTIME_OUTHOS_NUM t ";
                    sql = sql + "        union ";
                    sql = sql + "        select t.dept_name,t.dept_code, ";
                    sql = sql + "            0                        inhos_num, ";
                    sql = sql + "            0                        outhos_num, ";
                    sql = sql + "            t.realtime_inpatient_num hos_num, ";
                    sql = sql + "            0                        beduse_ratio ";
                    sql = sql + "        from REALTIME_INPATIENT_NUM t ";
                    sql = sql + "        union ";
                    sql = sql + "        select t.dept,t.deptid dept_code, ";
                    sql = sql + "            0 inhos_num, ";
                    sql = sql + "            0 outhos_num, ";
                    sql = sql + "            0 hos_num, ";
                    sql = sql + "            round(t.use_num * 100 / t.bed_num, 2) beduse_ratio ";
                    sql = sql + "        from REALTIME_BEDINFO t) t ";
                    sql = sql + "    group by t.dept_name,t.dept_code ";
                    sql = sql + "    order by t.dept_code ";
                    // sql = sql + "    order by sum(t.inhos_num) desc, ";
                    // sql = sql + "        sum(t.hos_num) desc, ";
                    // sql = sql + "        sum(t.outhos_num) desc, ";
                    // sql = sql + "        sum(t.beduse_ratio) desc ";
                    
                    console.log(sql);
                    var chart = echarts.init(deptInfoBar, myEcharts.theme);
                    chart.showLoading({
                        text: '加载中...',
                        effect: 'spin'
                    });
                    $.ajax({
                        type: "POST",
                        url: "inHosRealTimeMonitor/drawDeptInfo.ajax?random=" + Math.random(),
                        dataType: "json",
                        data: {
                            "sql": sql
                        },
                        success: function (data) {
                            var seriesData = [{
                                name: '入院人次',
                                type: 'bar',
                                label: {
                                    show: true
                                },
                                data: data[1]
                            }, {
                                name: '在院人次',
                                type: 'bar',
                                label: {
                                    show: true
                                },
                                data: data[2]
                            }, {
                                name: '出院人次',
                                type: 'bar',
                                label: {
                                    show: true
                                },
                                data: data[3]
                            }, {
                                name: '床位使用率',
                                type: 'line',
                                label: {
                                    show: true
                                },
                                yAxisIndex: 1,
                                data: data[4]
                            }
                            ];
                            console.log(data);
                            var chartParam = {};
                            chartParam.yAxis0_name = "人次";
                            chartParam.yAxis1_name = "使用率";
                            chartParam.xAxis_axisLabel_rotate = 30;
                            chartParam.xAxis_data = data[0];
                            chartParam.series = seriesData;
                            chartParam.dataZoom_show = true;
                            chartParam.dataZoom_start = 0;
                            chartParam.dataZoom_end = 100;
                            myEcharts.line_bar(chart, chartParam);
                            chart.hideLoading();
                        },
                        error: function () { }
                    });
                }

                //饼图共通 type: 1:就诊人次, 2:缴费人次   3:取药人次     4:检查人次
                function drawCommonPie(sql, id, type,t_id) {

                    var chart = echarts.init(id, myEcharts.theme);
                    chart.showLoading({
                        text: '加载中...',
                        effect: 'spin'
                    });
                    $.ajax({
                        type: "POST",
                        url: "clinicRealTimeMonitor/drawCommonPie.ajax?random=" + Math.random(),
                        dataType: "json",
                        data: {
                            'sql': sql
                        },
                        success: function (series_data) {
                            debugger;
                            var chartParam = {};
                            chartParam.tooltip_show = true;
                            chartParam.series_radius = "60%";
                            chartParam.series_center = ["50%", "40%"];
                            chartParam.legend_data = [series_data[0].name, series_data[1].name];
                            chartParam.series_data = series_data;
                            // chartParam.title_text= "合计人次:" + (series_data[0].value + series_data[1].value);
                            // chartParam.title_show=true;
                            // chartParam.title_x ="center";
                            // chartParam.title_y ="top";
                            if(type == 1)
                            {
                                $("#" + t_id).html('就诊人次:'+(series_data[0].value + series_data[1].value));
                            }
                            else if(type == 2)
                            {
                                $("#" + t_id).html('缴费人次:'+(series_data[0].value + series_data[1].value));
                            }
                            else if(type == 3)
                            {
                                $("#" + t_id).html('取药人次:'+(series_data[0].value + series_data[1].value));
                            }
                            else if(type == 4)
                            {
                                $("#" + t_id).html('检查人次:'+(series_data[0].value + series_data[1].value));
                            }
                            
                            chart.on('click', function (params) {
                                var sql = '';
                                var linkedName = '';
            /* if(type=='1'){
                //就诊人次柱图
                if(params.name=='已就诊'){
                    linkedName='已就诊';
                    sql='select t.DEPT_NAME name,t.REPORTED_CNT value from CLI_REALTIME_WAITVISIT t order by t.REPORTED_CNT desc';
                }else{ //待就诊
                    linkedName='待就诊';
                    sql='select t.DEPT_NAME name,t.PENDING_CNT value from CLI_REALTIME_WAITVISIT t order by t.PENDING_CNT desc';
                }
                drawCommonBar(sql, visitBar, '就诊人次', 'linkedVisitName', linkedName);
            }else if(type=='2'){
                //缴费人次柱图
                if(params.name=='已缴费'){
                    linkedName='已缴费';
                    sql='select t.dept_name name, t.FEE_NUM value from CLI_REALTIME_WAITPAY t order by t.FEE_NUM desc';
                }else{ //待缴费
                    linkedName='待缴费';
                    sql='select t.dept_name name, t.FEE_WAITING_NUM value from CLI_REALTIME_WAITPAY t order by t.FEE_WAITING_NUM desc';
                }
                drawCommonBar(sql,payBar,'缴费人次','linkedPayName',linkedName);
            }else */ if (type == '3') {
                                    //取药人次柱图
                                    if (params.name == '已取药') {
                                        linkedName = '已取药';
                                        sql = 'select t.DEPT name, t.REPORTED_CNT value from CLI_REALTIME_WAITDRUG t where t.REPORTED_CNT<>0 order by t.REPORTED_CNT desc';
                                    } else { //待取药
                                        linkedName = '待取药';
                                        sql = 'select t.DEPT name, t.PENDING_CNT value from CLI_REALTIME_WAITDRUG t where t.PENDING_CNT<>0 order by t.PENDING_CNT desc';
                                    }
                                    drawCommonBar(sql, drugBar, '取药人次', 'linkedDrugName', linkedName);
                                } else if (type == '4') {
                                    //检查人次柱图
                                    if (params.name == '已检查') {
                                        linkedName = '已检查';
                                        sql = 'select t.device_type name, t.endNum value from CLI_REALTIME_WAITCHECK t where t.endNum<>0 order by t.endNum desc';
                                    } else { //待检查
                                        linkedName = '待检查';
                                        sql = 'select t.device_type name, t.waitingNum value from CLI_REALTIME_WAITCHECK t where t.waitingNum<>0 order by t.waitingNum desc';
                                    }
                                    drawCommonBar(sql, checkBar, '检查人次', 'linkedCheckName', linkedName);
                                }
                            });
                            myEcharts.pie(chart, chartParam);
                            chart.hideLoading();
                        },
                        error: function () { }
                    });
                }

                //柱图共通
                function drawCommonBar(sql, id, legendName, linkedTitleID, linkedTitleName) {
                    var chart = echarts.init(id, myEcharts.theme);
                    chart.showLoading({
                        text: '加载中...',
                        effect: 'spin'
                    });
                    $.ajax({
                        type: "POST",
                        url: "clinicRealTimeMonitor/drawCommonBar.ajax?random=" + Math.random(),
                        dataType: "json",
                        data: {
                            "sql": sql
                        },
                        success: function (data) {
                            debugger;
                            //如果有联动,设置标题
                            if (typeof (linkedTitleName) != "undefined") {
                                $("#" + linkedTitleID).html(linkedTitleName + "-");
                            } else {
                                $("#" + linkedTitleID).html('');
                            }
                            var seriesData = [{
                                name: legendName,
                                type: 'bar',
                                data: data[1]
                            }
                            ];
                            var chartParam = {};
                            chartParam.xAxis_axisLabel_rotate = 30;
                            chartParam.xAxis_data = data[0];
                            chartParam.series = seriesData;
                            myEcharts.line_bar(chart, chartParam);
                            chart.hideLoading();
                        },
                        error: function () { }
                    });
                }

                //就诊人次表格
                var visitTable;
                function drawDeptVisitTable(sql, id) {

                    var myCallback = function (data, remote_callback) {
                        var tableData = [];
                        $.each(data[0], function (j, value) {
                            var rowData = [];
                            $.each(data, function (i, v) {
                                rowData.push(data[i][j]);
                            });
                            tableData.push(rowData);
                        });
                        remote_callback({
                            data: tableData
                        });
                    }

                    var dataTable_ajax = function (dataTable_callback) {
                        $.ajax({
                            type: "POST",
                            url: "clinicRealTimeMonitor/drawCommonTable.ajax?random=" + Math.random(),
                            dataType: "json",
                            data: {
                                "sql": sql
                            },
                            success: function (data) {
                                console.log('表格数据:', data);
                                myCallback(data, dataTable_callback);
                            },
                            error: function () { }
                        });
                    }

                    if (!visitTable) {
                        visitTable = myTable.initAjaxScrollOrderTable(id, 47 * 10, 1, false, dataTable_ajax);
                    } else {
                        visitTable.ajax.reload();
                    }
                }

                //缴费人次表格
                var payTable;
                function drawDeptPayTable(sql, id) {

                    var myCallback = function (data, remote_callback) {
                        var tableData = [];
                        $.each(data[0], function (j, value) {
                            var rowData = [];
                            $.each(data, function (i, v) {
                                rowData.push(data[i][j]);
                            });
                            tableData.push(rowData);
                        });
                        remote_callback({
                            data: tableData
                        });
                    }

                    var dataTable_ajax = function (dataTable_callback) {
                        $.ajax({
                            type: "POST",
                            url: "clinicRealTimeMonitor/drawCommonTable.ajax?random=" + Math.random(),
                            dataType: "json",
                            data: {
                                "sql": sql
                            },
                            success: function (data) {
                                console.log('表格数据:', data);
                                myCallback(data, dataTable_callback);
                            },
                            error: function () { }
                        });
                    }

                    if (!payTable) {
                        payTable = myTable.initAjaxScrollOrderTable(id, 36 * 10, 1, false, dataTable_ajax);
                    } else {
                        payTable.ajax.reload();
                    }
                }
            </script>
        </body>

        </html>

 

1.定时刷新

$(function () {

        $(".portlet.light.bordered").css("padding-top", 0);
        $(".portlet-title").css("min-height", "20px");

        $("#refresh").click(function () {
            refreshChart();
        });

        refreshChart();

        
//设定多少秒重新加载
        window.setTimeout(function(){				    	
            window.location.reload();				
        },1000*300);
    });

2.各类组件的属性修改可以从resources\bi3\assets\bi\script\myEcharts.js里找到

 

 

 

 

$(function () {
        $(".portlet.light.bordered").css("padding-top", 0);         $(".portlet-title").css("min-height", "20px");
        $("#refresh").click(function () {             refreshChart();         });
        refreshChart();
        
        window.setTimeout(function(){                                    window.location.reload();                        },6000);     });

标签:function,name,BI,人次,例子,sql,大屏,chartParam,data
来源: https://www.cnblogs.com/wwzd/p/16481399.html