添加数据贯通代码未调试

klp-ui/src/api/l2/timing.js

@@ -0,0 +1,36 @@
+import axios from 'axios'
+
+export default function createTimingFetch(url) {
+  const request = axios.create({
+    baseURL: 'http://' + url,
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    timeout: 10000
+  })
+
+  request.interceptors.response.use(response => response.data)
+
+  return {
+    getPlanList: () => request({
+      url: '/sql-server-api/plans',
+      method: 'get'
+    }),
+    getPlanDetail: (coilId) => request({
+      url: `/sql-server-api/plans/${coilId}`,
+      method: 'get'
+    }),
+    getSegByEncoilId: (encoilId) => request({
+      url: `/sql-server-api/seg/${encoilId}`,
+      method: 'get'
+    }),
+    getSegByExcoilId: (excoilId) => request({
+      url: `/sql-server-api/seg-by-excoil/${excoilId}`,
+      method: 'get'
+    }),
+    getRealtimeData: (matId) => request({
+      url: `/sql-server-api/realtime/${matId}`,
+      method: 'get'
+    })
+  }
+}

klp-ui/src/views/timing/acid/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="timing-page acid-page">
+    <el-card class="page-card" shadow="never">
+      <div slot="header" class="card-header">
+        <span>酸轧实绩页</span>
+        <el-tag type="success" size="mini">Plan + Seg + Quality</el-tag>
+      </div>
+
+      <el-form :inline="true" :model="queryForm" size="mini" class="query-form">
+        <el-form-item label="计划号">
+          <el-input v-model="queryForm.coilId" placeholder="输入 coilId" clearable style="width: 220px;" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" :loading="loading" @click="handleSearch">查询</el-button>
+          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-row :gutter="16">
+        <el-col :span="8">
+          <el-card shadow="never" class="sub-card">
+            <div slot="header" class="sub-header">计划列表</div>
+            <el-table
+              :data="planRows"
+              height="560"
+              size="mini"
+              highlight-current-row
+              @row-click="handlePlanRowClick"
+            >
+              <el-table-column prop="COILID" label="COILID" min-width="140" />
+              <el-table-column prop="HOT_COILID" label="热卷号" min-width="140" />
+              <el-table-column prop="STATUS" label="状态" width="90" />
+            </el-table>
+          </el-card>
+        </el-col>
+
+        <el-col :span="16">
+          <el-card shadow="never" class="sub-card">
+            <div slot="header" class="sub-header">计划详情</div>
+            <el-empty v-if="!selectedPlan" description="请选择一条计划" />
+            <el-descriptions v-else :column="3" border size="mini">
+              <el-descriptions-item label="COILID">{{ selectedPlan.COILID }}</el-descriptions-item>
+              <el-descriptions-item label="HOT_COILID">{{ selectedPlan.HOT_COILID }}</el-descriptions-item>
+              <el-descriptions-item label="STATUS">{{ selectedPlan.STATUS }}</el-descriptions-item>
+              <el-descriptions-item label="ENTRY_THICK">{{ selectedPlan.ENTRY_THICK }}</el-descriptions-item>
+              <el-descriptions-item label="ENTRY_WIDTH">{{ selectedPlan.ENTRY_WIDTH }}</el-descriptions-item>
+              <el-descriptions-item label="ENTRY_WEIGHT">{{ selectedPlan.ENTRY_WEIGHT }}</el-descriptions-item>
+              <el-descriptions-item label="EXIT_THICK">{{ selectedPlan.EXIT_THICK }}</el-descriptions-item>
+              <el-descriptions-item label="EXIT_WIDTH">{{ selectedPlan.EXIT_WIDTH }}</el-descriptions-item>
+              <el-descriptions-item label="EXIT_LENGTH">{{ selectedPlan.EXIT_LENGTH }}</el-descriptions-item>
+            </el-descriptions>
+          </el-card>
+
+          <el-card shadow="never" class="sub-card" style="margin-top: 16px;">
+            <div slot="header" class="sub-header">SEG 实绩</div>
+            <el-alert
+              v-if="!segView"
+              title="请选择计划后自动加载对应 SEG"
+              type="info"
+              :closable="false"
+              show-icon
+            />
+            <template v-else>
+              <el-row :gutter="16">
+                <el-col :span="8">
+                  <el-card shadow="never">
+                    <div slot="header">SEGNO</div>
+                    <div class="seg-list">
+                      <el-tag
+                        v-for="item in segView.segNo"
+                        :key="item"
+                        size="mini"
+                        class="seg-tag"
+                      >
+                        {{ item }}
+                      </el-tag>
+                    </div>
+                  </el-card>
+                </el-col>
+                <el-col :span="16">
+                  <el-card shadow="never">
+                    <div slot="header">属性数组</div>
+                    <el-table :data="seriesTable" size="mini" height="240" border>
+                      <el-table-column prop="key" label="属性" width="180" />
+                      <el-table-column prop="values" label="数组值" min-width="300">
+                        <template slot-scope="scope">
+                          <el-tag v-for="(item, index) in scope.row.values" :key="index" size="mini" style="margin-right: 4px; margin-bottom: 4px;">
+                            {{ item }}
+                          </el-tag>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </el-card>
+                </el-col>
+              </el-row>
+            </template>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import createTimingFetch from '@/api/l2/timing'
+
+export default {
+  name: 'TimingAcidPage',
+  props: {
+    baseURL: { type: String, required: true }
+  },
+  data() {
+    return {
+      fetchApi: null,
+      loading: false,
+      queryForm: { coilId: '' },
+      planRows: [],
+      selectedPlan: null,
+      segView: null,
+      seriesTable: []
+    }
+  },
+  created() {
+    this.fetchApi = createTimingFetch(this.baseURL)
+    this.loadPlanList()
+  },
+  methods: {
+    async loadPlanList() {
+      this.loading = true
+      try {
+        const res = await this.fetchApi.getPlanList()
+        const rows = res?.data?.rows || res?.rows || []
+        this.planRows = rows
+      } finally {
+        this.loading = false
+      }
+    },
+    async handleSearch() {
+      if (!this.queryForm.coilId) {
+        return this.loadPlanList()
+      }
+      this.loading = true
+      try {
+        const res = await this.fetchApi.getPlanDetail(this.queryForm.coilId)
+        const row = res?.data?.firstRow || res?.firstRow || null
+        this.selectedPlan = row
+        if (row && row.ENCOILID) {
+          await this.loadSeg(row.ENCOILID)
+        }
+      } finally {
+        this.loading = false
+      }
+    },
+    async handlePlanRowClick(row) {
+      this.selectedPlan = row
+      if (row?.COILID) {
+        const detail = await this.fetchApi.getPlanDetail(row.COILID)
+        const plan = detail?.data?.firstRow || detail?.firstRow || row
+        this.selectedPlan = plan
+        const encoilId = plan.ENCOILID || plan.ENCOILID || plan.COILID
+        if (encoilId) await this.loadSeg(encoilId)
+      }
+    },
+    async loadSeg(encoilId) {
+      const res = await this.fetchApi.getSegByEncoilId(encoilId)
+      const view = res?.data || res
+      this.segView = view
+      this.seriesTable = Object.entries(view?.series || {}).map(([key, values]) => ({ key, values }))
+    },
+    handleReset() {
+      this.queryForm.coilId = ''
+      this.selectedPlan = null
+      this.segView = null
+      this.seriesTable = []
+      this.loadPlanList()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.timing-page { padding: 16px; }
+.page-card { border-radius: 12px; }
+.card-header, .sub-header { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
+.sub-card { border-radius: 10px; }
+.query-form { margin-bottom: 12px; }
+.seg-list { display: flex; flex-wrap: wrap; gap: 6px; }
+.seg-tag { margin-right: 0; }
+</style>

klp-ui/src/views/timing/realtime/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="timing-page realtime-page">
+    <el-card shadow="never" class="page-card">
+      <div slot="header" class="card-header">
+        <span>实时跟踪页</span>
+        <el-tag type="warning" size="mini">Gauge + Shape</el-tag>
+      </div>
+
+      <el-form :inline="true" :model="queryForm" size="mini" class="query-form">
+        <el-form-item label="MATID">
+          <el-input v-model="queryForm.matId" placeholder="输入 MATID" clearable style="width: 240px;" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-refresh" :loading="loading" @click="handleQuery">获取实时数据</el-button>
+          <el-button icon="el-icon-delete" @click="handleReset">清空</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-empty v-if="!realtimeData" description="请输入 MATID 后查询实时数据" />
+
+      <template v-else>
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-card shadow="never" class="sub-card">
+              <div slot="header">Gauge 厚度数据</div>
+              <el-table :data="gaugeRows" size="mini" height="520" border>
+                <el-table-column prop="XTIME" label="XTIME" width="120" />
+                <el-table-column prop="XLOCATION" label="XLOCATION" width="100" />
+                <el-table-column prop="THICK0" label="THICK0" width="90" />
+                <el-table-column prop="THICK1" label="THICK1" width="90" />
+                <el-table-column prop="THICK4" label="THICK4" width="90" />
+                <el-table-column prop="THICK5" label="THICK5" width="90" />
+                <el-table-column prop="EXIT_SPEED" label="EXIT_SPEED" width="100" />
+              </el-table>
+            </el-card>
+          </el-col>
+          <el-col :span="12">
+            <el-card shadow="never" class="sub-card">
+              <div slot="header">Shape 板形数据</div>
+              <el-table :data="shapeRows" size="mini" height="520" border>
+                <el-table-column prop="XTIME" label="XTIME" width="120" />
+                <el-table-column prop="XLOCATION" label="XLOCATION" width="100" />
+                <el-table-column prop="HIGHZONEID" label="HIGHZONEID" width="100" />
+                <el-table-column prop="LOWZONEID" label="LOWZONEID" width="100" />
+                <el-table-column prop="EXIT_SPEED" label="EXIT_SPEED" width="100" />
+                <el-table-column prop="ROLLFORCE" label="ROLLFORCE" width="100" />
+                <el-table-column prop="ABSDEVIATION" label="ABSDEVIATION" width="110" />
+              </el-table>
+            </el-card>
+          </el-col>
+        </el-row>
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import createTimingFetch from '@/api/l2/timing'
+
+export default {
+  name: 'TimingRealtimePage',
+  props: {
+    baseURL: { type: String, required: true }
+  },
+  data() {
+    return {
+      fetchApi: null,
+      loading: false,
+      queryForm: { matId: '' },
+      realtimeData: null,
+      gaugeRows: [],
+      shapeRows: []
+    }
+  },
+  created() {
+    this.fetchApi = createTimingFetch(this.baseURL)
+  },
+  methods: {
+    async handleQuery() {
+      if (!this.queryForm.matId) {
+        this.$message.warning('请输入 MATID')
+        return
+      }
+      this.loading = true
+      try {
+        const res = await this.fetchApi.getRealtimeData(this.queryForm.matId)
+        this.realtimeData = res?.data || res
+        this.gaugeRows = this.realtimeData?.gauge?.result || []
+        this.shapeRows = this.realtimeData?.shape?.result || []
+      } finally {
+        this.loading = false
+      }
+    },
+    handleReset() {
+      this.queryForm.matId = ''
+      this.realtimeData = null
+      this.gaugeRows = []
+      this.shapeRows = []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.timing-page { padding: 16px; }
+.page-card { border-radius: 12px; }
+.card-header { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
+.query-form { margin-bottom: 12px; }
+.sub-card { border-radius: 10px; }
+</style>