feat: 增加左上角图表 优化整体框架

刘嘉威

2022-10-21 959032b71f4b4fd5e3435fcf1405f1ccaa7f8423

feat: 增加左上角图表 优化整体框架

 auto-imports.d.ts

New file
@@ -0,0 +1,5 @@
// Generated by 'unplugin-auto-import'
export {}
declare global {

}

 components.d.ts

New file
@@ -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']
  }
}

 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",

 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"
  }

 src/api/modules/index.ts

@@ -1,3 +1,4 @@
export default {

    'leftTop':'/bigscreen/countUserNum',//首页博客列表

    'leftTop':'/bigscreen/countDeviceNum',//左上

    'leftCenter':'/bigscreen/countUserNum',//左中

}

 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"> &nbsp;&nbsp;{{title}}&nbsp;&nbsp; </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>
$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>


 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

        }

    }

];




 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"
  >

 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>


 src/views/setting.vue

New file
@@ -0,0 +1,13 @@
<script setup lang='ts'>



</script>



<template>

  <div class=''>



  </div>

</template>



<style scoped lang='scss'>



</style>

 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/*": [

 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: "./",