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>{{ $t('dashboard.alarmInfo') }}</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>{{ $t('dashboard.rollChangeInfo') }}</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>{{ $t('dashboard.productionPlan') }}</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>{{ $t('dashboard.processTracking') }}</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 {
      alarmData: [], // 表格数据（从API获取）
      queryForm: { pageNum: 1, pageSize: 10 }, // 分页参数
      tableLoading: false, // 加载状态
      rollHistoryData: [], // 轧辊历史数据
      rollHistoryLoading: false, // 轧辊历史数据加载状态
      planData: [], // 生产计划数据
      planLoading: false, // 生产计划数据加载状态
    };
  },
  computed: {
    // 功能卡片配置
    featureCards() {
      return [
        { title: this.$t('dashboard.productionPlan'), desc: this.$t('dashboard.productionPlanDesc'), icon: "table", path: "/plan" },
        { title: this.$t('dashboard.logRecord'), desc: this.$t('dashboard.logRecordDesc'), icon: "log", path: "/log" },
        { title: this.$t('dashboard.rollManagement'), desc: this.$t('dashboard.rollManagementDesc'), icon: "redis", path: "/roller" },
        { title: this.$t('dashboard.shutdownManagement'), desc: this.$t('dashboard.shutdownManagementDesc'), icon: "bug", path: "/stop" },
      ];
    },
    // 表格列配置（与日志字段对应）
    alarmColumns() {
      return [
        { label: this.$t('dashboard.occurTime'), prop: "timestamp", width: "200px" },
        { label: this.$t('dashboard.alarmModule'), prop: "module", width: "60px" },
        { label: this.$t('dashboard.alarmType'), prop: "logtype" },
      ];
    },
    rollHistoryColumns() {
      return [
        { label: this.$t('dashboard.rollChangeId'), prop: "changeid" },
        { label: this.$t('dashboard.rollId'), prop: "rollid" },
        { label: this.$t('dashboard.unit'), prop: "seton", width: "80px" },
        { label: this.$t('dashboard.shift'), prop: "shift", width: "60px" },
        { label: this.$t('dashboard.crew'), prop: "crew", width: "60px" },
        { label: this.$t('dashboard.standId'), prop: "standid", width: "80px" },
        { label: this.$t('dashboard.position'), prop: "position", width: "50px" },
        { label: this.$t('dashboard.diameter'), prop: 'diameter', width: '100px' },
        { label: this.$t('dashboard.roughness'), prop: 'rough', width: '100px' },
        { label: this.$t('dashboard.crown'), prop: 'crown', width: '100px' },
        { label: this.$t('dashboard.composition'), prop: 'composition', width: '100px' },
      ];
    },
    planColumns() {
      return [
        { label: this.$t('dashboard.seqId'), prop: 'seqid', width: '80px' },
        { label: this.$t('dashboard.coilId'), prop: 'coilid', width: '120px' },
        { label: this.$t('dashboard.unitCode'), prop: 'unitCode', width: '100px' },
        { label: this.$t('dashboard.planId'), prop: 'planid', width: '120px' },
        { label: this.$t('dashboard.planType'), prop: 'planType', width: '80px' },
        { label: this.$t('dashboard.steelGrade'), prop: 'steelGrade', width: '120px' },
        { label: this.$t('dashboard.exitCoilId'), prop: 'exitCoilid', width: '100px' },
        { label: this.$t('dashboard.orderNo'), prop: 'orderNo', width: '100px' },
        { label: this.$t('dashboard.customerCode'), prop: 'custommerCode', width: '100px' },
        { label: this.$t('dashboard.onlineDate'), prop: 'onlineDate' },
        { label: this.$t('dashboard.startDate'), prop: 'startDate' },
        { label: this.$t('dashboard.endDate'), prop: 'endDate' },
        { label: this.$t('dashboard.furInDate'), prop: 'furInDate' },
        { label: this.$t('dashboard.furOutDate'), prop: 'furOutDate' },
      ];
    },
  },
  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(this.$t('dashboard.getLogDataFailed'));
        });
    },
    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>