diff --git a/src/components/TodoList/index.scss b/src/components/TodoList/index.scss index 071bf1de231c57e2cf6b216837d6039cbb596b27..5fc9e4b572f5041fe7f87f51643aa05e51d2de3c 100644 --- a/src/components/TodoList/index.scss +++ b/src/components/TodoList/index.scss @@ -246,7 +246,7 @@ list-style: none; position: absolute; right: 0; - left: 0; + left: -20px; } .filters li { display: inline; @@ -254,6 +254,7 @@ .filters li a { color: inherit; margin: 3px; + font-size: 12px; padding: 3px 7px; text-decoration: none; border: 1px solid transparent; diff --git a/src/mock/login.js b/src/mock/login.js index fa0f330b4d52b7b517671750e3c12c0ba7f69aff..a752d359b8b33f7c0e9cc9eec5cdbbd685223c05 100644 --- a/src/mock/login.js +++ b/src/mock/login.js @@ -6,7 +6,7 @@ const userMap = { token: 'admin', introduction: '我是超级管ç†å‘˜', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', - name: '超级管ç†å‘˜å°æ½˜', + name: 'Super Admin', uid: '001' }, editor: { @@ -14,7 +14,7 @@ const userMap = { token: 'editor', introduction: '我是编辑', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', - name: '普通编辑å°å¼ ', + name: 'Normal Editor', uid: '002' }, diff --git a/src/utils/index.js b/src/utils/index.js index a011f17e5351772bc9a8015179e4a581888886a9..c1fd062b9f9dc3e9671e2df9fed81b9e2c63ce08 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -212,3 +212,38 @@ } } + export function debounce(func, wait, immediate) { + let timeout, args, context, timestamp, result; + + const later = function() { + // æ®ä¸Šä¸€æ¬¡è§¦å‘时间间隔 + const last = +new Date() - timestamp; + + // 上次被包装函数被调用时间间隔lastå°äºŽè®¾å®šæ—¶é—´é—´éš”wait + if (last < wait && last > 0) { + timeout = setTimeout(later, wait - last); + } else { + timeout = null; + // 如果设定为immediate===trueï¼Œå› ä¸ºå¼€å§‹è¾¹ç•Œå·²ç»è°ƒç”¨è¿‡äº†æ¤å¤„æ— éœ€è°ƒç”¨ + if (!immediate) { + result = func.apply(context, args); + if (!timeout) context = args = null; + } + } + }; + + return function(...args) { + context = this; + timestamp = +new Date(); + const callNow = immediate && !timeout; + // 如果延时ä¸å˜åœ¨ï¼Œé‡æ–°è®¾å®šå»¶æ—¶ + if (!timeout) timeout = setTimeout(later, wait); + if (callNow) { + result = func.apply(context, args); + context = args = null; + } + + return result; + }; + } + diff --git a/src/views/dashboard/editor/index.vue b/src/views/dashboard/editor/index.vue index c72d9fe0566c7c24d9bddbe4461fd0dc7e1c48b1..0da5231f820947639c98821eeee5ea997e53b614 100644 --- a/src/views/dashboard/editor/index.vue +++ b/src/views/dashboard/editor/index.vue @@ -65,10 +65,10 @@ </el-row> <el-row :gutter="20"> - <el-col :span="16"> + <el-col :span="15"> <line-chart></line-chart> </el-col> - <el-col :span="8"> + <el-col :span="9"> <todo-list></todo-list> </el-col> </el-row> @@ -129,10 +129,12 @@ } .display_name{ font-size: 30px; + display: block; } .info-item{ display: inline-block; margin-top: 10px; + font-size: 14px; &:last-of-type{ margin-left: 15px; } diff --git a/src/views/dashboard/editor/lineChart.vue b/src/views/dashboard/editor/lineChart.vue index 7ebd72b0a379d8416a3d11b3182204b053ec3477..171c426e13cd10d973abb8dd4a11ee38226e632d 100644 --- a/src/views/dashboard/editor/lineChart.vue +++ b/src/views/dashboard/editor/lineChart.vue @@ -4,6 +4,8 @@ <script> import echarts from 'echarts'; require('echarts/theme/macarons'); // echarts 主题 + import { debounce } from 'utils'; + export default { props: { @@ -18,6 +20,10 @@ height: { type: String, default: '300px' + }, + autoResize: { + type: Boolean, + default: true } }, data() { @@ -27,11 +33,20 @@ }, mounted() { this.initChart(); + if (this.autoResize) { + this.__resizeHanlder = debounce(() => { + this.chart.resize() + }, 100) + window.addEventListener('resize', this.__resizeHanlder) + } }, beforeDestroy() { if (!this.chart) { return } + if (this.autoResize) { + window.removeEventListener('resize', this.__resizeHanlder) + } this.chart.dispose(); this.chart = null; }, @@ -41,12 +56,12 @@ this.chart.setOption({ xAxis: { - data: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], boundaryGap: false }, grid: { - left: 0, - right: 0, + left: 10, + right: 10, bottom: 20, containLabel: true }, @@ -59,7 +74,7 @@ }, yAxis: {}, series: [{ - name: 'vistor', + name: 'visitors', itemStyle: { normal: { areaStyle: {} @@ -70,7 +85,7 @@ data: [100, 120, 161, 134, 105, 160, 165] }, { - name: 'buyer', + name: 'buyers', smooth: true, type: 'line', itemStyle: {