赵忠林
f9e1286ab1
- 删除应用配置页面及相关组件，重构路由为 /developer/config/[id].vue - 移除开发者文档页面及其导航与样式实现 - 清理开发者侧功能完善工作日志文件 - 删除全局.gitignore配置文件，清理无用忽略规则 - 优化应用配置页面的参数读取和路由结构，解决刷新404问题 - 解决数据库配置唯一键冲突，调整保存逻辑避免重复插入 - 移除对后端配置加密字段的 secret 标记，修正加密异常问题
114 lines
5.1 KiB
Vue
114 lines
5.1 KiB
Vue
<script setup lang="ts">
|
||
definePageMeta({ layout: 'admin' })
|
||
const { activeTab } = useNav()
|
||
activeTab.value = 'production-control'
|
||
|
||
const realTimeData = ref([
|
||
{ id: 'WO2026040901', product: '精密轴承组件 A型', line: '产线1', planQty: 500, doneQty: 325, passQty: 318, passRate: 97.8, status: '生产中' },
|
||
{ id: 'WO2026040703', product: '密封圈组件 D型', line: '产线3', planQty: 3000, doneQty: 2100, passQty: 2058, passRate: 98.0, status: '生产中' },
|
||
])
|
||
|
||
const alerts = ref([
|
||
{ id: 1, type: 'warning', msg: '产线1：主轴温度偏高，当前78°C', time: '10:30' },
|
||
{ id: 2, type: 'info', msg: 'WO2026040901 完成500件，当前进度65%', time: '10:15' },
|
||
{ id: 3, type: 'error', msg: '产线2：刀具寿命预警，请及时更换', time: '09:45' },
|
||
])
|
||
|
||
const activeTab2 = ref('realtime')
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page-container">
|
||
<div class="page-header">
|
||
<h2 class="page-title">生产管控</h2>
|
||
<a-space>
|
||
<a-button @click="() => {}">导出报表</a-button>
|
||
<a-button type="primary">
|
||
<template #icon><PlusOutlined /></template>
|
||
新建工单
|
||
</a-button>
|
||
</a-space>
|
||
</div>
|
||
|
||
<a-tabs v-model:activeKey="activeTab2">
|
||
<a-tab-pane key="realtime" tab="实时监控">
|
||
<a-row :gutter="[20, 20]">
|
||
<a-col :xs="24" :xl="16">
|
||
<div class="card">
|
||
<div class="card-title">实时生产进度</div>
|
||
<a-table :dataSource="realTimeData" :pagination="false" size="small" rowKey="id">
|
||
<a-table-column title="工单编号" dataIndex="id" width="150" />
|
||
<a-table-column title="产品" dataIndex="product" />
|
||
<a-table-column title="产线" dataIndex="line" width="80" align="center" />
|
||
<a-table-column title="计划数量" dataIndex="planQty" width="100" align="center" />
|
||
<a-table-column title="完成数量" dataIndex="doneQty" width="100" align="center">
|
||
<template #default="{ record }">
|
||
<span class="num-highlight">{{ record.doneQty }}</span>
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="良品数量" dataIndex="passQty" width="100" align="center" />
|
||
<a-table-column title="良品率" dataIndex="passRate" width="90" align="center">
|
||
<template #default="{ text }">
|
||
<span :class="text >= 97 ? 'rate-good' : 'rate-warn'">{{ text }}%</span>
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="进度" dataIndex="doneQty" width="150" align="center">
|
||
<template #default="{ record }">
|
||
<a-progress :percent="Math.round(record.doneQty / record.planQty * 100)" size="small" />
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="状态" dataIndex="status" width="100" align="center">
|
||
<template #default="{ text }">
|
||
<a-badge status="processing" :text="text" />
|
||
</template>
|
||
</a-table-column>
|
||
</a-table>
|
||
</div>
|
||
</a-col>
|
||
<a-col :xs="24" :xl="8">
|
||
<div class="card">
|
||
<div class="card-title">实时告警</div>
|
||
<div class="alert-list">
|
||
<div v-for="alert in alerts" :key="alert.id" class="alert-item" :class="alert.type">
|
||
<span class="alert-icon">{{ alert.type === 'error' ? '🔴' : alert.type === 'warning' ? '🟡' : '🔵' }}</span>
|
||
<div class="alert-body">
|
||
<div class="alert-msg">{{ alert.msg }}</div>
|
||
<div class="alert-time">{{ alert.time }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</a-tab-pane>
|
||
|
||
<a-tab-pane key="history" tab="历史记录">
|
||
<div class="card">
|
||
<a-empty description="历史记录列表" />
|
||
</div>
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page-container { padding: 24px; }
|
||
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
||
.page-title { font-size: 20px; font-weight: 600; color: #1f2937; margin: 0; }
|
||
.card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; }
|
||
.card-title { font-size: 16px; font-weight: 600; color: #1f2937; margin-bottom: 16px; }
|
||
|
||
.num-highlight { font-weight: 700; color: #4f46e5; }
|
||
.rate-good { color: #10b981; font-weight: 600; }
|
||
.rate-warn { color: #f59e0b; font-weight: 600; }
|
||
|
||
.alert-list { display: flex; flex-direction: column; gap: 10px; }
|
||
.alert-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 8px; }
|
||
.alert-item.error { background: #fef2f2; }
|
||
.alert-item.warning { background: #fffbeb; }
|
||
.alert-item.info { background: #eff6ff; }
|
||
.alert-icon { font-size: 14px; }
|
||
.alert-msg { font-size: 13px; color: #374151; }
|
||
.alert-time { font-size: 11px; color: #9ca3af; margin-top: 4px; }
|
||
</style>
|