feat 决策

package.json

@@ -32,6 +32,8 @@
     "marked": "^16.1.1",
     "nprogress": "0.2.0",
     "pinia": "3.0.2",
+    "simple-keyboard": "^3.8.71",
+    "simple-keyboard-layouts": "^3.4.114",
     "splitpanes": "4.0.4",
     "video.js": "^8.23.3",
     "vue": "3.5.16",
@@ -41,6 +43,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.2.4",
+    "less": "^4.4.0",
     "sass-embedded": "1.89.1",
     "unplugin-auto-import": "0.18.6",
     "unplugin-vue-setup-extend-plus": "1.0.1",

src/router/index.js

@@ -52,6 +52,15 @@ export const constantRoutes = [
         path: '/xjc-integratedmachine/components/sendtoemail',
         component: () => import('@/views/xjc-integratedmachine/components/sendtoemail.vue'),
     },
+    //键盘
+    {
+        path: '/xjc-integratedmachine/components/xjc_keyboard',
+        component: () => import('@/views/xjc-integratedmachine/components/xjc_keyboard.vue'),
+    },
+    {
+        path: '/xjc-integratedmachine/components/xjc_keyboard_test',
+        component: () => import('@/views/xjc-integratedmachine/components/xjc_keyboard_test.vue'),
+    },
 
     {
         path: '/redirect',

src/views/xjc-integratedmachine/components/xjc_keyboard.vue

@@ -0,0 +1,250 @@
+<template>
+    <div class="keyboard-container">
+        <div :class="keyboardClass" ref="keyboardEl"></div>
+    </div>
+</template>
+
+<script setup>
+    import { ref, onMounted, watch, nextTick } from 'vue'
+    import Keyboard from 'simple-keyboard'
+    import 'simple-keyboard/build/css/index.css'
+    import chineseLayout from 'simple-keyboard-layouts/build/layouts/chinese'
+
+    const props = defineProps({
+        keyboardClass: {
+            type: String,
+            default: 'simple-keyboard'
+        },
+        input: {
+            type: String,
+            default: ''
+        }
+    })
+
+    const emit = defineEmits(['onChange', 'onKeyPress', 'onClose'])
+
+    const keyboardEl = ref(null)
+    const keyboard = ref(null)
+    const currentLayout = ref('default')
+    const isChineseMode = ref(false)
+    const isShiftOn = ref(false)
+
+    const displayOptions = {
+        '{bksp}': '⌫',
+        '{lock}': '大写',
+        '{enter}': '确定',
+        '{tab}': '⇄',
+        '{shift}': '⇧',
+        '{change}': '中/英',
+        '{space}': '空格',
+        '{clear}': '清空',
+        '{close}': '关闭'
+    }
+
+    const englishLayout = {
+        default: [
+            '1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+            '{tab} q w e r t y u i o p [ ] \\',
+            '{lock} a s d f g h j k l ; \' {enter}',
+            '{shift} z x c v b n m , . / {clear}',
+            '{space} {change} {close}'
+        ],
+        shift: [
+            '! @ # $ % ^ & * ( ) _ + {bksp}',
+            '{tab} Q W E R T Y U I O P { } |',
+            '{lock} A S D F G H J K L : " {enter}',
+            '{shift} Z X C V B N M < > ? {clear}',
+            '{space} {change} {close}'
+        ]
+    }
+
+    const chineseLayoutConfig = {
+        ...englishLayout,
+        layoutCandidates: chineseLayout.layoutCandidates
+    }
+
+    onMounted(() => {
+        initializeKeyboard()
+    })
+
+    function initializeKeyboard() {
+        keyboard.value = new Keyboard(keyboardEl.value, {
+            onChange: input => {
+                emit('onChange', input)
+            },
+            onKeyPress: button => {
+                handleKeyPress(button)
+            },
+            layout: isChineseMode.value ? chineseLayoutConfig : englishLayout,
+            layoutName: currentLayout.value,
+            display: displayOptions,
+            buttonTheme: [
+                {
+                    class: 'hg-function-btn',
+                    buttons: '{bksp} {lock} {enter} {tab} {shift} {clear} {close}'
+                },
+                {
+                    class: 'hg-mode-btn',
+                    buttons: '{change}'
+                },
+                {
+                    class: 'hg-space-btn',
+                    buttons: '{space}'
+                }
+            ],
+            mergeDisplay: true,
+            enableLayoutCandidates: true,
+            useMouseEvents: true,
+            physicalKeyboardHighlight: true,
+            syncInstanceInputs: true
+        })
+    }
+
+    function handleKeyPress(button) {
+        emit('onKeyPress', button)
+
+        switch(button) {
+            case '{close}':
+                emit('onClose')
+                break
+            case '{change}':
+                toggleChineseMode()
+                break
+            case '{clear}':
+                emit('onChange', '')
+                keyboard.value?.clearInput()
+                break
+            case '{shift}':
+            case '{lock}':
+                toggleShift()
+                break
+        }
+    }
+
+    async function toggleChineseMode() {
+        isChineseMode.value = !isChineseMode.value
+
+        // 更新按钮显示文本
+        displayOptions['{change}'] = isChineseMode.value ? '英/中' : '中/英'
+
+        await nextTick()
+
+        keyboard.value.setOptions({
+            layout: isChineseMode.value ? chineseLayoutConfig : englishLayout,
+            layoutCandidates: isChineseMode.value ? chineseLayout.layoutCandidates : null,
+            display: displayOptions
+        })
+
+        // 强制刷新候选词显示
+        if (isChineseMode.value && keyboard.value.input) {
+            const currentInput = keyboard.value.input
+            keyboard.value.setInput(currentInput + ' ')
+            keyboard.value.setInput(currentInput)
+        }
+    }
+
+    function toggleShift() {
+        isShiftOn.value = !isShiftOn.value
+        currentLayout.value = isShiftOn.value ? 'shift' : 'default'
+
+        keyboard.value.setOptions({
+            layoutName: currentLayout.value
+        })
+    }
+
+    watch(() => props.input, (newVal) => {
+        if (keyboard.value && newVal !== keyboard.value.input) {
+            keyboard.value.setInput(newVal)
+        }
+    })
+
+    defineExpose({
+        setInput: (input) => {
+            if (keyboard.value) keyboard.value.setInput(input)
+        }
+    })
+</script>
+
+<style scoped>
+    .keyboard-container {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        z-index: 1000;
+        background: #f0f0f0;
+        padding: 10px 0;
+        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    }
+
+    :deep(.simple-keyboard) {
+        background: #f0f0f0;
+        max-width: 1000px;
+        margin: 0 auto;
+        padding: 10px;
+    }
+
+    :deep(.hg-button) {
+        height: 50px;
+        min-width: 50px;
+        font-size: 16px;
+        border-radius: 5px;
+        box-shadow: none;
+        background: #fff;
+        color: #333;
+        border: 1px solid #ddd;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    :deep(.hg-function-btn) {
+        background: #e0e0e0 !important;
+    }
+
+    :deep(.hg-mode-btn) {
+        background: #4a8cff !important;
+        color: white !important;
+    }
+
+    :deep(.hg-space-btn) {
+        flex-grow: 1;
+        max-width: none !important;
+    }
+
+    :deep(.hg-candidate-box) {
+        position: absolute;
+        bottom: calc(100% + 5px);
+        left: 0;
+        width: 100%;
+        background: white;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        padding: 5px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    }
+
+    :deep(.hg-candidate-box-list) {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 5px;
+    }
+
+    :deep(.hg-candidate-box-list-item) {
+        padding: 8px 12px;
+        cursor: pointer;
+        border-radius: 3px;
+        background: #f5f5f5;
+        transition: all 0.2s;
+    }
+
+    :deep(.hg-candidate-box-list-item:hover) {
+        background: #e0e0e0;
+    }
+
+    :deep(.hg-candidate-box-list-item.active) {
+        background: #4a8cff;
+        color: white;
+    }
+</style>

src/views/xjc-integratedmachine/components/xjc_keyboard_test.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="app-container">
+        <h1>中文输入演示</h1>
+
+        <div class="input-area">
+      <textarea
+              v-model="text"
+              @focus="showKeyboard = true"
+              placeholder="点击这里输入中文..."
+      ></textarea>
+        </div>
+
+        <ChineseKeyboard
+                v-if="showKeyboard"
+                :input="text"
+                @onChange="handleInputChange"
+                @onKeyPress="handleKeyPress"
+                @onClose="showKeyboard = false"
+        />
+    </div>
+</template>
+
+<script setup>
+    import { ref } from 'vue'
+    import ChineseKeyboard from './xjc_keyboard.vue'
+
+    const text = ref('')
+    const showKeyboard = ref(false)
+
+    function handleInputChange(input) {
+        text.value = input
+        console.log('当前输入:', input)
+    }
+
+    function handleKeyPress(button) {
+        console.log('按键:', button)
+    }
+</script>
+
+<style scoped>
+    .app-container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+
+    .input-area {
+        margin: 20px 0;
+    }
+
+    textarea {
+        width: 100%;
+        height: 150px;
+        padding: 10px;
+        font-size: 16px;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        resize: none;
+    }
+</style>

src/views/xjc-integratedmachine/wakeup/rainbow/FollowRingChart.vue

@@ -1,8 +1,15 @@
 <template>
     <div class="chart-container">
         <div id="ring-chart" ref="chart" class="ring-chart"
-             @mousedown="begin" @mousemove="moving" @mouseup="stopMoving"
         ></div>
+
+        <div id="testDiv" style="width: 200px;height: 200px;background: #00ff00;z-index: 99999999">
+
+        </div>
+
+        <!--<div id="ring-chart" ref="chart" class="ring-chart"-->
+             <!--@mousedown="begin" @mousemove="moving" @mouseup="stopMoving"-->
+        <!--&gt;</div>-->
     </div>
 </template>
 
@@ -130,6 +137,7 @@
 
     onMounted(() => {
         initChart()
+        init()
     })
 
     onBeforeUnmount(() => {
@@ -152,11 +160,18 @@
 
     function init() {
         let chartDiv = document.getElementById("ring-chart");
-        console.log("sss",chartDiv)
+        console.log("开始注册touch事件：")
         chartDiv.addEventListener('touchstart',begin)
         chartDiv.addEventListener('touchmove',moving)
         chartDiv.addEventListener('touchend',stopMoving)
-        console.log(center_x, "***", center_y)
+        //
+        let testDiv = document.getElementById("testDiv");
+        testDiv.addEventListener('touchmove',testMove)
+    }
+    function testMove(e) {
+        let x = e.targetTouches[0].pageX;
+        let y = e.targetTouches[0].pageY;
+        console.log(x,"===",y)
     }
 
     //取点和圆心的角度
@@ -173,8 +188,8 @@
 
     function begin(event) {
         //鼠标按下，取点
-        let mouse_x = event.pageX;
-        let mouse_y = event.pageY;
+        let mouse_x = event.targetTouches[0].pageX;
+        let mouse_y = event.targetTouches[0].pageY;
         let ang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
         beginCorner.value = ang
         option.value.series[0].startAngle = 180 - ang
@@ -188,8 +203,8 @@
 
     function moving(event) {
         if (isBegin.value == true) {
-            let mouse_x = event.pageX;
-            let mouse_y = event.pageY;
+            let mouse_x = event.targetTouches[0].pageX;
+            let mouse_y = event.targetTouches[0].pageY;
             let eang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
             if (eang >= 0 && eang <= 180) {
                 option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 18
@@ -200,12 +215,12 @@
 
     }
 
-    onMounted(()=>{
-        nextTick(()=>{
-            init()
-        })
-
-    })
+    // onMounted(()=>{
+    //     nextTick(()=>{
+    //         init()
+    //     })
+    //
+    // })
 
 </script>
 

src/views/xjc-integratedmachine/wakeup/rainbow/paint3.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="hide-scrollbar" @mousemove="chooseDiv">
         <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
-        <FollowRingChart id="ring-chart2" class="ring-chart2" :chartProps="chartPrpps2"/>
+        <!--<FollowRingChart id="ring-chart2" class="ring-chart2" :chartProps="chartPrpps2"/>-->
 
         <!--<div style="position: absolute;background: #ff0000;width: 800px;height: 500px;top:500px;left:400px;"></div>-->
     </div>
@@ -39,12 +39,12 @@
         let mouse_y = event.pageY;
         let dis = Math.sqrt((centerX-mouse_x)*(centerX-mouse_x)+(centerY-mouse_y)*(centerY-mouse_y))
         if(dis >=320 && dis <=340){
-            document.getElementById("ring-chart2").style.zIndex = 1
+            // document.getElementById("ring-chart2").style.zIndex = 1
             document.getElementById("ring-chart1").style.zIndex = 99999
         }
         if(dis <= 315 && dis >=285){
             document.getElementById("ring-chart1").style.zIndex = 1
-            document.getElementById("ring-chart2").style.zIndex = 99999
+            // document.getElementById("ring-chart2").style.zIndex = 99999
         }
         //console.log("dis:",dis)