develop

分支 (4)

管理

管理

develop

master

feature

release

doctors
/
dashboard.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    <title>临床 - 护理 & 医院</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="content" id="content">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3" style="max-width: 25%;">
            <div class="dash-widget">
                <span class="dash-widget-bg2"><i class="fa fa-stethoscope" aria-hidden="true"></i></span>
                <div class="dash-widget-info text-right">
                    <h3>{{doctorNum}}</h3>
                    <span class="widget-title1" title="值班医生">值班医生<i class="fa fa-check" aria-hidden="true"></i></span>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3" style="max-width: 25%;">
            <div class="dash-widget">
                <span class="dash-widget-bg1"><i class="fa fa-stethoscope" aria-hidden="true"></i></span>
                <div class="dash-widget-info text-right">
                    <h3>{{patientNum}}</h3>
                    <span class="widget-title1">新增患者<i class="fa fa-check" aria-hidden="true"></i></span>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3" style="max-width: 25%;">
            <div class="dash-widget">
                <span class="dash-widget-bg4"><i class="fa fa-stethoscope" aria-hidden="true"></i></span>
                <div class="dash-widget-info text-right">
                    <h3>{{diagnosingNum}}</h3>
                    <span class="widget-title1">诊断中<i class="fa fa-check" aria-hidden="true"></i></span>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3" style="max-width: 25%;">
            <div class="dash-widget">
                <span class="dash-widget-bg3"><i class="fa fa-stethoscope" aria-hidden="true"></i></span>
                <div class="dash-widget-info text-right">
                    <h3>{{waitingNum}}</h3>
                    <span class="widget-title1">预约候诊<i class="fa fa-check" aria-hidden="true"></i></span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6 col-lg-6 col-xl-6">
            <div class="card">
                <div class="card-body">
                    <div class="chart-title">
                        <h4>网络预约</h4>
                        <span class="float-right"><i class="fa fa-caret-up" aria-hidden="true"></i> 比上个月增加 15%</span>
                    </div>
                    <canvas id="linegraph"></canvas>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-6 col-xl-6">
            <div class="card">
                <div class="card-body">
                    <div class="chart-title">
                        <h4>患者情况</h4>
                        <div class="float-right">
                            <ul class="chat-user-total">
                                <li><i class="fa fa-circle current-users" aria-hidden="true"></i>新增病患</li>
                                <li><i class="fa fa-circle old-users" aria-hidden="true"></i> 遗留病患</li>
                            </ul>
                        </div>
                    </div>
                    <canvas id="bargraph"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6 col-lg-8 col-xl-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title d-inline-block">候诊列表</h4>
					<a href="appointments.html" class="btn btn-primary float-right">查看全部</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead class="d-none">
                            <tr>
                                <th>患者</th>
                                <th>医生</th>
                                <th>时间安排</th>
                                <th class="text-right">状态</th>
                            </tr>
                            </thead>
                            <tbody id="appointments">
                            <tr v-for="appointment in appointments.slice(0,5)">
                                <td style="min-width: 100px;">
                                    <a class="avatar" href="profile.html">{{firstName(appointment.patientName)}}</a>
                                    <h2><a href="profile.html">{{appointment.patientName}}<span>{{appointment.patientAddr}}</span></a>
                                    </h2>
                                </td>
                                <td style="min-width: 100px;">
                                    <h2><a href="profile.html">{{appointment.NO}}</a>
                                    </h2>
                                </td>
                                <td>
                                    <h5 class="time-title p-0">预约了</h5>
                                    <p>{{appointment.doctorName}}医生</p>
                                </td>
                                <td>
                                    <h5 class="time-title p-0">时间</h5>
                                    <p>{{appointment.timing}}</p>
                                </td>
                                <td class="text-right">
                                    <a href="appointments.html" class="btn btn-outline-primary take-btn">{{appointment.status}}</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xl-4">
            <div class="card member-panel">
                <div class="card-header bg-white">
                    <h4 class="card-title mb-0">医资力量</h4>
                </div>
                <div class="card-body">
                    <ul class="contact-list" id="doctors">
                        <li v-for="doctor in doctors">
                            <div class="contact-cont">
                                <div class="float-left user-img m-r-10">
                                    <a href="profile.html" :title="doctor.status">
                                        <img :src="doctorImg(doctor.img)" alt="" class="w-40 rounded-circle">
                                        <span class="status" :class="doctor.status"></span>
                                    </a>
                                </div>
                                <div class="contact-info">
                                    <span class="contact-name text-ellipsis">{{doctor.name}}</span>
                                    <span class="contact-date">{{doctor.level}}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="card-footer text-center bg-white">
                    <a href="doctors.html" class="text-muted">查看全部</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6 col-lg-8 col-xl-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title d-inline-block">新患者 </h4>
                    <a href="patients.html" class="btn btn-primary float-right">查看全部</a>
                </div>
                <div class="card-block">
                    <div class="table-responsive">
                        <table class="table mb-0 new-patient-table">
                            <tbody id="patients">
                            <tr v-for="patient in patients">
                                <td>
                                    <img width="28" height="28" class="rounded-circle" :src="patientImg(patient.patients_img)"
                                         alt="">
                                    <h2>{{patient.patients_name}}</h2>
                                </td>
                                <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="">{{patient.addr}}</a>
                                </td>
                                <td>{{patient.mobile}}</td>
                                <td>
                                    <!--预约的科室-->
                                    <button class="btn btn-primary btn-primary-one float-right">{{patient.sicken}}
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xl-4">
            <div class="hospital-barchart">
                <h4 class="card-title d-inline-block">医院概览</h4>
            </div>
            <div class="bar-chart">
                <div class="legend">
                    <div class="item">
                        <h4>Level1</h4>
                    </div>
                    <div class="item">
                        <h4>Level2</h4>
                    </div>
                    <div class="item text-right">
                        <h4>Level3</h4>
                    </div>
                    <div class="item text-right">
                        <h4>Level4</h4>
                    </div>
                </div>
                <div class="chart clearfix">
                    <div class="item">
                        <div class="bar">
                            <span class="percent">16%</span>
                            <div class="item-progress" data-percent="16">
                                <span class="title">门诊患者</span>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="bar">
                            <span class="percent">71%</span>
                            <div class="item-progress" data-percent="71">
                                <span class="title">新增患者</span>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="bar">
                            <span class="percent">82%</span>
                            <div class="item-progress" data-percent="82">
                                <span class="title">检验论证中</span>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="bar">
                            <span class="percent">67%</span>
                            <div class="item-progress" data-percent="67">
                                <span class="title">治疗中</span>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="bar">
                            <span class="percent">30%</span>
                            <div class="item-progress" data-percent="30">
                                <span class="title">出院</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="assets/js/vue.global.js"></script>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/Chart.bundle.js"></script>
<script src="assets/js/app.js"></script>
<!--json data-->
<script type="text/javascript" src="json/doctors.json"></script>
<script type="text/javascript" src="json/patients.json"></script>
<script type="text/javascript" src="json/appointments.json"></script>
<script type="text/javascript" src="json/employees.json"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript">
	let jsonArrayMap = {};
	jsonArrayMap.doctors = doctors;
	jsonArrayMap.patients = patients;
	jsonArrayMap.appointments = appointments;
	jsonArrayMap.employees = employees;

	$(document).ready(function() {
	// Bar Chart
	var barChartData = {
		labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
		datasets: [{
			label: '新增病患',
			backgroundColor: 'rgba(0, 158, 251, 0.5)',
			borderColor: 'rgba(0, 158, 251, 1)',
			borderWidth: 1,
			data: [35, 59, 80, 81, 56, 55, 40]
		}, {
			label: '遗留病患',
			backgroundColor: 'rgba(255, 188, 53, 0.5)',
			borderColor: 'rgba(255, 188, 53, 1)',
			borderWidth: 1,
			data: [28, 48, 40, 19, 46, 27, 90]
		}]
	};
	var ctx = document.getElementById('bargraph').getContext('2d');
	window.myBar = new Chart(ctx, {
		type: 'bar',
		data: barChartData,
		options: {
			responsive: true,
			legend: {
				display: false,
			}
		}
	});

	// Line Chart
	var lineChartData = {
		labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
		datasets: [{
			label: "预约人数",
			backgroundColor: "rgba(0, 158, 251, 0.5)",
			data: [100, 70, 20, 100, 120, 50, 70, 50, 50, 100, 50, 90]
		}, {
		label: "到诊人数",
		backgroundColor: "rgba(255, 188, 53, 0.5)",
		fill: true,
		data: [28, 48, 40, 19, 86, 27, 20, 90, 50, 20, 90, 20]
		}]
	};

	var linectx = document.getElementById('linegraph').getContext('2d');
	window.myLine = new Chart(linectx, {
		type: 'line',
		data: lineChartData,
		options: {
			responsive: true,
			legend: {
				display: false,
			},
			tooltips: {
				mode: 'index',
				intersect: false,
			}
		}
	});

	// Bar Chart 2

    barChart();

    $(window).resize(function(){
        barChart();
    });

    function barChart(){
        $('.bar-chart').find('.item-progress').each(function(){
            var itemProgress = $(this),
            itemProgressWidth = $(this).parent().width() * ($(this).data('percent') / 100);
            itemProgress.css('width', itemProgressWidth);
        });
    };
});
	Vue.createApp({
		  data() {
		    return{
                doctors: null,
                appointments: null,
                patients: null
		  	}
		  },
		  computed: {
		    //计算属性
			doctorNum(){
			    //值班医生，在职且非下线状态的医生
                let onLineDoctors = doctors.filter((d)=>{return d.dim == "在职" && d.status != "离线"});
				return onLineDoctors.length;
			},
			patientNum(){
			    //除了痊愈的患者
				return patients.length;
			},
			diagnosingNum(){
				//诊断中的预约数量
				let ingAppointments = appointments.filter((a)=>{
                    return a.date == "2022-07-25" && a.status == "诊断中"
                });
				return ingAppointments.length;
			},
			waitingNum(){
				//等待的预约数量
				let waitingAppointments = appointments.filter((a)=>{
                    return a.date == "2022-07-25" && a.status == "候诊"
                });
				return waitingAppointments.length;
			}
		  },
		  //此时可以通过vue访问data中的数据和方法，还没创建虚拟dom
		  created(){
			//医资力量，在职医生
			this.doctors = select(jsonArrayMap, "employees.name = doctors.name "
	         +" and doctors.dim = '在职'");
			//预约候诊，预约了今天，等候或诊断中的
			this.appointments = appointments.filter((a)=>{
			    return a.date == "2022-07-25" && (a.status == "候诊" || a.status == "诊断中")
			}).sort(sortByKeys("date:desc,timing:asc"));
			//从预约进入到治疗的
			this.patients = patients.filter((p)=>{
			    return p.status == "治疗中"
			}).sort(sortByKeys("createTime:desc"));

			//联合查询，患者信息，需要用到医生的科室，通过预约信息关联起来
	        this.patients = select(jsonArrayMap, "appointments.patientName = patients.name "
	         +" and appointments.doctorName = doctors.name");
		  },
		  //页面已经挂载vue编译后的dom，此时对dom的操作才会生效
		  mounted(){

		  },
		  methods: {
			doctorImg(img){
				return "assets/img/employees/" + img;
			},
			patientImg(img){
				return "assets/img/" + img;
			},
			firstName(name){
			    //从0位开始，截取长度为1
			    return name.substr(0,1);
			}
		  }
	}).mount('#content');

</script>
<!--json data-->
</body>

</html>