ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

BI大屏例子

2022-07-15 15:04:39  阅读:129  来源: 互联网

标签:function name BI 人次 例子 sql 大屏 chartParam data


 

 

<%@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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有