first commit

.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,14 @@
# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,3 @@
build/*.js
config/*.js
src/assets

.eslintrc.js

@@ -0,0 +1,198 @@
module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: 'eslint:recommended',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // check if imports actually resolve
  'settings': {
    'import/resolver': {
      'webpack': {
        'config': 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
      'before': true,
      'after': true
    }],
    'block-spacing': [2, 'always'],
    'brace-style': [2, '1tbs', {
      'allowSingleLine': true
    }],
    'camelcase': [0, {
      'properties': 'always'
    }],
    'comma-dangle': [2, 'never'],
    'comma-spacing': [2, {
      'before': false,
      'after': true
    }],
    'comma-style': [2, 'last'],
    'constructor-super': 2,
    'curly': [2, 'multi-line'],
    'dot-location': [2, 'property'],
    'eol-last': 2,
    'eqeqeq': [2, 'allow-null'],
    'generator-star-spacing': [2, {
      'before': true,
      'after': true
    }],
    'handle-callback-err': [2, '^(err|error)$'],
    'indent': [2, 2, {
      'SwitchCase': 1
    }],
    'jsx-quotes': [2, 'prefer-single'],
    'key-spacing': [2, {
      'beforeColon': false,
      'afterColon': true
    }],
    'keyword-spacing': [2, {
      'before': true,
      'after': true
    }],
    'new-cap': [2, {
      'newIsCap': true,
      'capIsNew': false
    }],
    'new-parens': 2,
    'no-array-constructor': 2,
    'no-caller': 2,
    'no-console': 'off',
    'no-class-assign': 2,
    'no-cond-assign': 2,
    'no-const-assign': 2,
    'no-control-regex': 2,
    'no-delete-var': 2,
    'no-dupe-args': 2,
    'no-dupe-class-members': 2,
    'no-dupe-keys': 2,
    'no-duplicate-case': 2,
    'no-empty-character-class': 2,
    'no-empty-pattern': 2,
    'no-eval': 2,
    'no-ex-assign': 2,
    'no-extend-native': 2,
    'no-extra-bind': 2,
    'no-extra-boolean-cast': 2,
    'no-extra-parens': [2, 'functions'],
    'no-fallthrough': 2,
    'no-floating-decimal': 2,
    'no-func-assign': 2,
    'no-implied-eval': 2,
    'no-inner-declarations': [2, 'functions'],
    'no-invalid-regexp': 2,
    'no-irregular-whitespace': 2,
    'no-iterator': 2,
    'no-label-var': 2,
    'no-labels': [2, {
      'allowLoop': false,
      'allowSwitch': false
    }],
    'no-lone-blocks': 2,
    'no-mixed-spaces-and-tabs': 2,
    'no-multi-spaces': 2,
    'no-multi-str': 2,
    'no-multiple-empty-lines': [2, {
      'max': 1
    }],
    'no-native-reassign': 2,
    'no-negated-in-lhs': 2,
    'no-new-object': 2,
    'no-new-require': 2,
    'no-new-symbol': 2,
    'no-new-wrappers': 2,
    'no-obj-calls': 2,
    'no-octal': 2,
    'no-octal-escape': 2,
    'no-path-concat': 2,
    'no-proto': 2,
    'no-redeclare': 2,
    'no-regex-spaces': 2,
    'no-return-assign': [2, 'except-parens'],
    'no-self-assign': 2,
    'no-self-compare': 2,
    'no-sequences': 2,
    'no-shadow-restricted-names': 2,
    'no-spaced-func': 2,
    'no-sparse-arrays': 2,
    'no-this-before-super': 2,
    'no-throw-literal': 2,
    'no-trailing-spaces': 2,
    'no-undef': 2,
    'no-undef-init': 2,
    'no-unexpected-multiline': 2,
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [2, {
      'defaultAssignment': false
    }],
    'no-unreachable': 2,
    'no-unsafe-finally': 2,
    'no-unused-vars': [2, {
      'vars': 'all',
      'args': 'none'
    }],
    'no-useless-call': 2,
    'no-useless-computed-key': 2,
    'no-useless-constructor': 2,
    'no-useless-escape': 0,
    'no-whitespace-before-property': 2,
    'no-with': 2,
    'one-var': [2, {
      'initialized': 'never'
    }],
    'operator-linebreak': [2, 'after', {
      'overrides': {
        '?': 'before',
        ':': 'before'
      }
    }],
    'padded-blocks': [2, 'never'],
    'quotes': [2, 'single', {
      'avoidEscape': true,
      'allowTemplateLiterals': true
    }],
    'semi': [2, 'never'],
    'semi-spacing': [2, {
      'before': false,
      'after': true
    }],
    'space-before-blocks': [2, 'always'],
    'space-before-function-paren': [2, 'never'],
    'space-in-parens': [2, 'never'],
    'space-infix-ops': 2,
    'space-unary-ops': [2, {
      'words': true,
      'nonwords': false
    }],
    'spaced-comment': [2, 'always', {
      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
    }],
    'template-curly-spacing': [2, 'never'],
    'use-isnan': 2,
    'valid-typeof': 2,
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    'yoda': [2, 'never'],
    'prefer-const': 2,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'object-curly-spacing': [2, 'always', {
      objectsInObjects: false
    }],
    'array-bracket-spacing': [2, 'never']
  }
}

.gitignore

@@ -0,0 +1,15 @@
.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
# 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": {}
  }
}

.project

@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
	<name>touchwave</name>
	<comment></comment>
	<projects>
	</projects>
	<buildSpec>
		<buildCommand>
			<name>com.aptana.ide.core.unifiedBuilder</name>
			<arguments>
			</arguments>
		</buildCommand>
	</buildSpec>
	<natures>
		<nature>com.aptana.projects.webnature</nature>
	</natures>
	<filteredResources>
		<filter>
			<id>1536728706163</id>
			<name></name>
			<type>26</type>
			<matcher>
				<id>org.eclipse.ui.ide.multiFilter</id>
				<arguments>1.0-name-matches-false-false-node_modules</arguments>
			</matcher>
		</filter>
	</filteredResources>
</projectDescription>

.travis.yml

@@ -0,0 +1,5 @@
language: node_js
node_js: stable
script: npm run test
notifications:
  email: false

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,
      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,100 @@
'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: {
      '@': 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: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

build/webpack.dev.conf.js

@@ -0,0 +1,86 @@
'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 HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
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: true,
    hot: true,
    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,
      favicon: resolve('favicon.ico')
    })
  ]
})
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,156 @@
'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')
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
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.
      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
      allChunks: false,
    }),
    // 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,
      favicon: resolve('favicon.ico'),
      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 vender 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
    }),
    // split echarts into its own file
    new webpack.optimize.CommonsChunkPlugin({
      async: 'echarts',
      minChunks(module) {
        var context = module.context;
        return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0);
      }
    }),
    // 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,8 @@
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
})

config/index.js

@@ -0,0 +1,87 @@
'use strict'
const path = require('path')
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 9526, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: false,
    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,
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false,
  },
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    /**
     * You can set by youself according to actual condition
     * You will need to set this if you plan to deploy your site under a sub path,
     * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
     * then assetsPublicPath should be set to "/bar/".
     * In most cases please use '/' !!!
     */
    assetsPublicPath: '/', // If you are deployed on the root path, please use '/'
    /**
     * Source Maps
     */
    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

config/prod.env.js

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

index.html

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>声脉桥梁云监控平台</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

package.json

@@ -0,0 +1,82 @@
{
  "name": "vueAdmin-touchwave",
  "version": "1.0.0",
  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
  "author": "luyanan <1271778060@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build:report": "npm_config_report=true node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "test": "npm run lint"
  },
  "dependencies": {
    "axios": "0.17.1",
    "babel-polyfill": "^6.26.0",
    "echarts": "3.8.5",
    "element-ui": "2.3.4",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "vue": "2.5.10",
    "vue-router": "3.0.1",
    "vuex": "3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "7.2.3",
    "babel-core": "6.26.0",
    "babel-eslint": "8.0.3",
    "babel-helper-vue-jsx-merge-props": "2.0.3",
    "babel-loader": "7.1.2",
    "babel-plugin-syntax-jsx": "6.18.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-plugin-transform-vue-jsx": "3.5.0",
    "babel-preset-env": "1.6.1",
    "babel-preset-stage-2": "6.24.1",
    "chalk": "2.3.0",
    "copy-webpack-plugin": "4.2.3",
    "css-loader": "0.28.7",
    "eslint": "4.13.1",
    "eslint-friendly-formatter": "3.0.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-html": "4.0.1",
    "eventsource-polyfill": "0.9.6",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "friendly-errors-webpack-plugin": "1.6.1",
    "html-webpack-plugin": "2.30.1",
    "node-notifier": "5.1.2",
    "node-sass": "^4.7.2",
    "optimize-css-assets-webpack-plugin": "3.2.0",
    "ora": "1.3.0",
    "portfinder": "1.0.13",
    "postcss-import": "11.0.0",
    "postcss-loader": "2.0.9",
    "postcss-url": "7.3.0",
    "rimraf": "2.6.2",
    "sass-loader": "6.0.6",
    "semver": "5.4.1",
    "shelljs": "0.7.8",
    "svg-sprite-loader": "3.5.2",
    "uglifyjs-webpack-plugin": "1.1.3",
    "url-loader": "0.6.2",
    "vue-loader": "13.7.2",
    "vue-style-loader": "3.0.3",
    "vue-template-compiler": "2.5.10",
    "webpack": "3.10.0",
    "webpack-bundle-analyzer": "2.9.1",
    "webpack-dev-server": "2.9.7",
    "webpack-merge": "4.1.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

src/App.vue

@@ -0,0 +1,11 @@
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

src/api/bridge.js

@@ -0,0 +1,81 @@
import request from '@/utils/request'
/*  添加桥梁 */
export function addDevice(params) {
  return request({
    url: '/ajax/bridge',
    method: 'post',
    data: params
  })
}
/*  更新桥梁信息 */
export function updateDevice(params) {
  return request({
    url: '/ajax/bridge/update',
    method: 'post',
    data: params
  })
}
/*  删除桥梁信息 */
export function deleteDevice(params) {
  return request({
    url: '/ajax/bridge/delete',
    method: 'get',
    params
  })
}
/*  查询单个桥梁 */
export function queryDevice(params) {
  return request({
    url: '/ajax/bridge/qo',
    method: 'get',
    params
  })
}
/*  分页查询桥梁 */
export function pageQueryDevice(params) {
  return request({
    url: '/ajax/bridge/pq',
    method: 'get',
    params
  })
}
/*  校验桥梁编号 */
export function checkDeviceCode(params) {
  return request({
    url: '/ajax/bridge/checkCode',
    method: 'get',
    params
  })
}
/*  校验桥梁简称 */
export function checkBridgeShortName(params) {
  return request({
    url: '/ajax/bridge/checkShortName',
    method: 'get',
    params
  })
}
/*  校验桥梁全称 */
export function checkBridgeName(params) {
  return request({
    url: '/ajax/bridge/checkName',
    method: 'get',
    params
  })
}
/*  上传图片 */
export function uploadBridgeImg() {
  return request({
    url: '/ajax/bridge/upload',
    method: 'post'
  })
}

src/api/bridgeInfo.js

@@ -0,0 +1,90 @@
import request from '@/utils/request'
export function getBridgeList(params) { // 用户所有桥梁
  return request({
    url: '/ajax/bridge/byUser',
    method: 'get',
    params
  })
}
export function getBridgeInfo(params) { // 桥梁信息
  return request({
    url: '/ajax/bridge/qo',
    method: 'get',
    params
  })
}
export function getBridgeServers(params) { // 桥梁服务器
  return request({
    url: '/ajax/server/byBridge',
    method: 'get',
    params
  })
}
// 报警信息
export function getDangerList(params) {
  return request({
    url: '/ajax/alarm/msg',
    method: 'get',
    params
  })
}
export function getDangerDetail(params) {
  return request({
    url: '/ajax/alarm/detail',
    method: 'get',
    params
  })
}
// 报警信息
// 未读报警
export function getBridgeUnread(params) {
  return request({
    url: '/ajax/alarm/msg/unread',
    method: 'get',
    params
  })
}
export function setUnreadToRead(params) {
  return request({
    url: '/ajax/alarm/msg/read',
    method: 'post',
    data: params
  })
}
// 未读报警
// 监测信息
export function getMonitorByDay(params) {
  return request({
    url: '/ajax/collect/wave/server/day',
    method: 'get',
    params
  })
}
export function getSysTime(params) {
  return request({
    url: '/ajax/sys/serviceTime',
    method: 'get',
    params
  })
}
export function getMonitorByTime(params) {
  return request({
    url: '/ajax/collect/wave/server/time',
    method: 'get',
    params
  })
}
export function getTimingMonitor(params) {
  return request({
    url: '/ajax/collect/wave/curr',
    method: 'get',
    params
  })
}
// 监测信息

src/api/collectionbox.js

@@ -0,0 +1,73 @@
import request from '@/utils/request'
/*  添加采集盒 */
export function addDevice(params) {
  return request({
    url: '/ajax/device',
    method: 'post',
    data: params
  })
}
/*  更新采集盒信息 */
export function updateDevice(params) {
  return request({
    url: '/ajax/device/update',
    method: 'post',
    data: params
  })
}
/*  删除采集盒信息 */
export function deleteDevice(params) {
  return request({
    url: '/ajax/device/delete',
    method: 'get',
    params
  })
}
/*  查询单个采集盒 */
export function queryDevice(params) {
  return request({
    url: '/ajax/device/qo',
    method: 'get',
    params
  })
}
/*  分页查询采集盒 */
export function pageQueryDevice(params) {
  return request({
    url: '/ajax/device/pq',
    method: 'get',
    params
  })
}
/*  采集盒所属服务器编号列表 */
export function DeviceOfservice(params) {
  return request({
    url: '/ajax/server/listByCode',
    method: 'get',
    params
  })
}
/*  校验采集盒编号 */
export function checkDeviceCode(params) {
  return request({
    url: '/ajax/device/checkCode',
    method: 'get',
    params
  })
}
/*  校验采集盒内部编号 */
export function checkDeviceInternalCode(params) {
  return request({
    url: '/ajax/device/checkSeq',
    method: 'get',
    params
  })
}

src/api/login.js

@@ -0,0 +1,97 @@
import request from '@/utils/request'
export function login(account, pw, vc) {
  return request({
    url: '/ajax/sys/login',
    method: 'post',
    data: {
      account,
      pw,
      vc
    }
  })
}
export function getInfo() {
  return request({
    url: '/ajax/sys/user',
    method: 'get'
  })
}
export function logout() {
  return request({
    url: '/ajax/sys/logout',
    method: 'get'
  })
}
export function isReg(params) {
  return request({
    url: '/ajax/sys/check',
    method: 'get',
    params
  })
}
// 找回密码
export function getResetMsgPhone(params) {
  return request({
    url: '/ajax/sys/resetPwMobile',
    method: 'get',
    params
  })
}
export function resetPwdByTel(pw, vc) {
  return request({
    url: '/ajax/sys/resetPasswordWithMobilePhone',
    method: 'post',
    data: {
      pw,
      vc
    }
  })
}
// 修改密码
export function changePw(params) {
  return request({
    url: '/ajax/sys/changePw',
    method: 'post',
    data: params
  })
}
// 获取修改个人信息
export function getMyself(params) {
  return request({
    url: '/ajax/sys/qo',
    method: 'get',
    params
  })
}
export function updateMyself(params) {
  return request({
    url: '/ajax/sys/update',
    method: 'post',
    data: params
  })
}
// 获取公告信息
export function getNotice() {
  return request({
    url: '/ajax/sys/notice',
    method: 'get'
  })
}
export function updateNotice(params) {
  return request({
    url: '/ajax/sys/notice',
    method: 'post',
    data: params
  })
}

src/api/pictureVc.js

@@ -0,0 +1,5 @@
import { comUrl } from '@/utils/index'
export function getPictureVC(flag) {
  return comUrl + '/ajax/PictureVC?t=' + new Date().getTime() + '&flag=' + flag + '&__timeout=' + 3 * 1000 * 60
}

src/api/sensor.js

@@ -0,0 +1,73 @@
import request from '@/utils/request'
/*  添加传感器 */
export function addDevice(params) {
  return request({
    url: '/ajax/transducer',
    method: 'post',
    data: params
  })
}
/*  更新传感器信息 */
export function updateDevice(params) {
  return request({
    url: '/ajax/transducer/update',
    method: 'post',
    data: params
  })
}
/*  删除传感器信息 */
export function deleteDevice(params) {
  return request({
    url: '/ajax/transducer/delete',
    method: 'get',
    params
  })
}
/*  查询单个传感器 */
export function queryDevice(params) {
  return request({
    url: '/ajax/transducer/qo',
    method: 'get',
    params
  })
}
/*  分页查询传感器 */
export function pageQueryDevice(params) {
  return request({
    url: '/ajax/transducer/pq',
    method: 'get',
    params
  })
}
/*  传感器所属采集盒编号列表 */
export function DeviceOfservice(params) {
  return request({
    url: '/ajax/device/listByCode',
    method: 'get',
    params
  })
}
/*  校验传感器编号 */
export function checkDeviceCode(params) {
  return request({
    url: '/ajax/transducer/checkCode',
    method: 'get',
    params
  })
}
/*  校验传感器内部编号 */
export function checkDeviceInternalCode(params) {
  return request({
    url: '/ajax/transducer/checkSeq',
    method: 'get',
    params
  })
}

src/api/server.js

@@ -0,0 +1,73 @@
import request from '@/utils/request'
/*  添加服务器 */
export function addDevice(params) {
  return request({
    url: '/ajax/server',
    method: 'post',
    data: params
  })
}
/*  更新服务器信息 */
export function updateDevice(params) {
  return request({
    url: '/ajax/server/update',
    method: 'post',
    data: params
  })
}
/*  删除服务器信息 */
export function deleteDevice(params) {
  return request({
    url: '/ajax/server/delete',
    method: 'get',
    params
  })
}
/*  查询单个服务器 */
export function queryDevice(params) {
  return request({
    url: '/ajax/server/qo',
    method: 'get',
    params
  })
}
/*  分页查询服务器 */
export function pageQueryDevice(params) {
  return request({
    url: '/ajax/server/pq',
    method: 'get',
    params
  })
}
/*  服务器所属采桥梁列表 */
export function DeviceOfservice(params) {
  return request({
    url: '/ajax/bridge/list',
    method: 'get',
    params
  })
}
/*  校验服务器编号 */
export function checkDeviceCode(params) {
  return request({
    url: '/ajax/server/checkCode',
    method: 'get',
    params
  })
}
/*  校验服务器内部编号 */
export function checkDeviceInternalCode(params) {
  return request({
    url: '/ajax/server/checkSeq',
    method: 'get',
    params
  })
}

src/api/userManagemen.js

@@ -0,0 +1,82 @@
import request from '@/utils/request'
/*  停用用户 */
export function deleteUser(params) {
  return request({
    url: '/ajax/sys/ban',
    method: 'get',
    params
  })
}
/*  查询负责桥梁 */
export function queryResponsibleBridge(params) {
  return request({
    url: '/ajax/bridge/byUserId',
    method: 'get',
    params
  })
}
/*  分页查询用户 */
export function pageQueryUser(params) {
  return request({
    url: '/ajax/sys/pq',
    method: 'get',
    params
  })
}
/*  检查账号是否注册 */
export function checkRegister(params) {
  return request({
    url: '/ajax/sys/check',
    method: 'get',
    params
  })
}
/*  新增新用户 */
export function addRegister(params) {
  return request({
    url: '/ajax/sys/insert',
    method: 'post',
    data: params
  })
}
/*  更新新用户 */
export function updateRegister(params) {
  return request({
    url: '/ajax/sys/update',
    method: 'post',
    data: params
  })
}
/*  查找用户信息 */
export function queryRegister(params) {
  return request({
    url: '/ajax/sys/qo',
    method: 'get',
    params
  })
}
/*  传感器所属采集盒编号列表 */
export function DeviceOfservice(params) {
  return request({
    url: '/ajax/bridge/list',
    method: 'get',
    params
  })
}
/*  更新用户权限 */
export function updatePermission(params) {
  return request({
    url: '/ajax/sys/userBridge/refresh',
    method: 'post',
    data: params
  })
}

src/components/Breadcrumb/index.vue

@@ -0,0 +1,58 @@
<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if="item.meta.title">
        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{item.meta.title}}</span>
        <router-link v-else :to="item.redirect||item.path" replace>{{item.meta.title}}</router-link>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>
<script>
import Cookies from 'js-cookie'
export default {
  created() {
    this.getBreadcrumb()
  },
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  methods: {
    getBreadcrumb() {
      const bridgeName = Cookies.get('bridgeName')
      let matched = this.$route.matched.filter(item => {
        if (bridgeName && item.path === '/bridgeHome') {
          item.meta.title = bridgeName
        }
        return item.name
      })
      const first = matched[0]
      if (first && first.name !== 'dashboard') {
        matched = [{ path: '/dashboard', meta: { title: '主页' }}].concat(matched)
      }
      this.levelList = matched
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 10px;
    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }
</style>

src/components/CityPicker/index.vue

@@ -0,0 +1,142 @@
<template>
  <div class="linkage">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-select
          v-model="sheng"
          @change="choseProvince"
          placeholder="省">
          <el-option
            v-for="item in province"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select
          v-model="shi"
          @change="choseCity"
          placeholder="市">
          <el-option
            v-for="item in shi1"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select
          v-model="qu"
          @change="choseBlock"
          placeholder="区(县)">
          <el-option
            v-for="item in qu1"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import queryDict from '@/utils/queryDict'
export default {
  props: ['addrCode'],
  data() {
    return {
      firstFlag: false,
      province: [],
      sheng: '',
      shi: '',
      shi1: [],
      qu: '',
      qu1: [],
      city: '',
      block: ''
    }
  },
  watch: {
    addrCode: function() {
      this.initpsq()
    }
  },
  methods: {
    getCityData: function() {
      var that = this
      queryDict.applyDict('XZQH', function(dictData) {
        if (dictData) {
          var data = dictData.sort((obj1, obj2) => {
            return obj1.code - obj2.code
          })
          that.province = {}
          data.map(item => {
            if (item.code.match(/0000$/)) {
              that.province[item.code] = { id: item.code, value: item.caption, children: {}}
            } else if (item.code.match(/00$/)) {
              var p = that.province[item.code.slice(0, 2) + '0000']
              p.children[item.code] = { id: item.code, value: item.caption, children: {}}
              if (!p.defaultChild) {
                p.defaultChild = p.children[item.code]
              }
            } else {
              var pp = that.province[item.code.slice(0, 2) + '0000'].children[item.code.slice(0, 4) + '00']
              pp.children[item.code] = { id: item.code, value: item.caption }
              if (!pp.defaultChild) {
                pp.defaultChild = pp.children[item.code]
              }
            }
          })
        } else {
          console.log(dictData.status)
        }
      })
    },
    choseProvince: function(e) {
      var p = this.province[e]
      this.shi1 = p.children
      this.shi = p.defaultChild.value
      this.qu1 = p.defaultChild.children
      this.qu = p.defaultChild.defaultChild.value
      this.E = p.defaultChild.defaultChild.id
      this.sheng = p.value
      this.$emit('paren', this.E)
    },
    choseCity: function(e) {
      var p = this.province[e.slice(0, 2) + '0000'].children[e]
      this.shi = p.value
      this.qu1 = p.children
      this.qu = p.defaultChild.value
      this.E = p.defaultChild.id
      this.$emit('paren', this.E)
    },
    choseBlock: function(e) {
      this.qu = this.province[e.slice(0, 2) + '0000'].children[e.slice(0, 4) + '00'].children[e].value
      this.E = e
      this.$emit('paren', this.E)
    },
    initpsq: function() {
      if (!this.addrCode) {
        this.sheng = ''
        this.shi = ''
        this.qu = ''
        return
      }
      const s = this.addrCode.substring(0, 2) + '0000'
      const si = this.addrCode.substring(0, 4) + '00'
      const x = this.addrCode
      var p = this.province[s]
      this.sheng = p.value
      this.shi = p.children[si].value
      this.qu = p.children[si].children[x].value
    }
  },
  created: function() {
    this.getCityData()
  }
}
</script>

src/components/DefaultPage/index.vue

@@ -0,0 +1,57 @@
<template>
  <div class="ev_content" v-show="show">
    <div class="notice_d" v-show="noResult">
      <div class="d_prompt">
        <p class="d_2">{{message2}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: true
    },
    noResult: {
      type: Boolean,
      default: true
    },
    message2: {
      type: String,
      default: '没有相关数据'
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .ev_content{
    width: 100%;
    height: 42%;
    z-index: 11;
    padding:40px;
    box-sizing: border-box;
    display: flex;
    justify-content:center;
  }
  .d_prompt p{
    margin: 0;
    font-size: 0;
  }
  .d_prompt .d_2{
    height: auto;
    margin: 0 auto;
    word-break: break-word;
    font-size: 13px;
    color: #999999;
    text-align: center;
    margin-top: 10px;
  }
</style>

src/components/Hamburger/index.vue

@@ -0,0 +1,44 @@
<template>
  <div>
    <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
      <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
        p-id="1692"></path>
      <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
        p-id="1693"></path>
      <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
        p-id="1694"></path>
    </svg>
  </div>
</template>
<script>
export default {
  name: 'hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    toggleClick: {
      type: Function,
      default: null
    }
  }
}
</script>
<style scoped>
.hamburger {
	display: inline-block;
	cursor: pointer;
	width: 20px;
	height: 20px;
	transform: rotate(90deg);
	transition: .38s;
	transform-origin: 50% 50%;
}
.hamburger.is-active {
	transform: rotate(0deg);
}
</style>

src/components/Marqueebox/index.vue

@@ -0,0 +1,146 @@
<template>
  <div>
    <el-dialog title="系统消息编辑" :visible.sync="dialogFormVisible">
      <el-form :model="formNotice" ref="formNotice" :rules="rules">
        <el-input type="textarea" rows="6" maxlength="100" v-model="formNotice.desc" @input="limitFn"></el-input>
      </el-form>
      <div class="limit_num">还可以输入{{ableNum}}字</div>
      <div slot="footer" class="dialog-footer">
        <el-button v-waves @click="cancelNotice('formNotice')">取 消</el-button>
        <el-button type="primary" v-waves @click="setNotice('formNotice')">确 定</el-button>
      </div>
    </el-dialog>
    <el-menu class="message-box" mode="horizontal">
      <div class="marquee_box">
        <span class="tit">系统公告：</span>
        <el-tooltip placement="bottom-end" effect="dark">
          <div slot="content" class="popper-tips">{{formNotice.text}}</div>
          <div class="marquee_text">{{formNotice.text}}</div>
        </el-tooltip>
        <span class="btn-span" v-if="isShow" @click="openNoticeDialog">设置</span>
      </div>
    </el-menu>
  </div>
</template>
 
<script>
import waves from '@/directive/waves'
import { getNotice, updateNotice } from '@/api/login'
export default {
  props: {
    isShow: {
      type: Boolean
    }
  },
  directives: {
    waves
  },
  data() {
    return {
      dialogFormVisible: false,
      ableNum: 100,
      formNotice: {
        desc: '',
        text: ''
      },
      rules: {
        desc: [
          { required: true, message: '请编辑内容发送', trigger: 'blur' },
          { max: 100, message: '不得超过100个字', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getNotice()
  },
  methods: {
    limitFn() {
      this.ableNum = 100 - this.formNotice.desc.length
    },
    getNotice() {
      getNotice().then(res => {
        if (res.success) {
          this.formNotice.desc = res.data
          this.formNotice.text = res.data
          this.limitFn()
        }
      })
    },
    openNoticeDialog() {
      this.dialogFormVisible = true
    },
    cancelNotice(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
      this.formNotice.desc = this.formNotice.text
    },
    setNotice(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            cnt: this.formNotice.desc
          }
          updateNotice(param).then(res => {
            if (res.success) {
              this.dialogFormVisible = false
              this.$refs[formName].resetFields()
              this.formNotice.text = this.formNotice.desc
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
 
<style rel="stylesheet/scss" lang="scss" scoped>
.message-box{
  height: 50px;
  line-height: 50px;
  border-radius: 0px !important;
  color: #303133;
  background: #c7e3ff;
  padding: 0 20px;
  font-size: 14px;
  .marquee_box {
    width: 100%;
    position: relative;
    height: 50px;
    overflow: hidden;
    .marquee_text {
      line-height: 50px;
      position:absolute;
      top:0;
      padding-left: 0;
      left:68px;
      right:80px;
      box-sizing: border-box;
      text-overflow: ellipsis;
      white-space:nowrap;
      overflow: hidden;
    }
    .btn-span{
      position:absolute;
      top:0;
      right:0;
      cursor: pointer;
    }
  }
}
.limit_num{
  font-size: 14px;
  color: #ff0000;
  text-align: right;
}
.popper-tips{
  font-size: 13px;
  line-height: 20px;
  display:block;
  max-width: 500px;
  word-break: break-all;
}
</style>

src/components/SvgIcon/index.vue

@@ -0,0 +1,42 @@
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

src/directive/sticky.js

@@ -0,0 +1,91 @@
const vueSticky = {}
let listenAction
vueSticky.install = Vue => {
  Vue.directive('sticky', {
    inserted(el, binding) {
      const params = binding.value || {}
      const stickyTop = params.stickyTop || 0
      const zIndex = params.zIndex || 1000
      const elStyle = el.style
      elStyle.position = '-webkit-sticky'
      elStyle.position = 'sticky'
      // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
      // if (~elStyle.position.indexOf('sticky')) {
      //     elStyle.top = `${stickyTop}px`;
      //     elStyle.zIndex = zIndex;
      //     return
      // }
      const elHeight = el.getBoundingClientRect().height
      const elWidth = el.getBoundingClientRect().width
      elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`
      const parentElm = el.parentNode || document.documentElement
      const placeholder = document.createElement('div')
      placeholder.style.display = 'none'
      placeholder.style.width = `${elWidth}px`
      placeholder.style.height = `${elHeight}px`
      parentElm.insertBefore(placeholder, el)
      let active = false
      const getScroll = (target, top) => {
        const prop = top ? 'pageYOffset' : 'pageXOffset'
        const method = top ? 'scrollTop' : 'scrollLeft'
        let ret = target[prop]
        if (typeof ret !== 'number') {
          ret = window.document.documentElement[method]
        }
        return ret
      }
      const sticky = () => {
        if (active) {
          return
        }
        if (!elStyle.height) {
          elStyle.height = `${el.offsetHeight}px`
        }
        elStyle.position = 'fixed'
        elStyle.width = `${elWidth}px`
        placeholder.style.display = 'inline-block'
        active = true
      }
      const reset = () => {
        if (!active) {
          return
        }
        elStyle.position = ''
        placeholder.style.display = 'none'
        active = false
      }
      const check = () => {
        const scrollTop = getScroll(window, true)
        const offsetTop = el.getBoundingClientRect().top
        if (offsetTop < stickyTop) {
          sticky()
        } else {
          if (scrollTop < elHeight + stickyTop) {
            reset()
          }
        }
      }
      listenAction = () => {
        check()
      }
      window.addEventListener('scroll', listenAction)
    },
    unbind() {
      window.removeEventListener('scroll', listenAction)
    }
  })
}
export default vueSticky

src/directive/waves/index.js

@@ -0,0 +1,13 @@
import waves from './waves'
const install = function(Vue) {
  Vue.directive('waves', waves)
}
if (window.Vue) {
  window.waves = waves
  Vue.use(install); // eslint-disable-line
}
waves.install = install
export default waves

src/directive/waves/waves.css

@@ -0,0 +1,26 @@
.waves-ripple {
    position: absolute;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    background-clip: padding-box;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 1;
}
.waves-ripple.z-active {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
}

src/directive/waves/waves.js

@@ -0,0 +1,42 @@
import './waves.css'
export default{
  bind(el, binding) {
    el.addEventListener('click', e => {
      const customOpts = Object.assign({}, binding.value)
      const opts = Object.assign({
        ele: el, // 波纹作用元素
        type: 'hit', // hit点击位置扩散center中心点扩展
        color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
      }, customOpts)
      const target = opts.ele
      if (target) {
        target.style.position = 'relative'
        target.style.overflow = 'hidden'
        const rect = target.getBoundingClientRect()
        let ripple = target.querySelector('.waves-ripple')
        if (!ripple) {
          ripple = document.createElement('span')
          ripple.className = 'waves-ripple'
          ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
          target.appendChild(ripple)
        } else {
          ripple.className = 'waves-ripple'
        }
        switch (opts.type) {
          case 'center':
            ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
            ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
            break
          default:
            ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
            ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
        }
        ripple.style.backgroundColor = opts.color
        ripple.className = 'waves-ripple z-active'
        return false
      }
    }, false)
  }
}

src/icons/index.js

@@ -0,0 +1,9 @@
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
// register globally
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

src/icons/svg/Department.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1536893949585" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2168" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1024.244053 733.013333c0 46.933333-20.906667 55.701333-97.92 56.064-20.693333-182.037333-118.4-271.765333-222.933333-314.496a244.565333 244.565333 0 0 0 6.186667-299.029333 149.226667 149.226667 0 0 1 97.92 280.874667A281.344 281.344 0 0 1 1024.244053 733.013333zM603.124053 489.28C727.924053 513.557333 874.91072 596.181333 874.91072 832c0 64-85.12 64-362.666667 64-278.613333 0-362.666667 0.661333-362.666666-64 0-235.242667 146.56-318.293333 271.786666-342.72a192 192 0 1 1 181.76 0zM320.457387 473.6C216.564053 517.354667 119.07072 609.322667 98.377387 789.333333 20.937387 789.162667 0.244053 780.650667 0.244053 733.12a271.722667 271.722667 0 0 1 215.466667-277.333333A149.141333 149.141333 0 0 1 314.91072 175.573333a244.288 244.288 0 0 0 5.546667 298.026667z" p-id="2169"></path></svg>

src/icons/svg/doctor.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1536893969359" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2954" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M376.394 215.756l25.155 0 0 13.94c0 2.759 0.835 5.241 2.019 7.545 1.196 6.564 6.634 11.548 13.47 11.548 4.665 0 8.592-2.395 11.121-5.895 4.111-3.078 6.94-7.713 6.94-13.199l0-13.94 19.52 0c9.276 0 16.793-7.546 16.793-16.789 0-9.243-7.517-16.793-16.793-16.793l-19.52 0 0-20.942c0-9.276-7.518-16.793-16.789-16.793-9.277 0-16.761 7.517-16.761 16.793l0 20.942-25.155 0c-9.243 0-16.761 7.55-16.761 16.793C359.633 208.21 367.146 215.756 376.394 215.756L376.394 215.756zM376.394 215.756" p-id="2955"></path><path d="M759.789 820.6l-1.121-3.369c-47.04-114.26-143.281-195.393-257.194-220.975 68.797-49.038 115.47-154.205 115.47-279.242 0-79.528-19.608-154.998-55.218-212.506l-4.228-6.822-7.531-2.774c-86.805-31.883-186.303-31.883-273.043 0l-7.537 2.774-4.227 6.822c-35.623 57.479-55.25 132.963-55.25 212.506 0 128.354 49.114 235.947 120.945 283.184C224.793 629.416 135.003 708.17 90.076 817.23l-1.107 3.369c-4.336 17.867-11.82 63.007 12.378 96.105 9.548 13.063 28.021 29.124 61.754 31.476 31.081 2.135 118.567 4.288 261.299 6.391l1.046 0 0.184 0c141.446-2.107 228.932-4.256 260.088-6.391 33.672-2.352 52.131-18.412 61.675-31.476C771.608 883.606 764.092 838.477 759.789 820.6L759.789 820.6zM285.708 126.407c81.416-27.76 173.959-27.76 255.476 0 29.167 50.512 45.655 114.767 48.71 183.259-157.249-30.982-293.67-11.666-352.928 0.258C239.987 241.314 256.49 176.971 285.708 126.407L285.708 126.407zM239.068 332.728c47.528-10.201 189.017-33.938 348.738-0.305C578.014 477.233 502.183 594.2 413.431 594.2 324.739 594.2 248.964 477.402 239.068 332.728L239.068 332.728zM730.003 896.754c-5.907 8.052-15.513 12.43-29.27 13.402-32.447 2.223-125.202 4.479-275.765 6.718l0.375 24.92-1.571-24.92c-150.563-2.238-243.319-4.495-275.686-6.718-13.836-0.973-23.443-5.351-29.331-13.402-10.759-14.715-9.929-40.235-5.452-59.896 53.979-129.082 174.573-212.702 307.499-213.35l3.598 0.226c1.09 0 2.291-0.08 3.313-0.094 133.23 0.516 253.81 84.136 307.737 213.199C739.932 856.519 740.743 882.039 730.003 896.754L730.003 896.754zM730.003 896.754" p-id="2956"></path><path d="M936.061 812.46c-37.068-116.129-118.628-159.982-172.603-189.004-8.609-4.636-16.577-8.91-23.672-13.15-9.76-5.717-19.759-10.441-28.613-14.608-4.969-2.351-11.153-5.259-15.517-7.686C818.104 406.105 802.403 244.29 801.737 238.228c-4.791-93.061-94.684-126.432-141.54-131.082l-15.428-1.53-3.06 30.879 15.456 1.535c4.425 0.436 108.93 11.833 113.654 102.636 0.062 0.727 3.092 34.413-4.786 87.134-35.524-14.17-88.898-17.535-96.171-17.896l-1.577 31.005c26.432 1.347 71.073 7.315 92.108 17.883-12.73 60.661-39.522 138.598-95.895 219.81l-1.699 3.163c-8.427 21.476 14.729 32.371 35.159 41.995 8.062 3.819 17.216 8.104 26.032 13.275 7.367 4.377 15.733 8.891 24.766 13.742 52.553 28.248 124.503 66.936 157.235 168.83 6.151 39.128 0.244 51.586-2.576 55.129-1.332 1.686-3.486 3.44-9.032 3.819-20.641 1.379-48.16 2.122-48.25 2.122l0.85 31.037c0 0 28.275-0.773 49.493-2.187 13.246-0.905 23.762-6.09 31.213-15.436C939.908 878.773 942.729 853.571 936.061 812.46L936.061 812.46zM936.061 812.46" p-id="2957"></path></svg>

src/icons/svg/example.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504199105" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M770.56 460.8h250.88C998.4 220.16 803.84 25.6 563.2 2.56v250.88c104.96 20.48 186.88 102.4 207.36 207.36z m0 0M460.8 253.44V2.56C220.16 25.6 25.6 220.16 2.56 460.8h250.88c20.48-104.96 102.4-186.88 207.36-207.36z m0 0M563.2 770.56v250.88c243.2-23.04 435.2-217.6 460.8-460.8H773.12C750.08 668.16 668.16 750.08 563.2 770.56z m0 0M253.44 563.2H2.56c23.04 243.2 217.6 435.2 460.8 460.8V773.12C355.84 750.08 273.92 668.16 253.44 563.2z m0 0" fill="" p-id="1816"></path></svg>

src/icons/svg/eye.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503993826520" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7878" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M941.677063 391.710356c9.337669-14.005992 6.224772-32.68133-6.224772-43.575447-14.005992-10.894118-32.68133-7.78122-43.575447 6.224771-1.556449 1.556449-174.300768 205.426673-379.727441 205.426673-199.200878 0-379.727441-205.426673-381.28389-206.982098-10.894118-12.450567-31.124881-14.005992-43.575448-3.112898-12.450567 10.894118-14.005992 31.124881-3.112897 43.575448 3.112897 4.668323 40.46255 46.687322 99.600439 93.375667l-79.369676 82.48155c-12.450567 12.450567-10.894118 32.68133 1.556449 43.575448 3.112897 6.224772 10.894118 9.337669 18.675338 9.337669 7.78122 0 15.562441-3.112897 21.787213-9.337669l85.594447-88.706321c40.46255 28.013007 88.706321 54.469566 141.619438 73.14388L340.959485 707.631586c-4.668323 17.118889 4.669346 34.237779 21.787213 38.906101h9.337669c14.005992 0 26.456558-9.337669 29.568432-23.343661l32.68133-110.494556c24.90011 4.668323 51.356668 7.78122 77.813227 7.78122s52.913117-3.112897 77.813227-7.78122l32.68133 108.938108c3.112897 14.005992 17.118889 23.343661 29.569456 23.343661 3.112897 0 6.224772 0 7.78122-1.556449 17.118889-4.669346 26.456558-21.787212 21.788236-38.906102l-32.68133-108.938108c52.913117-18.675338 101.156888-45.131897 141.619438-73.14388l84.037998 87.150896c6.224772 6.224772 14.005992 9.337669 21.787212 9.337669 7.78122 0 15.562441-3.112897 21.787212-9.337669 12.450567-12.450567 12.450567-31.124881 1.556449-43.575448l-79.369675-82.48155c63.808258-46.688345 101.158934-91.820242 101.158934-91.820242z" p-id="7879"></path></svg>

src/icons/svg/form.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504319223" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3230" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M942.827259 80.3367c-11.42419-11.406794-26.41051-17.117866-41.377386-17.117866-14.985296 0-29.952172 5.711072-41.358967 17.117866L719.392444 221.014696l-19.441794 19.441794L681.577187 258.832 569.516971 370.909611 375.99749 564.411697l0 0.019443 0 84.372619 81.145112 0 0.010233 0 95.418186-95.435583 213.398228-213.400275 3.14155-3.14155-0.019443 0 9.979282-9.977235 0 0L942.827259 163.073052C965.697129 140.259464 965.697129 103.186104 942.827259 80.3367z" p-id="3231"></path><path d="M793.542234 367.521444 580.14196 580.939115 484.72582 676.376745 473.299583 687.800935 457.152834 687.800935 375.99749 687.800935 337.000314 687.800935 337.000314 648.803759 337.000314 564.411697 337.000314 548.264948 348.424504 536.838711 541.943986 343.338672 654.004201 231.259014 665.428392 219.834824 64.020082 219.834824 64.020082 960.781166 804.966425 960.781166 804.966425 356.116697 796.607036 364.475062Z" p-id="3232"></path></svg>

src/icons/svg/hospital.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1536894395933" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1307" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M481.3 494.7h61.4v64.6h-61.4zM481.8 627.3h61.9v63.3h-61.9zM480.8 362.6h61.8v61.2h-61.8zM348.1 363.2h59.8v62.1h-59.8zM612.6 362.1H673v62.7h-60.4zM347.2 494.9h62v63.5h-62zM612.5 495h62v63.3h-62zM346.9 627.6h61.5v63.7h-61.5zM613.2 627h61.2v63.6h-61.2z" p-id="1308"></path><path d="M897.3 893.9V594.4c0-49-39.7-88.7-88.7-88.7H784V339.4c0-49.1-39.8-88.8-88.8-88.8H529.9v-72.4h89.8v-43.3h-89.8v-73h-46.6v72.8h-89.8V178h89.8v72.4H318.2c-49.1 0-88.8 39.8-88.8 88.8v166.3h-19.8c-49 0-88.7 39.7-88.7 88.7v299.5H59.1v44.4h900v-44.4h-61.8z m-730.6 0V594.4c0-24.5 19.9-44.4 44.4-44.4h18.3v343.8h-62.7z m107 0V339.3c0-24.5 19.9-44.4 44.4-44.4h377.1c24.5 0 44.4 19.9 44.4 44.4v554.6H273.7z m580.7 0h-70.5V550H810c24.5 0 44.4 19.9 44.4 44.4v299.5z" p-id="1309"></path></svg>

src/icons/svg/instrument.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1536894006748" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3211" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M666.12424 400.965138c4.973268 3.978614 8.951883 9.946536 9.946536 16.410762 0.994654 6.962575-0.497327 13.427824-4.475941 18.897396l-131.290185 188.978049-64.650439-46.746674L621.36585 368.639918 666.12424 400.965138zM359.282806 494.956835l5.470595-8.454556 31.827893 23.870664c3.978614 2.486634 7.957229 3.481288 11.935843 2.983961 3.978614-0.994654 7.957229-2.983961 10.443863-6.962575 4.973268-6.962575 3.481288-17.405415-3.978614-22.378683l-31.827893-23.870664 12.43317-18.400069 32.32522 23.870664c3.481288 2.486634 7.957229 3.481288 11.935843 2.486634 3.978614-0.497327 7.459902-2.983961 10.443863-6.465249 4.973268-7.459902 2.983961-17.405415-3.978614-22.87601l-32.32522-23.373337 12.930497-18.400069 32.32522 23.373337c3.481288 2.983961 7.459902 3.481288 11.438517 2.983961 4.475941-0.497327 7.957229-2.983961 10.443863-6.465249 4.973268-7.459902 3.481288-17.405415-3.481288-22.87601l-32.32522-23.373337 12.930497-18.400069 31.827893 23.373337c3.978614 2.486634 7.957229 3.481288 11.935843 2.983961 3.978614-0.994654 7.957229-2.983961 10.443863-6.962575 4.973268-6.962575 3.481288-17.405415-3.978614-22.378683l-31.827893-23.870664 14.919804-21.38403c7.957229-11.438517 23.373337-13.925151 34.314527-5.967922l44.261063 32.822546L423.933245 541.207206 359.282806 494.956835zM360.774787 592.927147l-75.094302 108.414175c-5.470595 7.459902-12.930497 11.935843-20.886703 13.427824-7.957229 1.49198-16.410762-0.497327-23.373337-5.470595-14.422478-10.443863-17.405415-30.833239-7.459902-45.753043l75.094302-108.413152c10.443863-14.422478 30.335912-17.902742 44.261063-7.459902C367.737362 558.115294 370.721323 578.50467 360.774787 592.927147zM270.761704 794.337343c-6.962575 10.94119-21.38403 13.427824-31.827893 5.470595-10.443863-7.459902-12.930497-22.378683-5.470595-32.822546 7.459902-10.94119 21.881356-13.427824 32.32522-5.470595C276.232299 768.974699 278.221606 783.894504 270.761704 794.337343zM847.642386 238.841713 615.895255 68.264756c-13.925151-10.443863-33.8172-6.962575-43.763736 7.459902-10.443863 14.919804-6.962575 35.30918 7.459902 45.753043l90.013083 66.142419-62.661132 90.013083-82.553181-60.671825c-8.951883-6.465249-19.892049-9.449209-30.335912-7.459902-10.94119 1.989307-20.389376 7.957229-26.854625 16.908088L189.203176 627.739001c-18.400069 26.357298-23.870664 59.677171-14.919804 90.51041l37.795814 127.808898-41.277102 60.174498c-10.443863 14.422478-6.962575 34.811854 7.459902 45.254693 6.962575 4.973268 15.416108 6.962575 23.373337 5.470595s15.417131-5.967922 20.389376-12.930497l43.266409-62.163805 128.803551-3.481288c31.827893-0.994654 61.666478-16.908088 80.066547-43.763736l276.504498-399.837454c12.930497-18.897396 8.951883-45.255717-9.449209-58.682517l-83.050508-60.671825 62.661132-90.013083 90.013083 66.142419c7.459902 5.470595 15.914458 6.962575 23.870664 5.470595 7.957229-0.994654 15.416108-5.470595 20.389376-12.930497C865.545128 269.177626 862.063841 249.285576 847.642386 238.841713z" p-id="3212"></path></svg>

src/icons/svg/list.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1525761666409" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10880" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M107.2 212.8m-67.2 0a4.2 4.2 0 1 0 134.4 0 4.2 4.2 0 1 0-134.4 0Z" p-id="10881"></path><path d="M980.8 145.6 297.6 145.6c-9.6 0-16 8-16 16l0 102.4c0 9.6 8 16 16 16l683.2 0c9.6 0 16-8 16-16l0-102.4C996.8 152 988.8 145.6 980.8 145.6z" p-id="10882"></path><path d="M96 497.6m-67.2 0a4.2 4.2 0 1 0 134.4 0 4.2 4.2 0 1 0-134.4 0Z" p-id="10883"></path><path d="M968 430.4 284.8 430.4c-9.6 0-16 8-16 16l0 102.4c0 9.6 8 16 16 16l683.2 0c9.6 0 16-8 16-16l0-102.4C984 438.4 977.6 430.4 968 430.4z" p-id="10884"></path><path d="M96 795.2m-67.2 0a4.2 4.2 0 1 0 134.4 0 4.2 4.2 0 1 0-134.4 0Z" p-id="10885"></path><path d="M968 728 284.8 728c-9.6 0-16 8-16 16l0 102.4c0 9.6 8 16 16 16l683.2 0c9.6 0 16-8 16-16l0-102.4C984 736 977.6 728 968 728z" p-id="10886"></path></svg>

src/icons/svg/msgvc.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1534314336166" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1053" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M835.1 200.9c-7.7 0.3-15.3 0.4-22.7 0.4-194.9 0-280.9-82.6-281.6-83.3l-19.4-19.7-19.6 19.7c-0.8 0.9-85 83.3-281.5 83.3-7.4 0-15-0.1-22.7-0.4l-27.4-0.9v374.4c0 98 35.4 241 341.6 350.4l9.6 3.4 9.6-3.4c306.2-109.4 341.6-252.4 341.6-350.4V200l-27.5 0.9M481.2 671.2L304.8 517.6l46.8-37.3 93.8 68S574.9 416.6 700 355l17.9 19.8S561.6 502.2 481.2 671.2m0 0" p-id="1054"></path></svg>

src/icons/svg/nested.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1529559567446" class="icon" style="" viewBox="0 0 1167 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1767" xmlns:xlink="http://www.w3.org/1999/xlink" width="227.9296875" height="200"><defs><style type="text/css"></style></defs><path d="M0.015952 74.459413A2.286 2.286 1440 1 0 145.85218 74.459413 2.286 2.286 1440 1 0 0.015952 74.459413zM291.720312 1.525347 1166.801488 1.525347 1166.801488 147.361574 291.720312 147.361574zM291.720312 366.163773A2.286 2.286 1440 1 0 437.55654 366.163773 2.286 2.286 1440 1 0 291.720312 366.163773zM583.424672 293.229707 1166.801488 293.229707 1166.801488 439.065934 583.424672 439.065934zM291.720312 949.540588A2.286 2.286 1440 1 0 437.55654 949.540588 2.286 2.286 1440 1 0 291.720312 949.540588zM583.424672 876.638427 1166.801488 876.638427 1166.801488 1022.474654 583.424672 1022.474654zM583.424672 657.836228A2.286 2.286 1440 1 0 729.2609 657.836228 2.286 2.286 1440 1 0 583.424672 657.836228zM875.129032 584.934067 1166.801488 584.934067 1166.801488 730.770294 875.129032 730.770294z" p-id="1768"></path></svg>

src/icons/svg/password-view.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1536041882597" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1501" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M968.548352 614.418432c0-124.667904-203.543552-233.57952-458.737664-233.57952-255.22688 0-458.737664 108.9024-458.737664 233.57952s203.50976 233.578496 458.737664 233.578496c255.194112 0 458.737664-108.910592 458.737664-233.578496z m51.073024 0c0 161.544192-230.147072 284.690432-509.810688 284.690432C230.11328 899.108864 0 775.97184 0 614.418432 0 452.864 230.11328 329.728 509.810688 329.728c279.66464 0 509.810688 123.14624 509.810688 284.690432z" p-id="1502"></path><path d="M460.292096 582.100992c3.84-21.878784 16.09728-40.85248 33.871872-53.301248 11.55584-8.091648 14.367744-24.026112 6.28224-35.590144-8.086528-11.564032-24.008704-14.377984-35.56352-6.286336-28.786688 20.159488-48.685056 50.962432-54.893568 86.335488-2.440192 13.9008 6.843392 27.150336 20.733952 29.591552 13.89056 2.44224 27.128832-6.847488 29.569024-20.749312z" p-id="1503"></path><path d="M682.94656 594.01216c0-89.438208-72.479744-161.973248-161.850368-161.973248-89.358336 0-161.799168 72.522752-161.799168 161.972224s72.440832 161.972224 161.799168 161.972224c89.370624 0 161.850368-72.534016 161.850368-161.972224z m51.073024 0c0 117.664768-95.345664 213.082112-212.923392 213.082112C403.526656 807.094272 308.224 711.684096 308.224 594.01216 308.224 476.338176 403.526656 380.928 521.096192 380.928c117.577728 0 212.923392 95.417344 212.923392 213.08416zM729.363456 235.583488c-6.665216 12.438528-22.144 17.115136-34.573312 10.4448-12.429312-6.669312-17.101824-22.15936-10.437632-34.598912l27.222016-50.804736c6.665216-12.438528 22.144-17.115136 34.573312-10.4448 12.429312 6.669312 17.101824 22.15936 10.436608 34.598912l-27.220992 50.804736z m190.130176 78.82752c-8.54528 11.22816-24.567808 13.398016-35.7888 4.845568-11.218944-8.551424-13.386752-24.58624-4.841472-35.8144l34.270208-45.029376c8.54528-11.22816 24.567808-13.398016 35.787776-4.845568 11.218944 8.551424 13.387776 24.58624 4.842496 35.8144l-34.270208 45.029376zM378.037248 211.429376c6.664192 12.438528 1.99168 27.9296-10.437632 34.598912-12.429312 6.670336-27.908096 1.993728-34.573312-10.4448l-27.222016-50.804736c-6.664192-12.438528-1.99168-27.9296 10.437632-34.598912 12.429312-6.670336 27.908096-1.993728 34.573312 10.4448l27.222016 50.804736zM183.54688 283.4432c8.54528 11.22816 6.377472 27.262976-4.842496 35.8144-11.219968 8.552448-27.242496 6.382592-35.787776-4.845568L108.6464 269.381632c-8.54528-11.22816-6.377472-27.262976 4.84352-35.8144 11.218944-8.552448 27.241472-6.382592 35.786752 4.845568l34.270208 45.029376z m322.10944-132.958208c0-14.113792 11.43296-25.555968 25.535488-25.555968 14.103552 0 25.536512 11.442176 25.536512 25.555968v56.835072c0 14.114816-11.43296 25.555968-25.536512 25.555968-14.102528 0-25.536512-11.441152-25.536512-25.555968v-56.835072z" p-id="1504"></path></svg>

src/icons/svg/password.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994678729" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9229" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M780.8 354.579692 665.6 354.579692 665.6 311.689846c0-72.310154-19.849846-193.299692-153.6-193.299692-138.870154 0-153.6 135.049846-153.6 193.299692l0 42.889846L243.2 354.579692 243.2 311.689846C243.2 122.249846 348.790154 0 512 0s268.8 122.249846 268.8 311.689846L780.8 354.579692zM588.8 669.420308C588.8 625.900308 554.220308 590.769231 512 590.769231s-76.8 35.131077-76.8 78.651077c0 29.459692 15.399385 54.468923 38.439385 67.820308l0 89.639385c0 21.740308 17.250462 39.699692 38.4 39.699692s38.4-17.959385 38.4-39.699692l0-89.639385C573.44 723.889231 588.8 698.88 588.8 669.420308zM896 512l0 393.609846c0 65.260308-51.869538 118.390154-115.2 118.390154L243.2 1024c-63.291077 0-115.2-53.129846-115.2-118.390154L128 512c0-65.220923 51.869538-118.390154 115.2-118.390154l537.6 0C844.130462 393.609846 896 446.779077 896 512z" p-id="9230"></path></svg>

src/icons/svg/peoples.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1510727502091" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1640" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M765.184 873.941333c0 33.28-28.501333 60.288-63.829333 60.288L63.829333 934.229333C28.501333 934.229333 0 907.221333 0 873.941333c0-120.576 123.264-233.258667 249.216-277.674667-72.789333-42.496-121.728-118.058667-121.728-204.8L127.488 331.136c0-133.248 114.346667-241.365333 255.146667-241.365333s255.146667 108.117333 255.146667 241.365333l0 60.288c0 86.826667-48.981333 162.304-121.728 204.842667C641.962667 640.725333 765.184 753.365333 765.184 873.941333L765.184 873.941333z" p-id="1641"></path><path d="M848.256 870.570667l126.933333 0c27.008 0 48.810667-20.650667 48.810667-46.08 0-92.245333-94.293333-178.346667-190.549333-212.309333 55.637333-32.512 93.098667-90.282667 93.098667-156.672L926.549333 409.344c0-101.888-87.424-184.576-195.114667-184.576-13.397333 0-26.453333 1.28-39.125333 3.712 15.488 31.146667 24.149333 65.92 24.149333 102.613333l0 60.288c0 86.826667-24.448 152.746667-88.533333 204.842667C746.666667 625.365333 846.421333 751.018667 848.256 870.570667z" p-id="1642"></path></svg>

src/icons/svg/table.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504440567" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5070" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M568.6 0h454.9v454.9H568.6V0z m0 568.6h454.9v454.9H568.6V568.6zM0 568.6h454.9v454.9H0V568.6zM0 0h454.9v454.9H0V0z" fill="" p-id="5071"></path></svg>

src/icons/svg/tree.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511512690058" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3507" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M1013.703 693.345c6.865 6.865 10.297 14.874 10.297 24.027l0 205.944c0 9.916-3.432 18.115-10.297 24.599-6.865 6.483-15.255 9.725-25.171 9.725L782.588 957.64c-9.153 0-17.162-3.242-24.027-9.725-6.865-6.483-10.297-14.683-10.297-24.599L748.264 717.372c0-6.102 1.526-11.823 4.577-17.162s7.246-9.534 12.586-12.586 11.06-4.577 17.162-4.577l77.801 0L860.39 546.896c0-4.577-1.144-8.772-3.432-12.586s-5.339-6.865-9.153-9.153-8.009-3.432-12.585-3.432L543.464 521.725l0 161.323 77.801 0c9.153 0 17.162 3.432 24.027 10.297s10.297 14.874 10.297 24.027l0 205.944c0 6.102-1.526 11.823-4.577 17.162s-7.246 9.534-12.585 12.585-11.06 4.577-17.162 4.577L415.321 957.64c-6.102 0-11.823-1.526-17.162-4.577s-9.725-7.246-13.158-12.585-5.149-11.06-5.149-17.162L379.852 717.372c0-9.153 3.432-17.162 10.297-24.027s15.255-10.297 25.171-10.297l76.657 0L491.977 521.725 188.782 521.725c-7.628 0-13.92 2.479-18.878 7.437-4.958 4.958-7.437 10.869-7.437 17.734l0 136.152 77.801 0c9.916 0 18.115 3.432 24.599 10.297s9.725 14.874 9.725 24.027l0 205.944c0 9.916-3.242 18.115-9.725 24.599-6.483 6.483-14.683 9.725-24.599 9.725L34.324 957.64c-3.814 0-7.437-0.572-10.869-1.716-3.432-1.144-6.483-2.67-9.153-4.577-2.67-1.907-5.149-4.386-7.437-7.437-2.288-3.051-4.004-6.293-5.149-9.725C0.572 930.753 0 927.13 0 923.316L0 717.372c0-3.051 0.381-6.102 1.144-9.153s1.907-5.721 3.432-8.009 3.432-4.577 5.721-6.865 4.577-4.195 6.865-5.721 4.958-2.67 8.009-3.432 6.102-1.144 9.153-1.144l77.801 0L112.125 495.41c0-6.865 2.479-12.776 7.437-17.734s10.869-7.437 17.734-7.437l354.682 0L491.978 342.096l-76.657 0c-9.916 0-18.306-3.432-25.171-10.297s-10.297-14.874-10.297-24.027L379.853 101.828c0-9.916 3.432-18.306 10.297-25.171s15.255-10.297 25.171-10.297l205.944 0c6.102 0 11.823 1.716 17.162 5.149 5.339 3.432 9.534 7.818 12.585 13.158 3.051 5.339 4.577 11.06 4.577 17.162l0 205.944c0 9.153-3.432 17.162-10.297 24.027s-14.874 10.297-24.027 10.297l-77.801 0 0 128.143L885.56 470.24c7.628 0 13.92 2.479 18.878 7.437s7.437 10.869 7.437 17.734l0 187.638 76.657 0C998.448 683.048 1006.838 686.48 1013.703 693.345z" p-id="3508"></path></svg>

src/icons/svg/unread.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1534314532421" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2816" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.999488 66.861804c-245.826801 0-445.138196 199.203948-445.138196 445.138196 0 245.826801 199.311395 445.138196 445.138196 445.138196 245.825778 0 445.138196-199.311395 445.138196-445.138196C957.137685 266.065751 757.824243 66.861804 511.999488 66.861804zM484.177839 230.311433c0-15.431457 12.443403-27.821649 27.821649-27.821649s27.821649 12.389168 27.821649 27.821649l0 389.495922c0 15.32401-12.443403 27.821649-27.821649 27.821649s-27.821649-12.497639-27.821649-27.821649L484.177839 230.311433zM511.999488 807.599392c-22.985504 0-41.73145-18.800181-41.73145-41.73145 0-23.039739 18.745946-41.73145 41.73145-41.73145s41.73145 18.692734 41.73145 41.73145C553.730938 788.79921 534.984992 807.599392 511.999488 807.599392z" p-id="2817"></path></svg>

src/icons/svg/user.svg

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503993891882" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7986" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M504.951 511.98c93.49 0 169.28-74.002 169.28-165.26 0-91.276-75.79-165.248-169.28-165.248-93.486 0-169.287 73.972-169.279 165.248-0.001 91.258 75.793 165.26 169.28 165.26z m77.6 55.098H441.466c-120.767 0-218.678 95.564-218.678 213.45V794.3c0 48.183 97.911 48.229 218.678 48.229H582.55c120.754 0 218.66-1.78 218.66-48.229v-13.77c0-117.887-97.898-213.45-218.66-213.45z" p-id="7987"></path></svg>

src/main.js

@@ -0,0 +1,27 @@
import Vue from 'vue'
import 'normalize.css/normalize.css'// A modern alternative to CSS resets
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/styles/index.scss' // global css
import 'babel-polyfill'
import App from './App'
import router from './router'
import store from './store'
import '@/icons' // icon
import '@/permission' // permission control
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

src/permission.js

@@ -0,0 +1,63 @@
import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import { Message } from 'element-ui'
import { getCookiesName } from '@/utils/auth' // 验权
import queryInfo from '@/utils/queryInfo'
NProgress.configure({ showSpinner: false })// NProgress Configuration
function hasPermission(roles, permissionRoles) {
  if (roles.indexOf('1') >= 0) return true
  if (!permissionRoles) return true
  return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
const whiteList = ['/login', '/findPwd'] // 不重定向白名单
router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getCookiesName()) {
    if (to.path === '/login') {
      console.log(222)
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
        console.log(3333)
        store.dispatch('GetUserInfo').then(res => { // 拉取user_info
          const roles = [res.data.type.toString()]
          console.log(roles)
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            next({ ...to, replace: true })
          })
        }).catch((err) => {
          store.dispatch('FedLogOut').then(() => {
            Message.error(err || '登录状态失效，请重新登录')
            next({ path: '/' })
          })
        })
      } else {
        console.log(store.getters.roles)
        console.log(to.meta.roles)
        if (hasPermission(store.getters.roles, to.meta.roles)) {
          next()
        }
      }
      queryInfo.queryAllInfo()
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})
router.afterEach(() => {
  NProgress.done() // 结束Progress
})

src/router/index.js

@@ -0,0 +1,197 @@
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '../views/layout/Layout'
import common from '../views/layout/common'
/**
* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
*                                if not set alwaysShow, only more than one route under the children
*                                it will becomes nested mode, otherwise not show the root menu
* redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb
* name:'router-name'             the name is used by <keep-alive> (must set!!!)
* meta : {
    roles: ['admin','editor']     will control the page roles (you can set multiple roles)
    title: 'title'               the name show in submenu and breadcrumb (recommend set)
    icon: 'svg-name'             the icon show in the sidebar,
    noCache: true                if true ,the page will no be cached(default is false)
  }
**/
// 所有权限通用路由表
// 如首页和登录页和一些不用权限的公用页面
export const constantRouterMap = [
  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
  { path: '/findPwd', component: () => import('@/views/findPwd/index'), hidden: true },
  { path: '/404', component: () => import('@/views/404'), hidden: true },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    hidden: true,
    children: [{
      path: 'dashboard',
      component: () => import('@/views/dashboard'),
      name: 'dashboard',
      meta: { title: '主页' }
    }]
  }
]
// 实例化vue的时候只挂载constantRouter
export default new Router({
  // mode: 'history', //后端支持可开
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})
// 异步挂载的路由
// 动态需要根据权限加载的路由表
export const asyncRouterMap = [
  {
    path: '/show',
    component: common,
    redirect: '/show/home',
    meta: { roles: ['0', '1'] },
    hidden: true,
    children: [{
      path: 'home',
      component: () => import('@/views/home/index.vue'),
      name: 'home',
      meta: { title: '首页', roles: ['0', '1'] }
    },
    {
      path: 'medicalTreatment',
      component: () => import('@/views/medicalTreatment/index.vue'),
      name: 'medicalTreatment',
      meta: { title: '协同诊疗', roles: ['0', '1'] }
    },
    {
      path: 'intelligentJudgment',
      component: () => import('@/views/intelligentJudgment/index.vue'),
      name: 'intelligentJudgment',
      meta: { title: 'AI智能判断', roles: ['0', '1'] }
    },
    {
      path: 'sharedDevice',
      component: () => import('@/views/sharedDevice/index.vue'),
      name: 'sharedDevice',
      meta: { title: '共享器械', roles: ['0', '1'] }
    },
    {
      path: 'hospital',
      component: () => import('@/views/hospital/index.vue'),
      name: 'hospital',
      meta: { title: '医院', roles: ['0', '1'] }
    }]
  },
  {
    path: '',
    component: Layout,
    name: 'peoplesManage',
    meta: {
      title: '个人设置',
      icon: 'peoples',
      roles: ['0', '1']
    },
    alwaysShow: true,
    children: [
      {
        path: 'infoManage',
        name: 'infoManage',
        component: () => import('@/views/peoplesManage/infoManage/index'),
        meta: { title: '个人信息修改', roles: ['0', '1'] }
      },
      {
        path: 'accountSettings',
        name: 'accountSettings',
        component: () => import('@/views/peoplesManage/accountSettings/index'),
        meta: { title: '账户设置', roles: ['0', '1'] }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'BridgesInfo',
    meta: {
      title: '',
      roles: ['1', '2']
    },
    alwaysShow: false,
    children: [
      {
        path: 'BridgesInfo',
        name: 'BridgesInfo',
        component: () => import('@/views/baseInfoManage/bridgesInfo/index'),
        meta: { title: '医院信息', icon: 'hospital' }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'serversConfig',
    meta: {
      title: '',
      icon: 'list',
      roles: ['1', '2']
    },
    alwaysShow: false,
    children: [
      {
        path: 'serversConfig',
        name: 'serversConfig',
        component: () => import('@/views/baseInfoManage/serversConfig/index'),
        meta: { title: '科室信息', icon: 'Department' }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'boxesConfig',
    meta: {
      title: '',
      icon: 'list',
      roles: ['1', '2']
    },
    alwaysShow: false,
    children: [
      {
        path: 'boxesConfig',
        name: 'boxesConfig',
        component: () => import('@/views/baseInfoManage/boxesConfig/index'),
        meta: { title: '医生信息', icon: 'doctor' }
      }
    ]
  },
  {
    path: '',
    component: Layout,
    name: 'sensorsConfig',
    meta: {
      title: '',
      icon: 'list',
      roles: ['1', '2']
    },
    alwaysShow: false,
    children: [
      {
        path: 'sensorsConfig',
        name: 'sensorsConfig',
        component: () => import('@/views/baseInfoManage/sensorsConfig/index'),
        meta: { title: '器械信息', icon: 'instrument' }
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true, meta: { roles: ['0', '1', '2'] }
  }
]

src/store/getters.js

@@ -0,0 +1,13 @@
const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  account: state => state.user.account,
  userid: state => state.user.userid,
  name: state => state.user.name,
  roles: state => state.user.roles,
  logins: state => state.user.logins,
  session: state => state.user.session,
  permission_routers: state => state.permission.routers,
  addRouters: state => state.permission.addRouters
}
export default getters

src/store/index.js

@@ -0,0 +1,19 @@
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import permission from './modules/permission'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    permission,
    user
  },
  getters
})
export default store

src/store/modules/app.js

@@ -0,0 +1,43 @@
import Cookies from 'js-cookie'
const app = {
  state: {
    sidebar: {
      opened: !+Cookies.get('sidebarStatus'),
      withoutAnimation: false
    },
    device: 'desktop'
  },
  mutations: {
    TOGGLE_SIDEBAR: state => {
      if (state.sidebar.opened) {
        Cookies.set('sidebarStatus', 1)
      } else {
        Cookies.set('sidebarStatus', 0)
      }
      state.sidebar.opened = !state.sidebar.opened
      state.sidebar.withoutAnimation = false
    },
    CLOSE_SIDEBAR: (state, withoutAnimation) => {
      Cookies.set('sidebarStatus', 1)
      state.sidebar.opened = false
      state.sidebar.withoutAnimation = withoutAnimation
    },
    TOGGLE_DEVICE: (state, device) => {
      state.device = device
    }
  },
  actions: {
    ToggleSideBar: ({ commit }) => {
      commit('TOGGLE_SIDEBAR')
    },
    CloseSideBar({ commit }, { withoutAnimation }) {
      commit('CLOSE_SIDEBAR', withoutAnimation)
    },
    ToggleDevice({ commit }, device) {
      commit('TOGGLE_DEVICE', device)
    }
  }
}
export default app

src/store/modules/permission.js

@@ -0,0 +1,60 @@
import { asyncRouterMap, constantRouterMap } from '@/router'
/**
 * 通过meta.role判断是否与当前用户权限匹配
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  if (route.meta.roles) {
    return roles.some(role => route.meta.roles.indexOf(role) >= 0)
  } else {
    return true
  }
}
/**
 * 递归过滤异步路由表，返回符合用户角色权限的路由表
 * @param asyncRouterMap
 * @param roles
 */
function filterAsyncRouter(asyncRouterMap, roles) {
  const accessedRouters = asyncRouterMap.filter(route => {
    if (hasPermission(roles, route)) {
      if (route.children && route.children.length) {
        route.children = filterAsyncRouter(route.children, roles)
      }
      return true
    }
    return false
  })
  return accessedRouters
}
const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: []
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
      console.log(state.routers)
    }
  },
  actions: {
    GenerateRoutes({ commit }, data) {
      return new Promise(resolve => {
        //  const { roles } = data
        const roles = ['2']
        const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
        console.log(accessedRouters)
        commit('SET_ROUTERS', accessedRouters)
        resolve()
      })
    }
  }
}
export default permission

src/store/modules/user.js

@@ -0,0 +1,111 @@
import { login, logout, getInfo } from '@/api/login'
import { getCookiesName, setCookiesName, removeCookiesName } from '@/utils/auth'
const user = {
  state: {
    account: '',
    userid: '',
    name: '',
    roles: [],
    logins: '',
    session: getCookiesName()
  },
  mutations: {
    SET_ACCOUNT: (state, account) => {
      state.account = account
    },
    SET_USERID: (state, userid) => {
      state.userid = userid
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    SET_LOGIN: (state, logins) => {
      state.logins = logins
    },
    SET_SESSION: (state, session) => {
      state.session = session
    }
  },
  actions: {
    // 用户名登录
    LoginByUsername({ commit }, userInfo) {
      const account = userInfo.username.trim()
      const pw = userInfo.password
      const vc = userInfo.imgVerifyCode.toLocaleUpperCase()
      return new Promise((resolve, reject) => {
        login(account, pw, vc).then((response) => {
          if (response.success) {
            if (response.data) {
              const dataS = response.data
              if (dataS.active) {
                commit('SET_ACCOUNT', dataS.account)
                commit('SET_USERID', dataS.id)
                commit('SET_NAME', dataS.name)
                setCookiesName(dataS.name)
              }
            }
          }
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 获取用户信息
    GetUserInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo().then(response => {
          if (response.success) {
            if (response.data) {
              const dataS = response.data
              if (dataS.active) {
                commit('SET_ACCOUNT', dataS.account)
                commit('SET_USERID', dataS.id)
                commit('SET_ROLES', ['2'])
                //  commit('SET_ROLES', [dataS.type.toString()])
                commit('SET_NAME', dataS.name)
              }
            }
          }
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 登出
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout().then(() => {
          commit('SET_ACCOUNT', '')
          commit('SET_USERID', '')
          commit('SET_ROLES', [])
          commit('SET_NAME', '')
          commit('SET_SESSION', '')
          removeCookiesName()
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 前端 登出
    FedLogOut({ commit }) {
      return new Promise(resolve => {
        commit('SET_SESSION', '')
        removeCookiesName()
        resolve()
      })
    }
  }
}
export default user

src/styles/element-ui.scss

@@ -0,0 +1,53 @@
 //to reset element-ui default css
.el-upload {
  input[type="file"] {
    display: none !important;
  }
}
.el-upload__input {
  display: none;
}
//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
}
//element ui upload
.upload-container {
  .el-upload {
    width: 100%;
    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}
.el-dialog{
  margin: 0 auto 50px;
}
.el-dialog__header{
  border-bottom: 1px solid #ebeef5;
}
.el-dialog__body{
  padding:20px 
}
.pagination-container{
  margin:20px;
  text-align:center;
}
.el-btn-col{
  margin: 20px 0;
  .el-btn-col-box{
    text-align:center;
    .el-button{
      padding: 12px 50px;
    }
  }
}

src/styles/index.scss

@@ -0,0 +1,91 @@
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
body {
  height: 100%;
  min-width:600px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
label {
  font-weight: 700;
}
html {
  height: 100%;
  box-sizing: border-box;
}
#app{
  height: 100%;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  outline: none;
  text-decoration: none;
}
div:focus{
  outline: none;
 }
a:focus,
a:active {
  outline: none;
}
a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
//main-container全局样式
.app-main{
  min-height: 100%
}
.app-container {
  padding: 20px;
}
.logo-wrapper {
  display:block;
  width: 100%;
  .logo-img{
    display:block;
    height:28px;
    width:300px;
    background-image: url('/static/touchwave.png');
    background-size: 300px 28px;
  }
}

src/styles/loginform.scss

@@ -0,0 +1,144 @@
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
$light_black:#555;
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  background-image: url(/static/login_bg.jpg);
  background-size: cover;
  background-position: center center;
  .logo-wrapper{
    padding: 20px 30px;
    background-color: $bg;
  }
  .step-wrapper{
    margin-bottom:30px;
    .el-step__head.is-process{
      color: $light_black;
      border-color: $light_gray;
    }
    .el-step__title.is-process{
      color: $light_gray;
    }
    .el-step__description.is-process{
      color: $light_gray;
    }
    .el-step__icon{
      width:40px;
      height:40px;
      .el-step__icon-inner{
        font-size:16px;
      }
    }
  }
  .step-contain{
    .importTip{
      font-size: 18px;
      margin: 10px 0;
    }
    .mainTip{
      color:$light_gray;
    }
    .smallTip{
      color:$light_gray;
      line-height:16px;
      font-size:13px;
    }
  }
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    width: 520px;
    padding: 50px 35px 15px 35px;
    margin: 120px auto;
    border-radius: 4px;
    background-color: $bg;
    box-shadow: 1px 1px 18px 6px rgba(24, 24, 24, .4);
    .log-btn.el-button--primary {
      width:100%;
    }
  }
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
  .el-form-find {
    border: none;
    background: none;
    margin-top: -20px;
  }
  .code-btn{
    width: 92%;
    .el-input-group__append{
      padding: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      width: 140px;
      img{
        width: 140px;
        height:42px;
        cursor: pointer;
      }
      .el-button{
        width: 100%;
        margin:0;
        padding:15px 20px;
      }
    }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
    &_login {
      font-size: 20px;
    }
  }
  .title {
    font-size: 26px;
    font-weight: 400;
    color: $light_gray;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}

src/styles/mixin.scss

@@ -0,0 +1,27 @@
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}
@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}
@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

src/styles/roleuser.scss

@@ -0,0 +1,106 @@
.dashboard-editor-container{
  padding: 32px;
  .block-group{
    background: #fff;
    margin-bottom: 20px;
    .block-title{
      display: flex;
      justify-content: space-between;
      .el-button{
        padding: 3px 0;
      }
    }
    .item-ul{
      margin: 0;
      padding: 0 10px;
      li{
        padding: 8px 0;
        margin: 0;
        list-style: none;
        cursor: pointer;
        &.readed-li{
          color: #de0000;
        }
        span{
          display: inline-block;
          margin-right: 15px;
        }
      }
    }
    .grid-content{
      height: 100px;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      background-color: #f8f8f8;
      margin-bottom: 8px;
      padding:20px;
      cursor: pointer;
      &:hover {
        transition: all 0.2s ease-out;
        color: #fff;
        background: #36a3f7;
      }
    }
  }
  .panel-group {
    /*margin-top: 18px;*/
    .card-panel-col{
      margin-bottom: 32px;
    }
    .card-panel {
      cursor: pointer;
      padding: 15px 20px;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);
      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }
      }
      .card-panel-icon-wrapper {
        margin: 10px 0;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }
      .card-image{
        width: 100%;
        max-width: 280px;
        margin: auto;
        height: 180px;
        border: 1px solid #d0d0d0;
        background-position: center;
        background-size: cover;
      }
      .card-panel-icon {
        font-size: 48px;
      }
      .card-panel-description {
        font-weight: bold;
        margin-top:12px;
        .card-panel-text {
          line-height: 24px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
        }
        .card-panel-text-red {
          color: #de0000
        }
        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }
  .line-chart-box{
    .el-col{
      margin: 15px 0;
    }
  }
}

src/styles/sidebar.scss

@@ -0,0 +1,118 @@
#app {
  // 主体区域
  .main-container {
    min-height: 100%;
    padding-top:50px;
    transition: margin-left .28s;
    margin-left: 140px;
    position: relative;
    background-color: rgb(240, 242, 245);
  }
  // 侧边栏
  .sidebar-container {
    transition: width 0.28s;
    width: 140px !important;
    height: 100%;
    float: left;
    font-size: 0px;
    overflow: hidden;
    //reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }
    .scrollbar-wrapper {
      height: 100%;
      overflow: auto;
      .el-scrollbar__view {
        height: 100%;
      }
    }
    .is-horizontal {
      display: none;
    }
    a {
      display: inline-block;
      width: 100%;
      overflow: hidden;
    }
    .svg-icon {
      margin-right: 16px;
    }
    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
    }
  }
  .hideSidebar {
    .sidebar-container {
      width: 36px !important;
    }
    .main-container {
      margin-left: 36px;
    }
    .submenu-title-noDropdown {
      padding-left: 10px !important;
      position: relative;
      .el-tooltip {
        padding: 0 10px !important;
      }
    }
    .el-submenu {
      overflow: hidden;
      &>.el-submenu__title {
        padding-left: 10px !important;
        .el-submenu__icon-arrow {
          display: none;
        }
      }
    }
    .el-menu--collapse {
      .el-submenu {
        &>.el-submenu__title {
          &>span {
            height: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
            display: inline-block;
          }
        }
      }
    }
  }
  .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
  .sidebar-container .el-submenu .el-menu-item {
    min-width: 180px !important;
    background-color: $subMenuBg !important;
    &:hover {
      background-color: $menuHover !important;
    }
  }
  .el-menu--collapse .el-menu .el-submenu {
    min-width: 180px !important;
  }
  //适配移动端
  .mobile {
    .main-container {
      margin-left: 0px;
    }
    .sidebar-container {
      transition: transform .28s;
      width: 180px !important;
    }
    &.hideSidebar {
      .sidebar-container {
        transition-duration: 0.3s;
        transform: translate3d(-180px, 0, 0);
      }
    }
  }
  .withoutAnimation {
    .main-container,
    .sidebar-container {
      transition: none;
    }
  }
}

src/styles/transition.scss

@@ -0,0 +1,32 @@
//globl transition css
/*fade*/
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
/*fade*/
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}
.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}
.breadcrumb-move {
  transition: all .5s;
}
.breadcrumb-leave-active {
  position: absolute;
}

src/styles/variables.scss

@@ -0,0 +1,4 @@
//sidebar
$menuBg:#304156;
$subMenuBg:#1f2d3d;
$menuHover:#001528;

src/utils/auth.js

@@ -0,0 +1,13 @@
import Cookies from 'js-cookie'
export function getCookiesName() {
  return Cookies.get('nameKey')
}
export function setCookiesName(name) {
  return Cookies.set('nameKey', name)
}
export function removeCookiesName() {
  return Cookies.remove('nameKey')
}

src/utils/index.js

@@ -0,0 +1,87 @@
/**
 * Created by luyanan on 18/8/13.
 */
export const comUrl = 'http://localhost:90'
/**
 * 解析url参数
 * @example ?id=12345&a=b
 * @return Object {id:12345,a:b}
 */
export function urlParse(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || ['', ''])[1].replace(/\+/g, '%20')) || null
}
export function parseTime(startTime, flag, fa) {
  if (flag) {
    if (!fa) {
      return startTime.substring(0, 4) + '年' + startTime.substring(4, 6) + '月' + startTime.substring(6, 8) + '日 ' + startTime.substring(8, 10) + ':' + startTime.substring(10, 12) + ':' + startTime.substring(12, 14)
    } else {
      return startTime.substring(0, 4) + '/' + startTime.substring(4, 6) + '/' + startTime.substring(6, 8) + ' ' + startTime.substring(8, 10) + ':' + startTime.substring(10, 12) + ':' + startTime.substring(12, 14)
    }
  } else {
    return startTime.substring(0, 4) + '/' + startTime.substring(4, 6) + '/' + startTime.substring(6, 8)
  }
}
export function turnTime(date, hasT, hasF) { // hasT='date/time'是否有时分秒，hasF是否需要显示格式
  const format = (hasT === 'time') ? (hasF ? '{y}/{m}/{d} {h}:{i}:{s}' : '{y}{m}{d}{h}{i}{s}') : (hasF ? '{y}/{m}/{d}' : '{y}{m}{d}')
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s)+}/g, (result, key) => {
    let value = formatObj[key]
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}
export function param2Obj(url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result
  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp
    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }
  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }
    return result
  }
}

src/utils/queryBase.js

@@ -0,0 +1,138 @@
/**
 * Created by luyanan on 18/8/27.
 * bridge、server、device
 */
/* eslint-disable one-var */
import request from '@/utils/request'
var $req = {
  get: function(url, data, sh, eh) {
    request({
      method: 'get',
      url: url,
      params: data
    }).then(res => {
      sh(res)
    }).catch(err => {
      console.log(err)
      eh(err)
    })
  }
}
var objCache = {
  bridge: {},
  server: {},
  device: {}
}
var objHcache = {
  bridge: {},
  server: {},
  device: {}
}
var objCacheHandler = {
  bridge: function(id) {
    var hc = objHcache.bridge[id]
    $req.get('/ajax/bridge/qo?id=' + id, null, function(data) {
      delete objHcache.bridge[id]
      if (data.success) {
        objCache.bridge[id] = data.data
        for (let i = 0; i < hc.length; ++i) {
          hc[i](true, data.data)
        }
      } else {
        for (let i = 0; i < hc.length; ++i) {
          hc[i](false)
        }
      }
    }, function() {
      for (let i = 0; i < hc.length; ++i) {
        hc[i](false)
      }
    })
  },
  server: function(id) {
    var hc = objHcache.server[id]
    $req.get('/ajax/server/qo?id=' + id, null, function(data) {
      delete objHcache.server[id]
      if (data.success) {
        objCache.server[id] = data.data
        for (let i = 0; i < hc.length; ++i) {
          hc[i](true, data.data)
        }
      } else {
        for (let i = 0; i < hc.length; ++i) {
          hc[i](false)
        }
      }
    }, function() {
      for (let i = 0; i < hc.length; ++i) {
        hc[i](false)
      }
    })
  },
  device: function(id) {
    var hc = objHcache.device[id]
    $req.get('/ajax/device/qo?id=' + id, null, function(data) {
      delete objHcache.device[id]
      if (data.success) {
        objCache.device[id] = data.data
        for (let i = 0; i < hc.length; ++i) {
          hc[i](true, data.data)
        }
      } else {
        for (let i = 0; i < hc.length; ++i) {
          hc[i](false)
        }
      }
    }, function() {
      for (let i = 0; i < hc.length; ++i) {
        hc[i](false)
      }
    })
  }
}
var cacheModel = {
  getBridge: function(id, handler) {
    var data = objCache.bridge[id]
    if (data) {
      handler(true, data)
    } else {
      if (objHcache.bridge[id]) {
        objHcache.bridge[id].push(handler)
      } else {
        objHcache.bridge[id] = []
        objHcache.bridge[id].push(handler)
        objCacheHandler.bridge(id)
      }
    }
  },
  getServer: function(id, handler) {
    var data = objCache.server[id]
    if (data) {
      handler(true, data)
    } else {
      if (objHcache.server[id]) {
        objHcache.server[id].push(handler)
      } else {
        objHcache.server[id] = []
        objHcache.server[id].push(handler)
        objCacheHandler.server(id)
      }
    }
  },
  getDevice: function(id, handler) {
    var data = objCache.device[id]
    if (data) {
      handler(true, data)
    } else {
      if (objHcache.device[id]) {
        objHcache.device[id].push(handler)
      } else {
        objHcache.device[id] = []
        objHcache.device[id].push(handler)
        objCacheHandler.device(id)
      }
    }
  }
}
export default cacheModel

src/utils/queryDict.js

@@ -0,0 +1,54 @@
/**
 * Created by luyanan on 18/8/23.
 * 'ZLLX'----'传感器主缆'
 * 'ZLWZ'----'传感器位置'
 * 'XZQH'----'城市级联'
 */
/* eslint-disable one-var */
import request from '@/utils/request'
var cacheDict = {
    bool: [
      { code: '0', caption: '否', enabled: true },
      { code: '1', caption: '是', enabled: true }
    ]
  },
  handCache = {},
  uri = '/ajax/dict/items',
  setDict = function(code, items) {
    cacheDict[code] = items
    var hs = handCache[code]
    if (hs && hs.length) {
      hs.forEach(h => h(items))
      delete handCache[code]
    }
  },
  loadDict = function(code) {
    request({
      url: uri,
      method: 'get',
      params: {
        dict: code
      }
    }).then(res => {
      setDict(code, res.data)
    })
  },
  applyDict = function(code, hander) {
    var dict = cacheDict[code]
    if (!dict) {
      var hs = handCache[code]
      if (!hs) {
        handCache[code] = hs = []
        loadDict(code)
      }
      hs.push(hander)
    } else {
      hander(dict)
    }
  },
  ret = {
    applyDict: applyDict
  }
export default ret

src/utils/queryInfo.js

@@ -0,0 +1,81 @@
/**
 * Created by luyanan on 18/8/23.
 * All information about bridges
 */
/* eslint-disable one-var */
import request from '@/utils/request'
import store from '@/store'
var bridgeObj = {},
  serverList = [],
  deviceList = [],
  transducerList = [],
  queryAllInfo = function() {
    if (!bridgeObj.server && store.getters.roles.indexOf('1') === -1) {
      request({
        url: '/ajax/all/byUser',
        method: 'get',
        params: {
          active: 1
        }
      }).then(res => {
        if (res.success) {
          bridgeObj = res.data
          serverList = res.data.server
          deviceList = res.data.device
          transducerList = res.data.transducer
        }
      })
    }
  },
  queryServers = function(bid, flag) {
    const obj = serverList
    var servers = [], serverSeqArr = []
    for (let i = 0; i < obj.length; ++i) {
      if (bid === obj[i].bridgeId) {
        servers.push(obj[i])
        serverSeqArr.push(obj[i].seq)
      }
    }
    return flag ? serverSeqArr : servers
  },
  queryDevices = function(bid) {
    var devices = []
    for (let i = 0; i < serverList.length; ++i) {
      if (bid === serverList[i].bridgeId) {
        for (let j = 0; j < deviceList.length; ++j) {
          if (serverList[i].id === deviceList[j].serverId) {
            deviceList[j].serverCode = serverList[i].code
            devices.push(deviceList[j])
          }
        }
      }
    }
    return devices
  },
  queryTrans = function(bid) {
    var trans = []
    for (let i = 0; i < serverList.length; ++i) {
      if (bid === serverList[i].bridgeId) {
        for (let j = 0; j < deviceList.length; ++j) {
          if (serverList[i].id === deviceList[j].serverId) {
            for (let m = 0; m < transducerList.length; ++m) {
              if (deviceList[j].id === transducerList[m].deviceId) {
                transducerList[m].deviceCode = deviceList[j].code
                trans.push(transducerList[m])
              }
            }
          }
        }
      }
    }
    return trans
  },
  ret = {
    queryAllInfo: queryAllInfo,
    queryServers: queryServers,
    queryDevices: queryDevices,
    queryTrans: queryTrans
  }
export default ret

src/utils/request.js

@@ -0,0 +1,54 @@
import axios from 'axios'
import qs from 'qs'
import { comUrl } from '@/utils/index'
// 创建axios实例
const service = axios.create({
  baseURL: comUrl, // api的base_url
  // timeout: 5000, // 请求超时时间
  paramsSerializer: function(params) {
    return qs.stringify(params, { arrayFormat: 'repeat' })
  }
})
// request拦截器
service.interceptors.request.use(config => {
  // 配置config
  config.headers.Accept = 'application/json'
  if (config.method === 'post') {
    config.data = qs.stringify(config.data, { arrayFormat: 'repeat' })
    // 处理后后台无需添加RequestBody
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
  }
  if (localStorage.token) {
    config.headers.Authorization = localStorage.token
  }
  return config
}, error => {
  Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(response => {
  let data = response.data
  const status = response.status
  if (status === 200) {
    if (response.data === undefined) {
      // 解决IE9数据问题
      data = response.request.responseText
    } else {
      data = response.data
    }
    if (!(data instanceof Object)) {
      // 判断data不是Object时，解析成Object
      // data = JSON.parse(data)
    }
    return response.data
  } else {
    return Promise.resolve(response)
  }
}, error => {
  return Promise.reject(error)
})
export default service

src/utils/timingConstruct.js

@@ -0,0 +1,78 @@
/**
 * Created by luyanan on 18/9/4.
 * construct monitor
 */
/* eslint-disable one-var */
import { parseTime } from '@/utils/index'
var monitorModel = {
  construct: function(mCache, $data) {
    for (let i = 0; i < $data.length; ++i) {
      if ($data[i].ctime === $data[0].ctime) {
        mCache.push({
          cid: $data[i].cid,
          cd: {
            tit: '',
            xData: [],
            seData: []
          }
        })
      }
    }
  },
  fixData: function(item, ftbegin, ftend, $daI) {
    if ($daI) {
      item.xData.push(parseTime(ftbegin, true, true))
      item.xData.push(parseTime(ftend, true, true))
      item.seData.push($daI.hvalue)
      item.seData.push($daI.lvalue)
      item.tit = $daI.cid
    } else {
      item.xData.push(parseTime(ftbegin, true, true))
      item.xData.push(parseTime(ftend, true, true))
      item.seData.push(0)
      item.seData.push(0)
    }
  },
  shiftData: function(item) {
    item.xData.shift()
    item.xData.shift()
    item.seData.shift()
    item.seData.shift()
  },
  setData: function(mCache, $data, ftbegin, ftend, maxNum) {
    if ($data.length) {
      for (let n = 0; n < mCache.length; ++n) {
        let found_c = false
        for (let m = 0; m < $data.length; ++m) {
          var tj = ($data[m].cid === mCache[n].cid && (ftbegin === $data[m].ctime))
          if (maxNum) {
            tj = ($data[m].cid === mCache[n].cid)
          }
          if (tj) {
            found_c = true
            this.fixData(mCache[n].cd, ftbegin, ftend, $data[m])
            break
          }
        }
        if (!found_c) {
          this.fixData(mCache[n].cd, ftbegin, ftend)
        }
        if (maxNum && mCache[n].cd.xData.length > maxNum) {
          this.shiftData(mCache[n].cd)
        }
      }
    } else {
      for (let k = 0; k < mCache.length; ++k) {
        this.fixData(mCache[k].cd, ftbegin, ftend)
        if (maxNum && mCache[k].cd.xData.length > maxNum) {
          this.shiftData(mCache[k].cd)
        }
      }
    }
  }
}
export default monitorModel

src/views/404.vue

@@ -0,0 +1,236 @@
<template>
  <div class="wscn-http404-container">
    <div class="wscn-http404">
      <div class="pic-404">
        <img class="pic-404__parent" :src="img_404" alt="404">
        <img class="pic-404__child left" :src="img_404_cloud" alt="404">
        <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
        <img class="pic-404__child right" :src="img_404_cloud" alt="404">
      </div>
      <div class="bullshit">
        <!-- <div class="bullshit__oops">OOPS!</div>
        <div class="bullshit__info">版权所有
          <a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>
        </div> -->
        <div class="bullshit__headline">{{ message }}</div>
        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
        <a href="" class="bullshit__return-home">返回首页</a>
      </div>
    </div>
  </div>
</template>
<script>
import img_404 from '@/assets/404_images/404.png'
import img_404_cloud from '@/assets/404_images/404_cloud.png'
export default {
  name: 'page404',
  data() {
    return {
      img_404,
      img_404_cloud
    }
  },
  computed: {
    message() {
      return '管理员说这个页面你不能进......'
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.wscn-http404-container{
  transform: translate(-50%,-50%);
  position: absolute;
  top: 40%;
  left: 50%;
}
.wscn-http404 {
  position: relative;
  width: 1200px;
  padding: 0 50px;
  overflow: hidden;
  .pic-404 {
    position: relative;
    float: left;
    width: 600px;
    overflow: hidden;
    &__parent {
      width: 100%;
    }
    &__child {
      position: absolute;
      &.left {
        width: 80px;
        top: 17px;
        left: 220px;
        opacity: 0;
        animation-name: cloudLeft;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
      }
      &.mid {
        width: 46px;
        top: 10px;
        left: 420px;
        opacity: 0;
        animation-name: cloudMid;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1.2s;
      }
      &.right {
        width: 62px;
        top: 100px;
        left: 500px;
        opacity: 0;
        animation-name: cloudRight;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
      }
      @keyframes cloudLeft {
        0% {
          top: 17px;
          left: 220px;
          opacity: 0;
        }
        20% {
          top: 33px;
          left: 188px;
          opacity: 1;
        }
        80% {
          top: 81px;
          left: 92px;
          opacity: 1;
        }
        100% {
          top: 97px;
          left: 60px;
          opacity: 0;
        }
      }
      @keyframes cloudMid {
        0% {
          top: 10px;
          left: 420px;
          opacity: 0;
        }
        20% {
          top: 40px;
          left: 360px;
          opacity: 1;
        }
        70% {
          top: 130px;
          left: 180px;
          opacity: 1;
        }
        100% {
          top: 160px;
          left: 120px;
          opacity: 0;
        }
      }
      @keyframes cloudRight {
        0% {
          top: 100px;
          left: 500px;
          opacity: 0;
        }
        20% {
          top: 120px;
          left: 460px;
          opacity: 1;
        }
        80% {
          top: 180px;
          left: 340px;
          opacity: 1;
        }
        100% {
          top: 200px;
          left: 300px;
          opacity: 0;
        }
      }
    }
  }
  .bullshit {
    position: relative;
    float: left;
    width: 300px;
    padding: 30px 0;
    overflow: hidden;
    &__oops {
      font-size: 32px;
      font-weight: bold;
      line-height: 40px;
      color: #1482f0;
      opacity: 0;
      margin-bottom: 20px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
    }
    &__headline {
      font-size: 20px;
      line-height: 24px;
      color: #222;
      font-weight: bold;
      opacity: 0;
      margin-bottom: 10px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.1s;
      animation-fill-mode: forwards;
    }
    &__info {
      font-size: 13px;
      line-height: 21px;
      color: grey;
      opacity: 0;
      margin-bottom: 30px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.2s;
      animation-fill-mode: forwards;
    }
    &__return-home {
      display: block;
      float: left;
      width: 110px;
      height: 36px;
      background: #1482f0;
      border-radius: 100px;
      text-align: center;
      color: #ffffff;
      opacity: 0;
      font-size: 14px;
      line-height: 36px;
      cursor: pointer;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.3s;
      animation-fill-mode: forwards;
    }
    @keyframes slideUp {
      0% {
        transform: translateY(60px);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
}
</style>

src/views/baseInfoManage/boxesConfig/index.vue

@@ -0,0 +1,397 @@
<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <el-input style="width: 200px;" class="filter-item" placeholder="采集盒编号" v-model="listQuery.code">
      </el-input>
      <el-input style="width: 200px;" class="filter-item" placeholder="所属服务器编号" v-model="listQuery.scode">
      </el-input>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleFilter" type="primary" icon="el-icon-search">查找</el-button>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加采集盒</el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%;min-height:550px;">
      <el-table-column width="150px" align="center" label="采集盒编号" prop="code"></el-table-column>
      <el-table-column width="150px" align="center" label="内部编号" prop="seq"></el-table-column>
      <el-table-column width="150px" align="center" label="采集盒信道数量" prop="channels"></el-table-column>
      <el-table-column min-width="150px" align="center" label="所属服务器编号" prop="serverName"></el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息" prop="remark"></el-table-column>
      <el-table-column align="center" label="操作" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope"> 
          <el-button v-waves v-waves type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button> 
          <el-button v-waves size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="采集盒配置" ref="ruleForm" :visible.sync="dialogTableVisible" width="860px" @close='closed'>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="form-main" label-position='right' status-icon>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采集盒编号"  prop="code">
              <el-input placeholder="请输入采集盒编号" v-model="ruleForm2.code" maxlength=20></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采集盒信道数量" prop="channels">
              <el-input placeholder="请输入采集盒信道数量" v-model="ruleForm2.channels" maxlength=10></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="所属服务器编号" prop="server">
              <el-autocomplete
                v-model="ruleForm2.server"
                :fetch-suggestions="querySearchAsync"
                placeholder="请选择所属服务器编号"
                @select="handleSelect">
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内部编号" prop="seq">
              <el-input placeholder="请输入内部编号" v-model="ruleForm2.seq" maxlength=10></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="24" >
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" maxlength=500 v-model="ruleForm2.remark" rows=4></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="24" class="el-btn-col">
            <div class="el-btn-col-box">
              <el-button v-waves type="primary" @click="submitForm('ruleForm2')">确认</el-button>
              <el-button v-waves type="info" @click="resetForm('ruleForm2')">返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <div class="pagination-container" style="text-align:center;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo" :page-size="listQuery.pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkDeviceInternalCode } from '@/api/collectionbox'
import waves from '@/directive/waves'
import queryBase from '@/utils/queryBase'
export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    var server = (rule, value, callback) => {
      const that = this
      setTimeout(function() {
        if (that.ruleForm2.server === '' || that.ruleForm2.serverId === '') {
          callback(new Error('请选择服务器编号'))
        } else {
          callback()
        }
      }, 300)
    }
    var seq = (rule, value, callback) => {
      const num = /^[0-9]*$/
      if (value === '') {
        callback(new Error('请输入内部编号'))
      } else {
        if (!this.ruleForm2.serverId) {
          callback('请先选择所属服务器编号')
          return
        }
        if (!num.test(value)) {
          callback('请输入数字')
          return
        }
        if (this.edit) {
          checkDeviceInternalCode({ seq: value, id: this.edit, serverId: this.ruleForm2.serverId, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('内部编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceInternalCode({ seq: value, serverId: this.ruleForm2.serverId, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('内部编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    var code = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入采集盒编号'))
      } else {
        if (this.edit) {
          checkDeviceCode({ code: value, id: this.edit, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('采集盒编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceCode({ code: value, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('采集盒编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    return {
      edit: '',
      ruleForm2: {
        code: '',
        channels: '',
        server: '',
        seq: '',
        serverId: '',
        remark: ''
      },
      rules2: {
        code: [
          { required: true, validator: code, trigger: 'blur' }
        ],
        channels: [
          { required: true, message: '请输入采集盒数量', trigger: 'blur' }
        ],
        server: [
          { required: true, validator: server, trigger: 'blur' }
        ],
        seq: [
          { required: true, validator: seq, trigger: 'blur' }
        ]
      },
      timeout: null,
      dialogTableVisible: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        scode: '',
        code: '',
        active: 1,
        pageSize: 10,
        pageNo: 1
      }
    }
  },
  filters: {
    typeFilter(type) {
    }
  },
  created() {
    this.getList()
  },
  methods: {
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.edit) {
            addDevice(this.ruleForm2).then(response => {
              if (response.success) {
                this.getList()
                setTimeout(function() {
                  that.pop('已成功添加采集盒')
                }, 1000)
                this.resetForm('ruleForm2')
                this.dialogTableVisible = false
              }
            }).catch(error => {
              console.log(error)
            })
          } else {
            const par = this.ruleForm2
            par.id = this.edit
            updateDevice(par).then(response => {
              if (response.success) {
                setTimeout(function() {
                  that.pop('已成功更新采集盒')
                }, 1000)
                this.resetForm('ruleForm2')
                this.getList()
                this.dialogTableVisible = false
                this.edit = ''
                this.ruleForm2 = {
                  code: '',
                  channels: '',
                  server: '',
                  seq: '',
                  serverId: '',
                  remark: ''
                }
              }
            })
          }
        }
      })
    },
    resetForm(formName) {
      this.dialogTableVisible = false
      this.$refs[formName].resetFields()
      this.edit = ''
    },
    closed() {
      this.$refs['ruleForm2'].resetFields()
      this.edit = ''
    },
    getList() {
      var that = this
      this.listLoading = true
      pageQueryDevice(this.listQuery).then(response => {
        if (response.success) {
          const $data = response.data.data
          var hdata = { num: 1, data: $data }
          for (let i = 0; i < $data.length; i++) {
            hdata.num++
            const str = $data[i]
            queryBase.getServer(str.serverId, function(sc, value) {
              if (sc) {
                str.serverName = value.code
                hdata.num--
                if (hdata.num === 0) {
                  that.list = hdata.data
                }
              }
            })
          }
          hdata.num--
          if (hdata.num === 0) {
            that.list = hdata.data
          }
          that.total = response.data.total
          setTimeout(() => {
            that.listLoading = false
          }, 1.5 * 1000)
        }
      })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$confirm('确定要删除:采集盒' + row.code + '吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteDevice({ id: row.id }).then(response => {
          if (response.success) {
            this.getList()
            this.pop('已成功删除该采集盒')
            /*  this.$message({
              type: 'success',
              message: '已成功删除该采集盒!'
            })  */
          }
        })
      }).catch(() => {
      })
    },
    pop($par) {
      this.$confirm($par, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        showCancelButton: false,
        center: true
      }).then(() => {
      }).catch(() => {
      })
    },
    resetTemp(row) {
      this.ruleForm2 = {
        code: row.code,
        channels: row.channels,
        server: row.serverName,
        seq: row.seq,
        serverId: row.serverId,
        remark: row.remark
      }
      this.edit = row.id
    },
    handleCreate() {
      this.dialogTableVisible = true
    },
    handleUpdate(row) {
      const that = this
      setTimeout(function() {
        that.resetTemp(row)
      }, 500)
      this.dialogTableVisible = true
    },
    querySearchAsync(queryString, cb) {
      this.ruleForm2.serverId = ''
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        DeviceOfservice({ code: this.ruleForm2.server, active: 1 }).then(response => {
          const $info = response.data
          if ($info.length) {
            const $data = $info.map(item => {
              return { 'value': item.code, 'id': item.id }
            })
            cb($data)
            if ($info.length === 1 && this.ruleForm2.server === $info[0].code) {
              this.ruleForm2.serverId = $info[0].id
            } else {
              this.ruleForm2.serverId = ''
            }
          } else {
            cb([])
          }
        })
      }, 3000 * Math.random())
    },
    handleSelect(item) {
      this.ruleForm2.serverId = item.id
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-autocomplete{
    display: block
  }
  .el-btn-col{
    margin-top: 45px
  }
  .el-form-item{
    margin: 0px 10px
  }
  .el-select{
    width: 100%
  }
  .el-col{
    margin-bottom: 15px
  }
  .el-form-item__label{
    padding: 0px
  }
</style>

src/views/baseInfoManage/bridgesInfo/index.vue

@@ -0,0 +1,525 @@
<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <el-input style="width: 200px;" class="filter-item" placeholder="桥梁编号" v-model="listQuery.code">
      </el-input>
      <el-input style="width: 200px;" class="filter-item" placeholder="桥梁简称" v-model="listQuery.name">
      </el-input>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleFilter" type="primary" icon="el-icon-search">查找</el-button>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加桥梁</el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%;min-height:550px;">
      <el-table-column width="150px" align="center" label="桥梁编号">
        <template slot-scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>
      <el-table-column width="150px" align="center" label="桥梁简称">
        <template slot-scope="scope">
          <span>{{scope.row.shortName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" align="center" label="桥梁位置">
        <template slot-scope="scope">
          <span>{{citys[scope.row.addrCode]}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150px" align="center" label="维护机构">
        <template slot-scope="scope">
          <span>{{scope.row.org}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息">
        <template slot-scope="scope">
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope"> 
          <el-button v-waves type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button> 
          <el-button v-waves size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="桥梁信息" ref="ruleForm" :visible.sync="dialogTableVisible" width="860px" @close='closed'>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="form-main"  label-position='top' status-icon>
        <el-row :gutter="10">
          <el-col :xs="16" :sm="16" :lg="16">
            <el-row>
              <el-col :span="12">
                <el-form-item label="桥梁编号" prop="code">
                  <el-input placeholder="请输入桥梁编号" v-model="ruleForm2.code" maxlength=20></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="桥梁简称" prop="shortName">
                  <el-input placeholder="请输入桥梁简称" v-model="ruleForm2.shortName" maxlength=20></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="桥梁全称" prop="name">
                  <el-input placeholder="请输入桥梁全称" v-model="ruleForm2.name" maxlength=200></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="桥梁位置信息" prop="addrCode">
                  <!-- <city @paren="toshow" :addrCode='ruleForm2.addrCode'></city> -->
                  <CityPicker @paren="toshow" :addrCode='ruleForm2.addrCode'></CityPicker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地理位置信息" prop="location">
                  <el-input placeholder="请输入地理位置信息" v-model="ruleForm2.location" maxlength=200></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="桥梁开通日期" prop="serviceDay">
                  <el-date-picker
                    value-format='yyyyMMdd'
                    v-model="ruleForm2.serviceDay"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="维护机构" prop="org">
                  <el-input placeholder="请输入维护机构" v-model="ruleForm2.org" maxlength=200></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="phone">
                  <el-input placeholder="请输入联系电话" v-model="ruleForm2.phone" maxlength=20></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电邮" prop="email">
                  <el-input placeholder="请输入联系电邮" v-model="ruleForm2.email" maxlength=100></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :xs="8" :sm="8" :lg="8">
              <el-upload
                class="avatar-uploader"
                action="/ajax/bridge/upload"
                accept='image'
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            <p style="width:100%;text-align:center;font-size:14px;color:#999;">上传桥梁图片<br>
                JPEG/JPG/PNG格式大小5M以内</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="详细描述" class="el-to-block" prop="descp">
              <el-input type="textarea" maxlength=500  rows=6 v-model="ruleForm2.descp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" class="el-to-block" prop="remark">
              <el-input type="textarea" maxlength=500 rows=3 v-model="ruleForm2.remark"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="el-btn-col">
            <div class="el-btn-col-box">
              <el-button v-waves type="primary" @click="submitForm('ruleForm2')">确认</el-button>
              <el-button v-waves type="primary" @click="resetForm('ruleForm2')">返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <div class="pagination-container" style="text-align:center;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo" :page-size="listQuery.pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, checkDeviceCode, checkBridgeShortName, checkBridgeName } from '@/api/bridge'
import waves from '@/directive/waves'
import CityPicker from '@/components/CityPicker'
import queryDict from '@/utils/queryDict'
export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    var code = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入桥梁编号'))
      } else {
        if (this.edit) {
          checkDeviceCode({ code: value, id: this.edit, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('桥梁编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceCode({ code: value, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('桥梁编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    var shortName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入桥梁简称'))
      } else {
        if (this.edit) {
          checkBridgeShortName({ shortName: value, id: this.edit, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('桥梁简称已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkBridgeShortName({ shortName: value, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('桥梁简称已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    var name = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入桥梁全称'))
      } else {
        if (this.edit) {
          checkBridgeName({ name: value, id: this.edit, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('桥梁全称已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkBridgeName({ name: value, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('桥梁全称已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    return {
      citys: {},
      edit: '',
      imageUrl: '',
      ruleForm2: {
        code: '',
        shortName: '',
        name: '',
        addrCode: '',
        serviceDay: '',
        location: '',
        descp: '',
        remark: '',
        img: '',
        org: '',
        phone: '',
        email: ''
      },
      rules2: {
        code: [
          { required: true, validator: code, trigger: 'blur' }
        ],
        shortName: [
          { required: true, validator: shortName, trigger: 'blur' }
        ],
        name: [
          { required: true, validator: name, trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请输入地理位置信息', trigger: 'blur' }
        ],
        org: [
          { required: true, message: '请输入维护机构名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        addrCode: [
          { required: true, message: '请选择桥梁位置信息', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入联系电邮', trigger: 'blur' }
        ]
      },
      timeout: null,
      dialogTableVisible: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        name: '',
        code: '',
        active: 1,
        pageSize: 10,
        pageNo: 1
      }
    }
  },
  filters: {
    typeFilter(type) {
    }
  },
  created() {
    this.getDictoryData()
  },
  components: {
    CityPicker
  },
  methods: {
    getDictoryData() {
      const that = this
      queryDict.applyDict('XZQH', function(dictData) {
        dictData.map(item => {
          that.citys[item.code] = item.fullCaption
        })
        that.getList()
      }) // 城市级联
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm2.img === '') {
            this.ruleForm2.img = '/default-bridge.jpg'
          }
          if (!this.edit) {
            addDevice(this.ruleForm2).then(response => {
              if (response.success) {
                this.getList()
                setTimeout(function() {
                  that.pop('已成功添加桥梁')
                }, 1000)
                this.resetForm('ruleForm2')
                this.ruleForm2.img = ''
                this.dialogTableVisible = false
              }
            }).catch(error => {
              console.log(error)
            })
          } else {
            const par = this.ruleForm2
            par.id = this.edit
            updateDevice(par).then(response => {
              if (response.success) {
                setTimeout(function() {
                  that.pop('已成功更新桥梁')
                }, 1000)
                this.resetForm('ruleForm2')
                this.getList()
                this.dialogTableVisible = false
                this.edit = ''
                this.ruleForm2 = {
                  code: '',
                  shortName: '',
                  name: '',
                  addrCode: '',
                  serviceDay: '',
                  location: '',
                  descp: '',
                  remark: '',
                  img: '',
                  org: '',
                  phone: '',
                  email: ''
                }
              }
            })
          }
        }
      })
    },
    resetForm(formName) {
      this.dialogTableVisible = false
      this.$refs[formName].resetFields()
      this.imageUrl = ''
      this.edit = ''
    },
    closed() {
      this.$refs['ruleForm2'].resetFields()
      this.edit = ''
      this.imageUrl = ''
    },
    getList() {
      this.listLoading = true
      pageQueryDevice(this.listQuery).then(response => {
        if (response.success) {
          this.list = response.data.data
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        }
      })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$confirm('确定要删除:桥梁' + row.code + '吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteDevice({ id: row.id }).then(response => {
          if (response.success) {
            this.getList()
            this.pop('已成功删除该桥梁')
          }
        })
      }).catch(() => {
      })
    },
    pop($par) {
      this.$confirm($par, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        showCancelButton: false,
        center: true
      }).then(() => {
      }).catch(() => {
      })
    },
    resetTemp(row) {
      this.ruleForm2 = {
        code: row.code,
        shortName: row.shortName,
        name: row.name,
        addrCode: row.addrCode,
        serviceDay: row.serviceDay,
        location: row.location,
        descp: row.descp,
        remark: row.remark,
        img: row.img,
        org: row.org,
        phone: row.phone,
        email: row.email
      }
      this.edit = row.id
    },
    handleCreate() {
      this.dialogTableVisible = true
      this.ruleForm2.img = ''
    },
    handleUpdate(row) {
      const that = this
      setTimeout(function() {
        that.resetTemp(row)
        that.imageUrl = '/data/bridge' + row.img
      }, 500)
      this.dialogTableVisible = true
    },
    handleSelect(item) {
      this.ruleForm2.deviceId = item.id
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.ruleForm2.img = res.data[0].uri
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG && !isPNG) {
        this.$message.error('图片过大或格式不对请重新上传')
      }
      if (!isLt2M) {
        this.$message.error('图片过大或格式不对请重新上传')
      }
      return (!isJPG || !isPNG) && isLt2M
    },
    toshow(value) {
      this.ruleForm2.addrCode = value
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-autocomplete{
    display: block
  }
  .el-btn-col{
    margin-top: 45px
  }
  .avatar-uploader{
    border: 1px dashed #409EFF;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader {
    font-size: 28px;
    color: #8c939d;
    width: 260px;
    height: 260px;
    line-height: 260px;
    text-align: center;
  }
  .avatar {
    width: 260px;
    height: 260px;
    display: block;
  }
  .el-autocomplete{
    display: block
  }
  .el-btn-col{
    margin-top: 45px
  }
  .el-form-item{
    margin: 0px 10px
  }
  .el-select,.el-date-editor--date{
    width: 100%
  }
  .el-col{
    margin-bottom: 15px
  }
  .el-form--label-top .el-form-item__label{
    line-height: 20px
  }
</style>

src/views/baseInfoManage/sensorsConfig/index.vue

@@ -0,0 +1,453 @@
<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <el-input style="width: 200px;" class="filter-item" placeholder="传感器编号" v-model="listQuery.code">
      </el-input>
      <el-input style="width: 200px;" class="filter-item" placeholder="所属采集盒编号" v-model="listQuery.cdCode">
      </el-input>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleFilter" type="primary" icon="el-icon-search">查找</el-button>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加传感器</el-button>
    </div>
    <el-table :key='tableKey' :data="listG" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%;min-height:550px;">
      <el-table-column width="150px" align="center" label="传感器编号" prop="code"></el-table-column>
      <el-table-column width="150px" align="center" label="内部编号" prop="seq"></el-table-column>
      <el-table-column width="150px" align="center" label="传感器所在主缆" prop="cableType"></el-table-column>
      <el-table-column width="150px" align="center" label="传感器位置" prop="locType"></el-table-column>
      <el-table-column min-width="150px" align="center" label="所属采集盒编号" prop="deviceName"></el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息" prop="remark"></el-table-column>
      <el-table-column align="center" label="操作" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope"> 
          <el-button v-waves type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button> 
          <el-button v-waves size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="传感器配置" ref="ruleForm" :visible.sync="dialogTableVisible" width="860px" @close='closed'>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="form-main"  label-position='right' status-icon>
        <el-row>
          <el-col :span="12">
            <el-form-item label="传感器编号" prop="code">
              <el-input placeholder="请输入传感器编号" v-model="ruleForm2.code" maxlength=20></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属采集盒编号" prop="device">
              <el-autocomplete
                 v-model="ruleForm2.device"
                :fetch-suggestions="querySearchAsync"
                placeholder="请选择所属采集盒编号"
                @select="handleSelect">
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传感器所属主缆" prop="cableType">
              <el-select v-model="ruleForm2.cableType" placeholder="请选择传感器所属主缆">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传感器所属位置" prop="locType">
              <el-select v-model="ruleForm2.locType" placeholder="请选择传感器所属位置">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内部编号" prop="seq">
              <el-input placeholder="请输入内部编号" v-model="ruleForm2.seq" maxlength=10></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" maxlength=500 v-model="ruleForm2.remark" rows=4></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="24" class="el-btn-col">
            <div class="el-btn-col-box">
              <el-button v-waves type="primary" @click="submitForm('ruleForm2')">确认</el-button>
              <el-button v-waves type="info" @click="resetForm('ruleForm2')">返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <div class="pagination-container" style="text-align:center;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo" :page-size="listQuery.pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkDeviceInternalCode } from '@/api/sensor'
import waves from '@/directive/waves'
import queryDict from '@/utils/queryDict'
import queryBase from '@/utils/queryBase'
export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    var device = (rule, value, callback) => {
      const that = this
      setTimeout(function() {
        if (that.ruleForm2.device === '' || that.ruleForm2.deviceId === '') {
          callback(new Error('请选择所属采集盒编号'))
        } else {
          callback()
        }
      }, 300)
    }
    var seq = (rule, value, callback) => {
      const num = /^[0-9]*$/
      if (value === '') {
        callback(new Error('请输入内部编号'))
      } else {
        if (!this.ruleForm2.deviceId) {
          callback('请先选择所属采集盒编号')
          return
        }
        if (!num.test(value)) {
          callback('请输入数字')
          return
        }
        if (this.edit) {
          checkDeviceInternalCode({ seq: value, id: this.edit, deviceId: this.ruleForm2.deviceId, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('内部编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceInternalCode({ seq: value, deviceId: this.ruleForm2.deviceId, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('内部编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    var code = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入传感器编号'))
      } else {
        if (this.edit) {
          checkDeviceCode({ code: value, id: this.edit, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('传感器编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceCode({ code: value, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('传感器编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    return {
      cableMain: [],
      addr: [],
      options: [],
      options1: [],
      edit: '',
      ruleForm2: {
        code: '',
        cableType: '01',
        device: '',
        seq: '',
        deviceId: '',
        locType: '01',
        remark: ''
      },
      rules2: {
        code: [
          { required: true, validator: code, trigger: 'blur' }
        ],
        device: [
          { required: true, validator: device, trigger: 'blur' }
        ],
        cableType: [
          { required: true, message: '请选择传感器所属主缆', trigger: 'blur' }
        ],
        locType: [
          { required: true, message: '请选择传感器所属位置', trigger: 'blur' }
        ],
        seq: [
          { required: true, validator: seq, trigger: 'blur' }
        ]
      },
      timeout: null,
      dialogTableVisible: false,
      tableKey: 0,
      listG: null,
      total: null,
      listLoading: true,
      listQuery: {
        cdCode: '',
        code: '',
        active: 1,
        pageSize: 10,
        pageNo: 1
      }
    }
  },
  filters: {
    typeFilter(type) {
    }
  },
  created() {
    this.getDictoryData()
  },
  methods: {
    getDictoryData() {
      const that = this
      queryDict.applyDict('ZLLX', function(dictData) { // 主缆
        dictData.map(item => {
          that.options.push({ value: item.code, label: item.caption })
          that.cableMain[item.code] = item.caption
        })
        queryDict.applyDict('ZLWZ', function(dictData) { // 位置
          dictData.map(item => {
            that.options1.push({ value: item.code, label: item.caption })
            that.addr[item.code] = item.caption
          })
          that.getList()
        })
      })
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.edit) {
            addDevice(this.ruleForm2).then(response => {
              if (response.success) {
                this.getList()
                setTimeout(function() {
                  that.pop('已成功添加传感器')
                }, 1000)
                this.resetForm('ruleForm2')
                this.dialogTableVisible = false
              }
            }).catch(error => {
              console.log(error)
            })
          } else {
            const par = this.ruleForm2
            this.options.forEach(function(item) {
              if (item.label === par.cableType) {
                par.cableType = item.value
              }
            })
            this.options1.forEach(function(item) {
              if (item.label === par.locType) {
                par.locType = item.value
              }
            })
            par.id = this.edit
            updateDevice(par).then(response => {
              if (response.success) {
                setTimeout(function() {
                  that.pop('已成功更新传感器')
                }, 1000)
                this.resetForm('ruleForm2')
                this.getList()
                this.dialogTableVisible = false
                this.edit = ''
                this.ruleForm2 = {
                  code: '',
                  cableType: '',
                  device: '',
                  seq: '',
                  deviceId: '',
                  locType: '',
                  remark: ''
                }
              }
            })
          }
        }
      })
    },
    resetForm(formName) {
      this.dialogTableVisible = false
      this.$refs[formName].resetFields()
      this.edit = ''
    },
    closed() {
      this.$refs['ruleForm2'].resetFields()
      this.edit = ''
    },
    getList() {
      var that = this
      this.listLoading = true
      pageQueryDevice(that.listQuery).then(response => {
        if (response.success) {
          var $data = response.data.data
          var hdata = { num: 1, data: $data }
          for (let i = 0; i < $data.length; i++) {
            hdata.num++
            $data[i].cableType = that.cableMain[$data[i].cableType]
            $data[i].locType = that.addr[$data[i].locType]
            const str = $data[i]
            queryBase.getDevice(str.deviceId, function(sc, value) {
              if (sc) {
                str.deviceName = value.code
                hdata.num--
                if (hdata.num === 0) {
                  that.listG = hdata.data
                }
              }
            })
          }
          hdata.num--
          if (hdata.num === 0) {
            that.listG = hdata.data
          }
          that.total = response.data.total
          setTimeout(() => {
            that.listLoading = false
          }, 1.5 * 1000)
        }
      })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$confirm('确定要删除:传感器' + row.code + '吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteDevice({ id: row.id }).then(response => {
          if (response.success) {
            this.getList()
            this.pop('已成功删除该传感器')
          }
        })
      }).catch(() => {
      })
    },
    pop($par) {
      this.$confirm($par, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        showCancelButton: false,
        center: true
      }).then(() => {
      }).catch(() => {
      })
    },
    resetTemp(row) {
      this.ruleForm2 = {
        code: row.code,
        cableType: row.cableType,
        device: row.deviceName,
        seq: row.seq,
        deviceId: row.deviceId,
        locType: row.locType,
        remark: row.remark
      }
      this.edit = row.id
    },
    handleCreate() {
      this.dialogTableVisible = true
    },
    handleUpdate(row) {
      const that = this
      setTimeout(function() {
        that.resetTemp(row)
      }, 500)
      this.dialogTableVisible = true
    },
    querySearchAsync(queryString, cb) {
      this.ruleForm2.deviceId = ''
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        DeviceOfservice({ code: this.ruleForm2.device, active: 1 }).then(response => {
          const $info = response.data
          if ($info.length) {
            const $data = $info.map(item => {
              return { 'value': item.code, 'id': item.id }
            })
            cb($data)
            if ($info.length === 1 && this.ruleForm2.bridge === $info[0].code) {
              this.ruleForm2.deviceId = $info[0].id
            } else {
              this.ruleForm2.deviceId = ''
            }
          } else {
            cb([])
          }
        })
      }, 3000 * Math.random())
    },
    handleSelect(item) {
      this.ruleForm2.deviceId = item.id
      this.ruleForm2.device = item.value
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-autocomplete{
    display: block
  }
  .el-btn-col{
    margin-top: 45px
  }
  .el-form-item{
    margin: 0px 10px
  }
  .el-select{
    width: 100%
  }
  .el-col{
    margin-bottom: 15px
  }
  .el-form-item__label{
    padding: 0px
  }
</style>

src/views/baseInfoManage/serversConfig/index.vue

@@ -0,0 +1,393 @@
<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <el-input style="width: 200px;" class="filter-item" placeholder="服务器编号" v-model="listQuery.code">
      </el-input>
      <el-input style="width: 200px;" class="filter-item" placeholder="所属桥梁名称" v-model="listQuery.key">
      </el-input>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleFilter" type="primary" icon="el-icon-search">查找</el-button>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加服务器</el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%;min-height:550px;">
      <el-table-column width="150px" align="center" label="服务器编号" prop="code"></el-table-column>
      <el-table-column width="150px" align="center" label="内部编号" prop="seq"></el-table-column>
      <el-table-column width="150px" align="center" label="采集盒数量" prop="devices"></el-table-column>
      <el-table-column min-width="150px" align="center" label="所属桥梁" prop="bridgeName"></el-table-column>
      <el-table-column min-width="200px" align="center" label="备注信息" prop="remark"></el-table-column>
      <el-table-column align="center" label="操作" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope"> 
          <el-button v-waves type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button> 
          <el-button v-waves size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="采集服务器配置" ref="ruleForm" :visible.sync="dialogTableVisible" width="860px" @close='closed'>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="form-main"  label-position='right' status-icon>
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务器编号" prop="code">
              <el-input placeholder="请输入服务器编号" v-model="ruleForm2.code" maxlength=20></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采集盒数量" prop="devices">
              <el-input placeholder="请输入采集盒数量" v-model="ruleForm2.devices" maxlength=10></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属桥梁" prop="bridge">
              <el-autocomplete
                 v-model="ruleForm2.bridge"
                :fetch-suggestions="querySearchAsync"
                placeholder="请选择所属桥梁"
                @select="handleSelect">
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内部编号" prop="seq">
              <el-input placeholder="请输入内部编号" v-model="ruleForm2.seq" maxlength=20></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" maxlength=500 v-model="ruleForm2.remark" rows=4></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="24" class="el-btn-col">
            <div class="el-btn-col-box">
              <el-button v-waves type="primary" @click="submitForm('ruleForm2')">确认</el-button>
              <el-button v-waves type="info" @click="resetForm('ruleForm2')">返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <div class="pagination-container" style="text-align:center;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNo" :page-size="listQuery.pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { addDevice, updateDevice, deleteDevice, pageQueryDevice, DeviceOfservice, checkDeviceCode, checkDeviceInternalCode } from '@/api/server'
import waves from '@/directive/waves'
import queryBase from '@/utils/queryBase'
export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    var bridge = (rule, value, callback) => {
      const that = this
      setTimeout(function() {
        if (that.ruleForm2.bridge === '' || that.ruleForm2.bridgeId === '') {
          callback(new Error('请选择所属桥梁'))
        } else {
          callback()
        }
      }, 300)
    }
    var seq = (rule, value, callback) => {
      const num = /^[0-9a-zA-Z]*$/
      if (value === '') {
        callback(new Error('请输入内部编号'))
      } else {
        if (!this.ruleForm2.bridgeId) {
          callback('请先选择所属桥梁')
          return
        }
        if (!num.test(value)) {
          callback('请输入数字或字母')
          return
        }
        if (this.edit) {
          checkDeviceInternalCode({ seq: value, id: this.edit, bridgeId: this.ruleForm2.bridgeId, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('内部编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceInternalCode({ seq: value, bridgeId: this.ruleForm2.bridgeId, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('内部编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    var code = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入服务器编号'))
      } else {
        if (this.edit) {
          checkDeviceCode({ code: value, id: this.edit, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('服务器编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        } else {
          checkDeviceCode({ code: value, active: 1 }).then(response => {
            if (response.data) {
              callback(new Error('服务器编号已存在，请重新输入'))
            } else {
              callback()
            }
          })
        }
      }
    }
    return {
      edit: '',
      ruleForm2: {
        code: '',
        bridge: '',
        seq: '',
        bridgeId: '',
        remark: '',
        devices: ''
      },
      rules2: {
        code: [
          { required: true, validator: code, trigger: 'blur' }
        ],
        bridge: [
          { required: true, validator: bridge, trigger: 'blur' }
        ],
        devices: [
          { required: true, message: '请输入采集盒数量', trigger: 'blur' }
        ],
        seq: [
          { required: true, validator: seq, trigger: 'blur' }
        ]
      },
      timeout: null,
      dialogTableVisible: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        key: '',
        code: '',
        active: 1,
        pageSize: 10,
        pageNo: 1
      }
    }
  },
  filters: {
    typeFilter(type) {
    }
  },
  created() {
    this.getList()
  },
  methods: {
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.edit) {
            addDevice(this.ruleForm2).then(response => {
              if (response.success) {
                this.getList()
                setTimeout(function() {
                  that.pop('已成功添加服务器')
                }, 1000)
                this.resetForm('ruleForm2')
                this.dialogTableVisible = false
              }
            }).catch(error => {
              console.log(error)
            })
          } else {
            const par = this.ruleForm2
            par.id = this.edit
            updateDevice(par).then(response => {
              if (response.success) {
                setTimeout(function() {
                  that.pop('已成功更新服务器')
                }, 1000)
                this.resetForm('ruleForm2')
                this.getList()
                this.dialogTableVisible = false
                this.edit = ''
                this.ruleForm2 = {
                  code: '',
                  bridge: '',
                  seq: '',
                  bridgeId: '',
                  devices: '',
                  remark: ''
                }
              }
            })
          }
        }
      })
    },
    resetForm(formName) {
      this.dialogTableVisible = false
      this.$refs[formName].resetFields()
      this.edit = ''
    },
    closed() {
      this.$refs['ruleForm2'].resetFields()
      this.edit = ''
    },
    getList() {
      var that = this
      this.listLoading = true
      pageQueryDevice(this.listQuery).then(response => {
        if (response.success) {
          const $data = response.data.data
          var hdata = { num: 1, data: $data }
          for (let i = 0; i < $data.length; i++) {
            hdata.num++
            const str = $data[i]
            queryBase.getBridge(str.bridgeId, function(sc, value) {
              if (sc) {
                str.bridgeName = value.shortName
                hdata.num--
                if (hdata.num === 0) {
                  that.list = hdata.data
                }
              }
            })
          }
          hdata.num--
          if (hdata.num === 0) {
            that.list = hdata.data
          }
          that.total = response.data.total
          setTimeout(() => {
            that.listLoading = false
          }, 1.5 * 1000)
        }
      })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$confirm('确定要删除:服务器' + row.code + '吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteDevice({ id: row.id }).then(response => {
          if (response.success) {
            this.getList()
            this.pop('已成功删除该服务器')
          }
        })
      }).catch(() => {
      })
    },
    pop($par) {
      this.$confirm($par, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        showCancelButton: false,
        center: true
      }).then(() => {
      }).catch(() => {
      })
    },
    resetTemp(row) {
      this.ruleForm2 = {
        code: row.code,
        bridge: row.bridgeName,
        seq: row.seq,
        bridgeId: row.bridgeId,
        devices: row.devices,
        remark: row.remark
      }
      this.edit = row.id
    },
    handleCreate() {
      this.dialogTableVisible = true
    },
    handleUpdate(row) {
      const that = this
      setTimeout(function() {
        that.resetTemp(row)
      }, 500)
      this.dialogTableVisible = true
    },
    querySearchAsync(queryString, cb) {
      this.ruleForm2.bridgeId = ''
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        DeviceOfservice({ key: this.ruleForm2.bridge, active: 1 }).then(response => {
          const $info = response.data
          if ($info.length) {
            const $data = $info.map(item => {
              return { 'value': item.shortName, 'id': item.id }
            })
            cb($data)
            if ($info.length === 1 && this.ruleForm2.bridge === $info[0].shortName) {
              this.ruleForm2.bridgeId = $info[0].id
            } else {
              this.ruleForm2.bridgeId = ''
            }
          } else {
            cb([])
          }
        })
      }, 3000 * Math.random())
    },
    handleSelect(item) {
      this.ruleForm2.bridgeId = item.id
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-autocomplete{
    display: block
  }
  .el-btn-col{
    margin-top: 45px
  }
  .el-form-item{
    margin: 0px 10px
  }
  .el-select{
    width: 100%
  }
  .el-col{
    margin-bottom: 15px
  }
  .el-form-item__label{
    padding: 0px
  }
</style>

src/views/dashboard/admin/index.vue

@@ -0,0 +1,45 @@
<template>
  <div class="dashboard-editor-container">
    <div>
      <img class="plat-pic" src="/static/touchwave.png" width="460">
      <p class="plat-tit">欢迎 <span>{{name}}</span> 使用声脉桥梁云监控平台</p>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'dashboard-admin',
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin: 20px;
  height: 100%;
  padding: 12% 0;
  background: #fff;
  .plat-pic{
    margin: 40px auto 0;
  }
  .plat-tit{
    font-size: 34px;
    line-height: 40px;
    letter-spacing: 2px;
    span{
      color: #0f76c4;
    }
  }
}
</style>

src/views/dashboard/index.vue

@@ -0,0 +1,26 @@
<template>
  <div class="dashboard-container">
    <component :is="currentRole"></component>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
export default {
  name: 'dashboard',
  components: {
    adminDashboard
  },
  data() {
    return {
      currentRole: 'adminDashboard'
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  }
}
</script>

src/views/findPwd/index.vue

@@ -0,0 +1,250 @@
<template>
  <div class="login-container">
    <div class="logo-wrapper">
      <div class="logo-img"></div>
    </div>
    <div class="form-wrapper">
      <div class="form-contain login-form">
        <h3 class="title">找回密码</h3>
        <div class="step-wrapper">
          <el-steps :active="stepVal" finish-status="success" align-center>
            <el-step title="输入手机号"></el-step>
            <el-step title="重置密码"></el-step>
          </el-steps>
        </div>
        <div class="step-contain">
          <el-form v-show="stepFisrt" :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item prop="phoneNum">
              <el-input v-model="ruleForm.phoneNum" placeholder="请输入您的手机号码"></el-input>
            </el-form-item>
            <el-form-item prop="msgVC">
              <el-input v-model="ruleForm.msgVC" placeholder="请输入短信验证码" class="code-btn" style="width:100%">
                <el-button v-waves slot="append" type="primary" :disabled="phoneCodeBol" @click="clickMsgVcLogin">
                  <span v-if="sendMsgDisabled">{{seconds + '秒后获取'}}</span>
                  <span v-if="!sendMsgDisabled">获取验证码</span>
                </el-button>
             </el-input>
            </el-form-item>
            <el-form-item>
              <el-button v-waves class="log-btn" type="primary" :disabled="isDisabl" @click="nextStep('ruleForm')">下一步</el-button>
            </el-form-item>
            <el-form-item class="el-form-find">
              <el-button v-waves type="text" @click="goLogin">又想起来了</el-button>
            </el-form-item>
          </el-form>
          <el-form v-show="stepSecond" :model="ruleForm2" :rules="rules2" ref="ruleForm2" class="demo-ruleForm">
            <el-form-item prop="pass">
              <el-input type="password" v-model="ruleForm2.pass" placeholder="请设置您的新密码" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
              <el-input type="password" v-model="ruleForm2.checkPass" placeholder="请再次输入密码确认" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button v-waves class="log-btn" type="primary" :disabled="isDisabl" @click.native.prevent="resetPwd('ruleForm2')">重置密码</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { isReg, getResetMsgPhone, resetPwdByTel } from '@/api/login'
  import '@/styles/loginform.scss'
  import waves from '@/directive/waves'
  export default {
    directives: {
      waves
    },
    data() {
      var validPhone = (rule, value, callback) => {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (!value) {
          callback(new Error('请输入您的手机号码'))
        } else if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号码'))
        } else {
          callback()
        }
      }
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请设置您的新密码'))
        } else if (value.length < 6 || value.length > 24) {
          callback(new Error('密码由6-24个字符组成，区分大小写'))
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码确认'))
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致，请重新输入!'))
        } else {
          callback()
        }
      }
      return {
        phoneCodeBol: false,
        sendMsgDisabled: false,
        seconds: 60,
        platId: '',
        resetStepNum: '',
        resetCode: '',
        stepVal: 0,
        stepFisrt: true,
        stepSecond: false,
        isDisabl: false,
        ruleForm: {
          phoneNum: '',
          msgVC: ''
        },
        rules: {
          phoneNum: [
            { required: true, validator: validPhone, trigger: 'blur' }
          ],
          msgVC: [
            { required: true, message: '请输入短信验证码', trigger: 'blur' }
          ]
        },
        ruleForm2: {
          pass: '',
          checkPass: ''
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      nextStep(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.stepFisrt = false
            this.stepSecond = true
            this.stepVal = 1
          } else {
            return false
          }
        })
      },
      userRegisterOk() {
        const me = this
        const account = this.ruleForm.phoneNum
        isReg({ account }).then(res => {
          if (res.success) {
            if (res.data === true) {
              me.sendMsgDisabled = false
              me.phoneCodeBol = false
              me.$message({
                message: '该账号不存在，请检查后重试',
                type: 'warning'
              })
            } else {
              me.getResetMsgPhone()
              me.sendMsgDisabled = true
              me.phoneCodeBol = true
              const interval = window.setInterval(function() {
                if ((me.seconds--) <= 0) {
                  me.seconds = 60
                  me.sendMsgDisabled = false
                  me.phoneCodeBol = false
                  window.clearInterval(interval)
                }
              }, 1000)
            }
          }
        })
      },
      getResetMsgPhone() {
        const me = this
        const account = this.ruleForm.phoneNum
        const checkExists = true
        getResetMsgPhone({ account, checkExists }).then((res) => {
          if (!res.success) {
            if (res.code === -60000) {
              me.sendMsgDisabled = false
              me.phoneCodeBol = false
              me.$message({
                message: '该账号不存在，请检查后重试',
                type: 'warning'
              })
            } else {
              me.$message({
                message: res.detailMsg,
                type: 'warning'
              })
            }
          }
        })
      },
      clickMsgVcLogin() {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (!this.ruleForm.phoneNum) {
          this.$message({
            message: '请输入你的手机号码',
            type: 'warning'
          })
        } else if (!reg.test(this.ruleForm.phoneNum)) {
          this.$message({
            message: '请输入正确的手机号码',
            type: 'warning'
          })
        } else {
          this.userRegisterOk()
        }
      },
      resetPwd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            resetPwdByTel(this.ruleForm2.pass, this.ruleForm.msgVC).then((res) => {
              if (res.success) {
                this.$alert('密码已重置，快去登录吧！', '提示', {
                  confirmButtonText: '确定',
                  type: 'success',
                  center: true,
                  callback: action => {
                    if (action === 'confirm') {
                      this.$router.push({ path: '/login' })
                    }
                  }
                })
              } else {
                this.$alert('密码重置失败！', '提示', {
                  confirmButtonText: '重新找回密码',
                  type: 'warning',
                  center: true,
                  callback: action => {
                    if (action === 'confirm') {
                      this.stepFisrt = true
                      this.stepSecond = false
                      this.stepVal = 0
                    }
                  }
                })
                return
              }
            })
          } else {
            return false
          }
        })
      },
      goLogin() {
        this.$router.push({ path: '/login' })
      }
    }
  }
</script>

src/views/home/index.vue

@@ -0,0 +1,3 @@
<template>
	<div>home</div>
</template>	

src/views/hospital/index.vue

@@ -0,0 +1,3 @@
<template>
  <div>医院</div>
</template>	

src/views/intelligentJudgment/index.vue

@@ -0,0 +1,3 @@
<template>
	<div>AI智能判断</div>
</template>	

src/views/layout/Layout.vue

@@ -0,0 +1,86 @@
<template>
  <div class="app-wrapper" :class="classObj">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
    <TopNavbar></TopNavbar>
    <Navigation v-if="roles.indexOf('2')<0" ></Navigation>
    <div class='containerBox'>
      <sidebar class="sidebar-container"></sidebar>
      <div class="main-container" style='padding-top:0px;'>
        <navbar></navbar>
        <app-main></app-main>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { TopNavbar, Navbar, Sidebar, AppMain } from './components'
import Navigation from '../nav'
import ResizeMixin from './mixin/ResizeHandler'
export default {
  name: 'layout',
  components: {
    TopNavbar,
    Navbar,
    Sidebar,
    AppMain,
    Navigation
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapGetters([
      'roles'
    ]),
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .app-wrapper {
    padding-top: 50px;
    @include clearfix;
    position: relative;
    height: 100%;
    &.mobile.openSidebar{
      position: fixed;
      top: 0;
    }
    .containerBox {
      margin: auto;
      width: 1100px;
      box-sizing: border-box;
      height:100%;
    }
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }
</style>

src/views/layout/common.vue

@@ -0,0 +1,78 @@
<template>
  <div class="app-wrapper" :class="classObj">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
    <TopNavbar></TopNavbar>
    <Navigation></Navigation>
    <div class="main-container" style="marginLeft:0;padding-top:0px;margin:auto;width:1100px;padding:0 0px;">
      <Abb></Abb>
      <app-main></app-main>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { TopNavbar, Abb, Sidebar, AppMain } from './components'
import Navigation from '../nav'
import ResizeMixin from './mixin/ResizeHandler'
export default {
  name: 'layout',
  components: {
    TopNavbar,
    Abb,
    Sidebar,
    AppMain,
    Navigation
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapGetters([
      'roles'
    ]),
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('CloseSideBar', { withoutAnimation: false })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .app-wrapper {
    padding-top: 50px;
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    &.mobile.openSidebar{
      position: fixed;
      top: 0;
    }
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }
</style>

src/views/layout/components/Abb.vue

@@ -0,0 +1,45 @@
<template>
  <div>
    <el-menu class="navbar" mode="horizontal">
      <breadcrumb></breadcrumb>
    </el-menu>
  </div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
export default {
  components: {
    Breadcrumb
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.navbar {
  height: 50px;
  line-height: 50px;
  padding: 0 12px;
  border-radius: 0px !important;
  .hamburger-container {
    line-height: 58px;
    height: 50px;
    float: left;
    padding: 0 10px;
  }
  .screenfull {
    position: absolute;
    right: 90px;
    top: 16px;
    color: red;
  }
}
.message-box{
  color: #303133;
  background: #c7e3ff;
  padding: 0 20px;
  font-size: 14px;
}
</style>

src/views/layout/components/AppMain.vue

@@ -0,0 +1,28 @@
<template>
  <section class="app-main">
    <transition name="fade" mode="out-in">
      <router-view :key="key"></router-view>
      <!-- <router-view></router-view> -->
    </transition>
  </section>
</template>
<script>
export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
    }
  }
}
</script>
<style scoped>
.app-main {
  /*50 = navbar  */
  min-height: 100%;
  position: relative;
  overflow: hidden;
}
</style>

src/views/layout/components/Navbar.vue

@@ -0,0 +1,67 @@
<template>
  <div>
    <el-menu class="navbar" mode="horizontal">
      <hamburger  class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
      <breadcrumb></breadcrumb>
    </el-menu>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Marqueebox from '@/components/Marqueebox'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
export default {
  components: {
    Breadcrumb,
    Hamburger,
    Marqueebox
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'roles'
    ])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.navbar {
  height: 50px;
  line-height: 50px;
  padding: 0 12px;
  border-radius: 0px !important;
  .hamburger-container {
    line-height: 58px;
    height: 50px;
    float: left;
    padding: 0 10px;
  }
  .screenfull {
    position: absolute;
    right: 90px;
    top: 16px;
    color: red;
  }
}
.message-box{
  color: #303133;
  background: #c7e3ff;
  padding: 0 20px;
  font-size: 14px;
}
</style>

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -0,0 +1,78 @@
<template>
  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
      <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
          <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
          <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{onlyOneChild.meta.title}}</span>
        </el-menu-item>
      </router-link>
      <el-submenu v-else :index="item.name||item.path">
        <template slot="title">
          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
          <span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span>
        </template>
        <template v-for="child in item.children" v-if="!child.hidden">
          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
          <router-link v-else :to="resolvePath(child.path)" :key="child.name" replace>
            <el-menu-item :index="resolvePath(child.path)">
              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
              <span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
            </el-menu-item>
          </router-link>
        </template>
      </el-submenu>
  </div>
</template>
<script>
import path from 'path'
export default {
  name: 'SidebarItem',
  props: {
    // route配置json
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      onlyOneChild: null
    }
  },
  methods: {
    hasOneShowingChild(children) {
      const showingChildren = children.filter(item => {
        if (item.hidden) {
          return false
        } else {
          // temp set(will be used if only has one showing child )
          this.onlyOneChild = item
          return true
        }
      })
      if (showingChildren.length === 1) {
        return true
      }
      return false
    },
    resolvePath(...paths) {
      return path.resolve(this.basePath, ...paths)
    }
  }
}
</script>

src/views/layout/components/Sidebar/index.vue

@@ -0,0 +1,37 @@
<template>
  <el-scrollbar wrapClass="scrollbar-wrapper">
    <el-menu
      mode="vertical"
      :show-timeout="200"
      :default-active="$route.path"
      :collapse="isCollapse"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
    >
      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
    </el-menu>
  </el-scrollbar>
</template>
<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
export default {
  components: { SidebarItem },
  computed: {
    ...mapGetters([
      'permission_routers',
      'sidebar'
    ]),
    routes() {
      console.log(this.permission_routers)
      return this.$router.options.routes
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  }
}
</script>

src/views/layout/components/TopNavbar.vue

@@ -0,0 +1,189 @@
<template>
  <div class="topnavbar">
    <div class='topnavbarBox'>
      <div class="logo-container">
        <div class="logo-wrapper" @click="toHome"><div class="logo-img"></div></div>
        <el-dropdown v-if="roles.indexOf('1')<0" trigger="click" class="drop-menu">
          <span class="el-dropdown-link">
            {{showName ? showName : '选择桥梁'}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu class="drop-menu-list" style="min-width:120px;" slot="dropdown">
            <el-dropdown-item v-for="item in dataList" :key="item.index" :disabled="item.disab" @click.native="goToDashboardC(item.id, item.shortName)">{{item.shortName}}
              <i v-if="item.disab" class="el-icon-check"></i>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="name-box">
        <span>您好，{{ name }}</span>
        <span class="exit-btn" @click="logout">退出登录</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { MessageBox } from 'element-ui'
import { getBridgeList } from '@/api/bridgeInfo'
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      bridgeId: '',
      showName: '',
      dataList: ''
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  watch: {
    '$route'(to, from) {
      if (to.path === '/dashboard') {
        var dataList = this.dataList
        for (let i = 0; i < dataList.length; i++) {
          dataList[i].disab = false
        }
        Cookies.remove('bridgeId')
        Cookies.remove('bridgeName')
        this.showName = ''
      } else {
        this.bridgeId = Cookies.get('bridgeId')
        this.showName = Cookies.get('bridgeName')
        this.getBridgeLists()
      }
    }
  },
  created() {
    this.bridgeId = Cookies.get('bridgeId')
    this.showName = Cookies.get('bridgeName')
    this.getBridgeLists()
  },
  methods: {
    toHome() {
      this.$router.replace({ path: '/' })
    },
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    },
    logout() {
      MessageBox.confirm('您确认要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          Cookies.remove('bridgeId')
          Cookies.remove('bridgeName')
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      }).catch(() => {
        console.log('已取消退出')
      })
    },
    getBridgeLists() {
      const param = {
        active: 1,
        pageSize: 10,
        pageNo: 1
      }
      getBridgeList(param).then(res => {
        if (res.success) {
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].id === this.bridgeId) {
              res.data.data[i].disab = true
            } else {
              res.data.data[i].disab = false
            }
          }
          this.dataList = res.data.data
        }
      })
    },
    goToDashboardC(id, name) {
      this.showName = name
      Cookies.set('bridgeId', id)
      Cookies.set('bridgeName', name)
      this.$router.replace({
        name: 'bridgeDetail',
        query: { id: id, name: name }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.topnavbar {
  position: fixed;
  font-size: 0px;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  line-height: 50px;
  z-index:1002;
  border-radius: 0px !important;
  background-color: #2d3a4b;
  border-bottom: 1px solid #e6e6e6;
  .topnavbarBox {
    position: relative;
    margin: auto;
    width: 1100px;
    box-sizing: border-box;
    padding: 0 10px;
    .logo-container {
      display: inline-block;
      position: absolute;
      left:10px;
      overflow: hidden;
      .logo-wrapper {
        float:left;
        width:300px;
        padding: 0;
        margin:10px 12px;
        cursor: pointer;
      }
      .drop-menu{
        float:left;
        cursor: pointer;
        margin:0;
        margin-left:20px;
        color: #fff;
      }
    }
    .name-box{
      display: inline-block;
      position: absolute;
      right: 20px;
      font-size:14px;
      overflow: hidden;
      color:#fff;
      .exit-btn {
        margin-left:30px;
        cursor: pointer;
      }
    }
  }
}
.drop-menu-list{
  .el-dropdown-menu__item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    &.is-disabled{
      background: #f3f5f7;
    }
    .el-icon-check{
      font-weight: bold;
    }
  }
}
</style>

src/views/layout/components/index.js

@@ -0,0 +1,5 @@
export { default as TopNavbar } from './TopNavbar'
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'
export { default as Abb } from './Abb'

src/views/layout/mixin/ResizeHandler.js

@@ -0,0 +1,41 @@
import store from '@/store'
const { body } = document
const WIDTH = 1024
const RATIO = 3
export default {
  watch: {
    $route(route) {
      if (this.device === 'mobile' && this.sidebar.opened) {
        store.dispatch('CloseSideBar', { withoutAnimation: false })
      }
    }
  },
  beforeMount() {
    window.addEventListener('resize', this.resizeHandler)
  },
  mounted() {
    const isMobile = this.isMobile()
    if (isMobile) {
      store.dispatch('ToggleDevice', 'mobile')
      store.dispatch('CloseSideBar', { withoutAnimation: true })
    }
  },
  methods: {
    isMobile() {
      const rect = body.getBoundingClientRect()
      return rect.width - RATIO < WIDTH
    },
    resizeHandler() {
      if (!document.hidden) {
        const isMobile = this.isMobile()
        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
        if (isMobile) {
          store.dispatch('CloseSideBar', { withoutAnimation: true })
        }
      }
    }
  }
}

src/views/login/index.vue

@@ -0,0 +1,148 @@
<template>
  <div class="login-container">
    <div class="logo-wrapper">
      <div class="logo-img"></div>
    </div>
    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
      <h3 class="title">登录</h3>
      <el-form-item prop="username">
        <span class="svg-container svg-container_login">
          <svg-icon icon-class="user" />
        </span>
        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入您的手机号码" maxlength="11" />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password"/>
        </span>
        <el-input name="password" :type="pwdType" v-model="loginForm.password" autoComplete="on"
          placeholder="请输入您的登录密码" maxlength="24"></el-input>
          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" v-show="!falg"/><svg-icon icon-class="password-view" v-show="falg"/></span>
      </el-form-item>
      <el-form-item prop="imgVerifyCode">
        <span class="svg-container">
          <svg-icon icon-class="msgvc"></svg-icon>
        </span>
        <el-input v-model="loginForm.imgVerifyCode" placeholder="请输入图形验证码" @keyup.enter.native="handleLogin" class="code-btn" maxlength="4">
        <img slot="append" :src="imgVcUrl" @click="changeImgVc" /></el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-waves class="log-btn" type="primary" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
      </el-form-item>
      <el-form-item class="el-form-find">
        <el-button v-waves type="text" @click.native.prevent="goBackPwd">忘记密码？</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import { getPictureVC } from '@/api/pictureVc'
import waves from '@/directive/waves'
import '@/styles/loginform.scss'
export default {
  name: 'login',
  directives: {
    waves
  },
  data() {
    var validPhone = (rule, value, callback) => {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
      if (!value) {
        callback(new Error('请输入您的手机号码'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    return {
      falg: false,
      imgVcUrl: '',
      loginForm: {
        username: '',
        password: '',
        imgVerifyCode: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validPhone }],
        password: [
          { required: true, message: '请输入您的登录密码', trigger: 'blur' },
          { min: 6, max: 24, message: '密码由6-24个字符组成，区分大小写', trigger: 'blur' }
        ],
        imgVerifyCode: [{ required: true, message: '请输入图形验证码', trigger: 'blur' }]
      },
      loading: false,
      pwdType: 'password'
    }
  },
  created() {
    this.changeImgVc()
  },
  methods: {
    showPwd() {
      this.falg = !this.falg
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('LoginByUsername', this.loginForm).then((response) => {
            this.loading = false
            if (response.success) {
              if (response.data) {
                this.$store.dispatch('GetUserInfo').then(res => {
                })
                this.$router.push({ path: '/dashboard' })
              } else {
                Message.error('登录账号与密码不匹配，请检查后重试')
                this.changeImgVc()
                return
              }
            } else {
              const errorCode = [{
                code: -60001,
                msg: '图形验证码不存在'
              }, {
                code: -60002,
                msg: '图形验证码超时'
              }, {
                code: -60003,
                msg: '图形验证码不正确'
              }, {
                code: -60005,
                msg: '该账号已停用，请联系管理员'
              }]
              for (let i = 0; i < errorCode.length; i++) {
                if (response.code === errorCode[i].code) {
                  Message.error(errorCode[i].msg)
                  this.changeImgVc()
                  return
                }
              }
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    goBackPwd() {
      this.$router.push({ path: '/findPwd' })
    },
    changeImgVc() {
      this.imgVcUrl = getPictureVC('PIC_LOGIN')
    }
  }
}
</script>

src/views/medicalTreatment/index.vue

@@ -0,0 +1,3 @@
<template>
	<div>协同诊疗</div>
</template>	

src/views/nav/index.vue

@@ -0,0 +1,51 @@
<template>
<el-menu style='display:flex'
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="green"
  text-color="#fff"
  active-text-color="#ffd04b">
   <router-link to='/show/home'>
    <el-menu-item index="1">首页</el-menu-item>
   </router-link>
   <router-link to='/show/medicalTreatment'>
    <el-menu-item index="2">协同诊疗</el-menu-item>
   </router-link>
   <router-link to='/show/intelligentJudgment'>
    <el-menu-item index="3">AI智能判断</el-menu-item>
   </router-link>
   <router-link to='/show/sharedDevice'>
    <el-menu-item index="4">共享器械</el-menu-item>
   </router-link>
   <router-link to='/show/hospital'> 
    <el-menu-item index="5">医院</el-menu-item>
   </router-link>
</el-menu>
</template>
<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .el-menu-demo {
    margin: auto;
    width: 1100px;
    box-sizing: border-box;
    padding: 0 10px;
  }
</style>

src/views/peoplesManage/accountSettings/index.vue

@@ -0,0 +1,3 @@
<template>
	<div>账户设置</div>
</template>

src/views/peoplesManage/infoManage/editSystemMessage.vue

@@ -0,0 +1,15 @@
<template>
   <el-form class="form-main" label-width="120px">
      <el-row>
         <el-col :span="24" >
            <el-input type="textarea" rows=8 maxlength=100></el-input>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
            <el-button type="info">返回</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
</template>

src/views/peoplesManage/infoManage/editUser.vue

@@ -0,0 +1,285 @@
<template>
  <el-dialog title="编辑用户" ref="ruleForm" :visible.sync="dialogTableVisible" width="860px" @close='closed'>
     <el-form class="form-main" :model="ruleForm2" :rules="rules2" ref="ruleForm2"  label-position='top' status-icon>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" prop='account'>
              <el-input placeholder="请输入账号" v-model="ruleForm2.account" maxlength=11></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户姓名" prop='name'>
              <el-input placeholder="请输入用户姓名" v-model="ruleForm2.name" maxlength=20></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位" prop='job'>
              <el-input placeholder="请输入用户职位" v-model="ruleForm2.job" maxlength=100></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户所在机构" prop='comp'>
              <el-input placeholder="请输入用户所在机构" v-model="ruleForm2.comp" maxlength=200></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户类型" prop='type'>
              <el-select v-model="ruleForm2.type" placeholder="请选择用户类型">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop='phone'>
              <el-input placeholder="请输入手机号码" v-model="ruleForm2.phone" maxlength=11></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系邮箱" prop='email'>
              <el-input placeholder="请输入邮箱地址" v-model="ruleForm2.email" maxlength=100></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" >
            <el-form-item label="备注" prop='remark'>
              <el-input type="textarea" rows=4 v-model="ruleForm2.remark" maxlength=500></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="24" class="el-btn-col">
            <div class="el-btn-col-box">
              <el-button type="primary" @click="submitForm('ruleForm2')">确认</el-button>
              <el-button type="info"  @click="resetForm('ruleForm2')">返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
</template>
<script>
import { checkRegister, addRegister, updateRegister, queryRegister } from '@/api/userManagemen'
export default {
  props: ['dialog', 'id'],
  data() {
    var account = (rule, value, callback) => {
      const regTel = /^1[3|4|5|7|8][0-9]\d{8}$/
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        if (!regTel.test(value)) {
          callback(new Error('账号为手机号格式'))
        } else {
          if (this.edit) {
            checkRegister({ account: value, id: this.edit }).then(response => {
              if (!response.data) {
                callback(new Error('账户已存在，请重新输入'))
              } else {
                callback()
              }
            })
          } else {
            checkRegister({ account: value }).then(response => {
              if (!response.data) {
                callback(new Error('账户已存在，请重新输入'))
              } else {
                callback()
              }
            })
          }
        }
      }
    }
    var phone = (rule, value, callback) => {
      const regTel = /^1[3|4|5|7|8][0-9]\d{8}$/
      if (value === '') {
        callback()
      } else {
        if (!regTel.test(value)) {
          callback(new Error('手机号码格式不正确'))
        } else {
          callback()
        }
      }
    }
    var email = (rule, value, callback) => {
      const regTel = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (value === '') {
        callback()
      } else {
        if (!regTel.test(value)) {
          callback(new Error('邮箱格式不正确'))
        } else {
          callback()
        }
      }
    }
    return {
      options: [{
        value: 0,
        label: '普通用户'
      }, {
        value: 1,
        label: '管理员'
      }],
      dialogTableVisible: false,
      ruleForm2: {
        edit: '',
        account: '',
        name: '',
        comp: '',
        job: '',
        phone: '',
        email: '',
        remark: '',
        type: 0
      },
      rules2: {
        account: [
          { required: true, validator: account, trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入用户姓名', trigger: 'blur' }
        ],
        comp: [
          { required: true, message: '请输入用户所在机构', trigger: 'blur' }
        ],
        job: [
          { required: true, message: '请输入用户职位', trigger: 'blur' }
        ],
        phone: [
          { validator: phone, trigger: 'blur' }
        ],
        email: [
          { validator: email, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    dialog() {
      this.dialogTableVisible = true
      this.edit = this.id
      if (this.edit) {
        queryRegister({ id: this.edit }).then(response => {
          if (response.success) {
            const $data = response.data
            this.ruleForm2 = {
              account: $data.account,
              name: $data.name,
              comp: $data.comp,
              job: $data.job,
              phone: $data.phone || '',
              email: $data.email || '',
              remark: $data.remark || '',
              type: $data.type
            }
          }
        })
      }
    }
  },
  methods: {
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.edit) {
            addRegister(this.ruleForm2).then(response => {
              if (response.success) {
                this.$emit('chilF')
                setTimeout(function() {
                  that.pop('已成功添加')
                }, 1000)
                this.resetForm(this.ruleForm2)
                this.dialogTableVisible = false
              }
            }).catch(error => {
              console.log(error)
            })
          } else {
            const par = this.ruleForm2
            par.id = this.edit
            updateRegister(par).then(response => {
              if (response.success) {
                setTimeout(function() {
                  that.pop('已成功更新用户信息')
                }, 1000)
                this.resetForm('ruleForm2')
                this.$emit('chilF')
                this.dialogTableVisible = false
                this.edit = ''
                this.ruleForm2 = {
                  account: '',
                  name: '',
                  comp: '',
                  job: '',
                  phone: '',
                  email: '',
                  remark: '',
                  type: 0
                }
              }
            })
          }
        }
      })
    },
    resetForm(formName) {
      this.dialogTableVisible = false
      this.$refs[formName].resetFields()
      this.edit = ''
      this.$emit('chilF', true)
    },
    closed() {
      this.$refs['ruleForm2'].resetFields()
      this.edit = ''
      this.$emit('chilF', true)
    },
    pop($par) {
      this.$confirm($par, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        showCancelButton: false,
        center: true
      }).then(() => {
      }).catch(() => {
      })
    },
    resetTemp(row) {
      this.ruleForm2 = {
        account: row.account,
        name: row.name,
        comp: row.comp,
        job: row.job,
        phone: row.phone,
        email: row.email,
        remark: row.remark,
        type: row.type
      }
      this.edit = row.id
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-form-item{
    margin: 0px 10px
  }
  .el-select{
    width: 100%
  }
  .el-col{
    margin-bottom: 15px
  }
  .el-form--label-top .el-form-item__label {
    padding: 0
  }
</style>

src/views/peoplesManage/infoManage/editUserPermissions.vue

@@ -0,0 +1,216 @@
<template>
  <el-dialog title="用户数据权限修改" :visible.sync="dialogTableVisible" width="860px" @close='closed'>
    <el-form class="form-main" :model="ruleForm2"  ref="ruleForm2">
      <el-row :gutter="16">
        <el-col :xs="24" :sm="24" :lg="24">
          <div class="list-item">
            <el-row>
              <el-col :span="8">
                <el-form-item label="账号">{{ruleForm2.account}}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用户姓名">{{ruleForm2.name}}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用户类型">{{(ruleForm2.type) ? '管理员' : '普通用户'}}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职位">{{ruleForm2.job}}</el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="所属机构">{{ruleForm2.comp}}</el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-col>
<!--         <el-col :xs="12" :sm="12" :lg="12">
          <div class="list-item">
            <el-row>
              <el-col :span="24">
                <el-form-item label="添加负责桥梁">
                  <el-autocomplete
                    v-model="state4"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请选择一个桥梁"
                    @select="handleSelect">
                  </el-autocomplete>
                </el-form-item>
              </el-col>
              <el-col :span="24" style="margin-top:30px"> 
                 <el-table
                  :show-header="shouHead"
                  :data="tableData3"
                  height="250"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="name"
                    label=""
                    min-width="180">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="">
                    <template slot-scope="scope">  
                      <el-button size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </el-col> -->
        <el-col :xs="24" :sm="24" :lg="24">
          <el-transfer class="check-transfer"
            filterable
            v-model="valueBridge"
            :titles="['所有桥梁', '负责桥梁']"
            :button-texts="['删除', '添加']"
            :props="{
              key: 'id',
              label: 'value'
            }"
            :data="bridgeLists">
          </el-transfer>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary" @click="submit">确认</el-button>
            <el-button type="info"  @click="closed">返回</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import { queryRegister, queryResponsibleBridge, DeviceOfservice, updatePermission } from '@/api/userManagemen'
export default {
  props: ['dialog', 'id'],
  data() {
    return {
      bridgeLists: [],
      bridgeListsChecked: [],
      valueBridge: [],
      shouHead: false,
      state4: '',
      ruleForm2: {
        account: '',
        name: '',
        comp: '',
        job: '',
        type: 0
      },
      dialogTableVisible: false
    }
  },
  created() {
    this.getAllBridges()
  },
  watch: {
    dialog() {
      queryRegister({ id: this.id }).then(response => {
        if (response.success) {
          const $data = response.data
          this.ruleForm2 = {
            account: $data.account,
            name: $data.name,
            comp: $data.comp,
            job: $data.job,
            type: $data.type
          }
        }
      })
      queryResponsibleBridge({ uid: this.id, active: 1 }).then(response => {
        if (response.success) {
          const $info = response.data
          for (let j = 0; j < $info.length; j++) {
            this.valueBridge.push($info[j].id)
          }
        }
      })
      this.dialogTableVisible = true
    }
  },
  methods: {
    getAllBridges() {
      DeviceOfservice({ key: this.state4, active: 1 }).then(response => {
        if (response.success) {
          const $info = response.data
          if ($info.length) {
            this.bridgeListsChecked.push($info[0].id)
            const $data = $info.map(item => {
              return { 'value': item.shortName, 'id': item.id }
            })
            this.bridgeLists = $data
          }
        }
      })
    },
    pop($par) {
      this.$confirm($par, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        showCancelButton: false,
        center: true
      }).then(() => {
      }).catch(() => {
      })
    },
    closed() {
      this.valueBridge = []
      this.dialogTableVisible = false
    },
    submit() {
      if (!this.valueBridge.length) {
        this.$message.error('请至少选择一个桥梁')
        return
      }
      updatePermission({ id: this.id, bridges: this.valueBridge }).then(response => {
        if (response.success) {
          this.valueBridge = []
          this.$emit('chilF')
          const that = this
          setTimeout(function() {
            that.pop('权限修改成功')
          }, 1000)
          this.dialogTableVisible = false
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-form-item{
    margin-bottom: 10px;
  }
  .textarea-div{
    line-height: 26px;
    margin-bottom: 10px;
  }
  .list-item{
    padding: 10px 15px;
  }
  .el-autocomplete {
    width: 100%
  }
  .check-transfer.el-transfer{
    padding-left: 15px;
    margin-bottom: 15px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center
  }
  .check-transfer .el-transfer-panel{
    width: 240px;
  }
</style>

src/views/peoplesManage/infoManage/index.vue

@@ -0,0 +1,214 @@
<template>
  <div class="app-container">
    <div class="filter-container" style="margin-bottom:20px">
      <el-input style="width: 200px;" class="filter-item" placeholder="账号" v-model="listQuery.account">
      </el-input>
       <el-input style="width: 200px;" class="filter-item" placeholder="用户姓名" v-model="listQuery.name">
      </el-input>
       <el-input style="width: 250px;" class="filter-item" placeholder="所在机构" v-model="listQuery.comp">
      </el-input>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleFilter" type="primary" icon="el-icon-search">查找</el-button>
      <el-button v-waves class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加用户</el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%;min-height:550px;">
      <el-table-column width="110px" align="center" label="账号">
        <template slot-scope="scope">
          <span>{{scope.row.account}}</span>
        </template>
      </el-table-column>
      <el-table-column width="80px" align="center" label="用户姓名">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column width="200px" align="center" label="职位">
        <template slot-scope="scope">
          <span>{{scope.row.job}}</span>
        </template>
      </el-table-column>
      <el-table-column width="110px" align="center" label="联系电话">
        <template slot-scope="scope">
          <span>{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100px" align="center" label="用户类型">
        <template slot-scope="scope">
          <span>{{(scope.row.type) ? '管理员' : '普通用户'}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100px" align="center" label="账户状态">
        <template slot-scope="scope">
          <span :class="{ active: !scope.row.active}">{{(scope.row.active) ? '未停用' : '已停用'}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="所在机构">
        <template slot-scope="scope">
          <span>{{scope.row.comp}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="负责桥梁">
        <template slot-scope="scope">
          <span>{{scope.row.bridgeName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="260px" class-name="small-padding fixed-width">
        <template slot-scope="scope"> 
          <el-button v-waves :type="((!scope.row.active) ? 'info' : 'primary')" size="mini" @click="handleUpdate(scope.row)" :disabled='!scope.row.active'>编辑</el-button> 
          <el-button v-waves size="mini" :type="((!scope.row.active) ? 'info' : 'danger')" @click="handleModifyStatus(scope.row,'deleted')" :disabled='!scope.row.active'>停用
          </el-button>
           <el-button v-waves size="mini" :type="((!scope.row.active) ? 'info' : 'primary')" @click="distribution(scope.row)" :disabled='!scope.row.active'>分配权限
          </el-button>
        </template>
        
      </el-table-column>
    </el-table>
    <editUser :dialog="dialogTableVisible" @chilF='chilF' :id='edit'></editUser>
    <editUserPermissions :dialog='dialogPerssion' @chilF='chilF' :id='edit'></editUserPermissions>
    <div class="pagination-container" style="text-align:center;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-size="listQuery.limit" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { deleteUser, queryResponsibleBridge, pageQueryUser } from '@/api/userManagemen'
import waves from '@/directive/waves'
import editUser from './editUser'
import editUserPermissions from './editUserPermissions'
export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    return {
      edit: '',
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      dialogPerssion: false,
      dialogTableVisible: false,
      listQuery: {
        account: '',
        name: '',
        comp: '',
        pageSize: 10,
        pageNo: 1
      }
    }
  },
  filters: {
    typeFilter(type) {
    }
  },
  created() {
    this.getList()
  },
  components: {
    editUser,
    editUserPermissions
  },
  methods: {
    getList() {
      this.listLoading = true
      pageQueryUser(this.listQuery).then(response => {
        if (response.success) {
          if (response.data === null) {
            this.list = []
            this.total = 0
            setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
            return
          }
          const $data = response.data.data
          for (let i = 0; i < $data.length; i++) {
            $data[i].bridgeName = ''
            queryResponsibleBridge({ uid: $data[i].id, active: 1 }).then(response => {
              if (response.success) {
                const arr = []
                const $info = response.data
                for (let j = 0; j < $info.length; j++) {
                  arr.push($info[j].shortName)
                }
                $data[i].bridgeName = arr.join(',')
              }
            })
          }
          this.list = $data
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        }
      })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    chilF(val) {
      if (!val) {
        this.getList()
      }
      this.edit = ''
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$confirm('确定要停用:用户' + row.name + '吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteUser({ id: row.id }).then(response => {
          if (response.success) {
            this.getList()
            this.pop('已成功停用该用户')
          }
        })
      }).catch(() => {
      })
    },
    handleCreate() {
      this.dialogTableVisible = !this.dialogTableVisible
    },
    handleUpdate(row) {
      this.edit = row.id
      this.dialogTableVisible = !this.dialogTableVisible
    },
    distribution(row) {
      this.edit = row.id
      this.dialogPerssion = !this.dialogPerssion
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-autocomplete{
    display: block
  }
  .el-btn-col{
    margin-top: 45px
  }
  .editTe{
    margin: 10px 0 0 22px
  }
  .active{
    color: red
  }
</style>

src/views/sharedDevice/index.vue

@@ -0,0 +1,3 @@
<template>
	<div>共享器械</div>
</template>