diff --git a/src/api/PBL/bigscreen.js b/src/api/PBL/bigscreen.js index b9e9220..9a9e24d 100644 --- a/src/api/PBL/bigscreen.js +++ b/src/api/PBL/bigscreen.js @@ -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' + }) +} diff --git a/src/views/PBL/TVScreen/index.vue b/src/views/PBL/TVScreen/index.vue index f86a994..f982e06 100644 --- a/src/views/PBL/TVScreen/index.vue +++ b/src/views/PBL/TVScreen/index.vue @@ -24,7 +24,7 @@
{{ item2.layerNum === 1 ? '上层' : '中层' }}
- +
@@ -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; diff --git a/src/views/PBL/TVScreen/preparation.vue b/src/views/PBL/TVScreen/preparation.vue index d486312..cfba025 100644 --- a/src/views/PBL/TVScreen/preparation.vue +++ b/src/views/PBL/TVScreen/preparation.vue @@ -10,16 +10,26 @@
- -
+ +
-
+
料架号: {{ item.rackCode }}
- - -
+ + + + +
{{ item2.layerNum === 1 ? '上层' : '中层' }}
+ + + + + +
+ +
@@ -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; diff --git a/src/views/PBL/dataScreen/index.vue b/src/views/PBL/dataScreen/index.vue index c9ea113..4e2d15b 100644 --- a/src/views/PBL/dataScreen/index.vue +++ b/src/views/PBL/dataScreen/index.vue @@ -1,31 +1,33 @@