You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.5 KiB
100 lines
2.5 KiB
<template> |
|
<div :style="{ |
|
width: NODE_SIZE[0] + 'px', |
|
height: NODE_SIZE[1] + 'px', |
|
borderRadius: '6px', |
|
marginTop: '4px', |
|
}" 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> |