<script setup>
|
import request from "@/utils/request"
|
import { Search } from "@element-plus/icons-vue"
|
import { ref, onMounted, reactive, computed } from "vue"
|
import { useRouter } from "vue-router"
|
import { useI18n } from 'vue-i18n'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
let language = ref(localStorage.getItem('lang') || 'zh')
|
const { t } = useI18n()
|
const router = useRouter()
|
const showAlert = ref(true)
|
const showModal = ref(false)
|
// const tableData = ref([])
|
const tableData = [
|
{
|
alarmStartTime: '2025-11-03 8:25:05',//报警开始时间
|
alarmEndTime: '2025-11-03 9:25:05',//报警结束时间
|
equipment: '上片1号机',//设备
|
content: '未收到请求',//内容
|
confirmer: 'admin',//确认人
|
},
|
{
|
alarmStartTime: '2025-11-03 10:05:05',
|
alarmEndTime: '2025-11-03 10:08:05',
|
equipment: '卧式理片笼',
|
content: '未获取到玻璃对应尺寸信息',
|
confirmer: 'admin',
|
},
|
{
|
alarmStartTime: '2025-11-03 16:30:15',
|
alarmEndTime: '2025-11-03 16:35:05',
|
equipment: '钢化大理片笼',
|
content: '进片玻璃ID与笼内玻璃ID相同',
|
confirmer: 'admin',
|
},
|
{
|
alarmStartTime: '2025-11-03 20:30:15',
|
alarmEndTime: '2025-11-03 22:30:15',
|
equipment: '中空大理片笼',
|
content: '笼内存在相同规格的玻璃',
|
confirmer: 'admin',
|
},
|
]
|
const tableDataAlert = [
|
{
|
formattedCreateTime: '2025-11-03 8:25:05',
|
},
|
]
|
// 警报双击弹窗
|
const handleDoubleClick = () => {
|
showModal.value = true;
|
};
|
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') {
|
showModal.value = false;
|
showAlert.value = false;
|
|
ElMessage.success();
|
}
|
} catch (error) {
|
console.error('发生错误:', error);
|
}
|
};
|
onMounted(() => {
|
});
|
</script>
|
<template>
|
<div>
|
<div v-if="showAlert" class="global-alert-bar" @dblclick="handleDoubleClick">
|
<div class="alert-content">
|
<el-icon><WarnTriangleFilled /></el-icon>
|
<span class="alert-text">
|
笼内存在相同规格的玻璃 (id:25103114002002)
|
</span>
|
</div>
|
<button @click="showAlert = false" class="close-btn">×</button>
|
</div>
|
<el-card style="flex: 1;margin-left: 10px;margin-top: 20px;">
|
<div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
|
<el-table height="780" ref="table"
|
:data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
|
<el-table-column prop="alarmStartTime" align="center" :label="$t('delivery.alarmStartTime')" min-width="180" />
|
<el-table-column prop="alarmEndTime" align="center" :label="$t('delivery.alarmEndTime')" min-width="180" />
|
<el-table-column prop="equipment" align="center" :label="$t('delivery.equipment')" min-width="180" />
|
<el-table-column prop="content" align="center" :label="$t('delivery.content')" min-width="180" />
|
<el-table-column prop="confirmer" align="center" :label="$t('delivery.confirmer')" min-width="180" />
|
</el-table>
|
</div>
|
</el-card>
|
</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>
|
笼内存在相同规格的玻璃 (id:25103114002002)
|
</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>
|
</template>
|
<style scoped>
|
#dt { display:block; float:left;line-height: 20px;margin-left: 100px;}
|
#dta { display:block; float:left;line-height: 20px;margin-left: 80%;}
|
#dialog-footer{
|
text-align: center;
|
margin-top: -15px;
|
}
|
#message{
|
text-align: center;
|
align-items: center;
|
color: black;
|
width: 200px;
|
height: 100px;
|
background-color: #337ecc;
|
margin-left: 28%;
|
}
|
#awatch{
|
height: 460px;
|
}
|
|
.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>
|
