From 959032b71f4b4fd5e3435fcf1405f1ccaa7f8423 Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期五, 21 十月 2022 16:45:54 +0800
Subject: [PATCH] feat: 增加左上角图表 优化整体框架
---
src/views/HomeView.vue | 9
src/views/setting.vue | 13 +
vite.config.ts | 9
package-lock.json | 375 ++++++++++++++++++++++++++++++++++
tsconfig.json | 2
components.d.ts | 16 +
src/components/item-wrap/item-wrap.vue | 80 ++++++
package.json | 3
src/views/index/left-top.vue | 120 ++++++++++
auto-imports.d.ts | 5
src/api/modules/index.ts | 3
src/mock/mock-index.ts | 20 +
12 files changed, 632 insertions(+), 23 deletions(-)
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
new file mode 100644
index 0000000..08908ed
--- /dev/null
+++ b/auto-imports.d.ts
@@ -0,0 +1,5 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+
+}
diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 0000000..fe6213f
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,16 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+ export interface GlobalComponents {
+ CountUp: typeof import('./src/components/count-up/count-up.vue')['default']
+ ItemWrap: typeof import('./src/components/item-wrap/item-wrap.vue')['default']
+ RouterLink: typeof import('vue-router')['RouterLink']
+ RouterView: typeof import('vue-router')['RouterView']
+ ScaleScreen: typeof import('./src/components/scale-screen/scale-screen.vue')['default']
+ }
+}
diff --git a/package-lock.json b/package-lock.json
index dbc4a43..436dd41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,10 +4,26 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
+ "@antfu/utils": {
+ "version": "0.5.2",
+ "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.5.2.tgz",
+ "integrity": "sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==",
+ "dev": true
+ },
"@babel/parser": {
"version": "7.19.4",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.4.tgz",
"integrity": "sha512-qpVT7gtuOLjWeDTKLkJ6sryqLliBaFpAtGeqw5cs5giLldvh+Ch0plqnUMKoVAUS6ZEueQQiZV+p5pxtPitEsA=="
+ },
+ "@ctrl/tinycolor": {
+ "version": "3.4.1",
+ "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
+ "integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
+ },
+ "@element-plus/icons-vue": {
+ "version": "2.0.10",
+ "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
+ "integrity": "sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ=="
},
"@esbuild/android-arm": {
"version": "0.15.10",
@@ -22,6 +38,19 @@
"integrity": "sha512-w0Ou3Z83LOYEkwaui2M8VwIp+nLi/NA60lBLMvaJ+vXVMcsARYdEzLNE7RSm4+lSg4zq4d7fAVuzk7PNQ5JFgg==",
"dev": true,
"optional": true
+ },
+ "@floating-ui/core": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.1.tgz",
+ "integrity": "sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA=="
+ },
+ "@floating-ui/dom": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.0.3.tgz",
+ "integrity": "sha512-6H1kwjkOZKabApNtXRiYHvMmYJToJ1DV7rQ3xc/WJpOABhQIOJJOdz2AOejj8X+gcybaFmBpisVTZxBZAM3V0w==",
+ "requires": {
+ "@floating-ui/core": "^1.0.1"
+ }
},
"@nodelib/fs.scandir": {
"version": "2.1.5",
@@ -49,6 +78,34 @@
"fastq": "^1.6.0"
}
},
+ "@popperjs/core": {
+ "version": "npm:@sxzz/popperjs-es@2.11.7",
+ "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+ "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+ },
+ "@rollup/pluginutils": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+ "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+ "dev": true,
+ "requires": {
+ "estree-walker": "^2.0.1",
+ "picomatch": "^2.2.2"
+ }
+ },
+ "@types/lodash": {
+ "version": "4.14.186",
+ "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.186.tgz",
+ "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw=="
+ },
+ "@types/lodash-es": {
+ "version": "4.17.6",
+ "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+ "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+ "requires": {
+ "@types/lodash": "*"
+ }
+ },
"@types/mockjs": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/@types/mockjs/-/mockjs-1.0.7.tgz",
@@ -60,6 +117,11 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.0.tgz",
"integrity": "sha512-u+h43R6U8xXDt2vzUaVP3VwjjLyOJk6uEciZS8OSyziUQGOwmk+l+4drxcsDboHXwyTaqS1INebghmWMRxq3LA==",
"dev": true
+ },
+ "@types/web-bluetooth": {
+ "version": "0.0.16",
+ "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+ "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
},
"@vitejs/plugin-vue": {
"version": "3.1.2",
@@ -317,6 +379,30 @@
"integrity": "sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==",
"dev": true
},
+ "@vueuse/core": {
+ "version": "9.3.1",
+ "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.3.1.tgz",
+ "integrity": "sha512-xriyD+v3D2ObH/UtnkEl+1sbcLBVHNaZaLi/rqoNEe/B92hggDEFQIGXoQUjdRzYOjASHSezf9uCDtmd7LeWyA==",
+ "requires": {
+ "@types/web-bluetooth": "^0.0.16",
+ "@vueuse/metadata": "9.3.1",
+ "@vueuse/shared": "9.3.1",
+ "vue-demi": "*"
+ }
+ },
+ "@vueuse/metadata": {
+ "version": "9.3.1",
+ "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.3.1.tgz",
+ "integrity": "sha512-G1BPhtx3OHaL/y4OZBofh6Xt02G1VA9PuOO8nac9sTKMkMqfyez5VfkF3D9GUjSRNO7cVWyH4rceeGXfr2wdMg=="
+ },
+ "@vueuse/shared": {
+ "version": "9.3.1",
+ "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.3.1.tgz",
+ "integrity": "sha512-YFu3qcnVeu0S2L4XdQJtBpDcjz6xwqHZtTv/XRhu66/yge1XVhxskUcc7VZbX52xF9A34V6KCfwncP9YDqYFiw==",
+ "requires": {
+ "vue-demi": "*"
+ }
+ },
"acorn": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -364,6 +450,11 @@
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
"dev": true
+ },
+ "async-validator": {
+ "version": "4.2.5",
+ "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+ "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
},
"asynckit": {
"version": "0.4.0",
@@ -560,6 +651,15 @@
"integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
"dev": true
},
+ "debug": {
+ "version": "4.3.4",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+ "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+ "dev": true,
+ "requires": {
+ "ms": "2.1.2"
+ }
+ },
"define-properties": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
@@ -618,6 +718,28 @@
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.282.tgz",
"integrity": "sha512-Dki0WhHNh/br/Xi1vAkueU5mtIc9XLHcMKB6tNfQKk+kPG0TEUjRh5QEMAUbRp30/rYNMFD1zKKvbVzwq/4wmg==",
"dev": true
+ },
+ "element-plus": {
+ "version": "2.2.18",
+ "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.18.tgz",
+ "integrity": "sha512-2pK2zmVOwP14eFl3rGoR+3BWJwDyO+DZCvzjQ8L6qjUR+hVKwFhgxIcSkKJatbcHFw5Xui6UyN20jV+gQP7mLg==",
+ "requires": {
+ "@ctrl/tinycolor": "^3.4.1",
+ "@element-plus/icons-vue": "^2.0.6",
+ "@floating-ui/dom": "^1.0.1",
+ "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+ "@types/lodash": "^4.14.182",
+ "@types/lodash-es": "^4.17.6",
+ "@vueuse/core": "^9.1.0",
+ "async-validator": "^4.2.5",
+ "dayjs": "^1.11.3",
+ "escape-html": "^1.0.3",
+ "lodash": "^4.17.21",
+ "lodash-es": "^4.17.21",
+ "lodash-unified": "^1.0.2",
+ "memoize-one": "^6.0.0",
+ "normalize-wheel-es": "^1.2.0"
+ }
},
"error-ex": {
"version": "1.3.2",
@@ -846,6 +968,11 @@
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
"dev": true
+ },
+ "escape-html": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+ "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
},
"escape-string-regexp": {
"version": "1.0.5",
@@ -1203,6 +1330,12 @@
"integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
"dev": true
},
+ "jsonc-parser": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+ "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+ "dev": true
+ },
"lilconfig": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
@@ -1221,6 +1354,27 @@
"strip-bom": "^3.0.0"
}
},
+ "local-pkg": {
+ "version": "0.4.2",
+ "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.2.tgz",
+ "integrity": "sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==",
+ "dev": true
+ },
+ "lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+ },
+ "lodash-es": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+ "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+ },
+ "lodash-unified": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.2.tgz",
+ "integrity": "sha512-OGbEy+1P+UT26CYi4opY4gebD8cWRDxAT6MAObIVQMiqYdxZr1g3QHWCToVsm31x2NkLS4K3+MC2qInaRMa39g=="
+ },
"magic-string": {
"version": "0.25.9",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -1228,6 +1382,11 @@
"requires": {
"sourcemap-codec": "^1.4.8"
}
+ },
+ "memoize-one": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+ "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
},
"memorystream": {
"version": "0.3.1",
@@ -1279,6 +1438,26 @@
"integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
"dev": true
},
+ "mlly": {
+ "version": "0.5.16",
+ "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.16.tgz",
+ "integrity": "sha512-LaJ8yuh4v0zEmge/g3c7jjFlhoCPfQn6RCjXgm9A0Qiuochq4BcuOxVfWmdnCoLTlg2MV+hqhOek+W2OhG0Lwg==",
+ "dev": true,
+ "requires": {
+ "acorn": "^8.8.0",
+ "pathe": "^0.3.8",
+ "pkg-types": "^0.3.5",
+ "ufo": "^0.8.5"
+ },
+ "dependencies": {
+ "acorn": {
+ "version": "8.8.0",
+ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+ "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+ "dev": true
+ }
+ }
+ },
"mockjs": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/mockjs/-/mockjs-1.1.0.tgz",
@@ -1286,6 +1465,12 @@
"requires": {
"commander": "*"
}
+ },
+ "ms": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+ "dev": true
},
"muggle-string": {
"version": "0.1.0",
@@ -1333,6 +1518,11 @@
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
"dev": true
+ },
+ "normalize-wheel-es": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+ "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
},
"npm-run-all": {
"version": "4.1.5",
@@ -1412,6 +1602,12 @@
"pify": "^3.0.0"
}
},
+ "pathe": {
+ "version": "0.3.9",
+ "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.3.9.tgz",
+ "integrity": "sha512-6Y6s0vT112P3jD8dGfuS6r+lpa0qqNrLyHPOwvXMnyNTQaYiwgau2DP3aNDsR13xqtGj7rrPo+jFUATpU6/s+g==",
+ "dev": true
+ },
"picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -1442,6 +1638,17 @@
"requires": {
"@vue/devtools-api": "^6.4.4",
"vue-demi": "*"
+ }
+ },
+ "pkg-types": {
+ "version": "0.3.5",
+ "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-0.3.5.tgz",
+ "integrity": "sha512-VkxCBFVgQhNHYk9subx+HOhZ4jzynH11ah63LZsprTKwPCWG9pfWBlkElWFbvkP9BVR0dP1jS9xPdhaHQNK74Q==",
+ "dev": true,
+ "requires": {
+ "jsonc-parser": "^3.2.0",
+ "mlly": "^0.5.14",
+ "pathe": "^0.3.7"
}
},
"postcss": {
@@ -1636,6 +1843,12 @@
"source-map-js": ">=0.6.2 <2.0.0"
}
},
+ "scule": {
+ "version": "0.3.2",
+ "resolved": "https://registry.npmjs.org/scule/-/scule-0.3.2.tgz",
+ "integrity": "sha512-zIvPdjOH8fv8CgrPT5eqtxHQXmPNnV/vHJYffZhE43KZkvULvpCTvOt1HPlFaCZx287INL9qaqrZg34e8NgI4g==",
+ "dev": true
+ },
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -1760,6 +1973,23 @@
"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
"dev": true
},
+ "strip-literal": {
+ "version": "0.4.2",
+ "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-0.4.2.tgz",
+ "integrity": "sha512-pv48ybn4iE1O9RLgCAN0iU4Xv7RlBTiit6DKmMiErbs9x1wH6vXBs45tWc0H5wUIF6TLTrKweqkmYF/iraQKNw==",
+ "dev": true,
+ "requires": {
+ "acorn": "^8.8.0"
+ },
+ "dependencies": {
+ "acorn": {
+ "version": "8.8.0",
+ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+ "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+ "dev": true
+ }
+ }
+ },
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -1842,6 +2072,12 @@
"integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
"dev": true
},
+ "ufo": {
+ "version": "0.8.6",
+ "resolved": "https://registry.npmjs.org/ufo/-/ufo-0.8.6.tgz",
+ "integrity": "sha512-fk6CmUgwKCfX79EzcDQQpSCMxrHstvbLswFChHS0Vump+kFkw7nJBfTZoC1j0bOGoY9I7R3n2DGek5ajbcYnOw==",
+ "dev": true
+ },
"unbox-primitive": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -1852,6 +2088,133 @@
"has-bigints": "^1.0.2",
"has-symbols": "^1.0.3",
"which-boxed-primitive": "^1.0.2"
+ }
+ },
+ "unimport": {
+ "version": "0.6.8",
+ "resolved": "https://registry.npmjs.org/unimport/-/unimport-0.6.8.tgz",
+ "integrity": "sha512-MWkaPYvN0j+6jfEuiVFhfmy+aOtgAP11CozSbu/I3Cx+8ybjXIueB7GVlKofHabtjzSlPeAvWKJSFjHWsG2JaA==",
+ "dev": true,
+ "requires": {
+ "@rollup/pluginutils": "^4.2.1",
+ "escape-string-regexp": "^5.0.0",
+ "fast-glob": "^3.2.12",
+ "local-pkg": "^0.4.2",
+ "magic-string": "^0.26.4",
+ "mlly": "^0.5.16",
+ "pathe": "^0.3.8",
+ "scule": "^0.3.2",
+ "strip-literal": "^0.4.2",
+ "unplugin": "^0.9.6"
+ },
+ "dependencies": {
+ "escape-string-regexp": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+ "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+ "dev": true
+ },
+ "magic-string": {
+ "version": "0.26.7",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
+ "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
+ "dev": true,
+ "requires": {
+ "sourcemap-codec": "^1.4.8"
+ }
+ }
+ }
+ },
+ "unplugin": {
+ "version": "0.9.6",
+ "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-0.9.6.tgz",
+ "integrity": "sha512-YYLtfoNiie/lxswy1GOsKXgnLJTE27la/PeCGznSItk+8METYZErO+zzV9KQ/hXhPwzIJsfJ4s0m1Rl7ZCWZ4Q==",
+ "dev": true,
+ "requires": {
+ "acorn": "^8.8.0",
+ "chokidar": "^3.5.3",
+ "webpack-sources": "^3.2.3",
+ "webpack-virtual-modules": "^0.4.5"
+ },
+ "dependencies": {
+ "acorn": {
+ "version": "8.8.0",
+ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+ "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+ "dev": true
+ }
+ }
+ },
+ "unplugin-auto-import": {
+ "version": "0.11.2",
+ "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-0.11.2.tgz",
+ "integrity": "sha512-1+VwBfn9dtiYv9SQLKP1AvZolUbK9xTVeAT+iOcEk4EHSFUlmIqBVLEKI76cifSQTLOJ3rZyPrEgptf3SZNLlQ==",
+ "dev": true,
+ "requires": {
+ "@antfu/utils": "^0.5.2",
+ "@rollup/pluginutils": "^4.2.1",
+ "local-pkg": "^0.4.2",
+ "magic-string": "^0.26.2",
+ "unimport": "^0.6.7",
+ "unplugin": "^0.9.3"
+ },
+ "dependencies": {
+ "magic-string": {
+ "version": "0.26.7",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
+ "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
+ "dev": true,
+ "requires": {
+ "sourcemap-codec": "^1.4.8"
+ }
+ }
+ }
+ },
+ "unplugin-vue-components": {
+ "version": "0.22.8",
+ "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.22.8.tgz",
+ "integrity": "sha512-Musnwdtr6uj9Zopo4oeh4lp9+fJ2ArXVDzSiZxF4YC9v+pLnasKVKEEAjdXuQQ3u3KtntVw6PCscyAt52eS75g==",
+ "dev": true,
+ "requires": {
+ "@antfu/utils": "^0.5.2",
+ "@rollup/pluginutils": "^4.2.1",
+ "chokidar": "^3.5.3",
+ "debug": "^4.3.4",
+ "fast-glob": "^3.2.12",
+ "local-pkg": "^0.4.2",
+ "magic-string": "^0.26.5",
+ "minimatch": "^5.1.0",
+ "resolve": "^1.22.1",
+ "unplugin": "^0.9.6"
+ },
+ "dependencies": {
+ "brace-expansion": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+ "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+ "dev": true,
+ "requires": {
+ "balanced-match": "^1.0.0"
+ }
+ },
+ "magic-string": {
+ "version": "0.26.7",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
+ "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
+ "dev": true,
+ "requires": {
+ "sourcemap-codec": "^1.4.8"
+ }
+ },
+ "minimatch": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+ "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+ "dev": true,
+ "requires": {
+ "brace-expansion": "^2.0.1"
+ }
+ }
}
},
"update-browserslist-db": {
@@ -2012,6 +2375,18 @@
"@volar/vue-typescript": "1.0.8"
}
},
+ "webpack-sources": {
+ "version": "3.2.3",
+ "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+ "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+ "dev": true
+ },
+ "webpack-virtual-modules": {
+ "version": "0.4.5",
+ "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.5.tgz",
+ "integrity": "sha512-8bWq0Iluiv9lVf9YaqWQ9+liNgXSHICm+rg544yRgGYaR8yXZTVBaHZkINZSB2yZSWo4b0F6MIxqJezVfOEAlg==",
+ "dev": true
+ },
"which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/package.json b/package.json
index 15a0f87..42cebe9 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"countup.js": "^2.3.2",
"dayjs": "^1.11.5",
"echarts": "^5.4.0",
+ "element-plus": "^2.2.18",
"mockjs": "^1.1.0",
"pinia": "^2.0.21",
"vue": "^3.2.41",
@@ -30,6 +31,8 @@
"sass": "^1.55.0",
"tailwindcss": "^3.1.8",
"typescript": "~4.7.4",
+ "unplugin-auto-import": "^0.11.2",
+ "unplugin-vue-components": "^0.22.8",
"vite": "^3.1.8",
"vue-tsc": "^1.0.8"
}
diff --git a/src/api/modules/index.ts b/src/api/modules/index.ts
index 8eb291a..072fd22 100644
--- a/src/api/modules/index.ts
+++ b/src/api/modules/index.ts
@@ -1,3 +1,4 @@
export default {
- 'leftTop':'/bigscreen/countUserNum',//棣栭〉鍗氬鍒楄〃
+ 'leftTop':'/bigscreen/countDeviceNum',//宸︿笂
+ 'leftCenter':'/bigscreen/countUserNum',//宸︿腑
}
\ No newline at end of file
diff --git a/src/components/item-wrap/item-wrap.vue b/src/components/item-wrap/item-wrap.vue
index d8c1dd3..b1e37f7 100644
--- a/src/components/item-wrap/item-wrap.vue
+++ b/src/components/item-wrap/item-wrap.vue
@@ -1,15 +1,81 @@
-<script setup lang='ts'>
+<script setup lang="ts">
+const props = withDefaults(
+ defineProps<{
+ // 鏍囬
+ title: number | string;
+ }>(),
+ {
+ title: "",
+ }
+);
</script>
<template>
- <div class='item-wrap'>
-
+ <div class="item-wrap">
+ <div class="item_title" v-if="title !== ''">
+ <div class="zuo"></div>
+ <span class="title-inner"> {{title}} </span>
+ <div class="you"></div>
+ </div>
+ <div
+ :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
+ >
+ <slot></slot>
+ </div>
</div>
</template>
-<style scoped lang='scss'>
-.item-wrap{
- border: red dashed 1px;
+<style scoped lang="scss">
+.item-wrap {
+ // border: red dashed 1px;
+ box-sizing: border-box;
}
-</style>
\ No newline at end of file
+$item-title-height: 38px;
+$item_title_content-height: calc(100% - 38px);
+
+.item_title {
+ height: $item-title-height;
+ line-height: $item-title-height;
+ width: 100%;
+ color: #31abe3;
+ text-align: center;
+ // background: linear-gradient(to right, transparent, #0f0756, transparent);
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .zuo,
+ .you {
+ width: 58px;
+ height: 14px;
+ background-image: url("@/assets/img/titles/zuo.png");
+ }
+
+ .you {
+ transform: rotate(180deg);
+ }
+ .title-inner {
+ font-weight: 900;
+ letter-spacing: 2px;
+ background: linear-gradient(
+ 92deg,
+ #0072ff 0%,
+ #00eaff 48.8525390625%,
+ #01aaff 100%
+ );
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+}
+
+.item_title_content {
+ height: $item_title_content-height;
+}
+
+.item_title_content_def {
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/mock/mock-index.ts b/src/mock/mock-index.ts
index 0a5202f..b9efa66 100644
--- a/src/mock/mock-index.ts
+++ b/src/mock/mock-index.ts
@@ -1,7 +1,7 @@
import Mock from "mockjs";
//澶勭悊璺緞浼犲弬
import {parameteUrl} from "@/utils/query-param"
-//宸︿笂
+//宸︿腑
export default [
{
url: "/bigscreen/countUserNum",
@@ -19,5 +19,21 @@
return a
},
},
-
+ {
+ url: "/bigscreen/countDeviceNum",
+ type: "get",
+ response: () => {
+ const a = Mock.mock({
+ success: true,
+ data: {
+ alarmNum: '@integer(100, 1000)',
+ offlineNum: '@integer(0, 50)',
+ totalNum:698
+ }
+ })
+ a.data.onlineNum=a.data.totalNum-a.data.offlineNum
+ return a
+ }
+ }
];
+
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 6661759..90a0e71 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,10 +1,10 @@
<script setup lang="ts">
-import {ref} from "vue"
+import { ref } from "vue";
import { RouterView } from "vue-router";
import ScaleScreen from "@/components/scale-screen";
import Headers from "./header.vue";
const wrapperStyle = {};
-const autoScale = ref(false)
+const autoScale = ref(false);
</script>
<template>
@@ -13,7 +13,10 @@
height="1080"
:delay="500"
:fullScreen="false"
- :boxStyle="{ background: '#03050C',overflow:autoScale?'hidden':'auto' }"
+ :boxStyle="{
+ background: '#03050C',
+ overflow: autoScale ? 'hidden' : 'auto',
+ }"
:wrapperStyle="wrapperStyle"
:autoScale="autoScale"
>
diff --git a/src/views/index/left-top.vue b/src/views/index/left-top.vue
index ea4f238..5ada865 100644
--- a/src/views/index/left-top.vue
+++ b/src/views/index/left-top.vue
@@ -1,20 +1,122 @@
<script setup lang="ts">
-import { ref } from "vue";
+import { reactive, ref } from "vue";
import { currentGET } from "@/api";
-currentGET("leftTop").then((res) => {
- console.log(res);
+import CountUp from "@/components/count-up";
+const duration = ref(2);
+const state = reactive({
+ alarmNum: 759,
+ offlineNum: 44,
+ onlineNum: 654,
+ totalNum: 698,
});
+
+const getData = () => {
+ currentGET("leftTop").then((res) => {
+ console.log(res);
+ if (res.success) {
+ state.alarmNum = res.data.alarmNum;
+ state.offlineNum = res.data.offlineNum;
+ state.onlineNum = res.data.onlineNum;
+ state.totalNum = res.data.totalNum;
+ }
+ });
+};
+getData();
</script>
<template>
- <div class="left-top">
-
- </div>
+ <ul class="user_Overview flex">
+ <li class="user_Overview-item" style="color: #00fdfa">
+ <div class="user_Overview_nums allnum">
+ <CountUp :endVal="state.totalNum" :duration="duration" />
+ </div>
+ <p>鎬昏澶囨暟</p>
+ </li>
+ <li class="user_Overview-item" style="color: #07f7a8">
+ <div class="user_Overview_nums online">
+ <CountUp :endVal="state.onlineNum" :duration="duration" />
+ </div>
+ <p>鍦ㄧ嚎鏁�</p>
+ </li>
+ <li class="user_Overview-item" style="color: #e3b337">
+ <div class="user_Overview_nums offline">
+ <CountUp :endVal="state.offlineNum" :duration="duration" />
+ </div>
+ <p>鎺夌嚎鏁�</p>
+ </li>
+ <li class="user_Overview-item" style="color: #f5023d">
+ <div class="user_Overview_nums laramnum">
+ <CountUp :endVal="state.alarmNum" :duration="duration" />
+ </div>
+ <p>鍛婅娆℃暟</p>
+ </li>
+ </ul>
</template>
<style scoped lang="scss">
-.left-top{
- width: 100%;
- height: 100%;
+.left-top {
+ width: 100%;
+ height: 100%;
+}
+
+.user_Overview {
+ li {
+ flex: 1;
+
+ p {
+ text-align: center;
+ height: 16px;
+ font-size: 16px;
+ }
+
+ .user_Overview_nums {
+ width: 100px;
+ height: 100px;
+ text-align: center;
+ line-height: 100px;
+ font-size: 22px;
+ margin: 50px auto 30px;
+ background-size: cover;
+ background-position: center center;
+ position: relative;
+
+ &::before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+
+ &.bgdonghua::before {
+ animation: rotating 14s linear infinite;
+ }
+ }
+
+ .allnum {
+ &::before {
+ background-image: url("@/assets/img/left_top_lan.png");
+ }
+ }
+
+ .online {
+ &::before {
+ background-image: url("@/assets/img/left_top_lv.png");
+ }
+ }
+
+ .offline {
+ &::before {
+ background-image: url("@/assets/img/left_top_huang.png");
+ }
+ }
+
+ .laramnum {
+ &::before {
+ background-image: url("@/assets/img/left_top_hong.png");
+ }
+ }
+ }
}
</style>
diff --git a/src/views/setting.vue b/src/views/setting.vue
new file mode 100644
index 0000000..7df5872
--- /dev/null
+++ b/src/views/setting.vue
@@ -0,0 +1,13 @@
+<script setup lang='ts'>
+
+</script>
+
+<template>
+ <div class=''>
+
+ </div>
+</template>
+
+<style scoped lang='scss'>
+
+</style>
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 6c47589..fc8af7d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "types"],
"compilerOptions": {
"baseUrl": "./",
- "types": ["vite/client" ],
+ "types": ["vite/client" ,"element-plus/global"],
"paths": {
"@/*": ["src/*"],
"api/*": [
diff --git a/vite.config.ts b/vite.config.ts
index ebceb24..598972a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,12 +3,21 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
// const env = loadEnv(mode, process.cwd(), '')
console.log(command, mode);
return {
plugins: [vue(),
+ AutoImport({
+ resolvers: [ElementPlusResolver()],
+ }),
+ Components({
+ resolvers: [ElementPlusResolver()],
+ }),
],
publicDir: "public",
base: "./",
--
Gitblit v1.8.0