新增看板
This commit is contained in:
53
src/views/common/board-part-table.vue
Normal file
53
src/views/common/board-part-table.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-03-07 15:31:13
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-07-01 16:58:50
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="main-body">
|
||||
<el-table
|
||||
size='mini'
|
||||
:data="tableData"
|
||||
:header-cell-style="{background:'#082c34',color:'#acb9be',padding:'0px'}"
|
||||
:cell-style="{background:'#04222d',color:'#acb9be',padding:'5px 0px'}"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="30" align="center"> </el-table-column>
|
||||
<el-table-column prop="name" label="客户名称" align="center"> </el-table-column>
|
||||
<el-table-column prop="code" label="订单编号" align="center"> </el-table-column>
|
||||
<el-table-column prop="num" label="数量" width="50" align="center"> </el-table-column>
|
||||
<el-table-column prop="productName" label="产品名称" align="center"> </el-table-column>
|
||||
<el-table-column prop="weight" label="重量" width="50" align="center"> </el-table-column>
|
||||
<el-table-column prop="process" label="加工方式" width="60" align="center"> </el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'board-part-table',
|
||||
components: {},
|
||||
props: {
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
created () {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-body{
|
||||
margin: 5px;
|
||||
}
|
||||
.main-body /deep/ .cell{
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
226
src/views/common/board-part.vue
Normal file
226
src/views/common/board-part.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-03-07 15:31:13
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-07-01 16:58:00
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="title">
|
||||
<div class="tipDiv"></div>
|
||||
加工单信息
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<div class="main-header">
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="8">
|
||||
<div class="front">
|
||||
<img
|
||||
:src="'/static/img/lu/'+imgUrl+'.png'"
|
||||
style="display:block;margin:auto"
|
||||
/>炉号
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-row>
|
||||
<div class="mid top-info">
|
||||
1293803
|
||||
<div style="color: #fff;margin: 5px 0;">加工单编号</div>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div class="mid bottom-info">
|
||||
129
|
||||
<div style="color: #fff;margin: 5px 0;">工艺号</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="back">
|
||||
<el-progress
|
||||
:percentage="80"
|
||||
:stroke-width="8"
|
||||
:show-text="false"
|
||||
></el-progress>
|
||||
<div style="margin: 5px 0;">{{ hour }}:{{ minute }}:{{ second }}</div>
|
||||
<div style="color: #fff;font-size:14px">剩余时间</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="main-table">
|
||||
<div class="tipDiv"></div>
|
||||
标识信息卡
|
||||
</div>
|
||||
<part-table :tableData="tableData"></part-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import partTable from './board-part-table.vue'
|
||||
export default {
|
||||
components: {partTable},
|
||||
props: {
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
countdown: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
'hours': 1,
|
||||
'minutes': 10,
|
||||
'seconds': 0
|
||||
})
|
||||
},
|
||||
imgUrl: {
|
||||
type: String,
|
||||
default: 'BMA1'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
hours: 1,
|
||||
minutes: 12,
|
||||
seconds: 0
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.hours = this.countdown.hours
|
||||
this.minutes = this.countdown.minutes
|
||||
this.seconds = this.countdown.seconds
|
||||
},
|
||||
mounted () {
|
||||
this.add()
|
||||
},
|
||||
watch: {
|
||||
// 监听数值变化
|
||||
second: {
|
||||
handler (newVal) {
|
||||
this.num(newVal)
|
||||
}
|
||||
},
|
||||
minute: {
|
||||
handler (newVal) {
|
||||
this.num(newVal)
|
||||
}
|
||||
},
|
||||
hour: {
|
||||
handler (newVal) {
|
||||
this.num(newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 初始化数据
|
||||
second () {
|
||||
return this.num(this.seconds)
|
||||
},
|
||||
minute () {
|
||||
return this.num(this.minutes)
|
||||
},
|
||||
hour () {
|
||||
return this.num(this.hours)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
num (n) {
|
||||
return n < 10 ? '0' + n : '' + n
|
||||
},
|
||||
// 倒计时函数
|
||||
add () {
|
||||
let time = window.setInterval(() => {
|
||||
if (this.hours !== 0 && this.minutes === 0 && this.seconds === 0) {
|
||||
this.hours -= 1
|
||||
this.minutes = 59
|
||||
this.seconds = 59
|
||||
} else if (
|
||||
this.hours === 0 &&
|
||||
this.minutes !== 0 &&
|
||||
this.seconds === 0
|
||||
) {
|
||||
this.minutes -= 1
|
||||
this.seconds = 59
|
||||
} else if (
|
||||
this.hours === 0 &&
|
||||
this.minutes === 0 &&
|
||||
this.seconds === 0
|
||||
) {
|
||||
this.seconds = 0
|
||||
window.clearInterval(time)
|
||||
} else if (
|
||||
this.hours !== 0 &&
|
||||
this.minutes !== 0 &&
|
||||
this.seconds === 0
|
||||
) {
|
||||
this.minutes -= 1
|
||||
this.seconds = 59
|
||||
} else {
|
||||
this.seconds -= 1
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
margin: 8px 0;
|
||||
.tipDiv {
|
||||
border-radius: 3px;
|
||||
width: 8px;
|
||||
height: 22px;
|
||||
margin-right: 20px;
|
||||
background-color: #54fdef;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.main-body{
|
||||
background-color: #04242d;
|
||||
.main-header {
|
||||
.front {
|
||||
min-height: 136px;
|
||||
border-radius: 4px;
|
||||
padding: 6px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
background: linear-gradient(to bottom, #133e46 0%, #04202c 100%);
|
||||
}
|
||||
.mid {
|
||||
min-height: 64px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 5px;
|
||||
padding: 6px;
|
||||
color: #48dcd1;
|
||||
text-align: center;
|
||||
background: linear-gradient(to bottom, #0b2c36 0%, #04202c 100%);
|
||||
}
|
||||
.back {
|
||||
min-height: 136px;
|
||||
padding: 25px 5px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
color: #48dcd1;
|
||||
}
|
||||
.back /deep/ .el-progress-bar__inner {
|
||||
background: linear-gradient(to right, #62fbb9 0%, #fdd64a 100%);
|
||||
}
|
||||
}
|
||||
.main-table{
|
||||
color: #ffffff;
|
||||
margin: 10px;
|
||||
.tipDiv{
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 3px 10px 3px 0;
|
||||
background-color: #54fdef;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
128
src/views/common/board.vue
Normal file
128
src/views/common/board.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-03-07 15:31:13
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-07-04 10:49:38
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="main-body">
|
||||
<div class="container-title">
|
||||
浙江求精科技车间生产看板
|
||||
</div>
|
||||
<el-row :gutter="20" style="margin:20px">
|
||||
<el-col :span="8">
|
||||
<board :tableData="tableData1" imgUrl='BMA1'></board>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<board :tableData="tableData2" imgUrl='BMA2' :countdown="countdown"></board>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<board :tableData="tableData2" imgUrl='BMA3'></board>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" style="margin:20px">
|
||||
<el-col :span="8">
|
||||
<board :tableData="tableData2" imgUrl='BMA4' :countdown="countdown1"></board>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<board :tableData="tableData2" imgUrl='BMB1'></board>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<board :tableData="tableData1" imgUrl='BMB2' :countdown="countdown"></board>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" style="margin:20px">
|
||||
<el-col :span="8">
|
||||
<board :tableData="tableData2" imgUrl='BMB3' :countdown="countdown"></board>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<board :tableData="tableData1" imgUrl='BMC1'></board>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<board :tableData="tableData2" imgUrl='BMC2' :countdown="countdown1"></board>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import board from './board-part'
|
||||
export default {
|
||||
name: 'Board',
|
||||
components: { board },
|
||||
data () {
|
||||
return {
|
||||
tableData1: [
|
||||
{
|
||||
name: '樟子松',
|
||||
code: '1103434',
|
||||
num: 12,
|
||||
productName: '株洲铁',
|
||||
weight: 123,
|
||||
process: '压缩'
|
||||
},
|
||||
{
|
||||
name: '阿斯蒂芬',
|
||||
code: '1103434',
|
||||
num: 122,
|
||||
productName: '株洲铁',
|
||||
weight: 815,
|
||||
process: '压缩'
|
||||
},
|
||||
{
|
||||
name: '风都',
|
||||
code: '1103434',
|
||||
num: 334,
|
||||
productName: '株洲铁',
|
||||
weight: 1223,
|
||||
process: '压缩'
|
||||
}
|
||||
],
|
||||
tableData2: [
|
||||
{
|
||||
name: '阿斯蒂芬',
|
||||
code: '1103434',
|
||||
num: 122,
|
||||
productName: '株洲铁',
|
||||
weight: 815,
|
||||
process: '压缩'
|
||||
}
|
||||
],
|
||||
countdown: {
|
||||
'hours': 5,
|
||||
'minutes': 20,
|
||||
'seconds': 12
|
||||
},
|
||||
countdown1: {
|
||||
'hours': 11,
|
||||
'minutes': 43,
|
||||
'seconds': 56
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-body {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
background: url(~@/assets/img/board/1.png) center no-repeat;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
|
||||
.container-title {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: url(~@/assets/img/board/2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #00fff0;
|
||||
font-size: 28px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user