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

<script setup lang="ts">
import ServerCard from "./components/ServerCard.vue";
// import { getServerList } from "@/api/list";
import { getServerList } from "@/api/server";
import { onMounted, ref } from "vue";
import emptyIcon from "@/assets/emptyIcon.png";
defineOptions({
  name: "ServerList"
});

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: 10, total: 0 });

const serverList = ref([]);
const serverNum = ref({
  all_count: 0,
  offline_count: 0,
  online_count: 0
});

const searchValue = ref("");
const formData = ref({
  status: "",
  page: pagination.value.current,
  pageSize: pagination.value.pageSize
});
const dataLoading = ref(true);
// const onSubmit = () => {
//   console.log("submit!");
// };
const onPageSizeChange = (size: number) => {
  formData.value.pageSize = size;
  formData.value.page = 1;
  getCardListData();
};
const onCurrentChange = (current: number) => {
  formData.value.page = current;
  getCardListData();
};
const getCardListData = async () => {
  try {
    const { data, all_count, offline_count, online_count } =
      await getServerList(formData.value);
    serverList.value = data.results;
    console.log(data.results);
    serverNum.value.all_count = all_count;
    serverNum.value.offline_count = offline_count;
    serverNum.value.online_count = online_count;
    pagination.value = {
      ...pagination.value,
      total: data.count
    };
  } catch (e) {
    console.log(e);
  } finally {
    setTimeout(() => {
      dataLoading.value = false;
    }, 500);
  }
};
const selectState = (state: any) => {
  formData.value.status = state;
  formData.value.page = 1;
  getCardListData();
};
onMounted(() => {
  getCardListData();
});
</script>

<template>
  <div class="main serve_wrap h-full">
    <div class="serve_wrap_header">
      <el-button type="primary" @click="selectState">
        {{ `全部状态(${serverNum.all_count})` }}
      </el-button>
      <el-button @click="selectState(1001)">
        {{ `在线(${serverNum.online_count})` }}</el-button
      >
      <el-button @click="selectState(1002)">{{
        `离线(${serverNum.offline_count})`
      }}</el-button>
    </div>
    <div
      class="serve_body"
      v-loading="dataLoading"
      :element-loading-svg="svg"
      element-loading-svg-view-box="-10, -10, 50, 50"
    >
      <el-empty
        v-show="serverList.length === 0"
        :image="emptyIcon"
        :description="`${searchValue} 产品不存在`"
      />
      <template v-if="pagination.total > 0">
        <el-row :gutter="16">
          <el-col
            class="mb-4 w-[100%]"
            v-for="(server, index) in serverList"
            :key="index"
            :xs="24"
            :sm="24"
            :md="12"
            :lg="6"
            :xl="4"
          >
            <ServerCard :server="server" />
          </el-col>
        </el-row>
        <div class="pagination_wrap">
          <el-pagination
            v-model:currentPage="pagination.current"
            class="float-right"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            :page-sizes="[9, 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">
.serve_wrap {
  background-color: #ffffff;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid rgba(21, 77, 221, 0.2);
  .serve_wrap_header {
    box-sizing: border-box;
    padding: 16px;
    height: 62px;
    background: #ffffff;
    border-radius: 8px 8px 0px 0px;
    border-bottom: 1px solid rgba(21, 77, 221, 0.2);
  }
  .serve_body {
    box-sizing: border-box;
    padding: 16px;
    height: calc(100vh - 240px);
    /* background-color: orange; */
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .pagination_wrap {
    position: absolute;
    bottom: 30px;
    right: 16px;
  }
}
</style>