367 lines
8.9 KiB
Vue
367 lines
8.9 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2022-03-07 15:31:13
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2022-03-08 16:55:37
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div class="main-body">
|
|
<div class="top-title">
|
|
<img src="../../assets/wcs/top.png" style="margin-top:-10px;width:100%">
|
|
</div>
|
|
<div class="top-status">
|
|
<div style="color:#FF1F1F">
|
|
<div class="status-circle" style="background-color:#FF1F1F" />
|
|
Non Scheduled
|
|
</div>
|
|
<div style="color:#6CCE0A">
|
|
<div class="status-circle" style="background-color:#6CCE0A" />
|
|
Scheduled Downtime
|
|
</div>
|
|
<div style="color:#F54F87">
|
|
<div class="status-circle" style="background-color:#F54F87" />
|
|
Unscheduled Downtime
|
|
</div>
|
|
<div style="color:#1600FF">
|
|
<div class="status-circle" style="background-color:#1600FF" />
|
|
Productive
|
|
</div>
|
|
<div style="color:#FFB30E">
|
|
<div class="status-circle" style="background-color:#FFB30E" />
|
|
Engineering
|
|
</div>
|
|
<div style="color:#4228A9">
|
|
<div class="status-circle" style="background-color:#4228A9" />
|
|
Standby
|
|
</div>
|
|
</div>
|
|
<div class="middle-top-jixieshou">
|
|
<el-row :gutter="40">
|
|
<el-col :span="2">
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
|
|
style="width:100%"
|
|
>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
|
|
style="width:100%"
|
|
>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
|
|
style="width:100%"
|
|
>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
|
|
style="width:100%"
|
|
>
|
|
</el-col>
|
|
<el-col :span="2" :offset="3">
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
|
|
style="width:100%"
|
|
>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
|
|
style="width:100%"
|
|
>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
|
|
style="width:100%"
|
|
>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
|
|
style="width:100%"
|
|
>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
|
|
style="width:100%"
|
|
>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
|
|
style="width:100%"
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="middle-guidao">
|
|
<el-row :gutter="20">
|
|
<el-col :span="4" :offset="4">
|
|
<img
|
|
src="../../assets/wcs/huoche/Engineering.png"
|
|
style="height:117px;"
|
|
>
|
|
</el-col>
|
|
<el-col :span="4" :offset="8">
|
|
<img
|
|
src="../../assets/wcs/huoche/Productive.png"
|
|
style="height:117px"
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="middle-top-jixieshou">
|
|
<el-row :gutter="40">
|
|
<el-col :span="2">
|
|
<div>
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Non Scheduled.png"
|
|
style="width:100%"
|
|
>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2" :offset="2">
|
|
<div>
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Non Scheduled.png"
|
|
style="width:100%"
|
|
>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2" :offset="11">
|
|
<div>
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Engineering.png"
|
|
style="width:100%"
|
|
>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2" :offset="1">
|
|
<div>
|
|
<img
|
|
src="../../assets/wcs/jixieshou/Standby.png"
|
|
style="width:100%"
|
|
>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="bottom-table">
|
|
<div class="bottom-table-title">
|
|
{{ $t('module.basicData.wcs.tableTitle') }}
|
|
</div>
|
|
<div class="table">
|
|
<base-table
|
|
:page="listQuery.current"
|
|
:limit="listQuery.size"
|
|
:table-config="tableProps"
|
|
:table-data="list"
|
|
:is-loading="listLoading"
|
|
>
|
|
<method-btn
|
|
slot="handleBtn"
|
|
:method-list="tableBtn"
|
|
@clickBtn="handleClick"
|
|
/>
|
|
</base-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BaseTable from './components/BaseTable'
|
|
import MethodBtn from './components/MethodBtn'
|
|
import i18n from '@/lang'
|
|
|
|
const tableBtn = [
|
|
{
|
|
type: 'stop',
|
|
icon: 'icon1',
|
|
btnName: 'btn.stop'
|
|
},
|
|
{
|
|
type: 'delete',
|
|
icon: 'icon2',
|
|
btnName: 'btn.delete'
|
|
}
|
|
]
|
|
|
|
const tableProps = [
|
|
{
|
|
prop: 'taskCode',
|
|
label: i18n.t('module.basicData.Warehouse.taskCode'),
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'name',
|
|
label: i18n.t('module.basicData.Warehouse.VehicleName'),
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'targetLocation',
|
|
label: i18n.t('module.basicData.Warehouse.TargetLocation'),
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'FullBoxNumber',
|
|
label: i18n.t('module.basicData.Warehouse.FullBoxNumber'),
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'EmptyFork',
|
|
label: i18n.t('module.basicData.Warehouse.EmptyFork'),
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'TaskBoxNumber',
|
|
label: i18n.t('module.basicData.Warehouse.TaskBoxNumber'),
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'ExecutionOperation',
|
|
label: i18n.t('module.basicData.Warehouse.ExecutionOperation'),
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'NextOperation',
|
|
label: i18n.t('module.basicData.Warehouse.NextOperation'),
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'CurrentExecutionStatus',
|
|
label: i18n.t('module.basicData.Warehouse.CurrentExecutionStatus'),
|
|
align: 'center'
|
|
}
|
|
]
|
|
|
|
export default {
|
|
name: 'DeviceMonitor',
|
|
components: { BaseTable, MethodBtn },
|
|
data() {
|
|
return {
|
|
tableBtn,
|
|
tableProps,
|
|
list: [],
|
|
listLoading: true,
|
|
listQuery: {
|
|
current: 1,
|
|
size: 10
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
handleClick(raw) {
|
|
if (raw.type === 'delete') {
|
|
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
|
|
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
|
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
|
type: 'warning'
|
|
}).then(() => {
|
|
console.log('delete')
|
|
}).catch(() => {})
|
|
}
|
|
},
|
|
getList(key) {
|
|
this.listLoading = true
|
|
// factoryList(this.listQuery).then(response => {
|
|
// if (response.data.records) {
|
|
// this.list = response.data.records
|
|
// } else {
|
|
// this.list.splice(0, this.list.length)
|
|
// }
|
|
// this.total = response.data.total
|
|
this.list = [
|
|
{
|
|
name: 1
|
|
},
|
|
{
|
|
name: 2
|
|
}
|
|
]
|
|
this.listLoading = false
|
|
// })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main-body {
|
|
min-height: 100%;
|
|
width: 100%;
|
|
background: url("../../assets/wcs/di tu.png") center no-repeat;
|
|
background-size: cover;
|
|
overflow: hidden;
|
|
|
|
.top-title {
|
|
height: 80px;
|
|
}
|
|
|
|
.top-status {
|
|
width: 85%;
|
|
margin-left: 7.5%;
|
|
background-color: #ffffff;
|
|
border-radius: 10px;
|
|
box-shadow: 1px 1px 10px #dfedf9, -1px -1px 10px #dfedf9;
|
|
padding: 15px 0;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
display: -webkit-flex;
|
|
justify-content: space-around;
|
|
}
|
|
.status-circle {
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
float: left;
|
|
}
|
|
.middle-top-jixieshou {
|
|
width: 85%;
|
|
margin-left: 7.5%;
|
|
}
|
|
.middle-guidao {
|
|
height: 208px;
|
|
width: 90%;
|
|
margin: 10px 5%;
|
|
padding: 40px;
|
|
background: url("../../assets/wcs/gui dao.png") center no-repeat;
|
|
background-size: 100% 208px;
|
|
overflow: hidden;
|
|
}
|
|
.bottom-table {
|
|
height: 280px;
|
|
width: 90%;
|
|
margin: 10px 5%;
|
|
background: url("../../assets/wcs/xia.png") center no-repeat;
|
|
background-size: 100% 280px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
.bottom-table-title {
|
|
margin-top: 15px;
|
|
font-size: 18px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #030609;
|
|
line-height: 25px;
|
|
letter-spacing: 5px;
|
|
}
|
|
.table {
|
|
width: 90%;
|
|
margin-top: 20px;
|
|
margin-left: 5%;
|
|
}
|
|
}
|
|
</style>
|