253 lines
9.1 KiB
Plaintext
253 lines
9.1 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8"%>
|
||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||
<!DOCTYPE html>
|
||
<!-- <html lang="zh-CN"> -->
|
||
<!-- BEGIN HEAD -->
|
||
<head>
|
||
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
<style>
|
||
.legend {
|
||
width:10rem;
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 10px;
|
||
text-align:center;
|
||
}
|
||
.legend-item{
|
||
width: 100%;
|
||
border-radius: 0.8rem;
|
||
}
|
||
.legend-text{
|
||
width: 100%;
|
||
height: 20px;
|
||
padding: 5px;
|
||
}
|
||
.efficiencySelect{
|
||
width:10rem;
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 10px;
|
||
text-align:center;
|
||
}
|
||
body {
|
||
overflow-x: auto;
|
||
overflow-y: auto;
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
var canvas;
|
||
var context;
|
||
var height;
|
||
var width;
|
||
var beauty;
|
||
var beautyPng;
|
||
var colors = ["RGBA(251,255,205,0.8)","RGBA(250,232,126,0.8)",
|
||
"RGBA(252,203,84,0.8)", "RGBA(251,169,97,0.8)",
|
||
"RGBA(232,75,34,0.8)","RGBA(175,0,18,0.8)"];
|
||
|
||
var masterId='';
|
||
var tbName='tb_efficiency_overviewConfigure_file'; //数据表
|
||
//获取url地址根目录 当前taomcat下路径
|
||
function getRootPath(){
|
||
var pathName = window.location.pathname.substring(1);
|
||
// var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
|
||
return window.location.protocol + '//' + window.location.host;
|
||
}
|
||
var picId="";
|
||
$(function () {
|
||
//type=1为热力图
|
||
$.post(ext.contextPath + '/efficiency/efficiencyOverviewConfigure/getJson.do', {unitId:unitId,type:"1"} , function(data) {
|
||
if(data.length>0){
|
||
masterId=data[0].id;
|
||
var upperlimit=data[0].upperlimit;
|
||
var lowerlimit=data[0].lowerlimit;
|
||
var grade=data[0].grade;
|
||
load(masterId);
|
||
$(window).resize(function(){
|
||
load(masterId);
|
||
});
|
||
for(var a=0;a<data.length;a++){
|
||
$("#efficiencySelect").append("<option value='"+data[a].id+"'>"+data[a].name+"</option>");
|
||
}
|
||
}
|
||
},'json');
|
||
});
|
||
function windowToCanvas(e) {
|
||
var x = e.x || e.clientX,
|
||
y = e.y || e.clientY,
|
||
bbox = canvas.getBoundingClientRect();
|
||
|
||
return { x: x - bbox.left * (canvas.width / bbox.width),
|
||
y: y - bbox.top * (canvas.height / bbox.height)
|
||
};
|
||
}
|
||
function drawBeauty(){
|
||
context.save();
|
||
context.drawImage(beauty, 0, 0, height/860*1690, height);
|
||
//点击获取坐标
|
||
canvas.onmousedown = function (e) {
|
||
var loc = windowToCanvas(e);
|
||
e.preventDefault(); // prevent cursor change
|
||
var lnglat = new Array;
|
||
lnglat[0]=loc.x;
|
||
lnglat[1]=loc.y;
|
||
console.log(lnglat);
|
||
};
|
||
}
|
||
function drawData(data){
|
||
//data = _.orderBy(data, "count",'desc');
|
||
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
|
||
context.drawImage(beauty, 0, 0, height/860*1690, height);
|
||
//定位等比例调整，目前基于本地电脑846高度确定定位
|
||
//var scale = context.canvas.height/846;
|
||
var scale = height/860;
|
||
var legend = "";
|
||
legend = '<div class="legend-item" style="background-color:#AF0012;"><span class="legend-text" style="color:#fff;">8以上</span></div>'+
|
||
'<div class="legend-item" style="background-color:#E84B22;"><span class="legend-text" style="color:#fff;">6~8</span></div>'+
|
||
'<div class="legend-item" style="background-color:#FBA961;"><span class="legend-text">4~6</span></div>'+
|
||
'<div class="legend-item" style="background-color:#FAE87E;"><span class="legend-text">2~4</span></div>'+
|
||
'<div class="legend-item" style="background-color:#FBFFCD;"><span class="legend-text">0~2</span></div>';
|
||
$("#legend").html(legend);
|
||
if(data!=null && data!=undefined && data!=''){
|
||
context.save();
|
||
for(var i=0;i<data.length;i++){
|
||
var count = data[i].count;
|
||
var color="RGBA(175,0,18,0.8)";
|
||
//根据数据与最大值比例选择区域颜色
|
||
if(count>8){
|
||
color = colors[5];
|
||
};
|
||
if(count>6 && count<=8){
|
||
color = colors[4];
|
||
}
|
||
if(count>4 && count<=6){
|
||
color = colors[3];
|
||
}
|
||
if(count>2 && count<=4){
|
||
color = colors[1];
|
||
}
|
||
if(count<=2){
|
||
color = colors[0];
|
||
}
|
||
//绘制区域颜色
|
||
context.fillStyle = color;
|
||
context.strokeStyle = "RGBA(232,75,34,0.6)";
|
||
context.lineWidth=3;
|
||
//绘制区域开始
|
||
context.beginPath();
|
||
if(data[i].lnglats!=null
|
||
&& data[i].lnglats!=undefined
|
||
&& data[i].lnglats!=''){
|
||
var lnglats = eval(data[i].lnglats);
|
||
for(var a=0;a<lnglats.length;a++){
|
||
if(a==0){
|
||
//绘制区域初始坐标点
|
||
context.moveTo(lnglats[a][0]*scale, lnglats[a][1]*scale);
|
||
}else{
|
||
//绘制区域后续坐标点
|
||
context.lineTo(lnglats[a][0]*scale, lnglats[a][1]*scale);
|
||
}
|
||
}
|
||
}
|
||
//绘制区域结束
|
||
context.closePath();
|
||
context.fill();
|
||
context.stroke();
|
||
}
|
||
context.save();
|
||
context.drawImage(beautyPng, 0, 0, height/860*1690, height);
|
||
}
|
||
}
|
||
function load(masterId){
|
||
$.post(ext.contextPath + '/base/getInputFileList.do', {masterId:masterId,tbName:tbName} , function(data) {
|
||
if(data.length>0){
|
||
var abspath=data[0].abspath.split('webapps');
|
||
picId=data[0].id;
|
||
canvas = document.getElementById("canvas");
|
||
context = canvas.getContext('2d');
|
||
height = $(window).height();
|
||
beauty = new Image();
|
||
beauty.src = ""+getRootPath()+""+abspath[1]+"";
|
||
beautyPng = new Image();
|
||
abspath = data[1].abspath.split('webapps');
|
||
beautyPng.src = ""+getRootPath()+""+abspath[1]+"";
|
||
//整体区域
|
||
$("#map").height(height);
|
||
$("#map").width(height/860*1690);
|
||
$("body").width(height/860*1690);
|
||
|
||
width = $(window).width();
|
||
document.getElementById('canvas').width=height/860*1690;
|
||
document.getElementById('canvas').height=height;
|
||
if(beauty.complete){
|
||
drawBeauty();
|
||
doMapData(picId);
|
||
}else{
|
||
beauty.onload = function(){
|
||
drawBeauty();
|
||
doMapData(picId);
|
||
};
|
||
beauty.onerror = function(){
|
||
alert('加载失败，请重试');
|
||
};
|
||
};
|
||
}
|
||
},'json');
|
||
|
||
}
|
||
function doMapData(picId){
|
||
$.post(ext.contextPath + '/efficiency/efficiencyOverviewMpConfigure/getJson.do', {picId:picId,unitId:unitId} , function(mpdata) {
|
||
if(mpdata.length>0){
|
||
var list = new Array;
|
||
for(var m=0;m<mpdata.length;m++){
|
||
var lnglats= "["+mpdata[m].lnglats+"]";
|
||
var arr ={
|
||
"count" : mpdata[m].showParmValue,
|
||
"lnglats" : lnglats,
|
||
}
|
||
list.push(arr);
|
||
}
|
||
drawData(list);
|
||
}
|
||
},'json');
|
||
//手动测试
|
||
/* var list =[
|
||
{"count":1,"name":"2#鼓风机房","lnglats":[[765, 138],[791, 139],[791, 209],[765, 210]]}
|
||
,{"count":5,"name":"1#鼓风机房","lnglats":[[862, 243],[927, 243],[927, 394],[862, 395]]}
|
||
,{"count":12,"name":"污泥脱水机房","lnglats":[[1060, 79],[1204, 80],[1204, 145],[1060, 145]]}
|
||
[ [118, 514],[210, 514],[209, 659],[118, 659]]
|
||
[[276, 570],[342, 571],[341, 648],[277, 649]]
|
||
[[415, 514],[450, 513],[450, 661],[426, 663],[425, 627],[416, 626]]
|
||
[[1618, 585],[1650, 585],[1650, 672],[1618, 670]]
|
||
];
|
||
drawData(list); */
|
||
|
||
}
|
||
</script>
|
||
</head>
|
||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||
<div class="wrapper">
|
||
<div class="content-wrapper">
|
||
<!-- Main content -->
|
||
<section class="content container-fluid" style="padding:0;">
|
||
<div id="mainAlertdiv"></div>
|
||
<div id="subDiv"></div>
|
||
<div role="tabpanel" class="tab-pane map active" id="map">
|
||
<canvas id="canvas"></canvas>
|
||
<div class="legend" id="legend"></div>
|
||
<div class="efficiencySelect">
|
||
<select class="form-control" id="efficiencySelect" onchange="load(this.value)"></select>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- /.content -->
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |