lion 3 years ago
parent 5ad493e317
commit 4c5e8a8497

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="telephone=no" />
<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0"> <meta http-equiv="expires" content="0">
@ -29,12 +29,12 @@
background-size: 100% 100%; background-size: 100% 100%;
} }
</style> </style>
</head> </head>
<body style="background: url(skin/default/images/bg.jpg) no-repeat left top;"> <body style="background: url(skin/default/images/bg.jpg) no-repeat left top;">
<div class="headimg"> <div class="headimg">
<img src="skin/default/images/head.png"> <img src="skin/default/images/head.png">
</div> </div>
<div class="wrap"> <div class="wrap">
<div class="headTop"> <div class="headTop">
<a class="location">驾驶舱</a> <a class="location">驾驶舱</a>
<div class="timebox"></div> <div class="timebox"></div>
@ -220,7 +220,9 @@
</td> </td>
<td width="20%" style="padding-left: 10px;"><span class="percent">100</span></td> <td width="20%" style="padding-left: 10px;"><span class="percent">100</span></td>
</tr> </tr>
<tr><td colspan="3">&nbsp;</td></tr> <tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr class="skillbar"> <tr class="skillbar">
<td width="25%" style="padding-left: 18px;">工号<a>267</a></td> <td width="25%" style="padding-left: 18px;">工号<a>267</a></td>
<td width="55%" class="fill"> <td width="55%" class="fill">
@ -228,7 +230,9 @@
</td> </td>
<td width="20%" style="padding-left: 10px;"><span class="percent">90</span></td> <td width="20%" style="padding-left: 10px;"><span class="percent">90</span></td>
</tr> </tr>
<tr><td colspan="3">&nbsp;</td></tr> <tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr class="skillbar"> <tr class="skillbar">
<td width="25%" style="padding-left: 18px;">工号<a>032</a></td> <td width="25%" style="padding-left: 18px;">工号<a>032</a></td>
<td width="55%" class="fill"> <td width="55%" class="fill">
@ -236,7 +240,9 @@
</td> </td>
<td width="20%" style="padding-left: 10px;"><span class="percent">80</span></td> <td width="20%" style="padding-left: 10px;"><span class="percent">80</span></td>
</tr> </tr>
<tr><td colspan="3">&nbsp;</td></tr> <tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr class="skillbar"> <tr class="skillbar">
<td width="25%" style="padding-left: 18px;">工号<a>011</a></td> <td width="25%" style="padding-left: 18px;">工号<a>011</a></td>
<td width="55%" class="fill"> <td width="55%" class="fill">
@ -248,14 +254,15 @@
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<script src="skin/default/js/an-skill-bar.js"></script> <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 charset="utf-8"
<script> 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 current_hospital = 0;
var map, marker; var map, marker;
var hospitals = [ var hospitals = [{
{
name: "常州市第一人民医院", name: "常州市第一人民医院",
lat: 31.77956, lat: 31.77956,
lng: 119.960747 lng: 119.960747
@ -291,20 +298,32 @@
lng: 119.893227 lng: 119.893227
} }
]; ];
var paramedicChart = [ var paramedicChart = [{
{value:0, name: '已陪护'}, value: 0,
{value: 0, name: '未陪护'}, name: '已陪护'
},
{
value: 0,
name: '未陪护'
},
] ]
var bedChart = [ var bedChart = [{
{value:0, name: '已陪护'}, value: 0,
{value: 0, name: '未陪护'}, name: '已陪护'
},
{
value: 0,
name: '未陪护'
},
] ]
$(function () { var projectChartX = []
var projectChartY = []
$(function() {
getStatistic() getStatistic()
initMap(); initMap();
}); });
// http://tiantian2.langye.net/admin/statistic // http://tiantian2.langye.net/admin/statistic
function getStatistic(){ function getStatistic() {
var url = "/admin/statistic"; var url = "/admin/statistic";
var data = {} var data = {}
@ -315,105 +334,56 @@
data: JSON.stringify(data), data: JSON.stringify(data),
url: url, url: url,
dataType: "json", dataType: "json",
success: function (result, textStatus, xhr) { success: function(result, textStatus, xhr) {
var datas = result.data var datas = result.data
// paramedic 护工陪护实时概况 // paramedic 护工陪护实时概况
var paramedics = datas.paramedic var paramedics = datas.paramedic
var paramedicper = parseFloat(((paramedics.has_accompany/paramedics.total)*100).toFixed(2))+"%" var paramedicper = parseFloat(((paramedics.has_accompany / paramedics.total) * 100)
.toFixed(2)) + "%"
$(".hgleft p").eq(0).children("span").text(paramedics.total) $(".hgleft p").eq(0).children("span").text(paramedics.total)
$(".hgleft p").eq(1).children("span").text(paramedics.has_accompany) $(".hgleft p").eq(1).children("span").text(paramedics.has_accompany)
$(".hgleft p").eq(2).children("span").text(paramedics.no_accompany) $(".hgleft p").eq(2).children("span").text(paramedics.no_accompany)
$(".hgleft p").eq(3).children("span").text(paramedics.accompany_order) $(".hgleft p").eq(3).children("span").text(paramedics.accompany_order)
$(".hgleft p").eq(4).children("span").text(paramedicper) $(".hgleft p").eq(4).children("span").text(paramedicper)
// 护工陪护实时概况 // 护工陪护实时概况
paramedicChart = [ paramedicChart = [{
{value:paramedics.has_accompany , name: '已陪护'}, value: paramedics.has_accompany,
{value: paramedics.no_accompany, name: '未陪护'}, name: '已陪护'
},
{
value: paramedics.no_accompany,
name: '未陪护'
},
] ]
// bed 床位 // bed 床位
var beds = datas.bed var beds = datas.bed
var bedper = parseFloat(((beds.has_accompany/beds.total)*100).toFixed(2))+"%" var bedper = parseFloat(((beds.has_accompany / beds.total) * 100).toFixed(2)) + "%"
$(".cwleft p").eq(0).children("span").text(beds.total) $(".cwleft p").eq(0).children("span").text(beds.total)
$(".cwleft p").eq(1).children("span").text(beds.has_accompany) $(".cwleft p").eq(1).children("span").text(beds.has_accompany)
$(".cwleft p").eq(2).children("span").text(beds.no_accompany) $(".cwleft p").eq(2).children("span").text(beds.no_accompany)
$(".cwleft p").eq(3).children("span").text(bedper) $(".cwleft p").eq(3).children("span").text(bedper)
bedChart = [ bedChart = [{
{value: beds.has_accompany, name: '已陪护'}, value: beds.has_accompany,
{value: beds.no_accompany, name: '未陪护'} name: '已陪护'
]
// 陪护统计表
console.log("result",result)
initChart()
}, },
complete: function (xhr, textStatus) { {
// value: beds.no_accompany,
} name: '未陪护'
});
} }
function initMap() { ]
var center = new TMap.LatLng(31.77956, 119.960747); // 陪护统计表
//初始化地图 var projects = datas.project
map = new TMap.Map("map", { projects.map(item=>{
rotation: 20,//设置地图旋转角度 projectChartX.push(item.name)
pitch: 45, //设置俯仰角度0~45 projectChartY.push(item.total)
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() { console.log("result", result)
current_hospital++; initChart()
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: [{ //点标注数据数组 complete: function(xhr, textStatus) {
"id": "demo", //
"styleId": "marker",
"position": center,
"properties": {
"title": "marker"
} }
}]
}); });
} }
@ -422,7 +392,7 @@
}); });
// 图表 // 图表
function initChart(){ function initChart() {
// 护工陪护实时概况 // 护工陪护实时概况
var option = { var option = {
series: [{ series: [{
@ -484,7 +454,7 @@
fontSize: '14px' fontSize: '14px'
} }
}, },
data: ["一院", "市中", "武进南院", "阳湖院", "康复医院", "妇幼院", "武中", "溧阳院"], data: projectChartX,
}, },
yAxis: { yAxis: {
axisLine: { axisLine: {
@ -525,15 +495,17 @@
} }
}, },
data: [336, 150, 42, 156, 42, 30, 54, 45], data: projectChartY,
}, { }
name: '陪护订单量', // , {
type: 'pictorialBar', // name: '陪护订单量',
barGap: '-100%', // type: 'pictorialBar',
symbolPosition: 'end', // barGap: '-100%',
symbolSize: 50, // symbolPosition: 'end',
symbolOffset: [0, '-120%'], // symbolSize: 50,
}] // symbolOffset: [0, '-120%'],
// },
]
}; };
var myChart2 = echarts.init(document.getElementById('byph')); var myChart2 = echarts.init(document.getElementById('byph'));
myChart2.setOption(option2); myChart2.setOption(option2);
@ -543,22 +515,44 @@
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
series: [ series: [{
{
type: 'pie', type: 'pie',
radius: '70%', radius: '70%',
center: ['50%', '50%'], center: ['50%', '50%'],
color: ["#ffb22f", "#ff4954", "#01babb"], color: ["#ffb22f", "#ff4954", "#01babb"],
data: [ data: [{
{value: 75, name: '一院'}, value: 75,
{value: 60, name: '市中'}, name: '一院'
{value: 30, name: '武进南院'}, },
{value: 25, name: '阳湖院'}, {
{value: 30, name: '康复医院'}, value: 60,
{value: 20, name: '妇幼院'}, name: '市中'
{value: 25, name: '武中'}, },
{value: 18, name: '溧阳院'} {
].sort(function (a, b) { 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; return a.value - b.value;
}), }),
roseType: 'radius', roseType: 'radius',
@ -569,8 +563,7 @@
shadowColor: 'rgba(0, 0, 0, 0.5)' shadowColor: 'rgba(0, 0, 0, 0.5)'
} }
} }
} }]
]
}; };
var myChart3 = echarts.init(document.getElementById('ysbox')); var myChart3 = echarts.init(document.getElementById('ysbox'));
myChart3.setOption(option3); myChart3.setOption(option3);
@ -655,8 +648,7 @@
fontSize: '14px' fontSize: '14px'
} }
}, },
series: [ series: [{
{
type: 'bar', type: 'bar',
name: '陪护单数', name: '陪护单数',
data: [336, 150, 42, 156, 42, 30, 54, 45], data: [336, 150, 42, 156, 42, 30, 54, 45],
@ -678,9 +670,78 @@
option4 && myChart4.setOption(option4); 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);
</script> marker = null;
</body> 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> </html>

Loading…
Cancel
Save