料架内容优化
This commit is contained in:
parent
22b2fbae34
commit
605f949c1e
@ -1,7 +1,7 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 大屏数据查询
|
||||
* 叫料大屏数据查询
|
||||
* @param {查询条件} data
|
||||
*/
|
||||
export function SearchShelfLightInfomation() {
|
||||
@ -10,3 +10,14 @@ export function SearchShelfLightInfomation() {
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 补料大屏数据查询
|
||||
* @param {查询条件} data
|
||||
*/
|
||||
export function SearchfeedingMaterialInfomation() {
|
||||
return request({
|
||||
url: 'PBL/bigscreen/searchfeedingMaterial',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
<div class="card-left-text">{{ item2.layerNum === 1 ? '上层' : '中层' }}</div>
|
||||
</el-col>
|
||||
<!-- 右侧物料 -->
|
||||
<el-col :span="20" :class="`${getStatusClass(item)}`">
|
||||
<el-col :span="20" :class="`border ${getStatusClass(item)}`">
|
||||
<el-row>
|
||||
<el-col :span="6" v-for="(item3, index3) in item2.maxCapacity" :key="index2">
|
||||
<div :class="`box ${boxSelectClass(item2.packageNum, index3)}`"></div>
|
||||
@ -91,16 +91,20 @@ function closeLight(item) {
|
||||
item.status = 0
|
||||
}
|
||||
}
|
||||
|
||||
// 灯状态
|
||||
function getStatusClass(item) {
|
||||
return item.isLight ? 'light' : ''
|
||||
}
|
||||
|
||||
// 空箱
|
||||
function boxSelectClass(num, index) {
|
||||
let _index = index + 1
|
||||
let className = ''
|
||||
// 小于等于2空箱报警时
|
||||
// if (num <= 2) {
|
||||
// className += ' box-danger'
|
||||
// }
|
||||
if (num <= 1) {
|
||||
className += ' box-danger'
|
||||
}
|
||||
// 空箱
|
||||
if (num < _index) {
|
||||
className += ' box-empty'
|
||||
@ -180,6 +184,9 @@ onUnmounted(() => {
|
||||
filter: brightness(0.4);
|
||||
z-index: -1;
|
||||
}
|
||||
.border {
|
||||
border: 2px solid #a9aabc;
|
||||
}
|
||||
.screen {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@ -213,7 +220,7 @@ onUnmounted(() => {
|
||||
.screen .card {
|
||||
margin: 10px;
|
||||
padding: 0px;
|
||||
min-height: 260px;
|
||||
min-height: 280px;
|
||||
background-color: transparent;
|
||||
border: 5px solid #a9aabc;
|
||||
color: #eeeeee;
|
||||
|
||||
@ -10,16 +10,26 @@
|
||||
</div>
|
||||
<div class="body">
|
||||
<el-row>
|
||||
<el-col :span="index < 2 ? 12 : 6" v-for="(item, index) in dataList" :key="index">
|
||||
<div class="item-box">
|
||||
<el-col :span="6" v-for="(item, index) in dataList" :key="index">
|
||||
<div class="item-box" @click="closeLight(item)">
|
||||
<el-card :class="`card `">
|
||||
<div :class="`card-header ${getStatusClass(item)}`">
|
||||
<div :class="`card-header`">
|
||||
<span>料架号: {{ item.rackCode }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="index < 2 ? 3 : 6" v-for="(item2, index2) in item.packageCapacity" :key="index2">
|
||||
<div :class="`box ${boxSelectClass(item.packageNum, index2)}`"></div>
|
||||
<!-- 一层料架 -->
|
||||
<el-row style="margin-bottom: 5px" v-for="(item2, index2) in item.layerObjectArray" :gutter="5">
|
||||
<!-- 左侧描述 -->
|
||||
<el-col :span="4">
|
||||
<div class="card-left-text">{{ item2.layerNum === 1 ? '上层' : '中层' }}</div>
|
||||
</el-col>
|
||||
<!-- 右侧物料 -->
|
||||
<el-col :span="20" :class="`border ${getStatusClass(item)}`">
|
||||
<el-row>
|
||||
<el-col :span="6" v-for="(item3, index3) in item2.maxCapacity" :key="index2">
|
||||
<div :class="`box ${boxSelectClass(item2.packageNum, index3)}`"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -49,6 +59,7 @@ const pblOptions = ref([])
|
||||
|
||||
/// ========================= 仓库信息 =============================
|
||||
import { listStoragelocation } from '@/api/PBL/storagelocation.js'
|
||||
import { SearchfeedingMaterialInfomation } from '@/api/PBL/bigscreen.js'
|
||||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
const dataList = ref([])
|
||||
@ -59,36 +70,38 @@ const queryParams = reactive({
|
||||
const msg = ref('JT-002缺料')
|
||||
function getList() {
|
||||
loading.value = true
|
||||
listStoragelocation(queryParams).then((res) => {
|
||||
SearchfeedingMaterialInfomation(queryParams).then((res) => {
|
||||
const { code, data } = res
|
||||
if (code == 200) {
|
||||
// 数据模拟
|
||||
let _list = data.result
|
||||
_list = _list.map((item, index) => {
|
||||
if (index < 2) {
|
||||
item.packageCapacity = 16
|
||||
} else {
|
||||
item.packageCapacity = 8
|
||||
}
|
||||
if (index == 7 || index == 5) {
|
||||
item.status = 1
|
||||
}
|
||||
return item
|
||||
})
|
||||
dataList.value = _list
|
||||
total.value = data.totalNum
|
||||
dataList.value = data
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
// 灯状态变动
|
||||
function changeLight(rackCode, partnumber, status = 1) {
|
||||
dataList.value.forEach((item) => {
|
||||
if (item.rackCode === rackCode && item.partnumber === partnumber) {
|
||||
item.status = status
|
||||
}
|
||||
})
|
||||
}
|
||||
// 手动灭灯
|
||||
function closeLight(item) {
|
||||
if (item.status === 1) {
|
||||
item.status = 0
|
||||
}
|
||||
}
|
||||
|
||||
// 灯状态
|
||||
function getStatusClass(item) {
|
||||
return item.status === 1 ? 'light' : ''
|
||||
return item.isLight ? 'light' : ''
|
||||
}
|
||||
function boxSelectClass(num, index) {
|
||||
let _index = index + 1
|
||||
let className = ''
|
||||
// 小于等于2空箱报警时
|
||||
if (num <= 2) {
|
||||
if (num <= 1) {
|
||||
className += ' box-danger'
|
||||
}
|
||||
// 空箱
|
||||
@ -100,6 +113,39 @@ function boxSelectClass(num, index) {
|
||||
getList()
|
||||
/// =============================================================
|
||||
|
||||
/// ========================== MQTT ==============================
|
||||
import mqttStore from '@/store/modules/mqtt'
|
||||
const mqtt = mqttStore()
|
||||
function mqttCreate() {
|
||||
mqtt.create('ws', 'nbhx/pbl/light/#')
|
||||
}
|
||||
function mqttClose() {
|
||||
mqtt.close()
|
||||
}
|
||||
function mqttMessage() {
|
||||
if (mqtt.checkClient()) {
|
||||
mqtt.client.on('message', function (topic, payload, packet) {
|
||||
console.log(`Topic: ${topic}, Message: ${payload.toString()}, QoS: ${packet.qos}`)
|
||||
console.log(`getMessageByJsonStr`, mqtt.getMessageByJsonStr(payload))
|
||||
})
|
||||
} else {
|
||||
console.log('mqtt 未连接 error')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
mqttCreate()
|
||||
setTimeout(() => {
|
||||
mqttMessage()
|
||||
}, 1000)
|
||||
console.log('mqtt组件已挂载')
|
||||
})
|
||||
onUnmounted(() => {
|
||||
mqttClose()
|
||||
console.log('mqtt组件已卸载')
|
||||
})
|
||||
/// ==================================================================
|
||||
|
||||
/// ======================= 自动刷新 ========================
|
||||
// 自动获取数据
|
||||
const getTimerData = () => {
|
||||
@ -139,6 +185,9 @@ onUnmounted(() => {
|
||||
filter: brightness(0.4);
|
||||
z-index: -1;
|
||||
}
|
||||
.border {
|
||||
border: 2px solid #a9aabc;
|
||||
}
|
||||
.screen {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@ -172,7 +221,7 @@ onUnmounted(() => {
|
||||
.screen .card {
|
||||
margin: 10px;
|
||||
padding: 0px;
|
||||
min-height: 260px;
|
||||
min-height: 280px;
|
||||
background-color: transparent;
|
||||
border: 5px solid #a9aabc;
|
||||
color: #eeeeee;
|
||||
@ -190,6 +239,14 @@ onUnmounted(() => {
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
.card-left-text {
|
||||
height: 100%;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* 亮灯颜色 */
|
||||
.light {
|
||||
/* border: 5px solid #eedd78 !important; */
|
||||
@ -202,9 +259,9 @@ onUnmounted(() => {
|
||||
/* 箱子原始状态 */
|
||||
.box {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
margin: 5px;
|
||||
border: 2px solid #a9aabc;
|
||||
height: 50px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@ -1,31 +1,33 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="screen">
|
||||
<div class="header">
|
||||
<div class="header-text">{{ config.title }}</div>
|
||||
<div class="title">{{ config.title }}</div>
|
||||
</div>
|
||||
<div class="body" v-loading="loading">
|
||||
<div class="body">
|
||||
<el-row>
|
||||
<el-col :span="6" v-for="(item, index) in dataList" :key="index">
|
||||
<div class="item-box">
|
||||
<el-card :class="`${getStatusClass(item.packageNum)}`">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>料架号: {{ item.rackCode }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="5">
|
||||
<el-col :span="6" v-for="(item2, index2) in 8">
|
||||
<div :class="boxSelectClass(item.packageNum, index2)">
|
||||
<div v-if="boxSelecExplain(item.packageNum, index2)" class="icon-box"></div>
|
||||
<span v-if="boxSelecExplain(item.packageNum, index2)">{{ item.partnumber }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <div class="card-body">
|
||||
<div>零件号:{{ item.partnumber }}</div>
|
||||
<div>当前库存:{{ item.packageNum }}</div>
|
||||
<div>当前状态:{{ getStatusExplain(item.packageNum) }}</div>
|
||||
</div> -->
|
||||
<el-col :span="12" v-for="(item, index) in dataList" :key="index">
|
||||
<div class="item-box" @click="closeLight(item)">
|
||||
<el-card :class="`card `">
|
||||
<div :class="`card-header`">
|
||||
<span>料架号: {{ item.rackCode }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- 一层料架 -->
|
||||
<el-row style="margin-bottom: 5px" v-for="(item2, index2) in item.layerObjectArray" :gutter="5">
|
||||
<!-- 左侧描述 -->
|
||||
<el-col :span="4">
|
||||
<div class="card-left-text">{{ item2.layerNum === 1 ? '上层' : '中层' }}</div>
|
||||
</el-col>
|
||||
<!-- 右侧物料 -->
|
||||
<el-col :span="20" :class="`${getStatusClass(item)}`">
|
||||
<el-row>
|
||||
<el-col :span="6" v-for="(item3, index3) in item2.maxCapacity" :key="index2">
|
||||
<div :class="`box ${boxSelectClass(item2.packageNum, index3)}`"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -43,6 +45,7 @@ const config = reactive({
|
||||
|
||||
/// ========================= 仓库信息 =============================
|
||||
import { listStoragelocation } from '@/api/PBL/storagelocation.js'
|
||||
import { SearchShelfLightInfomation } from '@/api/PBL/bigscreen.js'
|
||||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
const dataList = ref([])
|
||||
@ -52,11 +55,10 @@ const queryParams = reactive({
|
||||
})
|
||||
function getList() {
|
||||
loading.value = true
|
||||
listStoragelocation(queryParams).then((res) => {
|
||||
SearchShelfLightInfomation(queryParams).then((res) => {
|
||||
const { code, data } = res
|
||||
if (code == 200) {
|
||||
dataList.value = data.result
|
||||
total.value = data.totalNum
|
||||
dataList.value = data
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
@ -64,93 +66,132 @@ function getList() {
|
||||
// function getStatusExplain(status) {
|
||||
// return status === 0 ? '缺料' : '正常';
|
||||
// }
|
||||
function getStatusClass(status) {
|
||||
return status === 0 ? ' background-red' : ''
|
||||
|
||||
// 料架操作，手动灭灯
|
||||
function closeLight(item) {
|
||||
if (item.status === 1) {
|
||||
item.status = 0
|
||||
}
|
||||
}
|
||||
function boxSelecExplain(num, index) {
|
||||
return num >= index + 1
|
||||
// 灯状态
|
||||
function getStatusClass(item) {
|
||||
return ''
|
||||
}
|
||||
|
||||
// 空箱
|
||||
function boxSelectClass(num, index) {
|
||||
return num >= index + 1 ? 'box-select' : 'box'
|
||||
let _index = index + 1
|
||||
let className = ''
|
||||
// 每一层小于等于1空箱报警时
|
||||
if (num <= 1) {
|
||||
className += ' box-danger'
|
||||
}
|
||||
// 空箱
|
||||
if (num < _index) {
|
||||
className += ' box-empty'
|
||||
}
|
||||
return className
|
||||
}
|
||||
getList()
|
||||
/// =============================================================
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
.border {
|
||||
border: 2px solid #a9aabc;
|
||||
}
|
||||
.screen {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #303133;
|
||||
color: #000;
|
||||
}
|
||||
.header {
|
||||
.screen .header {
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
/* background: #ffaa00; */
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.screen .title {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.screen .back {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
/* 料架 */
|
||||
:deep(.el-card__body) {
|
||||
padding: 0px;
|
||||
}
|
||||
.screen .card {
|
||||
margin: 10px;
|
||||
padding: 0px;
|
||||
min-height: 280px;
|
||||
background-color: transparent;
|
||||
border: 5px solid #a9aabc;
|
||||
}
|
||||
.screen .card-header {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.card-body {
|
||||
padding: 10px;
|
||||
}
|
||||
.card-left-text {
|
||||
height: 100%;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.header-text {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
/* 亮灯颜色 */
|
||||
.light {
|
||||
/* border: 5px solid #eedd78 !important; */
|
||||
background-color: #f9f871 !important;
|
||||
color: #000000 !important;
|
||||
}
|
||||
.body {
|
||||
.screen .body {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
.item-box {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
/* min-height: 300px; */
|
||||
}
|
||||
.card-header {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.card-body {
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.background-red {
|
||||
/* background-color: #c45656;
|
||||
color: #fff; */
|
||||
}
|
||||
/* 箱子原始状态 */
|
||||
.box {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #a8a9a4;
|
||||
height: 50px;
|
||||
margin: 5px;
|
||||
border: 2px solid #a9aabc;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
background-color: #0072ff;
|
||||
}
|
||||
.box-select {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #a8a9a4;
|
||||
height: 50px;
|
||||
/* 空箱 */
|
||||
.box-empty {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/* 补料危险箱 */
|
||||
.box-danger {
|
||||
background-color: #ae0024;
|
||||
}
|
||||
/* 文字看板 */
|
||||
.text-card {
|
||||
font-size: 36px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #e6e600;
|
||||
}
|
||||
.icon-box {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.icon {
|
||||
width: 50%;
|
||||
/* height: 60px; */
|
||||
clip: rect(0, auto, auto, 0);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background-color: #303133;
|
||||
color: white;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user