$(window).load(function () {
$(".loading").fadeOut();
})
$(function () {
var prefix = 'http://10.172.21.30:9999/eap/api/ScreenDisplay/';
load();
setInterval(() => {
load();
}, 1000 * 60 * 30);
function load() {
loadCurrentOutput();
loadEffiency();
loadOrderProgress();
loadAlarmCodePie();
loadCompletedLots();
loadCommst();
loadStatusPie();
loadMachineToPM();
loadAlarmLine();
loadMtbf();
}
function echarts_1(legends, data) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart1'));
option = {
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
right: 0,
top: 30,
height: 160,
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
textStyle: {
color: 'rgba(255,255,255,.6)',
fontSize: 12
},
orient: 'vertical',
data: legends
},
calculable: true,
series: [
{
name: ' ',
color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262', '#c25775', '#00b7be'],
type: 'pie',
radius: [30, 70],
center: ['35%', '50%'],
roseType: 'radius',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
lableLine: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: data
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function echarts_2(legends, data) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart2'));
option = {
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
top: '15%',
data: legends,
icon: 'circle',
textStyle: {
color: 'rgba(255,255,255,.6)',
}
},
calculable: true,
series: [{
name: '',
color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#c96262'],
type: 'pie',
//起始角度，支持范围[0, 360]
startAngle: 0,
//饼图的半径，数组的第一项是内半径，第二项是外半径
radius: [51, 100],
//支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
center: ['50%', '45%'],
//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
// 'radius' 面积展现数据的百分比，半径展现数据的大小。
// 'area' 所有扇区面积相同，仅通过半径展现数据大小
roseType: 'area',
//是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
avoidLabelOverlap: false,
label: {
normal: {
show: true,
// formatter: '{c}辆'
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
length2: 1,
},
emphasis: {
show: true
}
},
data: data
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function echarts_3(legends, dates, dbData, wbData) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart3'));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
//icon: 'vertical',
data: legends,
//align: 'center',
// right: '35%',
top: '0',
textStyle: {
color: "#fff"
},
// itemWidth: 15,
// itemHeight: 15,
itemGap: 20,
},
grid: {
left: '0',
right: '20',
top: '10',
bottom: '20',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255,255,255,.6)'
}
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
data: dates
}, {
}],
yAxis: [{
axisLabel: {
show: true,
textStyle: {
color: 'rgba(255,255,255,.6)'
}
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
}
}],
series: [{
name: 'DB',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(24, 163, 64, 0.3)'
}, {
offset: 0.8,
color: 'rgba(24, 163, 64, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#cdba00',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 12
}
},
data: dbData
}, {
name: 'WB',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 2
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(39, 122,206, 0.3)'
}, {
offset: 0.8,
color: 'rgba(39, 122,206, 0)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: '#277ace',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 12
}
},
data: wbData
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function echarts_4(legends, xData, dbData, wbData) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart4'));
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
"legend": {
"data": ['DB', 'WB'],
"top": "0%",
"textStyle": {
"color": "rgba(255,255,255,0.9)"//图例文字
}
},
"xAxis": [
{
"type": "category",
data: xData,
axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
axisLabel: {
textStyle: { color: "rgba(255,255,255,.6)", fontSize: '14', },
},
},
],
"yAxis": [
{
"type": "value",
"name": "",
// "interval": 10,
"axisLabel": {
"show": true,
},
axisLine: { lineStyle: { color: 'rgba(255,255,255,.4)' } },//左线色
}
],
"grid": {
"top": "10%",
"right": "30",
"bottom": "30",
"left": "30",
},
"series": [
{
"name": "DB",
"type": "bar",
"data": dbData,
"barWidth": "auto",
"itemStyle": {
"normal": {
"color": {
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [
{
"offset": 0,
"color": "#609db8"
},
{
"offset": 1,
"color": "#609db8"
}
],
"globalCoord": false
}
}
}
},
{
"name": "WB",
"type": "bar",
"data": wbData,
"barWidth": "auto",
"itemStyle": {
"normal": {
"color": {
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [
{
"offset": 0,
"color": "#66b8a7"
},
{
"offset": 1,
"color": "#66b8a7"
}
],
"globalCoord": false
}
}
},
"barGap": "0"
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function echarts_5(legends, completedData, totalData) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart5'));
// 颜色
var lightBlue = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(41, 121, 255, 1)'
}, {
offset: 1,
color: 'rgba(0, 192, 255, 1)'
}],
globalCoord: false
}
var option = {
tooltip: {
show: false
},
grid: {
top: '0%',
left: '65',
right: '14%',
bottom: '0%',
},
xAxis: {
min: 0,
max: 100,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
data: legends,
//offset: 15,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
color: 'rgba(255,255,255,.6)',
fontSize: 14
}
},
series: [{
type: 'bar',
label: {
show: true,
zlevel: 10000,
position: 'right',
padding: 10,
color: '#49bcf7',
fontSize: 14,
formatter: '{c}%'
},
itemStyle: {
color: '#49bcf7'
},
barWidth: '15',
data: completedData,
z: 10
}, {
type: 'bar',
barGap: '-100%',
itemStyle: {
color: '#fff',
opacity: 0.1
},
barWidth: '15',
data: totalData,
z: 5
}],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function zb1(v1) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('zb1'));
var v3 = 100;
// v1 = 85;
var v2 = v3 - v1;
option = {
//animation: false,
series: [{
type: 'pie',
radius: ['60%', '70%'],
color: '#49bcf7',
label: {
normal: {
position: 'center'
}
},
data: [{
value: v1,
name: '稼动率',
label: {
normal: {
show: true,
textStyle: {
fontSize: 20,
color: '#fff',
},
formatter: function (params) {
return v1 + '%'
}
}
}
}, {
value: v2,
name: '',
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function zb2(v1) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('zb2'));
var v3 = 100;
// v1 = 5;
var v2 = v3 - v1;
option = {
//animation: false,
series: [{
type: 'pie',
radius: ['60%', '70%'],
color: '#cdba00',
label: {
normal: {
position: 'center'
}
},
data: [{
value: v1,
name: '报警率',
label: {
normal: {
show: true,
textStyle: {
fontSize: 20,
color: '#fff',
},
formatter: function (params) {
return v1 + '%'
}
}
}
}, {
value: v2,
name: '',
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function zb3(v1) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('zb3'));
var v3 = 100;
// v1 = 10;
var v2 = v3 - v1;
option = {
//animation: false,
series: [{
type: 'pie',
radius: ['60%', '70%'],
color: '#62c98d',
label: {
normal: {
position: 'center'
}
},
data: [{
value: v1,
name: '闲置率',
label: {
normal: {
show: true,
textStyle: {
fontSize: 20,
color: '#fff',
},
formatter: function (params) {
return v1 + '%'
}
}
}
}, {
value: v2,
name: '',
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: 'rgba(255,255,255,.2)'
},
emphasis: {
color: '#fff'
}
},
}]
}]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function loadCurrentOutput() {
$.get(prefix + 'GetAlarmCountTotal', {}, function (res) {
// res = 18521;
$('#currentOutput').text(res);
}, 'json');
}
function loadEffiency() {
$.get(prefix + 'GetEffiency', {}, function (res) {
console.log(res);
zb1((res.runRate * 100).toFixed(2));
zb2((res.alarmRate * 100).toFixed(2));
console.log((res.runRate * 100).toFixed(2));
console.log((res.alarmRate * 100).toFixed(2));
console.log(100 - parseFloat((res.runRate * 100).toFixed(2)) - parseFloat((res.alarmRate * 100).toFixed(2)));
zb3(100 - parseFloat((res.runRate * 100).toFixed(2)) - parseFloat((res.alarmRate * 100).toFixed(2)));
}, 'json');
}
function loadOrderProgress() {
$.get(prefix + 'GetOrderProgress', {}, function (res) {
console.log(res);
var legends = [];
var comdata = [];
var total = [];
res.forEach(element => {
legends.push(element.orderNo);
var com = Math.round(element.completeCount / element.totalCount * 100);
if (com > 100) {
com = 100;
}
comdata.push(com);
total.push(100);
});
echarts_5(legends, comdata, total);
}, 'json');
}
function loadAlarmCodePie() {
var take = 5;
$.get(prefix + 'GetAlarmCodePie', { take: take }, function (res) {
console.log(res);
var legends = [];
var data = [];
var total = 0;
res.forEach(element => {
total += element.count;
});
res.forEach(element => {
legends.push(element.alarmCode);
data.push({
value: Math.round(element.count / total * 100),
name: element.alarmCode
});
});
echarts_1(legends, data);
}, 'json');
}
// 加载已完成lot
function loadCompletedLots() {
$.get(prefix + 'ReadJobBooking', {}, function (res) {
console.log(res);
var html = '';
res.forEach(element => {
html += '' + element.lotNo + '' + element.macCode + '' + element.ftotal + ''
+ element.modtime.split('T')[1].substr(0, 8) + '
';
});
$('.lastestLots').html(html);
$('.wrap,.adduser').liMarquee({
direction: 'up',/*身上滚动*/
runshort: true,/*内容不足时不滚动*/
scrollamount: 20/*速度*/,
behavior:'alternate'
});
}, 'json');
}
// 加载参数比对未通过机台
function loadCommst() {
$.get(prefix + 'ReadParamsComMst', {}, function (res) {
console.log(res);
var index = 1;
res.forEach(element => {
var tr = $('');
var td1 = $('| ');
var span = $('');
span.text(index++);
td1.append(span);
var td2 = $(' | ');
td2.text(element.macFCode);
var td3 = $(' | ');
td3.text(element.programFName);
var td4 = $(' | ');
td4.text(element.recTime.split('T')[1]);
tr.append(td1).append(td2).append(td3).append(td4);
$('#paramsCommst').append(tr);
});
}, 'json');
}
// 加载机台状态分布
function loadStatusPie() {
$.get(prefix + 'ReadLastStatus', {}, function (res) {
console.log(res);
var legends = [];
var data = [];
res.forEach(element => {
legends.push(element.statusFName);
data.push({
value: element.fLen,
name: element.statusFName
});
});
for (var i = 0; i < 5; i++) {
data.push(
{ value: 0, name: "", label: { show: false }, labelLine: { show: false } }
);
}
echarts_2(legends, data);
}, 'json');
}
// 加载待保养机台
function loadMachineToPM() {
$.get(prefix + 'GetMachineToPms', {}, function (res) {
console.log(res);
var index = 1;
res.forEach(element => {
var tr = $(' |
');
var td1 = $('| ');
var span = $('');
span.text(index++);
td1.append(span);
var td2 = $(' | ');
td2.text(element.macCode);
var td3 = $(' | ');
td3.text(element.pmName);
var td4 = $(' | ');
td4.text(element.nextPmTime.split('T')[0]);
tr.append(td1).append(td2).append(td3).append(td4);
$('#machineToPm').append(tr);
});
}, 'json');
}
function loadAlarmLine() {
$.get(prefix + 'GetAlarmLines', {}, function (res) {
console.log(res);
var legends = [];
var dbData = [];
var wbData = [];
var dates = res.dates;
var series = res.lineSeries;
series.forEach(element => {
legends.push(element.name);
if (element.name === 'DB') {
element.alarmTimeDtos.forEach(item => {
dbData.push(item.count);
});
} else if (element.name === 'WB') {
element.alarmTimeDtos.forEach(item => {
wbData.push(item.count);
});
}
});
legends = ['DB', 'WB'];
echarts_3(legends, dates, dbData, wbData);
}, 'json');
}
function loadMtbf() {
$.get(prefix + 'GetMTBFForDisplay', {}, function (res) {
console.log(res);
var legends = [];
var xData = [];
var dbData = [];
var wbData = [];
res.legend.forEach(element => {
legends.push({
name: element
});
});
res.sources.forEach(element => {
xData.push(element.title);
element.data.forEach(item => {
if (item.code === 'DB') {
dbData.push(item.value.toFixed(2));
} else if (item.code === 'WB') {
wbData.push(item.value.toFixed(2));
}
});
});
echarts_4(legends, xData, dbData, wbData);
}, 'json');
}
})
|