1606 lines
70 KiB
Plaintext
1606 lines
70 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
<html>
|
|
<head>
|
|
<title>Title</title>
|
|
<!-- 引用页头及CSS页-->
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|
|
|
<style type="text/css">
|
|
|
|
/*上部标题的样式*/
|
|
.top_div_title {
|
|
width: 100%;
|
|
height: 20%;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/*上部内容的样式*/
|
|
.top_div_content {
|
|
width: 100%;
|
|
height: 20%;
|
|
color: #04FFFF;
|
|
}
|
|
|
|
.div1_out {
|
|
width: 80px;
|
|
height: 76px;
|
|
background: rgba(0, 0, 0, 0.00);
|
|
border-right: 7px solid #757575;
|
|
border-bottom: 7px solid #757575;
|
|
border-left: 7px solid #757575;
|
|
margin-top: 30px;
|
|
margin-left: 2px;
|
|
float: left;
|
|
}
|
|
|
|
/*.div1_in {
|
|
width: 66px;
|
|
height: 53px;
|
|
opacity: 0.78;
|
|
background: linear-gradient(180deg, #fff800, #ffd500);
|
|
margin-bottom: 0px;
|
|
}*/
|
|
|
|
.div3_out {
|
|
width: 48px;
|
|
height: 79px;
|
|
background: rgba(0, 0, 0, 0.00);
|
|
border-top: 2px solid #757575;
|
|
border-right: 2px solid #757575;
|
|
border-bottom: 2px solid #757575;
|
|
border-left: 2px solid #757575;
|
|
margin-top: 30px;
|
|
margin-left: 2px;
|
|
float: left;
|
|
}
|
|
|
|
.div4_out {
|
|
width: 48px;
|
|
height: 79px;
|
|
background: rgba(0, 0, 0, 0.00);
|
|
border-top: 2px solid #757575;
|
|
border-right: 2px solid #757575;
|
|
border-bottom: 2px solid #757575;
|
|
border-left: 2px solid #757575;
|
|
margin-top: 30px;
|
|
margin-left: 2px;
|
|
float: left;
|
|
}
|
|
|
|
.div6_out {
|
|
width: 80px;
|
|
height: 76px;
|
|
background: rgba(0, 0, 0, 0.00);
|
|
border-right: 7px solid #757575;
|
|
border-bottom: 7px solid #757575;
|
|
border-left: 7px solid #757575;
|
|
margin-top: 30px;
|
|
margin-left: 2px;
|
|
float: left;
|
|
}
|
|
|
|
.div8_out {
|
|
width: 30px;
|
|
height: 65px;
|
|
background: rgba(0, 0, 0, 0.00);
|
|
border-top: 3px solid #757575;
|
|
border-right: 3px solid #757575;
|
|
border-bottom: 3px solid #757575;
|
|
border-left: 3px solid #757575;
|
|
margin-top: 30px;
|
|
margin-left: 2px;
|
|
float: left;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
|
|
function chart1(goodsName) {
|
|
// goodsName = encodeURI(encodeURI(goodsName));
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: 'http://10.194.10.125:8080/SIPAIIS_Model2/work/weighingSaveData/getDataHis.do?&&math=' + Math.random() + '&goodsName=' + goodsName,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
// console.log(datastr.ll);
|
|
// console.log(datastr.xh);
|
|
// console.log(datastr.kc);
|
|
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart1'));
|
|
|
|
var option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
// name: '数量',
|
|
min: 0,
|
|
// max: 250,
|
|
// interval: 50,
|
|
axisLabel: {
|
|
formatter: '{value} t'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
// name: '完成率',
|
|
min: 0,
|
|
// max: 100,
|
|
// interval: 5,
|
|
axisLabel: {
|
|
formatter: '{value} t'
|
|
}
|
|
}
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
textStyle: {
|
|
color: '#ffffff'//字体颜色
|
|
},
|
|
data: ['来料', '消耗', '库存'],
|
|
x: 'right', // 图例水平居中
|
|
y: 'bottom', // 图例垂直居上
|
|
},
|
|
grid: {
|
|
top: '10px'
|
|
},
|
|
color: ['#FF0000', '#00FF11', '#00A8FF'],
|
|
series: [
|
|
{
|
|
name: '来料',
|
|
data: datastr.ll,
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 6
|
|
},
|
|
{
|
|
name: '消耗',
|
|
data: datastr.xh,
|
|
type: 'bar',
|
|
// stack: '总量',
|
|
yAxisIndex: 1,
|
|
barWidth: 6
|
|
},
|
|
{
|
|
name: '库存',
|
|
data: datastr.kc,
|
|
type: 'bar',
|
|
stack: '总量',
|
|
barWidth: 6
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function chart2() {
|
|
var goodsName = '污泥';
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: 'http://10.194.10.125:8080/SIPAIIS_Model2/work/weighingSaveData/getDataHis2.do?&&math=' + Math.random() + '&goodsName=' + goodsName,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
// console.log(datastr.list_ws);
|
|
// console.log(datastr.list_kc);
|
|
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart2'));
|
|
|
|
var option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
|
|
},
|
|
/*yAxis: {
|
|
type: 'value'
|
|
},*/
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
// name: '数量',
|
|
min: 0,
|
|
// max: 250,
|
|
// interval: 50,
|
|
axisLabel: {
|
|
formatter: '{value} t'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
// name: '完成率',
|
|
min: 0,
|
|
// max: 100,
|
|
// interval: 5,
|
|
axisLabel: {
|
|
formatter: '{value} t'
|
|
}
|
|
}
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
textStyle: {
|
|
color: '#ffffff'//字体颜色
|
|
},
|
|
data: ['外送', '产出量'],
|
|
x: 'right', // 图例水平居中
|
|
y: 'bottom', // 图例垂直居上
|
|
},
|
|
grid: {
|
|
top: '10px'
|
|
},
|
|
color: ['#00A8FF', '#00FF11'],
|
|
series: [
|
|
{
|
|
name: '外送',
|
|
data: datastr.list_ws,
|
|
type: 'bar',
|
|
// stack: '总量',
|
|
barWidth: 6
|
|
},
|
|
{
|
|
name: '产出量',
|
|
data: datastr.list_kc,
|
|
type: 'bar',
|
|
// stack: '总量',
|
|
yAxisIndex: 1,
|
|
barWidth: 6
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function chart_div_1() {
|
|
var unitId = '021NS';
|
|
var mpcodes_lsl = '021NS_LSLALVL,021NS_LSLBLVL';
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/work/mpoint/getData4MpCodes.do?&&math=' + Math.random() + '&unitId=' + unitId + '&mpcodes=' + mpcodes_lsl,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
for (var i = 0; i < datastr.length; i++) {
|
|
// console.log(datastr[i].mpcode + '---' + datastr[i].parmvalue);
|
|
|
|
// 初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('echart_' + datastr[i].mpcode));
|
|
var option = {
|
|
title: {
|
|
left: 'center',
|
|
//text: datastr[i].parmvalue,
|
|
text: datastr[i].parmvalue.toFixed(2),
|
|
textStyle: {
|
|
// 文字颜色
|
|
color: "#FFFFFF"
|
|
}
|
|
},
|
|
xAxis: {
|
|
show: false,
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu']
|
|
},
|
|
yAxis: {
|
|
show: false,
|
|
type: 'value',
|
|
min: '0',
|
|
max: '2'
|
|
},
|
|
grid: {
|
|
top: '0px',
|
|
right: '0px',
|
|
bottom: '0px',
|
|
left: '0px'
|
|
},
|
|
series: [
|
|
{
|
|
name: '液位',
|
|
data: [datastr[i].parmvalue, datastr[i].parmvalue + 0.05, datastr[i].parmvalue - 0.05, datastr[i].parmvalue],
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
color: '#FFFFFF',
|
|
width: 0
|
|
},
|
|
symbolSize: 0,//不显示节点
|
|
areaStyle: {//区域填充渐变颜色
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(255,255,255,0.79)' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: 'rgba(0,0,0,0.61)' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function chart_div_2() {
|
|
var unitId = '021NS';
|
|
var mpcodes_lsl = '021NS_CLSNALVL,021NS_CLSNBLVL,021NS_CLSNCLVL';
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/work/mpoint/getData4MpCodes.do?&&math=' + Math.random() + '&unitId=' + unitId + '&mpcodes=' + mpcodes_lsl,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
for (var i = 0; i < datastr.length; i++) {
|
|
// console.log(datastr[i].mpcode + '---' + datastr[i].parmvalue);
|
|
|
|
// 初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('echart_' + datastr[i].mpcode));
|
|
var option = {
|
|
title: {
|
|
left: 'center',
|
|
//text: datastr[i].parmvalue,
|
|
text: datastr[i].parmvalue.toFixed(2),
|
|
textStyle: {
|
|
// 文字颜色
|
|
color: "#FFFFFF"
|
|
}
|
|
},
|
|
xAxis: {
|
|
show: false,
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu']
|
|
},
|
|
yAxis: {
|
|
show: false,
|
|
type: 'value',
|
|
min: '0',
|
|
max: '2'
|
|
},
|
|
grid: {
|
|
top: '0px',
|
|
right: '0px',
|
|
bottom: '0px',
|
|
left: '0px'
|
|
},
|
|
series: [
|
|
{
|
|
name: '液位',
|
|
data: [datastr[i].parmvalue, datastr[i].parmvalue + 0.05, datastr[i].parmvalue - 0.05, datastr[i].parmvalue],
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
color: '#FFFFFF',
|
|
width: 0
|
|
},
|
|
symbolSize: 0,//不显示节点
|
|
areaStyle: {//区域填充渐变颜色
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(255,248,0,1)' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: 'rgba(255,213,0,1)' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function chart_div_3() {
|
|
var unitId = '021NS';
|
|
var mpcodes_lsl = '021NS_LSAALVL,021NS_LSABLVL';
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/work/mpoint/getData4MpCodes.do?&&math=' + Math.random() + '&unitId=' + unitId + '&mpcodes=' + mpcodes_lsl,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
for (var i = 0; i < datastr.length; i++) {
|
|
// console.log('--------'+'echart_' + datastr[i].mpcode+'_1');
|
|
// 初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('echart_' + datastr[i].mpcode + '_1'));
|
|
var option = {
|
|
title: {
|
|
left: 'center',
|
|
//text: datastr[i].parmvalue,
|
|
text: datastr[i].parmvalue.toFixed(2),
|
|
textStyle: {
|
|
// 文字颜色
|
|
color: "#FFFFFF"
|
|
}
|
|
},
|
|
xAxis: {
|
|
show: false,
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu']
|
|
},
|
|
yAxis: {
|
|
show: false,
|
|
type: 'value',
|
|
min: '0',
|
|
max: '2'
|
|
},
|
|
grid: {
|
|
top: '0px',
|
|
right: '0px',
|
|
bottom: '0px',
|
|
left: '0px'
|
|
},
|
|
series: [
|
|
{
|
|
name: '液位',
|
|
data: [datastr[i].parmvalue, datastr[i].parmvalue + 0.05, datastr[i].parmvalue - 0.05, datastr[i].parmvalue],
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
color: '#FFFFFF',
|
|
width: 0
|
|
},
|
|
symbolSize: 0,//不显示节点
|
|
areaStyle: {//区域填充渐变颜色
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(255,255,255,0.79)' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: 'rgba(0,0,0,0.61)' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
|
|
// 初始化echarts实例
|
|
var myChart2 = echarts.init(document.getElementById('echart_' + datastr[i].mpcode + '_2'));
|
|
var option2 = {
|
|
title: {
|
|
left: 'center',
|
|
//text: datastr[i].parmvalue,
|
|
text: datastr[i].parmvalue.toFixed(2),
|
|
textStyle: {
|
|
// 文字颜色
|
|
color: "#FFFFFF"
|
|
}
|
|
},
|
|
xAxis: {
|
|
show: false,
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu']
|
|
},
|
|
yAxis: {
|
|
show: false,
|
|
type: 'value',
|
|
min: '0',
|
|
max: '2'
|
|
},
|
|
grid: {
|
|
top: '0px',
|
|
right: '0px',
|
|
bottom: '0px',
|
|
left: '0px'
|
|
},
|
|
series: [
|
|
{
|
|
name: '液位',
|
|
data: [datastr[i].parmvalue, datastr[i].parmvalue + 0.05, datastr[i].parmvalue - 0.05, datastr[i].parmvalue],
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
color: '#FFFFFF',
|
|
width: 0
|
|
},
|
|
symbolSize: 0,//不显示节点
|
|
areaStyle: {//区域填充渐变颜色
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(255,255,255,0.79)' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: 'rgba(0,0,0,0.61)' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart2.clear();
|
|
myChart2.setOption(option2);
|
|
myChart2.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function chart_div_10() {
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart_div_10'));
|
|
|
|
var option = {
|
|
xAxis: {
|
|
show: false,
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu']
|
|
},
|
|
yAxis: {
|
|
show: false,
|
|
type: 'value',
|
|
min: '0',
|
|
max: '100'
|
|
},
|
|
grid: {
|
|
top: '0px',
|
|
right: '0px',
|
|
bottom: '0px',
|
|
left: '0px'
|
|
},
|
|
series: [
|
|
{
|
|
data: [70, 70, 70, 70],
|
|
type: 'line',
|
|
smooth: false,//是否平滑显示
|
|
lineStyle: {
|
|
color: '#FFFFFF',
|
|
width: 0
|
|
},
|
|
symbolSize: 0,//不显示节点
|
|
areaStyle: {//区域填充渐变颜色
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(255,255,255,0.79)' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: 'rgba(0,0,0,0.61)' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
|
|
function chart_div_11() {
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart_div_11'));
|
|
|
|
var option = {
|
|
xAxis: {
|
|
show: false,
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu']
|
|
},
|
|
yAxis: {
|
|
show: false,
|
|
type: 'value',
|
|
min: '0',
|
|
max: '100'
|
|
},
|
|
grid: {
|
|
top: '0px',
|
|
right: '0px',
|
|
bottom: '0px',
|
|
left: '0px'
|
|
},
|
|
series: [
|
|
{
|
|
data: [70, 70, 70, 70],
|
|
type: 'line',
|
|
smooth: false,//是否平滑显示
|
|
lineStyle: {
|
|
color: '#FFFFFF',
|
|
width: 0
|
|
},
|
|
symbolSize: 0,//不显示节点
|
|
areaStyle: {//区域填充渐变颜色
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(255,255,255,0.79)' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: 'rgba(0,0,0,0.61)' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
|
|
function chart_div_14() {
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart_div_14'));
|
|
|
|
var option = {
|
|
xAxis: {
|
|
show: false,
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu']
|
|
},
|
|
yAxis: {
|
|
show: false,
|
|
type: 'value',
|
|
min: '0',
|
|
max: '100'
|
|
},
|
|
grid: {
|
|
top: '0px',
|
|
right: '0px',
|
|
bottom: '0px',
|
|
left: '0px'
|
|
},
|
|
series: [
|
|
{
|
|
data: [70, 65, 75, 70],
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
color: '#FFFFFF',
|
|
width: 0
|
|
},
|
|
symbolSize: 0,//不显示节点
|
|
areaStyle: {//区域填充渐变颜色
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(210,140,0,1)' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: 'rgba(126,84,0,1)' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
|
|
function chart_div_15() {
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart_div_15'));
|
|
|
|
var option = {
|
|
xAxis: {
|
|
show: false,
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu']
|
|
},
|
|
yAxis: {
|
|
show: false,
|
|
type: 'value',
|
|
min: '0',
|
|
max: '100'
|
|
},
|
|
grid: {
|
|
top: '0px',
|
|
right: '0px',
|
|
bottom: '0px',
|
|
left: '0px'
|
|
},
|
|
series: [
|
|
{
|
|
data: [70, 65, 75, 70],
|
|
type: 'line',
|
|
smooth: true,
|
|
lineStyle: {
|
|
color: '#FFFFFF',
|
|
width: 0
|
|
},
|
|
symbolSize: 0,//不显示节点
|
|
areaStyle: {//区域填充渐变颜色
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(210,140,0,1)' // 0% 处的颜色
|
|
}, {
|
|
offset: 1, color: 'rgba(126,84,0,1)' // 100% 处的颜色
|
|
}],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
|
|
function chart_div_16() {
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart_div_16'));
|
|
|
|
var option = {
|
|
xAxis: {
|
|
show: false,
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu']
|
|
},
|
|
yAxis: {
|
|
show: false,
|
|
type: 'value',
|
|
min: '0',
|
|
max: '100'
|
|
},
|
|
grid: {
|
|
top: '0px',
|
|
right: '0px',
|
|
bottom: '0px',
|
|
left: '0px'
|
|
},
|
|
series: [
|
|
{
|
|
data: [70, 70, 70, 70],
|
|
type: 'line',
|
|
smooth: false,//是否平滑显示
|
|
lineStyle: {
|
|
color: '#FFFFFF',
|
|
width: 0
|
|
},
|
|
symbolSize: 0,//不显示节点
|
|
areaStyle: {//区域填充渐变颜色
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0, color: 'rgba(67,67,67,1)' // 0% 处的颜色
|
|
}, {
|
|
offset: 0.5, color: 'rgba(172,172,172,1)' // 100% 处的颜色
|
|
}, {
|
|
offset: 1, color: 'rgba(87,87,87,1)' // 100% 处的颜色
|
|
}
|
|
],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
|
|
function chart_div_17() {
|
|
//初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('chart_div_17'));
|
|
|
|
var option = {
|
|
xAxis: {
|
|
show: false,
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu']
|
|
},
|
|
yAxis: {
|
|
show: false,
|
|
type: 'value',
|
|
min: '0',
|
|
max: '100'
|
|
},
|
|
grid: {
|
|
top: '0px',
|
|
right: '0px',
|
|
bottom: '0px',
|
|
left: '0px'
|
|
},
|
|
series: [
|
|
{
|
|
data: [70, 70, 70, 70],
|
|
type: 'line',
|
|
smooth: false,//是否平滑显示
|
|
lineStyle: {
|
|
color: '#FFFFFF',
|
|
width: 0
|
|
},
|
|
symbolSize: 0,//不显示节点
|
|
areaStyle: {//区域填充渐变颜色
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0, color: 'rgba(67,67,67,1)' // 0% 处的颜色
|
|
}, {
|
|
offset: 0.5, color: 'rgba(172,172,172,1)' // 100% 处的颜色
|
|
}, {
|
|
offset: 1, color: 'rgba(87,87,87,1)' // 100% 处的颜色
|
|
}
|
|
],
|
|
global: false // 缺省为 false
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.clear();
|
|
myChart.setOption(option);
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|
}
|
|
|
|
function getDataKC() {
|
|
//当前库存 - 点位
|
|
var mpcodes_kc = '021NS_LSLKC,021NS_CLSNKC,021NS_LSAKC,021NS_YYKC,021NS_PAMKC,021NS_PAMPKC';
|
|
var unitId = '021NS';
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/work/mpoint/getData4MpCodes.do?&&math=' + Math.random() + '&unitId=' + unitId + '&mpcodes=' + mpcodes_kc,
|
|
async: false,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
var arr = mpcodes_kc.split(",");
|
|
for (var i = 0; i < datastr.length; i++) {
|
|
//对应赋值
|
|
$('#' + datastr[i].mpcode).html((datastr[i].parmvalue).toFixed(2));
|
|
}
|
|
}
|
|
});
|
|
|
|
var mpcodes_CSFLOW = '021NS_CSFLOW_DAY';
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/work/mpoint/getData4MpCodes.do?&&math=' + Math.random() + '&unitId=' + unitId + '&mpcodes=' + mpcodes_CSFLOW,
|
|
async: false,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
//昨日消耗 - 点位
|
|
var mpcodes_xh = '021NS_LSL_DAY,021NS_CLSN_DAY,021NS_LSA_DAY,021NS_YY_DAY,021NS_PAM_DAY,021NS_PAMP_DAY,021NS_DL_DAY';
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + '/work/mpoint/getData4LastNum.do?&&math=' + Math.random() + '&unitId=' + unitId + '&mpcodes=' + mpcodes_xh,
|
|
async: false,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr_xh = eval('(' + data + ')');
|
|
// console.log(datastr_xh);
|
|
for (var i = 0; i < datastr_xh.length; i++) {
|
|
//昨日消耗赋值
|
|
$('#' + datastr_xh[i].mpcode).html(datastr_xh[i].parmvalue);
|
|
// console.log('======'+datastr_xh[i].parmvalue);
|
|
if (datastr_xh[i].parmvalue == '没有昨日消耗') {
|
|
$('#' + datastr_xh[i].mpcode + '_UNIT').html('');
|
|
}
|
|
}
|
|
updateTianshu();
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
//021NS_LSLKC,021NS_CLSNKC,021NS_LSAKC
|
|
//021NS_LSL_DAY,021NS_CLSN_DAY,021NS_LSA_DAY
|
|
//021NS_LSL_KYTS,021NS_CLSN_KYTS,021NS_LSA_KYTS
|
|
function updateTianshu() { //.toFixed(2)
|
|
$('#021NS_LSL_KYTS').html(($('#021NS_LSLKC').html() / $('#021NS_LSL_DAY').html()).toFixed(0) + '天');
|
|
$('#021NS_CLSN_KYTS').html(($('#021NS_CLSNKC').html() / $('#021NS_CLSN_DAY').html()).toFixed(0) + '天');
|
|
$('#021NS_LSA_KYTS').html(($('#021NS_LSAKC').html() / $('#021NS_LSA_DAY').html()).toFixed(0) + '天');
|
|
|
|
//021NS_YY_DAY
|
|
$('#021NS_YY_KYTS').html(($('#021NS_YYKC').html() / $('#021NS_YY_DAY').html()).toFixed(0) + '天');
|
|
$('#021NS_PAM_KYTS').html(($('#021NS_PAMKC').html() / 0.04).toFixed(0) + '天');
|
|
$('#021NS_PAMP_KYTS').html(($('#021NS_PAMPKC').html() / 0.026).toFixed(0) + '天');
|
|
}
|
|
|
|
function getDataJL(mpcodes) {
|
|
|
|
$('#lastTime').html('-');
|
|
$('#weight').html('-');
|
|
$('#carNumber').html('-');
|
|
$('#ljjl').html('-');
|
|
$('#ljxh').html('-');
|
|
$('#zrdh').html('-');
|
|
$('#dypjdh').html('-');
|
|
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: 'http://10.194.10.125:8080/SIPAIIS_Model2/work/weighingSaveData/getDataLast.do?goodsName=' + mpcodes,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
$('#lastTime').html(datastr.lastTime);
|
|
$('#weight').html((datastr.weight / 1000).toFixed(2) + ' 吨');
|
|
$('#carNumber').html(datastr.carNumber);
|
|
$('#ljjl').html((datastr.ljjl / 1000).toFixed(2) + ' 吨');
|
|
$('#ljxh').html(datastr.ljxh + ' 吨');
|
|
$('#zrdh').html((datastr.zrdh).toFixed(2) + ' kg/km3');
|
|
// $('#dypjdh').html((datastr.dypjdh ).toFixed(2) + ' kg/km3');
|
|
$('#dypjdh').html((datastr.dypjdh) + ' kg/km3');
|
|
}
|
|
});
|
|
}
|
|
|
|
function getDataWS(mpcodes) {
|
|
$('#021NS_SCWS_DAY').html('-');
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: 'http://10.194.10.125:8080/SIPAIIS_Model2/work/weighingSaveData/getDataLastWS.do?goodsName=' + mpcodes,
|
|
async: true,
|
|
globle: false,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
var datastr = eval('(' + data + ')');
|
|
$('#021NS_SCWS_DAY').html(datastr.lastTime);
|
|
}
|
|
});
|
|
}
|
|
|
|
function clickFun(num) {
|
|
$('#bc_lsl').css("background", "");
|
|
$('#bc_clsn').css("background", "");
|
|
$('#bc_lsa').css("background", "");
|
|
$('#bc_yy').css("background", "");
|
|
$('#bc_pam1').css("background", "");
|
|
$('#bc_pam2').css("background", "");
|
|
|
|
|
|
$('#' + num).css("background", "linear-gradient(180deg,rgba(0,177,255,0.80), rgba(0,124,178,0.22) 42%, rgba(0,99,142,0.00) 74%, rgba(0,89,128,0.00))");
|
|
|
|
if (num == 'bc_lsl') {
|
|
getDataJL('硫酸铝');
|
|
chart1('硫酸铝');
|
|
$('#jy_text').html('硫酸铝');
|
|
}
|
|
if (num == 'bc_clsn') {
|
|
getDataJL('次氯酸钠');
|
|
chart1('次氯酸钠');
|
|
$('#jy_text').html('次氯酸钠');
|
|
}
|
|
if (num == 'bc_lsa') {
|
|
getDataJL('硫酸铵');
|
|
chart1('硫酸铵');
|
|
$('#jy_text').html('硫酸铵');
|
|
}
|
|
if (num == 'bc_yy') {
|
|
getDataJL('液氧');
|
|
chart1('液氧');
|
|
$('#jy_text').html('液氧');
|
|
}
|
|
if (num == 'bc_pam1') {
|
|
getDataJL('PAM阴离子');
|
|
chart1('PAM阴离子');
|
|
$('#jy_text').html('PAM-');
|
|
}
|
|
if (num == 'bc_pam2') {
|
|
getDataJL('PAM阳离子');
|
|
chart1('PAM阳离子');
|
|
$('#jy_text').html('PAM+');
|
|
}
|
|
}
|
|
|
|
function allfun() {
|
|
//获取上部数据
|
|
getDataKC();
|
|
|
|
//获取进料数据 默认选中硫酸铝
|
|
getDataJL('硫酸铝');
|
|
|
|
getDataWS('污泥');
|
|
|
|
chart1('硫酸铝');
|
|
$('#bc_lsl').css("background", "linear-gradient(180deg,rgba(0,177,255,0.80), rgba(0,124,178,0.22) 42%, rgba(0,99,142,0.00) 74%, rgba(0,89,128,0.00))");
|
|
|
|
chart2();
|
|
|
|
chart_div_1();
|
|
chart_div_2();
|
|
chart_div_3();
|
|
|
|
// chart_div_3();
|
|
// chart_div_4();
|
|
// chart_div_5();
|
|
|
|
// chart_div_6();
|
|
// chart_div_7();
|
|
// chart_div_8();
|
|
// chart_div_9();
|
|
|
|
chart_div_10();
|
|
chart_div_11();
|
|
|
|
// chart_div_12();
|
|
// chart_div_13();
|
|
|
|
chart_div_14();
|
|
chart_div_15();
|
|
|
|
chart_div_16();
|
|
chart_div_17();
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body style="width: 1920px;height: 900px;background-color: #001121;" onload="allfun();">
|
|
|
|
<div style="width: 1920px;height: 900px;">
|
|
<div style="width: 100%;height: 450px;"><%--这里背景色需要注释--%>
|
|
<%--标题--%>
|
|
<div style="width: 4%;height: 100%;float: left;">
|
|
<div style="width: 100%;height: 50%;text-align: center;">
|
|
<div style="width: 100%;height: 5%;">
|
|
|
|
</div>
|
|
<div class="top_div_title">
|
|
|
|
</div>
|
|
<div class="top_div_content" style="color: #FFFFFF;">
|
|
存储方式
|
|
</div>
|
|
<div class="top_div_content" style="color: #FFFFFF;">
|
|
昨日消耗
|
|
</div>
|
|
<div class="top_div_content" style="color: #FFFFFF;">
|
|
当前库存
|
|
</div>
|
|
<div class="top_div_content" style="color: #FFFFFF;">
|
|
可用天数
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--硫酸铝--%>
|
|
<div id="bc_lsl" style="width: 14%;height: 100%;float: left;cursor: pointer;" onclick="clickFun('bc_lsl');">
|
|
<div style="width: 100%;height: 50%;text-align: center;">
|
|
<div style="width: 100%;height: 5%;">
|
|
|
|
</div>
|
|
<div class="top_div_title">
|
|
硫酸铝
|
|
</div>
|
|
<div class="top_div_content">
|
|
储液池 (A/B)
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_LSL_DAY"></span> <span id="021NS_LSL_DAY_UNIT">t</span>
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_LSLKC"></span> t
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_LSL_KYTS"></span>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 50%;text-align: center;">
|
|
<div style="margin-left: 20%;">
|
|
<div class="div1_out">
|
|
<div id="echart_021NS_LSLALVL" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="div1_out">
|
|
<div id="echart_021NS_LSLBLVL" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--次氯酸钠--%>
|
|
<div id="bc_clsn" style="width: 14%;height: 100%;float: left;cursor: pointer;" onclick="clickFun('bc_clsn');">
|
|
<div style="width: 100%;height: 50%;text-align: center;">
|
|
<div style="width: 100%;height: 5%;">
|
|
|
|
</div>
|
|
<div class="top_div_title">
|
|
次氯酸钠
|
|
</div>
|
|
<div class="top_div_content">
|
|
储液池 (A/B/C)
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_CLSN_DAY"></span> <span id="021NS_CLSN_DAY_UNIT">t</span>
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_CLSNKC"></span> t
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_CLSN_KYTS"></span>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 50%;text-align: center;padding-left: 10px;">
|
|
<div style="margin-left: 0%;">
|
|
<div class="div1_out">
|
|
<div id="echart_021NS_CLSNALVL" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="div1_out">
|
|
<div id="echart_021NS_CLSNBLVL" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="div1_out">
|
|
<div id="echart_021NS_CLSNCLVL" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--硫酸铵--%>
|
|
<div id="bc_lsa" style="width: 12%;height: 100%;float: left;cursor: pointer;" onclick="clickFun('bc_lsa');">
|
|
<div style="width: 100%;height: 50%;text-align: center;">
|
|
<div style="width: 100%;height: 5%;">
|
|
|
|
</div>
|
|
<div class="top_div_title">
|
|
硫酸铵
|
|
</div>
|
|
<div class="top_div_content">
|
|
储液池 (A1/A2/B1/B2)
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_LSA_DAY"></span> <span id="021NS_LSA_DAY_UNIT">t</span>
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_LSAKC"></span> t
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_LSA_KYTS"></span>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 50%;text-align: center;margin-left: -8px;">
|
|
<div style="margin-left: 10%;">
|
|
<div class="div3_out">
|
|
<div id="echart_021NS_LSAALVL_1" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="div3_out">
|
|
<div id="echart_021NS_LSAALVL_2" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="div3_out">
|
|
<div id="echart_021NS_LSABLVL_1" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="div3_out">
|
|
<div id="echart_021NS_LSABLVL_2" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--液氧--%>
|
|
<div id="bc_yy" style="width: 10%;height: 100%;float: left;cursor: pointer;" onclick="clickFun('bc_yy');">
|
|
<div style="width: 100%;height: 50%;text-align: center;">
|
|
<div style="width: 100%;height: 5%;">
|
|
|
|
</div>
|
|
<div class="top_div_title">
|
|
液氧
|
|
</div>
|
|
<div class="top_div_content">
|
|
储液罐
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_YY_DAY"></span> <span id="021NS_YY_DAY_UNIT">t</span>
|
|
</div>
|
|
<div class="top_div_content">
|
|
<%-- 40 t--%>
|
|
<span id="021NS_YYKC"></span> <span id="021NS_YYKC_UNIT">t</span>
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_YY_KYTS"></span>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 50%;text-align: center;">
|
|
<div style="margin-left: 25%;">
|
|
<div class="div4_out">
|
|
<div id="chart_div_10" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="div4_out">
|
|
<div id="chart_div_11" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%-- PAM- --%>
|
|
<div id="bc_pam1" style="width: 11%;height: 100%;float: left;cursor: pointer;" onclick="clickFun('bc_pam1');">
|
|
<div style="width: 100%;height: 50%;text-align: center;">
|
|
<div style="width: 100%;height: 5%;">
|
|
|
|
</div>
|
|
<div class="top_div_title">
|
|
PAM-
|
|
</div>
|
|
<div class="top_div_content">
|
|
立库(袋装)
|
|
</div>
|
|
<div class="top_div_content">
|
|
<%--<span id="021NS_PAM_DAY"></span> <span id="021NS_PAM_DAY_UNIT">t</span>--%>
|
|
0.04 t
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_PAMKC"></span> <span id="021NS_PAMKC_UNIT">t</span>
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_PAM_KYTS"></span>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 50%;text-align: center;margin-left: -5px;">
|
|
<div style="margin-left: 10px;margin-top: 10px;text-align: center;">
|
|
<div style="width: 100%;height: 28px;border: 2px solid #707070;">
|
|
<div style="width: 33%;height: 100%;float:left;border-right: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;padding-left: 10px;padding-top: 13px;">
|
|
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;border-left: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 28px;border: 2px solid #707070;">
|
|
<div style="width: 33%;height: 100%;float:left;border-right: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;border-left: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 28px;border: 2px solid #707070;">
|
|
<div style="width: 33%;height: 100%;float:left;border-right: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;border-left: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 28px;border: 2px solid #707070;">
|
|
<div style="width: 33%;height: 100%;float:left;border-right: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;border-left: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%-- PAM+ --%>
|
|
<div id="bc_pam2" style="width: 11%;height: 100%;float: left;cursor: pointer;" onclick="clickFun('bc_pam2');">
|
|
<div style="width: 100%;height: 50%;text-align: center;">
|
|
<div style="width: 100%;height: 5%;">
|
|
|
|
</div>
|
|
<div class="top_div_title">
|
|
PAM+
|
|
</div>
|
|
<div class="top_div_content">
|
|
立库(袋装)
|
|
</div>
|
|
<div class="top_div_content">
|
|
<%--<span id="021NS_PAMP_DAY"></span> <span id="021NS_PAMP_DAY_UNIT">t</span>--%>
|
|
0.026 t
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_PAMPKC"></span> <span id="021NS_PAMPKC_UNIT">t</span>
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_PAMP_KYTS"></span>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 50%;text-align: center;margin-left: -4px;">
|
|
<div style="margin-left: 10px;margin-top: 10px;text-align: center;">
|
|
<div style="width: 100%;height: 28px;border: 2px solid #707070;">
|
|
<div style="width: 33%;height: 100%;float:left;border-right: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<%-- <div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>--%>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;padding-left: 10px;padding-top: 13px;">
|
|
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;border-left: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 28px;border: 2px solid #707070;">
|
|
<div style="width: 33%;height: 100%;float:left;border-right: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;padding-left: 10px;padding-top: 13px;">
|
|
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;border-left: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 28px;border: 2px solid #707070;">
|
|
<div style="width: 33%;height: 100%;float:left;border-right: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;border-left: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 28px;border: 2px solid #707070;">
|
|
<div style="width: 33%;height: 100%;float:left;border-right: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
<div style="width: 33%;height: 100%;float:left;border-left: 2px solid #707070;padding-left: 10px;padding-top: 13px;">
|
|
<div style="width: 80%;height: 12px;background: #ffffff;border: 1px solid #707070;border-radius: 5px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--污泥--%>
|
|
<div style="width: 12%;height: 100%;float: left;">
|
|
<div style="width: 100%;height: 50%;text-align: center;">
|
|
<div style="width: 100%;height: 5%;">
|
|
|
|
</div>
|
|
<div class="top_div_title">
|
|
污泥
|
|
</div>
|
|
<div class="top_div_content">
|
|
存储方式 料仓 (A/B)
|
|
</div>
|
|
<div class="top_div_content">
|
|
上次外送 <span id="021NS_SCWS_DAY">-</span>
|
|
</div>
|
|
<div class="top_div_content">
|
|
当前存量 5 t
|
|
</div>
|
|
<div class="top_div_content">
|
|
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 50%;text-align: center;">
|
|
<div style="margin-left: 20%;">
|
|
<div class="div6_out">
|
|
<div id="chart_div_14" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="div6_out">
|
|
<div id="chart_div_15" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%--昨日耗电量--%>
|
|
<div style="width: 12%;height: 100%;float: left;">
|
|
<div style="width: 100%;height: 50%;text-align: center;">
|
|
<div style="width: 100%;height: 5%;">
|
|
|
|
</div>
|
|
<div class="top_div_title">
|
|
昨日耗电量
|
|
</div>
|
|
<div class="top_div_content">
|
|
<span id="021NS_DL_DAY"></span> kwh
|
|
</div>
|
|
<div class="top_div_content">
|
|
|
|
</div>
|
|
<div class="top_div_content">
|
|
|
|
</div>
|
|
<div class="top_div_content">
|
|
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 50%;text-align: center;margin-left: -40px;margin-top: 25px;">
|
|
<div style="margin-left: 36%;">
|
|
<%--<div class="div8_out">
|
|
<div id="chart_div_16" style="width:100%; height: 100%;"></div>
|
|
</div>D:\workspace\SIPAIIS_WMS\WebRoot\IMG\model\battery.png
|
|
<div class="div8_out">
|
|
<div id="chart_div_17" style="width:100%; height: 100%;"></div>
|
|
</div>--%>
|
|
<div><img decoding="async" src="..\IMG\model\battery.png" alt="Smiley face" width="110px"
|
|
height="85px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 450px;">
|
|
<div style="width: 1305px;height: 100%;float: left;">
|
|
<div style="width: 1193px;height: 383px;background: #0C0C0C;margin-left: 78px;">
|
|
<div style="width: 100%;height: 23px;float: left;">
|
|
|
|
</div>
|
|
<div style="width: 100%;height: 30px;float: left;">
|
|
<div style="width: 42px;height: 30px;float: left;"></div>
|
|
<div style="width: 150px;height: 30px;float: left;">
|
|
<span style="width: 150px;height: 25px;font-size: 20px;font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;font-weight: 700;text-align: left;color: #ffffff;">
|
|
<span id="jy_text">硫酸铝</span>
|
|
</span>
|
|
</div>
|
|
<div style="width: 5px;height: 30px;float: left;"></div>
|
|
<div style="width: 110px;height: 30px;float: left;">
|
|
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 39px;float: left;"></div>
|
|
<div style="width: 100%;height: 261px;float: left;">
|
|
<div style="width: 49px;height:100%;float:left;color: white;">
|
|
|
|
</div>
|
|
<div style="width: 96px;height:100%;float:left;color: white;text-align: right;">
|
|
<div style="width: 100px;height:40px;float:left;">上次进料时间</div>
|
|
<div style="width: 100px;height:40px;float:left;">进料重量</div>
|
|
<div style="width: 100px;height:40px;float:left;">车牌号</div>
|
|
<div style="width: 100px;height:40px;float:left;">当月累计进料</div>
|
|
<div style="width: 100px;height:40px;float:left;">当月累计消耗</div>
|
|
<div style="width: 100px;height:40px;float:left;">昨日单耗</div>
|
|
<div style="width: 100px;height:40px;float:left;">当月平均单耗</div>
|
|
</div>
|
|
<div style="width: 35px;height:100%;float:left;color: white;"></div>
|
|
<div style="width: 136px;height:100%;float:left;color: white;text-align: center;">
|
|
<div style="width: 100px;height:40px;float:left;" id="lastTime">-</div>
|
|
<div style="width: 100px;height:40px;float:left;" id="weight">-</div>
|
|
<div style="width: 100px;height:40px;float:left;" id="carNumber">-</div>
|
|
<div style="width: 100px;height:40px;float:left;" id="ljjl">-</div>
|
|
<div style="width: 100px;height:40px;float:left;" id="ljxh">-</div>
|
|
<div style="width: 100px;height:40px;float:left;" id="zrdh">-</div>
|
|
<div style="width: 100px;height:40px;float:left;" id="dypjdh">-</div>
|
|
</div>
|
|
<div style="width: 877px;height:100%;float:left;">
|
|
<div id="chart1" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 30px;float: left;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 615px;height: 100%;float: left;">
|
|
|
|
<div style="width: 572px;height: 383px;background: #0C0C0C;margin-right: 43px;">
|
|
<div style="width: 100%;height: 23px;float: left;">
|
|
|
|
</div>
|
|
<div style="width: 100%;height: 30px;float: left;text-align: center;font-size: 20px;font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;font-weight: 700;color: #ffffff;">
|
|
污泥产出量统计
|
|
</div>
|
|
<div style="width: 100%;height: 39px;float: left;"></div>
|
|
<div style="width: 100%;height: 261px;float: left;">
|
|
<div id="chart2" style="width:100%; height: 100%;"></div>
|
|
</div>
|
|
<div style="width: 100%;height: 30px;float: left;"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|