feat: 日志管理 + 质保书生产过程数据图表

- 新增 PlanLog 模型与 /logs API；计划新增/移动/投入生产/生产完成/删除均记录
  (时间/计划号/卷号/操作/状态变化/位置/操作人/说明)
- 新增「日志管理」页面 + 路由 + 导航
- 质保书：把生产完成持久化的实时数据(process_data)按单位分组生成多组柱状图

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/api/index.js

@@ -31,6 +31,9 @@ export const saveRuntime = (id, data) => request.patch(`/plan/${id}/runtime`, da
 export const seedPlans = (count = 50) => request.post('/plan/seed', null, { params: { count } })
 export const getLastPlanTemplate = () => request.get('/plan/last-template')
 
+// 日志管理
+export const getPlanLogs = params => request.get('/logs/', { params })
+
 // 成本管理
 export const getCostItems = () => request.get('/cost/items')
 export const getCostRecords = params => request.get('/cost/', { params })

frontend/src/router/index.js

@@ -76,6 +76,12 @@ const routes = [
         component: () => import('@/views/CostManagement.vue'),
         meta: { title: '成本管理', icon: 'el-icon-coin', requiresAuth: true }
       },
+      {
+        path: 'logs',
+        name: 'LogManagement',
+        component: () => import('@/views/LogManagement.vue'),
+        meta: { title: '日志管理', icon: 'el-icon-document', requiresAuth: true }
+      },
     ]
   },
   { path: '*', redirect: '/' }

frontend/src/views/Layout.vue

@@ -80,6 +80,7 @@ const MENU = [
   { path: '/inspection',    title: '设备巡检',   icon: IC.inspection },
   { path: '/quality',       title: '质量管理',   icon: IC.quality },
   { path: '/cost',          title: '成本管理',   icon: IC.capacity },
+  { path: '/logs',          title: '日志管理',   icon: IC.message },
 ]
 
 export default {

frontend/src/views/LogManagement.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div class="card">
+      <div class="card-body" style="padding:10px 14px;">
+        <div class="flex-row" style="flex-wrap:wrap;gap:12px;">
+          <div class="flex-row">
+            <span class="kv-label">计划/卷号</span>
+            <input v-model="query.plan_no" class="kv-input" style="width:150px;" @keyup.enter="fetchData" />
+          </div>
+          <div class="flex-row">
+            <span class="kv-label">操作</span>
+            <select v-model="query.action" class="kv-input" style="width:120px;">
+              <option value="">全部</option>
+              <option v-for="a in actions" :key="a" :value="a">{{ a }}</option>
+            </select>
+          </div>
+          <div class="flex-row">
+            <span class="kv-label">操作人</span>
+            <input v-model="query.operator" class="kv-input" style="width:120px;" @keyup.enter="fetchData" />
+          </div>
+          <div class="flex-row">
+            <span class="kv-label">日期</span>
+            <input v-model="query.start_date" type="date" class="kv-input" style="width:130px;" />
+            <span class="kv-label">~</span>
+            <input v-model="query.end_date" type="date" class="kv-input" style="width:130px;" />
+          </div>
+          <div class="flex-row">
+            <button class="btn btn-primary" @click="fetchData">查询</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">
+        计划日志
+        <span class="ch-badge">共 {{ total }} 条</span>
+      </div>
+      <div class="table-scroll" v-loading="loading">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th style="width:150px;">时间</th>
+              <th>计划号</th>
+              <th>冷卷号</th>
+              <th style="width:90px;">操作</th>
+              <th style="width:160px;">状态变化</th>
+              <th>位置</th>
+              <th style="width:100px;">操作人</th>
+              <th>说明</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in tableData" :key="row.id">
+              <td class="td-muted">{{ fmtTime(row.created_at) }}</td>
+              <td class="td-num">{{ row.plan_no || '—' }}</td>
+              <td class="td-num">{{ row.coil_no || '—' }}</td>
+              <td><span :class="['badge', actionBadge(row.action)]">{{ row.action || '—' }}</span></td>
+              <td>
+                <span v-if="row.from_status || row.to_status">
+                  <span class="td-muted">{{ statusLabel(row.from_status) }}</span>
+                  →
+                  <b style="color:var(--sms-teal);">{{ statusLabel(row.to_status) }}</b>
+                </span>
+                <span v-else class="td-muted">—</span>
+              </td>
+              <td>{{ row.position || '—' }}</td>
+              <td>{{ row.operator || '—' }}</td>
+              <td class="td-muted">{{ row.detail || '—' }}</td>
+            </tr>
+            <tr v-if="!tableData.length && !loading">
+              <td colspan="8" class="td-muted" style="text-align:center;padding:24px;">暂无数据</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPlanLogs } from '@/api'
+
+const STATUS_LABEL = { ready: '准备好', online: '在线', producing: '生产中', produced: '生产完成' }
+const ACTION_BADGE = { '新增': 'badge-gray', '移动': 'badge-blue', '投入生产': 'badge-yellow', '生产完成': 'badge-green', '删除': 'badge-red' }
+
+export default {
+  name: 'LogManagement',
+  data() {
+    return {
+      loading: false,
+      tableData: [], total: 0,
+      actions: ['新增', '移动', '投入生产', '生产完成', '删除'],
+      query: { page: 1, page_size: 100, plan_no: '', action: '', operator: '', start_date: '', end_date: '' },
+      timer: null,
+    }
+  },
+  created() {
+    this.fetchData()
+    this.timer = setInterval(this.fetchData, 8000)
+  },
+  beforeDestroy() { clearInterval(this.timer) },
+  methods: {
+    async fetchData() {
+      this.loading = true
+      const p = { page: this.query.page, page_size: this.query.page_size }
+      if (this.query.plan_no) p.plan_no = this.query.plan_no
+      if (this.query.action) p.action = this.query.action
+      if (this.query.operator) p.operator = this.query.operator
+      if (this.query.start_date) p.start_date = this.query.start_date + 'T00:00:00'
+      if (this.query.end_date) p.end_date = this.query.end_date + 'T23:59:59'
+      try {
+        const res = await getPlanLogs(p)
+        this.tableData = res.data.items || []
+        this.total = res.data.total
+      } finally { this.loading = false }
+    },
+    fmtTime(t) { return t ? t.slice(0, 19).replace('T', ' ') : '—' },
+    statusLabel(s) { return STATUS_LABEL[s] || s || '' },
+    actionBadge(a) { return ACTION_BADGE[a] || 'badge-gray' },
+  },
+}
+</script>

frontend/src/views/Production.vue

@@ -269,6 +269,17 @@
             <tr><th>吨钢长度</th><td>{{ fmt(certRow.length_per_ton) }} m/t</td><th>下线时间</th><td>{{ fmtTime(certRow.offline_time) }}</td></tr>
             <tr><th>备注</th><td colspan="3">{{ certRow.remark || '—' }}</td></tr>
           </table>
+
+          <template v-if="certCharts.length">
+            <div style="margin-top:20px;font-size:14px;font-weight:600;color:#222;border-bottom:1px solid #ddd;padding-bottom:6px;">生产过程数据图表</div>
+            <div class="cert-charts">
+              <div v-for="(c, i) in certCharts" :key="i" class="cert-chart-box">
+                <div class="cc-title">{{ c.unit }}</div>
+                <v-chart class="cc-chart" :option="c.option" autoresize />
+              </div>
+            </div>
+          </template>
+
           <div style="margin-top:18px;display:flex;justify-content:space-between;font-size:12px;color:#666;">
             <div>检验员：________________</div>
             <div>签发日期：{{ today }}</div>
@@ -284,15 +295,25 @@
 </template>
 
 <script>
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
 import { getProductionRecords, createProductionRecord, updateProductionRecord } from '@/api'
 
+use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])
+
 const STATUS_MAP = {
   UNWEIGH: { label: '未称重', badge: 'badge-yellow' },
   PRODUCT: { label: '已产出', badge: 'badge-blue' },
 }
 
+const CHART_COLORS = ['#C03639', '#409EFF', '#67C23A', '#E6A23C', '#9B59B6', '#16A085']
+
 export default {
   name: 'Production',
+  components: { VChart },
   data() {
     return {
       loading: false, saving: false,
@@ -308,6 +329,32 @@ export default {
       const d = new Date()
       return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
     },
+    certCharts() {
+      const pd = this.certRow && this.certRow.process_data
+      if (!pd || !Array.isArray(pd.items) || !pd.items.length) return []
+      const groups = {}
+      pd.items.forEach(it => {
+        const v = parseFloat(it.value)
+        if (isNaN(v)) return
+        const u = it.unit || '其他'
+        ;(groups[u] = groups[u] || []).push({ label: it.label, value: v })
+      })
+      return Object.entries(groups).map(([unit, items], gi) => ({
+        unit,
+        option: {
+          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+          grid: { left: 44, right: 12, top: 16, bottom: 78 },
+          xAxis: {
+            type: 'category',
+            data: items.map(i => i.label.replace(/(开卷机|九辊矫直机|切头剪|酸洗槽|漂洗槽|三辊张力|平整机|静电涂油机|卷取机|夹送辊|挤干辊)\s?/g, '')),
+            axisLabel: { rotate: 40, fontSize: 9, color: '#666' },
+            axisLine: { lineStyle: { color: '#ddd' } },
+          },
+          yAxis: { type: 'value', name: unit, nameTextStyle: { color: '#999', fontSize: 10 }, axisLabel: { color: '#666', fontSize: 9 }, splitLine: { lineStyle: { color: '#eee' } } },
+          series: [{ type: 'bar', data: items.map(i => i.value), itemStyle: { color: CHART_COLORS[gi % CHART_COLORS.length] }, barMaxWidth: 18 }],
+        },
+      }))
+    },
   },
   created() { this.fetchData() },
   methods: {
@@ -384,4 +431,9 @@ export default {
   th, td { border: 1px solid #888; padding: 6px 10px; }
   th { background: #eee; width: 110px; text-align: left; }
 }
+.cert-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 12px; }
+.cert-chart-box { border: 1px solid #e4e7ed; border-radius: 4px; padding: 6px 8px 4px; }
+.cc-title { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 2px; }
+.cc-chart { height: 200px; width: 100%; }
+@media (max-width: 600px) { .cert-charts { grid-template-columns: 1fr; } }
 </style>