| | |
| | | const tableDatae = ref([]) |
| | | const carPosition = ref([]) |
| | | const tableDatass = ref([]) |
| | | const tableDataLack = ref([]) |
| | | const tableDataMiss = 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('') |
| | | const flowCardId = ref('') |
| | | const glassType = ref('') |
| | | const layer = ref('') |
| | | const filmsId = ref('') |
| | | const adjust = ref([]); |
| | | const adjusta = ref([]); |
| | |
| | | const subRectsCountsc = ref([]); |
| | | const subRectsCountsd = ref([]); |
| | | const currentRow = reactive({}); // 当前行的数据 |
| | | const currentLack = reactive({}); |
| | | const currentPage2 = ref(1) |
| | | const add = ref(false) |
| | | const glassId = ref(''); |
| | |
| | | const cell8=ref(true); |
| | | const cell9=ref(true); |
| | | const blindb = ref(false) |
| | | const dialogFormVisibleb = ref(false) |
| | | const selectedRow = ref(null); |
| | | const temperingengineerId=ref(''); |
| | | const handlePageChange2 = (newPage) => { |
| | | currentPage2.value = newPage; |
| | | window.localStorage.setItem('pagenumber', currentPage2.value) |
| | | fetchxiang(); |
| | | }; |
| | | const handleBindRack = (row) => { |
| | | selectedRow.value = row; // 更新选中的行数据 |
| | | currentRow.deviceId = row.deviceId; // 直接设置响应式属性 |
| | |
| | | window.localStorage.setItem('deviceId', row.deviceId) |
| | | window.localStorage.setItem('slot', row.slot) |
| | | add.value = true; |
| | | }; |
| | | // 多条破损数据 |
| | | const handleMissingFilms = (row) => { |
| | | dialogFormVisibleb.value = true; |
| | | handleAllMissing(row) |
| | | }; |
| | | const handleAllMissing = async (row) => { |
| | | try { |
| | | const response = await request.post('/hollowGlass/hollowGlassRelationInfo/queryLackGlassByFlowCard', { |
| | | flowCardId: row.flowCardId, |
| | | layer: row.layer, |
| | | orderSort: row.glassType, |
| | | // glassId: row.glassId |
| | | }); |
| | | if (response.code == 200) { |
| | | ElMessage.success(response.message); |
| | | tableDataMiss.value = response.data |
| | | } else { |
| | | ElMessage.error(response.message); |
| | | } |
| | | } |
| | | catch (error) { |
| | | } |
| | | } |
| | | const handlePageChange2 = (newPage) => { |
| | | currentPage2.value = newPage; |
| | | fetchFlowBind(currentLack.flowCardId, currentPage2.value); |
| | | }; |
| | | const fetchFlowBind = async (flowCardId, page) => { |
| | | try { |
| | | var url = "/hollowGlass/hollowGlassRelationInfo/queryLackByFlowCard?flowCardId=" + flowCardId + "&layer=" + 1; |
| | | const response = await request.post(url) |
| | | if (response.code == 200) { |
| | | tableDataLack.value = response.data[page]; |
| | | ElMessage.success(response.message); |
| | | } else { |
| | | } |
| | | } catch (error) { |
| | | } |
| | | } |
| | | // 计算合计行的方法 |
| | | const getSummaries = (param) => { |
| | | const { columns, data } = param; |
| | | const sums: string[] = []; |
| | | columns.forEach((column, index) => { |
| | | if (index === 0) { |
| | | sums[index] = '合计'; |
| | | return; |
| | | } |
| | | |
| | | // 只对需要计算的列进行求和 |
| | | const needSumColumns = ['sumCount', 'pairCount', 'totalNumber', 'realCount']; |
| | | if (needSumColumns.includes(column.property)) { |
| | | const values = data.map(item => Number(item[column.property])); |
| | | if (!values.every(value => isNaN(value))) { |
| | | sums[index] = values.reduce((prev, curr) => { |
| | | const value = Number(curr); |
| | | if (!isNaN(value)) { |
| | | return prev + curr; |
| | | } else { |
| | | return prev; |
| | | } |
| | | }, 0); |
| | | sums[index] += ''; // 转为字符串 |
| | | } else { |
| | | sums[index] = 'N/A'; |
| | | } |
| | | } else { |
| | | sums[index] = ''; |
| | | } |
| | | }); |
| | | |
| | | return sums; |
| | | }; |
| | | // 搜索 |
| | | const searchout = async () => { |
| | |
| | | } catch (error) { |
| | | } |
| | | }; |
| | | // 缺片详情-破损 |
| | | const handleBroke = async (row) => { |
| | | try { |
| | | const confirmResult = await ElMessageBox.confirm( |
| | | t('searchOrder.broke'), |
| | | t('workOrder.prompt'), |
| | | { |
| | | confirmButtonText: t('workOrder.yes'), |
| | | cancelButtonText: t('workOrder.cancel'), |
| | | type: 'warning', |
| | | } |
| | | ); |
| | | const response = await request.post('/hollowGlass/hollowGlassRelationInfo/hollowBigStorageGlassDamage', { |
| | | flowCardId: row.flowCardId, |
| | | glassType: row.glassType, |
| | | glassId: row.glassId, |
| | | layer: row.layer, |
| | | state: 8, |
| | | line: 1, |
| | | workingProcedure: '中空', |
| | | remark: '中空' |
| | | }) |
| | | if (response.code == 200) { |
| | | ElMessage.success(response.message); |
| | | const { flowCardId } = row; |
| | | fetchFlowBind(flowCardId, currentPage2.value); |
| | | } else { |
| | | ElMessage.error(response.msg); |
| | | } |
| | | } catch (error) { |
| | | console.error(error); |
| | | } |
| | | } |
| | | // 缺片详情-一键破损 |
| | | const handleAllBroke = async (row) => { |
| | | try { |
| | | const confirmResult = await ElMessageBox.confirm( |
| | | t('order.dilapidationWhether'), |
| | | t('workOrder.prompt'), |
| | | { |
| | | confirmButtonText: t('workOrder.yes'), |
| | | cancelButtonText: t('workOrder.cancel'), |
| | | type: 'warning', |
| | | } |
| | | ); |
| | | const response = await request.post('/hollowGlass/hollowGlassRelationInfo/hollowBigStorageGlassDamage', { |
| | | flowCardId: row.flowCardId, |
| | | glassType: row.glassType, |
| | | layer: row.layer, |
| | | state: 8, |
| | | line: 1, |
| | | workingProcedure: '中空', |
| | | remark: '中空' |
| | | }) |
| | | if (response.code == 200) { |
| | | ElMessage.success(response.message); |
| | | const { flowCardId } = row; |
| | | fetchFlowBind(flowCardId, currentPage2.value); |
| | | } else { |
| | | ElMessage.error(response.msg); |
| | | } |
| | | } catch (error) { |
| | | console.error(error); |
| | | } |
| | | } |
| | | // 破损 |
| | | const broke = async(row) => { |
| | | try { |
| | |
| | | } 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(); |
| | |
| | | selectedRow.value = row; // 更新选中的行数据 |
| | | } |
| | | // 任务重置 |
| | | const handleptask = async() => { |
| | | try { |
| | | const confirmResult = await ElMessageBox.confirm( |
| | | t('searchOrder.partasks'), |
| | | t('workOrder.prompt'), |
| | | { |
| | | confirmButtonText: t('workOrder.yes'), |
| | | cancelButtonText: t('workOrder.cancel'), |
| | | type: 'warning', |
| | | } |
| | | ); |
| | | if (confirmResult === 'confirm') { |
| | | const response = await request.post('/hollowGlass/hollowBigStorageCage/resetCage') |
| | | if (response.code === 200) { |
| | | ElMessage.success(response.message); |
| | | } else { |
| | | ElMessage.error(response.msg); |
| | | } |
| | | } |
| | | } catch (error) { |
| | | } |
| | | }; |
| | | // const handleptask = async() => { |
| | | // try { |
| | | // const confirmResult = await ElMessageBox.confirm( |
| | | // t('searchOrder.partasks'), |
| | | // t('workOrder.prompt'), |
| | | // { |
| | | // confirmButtonText: t('workOrder.yes'), |
| | | // cancelButtonText: t('workOrder.cancel'), |
| | | // type: 'warning', |
| | | // } |
| | | // ); |
| | | // if (confirmResult === 'confirm') { |
| | | // const response = await request.post('/hollowGlass/hollowBigStorageCage/resetCage') |
| | | // if (response.code === 200) { |
| | | // ElMessage.success(response.message); |
| | | // } else { |
| | | // ElMessage.error(response.msg); |
| | | // } |
| | | // } |
| | | // } catch (error) { |
| | | // } |
| | | // }; |
| | | // 调度开关 |
| | | const handlediaodu = async () => { |
| | | try { |
| | |
| | | } |
| | | } |
| | | // 中空优先级开关 |
| | | // const handlehollowPriority = async () => { |
| | | // try { |
| | | // const body = { |
| | | // flag: hollowPriority.value, |
| | | // }; |
| | | // var url="/hollowGlass/hollowGlassOutRelationInfo/priorityHollowSwitch?flag="+hollowPriority.value; |
| | | // const response = await request.post(url) |
| | | // if (response.code == 200) { |
| | | // ElMessage.success(response.message); |
| | | // hollowPriority.value = response.data |
| | | // }else { |
| | | // ElMessage.error(response.message); |
| | | // } |
| | | // } |
| | | // catch (error) { |
| | | // } |
| | | // } |
| | | const handlehollowPriority = async () => { |
| | | try { |
| | | const body = { |
| | | flag: hollowPriority.value, |
| | | }; |
| | | var url="/hollowGlass/hollowGlassOutRelationInfo/priorityHollowSwitch?flag="+hollowPriority.value; |
| | | const response = await request.post(url) |
| | | if (response.code == 200) { |
| | | ElMessage.success(response.message); |
| | | hollowPriority.value = response.data |
| | | }else { |
| | | ElMessage.error(response.message); |
| | | } |
| | | } |
| | | catch (error) { |
| | | } |
| | | } |
| | | let socket = null; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/hollowGlassMessage`; |
| | | const handleMessage = (data) => { |
| | | if(data.bigStorageCageUsageSummary!=null){ |
| | | const summaries = data.bigStorageCageUsageSummary[0]; |
| | | // 报警信息 |
| | | 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 => ({ |
| | | ...summary, |
| | | totalNumber: summary.layer * summary.sumCount, |
| | |
| | | }else{ |
| | | diaodu.value = '' |
| | | } |
| | | // if(data.priorityHollowSwitch!=null){ |
| | | // hollowPriority.value = data.priorityHollowSwitch[0] |
| | | // }else{ |
| | | // hollowPriority.value = '' |
| | | // } |
| | | if(data.priorityHollowSwitch!=null){ |
| | | hollowPriority.value = data.priorityHollowSwitch[0] |
| | | }else{ |
| | | hollowPriority.value = '' |
| | | } |
| | | if(data.bigStorageCageInfos!=null){ |
| | | adjustedRects.value = data.bigStorageCageInfos[0][1].map((rect, index) => ({ |
| | | id: index + 1, |
| | |
| | | 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 = () => { |
| | | 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> |
| | | <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="danger" @click="handleptask()">{{ $t('searchOrder.partask') }}</el-button> |
| | | <!-- <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="danger" @click="handleptask()">{{ $t('searchOrder.partask') }}</el-button> --> |
| | | <el-switch style="margin-top: 7px;margin-left: 10px;" v-model="diaodu" class="mb-2" :inactive-text="$t('searchOrder.Schedulingswitch')" @change="handlediaodu" /> |
| | | <!-- <el-switch style="margin-top: 7px;margin-left: 10px;" v-model="hollowPriority" class="mb-2" :inactive-text="$t('searchOrder.hollowPriority')" @change="handlehollowPriority" /> --> |
| | | <div style="display: flex;"> |
| | | <div style="margin-left: 15px;margin-top: 5px;font-size: 14px;top: 5vh;margin-top: 12px;">{{ $t('searchOrder.hollowPriority') }}:</div> |
| | | <div style="margin-left: 15px;margin-top: 5px;font-size: 14px;top: 5vh;margin-top: 12px;color: #911005;">{{ $t('searchOrder.firstLinePriority') }}</div> |
| | | <el-switch |
| | | style="margin-top: 7px;margin-left: 10px;" |
| | | v-model="hollowPriority" |
| | | class="mb-2" |
| | | @change="handlehollowPriority" |
| | | /> |
| | | <div style="margin-left: 15px;margin-top: 5px;font-size: 14px;top: 5vh;margin-top: 12px;color: rgb(184, 130, 48)">{{ $t('searchOrder.secondLinePriority') }}</div> |
| | | </div> |
| | | </div> |
| | | <div id="dotClass"> |
| | | <div>{{ $t('searchOrder.inkageEntity') }}</div> |
| | | <i :style="{ marginTop: '2px', backgroundColor: inkageEntity, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i> |
| | |
| | | </div> |
| | | </div> |
| | | <el-card style="flex: 1; height: 500px; overflow-y: auto;"> |
| | | <div style="width: 100%; height: calc(100% - 35px); overflow-y: auto;max-height: 450px;"> |
| | | <el-table height="550px" ref="table" border |
| | | :data="tableDatass" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="140" /> |
| | | <el-table-column prop="sumCount" align="center" :label="$t('searchOrder.totallogarithms')" min-width="120" /> |
| | | <el-table-column prop="pairCount" align="center" :label="$t('searchOrder.numberpairs')" min-width="120" /> |
| | | <el-table-column prop="totalNumber" align="center" :label="$t('hellow.totalnumber')" min-width="100" /> |
| | | <el-table-column prop="realCount" align="center" :label="$t('hellow.realpieces')" min-width="120" /> |
| | | <el-table-column prop="slotCount" align="center" :label="$t('searchOrder.numberoccupied')" min-width="120" /> |
| | | </el-table> |
| | | </div> |
| | | </el-card> |
| | | <div style="width: 100%; height: 100%; overflow: hidden;"> |
| | | <el-table |
| | | ref="table" |
| | | :data="tableDatass" |
| | | :header-cell-style="{background:'#F2F3F5', color:'#1D2129'}" |
| | | max-height="calc(500px - 35px)" |
| | | style="width: 100%;" |
| | | > |
| | | <el-table-column prop="flowCardId" align="center" :label="$t('searchOrder.cardnumber')" min-width="139" /> |
| | | <el-table-column prop="layer" align="center" :label="$t('reportmanage.layer')" min-width="38" /> |
| | | <el-table-column prop="glassType" align="center" :label="$t('large.serialnumber')" min-width="80" /> |
| | | <el-table-column prop="thickness" align="center" :label="$t('hellow.thickness')" min-width="52" /> |
| | | <el-table-column prop="filmsId" align="center" :label="$t('hellow.coatingtypes')" min-width="62"/> |
| | | <!-- <el-table-column prop="filmsId" align="center" :label="$t('hellow.coatingtypes')" min-width="62" show-overflow-tooltip/> --> |
| | | <el-table-column prop="height" align="center" :label="$t('hellow.height')" min-width="55" /> |
| | | <el-table-column prop="width" align="center" :label="$t('hellow.width')" min-width="55" /> |
| | | <el-table-column prop="lackCount" align="center" :label="$t('hellow.missingnumber')" min-width="80" /> |
| | | <el-table-column prop="damageCount" align="center" :label="$t('large.brokenNum')"/> |
| | | <!-- <el-table-column prop="patchCount" align="center" :label="$t('large.patchCount')"/> --> |
| | | <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center" min-width="82"> |
| | | <template #default="scope"> |
| | | <el-button type="text" plain @click="handleMissingFilms(scope.row)">{{ $t('hellow.missingfilms') }}</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | <div style="padding: 10px;display: flex;height:110px;margin-top: -170px;"> |
| | | <div v-for="(item, index) in tableDatae" :key="index" id="occupy"> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | <div> |
| | | <!-- <div style="margin-top: 20px;margin-left: 40%;"> |
| | | <el-pagination |
| | | background |
| | | size="large" |
| | | layout="prev, pager, next" |
| | | :total="50" |
| | | :current-page.sync="currentPage2" |
| | | @current-change="handlePageChange2" |
| | | /> |
| | | </div> --> |
| | | </div> |
| | | </el-dialog> |
| | | <!-- 多条破损数据 --> |
| | | <el-dialog v-model="dialogFormVisibleb" top="15vh" width="70%" height="500"> |
| | | <el-button plain @click="handleAllBroke">{{ $t('order.dilapidationAll') }}</el-button> |
| | | <el-table ref="table" style="margin-top: 20px;height: 400px;" :data="tableDataMiss" |
| | | :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129' }"> |
| | | <el-table-column prop="glassType" align="center" :label="$t('large.serialnumber')" min-width="80" /> |
| | | <el-table-column prop="glassId" align="center" :label="$t('searchOrder.glassID')" min-width="80" /> |
| | | <el-table-column prop="thickness" align="center" :label="$t('hellow.thickness')" min-width="80" /> |
| | | <el-table-column prop="workingProcedure" align="center" :label="$t('searchOrder.process')" min-width="80" /> |
| | | <el-table-column prop="height" align="center" :label="$t('hellow.height')" min-width="80" /> |
| | | <el-table-column prop="width" align="center" :label="$t('hellow.width')" min-width="80" /> |
| | | <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center"> |
| | | <template #default="scope"> |
| | | <el-button type="text" plain @click="handleBroke(scope.row)">{{ $t('order.dilapidation') }}</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-dialog> |
| | | <!-- 历史任务 --> |
| | | <el-dialog v-model="blindb" top="5vh" width="95%" @close="iframeUrl=''"> |
| | |
| | | .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> |