saber/src/views/monitor/certificate.vue

<template>
  <basic-container class="certificate-monitor-container">
    <div class="title-box">
      <div
        v-if="status != null"
        class="tag"
        :style="{ background: status ? '#67C23B' : '#949494' }"
      >
        {{ status ? "正在运行" : "已停止" }}
      </div>
      <div class="box-title">电签队列详情</div>
    </div>

    <div class="table-box">
      <div class="search-box">
        <el-select
          size="small"
          v-model="query.type"
          filterable
          style="width: 150px"
          placeholder="所属系统"
          clearable
        >
          <el-option label="质检" :value="1"> </el-option>
          <el-option label="试验" :value="2"> </el-option>
        </el-select>
        <el-select
          size="small"
          v-model="query.projectId"
          filterable
          style="width: 200px"
          placeholder="项目名称"
          clearable
          @change="(id) => queryContractList(id)"
        >
          <el-option
            v-for="item in projectOptions"
            :key="item.id"
            :label="item.projectName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select
          size="small"
          v-model="query.contractId"
          filterable
          style="width: 200px"
          placeholder="合同段"
          clearable
        >
          <el-option
            v-for="item in contractOptions"
            :key="item.id"
            :label="item.contractName"
            :value="item.id"
          >
          </el-option>
        </el-select>

        <div>
          <el-input
            size="small"
            v-model="query.taskName"
            style="width: 240px; margin-right: 10px"
            placeholder="搜索任务名称/ID"
            clearable
          />
          <el-button type="primary" size="small" @click="listPage">
            搜索
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="initSearch"
            icon="el-icon-refresh"
          >
            数据刷新
          </el-button>
        </div>
      </div>
      <el-tabs v-model="query.taskType" @tab-click="listPage">
        <el-tab-pane :label="`正在处理（${runTotal}）`" :name="1"></el-tab-pane>
        <el-tab-pane :label="`排队中（${orderTotal}）`" :name="2"></el-tab-pane>
      </el-tabs>
    </div>

    <el-table
      class="martop20 tableList"
      :data="tableData"
      style="width: 100%"
      max-height="calc(100vh - 350px)"
    >
      <el-table-column type="index" label="序号" width="80"> </el-table-column>
      <el-table-column prop="type" label="所属系统" width="100">
        <template slot-scope="{ row }">
          <span v-if="row.type == 1">质检</span>
          <span v-else>试验</span>
        </template>
      </el-table-column>
      <el-table-column prop="projectName" label="项目名称" width="280">
        <template slot-scope="{ row }">
          <span style="color: #979797">{{ row.projectName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="contractName" label="合同段" width="150">
        <template slot-scope="{ row }">
          <span style="color: #979797">{{ row.contractName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="taskName" label="任务名称">
        <template slot-scope="{ row }">
          <span style="font-weight: bolder; color: #000">
            {{ row.taskName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="任务人" width="120">
        <template slot-scope="{ row }">
          <span style="font-weight: bolder; color: #000">
            {{ row.userName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="signType" label="任务类型" width="120">
        <template slot-scope="{ row }">
          <div
            class="task-tag"
            :style="{ background: row.type == 1 ? '#DCEAFE' : '#DCFCE7',color: row.type == 1 ? '#3973ED' : '#16A34A' }"
          >
            {{ row.type == 1 ? "个人证书" : "企业证书" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="任务开始时间" width="120">
      </el-table-column>
      <el-table-column
        v-if="query.taskType == 1"
        prop="startTime"
        label="电签开始时间"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="finishTime" label="预计完成时间" width="120">
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="query.taskType == 2"
      hide-on-single-page
      style="float: right"
      background
      class="martop20 marbottom20"
      layout="total, prev, pager, next, jumper, sizes"
      :total="orderTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pageIndex"
      :page-size="query.pageSize"
    >
    </el-pagination>
  </basic-container>
</template>

<script>
import {
  getTaskBatchCount,
  getTaskBatchPage,
  getTaskBatchPageOrder,
  queryProjectList,
} from "@/api/certificate/list";
import { findContractByProjectId } from "@/api/manager/contractinfo";

export default {
  data() {
    return {
      query: {
        pageIndex: 1,
        pageSize: 20,
        contractId: null,
        projectId: null,
        taskName: "",
        taskType: 1,
        type: null,
      },
      projectOptions: [],
      contractOptions: [],
      tableData: [],
      orderTotal: 0,
      runTotal: 0,
      status: null,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.queryProjectList();
      this.getCount();
      this.listPage();
    },
    async getCount() {
      const { data: res } = await getTaskBatchCount({
        projectId: this.query.projectId,
        contractId: this.query.contractId,
        type: this.query.type,
        taskName: this.query.taskName,
      });

      this.orderTotal = res.data.orderTotal;
      this.runTotal = res.data.runTotal;
      this.status = res.data.status;
    },
    async queryProjectList() {
      const { data: res } = await queryProjectList();
      if (res.code == 200) {
        this.projectOptions = res.data;
      }
    },
    // 根据项目ID获取合同段选项
    async queryContractList(pId) {
      const { data: res } = await findContractByProjectId(pId);
      if (res.code === 200) {
        this.contractOptions = res.data;
      }
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.listPage();
    },
    handleCurrentChange(val) {
      this.query.pageIndex = val;
      this.listPage();
    },
    taskTypeChange(el) {
      this.query.taskType = el.name;
      this.listPage();
    },
    initSearch() {
      this.query = {
        ...this.query,
        pageIndex: 1,
        pageSize: 20,
        contractId: null,
        projectId: null,
        taskName: "",
        type: null,
      };
      this.listPage();
      this.getCount();
    },

    async listPage() {
      if (this.query.taskType == 1) {
        this.listPageRun();
      } else {
        this.listPageOrder();
      }
    },
    async listPageRun() {
      const { data: res } = await getTaskBatchPage({
        projectId: this.query.projectId,
        contractId: this.query.contractId,
        type: this.query.type,
        taskType: this.query.taskType,
        taskName: this.query.taskName,
      });

      if (res.code === 200) {
        this.tableData = res.data;
        this.runTotal = res.data.length;
      }
    },
    async listPageOrder() {
      //分页获取证书列表数据
      const { data: res } = await getTaskBatchPageOrder({
        current: this.query.pageIndex,
        size: this.query.pageSize,
        projectId: this.query.projectId,
        contractId: this.query.contractId,
        type: this.query.type,
        taskType: this.query.taskType,
        taskName: this.query.taskName,
      });

      if (res.code === 200) {
        this.tableData = res.data.records;
        this.orderTotal = res.data.total;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.certificate-monitor-container {
  .title-box {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .tag {
      padding: 6px 12px;
      font-size: 12px;
      color: #fff;
      border-radius: 20px;
      line-height: 1;
    }
    .box-title {
      font-size: 20px;
      font-weight: 700;
      margin-left: 10px;
    }
  }

  .table-box {
    position: relative;
    .search-box {
      position: absolute;
      z-index: 1;
      right: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }
}

.task-tag {
  width: 80px;
  padding: 4px 4px;
  border-radius: 30px;
  color: #fff;
  text-align: center;
  font-size: 14px;
}

// .tableList {
//   ::v-deep th.el-table__cell {
//     font-size: 16px !important;
//   }
// }
</style>