xins
/
HwMes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板地址

Browse Source
master
夜笙歌 4 months ago
parent 99b61466fe
commit 709b1cb4e1
1 changed files with 563 additions and 186 deletions
Show Stats Download Patch File Download Diff File

749
hw-ui/src/views/board/production/secondFloor.vue
Unescape Escape View File

@ -1,30 +1,83 @@
<template>
<div class="app-container">
<div class="headTitle">京源生产监控平台</div>
<div class="time">{{
time
}}
</div>
<div v-for="(i,k) in title"
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
class="title"
>
{{ i }}
</div>
<div class="table1">
<div style="background-color: #094170">
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
编号
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 36%">
生产工单
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 14%">
计划数量
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 14%">
实际数量
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
差异值
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 12%">
完成率
</div>
</div>
<vue-seamless-scroll
:class-option="scrollTableOption"
:data="scrollTableData"
class="case-item"
style="height: calc(100% - 30px);overflow: hidden;"
>
<div
v-for="(item, index) in scrollTableData"
:key="index"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem" style="width: 12%"
>
{{ item.no }}
</div>
<div
class="scrollTableItem" style="width:36%"
>
{{ item.orderCode }}
</div>
<div
class="scrollTableItem" style="width: 14%"
>
{{ item.planAmount }}
</div>
<div
class="scrollTableItem" style="width: 14%"
>
{{ item.completeAmount }}
</div>
<div
class="scrollTableItem" style="width: 12%"
>
{{ item.quantityAmount }}
</div>
<div
class="scrollTableItem" style="width: 12%"
>
{{ item.finishingRate }}%
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
<div class="chart1">
<Chart key="chart1" ref="chart1"></Chart>
</div>
<div class="chart2">
<div v-for="(i,k) in 10" class="item">
<div style="top: 25%;left:5%" class="block">人员{{ k }}</div>
<div style="top: 50%;left:5%" class="block">工序：切割</div>
<div style="top: 75%;left:5%" class="block">产品计划数量：10000</div>
<div style="text-align: right;top: 25%;right:5%" class="block">8888</div>
<div style="text-align: right;top: 50%;right:5%" class="block">88%</div>
<div style="text-align: right;top: 75%;right:5%;width: 50%;height: 0.8vw" class="block">
<el-progress :format="()=>{return ''}" :percentage="88"></el-progress>
</div>
</div>
<Chart key="chart2" ref="chart2"></Chart>
</div>
<div class="chart3">
<Chart key="chart3" ref="chart3"></Chart>
@ -32,6 +85,19 @@
<div class="chart4">
<Chart key="chart4" ref="chart4"></Chart>
</div>
<div class="num1 num1_1" style="top: 17%;left: 31.1%;color:#5fc2f2">{{ topData.planAmount[0] }}</div>
<div class="num1 num1_2" style="top: 17%;left:34.1%;color:#5fc2f2">{{ topData.planAmount[1] }}</div>
<div class="num1 num1_3" style="top: 17%;left:37%;color:#5fc2f2">{{ topData.planAmount[2] }}</div>
<div class="num1 num1_4" style="top: 17%;left:40%;color:#5fc2f2">{{ topData.planAmount[3] }}</div>
<div class="num1 num1_5" style="top: 17%;left:45.6%;color:#59ee7b">{{ topData.completeAmount[0] }}</div>
<div class="num1 num1_6" style="top: 17%;left:48.6%;color:#59ee7b">{{ topData.completeAmount[1] }}</div>
<div class="num1 num1_7" style="top: 17%;left:51.5%;color:#59ee7b">{{ topData.completeAmount[2] }}</div>
<div class="num1 num1_8" style="top: 17%;left:54.5%;color:#59ee7b">{{ topData.completeAmount[3] }}</div>
<div class="num1 num1_9" style="top: 17%;left:60%;color:#f60008">{{ topData.diff[0] }}</div>
<div class="num1 num1_10" style="top: 17%;left:63%;color:#f60008">{{ topData.diff[1] }}</div>
<div class="num1 num1_11" style="top: 17%;left:65.9%;color:#f60008">{{ topData.diff[2] }}</div>
<div class="num1 num1_12" style="top: 17%;left:68.9%;color:#f60008">{{ topData.diff[3] }}</div>
<div class="state" :style="`background-color:${LineStatus?'#ffff00':'#ff0000'}`"></div>
</div>
</template>
@ -63,17 +129,16 @@ export default {
completeAmount: [0, 0, 0, 0],
diff: [0, 0, 0, 0]
},
time: parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}'),
title: [
'工序生产进度',
'工序名称对比',
'工单计划',
'小时产量',
'七日产量对比',
' ',
' ',
' ',
' ',
' ',
' '
'粉尘数据走势',
'设备时长统计',
'计划数量:',
'完成数量:',
'差异值:',
'产线状态:'
],
titlePosition: [
{
@ -85,7 +150,7 @@ export default {
left: 75
},
{
top: 70.3,
top: 63,
left: 5.5
},
{
@ -127,14 +192,13 @@ export default {
}
},
mounted() {
setInterval(() => {
this.time = parseTime(new Date(), '{y}-{m}-{d} 星期{a} {h}:{i}:{s}')
}, 1000)
this.getData()
window.onresize = () => {
this.$refs.chart1.chart.resize()
this.$refs.chart2.chart.resize()
this.$refs.chart3.chart.resize()
this.$refs.chart4.chart.resize()
}
},
methods: {
@ -151,81 +215,117 @@ export default {
}
})
})
this.$refs.chart1.setData({
tooltip: {},
radar: {
indicator: [
{ name: '打磨', max: 6500 },
{ name: '折弯', max: 16000 },
{ name: '组装', max: 30000 },
{ name: '下料', max: 38000 },
{ name: '机加', max: 52000 },
{ name: '1', max: 25000 }
]
},
series: [
{
name: '时间',
type: 'radar',
// areaStyle: {normal: {}},
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '时间'
}
]
}
]
selectLatestWorkOrder().then(e => {
this.topData.planAmount = [...[0, 0, 0, 0], ...(e.data.planAmount || 0).toString().split('')].slice(-4)
this.topData.completeAmount = [...[0, 0, 0, 0], ...(e.data.completeAmount || 0).toString().split('')].slice(-4)
this.topData.diff = [...[0, 0, 0, 0], ...Math.abs((parseFloat(e.data.planAmount) - parseFloat(e.data.completeAmount)) || 0).toString().split('')].slice(-4)
})
this.$refs.chart3.setData({
grid: {
top: 30,
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
legend: {
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: [1, 2, 3],
axisLabel: {
margin: 10,
color: '#ffffff63'
getLineStatus().then(e => {
this.LineStatus = e.msg === 'True'
})
getHourProduction().then(e => {
this.$refs.chart1.setData({
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
axisLine: {
show: false
grid: {
left: '0',
right: '4%',
bottom: '0',
top: 20,
containLabel: true
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
xAxis: {
type: 'category',
data: e.data.map(v => v.hour),
axisLine: {
lineStyle: {
color: 'white'
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei'
}
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
}
},
yAxis: [
{
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: 'white'
}
},
splitLine: {
show: false
},
axisLabel: {}
},
series: [
{
name: '数量',
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 0.75 * vw
}
}
},
type: 'bar',
barWidth: '30%',
barMaxWidth: 50,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#39ffff'
},
{
offset: 1,
color: '#5affa6'
}
])
}
},
data: e.data.map(v => v.amount)
}
]
})
})
getDayProduction().then(e => {
this.$refs.chart2.setData({
grid: {
top: 30,
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: e.data.map(v => v.day),
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
@ -233,53 +333,376 @@ export default {
}
},
splitLine: {
show: true,
show: false,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
}
},
yAxis: [
{
type: 'value',
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
},
axisLine: {
lineStyle: {
color: '#fff',
width: 2
}
}
}
],
series: [
{
name: '产量',
type: 'line',
smooth: true, //是否平滑曲线显示
showAllSymbol: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#fff' // 线条颜色
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},
itemStyle: {
color: 'red',
borderColor: '#fff',
borderWidth: 3
},
tooltip: {
show: false
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#eb64fb'
},
{
offset: 1,
color: '#3fbbff0d'
}
],
false
)
}
},
data: e.data.map(v => v.instock_amount)
}
]
})
})
dustAnalysis().then(e => {
this.$refs.chart3.setData({
grid: {
top: 30,
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
legend: {
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: e.data.map(v => parseTime(v.recodeTime)),
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#fff',
width: 2
}
}
}
],
series: [
{
name: '1',
type: 'line',
smooth: true, //是否平滑曲线显示
showAllSymbol: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#fff' // 线条颜色
color: '#ffffff1f'
}
},
label: {
splitLine: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
}
},
yAxis: [
{
type: 'value',
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
},
axisLine: {
lineStyle: {
color: '#fff',
width: 2
}
}
}
],
series: [
{
name: 'pm1',
type: 'line',
smooth: true, //是否平滑曲线显示
showAllSymbol: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#fff' // 线条颜色
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},
itemStyle: {
color: 'red',
borderColor: '#fff',
borderWidth: 3
},
tooltip: {
// show: false,
},
data: e.data.map(v => v.pm1)
},
itemStyle: {
color: 'red',
borderColor: '#fff',
borderWidth: 3
},
tooltip: {
// show: false,
{
name: 'pm2',
type: 'line',
smooth: true, //是否平滑曲线显示
showAllSymbol: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#f0f' // 线条颜色
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},
itemStyle: {
color: 'red',
borderColor: '#fff',
borderWidth: 3
},
tooltip: {
// show: false,
},
data: e.data.map(v => v.pm2)
},
data: [1, 2, 3]
}
]
{
name: 'pm10',
type: 'line',
smooth: true, //是否平滑曲线显示
showAllSymbol: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#ff0' // 线条颜色
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},
itemStyle: {
color: 'red',
borderColor: '#fff',
borderWidth: 3
},
tooltip: {
// show: false,
},
data: e.data.map(v => v.pm10)
}
]
})
})
deviceTimeCount().then(e => {
console.log(e)
this.$refs.chart4.setData({
grid: {
top: 30,
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: e.data.map(v => parseTime(v.hour)),
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
}
},
yAxis: [
{
type: 'value',
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
},
axisLine: {
lineStyle: {
color: '#fff',
width: 2
}
}
}
],
series: [
{
name: '产量',
type: 'line',
smooth: true, //是否平滑曲线显示
showAllSymbol: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#fff' // 线条颜色
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},
itemStyle: {
color: 'red',
borderColor: '#fff',
borderWidth: 3
},
tooltip: {
show: false
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#eb64fb'
},
{
offset: 1,
color: '#3fbbff0d'
}
],
false
)
}
},
data: e.data.map(v => v.timeCount)
}
]
})
})
}
}
}
@ -287,7 +710,7 @@ export default {
<style lang="less" scoped>
.app-container {
background-image: url("../../../assets/board/productionBg1_4.jpg");
background-image: url("../../../assets/board/productionBg1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
@ -321,27 +744,6 @@ export default {
transform: translate(-50%, -50%);
}
.time {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5vw;
color: #eee;
}
.centerImg {
position: absolute;
top: 50%;
left: 50%;
width: 30%;
height: 23.96vw;
background-image: url("../../../assets/board/center.png");
background-repeat: no-repeat;
background-size: 100% 100%;
transform: translate(-50%, -50%);
}
.table1 {
position: absolute;
top: 14.5%;
@ -365,38 +767,35 @@ export default {
top: 14.5%;
left: 73%;
width: 23.8%;
height: 51%;
height: 45.5%;
}
.chart2 {
//position: absolute;
//top: 66%;
//left: 3.3%;
//width: 23.8%;
//height: 29%;
position: absolute;
top: 14.5%;
top: 66%;
left: 3.3%;
width: 23.8%;
height: 51%;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
height: 29%;
}
.chart3 {
position: absolute;
top: 74%;
left: 3.3%;
width: 92.8%;
height: 21%;
top: 66%;
left: 28.4%;
width: 43.1%;
height: 29%;
}
.chart4 {
position: absolute;
top: 66%;
left: 73%;
width: 23.8%;
height: 29%;
}
.state {
position: absolute;
@ -408,26 +807,4 @@ export default {
border-radius: 50%;
background-color: #ffff00;
}
.status {
position: absolute;
top: 16%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5vw;
color: #eee;
}
.item {
position: relative;
width: 100%;
height: 5vw;
border-bottom: 1px solid #ccc2;
.block {
position: absolute;
color: #ccc;
transform: translateY(-50%);
}
}
</style>

Write Preview
Loading…
Cancel
Save