|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<meta name="format-detection" content="telephone=no" />
|
|
|
<meta http-equiv="pragma" content="no-cache">
|
|
|
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
|
|
|
<meta http-equiv="expires" content="0">
|
|
|
<meta name="description" content="护工管理平台驾驶舱">
|
|
|
<meta name="keywords" content="护工管理平台驾驶舱">
|
|
|
<title>护工管理平台驾驶舱</title>
|
|
|
<!-- Bootstrap -->
|
|
|
<script src="skin/default/js/jquery.min.js" type="text/javascript"></script>
|
|
|
<script src="skin/default/js/style.js" type="text/javascript"></script>
|
|
|
<script src="skin/default/js/bootstrap.min.js" type="text/javascript"></script>
|
|
|
<link href="skin/default/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
|
<link href="skin/default/css/css.css" rel="stylesheet" type="text/css">
|
|
|
<script src="skin/default/js/echarts.min.js" type="text/javascript"></script>
|
|
|
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
|
|
|
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
|
|
|
<!--[if lt IE 9]>
|
|
|
<script src="skin/default/js/html5shiv.min.js"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
|
|
|
<![endif]-->
|
|
|
<style>
|
|
|
body{ background-size: 100% 100%;}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body style="background: url(skin/default/images/bg.jpg) no-repeat left top;">
|
|
|
<div class="headimg">
|
|
|
<img src="skin/default/images/head.png">
|
|
|
</div>
|
|
|
<div class="wrap">
|
|
|
<div class="headTop">
|
|
|
<a class="location">驾驶舱</a>
|
|
|
<div class="timebox"></div>
|
|
|
</div>
|
|
|
<div class="clear"></div>
|
|
|
<div class="mainleft">
|
|
|
<div class="leftbox">
|
|
|
<!-- 护工陪护实时概况 -->
|
|
|
<div class="hgphbox">
|
|
|
<h2>护工陪护实时概况</h2>
|
|
|
<div class="hgleft">
|
|
|
<p>护工数: 940</p>
|
|
|
<p>已陪护: 850</p>
|
|
|
<p>未陪护: 10</p>
|
|
|
<p>上工率: 90%</p>
|
|
|
</div>
|
|
|
<div id="hg" class="hgright"></div>
|
|
|
</div>
|
|
|
<!-- 床位陪护实时概况 -->
|
|
|
<div class="cwphbox">
|
|
|
<h2>床位陪护实时概况</h2>
|
|
|
<div class="cwleft">
|
|
|
<p>床位数: 940</p>
|
|
|
<p>未陪护: 850</p>
|
|
|
<p>已陪护: 10</p>
|
|
|
<p>床位护理率: 90%</p>
|
|
|
</div>
|
|
|
<div id="cw" class="cwright"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 地图 -->
|
|
|
<div class="mapbox" id="map">
|
|
|
<img src="skin/default/images/map.jpg">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 本月陪护订单分析 -->
|
|
|
<div class="mainright">
|
|
|
<div class="byph">
|
|
|
<h2>本月陪护订单分析</h2>
|
|
|
<div id="byph" class="bybox"></div>
|
|
|
</div>
|
|
|
<!-- 本月营收占比分析 -->
|
|
|
<div class="byys">
|
|
|
<h2>本月营收占比分析</h2>
|
|
|
<div class="ysbox" id="ysbox"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="clear"></div>
|
|
|
<div class="mainbottom">
|
|
|
<!-- 陪护统计表 -->
|
|
|
<div class="lists">
|
|
|
<h2>陪护统计表</h2>
|
|
|
<div class="tableContent">
|
|
|
<div id="phtable" class="box"></div>
|
|
|
<div id="cwtable" class="box"></div>
|
|
|
</div>
|
|
|
<div class="tab">
|
|
|
<a>护工</a>
|
|
|
<a>床位</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 5月自动巡检信息 -->
|
|
|
<div class="lists">
|
|
|
<h2>5月自动巡检信息</h2>
|
|
|
<table class="fx" width="100%" border='0' cellpadding='0' cellspacing='0'>
|
|
|
<tr>
|
|
|
<td width="25%" style="padding-left: 15px;">张大伯</td>
|
|
|
<td width="60%">第一人民医院内科楼15床</td>
|
|
|
<td width="15%"><span class="ways">已派工</span></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td width="25%" style="padding-left: 15px;">张大伯</td>
|
|
|
<td width="60%">第一人民医院内科楼15床</td>
|
|
|
<td width="15%"><span class="ways">已派工</span></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td width="25%" style="padding-left: 15px;">张大伯</td>
|
|
|
<td width="60%">第一人民医院内科楼15床</td>
|
|
|
<td width="15%"><span class="ways">待处理</span></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td width="25%" style="padding-left: 15px;">张大伯</td>
|
|
|
<td width="60%">第一人民医院内科楼15床</td>
|
|
|
<td width="15%"><span class="ways">待派工</span></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td width="25%" style="padding-left: 15px;">张大伯</td>
|
|
|
<td width="60%">第一人民医院内科楼15床</td>
|
|
|
<td width="15%"><span class="ways">待派工</span></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td width="25%" style="padding-left: 15px;">张大伯</td>
|
|
|
<td width="60%">第一人民医院内科楼15床</td>
|
|
|
<td width="15%"><span class="ways">已派工</span></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td width="25%" style="padding-left: 15px;">张大伯</td>
|
|
|
<td width="60%">第一人民医院内科楼15床</td>
|
|
|
<td width="15%"><span class="ways">已派工</span></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
<!-- 最新出院信息 -->
|
|
|
<div class="lists">
|
|
|
<h2>最新出院信息</h2>
|
|
|
<table class="fx" width="100%" border='0' cellpadding='0' cellspacing='0'>
|
|
|
<tr>
|
|
|
<td width="25%" style="padding-left: 15px;">张大伯</td>
|
|
|
<td width="60%">第一人民医院内科楼15床</td>
|
|
|
<td width="15%"><span class="ways">已结算</span></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td width="25%" style="padding-left: 15px;">张大伯</td>
|
|
|
<td width="60%">第一人民医院内科楼15床</td>
|
|
|
<td width="15%"><span class="ways">已结算</span></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
<td><span></span></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
<td><span></span></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
<td><span></span></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
<td><span></span></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
<td><span></span></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
<!-- 最新投诉信息 -->
|
|
|
<div class="lists">
|
|
|
<h2>最新投诉信息</h2>
|
|
|
<table class="fx" width="100%" border='0' cellpadding='0' cellspacing='0'>
|
|
|
<tr>
|
|
|
<td width="50%" style="padding-left: 15px;">刘大伯投诉袁护工</td>
|
|
|
<td width="50%">武进中医院住院部23床</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td width="50%" style="padding-left: 15px;">张大伯投诉王护工</td>
|
|
|
<td width="50%">武进中医院住院部23床</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td width="50%" style="padding-left: 15px;">张大伯投诉王护工</td>
|
|
|
<td width="50%">武进中医院住院部23床</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
<!-- 上月满意度评价分析 -->
|
|
|
<div class="lists">
|
|
|
<h2>上月满意度评价分析</h2>
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="comments">
|
|
|
<tr class="skillbar">
|
|
|
<td width="25%" style="padding-left: 18px;">工号<a>103</a></td>
|
|
|
<td width="55%" class="fill"><div class="filled" data-width="100%"></div></td>
|
|
|
<td width="20%" style="padding-left: 10px;"><span class="percent">100</span>分</td>
|
|
|
</tr>
|
|
|
<tr class="skillbar">
|
|
|
<td width="25%" style="padding-left: 18px;">工号<a>136</a></td>
|
|
|
<td width="55%" class="fill"><div class="filled" data-width="90%"></div></td>
|
|
|
<td width="20%" style="padding-left: 10px;"><span class="percent">90</span>分</td>
|
|
|
</tr>
|
|
|
<tr class="skillbar">
|
|
|
<td width="25%" style="padding-left: 18px;">工号<a>015</a></td>
|
|
|
<td width="55%" class="fill"><div class="filled" data-width="80%"></div></td>
|
|
|
<td width="20%" style="padding-left: 10px;"><span class="percent">80</span>分</td>
|
|
|
</tr>
|
|
|
<tr class="skillbar">
|
|
|
<td width="25%" style="padding-left: 18px;">工号<a>011</a></td>
|
|
|
<td width="55%" class="fill"><div class="filled" data-width="60%"></div></td>
|
|
|
<td width="20%" style="padding-left: 10px;"><span class="percent">60</span>分</td>
|
|
|
</tr>
|
|
|
<tr class="skillbar">
|
|
|
<td width="25%" style="padding-left: 18px;">工号<a>002</a></td>
|
|
|
<td width="55%" class="fill"><div class="filled" data-width="55%"></div></td>
|
|
|
<td width="20%" style="padding-left: 10px;"><span class="percent">55</span>分</td>
|
|
|
</tr>
|
|
|
<tr class="skillbar">
|
|
|
<td width="25%" style="padding-left: 18px;">工号<a>001</a></td>
|
|
|
<td width="55%" class="fill"><div class="filled" data-width="45%"></div></td>
|
|
|
<td width="20%" style="padding-left: 10px;"><span class="percent">45</span>分</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script src="skin/default/js/an-skill-bar.js"></script>
|
|
|
|
|
|
<script>
|
|
|
$('.skillbar').skillbar({
|
|
|
speed: 1000,
|
|
|
});
|
|
|
// 护工陪护实时概况
|
|
|
var option = {
|
|
|
series:[{
|
|
|
// name:'访问量',
|
|
|
type:'pie',
|
|
|
color:["#ffc34a","#04c6c7"] ,
|
|
|
radius:'70%',
|
|
|
data:[
|
|
|
{value:140,name:'已陪护'},
|
|
|
{value:800,name:'未陪护'}
|
|
|
]
|
|
|
}]
|
|
|
};
|
|
|
var myChart = echarts.init(document.getElementById('hg'));
|
|
|
myChart.setOption(option);
|
|
|
// 床位陪护实时概况
|
|
|
var option1 = {
|
|
|
series:[{
|
|
|
type:'pie',
|
|
|
color:["#ffc34a","#04c6c7"] ,
|
|
|
radius:'70%',
|
|
|
data:[
|
|
|
{value:140,name:'已陪护'},
|
|
|
{value:800,name:'未陪护'}
|
|
|
]
|
|
|
}]
|
|
|
};
|
|
|
var myChart1 = echarts.init(document.getElementById('cw'));
|
|
|
myChart1.setOption(option1);
|
|
|
// 本月陪护订单分析
|
|
|
var option2 = {
|
|
|
tooltip:{},
|
|
|
color:['#018fff'],
|
|
|
lineStyle:{
|
|
|
color:'#018fff'
|
|
|
},
|
|
|
legend:{
|
|
|
itemWidth:18,
|
|
|
itemHeight:8,
|
|
|
itemGap:10,
|
|
|
data:['陪护订单量'],
|
|
|
orient: 'vertical',
|
|
|
left: 'center',
|
|
|
textStyle:{
|
|
|
color:"rgba(255,255,255,.7)",
|
|
|
fontSize:'14px'
|
|
|
}
|
|
|
},
|
|
|
xAxis:{
|
|
|
type: 'category',
|
|
|
axisLine:{
|
|
|
show:true,
|
|
|
lineStyle:{
|
|
|
color:'#018fff',
|
|
|
}
|
|
|
},
|
|
|
axisTick:{
|
|
|
show:true,
|
|
|
alignWithLabel: true ,
|
|
|
},
|
|
|
axisLabel:{
|
|
|
interval:0,
|
|
|
textStyle:{
|
|
|
color:'#fff',
|
|
|
fontSize:'14px'
|
|
|
}
|
|
|
},
|
|
|
data:["第一人民医院","市中医院","二院阳湖院","武中"],
|
|
|
},
|
|
|
yAxis:{
|
|
|
axisLine:{
|
|
|
show:true,
|
|
|
lineStyle:{
|
|
|
color:'#018fff',
|
|
|
}
|
|
|
},
|
|
|
axisTick:{
|
|
|
show:true,
|
|
|
alignWithLabel: true ,
|
|
|
},
|
|
|
axisLabel:{
|
|
|
interval:0,
|
|
|
textStyle:{
|
|
|
color:'#fff',
|
|
|
fontSize:'14px'
|
|
|
}
|
|
|
},
|
|
|
type:'value',
|
|
|
name:'订单数',
|
|
|
nameTextStyle:{
|
|
|
color:"#2b7ba0",
|
|
|
fontSize:'14px'
|
|
|
}
|
|
|
},
|
|
|
series:[{
|
|
|
name: '陪护订单量',
|
|
|
type: 'pictorialBar',
|
|
|
barCategoryGap: '40%',
|
|
|
symbol: 'triangle',
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
opacity: 0.5
|
|
|
},
|
|
|
emphasis: {
|
|
|
opacity: 1
|
|
|
}
|
|
|
},
|
|
|
data:[{
|
|
|
value:52,
|
|
|
itemStyle:{
|
|
|
color: 'red'
|
|
|
}
|
|
|
},28,11,19],
|
|
|
}, {
|
|
|
name: '陪护订单量',
|
|
|
type: 'pictorialBar',
|
|
|
barGap: '-100%',
|
|
|
symbolPosition: 'end',
|
|
|
symbolSize: 50,
|
|
|
symbolOffset: [0, '-120%'],
|
|
|
}]
|
|
|
};
|
|
|
var myChart2 = echarts.init(document.getElementById('byph'));
|
|
|
myChart2.setOption(option2);
|
|
|
// 本月营收占比分析
|
|
|
var option3 = {
|
|
|
|
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
|
},
|
|
|
legend: {
|
|
|
show:true,
|
|
|
itemWidth:18,
|
|
|
itemHeight:8,
|
|
|
itemGap:10,
|
|
|
|
|
|
data:[{
|
|
|
name:'第一人民医院',
|
|
|
itemStyle:{
|
|
|
color:"#01babb",
|
|
|
}
|
|
|
},{
|
|
|
name:"市中医院",
|
|
|
itemStyle:{
|
|
|
color:"#ffb22f",
|
|
|
}
|
|
|
},{
|
|
|
name:"武中",
|
|
|
itemStyle:{
|
|
|
color:"#ff4954",
|
|
|
}
|
|
|
}],
|
|
|
textStyle:{
|
|
|
color:"#02c1c1",
|
|
|
fontSize:'14px'
|
|
|
},
|
|
|
orient: 'vertical',
|
|
|
left: 'left',
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
type: 'pie',
|
|
|
radius: '70%',
|
|
|
center: ['50%', '50%'],
|
|
|
color:["#ffb22f","#ff4954","#01babb"],
|
|
|
data: [
|
|
|
{value: 15, name: '武中'},
|
|
|
{value: 25, name: '市中医院'},
|
|
|
{value: 75, name: '第一人民医院'},
|
|
|
].sort(function (a, b) { return a.value - b.value; }),
|
|
|
roseType: 'radius',
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
var myChart3 = echarts.init(document.getElementById('ysbox'));
|
|
|
myChart3.setOption(option3);
|
|
|
|
|
|
//
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
