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 |