From c59438a30390622da594314c26bba4b2e4097750 Mon Sep 17 00:00:00 2001 From: wangqing Date: Thu, 31 Dec 2020 16:48:51 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 2 +- package.json | 1 + public/index.html | 7 ++- src/utils/index.js | 34 +++++++++++ src/utils/ut.js | 110 +++++++++++++++++++++++++++++++++++ src/views/form/write.vue | 10 +++- src/views/home/dashboard.vue | 74 +++++++++++++++++------ src/views/home/index.vue | 3 +- yarn.lock | 25 ++++++++ 9 files changed, 242 insertions(+), 24 deletions(-) create mode 100644 src/utils/ut.js diff --git a/.env.development b/.env.development index 594a0a0..698c8fc 100644 --- a/.env.development +++ b/.env.development @@ -6,5 +6,5 @@ VUE_APP_API_ROOT = /tduck-api # 详情介绍请阅读 http://eoner.gitee.io/vue-automation/#/cdn VUE_APP_CDN = OFF # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空 -VUE_APP_DEBUG_TOOL = +VUE_APP_DEBUG_TOOL = eruda diff --git a/package.json b/package.json index e470904..9a031f9 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "file-saver": "^2.0.2", "js-cookie": "^2.2.1", "nprogress": "^0.2.0", + "ua-parser-js": "^0.7.23", "vue": "^2.6.12", "vue-clipboard2": "^0.3.1", "vue-image-crop-upload": "^2.5.0", diff --git a/public/index.html b/public/index.html index 7729e54..291db74 100644 --- a/public/index.html +++ b/public/index.html @@ -14,7 +14,7 @@ <% } %> - + +
- + <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <% } %> @@ -41,6 +42,6 @@ <% } %> - + diff --git a/src/utils/index.js b/src/utils/index.js index 3430e14..0182b49 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -207,3 +207,37 @@ export function debounce(func, wait, immediate) { } } } + +/** + * 将毫秒数转为hh:mm:ss或mm:ss格式 + * 如果毫秒数超过60分钟，则以hh:mm:ss格式显示，反之以mm:ss格式显示 + * @param ms 毫秒数 + * @returns {string} + */ +export function timeFormat(ms) +{ + let h = Math.floor(ms / 1000 / 60 / 60) + let m = Math.floor(ms / 1000 / 60) + let s = Math.floor(ms / 1000) + if (h === 1) { + // 当时间刚好是60分钟时，让它以mm:ss格式显示,即显示60:00,而不是显示01:00:00 + if (m / 60 === 1 && s % 60 === 0) { + h = '' + m = '60:' + } else { + h = '01:' + m = addZero(m % 60) + ':' + } + s = addZero(s % 60) + } else { + h = h === 0 ? '' : addZero(h) + ':' + m = addZero(m % 60) + ':' + s = addZero(s % 60) + } + return h + m + s +} + +// 进行补0操作 +function addZero(n) { + return n < 10 ? '0' + n : n +} diff --git a/src/utils/ut.js b/src/utils/ut.js new file mode 100644 index 0000000..2f637a0 --- /dev/null +++ b/src/utils/ut.js @@ -0,0 +1,110 @@ +var uaParser = require('ua-parser-js') +//https://afantasy.ninja/2017/05/08/user-tracking-iii/ +// 用户停留时间 +// addEvent() 是包装了 `window.addEventListener` 和 `window.attachEvent` 的事件监听函数 +var r = window.requestAnimationFrame +var c = window.cancelAnimationFrame +var h +var lt = 0 +var ltStart +var inActiveTime +var inActiveThreshold = 60 * 60 * 100 +// 创建一个心跳闭包，负责向 lifetime 增加累计时间 +var h = (function() { + var timer + + function beat() { + var now = new Date() + var diff = now - ltStart + lt = lt + diff + inActiveTime = inActiveTime + diff + ltStart = now + if (inActiveTime <= inActiveThreshold) { + timer = r(beat) + } else { + timer = null + } + document.getElementById('inActiveTime').innerText = inActiveTime + } + + return { + start: function() { + if (!timer) { + ltStart = new Date() + timer = r(beat) + } + }, + stop: function() { + if (timer) { + c(timer) + timer = null + } + } + } +})() + +function onFocus() { + h.start() +} + +function onBlur() { + h.stop() +} + +// 在 PC 端使用 focusin / focusout / focus / blur 事件 +if ('onfocusin' in document) { + document.onfocusin = onFocus + document.onfocusout = onBlur +} else { + window.onfocus = onFocus + window.onblur = onBlur +} +// 在移动端使用 Page Visibility API 检查页面是否 active +var prefixes = ['', 'webkit', 'moz', 'ms', 'o'] +var pf +var hiddenKey +var eventKey +if (isMobile) { + for (var i = 0; i < prefixes.length; i++) { + pf = prefixes[i] + hiddenKey = pf ? (pf + 'Hidden') : 'hidden' + if (hiddenKey in document) { + eventKey = pf + 'visibilitychange' + break + } + } + if (eventKey) { + addEvent(document, eventKey, function() { + document[hiddenKey] ? onBlur() : onFocus() + }) + } +} +inActiveTime = 0 +h.start() // 开始计算 lifetime + +function isMobile() { + const ua = uaParser(navigator.userAgent) + if (ua.device) { + let {type} = ua.device + if (type && type == 'mobile') { + return true + } + } + return false +} + +function addEvent(element, event, callback) { + if (element.addEventListener) { // 支持使用 addEventListener() + if (event.slice(0, 2) === 'on') // 以 "on" 开头，不需要，则去掉 + event = event.slice(2) + element.addEventListener(event, callback) + } else if (element.attachEvent) { // 支持使用 attachEvent() + if (event.slice(0, 2) !== 'on') // 没有以 "on" 开头，需要，则加上 + event = 'on' + event + element.attachEvent(event, callback) + } else { + event.slice(0, 2) !== 'on' ? element['on' + event] = callback : element[event] = callback + } +} + + diff --git a/src/views/form/write.vue b/src/views/form/write.vue index 2d2d9c4..6395e9b 100644 --- a/src/views/form/write.vue +++ b/src/views/form/write.vue @@ -1,5 +1,6 @@