57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
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, 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()
|
||
|
|
|
||
|
|
let color
|
||
|
|
const changeColor = (value) => {
|
||
|
|
if (!value) return
|
||
|
|
|
||
|
|
color = value
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
const ledRefs = ref(null)
|
||
|
|
const clear = () => {
|
||
|
|
ledRefs.value.forEach(ledRef => {
|
||
|
|
ledRef.changeColor('#000000')
|
||
|
|
});
|
||
|
|
}
|
||
|
|
const serialPort = useSerialPortStore()
|
||
|
|
const onClick = (index: number) => {
|
||
|
|
if (!serialPort.isOpen) {
|
||
|
|
message.error('请连接并打开串口设备')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
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'
|
||
|
|
|
||
|
|
serialPort.write(cmd)
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose( { changeColor, clear })
|
||
|
|
</script>
|