aiforge/web_src/vuepages/pages/resources/queue/index.vue

<template>
  <div>
    <div class="title"><span>资源池（队列）</span></div>
    <div class="tools-bar">
      <div>
        <el-select class="select" size="medium" :value="value1">
          <!-- <el-option v-for="item in sceneList" :key="item.k" :label="item.v" :value="item.k" /> -->
        </el-select>
        <el-select class="select" size="medium" :value="value1">
          <!-- <el-option v-for="item in pointActions" :key="item.k" :label="item.v" :value="item.k" /> -->
        </el-select>
        <el-select class="select" size="medium" :value="value1"></el-select>
        <el-select class="select" size="medium" :value="value1"></el-select>
      </div>
      <div>
        <el-button size="medium" icon="el-icon-refresh" @click="showDialog('edit', {x: 1, y: 2, z: 3})">同步智算网络</el-button>
        <el-button type="primary" icon="el-icon-plus" size="medium" @click="showDialog('add')">新增资源池</el-button>
      </div>
    </div>
    <div class="table-container">
      <div>
        <el-table border :data="tableData" style="width: 100%" v-loading="loading" stripe>
          <el-table-column prop="index" label="ID" align="center" header-align="center"></el-table-column>
          <el-table-column prop="userName" label="资源池（队列）名称" align="center" header-align="center">
            <template #default="scope">
              <a :href="`/${scope.row.userName}`">{{ scope.row.userName }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="所属集群" align="center" header-align="center">
          </el-table-column>
          <el-table-column prop="scene" label="智算中心ID" align="center" header-align="center">
          </el-table-column>
          <el-table-column prop="pointAction" label="智算中心" align="left" header-align="center">
          </el-table-column>
          <el-table-column prop="remark" label="计算资源" align="left" header-align="center" min-width="200">
            <template #default="scope">
              <span v-html="scope.row.remark"></span>
            </template>
          </el-table-column>
          <el-table-column prop="operator" label="卡类型" align="center" header-align="center">
          </el-table-column>
          <el-table-column prop="amount" label="卡数 " align="center" header-align="center">
            <template #default="scope">
              {{ scope.row.amount }}
            </template>
          </el-table-column>
          <el-table-column prop="blance" label="最后更新时间" align="center" header-align="center">
            <template #default="scope">
              {{ scope.row.blance }}
            </template>
          </el-table-column>
          <el-table-column prop="blance" label="备注" align="center" header-align="center">
            <template #default="scope">
              {{ scope.row.blance }}
            </template>
          </el-table-column>
          <el-table-column prop="blance" label="操作" align="center" header-align="center">
            <template #default="scope">
              {{ scope.row.blance }}
            </template>
          </el-table-column>
          <template #empty>
            <span style="font-size: 12px">{{
                loading ? '加载中...' : '暂无数据'
            }}</span>
          </template>
        </el-table>
      </div>
      <div class="__r_p_pagination">
        <div style="margin-top: 2rem">
          <div class="center">
            <el-pagination background @current-change="currentChange" :current-page="pageInfo.curpage"
              :page-sizes="pageInfo.pageSizes" :page-size="pageInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <QueueDialog :visible.sync="queueDialogShow" :type="queueDialogType" :data="queueDialogData" @confirm="queueDialogConfirm"></QueueDialog>
  </div>
</template>

<script>
import QueueDialog from '../components/QueueDialog.vue';
export default {
  data() {
    return {
      value1: '1',
      searchVal: '',
      loading: false,
      tableData: [],
      pageInfo: {
        curpage: 1,
        pageSize: 10,
        pageSizes: [10],
        total: 0,
      },
      queueDialogShow: false,
      queueDialogType: 'add',
      queueDialogData: {},
    };
  },
  components: {
    QueueDialog
  },
  methods: {
    getTableData: function () {
      this.tableData = new Array(20).fill(0).map((_, index) => {
        return {
          index: index,
        };
      })
    },
    currentChange: function (val) {
      this.pageInfo.curpage = val;
      // this.getTableData();
    },
    showDialog(type, data) {
      this.queueDialogType = type;
      this.queueDialogData = data || {};
      this.queueDialogShow = true;
    },
    queueDialogConfirm() {
      this.queueDialogShow = false;
    }
  },
  mounted: function () {
    this.getTableData();
  },
  beforeDestroy: function () {
  },
};
</script>

<style scoped lang="less">
.title {
  height: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;

  span {
    font-weight: 700;
    font-size: 16px;
    color: rgb(16, 16, 16);
  }
}

.tools-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;

  .select {
    margin-right: 10px;

    /deep/ .el-input__inner {
      border-radius: 0;
    }
  }
}

.table-container {
  margin-bottom: 16px;

  /deep/ .el-table__header {
    th {
      background: rgb(245, 245, 246);
      font-size: 12px;
      color: rgb(36, 36, 36);
    }
  }

  /deep/ .el-table__body {
    td {
      font-size: 12px;
    }
  }

  .op-btn {
    cursor: pointer;
    font-size: 12px;
    color: rgb(25, 103, 252);
    margin: 0 5px;
  }
}

.center {
  display: flex;
  justify-content: center;
}
</style>