You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

653 lines
22 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>护工数: 736</p>
<p>已陪护: 696</p>
<p>未陪护: 40</p>
<p>陪护单: 855</p>
<p>上工率: 122.5%</p>
</div>
<div id="hg" class="hgright"></div>
</div>
<!-- 床位陪护实时概况 -->
<div class="cwphbox">
<h2>床位陪护实时概况</h2>
<div class="cwleft">
<p>床位数: 7650</p>
<p>正在陪护: 855</p>
<p>未陪护: 7795</p>
<p>陪护率: 11.2%</p>
</div>
<div id="cw" class="cwright"></div>
</div>
</div>
<!-- 地图 -->
<div class="mapbox" id="map">
</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" style="display: block; width: 380px; height: 290px;"></div>
<div id="cwtable" class="box"></div>
</div>
</div>
<!-- 5月自动巡检信息 -->
<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%">武进中医院新大楼69床</td>
<td width="15%"><span class="ways">已派工</span></td>
</tr>
<tr>
<td width="25%" style="padding-left: 15px;">王**</td>
<td width="60%">阳湖院外科楼34床</td>
<td width="15%"><span class="ways">待处理</span></td>
</tr>
<tr>
<td width="25%" style="padding-left: 15px;">林**</td>
<td width="60%">常州市中医院188床</td>
<td width="15%"><span class="ways">待派工</span></td>
</tr>
<tr>
<td width="25%" style="padding-left: 15px;">刘**</td>
<td width="60%">常州市妇幼保健院63床</td>
<td width="15%"><span class="ways">待派工</span></td>
</tr>
<tr>
<td width="25%" style="padding-left: 15px;">马**</td>
<td width="60%">第一人民医院外科楼159床</td>
<td width="15%"><span class="ways">已派工</span></td>
</tr>
<tr>
<td width="25%" style="padding-left: 15px;">宋**</td>
<td width="60%">常州市中医院99床</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%">第一人民医院内科楼132床</td>
<td width="15%"><span class="ways">已结算</span></td>
</tr>
<tr>
<td width="25%" style="padding-left: 15px;">张**</td>
<td width="60%">武进中医院75床</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%">武进中医院</td>
</tr>
<tr>
<td width="50%" style="padding-left: 15px;"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%" style="padding-left: 15px;"></td>
<td width="50%"></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><td colspan="3">&nbsp;</td></tr>
<tr class="skillbar">
<td width="25%" style="padding-left: 18px;">工号<a>267</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><td colspan="3">&nbsp;</td></tr>
<tr class="skillbar">
<td width="25%" style="padding-left: 18px;">工号<a>032</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><td colspan="3">&nbsp;</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>
</table>
</div>
</div>
</div>
<script src="skin/default/js/an-skill-bar.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=visualization&key=VGIBZ-YUMLK-LTKJN-ASK67-6ZCP3-Q5BRF"></script>
<script>
var current_hospital = 0;
var map, marker;
var hospitals = [
{
name: "常州市第一人民医院",
lat: 31.77956,
lng: 119.960747
},
{
name: "常州市中医院",
lat: 31.773121,
lng: 119.964615
},
{
name: "常州市武进人民医院(南院)",
lat: 31.687063,
lng: 119.978226
},
{
name: "常州市第二人民医院阳湖院",
lat: 31.688465,
lng: 119.938339
},
{
name: "常州市妇幼保健院",
lat: 31.783091,
lng: 119.893227
},
{
name: "武进区中医院",
lat: 31.783091,
lng: 119.893227
},
{
name: "武进区中医院",
lat: 31.783091,
lng: 119.893227
}
];
$(function () {
getStatistic()
initMap();
});
// http://tiantian2.langye.net/admin/statistic
function getStatistic(){
var url = "/admin/statistic";
var data = {}
$.ajax({
type: "get",
timeout: 15000,
contentType: 'application/json',
data: JSON.stringify(data),
url: url,
dataType: "json",
success: function (result, textStatus, xhr) {
console.log("result",result)
},
complete: function (xhr, textStatus) {
//
}
});
}
function initMap() {
var center = new TMap.LatLng(31.77956, 119.960747);
//初始化地图
map = new TMap.Map("map", {
rotation: 20,//设置地图旋转角度
pitch: 45, //设置俯仰角度0~45
zoom: 17,//设置地图缩放级别
center: center, //设置地图中心点坐标
});
//初始化marker
marker = new TMap.MultiMarker({
id: "marker-layer", //图层id
map: map,
styles: { //点标注的相关样式
"marker": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": {x: 16, y: 32},
"src": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png"
})
},
geometries: [{ //点标注数据数组
"id": "demo",
"styleId": "marker",
"position": center,
"properties": {
"title": "marker"
}
}]
});
window.setInterval(function () {
//panToHospital();
}, 3000);
}
function panToHospital() {
current_hospital++;
if (current_hospital == hospitals.length) {
current_hospital = 0;
}
var center = new TMap.LatLng(hospitals[current_hospital].lat, hospitals[current_hospital].lng);
map.panTo(center);
marker.setMap(null);
marker = null;
marker = new TMap.MultiMarker({
id: "marker-layer", //图层id
map: map,
styles: { //点标注的相关样式
"marker": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": {x: 16, y: 32},
"src": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png"
})
},
geometries: [{ //点标注数据数组
"id": "demo",
"styleId": "marker",
"position": center,
"properties": {
"title": "marker"
}
}]
});
}
$('.skillbar').skillbar({
speed: 1000,
});
// 护工陪护实时概况
var option = {
series: [{
// name:'访问量',
type: 'pie',
color: ["#04c6c7", "#ffc34a"],
radius: '70%',
data: [
{value: 696, name: '已陪护'},
{value: 40, name: '未陪护'}
]
}]
};
var myChart = echarts.init(document.getElementById('hg'));
myChart.setOption(option);
// 床位陪护实时概况
var option1 = {
series: [{
type: 'pie',
color: ["#04c6c7", "#ffc34a"],
radius: '70%',
data: [
{value: 855, name: '已陪护'},
{value: 7795, 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: [336, 150, 42, 156, 42, 30, 54, 45],
}, {
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'
},
series: [
{
type: 'pie',
radius: '70%',
center: ['50%', '50%'],
color: ["#ffb22f", "#ff4954", "#01babb"],
data: [
{value: 75, name: '一院'},
{value: 60, name: '市中'},
{value: 30, name: '武进南院'},
{value: 25, name: '阳湖院'},
{value: 30, name: '康复医院'},
{value: 20, name: '妇幼院'},
{value: 25, name: '武中'},
{value: 18, 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);
// 陪护统计表
var app = {};
var chartDom = document.getElementById('phtable');
var myChart4 = echarts.init(chartDom);
var option4;
option4 = {
color: ['#018fff'],
lineStyle: {
color: '#018fff'
},
legend: {
itemWidth: 18,
itemHeight: 8,
itemGap: 10,
data: [{
name: '陪护',
itemStyle: {
color: "#ffb22f",
}
}, {
name: "护工数",
itemStyle: {
color: "#0087ff",
}
}],
orient: 'horizontal',
left: 'center',
textStyle: {
color: "rgba(255,255,255,.7)",
fontSize: '14px'
}
},
xAxis: {
type: 'category',
data: ['一院', '市中', '武进南院', '阳湖院', '康复医院', '妇幼院', '武中', '溧阳院'],
axisLine: {
show: true,
lineStyle: {
color: '#018fff',
}
},
axisTick: {
show: true,
alignWithLabel: true,
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff',
fontSize: '14px'
}
}
},
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: [
{
type: 'bar',
name: '陪护单数',
data: [336, 150, 42, 156, 42, 30, 54, 45],
itemStyle: {
color: '#ffb22f',
}
},
{
type: 'bar',
name: '总护工数',
data: [288, 130, 35, 125, 38, 30, 50, 40],
itemStyle: {
color: '#0087ff'
}
}
],
color: ["#ffb22f", "#0087ff"],
};
option4 && myChart4.setOption(option4);
</script>
</body>
</html>