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

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

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

const message = useMessage()

const ledRefs = ref()

const serialPort = useSerialPortStore()

const showChar  = (index, data, color) => {
  if (!data) return

  if (!serialPort.isOpen) {
    message.error('请连接并打开串口设备')
    return
  }

  clearArea(index)

  if (!color) return

  if (data.length === 15) {
    data = [data[0],data[1],data[2],false,
    data[3],data[4],data[5],false,
    data[6],data[7],data[8],false,
    data[9],data[10],data[11],false,
    data[12],data[13],data[14],false,
    false,false,false,false,
    false,false,false,false]    
  }

  
  if (data.length === 28) {
    let ledx = {
      0:[0,0,0,0,0,0,0,0],
      1:[0,0,0,0,0,0,0,0],
      2:[0,0,0,0,0,0,0,0],
      3:[0,0,0,0,0,0,0,0]
    }
    for (let i = 0; i < data.length; i++) {
      if(data[i]){
        const x = i % 4 + index * 4
        const y = Math.floor(i / 4)
        const ledIndex = y * COLS + x
        ledRefs.value[ledIndex].$el.children[0].style.backgroundColor = color
        const rx = ledIndex % COLS
        const ry = Math.floor(ledIndex / COLS)
        ledx[rx-4*index][ry] = 1
      }
    }
    const origin = 4 * index
    const rgb = convert.hex.rgb(color)
    const I = parseInt(ledx[0].toString().replace(/,/gi,''),2)
    const II = parseInt(ledx[1].toString().replace(/,/gi,''),2)
    const III = parseInt(ledx[2].toString().replace(/,/gi,''),2)
    const IV = parseInt(ledx[3].toString().replace(/,/gi,''),2)
    let cmd = `$LEDAREA,${origin},0,${I},${II},${III},${IV},${rgb[0]},${rgb[1]},${rgb[2]}*`
    cmd += cmd.length
    cmd += '\r\n'
    serialPort.write(cmd)
  }
}

const clearArea = (areaIndex) => {
  for(let i = 0; i < 8; i++){
    for (let j = 0; j < 4; j++){
      const ledIndex = i * COLS + areaIndex * 4 + j
      ledRefs.value[ledIndex].$el.children[0].style.backgroundColor = 'black'
    }
  }
  const origin = 4 * areaIndex
  let cmd = `$LEDAREA,${origin},0,0,0,0,0,0,0,0*`
  cmd += cmd.length
  cmd += '\r\n'
  serialPort.write(cmd)
}

const clearAll  = () => {
  if (!serialPort.isOpen) {
    message.error('请连接并打开串口设备')
    return
  }
  ledRefs.value.forEach(ledRef => {
    ledRef.$el.children[0].style.backgroundColor = 'black'
  })
  serialPort.write('$LEDCL,0*9\r\n')
}

defineExpose( { showChar, clearArea, clearAll })
</script>