bdqh-course-platform-master/src/render/views/ElectronicScreenDesign/LEDPanelView/index.vue

<template>
  <n-grid x-gap="0" :cols="COLS">
    <n-gi v-for="n in COLS * ROWS" :key="n">
      <LED ref="ledRefs" @click="onClick(n - 1)" />
    </n-gi>
  </n-grid>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { NGrid, NGi } from 'naive-ui'
import convert from 'color-convert'
import LED from './components/LED.vue'
import { ROWS, COLS } from './data'

let color
const changeColor = (value) => {
  if (!value) return

  color = value
}


const ledRefs = ref(null)
const clear   = () => {
  ledRefs.value.forEach(ledRef => {
    ledRef.changeColor('#000000')
  });
}
const onClick = (index: number) => {

  if (!color) return
  ledRefs.value[index].changeColor(color)

  const x = index % COLS
  const y = Math.floor(index / COLS)

  const rgb = convert.hex.rgb(color)
  
  let cmd = `$LEDPX,${x},${y},${rgb[0]},${rgb[1]},${rgb[2]}*`
  cmd += cmd.length
  cmd += '\r\n'
  
  window.ipcRenderer.send('COM_WRITE',cmd)
}

defineExpose( { changeColor, clear })
</script>