├── .gitignore ├── .vscode └── extensions.json ├── README.en.md ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── logo.jpg ├── src ├── App.vue ├── assets │ ├── home_bg.png │ ├── icon │ │ ├── demo.css │ │ ├── demo_index.html │ │ ├── iconfont.css │ │ ├── iconfont.js │ │ ├── iconfont.json │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ ├── logo.jpg │ └── scss │ │ ├── common │ │ ├── common.scss │ │ └── variables.scss │ │ ├── index.scss │ │ └── theme │ │ └── theme.scss ├── common │ └── echart │ │ ├── map │ │ ├── fujian.json │ │ └── hubei.json │ │ └── style │ │ └── theme.ts ├── components │ ├── echarts-custom │ │ └── EchartsCustom.vue │ └── index.ts ├── env.d.ts ├── main.ts ├── pages │ ├── screen-bottom-left │ │ ├── ScreenBottomLeft.vue │ │ └── chart │ │ │ └── ChartBottomLeft.vue │ ├── screen-bottom-right │ │ ├── ScreenBottomRight.vue │ │ └── chart │ │ │ └── ChartBottomRight.vue │ ├── screen-footer │ │ └── ScreenFooter.vue │ ├── screen-header │ │ └── ScreenHeader.vue │ ├── screen-top-center │ │ └── ScreenTopCenter.vue │ ├── screen-top-left1 │ │ ├── ScreenTopLeft1.vue │ │ └── chart │ │ │ └── ChartTopLeft1.vue │ ├── screen-top-left2 │ │ ├── ScreenTopLeft2.vue │ │ └── chart │ │ │ └── ChartTopLeft2.vue │ ├── screen-top-right1 │ │ ├── ScreenTopRight1.vue │ │ └── chart │ │ │ └── ChartTopRight1.vue │ ├── screen-top-right2 │ │ └── ScreenTopRight2.vue │ └── screen │ │ └── Screen.vue ├── router │ └── router.ts └── utils │ ├── resize.ts │ └── util.ts ├── stats.html ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /README.en.md: -------------------------------------------------------------------------------- 1 | # vue3-big-screen 2 | 3 | #### Description 4 | 基于Vue3的可视化大屏项目 5 | 6 | #### Software Architecture 7 | Software architecture description 8 | 9 | #### Installation 10 | 11 | 1. xxxx 12 | 2. xxxx 13 | 3. xxxx 14 | 15 | #### Instructions 16 | 17 | 1. xxxx 18 | 2. xxxx 19 | 3. xxxx 20 | 21 | #### Contribution 22 | 23 | 1. Fork the repository 24 | 2. Create Feat_xxx branch 25 | 3. Commit your code 26 | 4. Create Pull Request 27 | 28 | 29 | #### Gitee Feature 30 | 31 | 1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md 32 | 2. Gitee blog [blog.gitee.com](https://blog.gitee.com) 33 | 3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore) 34 | 4. The most valuable open source project [GVP](https://gitee.com/gvp) 35 | 5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help) 36 | 6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue3-Big-Screen 2 | ![输入图片说明](https://xkxk-1253929253.cos.ap-shanghai.myqcloud.com/vue3-big-screen/logo.jpg) 3 | 4 | ### 项目介绍 5 | 6 | - 这里一个基于 Vue3、Vite、TypeScript、DataV、ECharts 框架的 " **数据大屏项目** "。 7 | - 使用 template实现组件封装，各类型图标支持动态渲染，可根据自身需求进行替换。 8 | - 使用Vite进行项目构建提高了开发和打包效率。 9 | - 项目按照 1920*1080 作为设计稿，支持任何尺寸的同比例缩放。 10 | - 项目参考[原项目](https://gitee.com/MTrun/vue-big-screen-plugin)的界面和设计思路，优化了相关细节，解决了原先项目中的各种错误。 11 | - 项目已经适配移动端H5，有兴趣的朋友可以点击这里[传送门](https://gitee.com/xiaoxiang_reincarnation/vue3-big-screen-mobile.git)。 12 | - 项目中注释了图片压缩vite插件，如需对图片进行压缩可自行安装vite-plugin-imagemin插件 13 | ```npm i vite-plugin-imagemin -D 或者 cnpm i vite-plugin-imagemin -D``` 14 | ### 项目截图 15 | ![输入图片说明](https://xkxk-1253929253.cos.ap-shanghai.myqcloud.com/vue3-big-screen/big-screen_2m.gif) 16 | 17 | ### 项目预览 18 | - 在线预览地址：https://screen.xkxk.tech 19 | 20 | ### 源码下载 21 | - gitee下载地址：[项目链接](https://gitee.com/xiaoxiang_reincarnation/vue3-big-screen.git) 22 | - github下载地址：[项目链接](https://github.com/dddggg123/vue3-big-screen.git) 23 | ### 相关技术栈 24 | 25 | - Vue3、TypeScript、Vite、DataV、ECharts 26 | 27 | 友情链接： 28 | 29 | 1. [Vue3 官方文档](https://composition-api.vuejs.org/zh/api.html#setup) 30 | 2. [DataV 官方文档](http://datav.jiaminghi.com/guide/) 31 | 3. [echarts 示例](https://echarts.apache.org/examples/zh/index.html) 32 | 4. [echarts API 文档](https://echarts.apache.org/zh/api.html#echarts) 33 | 34 | ### 使用说明 35 | ``` 36 | # 克隆项目 37 | git clone https://gitee.com/xiaoxiang_reincarnation/vue3-big-screen.git 38 | 39 | # 进入项目 40 | cd vue3-big-screen 41 | 42 | # 安装依赖 43 | npm install 44 | 45 | # 运行项目 46 | npm run dev 47 | 48 | # 打包发布 49 | npm run build 50 | ``` 51 | 52 | ### 联系作者 53 | 54 | - 使用中遇到不懂的问题或者有更好的建议欢迎添加作者微信 55 | - 想要加入技术群学习前端开发也可以联系作者 56 | 57 | ![作者](https://xkxk-1253929253.cos.ap-shanghai.myqcloud.com/author/author_wechat.jpg?imageView2/1/w/300/h/300) 58 | 59 | ### 写在最后 60 | 61 | - 如果你觉得本项目不错或者对自己工作有帮助，欢迎点个star或者打赏作者一杯咖啡！ 62 | 63 | ![作者](https://xkxk-1253929253.cos.ap-shanghai.myqcloud.com/author/author_admire.jpg?imageView2/1/w/300/h/300) 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 新能源汽车大数据可视化平台 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-big-screen", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite --host", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@kjgl77/datav-vue3": "^1.3.3", 12 | "echarts": "^5.4.0", 13 | "vue": "^3.2.41", 14 | "vue-router": "^4.1.6" 15 | }, 16 | "devDependencies": { 17 | "@types/node": "^18.11.9", 18 | "@types/rollup-plugin-visualizer": "^4.2.1", 19 | "@vitejs/plugin-vue": "^3.2.0", 20 | "rollup-plugin-visualizer": "^5.8.3", 21 | "sass": "^1.55.0", 22 | "sass-loader": "^13.1.0", 23 | "typescript": "^4.8.4", 24 | "vite": "^3.2.2", 25 | "vite-plugin-compression": "^0.5.1", 26 | "vue-tsc": "^1.0.9" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dddggg123/vue3-big-screen/a2ad522ed6d5b72a959602796d1f044251440744/public/favicon.ico -------------------------------------------------------------------------------- /public/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dddggg123/vue3-big-screen/a2ad522ed6d5b72a959602796d1f044251440744/public/logo.jpg -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | -------------------------------------------------------------------------------- /src/assets/home_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dddggg123/vue3-big-screen/a2ad522ed6d5b72a959602796d1f044251440744/src/assets/home_bg.png -------------------------------------------------------------------------------- /src/assets/icon/demo.css: -------------------------------------------------------------------------------- 1 | /* Logo 字体 */ 2 | @font-face { 3 | font-family: "iconfont logo"; 4 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); 5 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), 6 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), 7 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), 8 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); 9 | } 10 | 11 | .logo { 12 | font-family: "iconfont logo"; 13 | font-size: 160px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | /* tabs */ 20 | .nav-tabs { 21 | position: relative; 22 | } 23 | 24 | .nav-tabs .nav-more { 25 | position: absolute; 26 | right: 0; 27 | bottom: 0; 28 | height: 42px; 29 | line-height: 42px; 30 | color: #666; 31 | } 32 | 33 | #tabs { 34 | border-bottom: 1px solid #eee; 35 | } 36 | 37 | #tabs li { 38 | cursor: pointer; 39 | width: 100px; 40 | height: 40px; 41 | line-height: 40px; 42 | text-align: center; 43 | font-size: 16px; 44 | border-bottom: 2px solid transparent; 45 | position: relative; 46 | z-index: 1; 47 | margin-bottom: -1px; 48 | color: #666; 49 | } 50 | 51 | 52 | #tabs .active { 53 | border-bottom-color: #f00; 54 | color: #222; 55 | } 56 | 57 | .tab-container .content { 58 | display: none; 59 | } 60 | 61 | /* 页面布局 */ 62 | .main { 63 | padding: 30px 100px; 64 | width: 960px; 65 | margin: 0 auto; 66 | } 67 | 68 | .main .logo { 69 | color: #333; 70 | text-align: left; 71 | margin-bottom: 30px; 72 | line-height: 1; 73 | height: 110px; 74 | margin-top: -50px; 75 | overflow: hidden; 76 | *zoom: 1; 77 | } 78 | 79 | .main .logo a { 80 | font-size: 160px; 81 | color: #333; 82 | } 83 | 84 | .helps { 85 | margin-top: 40px; 86 | } 87 | 88 | .helps pre { 89 | padding: 20px; 90 | margin: 10px 0; 91 | border: solid 1px #e7e1cd; 92 | background-color: #fffdef; 93 | overflow: auto; 94 | } 95 | 96 | .icon_lists { 97 | width: 100% !important; 98 | overflow: hidden; 99 | *zoom: 1; 100 | } 101 | 102 | .icon_lists li { 103 | width: 100px; 104 | margin-bottom: 10px; 105 | margin-right: 20px; 106 | text-align: center; 107 | list-style: none !important; 108 | cursor: default; 109 | } 110 | 111 | .icon_lists li .code-name { 112 | line-height: 1.2; 113 | } 114 | 115 | .icon_lists .icon { 116 | display: block; 117 | height: 100px; 118 | line-height: 100px; 119 | font-size: 42px; 120 | margin: 10px auto; 121 | color: #333; 122 | -webkit-transition: font-size 0.25s linear, width 0.25s linear; 123 | -moz-transition: font-size 0.25s linear, width 0.25s linear; 124 | transition: font-size 0.25s linear, width 0.25s linear; 125 | } 126 | 127 | .icon_lists .icon:hover { 128 | font-size: 100px; 129 | } 130 | 131 | .icon_lists .svg-icon { 132 | /* 通过设置 font-size 来改变图标大小 */ 133 | width: 1em; 134 | /* 图标和文字相邻时，垂直对齐 */ 135 | vertical-align: -0.15em; 136 | /* 通过设置 color 来改变 SVG 的颜色/fill */ 137 | fill: currentColor; 138 | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 139 | normalize.css 中也包含这行 */ 140 | overflow: hidden; 141 | } 142 | 143 | .icon_lists li .name, 144 | .icon_lists li .code-name { 145 | color: #666; 146 | } 147 | 148 | /* markdown 样式 */ 149 | .markdown { 150 | color: #666; 151 | font-size: 14px; 152 | line-height: 1.8; 153 | } 154 | 155 | .highlight { 156 | line-height: 1.5; 157 | } 158 | 159 | .markdown img { 160 | vertical-align: middle; 161 | max-width: 100%; 162 | } 163 | 164 | .markdown h1 { 165 | color: #404040; 166 | font-weight: 500; 167 | line-height: 40px; 168 | margin-bottom: 24px; 169 | } 170 | 171 | .markdown h2, 172 | .markdown h3, 173 | .markdown h4, 174 | .markdown h5, 175 | .markdown h6 { 176 | color: #404040; 177 | margin: 1.6em 0 0.6em 0; 178 | font-weight: 500; 179 | clear: both; 180 | } 181 | 182 | .markdown h1 { 183 | font-size: 28px; 184 | } 185 | 186 | .markdown h2 { 187 | font-size: 22px; 188 | } 189 | 190 | .markdown h3 { 191 | font-size: 16px; 192 | } 193 | 194 | .markdown h4 { 195 | font-size: 14px; 196 | } 197 | 198 | .markdown h5 { 199 | font-size: 12px; 200 | } 201 | 202 | .markdown h6 { 203 | font-size: 12px; 204 | } 205 | 206 | .markdown hr { 207 | height: 1px; 208 | border: 0; 209 | background: #e9e9e9; 210 | margin: 16px 0; 211 | clear: both; 212 | } 213 | 214 | .markdown p { 215 | margin: 1em 0; 216 | } 217 | 218 | .markdown>p, 219 | .markdown>blockquote, 220 | .markdown>.highlight, 221 | .markdown>ol, 222 | .markdown>ul { 223 | width: 80%; 224 | } 225 | 226 | .markdown ul>li { 227 | list-style: circle; 228 | } 229 | 230 | .markdown>ul li, 231 | .markdown blockquote ul>li { 232 | margin-left: 20px; 233 | padding-left: 4px; 234 | } 235 | 236 | .markdown>ul li p, 237 | .markdown>ol li p { 238 | margin: 0.6em 0; 239 | } 240 | 241 | .markdown ol>li { 242 | list-style: decimal; 243 | } 244 | 245 | .markdown>ol li, 246 | .markdown blockquote ol>li { 247 | margin-left: 20px; 248 | padding-left: 4px; 249 | } 250 | 251 | .markdown code { 252 | margin: 0 3px; 253 | padding: 0 5px; 254 | background: #eee; 255 | border-radius: 3px; 256 | } 257 | 258 | .markdown strong, 259 | .markdown b { 260 | font-weight: 600; 261 | } 262 | 263 | .markdown>table { 264 | border-collapse: collapse; 265 | border-spacing: 0px; 266 | empty-cells: show; 267 | border: 1px solid #e9e9e9; 268 | width: 95%; 269 | margin-bottom: 24px; 270 | } 271 | 272 | .markdown>table th { 273 | white-space: nowrap; 274 | color: #333; 275 | font-weight: 600; 276 | } 277 | 278 | .markdown>table th, 279 | .markdown>table td { 280 | border: 1px solid #e9e9e9; 281 | padding: 8px 16px; 282 | text-align: left; 283 | } 284 | 285 | .markdown>table th { 286 | background: #F7F7F7; 287 | } 288 | 289 | .markdown blockquote { 290 | font-size: 90%; 291 | color: #999; 292 | border-left: 4px solid #e9e9e9; 293 | padding-left: 0.8em; 294 | margin: 1em 0; 295 | } 296 | 297 | .markdown blockquote p { 298 | margin: 0; 299 | } 300 | 301 | .markdown .anchor { 302 | opacity: 0; 303 | transition: opacity 0.3s ease; 304 | margin-left: 8px; 305 | } 306 | 307 | .markdown .waiting { 308 | color: #ccc; 309 | } 310 | 311 | .markdown h1:hover .anchor, 312 | .markdown h2:hover .anchor, 313 | .markdown h3:hover .anchor, 314 | .markdown h4:hover .anchor, 315 | .markdown h5:hover .anchor, 316 | .markdown h6:hover .anchor { 317 | opacity: 1; 318 | display: inline-block; 319 | } 320 | 321 | .markdown>br, 322 | .markdown>p>br { 323 | clear: both; 324 | } 325 | 326 | 327 | .hljs { 328 | display: block; 329 | background: white; 330 | padding: 0.5em; 331 | color: #333333; 332 | overflow-x: auto; 333 | } 334 | 335 | .hljs-comment, 336 | .hljs-meta { 337 | color: #969896; 338 | } 339 | 340 | .hljs-string, 341 | .hljs-variable, 342 | .hljs-template-variable, 343 | .hljs-strong, 344 | .hljs-emphasis, 345 | .hljs-quote { 346 | color: #df5000; 347 | } 348 | 349 | .hljs-keyword, 350 | .hljs-selector-tag, 351 | .hljs-type { 352 | color: #a71d5d; 353 | } 354 | 355 | .hljs-literal, 356 | .hljs-symbol, 357 | .hljs-bullet, 358 | .hljs-attribute { 359 | color: #0086b3; 360 | } 361 | 362 | .hljs-section, 363 | .hljs-name { 364 | color: #63a35c; 365 | } 366 | 367 | .hljs-tag { 368 | color: #333333; 369 | } 370 | 371 | .hljs-title, 372 | .hljs-attr, 373 | .hljs-selector-id, 374 | .hljs-selector-class, 375 | .hljs-selector-attr, 376 | .hljs-selector-pseudo { 377 | color: #795da3; 378 | } 379 | 380 | .hljs-addition { 381 | color: #55a532; 382 | background-color: #eaffea; 383 | } 384 | 385 | .hljs-deletion { 386 | color: #bd2c00; 387 | background-color: #ffecec; 388 | } 389 | 390 | .hljs-link { 391 | text-decoration: underline; 392 | } 393 | 394 | /* 代码高亮 */ 395 | /* PrismJS 1.15.0 396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 397 | /** 398 | * prism.js default theme for JavaScript, CSS and HTML 399 | * Based on dabblet (http://dabblet.com) 400 | * @author Lea Verou 401 | */ 402 | code[class*="language-"], 403 | pre[class*="language-"] { 404 | color: black; 405 | background: none; 406 | text-shadow: 0 1px white; 407 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 408 | text-align: left; 409 | white-space: pre; 410 | word-spacing: normal; 411 | word-break: normal; 412 | word-wrap: normal; 413 | line-height: 1.5; 414 | 415 | -moz-tab-size: 4; 416 | -o-tab-size: 4; 417 | tab-size: 4; 418 | 419 | -webkit-hyphens: none; 420 | -moz-hyphens: none; 421 | -ms-hyphens: none; 422 | hyphens: none; 423 | } 424 | 425 | pre[class*="language-"]::-moz-selection, 426 | pre[class*="language-"] ::-moz-selection, 427 | code[class*="language-"]::-moz-selection, 428 | code[class*="language-"] ::-moz-selection { 429 | text-shadow: none; 430 | background: #b3d4fc; 431 | } 432 | 433 | pre[class*="language-"]::selection, 434 | pre[class*="language-"] ::selection, 435 | code[class*="language-"]::selection, 436 | code[class*="language-"] ::selection { 437 | text-shadow: none; 438 | background: #b3d4fc; 439 | } 440 | 441 | @media print { 442 | 443 | code[class*="language-"], 444 | pre[class*="language-"] { 445 | text-shadow: none; 446 | } 447 | } 448 | 449 | /* Code blocks */ 450 | pre[class*="language-"] { 451 | padding: 1em; 452 | margin: .5em 0; 453 | overflow: auto; 454 | } 455 | 456 | :not(pre)>code[class*="language-"], 457 | pre[class*="language-"] { 458 | background: #f5f2f0; 459 | } 460 | 461 | /* Inline code */ 462 | :not(pre)>code[class*="language-"] { 463 | padding: .1em; 464 | border-radius: .3em; 465 | white-space: normal; 466 | } 467 | 468 | .token.comment, 469 | .token.prolog, 470 | .token.doctype, 471 | .token.cdata { 472 | color: slategray; 473 | } 474 | 475 | .token.punctuation { 476 | color: #999; 477 | } 478 | 479 | .namespace { 480 | opacity: .7; 481 | } 482 | 483 | .token.property, 484 | .token.tag, 485 | .token.boolean, 486 | .token.number, 487 | .token.constant, 488 | .token.symbol, 489 | .token.deleted { 490 | color: #905; 491 | } 492 | 493 | .token.selector, 494 | .token.attr-name, 495 | .token.string, 496 | .token.char, 497 | .token.builtin, 498 | .token.inserted { 499 | color: #690; 500 | } 501 | 502 | .token.operator, 503 | .token.entity, 504 | .token.url, 505 | .language-css .token.string, 506 | .style .token.string { 507 | color: #9a6e3a; 508 | background: hsla(0, 0%, 100%, .5); 509 | } 510 | 511 | .token.atrule, 512 | .token.attr-value, 513 | .token.keyword { 514 | color: #07a; 515 | } 516 | 517 | .token.function, 518 | .token.class-name { 519 | color: #DD4A68; 520 | } 521 | 522 | .token.regex, 523 | .token.important, 524 | .token.variable { 525 | color: #e90; 526 | } 527 | 528 | .token.important, 529 | .token.bold { 530 | font-weight: bold; 531 | } 532 | 533 | .token.italic { 534 | font-style: italic; 535 | } 536 | 537 | .token.entity { 538 | cursor: help; 539 | } 540 | -------------------------------------------------------------------------------- /src/assets/icon/demo_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | iconfont Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 36 | 37 | 38 |
39 |

40 | 41 | 42 |

43 |
44 | 49 | 50 | 查看项目 51 | 52 |
53 |
54 |
55 |
    56 | 57 |
  • 58 | 59 |
    统计
    60 |
    
    61 |
    • 62 | 63 |
  • 64 | 65 |
    统计2
    66 |
    
    67 |
    • 68 | 69 |
  • 70 | 71 |
    统计4
    72 |
    
    73 |
    • 74 | 75 |
  • 76 | 77 |
    指标2
    78 |
    
    79 |
    • 80 | 81 |
  • 82 | 83 |
    分析2
    84 |
    
    85 |
    • 86 | 87 |
  • 88 | 89 |
    分析7
    90 |
    
    91 |
    • 92 | 93 |
  • 94 | 95 |
    分析5
    96 |
    
    97 |
    • 98 | 99 |
  • 100 | 101 |
    数据7
    102 |
    
    103 |
    • 104 | 105 |
  • 106 | 107 |
    应用
    108 |
    
    109 |
    • 110 | 111 |
  • 112 | 113 |
    lock
    114 |
    
    115 |
    • 116 | 117 |
  • 118 | 119 |
    align-left
    120 |
    
    121 |
    • 122 | 123 |
  • 124 | 125 |
    border-bottom
    126 |
    
    127 |
    • 128 | 129 |
  • 130 | 131 |
    cloud download
    132 |
    
    133 |
    • 134 | 135 |
  • 136 | 137 |
    cloud upload
    138 |
    
    139 |
    • 140 | 141 |
  • 142 | 143 |
    rank
    144 |
    
    145 |
    • 146 | 147 |
  • 148 | 149 |
    early-warning
    150 |
    
    151 |
    • 152 | 153 |
  • 154 | 155 |
    vector
    156 |
    
    157 |
    • 158 | 159 |
  • 160 | 161 |
    monitoring
    162 |
    
    163 |
    • 164 | 165 |
  • 166 | 167 |
    diagnose
    168 |
    
    169 |
    • 170 | 171 |
  • 172 | 173 |
    Directory tree
    174 |
    
    175 |
    • 176 | 177 |
  • 178 | 179 |
    application
    180 |
    
    181 |
    • 182 | 183 |
  • 184 | 185 |
    supervise
    186 |
    
    187 |
    • 188 | 189 |
  • 190 | 191 |
    chart-pie-alt
    192 |
    
    193 |
    • 194 | 195 |
  • 196 | 197 |
    chart-area
    198 |
    
    199 |
    • 200 | 201 |
  • 202 | 203 |
    chart-line
    204 |
    
    205 |
    • 206 | 207 |
  • 208 | 209 |
    chart-bar
    210 |
    
    211 |
    • 212 | 213 |
  • 214 | 215 |
    laptop
    216 |
    
    217 |
    • 218 | 219 |
  • 220 | 221 |
    layer-group
    222 |
    
    223 |
    • 224 | 225 |
226 |
227 |

Unicode 引用

228 |
229 | 230 |

Unicode 是字体在网页端最原始的应用方式，特点是：

231 |
    232 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 233 |
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • 234 |
235 |
236 |

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

237 |
238 |

Unicode 使用步骤如下：

239 |

第一步：拷贝项目下面生成的 @font-face

240 | 
@font-face {
242 |   font-family: 'iconfont';
243 |   src: url('iconfont.woff2?t=1620956942234') format('woff2'),
244 |        url('iconfont.woff?t=1620956942234') format('woff'),
245 |        url('iconfont.ttf?t=1620956942234') format('truetype');
246 | }
247 |
248 |

第二步：定义使用 iconfont 的样式

249 | 
.iconfont {
251 |   font-family: "iconfont" !important;
252 |   font-size: 16px;
253 |   font-style: normal;
254 |   -webkit-font-smoothing: antialiased;
255 |   -moz-osx-font-smoothing: grayscale;
256 | }
257 |
258 |

第三步：挑选相应图标并获取字体编码，应用于页面

259 | 
260 | <span class="iconfont">&#x33;</span>
262 |
263 |
264 |

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

265 |
266 |
267 |
268 |
269 |
    270 | 271 |
  • 272 | 273 |
    274 | 统计 275 |
    276 |
    .icon-tongji 277 |
    278 |
    • 279 | 280 |
  • 281 | 282 |
    283 | 统计2 284 |
    285 |
    .icon-tongji2 286 |
    287 |
    • 288 | 289 |
  • 290 | 291 |
    292 | 统计4 293 |
    294 |
    .icon-tongji4 295 |
    296 |
    • 297 | 298 |
  • 299 | 300 |
    301 | 指标2 302 |
    303 |
    .icon-zhibiao2 304 |
    305 |
    • 306 | 307 |
  • 308 | 309 |
    310 | 分析2 311 |
    312 |
    .icon-fenxi2 313 |
    314 |
    • 315 | 316 |
  • 317 | 318 |
    319 | 分析7 320 |
    321 |
    .icon-fenxi7 322 |
    323 |
    • 324 | 325 |
  • 326 | 327 |
    328 | 分析5 329 |
    330 |
    .icon-fenxi5 331 |
    332 |
    • 333 | 334 |
  • 335 | 336 |
    337 | 数据7 338 |
    339 |
    .icon-shuju7 340 |
    341 |
    • 342 | 343 |
  • 344 | 345 |
    346 | 应用 347 |
    348 |
    .icon-yingyong 349 |
    350 |
    • 351 | 352 |
  • 353 | 354 |
    355 | lock 356 |
    357 |
    .icon-lock 358 |
    359 |
    • 360 | 361 |
  • 362 | 363 |
    364 | align-left 365 |
    366 |
    .icon-align-left 367 |
    368 |
    • 369 | 370 |
  • 371 | 372 |
    373 | border-bottom 374 |
    375 |
    .icon-border-bottom 376 |
    377 |
    • 378 | 379 |
  • 380 | 381 |
    382 | cloud download 383 |
    384 |
    .icon-clouddownload 385 |
    386 |
    • 387 | 388 |
  • 389 | 390 |
    391 | cloud upload 392 |
    393 |
    .icon-cloudupload 394 |
    395 |
    • 396 | 397 |
  • 398 | 399 |
    400 | rank 401 |
    402 |
    .icon-rank 403 |
    404 |
    • 405 | 406 |
  • 407 | 408 |
    409 | early-warning 410 |
    411 |
    .icon-early-warning 412 |
    413 |
    • 414 | 415 |
  • 416 | 417 |
    418 | vector 419 |
    420 |
    .icon-vector 421 |
    422 |
    • 423 | 424 |
  • 425 | 426 |
    427 | monitoring 428 |
    429 |
    .icon-monitoring 430 |
    431 |
    • 432 | 433 |
  • 434 | 435 |
    436 | diagnose 437 |
    438 |
    .icon-diagnose 439 |
    440 |
    • 441 | 442 |
  • 443 | 444 |
    445 | Directory tree 446 |
    447 |
    .icon-Directory-tree 448 |
    449 |
    • 450 | 451 |
  • 452 | 453 |
    454 | application 455 |
    456 |
    .icon-application 457 |
    458 |
    • 459 | 460 |
  • 461 | 462 |
    463 | supervise 464 |
    465 |
    .icon-supervise 466 |
    467 |
    • 468 | 469 |
  • 470 | 471 |
    472 | chart-pie-alt 473 |
    474 |
    .icon-chart-pie-alt 475 |
    476 |
    • 477 | 478 |
  • 479 | 480 |
    481 | chart-area 482 |
    483 |
    .icon-chart-area 484 |
    485 |
    • 486 | 487 |
  • 488 | 489 |
    490 | chart-line 491 |
    492 |
    .icon-chart-line 493 |
    494 |
    • 495 | 496 |
  • 497 | 498 |
    499 | chart-bar 500 |
    501 |
    .icon-chart-bar 502 |
    503 |
    • 504 | 505 |
  • 506 | 507 |
    508 | laptop 509 |
    510 |
    .icon-laptop 511 |
    512 |
    • 513 | 514 |
  • 515 | 516 |
    517 | layer-group 518 |
    519 |
    .icon-layer-group 520 |
    521 |
    • 522 | 523 |
524 |
525 |

font-class 引用

526 |
527 | 528 |

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

529 |

与 Unicode 使用方式相比，具有如下特点：

530 |
    531 |
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • 532 |
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • 533 |
534 |

使用步骤如下：

535 |

第一步：引入项目下面生成的 fontclass 代码：

536 | 
<link rel="stylesheet" href="./iconfont.css">
537 |
538 |

第二步：挑选相应图标并获取类名，应用于页面：

539 | 
<span class="iconfont icon-xxx"></span>
540 |
541 |
542 |

" 543 | iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

544 |
545 |
546 |
547 |
548 |
    549 | 550 |
  • 551 | 554 |
    统计
    555 |
    #icon-tongji
    556 |
    • 557 | 558 |
  • 559 | 562 |
    统计2
    563 |
    #icon-tongji2
    564 |
    • 565 | 566 |
  • 567 | 570 |
    统计4
    571 |
    #icon-tongji4
    572 |
    • 573 | 574 |
  • 575 | 578 |
    指标2
    579 |
    #icon-zhibiao2
    580 |
    • 581 | 582 |
  • 583 | 586 |
    分析2
    587 |
    #icon-fenxi2
    588 |
    • 589 | 590 |
  • 591 | 594 |
    分析7
    595 |
    #icon-fenxi7
    596 |
    • 597 | 598 |
  • 599 | 602 |
    分析5
    603 |
    #icon-fenxi5
    604 |
    • 605 | 606 |
  • 607 | 610 |
    数据7
    611 |
    #icon-shuju7
    612 |
    • 613 | 614 |
  • 615 | 618 |
    应用
    619 |
    #icon-yingyong
    620 |
    • 621 | 622 |
  • 623 | 626 |
    lock
    627 |
    #icon-lock
    628 |
    • 629 | 630 |
  • 631 | 634 |
    align-left
    635 |
    #icon-align-left
    636 |
    • 637 | 638 |
  • 639 | 642 |
    border-bottom
    643 |
    #icon-border-bottom
    644 |
    • 645 | 646 |
  • 647 | 650 |
    cloud download
    651 |
    #icon-clouddownload
    652 |
    • 653 | 654 |
  • 655 | 658 |
    cloud upload
    659 |
    #icon-cloudupload
    660 |
    • 661 | 662 |
  • 663 | 666 |
    rank
    667 |
    #icon-rank
    668 |
    • 669 | 670 |
  • 671 | 674 |
    early-warning
    675 |
    #icon-early-warning
    676 |
    • 677 | 678 |
  • 679 | 682 |
    vector
    683 |
    #icon-vector
    684 |
    • 685 | 686 |
  • 687 | 690 |
    monitoring
    691 |
    #icon-monitoring
    692 |
    • 693 | 694 |
  • 695 | 698 |
    diagnose
    699 |
    #icon-diagnose
    700 |
    • 701 | 702 |
  • 703 | 706 |
    Directory tree
    707 |
    #icon-Directory-tree
    708 |
    • 709 | 710 |
  • 711 | 714 |
    application
    715 |
    #icon-application
    716 |
    • 717 | 718 |
  • 719 | 722 |
    supervise
    723 |
    #icon-supervise
    724 |
    • 725 | 726 |
  • 727 | 730 |
    chart-pie-alt
    731 |
    #icon-chart-pie-alt
    732 |
    • 733 | 734 |
  • 735 | 738 |
    chart-area
    739 |
    #icon-chart-area
    740 |
    • 741 | 742 |
  • 743 | 746 |
    chart-line
    747 |
    #icon-chart-line
    748 |
    • 749 | 750 |
  • 751 | 754 |
    chart-bar
    755 |
    #icon-chart-bar
    756 |
    • 757 | 758 |
  • 759 | 762 |
    laptop
    763 |
    #icon-laptop
    764 |
    • 765 | 766 |
  • 767 | 770 |
    layer-group
    771 |
    #icon-layer-group
    772 |
    • 773 | 774 |
775 |
776 |

Symbol 引用

777 |
778 | 779 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 780 | 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

781 |
    782 |
  • 支持多色图标了，不再受单色限制。
    • 783 |
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • 784 |
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • 785 |
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • 786 |
787 |

使用步骤如下：

788 |

第一步：引入项目下面生成的 symbol 代码：

789 | 
<script src="./iconfont.js"></script>
790 |
791 |

第二步：加入通用 CSS 代码（引入一次就行）：

792 | 
<style>
793 | .icon {
794 |   width: 1em;
795 |   height: 1em;
796 |   vertical-align: -0.15em;
797 |   fill: currentColor;
798 |   overflow: hidden;
799 | }
800 | </style>
801 |
802 |

第三步：挑选相应图标并获取类名，应用于页面：

803 | 
<svg class="icon" aria-hidden="true">
804 |   <use xlink:href="#icon-xxx"></use>
805 | </svg>
806 |
807 |
808 |
809 | 810 |
811 |
812 | 831 | 832 | 833 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "iconfont"; /* Project id 2091333 */ 3 | src: url('iconfont.woff2?t=1620956942234') format('woff2'), 4 | url('iconfont.woff?t=1620956942234') format('woff'), 5 | url('iconfont.ttf?t=1620956942234') format('truetype'); 6 | } 7 | 8 | .iconfont { 9 | font-family: "iconfont" !important; 10 | font-size: 16px; 11 | font-style: normal; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | .icon-tongji:before { 17 | content: "\e615"; 18 | } 19 | 20 | .icon-tongji2:before { 21 | content: "\e616"; 22 | } 23 | 24 | .icon-tongji4:before { 25 | content: "\e617"; 26 | } 27 | 28 | .icon-zhibiao2:before { 29 | content: "\e618"; 30 | } 31 | 32 | .icon-fenxi2:before { 33 | content: "\e619"; 34 | } 35 | 36 | .icon-fenxi7:before { 37 | content: "\e61a"; 38 | } 39 | 40 | .icon-fenxi5:before { 41 | content: "\e61b"; 42 | } 43 | 44 | .icon-shuju7:before { 45 | content: "\e61c"; 46 | } 47 | 48 | .icon-yingyong:before { 49 | content: "\e62b"; 50 | } 51 | 52 | .icon-lock:before { 53 | content: "\e7fb"; 54 | } 55 | 56 | .icon-align-left:before { 57 | content: "\e7fd"; 58 | } 59 | 60 | .icon-border-bottom:before { 61 | content: "\e7fe"; 62 | } 63 | 64 | .icon-clouddownload:before { 65 | content: "\e81b"; 66 | } 67 | 68 | .icon-cloudupload:before { 69 | content: "\e81c"; 70 | } 71 | 72 | .icon-rank:before { 73 | content: "\e86a"; 74 | } 75 | 76 | .icon-early-warning:before { 77 | content: "\e86e"; 78 | } 79 | 80 | .icon-vector:before { 81 | content: "\e888"; 82 | } 83 | 84 | .icon-monitoring:before { 85 | content: "\e88e"; 86 | } 87 | 88 | .icon-diagnose:before { 89 | content: "\e88f"; 90 | } 91 | 92 | .icon-Directory-tree:before { 93 | content: "\e892"; 94 | } 95 | 96 | .icon-application:before { 97 | content: "\e89e"; 98 | } 99 | 100 | .icon-supervise:before { 101 | content: "\e777"; 102 | } 103 | 104 | .icon-chart-pie-alt:before { 105 | content: "\e78c"; 106 | } 107 | 108 | .icon-chart-area:before { 109 | content: "\e78f"; 110 | } 111 | 112 | .icon-chart-line:before { 113 | content: "\e790"; 114 | } 115 | 116 | .icon-chart-bar:before { 117 | content: "\e791"; 118 | } 119 | 120 | .icon-laptop:before { 121 | content: "\e797"; 122 | } 123 | 124 | .icon-layer-group:before { 125 | content: "\e7f7"; 126 | } 127 | 128 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.js: -------------------------------------------------------------------------------- 1 | !function(l){var o,h,t,i,a,v,c='',e=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(e&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(l){console&&console.log(l)}}function m(){a||(a=!0,t())}o=function(){var l,o,h;(h=document.createElement("div")).innerHTML=c,c=null,(o=h.getElementsByTagName("svg")[0])&&(o.setAttribute("aria-hidden","true"),o.style.position="absolute",o.style.width=0,o.style.height=0,o.style.overflow="hidden",l=o,(h=document.body).firstChild?(o=h.firstChild).parentNode.insertBefore(l,o):h.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),o()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(t=o,i=l.document,a=!1,(v=function(){try{i.documentElement.doScroll("left")}catch(l){return void setTimeout(v,50)}m()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,m())})}(window); -------------------------------------------------------------------------------- /src/assets/icon/iconfont.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "2091333", 3 | "name": "react可视化", 4 | "font_family": "iconfont", 5 | "css_prefix_text": "icon-", 6 | "description": "", 7 | "glyphs": [ 8 | { 9 | "icon_id": "15383964", 10 | "name": "统计", 11 | "font_class": "tongji", 12 | "unicode": "e615", 13 | "unicode_decimal": 58901 14 | }, 15 | { 16 | "icon_id": "15383969", 17 | "name": "统计2", 18 | "font_class": "tongji2", 19 | "unicode": "e616", 20 | "unicode_decimal": 58902 21 | }, 22 | { 23 | "icon_id": "15383974", 24 | "name": "统计4", 25 | "font_class": "tongji4", 26 | "unicode": "e617", 27 | "unicode_decimal": 58903 28 | }, 29 | { 30 | "icon_id": "15383975", 31 | "name": "指标2", 32 | "font_class": "zhibiao2", 33 | "unicode": "e618", 34 | "unicode_decimal": 58904 35 | }, 36 | { 37 | "icon_id": "15392648", 38 | "name": "分析2", 39 | "font_class": "fenxi2", 40 | "unicode": "e619", 41 | "unicode_decimal": 58905 42 | }, 43 | { 44 | "icon_id": "15392654", 45 | "name": "分析7", 46 | "font_class": "fenxi7", 47 | "unicode": "e61a", 48 | "unicode_decimal": 58906 49 | }, 50 | { 51 | "icon_id": "15392658", 52 | "name": "分析5", 53 | "font_class": "fenxi5", 54 | "unicode": "e61b", 55 | "unicode_decimal": 58907 56 | }, 57 | { 58 | "icon_id": "15392671", 59 | "name": "数据7", 60 | "font_class": "shuju7", 61 | "unicode": "e61c", 62 | "unicode_decimal": 58908 63 | }, 64 | { 65 | "icon_id": "15736987", 66 | "name": "应用", 67 | "font_class": "yingyong", 68 | "unicode": "e62b", 69 | "unicode_decimal": 58923 70 | }, 71 | { 72 | "icon_id": "6151228", 73 | "name": "lock", 74 | "font_class": "lock", 75 | "unicode": "e7fb", 76 | "unicode_decimal": 59387 77 | }, 78 | { 79 | "icon_id": "6151231", 80 | "name": "align-left", 81 | "font_class": "align-left", 82 | "unicode": "e7fd", 83 | "unicode_decimal": 59389 84 | }, 85 | { 86 | "icon_id": "6151232", 87 | "name": "border-bottom", 88 | "font_class": "border-bottom", 89 | "unicode": "e7fe", 90 | "unicode_decimal": 59390 91 | }, 92 | { 93 | "icon_id": "6151277", 94 | "name": "cloud download", 95 | "font_class": "clouddownload", 96 | "unicode": "e81b", 97 | "unicode_decimal": 59419 98 | }, 99 | { 100 | "icon_id": "6151278", 101 | "name": "cloud upload", 102 | "font_class": "cloudupload", 103 | "unicode": "e81c", 104 | "unicode_decimal": 59420 105 | }, 106 | { 107 | "icon_id": "6303226", 108 | "name": "rank", 109 | "font_class": "rank", 110 | "unicode": "e86a", 111 | "unicode_decimal": 59498 112 | }, 113 | { 114 | "icon_id": "6353292", 115 | "name": "early-warning", 116 | "font_class": "early-warning", 117 | "unicode": "e86e", 118 | "unicode_decimal": 59502 119 | }, 120 | { 121 | "icon_id": "8762556", 122 | "name": "vector", 123 | "font_class": "vector", 124 | "unicode": "e888", 125 | "unicode_decimal": 59528 126 | }, 127 | { 128 | "icon_id": "9340469", 129 | "name": "monitoring", 130 | "font_class": "monitoring", 131 | "unicode": "e88e", 132 | "unicode_decimal": 59534 133 | }, 134 | { 135 | "icon_id": "9340470", 136 | "name": "diagnose", 137 | "font_class": "diagnose", 138 | "unicode": "e88f", 139 | "unicode_decimal": 59535 140 | }, 141 | { 142 | "icon_id": "11307823", 143 | "name": "Directory tree", 144 | "font_class": "Directory-tree", 145 | "unicode": "e892", 146 | "unicode_decimal": 59538 147 | }, 148 | { 149 | "icon_id": "12253601", 150 | "name": "application", 151 | "font_class": "application", 152 | "unicode": "e89e", 153 | "unicode_decimal": 59550 154 | }, 155 | { 156 | "icon_id": "6150971", 157 | "name": "supervise", 158 | "font_class": "supervise", 159 | "unicode": "e777", 160 | "unicode_decimal": 59255 161 | }, 162 | { 163 | "icon_id": "6151030", 164 | "name": "chart-pie-alt", 165 | "font_class": "chart-pie-alt", 166 | "unicode": "e78c", 167 | "unicode_decimal": 59276 168 | }, 169 | { 170 | "icon_id": "6151033", 171 | "name": "chart-area", 172 | "font_class": "chart-area", 173 | "unicode": "e78f", 174 | "unicode_decimal": 59279 175 | }, 176 | { 177 | "icon_id": "6151034", 178 | "name": "chart-line", 179 | "font_class": "chart-line", 180 | "unicode": "e790", 181 | "unicode_decimal": 59280 182 | }, 183 | { 184 | "icon_id": "6151035", 185 | "name": "chart-bar", 186 | "font_class": "chart-bar", 187 | "unicode": "e791", 188 | "unicode_decimal": 59281 189 | }, 190 | { 191 | "icon_id": "6151041", 192 | "name": "laptop", 193 | "font_class": "laptop", 194 | "unicode": "e797", 195 | "unicode_decimal": 59287 196 | }, 197 | { 198 | "icon_id": "6151223", 199 | "name": "layer-group", 200 | "font_class": "layer-group", 201 | "unicode": "e7f7", 202 | "unicode_decimal": 59383 203 | } 204 | ] 205 | } 206 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dddggg123/vue3-big-screen/a2ad522ed6d5b72a959602796d1f044251440744/src/assets/icon/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/icon/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dddggg123/vue3-big-screen/a2ad522ed6d5b72a959602796d1f044251440744/src/assets/icon/iconfont.woff -------------------------------------------------------------------------------- /src/assets/icon/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dddggg123/vue3-big-screen/a2ad522ed6d5b72a959602796d1f044251440744/src/assets/icon/iconfont.woff2 -------------------------------------------------------------------------------- /src/assets/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dddggg123/vue3-big-screen/a2ad522ed6d5b72a959602796d1f044251440744/src/assets/logo.jpg -------------------------------------------------------------------------------- /src/assets/scss/common/common.scss: -------------------------------------------------------------------------------- 1 | @import "./variables.scss"; 2 | 3 | // 全局样式 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | list-style-type: none; 8 | box-sizing: border-box; 9 | outline: none; 10 | } 11 | 12 | html { 13 | margin: 0; 14 | padding: 0; 15 | width: 100vw; 16 | height: 100vh; 17 | background-color: $theme-color; 18 | } 19 | 20 | body { 21 | font-family: Arial, Helvetica, sans-serif; 22 | margin: 0; 23 | padding: 0; 24 | overflow: hidden; 25 | width: 100vw; 26 | height: 100vh; 27 | } 28 | 29 | #app { 30 | width: 100vw; 31 | height: 100vh; 32 | } 33 | 34 | .flex-l { 35 | display: flex; 36 | flex-wrap: wrap; 37 | justify-content: flex-start; 38 | align-items: center; 39 | } 40 | 41 | .flex-c { 42 | display: flex; 43 | justify-content: center; 44 | align-items: center; 45 | } 46 | 47 | .flex-r { 48 | display: flex; 49 | justify-content: flex-end; 50 | align-items: center; 51 | } 52 | 53 | .react-l { 54 | position: relative; 55 | } 56 | 57 | .react-l::before { 58 | content: ""; 59 | position: absolute; 60 | top: 0; 61 | right: 0; 62 | bottom: 0; 63 | left: 0; 64 | z-index: -1; 65 | background: $theme-sub-color; 66 | transform: skewX(45deg); 67 | } 68 | 69 | .react-r { 70 | position: relative; 71 | } 72 | 73 | .react-r::before { 74 | content: ""; 75 | position: absolute; 76 | top: 0; 77 | right: 0; 78 | bottom: 0; 79 | left: 0; 80 | z-index: -1; 81 | background: $theme-sub-color; 82 | transform: skewX(-45deg); 83 | } 84 | 85 | .dev-reverse { 86 | transform: rotateY(180deg); 87 | } 88 | 89 | // 图标 90 | .iconfont { 91 | font-size: 20px !important; 92 | color: #5cd9e8; 93 | } 94 | 95 | .scr-up { 96 | color: #DC143C; 97 | } 98 | 99 | 100 | .scr-down { 101 | color: #90EE90; 102 | } 103 | -------------------------------------------------------------------------------- /src/assets/scss/common/variables.scss: -------------------------------------------------------------------------------- 1 | // 颜色 2 | $colors: ( 3 | "primary": #db9e3f, 4 | "info-1": #4394e4, 5 | "info": #4b67af, 6 | "white": #ffffff, 7 | "light": #f9f9f9, 8 | "grey-1": #999999, 9 | "grey": #666666, 10 | "dark-1": #5f5f5f, 11 | "dark": #222222, 12 | "black-1": #171823, 13 | "black": #000000, 14 | ); 15 | 16 | // 修饰器高度 17 | $dv-dec-height: 20px; 18 | 19 | // 字体大小 20 | $sm-font-size: 13px; 21 | $base-font-size: 16px; 22 | $md-font-size: 18px; 23 | $lg-font-size: 24px; 24 | $title-font-size: 30px; 25 | 26 | // 主题色 27 | $theme-color: #020308; 28 | $theme-sub-color: #0f1325; 29 | 30 | // 各模块宽高 31 | $box-width1: 300px; 32 | $box-height1: 410px; 33 | 34 | $box-width2: 300px; 35 | $box-height2: 410px; 36 | 37 | $box-width3: 720px; 38 | $box-height3: 410px; 39 | 40 | $box-width4: 300px; 41 | $box-height4: 410px; 42 | 43 | $box-width5: 300px; 44 | $box-height5: 410px; 45 | 46 | $box-height6: 460px; 47 | 48 | $box-height7: 460px; 49 | 50 | $chart-header-height: 40px; -------------------------------------------------------------------------------- /src/assets/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./common/common.scss"; 2 | @import "./theme/theme.scss"; -------------------------------------------------------------------------------- /src/assets/scss/theme/theme.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dddggg123/vue3-big-screen/a2ad522ed6d5b72a959602796d1f044251440744/src/assets/scss/theme/theme.scss -------------------------------------------------------------------------------- /src/common/echart/style/theme.ts: -------------------------------------------------------------------------------- 1 | const theme = { 2 | color: ['#2d8cf0', '#19be6b', '#ff9900', '#E46CBB', '#9A66E4', '#ed3f14'], 3 | backgroundColor: 'rgba(0,0,0,0)', 4 | textStyle: {}, 5 | title: { 6 | textStyle: { 7 | color: '#516b91' 8 | }, 9 | subtextStyle: { 10 | color: '#93b7e3' 11 | } 12 | }, 13 | line: { 14 | itemStyle: { 15 | normal: { 16 | borderWidth: '2' 17 | } 18 | }, 19 | lineStyle: { 20 | normal: { 21 | width: '2' 22 | } 23 | }, 24 | symbolSize: '6', 25 | symbol: 'emptyCircle', 26 | smooth: true 27 | }, 28 | radar: { 29 | itemStyle: { 30 | normal: { 31 | borderWidth: '2' 32 | } 33 | }, 34 | lineStyle: { 35 | normal: { 36 | width: '2' 37 | } 38 | }, 39 | symbolSize: '6', 40 | symbol: 'emptyCircle', 41 | smooth: true 42 | }, 43 | bar: { 44 | itemStyle: { 45 | normal: { 46 | barBorderWidth: 0, 47 | barBorderColor: '#ccc' 48 | }, 49 | emphasis: { 50 | barBorderWidth: 0, 51 | barBorderColor: '#ccc' 52 | } 53 | } 54 | }, 55 | pie: { 56 | itemStyle: { 57 | normal: { 58 | borderWidth: 0, 59 | borderColor: '#ccc' 60 | }, 61 | emphasis: { 62 | borderWidth: 0, 63 | borderColor: '#ccc' 64 | } 65 | } 66 | }, 67 | scatter: { 68 | itemStyle: { 69 | normal: { 70 | borderWidth: 0, 71 | borderColor: '#ccc' 72 | }, 73 | emphasis: { 74 | borderWidth: 0, 75 | borderColor: '#ccc' 76 | } 77 | } 78 | }, 79 | boxplot: { 80 | itemStyle: { 81 | normal: { 82 | borderWidth: 0, 83 | borderColor: '#ccc' 84 | }, 85 | emphasis: { 86 | borderWidth: 0, 87 | borderColor: '#ccc' 88 | } 89 | } 90 | }, 91 | parallel: { 92 | itemStyle: { 93 | normal: { 94 | borderWidth: 0, 95 | borderColor: '#ccc' 96 | }, 97 | emphasis: { 98 | borderWidth: 0, 99 | borderColor: '#ccc' 100 | } 101 | } 102 | }, 103 | sankey: { 104 | itemStyle: { 105 | normal: { 106 | borderWidth: 0, 107 | borderColor: '#ccc' 108 | }, 109 | emphasis: { 110 | borderWidth: 0, 111 | borderColor: '#ccc' 112 | } 113 | } 114 | }, 115 | funnel: { 116 | itemStyle: { 117 | normal: { 118 | borderWidth: 0, 119 | borderColor: '#ccc' 120 | }, 121 | emphasis: { 122 | borderWidth: 0, 123 | borderColor: '#ccc' 124 | } 125 | } 126 | }, 127 | gauge: { 128 | itemStyle: { 129 | normal: { 130 | borderWidth: 0, 131 | borderColor: '#ccc' 132 | }, 133 | emphasis: { 134 | borderWidth: 0, 135 | borderColor: '#ccc' 136 | } 137 | } 138 | }, 139 | candlestick: { 140 | itemStyle: { 141 | normal: { 142 | color: '#edafda', 143 | color0: 'transparent', 144 | borderColor: '#d680bc', 145 | borderColor0: '#8fd3e8', 146 | borderWidth: '2' 147 | } 148 | } 149 | }, 150 | graph: { 151 | itemStyle: { 152 | normal: { 153 | borderWidth: 0, 154 | borderColor: '#ccc' 155 | } 156 | }, 157 | lineStyle: { 158 | normal: { 159 | width: 1, 160 | color: '#aaa' 161 | } 162 | }, 163 | symbolSize: '6', 164 | symbol: 'emptyCircle', 165 | smooth: true, 166 | color: ['#2d8cf0', '#19be6b', '#f5ae4a', '#9189d5', '#56cae2', '#cbb0e3'], 167 | label: { 168 | normal: { 169 | textStyle: { 170 | color: '#eee' 171 | } 172 | } 173 | } 174 | }, 175 | map: { 176 | itemStyle: { 177 | normal: { 178 | areaColor: '#f3f3f3', 179 | borderColor: '#516b91', 180 | borderWidth: 0.5 181 | }, 182 | emphasis: { 183 | areaColor: 'rgba(165,231,240,1)', 184 | borderColor: '#516b91', 185 | borderWidth: 1 186 | } 187 | }, 188 | label: { 189 | normal: { 190 | textStyle: { 191 | color: '#000' 192 | } 193 | }, 194 | emphasis: { 195 | textStyle: { 196 | color: 'rgb(81,107,145)' 197 | } 198 | } 199 | } 200 | }, 201 | geo: { 202 | itemStyle: { 203 | normal: { 204 | areaColor: '#f3f3f3', 205 | borderColor: '#516b91', 206 | borderWidth: 0.5 207 | }, 208 | emphasis: { 209 | areaColor: 'rgba(165,231,240,1)', 210 | borderColor: '#516b91', 211 | borderWidth: 1 212 | } 213 | }, 214 | label: { 215 | normal: { 216 | textStyle: { 217 | color: '#000' 218 | } 219 | }, 220 | emphasis: { 221 | textStyle: { 222 | color: 'rgb(81,107,145)' 223 | } 224 | } 225 | } 226 | }, 227 | categoryAxis: { 228 | axisLine: { 229 | show: true, 230 | lineStyle: { 231 | color: '#cccccc' 232 | } 233 | }, 234 | axisTick: { 235 | show: false, 236 | lineStyle: { 237 | color: '#333' 238 | } 239 | }, 240 | axisLabel: { 241 | show: true, 242 | textStyle: { 243 | color: '#fff' 244 | } 245 | }, 246 | splitLine: { 247 | show: false, 248 | lineStyle: { 249 | color: ['#eeeeee'] 250 | } 251 | }, 252 | splitArea: { 253 | show: false, 254 | areaStyle: { 255 | color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'] 256 | } 257 | } 258 | }, 259 | valueAxis: { 260 | axisLine: { 261 | show: true, 262 | lineStyle: { 263 | color: '#cccccc' 264 | } 265 | }, 266 | axisTick: { 267 | show: false, 268 | lineStyle: { 269 | color: '#333' 270 | } 271 | }, 272 | axisLabel: { 273 | show: true, 274 | textStyle: { 275 | color: '#fff' 276 | } 277 | }, 278 | splitLine: { 279 | show: false, 280 | lineStyle: { 281 | color: ['#eeeeee'] 282 | } 283 | }, 284 | splitArea: { 285 | show: false, 286 | areaStyle: { 287 | color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'] 288 | } 289 | } 290 | }, 291 | logAxis: { 292 | axisLine: { 293 | show: true, 294 | lineStyle: { 295 | color: '#cccccc' 296 | } 297 | }, 298 | axisTick: { 299 | show: false, 300 | lineStyle: { 301 | color: '#333' 302 | } 303 | }, 304 | axisLabel: { 305 | show: true, 306 | textStyle: { 307 | color: '#999999' 308 | } 309 | }, 310 | splitLine: { 311 | show: true, 312 | lineStyle: { 313 | color: ['#eeeeee'] 314 | } 315 | }, 316 | splitArea: { 317 | show: false, 318 | areaStyle: { 319 | color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'] 320 | } 321 | } 322 | }, 323 | timeAxis: { 324 | axisLine: { 325 | show: true, 326 | lineStyle: { 327 | color: '#cccccc' 328 | } 329 | }, 330 | axisTick: { 331 | show: false, 332 | lineStyle: { 333 | color: '#333' 334 | } 335 | }, 336 | axisLabel: { 337 | show: true, 338 | textStyle: { 339 | color: '#999999' 340 | } 341 | }, 342 | splitLine: { 343 | show: true, 344 | lineStyle: { 345 | color: ['#eeeeee'] 346 | } 347 | }, 348 | splitArea: { 349 | show: false, 350 | areaStyle: { 351 | color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'] 352 | } 353 | } 354 | }, 355 | toolbox: { 356 | iconStyle: { 357 | normal: { 358 | borderColor: '#999' 359 | }, 360 | emphasis: { 361 | borderColor: '#666' 362 | } 363 | } 364 | }, 365 | legend: { 366 | textStyle: { 367 | color: '#fff' 368 | } 369 | }, 370 | tooltip: { 371 | axisPointer: { 372 | lineStyle: { 373 | color: '#ccc', 374 | width: 1 375 | }, 376 | crossStyle: { 377 | color: '#ccc', 378 | width: 1 379 | } 380 | } 381 | }, 382 | timeline: { 383 | lineStyle: { 384 | color: '#8fd3e8', 385 | width: 1 386 | }, 387 | itemStyle: { 388 | normal: { 389 | color: '#8fd3e8', 390 | borderWidth: 1 391 | }, 392 | emphasis: { 393 | color: '#8fd3e8' 394 | } 395 | }, 396 | controlStyle: { 397 | normal: { 398 | color: '#8fd3e8', 399 | borderColor: '#8fd3e8', 400 | borderWidth: 0.5 401 | }, 402 | emphasis: { 403 | color: '#8fd3e8', 404 | borderColor: '#8fd3e8', 405 | borderWidth: 0.5 406 | } 407 | }, 408 | checkpointStyle: { 409 | color: '#8fd3e8', 410 | borderColor: 'rgba(138,124,168,0.37)' 411 | }, 412 | label: { 413 | normal: { 414 | textStyle: { 415 | color: '#8fd3e8' 416 | } 417 | }, 418 | emphasis: { 419 | textStyle: { 420 | color: '#8fd3e8' 421 | } 422 | } 423 | } 424 | }, 425 | visualMap: { 426 | color: ['#516b91', '#59c4e6', '#a5e7f0'] 427 | }, 428 | dataZoom: { 429 | backgroundColor: 'rgba(0,0,0,0)', 430 | dataBackgroundColor: 'rgba(255,255,255,0.3)', 431 | fillerColor: 'rgba(167,183,204,0.4)', 432 | handleColor: '#a7b7cc', 433 | handleSize: '100%', 434 | textStyle: { 435 | color: '#333' 436 | } 437 | }, 438 | markPoint: { 439 | label: { 440 | normal: { 441 | textStyle: { 442 | color: '#eee' 443 | } 444 | }, 445 | emphasis: { 446 | textStyle: { 447 | color: '#eee' 448 | } 449 | } 450 | } 451 | } 452 | } 453 | export default theme 454 | -------------------------------------------------------------------------------- /src/components/echarts-custom/EchartsCustom.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 11 | 12 | 83 | 84 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | import mEcharts from "./echarts-custom/EchartsCustom.vue"; 2 | // 组件列表 3 | const components = [ 4 | mEcharts 5 | ] 6 | 7 | // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册 8 | const install = (Vue: any) => { 9 | // 遍历注册全局组件 10 | components.map(component => Vue.component(component.name, component)) 11 | } 12 | 13 | export default { 14 | install 15 | } -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | 10 | 11 | declare module '@jiaminghi/data-view'; -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router/router"; 4 | import DataVVue3 from "@kjgl77/datav-vue3"; 5 | import '@/assets/scss/index.scss'; 6 | import '@/assets/icon/iconfont.css'; 7 | // 引入 全局注册组件 8 | import CustomEcharts from '@/components/index'; 9 | 10 | const app = createApp(App); 11 | 12 | app.use(router).use(CustomEcharts).use(DataVVue3).mount("#app"); 13 | -------------------------------------------------------------------------------- /src/pages/screen-bottom-left/ScreenBottomLeft.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 143 | 144 | -------------------------------------------------------------------------------- /src/pages/screen-bottom-left/chart/ChartBottomLeft.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 166 | 167 | -------------------------------------------------------------------------------- /src/pages/screen-bottom-right/ScreenBottomRight.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 96 | 97 | -------------------------------------------------------------------------------- /src/pages/screen-bottom-right/chart/ChartBottomRight.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 367 | 368 | -------------------------------------------------------------------------------- /src/pages/screen-footer/ScreenFooter.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /src/pages/screen-header/ScreenHeader.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 78 | 79 | -------------------------------------------------------------------------------- /src/pages/screen-top-center/ScreenTopCenter.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 209 | 210 | -------------------------------------------------------------------------------- /src/pages/screen-top-left1/ScreenTopLeft1.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 119 | 120 | -------------------------------------------------------------------------------- /src/pages/screen-top-left1/chart/ChartTopLeft1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 82 | 83 | -------------------------------------------------------------------------------- /src/pages/screen-top-left2/ScreenTopLeft2.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 64 | 65 | -------------------------------------------------------------------------------- /src/pages/screen-top-left2/chart/ChartTopLeft2.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 214 | 215 | -------------------------------------------------------------------------------- /src/pages/screen-top-right1/ScreenTopRight1.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 90 | 91 | -------------------------------------------------------------------------------- /src/pages/screen-top-right1/chart/ChartTopRight1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 116 | 117 | -------------------------------------------------------------------------------- /src/pages/screen-top-right2/ScreenTopRight2.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 45 | 46 | -------------------------------------------------------------------------------- /src/pages/screen/Screen.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 73 | 74 | -------------------------------------------------------------------------------- /src/router/router.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from 'vue-router' 2 | 3 | const routes: Array = [ 4 | { 5 | path: '/', 6 | name: 'Screen', 7 | component: () => import('@/pages/screen/Screen.vue') 8 | } 9 | ] 10 | 11 | const router = createRouter({ 12 | history: createWebHistory(), 13 | routes 14 | }) 15 | 16 | export default router 17 | -------------------------------------------------------------------------------- /src/utils/resize.ts: -------------------------------------------------------------------------------- 1 | import { ref } from "vue"; 2 | 3 | export default function windowResize() { 4 | // * 指向最外层容器 5 | const screenRef = ref(); 6 | // * 定时函数 7 | const timer = ref(0); 8 | // * 默认缩放值 9 | const scale = { 10 | width: "1", 11 | height: "1", 12 | }; 13 | // * 设计稿尺寸（px） 14 | const baseWidth = 1920; 15 | const baseHeight = 1080; 16 | 17 | // * 需保持的比例（默认1.77778） 18 | const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)); 19 | const calcRate = () => { 20 | // 当前宽高比 21 | const currentRate = parseFloat( 22 | (window.innerWidth / window.innerHeight).toFixed(5) 23 | ); 24 | if (screenRef.value) { 25 | if (currentRate > baseProportion) { 26 | // 表示更宽 27 | scale.width = ( 28 | (window.innerHeight * baseProportion) / 29 | baseWidth 30 | ).toFixed(5); 31 | scale.height = (window.innerHeight / baseHeight).toFixed(5); 32 | screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`; 33 | } else { 34 | // 表示更高 35 | scale.height = ( 36 | window.innerWidth / 37 | baseProportion / 38 | baseHeight 39 | ).toFixed(5); 40 | scale.width = (window.innerWidth / baseWidth).toFixed(5); 41 | screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`; 42 | } 43 | } 44 | }; 45 | 46 | const resize = () => { 47 | clearTimeout(timer.value); 48 | timer.value = window.setTimeout(() => { 49 | calcRate(); 50 | }, 200); 51 | }; 52 | 53 | // 改变窗口大小重新绘制 54 | const windowDraw = () => { 55 | window.addEventListener("resize", resize); 56 | }; 57 | 58 | // 改变窗口大小重新绘制 59 | const unWindowDraw = () => { 60 | window.removeEventListener("resize", resize); 61 | }; 62 | 63 | return { 64 | screenRef, 65 | calcRate, 66 | windowDraw, 67 | unWindowDraw, 68 | }; 69 | } 70 | -------------------------------------------------------------------------------- /src/utils/util.ts: -------------------------------------------------------------------------------- 1 | export const formatTime = ( 2 | time: string | number | Date, 3 | fmt: string 4 | ): string => { 5 | if (!time) return '' 6 | const date = new Date(time) 7 | const o = { 8 | 'M+': date.getMonth() + 1, 9 | 'd+': date.getDate(), 10 | 'H+': date.getHours(), 11 | 'm+': date.getMinutes(), 12 | 's+': date.getSeconds(), 13 | 'q+': Math.floor((date.getMonth() + 3) / 3), 14 | S: date.getMilliseconds(), 15 | } 16 | if (/(y+)/.test(fmt)) 17 | fmt = fmt.replace( 18 | RegExp.$1, 19 | (date.getFullYear() + '').substr(4 - RegExp.$1.length) 20 | ) 21 | for (const k in o) { 22 | if (new RegExp('(' + k + ')').test(fmt)) { 23 | fmt = fmt.replace( 24 | RegExp.$1, 25 | // @ts-ignore: Unreachable code error 26 | RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length) 27 | ) 28 | } 29 | } 30 | return fmt 31 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": false, 12 | "esModuleInterop": true, 13 | "lib": ["esnext", "dom"], 14 | "types": [ 15 | "node" 16 | ], 17 | "baseUrl": ".", 18 | "paths": { 19 | "@/*": [ 20 | "src/*" 21 | ] 22 | } 23 | }, 24 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 25 | "references": [{ "path": "./tsconfig.node.json" }] 26 | } 27 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | import { resolve } from "path"; 4 | import compress from "vite-plugin-compression"; 5 | import { visualizer } from "rollup-plugin-visualizer"; 6 | // import viteImagemin from 'vite-plugin-imagemin'; 7 | 8 | // https://vitejs.dev/config/ 9 | export default defineConfig({ 10 | resolve: { 11 | extensions: [".js", ".vue", ".json", "scss", ".ts"], 12 | alias: [ 13 | { 14 | find: "@", 15 | replacement: resolve(__dirname, "src"), 16 | }, 17 | { 18 | find: "components", 19 | replacement: resolve(__dirname, "src/components"), 20 | }, 21 | { 22 | find: "utils", 23 | replacement: resolve(__dirname, "src/utils"), 24 | }, 25 | ], 26 | }, 27 | server: { 28 | open: true, 29 | port: 6688, 30 | }, 31 | build: { 32 | assetsDir: "./static", 33 | chunkSizeWarningLimit: 500, 34 | minify: "terser", 35 | cssCodeSplit: true, // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中 36 | terserOptions: { 37 | compress: { 38 | // warnings: false, 39 | drop_console: true, //打包时删除 console 40 | drop_debugger: true, //打包时删除 debugger 41 | pure_funcs: ["console.log"], 42 | }, 43 | output: { 44 | // 去掉注释内容 45 | comments: true, 46 | }, 47 | }, 48 | rollupOptions: { 49 | output: { 50 | // manualChunks: { 51 | // // 拆分代码，这个就是分包，配置完后自动按需加载，现在还比不上webpack的splitchunk，不过也能用了。 52 | // vue: ["vue", "vue-router", "vuex"], 53 | // echarts: ["echarts"], 54 | // }, 55 | manualChunks(id) { 56 | if (id.includes("node_modules")) { 57 | return id 58 | .toString() 59 | .split("node_modules/")[1] 60 | .split("/")[0] 61 | .toString(); 62 | } 63 | }, 64 | }, 65 | }, 66 | }, 67 | plugins: [ 68 | vue(), 69 | compress(), 70 | // viteImagemin({ 71 | // gifsicle: { 72 | // optimizationLevel: 7, 73 | // interlaced: false, 74 | // }, 75 | // optipng: { 76 | // optimizationLevel: 7, 77 | // }, 78 | // mozjpeg: { 79 | // quality: 20, 80 | // }, 81 | // pngquant: { 82 | // quality: [0.8, 0.9], 83 | // speed: 4, 84 | // }, 85 | // svgo: { 86 | // plugins: [ 87 | // { 88 | // name: "removeViewBox", 89 | // }, 90 | // { 91 | // name: "removeEmptyAttrs", 92 | // active: false, 93 | // }, 94 | // ], 95 | // }, 96 | // }), 97 | visualizer(), 98 | ], 99 | }); 100 | --------------------------------------------------------------------------------