历史和统计模块，日期下拉框改为日期选择器，日期支持中英文切换 v1.28

build/showKeyBoard(node).nsi

@@ -3,7 +3,7 @@
 
 ; 安装程序初始定义常量
 !define PRODUCT_NAME $(ToolLang)
-!define PRODUCT_VERSION "v1.27"
+!define PRODUCT_VERSION "v1.28"
 !define /date DATESTR "%y%m%d"
 !define ExeName "showKeyBoard.exe"
 !define PRODUCT_PUBLISHER "Austin.Young"

build/showKeyBoard.nsi

@@ -3,7 +3,7 @@
 
 ; 安装程序初始定义常量
 !define PRODUCT_NAME $(ToolLang)
-!define PRODUCT_VERSION "v1.27"
+!define PRODUCT_VERSION "v1.28"
 !define /date DATESTR "%y%m%d"
 !define ExeName "showKeyBoard.exe"
 !define PRODUCT_PUBLISHER "Austin.Young"

langVars.ahk

@@ -10,10 +10,10 @@ global L_menu_set:="参数设置"
 global L_menu_stat:="数据统计"
 global L_menu_exit:="退出程序"
 global msgNotLaunch := '服务启动失败，不能通过界面设置参数和查看统计信息!`n可尝试用管理员方式重启'
-global msgXML := '不能创建XMLHTTP ,'
-global msgXML := '不能创建XMLHTTP ,'
+global msgXML := '不能创建XMLHTTP,'
+global msgXML := '不能创建XMLHTTP,'
 global msgTry := '尝试'
-global msgTimes := '次 ,'
+global msgTimes := '次,'
 global msgLaunch := '无法启动Node，请确保已经安装node环境或使用非node的安装包'
 global msgLaunchSucc := '启动服务成功!'
 if defaultLang = 'en-US' {
@@ -29,7 +29,7 @@ if defaultLang = 'en-US' {
     menu_msg_noserver := 'Launch Server Fail! Can not Statistics and set parameters by UI'
 
     msgNotLaunch := 'Start Server fail, can not set parameter and data statistics!'
-    msgXML := 'Can not create XMLHTTP ,'
+    msgXML := 'Can not create XMLHTTP,'
     msgTry := 'Try '
     msgTimes := ' times ,'
     msgLaunch := 'Launch node fail, make sure node be installed or use another setup!'

showKeyBoard.ahk

@@ -1,14 +1,14 @@
 ;编译信息
 ;@Ahk2Exe-SetName ShowKeyBoard
 ;@Ahk2Exe-SetDescription Show and Analyse Mouse/KeyBoard
-;@Ahk2Exe-SetProductVersion 1.27.0.0
-;@Ahk2Exe-SetFileVersion 1.27.0.0
+;@Ahk2Exe-SetProductVersion 1.28.0.0
+;@Ahk2Exe-SetFileVersion 1.28.0.0
 ;@Ahk2Exe-SetCopyright Austing.Young (2023 - )
 ;@Ahk2Exe-SetMainIcon res\keyboard.ico
 ;@Ahk2Exe-ExeName build/release/ShowKeyBoard.exe
 #Requires AutoHotkey v2
 #SingleInstance Ignore
-global APPName:="ShowKeyBoard", ver:="1.27" 
+global APPName:="ShowKeyBoard", ver:="1.28" 
 #include common.ahk
 #include langVars.ahk
 #Include events.ahk

ui-helper/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider :theme="theme">
+  <n-config-provider :theme="theme" :locale="lang" :date-locale="dateLang">
     <n-message-provider>
       <n-dialog-provider>
       <ServerPage />
@@ -10,6 +10,7 @@
 
 <script lang="ts">
 import { computed, defineComponent ,ref } from 'vue';
+import { zhCN, enUS,dateZhCN,dateEnUS } from 'naive-ui'
 import { defineStore ,storeToRefs } from 'pinia'
 import {
   NMessageProvider,
@@ -41,7 +42,9 @@ export default defineComponent({
     const store= useAustinStore();
     //const { myTheme } = storeToRefs(store)
     return {
-      theme: computed(() => (store.myTheme === 'dark' ? darkTheme : lightTheme))
+      theme: computed(() => (store.myTheme === 'dark' ? darkTheme : lightTheme)),
+      lang: computed(() => (store.lang === 'zh-CN' ? zhCN : enUS)),
+      dateLang: computed(() => (store.lang === 'zh-CN' ? dateZhCN : dateEnUS)),
     };
   },
 });

ui-helper/src/common.ts

@@ -182,7 +182,7 @@ function showAppChart(leftKey, keyStatHash, opt, chart, mergeApp) {
 // 获取历史时间
 async function getHistory(beginDate, endDate) {
   let res = [];
-  // format('YYYY-MM-DD')
+  // format(dateFormat)
   if (/^\d{4}-\d{2}-\d{2}$/.test(beginDate) && /^\d{4}-\d{2}-\d{2}$/.test(endDate) && endDate >= beginDate) {
     res = await ajax('historyData', { beginDate, endDate })
   }
@@ -262,7 +262,11 @@ function appPath2Name(val, map) {
   }
   return newName
 }
+const dateFormat = 'YYYY-MM-DD'
+const timeFormat = 'YYYY-MM-DD HH:mm:ss.SSS'
+
 export {
   deepCopy, ajax, splitArr, str2Type, setWS, arrRemove, getHistory, getServer,
-  getKeyDesc, showLeftKey, railStyle, showAppChart, appPath2Name, closeWS
+  getKeyDesc, showLeftKey, railStyle, showAppChart, appPath2Name, closeWS,
+  dateFormat,timeFormat,
 }

ui-helper/src/components/dataui/Export.vue

@@ -39,18 +39,18 @@
 import { defineComponent, onMounted, PropType, ref, computed, h, watch } from 'vue'
 import content from '../../content.js';
 import { useMessage, useDialog } from 'naive-ui'
-import { getHistory, ajax, getServer } from '@/common';
+import { getHistory, ajax, getServer,dateFormat,timeFormat } from '@/common';
 import { useAustinStore } from '../../App.vue'
 import dayjs from 'dayjs'
 
 // 获取今天的全部启动次数信息
 async function getTodayData(todayList) {
-	let str = dayjs(new Date()).format('YYYY-MM-DD')
+	let str = dayjs(new Date()).format(dateFormat)
 	let historyData = await getHistory(str, str)
 	let tickSet = new Set();
 	historyData.forEach(x => tickSet.add(x.tick))
 	tickSet.forEach(x => {
-		todayList.push({ label: dayjs(new Date(<number>x)).format('YYYY-MM-DD HH:mm:ss.SSS'), value: x })
+		todayList.push({ label: dayjs(new Date(<number>x)).format(timeFormat), value: x })
 	})
 }
 async function getHistoryDate(historyDate) {
@@ -79,7 +79,7 @@ export default defineComponent({
 
 		async function handleDeleteTick() {
 			myDialog.warning({
-				title: contentText.value.intro122 + deleteTick.value.map(x => dayjs(new Date(x)).format('YYYY-MM-DD HH:mm:ss.SSS')),
+				title: contentText.value.intro122 + deleteTick.value.map(x => dayjs(new Date(x)).format(timeFormat)),
 				positiveText: contentText.value.intro109,
 				negativeText: contentText.value.intro110,
 				maskClosable: false,
@@ -133,7 +133,7 @@ export default defineComponent({
 		const handleFinish = ({ file, event }) => {
 			//console.log(event)
 			serverInfo.value = JSON.parse((event?.target as XMLHttpRequest).response)
-			serverInfo.value.now = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss.SSS')
+			serverInfo.value.now = dayjs(new Date()).format(timeFormat)
 			if(serverInfo.value.code == 200 ){
 				message.success( contentText.value.intro128 )
 			}else{

ui-helper/src/components/dataui/History.vue

@@ -18,8 +18,8 @@
     <n-space vertical class="fixedSelect">
       <n-space style="font-size:16px" :class="store.myTheme == 'dark' ? 'mydark' : 'mylight'">
         {{ contentText.intro112 }}
-        <n-select v-model:value="beginDate" filterable :options="historyDate" @update:value="handleUpdateValue" />
-
+        <n-date-picker type="date" v-model:value="beginDate" :is-date-disabled="dateDisabled"
+          @update:value="handleUpdateValue" />
         <n-switch :round="false" :rail-style="railStyle" v-model:value="showEndDate" @update:value="endDate = beginDate">
           <template #unchecked>
             {{ contentText.intro159 }}
@@ -28,11 +28,9 @@
             {{ contentText.intro160 }}
           </template>
         </n-switch>
-        <n-select v-show="showEndDate" v-model:value="endDate" filterable :options="historyDate"
+        <n-date-picker type="date" v-show="showEndDate" v-model:value="endDate" :is-date-disabled="dateDisabled"
           @update:value="handleUpdateValue" />
       </n-space>
-
-
       <n-card id="intro86" :title="contentText.intro86">
         <div id="main1" style="height: 500px; min-width: 800px;width:95%;"></div>
       </n-card>
@@ -105,7 +103,7 @@ import { LabelLayout, UniversalTransition } from 'echarts/features';
 import { MinuteType } from '../../myType.d'
 // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
 import { CanvasRenderer } from 'echarts/renderers';
-import { arrRemove, getHistory, ajax, showLeftKey, railStyle, showAppChart, appPath2Name, deepCopy } from '@/common';
+import { arrRemove, getHistory, ajax, showLeftKey, railStyle, showAppChart, appPath2Name, deepCopy, dateFormat } from '@/common';
 import content from '../../content.js';
 import { setMinuteEcharts, getMinuteOption, appInfoList, showAppDuration } from './Minute';
 // 注册必须的组件
@@ -345,8 +343,8 @@ export default defineComponent({
     const columns = ref([]);
     const columns0 = ref([]);
     const historyDate = ref([]);
-    const beginDate = ref('');
-    const endDate = ref('');
+    const beginDate = ref(0);
+    const endDate = ref(0);
     const columns2 = ref([]);
     const appListData = ref([]);
     const showEndDate = ref(0);
@@ -468,7 +466,9 @@ export default defineComponent({
         b = beginDate.value
         e = endDate.value
       }
-      historyData = await getHistory(b, e)
+      let bs = dayjs(b).format(dateFormat)
+      let es = dayjs(e).format(dateFormat)
+      historyData = await getHistory(bs, es)
       let keyStatHash = getHash('')
       showHash(keyStatHash)
       updateMinuteData()
@@ -543,10 +543,12 @@ export default defineComponent({
         b = beginDate.value
         e = beginDate.value
       }
+      let bs = dayjs(b).format(dateFormat)
+      let es = dayjs(e).format(dateFormat)
       // 需要渲染 main1 图表
-      setMinuteEcharts(b, e, MinuteType.ByMinute, [myChartArr[2]], appNameListMap) // main3
-      setMinuteEcharts(b, e, MinuteType.ByHour, [myChartArr[3]], appNameListMap) // main4
-      await setMinuteEcharts(b, e, MinuteType.Duration, [myChartArr[4], myChartArr[5], myChartArr[6]], appNameListMap) // main5 6
+      setMinuteEcharts(bs, es, MinuteType.ByMinute, [myChartArr[2]], appNameListMap) // main3
+      setMinuteEcharts(bs, es, MinuteType.ByHour, [myChartArr[3]], appNameListMap) // main4
+      await setMinuteEcharts(bs, es, MinuteType.Duration, [myChartArr[4], myChartArr[5], myChartArr[6]], appNameListMap) // main5 6
       updateAppLenInfo()
     }
     onMounted(async () => {
@@ -566,7 +568,7 @@ export default defineComponent({
         return { label: x, value: x }
       })
       if (dateArr.length > 0) {
-        beginDate.value = dateArr[0];// 设置选择第一个
+        beginDate.value = dayjs(dateArr[0], dateFormat).valueOf();// 设置选择第一个
         handleUpdateValue(dateArr[0])
       }
 
@@ -601,6 +603,12 @@ export default defineComponent({
       }
       showAppDuration(appRanger.value)
     }
+    function dateDisabled(ts: number) {
+      const date = dayjs(ts).format(dateFormat)
+      return !historyDate.value.some(x => {
+        return x.value == date
+      })
+    }
     return {
       slideApp,
       appRanger,
@@ -623,6 +631,7 @@ export default defineComponent({
       appListData,
       showEndDate,
       store,
+      dateDisabled,
     }
   },
 })

ui-helper/src/components/dataui/Minute.ts

@@ -218,7 +218,7 @@ function setChartByMinute(data, charts) {
     hash[minute] = x
   })
   // let base = today.getTime()
-  //let firstDay = dayjs(firstDate, 'YYYY-MM-DD').valueOf()
+  //let firstDay = dayjs(firstDate, dateFormat).valueOf()
   lastMinute += oneMinute  // 需要增加1单元以便于显示最后一个
   let keyData = [], mouseData = [], disData = [];
   let afterMinute = 0;// 延后10分钟
@@ -254,7 +254,7 @@ function setChartByHour(data, charts) {
     hash[minute] = x
   })
   // let base = today.getTime()
-  //let firstDay = dayjs(firstDate, 'YYYY-MM-DD').valueOf()
+  //let firstDay = dayjs(firstDate, dateFormat).valueOf()
   lastHour += oneHour  // 需要增加1单元以便于显示最后一个
   let keyData = [], mouseData = [], disData = [];
   let totalMs = lastHour - firstHour
@@ -354,7 +354,7 @@ function showAppMinute(appName) {
     return
   }
   // let today = new Date();
-  // let strToday = dayjs(today).format('YYYY-MM-DD')
+  // let strToday = dayjs(today).format(dateFormat)
   // let now = new Date().getTime()
   // 将时分秒设置为 0
   // today.setHours(0, 0, 0, 0);
@@ -372,7 +372,7 @@ function showAppMinute(appName) {
   // console.log(lastAppData)
   // console.log(lastMinute)
 
-  // let firstDay = dayjs(firstDate, 'YYYY-MM-DD').valueOf()
+  // let firstDay = dayjs(firstDate, dateFormat).valueOf()
   let keyData = [], mouseData = [];
   let afterMinute = 0;// 延后10分钟
   let totalMs = lastMinute - firstMinute + afterMinute * 60 * 1000

ui-helper/src/components/dataui/Statistics.vue

@@ -12,11 +12,11 @@
 			</n-anchor>
 		</div>
 		<n-space vertical class="fixedSelect">
-			<n-space style="font-size:16px" :class="store.myTheme=='dark'?'mydark':'mylight'">
+			<n-space style="font-size:16px" :class="store.myTheme == 'dark' ? 'mydark' : 'mylight'">
 				{{ contentText.intro112 }}
-				<n-select v-model:value="beginDate" filterable :options="historyDate" />
+				<n-date-picker type="date" v-model:value="beginDate" :is-date-disabled="dateDisabled" />
 				{{ contentText.intro93 }}
-				<n-select v-model:value="endDate" filterable :options="historyDate" />
+				<n-date-picker type="date" v-model:value="endDate" :is-date-disabled="dateDisabled" />
 				<n-button type="primary" @click="handleQuery">{{ contentText?.intro113 }}</n-button>
 				<n-switch :round="false" :rail-style="railStyle" v-model:value="fillDate" @update:value="handleQuery">
 					<template #checked>
@@ -78,7 +78,7 @@ echarts.use([
 	UniversalTransition
 ]);
 
-import { arrRemove, getHistory, ajax, railStyle, deepCopy, appPath2Name } from '@/common';
+import { arrRemove, getHistory, ajax, railStyle, deepCopy, appPath2Name, dateFormat } from '@/common';
 import content from '../../content.js';
 let option = []; // 用数组代替
 option[0] = {
@@ -164,8 +164,8 @@ export default defineComponent({
 		const store = useAustinStore();
 		const contentText = computed(() => content[props.lang])
 		const message = useMessage()
-		const beginDate = ref('');
-		const endDate = ref('');
+		const beginDate = ref(0);
+		const endDate = ref(0);
 		const historyDate = ref([]);
 		const topN = ref(0)
 		const appTopN = ref(0)
@@ -214,7 +214,8 @@ export default defineComponent({
 		}
 		let chartDom = [], myChart = [];
 		async function handleQuery() {
-			let b = beginDate.value, e = endDate.value
+			let b = dayjs(beginDate.value).format(dateFormat), e = dayjs(endDate.value).format(dateFormat)
+			// console.log(b,e)
 			if (/^\d{4}-\d{2}-\d{2}$/.test(b) && /^\d{4}-\d{2}-\d{2}$/.test(e) && e >= b) {
 				let res = await ajax('statData', { "beginDate": b, "endDate": e }) //数组，3个内容
 				if (res.length < 4) {
@@ -224,13 +225,12 @@ export default defineComponent({
 				let pixHash = { name: 'Pix Distance', data: [], smooth: true, type: 'line' }
 				let screenHash = { name: 'Screen Distance(Meter)', data: [], smooth: true, type: 'line' }
 				let phyHash = { name: 'Physical Distance(Meter)', data: [], smooth: true, type: 'line' }
-				const df = 'YYYY-MM-DD'
 				// 需要循环补充到 x.date 这天
 				if (fillDate.value) {
-					let ed = dayjs(endDate.value, df).add(1, 'day');
-					let currentDate = dayjs(beginDate.value, df);
+					let ed = dayjs(endDate.value, dateFormat).add(1, 'day');
+					let currentDate = dayjs(beginDate.value, dateFormat);
 					while (currentDate.isBefore(ed)) {
-						dateArr.push(currentDate.format('YYYY-MM-DD'));
+						dateArr.push(currentDate.format(dateFormat));
 						currentDate = currentDate.add(1, 'day');
 					}
 				} else {
@@ -317,8 +317,8 @@ export default defineComponent({
 				if (dateArr.length < 7) {
 					beginIndex = dateArr.length - 1
 				}
-				beginDate.value = dateArr[beginIndex];// 设置选择第一个
-				endDate.value = dateArr[0];// 设置选择第一个
+				beginDate.value = dayjs(dateArr[beginIndex], dateFormat).valueOf();// 设置选择第一个
+				endDate.value = dayjs(dateArr[0], dateFormat).valueOf();// 设置选择第一个
 				handleQuery()
 			}
 		})
@@ -329,6 +329,12 @@ export default defineComponent({
 				v.setOption(option[i]);
 			})
 		});
+		function dateDisabled(ts: number) {
+			const date = dayjs(ts).format(dateFormat)
+			return !historyDate.value.some(x => {
+				return x.value == date
+			})
+		}
 		return {
 			contentText,
 			beginDate,
@@ -340,6 +346,7 @@ export default defineComponent({
 			railStyle,
 			fillDate,
 			store,
+			dateDisabled,
 		}
 	},
 })