瀏覽代碼

新增医院总览页面

zhengying 2 年之前
父節點
當前提交
3519a12104

+ 92 - 0
src/main/resources/static/css/doctorIndex.css

@@ -0,0 +1,92 @@
+canvas {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
+#canvas1 {
+    /*min-width: 600px;*/
+}
+.tile-stats h3 {
+    color: #000 !important;
+}
+html {
+    height: 100% !important
+}
+body {
+    height: 100% !important
+}
+.right_col {
+    padding: 0 !important
+}
+#content {
+    padding: 10px 20px;
+    box-sizing: border-box;
+}
+.container {
+    height: 100% !important
+}
+.shortcuts {
+    border: 1px solid;
+    width: 40px;
+    height: 40px;
+    margin: 5px 10px 5px 0;
+    border-radius: 10%;
+    padding: 4px 8px;
+    border-color: #6D31CF !important;
+}
+
+.shortcuts i {
+    font-size: 30px;
+    color: #6D31CF;
+}
+
+.w_25 span {
+    position: absolute;
+    margin-top: 25px;
+    transform: translateY(-50%);
+}
+
+.first_today_work {
+    border-right: 1px solid #2e69eb;
+}
+
+.today_work {
+    height: 50px;
+    text-align: center;
+    line-height: 25px;
+    float: left;
+    box-sizing: border-box;
+    width: 50%;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    background-color: #EFF3FD;
+    -webkit-border-radius: 2px;
+}
+
+.work_detail {
+    position: relative;
+    display: block;
+    margin-bottom: 12px;
+    -webkit-border-radius: 5px;
+    overflow: hidden;
+    padding-bottom: 5px;
+    -webkit-background-clip: padding-box;
+    -moz-border-radius: 5px;
+    -moz-background-clip: padding;
+    border-radius: 5px;
+    background: #FFF;
+    transition: all .3s ease-in-out;
+}
+
+.work_detail span {
+    font-size: 14px;
+    line-height: 10px;
+    margin-left: 10px;
+    font-family: Microsoft YaHei, Arial, wryh, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, sans-serif;
+}
+.work_detail_full{
+    border-bottom: 0.5px solid #dcdcdc;
+    padding-top: 5px;
+    margin-top: 5px;
+    line-height: 30px;
+}

+ 431 - 0
src/main/resources/static/js/doctorIndex.js

@@ -0,0 +1,431 @@
+//@ sourceURL=index.js
+//菜单
+// var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+//
+// var randomScalingFactor = function () {
+//     return Math.round(Math.random() * 100);
+//     //return 0;
+// };
+// var randomColorFactor = function () {
+//     return Math.round(Math.random() * 255);
+// };
+// var randomColor = function (opacity) {
+//     var rgg='rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
+//     console.log(rgg);
+//     return rgg;
+// };
+var config = {
+    type: 'line',
+    data: {
+        labels: [],
+        datasets: [
+            {
+                label: "挂号金额",
+                data: [],
+                /*  fill: false,*/
+                //  borderDash: [5, 5],
+                borderColor: 'rgba(130,236,134,0.4)',
+                backgroundColor: 'rgba(13,199,122,0.5)',
+                // pointBorderColor: 'rgba(69,231,165,0.7)',
+                // pointBackgroundColor: 'rgba(229,185,45,0.5)',
+                pointBorderWidth: 1,
+            },
+            {
+                //hidden: true,
+                label: '接诊金额',
+                data: [],
+                borderColor: 'rgba(185,190,209,0.4)',
+                backgroundColor: 'rgba(77,5,148,0.5)',
+                pointBorderWidth: 1,
+            },
+            {
+                label: "退号金额",
+                data: [],
+                borderColor: 'rgba(152,99,170,0.4)',
+                backgroundColor: 'rgba(166,86,59,0.5)',
+                pointBorderWidth: 1,
+            },
+            {
+                label: "退费金额",
+                data: [],
+                borderColor: 'rgba(254,169,161,0.4)',
+                backgroundColor: 'rgba(235,30,145,0.5)',
+                // pointBorderColor: 'rgba(254,169,161,0.4)',
+                // pointBackgroundColor: randomColor(0.5),
+                pointBorderWidth: 1,
+            }
+        ]
+    },
+    options: {
+        responsive: true,
+        /*       legend: {
+                   position: 'bottom',
+               },*/
+        // title: {
+        //         //     display: true,
+        //         //     text: '门诊运营趋势',
+        //         // },
+        tooltips: {
+            mode: 'label',
+            callbacks: {
+                // beforeTitle: function() {
+                //     return '...beforeTitle';
+                // },
+                // afterTitle: function() {
+                //     return '...afterTitle';
+                // },
+                // beforeBody: function() {
+                //     return '...beforeBody';
+                // },
+                // afterBody: function() {
+                //     return '...afterBody';
+                // },
+                // beforeFooter: function() {
+                //     return '...beforeFooter';
+                // },
+                // footer: function() {
+                //     return 'Footer';
+                // },
+                // afterFooter: function() {
+                //     return '...afterFooter';
+                // },
+            }
+        },
+        hover: {
+            mode: 'dataset'
+        },
+        scales: {
+            xAxes: [{
+                display: true,
+                scaleLabel: {
+                    show: true,
+                    labelString: 'Month'
+                }
+            }],
+            yAxes: [{
+                display: true,
+                scaleLabel: {
+                    show: true,
+                    labelString: 'Value'
+                },
+                ticks: {
+                    suggestedMin: 0,
+                    suggestedMax: 250,
+                }
+            }]
+        }
+    }
+};
+
+// window.onload = function() {
+//     var ctx = document.getElementById("canvas").getContext("2d");
+//     window.myLine = new Chart(ctx, config);
+// };
+$(function () {
+    // 柱状图
+    var myChart1 = echarts.init(document.getElementById('canvas'))
+    var option1;
+    option1 = {
+        legend: {},
+        tooltip: {},
+        dataset: {
+            source: [
+                ['product', '门诊预约治疗率', '次均费用增长率', '患者满意度'],
+                ['Matcha Latte', 43.3, 85.8, 93.7],
+                ['Milk Tea', 83.1, 73.4, 55.1],
+                ['Cheese Cocoa', 86.4, 65.2, 82.5],
+                ['Walnut Brownie', 72.4, 53.9, 39.1]
+            ]
+        },
+        xAxis: {
+            type: 'category',
+            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
+        },
+        yAxis: {
+            type: 'value',
+            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
+            axisLabel: {
+                formatter: function(value) {
+                    return value+'%'
+                }
+            }
+        },
+        series: [
+            {
+                data: [20, 0, 50, 80, 70, 40, 80],
+                type: 'bar',
+                name: '门诊预约诊疗率',
+                itemStyle: {
+                    color: '#5087ec'
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    formatter: '{c}%'
+                }
+            },
+            {
+                data: [100, 99, 55, 33, 70, 44, 66],
+                type: 'bar',
+                name: '次均费用增长率',
+                itemStyle: {
+                    color: '#68bbc4'
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    formatter: '{c}%'
+                }
+            },
+            {
+                data: [12, 44, 55, 80, 70, 66, 66],
+                type: 'bar',
+                name: '患者满意度',
+                itemStyle: {
+                    color: '#58a55c'
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    formatter: '{c}%'
+                }
+            }
+        ]
+    };
+    myChart1.setOption(option1);
+    window.addEventListener("resize", function() {
+        myChart1.resize()
+    })
+
+    // 折线图
+    var myChart= echarts.init(document.getElementById('canvas1'))
+    var option;
+    option = {
+        title: {
+            text: ''
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            data: ['检查检验占比', '药占比', '门诊收入中医保基金占比',]
+        },
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                formatter: '{value} %'
+            },
+            axisLine:{
+            },
+            interval: 20,
+        },
+        series: [
+            {
+                name: '检查检验占比',
+                type: 'line',
+                label: {
+                    show: true,
+                    formatter: function(params) {
+                        return params.value+'%'
+                    }
+                },
+                data: [1, 2, 12, 15, 45, 55, 99]
+            },
+            {
+                name: '药占比',
+                type: 'line',
+                label: {
+                    show: true,
+                    formatter: function(params) {
+                        return params.value+'%'
+                    }
+                },
+                data: [1, 22, 33, 44, 44, 55, 55]
+            },
+            {
+                name: '门诊收入中医保基金占比',
+                type: 'line',
+                label: {
+                    show: true,
+                    formatter: function(params) {
+                        return params.value+'%'
+                    }
+                },
+                data: [80, 89, 86, 84, 90, 90, 90]
+            }
+        ]
+    };
+    myChart.setOption(option);
+    window.addEventListener("resize", function() {
+        myChart.resize()
+    })
+
+    init_daterangepicker();
+
+    $.ajax({
+        type: "GET",
+        url: '/thmz/getIndexCount',
+        dataType: "json",
+        headers: {'Accept': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem("token")},
+        success: function (res) {
+            if (res == '401' || res == 401) {
+                window.location.href = '/thmz/login/view'
+                return;
+            }
+            if (res.code == 0) {
+                $("#registrationNum").html(res.registrationNum);
+                $("#haveClinicalNum").html(res.haveClinicalNum);
+                if (res.ghAmount != null) {
+                    $("#ghAmount").html(res.ghAmount.toFixed(2));
+                }
+                if (res.sfAmount != null) {
+                    $("#sfAmount").html(res.sfAmount.toFixed(2));
+                }
+            }
+
+        }
+    });
+
+    var rePortRangeArr = getRePortRangeArr();
+    $.ajax({
+        type: "POST",
+        url: '/thmz/getMzyytsqs',
+        contentType: "application/json;charset=UTF-8",
+        dataType: "json",
+        headers: {'Accept': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem("token")},
+        data: JSON.stringify({beginTime: new Date(rePortRangeArr[0]), endTime: new Date(rePortRangeArr[1])}),
+        success: function (res) {
+            if (res == '401' || res == 401) {
+                window.location.href = '/thmz/login/view'
+                return;
+            }
+            if (res.code == 0) {
+                if(res.keyList!=null && res.keyList.length>0){
+                    for (var i=0;i<res.keyList.length;i++){
+                        config.data.labels[i]=res.keyList[i];
+                    }
+                }
+                if(res.data!=null && res.data.length>0){
+                    var ghje=config.data.datasets[0].data;
+                    var jzje=config.data.datasets[1].data;
+                    var thje=config.data.datasets[2].data;
+                    // var tfje=config.data.datasets[3].data;
+                    for (var i=0;i<res.data.length;i++){
+                        ghje[i]=res.data[i].ghAmount;
+                        jzje[i]=res.data[i].sfAmount;
+                        thje[i]=res.data[i].thAmount;
+                        // tfje[i]=Math.abs(res.data[i].tfAmount);
+                    }
+                }
+                var ctx = $("#canvas").get(0).getContext("2d");
+                console.log('参数-------', config)
+                window.myLine = new Chart(ctx, config);
+            }else {
+                errorMesage(res);
+            }
+
+        }
+    });
+
+
+
+    //获取医生工作统计数据
+    $.ajax({
+        type: "GET",
+        url: '/thmz/getDoctorDateForDay',
+        dataType: "json",
+        headers: {'Accept': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem("token")},
+        success: function (res) {
+            if (res == '401' || res == 401) {
+                window.location.href = '/thmz/login/view'
+                return;
+            }
+            if (res.code == 0) {
+                $("#numberOfPatient").html(res.numberOfPatient);
+                $("#numberOfPrescription").html(res.numberOfPrescription);
+                var html='';
+                if(res.numberOfIcdText!=null && res.numberOfIcdText.length>0){
+                    for(var i=0;i<res.numberOfIcdText.length;i++){
+                        var obj=res.numberOfIcdText[i];
+                        html+=' <div class="work_detail_full">';
+                        html+='<div title="'+obj.icd_text+'" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: calc(100% - 300px);float: left;">';
+                        html+='<i class="fa fa-file-text" style="color: #6D31CF;margin-right: 10px;"></i>';
+                        html+=obj.icd_text+'</div>';
+                        html+='<div class="el-col el-col-4" style="float: right;text-align: right;margin-right: 5px;">';
+                        html+=obj.num;
+                        html+=' 次</div><div style="clear: both;"></div></div>';
+                    }
+                }
+                $("#numberOfIcdText").html(html);
+            }
+
+        }
+    });
+
+});
+
+
+
+/**
+ * 获取时间选择器的时间数组
+ * @returns {string[]}
+ */
+function getRePortRangeArr() {
+    var rePortRange = $('#reportrange span').html();
+    var rePortRangeArr = rePortRange.split(" - ");
+    rePortRangeArr[0] = rePortRangeArr[0] + " 00:00:00"
+    rePortRangeArr[1] = rePortRangeArr[1] + " 23:59:59"
+    return rePortRangeArr;
+}
+
+/**
+ * 获取时间选择器的时间数组
+ * @returns {string[]}
+ */
+function getRePortRangeArrById(id) {
+    var rePortRange = $('#'+id+' span').html();
+    var rePortRangeArr = rePortRange.split(" - ");
+    rePortRangeArr[0] = rePortRangeArr[0] + " 00:00:00"
+    rePortRangeArr[1] = rePortRangeArr[1] + " 23:59:59"
+    return rePortRangeArr;
+}
+
+/**
+ * 获取年龄(小于7岁精确到天)
+ * @param birthDay 出生日期
+ * @param nowDate 当前日期
+ * @returns {string}
+ */
+function getBirthSlot(birthDay,nowDate) {
+    var birth = new Date(birthDay);
+    var now = new Date(nowDate);
+    var date1 = Date.parse(birth);
+    var date2 = Date.parse(now);
+    var day = Math.ceil((date2 - date1) / (60 * 60 * 1000 * 24));
+    var age = '';
+    var year = Math.floor(day / 365);
+    if(year > 0) age += year + '岁';
+    var y = day % 365;
+    var month = Math.floor(y / 30);
+    if(month > 0) age += month + '月';
+    var d = Math.floor(day % 365 % 30);
+    if(d > 0) age += d + '天';
+    if(age.substring(0,age.indexOf('岁')) >= 7){
+        age = age.substring(0,age.indexOf('岁')+1);
+    }
+    return age;
+}
+
+$('#ghAmount').click(function() {
+    console.log('1111')
+})

文件差異過大導致無法顯示
+ 0 - 0
src/main/resources/static/js/echarts/echarts.min.js


+ 111 - 0
src/main/resources/templates/doctorIndex.html

@@ -0,0 +1,111 @@
+<link rel="stylesheet" href="/thmz/css/bootstrap/css/bootstrap-progressbar-3.3.4.min.css"/>
+<link rel="stylesheet" href="/thmz/css/custom.min.css">
+<link rel="stylesheet" href="/thmz/css/doctorIndex.css">
+
+<script>
+    // 图一
+    $('.dropdown-menu1').click(function(event) {
+        $('.dropdown-toggle1 .text').html(event.target.innerHTML)
+    })
+    // 图二
+    $('.dropdown-menu2').click(function(event) {
+        $('.dropdown-toggle2 .text').html(event.target.innerHTML)
+    })
+</script>
+<script src="/thmz/js/echarts/echarts.min.js"></script>
+<script src="/thmz/js/dependent/moment.min.js"></script>
+<script src="/thmz/js/dependent/jquery.min.js"></script>
+<script src="/thmz/js/doctorIndex.js"></script>
+<title>主页面</title>
+<div style="height: 100%;overflow: hidden; overflow-y: scroll">
+    <div class="row top_tiles">
+        <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
+            <div class="tile-stats">
+                <div class="icon"><i class="fa fa-user-plus" style="color: #54BCBD;font-size: 52px"></i></div>
+                <div class="count" id="haveClinicalNum">0</div>
+                <h3>接诊人次</h3>
+            </div>
+        </div>
+        <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
+            <div class="tile-stats">
+                <div class="icon"><i class="fa fa-user" style="color: #54BCBD;font-size: 54px"></i></div>
+                <div class="count" id="registrationNum">0</div>
+                <h3>入院人次</h3>
+            </div>
+        </div>
+        <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
+            <div class="tile-stats">
+                <div class="icon" style="top: 18px">
+                    <span class="glyphicon glyphicon-calendar" aria-hidden="true" style="font-size: 50px;color: #54BCBD"></span>
+                </div>
+                <div class="count" id="ghAmount">0.00</div>
+                <h3>出诊天数</h3>
+            </div>
+        </div>
+        <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
+            <div class="tile-stats">
+                <div class="icon" style="top: 18px"><i class="fa fa-hourglass-start" style="color: #54BCBD;font-size: 48px"></i></div>
+                <div  class="count" id="sfAmount">0.00</div>
+                <h3>门诊平均等待时间</h3>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6 col-sm-8 col-xs-12">
+            <div class="dashboard_graph" style="min-width: 600px">
+
+                <div class="row x_title">
+                    <div class="col-md-4">
+                    </div>
+                    <div class="col-md-4">
+                    </div>
+                    <div class="col-md-4">
+                        <div class="btn-group">
+                            <button type="button" class="btn btn-default dropdown-toggle1" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <span class="text" style="color: #000">近半年</span>
+                                <span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu1" aria-labelledby="dropdownMenu">
+                                <li><a href="#">近三个月</a></li>
+                                <li><a href="#">近半年</a></li>
+                                <li><a href="#">近一年</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <!-- 图一 -->
+                <div style="padding: 20px 0;">
+                    <div id="canvas" style="min-height: 500px"></div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 col-sm-4 col-xs-12">
+            <div class="dashboard_graph">
+                <div class="row x_title">
+                    <div class="col-md-4">
+                    </div>
+                    <div class="col-md-4">
+                    </div>
+                    <div class="col-md-4">
+                        <div class="btn-group">
+                            <button type="button" class="btn btn-default dropdown-toggle2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                <span class="text" style="color: #000">近半年</span>
+                                <span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu dropdown-menu2" aria-labelledby="dropdownMenu1">
+                                <li><a href="#">近三个月</a></li>
+                                <li><a href="#">近半年</a></li>
+                                <li><a href="#">近一年</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <!-- 图二 -->
+                <div style="padding: 20px 0;">
+                    <div id="canvas1" style="min-height: 500px"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

部分文件因文件數量過多而無法顯示