Browse Source

键盘去除中文

master
maochaoying 2 years ago
parent
commit
5db690d802
  1. 6
      src/components/Progress.vue
  2. 117
      src/components/SimpleKeyboard.vue
  3. 2
      src/store/modules/echarts.js
  4. 4
      src/store/modules/websocket.js

6
src/components/Progress.vue

@ -95,7 +95,11 @@
>
<p class="text">当前剩余</p>
<p class="val">
{{ deviceStore.targetlog - (deviceStore.nowlog?.toFixed(2) || 0) }}log
{{
Math.abs(
(deviceStore.targetlog - (deviceStore.nowlog || 0)).toFixed(2),
)
}}log
</p>
</div>
<div

117
src/components/SimpleKeyboard.vue

@ -1,11 +1,10 @@
<template>
<div :class="keyboardClass"></div>
<div :class="keyboardClass" id="keyboard"></div>
</template>
<script>
import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'
import layout from 'simple-keyboard-layouts/build/layouts/chinese' //
export default {
name: 'SimpleKeyboard',
@ -15,108 +14,34 @@ export default {
type: String,
},
input: {
default: '',
type: String,
},
hideKeyBoard: {
type: Function,
default: () => {},
},
maxLength: { default: '' },
},
data: () => ({
keyboard: null,
displayDefault: {
'{bksp}': 'backspace',
'{lock}': 'caps',
'{enter}': '> enter',
'{tab}': 'tab',
'{shift}': 'shift',
'{change}': '英文',
'{space}': ' ',
'{clear}': '清空',
'{close}': '关闭',
},
}),
mounted() {
this.keyboard = new Keyboard(this.keyboardClass, {
onChange: this.onChange,
onKeyPress: this.onKeyPress,
layoutCandidates: layout.layoutCandidates,
layout: {
//
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 ; '",
'{shift} z x c v b n m , . /',
'{clear}',
],
// shift
shift: [
'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
'{tab} Q W E R T Y U I O P { } |',
'{lock} A S D F G H J K L : "',
'{shift} Z X C V B N M &lt; &gt; ?',
'{clear}',
],
},
//
display: this.displayDefault,
//
buttonTheme: [
{
class: 'hg-red close',
buttons: '{close}',
},
{
class: 'change',
buttons: '{change}',
},
],
//
maxLength: this.maxLength,
})
},
methods: {
onChange(input) {
this.keyboard.setInput(input)
this.$emit('onChange', input)
},
//
onKeyPress(button, $event) {
const self = this
//
if (button === '{close}') {
let keyboard = $event.path[3]
keyboard.style.visibility = 'hidden'
return false
} else if (button === '{change}') {
//
if (this.keyboard.options.layoutCandidates !== null) {
self.$set(this.displayDefault, '{change}', '中文')
//
this.keyboard.setOptions({
layoutCandidates: null,
display: this.displayDefault,
})
} else {
//
self.$set(this.displayDefault, '{change}', '英文')
this.keyboard.setOptions({
layoutCandidates: layout.layoutCandidates,
display: this.displayDefault,
})
}
} else if (button === '{clear}') {
this.keyboard.clearInput()
} else {
let value =
$event.target.offsetParent.parentElement.children[0].children[0].value
//
if (value) {
this.keyboard.setInput(value)
}
onKeyPress(button) {
this.$emit('onKeyPress', button)
}
/**
* If you want to handle the shift and caps lock buttons
*/
if (button === '{shift}' || button === '{lock}') this.handleShift()
},
// shift/
handleShift() {
let currentLayout = this.keyboard.options.layoutName
let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
@ -134,21 +59,9 @@ export default {
}
</script>
<style lang="scss">
@deep: ~'>>>';
.hg-theme-default {
width: 100%;
.hg-buton {
&.hg-red {
background: #db3e5d;
color: white;
&.close {
max-width: 200px;
}
}
&.change {
max-width: 200px;
}
}
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.simple-keyboard {
z-index: 999 !important;
}
</style>

2
src/store/modules/echarts.js

@ -25,7 +25,7 @@ export const useEchartsStore = defineStore({
abscissaFormater(state) {
let arr = []
Object.keys(state.binCharts).map((item, index) => {
arr.push(`${index}-${item}`)
arr.push(`${item}`)
})
return arr
},

4
src/store/modules/websocket.js

@ -137,7 +137,7 @@ export const useWebSocketStore = defineStore({
if ([1, 2, 3, 4].includes(operatorStore.disinfectStatus)) {
saveEchartsDataToLocal(
moment(timeStamp).format('HH:mm'),
moment().utcOffset(8).format('HH:mm'),
[temp_1, humid_1, h2o2_1, saturation_1],
[temp_2, humid_2, h2o2_2, saturation_1],
[temp_3, humid_3, h2o2_3, saturation_1],
@ -313,7 +313,7 @@ export const useWebSocketStore = defineStore({
// 对数据进行处理 并存入到localstorage中
if ([1, 2, 3, 4].includes(operatorStore.disinfectStatus)) {
saveEchartsDataToLocal(
moment(timeStamp).format('HH:mm'),
moment().utcOffset(8).format('HH:mm'),
[temp_1, humid_1, h2o2_1, saturation_1],
[temp_2, humid_2, h2o2_2, saturation_1],
[temp_3, humid_3, h2o2_3, saturation_1],

Loading…
Cancel
Save