卧式理片模块新增报警，中空理片笼、钢化理片笼-理片笼详情改造

wangfei

2025-11-04 fe7095395f8454bdf5a817f7d5c612af5b83fbd9

 UI-Project/src/views/Caching/cachingbefore.vue

@@ -17,14 +17,50 @@
const adjustedRects = ref([]);
const selectValuesa = reactive([]);
const timeRange = ref([])
const tableDataAlert = ref([])
const taskState = ref('')
const taskStat = ref('')
const taskType = ref('')
const glassId = ref('')
const alertText = ref('')
const alertMessage = ref('')
const alarmData = ref('')
// const alarmData = ref<any>(null)
const showAlert = ref(false)
const showModal = ref(false)
const blindb = ref(false)
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlassOne`;
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}`;
  if (alert[0].alarmCode === 'sizeSame') {
    alertText.value = t('hellow.sizeSame');
  } else if (alert[0].alarmCode === 'idSame') {
    alertText.value = t('hellow.idSame');
  } else if (alert[0].alarmCode === 'slotLess') {
    alertText.value = t('hellow.slotLess');
  } else if (alert[0].alarmCode === 'overSize') {
    alertText.value = t('hellow.overSize');
  } else if (alert[0].alarmCode === 'noGlass') {
    alertText.value = t('hellow.noGlass');
  } else {
    alertText.value = t('hellow.unknownAlert');
  }
    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;
  const cageInfo = data.taskMessage[0];
  if (cageInfo && cageInfo.createTime) {
    cageInfo.formattedCreateTime = formatTimestamp(cageInfo.createTime);
@@ -34,19 +70,18 @@
  }
  tableDataa.value = data.EdgStorageCageinfos[0]
  tableDatab.value = data.taskMessage
  // adjustedRects.value = data.EdgStorageCageinfos[0].map(rect => ({  
  //     ...rect,
  //     width: rect.width * 0.5 ,
  //     id: rect.id * 10,
  //   })); 
};
  adjustedRects.value = data.EdgStorageCageinfos[0].map((rect, index) => ({  
      ...rect,
      id: rect.id * 9,
      showRect: !!data.EdgStorageCageinfos[0][index]?.details[0]
    })); 
  };
// 格式化后端时间并计算一周前的时间
const defaultTime = ref<[Date, Date]>([new Date(), new Date()]);
function parseAndSetTime() {
  const backendTime = new Date(globalDate);
  const oneWeekAgo = new Date(backendTime.getTime() - 7 * 24 * 60 * 60 * 1000); // 减去7天
  console.log(formatTimestamp(oneWeekAgo));
  console.log(oneWeekAgo);
  oneWeekAgo.setHours(0, 0, 0, 0);
  timeRange.value = [formatTimestamp(oneWeekAgo), formatTimestamp(backendTime)];
  window.localStorage.setItem('startTime', formatTimestamp(oneWeekAgo))
}
@@ -99,7 +134,6 @@
    }
}
catch (error) {
    console.error(error);
  }
}
// 破损
@@ -128,7 +162,6 @@
      }  
    }  
  } catch (error) { 
    console.error('发生错误:', error); 
  }  
};  
// 拿走 
@@ -157,7 +190,6 @@
      }  
    }  
  } catch (error) {
    console.error('发生错误:', error);  
  }  
}; 
// 任务重置
@@ -182,7 +214,6 @@
      }  
    }  
  } catch (error) { 
    console.error('发生错误:', error); 
  }  
};
// 任务成功处理
@@ -207,7 +238,6 @@
      }  
    }  
  } catch (error) { 
    console.error('发生错误:', error); 
  }  
};
 // 删除 
@@ -231,9 +261,54 @@
      }  
    }  
  } catch (error) {
    console.error('发生错误:', 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);
  }
};

// 警报双击弹窗
const handleDoubleClick = () => {
  showModal.value = true;
};
const getAlertText = (alarmCode) => {
  const codeMap = {
    sizeSame: 'hellow.sizeSame',
    idSame: 'hellow.idSame',
    slotLess: 'hellow.slotLess',
    overSize: 'hellow.overSize',
    noGlass: 'hellow.noGlass'
  };
  return alarmCode in codeMap 
    ? t(codeMap[alarmCode]) 
    : t('hellow.unknownAlert');
};
const rowClassName = ({ row }) => {
  // 根据 enableState 设置行的 CSS 类
  return row.slot % 2 === 0 ? 'success-row' : '';
@@ -326,30 +401,38 @@
    }
    });
onBeforeUnmount(() => {
  console.log("关闭了")
  closeWebSocket();
});
</script>
<template>
  <div style="height: 500px;">
    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;" v-loading="loading">
    <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-card style="flex: 1;margin-left: 10px;margin-top: 10px;">
    <el-button style="margin-bottom: 15px;margin-left: 20px;" @click="handlehistorical" type="primary">{{ $t('searchOrder.historicaltasks') }}</el-button>
    <el-button style="margin-bottom: 15px;margin-left: 20px;" @click="handleptask()" type="warning">{{ $t('searchOrder.partask') }}</el-button>
    <el-button style="margin-bottom: 15px;margin-left: 20px;" @click="successfull()" type="success">{{ $t('searchOrder.successfullyprocessed') }}</el-button>
    <div style="position: relative; width: 100%; height: 100%;"> <!-- 添加相对定位 -->
  <div style="position: absolute; margin-top: 28px; left: 430px; display: flex; z-index: 10;"> <!-- 添加绝对定位 -->
  <div style="position: absolute; margin-top: 28px; left: 400px; display: flex; z-index: 10;"> 
    <div>{{ $t('searchOrder.projectnumber') }}</div>
    <div style="margin-left: 155px;">{{ $t('hellow.flowCardId') }}</div>
    <div style="margin-left: 135px;">{{ $t('hellow.flowCardId') }}</div>
    <div style="margin-left: 152px;">{{ $t('searchOrder.glassID') }}</div>
    <div style="margin-left: 165px;">{{ $t('searchOrder.width') }}</div>
    <div style="margin-left: 185px;">{{ $t('searchOrder.height') }}</div>
    <div style="margin-left: 172px;">{{ $t('searchOrder.thickness') }}</div>
    <div style="margin-left: 145px;">{{ $t('hellow.operate') }}</div>
    <div style="margin-left: 135px;">{{ $t('searchOrder.width') }}</div>
    <div style="margin-left: 169px;">{{ $t('searchOrder.height') }}</div>
    <div style="margin-left: 162px;">{{ $t('searchOrder.thickness') }}</div>
    <div style="margin-left: 135px;">{{ $t('hellow.operate') }}</div>
  </div>
    <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
      <el-table
      ref="table"
      style="margin-top: 20px; height: 360px;"
      style="margin-top: 20px; height: 300px;"
      :data="tableDataa"
      :header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }"
      row-key="id"
@@ -382,9 +465,9 @@
          <el-table-column prop="thickness" align="center" min-width="80" />
    <el-table-column fixed="right" align="center" width="150">
        <template #default="scope">
          <el-button size="mini" type="text" plain @click="handletake(scope.row)">{{ $t('searchOrder.breakage') }}</el-button>
          <el-button size="mini" type="text" plain @click="handleBindRack(scope.row)">{{ $t('searchOrder.takeout')}} </el-button>
          <el-button size="mini" type="text" plain @click="handledelete(scope.row)">{{ $t('searchOrder.delete')}} </el-button>
          <el-button type="text" plain @click="handletake(scope.row)">{{ $t('searchOrder.breakage') }}</el-button>
          <el-button type="text" plain @click="handleBindRack(scope.row)">{{ $t('searchOrder.takeout')}} </el-button>
          <el-button type="text" plain @click="handledelete(scope.row)">{{ $t('searchOrder.delete')}} </el-button>
        </template>
      </el-table-column>
      </el-table>
@@ -431,30 +514,65 @@
      </div>
    </el-card>
  <div class="awatch">
    <img src="../../assets/woshihuancun.png" alt="" style="width: 50%;height: 70%;margin-left: 30%;margin-top: 20px;position: relative;"> 
    <div style="position: relative; width: 500px;height: 95px;margin-top: -165px;margin-left: 450px;">
    <div  
    <img src="/woshihuancun.png" alt="" style="width: 50%;height: 100%;margin-left: 25%;position: relative;margin-top: 5px;"> 
    <div style="position: relative; width: 500px;height: 95px;margin-top: -146px;margin-left: 615px;">
      <div  
      v-for="(rect, index) in adjustedRects"
      :key="rect"  
      v-show="rect.showRect"
      :key="rect"
      :style="{ position: 'absolute', 
       top: `${rect.id}px`, left: `10px`, width: `${rect.width}px`, height: `5px`,
      top: `${rect.id}px`, left: `-85px`, width: `435px`, height: `3px`,
      backgroundColor: '#409EFF'
       }"  
    >
  </div>
</div>
  </div>
</div>
</div>
<!-- 历史任务 -->
<el-dialog v-model="blindb" top="10vh" width="90%">
<el-dialog v-model="blindb" top="5vh" width="95%" @close="iframeUrl=''">
     <iframe 
     :src="iframeUrl" 
     marginwidth="2000px"
     marginheight="2000px"
     width="100%" 
     height="700px" 
     height="750px" 
     frameborder="0"
     ></iframe>
  </el-dialog>
  <!-- 报警弹窗 -->
  <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-dialog v-model="blindb" top="10vh" width="90%">
  <div style="display: flex;">
@@ -548,8 +666,24 @@
   margin-left: 28%;
}
.awatch{
  height: 460px;
  height: 350px;
  width: 1500px;
  max-width: 100%;
  margin-left: 10%
}
.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; /* 最小宽度保证 */
}
</style>