mec-cloud_-intelligent-manufacturing_client/zkqy-ui/src/views/amichi/dialogCompments/customizedVersion/processDisplay4.vue

<template>
  <div class="app-container">
    <div class="main-area">
      <div class="show-header">
        <div class="tag-list">
          <div class="tag-item">
             工序扫码记录
          </div>
        </div>
        <div class="search-list">
          <div class="search-tab">
            <el-radio-group
              v-model="queryParams.status"
              @change="getList"
            >
              <el-radio-button label="2">已完成</el-radio-button>
              <el-radio-button label="1">进行中</el-radio-button>
              <el-radio-button label="">所有</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search-input">
            <el-input
              placeholder="请输入订单号..."
              v-model="queryString"
              @keyup.enter.native="getList"
            >
              <el-button
                slot="append"
                @click="getList"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </div>
        </div>
      </div>
      <!--主体内容部分-->
      <div class="show-body" v-loading="loading">
        <template v-if="total > 0">
          <TaskListTotal v-for="(value, key,index) of tableData" :key="index + 1" :orderNumber="key"  :cardData="value" :status="queryParams.status"></TaskListTotal>
        </template>
        <el-empty v-else description="暂无数据"></el-empty>
        <!--分页列表-->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
          :page-sizes="[50]"
        />
      </div>
    </div>
  </div>
</template>

<script>
import TaskList from "./components/taskList.vue";
import TaskListTotal from "./components/taskListTotal.vue";
import {scanCodeMonitoringLogs,scanCodeMonitoringLogs2} from "@/api/amichi/ringScanInformation/index.js";

export default {
  name: "ProgressShow",
  props: [],
  components: { TaskList,TaskListTotal },
  data() {
    return {
      queryString: "",
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        status: "1",
      },
      // 列表数据
      tableData: {

      }, //列表数据
      loading: true,
      intervalId: null, // 用于存储定时器 ID
    };
  },
  computed: {},
  methods: {

    // 获取列表数据
    getList() {
      this.loading = true;
      scanCodeMonitoringLogs2({ ...this.queryParams, orderNumber: this.queryString })
     .then(
        res => {
          if (res.code == 200) {
            this.tableData=res.data;
            // this.tableData.forEach((item) => {
            //   this.$set(item, 'isExpanded', false);
            // });
            this.total = res.total;
          } else {
            this.$message.error("网络异常,请稍后再试");
          }
          this.loading=false;
        }
      );
    },
  },
  mounted() {
    this.getList();
    // 每 30 分钟调用一次 API
    // this.intervalId = setInterval(() => {
    //   this.getList();
    //   console.log("我执行了")
    // }, 1 * 60 * 1000); // 30 分钟 = 30 * 60 * 1000 毫秒
  },
  activated() {
    this.getList();
  },
  beforeDestroy() {
    // 组件销毁前清除定时器，防止内存泄漏
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 15px 15px;
  box-sizing: border-box;
  .main-area {
    box-shadow: 0 1px 15px 1px rgb(69 65 78 / 8%);
    background-color: #fff;
    .show-header {
      border-bottom: 1px solid #ebedf2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 20px 0px 20px;
      height: 50px;
      .tag-list {
        display: flex;
        align-items: center;
        .tag-item {
          display: flex;
          align-items: center;
          margin-right: 15px;
          font-size: 16px;
          .circle {
            width: 15px;
            height: 15px;
            background-color: rgb(104, 221, 104);
            border-radius: 50%;
            margin-right: 5px;
          }
          .icon {
            margin-right: 5px;
          }
          .current-node {
            display: inline-block;
            border: 2px solid #34bfa3;
            padding: 2px 5px;
            margin: 2px 40px 2px 10px;
          }
        }
      }
      .search-list {
        display: flex;
        .search-tab {
          margin-right: 20px;
        }
      }
    }
    .show-body {
      padding: 25px;
    }
  }
}
</style>