hd-crane-gs/frontend/src/views/web/detail/realtimeAlarm.vue

<template>
  <div>
    <div class="el-table-content">
      <pro-table :height="tabHeight" :loading="tab_loading" :data="filteredData" :config="tableConfig">
        <template #default="{ row }">
          <div :class="getColor(row.switch_type.toString())">
            {{ (row.switch_type 
                  ? (dictStore.getDictLabel("switch_type", row.switch_type) as any)
                  : undefined
                )?.dict_label || row.switch_type }}
          </div>
        </template>
      </pro-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useDictStore } from "@/store";
import BizVarDictAPI, { BizVarDictTable,BizVarDictPageQuery } from '@/api/module_business/vardict'
import MqttUtil, { MqttMessageCallback } from '@/utils/mqttUtil';

const tabHeight = ref('calc(100vh - 70px - 5px - 50px - 10px - 44px)')
const craneInfo = JSON.parse(localStorage.getItem('craneInfo') || '{}')
const tab_loading = ref(true)
const tableConfig = ref([{
  prop: 'var_name',
  label: '报警内容'
},
{
  prop: 'switch_type',
  label: '报警级别',
  slot: 'true'
}])

const dictStore = useDictStore()
const dictTypes: any = [
  'switch_type'
]

const mqttConfig = {
  wsUrl: import.meta.env.VITE_APP_WS_ENDPOINT || 'ws://127.0.0.1:9001',
  topics: ['cdc/'+craneInfo.crane_no+'/alarm/#']
};
const mqttUtil = new MqttUtil(mqttConfig);

const queryFormVarDictData = reactive<BizVarDictPageQuery>({
  page_no: 0,
  page_size: 0,
  crane_no: craneInfo.crane_no,
  var_code: undefined,
  var_name: undefined,
  mec_type: undefined,
  switch_type: undefined,
  gateway_id: undefined,
  var_group: undefined,
  var_category: undefined,
  is_top_show: undefined,
  is_save: undefined,
  is_overview_top_show: undefined,
  is_home_page_show: undefined,
  status: undefined,
  created_time: undefined,
  updated_time: undefined,
  created_id: undefined,
  updated_id: undefined,
});
const allData = ref<BizVarDictTable[]>([]);

const filteredData = computed(() => {
  return allData.value.filter(item => item.value);
});
const getData = async () => {
  const response = await BizVarDictAPI.listBizVarDictAlarms(queryFormVarDictData);
  allData.value = response.data.data
  tab_loading.value = false
}

const handleMqttMessage: MqttMessageCallback = (topic, payload) => {
  let topic_levels = topic.split('/')
  let crane_no = topic_levels[1]
  let suffix = topic_levels[2]
  if (suffix === 'alarm') {
    allData.value.forEach((item) => {
      if (item.var_code === payload.var_code) {
        item.value = payload.value
      }
    });
  }
}



const getColor = (type:string) => {
  switch (type) {
    case '2':
      return 'pilot-lamp-bg-yellow';
    case '3':
      return 'pilot-lamp-bg-orange';
    case '4':
      return 'pilot-lamp-bg-red';
  }
}

onMounted(async () => {
  if (dictTypes.length > 0) {
    await dictStore.getDict(dictTypes)
  }
  getData();
  mqttUtil.initConnect(handleMqttMessage);
})

onUnmounted(() => {
  mqttUtil.releaseResources();
});
</script>

<style lang="less" scoped>
.el-table-content {
  padding: 20px;
  background: linear-gradient(to bottom, rgba(20, 66, 140, 0.8) 0%, rgba(18, 31, 52, 1) 15%);
  border: 2px solid rgba(40, 73, 136, 1);
  height: 100%;
}

.pilot-lamp-bg-red {
  color: #F9143D;
}

.pilot-lamp-bg-yellow {
  color: #FFD800;
}

.pilot-lamp-bg-orange {
  color: #f39902;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 7px;
  background-color: #798DAE;
}
</style>