import PanelGroup from './components/PanelGroup.vue'
+import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus'
+import { Echart } from '@/components/Echart'
+import { pieOptions, barOptions, lineOptions } from './echarts-data'
+import { ref } from 'vue'
+
+const loading = ref(true)
+
+setTimeout(() => {
+ loading.value = false
+}, 1000)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/Dashboard/components/PanelGroup.vue b/src/views/Dashboard/components/PanelGroup.vue
index c9b03aa..da9c278 100644
--- a/src/views/Dashboard/components/PanelGroup.vue
+++ b/src/views/Dashboard/components/PanelGroup.vue
@@ -1,25 +1,154 @@
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -29,17 +158,41 @@ import { CountTo } from '@/components/CountTo'
@prefix-cls: ~'@{namespace}-panel';
.@{prefix-cls} {
- &-item {
+ &__item {
+ &--peoples {
+ color: #40c9c6;
+ }
+
+ &--message {
+ color: #36a3f7;
+ }
+
+ &--money {
+ color: #f4516c;
+ }
+
+ &--shopping {
+ color: #34bfa3;
+ }
+
&:hover {
- :deep(.v-icon) {
+ :deep(.@{namespace}-icon) {
color: #fff !important;
}
- .@{prefix-cls}-item__icon {
+ .@{prefix-cls}__item--icon {
transition: all 0.38s ease-out;
-
- &--peoples {
- background: #40c9c6;
- }
+ }
+ .@{prefix-cls}__item--peoples {
+ background: #40c9c6;
+ }
+ .@{prefix-cls}__item--message {
+ background: #36a3f7;
+ }
+ .@{prefix-cls}__item--money {
+ background: #f4516c;
+ }
+ .@{prefix-cls}__item--shopping {
+ background: #34bfa3;
}
}
}
diff --git a/src/views/Dashboard/echarts-data.ts b/src/views/Dashboard/echarts-data.ts
index e69de29..a8a2e9d 100644
--- a/src/views/Dashboard/echarts-data.ts
+++ b/src/views/Dashboard/echarts-data.ts
@@ -0,0 +1,153 @@
+import { EChartsOption } from 'echarts'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const { t } = useI18n()
+
+export const lineOptions: EChartsOption = {
+ title: {
+ text: t('analysis.monthlySales'),
+ left: 'center'
+ },
+ xAxis: {
+ data: [
+ t('analysis.january'),
+ t('analysis.february'),
+ t('analysis.march'),
+ t('analysis.april'),
+ t('analysis.may'),
+ t('analysis.june'),
+ t('analysis.july'),
+ t('analysis.august'),
+ t('analysis.september'),
+ t('analysis.october'),
+ t('analysis.november'),
+ t('analysis.december')
+ ],
+ boundaryGap: false,
+ axisTick: {
+ show: false
+ }
+ },
+ grid: {
+ left: 20,
+ right: 20,
+ bottom: 20,
+ top: 80,
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ },
+ padding: [5, 10]
+ },
+ yAxis: {
+ axisTick: {
+ show: false
+ }
+ },
+ legend: {
+ data: [t('analysis.estimate'), t('analysis.actual')],
+ top: 50
+ },
+ series: [
+ {
+ name: t('analysis.estimate'),
+ smooth: true,
+ type: 'line',
+ data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
+ animationDuration: 2800,
+ animationEasing: 'cubicInOut'
+ },
+ {
+ name: t('analysis.actual'),
+ smooth: true,
+ type: 'line',
+ itemStyle: {},
+ data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
+ animationDuration: 2800,
+ animationEasing: 'quadraticOut'
+ }
+ ]
+}
+
+export const pieOptions: EChartsOption = {
+ title: {
+ text: t('analysis.userAccessSource'),
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a}
{b} : {c} ({d}%)' + }, + legend: { + orient: 'vertical', + left: 'left', + data: [ + t('analysis.directAccess'), + t('analysis.mailMarketing'), + t('analysis.allianceAdvertising'), + t('analysis.videoAdvertising'), + t('analysis.searchEngines') + ] + }, + series: [ + { + name: t('analysis.userAccessSource'), + type: 'pie', + radius: '55%', + center: ['50%', '60%'], + data: [ + { value: 335, name: t('analysis.directAccess') }, + { value: 310, name: t('analysis.mailMarketing') }, + { value: 234, name: t('analysis.allianceAdvertising') }, + { value: 135, name: t('analysis.videoAdvertising') }, + { value: 1548, name: t('analysis.searchEngines') } + ] + } + ] +} + +export const barOptions: EChartsOption = { + title: { + text: t('analysis.weeklyUserActivity'), + left: 'center' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: 50, + right: 20, + bottom: 20 + }, + xAxis: { + type: 'category', + data: [ + t('analysis.monday'), + t('analysis.tuesday'), + t('analysis.wednesday'), + t('analysis.thursday'), + t('analysis.friday'), + t('analysis.saturday'), + t('analysis.sunday') + ], + axisTick: { + alignWithLabel: true + } + }, + yAxis: { + type: 'value' + }, + series: [ + { + name: t('analysis.activeQuantity'), + data: [13253, 34235, 26321, 12340, 24643, 1322, 1324], + type: 'bar' + } + ] +} diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 0fad648..c89089f 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -5,6 +5,11 @@ import { LocaleDropdown } from '@/components/LocaleDropdown' import { useI18n } from '@/hooks/web/useI18n' import { underlineToHump } from '@/utils' import { useAppStore } from '@/store/modules/app' +import { useDesign } from '@/hooks/web/useDesign' + +const { getPrefixCls } = useDesign() + +const prefixCls = getPrefixCls('login') const appStore = useAppStore() @@ -13,10 +18,13 @@ const { t } = useI18n()
-
+
+
+
+
+
+
-
+
+
+
+
+
-
+
-
+
+
+
+
+
{{
+ t('analysis.newUser')
+ }}
+
-
- 新增用户
-
+
+
+
+
+
+
+
+
+ {{
+ t('analysis.unreadInformation')
+ }}
+
+
+
+
+
+
+
+
+
+ {{
+ t('analysis.transactionAmount')
+ }}
+
+
+
+
+
+
+
+
+
+ {{
+ t('analysis.totalShopping')
+ }}
+ {b} : {c} ({d}%)' + }, + legend: { + orient: 'vertical', + left: 'left', + data: [ + t('analysis.directAccess'), + t('analysis.mailMarketing'), + t('analysis.allianceAdvertising'), + t('analysis.videoAdvertising'), + t('analysis.searchEngines') + ] + }, + series: [ + { + name: t('analysis.userAccessSource'), + type: 'pie', + radius: '55%', + center: ['50%', '60%'], + data: [ + { value: 335, name: t('analysis.directAccess') }, + { value: 310, name: t('analysis.mailMarketing') }, + { value: 234, name: t('analysis.allianceAdvertising') }, + { value: 135, name: t('analysis.videoAdvertising') }, + { value: 1548, name: t('analysis.searchEngines') } + ] + } + ] +} + +export const barOptions: EChartsOption = { + title: { + text: t('analysis.weeklyUserActivity'), + left: 'center' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: 50, + right: 20, + bottom: 20 + }, + xAxis: { + type: 'category', + data: [ + t('analysis.monday'), + t('analysis.tuesday'), + t('analysis.wednesday'), + t('analysis.thursday'), + t('analysis.friday'), + t('analysis.saturday'), + t('analysis.sunday') + ], + axisTick: { + alignWithLabel: true + } + }, + yAxis: { + type: 'value' + }, + series: [ + { + name: t('analysis.activeQuantity'), + data: [13253, 34235, 26321, 12340, 24643, 1322, 1324], + type: 'bar' + } + ] +} diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 0fad648..c89089f 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -5,6 +5,11 @@ import { LocaleDropdown } from '@/components/LocaleDropdown' import { useI18n } from '@/hooks/web/useI18n' import { underlineToHump } from '@/utils' import { useAppStore } from '@/store/modules/app' +import { useDesign } from '@/hooks/web/useDesign' + +const { getPrefixCls } = useDesign() + +const prefixCls = getPrefixCls('login') const appStore = useAppStore() @@ -13,10 +18,13 @@ const { t } = useI18n()
-
+
{{ underlineToHump(appStore.getTitle) }}
diff --git a/vite.config.ts b/vite.config.ts
index 22ec30f..4aeb400 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -130,7 +130,9 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
'@iconify/iconify',
'@vueuse/core',
'axios',
- 'qs'
+ 'qs',
+ 'echarts',
+ 'echarts-wordcloud'
]
}
}
{{ underlineToHump(appStore.getTitle) }}
diff --git a/vite.config.ts b/vite.config.ts
index 22ec30f..4aeb400 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -130,7 +130,9 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
'@iconify/iconify',
'@vueuse/core',
'axios',
- 'qs'
+ 'qs',
+ 'echarts',
+ 'echarts-wordcloud'
]
}
}