钢化前理片笼新增警报提示及相关操作

wangfei

2025-09-23 cd557f9cf3a4f6268f3df49dfb3b42c3096f87b7

钢化前理片笼新增警报提示及相关操作

 UI-Project/src/views/Slicecage/slicecage.vue

@@ -54,6 +54,13 @@
const subRectsCountsb = ref([]);
const subRectsCountsc = ref([]);
const currentRow = reactive({}); // 当前行的数据 
const showAlert = ref(false)
const alertMessage = ref('')
const alarmData = ref<any>(null)
const showModal = ref(false)
const currentAlarm = ref<any>(null)
const tableDataAlert = ref([])
const alertText = ref('')
const currentPage2 = ref(1)
const globalDate = inject('globalDate');
const inputValuesa = reactive({});
@@ -516,6 +523,19 @@
  fetchcagedetails(engineerId, temperingLayoutId); 
  dialogFormVisiblef.value = true;
};
// 警报双击弹窗
const handleDoubleClick = () => {
  showModal.value = true;
};
const getAlertText = (alarmCode) => {
  const codeMap = {
    sizeSame: 'hellow.sizeSame',
    idSame: 'hellow.idSame'
  };
  return alarmCode in codeMap 
    ? t(codeMap[alarmCode]) 
    : t('hellow.unknownAlert');
};
// 钢化查询
onMounted(async () => {  
  try {  
@@ -704,9 +724,59 @@
  } catch (error) {
  }  
}; 
// 警报确认
const handleSure = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
      t('hellow.clickmakesure'),
      t('productStock.prompt'),
      {
        confirmButtonText: t('productStock.yes'),
        cancelButtonText: t('productStock.cancel'),
        type: 'warning',
      }
    );
    if (confirmResult === 'confirm') {
      const response = await request.post('/hollowGlass/productAlarmInfo/updateAlarmInfo', {
        id: row.id
      })
      if (response.code === 200) {
        showModal.value = false;
        showAlert.value = false;

        ElMessage.success(response.message);
      } else {
        ElMessage.error(response.msg);
      }
    }
  } catch (error) {
    console.error('发生错误:', error);
  }
};
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/slicecage`;
const handleMessage = (data) => {
  // 报警信息
  if (data.alarmInfo[0] !=null && data.alarmInfo[0].length > 0) {
    const alert = data.alarmInfo[0]
    const { id,alarmMessage, ...rest } = alert[0];
    alertMessage.value = `${alarmMessage}`;
    alertMessage.value = `${alert[0].alarmMessage}`;
    // 动态翻译逻辑：根据alarmCode选择翻译键
    alertText.value = alert[0].alarmCode === 'sizeSame' 
      ? t('hellow.sizeSame') 
      : t('hellow.idSame');
    alarmData.value = data; // 存储完整数据用于弹窗
    showAlert.value = true;
  }
   const formattedData = data.alarmInfo[0].map(record => ({
     ...record,
     formattedCreateTime: formatTimestamp(record.createTime),
     alarmCode: record.alarmCode,
     alarmMessage: record.alarmMessage
   }));
    tableDataAlert.value = formattedData;

  if(data.bigStorageSummary!=null){
    tableDatass.value = data.bigStorageSummary[0]
  }else{
@@ -1057,6 +1127,48 @@
</script>
<template>
  <div style="height: 600px;">
    <div v-if="showAlert" class="global-alert-bar" @dblclick="handleDoubleClick">
    <div class="alert-content">
      <el-icon><WarnTriangleFilled /></el-icon>
      <span class="alert-text">
        {{ alertText }} (id:{{ alertMessage }})
      </span>
    </div>
    <button @click="showAlert = false" class="close-btn">×</button>
  </div>
  <el-dialog
    v-model="showModal"
    width="40%"
    center
  >
      <el-table 
      ref="table"
      border
      :data="tableDataAlert" 
      max-height="calc(500px - 35px)"
      style="width: 100%;"
    >
      <el-table-column prop="formattedCreateTime" align="center" :label="$t('film.createtime')" min-width="100" />
      <el-table-column 
       :label="$t('hellow.content')" 
       align="center" 
       min-width="220"
     >
       <template #default="scope">
           <span>
             {{ getAlertText(scope.row.alarmCode) }} 
             (id:{{ scope.row.alarmMessage }})
           </span>
       </template>
     </el-table-column>
      <el-table-column fixed="right" :label="$t('film.operate')" align="center" width="100">
        <template #default="scope">
          <el-button type="text" plain
            @click="handleSure(scope.row)">{{ $t('basicData.yes') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="primary" @click="handlexiang">{{ $t('searchOrder.cageinformation') }}</el-button>
    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="success" @click="handlehistorical">{{ $t('searchOrder.historicaltasks') }}</el-button>
    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="warning" @click="handleganghua">{{ $t('searchOrder.temperingqueries') }}</el-button>
@@ -1757,4 +1869,45 @@
.row-red-background {
  background-color: #CDAF95 !important;
}
.global-alert-bar {
  position: fixed;
  top: 0;
  left: 50%; /* 水平居中关键 */
  transform: translateX(-50%); /* 水平居中关键 */
  padding: 12px 20px;
  background-color: #dbdbd7;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
  max-width: 80%; /* 防止小屏幕溢出 */
  min-width: 400px; /* 最小宽度保证 */
}
/* 提示内容居中 */
.alert-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1; /* 占据可用空间 */
}
/* 提示文字样式 */
.alert-text {
  margin-left: 8px;
  text-align: center;
  font-weight: bold;
  color: #0d0d0d;
}
/* 关闭按钮样式 */
.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  margin-left: 20px;
}
/* 页面容器顶部内边距 */
#app-container {
  padding-top: 60px; /* 根据alert高度调整 */
}
</style>

 UI-Project/src/views/hollow/hollowslicecage.vue

@@ -34,7 +34,7 @@
const alertMessage = ref('')
const alarmData = ref<any>(null)
const showModal = ref(false)
const currentAlarm = ref<any>(null);
const currentAlarm = ref<any>(null)
const tableDataAlert = ref([])
const alertText = ref('')

@@ -613,8 +613,8 @@
    ? t(codeMap[alarmCode]) 
    : t('hellow.unknownAlert');
};
// 警报双击弹窗
const handleDoubleClick = () => {
  // currentAlarm.value = alarmData.value?.alarmInfo?.[0]?.[0] || null;
  showModal.value = true;
};
// 计算每个大矩形的样式