General-AI-Platform-Web-Client/src/views/modelList/index.vue

<script setup lang="ts">
import ModelCard from "./components/ModelCard.vue";
// import { getModelList } from "@/api/list";
import { getModelsList } from "@/api/model";
import { onMounted, ref } from "vue";
defineOptions({
  name: "ServerList"
});
// TODO 0416 卡片分页封装
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;

const pagination = ref({ current: 1, pageSize: 48, total: 0 });

const deviceList = ref([]);

const searchValue = ref("");
const dataLoading = ref(true);
const modelNum = ref(0);
// const onSubmit = () => {
//   console.log("submit!");
// };
const onPageSizeChange = (size: number) => {
  pagination.value.pageSize = size;
  pagination.value.current = 1;
  getCardListData();
};
const onCurrentChange = (current: number) => {
  pagination.value.current = current;
  getCardListData();
};
const getCardListData = async () => {
  try {
    // const { data } = await getModelList({});
    const { data } = await getModelsList({
      page: pagination.value.current,
      pageSize: pagination.value.pageSize
    });
    deviceList.value = data.results;
    modelNum.value = data.count;
    console.log(data, "resData", data.results);
    pagination.value = {
      ...pagination.value,
      total: data.count
    };
  } catch (e) {
    console.log(e);
  } finally {
    setTimeout(() => {
      dataLoading.value = false;
    }, 500);
  }
};
onMounted(() => {
  getCardListData();
});
</script>

<template>
  <div class="main modelList_wrap">
    <div class="modelList_header">
      苏胜天大模型衍生模型库
      <span class="text-[24px] text-[#154DDD]">{{ modelNum }}</span>
    </div>
    <div
      class="modelList_body"
      v-loading="dataLoading"
      :element-loading-svg="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <el-empty
        v-show="deviceList.length === 0"
        :description="`${searchValue} 产品不存在`"
      />
      <template v-if="pagination.total > 0">
        <el-row :gutter="16">
          <el-col
            class="mb-4 w-[100%]"
            v-for="(model, index) in deviceList"
            :key="index"
            :xs="24"
            :sm="24"
            :md="12"
            :lg="8"
            :xl="6"
          >
            <ModelCard :model="model" />
          </el-col>
        </el-row>
        <div class="pagination_wrap">
          <el-pagination
            v-model:currentPage="pagination.current"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            :page-sizes="[18, 24, 36]"
            :background="false"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="onPageSizeChange"
            @current-change="onCurrentChange"
          />
        </div>
      </template>
    </div>
  </div>
</template>
<style lang="scss">
.modelList_wrap {
  background-color: #ffffff;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid rgba(21, 77, 221, 0.2);
  .modelList_header {
    box-sizing: border-box;
    padding: 16px;
    height: 62px;
    font-family: Douyin Sans, Douyin Sans;
    font-weight: bold;
    font-size: 20px;
    color: #333333;
    border-bottom: 1px solid rgba(21, 77, 221, 0.2);
  }
  .modelList_body {
    height: calc(100vh - 180px);
    padding: 16px;
    padding-bottom: 60px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .pagination_wrap {
    box-sizing: border-box;
    position: absolute;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 16px;
    width: 100%;
    height: 60px;
    background: #fff;
    bottom: 0px;
    right: 0px;
    // width: calc(100% - 136px - 260px);
    /* background-color: red; */
  }
}
</style>