|
|
|
@ -2,24 +2,24 @@
|
|
|
|
|
<div class="bg">
|
|
|
|
|
<div class="title">白坯车间数字应用大屏</div>
|
|
|
|
|
<div class="modelTitle" style=" top: 15.2%;left: 3%;">烘房状态</div>
|
|
|
|
|
<!-- <div class="modelTitle" style="top:15.2%;left:32%">设备运行数据</div>-->
|
|
|
|
|
<!-- <div class="modelTitle" style="top:15.2%;left:32%">设备运行数据</div>-->
|
|
|
|
|
<div class="modelTitle" style="top:15.2%;left:32%">烘房耗电量</div>
|
|
|
|
|
<div class="modelTitle" style="top:15.2%;left:71%">烘房白坯质量统计</div>
|
|
|
|
|
<div class="modelTitle" style="top:65%;left:32%">近7天产量</div>
|
|
|
|
|
<!-- <div class="modelTitle" style="top:65%;left:32%">烘房耗电量</div>-->
|
|
|
|
|
<!-- <div class="modelTitle" style="top:65%;left:32%">烘房耗电量</div>-->
|
|
|
|
|
<div class="modelTitle" style="top:65%;left:71%">计划达成率</div>
|
|
|
|
|
<!-- <div class="title1" style="top:24%;left:34%">成型机产量:</div>-->
|
|
|
|
|
<!-- <div class="title1" style="top:24%;left:52.5%">烘房产量:</div>-->
|
|
|
|
|
<!-- <div class="title1" style="top:45%;left:34%">烘房耗电量:</div>-->
|
|
|
|
|
<!-- <div class="title1" style="top:45%;left:52.5%">AGV开动数量:</div>-->
|
|
|
|
|
<!-- <div class="unit1" style="top: 31.3%;left: 45.5%;">车</div>-->
|
|
|
|
|
<!-- <div class="unit1" style="top: 31.3%;left: 63.5%">车</div>-->
|
|
|
|
|
<!-- <div class="unit1" style="top: 51.3%;left: 45.5%;">KWh</div>-->
|
|
|
|
|
<!-- <div class="unit1" style="top: 51.3%;left: 63.5%;">台</div>-->
|
|
|
|
|
<!-- <div class="num1" style="top: 31.5%;left: 39.5%;">{{ CData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
|
|
|
|
|
<!-- <div class="num1" style="top:31.5%;left:57.7%">{{ HData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
|
|
|
|
|
<!-- <div class="num1" style="top:51.6%;left:39.5%">{{ expend }}</div>-->
|
|
|
|
|
<!-- <div class="num1" style="top:51.6%;left:57.7%">{{ agvData.length }}</div>-->
|
|
|
|
|
<!-- <div class="title1" style="top:24%;left:34%">成型机产量:</div>-->
|
|
|
|
|
<!-- <div class="title1" style="top:24%;left:52.5%">烘房产量:</div>-->
|
|
|
|
|
<!-- <div class="title1" style="top:45%;left:34%">烘房耗电量:</div>-->
|
|
|
|
|
<!-- <div class="title1" style="top:45%;left:52.5%">AGV开动数量:</div>-->
|
|
|
|
|
<!-- <div class="unit1" style="top: 31.3%;left: 45.5%;">车</div>-->
|
|
|
|
|
<!-- <div class="unit1" style="top: 31.3%;left: 63.5%">车</div>-->
|
|
|
|
|
<!-- <div class="unit1" style="top: 51.3%;left: 45.5%;">KWh</div>-->
|
|
|
|
|
<!-- <div class="unit1" style="top: 51.3%;left: 63.5%;">台</div>-->
|
|
|
|
|
<!-- <div class="num1" style="top: 31.5%;left: 39.5%;">{{ CData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
|
|
|
|
|
<!-- <div class="num1" style="top:31.5%;left:57.7%">{{ HData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
|
|
|
|
|
<!-- <div class="num1" style="top:51.6%;left:39.5%">{{ expend }}</div>-->
|
|
|
|
|
<!-- <div class="num1" style="top:51.6%;left:57.7%">{{ agvData.length }}</div>-->
|
|
|
|
|
<div class="title2" style="top: 73.5%;left: 86.8%;">计划生产数量:</div>
|
|
|
|
|
<div class="title2" style="top: 85.3%;left: 86.8%;">实际生产数量:</div>
|
|
|
|
|
<div class="unit2" style="top: 76.5%;left: 95%;">车</div>
|
|
|
|
@ -77,7 +77,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTable" style="color:#49b2fc">
|
|
|
|
|
{{ (parseFloat(item.expend/item.yield)||0).toFixed(2) }}KWh
|
|
|
|
|
{{ (parseFloat(item.expend / item.yield) || 0).toFixed(2) }}KWh
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -137,7 +137,7 @@ export default {
|
|
|
|
|
methods: {
|
|
|
|
|
getData() {
|
|
|
|
|
dryRoomDataCarousel().then(e => {
|
|
|
|
|
this.table1Data = e.data.dryingroomList.filter(v=>parseFloat(v.expend/v.yield)) || []
|
|
|
|
|
this.table1Data = e.data.dryingroomList.filter(v => parseFloat(v.expend / v.yield)) || []
|
|
|
|
|
})
|
|
|
|
|
EnergyExpend().then(e => {
|
|
|
|
|
this.expend = e.map(v => v.expend).reduce((a, b) => a + b, 0).toFixed(2)
|
|
|
|
@ -165,7 +165,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: e.map(v => parseFloat(v.monitorName.split(' - ')?.[1]?.split('(')?.[0])+"#"),
|
|
|
|
|
data: e.map(v => parseFloat(v.monitorName.split(' - ')?.[1]?.split('(')?.[0]) + "#"),
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true, //隐藏X轴轴线
|
|
|
|
|
lineStyle: {
|
|
|
|
@ -176,7 +176,7 @@ export default {
|
|
|
|
|
show: true //隐藏X轴刻度
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval:0,
|
|
|
|
|
interval: 0,
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff' //X轴文字颜色
|
|
|
|
@ -241,8 +241,7 @@ export default {
|
|
|
|
|
this.$refs.chart3.setData(option2)
|
|
|
|
|
})
|
|
|
|
|
agvdata().then(e => {
|
|
|
|
|
console.log(e)
|
|
|
|
|
this.agvData = e.Data.filter(v=>v.State===2)
|
|
|
|
|
this.agvData = e.Data.filter(v => v.State === 2)
|
|
|
|
|
})
|
|
|
|
|
PlanAchievementRate().then(e => {
|
|
|
|
|
this.proData = e.data
|
|
|
|
@ -279,57 +278,144 @@ export default {
|
|
|
|
|
createTimeStart: createTimeStart,
|
|
|
|
|
createTimeEnd: createTimeEnd,
|
|
|
|
|
chartType: 'cp'
|
|
|
|
|
}).then(e => {
|
|
|
|
|
}).then(vv => {
|
|
|
|
|
let e = vv.checkList
|
|
|
|
|
console.log(e)
|
|
|
|
|
|
|
|
|
|
let option = {
|
|
|
|
|
grid: {
|
|
|
|
|
top: '15%',
|
|
|
|
|
bottom: '10%',
|
|
|
|
|
left: '6%',
|
|
|
|
|
right: '6%'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
// Use axis to trigger tooltip
|
|
|
|
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
|
|
|
type: 'shadow',
|
|
|
|
|
label: {
|
|
|
|
|
show: true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
right: 0,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#eee'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '3%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'value'
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: '#ccc'
|
|
|
|
|
data: e.map(v => v.machineName),
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true, //隐藏X轴轴线
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true //隐藏X轴刻度
|
|
|
|
|
},
|
|
|
|
|
data: e.checkList.map(v => v.machineName),
|
|
|
|
|
// data: e.checkList.map((v,k) => '产品'+k),
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval:0,
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff' //X轴文字颜色
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '合格数',
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
name: '合格率',
|
|
|
|
|
nameTextStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '合格数量',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
stack: 'total',
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'insideRight',
|
|
|
|
|
formatter: "{c}车",
|
|
|
|
|
color: "#000"
|
|
|
|
|
position: 'top',
|
|
|
|
|
formatter: "{c}%",
|
|
|
|
|
color: "#fff"
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
name: '合格率',
|
|
|
|
|
type: 'line',
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
smooth: true, //平滑曲线显示
|
|
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
|
|
symbol: "emptyCircle", //标记的图形为实心圆
|
|
|
|
|
symbolSize: 5, //标记的大小
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// //折线拐点标志的样式
|
|
|
|
|
// color: "#058cff",
|
|
|
|
|
// },
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// color: "#058cff",
|
|
|
|
|
// },
|
|
|
|
|
// areaStyle: {
|
|
|
|
|
// color: "rgba(5,140,255, 0.2)",
|
|
|
|
|
// },
|
|
|
|
|
data: e.map(v => ((parseFloat(v.okQuality) / parseFloat(v.quality)) * 100).toFixed(2)),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'top',
|
|
|
|
|
formatter: "{c}",
|
|
|
|
|
color: "#fff"
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: {
|
|
|
|
|
type: 'linear',
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 1,
|
|
|
|
|
y: 1,
|
|
|
|
|
x2: 0,
|
|
|
|
|
y2: 0,
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0, color: '#1e60f2' // 0% 处的颜色
|
|
|
|
@ -339,23 +425,102 @@ export default {
|
|
|
|
|
global: false // 缺省为 false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: e.checkList.map(v => parseFloat(v.quality))
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '不合格数量',
|
|
|
|
|
name: '合格数',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
stack: 'total',
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'right'
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: e.checkList.map(v => 0)
|
|
|
|
|
smooth: true, //平滑曲线显示
|
|
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
|
|
symbol: "emptyCircle", //标记的图形为实心圆
|
|
|
|
|
symbolSize: 5, //标记的大小
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// //折线拐点标志的样式
|
|
|
|
|
// color: "#058cff",
|
|
|
|
|
// },
|
|
|
|
|
// lineStyle: {
|
|
|
|
|
// color: "#058cff",
|
|
|
|
|
// },
|
|
|
|
|
// areaStyle: {
|
|
|
|
|
// color: "rgba(5,140,255, 0.2)",
|
|
|
|
|
// },
|
|
|
|
|
data: e.map(v => parseFloat(v.quality)),
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
// let option = {
|
|
|
|
|
// tooltip: {
|
|
|
|
|
// trigger: 'axis',
|
|
|
|
|
// axisPointer: {
|
|
|
|
|
// // Use axis to trigger tooltip
|
|
|
|
|
// type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// legend: {
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// color: '#eee'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// grid: {
|
|
|
|
|
// left: '3%',
|
|
|
|
|
// right: '4%',
|
|
|
|
|
// bottom: '3%',
|
|
|
|
|
// containLabel: true
|
|
|
|
|
// },
|
|
|
|
|
// xAxis: {
|
|
|
|
|
// type: 'value'
|
|
|
|
|
// },
|
|
|
|
|
// yAxis: {
|
|
|
|
|
// type: 'category',
|
|
|
|
|
// axisLabel: {
|
|
|
|
|
// color: '#ccc'
|
|
|
|
|
// },
|
|
|
|
|
// data: e.checkList.map(v => v.machineName),
|
|
|
|
|
// // data: e.checkList.map((v,k) => '产品'+k),
|
|
|
|
|
// },
|
|
|
|
|
// series: [
|
|
|
|
|
// {
|
|
|
|
|
// name: '合格数量',
|
|
|
|
|
// type: 'bar',
|
|
|
|
|
// stack: 'total',
|
|
|
|
|
// label: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// position: 'insideRight',
|
|
|
|
|
// formatter: "{c}车",
|
|
|
|
|
// color: "#000"
|
|
|
|
|
// },
|
|
|
|
|
// emphasis: {
|
|
|
|
|
// focus: 'series'
|
|
|
|
|
// },
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
// color: {
|
|
|
|
|
// type: 'linear',
|
|
|
|
|
// x: 0,
|
|
|
|
|
// y: 0,
|
|
|
|
|
// x2: 1,
|
|
|
|
|
// y2: 0,
|
|
|
|
|
// colorStops: [{
|
|
|
|
|
// offset: 0, color: '#1e60f2' // 0% 处的颜色
|
|
|
|
|
// }, {
|
|
|
|
|
// offset: 1, color: '#00b9ff' // 100% 处的颜色
|
|
|
|
|
// }],
|
|
|
|
|
// global: false // 缺省为 false
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// data: e.checkList.map(v => parseFloat(v.quality))
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// name: '不合格数量',
|
|
|
|
|
// type: 'bar',
|
|
|
|
|
// stack: 'total',
|
|
|
|
|
// label: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// position: 'right'
|
|
|
|
|
// },
|
|
|
|
|
// emphasis: {
|
|
|
|
|
// focus: 'series'
|
|
|
|
|
// },
|
|
|
|
|
// data: e.checkList.map(v => 0)
|
|
|
|
|
// },
|
|
|
|
|
// ]
|
|
|
|
|
// };
|
|
|
|
|
this.$refs.chart1.setData(option)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
@ -593,6 +758,7 @@ export default {
|
|
|
|
|
left: 31.3%;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chart3 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 37.4%;
|
|
|
|
@ -601,7 +767,7 @@ export default {
|
|
|
|
|
left: 31.3%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.case-item {
|
|
|
|
|
.case-item {
|
|
|
|
|
border: 2px solid #0c61ad;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
margin: 8px 0 0 0;
|
|
|
|
|