alert-front/src/views/model/list/ModelCard.vue

<script lang="ts" setup>
import { Card } from 'ant-design-vue'
import type { PropType } from 'vue'
import { ref, watch } from 'vue'
import type { ModelItem } from './data'
import CreateModel from './CreateModel.vue'
import Icon from '@/components/Icon/index'
import { modelCardListApi } from '@/api/alert/model/models'
import type { ModelQueryParams } from '@/api/alert/model/model/models'
import { useGo } from '@/hooks/web/usePage'
import { useDrawer } from '@/components/Drawer'

const props = defineProps({
  loading: {
    type: Boolean,
  },
  selectData: {
    type: Object as PropType<Record<string, any> | null | undefined>,
  },
  systemId: {
    type: Number,
  },
})

const [registerDraw, { openDrawer }] = useDrawer()

// 点击模型卡片跳转训练页面
const go = useGo()
function changeModel(id, version?) {
  const versionParam = version ? `?version=${encodeURIComponent(version)}` : ''
  go(`/model/train/${id}${versionParam}`)
}

const modelCardList = ref<Array<ModelItem>>([])
const colors = ['#8dc63f', '#dbb09e']
const statusStr = ['未下装', '已下装']
const icons = ['material-symbols:lock-open-right-outline', 'material-symbols:lock-outline']

watch(
  () => props.selectData,
  async (value) => {
    const queryParams: ModelQueryParams = {
      unitId: value?.unit,
      typeId: value?.type,
      systemId: value?.system,
      name: value?.name,
    }
    const modelList = await modelCardListApi(queryParams)
    if (!modelList) {
      modelCardList.value = []
      return
    }
    const cardList: ModelItem[] = []
    for (const modelCard of modelList) {
      // modelCard.status = 0;
      const card: ModelItem = {
        id: modelCard.id,
        title: modelCard.name,
        version: modelCard.version,
        icon: icons[modelCard.status],
        value: 1,
        total: 1,
        color: colors[modelCard.status],
        status: statusStr[modelCard.status],
        creator: modelCard.creator,
        createTime: modelCard.createTime,
        description: modelCard.name,
        headStyle: {
          backgroundColor: colors[modelCard.status],
          fontSize: '20px',
        },
        bodyStyle: {
          borderColor: colors[modelCard.status],
          borderWidth: '1px',
        },
      }
      cardList.push(card)
    }
    modelCardList.value = cardList
  },
)
</script>

<template>
  <div class="enter-y">
    <div class="grid gap-4 md:grid-cols-4">
      <template v-for="item in modelCardList" :key="item.title">
        <Card
          size="small"
          :loading="loading"
          :title="item.title"
          :hoverable="true"
          :body-style="item.bodyStyle"
          :head-style="item.headStyle"
          @click="changeModel(item.id, item.version)"
        >
          <template #extra>
            <Icon :icon="item.icon" :size="30" color="white" />
          </template>
          <div class="grid p-2 px-5 md:grid-cols-3">
            <span>创建人: {{ item.creator }}</span><span>创建时间: {{ item.createTime }}</span><span>模型状态: {{ item.status }}</span>
          </div>
        </Card>
      </template>
      <Card v-show="systemId != null" size="small" class="icon-card" :hoverable="true" @click="openDrawer(true)">
        <Icon icon="ic:sharp-add" :size="80" color="#a7a9a7" />
      </Card>
    </div>
    <CreateModel :system-id="systemId" @register="registerDraw" />
  </div>
</template>

<style>
  .icon-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
  }
</style>