├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .postcssrc.js ├── README.md ├── build ├── build.js ├── check-versions.js ├── logo.png ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── favicon.ico ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ ├── lib │ │ └── load-class-dot.js │ └── logo.png ├── components │ ├── HelloWorld.vue │ ├── cell │ │ ├── ball │ │ │ └── ball-style-1.vue │ │ ├── bar │ │ │ ├── bar-pictorial-style-1.vue │ │ │ ├── bar-style-1.vue │ │ │ ├── bar-style-2.vue │ │ │ ├── both-sides-bar.vue │ │ │ └── pictorial-bar.vue │ │ ├── box │ │ │ ├── box-style-1-small.vue │ │ │ ├── box-style-1.vue │ │ │ ├── box-style-2.vue │ │ │ ├── box-style-3.vue │ │ │ ├── box-style-4.vue │ │ │ └── box-style-5.vue │ │ ├── funnel │ │ │ └── funnel-style-1.vue │ │ ├── line │ │ │ └── line-style-1.vue │ │ ├── load │ │ │ └── load-style-1.vue │ │ ├── pie │ │ │ ├── pie-style-1.vue │ │ │ ├── pie-style-2.vue │ │ │ └── pie-style-3.vue │ │ ├── radar │ │ │ └── radar-style-1.vue │ │ └── table │ │ │ └── table-style-1.vue │ └── pages │ │ ├── ball │ │ ├── ball.scss │ │ └── index.vue │ │ ├── bar │ │ ├── bar.scss │ │ └── index.vue │ │ ├── box │ │ ├── box.scss │ │ └── index.vue │ │ ├── common │ │ └── box-container.vue │ │ ├── funnel │ │ ├── funnel.scss │ │ └── index.vue │ │ ├── home │ │ ├── home.scss │ │ └── index.vue │ │ ├── line │ │ ├── index.vue │ │ └── line.scss │ │ ├── load │ │ ├── index.vue │ │ └── load.scss │ │ ├── pie │ │ ├── index.vue │ │ └── pie.scss │ │ ├── radar │ │ ├── index.vue │ │ └── radar.scss │ │ └── table │ │ ├── index.vue │ │ └── table.scss ├── main.js ├── router │ └── index.js ├── server │ ├── index.js │ └── routes │ │ ├── ball.js │ │ ├── bar.js │ │ ├── funnel.js │ │ ├── index.js │ │ ├── line.js │ │ ├── pie.js │ │ ├── radar.js │ │ └── table.js └── store │ ├── index.js │ ├── modules │ └── home.js │ └── mutation-types.js ├── static ├── .gitkeep ├── imgs │ └── box │ │ ├── border-edges.png │ │ ├── box-1-595-388.png │ │ ├── box-1-601-247.png │ │ ├── box-2.png │ │ ├── box-corner-1 │ │ ├── box-corner-lb.png │ │ ├── box-corner-lt.png │ │ ├── box-corner-rb.png │ │ └── box-corner-rt.png │ │ └── box-corner-2 │ │ ├── corner-1.png │ │ ├── corner-2.png │ │ ├── corner-3.png │ │ ├── corner-4.png │ │ ├── corner-5.png │ │ └── title-with-icon.png ├── mock │ ├── ball │ │ └── eventMonthsSource.json │ ├── bar │ │ └── personRangeSource.json │ ├── funnel │ │ └── areaSource.json │ ├── line │ │ └── eventMonthsSource.json │ ├── pie │ │ ├── caringObjectSource.json │ │ ├── eventHandlingSource.json │ │ └── eventTypeSource.json │ ├── radar │ │ └── ageRangeSource.json │ └── table │ │ └── eventListSource.json ├── temp │ └── data.json └── tinified │ ├── ball.png │ ├── bar-1.png │ ├── bar-2.png │ ├── box-1.png │ ├── box-2.png │ ├── funnel.png │ ├── line.png │ ├── loading.png │ ├── pie.png │ ├── radar.png │ └── scroll-list.png └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-tqfe/vue", 3 | "rules": { 4 | "no-magic-numbers": "off", 5 | "no-console": "off", 6 | "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }] 7 | } 8 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | package-lock.json* 8 | 9 | # Editor directories and files 10 | .idea 11 | .vscode 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "postcss-import": {}, 7 | "autoprefixer": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue-Screen-Components 2 | 3 | > Vue大屏项目组件库 4 | 5 | ## 结构说明 6 | - src/server api接口服务目录 7 | - src/components/cell 组件单元目录 8 | - src/components/pages 组件类预览页面目录 9 | - static/mock 组件数据源(json假数据) 10 | 11 | ## 组件通用属性说明 12 | - ```source``` 组件数据源，类型: ```[Array, Object]```, 如果是Object类型，需在```initData()```方法中格式化为```Array```类型 13 | - ```colorDic``` 组件颜色源，类型: ```[Object]``` 14 | 15 | ## 组件通用方法说明 16 | - ```initData()``` 对数据源进行格式化 17 | - ```formatLabel``` 对label进行格式化 18 | 19 | ## 文档 20 | 各类别组件编写规范，请见src/components/pages下各组件类文件夹下README.md 21 | 22 | ## 预览 23 | 24 | ![Pie](/static/tinified/pie.png) 25 | 26 | ![Bar1](/static/tinified/bar-1.png) 27 | 28 | ![Bar2](/static/tinified/bar-2.png) 29 | 30 | ![Box1](/static/tinified/box-1.png) 31 | 32 | ![Box2](/static/tinified/box-2.png) 33 | 34 | ![Pie](/static/tinified/pie.png) 35 | 36 | ![Funnel](/static/tinified/funnel.png) 37 | 38 | ![loading](/static/tinified/loading.png) 39 | 40 | ![Line](/static/tinified/line.png) 41 | 42 | ![Radar](/static/tinified/radar.png) 43 | 44 | ![ScrollList](/static/tinified/scroll-list.png) 45 | 46 | ## Version Info 47 | 48 | iview -> v2.8.0 49 | vue -> v2.5.2 50 | 51 | ## Build Setup 52 | 53 | ``` bash 54 | # install dependencies 55 | npm install 56 | 57 | # serve with hot reload at localhost:8080 58 | npm run dev 59 | 60 | # build for production with minification 61 | npm run build 62 | 63 | # build for production and view the bundle analyzer report 64 | npm run build --report 65 | ``` 66 | 67 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 68 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // if you are using ts-loader, setting this to true will make tyescript errors show up during build 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/build/logo.png -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | const createLintingRule = () => ({ 12 | test: /\.(js|vue)$/, 13 | loader: 'eslint-loader', 14 | enforce: 'pre', 15 | include: [resolve('src'), resolve('test')], 16 | options: { 17 | formatter: require('eslint-friendly-formatter'), 18 | emitWarning: !config.dev.showEslintErrorsInOverlay 19 | } 20 | }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: './src/main.js', 26 | vendor: ['vue', 'vue-router', 'vuex', 'iview'], 27 | echarts: ['echarts'], 28 | }, 29 | output: { 30 | path: config.build.assetsRoot, 31 | filename: '[name].js', 32 | publicPath: process.env.NODE_ENV === 'production' 33 | ? config.build.assetsPublicPath 34 | : config.dev.assetsPublicPath 35 | }, 36 | resolve: { 37 | extensions: ['.js', '.vue', '.json'], 38 | alias: { 39 | 'vue$': 'vue/dist/vue.esm.js', 40 | '@': resolve('src/'), 41 | '~components':resolve('src/components') 42 | } 43 | }, 44 | module: { 45 | rules: [ 46 | ...(config.dev.useEslint ? [createLintingRule()] : []), 47 | { 48 | test: /\.vue$/, 49 | use: [ 50 | { 51 | loader: 'vue-loader', 52 | options: vueLoaderConfig 53 | }, 54 | { 55 | loader: 'iview-loader', 56 | options: { 57 | prefix: false 58 | } 59 | } 60 | ] 61 | }, 62 | { 63 | test: /\.js$/, 64 | loader: 'babel-loader', 65 | include: [resolve('src'), resolve('test')] 66 | }, 67 | { 68 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 69 | loader: 'url-loader', 70 | options: { 71 | limit: 10000, 72 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 73 | } 74 | }, 75 | { 76 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 77 | loader: 'url-loader', 78 | options: { 79 | limit: 10000, 80 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 81 | } 82 | }, 83 | { 84 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 85 | loader: 'url-loader', 86 | options: { 87 | limit: 10000, 88 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 89 | } 90 | } 91 | ] 92 | }, 93 | node: { 94 | // prevent webpack from injecting useless setImmediate polyfill because Vue 95 | // source contains it (although only uses it if it's native). 96 | setImmediate: false, 97 | // prevent webpack from injecting mocks to Node native modules 98 | // that does not make sense for the client 99 | dgram: 'empty', 100 | fs: 'empty', 101 | net: 'empty', 102 | tls: 'empty', 103 | child_process: 'empty' 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const baseWebpackConfig = require('./webpack.base.conf') 7 | const HtmlWebpackPlugin = require('html-webpack-plugin') 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 9 | const portfinder = require('portfinder') 10 | 11 | const HOST = process.env.HOST 12 | const PORT = process.env.PORT && Number(process.env.PORT) 13 | 14 | const devWebpackConfig = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: config.dev.devtool, 20 | 21 | // these devServer options should be customized in /config/index.js 22 | devServer: { 23 | clientLogLevel: 'warning', 24 | historyApiFallback: true, 25 | hot: true, 26 | compress: true, 27 | host: HOST || config.dev.host, 28 | port: PORT || config.dev.port, 29 | open: config.dev.autoOpenBrowser, 30 | overlay: config.dev.errorOverlay 31 | ? { warnings: false, errors: true } 32 | : false, 33 | publicPath: config.dev.assetsPublicPath, 34 | proxy: config.dev.proxyTable, 35 | quiet: true, // necessary for FriendlyErrorsPlugin 36 | watchOptions: { 37 | poll: config.dev.poll, 38 | } 39 | }, 40 | plugins: [ 41 | new webpack.DefinePlugin({ 42 | 'process.env': require('../config/dev.env') 43 | }), 44 | new webpack.HotModuleReplacementPlugin(), 45 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 46 | new webpack.NoEmitOnErrorsPlugin(), 47 | // https://github.com/ampedandwired/html-webpack-plugin 48 | new HtmlWebpackPlugin({ 49 | filename: 'index.html', 50 | template: 'index.html', 51 | inject: true 52 | }), 53 | ] 54 | }) 55 | 56 | module.exports = new Promise((resolve, reject) => { 57 | portfinder.basePort = process.env.PORT || config.dev.port 58 | portfinder.getPort((err, port) => { 59 | if (err) { 60 | reject(err) 61 | } else { 62 | // publish the new Port, necessary for e2e tests 63 | process.env.PORT = port 64 | // add port to devServer config 65 | devWebpackConfig.devServer.port = port 66 | 67 | // Add FriendlyErrorsPlugin 68 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 69 | compilationSuccessInfo: { 70 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 71 | }, 72 | onErrors: config.dev.notifyOnErrors 73 | ? utils.createNotifierCallback() 74 | : undefined 75 | })) 76 | 77 | resolve(devWebpackConfig) 78 | } 79 | }) 80 | }) 81 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 | 14 | const env = require('../config/prod.env') 15 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | new UglifyJsPlugin({ 36 | uglifyOptions: { 37 | compress: { 38 | warnings: false 39 | } 40 | }, 41 | sourceMap: config.build.productionSourceMap, 42 | parallel: true 43 | }), 44 | // extract css into its own file 45 | new ExtractTextPlugin({ 46 | filename: utils.assetsPath('css/[name].[contenthash].css'), 47 | // Setting the following option to `false` will not extract CSS from codesplit chunks. 48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. 49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 51 | allChunks: true, 52 | }), 53 | // Compress extracted CSS. We are using this plugin so that possible 54 | // duplicated CSS from different components can be deduped. 55 | new OptimizeCSSPlugin({ 56 | cssProcessorOptions: config.build.productionSourceMap 57 | ? { safe: true, map: { inline: false } } 58 | : { safe: true } 59 | }), 60 | // generate dist index.html with correct asset hash for caching. 61 | // you can customize output by editing /index.html 62 | // see https://github.com/ampedandwired/html-webpack-plugin 63 | new HtmlWebpackPlugin({ 64 | filename: config.build.index, 65 | template: 'index.html', 66 | inject: true, 67 | minify: { 68 | removeComments: true, 69 | collapseWhitespace: true, 70 | removeAttributeQuotes: true 71 | // more options: 72 | // https://github.com/kangax/html-minifier#options-quick-reference 73 | }, 74 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 75 | chunksSortMode: 'dependency' 76 | }), 77 | // keep module.id stable when vender modules does not change 78 | new webpack.HashedModuleIdsPlugin(), 79 | // enable scope hoisting 80 | new webpack.optimize.ModuleConcatenationPlugin(), 81 | // split vendor js into its own file 82 | // new webpack.optimize.CommonsChunkPlugin({ 83 | // name: 'vendor', 84 | // minChunks (module) { 85 | // // any required modules inside node_modules are extracted to vendor 86 | // return ( 87 | // module.resource && 88 | // /\.js$/.test(module.resource) && 89 | // module.resource.indexOf( 90 | // path.join(__dirname, '../node_modules') 91 | // ) === 0 92 | // ) 93 | // } 94 | // }), 95 | new webpack.optimize.CommonsChunkPlugin({ 96 | names: ['echarts', 'vendor'] 97 | }), 98 | // extract webpack runtime and module manifest to its own file in order to 99 | // prevent vendor hash from being updated whenever app bundle is updated 100 | new webpack.optimize.CommonsChunkPlugin({ 101 | name: 'manifest', 102 | minChunks: Infinity 103 | }), 104 | // This instance extracts shared chunks from code splitted chunks and bundles them 105 | // in a separate chunk, similar to the vendor chunk 106 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 107 | new webpack.optimize.CommonsChunkPlugin({ 108 | name: 'app', 109 | async: 'vendor-async', 110 | children: true, 111 | minChunks: 3 112 | }), 113 | // copy custom static assets 114 | new CopyWebpackPlugin([ 115 | { 116 | from: path.resolve(__dirname, '../static'), 117 | to: config.build.assetsSubDirectory, 118 | ignore: ['.*'] 119 | } 120 | ]) 121 | ] 122 | }) 123 | 124 | if (config.build.productionGzip) { 125 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 126 | 127 | webpackConfig.plugins.push( 128 | new CompressionWebpackPlugin({ 129 | asset: '[path].gz[query]', 130 | algorithm: 'gzip', 131 | test: new RegExp( 132 | '\\.(' + 133 | config.build.productionGzipExtensions.join('|') + 134 | ')$' 135 | ), 136 | threshold: 10240, 137 | minRatio: 0.8 138 | }) 139 | ) 140 | } 141 | 142 | if (config.build.bundleAnalyzerReport) { 143 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 144 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 145 | } 146 | 147 | module.exports = webpackConfig 148 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.2.7 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: { 14 | '/mock': { 15 | // 代理到本地的 mock 文件夹 16 | target: 'http://localhost:3000/', 17 | changeOrigin: true, 18 | pathRewrite: { 19 | // 将 请求替换成本地 mock json 20 | // /mock/demo/helloworld.json => /demo/helloworld.json 21 | '^/mock': '/' 22 | } 23 | }, 24 | }, 25 | 26 | // Various Dev Server settings 27 | host: 'localhost', // can be overwritten by process.env.HOST 28 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 29 | autoOpenBrowser: false, 30 | errorOverlay: true, 31 | notifyOnErrors: true, 32 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 33 | 34 | // Use Eslint Loader? 35 | // If true, your code will be linted during bundling and 36 | // linting errors and warnings will be shown in the console. 37 | useEslint: true, 38 | // If true, eslint errors and warnings will also be shown in the error overlay 39 | // in the browser. 40 | showEslintErrorsInOverlay: false, 41 | 42 | /** 43 | * Source Maps 44 | */ 45 | 46 | // https://webpack.js.org/configuration/devtool/#development 47 | devtool: 'eval-source-map', 48 | 49 | // If you have problems debugging vue-files in devtools, 50 | // set this to false - it *may* help 51 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 52 | cacheBusting: true, 53 | 54 | // CSS Sourcemaps off by default because relative paths are "buggy" 55 | // with this option, according to the CSS-Loader README 56 | // (https://github.com/webpack/css-loader#sourcemaps) 57 | // In our experience, they generally work as expected, 58 | // just be aware of this issue when enabling this option. 59 | cssSourceMap: false, 60 | }, 61 | 62 | build: { 63 | // Template for index.html 64 | index: path.resolve(__dirname, '../dist/index.html'), 65 | 66 | // Paths 67 | assetsRoot: path.resolve(__dirname, '../dist'), 68 | assetsSubDirectory: 'static', 69 | assetsPublicPath: '/', 70 | 71 | /** 72 | * Source Maps 73 | */ 74 | 75 | productionSourceMap: false, 76 | // https://webpack.js.org/configuration/devtool/#production 77 | devtool: '#source-map', 78 | 79 | // Gzip off by default as many popular static hosts such as 80 | // Surge or Netlify already gzip all static assets for you. 81 | // Before setting to `true`, make sure to: 82 | // npm install --save-dev compression-webpack-plugin 83 | productionGzip: true, 84 | productionGzipExtensions: ['js', 'css'], 85 | 86 | // Run the build command with an extra argument to 87 | // View the bundle analyzer report after build finishes: 88 | // `npm run build --report` 89 | // Set to `true` or `false` to always turn it on or off 90 | bundleAnalyzerReport: process.env.npm_config_report 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | VUE 大屏组件库 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-link", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "MrManYoYo ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "lint": "eslint --ext .js,.vue src", 11 | "build": "node build/build.js" 12 | }, 13 | "dependencies": { 14 | "echarts": "^4.0.4", 15 | "echarts-liquidfill": "^2.0.0", 16 | "gsap": "^1.20.4", 17 | "iview": "^2.8.0", 18 | "lodash": "^4.17.10", 19 | "vue": "^2.5.2", 20 | "vue-router": "^3.0.1" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^7.1.2", 24 | "babel-core": "^6.22.1", 25 | "babel-eslint": "^7.1.1", 26 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 27 | "babel-loader": "^7.1.1", 28 | "babel-plugin-syntax-jsx": "^6.18.0", 29 | "babel-plugin-transform-runtime": "^6.22.0", 30 | "babel-plugin-transform-vue-jsx": "^3.5.0", 31 | "babel-preset-env": "^1.3.2", 32 | "babel-preset-stage-2": "^6.22.0", 33 | "body-parser": "^1.18.2", 34 | "chalk": "^2.0.1", 35 | "compression-webpack-plugin": "^1.1.11", 36 | "copy-webpack-plugin": "^4.0.1", 37 | "css-loader": "^0.28.11", 38 | "eslint": "^4.19.1", 39 | "eslint-config-standard": "^10.2.1", 40 | "eslint-config-tqfe": "^1.0.11", 41 | "eslint-friendly-formatter": "^3.0.0", 42 | "eslint-loader": "^1.7.1", 43 | "eslint-plugin-html": "^3.0.0", 44 | "eslint-plugin-import": "^2.7.0", 45 | "eslint-plugin-node": "^5.2.0", 46 | "eslint-plugin-promise": "^3.4.0", 47 | "eslint-plugin-standard": "^3.0.1", 48 | "express": "^4.16.3", 49 | "extract-text-webpack-plugin": "^3.0.0", 50 | "file-loader": "^1.1.4", 51 | "friendly-errors-webpack-plugin": "^1.6.1", 52 | "html-webpack-plugin": "^2.30.1", 53 | "iview-loader": "^1.0.0", 54 | "node-gyp": "^3.6.2", 55 | "node-notifier": "^5.1.2", 56 | "node-sass": "^4.8.3", 57 | "optimize-css-assets-webpack-plugin": "^3.2.0", 58 | "ora": "^1.2.0", 59 | "portfinder": "^1.0.13", 60 | "postcss-import": "^11.0.0", 61 | "postcss-loader": "^2.0.8", 62 | "rimraf": "^2.6.0", 63 | "sass-loader": "^6.0.7", 64 | "semver": "^5.3.0", 65 | "shelljs": "^0.7.6", 66 | "style-loader": "^0.20.3", 67 | "tfetch": "^1.1.7", 68 | "uglifyjs-webpack-plugin": "^1.1.1", 69 | "url-loader": "^0.5.8", 70 | "vue-loader": "^14.2.2", 71 | "vue-style-loader": "^4.1.0", 72 | "vue-template-compiler": "^2.5.2", 73 | "vuex": "^3.0.1", 74 | "vuex-persistedstate": "^2.5.2", 75 | "webpack": "^3.6.0", 76 | "webpack-bundle-analyzer": "^2.9.0", 77 | "webpack-dev-server": "^2.9.1", 78 | "webpack-merge": "^4.1.0" 79 | }, 80 | "engines": { 81 | "node": ">= 4.0.0", 82 | "npm": ">= 3.0.0" 83 | }, 84 | "browserslist": [ 85 | "> 1%", 86 | "last 2 versions", 87 | "not ie <= 8" 88 | ] 89 | } 90 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 48 | -------------------------------------------------------------------------------- /src/assets/lib/load-class-dot.js: -------------------------------------------------------------------------------- 1 | export default class Spin { 2 | constructor(config) { 3 | this.dom = document.getElementById(config['el']) 4 | this.canvas = this.createCanvas(this.dom) 5 | this.ctx = this.canvas.getContext('2d') 6 | this.centerX = this.dom.clientWidth / 2 7 | this.centerY = this.dom.clientHeight / 2 8 | this.radius = config['radius'] || 25 9 | this.pointNum = config['num'] || 9 10 | this.pointSize = config['size'] || 10 11 | this.points = [] 12 | this.speed = config['speed'] || 2 13 | this.colorDic = config['colorDic'] || ['#ff9900', '#ff0000', '#fff000'] 14 | } 15 | createCanvas(dom) { 16 | const _canvas = document.createElement('canvas') 17 | _canvas.width = dom.clientWidth 18 | _canvas.height = dom.clientHeight 19 | dom.appendChild(_canvas) 20 | return _canvas 21 | } 22 | getPointCoord(angle) { 23 | const x = this.centerX + this.radius * Math.cos(angle * Math.PI / 180) 24 | const y = this.centerY + this.radius * Math.sin(angle * Math.PI / 180) 25 | return { x, y, angle: angle % 360 } 26 | } 27 | makePointCoord() { 28 | const _this = this 29 | this.points = [] 30 | for (let i = 0; i < this.pointNum; i++) { 31 | const angle = i * 360 / this.pointNum 32 | this.points.push({ 33 | ..._this.getPointCoord(angle), 34 | r: _this.pointSize / 2, 35 | bgColor: _this.colorDic[i % (_this.colorDic.length)], 36 | }) 37 | } 38 | // console.log(_this.points) 39 | } 40 | createPoints() { 41 | // console.log(this.points) 42 | if (this.points && this.points.length > 0) { 43 | this.points.forEach(point => { 44 | this.ctx.fillStyle = point.bgColor 45 | this.ctx.beginPath(); 46 | this.ctx.arc(point.x, point.y, point.r, 0, 2 * Math.PI, false) 47 | this.ctx.fill() 48 | }) 49 | } 50 | } 51 | createAnimation() { 52 | // console.log(this) 53 | const _this = this 54 | if (_this.points && _this.points.length > 0) { 55 | this.points.forEach(point => { 56 | Object.assign(point, _this.getPointCoord(point.angle + _this.speed)) 57 | }) 58 | } 59 | this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) 60 | _this.createPoints() 61 | requestAnimationFrame(() => { 62 | _this.createAnimation() 63 | }) 64 | } 65 | init() { 66 | this.makePointCoord() 67 | this.createPoints() 68 | this.createAnimation() 69 | } 70 | } -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 26 | 27 | 28 | 44 | -------------------------------------------------------------------------------- /src/components/cell/ball/ball-style-1.vue: -------------------------------------------------------------------------------- 1 | 4 | 66 | 72 | 73 | -------------------------------------------------------------------------------- /src/components/cell/bar/bar-pictorial-style-1.vue: -------------------------------------------------------------------------------- 1 | 4 | 174 | 180 | 181 | -------------------------------------------------------------------------------- /src/components/cell/bar/bar-style-1.vue: -------------------------------------------------------------------------------- 1 | 18 | 233 | 278 | 279 | 280 | -------------------------------------------------------------------------------- /src/components/cell/bar/bar-style-2.vue: -------------------------------------------------------------------------------- 1 | 4 | 162 | 163 | -------------------------------------------------------------------------------- /src/components/cell/bar/both-sides-bar.vue: -------------------------------------------------------------------------------- 1 | 4 | 286 | 287 | -------------------------------------------------------------------------------- /src/components/cell/bar/pictorial-bar.vue: -------------------------------------------------------------------------------- 1 | 4 | 173 | 180 | -------------------------------------------------------------------------------- /src/components/cell/box/box-style-1-small.vue: -------------------------------------------------------------------------------- 1 | 6 | 9 | 20 | 21 | -------------------------------------------------------------------------------- /src/components/cell/box/box-style-1.vue: -------------------------------------------------------------------------------- 1 | 6 | 9 | 20 | 21 | -------------------------------------------------------------------------------- /src/components/cell/box/box-style-2.vue: -------------------------------------------------------------------------------- 1 | 9 | 23 | 50 | 51 | -------------------------------------------------------------------------------- /src/components/cell/box/box-style-3.vue: -------------------------------------------------------------------------------- 1 | 10 | 13 | 57 | 58 | -------------------------------------------------------------------------------- /src/components/cell/box/box-style-4.vue: -------------------------------------------------------------------------------- 1 | 6 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/cell/box/box-style-5.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 27 | 28 | -------------------------------------------------------------------------------- /src/components/cell/funnel/funnel-style-1.vue: -------------------------------------------------------------------------------- 1 | 4 | 104 | 110 | 111 | -------------------------------------------------------------------------------- /src/components/cell/line/line-style-1.vue: -------------------------------------------------------------------------------- 1 | 4 | 182 | 188 | 189 | -------------------------------------------------------------------------------- /src/components/cell/load/load-style-1.vue: -------------------------------------------------------------------------------- 1 | 6 | 20 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/cell/pie/pie-style-1.vue: -------------------------------------------------------------------------------- 1 | 4 | 183 | 189 | -------------------------------------------------------------------------------- /src/components/cell/pie/pie-style-2.vue: -------------------------------------------------------------------------------- 1 | 4 | 213 | 219 | 220 | -------------------------------------------------------------------------------- /src/components/cell/pie/pie-style-3.vue: -------------------------------------------------------------------------------- 1 | 9 | 151 | 175 | 176 | -------------------------------------------------------------------------------- /src/components/cell/radar/radar-style-1.vue: -------------------------------------------------------------------------------- 1 | 4 | 147 | 153 | 154 | -------------------------------------------------------------------------------- /src/components/cell/table/table-style-1.vue: -------------------------------------------------------------------------------- 1 | 23 | 57 | 150 | 151 | -------------------------------------------------------------------------------- /src/components/pages/ball/ball.scss: -------------------------------------------------------------------------------- 1 | $showBoxWidth: 400px; 2 | $showBoxHeight: 300px; 3 | @function scaleHeight($realWidth, $realHeight) { 4 | @return $showBoxWidth * $realHeight / $realWidth; 5 | } 6 | .content{ 7 | width: 100%; 8 | height: 100%; 9 | display: flex; 10 | flex-wrap: wrap; 11 | } 12 | .show-item{ 13 | width: $showBoxWidth; 14 | height: $showBoxHeight; 15 | margin: 15px; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | border: 1px solid #ccc; 20 | box-shadow: 1px 1px 3px #ccc; 21 | border-radius: 10px; 22 | background-color: #fff; 23 | padding: 15px; 24 | box-sizing: border-box; 25 | position: relative; 26 | 27 | &.bg-black{ 28 | background-color: #495060; 29 | color: rgba(255, 255, 255, .8); 30 | } 31 | } -------------------------------------------------------------------------------- /src/components/pages/ball/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 43 | 46 | 47 | -------------------------------------------------------------------------------- /src/components/pages/bar/bar.scss: -------------------------------------------------------------------------------- 1 | .content{ 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | } -------------------------------------------------------------------------------- /src/components/pages/bar/index.vue: -------------------------------------------------------------------------------- 1 | 20 | 151 | 155 | 156 | -------------------------------------------------------------------------------- /src/components/pages/box/box.scss: -------------------------------------------------------------------------------- 1 | .content{ 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | } -------------------------------------------------------------------------------- /src/components/pages/box/index.vue: -------------------------------------------------------------------------------- 1 | 58 | 92 | 95 | 96 | -------------------------------------------------------------------------------- /src/components/pages/common/box-container.vue: -------------------------------------------------------------------------------- 1 | 20 | 51 | 111 | 112 | -------------------------------------------------------------------------------- /src/components/pages/funnel/funnel.scss: -------------------------------------------------------------------------------- 1 | $showBoxWidth: 400px; 2 | $showBoxHeight: 300px; 3 | @function scaleHeight($realWidth, $realHeight) { 4 | @return $showBoxWidth * $realHeight / $realWidth; 5 | } 6 | .content{ 7 | width: 100%; 8 | height: 100%; 9 | display: flex; 10 | flex-wrap: wrap; 11 | } 12 | .show-item{ 13 | width: $showBoxWidth; 14 | height: $showBoxHeight; 15 | margin: 15px; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | border: 1px solid #ccc; 20 | box-shadow: 1px 1px 3px #ccc; 21 | border-radius: 10px; 22 | background-color: #fff; 23 | padding: 15px; 24 | box-sizing: border-box; 25 | position: relative; 26 | 27 | &.bg-black{ 28 | background-color: #495060; 29 | color: rgba(255, 255, 255, .8); 30 | } 31 | } -------------------------------------------------------------------------------- /src/components/pages/funnel/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 43 | 46 | 47 | -------------------------------------------------------------------------------- /src/components/pages/home/home.scss: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 100%; 3 | height: 100%; 4 | 5 | .main-layout{ 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .sider-cont{ 11 | overflow: hidden; 12 | 13 | 14 | .logo-cont{ 15 | height: 64px; 16 | line-height: 64px; 17 | text-align: center; 18 | color: #fff; 19 | font-size: 16px; 20 | font-weight: 600; 21 | } 22 | } 23 | 24 | .sider-bar{ 25 | width: 200px; 26 | 27 | .menu-item-span{ 28 | display: inline-block; 29 | overflow: hidden; 30 | width: 69px; 31 | text-overflow: ellipsis; 32 | white-space: nowrap; 33 | vertical-align: bottom; 34 | transition: width .2s ease .2s; 35 | } 36 | 37 | .ivu-menu-item i{ 38 | transform: translateX(0px); 39 | transition: font-size .2s ease, transform .2s ease; 40 | vertical-align: middle; 41 | font-size: 16px; 42 | } 43 | 44 | &.collapsed-menu span{ 45 | width: 0px; 46 | transition: width .2s ease; 47 | } 48 | &.collapsed-menu i{ 49 | transform: translateX(-2px); 50 | transition: font-size .2s ease .2s, transform .2s ease .2s; 51 | vertical-align: middle; 52 | font-size: 22px; 53 | } 54 | } 55 | 56 | .right-cont{ 57 | flex: 1; 58 | height: 100%; 59 | 60 | .header-cont{ 61 | background-color: #fff; 62 | } 63 | 64 | .main-cont{ 65 | height: calc( 100% - 64px ); 66 | overflow-y: auto; 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/components/pages/home/index.vue: -------------------------------------------------------------------------------- 1 | 40 | 128 | 131 | 132 | -------------------------------------------------------------------------------- /src/components/pages/line/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 45 | 48 | 49 | -------------------------------------------------------------------------------- /src/components/pages/line/line.scss: -------------------------------------------------------------------------------- 1 | .content{ 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | } -------------------------------------------------------------------------------- /src/components/pages/load/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 21 | 24 | 25 | -------------------------------------------------------------------------------- /src/components/pages/load/load.scss: -------------------------------------------------------------------------------- 1 | .content{ 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/pages/pie/index.vue: -------------------------------------------------------------------------------- 1 | 21 | 107 | 110 | 111 | -------------------------------------------------------------------------------- /src/components/pages/pie/pie.scss: -------------------------------------------------------------------------------- 1 | .content{ 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /src/components/pages/radar/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 41 | 44 | 45 | -------------------------------------------------------------------------------- /src/components/pages/radar/radar.scss: -------------------------------------------------------------------------------- 1 | .content{ 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | } -------------------------------------------------------------------------------- /src/components/pages/table/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 45 | 48 | 49 | -------------------------------------------------------------------------------- /src/components/pages/table/table.scss: -------------------------------------------------------------------------------- 1 | .content{ 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | import iView from 'iview' 7 | import store from './store' 8 | import echarts from 'echarts' 9 | import liquidfill from 'echarts-liquidfill' 10 | import TFetch from 'tfetch' 11 | import 'iview/dist/styles/iview.css' 12 | 13 | Vue.config.productionTip = false; 14 | Vue.use(iView) 15 | Vue.use(liquidfill) 16 | 17 | Vue.prototype.$echarts = echarts 18 | 19 | const http = new TFetch({ 20 | baseUrl: './mock', 21 | timeout: 5000, 22 | }) 23 | 24 | const fetchMock = url => { 25 | return new Promise((resolve, reject) => { 26 | fetch(url, { 27 | method: 'GET', 28 | headers: { 29 | 'Content-Type': 'application/json', 30 | 'Accept': 'application/json', 31 | }, 32 | }) 33 | .then(res => res.json()) 34 | .then(res => { 35 | resolve(res) 36 | }) 37 | .catch(err => { 38 | reject(err) 39 | }) 40 | }) 41 | } 42 | 43 | Vue.prototype.$http = http 44 | Vue.prototype.$fetchMock = fetchMock 45 | 46 | /* eslint-disable no-new */ 47 | new Vue({ 48 | el: '#app', 49 | router, 50 | store, 51 | components: { App }, 52 | template: '', 53 | }) 54 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export default new Router({ 7 | // mode: 'history', 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'home', 12 | component: res => require(['@/components/pages/home'], res), 13 | children: [{ 14 | path: '/pie', 15 | name: 'pie', 16 | component: res => require(['@/components/pages/pie'], res), 17 | }, { 18 | path: '/bar', 19 | name: 'bar', 20 | component: res => require(['@/components/pages/bar'], res), 21 | }, { 22 | path: '/line', 23 | name: 'line', 24 | component: res => require(['@/components/pages/line'], res), 25 | }, { 26 | path: '/radar', 27 | name: 'radar', 28 | component: res => require(['@/components/pages/radar'], res), 29 | }, { 30 | path: '/table', 31 | name: 'table', 32 | component: res => require(['@/components/pages/table'], res), 33 | }, { 34 | path: '/box', 35 | name: 'box', 36 | component: res => require(['@/components/pages/box'], res), 37 | }, { 38 | path: '/load', 39 | name: 'load', 40 | component: res => require(['@/components/pages/load'], res), 41 | }, { 42 | path: '/funnel', 43 | name: 'funnel', 44 | component: res => require(['@/components/pages/funnel'], res), 45 | }, { 46 | path: '/ball', 47 | name: 'ball', 48 | component: res => require(['@/components/pages/ball'], res), 49 | }], 50 | }, 51 | ], 52 | }) 53 | -------------------------------------------------------------------------------- /src/server/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var routes = require('./routes') 3 | var bodyParse = require('body-parser') 4 | var app = express() 5 | 6 | app.use(bodyParse.json()) 7 | app.use(routes) 8 | 9 | app.listen(3000, function() { 10 | console.log('Server is running at port 3000!') 11 | }) 12 | module.exports = app -------------------------------------------------------------------------------- /src/server/routes/ball.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var router = express.Router() 3 | 4 | router.get('/eventMonthsSource', function(req, res) { 5 | var eventMonthsSource = { 6 | msg: 'Get data success!', 7 | state: true, 8 | code: 200, 9 | data: [0.6, 0.5, 0.4, 0.3] 10 | } 11 | res.header("Content-Type", "application/json;charset=utf-8") 12 | res.end(JSON.stringify(eventMonthsSource)) 13 | }) 14 | 15 | module.exports = router -------------------------------------------------------------------------------- /src/server/routes/bar.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var router = express.Router() 3 | 4 | router.get('/personRangeSource', function(req, res) { 5 | var eventMonthsSource = { 6 | msg: 'Get data success!', 7 | state: true, 8 | code: 200, 9 | data: { 10 | "杭州市": 800, 11 | "宁波市": 1000, 12 | "温州市": 900, 13 | "嘉兴市": 1100, 14 | "绍兴市": 800, 15 | "诸暨市": 1200 16 | } 17 | } 18 | res.header("Content-Type", "application/json;charset=utf-8") 19 | res.end(JSON.stringify(eventMonthsSource)) 20 | }) 21 | 22 | module.exports = router -------------------------------------------------------------------------------- /src/server/routes/funnel.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var router = express.Router() 3 | 4 | router.get('/areaSource', function(req, res) { 5 | var eventMonthsSource = { 6 | msg: 'Get data success!', 7 | state: true, 8 | code: 200, 9 | data: [ 10 | { "value": 60, "name": "访问" }, 11 | { "value": 40, "name": "咨询" }, 12 | { "value": 20, "name": "订单" }, 13 | { "value": 80, "name": "点击" }, 14 | { "value": 100, "name": "展现" } 15 | ] 16 | } 17 | res.header("Content-Type", "application/json;charset=utf-8") 18 | res.end(JSON.stringify(eventMonthsSource)) 19 | }) 20 | 21 | module.exports = router -------------------------------------------------------------------------------- /src/server/routes/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var router = express.Router() 3 | 4 | router.use('/bar', require('./bar')) 5 | router.use('/pie', require('./pie')) 6 | router.use('/line', require('./line')) 7 | router.use('/radar', require('./radar')) 8 | router.use('/table', require('./table')) 9 | router.use('/ball', require('./ball')) 10 | router.use('/funnel', require('./funnel')) 11 | 12 | module.exports = router -------------------------------------------------------------------------------- /src/server/routes/line.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var router = express.Router() 3 | 4 | router.get('/eventMonthsSource', function(req, res) { 5 | var eventMonthsSource = { 6 | msg: 'Get data success!', 7 | state: true, 8 | code: 200, 9 | data: { 10 | '2016/12': 8000, 11 | '2017/1': 10000, 12 | '2017/2': 9000, 13 | '2017/3': 11000, 14 | '2017/4': 8000, 15 | '2017/5': 12000, 16 | } 17 | } 18 | res.header("Content-Type", "application/json;charset=utf-8") 19 | res.end(JSON.stringify(eventMonthsSource)) 20 | }) 21 | 22 | module.exports = router -------------------------------------------------------------------------------- /src/server/routes/pie.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var router = express.Router() 3 | 4 | router.get('/eventTypeSource', function(req, res) { 5 | var eventTypeSource = { 6 | msg: 'Get data success!', 7 | state: true, 8 | code: 200, 9 | data: { 10 | "便民服务": 1221, 11 | "城市管理": 2532, 12 | "社会治安": 1221, 13 | "社会监管": 3350 14 | } 15 | } 16 | res.header("Content-Type", "application/json;charset=utf-8") 17 | res.end(JSON.stringify(eventTypeSource)) 18 | }) 19 | 20 | router.get('/caringObjectSource', function(req, res) { 21 | var caringObjectSource = { 22 | msg: 'Get data success!', 23 | state: true, 24 | code: 200, 25 | data: { 26 | "老年人": 21, 27 | "优抚对象": 10, 28 | "计生人员": 1, 29 | "企业退休人员": 10, 30 | "结婚女性": 1, 31 | "需救助人员": 10, 32 | "未成年保护":1, 33 | "失业人员": 10, 34 | "双拥人员": 21, 35 | "育龄妇女": 3, 36 | "出身婴儿": 1, 37 | "低保人员": 10, 38 | "残疾人": 5, 39 | "怀孕妇女": 2 40 | } 41 | } 42 | res.header("Content-Type", "application/json;charset=utf-8") 43 | res.end(JSON.stringify(caringObjectSource)) 44 | }) 45 | 46 | router.get('/eventHandlingSource', function(req, res) { 47 | var eventHandlingSource = { 48 | msg: 'Get data success!', 49 | state: true, 50 | code: 200, 51 | data: { 52 | "受理率": "65%", 53 | "办理率": "80%", 54 | "办结率": "98%", 55 | } 56 | } 57 | res.header("Content-Type", "application/json;charset=utf-8") 58 | res.end(JSON.stringify(eventHandlingSource)) 59 | }) 60 | 61 | module.exports = router -------------------------------------------------------------------------------- /src/server/routes/radar.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var router = express.Router() 3 | 4 | router.get('/ageRangeSource', function(req, res) { 5 | var eventTypeSource = { 6 | msg: 'Get data success!', 7 | state: true, 8 | code: 200, 9 | data: [ 10 | { name: '0~15岁', value: 3213 }, 11 | { name: '16～30岁', value: 3313 }, 12 | { name: '31～45岁', value: 3213 }, 13 | { name: '45～60岁', value: 1213 }, 14 | { name: '60～80岁', value: 1213 }, 15 | { name: '80岁以上', value: 1213 },] 16 | } 17 | res.header("Content-Type", "application/json;charset=utf-8") 18 | res.end(JSON.stringify(eventTypeSource)) 19 | }) 20 | 21 | module.exports = router -------------------------------------------------------------------------------- /src/server/routes/table.js: -------------------------------------------------------------------------------- 1 | var express = require('express') 2 | var router = express.Router() 3 | 4 | router.get('/eventListSource', function(req, res) { 5 | var eventMonthsSource = { 6 | msg: 'Get data success!', 7 | state: true, 8 | code: 200, 9 | data: [ 10 | { "type": "测试类型", "name": "新增·测试事件", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 11 | { "type": "测试类型", "name": "新增·测试事件", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 12 | { "type": "测试类型", "name": "新增·测试事件", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 13 | { "type": "测试类型", "name": "新增·测试事件", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 14 | { "type": "测试类型", "name": "新增·测试事件", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 15 | { "type": "测试类型", "name": "新增·测试事件", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 16 | { "type": "测试类型", "name": "新增·测试事件", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 17 | { "type": "测试类型", "name": "新增·测试事件", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 18 | { "type": "测试类型", "name": "新增·测试事件", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 19 | { "type": "测试类型", "name": "新增·测试事件", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" } 20 | ] 21 | } 22 | res.header("Content-Type", "application/json;charset=utf-8") 23 | res.end(JSON.stringify(eventMonthsSource)) 24 | }) 25 | 26 | module.exports = router -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import createPersistedState from 'vuex-persistedstate' 4 | // 引入模块 5 | import Home from './modules/home' 6 | 7 | Vue.use(Vuex) 8 | 9 | const state = {} 10 | 11 | export default new Vuex.Store({ 12 | state, 13 | modules: { 14 | 'Home': Home, 15 | }, 16 | plugins: [ 17 | createPersistedState({ 18 | paths: ['Home'], 19 | }), 20 | ], 21 | }) -------------------------------------------------------------------------------- /src/store/modules/home.js: -------------------------------------------------------------------------------- 1 | import * as types from '../mutation-types' 2 | 3 | const state = { 4 | activeMenu: localStorage.getItem('VSC_active_menu') || 'pie', 5 | } 6 | 7 | const actions = {} 8 | 9 | const getters = { 10 | getActiveMenu: state => () => state.activeMenu, 11 | } 12 | 13 | const mutations = { 14 | [types.UPDATE_ACTIVE_MENU](state, payload) { 15 | localStorage.setItem('VSC_active_menu', payload) 16 | state.activeMenu = payload 17 | }, 18 | } 19 | 20 | export default { 21 | state, 22 | actions, 23 | getters, 24 | mutations, 25 | } -------------------------------------------------------------------------------- /src/store/mutation-types.js: -------------------------------------------------------------------------------- 1 | // 更新选中菜单 2 | export const UPDATE_ACTIVE_MENU = 'UPDATE_ACTIVE_MENU' -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/.gitkeep -------------------------------------------------------------------------------- /static/imgs/box/border-edges.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/border-edges.png -------------------------------------------------------------------------------- /static/imgs/box/box-1-595-388.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-1-595-388.png -------------------------------------------------------------------------------- /static/imgs/box/box-1-601-247.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-1-601-247.png -------------------------------------------------------------------------------- /static/imgs/box/box-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-2.png -------------------------------------------------------------------------------- /static/imgs/box/box-corner-1/box-corner-lb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-corner-1/box-corner-lb.png -------------------------------------------------------------------------------- /static/imgs/box/box-corner-1/box-corner-lt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-corner-1/box-corner-lt.png -------------------------------------------------------------------------------- /static/imgs/box/box-corner-1/box-corner-rb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-corner-1/box-corner-rb.png -------------------------------------------------------------------------------- /static/imgs/box/box-corner-1/box-corner-rt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-corner-1/box-corner-rt.png -------------------------------------------------------------------------------- /static/imgs/box/box-corner-2/corner-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-corner-2/corner-1.png -------------------------------------------------------------------------------- /static/imgs/box/box-corner-2/corner-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-corner-2/corner-2.png -------------------------------------------------------------------------------- /static/imgs/box/box-corner-2/corner-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-corner-2/corner-3.png -------------------------------------------------------------------------------- /static/imgs/box/box-corner-2/corner-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-corner-2/corner-4.png -------------------------------------------------------------------------------- /static/imgs/box/box-corner-2/corner-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-corner-2/corner-5.png -------------------------------------------------------------------------------- /static/imgs/box/box-corner-2/title-with-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/imgs/box/box-corner-2/title-with-icon.png -------------------------------------------------------------------------------- /static/mock/ball/eventMonthsSource.json: -------------------------------------------------------------------------------- 1 | [0.6, 0.5, 0.4, 0.3] -------------------------------------------------------------------------------- /static/mock/bar/personRangeSource.json: -------------------------------------------------------------------------------- 1 | { 2 | "杭州市": 800, 3 | "宁波市": 1000, 4 | "温州市": 900, 5 | "嘉兴市": 1100, 6 | "绍兴市": 800, 7 | "诸暨市": 1200 8 | } -------------------------------------------------------------------------------- /static/mock/funnel/areaSource.json: -------------------------------------------------------------------------------- 1 | [ 2 | { "value": 60, "name": "访问" }, 3 | { "value": 40, "name": "咨询" }, 4 | { "value": 20, "name": "订单" }, 5 | { "value": 80, "name": "点击" }, 6 | { "value": 100, "name": "展现" } 7 | ] -------------------------------------------------------------------------------- /static/mock/line/eventMonthsSource.json: -------------------------------------------------------------------------------- 1 | { 2 | "2016/12": 800, 3 | "2017/1": 1000, 4 | "2017/2": 900, 5 | "2017/3": 1100, 6 | "2017/4": 800, 7 | "2017/5": 1200 8 | } -------------------------------------------------------------------------------- /static/mock/pie/caringObjectSource.json: -------------------------------------------------------------------------------- 1 | { 2 | "老年人": 21, 3 | "优抚对象": 10, 4 | "计生人员": 1, 5 | "企业退休人员": 10, 6 | "结婚女性": 1, 7 | "需救助人员": 10, 8 | "未成年保护":1, 9 | "失业人员": 10, 10 | "双拥人员": 21, 11 | "育龄妇女": 3, 12 | "出身婴儿": 1, 13 | "低保人员": 10, 14 | "残疾人": 5, 15 | "怀孕妇女": 2 16 | } -------------------------------------------------------------------------------- /static/mock/pie/eventHandlingSource.json: -------------------------------------------------------------------------------- 1 | { 2 | "受理率": "65%", 3 | "办理率": "80%", 4 | "办结率": "98%" 5 | } -------------------------------------------------------------------------------- /static/mock/pie/eventTypeSource.json: -------------------------------------------------------------------------------- 1 | { 2 | "便民服务": 1221, 3 | "城市管理": 2532, 4 | "社会治安": 1221, 5 | "社会监管": 3350 6 | } -------------------------------------------------------------------------------- /static/mock/radar/ageRangeSource.json: -------------------------------------------------------------------------------- 1 | [ 2 | { "name": "0~15岁", "value": 3213 }, 3 | { "name": "16～30岁", "value": 3313 }, 4 | { "name": "31～45岁", "value": 3213 }, 5 | { "name": "45～60岁", "value": 1213 }, 6 | { "name": "60～80岁", "value": 1213 }, 7 | { "name": "80岁以上", "value": 1213 } 8 | ] -------------------------------------------------------------------------------- /static/mock/table/eventListSource.json: -------------------------------------------------------------------------------- 1 | [ 2 | { "type": "测试类型", "name": "新增·测试事件1", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 3 | { "type": "测试类型", "name": "新增·测试事件2", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 4 | { "type": "测试类型", "name": "新增·测试事件3", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 5 | { "type": "测试类型", "name": "新增·测试事件4", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 6 | { "type": "测试类型", "name": "新增·测试事件5", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 7 | { "type": "测试类型", "name": "新增·测试事件6", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 8 | { "type": "测试类型", "name": "新增·测试事件7", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 9 | { "type": "测试类型", "name": "新增·测试事件8", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 10 | { "type": "测试类型", "name": "新增·测试事件9", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" }, 11 | { "type": "测试类型", "name": "新增·测试事件10", "address": "西湖区", "source": "PC录入", "time": "2018-04-20" } 12 | ] -------------------------------------------------------------------------------- /static/temp/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "status": true 3 | } -------------------------------------------------------------------------------- /static/tinified/ball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/tinified/ball.png -------------------------------------------------------------------------------- /static/tinified/bar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/tinified/bar-1.png -------------------------------------------------------------------------------- /static/tinified/bar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/tinified/bar-2.png -------------------------------------------------------------------------------- /static/tinified/box-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/tinified/box-1.png -------------------------------------------------------------------------------- /static/tinified/box-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/tinified/box-2.png -------------------------------------------------------------------------------- /static/tinified/funnel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/tinified/funnel.png -------------------------------------------------------------------------------- /static/tinified/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/tinified/line.png -------------------------------------------------------------------------------- /static/tinified/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/tinified/loading.png -------------------------------------------------------------------------------- /static/tinified/pie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/tinified/pie.png -------------------------------------------------------------------------------- /static/tinified/radar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/tinified/radar.png -------------------------------------------------------------------------------- /static/tinified/scroll-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MrManYoYo/Vue-Screen-Component/e65ede064052b1c71f560ac0de295086e48bd32e/static/tinified/scroll-list.png --------------------------------------------------------------------------------