|
|
|
|
|
<!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="wrap">
|
|
|
|
|
|
<div class="headTop">
|
|
|
|
|
|
<a class="location">驾驶舱</a>
|
|
|
|
|
|
<div class="headimg" style="top:-10px;">
|
|
|
|
|
|
<img src="skin/default/images/head.png">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<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.725018,
|
|
|
|
|
|
lng: 119.941279
|
|
|
|
|
|
}
|
|
|
|
|
|
];
|
|
|
|
|
|
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'> </td></tr>")
|
|
|
|
|
|
})
|
|
|
|
|
|
$('.skillbar').skillbar({
|
|
|
|
|
|
speed: 1000,
|
|
|
|
|
|
});
|
|
|
|
|
|
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 = {
|
|
|
|
|
|
tooltip:{
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
|
let tooltipContent = '';
|
|
|
|
|
|
var xAxisName = params[0].name;
|
|
|
|
|
|
// 添加X轴名称到提示框内容
|
|
|
|
|
|
tooltipContent += `<p>${xAxisName}</p>`
|
|
|
|
|
|
params.forEach((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;
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
grid:{
|
|
|
|
|
|
top:"10%",
|
|
|
|
|
|
bottom:"30%"
|
|
|
|
|
|
},
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
|
|
panToHospital()
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function panToHospital() {
|
|
|
|
|
|
var geometriesArr = []
|
|
|
|
|
|
hospitals.map(item=>{
|
|
|
|
|
|
var center = new TMap.LatLng(item.lat, item.lng);
|
|
|
|
|
|
var mark = { //点标注数据数组
|
|
|
|
|
|
"id": "demo",
|
|
|
|
|
|
"styleId": "marker",
|
|
|
|
|
|
"position": center,
|
|
|
|
|
|
"properties": {
|
|
|
|
|
|
"title": "marker"
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
geometriesArr.push(mark)
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
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: geometriesArr
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
