init
24
.babelrc
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"presets": [
|
||||
["es2015", { "modules": false }],
|
||||
[
|
||||
"env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||
}
|
||||
}],
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": [
|
||||
"transform-vue-jsx",
|
||||
"transform-runtime",
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
9
.editorconfig
Normal file
@@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
4
.eslintignore
Normal file
@@ -0,0 +1,4 @@
|
||||
/build/
|
||||
/config/
|
||||
/dist/
|
||||
/*.js
|
||||
29
.eslintrc.js
Normal file
@@ -0,0 +1,29 @@
|
||||
// https://eslint.org/docs/user-guide/configuring
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
},
|
||||
extends: [
|
||||
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
|
||||
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
|
||||
'plugin:vue/essential',
|
||||
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
|
||||
'standard'
|
||||
],
|
||||
// required to lint *.vue files
|
||||
plugins: [
|
||||
'vue'
|
||||
],
|
||||
// add your custom rules here
|
||||
rules: {
|
||||
// allow async-await
|
||||
'generator-star-spacing': 'off',
|
||||
// allow debugger during development
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||
}
|
||||
}
|
||||
14
.gitignore
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
/dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
10
.postcssrc.js
Normal file
@@ -0,0 +1,10 @@
|
||||
// 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": {}
|
||||
}
|
||||
}
|
||||
24
README.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# nl-screen-hl
|
||||
|
||||
> A Vue.js project
|
||||
|
||||
## Build Setup
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
|
||||
# build for production and view the bundle analyzer report
|
||||
npm run build --report
|
||||
```
|
||||
|
||||
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).
|
||||
|
||||
# 注意事项
|
||||
+ 无锡帝科大屏分辨率都为 1920*1080
|
||||
41
build/build.js
Normal file
@@ -0,0 +1,41 @@
|
||||
'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'
|
||||
))
|
||||
})
|
||||
})
|
||||
54
build/check-versions.js
Normal file
@@ -0,0 +1,54 @@
|
||||
'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)
|
||||
}
|
||||
}
|
||||
BIN
build/logo.png
Normal file
|
After Width: | Height: | Size: 6.7 KiB |
102
build/utils.js
Normal file
@@ -0,0 +1,102 @@
|
||||
'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,
|
||||
publicPath: '../../',
|
||||
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')
|
||||
})
|
||||
}
|
||||
}
|
||||
22
build/vue-loader.conf.js
Normal file
@@ -0,0 +1,22 @@
|
||||
'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'
|
||||
}
|
||||
}
|
||||
106
build/webpack.base.conf.js
Normal file
@@ -0,0 +1,106 @@
|
||||
'use strict'
|
||||
const path = require('path')
|
||||
const utils = require('./utils')
|
||||
const config = require('../config')
|
||||
const vueLoaderConfig = require('./vue-loader.conf')
|
||||
const webpack = require("webpack")
|
||||
|
||||
function resolve (dir) {
|
||||
return path.join(__dirname, '..', dir)
|
||||
}
|
||||
|
||||
const createLintingRule = () => ({
|
||||
test: /\.(js|vue)$/,
|
||||
loader: 'eslint-loader',
|
||||
enforce: 'pre',
|
||||
include: [resolve('src'), resolve('test')],
|
||||
options: {
|
||||
formatter: require('eslint-friendly-formatter'),
|
||||
emitWarning: !config.dev.showEslintErrorsInOverlay
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = {
|
||||
context: path.resolve(__dirname, '../'),
|
||||
entry: {
|
||||
app: './src/main.js'
|
||||
},
|
||||
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: {
|
||||
'vue$': 'vue/dist/vue.esm.js',
|
||||
'@': resolve('src'),
|
||||
'@components': resolve('src') + '/components',
|
||||
'@page': resolve('src') + '/pages',
|
||||
'@style': resolve('src') + '/style',
|
||||
'@img': resolve('src') + '/images',
|
||||
'@js': resolve('src') + '/config'
|
||||
}
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
...(config.dev.useEslint ? [createLintingRule()] : []),
|
||||
{
|
||||
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',
|
||||
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'
|
||||
},
|
||||
// add jquery peizhi
|
||||
plugins: [
|
||||
new webpack.optimize.CommonsChunkPlugin('common.js'),
|
||||
new webpack.ProvidePlugin({
|
||||
jQuery: "jquery",
|
||||
$: "jquery"
|
||||
})
|
||||
]
|
||||
}
|
||||
95
build/webpack.dev.conf.js
Normal file
@@ -0,0 +1,95 @@
|
||||
'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)
|
||||
}
|
||||
})
|
||||
})
|
||||
145
build/webpack.prod.conf.js
Normal file
@@ -0,0 +1,145 @@
|
||||
'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
|
||||
7
config/dev.env.js
Normal file
@@ -0,0 +1,7 @@
|
||||
'use strict'
|
||||
const merge = require('webpack-merge')
|
||||
const prodEnv = require('./prod.env')
|
||||
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"development"'
|
||||
})
|
||||
76
config/index.js
Normal file
@@ -0,0 +1,76 @@
|
||||
'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: {},
|
||||
|
||||
// Various Dev Server settings
|
||||
host: '0.0.0.0', // can be overwritten by process.env.HOST
|
||||
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
||||
autoOpenBrowser: true,
|
||||
errorOverlay: true,
|
||||
notifyOnErrors: true,
|
||||
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
|
||||
|
||||
// Use Eslint Loader?
|
||||
// If true, your code will be linted during bundling and
|
||||
// linting errors and warnings will be shown in the console.
|
||||
useEslint: true,
|
||||
// If true, eslint errors and warnings will also be shown in the error overlay
|
||||
// in the browser.
|
||||
showEslintErrorsInOverlay: false,
|
||||
|
||||
/**
|
||||
* 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
|
||||
}
|
||||
}
|
||||
4
config/prod.env.js
Normal file
@@ -0,0 +1,4 @@
|
||||
'use strict'
|
||||
module.exports = {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
12
index.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no, target-densitydpi=device-dpi" /> -->
|
||||
<title>无锡帝科发货大数据平台</title>
|
||||
</head>
|
||||
<body class="clearfix">
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
12049
package-lock.json
generated
Normal file
89
package.json
Normal file
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"name": "screen-lnsh-new",
|
||||
"version": "1.0.0",
|
||||
"description": "A Vue.js project",
|
||||
"author": "cll",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"start": "npm run dev",
|
||||
"lint": "eslint --ext .js,.vue src",
|
||||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"add": "^2.0.6",
|
||||
"axios": "^0.18.0",
|
||||
"babel-plugin-component": "^1.1.1",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"default-passive-events": "^2.0.0",
|
||||
"echarts": "^5.1.1",
|
||||
"element-ui": "^2.15.14",
|
||||
"stylus": "^0.54.5",
|
||||
"stylus-loader": "^3.0.2",
|
||||
"vue": "^2.5.2",
|
||||
"vue-particles": "^1.0.9",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-seamless-scroll": "^1.1.16",
|
||||
"vuex": "^3.0.1",
|
||||
"yarn": "^1.22.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-eslint": "^8.2.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.3",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-import": "^1.9.1",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-runtime": "^6.22.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.5.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",
|
||||
"eslint": "^4.15.0",
|
||||
"eslint-config-standard": "^10.2.1",
|
||||
"eslint-friendly-formatter": "^3.0.0",
|
||||
"eslint-loader": "^1.7.1",
|
||||
"eslint-plugin-import": "^2.7.0",
|
||||
"eslint-plugin-node": "^5.2.0",
|
||||
"eslint-plugin-promise": "^3.4.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
"eslint-plugin-vue": "^4.0.0",
|
||||
"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",
|
||||
"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",
|
||||
"vconsole": "^3.2.0",
|
||||
"vue-loader": "^13.3.0",
|
||||
"vue-style-loader": "^3.0.1",
|
||||
"vue-template-compiler": "^2.5.2",
|
||||
"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"
|
||||
]
|
||||
}
|
||||
20
src/App.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
data () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
#app
|
||||
width 100%
|
||||
height 100%
|
||||
</style>
|
||||
46
src/components/flowsvg.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="svg_wraper dashRight">
|
||||
<svg width="100%" height="100%">
|
||||
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop stop-color="#ffe505"/>
|
||||
</linearGradient>
|
||||
<path :class="direction" d="M 0 7 L 1862 7" stroke="rgba(0, 206, 208, .7)" style="stroke-dasharray: 20, 8;stroke-width: 4;" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
direction: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.svg_wraper
|
||||
width calc(100% - 20px)
|
||||
height 16px
|
||||
margin 0 auto
|
||||
// border-top 2px solid rgba(0, 206, 208, .7)
|
||||
// border-bottom 2px solid rgba(0, 206, 208, .7)
|
||||
background-color rgba(0, 206, 208, .3)
|
||||
// background-color: #02344d;
|
||||
// border: 2px solid #186189;
|
||||
@keyframes dashLeft {
|
||||
to {
|
||||
stroke-dashoffset: 100;
|
||||
}
|
||||
}
|
||||
@keyframes dashRight {
|
||||
to {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
.pathLeft {
|
||||
animation: dashLeft 1s linear infinite;
|
||||
}
|
||||
.pathRight {
|
||||
animation: dashRight 1s linear infinite;
|
||||
}
|
||||
</style>
|
||||
125
src/components/header.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<header>
|
||||
<div class="exit_btn iconfont" @click.stop="$router.push('/setup')"></div>
|
||||
<p>{{title}}</p>
|
||||
<div class="data_box clearfix">
|
||||
<div class="date_item date">{{date}}</div>
|
||||
<div class="date_item week">{{week}}</div>
|
||||
<div class="date_item clearfix">
|
||||
<div class="tiem_item hours">{{hours}}</div>
|
||||
<div class="colon">:</div>
|
||||
<div class="tiem_item minutes">{{minutes}}</div>
|
||||
<div class="colon">:</div>
|
||||
<div class="tiem_item seconds">{{seconds}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Header',
|
||||
data () {
|
||||
return {
|
||||
expand: false,
|
||||
timer: null,
|
||||
time: '',
|
||||
hours: '',
|
||||
minutes: '',
|
||||
seconds: '',
|
||||
date: '',
|
||||
week: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
title: String
|
||||
},
|
||||
created () {
|
||||
this.updateTime()
|
||||
this.timer = window.setInterval(this.updateTime, 1000)
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
clearInterval(this.timer)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
expandTooltip () {
|
||||
this.expand = !this.expand
|
||||
},
|
||||
updateTime () {
|
||||
let cd = new Date()
|
||||
let year = cd.getFullYear()
|
||||
let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
|
||||
let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
|
||||
let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
|
||||
let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
|
||||
let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
|
||||
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||||
let myddy = new Date().getDay()
|
||||
let week = weekday[myddy]
|
||||
this.time = `${hh}:${mm}:${ss}`
|
||||
this.hours = `${hh}`
|
||||
this.minutes = `${mm}`
|
||||
this.seconds = `${ss}`
|
||||
this.date = `${year}年${month}月${date}日`
|
||||
this.week = `${week}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.exit_btn
|
||||
position absolute
|
||||
left 25px
|
||||
top 14px
|
||||
height 37px
|
||||
width 37px
|
||||
line-height 37px
|
||||
font-size 20px
|
||||
color #fff
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
header
|
||||
position relative
|
||||
width 100%
|
||||
height 8%
|
||||
position relative
|
||||
background center center / 100% 100% url(../images/screen1/header.png) no-repeat
|
||||
p
|
||||
// font-family "PangMenZhengDao"
|
||||
font-family "YouSheBiaoTiHei"
|
||||
font-size 50px
|
||||
line-height 88px
|
||||
color #fff
|
||||
font-weight lighter
|
||||
text-align center
|
||||
letter-spacing 5px
|
||||
padding-left 5px
|
||||
text-shadow 0 8px 8px rgba(0,0,0,0.30)
|
||||
.data_box
|
||||
position absolute
|
||||
right 25px
|
||||
top 14px
|
||||
height 37px
|
||||
.date, .week
|
||||
padding-right 20px
|
||||
.date_item
|
||||
float left
|
||||
font-size 20px
|
||||
line-height 37px
|
||||
color #fff
|
||||
.tiem_item
|
||||
float left
|
||||
font-size 20px
|
||||
line-height 37px
|
||||
color #fff
|
||||
.colon
|
||||
float left
|
||||
font-size 20px
|
||||
line-height 37px
|
||||
color #fff
|
||||
</style>
|
||||
97
src/components/select.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="select">
|
||||
<div class="select-item pointer" @click="selectOption">
|
||||
<div class="select-item-txt">{{defaultLabel}}</div>
|
||||
<div class="select-item-button"> </div>
|
||||
</div>
|
||||
<ul v-show="active" class="options">
|
||||
<li class="pointer" :class="{'li-active': e.index === index}" v-for="e in option" :key="e.index" @click="change(e)">{{e.label}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SelectOpt',
|
||||
props: {
|
||||
option: Array,
|
||||
index: [Number, String]
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
active: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultLabel () {
|
||||
let val = ''
|
||||
this.option.map(e => {
|
||||
if (e.index === this.index) {
|
||||
val = e.label
|
||||
}
|
||||
})
|
||||
return val
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectOption () {
|
||||
this.active = true
|
||||
},
|
||||
change (e) {
|
||||
this.$emit('change', e.index)
|
||||
this.active = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.select
|
||||
position relative
|
||||
_wh(100%, inherit)
|
||||
background-color #fff
|
||||
user-select none
|
||||
.select-item
|
||||
width 100%
|
||||
_fj(row)
|
||||
.select-item-txt
|
||||
width calc(100% - 50px)
|
||||
_font(15px, inherit, #999,,left)
|
||||
// padding 0 10px
|
||||
.select-item-button
|
||||
position relative
|
||||
_wh(50px, inherit)
|
||||
vertical-align top
|
||||
&::before
|
||||
content ''
|
||||
width 0
|
||||
height 0
|
||||
border-left 5px solid transparent
|
||||
border-right 5px solid transparent
|
||||
border-top 5px solid #999
|
||||
position absolute
|
||||
right 13px
|
||||
top 17px
|
||||
pointer-events none
|
||||
z-index 3
|
||||
.options
|
||||
position absolute
|
||||
z-index 100000
|
||||
top 44px
|
||||
width 100%
|
||||
padding 10px 0
|
||||
background-color #fff
|
||||
border 1px solid #eee
|
||||
border-radius 5px
|
||||
li
|
||||
width 100%
|
||||
_font(15px, 38px, #999,,left)
|
||||
padding 0 10px
|
||||
user-select none
|
||||
box-sizing border-box
|
||||
&:hover
|
||||
background-color #f5f7fa
|
||||
.li-active
|
||||
color #409eff
|
||||
</style>
|
||||
74
src/components/time.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="data_box">
|
||||
<div class="time">{{time}}</div>
|
||||
<div class="date_item">
|
||||
<div class="year">{{year}}</div>
|
||||
<div class="year">{{ date }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Time',
|
||||
data () {
|
||||
return {
|
||||
timer: null,
|
||||
time: '',
|
||||
year: '',
|
||||
date: '',
|
||||
week: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.timer = window.setInterval(this.updateTime, 1000)
|
||||
},
|
||||
methods: {
|
||||
updateTime () {
|
||||
let cd = new Date()
|
||||
let year = cd.getFullYear()
|
||||
let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
|
||||
let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
|
||||
let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
|
||||
let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
|
||||
let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
|
||||
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||||
let myddy = new Date().getDay()
|
||||
let week = weekday[myddy]
|
||||
this.time = `${hh}:${mm}:${ss}`
|
||||
this.year = `${year}`
|
||||
this.date = `${month}.${date}`
|
||||
this.week = `${week}`
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
clearInterval(this.timer)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.data_box
|
||||
position absolute
|
||||
right 15px
|
||||
top 30px
|
||||
width 300px
|
||||
height 39px
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
.time
|
||||
font-size: 39px;
|
||||
line-height: 29px;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
color: #AECAF5;
|
||||
.date_item
|
||||
margin-left 10px
|
||||
.year
|
||||
font-size: 16px;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
color: #AECAF5;
|
||||
line-height: 16px;
|
||||
opacity: 0.7;
|
||||
</style>
|
||||
14
src/config/filter.js
Normal file
@@ -0,0 +1,14 @@
|
||||
// import store from '../vuex/store'
|
||||
|
||||
const filter = {
|
||||
numeric (value) {
|
||||
if (value === '') return ''
|
||||
return Number(value).toFixed(3)
|
||||
},
|
||||
numFixed (value, bit) {
|
||||
if (value === '') return ''
|
||||
return Number(value).toFixed(bit)
|
||||
}
|
||||
}
|
||||
|
||||
export default filter
|
||||
3
src/config/getData2.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import {post} from './http.js'
|
||||
// 获取大屏所有数据
|
||||
export const getAllBigScreen = () => post('api/bigScreen/getAllBigScreen', {})
|
||||
80
src/config/http.js
Normal file
@@ -0,0 +1,80 @@
|
||||
import axios from 'axios'
|
||||
import { Dialog } from './mUtils.js'
|
||||
import store from '../vuex/store.js'
|
||||
import router from '@/router'
|
||||
|
||||
axios.defaults.timeout = 50000
|
||||
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
|
||||
|
||||
axios.interceptors.request.use(
|
||||
config => {
|
||||
// let token = ''
|
||||
// if (store.getters.userInfo !== '') {
|
||||
// token = JSON.parse(store.getters.userInfo).token
|
||||
// }
|
||||
// token && (config.headers.Authorization = token)
|
||||
if (config.method === 'post') {
|
||||
if (!config.data.flag) {
|
||||
config.data = config.data
|
||||
} else {
|
||||
config.data = config.data.formData
|
||||
}
|
||||
}
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
Dialog('错误的传参')
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
axios.interceptors.response.use(
|
||||
response => {
|
||||
return Promise.resolve(response)
|
||||
},
|
||||
error => {
|
||||
if (error && error.response) {
|
||||
switch (error.response.status) {
|
||||
case 400:
|
||||
break
|
||||
case 401:
|
||||
// store.dispatch('setSignOut')
|
||||
router.push('/setup')
|
||||
break
|
||||
}
|
||||
return Promise.reject(error.response.data)
|
||||
} else {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
export const post = (sevmethod, params) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.post(`${store.getters.baseUrl}/` + sevmethod, params)
|
||||
.then(response => {
|
||||
resolve(response.data)
|
||||
}, error => {
|
||||
// Dialog(error.message)
|
||||
reject(error.message)
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export const post1 = (sevmethod, params) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.post(`${store.getters.lcUrl}/` + sevmethod, params)
|
||||
.then(response => {
|
||||
resolve(response.data)
|
||||
}, error => {
|
||||
// Dialog(error.message)
|
||||
reject(error.message)
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
134
src/config/mUtils.js
Normal file
@@ -0,0 +1,134 @@
|
||||
import store from '../vuex/store'
|
||||
|
||||
/**
|
||||
* 弹出框
|
||||
*/
|
||||
export const Dialog = (str) => {
|
||||
store.dispatch('showAlert', true)
|
||||
store.dispatch('alertMsg', str)
|
||||
// setTimeout(() => {
|
||||
// store.dispatch('showAlert', false)
|
||||
// }, 30000)
|
||||
}
|
||||
|
||||
/**
|
||||
* 提示框
|
||||
*/
|
||||
export const toast = (str) => {
|
||||
store.dispatch('showToast', true)
|
||||
store.dispatch('toastMsg', str)
|
||||
setTimeout(() => {
|
||||
store.dispatch('showToast', false)
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
/**
|
||||
* 存储localStorage
|
||||
*/
|
||||
export const setStore = (name, content) => {
|
||||
if (!name) return
|
||||
if (typeof content !== 'string') {
|
||||
content = JSON.stringify(content)
|
||||
}
|
||||
window.localStorage.setItem(name, content)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取localStorage
|
||||
*/
|
||||
export const getStore = name => {
|
||||
if (!name) return
|
||||
return window.localStorage.getItem(name)
|
||||
}
|
||||
|
||||
/**
|
||||
* 小数加法
|
||||
*/
|
||||
export const accAdd = (arg1, arg2) => {
|
||||
var r1, r2, m, c
|
||||
try {
|
||||
r1 = arg1.toString().split('.')[1].length
|
||||
} catch (e) {
|
||||
r1 = 0
|
||||
}
|
||||
try {
|
||||
r2 = arg2.toString().split('.')[1].length
|
||||
} catch (e) {
|
||||
r2 = 0
|
||||
}
|
||||
c = Math.abs(r1 - r2)
|
||||
m = Math.pow(10, Math.max(r1, r2))
|
||||
if (c > 0) {
|
||||
var cm = Math.pow(10, c)
|
||||
if (r1 > r2) {
|
||||
arg1 = Number(arg1.toString().replace('.', ''))
|
||||
arg2 = Number(arg2.toString().replace('.', '')) * cm
|
||||
} else {
|
||||
arg1 = Number(arg1.toString().replace('.', '')) * cm
|
||||
arg2 = Number(arg2.toString().replace('.', ''))
|
||||
}
|
||||
} else {
|
||||
arg1 = Number(arg1.toString().replace('.', ''))
|
||||
arg2 = Number(arg2.toString().replace('.', ''))
|
||||
}
|
||||
return (arg1 + arg2) / m
|
||||
}
|
||||
|
||||
/**
|
||||
* 小数减法
|
||||
*/
|
||||
export const accSubtract = (arg1, arg2) => {
|
||||
var r1, r2, m, c
|
||||
try {
|
||||
r1 = arg1.toString().split('.')[1].length
|
||||
} catch (e) {
|
||||
r1 = 0
|
||||
}
|
||||
try {
|
||||
r2 = arg2.toString().split('.')[1].length
|
||||
} catch (e) {
|
||||
r2 = 0
|
||||
}
|
||||
c = Math.abs(r1 - r2)
|
||||
m = Math.pow(10, Math.max(r1, r2))
|
||||
if (c > 0) {
|
||||
var cm = Math.pow(10, c)
|
||||
if (r1 > r2) {
|
||||
arg1 = Number(arg1.toString().replace('.', ''))
|
||||
arg2 = Number(arg2.toString().replace('.', '')) * cm
|
||||
} else {
|
||||
arg1 = Number(arg1.toString().replace('.', '')) * cm
|
||||
arg2 = Number(arg2.toString().replace('.', ''))
|
||||
}
|
||||
} else {
|
||||
arg1 = Number(arg1.toString().replace('.', ''))
|
||||
arg2 = Number(arg2.toString().replace('.', ''))
|
||||
}
|
||||
return (arg1 - arg2) / m
|
||||
}
|
||||
|
||||
/**
|
||||
* 小数乘法
|
||||
*/
|
||||
export const accMul = (arg1, arg2) => {
|
||||
var m = 0
|
||||
var s1 = arg1.toString()
|
||||
var s2 = arg2.toString()
|
||||
try { m += s1.split('.')[1].length } catch (e) {}
|
||||
try { m += s2.split('.')[1].length } catch (e) {}
|
||||
return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
|
||||
}
|
||||
|
||||
/**
|
||||
* 求数组最大值
|
||||
*/
|
||||
export const maxArr = (arr) => {
|
||||
let max = Number(arr[0])
|
||||
let len = arr.length
|
||||
for (let i = 1; i < len; i++) {
|
||||
if (Number(arr[i]) > max) {
|
||||
max = Number(arr[i])
|
||||
}
|
||||
}
|
||||
return max
|
||||
}
|
||||
451
src/config/mork2.js
Normal file
@@ -0,0 +1,451 @@
|
||||
/* eslint-disable */
|
||||
export const getAllBigScreen = () => {
|
||||
let res = {
|
||||
inventoryAnalysis: [
|
||||
{
|
||||
"total_material_qty": 50.0,
|
||||
"percentage": "33.33%",
|
||||
"material_id": "1759155580745945088",
|
||||
"material_name": "测试物料1",
|
||||
"material_code": "A1002"
|
||||
},
|
||||
{
|
||||
"total_material_qty": 100.0,
|
||||
"percentage": "66.67%",
|
||||
"material_id": "1759154624864063488",
|
||||
"material_name": "测试物料2",
|
||||
"material_code": "A1001"
|
||||
},
|
||||
{
|
||||
"total_material_qty": 100.0,
|
||||
"percentage": "66.67%",
|
||||
"material_id": "1759154624864063488",
|
||||
"material_name": "测试物料3",
|
||||
"material_code": "A1001"
|
||||
},
|
||||
{
|
||||
"total_material_qty": 100.0,
|
||||
"percentage": "66.67%",
|
||||
"material_id": "1759154624864063488",
|
||||
"material_name": "测试物料4",
|
||||
"material_code": "A1001"
|
||||
},
|
||||
{
|
||||
"total_material_qty": 100.0,
|
||||
"percentage": "66.67%",
|
||||
"material_id": "1759154624864063488",
|
||||
"material_name": "测试物料5",
|
||||
"material_code": "A1001"
|
||||
},
|
||||
{
|
||||
"total_material_qty": 100.0,
|
||||
"percentage": "66.67%",
|
||||
"material_id": "1759154624864063488",
|
||||
"material_name": "测试物料6",
|
||||
"material_code": "A1001"
|
||||
},
|
||||
{
|
||||
"total_material_qty": 100.0,
|
||||
"percentage": "66.67%",
|
||||
"material_id": "1759154624864063488",
|
||||
"material_name": "测试物料7",
|
||||
"material_code": "A1001"
|
||||
},
|
||||
{
|
||||
"total_material_qty": 100.0,
|
||||
"percentage": "66.67%",
|
||||
"material_id": "1759154624864063488",
|
||||
"material_name": "测试物料8",
|
||||
"material_code": "A1001"
|
||||
},
|
||||
{
|
||||
"total_material_qty": 100.0,
|
||||
"percentage": "66.67%",
|
||||
"material_id": "1759154624864063488",
|
||||
"material_name": "测试物料9",
|
||||
"material_code": "A1001"
|
||||
},
|
||||
{
|
||||
"total_material_qty": 100.0,
|
||||
"percentage": "66.67%",
|
||||
"material_id": "1759154624864063488",
|
||||
"material_name": "测试物料10",
|
||||
"material_code": "A1001"
|
||||
}
|
||||
],
|
||||
agvInfo: [
|
||||
{
|
||||
"battery_level": "0.0%",
|
||||
"task_code": "0",
|
||||
"todayTaskNum": 0,
|
||||
"message": "运行正常",
|
||||
"monthTaskNum": 1,
|
||||
"device_name": "AMB-03",
|
||||
"today_odo": 0.0,
|
||||
"device_code": "AMB-03",
|
||||
"x": 0.0,
|
||||
"angle": 0.0,
|
||||
"y": 0.0,
|
||||
"time": 0.0,
|
||||
"odo": 0,
|
||||
"total_time": 0.0,
|
||||
"status": "未知状态"
|
||||
},
|
||||
{
|
||||
"battery_level": "0.0%",
|
||||
"task_code": "0",
|
||||
"todayTaskNum": 2,
|
||||
"message": "运行正常",
|
||||
"monthTaskNum": 4,
|
||||
"device_name": "AMB-02",
|
||||
"today_odo": 0.0,
|
||||
"device_code": "AMB-02",
|
||||
"x": 0.0,
|
||||
"angle": 0.0,
|
||||
"y": 0.0,
|
||||
"time": 0.0,
|
||||
"odo": 0,
|
||||
"total_time": 0.0,
|
||||
"status": "未知状态"
|
||||
},
|
||||
{
|
||||
"battery_level": "0.0%",
|
||||
"task_code": "0",
|
||||
"todayTaskNum": 5,
|
||||
"message": "运行正常",
|
||||
"monthTaskNum": 7,
|
||||
"device_name": "AMB-01",
|
||||
"today_odo": 0.0,
|
||||
"device_code": "AMB-01",
|
||||
"x": 0.0,
|
||||
"angle": 0.0,
|
||||
"y": 0.0,
|
||||
"time": 0.0,
|
||||
"odo": 0,
|
||||
"total_time": 0.0,
|
||||
"status": "未知状态"
|
||||
}
|
||||
],
|
||||
rgvInfo: [
|
||||
{
|
||||
"current_loc": "0",
|
||||
"battery_level": "0.0%",
|
||||
"heartbeat": 0,
|
||||
"task_code": 0,
|
||||
"vehicleCode": null,
|
||||
"allTaskNum": 0,
|
||||
"error": 0,
|
||||
"todayTaskNum": 0,
|
||||
"message": "运行异常",
|
||||
"mode": "未知",
|
||||
"device_name": "RGV01",
|
||||
"target_loc": "0",
|
||||
"device_code": "RGV01",
|
||||
"x": null,
|
||||
"y": null,
|
||||
"action": 0,
|
||||
"status": "休息中"
|
||||
},
|
||||
{
|
||||
"current_loc": "0",
|
||||
"battery_level": "0.0%",
|
||||
"heartbeat": 0,
|
||||
"task_code": 0,
|
||||
"vehicleCode": null,
|
||||
"allTaskNum": 0,
|
||||
"error": 0,
|
||||
"todayTaskNum": 0,
|
||||
"message": "运行异常",
|
||||
"mode": "未知",
|
||||
"device_name": "RGV02",
|
||||
"target_loc": "0",
|
||||
"device_code": "RGV02",
|
||||
"x": null,
|
||||
"y": null,
|
||||
"action": 0,
|
||||
"status": "休息中"
|
||||
},
|
||||
{
|
||||
"current_loc": "0",
|
||||
"battery_level": "0.0%",
|
||||
"heartbeat": 0,
|
||||
"task_code": 0,
|
||||
"vehicleCode": null,
|
||||
"allTaskNum": 0,
|
||||
"error": 0,
|
||||
"todayTaskNum": 0,
|
||||
"message": "运行异常",
|
||||
"mode": "未知",
|
||||
"device_name": "RGV04",
|
||||
"target_loc": "0",
|
||||
"device_code": "RGV04",
|
||||
"x": null,
|
||||
"y": null,
|
||||
"action": 0,
|
||||
"status": "休息中"
|
||||
},
|
||||
{
|
||||
"current_loc": "0",
|
||||
"battery_level": "0.0%",
|
||||
"heartbeat": 0,
|
||||
"task_code": 0,
|
||||
"vehicleCode": null,
|
||||
"allTaskNum": 0,
|
||||
"error": 0,
|
||||
"todayTaskNum": 0,
|
||||
"message": "运行异常",
|
||||
"mode": "未知",
|
||||
"device_name": "RGV03",
|
||||
"target_loc": "0",
|
||||
"device_code": "RGV03",
|
||||
"x": null,
|
||||
"y": null,
|
||||
"action": 0,
|
||||
"status": "休息中"
|
||||
}
|
||||
],
|
||||
todayProduceStatistic: [
|
||||
{
|
||||
"count": 0,
|
||||
"region_name": "备成型壳制备区",
|
||||
"region_code": "BCXKZB"
|
||||
},
|
||||
{
|
||||
"count": 0,
|
||||
"region_name": "型壳焙烧区",
|
||||
"region_code": "XKBS"
|
||||
},
|
||||
{
|
||||
"count": 0,
|
||||
"region_name": "蒸汽脱蜡区",
|
||||
"region_code": "ZQTL"
|
||||
}
|
||||
],
|
||||
inventoryIOAnalysis: [
|
||||
{
|
||||
"total_outstorage_qty": 0.0,
|
||||
"total_instorage_qty": 100.0,
|
||||
"material_id": "1759154624864063488",
|
||||
"material_name": "测试物料",
|
||||
"material_code": "A1001"
|
||||
},
|
||||
{
|
||||
"total_outstorage_qty": 28.0,
|
||||
"total_instorage_qty": 78.0,
|
||||
"material_id": "1759155580745945088",
|
||||
"material_name": "测试物料2",
|
||||
"material_code": "A1002"
|
||||
}
|
||||
],
|
||||
historyInventoryIOAnalysis: [
|
||||
{
|
||||
"total_outstorage_qty": 0.0,
|
||||
"data": "08-01",
|
||||
"total_instorage_qty": 0.0
|
||||
},
|
||||
{
|
||||
"total_outstorage_qty": 1.0,
|
||||
"data": "08-02",
|
||||
"total_instorage_qty": 0.0
|
||||
},
|
||||
{
|
||||
"total_outstorage_qty": 0.0,
|
||||
"data": "08-03",
|
||||
"total_instorage_qty": 0.0
|
||||
},
|
||||
{
|
||||
"total_outstorage_qty": 0.0,
|
||||
"data": "08-04",
|
||||
"total_instorage_qty": 0.0
|
||||
},
|
||||
{
|
||||
"total_outstorage_qty": 0.0,
|
||||
"data": "08-05",
|
||||
"total_instorage_qty": 0.0
|
||||
},
|
||||
{
|
||||
"total_outstorage_qty": 6.0,
|
||||
"data": "08-06",
|
||||
"total_instorage_qty": 6.0
|
||||
},
|
||||
{
|
||||
"total_outstorage_qty": 28.0,
|
||||
"data": "08-07",
|
||||
"total_instorage_qty": 178.0
|
||||
}
|
||||
],
|
||||
todayTask: [
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:19:10",
|
||||
"carno": "",
|
||||
"task_code": "1821053300573868033",
|
||||
"next_point_code": "01-01-01",
|
||||
"start_point_code": "CKDJ1"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:13:46",
|
||||
"carno": "",
|
||||
"task_code": "1821051936523292673",
|
||||
"next_point_code": "RKDJ2",
|
||||
"start_point_code": "01-01-02"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:16:10",
|
||||
"carno": "",
|
||||
"task_code": "1821052566008631297",
|
||||
"next_point_code": "01-01-02",
|
||||
"start_point_code": "RKDJ2"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:19:00",
|
||||
"carno": "",
|
||||
"task_code": "1821053354068021249",
|
||||
"next_point_code": "01-01-02",
|
||||
"start_point_code": "CKDJ2"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:16:20",
|
||||
"carno": "",
|
||||
"task_code": "1821052576351784961",
|
||||
"next_point_code": "01-01-03",
|
||||
"start_point_code": "RKDJ1"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:10:35",
|
||||
"carno": "AMB-02",
|
||||
"task_code": "1821050896554004481",
|
||||
"next_point_code": "01-02-02",
|
||||
"start_point_code": "RKDJ5"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:17:52",
|
||||
"carno": "",
|
||||
"task_code": "1821053001335443457",
|
||||
"next_point_code": "CKDJ2",
|
||||
"start_point_code": "01-01-02"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:10:15",
|
||||
"carno": "AMB-01",
|
||||
"task_code": "1821050807915778049",
|
||||
"next_point_code": "01-01-03",
|
||||
"start_point_code": "RKDJ3"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:13:56",
|
||||
"carno": "",
|
||||
"task_code": "1821051969201115137",
|
||||
"next_point_code": "RKDJ3",
|
||||
"start_point_code": "01-01-03"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:10:05",
|
||||
"carno": "AMB-01",
|
||||
"task_code": "1821050760486588417",
|
||||
"next_point_code": "01-01-02",
|
||||
"start_point_code": "RKDJ2"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:10:25",
|
||||
"carno": "AMB-02",
|
||||
"task_code": "1821050853545611265",
|
||||
"next_point_code": "01-02-01",
|
||||
"start_point_code": "RKDJ4"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:13:36",
|
||||
"carno": "",
|
||||
"task_code": "1821051901286944769",
|
||||
"next_point_code": "RKDJ1",
|
||||
"start_point_code": "01-01-01"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:17:42",
|
||||
"carno": "",
|
||||
"task_code": "1821052983480291329",
|
||||
"next_point_code": "CKDJ1",
|
||||
"start_point_code": "01-01-01"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:16:00",
|
||||
"carno": "",
|
||||
"task_code": "1821052554327494657",
|
||||
"next_point_code": "01-01-01",
|
||||
"start_point_code": "RKDJ3"
|
||||
},
|
||||
{
|
||||
"task_status": "完成",
|
||||
"create_time": "2024-08-07 13:09:55",
|
||||
"carno": "AMB-01",
|
||||
"task_code": "1821050707009212417",
|
||||
"next_point_code": "01-01-01",
|
||||
"start_point_code": "RKDJ1"
|
||||
}
|
||||
],
|
||||
todayLoadingAndUnloadingStatistics: [
|
||||
{
|
||||
"material_loading_count": 0,
|
||||
"material_unloading_count": 0,
|
||||
"region_name": "2F面层制壳间",
|
||||
"region_code": "2FMCZKJ"
|
||||
},
|
||||
{
|
||||
"material_loading_count": 0,
|
||||
"material_unloading_count": 0,
|
||||
"region_name": "3F蜡模组树区",
|
||||
"region_code": "3FLMZS"
|
||||
},
|
||||
{
|
||||
"material_loading_count": 0,
|
||||
"material_unloading_count": 0,
|
||||
"region_name": "备成型壳制备区",
|
||||
"region_code": "BCXKZB"
|
||||
},
|
||||
{
|
||||
"material_loading_count": 0,
|
||||
"material_unloading_count": 0,
|
||||
"region_name": "蜡模制备区",
|
||||
"region_code": "LMZB"
|
||||
},
|
||||
{
|
||||
"material_loading_count": 0,
|
||||
"material_unloading_count": 0,
|
||||
"region_name": "蜡模组盘区",
|
||||
"region_code": "LMZP"
|
||||
},
|
||||
{
|
||||
"material_loading_count": 0,
|
||||
"material_unloading_count": 0,
|
||||
"region_name": "型壳焙烧区",
|
||||
"region_code": "XKBS"
|
||||
},
|
||||
{
|
||||
"material_loading_count": 0,
|
||||
"material_unloading_count": 0,
|
||||
"region_name": "自动制壳区",
|
||||
"region_code": "ZDZK"
|
||||
},
|
||||
{
|
||||
"material_loading_count": 0,
|
||||
"material_unloading_count": 0,
|
||||
"region_name": "蒸汽脱蜡区",
|
||||
"region_code": "ZQTL"
|
||||
}
|
||||
]
|
||||
}
|
||||
return res
|
||||
}
|
||||
13
src/config/rem.js
Normal file
@@ -0,0 +1,13 @@
|
||||
(function (doc, win) {
|
||||
var docEl = doc.documentElement
|
||||
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
|
||||
var recalc = function () {
|
||||
var clientWidth = docEl.clientWidth
|
||||
if (!clientWidth) return
|
||||
docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'
|
||||
document.body.style.display = 'block'
|
||||
}
|
||||
if (!doc.addEventListener) return win.addEventListener(resizeEvt, recalc, false)
|
||||
doc.addEventListener('DOMContentLoaded', recalc, false)
|
||||
})(document, window)
|
||||
// 晟华大屏尺寸2560*1440,屏幕太大用rem样式会错乱,现在使用px、%
|
||||
BIN
src/images/agv.png
Normal file
|
After Width: | Height: | Size: 31 KiB |
BIN
src/images/agv_s.png
Normal file
|
After Width: | Height: | Size: 5.6 KiB |
BIN
src/images/bg-button.png
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
src/images/bg-center.png
Normal file
|
After Width: | Height: | Size: 896 KiB |
BIN
src/images/bg-left.png
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
src/images/bg-m_2.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
src/images/bg-right.png
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
src/images/bg-title_1.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
src/images/bg-title_1_s.png
Normal file
|
After Width: | Height: | Size: 9.4 KiB |
BIN
src/images/bg-title_2.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
src/images/bg-title_2_s.png
Normal file
|
After Width: | Height: | Size: 5.4 KiB |
BIN
src/images/bg.jpg
Normal file
|
After Width: | Height: | Size: 59 KiB |
BIN
src/images/bg1.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/images/bg2.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/images/bg3.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/images/bg4.png
Normal file
|
After Width: | Height: | Size: 166 B |
BIN
src/images/fk_1.png
Normal file
|
After Width: | Height: | Size: 541 B |
BIN
src/images/fk_2.png
Normal file
|
After Width: | Height: | Size: 552 B |
BIN
src/images/fk_3.png
Normal file
|
After Width: | Height: | Size: 609 B |
BIN
src/images/fk_4.png
Normal file
|
After Width: | Height: | Size: 568 B |
BIN
src/images/fk_5.png
Normal file
|
After Width: | Height: | Size: 549 B |
BIN
src/images/fk_6.png
Executable file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/images/fk_7.png
Executable file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/images/header_bg.png
Normal file
|
After Width: | Height: | Size: 119 KiB |
BIN
src/images/header_bg_s.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
src/images/line_selected.png
Normal file
|
After Width: | Height: | Size: 1005 B |
BIN
src/images/pie-bg_2.png
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
src/images/pie-bg_2_s.png
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
src/images/rgv.png
Normal file
|
After Width: | Height: | Size: 72 KiB |
BIN
src/images/rgv_s.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/images/screen1/item_1.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/images/screen1/item_3.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
src/images/screen1/item_4.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/images/screen1/item_5.png
Normal file
|
After Width: | Height: | Size: 3.9 KiB |
BIN
src/images/screen1/item_6.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/images/screen1/item_7.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/images/screen1/line_1.png
Normal file
|
After Width: | Height: | Size: 492 B |
BIN
src/images/screen1/top_1.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/images/screen1/top_2.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/images/screen1/top_3.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/images/state_0.png
Normal file
|
After Width: | Height: | Size: 489 B |
BIN
src/images/state_1.png
Normal file
|
After Width: | Height: | Size: 459 B |
BIN
src/images/state_2.png
Normal file
|
After Width: | Height: | Size: 482 B |
BIN
src/images/state_3.png
Normal file
|
After Width: | Height: | Size: 461 B |
BIN
src/images/symbol_1.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
src/images/symbol_2.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
src/images/symbol_3.png
Normal file
|
After Width: | Height: | Size: 110 B |
BIN
src/images/symbol_4.png
Normal file
|
After Width: | Height: | Size: 110 B |
BIN
src/images/table-bg_1.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
24
src/main.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import 'babel-polyfill'
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
import store from './vuex/store'
|
||||
import './style/reset.css'
|
||||
import './style/iconfont.styl'
|
||||
import * as echarts from 'echarts'
|
||||
import 'default-passive-events'
|
||||
import scroll from 'vue-seamless-scroll'
|
||||
import {Message} from 'element-ui'
|
||||
|
||||
Vue.prototype.$echarts = echarts
|
||||
Vue.use(scroll)
|
||||
Vue.prototype.$message = Message
|
||||
Vue.config.productionTip = false
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
components: { App },
|
||||
template: '<App/>'
|
||||
})
|
||||
191
src/pages_1920/Setup.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="body-container">
|
||||
<h1>车间物流监控</h1>
|
||||
<div class="login_wrap">
|
||||
<div class="login_cnt">
|
||||
<div class="title-name">系统配置</div>
|
||||
<div class="login_card">
|
||||
<div class="card_wrap">
|
||||
<div class="inputOuter">
|
||||
<label>域名地址</label>
|
||||
<input type="text" class="inputStyle" v-model="baseUrl">
|
||||
</div>
|
||||
<div class="inputOuter">
|
||||
<label>刷新时间(秒)</label>
|
||||
<input type="number" class="inputStyle" v-model="setTime">
|
||||
</div>
|
||||
<!-- <div class="inputOuter">
|
||||
<label>设备看板</label>
|
||||
<div class="select-wraper">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<button class="btn" @click="_config">配置</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loginname: '',
|
||||
password: '',
|
||||
options: [{value: '1', label: '大屏'}],
|
||||
value: this.$store.getters.equipId,
|
||||
baseUrl: this.$store.getters.baseUrl,
|
||||
setTime: this.$store.getters.setTime / 1000,
|
||||
fullscreen: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_config () {
|
||||
if (this.setTime > 10800) {
|
||||
this.$message({
|
||||
message: '刷新时间设置过长',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
let obj = {
|
||||
baseUrl: this.baseUrl,
|
||||
setTime: this.setTime * 1000,
|
||||
equipId: this.value
|
||||
}
|
||||
this.$store.dispatch('setConfig', obj)
|
||||
this.$router.push('/home')
|
||||
let element = document.documentElement
|
||||
if (this.fullscreen) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
} else {
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen()
|
||||
} else if (element.webkitRequestFullScreen) {
|
||||
element.webkitRequestFullScreen()
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen()
|
||||
} else if (element.msRequestFullscreen) {
|
||||
// IE11
|
||||
element.msRequestFullscreen()
|
||||
}
|
||||
}
|
||||
this.fullscreen = !this.fullscreen
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.body-container
|
||||
_wh(100%, 100%)
|
||||
_fj(row, center)
|
||||
flex-direction column
|
||||
h1
|
||||
font-size: 60px;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
font-weight: 400;
|
||||
color: transparent;
|
||||
line-height: 44px;
|
||||
opacity: 0.89;
|
||||
letter-spacing 10px
|
||||
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
|
||||
filter: drop-shadow(#092F6D 1px 4px 1px);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
text-align center
|
||||
margin-bottom 30px
|
||||
.login_wrap
|
||||
width 500px
|
||||
background-color rgba(255, 255, 255, 0.8)
|
||||
border-radius 5px
|
||||
.login_tab
|
||||
position relative
|
||||
height 50px
|
||||
font-size 0
|
||||
background-color rgba(255, 255, 255, 0.9)
|
||||
border-radius 5px 5px 0 0
|
||||
.login_tab_item
|
||||
float left
|
||||
width 50%
|
||||
font-size 16px
|
||||
line-height 50px
|
||||
color #333333
|
||||
text-align center
|
||||
cursor pointer
|
||||
.login_tab_line
|
||||
position absolute
|
||||
width 50%
|
||||
height 2px
|
||||
background-color #2778f3
|
||||
left 0
|
||||
bottom 0
|
||||
.login_cnt
|
||||
width 100%
|
||||
padding 15px
|
||||
.title-name
|
||||
_font(16px, 28px, #000,,center)
|
||||
margin-bottom 10px
|
||||
.login_card
|
||||
width 100%
|
||||
.inputOuter
|
||||
_fj(row)
|
||||
height 40px
|
||||
line-height 40px
|
||||
width 100%
|
||||
margin-bottom 12px
|
||||
.inputStyle
|
||||
_wh(calc(100% - 116px), 40px)
|
||||
font-size 14px
|
||||
background none
|
||||
line-height 40px
|
||||
color #606266
|
||||
padding 0 15px
|
||||
border none
|
||||
box-sizing border-box
|
||||
background-color #ffffff
|
||||
.select-wraper
|
||||
_wh(calc(100% - 116px), 40px)
|
||||
.submit
|
||||
width 100%
|
||||
background-color #2778f3
|
||||
border-radius 3px
|
||||
margin-top 5px
|
||||
.btn
|
||||
background-color #2778f3
|
||||
border-radius 3px
|
||||
margin-top 5px
|
||||
height 40px
|
||||
font-size 18px
|
||||
color #fff
|
||||
line-height 39px
|
||||
width 100%
|
||||
outline none
|
||||
border none
|
||||
font-weight normal
|
||||
label
|
||||
width 115px
|
||||
font-size 15px
|
||||
line-height 40px
|
||||
color #333333
|
||||
.el-select
|
||||
width 100%
|
||||
</style>
|
||||
1481
src/pages_1920/modules/home/index.vue
Normal file
132
src/pages_960/Setup.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="body-container">
|
||||
<h1>车间物流监控</h1>
|
||||
<div class="login_wrap">
|
||||
<div class="login_cnt">
|
||||
<div class="title-name">系统配置</div>
|
||||
<div class="login_card">
|
||||
<div class="card_wrap">
|
||||
<div class="inputOuter">
|
||||
<label>域名地址</label>
|
||||
<input type="text" class="inputStyle" v-model="baseUrl">
|
||||
</div>
|
||||
<div class="inputOuter">
|
||||
<label>刷新时间(秒)</label>
|
||||
<input type="number" class="inputStyle" v-model="setTime">
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn" @click="_config">配置</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loginname: '',
|
||||
password: '',
|
||||
baseUrl: this.$store.getters.baseUrl,
|
||||
setTime: this.$store.getters.setTime / 1000
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_config () {
|
||||
if (this.setTime > 10800) {
|
||||
this.$message({
|
||||
message: '刷新时间设置过长',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
let obj = {
|
||||
baseUrl: this.baseUrl,
|
||||
setTime: this.setTime * 1000
|
||||
}
|
||||
this.$store.dispatch('setConfig', obj)
|
||||
this.$router.push('/home')
|
||||
let element = document.documentElement
|
||||
if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen()
|
||||
} else if (element.webkitRequestFullScreen) {
|
||||
element.webkitRequestFullScreen()
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen()
|
||||
} else if (element.msRequestFullscreen) {
|
||||
// IE11
|
||||
element.msRequestFullscreen()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.body-container
|
||||
_wh(100%, 100%)
|
||||
_fj(row, center)
|
||||
flex-direction column
|
||||
h1
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
line-height: 44px;
|
||||
letter-spacing 4px
|
||||
text-align center
|
||||
margin-bottom 30px
|
||||
.login_wrap
|
||||
width 500px
|
||||
background-color rgba(255, 255, 255, 0.8)
|
||||
border-radius 5px
|
||||
.login_cnt
|
||||
width 100%
|
||||
padding 15px
|
||||
.title-name
|
||||
_font(16px, 28px, #000,,center)
|
||||
margin-bottom 10px
|
||||
.login_card
|
||||
width 100%
|
||||
.inputOuter
|
||||
_fj(row)
|
||||
height 40px
|
||||
line-height 40px
|
||||
width 100%
|
||||
margin-bottom 12px
|
||||
.inputStyle
|
||||
_wh(calc(100% - 116px), 40px)
|
||||
font-size 14px
|
||||
background none
|
||||
line-height 40px
|
||||
color #606266
|
||||
padding 0 15px
|
||||
border none
|
||||
box-sizing border-box
|
||||
background-color #ffffff
|
||||
.submit
|
||||
width 100%
|
||||
background-color #2778f3
|
||||
border-radius 3px
|
||||
margin-top 5px
|
||||
.btn
|
||||
background-color #2778f3
|
||||
border-radius 3px
|
||||
margin-top 5px
|
||||
height 40px
|
||||
font-size 18px
|
||||
color #fff
|
||||
line-height 39px
|
||||
width 100%
|
||||
outline none
|
||||
border none
|
||||
font-weight normal
|
||||
label
|
||||
width 115px
|
||||
font-size 15px
|
||||
line-height 40px
|
||||
color #333333
|
||||
</style>
|
||||
954
src/pages_960/modules/home/index.vue
Normal file
@@ -0,0 +1,954 @@
|
||||
<template>
|
||||
<div class="n_container">
|
||||
<div class="n_header">
|
||||
<div class="n_header_h1">
|
||||
<h1>车间物流监控</h1>
|
||||
</div>
|
||||
<div class="exit_btn iconfont" @click="back"></div>
|
||||
</div>
|
||||
<div class="n_body_container">
|
||||
<div class="n_left_wraper">
|
||||
<div class="w_wraper">
|
||||
<div class="item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>原料库存</p>
|
||||
</div>
|
||||
<div class="content_wraper content_wraper_2">
|
||||
<div class="pie_wraper">
|
||||
<div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>当日出入</p>
|
||||
</div>
|
||||
<div class="content_wraper">
|
||||
<div class="w_wraper">
|
||||
<div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>历史分析</p>
|
||||
</div>
|
||||
<div class="content_wraper">
|
||||
<div class="w_wraper">
|
||||
<div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-center_wraper">
|
||||
<div class="w_wraper">
|
||||
<div class="item_wraper item_wraper_1">
|
||||
<div class="title_wraper title_wraper_1">
|
||||
<p>设备监控</p>
|
||||
</div>
|
||||
<div class="content_wraper">
|
||||
<div class="agv_wrap">
|
||||
<div class="agv_item" v-for="(e , i) in agvList" :key="'agv' + i">
|
||||
<div class="agv_left">
|
||||
<div class="agv_img"></div>
|
||||
<p class="p1">{{ e.device_name }}</p>
|
||||
</div>
|
||||
<div class="agv_info">
|
||||
<div class="agv_txt">
|
||||
<p class="p2">任务起点</p>
|
||||
<p class="p3">{{ e.start_loc }}</p>
|
||||
</div>
|
||||
<div class="agv_txt">
|
||||
<p class="p2">任务终点</p>
|
||||
<p class="p3">{{ e.target_loc }}</p>
|
||||
</div>
|
||||
<div class="agv_txt">
|
||||
<p class="p2">电量</p>
|
||||
<p class="p3">{{ e.battery_level }}</p>
|
||||
</div>
|
||||
<div class="agv_txt">
|
||||
<p class="p2">状态</p>
|
||||
<p class="p3">{{ e.status }}</p>
|
||||
</div>
|
||||
<div class="agv_txt">
|
||||
<p class="p2">提示信息</p>
|
||||
<p class="p3">{{ e.message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agv_wrap rgv_wrap">
|
||||
<div class="agv_item rgv_item" v-for="(e , i) in rgvList" :key="'rgv' + i">
|
||||
<div class="agv_left rgv_left">
|
||||
<div class="agv_img rgv_img"></div>
|
||||
<p class="p1">{{ e.device_name }}</p>
|
||||
</div>
|
||||
<div class="rgv_info">
|
||||
<div class="agv_txt rgv_txt">
|
||||
<p class="p2">当前位置</p>
|
||||
<p class="p3">{{ e.current_loc }}</p>
|
||||
</div>
|
||||
<div class="agv_txt rgv_txt">
|
||||
<p class="p2">目标位置
|
||||
</p>
|
||||
<p class="p3">{{ e.target_loc }}</p>
|
||||
</div>
|
||||
<div class="agv_txt rgv_txt">
|
||||
<p class="p2">电量</p>
|
||||
<p class="p3">{{ e.battery_level }}</p>
|
||||
</div>
|
||||
<div class="agv_txt rgv_txt">
|
||||
<p class="p2">状态</p>
|
||||
<p class="p3">{{ e.status }}</p>
|
||||
</div>
|
||||
<div class="agv_txt rgv_txt">
|
||||
<p class="p2">提示信息</p>
|
||||
<p class="p3">{{ e.message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wraper">
|
||||
<div class="title_wraper title_wraper_1">
|
||||
<p>当日搬运任务</p>
|
||||
</div>
|
||||
<div class="content_wraper" style="padding: 0">
|
||||
<div class="scroll_wrap">
|
||||
<ul class="scroll_tab_1">
|
||||
<li>创建时间</li>
|
||||
<li>设备</li>
|
||||
<li>起点位置</li>
|
||||
<li>终点位置</li>
|
||||
<li>任务号</li>
|
||||
<li>任务状态</li>
|
||||
</ul>
|
||||
<div class="scroll_container_1">
|
||||
<vue-seamless-scroll :data="taskList" :class-option="defaultOption1">
|
||||
<ul class="scroll-ul_1">
|
||||
<li v-for="(e, i) in taskList" :key="i">
|
||||
<div class="scroll-ul_1_div">{{e.create_time}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.carno}}</div>
|
||||
<!-- <div class="scroll-ul_1_div">
|
||||
<span class="state" :class="'state_' + e.status"></span>
|
||||
<p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
|
||||
</div> -->
|
||||
<div class="scroll-ul_1_div">{{e.start_point_code}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.next_point_code}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.task_code}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.task_status}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n_right_wraper">
|
||||
<div class="w_wraper">
|
||||
<div class="item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>当日生产统计</p>
|
||||
</div>
|
||||
<div class="content_wraper">
|
||||
<div class="w_wraper">
|
||||
<div ref="echartsRef4" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wraper item_wraper_1">
|
||||
<div class="title_wraper">
|
||||
<p>当日车间上下料</p>
|
||||
</div>
|
||||
<div class="content_wraper">
|
||||
<div class="w_wraper">
|
||||
<div ref="echartsRef5" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAllBigScreen } from '@js/mork2.js'
|
||||
// import { getAllBigScreen } from '@js/getData2.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
// chart2Timer: null,
|
||||
// chart5Timer: null,
|
||||
materList: [], // 原料库存
|
||||
curList: [], // 当日出入
|
||||
historyList: [], // 历史分析
|
||||
statisList: [], // 当日生产统计
|
||||
loadList: [], // 当日车间上下料
|
||||
taskList: [], // 当日搬运任务
|
||||
agvList: [],
|
||||
rgvList: [],
|
||||
myChart1: null,
|
||||
myChart2: null,
|
||||
myChart3: null,
|
||||
myChart4: null,
|
||||
myChart5: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultOption1 () {
|
||||
return {
|
||||
step: 0.3, // 数值越大速度滚动越快
|
||||
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.refresh()
|
||||
},
|
||||
mounted () {
|
||||
this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
|
||||
this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
|
||||
this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
|
||||
this.myChart4 = this.$echarts.init(this.$refs.echartsRef4)
|
||||
this.myChart5 = this.$echarts.init(this.$refs.echartsRef5)
|
||||
},
|
||||
destroyed () {
|
||||
if (this.myChart1 !== null) {
|
||||
this.myChart1.dispose()
|
||||
this.myChart1 = null
|
||||
}
|
||||
if (this.myChart2 !== null) {
|
||||
this.myChart2.dispose()
|
||||
this.myChart2 = null
|
||||
}
|
||||
if (this.myChart3 !== null) {
|
||||
this.myChart3.dispose()
|
||||
this.myChart3 = null
|
||||
}
|
||||
if (this.myChart4 !== null) {
|
||||
this.myChart4.dispose()
|
||||
this.myChart4 = null
|
||||
}
|
||||
if (this.myChart5 !== null) {
|
||||
this.myChart5.dispose()
|
||||
this.myChart5 = null
|
||||
}
|
||||
if (this.timer !== null) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
// if (this.chart2Timer !== null) {
|
||||
// clearInterval(this.chart2Timer)
|
||||
// this.chart2Timer = null
|
||||
// }
|
||||
// if (this.chart5Timer !== null) {
|
||||
// clearInterval(this.chart5Timer)
|
||||
// this.chart5Timer = null
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
back () {
|
||||
let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
|
||||
if (flag) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
}
|
||||
this.$router.push('/setup')
|
||||
},
|
||||
refresh () {
|
||||
this._getAllBigScreen()
|
||||
this.timer = setInterval(() => {
|
||||
this._getAllBigScreen()
|
||||
}, this.interTime)
|
||||
},
|
||||
async _getAllBigScreen () {
|
||||
let res = await getAllBigScreen()
|
||||
// if (this.chart2Timer !== null) {
|
||||
// clearInterval(this.chart2Timer)
|
||||
// this.chart2Timer = null
|
||||
// }
|
||||
// if (this.chart5Timer !== null) {
|
||||
// clearInterval(this.chart5Timer)
|
||||
// this.chart5Timer = null
|
||||
// }
|
||||
this.materList = [...res.inventoryAnalysis]
|
||||
this.curList = [...res.inventoryIOAnalysis]
|
||||
this.historyList = [...res.historyInventoryIOAnalysis]
|
||||
this.statisList = [...res.todayProduceStatistic]
|
||||
this.loadList = [...res.todayLoadingAndUnloadingStatistics]
|
||||
this.taskList = [...res.todayTask]
|
||||
this.agvList = [...res.agvInfo]
|
||||
this.rgvList = [...res.rgvInfo]
|
||||
this.setEchart1()
|
||||
this.setEchart2()
|
||||
this.setEchart3()
|
||||
this.setEchart4()
|
||||
this.setEchart5()
|
||||
},
|
||||
setEchart1 () {
|
||||
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
|
||||
let seriesData = []
|
||||
let seriesName = []
|
||||
this.materList.map((e, i) => {
|
||||
seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage})
|
||||
seriesName.push({name: e.material_name})
|
||||
})
|
||||
let total = 0
|
||||
this.materList.map(e => {
|
||||
total = total + Number(e.total_material_qty)
|
||||
}, 0)
|
||||
if (!this.materList.length) {
|
||||
total = '0'
|
||||
}
|
||||
let option = {
|
||||
color: colors,
|
||||
grid: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
title: {
|
||||
x: '16%',
|
||||
y: '35%',
|
||||
text: '总数',
|
||||
subtext: total,
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 9,
|
||||
lineHeight: 10,
|
||||
color: '#A8C3E6'
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 10,
|
||||
lineHeight: 8,
|
||||
color: '#DBE7F6'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
// type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
itemGap: 6,
|
||||
icon: 'rect',
|
||||
itemWidth: 4,
|
||||
itemHeight: 4,
|
||||
data: seriesName,
|
||||
formatter: (name) => {
|
||||
const item = seriesData.filter((item) => item.name === name)[0]
|
||||
return `{a|${name}}\n{b| ${item.value + '}'}`
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 8,
|
||||
lineHeight: 10,
|
||||
padding: [0, 0, 0, 0],
|
||||
wordWrap: 'break-word',
|
||||
color: '#9BB9DD',
|
||||
align: 'left'
|
||||
},
|
||||
b: {
|
||||
fontSize: 8,
|
||||
lineHeight: 10,
|
||||
padding: [0, 0, 0, 0],
|
||||
color: '#DFECFB',
|
||||
align: 'left'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '库存量监控',
|
||||
type: 'pie',
|
||||
radius: ['50%', '60%'],
|
||||
center: ['19%', '50%'],
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: 'RGBA(27, 58, 98, .5)',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
selectedMode: 'single',
|
||||
selectedOffset: 20,
|
||||
data: seriesData
|
||||
}]
|
||||
}
|
||||
this.myChart1.setOption(option, true)
|
||||
},
|
||||
setEchart2 () {
|
||||
let barName = []
|
||||
let barData1 = []
|
||||
let barData2 = []
|
||||
this.curList.map(el => {
|
||||
barName.push(el.material_name)
|
||||
barData1.push(el.total_instorage_qty)
|
||||
barData2.push(el.total_outstorage_qty)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 20,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
top: '0',
|
||||
right: '0',
|
||||
textStyle: {
|
||||
color: '#9BB9DD',
|
||||
fontSize: 8,
|
||||
lineHeight: 8
|
||||
},
|
||||
itemGap: 15,
|
||||
itemWidth: 4,
|
||||
itemHeight: 4,
|
||||
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#3C5787'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: '#7591B2',
|
||||
fontSize: 8,
|
||||
lineHeight: 6,
|
||||
margin: 5
|
||||
},
|
||||
data: barName
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// name: '单位:块',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitNumber: 4,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#B5C5D4',
|
||||
fontSize: 6
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [2, 1],
|
||||
color: '#455C86'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '入库',
|
||||
type: 'bar',
|
||||
barWidth: '10',
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(103,212,112,0.2)'
|
||||
},
|
||||
{
|
||||
offset: 0.08,
|
||||
color: 'rgba(103,212,112,0.9)'
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: barData1
|
||||
},
|
||||
{
|
||||
name: '出库',
|
||||
type: 'bar',
|
||||
barWidth: '10',
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(25,128,234,0.2)'
|
||||
},
|
||||
{
|
||||
offset: 0.08,
|
||||
color: 'rgba(25,128,234,0.9)'
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255,255,255,0.9)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: barData2
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
xAxisIndex: 0, // 这里是从X轴的0刻度开始
|
||||
show: false, // 是否显示滑动条,不影响使用
|
||||
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
||||
startValue: 0, // 从头开始。
|
||||
endValue: 3 // 展示到第几个。
|
||||
}
|
||||
]
|
||||
}
|
||||
this.myChart2.setOption(option, true)
|
||||
// this.chart2Timer = setInterval(() => {
|
||||
// if (option.dataZoom[0].endValue >= barData1.length - 1) {
|
||||
// option.dataZoom[0].endValue = 3
|
||||
// option.dataZoom[0].startValue = 0
|
||||
// } else {
|
||||
// option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
||||
// option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
||||
// }
|
||||
// this.myChart2.setOption(option, true)
|
||||
// }, 2000)
|
||||
},
|
||||
setEchart3 () {
|
||||
let total = 0
|
||||
this.historyList.map(el => {
|
||||
total = Math.max(total, Number(el.total_instorage_qty), Number(el.total_outstorage_qty))
|
||||
})
|
||||
let barName = []
|
||||
let barData1 = []
|
||||
let barData2 = []
|
||||
this.historyList.map(el => {
|
||||
barName.push(el.data)
|
||||
barData1.push(el.total_instorage_qty)
|
||||
barData2.push(el.total_outstorage_qty)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 20,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
top: '0',
|
||||
right: '0',
|
||||
textStyle: {
|
||||
color: '#9BB9DD',
|
||||
fontSize: 8,
|
||||
lineHeight: 8
|
||||
},
|
||||
itemGap: 15,
|
||||
itemWidth: 4,
|
||||
itemHeight: 4,
|
||||
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#3C5787'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
// rotate: 45,
|
||||
color: '#7591B2',
|
||||
fontSize: 8,
|
||||
lineHeight: 6,
|
||||
// align: 'right',
|
||||
margin: 5
|
||||
// formatter: (value) => {
|
||||
// let str = ''
|
||||
// let num = 5
|
||||
// let valLength = value.length
|
||||
// let rowNum = Math.ceil(valLength / num)
|
||||
// if (rowNum > 1) {
|
||||
// for (let i = 0; i < rowNum; i++) {
|
||||
// let temp = ''
|
||||
// let start = i * num
|
||||
// let end = start + num
|
||||
// if (i === rowNum - 1) {
|
||||
// temp = value.substring(start, end)
|
||||
// } else {
|
||||
// temp = value.substring(start, end) + '\n'
|
||||
// }
|
||||
// str += temp
|
||||
// }
|
||||
// return str
|
||||
// } else {
|
||||
// return value
|
||||
// }
|
||||
// }
|
||||
},
|
||||
data: barName
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
// name: '单位:块',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitNumber: 4,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#B5C5D4',
|
||||
fontSize: 6
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [2, 1],
|
||||
color: '#455C86'
|
||||
}
|
||||
},
|
||||
max: total
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '入库',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: '#67D470',
|
||||
lineStyle: {
|
||||
color: '#67D470',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(103,212,112,0.1)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(103,212,112,0.74)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: barData1
|
||||
},
|
||||
{
|
||||
name: '出库',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: '#58A2E3',
|
||||
lineStyle: {
|
||||
color: '#58A2E3',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(45,144,255,0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(45,144,255,0.85)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: barData2
|
||||
}
|
||||
]
|
||||
}
|
||||
this.myChart3.setOption(option, true)
|
||||
},
|
||||
setEchart4 () {
|
||||
let xAxisData = []
|
||||
let seriesData = []
|
||||
let colors = ['#1980EA', '#67D470', '#EF5252']
|
||||
this.statisList.map(el => {
|
||||
xAxisData.push(el.region_name)
|
||||
seriesData.push(el.count)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 22,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#3C5787'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: '#7591B2',
|
||||
fontSize: 8,
|
||||
lineHeight: 6,
|
||||
margin: 5
|
||||
},
|
||||
data: xAxisData
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '产量:托',
|
||||
nameTextStyle: {
|
||||
fontSize: 8,
|
||||
color: '#fff',
|
||||
padding: [0, 0, 0, 0]
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitNumber: 2,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#B5C5D4',
|
||||
fontSize: 6
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [2, 1],
|
||||
color: '#455C86'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '产量',
|
||||
type: 'pictorialBar',
|
||||
symbolRepeat: 'fixed',
|
||||
symbolMargin: 2,
|
||||
symbol: 'rect',
|
||||
symbolClip: true,
|
||||
symbolSize: [19, 4],
|
||||
symbolPosition: 'center',
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
return colors[params.dataIndex]
|
||||
}
|
||||
},
|
||||
data: seriesData
|
||||
}
|
||||
]
|
||||
}
|
||||
this.myChart4.setOption(option, true)
|
||||
},
|
||||
setEchart5 () {
|
||||
let attaData1 = []
|
||||
let attaData2 = []
|
||||
let ydata = []
|
||||
this.loadList.map(el => {
|
||||
ydata.push(el.region_name)
|
||||
attaData1.push(el.material_loading_count)
|
||||
attaData2.push(el.material_unloading_count)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 20,
|
||||
left: 0,
|
||||
right: 8,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
icon: 'rect',
|
||||
top: '0',
|
||||
right: '0',
|
||||
textStyle: {
|
||||
color: '#9BB9DD',
|
||||
fontSize: 8,
|
||||
lineHeight: 8
|
||||
},
|
||||
itemGap: 15,
|
||||
itemWidth: 4,
|
||||
itemHeight: 4,
|
||||
data: [{name: '上料', itemStyle: {color: '#A68615'}}, {name: '下料', itemStyle: {color: '#4E8BFB'}}]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#3C5787'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: '#7591B2',
|
||||
fontSize: 8,
|
||||
lineHeight: 6,
|
||||
margin: 5
|
||||
},
|
||||
data: ydata
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
// name: '单位:托',
|
||||
nameTextStyle: {
|
||||
fontSize: 8,
|
||||
color: '#fff',
|
||||
padding: [0, 0, 0, 0]
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitNumber: 4,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#B5C5D4',
|
||||
fontSize: 6
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: [2, 1],
|
||||
color: '#455C86'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '上料',
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
fontSize: 8,
|
||||
color: '#F5F5F5',
|
||||
formatter: '{c}托'
|
||||
},
|
||||
barWidth: '6',
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#8C620F'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#C7B51C'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: attaData1
|
||||
},
|
||||
{
|
||||
name: '下料',
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
fontSize: 8,
|
||||
color: '#F5F5F5',
|
||||
formatter: '{c}托'
|
||||
},
|
||||
barWidth: '6',
|
||||
itemStyle: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#3261FB'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#6BB4FB'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: attaData2
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
yAxisIndex: 0, // 这里是从X轴的0刻度开始
|
||||
show: false, // 是否显示滑动条,不影响使用
|
||||
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
||||
startValue: 0, // 从头开始。
|
||||
endValue: 7 // 展示到第几个。
|
||||
}
|
||||
]
|
||||
}
|
||||
this.myChart5.setOption(option, true)
|
||||
// this.chart5Timer = setInterval(() => {
|
||||
// if (option.dataZoom[0].endValue >= ydata.length - 1) {
|
||||
// option.dataZoom[0].endValue = 7
|
||||
// option.dataZoom[0].startValue = 0
|
||||
// } else {
|
||||
// option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
||||
// option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
||||
// }
|
||||
// this.myChart5.setOption(option, true)
|
||||
// }, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import './style.stylus'
|
||||
</style>
|
||||
1001
src/pages_960/modules/home/index_back.vue
Normal file
234
src/pages_960/modules/home/style.stylus
Normal file
@@ -0,0 +1,234 @@
|
||||
.n_container
|
||||
position relative
|
||||
width 100%
|
||||
height 100%
|
||||
overflow hidden
|
||||
.n_header
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
width 100%
|
||||
height 88px
|
||||
background center / 100% url('../../../images/header_bg_s.png') no-repeat
|
||||
.n_header_h1
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top 12px
|
||||
h1
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
text-align center;
|
||||
letter-spacing 4px
|
||||
.exit_btn
|
||||
position absolute
|
||||
left 3%
|
||||
top 11%
|
||||
z-index 100
|
||||
height 16px
|
||||
width 16px
|
||||
line-height 16px
|
||||
font-size 16px
|
||||
color #AECAF5
|
||||
text-align: center;
|
||||
.n_body_container
|
||||
width 100%
|
||||
height 100%
|
||||
padding 60px 10px 10px 10px
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.n_left_wraper
|
||||
width 24%
|
||||
height 100%
|
||||
.n_right_wraper
|
||||
width 24%
|
||||
height 100%
|
||||
.n-center_wraper
|
||||
width 50%
|
||||
height 100%
|
||||
.w_wraper
|
||||
width 100%
|
||||
height 100%
|
||||
.item_wraper
|
||||
width 100%
|
||||
height calc((100% - 20px) / 3)
|
||||
margin-bottom 10px
|
||||
&:last-child
|
||||
margin-bottom 0
|
||||
.item_wraper_1
|
||||
height calc((200% - 20px) / 3)
|
||||
.title_wraper
|
||||
width 100%
|
||||
height 24px
|
||||
background center / 100% 100% url('../../../images/bg-title_2_s.png') no-repeat
|
||||
padding 2px 22px
|
||||
p
|
||||
font-size 10px
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
line-height 12px
|
||||
.title_wraper_1
|
||||
background-image url('../../../images/bg-title_1_s.png')
|
||||
.content_wraper
|
||||
width 100%
|
||||
height calc(100% - 24px)
|
||||
padding 8px
|
||||
background-color rgba(30, 65, 126, 70%)
|
||||
.content_wraper_2
|
||||
padding 0
|
||||
.pie_wraper
|
||||
width 100%
|
||||
height 100%
|
||||
// padding 1px 0 0 1px
|
||||
// background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat
|
||||
.pie_legend
|
||||
width calc(100% - 200px)
|
||||
height 100%
|
||||
margin-left 200px
|
||||
display flex
|
||||
flex-direction row
|
||||
justify-content space-between
|
||||
align-items center
|
||||
flex-wrap: wrap
|
||||
.scroll_wrap
|
||||
width 100%
|
||||
height 100%
|
||||
padding 5px 10px 2px 10px
|
||||
.scroll_tab_1
|
||||
width 100%
|
||||
height 20px
|
||||
background center / 100% 100% url('../../../images/table-bg_1.png') no-repeat
|
||||
li
|
||||
float left
|
||||
width 15%
|
||||
font-size 8px;
|
||||
line-height 20px
|
||||
color #AFBED8
|
||||
text-align center
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
word-wrap break-word
|
||||
word-break break-all
|
||||
white-space nowrap
|
||||
padding 0 2px
|
||||
overflow hidden
|
||||
box-sizing border-box
|
||||
&:nth-child(1), &:nth-child(5)
|
||||
width 20%
|
||||
.state
|
||||
display block
|
||||
width 20px
|
||||
height 14px
|
||||
.state_name
|
||||
width calc(100% - 20px)
|
||||
.scroll_container_1
|
||||
width 100%
|
||||
height calc(100% - 20px)
|
||||
overflow hidden
|
||||
.scroll-ul_1
|
||||
li
|
||||
width 100%
|
||||
height 20px
|
||||
border-bottom 1px solid rgba(122,159,224,0.17)
|
||||
&:nth-child(even)
|
||||
background rgba(31,46,73,0.7)
|
||||
&:nth-child(odd)
|
||||
background rgba(31,46,73,0.55)
|
||||
.scroll-ul_1_div
|
||||
float left
|
||||
width 15%
|
||||
height 20px
|
||||
display flex
|
||||
flex-direction row
|
||||
justify-content center
|
||||
align-items center
|
||||
flex-wrap nowrap
|
||||
font-size 8px
|
||||
line-height 8px
|
||||
color #B2BBD7
|
||||
text-align center
|
||||
// word-wrap break-word
|
||||
// word-break break-all
|
||||
white-space nowrap
|
||||
padding 0 1px
|
||||
overflow hidden
|
||||
&:nth-child(1), &:nth-child(5)
|
||||
width 20%
|
||||
.state
|
||||
display block
|
||||
width 20px
|
||||
height 14px
|
||||
.state_name
|
||||
width 100%
|
||||
height 20px
|
||||
.agv_wrap
|
||||
display flex
|
||||
justify-content space-between
|
||||
width 100%
|
||||
height 47%
|
||||
padding-bottom 10px
|
||||
.rgv_wrap
|
||||
height 53%
|
||||
padding-bottom 0
|
||||
.agv_item
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width 32%
|
||||
padding 5px
|
||||
border 1px solid #3AA2F2
|
||||
border-radius 4px
|
||||
box-shadow inset 0px 0px 3px 3px rgba(58, 162, 242, 40%)
|
||||
.rgv_item
|
||||
display: block
|
||||
width 24%
|
||||
.agv_left
|
||||
width 33%
|
||||
height 100%
|
||||
padding-bottom 8px
|
||||
.rgv_left
|
||||
width 100%
|
||||
height 20%
|
||||
padding 0
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.agv_img
|
||||
height calc(100% - 30px)
|
||||
background center center / 80% auto url('../../../images/agv_s.png') no-repeat
|
||||
.agv_info
|
||||
width 64%
|
||||
.p1
|
||||
height 30px
|
||||
font-size: 9px;
|
||||
line-height 30px
|
||||
color: #78B1DE;
|
||||
text-align: center;
|
||||
white-space nowrap
|
||||
.agv_txt
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height 20%
|
||||
background bottom center / 100% 3px url('../../../images/screen1/line_1.png') no-repeat
|
||||
&:last-child
|
||||
background none
|
||||
.p2
|
||||
font-size: 7px;
|
||||
color: #84B0DA;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
.p3
|
||||
font-size: 8px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
.rgv_img
|
||||
width 50%
|
||||
height 100%
|
||||
background center center / 80% auto url('../../../images/rgv_s.png') no-repeat
|
||||
margin-bottom 0
|
||||
.rgv_info
|
||||
height 80%
|
||||
.rgv_txt
|
||||
height 20%
|
||||
25
src/router/index.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
const Setup = r => require.ensure([], () => r(require('../pages_960/Setup')), 'Setup')
|
||||
const home = r => require.ensure([], () => r(require('../pages_960/modules/home/index')), 'home')
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
linkActiveClass: 'tab-active',
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/setup'
|
||||
},
|
||||
{
|
||||
path: '/setup',
|
||||
component: Setup
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
component: home
|
||||
}
|
||||
]
|
||||
})
|
||||
BIN
src/style/font/SourceHanSansCN-Bold.otf
Normal file
BIN
src/style/font/SourceHanSansCN-Medium.otf
Normal file
BIN
src/style/font/SourceHanSansCN-Regular.otf
Normal file
BIN
src/style/font/YouSheBiaoTiHei.ttf
Normal file
33
src/style/iconfont.styl
Normal file
@@ -0,0 +1,33 @@
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
src: url('iconfont/iconfont.woff2') format('woff2'),
|
||||
url('iconfont/iconfont.woff') format('woff'),
|
||||
url('iconfont/iconfont.ttf') format('truetype');
|
||||
}
|
||||
// @font-face {
|
||||
// font-family: "YouSheBiaoTiHei";
|
||||
// src: url('font/YouSheBiaoTiHei.ttf') format('truetype');
|
||||
// }
|
||||
// @font-face {
|
||||
// font-family: "SourceHanSansCN-Bold";
|
||||
// src: url('font/SourceHanSansCN-Bold.otf') format('truetype');
|
||||
// }
|
||||
// @font-face {
|
||||
// font-family: "SourceHanSansCN-Regular";
|
||||
// src: url('font/SourceHanSansCN-Regular.otf') format('truetype');
|
||||
// }
|
||||
// @font-face {
|
||||
// font-family: "SourceHanSansCN-Medium";
|
||||
// src: url('font/SourceHanSansCN-Medium.otf') format('truetype');
|
||||
// }
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-guanbi:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
BIN
src/style/iconfont/iconfont.ttf
Normal file
BIN
src/style/iconfont/iconfont.woff
Normal file
BIN
src/style/iconfont/iconfont.woff2
Normal file
11
src/style/layout.styl
Normal file
@@ -0,0 +1,11 @@
|
||||
@import 'mixin.styl'
|
||||
@import 'iconfont.styl'
|
||||
|
||||
.state_0
|
||||
background center / 100% 100% url('../images/state_0.png') no-repeat
|
||||
.state_1
|
||||
background center / 100% 100% url('../images/state_1.png') no-repeat
|
||||
.state_2
|
||||
background center / 100% 100% url('../images/state_2.png') no-repeat
|
||||
.state_3
|
||||
background center / 100% 100% url('../images/state_3.png') no-repeat
|
||||
48
src/style/mixin.styl
Normal file
@@ -0,0 +1,48 @@
|
||||
$green = #30EBC9
|
||||
$yellow = #E2BB0E
|
||||
$gray = #516282
|
||||
$gray1 = #8B90A6
|
||||
$orange = #F96700
|
||||
$green2 = #65d837
|
||||
|
||||
.green
|
||||
background-color #11ff0d
|
||||
.yellow
|
||||
background-color #fdfd0f
|
||||
.gray
|
||||
background-color #bfbfbf
|
||||
.gray1
|
||||
background-color #d8d1d1
|
||||
.red
|
||||
background-color #ff1016
|
||||
|
||||
//宽高
|
||||
_wh(w, h)
|
||||
width: w
|
||||
height: h
|
||||
|
||||
//字体大小、行高、颜色
|
||||
_font(size,height,color=#ffffff,weight=normal,align=center)
|
||||
font-size: size
|
||||
line-height: height
|
||||
color: color
|
||||
font-weight: weight
|
||||
text-align: align
|
||||
|
||||
// 背景图片地址和大小
|
||||
_bis(url,w=100%,h=100%,x=center,y=center,r=no-repeat)
|
||||
background-position: x y
|
||||
background-size: w h
|
||||
background-image: url(url)
|
||||
background-repeat: r
|
||||
|
||||
// 背景图片改变颜色
|
||||
_shadow(w,c)
|
||||
filter drop-shadow(w 0 0 c)
|
||||
|
||||
//flex 布局和 子元素 对其方式
|
||||
_fj(c=column, x=space-between,y=center)
|
||||
display: flex
|
||||
flex-direction: c
|
||||
justify-content: x
|
||||
align-items: y
|
||||
161
src/style/reset.css
Normal file
@@ -0,0 +1,161 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video, input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* custom */
|
||||
a,a:link,a:visited,a:active {
|
||||
text-decoration: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:vertical {
|
||||
height: 5px;
|
||||
background-color: rgba(125, 125, 125, 0.7);
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:horizontal {
|
||||
width: 5px;
|
||||
background-color: rgba(125, 125, 125, 0.7);
|
||||
-webkit-border-radius: 6px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* width: 1920px;
|
||||
height: 1080px; */
|
||||
/* min-height: 1080px; */
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: rgba(11, 7, 7, 0);
|
||||
-moz-user-select:none;/*火狐*/
|
||||
-webkit-user-select:none;/*webkit浏览器*/
|
||||
-ms-user-select:none;/*IE10*/
|
||||
-khtml-user-select:none;/*早期浏览器*/
|
||||
user-select:none;
|
||||
background-color: #133471;
|
||||
}
|
||||
|
||||
div, p {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.fontselect {
|
||||
-moz-user-select:none;/*火狐*/
|
||||
-webkit-user-select:none;/*webkit浏览器*/
|
||||
-ms-user-select:none;/*IE10*/
|
||||
-khtml-user-select:none;/*早期浏览器*/
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flexbetween {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.flexwrap {
|
||||
flex-wrap: wrap
|
||||
}
|
||||