| | |
| | | const carPosition = ref([]) |
| | | const tableDatass = ref([]) |
| | | const tableDataLack = ref([]) |
| | | // 响应式状态 |
| | | 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 ganghua = ref('') |
| | | const diaodu = ref('') |
| | | const hollowPriority = ref('') |
| | |
| | | } 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); |
| | | } |
| | | }; |
| | | const handlexiang = () => { |
| | | dialogFormVisiblea.value = true; |
| | | fetchxiang(); |
| | |
| | | let socket = null; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/hollowGlassMessage`; |
| | | 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.lackDetailsList!=null){ |
| | | const summaries = data.lackDetailsList[0]; |
| | | const updatedData = summaries.map(summary => ({ |
| | |
| | | adjustedRectsd.value = '' |
| | | } |
| | | }; |
| | | |
| | | const getAlertText = (alarmCode) => { |
| | | const codeMap = { |
| | | sizeSame: 'hellow.sizeSame', |
| | | idSame: 'hellow.idSame' |
| | | }; |
| | | return alarmCode in codeMap |
| | | ? t(codeMap[alarmCode]) |
| | | : t('hellow.unknownAlert'); |
| | | }; |
| | | const handleDoubleClick = () => { |
| | | // currentAlarm.value = alarmData.value?.alarmInfo?.[0]?.[0] || null; |
| | | showModal.value = true; |
| | | }; |
| | | // 计算每个大矩形的样式 |
| | | const rectStyle = (rect, index) => ({ |
| | | position: 'absolute', |
| | |
| | | closeWebSocket(socket); |
| | | } |
| | | }); |
| | | // 格式化时间戳为年月日时间字符串的函数 |
| | | function formatTimestamp(timestamp) { |
| | | const date = new Date(timestamp); |
| | | const year = date.getFullYear(); |
| | | const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始,需要加1,并补零 |
| | | const day = String(date.getDate()).padStart(2, '0'); // 补零 |
| | | const hours = String(date.getHours()).padStart(2, '0'); // 补零(如果需要显示时间) |
| | | const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零(如果需要显示时间) |
| | | const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零(如果需要显示时间) |
| | | return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
| | | } |
| | | function getStatusType(enableState: number) { |
| | | switch (enableState) { |
| | | case 100: |
| | |
| | | </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> |
| | | <div style="display: flex;"> |
| | | <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> |
| | |
| | | .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> |