python_93040206/ClientPlatform/src 2/pages/task/task.vue

<template>
    <div class="page-box">
        <div class="search-box">
            <el-input placeholder="任务Id"></el-input>&nbsp;&nbsp;
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <div>
            <vxe-table
                    show-overflow
                    height="200"
                    row-id="id"
                    :loading="loading1"
                    :data="tableData1"
            >
                <vxe-column field="jobId" title="job Id" width="80"></vxe-column>
                <vxe-column
                        field="requestTime"
                        title="request Time"
                        sortable
                ></vxe-column>
                <vxe-column field="createTime" title="create Time"></vxe-column>
                <vxe-column field="completeTime" title="complete Time"></vxe-column>
                <vxe-column field="deleteTime" title="delete Time"></vxe-column>
                <vxe-column field="status" title="Status" width="120">
                    <template #default="{ row }">
                        <el-tag :type="getTag(row)">{{ row.status }}</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="Details" title="Details" width="80">
                    <template #default="{ row }">
                        <div style="text-align: center">
                            <i @click="showDetail(row)" class="el-icon-search" style="cursor: pointer;"></i>
                        </div>
                    </template>
                </vxe-column>
            </vxe-table>
            <vxe-pager
                    :loading="loading1"
                    :current-page="tablePage1.currentPage"
                    :page-size="tablePage1.pageSize"
                    :total="tablePage1.totalResult"
                    :layouts="[
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'FullJump',
          'Sizes',
          'Total',
        ]"
                    @page-change="handlePageChange1"
            >
            </vxe-pager>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import { hotTags, getClicks, getBlogs } from "@/api";

export default {
  name: "task",
  data() {
    return {
      loading1: false,
      tableData1: [],
      tablePage1: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
    };
  },
  created() {
    this.findList1();
  },
  methods: {
    findList1() {
      this.loading1 = true;
      setTimeout(() => {
        const list = [
          {
            completeTime: "not completed",
            createTime: "not created",
            jobId: 795,
            key: 795,
            requestTime: "2023-04-04 21:09:27",
            deleteTime: "2023-04-04 21:09:27",
            status: "waiting",
          },
          {
            completeTime: "not completed",
            createTime: "not created",
            jobId: 795,
            key: 795,
            requestTime: "2023-04-04 21:09:27",
            deleteTime: "2023-04-04 21:09:27",
            status: "success",
          },
          {
            completeTime: "not completed",
            createTime: "not created",
            jobId: 795,
            key: 795,
            requestTime: "2023-04-04 21:09:27",
            deleteTime: "2023-04-04 21:09:27",
            status: "failed",
          },
        ];
        this.loading1 = false;
        this.tablePage1.totalResult = list.length;
        this.tableData1 = list.slice(
          (this.tablePage1.currentPage - 1) * this.tablePage1.pageSize,
          this.tablePage1.currentPage * this.tablePage1.pageSize
        );
        console.log(this.tableData1);
      }, 300);
    },
    handlePageChange1({ currentPage, pageSize }) {
      this.tablePage1.currentPage = currentPage;
      this.tablePage1.pageSize = pageSize;
      this.findList1();
    },
    print(row) {
      console.log(row);
    },
    getTag(row) {
      if (row.status === "success") {
        return "success";
      }
      if (row.status === "waiting") {
        return "info";
      }
      return "danger";
    },
    showDetail(row) {
      this.$router.push({
        path: '/result',
        query: {
          jobId: row.jobId
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
.page-box {
  padding: 0 24px;
  margin-top: 67px;
  height: calc(100vh - 68px);

  .search-box {
    display: flex;
    margin-top: 24px;
    padding-top: 24px;
    margin-bottom: 24px;
  }

  .list-box {
    //margin-top: 24px;
    //  box-sizing: border-box;
    //  height: 300px;
    //  width: 100%;
  }
}
</style>