583 lines
27 KiB
Plaintext
583 lines
27 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" %>
|
||
<%@page import="com.sipai.entity.scada.MPoint" %>
|
||
<%request.setAttribute("Flag_Enable", MPoint.Flag_Enable);%>
|
||
<%request.setAttribute("Flag_Disable", MPoint.Flag_Disable);%>
|
||
<!DOCTYPE html>
|
||
<!-- <html lang="zh-CN"> -->
|
||
<!-- BEGIN HEAD -->
|
||
<head>
|
||
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
||
</title>
|
||
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
<!-- echarts-->
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
|
||
charset="utf-8"></script>
|
||
<!-- 引入daterangepicker-->
|
||
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
||
charset="utf-8"></script>
|
||
<script type="text/javascript"
|
||
src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
|
||
charset="utf-8"></script>
|
||
<!-- bootstrap switch -->
|
||
<link rel="stylesheet"
|
||
href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"/>
|
||
<script type="text/javascript"
|
||
src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js"
|
||
charset="utf-8"></script>
|
||
|
||
<script type="text/javascript">
|
||
var beginTimeStore = '';
|
||
var endTimeStore = '';
|
||
$(function () {
|
||
|
||
var tree = false;
|
||
|
||
//判断是否有配置
|
||
$.post(ext.contextPath + '/efficiency/constituteConfigureScheme/getTreeJson.do', {
|
||
unitId: unitId
|
||
}, function (result) {
|
||
console.log(result)
|
||
if (result.length > 0) {
|
||
document.getElementById('closeImage').style.display = 'block'
|
||
document.getElementById('openImage').style.display = 'none'
|
||
|
||
var windowghight = $(window).height();
|
||
$('#mainDiv').attr("style", "height:" + windowghight + "px;width:100%;padding-top:20px;");
|
||
|
||
beginTimeStore = moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm');
|
||
endTimeStore = moment().subtract(0, 'days').format('YYYY-MM-DD HH:mm');
|
||
|
||
var locale = {
|
||
"format": 'YYYY-MM-DD HH:mm',
|
||
"separator": "~",
|
||
"applyLabel": "确定",
|
||
"cancelLabel": "取消",
|
||
"fromLabel": "起始时间",
|
||
"toLabel": "结束时间'",
|
||
"customRangeLabel": "自定义",
|
||
"weekLabel": "W",
|
||
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
||
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||
"firstDay": 1
|
||
};
|
||
$('#reservationtime').daterangepicker({
|
||
timePicker: false,
|
||
timePicker24Hour: false,
|
||
linkedCalendars: false,
|
||
autoUpdateInput: false,
|
||
showDropdowns: true,
|
||
locale: locale,
|
||
//汉化按钮部分
|
||
ranges: {
|
||
'本月': [moment().startOf('month'), moment().endOf('month').subtract(0, 'month')],
|
||
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').subtract(0, 'month')]
|
||
},
|
||
startDate: beginTimeStore,
|
||
endDate: endTimeStore
|
||
}, function (start, end, label) {
|
||
beginTimeStore = start.format(this.locale.format);
|
||
endTimeStore = end.format(this.locale.format);
|
||
if (!this.startDate) {
|
||
this.element.val('');
|
||
} else {
|
||
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
|
||
}
|
||
// dosearch();
|
||
});
|
||
$('#reservationtime').val(beginTimeStore + locale.separator + endTimeStore);
|
||
|
||
|
||
$("#schemeTree").empty();
|
||
var selelct_ = $("#schemeTree").select2({
|
||
data: result,
|
||
cache: false,
|
||
placeholder: '请选择',//默认文字提示
|
||
allowClear: false,//允许清空
|
||
escapeMarkup: function (markup) {
|
||
return markup;
|
||
}, // 自定义格式化防止xss注入
|
||
language: "zh-CN",
|
||
minimumInputLength: 0,
|
||
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
||
formatResult: function formatRepo(repo) {
|
||
return repo.text;
|
||
}, // 函数用来渲染结果
|
||
formatSelection: function formatRepoSelection(repo) {
|
||
return repo.text;
|
||
} // 函数用于呈现当前的选择
|
||
});
|
||
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'})
|
||
selelct_.val(result[0].id).trigger("change");
|
||
selelct_.on("change", function (e) {
|
||
dosearch();
|
||
});
|
||
|
||
dosearch();
|
||
} else {
|
||
document.getElementById('db').style.display = 'none'
|
||
document.getElementById('fx').style.display = 'none'
|
||
document.getElementById('openImage').style.display = 'block'
|
||
document.getElementById('closeImage').style.display = 'none'
|
||
}
|
||
}, 'json');
|
||
|
||
|
||
});
|
||
|
||
function dosearch() {
|
||
dodata1();
|
||
dochart2(0);
|
||
}
|
||
|
||
|
||
var color = [
|
||
"#2ec7c9",
|
||
"#b6a2de",
|
||
"#5ab1ef",
|
||
"#ffb980",
|
||
"#d87a80",
|
||
"#8d98b3",
|
||
"#e5cf0d",
|
||
"#97b552",
|
||
"#95706d",
|
||
"#dc69aa",
|
||
"#07a2a4",
|
||
"#9a7fd1",
|
||
"#588dd5",
|
||
"#f5994e",
|
||
"#c05050",
|
||
"#59678c",
|
||
"#c9ab00",
|
||
"#7eb00a",
|
||
"#6f5553",
|
||
"#c14089"
|
||
];
|
||
|
||
var jsondata1 = ""
|
||
|
||
function dodata1() {
|
||
$.post(ext.contextPath + '/efficiency/constitute/getCompanyEnergy.do', {
|
||
unitId: unitId,
|
||
sid:$('#schemeTree').val(),
|
||
sdt: beginTimeStore,
|
||
edt: endTimeStore
|
||
}, function (result) {
|
||
// console.log(result);
|
||
jsondata1 = result;
|
||
dochart1(-1);
|
||
dotable1();
|
||
dotable2(0);
|
||
}, 'json');
|
||
|
||
}
|
||
|
||
let option1 = "";
|
||
let myChart1 = "";
|
||
|
||
function dochart1(num) {
|
||
var legendData = [];
|
||
var seriesData1 = [];
|
||
var seriesData2 = [];
|
||
|
||
if (num == -1) {
|
||
for (var i = 0; i < jsondata1.length; i++) {
|
||
legendData.push(jsondata1[i].name);
|
||
seriesData1.push({
|
||
value: jsondata1[i].value,
|
||
name: jsondata1[i].name
|
||
})
|
||
for (var j = 0; j < jsondata1[i].children.length; j++) {
|
||
legendData.push(jsondata1[i].children[j].name);
|
||
seriesData2.push({
|
||
value: jsondata1[i].children[j].value,
|
||
name: jsondata1[i].children[j].name
|
||
})
|
||
}
|
||
}
|
||
} else {
|
||
legendData.push(jsondata1[num].name);
|
||
seriesData1.push({
|
||
value: jsondata1[num].value,
|
||
name: jsondata1[num].name
|
||
})
|
||
for (var j = 0; j < jsondata1[num].children.length; j++) {
|
||
legendData.push(jsondata1[num].children[j].name);
|
||
seriesData2.push({
|
||
value: jsondata1[num].children[j].value,
|
||
name: jsondata1[num].children[j].name
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
myChart1 = echarts.init(document.getElementById("chart1"));
|
||
option1 = {
|
||
color: color,
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
show: true,
|
||
type: 'scroll',
|
||
orient: 'vertical',
|
||
left: 10,
|
||
data: legendData
|
||
},
|
||
series: [
|
||
{
|
||
name: '全厂能耗(kWh)',
|
||
type: 'pie',
|
||
selectedMode: 'single',
|
||
center: ['55%', '50%'],
|
||
radius: [0, '40%'],
|
||
label: {
|
||
normal: {
|
||
position: 'inner'
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false
|
||
}
|
||
},
|
||
data: seriesData1
|
||
},
|
||
{
|
||
name: '全厂能耗(kWh)',
|
||
type: 'pie',
|
||
center: ['55%', '50%'],
|
||
radius: ['50%', '65%'],
|
||
// label: {
|
||
// normal: {
|
||
// formatter: ' {b|{b}：}\n {per|{d}%}',
|
||
// backgroundColor: '#eee',
|
||
// borderColor: '#aaa',
|
||
// borderWidth: 1,
|
||
// borderRadius: 4,
|
||
// rich: {
|
||
// b: {
|
||
// fontSize: 12,
|
||
// align: 'left',
|
||
// lineHeight: 20
|
||
// },
|
||
// per: {
|
||
// align: 'left',
|
||
// color: '#eee',
|
||
// backgroundColor: '#334455',
|
||
// padding: [2, 4],
|
||
// borderRadius: 2
|
||
// }
|
||
// }
|
||
// }
|
||
// },
|
||
data: seriesData2
|
||
}
|
||
]
|
||
};
|
||
myChart1.setOption(option1, true);
|
||
}
|
||
|
||
function dochart2(num) {
|
||
$.post(ext.contextPath + '/efficiency/constitute/getLineData.do', {
|
||
unitId: unitId,
|
||
sid:$('#schemeTree').val(),
|
||
sdt: beginTimeStore,
|
||
edt: endTimeStore,
|
||
num: num
|
||
}, function (result) {
|
||
var series = [];
|
||
var yAxis = [];
|
||
var legenddata = [];
|
||
|
||
for (var i = 0; i < result.length; i++) {
|
||
series.push({
|
||
data: result[i].data,
|
||
symbol: 'none',
|
||
name: result[i].parmname,
|
||
type: 'line',
|
||
lineStyle: {
|
||
width: 2
|
||
}
|
||
})
|
||
legenddata.push(result[i].parmname);
|
||
}
|
||
yAxis.push({
|
||
type: 'value',
|
||
name: false,
|
||
splitLine: {
|
||
show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||
},
|
||
scale: true//设置成 true 后坐标刻度不会强制包含零刻度。
|
||
});
|
||
|
||
var myChart = echarts.init(document.getElementById("chart2"));
|
||
var option = {
|
||
color: color,
|
||
animation: false,
|
||
legend: {
|
||
type: 'scroll',
|
||
data: legenddata,
|
||
left: 'center'
|
||
},
|
||
grid: {
|
||
left: '4%', // 与容器左侧的距离
|
||
right: '4%', // 与容器右侧的距离
|
||
top: '8%', // 与容器顶部的距离
|
||
//bottom: '5%', // 与容器底部的距离
|
||
containLabel: true
|
||
},
|
||
// toolbox: {
|
||
// feature: {
|
||
// saveAsImage: {show: true}
|
||
// }
|
||
// },
|
||
xAxis: {
|
||
type: 'time'
|
||
},
|
||
yAxis: yAxis,
|
||
series: series,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params, ticket, callback) {
|
||
var htmlStr = '';
|
||
for (var i = 0; i < params.length; i++) {
|
||
var param = params[i];
|
||
// console.log(param);
|
||
var xName = param.name;//x轴的名称
|
||
var seriesName = param.seriesName;//图例名称
|
||
var xvalue = param.value[0];//x轴值
|
||
var yvalue = param.value[1];//y轴值
|
||
var remarkvalue = param.value[2];//备注轴值
|
||
var color = param.color;//图例颜色
|
||
var dataIndex = param.dataIndex;
|
||
var seriesIndex = param.seriesIndex;
|
||
htmlStr += '<div>';
|
||
if (i == 0) {
|
||
htmlStr += xvalue + '<br/>';
|
||
}
|
||
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
|
||
htmlStr += seriesName + ':' + yvalue + '';
|
||
htmlStr += '</div>';
|
||
}
|
||
return htmlStr;
|
||
}
|
||
// alwaysShowContent:true,
|
||
},
|
||
dataZoom: [{
|
||
type: 'inside',
|
||
start: 0,
|
||
end: 100
|
||
}, {
|
||
start: 0,
|
||
end: 100,
|
||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||
handleSize: '60%',
|
||
height: '25px',
|
||
handleStyle: {
|
||
color: '#fff',
|
||
shadowBlur: 3,
|
||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||
shadowOffsetX: 2,
|
||
shadowOffsetY: 2
|
||
}
|
||
}]
|
||
};
|
||
// console.log(option);
|
||
myChart.setOption(option, true);
|
||
|
||
}, 'json');
|
||
}
|
||
|
||
function dotable1() {
|
||
var html = "";
|
||
html += "<table style='height:100%;width: 100%;border-collapse: collapse;'>";
|
||
html += "<tr style='width:100%;height:40px;background-color:#E3E4E6;'>";
|
||
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>用能单位</td>";
|
||
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>实际值</td>";
|
||
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>基准值</td>";
|
||
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>节约值</td>";
|
||
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>节约率(%)</td>";
|
||
html += "</tr>";
|
||
for (var i = 0; i < jsondata1.length; i++) {
|
||
var name = jsondata1[i].name;
|
||
if(jsondata1[i].unit!=''&&jsondata1[i].unit!=null){
|
||
name+="("+jsondata1[i].unit+")";
|
||
}
|
||
var value = Number(jsondata1[i].value).toFixed(2);
|
||
var lastvalue = Number(jsondata1[i].lastvalue).toFixed(2);
|
||
var diffvalue = 0;
|
||
if (lastvalue > 0) {
|
||
diffvalue = (lastvalue - value).toFixed(2);
|
||
}
|
||
html += "<tr style='width:100%;height:60px;cursor:pointer;' onclick='dochange(" + i + ")'>";
|
||
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + name + "</td> ";
|
||
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + value + "</td> ";
|
||
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + lastvalue + "</td> ";
|
||
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + diffvalue + "</td> ";
|
||
let outValue = 0;
|
||
if (lastvalue > 0) {
|
||
outValue = (((lastvalue - value) / lastvalue) * 100).toFixed(2);
|
||
}
|
||
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + outValue + "</td> ";
|
||
html += "</tr>";
|
||
}
|
||
html += "</table>";
|
||
$('#table1').html(html);
|
||
}
|
||
|
||
function dotable2(num) {
|
||
// console.log(jsondata1);
|
||
var html = "";
|
||
html += "<table style='height:100%;width: 100%;border-collapse: collapse;'>";
|
||
html += "<tr style='width:100%;height:40px;background-color:#E3E4E6;'>";
|
||
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>用能单位</td>";
|
||
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>实际值</td>";
|
||
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>基准值</td>";
|
||
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>节约值</td>";
|
||
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>节约率(%)</td>";
|
||
html += "</tr>";
|
||
for (var i = 0; i < jsondata1[num].children.length; i++) {
|
||
var name = jsondata1[num].children[i].name;
|
||
if(jsondata1[num].children[i].unit!=''&&jsondata1[num].children[i].unit!=null){
|
||
name+="("+jsondata1[num].children[i].unit+")";
|
||
}
|
||
var value = Number(jsondata1[num].children[i].value).toFixed(2);
|
||
var lastvalue = Number(jsondata1[num].children[i].lastvalue).toFixed(2);
|
||
var diffvalue = 0;
|
||
if (lastvalue > 0) {
|
||
diffvalue = (lastvalue - value).toFixed(2);
|
||
}
|
||
html += "<tr style='width:100%;height:60px;' >";
|
||
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;cursor:pointer;' onclick='showDetail(\"" + jsondata1[num].children[i].id + "\");'>" + name + "</td> ";
|
||
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + value + "</td> ";
|
||
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + lastvalue + "</td> ";
|
||
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + diffvalue + "</td> ";
|
||
let outValue = 0;
|
||
if (lastvalue > 0) {
|
||
outValue = (((lastvalue - value) / lastvalue) * 100).toFixed(2);
|
||
}
|
||
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + outValue + "</td> ";
|
||
html += "</tr>";
|
||
}
|
||
html += "</table>";
|
||
$('#table2').html(html);
|
||
}
|
||
|
||
function showDetail(id) {
|
||
$.post(ext.contextPath + '/efficiency/constitute/getDetailDataView.do', {
|
||
id: id,
|
||
sdt: beginTimeStore,
|
||
edt: endTimeStore
|
||
}, function (data) {
|
||
$("#detailDataDiv").html(data);
|
||
openModal("detailDataModal");
|
||
});
|
||
}
|
||
|
||
function dochange(num) {
|
||
dochart1(num);
|
||
dochart2(num);
|
||
dotable2(num);
|
||
}
|
||
|
||
function changeOp2LIsHidden(obj) {
|
||
var value = $(obj).val();
|
||
if (value == '0') {
|
||
option1.legend.show = true;
|
||
} else {
|
||
option1.legend.show = false;
|
||
}
|
||
|
||
myChart1.setOption(option1, true);
|
||
}
|
||
</script>
|
||
|
||
</head>
|
||
<body class="hold-transition ${cu.themeclass} sidebar-mini" style="overflow: hidden;">
|
||
<div class="box box-solid">
|
||
<div id="mainDiv" class="box-body ">
|
||
<div id="detailDataDiv"></div>
|
||
<div style="width: 100%;height:45px;float: left;">
|
||
<div class="form-group form-inline" style="padding-left:10px;">
|
||
<div class="form-group" style="height: 40px;line-height: 40px;">
|
||
<label class="input-lable"> 方案:</label>
|
||
<div class="input-group " style="width: 180px;">
|
||
<select id="schemeTree" name="schemeTree" class="select2"
|
||
style="height: 30px;padding: 0px 10px;width: 100%;">
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" style="height: 40px;line-height: 40px;">
|
||
<label class="input-lable"> 日期:</label>
|
||
<div class="input-group ">
|
||
<div class="input-group pull-right input-group-sm">
|
||
<div class="input-group-addon">
|
||
<i class="fa fa-clock-o"></i>
|
||
</div>
|
||
<input type="text" class="form-control" id="reservationtime" style="width:225px">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" style="height: 40px;line-height: 40px;">
|
||
<button type="button" class="btn btn-default" onclick="dosearch();"><i class="fa fa-search"></i> 查询
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="openImage">
|
||
<img style="width: 100%; height: 100%" src="<%=request.getContextPath()%>/IMG/nengxiaoBack.png"/>
|
||
</div>
|
||
<div id="closeImage" style="width: 100%;height:calc(100% - 45px);float: left;">
|
||
<div id="db" style="width: 45%;height:100%;float: left;">
|
||
<div style="width: 100%;height: 65%;float: left;border:1px solid gray;padding:5px;">
|
||
<div style="width: 100%;height: 30px;float: left;background:#E3E4E6;border:1px solid #e4e4e4;line-height: 30px;font-size: 14px;font-weight:bold;padding-left: 10px;">
|
||
<div style="width: 200px;height:100%;float: left;">
|
||
能耗对比分析
|
||
</div>
|
||
<%-- <div style="width: 180px;height:100%;float: right;font-weight:400;">--%>
|
||
<%-- <div style="width: 80px;height:100%;float: left;">图例切换</div>--%>
|
||
<%-- <div style="width: 100px;height:100%;float: left;font-weight:400;">--%>
|
||
<%-- <select id="op2LIsHidden" name="op2LIsHidden" class="select2"--%>
|
||
<%-- style="height: 30px;padding: 0px 10px;"--%>
|
||
<%-- onchange="changeOp2LIsHidden(this);">--%>
|
||
<%-- <option value="0" selected>显示</option>--%>
|
||
<%-- <option value="1">隐藏</option>--%>
|
||
<%-- </select>--%>
|
||
<%-- </div>--%>
|
||
<%-- </div>--%>
|
||
</div>
|
||
<div style="width: 100%;height:calc(100% - 35px);float: left;border:1px solid #e4e4e4;margin-top: 5px;">
|
||
<div id="chart1" style="height: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;height: 35%;float: left;border:1px solid gray;padding: 5px;">
|
||
<div id="table1" style="height:100%;width: 100%;overflow:auto;"></div>
|
||
</div>
|
||
</div>
|
||
<div id="fx" style="width: 55%;height: 100%;float: left;">
|
||
<div style="width: 100%;height: 50%;float: left;border:1px solid gray;padding:5px;">
|
||
<div style="width: 100%;height: 30px;float: left;background:#E3E4E6;border:1px solid #e4e4e4;line-height: 30px;font-size: 14px;font-weight:bold;padding-left: 10px;">
|
||
能耗趋势分析
|
||
</div>
|
||
<div style="width: 100%;height:calc(100% - 35px);float: left;border:1px solid #e4e4e4;margin-top: 5px;">
|
||
<div id="chart2" style="height: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;height: 50%;float: left;border:1px solid gray;padding:5px;">
|
||
<div id="table2" style="height:100%;width: 100%;overflow:auto;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |