EDFS-MCU/src/views/testG6/components/Node.vue

<template>
  <div :style="{
    width: NODE_SIZE[0] + 'px',
    height: NODE_SIZE[1] + 'px',
    borderRadius: '6px',
    marginLeft: -(NODE_SIZE[0] / 2 - 10) + 'px',
    }" class="box-border rounded-md overflow-hidden flex">
    <div class="h-100% p-4px" :style="{ background:   Device.bgColor}">
      <img :src="Device.icon" style="height: 100%;" alt="">
    </div>
    <div class="bg-white flex-1 flex items-center justify-center">
      <span class="text-12px">{{ Device.name }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MyNodeData } from "../type/index.ts";
import { DeviceType, NODE_SIZE } from "../utils/index";
import EmsIcon from '@/assets/images/device/ems.png';
import EcuIcon from '@/assets/images/device/ecu.png';
import EmIcon from '@/assets/images/device/em.png';
import EmMeasureIcon from '@/assets/images/device/em.png';
import BmsIcon from '@/assets/images/device/bms.png';
import CacIcon from '@/assets/images/device/cac.png';
import DgsIcon from '@/assets/images/device/dgs.png';
import FfsIcon from '@/assets/images/device/ffs.png';
import MpptIcon from '@/assets/images/device/mppt.png';
import PcsIcon from '@/assets/images/device/pcs.png';
import ThsIcon from '@/assets/images/device/ths.png';
import TmsIcon from '@/assets/images/device/tms.png';
import UnitIcon from '@/assets/images/device/unit.png';
import WppIcon from '@/assets/images/device/wpp.png';
import { computed } from "vue";

const typeToIconMap: Record<string, Object> = {
  [DeviceType.Ems]: {
    icon: EmsIcon,
    bgColor: '#0769FF'
  },
  [DeviceType.Ecu]: {
    icon: EcuIcon,
    bgColor: '#0769FF'
  },
  [DeviceType.Em]: {
    icon: EmIcon,
    bgColor: '#2CA02C'
  },
  [DeviceType['Em-Measure']]: {
    icon: EmIcon,
    bgColor: '#2CA02C'
  },
  [DeviceType.Bms]: {
    icon: BmsIcon,
    bgColor: '#FF7F50'
  },
  [DeviceType.Cac]: {
    icon: CacIcon,
    bgColor: '#17BECF'
  },
  [DeviceType.Dgs]: {
    icon: DgsIcon,
    bgColor: '#9467BD'
  },
  [DeviceType.Ffs]: {
    icon: FfsIcon,
    bgColor: '#17BECF'
  },
  [DeviceType.Mppt]: {
    icon: MpptIcon,
    bgColor: '#9467BD'
  },
  [DeviceType.Pcs]: {
    icon: PcsIcon,
    bgColor: '#FF7F50'
  },
  [DeviceType.Wpp]: {
    icon: WppIcon,
    bgColor: '#9467BD'
  },
  [DeviceType.Tms]: {
    icon: TmsIcon,
    bgColor: '#17BECF'
  },
}

const props = defineProps<{
  data: MyNodeData;
}>()

const Device = computed(() => {
  const style = typeToIconMap[props.data.data.type];
  return Object.assign(props.data.data, style);
})

</script>

<style scoped lang="scss">

</style>