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.

705 lines
30 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>护工数: <span>--</span></p>
<p>已陪护: <span>--</span></p>
<p>未陪护: <span>--</span></p>
<p>陪护单: <span>--</span></p>
<p>上工率: <span>--</span></p>
</div>
<div id="hg" class="hgright"></div>
</div>
<!-- 床位陪护实时概况 -->
<div class="cwphbox">
<h2>床位陪护实时概况</h2>
<div class="cwleft">
<p>床位数: <span>--</span></p>
<p>正在陪护: <span>--</span></p>
<p>未陪护: <span>--</span></p>
<p>陪护率: <span>--</span></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 last" 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 outOrder" width="100%" border='0' cellpadding='0' cellspacing='0'>
</table>
</div>
<!-- 最新投诉信息 -->
<div class="lists">
<h2>最新评价信息</h2>
<table class="fx tip" width="100%" border='0' cellpadding='0' cellspacing='0'>
</table>
</div>
<!-- 上月满意度评价分析 -->
<div class="lists">
<h2>上月满意度评价分析</h2>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="comments satisfied">
</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
}
];
var paramedicChart = [{
value: 0,
name: '已陪护'
},
{
value: 0,
name: '未陪护'
},
]
var bedChart = [{
value: 0,
name: '已陪护'
},
{
value: 0,
name: '未陪护'
},
]
var monthChartX = []
var monthChartY = []
var incomeChart = []
var projectChartX = []
var projectChartYperson = []
var projectChartY = []
$(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) {
var datas = result.data
// paramedic 护工陪护实时概况
var paramedics = datas.paramedic
var paramedicper = parseFloat(((paramedics.has_accompany / paramedics.total) * 100)
.toFixed(2)) + "%"
$(".hgleft p").eq(0).children("span").text(paramedics.total)
$(".hgleft p").eq(1).children("span").text(paramedics.has_accompany)
$(".hgleft p").eq(2).children("span").text(paramedics.no_accompany)
$(".hgleft p").eq(3).children("span").text(paramedics.accompany_order)
$(".hgleft p").eq(4).children("span").text(paramedicper)
// 护工陪护实时概况
paramedicChart = [{
value: paramedics.has_accompany,
name: '已陪护'
},
{
value: paramedics.no_accompany,
name: '未陪护'
},
]
// bed 床位
var beds = datas.bed
var bedper = parseFloat(((beds.has_accompany / beds.total) * 100).toFixed(2)) + "%"
$(".cwleft p").eq(0).children("span").text(beds.total)
$(".cwleft p").eq(1).children("span").text(beds.has_accompany)
$(".cwleft p").eq(2).children("span").text(beds.no_accompany)
$(".cwleft p").eq(3).children("span").text(bedper)
bedChart = [{
value: beds.has_accompany,
name: '已陪护'
},
{
value: beds.no_accompany,
name: '未陪护'
}
]
// 本月陪护订单分析
var monthsArr = datas.monthAccompany
monthsArr.map(item=>{
monthChartX.push(item.name)
monthChartY.push(item.total)
})
// 本月营收分析
var incomes = datas.income
incomes.map(item=>{
incomeChart.push({
name:item.name,
value:parseFloat(item.total)
})
})
// 陪护统计表
var projects = datas.project
projects.map(item=>{
projectChartX.push(item.name)
projectChartYperson.push(item.paramedic_total)
projectChartY.push(item.total)
})
// 最近订单 lastOrder
var lasts = datas.lastOrder
$(".last").empty("")
lasts.map(item=>{
var contactName = item.contact?
item.contact.charAt(0) + item.contact.slice(1).replace(new RegExp(item.contact.charAt(1), "g"), '*')
:'**'
$(".last").append("<tr><td width='25%' style='padding-left: 15px;'>"
+contactName+"</td><td width='60%'>"+item.project.name+"</td>"+
"<td width='15%'><span class='ways'>"+item.status_name+"</span></td>"+
"</tr>")
})
// 最新出院 outOrder
var outs = datas.outOrder
$(".outOrder").empty("")
outs.map(item=>{
var contactName = item.contact?
item.contact.charAt(0) + item.contact.slice(1).replace(new RegExp(item.contact.charAt(1), "g"), '*')
:'**'
$(".outOrder").append("<tr><td width='25%' style='padding-left: 15px;'>"
+contactName+"</td><td width='60%'>"+item.project.name+"</td>"+
"<td width='15%'><span class='ways'>"+item.status_name+"</span></td>"+
"</tr>")
})
// 最新评价
var tips = datas.tip
$(".tip").empty("")
tips.map(item=>{
var contactName = item.contact?
item.contact.charAt(0) + item.contact.slice(1).replace(new RegExp(item.contact.charAt(1), "g"), '*')
:'**'
$(".tip").append("<tr><td width='50%' style='padding-left: 15px;'>"+
contactName+"评价:"+item.comment+"</td>"+
"<td width='30%' style='text-align:right;vertical-align: top;padding-right:5px'><span class='ways'>"+item.project.name+"</span></td>"+
"</tr>")
})
// 满意度 satisfied
var satisfieds = datas.satisfied
$(".satisfied").empty("")
satisfieds.map((item,index)=>{
var score = parseInt(item.score)*20
var per = score +'%'
$(".satisfied").append("<tr class='skillbar index"+index+"'><td width='25%' style='padding-left: 18px;'><a>"+item.paramedic.name+"</a></td>"+
"<td width='55%' class='fill'><div class='filled' data-width='"+per+"'></div></td>"+
"<td width='20%' style='padding-left: 10px;'><span class='percent'>"+score+"</span>分</td>"+
"</tr><tr><td colspan='3'>&nbsp;</td></tr>")
})
$('.skillbar').skillbar({
speed: 1000,
});
console.log("result", result)
initChart()
},
complete: function(xhr, textStatus) {
//
}
});
}
// 图表
function initChart() {
// 护工陪护实时概况
var option = {
tooltip:{},
series: [{
// name:'访问量',
type: 'pie',
color: ["#04c6c7", "#ffc34a"],
radius: '50%',
data: paramedicChart
}]
};
var myChart = echarts.init(document.getElementById('hg'));
myChart.setOption(option);
// 床位陪护实时概况
var option1 = {
tooltip:{},
series: [{
type: 'pie',
color: ["#04c6c7", "#ffc34a"],
radius: '70%',
data: bedChart
}]
};
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,
rotate: 20,
textStyle: {
color: '#fff',
fontSize: '14px'
}
},
data: monthChartX,
},
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: monthChartY,
}, {
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: incomeChart.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 = {
grid:{
bottom:2%
},
tooltip:{
trigger: 'axis',
formatter: function (params) {
let tooltipContent = '';
var xAxisName = params[0].name;
// 添加X轴名称到提示框内容
tooltipContent += `<p>${xAxisName}</p>`
params.forEach((param) => {
console.log("param",param)
tooltipContent += `<p><span style="boder-radius:10px;display:inline-block;background-color: ${param.color}; width: 10px; height: 10px; margin-right: 5px;"></span>${param.seriesName}: ${param.value}</p>`;
});
return tooltipContent;
},
},
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: projectChartX,
axisLine: {
show: true,
lineStyle: {
color: '#018fff',
}
},
axisTick: {
show: true,
alignWithLabel: true,
},
axisLabel: {
interval: 0,
rotate: 20,
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: projectChartY,
itemStyle: {
color: '#ffb22f',
}
},
{
type: 'bar',
name: '总护工数',
data: projectChartYperson,
itemStyle: {
color: '#0087ff'
}
}
],
color: ["#ffb22f", "#0087ff"],
};
option4 && myChart4.setOption(option4);
}
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"
}
}]
});
}
</script>
</body>
</html>