1.增加智慧运维可视化监控管理大屏模板
2.所有主题模板添加主页图片预览 3.大屏在线预览即将上线，尽请期待：）
郎大伟
BIN
智慧交通/大数据视频监控/大数据视频监控平台.png
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
智慧交通/旅游大数据/智慧旅游综合服务平台.png
Normal file
|
After Width: | Height: | Size: 940 KiB |
BIN
智慧交通/高速交通大数据分析平台/高速综合管控大数据平台.png
Normal file
|
After Width: | Height: | Size: 692 KiB |
BIN
智慧医疗/大数据医疗/大数据医疗服务平台.png
Normal file
|
After Width: | Height: | Size: 698 KiB |
BIN
智慧城市/大数据可视化展板通用模板/大数据可视化展板通用模板.png
Normal file
|
After Width: | Height: | Size: 2.6 MiB |
BIN
智慧城市/智慧工地/智慧工地.png
Normal file
|
After Width: | Height: | Size: 306 KiB |
BIN
智慧政务/土地交易大数据可视化平台/土地交易大数据可视化平台.png
Normal file
|
After Width: | Height: | Size: 1.1 MiB |
BIN
智慧政务/工商办税大数据监控平台/工商办税大数据监控平台.png
Normal file
|
After Width: | Height: | Size: 197 KiB |
BIN
智慧政务/智慧社区/智慧社区内网比对平台.png
Normal file
|
After Width: | Height: | Size: 447 KiB |
BIN
智慧政务/综合分析平台/综合分析平台.png
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
智慧政务/舆情分析/舆情分析平台.png
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
BIN
智慧气象/气象预报大数据平台/气象预报大数据平台.png
Normal file
|
After Width: | Height: | Size: 278 KiB |
BIN
智慧物流/智慧物流/智慧物流服务平台.png
Normal file
|
After Width: | Height: | Size: 638 KiB |
BIN
智慧物流/物流大数据服务平台/物流大数据服务平台.png
Normal file
|
After Width: | Height: | Size: 756 KiB |
BIN
智慧物联/新能源车联网综合大数据平台/车联网监控平台.png
Normal file
|
After Width: | Height: | Size: 2.1 MiB |
BIN
智慧物联/物联网平台数据统计/物联网监控平台.png
Normal file
|
After Width: | Height: | Size: 292 KiB |
BIN
智慧电商/电子商务公共服务平台大数据中心/电子商务公共服务平台大数据中心.png
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
BIN
智慧电商/运营大数据/运营大数据.png
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
BIN
智慧电商/销售大数据页面模板/生意参谋大数据可视化平台.png
Normal file
|
After Width: | Height: | Size: 3.1 MiB |
BIN
智慧运维/可视化监控管理/icon/legend.png
Normal file
|
After Width: | Height: | Size: 521 B |
BIN
智慧运维/可视化监控管理/icon/selectIcon.png
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
BIN
智慧运维/可视化监控管理/icon/xjt.png
Normal file
|
After Width: | Height: | Size: 193 B |
BIN
智慧运维/可视化监控管理/icon/上升趋势.png
Normal file
|
After Width: | Height: | Size: 476 B |
BIN
智慧运维/可视化监控管理/icon/下降趋势.png
Normal file
|
After Width: | Height: | Size: 486 B |
BIN
智慧运维/可视化监控管理/icon/区域完成数排名.png
Normal file
|
After Width: | Height: | Size: 445 B |
BIN
智慧运维/可视化监控管理/icon/区域完成率.png
Normal file
|
After Width: | Height: | Size: 509 B |
BIN
智慧运维/可视化监控管理/icon/区域报修数排名.png
Normal file
|
After Width: | Height: | Size: 396 B |
BIN
智慧运维/可视化监控管理/icon/展开.png
Normal file
|
After Width: | Height: | Size: 629 B |
BIN
智慧运维/可视化监控管理/icon/总指标.png
Normal file
|
After Width: | Height: | Size: 439 B |
BIN
智慧运维/可视化监控管理/icon/收起.png
Normal file
|
After Width: | Height: | Size: 619 B |
BIN
智慧运维/可视化监控管理/icon/考勤.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
智慧运维/可视化监控管理/icon/详细指标.png
Normal file
|
After Width: | Height: | Size: 439 B |
BIN
智慧运维/可视化监控管理/icon/预警.png
Normal file
|
After Width: | Height: | Size: 799 B |
BIN
智慧运维/可视化监控管理/icon/高亮图标大.png
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
BIN
智慧运维/可视化监控管理/icon/高亮图标小.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
228
智慧运维/可视化监控管理/index.html
Normal file
@ -0,0 +1,228 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>大屏展示</title>
|
||||||
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WSrX4bCfgcjTfhWNCwvfI1ZnQnfZDxFW"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="mapContainer"></div>
|
||||||
|
<div class="nav-top">
|
||||||
|
<span class="nav-top-title">可视化监控管理</span>
|
||||||
|
<div class="nav-top-time">
|
||||||
|
<span id="date">2018年11月30日</span>
|
||||||
|
<span id="time">星期五 15:34</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src="lib/loadingScript.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
//初始化地图
|
||||||
|
var map = new BMap.Map("mapContainer",{toolBarVisible:false});
|
||||||
|
var point = new BMap.Point(116.404, 39.915);
|
||||||
|
map.centerAndZoom(point, 12);
|
||||||
|
map.loaded = function () {
|
||||||
|
drawMap(mapData,map);
|
||||||
|
};
|
||||||
|
var map = new BMap.Map('mapContainer');
|
||||||
|
map.centerAndZoom(new BMap.Point(116.404, 40.10), 12);
|
||||||
|
|
||||||
|
var mapStyle ={
|
||||||
|
features: ["road", "building","water","land"],//隐藏地图上的poi
|
||||||
|
style : "midnight" //设置地图风格为高端黑
|
||||||
|
};
|
||||||
|
map.setMapStyle(mapStyle);
|
||||||
|
|
||||||
|
function checkhHtml5()
|
||||||
|
{
|
||||||
|
if (typeof(Worker) === "undefined")
|
||||||
|
{
|
||||||
|
if(navigator.userAgent.indexOf("MSIE 9.0")<=0)
|
||||||
|
{
|
||||||
|
alert("定制个性地图示例：IE9以下不兼容，推荐使用百度浏览器、chrome、firefox、safari、IE10");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
checkhHtml5();
|
||||||
|
|
||||||
|
//时间
|
||||||
|
var timer = null;
|
||||||
|
function setTime(){
|
||||||
|
if(timer !== null){
|
||||||
|
clearTimeout(timer);
|
||||||
|
}
|
||||||
|
setTimeout(function () {
|
||||||
|
$("#date").text(getTime()[0]);
|
||||||
|
$("#time").text(getTime()[1] +" "+ getTime()[2]);
|
||||||
|
setTime();
|
||||||
|
},1000);
|
||||||
|
}
|
||||||
|
setTime();
|
||||||
|
|
||||||
|
//legend 生成图例
|
||||||
|
function createLegend() {
|
||||||
|
var html = '';
|
||||||
|
html += '<div class="legend-container">';
|
||||||
|
html += '<div class="legend-content"><span><img src="icon/legend.png"/>运维区域</span></div>';
|
||||||
|
html += '<div class="legend-content"><span><span class="red-legend"></span><span style="font-size: 14px;">及时率</span></span><span><span class="green-legend"></span><span style="font-size: 14px;">完成率</span><span><span style="margin-right: -10px;"><img src="icon/高亮图标小.png"></span><span style="font-size: 14px;">高亮区域</span></span></span></div>';
|
||||||
|
html += '</div>';
|
||||||
|
$("body").append(html);
|
||||||
|
setLegendPos();
|
||||||
|
}
|
||||||
|
function setLegendPos() {
|
||||||
|
var $legendW = $("body").width() - (270 + 16) * 2;
|
||||||
|
$(".legend-container").css({
|
||||||
|
position:"fixed",
|
||||||
|
top:90,
|
||||||
|
left:296,
|
||||||
|
width:$legendW
|
||||||
|
});
|
||||||
|
}
|
||||||
|
createLegend();
|
||||||
|
|
||||||
|
|
||||||
|
//生成卡片
|
||||||
|
//总指标
|
||||||
|
var zhzb =
|
||||||
|
'<ul>' +
|
||||||
|
'<li><span class="zhzb-li-name">运维设备<span class="typeStyle">（个）</span></span><span class="zhzb-li-num">653212</span></li>' +
|
||||||
|
'<li><span class="zhzb-li-name">保修总数<span class="typeStyle">（个）</span></span><span class="zhzb-li-num">4321</span></li>' +
|
||||||
|
'<li><span class="zhzb-li-name">维修完成<span class="typeStyle">（个）</span></span><span class="zhzb-li-num">4213</span></li>' +
|
||||||
|
'<li><span class="zhzb-li-name">正在维修<span class="typeStyle">（个）</span></span><span class="zhzb-li-num">108</span></li>' +
|
||||||
|
'<li><span class="zhzb-li-name">维修及时率<span class="typeStyle">（%）</span></span><span class="zhzb-li-num">82.5</span></li>' +
|
||||||
|
'<li><span class="zhzb-li-name">维修完成率<span class="typeStyle">（%）</span></span><span class="zhzb-li-num">97.5</span></li>' +
|
||||||
|
'</ul>';
|
||||||
|
|
||||||
|
var zzb = new CreateTip({
|
||||||
|
id:"zongzhibiao",
|
||||||
|
titleName:"总指标",
|
||||||
|
icon:"icon/总指标.png",
|
||||||
|
pos:{position:"fixed",top:90,left:16},
|
||||||
|
width:270,
|
||||||
|
// html:zhzb
|
||||||
|
});
|
||||||
|
zzb.setData(zhzb);
|
||||||
|
|
||||||
|
//预警
|
||||||
|
var yujing =
|
||||||
|
'<ul>' +
|
||||||
|
'<li><span class="zhzb-li-name">IC卡</span><span class="zhzb-li-num"><span></span><span class="font-w yj-span">100</span></span></li>' +
|
||||||
|
'<li><span class="zhzb-li-name">报站器</span><span class="zhzb-li-num"><span><img src="icon/上升趋势.png"></span><span class="font-w yj-span">120</span></span></li>' +
|
||||||
|
'<li><span class="zhzb-li-name">定位设备</span><span class="zhzb-li-num"><span><img src="icon/下降趋势.png"></span><span class="font-w yj-span">80</span></span></li>' +
|
||||||
|
'</ul>';
|
||||||
|
var yj = new CreateTip({
|
||||||
|
id:"yujing",
|
||||||
|
titleName:"预警",
|
||||||
|
icon:"icon/预警.png",
|
||||||
|
pos:{position:"fixed",top:354,left:16},
|
||||||
|
width:270,
|
||||||
|
//html:yujing
|
||||||
|
});
|
||||||
|
yj.setData(yujing);
|
||||||
|
|
||||||
|
//考勤
|
||||||
|
var kaoqin =
|
||||||
|
'<ul>' +
|
||||||
|
'<li><span class="zhzb-li-name">正常</span><span class="zhzb-li-num">100</span></li>' +
|
||||||
|
'<li><span class="zhzb-li-name">迟到</span><span class="zhzb-li-num">2</span></li>' +
|
||||||
|
'<li><span class="zhzb-li-name">旷工</span><span class="zhzb-li-num">0</span></li>' +
|
||||||
|
'<li><span class="zhzb-li-name">缺卡</span><span class="zhzb-li-num">3</span></li>' +
|
||||||
|
'<li><span class="zhzb-li-name">休息</span><span class="zhzb-li-num">4</span></li>' +
|
||||||
|
'</ul>';
|
||||||
|
|
||||||
|
var kq = new CreateTip({
|
||||||
|
id:"kaoqin",
|
||||||
|
titleName:"考勤",
|
||||||
|
icon:"icon/考勤.png",
|
||||||
|
pos:{position:"fixed",top:530,left:16},
|
||||||
|
width:270,
|
||||||
|
// html:kaoqin
|
||||||
|
});
|
||||||
|
kq.setData(kaoqin);
|
||||||
|
|
||||||
|
//详细指标
|
||||||
|
var xxzb =
|
||||||
|
'<div id="qybxspm">' +
|
||||||
|
'' +
|
||||||
|
'</div>'+
|
||||||
|
'<div id="qywcspm">' +
|
||||||
|
'' +
|
||||||
|
'</div>'+
|
||||||
|
'<div id="qywclpm">' +
|
||||||
|
'' +
|
||||||
|
'</div>';
|
||||||
|
var xzb = new CreateTip({
|
||||||
|
id:"xxzb",
|
||||||
|
titleName:"详细指标",
|
||||||
|
icon:"icon/详细指标.png",
|
||||||
|
pos:{position:"fixed",top:90,right:16},
|
||||||
|
width:270,
|
||||||
|
// html:xxzb
|
||||||
|
});
|
||||||
|
xzb.setData(xxzb);
|
||||||
|
var qybxspm = new CreateSpeed({
|
||||||
|
id:"qybxspm",
|
||||||
|
icon:"icon/区域报修数排名.png",
|
||||||
|
title:"区域报修数排名",
|
||||||
|
max:1300
|
||||||
|
});
|
||||||
|
qybxspm.setData([
|
||||||
|
{"name":"中部","data":1123,"color":"#55DAED"},
|
||||||
|
{"name":"东部","data":904,"color":"#55B6ED"},
|
||||||
|
{"name":"西部","data":845,"color":"#3F80D2"},
|
||||||
|
{"name":"北部","data":756,"color":"#2B5DB8"},
|
||||||
|
{"name":"南部","data":684,"color":"#1864E3"}
|
||||||
|
]);
|
||||||
|
var qywcspm = new CreateSpeed({
|
||||||
|
id:"qywcspm",
|
||||||
|
icon:"icon/区域完成数排名.png",
|
||||||
|
title:"区域完成数排名",
|
||||||
|
max:1300
|
||||||
|
});
|
||||||
|
qywcspm.setData([
|
||||||
|
{"name":"中部","data":1103,"color":"#55DAED"},
|
||||||
|
{"name":"东部","data":864,"color":"#55B6ED"},
|
||||||
|
{"name":"西部","data":860,"color":"#3F80D2"},
|
||||||
|
{"name":"北部","data":618,"color":"#2B5DB8"},
|
||||||
|
{"name":"南部","data":596,"color":"#1864E3"}
|
||||||
|
]);
|
||||||
|
var qywclpm = new CreateSpeed({
|
||||||
|
id:"qywclpm",
|
||||||
|
icon:"icon/区域完成率.png",
|
||||||
|
title:"区域完成率排名",
|
||||||
|
max:null
|
||||||
|
});
|
||||||
|
qywclpm.setData([
|
||||||
|
{"name":"中部","data":"99.4%","color":"#55DAED"},
|
||||||
|
{"name":"东部","data":"98%","color":"#55B6ED"},
|
||||||
|
{"name":"西部","data":"88%","color":"#3F80D2"},
|
||||||
|
{"name":"北部","data":"86%","color":"#2B5DB8"},
|
||||||
|
{"name":"南部","data":"70%","color":"#1864E3"}
|
||||||
|
]);
|
||||||
|
|
||||||
|
//屏幕自适应适配
|
||||||
|
// window.resize = function () {
|
||||||
|
// setTop();
|
||||||
|
// };
|
||||||
|
// function setTop() {
|
||||||
|
// var $bodyH = $("body").height();
|
||||||
|
// var top = ($bodyH - 660 - 90)/3;
|
||||||
|
// if(top > 0){
|
||||||
|
// $("#zongzhibiao").css({
|
||||||
|
// top:top + 90
|
||||||
|
// });
|
||||||
|
// $("#yujing").css({
|
||||||
|
// top:top + 260 +94
|
||||||
|
// });
|
||||||
|
// $("#kaoqin").css({
|
||||||
|
// top:top + 430 +98
|
||||||
|
// });
|
||||||
|
// $("#xxzb").css({
|
||||||
|
// top:top + 90
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// setTop();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
96
智慧运维/可视化监控管理/js/drawMap.js
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
/**
|
||||||
|
* 地图渲染高亮区域
|
||||||
|
*/
|
||||||
|
var mapData = [
|
||||||
|
{
|
||||||
|
"name":"西部区域",
|
||||||
|
"peopleNum":80,
|
||||||
|
"chargeName":"张三",
|
||||||
|
"timely ":"80%",
|
||||||
|
"complete":"98%",
|
||||||
|
"lng":116.30357809450051,
|
||||||
|
"lat":39.90696803762701
|
||||||
|
|
||||||
|
},{
|
||||||
|
"name":"东部区域",
|
||||||
|
"peopleNum":102,
|
||||||
|
"chargeName":"李四",
|
||||||
|
"timely ":"90%",
|
||||||
|
"complete":"92%",
|
||||||
|
"lng":116.45429678343832,
|
||||||
|
"lat":39.91039161216257
|
||||||
|
},{
|
||||||
|
"name":"中部区域",
|
||||||
|
"peopleNum":110,
|
||||||
|
"chargeName":"王五",
|
||||||
|
"timely ":"86%",
|
||||||
|
"complete":"96%",
|
||||||
|
"lng":116.39198370361552,
|
||||||
|
"lat":39.914999999999985
|
||||||
|
},{
|
||||||
|
"name":"南部区域",
|
||||||
|
"peopleNum":76,
|
||||||
|
"chargeName":"赵四",
|
||||||
|
"timely ":"88%",
|
||||||
|
"complete":"92%",
|
||||||
|
"lng":116.39318533325387,
|
||||||
|
"lat":39.8459734273028
|
||||||
|
},{
|
||||||
|
"name":"北部区域",
|
||||||
|
"peopleNum":102,
|
||||||
|
"chargeName":"王二",
|
||||||
|
"timely ":"92%",
|
||||||
|
"complete":"96%",
|
||||||
|
"lng":116.39267034912311,
|
||||||
|
"lat":39.9697285689225
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
function drawMap(result,map) {
|
||||||
|
var overlays = [];
|
||||||
|
result.forEach(function (item,index) {
|
||||||
|
if(item["lng"] && item["lat"]){
|
||||||
|
var point = new BMap.Point(item["lng"],item["lat"]);
|
||||||
|
var marker = new BMap.Marker(point,{"data":item,"style":"highlightIcon","selectedStyle":"selectIcon"});
|
||||||
|
overlays.push(marker);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
map.addOverlays(overlays,function (event) {
|
||||||
|
overlays.forEach(function (item,index) {
|
||||||
|
map.changeOverlayStyle(item,"highlightIcon");
|
||||||
|
});
|
||||||
|
var clickOverlay = map.getOverlayByEvent(event);
|
||||||
|
map.changeOverlayStyle(clickOverlay,"selectIcon");
|
||||||
|
|
||||||
|
//信息窗口
|
||||||
|
var infoWindowPoint = clickOverlay.point;
|
||||||
|
// map.setCenter(infoWindowPoint);
|
||||||
|
var infoHtml =
|
||||||
|
'<div class="info-container">' +
|
||||||
|
'<div class="info-container-title">' +
|
||||||
|
'<span>'+clickOverlay["data"]["NAME"]+'</span>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="info-container-people">' +
|
||||||
|
'<span>人员总数：</span><span>'+clickOverlay["data"]["PEOPLENUM"]+'</span> <span>负责人：</span><span>'+clickOverlay["data"]["CHARGENAME"]+'</span>'+
|
||||||
|
'</div>' +
|
||||||
|
'<div class="info-container-speed">' +
|
||||||
|
'<div class="info-container-speed-content">' +
|
||||||
|
'<span class="info-container-speed-content-inside-1"></span>'+
|
||||||
|
'<span class="info-container-speed-content-inside-1-num">'+clickOverlay["data"]["TIMELY"]+'</span>'+
|
||||||
|
'</div>' +
|
||||||
|
'<div class="info-container-speed-content">' +
|
||||||
|
'<span class="info-container-speed-content-inside-2"></span>'+
|
||||||
|
'<span class="info-container-speed-content-inside-2-num">'+clickOverlay["data"]["COMPLETE"]+'</span>'+
|
||||||
|
'</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>';
|
||||||
|
var infoWindow=new BMap.InfoWindow(infoHtml);
|
||||||
|
map.openInfoWindow(infoWindow,infoWindowPoint);
|
||||||
|
$(".info-container-speed-content-inside-1").animate({
|
||||||
|
width:clickOverlay["data"]["TIMELY"]
|
||||||
|
},2000);
|
||||||
|
$(".info-container-speed-content-inside-2").animate({
|
||||||
|
width:clickOverlay["data"]["COMPLETE"]
|
||||||
|
},2000);
|
||||||
|
});
|
||||||
|
}
|
||||||
69
智慧运维/可视化监控管理/lib/createSpeed.js
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
/**
|
||||||
|
* 创建进度条 组件
|
||||||
|
*/
|
||||||
|
function CreateSpeed(option){
|
||||||
|
this.option = option;
|
||||||
|
this.isFirstLoad = true;
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
CreateSpeed.prototype = {
|
||||||
|
init:function () {
|
||||||
|
this.createSpeed();
|
||||||
|
},
|
||||||
|
createSpeed:function () {
|
||||||
|
var _view_ = this;
|
||||||
|
var html = '';
|
||||||
|
html += '<div id="'+_view_.option.id+'" class="speed-container">';
|
||||||
|
html += '<div class="speed-title">';
|
||||||
|
html += '<span><img src="'+_view_.option.icon+'"></span><span>'+_view_.option.title+'</span><span><img src="icon/xjt.png"></span>';
|
||||||
|
html += '</div>';
|
||||||
|
html += '<div class="speed-content">';
|
||||||
|
html += '<ul>';
|
||||||
|
|
||||||
|
html += '<ul>';
|
||||||
|
html += '</div>';
|
||||||
|
html += '</div>';
|
||||||
|
$("#"+_view_.option.id).append(html);
|
||||||
|
},
|
||||||
|
setData:function (series) {
|
||||||
|
var _view_ = this;
|
||||||
|
function toPoint(point){
|
||||||
|
var str=Number(point*100).toFixed(1);
|
||||||
|
str+="%";
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
var html = '';
|
||||||
|
series.forEach(function (item,index) {
|
||||||
|
html += '<li><span>'+item["name"]+'</span><span class="speed-line"><span id="'+_view_.option.id+index+'" class="speed-num" style="background-color: '+item["color"]+'"></span><span class="numText">'+item["data"]+'</span></span></li>';
|
||||||
|
});
|
||||||
|
$("#"+_view_.option.id + " ul").html(html);
|
||||||
|
|
||||||
|
//动画效果加载数据
|
||||||
|
if(_view_.isFirstLoad){
|
||||||
|
series.forEach(function (item,index) {
|
||||||
|
var dataNum = null;
|
||||||
|
if(_view_.option.max === null){
|
||||||
|
dataNum = item["data"];
|
||||||
|
}else{
|
||||||
|
dataNum = toPoint(item["data"]/_view_.option.max);
|
||||||
|
}
|
||||||
|
$("#"+_view_.option.id+index).animate({
|
||||||
|
width:dataNum
|
||||||
|
},2000);
|
||||||
|
});
|
||||||
|
_view_.isFirstLoad = false;
|
||||||
|
}else{
|
||||||
|
series.forEach(function (item,index) {
|
||||||
|
var dataNum = null;
|
||||||
|
if(_view_.option.max === null){
|
||||||
|
dataNum = item["data"];
|
||||||
|
}else{
|
||||||
|
dataNum = toPoint(item["data"]/_view_.option.max);
|
||||||
|
}
|
||||||
|
$("#"+_view_.option.id+index).width({
|
||||||
|
width:dataNum
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
46
智慧运维/可视化监控管理/lib/createTip.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
/**
|
||||||
|
* 生成卡片窗口
|
||||||
|
*/
|
||||||
|
function CreateTip(option){
|
||||||
|
this.option = option;
|
||||||
|
this.drop = false;
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
CreateTip.prototype = {
|
||||||
|
init:function () {
|
||||||
|
this.createContainer();
|
||||||
|
},
|
||||||
|
createContainer:function () {
|
||||||
|
var _view_ = this;
|
||||||
|
var html = '';
|
||||||
|
html += '<div id="'+_view_.option.id+'" class="tip-container" style="width: '+_view_.option.width+'px;">';
|
||||||
|
html += '<div class="tip-title"><span><img src="'+_view_.option.icon+'"/></span><span>'+_view_.option.titleName+'</span><span class="tip-dropDown"><img src="icon/收起.png"/></span></div>';
|
||||||
|
html += '<div class="tip-content">';
|
||||||
|
// html += _view_.option.html;
|
||||||
|
html += '</div>';
|
||||||
|
html += '</div>';
|
||||||
|
$("body").append(html);
|
||||||
|
var $container = $("#"+_view_.option.id);
|
||||||
|
$container.css(_view_.option.pos);
|
||||||
|
var $containerW = $container.width() - 32;
|
||||||
|
$("#"+_view_.option.id+" .tip-content").width($containerW);
|
||||||
|
|
||||||
|
$("#"+_view_.option.id+" .tip-dropDown").bind("click",function () {
|
||||||
|
var $tipContent = $("#"+_view_.option.id+" .tip-content");
|
||||||
|
if(!_view_.drop){
|
||||||
|
$tipContent.slideUp();
|
||||||
|
$(this).find("img").attr("src","icon/展开.png");
|
||||||
|
_view_.drop = true;
|
||||||
|
}else{
|
||||||
|
$tipContent.slideDown();
|
||||||
|
$(this).find("img").attr("src","icon/收起.png");
|
||||||
|
_view_.drop = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setData:function (htmlText) {
|
||||||
|
var _view_ = this;
|
||||||
|
$("#"+_view_.option.id+" .tip-content").html(htmlText);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
26
智慧运维/可视化监控管理/lib/getTime.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
/**
|
||||||
|
* 时间更新模块
|
||||||
|
*/
|
||||||
|
function getTime(){
|
||||||
|
var week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
||||||
|
var localToday = '';
|
||||||
|
var d = new Date();
|
||||||
|
localToday = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日";
|
||||||
|
var time = '';
|
||||||
|
var hh = d.getHours(); //时
|
||||||
|
var mm = d.getMinutes(); //分
|
||||||
|
var ss = d.getSeconds();
|
||||||
|
if(hh < 10)
|
||||||
|
time += "0";
|
||||||
|
|
||||||
|
time += hh + ":";
|
||||||
|
|
||||||
|
if (mm < 10) time += '0';
|
||||||
|
time += mm + ":";
|
||||||
|
|
||||||
|
if (ss < 10) time += '0';
|
||||||
|
time += ss;
|
||||||
|
|
||||||
|
|
||||||
|
return {0:localToday ,1:week[d.getDay()],2:time }
|
||||||
|
}
|
||||||
5
智慧运维/可视化监控管理/lib/jquery.min.js
vendored
Normal file
42
智慧运维/可视化监控管理/lib/loadingScript.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
/**
|
||||||
|
* @author lishuaiwu
|
||||||
|
* @module 加载所以文件
|
||||||
|
*/
|
||||||
|
(function() {
|
||||||
|
/**
|
||||||
|
* 获取当前文件的路径
|
||||||
|
*
|
||||||
|
* Returns: {String} 当前脚本文件路径
|
||||||
|
*/
|
||||||
|
//动态加载css
|
||||||
|
function dynamicLoadCss(url) {
|
||||||
|
var head = document.getElementsByTagName('head')[0];
|
||||||
|
var link = document.createElement('link');
|
||||||
|
link.type = 'text/css';
|
||||||
|
link.rel = 'stylesheet';
|
||||||
|
link.href = url;
|
||||||
|
head.appendChild(link);
|
||||||
|
}
|
||||||
|
var cssFiles = [
|
||||||
|
"style/cssFile.css"
|
||||||
|
];
|
||||||
|
var cssTags = new Array(cssFiles.length);
|
||||||
|
for (var k = 0, len = cssTags.length; k < len; k++) {
|
||||||
|
dynamicLoadCss(cssFiles[k]);
|
||||||
|
}
|
||||||
|
// 加载所有js文件
|
||||||
|
var jsFiles = [
|
||||||
|
"http://www.jq22.com/jquery/jquery-1.10.2.js",
|
||||||
|
"lib/getTime.js",
|
||||||
|
"lib/createTip.js",
|
||||||
|
"lib/createSpeed.js",
|
||||||
|
"js/drawMap.js"
|
||||||
|
];
|
||||||
|
var scriptTags = new Array(jsFiles.length);
|
||||||
|
for (var i = 0, len = jsFiles.length; i < len; i++) {
|
||||||
|
scriptTags[i] = "<script type='text/javascript' src='"+ jsFiles[i] + "' ></script>";
|
||||||
|
}
|
||||||
|
if (scriptTags.length > 0) {
|
||||||
|
document.write(scriptTags.join(""));
|
||||||
|
}
|
||||||
|
})();
|
||||||
298
智慧运维/可视化监控管理/style/cssFile.css
Normal file
@ -0,0 +1,298 @@
|
|||||||
|
html,body{
|
||||||
|
padding:0;
|
||||||
|
margin: 0;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
font-family: 微软雅黑;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
ul,li,img{
|
||||||
|
padding:0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.BMap_cpyCtrl
|
||||||
|
{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.anchorBL{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mapContainer{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
.nav-top{
|
||||||
|
position: fixed;
|
||||||
|
top:0;
|
||||||
|
left: 0;
|
||||||
|
height: 80px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(3,21,24,0.7);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.nav-top-title{
|
||||||
|
line-height: 80px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav-top-time{
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
right: 10px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.nav-top-time span{
|
||||||
|
display: block;
|
||||||
|
color:#ffffff;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-container{
|
||||||
|
background-color: rgba(22, 31, 38, 0.87);
|
||||||
|
|
||||||
|
}
|
||||||
|
.tip-title{
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
color:#ffffff;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 1px solid #052025;
|
||||||
|
}
|
||||||
|
.tip-title span{
|
||||||
|
line-height: 48px;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.tip-title span img{
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
.tip-title span:nth-child(1){
|
||||||
|
float: left;
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
.tip-title span:nth-child(2){
|
||||||
|
float: left;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.tip-title span:nth-child(3){
|
||||||
|
float: right;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.tip-content{
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-content ul li {
|
||||||
|
color:#ffffff;
|
||||||
|
list-style: none;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhzb-li-name{
|
||||||
|
float: left;
|
||||||
|
/*font-weight: 600;*/
|
||||||
|
}
|
||||||
|
.zhzb-li-num{
|
||||||
|
float: right;
|
||||||
|
color:#00CEFA;
|
||||||
|
/*font-weight: 600;*/
|
||||||
|
}
|
||||||
|
.typeStyle{
|
||||||
|
color:#1079A6;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.font-w{
|
||||||
|
color: #ffffff!important;
|
||||||
|
}
|
||||||
|
.yj-span{
|
||||||
|
display: block;
|
||||||
|
width: 30px;
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.speed-container{
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 1px solid #052025;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
.speed-container .speed-title{
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
.speed-container .speed-title span{
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
color: #ffffff;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
.speed-content{
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.speed-content ul{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.speed-content ul li{
|
||||||
|
width: 100%;
|
||||||
|
list-style: none;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.speed-content ul li span:nth-child(1){
|
||||||
|
display: block;
|
||||||
|
/*height: 20px;*/
|
||||||
|
float: left;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
/*line-height: 20px;*/
|
||||||
|
}
|
||||||
|
.speed-content ul li span:nth-child(2){
|
||||||
|
display: block;
|
||||||
|
/*height: 20px;*/
|
||||||
|
float: right;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
/*line-height: 20px;*/
|
||||||
|
}
|
||||||
|
.speed-line{
|
||||||
|
width: 200px;
|
||||||
|
background-color: #043037;
|
||||||
|
height: 13px;
|
||||||
|
margin-top: 8px!important;
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.speed-num{
|
||||||
|
/*width: 90%;*/
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.numText{
|
||||||
|
position: absolute;
|
||||||
|
top: -9px;
|
||||||
|
right: 4px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-container{
|
||||||
|
height: 48px;
|
||||||
|
background-color: rgba(22, 31, 38, 0.87);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.legend-content{
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.legend-content:nth-child(1){
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.legend-content:nth-child(2){
|
||||||
|
float: right;
|
||||||
|
font-size: 14px!important;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
.legend-content span{
|
||||||
|
line-height: 48px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.legend-content span img{
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-top: -4px;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-content:nth-child(2) span{
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-legend{
|
||||||
|
height: 8px;
|
||||||
|
width: 30px;
|
||||||
|
background-color: #FF3774;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.green-legend{
|
||||||
|
height: 8px;
|
||||||
|
width: 30px;
|
||||||
|
background-color: #6AE89C;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-dropDown{
|
||||||
|
|
||||||
|
}
|
||||||
|
.tip-dropDown:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-container{
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.info-container-title{
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.info-container-people{
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.info-container-speed{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.info-container-speed-content{
|
||||||
|
width: 204px;
|
||||||
|
margin-left: 18px;
|
||||||
|
background-color: #58618A;
|
||||||
|
height: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.info-container-speed-content-inside-1{
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #FF3774;
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
.info-container-speed-content-inside-2{
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #6AE89C;
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
.info-container-speed-content-inside-1-num{
|
||||||
|
position: absolute;
|
||||||
|
top: 54px;
|
||||||
|
left: 110px;
|
||||||
|
}
|
||||||
|
.info-container-speed-content-inside-2-num{
|
||||||
|
position: absolute;
|
||||||
|
top: 80px;
|
||||||
|
left: 110px;
|
||||||
|
|
||||||
|
}
|
||||||
BIN
智慧运维/可视化监控管理/可视化监控管理平台.png
Normal file
|
After Width: | Height: | Size: 1.8 MiB |
BIN
智慧运维/大数据统计展示大屏/大数据统计展示大屏.png
Normal file
|
After Width: | Height: | Size: 1.7 MiB |
BIN
智慧运维/大数据运维总览图/大数据运维总览图.png
Normal file
|
After Width: | Height: | Size: 354 KiB |
BIN
智慧运维/设备环境监测平台/设备环境监测平台.png
Normal file
|
After Width: | Height: | Size: 394 KiB |
BIN
智慧运营/厅店效能大屏监控看板/厅店效能大屏监控看板.png
Normal file
|
After Width: | Height: | Size: 881 KiB |
BIN
智慧金融/银行企业信用风险实时监测/银行企业信用风险实时监测平台.png
Normal file
|
After Width: | Height: | Size: 351 KiB |