klp-mono/apps/l2/src/views/index.vue

<template>
  <div class="tech-homepage">
    <!-- 时间与主体区域 -->
    <el-row :gutter="20" style="padding: 20px;">
      <el-col :span="18">
        <HomeMain :feature-cards="featureCards" />
      </el-col>
      <el-col :span="6">
        <CurrentTime />
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-row :gutter="5" style="padding: 0 20px 20px;">
      <el-col :span="10">
        <el-card>
          <div slot="header"><span>系统告警信息</span></div>
          <!-- 第一个表格：绑定API获取的数据和列配置 -->
          <MiniTable 
            v-loading="tableLoading"
            :columns="alarmColumns" 
            :data="alarmData"
            :highlightOnRowClick="true"
            tableHeight="300px"
          />
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card>
          <div slot="header"><span>换辊信息</span></div>
          <MiniTable 
            v-loading="rollHistoryLoading"
            :columns="rollHistoryColumns"
            :data="rollHistoryData"
            tableHeight="300px"
          />
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div slot="header"><span>生产计划</span></div>
          <MiniTable 
            v-loading="planLoading"
            :columns="planColumns"
            :data="planData"
            tableHeight="300px"
          />
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div slot="header"><span>过程跟踪</span></div>
          <TrackMeasure 
            v-loading="measureLoading"
            :columns="measureColumns"
            :data="measureData"
            tableHeight="300px"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template> 

<script>
import CurrentTime from "./components/CurrentTime.vue";
import HomeMain from "./components/HomeMain.vue";
import MiniTable from "./components/MiniTable.vue";
// 引入日志API
import { getLogDataPage } from "@/api/l2/log"; 
import { getRollHistorytList } from '@/api/l2/roller'
import { listPlan } from "@/api/l2/plan";
import TrackMeasure from "@/components/TrackMeasure/index.vue";

export default {
  name: "Index",
  components: { CurrentTime, HomeMain, MiniTable, TrackMeasure },
  data() {
    return {
      featureCards: [
        { title: "生产计划", desc: "生产计划管理...", icon: "table", path: "/plan" },
        { title: "日志记录", desc: "日志记录管理...", icon: "log", path: "/log" },
        { title: "轧辊管理", desc: "轧辊管理...", icon: "redis", path: "/roller" },
        { title: "停机管理", desc: "停机管理...", icon: "bug", path: "/stop" },
      ],
      // 表格列配置（与日志字段对应）
      alarmColumns: [
        { label: "发生时间", prop: "timestamp", width: "200px" },
        { label: "报警模块", prop: "module", width: "60px" },
        { label: "报警类型", prop: "logtype" },
      ],
      rollHistoryColumns: [
        { label: "换辊号", prop: "changeid" },
        { label: "轧辊号", prop: "rollid" },
        { label: "机组", prop: "seton", width: "80px" },
        { label: "班次", prop: "shift", width: "60px" },
        { label: "班组", prop: "crew", width: "60px" },
        { label: "机架号", prop: "standid", width: "80px" },
        { label: "位置", prop: "position", width: "50px" },
        { label: '直径', prop: 'diameter', width: '100px' },
        { label: '粗糙度', prop: 'rough', width: '100px' },
        { label: '凸度', prop: 'crown', width: '100px' },
        { label: '成分', prop: 'composition', width: '100px' },
      ],
      planColumns: [
        { label: '顺序号', prop: 'seqid', width: '80px' },
        { label: '钢卷号', prop: 'coilid', width: '120px' },
        { label: '机组号', prop: 'unitCode', width: '100px' },
        { label: '计划号', prop: 'planid', width: '120px' },
        { label: '计划类型', prop: 'planType', width: '80px' },
        { label: '钢种', prop: 'steelGrade', width: '120px' },
        { label: '出口卷号', prop: 'exitCoilid', width: '100px' },
        { label: '订单号', prop: 'orderNo', width: '100px' },
        { label: '客户代码', prop: 'custommerCode', width: '100px' },
        { label: '上线时间', prop: 'onlineDate' },
        { label: '开始时间', prop: 'startDate' },
        { label: '结束时间', prop: 'endDate' },
        { label: '进炉时间', prop: 'furInDate' },
        { label: '出炉时间', prop: 'furOutDate' },
      ],
      alarmData: [], // 表格数据（从API获取）
      queryForm: { pageNum: 1, pageSize: 10 }, // 分页参数
      tableLoading: false, // 加载状态
      rollHistoryData: [], // 轧辊历史数据
      rollHistoryLoading: false, // 轧辊历史数据加载状态
      planData: [], // 生产计划数据
      planLoading: false, // 生产计划数据加载状态
    };
  },
  created() {
    // 页面加载时调用API获取数据
    this.getLogData();
    this.getRollHistorytList();
    this.getPlanList();
  },
  methods: {
    getLogData() {
      this.tableLoading = true;
      getLogDataPage(this.queryForm)
        .then((response) => {
          this.tableLoading = false;
          this.alarmData = response.data.list; // 赋值表格数据
        })
        .catch((error) => {
          this.tableLoading = false;
          console.error("获取日志数据失败:", error);
          this.$message.error("获取日志数据失败，请稍后重试");
        });
    },
    getRollHistorytList() {
      getRollHistorytList(this.queryForm)
        .then((response) => {
          this.rollHistoryLoading = false;
          this.rollHistoryData = response.data.list; // 赋值表格数据
        })
    },
    getPlanList() {
      listPlan(this.queryForm)
        .then((response) => {
          this.planLoading = false;
          this.planData = response.data.map(item => {
            return {
              ...item,
              onlineDate: item.onlineDate?.replace('T', ' '),
              startDate: item.startDate?.replace('T', ' '),
              endDate: item.endDate?.replace('T', ' '),
              furInDate: item.furInDate?.replace('T', ' '),
              furOutDate: item.furOutDate?.replace('T', ' '),
            }
          }); // 赋值表格数据
        })
    }
  },
};
</script>

<style scoped lang="scss">
/* 主题色与布局样式（保持原有） */
$theme-primary: #a7acb4;
$theme-light: rgba(167, 172, 180, 0.8);
$theme-dark: rgba(140, 145, 153, 0.8);
$theme-bg1: #454c51;
$theme-bg2: #454c51;
$theme-bg3: #1E2227;
$theme-text-light: #f0f0f0;
$theme-text-gray: #c9cdcf;
</style>