From c55eccf189c9aacce430b1eaa88e6398a8b174eb Mon Sep 17 00:00:00 2001 From: haoxr <1490493387@qq.com> Date: Sat, 21 Jan 2023 16:50:25 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8E=A7=E5=88=B6=E5=8F=B0?= =?UTF-8?q?=E7=AE=80=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: bb17a4f93723eedcfce015b14d2d0c9fe5c48662 --- src/components/ThemePicker/index.vue | 35 --- src/directive/utils/index.ts | 15 -- src/types/components.d.ts | 1 + .../components/{Chart => }/BarChart.vue | 76 +++--- .../components/{Chart => }/FunnelChart.vue | 0 .../components/{Chart => }/PieChart.vue | 0 .../dashboard/components/Project/index.vue | 119 --------- .../components/{Chart => }/RadarChart.vue | 0 src/views/dashboard/components/Team/index.vue | 237 ------------------ src/views/dashboard/index.vue | 214 +++++----------- 10 files changed, 100 insertions(+), 597 deletions(-) delete mode 100644 src/components/ThemePicker/index.vue delete mode 100644 src/directive/utils/index.ts rename src/views/dashboard/components/{Chart => }/BarChart.vue (76%) rename src/views/dashboard/components/{Chart => }/FunnelChart.vue (100%) rename src/views/dashboard/components/{Chart => }/PieChart.vue (100%) delete mode 100644 src/views/dashboard/components/Project/index.vue rename src/views/dashboard/components/{Chart => }/RadarChart.vue (100%) delete mode 100644 src/views/dashboard/components/Team/index.vue diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue deleted file mode 100644 index ae747db0..00000000 --- a/src/components/ThemePicker/index.vue +++ /dev/null @@ -1,35 +0,0 @@ - - - - - diff --git a/src/directive/utils/index.ts b/src/directive/utils/index.ts deleted file mode 100644 index 7e1de783..00000000 --- a/src/directive/utils/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Directive } from 'vue'; - -/** - * 按钮防抖 - */ -export const deBounce: Directive = { - mounted(el: HTMLElement) { - el.addEventListener('click', () => { - el.classList.add('is-disabled'); - setTimeout(() => { - el.classList.remove('is-disabled'); - }, 2000); - }); - } -}; diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 5fb9b790..804b68f2 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -57,6 +57,7 @@ declare module '@vue/runtime-core' { IEpPlus: typeof import('~icons/ep/plus')['default'] IEpRefresh: typeof import('~icons/ep/refresh')['default'] IEpSearch: typeof import('~icons/ep/search')['default'] + IEpSetting: typeof import('~icons/ep/setting')['default'] IEpTop: typeof import('~icons/ep/top')['default'] LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] diff --git a/src/views/dashboard/components/Chart/BarChart.vue b/src/views/dashboard/components/BarChart.vue similarity index 76% rename from src/views/dashboard/components/Chart/BarChart.vue rename to src/views/dashboard/components/BarChart.vue index 05be0c4f..3459ef80 100644 --- a/src/views/dashboard/components/Chart/BarChart.vue +++ b/src/views/dashboard/components/BarChart.vue @@ -9,7 +9,7 @@ import { onActivated, onBeforeUnmount, onDeactivated, - onMounted, + onMounted } from 'vue'; import { init, EChartsOption } from 'echarts'; import * as echarts from 'echarts'; @@ -18,22 +18,22 @@ import resize from '@/utils/resize'; const props = defineProps({ id: { type: String, - default: 'barChart', + default: 'barChart' }, className: { type: String, - default: '', + default: '' }, width: { type: String, default: '200px', - required: true, + required: true }, height: { type: String, default: '200px', - required: true, - }, + required: true + } }); const { mounted, chart, beforeDestroy, activated, deactivated } = resize(); @@ -51,37 +51,37 @@ function initChart() { fontSize: 18, fontStyle: 'normal', fontWeight: 'bold', - color: '#337ecc', - }, + color: '#337ecc' + } }, grid: { left: '2%', right: '2%', bottom: '10%', - containLabel: true, + containLabel: true }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { - color: '#999', - }, - }, + color: '#999' + } + } }, legend: { x: 'center', y: 'bottom', - data: ['收入', '毛利润', '收入增长率', '利润增长率'], + data: ['收入', '毛利润', '收入增长率', '利润增长率'] }, xAxis: [ { type: 'category', - data: [ '浙江', '北京', '上海', '广东','深圳'], + data: ['浙江', '北京', '上海', '广东', '深圳'], axisPointer: { - type: 'shadow', - }, - }, + type: 'shadow' + } + } ], yAxis: [ { @@ -90,8 +90,8 @@ function initChart() { max: 10000, interval: 2000, axisLabel: { - formatter: '{value} ', - }, + formatter: '{value} ' + } }, { type: 'value', @@ -99,56 +99,56 @@ function initChart() { max: 100, interval: 20, axisLabel: { - formatter: '{value}%', - }, - }, + formatter: '{value}%' + } + } ], series: [ { name: '收入', type: 'bar', - data: [7000, 7100, 7200, 7300,7400], + data: [7000, 7100, 7200, 7300, 7400], barWidth: 20, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, - { offset: 1, color: '#188df0' }, - ]), - }, + { offset: 1, color: '#188df0' } + ]) + } }, { name: '毛利润', type: 'bar', - data: [ 8000,8200, 8400, 8600, 8800], + data: [8000, 8200, 8400, 8600, 8800], barWidth: 20, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#25d73c' }, { offset: 0.5, color: '#1bc23d' }, - { offset: 1, color: '#179e61' }, - ]), - }, + { offset: 1, color: '#179e61' } + ]) + } }, { name: '收入增长率', type: 'line', yAxisIndex: 1, - data: [ 60,65, 70, 75, 80], + data: [60, 65, 70, 75, 80], itemStyle: { - color: '#67C23A', - }, + color: '#67C23A' + } }, { name: '利润增长率', type: 'line', yAxisIndex: 1, - data: [ 70,75, 80, 85, 90], + data: [70, 75, 80, 85, 90], itemStyle: { - color: '#409EFF', - }, - }, - ], + color: '#409EFF' + } + } + ] } as EChartsOption); chart.value = barChart; } diff --git a/src/views/dashboard/components/Chart/FunnelChart.vue b/src/views/dashboard/components/FunnelChart.vue similarity index 100% rename from src/views/dashboard/components/Chart/FunnelChart.vue rename to src/views/dashboard/components/FunnelChart.vue diff --git a/src/views/dashboard/components/Chart/PieChart.vue b/src/views/dashboard/components/PieChart.vue similarity index 100% rename from src/views/dashboard/components/Chart/PieChart.vue rename to src/views/dashboard/components/PieChart.vue diff --git a/src/views/dashboard/components/Project/index.vue b/src/views/dashboard/components/Project/index.vue deleted file mode 100644 index 63e471fa..00000000 --- a/src/views/dashboard/components/Project/index.vue +++ /dev/null @@ -1,119 +0,0 @@ - - - - - diff --git a/src/views/dashboard/components/Chart/RadarChart.vue b/src/views/dashboard/components/RadarChart.vue similarity index 100% rename from src/views/dashboard/components/Chart/RadarChart.vue rename to src/views/dashboard/components/RadarChart.vue diff --git a/src/views/dashboard/components/Team/index.vue b/src/views/dashboard/components/Team/index.vue deleted file mode 100644 index dedcd08d..00000000 --- a/src/views/dashboard/components/Team/index.vue +++ /dev/null @@ -1,237 +0,0 @@ - - - - - - - - diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index bf6d475a..27543e3e 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -6,81 +6,86 @@ export default { name: 'Dashboard' }; // 组件引用 import GithubCorner from '@/components/GithubCorner/index.vue'; import SvgIcon from '@/components/SvgIcon/index.vue'; -import BarChart from './components/Chart/BarChart.vue'; -import PieChart from './components/Chart/PieChart.vue'; -import RadarChart from './components/Chart/RadarChart.vue'; +import BarChart from './components/BarChart.vue'; +import PieChart from './components/PieChart.vue'; +import RadarChart from './components/RadarChart.vue'; -import Project from './components/Project/index.vue'; -import Team from './components/Team/index.vue'; +import CountUp from 'vue-countup-v3';