Skip to content

B
basic-vue-admin
提交 8a14069e 作者: Vben
操作

refactor: refactor dashboard

上级 b9b470f4
正在显示 包含 1268 行增加 和 2259 行删除
.husky/lintstagedrc.js
......@@ -2,7 +2,7 @@ module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
'package.json': ['prettier --write'],
'*.vue': ['prettier --write', 'stylelint --fix'],
'*.vue': ['eslint --fix', 'prettier --write', 'stylelint --fix'],
'*.{scss,less,styl,css,html}': ['stylelint --fix', 'prettier --write'],
'*.md': ['prettier --write'],
};
CHANGELOG.zh_CN.md
......@@ -9,6 +9,7 @@
- 移除 useFullScreen 函数
- tinymce 由 Cdn 改为 npm(打包体积偏大)
- Dashboard 重构
### 🐛 Bug Fixes
......
build/vite/alias.ts
......@@ -2,7 +2,7 @@ import { resolve } from 'path';
import type { Alias } from 'vite';
function pathResolve(dir: string) {
return resolve(__dirname, '.', dir);
return resolve(process.cwd(), '.', dir);
}
export function createAlias(alias: [string, string][]): Alias[] {
......
build/vite/plugin/html.ts
......@@ -12,7 +12,7 @@ import { GLOB_CONFIG_FILE_NAME } from '../../constant';
export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
const path = VITE_PUBLIC_PATH?.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
const getAppConfigSrc = () => {
return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
......
package.json
......@@ -8,8 +8,8 @@
},
"scripts": {
"bootstrap": "yarn install",
"serve": "npx --max_old_space_size=4096 vite",
"dev": "npx --max_old_space_size=4096 vite",
"serve": "cross-env --max_old_space_size=4096 vite",
"dev": "cross-env --max_old_space_size=4096 vite",
"build": "vite build && esno ./build/script/postBuild.ts",
"build:no-cache": "yarn clean:cache && npm run build",
"report": "cross-env REPORT=true npm run build ",
......@@ -32,7 +32,7 @@
},
"dependencies": {
"@iconify/iconify": "^2.0.0-rc.6",
"@vueuse/core": "^4.6.2",
"@vueuse/core": "^4.6.3",
"@zxcvbn-ts/core": "^0.3.0",
"ant-design-vue": "^2.1.2",
"apexcharts": "^3.26.0",
......@@ -49,7 +49,7 @@
"sortablejs": "^1.13.0",
"tinymce": "^5.7.1",
"vditor": "^3.8.4",
"vue": "3.0.7",
"vue": "3.0.10",
"vue-i18n": "^9.0.0",
"vue-router": "^4.0.5",
"vue-types": "^3.0.2",
......@@ -60,7 +60,7 @@
"devDependencies": {
"@commitlint/cli": "^12.0.1",
"@commitlint/config-conventional": "^12.0.1",
"@iconify/json": "^1.1.322",
"@iconify/json": "^1.1.323",
"@purge-icons/generated": "^0.7.0",
"@types/crypto-js": "^4.0.1",
"@types/fs-extra": "^9.0.9",
......@@ -72,21 +72,20 @@
"@types/qs": "^6.9.6",
"@types/rollup-plugin-visualizer": "^2.6.0",
"@types/sortablejs": "^1.10.6",
"@typescript-eslint/eslint-plugin": "^4.19.0",
"@typescript-eslint/parser": "^4.19.0",
"@typescript-eslint/eslint-plugin": "^4.20.0",
"@typescript-eslint/parser": "^4.20.0",
"@vitejs/plugin-legacy": "^1.3.2",
"@vitejs/plugin-vue": "^1.2.0",
"@vitejs/plugin-vue": "^1.2.1",
"@vitejs/plugin-vue-jsx": "^1.1.2",
"@vue/compiler-sfc": "3.0.7",
"@vue/compiler-sfc": "3.0.10",
"autoprefixer": "^10.2.5",
"body-parser": "^1.19.0",
"commitizen": "^4.2.3",
"conventional-changelog-cli": "^2.1.1",
"cross-env": "^7.0.3",
"dotenv": "^8.2.0",
"eslint": "^7.23.0",
"eslint-config-prettier": "^8.1.0",
"eslint-define-config": "^1.0.5",
"eslint-define-config": "^1.0.6",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.8.0",
"esno": "^0.5.0",
......@@ -97,7 +96,7 @@
"is-ci": "^3.0.0",
"less": "^4.1.1",
"lint-staged": "^10.5.4",
"postcss": "^8.2.8",
"postcss": "^8.2.9",
"prettier": "^2.2.1",
"pretty-quick": "^3.1.0",
"rimraf": "^3.0.2",
......@@ -108,17 +107,17 @@
"stylelint-order": "^4.1.0",
"ts-node": "^9.1.1",
"typescript": "4.2.3",
"vite": "2.1.3",
"vite": "2.1.5",
"vite-plugin-compression": "^0.2.3",
"vite-plugin-html": "^2.0.3",
"vite-plugin-imagemin": "^0.2.9",
"vite-plugin-mock": "^2.4.0",
"vite-plugin-mock": "^2.4.1",
"vite-plugin-purge-icons": "^0.7.0",
"vite-plugin-pwa": "^0.6.4",
"vite-plugin-style-import": "^0.9.1",
"vite-plugin-svg-icons": "^0.4.0",
"vite-plugin-theme": "^0.5.0",
"vite-plugin-windicss": "0.11.0",
"vite-plugin-windicss": "0.10.4",
"vue-eslint-parser": "^7.6.0"
},
"resolutions": {
......
src/assets/icons/download-count.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356.99 419.8"><defs><style>.cls-1{fill:#ffa546;}.cls-2{fill:#ff6059;opacity:0.4;}.cls-3{fill:#426572;}.cls-4{fill:#ffd947;}</style></defs><title>Asset 91</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M351,380.73v17.59a15.52,15.52,0,0,1-15.47,15.48H21.46A15.52,15.52,0,0,1,6,398.32V380.73a15.51,15.51,0,0,1,15.47-15.47H335.52A15.51,15.51,0,0,1,351,380.73Z"/><path class="cls-2" d="M351,406.85c0,3.95-7,7.19-15.47,7.19H21.46C13,414,6,410.8,6,406.85V380.73a15.51,15.51,0,0,1,15.47-15.47H37.66l3.44,25.27c0,4,7,7.2,15.47,7.2l283.72,12.44,7.38-2.28Z"/><path class="cls-3" d="M335.52,419.8H21.46A21.5,21.5,0,0,1,0,398.32V380.73a21.49,21.49,0,0,1,21.46-21.47H335.52A21.49,21.49,0,0,1,357,380.73v17.59a21.52,21.52,0,0,1-21.46,21.48ZM21.46,371.26A9.48,9.48,0,0,0,12,380.73v17.59a9.48,9.48,0,0,0,9.46,9.48H335.52a9.52,9.52,0,0,0,9.46-9.48V380.73a9.48,9.48,0,0,0-9.46-9.47Z"/><path class="cls-1" d="M247.93,138H233.23V41.7A35.7,35.7,0,0,0,197.53,6H159.45a35.7,35.7,0,0,0-35.7,35.7V138H109.06C80,138,61.84,169.48,76.37,194.64l34.72,60.13,30,52c16.6,28.76,58.12,28.76,74.72,0l30-52,34.72-60.13C295.14,169.48,277,138,247.93,138Z"/><path class="cls-2" d="M280.62,188l-34.73,60.13-30,52c-11.24,19.46-66.68,32.78-52.52,18.88,60.22-59.12,104.3-182.16,104.3-182.16A37.74,37.74,0,0,1,280.62,188Z"/><path class="cls-4" d="M192.3,6c-.22.23-.42.47-.63.72-38.92,45-18.36,116.49-42.85,170.71-10.14,22.45-29.18,41.51-52.15,49.48L78,194.64C63.52,169.48,81.67,138,110.72,138h14.7V41.7A35.7,35.7,0,0,1,161.12,6Z"/><path class="cls-3" d="M178.49,334.39h0a48.64,48.64,0,0,1-42.56-24.57L71.17,197.64A43.75,43.75,0,0,1,109.06,132h8.69V41.7A41.74,41.74,0,0,1,159.45,0h38.09a41.75,41.75,0,0,1,41.7,41.7V132h8.69a43.75,43.75,0,0,1,37.89,65.62L221,309.82A48.64,48.64,0,0,1,178.49,334.39ZM109.06,144a31.75,31.75,0,0,0-27.49,47.62l64.76,112.17a37.14,37.14,0,0,0,64.33,0l64.76-112.17A31.75,31.75,0,0,0,247.92,144H227.23V41.7A29.73,29.73,0,0,0,197.53,12H159.45a29.73,29.73,0,0,0-29.7,29.7V144Z"/></g></g></svg>
\ No newline at end of file
src/assets/icons/total-sales.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 445 271.8"><defs><style>.cls-1{fill:#32caf8;}.cls-2{fill:#00aaf8;opacity:0.5;}.cls-3{fill:#fff;}.cls-4{fill:#426572;}</style></defs><title>Asset 500</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="6" y="8.17" width="433" height="259.8" rx="12" ry="12"/><path class="cls-2" d="M439,21.16V255a13,13,0,0,1-13,13H28.72l381-259.8H426A13,13,0,0,1,439,21.16Z"/><path class="cls-3" d="M328,33.24h88.92c3.86,0,3.87-6,0-6H328c-3.86,0-3.87,6,0,6Z"/><path class="cls-3" d="M283.49,33.24H312.6c3.86,0,3.87-6,0-6H283.49c-3.86,0-3.87,6,0,6Z"/><path class="cls-4" d="M427,271.8H18a18,18,0,0,1-18-18V18A18,18,0,0,1,18,0H427a18,18,0,0,1,18,18V253.8A18,18,0,0,1,427,271.8ZM18,12a6,6,0,0,0-6,6V253.8a6,6,0,0,0,6,6H427a6,6,0,0,0,6-6V18a6,6,0,0,0-6-6Z"/><rect class="cls-4" x="37.89" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="55.93" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="73.97" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="92.01" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="118.71" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="136.76" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="154.8" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="172.84" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="199.54" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="217.58" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="235.63" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="253.67" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="280.37" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="298.41" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="316.45" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="334.49" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="43.89" y="177.53" width="161.29" height="12"/><rect class="cls-4" x="43.89" y="204.59" width="68.2" height="12"/><circle class="cls-3" cx="379.46" cy="207.35" r="23.82"/><rect class="cls-3" x="43.89" y="36.31" width="72.53" height="47.63" rx="12" ry="12"/><path class="cls-4" d="M104.42,88.86H55.89a18,18,0,0,1-18-18V47.23a18,18,0,0,1,18-18h48.53a18,18,0,0,1,18,18V70.86A18,18,0,0,1,104.42,88.86ZM55.89,41.23a6,6,0,0,0-6,6V70.86a6,6,0,0,0,6,6h48.53a6,6,0,0,0,6-6V47.23a6,6,0,0,0-6-6Z"/><path class="cls-4" d="M379.46,241.49a29.81,29.81,0,1,1,29.82-29.82A29.85,29.85,0,0,1,379.46,241.49Zm0-47.63a17.81,17.81,0,1,0,17.82,17.81A17.84,17.84,0,0,0,379.46,193.86Z"/></g></g></svg>
\ No newline at end of file
src/assets/icons/transaction.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392.49 390.69"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#f3aa9f;}.cls-3{fill:#e1978f;}.cls-4,.cls-6{fill:#426572;}.cls-5{fill:#e1d2d5;}.cls-6{font-size:100.43px;font-family:Dosis-ExtraBold, Dosis;font-weight:700;}</style></defs><title>Asset 480</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M383.9,162H199.69V2.19q4-.19,8.16-.19A176.87,176.87,0,0,1,383.9,162Z"/><path class="cls-2" d="M355.38,210a176.83,176.83,0,0,1-95.72,157.18l-.15.07A176.88,176.88,0,1,1,101.72,50.67l.15-.07a175.93,175.93,0,0,1,72.82-17.4V191H354.37A177.9,177.9,0,0,1,355.38,210Z"/><path class="cls-3" d="M357.53,212.16a176,176,0,0,1-17.44,76.66,1,1,0,0,1-.07.15A176.89,176.89,0,0,1,73.47,352.79l1.23.38q6,1.86,12.26,3.29A177,177,0,0,0,303.49,191h52.78A178.15,178.15,0,0,1,357.53,212.16Z"/><path class="cls-4" d="M182.85,390.69a182.87,182.87,0,0,1-84-345.31l.41-.2a180.59,180.59,0,0,1,75.13-20l6.27-.28V185H364.36l.51,5.44c.54,5.77.82,11.62.82,17.4a180.72,180.72,0,0,1-20.18,83.56c-.06.12-.12.26-.2.41a184.39,184.39,0,0,1-83,80.77l-.18.08,0,0A181.06,181.06,0,0,1,182.85,390.69ZM104.33,56.08A170.88,170.88,0,0,0,256.9,361.85l.17-.08,0,0a172.34,172.34,0,0,0,77.5-75.38l.15-.29a168.84,168.84,0,0,0,18.93-78.23c0-3.6-.11-7.23-.34-10.84H168.69V37.58a168.41,168.41,0,0,0-64.07,18.35Z"/><path class="cls-5" d="M382.9,158H309.11c-2.89-46.4-18.43-98.49-36.89-144.29l1.33.51a177.49,177.49,0,0,1,92.51,83.56A175.63,175.63,0,0,1,382.9,158Z"/><path class="cls-4" d="M392.49,172H195.69V.47L201.4.2C204.11.07,207,0,209.85,0a182.87,182.87,0,0,1,182,165.44Zm-184.8-12H379.18A170.89,170.89,0,0,0,209.85,12h-2.16Z"/><text class="cls-6" transform="translate(232.67 133.93)">%</text><path class="cls-1" d="M101.22,81.14a166.34,166.34,0,0,1,34.83-18c3.58-1.34,2-7.14-1.6-5.79A172.89,172.89,0,0,0,98.19,76c-3.18,2.15-.18,7.35,3,5.18Z"/><path class="cls-1" d="M36.28,166.34c2.62-8.63,6.74-16.94,11.05-24.83A180.58,180.58,0,0,1,87.86,91.34c2.93-2.52-1.33-6.75-4.24-4.24-23.3,20.06-44.07,47.84-53.12,77.65-1.12,3.7,4.67,5.29,5.79,1.6Z"/></g></g></svg>
\ No newline at end of file
src/assets/icons/visit-count.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 419.23 419.23"><defs><style>.cls-1{fill:#fbc907;}.cls-2{fill:#f3a70f;}.cls-3{fill:#426572;}.cls-4,.cls-9{fill:#fff;}.cls-5{fill:#e8e8e8;}.cls-6{fill:#dadada;}.cls-7{opacity:0.1;}.cls-8{fill:#55e0ff;}.cls-9{opacity:0.4;}</style></defs><title>Asset 510</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="210.66" cy="209.62" r="203.61"/><path class="cls-2" d="M27.21,209.62A203.61,203.61,0,0,1,220.72,6.26q-5-.25-10.08-.25C98.19,4.86,6.11,95.09,5,207.54S94.05,412.07,206.5,413.21q2.07,0,4.13,0,5.06,0,10.08-.25A203.61,203.61,0,0,1,27.21,209.62Z"/><path class="cls-3" d="M209.61,419.23C94,419.23,0,325.19,0,209.61S94,0,209.61,0,419.23,94,419.23,209.61,325.19,419.23,209.61,419.23Zm0-407.23C100.65,12,12,100.65,12,209.61s88.65,197.61,197.61,197.61,197.61-88.65,197.61-197.61S318.58,12,209.61,12Z"/><path class="cls-4" d="M111.69,60.1a195,195,0,0,1,41.08-21.2c3.59-1.34,2-7.14-1.6-5.79a201.47,201.47,0,0,0-42.51,21.8c-3.18,2.15-.18,7.35,3,5.18Z"/><path class="cls-4" d="M35.09,160.61c3.09-10.2,8-20,13.05-29.32A212.37,212.37,0,0,1,95.87,72.18c2.93-2.52-1.33-6.75-4.24-4.24A217.08,217.08,0,0,0,43,128.26C37.63,138,32.54,148.34,29.31,159c-1.12,3.7,4.67,5.29,5.79,1.6Z"/><circle class="cls-5" cx="211.45" cy="212.12" r="156.89"/><path class="cls-6" d="M67.05,232.07a156.89,156.89,0,0,1,283.33-92.82A156.91,156.91,0,1,0,85,304.92,156.19,156.19,0,0,1,67.05,232.07Z"/><path class="cls-5" d="M211.32,152.25h0a9.16,9.16,0,0,1,9.16,9.16V210.5a9.16,9.16,0,0,1-9.16,9.16h0a9.16,9.16,0,0,1-9.16-9.16V161.41A9.16,9.16,0,0,1,211.32,152.25Z"/><circle class="cls-5" cx="211.14" cy="221.32" r="15.94"/><path class="cls-3" d="M210.48,92.62c6.29,0,6.29-9.77,0-9.77S204.19,92.62,210.48,92.62Z"/><path class="cls-3" d="M210.48,343.89c6.29,0,6.29-9.77,0-9.77S204.19,343.89,210.48,343.89Z"/><path class="cls-3" d="M339.84,218.25c6.29,0,6.29-9.77,0-9.77S333.55,218.25,339.84,218.25Z"/><path class="cls-3" d="M81.13,218.25c6.29,0,6.29-9.77,0-9.77S74.84,218.25,81.13,218.25Z"/><path class="cls-3" d="M205.56,153.32h0a9.16,9.16,0,0,1,9.16,9.16v49.09a9.16,9.16,0,0,1-9.16,9.16h0a9.16,9.16,0,0,1-9.16-9.16V162.49A9.16,9.16,0,0,1,205.56,153.32Z"/><circle class="cls-3" cx="205.38" cy="221.15" r="15.94"/><path class="cls-3" d="M135.78,272.58l135.16-89.89L290.11,170c5.22-3.46.33-11.94-4.92-8.44L150,251.4l-19.17,12.74C125.64,267.6,130.52,276.08,135.78,272.58Z"/><g class="cls-7"><ellipse class="cls-8" cx="210.2" cy="211.21" rx="156.89" ry="154.23"/></g><path class="cls-9" d="M243.13,60.17,84.37,301.88a162.18,162.18,0,0,1-18.58-47.29L193.5,60.21a153.88,153.88,0,0,1,49.67,0Z"/><path class="cls-9" d="M289.69,72.6,115.93,325.78a155.09,155.09,0,0,1-14.77-15L270,64.76A155.38,155.38,0,0,1,289.69,72.6Z"/><path class="cls-9" d="M362.16,171.75h0L232.51,360.68h0a160.93,160.93,0,0,1-42.54.43L346.63,132.84A151.63,151.63,0,0,1,362.16,171.75Z"/><path class="cls-3" d="M210.12,369.75c-89.82,0-162.89-71.88-162.89-160.23S120.31,49.29,210.12,49.29,373,121.17,373,209.52,299.94,369.75,210.12,369.75Zm0-308.46c-83.2,0-150.89,66.5-150.89,148.23s67.69,148.23,150.89,148.23S361,291.25,361,209.52,293.32,61.29,210.12,61.29Z"/></g></g></svg>
\ No newline at end of file
src/assets/svg/dashboard/analysis-down.svg deleted 100644 → 0
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="12px" viewBox="0 0 20 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
<title>下跌-24px</title>
<desc>Created with Sketch.</desc>
<g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="系统首页" transform="translate(-850.000000, -241.000000)">
<g id="1" transform="translate(234.000000, 120.000000)">
<g id="Total-Sales" transform="translate(598.000000, 0.000000)">
<g id="8.5%-Up-from-yesterday" transform="translate(16.000000, 114.000000)">
<g id="下跌-24px" transform="translate(0.000000, 1.000000)">
<polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
<polygon id="Path" fill="#ED6F6F" fill-rule="nonzero" points="16 18 18.29 15.71 13.41 10.83 9.41 14.83 2 7.41 3.41 6 9.41 12 13.41 8 19.71 14.29 22 12 22 18"></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/svg/dashboard/analysis-icon1.svg deleted 100644 → 0
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
<title>Icon1@3x</title>
<desc>Created with Sketch.</desc>
<g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="系统首页" transform="translate(-419.000000, -136.000000)" fill="#0593FF">
<g id="1" transform="translate(234.000000, 120.000000)">
<g id="Total-Users">
<g id="Icon1" transform="translate(185.000000, 16.000000)">
<path d="M23,60 C10.2974508,60 1.55561363e-15,49.7025492 0,37 L0,23 C-1.55561363e-15,10.2974508 10.2974508,2.33342044e-15 23,0 L37,0 C49.7025492,-2.33342044e-15 60,10.2974508 60,23 L60,37 C60,49.7025492 49.7025492,60 37,60 L23,60 Z" id="Circle-2" opacity="0.209999993"></path>
<g id="Group" transform="translate(14.000000, 18.000000)" fill-rule="nonzero">
<path d="M24,6.66666667 C26.209139,6.66666667 28,8.45752767 28,10.6666667 C28,12.8758057 26.209139,14.6666667 24,14.6666667 C21.790861,14.6666667 20,12.8758057 20,10.6666667 C20,8.45752767 21.790861,6.66666667 24,6.66666667 Z M12,0 C14.9455187,0 17.3333333,2.38781467 17.3333333,5.33333333 C17.3333333,8.278852 14.9455187,10.6666667 12,10.6666667 C9.05448133,10.6666667 6.66666667,8.278852 6.66666667,5.33333333 C6.66666667,2.38781467 9.05448133,0 12,0 Z" id="Combined-Shape" opacity="0.587820871"></path>
<path d="M23.4686027,16.0012776 L23.3172917,16 C27.927838,16 31.7158139,18.2931929 31.9979916,23.2 C32.0092328,23.3954741 31.9979916,24 31.2745999,24 L26.1333333,24 L26.1333333,24 C26.1333333,20.9989578 25.1418595,18.2294867 23.4686027,16.0012776 Z M11.9777884,13.3333333 C18.3616218,13.3333333 23.6065116,16.3909238 23.9972191,22.9333333 C24.0127839,23.1939654 23.9972191,24 22.9955999,24 L0.97000297,24 L0.97000297,24 C0.635616207,24 -0.027282334,23.2789066 0.000868912387,22.932274 C0.517678033,16.5686878 5.6825498,13.3333333 11.9777884,13.3333333 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/svg/dashboard/analysis-icon2.svg deleted 100644 → 0
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
<title>Icon2@3x</title>
<desc>Created with Sketch.</desc>
<g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="系统首页" transform="translate(-719.000000, -136.000000)">
<g id="1" transform="translate(234.000000, 120.000000)">
<g id="Total-Order" transform="translate(299.000000, 0.000000)">
<g id="Icon2" transform="translate(186.000000, 16.000000)">
<path d="M23,60 C10.2974508,60 1.55561363e-15,49.7025492 0,37 L0,23 C-1.55561363e-15,10.2974508 10.2974508,2.33342044e-15 23,0 L37,0 C49.7025492,-2.33342044e-15 60,10.2974508 60,23 L60,37 C60,49.7025492 49.7025492,60 37,60 L23,60 Z" id="Circle-2" fill="#FFD164" opacity="0.209999993"></path>
<g id="icon" transform="translate(15.000000, 13.000000)">
<path d="M0,11.3164701 L12.9004912,18.7645722 C13.0394036,18.8447733 13.1850623,18.9027046 13.3333333,18.9394739 L13.3333333,33.3847054 L0.920064885,26.0385088 C0.349783865,25.7010154 0,25.0875659 0,24.4249029 L0,11.3164701 Z M30,11.1184665 L30,24.4249029 C30,25.0875659 29.6502161,25.7010154 29.0799351,26.0385088 L16.6666667,33.3847054 L16.6666667,18.8129235 C16.6969108,18.7978151 16.7268876,18.7817016 16.7565565,18.7645722 L30,11.1184665 L30,11.1184665 Z" id="Combined-Shape" fill="#FFC741"></path>
<path d="M0.405221909,7.70142332 C0.562796988,7.50243849 0.761684783,7.33426405 0.993563997,7.21076013 L14.118564,0.220099528 C14.6695479,-0.0733665093 15.3304521,-0.0733665093 15.881436,0.220099528 L29.006436,7.21076013 C29.1851826,7.30596446 29.3443248,7.42771319 29.480051,7.56965747 L15.0898899,15.8778209 C14.9952678,15.9324509 14.9080291,15.9949583 14.8285239,16.0640363 C14.7490186,15.9949583 14.66178,15.9324509 14.5671579,15.8778209 L0.405221909,7.70142332 Z" id="Path" fill="#FFD164" opacity="0.659481957"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/svg/dashboard/analysis-icon3.svg deleted 100644 → 0
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
<title>Icon3@3x</title>
<desc>Created with Sketch.</desc>
<g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="系统首页" transform="translate(-1018.000000, -136.000000)" fill="#55D187">
<g id="1" transform="translate(234.000000, 120.000000)">
<g id="Total-Sales" transform="translate(598.000000, 0.000000)">
<g id="Icon3" transform="translate(186.000000, 16.000000)">
<path d="M23,60 C10.2974508,60 1.55561363e-15,49.7025492 0,37 L0,23 C-1.55561363e-15,10.2974508 10.2974508,2.33342044e-15 23,0 L37,0 C49.7025492,-2.33342044e-15 60,10.2974508 60,23 L60,37 C60,49.7025492 49.7025492,60 37,60 L23,60 Z" id="Circle-2" opacity="0.209999993"></path>
<g id="icon" transform="translate(16.000000, 16.000000)" fill-rule="nonzero">
<path d="M3.11111111,24.8888889 L26.4444444,24.8888889 C27.3035541,24.8888889 28,25.5853348 28,26.4444444 C28,27.3035541 27.3035541,28 26.4444444,28 L1.55555556,28 C0.696445945,28 0,27.3035541 0,26.4444444 L0,1.55555556 C0,0.696445945 0.696445945,0 1.55555556,0 C2.41466517,0 3.11111111,0.696445945 3.11111111,1.55555556 L3.11111111,24.8888889 Z" id="Path-95"></path>
<path d="M8.91261343,18.1750195 C8.32503303,18.801772 7.34062178,18.8335272 6.71386936,18.2459468 C6.08711693,17.6583664 6.05536173,16.6739551 6.64294213,16.0472027 L12.4762755,9.82498047 C13.044535,9.21883699 13.9888279,9.16627114 14.6208522,9.70559855 L19.2248856,13.6343737 L25.2235157,6.03610888 C25.7558581,5.36180856 26.7340352,5.24672889 27.4083356,5.77907125 C28.0826359,6.31141362 28.1977156,7.28959079 27.6653732,7.96389112 L20.6653732,16.8305578 C20.118618,17.5231144 19.1059101,17.6227201 18.4347034,17.049957 L13.7306235,13.0358088 L8.91261343,18.1750195 Z" id="Path-97" opacity="0.657133557"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/svg/dashboard/analysis-icon4.svg deleted 100644 → 0
<?xml version="1.0" encoding="UTF-8"?>
<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
<title>Icon</title>
<desc>Created with Sketch.</desc>
<g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="系统首页" transform="translate(-1317.000000, -136.000000)" fill="#FF9066">
<g id="1" transform="translate(234.000000, 120.000000)">
<g id="Order-Pending" transform="translate(897.000000, 0.000000)">
<g id="Icon" transform="translate(186.000000, 16.000000)">
<path d="M23,60 C10.2974508,60 1.55561363e-15,49.7025492 0,37 L0,23 C-1.55561363e-15,10.2974508 10.2974508,2.33342044e-15 23,0 L37,0 C49.7025492,-2.33342044e-15 60,10.2974508 60,23 L60,37 C60,49.7025492 49.7025492,60 37,60 L23,60 Z" id="Circle-2" opacity="0.3"></path>
<g id="icon" transform="translate(16.000000, 15.000000)">
<path d="M13.1296822,8.34718934 L13.5475062,8.34718934 C13.8043819,8.34718934 14.0194647,8.54183658 14.0450248,8.79743748 L14.6666667,15.013856 L14.6666667,15.013856 L19.0814028,17.5365624 C19.2371903,17.6255838 19.3333333,17.7912555 19.3333333,17.9706839 L19.3333333,18.3592308 C19.3333333,18.6353732 19.1094757,18.8592308 18.8333333,18.8592308 C18.7888923,18.8592308 18.7446497,18.8533059 18.7017746,18.8416127 L12.3986612,17.1225818 C12.1672824,17.0594785 12.0132986,16.8409746 12.0316926,16.6018516 L12.631155,8.80884109 C12.6511933,8.54834251 12.8684141,8.34718934 13.1296822,8.34718934 Z" id="Path-107" opacity="0.779999971"></path>
<path d="M6.01733907,-0.0772351689 C6.2288764,-0.254736066 6.5442542,-0.227144084 6.72175509,-0.0156067521 L6.72175509,-0.0156067521 L8.51913552,2.1273858 C10.2024553,1.41052645 12.054904,1.01385601 14,1.01385601 C21.7319865,1.01385601 28,7.28186951 28,15.013856 C28,22.6413562 21.9002476,28.8441829 14.312645,29.010434 L14,29.013856 L14,29.013856 C6.2680135,29.013856 0,22.7458425 0,15.013856 C0,13.7006992 0.180792724,12.4297687 0.518844853,11.224598 L3.08641434,11.944805 C2.80896017,12.9339413 2.66666667,13.9630912 2.66666667,15.013856 C2.66666667,21.2730832 7.74077284,26.3471893 14,26.3471893 C20.2592272,26.3471893 25.3333333,21.2730832 25.3333333,15.013856 C25.3333333,8.85242927 20.4165542,3.83937783 14.2925184,3.68422422 L14,3.68052267 L14,3.68052267 C12.7318949,3.68052267 11.4968995,3.88835566 10.3322213,4.2862714 L12.1330448,6.43331723 C12.2023675,6.51593278 12.24312,6.61874811 12.2492217,6.7264223 C12.2648452,7.00212236 12.0540114,7.23828671 11.7783113,7.25391015 L11.7783113,7.25391015 L4.73355552,7.65312407 C4.68508783,7.65587065 4.6364785,7.65154413 4.58925778,7.64028071 C4.32065092,7.57621071 4.15484104,7.30652283 4.21891104,7.03791597 L4.21891104,7.03791597 L5.85237713,0.189778054 C5.87728008,0.0853749765 5.93511798,-0.00824348388 6.01733907,-0.0772351689 Z" id="Combined-Shape" opacity="0.901274182"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/svg/dashboard/analysis-rise.svg deleted 100644 → 0
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="12px" viewBox="0 0 20 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
<title>上涨-24px</title>
<desc>Created with Sketch.</desc>
<g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="系统首页" transform="translate(-551.000000, -240.000000)">
<g id="1" transform="translate(234.000000, 120.000000)">
<g id="Total-Order" transform="translate(299.000000, 0.000000)">
<g id="8.5%-Up-from-yesterday" transform="translate(16.000000, 114.000000)">
<g id="上涨-24px">
<polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
<polygon id="Path" fill="#55D187" fill-rule="nonzero" points="16 6 18.29 8.29 13.41 13.17 9.41 9.17 2 16.59 3.41 18 9.41 12 13.41 16 19.71 9.71 22 12 22 6"></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/Basic/src/BasicTitle.vue
......@@ -53,7 +53,7 @@
&-normal {
font-size: 14px;
font-weight: normal;
font-weight: 500;
}
&-show-span::before {
......
src/components/Container/src/collapse/CollapseContainer.vue
......@@ -9,6 +9,9 @@
<template #title>
<slot name="title"></slot>
</template>
<template #action>
<slot name="action"></slot>
</template>
</CollapseHeader>
<div class="p-2">
......@@ -19,6 +22,10 @@
</div>
</CollapseTransition>
</div>
<div :class="`${prefixCls}__footer`" v-if="$slots.footer">
<slot name="footer"></slot>
</div>
</div>
</template>
<script lang="ts">
......@@ -106,6 +113,10 @@
border-bottom: 1px solid @border-color-light;
}
&__footer {
border-top: 1px solid @border-color-light;
}
&__action {
display: flex;
text-align: right;
......
src/components/Page/src/PageWrapper.vue
......@@ -181,7 +181,7 @@
position: relative;
.@{prefix-cls}-content {
margin: 16px 16px 0 16px;
margin: 16px;
}
.ant-page-header {
......
src/components/Scrollbar/src/index.vue
......@@ -111,9 +111,9 @@
onBeforeUnmount(() => {
if (props.native) return;
if (!props.noresize) {
// removeResizeListener(unref(resize), update);
// removeResizeListener(unref(wrap), update);
// removeEventListener('resize', update);
removeResizeListener(unref(resize), update);
removeResizeListener(unref(wrap), update);
removeEventListener('resize', update);
}
});
......
src/components/Tree/src/TreeHeader.vue
<template>
<div class="flex px-2 py-1.5 items-center border-b-1">
<slot name="headerTitle" v-if="$slots.headerTitle"></slot>
<BasicTitle :helpMessage="helpMessage" v-if="!$slots.headerTitle && title">{{
title
}}</BasicTitle>
<BasicTitle :helpMessage="helpMessage" v-if="!$slots.headerTitle && title">
{{ title }}
</BasicTitle>
<div class="flex flex-1 justify-end items-center cursor-pointer" v-if="search || toolbar">
<div class="mr-1 w-2/3" v-if="search">
<InputSearch :placeholder="t('common.searchText')" size="small" @change="handleSearch" />
<InputSearch
:placeholder="t('common.searchText')"
size="small"
allowClear
@change="handleSearch"
/>
</div>
<Dropdown @click.prevent v-if="toolbar">
<Icon icon="ion:ellipsis-vertical" />
......
src/enums/pageEnum.ts
......@@ -2,7 +2,7 @@ export enum PageEnum {
// basic login path
BASE_LOGIN = '/login',
// basic home path
BASE_HOME = '/home',
BASE_HOME = '/dashboard',
// error page path
ERROR_PAGE = '/exception',
// error log page path
......
src/layouts/default/header/components/user-dropdown/index.vue
......@@ -136,8 +136,8 @@
}
img {
width: 26px;
height: 26px;
width: 24px;
height: 24px;
margin-right: 12px;
}
......
src/layouts/default/tabs/index.less
......@@ -30,7 +30,7 @@
line-height: calc(@multiple-height - 2px);
color: @text-color-call-out;
background: @white;
border: 1px solid darken(@border-color-light, 6%);
border-bottom: 1px solid @header-light-bottom-border-color;
transition: none;
// &:not(.ant-tabs-tab-active)::before {
......
src/plugins/echarts/index.ts
import * as echarts from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart } from 'echarts/charts';
import {
BarChart,
LineChart,
PieChart,
MapChart,
PictorialBarChart,
RadarChart,
} from 'echarts/charts';
import {
TitleComponent,
......@@ -10,6 +17,7 @@ import {
AriaComponent,
ParallelComponent,
LegendComponent,
RadarComponent,
} from 'echarts/components';
import { SVGRenderer } from 'echarts/renderers';
......@@ -26,8 +34,10 @@ echarts.use([
LineChart,
PieChart,
MapChart,
RadarChart,
SVGRenderer,
PictorialBarChart,
RadarComponent,
]);
export default echarts;
src/router/menus/modules/dashboard.ts
......@@ -6,14 +6,26 @@ const menu: MenuModule = {
menu: {
name: t('routes.dashboard.dashboard'),
path: '/dashboard',
tag: {
dot: true,
type: 'warn',
},
children: [
{
path: 'workbench',
name: t('routes.dashboard.workbench'),
},
{
path: 'analysis',
name: t('routes.dashboard.analysis'),
tag: {
dot: true,
type: 'warn',
},
},
{
path: 'workbench',
name: t('routes.dashboard.workbench'),
tag: {
dot: true,
type: 'warn',
},
},
],
},
......
src/router/routes/modules/dashboard.ts
......@@ -7,7 +7,7 @@ const dashboard: AppRouteModule = {
path: '/dashboard',
name: 'Dashboard',
component: LAYOUT,
redirect: '/dashboard/workbench',
redirect: '/dashboard/analysis',
meta: {
icon: 'ion:grid-outline',
title: t('routes.dashboard.dashboard'),
......@@ -26,6 +26,7 @@ const dashboard: AppRouteModule = {
name: 'Analysis',
component: () => import('/@/views/dashboard/analysis/index.vue'),
meta: {
affix: true,
title: t('routes.dashboard.analysis'),
},
},
......
src/utils/env.ts
......@@ -80,12 +80,3 @@ export function isDevMode(): boolean {
export function isProdMode(): boolean {
return import.meta.env.PROD;
}
/**
* @description: Whether to open mock
* @returns:
* @example:
*/
export function isUseMock(): boolean {
return import.meta.env.VITE_USE_MOCK === 'true';
}
src/views/dashboard/analysis/components/AnalysisBar.vue deleted 100644 → 0
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props';
export default defineComponent({
name: 'AnalysisLine',
props: basicProps,
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
setOptions({
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
itemWidth: 15,
right: 10,
data: ['产品一', '产品二', '产品三'],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
axisTick: {
inside: true, // 刻度朝内
},
data: ['付费用户', '免费用户', '自主'],
},
],
yAxis: [
{
type: 'value',
axisTick: {
inside: true, // 刻度朝内
},
},
],
series: [
{
name: '产品一',
type: 'bar',
itemStyle: {
color: '#3ca0f6',
},
data: [3200, 3320, 3010],
animationDuration: 4000,
},
{
name: '产品二',
type: 'bar',
itemStyle: {
color: '#7dd9b9',
},
data: [1200, 2600, 1010],
animationDuration: 4000,
},
{
name: '产品三',
type: 'bar',
itemStyle: {
color: '#e6a23c',
},
data: [862, 2500, 964],
animationDuration: 4000,
},
],
});
});
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/AnalysisLine.vue deleted 100644 → 0
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props';
export default defineComponent({
name: 'AnalysisLine',
props: basicProps,
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
setOptions({
// title: {
// text: '产品成交额',
// },
tooltip: {
trigger: 'axis',
padding: 3,
borderColor: '#777',
borderWidth: 1,
},
legend: {
itemWidth: 15,
itemHeight: 4,
left: 80,
top: 0,
orient: 'horizontal',
data: ['产品一', '产品二'],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
inside: true, // 刻度朝内
},
data: [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月',
],
},
yAxis: {
type: 'value',
axisTick: {
inside: true, // 刻度朝内
},
},
series: [
{
name: '产品一',
type: 'line',
itemStyle: {
color: '#5B8FF9',
},
data: [330, 132, 101, 134, 90, 230, 210, 150, 232, 234, 230, 400],
animationDuration: 4000,
},
{
name: '产品二',
type: 'line',
itemStyle: {
color: '#55D187',
},
data: [220, 182, 191, 234, 290, 330, 310, 330, 232, 201, 330, 190],
animationDuration: 4000,
},
],
});
});
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/AnalysisPie.vue deleted 100644 → 0
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props';
const m2R2Data = [
{ value: 335, name: '移动设备', itemStyle: { color: '#1b65b9' } },
{ value: 310, name: '网页端', itemStyle: { color: '#3ca0f6' } },
{ value: 234, name: '手表', itemStyle: { color: '#2dc0c0' } },
{ value: 234, name: '其他', itemStyle: { color: '#7dd9b9' } },
];
export default defineComponent({
props: basicProps,
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
setOptions({
title: [
{
text: '总设备',
subtext: '1,430',
textStyle: {
fontSize: 12,
color: '#4B535E85',
},
subtextStyle: {
fontSize: 24,
color: 'black',
},
textAlign: 'center',
left: '34.5%',
top: '40%',
},
],
tooltip: {
trigger: 'item',
},
legend: {
itemHeight: 10,
type: 'scroll',
orient: 'vertical',
left: '70%',
align: 'left',
top: 'middle',
textStyle: {
color: '#8C8C8C',
},
height: 250,
},
series: [
{
name: '成交额',
type: 'pie',
center: ['35%', '50%'],
radius: ['45%', '65%'],
label: {
show: false,
},
data: m2R2Data,
animationDuration: 3000,
},
],
});
});
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/FlowAnalysis.tsx deleted 100644 → 0
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 (
<Row>
{() => (
<>
<Col md={24} lg={8}>
{() => (
<CollapseContainer
title="整体流量评分"
canExpan={false}
class={`${prefixCls}__left`}
>
{() => (
<div>
<div class={`${prefixCls}__score`}>
86.2<span>分</span>
</div>
<div class={`${prefixCls}__rank`}>
排名<span>前20%</span>
</div>
<Progress percent={70} showInfo={false} status="active" />
<Divider />
<ul class={`${prefixCls}__rs`}>
<li>
<span>平均分</span>
<span>77.5</span>
</li>
<li>
<span>最高分</span>
<span>99.5</span>
</li>
<li>
<span>最低分</span>
<span>56.5</span>
</li>
</ul>
</div>
)}
</CollapseContainer>
)}
</Col>
<Col md={24} lg={16}>
{() => (
<CollapseContainer title="整体流量趋势" canExpan={false}>
{() => <TrendLine />}
</CollapseContainer>
)}
</Col>
</>
)}
</Row>
);
};
return () => (
<Tabs class={prefixCls} default-active-key="1">
{() => [
<Tabs.TabPane key="1" tab="产品一">
{() => renderContent()}
</Tabs.TabPane>,
<Tabs.TabPane key="2" tab="产品二">
{() => renderContent()}
</Tabs.TabPane>,
<Tabs.TabPane key="3" tab="产品三">
{() => renderContent()}
</Tabs.TabPane>,
]}
</Tabs>
);
},
});
src/views/dashboard/analysis/components/GrowCard.vue
<template>
<div class="grow-card">
<div class="grow-card-header">
<div class="grow-card__info">
<p class="grow-card__title">
{{ info.title }}
</p>
<CountTo prefix="$" :startVal="1" :endVal="info.price" />
</div>
<img :src="info.icon" />
</div>
<div class="grow-card-footer" :class="{ 'is-up': info.up }">
<Statistic :value="info.percent">
<template #prefix>
<img :src="info.up ? riseSvg : downSvg" />
<div class="md:flex">
<template v-for="(item, index) in growCardList" :key="item.title">
<Card
size="small"
:loading="$attrs.loading"
:title="item.title"
class="md:w-1/4 w-full md:mt-0 !mt-4"
:class="[index + 1 < 4 && '!md:mr-4']"
:canExpan="false"
>
<template #extra>
<Tag :color="item.color">{{ item.action }}</Tag>
</template>
</Statistic>
<span class="grow-card__mom">{{ info.mom }}</span>
</div>
<div class="py-4 px-4 flex justify-between">
<CountTo prefix="$" :startVal="1" :endVal="item.value" class="text-2xl" />
<Icon :icon="item.icon" :size="40" />
</div>
<div class="p-2 px-4 flex justify-between">
<span>总{{ item.title }}</span>
<CountTo prefix="$" :startVal="1" :endVal="item.total" />
</div>
</Card>
</template>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { Statistic } from 'ant-design-vue';
import { CountTo } from '/@/components/CountTo/index';
import { defineComponent } from 'vue';
import riseSvg from '/@/assets/svg/dashboard/analysis-rise.svg';
import downSvg from '/@/assets/svg/dashboard/analysis-down.svg';
import { GrowCardItem } from '../types';
import { CountTo } from '/@/components/CountTo/index';
import { Icon } from '/@/components/Icon';
import { Tag, Card } from 'ant-design-vue';
import { growCardList } from '../data';
export default defineComponent({
components: { Statistic, CountTo },
props: {
info: {
type: Object as PropType<GrowCardItem>,
default: null,
},
},
components: { CountTo, Tag, Card, Icon },
setup() {
return {
riseSvg,
downSvg,
};
return { growCardList };
},
});
</script>
<style lang="less">
.grow-card {
display: flex;
width: calc(100% - 12px);
height: 158px;
padding: 16px 16px 12px 16px;
// margin: 0 12px 12px 12px;
cursor: pointer;
background: @white;
border-radius: 4px;
box-shadow: 6px 6px 54px 0 rgba(0, 0, 0, 0.05);
flex-direction: column;
&:hover {
box-shadow: 6px 6px 54px 0 rgba(0, 0, 0, 0.1);
}
&-header {
display: flex;
width: 100%;
justify-content: space-between;
}
&__title {
font-family: PingFangSC-Regular;
font-size: 16px;
letter-spacing: 0;
color: @text-color-base;
opacity: 0.7;
}
&__info {
span {
font-family: NeoSans;
font-size: 26px;
line-height: 38px;
}
}
&-footer {
display: flex;
width: 100%;
margin-top: 24px;
align-items: center;
.ant-statistic-content-value {
color: @error-color;
}
.ant-statistic-content-prefix svg {
width: 0.98rem !important;
height: 0.98rem !important;
}
&.is-up {
.ant-statistic-content-value {
color: @success-color;
}
}
}
&__mom {
display: inline-block;
padding-left: 10px;
font-family: PingFangSC-Regular;
font-size: 12px;
line-height: 22px;
letter-spacing: 0;
color: #606060;
}
}
</style>
src/views/dashboard/analysis/components/SalesProductPie.vue 0 → 100644
<template>
<Card title="成交占比" :loading="loading">
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
components: { Card },
props: {
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
},
setup(props) {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
tooltip: {
trigger: 'item',
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '80%',
center: ['50%', '50%'],
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
data: [
{ value: 500, name: '电子产品' },
{ value: 310, name: '服装' },
{ value: 274, name: '化妆品' },
{ value: 400, name: '家居' },
].sort(function (a, b) {
return a.value - b.value;
}),
roseType: 'radius',
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 400;
},
},
],
});
},
{ immediate: true }
);
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/SiteAnalysis.vue 0 → 100644
<template>
<Card
:tab-list="tabListTitle"
v-bind="$attrs"
:active-tab-key="activeKey"
@tabChange="onTabChange"
>
<p v-if="activeKey === 'tab1'">
<VisitAnalysis />
</p>
<p v-if="activeKey === 'tab2'">
<VisitAnalysisBar />
</p>
</Card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Card } from 'ant-design-vue';
import VisitAnalysis from './VisitAnalysis.vue';
import VisitAnalysisBar from './VisitAnalysisBar.vue';
export default defineComponent({
components: { Card, VisitAnalysis, VisitAnalysisBar },
setup() {
const activeKey = ref('tab1');
const tabListTitle = [
{
key: 'tab1',
tab: '流量趋势',
},
{
key: 'tab2',
tab: '访问量',
},
];
function onTabChange(key) {
activeKey.value = key;
}
return { tabListTitle, activeKey, onTabChange };
},
});
</script>
src/views/dashboard/analysis/components/TaskCard.vue deleted 100644 → 0
<template>
<div :class="prefixCls">
<div :class="`${prefixCls}-header`">
<div :class="`${prefixCls}__info`">
<span :class="`${prefixCls}__title`">{{ info.title }}</span>
<span :class="`${prefixCls}__desc`">{{ info.desc }}</span>
</div>
<span :class="`${prefixCls}__tag ${info.status}`">{{ info.text }}</span>
</div>
<div :class="`${prefixCls}-body mt-5`">
<div :class="`${prefixCls}__process-nfo`">
<span>进度</span>
<span>{{ info.percent }}%</span>
</div>
<Progress :percent="info.percent" :showInfo="false" :status="info.status" />
</div>
<div :class="`${prefixCls}-footer`">
<span :class="`${prefixCls}__date`">
更新日期: <span>{{ info.updateTime }}</span>
</span>
<div :class="`${prefixCls}__avatar`">
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<Avatar>+3</Avatar>
</div>
</div>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import { Progress, Avatar } from 'ant-design-vue';
import { TaskItem } from '../types';
export default defineComponent({
name: 'GrowCard',
components: { Progress, Avatar },
props: {
info: {
type: Object as PropType<TaskItem>,
default: null,
},
},
setup(props) {
return {
prefixCls: 'task-card',
text: computed(() => {
const { status } = props.info || {};
return status === 'active'
? '进度正常'
: status === 'exception'
? '进度滞后'
: '项目完成';
}),
};
},
});
</script>
<style lang="less" scoped>
.task-card {
display: flex;
width: calc(100% - 24px);
height: 199px;
padding: 24px 20px 12px 16px;
margin: 0 12px 12px 12px;
background: #fff;
border: 1px solid #ececf2;
border-radius: 12px;
flex-direction: column;
&-header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
&__tag {
display: inline-block;
padding: 4px 6px;
font-family: PingFangSC-Regular;
font-size: 12px;
border-radius: 6px;
&.success {
color: #55d187;
background: rgba(85, 209, 135, 0.16);
}
&.warn {
color: #ffa07d;
background: #ffd16416;
}
&.done {
color: #0593ff;
background: #0593ff16;
}
}
&__info {
display: flex;
flex-direction: column;
}
&__title {
font-family: PingFangSC-Medium;
font-size: 16px;
line-height: 24px;
color: rgba(0, 0, 0, 0.85);
}
&__desc {
font-family: PingFangSC-Regular;
font-size: 12px;
line-height: 21px;
color: #8181a5;
}
&__process-nfo {
display: flex;
justify-content: space-between;
span {
font-size: 14px;
line-height: 21px;
color: #8181a5;
}
}
&-footer {
display: flex;
width: 100%;
margin-top: 16px;
align-items: center;
justify-content: space-between;
}
&__date {
font-size: 12px;
line-height: 21px;
color: #2c3a61;
span {
color: #7c8087;
}
}
&__avatar {
display: flex;
}
}
</style>
src/views/dashboard/analysis/components/TrendLine.vue deleted 100644 → 0
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props';
export default defineComponent({
props: basicProps,
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
setOptions({
tooltip: {
trigger: 'axis',
padding: 3,
borderColor: '#777',
borderWidth: 1,
},
legend: {
show: false,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
inside: true,
},
data: [
'一月',
'二月',
'三月',
'四月',
'五月',
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'十二月',
],
},
yAxis: {
type: 'value',
axisTick: {
inside: true,
},
},
series: [
{
name: '产品一',
type: 'line',
itemStyle: {
color: '#5B8FF9',
},
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#5B8FF9',
},
{
offset: 1,
color: 'rgba(118,168,248, 0)',
},
],
false
),
shadowColor: 'rgba(118,168,248, 0.9)',
shadowBlur: 20,
},
data: [134, 330, 132, 101, 90, 230, 210, 150, 230, 400, 232, 234],
animationDuration: 3000,
},
],
});
});
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/VisitAnalysis.vue 0 → 100644
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props';
export default defineComponent({
props: basicProps,
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
setOptions({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'6:00',
'7:00',
'8:00',
'9:00',
'10:00',
'11:00',
'12:00',
'13:00',
'14:00',
'15:00',
'16:00',
'17:00',
'18:00',
'19:00',
'20:00',
'21:00',
'22:00',
'23:00',
],
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: 'rgba(226,226,226,0.5)',
},
},
axisTick: {
show: false,
},
},
yAxis: [
{
type: 'value',
max: 80000,
splitNumber: 4,
axisTick: {
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
},
},
},
],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: true,
data: [
111,
222,
4000,
18000,
33333,
55555,
66666,
33333,
14000,
36000,
66666,
44444,
22222,
11111,
4000,
2000,
500,
333,
222,
111,
],
type: 'line',
areaStyle: {},
itemStyle: {
color: '#5ab1ef',
},
},
{
smooth: true,
data: [
33,
66,
88,
333,
3333,
5000,
18000,
3000,
1200,
13000,
22000,
11000,
2221,
1201,
390,
198,
60,
30,
22,
11,
],
type: 'line',
areaStyle: {},
itemStyle: {
color: '#019680',
},
},
],
});
});
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/VisitAnalysisBar.vue 0 → 100644
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props';
export default defineComponent({
props: basicProps,
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
setOptions({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
xAxis: {
type: 'category',
data: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
],
},
yAxis: {
type: 'value',
max: 8000,
splitNumber: 4,
},
series: [
{
data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
type: 'bar',
barMaxWidth: 80,
},
],
});
});
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/VisitRadar.vue 0 → 100644
<template>
<Card title="转化率" :loading="loading">
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
components: { Card },
props: {
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
},
setup(props) {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
backgroundColor: '#fff',
legend: {
bottom: 0,
data: ['访问', '购买'],
},
tooltip: {},
radar: {
radius: '60%',
splitNumber: 8,
indicator: [
{
text: '电脑',
max: 100,
},
{
text: '充电器',
max: 100,
},
{
text: '耳机',
max: 100,
},
{
text: '手机',
max: 100,
},
{
text: 'Ipad',
max: 100,
},
{
text: '耳机',
max: 100,
},
],
},
series: [
{
type: 'radar',
symbolSize: 0,
areaStyle: {
shadowBlur: 0,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
data: [
{
value: [90, 50, 86, 40, 50, 20],
name: '访问',
itemStyle: {
color: '#b6a2de',
},
},
{
value: [70, 75, 70, 76, 20, 85],
name: '购买',
itemStyle: {
color: '#5ab1ef',
},
},
],
},
],
});
},
{ immediate: true }
);
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/VisitSource.vue 0 → 100644
<template>
<Card title="访问来源" :loading="loading">
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
components: { Card },
props: {
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
},
setup(props) {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
tooltip: {
trigger: 'item',
},
legend: {
bottom: '1%',
left: 'center',
},
series: [
{
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
},
],
});
},
{ immediate: true }
);
return { chartRef };
},
});
</script>
src/views/dashboard/analysis/components/flow-ana.less deleted 100644 → 0
.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;
}
}
}
}
}
src/views/dashboard/analysis/data.ts 0 → 100644
export interface GrowCardItem {
icon: string;
title: string;
value: number;
total: number;
color: string;
action: string;
}
export const growCardList: GrowCardItem[] = [
{
title: '访问数',
icon: 'visit-count|svg',
value: 2000,
total: 120000,
color: 'green',
action: '月',
},
{
title: '成交额',
icon: 'total-sales|svg',
value: 20000,
total: 500000,
color: 'blue',
action: '月',
},
{
title: '下载数',
icon: 'download-count|svg',
value: 8000,
total: 120000,
color: 'orange',
action: '周',
},
{
title: '成交数',
icon: 'transaction|svg',
value: 5000,
total: 50000,
color: 'purple',
action: '年',
},
];
src/views/dashboard/analysis/data.tsx deleted 100644 → 0
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,
];
src/views/dashboard/analysis/index.vue
<template>
<div class="p-4 analysis">
<a-row class="pl-2">
<template v-for="item in growCardList" :key="item.title">
<a-col :sm="24" :md="12" :lg="6">
<GrowCard :info="item" />
</a-col>
</template>
</a-row>
<div class="p-4">
<GrowCard :loading="loading" class="enter-y" />
<SiteAnalysis class="!my-4 enter-y" :loading="loading" />
<a-row>
<a-col :md="24" :lg="17" class="my-3">
<CollapseContainer class="mr-3" title="产品成交额" :canExpan="false">
<AnalysisLine />
</CollapseContainer>
<a-row class="mt-3">
<a-col :md="24" :lg="12" class="product-total">
<CollapseContainer class="mr-3" title="产品成交额" :canExpan="false">
<AnalysisPie />
</CollapseContainer>
</a-col>
<a-col :md="24" :lg="12">
<CollapseContainer class="mr-3" title="用户来源" :canExpan="false">
<AnalysisBar />
</CollapseContainer>
</a-col>
</a-row>
</a-col>
<a-col :md="24" :lg="7">
<CollapseContainer class="mt-3" title="项目进度" :canExpan="false">
<template v-for="item in taskList" :key="item.title">
<TaskCard :info="item" />
</template>
</CollapseContainer>
</a-col>
</a-row>
<a-row>
<FlowAnalysis />
</a-row>
<div class="md:flex enter-y">
<VisitRadar class="md:w-1/3 w-full" :loading="loading" />
<VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
<SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, ref } from 'vue';
import GrowCard from './components/GrowCard.vue';
import AnalysisLine from './components/AnalysisLine.vue';
import AnalysisPie from './components/AnalysisPie.vue';
import AnalysisBar from './components/AnalysisBar.vue';
import TaskCard from './components/TaskCard.vue';
import FlowAnalysis from './components/FlowAnalysis';
import { CollapseContainer } from '/@/components/Container/index';
import { Row, Col } from 'ant-design-vue';
import { growCardList, taskList } from './data';
import SiteAnalysis from './components/SiteAnalysis.vue';
import VisitSource from './components/VisitSource.vue';
import VisitRadar from './components/VisitRadar.vue';
import SalesProductPie from './components/SalesProductPie.vue';
export default defineComponent({
components: {
GrowCard,
CollapseContainer,
AnalysisLine,
AnalysisPie,
AnalysisBar,
TaskCard,
FlowAnalysis,
[Row.name]: Row,
[Col.name]: Col,
SiteAnalysis,
VisitRadar,
VisitSource,
SalesProductPie,
},
setup() {
return { growCardList, taskList };
const loading = ref(true);
setTimeout(() => {
loading.value = false;
}, 1500);
return { loading };
},
});
</script>
<style lang="less" scoped>
.analysis {
width: 100%;
}
</style>
src/views/dashboard/analysis/types.ts deleted 100644 → 0
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;
}
src/views/dashboard/house/index.vue deleted 100644 → 0
<template>
<div class="house-wrap">
<div class="house">
<div class="floor"></div>
<div class="wall">
<div class="window"></div>
<div class="door">
<div class="door__square"></div>
<div class="door__line"></div>
<div class="door__square"></div>
</div>
<div class="window"></div>
</div>
<div class="top"></div>
<div class="circle"></div>
<div class="plastic">
<div class="plastic__g">
<div class="plastic__item"></div>
<div class="plastic__item"></div>
<div class="plastic__item"></div>
<div class="plastic__item"></div>
<div class="plastic__item"></div>
<div class="plastic__item"></div>
<div class="plastic__item"></div>
<div class="plastic__item"></div>
</div>
</div>
<div class="line">
<div class="line__item"></div>
<div class="line__item"></div>
<div class="line__item"></div>
<div class="line__item"></div>
<div class="line__item"></div>
<div class="line__item"></div>
<div class="line__item"></div>
<div class="line__item"></div>
<div class="line__item"></div>
</div>
</div>
<div class="clouds">
<div class="cloud">
<div class="cloud__item"></div>
<div class="cloud__item"></div>
</div>
<div class="cloud">
<div class="cloud__item"></div>
<div class="cloud__item"></div>
</div>
<div class="cloud">
<div class="cloud__item"></div>
<div class="cloud__item"></div>
</div>
<div class="bird"></div>
</div>
<div class="birds">
<div class="bird"></div>
<div class="bird"></div>
</div>
<div class="tree">
<div class="tree__item"></div>
<div class="tree__item"></div>
<div class="tree__item"></div>
</div>
<div class="bush">
<div class="bush__item"></div>
<div class="bush__item"></div>
</div>
<div class="dot"></div>
</div>
</template>
<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'House',
props: {
size: {
type: Number as PropType<number>,
default: 600,
},
},
setup() {
return {};
},
});
</script>
<style lang="less" scoped>
@import './index.less';
</style>
src/views/dashboard/welcome/index.vue deleted 100644 → 0
<template>
<div class="welcome">
<House />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import House from '../house/index.vue';
export default defineComponent({
name: 'Welcome',
components: { House },
});
</script>
<style lang="less" scoped>
.welcome {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
</style>
src/views/dashboard/workbench/components/DynamicInfo.vue 0 → 100644
<template>
<Card title="最新动态" v-bind="$attrs">
<template #extra>
<a-button type="link" size="small">更多</a-button>
</template>
<List item-layout="horizontal" :data-source="items">
<template #renderItem="{ item }">
<ListItem>
<ListItemMeta>
<template #description>
{{ item.date }}
</template>
<template #title> {{ item.name }} <span v-html="item.desc"> </span> </template>
<template #avatar>
<Icon :icon="item.avatar" :size="30" />
</template>
</ListItemMeta>
</ListItem>
</template>
</List>
</Card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Card, List } from 'ant-design-vue';
import { dynamicInfoItems } from './data';
import headerImg from '/@/assets/images/header.jpg';
import { Icon } from '/@/components/Icon';
export default defineComponent({
components: { Card, List, ListItem: List.Item, ListItemMeta: List.Item.Meta, Icon },
setup() {
return { items: dynamicInfoItems, headerImg };
},
});
</script>
src/views/dashboard/workbench/components/NewsList.vue deleted 100644 → 0
<template>
<CollapseContainer class="news-list" title="动态" :canExpan="false">
<ScrollContainer>
<List>
<template v-for="item in newList" :key="item.id">
<ListItem class="news-list__item">
<ListItemMeta>
<template #avatar>
<img :src="headerImg" class="news-list__item-avatar" />
</template>
<template #description>
<div class="news-list__item-desc">
<div class="news-list__item-time mb-1">
{{ item.sendTime }}
</div>
<div class="news-list__item-title mb-1">
<span class="news-list__item-light">{{ item.sender }}&nbsp;</span>申请迭代
<span class="news-list__item-light">&nbsp;{{ item.title }}&nbsp;</span>发布
</div>
<div class="news-list__item-cnte p-2">
<span class="news-list__item-cnte__title"> {{ item.cnteId }}</span>
<br />
Status: {{ item.cnteStas }}
<br />
Repository: {{ item.cnteRepo }}
<br />
</div>
</div>
</template>
</ListItemMeta>
</ListItem>
</template>
</List>
</ScrollContainer>
</CollapseContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { List } from 'ant-design-vue';
import { CollapseContainer, ScrollContainer } from '/@/components/Container/index';
import headerImg from '/@/assets/images/header.jpg';
import { newList } from '../data';
export default defineComponent({
components: {
List,
ListItem: List.Item,
ListItemMeta: List.Item.Meta,
CollapseContainer,
ScrollContainer,
},
setup() {
return { newList, headerImg };
},
});
</script>
<style lang="less" scoped>
.news-list {
&__item {
&-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
}
&-title {
font-size: 14px;
line-height: 22px;
color: #000;
opacity: 0.65;
}
&-time {
font-size: 14px;
line-height: 22px;
color: #000;
opacity: 0.45;
}
&-light {
font-size: 14px;
line-height: 22px;
color: #000;
opacity: 0.85;
}
&-cnte {
background: #eef3fb;
border-radius: 2px;
opacity: 0.6;
&__title {
font-size: 14px;
line-height: 22px;
color: rgba(0, 0, 0, 0.85);
}
}
}
}
</style>
src/views/dashboard/workbench/components/ProdTotal.vue deleted 100644 → 0
<template>
<a-row class="prod-total">
<template v-for="(item, index) in wokbProd" :key="item.type">
<a-col :xs="12" :sm="6" class="prod-total__item" :class="`prod-total__item-${index}`">
<div class="img" :class="`prod-total__item-${index}-img`"></div>
<div>{{ item.amount }}</div>
<span>{{ item.type }}</span>
</a-col>
</template>
</a-row>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Row, Col } from 'ant-design-vue';
import { wokbProd } from '../data';
// import {ProdTypeEnum} from '@/api/dashboard/model/wokbModel'
export default defineComponent({
components: { [Row.name]: Row, [Col.name]: Col },
setup() {
return { wokbProd };
},
});
</script>
<style lang="less" scoped>
.prod-total {
padding: 12px 4px 12px 12px;
background: #fff;
&__item {
display: inline-block;
flex: 0 0 calc(25% - 8px);
padding: 20px 10px;
margin-right: 8px;
border-radius: 4px;
span {
font-size: 14px;
line-height: 28px;
}
div {
font-size: 26px;
}
.img {
float: left;
width: 62px;
height: 62px;
}
&-0 {
background: rgba(254, 97, 178, 0.1);
&-img {
background: url(../../../../assets/images/dashboard/wokb/datashow1.png) no-repeat;
}
div {
color: #fe61b2;
}
}
&-1 {
background: rgba(254, 163, 64, 0.1);
&-img {
background: url(../../../..//assets/images/dashboard/wokb/datashow2.png) no-repeat;
}
div {
color: #fea340;
}
}
&-2 {
background: rgba(172, 70, 255, 0.1);
&-img {
background: url(../../../..//assets/images/dashboard/wokb/datashow3.png) no-repeat;
}
div {
color: #9e55ff;
}
}
&-3 {
background: rgba(0, 196, 186, 0.1);
&-img {
background: url(../../../..//assets/images/dashboard/wokb/datashow4.png) no-repeat;
}
div {
color: #00c4ba;
}
}
}
}
</style>
src/views/dashboard/workbench/components/ProjectCard.vue 0 → 100644
<template>
<Card title="项目" v-bind="$attrs">
<template #extra>
<a-button type="link" size="small">更多</a-button>
</template>
<template v-for="item in items" :key="item">
<CardGrid class="!md:w-1/3 !w-full">
<span class="flex">
<Icon :icon="item.icon" :color="item.color" size="30" />
<span class="text-lg ml-4">{{ item.title }}</span>
</span>
<div class="flex mt-2 h-10 text-secondary"> {{ item.desc }} </div>
<div class="flex justify-between text-secondary">
<span>{{ item.group }}</span>
<span>{{ item.date }}</span>
</div>
</CardGrid>
</template>
</Card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Card } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { groupItems } from './data';
export default defineComponent({
components: { Card, CardGrid: Card.Grid, Icon },
setup() {
return { items: groupItems };
},
});
</script>
src/views/dashboard/workbench/components/QuickNav.vue 0 → 100644
<template>
<Card title="快捷导航" v-bind="$attrs">
<template v-for="item in items" :key="item">
<CardGrid>
<span class="flex flex-col items-center">
<Icon :icon="item.icon" :color="item.color" size="20" />
<span class="text-md mt-2">{{ item.title }}</span>
</span>
</CardGrid>
</template>
</Card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Card } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { navItems } from './data';
export default defineComponent({
components: { Card, CardGrid: Card.Grid, Icon },
setup() {
return { items: navItems };
},
});
</script>
src/views/dashboard/workbench/components/SaleRadar.vue 0 → 100644
<template>
<Card title="销售统计" :loading="loading">
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
components: { Card },
props: {
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '400px',
},
},
setup(props) {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
backgroundColor: '#fff',
legend: {
bottom: 0,
data: ['Visits', 'Sales'],
},
tooltip: {},
radar: {
radius: '60%',
splitNumber: 8,
indicator: [
{
text: '2017',
max: 100,
},
{
text: '2017',
max: 100,
},
{
text: '2018',
max: 100,
},
{
text: '2019',
max: 100,
},
{
text: '2020',
max: 100,
},
{
text: '2021',
max: 100,
},
],
},
series: [
{
type: 'radar',
symbolSize: 0,
areaStyle: {
shadowBlur: 0,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
data: [
{
value: [90, 50, 86, 40, 50, 20],
name: 'Visits',
itemStyle: {
color: '#b6a2de',
},
},
{
value: [70, 75, 70, 76, 20, 85],
name: 'Sales',
itemStyle: {
color: '#67e0e3',
},
},
],
},
],
});
},
{ immediate: true }
);
return { chartRef };
},
});
</script>
src/views/dashboard/workbench/components/ShortCuts.vue deleted 100644 → 0
<template>
<CollapseContainer class="shortcuts" title="快捷入口" :canExpan="false">
<template #action>
<a-button size="small" type="link"> 新建 </a-button>
</template>
<a-row>
<template v-for="item in shortCuts" :key="item.img">
<a-col :span="8" class="p-3 shortcuts__item">
<img :src="item.img" class="mb-2 shortcuts__item-img" />
<span>{{ item.name }}</span>
</a-col>
</template>
<a-col :span="8" class="p-3 shortcuts__item">
<span class="mb-2 shortcuts__item-all">
<RightOutlined />
</span>
<br />
<span>查看全部</span>
</a-col>
</a-row>
</CollapseContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Row, Col } from 'ant-design-vue';
import { CollapseContainer } from '/@/components/Container/index';
import { RightOutlined } from '@ant-design/icons-vue';
import wokbImg1 from '/@/assets/images/dashboard/wokb/attendance.png';
import wokbImg2 from '/@/assets/images/dashboard/wokb/overtime.png';
import wokbImg3 from '/@/assets/images/dashboard/wokb/meal.png';
import wokbImg4 from '/@/assets/images/dashboard/wokb/leave.png';
import wokbImg5 from '/@/assets/images/dashboard/wokb/stamp.png';
import wokbImg6 from '/@/assets/images/dashboard/wokb/travel.png';
import wokbImg7 from '/@/assets/images/dashboard/wokb/performance.png';
import wokbImg8 from '/@/assets/images/dashboard/wokb/approve.png';
const shortCuts = [
{
img: wokbImg1,
name: '考勤记录',
},
{
img: wokbImg2,
name: '加班申请',
},
{
img: wokbImg3,
name: '餐补申请',
},
{
img: wokbImg4,
name: '请假',
},
{
img: wokbImg5,
name: '用章申请',
},
{
img: wokbImg6,
name: '差旅报销',
},
{
img: wokbImg7,
name: '绩效申请',
},
{
img: wokbImg8,
name: '审批',
},
];
export default defineComponent({
components: { [Row.name]: Row, [Col.name]: Col, CollapseContainer, RightOutlined },
setup() {
return { shortCuts };
},
});
</script>
<style lang="less" scoped>
.shortcuts {
&__item {
text-align: center;
&-img {
width: 36px;
margin-left: auto;
margin-right: auto;
}
&-all {
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
color: #000;
cursor: pointer;
background: lightgrey;
border-radius: 50%;
}
}
}
</style>
src/views/dashboard/workbench/components/TodoList.vue deleted 100644 → 0
<template>
<CollapseContainer class="todo-list" title="待办事项" :canExpan="false">
<template #title>
<span> 待办事项 <span class="todo-list__total">30</span> </span>
</template>
<List>
<template v-for="item in todoList" :key="item.id">
<ListItem class="todo-list__item">
<ListItemMeta>
<template #title>
<div>
<span class="todo-list__item-title">{{ item.title }}</span>
<span class="todo-list__item-memo">{{ item.memo }}</span>
</div>
</template>
<template #description>
<div class="todo-list__item-desc">
提交人：{{ item.sbmter }}
<br />
提交时间：{{ item.sbmtTime }}
</div>
</template>
</ListItemMeta>
<a-button type="link">
<Tag color="blue"> 待审批 </Tag>
</a-button>
</ListItem>
</template>
</List>
<div class="todo-list__all">
<Tooltip placement="topRight">
<template #title> 查看更多 </template>
<EllipsisOutlined />
</Tooltip>
</div>
</CollapseContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { List, Tag, Tooltip } from 'ant-design-vue';
import { CollapseContainer } from '/@/components/Container/index';
import { EllipsisOutlined } from '@ant-design/icons-vue';
import { todoList } from '../data';
export default defineComponent({
name: 'TodoList',
components: {
CollapseContainer,
List,
ListItem: List.Item,
ListItemMeta: List.Item.Meta,
Tag,
Tooltip,
EllipsisOutlined,
},
setup() {
return { todoList };
},
});
</script>
<style lang="less" scoped>
.todo-list {
position: relative;
&__total {
display: inline-block;
width: 20px;
height: 20px;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background: rgba(255, 0, 0, 0.7);
border-radius: 50%;
}
&__all {
position: absolute;
top: 0;
right: 10px;
height: 56px;
font-size: 24px;
line-height: 56px;
text-align: center;
cursor: pointer;
}
&__item {
padding: 8px;
&-title {
font-size: 14px;
font-weight: normal;
line-height: 22px;
color: #1c1d21;
}
&-memo {
font-size: 12px;
font-weight: normal;
line-height: 22px;
color: #7c8087;
}
&-desc {
font-size: 12px;
line-height: 22px;
color: #7c8087;
}
}
}
</style>
src/views/dashboard/workbench/components/WorkbenchHeader.vue 0 → 100644
<template>
<div class="lg:flex">
<Avatar :src="headerImg" :size="72" class="!mx-auto !block" />
<div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
<h1 class="md:text-lg text-md">早安, Vben, 开始您一天的工作吧！</h1>
<span class="text-secondary"> 今日晴，20℃ - 32℃！ </span>
</div>
<div class="flex flex-1 justify-end md:mt-0 mt-4">
<div class="flex flex-col justify-center text-right">
<span class="text-secondary"> 待办 </span>
<span class="text-2xl">2/10</span>
</div>
<div class="flex flex-col justify-center text-right md:mx-16 mx-12">
<span class="text-secondary"> 项目 </span>
<span class="text-2xl">8</span>
</div>
<div class="flex flex-col justify-center text-right md:mr-10 mr-4">
<span class="text-secondary"> 团队 </span>
<span class="text-2xl">300</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Avatar } from 'ant-design-vue';
import headerImg from '/@/assets/images/header.jpg';
export default defineComponent({
components: { Avatar },
setup() {
return { headerImg };
},
});
</script>
src/views/dashboard/workbench/components/data.ts 0 → 100644
interface GroupItem {
title: string;
icon: string;
color: string;
desc: string;
date: string;
group: string;
}
interface NavItem {
title: string;
icon: string;
color: string;
}
interface DynamicInfoItem {
avatar: string;
name: string;
date: string;
desc: string;
}
export const navItems: NavItem[] = [
{
title: '首页',
icon: 'ion:home-outline',
color: '#1fdaca',
},
{
title: '仪表盘',
icon: 'ion:grid-outline',
color: '#bf0c2c',
},
{
title: '组件',
icon: 'ion:layers-outline',
color: '#e18525',
},
{
title: '系统管理',
icon: 'ion:settings-outline',
color: '#3fb27f',
},
{
title: '权限管理',
icon: 'ion:key-outline',
color: '#4daf1bc9',
},
{
title: '图表',
icon: 'ion:bar-chart-outline',
color: '#00d8ff',
},
];
export const dynamicInfoItems: DynamicInfoItem[] = [
{
avatar: 'dynamic-avatar-1|svg',
name: '威廉',
date: '刚刚',
desc: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
},
{
avatar: 'dynamic-avatar-2|svg',
name: '艾文',
date: '1个小时前',
desc: `关注了 <a>威廉</a> `,
},
{
avatar: 'dynamic-avatar-3|svg',
name: '克里斯',
date: '1天前',
desc: `发布了 <a>个人动态</a> `,
},
{
avatar: 'dynamic-avatar-4|svg',
name: 'Vben',
date: '2天前',
desc: `发表文章 <a>如何编写一个Vite插件</a> `,
},
{
avatar: 'dynamic-avatar-5|svg',
name: '皮特',
date: '3天前',
desc: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
},
{
avatar: 'dynamic-avatar-6|svg',
name: '杰克',
date: '1周前',
desc: `关闭了问题 <a>如何运行项目</a> `,
},
{
avatar: 'dynamic-avatar-1|svg',
name: '威廉',
date: '1周前',
desc: `发布了 <a>个人动态</a> `,
},
{
avatar: 'dynamic-avatar-1|svg',
name: '威廉',
date: '2021-04-01 20:00',
desc: `推送了代码到 <a>Github</a>`,
},
];
export const groupItems: GroupItem[] = [
{
title: 'Github',
icon: 'carbon:logo-github',
color: '',
desc: '不要等待机会，而要创造机会。',
group: '开源组',
date: '2021-04-01',
},
{
title: 'Vue',
icon: 'ion:logo-vue',
color: '#3fb27f',
desc: '现在的你决定将来的你。',
group: '算法组',
date: '2021-04-01',
},
{
title: 'Html5',
icon: 'ion:logo-html5',
color: '#e18525',
desc: '没有什么才能比努力更重要。',
group: '上班摸鱼',
date: '2021-04-01',
},
{
title: 'Angular',
icon: 'ion:logo-angular',
color: '#bf0c2c',
desc: '热情和欲望可以突破一切难关。',
group: 'UI',
date: '2021-04-01',
},
{
title: 'React',
icon: 'bx:bxl-react',
color: '#00d8ff',
desc: '健康的身体是实目标的基石。',
group: '技术牛',
date: '2021-04-01',
},
{
title: 'Js',
icon: 'ion:logo-javascript',
color: '#4daf1bc9',
desc: '路是走出来的，而不是空想出来的。',
group: '架构组',
date: '2021-04-01',
},
];
src/views/dashboard/workbench/data.ts deleted 100644 → 0
export const wokbProd = [
{
amount: '20',
type: '成品总数',
},
{
amount: '50',
type: '未发布',
},
{
amount: '80',
type: '发布中',
},
{
amount: '100',
type: '异常',
},
];
export const todoList = (() => {
const ret: any[] = [];
for (let index = 0; index < 3; index++) {
ret.push({
id: index,
sbmter: '张三',
sbmtTime: new Date().toLocaleString(),
title: '主要',
memo: '工作任务',
});
}
return ret;
})();
export const newList = (() => {
const ret: any[] = [];
for (let index = 0; index < 3; index++) {
ret.push({
id: index,
sender: '李四',
sendTime: new Date().toLocaleString(),
title: '代码',
memo: '工作任务',
cnteId: `c${index}`,
cnteStas: 'opened',
cnteRepo: index,
});
}
return ret;
})();
src/views/dashboard/workbench/index.vue
<template>
<a-row class="workbench p-4" :gutter="12">
<a-col :md="24" :lg="17">
<ProdTotal class="mb-3" />
<TodoList class="mb-3" />
<NewsList class="mb-3" />
</a-col>
<a-col :md="24" :lg="7">
<img src="/@/assets/images/dashboard/wokb/wokb.png" class="workbench__wokb-img mb-3" />
<ShortCuts class="mb-3" />
<Week class="mb-3" />
</a-col>
</a-row>
<PageWrapper>
<template #headerContent> <WorkbenchHeader /> </template>
<div class="lg:flex">
<div class="lg:w-7/10 w-full !mr-4 enter-y">
<ProjectCard :loading="loading" class="enter-y" />
<DynamicInfo :loading="loading" class="!my-4 enter-y" />
</div>
<div class="lg:w-3/10 w-full enter-y">
<QuickNav :loading="loading" class="enter-y" />
<Card class="!my-4 enter-y" :loading="loading">
<img class="xl:h-50 h-30 mx-auto" src="../../../assets/svg/illustration.svg" />
</Card>
<SaleRadar :loading="loading" class="enter-y" />
</div>
</div>
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import ProdTotal from './components/ProdTotal.vue';
import TodoList from './components/TodoList.vue';
import Week from './components/Week.vue';
import NewsList from './components/NewsList.vue';
import ShortCuts from './components/ShortCuts.vue';
import { Row, Col } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import { Card } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page';
import WorkbenchHeader from './components/WorkbenchHeader.vue';
import ProjectCard from './components/ProjectCard.vue';
import QuickNav from './components/QuickNav.vue';
import DynamicInfo from './components/DynamicInfo.vue';
import SaleRadar from './components/SaleRadar.vue';
export default defineComponent({
components: {
ProdTotal,
TodoList,
Week,
ShortCuts,
NewsList,
[Row.name]: Row,
[Col.name]: Col,
PageWrapper,
WorkbenchHeader,
ProjectCard,
QuickNav,
DynamicInfo,
SaleRadar,
Card,
},
setup() {
return {};
const loading = ref(true);
setTimeout(() => {
loading.value = false;
}, 1500);
return {
loading,
};
},
});
</script>
<style lang="less" scoped>
.workbench {
&__wokb-img {
width: 100%;
height: 240px;
}
}
</style>
src/views/demo/charts/SaleRadar.vue 0 → 100644
<template>
<Card title="销售统计" :loading="loading">
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, watch } from 'vue';
import { Card } from 'ant-design-vue';
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
components: { Card },
props: {
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '400px',
},
},
setup(props) {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
backgroundColor: '#fff',
legend: {
bottom: 0,
data: ['Visits', 'Sales'],
},
tooltip: {},
radar: {
radius: '60%',
splitNumber: 8,
indicator: [
{
text: '2017',
max: 100,
},
{
text: '2017',
max: 100,
},
{
text: '2018',
max: 100,
},
{
text: '2019',
max: 100,
},
{
text: '2020',
max: 100,
},
{
text: '2021',
max: 100,
},
],
},
series: [
{
type: 'radar',
symbolSize: 0,
areaStyle: {
shadowBlur: 0,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1,
},
data: [
{
value: [90, 50, 86, 40, 50, 20],
name: 'Visits',
itemStyle: {
color: '#9f8ed7',
},
},
{
value: [70, 75, 70, 76, 20, 85],
name: 'Sales',
itemStyle: {
color: '#1edec5',
},
},
],
},
],
});
},
{ immediate: true }
);
return { chartRef };
},
});
</script>
src/views/dashboard/workbench/components/Week.vue → src/views/demo/charts/apex/SaleRadar.vue
<template>
<CollapseContainer title="销售统计" :canExpan="false">
<div ref="chartRef" :style="{ width: '100%' }"></div>
</CollapseContainer>
<div ref="chartRef" :style="{ width: '100%' }"></div>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, onMounted } from 'vue';
import { CollapseContainer } from '/@/components/Container/index';
import { useApexCharts } from '/@/hooks/web/useApexCharts';
export default defineComponent({
components: { CollapseContainer },
setup() {
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useApexCharts(chartRef as Ref<HTMLDivElement>);
......@@ -20,59 +16,31 @@
{ name: 'Visits', data: [90, 50, 86, 40, 100, 20] },
{ name: 'Sales', data: [70, 75, 70, 76, 20, 85] },
],
dataLabels: {
style: {
colors: ['#b9c3cd', '#b9c3cd', '#b9c3cd', '#b9c3cd', '#b9c3cd', '#b9c3cd'],
},
},
chart: {
height: 350,
type: 'radar',
dropShadow: {
enabled: true,
blur: 1,
left: 1,
top: 1,
toolbar: {
show: false,
},
},
yaxis: {
show: false,
},
grid: {
show: false,
},
legend: { show: false },
title: {
show: false,
},
tooltip: {
x: { show: false },
},
markers: {
size: 0,
// size: 0,
},
xaxis: {
categories: ['2011', '2012', '2013', '2014', '2015', '2016'],
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
},
stroke: {
width: 0,
},
colors: ['#9f8ed7', '#1edec5'],
plotOptions: {
radar: {
polygons: {
strokeColors: [
'#e8e8e8',
'transparent',
'transparent',
'transparent',
'transparent',
'transparent',
],
connectorColors: 'transparent',
},
},
},
fill: {
type: 'gradient',
gradient: {
......
src/views/demo/charts/apex/index.vue
......@@ -12,6 +12,9 @@
<div class="demo-box">
<Mixed />
</div>
<div class="demo-box">
<SaleRadar />
</div>
</div>
</template>
<script>
......@@ -21,8 +24,9 @@
import Bar from './Bar.vue';
import Area from './Area.vue';
import Mixed from './Mixed.vue';
import SaleRadar from './SaleRadar.vue';
export default defineComponent({
components: { Line, Bar, Area, Mixed },
components: { Line, Bar, Area, Mixed, SaleRadar },
setup() {},
});
</script>
......
src/views/demo/comp/cropper/index.vue
<template>
<PageWrapper title="图片裁剪示例" contentBackground>
<CropperImage src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg"></CropperImage>
<CropperImage src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" />
</PageWrapper>
</template>
<script lang="ts">
......
src/views/demo/feat/icon/index.vue
......@@ -24,6 +24,9 @@
<CollapseContainer title="svg 雪碧图" class="my-5">
<div class="flex justify-around flex-wrap">
<SvgIcon name="test" size="32" />
<template v-for="item in 6" :key="item">
<SvgIcon :name="`dynamic-avatar-${item}`" size="32" />
</template>
</div>
</CollapseContainer>
......
src/views/demo/page/account/center/index.vue
......@@ -6,7 +6,7 @@
<a-col :span="8">
<div :class="`${prefixCls}-top__avatar`">
<img width="70" :src="headerImg" />
<span>Serati Ma</span>
<span>Vben</span>
<div>海纳百川，有容乃大</div>
</div>
</a-col>
......
vite.config.ts
......@@ -85,7 +85,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
'ant-design-vue/es/locale/en_US',
'moment/dist/locale/eu',
],
exclude: ['vue-demi', 'consolidate'],
exclude: ['vue-demi'],
},
};
};
windi.config.ts
......@@ -12,6 +12,7 @@ export default defineConfig({
colors: {
...colors,
primary: primaryColor,
secondary: 'rgba(0, 0, 0, 0.45)',
},
screens: {
sm: '576px',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论