AiDOPWarehouse/Web/src/views/dashboard/components/HomeModuleKpiCard.vue

<template>
  <section class="dash-card home-kpi-card" @click="onCardClick">
    <header class="dash-card__head">
      <span class="dash-card__code">{{ moduleCode }}</span>
      <span class="dash-card__title">{{ title }}</span>
      <el-icon v-if="icon" class="dash-card__module-icon" :size="22">
        <component :is="icon" />
      </el-icon>
    </header>
    <div class="dash-card__body home-kpi-card__body">
      <component
        :is="styleDef.component"
        :module-code="moduleCode"
        :cells="cells"
        :loading="loading"
      />
    </div>
  </section>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { fetchHomeGrid } from '../../aidop/api/kanbanData'
import { AIDOP_LAYOUT_SAVED, AIDOP_S4_LAYOUT_SAVED } from '../../aidop/kanban/utils/s4LayoutEvents'
import { getStyleDef, DEFAULT_STYLE_CODE } from './homeCardStyles'

const props = defineProps({
  moduleCode: { type: String, required: true },
  title: { type: String, default: '' },
  icon: { type: [Object, Function], default: null },
  factoryId: { type: Number, default: 1 },
  /** 透传 smartOps base 查询参数（日期/产品/订单号/产线） */
  extra: { type: Object, default: () => ({}) },
})

const emit = defineEmits(['click'])

const apiItems = ref([])
const layoutPattern = ref(DEFAULT_STYLE_CODE)
const loading = ref(false)

function fmtValue(v, unit) {
  if (v == null || v === '') return '—'
  const n = Number(v)
  if (Number.isNaN(n)) return String(v)
  if (unit === '%') return `${Math.round(n * 10) / 10}`
  if (unit === '天') return `${Math.round(n * 10) / 10}`
  if (Math.abs(n - Math.round(n)) < 1e-9) return `${Math.round(n)}`
  return `${Math.round(n * 100) / 100}`
}

function fmtTargetDisplay(v, unit) {
  if (v == null || v === '') return ''
  const n = Number(v)
  if (Number.isNaN(n)) return String(v)
  const num =
    unit === '%'
      ? `${Math.round(n * 10) / 10}`
      : unit === '天'
      ? `${Math.round(n * 10) / 10}`
      : Math.abs(n - Math.round(n)) < 1e-9
      ? `${Math.round(n)}`
      : `${Math.round(n * 100) / 100}`
  if (unit === '%') return `${num}%`
  if (unit === '天') return `${num} 天`
  if (unit) return `${num} ${unit}`
  return `${num}`
}

function mapItem(item) {
  const arrow = item.gapArrow
  const trendArrow = arrow === 'up' ? 'up' : arrow === 'down' ? 'down' : 'flat'
  const lv = String(item.achievementLevel || 'green')
  const trendTone = lv === 'red' ? 'bad' : lv === 'yellow' ? 'warn' : 'good'
  const unit = item.unit ?? ''
  const ft =
    item.formulaText != null && String(item.formulaText).trim()
      ? String(item.formulaText).trim()
      : ''
  return {
    key: item.rowId || item.metricCode,
    label: item.displayName || item.metricCode,
    formulaText: ft,
    value: fmtValue(item.currentValue, unit),
    unit,
    targetDisplay: fmtTargetDisplay(item.targetValue, unit),
    trend: item.gapLabel || '—',
    trendArrow,
    trendTone,
  }
}

const cells = computed(() =>
  Array.isArray(apiItems.value) ? apiItems.value.map(mapItem) : []
)

const styleDef = computed(() => getStyleDef(layoutPattern.value))

async function load() {
  const mc = String(props.moduleCode || '').toUpperCase()
  if (!mc) return
  loading.value = true
  try {
    const grid = await fetchHomeGrid(mc, props.factoryId, props.extra || {})
    apiItems.value = grid?.items && grid.items.length > 0 ? grid.items : []
    layoutPattern.value = grid?.layoutPattern || DEFAULT_STYLE_CODE
  } catch {
    apiItems.value = []
    layoutPattern.value = DEFAULT_STYLE_CODE
  } finally {
    loading.value = false
  }
}

function onLayoutSaved(e) {
  const detailMc = String(e?.detail?.moduleCode || '').toUpperCase()
  if (!detailMc || detailMc === String(props.moduleCode || '').toUpperCase()) load()
}

function onS4LayoutSavedLegacy() {
  if (String(props.moduleCode || '').toUpperCase() === 'S4') load()
}

function onCardClick(e) {
  emit('click', e)
}

watch(
  () => [props.moduleCode, props.factoryId, props.extra],
  () => {
    load()
  },
  { deep: true }
)

onMounted(() => {
  load()
  if (typeof window !== 'undefined') {
    window.addEventListener(AIDOP_LAYOUT_SAVED, onLayoutSaved)
    window.addEventListener(AIDOP_S4_LAYOUT_SAVED, onS4LayoutSavedLegacy)
  }
})

onUnmounted(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener(AIDOP_LAYOUT_SAVED, onLayoutSaved)
    window.removeEventListener(AIDOP_S4_LAYOUT_SAVED, onS4LayoutSavedLegacy)
  }
})

defineExpose({ reload: load })
</script>

<style scoped>
.dash-card {
  display: flex;
  flex-direction: column;
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 0;
  overflow: hidden;
}

.dash-card:hover {
  border-color: #64748b;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.dash-card__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #334155;
}

.dash-card__module-icon {
  margin-left: auto;
  flex-shrink: 0;
  color: #5eead4;
  filter: drop-shadow(0 0 8px rgba(94, 234, 212, 0.45));
}

.dash-card__code {
  font-size: 13px;
  font-weight: 800;
  color: #60a5fa;
  letter-spacing: 0.5px;
}

.dash-card__title {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
}

.dash-card__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.home-kpi-card__body {
  padding: 2px 10px 4px;
  box-sizing: border-box;
}
</style>