{ | |||||
"presets": [ | |||||
["env", { | |||||
"modules": false, | |||||
"targets": { | |||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"] | |||||
} | |||||
}], | |||||
"stage-2" | |||||
], | |||||
"plugins": ["transform-vue-jsx", "transform-runtime"] | |||||
} |
root = true | |||||
[*] | |||||
charset = utf-8 | |||||
indent_style = space | |||||
indent_size = 2 | |||||
end_of_line = lf | |||||
insert_final_newline = true | |||||
trim_trailing_whitespace = true |
.DS_Store | |||||
node_modules/ | |||||
/dist/ | |||||
npm-debug.log* | |||||
yarn-debug.log* | |||||
yarn-error.log* | |||||
# Editor directories and files | |||||
.idea | |||||
.vscode | |||||
*.suo | |||||
*.ntvs* | |||||
*.njsproj | |||||
*.sln |
// https://github.com/michael-ciniawsky/postcss-load-config | |||||
module.exports = { | |||||
"plugins": { | |||||
"postcss-import": {}, | |||||
"postcss-url": {}, | |||||
// to edit target browsers: use "browserslist" field in package.json | |||||
"autoprefixer": {} | |||||
} | |||||
} |
'use strict' | |||||
require('./check-versions')() | |||||
process.env.NODE_ENV = 'production' | |||||
const ora = require('ora') | |||||
const rm = require('rimraf') | |||||
const path = require('path') | |||||
const chalk = require('chalk') | |||||
const webpack = require('webpack') | |||||
const config = require('../config') | |||||
const webpackConfig = require('./webpack.prod.conf') | |||||
const spinner = ora('building for production...') | |||||
spinner.start() | |||||
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { | |||||
if (err) throw err | |||||
webpack(webpackConfig, (err, stats) => { | |||||
spinner.stop() | |||||
if (err) throw err | |||||
process.stdout.write(stats.toString({ | |||||
colors: true, | |||||
modules: false, | |||||
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. | |||||
chunks: false, | |||||
chunkModules: false | |||||
}) + '\n\n') | |||||
if (stats.hasErrors()) { | |||||
console.log(chalk.red(' Build failed with errors.\n')) | |||||
process.exit(1) | |||||
} | |||||
console.log(chalk.cyan(' Build complete.\n')) | |||||
console.log(chalk.yellow( | |||||
' Tip: built files are meant to be served over an HTTP server.\n' + | |||||
' Opening index.html over file:// won\'t work.\n' | |||||
)) | |||||
}) | |||||
}) |
'use strict' | |||||
const chalk = require('chalk') | |||||
const semver = require('semver') | |||||
const packageConfig = require('../package.json') | |||||
const shell = require('shelljs') | |||||
function exec (cmd) { | |||||
return require('child_process').execSync(cmd).toString().trim() | |||||
} | |||||
const versionRequirements = [ | |||||
{ | |||||
name: 'node', | |||||
currentVersion: semver.clean(process.version), | |||||
versionRequirement: packageConfig.engines.node | |||||
} | |||||
] | |||||
if (shell.which('npm')) { | |||||
versionRequirements.push({ | |||||
name: 'npm', | |||||
currentVersion: exec('npm --version'), | |||||
versionRequirement: packageConfig.engines.npm | |||||
}) | |||||
} | |||||
module.exports = function () { | |||||
const warnings = [] | |||||
for (let i = 0; i < versionRequirements.length; i++) { | |||||
const mod = versionRequirements[i] | |||||
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { | |||||
warnings.push(mod.name + ': ' + | |||||
chalk.red(mod.currentVersion) + ' should be ' + | |||||
chalk.green(mod.versionRequirement) | |||||
) | |||||
} | |||||
} | |||||
if (warnings.length) { | |||||
console.log('') | |||||
console.log(chalk.yellow('To use this template, you must update following to modules:')) | |||||
console.log() | |||||
for (let i = 0; i < warnings.length; i++) { | |||||
const warning = warnings[i] | |||||
console.log(' ' + warning) | |||||
} | |||||
console.log() | |||||
process.exit(1) | |||||
} | |||||
} |
'use strict' | |||||
const path = require('path') | |||||
const config = require('../config') | |||||
const ExtractTextPlugin = require('extract-text-webpack-plugin') | |||||
const packageConfig = require('../package.json') | |||||
exports.assetsPath = function (_path) { | |||||
const assetsSubDirectory = process.env.NODE_ENV === 'production' | |||||
? config.build.assetsSubDirectory | |||||
: config.dev.assetsSubDirectory | |||||
return path.posix.join(assetsSubDirectory, _path) | |||||
} | |||||
exports.cssLoaders = function (options) { | |||||
options = options || {} | |||||
const cssLoader = { | |||||
loader: 'css-loader', | |||||
options: { | |||||
sourceMap: options.sourceMap | |||||
} | |||||
} | |||||
const postcssLoader = { | |||||
loader: 'postcss-loader', | |||||
options: { | |||||
sourceMap: options.sourceMap | |||||
} | |||||
} | |||||
// generate loader string to be used with extract text plugin | |||||
function generateLoaders (loader, loaderOptions) { | |||||
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] | |||||
if (loader) { | |||||
loaders.push({ | |||||
loader: loader + '-loader', | |||||
options: Object.assign({}, loaderOptions, { | |||||
sourceMap: options.sourceMap | |||||
}) | |||||
}) | |||||
} | |||||
// Extract CSS when that option is specified | |||||
// (which is the case during production build) | |||||
if (options.extract) { | |||||
return ExtractTextPlugin.extract({ | |||||
use: loaders, | |||||
fallback: 'vue-style-loader' | |||||
}) | |||||
} else { | |||||
return ['vue-style-loader'].concat(loaders) | |||||
} | |||||
} | |||||
// https://vue-loader.vuejs.org/en/configurations/extract-css.html | |||||
return { | |||||
css: generateLoaders(), | |||||
postcss: generateLoaders(), | |||||
less: generateLoaders('less'), | |||||
sass: generateLoaders('sass', { indentedSyntax: true }), | |||||
scss: generateLoaders('sass'), | |||||
stylus: generateLoaders('stylus'), | |||||
styl: generateLoaders('stylus') | |||||
} | |||||
} | |||||
// Generate loaders for standalone style files (outside of .vue) | |||||
exports.styleLoaders = function (options) { | |||||
const output = [] | |||||
const loaders = exports.cssLoaders(options) | |||||
for (const extension in loaders) { | |||||
const loader = loaders[extension] | |||||
output.push({ | |||||
test: new RegExp('\\.' + extension + '$'), | |||||
use: loader | |||||
}) | |||||
} | |||||
return output | |||||
} | |||||
exports.createNotifierCallback = () => { | |||||
const notifier = require('node-notifier') | |||||
return (severity, errors) => { | |||||
if (severity !== 'error') return | |||||
const error = errors[0] | |||||
const filename = error.file && error.file.split('!').pop() | |||||
notifier.notify({ | |||||
title: packageConfig.name, | |||||
message: severity + ': ' + error.name, | |||||
subtitle: filename || '', | |||||
icon: path.join(__dirname, 'logo.png') | |||||
}) | |||||
} | |||||
} |
'use strict' | |||||
const utils = require('./utils') | |||||
const config = require('../config') | |||||
const isProduction = process.env.NODE_ENV === 'production' | |||||
const sourceMapEnabled = isProduction | |||||
? config.build.productionSourceMap | |||||
: config.dev.cssSourceMap | |||||
module.exports = { | |||||
loaders: utils.cssLoaders({ | |||||
sourceMap: sourceMapEnabled, | |||||
extract: isProduction | |||||
}), | |||||
cssSourceMap: sourceMapEnabled, | |||||
cacheBusting: config.dev.cacheBusting, | |||||
transformToRequire: { | |||||
video: ['src', 'poster'], | |||||
source: 'src', | |||||
img: 'src', | |||||
image: 'xlink:href' | |||||
} | |||||
} |
'use strict' | |||||
const path = require('path') | |||||
const utils = require('./utils') | |||||
const config = require('../config') | |||||
const vueLoaderConfig = require('./vue-loader.conf') | |||||
function resolve(dir) { | |||||
return path.join(__dirname, '..', dir) | |||||
} | |||||
module.exports = { | |||||
context: path.resolve(__dirname, '../'), | |||||
entry: { | |||||
app: ["babel-polyfill", "./src/main.js"] | |||||
}, | |||||
externals: { | |||||
'AMap': 'AMap', | |||||
}, | |||||
output: { | |||||
path: config.build.assetsRoot, | |||||
filename: '[name].js', | |||||
publicPath: process.env.NODE_ENV === 'production' | |||||
? config.build.assetsPublicPath | |||||
: config.dev.assetsPublicPath | |||||
}, | |||||
resolve: { | |||||
extensions: ['.js', '.vue', '.json'], | |||||
alias: { | |||||
'@': resolve('src'), | |||||
} | |||||
}, | |||||
module: { | |||||
rules: [ | |||||
{ | |||||
test: /\.vue$/, | |||||
loader: 'vue-loader', | |||||
options: vueLoaderConfig | |||||
}, | |||||
{ | |||||
test: /\.js$/, | |||||
loader: 'babel-loader', | |||||
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] | |||||
}, | |||||
{ | |||||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, | |||||
loader: 'url-loader', | |||||
exclude: [resolve('src/assets/icons')], | |||||
options: { | |||||
limit: 10000, | |||||
name: utils.assetsPath('img/[name].[hash:7].[ext]') | |||||
} | |||||
}, | |||||
{ | |||||
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, | |||||
loader: 'url-loader', | |||||
options: { | |||||
limit: 10000, | |||||
name: utils.assetsPath('media/[name].[hash:7].[ext]') | |||||
} | |||||
}, | |||||
{ | |||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, | |||||
loader: 'url-loader', | |||||
options: { | |||||
limit: 10000, | |||||
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') | |||||
} | |||||
} | |||||
] | |||||
}, | |||||
node: { | |||||
// prevent webpack from injecting useless setImmediate polyfill because Vue | |||||
// source contains it (although only uses it if it's native). | |||||
setImmediate: false, | |||||
// prevent webpack from injecting mocks to Node native modules | |||||
// that does not make sense for the client | |||||
dgram: 'empty', | |||||
fs: 'empty', | |||||
net: 'empty', | |||||
tls: 'empty', | |||||
child_process: 'empty' | |||||
} | |||||
} |
'use strict' | |||||
const utils = require('./utils') | |||||
const webpack = require('webpack') | |||||
const config = require('../config') | |||||
const merge = require('webpack-merge') | |||||
const path = require('path') | |||||
const baseWebpackConfig = require('./webpack.base.conf') | |||||
const CopyWebpackPlugin = require('copy-webpack-plugin') | |||||
const HtmlWebpackPlugin = require('html-webpack-plugin') | |||||
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') | |||||
const portfinder = require('portfinder') | |||||
const HOST = process.env.HOST | |||||
const PORT = process.env.PORT && Number(process.env.PORT) | |||||
const devWebpackConfig = merge(baseWebpackConfig, { | |||||
module: { | |||||
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) | |||||
}, | |||||
// cheap-module-eval-source-map is faster for development | |||||
devtool: config.dev.devtool, | |||||
// these devServer options should be customized in /config/index.js | |||||
devServer: { | |||||
clientLogLevel: 'warning', | |||||
historyApiFallback: { | |||||
rewrites: [ | |||||
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, | |||||
], | |||||
}, | |||||
hot: true, | |||||
contentBase: false, // since we use CopyWebpackPlugin. | |||||
compress: true, | |||||
host: HOST || config.dev.host, | |||||
port: PORT || config.dev.port, | |||||
open: config.dev.autoOpenBrowser, | |||||
overlay: config.dev.errorOverlay | |||||
? { warnings: false, errors: true } | |||||
: false, | |||||
publicPath: config.dev.assetsPublicPath, | |||||
proxy: config.dev.proxyTable, | |||||
quiet: true, // necessary for FriendlyErrorsPlugin | |||||
watchOptions: { | |||||
poll: config.dev.poll, | |||||
} | |||||
}, | |||||
plugins: [ | |||||
new webpack.DefinePlugin({ | |||||
'process.env': require('../config/dev.env') | |||||
}), | |||||
new webpack.HotModuleReplacementPlugin(), | |||||
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. | |||||
new webpack.NoEmitOnErrorsPlugin(), | |||||
// https://github.com/ampedandwired/html-webpack-plugin | |||||
new HtmlWebpackPlugin({ | |||||
filename: 'index.html', | |||||
template: 'index.html', | |||||
inject: true | |||||
}), | |||||
// copy custom static assets | |||||
new CopyWebpackPlugin([ | |||||
{ | |||||
from: path.resolve(__dirname, '../static'), | |||||
to: config.dev.assetsSubDirectory, | |||||
ignore: ['.*'] | |||||
} | |||||
]) | |||||
] | |||||
}) | |||||
module.exports = new Promise((resolve, reject) => { | |||||
portfinder.basePort = process.env.PORT || config.dev.port | |||||
portfinder.getPort((err, port) => { | |||||
if (err) { | |||||
reject(err) | |||||
} else { | |||||
// publish the new Port, necessary for e2e tests | |||||
process.env.PORT = port | |||||
// add port to devServer config | |||||
devWebpackConfig.devServer.port = port | |||||
// Add FriendlyErrorsPlugin | |||||
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ | |||||
compilationSuccessInfo: { | |||||
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], | |||||
}, | |||||
onErrors: config.dev.notifyOnErrors | |||||
? utils.createNotifierCallback() | |||||
: undefined | |||||
})) | |||||
resolve(devWebpackConfig) | |||||
} | |||||
}) | |||||
}) |
'use strict' | |||||
const path = require('path') | |||||
const utils = require('./utils') | |||||
const webpack = require('webpack') | |||||
const config = require('../config') | |||||
const merge = require('webpack-merge') | |||||
const baseWebpackConfig = require('./webpack.base.conf') | |||||
const CopyWebpackPlugin = require('copy-webpack-plugin') | |||||
const HtmlWebpackPlugin = require('html-webpack-plugin') | |||||
const ExtractTextPlugin = require('extract-text-webpack-plugin') | |||||
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') | |||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') | |||||
const env = require('../config/prod.env') | |||||
const webpackConfig = merge(baseWebpackConfig, { | |||||
module: { | |||||
rules: utils.styleLoaders({ | |||||
sourceMap: config.build.productionSourceMap, | |||||
extract: true, | |||||
usePostCSS: true | |||||
}) | |||||
}, | |||||
devtool: config.build.productionSourceMap ? config.build.devtool : false, | |||||
output: { | |||||
path: config.build.assetsRoot, | |||||
filename: utils.assetsPath('js/[name].[chunkhash].js'), | |||||
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') | |||||
}, | |||||
plugins: [ | |||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html | |||||
new webpack.DefinePlugin({ | |||||
'process.env': env | |||||
}), | |||||
new UglifyJsPlugin({ | |||||
uglifyOptions: { | |||||
compress: { | |||||
warnings: false | |||||
} | |||||
}, | |||||
sourceMap: config.build.productionSourceMap, | |||||
parallel: true | |||||
}), | |||||
// extract css into its own file | |||||
new ExtractTextPlugin({ | |||||
filename: utils.assetsPath('css/[name].[contenthash].css'), | |||||
// Setting the following option to `false` will not extract CSS from codesplit chunks. | |||||
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. | |||||
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, | |||||
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 | |||||
allChunks: true, | |||||
}), | |||||
// Compress extracted CSS. We are using this plugin so that possible | |||||
// duplicated CSS from different components can be deduped. | |||||
new OptimizeCSSPlugin({ | |||||
cssProcessorOptions: config.build.productionSourceMap | |||||
? { safe: true, map: { inline: false } } | |||||
: { safe: true } | |||||
}), | |||||
// generate dist index.html with correct asset hash for caching. | |||||
// you can customize output by editing /index.html | |||||
// see https://github.com/ampedandwired/html-webpack-plugin | |||||
new HtmlWebpackPlugin({ | |||||
filename: config.build.index, | |||||
template: 'index.html', | |||||
inject: true, | |||||
minify: { | |||||
removeComments: true, | |||||
collapseWhitespace: true, | |||||
removeAttributeQuotes: true | |||||
// more options: | |||||
// https://github.com/kangax/html-minifier#options-quick-reference | |||||
}, | |||||
// necessary to consistently work with multiple chunks via CommonsChunkPlugin | |||||
chunksSortMode: 'dependency' | |||||
}), | |||||
// keep module.id stable when vendor modules does not change | |||||
new webpack.HashedModuleIdsPlugin(), | |||||
// enable scope hoisting | |||||
new webpack.optimize.ModuleConcatenationPlugin(), | |||||
// split vendor js into its own file | |||||
new webpack.optimize.CommonsChunkPlugin({ | |||||
name: 'vendor', | |||||
minChunks (module) { | |||||
// any required modules inside node_modules are extracted to vendor | |||||
return ( | |||||
module.resource && | |||||
/\.js$/.test(module.resource) && | |||||
module.resource.indexOf( | |||||
path.join(__dirname, '../node_modules') | |||||
) === 0 | |||||
) | |||||
} | |||||
}), | |||||
// extract webpack runtime and module manifest to its own file in order to | |||||
// prevent vendor hash from being updated whenever app bundle is updated | |||||
new webpack.optimize.CommonsChunkPlugin({ | |||||
name: 'manifest', | |||||
minChunks: Infinity | |||||
}), | |||||
// This instance extracts shared chunks from code splitted chunks and bundles them | |||||
// in a separate chunk, similar to the vendor chunk | |||||
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk | |||||
new webpack.optimize.CommonsChunkPlugin({ | |||||
name: 'app', | |||||
async: 'vendor-async', | |||||
children: true, | |||||
minChunks: 3 | |||||
}), | |||||
// copy custom static assets | |||||
new CopyWebpackPlugin([ | |||||
{ | |||||
from: path.resolve(__dirname, '../static'), | |||||
to: config.build.assetsSubDirectory, | |||||
ignore: ['.*'] | |||||
} | |||||
]) | |||||
] | |||||
}) | |||||
if (config.build.productionGzip) { | |||||
const CompressionWebpackPlugin = require('compression-webpack-plugin') | |||||
webpackConfig.plugins.push( | |||||
new CompressionWebpackPlugin({ | |||||
asset: '[path].gz[query]', | |||||
algorithm: 'gzip', | |||||
test: new RegExp( | |||||
'\\.(' + | |||||
config.build.productionGzipExtensions.join('|') + | |||||
')$' | |||||
), | |||||
threshold: 10240, | |||||
minRatio: 0.8 | |||||
}) | |||||
) | |||||
} | |||||
if (config.build.bundleAnalyzerReport) { | |||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin | |||||
webpackConfig.plugins.push(new BundleAnalyzerPlugin()) | |||||
} | |||||
module.exports = webpackConfig |
'use strict' | |||||
const merge = require('webpack-merge') | |||||
const prodEnv = require('./prod.env') | |||||
module.exports = merge(prodEnv, { | |||||
NODE_ENV: '"development"' | |||||
}) |
'use strict' | |||||
// Template version: 1.3.1 | |||||
// see http://vuejs-templates.github.io/webpack for documentation. | |||||
const path = require('path') | |||||
module.exports = { | |||||
dev: { | |||||
// Paths | |||||
assetsSubDirectory: 'static', | |||||
assetsPublicPath: '/', | |||||
proxyTable: { | |||||
'/admin': { | |||||
target: 'http://o2oadmin.yunhengwang.net', | |||||
changeOrigin: true, | |||||
secure: false, | |||||
pathRewrite: { | |||||
'^/api': '' | |||||
} | |||||
} | |||||
}, | |||||
// Various Dev Server settings | |||||
host: '0.0.0.0', // can be overwritten by process.env.HOST | |||||
port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined | |||||
autoOpenBrowser: false, | |||||
hot: true, | |||||
disableHostCheck:true, | |||||
errorOverlay: true, | |||||
notifyOnErrors: true, | |||||
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- | |||||
/** | |||||
* Source Maps | |||||
*/ | |||||
// https://webpack.js.org/configuration/devtool/#development | |||||
devtool: 'cheap-module-eval-source-map', | |||||
// If you have problems debugging vue-files in devtools, | |||||
// set this to false - it *may* help | |||||
// https://vue-loader.vuejs.org/en/options.html#cachebusting | |||||
cacheBusting: true, | |||||
cssSourceMap: true | |||||
}, | |||||
build: { | |||||
// Template for index.html | |||||
index: path.resolve(__dirname, '../dist/index.html'), | |||||
// Paths | |||||
assetsRoot: path.resolve(__dirname, '../dist'), | |||||
assetsSubDirectory: 'static', | |||||
assetsPublicPath: '/', | |||||
/** | |||||
* Source Maps | |||||
*/ | |||||
productionSourceMap: true, | |||||
// https://webpack.js.org/configuration/devtool/#production | |||||
devtool: '#source-map', | |||||
// Gzip off by default as many popular static hosts such as | |||||
// Surge or Netlify already gzip all static assets for you. | |||||
// Before setting to `true`, make sure to: | |||||
// npm install --save-dev compression-webpack-plugin | |||||
productionGzip: false, | |||||
productionGzipExtensions: ['js', 'css'], | |||||
// Run the build command with an extra argument to | |||||
// View the bundle analyzer report after build finishes: | |||||
// `npm run build --report` | |||||
// Set to `true` or `false` to always turn it on or off | |||||
bundleAnalyzerReport: process.env.npm_config_report | |||||
} | |||||
} |
'use strict' | |||||
module.exports = { | |||||
NODE_ENV: '"production"' | |||||
} |
<!DOCTYPE html> | |||||
<html> | |||||
<head> | |||||
<meta charset="utf-8"> | |||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | |||||
<title></title> | |||||
</head> | |||||
<body> | |||||
<div id="app"></div> | |||||
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=de9019d8c702937af86dfdb6897d82c3&plugin=AMap.DistrictSearch"></script> | |||||
</body> | |||||
</html> |
{ | |||||
"name": "taauav", | |||||
"version": "1.0.0", | |||||
"description": "A Vue.js project", | |||||
"author": "bao", | |||||
"private": true, | |||||
"scripts": { | |||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", | |||||
"start": "npm run dev", | |||||
"build": "node build/build.js" | |||||
}, | |||||
"dependencies": { | |||||
"@antv/g2": "^3.5.11", | |||||
"element-ui": "^2.13.0", | |||||
"vue": "^2.5.2", | |||||
"vue-router": "^3.0.1", | |||||
"vuex": "^3.1.2" | |||||
}, | |||||
"devDependencies": { | |||||
"autoprefixer": "^7.1.2", | |||||
"axios": "^0.19.0", | |||||
"babel-core": "^6.22.1", | |||||
"babel-helper-vue-jsx-merge-props": "^2.0.3", | |||||
"babel-loader": "^7.1.1", | |||||
"babel-plugin-syntax-jsx": "^6.18.0", | |||||
"babel-plugin-transform-runtime": "^6.22.0", | |||||
"babel-plugin-transform-vue-jsx": "^3.5.0", | |||||
"babel-polyfill": "^6.26.0", | |||||
"babel-preset-env": "^1.3.2", | |||||
"babel-preset-stage-2": "^6.22.0", | |||||
"chalk": "^2.0.1", | |||||
"copy-webpack-plugin": "^4.0.1", | |||||
"css-loader": "^0.28.0", | |||||
"es6-promise": "^4.2.8", | |||||
"extract-text-webpack-plugin": "^3.0.0", | |||||
"file-loader": "^1.1.4", | |||||
"friendly-errors-webpack-plugin": "^1.6.1", | |||||
"html-webpack-plugin": "^2.30.1", | |||||
"html2canvas": "^1.0.0-rc.5", | |||||
"jquery": "^3.4.1", | |||||
"js-cookie": "^2.2.0", | |||||
"less": "^3.10.3", | |||||
"less-loader": "^5.0.0", | |||||
"node-notifier": "^5.1.2", | |||||
"optimize-css-assets-webpack-plugin": "^3.2.0", | |||||
"ora": "^1.2.0", | |||||
"portfinder": "^1.0.13", | |||||
"postcss-import": "^11.0.0", | |||||
"postcss-loader": "^2.0.8", | |||||
"postcss-url": "^7.2.1", | |||||
"rimraf": "^2.6.0", | |||||
"semver": "^5.3.0", | |||||
"shelljs": "^0.7.6", | |||||
"uglifyjs-webpack-plugin": "^1.1.1", | |||||
"url-loader": "^0.5.8", | |||||
"v-viewer": "^1.4.2", | |||||
"vue-lazyload": "^1.3.3", | |||||
"vue-loader": "^13.3.0", | |||||
"vue-style-loader": "^3.0.1", | |||||
"vue-template-compiler": "^2.5.2", | |||||
"vue-wechat-title": "^2.0.5", | |||||
"webpack": "^3.6.0", | |||||
"webpack-bundle-analyzer": "^2.9.0", | |||||
"webpack-dev-server": "^2.9.1", | |||||
"webpack-merge": "^4.1.0" | |||||
}, | |||||
"engines": { | |||||
"node": ">= 6.0.0", | |||||
"npm": ">= 3.0.0" | |||||
}, | |||||
"browserslist": [ | |||||
"> 1%", | |||||
"last 2 versions", | |||||
"not ie <= 8" | |||||
] | |||||
} |
<template> | |||||
<div id="app"> | |||||
<keep-alive> | |||||
<router-view v-wechat-title="$route.meta.title" v-if="$route.meta.keepAlive"></router-view> | |||||
</keep-alive> | |||||
<router-view v-wechat-title="$route.meta.title" v-if="!$route.meta.keepAlive"></router-view> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import $ from 'jquery' | |||||
export default { | |||||
name: 'App', | |||||
created() { | |||||
let designSize = 2300; // 设计图尺寸 | |||||
let html = document.documentElement; | |||||
let wW = html.clientWidth;// 窗口宽度 | |||||
let rem = wW * 100 / designSize; | |||||
document.documentElement.style.fontSize = rem + 'px'; | |||||
$(window).resize(function ()// 绑定到窗口的这个事件中 | |||||
{ | |||||
let designSize = 2200; // 设计图尺寸 | |||||
let html = document.documentElement; | |||||
let wW = html.clientWidth;// 窗口宽度 | |||||
let rem = wW * 100 / designSize; | |||||
document.documentElement.style.fontSize = rem + 'px'; | |||||
}); | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="less"> | |||||
#app { | |||||
font-family: 'Avenir', Helvetica, Arial, sans-serif; | |||||
-webkit-font-smoothing: antialiased; | |||||
-moz-osx-font-smoothing: grayscale; | |||||
color: #2c3e50; | |||||
height: 100%; | |||||
width: 100%; | |||||
} | |||||
.el-tabs--border-card { | |||||
/*height: 100%;*/ | |||||
} | |||||
body,html{ | |||||
height: 100%; | |||||
width: 100%; | |||||
overflow: hidden; | |||||
background-color: #f2f2f2; | |||||
padding: 0; | |||||
margin: 0; | |||||
} | |||||
h4,h3{ | |||||
margin: 0; | |||||
padding: 0; | |||||
} | |||||
.el-cascader--small { | |||||
width: 100% !important; | |||||
} | |||||
.el-button--mini { | |||||
padding: 5px 7px!important; | |||||
font-size: 12px!important; | |||||
} | |||||
.el-button+.el-button { | |||||
margin-left: 2px!important; | |||||
} | |||||
.el-dialog { | |||||
width: 500px!important; | |||||
} | |||||
.el-form--inline .el-form-item{ | |||||
margin-bottom: 10px!important; | |||||
} | |||||
.el-select { | |||||
width: 100% | |||||
} | |||||
.el-table--border th{ | |||||
background-color: #f2f2f2!important; | |||||
color: #666666!important; | |||||
} | |||||
.page-current{ | |||||
text-align: center; | |||||
padding: 15px 5px; | |||||
padding-bottom: 0px; | |||||
} | |||||
.el-form-item__content{ | |||||
text-align: left!important; | |||||
} | |||||
a{text-decoration:none} | |||||
img { | |||||
cursor: pointer; | |||||
} | |||||
.el-radio-button__orig-radio:disabled:checked+.el-radio-button__inner { | |||||
color: #FFF!important; | |||||
background-color: #409EFF!important; | |||||
border-color: #409EFF!important; | |||||
} | |||||
.viewer-new-title { | |||||
color: #ffffff; | |||||
display: inline-block; | |||||
font-size: 16px; | |||||
line-height: 2; | |||||
margin: 0 5% 5px; | |||||
max-width: 90%; | |||||
opacity: 0.8; | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
-webkit-transition: opacity 0.15s; | |||||
transition: opacity 0.15s; | |||||
white-space: nowrap; | |||||
} | |||||
.el-tabs__header .el-tabs__item.is-active { | |||||
color: #fff!important; | |||||
background-color: #409eff!important; | |||||
} | |||||
.el-tabs--top .el-tabs__item.is-top:nth-child(2) { | |||||
padding-left: 20px | |||||
} | |||||
.el-tabs--top .el-tabs__item.is-top:last-child { | |||||
padding-right: 20px; | |||||
} | |||||
.el-dialog__header { | |||||
background-color: #1890ff; | |||||
padding: 12px 20px 10px!important; | |||||
.el-dialog__title { | |||||
color: #ffffff!important; | |||||
} | |||||
.el-dialog__headerbtn { | |||||
top: 15px!important; | |||||
.el-dialog__close{ | |||||
color: #ffffff!important; | |||||
} | |||||
} | |||||
} | |||||
//表格//解决element-ui的table表格控件表头与内容列不对齐问题 | |||||
.el-table th.gutter { | |||||
display: table-cell!important; | |||||
} | |||||
*{ | |||||
outline: none; | |||||
} | |||||
.fade-leave-active { | |||||
opacity: 0; | |||||
transition: all 500ms; | |||||
} | |||||
.fade-enter-active { | |||||
opacity: 1; | |||||
transform: translateX(0); | |||||
transition: all 500ms; | |||||
} | |||||
.fade-enter { | |||||
opacity: 0; | |||||
transform: translateX(100%); | |||||
} | |||||
.fade-leave { | |||||
opacity: 1; | |||||
transform: translateX(0); | |||||
} | |||||
.el-drawer__body{ | |||||
padding: 0px 20px 20px 20px; | |||||
overflow-y: auto; | |||||
} | |||||
.el-menu--collapse { | |||||
width: 64px!important; | |||||
} | |||||
.cz-tip{ | |||||
.el-collapse-item__header{ | |||||
background-color: rgba(79, 192, 232, 0.11); | |||||
padding: 0 10px; | |||||
font-size: 14px; | |||||
.el-collapse-item__arrow{ | |||||
margin: 0px 0 0 10px; | |||||
} | |||||
} | |||||
.el-collapse-item__wrap{ | |||||
background-color: rgba(79, 192, 232, 0.11); | |||||
font-size: 12px; | |||||
padding: 0 10px; | |||||
ul{ | |||||
margin: 0; | |||||
line-height: 20px; | |||||
color: #748A8F; | |||||
padding-left: 20px; | |||||
} | |||||
.el-collapse-item__content{ | |||||
padding-bottom: 10px; | |||||
} | |||||
} | |||||
} | |||||
.el-card__header{ | |||||
background-color: #409eff; | |||||
color: #ffffff; | |||||
} | |||||
.el-message-box{ | |||||
border: none!important; | |||||
.el-message-box__header { | |||||
background-color: #1890ff; | |||||
padding: 12px 15px 10px!important; | |||||
.el-message-box__title { | |||||
color: #ffffff!important; | |||||
font-size: 17px!important; | |||||
} | |||||
.el-message-box__headerbtn { | |||||
top: 12px!important; | |||||
.el-message-box__close { | |||||
color: #ffffff!important | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.el-form{ | |||||
.span-tip { | |||||
color: #999999; | |||||
line-height: 14px; | |||||
font-size: 12px; | |||||
margin-top: 5px; | |||||
} | |||||
} | |||||
.el-input--small .el-input__inner { | |||||
text-align: left; | |||||
} | |||||
.el-input.is-disabled .el-input__inner { | |||||
background-color: #ffffff; | |||||
color: #333333; | |||||
} | |||||
</style> |
import axios from 'axios' | |||||
import Cookies from 'js-cookie'; | |||||
import { Notification,MessageBox} from 'element-ui'; | |||||
import store from '../vuex' | |||||
axios.defaults.timeout = 15000 | |||||
//跨域请求,允许保存cookie | |||||
axios.defaults.withCredentials = true; | |||||
//返回其他状态吗 | |||||
axios.defaults.validateStatus = function (status) { | |||||
return status >= 200 && status <= 500; // 默认的 | |||||
}; | |||||
axios.interceptors.request.use( | |||||
config => { | |||||
config.headers['Content-Type'] = 'application/json;charset=UTF-8' | |||||
config.headers['token'] = Cookies.get(location.host+'-token') ? Cookies.get(location.host+'-token') : '' | |||||
return config; | |||||
}, | |||||
err => { | |||||
return Promise.reject(err); | |||||
} | |||||
); | |||||
axios.interceptors.response.use( | |||||
/** | |||||
* If you want to get http information such as headers or status | |||||
* Please return response => response | |||||
*/ | |||||
/** | |||||
* Determine the request status by custom code | |||||
* Here is just an example | |||||
* You can also judge the status by HTTP Status Code | |||||
*/ | |||||
response => { | |||||
if (response.status == 200) { | |||||
const res = response.data | |||||
if (res.code != 200) { | |||||
Notification.error({ | |||||
title: '错误', | |||||
message: res.message, | |||||
duration: 5 * 1000 | |||||
}); | |||||
if (res.code == 401) { | |||||
MessageBox.alert(res.message, '提示', { | |||||
confirmButtonText: '确定', | |||||
callback: action => { | |||||
store.dispatch('user/resetToken').then(res => { | |||||
location.reload() | |||||
}).catch(e => { | |||||
}) | |||||
} | |||||
}); | |||||
} else { | |||||
return Promise.reject(new Error(res.message || 'Error')) | |||||
} | |||||
} else { | |||||
return res | |||||
} | |||||
} else { | |||||
const res = response.data | |||||
let error = res.message ? res.message : res | |||||
if (response.status == 500) { | |||||
error = '服务超时' | |||||
} | |||||
Notification.error({ | |||||
title: '错误', | |||||
message: error | |||||
}); | |||||
return Promise.reject(new Error(error)) | |||||
} | |||||
}, | |||||
error => { | |||||
console.log(error) | |||||
Notification.error({ | |||||
title: '错误', | |||||
message: '服务超时' | |||||
}); | |||||
return Promise.reject(error) | |||||
} | |||||
) | |||||
export default axios | |||||
import axios from '../api' | |||||
export default { | |||||
login(params) { | |||||
return axios.post('/api/front/login/login', params) | |||||
}, | |||||
} |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white"><script xmlns="">/*global Web3*/ | |||||
cleanContextForImports() | |||||
require('web3/dist/web3.min.js') | |||||
const LocalMessageDuplexStream = require('post-message-stream') | |||||
// const PingStream = require('ping-pong-stream/ping') | |||||
// const endOfStream = require('end-of-stream') | |||||
const setupDappAutoReload = require('./lib/auto-reload.js') | |||||
const MetamaskInpageProvider = require('./lib/inpage-provider.js') | |||||
restoreContextAfterImports() | |||||
// | |||||
// setup plugin communication | |||||
// | |||||
// setup background connection | |||||
var metamaskStream = new LocalMessageDuplexStream({ | |||||
name: 'inpage', | |||||
target: 'contentscript', | |||||
}) | |||||
// compose the inpage provider | |||||
var inpageProvider = new MetamaskInpageProvider(metamaskStream) | |||||
// | |||||
// setup web3 | |||||
// | |||||
var web3 = new Web3(inpageProvider) | |||||
web3.setProvider = function () { | |||||
console.log('MetaMask - overrode web3.setProvider') | |||||
} | |||||
console.log('MetaMask - injected web3') | |||||
// export global web3, with usage-detection | |||||
setupDappAutoReload(web3, inpageProvider.publicConfigStore) | |||||
// set web3 defaultAccount | |||||
inpageProvider.publicConfigStore.subscribe(function (state) { | |||||
web3.eth.defaultAccount = state.selectedAddress | |||||
}) | |||||
// | |||||
// util | |||||
// | |||||
// need to make sure we aren't affected by overlapping namespaces | |||||
// and that we dont affect the app with our namespace | |||||
// mostly a fix for web3's BigNumber if AMD's "define" is defined... | |||||
var __define | |||||
function cleanContextForImports () { | |||||
__define = global.define | |||||
try { | |||||
global.define = undefined | |||||
} catch (_) { | |||||
console.warn('MetaMask - global.define could not be deleted.') | |||||
} | |||||
} | |||||
function restoreContextAfterImports () { | |||||
try { | |||||
global.define = __define | |||||
} catch (_) { | |||||
console.warn('MetaMask - global.define could not be overwritten.') | |||||
} | |||||
} | |||||
</script> | |||||
<path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/> | |||||
<path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z" transform="rotate(144.155 16 16)"> | |||||
<animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite"/> | |||||
</path> | |||||
</svg> |
// import { City } from 'truck-lib' | |||||
import Vue from 'vue' | |||||
/** | |||||
* 时间格式化 | |||||
*/ | |||||
Vue.filter('filterSwitch', function (value) { | |||||
if (value) { | |||||
if (value==='0') { | |||||
return '关闭' | |||||
} else if (value==='1'){ | |||||
return '开启' | |||||
} | |||||
} else { | |||||
return '' | |||||
} | |||||
}) | |||||
Vue.filter('datetime', function (value, format) { | |||||
if (value) { | |||||
if (format) { | |||||
return dateFtt(format, new Date(parseInt(value))) | |||||
} else { | |||||
return dateFtt("yyyy-MM-dd", new Date(parseInt(value))) | |||||
} | |||||
} else { | |||||
return '' | |||||
} | |||||
}) | |||||
Vue.filter('filterName', function (value, data) { | |||||
let filter = '' | |||||
value = parseInt(value) | |||||
for (let key in data) { | |||||
if (key == value) { | |||||
filter = data[key] | |||||
} | |||||
} | |||||
return filter | |||||
}) | |||||
Vue.filter('filterInList', function (value, data) { | |||||
let filter = '' | |||||
value = parseInt(value) | |||||
let child = data.find(item => item.id == value) | |||||
if (child) { | |||||
filter = child.name | |||||
} | |||||
return filter | |||||
}) | |||||
Vue.filter('filterStatus', function (value) { | |||||
let filter = '' | |||||
value = parseInt(value) | |||||
switch (value) { | |||||
case 1: | |||||
filter = '正常' | |||||
break | |||||
case 2: | |||||
filter = '停用' | |||||
break | |||||
default: | |||||
filter = '' | |||||
} | |||||
return filter | |||||
}) | |||||
function dateFtt(fmt, date) { //author: meizz | |||||
var o = { | |||||
"M+": date.getMonth() + 1, //月份 | |||||
"d+": date.getDate(), //日 | |||||
"h+": date.getHours(), //小时 | |||||
"m+": date.getMinutes(), //分 | |||||
"s+": date.getSeconds(), //秒 | |||||
"q+": Math.floor((date.getMonth() + 3) / 3), //季度 | |||||
"S": date.getMilliseconds() //毫秒 | |||||
}; | |||||
if (/(y+)/.test(fmt)) | |||||
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); | |||||
for (var k in o) | |||||
if (new RegExp("(" + k + ")").test(fmt)) | |||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); | |||||
return fmt; | |||||
} | |||||
import Vue from 'vue' | |||||
import App from './App' | |||||
import store from './vuex/index' | |||||
import router from './router' | |||||
import 'element-ui/lib/theme-chalk/index.css' | |||||
import ElementUI from 'element-ui'; | |||||
Vue.use(ElementUI); | |||||
import VueWechatTitle from 'vue-wechat-title'; | |||||
Vue.use(VueWechatTitle) | |||||
import 'babel-polyfill' | |||||
import Es6Promise from 'es6-promise' | |||||
require('es6-promise').polyfill() | |||||
Es6Promise.polyfill() | |||||
require('./assets/js/filter') | |||||
Vue.config.productionTip = false | |||||
import Viewer from 'v-viewer' | |||||
import 'viewerjs/dist/viewer.css' | |||||
import VueLazyload from 'vue-lazyload' | |||||
Vue.use(Viewer, { | |||||
defaultOptions: { | |||||
zIndex: 9999, | |||||
url: "data-source", | |||||
title: true | |||||
} | |||||
}) | |||||
Vue.use(VueLazyload, { | |||||
preLoad: 1.3, | |||||
error: require('./assets/img/404.jpg'), | |||||
loading: require('./assets/img/loading.svg'), | |||||
attempt: 1, | |||||
listenEvents:['scroll'] | |||||
}) | |||||
new Vue({ | |||||
el: '#app', | |||||
store, | |||||
router, | |||||
render: h => h(App) | |||||
}) |
import Vue from 'vue' | |||||
import Router from 'vue-router' | |||||
import Cookies from 'js-cookie'; | |||||
import store from '../vuex' | |||||
Vue.use(Router) | |||||
const routes = [ | |||||
{ | |||||
path: '/login', | |||||
name: 'login', | |||||
component: (resolve) => require(['@/views/login/index'], resolve), | |||||
meta: { | |||||
'title': '登录' | |||||
} | |||||
}, | |||||
{ | |||||
path: '/404', | |||||
name: '404', | |||||
component: (resolve) => require(['@/views/errorPage/403'], resolve), | |||||
meta: { | |||||
'title': '无权限' | |||||
} | |||||
}, | |||||
{ | |||||
path: '/main', | |||||
name: 'main', | |||||
component: (resolve) => require(['@/views/main/index'], resolve), | |||||
meta: { | |||||
'title': '数据大屏' | |||||
} | |||||
} | |||||
] | |||||
const router = new Router({ | |||||
mode: 'history', | |||||
routes | |||||
}) | |||||
router.onError((error) => { | |||||
router.push({path: '403'}) | |||||
}) | |||||
router.beforeEach(async (to, from, next) => { | |||||
// 登录界面登录成功之后,会把用户信息保存在会话 | |||||
// 存在时间为会话生命周期,页面关闭即失效。 | |||||
let token = Cookies.get(location.host + '-token') | |||||
next() | |||||
}) | |||||
export default router; | |||||
@keyframes error403animation { | |||||
0% { | |||||
transform: rotateZ(0deg); | |||||
} | |||||
40% { | |||||
transform: rotateZ(-20deg); | |||||
} | |||||
45% { | |||||
transform: rotateZ(-15deg); | |||||
} | |||||
50% { | |||||
transform: rotateZ(-20deg); | |||||
} | |||||
55% { | |||||
transform: rotateZ(-15deg); | |||||
} | |||||
60% { | |||||
transform: rotateZ(-20deg); | |||||
} | |||||
100% { | |||||
transform: rotateZ(0deg); | |||||
} | |||||
} | |||||
.error403{ | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
width: 100%; | |||||
&-body-con{ | |||||
width: 700px; | |||||
height: 500px; | |||||
&-title{ | |||||
text-align: center; | |||||
font-size: 70px; | |||||
font-weight: 700; | |||||
color: #2d8cf0; | |||||
height: 260px; | |||||
line-height: 260px; | |||||
margin-top: 40px; | |||||
.error403-0-span{ | |||||
display: inline-block; | |||||
position: relative; | |||||
width: 50px; | |||||
height: 50px; | |||||
border-radius: 50%; | |||||
border: 10px solid #ed3f14; | |||||
color: #ed3f14; | |||||
margin: 0 10px; | |||||
i{ | |||||
display: inline-block; | |||||
font-size: 120px; | |||||
position: absolute; | |||||
left: 50%; | |||||
top: 50%; | |||||
transform: translate(-50%,-50%); | |||||
} | |||||
} | |||||
.error403-key-span{ | |||||
display: inline-block; | |||||
position: relative; | |||||
width: 100px; | |||||
height: 190px; | |||||
border-radius: 50%; | |||||
margin-right: 10px; | |||||
i{ | |||||
display: inline-block; | |||||
font-size: 190px; | |||||
position: absolute; | |||||
left: 20px; | |||||
transform: translate(-50%,-60%); | |||||
transform-origin: center bottom; | |||||
animation: error403animation 2.8s ease 0s infinite; | |||||
} | |||||
} | |||||
} | |||||
&-message{ | |||||
display: block; | |||||
text-align: center; | |||||
font-size: 16px; | |||||
font-weight: 500; | |||||
letter-spacing: 4px; | |||||
color: #dddde2; | |||||
} | |||||
} | |||||
&-btn-con{ | |||||
text-align: center; | |||||
padding: 20px 0; | |||||
margin-bottom: 40px; | |||||
} | |||||
} |
<style lang="less" scoped> | |||||
@import './403.less'; | |||||
</style> | |||||
<template> | |||||
<div class="error404"> | |||||
<div class="error404-body-con"> | |||||
<div class="error404-body-con-title">4<span class="error404-0-span"><div type="android-lock"></div></span>3</div> | |||||
<p class="error404-body-con-message">You don't have permission</p> | |||||
<!-- <div class="error404-btn-con"> | |||||
<Button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</Button> | |||||
<Button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</Button> | |||||
</div> --> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
name: 'Error404', | |||||
methods: { | |||||
backPage () { | |||||
this.$router.go(-1); | |||||
}, | |||||
goHome () { | |||||
this.$router.push({ | |||||
name: 'home_index' | |||||
}); | |||||
} | |||||
} | |||||
}; | |||||
</script> |
<template> | |||||
<div class="login-container"> | |||||
<div class="login-main"> | |||||
<div class="login-box"> | |||||
<div class="login-header">用户登录</div> | |||||
<el-form @keyup.enter.native="submitForm('form')" class="login-form" ref="form" :model="form" label-width="0px"> | |||||
<el-form-item | |||||
label | |||||
prop="username" | |||||
:rules="{required: true, message: '用户名不能为空', trigger: 'blur'}" | |||||
> | |||||
<el-input | |||||
placeholder="输入用户名" | |||||
clearable | |||||
prefix-icon="el-icon-user-solid" | |||||
v-model="form.username" | |||||
></el-input> | |||||
</el-form-item> | |||||
<el-form-item | |||||
prop="password" | |||||
label | |||||
:rules="{ | |||||
required: true, message: '密码不能为空', trigger: 'blur' | |||||
}" | |||||
> | |||||
<el-input | |||||
auto-complete="new-password" | |||||
placeholder="输入密码" | |||||
clearable | |||||
show-password | |||||
prefix-icon="el-icon-s-goods" | |||||
type="password" | |||||
v-model="form.password" | |||||
></el-input> | |||||
</el-form-item> | |||||
<el-checkbox v-model="rememberPwd">记住密码</el-checkbox> | |||||
<el-button | |||||
:loading="loginLoading" | |||||
@click="submitForm('form')" | |||||
style="width: 100%" | |||||
type="primary" | |||||
>登录 | |||||
</el-button> | |||||
</el-form> | |||||
</div> | |||||
</div> | |||||
<div class="foot-text"> | |||||
<a data-v-42b89d7e="" href="http://www.beian.miit.gov.cn" target="_blank">@2019-2021-拓恒航空 -苏ICP备19054947号-2 | |||||
版权所有 | |||||
@南京拓恒航空科技有限公司</a> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import api from "@/api/user/user"; | |||||
import Cookies from "js-cookie"; | |||||
import $ from 'jquery' | |||||
export default { | |||||
name: "Login", | |||||
data() { | |||||
return { | |||||
rememberPwd: false, | |||||
loginLoading: false, | |||||
form: { | |||||
username: "", | |||||
password: "" | |||||
} | |||||
}; | |||||
}, | |||||
created() { | |||||
let userPwd=Cookies.get('userPwd') | |||||
if(userPwd){ | |||||
userPwd=JSON.parse(userPwd) | |||||
this.form=Object.assign({},{username:userPwd.username,password:userPwd.password}) | |||||
this.rememberPwd=true | |||||
} | |||||
}, | |||||
mounted() { | |||||
}, | |||||
methods: { | |||||
submitForm(formName) { | |||||
this.$refs[formName].validate(valid => { | |||||
if (valid) { | |||||
this.loginLoading = true; | |||||
api | |||||
.login(this.form) | |||||
.then(res => { | |||||
const {token} = res.data; | |||||
Cookies.set("token", token); | |||||
let redirect = this.$route.query.redirect; | |||||
if (this.rememberPwd) { | |||||
let param = { | |||||
rememberPwd: this.rememberPwd, | |||||
username: this.form.username, | |||||
password: this.form.password, | |||||
} | |||||
Cookies.set('userPwd',JSON.stringify(param)) | |||||
}else{ | |||||
Cookies.remove('userPwd') | |||||
} | |||||
if (redirect) { | |||||
this.$router.push({path: redirect}); | |||||
} else { | |||||
this.$router.push({path: "/"}); | |||||
} | |||||
this.loginLoading = false; | |||||
}) | |||||
.catch(e => { | |||||
this.loginLoading = false; | |||||
}); | |||||
} | |||||
}); | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style lang="less"> | |||||
.login-container { | |||||
position: absolute; | |||||
top: 0; | |||||
bottom: 0; | |||||
left: 0; | |||||
right: 0; | |||||
height: 100%; | |||||
width: 100%; | |||||
background-position: center center; | |||||
background-size: cover; | |||||
background-image: url(../../assets/img/login.jpg); | |||||
.login-main { | |||||
position: absolute; | |||||
top: 50%; | |||||
transform: translateY(-50%); | |||||
background-position: center center; | |||||
background-size: cover; | |||||
/*background-image: url(../../assets/img/loginmain.png);*/ | |||||
width: 6.3rem; | |||||
height: 5.5rem; | |||||
right: 11%; | |||||
.login-box { | |||||
padding: 0 0.57rem; | |||||
padding-top: 1.5rem; | |||||
.login-header { | |||||
text-align: center; | |||||
font-family: "MicrosoftYaHei"; | |||||
font-size: 0.32rem; | |||||
line-height: 0.25rem; | |||||
color: #00bff4; | |||||
letter-spacing: 5px; | |||||
} | |||||
.login-form { | |||||
.el-button { | |||||
margin-top: 0.38rem; | |||||
padding: 0.12rem; | |||||
font-size: 0.32rem; | |||||
border-radius: 4px; | |||||
} | |||||
.el-checkbox { | |||||
font-size: 0.22rem; | |||||
.el-checkbox__label { | |||||
padding-left: 0.1rem; | |||||
line-height: 0.25rem; | |||||
font-size: 0.22rem; | |||||
color: #ffffff; | |||||
} | |||||
.el-checkbox__inner { | |||||
border: solid #20a3f5 0.03rem !important; | |||||
width: 0.24rem; | |||||
height: 0.24rem; | |||||
background-color: #265A71; | |||||
} | |||||
.el-checkbox__inner::after { | |||||
height: 0.1rem; | |||||
left: 0.07rem; | |||||
top: 0.01rem; | |||||
width: 0.04rem; | |||||
} | |||||
} | |||||
margin-top: 0.36rem; | |||||
.el-input--prefix .el-input__inner { | |||||
background-color: #265A71; | |||||
border: none; | |||||
border: solid #20a3f5 0.03rem !important; | |||||
height: 0.56rem; | |||||
} | |||||
.el-form-item { | |||||
margin-bottom: 0.35rem; | |||||
input:-webkit-autofill { | |||||
-webkit-box-shadow: 0 0 0px 1000px white inset; | |||||
border: 1px solid #CCC !important; | |||||
} | |||||
.el-form-item__content { | |||||
line-height: 0.55rem; | |||||
font-family: "MicrosoftYaHei"; | |||||
position: relative; | |||||
font-size: 0.22rem; | |||||
color: #ffffff; | |||||
.el-form-item__error { | |||||
font-size: 0.22rem; | |||||
padding-top: 0.04rem; | |||||
} | |||||
.el-input--prefix .el-input__inner { | |||||
font-family: "MicrosoftYaHei"; | |||||
font-size: 0.22rem; | |||||
color: #ffffff; | |||||
padding-left: 0.65rem; | |||||
padding-right: 0.65rem; | |||||
} | |||||
.el-input__icon { | |||||
line-height: normal; | |||||
width: 0.5rem; | |||||
font-size: 0.22rem; | |||||
color: #20a3f5; | |||||
} | |||||
.el-input { | |||||
font-family: "MicrosoftYaHei"; | |||||
font-size: 0.22rem; | |||||
line-height: 0.55rem; | |||||
color: #ffffff; | |||||
.el-input__inner::placeholder { | |||||
color: #ffffff; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.foot-text { | |||||
line-height: 30px; | |||||
text-align: center; | |||||
background-color: #333; | |||||
position: absolute; | |||||
bottom: 0px; | |||||
z-index: 1; | |||||
width: 100%; | |||||
> a { | |||||
position: relative; | |||||
bottom: 5px; | |||||
font-size: 14px; | |||||
color: #999; | |||||
} | |||||
} | |||||
.box { | |||||
width: 350px; | |||||
position: absolute; | |||||
right: 20%; | |||||
top: 30%; | |||||
} | |||||
} | |||||
</style> | |||||
<template> | |||||
<div class="main-index" style="position: relative"> | |||||
<div class="index-map" id="indexMap"></div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
import AMap from 'AMap' | |||||
import njBround from '@/assets/js/njBround' | |||||
export default { | |||||
name: "main-container", | |||||
data() { | |||||
return { | |||||
map:{} | |||||
} | |||||
}, | |||||
created() { | |||||
console.log('1234') | |||||
}, | |||||
mounted() { | |||||
let me =this | |||||
this.map = new AMap.Map('indexMap', { | |||||
zoom: 9, | |||||
center: [118.750078, 31.943115], | |||||
// features: ['bg'], | |||||
resizeEnable: true | |||||
}); | |||||
this.map.on("complete", function () { | |||||
me.addBound() | |||||
this.map.on('click', function(e) { | |||||
console.log(e) | |||||
console.log(e.jg.getLng()+ ',' + e.jg.getLat()) | |||||
}); | |||||
}) | |||||
}, | |||||
methods: { | |||||
addBound() { | |||||
let me = this | |||||
let list = njBround | |||||
if (list && list.length > 0) { | |||||
list.map(item => { | |||||
let polygons = []; | |||||
var bounds = item.bounds; | |||||
if (bounds) { | |||||
for (let i = 0, l = bounds.length; i < l; i++) { | |||||
let path = [] | |||||
bounds[i].map(cc => { | |||||
path.push( | |||||
new AMap.LngLat(cc.lng, cc.lat) | |||||
) | |||||
}) | |||||
let polygon = new AMap.Polygon({ | |||||
strokeWeight: 4, | |||||
path: path, | |||||
fillOpacity: 0.7, | |||||
fillColor: '#15948d', | |||||
strokeColor: '#0CEBE1' | |||||
}); | |||||
polygons.push(polygon); | |||||
} | |||||
} | |||||
me.map.add(polygons) | |||||
}); | |||||
} | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="less"> | |||||
.main-index{ | |||||
width: 100%; | |||||
height: 100%; | |||||
.index-map { | |||||
width: 100%; | |||||
height: 100%; | |||||
border: 1px solid #DCDFE6; | |||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04); | |||||
.amap-marker-label{ | |||||
padding: 0!important; | |||||
font-size: 14px!important; | |||||
line-height: 18px!important; | |||||
} | |||||
} | |||||
} | |||||
</style> |
const getters = { | |||||
} | |||||
export default getters |
import Vue from 'vue' | |||||
import Vuex from 'vuex' | |||||
import user from './modules/user' | |||||
import getters from './getters' | |||||
Vue.use(Vuex) | |||||
export default new Vuex.Store({ | |||||
modules: { | |||||
user | |||||
}, | |||||
getters | |||||
}) |
import Cookies from 'js-cookie'; | |||||
import api from '@/api/user/user' | |||||
const state = { | |||||
} | |||||
const mutations = { | |||||
} | |||||
const actions = { | |||||
} | |||||
export default { | |||||
namespaced: true, | |||||
state, | |||||
actions, | |||||
mutations | |||||
} | |||||