diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000000000000000000000000000000000000..ea6e20f5b2e79f76a0032c30d99b9fcd346232fd --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +# http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +insert_final_newline = false +trim_trailing_whitespace = false diff --git a/.env.development b/.env.development new file mode 100644 index 0000000000000000000000000000000000000000..de583d0940d6ec7a20f3b3a29172729e87173fcf --- /dev/null +++ b/.env.development @@ -0,0 +1,5 @@ +# just a flag +ENV = 'development' + +# base api +VUE_APP_BASE_API = '/dev-api' diff --git a/.env.production b/.env.production new file mode 100644 index 0000000000000000000000000000000000000000..80c810301f3fbaca271b9f3ef4fc1011a3904d8a --- /dev/null +++ b/.env.production @@ -0,0 +1,6 @@ +# just a flag +ENV = 'production' + +# base api +VUE_APP_BASE_API = '/prod-api' + diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..9ad28d23dd04e6d428779b6567d0731ff8d40dd5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,16 @@ +.DS_Store +node_modules/ +dist/ +npm-debug.log* +yarn-debug.log* +yarn-error.log* +package-lock.json +tests/**/coverage/ + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln diff --git a/.history/README_20210927134945.md b/.history/README_20210927134945.md new file mode 100644 index 0000000000000000000000000000000000000000..3ef918ef40a81a3f47859eb0d5fb8ca706e44e53 --- /dev/null +++ b/.history/README_20210927134945.md @@ -0,0 +1,26 @@ + +## Build Setup + +```bash + +# 安装依赖 +npm install + +# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 +npm install --registry=https://registry.npm.taobao.org + +# 启动服务 +npm run dev +``` + +浏览器访问 [http://localhost:9528](http://localhost:9528) + +## 发布 + +```bash +# 构建测试环境 +npm run build:stage + +# 构建生产环境 +npm run build:prod +``` diff --git a/.history/README_20210928092042.md b/.history/README_20210928092042.md new file mode 100644 index 0000000000000000000000000000000000000000..e42cfe07aba3f41ff15b615729271670413f8d5c --- /dev/null +++ b/.history/README_20210928092042.md @@ -0,0 +1,33 @@ + +## 简介 +```bash +大数据可视化平台 +基于Vue + DataV + Echarts开发 + + +``` +## Build Setup + +```bash + +# 安装依赖 +npm install + +# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 +npm install --registry=https://registry.npm.taobao.org + +# 启动服务 +npm run dev +``` + +浏览器访问 [http://localhost:9528](http://localhost:9528) + +## 发布 + +```bash +# 构建测试环境 +npm run build:stage + +# 构建生产环境 +npm run build:prod +``` diff --git a/.history/README_20210928093555.md b/.history/README_20210928093555.md new file mode 100644 index 0000000000000000000000000000000000000000..8e92f8179a7e9a1a7ea8a5308de01156104d96a2 --- /dev/null +++ b/.history/README_20210928093555.md @@ -0,0 +1,34 @@ + +## 简介 +```bash +大数据可视化平台 +基于Vue + DataV + Echarts开发 +![Alt text]("./src/assets/DP.png") + + +``` +## Build Setup + +```bash + +# 安装依赖 +npm install + +# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 +npm install --registry=https://registry.npm.taobao.org + +# 启动服务 +npm run dev +``` + +浏览器访问 [http://localhost:9528](http://localhost:9528) + +## 发布 + +```bash +# 构建测试环境 +npm run build:stage + +# 构建生产环境 +npm run build:prod +``` diff --git a/.history/README_20211018175637.md b/.history/README_20211018175637.md new file mode 100644 index 0000000000000000000000000000000000000000..322f4c80ba0187f901439de6f098fc1bac6f430a --- /dev/null +++ b/.history/README_20211018175637.md @@ -0,0 +1,38 @@ + +## 简介 +```bash +大数据可视化平台 +基于Vue + DataV + Echarts开发 + +大哥们，觉得可以的话麻烦点个Star吧，跪谢 +``` + +项目在线浏览： + [点击浏览](http://121.40.199.11/)
+![avatar](https://gitee.com/ymdqq/vue-datav-screen/raw/master/src/assets/DP.png) +## Build Setup + +```bash + +# 安装依赖 +npm install + +# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。 +# 可以通过如下操作解决 npm 下载速度慢的问题 +npm install --registry=https://registry.npm.taobao.org + +# 启动服务 +npm run dev +``` + +浏览器访问 [http://localhost:9528](http://localhost:9528) + +## 发布 + +```bash +# 构建测试环境 +npm run build:stage + +# 构建生产环境 +npm run build:prod +``` diff --git a/.history/src/components/bottomLeftMid_20211011165048.vue b/.history/src/components/bottomLeftMid_20211011165048.vue new file mode 100644 index 0000000000000000000000000000000000000000..58f734594bb1e2250234619024ee73ceec31ec9a --- /dev/null +++ b/.history/src/components/bottomLeftMid_20211011165048.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/.history/src/components/bottomLeftMid_20211013162652.vue b/.history/src/components/bottomLeftMid_20211013162652.vue new file mode 100644 index 0000000000000000000000000000000000000000..e8eebffb9727950cc45477f2d7b826c341797fb2 --- /dev/null +++ b/.history/src/components/bottomLeftMid_20211013162652.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/.history/src/components/bottomMid_20211011165048.vue b/.history/src/components/bottomMid_20211011165048.vue new file mode 100644 index 0000000000000000000000000000000000000000..e1ce4c22cfca53d250cca15249d3d3f1ee0e6ebb --- /dev/null +++ b/.history/src/components/bottomMid_20211011165048.vue @@ -0,0 +1,65 @@ + + + + + + diff --git a/.history/src/components/bottomMid_20211013162641.vue b/.history/src/components/bottomMid_20211013162641.vue new file mode 100644 index 0000000000000000000000000000000000000000..9115e4e56514edfb9c9a69d1f5ff0a1bb30c972a --- /dev/null +++ b/.history/src/components/bottomMid_20211013162641.vue @@ -0,0 +1,65 @@ + + + + + + diff --git a/.history/src/components/bottomRightMid_20211011165048.vue b/.history/src/components/bottomRightMid_20211011165048.vue new file mode 100644 index 0000000000000000000000000000000000000000..98bec0ec44b2c355a074c176ea83c2543d2a7fb6 --- /dev/null +++ b/.history/src/components/bottomRightMid_20211011165048.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/.history/src/components/bottomRightMid_20211013162640.vue b/.history/src/components/bottomRightMid_20211013162640.vue new file mode 100644 index 0000000000000000000000000000000000000000..bd7ca9b0fdba61e38ad40c6154270069ae180a4f --- /dev/null +++ b/.history/src/components/bottomRightMid_20211013162640.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/.history/vue.config_20210927142610.js b/.history/vue.config_20210927142610.js new file mode 100644 index 0000000000000000000000000000000000000000..921f516530e3e9c01f4137d067878b4cd54fb1b9 --- /dev/null +++ b/.history/vue.config_20210927142610.js @@ -0,0 +1,103 @@ +/* + * @Description: + * @Version: 2.0 + * @Autor: LMJ + * @Date: 2021-09-27 13:40:21 + * @LastEditors: LMJ + * @LastEditTime: 2021-09-27 14:26:11 + */ +'use strict' +const path = require('path') +const defaultSettings = require('./src/settings.js') + +function resolve(dir) { + return path.join(__dirname, dir) +} + +const name = defaultSettings.title || 'vue-DataV' // page title + +const port = process.env.port || process.env.npm_config_port || 9528 // dev port + +module.exports = { + publicPath: '/', + outputDir: 'dist', + assetsDir: 'static', + lintOnSave: process.env.NODE_ENV === 'development', + productionSourceMap: false, + devServer: { + port: port, + open: true, + overlay: { + warnings: false, + errors: true + }, + }, + configureWebpack: { + name: name, + resolve: { + alias: { + '@': resolve('src') + } + } + }, + chainWebpack(config) { + config.plugin('preload').tap(() => [ + { + rel: 'preload', + fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], + include: 'initial' + } + ]) + + config.plugins.delete('prefetch') + + config.module + .rule('svg') + .exclude.add(resolve('src/icons')) + .end() + config.module + .rule('icons') + .test(/\.svg$/) + .include.add(resolve('src/icons')) + .end() + .use('svg-sprite-loader') + .loader('svg-sprite-loader') + .options({ + symbolId: 'icon-[name]' + }) + .end() + + config + .when(process.env.NODE_ENV !== 'development', + config => { + config + .plugin('ScriptExtHtmlWebpackPlugin') + .after('html') + .use('script-ext-html-webpack-plugin', [{ + inline: /runtime\..*\.js$/ + }]) + .end() + config + .optimization.splitChunks({ + chunks: 'all', + cacheGroups: { + libs: { + name: 'chunk-libs', + test: /[\\/]node_modules[\\/]/, + priority: 10, + chunks: 'initial' + }, + commons: { + name: 'chunk-commons', + test: resolve('src/components'), + minChunks: 3, + priority: 5, + reuseExistingChunk: true + } + } + }) + config.optimization.runtimeChunk('single') + } + ) + } +} diff --git a/.history/vue.config_20210928092649.js b/.history/vue.config_20210928092649.js new file mode 100644 index 0000000000000000000000000000000000000000..e02fb40d05d061ade76b7f5e0711ef786d6a6c68 --- /dev/null +++ b/.history/vue.config_20210928092649.js @@ -0,0 +1,53 @@ +/* + * @Description: + * @Version: 2.0 + * @Autor: LMJ + * @Date: 2021-09-27 13:40:21 + * @LastEditors: LMJ + * @LastEditTime: 2021-09-28 09:26:49 + */ +'use strict' +const path = require('path') +const defaultSettings = require('./src/settings.js') + +function resolve(dir) { + return path.join(__dirname, dir) +} + +const name = defaultSettings.title || 'vue-DataV' // page title + +const port = process.env.port || process.env.npm_config_port || 9528 // dev port + +module.exports = { + publicPath: '/', + outputDir: 'dist', + assetsDir: 'static', + lintOnSave: process.env.NODE_ENV === 'development', + productionSourceMap: false, + devServer: { + port: port, + open: true, + overlay: { + warnings: false, + errors: true + }, + }, + configureWebpack: { + name: name, + resolve: { + alias: { + '@': resolve('src') + } + } + }, + chainWebpack(config) { + config.plugin('preload').tap(() => [ + { + rel: 'preload', + fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], + include: 'initial' + } + ]) + + } +} diff --git a/README.en.md b/README.en.md deleted file mode 100644 index d5194bccdc528782afda0dd0c4981d50d4f58b98..0000000000000000000000000000000000000000 --- a/README.en.md +++ /dev/null @@ -1,36 +0,0 @@ -# vue-datav-screen - -#### Description -基于VUE+DATAV+ECHARTS开发的大数据可视化大屏 - -#### Software Architecture -Software architecture description - -#### Installation - -1. xxxx -2. xxxx -3. xxxx - -#### Instructions - -1. xxxx -2. xxxx -3. xxxx - -#### Contribution - -1. Fork the repository -2. Create Feat_xxx branch -3. Commit your code -4. Create Pull Request - - -#### Gitee Feature - -1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md -2. Gitee blog [blog.gitee.com](https://blog.gitee.com) -3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore) -4. The most valuable open source project [GVP](https://gitee.com/gvp) -5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help) -6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) diff --git a/README.md b/README.md index 70fb8cb123d18f24431e8ca76e0f73044c63e82b..847e46f50dc93e3eeeebb2fc095f66e93365be64 100644 --- a/README.md +++ b/README.md @@ -1,37 +1,40 @@ -# vue-datav-screen -#### 介绍 -基于VUE+DATAV+ECHARTS开发的大数据可视化大屏 +## 简介 +```bash +大数据可视化平台 +基于Vue + DataV + Echarts开发 -#### 软件架构 -软件架构说明 +大哥们，觉得可以的话麻烦点个Star吧，跪谢 +``` +项目在线浏览： + [点击浏览](http:106.13.19.16/)
+![avatar](https://gitee.com/ymdqq/vue-datav-screen/raw/master/src/assets/DP.png) +![avatar](https://gitee.com/ymdqq/vue-datav-screen/raw/master/src/assets/tt0.top-590589.gif) -#### 安装教程 +## Build Setup -1. xxxx -2. xxxx -3. xxxx +```bash -#### 使用说明 +# 安装依赖 +npm install -1. xxxx -2. xxxx -3. xxxx +# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。 +# 可以通过如下操作解决 npm 下载速度慢的问题 +npm install --registry=https://registry.npm.taobao.org -#### 参与贡献 +# 启动服务 +npm run dev +``` -1. Fork 本仓库 -2. 新建 Feat_xxx 分支 -3. 提交代码 -4. 新建 Pull Request +浏览器访问 [http://localhost:9528](http://localhost:9528) +## 发布 -#### 特技 +```bash +# 构建测试环境 +npm run build:stage -1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md -2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) -3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 -4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 -5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) -6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) +# 构建生产环境 +npm run build:prod +``` diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000000000000000000000000000000000000..51ed5042710bfebbcd94ae293633ad257086e0ff --- /dev/null +++ b/babel.config.js @@ -0,0 +1,18 @@ +/* + * @Description: + * @Version: 2.0 + * @Autor: LMJ + * @Date: 2021-09-27 13:40:21 + * @LastEditors: LMJ + * @LastEditTime: 2021-09-27 14:00:02 + */ +module.exports = { + presets: [ + '@vue/cli-plugin-babel/preset' + ], + 'env': { + 'development': { + 'plugins': ['dynamic-import-node'] + } + } +} diff --git a/build/index.js b/build/index.js new file mode 100644 index 0000000000000000000000000000000000000000..0c57de2aad9ee533046b71c08b56943be304d867 --- /dev/null +++ b/build/index.js @@ -0,0 +1,35 @@ +const { run } = require('runjs') +const chalk = require('chalk') +const config = require('../vue.config.js') +const rawArgv = process.argv.slice(2) +const args = rawArgv.join(' ') + +if (process.env.npm_config_preview || rawArgv.includes('--preview')) { + const report = rawArgv.includes('--report') + + run(`vue-cli-service build ${args}`) + + const port = 9526 + const publicPath = config.publicPath + + var connect = require('connect') + var serveStatic = require('serve-static') + const app = connect() + + app.use( + publicPath, + serveStatic('./dist', { + index: ['index.html', '/'] + }) + ) + + app.listen(port, function () { + console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`)) + if (report) { + console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`)) + } + + }) +} else { + run(`vue-cli-service build ${args}`) +} diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000000000000000000000000000000000000..adc48451da0ae4734281e5d1cc108fe4779ebfd4 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "baseUrl": "./", + "paths": { + "@/*": ["src/*"] + } + }, + "exclude": ["node_modules", "dist"] +} diff --git a/package.json b/package.json new file mode 100644 index 0000000000000000000000000000000000000000..d00ea4a3c6bc99ad388392f908212cf395d996cd --- /dev/null +++ b/package.json @@ -0,0 +1,50 @@ +{ + "name": "vue-datav", + "version": "4.4.0", + "description": "vue-datav", + "scripts": { + "dev": "vue-cli-service serve", + "build:prod": "vue-cli-service build", + "build:stage": "vue-cli-service build --mode staging" + }, + "dependencies": { + "@jiaminghi/data-view": "^2.10.0", + "axios": "0.18.1", + "core-js": "^3.18.1", + "echarts": "^5.2.1", + "normalize.css": "7.0.0", + "nprogress": "0.2.0", + "path-to-regexp": "2.4.0", + "regenerator-runtime": "^0.13.9", + "vue": "2.6.10", + "vue-count-to": "^1.0.13", + "vue-router": "3.0.6", + "vuex": "^3.6.2" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "4.4.4", + "@vue/cli-service": "4.4.4", + "autoprefixer": "9.5.1", + "babel-plugin-dynamic-import-node": "2.3.3", + "chalk": "2.4.2", + "connect": "3.6.6", + "html-webpack-plugin": "3.2.0", + "runjs": "4.3.2", + "sass": "1.26.8", + "sass-loader": "8.0.2", + "script-ext-html-webpack-plugin": "2.1.3", + "serve-static": "1.13.2", + "svg-sprite-loader": "4.1.3", + "svgo": "1.2.2", + "vue-template-compiler": "2.6.10" + }, + "browserslist": [ + "> 1%", + "last 2 versions" + ], + "engines": { + "node": ">=8.9", + "npm": ">= 3.0.0" + }, + "license": "MIT" +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000000000000000000000000000000000000..25a5e54320bfaec5f23acb98f223078fea2632b7 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,14 @@ +/* + * @Description: + * @Version: 2.0 + * @Autor: LMJ + * @Date: 2021-09-27 13:40:21 + * @LastEditors: LMJ + * @LastEditTime: 2021-09-27 14:02:28 + */ + +module.exports = { + 'plugins': { + 'autoprefixer': {} + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..34b63ac63a87ee3ea8e7a0f3f5b5406c437e2112 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000000000000000000000000000000000000..fa2be9164ac798754109790fb853df97fc5e85d4 --- /dev/null +++ b/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + <%= webpackConfig.name %> + + + +
+ + + diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000000000000000000000000000000000000..ec9032c1c638e918ec97e413aa081993a95048f4 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,11 @@ + + + diff --git a/src/assets/404_images/404.png b/src/assets/404_images/404.png new file mode 100644 index 0000000000000000000000000000000000000000..3d8e2305cc973ad2121403aee4bf08728f76c461 Binary files /dev/null and b/src/assets/404_images/404.png differ diff --git a/src/assets/404_images/404_cloud.png b/src/assets/404_images/404_cloud.png new file mode 100644 index 0000000000000000000000000000000000000000..c6281d09013e0a2c5f8e699a0a6038d9480291e5 Binary files /dev/null and b/src/assets/404_images/404_cloud.png differ diff --git a/src/assets/DP.png b/src/assets/DP.png new file mode 100644 index 0000000000000000000000000000000000000000..c5cbb58040fd81899b3a1947ff81cea48725ddaf Binary files /dev/null and b/src/assets/DP.png differ diff --git a/src/assets/bg.png b/src/assets/bg.png new file mode 100644 index 0000000000000000000000000000000000000000..dbcebaeeebc83e74f801a1b15ee31bae1903850a Binary files /dev/null and b/src/assets/bg.png differ diff --git a/src/assets/tt0.top-590589.gif b/src/assets/tt0.top-590589.gif new file mode 100644 index 0000000000000000000000000000000000000000..8c94128f5a02bd128f07326c84ab16a51d79219c Binary files /dev/null and b/src/assets/tt0.top-590589.gif differ diff --git a/src/components/bottomLeft.vue b/src/components/bottomLeft.vue new file mode 100644 index 0000000000000000000000000000000000000000..3a7eca7366f59143df54510c39e814d733ce4c99 --- /dev/null +++ b/src/components/bottomLeft.vue @@ -0,0 +1,115 @@ + + + + + + diff --git a/src/components/bottomLeftMid.vue b/src/components/bottomLeftMid.vue new file mode 100644 index 0000000000000000000000000000000000000000..e8eebffb9727950cc45477f2d7b826c341797fb2 --- /dev/null +++ b/src/components/bottomLeftMid.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/components/bottomMid.vue b/src/components/bottomMid.vue new file mode 100644 index 0000000000000000000000000000000000000000..9115e4e56514edfb9c9a69d1f5ff0a1bb30c972a --- /dev/null +++ b/src/components/bottomMid.vue @@ -0,0 +1,65 @@ + + + + + + diff --git a/src/components/bottomRight.vue b/src/components/bottomRight.vue new file mode 100644 index 0000000000000000000000000000000000000000..29fdeb0291f514549e60b2d1a416b86ebf3b99a0 --- /dev/null +++ b/src/components/bottomRight.vue @@ -0,0 +1,159 @@ + + + + + + diff --git a/src/components/bottomRightMid.vue b/src/components/bottomRightMid.vue new file mode 100644 index 0000000000000000000000000000000000000000..bd7ca9b0fdba61e38ad40c6154270069ae180a4f --- /dev/null +++ b/src/components/bottomRightMid.vue @@ -0,0 +1,99 @@ + + + + + + diff --git a/src/components/table1.vue b/src/components/table1.vue new file mode 100644 index 0000000000000000000000000000000000000000..e439fbdb02e80df1f26a34b1f2d2cd26860d9243 --- /dev/null +++ b/src/components/table1.vue @@ -0,0 +1,212 @@ + + + + + + diff --git a/src/components/table2.vue b/src/components/table2.vue new file mode 100644 index 0000000000000000000000000000000000000000..b49c0b963f3567ca68db4903f6d82fe7bedf8578 --- /dev/null +++ b/src/components/table2.vue @@ -0,0 +1,94 @@ + + + + + + diff --git a/src/components/topLeftChart1.vue b/src/components/topLeftChart1.vue new file mode 100644 index 0000000000000000000000000000000000000000..5beca14b29eb6e145bbcf7dff210f7ebc9649cce --- /dev/null +++ b/src/components/topLeftChart1.vue @@ -0,0 +1,97 @@ + + + + + + diff --git a/src/components/topLeftChart2.vue b/src/components/topLeftChart2.vue new file mode 100644 index 0000000000000000000000000000000000000000..9e39a25967aecc31f792de1ba33c81f3374a5c67 --- /dev/null +++ b/src/components/topLeftChart2.vue @@ -0,0 +1,106 @@ + + + + + + diff --git a/src/components/topRightChart1.vue b/src/components/topRightChart1.vue new file mode 100644 index 0000000000000000000000000000000000000000..90f8c595772fd86519c689d442cd69a4a81ba2f2 --- /dev/null +++ b/src/components/topRightChart1.vue @@ -0,0 +1,111 @@ + + + + + + diff --git a/src/components/topRightChart2.vue b/src/components/topRightChart2.vue new file mode 100644 index 0000000000000000000000000000000000000000..5774bd01df82df081d710772469660c3b7c62f69 --- /dev/null +++ b/src/components/topRightChart2.vue @@ -0,0 +1,154 @@ + + + + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000000000000000000000000000000000000..0db174af1931c352cc9f4851e74969ea2ad91a3e --- /dev/null +++ b/src/main.js @@ -0,0 +1,25 @@ +/* + * @Description: + * @Version: 2.0 + * @Autor: LMJ + * @Date: 2021-09-27 13:40:21 + * @LastEditors: LMJ + * @LastEditTime: 2021-09-27 14:21:50 + */ +import Vue from 'vue' +import 'normalize.css/normalize.css' +import '@/styles/index.scss' +import App from './App' +import router from './router' +import Echarts from 'echarts' +import dataV from '@jiaminghi/data-view' +Vue.use(dataV) + + +Vue.config.productionTip = false + +new Vue({ + el: '#app', + router, + render: h => h(App) +}) diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..d9a5f10f48960f94dcd247f6ca2f16fbd9521717 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,35 @@ +/* + * @Description: + * @Version: 2.0 + * @Autor: LMJ + * @Date: 2021-09-27 13:40:21 + * @LastEditors: LMJ + * @LastEditTime: 2021-09-27 14:19:50 + */ +import Vue from 'vue' +import Router from 'vue-router' + +Vue.use(Router) + +export const constantRoutes = [ + { + path: '/', + component: () => import('@/views/dashboard/index'), + }, + { path: '*', redirect: '/404', hidden: true } +] + +const createRouter = () => new Router({ + mode: 'history', + scrollBehavior: () => ({ y: 0 }), + routes: constantRoutes +}) + +const router = createRouter() + +export function resetRouter() { + const newRouter = createRouter() + router.matcher = newRouter.matcher +} + +export default router diff --git a/src/settings.js b/src/settings.js new file mode 100644 index 0000000000000000000000000000000000000000..d8d043e12a5b50bb7d152095ec6529bb55d7b98d --- /dev/null +++ b/src/settings.js @@ -0,0 +1,9 @@ + +module.exports = { + + title: 'Vue-DataV', + + fixedHeader: false, + + sidebarLogo: false +} diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss new file mode 100644 index 0000000000000000000000000000000000000000..00624119c460a57d7ff146397db37350705af5a4 --- /dev/null +++ b/src/styles/element-ui.scss @@ -0,0 +1,49 @@ +// cover some element-ui styles + +.el-breadcrumb__inner, +.el-breadcrumb__inner a { + font-weight: 400 !important; +} + +.el-upload { + input[type="file"] { + display: none !important; + } +} + +.el-upload__input { + display: none; +} + + +// to fixed https://github.com/ElemeFE/element/issues/2461 +.el-dialog { + transform: none; + left: 0; + position: relative; + margin: 0 auto; +} + +// refine element ui upload +.upload-container { + .el-upload { + width: 100%; + + .el-upload-dragger { + width: 100%; + height: 200px; + } + } +} + +// dropdown +.el-dropdown-menu { + a { + display: block + } +} + +// to fix el-date-picker css style +.el-range-separator { + box-sizing: content-box; +} diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..3b4da517cd9b276c82ab9b51a85cc0a206f2c102 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,65 @@ +@import './variables.scss'; +@import './mixin.scss'; +@import './transition.scss'; +@import './element-ui.scss'; +@import './sidebar.scss'; + +body { + height: 100%; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; +} + +label { + font-weight: 700; +} + +html { + height: 100%; + box-sizing: border-box; +} + +#app { + height: 100%; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +a:focus, +a:active { + outline: none; +} + +a, +a:focus, +a:hover { + cursor: pointer; + color: inherit; + text-decoration: none; +} + +div:focus { + outline: none; +} + +.clearfix { + &:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } +} + +// main-container global css +.app-container { + padding: 20px; +} diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss new file mode 100644 index 0000000000000000000000000000000000000000..36b74bbd995e7cc5c6baab1ce6808ecfda8c27ae --- /dev/null +++ b/src/styles/mixin.scss @@ -0,0 +1,28 @@ +@mixin clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} + +@mixin scrollBar { + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } +} + +@mixin relative { + position: relative; + width: 100%; + height: 100%; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss new file mode 100644 index 0000000000000000000000000000000000000000..94760cc76136d17fe1350793dd07b98e85d370bb --- /dev/null +++ b/src/styles/sidebar.scss @@ -0,0 +1,226 @@ +#app { + + .main-container { + min-height: 100%; + transition: margin-left .28s; + margin-left: $sideBarWidth; + position: relative; + } + + .sidebar-container { + transition: width 0.28s; + width: $sideBarWidth !important; + background-color: $menuBg; + height: 100%; + position: fixed; + font-size: 0px; + top: 0; + bottom: 0; + left: 0; + z-index: 1001; + overflow: hidden; + + // reset element-ui css + .horizontal-collapse-transition { + transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; + } + + .scrollbar-wrapper { + overflow-x: hidden !important; + } + + .el-scrollbar__bar.is-vertical { + right: 0px; + } + + .el-scrollbar { + height: 100%; + } + + &.has-logo { + .el-scrollbar { + height: calc(100% - 50px); + } + } + + .is-horizontal { + display: none; + } + + a { + display: inline-block; + width: 100%; + overflow: hidden; + } + + .svg-icon { + margin-right: 16px; + } + + .sub-el-icon { + margin-right: 12px; + margin-left: -2px; + } + + .el-menu { + border: none; + height: 100%; + width: 100% !important; + } + + // menu hover + .submenu-title-noDropdown, + .el-submenu__title { + &:hover { + background-color: $menuHover !important; + } + } + + .is-active>.el-submenu__title { + color: $subMenuActiveText !important; + } + + & .nest-menu .el-submenu>.el-submenu__title, + & .el-submenu .el-menu-item { + min-width: $sideBarWidth !important; + background-color: $subMenuBg !important; + + &:hover { + background-color: $subMenuHover !important; + } + } + } + + .hideSidebar { + .sidebar-container { + width: 54px !important; + } + + .main-container { + margin-left: 54px; + } + + .submenu-title-noDropdown { + padding: 0 !important; + position: relative; + + .el-tooltip { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + + .sub-el-icon { + margin-left: 19px; + } + } + } + + .el-submenu { + overflow: hidden; + + &>.el-submenu__title { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + + .sub-el-icon { + margin-left: 19px; + } + + .el-submenu__icon-arrow { + display: none; + } + } + } + + .el-menu--collapse { + .el-submenu { + &>.el-submenu__title { + &>span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + } + } + } + } + + .el-menu--collapse .el-menu .el-submenu { + min-width: $sideBarWidth !important; + } + + // mobile responsive + .mobile { + .main-container { + margin-left: 0px; + } + + .sidebar-container { + transition: transform .28s; + width: $sideBarWidth !important; + } + + &.hideSidebar { + .sidebar-container { + pointer-events: none; + transition-duration: 0.3s; + transform: translate3d(-$sideBarWidth, 0, 0); + } + } + } + + .withoutAnimation { + + .main-container, + .sidebar-container { + transition: none; + } + } +} + +// when menu collapsed +.el-menu--vertical { + &>.el-menu { + .svg-icon { + margin-right: 16px; + } + .sub-el-icon { + margin-right: 12px; + margin-left: -2px; + } + } + + .nest-menu .el-submenu>.el-submenu__title, + .el-menu-item { + &:hover { + // you can use $subMenuHover + background-color: $menuHover !important; + } + } + + // the scroll bar appears when the subMenu is too long + >.el-menu--popup { + max-height: 100vh; + overflow-y: auto; + + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } + } +} diff --git a/src/styles/transition.scss b/src/styles/transition.scss new file mode 100644 index 0000000000000000000000000000000000000000..4cb27cc811e28605bb6d0657a6257f0c901f6809 --- /dev/null +++ b/src/styles/transition.scss @@ -0,0 +1,48 @@ +// global transition css + +/* fade */ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.28s; +} + +.fade-enter, +.fade-leave-active { + opacity: 0; +} + +/* fade-transform */ +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all .5s; +} + +.fade-transform-enter { + opacity: 0; + transform: translateX(-30px); +} + +.fade-transform-leave-to { + opacity: 0; + transform: translateX(30px); +} + +/* breadcrumb transition */ +.breadcrumb-enter-active, +.breadcrumb-leave-active { + transition: all .5s; +} + +.breadcrumb-enter, +.breadcrumb-leave-active { + opacity: 0; + transform: translateX(20px); +} + +.breadcrumb-move { + transition: all .5s; +} + +.breadcrumb-leave-active { + position: absolute; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000000000000000000000000000000000..be5577263874f458b69364b492fd1dd6f26247fa --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,25 @@ +// sidebar +$menuText:#bfcbd9; +$menuActiveText:#409EFF; +$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 + +$menuBg:#304156; +$menuHover:#263445; + +$subMenuBg:#1f2d3d; +$subMenuHover:#001528; + +$sideBarWidth: 210px; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +:export { + menuText: $menuText; + menuActiveText: $menuActiveText; + subMenuActiveText: $subMenuActiveText; + menuBg: $menuBg; + menuHover: $menuHover; + subMenuBg: $subMenuBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; +} diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js new file mode 100644 index 0000000000000000000000000000000000000000..2e7ed1284b9e883cd0efa781477f9a5da94d9689 --- /dev/null +++ b/src/utils/get-page-title.js @@ -0,0 +1,18 @@ +/* + * @Description: + * @Version: 2.0 + * @Autor: LMJ + * @Date: 2021-09-27 13:58:54 + * @LastEditors: LMJ + * @LastEditTime: 2021-09-27 13:58:55 + */ +import defaultSettings from '@/settings' + +const title = defaultSettings.title || 'Vue Admin Template' + +export default function getPageTitle(pageTitle) { + if (pageTitle) { + return `${pageTitle} - ${title}` + } + return `${title}` +} diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000000000000000000000000000000000000..4830c04890a16a899c846ff2d5aab320c5f2a0c5 --- /dev/null +++ b/src/utils/index.js @@ -0,0 +1,117 @@ +/** + * Created by PanJiaChen on 16/11/18. + */ + +/** + * Parse the time to string + * @param {(Object|string|number)} time + * @param {string} cFormat + * @returns {string | null} + */ +export function parseTime(time, cFormat) { + if (arguments.length === 0 || !time) { + return null + } + const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' + let date + if (typeof time === 'object') { + date = time + } else { + if ((typeof time === 'string')) { + if ((/^[0-9]+$/.test(time))) { + // support "1548221490638" + time = parseInt(time) + } else { + // support safari + // https://stackoverflow.com/questions/4310953/invalid-date-in-safari + time = time.replace(new RegExp(/-/gm), '/') + } + } + + if ((typeof time === 'number') && (time.toString().length === 10)) { + time = time * 1000 + } + date = new Date(time) + } + const formatObj = { + y: date.getFullYear(), + m: date.getMonth() + 1, + d: date.getDate(), + h: date.getHours(), + i: date.getMinutes(), + s: date.getSeconds(), + a: date.getDay() + } + const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => { + const value = formatObj[key] + // Note: getDay() returns 0 on Sunday + if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] } + return value.toString().padStart(2, '0') + }) + return time_str +} + +/** + * @param {number} time + * @param {string} option + * @returns {string} + */ +export function formatTime(time, option) { + if (('' + time).length === 10) { + time = parseInt(time) * 1000 + } else { + time = +time + } + const d = new Date(time) + const now = Date.now() + + const diff = (now - d) / 1000 + + if (diff < 30) { + return '刚刚' + } else if (diff < 3600) { + // less 1 hour + return Math.ceil(diff / 60) + '分钟前' + } else if (diff < 3600 * 24) { + return Math.ceil(diff / 3600) + '小时前' + } else if (diff < 3600 * 24 * 2) { + return '1天前' + } + if (option) { + return parseTime(time, option) + } else { + return ( + d.getMonth() + + 1 + + '月' + + d.getDate() + + '日' + + d.getHours() + + '时' + + d.getMinutes() + + '分' + ) + } +} + +/** + * @param {string} url + * @returns {Object} + */ +export function param2Obj(url) { + const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ') + if (!search) { + return {} + } + const obj = {} + const searchArr = search.split('&') + searchArr.forEach(v => { + const index = v.indexOf('=') + if (index !== -1) { + const name = v.substring(0, index) + const val = v.substring(index + 1, v.length) + obj[name] = val + } + }) + return obj +} diff --git a/src/utils/request.js b/src/utils/request.js new file mode 100644 index 0000000000000000000000000000000000000000..0f19ab4e6fbda093348d6cf74caa1312cb98d5b0 --- /dev/null +++ b/src/utils/request.js @@ -0,0 +1,75 @@ +/* + * @Description: + * @Version: 2.0 + * @Autor: LMJ + * @Date: 2021-09-27 13:40:21 + * @LastEditors: LMJ + * @LastEditTime: 2021-09-27 13:59:32 + */ +import axios from 'axios' +import { MessageBox, Message } from 'element-ui' +import store from '@/store' +import { getToken } from '@/utils/auth' + +// create an axios instance +const service = axios.create({ + baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url + // withCredentials: true, // send cookies when cross-domain requests + timeout: 5000 // request timeout +}) + +// request interceptor +service.interceptors.request.use( + config => { + + if (store.getters.token) { + config.headers['X-Token'] = getToken() + } + return config + }, + error => { + console.log(error) + return Promise.reject(error) + } +) + +service.interceptors.response.use( + response => { + const res = response.data + + if (res.code !== 20000) { + Message({ + message: res.message || 'Error', + type: 'error', + duration: 5 * 1000 + }) + + if (res.code === 50008 || res.code === 50012 || res.code === 50014) { + // to re-login + MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { + confirmButtonText: 'Re-Login', + cancelButtonText: 'Cancel', + type: 'warning' + }).then(() => { + store.dispatch('user/resetToken').then(() => { + location.reload() + }) + }) + } + return Promise.reject(new Error(res.message || 'Error')) + } else { + return res + } + }, + error => { + console.log('err' + error) // for debug + Message({ + message: error.message, + type: 'error', + duration: 5 * 1000 + }) + return Promise.reject(error) + } +) + +export default service diff --git a/src/utils/validate.js b/src/utils/validate.js new file mode 100644 index 0000000000000000000000000000000000000000..8d962ad4a25007489f5630e0e41b285247ac8cb1 --- /dev/null +++ b/src/utils/validate.js @@ -0,0 +1,20 @@ +/** + * Created by PanJiaChen on 16/11/18. + */ + +/** + * @param {string} path + * @returns {Boolean} + */ +export function isExternal(path) { + return /^(https?:|mailto:|tel:)/.test(path) +} + +/** + * @param {string} str + * @returns {Boolean} + */ +export function validUsername(str) { + const valid_map = ['admin', 'editor'] + return valid_map.indexOf(str.trim()) >= 0 +} diff --git a/src/views/404.vue b/src/views/404.vue new file mode 100644 index 0000000000000000000000000000000000000000..1791f55a34ef18dae1cbd583d62f997bf33fffa9 --- /dev/null +++ b/src/views/404.vue @@ -0,0 +1,228 @@ + + + + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..f0f11bd953b395a71c193013282aa52e97d80462 --- /dev/null +++ b/src/views/dashboard/index.vue @@ -0,0 +1,302 @@ + + + + + + diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000000000000000000000000000000000000..e02fb40d05d061ade76b7f5e0711ef786d6a6c68 --- /dev/null +++ b/vue.config.js @@ -0,0 +1,53 @@ +/* + * @Description: + * @Version: 2.0 + * @Autor: LMJ + * @Date: 2021-09-27 13:40:21 + * @LastEditors: LMJ + * @LastEditTime: 2021-09-28 09:26:49 + */ +'use strict' +const path = require('path') +const defaultSettings = require('./src/settings.js') + +function resolve(dir) { + return path.join(__dirname, dir) +} + +const name = defaultSettings.title || 'vue-DataV' // page title + +const port = process.env.port || process.env.npm_config_port || 9528 // dev port + +module.exports = { + publicPath: '/', + outputDir: 'dist', + assetsDir: 'static', + lintOnSave: process.env.NODE_ENV === 'development', + productionSourceMap: false, + devServer: { + port: port, + open: true, + overlay: { + warnings: false, + errors: true + }, + }, + configureWebpack: { + name: name, + resolve: { + alias: { + '@': resolve('src') + } + } + }, + chainWebpack(config) { + config.plugin('preload').tap(() => [ + { + rel: 'preload', + fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], + include: 'initial' + } + ]) + + } +}