铝内胆成型线

master
夜笙歌 3 years ago
parent e141ad3597
commit 6a482a1305

@ -25,6 +25,25 @@ body {
left: 1%;
}
.loss {
border: 0px solid red;
position: absolute;
width: 28%;
height: 25%;
top: 41%;
left: 71%;
}
.equipmentFailure {
border: 0px solid red;
position: absolute;
width: 28%;
height: 22%;
top: 75%;
left: 70%;
}
.productionPlan {
position: absolute;
border: 0px solid red;

@ -43,5 +43,16 @@ $(() => {
}
});
//loss
$.getJSON('/tankShell/getInventoryStatistics', function (result) {
loss(result, document.getElementById("loss"));
});
//设备故障排名
$.getJSON('/tankShell/getStatisticalOutputByModel', function (result) {
equipmentFailure(result, document.getElementById("equipmentFailure"));
});
})

@ -1704,32 +1704,32 @@ const inventory = (res, ids) => {
let barBottomColor = [
"rgba(2,195,241,0.1)",
];
let Res =
{
datas: [
{
name: 'SC-279',
value: 2
},
{
name: 'SC-606',
value: 6
},
{
name: 'SC-387NE',
value: 31
},
{
name: 'SC-329',
value: 2
},
{
name: 'SC-279',
value: 9
},
]
}
let Res =
{
datas: [
{
name: 'SC-279',
value: 2
},
{
name: 'SC-606',
value: 6
},
{
name: 'SC-387NE',
value: 31
},
{
name: 'SC-329',
value: 2
},
{
name: 'SC-279',
value: 9
},
]
}
Res.datas.forEach((item) => {
xAxisData.push(item.name);
seriesData1.push(item.value);
@ -1882,7 +1882,7 @@ const inventory = (res, ids) => {
borderWidth: 20,
},
},
data: ["", "","", seriesData1[3]],
data: ["", "", "", seriesData1[3]],
},
{
name: "第一圈",
@ -1897,7 +1897,7 @@ const inventory = (res, ids) => {
borderWidth: 20,
},
},
data: ["", "","","", seriesData1[4]],
data: ["", "", "", "", seriesData1[4]],
},
{
name: "第二圈",
@ -1957,7 +1957,7 @@ const inventory = (res, ids) => {
borderWidth: 16,
},
},
data: ["", "","", seriesData1[3]],
data: ["", "", "", seriesData1[3]],
},
{
name: "第二圈",
@ -1972,7 +1972,7 @@ const inventory = (res, ids) => {
borderWidth: 16,
},
},
data: ["", "","","", seriesData1[4]],
data: ["", "", "", "", seriesData1[4]],
},
{
@ -2004,6 +2004,308 @@ const inventory = (res, ids) => {
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//loss
const loss = (res, ids) => {
let mycharts = echarts.init(ids);
let xAxisData = [];
let seriesData1 = [];
let sum = 0;
let barTopColor = [
"rgba(10,50,220)",
];
let barBottomColor = [
"rgba(40,140,210)",
];
let Res =
{
datas: [
{
name: '>30分钟',
value: 2
},
{
name: '3-10分钟',
value: 6
},
{
name: '0-3分钟',
value: 9
},
]
}
Res.datas.forEach((item) => {
xAxisData.push(item.name);
seriesData1.push(item.value);
sum += item.value;
});
let option = {
grid: {
top: "25%",
bottom: "25%",
},
xAxis: {
axisTick: {
show: false,
},
data: xAxisData,
axisLine: {
show: true,
},
axisLabel: {
interval: 0,
show: true,
margin: 10,
align: "center",
textStyle: {
fontSize: 12,
color: "#A8A6AB",
rich: {
a: {
fontSize: 12,
color: "#ffffff",
},
b: {
height: 20,
fontSize: 14,
color: "#ffffff",
},
},
},
},
splitLine: {
show: true,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
}
},
yAxis: {
interval: 4,
min: 0,
max: 12,
splitLine: {
show: true,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
},
splitLine: {
show: true,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
}
},
series: [
{
name: "柱顶部",
type: "pictorialBar",
symbolSize: [35, 6],
symbolOffset: [0, -3],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return barTopColor[0];
},
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#02C3F1",
},
},
symbolPosition: "end",
data: seriesData1,
},
{
type: "bar",
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: barTopColor[0],
},
{
offset: 0,
color: barBottomColor[0],
},
]);
},
opacity: 0.8,
},
},
z: 16,
silent: true,
barWidth: 35,
barGap: "-100%", // Make series be overlap
data: seriesData1,
},
],
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//设备故障排名
const equipmentFailure = (res, ids) => {
let mycharts = echarts.init(ids);
let stationData = [];
let values = [];
res.datas.forEach(function (it, index) {
stationData.push(it.station);
values.push(it.value);
});
let option = {
grid: {
top: '1%',
left: '6%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: {
// type: "category",
boundaryGap: false,
min: 0,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: "#0a3256",
},
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
margin: 10,
textStyle: {
color: "#A8A6AB",
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
},
type: 'value',
},
yAxis: {
axisTick: {
show: false,
},
interval: 0,
type: 'category',
data: stationData,
splitLine: {
show: true,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
},
axisLabel: {
interval: 0,
show: true,
margin: 25,
align: "center",
textStyle: {
fontSize: 12,
rich: {
a: {
fontSize: 12,
color: "#ffffff",
},
b: {
height: 20,
fontSize: 14,
color: "#ffffff",
},
},
},
},
},
series: [
{
name: "柱顶部",
type: "pictorialBar",
symbolSize: [6, 13],
symbolOffset: [3, 0],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return "rgba(10,50,220)";
},
},
},
symbolPosition: "end",
data: values,
},
{
name: '2011',
type: 'bar',
data: values,
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 1,
color: "rgba(10,50,220)",
},
{
offset: 0,
color: "rgba(40,140,210)",
},
]);
},
opacity: 0.8,
},
},
},
]
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}

@ -27,7 +27,11 @@
<div class="productionPlan" id="productionPlan"></div>
<!--loss-->
<div class="productionPlan" id="productionPlan"></div>
<div class="loss" id="loss"></div>
<!--设备故障排名-->
<div class="equipmentFailure" id="equipmentFailure"></div>
</body>
<script src="../../../js/aluminumLiner/index.js"></script>

@ -25,6 +25,25 @@ body {
left: 1%;
}
.loss {
border: 0px solid red;
position: absolute;
width: 28%;
height: 25%;
top: 41%;
left: 71%;
}
.equipmentFailure {
border: 0px solid red;
position: absolute;
width: 28%;
height: 22%;
top: 75%;
left: 70%;
}
.productionPlan {
position: absolute;
border: 0px solid red;

@ -43,5 +43,16 @@ $(() => {
}
});
//loss
$.getJSON('/tankShell/getInventoryStatistics', function (result) {
loss(result, document.getElementById("loss"));
});
//设备故障排名
$.getJSON('/tankShell/getStatisticalOutputByModel', function (result) {
equipmentFailure(result, document.getElementById("equipmentFailure"));
});
})

@ -1704,32 +1704,32 @@ const inventory = (res, ids) => {
let barBottomColor = [
"rgba(2,195,241,0.1)",
];
let Res =
{
datas: [
{
name: 'SC-279',
value: 2
},
{
name: 'SC-606',
value: 6
},
{
name: 'SC-387NE',
value: 31
},
{
name: 'SC-329',
value: 2
},
{
name: 'SC-279',
value: 9
},
]
}
let Res =
{
datas: [
{
name: 'SC-279',
value: 2
},
{
name: 'SC-606',
value: 6
},
{
name: 'SC-387NE',
value: 31
},
{
name: 'SC-329',
value: 2
},
{
name: 'SC-279',
value: 9
},
]
}
Res.datas.forEach((item) => {
xAxisData.push(item.name);
seriesData1.push(item.value);
@ -1882,7 +1882,7 @@ const inventory = (res, ids) => {
borderWidth: 20,
},
},
data: ["", "","", seriesData1[3]],
data: ["", "", "", seriesData1[3]],
},
{
name: "第一圈",
@ -1897,7 +1897,7 @@ const inventory = (res, ids) => {
borderWidth: 20,
},
},
data: ["", "","","", seriesData1[4]],
data: ["", "", "", "", seriesData1[4]],
},
{
name: "第二圈",
@ -1957,7 +1957,7 @@ const inventory = (res, ids) => {
borderWidth: 16,
},
},
data: ["", "","", seriesData1[3]],
data: ["", "", "", seriesData1[3]],
},
{
name: "第二圈",
@ -1972,7 +1972,7 @@ const inventory = (res, ids) => {
borderWidth: 16,
},
},
data: ["", "","","", seriesData1[4]],
data: ["", "", "", "", seriesData1[4]],
},
{
@ -2004,6 +2004,308 @@ const inventory = (res, ids) => {
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//loss
const loss = (res, ids) => {
let mycharts = echarts.init(ids);
let xAxisData = [];
let seriesData1 = [];
let sum = 0;
let barTopColor = [
"rgba(10,50,220)",
];
let barBottomColor = [
"rgba(40,140,210)",
];
let Res =
{
datas: [
{
name: '>30分钟',
value: 2
},
{
name: '3-10分钟',
value: 6
},
{
name: '0-3分钟',
value: 9
},
]
}
Res.datas.forEach((item) => {
xAxisData.push(item.name);
seriesData1.push(item.value);
sum += item.value;
});
let option = {
grid: {
top: "25%",
bottom: "25%",
},
xAxis: {
axisTick: {
show: false,
},
data: xAxisData,
axisLine: {
show: true,
},
axisLabel: {
interval: 0,
show: true,
margin: 10,
align: "center",
textStyle: {
fontSize: 12,
color: "#A8A6AB",
rich: {
a: {
fontSize: 12,
color: "#ffffff",
},
b: {
height: 20,
fontSize: 14,
color: "#ffffff",
},
},
},
},
splitLine: {
show: true,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
}
},
yAxis: {
interval: 4,
min: 0,
max: 12,
splitLine: {
show: true,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
},
splitLine: {
show: true,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
}
},
series: [
{
name: "柱顶部",
type: "pictorialBar",
symbolSize: [35, 6],
symbolOffset: [0, -3],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return barTopColor[0];
},
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#02C3F1",
},
},
symbolPosition: "end",
data: seriesData1,
},
{
type: "bar",
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: barTopColor[0],
},
{
offset: 0,
color: barBottomColor[0],
},
]);
},
opacity: 0.8,
},
},
z: 16,
silent: true,
barWidth: 35,
barGap: "-100%", // Make series be overlap
data: seriesData1,
},
],
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//设备故障排名
const equipmentFailure = (res, ids) => {
let mycharts = echarts.init(ids);
let stationData = [];
let values = [];
res.datas.forEach(function (it, index) {
stationData.push(it.station);
values.push(it.value);
});
let option = {
grid: {
top:'1%',
left: '6%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: {
// type: "category",
boundaryGap: false,
min: 0,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: "#0a3256",
},
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
margin: 10,
textStyle: {
color: "#A8A6AB",
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
},
type: 'value',
},
yAxis: {
axisTick: {
show: false,
},
interval: 0,
type: 'category',
data: stationData,
splitLine: {
show: true,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
},
axisLabel: {
interval: 0,
show: true,
margin: 25,
align: "center",
textStyle: {
fontSize: 12,
rich: {
a: {
fontSize: 12,
color: "#ffffff",
},
b: {
height: 20,
fontSize: 14,
color: "#ffffff",
},
},
},
},
},
series: [
{
name: "柱顶部",
type: "pictorialBar",
symbolSize: [6, 13],
symbolOffset: [3, 0],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return "rgba(10,50,220)";
},
},
},
symbolPosition: "end",
data: values,
},
{
name: '2011',
type: 'bar',
data: values,
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 1,
color: "rgba(10,50,220)",
},
{
offset: 0,
color: "rgba(40,140,210)",
},
]);
},
opacity: 0.8,
},
},
},
]
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}

@ -25,6 +25,13 @@
<!--生产计划-->
<div class="productionPlan" id="productionPlan"></div>
<!--loss-->
<div class="loss" id="loss"></div>
<!--设备故障排名-->
<div class="equipmentFailure" id="equipmentFailure"></div>
</body>
<script src="../../../js/aluminumLiner/index.js"></script>

Loading…
Cancel
Save