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>
|