diff --git a/README.md b/README.md index dabebc63fb41d3dbb92882006a1166c5705151c3..a3d8253b9010d202ddfd3d656e1f7b0b96971b52 100644 --- a/README.md +++ b/README.md @@ -216,17 +216,17 @@ yarn clean:lib # 删除node_modules，兼容window系统 - [x] 图片预览组件 - [x] 表格组件 - [x] 图表库 +- [x] 数字动画 ## 正在开发的功能 -- [ ] 数字动画 - [ ] 主题配置 -- [ ] 富文本组件 -- [ ] 首屏加载等待动画 - [ ] 上传组件 +- [ ] 富文本组件 - [ ] 数据导入导出 - [ ] 黑暗主题 - [ ] 全局错误处理 +- [ ] 首屏加载等待动画 - [ ] 打包 Gzip - [ ] 抽取生产环境配置文件 - [ ] 系统性能优化 diff --git a/src/assets/svg/dashboard/analysis-down.svg b/src/assets/svg/dashboard/analysis-down.svg new file mode 100644 index 0000000000000000000000000000000000000000..1e47927e2371f386832c7eb806697636c48fc8b2 --- /dev/null +++ b/src/assets/svg/dashboard/analysis-down.svg @@ -0,0 +1,20 @@ + + + + 下跌-24px + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/dashboard/analysis-icon1.svg b/src/assets/svg/dashboard/analysis-icon1.svg new file mode 100644 index 0000000000000000000000000000000000000000..244252ddeb7d186dd089e0b42a0cadc5695603a5 --- /dev/null +++ b/src/assets/svg/dashboard/analysis-icon1.svg @@ -0,0 +1,21 @@ + + + + Icon1@3x + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/dashboard/analysis-icon2.svg b/src/assets/svg/dashboard/analysis-icon2.svg new file mode 100644 index 0000000000000000000000000000000000000000..8b5d8722cb753854030c682b627f01e239ddba9d --- /dev/null +++ b/src/assets/svg/dashboard/analysis-icon2.svg @@ -0,0 +1,21 @@ + + + + Icon2@3x + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/dashboard/analysis-icon3.svg b/src/assets/svg/dashboard/analysis-icon3.svg new file mode 100644 index 0000000000000000000000000000000000000000..cc445177b956635f6af0cef5cb23fddff4232ec8 --- /dev/null +++ b/src/assets/svg/dashboard/analysis-icon3.svg @@ -0,0 +1,21 @@ + + + + Icon3@3x + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/dashboard/analysis-icon4.svg b/src/assets/svg/dashboard/analysis-icon4.svg new file mode 100644 index 0000000000000000000000000000000000000000..1dc190455417fa44bd75270ce215c8a14edb7c61 --- /dev/null +++ b/src/assets/svg/dashboard/analysis-icon4.svg @@ -0,0 +1,21 @@ + + + + Icon + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/dashboard/analysis-rise.svg b/src/assets/svg/dashboard/analysis-rise.svg new file mode 100644 index 0000000000000000000000000000000000000000..3d47698ec5fa0a3d1e6ad2cf0db0123ea11a09ed --- /dev/null +++ b/src/assets/svg/dashboard/analysis-rise.svg @@ -0,0 +1,20 @@ + + + + 上涨-24px + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/CountTo/index.ts b/src/components/CountTo/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..4343611f2a1d60ca263d6870ffc83dc74121a6ab --- /dev/null +++ b/src/components/CountTo/index.ts @@ -0,0 +1,2 @@ +// 对vue-count-to进行改造成支持vue3版本 +export { default as CountTo } from './src/index.vue'; diff --git a/src/components/CountTo/src/index.vue b/src/components/CountTo/src/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..55f8a1c3164e561d0cdb4270a6b1d81a081ca65c --- /dev/null +++ b/src/components/CountTo/src/index.vue @@ -0,0 +1,159 @@ + + diff --git a/src/components/CountTo/src/props.ts b/src/components/CountTo/src/props.ts new file mode 100644 index 0000000000000000000000000000000000000000..38f2a85bc1ab4dc3504d5908319636b0ea1412a4 --- /dev/null +++ b/src/components/CountTo/src/props.ts @@ -0,0 +1,62 @@ +import { PropType } from 'vue'; +export const countToProps = { + startVal: { + type: Number as PropType, + required: false, + default: 0, + }, + endVal: { + type: Number as PropType, + required: false, + default: 2017, + }, + duration: { + type: Number as PropType, + required: false, + default: 3000, + }, + autoplay: { + type: Boolean as PropType, + required: false, + default: true, + }, + decimals: { + type: Number as PropType, + required: false, + default: 0, + validator(value: number) { + return value >= 0; + }, + }, + decimal: { + type: String as PropType, + required: false, + default: '.', + }, + separator: { + type: String as PropType, + required: false, + default: ',', + }, + prefix: { + type: String as PropType, + required: false, + default: '', + }, + suffix: { + type: String as PropType, + required: false, + default: '', + }, + useEasing: { + type: Boolean as PropType, + required: false, + default: true, + }, + easingFn: { + type: Function as PropType<(t: number, b: number, c: number, d: number) => number>, + default(t: number, b: number, c: number, d: number) { + return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b; + }, + }, +}; diff --git a/src/components/Loading/FullLoading.vue b/src/components/Loading/FullLoading.vue index ba82bc1319519aa8979e72e4ecbabcfd64117bfb..a3d8ca3d16948df393d6d6184ec535ffc76cd678 100644 --- a/src/components/Loading/FullLoading.vue +++ b/src/components/Loading/FullLoading.vue @@ -41,7 +41,8 @@ display: flex; width: 100%; height: 100%; - background: rgba(255, 255, 255, 0.3); + // background: rgba(255, 255, 255, 0.5); + background: #f1f1f63d; justify-content: center; align-items: center; } diff --git a/src/design/global.less b/src/design/global.less index e8f1d09d85e6cf6dbefdbca6cdf022e15745310b..034d08905426afec82a794c9d8b776d43db18f04 100644 --- a/src/design/global.less +++ b/src/design/global.less @@ -1,5 +1,4 @@ @import './helper/distance.less'; -// 生成样式 .distance(); .hidden { @@ -10,6 +9,10 @@ display: flex; } +.align-middle { + vertical-align: middle; +} + .flex-wrap { flex-wrap: wrap; } @@ -48,3 +51,27 @@ word-wrap: normal; white-space: nowrap; } + +.shadow-xs { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); +} + +.shadow-sm { + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); +} + +.shadow { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); +} + +.shadow-md { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); +} + +.shadow-lg { + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.shadow-xl { + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); +} diff --git a/src/design/transition/fade.less b/src/design/transition/fade.less index 27433c27bd17c85e76bc63dee16bd16626ab2a18..f97589ca4ce43b7254dd3d61f03ac44c84f33903 100644 --- a/src/design/transition/fade.less +++ b/src/design/transition/fade.less @@ -4,27 +4,10 @@ } .fade-enter-from, -.fade-enter, .fade-leave-to { opacity: 0; } -/* fade-transform */ -// .fade-transform-leave-active, -// .fade-transform-enter-active { -// transition: all 0.5s; -// } - -// .fade-transform-enter { -// opacity: 0; -// transform: translateX(-30px); -// } - -// .fade-transform-leave-to { -// opacity: 0; -// transform: translateX(30px); -// } - // side-fade .slide-fade-enter-active, .slide-fade-leave-active { @@ -42,35 +25,6 @@ transform: translateX(30%); } -// zoom-out -.zoom-out-enter-active, -.zoom-out-leave-active { - transition: opacity 0.35s ease-in-out, transform 0.45s ease-out; -} - -.zoom-out-enter-from, -.zoom-out-enter, -.zoom-out-leave-to { - opacity: 0; - transform: scale(0); -} - -// zoom-fade -.zoom-fade-enter-active, -.zoom-fade-leave-active { - transition: transform 0.35s, opacity 0.35s ease-out; -} - -.zoom-fade-enter-from { - opacity: 0; - transform: scale(0.97); -} - -.zoom-fade-leave-to { - opacity: 0; - transform: scale(1.03); -} - // /////////////////////////////////////////////// // Fade Bottom // /////////////////////////////////////////////// @@ -92,23 +46,6 @@ transform: translateY(8%); } -// Speed: 2x -.fade-bottom-2x-enter-active, -.fade-bottom-2x-leave-active { - transition: opacity 0.2s, transform 0.25s; -} - -.fade-bottom-2x-enter-from, -.fade-bottom-2x-enter { - opacity: 0; - transform: translateY(-4%); -} - -.fade-bottom-2x-leave-to { - opacity: 0; - transform: translateY(4%); -} - // /////////////////////////////////////////////// // Fade Top // /////////////////////////////////////////////// @@ -119,8 +56,7 @@ transition: opacity 0.3s, transform 0.35s; } -.fade-top-enter-from, -.fade-top-enter { +.fade-top-enter-from { opacity: 0; transform: translateY(8%); } @@ -129,20 +65,3 @@ opacity: 0; transform: translateY(-8%); } - -// Speed: 2x -.fade-top-2x-enter-active, -.fade-top-2x-leave-active { - transition: opacity 0.2s, transform 0.25s; -} - -.fade-top-2x-enter-from, -.fade-top-2x-enter { - opacity: 0; - transform: translateY(4%); -} - -.fade-top-2x-leave-to { - opacity: 0; - transform: translateY(-4%); -} diff --git a/src/design/transition/index.less b/src/design/transition/index.less index 4a818876ecd554ed6c1278730f2705f5a971a012..e7da9713ca2d0a53e0b298a76c5c3dd2ef1701e0 100644 --- a/src/design/transition/index.less +++ b/src/design/transition/index.less @@ -3,4 +3,5 @@ @import './scale.less'; @import './slide.less'; @import './scroll.less'; +@import './zoom.less'; @import './breadcrumb.less'; diff --git a/src/design/transition/scale.less b/src/design/transition/scale.less index e21febab8e42299b177fa1c735b7c5fcb84a35c1..c9654935798035fbc8a5a0d55ba903e40597f400 100644 --- a/src/design/transition/scale.less +++ b/src/design/transition/scale.less @@ -12,7 +12,6 @@ .scale-rotate-transition { .transition-default(); - &-enter, &-enter-from, &-leave, &-leave-to { diff --git a/src/design/transition/scroll.less b/src/design/transition/scroll.less index 7a329d9d9ba69ad2946cd7fe3a47e56746b5b91d..a5f45e4cb8ca409c72abbabd7904dd18630a2942 100644 --- a/src/design/transition/scroll.less +++ b/src/design/transition/scroll.less @@ -1,14 +1,12 @@ .scroll-y-transition { .transition-default(); - &-enter, &-enter-from, &-leave-to { opacity: 0; } - &-enter-from, - &-enter { + &-enter-from { transform: translateY(-15px); } @@ -20,14 +18,12 @@ .scroll-y-reverse-transition { .transition-default(); - &-enter, &-enter-from, &-leave-to { opacity: 0; } - &-enter-from, - &-enter { + &-enter-from { transform: translateY(15px); } @@ -39,14 +35,12 @@ .scroll-x-transition { .transition-default(); - &-enter, &-enter-from, &-leave-to { opacity: 0; } - &-enter-from, - &-enter { + &-enter-from { transform: translateX(-15px); } @@ -58,14 +52,12 @@ .scroll-x-reverse-transition { .transition-default(); - &-enter, &-enter-from, &-leave-to { opacity: 0; } - &-enter-from, - &-enter { + &-enter-from { transform: translateX(15px); } diff --git a/src/design/transition/slide.less b/src/design/transition/slide.less index 890e03a66912980784c44a5bfa334834aa6c6405..79b00df87afad899f83c1a012f92bb7a98d3f5a6 100644 --- a/src/design/transition/slide.less +++ b/src/design/transition/slide.less @@ -2,7 +2,6 @@ .transition-default(); &-enter-from, - &-enter, &-leave-to { opacity: 0; transform: translateY(-15px); @@ -13,7 +12,6 @@ .transition-default(); &-enter-from, - &-enter, &-leave-to { opacity: 0; transform: translateY(15px); @@ -24,7 +22,6 @@ .transition-default(); &-enter-from, - &-enter, &-leave-to { opacity: 0; transform: translateX(-15px); @@ -35,7 +32,6 @@ .transition-default(); &-enter-from, - &-enter, &-leave-to { opacity: 0; transform: translateX(15px); diff --git a/src/design/transition/zoom.less b/src/design/transition/zoom.less new file mode 100644 index 0000000000000000000000000000000000000000..38e5cb5a5463d370084049e6222b02c7b1f4b81e --- /dev/null +++ b/src/design/transition/zoom.less @@ -0,0 +1,27 @@ +// zoom-out +.zoom-out-enter-active, +.zoom-out-leave-active { + transition: opacity 0.35s ease-in-out, transform 0.45s ease-out; +} + +.zoom-out-enter-from, +.zoom-out-leave-to { + opacity: 0; + transform: scale(0); +} + +// zoom-fade +.zoom-fade-enter-active, +.zoom-fade-leave-active { + transition: transform 0.35s, opacity 0.35s ease-out; +} + +.zoom-fade-enter-from { + opacity: 0; + transform: scale(0.97); +} + +.zoom-fade-leave-to { + opacity: 0; + transform: scale(1.03); +} diff --git a/src/hooks/event/useRaf.ts b/src/hooks/event/useRaf.ts index 61575fc013e07a87ade449fc4cad180a82164886..a2b75ab15fc047a10ff177fb9f3330114bcd93a9 100644 --- a/src/hooks/event/useRaf.ts +++ b/src/hooks/event/useRaf.ts @@ -51,22 +51,23 @@ if (isServer) { } export function useRaf() { - if (getCurrentInstance()) { - onUnmounted(() => { - cancelAnimationFrame(); - }); - } - return { requestAnimationFrame }; + // if (getCurrentInstance()) { + // onUnmounted(() => { + // cancelAnimationFrame(); + // }); + // } + return { requestAnimationFrame, cancelAnimationFrame }; } -export function useRafFn(fn: () => any, options: { immediate?: boolean } = {}) { +export function useRafFn(fn: (...arg: any) => any, options: { immediate?: boolean } = {}) { const { immediate = false } = options; let started = false; + let id: ReturnType; function loop() { if (!started) return; fn(); - requestAnimationFrame(loop); + id = requestAnimationFrame(loop); } function start() { @@ -86,7 +87,7 @@ export function useRafFn(fn: () => any, options: { immediate?: boolean } = {}) { if (getCurrentInstance()) { onUnmounted(() => { - cancelAnimationFrame(); + cancelAnimationFrame(id); stop(); }); } diff --git a/src/hooks/web/useApexCharts.ts b/src/hooks/web/useApexCharts.ts index a182fac38e1ded1b7a3f3aeb564fb5b779117cd8..511b5f72808b0456aea17468b7b3b38c7a709db7 100644 --- a/src/hooks/web/useApexCharts.ts +++ b/src/hooks/web/useApexCharts.ts @@ -8,17 +8,17 @@ export function useApexCharts(elRef: Ref) { const chartInstanceRef = ref>(null); function setOptions(options: any) { - const el = unref(elRef); + nextTick(() => { + useTimeout(() => { + const el = unref(elRef); - if (!el || !unref(el)) { - return; - } - chartInstanceRef.value = new ApexCharts(el, options); + if (!el || !unref(el)) { + return; + } + chartInstanceRef.value = new ApexCharts(el, options); - const chartInstance = unref(chartInstanceRef); + const chartInstance = unref(chartInstanceRef); - nextTick(() => { - useTimeout(() => { chartInstance && chartInstance.render(); }, 30); }); diff --git a/src/hooks/web/useECharts.ts b/src/hooks/web/useECharts.ts index 05f98845f731958429ce7ff4840e1b7a8d7c6774..c739a686161c717a9f895e1a984f57748a4f41ac 100644 --- a/src/hooks/web/useECharts.ts +++ b/src/hooks/web/useECharts.ts @@ -34,24 +34,24 @@ export function useECharts( if (unref(widthRef) <= screenEnum.MD) { useTimeout(() => { resizeFn(); - }, 0); + }, 30); } } function setOptions(options: any, clear = true) { - // function setOptions(options: EChartOption, clear = true) { - let chartInstance = unref(chartInstanceRef); - - if (!chartInstance) { - init(); - chartInstance = chartInstance = unref(chartInstanceRef); - if (!chartInstance) { - return; - } - } - clear && chartInstance.clear(); nextTick(() => { useTimeout(() => { + let chartInstance = unref(chartInstanceRef); + + if (!chartInstance) { + init(); + chartInstance = chartInstance = unref(chartInstanceRef); + if (!chartInstance) { + return; + } + } + clear && chartInstance.clear(); + chartInstance && chartInstance.setOption(options); }, 30); }); diff --git a/src/router/menus/modules/demo/dashboard.ts b/src/router/menus/modules/demo/dashboard.ts index 20f028a445701507c265c8f38f02e414af4c05fe..36463831745ba9566873825048f0586ce66b8bc2 100644 --- a/src/router/menus/modules/demo/dashboard.ts +++ b/src/router/menus/modules/demo/dashboard.ts @@ -9,6 +9,10 @@ const menu: MenuModule = { path: '/workbench', name: '工作台', }, + { + path: '/analysis', + name: '分析页', + }, { path: '/welcome', name: '首页', diff --git a/src/router/routes/modules/demo/dashboard.ts b/src/router/routes/modules/demo/dashboard.ts index 325d9595455d1cd377086eeca07a9ec6750a8b9c..8d4c92f697b51c69f84952aa1835b736b1018004 100644 --- a/src/router/routes/modules/demo/dashboard.ts +++ b/src/router/routes/modules/demo/dashboard.ts @@ -32,5 +32,13 @@ export default { affix: true, }, }, + { + path: '/analysis', + name: 'Analysis', + component: () => import('/@/views/dashboard/analysis/index.vue'), + meta: { + title: '分析页', + }, + }, ], } as AppRouteModule; diff --git a/src/views/dashboard/analysis/components/AnalysisBar.vue b/src/views/dashboard/analysis/components/AnalysisBar.vue new file mode 100644 index 0000000000000000000000000000000000000000..f0981109d1801472649d11e2ef12525d87199be0 --- /dev/null +++ b/src/views/dashboard/analysis/components/AnalysisBar.vue @@ -0,0 +1,91 @@ + + diff --git a/src/views/dashboard/analysis/components/AnalysisLine.vue b/src/views/dashboard/analysis/components/AnalysisLine.vue new file mode 100644 index 0000000000000000000000000000000000000000..75702b08687189a6630bc1f3b3e919454d9db37f --- /dev/null +++ b/src/views/dashboard/analysis/components/AnalysisLine.vue @@ -0,0 +1,101 @@ + + diff --git a/src/views/dashboard/analysis/components/AnalysisPie.vue b/src/views/dashboard/analysis/components/AnalysisPie.vue new file mode 100644 index 0000000000000000000000000000000000000000..f550784415d463277fb1f7421e67d71373312b9a --- /dev/null +++ b/src/views/dashboard/analysis/components/AnalysisPie.vue @@ -0,0 +1,79 @@ + + diff --git a/src/views/dashboard/analysis/components/FlowAnalysis.tsx b/src/views/dashboard/analysis/components/FlowAnalysis.tsx new file mode 100644 index 0000000000000000000000000000000000000000..dd01934ecb141d435cb2c969094522d548a9f934 --- /dev/null +++ b/src/views/dashboard/analysis/components/FlowAnalysis.tsx @@ -0,0 +1,82 @@ +import { defineComponent } from 'vue'; +import { Tabs, Row, Col, Progress, Divider } from 'ant-design-vue'; +import { CollapseContainer } from '/@/components/Container/index'; +import TrendLine from './TrendLine.vue'; +import './flow-ana.less'; +const prefixCls = 'flow-analysis'; +export default defineComponent({ + name: 'AnalysisFLow', + setup() { + const renderContent = () => { + return ( + + {() => ( + <> + + {() => ( + + {() => ( + <> +
+ 86.2分 +
+
+ 排名前20% +
+ + + +
    +
  • + 平均分 + 77.5 +
    • +
  • + 最高分 + 99.5 +
    • +
  • + 最低分 + 56.5 +
    • +
+ + )} + + )} + + + {() => ( + + {() => } + + )} + + + )} + + ); + }; + return () => ( + + {() => ( + <> + + {() => renderContent()} + + + {() => renderContent()} + + + {() => renderContent()} + + + )} + + ); + }, +}); diff --git a/src/views/dashboard/analysis/components/GrowCard.vue b/src/views/dashboard/analysis/components/GrowCard.vue new file mode 100644 index 0000000000000000000000000000000000000000..c8fadcc5254a333f84c916c56d270df0817982af --- /dev/null +++ b/src/views/dashboard/analysis/components/GrowCard.vue @@ -0,0 +1,116 @@ + + + diff --git a/src/views/dashboard/analysis/components/TaskCard.vue b/src/views/dashboard/analysis/components/TaskCard.vue new file mode 100644 index 0000000000000000000000000000000000000000..9ac0089d7384ccd171404815d533ba70184fb77d --- /dev/null +++ b/src/views/dashboard/analysis/components/TaskCard.vue @@ -0,0 +1,154 @@ + + + diff --git a/src/views/dashboard/analysis/components/TrendLine.vue b/src/views/dashboard/analysis/components/TrendLine.vue new file mode 100644 index 0000000000000000000000000000000000000000..519d036b0db24c1ec26c94f196f767815698e8e5 --- /dev/null +++ b/src/views/dashboard/analysis/components/TrendLine.vue @@ -0,0 +1,105 @@ + + diff --git a/src/views/dashboard/analysis/components/flow-ana.less b/src/views/dashboard/analysis/components/flow-ana.less new file mode 100644 index 0000000000000000000000000000000000000000..9cee66e4e3f688c278f968221c3ca80dcae565cc --- /dev/null +++ b/src/views/dashboard/analysis/components/flow-ana.less @@ -0,0 +1,56 @@ +.flow-analysis { + width: 100%; + background: #fff; + + &__left { + padding: 10px 20px !important; + border-right: 1px solid rgba(0, 0, 0, 0.06); + border-radius: 0; + } + + &__score { + margin-top: 20px; + font-size: 30px; + line-height: 38px; + color: rgba(0, 0, 0, 0.85); + + span { + font-size: 20px; + line-height: 28px; + color: rgba(0, 0, 0, 0.85); + } + } + + &__rank { + margin: 16px 0; + font-size: 12px; + line-height: 20px; + color: #7c8087; + + span { + display: inline-block; + margin-left: 10px; + color: #1c1d21; + } + } + + &__rs { + li { + display: flex; + line-height: 28px; + justify-content: space-between; + + span { + &:nth-child(1) { + font-size: 14px; + color: #1c1d21; + } + + &:nth-child(2) { + font-size: 16px; + color: #1c1d21; + } + } + } + } +} diff --git a/src/views/dashboard/analysis/components/props.ts b/src/views/dashboard/analysis/components/props.ts new file mode 100644 index 0000000000000000000000000000000000000000..86436506c1ebee9ec4aac29766f5b0d8a5644690 --- /dev/null +++ b/src/views/dashboard/analysis/components/props.ts @@ -0,0 +1,16 @@ +import { PropType } from 'vue'; + +export interface BasicProps { + width: string; + height: string; +} +export const basicProps = { + width: { + type: String as PropType, + default: '100%', + }, + height: { + type: String as PropType, + default: '280px', + }, +}; diff --git a/src/views/dashboard/analysis/data.tsx b/src/views/dashboard/analysis/data.tsx new file mode 100644 index 0000000000000000000000000000000000000000..d94a33125de6bfd25abc8e423af8db647c344f6e --- /dev/null +++ b/src/views/dashboard/analysis/data.tsx @@ -0,0 +1,107 @@ +import { GrowCardItem, TaskItem } from './types'; +import iconSvg1 from '/@/assets/svg/dashboard/analysis-icon1.svg'; +import iconSvg2 from '/@/assets/svg/dashboard/analysis-icon2.svg'; +import iconSvg3 from '/@/assets/svg/dashboard/analysis-icon3.svg'; +import iconSvg4 from '/@/assets/svg/dashboard/analysis-icon4.svg'; +export const taskList: TaskItem[] = [ + { + percent: 50, + title: '开发任务一', + updateTime: '2020.7.12', + desc: '开发任务一简介', + status: 'active', + }, + { + percent: 67, + title: '开发任务二', + updateTime: '2020.3.12', + desc: '开发任务二简介', + status: 'exception', + }, + { + percent: 100, + title: '开发任务三', + updateTime: '2020.4.12', + desc: '开发任务三简介', + + status: 'success', + }, +]; +export const growCardList: GrowCardItem[] = [ + { + title: '总用户数', + icon: iconSvg1, + price: 80000, + up: true, + mom: '环比增长', + percent: 2.5, + }, + { + title: '产品数量', + icon: iconSvg2, + price: 4000, + up: true, + mom: '同比增长', + percent: 3, + }, + { + title: '总营业额', + icon: iconSvg3, + price: 3000000, + up: false, + mom: '环比降低', + percent: 2, + }, + { + title: '总任务数', + icon: iconSvg4, + price: 10000, + up: false, + mom: '同比降低', + percent: 1, + }, +]; +export const randomizeArray = function (arg: any) { + const array = arg.slice(); + let currentIndex = array.length, + temporaryValue, + randomIndex; + + while (0 !== currentIndex) { + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + + return array; +}; + +export const sparklineData = [ + 47, + 45, + 54, + 38, + 56, + 24, + 65, + 31, + 37, + 39, + 62, + 51, + 35, + 41, + 35, + 27, + 93, + 53, + 61, + 27, + 54, + 43, + 19, + 46, +]; diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..4cfb93513bb6cd710f2eddab8ddf2887ff1bf250 --- /dev/null +++ b/src/views/dashboard/analysis/index.vue @@ -0,0 +1,83 @@ + + + diff --git a/src/views/dashboard/analysis/types.ts b/src/views/dashboard/analysis/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..a0fbd29f4fa82ebd460116d062a6e0168c97203e --- /dev/null +++ b/src/views/dashboard/analysis/types.ts @@ -0,0 +1,16 @@ +export interface GrowCardItem { + icon: string; + title: string; + price: number; + up: boolean; + mom: string; + percent: number; +} + +export interface TaskItem { + percent: number; + status: 'success' | 'exception' | 'active'; + updateTime: string; + title: string; + desc: string; +} diff --git a/src/views/dashboard/workbench/components/Week.vue b/src/views/dashboard/workbench/components/Week.vue index 7c1da578d2b00984f0aa43be8612f07d0b9c1dd0..ca77559158fa363981347ce565b3b09566435092 100644 --- a/src/views/dashboard/workbench/components/Week.vue +++ b/src/views/dashboard/workbench/components/Week.vue @@ -1,5 +1,5 @@ @@ -9,7 +9,6 @@ import { CollapseContainer } from '/@/components/Container/index'; import { useApexCharts } from '/@/hooks/web/useApexCharts'; - import moment from 'moment'; export default defineComponent({ components: { CollapseContainer }, setup() { @@ -18,72 +17,72 @@ onMounted(() => { setOptions({ series: [ - { - data: [ - { - x: 'Analysis', - y: [new Date('2019-02-27').getTime(), new Date('2019-03-04').getTime()], - fillColor: '#008FFB', - }, - { - x: 'Design', - y: [new Date('2019-03-04').getTime(), new Date('2019-03-08').getTime()], - fillColor: '#00E396', - }, - { - x: 'Coding', - y: [new Date('2019-03-07').getTime(), new Date('2019-03-10').getTime()], - fillColor: '#775DD0', - }, - { - x: 'Testing', - y: [new Date('2019-03-08').getTime(), new Date('2019-03-12').getTime()], - fillColor: '#FEB019', - }, - { - x: 'Deployment', - y: [new Date('2019-03-12').getTime(), new Date('2019-03-17').getTime()], - fillColor: '#FF4560', - }, - ], - }, + { name: 'Visits', data: [90, 50, 86, 40, 100, 20] }, + { name: 'Sales', data: [70, 75, 70, 76, 20, 85] }, ], - chart: { - height: 350, - type: 'rangeBar', - }, - plotOptions: { - bar: { - horizontal: true, - distributed: true, - dataLabels: { - hideOverflowingLabels: false, - }, - }, - }, dataLabels: { - enabled: true, - formatter: function (val: any, opts: any) { - var label = opts.w.globals.labels[opts.dataPointIndex]; - var a = moment(val[0]); - var b = moment(val[1]); - var diff = b.diff(a, 'days'); - return label + ': ' + diff + (diff > 1 ? ' days' : ' day'); - }, style: { - colors: ['#f3f4f5', '#fff'], + colors: ['#b9c3cd', '#b9c3cd', '#b9c3cd', '#b9c3cd', '#b9c3cd', '#b9c3cd'], }, }, - xaxis: { - type: 'datetime', + chart: { + height: 350, + type: 'radar', + dropShadow: { + enabled: true, + blur: 1, + left: 1, + top: 1, + }, }, yaxis: { show: false, }, grid: { - row: { - colors: ['#f3f4f5', '#fff'], - opacity: 1, + show: false, + }, + legend: { show: false }, + title: { + show: false, + }, + tooltip: { + x: { show: false }, + }, + markers: { + size: 0, + }, + xaxis: { + categories: ['2011', '2012', '2013', '2014', '2015', '2016'], + }, + stroke: { + width: 0, + }, + colors: ['#9f8ed7', '#1edec5'], + plotOptions: { + radar: { + polygons: { + strokeColors: [ + '#e8e8e8', + 'transparent', + 'transparent', + 'transparent', + 'transparent', + 'transparent', + ], + connectorColors: 'transparent', + }, + }, + }, + fill: { + type: 'gradient', + gradient: { + shade: 'dark', + gradientToColors: ['#8e9ad6', '#1fcadb'], + shadeIntensity: 1, + type: 'horizontal', + opacityFrom: 1, + opacityTo: 1, + stops: [0, 100, 100, 100], }, }, });