init commit

src/render/views/ElectronicScreenDesign/LEDPanelView/index.vue

@@ -0,0 +1,56 @@
+<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>