青岛社保首次提交

web/.babelrc

+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
+    }
+  }
+}

web/.editorconfig

+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

web/.gitignore

+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/test/unit/coverage/
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

web/.postcssrc.js

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

web/README.md

+# web
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+
+# run unit tests
+npm run unit
+
+# run all tests
+npm test
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

web/build/build.js

+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

web/build/check-versions.js

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

web/build/utils.js

+'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',
+        publicPath:'../../'
+      })
+    } 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')
+    })
+  }
+}

web/build/vue-loader.conf.js

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

web/build/webpack.base.conf.js

+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    　entry: ["babel-polyfill", "./src/main.js"]
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 80000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 80000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 80000,
+          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'
+  }
+}

web/build/webpack.dev.conf.js

+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

web/build/webpack.prod.conf.js

+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

web/config/dev.env.js

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

web/config/index.js

+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8990, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

web/config/prod.env.js

+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

web/config/test.env.js

+'use strict'
+const merge = require('webpack-merge')
+const devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+  NODE_ENV: '"testing"'
+})

web/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>web</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

web/package.json

+{
+  "name": "web",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "panjianbo <13651030816@163.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "unit": "jest --config test/unit/jest.conf.js --coverage",
+    "test": "npm run unit",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "@riophae/vue-treeselect": "^0.0.38",
+    "axios": "^0.18.0",
+    "babel-polyfill": "^6.26.0",
+    "cssnano": "^4.1.10",
+    "echarts": "^4.2.1",
+    "element-ui": "^2.8.2",
+    "file-saver": "^2.0.2",
+    "ol": "^6.0.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "vue": "^2.5.2",
+    "vue-photo-zoom-pro": "^1.2.12",
+    "vue-piczoom": "^1.0.6",
+    "vue-resource": "^1.5.1",
+    "vue-router": "^3.0.1",
+    "vue-video-player": "^5.0.2",
+    "vue2.0-zoom": "^2.1.1",
+    "vuex": "^3.1.1",
+    "xlsx": "^0.15.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-jest": "^24.8.0",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^3.0.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "jest": "^24.8.0",
+    "jest-serializer-vue": "^0.3.0",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^2.0.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.0.0",
+    "url-loader": "^2.0.1",
+    "vue-jest": "^1.0.2",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

web/src/App.vue

+<template>
+  <!-- <div id="app" class="dark-theme white-theme"> -->
+  <div id="app" :class="{'white-theme':theme=='white','dark-theme':theme=='dark'}">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+export default {
+  name: 'App',
+  data(){
+    return {
+      ctheme:'dark'
+    }
+  },
+  computed:{
+    ...mapState(['theme'])
+  },
+  watch: {
+    theme(val){
+      this.theme = val
+      localStorage.setItem('theme',val)
+    }
+  },
+}
+</script>
+
+<style>
+#app {
+  font-family: "微软雅黑",Arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #fff;
+}
+</style>

web/src/assets/css/public.css

+html,
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  font-size: 14px
+}
+
+.mt10 {
+  margin-top: 10px
+}
+
+.mt5 {
+  margin-top: 5px
+}
+
+.mt20 {
+  margin-top: 20px
+}
+
+.mt30 {
+  margin-top: 30px
+}
+
+.mt50 {
+  margin-top: 50px
+}
+
+.mb20 {
+  margin-bottom: 20px
+}
+
+.mb50 {
+  margin-bottom: 50px
+}
+
+.ml5 {
+  margin-left: 5px
+}
+
+.ml10 {
+  margin-left: 10px !important
+}
+
+.ml20 {
+  margin-left: 20px !important
+}
+
+.ml50 {
+  margin-left: 50px
+}
+
+.ml70 {
+  margin-left: 70px
+}
+.mr5{
+  margin-right: 5px;
+}
+.mr50 {
+  margin-right: 50px
+}
+
+.mr10 {
+  margin-right: 10px
+}
+
+.mr20 {
+  margin-right: 20px
+}
+.pl5 {
+  padding-left: 5px;
+}
+.pl10 {
+  padding-left: 10px
+}
+
+.pl20 {
+  padding-left: 20px
+}
+
+.pr10 {
+  padding-right: 10px
+}
+
+.pr20 {
+  padding-right: 20px
+}
+.fz14{
+  font-size: 14px!important;
+}
+.fz16{
+  font-size: 16px!important;
+}
+.flr{
+  float: right;
+}
+
+html,body,#app {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  /*三角箭头的颜色*/
+  scrollbar-arrow-color: #4be3f2;
+  /*滚动条滑块按钮的颜色*/
+  scrollbar-face-color: #2ad3ff;
+  /*滚动条整体颜色*/
+  scrollbar-highlight-color: #333;
+  /*滚动条阴影*/
+  scrollbar-shadow-color: #2ad3ff;
+  /*滚动条轨道颜色*/
+  scrollbar-track-color: #0f1e35;
+ }
+ /* menu */
+.el-menu{
+  background: none;
+}
+.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
+  background: none;
+
+}
+.el-menu--horizontal{
+  position: relative;
+}
+.el-menu--horizontal::after{
+  position: absolute;
+  content: '';
+  width: 0;
+  height: 0;
+  top: 0;
+  left: 60px;
+  right: 0;
+  border-width: 0 10px 10px;
+  border-style: solid;
+  border-color: transparent transparent rgb(66, 125, 243);
+}
+.el-menu-hideafter::after{
+  display: none;
+}
+.el-menu-item{
+  padding:0 20px;
+  font-size: 16px;
+}
+.el-menu--popup .el-menu-item{
+  font-size: 14px;
+}
+.menu-icon {
+  font-size: 16px!important;
+  padding: 0 8px 0 0;
+  color: #fff!important;
+}
+/* .el-menu--horizontal>.el-menu-item.is-active{
+  border-bottom: 2px solid #38455e!important;
+} */
+.el-upload-dragger{
+  width: 100%
+}
+.menu-box .el-menu--horizontal>.el-menu-item.is-active{
+
+  border-bottom-color: none!important;
+}
+
+.el-menu--horizontal>.el-menu-item.is-active{
+  border-bottom: 4px;
+  border-bottom-color:#fff!important;
+}
+
+
+.el-menu--horizontal>.el-menu-item{
+  height: 60px;
+  line-height: 60px;
+}
+.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
+}
+.el-menu--horizontal>.el-submenu .el-submenu__title{
+  float: left;
+  height: 60px;
+  line-height: 60px;
+}
+.is-active .el-submenu__title i{
+  color: #fff;
+}
+.white-theme .login-input-box .el-input__inner{
+  border: 2px solid #e1ecff;
+  border-radius: 20px;
+  background: #e0f7ff;
+  color:#0b76fb
+
+}
+.login-input-box .el-input__icon{
+  height: 25px;
+  line-height: 25px;
+  background: #a2daf4;
+  color: #fff;
+  margin: 7px 10px;
+  border-radius: 20px;
+}
+
+/* =================================================================================================================================================== */
+.tmenu .el-menu--horizontal>.el-submenu .el-submenu__title{
+   height: 60px;
+   line-height: 60px;
+   border-bottom:0px;
+}
+.el-menu.el-menu--horizontal{
+  border-bottom:0px;
+}
+.el-submenu .el-menu--horizontal{
+  top:65px!important;
+}
+.tmenu .el-menu--horizontal>.el-menu-item{
+  height: 60px;
+  line-height: 60px;
+}
+.tmenu .el-menu--horizontal>.el-menu-item.is-active{
+  background: #0c61b2;
+  color:#fff;
+}
+.tmenu .is-active{
+  background: #0c61b2;
+  color:#fff;
+}
+.tmenu .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
+  color: #fff;
+}
+.tmenu .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
+  color: #f0f0f0;
+}
+.tmenu .el-menu--horizontal>.el-submenu:focus .el-submenu__title, .el-menu--horizontal>.el-submenu:hover .el-submenu__title{
+  color: #f0f0f0;
+}
+.el-menu--horizontal>.el-menu-item{
+  width: 120px
+}
+/* elemt-ui table部分 */
+.el-table{
+  color: #666;
+}
+.el-table, .el-table__expanded-cell{
+  background: none;
+}
+.el-table th, .el-table tr{
+  background: none;
+}
+.el-table--enable-row-hover .el-table__body tr:hover>td{
+  background: none;
+}
+
+.el-table::before{
+  height: 0;
+}
+.el-table--border{
+  border-bottom: 1px solid #505151;
+}
+.el-table--border, .el-table--group{
+  border: 1px solid #505151
+}
+.el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
+  border-right: 0;
+}
+.el-table--border::after, .el-table--group::after, .el-table::before{
+  background: none;
+}
+.el-table .el-table__row:nth-child(odd){
+  background: #fff
+}
+.el-table .el-table__row:nth-child(even){
+  background: #efefef
+}
+.table-btn{
+  padding: 5px 10px;
+  display: inline-block;
+  cursor: pointer;
+  color:  #2e8fff;
+}
+.table-btn:active{
+  background: rgba(0,0,0,.1);
+}
+.el-table td, .el-table th{
+  padding: 0;
+  height: 40px;
+}
+.el-table__body{}
+.el-table__footer, .el-table__header{
+  background: #3989fc
+}
+.el-table thead{
+  color: #fff
+}
+/* 分页 */
+.el-pagination__editor.el-input .el-input__inner{
+  color: #3989fc!important;
+}
+.el-pagination .btn-next, .el-pagination .btn-prev{
+  background:  #066994;
+}
+.el-pagination button:disabled{
+  background:  #066994;
+}
+.el-pager li{
+  background:  #066994;
+  border: 1px solid #474f59;
+  margin:0 1px;
+}
+
+.el-input.is-active .el-input__inner, .el-input__inner:focus{
+  border-color: #474f59;
+}
+/* button */
+.el-button{
+  border-radius: 0;
+}
+.tmenu .sub-menu .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
+  color:  rgba(255,255,255,.7);
+}
+.white-theme .el-menu--horizontal>.el-submenu:hover .el-submenu__title, .white-theme .tmenu .el-menu--horizontal>.el-submenu:focus .el-submenu__title{
+  color: rgba(255,255,255,.7)
+}
+/*  */
+.el-sel{
+  width: 100%!important;
+}
+/* checkbox */
+.sysuser .el-checkbox{
+  color: #999!important
+}
+
+.el-tree-node__content:hover{
+  background: rgba(105, 101, 101,.3)
+}
+.el-tree-node:focus>.el-tree-node__content{
+  background:  rgba(105, 101, 101,.6)
+}
+
+/* tag */
+/* tag */
+.header-box .el-tag--success{
+  background: #fff!important;
+  color: #34495e;
+}
+.header-box .el-tag--success .el-tag__close{
+  color: #34495e;
+}
+.el-tag{
+  color: #fff;
+  border-radius: 0;
+  background: rgba(255,255,255,.2);
+  border-radius:5px;
+  height: 25px;
+  line-height: 25px;
+}
+.el-tag .el-icon-close{
+  color: #ccc
+}
+/* selecttree */
+.vue-treeselect__control{
+  border-radius: 0!important;
+  background: none!important;
+  border-color: #474f59!important;
+  font-size: 14px;
+}
+.vue-treeselect__control:hover{
+  border-color: #C0C4CC!important;
+}
+.vue-treeselect__menu-container{
+  color: #999!important;
+}
+.search-box{
+  width: 99%;
+  margin: 0 auto;
+  border:1px solid #505151;
+  overflow: hidden;
+  padding: 10px 0 10px 10px
+}
+.search-box .label{
+  line-height: 35px;
+  font-size: 14px;
+}
+.search-item{
+  margin-bottom: 10px
+}
+.table-box{
+  margin-top:10px;
+  padding: 5px;
+}
+.view-box{
+  margin-top: 110px!important
+}
+
+.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{
+  display: none;
+}
+.el-submenu [class^=el-icon-]{
+  margin-right: 0;
+}
+
+/**----------------------------------------------------------------------------------------*/
+
+/*popover全局样式*/
+.el-popover{
+  background: #f1f6ff  !important;
+  border: 1px solid #f1f6ff;
+}
+.el-tree-node__content{
+  color: #666 !important;
+}
+/* div[data-v-5081743a] .el-transfer .el-checkbox__inner{
+  margin-left:-74px !important;;
+} */
+.el-main .el-transfer-panel__list,.el-main .el-transfer-panel__body{
+  background-color: #0F1E35;
+}
+
+
+div[data-v-5081743a] .el-transfer .el-checkbox__label{
+  color:#a7b8bd;
+}
+.el-transfer-panel__header .el-checkbox__label{
+  color:#222 !important;
+}
+
+
+
+
+/* .el-tree-node:focus > .el-tree-node__content {
+  background-color: rgb(85, 80, 80) !important;
+} */
+/*-------------------------------------------*/
+.div_content_ty{
+  width: 98%;
+  margin: auto;
+}
+
+/* .content_div_main{
+  margin-left: 15px;
+  margin-right: 15px;
+} */
+.el-range-input{
+  background: #f8f8f8;
+}
+
+/* div[data-v-4ab5ed42] .el-input__inner,div[data-v-0a498488] .el-input__inner,div[data-v-8ef31826] .el-input__inner,div[data-v-012f608b] .el-input__inner {
+  color:#fff !important;
+}
+div[data-v-4ab5ed42] .el-col-6,div[data-v-0a498488] .el-col-6,div[data-v-012f608b] .el-col-6{
+  color:#fff !important;
+  font-size: 105%;
+}
+
+div[data-v-4ab5ed42] .el-col-16,div[data-v-0a498488] .el-col-16,div[data-v-012f608b] .el-col-16{
+  color:#fff !important;
+  font-size: 105%;
+} */
+
+.el-dialog__body .el-input__inner,.el-dialog__body .el-col-16,.el-dialog__body .el-col-6{
+  color:#606266 !important;
+  font-size: 105% !important;
+}
+
+
+.el-dialog__footer{
+  padding: 10px 10px 10px;
+}
+
+
+
+/* .img_box_w{
+  border: #07406f solid 1px;
+}
+.img_box_w .img-container img{
+   max-height:calc(100vh - 513px);
+}
+.right_img .img-container img{
+  max-height:calc(100vh - 390px);
+} */
+/** 设备采集异常界面，列表异常显示不同颜色 **/
+.device_cj_error .el-table .warning-row{
+  background:rgb(175, 83, 55) !important;
+}
+/*** data-v-0a498488  ***/
+
+
+.fy_number_class .el-input__inner{
+  height: 28px;
+  line-height: 28px;
+}
+
+/** end  */
+
+
+/** dark-theme **/
+.dark-theme{
+  background: rgb(15, 30, 53);
+}
+.dark-theme .menu-box .el-menu--horizontal>.el-menu-item.is-active{
+  background: #009688!important;
+}
+.dark-theme  .el-main .el-transfer-panel__list, .el-main .el-transfer-panel__body{
+  background: #0F1E35;
+}
+.dark-theme .el-main .el-transfer-panel,.dark-theme  .el-main .el-transfer-panel__header,.dark-theme  .el-main .el-transfer__button{
+  background-color: #0F1E35;
+}
+.dark-theme .el-tree{
+  background: #0F1E35 !important;
+}
+.dark-theme .meun-box{
+  background-color: #0f1e35;
+  color: rgba(255,255,255,.7);
+}
+.dark-theme .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
+  color: #fff;
+  background: #009688!important;
+}
+.dark-theme .el-menu--horizontal .el-menu--popup, .dark-theme .el-menu--horizontal .el-menu--popup .el-menu-item{
+  background: #38455e!important
+}
+.dark-theme .el-table thead{
+  background-color:#2C2C4B;
+  color: #fff;
+  font-weight: 500;
+  border:1px solid #153B5D;
+  text-align:center;
+}
+.dark-theme .el-table td,.dark-theme .el-table th.is-leaf{
+  border:1px solid #07406f
+}
+.dark-theme .table_m_type{
+  margin-top: 8px;
+  border: 1px solid #0f1e20;
+}
+.dark-theme  .el-pager li{
+  border: 1px solid #c8daf1;
+  background: none;
+}
+.dark-theme .el-pagination .btn-next, .el-pagination .btn-prev{
+  border: 1px solid #c8daf1;
+  background: none;
+}
+.dark-theme .el-picker-panel__body .el-input__inner{
+  color:#1F8638!important;
+  font-weight: bold;
+}
+.dark-theme .el-input__inner{
+  border-radius: 2px;
+  color: #fff !important;
+  background: none;
+  border-color: #8a99aa;
+}
+.dark-theme .right_img{
+  border:1px solid #2c485a
+}
+.dark-theme .pass_content_left{
+  border: 1px solid #2C485A;
+}
+
+.dark-submenu {
+  background: #38455e!important;
+  color:#ccc
+}
+.dark-theme .el-dialog__body{
+  background-color:#0F1E35;
+}
+.dark-theme .el-dialog__header{
+  background-color:#D6D6DE;
+
+}
+.dark-theme .el-dialog__footer{
+  background-color:#0F1E35;
+}
+.is-active .dark-submenu {
+  color: #d5d7dd!important;
+}
+.el-menu--horizontal .el-menu .el-menu-item.is-active.dark-submenu{
+  color: #d5d7dd!important;
+}
+.el-menu--horizontal .el-menu .el-submenu.is-active.dark-submenu>.el-submenu__title{
+  color: #009688
+}
+.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
+  color: #fff
+}
+.el-menu--popup{
+  background: #4579f0!important;
+}
+.el-menu--horizontal .el-menu .el-menu-item {
+  background: none;
+}
+.el-menu--horizontal .el-menu .el-menu-item.is-active, .el-menu--horizontal .el-menu .el-submenu.is-active>.el-submenu__title{
+  background: rgba(255,255,255,.18)!important;
+  color: #fff;
+}
+
+/* dark-them-end */
+.white-theme {
+  background: #efefef
+}
+.white-theme  .layout-box{
+  background: url('../img/headernav.png')
+}
+.white-theme .menu-box .el-menu{
+  background: rgba(64, 158, 255,0);
+}
+.white-theme .el-menu--horizontal>.el-submenu .el-submenu__title{
+  padding:0 30px;
+  color: #fff;
+  font-size:16px;
+}
+.white-theme  .el-menu--horizontal>.el-menu-item{
+  color: #fff
+}
+.white-theme .tmenu .sub-menu .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,.white-theme .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
+  color: #fff
+}
+.white-theme .el-main .el-transfer-panel__list,.white-theme .el-main .el-transfer-panel__body{
+  background: #fff;
+}
+.white-theme .el-main .el-transfer-panel, .el-main .el-transfer-panel__header, .el-main .el-transfer__button{
+
+}
+.white-theme .menu-box{
+  color: #333
+}
+.white-theme .el-submenu__title i{
+  color:#c9ccd2
+}
+.white-theme .tmenu .el-menu--horizontal>.el-submenu:focus .el-submenu__title, .el-menu--horizontal>.el-submenu:hover .el-submenu__title{
+  color: #ccc
+}
+
+.white-theme .el-menu--horizontal>.el-menu-item.is-active{
+  color: #fff
+}
+.white-theme .menu-box .el-menu--horizontal>.el-menu-item.is-active,.white-theme .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
+  color: #fff;
+  background: rgba(255,255,255,.18)!important;
+  border-bottom: 3px solid #fff;
+  font-size: 16px;
+}
+
+.white-theme  .table_m_type{
+  margin-top: 8px;
+  width: 99%;
+  margin: 0 auto;
+  border-radius: 5px;
+  overflow: hidden;
+  border: 1px solid #EBEEF5
+}
+.white-theme .el-pager li{
+  border: 1px solid #c8daf1;
+  background: none;
+}
+.white-theme .el-pagination .btn-next, .el-pagination .btn-prev{
+  border: 1px solid #c8daf1;
+  background: none;
+}
+/* input */
+.white-theme .el-input__inner{
+  border-radius: 3px;
+  background: none;
+  border-color: #c8cbce;
+  background: #f8f8f8;
+}
+.white-theme .el-picker-panel__body .el-input__inner{
+  color:#333!important;
+  font-weight: bold;
+}
+.white-theme .content_div_main{
+  background: #fff;
+  border-radius: 5px;
+}
+.white-theme .el-dropdown{
+  color: #fff;
+}
+.white-theme .el-table--enable-row-hover .el-table__body tr:hover{
+
+}
+.white-theme .el-form-item__label{
+  color: #666;
+}
+.white-theme .role-tree .el-tree-node__content {
+  color: #666!important;
+}
+.template-box{
+  width: 96vw;
+  margin: 0 auto;
+  height:calc(100vh - 120px);
+  overflow: auto;
+}
+.search-form{
+  margin: 20px 0 0 20px;
+  overflow: hidden;
+}
+.search-table{
+  margin-top: 20px;
+}
+
+.no-data-box{
+  margin: 0 auto;
+  width: 150px;
+  text-align: center;
+}
+.no-data-box img{
+  height: 100%;
+  width: 100%;
+}
+.el-table__empty-text{
+  line-height: 0
+}
+.el-button:focus, .el-button:hover {
+
+}
+.ms_info_r .el-input__inner{
+  height: 35px;
+  line-height: 35px;
+}
+.public-title {
+  width: 11vw;
+  height :3.4vh;
+  background: url('../../assets/img/title-bg01.png') no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+.public-title .title {
+  display: inline-block;
+  padding: .5vh 0 0 1vw
+}
+.el-aside{
+  color: #fff!important;
+}
+.search-input .el-input__inner{
+  height:35px;
+  line-height: 35px;
+}
+.bg-blue{
+}
+.search-btn{
+  height:34px;
+  line-height: 5px;
+  border-radius: 4px;
+  color: #fff;
+  text-align: center;
+  background: #3989fc;
+  padding: 0 25px;
+  border-color:#3989fc;
+}
+.search-btn:focus, .search-btn:hover{
+  background: #66b1ff;
+  border-color: #66b1ff;
+  color: #FFF;
+}
+.search-btn.is-disabled,.search-btn.is-disabled:focus,.search-btn.is-disabled:hover{
+  background:rgba(64, 158, 255,.7);
+  color:#fff;
+}
+.success-btn{
+  padding: 0 25px;
+  height:34px;
+  line-height: 5px;
+  border-radius: 4px;
+  color: #fff;
+  text-align: center;
+  background:#5dd8a2;
+  border-color:#5dd8a2;
+}
+.success-btn:focus, .success-btn:hover{
+  background: #5dd8a3d2;
+  border-color: #5dd8a2;
+  color: #FFF;
+}
+.success-btn.is-disabled,.success-btn.is-disabled:focus,.success-btn.is-disabled:hover{
+  background:rgba(93, 216, 162,.6);
+  color:#fff;
+}
+.def-btn{
+  padding: 0 25px;
+  height:34px;
+  line-height: 5px;
+  border-radius: 4px;
+  color: #fff;
+  text-align: center;
+  background:#aaaaaa;
+  border-color:#aaa;
+}
+.def-btn.is-disabled,.def-btn.is-disabled:focus,.def-btn.is-disabled:hover{
+  background:rgba(170, 170, 170,.6);
+  color:#fff;
+}
+.denger-btn{
+  padding: 0 25px;
+  height:34px;
+  line-height: 5px;
+  border-radius: 4px;
+  color: #fff;
+  text-align: center;
+  background:#f85959;
+  border-color:#f85959;
+}
+.denger-btn:focus, .denger-btn:hover{
+  background:#fd9393;
+  border-color:#fd9393;
+  color: #FFF;
+}
+.denger-btn.is-disabled,.denger-btn.is-disabled:focus,.denger-btn.is-disabled:hover{
+  background:rgba(248, 89, 89,.5);
+  color:#fff;
+}
+.content_div_main .el-transfer-panel{
+  width: 10.6vw;
+  height:43vh
+}
+.content_div_main .el-transfer__buttons{
+  padding:0 1vw
+}
+.content_div_main .el-transfer__button.is-disabled, .el-transfer__button.is-disabled:hover {
+  color: #70aafd;
+}
+.content_div_main .el-transfer__button i, .el-transfer__button span{
+  font-size: 20px
+}
+.timerbox .el-date-editor .el-range__icon{
+  color: #5fd9a3;
+  font-size: 20px;
+}
+/* -------------------------------- */
+.zf-btn,.playvideo,.shepai,.su-btn {
+  width: 100px;
+  background: #ff7c93!important;
+  border-color: transparent;
+  color: #fff!important;
+  border-radius: 5px;
+}
+.su-btn{
+  background: #1d72ff!important;
+  margin-right :20px!important;
+}
+.playvideo{
+  background :#5dd8a2!important;
+}
+.shepai{
+  background :#ffbe30!important;
+}
+.report-select .el-select{
+  width: 100px;
+  height:30px;
+  line-height: 30px;
+}
+.report-select .el-input__inner,.report-select .el-input__icon{
+  height: 30px;
+  line-height: 30px;
+}
+
+
+.ol-zoom .ol-zoom-out,.ol-zoom .ol-zoom-in{
+  position: absolute;
+  right: -92vw;
+}
+.ol-zoom .ol-zoom-in{
+  top: 76vh;
+}
+.ol-zoom .ol-zoom-out{
+  top: 80vh
+}
+.ol-control button{
+  background:#3989fc!important
+}
+.add-dialog .el-select{
+  width: 100%;
+}
+.add-dialog .el-date-editor.el-input, .el-date-editor.el-input__inner{
+  width: 100%;
+}
+.el-upload{
+  text-align: center;
+  height: 100%;
+}
+.el-upload img{
+  width: 100%;
+}
+.orgbox .el-select{
+  width: 100%;
+}
+/* 滚动条设置 */
+ /* 设置滚动条的样式 */
+ ::-webkit-scrollbar {
+  width:8px;
+  height: 20px;
+  background-color: #f0f0f0;
+  }
+
+  /* 滚动槽 */
+  ::-webkit-scrollbar-track {
+  border-radius:10px;
+  }
+
+  /* 滚动条滑块 */
+  ::-webkit-scrollbar-thumb {
+  border-radius:10px;
+  background:#ccc;
+  }

web/src/assets/download (2)/font_1423038_rj7lis4ljwn/demo.css

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

web/src/assets/download (2)/font_1423038_rj7lis4ljwn/demo_index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1423038" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">球机</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">待处理</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">关 闭</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">首页</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">监管</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe605;</span>
+                <div class="name">汽车</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">退出</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe607;</span>
+                <div class="name">审核</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">已处理 </div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">运行</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">系统</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60b;</span>
+                <div class="name">执法 (1)</div>
+                <div class="code-name">&amp;#xe60b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">查询</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">执法</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shipin1"></span>
+            <div class="name">
+              球机
+            </div>
+            <div class="code-name">.icon-shipin1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daichuli"></span>
+            <div class="name">
+              待处理
+            </div>
+            <div class="code-name">.icon-daichuli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guanbi"></span>
+            <div class="name">
+              关 闭
+            </div>
+            <div class="code-name">.icon-guanbi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shouye"></span>
+            <div class="name">
+              首页
+            </div>
+            <div class="code-name">.icon-shouye
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jianguan"></span>
+            <div class="name">
+              监管
+            </div>
+            <div class="code-name">.icon-jianguan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qiche"></span>
+            <div class="name">
+              汽车
+            </div>
+            <div class="code-name">.icon-qiche
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tuichu"></span>
+            <div class="name">
+              退出
+            </div>
+            <div class="code-name">.icon-tuichu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenhe"></span>
+            <div class="name">
+              审核
+            </div>
+            <div class="code-name">.icon-shenhe
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yichuli"></span>
+            <div class="name">
+              已处理 
+            </div>
+            <div class="code-name">.icon-yichuli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yunhang"></span>
+            <div class="name">
+              运行
+            </div>
+            <div class="code-name">.icon-yunhang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xitong"></span>
+            <div class="name">
+              系统
+            </div>
+            <div class="code-name">.icon-xitong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhifa"></span>
+            <div class="name">
+              执法 (1)
+            </div>
+            <div class="code-name">.icon-zhifa
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chaxun"></span>
+            <div class="name">
+              查询
+            </div>
+            <div class="code-name">.icon-chaxun
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhifa1"></span>
+            <div class="name">
+              执法
+            </div>
+            <div class="code-name">.icon-zhifa1
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shipin1"></use>
+                </svg>
+                <div class="name">球机</div>
+                <div class="code-name">#icon-shipin1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daichuli"></use>
+                </svg>
+                <div class="name">待处理</div>
+                <div class="code-name">#icon-daichuli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guanbi"></use>
+                </svg>
+                <div class="name">关 闭</div>
+                <div class="code-name">#icon-guanbi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shouye"></use>
+                </svg>
+                <div class="name">首页</div>
+                <div class="code-name">#icon-shouye</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jianguan"></use>
+                </svg>
+                <div class="name">监管</div>
+                <div class="code-name">#icon-jianguan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qiche"></use>
+                </svg>
+                <div class="name">汽车</div>
+                <div class="code-name">#icon-qiche</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tuichu"></use>
+                </svg>
+                <div class="name">退出</div>
+                <div class="code-name">#icon-tuichu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenhe"></use>
+                </svg>
+                <div class="name">审核</div>
+                <div class="code-name">#icon-shenhe</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yichuli"></use>
+                </svg>
+                <div class="name">已处理 </div>
+                <div class="code-name">#icon-yichuli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yunhang"></use>
+                </svg>
+                <div class="name">运行</div>
+                <div class="code-name">#icon-yunhang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xitong"></use>
+                </svg>
+                <div class="name">系统</div>
+                <div class="code-name">#icon-xitong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhifa"></use>
+                </svg>
+                <div class="name">执法 (1)</div>
+                <div class="code-name">#icon-zhifa</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chaxun"></use>
+                </svg>
+                <div class="name">查询</div>
+                <div class="code-name">#icon-chaxun</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhifa1"></use>
+                </svg>
+                <div class="name">执法</div>
+                <div class="code-name">#icon-zhifa1</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

web/src/assets/download (2)/font_1423038_rj7lis4ljwn/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1568799704253'); /* IE9 */
+  src: url('iconfont.eot?t=1568799704253#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAA4EAAsAAAAAF6AAAA23AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEJgqgLJlbATYCJAM8CyAABCAFhG0HgSobZRMzo8LGAUAovoXsvzywyVD3oL5CyxBDyc1r/7zJCYBvu7fWPJu/nCGXA/SWZ/wIB5YRWiJ1qaVfiP+4OhkmOD8HT/9rvzvP1mYFcWka6j+dqCVKI+Gp00iFPCWyPPBc7t9sEgaSj4ln0R4cbpOIAiyQXtPTtv7tLlFLlAFIW7XaGHUoRmIUWHBVuFzjlXCVhePxozz84lXl/+VM5xvS9o9keE8aFQkEBeTQzFVzFRgStnclK0CLMZxCLLi2/NywRFsi2mEKhJitjpO9y5bWNWSFiaq8JWv7w0/PcQFyI/AQunqAoIDo1VzafGE8oMMtOPIml8ckD7nPFx65lCK6CtWpkRUqSYlYOFKVrl5WCF8L8ez9pKBSNMBbQ0BpXkVQ++hlKALGCNqtaTZAKfCCIUXkxqRYMp6RN6I8fHFu8Bp9v/wcBzk4MYJta3BXH0s3VvvHnrv2U3lanBVoLwce7EKAbJX2B5CE3o3YUmUnODczAd2s7nuMQLmxFISOF8TRv3iZXKFUUbUGksJYRfJPXQNDAgIDHAzwMCDAgAgDEgzIYEAOAwoYUMKACgYoDKhhPM0osV1iHgaA2J+B9KRhuImiUcZxOgcdAra6TJikalrWMi+GA1uTTorq0Hqt62C8GJOzUrUV3GzjzzE52mhWQoyjGooipzNUHVtC3Vf9PqAdoQyrM6qOFdPl5GSjGqze0tTM7F2V/O/k8Sbdk12kk7mV2uvnx5EgNdU8TPQyq0hmulNiWvZ57x1KVKCElhEUghUVsILxVRn7QAHVnBtljXCmr0X73Z7xIbHzmskdhAJC/8BV8Xa+7cpvXPZxIEKpf+S33g06xiehz5pqH3pLA/ZxYA0CUVFqdv6h4s6yYA2Uw1D6JOS+7lNVGmGI99hepXm7LKAgQkP1fYKSr93B2dVuckW9H59VaUX4s+dpJd+ndRka5SBgtY9m8/E+FiaT4o6Z7Ko41r1NV0apves475fnxNmtFAYdBqIbbuuF+m2d8JbXw6Xju+0NuV1L7UJz/t5o27mkFV9G+Op4hlI5l6wF8Hd4rEFa5XVNJ2fDmh2/ry2eqO/x86xGA7oDq66WRVrRUh5hfg4GTlEc/se7f20GXRDNH5AHH8kJiMHAjaKvxt1re+fFp2089UT9FPTEWi86c0k7vmx0CW+4U52u4YQy5prpOVPMDkQyo1t+u9XDS2tTA3EwRHj0Xv7tMi2Ul6Gh4euQccnb4PT+nnZRDc6WVRynjLl48qwaKAvYE/5ZhJIT3fw1QIJleuKJEsoIB6MpqYghrRcnS3HX8XMrq0/cpoISTEFVJJSqQGdOnFfCshjg+5SgLQnungMdVZ5J2i6A+FCV/HKlJyxY6TQ/MLz46BLS25fT4HNT8o3A1Uw76Gmax3cPG+FOP2xnaeNPu7CyPntMJehu2kzrYSIGDEHdl5dUxY7xwbf48NbG7Ph8aEKjvHZyR3PmKj0mGbrag4vhTDsgmYSnmYrrcZ+qc4xZlu/LiPP7vgiVoQg+SCMvGqorRDcr585OZEVxgcjfRJfhwbif0frAMCABkT+OQJAZGmO5Gh5NNwGLq/emh4EAgQ2oWifFM8cgQqWu+zR/+4jsuyA0jFCHA34fJbrCq2kR2R6e6sbarGvM7GlzRbsp5FfpOifKgmH6pIc43+iao677TCPJdHrwHtGZya4r2o7igeTQHYXMHrx6nN9yUjal7sXrU9ye3hvtvzXlmQNXjbIbT/DWYqkCYuwOzyRKb8hHlJremaClNJIPTGw4m2GH2adcqe6myokYX45l84fwTJpCvHAZlbuvsaLG830buVePb6HrbTzH+c7bdRtbtlxSkHKUCpU+91Bx7wIOSquRXS2La5pR1VJfKafVSzyWCZRXY631hhc6tVJ0QnXvCDlUvIjHuhom78ZmSlVd2Ed295wN+eN7Bu2xjcp7DMufTjr27FhM5IgPlyKsOXn7xWkk52ikOXfqgmoN/jocyMqYUL5D4kXYuEopJicSo+nHOqHv40GRpwRJe3QZnZ4A4D0Hj80tINDKIOzsRfqkeiAqfAkK8Xqk96rWI+cvIGu99uZ1GkdKMpoDWX8+2zDIBDscsBk2BbSphTIEEmuvxf3eYC0D4+hD0lmjrJjQNVIrHVrBKEeDO4obWc2K8A6XpHqngdP7ViYVJa38ERHyb3pR+r9fhOGP/r72VvdWI2eHz944e1P4poQRtRBuhWu5F8drIUrEN2r1zcNPZJ/4JT8bV3ztWRTRuu7Oq3q8tx/wupOSc+mSnuVk6S9ddCy7R1zLHJdy/e1dzPtZ5xyQ2tEwMvvymcb16T27mBX3L1cwsx9cxmd47z/g//i/b6O4zaSVrJXkZnZa5jc4kPIsM41duQdo1LfxGOyJxrpLSHYjzWgnlXRjffeFL0k68WXJV3xJ1EkvhQ8LbU7KK8qQep46jC5jt+385+OM6arjG2LUBmu68sCBLGVF9JTYmAVZFemqAHeJooDE1XNoAS+byETaqBcB/GSNRgqROupmAB0Ulj5SXcj9x6M36hChqNUb+id7uaDKGw71QecSOgT33Qa+VlDsvi9IWnCrYQSNX/Q2e0ES4YO7WKAVGNwPBB2EMM7/0NdpcvrilKxo32hN5uLMIyuVQyo5Jo7lXWUXcwtBpUYWyGnn6DlmVmExN4f9Tq4j+msVBCVBrSX0su6tHLNrbIpelnI7R4TFYyIOwyP3MKbY2DzZNSVJ5obPh92yJM5wxXBOEvsGdD50g93aTzUd1cyMt/cc6pHhsj09B50nzpIzHk+X3MEOZe3xnYXo7STQJC5lN8+2CfycMpUcTmPs3Bc8iNCsqlOWxUC7L2S7QVlsvaJZNYiwYB+6I4JGwXaXR2lEm5RmmmwsOof11EjmHPNp0sSCmGlNSiVpuAPwPX/QVV7j0JUGM3zDFBs/PWnnmOEWSRx/d1h82F5unAgfFh+3Go/Fd8dYYi27Q/G4zLMbWOJa+wCsaYraEjmxl3hxSbIm2cVSexkErV2jMdRYAzWB6Dwt+YjmSDLu5ycEGhRH8/x8WkPztjFcEo3L5dFIluT6aTy5Mbf0MHF+h6np1/RcyGCA0FRrMOYCLWiJQ1oo12DQ5rTCM2fC0LUBAWXZUBvUejaCuHZ+u3V8Rqop0gTMPHNFSedv7+lnzTYjIHWzraq/rNQvXIIz7J816BkvKorn41GIFZ6ngxz9r5ShYRL9Sn10t/wFqGK7oeqnrE8X3MDfBkzsStng2//RP22TtzbeKfKxoFmhT0nx7Xlh9jX6GV1cJ1V0uzBihXiZYrPXDvYOL4lDmJW8eFxicTfVyXOCrwcywNDMOKtgcp1hks/4SO0gkAmqx+DVjQe0IaoSZnlfOadUFj6AnlxQ7FoIE6KghabUXdlqHwoxAQpXY5nZChRBSE+43Lhg33G+VoQw4DFXnpENq1N5MMshQjByP/4q5S5zyiIoMh0mZkRu1YFb07Vjb+ctzVi8GWw0p+2CYUwQRBIkhqvgjGw5V87LjObr5iU1LmBAhTySiCCoYn53ogrnBiEIOYgbc8qctimdiGzcWusZq51+i+i2suWwLJ1g33j7xZBlOvEWPXt4Xc1pPqOIz8E7XVPPHl6xVSdeXhxsEJMtzxNvbmOPGFrTx9Pto69mKHtE25Y80bLiEJCoaK6868PBOJS7lQvCQ/k2plrmG0GSpCzaYrJ0oVmgLQgyzk+zdL3pHDCdlru12d90pVnml0DrIVbGbPjdAtj3LsfN9LDBt32ESZ3Xnr0mJ+/9KKpcaku3DkfchQGpva8/7ntYWt/E+A7tYfJK1gpyJ8XOclAOaTvIKx5RkQ6UvJIZHhTtoDhYdhAGTYNWXag1RRzmBRG2YdUGjAZoMaJpFe54UlCaudLTFLE9thMzPQ74GgpR15hljUVO1LewcONGWetLK4rmCUvCGopWLCJQH2YCZyZfX0YXSPy9/ch6htv11tPFWH/UdQi9MEdErUcskzhb1jNj2G9Z2az1yXVzoR+eIuqMf4AA8J2ddTvqNcb6Dk0qsYkwGpcUQOLSsA22DZiISwwgckUY0UFzUm3UhiWf0hAuJAZkB8T5+14w5Tlggl/LWJEqEtzzDSIB8CIU2F6M7vUDqSPpXjsR7NfPfsoIiA2xKdGRDvBcyNtkO9KYZmuy3aYP9d2WIWlf21MBiu5Zj4Gl+UCh/5KHruwQXyY+Qv9usS2fgZzTOQRf0jjCfeK9dqRhljYeDC+R89j/iip9Jrf+XVGfW3RzWn9UWNSBkruhJ/ew7+oMY86q/wWGsQyczBx4uVVFSN6FqHIKSe4KSjua3SsjjiBkg4NsuwBE5wVO4xe8zlsRkj8QjftD0gUeSnv/Bac1Hp0DOlwjKsEO2ieQ9mxEtRzi9l9o86hiXhPl/mFMFIK6qMoNn8gYFzFPutlGxICJfoIPb3s4jh5C9D1qKZxIuJSlUc1baD/NDq4ipEhQugNaz8pE85gZXxwqX/8FWdlIiYZhh5X/oCihiYNaoXJQfLLsNOymdE1urIaQ1QDZN/Im4IOsaORxDwT1ZD2kiYKbIRpclDSacWWL1Rum853l7BuRLd4GTrwEiZIkk1yK98u9q9TSSCud7clRIK53nSLt8kgbmxW3oVxyPj9x15PiCl7/63y4keyAhhyysGyf9tHtM7OziWweJD5cZP1yZNRGO/XIvMnZ6tkM') format('woff2'),
+  url('iconfont.woff?t=1568799704253') format('woff'),
+  url('iconfont.ttf?t=1568799704253') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1568799704253#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-shipin1:before {
+  content: "\e600";
+}
+
+.icon-daichuli:before {
+  content: "\e601";
+}
+
+.icon-guanbi:before {
+  content: "\e602";
+}
+
+.icon-shouye:before {
+  content: "\e603";
+}
+
+.icon-jianguan:before {
+  content: "\e604";
+}
+
+.icon-qiche:before {
+  content: "\e605";
+}
+
+.icon-tuichu:before {
+  content: "\e606";
+}
+
+.icon-shenhe:before {
+  content: "\e607";
+}
+
+.icon-yichuli:before {
+  content: "\e608";
+}
+
+.icon-yunhang:before {
+  content: "\e609";
+}
+
+.icon-xitong:before {
+  content: "\e60a";
+}
+
+.icon-zhifa:before {
+  content: "\e60b";
+}
+
+.icon-chaxun:before {
+  content: "\e60c";
+}
+
+.icon-zhifa1:before {
+  content: "\e60d";
+}
+

web/src/assets/download (2)/font_1423038_rj7lis4ljwn/iconfont.js

+!function(o){var a,c='<svg><symbol id="icon-shipin1" viewBox="0 0 1024 1024"><path d="M510.414861 41.213622c-208.354939 0-377.263158 169.284425-377.263158 378.104339C133.151703 628.146328 510.414861 1001.80805 510.414861 1001.80805S887.678019 628.146328 887.678019 419.317961c0-208.819913-168.908219-378.104338-377.263158-378.104339z m0 621.374613C375.593478 662.588235 266.303406 553.298163 266.303406 418.47678s109.290072-244.111455 244.111455-244.111455S754.526316 283.655397 754.526316 418.47678s-109.290072 244.111455-244.111455 244.111455z" fill="#f4ea2a" ></path><path d="M523.383414 284.183777l-2.079703-47.520363-47.820483-2.062795v51.65018S355.662993 295.892673 348.73065 445.335381h320.198143c-10.394287-158.395575-145.545379-161.151604-145.545379-161.151604z m-14.553693 188.010204H396.551133s-6.932343 121.8951 112.278588 130.15896c117.820235-8.952867 112.278588-130.15896 112.278589-130.15896h-112.278589z m-1.039851 88.839662c-18.945585 0-34.306642-12.486671-34.306642-27.889998 0-15.407554 15.361057-27.894225 34.306642-27.894225s34.306642 12.486671 34.306642 27.894225c0 15.403327-15.361057 27.889998-34.306642 27.889998z" fill="#f4ea2a" ></path></symbol><symbol id="icon-daichuli" viewBox="0 0 1024 1024"><path d="M191.6 209.3h153.2v57.4h334.4v-57.4h153.2v252.5h46.4v-299H679.2V99.5H344.8v63.3H145.1v761.6h277.6V878H191.6V209.3zM391.3 146h241.5v74.3H391.3V146zM303 524.8h139.3v46.4H303v-46.4z m418-93.5H303v-46.4h418v46.4z m-57 65.9c-118 0-213.6 95.7-213.6 213.6 0 118 95.7 213.6 213.6 213.6 118 0 213.6-95.7 213.6-213.6 0.1-117.9-95.6-213.6-213.6-213.6z m118.3 331.9C750.7 860.7 708.7 878 664 878s-86.7-17.4-118.2-48.9c-31.6-31.6-48.9-73.6-48.9-118.2 0-44.7 17.4-86.6 48.9-118.2 23.1-23.1 51.7-38.5 82.9-45.2v201.4h146.7v-46.4H675.2V544c40.5 2.6 78.1 19.7 107.1 48.6 31.6 31.6 48.9 73.6 48.9 118.2 0 44.7-17.4 86.7-48.9 118.3z m0 0"  ></path></symbol><symbol id="icon-guanbi" viewBox="0 0 1024 1024"><path d="M753.402 759.757a19.594 19.594 0 0 1-13.85-5.744L267.747 282.208a19.553 19.553 0 1 1 27.7-27.7l471.846 471.845a19.635 19.635 0 0 1-13.891 33.404"  ></path><path d="M281.597 759.757a19.553 19.553 0 0 1-13.85-33.445l471.845-471.805a19.594 19.594 0 0 1 27.66 27.7L295.447 754.014a19.553 19.553 0 0 1-13.85 5.744"  ></path></symbol><symbol id="icon-shouye" viewBox="0 0 1024 1024"><path d="M999.576 546.508a17.934 17.934 0 0 1-12.552-5.102L513.876 80.876l-473.15 460.53c-7.122 6.936-18.518 6.78-25.454-0.344s-6.78-18.52 0.344-25.454L501.32 42.858a18 18 0 0 1 25.11 0l485.704 472.752a18 18 0 0 1-12.558 30.898z"  ></path><path d="M729.744 978.246H298.006c-51.794 0-80.252-5.5-98.228-18.982-21.584-16.188-23.39-40.384-23.39-63.782V541.458c0-9.942 8.058-18 18-18s18 8.058 18 18v354.026c0 21.376 2.184 29.876 8.99 34.982 10.57 7.928 35.634 11.782 76.626 11.782h431.738c40.992 0 66.056-3.854 76.626-11.782 6.806-5.104 8.99-13.606 8.99-34.982V541.458c0-9.942 8.058-18 18-18s18 8.058 18 18v354.026c0 23.396-1.806 47.594-23.388 63.782-17.974 13.48-46.432 18.98-98.226 18.98z"  ></path></symbol><symbol id="icon-jianguan" viewBox="0 0 1024 1024"><path d="M172.503 946.611v-51.087H362.78v-79.106c0-8.84 7.193-16.033 16.03-16.033h266.38c8.846 0 16.039 7.193 16.039 16.033v79.106H851.48v51.087H172.503z m-41.048-228.313c-29.825 0-54.085-24.259-54.085-54.085V131.457c0-29.815 24.264-54.07 54.085-54.07h761.094c29.82 0 54.08 24.254 54.08 54.07v532.756c0 29.825-24.26 54.085-54.08 54.085H131.455z m19.03-589.854c-12.14 0-22.012 9.88-22.012 22.019v494.689c0 12.14 9.873 22.012 22.012 22.012H873.52c12.14 0 22.017-9.873 22.017-22.012V150.464c0-12.14-9.878-22.019-22.017-22.019H150.485z m0 0"  ></path><path d="M513.294 505.826c-51.49 0-97.627-31.92-127.26-58.7-28.012-25.307-47.074-51.087-51.618-57.454 3.628-6.513 18.376-31.534 44.133-57.053 26.943-26.692 71.332-58.508 129.795-58.508 58.507 0 104.9 31.574 133.523 58.06 26.784 24.788 43.557 50.086 47.673 56.593-4.495 6.54-22.985 32.466-50.313 57.873-29.04 27.001-74.467 59.19-125.933 59.19z m-1.289-205.691c-49.536 0-89.839 40.303-89.839 89.839s40.303 89.834 89.84 89.834c49.53 0 89.828-40.298 89.828-89.834s-40.298-89.84-89.829-89.84z m0.262 141.512c-6.77 0-13.661-1.37-19.922-3.96a52.541 52.541 0 0 1-16.885-11.282 52.425 52.425 0 0 1-11.283-16.891c-2.191-5.289-3.53-11.132-3.874-16.905l-0.302-5.012a52.582 52.582 0 0 1 3.909-17.545c2.599-6.262 6.498-12.105 11.288-16.885a52.41 52.41 0 0 1 16.885-11.29 52.514 52.514 0 0 1 19.922-3.959c6.775 0 13.661 1.37 19.917 3.96a52.514 52.514 0 0 1 16.885 11.289 52.375 52.375 0 0 1 11.283 16.885c2.191 5.289 3.53 11.133 3.875 16.905l0.296 4.987a52.517 52.517 0 0 1-3.909 17.565c-2.584 6.256-6.488 12.094-11.283 16.896a52.518 52.518 0 0 1-16.885 11.283 52.605 52.605 0 0 1-19.917 3.959z m0 0"  ></path></symbol><symbol id="icon-qiche" viewBox="0 0 1282 1024"><path d="M1236.62802 409.231a263.209 263.209 0 0 0-80.987-59.206l-72.398-199.708C1064.22302 88.963 1008.08402 0 907.77102 0H374.29802C273.98402 0 217.84502 88.043 198.82502 150.317l-72.397 199.708A263.209 263.209 0 0 0 45.44002 409.23 193.879 193.879 0 0 0 0.34502 531.94v206.763a49.39 49.39 0 0 0 33.745 52.765V920.31a102.154 102.154 0 0 0 102.154 102.461h70.864A102.154 102.154 0 0 0 308.95602 920.31v-57.98s214.739 18.407 331.311 18.407S971.58002 862.33 971.58002 862.33v57.98a102.154 102.154 0 0 0 102.461 103.688h71.17A102.154 102.154 0 0 0 1247.98002 920.31V791.467a49.39 49.39 0 0 0 33.744-53.072V531.632a193.879 193.879 0 0 0-45.095-122.4zM248.21502 168.11c13.498-45.402 54.912-106.756 123.935-106.756h537.768c69.023 0 110.13 61.354 122.708 106.142l66.876 180.074h-920.31z m-33.13 800.363h-85.896a39.88 39.88 0 0 1-40.187-40.494V810.793c8.282 2.761 165.655 39.88 165.655 39.88v77a40.494 40.494 0 0 1-39.573 40.8z m978.595-40.494a39.88 39.88 0 0 1-40.187 40.494h-85.895a40.494 40.494 0 0 1-40.187-40.8v-77s157.373-37.119 165.656-39.88z m33.745-191.731s-198.173 81.908-586.851 81.908-586.237-81.908-586.237-81.908v-205.23c0-37.732 43.561-122.707 118.106-122.707h937.182c74.545 0 118.414 86.202 118.107 122.708-0.307 26.689-0.307 205.229-0.307 205.229z"  ></path><path d="M237.78502 600.349a63.808 63.808 0 1 0 127.616 0 63.808 63.808 0 1 0-127.616 0zM916.66702 600.349a63.808 63.808 0 1 0 127.616 0 63.808 63.808 0 1 0-127.616 0z"  ></path></symbol><symbol id="icon-tuichu" viewBox="0 0 1033 1024"><path d="M682.964 1024H113.203C45.763 1024 0 978.237 0 910.886V113.203C0 45.763 45.763 0 113.203 0h569.761c22.48 0 40.678 8.92 40.678 31.757s-17.841 31.758-40.678 31.758H113.203c-22.48 0-49.688 27.208-49.688 49.688v797.683c0 22.48 27.208 49.6 49.688 49.6h569.761c22.48 0 40.678 8.92 40.678 31.757S705.801 1024 682.964 1024z m105.799-267.798a40.678 40.678 0 0 1-28.814-69.313l203.48-203.658a40.767 40.767 0 0 1 57.627 57.627l-203.48 203.48a41.035 41.035 0 0 1-28.813 11.864z"  ></path><path d="M991.083 544.605a42.016 42.016 0 0 1-29.617-12.221L752.188 323.016a41.838 41.838 0 1 1 59.59-59.144l208.921 208.922a41.927 41.927 0 0 1-29.616 71.365z"  ></path><path d="M959.682 544.605h-569.76c-22.48 0-40.679-14.63-40.679-32.56s17.841-32.56 40.678-32.56h569.761c22.48 0 40.768 14.54 40.768 32.56s-18.288 32.56-40.768 32.56z"  ></path></symbol><symbol id="icon-shenhe" viewBox="0 0 1024 1024"><path d="M511.148 1024C354.647 1024 63.78 795.478 63.78 579.414V149.448l42.214-0.618a662.349 662.349 0 0 0 204.893-42.11 937.41 937.41 0 0 0 175.549-89.01h0.515A75.368 75.368 0 0 1 511.662 0a66.05 66.05 0 0 1 25.226 17.658l0.515 0.309a904.565 904.565 0 0 0 175.548 89.01 662.349 662.349 0 0 0 204.893 42.11l41.7 0.618v429.966c0 215.807-291.895 444.329-448.396 444.329z m0-947.242a1203.873 1203.873 0 0 1-176.064 85.766 812.93 812.93 0 0 1-202.319 47.929l-2.574 0.308v372.153c0 178.844 271.303 383.685 382.501 383.685s381.986-204.841 381.986-383.685V210.453h-3.089a825.388 825.388 0 0 1-201.804-47.929A1120.99 1120.99 0 0 1 513.722 76.81l-1.03-0.927z m-250.71 331.637V302.963H478.2l-2.06-4.067a213.593 213.593 0 0 0-13.384-28.263l58.173-9.266c3.604 10.296 8.752 24.299 12.87 39.485l0.515 2.111h220.851v102.344H702.14v-55.29H314.492v58.378h-54.055z m223.94 371.381V669.762H367.002v29.19h-54.055V423.273h171.43v-45.56h55.085v45.612h172.975V697.2h-54.055v-27.387h-118.92v109.653h-55.084z m55.084-157.221h118.92V569.94h-118.92v52.614z m-172.46 0h117.376V569.94H367.002v52.614z m172.46-97.814h118.92v-54.157h-118.92v53.9z m-172.46 0h117.376v-54.157H367.002v53.9z"  ></path></symbol><symbol id="icon-yichuli" viewBox="0 0 1024 1024"><path d="M248.32 93.696h-90.624c-49.664 0-89.6 39.936-89.6 89.6v716.8c0 49.664 39.936 89.6 89.6 89.6h315.392v-59.904H157.696c-16.384 0-29.696-13.312-29.696-29.696v-716.8c0-16.384 13.312-29.696 29.696-29.696h90.624V93.696zM660.48 153.6V93.696h94.72c49.664 0 89.6 39.936 89.6 89.6V478.72h-59.904V183.296c0-16.384-13.312-29.696-29.696-29.696h-94.72zM367.104 93.696h180.224V153.6H367.104V93.696zM307.2 34.304c19.968 0 29.696 9.728 29.696 29.696v119.296c0 19.968-9.728 29.696-29.696 29.696s-29.696-9.728-29.696-29.696V64c0-19.968 9.728-29.696 29.696-29.696z m298.496 0c19.968 0 29.696 9.728 29.696 29.696v119.296c0 19.968-9.728 29.696-29.696 29.696S576 203.264 576 183.296V64c0-19.968 9.728-29.696 29.696-29.696z"  ></path><path d="M217.6 303.104h448c19.968 0 29.696 9.728 29.696 29.696s-9.728 29.696-29.696 29.696h-448c-19.968 0-29.696-9.728-29.696-29.696s9.728-29.696 29.696-29.696z m0 148.992h328.704c19.968 0 29.696 9.728 29.696 29.696s-9.728 29.696-29.696 29.696H217.6c-19.968 0-29.696-9.728-29.696-29.696 0-19.456 9.728-29.696 29.696-29.696z m0 149.504h179.2c19.968 0 29.696 9.728 29.696 29.696s-9.728 29.696-29.696 29.696H217.6c-19.968 0-29.696-9.728-29.696-29.696S197.632 601.6 217.6 601.6z m477.696 320c94.208 0 170.496-76.288 170.496-170.496s-76.288-170.496-170.496-170.496S524.8 656.896 524.8 751.104 601.088 921.6 695.296 921.6z m0 68.096c-132.096 0-239.104-107.008-239.104-239.104S563.2 511.488 695.296 511.488 934.4 618.496 934.4 750.592 827.392 989.696 695.296 989.696z"  ></path><path d="M819.2 676.352c-10.24-10.24-26.112-9.728-35.84 0l-121.344 122.88-65.536-62.976c-9.728-9.216-25.088-8.704-34.304 0.512l-1.536 1.536c-9.216 9.728-8.704 25.088 0.512 34.304l84.48 80.896c6.144 5.632 14.336 7.68 22.016 6.144 5.12-1.024 9.728-3.072 13.312-7.168l138.752-140.288c9.216-9.728 9.216-26.112-0.512-35.84z"  ></path></symbol><symbol id="icon-yunhang" viewBox="0 0 1149 1024"><path d="M1001.949472 0H147.115922A147.049922 147.049922 0 0 0 0.066 146.586923v558.191705a147.049922 147.049922 0 0 0 147.049922 146.057923h393.396793v105.098945H306.276838a34.035982 34.035982 0 1 0 0 68.055964h536.530718a34.035982 34.035982 0 0 0 0-68.055964H608.569679V850.836551h393.381793a147.147922 147.147922 0 0 0 147.147922-147.147922v-556.539707A147.147922 147.147922 0 0 0 1001.950472 0z m80.084957 702.679629a80.067958 80.067958 0 0 1-80.067957 80.084958H147.114922a80.083958 80.083958 0 0 1-80.066957-80.083958v-4.956997h1014.986464z m0-72.069962H67.047965V147.147922a80.067958 80.067958 0 0 1 80.066957-80.083957h854.83555a80.149958 80.149958 0 0 1 56.05997 24.023987l1.999999 1.007999a80.133958 80.133958 0 0 1 22.023988 55.051971z"  ></path><path d="M975.051486 372.017804H773.676592a21.479989 21.479989 0 0 0-17.364991 8.839995l-39.652979 54.605971-34.069982-101.876946a21.479989 21.479989 0 0 0-41.304978 2.197999l-25.939986 118.084938-14.705993-67.410965-44.229976-235.279876a21.479989 21.479989 0 0 0-41.619978-2.443998l-68.930964 220.440883H179.069906a21.479989 21.479989 0 0 0 0 42.958978h282.532851a21.479989 21.479989 0 0 0 20.503989-15.068992l47.914974-153.34392L558.389706 394.619792c0 0.198 0.082 0.396 0.131999 0.595l35.589982 163.785913a21.479989 21.479989 0 0 0 20.965989 16.918991 21.479989 21.479989 0 0 0 20.982989-16.869991l30.335984-138.109927L688.999637 488.682742a21.479989 21.479989 0 0 0 37.73698 5.831997l57.828969-79.472958h190.4859a21.479989 21.479989 0 0 0 0-42.957977z"  ></path></symbol><symbol id="icon-xitong" viewBox="0 0 1024 1024"><path d="M507.352 718.583a213.768 213.768 0 1 1 205.217-213.587 209.733 209.733 0 0 1-205.217 213.587z m0-355.697a142.23 142.23 0 1 0 136.57 142.11 139.521 139.521 0 0 0-136.57-142.11zM373.732 1024h-1.325a31.252 31.252 0 0 1-8.49-1.505h-0.904A509.37 509.37 0 0 1 158.64 898.449l-0.541-0.542a29.446 29.446 0 0 1-2.228-2.469 26.796 26.796 0 0 1-1.988-2.71l-1.565-2.589v-0.421a23.063 23.063 0 0 1-1.265-2.65v-0.542l-0.903-2.65v-0.662c0-0.903-0.482-1.806-0.662-2.71v-0.541c0-0.964-0.362-1.987-0.482-2.95v-1.386a25.652 25.652 0 0 1 0-3.01 29.747 29.747 0 0 1 0-3.313 41.007 41.007 0 0 1 1.024-6.623c0-1.024 0.602-2.048 0.963-3.011l1.204-2.95v-0.482l1.385-2.65v-0.963a125.732 125.732 0 0 0 19.63-67.804A120.432 120.432 0 0 0 55.43 662.281H42.24v-3.372l-0.421 3.372h-5.6l-1.024-0.361h-0.421l-1.024-0.482-0.783-0.361-0.843-0.362-0.602-0.36-0.783-0.422-0.602-0.362-0.783-0.481-0.542-0.301-0.843-0.542-0.602-0.482-0.662-0.482-0.783-0.602-0.542-0.482-0.723-0.662-0.481-0.422-0.783-0.722-0.422-0.482-0.783-0.843-0.36-0.422-0.784-0.903 2.349-2.348-2.409 2.168-0.722-0.904v-0.421a8.13 8.13 0 0 1-0.663-0.903l-0.361-0.542-0.602-0.843-1.626-3.312-0.361-0.663-0.422-0.782v-0.663l-0.482-1.024v-0.541l-0.481-1.024v-0.482l-0.482-1.325v-0.602l-0.482-1.445-0.361-1.385a0.723 0.723 0 0 0 0-0.361v-0.723a557.482 557.482 0 0 1 0-242.49v-0.904l0.361-1.445v-0.301a13.549 13.549 0 0 1 0.422-1.385l0.542-1.445a4.938 4.938 0 0 1 0.542-1.205 1.927 1.927 0 0 1 0-0.481l0.542-1.084v-0.602l0.36-0.723 0.422-0.723 0.362-0.662 0.602-0.843 0.361-0.602 0.602-0.903 0.362-0.482 0.722-0.903v-0.362l0.783-0.903 0.482-0.542 0.662-0.662 0.361-0.422 0.603-0.542 0.421-0.421 0.662-0.602 0.603-0.482 0.542-0.482 0.903-0.662 0.421-0.362 0.843-0.602h0.542l0.964-0.602h0.361l1.144-0.602 1.204-0.542 1.205-0.542h0.421l1.144-0.421h0.482l1.084-0.362h17.884a120.432 120.432 0 0 0 117.783-122.54 125.37 125.37 0 0 0-19.69-67.863v-0.482l-0.362-0.542c-0.482-0.843-1.023-1.746-1.445-2.65v-0.361a32.938 32.938 0 0 1-2.288-6.022c0-0.963-0.422-1.927-0.602-2.89v-4.576c0-1.084 0-2.168-0.422-3.312v-3.252a29.566 29.566 0 0 1 0.783-6.503v-0.843c0-0.904 0.421-1.807 0.723-2.71v-0.602c0-1.024 0.662-1.807 0.963-2.65v-0.602a27.64 27.64 0 0 1 1.265-2.65v-0.421l1.625-2.59a28.302 28.302 0 0 1 1.987-2.709 45.584 45.584 0 0 1 2.289-2.53l0.662-0.601A510.092 510.092 0 0 1 362.351 2.19h0.422a34.685 34.685 0 0 1 9.634-1.867h1.385a32.697 32.697 0 0 1 10.116 1.566l0.964 0.36h0.361l1.024 0.422h0.963l1.144 0.542a34.745 34.745 0 0 1 16.078 16.74l0.482 0.663v0.361a115.856 115.856 0 0 0 212.804-0.602 35.768 35.768 0 0 1 14.873-16.319l0.723-0.421 0.723-0.361 0.903-0.422 0.723-0.301h0.541l0.843-0.361h0.783a32.517 32.517 0 0 1 21.016-0.602h0.421a510.212 510.212 0 0 1 206 125.25h1.927v1.986l1.385 1.566 0.361 0.422c0.602 0.722 1.144 1.565 1.686 2.348l1.566 2.71v0.361a23.725 23.725 0 0 1 1.264 2.71v0.421a20.474 20.474 0 0 1 1.024 2.83v0.362c0 1.084 0.602 2.047 0.783 3.01a1.084 1.084 0 0 1 0 0.422 27.097 27.097 0 0 1 0.542 3.131 34.986 34.986 0 0 1-0.843 13.007v0.422a25.23 25.23 0 0 1-0.964 2.95 39.923 39.923 0 0 1-1.204 2.83v0.542l-1.385 2.53v0.541a125.43 125.43 0 0 0-19.028 66.9 120.432 120.432 0 0 0 117.783 122.54h6.443a36.491 36.491 0 0 1 3.673 0 8.972 8.972 0 0 1 1.807 0h5.419l1.144 0.422 1.204 0.542 1.265 0.602h0.361l1.626 4.095 1.204 0.662h0.422l0.903 0.602 0.783 0.542 0.482 0.362 1.084 0.843a36.13 36.13 0 0 1 6.503 7.466 4.757 4.757 0 0 0 0.421 0.723l0.482 0.783 0.602 1.084v0.542a2.71 2.71 0 0 1 0 0.602l0.542 1.084 0.542 1.325a48.173 48.173 0 0 1 1.506 5.058 557.241 557.241 0 0 1 0 243.875 37.876 37.876 0 0 1-1.506 5.119l-0.542 1.144c0 0.421-0.421 0.723-0.542 1.084l-0.36 0.602a2.59 2.59 0 0 1 0 0.662 3.432 3.432 0 0 1-0.362 0.663l-0.362 0.602-0.541 0.963-0.542 0.904v0.36a42.994 42.994 0 0 1-3.071 3.734l-1.145 1.144a6.022 6.022 0 0 1-1.023 0.964l-0.422 0.361-0.722 0.542-0.904 0.663a7.828 7.828 0 0 1-1.083 0.722 33.18 33.18 0 0 1-7.226 3.553h-4.818l-0.602-3.312 0.542 3.312h-13.248a120.432 120.432 0 0 0-117.782 122.54 126.454 126.454 0 0 0 18.968 66.84 2.59 2.59 0 0 0 0 0.421 25.05 25.05 0 0 1 1.385 2.53v0.541c0.481 0.904 0.843 1.807 1.204 2.71v0.362l0.963 3.01a30.108 30.108 0 0 1 0.723 3.252v0.301a33.66 33.66 0 0 1 0.482 6.503v3.433a30.108 30.108 0 0 1-0.542 3.01v0.482l-0.723 2.83v0.482l-0.963 2.83V879a25.592 25.592 0 0 1-1.265 2.65v0.482a38.298 38.298 0 0 1-1.565 2.65c-0.723 1.083-1.385 1.926-2.048 2.769l-1.987 2.228A509.49 509.49 0 0 1 660.06 1015.75a31.794 31.794 0 0 1-9.936 1.566h-3.552a31.433 31.433 0 0 1-4.276-0.783h-0.481l-1.325-0.361-1.084-0.361h-0.542l-0.783-0.301-0.722-0.302h-0.422l-1.024-0.481h-0.36a35.226 35.226 0 0 1-16.079-16.921 115.856 115.856 0 0 0-212.864-0.662v0.3l-0.422 0.663a36.13 36.13 0 0 1-15.957 16.62l-1.024 0.481-0.662 0.362h-0.602l-3.01 2.408 1.083 3.192-0.843 0.361h-0.723l-1.324 0.422a31.674 31.674 0 0 1-9.515 1.445z m137.654-162.584a184.262 184.262 0 0 1 153.31 83.64A437.591 437.591 0 0 0 799.4 862.742a200.58 200.58 0 0 1 32.397-209.01 183.78 183.78 0 0 1 116.277-62.385 485.885 485.885 0 0 0 0-158.429 183.66 183.66 0 0 1-116.277-62.384 200.58 200.58 0 0 1-32.397-209.01 438.133 438.133 0 0 0-134.703-82.376 182.275 182.275 0 0 1-306.561 0 438.073 438.073 0 0 0-133.138 80.99 200.76 200.76 0 0 1-32.517 211.18 183.419 183.419 0 0 1-117.723 61.841 483.115 483.115 0 0 0 0 158.008 183.419 183.419 0 0 1 117.723 61.842 200.76 200.76 0 0 1 32.517 211.118 437.832 437.832 0 0 0 133.138 80.99 184.382 184.382 0 0 1 153.25-83.7z"  ></path></symbol><symbol id="icon-zhifa" viewBox="0 0 1024 1024"><path d="M914.37 286H572.31V60.21a60.21 60.21 0 1 0-120.42 0V286H109.83a60.2 60.2 0 0 0 0 120.4h94.42l-63.7 118a320.78 320.78 0 0 0-15.13 32.71h-0.53l-3.82 10.75c-19.68 55.61-12.42 99.47 22.17 134.12a128.53 128.53 0 0 0 181.52 0c29.72-29.72 39.75-68.34 29.78-112.59h0.19l-0.47-1.63c-0.33-1.37-0.85-2.8-1.21-4.18l-4.28-14.78c-0.13-0.44-0.43-1-0.57-1.4l-3.67-10.29h-0.49a294.4 294.4 0 0 0-16.34-32.9l-63.6-117.8h187.79v496.64H316.62a60.2 60.2 0 0 0 0 120.4h391a60.2 60.2 0 0 0 0-120.4H572.31V406.41h187.23l-63.71 117.94a323.82 323.82 0 0 0-15.15 32.75h-0.51l-3.82 10.75c-0.3 0.84-0.31 1.56-0.59 2.4l-5.7 19.13h0.94c-10.33 43.85-3 80.21 24.7 109.65 23.21 24.72 56.62 39.2 91.67 39.75h2c34.29 0 67.24-13.37 90.74-36.85 29.65-29.72 39.67-68.33 29.7-112.55h0.23l-6-20.59c-0.2-0.68-0.67-1.5-0.89-2.2l-3.39-9.49h-0.47A299.74 299.74 0 0 0 883 524.2l-63.64-117.79h95a60.2 60.2 0 0 0 0-120.4zM302 679.18a96.22 96.22 0 0 1-135.9 0c-23.16-23.16-29-51.91-18.06-89.8h173.42c10.22 36.47 3.67 66.62-19.46 89.8z m7-122.08H160.09c2.64-5.54 5.65-11.34 8.92-17.58l65.18-120.69 65.39 121.05c2.88 5.04 6.28 11.12 9.42 17.22z m548.29 122c-17.79 17.85-44.91 27.07-69.42 27.4-26.36-0.42-51.41-11.18-68.66-29.59-21.4-22.76-26.56-50.79-15.92-87.57h173.4c10.22 36.51 3.72 66.66-19.4 89.8z m7-122H715.37c2.68-5.67 5.69-11.51 8.91-17.58l65.14-120.65 65.4 121c3.05 5.36 6.4 11.32 9.46 17.23z m50.09-193.67h-385V946h178.2a17.22 17.22 0 0 1 0 34.44h-391a17.22 17.22 0 0 1 0-34.44h178.29V363.43h-385a17.22 17.22 0 0 1 0-34.44h385V60.21a17.23 17.23 0 1 1 34.46 0V329h385a17.22 17.22 0 0 1 0 34.44z"  ></path></symbol><symbol id="icon-chaxun" viewBox="0 0 1024 1024"><path d="M558.285 897.792H171.213V129.28h665.6v468.992c0 17.92 14.336 31.744 31.744 31.744S900.3 615.68 900.3 598.272V129.28c0.512-35.328-28.16-64-63.488-64h-665.6c-35.328 0-64 28.672-64 64v768c0 35.328 28.672 64 64 64h387.072c17.92 0 31.744-14.336 31.744-31.744s-14.336-31.744-31.744-31.744z"  ></path><path d="M755.917 326.912c0-17.92-14.336-31.744-31.744-31.744h-409.6c-17.92 0-31.744 14.336-31.744 31.744 0 17.92 14.336 31.744 31.744 31.744h409.6c17.92 0 31.744-14.336 31.744-31.744z m-441.344 148.48c-17.92 0-31.744 14.336-31.744 31.744s14.336 31.744 31.744 31.744h219.136c17.92 0 31.744-14.336 31.744-31.744s-14.336-31.744-31.744-31.744H314.573z m591.36 407.04L810.7 802.56c8.192-17.92 12.8-37.376 12.8-57.344 0-76.288-61.952-138.752-138.752-138.752-76.288 0-138.752 61.952-138.752 138.752 0 76.288 61.952 138.752 138.752 138.752 29.184 0 57.856-9.216 81.408-26.624l4.096-4.096 93.696 78.848c13.312 11.264 33.792 9.728 45.056-4.096 11.264-13.824 10.24-34.304-3.072-45.568z m-221.184-58.88c-43.008 0-77.824-34.816-77.824-77.824 0-43.008 34.816-77.824 77.824-77.824 43.008 0 77.824 34.816 77.824 77.824 0.512 42.496-34.816 77.824-77.824 77.824z"  ></path></symbol><symbol id="icon-zhifa1" viewBox="0 0 1031 1024"><path d="M924.318 265.627H744.184v-158.26A107.491 107.491 0 0 0 636.817 0H394.868a107.491 107.491 0 0 0-107.367 107.367v158.26H107.367A107.491 107.491 0 0 0 0 372.994v543.639A107.491 107.491 0 0 0 107.367 1024h816.951a107.47 107.47 0 0 0 107.367-107.284V372.994a107.491 107.491 0 0 0-107.367-107.367zM358.36 107.284a36.56 36.56 0 0 1 36.508-36.508v0.083h241.95a36.56 36.56 0 0 1 36.507 36.508v158.26H358.36V107.284zM962.351 664.24h-1.566v252.372a36.56 36.56 0 0 1-36.508 36.508h-816.91a36.56 36.56 0 0 1-36.508-36.508V664.25h-0.353v-38.893h0.394V372.91a36.56 36.56 0 0 1 36.508-36.508v0.083H924.36a36.56 36.56 0 0 1 36.508 36.508v252.373h1.525v38.894z"  ></path><path d="M579.7 543.587H451.986a63.734 63.734 0 0 0-63.713 63.66v18.12h6.223v38.894h-6.223v18.119a63.734 63.734 0 0 0 63.66 63.66h127.769a63.723 63.723 0 0 0 63.713-63.619v-18.17h-5.083v-38.894h5.083v-18.11a63.734 63.734 0 0 0-63.713-63.66z m21.646 138.793a21.677 21.677 0 0 1-21.645 21.645H451.985a21.677 21.677 0 0 1-21.646-21.645v-75.184a21.677 21.677 0 0 1 21.646-21.646H579.7a21.677 21.677 0 0 1 21.645 21.646v75.121z"  ></path><path d="M643.362 625.367h-5.04v38.894h324.03v-38.894h-318.99zM394.536 664.26v-38.894H70.506v38.894h324.03z"  ></path></symbol></svg>',h=(a=document.getElementsByTagName("script"))[a.length-1].getAttribute("data-injectcss");if(h&&!o.__iconfont__svg__cssinject__){o.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}!function(a){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(a,0);else{var h=function(){document.removeEventListener("DOMContentLoaded",h,!1),a()};document.addEventListener("DOMContentLoaded",h,!1)}else document.attachEvent&&(l=a,v=o.document,t=!1,(e=function(){try{v.documentElement.doScroll("left")}catch(a){return void setTimeout(e,50)}c()})(),v.onreadystatechange=function(){"complete"==v.readyState&&(v.onreadystatechange=null,c())});function c(){t||(t=!0,l())}var l,v,t,e}(function(){var a,h;(a=document.createElement("div")).innerHTML=c,c=null,(h=a.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",function(a,h){h.firstChild?function(a,h){h.parentNode.insertBefore(a,h)}(a,h.firstChild):h.appendChild(a)}(h,document.body))})}(window);
\ No newline at end of file

web/src/assets/download (2)/font_1423038_rj7lis4ljwn/iconfont.json

+{
+  "id": "1423038",
+  "name": "贵阳公交",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "9533417",
+      "name": "球机",
+      "font_class": "shipin1",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "10950691",
+      "name": "待处理",
+      "font_class": "daichuli",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "10950692",
+      "name": "关 闭",
+      "font_class": "guanbi",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "10950693",
+      "name": "首页",
+      "font_class": "shouye",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "10950694",
+      "name": "监管",
+      "font_class": "jianguan",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "10950695",
+      "name": "汽车",
+      "font_class": "qiche",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "10950696",
+      "name": "退出",
+      "font_class": "tuichu",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "10950697",
+      "name": "审核",
+      "font_class": "shenhe",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "10950698",
+      "name": "已处理 ",
+      "font_class": "yichuli",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "10950699",
+      "name": "运行",
+      "font_class": "yunhang",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "10950700",
+      "name": "系统",
+      "font_class": "xitong",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "10950701",
+      "name": "执法 (1)",
+      "font_class": "zhifa",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "10950702",
+      "name": "查询",
+      "font_class": "chaxun",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "10950703",
+      "name": "执法",
+      "font_class": "zhifa1",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    }
+  ]
+}

web/src/assets/download (2)/font_1423038_rj7lis4ljwn/iconfont.svg

+<?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" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="shipin1" unicode="&#58880;" d="M510.414861 854.786378c-208.354939 0-377.263158-169.284425-377.263158-378.104339C133.151703 267.85367199999996 510.414861-105.80804999999998 510.414861-105.80804999999998S887.678019 267.85367199999996 887.678019 476.682039c0 208.819913-168.908219 378.104338-377.263158 378.104339z m0-621.374613C375.593478 233.41176499999995 266.303406 342.70183699999995 266.303406 477.52322s109.290072 244.111455 244.111455 244.111455S754.526316 612.344603 754.526316 477.52322s-109.290072-244.111455-244.111455-244.111455zM523.383414 611.816223l-2.079703 47.520363-47.820483 2.062795v-51.65018S355.662993 600.1073269999999 348.73065 450.664619h320.198143c-10.394287 158.395575-145.545379 161.151604-145.545379 161.151604z m-14.553693-188.010204H396.551133s-6.932343-121.8951 112.278588-130.15896c117.820235 8.952867 112.278588 130.15896 112.278589 130.15896h-112.278589z m-1.039851-88.839662c-18.945585 0-34.306642 12.486671-34.306642 27.889998 0 15.407554 15.361057 27.894225 34.306642 27.894225s34.306642-12.486671 34.306642-27.894225c0-15.403327-15.361057-27.889998-34.306642-27.889998z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="daichuli" unicode="&#58881;" d="M191.6 686.7h153.2v-57.4h334.4v57.4h153.2v-252.5h46.4v299H679.2V796.5H344.8v-63.3H145.1v-761.6h277.6V18H191.6V686.7zM391.3 750h241.5v-74.3H391.3V750zM303 371.2h139.3v-46.4H303v46.4z m418 93.5H303v46.4h418v-46.4z m-57-65.9c-118 0-213.6-95.7-213.6-213.6 0-118 95.7-213.6 213.6-213.6 118 0 213.6 95.7 213.6 213.6 0.1 117.9-95.6 213.6-213.6 213.6z m118.3-331.9C750.7 35.3 708.7 18 664 18s-86.7 17.4-118.2 48.9c-31.6 31.6-48.9 73.6-48.9 118.2 0 44.7 17.4 86.6 48.9 118.2 23.1 23.1 51.7 38.5 82.9 45.2v-201.4h146.7v46.4H675.2V352c40.5-2.6 78.1-19.7 107.1-48.6 31.6-31.6 48.9-73.6 48.9-118.2 0-44.7-17.4-86.7-48.9-118.3z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="guanbi" unicode="&#58882;" d="M753.402 136.243a19.594 19.594 0 0 0-13.85 5.744L267.747 613.792a19.553 19.553 0 1 0 27.7 27.7l471.846-471.845a19.635 19.635 0 0 0-13.891-33.404M281.597 136.243a19.553 19.553 0 0 0-13.85 33.445l471.845 471.805a19.594 19.594 0 0 0 27.66-27.7L295.447 141.986a19.553 19.553 0 0 0-13.85-5.744"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shouye" unicode="&#58883;" d="M999.576 349.492a17.934 17.934 0 0 0-12.552 5.102L513.876 815.124l-473.15-460.53c-7.122-6.936-18.518-6.78-25.454 0.344s-6.78 18.52 0.344 25.454L501.32 853.142a18 18 0 0 0 25.11 0l485.704-472.752a18 18 0 0 0-12.558-30.898zM729.744-82.246H298.006c-51.794 0-80.252 5.5-98.228 18.982-21.584 16.188-23.39 40.384-23.39 63.782V354.542c0 9.942 8.058 18 18 18s18-8.058 18-18v-354.026c0-21.376 2.184-29.876 8.99-34.982 10.57-7.928 35.634-11.782 76.626-11.782h431.738c40.992 0 66.056 3.854 76.626 11.782 6.806 5.104 8.99 13.606 8.99 34.982V354.542c0 9.942 8.058 18 18 18s18-8.058 18-18v-354.026c0-23.396-1.806-47.594-23.388-63.782-17.974-13.48-46.432-18.98-98.226-18.98z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jianguan" unicode="&#58884;" d="M172.503-50.611v51.087H362.78v79.106c0 8.84 7.193 16.033 16.03 16.033h266.38c8.846 0 16.039-7.193 16.039-16.033v-79.106H851.48v-51.087H172.503z m-41.048 228.313c-29.825 0-54.085 24.259-54.085 54.085V764.543c0 29.815 24.264 54.07 54.085 54.07h761.094c29.82 0 54.08-24.254 54.08-54.07v-532.756c0-29.825-24.26-54.085-54.08-54.085H131.455z m19.03 589.854c-12.14 0-22.012-9.88-22.012-22.019v-494.689c0-12.14 9.873-22.012 22.012-22.012H873.52c12.14 0 22.017 9.873 22.017 22.012V745.536c0 12.14-9.878 22.019-22.017 22.019H150.485z m0 0M513.294 390.174c-51.49 0-97.627 31.92-127.26 58.7-28.012 25.307-47.074 51.087-51.618 57.454 3.628 6.513 18.376 31.534 44.133 57.053 26.943 26.692 71.332 58.508 129.795 58.508 58.507 0 104.9-31.574 133.523-58.06 26.784-24.788 43.557-50.086 47.673-56.593-4.495-6.54-22.985-32.466-50.313-57.873-29.04-27.001-74.467-59.19-125.933-59.19z m-1.289 205.691c-49.536 0-89.839-40.303-89.839-89.839s40.303-89.834 89.84-89.834c49.53 0 89.828 40.298 89.828 89.834s-40.298 89.84-89.829 89.84z m0.262-141.512c-6.77 0-13.661 1.37-19.922 3.96a52.541 52.541 0 0 0-16.885 11.282 52.425 52.425 0 0 0-11.283 16.891c-2.191 5.289-3.53 11.132-3.874 16.905l-0.302 5.012a52.582 52.582 0 0 0 3.909 17.545c2.599 6.262 6.498 12.105 11.288 16.885a52.41 52.41 0 0 0 16.885 11.29 52.514 52.514 0 0 0 19.922 3.959c6.775 0 13.661-1.37 19.917-3.96a52.514 52.514 0 0 0 16.885-11.289 52.375 52.375 0 0 0 11.283-16.885c2.191-5.289 3.53-11.133 3.875-16.905l0.296-4.987a52.517 52.517 0 0 0-3.909-17.565c-2.584-6.256-6.488-12.094-11.283-16.896a52.518 52.518 0 0 0-16.885-11.283 52.605 52.605 0 0 0-19.917-3.959z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="qiche" unicode="&#58885;" d="M1236.62802 486.769a263.209 263.209 0 0 1-80.987 59.206l-72.398 199.708C1064.22302 807.037 1008.08402 896 907.77102 896H374.29802C273.98402 896 217.84502 807.957 198.82502 745.683l-72.397-199.708A263.209 263.209 0 0 1 45.44002 486.77 193.879 193.879 0 0 1 0.34502 364.06v-206.763a49.39 49.39 0 0 1 33.745-52.765V-24.31a102.154 102.154 0 0 1 102.154-102.461h70.864A102.154 102.154 0 0 1 308.95602-24.31v57.98s214.739-18.407 331.311-18.407S971.58002 33.67 971.58002 33.67v-57.98a102.154 102.154 0 0 1 102.461-103.688h71.17A102.154 102.154 0 0 1 1247.98002-24.31V104.533a49.39 49.39 0 0 1 33.744 53.072V364.368a193.879 193.879 0 0 1-45.095 122.4zM248.21502 727.89c13.498 45.402 54.912 106.756 123.935 106.756h537.768c69.023 0 110.13-61.354 122.708-106.142l66.876-180.074h-920.31z m-33.13-800.363h-85.896a39.88 39.88 0 0 0-40.187 40.494V85.207c8.282-2.761 165.655-39.88 165.655-39.88v-77a40.494 40.494 0 0 0-39.573-40.8z m978.595 40.494a39.88 39.88 0 0 0-40.187-40.494h-85.895a40.494 40.494 0 0 0-40.187 40.8v77s157.373 37.119 165.656 39.88z m33.745 191.731s-198.173-81.908-586.851-81.908-586.237 81.908-586.237 81.908v205.23c0 37.732 43.561 122.707 118.106 122.707h937.182c74.545 0 118.414-86.202 118.107-122.708-0.307-26.689-0.307-205.229-0.307-205.229zM237.78502 295.651a63.808 63.808 0 1 1 127.616 0 63.808 63.808 0 1 1-127.616 0zM916.66702 295.651a63.808 63.808 0 1 1 127.616 0 63.808 63.808 0 1 1-127.616 0z"  horiz-adv-x="1282" />
+
+    
+    <glyph glyph-name="tuichu" unicode="&#58886;" d="M682.964-128H113.203C45.763-128 0-82.237 0-14.886V782.797C0 850.237 45.763 896 113.203 896h569.761c22.48 0 40.678-8.92 40.678-31.757s-17.841-31.758-40.678-31.758H113.203c-22.48 0-49.688-27.208-49.688-49.688v-797.683c0-22.48 27.208-49.6 49.688-49.6h569.761c22.48 0 40.678-8.92 40.678-31.757S705.801-128 682.964-128z m105.799 267.798a40.678 40.678 0 0 0-28.814 69.313l203.48 203.658a40.767 40.767 0 0 0 57.627-57.627l-203.48-203.48a41.035 41.035 0 0 0-28.813-11.864zM991.083 351.395a42.016 42.016 0 0 0-29.617 12.221L752.188 572.984a41.838 41.838 0 1 0 59.59 59.144l208.921-208.922a41.927 41.927 0 0 0-29.616-71.365zM959.682 351.395h-569.76c-22.48 0-40.679 14.63-40.679 32.56s17.841 32.56 40.678 32.56h569.761c22.48 0 40.768-14.54 40.768-32.56s-18.288-32.56-40.768-32.56z"  horiz-adv-x="1033" />
+
+    
+    <glyph glyph-name="shenhe" unicode="&#58887;" d="M511.148-128C354.647-128 63.78 100.522 63.78 316.586V746.552l42.214 0.618a662.349 662.349 0 0 1 204.893 42.11 937.41 937.41 0 0 1 175.549 89.01h0.515A75.368 75.368 0 0 0 511.662 896a66.05 66.05 0 0 0 25.226-17.658l0.515-0.309a904.565 904.565 0 0 1 175.548-89.01 662.349 662.349 0 0 1 204.893-42.11l41.7-0.618v-429.966c0-215.807-291.895-444.329-448.396-444.329z m0 947.242a1203.873 1203.873 0 0 0-176.064-85.766 812.93 812.93 0 0 0-202.319-47.929l-2.574-0.308v-372.153c0-178.844 271.303-383.685 382.501-383.685s381.986 204.841 381.986 383.685V685.547h-3.089a825.388 825.388 0 0 0-201.804 47.929A1120.99 1120.99 0 0 0 513.722 819.19l-1.03 0.927z m-250.71-331.637V593.037H478.2l-2.06 4.067a213.593 213.593 0 0 1-13.384 28.263l58.173 9.266c3.604-10.296 8.752-24.299 12.87-39.485l0.515-2.111h220.851v-102.344H702.14v55.29H314.492v-58.378h-54.055z m223.94-371.381V226.238H367.002v-29.19h-54.055V472.727h171.43v45.56h55.085v-45.612h172.975V198.8h-54.055v27.387h-118.92v-109.653h-55.084z m55.084 157.221h118.92V326.06h-118.92v-52.614z m-172.46 0h117.376V326.06H367.002v-52.614z m172.46 97.814h118.92v54.157h-118.92v-53.9z m-172.46 0h117.376v54.157H367.002v-53.9z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yichuli" unicode="&#58888;" d="M248.32 802.304h-90.624c-49.664 0-89.6-39.936-89.6-89.6v-716.8c0-49.664 39.936-89.6 89.6-89.6h315.392v59.904H157.696c-16.384 0-29.696 13.312-29.696 29.696v716.8c0 16.384 13.312 29.696 29.696 29.696h90.624V802.304zM660.48 742.4V802.304h94.72c49.664 0 89.6-39.936 89.6-89.6V417.28h-59.904V712.704c0 16.384-13.312 29.696-29.696 29.696h-94.72zM367.104 802.304h180.224V742.4H367.104V802.304zM307.2 861.696c19.968 0 29.696-9.728 29.696-29.696v-119.296c0-19.968-9.728-29.696-29.696-29.696s-29.696 9.728-29.696 29.696V832c0 19.968 9.728 29.696 29.696 29.696z m298.496 0c19.968 0 29.696-9.728 29.696-29.696v-119.296c0-19.968-9.728-29.696-29.696-29.696S576 692.736 576 712.704V832c0 19.968 9.728 29.696 29.696 29.696zM217.6 592.896h448c19.968 0 29.696-9.728 29.696-29.696s-9.728-29.696-29.696-29.696h-448c-19.968 0-29.696 9.728-29.696 29.696s9.728 29.696 29.696 29.696z m0-148.992h328.704c19.968 0 29.696-9.728 29.696-29.696s-9.728-29.696-29.696-29.696H217.6c-19.968 0-29.696 9.728-29.696 29.696 0 19.456 9.728 29.696 29.696 29.696z m0-149.504h179.2c19.968 0 29.696-9.728 29.696-29.696s-9.728-29.696-29.696-29.696H217.6c-19.968 0-29.696 9.728-29.696 29.696S197.632 294.4 217.6 294.4z m477.696-320c94.208 0 170.496 76.288 170.496 170.496s-76.288 170.496-170.496 170.496S524.8 239.104 524.8 144.896 601.088-25.6 695.296-25.6z m0-68.096c-132.096 0-239.104 107.008-239.104 239.104S563.2 384.512 695.296 384.512 934.4 277.504 934.4 145.408 827.392-93.696 695.296-93.696zM819.2 219.648c-10.24 10.24-26.112 9.728-35.84 0l-121.344-122.88-65.536 62.976c-9.728 9.216-25.088 8.704-34.304-0.512l-1.536-1.536c-9.216-9.728-8.704-25.088 0.512-34.304l84.48-80.896c6.144-5.632 14.336-7.68 22.016-6.144 5.12 1.024 9.728 3.072 13.312 7.168l138.752 140.288c9.216 9.728 9.216 26.112-0.512 35.84z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yunhang" unicode="&#58889;" d="M1001.949472 896H147.115922A147.049922 147.049922 0 0 1 0.066 749.413077v-558.191705a147.049922 147.049922 0 0 1 147.049922-146.057923h393.396793v-105.098945H306.276838a34.035982 34.035982 0 1 1 0-68.055964h536.530718a34.035982 34.035982 0 0 1 0 68.055964H608.569679V45.163449h393.381793a147.147922 147.147922 0 0 1 147.147922 147.147922v556.539707A147.147922 147.147922 0 0 1 1001.950472 896z m80.084957-702.679629a80.067958 80.067958 0 0 0-80.067957-80.084958H147.114922a80.083958 80.083958 0 0 0-80.066957 80.083958v4.956997h1014.986464z m0 72.069962H67.047965V748.852078a80.067958 80.067958 0 0 0 80.066957 80.083957h854.83555a80.149958 80.149958 0 0 0 56.05997-24.023987l1.999999-1.007999a80.133958 80.133958 0 0 0 22.023988-55.051971zM975.051486 523.982196H773.676592a21.479989 21.479989 0 0 1-17.364991-8.839995l-39.652979-54.605971-34.069982 101.876946a21.479989 21.479989 0 0 1-41.304978-2.197999l-25.939986-118.084938-14.705993 67.410965-44.229976 235.279876a21.479989 21.479989 0 0 1-41.619978 2.443998l-68.930964-220.440883H179.069906a21.479989 21.479989 0 0 1 0-42.958978h282.532851a21.479989 21.479989 0 0 1 20.503989 15.068992l47.914974 153.34392L558.389706 501.380208c0-0.198 0.082-0.396 0.131999-0.595l35.589982-163.785913a21.479989 21.479989 0 0 1 20.965989-16.918991 21.479989 21.479989 0 0 1 20.982989 16.869991l30.335984 138.109927L688.999637 407.317258a21.479989 21.479989 0 0 1 37.73698-5.831997l57.828969 79.472958h190.4859a21.479989 21.479989 0 0 1 0 42.957977z"  horiz-adv-x="1149" />
+
+    
+    <glyph glyph-name="xitong" unicode="&#58890;" d="M507.352 177.417a213.768 213.768 0 1 0 205.217 213.587 209.733 209.733 0 0 0-205.217-213.587z m0 355.697a142.23 142.23 0 1 1 136.57-142.11 139.521 139.521 0 0 1-136.57 142.11zM373.732-128h-1.325a31.252 31.252 0 0 0-8.49 1.505h-0.904A509.37 509.37 0 0 0 158.64-2.449l-0.541 0.542a29.446 29.446 0 0 0-2.228 2.469 26.796 26.796 0 0 0-1.988 2.71l-1.565 2.589v0.421a23.063 23.063 0 0 0-1.265 2.65v0.542l-0.903 2.65v0.662c0 0.903-0.482 1.806-0.662 2.71v0.541c0 0.964-0.362 1.987-0.482 2.95v1.386a25.652 25.652 0 0 0 0 3.01 29.747 29.747 0 0 0 0 3.313 41.007 41.007 0 0 0 1.024 6.623c0 1.024 0.602 2.048 0.963 3.011l1.204 2.95v0.482l1.385 2.65v0.963a125.732 125.732 0 0 1 19.63 67.804A120.432 120.432 0 0 1 55.43 233.719H42.24v3.372l-0.421-3.372h-5.6l-1.024 0.361h-0.421l-1.024 0.482-0.783 0.361-0.843 0.362-0.602 0.36-0.783 0.422-0.602 0.362-0.783 0.481-0.542 0.301-0.843 0.542-0.602 0.482-0.662 0.482-0.783 0.602-0.542 0.482-0.723 0.662-0.481 0.422-0.783 0.722-0.422 0.482-0.783 0.843-0.36 0.422-0.784 0.903 2.349 2.348-2.409-2.168-0.722 0.904v0.421a8.13 8.13 0 0 0-0.663 0.903l-0.361 0.542-0.602 0.843-1.626 3.312-0.361 0.663-0.422 0.782v0.663l-0.482 1.024v0.541l-0.481 1.024v0.482l-0.482 1.325v0.602l-0.482 1.445-0.361 1.385a0.723 0.723 0 0 1 0 0.361v0.723a557.482 557.482 0 0 0 0 242.49v0.904l0.361 1.445v0.301a13.549 13.549 0 0 0 0.422 1.385l0.542 1.445a4.938 4.938 0 0 0 0.542 1.205 1.927 1.927 0 0 0 0 0.481l0.542 1.084v0.602l0.36 0.723 0.422 0.723 0.362 0.662 0.602 0.843 0.361 0.602 0.602 0.903 0.362 0.482 0.722 0.903v0.362l0.783 0.903 0.482 0.542 0.662 0.662 0.361 0.422 0.603 0.542 0.421 0.421 0.662 0.602 0.603 0.482 0.542 0.482 0.903 0.662 0.421 0.362 0.843 0.602h0.542l0.964 0.602h0.361l1.144 0.602 1.204 0.542 1.205 0.542h0.421l1.144 0.421h0.482l1.084 0.362h17.884a120.432 120.432 0 0 1 117.783 122.54 125.37 125.37 0 0 1-19.69 67.863v0.482l-0.362 0.542c-0.482 0.843-1.023 1.746-1.445 2.65v0.361a32.938 32.938 0 0 0-2.288 6.022c0 0.963-0.422 1.927-0.602 2.89v4.576c0 1.084 0 2.168-0.422 3.312v3.252a29.566 29.566 0 0 0 0.783 6.503v0.843c0 0.904 0.421 1.807 0.723 2.71v0.602c0 1.024 0.662 1.807 0.963 2.65v0.602a27.64 27.64 0 0 0 1.265 2.65v0.421l1.625 2.59a28.302 28.302 0 0 0 1.987 2.709 45.584 45.584 0 0 0 2.289 2.53l0.662 0.601A510.092 510.092 0 0 0 362.351 893.81h0.422a34.685 34.685 0 0 0 9.634 1.867h1.385a32.697 32.697 0 0 0 10.116-1.566l0.964-0.36h0.361l1.024-0.422h0.963l1.144-0.542a34.745 34.745 0 0 0 16.078-16.74l0.482-0.663v-0.361a115.856 115.856 0 0 1 212.804 0.602 35.768 35.768 0 0 0 14.873 16.319l0.723 0.421 0.723 0.361 0.903 0.422 0.723 0.301h0.541l0.843 0.361h0.783a32.517 32.517 0 0 0 21.016 0.602h0.421a510.212 510.212 0 0 0 206-125.25h1.927v-1.986l1.385-1.566 0.361-0.422c0.602-0.722 1.144-1.565 1.686-2.348l1.566-2.71v-0.361a23.725 23.725 0 0 0 1.264-2.71v-0.421a20.474 20.474 0 0 0 1.024-2.83v-0.362c0-1.084 0.602-2.047 0.783-3.01a1.084 1.084 0 0 0 0-0.422 27.097 27.097 0 0 0 0.542-3.131 34.986 34.986 0 0 0-0.843-13.007v-0.422a25.23 25.23 0 0 0-0.964-2.95 39.923 39.923 0 0 0-1.204-2.83v-0.542l-1.385-2.53v-0.541a125.43 125.43 0 0 1-19.028-66.9 120.432 120.432 0 0 1 117.783-122.54h6.443a36.491 36.491 0 0 0 3.673 0 8.972 8.972 0 0 0 1.807 0h5.419l1.144-0.422 1.204-0.542 1.265-0.602h0.361l1.626-4.095 1.204-0.662h0.422l0.903-0.602 0.783-0.542 0.482-0.362 1.084-0.843a36.13 36.13 0 0 0 6.503-7.466 4.757 4.757 0 0 1 0.421-0.723l0.482-0.783 0.602-1.084v-0.542a2.71 2.71 0 0 0 0-0.602l0.542-1.084 0.542-1.325a48.173 48.173 0 0 0 1.506-5.058 557.241 557.241 0 0 0 0-243.875 37.876 37.876 0 0 0-1.506-5.119l-0.542-1.144c0-0.421-0.421-0.723-0.542-1.084l-0.36-0.602a2.59 2.59 0 0 0 0-0.662 3.432 3.432 0 0 0-0.362-0.663l-0.362-0.602-0.541-0.963-0.542-0.904v-0.36a42.994 42.994 0 0 0-3.071-3.734l-1.145-1.144a6.022 6.022 0 0 0-1.023-0.964l-0.422-0.361-0.722-0.542-0.904-0.663a7.828 7.828 0 0 0-1.083-0.722 33.18 33.18 0 0 0-7.226-3.553h-4.818l-0.602 3.312 0.542-3.312h-13.248a120.432 120.432 0 0 1-117.782-122.54 126.454 126.454 0 0 1 18.968-66.84 2.59 2.59 0 0 1 0-0.421 25.05 25.05 0 0 0 1.385-2.53v-0.541c0.481-0.904 0.843-1.807 1.204-2.71v-0.362l0.963-3.01a30.108 30.108 0 0 0 0.723-3.252v-0.301a33.66 33.66 0 0 0 0.482-6.503v-3.433a30.108 30.108 0 0 0-0.542-3.01v-0.482l-0.723-2.83v-0.482l-0.963-2.83V17a25.592 25.592 0 0 0-1.265-2.65v-0.482a38.298 38.298 0 0 0-1.565-2.65c-0.723-1.083-1.385-1.926-2.048-2.769l-1.987-2.228A509.49 509.49 0 0 0 660.06-119.75a31.794 31.794 0 0 0-9.936-1.566h-3.552a31.433 31.433 0 0 0-4.276 0.783h-0.481l-1.325 0.361-1.084 0.361h-0.542l-0.783 0.301-0.722 0.302h-0.422l-1.024 0.481h-0.36a35.226 35.226 0 0 0-16.079 16.921 115.856 115.856 0 0 1-212.864 0.662v-0.3l-0.422-0.663a36.13 36.13 0 0 0-15.957-16.62l-1.024-0.481-0.662-0.362h-0.602l-3.01-2.408 1.083-3.192-0.843-0.361h-0.723l-1.324-0.422a31.674 31.674 0 0 0-9.515-1.445z m137.654 162.584a184.262 184.262 0 0 0 153.31-83.64A437.591 437.591 0 0 1 799.4 33.258a200.58 200.58 0 0 0 32.397 209.01 183.78 183.78 0 0 0 116.277 62.385 485.885 485.885 0 0 1 0 158.429 183.66 183.66 0 0 0-116.277 62.384 200.58 200.58 0 0 0-32.397 209.01 438.133 438.133 0 0 1-134.703 82.376 182.275 182.275 0 0 0-306.561 0 438.073 438.073 0 0 1-133.138-80.99 200.76 200.76 0 0 0-32.517-211.18 183.419 183.419 0 0 0-117.723-61.841 483.115 483.115 0 0 1 0-158.008 183.419 183.419 0 0 0 117.723-61.842 200.76 200.76 0 0 0 32.517-211.118 437.832 437.832 0 0 1 133.138-80.99 184.382 184.382 0 0 0 153.25 83.7z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhifa" unicode="&#58891;" d="M914.37 610H572.31V835.79a60.21 60.21 0 1 1-120.42 0V610H109.83a60.2 60.2 0 0 1 0-120.4h94.42l-63.7-118a320.78 320.78 0 0 1-15.13-32.71h-0.53l-3.82-10.75c-19.68-55.61-12.42-99.47 22.17-134.12a128.53 128.53 0 0 1 181.52 0c29.72 29.72 39.75 68.34 29.78 112.59h0.19l-0.47 1.63c-0.33 1.37-0.85 2.8-1.21 4.18l-4.28 14.78c-0.13 0.44-0.43 1-0.57 1.4l-3.67 10.29h-0.49a294.4 294.4 0 0 1-16.34 32.9l-63.6 117.8h187.79v-496.64H316.62a60.2 60.2 0 0 1 0-120.4h391a60.2 60.2 0 0 1 0 120.4H572.31V489.59h187.23l-63.71-117.94a323.82 323.82 0 0 1-15.15-32.75h-0.51l-3.82-10.75c-0.3-0.84-0.31-1.56-0.59-2.4l-5.7-19.13h0.94c-10.33-43.85-3-80.21 24.7-109.65 23.21-24.72 56.62-39.2 91.67-39.75h2c34.29 0 67.24 13.37 90.74 36.85 29.65 29.72 39.67 68.33 29.7 112.55h0.23l-6 20.59c-0.2 0.68-0.67 1.5-0.89 2.2l-3.39 9.49h-0.47A299.74 299.74 0 0 1 883 371.8l-63.64 117.79h95a60.2 60.2 0 0 1 0 120.4zM302 216.82a96.22 96.22 0 0 0-135.9 0c-23.16 23.16-29 51.91-18.06 89.8h173.42c10.22-36.47 3.67-66.62-19.46-89.8z m7 122.08H160.09c2.64 5.54 5.65 11.34 8.92 17.58l65.18 120.69 65.39-121.05c2.88-5.04 6.28-11.12 9.42-17.22z m548.29-122c-17.79-17.85-44.91-27.07-69.42-27.4-26.36 0.42-51.41 11.18-68.66 29.59-21.4 22.76-26.56 50.79-15.92 87.57h173.4c10.22-36.51 3.72-66.66-19.4-89.8z m7 122H715.37c2.68 5.67 5.69 11.51 8.91 17.58l65.14 120.65 65.4-121c3.05-5.36 6.4-11.32 9.46-17.23z m50.09 193.67h-385V-50h178.2a17.22 17.22 0 0 0 0-34.44h-391a17.22 17.22 0 0 0 0 34.44h178.29V532.57h-385a17.22 17.22 0 0 0 0 34.44h385V835.79a17.23 17.23 0 1 0 34.46 0V567h385a17.22 17.22 0 0 0 0-34.44z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="chaxun" unicode="&#58892;" d="M558.285-1.792H171.213V766.72h665.6v-468.992c0-17.92 14.336-31.744 31.744-31.744S900.3 280.32 900.3 297.728V766.72c0.512 35.328-28.16 64-63.488 64h-665.6c-35.328 0-64-28.672-64-64v-768c0-35.328 28.672-64 64-64h387.072c17.92 0 31.744 14.336 31.744 31.744s-14.336 31.744-31.744 31.744zM755.917 569.088c0 17.92-14.336 31.744-31.744 31.744h-409.6c-17.92 0-31.744-14.336-31.744-31.744 0-17.92 14.336-31.744 31.744-31.744h409.6c17.92 0 31.744 14.336 31.744 31.744z m-441.344-148.48c-17.92 0-31.744-14.336-31.744-31.744s14.336-31.744 31.744-31.744h219.136c17.92 0 31.744 14.336 31.744 31.744s-14.336 31.744-31.744 31.744H314.573z m591.36-407.04L810.7 93.44c8.192 17.92 12.8 37.376 12.8 57.344 0 76.288-61.952 138.752-138.752 138.752-76.288 0-138.752-61.952-138.752-138.752 0-76.288 61.952-138.752 138.752-138.752 29.184 0 57.856 9.216 81.408 26.624l4.096 4.096 93.696-78.848c13.312-11.264 33.792-9.728 45.056 4.096 11.264 13.824 10.24 34.304-3.072 45.568z m-221.184 58.88c-43.008 0-77.824 34.816-77.824 77.824 0 43.008 34.816 77.824 77.824 77.824 43.008 0 77.824-34.816 77.824-77.824 0.512-42.496-34.816-77.824-77.824-77.824z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhifa1" unicode="&#58893;" d="M924.318 630.373H744.184v158.26A107.491 107.491 0 0 1 636.817 896H394.868a107.491 107.491 0 0 1-107.367-107.367v-158.26H107.367A107.491 107.491 0 0 1 0 523.006v-543.639A107.491 107.491 0 0 1 107.367-128h816.951a107.47 107.47 0 0 1 107.367 107.284V523.006a107.491 107.491 0 0 1-107.367 107.367zM358.36 788.716a36.56 36.56 0 0 0 36.508 36.508v-0.083h241.95a36.56 36.56 0 0 0 36.507-36.508v-158.26H358.36V788.716zM962.351 231.76h-1.566v-252.372a36.56 36.56 0 0 0-36.508-36.508h-816.91a36.56 36.56 0 0 0-36.508 36.508V231.75h-0.353v38.893h0.394V523.09a36.56 36.56 0 0 0 36.508 36.508v-0.083H924.36a36.56 36.56 0 0 0 36.508-36.508v-252.373h1.525v-38.894zM579.7 352.413H451.986a63.734 63.734 0 0 1-63.713-63.66v-18.12h6.223v-38.894h-6.223v-18.119a63.734 63.734 0 0 1 63.66-63.66h127.769a63.723 63.723 0 0 1 63.713 63.619v18.17h-5.083v38.894h5.083v18.11a63.734 63.734 0 0 1-63.713 63.66z m21.646-138.793a21.677 21.677 0 0 0-21.645-21.645H451.985a21.677 21.677 0 0 0-21.646 21.645v75.184a21.677 21.677 0 0 0 21.646 21.646H579.7a21.677 21.677 0 0 0 21.645-21.646v-75.121zM643.362 270.633h-5.04v-38.894h324.03v38.894h-318.99zM394.536 231.74v38.894H70.506v-38.894h324.03z"  horiz-adv-x="1031" />
+
+    
+
+
+  </font>
+</defs></svg>

web/src/assets/icon/demo.css

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

web/src/assets/icon/demo_index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1423038" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">球机</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">待处理</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">关 闭</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">首页</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">监管</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe605;</span>
+                <div class="name">汽车</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">退出</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe607;</span>
+                <div class="name">审核</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">已处理 </div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">运行</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">系统</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60b;</span>
+                <div class="name">执法 (1)</div>
+                <div class="code-name">&amp;#xe60b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">查询</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">执法</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shipin1"></span>
+            <div class="name">
+              球机
+            </div>
+            <div class="code-name">.icon-shipin1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daichuli"></span>
+            <div class="name">
+              待处理
+            </div>
+            <div class="code-name">.icon-daichuli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guanbi"></span>
+            <div class="name">
+              关 闭
+            </div>
+            <div class="code-name">.icon-guanbi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shouye"></span>
+            <div class="name">
+              首页
+            </div>
+            <div class="code-name">.icon-shouye
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jianguan"></span>
+            <div class="name">
+              监管
+            </div>
+            <div class="code-name">.icon-jianguan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qiche"></span>
+            <div class="name">
+              汽车
+            </div>
+            <div class="code-name">.icon-qiche
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tuichu"></span>
+            <div class="name">
+              退出
+            </div>
+            <div class="code-name">.icon-tuichu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenhe"></span>
+            <div class="name">
+              审核
+            </div>
+            <div class="code-name">.icon-shenhe
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yichuli"></span>
+            <div class="name">
+              已处理 
+            </div>
+            <div class="code-name">.icon-yichuli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yunhang"></span>
+            <div class="name">
+              运行
+            </div>
+            <div class="code-name">.icon-yunhang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xitong"></span>
+            <div class="name">
+              系统
+            </div>
+            <div class="code-name">.icon-xitong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhifa"></span>
+            <div class="name">
+              执法 (1)
+            </div>
+            <div class="code-name">.icon-zhifa
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chaxun"></span>
+            <div class="name">
+              查询
+            </div>
+            <div class="code-name">.icon-chaxun
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhifa1"></span>
+            <div class="name">
+              执法
+            </div>
+            <div class="code-name">.icon-zhifa1
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shipin1"></use>
+                </svg>
+                <div class="name">球机</div>
+                <div class="code-name">#icon-shipin1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daichuli"></use>
+                </svg>
+                <div class="name">待处理</div>
+                <div class="code-name">#icon-daichuli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guanbi"></use>
+                </svg>
+                <div class="name">关 闭</div>
+                <div class="code-name">#icon-guanbi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shouye"></use>
+                </svg>
+                <div class="name">首页</div>
+                <div class="code-name">#icon-shouye</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jianguan"></use>
+                </svg>
+                <div class="name">监管</div>
+                <div class="code-name">#icon-jianguan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qiche"></use>
+                </svg>
+                <div class="name">汽车</div>
+                <div class="code-name">#icon-qiche</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tuichu"></use>
+                </svg>
+                <div class="name">退出</div>
+                <div class="code-name">#icon-tuichu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenhe"></use>
+                </svg>
+                <div class="name">审核</div>
+                <div class="code-name">#icon-shenhe</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yichuli"></use>
+                </svg>
+                <div class="name">已处理 </div>
+                <div class="code-name">#icon-yichuli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yunhang"></use>
+                </svg>
+                <div class="name">运行</div>
+                <div class="code-name">#icon-yunhang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xitong"></use>
+                </svg>
+                <div class="name">系统</div>
+                <div class="code-name">#icon-xitong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhifa"></use>
+                </svg>
+                <div class="name">执法 (1)</div>
+                <div class="code-name">#icon-zhifa</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chaxun"></use>
+                </svg>
+                <div class="name">查询</div>
+                <div class="code-name">#icon-chaxun</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhifa1"></use>
+                </svg>
+                <div class="name">执法</div>
+                <div class="code-name">#icon-zhifa1</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

web/src/assets/icon/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1568799704253'); /* IE9 */
+  src: url('iconfont.eot?t=1568799704253#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAA4EAAsAAAAAF6AAAA23AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEJgqgLJlbATYCJAM8CyAABCAFhG0HgSobZRMzo8LGAUAovoXsvzywyVD3oL5CyxBDyc1r/7zJCYBvu7fWPJu/nCGXA/SWZ/wIB5YRWiJ1qaVfiP+4OhkmOD8HT/9rvzvP1mYFcWka6j+dqCVKI+Gp00iFPCWyPPBc7t9sEgaSj4ln0R4cbpOIAiyQXtPTtv7tLlFLlAFIW7XaGHUoRmIUWHBVuFzjlXCVhePxozz84lXl/+VM5xvS9o9keE8aFQkEBeTQzFVzFRgStnclK0CLMZxCLLi2/NywRFsi2mEKhJitjpO9y5bWNWSFiaq8JWv7w0/PcQFyI/AQunqAoIDo1VzafGE8oMMtOPIml8ckD7nPFx65lCK6CtWpkRUqSYlYOFKVrl5WCF8L8ez9pKBSNMBbQ0BpXkVQ++hlKALGCNqtaTZAKfCCIUXkxqRYMp6RN6I8fHFu8Bp9v/wcBzk4MYJta3BXH0s3VvvHnrv2U3lanBVoLwce7EKAbJX2B5CE3o3YUmUnODczAd2s7nuMQLmxFISOF8TRv3iZXKFUUbUGksJYRfJPXQNDAgIDHAzwMCDAgAgDEgzIYEAOAwoYUMKACgYoDKhhPM0osV1iHgaA2J+B9KRhuImiUcZxOgcdAra6TJikalrWMi+GA1uTTorq0Hqt62C8GJOzUrUV3GzjzzE52mhWQoyjGooipzNUHVtC3Vf9PqAdoQyrM6qOFdPl5GSjGqze0tTM7F2V/O/k8Sbdk12kk7mV2uvnx5EgNdU8TPQyq0hmulNiWvZ57x1KVKCElhEUghUVsILxVRn7QAHVnBtljXCmr0X73Z7xIbHzmskdhAJC/8BV8Xa+7cpvXPZxIEKpf+S33g06xiehz5pqH3pLA/ZxYA0CUVFqdv6h4s6yYA2Uw1D6JOS+7lNVGmGI99hepXm7LKAgQkP1fYKSr93B2dVuckW9H59VaUX4s+dpJd+ndRka5SBgtY9m8/E+FiaT4o6Z7Ko41r1NV0apves475fnxNmtFAYdBqIbbuuF+m2d8JbXw6Xju+0NuV1L7UJz/t5o27mkFV9G+Op4hlI5l6wF8Hd4rEFa5XVNJ2fDmh2/ry2eqO/x86xGA7oDq66WRVrRUh5hfg4GTlEc/se7f20GXRDNH5AHH8kJiMHAjaKvxt1re+fFp2089UT9FPTEWi86c0k7vmx0CW+4U52u4YQy5prpOVPMDkQyo1t+u9XDS2tTA3EwRHj0Xv7tMi2Ul6Gh4euQccnb4PT+nnZRDc6WVRynjLl48qwaKAvYE/5ZhJIT3fw1QIJleuKJEsoIB6MpqYghrRcnS3HX8XMrq0/cpoISTEFVJJSqQGdOnFfCshjg+5SgLQnungMdVZ5J2i6A+FCV/HKlJyxY6TQ/MLz46BLS25fT4HNT8o3A1Uw76Gmax3cPG+FOP2xnaeNPu7CyPntMJehu2kzrYSIGDEHdl5dUxY7xwbf48NbG7Ph8aEKjvHZyR3PmKj0mGbrag4vhTDsgmYSnmYrrcZ+qc4xZlu/LiPP7vgiVoQg+SCMvGqorRDcr585OZEVxgcjfRJfhwbif0frAMCABkT+OQJAZGmO5Gh5NNwGLq/emh4EAgQ2oWifFM8cgQqWu+zR/+4jsuyA0jFCHA34fJbrCq2kR2R6e6sbarGvM7GlzRbsp5FfpOifKgmH6pIc43+iao677TCPJdHrwHtGZya4r2o7igeTQHYXMHrx6nN9yUjal7sXrU9ye3hvtvzXlmQNXjbIbT/DWYqkCYuwOzyRKb8hHlJremaClNJIPTGw4m2GH2adcqe6myokYX45l84fwTJpCvHAZlbuvsaLG830buVePb6HrbTzH+c7bdRtbtlxSkHKUCpU+91Bx7wIOSquRXS2La5pR1VJfKafVSzyWCZRXY631hhc6tVJ0QnXvCDlUvIjHuhom78ZmSlVd2Ed295wN+eN7Bu2xjcp7DMufTjr27FhM5IgPlyKsOXn7xWkk52ikOXfqgmoN/jocyMqYUL5D4kXYuEopJicSo+nHOqHv40GRpwRJe3QZnZ4A4D0Hj80tINDKIOzsRfqkeiAqfAkK8Xqk96rWI+cvIGu99uZ1GkdKMpoDWX8+2zDIBDscsBk2BbSphTIEEmuvxf3eYC0D4+hD0lmjrJjQNVIrHVrBKEeDO4obWc2K8A6XpHqngdP7ViYVJa38ERHyb3pR+r9fhOGP/r72VvdWI2eHz944e1P4poQRtRBuhWu5F8drIUrEN2r1zcNPZJ/4JT8bV3ztWRTRuu7Oq3q8tx/wupOSc+mSnuVk6S9ddCy7R1zLHJdy/e1dzPtZ5xyQ2tEwMvvymcb16T27mBX3L1cwsx9cxmd47z/g//i/b6O4zaSVrJXkZnZa5jc4kPIsM41duQdo1LfxGOyJxrpLSHYjzWgnlXRjffeFL0k68WXJV3xJ1EkvhQ8LbU7KK8qQep46jC5jt+385+OM6arjG2LUBmu68sCBLGVF9JTYmAVZFemqAHeJooDE1XNoAS+byETaqBcB/GSNRgqROupmAB0Ulj5SXcj9x6M36hChqNUb+id7uaDKGw71QecSOgT33Qa+VlDsvi9IWnCrYQSNX/Q2e0ES4YO7WKAVGNwPBB2EMM7/0NdpcvrilKxo32hN5uLMIyuVQyo5Jo7lXWUXcwtBpUYWyGnn6DlmVmExN4f9Tq4j+msVBCVBrSX0su6tHLNrbIpelnI7R4TFYyIOwyP3MKbY2DzZNSVJ5obPh92yJM5wxXBOEvsGdD50g93aTzUd1cyMt/cc6pHhsj09B50nzpIzHk+X3MEOZe3xnYXo7STQJC5lN8+2CfycMpUcTmPs3Bc8iNCsqlOWxUC7L2S7QVlsvaJZNYiwYB+6I4JGwXaXR2lEm5RmmmwsOof11EjmHPNp0sSCmGlNSiVpuAPwPX/QVV7j0JUGM3zDFBs/PWnnmOEWSRx/d1h82F5unAgfFh+3Go/Fd8dYYi27Q/G4zLMbWOJa+wCsaYraEjmxl3hxSbIm2cVSexkErV2jMdRYAzWB6Dwt+YjmSDLu5ycEGhRH8/x8WkPztjFcEo3L5dFIluT6aTy5Mbf0MHF+h6np1/RcyGCA0FRrMOYCLWiJQ1oo12DQ5rTCM2fC0LUBAWXZUBvUejaCuHZ+u3V8Rqop0gTMPHNFSedv7+lnzTYjIHWzraq/rNQvXIIz7J816BkvKorn41GIFZ6ngxz9r5ShYRL9Sn10t/wFqGK7oeqnrE8X3MDfBkzsStng2//RP22TtzbeKfKxoFmhT0nx7Xlh9jX6GV1cJ1V0uzBihXiZYrPXDvYOL4lDmJW8eFxicTfVyXOCrwcywNDMOKtgcp1hks/4SO0gkAmqx+DVjQe0IaoSZnlfOadUFj6AnlxQ7FoIE6KghabUXdlqHwoxAQpXY5nZChRBSE+43Lhg33G+VoQw4DFXnpENq1N5MMshQjByP/4q5S5zyiIoMh0mZkRu1YFb07Vjb+ctzVi8GWw0p+2CYUwQRBIkhqvgjGw5V87LjObr5iU1LmBAhTySiCCoYn53ogrnBiEIOYgbc8qctimdiGzcWusZq51+i+i2suWwLJ1g33j7xZBlOvEWPXt4Xc1pPqOIz8E7XVPPHl6xVSdeXhxsEJMtzxNvbmOPGFrTx9Pto69mKHtE25Y80bLiEJCoaK6868PBOJS7lQvCQ/k2plrmG0GSpCzaYrJ0oVmgLQgyzk+zdL3pHDCdlru12d90pVnml0DrIVbGbPjdAtj3LsfN9LDBt32ESZ3Xnr0mJ+/9KKpcaku3DkfchQGpva8/7ntYWt/E+A7tYfJK1gpyJ8XOclAOaTvIKx5RkQ6UvJIZHhTtoDhYdhAGTYNWXag1RRzmBRG2YdUGjAZoMaJpFe54UlCaudLTFLE9thMzPQ74GgpR15hljUVO1LewcONGWetLK4rmCUvCGopWLCJQH2YCZyZfX0YXSPy9/ch6htv11tPFWH/UdQi9MEdErUcskzhb1jNj2G9Z2az1yXVzoR+eIuqMf4AA8J2ddTvqNcb6Dk0qsYkwGpcUQOLSsA22DZiISwwgckUY0UFzUm3UhiWf0hAuJAZkB8T5+14w5Tlggl/LWJEqEtzzDSIB8CIU2F6M7vUDqSPpXjsR7NfPfsoIiA2xKdGRDvBcyNtkO9KYZmuy3aYP9d2WIWlf21MBiu5Zj4Gl+UCh/5KHruwQXyY+Qv9usS2fgZzTOQRf0jjCfeK9dqRhljYeDC+R89j/iip9Jrf+XVGfW3RzWn9UWNSBkruhJ/ew7+oMY86q/wWGsQyczBx4uVVFSN6FqHIKSe4KSjua3SsjjiBkg4NsuwBE5wVO4xe8zlsRkj8QjftD0gUeSnv/Bac1Hp0DOlwjKsEO2ieQ9mxEtRzi9l9o86hiXhPl/mFMFIK6qMoNn8gYFzFPutlGxICJfoIPb3s4jh5C9D1qKZxIuJSlUc1baD/NDq4ipEhQugNaz8pE85gZXxwqX/8FWdlIiYZhh5X/oCihiYNaoXJQfLLsNOymdE1urIaQ1QDZN/Im4IOsaORxDwT1ZD2kiYKbIRpclDSacWWL1Rum853l7BuRLd4GTrwEiZIkk1yK98u9q9TSSCud7clRIK53nSLt8kgbmxW3oVxyPj9x15PiCl7/63y4keyAhhyysGyf9tHtM7OziWweJD5cZP1yZNRGO/XIvMnZ6tkM') format('woff2'),
+  url('iconfont.woff?t=1568799704253') format('woff'),
+  url('iconfont.ttf?t=1568799704253') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1568799704253#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+[class^="gy-icon"], [class*=" gy-icon"] {
+  font-family:"iconfont" !important;
+  /* 以下内容参照第三方图标库本身的规则 */
+  font-size: 18px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.gy-icon-shipin1:before {
+  content: "\e600";
+}
+
+.gy-icon-daichuli:before {
+  content: "\e601";
+}
+
+.gy-icon-guanbi:before {
+  content: "\e602";
+}
+
+.gy-icon-shouye:before {
+  content: "\e603";
+}
+
+.gy-icon-jianguan:before {
+  content: "\e604";
+}
+
+.gy-icon-qiche:before {
+  content: "\e605";
+}
+
+.gy-icon-tuichu:before {
+  content: "\e606";
+}
+
+.gy-icon-shenhe:before {
+  content: "\e607";
+}
+
+.gy-icon-yichuli:before {
+  content: "\e608";
+}
+
+.gy-icon-yunhang:before {
+  content: "\e609";
+}
+
+.gy-icon-xitong:before {
+  content: "\e60a";
+}
+
+.gy-icon-zhifa:before {
+  content: "\e60b";
+}
+
+.gy-icon-chaxun:before {
+  content: "\e60c";
+}
+
+.gy-icon-zhifa1:before {
+  content: "\e60d";
+}
+

web/src/assets/icon/iconfont.js

+!function(o){var a,c='<svg><symbol id="icon-shipin1" viewBox="0 0 1024 1024"><path d="M510.414861 41.213622c-208.354939 0-377.263158 169.284425-377.263158 378.104339C133.151703 628.146328 510.414861 1001.80805 510.414861 1001.80805S887.678019 628.146328 887.678019 419.317961c0-208.819913-168.908219-378.104338-377.263158-378.104339z m0 621.374613C375.593478 662.588235 266.303406 553.298163 266.303406 418.47678s109.290072-244.111455 244.111455-244.111455S754.526316 283.655397 754.526316 418.47678s-109.290072 244.111455-244.111455 244.111455z" fill="#f4ea2a" ></path><path d="M523.383414 284.183777l-2.079703-47.520363-47.820483-2.062795v51.65018S355.662993 295.892673 348.73065 445.335381h320.198143c-10.394287-158.395575-145.545379-161.151604-145.545379-161.151604z m-14.553693 188.010204H396.551133s-6.932343 121.8951 112.278588 130.15896c117.820235-8.952867 112.278588-130.15896 112.278589-130.15896h-112.278589z m-1.039851 88.839662c-18.945585 0-34.306642-12.486671-34.306642-27.889998 0-15.407554 15.361057-27.894225 34.306642-27.894225s34.306642 12.486671 34.306642 27.894225c0 15.403327-15.361057 27.889998-34.306642 27.889998z" fill="#f4ea2a" ></path></symbol><symbol id="icon-daichuli" viewBox="0 0 1024 1024"><path d="M191.6 209.3h153.2v57.4h334.4v-57.4h153.2v252.5h46.4v-299H679.2V99.5H344.8v63.3H145.1v761.6h277.6V878H191.6V209.3zM391.3 146h241.5v74.3H391.3V146zM303 524.8h139.3v46.4H303v-46.4z m418-93.5H303v-46.4h418v46.4z m-57 65.9c-118 0-213.6 95.7-213.6 213.6 0 118 95.7 213.6 213.6 213.6 118 0 213.6-95.7 213.6-213.6 0.1-117.9-95.6-213.6-213.6-213.6z m118.3 331.9C750.7 860.7 708.7 878 664 878s-86.7-17.4-118.2-48.9c-31.6-31.6-48.9-73.6-48.9-118.2 0-44.7 17.4-86.6 48.9-118.2 23.1-23.1 51.7-38.5 82.9-45.2v201.4h146.7v-46.4H675.2V544c40.5 2.6 78.1 19.7 107.1 48.6 31.6 31.6 48.9 73.6 48.9 118.2 0 44.7-17.4 86.7-48.9 118.3z m0 0"  ></path></symbol><symbol id="icon-guanbi" viewBox="0 0 1024 1024"><path d="M753.402 759.757a19.594 19.594 0 0 1-13.85-5.744L267.747 282.208a19.553 19.553 0 1 1 27.7-27.7l471.846 471.845a19.635 19.635 0 0 1-13.891 33.404"  ></path><path d="M281.597 759.757a19.553 19.553 0 0 1-13.85-33.445l471.845-471.805a19.594 19.594 0 0 1 27.66 27.7L295.447 754.014a19.553 19.553 0 0 1-13.85 5.744"  ></path></symbol><symbol id="icon-shouye" viewBox="0 0 1024 1024"><path d="M999.576 546.508a17.934 17.934 0 0 1-12.552-5.102L513.876 80.876l-473.15 460.53c-7.122 6.936-18.518 6.78-25.454-0.344s-6.78-18.52 0.344-25.454L501.32 42.858a18 18 0 0 1 25.11 0l485.704 472.752a18 18 0 0 1-12.558 30.898z"  ></path><path d="M729.744 978.246H298.006c-51.794 0-80.252-5.5-98.228-18.982-21.584-16.188-23.39-40.384-23.39-63.782V541.458c0-9.942 8.058-18 18-18s18 8.058 18 18v354.026c0 21.376 2.184 29.876 8.99 34.982 10.57 7.928 35.634 11.782 76.626 11.782h431.738c40.992 0 66.056-3.854 76.626-11.782 6.806-5.104 8.99-13.606 8.99-34.982V541.458c0-9.942 8.058-18 18-18s18 8.058 18 18v354.026c0 23.396-1.806 47.594-23.388 63.782-17.974 13.48-46.432 18.98-98.226 18.98z"  ></path></symbol><symbol id="icon-jianguan" viewBox="0 0 1024 1024"><path d="M172.503 946.611v-51.087H362.78v-79.106c0-8.84 7.193-16.033 16.03-16.033h266.38c8.846 0 16.039 7.193 16.039 16.033v79.106H851.48v51.087H172.503z m-41.048-228.313c-29.825 0-54.085-24.259-54.085-54.085V131.457c0-29.815 24.264-54.07 54.085-54.07h761.094c29.82 0 54.08 24.254 54.08 54.07v532.756c0 29.825-24.26 54.085-54.08 54.085H131.455z m19.03-589.854c-12.14 0-22.012 9.88-22.012 22.019v494.689c0 12.14 9.873 22.012 22.012 22.012H873.52c12.14 0 22.017-9.873 22.017-22.012V150.464c0-12.14-9.878-22.019-22.017-22.019H150.485z m0 0"  ></path><path d="M513.294 505.826c-51.49 0-97.627-31.92-127.26-58.7-28.012-25.307-47.074-51.087-51.618-57.454 3.628-6.513 18.376-31.534 44.133-57.053 26.943-26.692 71.332-58.508 129.795-58.508 58.507 0 104.9 31.574 133.523 58.06 26.784 24.788 43.557 50.086 47.673 56.593-4.495 6.54-22.985 32.466-50.313 57.873-29.04 27.001-74.467 59.19-125.933 59.19z m-1.289-205.691c-49.536 0-89.839 40.303-89.839 89.839s40.303 89.834 89.84 89.834c49.53 0 89.828-40.298 89.828-89.834s-40.298-89.84-89.829-89.84z m0.262 141.512c-6.77 0-13.661-1.37-19.922-3.96a52.541 52.541 0 0 1-16.885-11.282 52.425 52.425 0 0 1-11.283-16.891c-2.191-5.289-3.53-11.132-3.874-16.905l-0.302-5.012a52.582 52.582 0 0 1 3.909-17.545c2.599-6.262 6.498-12.105 11.288-16.885a52.41 52.41 0 0 1 16.885-11.29 52.514 52.514 0 0 1 19.922-3.959c6.775 0 13.661 1.37 19.917 3.96a52.514 52.514 0 0 1 16.885 11.289 52.375 52.375 0 0 1 11.283 16.885c2.191 5.289 3.53 11.133 3.875 16.905l0.296 4.987a52.517 52.517 0 0 1-3.909 17.565c-2.584 6.256-6.488 12.094-11.283 16.896a52.518 52.518 0 0 1-16.885 11.283 52.605 52.605 0 0 1-19.917 3.959z m0 0"  ></path></symbol><symbol id="icon-qiche" viewBox="0 0 1282 1024"><path d="M1236.62802 409.231a263.209 263.209 0 0 0-80.987-59.206l-72.398-199.708C1064.22302 88.963 1008.08402 0 907.77102 0H374.29802C273.98402 0 217.84502 88.043 198.82502 150.317l-72.397 199.708A263.209 263.209 0 0 0 45.44002 409.23 193.879 193.879 0 0 0 0.34502 531.94v206.763a49.39 49.39 0 0 0 33.745 52.765V920.31a102.154 102.154 0 0 0 102.154 102.461h70.864A102.154 102.154 0 0 0 308.95602 920.31v-57.98s214.739 18.407 331.311 18.407S971.58002 862.33 971.58002 862.33v57.98a102.154 102.154 0 0 0 102.461 103.688h71.17A102.154 102.154 0 0 0 1247.98002 920.31V791.467a49.39 49.39 0 0 0 33.744-53.072V531.632a193.879 193.879 0 0 0-45.095-122.4zM248.21502 168.11c13.498-45.402 54.912-106.756 123.935-106.756h537.768c69.023 0 110.13 61.354 122.708 106.142l66.876 180.074h-920.31z m-33.13 800.363h-85.896a39.88 39.88 0 0 1-40.187-40.494V810.793c8.282 2.761 165.655 39.88 165.655 39.88v77a40.494 40.494 0 0 1-39.573 40.8z m978.595-40.494a39.88 39.88 0 0 1-40.187 40.494h-85.895a40.494 40.494 0 0 1-40.187-40.8v-77s157.373-37.119 165.656-39.88z m33.745-191.731s-198.173 81.908-586.851 81.908-586.237-81.908-586.237-81.908v-205.23c0-37.732 43.561-122.707 118.106-122.707h937.182c74.545 0 118.414 86.202 118.107 122.708-0.307 26.689-0.307 205.229-0.307 205.229z"  ></path><path d="M237.78502 600.349a63.808 63.808 0 1 0 127.616 0 63.808 63.808 0 1 0-127.616 0zM916.66702 600.349a63.808 63.808 0 1 0 127.616 0 63.808 63.808 0 1 0-127.616 0z"  ></path></symbol><symbol id="icon-tuichu" viewBox="0 0 1033 1024"><path d="M682.964 1024H113.203C45.763 1024 0 978.237 0 910.886V113.203C0 45.763 45.763 0 113.203 0h569.761c22.48 0 40.678 8.92 40.678 31.757s-17.841 31.758-40.678 31.758H113.203c-22.48 0-49.688 27.208-49.688 49.688v797.683c0 22.48 27.208 49.6 49.688 49.6h569.761c22.48 0 40.678 8.92 40.678 31.757S705.801 1024 682.964 1024z m105.799-267.798a40.678 40.678 0 0 1-28.814-69.313l203.48-203.658a40.767 40.767 0 0 1 57.627 57.627l-203.48 203.48a41.035 41.035 0 0 1-28.813 11.864z"  ></path><path d="M991.083 544.605a42.016 42.016 0 0 1-29.617-12.221L752.188 323.016a41.838 41.838 0 1 1 59.59-59.144l208.921 208.922a41.927 41.927 0 0 1-29.616 71.365z"  ></path><path d="M959.682 544.605h-569.76c-22.48 0-40.679-14.63-40.679-32.56s17.841-32.56 40.678-32.56h569.761c22.48 0 40.768 14.54 40.768 32.56s-18.288 32.56-40.768 32.56z"  ></path></symbol><symbol id="icon-shenhe" viewBox="0 0 1024 1024"><path d="M511.148 1024C354.647 1024 63.78 795.478 63.78 579.414V149.448l42.214-0.618a662.349 662.349 0 0 0 204.893-42.11 937.41 937.41 0 0 0 175.549-89.01h0.515A75.368 75.368 0 0 1 511.662 0a66.05 66.05 0 0 1 25.226 17.658l0.515 0.309a904.565 904.565 0 0 0 175.548 89.01 662.349 662.349 0 0 0 204.893 42.11l41.7 0.618v429.966c0 215.807-291.895 444.329-448.396 444.329z m0-947.242a1203.873 1203.873 0 0 1-176.064 85.766 812.93 812.93 0 0 1-202.319 47.929l-2.574 0.308v372.153c0 178.844 271.303 383.685 382.501 383.685s381.986-204.841 381.986-383.685V210.453h-3.089a825.388 825.388 0 0 1-201.804-47.929A1120.99 1120.99 0 0 1 513.722 76.81l-1.03-0.927z m-250.71 331.637V302.963H478.2l-2.06-4.067a213.593 213.593 0 0 0-13.384-28.263l58.173-9.266c3.604 10.296 8.752 24.299 12.87 39.485l0.515 2.111h220.851v102.344H702.14v-55.29H314.492v58.378h-54.055z m223.94 371.381V669.762H367.002v29.19h-54.055V423.273h171.43v-45.56h55.085v45.612h172.975V697.2h-54.055v-27.387h-118.92v109.653h-55.084z m55.084-157.221h118.92V569.94h-118.92v52.614z m-172.46 0h117.376V569.94H367.002v52.614z m172.46-97.814h118.92v-54.157h-118.92v53.9z m-172.46 0h117.376v-54.157H367.002v53.9z"  ></path></symbol><symbol id="icon-yichuli" viewBox="0 0 1024 1024"><path d="M248.32 93.696h-90.624c-49.664 0-89.6 39.936-89.6 89.6v716.8c0 49.664 39.936 89.6 89.6 89.6h315.392v-59.904H157.696c-16.384 0-29.696-13.312-29.696-29.696v-716.8c0-16.384 13.312-29.696 29.696-29.696h90.624V93.696zM660.48 153.6V93.696h94.72c49.664 0 89.6 39.936 89.6 89.6V478.72h-59.904V183.296c0-16.384-13.312-29.696-29.696-29.696h-94.72zM367.104 93.696h180.224V153.6H367.104V93.696zM307.2 34.304c19.968 0 29.696 9.728 29.696 29.696v119.296c0 19.968-9.728 29.696-29.696 29.696s-29.696-9.728-29.696-29.696V64c0-19.968 9.728-29.696 29.696-29.696z m298.496 0c19.968 0 29.696 9.728 29.696 29.696v119.296c0 19.968-9.728 29.696-29.696 29.696S576 203.264 576 183.296V64c0-19.968 9.728-29.696 29.696-29.696z"  ></path><path d="M217.6 303.104h448c19.968 0 29.696 9.728 29.696 29.696s-9.728 29.696-29.696 29.696h-448c-19.968 0-29.696-9.728-29.696-29.696s9.728-29.696 29.696-29.696z m0 148.992h328.704c19.968 0 29.696 9.728 29.696 29.696s-9.728 29.696-29.696 29.696H217.6c-19.968 0-29.696-9.728-29.696-29.696 0-19.456 9.728-29.696 29.696-29.696z m0 149.504h179.2c19.968 0 29.696 9.728 29.696 29.696s-9.728 29.696-29.696 29.696H217.6c-19.968 0-29.696-9.728-29.696-29.696S197.632 601.6 217.6 601.6z m477.696 320c94.208 0 170.496-76.288 170.496-170.496s-76.288-170.496-170.496-170.496S524.8 656.896 524.8 751.104 601.088 921.6 695.296 921.6z m0 68.096c-132.096 0-239.104-107.008-239.104-239.104S563.2 511.488 695.296 511.488 934.4 618.496 934.4 750.592 827.392 989.696 695.296 989.696z"  ></path><path d="M819.2 676.352c-10.24-10.24-26.112-9.728-35.84 0l-121.344 122.88-65.536-62.976c-9.728-9.216-25.088-8.704-34.304 0.512l-1.536 1.536c-9.216 9.728-8.704 25.088 0.512 34.304l84.48 80.896c6.144 5.632 14.336 7.68 22.016 6.144 5.12-1.024 9.728-3.072 13.312-7.168l138.752-140.288c9.216-9.728 9.216-26.112-0.512-35.84z"  ></path></symbol><symbol id="icon-yunhang" viewBox="0 0 1149 1024"><path d="M1001.949472 0H147.115922A147.049922 147.049922 0 0 0 0.066 146.586923v558.191705a147.049922 147.049922 0 0 0 147.049922 146.057923h393.396793v105.098945H306.276838a34.035982 34.035982 0 1 0 0 68.055964h536.530718a34.035982 34.035982 0 0 0 0-68.055964H608.569679V850.836551h393.381793a147.147922 147.147922 0 0 0 147.147922-147.147922v-556.539707A147.147922 147.147922 0 0 0 1001.950472 0z m80.084957 702.679629a80.067958 80.067958 0 0 1-80.067957 80.084958H147.114922a80.083958 80.083958 0 0 1-80.066957-80.083958v-4.956997h1014.986464z m0-72.069962H67.047965V147.147922a80.067958 80.067958 0 0 1 80.066957-80.083957h854.83555a80.149958 80.149958 0 0 1 56.05997 24.023987l1.999999 1.007999a80.133958 80.133958 0 0 1 22.023988 55.051971z"  ></path><path d="M975.051486 372.017804H773.676592a21.479989 21.479989 0 0 0-17.364991 8.839995l-39.652979 54.605971-34.069982-101.876946a21.479989 21.479989 0 0 0-41.304978 2.197999l-25.939986 118.084938-14.705993-67.410965-44.229976-235.279876a21.479989 21.479989 0 0 0-41.619978-2.443998l-68.930964 220.440883H179.069906a21.479989 21.479989 0 0 0 0 42.958978h282.532851a21.479989 21.479989 0 0 0 20.503989-15.068992l47.914974-153.34392L558.389706 394.619792c0 0.198 0.082 0.396 0.131999 0.595l35.589982 163.785913a21.479989 21.479989 0 0 0 20.965989 16.918991 21.479989 21.479989 0 0 0 20.982989-16.869991l30.335984-138.109927L688.999637 488.682742a21.479989 21.479989 0 0 0 37.73698 5.831997l57.828969-79.472958h190.4859a21.479989 21.479989 0 0 0 0-42.957977z"  ></path></symbol><symbol id="icon-xitong" viewBox="0 0 1024 1024"><path d="M507.352 718.583a213.768 213.768 0 1 1 205.217-213.587 209.733 209.733 0 0 1-205.217 213.587z m0-355.697a142.23 142.23 0 1 0 136.57 142.11 139.521 139.521 0 0 0-136.57-142.11zM373.732 1024h-1.325a31.252 31.252 0 0 1-8.49-1.505h-0.904A509.37 509.37 0 0 1 158.64 898.449l-0.541-0.542a29.446 29.446 0 0 1-2.228-2.469 26.796 26.796 0 0 1-1.988-2.71l-1.565-2.589v-0.421a23.063 23.063 0 0 1-1.265-2.65v-0.542l-0.903-2.65v-0.662c0-0.903-0.482-1.806-0.662-2.71v-0.541c0-0.964-0.362-1.987-0.482-2.95v-1.386a25.652 25.652 0 0 1 0-3.01 29.747 29.747 0 0 1 0-3.313 41.007 41.007 0 0 1 1.024-6.623c0-1.024 0.602-2.048 0.963-3.011l1.204-2.95v-0.482l1.385-2.65v-0.963a125.732 125.732 0 0 0 19.63-67.804A120.432 120.432 0 0 0 55.43 662.281H42.24v-3.372l-0.421 3.372h-5.6l-1.024-0.361h-0.421l-1.024-0.482-0.783-0.361-0.843-0.362-0.602-0.36-0.783-0.422-0.602-0.362-0.783-0.481-0.542-0.301-0.843-0.542-0.602-0.482-0.662-0.482-0.783-0.602-0.542-0.482-0.723-0.662-0.481-0.422-0.783-0.722-0.422-0.482-0.783-0.843-0.36-0.422-0.784-0.903 2.349-2.348-2.409 2.168-0.722-0.904v-0.421a8.13 8.13 0 0 1-0.663-0.903l-0.361-0.542-0.602-0.843-1.626-3.312-0.361-0.663-0.422-0.782v-0.663l-0.482-1.024v-0.541l-0.481-1.024v-0.482l-0.482-1.325v-0.602l-0.482-1.445-0.361-1.385a0.723 0.723 0 0 0 0-0.361v-0.723a557.482 557.482 0 0 1 0-242.49v-0.904l0.361-1.445v-0.301a13.549 13.549 0 0 1 0.422-1.385l0.542-1.445a4.938 4.938 0 0 1 0.542-1.205 1.927 1.927 0 0 1 0-0.481l0.542-1.084v-0.602l0.36-0.723 0.422-0.723 0.362-0.662 0.602-0.843 0.361-0.602 0.602-0.903 0.362-0.482 0.722-0.903v-0.362l0.783-0.903 0.482-0.542 0.662-0.662 0.361-0.422 0.603-0.542 0.421-0.421 0.662-0.602 0.603-0.482 0.542-0.482 0.903-0.662 0.421-0.362 0.843-0.602h0.542l0.964-0.602h0.361l1.144-0.602 1.204-0.542 1.205-0.542h0.421l1.144-0.421h0.482l1.084-0.362h17.884a120.432 120.432 0 0 0 117.783-122.54 125.37 125.37 0 0 0-19.69-67.863v-0.482l-0.362-0.542c-0.482-0.843-1.023-1.746-1.445-2.65v-0.361a32.938 32.938 0 0 1-2.288-6.022c0-0.963-0.422-1.927-0.602-2.89v-4.576c0-1.084 0-2.168-0.422-3.312v-3.252a29.566 29.566 0 0 1 0.783-6.503v-0.843c0-0.904 0.421-1.807 0.723-2.71v-0.602c0-1.024 0.662-1.807 0.963-2.65v-0.602a27.64 27.64 0 0 1 1.265-2.65v-0.421l1.625-2.59a28.302 28.302 0 0 1 1.987-2.709 45.584 45.584 0 0 1 2.289-2.53l0.662-0.601A510.092 510.092 0 0 1 362.351 2.19h0.422a34.685 34.685 0 0 1 9.634-1.867h1.385a32.697 32.697 0 0 1 10.116 1.566l0.964 0.36h0.361l1.024 0.422h0.963l1.144 0.542a34.745 34.745 0 0 1 16.078 16.74l0.482 0.663v0.361a115.856 115.856 0 0 0 212.804-0.602 35.768 35.768 0 0 1 14.873-16.319l0.723-0.421 0.723-0.361 0.903-0.422 0.723-0.301h0.541l0.843-0.361h0.783a32.517 32.517 0 0 1 21.016-0.602h0.421a510.212 510.212 0 0 1 206 125.25h1.927v1.986l1.385 1.566 0.361 0.422c0.602 0.722 1.144 1.565 1.686 2.348l1.566 2.71v0.361a23.725 23.725 0 0 1 1.264 2.71v0.421a20.474 20.474 0 0 1 1.024 2.83v0.362c0 1.084 0.602 2.047 0.783 3.01a1.084 1.084 0 0 1 0 0.422 27.097 27.097 0 0 1 0.542 3.131 34.986 34.986 0 0 1-0.843 13.007v0.422a25.23 25.23 0 0 1-0.964 2.95 39.923 39.923 0 0 1-1.204 2.83v0.542l-1.385 2.53v0.541a125.43 125.43 0 0 0-19.028 66.9 120.432 120.432 0 0 0 117.783 122.54h6.443a36.491 36.491 0 0 1 3.673 0 8.972 8.972 0 0 1 1.807 0h5.419l1.144 0.422 1.204 0.542 1.265 0.602h0.361l1.626 4.095 1.204 0.662h0.422l0.903 0.602 0.783 0.542 0.482 0.362 1.084 0.843a36.13 36.13 0 0 1 6.503 7.466 4.757 4.757 0 0 0 0.421 0.723l0.482 0.783 0.602 1.084v0.542a2.71 2.71 0 0 1 0 0.602l0.542 1.084 0.542 1.325a48.173 48.173 0 0 1 1.506 5.058 557.241 557.241 0 0 1 0 243.875 37.876 37.876 0 0 1-1.506 5.119l-0.542 1.144c0 0.421-0.421 0.723-0.542 1.084l-0.36 0.602a2.59 2.59 0 0 1 0 0.662 3.432 3.432 0 0 1-0.362 0.663l-0.362 0.602-0.541 0.963-0.542 0.904v0.36a42.994 42.994 0 0 1-3.071 3.734l-1.145 1.144a6.022 6.022 0 0 1-1.023 0.964l-0.422 0.361-0.722 0.542-0.904 0.663a7.828 7.828 0 0 1-1.083 0.722 33.18 33.18 0 0 1-7.226 3.553h-4.818l-0.602-3.312 0.542 3.312h-13.248a120.432 120.432 0 0 0-117.782 122.54 126.454 126.454 0 0 0 18.968 66.84 2.59 2.59 0 0 0 0 0.421 25.05 25.05 0 0 1 1.385 2.53v0.541c0.481 0.904 0.843 1.807 1.204 2.71v0.362l0.963 3.01a30.108 30.108 0 0 1 0.723 3.252v0.301a33.66 33.66 0 0 1 0.482 6.503v3.433a30.108 30.108 0 0 1-0.542 3.01v0.482l-0.723 2.83v0.482l-0.963 2.83V879a25.592 25.592 0 0 1-1.265 2.65v0.482a38.298 38.298 0 0 1-1.565 2.65c-0.723 1.083-1.385 1.926-2.048 2.769l-1.987 2.228A509.49 509.49 0 0 1 660.06 1015.75a31.794 31.794 0 0 1-9.936 1.566h-3.552a31.433 31.433 0 0 1-4.276-0.783h-0.481l-1.325-0.361-1.084-0.361h-0.542l-0.783-0.301-0.722-0.302h-0.422l-1.024-0.481h-0.36a35.226 35.226 0 0 1-16.079-16.921 115.856 115.856 0 0 0-212.864-0.662v0.3l-0.422 0.663a36.13 36.13 0 0 1-15.957 16.62l-1.024 0.481-0.662 0.362h-0.602l-3.01 2.408 1.083 3.192-0.843 0.361h-0.723l-1.324 0.422a31.674 31.674 0 0 1-9.515 1.445z m137.654-162.584a184.262 184.262 0 0 1 153.31 83.64A437.591 437.591 0 0 0 799.4 862.742a200.58 200.58 0 0 1 32.397-209.01 183.78 183.78 0 0 1 116.277-62.385 485.885 485.885 0 0 0 0-158.429 183.66 183.66 0 0 1-116.277-62.384 200.58 200.58 0 0 1-32.397-209.01 438.133 438.133 0 0 0-134.703-82.376 182.275 182.275 0 0 1-306.561 0 438.073 438.073 0 0 0-133.138 80.99 200.76 200.76 0 0 1-32.517 211.18 183.419 183.419 0 0 1-117.723 61.841 483.115 483.115 0 0 0 0 158.008 183.419 183.419 0 0 1 117.723 61.842 200.76 200.76 0 0 1 32.517 211.118 437.832 437.832 0 0 0 133.138 80.99 184.382 184.382 0 0 1 153.25-83.7z"  ></path></symbol><symbol id="icon-zhifa" viewBox="0 0 1024 1024"><path d="M914.37 286H572.31V60.21a60.21 60.21 0 1 0-120.42 0V286H109.83a60.2 60.2 0 0 0 0 120.4h94.42l-63.7 118a320.78 320.78 0 0 0-15.13 32.71h-0.53l-3.82 10.75c-19.68 55.61-12.42 99.47 22.17 134.12a128.53 128.53 0 0 0 181.52 0c29.72-29.72 39.75-68.34 29.78-112.59h0.19l-0.47-1.63c-0.33-1.37-0.85-2.8-1.21-4.18l-4.28-14.78c-0.13-0.44-0.43-1-0.57-1.4l-3.67-10.29h-0.49a294.4 294.4 0 0 0-16.34-32.9l-63.6-117.8h187.79v496.64H316.62a60.2 60.2 0 0 0 0 120.4h391a60.2 60.2 0 0 0 0-120.4H572.31V406.41h187.23l-63.71 117.94a323.82 323.82 0 0 0-15.15 32.75h-0.51l-3.82 10.75c-0.3 0.84-0.31 1.56-0.59 2.4l-5.7 19.13h0.94c-10.33 43.85-3 80.21 24.7 109.65 23.21 24.72 56.62 39.2 91.67 39.75h2c34.29 0 67.24-13.37 90.74-36.85 29.65-29.72 39.67-68.33 29.7-112.55h0.23l-6-20.59c-0.2-0.68-0.67-1.5-0.89-2.2l-3.39-9.49h-0.47A299.74 299.74 0 0 0 883 524.2l-63.64-117.79h95a60.2 60.2 0 0 0 0-120.4zM302 679.18a96.22 96.22 0 0 1-135.9 0c-23.16-23.16-29-51.91-18.06-89.8h173.42c10.22 36.47 3.67 66.62-19.46 89.8z m7-122.08H160.09c2.64-5.54 5.65-11.34 8.92-17.58l65.18-120.69 65.39 121.05c2.88 5.04 6.28 11.12 9.42 17.22z m548.29 122c-17.79 17.85-44.91 27.07-69.42 27.4-26.36-0.42-51.41-11.18-68.66-29.59-21.4-22.76-26.56-50.79-15.92-87.57h173.4c10.22 36.51 3.72 66.66-19.4 89.8z m7-122H715.37c2.68-5.67 5.69-11.51 8.91-17.58l65.14-120.65 65.4 121c3.05 5.36 6.4 11.32 9.46 17.23z m50.09-193.67h-385V946h178.2a17.22 17.22 0 0 1 0 34.44h-391a17.22 17.22 0 0 1 0-34.44h178.29V363.43h-385a17.22 17.22 0 0 1 0-34.44h385V60.21a17.23 17.23 0 1 1 34.46 0V329h385a17.22 17.22 0 0 1 0 34.44z"  ></path></symbol><symbol id="icon-chaxun" viewBox="0 0 1024 1024"><path d="M558.285 897.792H171.213V129.28h665.6v468.992c0 17.92 14.336 31.744 31.744 31.744S900.3 615.68 900.3 598.272V129.28c0.512-35.328-28.16-64-63.488-64h-665.6c-35.328 0-64 28.672-64 64v768c0 35.328 28.672 64 64 64h387.072c17.92 0 31.744-14.336 31.744-31.744s-14.336-31.744-31.744-31.744z"  ></path><path d="M755.917 326.912c0-17.92-14.336-31.744-31.744-31.744h-409.6c-17.92 0-31.744 14.336-31.744 31.744 0 17.92 14.336 31.744 31.744 31.744h409.6c17.92 0 31.744-14.336 31.744-31.744z m-441.344 148.48c-17.92 0-31.744 14.336-31.744 31.744s14.336 31.744 31.744 31.744h219.136c17.92 0 31.744-14.336 31.744-31.744s-14.336-31.744-31.744-31.744H314.573z m591.36 407.04L810.7 802.56c8.192-17.92 12.8-37.376 12.8-57.344 0-76.288-61.952-138.752-138.752-138.752-76.288 0-138.752 61.952-138.752 138.752 0 76.288 61.952 138.752 138.752 138.752 29.184 0 57.856-9.216 81.408-26.624l4.096-4.096 93.696 78.848c13.312 11.264 33.792 9.728 45.056-4.096 11.264-13.824 10.24-34.304-3.072-45.568z m-221.184-58.88c-43.008 0-77.824-34.816-77.824-77.824 0-43.008 34.816-77.824 77.824-77.824 43.008 0 77.824 34.816 77.824 77.824 0.512 42.496-34.816 77.824-77.824 77.824z"  ></path></symbol><symbol id="icon-zhifa1" viewBox="0 0 1031 1024"><path d="M924.318 265.627H744.184v-158.26A107.491 107.491 0 0 0 636.817 0H394.868a107.491 107.491 0 0 0-107.367 107.367v158.26H107.367A107.491 107.491 0 0 0 0 372.994v543.639A107.491 107.491 0 0 0 107.367 1024h816.951a107.47 107.47 0 0 0 107.367-107.284V372.994a107.491 107.491 0 0 0-107.367-107.367zM358.36 107.284a36.56 36.56 0 0 1 36.508-36.508v0.083h241.95a36.56 36.56 0 0 1 36.507 36.508v158.26H358.36V107.284zM962.351 664.24h-1.566v252.372a36.56 36.56 0 0 1-36.508 36.508h-816.91a36.56 36.56 0 0 1-36.508-36.508V664.25h-0.353v-38.893h0.394V372.91a36.56 36.56 0 0 1 36.508-36.508v0.083H924.36a36.56 36.56 0 0 1 36.508 36.508v252.373h1.525v38.894z"  ></path><path d="M579.7 543.587H451.986a63.734 63.734 0 0 0-63.713 63.66v18.12h6.223v38.894h-6.223v18.119a63.734 63.734 0 0 0 63.66 63.66h127.769a63.723 63.723 0 0 0 63.713-63.619v-18.17h-5.083v-38.894h5.083v-18.11a63.734 63.734 0 0 0-63.713-63.66z m21.646 138.793a21.677 21.677 0 0 1-21.645 21.645H451.985a21.677 21.677 0 0 1-21.646-21.645v-75.184a21.677 21.677 0 0 1 21.646-21.646H579.7a21.677 21.677 0 0 1 21.645 21.646v75.121z"  ></path><path d="M643.362 625.367h-5.04v38.894h324.03v-38.894h-318.99zM394.536 664.26v-38.894H70.506v38.894h324.03z"  ></path></symbol></svg>',h=(a=document.getElementsByTagName("script"))[a.length-1].getAttribute("data-injectcss");if(h&&!o.__iconfont__svg__cssinject__){o.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}!function(a){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(a,0);else{var h=function(){document.removeEventListener("DOMContentLoaded",h,!1),a()};document.addEventListener("DOMContentLoaded",h,!1)}else document.attachEvent&&(l=a,v=o.document,t=!1,(e=function(){try{v.documentElement.doScroll("left")}catch(a){return void setTimeout(e,50)}c()})(),v.onreadystatechange=function(){"complete"==v.readyState&&(v.onreadystatechange=null,c())});function c(){t||(t=!0,l())}var l,v,t,e}(function(){var a,h;(a=document.createElement("div")).innerHTML=c,c=null,(h=a.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",function(a,h){h.firstChild?function(a,h){h.parentNode.insertBefore(a,h)}(a,h.firstChild):h.appendChild(a)}(h,document.body))})}(window);
\ No newline at end of file

web/src/assets/icon/iconfont.json

+{
+  "id": "1423038",
+  "name": "贵阳公交",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "9533417",
+      "name": "球机",
+      "font_class": "shipin1",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "10950691",
+      "name": "待处理",
+      "font_class": "daichuli",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "10950692",
+      "name": "关 闭",
+      "font_class": "guanbi",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "10950693",
+      "name": "首页",
+      "font_class": "shouye",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "10950694",
+      "name": "监管",
+      "font_class": "jianguan",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "10950695",
+      "name": "汽车",
+      "font_class": "qiche",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "10950696",
+      "name": "退出",
+      "font_class": "tuichu",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "10950697",
+      "name": "审核",
+      "font_class": "shenhe",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "10950698",
+      "name": "已处理 ",
+      "font_class": "yichuli",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "10950699",
+      "name": "运行",
+      "font_class": "yunhang",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "10950700",
+      "name": "系统",
+      "font_class": "xitong",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "10950701",
+      "name": "执法 (1)",
+      "font_class": "zhifa",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "10950702",
+      "name": "查询",
+      "font_class": "chaxun",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "10950703",
+      "name": "执法",
+      "font_class": "zhifa1",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    }
+  ]
+}

web/src/assets/icon/iconfont.svg

+<?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" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="shipin1" unicode="&#58880;" d="M510.414861 854.786378c-208.354939 0-377.263158-169.284425-377.263158-378.104339C133.151703 267.85367199999996 510.414861-105.80804999999998 510.414861-105.80804999999998S887.678019 267.85367199999996 887.678019 476.682039c0 208.819913-168.908219 378.104338-377.263158 378.104339z m0-621.374613C375.593478 233.41176499999995 266.303406 342.70183699999995 266.303406 477.52322s109.290072 244.111455 244.111455 244.111455S754.526316 612.344603 754.526316 477.52322s-109.290072-244.111455-244.111455-244.111455zM523.383414 611.816223l-2.079703 47.520363-47.820483 2.062795v-51.65018S355.662993 600.1073269999999 348.73065 450.664619h320.198143c-10.394287 158.395575-145.545379 161.151604-145.545379 161.151604z m-14.553693-188.010204H396.551133s-6.932343-121.8951 112.278588-130.15896c117.820235 8.952867 112.278588 130.15896 112.278589 130.15896h-112.278589z m-1.039851-88.839662c-18.945585 0-34.306642 12.486671-34.306642 27.889998 0 15.407554 15.361057 27.894225 34.306642 27.894225s34.306642-12.486671 34.306642-27.894225c0-15.403327-15.361057-27.889998-34.306642-27.889998z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="daichuli" unicode="&#58881;" d="M191.6 686.7h153.2v-57.4h334.4v57.4h153.2v-252.5h46.4v299H679.2V796.5H344.8v-63.3H145.1v-761.6h277.6V18H191.6V686.7zM391.3 750h241.5v-74.3H391.3V750zM303 371.2h139.3v-46.4H303v46.4z m418 93.5H303v46.4h418v-46.4z m-57-65.9c-118 0-213.6-95.7-213.6-213.6 0-118 95.7-213.6 213.6-213.6 118 0 213.6 95.7 213.6 213.6 0.1 117.9-95.6 213.6-213.6 213.6z m118.3-331.9C750.7 35.3 708.7 18 664 18s-86.7 17.4-118.2 48.9c-31.6 31.6-48.9 73.6-48.9 118.2 0 44.7 17.4 86.6 48.9 118.2 23.1 23.1 51.7 38.5 82.9 45.2v-201.4h146.7v46.4H675.2V352c40.5-2.6 78.1-19.7 107.1-48.6 31.6-31.6 48.9-73.6 48.9-118.2 0-44.7-17.4-86.7-48.9-118.3z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="guanbi" unicode="&#58882;" d="M753.402 136.243a19.594 19.594 0 0 0-13.85 5.744L267.747 613.792a19.553 19.553 0 1 0 27.7 27.7l471.846-471.845a19.635 19.635 0 0 0-13.891-33.404M281.597 136.243a19.553 19.553 0 0 0-13.85 33.445l471.845 471.805a19.594 19.594 0 0 0 27.66-27.7L295.447 141.986a19.553 19.553 0 0 0-13.85-5.744"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shouye" unicode="&#58883;" d="M999.576 349.492a17.934 17.934 0 0 0-12.552 5.102L513.876 815.124l-473.15-460.53c-7.122-6.936-18.518-6.78-25.454 0.344s-6.78 18.52 0.344 25.454L501.32 853.142a18 18 0 0 0 25.11 0l485.704-472.752a18 18 0 0 0-12.558-30.898zM729.744-82.246H298.006c-51.794 0-80.252 5.5-98.228 18.982-21.584 16.188-23.39 40.384-23.39 63.782V354.542c0 9.942 8.058 18 18 18s18-8.058 18-18v-354.026c0-21.376 2.184-29.876 8.99-34.982 10.57-7.928 35.634-11.782 76.626-11.782h431.738c40.992 0 66.056 3.854 76.626 11.782 6.806 5.104 8.99 13.606 8.99 34.982V354.542c0 9.942 8.058 18 18 18s18-8.058 18-18v-354.026c0-23.396-1.806-47.594-23.388-63.782-17.974-13.48-46.432-18.98-98.226-18.98z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="jianguan" unicode="&#58884;" d="M172.503-50.611v51.087H362.78v79.106c0 8.84 7.193 16.033 16.03 16.033h266.38c8.846 0 16.039-7.193 16.039-16.033v-79.106H851.48v-51.087H172.503z m-41.048 228.313c-29.825 0-54.085 24.259-54.085 54.085V764.543c0 29.815 24.264 54.07 54.085 54.07h761.094c29.82 0 54.08-24.254 54.08-54.07v-532.756c0-29.825-24.26-54.085-54.08-54.085H131.455z m19.03 589.854c-12.14 0-22.012-9.88-22.012-22.019v-494.689c0-12.14 9.873-22.012 22.012-22.012H873.52c12.14 0 22.017 9.873 22.017 22.012V745.536c0 12.14-9.878 22.019-22.017 22.019H150.485z m0 0M513.294 390.174c-51.49 0-97.627 31.92-127.26 58.7-28.012 25.307-47.074 51.087-51.618 57.454 3.628 6.513 18.376 31.534 44.133 57.053 26.943 26.692 71.332 58.508 129.795 58.508 58.507 0 104.9-31.574 133.523-58.06 26.784-24.788 43.557-50.086 47.673-56.593-4.495-6.54-22.985-32.466-50.313-57.873-29.04-27.001-74.467-59.19-125.933-59.19z m-1.289 205.691c-49.536 0-89.839-40.303-89.839-89.839s40.303-89.834 89.84-89.834c49.53 0 89.828 40.298 89.828 89.834s-40.298 89.84-89.829 89.84z m0.262-141.512c-6.77 0-13.661 1.37-19.922 3.96a52.541 52.541 0 0 0-16.885 11.282 52.425 52.425 0 0 0-11.283 16.891c-2.191 5.289-3.53 11.132-3.874 16.905l-0.302 5.012a52.582 52.582 0 0 0 3.909 17.545c2.599 6.262 6.498 12.105 11.288 16.885a52.41 52.41 0 0 0 16.885 11.29 52.514 52.514 0 0 0 19.922 3.959c6.775 0 13.661-1.37 19.917-3.96a52.514 52.514 0 0 0 16.885-11.289 52.375 52.375 0 0 0 11.283-16.885c2.191-5.289 3.53-11.133 3.875-16.905l0.296-4.987a52.517 52.517 0 0 0-3.909-17.565c-2.584-6.256-6.488-12.094-11.283-16.896a52.518 52.518 0 0 0-16.885-11.283 52.605 52.605 0 0 0-19.917-3.959z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="qiche" unicode="&#58885;" d="M1236.62802 486.769a263.209 263.209 0 0 1-80.987 59.206l-72.398 199.708C1064.22302 807.037 1008.08402 896 907.77102 896H374.29802C273.98402 896 217.84502 807.957 198.82502 745.683l-72.397-199.708A263.209 263.209 0 0 1 45.44002 486.77 193.879 193.879 0 0 1 0.34502 364.06v-206.763a49.39 49.39 0 0 1 33.745-52.765V-24.31a102.154 102.154 0 0 1 102.154-102.461h70.864A102.154 102.154 0 0 1 308.95602-24.31v57.98s214.739-18.407 331.311-18.407S971.58002 33.67 971.58002 33.67v-57.98a102.154 102.154 0 0 1 102.461-103.688h71.17A102.154 102.154 0 0 1 1247.98002-24.31V104.533a49.39 49.39 0 0 1 33.744 53.072V364.368a193.879 193.879 0 0 1-45.095 122.4zM248.21502 727.89c13.498 45.402 54.912 106.756 123.935 106.756h537.768c69.023 0 110.13-61.354 122.708-106.142l66.876-180.074h-920.31z m-33.13-800.363h-85.896a39.88 39.88 0 0 0-40.187 40.494V85.207c8.282-2.761 165.655-39.88 165.655-39.88v-77a40.494 40.494 0 0 0-39.573-40.8z m978.595 40.494a39.88 39.88 0 0 0-40.187-40.494h-85.895a40.494 40.494 0 0 0-40.187 40.8v77s157.373 37.119 165.656 39.88z m33.745 191.731s-198.173-81.908-586.851-81.908-586.237 81.908-586.237 81.908v205.23c0 37.732 43.561 122.707 118.106 122.707h937.182c74.545 0 118.414-86.202 118.107-122.708-0.307-26.689-0.307-205.229-0.307-205.229zM237.78502 295.651a63.808 63.808 0 1 1 127.616 0 63.808 63.808 0 1 1-127.616 0zM916.66702 295.651a63.808 63.808 0 1 1 127.616 0 63.808 63.808 0 1 1-127.616 0z"  horiz-adv-x="1282" />
+
+    
+    <glyph glyph-name="tuichu" unicode="&#58886;" d="M682.964-128H113.203C45.763-128 0-82.237 0-14.886V782.797C0 850.237 45.763 896 113.203 896h569.761c22.48 0 40.678-8.92 40.678-31.757s-17.841-31.758-40.678-31.758H113.203c-22.48 0-49.688-27.208-49.688-49.688v-797.683c0-22.48 27.208-49.6 49.688-49.6h569.761c22.48 0 40.678-8.92 40.678-31.757S705.801-128 682.964-128z m105.799 267.798a40.678 40.678 0 0 0-28.814 69.313l203.48 203.658a40.767 40.767 0 0 0 57.627-57.627l-203.48-203.48a41.035 41.035 0 0 0-28.813-11.864zM991.083 351.395a42.016 42.016 0 0 0-29.617 12.221L752.188 572.984a41.838 41.838 0 1 0 59.59 59.144l208.921-208.922a41.927 41.927 0 0 0-29.616-71.365zM959.682 351.395h-569.76c-22.48 0-40.679 14.63-40.679 32.56s17.841 32.56 40.678 32.56h569.761c22.48 0 40.768-14.54 40.768-32.56s-18.288-32.56-40.768-32.56z"  horiz-adv-x="1033" />
+
+    
+    <glyph glyph-name="shenhe" unicode="&#58887;" d="M511.148-128C354.647-128 63.78 100.522 63.78 316.586V746.552l42.214 0.618a662.349 662.349 0 0 1 204.893 42.11 937.41 937.41 0 0 1 175.549 89.01h0.515A75.368 75.368 0 0 0 511.662 896a66.05 66.05 0 0 0 25.226-17.658l0.515-0.309a904.565 904.565 0 0 1 175.548-89.01 662.349 662.349 0 0 1 204.893-42.11l41.7-0.618v-429.966c0-215.807-291.895-444.329-448.396-444.329z m0 947.242a1203.873 1203.873 0 0 0-176.064-85.766 812.93 812.93 0 0 0-202.319-47.929l-2.574-0.308v-372.153c0-178.844 271.303-383.685 382.501-383.685s381.986 204.841 381.986 383.685V685.547h-3.089a825.388 825.388 0 0 0-201.804 47.929A1120.99 1120.99 0 0 0 513.722 819.19l-1.03 0.927z m-250.71-331.637V593.037H478.2l-2.06 4.067a213.593 213.593 0 0 1-13.384 28.263l58.173 9.266c3.604-10.296 8.752-24.299 12.87-39.485l0.515-2.111h220.851v-102.344H702.14v55.29H314.492v-58.378h-54.055z m223.94-371.381V226.238H367.002v-29.19h-54.055V472.727h171.43v45.56h55.085v-45.612h172.975V198.8h-54.055v27.387h-118.92v-109.653h-55.084z m55.084 157.221h118.92V326.06h-118.92v-52.614z m-172.46 0h117.376V326.06H367.002v-52.614z m172.46 97.814h118.92v54.157h-118.92v-53.9z m-172.46 0h117.376v54.157H367.002v-53.9z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yichuli" unicode="&#58888;" d="M248.32 802.304h-90.624c-49.664 0-89.6-39.936-89.6-89.6v-716.8c0-49.664 39.936-89.6 89.6-89.6h315.392v59.904H157.696c-16.384 0-29.696 13.312-29.696 29.696v716.8c0 16.384 13.312 29.696 29.696 29.696h90.624V802.304zM660.48 742.4V802.304h94.72c49.664 0 89.6-39.936 89.6-89.6V417.28h-59.904V712.704c0 16.384-13.312 29.696-29.696 29.696h-94.72zM367.104 802.304h180.224V742.4H367.104V802.304zM307.2 861.696c19.968 0 29.696-9.728 29.696-29.696v-119.296c0-19.968-9.728-29.696-29.696-29.696s-29.696 9.728-29.696 29.696V832c0 19.968 9.728 29.696 29.696 29.696z m298.496 0c19.968 0 29.696-9.728 29.696-29.696v-119.296c0-19.968-9.728-29.696-29.696-29.696S576 692.736 576 712.704V832c0 19.968 9.728 29.696 29.696 29.696zM217.6 592.896h448c19.968 0 29.696-9.728 29.696-29.696s-9.728-29.696-29.696-29.696h-448c-19.968 0-29.696 9.728-29.696 29.696s9.728 29.696 29.696 29.696z m0-148.992h328.704c19.968 0 29.696-9.728 29.696-29.696s-9.728-29.696-29.696-29.696H217.6c-19.968 0-29.696 9.728-29.696 29.696 0 19.456 9.728 29.696 29.696 29.696z m0-149.504h179.2c19.968 0 29.696-9.728 29.696-29.696s-9.728-29.696-29.696-29.696H217.6c-19.968 0-29.696 9.728-29.696 29.696S197.632 294.4 217.6 294.4z m477.696-320c94.208 0 170.496 76.288 170.496 170.496s-76.288 170.496-170.496 170.496S524.8 239.104 524.8 144.896 601.088-25.6 695.296-25.6z m0-68.096c-132.096 0-239.104 107.008-239.104 239.104S563.2 384.512 695.296 384.512 934.4 277.504 934.4 145.408 827.392-93.696 695.296-93.696zM819.2 219.648c-10.24 10.24-26.112 9.728-35.84 0l-121.344-122.88-65.536 62.976c-9.728 9.216-25.088 8.704-34.304-0.512l-1.536-1.536c-9.216-9.728-8.704-25.088 0.512-34.304l84.48-80.896c6.144-5.632 14.336-7.68 22.016-6.144 5.12 1.024 9.728 3.072 13.312 7.168l138.752 140.288c9.216 9.728 9.216 26.112-0.512 35.84z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yunhang" unicode="&#58889;" d="M1001.949472 896H147.115922A147.049922 147.049922 0 0 1 0.066 749.413077v-558.191705a147.049922 147.049922 0 0 1 147.049922-146.057923h393.396793v-105.098945H306.276838a34.035982 34.035982 0 1 1 0-68.055964h536.530718a34.035982 34.035982 0 0 1 0 68.055964H608.569679V45.163449h393.381793a147.147922 147.147922 0 0 1 147.147922 147.147922v556.539707A147.147922 147.147922 0 0 1 1001.950472 896z m80.084957-702.679629a80.067958 80.067958 0 0 0-80.067957-80.084958H147.114922a80.083958 80.083958 0 0 0-80.066957 80.083958v4.956997h1014.986464z m0 72.069962H67.047965V748.852078a80.067958 80.067958 0 0 0 80.066957 80.083957h854.83555a80.149958 80.149958 0 0 0 56.05997-24.023987l1.999999-1.007999a80.133958 80.133958 0 0 0 22.023988-55.051971zM975.051486 523.982196H773.676592a21.479989 21.479989 0 0 1-17.364991-8.839995l-39.652979-54.605971-34.069982 101.876946a21.479989 21.479989 0 0 1-41.304978-2.197999l-25.939986-118.084938-14.705993 67.410965-44.229976 235.279876a21.479989 21.479989 0 0 1-41.619978 2.443998l-68.930964-220.440883H179.069906a21.479989 21.479989 0 0 1 0-42.958978h282.532851a21.479989 21.479989 0 0 1 20.503989 15.068992l47.914974 153.34392L558.389706 501.380208c0-0.198 0.082-0.396 0.131999-0.595l35.589982-163.785913a21.479989 21.479989 0 0 1 20.965989-16.918991 21.479989 21.479989 0 0 1 20.982989 16.869991l30.335984 138.109927L688.999637 407.317258a21.479989 21.479989 0 0 1 37.73698-5.831997l57.828969 79.472958h190.4859a21.479989 21.479989 0 0 1 0 42.957977z"  horiz-adv-x="1149" />
+
+    
+    <glyph glyph-name="xitong" unicode="&#58890;" d="M507.352 177.417a213.768 213.768 0 1 0 205.217 213.587 209.733 209.733 0 0 0-205.217-213.587z m0 355.697a142.23 142.23 0 1 1 136.57-142.11 139.521 139.521 0 0 1-136.57 142.11zM373.732-128h-1.325a31.252 31.252 0 0 0-8.49 1.505h-0.904A509.37 509.37 0 0 0 158.64-2.449l-0.541 0.542a29.446 29.446 0 0 0-2.228 2.469 26.796 26.796 0 0 0-1.988 2.71l-1.565 2.589v0.421a23.063 23.063 0 0 0-1.265 2.65v0.542l-0.903 2.65v0.662c0 0.903-0.482 1.806-0.662 2.71v0.541c0 0.964-0.362 1.987-0.482 2.95v1.386a25.652 25.652 0 0 0 0 3.01 29.747 29.747 0 0 0 0 3.313 41.007 41.007 0 0 0 1.024 6.623c0 1.024 0.602 2.048 0.963 3.011l1.204 2.95v0.482l1.385 2.65v0.963a125.732 125.732 0 0 1 19.63 67.804A120.432 120.432 0 0 1 55.43 233.719H42.24v3.372l-0.421-3.372h-5.6l-1.024 0.361h-0.421l-1.024 0.482-0.783 0.361-0.843 0.362-0.602 0.36-0.783 0.422-0.602 0.362-0.783 0.481-0.542 0.301-0.843 0.542-0.602 0.482-0.662 0.482-0.783 0.602-0.542 0.482-0.723 0.662-0.481 0.422-0.783 0.722-0.422 0.482-0.783 0.843-0.36 0.422-0.784 0.903 2.349 2.348-2.409-2.168-0.722 0.904v0.421a8.13 8.13 0 0 0-0.663 0.903l-0.361 0.542-0.602 0.843-1.626 3.312-0.361 0.663-0.422 0.782v0.663l-0.482 1.024v0.541l-0.481 1.024v0.482l-0.482 1.325v0.602l-0.482 1.445-0.361 1.385a0.723 0.723 0 0 1 0 0.361v0.723a557.482 557.482 0 0 0 0 242.49v0.904l0.361 1.445v0.301a13.549 13.549 0 0 0 0.422 1.385l0.542 1.445a4.938 4.938 0 0 0 0.542 1.205 1.927 1.927 0 0 0 0 0.481l0.542 1.084v0.602l0.36 0.723 0.422 0.723 0.362 0.662 0.602 0.843 0.361 0.602 0.602 0.903 0.362 0.482 0.722 0.903v0.362l0.783 0.903 0.482 0.542 0.662 0.662 0.361 0.422 0.603 0.542 0.421 0.421 0.662 0.602 0.603 0.482 0.542 0.482 0.903 0.662 0.421 0.362 0.843 0.602h0.542l0.964 0.602h0.361l1.144 0.602 1.204 0.542 1.205 0.542h0.421l1.144 0.421h0.482l1.084 0.362h17.884a120.432 120.432 0 0 1 117.783 122.54 125.37 125.37 0 0 1-19.69 67.863v0.482l-0.362 0.542c-0.482 0.843-1.023 1.746-1.445 2.65v0.361a32.938 32.938 0 0 0-2.288 6.022c0 0.963-0.422 1.927-0.602 2.89v4.576c0 1.084 0 2.168-0.422 3.312v3.252a29.566 29.566 0 0 0 0.783 6.503v0.843c0 0.904 0.421 1.807 0.723 2.71v0.602c0 1.024 0.662 1.807 0.963 2.65v0.602a27.64 27.64 0 0 0 1.265 2.65v0.421l1.625 2.59a28.302 28.302 0 0 0 1.987 2.709 45.584 45.584 0 0 0 2.289 2.53l0.662 0.601A510.092 510.092 0 0 0 362.351 893.81h0.422a34.685 34.685 0 0 0 9.634 1.867h1.385a32.697 32.697 0 0 0 10.116-1.566l0.964-0.36h0.361l1.024-0.422h0.963l1.144-0.542a34.745 34.745 0 0 0 16.078-16.74l0.482-0.663v-0.361a115.856 115.856 0 0 1 212.804 0.602 35.768 35.768 0 0 0 14.873 16.319l0.723 0.421 0.723 0.361 0.903 0.422 0.723 0.301h0.541l0.843 0.361h0.783a32.517 32.517 0 0 0 21.016 0.602h0.421a510.212 510.212 0 0 0 206-125.25h1.927v-1.986l1.385-1.566 0.361-0.422c0.602-0.722 1.144-1.565 1.686-2.348l1.566-2.71v-0.361a23.725 23.725 0 0 0 1.264-2.71v-0.421a20.474 20.474 0 0 0 1.024-2.83v-0.362c0-1.084 0.602-2.047 0.783-3.01a1.084 1.084 0 0 0 0-0.422 27.097 27.097 0 0 0 0.542-3.131 34.986 34.986 0 0 0-0.843-13.007v-0.422a25.23 25.23 0 0 0-0.964-2.95 39.923 39.923 0 0 0-1.204-2.83v-0.542l-1.385-2.53v-0.541a125.43 125.43 0 0 1-19.028-66.9 120.432 120.432 0 0 1 117.783-122.54h6.443a36.491 36.491 0 0 0 3.673 0 8.972 8.972 0 0 0 1.807 0h5.419l1.144-0.422 1.204-0.542 1.265-0.602h0.361l1.626-4.095 1.204-0.662h0.422l0.903-0.602 0.783-0.542 0.482-0.362 1.084-0.843a36.13 36.13 0 0 0 6.503-7.466 4.757 4.757 0 0 1 0.421-0.723l0.482-0.783 0.602-1.084v-0.542a2.71 2.71 0 0 0 0-0.602l0.542-1.084 0.542-1.325a48.173 48.173 0 0 0 1.506-5.058 557.241 557.241 0 0 0 0-243.875 37.876 37.876 0 0 0-1.506-5.119l-0.542-1.144c0-0.421-0.421-0.723-0.542-1.084l-0.36-0.602a2.59 2.59 0 0 0 0-0.662 3.432 3.432 0 0 0-0.362-0.663l-0.362-0.602-0.541-0.963-0.542-0.904v-0.36a42.994 42.994 0 0 0-3.071-3.734l-1.145-1.144a6.022 6.022 0 0 0-1.023-0.964l-0.422-0.361-0.722-0.542-0.904-0.663a7.828 7.828 0 0 0-1.083-0.722 33.18 33.18 0 0 0-7.226-3.553h-4.818l-0.602 3.312 0.542-3.312h-13.248a120.432 120.432 0 0 1-117.782-122.54 126.454 126.454 0 0 1 18.968-66.84 2.59 2.59 0 0 1 0-0.421 25.05 25.05 0 0 0 1.385-2.53v-0.541c0.481-0.904 0.843-1.807 1.204-2.71v-0.362l0.963-3.01a30.108 30.108 0 0 0 0.723-3.252v-0.301a33.66 33.66 0 0 0 0.482-6.503v-3.433a30.108 30.108 0 0 0-0.542-3.01v-0.482l-0.723-2.83v-0.482l-0.963-2.83V17a25.592 25.592 0 0 0-1.265-2.65v-0.482a38.298 38.298 0 0 0-1.565-2.65c-0.723-1.083-1.385-1.926-2.048-2.769l-1.987-2.228A509.49 509.49 0 0 0 660.06-119.75a31.794 31.794 0 0 0-9.936-1.566h-3.552a31.433 31.433 0 0 0-4.276 0.783h-0.481l-1.325 0.361-1.084 0.361h-0.542l-0.783 0.301-0.722 0.302h-0.422l-1.024 0.481h-0.36a35.226 35.226 0 0 0-16.079 16.921 115.856 115.856 0 0 1-212.864 0.662v-0.3l-0.422-0.663a36.13 36.13 0 0 0-15.957-16.62l-1.024-0.481-0.662-0.362h-0.602l-3.01-2.408 1.083-3.192-0.843-0.361h-0.723l-1.324-0.422a31.674 31.674 0 0 0-9.515-1.445z m137.654 162.584a184.262 184.262 0 0 0 153.31-83.64A437.591 437.591 0 0 1 799.4 33.258a200.58 200.58 0 0 0 32.397 209.01 183.78 183.78 0 0 0 116.277 62.385 485.885 485.885 0 0 1 0 158.429 183.66 183.66 0 0 0-116.277 62.384 200.58 200.58 0 0 0-32.397 209.01 438.133 438.133 0 0 1-134.703 82.376 182.275 182.275 0 0 0-306.561 0 438.073 438.073 0 0 1-133.138-80.99 200.76 200.76 0 0 0-32.517-211.18 183.419 183.419 0 0 0-117.723-61.841 483.115 483.115 0 0 1 0-158.008 183.419 183.419 0 0 0 117.723-61.842 200.76 200.76 0 0 0 32.517-211.118 437.832 437.832 0 0 1 133.138-80.99 184.382 184.382 0 0 0 153.25 83.7z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhifa" unicode="&#58891;" d="M914.37 610H572.31V835.79a60.21 60.21 0 1 1-120.42 0V610H109.83a60.2 60.2 0 0 1 0-120.4h94.42l-63.7-118a320.78 320.78 0 0 1-15.13-32.71h-0.53l-3.82-10.75c-19.68-55.61-12.42-99.47 22.17-134.12a128.53 128.53 0 0 1 181.52 0c29.72 29.72 39.75 68.34 29.78 112.59h0.19l-0.47 1.63c-0.33 1.37-0.85 2.8-1.21 4.18l-4.28 14.78c-0.13 0.44-0.43 1-0.57 1.4l-3.67 10.29h-0.49a294.4 294.4 0 0 1-16.34 32.9l-63.6 117.8h187.79v-496.64H316.62a60.2 60.2 0 0 1 0-120.4h391a60.2 60.2 0 0 1 0 120.4H572.31V489.59h187.23l-63.71-117.94a323.82 323.82 0 0 1-15.15-32.75h-0.51l-3.82-10.75c-0.3-0.84-0.31-1.56-0.59-2.4l-5.7-19.13h0.94c-10.33-43.85-3-80.21 24.7-109.65 23.21-24.72 56.62-39.2 91.67-39.75h2c34.29 0 67.24 13.37 90.74 36.85 29.65 29.72 39.67 68.33 29.7 112.55h0.23l-6 20.59c-0.2 0.68-0.67 1.5-0.89 2.2l-3.39 9.49h-0.47A299.74 299.74 0 0 1 883 371.8l-63.64 117.79h95a60.2 60.2 0 0 1 0 120.4zM302 216.82a96.22 96.22 0 0 0-135.9 0c-23.16 23.16-29 51.91-18.06 89.8h173.42c10.22-36.47 3.67-66.62-19.46-89.8z m7 122.08H160.09c2.64 5.54 5.65 11.34 8.92 17.58l65.18 120.69 65.39-121.05c2.88-5.04 6.28-11.12 9.42-17.22z m548.29-122c-17.79-17.85-44.91-27.07-69.42-27.4-26.36 0.42-51.41 11.18-68.66 29.59-21.4 22.76-26.56 50.79-15.92 87.57h173.4c10.22-36.51 3.72-66.66-19.4-89.8z m7 122H715.37c2.68 5.67 5.69 11.51 8.91 17.58l65.14 120.65 65.4-121c3.05-5.36 6.4-11.32 9.46-17.23z m50.09 193.67h-385V-50h178.2a17.22 17.22 0 0 0 0-34.44h-391a17.22 17.22 0 0 0 0 34.44h178.29V532.57h-385a17.22 17.22 0 0 0 0 34.44h385V835.79a17.23 17.23 0 1 0 34.46 0V567h385a17.22 17.22 0 0 0 0-34.44z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="chaxun" unicode="&#58892;" d="M558.285-1.792H171.213V766.72h665.6v-468.992c0-17.92 14.336-31.744 31.744-31.744S900.3 280.32 900.3 297.728V766.72c0.512 35.328-28.16 64-63.488 64h-665.6c-35.328 0-64-28.672-64-64v-768c0-35.328 28.672-64 64-64h387.072c17.92 0 31.744 14.336 31.744 31.744s-14.336 31.744-31.744 31.744zM755.917 569.088c0 17.92-14.336 31.744-31.744 31.744h-409.6c-17.92 0-31.744-14.336-31.744-31.744 0-17.92 14.336-31.744 31.744-31.744h409.6c17.92 0 31.744 14.336 31.744 31.744z m-441.344-148.48c-17.92 0-31.744-14.336-31.744-31.744s14.336-31.744 31.744-31.744h219.136c17.92 0 31.744 14.336 31.744 31.744s-14.336 31.744-31.744 31.744H314.573z m591.36-407.04L810.7 93.44c8.192 17.92 12.8 37.376 12.8 57.344 0 76.288-61.952 138.752-138.752 138.752-76.288 0-138.752-61.952-138.752-138.752 0-76.288 61.952-138.752 138.752-138.752 29.184 0 57.856 9.216 81.408 26.624l4.096 4.096 93.696-78.848c13.312-11.264 33.792-9.728 45.056 4.096 11.264 13.824 10.24 34.304-3.072 45.568z m-221.184 58.88c-43.008 0-77.824 34.816-77.824 77.824 0 43.008 34.816 77.824 77.824 77.824 43.008 0 77.824-34.816 77.824-77.824 0.512-42.496-34.816-77.824-77.824-77.824z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhifa1" unicode="&#58893;" d="M924.318 630.373H744.184v158.26A107.491 107.491 0 0 1 636.817 896H394.868a107.491 107.491 0 0 1-107.367-107.367v-158.26H107.367A107.491 107.491 0 0 1 0 523.006v-543.639A107.491 107.491 0 0 1 107.367-128h816.951a107.47 107.47 0 0 1 107.367 107.284V523.006a107.491 107.491 0 0 1-107.367 107.367zM358.36 788.716a36.56 36.56 0 0 0 36.508 36.508v-0.083h241.95a36.56 36.56 0 0 0 36.507-36.508v-158.26H358.36V788.716zM962.351 231.76h-1.566v-252.372a36.56 36.56 0 0 0-36.508-36.508h-816.91a36.56 36.56 0 0 0-36.508 36.508V231.75h-0.353v38.893h0.394V523.09a36.56 36.56 0 0 0 36.508 36.508v-0.083H924.36a36.56 36.56 0 0 0 36.508-36.508v-252.373h1.525v-38.894zM579.7 352.413H451.986a63.734 63.734 0 0 1-63.713-63.66v-18.12h6.223v-38.894h-6.223v-18.119a63.734 63.734 0 0 1 63.66-63.66h127.769a63.723 63.723 0 0 1 63.713 63.619v18.17h-5.083v38.894h5.083v18.11a63.734 63.734 0 0 1-63.713 63.66z m21.646-138.793a21.677 21.677 0 0 0-21.645-21.645H451.985a21.677 21.677 0 0 0-21.646 21.645v75.184a21.677 21.677 0 0 0 21.646 21.646H579.7a21.677 21.677 0 0 0 21.645-21.646v-75.121zM643.362 270.633h-5.04v-38.894h324.03v38.894h-318.99zM394.536 231.74v38.894H70.506v-38.894h324.03z"  horiz-adv-x="1031" />
+
+    
+
+
+  </font>
+</defs></svg>

web/src/assets/img/icon/关 闭.svg

+<?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="1568788031197" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28427" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><defs><style type="text/css"></style></defs><path d="M753.40182882 759.75665253a19.59403977 19.59403977 0 0 1-13.85025679-5.74378297L267.74664771 282.20794526a19.55330372 19.55330372 0 1 1 27.7005136-27.7005136l471.84566037 471.84566036a19.63477582 19.63477582 0 0 1-13.89099286 33.40356051" fill="#434243" p-id="28428"></path><path d="M281.59690452 759.75665253a19.55330372 19.55330372 0 0 1-13.85025681-33.44429657l471.84566036-471.80492431a19.59403977 19.59403977 0 0 1 27.65977756 27.70051361L295.44716131 754.01286957a19.55330372 19.55330372 0 0 1-13.8502568 5.74378296" fill="#434243" p-id="28429"></path></svg>
\ No newline at end of file

web/src/assets/img/icon/审核.svg

+<?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="1568787979891" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25564" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><defs><style type="text/css"></style></defs><path d="M511.147576 1024c-156.50093 0-447.366145-228.522246-447.366145-444.586195V149.448092l42.214067-0.617767a662.349002 662.349002 0 0 0 204.892665-42.111105A937.409683 937.409683 0 0 0 486.436903 17.709316h0.514806a75.367553 75.367553 0 0 1 24.710673-17.709316 66.04957 66.04957 0 0 1 25.225479 17.657835l0.514806 0.308884a904.56508 904.56508 0 0 0 175.54874 89.009904 662.349002 662.349002 0 0 0 204.892665 42.111105l41.699261 0.617767v429.965713c0 215.806546-291.894827 444.328792-448.395757 444.328792z m0-947.242471a1203.873108 1203.873108 0 0 1-176.063546 85.766628 812.929667 812.929667 0 0 1-202.318636 47.928409l-2.574029 0.308884v372.153034c0 178.843497 271.302599 383.684682 382.500629 383.684681s381.985823-204.841184 381.985822-383.684681V210.452566h-3.088834a825.387964 825.387964 0 0 1-201.803831-47.928409 1120.989392 1120.989392 0 0 1-176.063546-85.715148l-1.029611-0.92665zM260.437205 408.395355V302.963149h217.762807L476.140789 298.896184a213.592881 213.592881 0 0 0-13.384947-28.262832l58.173043-9.266503c3.60364 10.296114 8.751697 24.298829 12.870142 39.485597l0.514806 2.110703h220.851641V405.306521h-53.024986V350.016389H314.491803V408.395355H260.437205z m223.940476 371.380825v-110.013976H367.001983v29.189483H312.947385V423.273239h171.430296v-45.560304h55.084208v45.611785h172.974713v273.876627h-54.054598v-27.387662H539.461889v109.653612H484.377681z m55.084208-157.221658h118.920115v-52.613141H539.461889v52.613141z m-172.459906 0h117.375698v-52.613141H367.001983v52.613141z m172.459906-97.813081h118.920115V470.583882H539.461889v53.900156z m-172.459906 0h117.375698V470.583882H367.001983v53.900156z" p-id="25565"></path></svg>
\ No newline at end of file

web/src/assets/img/icon/已处理 .svg

+<?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="1568788011511" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27069" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><defs><style type="text/css"></style></defs><path d="M248.32 93.696H157.696c-49.664 0-89.6 39.936-89.6 89.6v716.8c0 49.664 39.936 89.6 89.6 89.6h315.392v-59.904H157.696c-16.384 0-29.696-13.312-29.696-29.696v-716.8c0-16.384 13.312-29.696 29.696-29.696h90.624V93.696zM660.48 153.6V93.696h94.72c49.664 0 89.6 39.936 89.6 89.6v295.424h-59.904V183.296c0-16.384-13.312-29.696-29.696-29.696H660.48zM367.104 93.696h180.224V153.6H367.104V93.696zM307.2 34.304c19.968 0 29.696 9.728 29.696 29.696v119.296c0 19.968-9.728 29.696-29.696 29.696s-29.696-9.728-29.696-29.696V64c0-19.968 9.728-29.696 29.696-29.696zM605.696 34.304c19.968 0 29.696 9.728 29.696 29.696v119.296c0 19.968-9.728 29.696-29.696 29.696s-29.696-9.728-29.696-29.696V64c0-19.968 9.728-29.696 29.696-29.696z" p-id="27070"></path><path d="M217.6 303.104H665.6c19.968 0 29.696 9.728 29.696 29.696s-9.728 29.696-29.696 29.696H217.6c-19.968 0-29.696-9.728-29.696-29.696s9.728-29.696 29.696-29.696zM217.6 452.096h328.704c19.968 0 29.696 9.728 29.696 29.696s-9.728 29.696-29.696 29.696H217.6c-19.968 0-29.696-9.728-29.696-29.696 0-19.456 9.728-29.696 29.696-29.696zM217.6 601.6h179.2c19.968 0 29.696 9.728 29.696 29.696s-9.728 29.696-29.696 29.696h-179.2c-19.968 0-29.696-9.728-29.696-29.696s9.728-29.696 29.696-29.696zM695.296 921.6c94.208 0 170.496-76.288 170.496-170.496s-76.288-170.496-170.496-170.496-170.496 76.288-170.496 170.496 76.288 170.496 170.496 170.496z m0 68.096c-132.096 0-239.104-107.008-239.104-239.104s107.008-239.104 239.104-239.104 239.104 107.008 239.104 239.104-107.008 239.104-239.104 239.104z" p-id="27071"></path><path d="M819.2 676.352c-10.24-10.24-26.112-9.728-35.84 0l-121.344 122.88-65.536-62.976c-9.728-9.216-25.088-8.704-34.304 0.512l-1.536 1.536c-9.216 9.728-8.704 25.088 0.512 34.304l84.48 80.896c6.144 5.632 14.336 7.68 22.016 6.144 5.12-1.024 9.728-3.072 13.312-7.168l138.752-140.288c9.216-9.728 9.216-26.112-0.512-35.84z" p-id="27072"></path></svg>
\ No newline at end of file

web/src/assets/img/icon/待处理.svg

+<?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="1568787997980" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26322" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><defs><style type="text/css"></style></defs><path d="M191.6 209.3h153.2v57.4h334.4v-57.4h153.2v252.5h46.4v-299H679.2V99.5H344.8v63.3H145.1v761.6h277.6V878H191.6V209.3zM391.3 146h241.5v74.3H391.3V146zM303 524.8h139.3v46.4H303v-46.4z m418-93.5H303v-46.4h418v46.4z m-57 65.9c-118 0-213.6 95.7-213.6 213.6 0 118 95.7 213.6 213.6 213.6 118 0 213.6-95.7 213.6-213.6 0.1-117.9-95.6-213.6-213.6-213.6z m118.3 331.9C750.7 860.7 708.7 878 664 878s-86.7-17.4-118.2-48.9c-31.6-31.6-48.9-73.6-48.9-118.2 0-44.7 17.4-86.6 48.9-118.2 23.1-23.1 51.7-38.5 82.9-45.2v201.4h146.7v-46.4H675.2V544c40.5 2.6 78.1 19.7 107.1 48.6 31.6 31.6 48.9 73.6 48.9 118.2 0 44.7-17.4 86.7-48.9 118.3z m0 0" p-id="26323"></path></svg>
\ No newline at end of file

web/src/assets/img/icon/执法 (1).svg

+<?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="1568787775350" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17372" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><defs><style type="text/css"></style></defs><path d="M914.37 286H572.31V60.21a60.21 60.21 0 1 0-120.42 0V286H109.83a60.2 60.2 0 0 0 0 120.4h94.42l-63.7 118a320.78 320.78 0 0 0-15.13 32.71h-0.53l-3.82 10.75c-19.68 55.61-12.42 99.47 22.17 134.12a128.53 128.53 0 0 0 181.52 0c29.72-29.72 39.75-68.34 29.78-112.59h0.19l-0.47-1.63c-0.33-1.37-0.85-2.8-1.21-4.18l-4.28-14.78c-0.13-0.44-0.43-1-0.57-1.4l-3.67-10.29h-0.49a294.4 294.4 0 0 0-16.34-32.9l-63.6-117.8h187.79v496.64H316.62a60.2 60.2 0 0 0 0 120.4h391a60.2 60.2 0 0 0 0-120.4H572.31V406.41h187.23l-63.71 117.94a323.82 323.82 0 0 0-15.15 32.75h-0.51l-3.82 10.75c-0.3 0.84-0.31 1.56-0.59 2.4l-5.7 19.13h0.94c-10.33 43.85-3 80.21 24.7 109.65 23.21 24.72 56.62 39.2 91.67 39.75h2c34.29 0 67.24-13.37 90.74-36.85 29.65-29.72 39.67-68.33 29.7-112.55h0.23l-6-20.59c-0.2-0.68-0.67-1.5-0.89-2.2l-3.39-9.49h-0.47A299.74 299.74 0 0 0 883 524.2l-63.64-117.79h95a60.2 60.2 0 0 0 0-120.4zM302 679.18a96.22 96.22 0 0 1-135.9 0c-23.16-23.16-29-51.91-18.06-89.8h173.42c10.22 36.47 3.67 66.62-19.46 89.8z m7-122.08H160.09c2.64-5.54 5.65-11.34 8.92-17.58l65.18-120.69 65.39 121.05c2.88 5.04 6.28 11.12 9.42 17.22z m548.29 122c-17.79 17.85-44.91 27.07-69.42 27.4-26.36-0.42-51.41-11.18-68.66-29.59-21.4-22.76-26.56-50.79-15.92-87.57h173.4c10.22 36.51 3.72 66.66-19.4 89.8z m7-122H715.37c2.68-5.67 5.69-11.51 8.91-17.58l65.14-120.65 65.4 121c3.05 5.36 6.4 11.32 9.46 17.23z m50.09-193.67h-385V946h178.2a17.22 17.22 0 0 1 0 34.44h-391a17.22 17.22 0 0 1 0-34.44h178.29V363.43h-385a17.22 17.22 0 0 1 0-34.44h385V60.21a17.23 17.23 0 1 1 34.46 0V329h385a17.22 17.22 0 0 1 0 34.44z" fill="#666666" p-id="17373"></path></svg>
\ No newline at end of file

web/src/assets/img/icon/执法.svg

+<?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="1568787760741" class="icon" viewBox="0 0 1031 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16591" xmlns:xlink="http://www.w3.org/1999/xlink" width="80.546875" height="80"><defs><style type="text/css"></style></defs><path d="M924.318401 265.627452H744.184177V107.366967A107.491426 107.491426 0 0 0 636.81721 0H394.868157A107.491426 107.491426 0 0 0 287.50119 107.366967v158.260485H107.366967A107.491426 107.491426 0 0 0 0 372.994419v543.638614a107.491426 107.491426 0 0 0 107.366967 107.366967H924.318401a107.470683 107.470683 0 0 0 107.366966-107.283994V372.994419A107.491426 107.491426 0 0 0 924.318401 265.627452zM358.360069 107.283994a36.559946 36.559946 0 0 1 36.508088-36.508088v0.082973H636.81721a36.559946 36.559946 0 0 1 36.508088 36.508088v158.260485H358.360069V107.283994z m603.991047 556.955769h-1.566114v252.372527a36.559946 36.559946 0 0 1-36.508088 36.508088H107.366967a36.559946 36.559946 0 0 1-36.508088-36.508088V664.250134h-0.352635v-38.893559h0.394122v-252.445129a36.559946 36.559946 0 0 1 36.508087-36.508087v0.082973h816.951434a36.559946 36.559946 0 0 1 36.508088 36.508087v252.372528h1.524627v38.893559z" fill="#3688FF" p-id="16592"></path><path d="M579.700722 543.586756H451.984645a63.733579 63.733579 0 0 0-63.712836 63.660978v18.119213h6.22297v38.893559h-6.22297v18.119213a63.733579 63.733579 0 0 0 63.660978 63.660977h127.767935a63.723208 63.723208 0 0 0 63.712836-63.619491v-18.171071h-5.082092v-38.893559h5.082092v-18.108841a63.733579 63.733579 0 0 0-63.712836-63.660978z m21.645562 138.792963a21.676677 21.676677 0 0 1-21.645562 21.645562H451.984645a21.676677 21.676677 0 0 1-21.645562-21.645562v-75.183843a21.676677 21.676677 0 0 1 21.645562-21.645563h127.716077a21.676677 21.676677 0 0 1 21.645562 21.645563v75.121613z" fill="#3688FF" p-id="16593"></path><path d="M643.3617 625.366947h-5.040605v38.893559h324.030021v-38.893559H643.3617zM394.536265 664.260506v-38.893559H70.506244v38.893559H394.536265z" fill="#3688FF" p-id="16594"></path></svg>
\ No newline at end of file

web/src/assets/img/icon/查询.svg

+<?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="1568787814131" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18101" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><defs><style type="text/css"></style></defs><path d="M558.2848 897.792h-387.072V129.28h665.6v468.992c0 17.92 14.336 31.744 31.744 31.744 17.408 0 31.744-14.336 31.744-31.744v-468.992c0.512-35.328-28.16-64-63.488-64h-665.6c-35.328 0-64 28.672-64 64v768c0 35.328 28.672 64 64 64h387.072c17.92 0 31.744-14.336 31.744-31.744 0-17.408-14.336-31.744-31.744-31.744z" p-id="18102"></path><path d="M755.9168 326.912c0-17.92-14.336-31.744-31.744-31.744h-409.6c-17.92 0-31.744 14.336-31.744 31.744 0 17.92 14.336 31.744 31.744 31.744h409.6c17.92 0 31.744-14.336 31.744-31.744zM314.5728 475.392c-17.92 0-31.744 14.336-31.744 31.744 0 17.408 14.336 31.744 31.744 31.744h219.136c17.92 0 31.744-14.336 31.744-31.744 0-17.408-14.336-31.744-31.744-31.744h-219.136zM905.9328 882.432l-95.232-79.872c8.192-17.92 12.8-37.376 12.8-57.344 0-76.288-61.952-138.752-138.752-138.752-76.288 0-138.752 61.952-138.752 138.752 0 76.288 61.952 138.752 138.752 138.752 29.184 0 57.856-9.216 81.408-26.624l4.096-4.096 93.696 78.848c13.312 11.264 33.792 9.728 45.056-4.096 11.264-13.824 10.24-34.304-3.072-45.568z m-221.184-58.88c-43.008 0-77.824-34.816-77.824-77.824 0-43.008 34.816-77.824 77.824-77.824 43.008 0 77.824 34.816 77.824 77.824 0.512 42.496-34.816 77.824-77.824 77.824z" p-id="18103"></path></svg>
\ No newline at end of file

web/src/assets/img/icon/汽车.svg

+<?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="1568787834823" class="icon" viewBox="0 0 1282 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18933" xmlns:xlink="http://www.w3.org/1999/xlink" width="100.15625" height="80"><defs><style type="text/css"></style></defs><path d="M1236.628095 409.23114a263.208634 263.208634 0 0 0-80.987272-59.206604L1083.24311 150.317285c-19.019738-61.353994-75.158643-150.317285-175.472422-150.317285H374.29771c-100.31378 0-156.452685 88.042981-175.472423 150.317285l-72.397713 199.707251a263.208634 263.208634 0 0 0-80.987272 59.206604 193.878621 193.878621 0 0 0-45.095185 122.707988v206.762959a49.389965 49.389965 0 0 0 33.744697 52.764435V920.30991a102.1544 102.1544 0 0 0 102.154399 102.46117h70.863864A102.1544 102.1544 0 0 0 308.955707 920.30991v-57.979525s214.738979 18.406198 331.311567 18.406198 331.311567-18.406198 331.311567-18.406198V920.30991A102.1544 102.1544 0 0 0 1074.040011 1023.998159h71.170633A102.1544 102.1544 0 0 0 1247.978584 920.30991v-128.843388a49.389965 49.389965 0 0 0 33.744697-53.071205v-206.762959a193.878621 193.878621 0 0 0-45.095186-122.401218zM248.215252 168.109943C261.713131 122.707988 303.127077 61.353994 372.15032 61.353994h537.767757c69.023243 0 110.130419 61.353994 122.707988 106.14241l66.875854 180.073972h-920.30991zM215.084096 968.472795H129.188504a39.880096 39.880096 0 0 1-40.186866-40.493636v-117.186129c8.282789 2.76093 165.655784 39.880096 165.655784 39.880096v76.999263A40.493636 40.493636 0 0 1 215.084096 968.472795z m978.596204-40.493636a39.880096 39.880096 0 0 1-40.186866 40.493636h-85.895592a40.493636 40.493636 0 0 1-40.186866-40.800406v-76.999263s157.372995-37.119166 165.655784-39.880096zM1227.424996 736.247928s-198.173401 81.907582-586.850952 81.907582S54.336632 736.247928 54.336632 736.247928v-205.22911c0-37.732706 43.561336-122.707988 118.106438-122.707988h937.182258c74.545103 0 118.413208 86.202362 118.106438 122.707988C1227.424996 557.707805 1227.424996 736.247928 1227.424996 736.247928z" p-id="18934"></path><path d="M301.593227 600.348831m-63.808153 0a63.808154 63.808154 0 1 0 127.616307 0 63.808154 63.808154 0 1 0-127.616307 0Z" p-id="18935"></path><path d="M980.475171 600.348831m-63.808154 0a63.808154 63.808154 0 1 0 127.616307 0 63.808154 63.808154 0 1 0-127.616307 0Z" p-id="18936"></path></svg>
\ No newline at end of file

web/src/assets/img/icon/监管.svg

+<?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="1568787683450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9348" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><defs><style type="text/css"></style></defs><path d="M172.503 946.611v-51.087H362.78v-79.106c0-8.84 7.193-16.033 16.03-16.033h266.38c8.846 0 16.039 7.193 16.039 16.033v79.106H851.48v51.087H172.503z m-41.048-228.313c-29.825 0-54.085-24.259-54.085-54.085V131.457c0-29.815 24.264-54.07 54.085-54.07h761.094c29.82 0 54.08 24.254 54.08 54.07v532.756c0 29.825-24.26 54.085-54.08 54.085H131.455z m19.03-589.854c-12.14 0-22.012 9.88-22.012 22.019v494.689c0 12.14 9.873 22.012 22.012 22.012H873.52c12.14 0 22.017-9.873 22.017-22.012V150.464c0-12.14-9.878-22.019-22.017-22.019H150.485z m0 0" fill="" p-id="9349"></path><path d="M513.294 505.826c-51.49 0-97.627-31.92-127.26-58.7-28.012-25.307-47.074-51.087-51.618-57.454 3.628-6.513 18.376-31.534 44.133-57.053 26.943-26.692 71.332-58.508 129.795-58.508 58.507 0 104.9 31.574 133.523 58.06 26.784 24.788 43.557 50.086 47.673 56.593-4.495 6.54-22.985 32.466-50.313 57.873-29.04 27.001-74.467 59.19-125.933 59.19z m-1.289-205.691c-49.536 0-89.839 40.303-89.839 89.839s40.303 89.834 89.84 89.834c49.53 0 89.828-40.298 89.828-89.834s-40.298-89.84-89.829-89.84z m0.262 141.512c-6.77 0-13.661-1.37-19.922-3.96a52.541 52.541 0 0 1-16.885-11.282 52.425 52.425 0 0 1-11.283-16.891c-2.191-5.289-3.53-11.132-3.874-16.905l-0.302-5.012a52.582 52.582 0 0 1 3.909-17.545c2.599-6.262 6.498-12.105 11.288-16.885a52.41 52.41 0 0 1 16.885-11.29 52.514 52.514 0 0 1 19.922-3.959c6.775 0 13.661 1.37 19.917 3.96a52.514 52.514 0 0 1 16.885 11.289 52.375 52.375 0 0 1 11.283 16.885c2.191 5.289 3.53 11.133 3.875 16.905l0.296 4.987a52.517 52.517 0 0 1-3.909 17.565c-2.584 6.256-6.488 12.094-11.283 16.896a52.518 52.518 0 0 1-16.885 11.283 52.605 52.605 0 0 1-19.917 3.959z m0 0" fill="" p-id="9350"></path></svg>
\ No newline at end of file

web/src/assets/img/icon/系统.svg

+<?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="1568787851610" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19690" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><defs><style type="text/css"></style></defs><path d="M507.351709 718.583244a213.767643 213.767643 0 1 1 205.216937-213.586995 209.733155 209.733155 0 0 1-205.216937 213.586995z m0-355.697315a142.230753 142.230753 0 1 0 136.570426 142.11032 139.521022 139.521022 0 0 0-136.570426-142.11032zM373.731878 1024h-1.324757a31.252227 31.252227 0 0 1-8.49049-1.505406h-0.903244a509.369153 509.369153 0 0 1-204.373909-124.045449l-0.541947-0.541946a29.44574 29.44574 0 0 1-2.228-2.468866 26.796226 26.796226 0 0 1-1.987136-2.709731l-1.565622-2.589298v-0.421514a23.062819 23.062819 0 0 1-1.264541-2.649514v-0.541946l-0.903244-2.649515v-0.662378c0-0.903244-0.48173-1.806487-0.662379-2.709731v-0.541946c0-0.96346-0.361297-1.987136-0.481729-2.950596v-1.384973a25.652117 25.652117 0 0 1 0-3.010812 29.746821 29.746821 0 0 1 0-3.311893 41.007258 41.007258 0 0 1 1.023676-6.623786c0-1.023676 0.602162-2.047352 0.963459-3.010812l1.204325-2.950596v-0.48173l1.384974-2.649514v-0.96346a125.731504 125.731504 0 0 0 19.630493-67.803483 120.432475 120.432475 0 0 0-117.78296-122.540043H42.241491v-3.37211l-0.421514 3.37211H36.219867l-1.023676-0.361298H34.774677l-1.023676-0.48173-0.782811-0.361297-0.843027-0.361298-0.602163-0.361297-0.782811-0.421514-0.602162-0.361297-0.782811-0.48173-0.541946-0.301081-0.843028-0.541946-0.602162-0.48173-0.662379-0.48173-0.782811-0.602162-0.541946-0.48173-0.722595-0.662379-0.48173-0.421514-0.782811-0.722594-0.421513-0.48173-0.782811-0.843028-0.361298-0.421513-0.782811-0.903244 2.348433-2.348433-2.408649 2.167784-0.722595-0.903243v-0.421514a8.129192 8.129192 0 0 1-0.662379-0.903243l-0.361297-0.541947-0.602162-0.843027-1.625839-3.311893-0.361297-0.662379-0.421514-0.782811v-0.662378l-0.48173-1.023676v-0.541946l-0.48173-1.023676v-0.48173l-0.48173-1.324758v-0.602162l-0.48173-1.44519-0.361297-1.384973a0.722595 0.722595 0 0 0 0-0.361298v-0.722594a557.481926 557.481926 0 0 1 0-242.490789v-0.903243l0.361297-1.44519v-0.301081a13.548653 13.548653 0 0 1 0.421514-1.384974l0.541946-1.445189a4.937731 4.937731 0 0 1 0.541946-1.204325 1.92692 1.92692 0 0 1 0-0.48173l0.541946-1.083892v-0.602162l0.361298-0.722595 0.421514-0.722595 0.361297-0.662379 0.602162-0.843027 0.361298-0.602163 0.602162-0.903243 0.361298-0.48173 0.722594-0.903244V376.073285l0.782812-0.903244 0.481729-0.541946 0.662379-0.662378 0.361297-0.421514 0.602163-0.541946 0.421514-0.421514 0.662378-0.602162 0.602162-0.48173 0.541947-0.48173 0.903243-0.662379 0.421514-0.361297 0.843027-0.602162h0.541946l0.96346-0.602163h0.361298l1.144108-0.602162 1.204325-0.541946 1.204325-0.541946h0.421513l1.144109-0.421514h0.48173l1.083892-0.361297h17.884222a120.432475 120.432475 0 0 0 117.782961-122.540044A125.370206 125.370206 0 0 0 151.955475 175.914512v-0.48173l-0.361297-0.541946c-0.48173-0.843027-1.023676-1.746271-1.44519-2.649515v-0.361297a32.938282 32.938282 0 0 1-2.288217-6.021624c0-0.96346-0.421514-1.92692-0.602162-2.890379v-4.576434c0-1.083892 0-2.167785-0.421514-3.311893v-3.251677a29.566173 29.566173 0 0 1 0.782811-6.503354v-0.843027c0-0.903244 0.421514-1.806487 0.722595-2.709731v-0.602162c0-1.023676 0.662379-1.806487 0.96346-2.649515v-0.602162a27.639253 27.639253 0 0 1 1.264541-2.649515v-0.421513l1.625838-2.589298a28.301632 28.301632 0 0 1 1.987136-2.709731 45.583692 45.583692 0 0 1 2.288217-2.529082l0.662379-0.602162A510.091747 510.091747 0 0 1 362.351009 2.190667h0.421514A34.684553 34.684553 0 0 1 372.407121 0.323963h1.384973a32.697417 32.697417 0 0 1 10.116328 1.565623l0.96346 0.361297h0.361297l1.023676 0.421514h0.96346l1.144108 0.541946a34.744769 34.744769 0 0 1 16.077736 16.740114l0.48173 0.662378v0.361298a115.856041 115.856041 0 0 0 212.804183-0.602163 35.768445 35.768445 0 0 1 14.873411-16.3186l0.722594-0.421514 0.722595-0.361297 0.903244-0.421514 0.722595-0.301081h0.541946l0.843027-0.361297h0.782811a32.516768 32.516768 0 0 1 21.015467-0.602163h0.421514a510.21218 510.21218 0 0 1 205.999748 125.249774h1.92692v1.987136l1.384973 1.565622 0.361298 0.421514c0.602162 0.722595 1.144109 1.565622 1.686054 2.348433l1.565622 2.709731v0.361297a23.725198 23.725198 0 0 1 1.264541 2.709731v0.421514a20.473521 20.473521 0 0 1 1.023676 2.830163v0.361297c0 1.083892 0.602162 2.047352 0.782811 3.010812a1.083892 1.083892 0 0 1 0 0.421514 27.097307 27.097307 0 0 1 0.541947 3.131244 34.985634 34.985634 0 0 1-0.843028 13.006707v0.421514a25.230603 25.230603 0 0 1-0.96346 2.950596 39.923365 39.923365 0 0 1-1.204324 2.830163v0.541946l-1.384974 2.529082v0.541946a125.430423 125.430423 0 0 0-19.028331 66.90024 120.432475 120.432475 0 0 0 117.782961 122.540043h6.443137a36.49104 36.49104 0 0 1 3.673191 0 8.972219 8.972219 0 0 1 1.806487 0h5.419461l1.144109 0.421514 1.204324 0.541946 1.264541 0.602162h0.361298l1.625838 4.094704 1.204325 0.662379h0.421514l0.903243 0.602162 0.782811 0.541947 0.48173 0.361297 1.083892 0.843027a36.129742 36.129742 0 0 1 6.503354 7.466814 4.757083 4.757083 0 0 0 0.421514 0.722595l0.48173 0.782811 0.602162 1.083892v0.541946a2.709731 2.709731 0 0 1 0 0.602162l0.541946 1.083893 0.541946 1.324757a48.17299 48.17299 0 0 1 1.505406 5.058164 557.241061 557.241061 0 0 1 0 243.875762 37.876013 37.876013 0 0 1-1.505406 5.11838l-0.541946 1.144108c0 0.421514-0.421514 0.722595-0.541946 1.083893l-0.361297 0.602162a2.589298 2.589298 0 0 1 0 0.662379 3.432326 3.432326 0 0 1-0.361298 0.662378l-0.361297 0.602163-0.541946 0.963459-0.541947 0.903244v0.361297a42.994394 42.994394 0 0 1-3.071028 3.733407l-1.144108 1.144109a6.021624 6.021624 0 0 1-1.023676 0.963459l-0.421514 0.361298-0.722595 0.541946-0.903243 0.662379a7.828111 7.828111 0 0 1-1.083893 0.722594 33.179147 33.179147 0 0 1-7.225948 3.552758h-4.817299l-0.602162-3.311893 0.541946 3.311893H970.113493a120.432475 120.432475 0 0 0-117.78296 122.540044 126.454099 126.454099 0 0 0 18.968115 66.840023 2.589298 2.589298 0 0 0 0 0.421514 25.049955 25.049955 0 0 1 1.384973 2.529082v0.541946c0.48173 0.903244 0.843027 1.806487 1.204325 2.709731v0.361297l0.96346 3.010812a30.108119 30.108119 0 0 1 0.722595 3.251677v0.301081a33.660877 33.660877 0 0 1 0.48173 6.503354v3.432325a30.108119 30.108119 0 0 1-0.541947 3.010812v0.48173l-0.722594 2.830163v0.48173l-0.96346 2.830163v0.541946a25.591901 25.591901 0 0 1-1.264541 2.649515v0.48173a38.297527 38.297527 0 0 1-1.565622 2.649514c-0.722595 1.083892-1.384973 1.92692-2.047352 2.769947l-1.987136 2.228001a509.489585 509.489585 0 0 1-206.902992 125.972368 31.794173 31.794173 0 0 1-9.935679 1.565623H646.57165a31.432876 31.432876 0 0 1-4.275353-0.782811h-0.48173l-1.324757-0.361298-1.083893-0.361297h-0.541946l-0.782811-0.301081-0.722595-0.301082h-0.421513l-1.023676-0.48173h-0.361298a35.226499 35.226499 0 0 1-16.077735-16.920762 115.856041 115.856041 0 0 0-212.8644-0.662379v0.301081l-0.421513 0.662379a36.129742 36.129742 0 0 1-15.957303 16.619681l-1.023676 0.48173-0.662379 0.361298h-0.602162l-3.010812 2.408649 1.083892 3.191461-0.843027 0.361297h-0.722595l-1.324757 0.421514a31.673741 31.673741 0 0 1-9.514166 1.44519z m137.654319-162.583841a184.261687 184.261687 0 0 1 153.31054 83.640354 437.591398 437.591398 0 0 0 134.703723-82.315597 200.580287 200.580287 0 0 1 32.396336-209.01056 183.779957 183.779957 0 0 1 116.277555-62.384022 485.88482 485.88482 0 0 0 0-158.428921 183.659524 183.659524 0 0 1-116.277555-62.384022 200.580287 200.580287 0 0 1-32.396336-209.01056 438.133344 438.133344 0 0 0-134.703723-82.375813 182.274551 182.274551 0 0 1-306.560865 0 438.073127 438.073127 0 0 0-133.138101 80.99084 200.760936 200.760936 0 0 1-32.516768 211.178344 183.418659 183.418659 0 0 1-117.722744 61.842076 483.114873 483.114873 0 0 0 0 158.007407 183.418659 183.418659 0 0 1 117.722744 61.842076 200.760936 200.760936 0 0 1 32.516768 211.118129 437.832262 437.832262 0 0 0 133.138101 80.990839 184.382119 184.382119 0 0 1 153.250325-83.70057z" p-id="19691"></path></svg>
\ No newline at end of file

web/src/assets/img/icon/运行.svg

+<?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="1568787966199" class="icon" viewBox="0 0 1149 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24829" xmlns:xlink="http://www.w3.org/1999/xlink" width="89.765625" height="80"><defs><style type="text/css"></style></defs><path d="M1001.950836 0H147.11537a147.04928 147.04928 0 0 0-147.04928 146.586653v558.192458a147.04928 147.04928 0 0 0 147.04928 146.057937h393.39813v105.098929H306.275562a34.036125 34.036125 0 1 0 0 68.055729H842.807166a34.036125 34.036125 0 0 0 0-68.055729H608.569228v-105.098929h393.381608a147.148414 147.148414 0 0 0 147.148415-147.148415V147.148414A147.148414 147.148414 0 0 0 1001.950836 0z m80.084029 702.680768a80.067507 80.067507 0 0 1-80.067506 80.084029H147.11537a80.084029 80.084029 0 0 1-80.067507-80.084029v-4.956718h1014.987002z m0-72.07067H67.047863V147.148414a80.067507 80.067507 0 0 1 80.067507-80.084029h854.835466a80.150119 80.150119 0 0 1 56.060473 24.023557l1.999209 1.007866a80.133596 80.133596 0 0 1 22.024347 55.052606z" fill="" p-id="24830"></path><path d="M975.052384 372.018156H773.677482a21.479108 21.479108 0 0 0-17.365033 8.839479l-39.653739 54.606503-34.06917-101.877063a21.479108 21.479108 0 0 0-41.305977 2.197478l-25.940154 118.085528-14.704928-67.411355-44.230441-235.278848a21.479108 21.479108 0 0 0-41.619903-2.445314l-68.931415 220.441741H179.069674a21.479108 21.479108 0 0 0 0 42.958217h282.532886a21.479108 21.479108 0 0 0 20.504288-15.068421l47.914933-153.344311 28.368946 150.898997c0 0.198269 0.082612 0.396537 0.132179 0.594806l35.58923 163.786462a21.479108 21.479108 0 0 0 20.966914 16.918929 21.479108 21.479108 0 0 0 20.983437-16.869361l30.33511-138.110667 22.602631 67.741803a21.479108 21.479108 0 0 0 37.737141 5.832404l57.828369-79.472701h190.486646a21.479108 21.479108 0 0 0 0-42.958216z" fill="" p-id="24831"></path></svg>
\ No newline at end of file

web/src/assets/img/icon/退出.svg

+<?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="1568787933761" class="icon" viewBox="0 0 1033 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22862" xmlns:xlink="http://www.w3.org/1999/xlink" width="80.703125" height="80"><defs><style type="text/css"></style></defs><path d="M682.964021 1024H113.202892C45.762871 1024 0 978.237129 0 910.886314V113.202892C0 45.762871 45.762871 0 113.202892 0h569.761129c22.480007 0 40.678108 8.920638 40.678108 31.75747s-17.841275 31.75747-40.678108 31.75747H113.202892c-22.480007 0-49.687952 27.207945-49.687952 49.687952v797.683422c0 22.480007 27.207945 49.598746 49.687952 49.598746h569.761129c22.480007 0 40.678108 8.920638 40.678108 31.75747s-17.841275 31.75747-40.678108 31.75747zM788.762784 756.202457A40.678108 40.678108 0 0 1 759.949124 686.889102L963.42887 483.230943a40.767314 40.767314 0 0 1 57.62732 57.62732L817.576444 744.338009a41.034933 41.034933 0 0 1-28.81366 11.864448z" p-id="22863"></path><path d="M991.082847 544.604931a42.016204 42.016204 0 0 1-29.616517-12.221274L752.18817 323.016291A41.837791 41.837791 0 1 1 811.778029 263.872463L1020.699364 472.793797a41.926997 41.926997 0 0 1-29.616517 71.365102z" p-id="22864"></path><path d="M959.682202 544.604931H389.921073c-22.480007 0-40.678108-14.629846-40.678108-32.560328s17.841275-32.560328 40.678108-32.560327h569.761129c22.480007 0 40.767314 14.540639 40.767315 32.560327s-18.287307 32.560328-40.767315 32.560328z" p-id="22865"></path></svg>
\ No newline at end of file

web/src/assets/img/icon/首页.svg

+<?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="1568787664765" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8612" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><defs><style type="text/css"></style></defs><path d="M999.576 546.508a17.934 17.934 0 0 1-12.552-5.102L513.876 80.876 40.726 541.406c-7.122 6.936-18.518 6.78-25.454-0.344s-6.78-18.52 0.344-25.454L501.32 42.858a18 18 0 0 1 25.11 0l485.704 472.752a18 18 0 0 1-12.558 30.898z" fill="" p-id="8613"></path><path d="M729.744 978.246H298.006c-51.794 0-80.252-5.5-98.228-18.982-21.584-16.188-23.39-40.384-23.39-63.782V541.458c0-9.942 8.058-18 18-18s18 8.058 18 18v354.026c0 21.376 2.184 29.876 8.99 34.982 10.57 7.928 35.634 11.782 76.626 11.782h431.738c40.992 0 66.056-3.854 76.626-11.782 6.806-5.104 8.99-13.606 8.99-34.982V541.458c0-9.942 8.058-18 18-18s18 8.058 18 18v354.026c0 23.396-1.806 47.594-23.388 63.782-17.974 13.48-46.432 18.98-98.226 18.98z" fill="" p-id="8614"></path></svg>
\ No newline at end of file

web/src/main.js

+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import axios from './util/http'
+import store from './store/index.js'
+import * as API from './util/api'
+import { faceapi } from './util/initApi'
+import './util/permission'
+import './util/vproto'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import 'babel-polyfill'
+import './util/permission'
+import '../src/assets/css/public.css'
+import selecttree from './views/public/selecttree'
+import './assets/icon/iconfont.css'
+//---图片放大
+import VuePhotoZoomPro from 'vue-photo-zoom-pro'
+//---视频播放
+import VideoPlayer from 'vue-video-player'
+import { Loading } from 'element-ui'
+import echarts from 'echarts'
+
+require('video.js/dist/video-js.css')
+require('vue-video-player/src/custom-theme.css')
+Vue.use(VideoPlayer)
+//---视频播放end
+Vue.config.productionTip = false
+Vue.prototype.axios = axios;
+Vue.prototype.API = API;
+Vue.use(ElementUI);
+Vue.use(selecttree);
+//--图片放大
+Vue.use(VuePhotoZoomPro)
+Vue.use(Loading)
+Vue.prototype.loading = Loading;
+Vue.prototype.$echarts = echarts;
+Vue.prototype.faceapi = faceapi;
+
+let vue = new Vue({
+  el: '#app',
+  router,
+  store,
+  components: { App },
+  template: '<App/>'
+})
+

web/src/router/index.js

+import Vue from 'vue'
+import Router from 'vue-router'
+Vue.use(Router)
+
+/**
+ * 公共路由
+ */
+export const constantRouterMap = [{
+    path: '/',
+    name: 'login',
+    component: reslove => require(['@/views/login/login'], reslove),
+  },
+  {
+    path: '/show',
+    name: '首页',
+    redirect: "/display",
+    component: reslove => require(['@/views/layout'], reslove),
+    meta: {
+      icon: 'gy-icon-shouye'
+    },
+    children: [{
+      path: '/display',
+      name: '首页',
+      component: reslove => require(['@/views/Home/show'], reslove),
+    }]
+  },
+
+  // {
+  //   path: '/home',
+  //   name: '首页',
+  //   component: reslove => require(['@/views/layout'], reslove),
+  //   children: [{
+  //     path: '/show',
+  //     name: '首页',
+  //     component: reslove => require(['@/views/home/show'], reslove),
+  //   }]
+  // },
+
+  {
+    path: '/illaudit',
+    name: '违法审核',
+    component: reslove => require(['@/views/Enforcelaw/aduit'], reslove)
+  }
+]
+
+/**
+ * 异步路由
+ */
+export const asyncRouterMap = [{
+  path: '/monitor',
+  name: '实时视频',
+  component: reslove => require(['@/views/layout'], reslove),
+  meta: {
+    icon: 'gy-icon-jianguan'
+  },
+  children: [
+    {
+      path: '/system/playvideo',
+      name: '实时视频',
+      component: reslove => require(['@/views/videos/playvideo'], reslove),
+    }
+  ]
+},{
+    path: '/enforcelaw/config',
+    name: '数据检索',
+    meta: {
+      icon: 'el-icon-search'
+    },
+    component: reslove => require(['@/views/layout'], reslove),
+    children: [{
+        path: '/search/filmedrecords',
+        name: '抓拍记录',
+        component: reslove => require(['@/views/Search/FilmedRecords'], reslove),
+      },
+      {
+        path: '/search/pices',
+        name: '以图搜图',
+        component: reslove => require(['@/views/Search/Searchpic'], reslove),
+      }, {
+        path: '/search/dbs',
+        name: '人口库管理',
+        component: reslove => require(['@/views/Search/facedb/database'], reslove),
+      }
+    ]
+  },
+  {
+    path: '/activity',
+    name: '活动状态',
+    meta: {
+      icon: 'el-icon-map-location'
+    },
+    component: reslove => require(['@/views/layout'], reslove),
+    children: [
+      // {
+      //   path: '/activity/status',
+      //   name: '轨迹查询',
+      //   component: reslove => require(['@/views/activity/status'], reslove),
+      // },
+      {
+        path: '/activity/report',
+        name: '状态报表',
+        component: reslove => require(['@/views/activity/report'], reslove),
+      }
+    ]
+  },{
+    path: '/equipment',
+    name: '设备管理',
+    component: reslove => require(['@/views/layout'], reslove),
+    meta: {
+      icon: 'el-icon-video-camera'
+    },
+    children: [{
+      path: '/equipment/org',
+      name: '组织机构管理',
+      component: reslove => require(['@/views/Equipment/org.vue'], reslove),
+    },{
+      path: '/equipment/vchan',
+      name: '相机配置',
+      component: reslove => require(['@/views/Equipment/vchan.vue'], reslove),
+    },{
+      path: '/equipment/dev',
+      name: '设备状态',
+      component: reslove => require(['@/views/Equipment/dev.vue'], reslove),
+    }]
+  }, {
+    path: '/system',
+    name: '系统管理',
+    component: reslove => require(['@/views/layout'], reslove),
+    meta: {
+      icon: 'gy-icon-xitong'
+    },
+
+    children: [{
+        path: '/system/user',
+        name: '用户管理',
+        component: reslove => require(['@/views/System/Sysuser'], reslove),
+      }, {
+        path: '/system/role',
+        name: '角色管理',
+        component: reslove => require(['@/views/System/role'], reslove),
+      },{
+        path: '/system/setting',
+        name: '其他配置',
+        component: reslove => require(['@/views/System/Setting'], reslove),
+      }
+    ]
+  }
+]
+
+
+export default new Router({
+  routes: constantRouterMap
+})

web/src/store/getters.js

+const getters = {
+  roles: state => state.menu.roles,
+  permission_routers: state => state.menu.addRouter,
+  three_menu:state => state.menu.threeMenu,
+  dev_unid:state => state.initinfo.dev_unid,
+  faceInfo:state => state.alarm.faceInfo
+}
+export default getters

web/src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+import state from './state'
+import getters from './getters'
+import mutations from './mutaition'
+import menu from './modules/menu'
+import initinfo from './modules/init_info'
+import alarm from './modules/alarm'
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  modules:{
+    menu,
+    initinfo,
+    alarm
+  },
+  state,
+  mutations,
+  getters
+})
+
+export default store
\ No newline at end of file

web/src/store/modules/alarm.js

+const alarm = {
+  state:{
+    alarmInfo:'',
+    faceInfo:''
+  },
+  mutations:{
+    SET_ALARM(state, data) {
+      console.log(state)
+      state.alarmInfo = data;
+    },
+    SET_FACE(state, data) {
+      state.faceInfo = data
+    }
+  },
+  actions:{
+    GetAlarmData({commit,state}, data) {
+        if (data.type=='request') {
+        commit('SET_ALARM',data)
+      }
+      if (data.type == 'face_img_search') {
+        commit('SET_FACE',data)
+      }
+    }
+  }
+}
+
+export default alarm

web/src/store/modules/init_info.js

+
+
+const info = {
+  state: {
+    dev_unid: '',
+    bodyheight:'',
+    org:[],
+    address:[],
+    facedbdata:[],
+    province:[]
+  },
+  mutations:{
+    SET_DEV: (state, dev) => {
+      state.dev_unid = dev;
+    },
+    SET_BODYHEIGHT: (state, height) => {
+      state.bodyheight = height
+    },
+    SET_ORG: (state, data) =>{
+      state.org = data;
+    },
+    SET_ADDRESS: (state, data) => {
+      state.address = data;
+    },
+    SET_FACEDB: (state, data) => {
+      state.facedbdata = data;
+    },
+    SET_PROVINCE: (state, data) => {
+      state.province = data;
+    }
+  },
+  actions: {
+    GetDev({ commit, state}) {
+      // getDev().then(response => {
+      //   response.data
+      //   let data = "9cb6e39adc5176b81879f6c22f1d963"
+      //   if( response.data &&  response.data.length > 0){
+      //     data =  response.data[0];
+      //   }
+      //   commit("SET_DEV", data);
+      // })
+    },
+
+  },
+}
+
+/**
+ * 获取设备IP
+ */
+// function getDev() {
+//   return new Promise((reslove, reject) =>{
+//     axios.get(IP + '/api/v1/devconf_fx/devs?s=' + new Date().getTime()).then(response => {
+//       reslove(response);
+//     })
+//   });
+// }
+
+export default info

web/src/store/modules/menu.js

+import axios from '../../util/http'
+import {asyncRouterMap, constantRouterMap } from '@/router'
+import {url} from '../../util/api'
+/**
+ * 获取路由列表
+ */
+function getMenuInfo(token) {
+  return  new Promise((reslove, reject) =>{
+    axios.get(url + "/auth/apps/" + 'e38b9e91e27df7295282cd1d876f5f26' + "/menus?shape=list").then(response => {
+      reslove(response);
+    })
+  });
+}
+
+/**
+ * cyl add
+ * 用于判断父级菜单是否有子级菜单被选中
+ * 如果有，那么该父节菜单也需要选中
+ */
+function existsChildren(router,roles){
+  for(let i = 0; i < roles.length; i++){
+    for(let k = 0; k < router.children.length; k++){
+      if(router.children[k].children && router.children[k].children.length>0){
+        existsChildren(router.children[k],roles);
+      }else{
+        if(roles[i].path === router.children[k].path){
+          return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * 判断是否有权限
+ * @param {*} router
+ * @param {*} roles
+ */
+function hasPerminssion(router, roles) {
+  if(router.children && router.children.length>0){
+    if(existsChildren(router,roles)){
+        return true;
+    }
+  }
+  // let status = false
+  let status = true
+  if (roles) {
+    for(let i = 0; i < roles.length; i++){
+      if(roles[i].path === router.path){
+        status = true;
+        break;
+      }
+    }
+  }
+  return status
+}
+
+/**
+ * 根据后台返回的路由权限
+ * 动态匹配路由
+ * @param {*} asyncRouterMap
+ * @param {*} roles
+ */
+function filterAsyncRouter(asyncRouterMap, roles) {
+  const newData = [];
+  // return routers
+  asyncRouterMap.forEach(ele => {
+    let obj = {};
+    if (hasPerminssion(ele, roles)) {
+      obj['path'] = ele.path;
+      obj['name'] = ele.name;
+      obj['meta'] = ele.meta || {}
+      obj['component'] = ele.component;
+      if (ele.children && ele.children.length > 0) {
+        obj['children'] = filterAsyncRouter(ele.children, roles)
+      } else {
+        obj['children'] = []
+      }
+    } else {
+      return false
+    }
+    newData.push(obj)
+  });
+  return newData
+}
+/**
+ * 根据路由和当前跳转key(路由路径)
+ * 获取第三级路由
+ * @param {*} router
+ * @param {*} key
+ */
+function filterTwoMenu(router, key) {
+  let data = [],
+  state = true;
+  router.forEach(e => {
+    if(e.path == key)
+      if(e.children) {
+        data = e.children
+      } else {
+        data = [];
+      }
+  })
+  return data;
+}
+
+const menu = {
+  state: {
+    routers: constantRouterMap,
+    addRouter: [],
+    threeMenu:[],
+  },
+  mutations:{
+    SET_ROUTERS: (state, routers) => {
+      state.addRouter = routers;
+      state.routers = constantRouterMap.concat(routers);
+    },
+    SET_THREEMENU: (state, routers) => {
+      state.threeMenu = routers;
+    }
+  },
+  actions: {
+    GetMenuRole({ commit, state},data) {
+      if (data === ''){
+        commit('SET_ROUTERS', []);
+        return
+      }
+      return new Promise((resolve, reject) => {
+
+        getMenuInfo().then(response => {
+          let accessedRouters = filterAsyncRouter(asyncRouterMap,response.data.list_data);
+          // commit('SET_ROUTERS', accessedRouters);
+          commit('SET_ROUTERS', accessedRouters);
+
+          resolve(accessedRouters);
+        })
+      })
+    },
+    GetTwoMenu({commit, state},data) {
+      return new Promise((reslove,reject) => {
+        const tmenus = filterTwoMenu(state.routers, data);
+        commit('SET_THREEMENU', tmenus);
+        reslove(tmenus);
+      })
+    }
+  },
+}
+
+export default menu

web/src/store/mutaition.js

+export default {
+  setAddress(state, address) {
+    state.address = address;
+  },
+  setDevunid(state, data) {
+    state.dev_unid = data;
+  },
+  setImgsrc(state, data) {
+    state.imgsrc = data;
+  },
+  setCurVideo(state, data) {
+    state.videoInfo = data;
+  },
+  setTheme(state, data) {
+    state.theme = data;
+  },
+  setsessionID(state, data) {
+    state.sessionID = data;
+  }
+}

web/src/store/state.js

+export default {
+  imgsrc:'',
+  IP:'',
+  dev_unid:'',
+  theme:'white',
+  sessionID:''
+}

web/src/util/api.js

+
+export let url = 'http://192.168.9.208:20080/api/v1'
+// export let url = 'http://52.1.113.109:20080/api/v1'
+export let menus = `${url}/auth/apps/e38b9e91e27df7295282cd1d876f5f26/menus`
+
+let timer = ()=>{
+  return new Date().getTime()
+}
+export let auth = {
+  login:  `${url}/auth/users/login`,
+  user: `${url}/auth/users`,
+  edituser(userid){
+    return `${url}/auth/users/${userid}`
+  },
+  role: `${url}/auth/roles`,
+  editrole (roleid){
+    return `${url}/auth/roles/${roleid}`
+  },
+  menusRole(roleid){
+    return `${url}/auth/roles/${roleid}/apps/e38b9e91e27df7295282cd1d876f5f26/menus`
+  },
+  userRole(userid) {
+    return `${url}/auth/users/${userid}/roles`
+  },
+  deleteRole(roleid) {
+    return  `${url}/auth/roles/${roleid}`
+  },
+  deleteuserRole(userid, roleid) {
+    return `${url}/auth/users/${userid}/roles/${roleid}`
+  },
+  perms(roleid){
+    return `${url}/auth/roles/${roleid}/perms`
+  },
+  ugrps: `${url}/auth/ugrps`,
+  delugrps(ugrp_unid) {
+    return `${url}/auth/ugrps/${ugrp_unid}`
+  },
+  userTogroup(groupid) {
+    return `${url}/auth/ugrps/${groupid}/users`
+  },
+  delUserToGroup(groupid, userid) {
+    return `${url}/auth/ugrps/${groupid}/users/${userid}`
+  },
+  ///-------cyl add
+  getRoleUsers (roleid){
+    return `${url}/auth/roles/${roleid}/users`
+  },
+}
+export let org = {
+  getorgtree:`${url}/org/tree`,
+  getorg:`${url}/org`,
+  deleteorg (org_unid){
+    return `${url}/org/${org_unid}`
+  },
+  getvchan:`${url}/org/vchans`,
+  getvchanList:`${url}/org/vchans/list`,
+  editvchan (id){
+    return `${url}/org/vchans/${id}`
+  }
+}
+
+export let faceweb = `${url}/face_web`

web/src/util/common.js

+import Vue from 'vue'
+import VueResource from 'vue-resource'
+
+import FileSaver from "file-saver";
+import XLSX from "xlsx";
+
+Vue.use(VueResource)
+//const httpUrl = 'http://1.1.1.1:8080/'
+
+
+/**
+ * 格式化枚举中文显示
+ * 其中枚举是单个字符
+ */
+function formatterInfo(value, options) {
+    if(value==null || value==""){
+        return "";
+    }
+    let res = value;
+    for (let i = 0; i < options.length; i++) {
+        if (value == options[i].value) {
+            res = options[i].label;
+            break;
+        }
+    }
+    return res;
+}
+/**
+ * 格式化枚举类型中文显示
+ * 其中枚举可能是多个字符
+ */
+function formatterMoreInfo(value, options) {
+    if(value==null || value==""){
+        return "";
+    }
+    let res = "";
+    let arrValue = value.split("");
+    for (let j = 0; j < arrValue.length; j++) {
+        let val = arrValue[j];
+        for (let i = 0; i < options.length; i++) {
+            if (val == options[i].value) {
+                res += "," + options[i].label;
+                break;
+            }
+        }
+    }
+    if (res == "") {
+        return value;
+    } else {
+        return res.substring(1);
+    }
+}
+/**
+ * 对部分枚举可能值是0开头的，但是表数据不规范的时候，导致01变为1这种情况进行解决
+ * @param {} value 
+ * @param {*} options 
+ */
+function formatterInfoChangInt(value, options) {
+    if(value==null || value==""){
+        return "";
+    }
+    let res = value;
+    for (let i = 0; i < options.length; i++) {
+        if (parseInt(value) == parseInt(options[i].value)) {
+            res = options[i].label;
+            break;
+        }
+    }
+    return res;
+}
+
+/**
+ * 处理图片访问地址的，目的是解决谷歌高版本浏览器不支持ftp协议
+ * @param {*} path 
+ */
+function imgPathAnalysis(serip,path){
+    if(path !=null && path != "" && path.length > 10){
+        var path = path.trim().toLowerCase();
+        if(path.indexOf("ftp://") == 0){
+            return serip+"/image/showByByte"+"?ipath="+path;
+        }else{
+            return path;
+        }
+    }else{
+        return "";
+    }
+}
+
+function formatDate(date, fmt) {
+    if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+    }
+    let o = {
+        'M+': date.getMonth() + 1,
+        'd+': date.getDate(),
+        'h+': date.getHours(),
+        'm+': date.getMinutes(),
+        's+': date.getSeconds()
+    };
+    for (let k in o) {
+        if (new RegExp(`(${k})`).test(fmt)) {
+            let str = o[k] + '';
+            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
+        }
+    }
+    return fmt;
+}
+
+function padLeftZero(str) {
+    return ('00' + str).substr(str.length);
+}
+
+function exportExcel(title) {
+    /* generate workbook object from table */
+    let wb = XLSX.utils.table_to_book(
+      document.querySelector("#rebateSetTable")
+    );
+    /* get binary string as output */
+    let wbout = XLSX.write(wb, {
+      bookType: "xlsx",
+      bookSST: true,
+      type: "array"
+    });
+    try {
+      FileSaver.saveAs(
+        new Blob([wbout], { type: "application/octet-stream" }),
+        title+".xlsx"
+      );
+    } catch (e) {
+      if (typeof console !== "undefined") console.log(e, wbout);
+    }
+    return wbout;
+  }
+
+export default {
+    formatterInfo,
+    formatterMoreInfo,
+    formatterInfoChangInt,
+    imgPathAnalysis,
+    formatDate,
+    exportExcel
+}
\ No newline at end of file

web/src/util/http.js

+/**
+ * axios 全局配置
+ */
+
+import axios from 'axios'
+import vue from 'vue'
+import router from '../router'
+const service = axios.create({
+  timeout: 2000000 //设置请求超时时间
+})
+
+
+import { Message, Loading } from 'element-ui';
+
+let loading        //定义loading变量
+
+function startLoading() {    //使用Element loading-start 方法
+    loading = Loading.service({
+        lock: true,
+        text: '加载中……',
+        background: 'rgba(0, 0, 0, 0.7)'
+    })
+}
+function endLoading() {    //使用Element loading-close 方法
+    loading.close()
+}
+
+//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
+//声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
+//调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
+let needLoadingRequestCount = 0
+export function showFullScreenLoading() {
+    if (needLoadingRequestCount === 0) {
+        startLoading()
+    }
+    needLoadingRequestCount++
+}
+
+export function tryHideFullScreenLoading() {
+    if (needLoadingRequestCount <= 0) return
+    needLoadingRequestCount--
+    if (needLoadingRequestCount === 0) {
+        endLoading()
+    }
+}
+
+/**@param
+ * 请求前的拦截器
+ */
+service.interceptors.request.use(function (config) {
+  //截取API添加时间戳防止请求缓存
+  if (config.url.indexOf('?') > -1) {
+    if (config.url.split('?')[1].indexOf('&') > -1) {
+      config.url = config.url + '&s=' + new Date().getTime();
+    }
+  } else {
+    config.url = config.url + '?s=' + new Date().getTime();
+  }
+  if (config.url.indexOf('codes/countries') < 1) {
+    if (config.url.indexOf('cates') < 1) {
+      var token = localStorage.getItem('atoken');
+      if (token) {
+        // config.headers.authorization = '4db5183a-721b-4eee-b623-1d143890e813';
+        config.headers.authorization = token;
+        //showFullScreenLoading();
+      } else {
+        router.push('/');
+      }
+    }
+  }
+  return config
+}, function (err) {
+  //tryHideFullScreenLoading();
+});
+
+
+/**
+ * @param
+ * 响应前的拦截器
+ */
+service.interceptors.response.use(function (res) {
+  //tryHideFullScreenLoading();
+  return res;
+}, function (err) {
+  //tryHideFullScreenLoading();
+  // return Promise.reject(error);
+})
+
+export default service

web/src/util/initApi.js

+import axios from 'axios'
+import * as API  from './api'
+import store from '../store/index.js'
+class api {
+  constructor() {
+    this.instance = null;
+  }
+
+  static getInstance() {
+    if (!this.instance) {
+      this.instance = new api();
+    }
+    return this.instance;
+  }
+  /**@augments
+   * 获取库相关信息
+   */
+  getCarDbData() {
+    return new Promise((reslove, reject) => {
+      axios.get(API.url + "/alarm/traffic/vehicle_libs")
+        .then(response => {
+          reslove(response.data);
+        });
+    })
+  }
+  /**@augments
+   * 获取布控类别
+   */
+  getMonitor() {
+    return new Promise((reslove, reject) => {
+      axios.get(API.url + "/alarm/traffic/monitor_cates")
+        .then(response => {
+          reslove(response.data.list_data);
+        });
+    })
+  }
+  /**
+   * @argument
+   * 获取城市
+   */
+  getProvince() {
+    return new Promise((reslove, reject) => {
+      axios.get(API.url + "/codes/countries/0E229CD043/provinces?depth=1").then(res => {
+        store.commit('SET_PROVINCE', res.data.list_data)
+        reslove(res);
+      });
+    });
+  }
+  /**
+   * @argument
+   * 获取人员库
+   */
+  getFaceDbData() {
+    return new Promise((reslove, reject) => {
+      axios.get(API.url + "/codes/custom/cates/4DD23AF66E/codes")
+        .then(response => {
+          store.commit('SET_FACEDB', response.data.list_data)
+          reslove(response.data);
+        });
+    })
+  }
+
+  /**@augments
+   * 初始化地点
+   */
+  getOrg() {
+    return new Promise((reslove, reject) => {
+      axios.get(API.url + '/org/list', {
+        params: {
+          org_type: 'org',
+        }
+      }).then(response => {
+        store.commit('SET_ORG', response.data.list_data);
+        reslove(response.data);
+      })
+    })
+  }
+  /**@argument
+   * 列出所有地点
+   */
+  getAddress() {
+    return new Promise((reslove, reject) => {
+      axios.get(API.url + '/org/list', {
+        params: {
+          org_type: 'address',
+        }
+      }).then(response => {
+        store.commit('SET_ADDRESS', response.data.list_data);
+        reslove(response.data);
+      })
+    })
+  }
+
+  /**@argument
+   * 获取地点值
+   */
+  getSite() {
+    return new Promise((reslove, reject) => {
+      axios.get(API.url + '/codes/custom/cates/630A634844/codes').then(response => {
+        reslove(response.data);
+      })
+    });
+
+  }
+  /**@augments
+   * 上传图片
+   */
+  uploadImg() {
+    return new Promise((reslove, reject) => {
+      axios.post("http://192.168.9.225:8080/FACE-DETECT-WEB/api/v1/face_web/search_src_pics/", data)
+        .then(function (response) {
+          reslove(response.data);
+        });
+    })
+  }
+
+  /**@argument
+   * 获取推送服务websocket连接地址
+   */
+  getPushWebsocketUrl() {
+    return new Promise((reslove, reject) => {
+      axios.post("http://192.168.9.225:8080/FACE-DETECT-WEB/api/v1/face_web/search_src_pics/", data)
+        .then(function (response) {
+          reslove(response.data);
+        });
+    })
+  }
+
+  /**@argument
+   * 获取人脸websocket连接地址
+   */
+  getFaceWebsocketUrl() {
+    return new Promise((reslove, reject) => {
+      var userName = localStorage.getItem("user_id");
+      var timer = new Date();
+      this.axios.get("http://192.168.9.225:8080/FACE-DETECT-WEB/api/v1/face_web/ws_url?src_type=user&user_unid=" + userName + "&client_unid=" + timer.getTime()).then((response) => {
+        this.openWs(response.data.ws_url);
+      });
+    });
+  }
+
+  /**@argument
+   * 获取设备信息
+   */
+  getVchanList() {
+    return new Promise((reslove, reject) => {
+      let externList = {},
+        cameraList = {}
+      axios.get(IP + "/api/v1/org/vchans/list", {
+        params: {
+          limit: 1000,
+        }
+      }).then(function (response) {
+        reslove(response.data);
+      });
+    });
+  }
+
+  /**@argument
+   * websocket心跳
+   */
+  wsclock(command) {
+    var date = new Date();
+    var datatimes = date.getTime();
+    var wsMessage = {
+      "type": "request",
+      "id": datatimes,
+      // command: "get /wsapi/v1/dtid/"+wsIP+"/keep_alive",//推送服务
+      command: command,
+      mts: datatimes
+    };
+    Ws.send(JSON.stringify(wsMessage));
+  }
+
+  // 获取code编码
+  getCodeName() {
+    axios.get(IP + '/api/v1/codes/traffic/cates').then(m => {
+      m.data.list_data.forEach(ele => {
+        this.setCodeLocalStorage(ele)
+      })
+    })
+  }
+  setCodeLocalStorage(res) {
+    axios.get(IP + '/api/v1/codes/traffic/cates/' + res.cate_unid + '/codes').then(response => {
+      if (response.data.list_data) {
+        response.data.list_data.forEach(ele => {
+          let codeKey = res.name + '-' + ele.code;
+          window.localStorage.setItem(codeKey, ele.name);
+        })
+      }
+    })
+  }
+  // behavior
+  setBehaviorLocal() {
+    axios.get(IP + '/api/v1/codes/event_types').then(m => {
+      if (m.data.list_data) {
+        m.data.list_data.forEach(ele => {
+          let behaviorKey = '安防事件-' + ele.code;
+          window.localStorage.setItem(behaviorKey, ele.name);
+        })
+      }
+    })
+  }
+}
+
+const faceapi = api.getInstance();
+export {
+  faceapi
+}

web/src/util/permission.js

+/**
+ * 权限模块
+ * 模块功能
+ * 1.获取菜单权限
+ * 2.获取设备信息
+ * 3.获取websocket信息
+ * 4.初始化加载所需api
+ */
+
+import router from '../router'
+import store from '../store'
+import {faceapi} from './initApi'
+import {pushws} from './socket'
+router.beforeEach((to, from, next) => {
+  if (to.path === '/') {
+    next()
+  } else {
+    if (store.getters.permission_routers.length === 0) { //判断当前用户是否拉取了路由
+      store.dispatch('GetMenuRole').then(res => { //获取菜单
+        router.addRoutes(res);
+          pushws();
+         /**
+         * 初始化页面所需api
+         **/
+        faceapi.setBehaviorLocal();
+        faceapi.getCodeName();
+        faceapi.getSite();
+        faceapi.getOrg();
+        faceapi.getAddress();
+        faceapi.getFaceDbData();
+        faceapi.getProvince();
+        //添加路由守卫确定是否打开新的页面
+        // router.beforeEach((to, from, next) => {
+        //     if(to.matched.some(record => record.meta.openwin)) {
+        //       let url = location.origin +'/#'+ to.meta.url
+        //       window.open (url, 'newwindow', 'left=100, top=100 toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
+        //       return
+        //     }else{
+        //       next()
+        //     }
+        // })
+      }).catch(() => {
+
+      })
+    } else {
+
+    }
+    // if (store.getters.dev_unid === ""){ //获取设备信息
+    //   store.dispatch('GetDev')
+    // }
+  }
+  next()
+});

web/src/util/socket.js

+import store from '../store'
+import axios from './http'
+import * as API from './api'
+
+window.PushWs = null;
+window.pushwsurl = null;
+window.pushwsClock = null;
+var sessionID = ''
+export const pushws = function getpushws() {
+  let userName = localStorage.getItem("user_id");
+  let clientTimer = new Date().getTime();
+  sessionID = clientTimer;
+  axios.get(API.url + "/manage/push/ws_url?src_type=user&user_unid=" + userName + "&client_unid=" + clientTimer,{
+    headers: {
+      'authorization': localStorage.getItem('atoken')
+    }
+  })
+    .then(response => {
+      openWs("pushws", response.data.ws_url);
+      pushwsurl =  response.data.ws_url;
+    });
+}
+
+
+function openWs(wstype, wsUrl) {
+  if ("WebSocket" in window) {
+    if (wstype == "pushws") PushWs = new WebSocket(wsUrl);
+  } else if ("MozWebSocket" in window) {
+    if (wstype == "pushws") PushWs = new MozWebSocket(wsUrl);
+  } else {
+    if (wstype == "pushws") PushWs = new SockJS(wsUrl);
+  }
+  /**
+   * 报警推送
+   */
+  try {
+    PushWs.onerror = function (event) {
+      console.log("推送WebSocket:发生错误 ");
+      console.log("错误" + event);
+    };
+    PushWs.onclosed = function () {
+      getpushws();
+      console.log("推送服务ws关闭")
+    };
+    PushWs.onopen = function (event) {
+      debugger
+      console.log("推送WebSocket:已连接");
+      store.commit('setsessionID',sessionID)
+      pushwsClock = setInterval(wsPushclock, 20000);
+    };
+    /**
+     * 处理接收到的数据
+     * @param {*} event
+     */
+    PushWs.onmessage = function (event) {
+      var data = JSON.parse(event.data);
+      store.dispatch("GetAlarmData", data)
+      if (data.command == "post /wsapi/v1/event/black_face_events") {
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  }
+
+
+
+   /**
+   * 推送心跳
+   */
+  function wsPushclock(command) {
+    let date = new Date();
+    let datatimes = date.getTime();
+    if (PushWs.readyState == 1) {
+      try {
+        let PushMessage = {
+          type: "request",
+          id: datatimes + 1,
+          command: "get /wsapi/v1/dtid/" + pushwsurl.split('connects/')[1] + "/keep_alive", //推送服务
+          mts: datatimes
+        };
+        PushWs.send(JSON.stringify(PushMessage));
+
+      } catch (err) {
+        console.log(err);
+      }
+    } else {
+      clearInterval(pushwsClock);
+      pushws();
+    }
+  }
+}

web/src/util/vproto.js

+import Vue from 'vue'
+import store from '../store'
+/**
+ * @param {src} 图片路径
+ * 图片放大
+ */
+Vue.prototype.zoomImg = function (data){
+  store.commit('setImgsrc',data);
+}
+Vue.filter('sexfn', function (value) {
+  if (!value)
+    return;
+  var str = '';
+  if (value == 1)
+    str = '男'
+  if (value == 2)
+    str = '女'
+  return str;
+});
+
+Vue.filter('dbnamefn', function (value) {
+  let dbData = store.state.initinfo.facedbdata,
+  dbname = '';
+  dbData.forEach(ele => {
+    if (ele.code == value){
+      dbname = ele.name;
+    }
+  });
+  return dbname
+});
+
+Vue.filter('filterDeployType', function (value) {
+  let dbData = store.state.alarmtype,
+  dbname = '';
+  dbData.forEach(ele => {
+    if (ele.type == value){
+      dbname = ele.name;
+    }
+  });
+  return dbname
+});
+
+/**
+ * @param {provenceid} 省份id
+ * @param {cityid} 城市id
+ */
+Vue.prototype.showCity = function (provenceid, cityid) {
+  this.cData = this.$store.state.initinfo.province;
+  var province = provenceid;
+  var provinceNmae = '';
+  var cityName = '';
+  var curProvince = '';
+  var city = cityid;
+  if (province) {
+    this.cData.forEach(function (ele) {
+      if (ele.code == province) {
+        if (ele.cities)
+          curProvince = ele.cities;
+        provinceNmae = ele.name
+      }
+    }, this);
+    if (city) {
+      if (curProvince)
+        curProvince.list_data.forEach(function (ele) {
+          if (ele.code == city) {
+            cityName = ele.name
+          }
+        });
+    }
+  } else {
+    provinceNmae = "--";
+    cityName = "--";
+  }
+  return provinceNmae + '-' + cityName
+}
+/**
+ * @param {obj}
+ *  格式化时间
+ */
+Vue.prototype.timeForm = function (obj) {
+  var nowY = obj.getFullYear()
+  var nowM = (obj.getMonth() + 1) < 10 ? '0' + (obj.getMonth() + 1) : (obj.getMonth() + 1)
+  var nowD = obj.getDate() < 10 ? '0' + obj.getDate() : obj.getDate()
+  var nowH = obj.getHours() < 10 ? '0' + obj.getHours() : obj.getHours()
+  var nowMi = obj.getMinutes() < 10 ? '0' + obj.getMinutes() : obj.getMinutes()
+  var nowS = obj.getSeconds() < 10 ? '0' + obj.getSeconds() : obj.getSeconds()
+  var timeNow = nowY + '-' + nowM + '-' + nowD + ' ' + nowH + ':' + nowMi + ':' + nowS;
+  return timeNow;
+}
+
+/**
+ * @param {obj}
+ * UTC时间处理
+ */
+Vue.prototype.setUtcTime = function (obj) {
+  if (obj && obj != '') {
+    let num = new Date(obj).getTime()
+    let offset = Math.abs(new Date().getTimezoneOffset())
+    let time;
+    if (isNaN(num)) {
+      let ary = obj.split(':')
+      let h = parseInt(ary[0]) - offset/60
+      if (h < 0) {
+        h += 24
+      }
+      if (h < 10) {
+        h = '0' + h
+      }
+      time = h + ":" + ary[1] + ":" + ary[2]
+    } else {
+      time = this.timeForm(new Date(new Date(obj).getTime() - offset*60000));
+    }
+    return time;
+  }
+}
+/**IE
+ * 检查浏览器
+ */
+function checkIE() {
+  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
+  var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
+  var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
+  if(isIE || isEdge || isIE11) {
+    return true
+  } else {
+    return false
+  }
+}
+Vue.prototype.showLocalTime = function (obj) {
+  if(obj == undefined) return
+  let dt = '',ndt = '';
+  if(checkIE()){
+    dt = obj.replace(/-/g,'/');
+    ndt = String(dt).split('.')[0];
+  } else {
+    ndt = obj
+  }
+  let num = new Date(ndt).getTime()
+  let offset = Math.abs(new Date().getTimezoneOffset())
+  let time;
+  if (isNaN(num)) {
+    let ary = obj.split(':')
+    let h = Number(ary[0]) + offset/60
+    if (h>=24) {
+      h -= 24
+    }
+    if (h<10) {
+      h = '0' + h
+    }
+    time = h + ":" + ary[1] + ":" + ary[2]
+  } else {
+    time = this.timeForm(new Date(new Date(ndt).getTime() + offset*60000));
+  }
+  return time;
+}
+
+/**
+ * 本地存储相机信息
+ */
+Vue.prototype.setCameralocalStor = function (key, val) {
+  if (window.localStorage) {
+    localStorage[key] = val;
+  } else {
+    alert('浏览器不支持本地存储');
+  }
+}
+
+/**
+ * @param {key}
+ * 获取本地存储相机信息
+ */
+Vue.prototype.getCameralocalStor = function (key) {
+  var val = '';
+  if (window.localStorage) {
+    val = localStorage[key];
+  } else {
+    alert('浏览器不支持本地存储');
+  }
+  return val;
+}
+
+/**
+ * 图片上传限制
+ */
+Vue.prototype.uploadImgCondition = function (file) {
+  const isJPG = file.type === "image/jpeg";
+  const isLt2M = file.size / 1024 / 1024 < 2;
+
+  if (!isJPG) {
+    this.$message.error("上传头像图片只能是 JPG 格式!");
+  }
+  if (!isLt2M) {
+    this.$message.error("上传头像图片大小不能超过 2MB!");
+  }
+  return isJPG && isLt2M;
+}
+
+/**
+ * base64图片
+ */
+Vue.prototype.base64Img = function (file) {
+  var file = file.file;
+  return new Promise((resolve, reject) => {
+    var srcs = "";
+    var reader = new FileReader();
+    if (file) {
+      reader.readAsDataURL(file);
+    }
+    reader.onloadend = function (evt) {
+      srcs = reader.result.split(",")[1];
+      let data = {
+        pic_base64: srcs,
+        format: file.type.split("/")[1],
+        ofilename: file.name,
+        t_format: "jpg"
+      };
+      data.src = evt.target.result
+      resolve(data);
+    };
+  })
+}
+
+/**
+ * code操作
+ */
+
+var codeNation = 1004; //民族
+var codeCulture = 1005; //文化程度
+var codeBlood = 1006; //血型
+var codeRelationTOhead = 1009; //与户主关系
+var codePersonType = 1012; //人员类别
+var profession = 1013; //职业
+var faith = 1020; //宗教信仰
+var army = 1021; //服兵役情况
+var personType = 1067; //关注人员类型
+var marriage = 1007; //婚姻状况
+// 获取code编码
+Vue.prototype.getCode = (codeName, code) => {
+  var name = localStorage.getItem(codeName + '-' + code);
+  name = name ? name : ''
+  return name;
+};

web/src/views/Activity/detail.vue

+<template>
+  <div class="statusdetail">
+    <el-dialog
+      title="活动状态"
+      :visible.sync="show"
+      width="40%"
+      :before-close="handleClose">
+      <div  v-show="curshow == 'chart'" class="report-select">
+        <el-select class="flr" v-model="period" @change="chageperiod">
+          <el-option label="天" value="day"></el-option>
+          <el-option label="周" value="week"></el-option>
+          <el-option label="月" value="month"></el-option>
+        </el-select>
+      </div>
+      <div class="activitychart" id="activitychart" v-show="curshow == 'chart'"></div>
+      <div class="imgbox"  v-show="curshow == 'img'"></div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="show = false">取 消</el-button>
+        <el-button type="primary" @click="show = false">确 定</el-button>
+      </span>
+</el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show:false,
+      detaildata:'',
+      curshow:'img',
+      period:'week',
+      xdata:['01','02','03','04','05','06'],
+      apperadata:[23,60,20,36,23,85]
+    }
+  },
+  methods:{
+    initImg(){
+      this.show = true
+      this.curshow = 'img'
+    },
+    chageperiod(){
+      this.xdata = ['00:00','00:01','00:02','00:03','00:04','00:05']
+      this.apperadata = [123,60,32,36,213,85]
+      this.initchart()
+    },
+    initchart(data){
+      this.show = true;
+      this.curshow = 'chart'
+      this.detaildata = data
+      setTimeout(() => {
+      this.initactivityChart(this.data)
+      }, 0);
+    },
+    initactivityChart(){
+      var chart  = this.$echarts.init(document.getElementById('activitychart'))
+      var option = {
+        tooltip: {
+        trigger: 'axis'
+      },
+          xAxis: [{
+              type: 'category',
+              data: this.xdata,
+              axisLine: {
+                  lineStyle: {
+                      color: "#999"
+                  }
+              }
+          }],
+          yAxis: [{
+              type: 'value',
+              splitNumber: 4,
+              splitLine: {
+                  lineStyle: {
+                      type: 'dashed',
+                      color: '#DDD'
+                  }
+              },
+              axisLine: {
+                  show: false,
+                  lineStyle: {
+                      color: "#333"
+                  },
+              },
+              nameTextStyle: {
+                  color: "#999"
+              },
+              splitArea: {
+                  show: false
+              }
+          }],
+          series: [{
+              name: '次数',
+              type: 'line',
+              data: this.apperadata,
+              lineStyle: {
+                  normal: {
+                      width: 8,
+                      color: {
+                          type: 'linear',
+
+                          colorStops: [{
+                              offset: 0,
+                              color: '#A9F387' // 0% 处的颜色
+                          }, {
+                              offset: 1,
+                              color: '#48D8BF' // 100% 处的颜色
+                          }],
+                          globalCoord: false // 缺省为 false
+                      },
+                      shadowColor: 'rgba(72,216,191, 0.3)',
+                      shadowBlur: 10,
+                      shadowOffsetY: 20
+                  }
+              },
+              itemStyle: {
+                  normal: {
+                      color: '#fff',
+                      borderWidth: 10,
+                      /*shadowColor: 'rgba(72,216,191, 0.3)',
+                      shadowBlur: 100,*/
+                      borderColor: "#A9F387"
+                  }
+              },
+              smooth: true
+          }]
+        };
+        chart.setOption(option)
+    }
+  },
+  mounted(){
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.activitychart{
+  height 40vh
+  width 40vw
+}
+.report-select{
+  width 100%
+  overflow hidden
+}
+</style>

web/src/views/Activity/report.vue

+<!---活动状态--->
+<template>
+  <div class="template-box content_div_main">
+     <el-form :inline="true" class="search-form" size="small">
+        <el-form-item label="抓拍地点：">
+          <el-input type="text" class="bla bra br0" v-model="address" placeholder=""></el-input>
+        </el-form-item>
+         <el-form-item label="抓拍相机：">
+          <el-input type="text" class="bla bra br0" v-model="camera" placeholder=""></el-input>
+        </el-form-item>
+         <el-form-item label="查询库：">
+           <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+         <el-form-item label="查询时间：">
+             <el-date-picker
+            v-model="value1"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+         <el-form-item>
+          <el-button  class="search-btn" @click="searchUser" icon="el-icon-search">查询</el-button>
+          <el-button  class="search-btn ml10"  @click="addGroupUser()" icon="el-icon-upload">导出</el-button>
+        </el-form-item>
+      </el-form>
+    <el-row class="table_m_type">
+      <el-table :data="tableData" style="width: 100%" height="680" >
+        <el-table-column type="index" label="#"></el-table-column>
+        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
+        <el-table-column prop="age" label="年龄" align="center"></el-table-column>
+        <el-table-column prop="sex" label="性别" align="center"></el-table-column>
+        <el-table-column prop="carid" label="身份证号"></el-table-column>
+        <el-table-column prop="address" label="地点"></el-table-column>
+        <el-table-column prop="appearnum" label="出现次数" align="center"></el-table-column>
+        <el-table-column prop="lastappear" label="最后出现时间" ></el-table-column>
+        <el-table-column prop="signin" label="注册时间" ></el-table-column>
+        <el-table-column prop="pic" label="人脸图片">
+          <template slot-scope="scope">
+            <div class="show-img-box">
+              <img :src="scope.row.pic" alt="">
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" align="center">
+          <template slot-scope="scope">
+            <div class="tab-btn-box">
+              <span @click="showImg(scope.row)" class="table-btn">所有抓图片</span>
+              <span @click="activityStatus(scope.row)" class="table-btn">活动状态</span>
+           </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row class="block">
+      <el-pagination
+        class="mt10"
+        background
+        layout="prev, pager, next"
+        :total="1000">
+      </el-pagination>
+    </el-row>
+    <el-row>
+      <statusdetails ref="detail"></statusdetails>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import statusdetails from './detail'
+export default {
+  components:{
+    statusdetails
+  },
+  data() {
+    return {
+      address: "",
+      camera: "",
+      options: [
+        {
+          value: "选项1",
+          label: "社保库1"
+        },
+        {
+          value: "选项2",
+          label: "社保库2"
+        },
+        {
+          value: "选项3",
+          label: "社保库3"
+        },
+        {
+          value: "选项4",
+          label: "社保库4"
+        },
+        {
+          value: "选项5",
+          label: "社保库5"
+        }
+      ],
+      tableData: [
+        {
+          name: "王小虎",
+          age:'23',
+          sex:"男",
+          carid:"211232211221233341",
+          address: "上海市普陀区金沙江路 1518 弄",
+          appearnum:4,
+          lastappear:'2019-08-01 10:00:09',
+          signin:'2016-08-01 10:00:09',
+          pic:require('../videos/testimg/1.jpg')
+        },
+        {
+          name: "王小虎",
+          age:'23',
+          sex:"男",
+          carid:"211232211221233341",
+          address: "上海市普陀区金沙江路 1518 弄",
+          appearnum:4,
+          lastappear:'2019-08-01 10:00:09',
+          signin:'2016-08-01 10:00:09',
+          pic:require('../videos/testimg/1.jpg')
+        },
+        {
+          name: "王小虎",
+          age:'23',
+          sex:"男",
+          carid:"211232211221233341",
+          address: "上海市普陀区金沙江路 1518 弄",
+          appearnum:4,
+          lastappear:'2019-08-01 10:00:09',
+          signin:'2016-08-01 10:00:09',
+          pic:require('../videos/testimg/1.jpg')
+        },
+        {
+          name: "王小虎",
+          age:'23',
+          sex:"男",
+          carid:"211232211221233341",
+          address: "上海市普陀区金沙江路 1518 弄",
+          appearnum:4,
+          lastappear:'2019-08-01 10:00:09',
+          signin:'2016-08-01 10:00:09',
+          pic:require('../videos/testimg/1.jpg')
+        }
+      ],
+      value: "",
+      value1: ""
+    };
+  },
+  methods: {
+    showImg(data){
+      this.$refs.detail.initImg(data)
+    },
+    activityStatus(data){
+      this.$refs.detail.initchart(data)
+    }
+  },
+  created() {}
+};
+</script>
+<style lang="stylus" scoped>
+.search-box {
+  color: #333;
+  background: #fff;
+}
+.show-img-box{
+  height 60px
+  width 60px
+  img{
+    height 100%
+    width 100%
+  }
+}
+</style>

web/src/views/Activity/status.vue

+<!---活动状态--->
+<template>
+  <div class="template-box content_div_main">
+     <el-form :inline="true" class="search-form" size="small">
+        <el-form-item label="抓拍地点：">
+          <el-input type="text" class="bla bra br0" v-model="address" placeholder=""></el-input>
+        </el-form-item>
+         <el-form-item label="抓拍相机：">
+          <el-input type="text" class="bla bra br0" v-model="camera" placeholder=""></el-input>
+        </el-form-item>
+         <el-form-item label="人口库：">
+          <el-select v-model="dbname" class="br0 bra bla">
+            <el-option value="" label="请选择库类型"></el-option>
+            <el-option v-for="item in crucialData"  :key="item.unid" :value="item.code" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+         <el-form-item label="查询时间：">
+             <el-date-picker
+            v-model="value1"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+         <el-form-item>
+          <el-button  class="search-btn" @click="searchUser" icon="el-icon-search">查询</el-button>
+          <el-button  class="search-btn ml10"  @click="addGroupUser()" icon="el-icon-plus">添加</el-button>
+        </el-form-item>
+      </el-form>
+    <el-row class="table_m_type">
+      <el-table :data="tableData" style="width: 100%" height="720" >
+        <div slot="empty">
+          <div class="no-data-box">
+            <img src="../../assets/img/nodata.png" alt="暂无数据"/>
+            <div>暂无数据</div>
+          </div>
+        </div>
+      <el-table-column label="序号" type="index" width="120"></el-table-column>
+      <el-table-column label="姓名" property="name" type="name" width="180"></el-table-column>
+      <el-table-column label="性别" property="sex" :formatter="setSex" width="180"></el-table-column>
+      <el-table-column label="出生日期" property="birthday" :formatter="setBirthday"> </el-table-column>
+      <el-table-column label="身份证号" property="card_id"></el-table-column>
+      <el-table-column label="籍贯" property="provence" :formatter="setCity">
+      </el-table-column>
+      <el-table-column label="操作" width="300px" align="center">
+        <template slot-scope="scope">
+          <div class="tab-btn-box">
+            <span class="table-btn" size="" @click="handleSee(scope.$index, scope.row)">人员轨迹</span>
+          </div>
+        </template>
+      </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row class="block mt10">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" background
+        :page-size="limit" layout="total,prev, pager, next, jumper" :total="total"></el-pagination>
+    </el-row>
+    <el-row>
+      <statusdetails ref="statusdetail" :faceunid="faceunid"></statusdetails>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import statusdetails from './statusdetail'
+export default {
+  components:{
+    statusdetails
+  },
+  data() {
+    return {
+      address: "",
+      camera: "",
+      currentPage: 1,
+      limit: 20,
+      total: 0,
+      offset: 0,
+      loading: false,
+      provenceName: "",
+      cityName: "",
+      detaildialong: false,
+      curData: '',
+      faceunid:'',
+      dbname:'',
+      crucialData:[],
+      cData: '',
+      tableData: [],
+    };
+  },
+  methods: {
+     initDbData(){
+         this.axios.get(this.API.url + "/codes/custom/cates/4DD23AF66E/codes").then((response)=> {
+           this.crucialData = response.data.list_data;
+      });
+     },
+    getFace(){
+       var Vthis = this;
+        this.axios
+          .get(this.API.faceweb + "/faces/crucial_faces", {
+            params: {
+              offset: Vthis.offset,
+              limit: this.limit,
+              is_crucial: true,
+              is_active: true,
+              sex: Vthis.facesex,
+              name__like: Vthis.facename,
+              card_id__like: Vthis.facecardid,
+              crucial_type: Vthis.dbname,
+              resident_unids: this.communityunid,
+            }
+          }).then( (response) =>{
+            Vthis.tableData = response.data.list_data;
+            Vthis.total = response.data.total_num;
+          });
+    },
+    handleSee(data){
+      this.faceunid = data.face_unid;
+      this.$refs.statusdetail.init(data)
+    },
+    handleSizeChange(val) {
+      alert(val);
+    },
+    handleCurrentChange(val) {
+      this.offset = (val - 1) * this.limit;
+      this.getFace();
+    },
+  },
+  created() {
+    this.getFace()
+  }
+};
+</script>
+<style lang="stylus" scoped>
+.search-box {
+  color: #333;
+  background: #fff;
+}
+</style>

web/src/views/Activity/statusdetail.vue

+<template>
+  <div class="statusdetail">
+    <el-dialog
+      title="轨迹状态"
+      :visible.sync="show"
+      width="50%"
+      :before-close="handleClose">
+      <el-table :data="gridData">
+        <el-table-column property="date" label="日期"></el-table-column>
+        <el-table-column property="name" label="姓名"></el-table-column>
+        <el-table-column property="address" label="抓怕地址"></el-table-column>
+        <el-table-column property="address" label="抓怕图片">
+          <div class="img-box">
+           <img src="../videos/testimg/1.jpg" alt="">
+          </div>
+        </el-table-column>
+        <el-row>
+            <div class="block">
+                <el-pagination class="flr mt10" @current-change="handleCurrentChange" :current-page.sync="page.currentPage" :page-size="page.limit" layout="total,prev, pager, next, jumper" :total="page.total">
+                </el-pagination>
+            </div>
+        </el-row>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="show = false">取 消</el-button>
+        <el-button type="primary" @click="show = false">确 定</el-button>
+      </span>
+</el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show:false,
+      page: {
+        offset: 0,
+        currentPage: 1,
+        limit: 5,
+        total: 0
+      },
+      gridData: [{
+          date: '2016-05-02 16:00:00',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04 16:00:0',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-01 16:00:0',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-03 16:00:0',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }],
+    }
+  },
+    props: {
+        accunid: {},
+        faceunid: {}
+    },
+  methods:{
+    init(){
+      this.show = true;
+      console.log(data)
+      this.axios.get(this.API.url + '/faces/' + this.faceunid + '/face_events',{
+         params: {
+            limit: this.page.limit,
+            offset: this.page.offset,
+        }
+      })
+    },
+     handleCurrentChange(val) {
+        this.page.currentPage = val;
+        this.page.offset = (val - 1) * this.page.limit;
+        this.init();
+      },
+
+  },
+  mounted(){
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.activitychart{
+  height 40vh
+  width 40vw
+}
+.img-box{
+  height 60px
+  width 60px
+  img{
+    height 100%
+    width 100%
+  }
+}
+</style>

web/src/views/BaseInfo/department/index.vue

+<template>
+  <div>
+    <el-row class="mt30">
+      <el-col :span="4" class="ml50">
+        <el-input  v-model="groupname" placeholder="部门名称"></el-input>
+      </el-col>
+      <el-col :span="4" class="ml50">
+        <el-button type="primary" icon="el-icon-search"  @click="searchGroup()">查询</el-button>
+        <el-button type="primary" icon="el-icon-plus"  @click="addgroupdialog=true">创建</el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-table :data="grtableData" style="width:98%;margin:20px auto;" class="mt20">
+        <el-table-column type="index" width="">
+        </el-table-column>
+        <el-table-column prop="name" label="部门名称" width="">
+        </el-table-column>
+        <el-table-column label="创建时间" width="">
+          <template slot-scope="scope">
+            <span>{{showLocalTime(scope.row.create_dt)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="">
+          <template slot-scope="scope">
+            <div class="tab-btn-box">
+              <span class="table-btn dengers" size="" @click="DeleteGroup(scope.$index, scope.row)">删除部门</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row>
+      <el-pagination class="grouppage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page.sync="currentPage" :page-size="page.limit" layout="total,prev, pager, next, jumper" :total="page.total">
+      </el-pagination>
+    </el-row>
+    <div class="creategrop-box">
+      <el-dialog title="添加部门" :visible.sync="addgroupdialog" width="30%">
+        <div>
+          <el-form ref="addgroupform" :model="addform" label-width="80px">
+            <el-form-item label="部门名称" prop="name" :rules="[{ required: true, message: '部门不能为空'}]">
+              <el-input v-model="addform.name"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="addgroupdialog = false">取 消</el-button>
+          <el-button type="primary" @click="addGroup">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        groupname: "",
+        grtableData: [],
+        currentPage: 1,
+        addressData: [],
+        curEditData: "",
+        page: {
+          total: 0,
+          offset: 0,
+          limit: 20
+        },
+        dialogVisible: false,
+        addgroupdialog: false,
+        form: {
+          name: "",
+          org: "",
+          worktime: ""
+        },
+        addform: {
+          name: ""
+        },
+        editData: "",
+        gridData: []
+      };
+    },
+    methods: {
+      //搜索
+      searchGroup() {
+        this.getGroups();
+      },
+      /**删除部门 */
+      DeleteGroup(index, row) {
+        var data = {
+          name: row.name,
+          is_active: false
+        };
+        var Vthis = this;
+        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+          .then(() => {
+            this.axios
+              .post(this.API.auth.delugrps(row.ugrp_unid), data)
+              .then(function (response) {
+                Vthis.$message({
+                  type: "info",
+                  message: "删除成功!"
+                });
+                Vthis.getGroups();
+              });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除"
+            });
+          });
+      },
+      handleSizeChange(val) {},
+      handleCurrentChange(val) {
+        this.currentPage = val;
+        this.page.offset = (val - 1) * this.page.limit;
+      },
+
+
+      addGroup() {
+        this.$refs["addgroupform"].validate(valid => {
+          if (valid) {
+            var Vthis = this;
+            this.axios
+              .post(this.API.auth.ugrps, this.addform)
+              .then(function (response) {
+                Vthis.$message({
+                  type: "info",
+                  message: "创建成功!"
+                });
+                Vthis.addgroupdialog = false;
+                Vthis.getGroups();
+                Vthis.$refs["addgroupform"].resetFields();
+              });
+          } else {
+            console.log("error submit!!");
+            return false;
+          }
+        });
+      },
+
+      getGroups() {
+        var Vthis = this;
+        this.axios
+          .get(this.API.auth.ugrps, {
+            params: {
+              offset: Vthis.offset,
+              limit: Vthis.page.limit,
+              name__like: Vthis.groupname,
+              is_active: true
+            }
+          })
+          .then(function (response) {
+            Vthis.grtableData = response.data.list_data;
+            Vthis.page.total = response.data.total_num;
+          });
+      },
+    },
+    created() {
+      this.getGroups();
+    }
+  };
+</script>
+<style lang="stylus" scoped>
+  .grouppage {
+    float: right;
+    margin-right: 20px;
+  }
+
+  .g-btn {
+    width: 100%;
+  }
+</style>

web/src/views/BaseInfo/policeinfo/index.vue

+<template>
+  <div>
+    <el-row class="mt30">
+      <el-col :span="4" class="ml50">
+        <el-select v-model="groupname" placeholder="请选择" class="el-sel br0">
+          <el-option v-for="item in groupData" :key="item.ugrp_unid" :label="item.name" :value="item.ugrp_unid">
+          </el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="4" class="">
+        <el-input type="text" class="bl0 br0" v-model="username" placeholder="姓名"/>
+      </el-col>
+      <el-col :span="4" class="">
+        <el-input type="text" class="bra" v-model="mphone" placeholder="电话"/>
+      </el-col>
+      <el-col :span="4" class="">
+        <el-button type="primary" class="them-big-btn set-btn" icon="el-icon-search" @click="userGroupSearch">查询</el-button>
+        <el-button type="primary" class="them-big-btn set-btn ml10" @click="adduserGroup" icon="el-icon-plus">添加</el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-table :data="grustableData" style="width:98%;margin:20px auto;" class="mt20">
+        <el-table-column type="index" width=""></el-table-column>
+        <el-table-column prop="name" label="姓名" width=""></el-table-column>
+        <el-table-column prop="sex" :formatter="setSex" label="性别" width=""></el-table-column>
+        <el-table-column prop="mphone" label="联系电话" width=""></el-table-column>
+        <el-table-column label="操作" align="center" width="">
+          <template slot-scope="scope" align="center">
+            <div class="tab-btn-box">
+              <span class="table-btn" size="" @click="handleEdit(scope.$index, scope.row)">编辑成员</span>
+              <span class="table-btn dengers" size="" @click="handleDelete(scope.$index, scope.row)">删除成员</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row>
+      <!-- 添加 -->
+      <el-dialog :title="userdialogmsg" :visible.sync="adduserDialog" width="30%">
+        <div>
+          <el-form ref="userGroupform" :model="form" label-width="80px">
+            <el-form-item label="部门：">
+              <el-select v-model="form.group_name" placeholder="请选择活动区域" disabled="disabled" class="el-sel">
+                <el-option v-for="(item,index) in groupData" :label="item.name" :key="index" :value="item.ugrp_unid"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="姓名：" prop="name">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+            <el-form-item label="电话：" prop="mphone">
+              <el-input v-model="form.mphone"></el-input>
+            </el-form-item>
+            <el-form-item label="性别：">
+              <el-radio-group v-model="form.sex">
+                <el-radio label="1" >男</el-radio>
+                <el-radio label="2" >女</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="adduserDialog = false">取 消</el-button>
+          <el-button type="primary" @click="saveGroupUser">确 定</el-button>
+        </span>
+      </el-dialog>
+    </el-row>
+    <el-row>
+      <!-- 删除 -->
+      <el-dialog title="删除" :visible.sync="deleteuserDialog" size="tiny">
+        <div>
+          确定要删除该条记录
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="deleteuserDialog = false">取 消</el-button>
+          <el-button type="primary" @click="saveGroupUser">确 定</el-button>
+        </span>
+      </el-dialog>
+    </el-row>
+    <el-row>
+      <div class="block">
+        <el-pagination class="pages flr mr20" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          :current-page.sync="page.currentPage" :page-size="page.limit" layout="total,prev, pager, next, jumper" :total="page.total">
+        </el-pagination>
+      </div>
+    </el-row>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        groupname: '',
+        username: '',
+        mphone: '',
+        groupData: [],
+        grustableData: [],
+        adduserDialog: false,
+        deleteuserDialog: false,
+        userdialogmsg: '添加成员',
+        form: {
+          norm_type: "employee",
+          user_type: "user",
+          group_name: '',
+          name: '',
+          sex: '',
+          mphone: '',
+          fax: '',
+          email: "",
+          is_active: true
+        },
+        page: {
+          offset: 0,
+          limit: 20,
+          total: 0,
+          currentPage: 0
+        },
+      }
+    },
+    methods: {
+      //查询
+      userGroupSearch() {
+        this.getUser();
+      },
+      adduserGroup() {
+        this.form = {
+            norm_type: "employee",
+            user_type: "user",
+            group_name: '',
+            name: '',
+            sex: '',
+            mphone: '',
+            fax: '',
+            email: "",
+            is_active: true
+          },
+          this.form.group_name = this.groupname;
+        this.adduserDialog = true;
+      },
+      handleEdit(index, row) { //编辑
+        this.userdialogmsg = '编辑成员信息'
+        this.form = row;
+        this.form.group_name = this.groupname;
+        this.adduserDialog = true;
+      },
+      handleDelete(index, row) {
+        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.axios.delete(this.API.auth.delUserToGroup(this.groupname,row.user_unid), {}).then((
+            response) => {
+            this.adduserDialog = false;
+            this.delUser(row)
+          });
+
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+      },
+      delUser(row){
+         this.axios.post(this.API.auth.edituser(row.user_unid), {
+              is_active: false
+            }).then((response) =>{
+              this.getUser();
+              this.$message({
+                type: "success",
+                message: "删除成功!"
+              });
+            });
+      },
+      saveGroupUser() {
+        this.adduserDialog = false;
+        var url = '';
+        if (this.form.user_unid) {
+          //编辑
+          url = this.API.auth.edituser(this.form.user_unid)
+          this.axios.post(url, this.form).then((response)=> {
+            this.adduserDialog = false;
+            this.$message({
+              type: 'info',
+              message: '修改成功!'
+            });
+            this.getUser()
+          });
+        } else {
+          //添加
+          url = this.API.auth.user
+          this.axios.post(url, this.form).then((response)=> {
+            this.adduserDialog = false;
+            this.addUserToGroups(response.data.user_unid);
+          });
+        }
+      },
+      addUserToGroups(userid) { // 将一个用户添加进一个组
+        this.axios.post(this.API.auth.userTogroup(this.groupname), {
+          "user_unid": userid,
+        }).then( (response) => {
+          this.$message({
+            type: 'success',
+            message: '创建成功!'
+          });
+          this.adduserDialog = false;
+          this.getUser();
+        });
+      },
+      setSex(row, column, cellValue) {
+        var sex = '';
+        if (cellValue == '1')
+          sex = '男'
+        if (cellValue == '2')
+          sex = '女'
+        return sex
+      },
+      getGroup(callback) {
+        this.axios.get(this.API.auth.ugrps, {
+          params: {
+            offset: this.page.offset,
+            limit: 1000,
+            is_active: true,
+          }
+        }).then((response) => {
+          this.groupData = response.data.list_data;
+          this.groupname = response.data.list_data[0].ugrp_unid
+          this.getUser();
+        });
+      },
+      getUser() {
+        this.axios.get(this.API.auth.userTogroup(this.groupname), {
+          params: {
+            offset: this.page.offset,
+            limit: this.page.limit,
+            name__like: this.username,
+            mphone__like: this.mphone,
+            is_active: true,
+          }
+        }).then((response) => {
+          this.grustableData = response.data.list_data;
+          this.page.total = response.data.total_num;
+        });
+      },
+      handleSizeChange(val) {},
+      handleCurrentChange(val) {
+        this.page.offset = (val - 1) * this.page.limit;
+        this.currentPage = val;
+        this.getUser()
+      }
+    },
+    created() {
+      this.getGroup();
+    }
+  }
+
+</script>
+<style lang="stylus" scoped>
+  .white-color
+   color #fff
+
+</style>

web/src/views/Deploy/dbManage/cardb/carDetail.vue

+<template>
+<div>
+       <el-dialog title="车辆详情" :visible.sync="isShow"  v-loading.body="loading" class="facedetail-box" :before-close="closedialong">
+                <div class="detail-aline"></div>
+                <el-row class="alarm-info-box">
+                    <el-col :span="24" class='row'>
+                        <el-col :span="12">
+                            <span class="info-label"><span class="info-label-name">库类型:</span></span>
+                            <span class="info-text">{{detailInfo.lib}}</span>
+                        </el-col>
+                        <el-col :span="12">
+                            <span class="info-label"><span class="info-label-name">车牌号码:</span></span>
+                            <span class="info-text">{{detailInfo.vehicle.plate_text}}</span>
+                        </el-col>
+                    </el-col>
+                     <el-col :span="24" class='row'>
+                        <el-col :span="12">
+                            <span class="info-label"><span class="info-label-name">车牌类型:</span></span>
+                            <span class="info-text">{{getCode('号牌类型',detailInfo.vehicle.plate_type)}}</span>
+                        </el-col>
+                        <el-col :span="12">
+                            <span class="info-label"><span class="info-label-name">车辆类型:</span></span>
+                            <span class="info-text">{{getCode('车辆类型',detailInfo.vehicle.vehicle_type)}}</span>
+                        </el-col>
+                    </el-col>
+                     <el-col :span="24" class='row'>
+                        <el-col :span="12">
+                            <span class="info-label"><span class="info-label-name">车身颜色:</span></span>
+                            <span class="info-text">{{getCode('车身颜色',detailInfo.vehicle.body_color)}}</span>
+                        </el-col>
+                        <el-col :span="12">
+                            <span class="info-label"><span class="info-label-name">车主姓名:</span></span>
+                            <span class="info-text">{{detailInfo.owner.name}}</span>
+                        </el-col>
+                    </el-col>
+                     <el-col :span="24" class='row'>
+                        <el-col :span="12">
+                            <span class="info-label"><span class="info-label-name">身份证号:</span></span>
+                            <span class="info-text">{{detailInfo.owner.cnsf_id}}</span>
+                        </el-col>
+                    </el-col>
+                    <el-col :span="10">
+                        <el-col :span="7" v-for="path in detailInfo.pics" :key="path.unid" class="pic-box">
+                            <img :src="path.url_path" alt="">
+                        </el-col>
+                    </el-col>
+                </el-row>
+                <span slot="footer" class="dialog-footer">
+                    <el-button @click="closedialong">关闭</el-button>
+                </span>
+            </el-dialog>
+            </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      isShow: false,
+      disabled: true,
+      detailInfo: {
+        owner:{},
+        vehicle:{}
+      },
+      loading: true,
+      cData: "",
+      dbData: [],
+      cartypeData:[]
+    };
+  },
+
+  methods: {
+    dataInit(data){
+      console.log(data)
+      let obj = data
+      obj.lib = this.$parent.setLib(1,1,data.lib_code)
+      this.detailInfo = data
+      this.isShow = true
+    },
+    closedialong() {
+      this.isShow = false
+    },
+    getFaceDetail(data) {
+      this.axios.get(FACEWS + "/faces/" + data.unid).then((response)=> {
+        this.detailInfo = response.data;
+        this.loading = false;
+      });
+    },
+    initDbData() {
+      this.axios
+        .get(this.IP + "/api/v1/codes/custom/cates/4DD23AF66E/codes")
+        .then(response => {
+          this.dbData = response.data.list_data;
+        });
+    },
+    initcartypeData() {
+      this.axios
+        .get(this.IP + "/api/v1/codes/simple/cates/09BB973F92/codes")
+        .then(response => {
+          this.cartypeData = response.data.list_data;
+        });
+    }
+  },
+  created() {
+    this.initDbData();
+    this.initcartypeData();
+  }
+};
+</script>
+<style lang="stylus" scoped>
+.alarm-info-box {
+    max-height: 500px;
+    overflow: auto;
+}
+
+.pic-box {
+    margin-right: 5%;
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+.row
+  margin-bottom 15px
+</style>

web/src/views/Deploy/dbManage/cardb/carTable.vue

+<template>
+  <div>
+    <el-table :data="tableData" style="width: 98%;margin:0 auto;" v-loading.body="loading">
+      <el-table-column label="序号" type="index" width="120" align="center"></el-table-column>
+      <el-table-column label="车牌号码" property="vehicle.plate_text" type="name" width="180" align="center"></el-table-column>
+      <el-table-column label="车库类型" property="lib_code" type="name" width="180" align="center" :formatter="setLib"></el-table-column>
+      <el-table-column label="车牌类型" property="vehicle.plate_type" :formatter="setPlateType" width="180" align="center"></el-table-column>
+      <el-table-column label="车辆类型" property="vehicle.vehicle_type" :formatter="setCarType" align="center"> </el-table-column>
+      <el-table-column label="车身颜色" property="vehicle.body_color" :formatter="setCarColor" align="center"> </el-table-column>
+      <el-table-column label="车主姓名" property="owner.name" align="center"> </el-table-column>
+      <el-table-column label="身份证号" property="owner.cnsf_id" align="center"></el-table-column>
+      <el-table-column label="操作" width="300px" align="center">
+        <template slot-scope="scope">
+          <div class="tab-btn-box">
+            <span class="table-btn" size="" @click="handleSee(scope.$index, scope.row)">查看详情</span>
+            <span class="table-btn" size="" @click="handleEdit(scope.$index, scope.row)">编辑车辆</span>
+            <span class="table-btn dengers" size="" @click="handleDelete(scope.$index, scope.row)">删除</span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="block">
+      <el-pagination class="pages" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
+        :page-size="limit" layout="total,prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+    <div>
+      <carDetail ref='detail'></carDetail>
+    </div>
+  </div>
+</template>
+<script>
+  import carDetail from './carDetail'
+  export default {
+    data() {
+      return {
+        tableData: [],
+        currentPage: 1,
+        limit: 20,
+        total: 0,
+        offset: 0,
+        loading: true,
+        provenceName: "",
+        cityName: "",
+        cData: '',
+        carLibs:[]
+      };
+    },
+    props: {
+      lib_code: {
+        //库名称
+        // type: String
+      },
+      plateType: {
+        //车牌类型
+        // type: String
+      },
+      plateText: {
+        //车牌号码
+        // type: String
+      },
+      carOwner: {
+        //车主姓名
+      }
+    },
+    methods: {
+      handleSee(index, row) {
+        this.$refs.detail.dataInit(row)
+      },
+      handleEdit(index, row) {
+        this.$emit("edit", index, row);
+      },
+      handleDelete(index, row) {
+          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+          .then(() => {
+            console.log(this.axios)
+            this.axios
+              .delete(this.IP + "/api/v1/alarm/traffic/lib_vehicles/" + row.unid)
+              .then((response)=> {
+                this.initTable();
+                this.$message({
+                  type: "success",
+                  message: "删除成功!"
+                });
+              });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除"
+            });
+          });
+      },
+      setLib(row, column, cellValue){
+        let str;
+        this.carLibs.forEach(ele => {
+          if (ele.lib==cellValue) {
+            str = ele.name
+          }
+        });
+        return str
+      },
+      setPlateType(row, column, cellValue) {
+        return this.getCode('号牌类型', cellValue)
+      },
+      setCarType(row, column, cellValue) {
+        return this.getCode('车辆类型', cellValue)
+      },
+      setCarColor(row, column, cellValue) {
+        return this.getCode('车身颜色', cellValue)
+      },
+      handleSizeChange(val) {
+        alert(val);
+      },
+      handleCurrentChange(val) {
+        this.offset = (val - 1) * this.limit;
+        this.initTable();
+      },
+      initTable() {
+        this.axios
+          .get(this.IP + "/api/v1/alarm/traffic/lib_vehicles", {
+            params: {
+              offset: this.offset,
+              limit: this.limit,
+              plate_text__like: this.plateText,
+              plate_type: this.plateType,
+              owner_name__like: this.carOwner,
+              lib_code: this.lib_code,
+            }
+          }).then((response)=> {
+            this.tableData = response.data.list_data;
+            this.total = response.data.total_num;
+            this.loading = false;
+          });
+      }
+    },
+    components: {
+      carDetail
+    },
+    computed: {},
+    created() {
+      this.faceapi.getCarDbData().then(res=>{
+        this.carLibs = res.list_data
+        this.initTable();
+      })
+    }
+  };
+
+</script>
+<style lang="stylus" scoped>
+  .mb20 {
+    margin-bottom: 50px;
+  }
+
+  .pages {
+    float: right;
+    margin: 20px 15px 30px 0;
+  }
+
+</style>
+

web/src/views/Deploy/dbManage/cardb/cardb.vue

+<template>
+  <div>
+    <el-row class="mt30">
+      <el-col :span="3" :offset="1">
+        <el-select v-model="lib_code" class="br0 bra">
+          <el-option value="" label="请选择库"></el-option>
+          <el-option v-for="item in crucialData"  :key="item.lib" :value="item.lib" :label="item.name"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="3">
+        <el-select v-model="plateType" class="bla br0 bra">
+          <el-option value="" label="请选择车牌类型"></el-option>
+          <el-option v-for="item in plateTypes" :key="item.cate" :value="item.code" :label="item.name"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="3" >
+        <el-input type="text" class="bla bra br0" v-model="plateText" placeholder="请输入车牌号码"></el-input>
+      </el-col>
+      <el-col :span="3" >
+        <el-input type="text" class="bla" v-model="carOwner" placeholder="请输入车主姓名"></el-input>
+      </el-col>
+      <el-col :span="2">
+        <el-button class="set-btn"  style="width:80%;float:right;" icon="search" @click="searchFace">搜索</el-button>
+      </el-col>
+       <el-col :span="2" class="ml10">
+        <el-button :plain="true" icon="edit" class="set-btn" style="width:80%" type="info" @click="addFaceBlack">添加</el-button>
+      </el-col>
+    </el-row>
+    <el-dialog title="车辆管理" :visible.sync="dialogVisible" size="small" >
+      <el-form :model="form" ref="personform" class="mt10" :rules="rules">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="库类型" prop="lib_code" :label-width="formLabelWidth" :rules="[
+              { required: true, message: '请选择库类型'},
+            ]">
+              <el-select v-model="form.lib_code" type="lib_code" placeholder="请选择库类型">
+                <el-option v-for="item in crucialData" :key="item.lib" :label="item.name" :value="item.lib"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="车牌号码" prop="plate_text" :label-width="formLabelWidth">
+              <el-input  v-model="form.vehicle.plate_text" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="车牌类型" prop="vehicle.plate_type" :label-width="formLabelWidth" :rules="[
+              { required: true, message: '请选择车牌类型'},
+            ]">
+              <el-select v-model="form.vehicle.plate_type" type="vehicle.plate_type" placeholder="请选择车牌类型">
+                <el-option v-for="item in plateTypes" :key="item.code" :label="item.name" :value="item.code"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="车辆类型" prop="vehicle.vehicle_type" :label-width="formLabelWidth" :rules="[
+              { required: true, message: '请选择车辆类型'},
+            ]">
+              <el-select v-model="form.vehicle.vehicle_type" type="vehicle.vehicle_type" placeholder="请选择车辆类型">
+                <el-option v-for="item in carTypes" :key="item.code" :label="item.name" :value="item.code"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="车身颜色" prop="vehicle.body_color" :label-width="formLabelWidth" :rules="[
+              { required: true, message: '请选择车身颜色'},
+            ]">
+              <el-select v-model="form.vehicle.body_color" type="vehicle.body_color" placeholder="请选择车身颜色">
+                <el-option v-for="item in carColors" :key="item.code" :label="item.name" :value="item.code"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="车主姓名" prop="name" :label-width="formLabelWidth">
+              <el-input  v-model="form.owner.name" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="身份证号" prop="cnsf_id" :label-width="formLabelWidth">
+              <el-input v-model="form.owner.cnsf_id" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="subMitBlack">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-row class="mt20">
+      <carTable @edit="editTable" :lib_code="lib_code" :plateType="plateType" :plateText="plateText" :carOwner="carOwner" ref="c1"></carTable>
+    </el-row>
+  </div>
+</template>
+<script>
+import carTable from "./carTable";
+export default {
+  data() {
+    var checkPlate = (rule, value, callback)=> {
+      let boo = /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{7}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/.test(this.form.vehicle.plate_text)
+      if (!boo) {
+        return callback(new Error('车牌号不符合规范'));
+      } else {
+        callback()
+      }
+    }
+    return {
+      Substate: 1,
+      lib_code: "",
+      plateType: "",
+      plateText: "",
+      carOwner: "",
+      curEditData: [], //当前编辑的数据      
+      dialogVisible: false,
+      faceunid: "",
+      plateTypes:[],//所有车牌类型
+      carTypes:[],//所有车辆类型
+      carColors:[],//所有车辆颜色
+      crucialData:"",
+      form: {
+        lib_code:"",
+        vehicle:{
+          plate_type: "",
+          plate_text: "",
+          vehicle_type: "",
+          body_color: "",
+        },
+        owner:{
+          name:'',
+          cnsf_id:''
+        },
+      },
+      formLabelWidth: "120px",
+      rules: {
+        plate_text: [
+          {validator: checkPlate, trigger:'blur'}
+        ]}
+    };
+  },
+  components: {
+    carTable
+  },
+  computed: {},
+  methods: {
+    //搜索人员
+    searchFace() {
+      this.$refs.c1.initTable(); //调用子组件搜索方法
+    },
+    editTable(index, val) {
+      this.Substate = 2;
+      this.dialogVisible = true;
+      this.getInfo(val.unid).then((response)=>{
+        this.initEditFaceInfo(response)
+      });
+      this.faceunid = val.unid;
+    },
+    addFaceBlack() {
+      this.dialogVisible = true;
+      this.initFaceInfo();
+      this.Substate = 1; 
+    },
+    subMitBlack() {
+      this.$refs["personform"].validate(valid => {
+        if (valid) {
+          if (this.Substate == 1) this.saveAddCar();
+          if (this.Substate == 2) this.saveEditCar();
+          this.dialogVisible = false;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    getInfo(unid) {
+      return new Promise((resolve,reject)=> {
+        this.axios.get(this.IP + '/api/v1/alarm/traffic/lib_vehicles/' + unid).then((response)=> {
+          resolve(response.data)
+        });
+      })
+    },
+    initEditFaceInfo(data) {
+      this.curEditData = data;
+      this.form.lib_code = data.lib_code;
+      this.form.vehicle.plate_type = data.vehicle.plate_type;
+      this.form.vehicle.plate_text = data.vehicle.plate_text;
+      this.form.vehicle.vehicle_type = data.vehicle.vehicle_type;
+      this.form.vehicle.body_color = data.vehicle.body_color;
+      this.form.owner.name = data.owner.name;
+      this.form.owner.cnsf_id = data.owner.cnsf_id;
+    },
+    initFaceInfo() {
+      this.form.lib_code = "";
+      this.form.vehicle.plate_type = "";
+      this.form.vehicle.plate_text = "";
+      this.form.vehicle.vehicle_type = "";
+      this.form.vehicle.body_color = "";
+      this.form.owner.name = "";
+      this.form.owner.cnsf_id = "";
+    },
+    saveAddCar() {
+      this.axios.post(this.IP + "/api/v1/alarm/traffic/lib_vehicles", this.form).then((response)=> {
+        this.initFaceInfo()
+        this.$refs.c1.initTable();
+        this.$message({
+          message: "添加车辆成功！",
+          type: 'success'
+        })
+      });
+    },
+    saveEditCar() {
+      this.axios.post(this.IP + "/api/v1/alarm/traffic/lib_vehicles/" + this.faceunid, this.form).then((response)=> {
+          this.$refs["personform"].resetFields();
+          this.$refs.c1.initTable();
+          let messageInfo = "";
+          if(this.Substate == 2) messageInfo ="修改车辆成功！"
+          this.$message({
+            message: messageInfo,
+            type: 'success'
+          })
+        });
+    },
+    //初始化下拉菜单项
+     initDbData(){
+      this.faceapi.getCarDbData().then(response => {
+        this.crucialData = response.list_data
+      });
+     },
+    carSlected: function (params) {
+      this.getValueByName('号牌类型').then((response)=>{
+        this.plateTypes = response
+      })
+      this.getValueByName('车辆类型').then((response)=>{
+        this.carTypes = response
+      })
+      this.getValueByName('车身颜色').then((response)=>{
+        this.carColors = response
+      })
+    },
+     getValueByName: function(str) {
+        return new Promise((resolve, reject) => {
+          this.axios.get(this.IP + '/api/v1/codes/traffic/cates').then((response)=> {
+            let unid;
+            response.data.list_data.forEach((ele)=>{
+              if (ele.name == str) {
+                unid = ele.cate_unid
+              }
+            })
+            resolve(unid);
+          });
+        }).then((data)=>{
+          return new Promise((resolve, reject) => {
+            this.axios.get(this.IP + '/api/v1/codes/traffic/cates/' + data + '/codes').then((response)=> {
+              resolve(response.data.list_data);
+            });
+          })
+        })
+			},
+   },
+  created() {
+    //初始化下拉菜单项
+    this.carSlected()
+    this.initDbData();
+  },
+  mounted() {}
+};
+</script>
+<style lang="stylus" scoped>
+.el-date-editor.el-input {
+  width: 100%;
+}
+
+.cc {
+  text-align: center;
+}
+
+</style>

web/src/views/Deploy/dbManage/facedb/faceDetail.vue

+<template>
+  <div>
+    <el-dialog title="人员详情" :visible.sync="detaildialong" v-loading.body="loading" width="60%" :before-close="closedialong">
+      <div class="detail-aline"></div>
+      <el-row class="alarm-info-box">
+        <el-col :span="14">
+          <el-col :span="12">
+            <span class="info-label">
+              <span class="info-label-name">姓名:</span>
+            </span>
+            <span class="info-text">{{faceInfo.name}}</span>
+          </el-col>
+          <el-col :span="12" class="mt10 clear-both">
+            <span class="info-label">
+              <span class="info-label-name">性别:</span>
+            </span>
+            <span class="info-text">{{faceInfo.sex |sexfn}}</span>
+          </el-col>
+          <el-col :span="12" class="mt10 clear-both">
+            <span class="info-label">
+              <span class="info-label-name">生日:</span>
+            </span>
+            <span class="info-text">{{faceInfo.birthday}}</span>
+          </el-col>
+          <el-col :span="12" class="mt10 clear-both">
+            <span class="info-label">
+              <span class="info-label-name">证件类型:</span>
+            </span>
+            <span class="info-text">{{getcardtype(faceInfo.card_type)}}</span>
+          </el-col>
+          <el-col :span="12" class="mt10 clear-both">
+            <span class="info-label">
+              <span class="info-label-name">证件号:</span>
+            </span>
+            <span class="info-text">{{faceInfo.card_id}}</span>
+          </el-col>
+          <el-col :span="12" class="mt10 clear-both">
+            <span class="info-label">
+              <span class="info-label-name">手机号:</span>
+            </span>
+            <span class="info-text">{{faceInfo.mphone}}</span>
+          </el-col>
+          <el-col :span="12" class="mt10 clear-both">
+            <span class="info-label">
+              <span class="info-label-name">籍贯:</span>
+            </span>
+            <span class="info-text">{{showCity(faceInfo.province,faceInfo.city)}}</span>
+          </el-col>
+          <!-- 户籍库详细信息 -->
+          <el-row v-show="faceInfo.extra_info" v-if="faceInfo.extra_info">
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">人员编号:</span>
+              </span>
+              <span class="info-text" :title="faceInfo.extra_info.rybh">{{faceInfo.extra_info.rybh}}</span>
+            </el-col>
+
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">姓名拼音:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xmpy}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">民族:</span>
+              </span>
+              <span class="info-text">{{getCode(1004, faceInfo.extra_info.mzdm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">文化程度:</span>
+              </span>
+              <span class="info-text">{{getCode(1005, faceInfo.extra_info.whcddm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">血型:</span>
+              </span>
+              <span class="info-text">{{getCode(1006, faceInfo.extra_info.xxdm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">职业:</span>
+              </span>
+              <span class="info-text">{{getCode(1012, faceInfo.extra_info.zylb)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">户籍区划:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.hjqh}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">户籍详址:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.hjxz}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">现住详址:</span>
+              </span>
+              <span class="info-text" :title="faceInfo.extra_info.xzzxz">{{faceInfo.extra_info.xzzxz}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">原始户籍详址:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.yshjxz}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">现住址区划:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xzzqh}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">原始现住址详址:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.ysxzzxz}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">现住址所属分局代码:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xzzssfjdm}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">现住址所属派出所代码:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xzzsspcsdm}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">现住址所属责任区代码:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xzzsszrqdm_1}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">现住址户编码:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xzzhuid}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">类型:</span>
+              </span>
+              <span class="info-text">{{getCode(1012,faceInfo.extra_info.type)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">采集人员:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.cjry}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">采集时间:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.cjsj}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">固定电话:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.gddh}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">关注人员类型:</span>
+              </span>
+              <span class="info-text">{{getCode(1067,faceInfo.extra_info.gzrylx)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">与责任人关系代码:</span>
+              </span>
+              <span class="info-text">{{getCode(1009,faceInfo.extra_info.yzrrgxdm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">状态:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.zt}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">对应警综系统的序列号:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xlh}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">对应警综的系统时间:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xtsj}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">联系电话:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.lxdh}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">婚姻状况:</span>
+              </span>
+              <span class="info-text">{{getCode(1007,faceInfo.extra_info.hyzkdm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">服务场所:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.fwcs}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">老社区警务房屋编码:</span>
+              </span>
+              <span class="info-text" :title="faceInfo.extra_info.xzzfwbm">{{faceInfo.extra_info.xzzfwbm}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">身高cm:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.sg}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">曾用名:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.cym}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">兵役状况代码:</span>
+              </span>
+              <span class="info-text">{{getCode(1021, faceInfo.extra_info.byzkdm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">宗教信仰代码:</span>
+              </span>
+              <span class="info-text">{{getCode(1020, faceInfo.extra_info.zjxydm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">联系电话修改备份20160729:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.lxdh1}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">是否导入20160729:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.bz1}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">原现住址所属责任区代码:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.yxzzsszrqdm}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">责任区代码更新:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.zrqdmgx}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">入库时间:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.rksj}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">与户主关系代码:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.yhzgxdm}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">移动端操作时间:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.m_czsj}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">移动端操作标识:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.m_czbs}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">移动端操作人员:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.m_czry}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">移动端操作类型:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.m_czlx}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">更新时间:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.gxsj}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">更新人员:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.gxry}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">从业人员单位名称:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.cyrydwmc}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">从业人员单位id:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.cyrydwid}}</span>
+            </el-col>
+          </el-row>
+          <!-- 户籍人员详情 END -->
+        </el-col>
+        <el-col :span="10">
+          <el-col :span="7" v-for="path in faceInfo.pics" :key="path.unid" class="pic-box">
+            <img :src="path.pic_url" alt="">
+          </el-col>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closedialong">取 消</el-button>
+        <el-button type="primary" @click="closedialong">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  var codeNation = 1004; //民族
+  var codeCulture = 1005; //文化程度
+  var codeBlood = 1006; //血型
+  var codeRelationTOhead = 1009; //与户主关系
+  var codePersonType = 1012; //人员类别
+  var profession = 1013; //职业
+  var faith = 1020; //宗教信仰
+  var army = 1021; //服兵役情况
+  var personType = 1067; //关注人员类型
+  var marriage = 1007; //婚姻状况
+  export default {
+    data() {
+      return {
+        disabled: true,
+        faceInfo: [],
+        loading: true,
+        cData: "",
+        dbData: [],
+        cartypeData: []
+      };
+    },
+    props: {
+      facedata: {},
+      detaildialong: {}
+    },
+    methods: {
+      closedialong() {
+        this.$emit("closedialong");
+      },
+      getFaceDetail(data) {
+        var Vthis = this;
+        this.axios.get(this.API.faceweb + "/faces/" + data.unid).then(function (response) {
+          Vthis.faceInfo = response.data;
+        });
+      },
+      getcardtype(data) {
+        let cardname = "";
+        this.cartypeData.forEach(function (ele) {
+          if (ele.code == data) {
+            cardname = ele.name;
+          }
+        }, this);
+        return cardname;
+      },
+      initDbData() {
+        this.axios
+          .get(this.API.url + "/codes/custom/cates/4DD23AF66E/codes")
+          .then(response => {
+            this.dbData = response.data.list_data;
+          });
+      },
+      initcartypeData() {
+        this.axios
+          .get(this.API.url + "/codes/simple/cates/09BB973F92/codes")
+          .then(response => {
+            this.cartypeData = response.data.list_data;
+          });
+      }
+    },
+    watch: {
+      facedata(val) {
+        this.getFaceDetail(val);
+        this.loading = true;
+      }
+    },
+    created() {
+      this.initDbData();
+      this.initcartypeData();
+    }
+  };
+
+</script>
+<style lang="stylus" scoped>
+  .alarm-info-box {
+    max-height: 500px;
+    overflow: auto;
+  }
+
+  .pic-box {
+    margin-right: 5%;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+</style>
+

web/src/views/Deploy/dbManage/facedb/faceTable.vue

+<template>
+  <div>
+    <el-table :data="tableData" style="width: 98%;margin:0 auto;" v-loading.body="loading">
+      <el-table-column label="序号" type="index" width="120"></el-table-column>
+      <el-table-column label="姓名" property="name" type="name" width="180"></el-table-column>
+      <el-table-column label="性别" property="sex" :formatter="setSex" width="180"></el-table-column>
+      <el-table-column label="出生日期" property="birthday" :formatter="setBirthday"> </el-table-column>
+      <el-table-column label="身份证号" property="card_id"></el-table-column>
+      <el-table-column label="籍贯" property="provence" :formatter="setCity">
+      </el-table-column>
+      <el-table-column label="操作" width="300px" align="center">
+        <template slot-scope="scope">
+          <div class="tab-btn-box">
+            <span class="table-btn" size="" @click="handleSee(scope.$index, scope.row)">查看详情</span>
+            <span class="table-btn" size="" @click="handleEdit(scope.$index, scope.row)">编辑人像</span>
+            <span class="table-btn dengers" size="" @click="handleDelete(scope.$index, scope.row)">删除</span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="block">
+      <el-pagination class="pages" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
+        :page-size="limit" layout="total,prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+    <div>
+      <faceDetail :facedata="curData"  :detaildialong="detaildialong" @closedialong="closedetail"></faceDetail>
+    </div>
+  </div>
+</template>
+<script>
+  import faceDetail from './faceDetail'
+  export default {
+    data() {
+      return {
+        tableData: [],
+        currentPage: 1,
+        limit: 20,
+        total: 0,
+        offset: 0,
+        loading: true,
+        provenceName: "",
+        cityName: "",
+        detaildialong: false,
+        curData: '',
+        cData: '',
+      };
+    },
+    props: {
+      dbname: {
+        //库名称
+        type: String
+      },
+      facename: {
+        //姓名
+        type: String
+      },
+      facesex: {
+        //性别
+        type: String
+      },
+      facecardid: {
+        //身份证号
+      },
+      communityunid: {
+        //地区id
+      }
+    },
+    methods: {
+      closedetail() {
+        this.detaildialong = false;
+      },
+      handleSee(index, row) {
+        this.detaildialong = true;
+        this.curData = row;
+      },
+      handleEdit(index, row) {
+        this.$emit("edit", index, row);
+      },
+      handleDelete(index, row) {
+        var Vthis = this;
+        var Athis = "";
+        var a = this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+          .then(() => {
+            Athis = this;
+            Vthis.axios
+              .delete(FACEWEB + "/faces/" + row.unid, {
+                is_active: false
+              })
+              .then(function (response) {
+                Vthis.initTable();
+                Athis.$message({
+                  type: "success",
+                  message: "删除成功!"
+                });
+              });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除"
+            });   
+          });
+      },
+      setCity(row, column, cellValue) {
+        return this.showCity(row.province, row.city)
+      },
+      setSex(row, column, cellValue) {
+        var sex = "";
+        if (cellValue == "1") sex = "男";
+        if (cellValue == "2") sex = "女";
+        return sex;
+      },
+      setBirthday(row, column, cellValue) {
+        var data = "";
+        if (cellValue) data = cellValue.split(" ")[0];
+        return data;
+      },
+      handleSizeChange(val) {
+        alert(val);
+      },
+      handleCurrentChange(val) {
+        this.offset = (val - 1) * this.limit;
+        this.initTable();
+      },
+      initTable() {
+        var Vthis = this;
+        this.axios
+          .get(FACEWEB + "/faces/crucial_faces", {
+            params: {
+              offset: Vthis.offset,
+              limit: this.limit,
+              is_crucial: true,
+              is_active: true,
+              sex: Vthis.facesex,
+              name__like: Vthis.facename,
+              card_id__like: Vthis.facecardid,
+              crucial_type: Vthis.dbname,
+              resident_unids: this.communityunid,
+            }
+          }).then(function (response) {
+            Vthis.tableData = response.data.list_data;
+            Vthis.total = response.data.total_num;
+            Vthis.loading = false;
+          });
+      }
+    },
+    components: {
+      faceDetail
+    },
+    computed: {},
+    created() {
+      this.initTable();
+    }
+  };
+
+</script>
+<style lang="stylus" scoped>
+  .mb20 {
+    margin-bottom: 50px;
+  }
+
+  .pages {
+    float: right;
+    margin: 20px 15px 30px 0;
+  }
+
+</style>
+

web/src/views/Deploy/dbManage/facedb/facedb.vue

+<template>
+  <div>
+    <el-row class="mt30">
+       <el-col :span="3" :offset="1" >
+        <el-select v-model="communityunid" class="br0 bra">
+          <el-option value="" label="请选择地点"></el-option>
+          <el-option v-for="item in communityData"  :key="item.unid" :value="item.unid" :label="item.org_name"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="3">
+         <el-select v-model="dbname" class="br0 bra bla">
+          <el-option value="" label="请选择库类型"></el-option>
+          <el-option v-for="item in crucialData"  :key="item.unid" :value="item.code" :label="item.name"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="3" >
+        <el-input type="text" class="br0 bla bra" v-model="facename" placeholder="请输入姓名"></el-input>
+      </el-col>
+      <el-col :span="3">
+         <el-select v-model="facesex" class="br0 bra bla">
+           <el-option value="" label="请选择性别"></el-option>
+          <el-option :value="1" label="男"></el-option>
+          <el-option :value="2" label="女"></el-option>
+         </el-select>
+      </el-col>
+      <el-col :span="3">
+        <el-input type="text" class="bla" placeholder="请输入证件号" v-model="facecard_id"></el-input>
+      </el-col>
+      <el-col :span="2">
+        <el-button class="set-btn"  style="width:80%;float:right;" icon="search" @click="searchFace">搜索</el-button>
+      </el-col>
+       <el-col :span="2" class="ml10">
+        <el-button :plain="true" icon="edit" class="set-btn" style="width:80%" type="info" @click="addFaceBlack">添加</el-button>
+      </el-col>
+    </el-row>
+    <el-dialog title="人员管理" :visible.sync="dialogVisible" size="small" >
+      <el-row>
+        <el-upload ref="upload" action="" :file-list="fileList" :http-request="uploadimg" list-type="picture-card" :before-upload="beforeAvatarUpload" :on-progress="successImg" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-row>
+      <el-form :model="form" ref="personform" class="mt10" :rules="rules">
+        <el-row>
+          <div style="overflow:hidden">
+              <el-col :span="12">
+            <el-form-item label="姓名" :label-width="formLabelWidth">
+              <el-input v-model="form.name" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="库类型" prop="crucial_type" :label-width="formLabelWidth" :rules="[ { required: true, message: '请选择库类型'}]">
+              <el-select v-model="form.crucial_type" type="crucial_type" placeholder="请选择库类型">
+                <el-option v-for="item in crucialData" :key="item.code" :label="item.name" :value="item.code"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          </div>
+          <div style="overflow:hidden">
+             <el-col :span="12">
+            <el-form-item label="人员类型" :label-width="formLabelWidth">
+              <el-input v-model="form.crime_act" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="性别" :label-width="formLabelWidth">
+              <el-select v-model="form.sex" placeholder="请选择性别">
+                <el-option label="男" value="1"></el-option>
+                <el-option label="女" value="2"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          </div>
+          <div style="overflow:hidden">
+          <el-col :span="12">
+            <el-form-item label="生日" :label-width="formLabelWidth">
+              <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="证件类型" :label-width="formLabelWidth">
+              <el-select v-model="form.card_type" placeholder="请选择证件类型">
+                <el-option v-for="item in cartypeData" :key="item.code" :label="item.name" :value="item.code"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          </div>
+           <div style="overflow:hidden">
+          <el-col :span="12">
+            <el-form-item label="证件号" prop="card_id" :label-width="formLabelWidth">
+              <el-input  v-model="form.card_id" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号" prop="mphone" :label-width="formLabelWidth">
+              <el-input v-model="form.mphone" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col>
+           </div>
+            <div style="overflow:hidden">
+          <el-col :span="12">
+            <el-form-item label="籍贯" :label-width="formLabelWidth">
+              <el-col :span="11">
+                <el-select v-model="form.province" @change="getCity" placeholder="省份">
+                  <el-option v-for="item in provenceData" :key="item.code" :label="item.name" :value="item.code"></el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="2" class="cc">/</el-col>
+              <el-col :span="11">
+                <el-select v-model="form.city" placeholder="城市">
+                  <el-option v-for="item in cityData" :label="item.name" :key="item.code"  :value="item.code"></el-option>
+                </el-select>
+              </el-col>
+            </el-form-item>
+          </el-col>
+           <el-col :span="12">
+            <el-form-item label="地区" :label-width="formLabelWidth">
+              <el-select v-model="form.resident_unid" placeholder="请选择">
+                <el-option v-for="item in communityData"  :key="item.unid" :value="item.unid" :label="item.org_name"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+            </div>
+          <!-- <el-col :span="12">
+            <el-form-item label="座机号" :label-width="formLabelWidth">
+              <el-input v-model="form.homephone" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="24">
+            <el-form-item label="备注" :label-width="formLabelWidth">
+              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.note"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="subMitBlack">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-row class="mt20">
+      <facetable @edit="editTable" :dbname="dbname" :facename="facename" :facesex="facesex" :facecardid="facecard_id" :communityunid="communityunid" ref="c1"></facetable>
+    </el-row>
+    <el-dialog v-model="dialogVisible1" size="tiny">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Facetable from "./faceTable";
+export default {
+  data() {
+    return {
+      Substate: 1,
+      dbname: "",
+      curEditData: [], //当前编辑的数据
+      facename: "",
+      facesex: "",
+      facecard_id: "",
+      fileList: [],
+      activeIndex: "peopleImg",
+      dialogImageUrl: "",
+      dialogVisible: false,
+      dialogVisible1: false,
+      count: [],
+      cityData: [],
+      provenceData: [],
+      faceunid: "",
+      communityData:"",
+      communityunid:"",
+      cartypeData:"",
+      crucialData:"",
+      form: {
+        name: "",
+        crucial_type: "",
+        birthday: "",
+        card_type: "",
+        card_id: "",
+        sex: "",
+        mphone: "",
+        province: "",
+        city: "",
+        homephone: "",
+        note: "",
+        crime_act:"",
+        resident_unid:''
+      },
+      formLabelWidth: "120px",
+      pickerOptions0: {},
+      rules: {
+          card_id: [
+            { min: 0, max: 22, message: '请正确输入身份证号码！', trigger: 'blur' }
+          ],
+           mphone: [
+            { min: 0, max: 13, message: '请正确输入手机号！', trigger: 'blur' }
+          ],
+        }
+    };
+  },
+  components: {
+    Facetable
+  },
+  computed: {},
+  methods: {
+    //搜索人员
+    searchFace() {
+      this.$refs.c1.initTable(); //调用子组件搜索方法
+    },
+    editTable(index, val) {
+      this.Substate = 2;
+      this.dialogVisible = true;
+      this.getBlackInfo(val.unid);
+      this.faceunid = val.unid;
+    },
+    /* 获取城市*/
+    getCity(val, citycod) {
+      this.form.province = val;
+      this.form.city = "";
+      var Vthis = this;
+      var provenceuid = "";
+      if (val) {
+        for (var i = 0; i < this.provenceData.length; i++) {
+          if (val == this.provenceData[i].code) {
+            provenceuid = this.provenceData[i].province_unid;
+          }
+        }
+        this.axios.get(IP +"/api/v1/codes/countries/0E229CD043/provinces/" +provenceuid +"/cities").then(function(response) {
+            Vthis.cityData = response.data.list_data;
+            if (citycod) {
+              Vthis.form.city = citycod;
+            }
+          });
+      }
+    },
+    addFaceBlack() {
+      this.dialogVisible = true;
+      this.count = [];
+      this.fileList = [];
+      this.initFaceInfo();
+      this.Substate = 1;
+   
+    },
+    handleRemove(file, fileList) {
+      //移除图片
+      this.axios
+        .delete(FACEWEB +
+            "/crucial_face_pics/" +
+            this.curEditData.unid +
+            "/pics/" +
+            file.unid
+        )
+        .then(function(response) {});
+    },
+    handlePictureCardPreview(file) {
+      //预览大图
+      this.dialogImageUrl = file.url;
+      this.dialogVisible1 = true;
+    },
+    successImg(response, file, fileList) {
+      //图片上传成功
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+    },
+    uploadimg(file) {
+      if (this.Substate == 2) {
+        this.editPersonnelImg(file.file);
+      }
+    },
+    subMitBlack() {
+      this.$refs["personform"].validate(valid => {
+        if (valid) {
+          if (this.Substate == 1) this.saveAddPersonnel();
+          if (this.Substate == 2) this.saveEditPersonnel();
+          this.dialogVisible = false;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    getBlackInfo(unid) {
+      var Vthis = this;
+      this.axios.get(FACEWEB + "/faces/" + unid).then(function(response) {
+        Vthis.initEditFaceInfo(response.data);
+      });
+    },
+    initEditFaceInfo(data) {
+      for (var i = 0; i < data.pics.length; i++) {
+        data.pics[i].url = data.pics[i].pic_url;
+      }
+      this.curEditData = data;
+      this.form.name = data.name;
+      var pice = [];
+      this.form.crucial_type = data.crucial_type;
+      this.form.birthday = data.birthday;
+      this.form.card_type = "111";
+      this.form.card_id = data.card_id;
+      this.form.sex = data.sex;
+      this.form.mphone = data.mphone;
+      this.form.province = data.province;
+      this.form.homephone = "";
+      this.form.note = data.note;
+      this.fileList = data.pics;
+      this.form.handle_state = data.handle_state;
+      this.form.crime_act = data.crime_act;
+      this.form.resident_unid = Number(data.resident_unid)
+      this.getCity(data.province, data.city);
+    },
+    initFaceInfo() {
+      this.form.name = "";
+      this.form.crucial_type = "";
+      this.form.birthday = "";
+      this.form.card_type = "";
+      this.form.card_id = "";
+      this.form.sex = "";
+      this.form.mphone = "";
+      this.form.province = "";
+      this.form.city = "";
+      this.form.homephone = "";
+      this.form.crime_act = "";
+      this.form.note = "";
+      this.form.handle_state = "";
+      this.form.resident_unid = "";
+    },
+    saveAddPersonnel() {
+      var Vthis = this;
+      this.axios.post(FACEWEB + "/faces", this.form).then(function(response) {
+        Vthis.savePersonnelImg(response.data.unid);
+        Vthis.$refs.upload.clearFiles();
+        Vthis.$refs.c1.initTable();
+        Vthis.$message({
+          message: "添加人员成功！",
+          type: 'success'
+        })
+      });
+    },
+    saveEditPersonnel() {
+      var Vthis = this;
+      var birthdayDate= new Date(new Date(this.form.birthday).getTime());
+      this.form.birthday = this.form.birthday?this.timeForm(birthdayDate).split(' ')[0]:'';
+      this.axios.post(FACEWEB + "/faces/" + Vthis.faceunid, this.form).then(function(response) {
+          Vthis.$refs["personform"].resetFields();
+          Vthis.$refs.c1.initTable();
+        });
+        let messageInfo = "";
+        if(this.Substate == 2) messageInfo ="修改人员成功！"
+        this.$message({
+          message: messageInfo,
+          type: 'success'
+        })
+    },
+    savePersonnelImg(faceunid) {
+      var Vthis = this;
+      this.$refs.upload.uploadFiles.forEach(function(ele) {
+        Vthis.baseImg(ele.raw, function(srcs) {
+          var data = {
+            pic_base64: srcs,
+            format: ele.raw.type.split("/")[1],
+            ofilename: ele.name,
+            t_format: "jpg"
+          };
+          Vthis.sendImg(faceunid, data);
+        });
+      }, this);
+    },
+    editPersonnelImg(file) {
+      var Vthis = this;
+      this.baseImg(file, function(srcs) {
+        var data = {
+          pic_base64: srcs,
+          format: file.type.split("/")[1],
+          ofilename: file.name,
+          t_format: "jpg"
+        };
+        Vthis.sendImg(Vthis.faceunid, data);
+      });
+    },
+    sendImg(faceunid, data) {
+      this.axios
+        .post(FACEWEB + "/crucial_face_pics/" + faceunid + "/pics", data)
+        .then(function(response) {});
+    },
+    baseImg(file, callback) {
+      var srcs = "";
+      var reader = new FileReader();
+      if (file) {
+        reader.readAsDataURL(file);
+      }
+      reader.onloadend = function() {
+        srcs = reader.result.split(",")[1];
+        if (callback) callback(srcs);
+      };
+    },
+     initDbData(){
+         this.axios.get(IP + "/api/v1/codes/custom/cates/4DD23AF66E/codes").then((response)=> {
+           this.crucialData = response.data.list_data;
+      });
+     },
+     initcartypeData(){
+         this.axios.get(IP + "/api/v1/codes/simple/cates/09BB973F92/codes").then((response)=> {
+           this.cartypeData = response.data.list_data;
+      });
+     },
+   },
+  created() {
+    var Vthis = this;
+    this.communityData = this.$store.state.initinfo.org;
+    this.axios
+      .get(IP + "/api/v1/codes/countries/0E229CD043/provinces")
+      .then(function(response) {
+        Vthis.provenceData = response.data.list_data;
+      });
+    this.initDbData();
+    this.initcartypeData();
+  },
+  mounted() {}
+};
+</script>
+<style lang="stylus" scoped>
+.el-date-editor.el-input {
+  width: 100%;
+}
+
+.cc {
+  text-align: center;
+}
+
+</style>

web/src/views/Deploy/dbManage/index.vue

+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+export default {
+  
+}
+</script>
+<style lang="stylus" scoped>
+
+</style>

web/src/views/Deploy/taskManage/behaviourtask/behaviourtask.vue

+<template>
+  <div style="overflow:hidden">
+    <el-row :gutter="6">
+      <el-col :span="4">
+        <div class="left-box">
+          <div class="left-header">任务列表</div>
+          <div class="deploy-list" v-for="(item, index) in taskList.list_data" :key="index" @click="selectTask(item, index)" :class="{activetask:index==curTaskIndex}">
+            <i :class="{'el-icon-fa-pause':item.enabled,'el-icon-fa-play':!item.enabled,iceon:true,'taskstatus':true}" @click="setTaskStatus($event, item)"></i>
+            <span class="deploy-name">{{item.name}}</span>
+            <i class="el-icon-fa-edit icon" @click="editTask($event, item)"></i>
+            <i class="el-icon-fa-trash pl10 icon" @click="deleteTask($event, item)"></i>
+          </div>
+          <el-button type="primary" class="task-btn" @click="newtask">新建布控任务</el-button>
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <div class="right-box">
+          <div class="right-content" v-if="taskDetail">
+            <el-row class="mt20">
+              <p class="right-title">布控类型</p>
+              <el-col class="dbname-box" :xl="6" :lg="6">
+                <i class="el-icon-document icon"></i>
+                <span class="dbname">{{getBehavior(taskDetail.cate)}}</span>
+              </el-col>
+            </el-row>
+            <el-row class="mt20">
+              <p class="right-title">运行时间</p>
+              <el-col :lg="6" v-for="(item, index) in taskDetail.task_info.periods" :key="index" class="deploy-time">
+                <i class="el-icon-time"></i>
+                {{showLocalTime(item[0])}} - {{showLocalTime(item[1])}}
+              </el-col>
+            </el-row>
+            <el-row class="itemplate-box mt20">
+              <p class="right-title">运行设备</p>
+              <el-col :lg="12" v-for="item in taskDetail.task_info.vchans" :key="item" class="deploy-vchan">
+                <i class="el-icon-fa-desktop icon"></i>
+                <span>{{formatVchanName(item)}}</span>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-dialog :title="this.editstatus?'编辑布控任务':'新建布控任务'" :visible.sync="taskVisible">
+        <div class="header" style="overflow:hidden">
+          <el-form :model="taskForm" ref="taskRuleForm" :rules="taskRules" label-width="100px" class="demo-dynamic">
+            <el-form-item label="任务名称"  prop="name">
+              <el-col :span="8">
+                <el-input v-model="taskForm.name" placeholder="请输入布控任务名称"></el-input>
+              </el-col>
+            </el-form-item>
+            <el-form-item label="布控类型" prop="cate">
+              <el-col :span="8">
+                <el-select v-model="taskForm.cate" placeholder="请选择布控类型" :disabled='this.editstatus'>
+                  <el-option :label="item.name" :value="item.code" v-for="item in cate" :key="item.code"></el-option>
+                </el-select>
+              </el-col>
+            </el-form-item>
+            <el-form-item  v-for="(item, index) in taskForm.task_info.periods" :key="index" label="运行时间"  prop="periods" >
+              <el-col :span="19">
+                <el-col :span="10" style="margin-bottom:10px;">
+                  <el-time-picker is-range v-model="taskForm.task_info.periods[index]" placeholder="选择时间范围" value-format="HH:mm:ss" style="width:100%"></el-time-picker>
+                </el-col>
+                <el-col :span="1" :offset="1" v-show="index!=0">
+                  <div class="el-icon-minus add-task" @click="deleteTimer(index)"></div>
+                </el-col>
+                <el-col :span="2" v-show="index==taskForm.task_info.periods.length-1" :class="{pl30:index==0}">
+                  <div class="el-icon-plus add-task" @click="addTimer"></div>
+                </el-col>
+              </el-col>
+            </el-form-item>
+            <!--短息/彩信-->
+            <el-col :span="18">
+              <el-form-item label="信息推送">
+               <el-switch
+                  class="mt10 ml20"
+                  width="50"
+                  style="display: block"
+                  v-model="taskForm.task_info.sms.if_send"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                  active-text="开启"
+                  inactive-text="关闭">
+              </el-switch>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="推送方式" v-show="taskForm.task_info.sms.if_send">
+                <el-col :span="10">
+                  <el-select v-model="taskForm.task_info.sms.use_mms" placeholder="请选择布周期">
+                    <el-option label="短信推送" :value="false"></el-option>
+                    <el-option label="彩信推送" :value="true"></el-option>
+                  </el-select>
+                </el-col>
+              </el-form-item>
+            </el-col>
+            <!--/短息/彩信-->
+            <!--短信或彩信发送人员-->
+            <el-col :span="24" style="overflow:hidden">
+              <el-form-item label="信息发送至"  v-show="taskForm.task_info.sms.if_send">
+                <el-col :span="10">
+                <el-select v-model="taskForm.task_info.sms.users" filterable multiple placeholder="请选择">
+                  <el-option
+                    v-for="item in smslistData"
+                    :key="item.user_unid"
+                    :label="item.name"
+                    :value="item.user_unid">
+                  </el-option>
+                </el-select>
+                </el-col>
+              </el-form-item>
+            </el-col>
+            <!--/短信或彩信发送人员-->
+            <el-col :span="24">
+              <div style="overflow:hidden">
+                <el-col :span="10" :offset="2">
+                  <el-input v-model="devLike" placeholder="请输入设备名称"></el-input>
+                </el-col>
+                <el-col :span="5" :offset="1">
+                  <el-button type="primary" @click="checkdev">查询</el-button>
+                </el-col>
+              </div>
+              <div class="mt10">
+                <el-form-item label="运行设备"  prop="taskdev">
+                  <div  class="dev-box">
+                      <el-checkbox-group v-model="taskForm.task_info.vchans">
+                        <el-col :span="12" v-for="item in vchansList" :key="item.unid">
+                          <el-checkbox :label="item.vchan_refid" class="dev-check">{{item.vchan_name}}</el-checkbox>
+                        </el-col>
+                      </el-checkbox-group>
+                  </div>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="taskVisible = false">取 消</el-button>
+          <el-button type="primary" @click="addtask('taskRuleForm')">确 定</el-button>
+        </div>
+      </el-dialog>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      const _this= this;
+      const validateperiods = (rule, value, callback) => {
+          _this.taskForm.task_info.periods.forEach((ev) => {
+            if(ev == ''){
+              callback(new Error(rule.message));
+                return;
+            } else {
+             callback()
+            }
+          });
+        }
+      const validatortaskdev =  (rule, value, callback) => {
+          if(_this.taskForm.task_info.vchans.length < 1){
+              callback(new Error(rule.message));
+                    return ;
+          }else {
+           callback()
+          }
+        }
+      return {
+        vdev: "",
+        devLike:"",
+        curTaskIndex:0,
+        vchansList:[],
+        allvchanData:[],
+        smslistData:[],
+        taskDetail:"",
+        editstatus:'',//编辑状态
+        editunid:'',//编辑id
+        taskList: {
+          list_data:[]
+        },
+        cate:[{code:'0',name:'单向越界'},{code:'1',name:'双向越界'},{code:'2',name:'进入区域'},{code:'3',name:'离开区域'},{code:'4',name:'打架'},{code:'5',name:'奔跑'},{code:'11',name:'蒙面'},{code:'13',name:'异常声音'},{code:'14',name:'区域徘徊'},{code:'19',name:'摩的'},{code:'20',name:'违章摆摊'},{code:'32',name:'人群聚集'},{code:'33',name:'未带安全帽'}],//所有检测类型
+        taskVisible: false,
+        activeName: "first",
+        begintime: "2018.01.01 12:03:00",
+        endtime: "2018.01.01 12:03:00",
+        vlue3: "",
+        taskForm: {
+          cate: "", //必填，任务类型
+          type:  "behavior",
+          name: "", //必填，任务名称
+          task_info: {
+            //必填，任务详细配置信息
+            enabled: true,
+            periods: [
+              //必填，一天内的布控时间段，24小时制，起始时间必须按照从小到大排列，结束时间必须大于起始时间，后一个时间段的起始时间必须大于前一个时间段的结束时间。
+              ['00:00:00', '23:59:59']
+            ],
+            use_all_vchans: false, //是否对所有视频通道布控，不出现为false，如果为true，则vchans无效。
+            vchans: [], //目标视频通道的refid列表
+            libs: [], //目标库列表
+            sms: {
+              //短信配置
+              if_send: false ,//是否发送短信，默认false
+              use_mms: false,
+              users:[]
+            }
+          }
+        },
+        taskRules:{
+          name:[
+             { required: true, message: '请输入任务名称', trigger: 'blur' },
+          ],
+          cate:[
+                { required: true, message: '请选择布控类型', trigger: 'blur' },
+              ],
+          periods:[
+            { required: true, validator: validateperiods, message: '时间范围不能为空！', trigger: 'blur' }
+          ],
+          taskdev:[
+             { required: true, validator: validatortaskdev, message: '运行设备设置不能为空！', trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      /**@augments
+       * 触发新建任务
+       */
+      newtask() {
+        this.clearForm()
+        this.editstatus = 0
+        this.taskVisible = true;
+      },
+       /**@augments
+       * 清空表单
+       */
+      clearForm(params) {
+        this.taskForm = {
+          cate: "",
+          type:  "behavior",
+          name: "",
+          task_info: {
+            enabled: true,
+            periods: [
+              ['00:00:00', '23:59:59']
+            ],
+            use_all_vchans: false,
+            vchans: [],
+            libs: [],
+            sms: {
+              if_send: false ,//是否发送短信，默认false
+              use_mms: false,
+              users:[]
+            }
+          }
+        }
+      },
+      /**@augments
+       * 获取任务列表
+       */
+      getTaskList() {
+        return new Promise((resolve, reject) => {
+          this.axios
+            .get(this.IP + "/api/v1/alarm/monitor_tasks", {
+              params: {
+                limit:20,
+                offset:0,
+                type:'behavior'
+              }
+            })
+            .then(response => {
+              this.taskList = response.data;
+              resolve(response.data);
+            });
+        });
+      },
+
+      /**@augments
+       * 开启或关闭任务
+       */
+      setTaskStatus(event,data) {
+        event.cancelBubble = true;
+        this.editstatus = 1;
+        let url = this.IP + "/api/v1/alarm/monitor_tasks/" + data.unid;
+        this.getTaskDetail(data.unid,(response)=>{
+          this.taskDetail.enabled = !this.taskDetail.enabled;
+          this.addtaskapi(url, this.taskDetail).then((response) => {
+            this.getTaskList();
+          });
+        });
+      },
+
+      /**@augments
+       * 当前选中的任务
+       */
+      selectTask(data, index) {
+        this.curTaskIndex = index;
+        this.getTaskDetail(data.unid);
+      },
+
+      /**@augments
+       * 获取任务详情
+       */
+      getTaskDetail(unid, callback) {
+          this.axios.get(this.IP + "/api/v1/alarm/monitor_tasks/" + unid).then(response => {
+          this.taskDetail = response.data;
+          if(callback)callback(response);
+          });
+      },
+
+      /**@augments
+       * 添加任务操作
+       */
+      addtask(formName) {
+        const _vthis = this;
+        let url = this.IP + "/api/v1/alarm/monitor_tasks";
+
+        if (this.editstatus == 1){
+          url = this.IP + "/api/v1/alarm/monitor_tasks/" + this.editunid;
+        }
+
+        this.taskForm.task_info.periods.forEach((e) => {
+          e[0] = this.setUtcTime(e[0])
+          e[1] = this.setUtcTime(e[1])
+        });
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.addtaskapi(url, this.taskForm).then(response => {
+              this.$refs[formName].resetFields();
+              this.taskVisible = false;
+              if (!this.editstatus) {
+                this.curTaskIndex = 0
+              }
+              let unid = response.data.unid || this.editunid
+              this.editstatus = 0
+              this.getTaskList().then(response => {
+                this.getTaskDetail(unid);
+              });
+            })
+          } else {
+            console.log(valid);
+            return false;
+          }
+        });
+      },
+      /**@augments
+      *添加任务 API
+       */
+      addtaskapi (url, data) {
+        return new Promise((resolve, reject) => {
+          this.axios.post(url , data).then (response => {
+            resolve(response)
+          })
+        })
+      },
+
+      /**@augments
+       * 编辑任务
+       */
+      editTask(event, data) {
+        this.clearForm()
+
+        this.axios
+          .get(this.IP + "/api/v1/alarm/monitor_tasks/" + data.unid)
+          .then(response => {
+            this.taskForm = response.data;
+            this.editstatus = 1;
+            this.editunid = response.data.unid;
+            this.taskForm.task_info.periods.forEach((e) => {
+              e[0] = this.showLocalTime(e[0]);
+              e[1] = this.showLocalTime(e[1]);
+            });
+            this.taskVisible = true;
+          });
+      },
+
+      /**@augments
+       * 删除任务
+       */
+      deleteTask(event, data) {
+        event.cancelBubble = true;
+        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+          .then(() => {
+            this.axios
+              .delete(this.IP + "/api/v1/alarm/monitor_tasks/" + data.unid)
+              .then(response => {
+                let type,msg
+               if (response.data.ecode == 200) {
+                   type = 'success'
+                   msg = '删除成功！'
+                   this.getTaskList().then(response => {
+                    this.getTaskDetail(response.list_data[0].unid);
+                  });
+               }else {
+                   type = 'error'
+                   msg = '删除失败！'
+               }
+                this.$message({
+                  type: type,
+                  message: msg
+                });
+              });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除"
+            });
+          });
+      },
+      /**@augments
+       * 添加时间
+       */
+      addTimer() {
+        this.taskForm.task_info.periods.push(['00:00:00', '23:59:59']);
+      },
+      /**@augments
+       * 删除时间
+       */
+      deleteTimer(index) {
+        this.taskForm.task_info.periods.splice(index, 1);
+      },
+
+      /**@augments
+       * 筛选设备
+       */
+      checkdev() {
+         const searchData = [];
+        if (this.devLike != '') {
+          for (let i = 0; i < this.allvchanData.length; i++) {
+            if (this.allvchanData[i].vchan_name.indexOf(this.devLike) > -1) {
+              searchData.push(this.allvchanData[i]);
+            }
+          }
+          this.vchansList = searchData;
+        } else {
+          this.vchansList = this.allvchanData;
+        }
+        console.log(this.vchansList)
+      },
+
+      /**@augments
+       * 显示布控类型
+       */
+      getBehavior(code) {
+        let str
+        switch (code) {
+          case '0':
+            str = '单向越界'
+            break;
+          case '1':
+            str = '双向越界'
+            break;
+          case '2':
+            str = '进入区域'
+            break;
+          case '3':
+            str = '离开区域'
+            break;
+          case '4':
+            str = '打架'
+            break;
+          case '5':
+            str = '奔跑'
+            break;
+          case '11':
+            str = '蒙面'
+            break;
+          case '13':
+            str = '异常声音'
+            break;
+          case '14':
+            str = '区域徘徊'
+            break;
+          case '19':
+            str = '黑摩的'
+            break;
+          case '20':
+            str = '违章摆摊'
+            break;
+          case '32':
+            str = '人群聚集'
+            break;
+          case '33':
+            str = '未带安全帽'
+            break;
+          default:
+            break;
+        }
+        return str
+      },
+      /**@augments
+       * 格式化设备名称
+       */
+      formatVchanName(data) {
+        let vchanName = '未知';
+        this.allvchanData.forEach((ev) => {
+          if(ev.vchan_refid == data) {
+            vchanName = ev.vchan_name;
+          }
+        });
+        return vchanName;
+      },
+      /**@augments
+       * 获取短信推送名单
+       */
+      getSmsList(){
+        this.axios.get(IP + "/api/v1/auth/users", {
+          params: {
+            limit: 10000,
+            offset: 0,
+            user_type: "user",
+            norm_type: "login"
+          }
+        }).then((response) => {
+          this.smslistData = response.data.list_data;
+        });
+      },
+    },
+    created() {
+      this.getSmsList();
+      /**@augments
+       * 获取任务列表并初始化首个任务
+       */
+      this.getTaskList().then(response => {
+        this.getTaskDetail(response.list_data[0].unid);
+      });
+
+      /**@augments
+       * 获取设备信息
+       */
+      this.faceapi.getVchanList().then(response => {
+        console.log(response)
+        this.vchansList = response.list_data;
+        this.allvchanData = response.list_data;
+      });
+    }
+  };
+
+</script>
+<style lang="stylus" scoped>
+  .left-box {
+    height: 750px;
+    box-shadow:0px 0px 7px 2px #2bc7ef inset;
+    overflow: hidden;
+    color: #fff;
+    position: relative;
+
+    .task-btn {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+  input {
+     background #393e52!important
+  }
+  .right-box {
+    box-shadow:0px 0px 7px 2px #2bc7ef inset;
+    height: 750px;
+    overflow: hidden;
+    p {
+      text-align left
+    }
+  }
+
+  .left-header {
+    height: 60px;
+    line-height: 60px;
+    border-bottom: 2px solid #2A2C3B;
+    color: #9E9FA5;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .deploy-list {
+    height: 50px;
+    line-height: 50px;
+    padding-left: 15px;
+
+    .icon {
+      font-size: 16px !important;
+      cursor: pointer;
+    }
+  }
+
+  .deploy-name {
+    padding-left: 15px;
+    display: inline-block;
+    width: 60%;
+  }
+  .deploy-name:hover {
+    text-decoration underline;
+    cursor default
+  }
+  .right-title {
+    font-size: 18px;
+    color: #9E9FA5;
+    font-weight: 600;
+  }
+
+  .right-content {
+    width: 96%;
+    margin: 0px auto;
+    text-align left
+  }
+  .itemplate-box {
+    margin-bottom 50px
+
+  }
+  .dbname-box {
+    .icon {
+      font-size: 40px !important;
+      color: #fff;
+      vertical-align: top;
+    }
+
+    .dbname {
+      color: #ffffff;
+      font-size: 18px;
+      display: inline-block;
+      height: 50px;
+      line-height: 50px;
+      padding-left: 10px;
+    }
+  }
+
+  .deploy-time {
+    color: #fff;
+  }
+
+  .deploy-vchan {
+    color: #fff;
+    margin-bottom: 10px;
+    font-size: 20px;
+
+    .icon {
+      font-size: 20px !important;
+    }
+  }
+
+  .add-task {
+    cursor: pointer;
+  }
+
+  .dev-check {
+    width: 100%;
+    color: #fff;
+    text-align left
+  }
+
+  .el-form-item__content {
+    margin-left: 10px !important;
+    overflow: hidden;
+  }
+
+  .dev-box {
+    height: 200px;
+    overflow: auto;
+  }
+
+  .plr10 {
+    padding: 0 10px;
+  }
+
+  .mb10 {
+    margin-bootm: 10px;
+  }
+
+  .pl30 {
+    padding-left: 30px;
+  }
+   .activetask {
+    background rgba(43,199,239,0.8)
+  }
+  .taskstatus{
+    cursor pointer
+  }
+</style>

web/src/views/Deploy/taskManage/cartask/cartask.vue

+<template>
+  <div style="overflow:hidden">
+    <el-row :gutter="6">
+      <el-col :span="4">
+        <div class="left-box">
+          <div class="left-header">任务列表</div>
+          <div class="deploy-list" v-for="(item, index) in taskList.list_data" :key="index" @click="selectTask(item, index)" :class="{activetask:index==curTaskIndex}">
+            <i :class="{'el-icon-fa-pause':item.enabled,'el-icon-fa-play':!item.enabled,iceon:true,'taskstatus':true}" @click="setTaskStatus($event, item)"></i>
+            <span class="deploy-name">{{item.name}}</span>
+            <i class="el-icon-fa-edit icon" @click="editTask($event, item)"></i>
+            <i class="el-icon-fa-trash pl10 icon" @click="deleteTask($event, item)"></i>
+          </div>
+          <el-button type="primary" class="task-btn" @click="newtask">新建布控任务</el-button>
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <div class="right-box">
+          <div class="right-content" v-if="taskDetail">
+            <el-row class="mt20">
+              <p class="right-title">布控类型</p>
+              <el-col class="dbname-box">
+                <i class="el-icon-document icon"></i>
+                <span class="dbname">{{formatCate(taskDetail.cate)}}</span>
+              </el-col>
+            </el-row>
+            <el-row class="itemplate-box">
+              <p class="right-title">布控库</p>
+              <el-col class="dbname-box" :xl="6" :lg="6" v-for="item in taskDetail.task_info.libs" :key="item.code">
+                <i class="el-icon-fa-folder-open icon"></i>
+                <span class="dbname">{{formatDbName(item)}}</span>
+              </el-col>
+            </el-row>
+            <el-row class="itemplate-box" v-show="taskDetail.cate =='find_illegal_oper'">
+              <p class="right-title">捕获阀值</p>
+              <el-col :lg="24" class="deploy-time">
+                <span>{{taskDetail.task_info.capture_count_thresh}}次</span><span style="paddingLeft:5%">* 车辆在任意单个视频通道内出现达到<span style="padding:0 10px;textDecoration:underline">{{taskDetail.task_info.capture_count_thresh}}</span>次后加入对应车库</span>
+              </el-col>
+            </el-row>
+            <el-row class="itemplate-box">
+              <p class="right-title">运行时间</p>
+              <el-col :lg="6" v-for="(item, index) in taskDetail.task_info.periods" :key="index" class="deploy-time">
+                <i class="el-icon-time"></i>
+                {{showLocalTime(item[0])}} - {{showLocalTime(item[1])}}
+              </el-col>
+            </el-row>
+            <el-row class="itemplate-box">
+              <p class="right-title">运行设备</p>
+              <el-col :lg="12" v-for="item in taskDetail.task_info.vchans" :key="item" class="deploy-vchan">
+                <i class="el-icon-fa-desktop icon"></i>
+                <span>{{formatVchanName(item)}}</span>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-dialog :title="this.editstatus?'编辑布控任务':'新建布控任务'" :visible.sync="taskVisible">
+        <div class="header" style="overflow:hidden">
+          <el-form :model="taskForm" ref="taskRuleForm" :rules="taskRules" label-width="100px" class="demo-dynamic">
+            <el-form-item label="任务名称"  prop="name">
+              <el-col :span="8">
+                <el-input v-model="taskForm.name" placeholder="请输入布控任务名称"></el-input>
+              </el-col>
+            </el-form-item>
+            <el-form-item label="布控库">
+              <el-col :span="8">
+                <el-select v-model="taskForm.task_info.libs" multiple placeholder="请选择布控库">
+                   <el-option v-for="item in dbdata" :key="item.cate" :label="item.name" :value="item.lib"></el-option>
+                </el-select>
+              </el-col>
+            </el-form-item>
+            <el-form-item label="布控类型" prop="cate">
+              <el-col :span="8">
+                <el-select v-model="taskForm.cate" placeholder="请选择布控类型" :disabled='this.editstatus'>
+                  <el-option :label="item.name" :value="item.cate" v-for="item in cate" :key="item.cate"></el-option>
+                </el-select>
+              </el-col>
+            </el-form-item>
+            <el-form-item label="捕获阀值" v-show="taskForm.cate =='find_illegal_oper'">
+              <el-col :span="8">
+                  <el-input-number v-model="taskForm.task_info.capture_count_thresh"></el-input-number><span class="pl10 stay">次</span>
+              </el-col>
+            </el-form-item>
+            <el-form-item  v-for="(item, index) in taskForm.task_info.periods" :key="index" label="运行时间"  prop="periods" >
+              <el-col :span="19">
+                <el-col :span="10" style="margin-bottom:10px;">
+                  <el-time-picker is-range v-model="taskForm.task_info.periods[index]" placeholder="选择时间范围" value-format="HH:mm:ss" style="width:100%"></el-time-picker>
+                </el-col>
+                <el-col :span="1" :offset="1" v-show="index!=0">
+                  <div class="el-icon-minus add-task" @click="deleteTimer(index)"></div>
+                </el-col>
+                <el-col :span="2" v-show="index==taskForm.task_info.periods.length-1" :class="{pl30:index==0}">
+                  <div class="el-icon-plus add-task" @click="addTimer"></div>
+                </el-col>
+              </el-col>
+            </el-form-item>
+             <!--短息/彩信-->
+            <el-col :span="18">
+              <el-form-item label="信息推送">
+               <el-switch
+                  class="mt10 ml20"
+                  width="50"
+                  style="display: block"
+                  v-model="taskForm.task_info.sms.if_send"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                  active-text="开启"
+                  inactive-text="关闭">
+              </el-switch>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="推送方式" v-show="taskForm.task_info.sms.if_send">
+                <el-col :span="10">
+                  <el-select v-model="taskForm.task_info.sms.use_mms" placeholder="请选择布周期">
+                    <el-option label="短信推送" :value="false"></el-option>
+                    <el-option label="彩信推送" :value="true"></el-option>
+                  </el-select>
+                </el-col>
+              </el-form-item>
+            </el-col>
+            <!--/短息/彩信-->
+            <!--短信或彩信发送人员-->
+            <el-col :span="24" style="overflow:hidden">
+              <el-form-item label="信息发送至"  v-show="taskForm.task_info.sms.if_send">
+                <el-col :span="10">
+                <el-select v-model="taskForm.task_info.sms.users" filterable multiple placeholder="请选择">
+                  <el-option
+                    v-for="item in smslistData"
+                    :key="item.user_unid"
+                    :label="item.name"
+                    :value="item.user_unid">
+                  </el-option>
+                </el-select>
+                </el-col>
+              </el-form-item>
+            </el-col>
+            <!--/短信或彩信发送人员-->
+            <el-col :span="24">
+              <div style="overflow:hidden">
+                <el-col :span="10" :offset="2">
+                  <el-input v-model="devLike" placeholder="请输入设备名称"></el-input>
+                </el-col>
+                <el-col :span="5" :offset="1">
+                  <el-button type="primary" @click="checkdev">查询</el-button>
+                </el-col>
+              </div>
+              <div class="mt10">
+                <el-form-item label="运行设备"  prop="taskdev">
+                  <div  class="dev-box">
+                      <el-checkbox-group v-model="taskForm.task_info.vchans">
+                        <el-col :span="12" v-for="item in vchansList" :key="item.unid">
+                          <el-checkbox :label="item.vchan_refid" class="dev-check">{{item.vchan_name}}</el-checkbox>
+                        </el-col>
+                      </el-checkbox-group>
+                  </div>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="taskVisible = false">取 消</el-button>
+          <el-button type="primary" @click="addtask('taskRuleForm')">确 定</el-button>
+        </div>
+      </el-dialog>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      const _this= this;
+      const validateperiods = (rule, value, callback) => {
+          _this.taskForm.task_info.periods.forEach((ev) => {
+            if(ev == ''){
+              callback(new Error(rule.message));
+                return;
+            } else {
+             callback()
+            }
+          });
+        }
+      const validatortaskdev =  (rule, value, callback) => {
+          if(_this.taskForm.task_info.vchans.length < 1){
+              callback(new Error(rule.message));
+                    return ;
+          }else {
+           callback()
+          }
+        }
+      return {
+        count:'',
+        vdev: "",
+        devLike:"",
+        curTaskIndex:0,
+        vchansList:[],
+        allvchanData:[],
+        smslistData:[],
+        taskDetail:"",
+        editstatus:'',//编辑状态
+        editunid:'',//编辑id
+        taskList: {
+          list_data:[]
+        },
+        cate:[],
+        taskVisible: false,
+        activeName: "first",
+        begintime: "2018.01.01 12:03:00",
+        endtime: "2018.01.01 12:03:00",
+        vlue3: "",
+        dbdata: [],
+        taskForm: {
+          cate: "", //必填，任务类型
+          type:  "traffic",
+          name: "", //必填，任务名称
+          task_info: {
+            //必填，任务详细配置信息
+            enabled: true,
+            periods: [
+              //必填，一天内的布控时间段，24小时制，起始时间必须按照从小到大排列，结束时间必须大于起始时间，后一个时间段的起始时间必须大于前一个时间段的结束时间。
+              ['00:00:00', '23:59:59']
+            ],
+            use_all_vchans: false, //是否对所有视频通道布控，不出现为false，如果为true，则vchans无效。
+            vchans: [], //目标视频通道的refid列表
+            libs: [], //目标库列表
+            sms: {
+              //短信配置
+              if_send: false ,//是否发送短信，默认false
+              use_mms: false,
+              users:[]
+            },
+            capture_count_thresh:0
+          }
+        },
+        taskRules:{
+          name:[
+             { required: true, message: '请输入任务名称', trigger: 'blur' },
+          ],
+          cate:[
+                { required: true, message: '请选择布控类型', trigger: 'blur' },
+              ],
+          periods:[
+            { required: true, validator: validateperiods, message: '时间范围不能为空！', trigger: 'blur' }
+          ],
+          taskdev:[
+             { required: true, validator: validatortaskdev, message: '运行设备设置不能为空！', trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      /**@augments
+       * 触发新建任务
+       */
+      newtask() {
+        this.clearForm()
+        this.editstatus = 0
+        this.taskVisible = true;
+      },
+       /**@augments
+       * 清空表单
+       */
+      clearForm(params) {
+        this.taskForm = {
+          cate: "",
+          type:  "traffic",
+          name: "",
+          task_info: {
+            enabled: true,
+            periods: [
+              ['00:00:00', '23:59:59']
+            ],
+            use_all_vchans: false,
+            vchans: [],
+            libs: [],
+            sms: {
+              if_send: false ,//是否发送短信，默认false
+              use_mms: false,
+              users:[]
+            },
+            capture_count_thresh:0
+          }
+        }
+      },
+      /**@augments
+       * 获取任务列表
+       */
+      getTaskList() {
+        return new Promise((resolve, reject) => {
+          this.axios
+            .get(this.IP + "/api/v1/alarm/monitor_tasks", {
+              params: {
+                limit:20,
+                offset:0,
+                type:'traffic'
+              }
+            })
+            .then(response => {
+              this.taskList = response.data;
+              resolve(response.data);
+            });
+        });
+      },
+
+      /**@augments
+       * 开启或关闭任务
+       */
+      setTaskStatus(event,data) {
+        event.cancelBubble = true;
+        this.editstatus = 1;
+        let url = this.IP + "/api/v1/alarm/monitor_tasks/" + data.unid;
+        this.getTaskDetail(data.unid,(response)=>{
+          this.taskDetail.enabled = !this.taskDetail.enabled;
+          this.addtaskapi(url, this.taskDetail).then((response) => {
+            this.getTaskList();
+          });
+        });
+      },
+
+      /**@augments
+       * 当前选中的任务
+       */
+      selectTask(data, index) {
+        this.curTaskIndex = index;
+        this.getTaskDetail(data.unid);
+      },
+
+      /**@augments
+       * 获取任务详情
+       */
+      getTaskDetail(unid, callback) {
+          this.axios.get(this.IP + "/api/v1/alarm/monitor_tasks/" + unid).then(response => {
+          this.taskDetail = response.data;
+          console.log(this.taskDetail)
+          if(callback)callback(response);
+          });
+      },
+
+      /**@augments
+       * 添加任务操作
+       */
+      addtask(formName) {
+        const _vthis = this;
+        let url = this.IP + "/api/v1/alarm/monitor_tasks";
+
+        if (this.editstatus == 1){
+          url = this.IP + "/api/v1/alarm/monitor_tasks/" + this.editunid;
+        }
+        this.taskForm.task_info.periods.forEach((e) => {
+          e[0] = this.setUtcTime(e[0])
+          e[1] = this.setUtcTime(e[1])
+        });
+
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.addtaskapi(url, this.taskForm).then(response => {
+              this.$refs[formName].resetFields();
+              this.taskVisible = false;
+              if (!this.editstatus) {
+                this.curTaskIndex = 0
+              }
+              let unid = response.data.unid || this.editunid
+              this.editstatus = 0
+              this.getTaskList().then(response => {
+                this.getTaskDetail(unid);
+              });
+            })
+          } else {
+            return false;
+          }
+        });
+      },
+      /**@augments
+      *添加任务 API
+       */
+      addtaskapi (url, data) {
+        return new Promise((resolve, reject) => {
+          this.axios.post(url , data).then (response => {
+            resolve(response)
+          })
+        })
+      },
+
+      /**@augments
+       * 编辑任务
+       */
+      editTask(event, data) {
+        this.clearForm()
+
+        this.axios
+          .get(this.IP + "/api/v1/alarm/monitor_tasks/" + data.unid)
+          .then(response => {
+            this.taskForm = response.data;
+            this.editstatus = 1;
+            this.editunid = response.data.unid;
+            this.taskForm.task_info.periods.forEach((e) => {
+              e[0] = this.showLocalTime(e[0]);
+              e[1] = this.showLocalTime(e[1]);
+            });
+            this.taskVisible = true;
+          });
+      },
+
+      /**@augments
+       * 删除任务
+       */
+      deleteTask(event, data) {
+        event.cancelBubble = true;
+        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+          .then(() => {
+            this.axios
+              .delete(this.IP + "/api/v1/alarm/monitor_tasks/" + data.unid)
+              .then(response => {
+                let type,msg
+               if (response.data.ecode == 200) {
+                   type = 'success'
+                   msg = '删除成功！'
+                   this.getTaskList().then(response => {
+                    this.getTaskDetail(response.list_data[0].unid);
+                  });
+               }else {
+                   type = 'error'
+                   msg = '删除失败！'
+               }
+                this.$message({
+                  type: type,
+                  message: msg
+                });
+              });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除"
+            });
+          });
+      },
+      /**@augments
+       * 添加时间
+       */
+      addTimer() {
+        this.taskForm.task_info.periods.push(['00:00:00', '23:59:59']);
+      },
+      /**@augments
+       * 删除时间
+       */
+      deleteTimer(index) {
+        this.taskForm.task_info.periods.splice(index, 1);
+      },
+
+      /**@augments
+       * 筛选设备
+       */
+      checkdev() {
+         const searchData = [];
+        if (this.devLike != '') {
+          for (let i = 0; i < this.allvchanData.length; i++) {
+            if (this.allvchanData[i].vchan_name.indexOf(this.devLike) > -1) {
+              searchData.push(this.allvchanData[i]);
+            }
+          }
+          this.vchansList = searchData;
+        } else {
+          this.vchansList = this.allvchanData;
+        }
+      },
+
+      /**@augments
+       * 格式化库名
+       */
+      formatDbName(data) {
+        let dbname = '';
+        this.dbdata.forEach((ev) => {
+          if(ev.lib == data) {
+            dbname = ev.name;
+          }
+        });
+         return dbname
+      },
+      formatCate(data) {
+        let str = '未知';
+        this.cate.forEach((el) => {
+          if (el.cate==data) {
+            str = el.name
+          }
+        })
+        return str
+      },
+      /**@augments
+       * 格式化设备名称
+       */
+      formatVchanName(data) {
+        let vchanName = '未知';
+        this.allvchanData.forEach((ev) => {
+          if(ev.vchan_refid == data) {
+            vchanName = ev.vchan_name;
+          }
+        });
+        return vchanName;
+      },
+      /**@augments
+       * 获取短信推送名单
+       */
+      getSmsList(){
+        this.axios.get(IP + "/api/v1/auth/users", {
+          params: {
+            limit: 10000,
+            offset: 0,
+            user_type: "user",
+            norm_type: "login"
+          }
+        }).then((response) => {
+          this.smslistData = response.data.list_data;
+        });
+      },
+    },
+    created() {
+      this.getSmsList();
+      /**@augments
+       * 获取任务列表并初始化首个任务
+       */
+      this.getTaskList().then(response => {
+        this.getTaskDetail(response.list_data[0].unid);
+      });
+      /**@augments
+       * 获取库信息
+       */
+      this.faceapi.getCarDbData().then(response => {
+        this.dbdata = response.list_data
+      });
+
+      /**@augments
+       * 获取设备信息
+       */
+      this.faceapi.getVchanList().then(response => {
+        this.vchansList = response.list_data;
+        this.allvchanData = response.list_data;
+      });
+       /**@augments
+       * 获取布控类别
+       */
+      this.faceapi.getMonitor().then(response=>{
+        this.cate = response
+        console.log('cate',this.cate)
+      })
+    }
+  };
+
+</script>
+<style lang="stylus" scoped>
+  .left-box {
+    height: 750px;
+    box-shadow:0px 0px 7px 2px #2bc7ef inset;
+    overflow: hidden;
+    color: #fff;
+    position: relative;
+
+    .task-btn {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+  input {
+     background #393e52!important
+  }
+  .right-box {
+    box-shadow:0px 0px 7px 2px #2bc7ef inset;
+    height: 750px;
+    overflow: hidden;
+    p {
+      text-align left
+    }
+  }
+
+  .left-header {
+    height: 60px;
+    line-height: 60px;
+    border-bottom: 2px solid #2A2C3B;
+    color: #9E9FA5;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .deploy-list {
+    height: 50px;
+    line-height: 50px;
+    padding-left: 15px;
+
+    .icon {
+      font-size: 16px !important;
+      cursor: pointer;
+    }
+  }
+
+  .deploy-name {
+    padding-left: 15px;
+    display: inline-block;
+    width: 60%;
+  }
+  .deploy-name:hover {
+    text-decoration underline;
+    cursor default
+  }
+  .right-title {
+    font-size: 18px;
+    color: #9E9FA5;
+    font-weight: 600;
+  }
+
+  .right-content {
+    width: 96%;
+    margin: 0px auto;
+    text-align left
+  }
+  .itemplate-box {
+    margin-bottom 20px
+
+  }
+  .dbname-box {
+    .icon {
+      font-size: 40px !important;
+      color: #fff;
+      vertical-align: top;
+    }
+
+    .dbname {
+      color: #ffffff;
+      font-size: 18px;
+      display: inline-block;
+      height: 50px;
+      line-height: 50px;
+      padding-left: 10px;
+    }
+  }
+
+  .deploy-time {
+    color: #fff;
+  }
+
+  .deploy-vchan {
+    color: #fff;
+    margin-bottom: 10px;
+    font-size: 20px;
+
+    .icon {
+      font-size: 20px !important;
+    }
+  }
+
+  .add-task {
+    cursor: pointer;
+  }
+
+  .dev-check {
+    width: 100%;
+    color: #fff;
+    text-align left
+  }
+
+  .el-form-item__content {
+    margin-left: 10px !important;
+    overflow: hidden;
+  }
+
+  .dev-box {
+    height: 200px;
+    overflow: auto;
+  }
+
+  .plr10 {
+    padding: 0 10px;
+  }
+
+  .mb10 {
+    margin-bootm: 10px;
+  }
+
+  .pl30 {
+    padding-left: 30px;
+  }
+   .activetask {
+    background rgba(43,199,239,0.8)
+  }
+  .taskstatus{
+    cursor pointer
+  }
+</style>

web/src/views/Deploy/taskManage/facetask/facetask.vue

+<template>
+  <div style="overflow:hidden">
+    <el-row class="nav-bar-two"></el-row>
+    <el-row :gutter="6">
+      <el-col :span="4">
+        <div class="left-box">
+          <div class="left-header">任务列表</div>
+          <div class="deploy-list" v-for="(item, index) in taskList" :key="item.unid" @click="selectTask(item, index)" :class="{activetask:index==curTaskIndex}">
+            <i :class="{'el-icon-fa-pause':item.enabled,'el-icon-fa-play':!item.enabled,iceon:true,'taskstatus':true}" @click="setTaskStatus($event, item)"></i>
+            <span class="deploy-name">{{item.name}}</span>
+            <i class="el-icon-fa-edit icon" @click="editTask($event, item)"></i>
+            <i class="el-icon-fa-trash pl10 icon" @click="deleteTask($event, item)"></i>
+          </div>
+          <el-button type="primary" class="task-btn" @click="newtask">新建布控任务</el-button>
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <div class="right-box">
+          <div class="right-content" v-if="taskDetail">
+            <el-row style="overflow:hidden">
+              <p class="right-title">布控类型</p>
+              <el-col class="dbname-box">
+                <i class="el-icon-document icon"></i>
+                <span class="dbname">{{taskDetail.cate | filterDeployType}}</span>
+              </el-col>
+            </el-row>
+            <p class="right-title">布控库</p>
+            <el-col class="dbname-box" :xl="6" :lg="6" v-for="item in taskDetail.task_info.crucial_types" :key="item.code">
+              <i class="el-icon-fa-folder-open icon"></i>
+              <span class="dbname">{{formatDbName(item)}}</span>
+            </el-col>
+            <!--运行时间-->
+            <el-row class="time-box" v-if="taskDetail.cate !='face_stay'"  v-show="taskDetail.task_info.period_type && taskDetail.task_info.period_type != 'none'">
+              <p class="right-title">运行时间</p>
+              <el-col :lg="10" v-for="(item, index) in taskDetail.task_info.periods" :key="index" class="deploy-time">
+                <i class="el-icon-time"></i>
+                {{formatShowTImer(item[0])}} - {{formatShowTImer(item[1])}}
+              </el-col>
+            </el-row>
+            <!--/运行时间-->
+            <!--非周期任务运行时间-->
+            <el-row  class="time-box"  v-show="taskDetail.task_info.period_type && taskDetail.task_info.period_type == 'none'">
+              <p class="right-title">运行时间</p>
+              <el-col :lg="10" class="deploy-time">
+                <i class="el-icon-time"></i>
+                {{showLocalTime(taskDetail.task_info.start_dt)}} - {{showLocalTime(taskDetail.task_info.end_dt)}}
+              </el-col>
+            </el-row>
+            <!--/非周期任务运行时间-->
+            <!--滞留阈值-->
+            <el-row class="time-box" v-show="taskDetail.cate =='face_stay'">
+              <p class="right-title">滞留阈值</p>
+              <el-col :lg="8"  class="deploy-time">
+                <i class="el-icon-time"></i>
+                {{stayMsec(taskDetail.task_info.stay_msec)}}
+              </el-col>
+            </el-row>
+            <!--/滞留阈值-->
+            <!--布控人员-->
+            <el-row class="deploy-vchan-box" v-if="taskDetail.task_info.crucial_faces" v-show="taskDetail.task_info.crucial_faces.length > 0">
+              <p class="right-title">布控人员</p>
+              <el-col :lg="4" v-for="item in taskDetail.task_info.crucial_faces" :key="item" class="deploy-vchan">
+                <i class="el-icon-fa-user icon"></i>
+                <span>{{formatFaceName(item)}}</span>
+              </el-col>
+            </el-row>
+            <!--/布控人员-->
+            <!--运行设备-->
+            <el-row class="deploy-vchan-box">
+              <p class="right-title">运行设备</p>
+              <el-col :lg="12" v-for="item in taskDetail.task_info.vchans" :key="item" class="deploy-vchan">
+                <i class="el-icon-fa-desktop icon"></i>
+                <span>{{formatVchanName(item)}}</span>
+              </el-col>
+            </el-row>
+            <!--/运行设备-->
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-dialog :title="title" :visible.sync="taskVisible" width="50%">
+        <div class="header" style="overflow:hidden">
+          <el-form :model="taskForm" ref="taskRuleForm" :rules="taskRules" label-width="100px" class="demo-dynamic">
+            <el-form-item label="任务名称"  prop="name">
+              <el-col :span="10">
+                <el-input v-model="taskForm.name" placeholder="请输入布控任务名称"></el-input>
+              </el-col>
+            </el-form-item>
+            <el-form-item label="布控库">
+              <el-col :span="10">
+                <el-select v-model="taskForm.task_info.crucial_types" multiple placeholder="请选择布控库">
+                   <el-option v-for="item in dbdata" :key="item.unid" :label="item.name" :value="item.code"></el-option>
+                </el-select>
+              </el-col>
+            </el-form-item>
+            <el-form-item label="布控类型" prop="cate">
+              <el-col :span="10">
+                <el-select v-model="taskForm.cate" :disabled="editstate" placeholder="请选择布控类型">
+                  <el-option :label="item.name" :value="item.type" v-for="item in cate" :key="item.type"></el-option>
+                </el-select>
+              </el-col>
+            </el-form-item>
+            <el-form-item label="任务周期">
+              <el-col :span="10">
+                <el-select v-model="taskForm.task_info.period_type" placeholder="请选择布周期">
+                  <el-option label="周期任务" value="day"></el-option>
+                  <el-option label="非周期任务" value="none"></el-option>
+                </el-select>
+              </el-col>
+            </el-form-item>
+            <el-form-item label="滞留阈值" v-show="taskForm.cate =='face_stay'">
+              <el-col :span="10">
+                  <el-input-number v-model="day" :min="0"></el-input-number><span class="pl10 stay">天</span>
+                  <el-input-number  v-model="hours" class="mt10" :min="0" :max="24"></el-input-number><span class="pl10 stay">小时</span>
+              </el-col>
+            </el-form-item>
+            <el-form-item  v-for="(item, index) in taskForm.task_info.periods" prop="periods" :key="index" label="运行时间"  v-if="taskForm.cate !='face_stay' && taskForm.task_info.period_type == 'day'">
+              <el-col :span="19">
+                <el-col :span="10" style="margin-bottom:10px;">
+                  <el-time-picker is-range v-model="taskForm.task_info.periods[index]" placeholder="选择时间范围" value-format="HH:mm:ss" style="width:100%"></el-time-picker>
+                </el-col>
+                <el-col :span="1" :offset="1" v-show="index!=0">
+                  <div class="el-icon-minus add-task" @click="deleteTimer(index)"></div>
+                </el-col>
+                <el-col :span="2" v-show="index==taskForm.task_info.periods.length-1" :class="{pl30:index==0}">
+                  <div class="el-icon-plus add-task" @click="addTimer"></div>
+                </el-col>
+              </el-col>
+            </el-form-item>
+            <!--非周期性任务-->
+            <el-form-item label="周期时间"  v-if="taskForm.cate !='face_stay' && taskForm.task_info.period_type != 'day'">
+              <el-col :span="19">
+                 <el-date-picker
+                  v-model="periodtimer"
+                  type="datetimerange"
+                  value-format ="yyyy-MM-dd HH:mm:ss"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期">
+                </el-date-picker>
+              </el-col>
+            </el-form-item>
+            <!---->
+            <el-form-item label="执勤人员"  v-if="taskForm.task_info.period_type != 'day'">
+              <el-col :span="10">
+              <el-select v-model="taskForm.task_info.crucial_faces" filterable multiple placeholder="请选择">
+                <el-option
+                  v-for="item in whiteList"
+                  :key="item.unid"
+                  :label="item.name"
+                  :value="item.unid">
+                </el-option>
+              </el-select>
+              </el-col>
+            </el-form-item>
+            <!--短息/彩信-->
+            <el-col :span="18">
+              <el-form-item label="信息推送">
+               <el-switch
+                  class="mt10 ml20"
+                  width="50"
+                  style="display: block"
+                  v-model="taskForm.task_info.sms.if_send"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                  active-text="开启"
+                  inactive-text="关闭">
+              </el-switch>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="推送方式" v-show="taskForm.task_info.sms.if_send">
+                <el-col :span="10">
+                  <el-select v-model="taskForm.task_info.sms.use_mms" placeholder="请选择布周期">
+                    <el-option label="短信推送" :value="false"></el-option>
+                    <el-option label="彩信推送" :value="true"></el-option>
+                  </el-select>
+                </el-col>
+              </el-form-item>
+            </el-col>
+            <!--/短息/彩信-->
+            <!--短信或彩信发送人员-->
+            <el-col :span="24" style="overflow:hidden">
+              <el-form-item label="信息发送至"  v-show="taskForm.task_info.sms.if_send">
+                <el-col :span="10">
+                <el-select v-model="taskForm.task_info.sms.users" filterable multiple placeholder="请选择">
+                  <el-option
+                    v-for="item in smslistData"
+                    :key="item.user_unid"
+                    :label="item.name"
+                    :value="item.user_unid">
+                  </el-option>
+                </el-select>
+                </el-col>
+              </el-form-item>
+            </el-col>
+            <!--/短信或彩信发送人员-->
+            <el-col :span="24">
+              <div style="overflow:hidden">
+                <el-col :span="10" :offset="2">
+                  <el-input v-model="devLike" placeholder="请输入设备名称"></el-input>
+                </el-col>
+                <el-col :span="5" :offset="1">
+                  <el-button type="primary" @click="checkdev">查询</el-button>
+                </el-col>
+              </div>
+              <div class="mt10">
+                <el-form-item label="运行设备"  prop="taskdev">
+                  <div  class="dev-box">
+                      <el-checkbox-group v-model="taskForm.task_info.vchans">
+                        <el-col :span="12" v-for="item in vchansList" :key="item.unid">
+                          <el-checkbox :label="item.vchan_refid" class="dev-check">{{item.vchan_name}}</el-checkbox>
+                        </el-col>
+                      </el-checkbox-group>
+                  </div>
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-form>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="taskVisible = false">取 消</el-button>
+          <el-button type="primary" @click="addtask('taskRuleForm')">确 定</el-button>
+        </div>
+      </el-dialog>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      const _this= this;
+      const validateperiods = (rule, value, callback) => {
+          _this.taskForm.task_info.periods.forEach((ev) => {
+            if(ev == ''){
+              callback(new Error(rule.message));
+                return;
+            } else {
+             callback()
+            }
+          });
+        }
+      const validatortaskdev =  (rule, value, callback) => {
+          if(_this.taskForm.task_info.vchans.length < 1){
+              callback(new Error(rule.message));
+                    return ;
+          }else {
+           callback()
+          }
+        }
+      // const validatperiodtimer =(rule, value, callback) => {
+      //   console.log(_this.periodtimer)
+      //     if(_this.periodtimer.length < 1){
+      //         callback(new Error(rule.message));
+      //               return;
+      //     }else {
+
+      //      callback()
+      //     }
+      //   }
+      return {
+        value4:'',
+        title:"新建布控任务",
+        day:0,
+        hours:0,
+        vdev: "",
+        devLike:"",
+        curTaskIndex:0,
+        vchansList:[],
+        allvchanData:[],
+        smslistData:[],
+        taskDetail:"",
+        editstatus:'',//编辑状态
+        editunid:'',//编辑id
+        taskList: [],
+        cate:[],
+        taskVisible: false,
+        activeName: "first",
+        begintime: "",
+        endtime: "",
+        value3: "",
+        editstate:false,
+        dbdata: [],
+        whiteList:'',
+        periodtimer:[],//开始结束日期
+        taskForm: {
+          cate: "", //必填，任务类型
+          name: "", //必填，任务名称
+          enabled: true,//必填，任务详细配置信息
+          task_info: {
+            periods: [
+               ['00:00:00', '23:59:59']
+            ],
+            use_all_vchans: false, //是否对所有视频通道布控，不出现为false，如果为true，则vchans无效。
+            vchans: [], //目标视频通道的refid列表
+            crucial_types: [], //目标库列表
+            sms: {
+              if_send: false ,//是否发送短信，默认false
+              use_mms: false,
+              users:[]
+            },
+            stay_msec:'',
+            period_type:'day',
+            start_dt:'',
+            end_dt:'',
+            crucial_faces:[]
+          }
+        },
+        taskRules:{
+          name:[
+             { required: true, message: '请输入任务名称', trigger: 'blur' },
+          ],
+          // periodtimer:[{
+          //   required: true,validator: validatperiodtimer, message: '请输入周期时间', trigger: 'blur'
+          // }],
+          cate:[
+                { required: true, message: '请选择布控类型', trigger: 'blur' },
+              ],
+          periods:[
+            { required: true, validator: validateperiods, message: '时间范围不能为空！', trigger: 'blur' }
+          ],
+          taskdev:[
+             { required: true, validator: validatortaskdev, message: '运行设备设置不能为空！', trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    methods: {
+      /**@augments
+       * 触发新建任务
+       */
+      newtask() {
+        this.title = "新建布控任务";
+        this.taskVisible = true;
+        this.editstate = false;
+        this.$refs.taskRuleForm.resetFields();
+        this.taskForm.task_info.periods =[['00:00:00', '23:59:59']];
+        this.taskForm.task_info.crucial_types = [];
+        this.taskForm.task_info.vchans = [];
+      },
+
+      /**@augments
+       * 获取任务列表
+       */
+      getTaskList() {
+        return new Promise((resolve, reject) => {
+          this.axios
+            .get(FACEWEB + "/monitor_tasks", {
+              params: {
+                "is_deleted":false
+              }
+            })
+            .then(response => {
+              this.taskList = response.data.list_data;
+              resolve(response.data.list_data);
+            });
+        });
+      },
+
+      /**@augments
+       * 开启或关闭任务
+       */
+      setTaskStatus(event,data) {
+        event.cancelBubble = true;
+        this.editstatus = 1;
+        let url = FACEWEB + "/monitor_tasks/" + data.unid;
+        this.getTaskDetail(data.unid,(response)=>{
+          this.taskDetail.enabled = !this.taskDetail.enabled;
+          this.addtaskapi(url, this.taskDetail).then((response) => {
+            this.getTaskList();
+          });
+        });
+      },
+
+      /**@augments
+       * 当前选中的任务
+       */
+      selectTask(data, index) {
+        this.curTaskIndex = index;
+        this.getTaskDetail(data.unid);
+      },
+
+      /**@augments
+       * 获取任务详情
+       */
+      getTaskDetail(unid, callback) {
+          this.axios.get(FACEWEB + "/monitor_tasks/" + unid).then(response => {
+          this.taskDetail = response.data;
+          if(callback)callback(response);
+          });
+      },
+
+      /**@augments
+       * 添加任务操作
+       */
+      addtask(formName) {
+        const _vthis = this;
+        let url = FACEWEB + "/monitor_tasks/";
+        if (this.editstatus == 1){//编辑任务
+          url = FACEWEB + "/monitor_tasks/" + this.editunid;
+        }
+        if(this.taskForm.cate != "face_stay"){
+            this.taskForm.task_info.periods.forEach((e,index) => {
+              if(e[0] && e[1]) {
+                e[0] = this.setUtcTime(e[0]);
+                e[1] = this.setUtcTime(e[1]);
+              } else {
+                e[0] = '';
+                e[1] = '';
+              }
+            });
+        } else {
+          this.taskForm.task_info.periods = [];
+        }
+        if(this.taskForm.task_info.period_type == 'none') {
+          if(this.periodtimer.length > 0) {
+            this.taskForm.task_info.start_dt = this.periodtimer[0];
+            this.taskForm.task_info.end_dt = this.periodtimer[1];
+          }
+        }
+        this.$refs["taskRuleForm"].validate((valid) => {
+          if (valid) {
+            _vthis.taskForm.task_info.stay_msec = _vthis.formatStayTime();
+            _vthis.addtaskapi(url, this.taskForm).then(response => {
+              _vthis.$refs["taskRuleForm"].resetFields();
+              _vthis.taskForm.task_info.periods = [[]]; //清空时间
+              _vthis.taskForm.task_info.vchans = [];//清空相机
+              _vthis.taskForm.task_info.crucial_types = [];//清空布控库
+              this.taskVisible = false;
+              this.editstatus = 0
+              this.getTaskList();
+            })
+          } else {
+            console.log(valid);
+            return false;
+          }
+        });
+      },
+      /**@augments
+      *添加任务 API
+       */
+      addtaskapi (url, data) {
+        return new Promise((resolve, reject) => {
+          this.axios.post(url , data).then (response => {
+            resolve(response)
+          })
+        })
+
+      },
+
+      /**@augments
+       * 编辑任务
+       */
+      editTask(event, data) {
+        this.title = "编辑任务";
+        this.editstate = true;
+        event.cancelBubble = true;
+        this.axios
+          .get(FACEWEB + "/monitor_tasks/" + data.unid)
+          .then(response => {
+            debugger
+            this.taskForm = response.data;
+            this.editstatus = 1;
+            this.editunid = response.data.unid;
+            if(this.taskForm.task_info.periods.length > 0) {
+              this.taskForm.task_info.periods.forEach((e,index) => {
+                e[0] = this.showLocalTime(e[0]);
+                e[1] = this.showLocalTime(e[1]);
+              });
+            } else {
+              this.taskForm.task_info.periods.push([]);
+            }
+            let timer= this.taskForm.task_info.stay_msec;
+            this.day = parseInt(timer/(24*60*60));
+            this.hours = (timer%(24*60*60))/(60*60);
+            this.taskVisible = true;
+            this.periodtimer = [data.task_info.start_dt,data.task_info.end_dt];
+          });
+      },
+
+      /**@augments
+       * 删除任务
+       */
+      deleteTask(event, data) {
+        event.cancelBubble = true;
+        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+          .then(() => {
+            this.axios
+              .delete(FACEWEB + "/monitor_tasks/" + data.unid)
+              .then(response => {
+                this.getTaskList();
+                this.$message({
+                  type: "success",
+                  message: "删除成功!"
+                });
+              });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除"
+            });
+          });
+      },
+      /**@augments
+       * 添加时间
+       */
+      addTimer() {
+        this.taskForm.task_info.periods.push(['00:00:00', '23:59:59']);
+      },
+      /**@augments
+       * 删除时间
+       */
+      deleteTimer(index) {
+        this.taskForm.task_info.periods.splice(index, 1);
+      },
+      /**@augments
+      *格式化滞留阈值以秒给后台
+       */
+       formatStayTime() {
+         return this.day*24*60*60 + this.hours*60*60
+       },
+       /**@augments
+       *格式化滞留阈值以
+       *天+小时方式显示
+        */
+       stayMsec(data){
+         let result = '';
+         if(data) {
+           if(data >= 24*60*60){
+              let day = parseInt(data/(24*60*60));
+              let hour = (data%(24*60*60))/(60*60);
+              result = day + "天" + hour +"小时";
+            } else {
+              let hour = data/(60*60);
+              result = hour + "小时";
+            }
+         } else {
+           result = '';
+         }
+
+         return result;
+       },
+      /**@augments
+       * 筛选设备
+       */
+      checkdev() {
+         const searchData = [];
+        if (this.devLike != '') {
+          for (let i = 0; i < this.allvchanData.length; i++) {
+            if (this.allvchanData[i].vchan_name.indexOf(this.devLike) > -1) {
+              searchData.push(this.allvchanData[i]);
+            }
+          }
+          this.vchansList = searchData;
+        } else {
+          this.vchansList = this.allvchanData;
+        }
+      },
+
+      /**@augments
+       * 格式化显示时间
+       */
+      formatShowTImer(data) {
+      let date = this.formatPickerTimer(data);
+      let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+      let mins = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+      let secondes = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();;
+      return hours + ":" + mins + ":" + secondes;
+      },
+
+      /**@augments
+       * 格式化timerpicker 所需时间
+       */
+      formatPickerTimer(timer) {
+        if(timer) {
+          let date = new Date();
+          let Y = date.getFullYear(),
+              M =  date.getMonth() + 1 < 10
+                    ? "0" + (date.getMonth() + 1)
+                    : date.getMonth() + 1,
+              D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(),
+              H = Number(timer.split(":")[0]) + 8,
+              m = timer.split(":")[1],
+              s = timer.split(":")[2];
+          return new Date(Y ,M ,D ,H ,m ,s);
+        } else {
+          return '';
+        }
+      },
+      /**@augments
+       * 格式化布控人名
+       */
+      formatFaceName(data){
+        let name = '';
+        this.whiteList.forEach(ele => {
+          if(ele.unid == data) {
+            name = ele.name
+          }
+        })
+          return name
+      },
+      /**@augments
+       * 格式化库名
+       */
+      formatDbName(data) {
+        let dbname = '';
+        this.dbdata.forEach((ev) => {
+          if(ev.code == data) {
+            dbname = ev.name;
+          }
+        });
+         return dbname
+      },
+      /**@augments
+       * 格式化设备名称
+       */
+      formatVchanName(data) {
+        let vchanName = '';
+        this.allvchanData.forEach((ev) => {
+          if(ev.vchan_refid == data) {
+            vchanName = ev.vchan_name;
+            return false
+          }
+        });
+        return vchanName;
+      },
+      getVchanList(){
+      this.axios
+        .get(IP + "/api/v1/org/vchans/list", {}).then(response => {
+          this.vchansList = response.data.list_data;
+          this.allvchanData = response.data.list_data;
+        });
+      },
+      /**@augments
+      *获取布控名单
+      */
+      getwhiteList(){
+        this.axios
+          .get(FACEWEB + "/faces/crucial_faces", {
+            params: {
+              offset: 0,
+              limit: 2000,
+              is_crucial: true,
+              is_active: true,
+              sex: this.facesex,
+              name__like: '',
+              card_id__like: '',
+              crucial_type: 'dl_white',
+              resident_unids: '',
+            }
+          }).then( (response)=> {
+            this.whiteList = response.data.list_data;
+          });
+      },
+      /**@augments
+       * 获取短信推送名单
+       */
+      getSmsList(){
+        this.axios.get(IP + "/api/v1/auth/users", {
+          params: {
+            limit: 10000,
+            offset: 0,
+            user_type: "user",
+            norm_type: "login"
+          }
+        }).then((response) => {
+          this.smslistData = response.data.list_data;
+        });
+      },
+    },
+    created() {
+      this.getwhiteList();
+      this.getVchanList();
+      this.getSmsList();
+      /**@augments
+       * 获取任务列表并初始化首个任务
+       */
+      this.getTaskList().then(response => {
+        if(response.length > 0)
+          this.getTaskDetail(response[0].unid);
+      });
+      this.faceapi.getFaceDbData().then(res => {
+         this.dbdata = res.list_data;
+      });
+      this.cate = this.$store.state.alarmtype;
+    }
+  };
+
+</script>
+<style lang="stylus" scoped>
+  .left-box {
+    height: 750px;
+    box-shadow:0px 0px 7px 2px #2bc7ef inset;
+    overflow: hidden;
+    color: #fff;
+    position: relative;
+
+    .task-btn {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .right-box {
+    box-shadow:0px 0px 7px 2px #2bc7ef inset;
+    height: 750px;
+    overflow: hidden;
+  }
+
+  .left-header {
+    height: 60px;
+    line-height: 60px;
+    border-bottom: 2px solid #2A2C3B;
+    color: #9E9FA5;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .deploy-list {
+    height: 50px;
+    line-height: 50px;
+    padding-left: 15px;
+
+    .icon {
+      font-size: 16px !important;
+      cursor: pointer;
+    }
+  }
+
+  .deploy-name {
+    padding-left: 15px;
+    display: inline-block;
+    width: 60%;
+  }
+
+  .right-title {
+    font-size: 18px;
+    color: #9E9FA5;
+    font-weight: 600;
+  }
+
+  .right-content {
+    width: 96%;
+    margin: 20px auto;
+  }
+
+  .dbname-box {
+    .icon {
+      font-size: 40px !important;
+      color: #fff;
+      vertical-align: top;
+    }
+
+    .dbname {
+      color: #ffffff;
+      font-size: 18px;
+      display: inline-block;
+      height: 50px;
+      line-height: 50px;
+      padding-left: 10px;
+    }
+  }
+
+  .deploy-time {
+    color: #fff;
+    margin-bottom: 20px;
+  }
+
+  .time-box {
+    margin-top: 80px;
+  }
+
+  .deploy-vchan {
+    color: #fff;
+    margin-bottom: 10px;
+    font-size: 20px;
+
+    .icon {
+      font-size: 20px !important;
+    }
+  }
+
+  .add-task {
+    cursor: pointer;
+  }
+
+  .dev-check {
+    width: 100%;
+    margin-left: 0px;
+    color: #fff;
+  }
+
+  .el-form-item__content {
+    margin-left: 10px !important;
+    overflow: hidden;
+  }
+
+  .dev-box {
+    height: 200px;
+    overflow: auto;
+  }
+
+  .plr10 {
+    padding: 0 10px;
+  }
+
+  .mb10 {
+    margin-bootm: 10px;
+  }
+
+  .pl30 {
+    padding-left: 30px;
+  }
+  .activetask {
+    background rgba(43,199,239,0.8)
+  }
+  .taskstatus{
+    cursor pointer
+  }
+  .stay{
+    color: #fff
+  }
+
+</style>

web/src/views/Deploy/taskManage/index.vue

+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+export default {
+  
+}
+</script>
+<style lang="stylus" scoped>
+
+</style>

web/src/views/Deploy/taskManage/worker/workderdetail.vue

+<template>
+  <div class="workdetailbox">
+    <el-dialog title="工作票详情" :visible.sync="workerdetaildialog" width="60%" :before-close="closedetaildialong">
+      <div class="ticket-detail-box">
+        <el-col :span="12">
+          <el-col :span="12">
+            <span class="label-title">工作票名称：</span><span>{{detailData.name}}</span>
+          </el-col>
+          <el-col :span="12">
+            <span  class="label-title">工作班组：</span><span>{{detailData.group_name}}</span>
+          </el-col>
+          <el-row>
+            <el-col :span="12">
+              <span  class="label-title">工作地点：</span><span>{{getOrg(detailData.transformer_sub_unid)}}</span>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="4"  class="label-title">工作时间：</el-col>
+            <el-col :span="20">
+              <span v-for="(item, index) in detailData.work_date_times" :key="index">{{item.start_dt}}至{{item.end_dt}}</span>
+            </el-col>
+          </el-row>
+          <div class="">
+            <el-col :span="24">工作负责人：</el-col>
+            <el-col :span="20">
+              <el-col  class="img-box" :span="7" v-for="(item,index) in detailData.charger_persons" :key="index">
+                <div>
+                  <img :src="item.pic_url" alt="">
+                </div>
+                <div>{{item.person_name}}</div>
+              </el-col>
+            </el-col>
+          </div>
+          <div class="">
+            <el-col :span="24">工作人员：</el-col>
+            <el-col :span="20">
+              <el-col  class="img-box" :span="7" v-for="(item,index) in detailData.work_persons" :key="index">
+                <div>
+                  <img :src="item.pic_url" alt="">
+                </div>
+                <div>{{item.person_name}}</div>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="work-car-box">
+            <el-col :span="24">工作车辆：</el-col>
+            <el-col class="work-car-num" :span="4" v-for="(item,index) in detailData.vehicle_plates" :key="index">
+              <span>{{item}}</span>
+            </el-col>
+          </div>
+          <div class="">
+            <el-col :span="24">工作票照片：</el-col>
+            <el-col :span="20">
+              <el-col class="tickets-box" :span="8" v-for="(item,index) in detailData.work_tickets" :key="index">
+                <div>
+                  <img :src="item.pic_url" alt="">
+                </div>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closedetaildialong">取 消</el-button>
+        <el-button type="primary" @click="closedetaildialong">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {}
+    },
+    props: {
+      workerdetaildialog: {},
+      detailData: {},
+      orgData: {}
+    },
+    methods: {
+      closedetaildialong() {
+        this.$emit('closedetaildialong')
+      },
+      getOrg(data) {
+        let orgname = '';
+        this.orgData.map(e => {
+          if (e.unid == data) {
+            orgname = e.org_name;
+          }
+        });
+        return orgname;
+      }
+    },
+    watch: {
+      detailData(val) {
+        console.log(val)
+      }
+    },
+    created() {}
+  };
+
+</script>
+<style lang="stylus" scoped>
+  .ticket-detail-box {
+    color #fff
+    overflow hidden
+  }
+  .label-title{
+    color #f0f0f0
+  }
+  .workdetailbox {
+    font-size 14px
+  }
+
+  .img-box {
+    height 150px
+    img {
+      height 120px
+    }
+  }
+
+  .tickets-box {
+    height 200px
+    width 200px 
+    img {
+      width 100%
+      height 100%
+    }
+  }
+  .work-car-num {
+    height 35px
+    width 110px
+    border-radius 5px
+    line-height 35px
+    background #001F8C
+    padding-left 10px
+    color #fff
+    font-size 14px
+    letter-spacing 3px
+    margin-left 10px
+  }
+
+</style>

web/src/views/Deploy/taskManage/worker/worker.vue

+<template>
+  <div>
+    <el-row class="mt30">
+      <el-col :span="3" :offset="1">
+        <el-select v-model="transformer_sub_unid" class="br0 bra">
+          <el-option value="" label="请选择地点"></el-option>
+          <el-option v-for="item in orgData" :key="item.unid" :value="item.unid" :label="item.org_name" v-if="item.org_pid!=0"></el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="3">
+        <el-input type="text" class="br0 bla bra" v-model="charger_person_name" placeholder="请输入负责人姓名"></el-input>
+      </el-col>
+      <el-col :span="5" style="overflow:hidden">
+        <el-date-picker v-model="work_date_time"  type="datetimerange" range-separator="至" value-format ="yyyy-MM-dd HH:mm:ss"  start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+      </el-col>
+      <el-col :span="2">
+        <el-button :plain="true" icon="edit" class="set-btn" style="width:80%;float:right;" type="info" @click="addFaceBlack">添加</el-button>
+      </el-col>
+      <el-col :span="2" class="ml10">
+        <el-button class="set-btn" style="width:80%;" icon="search" @click="searchWork">搜索</el-button>
+      </el-col>
+      <el-col :span="2" class="ml10">
+        <el-button class="set-btn" style="width:80%;margin-left:-20%" icon="search" @click="uploadWork">导入</el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <workhandle ref="worktickets" :editData="editData" :orgData="orgData" :workerdialogtitle="workerdialogtitle" :ticketState="ticketState" :workerdialog="workerdialog" @closeaworkdialong="closeaworkdialong"></workhandle>
+      <!-- <facetable @edit="editTable" :dbname="dbname" :facename="facename" :facesex="facesex" :facecardid="facecard_id" :communityunid="communityunid" ref="c1"></facetable> -->
+      <workdetail :workerdetaildialog="workerdetaildialog"  :orgData="orgData" :detailData="detailData" @closedetaildialong="closedetaildialong"></workdetail>
+    </el-row>
+    <el-row class="mt20">
+      <div>
+        <el-table :data="tableData" style="width: 98%;margin:0 auto;" v-loading.body="loading">
+          <el-table-column label="序号" type="index" width="120"></el-table-column>
+          <el-table-column label="工作票名称" property="name" width="280"></el-table-column>
+          <el-table-column label="班组名称" property="group_name" width="280"></el-table-column>
+          <el-table-column label="工作负责人">
+            <template slot-scope="scope">
+              <div>
+                <span v-for="(item,index) in scope.row.charger_persons" :key="index">{{item.person_name}}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="工作时间">
+            <template slot-scope="scope">
+              <div>
+                <span v-for="(item,index) in scope.row.work_date_times" :key="index">{{item.start_dt}} 至 {{item.end_dt}}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" property="provence">
+          </el-table-column>
+          <el-table-column label="操作" width="300px" align="center">
+            <template slot-scope="scope">
+              <div class="tab-btn-box">
+                <span class="table-btn" size="" @click="handleSee(scope.$index, scope.row)">查看详情</span>
+                <span class="table-btn" size="" @click="handleEdit(scope.$index, scope.row)">编辑工作票</span>
+                <!-- <span class="table-btn" size="" @click="deleteticket(scope.$index, scope.row)">删除工作票</span> -->
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="block">
+          <el-pagination class="pages" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+            :current-page.sync="currentPage" :page-size="limit" layout="total,prev, pager, next, jumper" :total="total">
+          </el-pagination>
+        </div>
+      </div>
+    </el-row>
+    <el-row>
+      <el-dialog
+        title="工作票导入"
+        :visible.sync="workVisible"
+        :before-close="handleClose"
+        width="30%"
+       >
+        <el-row>
+          <el-select v-model="uploaddata.transformer_sub_unid" class="bra">
+            <el-option value="" label="请选择地点"></el-option>
+            <el-option v-for="item in orgData" :key="item.unid" :value="item.unid" :label="item.org_name" v-if="item.org_pid!=0"></el-option>
+          </el-select>
+        </el-row>
+        <el-row>
+          <el-upload
+            class="upload-box"
+            drag
+            name="work_ticket_file"
+            :action="IP + '/api/v1/face_web/work_tickets/upload'"
+            :data="uploaddata"
+            :before-upload="checkorg"
+            :on-success="successupload"
+            ref="workupload"
+            multiple>
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+          </el-upload>
+        </el-row>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="handleClose">取 消</el-button>
+          <el-button type="primary" @click="handleClose">确 定</el-button>
+        </span>
+      </el-dialog>
+    </el-row>
+  </div>
+</template>
+<script>
+  // import Facetable from "./faceTable";
+  import workhandle from './workerhandle'
+  import workdetail from './workderdetail.vue'
+  export default {
+    data() {
+      return {
+        tableData: [],
+        workerdialog: false,
+        workerdialogtitle:'添加工作票',
+        Substate: 1,
+        loading: false,
+        date_dt: '',
+        curEditData: [], //当前编辑的数据
+        transformer_sub_unid: "",
+        charger_person_name:'',
+        work_date_time:[],
+        facename:'',
+        currentPage:1,
+        limit:20,
+        total:0,
+        offset:0,
+        editData:'',
+        detailData:'',
+        ticketState:1,//工作票状态1添加2编辑
+        workerdetaildialog:false,
+        orgData:[],
+        workVisible:false,
+        uploaddata:{
+          transformer_sub_unid:''
+        }
+      };
+    },
+    methods: {
+      closeaworkdialong(val) {
+        if(val == 1) {
+          this.initTable();
+        }
+        this.workerdialog = false;
+      },
+      addFaceBlack() {
+        this.workerdialog = true;
+        this.ticketState = 1;
+        this.workerdialogtitle = "添加工作票";
+      },
+      searchWork() {
+        this.initTable();
+      },
+      handleSee(index, row){
+        this.workerdetaildialog = true;
+        this.detailData = row;
+      },
+      closedetaildialong(){
+        this.workerdetaildialog = false;
+      },
+      handleSizeChange(){
+        
+      },
+      checkorg(){
+        if(this.uploaddata.transformer_sub_unid == '') {
+          this.$message.error('值班地点不能为空');
+          return false
+        } else {
+          return true
+        }
+      },
+      successupload(){
+        this.$message({
+          message: '工作票上传成功',
+          type: 'success'
+        });
+        this.initTable();
+      },
+      handleClose(){
+        this.workVisible = false;
+        this.$refs.workupload.clearFiles();
+        this.uploaddata.transformer_sub_unid = '';
+      },
+      handleEdit(index, row){
+        this.workerdialog = true;
+        this.workerdialogtitle = "编辑工作票";
+        this.editData = row;
+        this.ticketState = 2;
+        this.$refs.worktickets.editTicket();
+      },
+      handleCurrentChange(val) {
+        this.offset = (val - 1) * this.limit;
+        this.initTable();
+      },
+      initTable() {
+        var Vthis = this;
+        this.axios
+          .get(FACEWEB + "/work_tickets", {
+            params: {
+              offset: this.offset,
+              limit: this.limit,
+              is_crucial: true,
+              is_active: true,
+              transformer_sub_unid:this.transformer_sub_unid,
+              charger_person_name:this.charger_person_name,
+              start_dt:this.work_date_time[0]?this.work_date_time[0]:'',
+              end_dt:this.work_date_time[1]?this.work_date_time[1]:'',
+            }
+          }).then(function (response) {
+            Vthis.tableData = response.data.list_data;
+            Vthis.total = response.data.total_num;
+            Vthis.loading = false;
+          });
+      },
+      uploadWork(){
+        this.workVisible = true;
+      },
+      uploadworkexcle(){
+        //上传工作票之后
+        this.initTable();
+      }
+    },
+    components: {
+      workhandle,
+      workdetail
+    },
+    computed: {},
+    created() {
+      var Vthis = this;
+      this.faceapi.getOrg().then(res => {
+        debugger
+          Vthis.orgData = res.list_data;
+      });
+      this.initTable();
+      this.communityData = this.$store.state.initinfo.org;2
+      this.axios
+        .get(IP + "/api/v1/codes/countries/0E229CD043/provinces")
+        .then(function (response) {
+          Vthis.provenceData = response.data.list_data;
+        });
+    },
+    mounted() {}
+  };
+
+</script>
+<style lang="stylus" scoped>
+  .el-date-editor.el-input {
+    width: 100%;
+  }
+
+  .cc {
+    text-align: center;
+  }
+  .pages{
+    margin 20px 0
+    float right
+  }
+  .upload-box {
+      margin 40px auto 0
+      text-align center
+    }
+</style>

web/src/views/Deploy/taskManage/worker/workerhandle.vue

+<template>
+  <div class="work-dialog">
+    <el-dialog :title="workerdialogtitle" :visible.sync="workerdialog" width="70%" :before-close="closeaworkdialong">
+      <div class="work-box">
+        <el-col :span="13" class="left-box">
+          <el-form :model="jobForm" ref="jobForm" label-width="100px" class="demo-dynamic">
+            <el-row>
+              <el-col :span="11">
+                 <el-form-item prop="name" label="跨站工作">
+                    <el-select v-model="jobForm.is_multipoint" filterable placeholder="请选择变电站">
+                      <el-option label="禁止" :value="false"></el-option>
+                      <el-option label="允许" :value="true"></el-option>
+                    </el-select>
+                  </el-form-item>
+              </el-col>
+             
+            </el-row>
+            <!-------------------------------工作票信息-------------------------------------------->
+            <el-row>
+               <el-col :span="11">
+              <el-form-item prop="name" label="工作票名称" :rules="[
+                  { required: true, message: '请输入工作票名称', trigger: 'blur' }]">
+                <el-input v-model="jobForm.name"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="11">
+              <el-form-item prop="group_name" label="班组名称" :rules="[
+                  { required: true, message: '请输入班组名称', trigger: 'blur' }]">
+                <el-input v-model="jobForm.group_name"></el-input>
+              </el-form-item>
+            </el-col>
+            </el-row>
+            <el-row >
+              <el-col :span="16">
+                <el-form-item label="变电站选择">
+                  <el-select v-model="jobForm.transformer_sub_unid" filterable placeholder="请选择变电站">
+                    <el-option label="无" value=""></el-option>
+                    <el-option v-for="(item, index) in orgData" :key="index" :label="item.org_name" :value="item.unid" v-if="item.org_pid!=0"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <div class="work-timer-box">
+            <el-row v-for="(domain, index) in jobForm.work_date_times" :label="'' + index" :key="index" >
+              <el-col :span="14" >
+                <el-form-item  
+                  :prop="'work_date_times.' + index + ''" :rules="{
+                  required: true, message: '时间不能为空', trigger: 'blur'
+                }">
+                  <el-date-picker v-model="jobForm.work_date_times[index]"   type="datetimerange" range-separator="至" start-placeholder="开始日期"
+                    end-placeholder="结束日期">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="10" class="timer-add">
+                <span @click="addWorkTimer" v-show="index==jobForm.work_date_times.length-1"><i class="el-icon-circle-plus icon"></i></span>
+                <span @click="removeWorkTimer(domain)" v-if="index > 0"><i class="el-icon-remove icon"></i></span>
+              </el-col>
+            </el-row>
+            </div>
+          </el-form>
+          <!-------------------------------工作票信息-END------------------------------------------>
+          <!--------------------------------工作票人员-------------------------------------------->
+          <el-row class="">
+            <span class="person-title">添加工作负责人</span>  
+            <el-row class="job-manager">
+              <el-col :span="5">
+                <el-select filterable  v-model="managerunid" placeholder="选择负责人" @change="personchange(managerunid,'manager')">
+                  <el-option label="无" value=""></el-option>
+                  <el-option v-for="item in personData" :key="item.unid" :label="item.name" :value="item.unid"></el-option>
+                </el-select>
+                 <el-input class="mt10" v-model="manager_name" v-show="managerunid == ''"></el-input>
+                    <div class="manager-img">
+                    <el-upload
+                      class="avatar-uploader"
+                      action=""
+                      :http-request="uploadmangaerimg" 
+                      :show-file-list="false"
+                      >
+                      <img v-if="mangaerPic" :src="mangaerPic" class="avatar">
+                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                  </el-upload>
+                </div>
+                <div class="subperson-btn" @click="addmanager">添加</div>
+              </el-col>
+              <el-col :span="19" class="manger-right">
+                  <div class="manager-content-box mr10" v-for="(manager,index) in jobForm.charger_persons" :key="index" v-if="jobForm.charger_persons.length > 0">
+                    <span class="el-icon-delete icon-delete" @click="deleteManager(jobForm.charger_persons,index)"></span>
+                    <img :src="manager.pic_url?manager.pic_url:manager.pic_base64" alt="">
+                    <div class="manager-name">{{manager.person_name}}</div>
+                  </div>
+              </el-col>
+            </el-row>
+          </el-row>
+          <el-row class="">
+            <span class="person-title">工作班人员</span>  
+            <div class="">
+              <el-col :span="5" class="">
+                <el-select filterable  v-model="worker_unid" placeholder="选择工作人员" @change="personchange(worker_unid,'worker')">
+                  <el-option label="无" value=""></el-option>
+                   <el-option v-for="item in personData" :key="item.unid" :label="item.name" :value="item.unid"></el-option>
+                </el-select>
+                 <el-input class="mt10" v-model="worker_name" v-show="worker_unid == ''"></el-input>
+                <div class="manager-img">
+                    <el-upload
+                      class="avatar-uploader"
+                      action=""
+                      :http-request="uploadworkpersonimg"
+                      :show-file-list="false"
+                      >
+                      <img v-if="workpersonPic" :src="workpersonPic" class="avatar">
+                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                  </el-upload>
+                </div>
+                <div class="subperson-btn" @click="addworkperson">添加</div>
+              </el-col>
+              <el-col :span="19" class="manger-right">
+               <div class="manager-content-box mr10" v-for="(worker,index) in jobForm.work_persons" :key="index" v-if="jobForm.work_persons.length > 0">
+                    <span class="el-icon-delete icon-delete" @click="deleteWorker(jobForm.work_persons,index)"></span>
+                    <img :src="worker.pic_url?worker.pic_url:worker.pic_base64" alt="">
+                    <div class="worker-name">{{worker.person_name}}</div>
+                </div>
+              </el-col>
+            </div>
+          </el-row> 
+        </el-col>
+        <!-------------------------------工作票人员-END------------------------------------------>
+        <!---------------------------------工作票存根-------------------------------------------->
+        <el-col :span="11">
+          <span class="person-title">工作票存根</span>
+            <el-upload
+              class="work-upload"
+              drag
+              :show-file-list="false"
+              action=""
+              :http-request="uploadworktickets"
+              multiple>
+              <i class="el-icon-upload"></i>
+              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+            </el-upload>
+            <div class="work-tickets-box">
+              <div v-for="(ticket,index) in jobForm.work_tickets" :key="index" class="work-tickets-img-box">
+                <span class="el-icon-delete icon-delete" @click="deletetickets(jobForm.work_tickets,index)"></span>
+                 <img :src="ticket.pic_url?ticket.pic_url:ticket.pic_base64" alt="">
+              </div>
+            </div>
+            <div class="car-box">
+               <span class="person-title">车辆</span>
+                <div>
+                  <el-col :span="4" class="white">车牌号码：</el-col>
+                  <el-col :span="10"><el-input v-model="carnumber"></el-input></el-col>
+                  <el-col :span="10">
+                    <span @click="addCarNum"><i class="el-icon-circle-plus car-icon"></i></span>
+                  </el-col>
+                </div>
+                <div>
+                  <el-col v-for="(item, index) in jobForm.vehicle_plates" :key="index" :span="10" :offset="4" class="">
+                    <span class="car-number-box">
+                      <span>{{item}}</span>
+                    </span>
+                    <span @click="removerCarnum(index)"><i class="el-icon-remove car-icon"></i></span>
+                  </el-col>
+                </div>
+            </div>
+        </el-col>
+        <!-------------------------------工作票存根-END------------------------------------------>
+        <!--------------------------------工作票备注-------------------------------------------->
+        <div class="remark-box">
+           <el-input
+              type="textarea"
+              :autosize="{ minRows: 2, maxRows: 4}"
+              placeholder="备注"
+              v-model="jobForm.ticket_remark">
+            </el-input>
+        </div>
+        <!-------------------------------工作票备注-END------------------------------------------>
+      </div>
+      
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeaworkdialong">取 消</el-button>
+        <el-button type="primary" @click="subworker">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        region: '',
+        textarea3:'',
+        managerunid:'',
+        worker:'',
+        worker_name:'',
+        worker_unid:'',
+        carnumber:'',
+        personData:[],
+        jobForm: {
+          is_multipoint:false,
+          name: '',
+          group_name:'',
+          transformer_sub_unid:'',
+          work_date_times: [[]],
+          charger_persons:[],
+          work_persons:[],
+          work_tickets:[],
+          ticket_remark:'',
+          vehicle_plates:[]
+
+        },
+        mangaerPic:'',
+        manager_name:'',
+        workpersonPic:'',
+        manager_pic_url:'',
+        errmessage :""
+      }; 
+    },
+    props: {
+      workerdialog: {},
+      workerdialogtitle: {},
+      editData:{},
+      ticketState:{},
+      orgData:{}
+    },
+    methods: {
+      //添加负责人
+      addmanager(){
+        let data = {
+          person_unid:'',
+          person_name:'',
+          pic_base64:'',
+          is_multipoint:false,
+          pic_url:'',
+        }
+        if(this.managerunid != '') {
+          data.pic_url = this.mangaerPic;
+          data.person_name = this.manager_name;
+          data.person_unid = this.managerunid;
+        } else {
+          data.pic_base64 = this.mangaerPic;
+          data.person_name = this.manager_name;
+        }
+        this.jobForm.charger_persons.push(data);
+      },
+      //添加工作人员
+      addworkperson(){
+        let data = {
+          person_unid:'',
+          person_name:'',
+          pic_base64:'',
+          is_multipoint:false,
+          pic_url:'',
+        }
+        if(this.worker_unid != '') {
+          data.pic_url = this.workpersonPic;
+          data.person_name = this.worker_name;
+          data.person_unid = this.worker_unid;
+        } else {
+          data.pic_base64 = this.workpersonPic;
+          data.person_name = this.worker_name;
+        }
+        this.jobForm.work_persons.push(data);
+      },
+      //人员变化时
+      personchange(val,type){
+        if(type == 'manager') {
+          if(val != ''){
+             this.mangaerPic = this.getpic(val);
+             this.manager_name = this.getName(val);
+          } else {
+            this.manager_name = '';
+            this.person_unid ='';
+          }
+        } 
+        if(type == 'worker') {
+          if(val != ''){
+            this.workpersonPic =  this.getpic(val);
+            this.worker_name = this.getName(val);
+          } else {
+            this.worker_name ='';
+            this.worker_unid ='';
+          } 
+        }
+      },
+      //删除错误添加图片
+      deleteManager(data,index) {
+        data.splice(index,1)
+      },
+      deleteWorker(data,index){
+        data.splice(index,1)
+      },
+      deletetickets(data,index){
+        data.splice(index,1)
+      },
+      //图片上传
+      uploadmangaerimg(file){
+        this.base64Img(file).then(data => {
+          this.mangaerPic = data.src
+        })
+      },
+      uploadworkpersonimg(file){
+        this.base64Img(file).then(data => {
+          this.workpersonPic = data.src
+        })
+      },
+      uploadworktickets(file){
+        this.base64Img(file).then(data => {
+          let ticketdata = {
+            pic_base64:data.src
+          }
+          this.jobForm.work_tickets.push(ticketdata);
+        })
+      },
+      closeaworkdialong() {
+        this.jobForm.charger_persons = [];
+        this.jobForm.work_persons = [];
+        this.jobForm. work_tickets = [];
+        this.jobForm.vehicle_plates = [];
+        this.mangaerPic = '';
+        this.jobForm.ticket_remark = '';
+        this.workpersonPic = '';
+        this.$refs['jobForm'].resetFields();
+        this.$emit('closeaworkdialong');
+      },
+      //添加车辆
+      addCarNum(){
+        if(this.carnumber != '') {
+          this.jobForm.vehicle_plates.push(this.carnumber);
+        }
+      },
+      removerCarnum(index){
+        this.jobForm.vehicle_plates.splice(index,1);
+      },
+      //提交工作票
+      subworker() {
+        let cpdata = JSON.stringify(this.jobForm); 
+        this.$refs['jobForm'].validate((valid) => {
+          if (valid) {
+            if(this.checkworktickets()){
+                let data = JSON.parse(cpdata);
+                data.work_date_times = this.formatWorkTimer(this.jobForm.work_date_times);
+                data.charger_persons = this.fomatbase64(this.jobForm.charger_persons);
+                data.work_persons = this.fomatbase64(this.jobForm.work_persons);
+                data.work_tickets = this.fomatbase64(this.jobForm.work_tickets);
+                let url = FACEWEB + '/work_tickets';
+                if(this.ticketState == 2) url =  FACEWEB + '/work_tickets/' + data.unid;
+                this.axios.post(url,data,{
+                headers:{
+                  "authorization": localStorage.getItem("atoken"),
+                }
+              }).then(res => {
+                //添加参数1 设置为保存关闭用来刷新页面数据
+                 if(res.data.ecode == '500') {
+                   this.$message({
+                    message: res.data.enote,
+                    type: 'error'
+                  })
+                  return 
+                }
+
+                  this.$emit('closeaworkdialong',1);
+                  let messageInfo = "";
+                  if(this.ticketState == 1) messageInfo ="添加工作票成功！"
+                  if(this.ticketState == 2) messageInfo ="修改工作票成功！"
+                  this.$message({
+                    message: messageInfo,
+                    type: 'success'
+                  })
+                
+              });
+            }else {
+               this.$message.error(this.errmessage);
+            }
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      //验证工作人员
+      checkworktickets(){
+        if(this.jobForm.charger_persons == ''){
+         this.errmessage = '负责人不能为空'
+          return false;
+        }
+        if(this.jobForm.work_persons == ''){
+          this.errmessage = '工作人员不能为空'
+          return false;
+        }
+        if(this.jobForm.work_tickets == ''){
+          this.errmessage = '工作票不能为空'
+          return false;
+        }
+        return true
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      },
+      //操作工作时间
+      removeWorkTimer(item) {
+        var index = this.jobForm.work_date_times.indexOf(item)
+        if (index !== -1) {
+          this.jobForm.work_date_times.splice(index, 1)
+        }
+      },
+      addWorkTimer() {
+        this.jobForm.work_date_times.push([]);
+      },
+      handleAvatarSuccess(res, file) {
+        this.jobForm.imageUrl = URL.createObjectURL(file.raw);
+      },
+      //上传限制
+      beforeAvatarUpload(file) {
+          const isJPG = file.type === 'image/jpeg';
+          const isLt2M = file.size / 1024 / 1024 < 2;
+
+          if (!isJPG) {
+            this.$message.error('上传头像图片只能是 JPG 格式!');
+          }
+          if (!isLt2M) {
+            this.$message.error('上传头像图片大小不能超过 2MB!');
+          }
+          return isJPG && isLt2M;
+        },
+      /**
+       * 处理上传base64格式
+       * @param {Arreay} 
+       */
+      fomatbase64(data){
+        data.map(e => {
+          if(e.pic_base64){
+            e.pic_base64 = e.pic_base64.split(',')[1];
+          }
+        });
+        return data;
+      },
+      //获取人员信息
+      getpersonList(){
+        this.axios.get(FACEWEB + "/faces/crucial_faces",{ params: {
+              offset: 0,
+              limit: 1000,
+              is_crucial: true,
+              is_active: true,
+              down_pic:true
+            }}).then(res => {
+              this.personData = res.data.list_data;
+          })
+      },
+      getpic(val){
+        let url = '';
+        if(this.personData.length > 0) {
+          this.personData.map(e => {
+            if(e.unid == val) {
+              url = e.pic_url;
+            }
+          })
+        }
+        return url
+      },
+      getName(val) {
+        let name='';
+          if(this.personData.length > 0) {
+          this.personData.map(e => {
+            if(e.unid == val) {
+              name = e.name;
+            }
+          })
+        }
+        return name
+      },
+      //格式化时间
+      formatWorkTimer(timer){
+        let timerarr = [];
+        timer.forEach(e => {
+          let data = {};
+          data.start_dt = this.timeForm(e[0]);
+          data.end_dt = this.timeForm(e[1]);
+          timerarr.push(data);
+        });
+        return timerarr;
+      },
+      editTicket(){
+        setTimeout(()=> {
+          let cpeditData = JSON.stringify(this.editData);
+          let newData = JSON.parse(cpeditData),
+          timerArr = [];
+          newData.work_date_times.map(e => {
+            let arr = [];
+            debugger
+            if(this.checkIE()){
+              var sdt = e.start_dt.replace(/-/g,'/');
+              var edt = e.end_dt.replace(/-/g,'/');
+              arr[0] = new Date(sdt);
+              arr[1] = new Date(edt); 
+            }else {
+              arr[0] = new Date(e.start_dt);
+              arr[1] = new Date(e.end_dt); 
+            }
+            timerArr.push(arr);
+          }); 
+          console.log(timerArr)
+          newData.work_date_times = timerArr;
+          this.jobForm = newData;
+        },0)
+      },
+      checkIE() {
+          var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
+          var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
+          var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
+          var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
+          if(isIE || isEdge || isIE11) {
+            return true
+          } else {
+      return false
+      } 
+    }
+    },
+    created(){
+      this.getpersonList();
+    }
+  };
+
+</script>
+<style lang="stylus" scoped>
+  .work-box {
+    overflow hidden
+    .left-box {
+      border-right 1px solid #ccc
+      margin-bottom 20px
+    }
+  }
+  .f24{
+    font-size 24px
+  }
+  .timer-add{
+    padding 5px 20px
+    .icon {
+      font-size 24px
+      cursor pointer
+    }
+  }
+  .work-timer-box{
+    max-height 300px
+    overflow auto
+    border-bottom 1px solid #fff
+  }
+  .manager-left{
+    float left
+    width 150px
+  }
+  .manager-right {
+    margin-left 30px
+    float left
+  }
+  .manager-img{
+    text-align center
+    margin-top 10px
+    border 1px solid #ccc
+  }
+  .person-title{
+    display block
+    margin 10px
+    color #ffffff
+  }
+  .avatar-uploader-icon{
+    font-size 40px
+    color #fff
+  }
+  .avatar{
+    height 100%
+    width 100%
+  }
+  .subperson-btn{
+    height 30px
+    line-height 30px
+    background #2194EF
+    border 1px solid #2194EF
+    color #fff
+    text-align center
+    cursor pointer
+  }
+  .remark-box {
+    overflow hidden
+    margin-top 10px
+    width 100%
+  }
+  .work-upload{
+    height 100px
+    width 300px
+    margin 0 auto
+  }
+  .manger-right{
+    padding-left 20px
+    height 230px
+    overflow auto
+  }
+  .manager-content-box{
+    position relative
+    float left
+    .icon-delete{
+      display none
+      position absolute    
+      top 0
+      left 0
+      bottom 0
+      right 0
+      margin 60px auto 0
+      text-align center
+      font-size 30px
+      color #fff
+      cursor pointer
+    }
+    img{
+      height 150px
+      width 150px
+    }
+    .manager-name,.worker-name {
+      text-align center
+      color #fff
+    }
+  }
+  .manager-content-box:hover{
+    .icon-delete{
+      display block
+    }
+  }
+  .work-tickets-box{
+    height 400px
+    margin-top 20px
+    overflow auto
+  }
+  .car-box {
+    height 300px
+    border-top 1px solid #fff
+    .car-icon {
+      font-size 20px
+      padding 5px 0 0 10px
+      cursor pointer
+    }
+  }
+  .work-tickets-img-box{
+    position relative
+    height 400px
+    width 70%
+    margin 0 auto 10px
+    text-align center
+    .icon-delete {
+      display none
+      position absolute
+      top 200px
+      left 0
+      right 0
+      font-size 40px
+      color #fff
+      margin 0 auto
+      cursor pointer
+    }
+    img{
+      width 100%
+      height 100%
+    }
+  }
+  .work-tickets-img-box:hover{
+    .icon-delete {
+      display block
+    }
+  }
+  .car-number-box {
+    display inline-block
+    height 35px
+    width 100px
+    margin-top 20px
+    border-radius 5px
+    line-height 35px
+    background #001F8C
+    padding-left 10px
+    color #fff
+    font-size 14px
+    letter-spacing 4px
+  }
+</style>

web/src/views/Equipment/adddev.vue

+<template>
+  <div>
+    <el-dialog title="添加设备" :visible.sync="addvdialog" :before-close="closeaddvdialog" width="50%">
+      <div class="" style="overflow:hidden">
+        <el-form ref="vforms" :model="vform" label-width="120px">
+          <el-col :span="12">
+            <el-form-item label="分析终端编号" prop="vchan_refid" :rules="[
+                   { required: true, message: '分析终端编号不能为空', trigger: 'blur' }]">
+              <el-input v-model="vform.vchan_refid"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="vchan_name" label="分析终端名称">
+              <el-input v-model="vform.vchan_name"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="vchan_prop.type" label="相机属性">
+              <el-select v-model="vform.vchan_prop.is_dome" placeholder="请选区域">
+                <el-option  label="球机" :value="true"></el-option>
+                <el-option  label="枪机" :value="false"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="vchan_prop.ip" label="IP地址" :rules="[
+                   { required: true, message: '相机IP不能为空', trigger: 'blur' }]">
+              <el-input v-model="vform.vchan_prop.ip"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="vchan_prop.port" label="端口号">
+              <el-input v-model="vform.vchan_prop.port"></el-input>
+            </el-form-item>
+          </el-col>
+           <el-col :span="12">
+             <el-form-item prop="vchan_prop.type" label="协议类型">
+                <el-select v-model="vform.vchan_prop.video_protocol_id" placeholder="请选协议类型">
+                  <el-option  label="RTSP" value="1"></el-option>
+                  <el-option  label="枪机" value="2"></el-option>
+                </el-select>
+              </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item prop="vchan_prop.video_source_url" label="推流地址">
+              <el-input v-model="vform.vchan_prop.video_source_url"></el-input>
+            </el-form-item>
+          </el-col>
+           <el-col :span="12">
+            <el-form-item prop="vchan_prop.ent_prop" label="相机属性">
+              <el-select v-model="vform.vchan_prop.ent_prop" placeholder="请选区域">
+                <el-option  label="入口" :value="1"></el-option>
+                <el-option  label="出口" :value="2"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="用户名" prop="vchan_prop.user_name" :rules="[
+                   { required: true, message: '相机用户名不能为空', trigger: 'blur' }]">
+              <el-input v-model="vform.vchan_prop.user_name"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="密码" prop="vchan_prop.password" :rules="[
+                   { required: true, message: '密码不能为空', trigger: 'blur' }]">
+              <el-input v-model="vform.vchan_prop.password" type="password"></el-input>
+            </el-form-item>
+          </el-col>
+           <el-col :span="12">
+            <el-form-item label="挂在地址" prop="org_unid" :rules="[
+                   { required: true, message: '挂载点不能为空', trigger: 'blur' }]">
+              <el-select v-model="vform.org_unid" placeholder="请选区域">
+                <el-option v-for="(item,index) in address" :key="index" :label="item.org_name" :value="item.unid"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeaddvdialog">关闭</el-button>
+        <el-button type="primary" @click="submitvchan">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        vform: {
+          vchan_refid:'',
+          org_pid: '',
+          org_unid:'',
+          vchan_name: "",
+          vchan_type:'vchan',
+          vchan_prop: {
+            ent_prop:1,
+            is_dome: false,
+            ip: null,
+            port: "",
+            user_name: "",
+            password: "",
+            video_protocol_id: "",
+            video_source_url: ""
+          }
+        }
+      }
+    },
+    props: ["addvdialog","editData","state"],
+    computed:{
+    },
+    methods: {
+      closeaddvdialog(state) {
+        this.state = "add";
+        this.$emit("closedialog",state);
+      },
+      resetForm(formName) {
+        this.$refs['vforms'].resetFields();
+      },
+      editvchan(){
+      },
+      submitvchan() {
+      let url = this.API.org.getvchan,
+      data = this.vform;
+      if(this.state == 'edit'){
+        url = this.API.org.editvchan(data.id)
+         data=  {
+          vchan_refid:this.vform.vchan_refid,
+          org_pid: this.vform.org_pid,
+          org_unid:this.vform.org_unid,
+          vchan_name:this.vform.vchan_name,
+          vchan_type:'vchan',
+          vchan_prop: {
+            ent_prop:this.vform.vchan_prop.ent_prop,
+            is_dome: this.vform.vchan_prop.is_dome,
+            ip: this.vform.vchan_prop.ip,
+            port: this.vform.vchan_prop.post,
+            user_name: this.vform.vchan_prop.user_name,
+            password:this.vform.vchan_prop.password,
+            video_protocol_id: this.vform.vchan_prop.video_protocol_id,
+            video_source_url: this.vform.vchan_prop.video_source_url
+          }
+        }
+      }
+       this.$refs['vforms'].validate((valid) => {
+          if (valid) {
+           this.axios.post(url,data,{
+              headers:{
+                "authorization": localStorage.getItem("atoken"),
+              }}).then(response => {
+              this.resetForm();
+              this.closeaddvdialog(1);
+              this.state = "add";
+           });
+          } else {
+            return false;
+          }
+        });
+      },
+     deepCopy (data) {
+       let result = ''
+        result = JSON.parse(JSON.stringify(data));
+        return result;
+      }
+    },
+    created(){
+      this.address = this.$store.state.initinfo.address;
+    },
+    watch:{
+      editData(val){
+        console.log(val)
+        if(val) {
+          val.org_unid = Number(val.org_unid)
+        }
+         this.vform = this.deepCopy(val);
+      },
+      state(val){
+        if(val == 'add'){
+          this.resetForm();
+        }
+      }
+    }
+  };
+
+</script>
+<style lang="stylus" scoped>
+
+
+</style>
+

web/src/views/Equipment/dev.vue

+<template>
+    <div class="template-box content_div_main">
+        <div>
+            <el-form :inline="true" class="search-form" size="small">
+              <el-form-item label="组织：">
+                <el-input type="text" class="bra" v-model="search.org_name" placeholder="组织名"></el-input>
+              </el-form-item>
+                <el-form-item label="地点：">
+                <el-input type="text" class="bla" placeholder="相机名称" v-model="search.address_name"></el-input>
+              </el-form-item>
+              <el-form-item label="相机：">
+                <el-input type="text" class="bla" placeholder="相机名称" v-model="search.name__like"></el-input>
+              </el-form-item>
+              <el-form-item>
+                  <el-button class="search-btn" icon="el-icon-search" @click="searchVchan">查询</el-button>
+                  <el-button class="search-btn" @click="addvchan()" icon="el-icon-plus">添加</el-button>
+              </el-form-item>
+            </el-form>
+        <el-table :data="tableData"  v-loading.body="loading" class="table_m_type" height="730">
+            <el-table-column label="序号" type="index" width="120" align="center"></el-table-column>
+            <el-table-column label="相机编号" property="vchan_refid"> </el-table-column>
+            <el-table-column label="相机名称" property="vchan_name"> </el-table-column>
+            <el-table-column label="相机属性">
+              <template slot-scope="scope">
+                <span>{{showent(scope.row)}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="相机状态">
+              <template slot-scope="scope">
+                <span>在线</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="IP" property="vchan_prop.ip" align="center"> </el-table-column>
+            <el-table-column label="安装地点" property="address_name" align="center"> </el-table-column>
+        </el-table>
+        <el-pagination class="mt10" @current-change="handleCurrentChange" :current-page.sync="page.currentPage"
+          :page-size="page.limit" layout="total,prev, pager, next, jumper" :total="page.total" background >
+        </el-pagination>
+      <!-- <infoDialog ref='infoDialog' @refresh='refreshInfo'></infoDialog> -->
+        </div>
+    <el-row>
+      <addvchan ref="vchan" :addvdialog="addvdialog" :state="state" :editData="editData" @closedialog="closedialog"></addvchan>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import addvchan from "./adddev";
+export default {
+  data() {
+    return {
+      height: 900,
+      tableData: [],
+      loading: false,
+      orgunid: "",
+      addressunid: "",
+      addvdialog: false,
+      state:'add',
+      editData: "",
+      defaultProps: {
+        children: "childs",
+        label: "org_name"
+      },
+      orgData: [],
+      search:{
+        org_name:'',
+        address_name:'',
+        name__like:''
+      },
+      page: {
+        offset: 0,
+        limit: 18,
+        total: 0,
+        currentPage: 0
+      }
+    };
+  },
+  methods: {
+      handleCurrentChange(val) {
+        this.page.offset = (val - 1) * this.page.limit;
+        this.getvchanlist();
+      },
+    closedialog(state) {
+      this.addvdialog = false;
+      if (state == 1) {
+        this.getOrgData();
+        this.getvchanlist();
+      }
+    },
+    addvchan(){
+      this.addvdialog = true;
+      this.state = 'add';
+    },
+    showent(val){
+      let result = '';
+      if(val.vchan_prop){
+        if(val.vchan_prop.ent_prop == 1){
+           result = "入口"
+        }
+        if(val.vchan_prop.ent_prop == 2){
+           result = "出口"
+        }
+      }
+      return result
+    },
+    editvchan(index, row) {
+      this.editData = row;
+      this.$refs.vchan.editvchan();
+      this.addvdialog = true;
+      this.state = 'edit';
+    },
+    deletevchan(index, row) {
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.axios
+            .delete(this.API.org.getvchan, {
+              data: {
+                id: row.id
+              }
+            })
+            .then(response => {
+              this.$message({
+                type: "success",
+                message: "删除成功!"
+              });
+              this.getvchanlist();
+              this.getOrgData();
+            });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除"
+          });
+        });
+    },
+    getvchanlist() {
+      this.axios
+        .get(this.API.org.getvchanList, {
+          params:{
+            org_name:this.search.org_name,
+            address_name:this.address_name,
+            name__like:this.name__like,
+            offset: this.page.offset,
+            limit: this.page.limit,
+            vchan_type:'vchan'
+        }
+        })
+        .then(response => {
+          this.tableData = response.data.list_data;
+          this.page.total = response.data.total_num;
+        });
+    },
+    buildTree(data){
+      if(data) {
+        data.forEach(el => {
+          if(el.org_type == 'vchan'){
+            el.org_name = el.vchan_name
+          }
+          if(el.childs){
+            this.buildTree(el.childs);
+          }
+        });
+      }
+      return data
+    },
+    renderContent(h, { node, data, store }){
+        var html = <span>{data.org_name}</span>;
+        if (data.org_type == "address") {
+          html = <span class="">{data.org_name}</span>;
+        }
+        if (data.org_type == "vchan") {
+          if(data.vchan_prop.is_dome){
+           html = (
+             <span>
+              <i class="el-icon-plate-shebeileiqiuji"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
+            </span>);
+          } else {
+          html = (
+             <span>
+              <i class="el-icon-plate-qiangji"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
+            </span>);
+          }
+        }
+        if (data.org_type == "horn") {
+          html = (
+             <span>
+              <i class="el-icon-fa-volume-up fz20"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
+            </span>);
+        }
+        return (
+          <span>
+            <span>{html}</span>
+          </span>
+        );
+      },
+    getOrgData() {
+      this.axios
+        .get(this.API.org.getorgtree, {
+          params: {
+            "vchan_source":'internal',
+            "vchan_type":'vchan'
+          },
+          hedader: {
+            authorization: localStorage.getItem("atoken")
+          }
+        })
+        .then(response => {
+          this.orgData = this.buildTree(response.data);
+        });
+    },
+    handleNodeClick(){
+    },
+    searchVchan() {
+      this.getvchanlist();
+    }
+  },
+  computed: {
+    ...mapState(["initinfo"])
+  },
+  components: {
+    addvchan
+  },
+  created() {
+    this.getOrgData();
+    this.getvchanlist();
+  }
+};
+</script>
+
+<style scoped lang="stylus">
+.orgbox{
+  display flex
+}
+.left-box {
+  margin: 5px;
+  width: 230px;
+  height: calc(100vh - 130px);
+  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
+  background: #ffffff;
+  border-radius: 5px;
+  overflow: hidden;
+  font-size 14px
+}
+.org-right-box {
+  width: calc(100vw - 220px);
+  margin: 5px;
+  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
+}
+</style>
+
+

web/src/views/Equipment/org.vue

+<template>
+  <div class="template-box content_div_main org-box">
+    <div class="videoleft-box">
+      <el-tree
+        v-loading="loading"
+        :data="treedata"
+        :props="defaultProps"
+        default-expand-all
+        highlight-current
+        @node-click="handleNodeClick"
+      ></el-tree>
+    </div>
+    <div class="org-right-box">
+      <el-button class="search-btn ml10 mt10" @click="addorg()" icon="el-icon-plus">添加</el-button>
+      <el-table
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        ref="multipleTable"
+        :data="tableData"
+        :height="680"
+        tooltip-effect="dark"
+        style="width: 100%;margin-top:20px"
+      >
+        <div slot="empty">
+          <div class="no-data-box">
+            <img src="../../assets/img/nodata.png" alt="暂无数据" />
+            <div>暂无数据</div>
+          </div>
+        </div>
+        <el-table-column type="type" width="55" label="#"></el-table-column>
+        <el-table-column label="名称" prop="org_name"></el-table-column>
+        <el-table-column label="类型" :formatter="formatHpzl" prop="org_type"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button size="mini" type="info" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="dialog-org">
+      <el-dialog title="添加组织机构" :visible.sync="dialogVisible" width="30%" @close="dialogclose()">
+        <el-row>
+          <el-form ref="orgform" :model="orgform" label-width="170px" class="demo-ruleForm">
+            <el-form-item label="父节点名称" prop="name">
+              <el-input class v-model="curOrgData.org_name" disabled style="width:100%"></el-input>
+            </el-form-item>
+            <el-form-item
+              label="节点类型"
+              prop="oreType"
+              :rules="[
+                          { required: true, message: '请选择节点类型！', trigger: 'blur' } ]"
+            >
+              <el-select v-model="orgform.oreType" placeholder="请选择添加类型" class="selbox">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              label="节点名称"
+              prop="orgname"
+              :rules="[
+                          { required: true, message: '请输入节点名称！', trigger: 'blur' } ]"
+            >
+              <el-input class v-model="orgform.orgname" style="width:100%"></el-input>
+            </el-form-item>
+            <el-col :span="15" :offset="5"></el-col>
+          </el-form>
+        </el-row>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="saveORg">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loading:false,
+      tableData: [],
+      parentname: "",
+      options: [
+        {
+          value: "org",
+          label: "组织"
+        },
+        {
+          value: "address",
+          label: "地点"
+        },
+        {
+          value: "root",
+          label: "根节点"
+        }
+      ],
+      treedata: [],
+      defaultProps: {
+        children: "childs",
+        label: "org_name"
+      },
+      dialogVisible: false,
+      orgform: {
+        oreType:'',
+        orgname:''
+      },
+      curOrgData: {}
+    };
+  },
+  methods: {
+    handleNodeClick(data) {
+      this.tableData = data.childs;
+      this.curOrgData = data;
+    },
+    formatHpzl(data) {
+      if (data.org_type == "org") return "组织";
+      if (data.org_type == "address") return "地点";
+    },
+    buildTree(data) {
+      if (!data) {
+        return;
+      }
+      var store = [];
+      store.push(data);
+      let substore;
+      while (store.length > 0) {
+        substore = store.pop();
+        if (substore.childs && substore.childs.length > 0) {
+          var i = substore.childs.length - 1;
+          for (i = substore.childs.length - 1; i >= 0; i--) {
+            if (substore.childs[i].org_type == "vchan") {
+              substore.childs.splice(i,1)
+            }
+            store.push(substore.childs[i]);
+          }
+        }
+      }
+    },
+    addorg(){
+      this.dialogVisible = true
+    },
+    handleDelete(index, row) {
+        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        }).then(() => {
+            this.axios.delete(this.API.org.deleteorg(row.unid)).then((response)=> {
+                this.$message({
+                    type: 'success',
+                    message: '删除成功!'
+                });
+                this.deleteorg(row)
+            });
+
+        }).catch(() => {
+            this.$message({
+                type: 'info',
+                message: '已取消删除'
+            });
+        });
+    },
+    saveORg() {
+      // store.append({ id: 11, label: 'testtest', children: [] }, data);
+      var data = {
+        org_name: this.orgform.orgname,
+        org_pid: this.curOrgData.unid,
+        is_leaf: true,
+        org_type: this.orgform.oreType
+      };
+      if (data.org_type == "root") {
+        data.org_pid = 0;
+        data.org_type = "org";
+        this.eiditroot = true;
+      }
+
+      if (this.curOrgData.org_type != "address") {
+        if (data.org_type == "address" && this.curOrgData.pid == 0) {
+          this.$message({
+            type: "warning",
+            message: "根节点下不能添加地址！"
+          });
+          return;
+        }
+        this.$refs["orgform"].validate(valid => {
+          if (valid) {
+            this.axios.post(this.API.org.getorg, data).then(response => {
+              if (this.orgform.oreType == "root") {
+                //添加根节点
+                this.getorgtree();
+              }
+              if (this.orgform.oreType == "address") {
+                this.faceapi.getAddress();
+              }
+              if (this.orgform.oreType == "org") {
+                this.faceapi.getOrg();
+              }
+
+              this.dialogVisible = false;
+              var obj = {
+                unid: response.data.unid,
+                org_name: this.orgform.orgname,
+                org_type: response.data.org_type,
+                pid: response.data.org_pid,
+                childs: []
+              };
+              this.searchCurDate(this.treedata, obj);
+              this.$message({
+                type: "success",
+                message: "添加成功"
+              });
+            });
+          }
+        });
+      } else {
+        if (this.curOrgData.org_type == "address") {
+          this.$message({
+            type: "warning",
+            message: "地点下不能添加机构"
+          });
+        }
+      }
+    },
+    deleteorg(row) {
+      this.deleteorgData(this.treedata, row);
+      this.getorgtree();
+    },
+    deleteorgData(alldata, deleteData) {
+      for (var i = 0; i < alldata.length; i++) {
+        if (alldata[i] == deleteData) {
+          alldata.splice(i, 1);
+        } else {
+          if (alldata[i].childs)
+            this.deleteorgData(alldata[i].childs, deleteData);
+        }
+      }
+      console.log(alldata)
+    },
+    getorgtree() {
+      this.loading = true;
+      this.axios.get(this.API.org.getorgtree).then(res => {
+        this.treedata = res.data;
+        this.loading = false;
+        if (res.data.length > 0) {
+          res.data.forEach(e => {
+            this.buildTree(e);
+          });
+        }
+      });
+    },
+  searchCurDate(alldata, childrenData) {
+      for (var i = 0; i < alldata.length; i++) {
+        if (alldata[i] == this.curOrgData) {
+          if (alldata[i].childs) {
+            alldata[i].childs.push(childrenData);
+          }
+        } else {
+          if (alldata[i].childs)
+            this.searchCurDate(alldata[i].childs, childrenData);
+        }
+      }
+      return alldata;
+    },
+  },
+  created() {
+    this.getorgtree();
+  }
+};
+</script>
+<style lang="stylus">
+.org-box {
+  display: flex;
+}
+
+.videoleft-box {
+  margin: 5px;
+  width: 230px;
+  height: calc(100vh - 130px);
+  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
+  background: #ffffff;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.org-right-box {
+  width: calc(100vw - 220px);
+  margin: 5px;
+  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
+}
+
+.selbox {
+  width: 100%;
+}
+</style>

web/src/views/Equipment/vchan.vue

+<template>
+    <div class="template-box content_div_main orgbox">
+        <div class="left-box">
+            <el-tree :data="orgData" :props="defaultProps" :default-expand-all="true" :render-content="renderContent" @node-click="handleNodeClick" ></el-tree>
+        </div>
+        <div class="org-right-box">
+             <el-form :inline="true" class="search-form" size="small">
+                <el-form-item label="组织：">
+                  <el-input type="text" class="bra" v-model="search.org_name" placeholder="组织名"></el-input>
+                </el-form-item>
+                 <el-form-item label="地点：">
+                  <el-input type="text" class="bla" placeholder="相机名称" v-model="search.address_name"></el-input>
+                </el-form-item>
+                <el-form-item label="相机：">
+                  <el-input type="text" class="bla" placeholder="相机名称" v-model="search.name__like"></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-button class="search-btn" icon="el-icon-search" @click="searchVchan">查询</el-button>
+                    <el-button class="search-btn" @click="addvchan()" icon="el-icon-plus">添加</el-button>
+                </el-form-item>
+             </el-form>
+        <el-table :data="tableData" style="width: 98%;margin:10px auto;" v-loading.body="loading">
+            <el-table-column label="序号" type="index" width="120" align="center"></el-table-column>
+            <el-table-column label="相机编号" property="vchan_refid"> </el-table-column>
+            <el-table-column label="相机名称" property="vchan_name"> </el-table-column>
+            <el-table-column label="相机属性">
+              <template slot-scope="scope">
+                <span>{{showent(scope.row)}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="IP" property="vchan_prop.ip" align="center"> </el-table-column>
+            <el-table-column label="所属组织" property="org_name" align="center"> </el-table-column>
+            <el-table-column label="所属地点" property="address_name" align="center"> </el-table-column>
+            <el-table-column label="操作" width="350px" align="center">
+                <template slot-scope="scope">
+                <div class="tab-btn-box">
+                    <span class="table-btn" size="" @click="editvchan(scope.$index, scope.row,1)">修改</span>
+                    <span class="table-btn" size="" @click="deletevchan(scope.$index, scope.row,2)">删除</span>
+                </div>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination class="mt10" @current-change="handleCurrentChange" :current-page.sync="page.currentPage"
+          :page-size="page.limit" layout="total,prev, pager, next, jumper" :total="page.total" background >
+        </el-pagination>
+      <!-- <infoDialog ref='infoDialog' @refresh='refreshInfo'></infoDialog> -->
+        </div>
+    <el-row>
+      <addvchan ref="vchan" :addvdialog="addvdialog" :state="state" :editData="editData" @closedialog="closedialog"></addvchan>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import addvchan from "./adddev";
+export default {
+  data() {
+    return {
+      height: 900,
+      tableData: [],
+      loading: false,
+      orgunid: "",
+      addressunid: "",
+      addvdialog: false,
+      state:'add',
+      editData: "",
+      defaultProps: {
+        children: "childs",
+        label: "org_name"
+      },
+      orgData: [],
+      search:{
+        org_name:'',
+        address_name:'',
+        name__like:''
+      },
+      page: {
+        offset: 0,
+        limit: 18,
+        total: 0,
+        currentPage: 0
+      }
+    };
+  },
+  methods: {
+      handleCurrentChange(val) {
+        this.page.offset = (val - 1) * this.page.limit;
+        this.getvchanlist();
+      },
+    closedialog(state) {
+      this.addvdialog = false;
+      if (state == 1) {
+        this.getOrgData();
+        this.getvchanlist();
+      }
+    },
+    addvchan(){
+      this.addvdialog = true;
+      this.state = 'add';
+    },
+    showent(val){
+      let result = '';
+      if(val.vchan_prop){
+        if(val.vchan_prop.ent_prop == 1){
+           result = "入口"
+        }
+        if(val.vchan_prop.ent_prop == 2){
+           result = "出口"
+        }
+      }
+      return result
+    },
+    editvchan(index, row) {
+      this.editData = row;
+      this.$refs.vchan.editvchan();
+      this.addvdialog = true;
+      this.state = 'edit';
+    },
+    deletevchan(index, row) {
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.axios
+            .delete(this.API.org.getvchan, {
+              data: {
+                id: row.id
+              }
+            })
+            .then(response => {
+              this.$message({
+                type: "success",
+                message: "删除成功!"
+              });
+              this.getvchanlist();
+              this.getOrgData();
+            });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除"
+          });
+        });
+    },
+    getvchanlist() {
+      this.axios
+        .get(this.API.org.getvchanList, {
+          params:{
+            org_name:this.search.org_name,
+            address_name:this.address_name,
+            name__like:this.name__like,
+            offset: this.page.offset,
+            limit: this.page.limit,
+            vchan_type:'vchan'
+        }
+        })
+        .then(response => {
+          this.tableData = response.data.list_data;
+          this.page.total = response.data.total_num;
+        });
+    },
+    buildTree(data){
+      if(data) {
+        data.forEach(el => {
+          if(el.org_type == 'vchan'){
+            el.org_name = el.vchan_name
+          }
+          if(el.childs){
+            this.buildTree(el.childs);
+          }
+        });
+      }
+      return data
+    },
+    renderContent(h, { node, data, store }){
+        var html = <span>{data.org_name}</span>;
+        if (data.org_type == "address") {
+          html = <span class="">{data.org_name}</span>;
+        }
+        if (data.org_type == "vchan") {
+          if(data.vchan_prop.is_dome){
+           html = (
+             <span>
+              <i class="el-icon-plate-shebeileiqiuji"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
+            </span>);
+          } else {
+          html = (
+             <span>
+              <i class="el-icon-plate-qiangji"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
+            </span>);
+          }
+        }
+        if (data.org_type == "horn") {
+          html = (
+             <span>
+              <i class="el-icon-fa-volume-up fz20"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
+            </span>);
+        }
+        return (
+          <span>
+            <span>{html}</span>
+          </span>
+        );
+      },
+    getOrgData() {
+      this.axios
+        .get(this.API.org.getorgtree, {
+          params: {
+            "vchan_source":'internal',
+            "vchan_type":'vchan'
+          },
+          hedader: {
+            authorization: localStorage.getItem("atoken")
+          }
+        })
+        .then(response => {
+          this.orgData = this.buildTree(response.data);
+        });
+    },
+    handleNodeClick(){
+    },
+    searchVchan() {
+      this.getvchanlist();
+    }
+  },
+  computed: {
+    ...mapState(["initinfo"])
+  },
+  components: {
+    addvchan
+  },
+  created() {
+    this.getOrgData();
+    this.getvchanlist();
+  }
+};
+</script>
+
+<style scoped lang="stylus">
+.orgbox{
+  display flex
+}
+.left-box {
+  margin: 5px;
+  width: 230px;
+  height: calc(100vh - 130px);
+  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
+  background: #ffffff;
+  border-radius: 5px;
+  overflow: hidden;
+  font-size 14px
+}
+.org-right-box {
+  width: calc(100vw - 220px);
+  margin: 5px;
+  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
+}
+</style>
+
+

web/src/views/Home/index.vue

+<template>
+  <div>
+  <router-view></router-view>
+  </div>
+</template>
+<script>
+  export default {
+  }
+</script>
+<style scoped>
+
+</style>
+

web/src/views/Home/show/index.vue

+<template>
+  <div class="map-box template-box">
+    <div id="map" class="map">
+      <!-- <div id="canvasDiv" @mouseover="removeclass($event)" class="canvasDiv">时代大厦</div> -->
+      <div class="info-box">
+        <div class="info-item">
+          <div class="info-header">
+            <span class="icon el-icon-s-data"></span>相机抓拍总数</div>
+          <div class="info-content">90</div>
+        </div>
+        <div class="info-item">
+          <div class="info-header">
+            <span class="icon el-icon-s-custom"></span>人口库数量</div>
+          <div class="info-content">10</div>
+        </div>
+        <div class="info-item">
+          <div class="info-header">
+            <span class="icon  el-icon-camera-solid"></span>总抓拍次数</div>
+          <div class="info-content">909</div>
+        </div>
+        <div class="info-item">
+          <div class="info-header">
+            <span class="icon el-icon-user-solid"></span>核实人数</div>
+          <div class="info-content ">230</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import {inherits} from 'ol/util.js';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import Feature from 'ol/Feature'; //元素
+import Overlay from 'ol/Overlay'; //弹出框
+import {toStringHDMS} from 'ol/coordinate';
+import {fromLonLat, toLonLat} from 'ol/proj';
+import {Tile as TileLayer, Vector as VectorLayer, VectorTile,Heatmap as HeatmapLayer} from 'ol/layer'; //瓦片图层 , 矢量图层等基础图层
+import {Cluster, OSM, Vector as VectorSource, XYZ, TileJSON} from 'ol/source';
+import KML from 'ol/format/KML.js';
+import {
+    defaults,
+    Select,
+    DragBox,
+    Pointer,
+    DragAndDrop,
+    Draw,
+    defaults as defaultInteractions,
+    Pointer as PointerInteraction
+    } from 'ol/interaction'; //交互，选择，画框等
+  import {Circle as CircleStyle, Fill, Stroke, Style, Text, Icon} from 'ol/style'; //添加图层，点，圆等的样式调节
+  import {Point, Geometry, LineString} from 'ol/geom'
+  import GeoJSON from 'ol/format/GeoJSON.js';
+  import 'ol/ol.css' //地图默认样式
+var map = '';
+var Views = '';
+export default {
+  data(){
+    return{
+        height: 400,
+        width: 200,
+        alarmcount:100000,
+        facealarmcount:0,
+        dayfacealarm:0,
+        openstate:false,
+        unid:'',
+        listData:[1,2,3,4,5,5,6,7,7,9]
+    }
+  },
+  methods:{
+    InitMap(){
+    let _this = this;
+    //坐标
+    //
+    var heatData = {
+       "type": "FeatureCollection",
+				"features": [{
+					"type": "Feature",
+					"geometry": {
+						"type": "Point",
+						"coordinates": [116.357068,39.954021, 0]
+					},
+					"properties": {
+						"name": "M 5 - 2012 Dec 25, PAKISTAN"
+					}
+      }]
+     }
+
+    for(var i =0; i< 300; i++){
+      let c = Math.random(1)*1000
+      let e = Math.random(1)*100
+      let b =  (116.357068 * 1000000 + i*c)/1000000;
+      let d = (39.954021 * 1000000 + i*e)/1000000
+      let a = {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [b,d, 0]
+            },
+            "properties": {
+              "name": "M 5 - 2012 Dec 25, PAKISTAN" +i
+            }
+        }
+      heatData.features.push(a)
+    }
+
+      var vectorSources = new VectorSource({
+        features: (new GeoJSON()).readFeatures(heatData,{
+                                                    dataProjection : 'EPSG:4326'
+                                                  })
+      });
+      var path = "http://192.168.9.62:20080/static/pics/gaodeMap/roadmap/{z}/{x}/{y}.png"
+      var offlineMapLayer = new TileLayer({
+          source: new XYZ({
+            // 设置本地离线瓦片所在路径，由于例子里面只有一张瓦片，页面显示时就只看得到一张瓦片。
+            url: path
+          })
+        });
+
+      Views = new View({
+				projection: 'EPSG:4326',
+				zoom: 2,// 并且定义地图显示层级为2
+				minZoom:11,
+				maxZoom:18,
+				center:[116.397477,39.908692]
+      })
+      map = new Map({
+			// 设置地图图层
+			layers: [
+				// 创建一个使用Open Street Map地图源的瓦片图层
+        offlineMapLayer,
+      ],
+        Interactions: [
+            defaults,
+            Select,
+            DragBox
+        ],
+      loadTilesWhileAnimating:true,
+
+			// 设置显示地图的视图
+			view:Views ,
+			// 让id为map的div作为地图的容器
+      target: 'map',
+    });
+     var heatmapvector = new HeatmapLayer({
+        source: vectorSources,
+        blur: parseInt(20, 6),
+        radius:parseInt(3, 5),
+      });
+
+    map.addLayer(heatmapvector);
+
+		// 添加一个使用离线瓦片地图的层
+     var CameraVertorlayer = new VectorLayer({
+        source: _this.addCameraLayer([116.397477,39.908692],"相机A")
+    });
+
+    map.addLayer(CameraVertorlayer);
+
+    this.addLayer();
+    var container = document.getElementById("popup");
+    var content = document.getElementById("popup-content");
+    var popupCloser = document.getElementById("popup-closer");
+    var overlay = new Overlay({
+      element: container,
+      autoPan: true
+    });
+    map.on('click',(e)=>{
+      var pixel = map.getEventPixel(e.originalEvent);
+      console.log(pixel);
+      //点击标注点信息
+      map.forEachFeatureAtPixel(pixel,function(feature){
+        debugger
+        console.log(feature);
+        //return feature;
+        var coodinate = e.coordinate;
+        _this.unid = feature.getProperties().unid;
+        overlay.setPosition(coodinate);
+        map.addOverlay(overlay);
+      });
+    });
+    popupCloser.addEventListener('click',function(){
+          overlay.setPosition(undefined);
+          return
+
+      });
+
+    },
+    removeclass(e){
+      e.currentTarget.classList.remove('canvasDiv');
+    },
+    removeAlarmclass(e){
+      e.currentTarget.parentElement.classList.remove('alarm-makerbox');
+    },
+    addAlarmBox(data){
+      document.getElementById('alarmMarker').className = 'alarm-makerbox alarm-active';
+      var pos = data;
+      var marker = new Overlay({
+          position: pos,
+          positioning:  'center-center',
+          element: document.getElementById('alarmMarker')
+      });
+      map.addOverlay(marker);
+    },
+    addLayer(data){
+      var pos = data;
+      var marker = new Overlay({
+          position: pos,
+          positioning:  'center-center',
+          element: document.getElementById('canvasDiv')
+      });
+      map.addOverlay(marker);
+    },
+    addCameraLayer(coordinate,phonetext) {
+        let vectorSource = new VectorSource({id:1});
+        let icon = new Feature({
+            geometry: new Point(coordinate),
+            unid:'1'
+        });
+        let color = '#156BB1'; //设置气泡颜色
+        //添加svg图标需注意 width,height要和 new Icon 的imgSize保持一致
+        let svg  = '<svg t="1540524238971"  class="icon" style="text-align:center" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4126" xmlns:xlink="http://www.w3.org/1999/xlink"  xml:space="preserve"><defs><style type="text/css"></style></defs>'+
+        '<path fill="' + color + '" d="M865.309 291.918c-19.289-45.606-46.897-86.557-82.06-121.719-35.161-35.162-76.114-62.771-121.718-82.06-47.23-19.976-97.385-30.105-149.072-30.105S410.618 68.163 363.388 88.139c-45.605 19.289-86.557 46.898-121.719 82.06-35.162 35.161-62.771 76.114-82.06 121.719-19.976 47.229-30.105 97.384-30.105 149.071 0 51.687 10.129 101.841 30.105 149.07 19.289 45.605 46.898 86.558 82.06 121.72 35.162 35.161 76.114 62.771 121.719 82.06 11.201 4.738 22.569 8.914 34.081 12.541l-58.051 143.991-17.783 0c-14.129 0-25.583 11.454-25.583 25.583s11.454 25.583 25.583 25.583l352.169 0c0.063 0 0.124 0.007 0.187 0.007 0.101 0 0.203-0.006 0.303-0.007l35.985 0c14.13 0 25.583-11.454 25.583-25.583s-11.453-25.583-25.583-25.583l-18.876 0-57.565-146.13c24.322-8.109 47.832-18.654 70.119-31.546 57.156-33.063 105.093-80.61 138.628-137.502 34.561-58.633 52.83-125.787 52.83-194.204C895.414 389.302 885.285 339.148 865.309 291.918zM513.814 146.1c26.472 0 48.01 21.537 48.01 48.01 0 26.472-21.537 48.01-48.01 48.01s-48.011-21.537-48.011-48.01C465.804 167.638 487.342 146.1 513.814 146.1zM512.54 688.835c-111.982 0-203.086-91.104-203.086-203.086 0-111.982 91.104-203.086 203.086-203.086 111.981 0 203.086 91.104 203.086 203.086C715.626 597.731 624.521 688.835 512.54 688.835z" p-id="4127"></path><path d="M512.54 333.829c-83.769 0-151.921 68.152-151.921 151.921 0 83.769 68.15 151.921 151.921 151.921 83.769 0 151.921-68.15 151.921-151.921C664.461 401.98 596.309 333.829 512.54 333.829z" p-id="4128"></path><path d="M513.814 197.265c1.739 0 3.154-1.415 3.154-3.155 0-1.74-1.415-3.155-3.154-3.155-1.74 0-3.155 1.415-3.155 3.155C510.659 195.85 512.074 197.265 513.814 197.265z" p-id="4129"></path><path d="M636.408 950.372 636.408 950.372 636.408 950.373Z" p-id="4130"></path></svg>'
+        let cameraIcon = new Image();
+        cameraIcon.src = 'data:image/svg+xml,' + escape(svg);
+        icon.setStyle(new Style({ //设置样式和大小
+            image: new Icon({
+                img: cameraIcon,
+                crossOrigin: 'anonymous',
+                // src:'http://192.168.9.233:20080/static/pics/cache/biaozhu.svg',
+                imgSize: [28, 28],
+                zIndex:20,
+                marginTop:100
+            }),
+            text:new Text({
+              text:phonetext,
+              textBaseline: 'top',
+              font: 'normal 12px 微软雅黑',
+              lineHeight:'0px',
+              fill: new Fill({
+                    color: 'red',
+                }),
+            }),
+            stroke: new Stroke({
+                color: 'red',
+                width: 21,
+                marginTop:100,
+            })
+        }));
+        vectorSource.addFeature(icon);
+        return vectorSource;
+    },
+    switchalarminfo(){
+       this.openstate = true
+    },
+    addFeature(){
+      function createStyle(src, img) {
+        return new Style({
+          image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+            anchor: [0.5, 0.96],
+            crossOrigin: 'anonymous',
+            src: src,
+            img: img,
+            imgSize: img ? [img.width, img.height] : undefined
+          }))
+        });
+      }
+
+      var iconFeature = new Feature(new Point([113.338591,34.506910]));
+      iconFeature.set('style', createStyle('../../../assets/img/dianli.png', undefined));
+      var CameraVertorlayer = new VectorLayer({
+              source: iconFeature,
+              id:1
+          });
+          map.addLayer(this.CameraVertorlayer);
+    },
+    moveCenter(data){
+      Views.animate({
+        center:data,
+        zoom: 15
+      });
+      this.addAlarmBox(data)
+    }
+  },
+  created(){
+
+  },
+  mounted(){
+    this.InitMap();
+    let _this = this;
+    setTimeout(() => {
+      	// 添加一个使用离线瓦片地图的层
+      var CameraVertorlayer = new VectorLayer({
+        source: _this.addCameraLayer([116.507372,39.932443],'相机B')
+      });
+
+    map.addLayer(CameraVertorlayer);
+    }, 200);
+  }
+}
+</script>
+<style lang="stylus" scoped>
+.ol-control button{
+  display none!important;
+  background red!important
+}
+.ol-popup {
+    position: absolute;
+    background-color: #eeeeee;
+    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+    padding: 15px;
+    border-radius: 10px;
+    border: 1px solid #cccccc;
+    bottom: 12px;
+    left: -50px;
+    min-width: 280px;
+}
+
+.ol-popup:after,
+.ol-popup:before {
+    top: 100%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+.ol-popup:after {
+    border-top-color: #eeeeee;
+    border-width: 10px;
+    left: 48px;
+    margin-left: -10px;
+}
+
+.ol-popup:before {
+    border-top-color: #cccccc;
+    border-width: 11px;
+    left: 48px;
+    margin-left: -11px;
+}
+
+.ol-popup-closer {
+    text-decoration: none;
+    position: absolute;
+    top: 2px;
+    right: 8px;
+}
+
+.ol-popup-closer:after {
+    content: "✖";
+}
+.popup-content{
+  height 300px;
+  overflow auto
+}
+.pop-info-box{
+  overflow hidden
+  border-bottom 2px solid #fff
+}
+.pop-img-box {
+  float left
+  height 100px
+  width 120px
+  img{
+    height 100%
+    width 100%
+  }
+}
+.pop-info{
+  float left
+  padding-left 20px
+  width 100px
+}
+.map-box {
+  position relative
+  background #f8f8f8
+  border-radius 10px
+  .content-info {
+    position absolute
+    z-index 1000
+    color red
+  }
+  .map{
+    height 88vh
+    width 99%
+    margin 10px auto 10px
+  }
+}
+.info-box{
+  position absolute
+  z-index 5000
+  height 400px
+  width 400px
+  color #222
+  margin 15px
+  .info-item{
+    position relative
+    height 122px
+    width 282px
+    margin-bottom 10px
+    background #fff
+    border-radius 5px
+    box-shadow 0px 0px 2px rgba(0,0,0,.3)
+    overflow hidden
+    .info-header{
+      height 40px
+      line-height 40px
+      border-bottom 1px dashed #d7d7d7
+      .icon{
+        font-size 20px
+        color #999999
+        margin 0 10px 0 20px
+        vertical-align middle
+      }
+    }
+    .info-content{
+      font-size 40px
+      padding 10px 80px
+    }
+  }
+}
+ .info-item:after{
+    display block
+    content:''
+    position absolute
+    width 900px
+    height 900px
+    bottom -885px
+    left -300px
+    border-radius 900px
+    background #e2edfe
+  }
+.info-item:nth-child(1){
+  .info-content{
+   color #3c85f9
+  }
+}
+.info-item:nth-child(2){
+    .info-content{
+    color #5dd8a2
+    }
+}
+.info-item:nth-child(3){
+   .info-content{
+    color #f19149
+   }
+}
+.info-item:nth-child(4){
+    .info-content{
+      color #ff7c93
+     }
+}
+.info-item:nth-child(1):after{
+   background #e2edfe
+}
+.info-item:nth-child(2):after{
+   background #e7f9f1
+}
+.info-item:nth-child(3):after{
+   background #fdefe4
+}
+.info-item:nth-child(4):after{
+   background #ffebef
+   color #ff7c93
+}
+.info-content{
+
+}
+.canvasDiv{
+  height 30px
+  width 30px
+  background red
+  border-radius 30px
+  color #ffffff
+  font-size 12px
+  text-align center
+  line-height 30px
+  z-index 10
+  opacity 0.5
+}
+.count-box{
+  position relative
+  margin 50px auto
+  background rgba(0,0,0,.5)
+  z-index 100
+}
+.count-header{
+  height 100px
+  border-bottom 2px solid rgba(255,255,255,.9)
+  color #ffffff
+  z-index 200
+  span {
+    display block
+  }
+  .header-title{
+      font-size 20px
+  }
+  .header-num{
+    font-size 30px
+    text-align center
+    color #20a0ff
+  }
+}
+.count-conent{
+  color #fff
+  .tianchong{
+    height 20px
+  }
+  .f-icon{
+    font-size 20px!important
+  }
+}
+.full{
+  position absolute;
+  right 0;
+  color #fff
+  .full-icon{
+    font-size 24px
+    padding 5px
+    cursor pointer
+  }
+}
+.pl3{
+  padding-left 3px
+}
+.rotate-north {
+    top: 65px;
+    left: .5em;
+}
+.ol-touch .rotate-north {
+  top: 80px;
+}
+
+.canvasDiv{
+    height:30px;
+    width:30px;
+    border-radius: 25px;
+    background: rgba(255, 0, 0, 1);
+    transform: scale(0);
+    animation: myfirst 3s;
+    animation-iteration-count: infinite;
+}
+@keyframes myfirst{
+    to{
+        transform: scale(2);
+        background: rgba(0, 0, 0, 0);
+    }
+}
+
+.ol-overlaycontainer-stopevent{
+  display:none!important;
+}
+.alarm-active{
+  display none
+}
+.alarm-makerbox{
+  display block
+  height 200px;
+  width 200px;
+  border-radius 5px
+  background: rgba(39, 41, 48, .9);
+  color #ffffff
+  font-family '微软雅黑'
+  font-size 14px
+  animation: op 1s;
+  -moz-animation: op 1s;	/* Firefox */
+  -webkit-animation: op 1s;	/* Safari 和 Chrome */
+  -o-animation: op 1s;
+}
+@keyframes op {
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
+@-moz-keyframes op /* Firefox */
+{
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
+
+@-webkit-keyframes op /* Safari 和 Chrome */
+{
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
+
+@-o-keyframes op /* Opera */
+{
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
+.exit-alarm::after{
+  float right
+  height 20px
+  width 20px
+  margin 5px
+  content: "✖";
+  cursor pointer
+}
+.img-box{
+  width 200px;
+  height 100px;
+  overflow hidden;
+  img{
+    height 100%
+    width 100%
+    text-align center
+  }
+}
+.info-list {
+  padding 1px 10px
+}
+</style>

web/src/views/Layout/alarmpush/alarmpush.vue

+<template>
+  <div>
+
+  </div>
+</template>
+<script>
+import {mapGetters} from 'vuex'
+export default {
+  data(){
+    return{
+      notification:'',
+      alamData:''
+    }
+  },
+  methods:{
+    alertAlarm(val){
+       let str = ''
+      switch (val.params.msg_type) {
+        case 'black_face':
+          str = '非注册人员'
+          break;
+        case 'white_face':
+          str = '人脸白名单'
+          break;
+        case 'black_car':
+          str = '非注册车辆'
+          break;
+        case 'white_car':
+          str = '车辆白名单'
+          break;
+        case 'behavior':
+          str = '违规行为'
+          break;
+      }
+      this.notification = this.$notify({
+        title: '提示',
+        message: '您有一条新的'+ str +'报警信息！',
+        position: 'bottom-right', 
+        type: 'warning',
+        onClick: this.showDetail,
+        customClass: 'alarm',
+        url: val.params.msg_url,
+        duration:5000
+      });
+    },
+    showDetail(url) {
+      debugger
+     if(this.alamData.params.msg_type == 'black_face') {
+       this.$router.push('/alarm/facealarm/illegalInfiltration')
+     }
+    if(this.alamData.params.msg_type == 'black_car') {
+       this.$router.push('/alarm/caralarm/illegalrecord')
+     }
+    if(this.alamData.params.msg_type == 'behavior') {
+       this.$router.push('/alarm/behaviouralanalysis/securityAlert')
+     }
+    }
+  },
+  computed:{
+      ...mapGetters([
+      'alarm',
+    ]),
+  },
+  watch:{
+    alarm(val){
+      this.alertAlarm(val);
+      this.alamData = val;
+    },
+    
+  }
+}
+</script>
+<style lang="stylus">
+  .alarm {
+    cursor pointer
+  }
+</style>

web/src/views/Layout/index.vue

+<template>
+  <el-row>
+    <div class="bkkk">
+      <div class="layout-box">
+        <el-col :span="3" class="logo">
+          <div class="logo-box">
+            <i>社保监管平台</i>
+            <div class="en-title">
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="15">
+          <menus ref="menus"></menus>
+        </el-col>
+        <el-col :span="6" class>
+          <el-col :span="10" :offset="8">
+            <div class="timer">{{timer}}</div>
+          </el-col>
+          <el-col :span="2">
+              <el-dropdown  @command="handleClick">
+              <i class="el-icon-setting quit-icon"></i>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="dark">黑色主题</el-dropdown-item>
+                <el-dropdown-item command="white">白色主题</el-dropdown-item>
+              </el-dropdown-menu>
+              </el-dropdown>
+          </el-col>
+          <el-col :span="2">
+            <div class="quitsystem-btn">
+
+              <i class="el-icon-switch-button quit-icon"  @click="quit"></i>
+            </div>
+          </el-col>
+        </el-col>
+      </div>
+      <el-row>
+        <el-col :span="24" class="header-box">
+          <el-tag
+            class="tags"
+            v-for="tag in tags"
+            :key="tag.name"
+            closable
+            @close="handleClose(tag)"
+            @click="handClack(tag)"
+            :type="tag.meta?tag.meta.type:''"
+          >{{tag.name}}</el-tag>
+        </el-col>
+      </el-row>
+    </div>
+
+    <el-col :span="24" class="view-box">
+      <keep-alive>
+        <router-view></router-view>
+      </keep-alive>
+    </el-col>
+
+  </el-row>
+</template>
+<script>
+import menus from "../Menu/menu";
+import threemen from "../Menu/threedmenu/threedmenu";
+import { mapGetters } from "vuex";
+export default {
+  data() {
+    return {
+      threemenu: [],
+      tags: [],
+      timer:''
+    };
+  },
+  methods: {
+    handleClick(val) {
+      this.$store.commit('setTheme',val)
+    },
+    quit() {
+      this.$router.push("/");
+      sessionStorage.removeItem("threemenu");
+      sessionStorage.removeItem("menu");
+      this.$store.dispatch("GetTwoMenu", "");
+      this.$store.dispatch("GetMenuRole", "");
+    },
+    addtag() {
+      this.tags.push("");
+    },
+    getbodyHeight() {
+      let height = document.body.clientHeight;
+    },
+    handleClose(tag) {
+      this.tags.splice(this.tags.indexOf(tag), 1);
+    },
+    handClack(tag) {
+      this.$refs.menus.selcurIndex(tag.path);
+      this.$router.push(tag.path);
+    },
+    changeRouter(croute) {
+      if (this.tags.length < 1) {
+        this.tags.push(croute);
+      }
+      let addstate = 0;
+      for (let i = 0; i < this.tags.length; i++) {
+        if (this.tags[i].path === croute.path) {
+          addstate = 1;
+          this.tags[i].meta.type = "success";
+        } else {
+          this.tags[i].meta.type = "";
+        }
+      }
+      if (addstate == 0) {
+        croute.meta.type = "success";
+        this.tags.push(croute);
+      }
+    }
+  },
+  created() {
+    this.getbodyHeight();
+    setInterval(()=> {
+      this.timer = this.timeForm(new Date())
+    })
+  },
+  computed: {
+    ...mapGetters(["three_menu"])
+  },
+  components: {
+    menus,
+    threemen
+  },
+  watch: {
+    $route: "changeRouter"
+  },
+  mounted() {
+  }
+};
+</script>
+<style lang="stylus">
+[class^='el-icon-fa'], [class*=' el-icon-fa'] {
+  display: inline-block;
+  font: normal normal normal 14px / 1 FontAwesome !important;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-size: 16px;
+}
+
+.layout-box {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+  overflow: hidden;
+}
+
+.bg {
+  height: 60px;
+}
+
+.logo-box {
+  height: 45px;
+  width: 200px;
+  margin-top: 10px;
+  margin-left 20px
+  font-size 1.8rem
+  font-weight 600
+  letter-spacing 2px
+  .en-title{
+    font-size 1rem
+  }
+  .logo {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+
+
+.header-box {
+  overflow: hidden;
+  top: 60px;
+  height: 40px;
+  background:#34495e;
+  text-align: left;
+  position: fixed;
+}
+
+.view-box {
+  overflow-x: hidden;
+  background #efefef;
+}
+
+.quit-icon {
+  font-size 25px
+  line-height: 55px;
+  vertical-align: middle;
+  padding: 0 5px;
+}
+
+.tags {
+  margin: 7px 5px 0 10px;
+  cursor: pointer;
+}
+
+.bkkk {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100px;
+  z-index: 1000;
+
+}
+.timer{
+  height 55px;
+  line-height 55px
+  font-size 20px
+}
+</style>
+

web/src/views/Layout/magnifier/magnifier.vue

+<template>
+  <div>
+    <el-dialog 
+      title="图片详情"
+      :fullscreen=true
+      :visible.sync="dialogVisible"
+      :before-close="handleClose">
+    <div class="img-box" :style="'height:'+ height + 'px'">
+      <img :src="picsrc" alt="">
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="handleClose">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+export default {
+  data() {
+    return {
+      dialogVisible:false,
+      height:800,
+      picsrc:'',
+    }
+  },
+  methods:{
+    handleClose(){
+      this.$store.commit('setImgsrc','');
+      this.dialogVisible = false;
+    }
+  },
+  computed:{
+    ...mapState(['imgsrc'])
+  },
+  watch:{
+    imgsrc(val){
+      if(val != ''){
+        this.picsrc = val;
+        this.dialogVisible = true;
+      }
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+.img-box{
+  height 100%
+  overflow hidden
+  text-align center
+  img {
+    max-width 100%
+    max-height 100%
+  }
+}
+</style>
\ No newline at end of file

web/src/views/Login/login.vue

+<template>
+  <div class="login">
+    <div class="login_div_">
+      <!-- <div class="left_login_mc">
+        <el-row style="font-size:15px;width:100%;" class="ml_l">
+          <a href="http://193.5.103.166:8089/illimg/76.0.3809.87_chrome_installer_32.exe">谷歌浏览器下载</a>
+        </el-row>
+      </div> -->
+        <div class="login-box">
+          <div class="left-box">
+            <div class="ploce-box"></div>
+            <div class="content-box">
+              <div>欢迎登录</div>
+              <div class="plat-name">青岛社保管理系统</div>
+            </div>
+            <div class="version-box">
+              <div>版权所有：青岛社保管理局</div>
+              <div>版本：v-1.0.0.0</div>
+            </div>
+          </div>
+          <div class="right-box">
+            <div class="header">系统登录</div>
+            <div class="login-input-box">
+              <el-input
+                placeholder="用户名"
+                suffix-icon="el-icon-user"
+                class="item-input"
+                v-model="userName">
+              </el-input>
+            </div>
+            <div class="login-input-box">
+                 <el-input
+                placeholder="密码"
+                suffix-icon="el-icon-lock"
+                class="item-input"
+                type="passWord"
+                v-model="passWord">
+              </el-input>
+            </div>
+            <div class="login-button" @click="login">登录</div>
+            <div class="login-about">技术支持：北京文安智能科技股份有限公司</div>
+          </div>
+        </div>
+        <!-- <el-col :span="10" :offset="4" class="login-box">
+          <el-col :span="24" class="login-header mt20">
+            <div class="login-header-box pl10">
+              <div class="pl25 header-box-title">系统登录</div>
+            </div>
+          </el-col>
+          <el-row class="login-info">
+            <el-col :span="20" :offset="2" class="box">
+              <el-input
+                :span="10"
+                class="el_input_b"
+                oninput="if(value.length>6)value=value.slice(0,6)"
+                v-model="userName"
+                placeholder="用户ID"
+              ></el-input>
+            </el-col>
+          </el-row>
+          <el-row class="mt20">
+            <el-col :span="20" :offset="2" class="box">
+              <el-input
+                v-model="passWord"
+                class="el_input_b"
+                type="password"
+                onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"
+                @keyup.enter.native="login"
+                placeholder="密码"
+              ></el-input>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="20" :offset="2" class="box mt20">
+              <el-button type="primary pull-right" class="login-btn" @click="login">登录</el-button>
+            </el-col>
+          </el-row>
+        </el-col> -->
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      userName: "",
+      passWord: ""
+    };
+  },
+  methods: {
+    login() {
+      debugger;
+      //--添加验证
+      if (this.userName == "") {
+        this.$message.error("请输入用户名");
+        return;
+      }
+
+      if (this.userName != "admin" && this.userName.length != 6) {
+        this.$message.error("请输入6位用户ID");
+        return;
+      }
+
+      if (this.passWord == "") {
+        this.$message.error("请输入密码在继续");
+        return;
+      }
+      //--------\
+      // this.$router.push("/layout");
+      // this.$router.push("/show");
+      var data = { username: this.userName, password: this.passWord };
+      this.axios
+        .post(this.API.auth.login, data)
+        .then(response => {
+          localStorage.setItem("atoken", response.data.atoken);
+          localStorage.setItem("rtoken", response.data.rtoken);
+          localStorage.setItem("user_id", response.data.user_unid);
+          localStorage.setItem("username", this.userName);
+          sessionStorage.removeItem("threemenu");
+          sessionStorage.removeItem("menu");
+          //----cyl 添加获取更加详细的用户信息---
+
+          this.axios
+            .get(this.API.auth.edituser(localStorage.getItem("user_id")))
+            .then(response => {
+              localStorage.setItem("namemc", response.data.name);
+            });
+
+          //---end
+
+          this.$router.push("/show");
+
+          // console.log(response.data)
+          // localStorage.setItem("atoken",'dc62ae05-21be-43ad-9be2-d5f8a6bd0dac');
+        })
+        .catch(err => {
+          let info = "用户名或密码错误！";
+          if (err.message == "Network Error") info = "网络错误!";
+          this.$message.error(info);
+        });
+    }
+  }
+};
+</script>
+<style lang="stylus">
+.login {
+  position relative
+  height: 100%;
+  background: url('../../assets/img/login.jpg');
+  background-size: 100% 100%;
+}
+
+.login-box {
+  position absolute
+  top 0
+  right 0
+  left 0
+  bottom 0
+  margin auto
+  height: 60vh;
+  width: 54.8vw;
+  overflow: hidden;
+  color: #fff;
+  border-radius: 5px;
+  background-size 100% 100%
+  .left-box{
+    height: 60vh;
+    width 43vw
+    background: url('../../assets/img/loginbox.png') no-repeat;
+    background-size 100% 100%
+    .ploce-box{
+      position absolute
+      height 4vw
+      width  4vw
+      background: url('../../assets/img/police.png') no-repeat;
+      background-size 100% 100%
+      left 3vw
+      top 3.2vh
+    }
+    .content-box{
+      letter-spacing .3vw
+      position absolute
+      bottom 14vh
+      left 8vw
+      font-size 2.3rem
+      text-align center
+      .plat-name{
+        margin-top 1vh
+      }
+    }
+    .version-box{
+      position absolute
+      bottom 5vh
+      left 8vw
+      letter-spacing .2vw
+      opacity .8
+    }
+  }
+  .right-box{
+    position absolute
+    top 0
+    right 3.5vw
+    width 20.7vw
+    height 60vh
+    background #fff
+    border-radius 2px
+    .header{
+      width 100%
+      text-align center
+      font-size 2.2rem
+      letter-spacing .2vw
+      color #0b76fb
+      margin-top 6vh
+    }
+    .login-about{
+      width 100%
+      position absolute
+      font-size 1rem
+      color #0b76fb
+      bottom 2vh
+      text-align center
+      opacity .8
+    }
+    .login-input-box{
+      width 15.1vw
+      margin 10vh auto 0
+
+    }
+    .login-input-box:nth-child(3){
+      margin-top 4vh
+    }
+    .login-button{
+      width 15.1vw
+      margin 5vh auto
+      background #0b76fb
+      border-radius 20px
+      text-align center
+      height 4vh
+      line-height 4vh
+    }
+  }
+}
+
+.login-info {
+  margin-top: 40px;
+}
+
+.header-box-title {
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 24px;
+  overflow: hidden;
+}
+
+.login-btn {
+  width: 100px;
+  height: 40px;
+  border-radius: 5px;
+}
+
+.el_input_b .el-input__inner {
+  background: #fff !important;
+  color: #394389 !important;
+}
+
+.left_login_mc {
+  float: left;
+  width: 390px;
+  height: 150px;
+  margin-left: 62%;
+  margin-top: 260px;
+  background: #2E7CA2;
+  opacity: 0.7;
+}
+
+.ml_l {
+  margin-left: 88px;
+}
+</style>

web/src/views/Menu/menu.vue

+<template>
+  <div class="menu-box">
+    <el-menu :default-active="activeIndex" class="el-menu-hideafter" mode="horizontal"  @select="handleSelect">
+         <el-menu-item  index="/show" >
+          <template slot="title"><div class="menu-title"><i class="gy-icon-shouye menu-icon"></i>首页</div></template>
+        </el-menu-item>
+          <el-menu-item  v-for="(fristmenu,index) in permission_routers" :key="index" :index="fristmenu.path" v-if="fristmenu.children.length < 1">
+            <i :class="[fristmenu.meta.icon,'menu-icon']"></i>{{fristmenu.name}}
+          </el-menu-item>
+          <el-submenu v-for="(fristmenu,index) in permission_routers" :key="index"  v-if="fristmenu.children.length > 0" :index="fristmenu.path" >
+            <template slot="title"><i :class="[fristmenu.meta.icon,'menu-icon']"></i>{{fristmenu.name}}</template>
+            <el-menu-item :class="{'dark-submenu':theme=='dark','white-submenu':them == 'white'}" v-for="(twomenu,index) in fristmenu.children" :key="index" :index="twomenu.path" v-if="twomenu.children.length < 1">{{twomenu.name}}</el-menu-item>
+            <el-submenu  v-for="(twomenu,index) in fristmenu.children" :key="index" :index="twomenu.path" v-if="twomenu.children.length > 0">
+                <template slot="title">{{twomenu.name}}</template>
+                <el-menu-item v-for="(threemenu,index) in twomenu.children" :key="index" :index="threemenu.path">{{threemenu.name}}</el-menu-item>
+            </el-submenu>
+          </el-submenu>
+    </el-menu>
+  </div>
+</template>
+<script>
+  import { mapGetters,mapState} from 'vuex'
+  import Vue from 'vue'
+  export default {
+    data() {
+      return {
+        activeIndex: '/home',
+      };
+    },
+    methods: {
+      handleSelect(key, keyPath) {
+        debugger
+            sessionStorage.setItem('menu',key);
+            this.$router.push(key);
+
+      },
+      selcurIndex(data){
+        this.activeIndex = data
+      },
+    },
+    computed: {
+       ...mapState(['theme']),
+      ...mapGetters([
+        'permission_routers',
+      ]),
+    },
+    created(){
+      debugger
+      console.log(this.theme)
+      let menu =  sessionStorage.getItem('menu');
+      if(menu) {
+        this.activeIndex =  sessionStorage.getItem('menu');
+        this.handleSelect(this.activeIndex);
+      } else {
+        this.activeIndex = '/show'
+        this.handleSelect(this.activeIndex);
+      }
+    },
+    watch:{
+      theme(val){
+
+      }
+      // '$route':'changeRouter'
+    }
+  };
+
+</script>
+<style lang="stylus" scoped>
+.menu-box {
+  height 60px
+  text-align center
+  overflow hidden
+  .menu-title{
+  }
+}
+</style>
+

web/src/views/Menu/threedmenu/threedmenu.vue

+<template>
+  <el-row class="tmenu">
+    <el-col :span="15" :offset="1">
+      <el-col :span="3" v-for="(item,index) in three_menu" :key="index">
+        <!-- <router-link  :to="item.path"  class="tab-menu"><span @click="savemenu(item.path)" class="tmenu-title">{{item.name}}</span></router-link> -->
+        <el-menu
+          :default-active="subactiveIndex"
+          mode="horizontal"
+          @select="handleSelect"
+          :router="true"
+        >
+          <el-menu-item :index="item.path" v-if="item.children.length === 0">{{item.name}}</el-menu-item>
+          <el-submenu :index="item.path" v-if="item.children.length > 0" class="sub-menu">
+            <template slot="title">{{item.name}}</template>
+            <el-menu-item  v-for="(citem,cindex) in item.children" :key="cindex" :index="citem.path">{{citem.name}}</el-menu-item>
+          </el-submenu>
+        </el-menu>
+      </el-col>
+    </el-col>
+  </el-row>
+</template>
+<script>
+import { mapGetters } from "vuex";
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      subactiveIndex:'',
+      threemenu:[]
+    };
+  },
+  methods: {
+      handleSelect(path) {
+       this.subactiveIndex = path
+        sessionStorage.setItem("threemenu", this.subactiveIndex);
+    },
+
+  },
+  computed: {
+    ...mapGetters(["three_menu"])
+  },
+  created() {
+    debugger
+    let threemenu = sessionStorage.getItem("threemenu");
+    if (threemenu) {
+      this.subactiveIndex = threemenu;
+      var _this = this;
+      setTimeout(function() {
+        _this.$router.push(threemenu);
+      }, 0);
+    }
+  },
+
+  watch: {
+    three_menu(val) {
+      if (val.length > 0) {
+        this.subactiveIndex = val[0].path
+        if(val[0].children.length > 0){
+            this.subactiveIndex = val[0].children[0].path
+            this.$router.push(val[0].children[0].path);
+            sessionStorage.setItem("threemenu", val[0].children[0].path);
+        } else{
+            this.subactiveIndex = val[0].path
+            this.$router.push(val[0].path);
+            // sessionStorage.setItem("threemenu", val[0].path);
+        }
+      } else {
+
+      }
+    }
+  },
+  mounted() {}
+};
+</script>
+<style lang="stylus" scoped>
+.tmenu {
+  height: 40px;
+  line-height: 40px;
+  background: #38455e;
+  text-align: center;
+}
+
+.tab-menu {
+  display: inline-block;
+  color: #ccc;
+  font-size: 14px;
+  line-height: 40px;
+  text-decoration: none;
+}
+
+.router-link-active {
+  width: 100%;
+  background: #0c61b2;
+  color: #fff;
+}
+
+.tmenu-title {
+  display: inline-block;
+  height: 100%;
+  width: 100%;
+}
+</style>

web/src/views/Search/FilmedRecords.vue

+<!---抓拍记录--->
+<template>
+  <div class="template-box content_div_main">
+      <el-form :inline="true" class="search-form" size="small">
+        <el-form-item label="抓拍地点：">
+          <el-input type="text" class="bla bra br0" v-model="address" placeholder=""></el-input>
+        </el-form-item>
+         <el-form-item label="抓拍相机：">
+          <el-input type="text" class="bla bra br0" v-model="camera" placeholder=""></el-input>
+        </el-form-item>
+         <el-form-item label="查询库：">
+           <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+         <el-form-item label="查询时间：">
+             <el-date-picker
+            v-model="value1"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+         <el-form-item>
+          <el-button  class="search-btn" @click="searchUser" icon="el-icon-search">查询</el-button>
+          <el-button  class="search-btn ml10"  @click="addGroupUser()" icon="el-icon-upload">导出</el-button>
+        </el-form-item>
+      </el-form>
+    <el-row class="table_m_type">
+      <el-table :data="tableData"  height="690">
+        <el-table-column prop="date" label="日期">
+          <template slot-scope="scope">
+          {{showLocalTime(scope.row.event_dt)}}
+        </template>
+        </el-table-column>
+        <el-table-column prop="events_count" label="出现次数" ></el-table-column>
+        <el-table-column prop="camera.name" label="相机名称"></el-table-column>
+        <el-table-column prop="face.name" label="姓名"></el-table-column>
+        <el-table-column label="性别">
+          <template slot-scope="scope">
+            {{scope.row.face.sex |sexfn}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="face.age" label="年龄"></el-table-column>
+        <el-table-column prop="camera.name" label="抓拍人像">
+          <template slot-scope="scope" class="accomimg-box">
+            <img :src="scope.row.pic_url" class="accomimg"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="300px" align="center">
+          <template slot-scope="scope">
+            <div class="tab-btn-box">
+              <span class="table-btn" size="" @click="handleSee(scope.$index, scope.row)">人员轨迹</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row>
+      <el-pagination
+        class="flr mt10"
+        background
+        @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.currentPage" :page-size="page.limit" layout="total,prev, pager, next, jumper" :total="page.total">
+      </el-pagination>
+    </el-row>
+    <el-row>
+      <tracks ref="track"></tracks>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import cluseterdetail from "./clusterdetail";
+import tracks from './track'
+export default {
+  data() {
+    return {
+      communityData: [],
+      loading: true,
+      Progressdialog:false,
+      search: {
+        communityunid: "",
+        camrename: "",
+        identity: "",
+        dt: "1",
+        sex: "",
+        dtNumber: "",
+        datatime: ""
+      },
+      camrefid: "",
+      cameraname: "",
+      page: {
+        limit: 20,
+        offset: 0,
+        total: 0,
+        currentPage: 1
+      },
+      eventdata: "",
+      faceunid: "",
+      tableData: [],
+      dialogVisible: false,
+      timer:'',
+      progress:0,
+    };
+  },
+  methods: {
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    handleSizeChange(val) {},
+    handleCurrentChange(val) {
+      this.page.offset = (val - 1) * this.page.limit;
+      this.faceCheck();
+      this.page.currentPage = val;
+    },
+    handleEdit(index, row) {
+      this.eventdata = row;
+      this.faceunid = row.face.unid;
+      this.dialogVisible = true;
+    },
+    searchFaceCheck() {
+      this.faceCheck();
+      this.page.offset = 0;
+      this.page.currentPage = 0;
+    },
+
+    faceCheck() {
+      this.loading = true;
+      var checknum_greater = this.search.dtNumber,
+        gte_checknum_greater,
+        lt_checknum_greater;
+      if (this.search.dt == 1) {
+        gte_checknum_greater = checknum_greater;
+        lt_checknum_greater = "";
+      }
+      if (this.search.dt == 2) {
+        gte_checknum_greater = "";
+        lt_checknum_greater = checknum_greater;
+      }
+      var Vthis = this;
+      this.axios
+        .get(this.API.faceweb + "/faces/aggregate?", {
+          params: {
+            offset: Vthis.page.offset,
+            limit: Vthis.page.limit,
+            addr_unid_is_null: "",
+            is_active: true,
+            events_count__gte: gte_checknum_greater,
+            events_count__lt: lt_checknum_greater,
+            camera_addr_unids:  this.search.communityunid,
+            camera_name__like: this.search.camrename,
+            event_dt__gte: this.setUtcTime(this.search.datatime[0]),
+            event_dt__lt: this.setUtcTime(this.search.datatime[1]),
+            name_flag: this.search.identity,
+            sex: this.search.sex,
+          }
+        }).then(function(response) {
+          Vthis.tableData = response.data.list_data;
+          Vthis.page.total = response.data.total_num;
+          Vthis.loading = false;
+        });
+    },
+    exportCluster() {
+      var checknum_greater = this.search.dtNumber,
+        gte_checknum_greater,
+        lt_checknum_greater;
+      if (this.search.dt == 1) {
+        gte_checknum_greater = checknum_greater;
+        lt_checknum_greater = "";
+      }
+      if (this.search.dt == 2) {
+        gte_checknum_greater = "";
+        lt_checknum_greater = checknum_greater;
+      }
+      this.axios.get(this.API.faceweb + "/faces/aggregate/export",{
+        params:{
+          "events_count__gte":gte_checknum_greater,
+          "events_count__lt":lt_checknum_greater,
+          "camera_addr_unids":this.search.communityunid,
+          "camera_name__like": this.search.camrename,
+          "event_dt__gte": this.setUtcTime(this.search.datatime[0]),
+          "event_dt__lt": this.setUtcTime(this.search.datatime[1]),
+          "name_flag": this.search.identity,
+          "sex": this.search.sex,
+          "limit":100
+        }
+      }).then((response)=>{
+          debugger
+          if(response.data.handle_state == 4){
+              this.$message.error(response.data.response_json);
+              return
+          }
+          this.progress = 0;
+          this.Progressdialog = true;
+
+          this.timer = setInterval(()=>{
+            this.showDownloadsize(response.data.unid)
+          },3000)
+      })
+    },
+    showDownloadsize(unid){
+      this.axios.get(this.API.this.API.faceweb + "/consume_time_request/"+unid).then((response)=>{
+      // this.axios.get("http://192.168.9.225:8080/FACE-DETECT-WEB/api/v1/face_web" + "/consume_time_request/"+unid).then((response)=>{
+        if(response.data.response_json){
+          var sizeInfo = JSON.parse(response.data.response_json);
+          debugger
+          var total = Number(sizeInfo.totalNum);
+          var downloadsize = Number(sizeInfo.handledNum);
+          this.progress = parseInt((downloadsize/total)*100);
+        }
+        if(response.data.handle_state == 2){
+           this.Progressdialog = false;
+           clearInterval(this.timer);
+          location.href = this.API.faceweb + "/consume_time_request/download/"+unid;
+          return false;
+        }
+      });
+    },
+    handleSee(){
+      this.$refs.track.init()
+    }
+  },
+  components: {
+    cluseterdetail,
+    tracks
+  },
+  created() {
+    this.faceCheck();
+    this.communityData = this.$store.state.orgData;
+  }
+};
+</script>
+<style lang="stylus" scoped>
+.search-box {
+  color: #333;
+  background: #fff;
+}
+.tableimg{
+  height 60px
+  width 60px
+  img{
+    height 100%
+    width 100%
+  }
+}
+</style>

web/src/views/Search/Searchpic.vue

+<!---抓拍记录--->
+<template>
+  <div class="pic-box template-box videobox">
+    <div class="pic-left-box">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="单人脸搜索" name="one">
+          <onpice></onpice>
+        </el-tab-pane>
+        <el-tab-pane label="多人脸搜索" name="more">
+          <morepic></morepic>
+        </el-tab-pane>
+        <el-tab-pane label="人脸比对" name="compar">
+          <compaarisonpic></compaarisonpic>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <div class="pic-right-box">
+      <div class="result-box" v-show="activeName == 'one'">
+        <div class="one-pic-box" v-for="item in 15">
+          <img src="./1.jpg" alt="">
+        </div>
+      </div>
+      <div class="result-box" v-show="activeName == 'more'">
+        <div class="more-pic-box" v-for="item in 15">
+          <div class="more-item org-img" >
+            <img src="./1.jpg" alt="">
+          </div>
+          <div class="more-item">
+            <img src="./1.jpg" alt="">
+          </div>
+          <div class="more-item">
+            <img src="./1.jpg" alt="">
+          </div>
+          <div class="more-item">
+            <img src="./1.jpg" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="result-box" v-show="activeName == 'compar'">
+        <div class="compar-box">
+          <div class="comparitem1">
+            <img src="./1.jpg" alt="">
+          </div>
+          <div class="sim-box">
+            <el-progress type="circle" :percentage="10"></el-progress>
+          </div>
+          <div class="comparitem2">
+             <img src="./1.jpg" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import onpice from './onePic'
+import compaarisonpic from './comparisonpic'
+import morepic from './morePic'
+import {mapGetters} from 'vuex'
+
+export default {
+  data() {
+    return {
+      address: "",
+      camera: "",
+      value: "",
+      value1: "",
+      imageUrl:'',
+      activeName: 'one',
+    };
+  },
+  components:{
+    onpice,
+    morepic,
+    compaarisonpic
+  },
+  methods: {
+     handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      handleClick(tab, event) {
+        console.log(tab.name);
+      },
+      connectws(){
+
+      }
+  },
+   computed:{
+    ...mapGetters(['faceInfo'])
+  },
+  watch:{
+    faceInfo(val){
+      console.log(val)
+    }
+  },
+  created() {}
+};
+</script>
+<style lang="stylus" scoped>
+.pic-box{
+  background: #fff;
+  display flex
+  height calc(100vh - 120px)
+  border-radius 5px
+  overflow hidden
+  .pic-left-box{
+    width 230px
+    box-shadow 3px 0px 3px rgba(0,0,0,.4)
+  }
+}
+.search-btn{
+  margin 50px
+}
+ .avatar-uploader ,.el-upload {
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    margin 20px
+    border: 1px dashed #d9d9d9;
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+  .pic-right-box{
+    width 100%
+    overflow auto
+  }
+  .result-box{
+    margin-left 20px
+    margin-top 20px
+    color #333
+    .one-pic-box{
+      float left
+      width 200px
+      height 200px
+      margin 0 0 20px 20px
+      border-radius 5px
+      box-shadow 0 0 3px rgba(0,0,0,.3)
+      overflow hidden
+      img{
+        height 100%
+        width 100%
+      }
+    }
+  }
+  .more-pic-box {
+    display flex
+    flex-wrap wrap
+    .more-item{
+      width 200px
+      height 200px
+      margin 0 0 20px 20px
+      border-radius 5px
+      box-shadow 0 0 3px rgba(0,0,0,.3)
+      overflow hidden
+      img{
+        width 100%
+        height 100%
+      }
+    }
+    .org-img{
+       box-shadow 0 0 5px rgba(233,13,13,.7)
+    }
+  }
+  .compar-box {
+    display flex
+    .comparitem1,.comparitem2{
+      width 200px;
+      height 200px
+      margin 0 0 20px 20px
+      border-radius 5px
+      box-shadow 0 0 3px rgba(0,0,0,.3)
+      img{
+        width 100%
+        height 100%
+      }
+    }
+    .sim-box{
+      margin 40px 0px 0 20px
+    }
+  }
+</style>

web/src/views/Search/clusterdetail.vue

+ <!--伴随人员-->
+<template>
+    <div>
+        <el-dialog title="聚类详情" :visible.sync="dialogVisible" size="small" :before-close="handleClose" class="tabledialong">
+            <div class="detail-aline mt20"></div>
+            <el-row >
+              <div class="dialongtable">
+                <el-table v-loading.body="loading" :data="tableData"  boder style="width: 100%" >
+                    <el-table-column type="index" label="编号" width="100">
+                    </el-table-column>
+                    <el-table-column prop="camera.name" label="相机名称" width="220">
+                    </el-table-column>
+                    <el-table-column label="抓拍时间">
+                        <template slots-scope="scope">
+                            {{showLocalTime(scope.row.event_dt)}}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="图片" style="height:60px">
+                        <template slots-scope="scope" class="accomimg-box">
+                            <img :src="scope.row.pic_url" class="accomimg"/>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作">
+                        <template slots-scope="scope">
+                            <el-button class="" type="danger" icon="delete" size="small" @click="clusDelete(scope.$index, scope.row)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+              </div>
+            </el-row>
+            <el-row>
+                <div class="block">
+                    <el-pagination class="flr mt10" @current-change="handleCurrentChange" :current-page.sync="page.currentPage" :page-size="page.limit" layout="total,prev, pager, next, jumper" :total="page.total">
+                    </el-pagination>
+                </div>
+            </el-row>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="handleClose">取 消</el-button>
+                <el-button type="primary" @click="handleClose">确 定</el-button>
+            </span>
+        </el-dialog>
+
+    </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: true,
+      page: {
+        offset: 0,
+        currentPage: 1,
+        limit: 5,
+        total: 0
+      },
+      tableData: []
+    };
+  },
+  computed: {},
+
+  methods: {
+    handleClose() {
+      this.$emit("closedialog", false);
+    },
+    clusDelete(index, row) {
+      var Vthis = this;
+      this.axios
+        .delete(FACEWEB + "/face_events/" + row.unid)
+        .then(function(response) {
+          Vthis.$message({
+            type: "success",
+            message: "删除成功!"
+          });
+          Vthis.showAccompany();
+        });
+    },
+    handleCurrentChange(val) {
+      this.page.currentPage = val;
+      this.page.offset = (val - 1) * this.page.limit;
+      this.showAccompany();
+    },
+    showAccompany(accunid) {
+      var Vthis = this;
+      Vthis.loading = true;
+      this.axios
+        .get(FACEWEB + "/faces/" + this.eventdata.face.unid + "/face_events", {
+          params: {
+            limit: Vthis.page.limit,
+            offset: Vthis.page.offset
+          }
+        })
+        .then(function(response) {
+          Vthis.tableData = response.data.list_data;
+          Vthis.page.total = response.data.total_num;
+          Vthis.loading = false;
+        });
+    }
+  },
+  props: {
+    eventdata: {},
+    dialogVisible: {},
+    faceunid: {}
+  },
+  created() {},
+  watch: {
+    faceunid() {
+      this.page.offset = 0;
+      this.page.currentPage = 1;
+      this.showAccompany();
+    }
+  }
+};
+</script>
+<style lang="stylus" scoped>
+
+.accomimg {
+    height: 60px;
+    border-radius:5px;
+}
+</style>

web/src/views/Search/comparisonpic.vue

+<!---抓拍记录--->
+<template>
+  <div >
+    <div >
+      <el-upload
+        class="avatar-uploader"
+        action="https://jsonplaceholder.typicode.com/posts/"
+        :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>
+       <el-upload
+        class="avatar-uploader"
+        action="https://jsonplaceholder.typicode.com/posts/"
+        :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>
+      <div class="">
+          <el-button class="search-btn">查询</el-button>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      address: "",
+      camera: "",
+      value: "",
+      value1: "",
+      imageUrl:'',
+      dbname:''
+    };
+  },
+  methods: {
+     handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+  },
+  created() {}
+};
+</script>
+<style lang="stylus" scoped>
+.pic-box{
+  background: #fff;
+  display flex
+  height calc(100vh - 110px)
+  .pic-left-box{
+    width 230px
+    box-shadow 3px 0px 3px rgba(0,0,0,.4)
+  }
+}
+.search-btn{
+  margin 50px
+}
+.pic-search-box{
+  width 90%
+  margin 0 auto
+  color #333
+}
+ .avatar-uploader ,.el-upload {
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    margin 20px
+    border: 1px dashed #d9d9d9;
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+</style>

web/src/views/Search/facedb/adddbs.vue

+<template>
+ <el-dialog
+  title="添加人员"
+  :visible.sync="dialogVisible"
+  width="40%"
+  top="90px"
+  class="add-dialog"
+  :before-close="handleClose">
+  <div class="body-box">
+    <div class="pic-box">
+      <el-upload
+        ref="upload"
+        action=""
+        :http-request="uploadimg"
+        list-type="picture-card"
+        :on-preview="handlePictureCardPreview"
+        :on-remove="handleRemove">
+        <i class="el-icon-plus"></i>
+      </el-upload>
+    </div>
+    <div class="content-box mt10">
+      <el-form :model="faceForm" :rules="rules" ref="faceForm" label-width="100px" class="demo-faceForm">
+        <el-col :span="12">
+          <el-form-item label="姓名" prop="name">
+            <el-input v-model="faceForm.name"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="性别" prop="region">
+            <el-select v-model="faceForm.sex" placeholder="">
+              <el-option label="男" value="shanghai"></el-option>
+              <el-option label="女" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="出生年月" prop="name">
+              <el-date-picker
+                v-model="birthday"
+                type="datetime"
+                placeholder="选择日期时间">
+              </el-date-picker>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="证件类型" prop="region">
+            <el-select v-model="faceForm.cartype" placeholder="">
+              <el-option label="社保库1" value="shanghai"></el-option>
+              <el-option label="社保库2" value="beijing"></el-option>
+            </el-select>
+
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+           <el-form-item label="证件号" prop="name">
+            <el-input v-model="faceForm.carnum"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+            <el-form-item label="籍贯" >
+              <el-col :span="11">
+                <el-select v-model="faceForm.province" @change="getCity" placeholder="省份">
+                  <el-option v-for="item in provenceData" :key="item.code" :label="item.name" :value="item.code"></el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="2" class="cc"> /</el-col>
+              <el-col :span="11">
+                <el-select v-model="faceForm.city" placeholder="城市">
+                  <el-option v-for="item in cityData" :label="item.name" :key="item.code"  :value="item.code"></el-option>
+                </el-select>
+              </el-col>
+            </el-form-item>
+        </el-col>
+        <el-col :span="12">
+           <el-form-item label="地区" prop="name">
+            <el-input v-model="faceForm.area"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="name">
+            <el-input v-model="faceForm.phone"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12"></el-col>
+      </el-form>
+    </div>
+  </div>
+  <div>
+
+  </div>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="submitFace">确 定</el-button>
+  </span>
+</el-dialog>
+
+</template>
+
+<script>
+export default {
+ data() {
+      return {
+        provenceData:[],
+        Substate:1,
+        cityData:[],
+        dialogVisible: false,
+        faceunid:'',
+        fileList:[],
+        faceForm: {
+          name: '',
+          sex: '',
+          date: '',
+          cartype:'',
+          carnum:'',
+          address:'',
+          area:'',
+          phone:'',
+          province:'',
+          city:''
+        },
+        rules: {
+          name: [
+            { required: true, message: '请输入活动名称', trigger: 'blur' },
+            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          ],
+          region: [
+            { required: true, message: '请选择活动区域', trigger: 'change' }
+          ],
+          date1: [
+            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          ],
+          date2: [
+            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
+          ],
+          type: [
+            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
+          ],
+          resource: [
+            { required: true, message: '请选择活动资源', trigger: 'change' }
+          ],
+          desc: [
+            { required: true, message: '请填写活动形式', trigger: 'blur' }
+          ]
+        }
+      };
+    },
+  methods: {
+    handlePictureCardPreview(){
+
+    },
+    handleRemove(file, fileList) {
+      //移除图片
+      this.axios.delete(this.API.faceweb.removepic(this.curEditData.unid,file.unid)).then(function(response) {});
+    },
+    init(){
+      this.dialogVisible = true
+    },
+    editTable(index, val) {
+      this.Substate = 2;
+      this.dialogVisible = true;
+      this.getBlackInfo(val.unid);
+      this.faceunid = val.unid;
+    },
+     getBlackInfo(unid) {
+      this.axios.get(this.API.faceweb.getFaces(unid)).then((response)=> {
+        this.initEditFaceInfo(response.data);
+      });
+    },
+    initEditFaceInfo(data) {
+      for (var i = 0; i < data.pics.length; i++) {
+        data.pics[i].url = data.pics[i].pic_url;
+      }
+      this.curEditData = data;
+      this.faceForm.name = data.name;
+      var pice = [];
+      this.faceForm.crucial_type = data.crucial_type;
+      this.faceForm.birthday = data.birthday;
+      this.faceForm.card_type = "111";
+      this.faceForm.card_id = data.card_id;
+      this.faceForm.sex = data.sex;
+      this.faceForm.mphone = data.mphone;
+      this.faceForm.province = data.province;
+      this.faceForm.homephone = "";
+      this.faceForm.note = data.note;
+      this.fileList = data.pics;
+      this.faceForm.handle_state = data.handle_state;
+      this.faceForm.crime_act = data.crime_act;
+      this.faceForm.resident_unid = Number(data.resident_unid)
+      this.getCity(data.province, data.city);
+    },
+    initFaceInfo() {
+      this.faceForm.name = "";
+      this.faceForm.crucial_type = "";
+      this.faceForm.birthday = "";
+      this.faceForm.card_type = "";
+      this.faceForm.card_id = "";
+      this.faceForm.sex = "";
+      this.faceForm.mphone = "";
+      this.faceForm.province = "";
+      this.faceForm.city = "";
+      this.faceForm.homephone = "";
+      this.faceForm.crime_act = "";
+      this.faceForm.note = "";
+      this.faceForm.handle_state = "";
+      this.faceForm.resident_unid = "";
+    },
+    successImg(response, file, fileList) {
+      //图片上传成功
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+    },
+    handleClose(done) {
+      done()
+    },
+    saveAddPersonnel() {
+      this.axios.post(this.API.faceweb.faces, this.faceForm).then((response) => {
+        this.savePersonnelImg(response.data.unid);
+        this.$refs.upload.clearFiles();
+        this.$refs.c1.initTable();
+        this.$message({
+          message: "添加人员成功！",
+          type: 'success'
+        })
+      });
+    },
+    saveEditPersonnel() {
+      var Vthis = this;
+      var birthdayDate= new Date(new Date(this.faceForm.birthday).getTime());
+      this.faceForm.birthday = this.faceForm.birthday?this.timeForm(birthdayDate).split(' ')[0]:'';
+      this.axios.post(this.API.faceweb.faces +'/' + this.faceunid, this.faceForm).then((response) => {
+          this.$refs["personform"].resetFields();
+          this.$refs.c1.initTable();
+        });
+        let messageInfo = "";
+        if(this.Substate == 2) messageInfo ="修改人员成功！"
+        this.$message({
+          message: messageInfo,
+          type: 'success'
+        })
+    },
+    savePersonnelImg(faceunid) {
+      this.$refs.upload.uploadFiles.forEach((ele) => {
+        this.baseImg(ele.raw, (srcs) => {
+          var data = {
+            pic_base64: srcs,
+            format: ele.raw.type.split("/")[1],
+            ofilename: ele.name,
+            t_format: "jpg"
+          };
+          this.sendImg(faceunid, data);
+        });
+      }, this);
+    },
+    editPersonnelImg(file) {
+      this.baseImg(file, (srcs) => {
+        var data = {
+          pic_base64: srcs,
+          format: file.type.split("/")[1],
+          ofilename: file.name,
+          t_format: "jpg"
+        };
+        this.sendImg(this.faceunid, data);
+      });
+    },
+    sendImg(faceunid, data) {
+      this.axios.post(this.API.faceweb.sendImg(faceunid), data).then((response)=> {
+      });
+    },
+    uploadimg(file) {
+      if (this.Substate == 2) {
+        this.editPersonnelImg(file.file);
+      }
+    },
+    baseImg(file, callback) {
+      var srcs = "";
+      var reader = new FileReader();
+      if (file) {
+        reader.readAsDataURL(file);
+      }
+      reader.onloadend = function() {
+        srcs = reader.result.split(",")[1];
+        if (callback) callback(srcs);
+      };
+    },
+    resetForm(formName) {
+      this.$refs.faceForm.resetFields();
+    },
+      /* 获取城市*/
+    getCity(val, citycod) {
+      this.faceForm.province = val;
+      this.faceForm.city = "";
+      var Vthis = this;
+      var provenceuid = "";
+      if (val) {
+        for (var i = 0; i < this.provenceData.length; i++) {
+          if (val == this.provenceData[i].code) {
+            provenceuid = this.provenceData[i].province_unid;
+          }
+        }
+        this.axios.get(this.API.url +"/codes/countries/0E229CD043/provinces/" +provenceuid +"/cities").then(function(response) {
+            Vthis.cityData = response.data.list_data;
+            if (citycod) {
+              Vthis.form.city = citycod;
+            }
+          });
+      }
+    },
+    submitFace() {
+      this.$refs["faceForm"].validate(valid => {
+        if (valid) {
+          if (this.Substate == 1) this.saveAddPersonnel();
+          if (this.Substate == 2) this.saveEditPersonnel();
+          this.dialogVisible = false;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  created(){
+    this.axios.get(this.API.url + "/codes/countries/0E229CD043/provinces").then((response)=> {
+        this.provenceData = response.data.list_data;
+    });
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+
+</style>>

web/src/views/Search/facedb/database.vue

+<template>
+  <div  class="template-box content_div_main">
+    <el-form :inline="true" class="search-form" size="small">
+         <el-form-item label="人口库：">
+          <el-select v-model="dbname" class="br0 bra bla">
+            <el-option value="" label="请选择库类型"></el-option>
+            <el-option v-for="item in crucialData"  :key="item.unid" :value="item.code" :label="item.name"></el-option>
+          </el-select>
+        </el-form-item>
+         <el-form-item label="姓名：">
+          <el-input type="text" class="br0 bla bra" v-model="facename" placeholder="请输入姓名"></el-input>
+        </el-form-item>
+         <el-form-item label="证件号：">
+          <el-input type="text" class="bla" placeholder="请输入证件号" v-model="facecard_id"></el-input>
+        </el-form-item>
+         <el-form-item label="性别：">
+           <el-select v-model="facesex" class="br0 bra bla">
+            <el-option value="" label="请选择性别"></el-option>
+            <el-option :value="1" label="男"></el-option>
+            <el-option :value="2" label="女"></el-option>
+          </el-select>
+        </el-form-item>
+         <el-form-item>
+          <el-button  class="search-btn" @click="searchFace" icon="el-icon-search">查询</el-button>
+          <el-button  class="search-btn ml10"  @click="addFaceBlack()" icon="el-icon-edit">添加</el-button>
+        </el-form-item>
+      </el-form>
+    <el-dialog title="人员管理" :visible.sync="dialogVisible" size="small" >
+      <el-row>
+        <el-upload ref="upload" action="" :file-list="fileList" :http-request="uploadimg" list-type="picture-card" :before-upload="beforeAvatarUpload" :on-progress="successImg" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-row>
+      <el-form :model="form" ref="personform" class="mt10" :rules="rules">
+        <el-row>
+          <div style="overflow:hidden">
+              <el-col :span="12">
+            <el-form-item label="姓名" :label-width="formLabelWidth">
+              <el-input v-model="form.name" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="库类型" prop="crucial_type" :label-width="formLabelWidth" :rules="[ { required: true, message: '请选择库类型'}]">
+              <el-select v-model="form.crucial_type" type="crucial_type" placeholder="请选择库类型">
+                <el-option v-for="item in crucialData" :key="item.code" :label="item.name" :value="item.code"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          </div>
+          <div style="overflow:hidden">
+             <el-col :span="12">
+            <el-form-item label="人员类型" :label-width="formLabelWidth">
+              <el-input v-model="form.crime_act" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="性别" :label-width="formLabelWidth">
+              <el-select v-model="form.sex" placeholder="请选择性别">
+                <el-option label="男" value="1"></el-option>
+                <el-option label="女" value="2"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          </div>
+          <div style="overflow:hidden">
+          <el-col :span="12">
+            <el-form-item label="生日" :label-width="formLabelWidth">
+              <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="证件类型" :label-width="formLabelWidth">
+              <el-select v-model="form.card_type" placeholder="请选择证件类型">
+                <el-option v-for="item in cartypeData" :key="item.code" :label="item.name" :value="item.code"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          </div>
+           <div style="overflow:hidden">
+          <el-col :span="12">
+            <el-form-item label="证件号" prop="card_id" :label-width="formLabelWidth">
+              <el-input  v-model="form.card_id" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号" prop="mphone" :label-width="formLabelWidth">
+              <el-input v-model="form.mphone" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col>
+           </div>
+            <div style="overflow:hidden">
+          <el-col :span="12">
+            <el-form-item label="籍贯" :label-width="formLabelWidth">
+              <el-col :span="11">
+                <el-select v-model="form.province" @change="getCity" placeholder="省份">
+                  <el-option v-for="item in provenceData" :key="item.code" :label="item.name" :value="item.code"></el-option>
+                </el-select>
+              </el-col>
+              <el-col :span="2" class="cc">/</el-col>
+              <el-col :span="11">
+                <el-select v-model="form.city" placeholder="城市">
+                  <el-option v-for="item in cityData" :label="item.name" :key="item.code"  :value="item.code"></el-option>
+                </el-select>
+              </el-col>
+            </el-form-item>
+          </el-col>
+           <el-col :span="12">
+            <el-form-item label="地区" :label-width="formLabelWidth">
+              <el-select v-model="form.resident_unid" placeholder="请选择">
+                <el-option v-for="item in communityData"  :key="item.unid" :value="item.unid" :label="item.org_name"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+            </div>
+          <!-- <el-col :span="12">
+            <el-form-item label="座机号" :label-width="formLabelWidth">
+              <el-input v-model="form.homephone" auto-complete="off"></el-input>
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="24">
+            <el-form-item label="备注" :label-width="formLabelWidth">
+              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.note"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="subMitBlack">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-row class="mt20">
+      <facetable @edit="editTable" :dbname="dbname" :facename="facename" :facesex="facesex" :facecardid="facecard_id" :communityunid="communityunid" ref="c1"></facetable>
+    </el-row>
+    <el-dialog v-model="dialogVisible1" size="tiny">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Facetable from "./faceTable";
+export default {
+  data() {
+    return {
+      Substate: 1,
+      dbname: "",
+      curEditData: [], //当前编辑的数据
+      facename: "",
+      facesex: "",
+      facecard_id: "",
+      fileList: [],
+      activeIndex: "peopleImg",
+      dialogImageUrl: "",
+      dialogVisible: false,
+      dialogVisible1: false,
+      count: [],
+      cityData: [],
+      provenceData: [],
+      faceunid: "",
+      communityData:"",
+      communityunid:"",
+      cartypeData:"",
+      crucialData:"",
+      form: {
+        name: "",
+        crucial_type: "",
+        birthday: "",
+        card_type: "",
+        card_id: "",
+        sex: "",
+        mphone: "",
+        province: "",
+        city: "",
+        homephone: "",
+        note: "",
+        crime_act:"",
+        resident_unid:''
+      },
+      formLabelWidth: "120px",
+      pickerOptions0: {},
+      rules: {
+          card_id: [
+            { min: 0, max: 22, message: '请正确输入身份证号码！', trigger: 'blur' }
+          ],
+           mphone: [
+            { min: 0, max: 13, message: '请正确输入手机号！', trigger: 'blur' }
+          ],
+        }
+    };
+  },
+  components: {
+    Facetable
+  },
+  computed: {},
+  methods: {
+    //搜索人员
+    searchFace() {
+      this.$refs.c1.initTable(); //调用子组件搜索方法
+    },
+    editTable(index, val) {
+      this.Substate = 2;
+      this.dialogVisible = true;
+      this.getBlackInfo(val.unid);
+      this.faceunid = val.unid;
+    },
+    /* 获取城市*/
+    getCity(val, citycod) {
+      this.form.province = val;
+      this.form.city = "";
+      var Vthis = this;
+      var provenceuid = "";
+      if (val) {
+        for (var i = 0; i < this.provenceData.length; i++) {
+          if (val == this.provenceData[i].code) {
+            provenceuid = this.provenceData[i].province_unid;
+          }
+        }
+        this.axios.get(this.API.url +"/codes/countries/0E229CD043/provinces/" +provenceuid +"/cities").then(function(response) {
+            Vthis.cityData = response.data.list_data;
+            if (citycod) {
+              Vthis.form.city = citycod;
+            }
+          });
+      }
+    },
+    addFaceBlack() {
+      this.dialogVisible = true;
+      this.count = [];
+      this.fileList = [];
+      this.initFaceInfo();
+      this.Substate = 1;
+
+    },
+    handleRemove(file, fileList) {
+      //移除图片
+      this.axios
+        .delete(this.API.this.API.faceweb +
+            "/crucial_face_pics/" +
+            this.curEditData.unid +
+            "/pics/" +
+            file.unid
+        )
+        .then(function(response) {});
+    },
+    handlePictureCardPreview(file) {
+      //预览大图
+      this.dialogImageUrl = file.url;
+      this.dialogVisible1 = true;
+    },
+    successImg(response, file, fileList) {
+      //图片上传成功
+    },
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+    },
+    uploadimg(file) {
+      if (this.Substate == 2) {
+        this.editPersonnelImg(file.file);
+      }
+    },
+    subMitBlack() {
+      this.$refs["personform"].validate(valid => {
+        if (valid) {
+          if (this.Substate == 1) this.saveAddPersonnel();
+          if (this.Substate == 2) this.saveEditPersonnel();
+          this.dialogVisible = false;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    getBlackInfo(unid) {
+      var Vthis = this;
+      this.axios.get(this.API.faceweb + "/faces/" + unid).then(function(response) {
+        Vthis.initEditFaceInfo(response.data);
+      });
+    },
+    initEditFaceInfo(data) {
+      for (var i = 0; i < data.pics.length; i++) {
+        data.pics[i].url = data.pics[i].pic_url;
+      }
+      this.curEditData = data;
+      this.form.name = data.name;
+      var pice = [];
+      this.form.crucial_type = data.crucial_type;
+      this.form.birthday = data.birthday;
+      this.form.card_type = "111";
+      this.form.card_id = data.card_id;
+      this.form.sex = data.sex;
+      this.form.mphone = data.mphone;
+      this.form.province = data.province;
+      this.form.homephone = "";
+      this.form.note = data.note;
+      this.fileList = data.pics;
+      this.form.handle_state = data.handle_state;
+      this.form.crime_act = data.crime_act;
+      this.form.resident_unid = Number(data.resident_unid)
+      this.getCity(data.province, data.city);
+    },
+    initFaceInfo() {
+      this.form.name = "";
+      this.form.crucial_type = "";
+      this.form.birthday = "";
+      this.form.card_type = "";
+      this.form.card_id = "";
+      this.form.sex = "";
+      this.form.mphone = "";
+      this.form.province = "";
+      this.form.city = "";
+      this.form.homephone = "";
+      this.form.crime_act = "";
+      this.form.note = "";
+      this.form.handle_state = "";
+      this.form.resident_unid = "";
+    },
+    saveAddPersonnel() {
+      var Vthis = this;
+      this.axios.post(this.API.faceweb + "/faces", this.form).then(function(response) {
+        Vthis.savePersonnelImg(response.data.unid);
+        Vthis.$refs.upload.clearFiles();
+        Vthis.$refs.c1.initTable();
+        Vthis.$message({
+          message: "添加人员成功！",
+          type: 'success'
+        })
+      });
+    },
+    saveEditPersonnel() {
+      var Vthis = this;
+      var birthdayDate= new Date(new Date(this.form.birthday).getTime());
+      this.form.birthday = this.form.birthday?this.timeForm(birthdayDate).split(' ')[0]:'';
+      this.axios.post(this.API.faceweb + "/faces/" + Vthis.faceunid, this.form).then(function(response) {
+          Vthis.$refs["personform"].resetFields();
+          Vthis.$refs.c1.initTable();
+        });
+        let messageInfo = "";
+        if(this.Substate == 2) messageInfo ="修改人员成功！"
+        this.$message({
+          message: messageInfo,
+          type: 'success'
+        })
+    },
+    savePersonnelImg(faceunid) {
+      var Vthis = this;
+      this.$refs.upload.uploadFiles.forEach(function(ele) {
+        Vthis.baseImg(ele.raw, function(srcs) {
+          var data = {
+            pic_base64: srcs,
+            format: ele.raw.type.split("/")[1],
+            ofilename: ele.name,
+            t_format: "jpg"
+          };
+          Vthis.sendImg(faceunid, data);
+        });
+      }, this);
+    },
+    editPersonnelImg(file) {
+      var Vthis = this;
+      this.baseImg(file, function(srcs) {
+        var data = {
+          pic_base64: srcs,
+          format: file.type.split("/")[1],
+          ofilename: file.name,
+          t_format: "jpg"
+        };
+        Vthis.sendImg(Vthis.faceunid, data);
+      });
+    },
+    sendImg(faceunid, data) {
+      this.axios
+        .post(this.API.faceweb + "/crucial_face_pics/" + faceunid + "/pics", data)
+        .then(function(response) {});
+    },
+    baseImg(file, callback) {
+      var srcs = "";
+      var reader = new FileReader();
+      if (file) {
+        reader.readAsDataURL(file);
+      }
+      reader.onloadend = function() {
+        srcs = reader.result.split(",")[1];
+        if (callback) callback(srcs);
+      };
+    },
+     initDbData(){
+         this.axios.get(this.API.url + "/codes/custom/cates/4DD23AF66E/codes").then((response)=> {
+           this.crucialData = response.data.list_data;
+      });
+     },
+     initcartypeData(){
+         this.axios.get(this.API.url + "/codes/simple/cates/09BB973F92/codes").then((response)=> {
+           this.cartypeData = response.data.list_data;
+      });
+     },
+   },
+  created() {
+    var Vthis = this;
+    this.axios
+      .get(this.API.url + "/codes/countries/0E229CD043/provinces")
+      .then(function(response) {
+        Vthis.provenceData = response.data.list_data;
+      });
+    this.initDbData();
+    this.initcartypeData();
+  },
+  mounted() {}
+};
+</script>
+<style lang="stylus" scoped>
+.el-date-editor.el-input {
+  width: 100%;
+}
+
+.cc {
+  text-align: center;
+}
+
+</style>

web/src/views/Search/facedb/faceDetail.vue

+<template>
+  <div>
+    <el-dialog title="人员详情" :visible.sync="detaildialong" v-loading.body="loading" width="60%" :before-close="closedialong">
+      <div class="detail-aline"></div>
+      <el-row class="alarm-info-box">
+        <el-col :span="14">
+          <el-col :span="12">
+            <span class="info-label">
+              <span class="info-label-name">姓名:</span>
+            </span>
+            <span class="info-text">{{faceInfo.name}}</span>
+          </el-col>
+          <el-col :span="12" class="mt10 clear-both">
+            <span class="info-label">
+              <span class="info-label-name">性别:</span>
+            </span>
+            <span class="info-text">{{faceInfo.sex |sexfn}}</span>
+          </el-col>
+          <el-col :span="12" class="mt10 clear-both">
+            <span class="info-label">
+              <span class="info-label-name">生日:</span>
+            </span>
+            <span class="info-text">{{faceInfo.birthday}}</span>
+          </el-col>
+          <el-col :span="12" class="mt10 clear-both">
+            <span class="info-label">
+              <span class="info-label-name">证件类型:</span>
+            </span>
+            <span class="info-text">{{getcardtype(faceInfo.card_type)}}</span>
+          </el-col>
+          <el-col :span="12" class="mt10 clear-both">
+            <span class="info-label">
+              <span class="info-label-name">证件号:</span>
+            </span>
+            <span class="info-text">{{faceInfo.card_id}}</span>
+          </el-col>
+          <el-col :span="12" class="mt10 clear-both">
+            <span class="info-label">
+              <span class="info-label-name">手机号:</span>
+            </span>
+            <span class="info-text">{{faceInfo.mphone}}</span>
+          </el-col>
+          <el-col :span="12" class="mt10 clear-both">
+            <span class="info-label">
+              <span class="info-label-name">籍贯:</span>
+            </span>
+            <span class="info-text">{{showCity(faceInfo.province,faceInfo.city)}}</span>
+          </el-col>
+          <!-- 户籍库详细信息 -->
+          <el-row v-show="faceInfo.extra_info" v-if="faceInfo.extra_info">
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">人员编号:</span>
+              </span>
+              <span class="info-text" :title="faceInfo.extra_info.rybh">{{faceInfo.extra_info.rybh}}</span>
+            </el-col>
+
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">姓名拼音:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xmpy}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">民族:</span>
+              </span>
+              <span class="info-text">{{getCode(1004, faceInfo.extra_info.mzdm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">文化程度:</span>
+              </span>
+              <span class="info-text">{{getCode(1005, faceInfo.extra_info.whcddm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">血型:</span>
+              </span>
+              <span class="info-text">{{getCode(1006, faceInfo.extra_info.xxdm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">职业:</span>
+              </span>
+              <span class="info-text">{{getCode(1012, faceInfo.extra_info.zylb)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">户籍区划:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.hjqh}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">户籍详址:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.hjxz}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">现住详址:</span>
+              </span>
+              <span class="info-text" :title="faceInfo.extra_info.xzzxz">{{faceInfo.extra_info.xzzxz}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">原始户籍详址:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.yshjxz}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">现住址区划:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xzzqh}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">原始现住址详址:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.ysxzzxz}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">现住址所属分局代码:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xzzssfjdm}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">现住址所属派出所代码:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xzzsspcsdm}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">现住址所属责任区代码:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xzzsszrqdm_1}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">现住址户编码:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xzzhuid}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">类型:</span>
+              </span>
+              <span class="info-text">{{getCode(1012,faceInfo.extra_info.type)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">采集人员:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.cjry}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">采集时间:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.cjsj}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">固定电话:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.gddh}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">关注人员类型:</span>
+              </span>
+              <span class="info-text">{{getCode(1067,faceInfo.extra_info.gzrylx)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">与责任人关系代码:</span>
+              </span>
+              <span class="info-text">{{getCode(1009,faceInfo.extra_info.yzrrgxdm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">状态:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.zt}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">对应警综系统的序列号:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xlh}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">对应警综的系统时间:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.xtsj}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">联系电话:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.lxdh}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">婚姻状况:</span>
+              </span>
+              <span class="info-text">{{getCode(1007,faceInfo.extra_info.hyzkdm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">服务场所:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.fwcs}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">老社区警务房屋编码:</span>
+              </span>
+              <span class="info-text" :title="faceInfo.extra_info.xzzfwbm">{{faceInfo.extra_info.xzzfwbm}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">身高cm:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.sg}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">曾用名:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.cym}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">兵役状况代码:</span>
+              </span>
+              <span class="info-text">{{getCode(1021, faceInfo.extra_info.byzkdm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">宗教信仰代码:</span>
+              </span>
+              <span class="info-text">{{getCode(1020, faceInfo.extra_info.zjxydm)}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">联系电话修改备份20160729:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.lxdh1}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">是否导入20160729:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.bz1}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">原现住址所属责任区代码:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.yxzzsszrqdm}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">责任区代码更新:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.zrqdmgx}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">入库时间:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.rksj}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">与户主关系代码:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.yhzgxdm}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">移动端操作时间:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.m_czsj}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">移动端操作标识:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.m_czbs}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">移动端操作人员:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.m_czry}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">移动端操作类型:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.m_czlx}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">更新时间:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.gxsj}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">更新人员:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.gxry}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">从业人员单位名称:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.cyrydwmc}}</span>
+            </el-col>
+            <el-col v-show="faceInfo.extra_info" :span="12" class="mt10 clear-both">
+              <span class="info-label">
+                <span class="info-label-name">从业人员单位id:</span>
+              </span>
+              <span class="info-text">{{faceInfo.extra_info.cyrydwid}}</span>
+            </el-col>
+          </el-row>
+          <!-- 户籍人员详情 END -->
+        </el-col>
+        <el-col :span="10">
+          <el-col :span="7" v-for="path in faceInfo.pics" :key="path.unid" class="pic-box">
+            <img :src="path.url_path" alt="">
+          </el-col>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closedialong">取 消</el-button>
+        <el-button type="primary" @click="closedialong">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  var codeNation = 1004; //民族
+  var codeCulture = 1005; //文化程度
+  var codeBlood = 1006; //血型
+  var codeRelationTOhead = 1009; //与户主关系
+  var codePersonType = 1012; //人员类别
+  var profession = 1013; //职业
+  var faith = 1020; //宗教信仰
+  var army = 1021; //服兵役情况
+  var personType = 1067; //关注人员类型
+  var marriage = 1007; //婚姻状况
+  export default {
+    data() {
+      return {
+        disabled: true,
+        faceInfo: [],
+        loading: true,
+        cData: "",
+        dbData: [],
+        cartypeData: []
+      };
+    },
+    props: {
+      facedata: {},
+      detaildialong: {}
+    },
+    methods: {
+      closedialong() {
+        this.$emit("closedialong");
+      },
+      getFaceDetail(data) {
+        var Vthis = this;
+        debugger
+        this.axios.get(this.API.faceweb + "/faces/" + data.unid).then(function (response) {
+          Vthis.faceInfo = response.data;
+          Vthis.loading = false;
+        });
+      },
+      getcardtype(data) {
+        let cardname = "";
+        this.cartypeData.forEach(function (ele) {
+          if (ele.code == data) {
+            cardname = ele.name;
+          }
+        }, this);
+        return cardname;
+      },
+      initDbData() {
+        this.axios
+          .get(this.API.url + "/codes/custom/cates/4DD23AF66E/codes")
+          .then(response => {
+            this.dbData = response.data.list_data;
+          });
+      },
+      initcartypeData() {
+        this.axios
+          .get(this.API.url + "/codes/simple/cates/09BB973F92/codes")
+          .then(response => {
+            this.cartypeData = response.data.list_data;
+          });
+      }
+    },
+    watch: {
+      facedata(val) {
+        this.getFaceDetail(val);
+        this.loading = true;
+      }
+    },
+    created() {
+      this.initDbData();
+      this.initcartypeData();
+    }
+  };
+
+</script>
+<style lang="stylus" scoped>
+  .alarm-info-box {
+    max-height: 500px;
+    overflow: auto;
+  }
+
+  .pic-box {
+    margin-right: 5%;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+</style>
+

web/src/views/Search/facedb/faceTable.vue

+<template>
+  <div>
+    <el-table  class="table_m_type" :data="tableData" height="700">
+       <div slot="empty">
+          <div class="no-data-box">
+            <img src="../../../assets/img/nodata.png" alt="暂无数据"/>
+            <div>暂无数据</div>
+          </div>
+        </div>
+      <el-table-column label="序号" type="index" width="120"></el-table-column>
+      <el-table-column label="姓名" property="name" type="name" width="180"></el-table-column>
+      <el-table-column label="性别" property="sex" :formatter="setSex" width="180"></el-table-column>
+      <el-table-column label="出生日期" property="birthday" :formatter="setBirthday"> </el-table-column>
+      <el-table-column label="身份证号" property="card_id"></el-table-column>
+      <el-table-column label="籍贯" property="provence" :formatter="setCity">
+      </el-table-column>
+      <el-table-column label="操作" width="300px" align="center">
+        <template slot-scope="scope">
+          <div class="tab-btn-box">
+            <span class="table-btn" size="" @click="handleSee(scope.$index, scope.row)">查看详情</span>
+            <span class="table-btn" size="" @click="handleEdit(scope.$index, scope.row)">编辑人像</span>
+            <span class="table-btn dengers" size="" @click="handleDelete(scope.$index, scope.row)">删除</span>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="block mt10 ml0">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" background
+        :page-size="limit" layout="total,prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+    <div>
+      <faceDetail :facedata="curData"  :detaildialong="detaildialong" @closedialong="closedetail"></faceDetail>
+    </div>
+  </div>
+</template>
+<script>
+  import faceDetail from './faceDetail'
+  export default {
+    data() {
+      return {
+        tableData: [],
+        currentPage: 1,
+        limit: 20,
+        total: 0,
+        offset: 0,
+        loading: false,
+        provenceName: "",
+        cityName: "",
+        detaildialong: false,
+        curData: '',
+        cData: '',
+      };
+    },
+    props: {
+      dbname: {
+        //库名称
+        type: String
+      },
+      facename: {
+        //姓名
+        type: String
+      },
+      facesex: {
+        //性别
+        type: String
+      },
+      facecardid: {
+        //身份证号
+      },
+      communityunid: {
+        //地区id
+      }
+    },
+    methods: {
+      closedetail() {
+        this.detaildialong = false;
+      },
+      handleSee(index, row) {
+        this.detaildialong = true;
+        this.curData = row;
+      },
+      handleEdit(index, row) {
+        this.$emit("edit", index, row);
+      },
+      handleDelete(index, row) {
+        var Vthis = this;
+        var Athis = "";
+        var a = this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          })
+          .then(() => {
+            Athis = this;
+            Vthis.axios
+              .delete(this.API.faceweb + "/faces/" + row.unid, {
+                is_active: false
+              })
+              .then(function (response) {
+                Vthis.initTable();
+                Athis.$message({
+                  type: "success",
+                  message: "删除成功!"
+                });
+              });
+          })
+          .catch(() => {
+            this.$message({
+              type: "info",
+              message: "已取消删除"
+            });
+          });
+      },
+      setCity(row, column, cellValue) {
+        return this.showCity(row.province, row.city)
+      },
+      setSex(row, column, cellValue) {
+        var sex = "";
+        if (cellValue == "1") sex = "男";
+        if (cellValue == "2") sex = "女";
+        return sex;
+      },
+      setBirthday(row, column, cellValue) {
+        var data = "";
+        if (cellValue) data = cellValue.split(" ")[0];
+        return data;
+      },
+      handleSizeChange(val) {
+        alert(val);
+      },
+      handleCurrentChange(val) {
+        this.offset = (val - 1) * this.limit;
+        this.initTable();
+      },
+      initTable() {
+        var Vthis = this;
+        this.axios
+          .get(this.API.faceweb + "/faces/crucial_faces", {
+            params: {
+              offset: Vthis.offset,
+              limit: this.limit,
+              is_crucial: true,
+              is_active: true,
+              sex: Vthis.facesex,
+              name__like: Vthis.facename,
+              card_id__like: Vthis.facecardid,
+              crucial_type: Vthis.dbname,
+              resident_unids: this.communityunid,
+            }
+          }).then( (response) =>{
+            Vthis.tableData = response.data.list_data;
+            Vthis.total = response.data.total_num;
+          });
+      }
+    },
+    components: {
+      faceDetail
+    },
+    computed: {},
+    created() {
+      this.initTable();
+    }
+  };
+
+</script>
+<style lang="stylus" scoped>
+  .mb20 {
+    margin-bottom: 50px;
+  }
+
+  .pages {
+    float: right;
+    margin: 20px 15px 30px 0;
+  }
+
+</style>
+

web/src/views/Search/morePic.vue

+<!---多人脸搜索--->
+<template>
+  <div >
+    <div >
+      <el-upload
+        class="upload-demo"
+        drag
+        action=""
+        :http-request="uploadsearchimg"
+        multiple>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
+      </el-upload>
+      <div class="">
+          <el-button class="search-btn" @click="searchPic()">查询</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      address: "",
+      camera: "",
+      value: "",
+      value1: "",
+      imageUrl:'',
+      dbname:''
+    };
+  },
+  methods: {
+     handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+  },
+  created() {}
+};
+</script>
+<style lang="stylus" scoped>
+.pic-box{
+  background: #fff;
+  display flex
+  height calc(100vh - 110px)
+  .pic-left-box{
+    width 230px
+    box-shadow 3px 0px 3px rgba(0,0,0,.4)
+  }
+}
+.upload-demo{
+  margin-left 10%
+}
+.search-btn{
+  margin 50px
+}
+.pic-search-box{
+  width 90%
+  margin 0 auto
+  color #333
+}
+ .avatar-uploader ,.el-upload {
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    margin 20px
+    border: 1px dashed #d9d9d9;
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+</style>

web/src/views/Search/onePic.vue

+<!---单人脸搜索--->
+<template>
+  <div >
+    <div >
+      <el-upload
+        class="avatar-uploader"
+        action=""
+        :http-request="uploadsearchimg"
+        :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>
+      <div class="pic-search-box">
+        <el-select v-model="dbname" placeholder="选择比对库">
+           <el-option v-for="item in crucialData" :key="item.code" :label="item.name" :value="item.code"></el-option>
+        </el-select>
+      </div>
+      <div class="sim-box">
+        <span class="demonstration">相似度:</span>
+        <div class="similarity">
+          <el-slider v-model="similarity" ></el-slider>
+        </div>
+      </div>
+      <div class="pic-search-box">
+
+      </div>
+      <div class="">
+          <el-button class="search-btn" @click="searchPic()">查询</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      address: "",
+      camera: "",
+      value: "",
+      value1: "",
+      imageUrl:'',
+      dbname:'',
+      similarity:50,
+      crucialData:[]
+    };
+  },
+  methods: {
+     handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file){
+        const isJPG = file.type === "image/jpeg";
+        const isLt1M = file.size / 1024 / 1024 < 1;
+        if (!isJPG) {
+          this.$message.error("上传头像图片只能是 JPG 格式!");
+        }
+        if (!isLt1M) {
+          this.$message.error("上传头像图片大小不能超过 1MB!");
+        }
+        return isJPG && isLt1M;
+      },
+      uploadsearchimg(file){
+        var file = file;
+        this.base64Img(file).then(res => {
+          debugger
+          this.imageUrl = res.src
+          this.base64 = res.pic_base64
+        })
+      },
+      initDbData(){
+        this.faceapi.getFaceDbData().then(res => {
+          this.crucialData = res.list_data;
+        })
+     },
+      searchPic(){
+        let data = {
+          sessionId:this.$store.state.sessionId,
+          similarity:this.similarity,
+          crucial_type:this.dbname,
+          limit:20,
+          pics_base64:[this.base64]
+        }
+        console.log(data);
+        this.axios.post(this.API.faceweb + '/faces/image_search', data).then((res)=> {
+
+        });
+      }
+  },
+
+  created() {
+    this.initDbData()
+  }
+};
+</script>
+<style lang="stylus" scoped>
+.pic-box{
+  background: #fff;
+  display flex
+  height calc(100vh - 110px)
+  .pic-left-box{
+    width 230px
+    box-shadow 3px 0px 3px rgba(0,0,0,.4)
+  }
+}
+.search-btn{
+  margin 50px
+}
+.pic-search-box{
+  width 90%
+  margin 0 auto
+  color #333
+}
+.sim-box{
+  margin-top 15px
+  .demonstration,.similarity{
+    float left
+  }
+   .demonstration{
+     color #999
+     line-height 35px
+     padding-left 10px
+     font-size 14px;
+   }
+  .similarity{
+    width 160px
+    margin-left 6px
+  }
+}
+ .avatar-uploader ,.el-upload {
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    margin 0 10px
+    border: 1px dashed #d9d9d9;
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar-uploader{
+    margin 0 auto
+    width: 200px;
+    height: 200px;
+    .avatar{
+      height 100%
+      width 100%
+    }
+  }
+  .avatar {
+    width: 200px;
+    height: 200px;
+    display: block;
+  }
+</style>

web/src/views/Search/track.vue

+<template>
+  <div class="statusdetail">
+    <el-dialog
+      title="轨迹状态"
+      :visible.sync="show"
+      width="50%"
+      :before-close="handleClose">
+      <el-table :data="gridData">
+        <el-table-column property="date" label="日期"></el-table-column>
+        <el-table-column property="name" label="姓名"></el-table-column>
+        <el-table-column property="address" label="抓怕地址"></el-table-column>
+        <el-table-column property="address" label="抓怕图片">
+          <div class="img-box">
+           <img src="../videos/testimg/1.jpg" alt="">
+          </div>
+        </el-table-column>
+        <el-row>
+            <div class="block">
+                <el-pagination class="flr mt10" @current-change="handleCurrentChange" :current-page.sync="page.currentPage" :page-size="page.limit" layout="total,prev, pager, next, jumper" :total="page.total">
+                </el-pagination>
+            </div>
+        </el-row>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="show = false">取 消</el-button>
+        <el-button type="primary" @click="show = false">确 定</el-button>
+      </span>
+</el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show:false,
+      page: {
+        offset: 0,
+        currentPage: 1,
+        limit: 5,
+        total: 0
+      },
+      gridData: [{
+          date: '2016-05-02 16:00:00',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04 16:00:0',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-01 16:00:0',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-03 16:00:0',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }],
+    }
+  },
+    props: {
+        accunid: {},
+        faceunid: {}
+    },
+  methods:{
+    init(){
+      this.show = true;
+      console.log(data)
+      this.axios.get(this.API.url + '/faces/' + this.faceunid + '/face_events',{
+         params: {
+            limit: this.page.limit,
+            offset: this.page.offset,
+        }
+      })
+    },
+     handleCurrentChange(val) {
+        this.page.currentPage = val;
+        this.page.offset = (val - 1) * this.page.limit;
+        this.init();
+      },
+
+  },
+  mounted(){
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.activitychart{
+  height 40vh
+  width 40vw
+}
+.img-box{
+  height 60px
+  width 60px
+  img{
+    height 100%
+    width 100%
+  }
+}
+</style>

web/src/views/System/Logs/index.vue

+<template>
+  <div>
+    <div class="pass_content_left">
+      <el-form :inline="true" class="demo-form-inline" size="small">
+        <el-form-item>
+          <el-select class="commone_w" v-model="valueHpzl" clearable placeholder="号牌种类">
+            <el-option
+              v-for="item in optionsHpzl"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select
+            class="commone_w"
+            v-model="valuePoint"
+            clearable
+            filterable
+            placeholder="请选择采集点"
+          >
+            <el-option
+              v-for="item in optionsPoint"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select class="commone_w" v-model="valueXscd" clearable placeholder="行驶车道">
+            <el-option
+              v-for="item in optionsXscd"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select class="commone_w" v-model="valueXsfx" clearable placeholder="行驶方向">
+            <el-option
+              v-for="item in optionsXsfx"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-date-picker
+            v-model="value2"
+            type="datetime"
+            class="commone_w"
+            format=" yyyy-MM-dd HH:mm:ss"
+
+            placeholder="开始时间"
+            align="right"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-date-picker
+            v-model="value3"
+            type="datetime"
+            class="commone_w"
+            format=" yyyy-MM-dd HH:mm:ss"
+
+            placeholder="结束时间"
+            align="right"
+          ></el-date-picker>
+        </el-form-item>
+
+        <el-form-item>
+          <el-input placeholder="号牌号码"  v-model="whphm"  style="width:120px;"></el-input>
+        </el-form-item>
+        <el-button size="small" type="primary" @click="searchKakouList">查询</el-button>
+      </el-form>
+
+      <div class="table_m_type">
+        <el-table
+          v-loading="loading_status"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          @row-click="openRowDetails"
+          ref="passTable"
+          :data="tableData"
+          :row-class-name="tableRowClassName"
+          tooltip-effect="dark"
+          :height="tableHeight"
+          style="width: 100%;"
+          :default-sort="{prop: 'date', order: 'descending'}"
+        >
+          <el-table-column label="号牌号码" prop="carNo" width="120px" sortable>
+            <template slot-scope="scope">{{ scope.row.carNo }}</template>
+          </el-table-column>
+          <el-table-column label="号牌种类" prop="carType" width="120px" :formatter="formatHpzl"></el-table-column>
+
+          <el-table-column label="过车时间" prop="watchTime" width="160px" sortable>
+            <template slot-scope="scope">{{ scope.row.watchTime }}</template>
+          </el-table-column>
+
+          <el-table-column prop="addName" label="采集地点" show-overflow-tooltip></el-table-column>
+
+          <el-table-column prop="carRoad" label="行驶车道" :formatter="formatXscd"></el-table-column>
+
+          <el-table-column prop="direction" label="行驶方向" :formatter="formatXsfx"></el-table-column>
+
+          <el-table-column prop="nid" v-if="false" label="NID" width="0"></el-table-column>
+
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button size="mini" type="info" @click="showIllInfo(scope.$index, scope.row)">详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="mt5 paa_fy">
+        <el-pagination
+          size="small"
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @prev-click="handlePagePrevClick"
+          @next-click="handlePageNextclick"
+          :page-sizes="pageSizes"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next"
+          :total="pageTotal"
+        ></el-pagination>
+      </div>
+    </div>
+
+    <div class="pass_content_right">
+      <div class="right_img">
+        <vue-photo-zoom-pro :url="showPassInfo.pass_img" style="width:100%;height:100%;"></vue-photo-zoom-pro>
+      </div>
+
+      <div class="aduit-title ml5 mt10">
+        <span class="title">卡口信息</span>
+      </div>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">采集地点:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_addname}}</el-col>
+      </el-col>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">号牌号码:</el-col>
+        <el-col :span="10" class="aduit-info">
+          <el-input class="audit_plate_1" v-model="showPassInfo.pass_hphm"></el-input>
+        </el-col>
+      </el-col>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">号牌种类:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_hpzl}}</el-col>
+      </el-col>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">行驶车道:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_xscd}}</el-col>
+      </el-col>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">行驶方向:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_xsfx}}</el-col>
+      </el-col>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">采集时间:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_time}}</el-col>
+      </el-col>
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">采集设备:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_device}}</el-col>
+      </el-col>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">地点编号:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_addcode}}</el-col>
+      </el-col>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      //ico: 'R0lGODlhWAAfAJEAAAAAAP////8AAGZmZiH5BAAHAP8ALAAAAABYAB8AAALfhI+py+0PX5i02ouz3rxn44XiSHJgiaYqdq7uK7bwTFtyjcN3zqd7D4wBgkTSr4i87AQCCrPCfFoG1IGIWqtabUOLNPCVfgNY8rZTzp4py+Yk7B6nL9pp3T6f3O3KLrQJ6OYlqLdGUTaHuKZYwcjHdfEUOEh4aGiW4Vi4acnZeNkGBlb5Ror5mbmVqLrISgfq9zcqO4uxmup5enuKChk56RRHqKnbmktMnDvxI1kZRbpnmZccXTittXaUtB2gzY3k/U0ULg5EXs5zjo6jvk7T7q4TGz8+T28eka+/zx9RAAA7',
+      loading_status:false,
+      tableHeight: "30",
+      showPassInfo: {
+        pass_xsfx: "",
+        pass_time: "",
+        pass_device: "",
+        pass_xscd: "",
+        pass_hpzl: "",
+        pass_hphm: "",
+        pass_addname: "",
+        pass_img: "",
+        pass_addcode: ""
+      },
+
+      optionsHpzl: [], //号牌种类
+      valueHpzl: "",
+      optionsXscd: [], //车道
+      valueXscd: "",
+      optionsXsfx: [],
+      valueXsfx: "",
+
+      /**  -------分页组件-------- */
+      pageSizes: [10, 20, 200, 1000],
+      pageTotal: 0,
+      pageSize: 10,
+      currentPage4: 2,
+      pageNumber: 1,
+      /**------------------------- */
+      tableData: [],
+
+      value2: "",
+      value3: "",
+      optionsPoint: [],
+      valuePoint: "",
+      whphm:""
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      //把每一行的索引放进row
+      row.index = rowIndex;
+    },
+    onRowClick(row, event, column) {
+      //行点击消除new标记
+      var index = row.index;
+      var deleteIndex = Array.indexOf(this.showIndexArr, index);
+      if (deleteIndex != -1) {
+        this.showIndexArr.splice(deleteIndex, 1);
+      }
+    },
+
+    openRowDetails(row, column, event) {
+      this.showIllInfo(row.index, row);
+    },
+    //---查看详情页
+    showIllInfo(index, row) {
+      debugger;
+      var clxxData = this.tableData[index];
+      this.showPassInfo.pass_xsfx = this.GCOMMON.formatterInfo(
+        clxxData.direction,
+        this.optionsXsfx
+      );
+      this.showPassInfo.pass_time = clxxData.watchTime;
+      this.showPassInfo.pass_device = clxxData.deviceNo;
+      this.showPassInfo.pass_xscd = this.GCOMMON.formatterInfoChangInt(
+        clxxData.carRoad,
+        this.optionsXscd
+      );
+      this.showPassInfo.pass_hpzl = this.GCOMMON.formatterInfo(
+        clxxData.carType,
+        this.optionsHpzl
+      );
+      this.showPassInfo.pass_hphm = clxxData.carNo;
+      this.showPassInfo.pass_addname = clxxData.addName;
+      //this.showPassInfo.pass_img = clxxData.picurl1;
+      //this.getImageBase64(clxxData.picurl1);
+      //---图片判断下，如果是http格式的，那么我们直接访问
+      //this.showPassInfo.pass_img = "http://192.168.0.101:8089/image/1.jpg"
+      //--方式二--如果是ftp的图片，可以通过流返回
+      this.showPassInfo.pass_img = this.GCOMMON.imgPathAnalysis(this.$API_VideoImg_URL,clxxData.picurl1);
+      //---方式三
+      //this.getImageBase64("ftp://cyl:cyl@192.168.0.101:21/image/12.jpg");
+
+      this.showPassInfo.pass_addcode = clxxData.addNo;
+    },
+
+getImageBase64(imgpath) {
+
+  let requestParam = JSON.stringify({
+        str1: imgpath
+      });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/image/getImgBase64", requestParam,{
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.showPassInfo.pass_img = response.data.base64;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "图片加载异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+,
+
+
+
+    /**------------ 下面的是用于格式化table中数据的 --------------*/
+    formatXsfx(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfo(row.direction, this.optionsXsfx);
+    },
+    formatXscd(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfoChangInt(row.carRoad, this.optionsXscd);
+    },
+    formatHpzl(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfo(row.carType, this.optionsHpzl);
+    },
+    /** ------------------------------end------------------------ */
+
+    /**
+     * 初始化加载界面枚举信息
+     */
+    initEnumType() {
+      let requestParam = JSON.stringify({
+        flag: "2",
+        enumtypeids: [
+          {
+            170: "optionsHpzl"
+          },
+          {
+            151: "optionsXscd"
+          },
+          {
+            149: "optionsXsfx"
+          }
+        ]
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/enumtype/getEnumInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsHpzl = response.data.optionsHpzl;
+            this.optionsXscd = response.data.optionsXscd;
+            this.optionsXsfx = response.data.optionsXsfx;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    // 修改table header的背景色
+    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return "background-color:#2C2C4B;color: #fff;font-weight: 500;border:1px solid #153B5D;text-align:center;";
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    /** 分页组件方法 */
+    //--改变每页显示的数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.searchKakouList();
+    },
+    handleCurrentChange(val) {
+      this.pageNumber = val;
+      this.searchKakouList();
+    },
+    handlePagePrevClick(val) {
+      this.pageNumber = val;
+      this.searchKakouList();
+    },
+    handlePageNextClick(val) {
+      this.pageNumber = val;
+      this.searchKakouList();
+    },
+    /** --------------*/
+    initGetMountPoint() {
+      // let requestParam = JSON.stringify({
+      //   remapname: "optionsWfxw"
+      // });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/mountpoint/getAllPoint", {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsPoint = response.data.pointList;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化安装点信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    /**
+     * 违法信息表查询
+     */
+    searchKakouList() {
+      this.loading_status = true;
+      this.tableData = [];
+      let requestParam = JSON.stringify({
+        pageNumber: this.pageNumber,
+        pageSize: this.pageSize,
+        //------
+        hpzl: this.valueHpzl,
+        pointcode: this.valuePoint,
+        carxscd: this.valueXscd,
+        starttime: this.value2!=""?this.GCOMMON.formatDate(this.value2,'yyyy-MM-dd hh:mm:ss'):"",
+        endtime: this.value3!=""?this.GCOMMON.formatDate(this.value3,'yyyy-MM-dd hh:mm:ss'):"",
+        hphm: this.whphm,
+        direction:this.valueXsfx
+
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/kakoumgr/getKkList", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.tableData = response.data.passList;
+            this.pageTotal = response.data.pageTotal;
+          } else {
+            //this.publicShowMessage("warning", "分配异常");
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+        this.loading_status = false;
+    }
+  },
+
+  mounted() {
+
+    const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+
+    this.value2 = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0);
+    this.value3= new Date();
+
+    this.initGetMountPoint();
+    this.$nextTick(function() {
+      this.tableHeight =
+        window.innerHeight - this.$refs.passTable.$el.offsetTop - 45;
+
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function() {
+        self.tableHeight =
+          window.innerHeight - self.$refs.passTable.$el.offsetTop - 45;
+      };
+    });
+    this.initEnumType();
+    //---关闭loading
+    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
+      loading.close();
+    });
+  }
+};
+</script>
+<style lang="stylus" scoped>
+.commone_w {
+  /* 设置时间框同其他框一样的宽度 */
+  width: 200px;
+}
+
+.pass_content_right {
+  float: left;
+  width: 690px;
+  height: 500px;
+  margin-left: 5px;
+}
+
+.pass_content_left {
+  float: left;
+  width: -webkit-calc(100% - 700px);
+  height: 100%;
+}
+
+.right_img {
+  float: left;
+  width: 57%;
+  height: 54%;
+  border: 1px solid #2C485A;
+  margin-left: 1px;
+}
+
+.audit_plate_1 {
+  background-color: #DED8D8;
+  font-size: 18px;
+}
+
+.pass_car_mc {
+  border: 1px solid blue;
+  margin-left: 5px;
+}
+
+.aduit-title {
+  float: left;
+  width: 40%;
+  margin-bottom: 5px;
+  border-bottom: 1px solid rgba(184, 178, 178, 0.2);
+  font-size: 18px;
+  letter-spacing: 1px;
+  font-family: 'Helvetica';
+  color: #c7c7c7;
+
+  .title {
+    padding: 0px 4px 0px 0;
+    border-bottom: 3px solid #009688;
+  }
+
+  .paa_fy {
+    float: left;
+  }
+}
+</style>

web/src/views/System/Role/addRole.vue

+<template>
+   <el-dialog :title="headertitle" :visible.sync="opaddroledialog" size="tiny" :before-close="closeroledialong">
+        <div>
+            <el-form ref="addroleform" :model="addform" label-width="80px">
+                <el-form-item label="角色名称" prop="name" :rules="[{ required: true, message: '角色不能为空'}]">
+                    <el-input v-model="addform.name"></el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+        <div>分配权限：</div>
+        <div class="tree-box">
+          <el-tree
+            ref="roletree"
+            :data="roleData"
+            :props="defaultProps"
+            show-checkbox
+            node-key="perm_unid"
+            default-expand-all
+            :expand-on-click-node="false">
+          </el-tree>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="closeroledialong">取 消</el-button>
+            <el-button type="primary" @click="addRoleSubmit">确 定</el-button>
+        </span>
+    </el-dialog>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      roleData: [],
+      defaultProps: {
+        children: "children",
+        label: "name",
+        id:'perm_unid'
+      },
+      addform: {
+        name: ""
+      },
+      headertitle: "添加角色"
+    };
+  },
+  props: {
+    opaddroledialog: {},
+    curData: {}
+  },
+  methods: {
+    closeroledialong(state) {
+      this.$emit("closedialong", true);
+      if (this.curData != "") this.$refs["addroleform"].resetFields();
+    },
+    addRoleSubmit() {
+      this.$refs["addroleform"].validate(valid => {
+        if (valid) {
+          var Url = "";
+          if (this.curData == "") Url =this.API.auth.role;
+          if (this.curData != "")Url = this.API.auth.editrole(this.curData.role_unid);
+
+          this.axios.post(Url, this.addform).then(response => {
+            debugger
+            this.setPrem(response.data);
+            this.closeroledialong();
+            this.$refs["addroleform"].resetFields();
+            this.$message({
+              type: "success",
+              message: "保存成功!"
+            });
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    // 添加权限
+    setPrem(data) {
+      var permunidData = this.getCheckedNodes();
+      if (permunidData.length > 0) {
+        var aList = [];
+        permunidData.forEach(ele => {
+          var obj = {
+            unid: ele.unid,
+            perm_unid: ele.perm_unid
+          };
+          aList.push(obj);
+        });
+        this.axios.post(this.API.auth.menusRole(data.role_unid),
+            {
+              list_size: permunidData.length,
+              list_data: aList
+            },{
+              headers:{
+                "authorization": localStorage.getItem("atoken"),
+              }
+            }
+          )
+          .then(response => {
+            console.log(response.data);
+          });
+      }
+    },
+    getCheckedNodes() {
+      return this.$refs.roletree.getCheckedNodes();
+    },
+    getmenu() {
+      this.axios
+        .get(this.API.menus +'?shape=tree', {
+            headers: {
+              authorization: localStorage.getItem("atoken")
+            }
+          }
+        )
+        .then(response => {
+          this.roleData = response.data.menu_tree;
+        });
+    },
+    getRolePerms(data) {
+      debugger
+      var _this = this;
+      this.axios
+        .get(this.API.auth.perms(data.role_unid),{ headers: {
+              authorization: localStorage.getItem("atoken")
+            }})
+        .then(response => {
+          var IDs = [];
+          if (response.data.list_data) {
+            response.data.list_data.forEach((ele, i) => {
+              IDs.push(ele.perm_unid);
+            }, this);
+          }
+          _this.$refs.roletree.setCheckedKeys(IDs);
+        });
+    }
+  },
+  watch: {
+    curData(val) {
+      this.addform.name = val.name;
+      if (val != "") {
+        this.headertitle = "编辑角色";
+        this.getRolePerms(val);
+      }
+    }
+  },
+  created() {
+    this.getmenu();
+  }
+};
+</script>
+<style lang="stylus" scoped>
+.tree-box {
+  height: 400px;
+  overflow: auto;
+  background: #272e42;
+}
+
+.el-tree {
+  cursor: default;
+  background: #272e42;
+  color: #fff;
+  border: none;
+}
+</style>

web/src/views/System/Role/index.vue

+<template>
+  <div class="template-box content_div_main">
+      <el-form :inline="true" class="search-form" size="small">
+        <el-form-item>
+           <el-input type="text" class="bla bra" v-model="search.rolename" placeholder="角色名称"></el-input>
+        </el-form-item>
+         <el-form-item>
+          <el-button class="search-btn" icon="el-icon-search" @click="searchRol()">查询</el-button>
+          <el-button class="search-btn" @click="addRole()" icon="el-icon-plus">添加</el-button>
+        </el-form-item>
+      </el-form>
+    <el-row >
+      <el-table :data="tableData" v-loading.body="loading" style="width:98%;margin:20px auto;" class="table_m_type" height="700">
+        <div slot="empty">
+          <div class="no-data-box">
+            <img src="../../../assets/img/nodata.png" alt="暂无数据"/>
+            <div>暂无数据</div>
+          </div>
+        </div>
+        <el-table-column type="index" width="" label="序号"></el-table-column>
+        <el-table-column prop="name" label="角色名称" width=""></el-table-column>
+        <el-table-column prop="" label="创建时间" width="">
+          <template slot-scope="scope">
+            {{showLocalTime(scope.row.create_dt)}}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="">
+          <template slot-scope="scope">
+              <div class="tab-btn-box">
+                  <span class="table-btn" size="" @click="editRole(scope.$index, scope.row)">编辑角色</span>
+                  <span class="table-btn dengers" size="" @click="deleteRole(scope.$index, scope.row)">删除角色</span>
+              </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <div class="">
+       <div class="block">
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :page-size="page.limit"
+          :current-page.sync="page.currentPage"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="page.total"
+        ></el-pagination>
+      </div>
+    </div>
+    <el-row>
+      <add-role :opaddroledialog="addroledialog" :curData="curData" @closedialong="closeaddroledialong"></add-role>
+    </el-row>
+  </div>
+</template>
+<script>
+import addRole from "./addRole";
+export default {
+  data() {
+    return {
+      addroledialog: false,
+      search: {
+        rolename: ""
+      },
+      tableData: [],
+      page: {
+        pageSize:20,
+        limit: 20,
+        offset: 0,
+        total: 0,
+        currentPage: 1
+      },
+      loading: false,
+      curData: ""
+    };
+  },
+  methods: {
+    closeaddroledialong(state) {
+      this.addroledialog = false;
+      if (state) this.getRolList();
+    },
+    searchRol() {
+      this.page.offset = 0;
+      this.page.currentPage = 0;
+      this.getRolList();
+    },
+    addRole() {
+      this.addroledialog = true;
+      this.curData = [];
+    },
+    editRole(index, row) {
+      this.addroledialog = true;
+      this.curData = row;
+    },
+
+    editJurisdiction(index, row) {},
+    deleteRole(index, row) {
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+          this.axios
+            .post(this.API.auth.deleteRole(row.role_unid), { is_active: false, })
+            .then(response => {
+              this.getRolList();
+              this.$message({
+                type: "success",
+                message: "删除成功!"
+              });
+            });
+        }).catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除"
+          });
+        });
+    },
+    getRolList() {
+      this.axios.get(this.API.auth.role, {
+         headers: {
+              authorization: localStorage.getItem("atoken")
+            },
+          params: {
+            "name__like": this.search.rolename,
+            "is_active": true,
+            "limit":this.page.limit,
+            "offset":this.page.offset
+          }
+        }).then(response => {
+          this.tableData = response.data.list_data;
+          this.page.total = response.data.total_num;
+        });
+    },
+    handleCurrentChange(val) {
+      this.page.offset = (val - 1) * this.page.limit;
+      this.page.currentPage = val;
+      this.getRolList();
+    },
+    handleSizeChange(val){
+       this.getRolList();
+    }
+  },
+  created() {
+    this.getRolList();
+  },
+  components: {
+    addRole
+  }
+};
+</script>
+<style lang="stylus" scoped>
+.div_content_ty{
+  background #fff
+}
+.pages {
+  float: right;
+  margin: 0px 15px 30px 0;
+}
+</style>

web/src/views/System/Setting/index.vue

+<template>
+  <div class="template-box content_div_main setting-box">
+    <div>推送设置</div>
+
+  </div>
+</template>
+<script>
+export default {
+  data() {
+
+    return {
+    }
+  },
+  methods: {
+
+  },
+  created() {
+  },
+};
+</script>
+<style lang="stylus" scoped>
+.setting-box{
+  color #333
+}
+.sysuser{
+  background #fff
+}
+.importas {
+  .el-form-item {
+    background: red;
+  }
+}
+
+.el-checkbox {
+  color: #fff;
+}
+
+.role-box {
+  max-height 500px;
+  overflow auto;
+  padding: 0px 0 60px 0;
+}
+.left-box,.right-box
+  width 90%
+  height 300px
+  overflow auto
+  border 1px solid #999
+  position relative
+  text-align left
+.claer-float
+  clear both
+.editrolebtn-box
+  position absolute
+  bottom 5px
+  right 10px
+  button
+    float right
+</style>

web/src/views/System/SysUser/index.vue

+<template>
+  <div class="template-box content_div_main">
+    <el-row class="">
+      <el-form :inline="true" class="search-form" size="small">
+        <el-form-item>
+          <el-input type="text" class="bla bra br0" v-model="name" placeholder="姓名"></el-input>
+        </el-form-item>
+         <el-form-item>
+          <el-input type="text" class="bla bra br0" v-model="username" placeholder="登录名"></el-input>
+        </el-form-item>
+         <el-form-item>
+           <el-input type="text" class="bla bra" v-model="mphone" placeholder="电话"></el-input>
+        </el-form-item>
+         <el-form-item>
+          <el-button  class="search-btn" @click="searchUser" icon="el-icon-search">查询</el-button>
+          <el-button  class="search-btn ml10"  @click="addGroupUser()" icon="el-icon-plus">添加</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-row>
+      <el-table :data="systableData" style="width:98%;margin:20px auto;"  class="table_m_type" height="700">
+         <div slot="empty">
+          <div class="no-data-box">
+            <img src="../../../assets/img/nodata.png" alt="暂无数据"/>
+            <div>暂无数据</div>
+          </div>
+        </div>
+        <el-table-column type="index" width=""></el-table-column>
+        <el-table-column prop="name" label="姓名" width=""></el-table-column>
+        <el-table-column prop="username" label="登录名" width=""></el-table-column>
+        <el-table-column prop="mphone" label="联系电话" width=""></el-table-column>
+        <el-table-column label="操作" align="center" width="">
+          <template slot-scope="scope" align="center">
+              <div class="tab-btn-box">
+                <span class="table-btn"  @click="handleEdit(scope.$index, scope.row)">编辑用户</span>
+                <span class="table-btn"   @click="allotRole(scope.$index, scope.row)">分配角色</span>
+                <span class="table-btn dengers"   @click="handleDelete(scope.$index, scope.row)">删除用户</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row>
+      <!-- 添加 -->
+      <el-dialog title="添加系统用户" :visible.sync="adduserDialog" width="35%">
+        <div>
+          <el-form :model="addruleForm" :rules="rules" ref="addruleForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label=" " prop="username" class="importas">
+              <el-input v-model="addruleForm.username" placeholder="登录名"></el-input>
+            </el-form-item>
+            <el-form-item label="*" class="importas" prop="password">
+              <el-input type="password" v-model="addruleForm.password" auto-complete="off" placeholder="密码"></el-input>
+            </el-form-item>
+            <el-form-item label="*" class="importas" prop="checkPass">
+              <el-input type="password" v-model="addruleForm.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="name">
+              <el-input v-model="addruleForm.name" placeholder="用户名"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="email">
+              <el-input v-model="addruleForm.email" placeholder="邮箱"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="mphone">
+              <el-input v-model="addruleForm.mphone" placeholder="联系方式"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="mphone">
+               <el-select v-model="org" filterable placeholder="请选择" class="el-sel">
+                  <el-option
+                    v-for="item in orgData"
+                    :key="item.org_code"
+                    :label="item.org_name"
+                    :value="item.unid">
+                  </el-option>
+                </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="adduserDialog = false">取 消</el-button>
+          <el-button type="primary" @click="adduser">确 定</el-button>
+        </span>
+      </el-dialog>
+    </el-row>
+    <el-row>
+      <el-dialog title="编辑系统用户" :visible.sync="edituserDialog" width="40%">
+        <div>
+          <el-form :model="editruleForm" :rules="editrules" ref="ruleEditForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label=" " prop="username" class="importas">
+              <el-input v-model="editruleForm.username" :disabled="true" placeholder="登录名"></el-input>
+            </el-form-item>
+            <el-form-item label=" " class="importas" prop="password">
+              <el-input type="password" v-model="editruleForm.password" auto-complete="off" placeholder="密码"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="name">
+              <el-input v-model="editruleForm.name" placeholder="用户名"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="email">
+              <el-input v-model="editruleForm.email" placeholder="邮箱"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="mphone">
+              <el-input v-model="editruleForm.mphone" placeholder="联系方式"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="edituserDialog = false">取 消</el-button>
+          <el-button type="primary" @click="edituser">确 定</el-button>
+        </span>
+      </el-dialog>
+    </el-row>
+    <el-row>
+      <el-dialog title="分配角色" :visible.sync="roledialog" width="40%">
+        <div  class="role-box">
+          <el-col :span="12">
+            <div class="left-box">
+              <el-checkbox-group v-model="roleaddsel">
+                <el-col v-for="(item,index) in roleData" :key="index" :span="20" :offset="2" class="mt10"><el-checkbox :label="item">{{item.name}}</el-checkbox></el-col>
+              </el-checkbox-group>
+              <el-col :span="24" class="editrolebtn-box">
+                <el-button  type="primary" class="" @click="addRoleToUser">添加角色</el-button>
+              </el-col>
+              <div class="claer-float"></div>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="right-box">
+              <el-checkbox-group v-model="roledeletesel">
+                <el-col v-for="(item,index) in usreHasRoleData" :key="index" :span="20" :offset="2" class="mt10"><el-checkbox :label="item">{{item.name}}</el-checkbox></el-col>
+              </el-checkbox-group>
+              <el-col :span="24" class="editrolebtn-box">
+                <el-button  type="primary"  @click="deleteRoleToUser">删除角色</el-button>
+              </el-col>
+              <div class="claer-float"></div>
+            </div>
+          </el-col>
+        </div>
+        <span slot="footer" class="dialog-footer">
+        <el-button @click="roledialog = false">关 闭</el-button>
+        </span>
+      </el-dialog>
+    </el-row>
+    <el-row>
+      <div class="block">
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :page-size="page.limit"
+          :current-page.sync="page.currentPage"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="page.total"
+        ></el-pagination>
+      </div>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    var vthis = this;
+    var validatePass = function(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else {
+        if (vthis.addruleForm.checkPass !== "") {
+          vthis.$refs.addruleForm.validateField("checkPass");
+        }
+        callback();
+      }
+    };
+    var validatePass2 = function(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== vthis.addruleForm.password) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+        selval:null,
+        options: [ {
+          id: 'a',
+          label: 'a',
+          children: [ {
+            id: 'aa',
+            label: 'aa',
+          }, {
+            id: 'ab',
+            label: 'ab',
+          } ],
+        }, {
+          id: 'b',
+          label: 'b',
+        }, {
+          id: 'c',
+          label: 'c',
+        } ],
+      groupname: "",
+      username: "",
+      name: "",
+      mphone: "",
+      groupData: [],
+      systableData: [],
+      adduserDialog: false,
+      edituserDialog: false,
+      roledialog: false,
+      roleData: [],
+      roleaddsel: [],
+      roledeletesel:[],
+      usreHasRoleData:[],
+      curData:'',
+      orgData:[],
+      org:'',
+      page: {
+        offset: 0,
+        limit: 20,
+        total: 0,
+        currentPage: 0
+      },
+      editruleForm: {
+        user_type: "user",
+        norm_type: "login",
+        name: "",
+        username: "",
+        email: "",
+        mphone: "",
+        password: "",
+        is_active: true,
+        user_unid:''
+      },
+      addruleForm: {
+        user_type: "user",
+        norm_type: "login",
+        name: "",
+        username: "",
+        email: "",
+        mphone: "",
+        checkPass: "",
+        password: "",
+        sex: "",
+        is_active: true,
+        telephone: "",
+        user_unid:"",
+      },
+      rules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" }
+        ],
+        password: [{ validator: validatePass, trigger: "blur" }],
+        checkPass: [{ validator: validatePass2, trigger: "blur" }]
+      },
+      editrules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
+        ],
+        password: [{ required: true, message: "请输入密码1", trigger: "blur" }]
+      }
+    };
+  },
+  methods: {
+    searchUser(){
+      this.getSysUser();
+    },
+    adduser() {
+      this.$refs["addruleForm"].validate(valid => {
+        if (valid) {
+          this.axios.post(this.API.auth.user, this.addruleForm)
+            .then((response)=> {
+              this.$message({
+                type: "info",
+                message: "创建成功!"
+              });
+              this.adduserDialog = false;
+              this.page.currentPage = 1;
+              this.page.offset = 0;
+              this.getSysUser();
+              this.$refs["addruleForm"].resetFields();
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    edituser() {
+      this.$refs["ruleEditForm"].validate(valid => {
+        if (valid) {
+          this.axios.post(this.API.auth.edituser(this.editruleForm.user_unid),this.editruleForm)
+            .then((response)=> {
+              this.$message({
+                type: "info",
+                message: "修改成功!"
+              });
+              this.edituserDialog = false;
+              this.getSysUser();
+              this.$refs["ruleEditForm"].resetFields();
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    allotRole(index, row) {
+      this.roleData = [];
+      this.roledialog = true;
+      this.curData = row
+      this.axios.get(this.API.auth.role, {
+          params: {
+            offset: 0,
+            limit: 1000,
+            is_active:true
+          }
+        }).then(response => {
+          this.roleData = response.data.list_data;
+          this.allHasRole(row);
+        });
+    },
+    allHasRole(row){
+      this.axios.get(this.API.auth.userRole(row.user_unid), {
+          params: {
+            offset: 0,
+            limit: 1000,
+            is_active:true
+          }
+        }).then(response => {
+          this.usreHasRoleData = response.data.list_data;
+        });
+    },
+    handleEdit(index, row) {
+      this.axios.get(this.API.auth.edituser(row.user_unid)).then((response)=>{
+        this.edituserDialog = true;
+        this.editruleForm.username= response.data.username;
+        this.editruleForm.name= response.data.name;
+        this.editruleForm.mphone= response.data.mphone;
+        this.editruleForm.email= response.data.email;
+        this.editruleForm.user_unid= response.data.user_unid;
+      });
+
+    },
+    handleDelete(index, row) {
+      var Vthis = this;
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.axios.post(this.API.auth.edituser(row.user_unid), {
+              is_active: false
+            }).then(function(response) {
+              Vthis.getSysUser();
+              Vthis.$message({
+                type: "success",
+                message: "删除成功!"
+              });
+            });
+        }).catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除"
+          });
+        });
+    },
+    addGroupUser() {
+      this.adduserDialog = true;
+    },
+    addRoleToUser(){
+      if(this.roleaddsel.length > 0){
+        this.roleaddsel.forEach(function(ele,i) {
+          this.axios.post(this.API.auth.userRole(this.curData.user_unid),{"role_unid":ele.role_unid}).then((response)=> {
+            if(i == this.roleaddsel.length-1){
+              this.allHasRole(this.curData);
+            }
+          });
+        }, this);
+      }
+    },
+    deleteRoleToUser(){
+      if(this.roledeletesel.length > 0){
+        this.roledeletesel.forEach(function(ele,i) {
+            this.axios.delete(this.API.auth.deleteuserRole(this.curData.user_unid, ele.role_unid)).then((response)=> {
+              if(i == this.roledeletesel.length-1){
+                this.roledeletesel = [];
+                this.allHasRole(this.curData);
+              }
+            });
+        }, this);
+      }
+    },
+    setSex(row, column, cellValue) {
+      var sex = "";
+      if (cellValue == "1") sex = "男";
+      if (cellValue == "2") sex = "女";
+      return sex;
+    },
+
+    getSysUser() {
+      debugger
+      console.log(this.selval)
+      var Vthis = this;
+      this.axios
+        .get(this.API.auth.user, {
+          params: {
+            limit: 20,
+            offset: this.page.offset,
+            username__like: this.username,
+            mphone__like: this.mphone,
+            name__like: this.name,
+            is_active: true,
+            user_type: "user",
+            norm_type: "login"
+          }
+        }).then(function(response) {
+          Vthis.systableData = response.data.list_data;
+          Vthis.page.total = response.data.total_num;
+        });
+    },
+    handleCurrentChange(val) {
+      this.page.offset = (val - 1) * this.page.limit;
+      this.getSysUser();
+    },
+    handleSizeChange(val) {
+      this.getSysUser();
+    }
+  },
+  created() {
+    this.getSysUser();
+    this.orgData = this.$store.state.initinfo.org;
+  },
+};
+</script>
+<style lang="stylus" scoped>
+.sysuser{
+  background #fff
+}
+.importas {
+  .el-form-item {
+    background: red;
+  }
+}
+
+.el-checkbox {
+  color: #fff;
+}
+
+.role-box {
+  max-height 500px;
+  overflow auto;
+  padding: 0px 0 60px 0;
+}
+.left-box,.right-box
+  width 90%
+  height 300px
+  overflow auto
+  border 1px solid #999
+  position relative
+  text-align left
+.claer-float
+  clear both
+.editrolebtn-box
+  position absolute
+  bottom 5px
+  right 10px
+  button
+    float right
+</style>

web/src/views/System/SysUser/userback.vue

+
+<template>
+  <div class="sysuser">
+    <el-row class="mt30">
+      <el-col :span="4" class="ml50">
+        <el-input type="text" class="bla bra br0" v-model="name" placeholder="姓名"></el-input>
+      </el-col>
+      <el-col :span="4" class="">
+        <el-input type="text" class="bla bra br0" v-model="username" placeholder="登录名"></el-input>
+      </el-col>
+      <el-col :span="4" class="">
+        <el-input type="text" class="bla bra" v-model="mphone" placeholder="电话"></el-input>
+      </el-col>
+      <el-col :span="4" class="ml10">
+        <el-button type="primary" class="them-big-btn set-btn" @click="searchUser" icon="el-icon-search">查询</el-button>
+        <el-button type="primary" class="them-big-btn set-btn ml10"  @click="addGroupUser()" icon="el-icon-plus">添加</el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-table :data="systableData" style="width:98%;margin:20px auto;" class="mt20">
+        <el-table-column type="index" width=""></el-table-column>
+        <el-table-column prop="name" label="姓名" width=""></el-table-column>
+        <el-table-column prop="username" label="登录名" width=""></el-table-column>
+        <el-table-column prop="mphone" label="联系电话" width=""></el-table-column>
+        <el-table-column label="操作" align="center" width="">
+          <template slot-scope="scope" align="center">
+              <div class="tab-btn-box">
+                <span class="table-btn" size=""  @click="handleEdit(scope.$index, scope.row)">编辑用户</span>
+                <span class="table-btn" size=""  @click="allotRole(scope.$index, scope.row)">分配角色</span>
+                <span class="table-btn dengers" size=""  @click="handleDelete(scope.$index, scope.row)">删除用户</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row>
+      <!-- 添加 -->
+      <el-dialog title="添加系统用户" :visible.sync="adduserDialog" size="tiny">
+        <div>
+          <el-form :model="addruleForm" :rules="rules" ref="addruleForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label=" " prop="username" class="importas">
+              <el-input v-model="addruleForm.username" placeholder="登录名"></el-input>
+            </el-form-item>
+            <el-form-item label="*" class="importas" prop="password">
+              <el-input type="password" v-model="addruleForm.password" auto-complete="off" placeholder="密码"></el-input>
+            </el-form-item>
+            <el-form-item label="*" class="importas" prop="checkPass">
+              <el-input type="password" v-model="addruleForm.checkPass" auto-complete="off" placeholder="确认密码"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="name">
+              <el-input v-model="addruleForm.name" placeholder="用户名"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="email">
+              <el-input v-model="addruleForm.email" placeholder="邮箱"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="mphone">
+              <el-input v-model="addruleForm.mphone" placeholder="联系方式"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="mphone">
+               <el-select v-model="org" filterable placeholder="请选择">
+                  <el-option
+                    v-for="item in orgData"
+                    :key="item.org_code"
+                    :label="item.org_name"
+                    :value="item.unid">
+                  </el-option>
+                </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="adduserDialog = false">取 消</el-button>
+          <el-button type="primary" @click="adduser">确 定</el-button>
+        </span>
+      </el-dialog>
+    </el-row>
+    <el-row>
+      <el-dialog title="编辑系统用户" :visible.sync="edituserDialog" size="tiny">
+        <div>
+          <el-form :model="editruleForm" :rules="editrules" ref="ruleEditForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label=" " prop="username" class="importas">
+              <el-input v-model="editruleForm.username" :disabled="true" placeholder="登录名"></el-input>
+            </el-form-item>
+            <el-form-item label=" " class="importas" prop="password">
+              <el-input type="password" v-model="editruleForm.password" auto-complete="off" placeholder="密码"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="name">
+              <el-input v-model="editruleForm.name" placeholder="用户名"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="email">
+              <el-input v-model="editruleForm.email" placeholder="邮箱"></el-input>
+            </el-form-item>
+            <el-form-item label=" " prop="mphone">
+              <el-input v-model="editruleForm.mphone" placeholder="联系方式"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="edituserDialog = false">取 消</el-button>
+          <el-button type="primary" @click="edituser">确 定</el-button>
+        </span>
+      </el-dialog>
+    </el-row>
+    <el-row>
+      <el-dialog title="分配角色" :visible.sync="roledialog" width="30%">
+        <div  class="role-box">
+          <el-col :span="22" :offset="2">
+            <div class="left-box">
+              <el-checkbox-group v-model="roleaddsel">
+                <el-checkbox v-for="(item,index) in roleData" :key="index"  class="mt10" :label="item.role_unid" border>{{item.name}}</el-checkbox>
+              </el-checkbox-group>
+              <div class="claer-float"></div>
+            </div>
+          </el-col>
+        </div>
+        <span slot="footer" class="dialog-footer">
+        <el-button @click="roledialog = false">关 闭</el-button>
+         <el-button  type="primary" class="" @click="addRoleToUser">添加角色</el-button>
+        </span>
+      </el-dialog>
+    </el-row>
+    <el-row>
+      <div class="block">
+        <el-pagination class="pages flr mr20" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.currentPage" :page-size="page.limit" layout="total,prev, pager, next, jumper" :total="page.total">
+        </el-pagination>
+      </div>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    var vthis = this;
+    var validatePass = function(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else {
+        if (vthis.addruleForm.checkPass !== "") {
+          vthis.$refs.addruleForm.validateField("checkPass");
+        }
+        callback();
+      }
+    };
+    var validatePass2 = function(rule, value, callback) {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== vthis.addruleForm.password) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      groupname: "",
+      username: "",
+      name: "",
+      mphone: "",
+      groupData: [],
+      systableData: [],
+      adduserDialog: false,
+      edituserDialog: false,
+      roledialog: false,
+      roleData: [],
+      roleaddsel: [],
+      roledeletesel:[],
+      usreHasRoleData:[],
+      curData:'',
+      orgData:[],
+      org:'',
+      page: {
+        offset: 0,
+        limit: 20,
+        total: 0,
+        currentPage: 0
+      },
+      editruleForm: {
+        user_type: "user",
+        norm_type: "login",
+        name: "",
+        username: "",
+        email: "",
+        mphone: "",
+        password: "",
+        is_active: true,
+        user_unid:''
+      },
+      addruleForm: {
+        user_type: "user",
+        norm_type: "login",
+        name: "",
+        username: "",
+        email: "",
+        mphone: "",
+        checkPass: "",
+        password: "",
+        sex: "",
+        is_active: true,
+        telephone: "",
+        user_unid:"",
+      },
+      rules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" }
+        ],
+        password: [{ validator: validatePass, trigger: "blur" }],
+        checkPass: [{ validator: validatePass2, trigger: "blur" }]
+      },
+      editrules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
+        ],
+        password: [{ required: true, message: "请输入密码1", trigger: "blur" }]
+      }
+    };
+  },
+  computed: {},
+  methods: {
+    searchUser(){
+      this.getSysUser();
+    },
+    adduser() {
+      this.$refs["addruleForm"].validate(valid => {
+        if (valid) {
+          this.axios.post(this.API.auth.user, this.addruleForm)
+            .then((response)=> {
+              this.$message({
+                type: "info",
+                message: "创建成功!"
+              });
+              this.adduserDialog = false;
+              this.page.currentPage = 1;
+              this.page.offset = 0;
+              this.getSysUser();
+              this.$refs["addruleForm"].resetFields();
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    edituser() {
+      this.$refs["ruleEditForm"].validate(valid => {
+        if (valid) {
+          this.axios.post(this.API.auth.edituser(this.editruleForm.user_unid),this.editruleForm)
+            .then((response)=> {
+              this.$message({
+                type: "info",
+                message: "修改成功!"
+              });
+              this.edituserDialog = false;
+              this.getSysUser();
+              this.$refs["ruleEditForm"].resetFields();
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    allotRole(index, row) {
+      this.roleData = [];
+      this.roledialog = true;
+      this.curData = row
+      this.axios.get(this.API.auth.role, {
+          params: {
+            offset: 0,
+            limit: 1000,
+            is_active:true
+          }
+        }).then(response => {
+          this.roleData = response.data.list_data;
+          this.allHasRole(row);
+        });
+    },
+    allHasRole(row){
+      this.axios.get(this.API.auth.userRole(row.user_unid), {
+          params: {
+            offset: 0,
+            limit: 1000,
+            is_active:true
+          }
+        }).then(response => {
+          this.usreHasRoleData = response.data.list_data;
+          response.data.list_data.forEach(ele => {
+             this.roleaddsel.push(ele.role_unid)
+          })
+        });
+    },
+    handleEdit(index, row) {
+      this.axios.get(this.API.auth.edituser(row.user_unid)).then((response)=>{
+        this.edituserDialog = true;
+        this.editruleForm.username= response.data.username;
+        this.editruleForm.name= response.data.name;
+        this.editruleForm.mphone= response.data.mphone;
+        this.editruleForm.email= response.data.email;
+        this.editruleForm.user_unid= response.data.user_unid;
+
+      });
+
+    },
+    handleDelete(index, row) {
+      var Vthis = this;
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.axios.post(this.API.auth.edituser(row.user_unid), {
+              is_active: false
+            }).then(function(response) {
+              Vthis.getSysUser();
+              Vthis.$message({
+                type: "success",
+                message: "删除成功!"
+              });
+            });
+        }).catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除"
+          });
+        });
+    },
+    addGroupUser() {
+      this.adduserDialog = true;
+    },
+    addRoleToUser(){
+      if(this.roleaddsel.length > 0){
+        this.roleaddsel.forEach((ele,i) => {
+          this.axios.post(this.API.auth.userRole(this.curData.user_unid),{"role_unid":ele}).then((response)=> {
+
+            if(i === this.roleaddsel.length - 1){
+              this.roledialog = false;
+              this.roleaddsel = [];
+            }
+          });
+        }, this);
+      }
+    },
+    deleteRoleToUser(){
+      if(this.roledeletesel.length > 0){
+        this.roledeletesel.forEach(function(ele,i) {
+            this.axios.delete(this.API.auth.deleteuserRole(this.curData.user_unid, ele.role_unid)).then((response)=> {
+              if(i == this.roledeletesel.length-1){
+                this.roledeletesel = [];
+                this.allHasRole(this.curData);
+              }
+            });
+        }, this);
+      }
+    },
+    setSex(row, column, cellValue) {
+      var sex = "";
+      if (cellValue == "1") sex = "男";
+      if (cellValue == "2") sex = "女";
+      return sex;
+    },
+
+    getSysUser() {
+      var Vthis = this;
+      this.axios
+        .get(this.API.auth.user, {
+          params: {
+            limit: 20,
+            offset: this.page.offset,
+            username__like: this.username,
+            mphone__like: this.mphone,
+            name__like: this.name,
+            is_active: true,
+            user_type: "user",
+            norm_type: "login"
+          }
+        }).then(function(response) {
+          Vthis.systableData = response.data.list_data;
+          Vthis.page.total = response.data.total_num;
+        });
+    },
+    handleCurrentChange(val) {
+      this.page.offset = (val - 1) * this.page.limit;
+      this.getSysUser();
+    },
+    handleSizeChange(val) {
+      alert(val);
+    }
+  },
+  created() {
+    this.getSysUser();
+    this.orgData = this.$store.state.initinfo.org;
+  }
+};
+</script>
+<style lang="stylus" scoped>
+.importas {
+  .el-form-item {
+    background: red;
+  }
+}
+
+.el-checkbox {
+  color: #fff;
+}
+
+.role-box {
+  max-height 500px;
+  overflow auto;
+  padding: 0px 0 60px 0;
+}
+.left-box,.right-box
+  width 90%
+  height 300px
+  overflow auto
+  border 1px solid #999
+  position relative
+.claer-float
+  clear both
+.editrolebtn-box
+  position absolute
+  bottom 5px
+  right 10px
+  button
+    float right
+</style>

web/src/views/System/index.vue

+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+export default {
+  
+}
+</script>
+<style lang="stylus" scoped>
+
+</style>

web/src/views/dashboard/auditOper.vue

+<template>
+  <div>
+    <div class="dashboard_heard">
+      <div class="dashboard_heard_info">
+        <div class="i_info_t">
+            <i class="el-icon-folder f_icon_all_1"></i>
+        </div>
+        <div class="i_info_t_t">
+            <div class="right_tip">
+                本月审核量
+            </div>
+            <div class="right_tip">
+                5558865
+            </div>
+        </div>
+      </div>
+      <div class="dashboard_heard_info">
+          <div class="i_info_t">
+            <i class="el-icon-s-comment f_icon_all_2"></i>
+            </div>
+        <div class="i_info_t_t">
+            <div class="right_tip">
+                昨日审核量
+            </div>
+            <div class="right_tip">
+                5558865
+            </div>
+        </div>
+      </div>
+      <div class="dashboard_heard_info">
+        <div class="i_info_t">
+          <i class="el-icon-success f_icon_su"></i>
+        </div>
+        <div class="i_info_t_t">
+            <div class="right_tip">
+                昨日有效数
+            </div>
+            <div class="right_tip">
+                5558865
+            </div>
+        </div>
+      </div>
+      <div class="dashboard_heard_info">
+        <div class="i_info_t">
+          <i class="el-icon-delete icon_f"></i>
+        </div>
+        <div class="i_info_t_t f_zf_y">
+            <div class="right_tip">
+                昨日删除数
+            </div>
+            <div class="right_tip">
+                5558865
+            </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主界面的dashboard -->
+    <div style="background:#fff;width:100%;height:100%;float:left;">
+      <div style="width:40%;height:500px;float:left;margin-left:5px;" ref="chart"></div>
+      <div style="width:59%;height:300px;float:left;margin-left:5px;" ref="Zchart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+
+  methods: {
+    initCharts() {
+      var Zoption = {
+        tooltip: {
+          trigger: "axis"
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ["line", "bar"] },
+            restore: { show: true },
+            saveAsImage: { show: true }
+          }
+        },
+        calculable: true,
+        legend: {
+          data: ["有效数据", "作废数据", "有效平均数"]
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月"
+            ]
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "水量",
+            axisLabel: {
+              formatter: "{value} ml"
+            }
+          },
+          {
+            type: "value",
+            name: "温度",
+            axisLabel: {
+              formatter: "{value} °C"
+            }
+          }
+        ],
+        series: [
+          {
+            name: "有效数据",
+            type: "bar",
+            data: [
+              2.0,
+              4.9,
+              7.0,
+              23.2,
+              25.6,
+              76.7,
+              135.6,
+              162.2,
+              32.6,
+              20.0,
+              6.4,
+              3.3
+            ]
+          },
+          {
+            name: "作废数据",
+            type: "bar",
+            data: [
+              2.6,
+              5.9,
+              9.0,
+              26.4,
+              28.7,
+              70.7,
+              175.6,
+              182.2,
+              48.7,
+              18.8,
+              6.0,
+              2.3
+            ]
+          },
+          {
+            name: "有效平均数",
+            type: "line",
+            yAxisIndex: 1,
+            data: [
+              2.0,
+              2.2,
+              3.3,
+              4.5,
+              6.3,
+              10.2,
+              20.3,
+              23.4,
+              23.0,
+              16.5,
+              12.0,
+              6.2
+            ]
+          }
+        ]
+      };
+
+      var option = {
+        title: {
+          x: "center",
+          text: "每日工作量统计"
+        },
+        tooltip: {
+          trigger: "item"
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true }
+          }
+        },
+        calculable: true,
+        grid: {
+          borderWidth: 0,
+          y: 80,
+          y2: 60
+        },
+        xAxis: [
+          {
+            type: "category",
+            show: false,
+            data: [
+              "Line",
+              "Bar",
+              "Scatter",
+              "K",
+              "Pie",
+              "Radar",
+              "Chord",
+              "Force",
+              "Map",
+              "Gauge",
+              "Funnel"
+            ]
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            show: false
+          }
+        ],
+        series: [
+          {
+            name: "每日工作量统计",
+            type: "bar",
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  // build a color map as your need.
+                  var colorList = [
+                    "#C1232B",
+                    "#B5C334",
+                    "#FCCE10",
+                    "#E87C25",
+                    "#27727B",
+                    "#FE8463",
+                    "#9BCA63",
+                    "#FAD860",
+                    "#F3A43B",
+                    "#60C0DD",
+                    "#D7504B",
+                    "#C6E579",
+                    "#F4E001",
+                    "#F0805A",
+                    "#26C0C0"
+                  ];
+                  return colorList[params.dataIndex];
+                },
+                label: {
+                  show: true,
+                  position: "top",
+                  formatter: "{b}\n{c}"
+                }
+              }
+            },
+            data: [12, 21, 10, 4, 12, 5, 6, 5, 25, 23, 7],
+            markPoint: {
+              tooltip: {
+                trigger: "item",
+                backgroundColor: "rgba(0,0,0,0)",
+                formatter: function(params) {
+                  return (
+                    '<img src="' +
+                    params.data.symbol.replace("image://", "") +
+                    '"/>'
+                  );
+                }
+              },
+              data: [
+                {
+                  xAxis: 0,
+                  y: 350,
+                  name: "Line",
+                  symbolSize: 20,
+                  symbol: "image://../asset/ico/折线图.png"
+                },
+                {
+                  xAxis: 1,
+                  y: 350,
+                  name: "Bar",
+                  symbolSize: 20,
+                  symbol: "image://../asset/ico/柱状图.png"
+                },
+                {
+                  xAxis: 2,
+                  y: 350,
+                  name: "Scatter",
+                  symbolSize: 20,
+                  symbol: "image://../asset/ico/散点图.png"
+                },
+                {
+                  xAxis: 3,
+                  y: 350,
+                  name: "K",
+                  symbolSize: 20,
+                  symbol: "image://../asset/ico/K线图.png"
+                },
+                {
+                  xAxis: 4,
+                  y: 350,
+                  name: "Pie",
+                  symbolSize: 20,
+                  symbol: "image://../asset/ico/饼状图.png"
+                },
+                {
+                  xAxis: 5,
+                  y: 350,
+                  name: "Radar",
+                  symbolSize: 20,
+                  symbol: "image://../asset/ico/雷达图.png"
+                },
+                {
+                  xAxis: 6,
+                  y: 350,
+                  name: "Chord",
+                  symbolSize: 20,
+                  symbol: "image://../asset/ico/和弦图.png"
+                },
+                {
+                  xAxis: 7,
+                  y: 350,
+                  name: "Force",
+                  symbolSize: 20,
+                  symbol: "image://../asset/ico/力导向图.png"
+                },
+                {
+                  xAxis: 8,
+                  y: 350,
+                  name: "Map",
+                  symbolSize: 20,
+                  symbol: "image://../asset/ico/地图.png"
+                },
+                {
+                  xAxis: 9,
+                  y: 350,
+                  name: "Gauge",
+                  symbolSize: 20,
+                  symbol: "image://../asset/ico/仪表盘.png"
+                },
+                {
+                  xAxis: 10,
+                  y: 350,
+                  name: "Funnel",
+                  symbolSize: 20,
+                  symbol: "image://../asset/ico/漏斗图.png"
+                }
+              ]
+            }
+          }
+        ]
+      };
+
+      let myChart = this.$echarts.init(this.$refs.chart);
+      console.log(this.$refs.chart); // 绘制图表
+      myChart.setOption(option);
+
+      let ZmyChart = this.$echarts.init(this.$refs.Zchart);
+      console.log(this.$refs.Zchart); // 绘制图表
+      ZmyChart.setOption(Zoption);
+    }
+  },
+
+  mounted() {
+    this.initCharts();
+  }
+};
+</script>
+
+
+<style lang="stylus">
+.dashboard_heard {
+  float: left;
+  width: 100%;
+  height: 120px;
+  background: #F0F2F4;
+}
+
+.dashboard_heard_info {
+  float: left;
+  width: 23%;
+  height: 90px;
+  margin-left: 20px;
+  margin-top: 15px;
+  background: #FFFFFF;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.i_info_t {
+  float: left;
+  width: 50%;
+  height: 100%;
+  color: #40C9C6;
+  line-height: 90px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: blod;
+  border-right: 1px solid #EFF1F4;
+}
+
+.i_info_t_t {
+  float: left;
+  width: 49%;
+  height: 100%;
+  color: #40C9C6;
+  line-height: 90px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: blod;
+}
+
+.f_zf_y {
+  color: #F4516C;
+}
+
+.icon_f {
+  font-size: 50px;
+  font-weight: bold;
+  color: red;
+  line-height: 90px;
+}
+
+.f_icon_su {
+  font-size: 50px;
+  font-weight: bold;
+  color: #51C790;
+  line-height: 90px;
+}
+.f_icon_all_2{
+  font-size: 50px;
+  font-weight: bold;
+  color: #36A3F7;
+  line-height: 90px;
+}
+
+.f_icon_all_1{
+  font-size: 50px;
+  font-weight: bold;
+  color: #40C9C6;
+  line-height: 90px;    
+}
+
+.right_tip{
+    float:left;
+    width:100%;
+    height:30%;
+    line-height 60px;
+}
+
+</style>
\ No newline at end of file

web/src/views/enforcelaw/Illsearch/index.vue

+<template>
+  <div class="content_div_main">
+    <div class="head_condition_type">
+      <el-form :inline="true" class="demo-form-inline" size="small">
+        <el-form-item>
+          <el-select v-model="valueCjfs" clearable placeholder="采集方式">
+            <!-- <el-option label="闯红灯设备" value="1"></el-option>
+            <el-option label="尾号限行" value="12"></el-option>-->
+            <el-option
+              v-for="item in optionsCjfs"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select v-model="valueHpzl" clearable placeholder="号牌种类">
+            <!-- <el-option label="小型汽车" value="02"></el-option>
+            <el-option label="大型汽车" value="01"></el-option>-->
+            <el-option
+              v-for="item in optionsHpzl"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select v-model="valuePoint" clearable filterable placeholder="请选择安装点">
+            <el-option
+              v-for="item in optionsPoint"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select v-model="valueXscd" clearable placeholder="行驶车道">
+            <!-- <el-option label="第一车道" value="01"></el-option>
+            <el-option label="第二车道" value="02"></el-option>-->
+            <el-option
+              v-for="item in optionsXscd"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select v-model="valueShzt" clearable placeholder="审核状态">
+            <!-- <el-option label="已审核" value="1"></el-option>
+            <el-option label="已复审" value="2"></el-option>-->
+            <el-option
+              v-for="item in optionsShzt"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-date-picker
+            v-model="value2"
+            type="datetime"
+            class="commone_w"
+            format="yyyy-MM-dd HH:mm:ss"
+            placeholder="开始时间"
+            align="right"
+
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-date-picker
+            v-model="value3"
+            type="datetime"
+            class="commone_w"
+            format="yyyy-MM-dd HH:mm:ss"
+            placeholder="结束时间"
+            align="right"
+
+          ></el-date-picker>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select v-model="valueDevice" clearable filterable placeholder="请选择采集设备">
+            <el-option
+              v-for="item in optionsDevice"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-input placeholder="号牌号码" v-model="whphm" class="commone_w"></el-input>
+        </el-form-item>
+        <el-button size="small" type="primary" @click="searchQueryWzxxT">查询</el-button>
+      </el-form>
+    </div>
+
+    <div class="table_m_type">
+      <el-table
+        v-loading="loading_status"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        ref="multipleTable"
+        :data="tableData"
+        :height="tableHeight"
+        tooltip-effect="dark"
+        style="width: 100%"
+        :default-sort="{prop: 'date', order: 'descending'}"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column label="号牌号码" prop="carNo" width="120px" sortable>
+          <template slot-scope="scope">{{ scope.row.carNo }}</template>
+        </el-table-column>
+        <el-table-column label="号牌种类" prop="carType" width="120px" :formatter="formatHpzl"></el-table-column>
+
+        <el-table-column label="违法时间" prop="watchTime" width="160px" sortable>
+          <template slot-scope="scope">{{ scope.row.watchTime }}</template>
+        </el-table-column>
+
+        <el-table-column prop="addName" label="违法地点" show-overflow-tooltip></el-table-column>
+
+        <el-table-column prop="wfdm" label="违法行为" :formatter="formatWfxw"></el-table-column>
+
+        <el-table-column prop="shryid" label="审核人员"></el-table-column>
+
+        <el-table-column prop="nid" v-if="false" label="NID" width="0"></el-table-column>
+
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button size="mini" type="info" @click="showIllInfo(scope.$index, scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="block paa_fy">
+      <div style="float:left;">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        @prev-click="handlePagePrevClick"
+        @next-click="handlePageNextclick"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        :current-page.sync="pageNumber"
+        layout="total, sizes, prev, pager, next"
+        :total="pageTotal"
+      ></el-pagination>
+      </div>
+        <div class="fy_number_class">
+          <el-input  v-model="mPageNumber"  @keyup.enter.native="modifyFyNumber" style="width:80px;" placeholder="数量/页" >
+          </el-input>
+       </div>
+    </div>
+
+    <!-- 违法详情弹出界面 -->
+    <!--打开分配小组任务的dialog-->
+    <el-dialog title="违法详情" width="98%" top="1vh" :visible.sync="dialogFormVisible">
+      <div class="aduit-img-box">
+        <el-col :span="8" class="img_box_w" :style="'height:'+ImgDTH+'px;'" size="mini">
+          <!-- <img-zoom src="http://193.5.103.124:8083/5251522281554187435986/2019/06/12/15/zhbrt1933128193kk/15421856167233004.jpg?fid=199878-4535680029-23E71FD-A849C"
+            bigsrc="http://193.5.103.124:8083/5251522281554187435986/2019/06/12/15/zhbrt1933128193kk/15421856167233004.jpg?fid=199878-4535680029-23E71FD-A849C" :configs="configs"></img-zoom>
+          -->
+
+          <vue-photo-zoom-pro :url="resultData.illegal.ill_pic1"></vue-photo-zoom-pro>
+        </el-col>
+        <el-col :span="8" class="img_box_w" :style="'height:'+ImgDTH+'px;'" size="mini">
+          <vue-photo-zoom-pro :url="resultData.illegal.ill_pic2"></vue-photo-zoom-pro>
+        </el-col>
+        <el-col :span="8" class="img_box_w" :style="'height:'+ImgDTH+'px;'" size="mini">
+          <vue-photo-zoom-pro :url="resultData.illegal.ill_pic3"></vue-photo-zoom-pro>
+        </el-col>
+      </div>
+
+      <div class="candidCamera">
+        <div class="aduit-title">
+          <span class="title">车辆识别信息</span>
+        </div>
+        <el-col :span="6">
+          <el-col :span="6" class="aduit-label">采集机关:</el-col>
+          <el-col :span="12" class="aduit-info">贵阳市交通科技处</el-col>
+        </el-col>
+
+        <el-col :span="6">
+          <el-col :span="6" class="aduit-label">特征图片:</el-col>
+          <el-col :span="12" class="aduit-info">*</el-col>
+        </el-col>
+
+        <el-col :span="6">
+          <el-col :span="6" class="aduit-label">号牌号码:</el-col>
+          <el-input
+            :class="{audit_plate_2:isXnyTrue}"
+            class="audit_plate_1"
+            v-model="resultData.camera.plate_number"
+            @keyup.native="changeHphmEvent()"
+          ></el-input>
+        </el-col>
+
+        <el-col :span="6">
+          <el-col :span="6" class="aduit-label">号牌种类:</el-col>
+          <el-select
+            v-model="valueHpzlDT"
+            class="detail_hpzl_i"
+            placeholder="号牌种类"
+            @change="onChangeHpzlEvent"
+          >
+            <!-- <el-option label="小型汽车" value="02"></el-option>
+            <el-option label="大型汽车" value="01"></el-option>-->
+            <el-option
+              v-for="item in optionsHpzl"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-col>
+      </div>
+      <div class="vehicleinfo">
+        <div class="aduit-title">
+          <span class="title">机动车信息</span>
+          <span class="tip_msg">{{tip_info_veh}}</span>
+        </div>
+
+        <div class="sub-info">
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">车辆品牌:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_clpp}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">车辆类型:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterInfo(resultData.vehicleinfo.car_cllx,optionsCllx)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">登记日期:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_djrj}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">有效期止:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_yxqz}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">车身颜色:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterMoreInfo(resultData.vehicleinfo.car_color,optionsCsys)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">使用性质:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterInfo(resultData.vehicleinfo.car_syxz,optionsSyxz)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">车辆状态:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterMoreInfo(resultData.vehicleinfo.car_zt,optionsClzt)}}</el-col>
+          </el-col>
+        </div>
+      </div>
+
+      <div class="illegalinfo">
+        <div class="aduit-title">
+          <span class="title">车辆违法信息</span>
+          <!-- <span class="tip_msg">{{this.GCOMMON.formatterInfo(tip_info_ill,optionsCjfs)}}</span> -->
+        </div>
+
+        <div class="sub-info">
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">违法时间:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.illegal.event_dt}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">行驶车道:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterInfo(resultData.illegal.lane_num,optionsXscd)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">行驶方向:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterInfo(resultData.illegal.direction,optionsXsfx)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">违法地点:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.illegal.address}}</el-col>
+          </el-col>
+          <el-row>
+            <el-col :span="6">
+              <el-col :span="6" class="aduit-label">地点代码:</el-col>
+              <el-col :span="16" class="aduit-info">{{resultData.illegal.ill_address_code}}</el-col>
+            </el-col>
+            <el-col :span="6">
+              <el-col :span="6" class="aduit-label">设备编码:</el-col>
+              <el-col :span="16" class="aduit-info">{{resultData.illegal.dev_unid}}</el-col>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="6">
+              <el-col :span="6" class="aduit-label">违法行为:</el-col>
+              <el-col :span="16">
+                <el-select v-model="resultData.illegal.ill_type" placeholder="请选择">
+                  <el-option
+                    v-for="item in optionsWfxw"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  ></el-option>
+                </el-select>
+              </el-col>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" type="success" @click="clickPlayVideo" :disabled="isDisable">视频播放</el-button>
+        <el-button size="mini" type="warning" @click="handellAction('nullify')">无效数据</el-button>
+        <el-button size="mini" type="primary" @click="upDetailInfo()">上一条</el-button>
+        <el-button size="mini" type="primary" @click="nextDetailInfo()">下一条</el-button>
+        <el-button size="mini" @click="dialogFormVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+    <!--      end      -->
+
+    <el-dialog title="视频播放" width="60%" :visible.sync="dialogVideoVisible">
+      <video-player
+        class="video-player vjs-custom-skin"
+        ref="videoPlayer"
+        :playsinline="true"
+        :options="playerOptions"
+      ></video-player>
+    </el-dialog>
+  </div>
+</template>
+
+
+
+<style scoped>
+.tip_msg {
+  color: red;
+  text-align: right;
+  font-size: 14px;
+  margin-left: 20px;
+}
+.pic-box {
+  width: 33%;
+  height: 33%;
+}
+
+.demo-form-inline {
+  margin-top: 5px;
+  margin-left: 5px;
+}
+.head_condition_type {
+  height: auto;
+  color: #333;
+  -moz-box-shadow: 2px 2px 10px #909090;
+  -webkit-box-shadow: 2px 2px 10px #909090;
+  box-shadow: 2px 2px 4px #909090;
+}
+.commone_w {
+  /* 设置时间框同其他框一样的宽度 */
+  width: 215px;
+}
+
+
+/** ---------------------------------------  **/
+
+.aduit-box {
+  width: 95%;
+  margin: 0 auto;
+}
+
+.aduit-img-box img {
+  width: 100%;
+  margin: 1px;
+}
+
+.aduit-img-box {
+  overflow: hidden;
+}
+
+.aduit-title {
+  margin-bottom: 5px;
+  border-bottom: 1px solid rgba(184, 178, 178, 0.2);
+  font-size: 18px;
+  letter-spacing: 1px;
+  font-family: "Helvetica";
+  color: #c7c7c7;
+}
+.title {
+  padding: 0px 4px 0px 0;
+  border-bottom: 3px solid #009688;
+}
+
+.illegalinfo .aduit-title .title {
+  border-color: #f56c6c;
+}
+
+.vehicleinfo .aduit-title .title {
+  border-color: #66b1ff;
+}
+
+.sub-info {
+  line-height: 35px;
+}
+
+.candidCamera,
+.vehicleinfo,
+.illegalinfo {
+  overflow: hidden;
+  margin-bottom: 3px;
+}
+
+.aduit-control {
+  float: right;
+}
+
+.ws-btn {
+  background: #47c9c7;
+  border-color: #acf9f4;
+  color: #fff;
+}
+
+.zf-btn {
+  background: #948b7e;
+  border-color: transparent;
+  color: #fff;
+}
+
+.audit_plate_1 {
+  background: #006ec7 !important;
+  font-size: 16px !important;
+  width: 60%;
+}
+.detail_hpzl_i {
+  width: 60%;
+}
+
+.img_box_w {
+  margin: 1px;
+  width: 33%;
+}
+.audit_plate_2 {
+  background: #27ea58 !important;
+  font-size: 20px !important;
+}
+.aduit-label,
+.aduit-info {
+  height: 30px;
+  line-height: 30px;
+  font-size: 14px;
+  overflow: hidden; /*设置超出的部分进行影藏*/
+  text-overflow: ellipsis; /*设置超出部分使用省略号*/
+  white-space: nowrap; /*设置为单行*/
+}
+</style>
+
+
+
+
+<script>
+//import imgZoom from 'vue2.0-zoom';
+
+export default {
+  components: {
+    //VuePhotoZoomPro
+  },
+  data() {
+    return {
+      mPageNumber:"",
+      ImgDTH: "",
+      videoJsUrl: "",
+      videoPlayUrl: "",
+      isDisable: true,
+      loading_status: false,
+      tip_info_veh: "",
+      tip_info_ill: "",
+      playerOptions: {},
+
+      /**  -------分页组件-------- */
+      pageSizes: [10, 20,30,40],
+      pageTotal: 400,
+      pageSize: 10,
+      currentPage4: 2,
+      pageNumber: 1,
+      /**------------------------- */
+
+      value2: "",
+      value3: "",
+
+      optionsPoint: [],
+      valuePoint: "",
+
+      optionsDevice: [],
+      valueDevice: "",
+      tableData: [],
+      multipleSelection: [],
+
+      /** 初始化查询条件的下拉框 */
+      optionsCjfs: [], //采集方式
+      valueCjfs: "",
+      optionsHpzl: [], //号牌种类
+      valueHpzl: "",
+      valueHpzlDT: "",
+      optionsXscd: [], //车道
+      valueXscd: "",
+      optionsShzt: [], //审核状态
+      valueShzt: "",
+      optionsWfxw: [],
+      optionsClzt: [],
+      optionsXsfx: [],
+      optionsCsys: [],
+      optionsSyxz: [],
+      optionsCllx: [],
+
+      whphm: "",
+      queryflag: "1", //表示查询标记：1普通查询，2、异常数据 3、异常时段
+
+      /** 菜单查询条件下拉框end */
+
+      dialogFormVisible: false,
+      dialogVideoVisible: false,
+
+      //-----------------------------------------------------------------
+      isXnyTrue: false,
+      isDisable: true,
+      resultData: {
+        camera: {
+          //抓拍信息
+          gatheroffice: "交通科技处",
+          feature_img: "",
+          plate_number: "",
+          plate_type: "1"
+        },
+        vehicleinfo: {
+          //车辆信息
+          car_clpp: "", //车辆类型
+          car_cllx: "", //车辆品牌
+          car_yxqz: "",
+          car_djrj: "",
+          car_color: "",
+          car_zt: "",
+          car_syxz: ""
+        },
+        illegal: {
+          event_dt: "",
+          lane_num: "",
+          direction: "",
+          address: "",
+          ill_address_code: "",
+          dev_unid: "",
+          ill_type: "",
+          ill_pic1: "",
+          ill_pic2: "",
+          ill_pic3: "",
+          ill_nid: ""
+        }
+      },
+      value: "",
+      //----------------------------------------------------------------------
+      selectIndexDetail: 0
+    };
+  },
+
+  methods: {
+    onLivePlay(vurl) {
+      this.playerOptions = {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
+            src: vurl //"/static/a.mp4" //url地址
+          }
+        ],
+        poster: "../../static/images/test.jpg", //你的封面地址
+        // width: document.documentElement.clientWidth, //播放器宽度
+        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          fullscreenToggle: true //全屏按钮
+        }
+      };
+    },
+
+    formatHpzl(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfoChangInt(row.carType, this.optionsHpzl);
+    },
+    formatWfxw(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfo(row.wfdm, this.optionsWfxw);
+    },
+
+
+    modifyFyNumber(){
+
+      var numReg = /^[0-9]+$/
+      var numRe = new RegExp(numReg)
+      if (!numRe.test(this.mPageNumber)) {
+        this.$message({
+          type: 'warning',
+          message: '请输入整数',
+          duration: 10000,
+          showClose: true,
+        })
+        return false
+      }
+      if(parseInt(this.mPageNumber)<=0){
+         this.$message({
+          type: 'warning',
+          message: '请输入大于0的整数',
+          duration: 10000,
+          showClose: true,
+        });
+        return false;
+      }
+      this.mPageNumber = parseInt(this.mPageNumber);
+      this.pageSize = this.mPageNumber;
+      this.pageNumber = 1;
+      this.searchQueryWzxx();
+    },
+
+    /** 分页组件方法 */
+    //--改变每页显示的数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.searchQueryWzxx();
+    },
+    handleCurrentChange(val) {
+      this.pageNumber = val;
+      this.searchQueryWzxx();
+    },
+    handlePagePrevClick(val) {
+      this.pageNumber = val;
+      this.searchQueryWzxx();
+    },
+    handlePageNextClick(val) {
+      this.pageNumber = val;
+      this.searchQueryWzxx();
+    },
+    /** --------------*/
+
+  searchQueryWzxxT(){
+    this.pageNumber = 1;
+    this.searchQueryWzxx();
+  },
+
+    /**
+     * 违法信息表查询
+     */
+    searchQueryWzxx() {
+      this.loading_status = true;
+      this.tableData = [];
+      let requestParam = JSON.stringify({
+        pageNumber: this.pageNumber,
+        pageSize: this.pageSize,
+        //------
+        cjfs: this.valueCjfs,
+        hpzl: this.valueHpzl,
+        pointcode: this.valuePoint,
+        carxscd: this.valueXscd,
+        shzt: this.valueShzt,
+        starttime:
+          this.value2 != ""
+            ? this.GCOMMON.formatDate(this.value2, "yyyy-MM-dd hh:mm:ss")
+            : "",
+        endtime:
+          this.value3 != ""
+            ? this.GCOMMON.formatDate(this.value3, "yyyy-MM-dd hh:mm:ss")
+            : "",
+        devicecode: this.valueDevice,
+        hphm: this.whphm,
+        sflag: this.queryflag
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/illquery/getWzlist", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.tableData = response.data.fsWzList;
+            this.pageTotal = response.data.pageTotal;
+            this.loading_status = false;
+          } else {
+            this.loading_status = false;
+            //this.publicShowMessage("warning", "分配异常");
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          this.loading_status = false;
+        });
+    },
+    //------------------
+    // 修改table header的背景色
+    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return "background-color:#2C2C4B;color: #fff;font-weight: 500;border:1px solid #153B5D;text-align:center;";
+      }
+    },
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    /**
+     * 初始化加载界面枚举信息
+     */
+    initEnumType() {
+      let requestParam = JSON.stringify({
+        flag: "2",
+        enumtypeids: [
+          {
+            147: "optionsCjfs"
+          },
+          {
+            170: "optionsHpzl"
+          },
+          {
+            151: "optionsXscd"
+          },
+          {
+            146: "optionsShzt"
+          },
+          {
+            38: "optionsClzt"
+          },
+          {
+            149: "optionsXsfx"
+          },
+          {
+            745: "optionsCsys"
+          },
+          {
+            872: "optionsSyxz"
+          },
+          {
+            833: "optionsCllx"
+          }
+        ]
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/enumtype/getEnumInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsCjfs = response.data.optionsCjfs;
+            this.optionsHpzl = response.data.optionsHpzl;
+            this.optionsXscd = response.data.optionsXscd;
+            this.optionsShzt = response.data.optionsShzt;
+            this.optionsClzt = response.data.optionsClzt;
+            this.optionsXsfx = response.data.optionsXsfx;
+            this.optionsCsys = response.data.optionsCsys;
+            this.optionsSyxz = response.data.optionsSyxz;
+            this.optionsCllx = response.data.optionsCllx;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    //---查看详情页
+    showIllInfo(index, row) {
+      this.selectIndexDetail = index;
+      this.dialogFormVisible = true;
+      this.showDetailInfoComm(this.selectIndexDetail);
+    },
+    /** 把选中的对象，显示出具体的信息 */
+    showDetailInfoComm(index) {
+      debugger;
+      var wzData = this.tableData[index];
+      this.resultData.camera.plate_number = wzData.carNo;
+      this.valueHpzlDT = wzData.carType;
+      this.getVehiclInfo(wzData.carType, wzData.carNo);
+      //-----------
+      if (
+        wzData.videourl != null &&
+        wzData.videourl != "" &&
+        wzData.videourl.length > 10
+      ) {
+        this.isDisable = false;
+        this.videoPlayUrl = wzData.videourl;
+      } else {
+        this.isDisable = true;
+        this.videoPlayUrl = "";
+      }
+      //----
+      this.resultData.illegal.event_dt = wzData.watchTime;
+      this.resultData.illegal.lane_num = wzData.carRoad;
+      this.resultData.illegal.dev_unid = wzData.deviceNo;
+      this.resultData.illegal.address = wzData.addName;
+      this.resultData.illegal.ill_address_code = wzData.addNo;
+      this.resultData.illegal.direction = wzData.direction;
+      // this.resultData.illegal.ill_pic1 = wzData.picurl1;
+      // this.resultData.illegal.ill_pic2 = wzData.picurl2;
+      // this.resultData.illegal.ill_pic3 = wzData.picurl3;
+
+      this.resultData.illegal.ill_pic1 = this.GCOMMON.imgPathAnalysis(
+        this.$API_VideoImg_URL,
+        wzData.picurl1
+      );
+      this.resultData.illegal.ill_pic2 = this.GCOMMON.imgPathAnalysis(
+        this.$API_VideoImg_URL,
+        wzData.picurl2
+      );
+      this.resultData.illegal.ill_pic3 = this.GCOMMON.imgPathAnalysis(
+        this.$API_VideoImg_URL,
+        wzData.picurl3
+      );
+
+      this.resultData.illegal.ill_type = wzData.wfdm;
+      this.resultData.illegal.ill_nid = wzData.nid;
+      this.tip_info_ill = wzData.datasource;
+      //-------调用方法查询单个车辆信息，根据车牌号码和车牌种类，可以把这个方法做成通用方法，很多地方都会用到
+    },
+
+    clearInfos() {
+      this.resultData.vehicleinfo.car_clpp = "";
+      this.resultData.vehicleinfo.car_cllx = "";
+      this.resultData.vehicleinfo.car_yxqz = "";
+      this.resultData.vehicleinfo.car_djrj = "";
+      this.resultData.vehicleinfo.car_color = "";
+      this.resultData.vehicleinfo.car_zt = "";
+      this.resultData.vehicleinfo.car_syxz = "";
+      this.tip_info_veh = "";
+    },
+
+    /**
+     * 修改了车牌号码
+     */
+    changeHphmEvent() {
+      if (
+        this.resultData.camera.plate_number.length == 7 ||
+        this.resultData.camera.plate_number.length == 8
+      ) {
+        this.getVehiclInfo(
+          this.valueHpzlDT,
+          this.resultData.camera.plate_number
+        );
+      }
+    },
+
+    onChangeHpzlEvent(val) {
+      //----获取到选中的value
+      //this.valueHpzlDT = val;
+
+      this.getVehiclInfo(this.valueHpzlDT, this.resultData.camera.plate_number);
+    },
+    /**
+     * 调用方法查询单个车辆信息，根据车牌号码和车牌种类，
+     * 可以把这个方法做成通用方法，很多地方都会用到
+     * 返回车辆的实体类json
+     */
+    getVehiclInfo(vhpzl, vhphm) {
+      this.clearInfos();
+      let requestParam = JSON.stringify({
+        hphm: vhphm,
+        hpzl: vhpzl
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/common/getVehicleInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            if (response.data.vehicle != null) {
+              let veh = response.data.vehicle;
+              this.resultData.vehicleinfo.car_clpp = veh.clpp1;
+              this.resultData.vehicleinfo.car_cllx = veh.cllx;
+              this.resultData.vehicleinfo.car_yxqz = veh.yxqz;
+              this.resultData.vehicleinfo.car_color = veh.csys;
+              this.resultData.vehicleinfo.car_zt = veh.zt;
+              this.resultData.vehicleinfo.car_syxz = veh.syxz;
+              this.resultData.vehicleinfo.car_djrj = veh.djrq;
+            } else {
+              this.tip_info_veh = "未找到车辆信息！";
+            }
+          } else {
+            this.tip_info_veh = "车辆信息查询失败！";
+          }
+        })
+        .catch(error => {
+          this.tip_info_veh = "车辆信息查询失败！";
+        });
+    },
+
+    nextDetailInfo() {
+      debugger;
+      if (this.selectIndexDetail == this.tableData.length) {
+        this.$message({ type: "waraing", message: "已经是最后一条了" });
+      } else {
+        this.selectIndexDetail++;
+        this.showDetailInfoComm(this.selectIndexDetail);
+      }
+    },
+    upDetailInfo() {
+      if (this.selectIndexDetail == 0) {
+        this.$message({ type: "waraing", message: "已经是第一条了" });
+      } else {
+        this.selectIndexDetail--;
+        this.showDetailInfoComm(this.selectIndexDetail);
+      }
+    },
+
+    //---详情界面
+    clickPlayVideo() {
+      //var wzData = this.tableData[this.selectIndexDetail];
+      //this.dialogVideoVisible = true;
+      //if (this.videoPlayUrl.indexOf("ftp://") == 0) {
+        //---001第一步先下载视频
+        var vpath = this.downVideoAnalysis();
+      //}
+    },
+
+    downVideoAnalysis() {
+      let vthis = this;
+      const loading = vthis.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+
+      var req_url_video = vthis.$API_VideoImg_URL;
+      let requestParam = JSON.stringify({
+        str1: vthis.videoPlayUrl
+      });
+
+      vthis.axios
+        .post(req_url_video + "/video/analysisVideoPath", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            debugger;
+            var vpathurl = response.data.vpath;
+            var reqJsUrl =
+              req_url_video + "/video/playLocalByte?vpath=" + vpathurl;
+            vthis.onLivePlay(reqJsUrl);
+            loading.close();
+            vthis.dialogVideoVisible = true;
+          } else {
+            loading.close();
+            vthis.$message({
+              type: "warning",
+              message: "视频加载失败"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          loading.close();
+        });
+    },
+
+    ///---------------------video play--------------------------------
+
+    initGetWfxw() {
+      let requestParam = JSON.stringify({
+        remapname: "optionsWfxw"
+      });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/common/getWfdmCode", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsWfxw = response.data.optionsWfxw;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    /**
+     * 同违法审核使用同一个接口，
+     * 有效数据按钮表示通过
+     * 无效数据按钮表示作废
+     */
+    handellAction(_b_flag_) {
+      //--------提取参数---
+      let requestParam = JSON.stringify({
+        nid: this.resultData.illegal.ill_nid,
+        actionFlag: _b_flag_,
+        userid: localStorage.getItem("username"),
+        username: localStorage.getItem("namemc"),
+        //-------------------------
+        auditHphm: this.resultData.camera.plate_number,
+        auditHpzl: this.valueHpzlDT,
+        auditWfdm: this.resultData.illegal.ill_type
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/illaudit/auditData", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            //---如果点击操作成功后，我们把ill_nid设为空
+            this.$message({ type: "success", message: "数据操作成功!" });
+          } else {
+            this.$message({ type: "warning", message: "数据操作失败!" });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    initGetMountPoint() {
+      // let requestParam = JSON.stringify({
+      //   remapname: "optionsWfxw"
+      // });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/mountpoint/getAllPoint", {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsPoint = response.data.pointList;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化安装点信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    initGetDeviceList() {
+      // let requestParam = JSON.stringify({
+      //   remapname: "optionsWfxw"
+      // });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/deviceinfo/getAllDevice", {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsDevice = response.data.deviceList;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化设备信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+  },
+  created() {
+    const loading = this.$loading({
+      lock: true,
+      text: "Loading",
+      spinner: "el-icon-loading",
+      background: "rgba(0, 0, 0, 0.7)"
+    });
+
+    this.value2 = new Date(
+      new Date().getFullYear(),
+      new Date().getMonth(),
+      new Date().getDate(),
+      0,
+      0,
+      0
+    );
+    this.value3 = new Date();
+
+    this.initEnumType();
+    this.initGetMountPoint();
+    this.initGetDeviceList();
+
+    this.$nextTick(function() {
+      this.ImgDTH = window.innerHeight - 510;
+      this.tableHeight =
+        window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 45;
+
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function() {
+        self.ImgDTH = window.innerHeight - 510;
+        self.tableHeight =
+          window.innerHeight - self.$refs.multipleTable.$el.offsetTop - 45;
+      };
+    });
+    this.initGetWfxw();
+
+    //---关闭loading
+    this.$nextTick(() => {
+      // 以服务的方式调用的 Loading 需要异步关闭
+      loading.close();
+    });
+  }
+  // mounted() {
+  //   this.initGetWfxw();
+  // }
+};
+</script>

web/src/views/enforcelaw/aduit/index.vue

+<template>
+  <div class="aduit-box">
+    <div class="aduit-img-box">
+      <el-row :gutter="2">
+      <el-col :span="8" class="audit_img_box">
+        <!-- <img :src="resultData.illegal.ill_pic1" alt> -->
+
+        <vue-photo-zoom-pro :url="ill_new_pic1"></vue-photo-zoom-pro>
+      </el-col>
+      <el-col :span="8" class="audit_img_box">
+        <!-- <img :src="resultData.illegal.ill_pic2" alt> -->
+
+        <vue-photo-zoom-pro :url="ill_new_pic2"></vue-photo-zoom-pro>
+      </el-col>
+      <el-col :span="8" class="audit_img_box">
+        <!-- <img :src="resultData.illegal.ill_pic3" alt> -->
+
+        <vue-photo-zoom-pro :url="ill_new_pic3"></vue-photo-zoom-pro>
+      </el-col>
+       </el-row>
+    </div>
+    <div class="candidCamera">
+      <div class="aduit-title">
+        <span class="title">车辆识别信息</span>
+      </div>
+      <div class="sub-info">
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">采集机关:</el-col>
+          <el-col :span="16" class="aduit-info">{{resultData.camera.gatheroffice}}</el-col>
+        </el-col>
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">特征图片:</el-col>
+          <el-col :span="16" class="aduit-info">{{resultData.camera.feature_img}}</el-col>
+        </el-col>
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">号牌号码:</el-col>
+          <!-- <el-col :span="16" class="aduit-info">{{resultData.camera.plate_number}}</el-col> -->
+          <el-col :span="16" class="aduit-info">
+            <el-input
+              :class="{audit_plate_2:isXnyTrue}"
+              class="audit_plate_1"
+              v-model="resultData.camera.plate_number"
+              @keyup.native="changeHphmEvent()"
+            ></el-input>
+          </el-col>
+        </el-col>
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">号牌种类:</el-col>
+          <el-col :span="16" class="aduit-info">
+            <el-select
+              v-model="resultData.camera.plate_type"
+              placeholder="请选择"
+              @change="onChangeHpzlEvent"
+            >
+              <el-option
+                v-for="item in optionsHpzl"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-col>
+        </el-col>
+      </div>
+    </div>
+    <div class="vehicleinfo">
+      <div class="aduit-title">
+        <span class="title">机动车信息</span>
+        <span class="tip_msg">{{tip_info_veh}}</span>
+      </div>
+      <div class="sub-info">
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">车辆品牌:</el-col>
+          <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_clpp1}}</el-col>
+        </el-col>
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">车辆类型:</el-col>
+          <el-col
+            :span="16"
+            class="aduit-info"
+          >{{this.GCOMMON.formatterInfo(resultData.vehicleinfo.car_cllx,optionsCllx)}}</el-col>
+        </el-col>
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">登记日期:</el-col>
+          <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_djrj}}</el-col>
+        </el-col>
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">有效期止:</el-col>
+          <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_yxqz}}</el-col>
+        </el-col>
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">车身颜色:</el-col>
+          <el-col
+            :span="16"
+            class="aduit-info"
+          >{{this.GCOMMON.formatterMoreInfo(resultData.vehicleinfo.car_color,optionsCsys)}}</el-col>
+        </el-col>
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">使用性质:</el-col>
+          <el-col
+            :span="16"
+            class="aduit-info"
+          >{{this.GCOMMON.formatterInfo(resultData.vehicleinfo.car_syxz,optionsSyxz)}}</el-col>
+        </el-col>
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">车辆状态:</el-col>
+          <el-col
+            :span="16"
+            class="aduit-info"
+          >{{this.GCOMMON.formatterMoreInfo(resultData.vehicleinfo.car_zt,optionsClzt)}}</el-col>
+        </el-col>
+      </div>
+    </div>
+    <div class="illegalinfo">
+      <div class="aduit-title">
+        <span class="title">车辆违法信息</span>
+        <span
+          class="tip_msg"
+        >{{this.GCOMMON.formatterInfo(resultData.illegal.ill_source,optionsCjfs)}}{{resultData.illegal.ill_wh_number}}</span>
+      </div>
+      <div class="sub-info">
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">违法时间:</el-col>
+          <el-col :span="16" class="aduit-info">{{resultData.illegal.event_dt}}</el-col>
+        </el-col>
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">车道编号:</el-col>
+          <!-- <el-col :span="16" class="aduit-info">{{resultData.illegal.lane_num}}</el-col> -->
+          <el-col
+            :span="16"
+            class="aduit-info"
+          >{{this.GCOMMON.formatterInfo(resultData.illegal.lane_num,optionsXscd)}}</el-col>
+        </el-col>
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">行驶方向:</el-col>
+          <el-col
+            :span="16"
+            class="aduit-info"
+          >{{this.GCOMMON.formatterInfo(resultData.illegal.direction,optionsXsfx)}}</el-col>
+        </el-col>
+        <el-col :span="6">
+          <el-col :span="5" class="aduit-label">违法地点:</el-col>
+          <el-col :span="16" class="aduit-info">{{resultData.illegal.address}}</el-col>
+        </el-col>
+        <el-row>
+          <el-col :span="6">
+            <el-col :span="5" class="aduit-label">地点代码:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.illegal.ill_address_code}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="5" class="aduit-label">设备编码:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.illegal.dev_unid}}</el-col>
+          </el-col>
+           <el-col :span="6">
+            <el-col :span="5" class="aduit-label">违法行为:</el-col>
+            <el-col :span="16" class="aduit-info">
+               <el-select v-model="resultData.illegal.ill_type" filterable placeholder="请选择">
+                <el-option
+                  v-for="item in optionsWfxw"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-col>
+          </el-col>
+        </el-row>
+        <el-row>
+        </el-row>
+      </div>
+    </div>
+    <div class="aduit-control">
+      <el-button class="playvideo" @click="clickPlayVideo" :disabled="isDisableVideo">播放视频</el-button>
+      <el-button class="shepai" @click="handellAction('falsePlate')" :disabled="isDisable">涉牌</el-button>
+      <el-button class="zf-btn" @click="handellAction('nullify')" :disabled="isDisable">作废</el-button>
+      <el-button class="success-btn" @click="handellAction('pass')" :disabled="isDisable">通过</el-button>
+      <!-- <el-button @click="handellAction('nextData')">下一条</el-button> -->
+    </div>
+
+    <el-dialog title="视频播放" width="60%" :visible.sync="dialogVideoVisible">
+      <video-player
+        class="video-player vjs-custom-skin"
+        ref="videoPlayer"
+        :playsinline="true"
+        :options="playerOptions"
+      ></video-player>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      playerOptions: {},
+      videoPlayUrl: "",
+      dialogVideoVisible: false,
+      optionsCjfs: [], //采集方式
+      tip_info_veh: "",
+      isXnyTrue: false,
+      isDisable: true,
+      isDisableVideo: true,
+      resultData: {
+        camera: {
+          //抓拍信息
+          gatheroffice: "交通科技处",
+          feature_img: "",
+          plate_number: "",
+          plate_type: ""
+        },
+        vehicleinfo: {
+          //车辆信息
+          car_clpp1: "", //车辆类型
+          car_cllx: "", //车辆品牌
+          car_yxqz: "",
+          car_djrj: "",
+          car_color: "",
+          car_zt: "",
+          car_syxz: ""
+        },
+        illegal: {
+          event_dt: "",
+          lane_num: "",
+          direction: "",
+          address: "",
+          ill_address_code: "",
+          dev_unid: "",
+          ill_type: "",
+          ill_pic1: "",
+          ill_pic2: "",
+          ill_pic3: "",
+          ill_source: "",
+          ill_nid: "",
+          ill_video: ""
+        }
+      },
+      ill_new_pic1: "",
+      ill_new_pic2: "",
+      ill_new_pic3: "",
+      value: "",
+      illoptions: [
+        {
+          value: "1",
+          label: "压线"
+        }
+      ],
+
+      optionsHpzl: [],
+      optionsXscd: [],
+      optionsClzt: [],
+      optionsXsfx: [],
+      optionsCsys: [],
+      optionsSyxz: [],
+      optionsCllx: [],
+      optionsWfxw: []
+    };
+  },
+  methods: {
+    onLivePlay(vurl) {
+      this.playerOptions = {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
+            src: vurl //"/static/a.mp4" //url地址
+          }
+        ],
+        poster: "../../static/images/test.jpg", //你的封面地址
+        // width: document.documentElement.clientWidth, //播放器宽度
+        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          fullscreenToggle: true //全屏按钮
+        }
+      };
+    },
+    clickPlayVideo() {
+      //var wzData = this.tableData[this.selectIndexDetail];
+      //this.dialogVideoVisible = true;
+      if (this.resultData.illegal.ill_video.indexOf("ftp://") == 0) {
+        //---001第一步先下载视频
+        var vpath = this.downVideoAnalysis();
+      }
+    },
+
+    downVideoAnalysis() {
+      let vthis = this;
+      const loading = vthis.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+
+      var req_url_video = vthis.$API_VideoImg_URL;
+      let requestParam = JSON.stringify({
+        str1: vthis.resultData.illegal.ill_video
+      });
+
+      vthis.axios
+        .post(req_url_video + "/video/analysisVideoPath", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            debugger;
+            var vpathurl = response.data.vpath;
+            var reqJsUrl =
+              req_url_video + "/video/playLocalByte?vpath=" + vpathurl;
+            vthis.onLivePlay(reqJsUrl);
+            loading.close();
+            vthis.dialogVideoVisible = true;
+          } else {
+            loading.close();
+            vthis.$message({
+              type: "warning",
+              message: "视频加载失败"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          loading.close();
+        });
+    },
+
+    //@error="imgError(resultData)"
+    // imgError(item) {
+    //    item.illegal.ill_pic1 = require('../../../assets/img/def_ill_img.png');
+    // },
+    getcode() {},
+    initNextData() {
+      var self = this;
+      let requestParam = JSON.stringify({
+        userid: localStorage.getItem("username")
+      });
+
+      self.isDisable = true; ///---按钮不可点
+      self.isXnyTrue = false;
+      self.axios
+        .post(self.$API_SERVICE_URL + "/illaudit/queryData", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            self.resultData.camera = response.data.camera;
+            self.resultData.vehicleinfo = response.data.vehicleinfo;
+            if (
+              response.data.vehicleinfo.car_cllx == null ||
+              response.data.vehicleinfo.car_cllx == ""
+            ) {
+              self.tip_info_veh = "未找到车辆信息！";
+            } else {
+              self.tip_info_veh = "";
+            }
+            self.resultData.illegal = response.data.illegal;
+            //-------------img
+            if (self.resultData.illegal.cimg_flag == "1") {
+              self.ill_new_pic1 = self.resultData.illegal.ill_pic1_http;
+              self.ill_new_pic2 = self.resultData.illegal.ill_pic2_http;
+              self.ill_new_pic3 = self.resultData.illegal.ill_pic3_http;
+            } else {
+              self.ill_new_pic1 = self.GCOMMON.imgPathAnalysis(
+                self.$API_VideoImg_URL,
+                self.resultData.illegal.ill_pic1
+              );
+              self.ill_new_pic2 = self.GCOMMON.imgPathAnalysis(
+                self.$API_VideoImg_URL,
+                self.resultData.illegal.ill_pic2
+              );
+              self.ill_new_pic3 = self.GCOMMON.imgPathAnalysis(
+                self.$API_VideoImg_URL,
+                self.resultData.illegal.ill_pic3
+              );
+            }
+
+            //=========================
+            self.isDisable = false;
+            if (self.resultData.illegal.ill_video != "") {
+              self.isDisableVideo = false;
+            } else {
+              self.isDisableVideo = true;
+            }
+            if (
+              self.resultData.camera.plate_type == "51" ||
+              self.resultData.camera.plate_type == "52"
+            ) {
+              self.isXnyTrue = true;
+            }
+          } else {
+            //-------
+            self.resultData.camera.plate_number = "";
+            self.$message({
+              type: "warning",
+              message: "没有待审核的数据!"
+            });
+          }
+        })
+        .catch(function(error) {
+          console.log(error);
+        });
+    },
+    //---最下面的按钮方法
+    handellAction(_b_flag_) {
+      //--------提取参数---
+      let requestParam = JSON.stringify({
+        nid: this.resultData.illegal.ill_nid,
+        actionFlag: _b_flag_,
+        userid: localStorage.getItem("username"),
+        username: localStorage.getItem("namemc"),
+        //-------------------------
+        auditHphm: this.resultData.camera.plate_number,
+        auditHpzl: this.resultData.camera.plate_type,
+        auditWfdm: this.resultData.illegal.ill_type
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/illaudit/auditData", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            //---如果点击操作成功后，我们把ill_nid设为空
+            this.resultData.illegal.ill_nid = "";
+            this.initNextData();
+          } else {
+            this.$message({
+              type: "warning",
+              message: "数据审核异常!"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    beforeunloadFn(e) {
+      //---用于监听关闭窗口事件
+      //---需要对后台进行一定的操作
+      this.closeWindows();
+    },
+
+closeWindows() {
+      let requestParam = JSON.stringify({
+        nid: this.resultData.illegal.ill_nid
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/illaudit/closeCK", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+
+
+
+
+    /**
+     * 初始化加载界面枚举信息
+     */
+    initEnumType() {
+      let requestParam = JSON.stringify({
+        flag: "2",
+        enumtypeids: [
+          {
+            170: "optionsHpzl"
+          },
+          {
+            151: "optionsXscd"
+          },
+          {
+            38: "optionsClzt"
+          },
+          {
+            149: "optionsXsfx"
+          },
+          {
+            745: "optionsCsys"
+          },
+          {
+            872: "optionsSyxz"
+          },
+          {
+            833: "optionsCllx"
+          },
+          {
+            147: "optionsCjfs"
+          }
+        ]
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/enumtype/getEnumInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsXscd = response.data.optionsXscd;
+            this.optionsHpzl = response.data.optionsHpzl;
+            this.optionsClzt = response.data.optionsClzt;
+            this.optionsXsfx = response.data.optionsXsfx;
+            this.optionsCsys = response.data.optionsCsys;
+            this.optionsSyxz = response.data.optionsSyxz;
+            this.optionsCllx = response.data.optionsCllx;
+            this.optionsCjfs = response.data.optionsCjfs;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    /**
+     * 修改了车牌号码
+     */
+    changeHphmEvent() {
+      if (
+        this.resultData.camera.plate_number.length == 7 ||
+        this.resultData.camera.plate_number.length == 8
+      ) {
+        this.getVehiclInfo(
+          this.resultData.camera.plate_type,
+          this.resultData.camera.plate_number
+        );
+      }
+    },
+
+    onChangeHpzlEvent(val) {
+      //----获取到选中的value
+
+      this.resultData.camera.plate_type = val;
+
+      if (
+        this.resultData.camera.plate_number.length == 7 ||
+        this.resultData.camera.plate_number.length == 8
+      ) {
+        this.getVehiclInfo(
+          this.resultData.camera.plate_type,
+          this.resultData.camera.plate_number
+        );
+      }
+    },
+    /**
+     * 调用方法查询单个车辆信息，根据车牌号码和车牌种类，
+     * 可以把这个方法做成通用方法，很多地方都会用到
+     * 返回车辆的实体类json
+     */
+    getVehiclInfo(vhpzl, vhphm) {
+      this.clearInfos();
+      let requestParam = JSON.stringify({
+        hphm: vhphm,
+        hpzl: vhpzl
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/common/getVehicleInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            if (response.data.vehicle != null) {
+              let veh = response.data.vehicle;
+              this.resultData.vehicleinfo.car_clpp1 = veh.clpp1;
+              this.resultData.vehicleinfo.car_cllx = veh.cllx;
+              this.resultData.vehicleinfo.car_yxqz = veh.yxqz;
+              this.resultData.vehicleinfo.car_color = veh.csys;
+              this.resultData.vehicleinfo.car_zt = veh.zt;
+              this.resultData.vehicleinfo.car_syxz = veh.syxz;
+              this.resultData.vehicleinfo.car_djrj = veh.djrq;
+            } else {
+              this.tip_info_veh = "未找到车辆信息！";
+            }
+          } else {
+            this.tip_info_veh = "车辆信息查询失败！";
+          }
+        })
+        .catch(error => {
+          this.tip_info_veh = "车辆信息查询失败！";
+        });
+    },
+    clearInfos() {
+      this.resultData.vehicleinfo.car_clpp1 = "";
+      this.resultData.vehicleinfo.car_cllx = "";
+      this.resultData.vehicleinfo.car_yxqz = "";
+      this.resultData.vehicleinfo.car_djrj = "";
+      this.resultData.vehicleinfo.car_color = "";
+      this.resultData.vehicleinfo.car_zt = "";
+      this.resultData.vehicleinfo.car_syxz = "";
+      this.tip_info_veh = "";
+    },
+
+    initGetWfxw() {
+      let requestParam = JSON.stringify({
+        remapname: "optionsWfxw"
+      });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/common/getWfdmCode", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsWfxw = response.data.optionsWfxw;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+  },
+
+  created: function() {
+    var _this = this;
+    document.onkeydown = function(e) {
+      let key = window.event.keyCode;
+      if (key == 32) {
+        _this.handellAction("nullify"); //space用于删除
+      }
+      if (key != 32 && window.event.ctrlKey == true) {
+        _this.handellAction("pass"); //ctrl用于通过
+      }
+    };
+  },
+  mounted() {
+    this.initEnumType();
+    this.initGetWfxw();
+    window.addEventListener("beforeunload", e => this.beforeunloadFn(e));
+    this.initNextData();
+  },
+  destroyed() {
+    window.removeEventListener("beforeunload", e => this.beforeunloadFn(e));
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+.tip_msg {
+  color: red;
+  text-align: right;
+  font-size: 14px;
+  margin-left: 20px;
+}
+
+.aduit-box {
+  background #fff
+  width: 99%;
+  height 100vh
+  color #333
+  margin: 0 auto;
+}
+.aduit-info{
+  color #959595
+}
+.aduit-img-box img {
+  width: 100%;
+}
+
+.aduit-img-box {
+  overflow: hidden;
+}
+
+.aduit-title {
+  margin-bottom: 5px;
+  font-size: 18px;
+  letter-spacing: 1px;
+  font-family: 'Helvetica';
+  color: #c7c7c7;
+  line-height 38px
+  background #f6f9ff
+  color #fff
+  .title {
+    display inline-block
+    height 38px
+    width 203px
+    background:url('../../../assets/img/illaditheader.png') no-repeat;
+    padding: 0px 4px 0px 4px;
+  }
+}
+
+.illegalinfo .aduit-title .title {
+  border-color: #F56C6C;
+}
+
+.vehicleinfo .aduit-title .title {
+  border-color: #66b1ff;
+}
+
+.sub-info {
+  line-height: 35px;
+  margin 30px 0 30px 0
+  overflow hidden
+}
+
+.candidCamera, .vehicleinfo, .illegalinfo {
+  overflow: hidden;
+  margin-bottom: 3px;
+  margin-top: 8px;
+}
+
+.aduit-control {
+  float: right;
+}
+.aduit-label {
+  font-weight 600
+  margin-left 20px
+}
+.ws-btn {
+  background: #47c9c7;
+  border-color: #acf9f4;
+  color: #fff;
+}
+
+.zf-btn,.playvideo,.shepai,.success-btn {
+  width 120px
+  background: #ff7c93;
+  border-color: transparent;
+  color: #fff;
+  border-radius 5px
+}
+.playvideo{
+  background #5dd8a2
+}
+.shepai{
+  background #ffbe30
+}
+.success-btn{
+  margin 50px 60px 0 10px
+  background #1d72ff
+}
+.audit_plate_1 {
+  background: #f8f8f8 !important;
+  font-size: 20px !important;
+  border-radius 22px
+}
+
+.audit_plate_2 {
+  background: #27EA58 !important;
+  font-size: 20px !important;
+}
+
+</style>
+

web/src/views/enforcelaw/auditCheck/index.vue

+<template>
+  <div class="content_div_main">
+    <div class="head_condition_type">
+      <el-form :inline="true" class="demo-form-inline" size="small">
+        <el-form-item>
+          <el-select v-model="valueCjfs" clearable placeholder="采集方式">
+            <!-- <el-option label="闯红灯设备" value="1"></el-option>
+            <el-option label="尾号限行" value="12"></el-option>-->
+            <el-option
+              v-for="item in optionsCjfs"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select v-model="valueHpzl" clearable placeholder="号牌种类">
+            <!-- <el-option label="小型汽车" value="02"></el-option>
+            <el-option label="大型汽车" value="01"></el-option>-->
+            <el-option
+              v-for="item in optionsHpzl"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <!-- <el-form-item>
+          <el-select v-model="valuePoint" clearable filterable placeholder="请选择安装点">
+            <el-option
+              v-for="item in optionsPoint"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>-->
+
+        <!-- <el-form-item>
+          <el-select v-model="valueXscd" clearable placeholder="行驶车道">
+            <el-option
+              v-for="item in optionsXscd"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>-->
+
+        <el-form-item>
+          <el-select v-model="valueShzt" clearable placeholder="审核状态">
+            <el-option
+              v-for="item in optionsShzt"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-date-picker
+            v-model="value2"
+            type="datetime"
+            class="commone_w"
+            format="yyyy-MM-dd HH:mm:ss"
+            clearable="false"
+            placeholder="开始时间"
+            align="right"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-date-picker
+            v-model="value3"
+            type="datetime"
+            class="commone_w"
+            format="yyyy-MM-dd HH:mm:ss"
+            clearable="false"
+            placeholder="结束时间"
+            align="right"
+          ></el-date-picker>
+        </el-form-item>
+
+        <!-- <el-form-item>
+          <el-select v-model="valueDevice" clearable filterable placeholder="请选择采集设备">
+            <el-option
+              v-for="item in optionsDevice"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>-->
+
+        <el-form-item>
+          <el-input placeholder="号牌号码" v-model="whphm" class="commone_w"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-col style="color:#fff652;">*以上时间指数据被审核时间</el-col>
+        </el-form-item>
+        <el-button size="small" type="primary" @click="searchQueryWzxxT">查询</el-button>
+      </el-form>
+    </div>
+
+    <div class="table_m_type">
+      <el-table
+        v-loading="loading_status"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        ref="multipleTable"
+        :data="tableData"
+        :height="tableHeight"
+        :header-cell-style="tableHeaderColor"
+        tooltip-effect="dark"
+        style="width: 100%"
+        :default-sort="{prop: 'date', order: 'descending'}"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column label="号牌号码" prop="carNo" width="120px" sortable>
+          <template slot-scope="scope">{{ scope.row.carNo }}</template>
+        </el-table-column>
+        <el-table-column label="号牌种类" prop="carType" width="120px" :formatter="formatHpzl"></el-table-column>
+
+        <el-table-column label="违法时间" prop="watchTime" width="160px" sortable>
+          <template slot-scope="scope">{{ scope.row.watchTime }}</template>
+        </el-table-column>
+
+        <el-table-column prop="addName" label="违法地点" show-overflow-tooltip></el-table-column>
+
+        <el-table-column prop="wfdm" label="违法行为" :formatter="formatWfxw"></el-table-column>
+
+        <el-table-column prop="shryid" label="审核人员"></el-table-column>
+        <el-table-column prop="scryid" label="作废人员"></el-table-column>
+        <el-table-column prop="status" label="分拣状态" :formatter="formatShzt"></el-table-column>
+        <el-table-column prop="selecttime" label="分拣时间" sortable>
+          <template slot-scope="scope">{{ scope.row.selecttime }}</template>
+        </el-table-column>
+
+        <el-table-column prop="nid" v-if="false" label="NID" width="0"></el-table-column>
+
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button size="mini" type="info" @click="showIllInfo(scope.$index, scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="block">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        @prev-click="handlePagePrevClick"
+        @next-click="handlePageNextclick"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        :current-page.sync="pageNumber"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pageTotal"
+      ></el-pagination>
+    </div>
+
+    <!-- 违法详情弹出界面 -->
+    <!--打开分配小组任务的dialog-->
+    <el-dialog title="违法详情" width="98%" top="1vh" :visible.sync="dialogFormVisible">
+      <div class="aduit-img-box">
+        <el-col :span="8" class="img_box_w" :style="'height:'+ImgDTH+'px;'" size="mini">
+          <!-- <img-zoom src="http://193.5.103.124:8083/5251522281554187435986/2019/06/12/15/zhbrt1933128193kk/15421856167233004.jpg?fid=199878-4535680029-23E71FD-A849C"
+            bigsrc="http://193.5.103.124:8083/5251522281554187435986/2019/06/12/15/zhbrt1933128193kk/15421856167233004.jpg?fid=199878-4535680029-23E71FD-A849C" :configs="configs"></img-zoom>
+          -->
+
+          <vue-photo-zoom-pro :url="resultData.illegal.ill_pic1"></vue-photo-zoom-pro>
+        </el-col>
+        <el-col :span="8" class="img_box_w" :style="'height:'+ImgDTH+'px;'" size="mini">
+          <vue-photo-zoom-pro :url="resultData.illegal.ill_pic2"></vue-photo-zoom-pro>
+        </el-col>
+        <el-col :span="8" class="img_box_w" :style="'height:'+ImgDTH+'px;'" size="mini">
+          <vue-photo-zoom-pro :url="resultData.illegal.ill_pic3"></vue-photo-zoom-pro>
+        </el-col>
+      </div>
+
+      <div class="candidCamera">
+        <div class="aduit-title">
+          <span class="title">车辆识别信息</span>
+        </div>
+        <el-col :span="6">
+          <el-col :span="6" class="aduit-label">采集机关:</el-col>
+          <el-col :span="12" class="aduit-info">贵阳市交通科技处</el-col>
+        </el-col>
+
+        <el-col :span="6">
+          <el-col :span="6" class="aduit-label">特征图片:</el-col>
+          <el-col :span="12" class="aduit-info">*</el-col>
+        </el-col>
+
+        <el-col :span="6">
+          <el-col :span="6" class="aduit-label">号牌号码:</el-col>
+          <el-input
+            :class="{audit_plate_2:isXnyTrue}"
+            class="audit_plate_1"
+            v-model="resultData.camera.plate_number"
+            @keyup.native="changeHphmEvent()"
+          ></el-input>
+        </el-col>
+
+        <el-col :span="6">
+          <el-col :span="6" class="aduit-label">号牌种类:</el-col>
+          <el-select
+            v-model="valueHpzlDT"
+            class="detail_hpzl_i"
+            placeholder="号牌种类"
+            @change="onChangeHpzlEvent"
+          >
+            <!-- <el-option label="小型汽车" value="02"></el-option>
+            <el-option label="大型汽车" value="01"></el-option>-->
+            <el-option
+              v-for="item in optionsHpzl"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-col>
+      </div>
+      <div class="vehicleinfo">
+        <div class="aduit-title">
+          <span class="title">机动车信息</span>
+          <span class="tip_msg">{{tip_info_veh}}</span>
+        </div>
+
+        <div class="sub-info">
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">车辆品牌:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_clpp}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">车辆类型:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterInfo(resultData.vehicleinfo.car_cllx,optionsCllx)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">登记日期:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_djrj}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">有效期止:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_yxqz}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">车身颜色:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterMoreInfo(resultData.vehicleinfo.car_color,optionsCsys)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">使用性质:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterInfo(resultData.vehicleinfo.car_syxz,optionsSyxz)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">车辆状态:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterMoreInfo(resultData.vehicleinfo.car_zt,optionsClzt)}}</el-col>
+          </el-col>
+        </div>
+      </div>
+
+      <div class="illegalinfo">
+        <div class="aduit-title">
+          <span class="title">车辆违法信息</span>
+          <!-- <span class="tip_msg">{{this.GCOMMON.formatterInfo(tip_info_ill,optionsCjfs)}}</span> -->
+        </div>
+
+        <div class="sub-info">
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">违法时间:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.illegal.event_dt}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">行驶车道:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterInfo(resultData.illegal.lane_num,optionsXscd)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">行驶方向:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterInfo(resultData.illegal.direction,optionsXsfx)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">违法地点:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.illegal.address}}</el-col>
+          </el-col>
+          <el-row>
+            <el-col :span="6">
+              <el-col :span="6" class="aduit-label">地点代码:</el-col>
+              <el-col :span="16" class="aduit-info">{{resultData.illegal.ill_address_code}}</el-col>
+            </el-col>
+            <el-col :span="6">
+              <el-col :span="6" class="aduit-label">设备编码:</el-col>
+              <el-col :span="16" class="aduit-info">{{resultData.illegal.dev_unid}}</el-col>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="6">
+              <el-col :span="6" class="aduit-label">违法行为:</el-col>
+              <el-col :span="16">
+                <el-select v-model="resultData.illegal.ill_type" placeholder="请选择">
+                  <el-option
+                    v-for="item in optionsWfxw"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  ></el-option>
+                </el-select>
+              </el-col>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" type="success" @click="clickPlayVideo" :disabled="isDisable">视频播放</el-button>
+        <el-button size="mini" type="warning" @click="handellAction('nullify')">无效数据</el-button>
+        <el-button size="mini" type="success" @click="handellAction('pass')">有效数据</el-button>
+        <el-button size="mini" type="primary" @click="upDetailInfo()">上一条</el-button>
+        <el-button size="mini" type="primary" @click="nextDetailInfo()">下一条</el-button>
+        <el-button size="mini" @click="dialogFormVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+    <!--      end      -->
+
+    <el-dialog title="视频播放" width="60%" :visible.sync="dialogVideoVisible">
+      <video-player
+        class="video-player vjs-custom-skin"
+        ref="videoPlayer"
+        :playsinline="true"
+        :options="playerOptions"
+      ></video-player>
+    </el-dialog>
+  </div>
+</template>
+
+
+
+<style scoped>
+.tip_msg {
+  color: red;
+  text-align: right;
+  font-size: 14px;
+  margin-left: 20px;
+}
+.pic-box {
+  width: 33%;
+  height: 33%;
+}
+
+.demo-form-inline {
+  margin-top: 5px;
+  margin-left: 5px;
+}
+.head_condition_type {
+  height: auto;
+  color: #333;
+  filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
+  -moz-box-shadow: 2px 2px 10px #909090;
+  -webkit-box-shadow: 2px 2px 10px #909090;
+  box-shadow: 2px 2px 4px #909090;
+}
+.commone_w {
+  /* 设置时间框同其他框一样的宽度 */
+  width: 215px;
+}
+
+/** ---------------------------------------  **/
+
+.aduit-box {
+  width: 95%;
+  margin: 0 auto;
+}
+
+.aduit-img-box img {
+  width: 100%;
+  margin: 1px;
+}
+
+.aduit-img-box {
+  overflow: hidden;
+}
+
+.aduit-title {
+  margin-bottom: 5px;
+  border-bottom: 1px solid rgba(184, 178, 178, 0.2);
+  font-size: 18px;
+  letter-spacing: 1px;
+  font-family: "Helvetica";
+  color: #c7c7c7;
+}
+.title {
+  padding: 0px 4px 0px 0;
+  border-bottom: 3px solid #009688;
+}
+
+.illegalinfo .aduit-title .title {
+  border-color: #f56c6c;
+}
+
+.vehicleinfo .aduit-title .title {
+  border-color: #66b1ff;
+}
+
+.sub-info {
+  line-height: 35px;
+}
+
+.candidCamera,
+.vehicleinfo,
+.illegalinfo {
+  overflow: hidden;
+  margin-bottom: 3px;
+}
+
+.aduit-control {
+  float: right;
+}
+
+.ws-btn {
+  background: #47c9c7;
+  border-color: #acf9f4;
+  color: #fff;
+}
+
+.zf-btn {
+  background: #948b7e;
+  border-color: transparent;
+  color: #fff;
+}
+
+.audit_plate_1 {
+  background: #006ec7 !important;
+  font-size: 16px !important;
+  width: 60%;
+}
+.detail_hpzl_i {
+  width: 60%;
+}
+
+.img_box_w {
+  margin: 1px;
+  width: 33%;
+  height: 260px;
+}
+.audit_plate_2 {
+  background: #27ea58 !important;
+  font-size: 20px !important;
+}
+.aduit-label,
+.aduit-info {
+  height: 30px;
+  line-height: 30px;
+  font-size: 14px;
+  overflow: hidden; /*设置超出的部分进行影藏*/
+  text-overflow: ellipsis; /*设置超出部分使用省略号*/
+  white-space: nowrap; /*设置为单行*/
+}
+</style>
+
+
+
+
+<script>
+//import imgZoom from 'vue2.0-zoom';
+
+export default {
+  components: {
+    //VuePhotoZoomPro
+  },
+  data() {
+    return {
+      ImgDTH: "",
+      shOpertor: "",
+      videoJsUrl: "",
+      videoPlayUrl: "",
+      isDisable: true,
+      loading_status: false,
+      tip_info_veh: "",
+      tip_info_ill: "",
+      playerOptions: {},
+
+      /**  -------分页组件-------- */
+      pageSizes: [10, 20, 40, 60],
+      pageTotal: 0,
+      pageSize: 10,
+      currentPage4: 2,
+      pageNumber: 1,
+      /**------------------------- */
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "今天",
+            onClick(picker) {
+              picker.$emit("pick", new Date());
+            }
+          },
+          {
+            text: "昨天",
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit("pick", date);
+            }
+          },
+          {
+            text: "一周前",
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", date);
+            }
+          }
+        ]
+      },
+      value2: "",
+      value3: "",
+
+      optionsPoint: [],
+      valuePoint: "",
+
+      optionsDevice: [],
+      valueDevice: "",
+      tableData: [],
+      multipleSelection: [],
+
+      /** 初始化查询条件的下拉框 */
+      optionsCjfs: [], //采集方式
+      valueCjfs: "",
+      optionsHpzl: [], //号牌种类
+      valueHpzl: "",
+      valueHpzlDT: "",
+      optionsXscd: [], //车道
+      valueXscd: "",
+      optionsShzt: [], //审核状态
+      valueShzt: "",
+      optionsWfxw: [],
+      optionsClzt: [],
+      optionsXsfx: [],
+      optionsCsys: [],
+      optionsSyxz: [],
+      optionsCllx: [],
+
+      whphm: "",
+      queryflag: "1", //表示查询标记：1普通查询，2、异常数据 3、异常时段
+
+      /** 菜单查询条件下拉框end */
+
+      dialogFormVisible: false,
+      dialogVideoVisible: false,
+
+      //-----------------------------------------------------------------
+      isXnyTrue: false,
+      isDisable: true,
+      resultData: {
+        camera: {
+          //抓拍信息
+          gatheroffice: "交通科技处",
+          feature_img: "",
+          plate_number: "",
+          plate_type: "1"
+        },
+        vehicleinfo: {
+          //车辆信息
+          car_clpp: "", //车辆类型
+          car_cllx: "", //车辆品牌
+          car_yxqz: "",
+          car_djrj: "",
+          car_color: "",
+          car_zt: "",
+          car_syxz: ""
+        },
+        illegal: {
+          event_dt: "",
+          lane_num: "",
+          direction: "",
+          address: "",
+          ill_address_code: "",
+          dev_unid: "",
+          ill_type: "",
+          ill_pic1: "",
+          ill_pic2: "",
+          ill_pic3: "",
+          ill_nid: ""
+        }
+      },
+      value: "",
+      //----------------------------------------------------------------------
+      selectIndexDetail: 0
+    };
+  },
+
+  methods: {
+    onLivePlay(vurl) {
+      this.playerOptions = {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
+            src: vurl //"/static/a.mp4" //url地址
+          }
+        ],
+        poster: "../../static/images/test.jpg", //你的封面地址
+        // width: document.documentElement.clientWidth, //播放器宽度
+        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          fullscreenToggle: true //全屏按钮
+        }
+      };
+    },
+
+    formatHpzl(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfoChangInt(row.carType, this.optionsHpzl);
+    },
+    formatWfxw(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfo(row.wfdm, this.optionsWfxw);
+    },
+    formatShzt(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfo(row.status, this.optionsShzt);
+    },
+
+    /** 分页组件方法 */
+    //--改变每页显示的数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.searchQueryWzxx();
+    },
+    handleCurrentChange(val) {
+      this.pageNumber = val;
+      this.searchQueryWzxx();
+    },
+    handlePagePrevClick(val) {
+      this.pageNumber = val;
+      this.searchQueryWzxx();
+    },
+    handlePageNextClick(val) {
+      this.pageNumber = val;
+      this.searchQueryWzxx();
+    },
+    /** --------------*/
+
+    searchQueryWzxxT(){
+      this.pageNumber = 1;
+      this.searchQueryWzxx();
+    },
+
+    /**
+     * 违法信息表查询
+     */
+    searchQueryWzxx() {
+      this.loading_status = true;
+      this.tableData = [];
+      let requestParam = JSON.stringify({
+        pageNumber: this.pageNumber,
+        pageSize: this.pageSize,
+        //------
+        cjfs: this.valueCjfs,
+        hpzl: this.valueHpzl,
+        shzt: this.valueShzt,
+        starttime:
+          this.value2 != ""
+            ? this.GCOMMON.formatDate(this.value2, "yyyy-MM-dd hh:mm:ss")
+            : "",
+        endtime:
+          this.value3 != ""
+            ? this.GCOMMON.formatDate(this.value3, "yyyy-MM-dd hh:mm:ss")
+            : "",
+        userid: localStorage.getItem("username"),
+        hphm: this.whphm,
+        sflag: this.queryflag
+      });
+      this.axios
+        .post(
+          this.$API_SERVICE_URL + "/illquery/getUserAuditlist",
+          requestParam,
+          {
+            headers: {
+              "Content-Type": "application/json;charset=utf-8" //头部信息
+            }
+          }
+        )
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.tableData = response.data.fsWzList;
+            this.pageTotal = response.data.pageTotal;
+            this.loading_status = false;
+          } else {
+            this.loading_status = false;
+            //this.publicShowMessage("warning", "分配异常");
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          this.loading_status = false;
+        });
+    },
+    //------------------
+    // 修改table header的背景色
+    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return "background-color:#2C2C4B;color: #fff;font-weight: 500;border:1px solid #153B5D;text-align:center;";
+      }
+    },
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    /**
+     * 初始化加载界面枚举信息
+     */
+    initEnumType() {
+      let requestParam = JSON.stringify({
+        flag: "2",
+        enumtypeids: [
+          {
+            147: "optionsCjfs"
+          },
+          {
+            170: "optionsHpzl"
+          },
+          {
+            151: "optionsXscd"
+          },
+          {
+            145: "optionsShzt"
+          },
+          {
+            38: "optionsClzt"
+          },
+          {
+            149: "optionsXsfx"
+          },
+          {
+            745: "optionsCsys"
+          },
+          {
+            872: "optionsSyxz"
+          },
+          {
+            833: "optionsCllx"
+          }
+        ]
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/enumtype/getEnumInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsCjfs = response.data.optionsCjfs;
+            this.optionsHpzl = response.data.optionsHpzl;
+            this.optionsXscd = response.data.optionsXscd;
+            this.optionsShzt = response.data.optionsShzt;
+            this.optionsClzt = response.data.optionsClzt;
+            this.optionsXsfx = response.data.optionsXsfx;
+            this.optionsCsys = response.data.optionsCsys;
+            this.optionsSyxz = response.data.optionsSyxz;
+            this.optionsCllx = response.data.optionsCllx;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    //---查看详情页
+    showIllInfo(index, row) {
+      this.selectIndexDetail = index;
+      this.dialogFormVisible = true;
+      this.showDetailInfoComm(this.selectIndexDetail);
+    },
+    /** 把选中的对象，显示出具体的信息 */
+    showDetailInfoComm(index) {
+      debugger;
+      var wzData = this.tableData[index];
+      this.resultData.camera.plate_number = wzData.carNo;
+      this.valueHpzlDT = wzData.carType;
+      this.getVehiclInfo(wzData.carType, wzData.carNo);
+      //-----------
+      if (
+        wzData.videourl != null &&
+        wzData.videourl != "" &&
+        wzData.videourl.length > 10
+      ) {
+        this.isDisable = false;
+        this.videoPlayUrl = wzData.videourl;
+      } else {
+        this.isDisable = true;
+        this.videoPlayUrl = "";
+      }
+      //----
+      this.resultData.illegal.event_dt = wzData.watchTime;
+      this.resultData.illegal.lane_num = wzData.carRoad;
+      this.resultData.illegal.dev_unid = wzData.deviceNo;
+      this.resultData.illegal.address = wzData.addName;
+      this.resultData.illegal.ill_address_code = wzData.addNo;
+      this.resultData.illegal.direction = wzData.direction;
+      // this.resultData.illegal.ill_pic1 = wzData.picurl1;
+      // this.resultData.illegal.ill_pic2 = wzData.picurl2;
+      // this.resultData.illegal.ill_pic3 = wzData.picurl3;
+
+      this.resultData.illegal.ill_pic1 = this.GCOMMON.imgPathAnalysis(
+        this.$API_VideoImg_URL,
+        wzData.picurl1
+      );
+      this.resultData.illegal.ill_pic2 = this.GCOMMON.imgPathAnalysis(
+        this.$API_VideoImg_URL,
+        wzData.picurl2
+      );
+      this.resultData.illegal.ill_pic3 = this.GCOMMON.imgPathAnalysis(
+        this.$API_VideoImg_URL,
+        wzData.picurl3
+      );
+
+      this.resultData.illegal.ill_type = wzData.wfdm;
+      this.resultData.illegal.ill_nid = wzData.nid;
+      this.tip_info_ill = wzData.datasource;
+      //-------调用方法查询单个车辆信息，根据车牌号码和车牌种类，可以把这个方法做成通用方法，很多地方都会用到
+    },
+
+    clearInfos() {
+      this.resultData.vehicleinfo.car_clpp = "";
+      this.resultData.vehicleinfo.car_cllx = "";
+      this.resultData.vehicleinfo.car_yxqz = "";
+      this.resultData.vehicleinfo.car_djrj = "";
+      this.resultData.vehicleinfo.car_color = "";
+      this.resultData.vehicleinfo.car_zt = "";
+      this.resultData.vehicleinfo.car_syxz = "";
+      this.tip_info_veh = "";
+    },
+
+    /**
+     * 修改了车牌号码
+     */
+    changeHphmEvent() {
+      if (
+        this.resultData.camera.plate_number.length == 7 ||
+        this.resultData.camera.plate_number.length == 8
+      ) {
+        this.getVehiclInfo(
+          this.valueHpzlDT,
+          this.resultData.camera.plate_number
+        );
+      }
+    },
+
+    onChangeHpzlEvent(val) {
+      //----获取到选中的value
+      //this.valueHpzlDT = val;
+
+      this.getVehiclInfo(this.valueHpzlDT, this.resultData.camera.plate_number);
+    },
+    /**
+     * 调用方法查询单个车辆信息，根据车牌号码和车牌种类，
+     * 可以把这个方法做成通用方法，很多地方都会用到
+     * 返回车辆的实体类json
+     */
+    getVehiclInfo(vhpzl, vhphm) {
+      this.clearInfos();
+      let requestParam = JSON.stringify({
+        hphm: vhphm,
+        hpzl: vhpzl
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/common/getVehicleInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            if (response.data.vehicle != null) {
+              let veh = response.data.vehicle;
+              this.resultData.vehicleinfo.car_clpp = veh.clpp1;
+              this.resultData.vehicleinfo.car_cllx = veh.cllx;
+              this.resultData.vehicleinfo.car_yxqz = veh.yxqz;
+              this.resultData.vehicleinfo.car_color = veh.csys;
+              this.resultData.vehicleinfo.car_zt = veh.zt;
+              this.resultData.vehicleinfo.car_syxz = veh.syxz;
+              this.resultData.vehicleinfo.car_djrj = veh.djrq;
+            } else {
+              this.tip_info_veh = "未找到车辆信息！";
+            }
+          } else {
+            this.tip_info_veh = "车辆信息查询失败！";
+          }
+        })
+        .catch(error => {
+          this.tip_info_veh = "车辆信息查询失败！";
+        });
+    },
+
+    nextDetailInfo() {
+      debugger;
+      if (this.selectIndexDetail == this.tableData.length) {
+        this.$message({ type: "waraing", message: "已经是最后一条了" });
+      } else {
+        this.selectIndexDetail++;
+        this.showDetailInfoComm(this.selectIndexDetail);
+      }
+    },
+    upDetailInfo() {
+      if (this.selectIndexDetail == 0) {
+        this.$message({ type: "waraing", message: "已经是第一条了" });
+      } else {
+        this.selectIndexDetail--;
+        this.showDetailInfoComm(this.selectIndexDetail);
+      }
+    },
+
+    //---详情界面
+    clickPlayVideo() {
+      //var wzData = this.tableData[this.selectIndexDetail];
+      //this.dialogVideoVisible = true;
+      if (this.videoPlayUrl.indexOf("ftp://") == 0) {
+        //---001第一步先下载视频
+        var vpath = this.downVideoAnalysis();
+      }
+    },
+
+    downVideoAnalysis() {
+      let vthis = this;
+      const loading = vthis.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+
+      var req_url_video = vthis.$API_VideoImg_URL;
+      let requestParam = JSON.stringify({
+        str1: vthis.videoPlayUrl
+      });
+
+      vthis.axios
+        .post(req_url_video + "/video/analysisVideoPath", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            debugger;
+            var vpathurl = response.data.vpath;
+            var reqJsUrl =
+              req_url_video + "/video/playLocalByte?vpath=" + vpathurl;
+            vthis.onLivePlay(reqJsUrl);
+            loading.close();
+            vthis.dialogVideoVisible = true;
+          } else {
+            loading.close();
+            vthis.$message({
+              type: "warning",
+              message: "视频加载失败"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          loading.close();
+        });
+    },
+
+    ///---------------------video play--------------------------------
+
+    initGetWfxw() {
+      let requestParam = JSON.stringify({
+        remapname: "optionsWfxw"
+      });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/common/getWfdmCode", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsWfxw = response.data.optionsWfxw;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    /**
+     * 同违法审核使用同一个接口，
+     * 有效数据按钮表示通过
+     * 无效数据按钮表示作废
+     */
+    handellAction(_b_flag_) {
+      //--------提取参数---
+      let requestParam = JSON.stringify({
+        nid: this.resultData.illegal.ill_nid,
+        actionFlag: _b_flag_,
+        userid: localStorage.getItem("username"),
+        username: localStorage.getItem("namemc"),
+        //-------------------------
+        auditHphm: this.resultData.camera.plate_number,
+        auditHpzl: this.valueHpzlDT,
+        auditWfdm: this.resultData.illegal.ill_type
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/illaudit/auditData", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            //---如果点击操作成功后，我们把ill_nid设为空
+            this.$message({ type: "success", message: "数据操作成功!" });
+          } else {
+            this.$message({ type: "warning", message: "数据操作失败!" });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    initGetMountPoint() {
+      // let requestParam = JSON.stringify({
+      //   remapname: "optionsWfxw"
+      // });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/mountpoint/getAllPoint", {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsPoint = response.data.pointList;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化安装点信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    initGetDeviceList() {
+      // let requestParam = JSON.stringify({
+      //   remapname: "optionsWfxw"
+      // });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/deviceinfo/getAllDevice", {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsDevice = response.data.deviceList;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化设备信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+  },
+  created() {
+    const loading = this.$loading({
+      lock: true,
+      text: "Loading",
+      spinner: "el-icon-loading",
+      background: "rgba(0, 0, 0, 0.7)"
+    });
+
+    this.value2 = new Date(
+      new Date().getFullYear(),
+      new Date().getMonth(),
+      new Date().getDate(),
+      0,
+      0,
+      0
+    );
+    this.value3 =  new Date(
+      new Date().getFullYear(),
+      new Date().getMonth(),
+      new Date().getDate(),
+      23,
+      59,
+      59
+    );
+
+    this.initEnumType();
+    this.initGetMountPoint();
+    this.initGetDeviceList();
+
+    this.$nextTick(function() {
+      this.ImgDTH = window.innerHeight - 510;
+      this.tableHeight =
+        window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 45;
+
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function() {
+        this.ImgDTH = window.innerHeight - 510;
+        self.tableHeight =
+          window.innerHeight - self.$refs.multipleTable.$el.offsetTop - 45;
+      };
+    });
+    this.initGetWfxw();
+
+    //---关闭loading
+    this.$nextTick(() => {
+      // 以服务的方式调用的 Loading 需要异步关闭
+      loading.close();
+    });
+  }
+  // mounted() {
+  //   this.initGetWfxw();
+  // }
+};
+</script>

web/src/views/enforcelaw/config/group/GroupTable.vue

+<template>
+  <el-table
+    :data="tableData"
+     :header-cell-style="tableHeaderColor"
+    style="width: 100%"
+    >
+
+    <el-table-column
+      prop="groupName"
+      label="小组名称"
+      sortable
+      width="110">
+    </el-table-column>
+    <el-table-column
+      prop="groupUser"
+      label="小组成员"
+     >
+    </el-table-column>
+
+    <el-table-column
+      prop="auditDataNumber"
+      label="剩余审核量"
+       width="100"
+      >
+    <template slot-scope="scope">
+          <div slot="reference" class="name-wrapper">
+            <el-tag style="background-color:#2C8EB4;color:#ffffff;" size="medium">{{ scope.row.auditDataNumber }}</el-tag>
+          </div>
+        
+    </template>
+      
+    </el-table-column>
+
+    <el-table-column
+      prop="auditDataTime"
+      label="数据日期"
+      sortable
+      width="180">
+    </el-table-column>
+
+    <el-table-column
+      prop="nid"
+      v-if="false"
+      label="NID"
+      width="0">
+    </el-table-column>
+
+
+    <el-table-column label="操作">
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          type="info"
+          @click="handleEdit(scope.$index, scope.nid)">分配</el-button>
+         <el-button
+          size="mini" 
+          type="danger"
+          @click="handleDelete(scope.$index, scope.nid)">删除</el-button> 
+      </template>
+    </el-table-column>
+
+  </el-table>
+</template>
+
+<style>
+  .el-table .warning-row {
+    background: oldlace;
+  }
+
+  .el-table .success-row {
+    background: #f0f9eb;
+  }
+</style>
+
+
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          nid:'12sdfdsfds',
+          groupName: '闯红灯小组',
+          groupUser: 'admin,李天，杨威，',
+          auditDataTime: '2019-07-01-2019-07-03',
+          auditDataNumber: '52452'
+        }, {
+          nid:'12sdfdsfds',
+          groupName: '尾号限行',
+          groupUser: 'admin,李天，杨威',
+          auditDataTime: '2019-07-01-2019-07-03',
+          auditDataNumber: '52452'
+        }, {
+          nid:'12sdfdsfds',
+          groupName: '外地车限行',
+          groupUser: 'admin,李天，杨威',
+          auditDataTime: '2019-07-01-2019-07-03',
+          auditDataNumber: '52452'
+        }, {
+           nid:'12sdfdsfds',
+          groupName: '大货车限行',
+          groupUser: 'admin,李天，杨威',
+          auditDataTime: '2019-07-01-2019-07-03',
+          auditDataNumber: '52452'
+        }]
+      }
+    },
+    methods: {
+      formatter(row, column) {
+        return row.address;
+      },
+      // 修改table header的背景色
+      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
+        if (rowIndex === 0) {
+          return 'background-color:#2C2C4B;color: #fff;font-weight: 500;border:1px solid #153B5D;text-align:center;'
+        }
+      },
+
+      handleEdit(index, row) {
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      }
+
+    }
+  }
+</script>
\ No newline at end of file

web/src/views/enforcelaw/config/group/index.vue

+<template>
+  <div class="content_div_main">
+    <el-container>
+      <el-container style="height: ; width:55%; border-right: 1px solid #58749B">
+        <el-main>
+          <div class="left-container">
+            <el-row class="mt30" style="margin-top:0px;margin-bottom:5px;">
+              <el-col :span="4" class>
+                <el-input type="text" class="bl0 br0" v-model="groupname" placeholder="小组名" />
+              </el-col>
+              <el-col :span="4" class>
+                <el-button type="success" @click="searchGroupInfo">查询</el-button>
+              </el-col>
+              <el-col :span="4" class>
+                <el-popover placement="right" trigger="click" :visible.sync="dialogPopoverVisible">
+                  <div class="add_g_popover">
+                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+                      <el-form-item label>
+                        <el-input v-model="formInline.gaddname" placeholder="小组名称"></el-input>
+                      </el-form-item>
+                      <el-form-item>
+                        <el-button type="primary" @click="submitForm">添 加</el-button>
+                      </el-form-item>
+                    </el-form>
+                  </div>
+                  <el-button slot="reference" type="info" @click="clickButtonAddGroup">添加小组</el-button>
+                </el-popover>
+              </el-col>
+            </el-row>
+            <el-table
+              ref="gRef"
+              @row-dblclick="dataBackFillGoods"
+              :data="tableData"
+              style="width: 100%"
+            >
+              <el-table-column prop="groupName" label="小组名称" sortable width="110"></el-table-column>
+              <el-table-column prop="groupUser" label="小组成员"></el-table-column>
+
+              <el-table-column prop="auditNumber" label="剩余审核量" width="100">
+                <template slot-scope="scope">
+                  <div slot="reference" class="name-wrapper">
+                    <el-tag
+                      style="background-color:#2C8EB4;color:#ffffff;"
+                      size="medium"
+                    >{{ scope.row.auditNumber }}</el-tag>
+                  </div>
+                </template>
+              </el-table-column>
+
+              <el-table-column prop="timeBoundary" label="数据日期" sortable width="180"></el-table-column>
+
+              <el-table-column prop="nid" v-if="false" label="NID" width="0"></el-table-column>
+
+              <el-table-column label="操作">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="info" @click="handleEdit(scope.$index, scope.row)">分配</el-button>
+                  <el-button
+                    size="mini"
+                    type="danger"
+                    @click="handleDelete(scope.$index, scope.row)"
+                  >删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-main>
+      </el-container>
+
+      <el-container style="width:45%; border: 0px solid #f32424;">
+        <el-main style="height:100%;width:100%;">
+          <el-aside style="max-height:300px;width:100%;">
+            <el-divider content-position="left">抓拍点位选取</el-divider>
+            <el-row class="mt30" style="margin-top:0px;margin-bottom:5px;">
+              <el-col :span="4" class>
+                <el-input type="text" class="bl0 br0" v-model="pointname" placeholder="地点名称" />
+              </el-col>
+              <el-col :span="8" class>
+                <el-button type="primary" plain @click="searchPointByName">查 询</el-button>
+                <el-button type="info" @click="saveSelectPoint">保 存</el-button>
+              </el-col>
+
+              <el-col :span="10" class>
+                <el-input type="text" class="ss_ss_kl" v-model="selectGroupInfo.s_g_name" />
+              </el-col>
+            </el-row>
+
+            <el-tree
+              :data="DataPointAndCdevice"
+              show-checkbox
+              node-key="id"
+              ref="tree"
+              highlight-current
+              :props="defaultProps"
+              :expand-on-click-node="true"
+            ></el-tree>
+          </el-aside>
+
+          <el-main>
+            <el-divider content-position="left">审核人员分配</el-divider>
+            <template class="fp_audit_el">
+              <el-transfer
+                v-model="selectAuditUserList"
+                :data="dataAuditUser"
+                :titles="['可分配人员', '选中人员']"
+              ></el-transfer>
+            </template>
+            <el-button type="primary" plain @click="saveGroupSelectUser" style="margin-top:5px;">保存</el-button>
+          </el-main>
+        </el-main>
+      </el-container>
+    </el-container>
+
+    <!--打开分配小组任务的dialog-->
+    <el-dialog :title="dialogFWName" width="360px" :visible.sync="dialogFormVisible">
+      <el-form ref="form" label-width="80px" size="mini">
+        <el-form-item label="开始时间">
+          <div class="block">
+            <el-date-picker
+              v-model="fpStime"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              type="datetime"
+              placeholder="选择日期时间"
+            ></el-date-picker>
+          </div>
+        </el-form-item>
+        <el-form-item label="结束时间">
+          <div class="block">
+            <el-date-picker
+              v-model="fpEtime"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              type="datetime"
+              placeholder="选择日期时间"
+            ></el-date-picker>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="采集方式">
+          <el-select v-model="value1" placeholder="请选择" style="width:220px !important;;">
+            <el-option
+              v-for="item in optionsCjfs"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item size="large">
+          <el-button type="primary" @click="onSubmitGroupFP">执行分配</el-button>
+          <el-button @click="dialogFormVisible = false">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <!--   -->
+  </div>
+</template>
+
+<style lang="stylus" scoped>
+.el-header {
+  background-color: #B3C0D1;
+  color: #333;
+  line-height: 60px;
+}
+
+.el-aside {
+  color: #333;
+}
+
+.add_g_popover {
+  margin-top: 10px;
+}
+
+.el-table .warning-row {
+  background: oldlace;
+}
+
+.el-table .success-row {
+  background: #f0f9eb;
+}
+
+.zZindex {
+  z-index: 3000 !important;
+}
+</style>
+
+
+<script>
+import { Message } from "element-ui";
+
+export default {
+  data() {
+    return {
+      dialogFWName: "任务分配",
+
+      optionsCjfs: [], //采集方式
+      valueCjfs: "",
+
+      allAuditUserInfos: [],
+      value1: "",
+
+      groupname: "",
+      pointname: "",
+      formInline: {
+        gaddname: ""
+      },
+      DataPointAndCdevice: [],
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      dataAuditUser: [],
+      selectAuditUserList: [],
+      tableData: [],
+      //---定义选中小组
+      selectGroupInfo: {
+        s_g_nid: "",
+        s_g_name: ""
+      },
+      //--
+      dialogFormVisible: false,
+      dialogPopoverVisible: false,
+      fpStime: "",
+      fpEtime: "",
+      //----------------------------
+      g_s_point: [],
+      s_p_gid: ""
+    };
+  },
+  methods: {
+    clickButtonAddGroup() {
+      this.dialogPopoverVisible = true;
+      this.formInline.gaddname = "";
+    },
+    onSubmitGroupFP() {
+      if (
+        this.fpStime == "" ||
+        this.fpEtime == "" ||
+        this.fpStime == null ||
+        this.fpEtime == null
+      ) {
+        this.publicShowMessage("warning", "请选择分配时间");
+        return;
+      }
+      if (this.fpStime > this.fpEtime) {
+        this.publicShowMessage("warning", "开始时间不能大于结束时间");
+        return;
+      }
+      if (this.value1 == null || this.value1 == "") {
+        this.publicShowMessage("warning", "请选择采集方式");
+        return;
+      }
+      debugger;
+
+       const loading = this.getLoadingIns();
+
+      let requestParam = JSON.stringify({
+        nid: this.selectGroupInfo.s_g_nid,
+        fpStime: this.fpStime,
+        fpEtime: this.fpEtime,
+        cjSource: this.value1
+      });
+      this.axios
+        .post(
+          this.$API_SERVICE_URL + "/groupinfo/allocatedGroupTask",
+          requestParam,
+          {
+            headers: {
+              "Content-Type": "application/json;charset=utf-8" //头部信息
+            }
+          }
+        )
+        .then(response => {
+          debugger;
+          let flaga = response.data.flag;
+          if (flaga == "1") {
+            //alert("添加成功");
+            //this.publicShowMessage("success", "分配成功");
+            Message({
+              message: "分配成功",
+              type: "success",
+              customClass: "zZindex"
+            });
+            loading.close();
+            this.dialogFormVisible = false;
+            this.searchGroupInfo();
+          } else {
+            this.publicShowMessage("warning", "分配异常");
+            loading.close();
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          loading.close();
+        });
+    },
+    submitForm() {
+      if (this.formInline.gaddname == "") {
+        this.$message({
+          type: "warning",
+          message: "请输入小组名"
+        });
+      }
+      let requestParam = JSON.stringify({
+        groupName: this.formInline.gaddname,
+        status: "0"
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/groupinfo/save", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.flag;
+          if (flaga == "1") {
+            //alert("添加成功");
+            this.publicShowMessage("success", "添加成功");
+          } else {
+            this.publicShowMessage(
+              "warning",
+              "输入的小组名已经存在，请重新输入"
+            );
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    /**点击查询点位按钮 */
+    searchPointByName() {
+      this.searchMountPoint();
+    },
+
+    getIllMountPoint(grid) {
+      if (grid == "") {
+        this.$message({
+          type: "warning",
+          message: "请双击选中需要操作的小组"
+        });
+      } else {
+        this.s_p_gid = grid;
+        this.searchMountPoint();
+      }
+    },
+
+    getLoadingIns() {
+      const loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+      return loading;
+    },
+
+    searchMountPoint() {
+      var loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+
+      let requestParam = JSON.stringify({
+        nid: this.s_p_gid,
+        str1: this.pointname
+      });
+
+      this.axios
+        .post(
+          this.$API_SERVICE_URL + "/mountpoint/getGroupPoint",
+          requestParam,
+          {
+            headers: {
+              "Content-Type": "application/json;charset=utf-8" //头部信息
+            }
+          }
+        )
+        .then(response => {
+          if (response.data.res_flag == "1") {
+            debugger;
+            this.DataPointAndCdevice = response.data.all_point;
+            this.g_s_point = response.data.select_point;
+            this.$nextTick(() => {
+              // 以服务的方式调用的 Loading 需要异步关闭
+              loading.close();
+            });
+            this.setCheckedKeys();
+          }
+        });
+    },
+
+    /**设置安装点选中状态 */
+    setCheckedKeys() {
+      const arr = this.g_s_point;
+      this.$refs.tree.setCheckedKeys(arr);
+    },
+
+    /**保存用户选中的安装点 */
+    saveSelectPoint() {
+      if (
+        this.selectGroupInfo.s_g_nid == "" ||
+        typeof this.selectGroupInfo.s_g_nid === "undefined"
+      ) {
+        this.publicShowMessage(
+          "warning",
+          "请双击选中需要配置的小组，在进行保存"
+        );
+      } else {
+        //---
+        let spointcdevice = this.$refs.tree.getCheckedKeys();
+        if (spointcdevice == "") {
+          this.publicShowMessage("warning", "您没有选择安装点，不需要保存");
+          return;
+        }
+        ///-----提交后端进行保存点位信息
+        let requestParam = JSON.stringify({
+          nid: this.selectGroupInfo.s_g_nid,
+          selectPoint: spointcdevice
+        });
+        this.axios
+          .post(
+            this.$API_SERVICE_URL + "/groupinfo/saveSelectPoint",
+            requestParam,
+            {
+              headers: {
+                "Content-Type": "application/json;charset=utf-8" //头部信息
+              }
+            }
+          )
+          .then(response => {
+            ///----
+            let flagp = response.data.flag;
+            if (flagp == "1") {
+              this.publicShowMessage("success", "添加成功");
+            } else {
+              this.publicShowMessage("warning", "保存失败");
+            }
+          });
+      }
+    },
+
+    getAuditUsers(grid) {
+      this.dataAuditUser = [];
+      this.allAuditUserInfos = [];
+      this.axios
+        .get(
+          this.API.auth.getRoleUsers("e6b5370ea65e4e8037d2ecfe04a3fd41"),
+          {
+            params: {
+              offset: 0,
+              limit: 1000,
+              is_active: true
+            }
+          },
+          {
+            headers: {
+              authorization: localStorage.getItem("atoken")
+            }
+          }
+        )
+        .then(response => {
+          debugger;
+          console.log(response.data);
+          this.allAuditUserInfos = response.data.list_data;
+          for (let i = 0; i < response.data.list_data.length; i++) {
+            let m = {
+              key: response.data.list_data[i].username,
+              label: "---           " + response.data.list_data[i].name
+            };
+            this.dataAuditUser.push(m);
+          }
+
+          //-----查询小组中的已分配人员
+          let requestParam = JSON.stringify({
+            nid: grid
+          });
+          this.axios
+            .post(
+              this.$API_SERVICE_URL + "/groupinfo/getauditusers",
+              requestParam,
+              {
+                headers: {
+                  "Content-Type": "application/json;charset=utf-8" //头部信息
+                }
+              }
+            )
+            .then(response => {
+              //this.dataAuditUser = response.data.all_user;
+              if (
+                response.data.select_user != null &&
+                response.data.select_user.length > 0
+              ) {
+                this.selectAuditUserList = response.data.select_user;
+              }
+            });
+        });
+    },
+    formatter(row, column) {
+      return row.address;
+    },
+    // 修改table header的背景色
+    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return "background-color:#2C2C4B;color: #fff;font-weight: 500;border:1px solid #153B5D;text-align:center;";
+      }
+    },
+
+    handleEdit(index, row) {
+      this.selectGroupInfo.s_g_nid = row.nid;
+      this.dialogFWName = row.groupName + ":任务分配";
+      this.dialogFormVisible = true;
+    },
+    handleDelete(index, row) {
+      this.delOpenMsg(row.nid);
+    },
+
+    delOpenMsg(gnid) {
+      this.$confirm("此操作将删除该小组所有配置信息, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          let requestParam = JSON.stringify({
+            nid: gnid
+          });
+
+          this.axios
+            .post(
+              this.$API_SERVICE_URL + "/groupinfo/deleteGroupInfo",
+              requestParam,
+              {
+                headers: {
+                  "Content-Type": "application/json;charset=utf-8" //头部信息
+                }
+              }
+            )
+            .then(response => {
+              this.searchGroupInfo();
+              let flagp = response.data.flag;
+              if (flagp == "1") {
+                this.publicShowMessage("success", "删除成功");
+              } else {
+                this.publicShowMessage("warning", "删除失败");
+              }
+            });
+        })
+        .catch(() => {});
+    },
+
+    ///------------------------小组信息查询------
+    searchGroupInfo() {
+      //--先清空table
+      this.tableData = [];
+      let requestParam = JSON.stringify({
+        groupName: this.groupname
+      });
+      this.axios
+        .post(
+          this.$API_SERVICE_URL + "/groupinfo/searchGroupTable",
+          requestParam,
+          {
+            headers: {
+              "Content-Type": "application/json;charset=utf-8" //头部信息
+            }
+          }
+        )
+        .then(response => {
+          this.tableData = response.data.tables;
+        });
+    },
+    //--保存选中的小组人员
+    saveGroupSelectUser() {
+      if (
+        this.selectGroupInfo.s_g_nid == "" ||
+        typeof this.selectGroupInfo.s_g_nid === "undefined"
+      ) {
+        this.publicShowMessage(
+          "warning",
+          "请双击选中需要配置的小组，在进行保存"
+        );
+        return;
+      }
+      if (1 == 0) {
+        //if (this.selectAuditUserList.length == 0) {
+        this.publicShowMessage("warning", "您没有选中具体人员");
+      } else {
+        debugger;
+        let mapUser = [];
+        for (let h = 0; h < this.selectAuditUserList.length; h++) {
+          for (let k = 0; k < this.allAuditUserInfos.length; k++) {
+            let u1 = this.selectAuditUserList[h];
+            let u2 = this.allAuditUserInfos[k].username;
+            let nn = this.allAuditUserInfos[k].name;
+            if (u1 == u2) {
+              let um = {
+                [u1]: nn
+              };
+              mapUser.push(um);
+            }
+          }
+        }
+        let requestParam = JSON.stringify({
+          nid: this.selectGroupInfo.s_g_nid,
+          selectMapUsers: mapUser
+        });
+        this.axios
+          .post(
+            this.$API_SERVICE_URL + "/groupinfo/saveSelectUsers",
+            requestParam,
+            {
+              headers: {
+                "Content-Type": "application/json;charset=utf-8" //头部信息
+              }
+            }
+          )
+          .then(response => {
+            let flagu = response.data.flag;
+            if (flagu == "1") {
+              this.publicShowMessage("success", "操作成功");
+            } else {
+              this.publicShowMessage("warning", "操作失败");
+            }
+          });
+      }
+    },
+
+    /**
+     * 初始化加载界面枚举信息
+     */
+    initEnumType() {
+      let requestParam = JSON.stringify({
+        flag: "2",
+        enumtypeids: [
+          {
+            147: "optionsCjfs"
+          }
+        ]
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/enumtype/getEnumInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsCjfs = response.data.optionsCjfs;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    //---双击选中小组
+    dataBackFillGoods(row, e) {
+      this.DataPointAndCdevice = [];
+      this.selectAuditUserList = [];
+      this.g_s_point = [];
+      this.selectGroupInfo.s_g_nid = row.nid;
+      this.selectGroupInfo.s_g_name = "选中小组：" + row.groupName;
+      this.getIllMountPoint(row.nid);
+      this.getAuditUsers(row.nid);
+    },
+    //***  页面中公共的message方法 */
+    publicShowMessage(types, msg) {
+      Message({
+        type: types,
+        message: msg
+      });
+    }
+  },
+  created() {
+    this.searchGroupInfo();
+    this.initEnumType();
+    this.selectGroupInfo.s_g_name = "未选择小组";
+  }
+};
+</script>

web/src/views/enforcelaw/config/groupDataCheck/index.vue

+<template>
+  <div>
+    <div class="pass_content_left">
+      <el-form :inline="true" class="demo-form-inline" size="small">
+        <el-form-item>
+          <el-select class="commone_w" v-model="valueGroup" clearable placeholder="选择审核小组">
+            <el-option
+              v-for="item in optionsGroup"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-button size="small" type="primary" @click="searchGroupByDataT">查询</el-button>
+      </el-form>
+
+      <div class="table_m_type">
+        <el-table
+          v-loading="loading_status"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          @row-click="openRowDetails"
+          ref="passTable"
+          :data="tableData"
+          :row-class-name="tableRowClassName"
+          tooltip-effect="dark"
+          :height="tableHeight"
+          style="width: 100%;"
+          :default-sort="{prop: 'date', order: 'descending'}"
+        >
+          <el-table-column label="设备描述" sortable prop="groupName"></el-table-column>
+
+          <el-table-column label="设备编号" prop="deviceNo">
+            <template slot-scope="scope">{{ scope.row.deviceNo }}</template>
+          </el-table-column>
+
+          <el-table-column prop="totalnum" label="待审数量" sortable show-overflow-tooltip></el-table-column>
+          <el-table-column prop="nid" label="NID" v-if="false"></el-table-column>
+
+          <el-table-column label="操作" width="90px">
+            <template slot-scope="scope">
+              <el-button size="mini" type="info" @click="showIllInfo(scope.$index, scope.row)">详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="mt5 paa_fy">
+        <el-pagination
+          size="small"
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @prev-click="handlePagePrevClick"
+          @next-click="handlePageNextclick"
+          :page-sizes="pageSizes"
+          :page-size="pageSize"
+          :current-page.sync="pageNumber"
+          layout="total, sizes, prev, pager, next"
+          :total="pageTotal"
+        ></el-pagination>
+      </div>
+    </div>
+
+    <div class="pass_content_right">
+      <div class="right_img">
+        <vue-photo-zoom-pro :url="showPassInfo.pass_img1" style="width:100%;height:100%;"></vue-photo-zoom-pro>
+      </div>
+      <div class="right_img">
+        <vue-photo-zoom-pro :url="showPassInfo.pass_img2" style="width:100%;height:100%;"></vue-photo-zoom-pro>
+      </div>
+      <div class="right_img">
+        <vue-photo-zoom-pro :url="showPassInfo.pass_img3" style="width:100%;height:100%;"></vue-photo-zoom-pro>
+      </div>
+
+      <div class="right_img">
+        <div style="margin-top:20px;margin-left:5px;">
+          <el-row style="margin-top:10px;margin-bottom:10px;">
+            <el-col>
+              <el-button size="mini" type="success" @click="upDetailInfo()">上一条</el-button>
+              <el-button size="mini" type="primary" @click="nextDetailInfo()">下一条</el-button>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col>{{cjHphm}}</el-col>
+            <el-col>{{cjWfxw}}</el-col>
+            <el-col>{{cjDeviceNo}}</el-col>
+            <el-col>{{cjAddName}}</el-col>
+          </el-row>
+          <el-row style="margin-top:15px;margin-bottom:5px;">
+            <span style="color:red;">*当设备出故障，可以对设备进行免责，并指定免责时间范围</span>
+            <el-col>
+              <el-date-picker
+                v-model="value1"
+                type="daterange"
+                range-separator="至"
+                start-placeholde="开始时间"
+                end-placeholde="结束时间"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+              ></el-date-picker>
+
+              <el-button
+                size="small"
+                type="warning"
+                @click="setDeviceImpunity"
+                :disabled="isDisable"
+              >设备免责</el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      imDeviceNo: "",
+      imGroupId: "",
+      isDisable: true,
+      optionsWfxw: [],
+      cjHphm: "",
+      cjWfxw: "",
+      cjDeviceNo: "",
+      cjAddName: "",
+      value1: "",
+      valueGroup: "",
+      optionsGroup: [],
+      /**  -------分页组件-------- */
+      pageSizes: [14, 20, 200, 1000],
+      pageTotal: 0,
+      pageSize: 14,
+      currentPage4: 2,
+      pageNumber: 1,
+      /**------------------------- */
+      tableData: [],
+      detailDatas: [],
+      detailIndex: 0,
+      loading_status: false,
+      tableHeight: "30",
+      showPassInfo: {
+        pass_img1: "",
+        pass_img2: "",
+        pass_img3: ""
+      },
+
+      value2: "",
+      value3: ""
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      //把每一行的索引放进row
+      row.index = rowIndex;
+    },
+    onRowClick(row, event, column) {
+      //行点击消除new标记
+      var index = row.index;
+      var deleteIndex = Array.indexOf(this.showIndexArr, index);
+      if (deleteIndex != -1) {
+        this.showIndexArr.splice(deleteIndex, 1);
+      }
+    },
+
+    openRowDetails(row, column, event) {
+      this.showIllInfo(row.index, row);
+    },
+    //---查看详情页
+    showIllInfo(index, row) {
+      const loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+
+      this.detailDatas = [];
+      var groupData = this.tableData[index];
+      var vdeviceNo = groupData.deviceNo;
+      var vnid = groupData.nid;
+
+      this.imDeviceNo = vdeviceNo;
+      this.imGroupId = vnid;
+
+      let requestParam = JSON.stringify({
+        deviceNo: vdeviceNo,
+        nid: vnid
+      });
+
+      this.axios
+        .post(
+          this.$API_SERVICE_URL + "/groupinfo/getGroupDataByGid",
+          requestParam,
+          {
+            headers: {
+              "Content-Type": "application/json;charset=utf-8" //头部信息
+            }
+          }
+        )
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.detailDatas = response.data.resuList;
+            this.detailIndex = 0;
+            this.showCheckData();
+            this.isDisable = false;
+            loading.close();
+          } else {
+            loading.close();
+            this.$message({
+              type: "warning",
+              message: "图片加载异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          loading.close();
+        });
+    },
+
+    upDetailInfo() {
+      if (this.detailIndex > 0) {
+        this.detailIndex--;
+        this.showCheckData();
+      }
+    },
+    nextDetailInfo() {
+      if (this.detailIndex < this.detailDatas.length) {
+        this.detailIndex++;
+        this.showCheckData();
+      }
+    },
+
+    showCheckData() {
+      var dData = this.detailDatas[this.detailIndex];
+
+      this.cjHphm = "号牌号码:" + dData.carNo;
+      this.cjWfxw =
+        "违法行为:" + this.GCOMMON.formatterInfo(dData.wfdm, this.optionsWfxw);
+      this.cjDeviceNo = "采集设备:" + dData.deviceNo;
+      this.cjAddName = "采集地点:" + dData.addName;
+
+      this.showPassInfo.pass_img1 = this.GCOMMON.imgPathAnalysis(
+        this.$API_VideoImg_URL,
+        dData.picurl1
+      );
+      this.showPassInfo.pass_img2 = this.GCOMMON.imgPathAnalysis(
+        this.$API_VideoImg_URL,
+        dData.picurl2
+      );
+
+      this.showPassInfo.pass_img3 = this.GCOMMON.imgPathAnalysis(
+        this.$API_VideoImg_URL,
+        dData.picurl3
+      );
+    },
+
+    /**
+     * 初始化加载界面枚举信息
+     */
+    initGroupInfo() {
+      this.axios
+        .post(this.$API_SERVICE_URL + "/groupinfo/getAllGroupEnum", {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsGroup = response.data.optionsGroups;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化小组信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    setDeviceImpunity() {
+      if (
+        this.imDeviceNo == null ||
+        this.imDeviceNo == "" ||
+        this.imGroupId == null ||
+        this.imGroupId == ""
+      ) {
+        this.$message({
+          type: "warning",
+          message: "获取设备编号和小组信息失败"
+        });
+        return;
+      }
+
+      if (this.value1 == null || this.value1 == "null" || this.value1 == "") {
+        this.$confirm(
+          "您没有选择时间，默认只临时删除当前小组中的数据!是否继续？",
+          "提示",
+          {
+            confirmButtonText: "确认",
+            cancelButtonText: "取消",
+            type: "warning"
+          }
+        )
+          .then(() => {
+            this.impumityHandell("1");
+          })
+          .catch(() => {});
+      } else {
+        this.impumityHandell("2");
+      }
+    },
+
+    impumityHandell(vflag) {
+      const loading = this.getLoadingIns();
+      let requestParam = JSON.stringify({
+        nid: this.imGroupId,
+        deviceNo: this.imDeviceNo,
+        status: vflag,
+        fpStime: this.value1[0],
+        fpEtime: this.value1[1]
+      });
+
+      this.axios
+        .post(
+          this.$API_SERVICE_URL + "/groupinfo/setGroupDataImpunity",
+          requestParam,
+          {
+            headers: {
+              "Content-Type": "application/json;charset=utf-8" //头部信息
+            }
+          }
+        )
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.$message({
+              type: "success",
+              message: "设备免责设置成功"
+            });
+            loading.close();
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+            loading.close();
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          loading.close();
+        });
+    },
+
+    getLoadingIns() {
+      const loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+      return loading;
+    },
+
+    // 修改table header的背景色
+    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return "background-color:#2C2C4B;color: #fff;font-weight: 500;border:1px solid #153B5D;text-align:center;";
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    /** 分页组件方法 */
+    //--改变每页显示的数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.searchGroupByData();
+    },
+    handleCurrentChange(val) {
+      this.pageNumber = val;
+      this.searchGroupByData();
+    },
+    handlePagePrevClick(val) {
+      this.pageNumber = val;
+      this.searchGroupByData();
+    },
+    handlePageNextClick(val) {
+      this.pageNumber = val;
+      this.searchGroupByData();
+    },
+    /** --------------*/
+    initGetWfxw() {
+      let requestParam = JSON.stringify({
+        remapname: "optionsWfxw"
+      });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/common/getWfdmCode", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsWfxw = response.data.optionsWfxw;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    searchGroupByDataT() {
+      this.pageNumber = 1;
+      this.searchGroupByData();
+    },
+    /**
+     * 违法信息表查询
+     */
+    searchGroupByData() {
+      if (
+        this.valueGroup == null ||
+        this.valueGroup == "" ||
+        this.valueGroup == "null"
+      ) {
+        this.$message({
+          type: "warning",
+          message: "请选择一个小组查询！"
+        });
+        return;
+      }
+
+      this.loading_status = true;
+      this.tableData = [];
+      let requestParam = JSON.stringify({
+        pageNumber: this.pageNumber,
+        pageSize: this.pageSize,
+        //------
+        nid: this.valueGroup
+      });
+      this.axios
+        .post(
+          this.$API_SERVICE_URL + "/groupinfo/getGroupDataCheck",
+          requestParam,
+          {
+            headers: {
+              "Content-Type": "application/json;charset=utf-8" //头部信息
+            }
+          }
+        )
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.tableData = response.data.resuList;
+            this.pageTotal = response.data.pageTotal;
+            this.loading_status = false;
+          } else {
+            this.loading_status = false;
+            //this.publicShowMessage("warning", "分配异常");
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          this.loading_status = false;
+        });
+    }
+  },
+
+  mounted() {
+    const loading = this.$loading({
+      lock: true,
+      text: "Loading",
+      spinner: "el-icon-loading",
+      background: "rgba(0, 0, 0, 0.7)"
+    });
+
+    this.value2 = new Date(
+      new Date().getFullYear(),
+      new Date().getMonth(),
+      new Date().getDate(),
+      0,
+      0,
+      0
+    );
+    this.value3 = new Date();
+
+    this.$nextTick(function() {
+      this.tableHeight =
+        window.innerHeight - this.$refs.passTable.$el.offsetTop - 45;
+
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function() {
+        self.tableHeight =
+          window.innerHeight - self.$refs.passTable.$el.offsetTop - 45;
+      };
+    });
+    this.initGetWfxw();
+    this.initGroupInfo();
+    //---关闭loading
+    this.$nextTick(() => {
+      // 以服务的方式调用的 Loading 需要异步关闭
+      loading.close();
+    });
+  }
+};
+//width: -webkit-calc(100% - 700px);
+</script>
+<style lang="stylus" scoped>
+.commone_w {
+  /* 设置时间框同其他框一样的宽度 */
+  width: 200px;
+}
+
+.pass_content_right {
+  float: left;
+  width: 59%;
+  height: 100%;
+  margin-left: 5px;
+}
+
+.pass_content_left {
+  float: left;
+  width: 40%;
+  height: 100%;
+}
+
+.right_img {
+  float: left;
+  width: 49%;
+  height: 48%;
+  border: 1px solid #2C485A;
+  margin-left: 1px;
+}
+
+.audit_plate_1 {
+  background-color: #DED8D8;
+  font-size: 18px;
+}
+
+.pass_car_mc {
+  border: 1px solid blue;
+  margin-left: 5px;
+}
+
+.aduit-title {
+  float: left;
+  width: 40%;
+  margin-bottom: 5px;
+  border-bottom: 1px solid rgba(184, 178, 178, 0.2);
+  font-size: 18px;
+  letter-spacing: 1px;
+  font-family: 'Helvetica';
+  color: #c7c7c7;
+
+  .title {
+    padding: 0px 4px 0px 0;
+    border-bottom: 3px solid #009688;
+  }
+
+  .paa_fy {
+    float: left;
+  }
+}
+</style>

web/src/views/enforcelaw/deviceError/index.vue

+<template>
+  <div class="content_div_main">
+    <div class="head_condition_type">
+      <el-form :inline="true" class="demo-form-inline" size="small">
+        <el-form-item label="采集方式">
+          <el-select v-model="valueCjfs" clearable placeholder="采集方式">
+            <!-- <el-option label="闯红灯设备" value="1"></el-option>
+            <el-option label="尾号限行" value="12"></el-option>-->
+            <el-option
+              v-for="item in optionsCjfs"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="审核状态">
+          <el-select v-model="valueShzt" placeholder="审核状态">
+            <el-option
+              v-for="item in optionsShzt"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="分析时间">
+          <el-date-picker
+            v-model="value2"
+            type="date"
+            class="commone_w"
+            format="yyyy-MM-dd"
+            placeholder="分析时间"
+            align="right"
+          ></el-date-picker>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button size="small" type="primary" @click="searchDeviceAnalysisData()">查  询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="device_cj_error">
+      <el-table
+        :row-class-name="tableRowClassName"
+        v-loading="loading_status"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        ref="multipleTable"
+        :data="tableData"
+        :height="tableHeight"
+        tooltip-effect="dark"
+        style="width: 100%"
+        :default-sort="{prop: 'date', order: 'descending'}"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center"></el-table-column>
+        <el-table-column label="设备编号" prop="deviceNo" sortable align="center">
+          <template slot-scope="scope">{{ scope.row.deviceNo }}</template>
+        </el-table-column>
+        <el-table-column label="采集平均值" prop="collectAvg" sortable align="center">
+          <template slot-scope="scope">{{ scope.row.collectAvg }}</template>
+        </el-table-column>
+        <el-table-column prop="numbers" label="当前采集量" show-overflow-tooltip align="center"></el-table-column>
+        <el-table-column prop="dayErlier"  label="同比" align="center"></el-table-column>
+        <el-table-column prop="status" label="分析结果" align="center"></el-table-column>
+      </el-table>
+    </div>
+
+    <div class="block">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        @prev-click="handlePagePrevClick"
+        @next-click="handlePageNextclick"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        :current-page.sync="pageNumber"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pageTotal"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
+
+
+<style scoped>
+
+</style>
+
+
+<script>
+//import imgZoom from 'vue2.0-zoom';
+
+export default {
+  components: {
+    //VuePhotoZoomPro
+  },
+  data() {
+    return {
+      value1: "",
+      dialogErrorHanVisible: false,
+      loading_status: false,
+      radioGg: "0", //标识公告
+      playerOptions: {},
+      /**  -------分页组件-------- */
+      pageSizes: [10, 20],
+      pageTotal: 0,
+      pageSize: 10,
+      currentPage4: 2,
+      pageNumber: 1,
+      /**------------------------- */
+      value2: "",
+      value3: "",
+      valueDevice: "",
+      tableData: [],
+      multipleSelection: [],
+
+      /** 初始化查询条件的下拉框 */
+      optionsCjfs: [], //采集方式
+      valueCjfs: "1",
+      optionsShzt: [], //审核状态
+      valueShzt: "1",
+      //----------------------------------------------------------------------
+
+    };
+  },
+
+  methods: {
+    tableRowClassName({row,rowIndex}){
+        if(row.status == "疑似异常"){
+          return "warning-row";
+        }else{
+          return "";
+        }
+    },
+
+    searchDeviceAnalysisData() {
+      this.pageNumber = 1;
+      this.searchQueryDA();
+    },
+
+    /** 分页组件方法 */
+    //--改变每页显示的数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.searchQueryDA();
+    },
+    handleCurrentChange(val) {
+      this.pageNumber = val;
+      this.searchQueryDA();
+    },
+    handlePagePrevClick(val) {
+      this.pageNumber = val;
+      this.searchQueryDA();
+    },
+    handlePageNextClick(val) {
+      this.pageNumber = val;
+      this.searchQueryDA();
+    },
+    /** --------------*/
+
+    /**
+     * 查询设备采集分析
+     */
+    searchQueryDA() {
+      if(this.value2 == null || this.value2 == "" || this.value2== "null"){
+        this.$message({
+              type: "warning",
+              message: "请选择需要对比的时间"
+            });
+            return;
+      }
+      this.loading_status = true;
+      this.tableData = [];
+      let requestParam = JSON.stringify({
+        pageNumber: this.pageNumber,
+        pageSize: this.pageSize,
+        //------
+        cjfs: this.valueCjfs,
+        shzt: this.valueShzt,
+        starttime:
+          this.value2 != ""
+            ? this.GCOMMON.formatDate(this.value2, "yyyy-MM-dd")
+            : ""
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/illhandell/getDevCjAnalysis", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.tableData = response.data.devCjYcList;
+            this.pageTotal = response.data.pageTotal;
+            this.loading_status = false;
+          } else {
+            this.loading_status = false;
+            //this.publicShowMessage("warning", "分配异常");
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          this.loading_status = false;
+        });
+    },
+    //------------------
+    // 修改table header的背景色
+    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return "background-color:#2C2C4B;color: #fff;font-weight: 500;border:1px solid #153B5D;text-align:center;";
+      }
+    },
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    /**
+     * 初始化加载界面枚举信息
+     */
+    initEnumType() {
+      let requestParam = JSON.stringify({
+        flag: "2",
+        enumtypeids: [
+          {
+            147: "optionsCjfs"
+          },
+          {
+            146: "optionsShzt"
+          }
+        ]
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/enumtype/getEnumInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsCjfs = response.data.optionsCjfs;
+            this.optionsShzt = response.data.optionsShzt;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    nextDetailInfo() {
+      debugger;
+      if (this.selectIndexDetail == this.tableData.length) {
+        this.$message({ type: "waraing", message: "已经是最后一条了" });
+      } else {
+        this.selectIndexDetail++;
+        this.showDetailInfoComm(this.selectIndexDetail);
+      }
+    },
+    upDetailInfo() {
+      if (this.selectIndexDetail == 0) {
+        this.$message({ type: "waraing", message: "已经是第一条了" });
+      } else {
+        this.selectIndexDetail--;
+        this.showDetailInfoComm(this.selectIndexDetail);
+      }
+    },
+
+    /**
+     * 同违法审核使用同一个接口，
+     * 有效数据按钮表示通过
+     * 无效数据按钮表示作废
+     */
+    handellAction(_b_flag_) {
+      //--------提取参数---
+      let requestParam = JSON.stringify({
+        nid: this.resultData.illegal.ill_nid,
+        actionFlag: _b_flag_,
+        userid: localStorage.getItem("username"),
+        username: localStorage.getItem("namemc"),
+        //-------------------------
+        auditHphm: this.resultData.camera.plate_number,
+        auditHpzl: valueHpzlDT,
+        auditWfdm: this.resultData.illegal.ill_type
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/illaudit/auditData", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            //---如果点击操作成功后，我们把ill_nid设为空
+            this.$message({ type: "success", message: "数据操作成功!" });
+          } else {
+            this.$message({ type: "warning", message: "数据操作失败!" });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    initGetMountPoint() {
+      // let requestParam = JSON.stringify({
+      //   remapname: "optionsWfxw"
+      // });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/mountpoint/getAllPoint", {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsPoint = response.data.pointList;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化安装点信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    initGetDeviceList() {
+      // let requestParam = JSON.stringify({
+      //   remapname: "optionsWfxw"
+      // });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/deviceinfo/getAllDevice", {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsDevice = response.data.deviceList;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化设备信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+  },
+  created() {
+    const loading = this.$loading({
+      lock: true,
+      text: "Loading",
+      spinner: "el-icon-loading",
+      background: "rgba(0, 0, 0, 0.7)"
+    });
+
+    this.value2 = new Date(
+      new Date().getFullYear(),
+      new Date().getMonth(),
+      new Date().getDate(),
+      0,
+      0,
+      0
+    );
+    this.value3 = new Date();
+
+    this.initEnumType();
+    this.initGetMountPoint();
+    this.initGetDeviceList();
+    this.$nextTick(function() {
+      this.ImgDTH = window.innerHeight - 510;
+      this.tableHeight =
+        window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 45;
+
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function() {
+        self.ImgDTH = window.innerHeight - 510;
+        self.tableHeight =
+          window.innerHeight - self.$refs.multipleTable.$el.offsetTop - 45;
+      };
+    });
+    //---关闭loading
+    this.$nextTick(() => {
+      // 以服务的方式调用的 Loading 需要异步关闭
+      loading.close();
+    });
+  }
+};
+</script>
+<style lang="stylus" scope>
+.head_condition_type{
+  -webkit-box-shadow: 2px 2px 10px #909090;
+  box-shadow: 2px 2px 4px #909090;
+}
+.device_cj_error{
+  margin-top 10px
+}
+</style>

web/src/views/enforcelaw/export/index.vue

+<template>
+  <div class="content_div_main">
+    <div class="head_condition_type">
+      <el-form :inline="true" class="demo-form-inline" size="small">
+        <el-form-item>
+          <el-select v-model="valueCjfs" clearable placeholder="采集方式">
+            <!-- <el-option label="闯红灯设备" value="1"></el-option>
+            <el-option label="尾号限行" value="12"></el-option>-->
+            <el-option
+              v-for="item in optionsCjfs"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select v-model="valueHpzl" clearable placeholder="号牌种类">
+            <!-- <el-option label="小型汽车" value="02"></el-option>
+            <el-option label="大型汽车" value="01"></el-option>-->
+            <el-option
+              v-for="item in optionsHpzl"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select v-model="valuePoint" clearable filterable placeholder="请选择安装点">
+            <el-option
+              v-for="item in optionsPoint"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select v-model="valueXscd" clearable placeholder="行驶车道">
+            <!-- <el-option label="第一车道" value="01"></el-option>
+            <el-option label="第二车道" value="02"></el-option>-->
+            <el-option
+              v-for="item in optionsXscd"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select v-model="valueShzt" placeholder="审核状态" @change="disExportButton">
+            <el-option
+              v-for="item in optionsShzt"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-date-picker
+            v-model="value2"
+            type="datetime"
+            class="commone_w"
+            format="yyyy-MM-dd HH:mm:ss"
+            placeholder="开始时间"
+            align="right"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-date-picker
+            v-model="value3"
+            type="datetime"
+            class="commone_w"
+            format="yyyy-MM-dd HH:mm:ss"
+            placeholder="结束时间"
+            align="right"
+          ></el-date-picker>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select v-model="valueDevice" clearable filterable placeholder="请选择采集设备">
+            <el-option
+              v-for="item in optionsDevice"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-input placeholder="号牌号码" v-model="whphm" class="commone_w"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <el-row style="text-align: right;margin-bottom:5px;margin-right:5px;">
+        <el-radio v-model="radioGg" label="1">已公告</el-radio>
+        <el-radio v-model="radioGg" label="2">未公告</el-radio>
+        <el-radio v-model="radioGg" label="3">公告在后</el-radio>
+
+        <el-button size="small" type="info" @click="searchWzxxData('1')">异常数据查询</el-button>
+        <el-button size="small" type="info" @click="searchWzxxData('2')">异常时段查询</el-button>
+        <el-button size="small" type="danger" @click="deleteErrorData('1')" :disabled="!(wzxxQFlag=='1' || wzxxQFlag=='2')">删除异常数据</el-button>
+        <el-button size="small" type="success" @click="dialogErrorHanVisible = true">异常分析处理</el-button>
+        <el-button size="small" type="primary" @click="searchWzxxData('3')">查询</el-button>
+        <el-button
+          size="small"
+          type="success"
+          @click="exportWzxxData()"
+          :disabled="exportButton"
+        >数据预导出</el-button>
+      </el-row>
+    </div>
+
+    <div class="table_m_type">
+      <el-table
+        v-loading="loading_status"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        ref="multipleTable"
+        :data="tableData"
+        :height="tableHeight"
+        tooltip-effect="dark"
+        style="width: 100%"
+        :default-sort="{prop: 'date', order: 'descending'}"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55"></el-table-column>
+
+        <el-table-column label="号牌号码" prop="carNo" width="120px" sortable>
+          <template slot-scope="scope">{{ scope.row.carNo }}</template>
+        </el-table-column>
+        <el-table-column label="号牌种类" :formatter="formatHpzl" prop="carType" width="120px"></el-table-column>
+
+        <el-table-column label="违法时间" prop="watchTime" width="160px" sortable>
+          <template slot-scope="scope">{{ scope.row.watchTime }}</template>
+        </el-table-column>
+
+        <el-table-column prop="addName" label="违法地点" show-overflow-tooltip></el-table-column>
+
+        <el-table-column prop="wfdm" :formatter="formatWfxw" label="违法行为"></el-table-column>
+
+        <el-table-column prop="shryid" label="审核人员"></el-table-column>
+
+        <el-table-column prop="nid" v-if="false" label="NID" width="0"></el-table-column>
+
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button size="mini" type="info" @click="showIllInfo(scope.$index, scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="block">
+      <div style="float:left;">
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @prev-click="handlePagePrevClick"
+          @next-click="handlePageNextclick"
+          :page-sizes="pageSizes"
+          :page-size="pageSize"
+          :current-page.sync="pageNumber"
+          layout="total, sizes, prev, pager, next"
+          :total="pageTotal"
+        ></el-pagination>
+      </div>
+      <div class="fy_number_class">
+        <el-input
+          v-model="mPageNumber"
+          @keyup.enter.native="modifyFyNumber"
+          style="width:80px;"
+          placeholder="数量/页"
+        ></el-input>
+      </div>
+    </div>
+
+    <!-- 违法详情弹出界面 -->
+    <!--打开分配小组任务的dialog-->
+    <el-dialog title="违法详情" width="98%" top="1vh" :visible.sync="dialogFormVisible">
+      <div class="aduit-img-box">
+        <el-col :span="8" class="img_box_w" :style="'height:'+ImgDTH+'px;'" size="mini">
+          <!-- <img-zoom src="http://193.5.103.124:8083/5251522281554187435986/2019/06/12/15/zhbrt1933128193kk/15421856167233004.jpg?fid=199878-4535680029-23E71FD-A849C"
+            bigsrc="http://193.5.103.124:8083/5251522281554187435986/2019/06/12/15/zhbrt1933128193kk/15421856167233004.jpg?fid=199878-4535680029-23E71FD-A849C" :configs="configs"></img-zoom>
+          -->
+          <vue-photo-zoom-pro :url="resultData.illegal.ill_pic1"></vue-photo-zoom-pro>
+        </el-col>
+        <el-col :span="8" class="img_box_w" :style="'height:'+ImgDTH+'px;'" size="mini">
+          <vue-photo-zoom-pro :url="resultData.illegal.ill_pic2"></vue-photo-zoom-pro>
+        </el-col>
+        <el-col :span="8" class="img_box_w" :style="'height:'+ImgDTH+'px;'" size="mini">
+          <vue-photo-zoom-pro :url="resultData.illegal.ill_pic3"></vue-photo-zoom-pro>
+        </el-col>
+      </div>
+
+      <div class="candidCamera">
+        <div class="aduit-title">
+          <span class="title">车辆识别信息</span>
+        </div>
+        <el-col :span="6">
+          <el-col :span="6" class="aduit-label">采集机关:</el-col>
+          <el-col :span="12" class="aduit-info">贵阳市交通科技处</el-col>
+        </el-col>
+
+        <el-col :span="6">
+          <el-col :span="6" class="aduit-label">特征图片:</el-col>
+          <el-col :span="12" class="aduit-info">*</el-col>
+        </el-col>
+
+        <el-col :span="6">
+          <el-col :span="6" class="aduit-label">号牌号码:</el-col>
+          <el-input
+            :class="{audit_plate_2:isXnyTrue}"
+            class="audit_plate_1"
+            v-model="resultData.camera.plate_number"
+            @keyup.native="changeHphmEvent()"
+          ></el-input>
+        </el-col>
+
+        <el-col :span="6">
+          <el-col :span="6" class="aduit-label">号牌种类:</el-col>
+          <el-select
+            v-model="valueHpzlDT"
+            class="detail_hpzl_i"
+            placeholder="号牌种类"
+            @change="onChangeHpzlEvent"
+          >
+            <!-- <el-option label="小型汽车" value="02"></el-option>
+            <el-option label="大型汽车" value="01"></el-option>-->
+            <el-option
+              v-for="item in optionsHpzl"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-col>
+      </div>
+      <div class="vehicleinfo">
+        <div class="aduit-title">
+          <span class="title">机动车信息</span>
+          <span class="tip_msg">{{tip_info_veh}}</span>
+        </div>
+
+        <div class="sub-info">
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">车辆品牌:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_clpp}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">车辆类型:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterInfo(resultData.vehicleinfo.car_cllx,optionsCllx)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">登记日期:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_djrj}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">有效期止:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.vehicleinfo.car_yxqz}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">车身颜色:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterMoreInfo(resultData.vehicleinfo.car_color,optionsCsys)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">使用性质:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterInfo(resultData.vehicleinfo.car_syxz,optionsSyxz)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">车辆状态:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterMoreInfo(resultData.vehicleinfo.car_zt,optionsClzt)}}</el-col>
+          </el-col>
+        </div>
+      </div>
+
+      <div class="illegalinfo">
+        <div class="aduit-title">
+          <span class="title">车辆违法信息</span>
+          <!-- <span class="tip_msg">{{this.GCOMMON.formatterInfo(tip_info_ill,optionsCjfs)}}</span> -->
+        </div>
+
+        <div class="sub-info">
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">违法时间:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.illegal.event_dt}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">行驶车道:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterInfo(resultData.illegal.lane_num,optionsXscd)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">行驶方向:</el-col>
+            <el-col
+              :span="16"
+              class="aduit-info"
+            >{{this.GCOMMON.formatterInfo(resultData.illegal.direction,optionsXsfx)}}</el-col>
+          </el-col>
+          <el-col :span="6">
+            <el-col :span="6" class="aduit-label">违法地点:</el-col>
+            <el-col :span="16" class="aduit-info">{{resultData.illegal.address}}</el-col>
+          </el-col>
+          <el-row>
+            <el-col :span="6">
+              <el-col :span="6" class="aduit-label">地点代码:</el-col>
+              <el-col :span="16" class="aduit-info">{{resultData.illegal.ill_address_code}}</el-col>
+            </el-col>
+            <el-col :span="6">
+              <el-col :span="6" class="aduit-label">设备编码:</el-col>
+              <el-col :span="16" class="aduit-info">{{resultData.illegal.dev_unid}}</el-col>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="6">
+              <el-col :span="6" class="aduit-label">违法行为:</el-col>
+              <el-col :span="16">
+                <el-select v-model="resultData.illegal.ill_type" placeholder="请选择">
+                  <el-option
+                    v-for="item in optionsWfxw"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  ></el-option>
+                </el-select>
+              </el-col>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" type="success" @click="clickPlayVideo" :disabled="isDisable">视频播放</el-button>
+        <el-button size="mini" type="warning" @click="handellAction('nullify')">无效数据</el-button>
+        <el-button size="mini" type="success" @click="handellAction('pass')">有效数据</el-button>
+        <el-button size="mini" type="primary" @click="upDetailInfo()">上一条</el-button>
+        <el-button size="mini" type="primary" @click="nextDetailInfo()">下一条</el-button>
+        <el-button size="mini" @click="dialogFormVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+    <!--      end      -->
+
+    <el-dialog title="视频播放" width="60%" :visible.sync="dialogVideoVisible">
+      <video-player
+        class="video-player vjs-custom-skin"
+        ref="videoPlayer"
+        :playsinline="true"
+        :options="playerOptions"
+      ></video-player>
+    </el-dialog>
+
+    <!-- 执行异常处理 -->
+    <el-dialog title="执行异常" width="360px" :visible.sync="dialogErrorHanVisible">
+      <el-form ref="form" label-width="80px" size="mini">
+        <el-form-item label="开始时间">
+          <div class="block">
+            <el-date-picker
+              v-model="fpStime"
+              value-format="yyyy-MM-dd"
+              type="date"
+              placeholder="选择日期时间"
+            ></el-date-picker>
+          </div>
+        </el-form-item>
+        <el-form-item label="结束时间">
+          <div class="block">
+            <el-date-picker
+              v-model="fpEtime"
+              value-format="yyyy-MM-dd"
+              type="date"
+              placeholder="选择日期时间"
+            ></el-date-picker>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="采集方式">
+          <el-select v-model="value1" placeholder="请选择" style="width:220px !important;">
+            <el-option
+              v-for="item in optionsCjfs"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item size="large">
+          <el-button type="primary" @click="onSubmitErrorHandell">执行异常</el-button>
+          <el-button @click="dialogErrorHanVisible = false">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+
+
+<style scoped>
+.tip_msg {
+  color: red;
+  text-align: right;
+  font-size: 14px;
+  margin-left: 20px;
+}
+.pic-box {
+  width: 33%;
+  height: 33%;
+}
+
+.demo-form-inline {
+  margin-top: 5px;
+  margin-left: 5px;
+}
+.head_condition_type {
+  height: auto;
+  color: #333;
+  filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
+  -moz-box-shadow: 2px 2px 10px #909090;
+  -webkit-box-shadow: 2px 2px 10px #909090;
+  box-shadow: 2px 2px 4px #909090;
+}
+.commone_w {
+  /* 设置时间框同其他框一样的宽度 */
+  width: 215px;
+}
+
+/** ---------------------------------------  **/
+
+.aduit-box {
+  width: 95%;
+  margin: 0 auto;
+}
+
+.aduit-img-box img {
+  width: 100%;
+  margin: 1px;
+}
+
+.aduit-img-box {
+  overflow: hidden;
+}
+
+.aduit-title {
+  margin-bottom: 5px;
+  border-bottom: 1px solid rgba(184, 178, 178, 0.2);
+  font-size: 18px;
+  letter-spacing: 1px;
+  font-family: "Helvetica";
+  color: #c7c7c7;
+}
+.title {
+  padding: 0px 4px 0px 0;
+  border-bottom: 3px solid #009688;
+}
+
+.illegalinfo .aduit-title .title {
+  border-color: #f56c6c;
+}
+
+.vehicleinfo .aduit-title .title {
+  border-color: #66b1ff;
+}
+
+.sub-info {
+  line-height: 35px;
+}
+
+.candidCamera,
+.vehicleinfo,
+.illegalinfo {
+  overflow: hidden;
+  margin-bottom: 3px;
+}
+
+.aduit-control {
+  float: right;
+}
+
+.ws-btn {
+  background: #47c9c7;
+  border-color: #acf9f4;
+  color: #fff;
+}
+
+.zf-btn {
+  background: #948b7e;
+  border-color: transparent;
+  color: #fff;
+}
+
+.audit_plate_1 {
+  background: #006ec7 !important;
+  font-size: 16px !important;
+  width: 60%;
+}
+.detail_hpzl_i {
+  width: 60%;
+}
+
+.img_box_w {
+  margin: 1px;
+  width: 33%;
+  height: 260px;
+}
+.audit_plate_2 {
+  background: #27ea58 !important;
+  font-size: 20px !important;
+}
+.aduit-label,
+.aduit-info {
+  height: 30px;
+  line-height: 30px;
+  font-size: 14px;
+  overflow: hidden; /*设置超出的部分进行影藏*/
+  text-overflow: ellipsis; /*设置超出部分使用省略号*/
+  white-space: nowrap; /*设置为单行*/
+}
+</style>
+
+
+
+
+<script>
+//import imgZoom from 'vue2.0-zoom';
+
+export default {
+  components: {
+    //VuePhotoZoomPro
+  },
+  data() {
+    return {
+      exportButton: false,
+      mPageNumber: "",
+      value1: "",
+      fpStime: "",
+      fpEtime: "",
+      dialogErrorHanVisible: false,
+      wzxxQFlag: "", ///---查询标记 1：异常数据  2：异常时段  3： 正常查询  4：数据导出
+      ImgDTH: "",
+      videoPlayUrl: "",
+      loading_status: false,
+      tip_info_veh: "",
+      tip_info_ill: "",
+      radioGg: "0", //标识公告
+      playerOptions: {},
+
+      /**  -------分页组件-------- */
+      pageSizes: [10, 20, 30, 40],
+      pageTotal: 400,
+      pageSize: 10,
+      currentPage4: 2,
+      pageNumber: 1,
+      /**------------------------- */
+      value2: "",
+      value3: "",
+
+      optionsPoint: [],
+      valuePoint: "",
+
+      optionsDevice: [],
+      valueDevice: "",
+      tableData: [],
+      multipleSelection: [],
+
+      /** 初始化查询条件的下拉框 */
+      optionsCjfs: [], //采集方式
+      valueCjfs: "",
+      optionsHpzl: [], //号牌种类
+      valueHpzl: "",
+      valueHpzlDT: "",
+      optionsXscd: [], //车道
+      valueXscd: "",
+      optionsShzt: [], //审核状态
+      valueShzt: "1",
+      optionsWfxw: [],
+      optionsClzt: [],
+      optionsXsfx: [],
+      optionsCsys: [],
+      optionsSyxz: [],
+      optionsCllx: [],
+
+      whphm: "",
+      queryflag: "1", //表示查询标记：1普通查询，2、异常数据 3、异常时段
+
+      /** 菜单查询条件下拉框end */
+
+      dialogFormVisible: false,
+      dialogVideoVisible: false,
+
+      //-----------------------------------------------------------------
+      isXnyTrue: false,
+      isDisable: true,
+      resultData: {
+        camera: {
+          //抓拍信息
+          gatheroffice: "交通科技处",
+          feature_img: "",
+          plate_number: "",
+          plate_type: "1"
+        },
+        vehicleinfo: {
+          //车辆信息
+          car_clpp: "", //车辆类型
+          car_cllx: "", //车辆品牌
+          car_yxqz: "",
+          car_djrj: "",
+          car_color: "",
+          car_zt: "",
+          car_syxz: ""
+        },
+        illegal: {
+          event_dt: "2019-06-19 11:00:00",
+          lane_num: "1",
+          direction: "南向北",
+          address: "中环路西转弯隧道",
+          ill_address_code: "78899 8989 989",
+          dev_unid: "",
+          ill_type: "1",
+          ill_pic1: "",
+          ill_pic2: "",
+          ill_pic3: "",
+          ill_nid: ""
+        }
+      },
+
+      value: "",
+
+      //----------------------------------------------------------------------
+
+      selectIndexDetail: 0
+    };
+  },
+
+  methods: {
+    disExportButton(val) {
+      if (val == "1") {
+        this.exportButton = false;
+      } else {
+        this.exportButton = true;
+      }
+    },
+    modifyFyNumber() {
+      var numReg = /^[0-9]+$/;
+      var numRe = new RegExp(numReg);
+      if (!numRe.test(this.mPageNumber)) {
+        this.$message({
+          type: "warning",
+          message: "请输入整数",
+          duration: 10000,
+          showClose: true
+        });
+        return false;
+      }
+      if (parseInt(this.mPageNumber) <= 0) {
+        this.$message({
+          type: "warning",
+          message: "请输入大于0的整数",
+          duration: 10000,
+          showClose: true
+        });
+        return false;
+      }
+      this.mPageNumber = parseInt(this.mPageNumber);
+      this.pageSize = this.mPageNumber;
+      this.pageNumber = 1;
+      this.searchQueryWzxx();
+    },
+
+    onSubmitErrorHandell() {
+      debugger;
+      if (
+        this.fpStime == "" ||
+        this.fpEtime == "" ||
+        this.fpStime == null ||
+        this.fpEtime == null
+      ) {
+        this.$message({ type: "warning", message: "请选择执行时间" });
+        return;
+      }
+      if (this.fpStime > this.fpEtime) {
+        this.$message({ type: "warning", message: "开始时间不能大于结束时间" });
+        return;
+      }
+      if (this.value1 == null || this.value1 == "") {
+        this.$message({ type: "warning", message: "请选择采集方式" });
+        return;
+      }
+      debugger;
+
+      const loading = this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+
+      let requestParam = JSON.stringify({
+        starttime: this.fpStime,
+        endtime: this.fpEtime,
+        sflag: this.value1
+      });
+      this.axios
+        .post(
+          this.$API_SERVICE_URL + "/illhandell/errorHandell",
+          requestParam,
+          {
+            headers: {
+              "Content-Type": "application/json;charset=utf-8" //头部信息
+            }
+          }
+        )
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            //alert("添加成功");
+            this.$message({ type: "success", message: "异常处理成功" });
+            loading.close();
+            this.searchQueryWzxx();
+          } else {
+            this.$message({ type: "warning", message: "异常处理失败" });
+            loading.close();
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          loading.close();
+        });
+    },
+    /** 用于删除异常错误选中的数据 */
+    deleteErrorData() {
+      var dels = [];
+      const arrs = this.$refs.multipleTable.selection;
+      arrs.forEach(item => {
+        dels.push(item.nid);
+      });
+      this.loading_status = true;
+      let requestParam = JSON.stringify({
+        nids: dels
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/illhandell/delIllDatas", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.searchQueryWzxx();
+            this.loading_status = false;
+          } else {
+            this.loading_status = false;
+            this.$message({
+              type: "warning",
+              message: "异常数据删除失败"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          this.loading_status = false;
+        });
+    },
+    formatHpzl(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfoChangInt(row.carType, this.optionsHpzl);
+    },
+    formatWfxw(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfo(row.wfdm, this.optionsWfxw);
+    },
+
+    searchWzxxData(vflag) {
+      if(vflag == "3"){
+        this.exportButton = false;
+      }else{
+        this.exportButton = true;
+      }
+      this.pageNumber = 1;
+      this.wzxxQFlag = vflag;
+      this.searchQueryWzxx();
+    },
+
+    /** 分页组件方法 */
+    //--改变每页显示的数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.searchQueryWzxx();
+    },
+    handleCurrentChange(val) {
+      this.pageNumber = val;
+      this.searchQueryWzxx();
+    },
+    handlePagePrevClick(val) {
+      this.pageNumber = val;
+      this.searchQueryWzxx();
+    },
+    handlePageNextClick(val) {
+      this.pageNumber = val;
+      this.searchQueryWzxx();
+    },
+    /** --------------*/
+
+    /**
+     * 数据预导出
+     */
+    exportWzxxData() {
+      this.$confirm("是否已进行过设备异常分析!是否继续导出？", "提示", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.exportData();
+        })
+        .catch(() => {});
+    },
+
+    exportData() {
+      debugger;
+      var exps = [];
+      const arrs = this.$refs.multipleTable.selection;
+      arrs.forEach(item => {
+        exps.push(item.nid);
+      });
+      if (exps == null || exps.length == 0) {
+        this.$message({
+          type: "warning",
+          message: "没有勾选具体导出数据"
+        });
+        return;
+      }
+      this.loading_status = true;
+      let requestParam = JSON.stringify({
+        nids: exps,
+        starttime:
+          this.value2 != ""
+            ? this.GCOMMON.formatDate(this.value2, "yyyy-MM-dd hh:mm:ss")
+            : "",
+        endtime:
+          this.value3 != ""
+            ? this.GCOMMON.formatDate(this.value3, "yyyy-MM-dd hh:mm:ss")
+            : ""
+      });
+      this.axios
+        .post(
+          this.$API_SERVICE_URL + "/illhandell/exportIllData",
+          requestParam,
+          {
+            headers: {
+              "Content-Type": "application/json;charset=utf-8" //头部信息
+            }
+          }
+        )
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.$message({
+              type: "success",
+              message: "设置预导出成功"
+            });
+            this.loading_status = false;
+          } else {
+            this.loading_status = false;
+
+            this.$message({
+              type: "warning",
+              message: "数据预导出失败"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          this.loading_status = false;
+        });
+    },
+
+    /**
+     * 违法信息表查询
+     */
+    searchQueryWzxx() {
+      this.loading_status = true;
+      this.tableData = [];
+      let requestParam = JSON.stringify({
+        pageNumber: this.pageNumber,
+        pageSize: this.pageSize,
+        //------
+        cjfs: this.valueCjfs,
+        hpzl: this.valueHpzl,
+        pointcode: this.valuePoint,
+        carxscd: this.valueXscd,
+        shzt: this.valueShzt,
+        starttime:
+          this.value2 != ""
+            ? this.GCOMMON.formatDate(this.value2, "yyyy-MM-dd hh:mm:ss")
+            : "",
+        endtime:
+          this.value3 != ""
+            ? this.GCOMMON.formatDate(this.value3, "yyyy-MM-dd hh:mm:ss")
+            : "",
+        devicecode: this.valueDevice,
+        hphm: this.whphm,
+        sflag: this.queryflag,
+        noticeflag: this.radioGg,
+        wzxxQFlag: this.wzxxQFlag
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/illhandell/getfswzlist", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.tableData = response.data.fsWzList;
+            this.pageTotal = response.data.pageTotal;
+            this.loading_status = false;
+          } else {
+            this.loading_status = false;
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          this.loading_status = false;
+        });
+    },
+    //------------------
+    // 修改table header的背景色
+    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return "background-color:#2C2C4B;color: #fff;font-weight: 500;border:1px solid #153B5D;text-align:center;";
+      }
+    },
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    /**
+     * 初始化加载界面枚举信息
+     */
+    initEnumType() {
+      let requestParam = JSON.stringify({
+        flag: "2",
+        enumtypeids: [
+          {
+            147: "optionsCjfs"
+          },
+          {
+            170: "optionsHpzl"
+          },
+          {
+            151: "optionsXscd"
+          },
+          {
+            146: "optionsShzt"
+          },
+          {
+            38: "optionsClzt"
+          },
+          {
+            149: "optionsXsfx"
+          },
+          {
+            745: "optionsCsys"
+          },
+          {
+            872: "optionsSyxz"
+          },
+          {
+            833: "optionsCllx"
+          }
+        ]
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/enumtype/getEnumInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsCjfs = response.data.optionsCjfs;
+            this.optionsHpzl = response.data.optionsHpzl;
+            this.optionsXscd = response.data.optionsXscd;
+            this.optionsShzt = response.data.optionsShzt;
+            this.optionsClzt = response.data.optionsClzt;
+            this.optionsXsfx = response.data.optionsXsfx;
+            this.optionsCsys = response.data.optionsCsys;
+            this.optionsSyxz = response.data.optionsSyxz;
+            this.optionsCllx = response.data.optionsCllx;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    //---查看详情页
+    showIllInfo(index, row) {
+      this.selectIndexDetail = index;
+      this.dialogFormVisible = true;
+      this.showDetailInfoComm(this.selectIndexDetail);
+    },
+    /** 把选中的对象，显示出具体的信息 */
+    showDetailInfoComm(index) {
+      var wzData = this.tableData[index];
+      this.resultData.camera.plate_number = wzData.carNo;
+      this.valueHpzlDT = wzData.carType;
+      this.getVehiclInfo(wzData.carType, wzData.carNo);
+      //-----------
+      if (
+        wzData.videourl != null &&
+        wzData.videourl != "" &&
+        wzData.videourl.length > 10
+      ) {
+        this.isDisable = false;
+        this.videoPlayUrl = wzData.videourl;
+      } else {
+        this.isDisable = true;
+        this.videoPlayUrl = "";
+      }
+      ///--------play -----------
+      this.resultData.illegal.event_dt = wzData.watchTime;
+      this.resultData.illegal.lane_num = wzData.carRoad;
+      this.resultData.illegal.dev_unid = wzData.deviceNo;
+      this.resultData.illegal.address = wzData.addName;
+      this.resultData.illegal.ill_address_code = wzData.addNo;
+      this.resultData.illegal.direction = wzData.direction;
+      // this.resultData.illegal.ill_pic1 = wzData.picurl1;
+      // this.resultData.illegal.ill_pic2 = wzData.picurl2;
+      // this.resultData.illegal.ill_pic3 = wzData.picurl3;
+
+      this.resultData.illegal.ill_pic1 = this.GCOMMON.imgPathAnalysis(
+        this.$API_VideoImg_URL,
+        wzData.picurl1
+      );
+      this.resultData.illegal.ill_pic2 = this.GCOMMON.imgPathAnalysis(
+        this.$API_VideoImg_URL,
+        wzData.picurl2
+      );
+      this.resultData.illegal.ill_pic3 = this.GCOMMON.imgPathAnalysis(
+        this.$API_VideoImg_URL,
+        wzData.picurl3
+      );
+
+      this.resultData.illegal.ill_type = wzData.wfdm;
+      this.resultData.illegal.ill_nid = wzData.nid;
+      this.tip_info_ill = wzData.datasource;
+      //-------调用方法查询单个车辆信息，根据车牌号码和车牌种类，可以把这个方法做成通用方法，很多地方都会用到
+    },
+
+    clearInfos() {
+      this.resultData.vehicleinfo.car_clpp = "";
+      this.resultData.vehicleinfo.car_cllx = "";
+      this.resultData.vehicleinfo.car_yxqz = "";
+      this.resultData.vehicleinfo.car_djrj = "";
+      this.resultData.vehicleinfo.car_color = "";
+      this.resultData.vehicleinfo.car_zt = "";
+      this.resultData.vehicleinfo.car_syxz = "";
+      this.tip_info_veh = "";
+    },
+
+    /**
+     * 修改了车牌号码
+     */
+    changeHphmEvent() {
+      if (
+        this.resultData.camera.plate_number.length == 7 ||
+        this.resultData.camera.plate_number.length == 8
+      ) {
+        this.getVehiclInfo(
+          this.valueHpzlDT,
+          this.resultData.camera.plate_number
+        );
+      }
+    },
+    /**
+     * 修改了号牌种类
+     */
+    onChangeHpzlEvent(val) {
+      //----获取到选中的value
+      //this.valueHpzlDT = val;
+
+      this.getVehiclInfo(this.valueHpzlDT, this.resultData.camera.plate_number);
+    },
+    /**
+     * 调用方法查询单个车辆信息，根据车牌号码和车牌种类，
+     * 可以把这个方法做成通用方法，很多地方都会用到
+     * 返回车辆的实体类json
+     */
+    getVehiclInfo(vhpzl, vhphm) {
+      this.clearInfos();
+      let requestParam = JSON.stringify({
+        hphm: vhphm,
+        hpzl: vhpzl
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/common/getVehicleInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            if (response.data.vehicle != null) {
+              let veh = response.data.vehicle;
+              this.resultData.vehicleinfo.car_clpp = veh.clpp1;
+              this.resultData.vehicleinfo.car_cllx = veh.cllx;
+              this.resultData.vehicleinfo.car_yxqz = veh.yxqz;
+              this.resultData.vehicleinfo.car_color = veh.csys;
+              this.resultData.vehicleinfo.car_zt = veh.zt;
+              this.resultData.vehicleinfo.car_syxz = veh.syxz;
+              this.resultData.vehicleinfo.car_djrj = veh.djrq;
+            } else {
+              this.tip_info_veh = "未找到车辆信息！";
+            }
+          } else {
+            this.tip_info_veh = "车辆信息查询失败！";
+          }
+        })
+        .catch(error => {
+          this.tip_info_veh = "车辆信息查询失败！";
+        });
+    },
+
+    nextDetailInfo() {
+      debugger;
+      if (this.selectIndexDetail == this.tableData.length) {
+        this.$message({ type: "waraing", message: "已经是最后一条了" });
+      } else {
+        this.selectIndexDetail++;
+        this.showDetailInfoComm(this.selectIndexDetail);
+      }
+    },
+    upDetailInfo() {
+      if (this.selectIndexDetail == 0) {
+        this.$message({ type: "waraing", message: "已经是第一条了" });
+      } else {
+        this.selectIndexDetail--;
+        this.showDetailInfoComm(this.selectIndexDetail);
+      }
+    },
+
+    //---详情界面
+    clickPlayVideo() {
+      //var wzData = this.tableData[this.selectIndexDetail];
+      //this.dialogVideoVisible = true;
+      if (this.videoPlayUrl.indexOf("ftp://") == 0) {
+        //---001第一步先下载视频
+        var vpath = this.downVideoAnalysis();
+      }
+    },
+
+    downVideoAnalysis() {
+      let vthis = this;
+      const loading = vthis.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+
+      var req_url_video = vthis.$API_VideoImg_URL;
+      let requestParam = JSON.stringify({
+        str1: vthis.videoPlayUrl
+      });
+
+      vthis.axios
+        .post(req_url_video + "/video/analysisVideoPath", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            debugger;
+            var vpathurl = response.data.vpath;
+            var reqJsUrl =
+              req_url_video + "/video/playLocalByte?vpath=" + vpathurl;
+            vthis.onLivePlay(reqJsUrl);
+            loading.close();
+            vthis.dialogVideoVisible = true;
+          } else {
+            loading.close();
+            vthis.$message({
+              type: "warning",
+              message: "视频加载失败"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          loading.close();
+        });
+    },
+
+    onLivePlay(vurl) {
+      this.playerOptions = {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
+            src: vurl //"/static/a.mp4" //url地址
+          }
+        ],
+        poster: "../../static/images/test.jpg", //你的封面地址
+        // width: document.documentElement.clientWidth, //播放器宽度
+        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          fullscreenToggle: true //全屏按钮
+        }
+      };
+    },
+
+    ///---------------------video play--------------------------------
+
+    initGetWfxw() {
+      let requestParam = JSON.stringify({
+        remapname: "optionsWfxw"
+      });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/common/getWfdmCode", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsWfxw = response.data.optionsWfxw;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    /**
+     * 同违法审核使用同一个接口，
+     * 有效数据按钮表示通过
+     * 无效数据按钮表示作废
+     */
+    handellAction(_b_flag_) {
+      //--------提取参数---
+      let requestParam = JSON.stringify({
+        nid: this.resultData.illegal.ill_nid,
+        actionFlag: _b_flag_,
+        userid: localStorage.getItem("username"),
+        username: localStorage.getItem("namemc"),
+        //-------------------------
+        auditHphm: this.resultData.camera.plate_number,
+        auditHpzl: valueHpzlDT,
+        auditWfdm: this.resultData.illegal.ill_type
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/illaudit/auditData", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            //---如果点击操作成功后，我们把ill_nid设为空
+            this.$message({ type: "success", message: "数据操作成功!" });
+          } else {
+            this.$message({ type: "warning", message: "数据操作失败!" });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    initGetMountPoint() {
+      // let requestParam = JSON.stringify({
+      //   remapname: "optionsWfxw"
+      // });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/mountpoint/getAllPoint", {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsPoint = response.data.pointList;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化安装点信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    initGetDeviceList() {
+      // let requestParam = JSON.stringify({
+      //   remapname: "optionsWfxw"
+      // });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/deviceinfo/getAllDevice", {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsDevice = response.data.deviceList;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化设备信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+  },
+  created() {
+    const loading = this.$loading({
+      lock: true,
+      text: "Loading",
+      spinner: "el-icon-loading",
+      background: "rgba(0, 0, 0, 0.7)"
+    });
+
+    this.value2 = new Date(
+      new Date().getFullYear(),
+      new Date().getMonth(),
+      new Date().getDate(),
+      0,
+      0,
+      0
+    );
+    this.value3 = new Date();
+
+    this.initEnumType();
+    this.initGetMountPoint();
+    this.initGetDeviceList();
+    this.$nextTick(function() {
+      this.ImgDTH = window.innerHeight - 510;
+      this.tableHeight =
+        window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 45;
+
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function() {
+        self.ImgDTH = window.innerHeight - 510;
+        self.tableHeight =
+          window.innerHeight - self.$refs.multipleTable.$el.offsetTop - 45;
+      };
+    });
+    this.initGetWfxw();
+
+    //---关闭loading
+    this.$nextTick(() => {
+      // 以服务的方式调用的 Loading 需要异步关闭
+      loading.close();
+    });
+  }
+  // mounted() {
+  //   this.initGetWfxw();
+  // }
+};
+</script>

web/src/views/enforcelaw/notice/index.vue

+<template>
+  <div class="content_div_main">
+    <div class="head_condition_type">
+      <el-form :inline="true" class="demo-form-inline" size="small">
+        <el-form-item>
+          <el-select v-model="valueGg" clearable placeholder="查询类型" @change="changeSelect">
+            <el-option label="未公告" value="0"></el-option>
+            <el-option label="已公告" value="1"></el-option>
+
+            <el-option label="车辆历史公告" value="2"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item v-show="!showHisty">
+          <el-date-picker
+            v-model="value2"
+            type="datetime"
+            class="commone_w"
+            format="yyyy-MM-dd HH:mm:ss"
+            placeholder="开始时间"
+            align="right"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item v-show="!showHisty">
+          <el-date-picker
+            v-model="value3"
+            type="datetime"
+            class="commone_w"
+            format="yyyy-MM-dd HH:mm:ss"
+            placeholder="结束时间"
+            align="right"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item v-show="showHisty">
+          <el-select v-model="valueHpzl" placeholder="号牌种类">
+            <el-option
+              v-for="item in optionsHpzl"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showHisty">
+          <el-input placeholder="号牌号码" v-model="whphm" class="commone_w"></el-input>
+        </el-form-item>
+        <el-button size="small" type="primary" @click="searchQueryWzxxT">查询</el-button>
+        <el-button size="small" type="success" :disabled="setGgFlag" @click="setIllegalGg">设置公告</el-button>
+        <el-form-item v-show="!setGgFlag" label="设置公告时间">
+          <el-date-picker
+            v-model="value4"
+            type="datetime"
+            class="commone_w"
+            format="yyyy-MM-dd HH:mm:ss"
+            placeholder="结束时间"
+            align="right"
+          ></el-date-picker>
+        </el-form-item>
+
+        <el-button
+          @click="exportExcel"
+          style="margin-top: 2px;"
+          size="medium"
+          v-show="!setGgFlag"
+          type="warning"
+        >导出</el-button>
+      </el-form>
+    </div>
+
+    <div class="table_m_type">
+      <el-table
+        id="rebateSetTable"
+        v-loading="loading_status"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        ref="multipleTable"
+        :data="tableData"
+        :height="tableHeight"
+        tooltip-effect="dark"
+        style="width: 100%"
+        :default-sort="{prop: 'date', order: 'descending'}"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" align="center" width="55"></el-table-column>
+
+        <el-table-column label="号牌号码" align="center" prop="carNo" sortable>
+          <template slot-scope="scope">{{ scope.row.carNo }}</template>
+        </el-table-column>
+        <el-table-column label="号牌种类" align="center" prop="carType" :formatter="formatHpzl"></el-table-column>
+
+        <el-table-column label="违法时间" align="center" prop="dcmsg" sortable>
+          <template slot-scope="scope">{{ scope.row.dcmsg }}</template>
+        </el-table-column>
+
+        <el-table-column label="公告时间" prop="checkValue" align="center" sortable>
+          <template slot-scope="scope">{{ scope.row.checkValue }}</template>
+        </el-table-column>
+        <!-- <el-table-column prop="status" label="公告标记"></el-table-column> -->
+
+        <el-table-column
+          align="center"
+          prop="status"
+          label="公告标记"
+          :filters="[{ text: '已公告', value: '已公告' }, { text: '未公告', value: '未公告' }]"
+          :filter-method="filterTag"
+          filter-placement="bottom-end"
+        >
+          <template slot-scope="scope">
+            <el-tag
+              :type="scope.row.status === '已公告' ? 'primary' : 'warning'"
+              close-transition
+            >{{scope.row.status}}</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div class="block paa_fy">
+      <div style="float:left;">
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @prev-click="handlePagePrevClick"
+          @next-click="handlePageNextclick"
+          :page-sizes="pageSizes"
+          :page-size="pageSize"
+          :current-page.sync="pageNumber"
+          layout="total, sizes, prev, pager, next"
+          :total="pageTotal"
+        ></el-pagination>
+      </div>
+      <div class="fy_number_class">
+        <el-input
+          v-model="mPageNumber"
+          @keyup.enter.native="modifyFyNumber"
+          style="width:80px;"
+          placeholder="数量/页"
+        ></el-input>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
+<style scoped>
+.demo-form-inline {
+  margin-top: 5px;
+  margin-left: 5px;
+}
+.head_condition_type {
+  height: auto;
+  color: #333;
+  filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);
+  -moz-box-shadow: 2px 2px 10px #909090;
+  -webkit-box-shadow: 2px 2px 10px #909090;
+  box-shadow: 2px 2px 4px #909090;
+}
+.commone_w {
+  /* 设置时间框同其他框一样的宽度 */
+  width: 215px;
+}
+
+
+/** ---------------------------------------  **/
+</style>
+
+
+
+
+<script>
+export default {
+  components: {
+    //VuePhotoZoomPro
+  },
+  data() {
+    return {
+      setGgFlag: true,
+      showHisty: false,
+      whphm: "",
+      mPageNumber: "",
+      isDisable: true,
+      loading_status: false,
+
+      /**  -------分页组件-------- */
+      pageSizes: [10, 20, 30, 40],
+      pageTotal: 0,
+      pageSize: 10,
+      currentPage4: 2,
+      pageNumber: 1,
+      /**------------------------- */
+
+      value2: "",
+      value3: "",
+      value4: "",
+      tableData: [],
+      multipleSelection: [],
+
+      /** 初始化查询条件的下拉框 */
+
+      optionsHpzl: [], //号牌种类
+      valueHpzl: "",
+      valueGg: ""
+    };
+  },
+
+  methods: {
+    exportExcel() {
+      if (this.tableData.length == 0) {
+        this.$message({
+          type: "warning",
+          message: "没有需导出的数据"
+        });
+        return;
+      }
+      this.GCOMMON.exportExcel("待公告车辆信息");
+    },
+    /**
+     * 用于设置公告
+     */
+    setIllegalGg() {
+      var dels = [];
+      const arrs = this.$refs.multipleTable.selection;
+      if (arrs == null || arrs.length == 0) {
+        this.$message({
+          type: "warning",
+          message: "请先勾选需要公告的数据"
+        });
+        return;
+      }
+
+      if (this.value4 == null || this.value4 == "" || this.value4 == "null") {
+        this.$message({
+          type: "warning",
+          message: "请勾选公告的时间"
+        });
+        return;
+      }
+      arrs.forEach(item => {
+        dels.push(item.carNo + "," + item.carType);
+      });
+
+      this.loading_status = true;
+      let requestParam = JSON.stringify({
+        nids: dels,
+        endtime:
+          this.value4 != ""
+            ? this.GCOMMON.formatDate(this.value4, "yyyy-MM-dd hh:mm:ss")
+            : ""
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/illquery/setIllegalGg", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.searchQueryWzxx();
+            this.loading_status = false;
+          } else {
+            this.loading_status = false;
+            this.publicShowMessage("warning", "异常数据删除失败");
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          this.loading_status = false;
+        });
+    },
+
+    changeSelect(val) {
+      this.tableData = [];
+      this.value4 = "";
+      this.whphm = "";
+      if (val == "2") {
+        this.showHisty = true;
+        this.valueHpzl = "02";
+      } else {
+        this.showHisty = false;
+      }
+      this.setGgFlag = true;
+      if (val == "0") {
+        this.setGgFlag = false;
+      }
+    },
+
+    formatHpzl(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfoChangInt(row.carType, this.optionsHpzl);
+    },
+
+    modifyFyNumber() {
+      var numReg = /^[0-9]+$/;
+      var numRe = new RegExp(numReg);
+      if (!numRe.test(this.mPageNumber)) {
+        this.$message({
+          type: "warning",
+          message: "请输入整数",
+          duration: 10000,
+          showClose: true
+        });
+        return false;
+      }
+      if (parseInt(this.mPageNumber) <= 0) {
+        this.$message({
+          type: "warning",
+          message: "请输入大于0的整数",
+          duration: 10000,
+          showClose: true
+        });
+        return false;
+      }
+      this.mPageNumber = parseInt(this.mPageNumber);
+      this.pageSize = this.mPageNumber;
+      this.pageNumber = 1;
+      this.searchQueryWzxx();
+    },
+
+    /** 分页组件方法 */
+    //--改变每页显示的数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.searchQueryWzxx();
+    },
+    handleCurrentChange(val) {
+      this.pageNumber = val;
+      this.searchQueryWzxx();
+    },
+    handlePagePrevClick(val) {
+      this.pageNumber = val;
+      this.searchQueryWzxx();
+    },
+    handlePageNextClick(val) {
+      this.pageNumber = val;
+      this.searchQueryWzxx();
+    },
+    /** --------------*/
+
+    searchQueryWzxxT() {
+      this.pageNumber = 1;
+      this.searchQueryWzxx();
+    },
+    filterTag(value, row) {
+      return row.status === value;
+    },
+    /**
+     * 公告查询
+     */
+    searchQueryWzxx() {
+      this.loading_status = true;
+      this.tableData = [];
+      if (this.shzt == "2") {
+        if (this.whphm == null || this.whphm == "") {
+          this.$message({
+            type: "warning",
+            message: "请输入需要查询的车牌"
+          });
+          return;
+        }
+      }
+      let requestParam = JSON.stringify({
+        pageNumber: this.pageNumber,
+        pageSize: this.pageSize,
+        //------
+        hpzl: this.valueHpzl,
+        shzt: this.valueGg,
+        starttime:
+          this.value2 != ""
+            ? this.GCOMMON.formatDate(this.value2, "yyyy-MM-dd hh:mm:ss")
+            : "",
+        endtime:
+          this.value3 != ""
+            ? this.GCOMMON.formatDate(this.value3, "yyyy-MM-dd hh:mm:ss")
+            : "",
+        hphm: this.whphm
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/illquery/getGglist", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.tableData = response.data.fsGgList;
+            this.pageTotal = response.data.pageTotal;
+            this.loading_status = false;
+          } else {
+            this.loading_status = false;
+            //this.publicShowMessage("warning", "分配异常");
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          this.loading_status = false;
+        });
+    },
+    //------------------
+    // 修改table header的背景色
+    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return "background-color:#2C2C4B;color: #fff;font-weight: 500;border:1px solid #153B5D;text-align:center;";
+      }
+    },
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    /**
+     * 初始化加载界面枚举信息
+     */
+    initEnumType() {
+      let requestParam = JSON.stringify({
+        flag: "2",
+        enumtypeids: [
+          {
+            170: "optionsHpzl"
+          }
+        ]
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/enumtype/getEnumInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsHpzl = response.data.optionsHpzl;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    nextDetailInfo() {
+      debugger;
+      if (this.selectIndexDetail == this.tableData.length) {
+        this.$message({ type: "waraing", message: "已经是最后一条了" });
+      } else {
+        this.selectIndexDetail++;
+        this.showDetailInfoComm(this.selectIndexDetail);
+      }
+    },
+    upDetailInfo() {
+      if (this.selectIndexDetail == 0) {
+        this.$message({ type: "waraing", message: "已经是第一条了" });
+      } else {
+        this.selectIndexDetail--;
+        this.showDetailInfoComm(this.selectIndexDetail);
+      }
+    }
+  },
+
+  created() {
+    const loading = this.$loading({
+      lock: true,
+      text: "Loading",
+      spinner: "el-icon-loading",
+      background: "rgba(0, 0, 0, 0.7)"
+    });
+
+    this.value2 = new Date(
+      new Date().getFullYear(),
+      new Date().getMonth(),
+      new Date().getDate(),
+      0,
+      0,
+      0
+    );
+    this.value3 = new Date();
+    this.initEnumType();
+    this.$nextTick(function() {
+      this.ImgDTH = window.innerHeight - 510;
+      this.tableHeight =
+        window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 45;
+
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function() {
+        self.ImgDTH = window.innerHeight - 510;
+        self.tableHeight =
+          window.innerHeight - self.$refs.multipleTable.$el.offsetTop - 45;
+      };
+    });
+
+    //---关闭loading
+    this.$nextTick(() => {
+      // 以服务的方式调用的 Loading 需要异步关闭
+      loading.close();
+    });
+  }
+};
+</script>

web/src/views/passmgr/search/index.vue

+<template>
+  <div>
+    <div class="pass_content_left">
+      <el-form :inline="true" class="demo-form-inline" size="small">
+        <el-form-item>
+          <el-select class="commone_w" v-model="valueHpzl" clearable placeholder="号牌种类">
+            <el-option
+              v-for="item in optionsHpzl"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select
+            class="commone_w"
+            v-model="valuePoint"
+            clearable
+            filterable
+            placeholder="请选择采集点"
+          >
+            <el-option
+              v-for="item in optionsPoint"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select class="commone_w" v-model="valueXscd" clearable placeholder="行驶车道">
+            <el-option
+              v-for="item in optionsXscd"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-select class="commone_w" v-model="valueXsfx" clearable placeholder="行驶方向">
+            <el-option
+              v-for="item in optionsXsfx"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-date-picker
+            v-model="value2"
+            type="datetime"
+            class="commone_w"
+            format=" yyyy-MM-dd HH:mm:ss"
+
+            placeholder="开始时间"
+            align="right"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-date-picker
+            v-model="value3"
+            type="datetime"
+            class="commone_w"
+            format=" yyyy-MM-dd HH:mm:ss"
+
+            placeholder="结束时间"
+            align="right"
+          ></el-date-picker>
+        </el-form-item>
+
+        <el-form-item>
+          <el-input placeholder="号牌号码"  v-model="whphm"  style="width:120px;"></el-input>
+        </el-form-item>
+        <el-button size="small" type="primary" @click="searchKakouListT">查询</el-button>
+      </el-form>
+
+      <div class="table_m_type">
+        <el-table
+          v-loading="loading_status"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          @row-click="openRowDetails"
+          ref="passTable"
+          :data="tableData"
+          :row-class-name="tableRowClassName"
+
+          tooltip-effect="dark"
+          :height="tableHeight"
+          style="width: 100%;"
+          :default-sort="{prop: 'date', order: 'descending'}"
+        >
+          <el-table-column label="号牌号码" prop="carNo" width="120px" sortable>
+            <template slot-scope="scope">{{ scope.row.carNo }}</template>
+          </el-table-column>
+          <el-table-column label="号牌种类" prop="carType" width="120px" :formatter="formatHpzl"></el-table-column>
+
+          <el-table-column label="过车时间" prop="watchTime" width="160px" sortable>
+            <template slot-scope="scope">{{ scope.row.watchTime }}</template>
+          </el-table-column>
+
+          <el-table-column prop="addName" label="采集地点" show-overflow-tooltip></el-table-column>
+
+          <el-table-column prop="carRoad" label="行驶车道" :formatter="formatXscd"></el-table-column>
+
+          <el-table-column prop="direction" label="行驶方向" :formatter="formatXsfx"></el-table-column>
+
+          <el-table-column prop="nid" v-if="false" label="NID" width="0"></el-table-column>
+
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button size="mini" type="info" @click="showIllInfo(scope.$index, scope.row)">详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="mt5 paa_fy">
+         <div style="float:left;">
+        <el-pagination
+          size="small"
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @prev-click="handlePagePrevClick"
+          @next-click="handlePageNextclick"
+          :page-sizes="pageSizes"
+          :page-size="pageSize"
+          :current-page.sync="pageNumber"
+          layout="total, sizes, prev, pager, next"
+          :total="pageTotal"
+        ></el-pagination>
+      </div>
+        <div class="fy_number_class">
+          <el-input  v-model="mPageNumber"  @keyup.enter.native="modifyFyNumber" style="width:80px;" placeholder="数量/页" >
+          </el-input>
+       </div>
+
+      </div>
+    </div>
+
+    <div class="pass_content_right">
+      <div class="right_img" :style="'height:'+imgHDT+'px;'">
+        <vue-photo-zoom-pro :url="showPassInfo.pass_img" style="float:left;height:100%;height:100%;"></vue-photo-zoom-pro>
+      </div>
+
+  <div class="ms_info_r">
+
+
+      <div class="aduit-title ml5 mt10">
+        <span class="title">卡口信息</span>
+      </div>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">采集地点:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_addname}}</el-col>
+      </el-col>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">号牌号码:</el-col>
+        <el-col :span="10" class="aduit-info">
+          <el-input class="audit_plate_1" v-model="showPassInfo.pass_hphm"></el-input>
+        </el-col>
+      </el-col>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">号牌种类:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_hpzl}}</el-col>
+      </el-col>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">行驶车道:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_xscd}}</el-col>
+      </el-col>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">行驶方向:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_xsfx}}</el-col>
+      </el-col>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">采集时间:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_time}}</el-col>
+      </el-col>
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">采集设备:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_device}}</el-col>
+      </el-col>
+
+      <el-col :span="10" class="ml5 mt5">
+        <el-col :span="6" class="aduit-label">地点编号:</el-col>
+        <el-col :span="18" class="aduit-info">{{showPassInfo.pass_addcode}}</el-col>
+      </el-col>
+ </div>
+
+    <div style="width:100%;">
+      <el-col :span="10" class="ml5 mt5">
+        <el-button size="mini" type="primary" @click="upDetailInfo()">上一条</el-button>
+        <el-button size="mini" type="primary" @click="nextDetailInfo()">下一条</el-button>
+      </el-col>
+    </div>
+
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      mPageNumber:"",
+
+      loading_status:false,
+      tableHeight: "30",
+      imgHDT:"",
+      showPassInfo: {
+        pass_xsfx: "",
+        pass_time: "",
+        pass_device: "",
+        pass_xscd: "",
+        pass_hpzl: "",
+        pass_hphm: "",
+        pass_addname: "",
+        pass_img: "",
+        pass_addcode: ""
+      },
+
+      optionsHpzl: [], //号牌种类
+      valueHpzl: "",
+      optionsXscd: [], //车道
+      valueXscd: "",
+      optionsXsfx: [],
+      valueXsfx: "",
+
+      /**  -------分页组件-------- */
+      pageSizes: [10, 20, 30],
+      pageTotal: 0,
+      pageSize: 10,
+      currentPage4: 2,
+      pageNumber: 1,
+      /**------------------------- */
+      tableData: [],
+
+      value2: "",
+      value3: "",
+      optionsPoint: [],
+      valuePoint: "",
+      whphm:"",
+      selectIndexDetail:0
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      //把每一行的索引放进row
+      row.index = rowIndex;
+    },
+    onRowClick(row, event, column) {
+      //行点击消除new标记
+      var index = row.index;
+      var deleteIndex = Array.indexOf(this.showIndexArr, index);
+      if (deleteIndex != -1) {
+        this.showIndexArr.splice(deleteIndex, 1);
+      }
+    },
+
+    openRowDetails(row, column, event) {
+      this.showIllInfo(row.index, row);
+    },
+
+
+
+    nextDetailInfo() {
+      debugger;
+      if (this.selectIndexDetail == this.tableData.length) {
+        this.$message({ type: "waraing", message: "已经是最后一条了" });
+      } else {
+        this.selectIndexDetail++;
+        this.showIllInfo(this.selectIndexDetail,"");
+      }
+    },
+    upDetailInfo() {
+      if (this.selectIndexDetail == 0) {
+        this.$message({ type: "waraing", message: "已经是第一条了" });
+      } else {
+        this.selectIndexDetail--;
+        this.showIllInfo(this.selectIndexDetail,"");
+      }
+    },
+
+
+
+
+    //---查看详情页
+    showIllInfo(index, row) {
+      debugger;
+      this.selectIndexDetail = index;
+      var clxxData = this.tableData[index];
+      this.showPassInfo.pass_xsfx = this.GCOMMON.formatterInfo(
+        clxxData.direction,
+        this.optionsXsfx
+      );
+      this.showPassInfo.pass_time = clxxData.watchTime;
+      this.showPassInfo.pass_device = clxxData.deviceNo;
+      this.showPassInfo.pass_xscd = this.GCOMMON.formatterInfoChangInt(
+        clxxData.carRoad,
+        this.optionsXscd
+      );
+      this.showPassInfo.pass_hpzl = this.GCOMMON.formatterInfo(
+        clxxData.carType,
+        this.optionsHpzl
+      );
+      this.showPassInfo.pass_hphm = clxxData.carNo;
+      this.showPassInfo.pass_addname = clxxData.addName;
+      //this.showPassInfo.pass_img = clxxData.picurl1;
+      //this.getImageBase64(clxxData.picurl1);
+      //---图片判断下，如果是http格式的，那么我们直接访问
+      //this.showPassInfo.pass_img = "http://192.168.0.101:8089/image/1.jpg"
+      //--方式二--如果是ftp的图片，可以通过流返回
+      this.showPassInfo.pass_img = this.GCOMMON.imgPathAnalysis(this.$API_VideoImg_URL,clxxData.picurl1);
+      //---方式三
+      //this.getImageBase64("ftp://cyl:cyl@192.168.0.101:21/image/12.jpg");
+
+      this.showPassInfo.pass_addcode = clxxData.addNo;
+    },
+
+getImageBase64(imgpath) {
+
+  let requestParam = JSON.stringify({
+        str1: imgpath
+      });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/image/getImgBase64", requestParam,{
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.showPassInfo.pass_img = response.data.base64;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "图片加载异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+,
+
+
+
+    /**------------ 下面的是用于格式化table中数据的 --------------*/
+    formatXsfx(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfo(row.direction, this.optionsXsfx);
+    },
+    formatXscd(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfoChangInt(row.carRoad, this.optionsXscd);
+    },
+    formatHpzl(row, column, cellValue, index) {
+      return this.GCOMMON.formatterInfo(row.carType, this.optionsHpzl);
+    },
+    /** ------------------------------end------------------------ */
+
+    /**
+     * 初始化加载界面枚举信息
+     */
+    initEnumType() {
+      let requestParam = JSON.stringify({
+        flag: "2",
+        enumtypeids: [
+          {
+            170: "optionsHpzl"
+          },
+          {
+            151: "optionsXscd"
+          },
+          {
+            149: "optionsXsfx"
+          }
+        ]
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/enumtype/getEnumInfo", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsHpzl = response.data.optionsHpzl;
+            this.optionsXscd = response.data.optionsXscd;
+            this.optionsXsfx = response.data.optionsXsfx;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化枚举信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    // 修改table header的背景色
+    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return "background-color:#2C2C4B;color: #fff;font-weight: 500;border:1px solid #153B5D;text-align:center;";
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+
+  modifyFyNumber(){
+
+      var numReg = /^[0-9]+$/
+      var numRe = new RegExp(numReg)
+      if (!numRe.test(this.mPageNumber)) {
+        this.$message({
+          type: 'warning',
+          message: '请输入整数',
+          duration: 10000,
+          showClose: true,
+        })
+        return false
+      }
+      if(parseInt(this.mPageNumber)<=0){
+         this.$message({
+          type: 'warning',
+          message: '请输入大于0的整数',
+          duration: 10000,
+          showClose: true,
+        });
+        return false;
+      }
+      this.mPageNumber = parseInt(this.mPageNumber);
+      this.pageSize = this.mPageNumber;
+      this.pageNumber = 1;
+      this.searchKakouList();
+    },
+
+    /** 分页组件方法 */
+    //--改变每页显示的数量
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.searchKakouList();
+    },
+    handleCurrentChange(val) {
+      this.pageNumber = val;
+      this.searchKakouList();
+    },
+    handlePagePrevClick(val) {
+      this.pageNumber = val;
+      this.searchKakouList();
+    },
+    handlePageNextClick(val) {
+      this.pageNumber = val;
+      this.searchKakouList();
+    },
+    /** --------------*/
+    initGetMountPoint() {
+      // let requestParam = JSON.stringify({
+      //   remapname: "optionsWfxw"
+      // });
+
+      this.axios
+        .post(this.$API_SERVICE_URL + "/mountpoint/getAllPoint", {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.optionsPoint = response.data.pointList;
+          } else {
+            this.$message({
+              type: "warning",
+              message: "初始化安装点信息异常"
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+
+    searchKakouListT(){
+      this.pageNumber = 1;
+      this.searchKakouList();
+    },
+
+
+    /**
+     * 违法信息表查询
+     */
+    searchKakouList() {
+      this.loading_status = true;
+      this.tableData = [];
+      this.selectIndexDetail = 0;
+      let requestParam = JSON.stringify({
+        pageNumber: this.pageNumber,
+        pageSize: this.pageSize,
+        //------
+        hpzl: this.valueHpzl,
+        pointcode: this.valuePoint,
+        carxscd: this.valueXscd,
+        starttime: this.value2!=""?this.GCOMMON.formatDate(this.value2,'yyyy-MM-dd hh:mm:ss'):"",
+        endtime: this.value3!=""?this.GCOMMON.formatDate(this.value3,'yyyy-MM-dd hh:mm:ss'):"",
+        hphm: this.whphm,
+        direction:this.valueXsfx
+
+      });
+      this.axios
+        .post(this.$API_SERVICE_URL + "/kakoumgr/getKkList", requestParam, {
+          headers: {
+            "Content-Type": "application/json;charset=utf-8" //头部信息
+          }
+        })
+        .then(response => {
+          debugger;
+          let flaga = response.data.res_flag;
+          if (flaga == "1") {
+            this.tableData = response.data.passList;
+            this.pageTotal = response.data.pageTotal;
+            this.loading_status = false;
+          } else {
+            this.loading_status = false;
+            //this.publicShowMessage("warning", "分配异常");
+          }
+        })
+        .catch(error => {
+          console.log(error);
+          this.loading_status = false;
+        });
+
+    }
+  },
+
+  mounted() {
+
+    const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+
+    this.value2 = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0);
+    this.value3= new Date();
+
+    this.initGetMountPoint();
+    this.$nextTick(function() {
+      this.imgHDT = window.innerHeight - 390;
+      this.tableHeight =
+        window.innerHeight - this.$refs.passTable.$el.offsetTop - 45;
+
+      // 监听窗口大小变化
+      let self = this;
+      window.onresize = function() {
+        self.imgHDT = window.innerHeight -390;
+        self.tableHeight =
+          window.innerHeight - self.$refs.passTable.$el.offsetTop - 45;
+      };
+    });
+    this.initEnumType();
+    //---关闭loading
+    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
+      loading.close();
+    });
+  }
+};
+</script>
+<style lang="stylus" scoped>
+.commone_w {
+  /* 设置时间框同其他框一样的宽度 */
+  width: 200px;
+}
+
+.pass_content_right {
+  float: left;
+  width: 690px;
+  height: 100%;
+  margin-left: 5px;
+}
+
+.pass_content_left {
+  float: left;
+  width: -webkit-calc(100% - 700px);
+  height: 100%;
+}
+
+.right_img {
+  float: left;
+  width: 98%;
+
+  margin-left: 1px;
+}
+.ms_info_r{
+  float:left;
+  width:98%;
+}
+.audit_plate_1 {
+  background-color: #0096F7;
+  font-size: 17px;
+}
+
+.pass_car_mc {
+  border: 1px solid blue;
+  margin-left: 5px;
+}
+
+.aduit-title {
+  float: left;
+  width: 98%;
+  margin-bottom: 5px;
+  border-bottom: 1px solid rgba(184, 178, 178, 0.2);
+  font-size: 18px;
+  letter-spacing: 1px;
+  font-family: 'Helvetica';
+  color: #c7c7c7;
+
+  .title {
+    padding: 0px 4px 0px 0;
+    border-bottom: 3px solid #009688;
+  }
+
+  .paa_fy {
+    float: left;
+  }
+}
+</style>

web/src/views/public/selecttree/index.js

+import selecttreeCompanent from './selecttree.vue'
+const seletctree = {
+  install:function(Vue){
+    Vue.component('selecttree',selecttreeCompanent)
+  }
+}
+export default seletctree

web/src/views/public/selecttree/selecttree.vue

+<template>
+  <div>
+    <Treeselect v-model="selectval" :multiple="true" :options="options" placeholder="请选择"/>
+  </div>
+</template>
+<script>
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+export default {
+  data() {
+    return {
+        selectval:null,
+    }
+  },
+  props:{
+    options:{
+      type:Array,
+      default:[]
+    },
+
+  },
+  components:{
+    Treeselect
+  },
+  methods: {
+
+  },
+  watch: {
+    selectval(val){
+      this.$emit('input',val)
+    }
+  },
+}
+</script>

web/src/views/videos/playvideo.vue

+<!---实时视频--->
+<template>
+  <div class="template-box  videobox">
+    <div class="videoleft-box">
+      <div class="search-video-box">
+        <el-input  prefix-icon="el-icon-search" v-model="searchvideo"></el-input>
+      </div>
+      <el-tree
+        class="filter-tree"
+        :data="treedata"
+        highlight-current
+        :props="defaultProps"
+        :render-content="renderContent"
+        ref="videotree"
+        default-expand-all
+        :filter-node-method="filterNode"
+        @node-click="handleNodeClick">
+      </el-tree>
+    </div>
+    <div class="videoright-box">
+      <div class="play-video-box">
+        <div class="play-box"></div>
+        <div class="show-pic-box">
+          <div v-for="item in 15" class="pic-box">
+            <img src="./testimg/2.jpg" alt="">
+          </div>
+        </div>
+      </div>
+      <div class="comparison-box">
+        <div class="item-box" v-for="item in 5">
+          <div class="org-img">
+            <img src="./testimg/1.jpg" alt="">
+            <div class="img-info">
+              <div>地点：西二旗东路</div>
+              <div>时间：2019-09-12 10:00:00</div>
+            </div>
+          </div>
+          <div class="similarity-box">
+            <similar :cid="'cid'+item" :sim="30*item"></similar>
+          </div>
+          <div class="comp-img">
+            <img src="./testimg/2.jpg" alt="">
+            <div class="img-info">
+              <div>姓名：xxxx</div>
+              <div>身份证号:</div>
+              <div>122123333211121123</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import similar from './similarity'
+export default {
+  components:{
+    similar
+  },
+   data() {
+      return {
+        treedata: [],
+        searchvideo:'',
+        defaultProps: {
+          children: 'childs',
+          label: 'org_name'
+        }
+      };
+  },
+  methods: {
+    handleNodeClick(data) {
+      if (data.org_type == 'vchan') {
+        console.log(data.vchan_prop)
+        //播放视频
+      }
+    },
+    renderContent(h, { node, data, store }){
+        var html = <span>{data.org_name}</span>;
+        if (data.org_type == "address") {
+          html = <span class="">{data.org_name}</span>;
+        }
+        if (data.org_type == "vchan") {
+          if(data.vchan_prop.is_dome){
+           html = (
+             <span>
+              <i class="el-icon-plate-shebeileiqiuji"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
+            </span>);
+          } else {
+          html = (
+             <span>
+              <i class="el-icon-plate-qiangji"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
+            </span>);
+          }
+        }
+        if (data.org_type == "horn") {
+          html = (
+             <span>
+              <i class="el-icon-fa-volume-up fz20"></i> <span style="padding-left:10px;">{data.vchan_name}</span>
+            </span>);
+        }
+        return (
+          <span>
+            <span>{html}</span>
+          </span>
+        );
+      },
+    getorgtree(){
+     this.axios.get(this.API.org.getorgtree,{
+        params: {
+          "vchan_source":'internal',
+          "vchan_type":'vchan'
+        },
+     }).then(res => {
+       this.treedata = res.data
+     })
+   },
+    filterNode(value, data) {
+        if (!value) return true;
+        return data.org_name.indexOf(value) !== -1;
+      }
+  },
+  watch: {
+      searchvideo(val) {
+        this.$refs.videotree.filter(val);
+      }
+    },
+  created() {
+    this.getorgtree()
+  }
+};
+</script>
+<style lang="stylus" scoped>
+.videobox{
+  top 0px
+  height calc(100vh - 110px)
+  display flex
+  .videoleft-box{
+    margin 5px
+    width 230px
+    height calc(100vh - 130px)
+    box-shadow 0px 0px 2px 1px rgba(0,0,0,.1)
+    background #ffffff
+    border-radius 5px
+    overflow hidden
+  }
+}
+
+.videoright-box{
+  width calc(100vw - 320px)
+  color #333
+  display flex
+  overflow hidden
+}
+.play-video-box{
+  flex 1 1 auto
+  margin 5px .6vw
+  width calc(100vw - 570px)
+  overflow hidden
+}
+.play-box{
+  width 100%
+  height 70vh
+  margin-bottom 1vh
+  border-radius 4px
+  background #333
+}
+.comparison-box{
+  width 500px
+  margin 5px
+  height calc(100vh - 150px)
+  overflow hidden
+  box-shadow 0px 0px 2px 1px rgba(0,0,0,.2)
+  background #fff
+  padding 1vh 0
+  border-radius 5px
+  .item-box{
+    display flex
+    color #666
+    margin 0 10px 20px
+    flex-wrap nowrap
+    border-radius 3px
+  }
+  .org-img,.comp-img{
+    height 220px
+    width 18vw
+    overflow hidden
+    font-size 14px
+    img{
+      height 150px
+      width 100%
+    }
+  }
+  .org-img{
+  }
+  .similarity-box{
+    position relative
+    height 150px
+    width 8vw
+    background #fff
+    text-align center
+    overflow hidden
+  }
+}
+.comparison-box:hover{
+  overflow auto
+}
+.search-video-box{
+  width 95%
+  margin 5px auto
+}
+
+.show-pic-box{
+  height 16vh
+  overflow hidden
+  display flex
+  flex-wrap wrap
+  background #fff
+  border-radius 5px
+  margin 0 3px
+  box-shadow 0px 0px 1px 1px rgba(0,0,0,.2)
+  .pic-box{
+    height 15vh
+    border-radius 5px
+    width 8vw
+    overflow hidden
+    margin 0.6vh 0 1vh .41vw
+    img{
+      height 100%
+      width 100%
+    }
+  }
+  .pic-box:nth-child(1){
+    margin-left .41vw
+  }
+}
+</style>

web/src/views/videos/similarity.vue

+<template>
+  <div class="sim-box">
+    <div>
+      <div class="sim-num" :style="{'color':simcolor}">{{sim}}%</div>
+      <div class="sim-title" >相似度</div>
+    </div>
+    <div class="sim-pro">
+      <div class="bg-behind"></div>
+      <div class="bg-front" :style="{'height':sim + 'px'}">
+        <div class="front-pro"></div>
+        <div class="front-top"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['cid','sim'],
+ data(){
+  return{
+    simcolor:'#ccc',
+  }
+ },
+ methods:{
+ },
+ created(){
+   if(this.sim > 30 && this.sim <= 50){
+    this.simcolor = '#5dd8a2'
+   } else if (this.sim > 50 && this.sim <= 70){
+     this.simcolor = '#f8c8a4'
+   } else if (this.sim > 70 && this.sim <= 100){
+      this.simcolor = '#ff7c93'
+   }
+ }
+}
+</script>
+
+<style lang="stylus" scoped>
+.sim-box{
+  background #fff
+  position relative
+}
+.sim-pro{
+  position relative
+  height 100px
+}
+.sim-num{
+  color #ff7c93
+  font-size 16px
+  font-weight 600
+}
+.sim-title{
+  color #666666
+  font-size 14px
+}
+.bg-behind{
+  position absolute
+  left 0
+  right 0
+  z-index 100
+  height: 100px;
+  width: 20px;
+  margin 0 auto
+  background: red;
+  background url('../../assets/img/sim02.png')no-repeat
+  background-size 100% 100%
+}
+.bg-front{
+  position absolute
+  left 0
+  right 0
+  z-index 101
+  bottom 0
+  width: 20px;
+  height: 1000px;
+  margin 0 auto
+  overflow hidden
+  .front-pro{
+    position absolute
+    bottom 0
+    height: 100px;
+    width: 20px;
+    background url('../../assets/img/sim01.png')no-repeat
+    background-size 100% 100%
+  }
+}
+</style>>
+

web/src/views/videos/环形相似度.vue

+<template>
+  <div id="sim">
+    <canvas :id="cid" class="simcav"></canvas>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['cid'],
+ data(){
+  return{
+
+  }
+ },
+ methods:{
+   drawoutround(){
+     let c=document.getElementById(this.cid);
+     debugger
+     let ctx = c.getContext("2d")
+     c.width = 300
+     c.height = 150
+     ctx.beginPath();
+     var gradient=ctx.createLinearGradient(0,0,170,0);
+      gradient.addColorStop("1","rgba(0,0,237,.4)");
+      gradient.addColorStop("0.3","rgba(33,149,237,.4)");
+      gradient.addColorStop("0.6","rgba(33,149,237,.8)");
+      gradient.addColorStop("0","rgba(33,149,237,1)");
+      // 用渐变进行填充
+      ctx.strokeStyle=gradient;
+      ctx.lineWidth=10;
+      ctx.arc(135,70,40,0,1.8*Math.PI,false)
+      ctx.lineCap = "round"
+      ctx.stroke();
+      ctx.font="18px Verdana";
+      var gradient=ctx.createLinearGradient(0,0,c.width,0);
+      gradient.addColorStop("0","magenta");
+      gradient.addColorStop("0.5","blue");
+      gradient.addColorStop("1.0","red");
+      // 用渐变填色
+      ctx.fillStyle=gradient;
+      ctx.fillText("80%",115,75);
+   }
+ },
+ mounted(){
+   this.drawoutround()
+ }
+}
+</script>
+
+<style>
+.simcav{
+  height: 150px;
+  width: 300px;
+  position: absolute;
+  left: -80px
+}
+</style>

web/test/unit/.eslintrc

+{
+  "env": { 
+    "jest": true
+  },
+  "globals": { 
+  }
+}

web/test/unit/jest.conf.js

+const path = require('path')
+
+module.exports = {
+  rootDir: path.resolve(__dirname, '../../'),
+  moduleFileExtensions: [
+    'js',
+    'json',
+    'vue'
+  ],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  transform: {
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
+  },
+  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
+  setupFiles: ['<rootDir>/test/unit/setup'],
+  mapCoverage: true,
+  coverageDirectory: '<rootDir>/test/unit/coverage',
+  collectCoverageFrom: [
+    'src/**/*.{js,vue}',
+    '!src/main.js',
+    '!src/router/index.js',
+    '!**/node_modules/**'
+  ]
+}

web/test/unit/setup.js

+import Vue from 'vue'
+
+Vue.config.productionTip = false

web/test/unit/specs/HelloWorld.spec.js

+import Vue from 'vue'
+import HelloWorld from '@/components/HelloWorld'
+
+describe('HelloWorld.vue', () => {
+  it('should render correct contents', () => {
+    const Constructor = Vue.extend(HelloWorld)
+    const vm = new Constructor().$mount()
+    expect(vm.$el.querySelector('.hello h1').textContent)
+      .toEqual('Welcome to Your Vue.js App')
+  })
+})