瑞通项目2.0 监控前端代码

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

.editorconfig

@@ -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

.eslintignore

@@ -0,0 +1,4 @@
+/build/
+/config/
+/dist/
+/*.js

.eslintrc.js

@@ -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'
+  }
+}

.gitignore

@@ -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

.postcssrc.js

@@ -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": {}
+  }
+}

README.md

@@ -0,0 +1,21 @@
+# newjk
+
+> 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).

build/build.js

@@ -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'
+    ))
+  })
+})

build/check-versions.js

@@ -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)
+  }
+}

build/utils.js

@@ -0,0 +1,101 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

build/vue-loader.conf.js

@@ -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'
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,92 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+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'),
+    }
+  },
+  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'
+  }
+}

build/webpack.dev.conf.js

@@ -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)
+    }
+  })
+})

build/webpack.prod.conf.js

@@ -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

config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

@@ -0,0 +1,86 @@
+'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: {
+      '/': {
+        // target: 'http://192.168.1.8:8000/',
+        // target: 'http://192.168.1.112:8005/',
+        // target: 'http://192.168.1.106:8000/',
+        // target: 'http://192.168.1.66:9000/',
+        target: 'http://192.168.1.107:8000/',
+        changeOrigin: true,
+        pathRewrite: {
+          '/': '' //重写接口
+        }
+      },
+    },
+    // Various Dev Server settings
+    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    port: 8003, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    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: false,
+    // 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
+  }
+}

config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>newjk</title>
+    <script src="./static/js/ezuikit.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package.json

@@ -0,0 +1,81 @@
+{
+  "name": "newjk",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "liujie <1464516907@qq.com>",
+  "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": {
+    "axios": "^0.21.0",
+    "babel-polyfill": "^6.26.0",
+    "element-ui": "^2.14.1",
+    "es6-promise": "^4.2.8",
+    "vue": "^2.5.2",
+    "vue-cropper": "^0.5.2",
+    "vue-router": "^3.0.1"
+  },
+  "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-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.11",
+    "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",
+    "less": "^3.9",
+    "less-loader": "^5.0.0",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "qs": "^6.9.4",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.7.3",
+    "vue-style-loader": "^3.1.2",
+    "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"
+  ]
+}

src/App.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style lang="less">
+html,body{
+  height:100%;
+  margin:0;
+    #app {
+    height: 100%;
+  }
+}
+</style>

src/assets/css/global.css

@@ -0,0 +1,113 @@
+html,body,#app{
+    height:100%;
+    margin:0;
+   padding:0;
+   /* overflow: hidden; */
+}
+a{text-decoration: none;}
+ul,li{
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+p{margin:0}
+.el-breadcrumb{
+    /* margin-bottom:15px; */
+    font-size:22px;
+    background:#fff;
+    border-top:1px solid #ddd;
+    padding:15px 10px;
+    margin-left:-219px;
+    margin-right:-20px;
+    position: fixed;
+    z-index: 1;
+    left: 220px;
+    right: 0;
+    top: 198px;
+    /* top: 242px; */
+    background: linear-gradient(270deg, rgba(255,255,255,0.05) 0%, #04a7ff7e 100%);
+    border: none;
+}
+.el-breadcrumb__inner{
+    color: white !important;
+}
+.el-dialog__header{
+    background:#F2F2F2;
+    border-bottom:1px solid #CACACA;
+}
+.el-main{padding:20px 20px 0!important;background-color: #f6f6f6;}
+
+/* 修改分页的默认样式 */
+.el-pagination{
+    text-align: center;
+    margin-top:20px;
+    margin-bottom:20px;
+}
+.el-pagination .el-pager li.active{
+    background-color: transparent !important;
+    color: #1989FA !important;
+    
+}
+.el-pager li{
+    font-size: 14px;
+}
+.el-col{margin-bottom:10px;}
+/* 解决elementUI的table的闪动问题 */
+.el-table__body{width:100%!important}
+/* 去掉e-card组件的padding */
+.pad0 .el-card__body{padding:0px!important}
+
+
+/* 时间段宽度设置 */
+.el-date-editor--daterange.el-input__inner {
+    width:220px!important;
+}
+
+.avatar-uploader .el-upload {
+    border:1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    }
+.avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+    }
+.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 100px;
+    height: 100px;
+    line-height: 100px!important;
+    text-align: center;
+    }
+.avatar {
+    width: 100px;
+    height: 100px;
+    display: block;
+    }
+       
+.search-box{margin-bottom:10px;}
+.el-button.el-button--mini{
+    padding: 6px 8px;
+    font-size: 12px;
+    border-radius: 8px;
+}
+.el-button.el-button--mini.el-button--info{
+    color: #FFFFFF;
+    background: linear-gradient(223deg, #ACABFF 0%, #72A3FF 100%);
+    border-color: #ACABFF;
+}
+.el-button.el-button--mini.el-button--warning{
+    color: #FFFFFF;
+    background: linear-gradient(223deg, #85DEC3 0%, #72CBFF 100%);
+    border-color: #85DEC3;
+}
+.el-button.el-button--mini.el-button--danger{
+    color: #FFFFFF;
+    background-color: #eb6765;
+    border-color: #eb6765;
+}
+.el-icon-loading{
+    font-size: 44px;
+}

src/assets/icon/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/icon/iconfont.json

@@ -0,0 +1,387 @@
+{
+  "id": "1738837",
+  "name": "农业大数据",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "2678622",
+      "name": "全屏",
+      "font_class": "quanping",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "772252",
+      "name": "扫描 识别 380%",
+      "font_class": "saomiaoshibie380",
+      "unicode": "e686",
+      "unicode_decimal": 59014
+    },
+    {
+      "icon_id": "11893490",
+      "name": "添加",
+      "font_class": "tianjia",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "16364328",
+      "name": "统计",
+      "font_class": "tongji",
+      "unicode": "e636",
+      "unicode_decimal": 58934
+    },
+    {
+      "icon_id": "17709313",
+      "name": "未命名 -34",
+      "font_class": "weimingming-34",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "5327411",
+      "name": "臭虫bug",
+      "font_class": "chouchongbug",
+      "unicode": "e6e1",
+      "unicode_decimal": 59105
+    },
+    {
+      "icon_id": "802969",
+      "name": "楼房",
+      "font_class": "loufang",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "4348068",
+      "name": "电脑",
+      "font_class": "diannao1",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "8835594",
+      "name": "图片",
+      "font_class": "tupian-xianxing",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "10392628",
+      "name": "详情-",
+      "font_class": "xiangqing-",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "36107",
+      "name": "面积",
+      "font_class": "mianji",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "883904",
+      "name": "电话 (2)",
+      "font_class": "dianhua2",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "1183130",
+      "name": "定位",
+      "font_class": "dingwei",
+      "unicode": "e675",
+      "unicode_decimal": 58997
+    },
+    {
+      "icon_id": "6129144",
+      "name": "102绑定",
+      "font_class": "bangding",
+      "unicode": "e784",
+      "unicode_decimal": 59268
+    },
+    {
+      "icon_id": "6970030",
+      "name": "用户",
+      "font_class": "yonghu11",
+      "unicode": "e705",
+      "unicode_decimal": 59141
+    },
+    {
+      "icon_id": "1106935",
+      "name": "雨",
+      "font_class": "yu",
+      "unicode": "e63a",
+      "unicode_decimal": 58938
+    },
+    {
+      "icon_id": "2155826",
+      "name": "温度",
+      "font_class": "thermometer_icon",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "4236632",
+      "name": "湿度",
+      "font_class": "shidu",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "7983631",
+      "name": "摄像头",
+      "font_class": "xingzhuang",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "13638685",
+      "name": "电",
+      "font_class": "dian",
+      "unicode": "e655",
+      "unicode_decimal": 58965
+    },
+    {
+      "icon_id": "13638743",
+      "name": "温度",
+      "font_class": "wendu",
+      "unicode": "e660",
+      "unicode_decimal": 58976
+    },
+    {
+      "icon_id": "14095260",
+      "name": "定时",
+      "font_class": "dingshi",
+      "unicode": "e77e",
+      "unicode_decimal": 59262
+    },
+    {
+      "icon_id": "397065",
+      "name": "诱虫灯",
+      "font_class": "fangzhi",
+      "unicode": "e75c",
+      "unicode_decimal": 59228
+    },
+    {
+      "icon_id": "519489",
+      "name": "首页",
+      "font_class": "shouye",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "552767",
+      "name": "农药化肥",
+      "font_class": "nongchangguanli",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "689284",
+      "name": "设置 设定 配置 扳手",
+      "font_class": "shouhou",
+      "unicode": "e80e",
+      "unicode_decimal": 59406
+    },
+    {
+      "icon_id": "1119123",
+      "name": "系统",
+      "font_class": "xitong",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "1320048",
+      "name": "数据统计",
+      "font_class": "shujuzhanshi",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "3483768",
+      "name": "地址",
+      "font_class": "jidi",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "6756289",
+      "name": "专家",
+      "font_class": "zhuanjia",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "7562834",
+      "name": "农事行为",
+      "font_class": "nongshiguanli",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "10544904",
+      "name": "多云转晴",
+      "font_class": "huanjingjiance",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "13190141",
+      "name": "设备",
+      "font_class": "shebei",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "13837385",
+      "name": "虫情监测 - 简",
+      "font_class": "cebaoguanli",
+      "unicode": "e776",
+      "unicode_decimal": 59254
+    },
+    {
+      "icon_id": "15282842",
+      "name": "树苗",
+      "font_class": "suyuan",
+      "unicode": "e6e8",
+      "unicode_decimal": 59112
+    },
+    {
+      "icon_id": "15631425",
+      "name": "监控",
+      "font_class": "jiankong",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "992522",
+      "name": "信息",
+      "font_class": "xinxi1",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    },
+    {
+      "icon_id": "1135940",
+      "name": "用户",
+      "font_class": "yonghu1",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "7501066",
+      "name": "密码",
+      "font_class": "mima1",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
+    {
+      "icon_id": "715831",
+      "name": "电脑",
+      "font_class": "diannao",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "4186778",
+      "name": "标签",
+      "font_class": "biaoqian",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "6682541",
+      "name": "地址",
+      "font_class": "dizhi",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "7404314",
+      "name": "时间",
+      "font_class": "shijian",
+      "unicode": "e77c",
+      "unicode_decimal": 59260
+    },
+    {
+      "icon_id": "8094230",
+      "name": "页面操作",
+      "font_class": "yemiancaozuo",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "10995780",
+      "name": "用户",
+      "font_class": "yonghu",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "354570",
+      "name": "编辑",
+      "font_class": "iconfontedit",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "813727",
+      "name": "充值",
+      "font_class": "chongzhi",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "1761485",
+      "name": "禁用",
+      "font_class": "jinyong",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "11391516",
+      "name": "密码",
+      "font_class": "mima",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
+    {
+      "icon_id": "9783463",
+      "name": "文档",
+      "font_class": "wendang",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "4641118",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    },
+    {
+      "icon_id": "12685010",
+      "name": "铃",
+      "font_class": "icon_huabanfuben",
+      "unicode": "e62b",
+      "unicode_decimal": 58923
+    },
+    {
+      "icon_id": "2512619",
+      "name": "BAI-屋子",
+      "font_class": "BAI-wuzi",
+      "unicode": "e69c",
+      "unicode_decimal": 59036
+    },
+    {
+      "icon_id": "5387843",
+      "name": "主题_调色盘_o",
+      "font_class": "zhuti_tiaosepan_o",
+      "unicode": "eb6e",
+      "unicode_decimal": 60270
+    }
+  ]
+}

src/components/Index.vue

@@ -0,0 +1,881 @@
+<template>
+  <el-container class="container" style="height: 100%">
+    <el-header class="header">
+      <img class="RTlogo" src="../assets/images/RTlogo.png" />
+      <!-- <div v-if="userinfo.logo">
+        <img
+          :src="userinfo.logo"
+          alt="jktype"
+          style="position: absolute; left: 20px; top: 20px; max-width: 250px"
+        />
+      </div> -->
+      <!-- 用户 -->
+      <div class="userinfo">欢迎您，{{ username }}</div>
+      <!-- 标题 -->
+      <div class="sysName">
+        <h2 v-if="userinfo.user_header">{{ userinfo.user_header }}</h2>
+        <h2 v-else>可视农业应用系统</h2>
+        <p style="font-size: 12px;letter-spacing: 0px;">Agricultural Visualization Monitoring System</p>
+      </div>
+      <div class="site" v-if="userinfo.site && flag">
+        <i class="iconfont icon-jidi" style="color: white;font-size: 26px;"></i>
+        <span style="letter-spacing: 1px;font-size: 22px;">{{ userinfo.site }}</span>
+      </div>
+      <span class="header_btn" @click="toggle">{{flag?'隐藏':'展开'}}</span>
+    </el-header>
+    <!-- <el-header class="header2" v-show="!flag">
+      <h3 v-if="userinfo.user_header">{{ userinfo.user_header }}</h3>
+      <h3 v-else>可视农业应用系统</h3>
+      <span class="header_btn" @click="hCheckFun">[展开]</span>
+    </el-header> -->
+
+    <!-- <div style="background: #474e60" v-show="flag">
+      <ul class="header_ul">
+        <li
+          style="padding: 15px 20px 15px 20px; color: #fff; cursor: pointer"
+          @click="headerTitle(index)"
+          :class="{ indexActive: tltIndex == index }"
+          v-for="(item, index) in menuList1"
+          :key="index"
+        >
+          {{ item.purview_name }}
+        </li>
+      </ul>
+    </div> -->
+    <el-container style="overflow: auto">
+      <el-aside width="250px">
+        <!-- 选中站点标题 -->
+        <!-- <div
+          style="
+            /* background: #242527; */
+            line-height: 46px;
+            height: 46px;
+            color: #fff;
+          "
+        >
+          <img
+            style="
+              width: 12px;
+              height: 16px;
+              margin: -3.5px 0 0 11.5%;
+              vertical-align: middle;
+            "
+            src="../assets/images/dingwei.png"
+            alt=""
+          />
+          <span style="font-size: 13px; margin: 0 0 0 1.5px">{{
+            siteNameTitle
+          }}</span>
+        </div> -->
+
+        <el-menu
+          :default-active="$route.path"
+          :collapse-transition="false"
+          class="el-menu-vertical-demo"
+          :router="isRouter"
+          @select="handleOpen"
+          active-text-color="#fff"
+          style="padding-top: 20px;background-color: initial;"
+        >
+          <el-menu-item index="/index/monitor1">
+            <i :class="iconObj[20]"></i>
+            <span slot="title">可视农业应用系统</span>
+          </el-menu-item>
+          <el-menu-item index="/index/list1">
+            <i :class="iconObj[22]"></i>
+            <span slot="title">设备列表</span>
+          </el-menu-item>
+          <el-menu-item index="/index/userManger1">
+            <i :class="iconObj[23]"></i>
+            <span slot="title">用户管理</span>
+          </el-menu-item>
+        </el-menu>
+
+        <div v-if="isTree" style="margin: 13px 0 0 0; width: 95%">
+          <ul>
+            <li style="display: flex; justify-content: space-between">
+              <div style="display: flex; margin: 0 0 0 5px">
+                <img
+                  style="width: 20px; height: 20px; margin: 4px 3px 0 0"
+                  src="../assets/images/zhankai.png"
+                  alt=""
+                />
+                <div
+                  style="font-weight: 550;
+                  margin: 0 0 0 4px; 
+                  font-size: 20px;
+                  color: white;"
+                >
+                  站点管理
+                </div>
+              </div>
+              <img
+                style="
+									width: 22px;
+									height: 22px;
+									margin: 3px 0 0 0;
+									cursor: pointer;
+								"
+                src="../assets/images/tianjia.png"
+                alt=""
+                @click="addStation"
+                v-if="userinfo.staff == '1'"
+              />
+            </li>
+
+            <li id="tree">
+              <el-tree
+                ref="treeRef"
+                :data="data"
+                :props="defaultProps"
+                node-key="id"
+                :current-node-key="firstItem"
+                :default-expand-all="true"
+                @node-click="handleNodeClick"
+                @node-contextmenu="rightClick"
+                highlight-current
+                style="background-color: transparent;color: rgba(255, 255, 255, 0.5);"
+              ></el-tree>
+            </li>
+          </ul>
+        </div>
+      </el-aside>
+
+      <!-- 右键信息 -->
+      <div v-show="menuVisible">
+        <ul id="menuList" class="menu">
+          <li class="menu_item" @click="addrInformation()">增加</li>
+        </ul>
+      </div>
+      <el-main>
+        <router-view ref="mychild" :flag="dataObj"></router-view>
+      </el-main>
+    </el-container>
+
+    <!-- 添加站点 -->
+    <el-dialog
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      title="新增站点"
+      :visible.sync="addSite"
+      width="25%"
+    >
+      <ul>
+        <li style="margin: 10px 0 0 0">
+          <span>站点名称：</span>
+          <el-input style="width: 49%" v-model="siteName"></el-input>
+        </li>
+        <li style="margin: 10px 0 0 0">
+          <span>站点地址：</span>
+          <el-cascader
+            clearable
+            v-model="siteAddr"
+            :options="options"
+          ></el-cascader>
+        </li>
+      </ul>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addSite = false">取 消</el-button>
+        <el-button type="primary" @click="addrData()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </el-container>
+</template>
+<script>
+import city from "../components/citydata.js";
+export default {
+  data() {
+    return {
+      siteId: "",
+      isTree: true,
+      firstItem: "",
+      firstShow: true,
+      isRouter: true,
+      iconObj: {
+        20: "iconfont icon-jiankong",
+        22: "iconfont icon-shebei",
+        23: "iconfont icon-xitong",
+      },
+      flag: true,
+      active: 1,
+      userinfo: {},
+      username: "",
+      userphoto: "",
+      menuList1: [
+        {
+          purview_name: "可视农业应用系统",
+          menu: "monitor1",
+          parent_perm_id: 1,
+          pur_id: 1,
+        },
+        {
+          purview_name: "设备列表",
+          menu: "list1",
+          parent_perm_id: 2,
+          pur_id: 2,
+        },
+        {
+          purview_name: "用户管理",
+          menu: "userManger1",
+          parent_perm_id: 3,
+          pur_id: 3,
+        },
+      ],
+
+      // 站点
+      tltIndex: 0,
+      addSite: false,
+      siteName: "", // 站点名称
+      siteAddr: [], // 站点地址
+      options: [],
+      data: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      menuVisible: false,
+
+      siteNameTitle: "全 部",
+      req: "", // 站点列表是否显示有无设备的站点
+      equip_type: "", //选中的设备类型
+
+      dataObj: {
+        flag: true,
+        siteID: null,
+        allList: [],
+        cid :null,
+        siteNameTitle:this.siteNameTitle
+      },
+    };
+  },
+  created: function () {
+    this.getuserinfo();
+  },
+  watch: {
+    addSite(val) {
+      if (val == false) {
+        this.siteName = "";
+        this.siteAddr = [];
+        this.operateObj = {};
+      }
+      // else if (val == true) {
+      // 	if (this.operateObj.label) {
+      // 		console.log(this.operateObj)
+
+      // 	} else {
+      // 	}
+      // }
+    },
+    // 监听路由变化，如果变化就将展示选中的站点名称归零为全部
+    $route(to, from) {
+      if (to.path == "/index/monitor1") {
+        console.log(this.$refs.mychild);
+      }
+      this.siteNameTitle = "全 部";
+    },
+
+    equip_type(val) {
+      console.log(val);
+      this.siteListData();
+    },
+  },
+  computed: {},
+  mounted() {
+    document.querySelector('.header').style.height = '250px'
+
+		// this.$nextTick(()=>{
+			document.querySelector('.header').style.transition = '.4s'
+		// })
+    if (sessionStorage.getItem("tltIndex")) {
+      this.tltIndex = sessionStorage.getItem("tltIndex");
+    }
+    this.siteListData();
+    this.options = city;
+
+    var url = this.$route.path;
+    url = url.split("/index", 2);
+    if (url[1] == "/xycb") {
+      sessionStorage.setItem("tltIndex", 0);
+      this.tltIndex = 0;
+    }
+
+    // 获取当前点击的设备类型
+    if (url[1] == "/monitor1") {
+      // 性诱测报
+      this.req = "hide";
+      this.equip_type = "6";
+    } else {
+      this.req = "";
+      this.equip_type = "";
+    }
+  },
+  methods: {
+    toggle(){
+			this.flag = !this.flag
+			if(!this.flag){
+				document.querySelector('.header').style.height = '140px'
+				this.dataObj.flag = this.flag
+			} else{
+				document.querySelector('.header').style.height = '250px'
+				setTimeout(()=>{
+					this.dataObj.flag = this.flag
+				},400)
+			}
+			
+			
+		},
+    hCheckFun() {
+      this.flag = !this.flag;
+      this.dataObj.flag = this.flag;
+    },
+    getuserinfo() {
+      this.$axios({
+        method: "post",
+        url: "userinfo_",
+      }).then((res) => {
+        this.username = res.data.username;
+        this.userphoto = res.data.userphoto;
+        localStorage.setItem("username", res.data.username); // 0管理员  1用户
+      });
+      this.$axios({
+        method: "get",
+        url: "user_detail",
+      }).then((res) => {
+        this.userinfo = res.data;
+        localStorage.setItem("have_type", this.userinfo.have_type); // 0管理员  1用户
+        localStorage.setItem("staff", this.userinfo.staff); // 1是admin
+        localStorage.setItem('site_id', this.userinfo.site_id) // 站点id
+				localStorage.setItem('siteName', this.userinfo.site) // 站点name
+      });
+    },
+
+    headerTitle(i) {
+      this.tltIndex = i;
+      console.log(i);
+      sessionStorage.setItem("tltIndex", i);
+      this.$router.push("/index/" + this.menuList1[i].menu);
+    },
+
+    // 添加新站点
+    addStation() {
+      this.addSite = true;
+      this.operateObj = {};
+    },
+
+    // 站点名称列表
+    siteListData() {
+      this.$axios({
+        method: "GET",
+        url: "site_manage",
+        params: {
+          req: this.req,
+          equip_type: this.equip_type,
+          jk_type: "2",
+        },
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.data) {
+            var data = res.data;
+            var arrList = [];
+            var list = data.forEach((item) => {
+              if (
+                item.self_site_name !== undefined &&
+                item.self_site_name == ""
+              ) {
+              } else {
+                if (item.self_site_name == undefined) {
+                  if (item.child) {
+                    var obj = {};
+                    var a = [];
+                    obj["label"] = item.site_name;
+                    obj["id"] = item.site_id;
+                    for (var j in item.child) {
+                      var obja = {};
+                      obja["label"] = item.child[j].site_name;
+                      obja["id"] = item.child[j].site_id;
+                      if (
+                        item.child[j].child &&
+                        item.child[j].child.length == 0
+                      ) {
+                        obja["children"] = item.child[j].child;
+                      } else if (
+                        item.child[j].child &&
+                        item.child[j].child.length !== 0
+                      ) {
+                        for (var k in item.child[j].child) {
+                          var objb = {};
+                          objb["label"] = item.child[j].child[k].site_name;
+                          objb["id"] = item.child[j].child[k].site_id;
+                        }
+                        obja["children"] = [objb];
+                      }
+                      a.push(obja);
+                      obj["children"] = a;
+                    }
+                  }
+                  arrList.push(obj);
+                } else if (item.self_site_name !== undefined) {
+                }
+              }
+            });
+            this.data = arrList;
+            console.log(arrList);
+            // 默认选中第一个站点
+            // this.siteNameTitle = data[0].child[0].site_name;
+            // this.firstItem = data[0].child[0].site_id;
+            if(localStorage.getItem('siteName')=='超级管理员'){
+							this.siteNameTitle = "瑞通集团总站"
+						}else{
+							this.siteNameTitle = localStorage.getItem('siteName');
+						}
+						this.firstItem = localStorage.getItem('site_id');
+            let data = {};
+						this.treeIterator(arrList,res => {
+							if(res.id==this.firstItem){
+								data = res
+							}
+						})
+            this.$nextTick(() => {
+              this.$refs.treeRef.setCurrentKey(this.firstItem);
+              // const childrenItem = arrList[0].children[0];
+              const childrenItem = data;
+              if (this.firstShow) {
+                this.handleNodeClick(childrenItem);
+                this.firstShow = false;
+              }
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+  treeIterator(tree, func) {
+			let node, curTree = [...tree]
+			while ((node = curTree.shift())) {
+			func(node)
+			node.children && curTree.push(...node.children)
+			}
+		},
+    // 树形插件
+    handleNodeClick(data) {
+      // this.operateObj = data
+      var url = this.$route.path;
+      this.siteId = data.id;
+      this.siteNameTitle = data.label;
+      url = url.split("/index/", 2);
+      if (url[1] == "monitor1") {
+        this.$refs.mychild.getJkList(data, 1);
+        this.$refs.mychild.$data.siteVal = "";
+        this.$refs.mychild.plotList(data, 1);
+      } else {
+        this.$refs.mychild.getList(data, 1);
+      }
+      this.dataObj.siteNameTitle = data.label
+    },
+
+    // 树形插件右键点击事件
+    rightClick(MouseEvent, object, Node, element) {
+      console.log(object);
+      this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
+      this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
+      var menu = document.querySelector("#menuList");
+      document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
+      menu.style.display = "block";
+      menu.style.left = MouseEvent.clientX - 0 + "px";
+      menu.style.top = MouseEvent.clientY - 0 + "px";
+      this.operateObj = object;
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuVisible = false;
+      document.removeEventListener("click", this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
+    },
+    // 指定新增
+    addrInformation() {
+      this.addSite = true;
+    },
+
+    addrData() {
+      console.log(this.operateObj.id);
+      console.log(this.operateObj);
+      if (this.siteName == "") {
+        this.$message({
+          message: "未填写站点名称，请填写！",
+          type: "warning",
+          duration: 1500,
+        });
+      } else if (this.siteAddr.length == 0) {
+        this.$message({
+          message: "未填写站点地址，请填写！",
+          type: "warning",
+          duration: 1500,
+        });
+      } else {
+        if (this.siteAddr.length < 3) {
+          var sheng = "";
+          var shi = this.siteAddr[0];
+          var xian = this.siteAddr[1];
+        } else {
+          var sheng = this.siteAddr[0];
+          var shi = this.siteAddr[1];
+          var xian = this.siteAddr[2];
+        }
+        var postData = this.qs.stringify({
+          site_name: this.siteName, // 站点名称
+          site_pro: sheng, // 省
+          site_city: shi, // 市
+          site_area: xian, // 县或区
+          site_parent_id:
+            this.operateObj.id !== undefined ? this.operateObj.id : "", // id
+        });
+        this.$axios({
+          method: "POST",
+          url: "/site_manage",
+          data: postData,
+        })
+          .then((res) => {
+            console.log(res.data);
+            if (res.data.status == 0) {
+              this.$message({
+                message: res.data.msg,
+                type: "success",
+                duration: 1500,
+              });
+              this.addSite = false;
+              this.siteListData();
+            } else {
+              this.$message({
+                message: res.data.msg,
+                type: "error",
+                duration: 1500,
+              });
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+            this.$message({
+              message: "添加失败请重试！",
+              type: "error",
+              duration: 1500,
+            });
+          });
+      }
+    },
+
+    // 获取到当前点击菜单的数据
+    handleOpen(key, keyPath) {
+      this.isTree = true;
+      var data = key;
+      var typeIndex = data.split("/index/");
+      if (typeIndex[1] == "monitor1") {
+        // 性诱测报
+        this.req = "hide";
+        this.equip_type = "6";
+        this.siteId = this.firstItem;
+        console.log(localStorage.getItem('site_id')=="0");
+        if(localStorage.getItem('site_id')=="0"){
+          this.dataObj.cid = '';
+        }else{
+          this.dataObj.cid = this.siteId;
+        }
+        
+      } else if (typeIndex[1] == "userManger1") {
+        console.log(this.$refs.mychild);
+        this.isTree = false;
+      } else {
+        this.req = "";
+        this.equip_type = "";
+      }
+    },
+
+    // 点击获取全部站点名称列表
+    allSiteListData() {
+      this.req = "";
+      this.equip_type = "";
+      this.siteListData();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.header {
+  position: relative;
+  width: 100%;
+  height: 250px;
+  // border-bottom: 2px solid #272b3a;
+  // background: #272b3a no-repeat center / 100% 100%
+  //   url(../assets/images/monitor/h_bg.jpg);
+  .RTlogo{
+		position: absolute;
+		width: 220px;
+		left: 14px;
+		top: 20px;
+	}
+  .userinfo {
+    color: #fff;
+    font-size: 22px;
+    text-align: right;
+    margin-top: 10px;
+    position: relative;
+    top: 20px;
+    .userheadImg {
+      width: 35px;
+      height: 35px;
+      border-radius: 50%;
+      vertical-align: middle;
+      margin-right: 6px;
+    }
+  }
+  .sysName {
+    // font-size: 30px;
+    color: #fff;
+    text-align: left;
+    margin-top: 7px;
+    padding-left: 280px;
+    font-size: 16px;
+    letter-spacing: 0.5px;
+    
+    h2 {
+      font-size: 30px;
+      line-height: 46px;
+      font-weight: 700;
+      letter-spacing: 7px;
+      margin: 0;
+    }
+    p {
+      font-size: 14px;
+    }
+  }
+  .logInfo {
+    color: #fff;
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    img {
+      width: auto;
+      height: 40px;
+    }
+    h3 {
+      margin: 0;
+      margin-left: 20px;
+    }
+  }
+}
+.container{
+	background: url(../assets/images/headBj.png) no-repeat center top;
+	background-size: 100% 250px;
+}
+.header2 {
+  border-bottom: 2px solid #272b3a;
+  position: relative;
+  background-color: #323749;
+  color: #fff;
+}
+.site {
+  position: absolute;
+  right: 16px;
+  top: 70px;
+  z-index: 8;
+  font-size: 14px;
+  color: #ffffff;
+  span {
+    color: #fff;
+    letter-spacing: 1px;
+    font-size: 13px;
+  }
+}
+.header_btn {
+  position: absolute;
+  color: #fff;
+  font-size: 20px;
+  right: 20px;
+  bottom: 10px;
+  cursor: pointer;
+  z-index: 9;
+  cursor: pointer;
+}
+.header_btn:hover {
+  color: #fff;
+}
+
+.el-aside {
+  color: #333;
+  background: url(../assets/images/asideBG.png) no-repeat center;
+  background-size: cover;
+  .el-menu {
+    background: #232735;
+    .el-menu-item {
+      color: rgba(255, 255, 255, 0.5);
+      height: 56px;
+      line-height: 56px;
+      font-size: 18px;
+      .iconfont{
+        // color: rgba(255, 255, 255, 0.5);
+        color: inherit;
+        font-size: 24px;
+        position: relative;
+        top: 1px;
+        margin-right: 10px;
+      }
+    }
+    .is-active {
+      background: #409EFF;
+      font-weight: bold;
+    }
+    .el-menu-item:focus,
+    .el-menu-item:hover {
+      // color: #39f9be;
+      background: #409EFF;
+      i {
+        // color: #39f9be;
+        
+      }
+    }
+  }
+}
+
+.el-aside::-webkit-scrollbar {/*滚动条整体样式*/
+	width: 6px;
+	/* height: 10px; */
+}
+/*滚动条轨道样式*/
+.el-aside::-webkit-scrollbar-track {
+	background-color: #f5f5f5;
+}
+/*滚动条滑块样式*/
+.el-aside::-webkit-scrollbar-thumb {
+	background-color: #4983FB;
+	border-radius: 5px;
+}
+/*滚动条按钮样式*/
+.el-aside::-webkit-scrollbar-button {
+	background-color: #4983FB;
+}
+/*滚动条角样式*/
+.el-aside::-webkit-scrollbar-corner {
+	background-color: #4983FB;
+}
+/*滚动条上下箭头样式*/
+.el-aside::-webkit-scrollbar-arrow {
+	background-color: #4983FB;
+}
+/*滚动条下拉按钮样式*/
+.el-aside::-webkit-scrollbar-dropdown {
+	background-color: #4983FB;
+}
+/*滚动条滑块被点击时的样式*/
+.el-aside::-webkit-scrollbar-thumb:active {
+	background-color: #4983FB;
+}
+/*滚动条滑块被hover时的样式*/
+.el-aside::-webkit-scrollbar-thumb:hover {
+	background-color: #4983FB;
+}
+
+
+.el-main {
+  padding: 0;
+  background-color: #f6f6f6;
+}
+
+/*滚动条整体样式*/
+.el-main::-webkit-scrollbar {
+	width: 6px;
+	/* height: 10px; */
+}
+/*滚动条轨道样式*/
+.el-main::-webkit-scrollbar-track {
+	background-color: #f5f5f5;
+}
+/*滚动条滑块样式*/
+.el-main::-webkit-scrollbar-thumb {
+	background-color: #4983FB;
+	border-radius: 5px;
+}
+/*滚动条按钮样式*/
+.el-main::-webkit-scrollbar-button {
+	background-color: #4983FB;
+}
+/*滚动条角样式*/
+.el-main::-webkit-scrollbar-corner {
+	background-color: #4983FB;
+}
+/*滚动条上下箭头样式*/
+.el-main::-webkit-scrollbar-arrow {
+	background-color: #4983FB;
+}
+/*滚动条下拉按钮样式*/
+.el-main::-webkit-scrollbar-dropdown {
+	background-color: #4983FB;
+}
+/*滚动条滑块被点击时的样式*/
+.el-main::-webkit-scrollbar-thumb:active {
+	background-color: #4983FB;
+}
+/*滚动条滑块被hover时的样式*/
+.el-main::-webkit-scrollbar-thumb:hover {
+	background-color: #4983FB;
+}
+
+// 新改
+.header_ul {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 85px 0 0;
+}
+
+.indexActive {
+  border-bottom: 2px solid #fff;
+}
+
+#tree {
+  margin: 15px 0 0 0;
+  div {
+    background: #474e60;
+  }
+  /deep/.el-tree-node__content{
+    background: transparent;
+  }
+  /deep/.is-current{
+    color: white;
+  }
+}
+
+.el-tree {
+  // color: #fff !important;
+  // color: #8c8989 !important;
+}
+.el-tree-node__content:hover {
+  background-color: #55575a !important;
+}
+
+// 右键信息
+#menuList {
+  height: 40px;
+  width: 80px;
+  position: absolute;
+  border-radius: 10px;
+  border: 1px solid #d8d6d6;
+  background-color: #fff;
+  z-index: 1;
+  .menu_item {
+    line-height: 20px;
+    text-align: center;
+    margin-top: 10px;
+    cursor: pointer;
+  }
+  li:hover {
+    background-color: #14a478;
+    color: white;
+  }
+  li {
+    font-size: 15px;
+  }
+}
+</style>

src/components/Login.vue

@@ -0,0 +1,263 @@
+<template>
+	<div class="login_container">
+		<div class="login_box">
+			<div class="tit-box">
+				<div class="tit-con">
+					<p class="txt">
+						欢迎来到
+						<span class="arrow">
+							<i class="el-icon-arrow-right"></i>
+						</span>
+					</p>
+					<p class="tit">智慧农业大数据平台</p>
+				</div>
+			</div>
+			<div class="f-box">
+				<ul class="loginItems">
+					<li>
+						<i class="iconfont icon-yonghu1"></i>
+						<input
+							type="text"
+							@keyup="fillPass()"
+							id="username"
+							v-model="username"
+							placeholder="请输入用户名"
+						/>
+					</li>
+					<li>
+						<i class="iconfont icon-mima1"></i>
+						<input
+							type="password"
+							id="password"
+							v-model="pass"
+							placeholder="请输入密码"
+						/>
+					</li>
+					<li>
+						<div class="pass">
+							<input type="checkbox" id="brand" v-model="cState" />
+							<label for="brand">
+								<span>
+									<i class="el-icon-check"></i>
+								</span>
+								记住密码
+							</label>
+							<a>忘记密码？</a>
+						</div>
+					</li>
+					<li>
+						<button class="logon-btn" @click="submit()">登录</button>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			username: '',
+			pass: '',
+			cState: true
+		}
+	},
+	methods: {
+		submit() {
+			if (this.username == '' || this.pass == '') {
+				this.$message.error('请输入用户名和密码！')
+				return
+			}
+			this.$axios({
+				method: 'POST',
+				url: '/api/login',
+				data: this.qs.stringify({
+					username: this.username,
+					password: this.pass
+				})
+			}).then((res) => {
+				if (res.data.message == '') {
+					if (this.cState == true) {
+						//是否记住密码
+						localStorage.setItem('username', this.username)
+						localStorage.setItem('password', this.pass)
+					} else {
+						localStorage.removeItem(username, password)
+					}
+					localStorage.setItem('isLogin', true)
+					let selHome = sessionStorage.getItem('selHome')
+					if (selHome) {
+						this.$router.push(selHome) //登录后默认选择首页
+					} else {
+						this.$router.push('/index/home')
+					}
+				} else {
+					this.$message.error(res.data.message)
+				}
+			})
+		},
+		fillPass() {
+			let username = localStorage.getItem('username')
+			if (username == this.username) {
+				this.pass = localStorage.getItem('password')
+			}
+		}
+	}
+}
+</script>
+
+<style lang='less' scoped>
+.login_container {
+	height: 100%;
+	// background: url(../../static/images/login/1.gif) no-repeat center;
+	background-size: 100% 100%;
+	.login_box {
+		width: 900px;
+		height: 450px;
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		.tit-box {
+			position: relative;
+			flex: 1;
+			background: rgba(0, 0, 0, 0.6);
+			color: #fff;
+			letter-spacing: 5px;
+			.tit-con {
+				display: block;
+				padding: 180px 50px;
+				.txt {
+					font-size: 24px;
+					padding-bottom: 15px;
+					border-bottom: 1px solid #fff;
+					position: relative;
+					.arrow {
+						position: absolute;
+						top: 4px;
+						margin-left: 10px;
+						background: #fff;
+						width: 25px;
+						height: 25px;
+						border-radius: 50%;
+						i {
+							color: #000;
+							font-size: 18px;
+							position: absolute;
+							left: 4px;
+							top: 4px;
+						}
+						i:before {
+							font-weight: 800;
+						}
+					}
+				}
+				.tit {
+					font-size: 32px;
+					padding-top: 10px;
+				}
+			}
+		}
+		.f-box {
+			flex: 1;
+			background: #fff;
+			.loginItems {
+				padding: 80px 50px 0 50px;
+				li {
+					width: 100%;
+					margin-bottom: 45px;
+					position: relative;
+					i.iconfont {
+						position: absolute;
+						font-size: 22px;
+						left: 0;
+						top: 5px;
+						color: #b5b5b5;
+					}
+				}
+				input::-webkit-input-placeholder {
+					/* WebKit browsers 适配谷歌 */
+					color: #b5b5b5;
+				}
+				input:-moz-placeholder {
+					/* Mozilla Firefox 4 to 18 适配火狐 */
+					color: #b5b5b5;
+				}
+				input::-moz-placeholder {
+					/* Mozilla Firefox 19+ 适配火狐 */
+					color: #b5b5b5;
+				}
+				input:-ms-input-placeholder {
+					/* Internet Explorer 10+  适配ie*/
+					color: #b5b5b5;
+				}
+				input[type='text'],
+				input[type='password'] {
+					border: none;
+					padding: 10px 20px 10px 30px;
+					box-sizing: border-box;
+					border-bottom: 1px solid #b5b5b5;
+					width: 100%;
+					font-size: 15px;
+					outline: none;
+					box-shadow: 0 0 0px 1000px white inset !important;
+					-webkit-box-shadow: 0 0 0px 1000px white inset !important;
+				}
+				input[type='checkbox'] {
+					display: none;
+				}
+				input[type='checkbox'] + label span {
+					display: inline-block;
+					width: 16px;
+					height: 16px;
+					border-radius: 3px;
+					border: 1px solid #b5b5b5;
+					float: left;
+					margin-right: 10px;
+					i {
+						display: none;
+					}
+				}
+				input[type='checkbox']:checked + label span {
+					background: #2f3945;
+					i {
+						display: block;
+						font-size: 15px;
+						color: #fff;
+					}
+					i:before {
+						font-weight: 800;
+					}
+				}
+				.pass {
+					display: flex;
+					justify-content: space-between;
+					font-size: 14px;
+					label {
+						color: #b5b5b5;
+					}
+					a {
+						color: red;
+					}
+				}
+				button {
+					width: 100%;
+					border: none;
+					background: #3d4c5a;
+					border-radius: 30px;
+					color: #fff;
+					line-height: 40px;
+					height: 40px;
+					cursor: pointer;
+					outline: none;
+				}
+				button:hover {
+					background: #4b647b;
+				}
+			}
+		}
+	}
+}
+</style>

src/components/UserManger.vue

@@ -0,0 +1,822 @@
+<template>
+  <div>
+    <el-breadcrumb
+      separator-class="el-icon-arrow-right"
+      v-show="flag.flag"
+    >
+      <el-breadcrumb-item>{{flag.siteNameTitle}}  用户管理 </el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="search-box">
+      <div class="filter-box">
+        <el-input
+          size="small"
+          placeholder="请输入用户名"
+          @change="checkList()"
+          clearable
+          v-model="username"
+        >
+          <i slot="suffix" class="el-input__icon el-icon-search"></i>
+        </el-input>
+      </div>
+      <div v-if="have_type == 0 || staff == 1 || have_type == 2" @click="addUserFun()" style="background: #E5E7FF;border-radius: 5px;color: #5361FF;line-height: 32px;font-size: 12px;padding: 0 10px;margin-left: 15px;cursor: pointer;">
+					添加新用户
+			</div>
+      <!-- <el-button
+        v-if="have_type == 0 || staff == 1 || have_type == 2"
+        type="success"
+        @click="addUserFun"
+        size="mini"
+        >添加新用户</el-button
+      > -->
+    </div>
+    <el-row :gutter="10">
+      <el-col
+        :xs="24"
+				:sm="24"
+				:md="12"
+				:lg="6"
+				:xl="6"
+        v-for="item in userList"
+        :key="item.uid"
+      >
+        <el-card class="box-card">
+          <!-- <div class="img-box">
+            <img src="@/assets/images/systemManger/user.png" />
+            <p :title="item.username">{{ item.username | ellipsis }}</p>
+          </div> -->
+          <div class="img-box">
+						<img style="width: 60px;height: 60px;margin-right: 15px;" src="@/assets/images/systemManger/user.png" />
+						<div>
+							<div style="font-size: 20px;margin-bottom: 5px;">{{(item.user_have || '无') | ellipsis}}</div>
+							<span v-if="item.user_have_type == '1'">普通用户</span>
+							<span v-if="item.user_have_type == '0'">模块管理员</span>
+							<span v-if="item.user_have_type == '2'">项目管理员</span>
+						</div>
+						<div style="flex: 1;text-align: right;font-size: 20px;position: relative;top: -15px;white-space: nowrap;">
+							<i title="用户编辑" class="el-icon-edit-outline" style="cursor: pointer;" @click="edit(item)"></i>
+
+							<span v-if="
+								(have_type == 0 || staff == 1 || have_type == 2) &&
+								currusername != item.username
+							">
+								<i title="删除用户" v-if="item.user_have_type == '1' || item.user_have_type == '2'" class="el-icon-delete" style="cursor: pointer;" @click="delUser(item.id, item.username)"></i>
+								<i title="分配设备" v-if="item.user_have_type == '1' || item.user_have_type == '2'" class="el-icon-s-grid" style="cursor: pointer;" @click="allotEquip(item.id, item.username)"></i>
+							</span>
+							
+
+							<i title="重置密码" class="el-icon-refresh-left" style="cursor: pointer;" @click="resetPassword(item.id, item.username)"></i>
+						</div>
+					</div>
+          <div class="detail">
+            <p>
+              <i><img src="@/assets/images/systemManger/mklx.png" /></i>
+              模块类型:
+              <span v-if="item.user_type == '1'">农业植保监测系统</span>
+							<span v-if="item.user_type == '2'">农业气象监测系统</span>
+							<span v-if="item.user_type == '3'">环境灾害预警系统</span>
+							<span v-if="item.user_type == '4'">农产品溯源系统</span>
+							<span v-if="item.user_type == '5'">可视农业应用系统</span>
+							<span v-if="item.user_type == '6'">苗情监测应用系统</span>
+            </p>
+            <!-- <p>
+              用户类型
+              <span v-if="item.user_have_type == '1'">普通用户</span>
+              <span v-if="item.user_have_type == '0'">模块管理员</span>
+              <span v-if="item.user_have_type == '2'">项目管理员</span>
+            </p>
+            <p>
+              适配用户
+              <span>{{ item.user_have || "无" }}</span>
+            </p> -->
+            <p :title="item.site_name">
+              <i><img src="@/assets/images/systemManger/zdmc.png" /></i>
+              站点名称:
+              <span>{{ (item.site_name || "无") | ellipsis }}</span>
+            </p>
+            <p>
+              <i><img src="@/assets/images/systemManger/zddz.png" /></i>
+              站点地址:
+              <span
+                >{{ item.site_pro }} {{ item.site_city }}{{ item.site_area }}</span
+              >
+            </p>
+            <p>
+              <i><img src="@/assets/images/systemManger/bt.png" /></i>
+              系统标题:
+              <span>{{ (item.user_header || "--") | ellipsis }}</span>
+            </p>
+            <p style="line-height: 20px;font-size: 14px;margin-left: 11px;">
+							
+							LO<br>
+							GO:
+							
+							<span
+								><img style="width: 46px; height: 32px" :src="item.logo" alt=""
+							/></span>
+						</p>
+          </div>
+          <!-- <div class="btn">
+            <el-button size="small" type="success" @click="edit(item)" plain
+              >用户编辑</el-button
+            >
+            <template
+              v-if="
+                (have_type == 0 || staff == 1 || have_type == 2) &&
+                currusername != item.username
+              "
+            >
+              <el-button
+                size="small"
+                v-if="item.user_have_type == '1' || item.user_have_type == '2'"
+                type="success"
+                @click="allotEquip(item.id, item.username)"
+                plain
+                >分配设备</el-button
+              >
+              <el-button
+                size="small"
+                v-if="item.user_have_type == '1' || item.user_have_type == '2'"
+                type="success"
+                @click="delUser(item.id, item.username)"
+                plain
+                >删除用户</el-button
+              >
+            </template>
+            <el-button
+              type="success"
+              size="small"
+              @click="resetPassword(item.id, item.username)"
+              plain
+              >重置密码</el-button
+            >
+          </div> -->
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 暂无数据 -->
+    <div class="expertDiagnosis_referral_units_not" v-if="userList.length <= 0">
+      <img
+        src="@/assets/images/monitor/zanwu.png"
+        alt
+        class="expertDiagnosis_referral_units_notImg"
+      />
+    </div>
+    <el-pagination
+      v-if="userList.length > 0"
+      background
+      :page-size="8"
+      layout="prev, pager, next"
+      :current-page="page"
+      :total="totalNum"
+      @current-change="changePage"
+    ></el-pagination>
+    <!-- 重置密码 -->
+    <el-dialog
+      title="重置密码"
+      :visible.sync="resetPassDialogVisible"
+      width="30%"
+      @close="resetPassDialogClosed"
+    >
+      <el-form
+        ref="resetPassFormRef"
+        :model="resetPassForm"
+        label-width="110px"
+        :rules="resetPassFormRules"
+      >
+        <el-form-item label="用户名 : " prop="username">
+          <el-input
+            type="text"
+            disabled
+            v-model="resetPassForm.username"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="新密码 : " prop="pass">
+          <el-input type="password" v-model="resetPassForm.pass"></el-input>
+        </el-form-item>
+        <el-form-item label="确认新密码 : " prop="checkPass">
+          <el-input
+            type="password"
+            v-model="resetPassForm.checkPass"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="resetPassDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="resetPassSubm">确认</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 用户编辑 -->
+    <el-dialog
+      title="用户信息编辑"
+      :visible.sync="editUserDialogVisible"
+      width="500px"
+      @close="editUserDialogClosed"
+    >
+      <el-form ref="editUserFormRef" :model="editUserForm" label-width="80px">
+        <el-form-item label="用户名 : ">
+          <el-input v-model="editUserForm.username" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="系统标题 : ">
+          <el-input
+            maxlength="11"
+            v-model="editUserForm.user_header"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="logo : ">
+          <el-upload
+            class="avatar-uploader"
+            action
+            :auto-upload="false"
+            :show-file-list="false"
+            :on-change="changeUpload"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img
+              v-if="editUserForm.logo"
+              :src="editUserForm.logo"
+              class="avatar"
+            />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="站点名称 : ">
+          <!-- <el-input maxlength="16" v-model="editUserForm.site_name"></el-input> -->
+          <el-select
+						v-model="editUserForm.site_name"
+						clearable
+						placeholder="请选择"
+					>
+						<el-option
+							v-for="item in siteNameList"
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+						>
+						</el-option>
+					</el-select>
+        </el-form-item>
+        <el-form-item label="站点位置 : ">
+          <div class="block">
+            <el-cascader
+              placeholder="搜索：河南"
+              v-model="cityValue"
+              :options="cityData"
+              :props="props"
+              @change="handleChange"
+              filterable
+              :disabled="true"
+            >
+            </el-cascader>
+          </div>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="editUserDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="editUserSubm">确认</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import cityData from "./citydata.js";
+export default {
+  props: {
+		flag: {
+		type: Object,
+		default: () => {},
+		},
+	},
+  filters: {
+		ellipsis(value) {
+			if (!value) return ''
+			if (value.length > 10) {
+				return value.slice(0, 10) + '...'
+			}
+			return value
+		}
+	},
+  data() {
+    var checkMobile = (rule, value, callback) => {
+      const regMobile = /^1\d{10}$/;
+      if (regMobile.test(value)) {
+        callback();
+      } else {
+        // 返回一个错误提示
+        callback(new Error("请输入合法的手机号码"));
+      }
+    };
+    var validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入新密码"));
+      } else {
+        if (this.resetPassForm.checkPass !== "") {
+          this.$refs.resetPassFormRef.validateField("checkPass");
+        }
+        callback();
+      }
+    };
+    var validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.resetPassForm.pass) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      zanwu: "/images/expertDiagnosis/zanwu.png",
+      role: "", //筛选项 角色类型
+      userTypeCheck: "", //筛选项 用户类型
+      username: "", //筛选项
+      roleList: [],
+      page: 1,
+      userList: [],
+      userGroupList: [],
+      totalNum: 0,
+      //省市县
+      areaList: [],
+      resetPassDialogVisible: false,
+      addUserDialogVisible: false,
+      editUserDialogVisible: false,
+      resetPassForm: {
+        username: "",
+        uid: "",
+        pass: "",
+        checkPass: "",
+      },
+      addUserForm: {
+        username: "",
+        mobile: "",
+        pass: "",
+        role_id: "",
+        user_type: "",
+        pcd: "",
+        user_area: "",
+        cs_user: false, //1为普通用户
+        user_group_id: "", //用户组id
+      },
+      cityData,
+      cityValue: [],
+      props: {
+        expandTrigger: "hover",
+        value: "value",
+      },
+      editUserForm: {},
+      //控制省/市/区显示
+      editIsShow: false,
+      //添加用户规则
+      addUserFormRules: {
+        username: [
+          { required: true, message: "请填写用户名", trigger: "blur" },
+        ],
+        mobile: [
+          { required: true, trigger: "blur", message: "手机号不能为空" },
+          { validator: checkMobile, trigger: "blur" },
+        ],
+        pass: [{ required: true, message: "请填写用户密码", trigger: "blur" }],
+      },
+      //重置密码格规则
+      resetPassFormRules: {
+        pass: [
+          { validator: validatePass, trigger: "blur" },
+          { required: true, message: "请填写新密码", trigger: "blur" },
+        ],
+        checkPass: [
+          { validator: validatePass2, trigger: "blur" },
+          { required: true, message: "请确认新密码", trigger: "blur" },
+        ],
+      },
+      have_type: "",
+      staff: "",
+      currusername: "",
+      siteNameList: [] // 站点列表
+    };
+  },
+  computed: {
+    //获取用户类型
+    userType: function () {
+      return window.sessionStorage.getItem("myuser_type");
+    },
+  },
+  mounted() {
+    this.getList();
+    this.have_type = localStorage.getItem("have_type"); // 0管理员  1用户
+    this.staff = localStorage.getItem("staff"); // 1是admin
+    this.currusername = localStorage.getItem("username"); // 1是admin
+
+    // 获取站点列表数据
+		this.facilityList()
+  },
+  methods: {
+    getList() {
+      this.$axios({
+        method: "POST",
+        url: "user_list",
+        data: this.qs.stringify({
+          typelist: 5,
+          page: this.page,
+          uname: this.username,
+          page_size: 8,
+        }),
+      }).then((res) => {
+        this.userList = res.data.userlist;
+        this.totalNum = res.data.nums;
+      });
+    },
+    // 编辑用户信息
+    edit(role) {
+      this.editUserForm = JSON.parse(JSON.stringify(role));
+      this.editUserDialogVisible = true;
+
+      if (this.editUserForm.site_pro == '') {
+				this.cityValue = [
+					this.editUserForm.site_city,
+					this.editUserForm.site_area
+				]
+			} else {
+				this.cityValue = [
+					this.editUserForm.site_pro,
+					this.editUserForm.site_city,
+					this.editUserForm.site_area
+				]
+			}
+
+      // this.cityValue = [
+      //   this.editUserForm.user_pro,
+      //   this.editUserForm.user_city,
+      //   this.editUserForm.user_area,
+      // ];
+    },
+    beforeAvatarUpload(file) {
+      console.log(file);
+      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 和 PNG格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
+    changeUpload(file, fileList) {
+      var form = new FormData();
+      form.append("img_file", file.raw);
+      this.$axios({
+        method: "POST",
+        url: "base_photo",
+        data: form,
+      }).then((res) => {
+        this.editUserForm.logo = res.data.src;
+      });
+    },
+    handleChange(value) {
+      console.log(value);
+      console.log(this.cityValue);
+      this.editUserForm.user_pro = value[0];
+      this.editUserForm.user_city = value[1];
+      if (value[2]) {
+        this.editUserForm.user_area = value[2];
+      } else {
+        this.editUserForm.user_city = value[0].substring(
+          0,
+          value[0].length - 1
+        );
+        this.editUserForm.user_area = value[1];
+      }
+    },
+    // 分配设备
+    allotEquip(id, name) {
+      window.location.href = "allot?uname=" + name;
+    },
+    // 删除普通用户
+    delUser(id, name) {
+      this.$confirm("删除用户, 是否继续?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$axios({
+            method: "POST",
+            url: "del_user",
+            data: this.qs.stringify({
+              userid: id,
+            }),
+          }).then((res) => {
+            if (res.data == 1) {
+              this.getList();
+            } else {
+              this.$message({
+                type: "error",
+                message: res.data,
+              });
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    //密码重置
+    resetPassword(id, name) {
+      this.resetPassForm.id = id;
+      this.resetPassForm.username = name;
+      this.resetPassDialogVisible = true;
+    },
+    resetPassSubm() {
+      //暂时不用
+      this.$refs.resetPassFormRef.validate((valid) => {
+        if (!valid) return;
+        this.$axios({
+          method: "POST",
+          url: "systemmanage_user_list",
+          data: this.qs.stringify({
+            id: this.resetPassForm.id,
+            req: "resetpwd",
+            userName: this.editUserForm.username,
+            userpassWord: this.resetPassForm.pass,
+            userRePassWord: this.resetPassForm.pass,
+          }),
+        }).then((res) => {
+          if (res.data == 0) {
+            this.$message.success("修改密码成功");
+            this.resetPassDialogVisible = false;
+          } else {
+            this.$message.error(res.data.message);
+          }
+        });
+      });
+    },
+    //监听重置密码对话框的关闭事件
+    resetPassDialogClosed() {
+      this.$refs.resetPassFormRef.resetFields();
+    },
+    changePage(value) {
+      this.page = value;
+      this.getList();
+    },
+    //添加用户
+    addUser() {
+      this.addUserDialogVisible = true;
+    },
+    //添加用户提交
+    addUserSubm() {
+      this.$refs.addUserFormRef.validate((valid) => {
+        if (!valid) return;
+        let cs_user = this.addUserForm.cs_user ? "1" : "";
+        this.$axios({
+          method: "POST",
+          url: "api_gateway?method=user.login.regiest",
+          data: this.qs.stringify({
+            username: this.addUserForm.username,
+            mobile: this.addUserForm.mobile,
+            password: this.addUserForm.pass,
+            role_id: this.addUserForm.role_id,
+            user_type: this.addUserForm.user_type,
+            pcd: this.addUserForm.pcd,
+            user_area: this.addUserForm.user_area,
+            user_group_id: this.addUserForm.user_group_id,
+            cs_user,
+          }),
+        }).then((res) => {
+          if (res.data.message == "") {
+            this.$message.success("添加用户成功！");
+            this.addUserDialogVisible = false;
+            this.getList();
+          } else {
+            this.$message.error(res.data.message);
+          }
+        });
+      });
+    },
+    addUserDialogClosed() {
+      this.$refs.addUserFormRef.resetFields();
+    },
+    //修改用户信息提交
+    editUserSubm() {
+      console.log(this.editUserForm)
+      this.$refs.editUserFormRef.validate((valid) => {
+        if (!valid) return;
+        this.$axios({
+          method: "POST",
+          url: "user_detail",
+          data: this.qs.stringify(this.editUserForm),
+        }).then((res) => {
+          if (res.data == 1) {
+            this.editUserDialogVisible = false;
+            var curr = localStorage.getItem("username");
+            if (curr == this.editUserForm.username) {
+              window.location.reload();
+            } else {
+              this.getList();
+            }
+          }
+        });
+      });
+    },
+    editUserDialogClosed() {
+      this.$refs.editUserFormRef.resetFields();
+      this.areaList = []; //清空省/市/区
+      this.editIsShow = false;
+    },
+    checkList() {
+      this.page = 1;
+      this.getList();
+    },
+    addUserFun() {
+      window.location.href = "systemmanage_user_add";
+    },
+
+    // 获取站点列表数据
+		facilityList() {
+			this.$axios({
+				method: 'GET',
+				url: '/site_manage'
+			})
+				.then((res) => {
+          console.log(res.data)
+					if (res.data) {
+						var data = res.data
+						var arrList = []
+						var nameList = []
+						var nameListA = []
+						var list = data.forEach((item) => {
+							var objA = {}
+							objA['label'] = item.site_name
+							objA['value'] = item.site_name
+							if (
+								item.self_site_name !== undefined &&
+								item.self_site_name == ''
+							) {
+							} else {
+								if (item.self_site_name == undefined) {
+									if (item.child) {
+										for (var j in item.child) {
+											var obj = {}
+                        obj['label'] = item.child[j].site_name
+											  obj['value'] = item.child[j].site_name
+                        // console.log(obj)
+											if (
+												item.child[j].child &&
+												item.child[j].child.length == 0
+											) {
+											} else if (
+												item.child[j].child &&
+												item.child[j].child.length !== 0
+											) {
+												for (var k in item.child[j].child) {
+                          var objB = {}
+
+                          objB['label'] = item.child[j].child[k].site_name
+													objB['value'] = item.child[j].child[k].site_name
+                          nameListA.push(objB)
+												}
+											}
+											arrList.push(obj)
+										}
+									}
+								} else if (item.self_site_name !== undefined) {
+								}
+							}
+							nameList.push(objA)
+						})
+						this.siteNameList = [...nameList, ...arrList, ...nameListA]
+					}
+				})
+				.catch((err) => {
+					console.log(err)
+				})
+		}
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.search-box {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+  .filter-box > div {
+    margin-right: 15px;
+  }
+  .el-input {
+    width: 200px;
+  }
+  .el-date-editor--daterange {
+    width: 222px;
+  }
+  /deep/.el-input__inner{
+    background-color: #E5E7FF;
+    border: none;
+    color: #5361FF;
+  }
+  /deep/.el-input__inner::placeholder{
+    color: #5361FF;
+  }
+  /deep/.el-input__inner::-moz-placeholder{
+    color: #5361FF;
+  }
+  /deep/.el-input__inner::-webkit-input-placeholder{
+    color: #5361FF;
+  }
+  /deep/.el-input__inner::-ms-input-placeholder{
+    color: #5361FF;
+  }
+  /deep/.el-input__icon{
+    color: #5361FF;
+  }
+}
+.el-card {
+  .img-box {
+    display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		color: #352780;
+		font-size: 14px;
+		p {
+			font-size: 14px;
+			font-weight: 800;
+			margin-top: 10px;
+		}
+  }
+  .detail {
+    // border-bottom: 1px solid #e1e1e1;
+    // padding: 10px 0;
+    // padding: 0 20px;
+    p {
+      display: flex;
+      justify-content: flex-start;
+      font-size: 18px;
+      line-height: 40px;
+      color: #352780;
+      margin-top: 20px;
+      white-space: nowrap;
+      align-items: center;
+      i{
+				width: 40px;
+				height: 40px;
+				min-width: 40px;
+				margin-right: 10px;
+				background: rgba(72,68,219,.2);
+				border-radius: 50%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				img{
+					width: 24px;
+				}
+			}
+      span{
+        font-size: 14px;
+        margin-left: 10px;
+        white-space: break-spaces;
+        word-break: break-all;
+        line-height: 20px;
+      }
+    }
+  }
+  .btn {
+    text-align: center;
+    padding: 20px 10px;
+    display: flex;
+    justify-content: space-around;
+    button {
+      // flex: 1;
+      margin: 0 8px;
+      border: 1px solid #17bb89;
+      color: #17bb89;
+      // border-radius: 4px;
+      // font-size: 12px;
+      // padding: 5px 5px;
+      background: #fff;
+      cursor: pointer;
+      i {
+        font-size: 12px;
+        margin-right: 2px;
+      }
+    }
+    button:hover {
+      background: #fff;
+      border: 1px solid #47d9ad;
+      color: #47d9ad;
+    }
+  }
+}
+.el-card.box-card{
+	box-shadow: 0px 0px 36px 0px rgba(72,68,219,0.19);
+	border-radius: 12px;
+	word-break: break-all;
+}
+// 暂无数据
+.expertDiagnosis_referral_units_not {
+  width: 272px;
+  margin: 0 auto;
+}
+</style>

src/main.js

@@ -0,0 +1,45 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import App from './App'
+import router from './router'
+
+import axios from 'axios'
+Vue.prototype.$axios = axios //全局注册，使用方法为:this.$axios
+
+// 图片裁剪
+import VueCropper from 'vue-cropper'
+Vue.use(VueCropper)
+
+import qs from 'qs'
+Vue.prototype.qs = qs //全局注册，使用方法为:this.qs
+
+Vue.use(ElementUI);
+import './assets/css/global.css'
+
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+// axios.defaults.timeout = 30000;
+// axios.defaults.baseURL = 'http://39.106.113.84:8000/' //线下杨明明
+// axios.defaults.withCredentials = true //axios请求时携带session
+// axios.defaults.crossDomain = true 
+
+Vue.config.productionTip = false
+
+import 'babel-polyfill' //兼容IE11
+require("babel-polyfill")
+
+import promise from 'es6-promise'
+promise.polyfill();
+
+
+import './assets/icon/iconfont.css'
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

src/pages/EquipList.vue

@@ -0,0 +1,316 @@
+<template>
+  <div style="cursor: default">
+	<el-breadcrumb
+		separator-class="el-icon-arrow-right"
+		v-show="flag.flag"
+	>
+		<el-breadcrumb-item>{{flag.siteNameTitle}}  设备列表 </el-breadcrumb-item>
+	</el-breadcrumb>
+    <div class="search-box">
+      <el-input
+        style="cursor: pointer"
+        size="small"
+        clearable
+        @change="searchChange()"
+        placeholder="请输入设备ID"
+        v-model="queryInfo.f_id"
+      >
+        <i slot="suffix" class="el-input__icon el-icon-search"></i>
+      </el-input>
+    </div>
+    <el-row :gutter="10" v-if="dataList.length > 0">
+      <el-col
+	  	:xs="24"
+		:sm="12"
+		:md="8"
+		:lg="8"
+		:xl="4"
+        v-for="item in dataList"
+        :key="item.id"
+      >
+        <el-card class="box-card">
+          <div class="detail">
+			<p>
+				<span style="display: inline-block;
+					width: 10px;
+					height: 10px;
+					background: #52459F;
+					border-radius: 50%;
+					margin-right: 15px;">
+				</span>
+				{{ (item.device_name || "可视农业设备") | ellipsis }}</p>
+            <p>
+				<img src="../assets/images/cardicon/sbid.png" />
+              设备ID:
+              <span>{{ item.device_id }}</span>
+            </p>
+            <p>
+				<img src="../assets/images/cardicon/zxzt.png" />
+              	在线状态:
+              <span :class="item.status == 0 ? 'red' : 'green'">{{
+                item.status == 1 ? "在线" : "离线"
+              }}</span>
+            </p>
+            <p>
+				<img src="../assets/images/cardicon/yxgh.png" />
+              通道:
+              <span>{{ item.jktype }}</span>
+            </p>
+          </div>
+		  <div class="btns" style="padding-top:10px;">
+			<el-button
+				size="mini"
+				type="info"
+				@click="modifyName(item.device_id, item.device_name)"
+				>修改名称</el-button
+			>
+			
+		</div>
+          <!-- <div class="bottom">
+            <span @click="modifyName(item.device_id, item.device_name)">
+              <i class="el-icon-edit-outline"></i> 修改名称
+            </span>
+          </div> -->
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 暂无数据 -->
+    <div class="expertDiagnosis_referral_units_not" v-else>
+      <img :src="zanwu" alt class="expertDiagnosis_referral_units_notImg" />
+    </div>
+    <el-pagination
+      v-if="dataList.length > 0"
+      background
+      layout="prev, pager, next"
+      :page-size="12"
+      :total="totalNum"
+      @current-change="changePage"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+	props: {
+		flag: {
+		type: Object,
+		default: () => {},
+		},
+	},
+  filters: {
+		ellipsis(value) {
+			if (!value) return ''
+			if (value.length > 10) {
+				return value.slice(0, 10) + '...'
+			}
+			return value
+		}
+	},
+  data() {
+    return {
+      zanwu: require("@/assets/images/monitor/zanwu.png"),
+      queryInfo: {
+        f_id: "",
+        page: 1,
+      },
+      dataList: [],
+      totalNum: 0,
+      device_id: "",
+    };
+  },
+  created() {
+    this.getList();
+  },
+  beforeMount() {},
+  methods: {
+    //获取设备列表
+    getList(obj, page) {
+      if (obj) {
+        console.log(obj);
+        this.queryInfo.page = page;
+        this.objData = obj;
+      }
+
+      var id = "";
+      if (this.objData !== undefined) {
+        id = this.objData.id;
+      } else if (obj !== undefined) {
+        id = obj.id;
+      }
+      this.$axios({
+        method: "POST",
+        url: "list_camera",
+        data: this.qs.stringify({
+          f_id: this.queryInfo.f_id,
+          page: this.queryInfo.page,
+          equip_type: 2,
+          site_id: id
+        }),
+      }).then((res) => {
+        if (res.data.data) {
+          this.dataList = res.data.data;
+          this.totalNum = res.data.counts;
+        }
+      });
+    },
+    searchChange() {
+      this.queryInfo.page = 1;
+      this.getList();
+    },
+    // 修改设备名称
+    modifyName(id, device_name) {
+      let value = device_name;
+      this.$prompt("", "修改名字", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputPlaceholder: device_name,
+      })
+        .then(({ value }) => {
+          if (value) {
+            this.$axios({
+              method: "POST",
+              url: "equiplist",
+              data: this.qs.stringify({
+                req: "rename",
+                eid: id,
+                ename: value,
+              }),
+            }).then((res) => {
+              if (res.data == 0) {
+                this.getList();
+                this.$message({
+                  type: "success",
+                  message: "修改成功",
+                });
+              }
+            });
+          } else {
+            this.$message({
+              type: "info",
+              message: "内容不能为空",
+            });
+          }
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消输入",
+          });
+        });
+    },
+    changePage(val) {
+      this.queryInfo.page = val;
+      this.getList();
+    },
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.red {
+  color: red;
+}
+.green {
+  color: #5aae22;
+}
+.search-box {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+  .el-input {
+    width: 200px;
+	/deep/.el-input__inner{
+		height: 35px;
+		border-radius: 5px;
+		border: none;
+		background: #E5E7FF;
+		color: #5361FF;
+	}
+	/deep/.el-input__icon{
+		color: #5361FF;
+	}
+	/deep/.el-input__inner::placeholder{
+		color: #5361FF;
+	}
+	/deep/.el-input__inner::-moz-placeholder{
+		color: #5361FF;
+	}
+	/deep/.el-input__inner::-webkit-input-placeholder{
+		color: #5361FF;
+	}
+	/deep/.el-input__inner::-ms-input-placeholder{
+		color: #5361FF;
+	}
+  }
+}
+.box-card{
+	box-shadow: 0px 0px 36px 0px rgba(72,68,219,0.19);
+	border-radius: 14px;
+	background: url(../assets/images/cardBG.png) no-repeat right bottom;
+	background-size: 150px;
+}
+.el-card {
+	/deep/.el-card__body{
+		padding: 15px 15px;
+		box-sizing: border-box;
+	}
+  .img-box {
+    text-align: center;
+    border-bottom: 1px solid #e1e1e1;
+    padding: 20px 0;
+    img {
+      height: 55px;
+    }
+    p {
+      font-size: 14px;
+      font-weight: 800;
+      margin-top: 10px;
+    }
+  }
+  .detail {
+    // border-bottom: 1px solid #e1e1e1;
+    // padding: 10px 0;
+    // padding: 0 20px;
+    p {
+      display: flex;
+      justify-content: flex-start;
+	  align-items: center;
+      font-size: 14px;
+      line-height: 34px;
+      color: #464B5A;
+	  img{
+		width: 14px;
+		height: 14px;
+		position: relative;
+		top: 2px;
+		margin-right: 10px;
+	  }
+    }
+  }
+  .bottom {
+    font-size: 13px;
+    color: #666;
+    line-height: 50px;
+    text-align: center;
+    span {
+      cursor: pointer;
+      i {
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+// 暂无数据
+.expertDiagnosis_referral_units_not {
+  width: 272px;
+  margin: 0 auto;
+}
+
+.el-row {
+}
+.el-pagination {
+  padding: 20px;
+  text-align: center;
+}
+</style>

src/pages/addList.vue

@@ -0,0 +1,452 @@
+<template>
+  <div style="cursor: default; margin: 43px 0 0 0">
+    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>设备管理</el-breadcrumb-item>
+      <el-breadcrumb-item>分配设备</el-breadcrumb-item>
+    </el-breadcrumb> -->
+
+    <el-breadcrumb
+      separator-class="el-icon-arrow-right"
+      :class="
+        'el-icon-arrow-right ' + (flag.flag == false ? 'breadcrumb_tab' : '')
+      "
+    >
+      <el-breadcrumb-item :to="{ path: '/index/monitor1' }"
+        >可视化监控</el-breadcrumb-item
+      >
+      <el-breadcrumb-item>监控设备列表</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="search-box">
+      <div class="filter-box">
+        <!-- <el-select
+          size="small"
+          v-model="type"
+          @change="equipCheck()"
+          clearable
+          placeholder="请选择设备类型"
+        >
+          <el-option
+            v-for="item in typelist"
+            :key="item.id"
+            :label="item.type_name"
+            :value="item.id"
+          ></el-option>
+        </el-select> -->
+        <el-input
+          style="cursor: pointer"
+          size="small"
+          clearable
+          placeholder="请输入设备ID"
+          @change="equipCheck()"
+          v-model="equipId"
+        >
+          <i slot="suffix" class="el-input__icon el-icon-search"></i>
+        </el-input>
+        <!-- <el-date-picker
+          style="cursor: pointer"
+          size="small"
+          v-model="timeRange"
+          @change="DateChange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker> -->
+      </div>
+      <div>
+        <el-button type="primary" @click="allSel" size="mini">{{
+          text
+        }}</el-button>
+        <el-button type="primary" @click="distSubm" size="mini"
+          >确定分配</el-button
+        >
+      </div>
+    </div>
+    <el-row :gutter="10">
+      <el-col
+        :xs="24"
+        :sm="24"
+        :md="12"
+        :lg="6"
+        :xl="4"
+        v-for="(item, index) in dataList"
+        :key="index"
+      >
+        <el-card
+          @click.native="itemFun(item)"
+          :class="['box-card', item.checked ? 'selected' : '']"
+        >
+          <el-checkbox
+            :ref="'checkboxRef'"
+            v-model="item.checked"
+            @click.native="stopDefault($event)"
+          ></el-checkbox>
+          <div class="img-box">
+            <template>
+              <img
+                src="
+                  http://www.hnyfwlw.com:8006/bigdata_pc/equipdistribute/6.png
+                "
+              />
+            </template>
+            <p>{{ item.equip_id }}</p>
+          </div>
+
+          <div class="detail">
+            <p :title="item.device_name">
+              设备名称
+              <span>{{ (item.device_name || "无") | ellipsis }}</span>
+            </p>
+            <p>
+              设备类型
+              <span>监控</span>
+            </p>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 暂无数据 -->
+    <div class="expertDiagnosis_referral_units_not" v-if="dataList.length <= 0">
+      <img
+        src="../../static/zanwu.png"
+        alt
+        class="expertDiagnosis_referral_units_notImg"
+        style="margin: 0 0 0 40%;"
+      />
+    </div>
+    <div class="userTip">
+      *注：以上所选设备分配给地块：{{ plotData.plot_name }}
+    </div>
+    <el-pagination
+      v-if="dataList.length > 0"
+      background
+      :page-size="12"
+      layout="prev, pager, next"
+      :current-page="page"
+      :total="totalNum"
+      @current-change="changePage"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    flag: {
+      flag: Boolean,
+      siteID: Number,
+    },
+  },
+  filters: {
+    ellipsis(value) {
+      if (!value) return "";
+      if (value.length > 10) {
+        return value.slice(0, 10) + "...";
+      }
+      return value;
+    },
+  },
+  data() {
+    return {
+      //   uid: this.$route.params.id,
+      timeRange: "",
+      equipId: "",
+      begin: "",
+      end: "",
+      type: "",
+      dataList: [
+        // {
+        //   device_id: "863488051768862",
+        //   d_id: 3496,
+        //   device_user: 248,
+        //   device_type_id: 2,
+        //   device_name: "杀虫灯",
+        //   creat_time: 1631520530,
+        //   device_location: "内蒙古自治区乌海市乌达区",
+        // },
+        // {
+        //   device_id: "863488051768854",
+        //   d_id: 2576,
+        //   device_user: 248,
+        //   device_type_id: 2,
+        //   device_name: "杀虫灯",
+        //   creat_time: 1628642269,
+        //   device_location: "内蒙古自治区乌海市乌达区",
+        // },
+        // {
+        //   device_id: "863488051788209",
+        //   d_id: 2568,
+        //   device_user: 248,
+        //   device_type_id: 2,
+        //   device_name: "杀虫灯",
+        //   creat_time: 1628589756,
+        //   device_location: "内蒙古自治区乌海市乌达区",
+        // },
+        // {
+        //   device_id: "863488050791832",
+        //   d_id: 2543,
+        //   device_user: 248,
+        //   device_type_id: 2,
+        //   device_name: "杀虫灯",
+        //   creat_time: 1628556791,
+        //   device_location: "内蒙古自治区乌海市乌达区",
+        // },
+        // {
+        //   device_id: "863488050813255",
+        //   d_id: 2519,
+        //   device_user: 248,
+        //   device_type_id: 2,
+        //   device_name: "杀虫灯",
+        //   creat_time: 1628497598,
+        //   device_location: "内蒙古自治区乌海市乌达区",
+        // },
+        // {
+        //   device_id: "860675044919049",
+        //   d_id: 2893,
+        //   device_user: 0,
+        //   device_type_id: 15,
+        //   device_name: "",
+        //   creat_time: 0,
+        //   device_location: "",
+        // },
+        // {
+        //   device_id: "868626048758018",
+        //   d_id: 3018,
+        //   device_user: 0,
+        //   device_type_id: 15,
+        //   device_name: "",
+        //   creat_time: 0,
+        //   device_location: "",
+        // },
+        // {
+        //   device_id: "868626048828316",
+        //   d_id: 3019,
+        //   device_user: 0,
+        //   device_type_id: 15,
+        //   device_name: "",
+        //   creat_time: 0,
+        //   device_location: "",
+        // },
+        // {
+        //   device_id: "867435059487181",
+        //   d_id: 2980,
+        //   device_user: 0,
+        //   device_type_id: 14,
+        //   device_name: "色诱测报灯",
+        //   creat_time: 1630296976,
+        //   device_location: "",
+        // },
+        // {
+        //   device_id: "03832004",
+        //   d_id: 4069,
+        //   device_user: 0,
+        //   device_type_id: 10,
+        //   device_name: "",
+        //   creat_time: 1632900214,
+        //   device_location: "河南省郑州市金水区",
+        // },
+        // {
+        //   device_id: "03194571",
+        //   d_id: 4066,
+        //   device_user: 0,
+        //   device_type_id: 10,
+        //   device_name: "",
+        //   creat_time: 1632897651,
+        //   device_location: "河南省郑州市金水区",
+        // },
+        // {
+        //   device_id: "03870746",
+        //   d_id: 4065,
+        //   device_user: 0,
+        //   device_type_id: 10,
+        //   device_name: "",
+        //   creat_time: 1632896603,
+        //   device_location: "河南省郑州市金水区",
+        // },
+      ],
+      own_device: [],
+      device_ids: [], //选中的所有设备ID
+      page: 1,
+      totalNum: 0,
+      equipID: [],
+      text: "全选",
+      typelist: [], //该用户帐下所有的设备类型
+      plotData: {},
+    };
+  },
+  mounted() {
+    this.plotData = JSON.parse(this.$route.query.plotData);
+    this.getList();
+    // this.equipmenttypelist()
+  },
+  methods: {
+    getList() {
+      this.$axios({
+        method: "get",
+        url: "/plot_equip",
+        params: {
+          page_size: 12,
+          equip_id: this.equipId,
+          plot_id: this.plotData.plot_id,
+          page: this.page,
+          equip_type: "jk",
+        },
+      }).then((res) => {
+        console.log(res.data);
+        if (res.data.scd_list) {
+          let data = res.data.scd_list;
+          this.dataList = data.map((item) => {
+            item.checked = item.own != 0; //device_user=0代表待分配
+            return item;
+          });
+          this.own_device = res.data.own_list;
+          this.totalNum = res.data.count;
+        }
+      });
+    },
+    DateChange(val) {
+      if (this.timeRange) {
+        this.begin = parseInt(new Date(this.timeRange[0]).getTime() / 1000);
+        this.end = parseInt(new Date(this.timeRange[1]).getTime() / 1000);
+        this.page = 1;
+        this.getList();
+      } else {
+        this.begin = "";
+        this.end = "";
+        this.getList();
+      }
+    },
+    changePage(val) {
+      this.page = val;
+      this.getList();
+    },
+    distSubm() {
+      this.dataList.forEach((item) => {
+        if (item.checked == true) {
+          this.device_ids.push(item.d_id);
+        } else {
+          for (let i = 0; i < this.own_device.length; i++) {
+            if (item.d_id == this.own_device[i]) {
+              this.own_device.splice(i, 1);
+            }
+          }
+        }
+      });
+      this.device_ids = this.device_ids.concat(this.own_device);
+      this.device_ids = [...new Set(this.device_ids)]; //数组去重
+
+      this.$axios({
+        method: "POST",
+        url: "/plot_equip",
+        data: this.qs.stringify({
+          device_ids: this.device_ids.join(","),
+          plot_id: this.plotData.plot_id,
+          equip_type: "jk",
+        }),
+      }).then((res) => {
+        console.log(res.data);
+        if (res.data == "分配成功") {
+          this.$message.success("分配设备成功！");
+        }
+        this.device_ids = [];
+      });
+    },
+    equipCheck() {
+      this.page = 1;
+      this.getList();
+    },
+    stopDefault(e) {
+      e.stopPropagation();
+    },
+    itemFun(item) {
+      item.checked = !item.checked;
+    },
+    allSel() {
+      if (this.text == "全选") {
+        this.text = "取消全选";
+        this.dataList = this.dataList.map((item) => {
+          item.checked = true;
+          return item;
+        });
+      } else {
+        this.text = "全选";
+        this.dataList = this.dataList.map((item) => {
+          item.checked = false;
+          return item;
+        });
+      }
+    },
+    equipmenttypelist() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=home.homes.user_device_type",
+      }).then((res) => {
+        this.typelist = res.data.data;
+        var obj = {
+          id: 0,
+          type_name: "全部",
+        };
+        this.typelist.unshift(obj);
+        console.log(this.typelist);
+      });
+    },
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.search-box {
+  display: flex;
+  justify-content: flex-left;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  .filter-box > div {
+    margin-right: 15px;
+  }
+  .el-input {
+    width: 200px;
+  }
+  .el-date-editor--daterange {
+    width: 222px;
+  }
+}
+.el-card.selected {
+  border: 1px solid #14a478;
+}
+.el-card {
+  box-sizing: border-box;
+  .img-box {
+    text-align: center;
+    border-bottom: 1px solid #eee;
+    padding: 15px 0;
+    img {
+      height: 45px;
+    }
+    p {
+      font-size: 14px;
+      font-weight: 800;
+      margin-top: 10px;
+    }
+  }
+  .detail {
+    border-bottom: 1px solid #eee;
+    padding: 10px 0;
+    p {
+      display: flex;
+      justify-content: space-between;
+      font-size: 13px;
+      line-height: 34px;
+      color: #666;
+      padding: 0 0px;
+    }
+  }
+}
+.userTip {
+  text-align: left;
+  font-size: 14px;
+}
+
+.breadcrumb_tab {
+  top: 60px !important;
+}
+</style>

src/plugin/elementUi.js

@@ -0,0 +1,115 @@
+import Vue from 'vue'
+// 导入自己需要的组件
+import { Container,Header,Aside,Main,Footer,Select, Dialog,Option, OptionGroup, Input, Tree, Row, Col,Button,
+  Menu,
+  Submenu,
+  MenuItem,
+  MenuItemGroup,
+  Tooltip,
+  Breadcrumb,
+  BreadcrumbItem,
+  Card,
+  Switch,
+  Table,
+  TableColumn,
+  DatePicker,
+  Pagination,
+  MessageBox,
+  Message,
+  Icon,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Badge,
+  Alert,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Tabs,
+  TabPane,
+  Progress,
+  Slider,
+  Carousel,
+  CarouselItem, 
+  TimeSelect,
+  TimePicker,
+  Upload,
+  Cascader,
+  Popover,
+  Checkbox,
+  PageHeader,
+  CheckboxGroup,
+  Image,
+  Collapse,
+  Divider,
+  Loading,
+  CollapseItem} from 'element-ui'
+// const element = {
+  // install: function (Vue) {
+    
+    Vue.use(Container)
+    Vue.use(Header)
+    Vue.use(Aside)
+    Vue.use(Main)
+    Vue.use(Footer)
+    Vue.use(Select)
+    Vue.use(Option)
+    Vue.use(OptionGroup)
+    Vue.use(Input)
+    Vue.use(Tree)
+    Vue.use(Dialog)
+    Vue.use(Row)
+    Vue.use(Col)
+    Vue.use(Button)
+    Vue.use(Menu);
+    Vue.use(Submenu);
+    Vue.use(MenuItem);
+    Vue.use(MenuItemGroup);
+    Vue.use(Tooltip);
+    Vue.use(Breadcrumb);
+    Vue.use(BreadcrumbItem);
+    Vue.use(Card);
+    Vue.use(Switch);
+    Vue.use(Table);
+    Vue.use(TableColumn);
+    Vue.use(DatePicker);
+    Vue.use(Pagination);
+    Vue.use(Icon);
+    Vue.use(Dropdown);
+    Vue.use(DropdownMenu);
+    Vue.use(DropdownItem);
+    Vue.use(Badge);
+    Vue.use(Alert);
+    Vue.use(Dialog);
+    Vue.use(Form);
+    Vue.use(FormItem);
+    Vue.use(Radio);
+    Vue.use(RadioGroup);
+    Vue.use(Tabs);
+    Vue.use(TabPane);
+    Vue.use(Progress);
+    Vue.use(Slider);
+    Vue.use(Carousel);
+    Vue.use(CarouselItem);
+    Vue.use(TimeSelect);
+    Vue.use(TimePicker);
+    Vue.use(Upload);
+    Vue.use(Cascader);
+    Vue.use(Popover);
+    Vue.use(Checkbox);
+    Vue.use(PageHeader);
+    Vue.use(CheckboxGroup);
+    Vue.use(Image);
+    Vue.use(Collapse);
+    Vue.use(CollapseItem);
+    Vue.use(Divider);
+    Vue.use(Loading);
+    Vue.prototype.$msgbox = MessageBox;
+    Vue.prototype.$alert = MessageBox.alert;
+    Vue.prototype.$confirm = MessageBox.confirm;
+    Vue.prototype.$prompt = MessageBox.prompt;
+    Vue.prototype.$message = Message;
+  // }
+// }
+// export default element

src/router/index.js

@@ -0,0 +1,44 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+const Login = () => import('@/components/Login')
+const Index = () => import('@/components/Index')
+const Monitor = () => import('@/pages/Monitor')
+const addList = () => import('@/pages/addList')
+const EquipList = () => import('@/pages/EquipList')
+const UserManger = () => import('@/components/UserManger')
+Vue.use(Router)
+
+export default new Router({
+  routes: [{
+      path: '',
+      redirect: '/index/monitor1'
+    },
+    {
+      path: '/login',
+      component: Login
+    },
+    {
+      path: '/index',
+      component: Index,
+      children: [
+        {
+          path: 'monitor1',
+          component: Monitor,
+        },
+        {
+          path: 'list1',
+          component: EquipList,
+        },
+        {
+          path: 'userManger1',
+          component: UserManger
+        },
+        {
+          path: 'addList',
+          component: addList,
+        },
+      ]
+    },
+    
+  ]
+})

static/js/js/ckplayer/ckplayer.xml

@@ -0,0 +1,280 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ckplayer>
+  <style>
+		<cpath></cpath>
+		<!--
+		播放器风格压缩包文件的路径，默认的是style.swf
+		如果调用不出来可以试着设置成绝对路径试试
+		如果不知道路径并且使用的是默认配置，可以直接留空，播放器会自动寻找
+		-->
+		<language></language>
+		<!--
+		播放器所使用的语言配置文件，需要和播放器在同目录下，默认是language.xml
+		-->
+		<flashvars>{b->1}{p->1}</flashvars>
+		<!--
+		这里是用来做为对flashvars值的补充，除了c和x二个参数以外的设置都可以在这里进行配置
+			                     1 1 1 1   1 1 1 1 1 1 2 2 2  2 2 2 2 2    2 2 3 3 3 3 3 3 3 3 3   3 4  4 4 4
+       		   1 2 3 4 5 6 7 8 9 0 1 2 3   4 5 6 7 8 9 0 1 2  3 4 5 6 7    8 9 0 1 2 3 4 5 6 7 8   9 0  1 2 3
+		-->
+		<setup>1,1,1,1,1,2,0,1,0,0,0,1,200,0,2,1,0,1,1,1,0,10,3,0,1,2,3000,0,0,0,0,1,1,1,1,1,1,250,0,90,0,0,0</setup>
+		<!--
+		这是配置文件里比较重要的一个参数，共有N个功能控制参数，并且以后会继续的增加，各控制参数以英文逗号(,)隔开。下面列出各参数的说明：
+			1、鼠标经过按钮是否使用手型，0普通鼠标，1手型鼠标，2是只有按钮手型，3是控制栏手型
+			2、是否支持单击暂停，0不支持，1是支持
+			3、是否支持双击全屏，0不支持，1是支持
+			4、在播放前置广告时是否同时加载视频，0不加载，1加载
+			5、广告显示的参考对象，0是参考视频区域，1是参考播放器区域
+			6、广告大小的调整方式,只针对swf和图片有效,视频是自动缩放的
+				0=自动调整大小，意思是说大的话就变小，小的话就变大
+				1=是大的化变小，小的话不变
+				2=是什么也不变，就这么大
+				3=是跟参考对像(第5个控制)参数设置的一样宽高
+			7、前置广告播放顺序，0是顺序播放，1是随机播放，>1则随机取所有广告中的(N-1)个进行播放
+			8、对于视频广告是否采用修正，0是不使用，1是使用，如果是1，则用户在网速慢的情况下会按设定的倒计时进行播放广告，计时结束则放正片（比较人性化），设置成0的话，则强制播放完广告才能播放正片
+			9、是否开启滚动文字广告，0是不开启，1是开启且不使用关闭按钮，2是开启并且使用关闭按钮，开启后将在加载视频的时候加载滚动文字广告
+			10、视频的调整方式
+				0=是自动调整大小，意思是说大的话就变小，小的话就变大，同时保持长宽比例不变
+				1=是大的化变小，小的话不变
+				2=是什么也不变，就这么大
+				3=是跟参考对像(pm_video的设置)参数设置的一样宽高
+			11、是否在多视频时分段加载，0不是，1是
+			12、缩放视频时是否进行平滑处理，0不是，1是
+			13、视频缓冲时间,单位：毫秒,建议不超过300
+			14、初始图片调整方式(
+				0=是自动调整大小，意思是说大的话就变小，小的话就变大，同时保持长宽比例不变
+				1=是大的化变小，小的话不变
+				2=是什么也不变，就这么大
+				3=是跟pm_video参数设置的一样宽高
+			15、暂停广告调整方式(
+				0=是自动调整大小，意思是说大的话就变小，小的话就变大，同时保持长宽比例不变
+				1=是大的化变小，小的话不变
+				2=是什么也不变，就这么大
+				3=是跟pm_video参数设置的一样宽
+			16、暂停广告是否使用关闭广告设置，0不使用，1使用
+			17、缓冲时是否播放广告，0是不显示，1是显示并同时隐藏掉缓冲图标和进度，2是显示并不隐藏缓冲图标
+			18、是否支持键盘空格键控制播放和暂停0不支持，1支持
+			19、是否支持键盘左右方向键控制快进快退0不支持，1支持
+			20、是否支持键盘上下方向键控制音量0不支持，1支持
+			21、播放器返回js全部监听函数的等级，0-2,等级越高，返回的参数越多
+				0=不返回全部监听事件
+				1=返回监听，但不在控制台输出
+				2=返回监听，并且在控制台同步输出
+				3=返回全部监听事件，并且在参数前加上"播放器ID->"，用于多播放器的监听
+			22、快进和快退的秒数
+			23、界面上图片元素加载失败重新加载次数
+			24、开启加载皮肤压缩文件包的加载进度提示
+			25、使用隐藏控制栏时显示简单进度条的功能,0是不使用，1是使用，2是只在普通状态下使用
+			26、控制栏隐藏设置(0不隐藏，1全屏时隐藏，2都隐藏
+			27、控制栏隐藏延时时间，即在鼠标离开控制栏后多少毫秒后隐藏控制栏
+			28、滚动文字广告左右滚动时是否采用无缝，默认0采用，1是不采用
+			29、0是正常状态，1是控制栏默认隐藏，播放状态下鼠标经过播放器显示控制栏，2是一直隐藏控制栏
+			30、在播放rtmp视频时暂停后点击播放是否采用重新链接的方式,这里一共分0-2三个等级
+			31、当采用网址形式(flashvars里s=1/2时)读取视频地址时是采用默认0=get方法，1=post方式
+			32、是否启用播放按钮和暂停按钮
+			33、是否启用中间暂停按钮
+			34、是否启用静音按钮
+			35、是否启用全屏按钮
+			36、是否启用进度调节栏,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动，
+			37、是否启用调节音量
+			38、计算时间的间隔，毫秒
+			39、前置logo至少显示的时间，单位：毫秒
+			40、前置视频广告的默认音量
+			41、当s=3/4时加载插件是否从压缩包里加载，0不是，1是
+			42、加载风格是否采用加密方式传送，该功能普通用户不能使用,并且需要下载ckplayer-SN版
+			43、在s=1/2时，调用地址里的地址是否是相对地址（相对于调用文件），0不是，1是
+		-->
+		<pm_bg>0x000000,100,230,180</pm_bg>
+		<!--播放器整体的背景配置
+			1、整体背景颜色
+			2、背景透明度
+			3、播放器最小宽度
+			4、播放器最小高度
+			这里只是初始化时的设置，最终加载完播放器后显示的效果需要在style.swf/style.xml里设置该参数
+		-->
+		<mylogo>logo.swf</mylogo>
+		<!--
+		视频加载前显示的logo文件，不使用设置成<mylogo>null</mylogo>
+		-->
+		<pm_mylogo>1,1,-100,-55</pm_mylogo>
+		<!--
+		视频加载前显示的logo文件(mylogo参数的)的位置
+		本软件所有的四个参数控制位置的方式全部都是统一的意思，如下
+			1、水平对齐方式，0是左，1是中，2是右
+			2、垂直对齐方式，0是上，1是中，2是下
+			3、水平偏移量，举例说明，如果第1个参数设置成0左对齐，第3个偏移量设置成10，就是离左边10个像素，第一个参数设置成2，偏移量如果设置的是正值就会移到播放器外面，只有设置成负值才行，设置成-1，按钮就会跑到播放器外面
+			4、垂直偏移量 
+		-->
+		<logo>cklogo.png</logo>
+		<!--
+		默认右上角一直显示的logo，不使用设置成<logo>null</logo>
+		-->
+		<pm_logo>2,0,-100,20</pm_logo>
+		<!--
+		播放器右上角的logo的位置
+			1、水平对齐方式，0是左，1是中，2是右
+			2、垂直对齐方式，0是上，1是中，2是下
+			3、水平偏移量
+			4、垂直偏移量 
+		以下是播放器自带的二个插件
+		-->
+		<control_rel>related.swf,related.xml,0</control_rel>
+		<!--
+			1、视频播放结束后显示相关精彩视频的插件文件（注意，视频结束动作设置成3时(即var flashvars={e:3})有效），
+			2、xml文件是调用精彩视频的示例文件，可以自定义文件类型（比如asp,php,jsp,.net只要输出的是xml格式就行）,实际使用中一定要注意第二个参数的路径要正确
+			3、第三个参数是设置配置文件的编码，0是默认的utf-8,1是gbk2312 
+		-->
+		<control_pv>Preview.swf,105,2000</control_pv>
+		<!--
+		视频预览插件
+			1、插件文件名称(该插件和上面的精彩视频的插件都是放在风格压缩包里的)
+			2、离进度栏的高(指的是插件的顶部离进度栏的位置)
+			3、延迟时间(该处设置鼠标经过进度栏停顿多少毫秒后才显示插件)
+			建议一定要设置延时时间，不然当鼠标在进度栏上划过的时候就会读取视频地址进行预览，很占资源 
+		-->
+		<pm_repc></pm_repc>
+		<!--
+		视频地址替换符，该功能主要是用来做简单加密的功能，使用方法很简单，请注意，只针对f值是视频地址的时候有效，其它地方不能使用。具体的请查看http://www.ckplayer.com/manual.php?id=4#title_25
+		-->
+		<pm_spac>|</pm_spac>
+		<!--
+		视频地址间隔符，这里主要是播放多段视频时使用普通调用方式或网址调用方式时使用的。默认使用|，如果视频地址里本身存在|的话需要另外设置一个间隔符，注意，即使只有一个视频也需要设置。另外在使用rtmp协议播放视频的时候，如果视频存在多级目录的话，这里要改成其它的符号，因为rtmp协议的视频地址多级的话也需要用到|隔开流地址和实例地址 
+		-->
+		<pm_fpac>file->f</pm_fpac>
+		<!--
+		该参数的功能是把自定义的flashvars里的变量替换成ckplayer里对应的变量，默认的参数的意思是把flashvars里的file值替换成f值，因为ckplayer里只认f值，多个替换之间用竖线隔开
+		-->
+		<pm_advtime>2,0,-110,10,0,300,0</pm_advtime>
+		<!--
+		前置广告倒计时文本位置，播放前置 广告时有个倒计时的显示文本框，这里是设置该文本框的位置和宽高，对齐方式的。一共7个参数，分别表示：
+			1、水平对齐方式，0是左对齐，1是中间对齐，2是右对齐
+			2、垂直对齐方式，0是上对齐，1是中间对齐，2是低部对齐
+			3、水平位置偏移量
+			4、垂直位置偏移量
+			5、文字对齐方式，0是左对齐，1是中间对齐，2是右对齐，3是默认对齐
+			6、文本框宽席
+			7、文本框高度 
+		-->
+		<pm_advstatus>1,2,2,-200,-40</pm_advstatus>
+		<!--
+		前置广告静音按钮，静音按钮只在是视频广告时显示，当然也可以控制不显示 
+			1、是否显示0不显示，1显示
+			2、水平对齐方式
+			3、垂直对齐方式
+			4、水平偏移量
+			5、垂直偏移量
+		-->
+		<pm_advjp>1,0,2,2,-100,-40</pm_advjp>
+		<!--
+		前置广告跳过广告按钮的位置
+			1、是否显示0不显示，1是显示
+			2、跳过按钮触发对象(值0/1,0是直接跳转,1是触发js:function ckadjump(){})
+			3、水平对齐方式
+			4、垂直对齐方式
+			5、水平偏移量
+			6、垂直偏移量
+		-->
+		<pm_padvc>2,0,-13,-13</pm_padvc>
+		<!--
+		暂停广告的关闭按钮的位置
+			1、水平对齐方式
+			2、垂直对齐方式
+			3、水平偏移量
+			4、垂直偏移量
+		-->
+		<pm_advms>2,2,-46,-67</pm_advms>
+		<!--
+		滚动广告关闭按钮位置
+			1、水平对齐方式
+			2、垂直对齐方式
+			3、水平偏移量
+			4、垂直偏移量
+		-->
+		<pm_zip>1,1,-20,-8,1,0,0</pm_zip>
+		<!--
+		加载皮肤压缩包时提示文字的位置
+			1、水平对齐方式，0是左对齐，1是中间对齐，2是右对齐
+			2、垂直对齐方式，0是上对齐，1是中间对齐，2是低部对齐
+			3、水平位置偏移量
+			4、垂直位置偏移量
+			5、文字对齐方式，0是左对齐，1是中间对齐，2是右对齐，3是默认对齐
+			6、文本框宽席
+			7、文本框高度
+		-->
+		<pm_advmarquee>1,2,50,-70,50,18,0,0x000000,50,0,20,1,30,2000</pm_advmarquee>
+		<!--
+		滚动广告的控制，要使用的话需要在setup里的第9个参数设置成1
+		这里分二种情况,前六个参数是定位控制，第7个参数是设置定位方式(0：相对定位，1：绝对定位)
+		第一种情况：第7个参数是0的时候，相对定位，就是播放器长宽变化的时候，控制栏也跟着变
+			1、默认1:中间对齐
+			2、上中下对齐（0是上，1是中，2是下）
+			3、离左边的距离
+			4、Y轴偏移量
+			5、离右边的距离
+			6、高度
+			7、定位方式
+		第二种情况：第7个参数是1的时候，绝对定位，就是播放器长宽变化的时候，控制栏不跟着变，这种方式一般使用在控制栏大小不变的时候
+			1、左中右对齐方式（0是左，1是中间，2是右）
+			2、上中下对齐（0是上，1是中，2是下）
+			3、x偏移量
+			4、y偏移量
+			5、宽度
+			6、高度
+			7、定位方式
+		以上是前7个参数的作用
+			8、是文字广告的背景色
+			9、置背景色的透明度
+			10、控制滚动方向，0是水平滚动（包括左右），1是上下滚动（包括向上和向下）
+			11、移动的单位时长，即移动单位像素所需要的时长，毫秒
+			12、移动的单位像素,正数同左/上，负数向右/下
+			13、是行高，这个在设置向上或向下滚动的时候有用处
+			14、控制向上或向下滚动时每次停止的时间
+		-->
+		<pm_glowfilter>0,0x01485d, 100, 6, 3, 10, 1, 0, 0</pm_glowfilter>
+		<!--滚动文字广告是否采用发光滤镜
+			1、是否使用发光滤镜，0是不采用，1是使用
+			2、(default = 0xFF0000) — 光晕颜色，采用十六进制格式 0xRRGGBB。 默认值为 0xFF0000  
+			3、(default = 100) — 颜色的 Alpha 透明度值。 有效值为 0 到 100。 例如，25 设置透明度为 25%  
+			4、(default = 6.0) — 水平模糊量。 有效值为 0 到 255（浮点）。 2 的乘方值（如 2、4、8、16 和 32）经过优化，呈现速度比其它值更快  
+			5、(default = 6.0) — 垂直模糊量。 有效值为 0 到 255（浮点）。 2 的乘方值（如 2、4、8、16 和 32）经过优化，呈现速度比其它值更快  
+			6、(default = 2) — 印记或跨页的强度。 该值越高，压印的颜色越深，而且发光与背景之间的对比度也越强。 有效值为 0 到 255  
+			7、(default = 1) — 应用滤镜的次数
+			8、(default = 0) — 指定发光是否为内侧发光。 值 1 指定发光是内侧发光。 值 0 指定发光是外侧发光（对象外缘周围的发光）  
+			9、(default = 0) — 指定对象是否具有挖空效果。 值为 1 将使对象的填充变为透明，并显示文档的背景颜色背景颜色。 
+		-->
+		<advmarquee>{a href='http://www.ckplayer.com'}{font color='#FFFFFF' size='12'}这里可以放文字广告，为什么要在这里放呢，{/font}{/a}{a href='http://www.ckplayer.com'}{font color='#FFFFFF' size='12'}是因为如果你想在站外调用视频并且有文字广告的话，{/a}{br}就得在这里才能被加载，在js里是不能补加载的，{br}默认使用这里的广告，如果不想在这里使用可以清空这里的内容</advmarquee>
+		<!--
+		该处是滚动文字广告的内容，如果不想在这里设置，就把这里清空并且在页面中使用js的函数定义function ckmarqueeadv(){return '广告内容'}
+		-->
+		<mainfuntion></mainfuntion>
+		<!--
+		当flashvars里s=3/4时，调用的函数包名称，默认为空，调用时间轴上的函数setAppObj
+		-->
+		<flashplayer></flashplayer>
+		<!--
+		当flashvars里的s=3/4时，也可以把swf文件放在这里
+		-->
+		<calljs>ckplayer_status,ckadjump,playerstop,ckmarqueeadv</calljs>
+		<!--
+			1、全局监听返回结果的函数
+			2、跳过广告的函数
+			3、播放结束时调用的js函数
+			4、加载滚动文字广告的函数
+		-->
+		<myweb></myweb>
+		
+		<!--
+		以下内容部份是和插件相关的配置，请注意，自定义插件以及其配置的命名方式要注意，不要和系统的相重复，不然就会替换掉系统的相关设置，删除相关插件的话也可以同时删除相关的配置
+		以下内容定义自定义插件的相关配置，这里也可以自定义任何自己的插件需要配置的内容，当然，如果你某个插件不使用的话，也可以删除相关的配置
+		-->
+		<cpt_lights>0</cpt_lights>
+		<!--
+		该处定义是否使用开关灯，使用开灯效果时调用页面的js函数function closelights(){}，关灯调用 function closelights(){};
+		-->
+		<cpt_share>/ckplayer/share.xml</cpt_share>
+		<!--
+		分享插件调用的配置文件地址,此设设置成空，则不启用分享按钮
+		调用插件开始
+		-->
+	</style>
+</ckplayer>

static/js/js/ckplayer/language.xml

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="utf-8"?>
+	<ckplayer>
+		<style>
+			<pr_zip>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}已加载[$prtage]%{/font}</pr_zip>
+			<!--
+			加载皮肤包进度提示的文字，[$prtage]会被替换成加载百分比
+			-->
+			<pr_load>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}已加载[$prtage]%{/font}</pr_load>
+			<!--
+			当调用多段视频时，并且没有配置好各段视频的时间和字节数的情况下，播放器需要先读取各段视频的元数据进行计算，此时需要显示一个加载进度告诉用户已计算的情况。 
+			-->
+			<pr_noload>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}加载失败{/font}</pr_noload>
+			<!--
+			加载视频失败时显示的内容 
+			-->
+			<pr_buffer>{font color='#FFFFFF' face='Arial' size='12'}[$buffer]%{/font}</pr_buffer>
+			<!--
+			视频缓冲时显示的提示，[$buffer]会被替换成缓冲的百分比数字部份
+			-->
+			<pr_play>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}点击播放{/font}</pr_play>
+			<!--
+			鼠标经过播放按钮时的提示，支持html 
+			-->
+			<pr_pause>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}点击暂停{/font}</pr_pause>
+			<!--
+			鼠标经过暂停按钮时的提示，支持html 
+			-->
+			<pr_mute>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}点击静音{/font}</pr_mute>
+			<!--
+			鼠标经过静音按钮时的提示，支持html 
+			-->
+			<pr_nomute>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}取消静音{/font}</pr_nomute>
+			<!--
+			鼠标经过取消静音按钮时的提示，支持html 
+			-->
+			<pr_full>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}点击全屏{/font}</pr_full>
+			<!--
+			鼠标经过全屏按钮时的提示，支持html 
+			-->
+			<pr_nofull>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}退出全屏{/font}</pr_nofull>
+			<!--
+			鼠标经过退出全屏按钮时的提示，支持html 
+			-->
+			<pr_fastf>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}快进{/font}</pr_fastf>
+			<!--
+			鼠标经过快进按钮时的提示，支持html 
+			-->
+			<pr_fastr>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}快退{/font}</pr_fastr>
+			<!--
+			鼠标经过快退按钮时的提示，支持html 
+			-->
+			<pr_time>{font color='#FFFFFF' face='Arial' size='16'}[$Time]{/font}</pr_time>
+			<!--
+			鼠标经过进度栏时提示当前点上时间的，[$Time]会被替换成时间，支持html 
+			-->
+			<pr_volume>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}音量：[$Volume]%{/font}</pr_volume>
+			<!--
+			鼠标经过音量调节框或调整音量时提示，[$Volume]会自动替换音量值(0-100) 
+			-->
+			<pr_clockwait>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}00:00 / 00:00{/font}</pr_clockwait>
+			<!--
+			在默认不加载视频，即m=1的时候，同时并没有设置视频的时间和字节，即o和w值的时候，pr_clock和pr_clock2里的所有内容被替换成这里设置的值 
+			-->
+			<pr_live>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}视频直播中{/font}</pr_live>
+			<!--
+			在直播的情况下显示的文字 
+			-->
+			<pr_adv>{font color='#FFFFFF' size='12' face='Microsoft YaHei,微软雅黑'}广告剩余：{font color='#FF0000' size='15' face='Arial'}{b}[$Second]{/b}{/font} 秒{/font}</pr_adv>
+			<!--
+			广告倒计时显示的内容，[$Second]将会显示倒计时的秒数
+			-->
+			<pr_prompt>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}[$prompt]{/font}</pr_prompt>
+			<!--
+			提示点文字 
+			-->
+			<pr_cksetup>{font color='#FFFFFF' face='Microsoft YaHei,微软雅黑' size='14'}设置{/font}</pr_cksetup>
+			<!--
+			鼠标经过设置提示的文字（该定义为插件所用）
+			-->
+		</style>
+	</ckplayer>

static/js/js/ckplayer/related.xml

@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ckplayer>
+<title>{font color="#FFDD00" face="Microsoft YaHei,微软雅黑" size="14"}精彩视频推荐{/font}</title>
+	<!--左上角的标题说明文字，支持html-->
+	<area>600,400,0xFFDD00,20</area>
+	<!--
+		该插件在播放中的区域控制
+		固定尺寸，精彩视频区域会固定大小并且保持剧中
+		1：宽
+		2：高
+		3：边框色
+		4：边框透明度
+	-->
+	<image>120,90</image>
+	<!--图片的宽，高-->
+	<distance>150,175,100</distance>
+	<!--
+		1：横排图片之间的距离，前一个图片的左边到后一个图片的左边的距离
+		2：竖排图片之间距离，上一个图片的上边到下一个图片的上边距离，这里需要特别注意，因为图片显示区域是总区域-40的高度，默认的即<area>的高400-40=360，所以比如你的图片想一列显示二个，则该参数需要设置成360/2=180
+		3：文字距离图片上方的距离
+		只要设置好这三个参数，图片的位置就可以固定住了
+	-->
+	<rep_title>{a href="[url]" target="_blank"}{font color="#FFFFFF" face="新宋体"}[title]{/font}{/a}</rep_title>
+	<!--标题替换规则-->
+	<style>a{color:#FFFFFF;}a:hover{color:#FF0000;}</style>
+	<!--文本样式-->
+	<size>120,42,3</size>
+	<!--文本的宽度，高度，行和行之间距离-->
+	<relatedlist>
+		<related>
+			<img>temp/1.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>1：这里调用的文件配置在ckplayer/related.xml里</title>
+		</related>
+		<related>
+			<img>temp/2.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>2：支持多页调用</title>
+		</related>
+		<related>
+			<img>temp/3.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>3：文本请保持在二行，不能多于三行，多于三行将不显示</title>
+		</related>
+		<related>
+			<img>temp/4.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>4：支持多行调用，多页调用</title>
+		</related>
+		<related>
+			<img>temp/5.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>5：感谢对ckplayer的支持</title>
+		</related>
+		<related>
+			<img>temp/6.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>6：最多两行,请不要超过二行</title>
+		</related>
+		<related>
+			<img>temp/3.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>7：这里调用的文件配置在ckplayer/related.xml里</title>
+		</related>
+		<related>
+			<img>temp/5.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>8：支持多页调用</title>
+		</related>
+		<related>
+			<img>temp/4.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>9：文本请保持在二行，不能多于三行，多于三行将不显示</title>
+		</related>
+		<related>
+			<img>temp/1.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>10：支持多行调用，多页调用</title>
+		</related>
+		<related>
+			<img>temp/2.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>11：感谢对ckplayer的支持</title>
+		</related>
+		<related>
+			<img>temp/6.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>12：最多两行,请不要超过二行</title>
+		</related>
+		<related>
+			<img>temp/5.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>13：这里调用的文件配置在ckplayer/related.xml里</title>
+		</related>
+		<related>
+			<img>temp/4.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>14：支持多页调用</title>
+		</related>
+		<related>
+			<img>temp/6.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>15：文本请保持在二行，不能多于三行，多于三行将不显示</title>
+		</related>
+		<related>
+			<img>temp/3.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>16：支持多行调用，多页调用</title>
+		</related>
+		<related>
+			<img>temp/1.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>17：感谢对ckplayer的支持</title>
+		</related>
+		<related>
+			<img>temp/2.jpg</img>
+			<url>http://www.ckplayer.com/</url>
+			<title>18：最多两行,请不要超过二行</title>
+		</related>
+	</relatedlist>
+</ckplayer>

static/js/js/ckplayer/share.xml

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ckplayer>
+	<share_html>
+	{embed src="贵站网址，在ckplayer/share.xml里修改/ckplayer/ckplayer.swf" flashvars="[$share]" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullscreen="true" type="application/x-shockwave-flash"}{/embed}
+	</share_html>
+	<share_flash>
+	贵站网址/ckplayer/ckplayer.swf?[$share]
+	</share_flash>
+	<share_flashvars>
+	f,my_url,my_pic,a
+	</share_flashvars>
+	<share_path>ckplayer/share/</share_path><!--分享图片的文件夹地址-->
+	<share_replace>
+	</share_replace>
+	<share_permit>0</share_permit><!--是否有视听许可证,默认0没有，1是有-->
+	<share_uuid>
+	c25cf02c-1705-412d-bd4b-77a10b380f08
+	</share_uuid>
+	<share_button>
+		<share>
+			<id>qqmb</id>
+			<img>qq.png</img>
+			<coordinate>20,50</coordinate>
+		</share>
+		<share>
+			<id>sinaminiblog</id>
+			<img>sina.png</img>
+			<coordinate>101,50</coordinate>
+		</share>
+		<share>
+			<id>qzone</id>
+			<img>qzone.png</img>
+			<coordinate>182,50</coordinate>
+		</share>
+		<share>
+			<id>renren</id>
+			<img>rr.png</img>
+			<coordinate>263,50</coordinate>
+		</share>
+		<share>
+			<id>kaixin001</id>
+			<img>kaixin001.png</img>
+			<coordinate>20,85</coordinate>
+		</share>
+		<share>
+			<id>tianya</id>
+			<img>tianya.png</img>
+			<coordinate>101,85</coordinate>
+		</share>
+		<share>
+			<id>feixin</id>
+			<img>feixin.png</img>
+			<coordinate>182,85</coordinate>
+		</share>
+		<share>
+			<id>msn</id>
+			<img>msn.png</img>
+			<coordinate>263,85</coordinate>
+		</share>
+	</share_button>
+</ckplayer>