pblvue/src/views/PBL/TVScreen/index.vue

<template>
  <!-- 备料大屏 -->
  <div class="screen">
    <div class="background"></div>
    <div class="back" @click="$router.go(-1)">
      <el-icon><ArrowLeftBold /></el-icon>
    </div>
    <div class="header">
      <kbHeader>{{ title }}</kbHeader>
    </div>
    <div class="body">
      <el-row>
        <el-col :span="6" v-for="(item, index) in dataList" :key="index">
          <div class="item-box" @click="closeLight(item)">
            <el-card :class="`card ${getStatusClass(item)}`">
              <div :class="`card-header`">
                <span>料架号: {{ item.rackCode }}</span>
              </div>
              <div class="card-body">
                <el-row v-if="item.layerNum === 1" :gutter="5">
                  <el-col :span="6" v-for="(item2, index2) in item.maxCapacity" :key="index2">
                    <div :class="`box ${boxSelectClass(item.packageNum, index2)}`"></div>
                  </el-col>
                </el-row>
                <el-row v-if="item.layerNum === 2" :gutter="5">
                  <el-col :span="6" v-for="(item2, index2) in item.maxCapacity" :key="index2">
                    <div :class="`box ${boxSelectClass(item.packageNum, index2)}`"></div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="12">
          <el-card :class="`card text-card`">
            <div>{{ msg }}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
/// ================ 组件导入 ======================
import kbHeader from './components/kbHeader.vue'
import kbTime from './components/kbTime.vue'
/// ================================================

import { ref } from 'vue'
const { proxy } = getCurrentInstance()
const title = ref('叫料看板')
const pblOptions = ref([])

/// ========================= 仓库信息 =============================
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([])
const queryParams = reactive({
  pageNum: 1,
  pageSize: 100
})
const msg = ref('JK-003叫料')
function getList() {
  // loading.value = true
  SearchShelfLightInfomation(queryParams).then((res) => {
    console.log(res.data)
  })
  // listStoragelocation(queryParams).then((res) => {
  //   const { code, data } = res
  //   if (code == 200) {
  //     // 数据模拟
  //     let _list = data.result
  //     dataList.value = _list
  //     total.value = data.totalNum
  //     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' : ''
}
function boxSelectClass(num, index) {
  let _index = index + 1
  let className = ''
  // 小于等于2空箱报警时
  // if (num <= 2) {
  //   className += ' box-danger'
  // }
  // 空箱
  if (num < _index) {
    className += ' box-empty'
  }
  return className
}
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 = () => {
  getList()
}
let timer = null
const clearSearchTimer = () => {
  clearInterval(timer)
  timer = null
}
const createSearchTimer = () => {
  clearSearchTimer()
  timer = setInterval(() => {
    getTimerData()
  }, 5000)
}
onMounted(() => {
  getTimerData()
  createSearchTimer()
})
onUnmounted(() => {
  clearSearchTimer()
})
/// ===========================================================
</script>

<style scoped>
.background {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: url('./background/2.png') no-repeat;
  background-size: 100% 100%;
  -webkit-filter: brightness(0.4);
  filter: brightness(0.4);
  z-index: -1;
}
.screen {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  color: #eeeeee;
}
.screen .header {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.screen .title {
  font-size: 30px;
  font-weight: 700;
  color: #eeeeee;
}
.screen .back {
  position: absolute;
  left: 10px;
  top: 10px;
  color: #eeeeee;
}
/* 料架 */
:deep(.el-card__body) {
  padding: 0px;
}
.screen .card {
  margin: 10px;
  padding: 0px;
  min-height: 260px;
  background-color: transparent;
  border: 5px solid #a9aabc;
  color: #eeeeee;
}
.screen .card-header {
  font-size: 24px;
  font-weight: 600;
  height: 60px;
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.card-body {
  padding: 20px;
}
/* 亮灯颜色 */
.light {
  /* border: 5px solid #eedd78 !important; */
  background-color: #f9f871 !important;
  color: #000000 !important;
}
.screen .body {
  width: 100%;
}
/* 箱子原始状态 */
.box {
  font-size: 14px;
  margin-bottom: 10px;
  border: 2px solid #a9aabc;
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #0072ff;
}
/* 空箱 */
.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: center;
}
</style>