20251113炳辰版本

.babelrc

@@ -0,0 +1,18 @@
+{
+  "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"]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

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

.eslintrc.js

@@ -0,0 +1,29 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential', 
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

.gitignore

@@ -0,0 +1,15 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+dist.rar
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

.project

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

README.md

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

build/build.js

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

build/check-versions.js

@@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}

build/utils.js

@@ -0,0 +1,102 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        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')
+    })
+  }
+}

build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,123 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+const cesiumSource = '../node_modules/cesium/Source';
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath,
+    // cesium
+    sourcePrefix: ' '
+    // amd: {
+    //   // Enable webpack-friendly use of require in Cesium
+    //   toUrlUndefined: true
+    // }
+    // end cesium
+  },
+  //--cesium--配置
+  amd:{
+    toUrlUndefined: true
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+      'cesium': path.resolve(__dirname, cesiumSource)
+    }
+  },
+  module: {
+    rules: [
+      ...(config.dev.useEslint ? [] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+
+      //gll
+      {
+        test: /\.svg$/,
+        loader: "svg-sprite-loader",
+        include: [resolve("src/icons")],
+        options: {
+          symbolId: "icon-[name]"
+        }
+      },
+
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        //gll
+        exclude: [resolve("src/icons")],
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ],
+    // cesium
+    // unknownContextRegExp: /^.\/.*$/,
+    unknownContextCritical: false
+    // end cesium
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,108 @@
+'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')
+
+// cesium
+const cesiumSource = 'node_modules/cesium/Source'
+const cesiumWorkers = '../Build/Cesium/Workers'
+// end cesium
+//Sockjs
+
+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'),
+      'CESIUM_BASE_URL': JSON.stringify(' ') // cesium
+    }),
+    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: ['.*']
+      }
+    ]),
+    // cesium
+    new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
+    new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
+    new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
+    new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
+    // end cesium
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+          ? utils.createNotifierCallback()
+          : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

build/webpack.prod.conf.js

@@ -0,0 +1,159 @@
+'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')
+
+// cesium
+const cesiumSource = 'node_modules/cesium/Source'
+const cesiumWorkers = '../Build/Cesium/Workers'
+// end cesium
+
+const env =  require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env,
+      CESIUM_BASE_URL: JSON.stringify('static') // cesium
+    }),
+    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: ['.*']
+      }
+    ]),
+    // cesium
+    new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'static/Workers' }]),
+    new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'static/Assets' }]),
+    new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'static/Widgets' }]),
+    new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
+    // end cesium
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

config/dev.env.js

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

config/index.js

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

config/prod.env.js

@@ -0,0 +1,6 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"',
+  SOCKETPATH:'"/gs-guide-websocket"',
+  API_ROOT: '"/api"'
+}

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title></title>
+    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=eT72K2voLkPnlDLUBzeRroxMW5vIrbH1"></script>
+    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=9355e88d3f4f88925d8b6a8ba53d19c6&plugin=AMap.MouseTool&plugin=AMap.Autocomplete&plugin=AMap.PolyEditor"></script>
+    <!--<link href="//unpkg.com/progressive-image/dist/index.css" rel="stylesheet" type="text/css">-->
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    <script type="text/javascript" src="/static/js/sockjs.min.js"></script>
+    <script>
+      const myname = 'Collection System v20250902beta';
+      document.getElementsByTagName('title')[0].innerText = myname;
+    </script>
+  </body>
+</html>

package.json

@@ -0,0 +1,105 @@
+{
+  "name": "olcesium",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "libozhao <284171227@qq.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "lint": "eslint --ext .js,.vue src test/unit",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.24.0",
+    "cesium": "1.62.0",
+    "echarts": "^4.2.1",
+    "element-ui": "^2.12.0",
+    "js-md5": "^0.7.3",
+    "markdown-it": "^14.1.0",
+    "marked": "^12.0.2",
+    "ol": "^5.0.3",
+    "ol-cesium": "^2.0.0",
+    "olcesium": "file:",
+    "progressive-image": "^1.2.0",
+    "qs": "^6.9.0",
+    "request": "^2.88.0",
+    "sass": "^1.85.1",
+    "sass-loader": "^7.3.1",
+    "socket.io-client": "^2.3.0",
+    "stompjs": "^2.3.3",
+    "vue": "^2.5.2",
+    "vue-jsonp": "^0.1.8",
+    "vue-pdf": "^4.2.0",
+    "vue-router": "^3.0.1",
+    "vue-video-player": "^5.0.2",
+    "vuex": "^3.1.1",
+    "webpack-dev-server": "^2.9.7",
+    "y18n": "^5.0.8"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^8.2.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-jest": "^21.0.2",
+    "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",
+    "compression-webpack-plugin": "^1.1.12",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "eslint": "^4.15.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "jest": "^22.0.4",
+    "jest-serializer-vue": "^0.3.0",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.8.5",
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2",
+    "svg-sprite-loader": "^4.1.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "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": "^2.9.0",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+</style>

src/api/track.js

@@ -0,0 +1,49 @@
+/**
+ *Created by WY on 2019/10/13
+ */
+import * as http from '@/request'
+export function getAllTask() {
+  return http.ajax({
+    url: '/task/selectAll/',
+    method: 'get'
+  }).then(response => {
+    if (response.data.status == "401") {
+      that.$alert(response.data.message);
+      that.$router.push({ path: "/login" });
+    } else {
+      const data = response.data
+      if (data) { return Promise.resolve(data) } else { return Promise.reject('未找到任何任务') }
+    }
+  })
+}
+/* 任务下的所有人员 */
+export function getTaskWorker(listQuery) {
+  /* return http.service.post('/route/getWorkerForTask/',listQuery) */
+  return http.ajax({
+    url: '/route/getWorkerForTask?taskId=' + Number(listQuery.taskId),
+    method: 'get'
+  }).then(response => {
+    if (response.data.status == "401") {
+      that.$alert(response.data.message);
+      that.$router.push({ path: "/login" });
+    } else {
+      const data = response.data
+      if (data) { return Promise.resolve(data) } else { return Promise.reject('未找到任何任务人员') }
+    }
+  })
+}
+export function getRoute(listQuery) {
+  /* return http.service.post('route/getRouteByUserId',listQuery) */
+  return http.ajax({
+    url: '/route/getRouteByUserId?taskId=' + Number(listQuery.taskId) + '&userId=' + Number(listQuery.userId) + '&beginTime=' + listQuery.beginTime + '&stopTime=' + listQuery.stopTime,
+    method: 'get'
+  }).then(response => {
+    if (response.data.status == "401") {
+      that.$alert(response.data.message);
+      that.$router.push({ path: "/login" });
+    } else {
+      const data = response.data
+      if (data) { return Promise.resolve(data) } else { return Promise.reject('未找到任何轨迹') }
+    }
+  })
+}

src/assets/css/button.css

@@ -0,0 +1,624 @@
+.el-button-group>.el-button.is-active,
+.el-button-group>.el-button.is-disabled,
+.el-button-group>.el-button:active,
+.el-button-group>.el-button:focus,
+.el-button-group>.el-button:hover {
+  z-index: 1
+}
+
+.el-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #FFF;
+  border: 1px solid #DCDFE6;
+  color: #606266;
+  -webkit-appearance: none;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  -webkit-transition: .1s;
+  transition: .1s;
+  font-weight: 500;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  padding: 12px 20px;
+  font-size: 14px;
+  border-radius: 4px
+}
+
+.el-button+.el-button {
+  margin-left: 10px
+}
+
+.el-button:focus,
+.el-button:hover {
+  color: #9dbbe7;
+  border-color: rgb(193, 198, 204);
+  background-color: rgb(234, 236, 238)
+}
+
+.el-button:active {
+  color: #9dbbe7;
+  border-color: rgb(43, 59, 77);
+  outline: 0
+}
+
+.el-button::-moz-focus-inner {
+  border: 0
+}
+
+.el-button [class*=el-icon-]+span {
+  margin-left: 5px
+}
+
+.el-button.is-plain:focus,
+.el-button.is-plain:hover {
+  background: #FFF;
+  border-color: #264672;
+  color: #264672
+}
+
+.el-button.is-active,
+.el-button.is-plain:active {
+  color: rgb(43, 59, 77);
+  border-color: rgb(43, 59, 77)
+}
+
+.el-button.is-plain:active {
+  background: #FFF;
+  outline: 0
+}
+
+.el-button.is-disabled,
+.el-button.is-disabled:focus,
+.el-button.is-disabled:hover {
+  color: #C0C4CC;
+  cursor: not-allowed;
+  background-image: none;
+  background-color: #FFF;
+  border-color: #EBEEF5
+}
+
+.el-button.is-disabled.el-button--text {
+  background-color: transparent
+}
+
+.el-button.is-disabled.is-plain,
+.el-button.is-disabled.is-plain:focus,
+.el-button.is-disabled.is-plain:hover {
+  background-color: #FFF;
+  border-color: #EBEEF5;
+  color: #C0C4CC
+}
+
+.el-button.is-loading {
+  position: relative;
+  pointer-events: none
+}
+
+.el-button.is-loading:before {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  left: -1px;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, .35)
+}
+
+.el-button.is-round {
+  border-radius: 20px;
+  padding: 12px 23px
+}
+
+.el-button.is-circle {
+  border-radius: 50%;
+  padding: 12px
+}
+
+.el-button--primary {
+  color: #FFF;
+  background-color: #9dbbe7;
+  border-color: #9dbbe7
+}
+
+.el-button--primary:focus,
+.el-button--primary:hover {
+  background: rgb(89, 103, 120);
+  border-color: rgb(89, 103, 120);
+  color: #FFF
+}
+
+.el-button--primary.is-active,
+.el-button--primary:active {
+  background: rgb(43, 59, 77);
+  border-color: rgb(43, 59, 77);
+  color: #FFF
+}
+
+.el-button--primary:active {
+  outline: 0
+}
+
+.el-button--primary.is-disabled,
+.el-button--primary.is-disabled:active,
+.el-button--primary.is-disabled:focus,
+.el-button--primary.is-disabled:hover {
+  color: #FFF;
+  background-color: rgb(152, 160, 171);
+  border-color: rgb(152, 160, 171)
+}
+
+.el-button--primary.is-plain {
+  color: #264672;
+  background: rgb(234, 236, 238);
+  border-color: rgb(172, 179, 187)
+}
+
+.el-button--primary.is-plain:focus,
+.el-button--primary.is-plain:hover {
+  background: #264672;
+  border-color: #264672;
+  color: #FFF
+}
+
+.el-button--primary.is-plain:active {
+  background: rgb(43, 59, 77);
+  border-color: rgb(43, 59, 77);
+  color: #FFF;
+  outline: 0
+}
+
+.el-button--primary.is-plain.is-disabled,
+.el-button--primary.is-plain.is-disabled:active,
+.el-button--primary.is-plain.is-disabled:focus,
+.el-button--primary.is-plain.is-disabled:hover {
+  color: rgb(131, 141, 154);
+  background-color: rgb(234, 236, 238);
+  border-color: rgb(214, 217, 221)
+}
+
+.el-button--success {
+  color: #FFF;
+  background-color: #67C23A;
+  border-color: #67C23A
+}
+
+.el-button--success:focus,
+.el-button--success:hover {
+  background: #85ce61;
+  border-color: #85ce61;
+  color: #FFF
+}
+
+.el-button--success.is-active,
+.el-button--success:active {
+  background: #5daf34;
+  border-color: #5daf34;
+  color: #FFF
+}
+
+.el-button--success:active {
+  outline: 0
+}
+
+.el-button--success.is-disabled,
+.el-button--success.is-disabled:active,
+.el-button--success.is-disabled:focus,
+.el-button--success.is-disabled:hover {
+  color: #FFF;
+  background-color: #b3e19d;
+  border-color: #b3e19d
+}
+
+.el-button--success.is-plain {
+  color: #67C23A;
+  background: #f0f9eb;
+  border-color: #c2e7b0
+}
+
+.el-button--success.is-plain:focus,
+.el-button--success.is-plain:hover {
+  background: #67C23A;
+  border-color: #67C23A;
+  color: #FFF
+}
+
+.el-button--success.is-plain:active {
+  background: #5daf34;
+  border-color: #5daf34;
+  color: #FFF;
+  outline: 0
+}
+
+.el-button--success.is-plain.is-disabled,
+.el-button--success.is-plain.is-disabled:active,
+.el-button--success.is-plain.is-disabled:focus,
+.el-button--success.is-plain.is-disabled:hover {
+  color: #a4da89;
+  background-color: #f0f9eb;
+  border-color: #e1f3d8
+}
+
+.el-button--warning {
+  color: #FFF;
+  background-color: #E6A23C;
+  border-color: #E6A23C
+}
+
+.el-button--warning:focus,
+.el-button--warning:hover {
+  background: #ebb563;
+  border-color: #ebb563;
+  color: #FFF
+}
+
+.el-button--warning.is-active,
+.el-button--warning:active {
+  background: #cf9236;
+  border-color: #cf9236;
+  color: #FFF
+}
+
+.el-button--warning:active {
+  outline: 0
+}
+
+.el-button--warning.is-disabled,
+.el-button--warning.is-disabled:active,
+.el-button--warning.is-disabled:focus,
+.el-button--warning.is-disabled:hover {
+  color: #FFF;
+  background-color: #f3d19e;
+  border-color: #f3d19e
+}
+
+.el-button--warning.is-plain {
+  color: #E6A23C;
+  background: #fdf6ec;
+  border-color: #f5dab1
+}
+
+.el-button--warning.is-plain:focus,
+.el-button--warning.is-plain:hover {
+  background: #E6A23C;
+  border-color: #E6A23C;
+  color: #FFF
+}
+
+.el-button--warning.is-plain:active {
+  background: #cf9236;
+  border-color: #cf9236;
+  color: #FFF;
+  outline: 0
+}
+
+.el-button--warning.is-plain.is-disabled,
+.el-button--warning.is-plain.is-disabled:active,
+.el-button--warning.is-plain.is-disabled:focus,
+.el-button--warning.is-plain.is-disabled:hover {
+  color: #f0c78a;
+  background-color: #fdf6ec;
+  border-color: #faecd8
+}
+
+.el-button--danger {
+  color: #FFF;
+  background-color: #F56C6C;
+  border-color: #F56C6C
+}
+
+.el-button--danger:focus,
+.el-button--danger:hover {
+  background: #f78989;
+  border-color: #f78989;
+  color: #FFF
+}
+
+.el-button--danger.is-active,
+.el-button--danger:active {
+  background: #dd6161;
+  border-color: #dd6161;
+  color: #FFF
+}
+
+.el-button--danger:active {
+  outline: 0
+}
+
+.el-button--danger.is-disabled,
+.el-button--danger.is-disabled:active,
+.el-button--danger.is-disabled:focus,
+.el-button--danger.is-disabled:hover {
+  color: #FFF;
+  background-color: #fab6b6;
+  border-color: #fab6b6
+}
+
+.el-button--danger.is-plain {
+  color: #F56C6C;
+  background: #fef0f0;
+  border-color: #fbc4c4
+}
+
+.el-button--danger.is-plain:focus,
+.el-button--danger.is-plain:hover {
+  background: #F56C6C;
+  border-color: #F56C6C;
+  color: #FFF
+}
+
+.el-button--danger.is-plain:active {
+  background: #dd6161;
+  border-color: #dd6161;
+  color: #FFF;
+  outline: 0
+}
+
+.el-button--danger.is-plain.is-disabled,
+.el-button--danger.is-plain.is-disabled:active,
+.el-button--danger.is-plain.is-disabled:focus,
+.el-button--danger.is-plain.is-disabled:hover {
+  color: #f9a7a7;
+  background-color: #fef0f0;
+  border-color: #fde2e2
+}
+
+.el-button--info {
+  color: #FFF;
+  background-color: #909399;
+  border-color: #909399
+}
+
+.el-button--info:focus,
+.el-button--info:hover {
+  background: #a6a9ad;
+  border-color: #a6a9ad;
+  color: #FFF
+}
+
+.el-button--info.is-active,
+.el-button--info:active {
+  background: #82848a;
+  border-color: #82848a;
+  color: #FFF
+}
+
+.el-button--info:active {
+  outline: 0
+}
+
+.el-button--info.is-disabled,
+.el-button--info.is-disabled:active,
+.el-button--info.is-disabled:focus,
+.el-button--info.is-disabled:hover {
+  color: #FFF;
+  background-color: #c8c9cc;
+  border-color: #c8c9cc
+}
+
+.el-button--info.is-plain {
+  color: #909399;
+  background: #f4f4f5;
+  border-color: #d3d4d6
+}
+
+.el-button--info.is-plain:focus,
+.el-button--info.is-plain:hover {
+  background: #909399;
+  border-color: #909399;
+  color: #FFF
+}
+
+.el-button--info.is-plain:active {
+  background: #82848a;
+  border-color: #82848a;
+  color: #FFF;
+  outline: 0
+}
+
+.el-button--info.is-plain.is-disabled,
+.el-button--info.is-plain.is-disabled:active,
+.el-button--info.is-plain.is-disabled:focus,
+.el-button--info.is-plain.is-disabled:hover {
+  color: #bcbec2;
+  background-color: #f4f4f5;
+  border-color: #e9e9eb
+}
+
+.el-button--text,
+.el-button--text.is-disabled,
+.el-button--text.is-disabled:focus,
+.el-button--text.is-disabled:hover,
+.el-button--text:active {
+  border-color: transparent
+}
+
+.el-button--medium {
+  padding: 10px 20px;
+  font-size: 14px;
+  border-radius: 4px
+}
+
+.el-button--mini,
+.el-button--small {
+  font-size: 12px;
+  border-radius: 3px
+}
+
+.el-button--medium.is-round {
+  padding: 10px 20px
+}
+
+.el-button--medium.is-circle {
+  padding: 10px
+}
+
+.el-button--small,
+.el-button--small.is-round {
+  padding: 9px 15px
+}
+
+.el-button--small.is-circle {
+  padding: 9px
+}
+
+.el-button--mini,
+.el-button--mini.is-round {
+  padding: 7px 15px
+}
+
+.el-button--mini.is-circle {
+  padding: 7px
+}
+
+.el-button--text {
+  color: #264672;
+  background: 0 0;
+  padding-left: 0;
+  padding-right: 0
+}
+
+.el-button--text:focus,
+.el-button--text:hover {
+  color: rgb(89, 103, 120);
+  border-color: transparent;
+  background-color: transparent
+}
+
+.el-button--text:active {
+  color: rgb(43, 59, 77);
+  background-color: transparent
+}
+
+.el-button-group {
+  display: inline-block;
+  vertical-align: middle
+}
+
+.el-button-group::after,
+.el-button-group::before {
+  display: table;
+  content: ""
+}
+
+.el-button-group::after {
+  clear: both
+}
+
+.el-button-group>.el-button {
+  float: left;
+  position: relative
+}
+
+.el-button-group>.el-button+.el-button {
+  margin-left: 0
+}
+
+.el-button-group>.el-button:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0
+}
+
+.el-button-group>.el-button:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0
+}
+
+.el-button-group>.el-button:first-child:last-child {
+  border-radius: 4px
+}
+
+.el-button-group>.el-button:first-child:last-child.is-round {
+  border-radius: 20px
+}
+
+.el-button-group>.el-button:first-child:last-child.is-circle {
+  border-radius: 50%
+}
+
+.el-button-group>.el-button:not(:first-child):not(:last-child) {
+  border-radius: 0
+}
+
+.el-button-group>.el-button:not(:last-child) {
+  margin-right: -1px
+}
+
+.el-button-group>.el-dropdown>.el-button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--primary:first-child {
+  border-right-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--primary:last-child {
+  border-left-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--primary:not(:first-child):not(:last-child) {
+  border-left-color: rgba(255, 255, 255, .5);
+  border-right-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--success:first-child {
+  border-right-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--success:last-child {
+  border-left-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--success:not(:first-child):not(:last-child) {
+  border-left-color: rgba(255, 255, 255, .5);
+  border-right-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--warning:first-child {
+  border-right-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--warning:last-child {
+  border-left-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--warning:not(:first-child):not(:last-child) {
+  border-left-color: rgba(255, 255, 255, .5);
+  border-right-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--danger:first-child {
+  border-right-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--danger:last-child {
+  border-left-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--danger:not(:first-child):not(:last-child) {
+  border-left-color: rgba(255, 255, 255, .5);
+  border-right-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--info:first-child {
+  border-right-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--info:last-child {
+  border-left-color: rgba(255, 255, 255, .5)
+}
+
+.el-button-group .el-button--info:not(:first-child):not(:last-child) {
+  border-left-color: rgba(255, 255, 255, .5);
+  border-right-color: rgba(255, 255, 255, .5)
+}

src/assets/css/common.scss

@@ -0,0 +1,850 @@
+#mapDiv {
+  width: 100%;
+  bottom: 0;
+  position: absolute;
+  top: 0px;
+
+
+  #indexTable {
+    .v-table-header-row {
+      display: none !important;
+    }
+
+    ::-webkit-scrollbar {
+      /* 滚动条整体样式 */
+      width: 5px;
+      /* 高宽分别对应横竖滚动条的尺寸 */
+      height: 1px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      /* 滚动条里面小方块 */
+      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+      background: #535353;
+    }
+
+    ::-webkit-scrollbar-track {
+      /* 滚动条里面轨道 */
+      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+      background: #ededed;
+    }
+  }
+
+  .el-carousel__indicators--horizontal {
+    width: 60%;
+  }
+
+  .el-carousel {
+    border: 1px solid rgba(221, 221, 221, 1);
+  }
+
+  .el-carousel__item span {
+    color: #fff;
+    line-height: 25px;
+    margin: 0;
+    display: block;
+    padding: 20px;
+  }
+
+  .el-carousel__item p {
+    color: #000;
+    font-size: 14px;
+    line-height: 20px;
+    margin: 0;
+    display: inline-flex;
+    font-weight: 600;
+    padding: 10px 0px 0 10px;
+    width: 25%;
+  }
+
+  .el-carousel__item .content {
+    color: #000;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 25px;
+    margin: 0;
+    display: inline-flex;
+    cursor: pointer;
+    width: 70%;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #fff;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #fff;
+  }
+}
+
+#mainDiv {
+  width: 100%;
+  bottom: 0;
+  position: absolute;
+  top: 50px;
+}
+
+.infoDialog {
+  .el-dialog {
+    width: 380px !important;
+    height: 500px !important;
+  }
+
+  .el-dialog__wrapper {
+    margin: auto;
+    height: 100%;
+  }
+
+  .el-dialog__body {
+    padding: 5px 5px;
+  }
+}
+
+.infoDialog2 {
+  .el-dialog {
+    width: 400px !important;
+    height: 580px !important;
+  }
+
+  .el-dialog__wrapper {
+    margin: auto;
+    height: 100%;
+  }
+
+  .el-dialog__body {
+    padding: 10px 10px;
+  }
+}
+
+.infoDialog1 {
+  .el-dialog {
+    width: 400px !important;
+    height: 620px !important;
+  }
+
+  .el-dialog__wrapper {
+    margin: auto;
+    height: 100%;
+  }
+
+  .el-dialog__body {
+    padding: 10px 10px;
+  }
+}
+
+.taskDialog {
+  .el-dialog {
+    width: 35% !important;
+  }
+
+  .el-dialog__wrapper {
+    margin: auto;
+    height: 100% !important;
+    top: 0px !important;
+    position: absolute !important;
+  }
+
+  .el-dialog__body {
+    padding: 5px 5px;
+  }
+}
+
+.InfoCard {
+  position: absolute;
+  margin-left: 600px;
+  margin-top: 200px;
+  width: 380px !important;
+  height: 600px !important;
+}
+
+//table样式
+.comClo {
+  background-color: rgba(157, 187, 231, 0.50) !important;
+}
+
+.sinCl {
+  background-color: #9DBBE7 !important;
+  color: #FFFFFF !important;
+}
+
+.el-table .cell {
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
+  letter-spacing: 0;
+
+}
+
+.el-table th,
+.el-table tr {
+  background-color: #FFF;
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
+  color: #264672;
+  letter-spacing: 0;
+}
+
+.el-table--border,
+.el-table--group {
+  border: 1px solid rgba(157, 187, 231, 0.50);
+  border-radius: 4px;
+  background: #FFFFFF;
+}
+
+.el-table--border td,
+.el-table--border th,
+.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
+  border-right: 1px solid rgba(211, 226, 246, 0.5);
+}
+
+.el-table td,
+.el-table th.is-leaf {
+  border-bottom: 1px solid rgba(211, 226, 246, 0.5);
+}
+
+.el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: rgba(157, 187, 231, 0.50)
+}
+
+
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+  width: 100% !important;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.ReportCard {
+  position: fixed;
+  right: 320px;
+  left: 540px;
+  top: 70px;
+  bottom: 20px;
+}
+
+.reportPage {
+  text-align: left;
+}
+
+#TPcontainer {
+  position: absolute;
+  bottom: 0px;
+  top: 70px;
+  width: 100%;
+  height: calc(100% - 50px);
+}
+
+#tablecontainer {
+  position: absolute;
+  bottom: 5px;
+  top: 70px;
+  width: calc(100% - 160px);
+  height: calc(100% - 90px);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+#buttonStyle {
+  background: #9dbbe7;
+  border-radius: 4px;
+  border-color: #9dbbe7;
+  color: #fff;
+}
+
+#buttonStyle1 {
+  background: #9dbbe7;
+  border-radius: 4px;
+  border-color: #ecedf0;
+  color: #fff;
+}
+
+#buttonS {
+  background: #264672;
+  border-radius: 4px;
+  border-color: #264672;
+  color: #fff;
+}
+
+.el-checkbox__input.is-checked+.el-checkbox__label {
+  color: #304156;
+}
+
+
+
+.el-checkbox.is-bordered.is-checked {
+  border-color: #dcdfe6;
+}
+
+#tablecontainer1 {
+  position: absolute;
+  bottom: 5px;
+  top: 50px;
+  width: calc(100% - 160px);
+  height: calc(100% - 75px);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+#editionContainer {
+  width: 365px;
+  height: 448px;
+  margin: auto;
+}
+
+.mySwitch {
+  margin-top: 80px;
+  float: right;
+  margin-right: 10px;
+}
+
+@media screen and (min-width:684px) and (max-width: 976px) {
+  .container .topbar-wrap .topbar-title {
+    float: left !important;
+    width: 100%;
+  }
+
+  .el-image-viewer__wrapper {
+    top: 140px !important;
+  }
+
+  .mySwitch {
+    margin-top: 150px;
+  }
+
+  .el-main {
+    padding: 0;
+    height: calc(100% - 70px) !important;
+  }
+
+  #leftPanel {
+    height: calc(100% - 70px) !important;
+    top: 140px !important;
+  }
+
+  #leftPanelScroll {
+    overflow: hidden;
+    height: calc(100% - 140px);
+  }
+
+  #TPcontainer {
+    height: calc(100% - 70px) !important;
+    top: 140px !important;
+  }
+
+  .ReportCard {
+    bottom: 20px;
+    right: 150px !important;
+    left: 470px;
+    top: 120px
+  }
+
+  #editionContainer {
+    width: 320px !important;
+  }
+}
+
+@media screen and (min-width:342px) and (max-width: 684px) {
+  #leftPanel {
+    width: 350px !important;
+    height: calc(100% - 140px) !important;
+    top: 210px !important;
+  }
+
+  .mySwitch {
+    margin-top: 210px;
+  }
+
+  .el-image-viewer__wrapper {
+    top: 210px !important;
+  }
+
+  .el-main {
+    padding: 0;
+    height: calc(100% - 70px) !important;
+  }
+
+  #leftPanelScroll {
+    overflow: hidden;
+    height: calc(100% - 210px);
+  }
+
+  .left-content {
+    margin-left: 0px !important;
+    width: 355px !important;
+  }
+
+  .container .topbar-wrap .topbar-title {
+    float: left !important;
+    width: 100%;
+  }
+
+  #toLeft {
+    left: 355px !important;
+  }
+
+  #toRight {
+    left: 0px !important;
+  }
+
+  #TPcontainer {
+    height: calc(100% - 140px) !important;
+    top: 210px !important;
+  }
+
+  #editionContainer {
+    width: 320px !important;
+  }
+
+  .ReportCard {
+    bottom: 20px;
+    right: 20px !important;
+    left: 370px;
+    top: 220px
+  }
+
+  .reportPage {
+    text-align: left;
+  }
+}
+
+.el-image-viewer__wrapper {
+  position: fixed;
+  top: 70px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+@media screen and (max-width:342px) {
+  #leftPanel {
+    width: 350px !important;
+    height: calc(100% - 210px) !important;
+    top: 280px !important;
+  }
+
+  .mySwitch {
+    margin-top: 220px;
+  }
+
+  .el-main {
+    padding: 0;
+    height: calc(100% - 70px) !important;
+  }
+
+  #leftPanelScroll {
+    overflow: hidden;
+    height: calc(100% - 280px);
+  }
+
+  .container .topbar-wrap .topbar-title {
+    float: left !important;
+    width: 100%;
+  }
+
+  .el-image-viewer__wrapper {
+    top: 280px !important;
+  }
+
+  .left-content {
+    margin-left: 0px !important;
+    width: 355px !important;
+  }
+
+  #toLeft {
+    left: 355px !important;
+  }
+
+  #toRight {
+    left: 0px !important;
+  }
+
+  #TPcontainer {
+    height: calc(100% - 210px) !important;
+    top: 280px !important;
+  }
+
+  #editionContainer {
+    width: 320px !important;
+  }
+
+  .ReportCard {
+    bottom: 20px;
+    right: 5px !important;
+    left: 20px;
+    top: 220px
+  }
+
+
+  .reportPage {
+    text-align: left;
+  }
+
+  .taskDialog {
+    .el-dialog {
+      width: 300px !important;
+    }
+  }
+
+}
+
+.pcaQuery {
+  .el-button {
+    height: 33px;
+    padding: 7px 15px;
+  }
+}
+
+#layer-switch img {
+  width: 35px;
+  background-size: 100% 100%;
+  background-position: center;
+}
+
+#layerTree-container {
+  position: absolute;
+  bottom: 60px;
+  left: 10px;
+  width: 240px;
+  z-index: 20;
+  overflow: auto;
+  border: 1px solid #304156;
+  padding-bottom: 5px;
+  background-color: #fff;
+}
+
+#layer-switch {
+  position: absolute;
+  z-index: 2;
+  bottom: 10px;
+  left: 10px;
+}
+
+#toLeft {
+  position: absolute;
+  top: 45%;
+  left: 455px;
+  width: 15px;
+  height: 40px;
+  background-color: #F7F8F1;
+  z-index: 98;
+}
+
+#toRight {
+  position: absolute;
+  top: 45%;
+  left: 30px;
+  width: 15px;
+  height: 40px;
+  background-color: #F7F8F1;
+  z-index: 98;
+}
+
+#leftPanelScroll {
+  overflow: hidden;
+  height: calc(100% - 70px);
+}
+
+#leftPanel {
+  //opacity: 0.9;
+  width: 450px;
+  position: absolute;
+  top: 70px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 98;
+  padding-left: 10px;
+  background-color: rgba(247, 248, 241, 0.9);
+  box-shadow: 0 2px 40px 0 rgba(157, 187, 231, 0.50);
+  border-radius: 0 0 4px 4px 4px 4px 0 0;
+  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.5);
+  height: 100%;
+}
+
+.el-collapse-item__wrap {
+  background-color: #F7F8F1 !important;
+}
+
+.el-collapse-item__header {
+  background-color: #F7F8F1 !important;
+}
+
+.el-breadcrumb__inner {
+  color: #264672 !important;
+  font-family: PingFangSC-Regular;
+  font-size: 16px;
+}
+
+//选择框背景
+// .el-input--suffix .el-input__inner {
+//   background: #9DBBE7;
+//   color: #FFF;
+// }
+
+// .el-input__icon {
+//   color: #FFFFFF !important;
+// }
+
+
+.left-content {
+  overflow-y: scroll;
+  height: 100%;
+  background-color: #F7F8F1;
+  margin-left: 20px;
+  width: 435px;
+
+  &::-webkit-scrollbar {
+    /* 滚动条整体样式 */
+    width: 5px;
+    /* 高宽分别对应横竖滚动条的尺寸 */
+    height: 1px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    /* 滚动条里面小方块 */
+    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+    background: #535353;
+  }
+
+  &::-webkit-scrollbar-track {
+    /* 滚动条里面轨道 */
+    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
+    background: #ededed;
+  }
+}
+
+
+
+.mainInfo {
+  height: 30px;
+  padding: 7px 15px;
+  width: 75px;
+}
+
+.infoQuery {
+  font-size: 14px;
+
+  .el-form-item {
+    margin-bottom: 5px;
+  }
+
+  .el-tabs--border-card {
+    width: 96%;
+  }
+}
+
+.indexQuery {
+  position: relative;
+
+  .el-button {
+    height: 33px;
+    padding: 7px 15px;
+  }
+}
+
+.v-modal {
+  z-index: -2 !important;
+}
+
+.pacmapdialog {
+  .el-dialog {
+    width: 420px;
+    margin-top: 200px !important;
+    margin-bottom: 800px !important;
+  }
+
+  .el-button {
+    height: 33px;
+    padding: 7px 15px;
+    margin-left: 10px;
+  }
+}
+
+#timeLineStep {
+  position: absolute;
+  bottom: 50px;
+  left: 150px;
+  z-index: 100;
+  width: 55%;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 5px;
+  padding: 10px 5px 0px 5px;
+}
+
+
+.el-loading-text {
+  font-size: 16px !important;
+}
+
+
+.sitcontent,
+.plcontent {
+  color: #304156;
+  display: inline-block;
+  line-height: 20px;
+  margin: 2px;
+  padding: 3px 3px 3px 10px;
+  width: 92%;
+}
+
+.plcontent {
+  background: #dfe8f1;
+  width: 45%;
+}
+
+.sitcontent {
+  background: #dfe8f1;
+}
+
+.areatitle {
+  background: #dfe8f1;
+  font-size: 16px;
+  width: 45%;
+}
+
+.pltitle,
+.areatitle {
+  font-size: 15px;
+  display: inline-block;
+  padding-bottom: 5px;
+  background: #adcdec;
+  margin: 2px;
+  padding: 3px 3px 3px 10px;
+  width: 92%;
+}
+
+.pltip {
+  color: #304156;
+  display: inline-block;
+  margin: 2px;
+}
+
+
+.el-dialog__body {
+  padding: 0px 10px 10px 10px;
+}
+
+.el-dialog__wrapper {
+  overflow: hidden !important;
+}
+
+.workerTeamDialog {
+  .el-dialog {
+    width: 520px;
+    height: 520px;
+  }
+
+  .el-dialog__body {
+    font-size: 13px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 500px;
+    padding: 10px;
+    text-align: center;
+  }
+
+  .el-dialog__header {
+    padding: 8px !important;
+    background-color: #445466;
+    color: #fff !important;
+    border-radius: 5px 5px 0px 0px;
+  }
+
+  .el-dialog__title {
+    color: #fff !important;
+    padding: 0px 10px !important;
+    font-size: 16px !important
+  }
+
+  .el-table__header tr,
+  .el-table__header th {
+    padding: 0;
+    height: 40px;
+  }
+
+  .el-table__body tr,
+  .el-table__body td {
+    padding: 0;
+    height: 40px;
+  }
+
+  .workerBtn {
+    padding: 8px 10px;
+    margin-top: 10px;
+  }
+
+  .allomapBtn {
+    padding: 8px 10px;
+  }
+}
+
+
+.ol-popup {
+  position: absolute;
+  background-color: #fff;
+  -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: 360px;
+}
+
+.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: #fff;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+
+.ol-popup:before {
+  border-top-color: #fff;
+  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: "✖";
+}
+
+// 全局样式 避免编辑选项多次点击 表格出现没对齐的情况 20210703 by lbz
+// 目前tablecontainer1只出现在createTable和tableCon中
+#tablecontainer1 .tb-edit .el-table__fixed-body-wrapper {
+  top: 58px !important;
+}

src/assets/css/main.css

@@ -0,0 +1,597 @@
+/*
+* {
+  margin: 0;
+  padding: 0;
+}
+*/
+
+html {
+  font-size: 14px;
+  height: 100%;
+  width: 100%;
+}
+
+@media all and (max-width: 768px) {
+  html {
+    font-size: 12px;
+  }
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+a {
+  text-decoration: none;
+}
+
+ul {
+  list-style: none;
+  margin-bottom: 0;
+}
+
+.container {
+  /* position: absolute; */
+  top: 0px;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+}
+
+.el-header {
+  height: 0px !important;
+}
+
+.el-form-item__label {
+  font-family: PingFangSC-Regular;
+  color: #264672 !important;
+}
+
+.el-pager li {
+  background: rgb(247, 248, 241) !important;
+}
+
+.el-pagination button {
+  background: rgb(247, 248, 241) !important;
+}
+
+#searchList {
+  text-align: left;
+  width: 91%;
+  margin-left: 4%;
+  border: 1px solid #9DBBE7 !important;
+  border-radius: 4px;
+  color: rgb(38, 70, 114);
+  font-size: 14px !important;
+  font-family: PingFangSC-Regular;
+}
+
+.backcolor {
+  background: rgba(157, 187, 231, 0.3);
+  margin-left: 10px;
+}
+
+.nonecolor {
+  margin-left: 10px;
+}
+
+.dateBtn {
+  background-color: #264672 !important;
+  font-family: PingFangSC-Regular;
+  color: #FFFFFF !important;
+  margin-bottom: 15px;
+}
+
+.el-tabs__nav-scroll {
+  /* background: #9DBBE7 !important; */
+  width: 100%;
+}
+
+
+.container .topbar-wrap {
+  height: 70px;
+  line-height: 70px;
+  padding: 0px;
+  opacity: 0.9;
+  background: #F7F8F1;
+  box-shadow: 0 2px 40px 0 rgba(157, 187, 231, 0.50);
+}
+
+.container .topbar-wrap .topbar-btn {
+  color: #fff;
+}
+
+.container .topbar-wrap .topbar-logo {
+  float: left;
+  width: 42px;
+  line-height: 26px;
+}
+
+.container .topbar-wrap .topbar-logos {
+  float: left;
+  width: 400px;
+  line-height: 50px;
+  font-size: 17px;
+  text-align: left;
+}
+
+.container .topbar-wrap .topbar-logo img,
+.container .topbar-wrap .topbar-logos img {
+  height: 20px;
+  margin-top: 13px;
+}
+
+.container .topbar-wrap .topbar-title {
+  float: right;
+  text-align: left;
+  font-size: 15px;
+  border-left: 0px solid #000;
+  z-index: 999;
+  margin-right: 0px;
+  height: 70px;
+}
+
+.topbar-title .el-menu--horizontal {
+  background-color: transparent;
+}
+
+.el-menu--popup-bottom-start {
+  margin-top: 0px !important;
+}
+
+
+
+.topbar-title .el-menu--horizontal>.el-menu-item {
+  height: 70px !important;
+  line-height: 70px !important;
+  width: 140px;
+  text-align: center;
+}
+
+.el-menu--horizontal>.el-submenu .el-submenu__title {
+  width: 140px;
+  text-align: center;
+}
+
+
+
+.el-checkbox__inner {
+  border: 1px solid #9DBBE7 !important;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #9DBBE7 !important;
+  color: #fff !important;
+}
+
+/* .el-input.is-disabled .el-input__inner {
+  background-color: #9DBBE7 !important;
+} */
+
+.el-submenu__title {
+  padding: 0px 10px !important;
+}
+
+.el-tooltip {
+  padding-left: 1px;
+}
+
+.el-menu-item .iconfont {
+  margin-right: 5px;
+  display: inline-block;
+  width: 24px;
+  text-align: center;
+  font-size: 18px;
+  vertical-align: middle;
+}
+
+.container .topbar-wrap .topbar-account {
+  float: right;
+  font-size: 14px;
+  right: 10px;
+  position: absolute;
+}
+
+.container .topbar-wrap .topbar-timer {
+  display: inline-block;
+}
+
+.container .topbar-wrap .topbar-timer span {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.container .topbar-wrap .topbar-timer .login-name {
+  margin: 0 6px;
+  font-style: normal;
+}
+
+.container .topbar-wrap .userinfo-inner {
+  cursor: pointer;
+  color: #fff;
+  padding-left: 10px;
+}
+
+.container .topbar-wrap .userinfo-inner img {
+  margin-left: 6px;
+  width: 42px;
+  height: 42px;
+  border: 1px solid #504d4d;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.container .menu-toggle {
+  background: #4A5064;
+  text-align: center;
+  color: white;
+  height: 26px;
+  line-height: 30px;
+}
+
+.container .menu-toggle .iconfont:hover {
+  cursor: pointer;
+}
+
+.container .main {
+  display: -ms-flexbox;
+  display: flex;
+  position: absolute;
+  top: 50px;
+  bottom: 0px;
+  overflow: hidden;
+}
+
+.container .content-container {
+  background: #fff;
+  -ms-flex: 1;
+  flex: 1;
+  overflow-y: auto;
+  padding: 0px;
+  padding-bottom: 1px;
+}
+
+.container .content-container .content-wrapper {
+  background-color: #fff;
+  box-sizing: border-box;
+}
+
+.el-menu--horizontal>.el-menu-item.is-active {
+  color: #fff !important;
+  border-bottom: 4px solid #409EFF !important;
+}
+
+.myInfoWindow {
+  position: absolute;
+  z-index: 100;
+  box-shadow: 0 0 1em #26393D;
+  font-family: sans-serif;
+  font-size: 12px;
+  background-color: rgba(255, 255, 255, 0);
+}
+
+/*.dj_ie .myInfoWindow {*/
+/*border: 1px solid rgba(255, 255, 255, 0);*/
+/*}*/
+
+.myInfoWindow .content {
+  position: relative;
+  color: #002F2F;
+  overflow: auto;
+  padding: 2px 2px 2px 2px;
+  background-color: rgba(255, 255, 255, 0);
+}
+
+.nodeTest {
+  overflow: hidden !important;
+}
+
+input::-webkit-input-placeholder {
+  /* WebKit browsers */
+
+  color: #0b0507;
+
+}
+
+input:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+
+  color: #0b0507;
+}
+
+input::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+
+  color: #0b0507;
+}
+
+input:-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+
+  color: #0b0507;
+}
+
+.el-aside.tac {
+  width: 250px !important;
+  text-align: start;
+  height: 100%;
+  background-color: #fff;
+}
+
+.el-aside.tac .el-submenu__title,
+el-aside.tac.el-menu-item,
+.el-aside.tac .el-submenu .el-menu-item {
+  height: 40px !important;
+  line-height: 40px !important;
+  background-color: white;
+  color: black;
+}
+
+.el-aside.tac .el-menu-item-group__title {
+  color: black;
+  background-color: white;
+  padding: 0px !important;
+}
+
+.el-aside.tac .el-submenu .el-menu-item:hover {
+  background-color: #E8E8E8;
+  color: black;
+
+}
+
+.el-menu--horizontal>.el-menu-item:hover {
+  border-bottom: 4px solid #409EFF;
+  border-bottom-color: #409EFF !important;
+}
+
+.el-aside.tac .el-menu-item.is-active {
+  background-color: #304156;
+  color: white;
+}
+
+.el-container,
+.el-menu {
+  height: 100% !important;
+}
+
+#bread_container {
+  background-color: white !important;
+  color: black;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  border-bottom: 1px solid #D3D3D3;
+}
+
+.el-breadcrumb {
+  font-size: 14px;
+  color: black;
+  line-height: 30px !important;
+  padding-left: 10px;
+}
+
+.manageleft {
+  width: 250px !important;
+}
+
+.el-header {
+  padding: 0;
+  z-index: 1000;
+}
+
+.el-main {
+  padding: 0;
+  height: 100%;
+}
+
+
+.dragdiv-header {
+  color: black;
+  font-size: 16px;
+  line-height: 40px;
+  text-align: center;
+}
+
+.el-dialog__headerbtn {
+  top: 14px !important;
+  right: 10px !important;
+}
+
+.esriPopup .titlePane {
+  background-color: #304156 !important;
+}
+
+.esriPopup .contentPane {
+  padding-left: 5px;
+  padding-top: 3px;
+  background-color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.esriPopup .pointer.top {
+  background-color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.el-collapse-item__header {
+  font-size: 15px !important;
+}
+
+.el-collapse-item__content {
+  padding-bottom: 10px !important;
+}
+
+.el-input__inner {
+  height: 35px !important;
+}
+
+
+
+.el-checkbox__label {
+  width: 320px;
+  white-space: normal;
+  display: inline-flex !important;
+}
+
+
+.el-button--primary:active,
+.el-button--primary:focus,
+.el-button--primary:hover {
+  color: #FFF !important;
+  background-color: #304156 !important;
+  border-color: #304156 !important;
+}
+
+
+.v-table-body-cell span {
+  display: flex;
+  white-space: normal;
+  line-height: 18px;
+  font-size: 13px !important;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  color: #000;
+}
+
+.v-table-body-cell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.table-title {
+  color: #000;
+}
+
+.el-dialog__header {
+  padding: 8px !important;
+  background-color: #9dbbe7;
+  color: #fff !important;
+  border-radius: 5px 5px 0px 0px;
+}
+
+.el-dialog__title {
+  color: #fff !important;
+  padding: 0px 10px !important;
+  font-size: 16px !important
+}
+
+.el-dialog {
+  border-radius: 5px !important;
+}
+
+.v-table-title-cell span {
+  font-size: 12px !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 18px;
+}
+
+.v-table-title-cell {
+  padding: 0px 5px;
+}
+
+
+.el-dialog {
+  margin-top: 10% !important;
+  margin-bottom: 200px !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  z-index: 1001;
+}
+
+.el-popup-parent--hidden {
+  padding: 0px !important;
+}
+
+@media screen and (max-width: 1500px) {
+  .container .topbar-wrap .topbar-logos {
+    float: left;
+    width: 300px;
+    line-height: 50px;
+    font-size: 17px;
+    text-align: left;
+  }
+}
+
+@media screen and (max-width: 1400px) {
+  .container .topbar-wrap .topbar-title {
+    margin-right: 0px;
+    height: 70px;
+  }
+}
+
+
+.el-menu--horizontal>.el-submenu .el-submenu__title {
+  height: 50px !important;
+  line-height: 50px !important;
+}
+
+.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
+  color: #fff !important;
+}
+
+.el-menu--horizontal .el-menu .el-menu-item.is-active,
+.el-menu--horizontal .el-menu .el-submenu.is-active>.el-submenu__title {
+  color: #fff !important;
+}
+
+.el-step__head.is-process,
+.el-step__title.is-process {
+  color: #1296db !important;
+}
+
+.el-step__head.is-wait {
+  color: #304156 !important;
+
+}
+
+.el-step__title.is-success {
+  color: #304156 !important;
+}
+
+.el-step__head.is-success {
+  color: #304156 !important;
+}
+
+.el-step__line {
+  background-color: #304156 !important;
+}
+
+.el-step__line-inner {
+  border-color: #304156 !important;
+}
+
+
+.el-step__title.is-wait {
+  color: #304156 !important;
+  border-color: #304156 !important;
+}
+
+.el-icon-check:before {
+  content: "\E791" !important;
+  font-size: 20px;
+}
+
+
+.el-icon-caret-right:before {
+  content: "\E791";
+}
+
+.el-step__icon {
+  background-color: #ddd !important;
+}
+
+.el-carousel__button {
+  background-color: #aaa;
+}

src/components/404.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="bg">
+    <p>404 NOT FOUNT o(╯□╰)o</p>
+  </div>
+</template>
+<style>
+  html,body {
+    height: 100%;
+  }
+  #app {
+    height: 100%;
+    margin-top: 0;
+  }
+</style>

src/components/DataManagement/featureInfo.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="cardCon">
+    <el-tabs type="border-card" v-model="activeName">
+      <el-tab-pane label="属性" name="first">
+        <div id="infobox">
+          <div>
+            <el-row class="detail-row" v-for="(val, key) in data" :key="key">
+              <template
+                v-if="!isJSON(val)"
+              >
+                <el-col
+                  :span="12"
+                  class="detail-col"
+                  v-show="
+                    key !== 'mediaFileURLs' &&
+                    key !== 'imagedata' &&
+                    key !== 'videodata' &&
+                    key !== 'id'
+                  "
+                >{{ key }}</el-col>
+                <el-col
+                  :span="12"
+                  v-show="
+                    key !== 'mediaFileURLs' &&
+                    key !== 'imagedata' &&
+                    key !== 'videodata' &&
+                    key !== 'id'
+                  "
+                  class="detail-col"
+                >{{ val }}</el-col>
+              </template>
+              <template v-else>
+                <el-col
+                  :span="12"
+                  class="detail-col"
+                  v-show="
+                    key !== 'mediaFileURLs' &&
+                    key !== 'imagedata' &&
+                    key !== 'videodata' &&
+                    key !== 'id'
+                  "
+                >{{ key }}</el-col>
+                <el-col
+                  :span="12"
+                  class="detail-col"
+                >
+                  <el-table :data="parseJSON(val)" style="width: 100%">
+                    <el-table-column prop="value" label="名称"></el-table-column>
+                    <el-table-column prop="key" label="值"></el-table-column>
+                  </el-table>
+                </el-col>
+              </template>
+            </el-row>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="图片" name="second">
+        <el-image
+          v-if="imageshow"
+          style="width: 100%; height: 370px"
+          :src="data.imagedata[0] ? data.imagedata[0] : null"
+          fit="contain"
+          :preview-src-list="data.imagedata"
+        ></el-image>
+        <div style="height: 370px" v-else>暂无图片</div>
+      </el-tab-pane>
+      <el-tab-pane label="视频" name="third">
+        <el-carousel height="370px" :autoplay="false" v-if="videoshow">
+          <el-carousel-item v-for="(item, i) in data.videodata" :key="i">
+            <div style="margin: auto 0; margin-top: 85px">
+              <video-player
+                class="video-player vjs-custom-skin"
+                ref="videoPlayer"
+                :playsinline="true"
+                :options="{
+                  playbackRates: [0.7, 1.0, 1.5, 2.0],
+                  preload: 'auto',
+                  language: 'zh-CN',
+                  aspectRatio: '16:9',
+                  fluid: true,
+                  sources: [{ type: 'video/mp4', src: item }],
+                  notSupportedMessage: '此视频暂无法播放，请稍后再试',
+                  controlBar: {
+                    timeDivider: true,
+                    durationDisplay: true,
+                    remainingTimeDisplay: false,
+                    fullscreenToggle: true
+                  }
+                }"
+              ></video-player>
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+        <div style="height: 370px" v-else>暂无视频</div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { videoPlayer } from 'vue-video-player'
+import 'video.js/dist/video-js.css'
+
+export default {
+  name: 'featureInfo',
+  components: {
+    videoPlayer
+  },
+  data () {
+    return {
+      imageshow: false,
+      videoshow: false,
+      activeName: 'first',
+      imagedata1: []
+    }
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  methods: {
+    isJSON (value) {
+      try {
+        const parsed = JSON.parse(value)
+        return Array.isArray(parsed) && parsed.every(item => typeof item === 'object')
+      } catch (e) {
+        return false
+      }
+    },
+    parseJSON (value) {
+      try {
+        return JSON.parse(value).map(item => ({ key: item.key, value: item.value }))
+      } catch (e) {
+        return []
+      }
+    }
+  },
+  computed: {},
+  created () {},
+  watch: {
+    data: {
+      handler () {
+        this.imagedata1 = []
+        if (this.data.videodata && this.data.imagedata) {
+          if (this.data.videodata.length > 0) {
+            this.videoshow = true
+          } else {
+            this.videoshow = false
+          }
+          if (this.data.imagedata.length > 0) {
+            this.imageshow = true
+          } else {
+            this.imageshow = false
+          }
+        }
+        for (var key in this.data) {
+          if (
+            key !== 'mediaFileURLs' &&
+            key !== 'imagedata' &&
+            key !== 'videodata' &&
+            key !== 'id' &&
+            this.isJSON(this.data[key])
+          ) {
+            this.imagedata1.push(...this.parseJSON(this.data[key]))
+          }
+        }
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.cardCon {
+  border: 1px solid #9dbbe7 !important;
+  border-radius: 4px;
+  width: 95%;
+}
+#infobox {
+  height: 378px;
+  width: 100%;
+  overflow: auto;
+}
+#infobox > div {
+  width: 100%;
+}
+.detail-row {
+  display: flex;
+  flex-flow: row;
+}
+.detail-col {
+  border: 1px solid #cfcece;
+  line-height: 200%;
+}
+.vjs-menu .vjs-menu-content {
+  display: none !important;
+}
+</style>

src/components/Home.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-row class="container">
+        <el-col class="topbar-wrap">
+          <div class="topbar-logo topbar-btn">
+            <a href>
+              <img
+                src="../assets/icon/logo.png"
+                style="padding: 10px 23px 0px 20px; height: 25px; width: 20px"
+              />
+            </a>
+          </div>
+          <div class="topbar-logos">
+            <a
+              href
+              style="
+                font-family: PingFangSC-Regular;
+                font-size: 18px;
+                line-height: 70px;
+                color: #264672;
+                margin-left: 10px;
+              "
+              >{{ myname }}</a
+            >
+          </div>
+          <div class="topbar-title">
+            <el-menu
+              :default-active="$route.path"
+              class="el-menu"
+              mode="horizontal"
+              background-color="#F7F8F1"
+              router
+            >
+              <template v-for="item in menu">
+                <el-submenu
+                  v-if="item.children"
+                  :index="item.index"
+                  :key="item.index"
+                >
+                  <template slot="title">{{ item.name }}</template>
+                  <el-menu-item
+                    v-for="submenu in item.children"
+                    :index="submenu.index"
+                    :key="submenu.index"
+                    style="width: 100%"
+                    >{{ submenu.name }}</el-menu-item
+                  >
+                </el-submenu>
+                <el-menu-item v-else :index="item.index" :key="item.index">{{
+                  item.name
+                }}</el-menu-item>
+              </template>
+            </el-menu>
+          </div>
+        </el-col>
+      </el-row>
+    </el-header>
+    <el-main>
+      <div class="content">
+        <router-view />
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import "element-ui/lib/theme-chalk/display.css";
+import "../assets/css/main.css";
+
+export default {
+  name: "Home",
+  data() {
+    return {
+      menu: [],
+      myname: myname,
+    };
+  },
+  mounted() {
+    if (sessionStorage.getItem("access-user") == "Leader") {
+      this.menu = [
+        { index: "/view", name: "工作监管" },
+        { index: "/statistic", name: "汇总统计" },
+        { index: "/analysis", name: "分析决策" },
+        { index: "/data", name: "数据管理" },
+        { index: "/login", name: "退出" },
+      ];
+    } else if (
+      sessionStorage.getItem("access-user") == "Admin" ||
+      sessionStorage.getItem("access-user") == "SuperAdmin"
+    ) {
+      this.menu = [
+        { index: "/view", name: "工作监管" },
+        { index: "/statistic", name: "汇总统计" },
+        { index: "/analysis", name: "分析决策" },
+        { index: "/data", name: "数据管理" },
+        { index: "/main", name: "任务管理" },
+        { index: "/login", name: "退出" },
+      ];
+    } else if (sessionStorage.getItem("access-user") == "Operator") {
+      this.menu = [
+        { index: "/main", name: "任务管理" },
+        { index: "/login", name: "退出" },
+      ];
+    }
+  },
+};
+</script>
+
+<style scoped>
+.header ul {
+  z-index: 1;
+  list-style-type: none;
+  overflow: hidden;
+  background-color: #333;
+}
+
+.header ul li {
+  float: right;
+}
+
+.el-header {
+  padding: 0;
+  z-index: 99;
+}
+
+.topbar-title .el-menu--horizontal > .el-menu-item {
+  height: 50px;
+  line-height: 70px;
+  width: 114px;
+  text-align: center;
+  font-family: PingFangSC-Regular;
+  font-size: 16px;
+  color: #264672;
+  letter-spacing: 0;
+}
+.el-menu--horizontal > .el-menu-item.is-active {
+  color: #3a87f9 !important;
+  font-family: PingFangSC-Semibold;
+  font-size: 16px;
+  letter-spacing: 0;
+  border-bottom: 3px solid #409eff !important;
+}
+.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
+.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+  outline: 0;
+  background: #f7f8f1 !important;
+}
+
+.el-main {
+  padding: 0;
+  height: 100%;
+}
+
+.content {
+  height: 100%;
+}
+</style>

src/components/MapView/Map.vue

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <div id="map"></div>
+    <div
+      style="
+        display: none;
+        width: 400px;
+        height: 160px;
+        margin-left: auto;
+        margin-right: auto;
+        left: 0;
+        right: 0;
+        margin-top: 250px;
+        position: absolute;
+        pointer-events: none;
+      "
+      class="sub-main"
+    ></div>
+    <div id="control">
+      <div class="map-control">
+        <div class="map-type-button" v-if="isImg" @click="changeMap">
+          <img class="map-img" src="../../../static/img/vec.png" />
+        </div>
+        <div class="map-type-button" v-else @click="changeMap">
+          <img class="map-img" src="../../../static/img/img.png" />
+        </div>
+      </div>
+      <div class="map-dimensional">
+        <div class="map-type-button" v-if="is3D" @click="change3D">
+          <img class="map-img" src="../../../static/img/2d.png" />
+        </div>
+        <div class="map-type-button" v-else @click="change3D">
+          <img class="map-img" src="../../../static/img/3d.png" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { store } from "@/components/vuex/store.js";
+import OLCesium from "ol-cesium";
+import Map from "ol/Map";
+import View from "ol/View";
+import TileLayer from "ol/layer/Tile";
+import XYZ from "ol/source/XYZ";
+
+export default {
+  name: "Map",
+  data() {
+    return {
+      is3D: false,
+      isImg: false,
+      baseLayers: {},
+      mapData: [
+        {
+          name: "天地图影像地图",
+          url: "http://t3.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=52d807a08ad1a0e039950cb65de3d49b",
+          index: 0,
+        },
+        {
+          name: "天地图影像注记",
+          url: "http://t3.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=52d807a08ad1a0e039950cb65de3d49b",
+          index: 1,
+        },
+        {
+          name: "天地图矢量地图",
+          url: "http://t3.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=52d807a08ad1a0e039950cb65de3d49b",
+          index: 2,
+        },
+        {
+          name: "天地图矢量注记",
+          url: "http://t3.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=52d807a08ad1a0e039950cb65de3d49b",
+          index: 3,
+        },
+      ],
+      token:
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiZmY0YjNlOC0xNDhlLTQ2NDctYmVjYi1mYWRhMjE0NzNhMTAiLCJpZCI6MTIyMDUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjA1NTk5NzB9.3vV7ACQa7bCp-SoXaWGm36wNF3EgoqvYpAJ8xPIPPfs",
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    initmap(coordinate) {
+      let that = this;
+      that.map = new Map({
+        target: "map",
+        view: new View({
+          center: coordinate,
+          projection: "EPSG:4326",
+          zoom: 12,
+        }),
+      });
+      for (let i = 0; i < that.mapData.length; i++) {
+        let layer = that.mapData[i];
+        let name = layer.name;
+        let url = layer.url;
+        let tileLayer = new TileLayer({
+          title: name,
+          source: new XYZ({
+            crossOrigin: "anonymous",
+            url: url,
+          }),
+        });
+        tileLayer.setZIndex(layer.index);
+        let key = i.toString();
+        that.baseLayers[key] = tileLayer;
+        if (i === 0 || i === 1) {
+          tileLayer.setVisible(false);
+        }
+        that.map.addLayer(tileLayer);
+      }
+      that.ol3d = new OLCesium({ map: that.map }); // map is the ol.Map instance
+      that.ol3d.setEnabled(that.is3D);
+      window.ol3d = that.ol3d; // temporary hack for easy console debugging
+      that.$emit("view", that.ol3d);
+      that.$emit("mapView", that.ol3d.getOlMap());
+    },
+    init() {
+      var geoLocation = new BMap.Geolocation();
+      var coordinate = [];
+      var that = this;
+      if (
+        this.$store.state.LocalLocation.currentPosition != "" &&
+        this.$store.state.LocalLocation.currentLocation != ""
+      ) {
+        coordinate.push(this.$store.state.LocalLocation.currentPosition.lng);
+        coordinate.push(this.$store.state.LocalLocation.currentPosition.lat);
+        if (coordinate == []) {
+          coordinate = [116.397499, 39.90871];
+        }
+        this.initmap(coordinate);
+      } else {
+        geoLocation.getCurrentPosition(function (res) {
+          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
+            var currentPosition = res.point;
+            var currentLocation = res.address;
+            that.$store.dispatch("updateLocation", {
+              location: currentLocation,
+            });
+            that.$store.dispatch("updatePosition", {
+              position: currentPosition,
+            });
+            coordinate.push(
+              that.$store.state.LocalLocation.currentPosition.lng
+            );
+            coordinate.push(
+              that.$store.state.LocalLocation.currentPosition.lat
+            );
+            that.initmap(coordinate);
+          } else {
+            that.$message.info("位置权限未打开，请重新操作！");
+            coordinate = [116.397499, 39.90871];
+            that.initmap(coordinate);
+          }
+        });
+      }
+    },
+    change3D: function (callback) {
+      this.is3D = !this.is3D;
+      this.ol3d.setEnabled(this.is3D);
+    },
+    changeMap: function (callback) {
+      this.isImg = !this.isImg;
+      if (this.isImg) {
+        // 显示影像图层，设置矢量图层不可见
+        this.baseLayers["0"].setVisible(true);
+        this.baseLayers["1"].setVisible(true);
+        this.baseLayers["2"].setVisible(false);
+        this.baseLayers["3"].setVisible(false);
+      } else {
+        // 显示矢量图层，设置影像图层不可见
+        this.baseLayers["0"].setVisible(false);
+        this.baseLayers["1"].setVisible(false);
+        this.baseLayers["2"].setVisible(true);
+        this.baseLayers["3"].setVisible(true);
+      }
+    },
+  },
+  store,
+};
+</script>
+
+<style lang="scss" scoped>
+#control {
+  z-index: 1;
+  position: absolute;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  bottom: 20px;
+  right: 60px;
+}
+#map {
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
+}
+body {
+  overflow: hidden;
+  height: 100%;
+}
+.map-img {
+  width: 80px;
+  height: 100px;
+}
+.map-type-button {
+  width: 50px;
+  display: inline-block;
+  text-align: center;
+}
+.map-control .map-type-button {
+  margin-right: 35px;
+}
+</style>

src/components/SvgIcon/index.vue

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

src/components/TaskManagement/manage/TPManage.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="TPcontainer">
+    <el-container style="height: 100%">
+      <el-aside class="MyAside">
+        <el-menu
+          background-color="#F7F8F1"
+          text-color="rgb(38,70,114)"
+          active-text-color="#3A87F9"
+          :default-active="this.$route.path"
+          router
+        >
+          <el-submenu index="1">
+            <template slot="title">
+              <i class="el-icon-folder-opened"></i>任务管理
+            </template>
+            <el-menu-item-group>
+              <el-menu-item :index="'/main'">任务管理</el-menu-item>
+              <el-menu-item :index="'/datamanage'">数据管理</el-menu-item>
+              <el-menu-item :index="'/taskmanage'">任务分配</el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+          <el-menu-item
+            :index="'/usermanage'"
+            style="padding-left: 10px !important"
+          >
+            <i class="el-icon-user-solid"></i>用户管理
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+      <el-container>
+        <el-main class="tpcontent">
+          <router-view class="view" style="padding: 20px"></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  method: {},
+};
+</script>
+<style scoped>
+.MyAside {
+  width: 255px !important;
+  opacity: 0.9;
+  background-color: #f7f8f1;
+  color: #333;
+  text-align: left;
+  line-height: 200px;
+  z-index: 10;
+  bottom: 0;
+  position: absolute;
+  top: 0;
+}
+.tpcontent {
+  position: absolute;
+  left: 255px;
+  right: 0px;
+  width: calc(100% - 255px);
+  padding: 0px;
+  background: #fff;
+}
+.MyAside .usermp {
+  padding-left: 10px !important;
+}
+
+@media screen and (min-width: 840px) and (max-width: 1401px) {
+  .tpcontent {
+    position: absolute;
+    left: 255px;
+    width: calc(100% - 255px);
+  }
+}
+
+@media (min-width: 420px) and (max-width: 840px) {
+  .MyAside {
+    width: 160px !important;
+  }
+  .tpcontent {
+    position: absolute;
+    left: 160px;
+    width: calc(100% - 160px);
+  }
+}
+@media all and (max-width: 420px) {
+  .MyAside {
+    width: 120px !important;
+  }
+  .tpcontent {
+    position: absolute;
+    left: 120px;
+    width: calc(100% - 120px);
+  }
+}
+</style>

src/components/TaskManagement/manage/TaskManage.vue

@@ -0,0 +1,632 @@
+<template>
+  <div>
+    <!-- 添加搜索区域 -->
+    <div class="search-container">
+      <el-input
+        v-model="searchKeyword"
+        placeholder="请输入关键词进行搜索"
+        prefix-icon="el-icon-search"
+        clearable
+        size="small"
+        style="width: 300px; margin-bottom: 20px;"
+        @input="handleSearch"
+      ></el-input>
+    </div>
+    
+    <!-- <h2 style="text-align: left">任务</h2>
+    <h5 style="text-align: left">管理任务人员</h5> -->
+    <el-table
+      :data="filteredData"
+      max-height="720px"
+      style="width: 100%;"
+      :header-cell-class-name="sinClo"
+    >
+      <el-table-column
+        prop="taskName"
+        label="任务名称"
+        min-width="100"
+        sortable
+      ></el-table-column>
+      <el-table-column min-width="110" filterable label="是否需要分配" sortable>
+        <template slot="header" slot-scope="scope">
+          <span>是否需要分配</span>
+          <el-dropdown @command="handleFilter" style="margin-left: 5px;">
+            <span class="el-dropdown-link">
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="all">全部</el-dropdown-item>
+              <el-dropdown-item command="need">需要分配</el-dropdown-item>
+              <el-dropdown-item command="notNeed">不需分配</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+        <template slot-scope="scope">
+          <el-checkbox
+            label="需要分配"
+            v-model="scope.row.isAllocationOptional"
+            @change="changeisAllocationOptional(scope.row.id)"
+          ></el-checkbox>
+        </template>
+      </el-table-column>
+      <el-table-column min-width="95" filterable label="是否已分配" sortable>
+        <template slot-scope="scope">
+          <el-checkbox
+            label="已分配"
+            v-model="scope.row.allocated"
+            disabled
+          ></el-checkbox>
+        </template>
+      </el-table-column>
+      <el-table-column
+        header-align="center"
+        class-name="comClo"
+        label="自动分配"
+      >
+        <el-table-column min-width="120" label="工作区域">
+          <template slot-scope="scope">
+            <el-upload
+              accept=".shp"
+              class="upload-demo"
+              action="shp"
+              :auto-upload="false"
+              :limit="1"
+              :before-upload="beforeAvatarUpload"
+              :on-change="
+                (file, fileList) => {
+                  getFile(file, fileList, scope.row.id);
+                }
+              "
+              :on-remove="
+                (file, fileList) => {
+                  removeFile(file, fileList, scope.row.id);
+                }
+              "
+            >
+              <el-button
+                size="small"
+                type="primary"
+                plain
+                :disabled="!scope.row.isAllocationOptional"
+                >上传shp数据</el-button
+              >
+            </el-upload>
+          </template>
+        </el-table-column>
+        <el-table-column min-width="120" filterable label="任务人员">
+          <template slot-scope="scope">
+            <el-button
+              type="primary"
+              plain
+              size="small"
+              @click.native="selectWorkers(scope.row.id)"
+              :disabled="!scope.row.isAllocationOptional"
+              >选择任务人员</el-button
+            >
+          </template>
+        </el-table-column>
+        <el-table-column min-width="100" label="划分等级">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.precision"
+              size="small"
+              placeholder="请选择"
+              :disabled="!scope.row.isAllocationOptional"
+            >
+              <el-option
+                v-for="item in precisionOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column min-width="100" label="操作">
+          <template slot-scope="scope">
+            <el-button
+              type="primary"
+              size="small"
+              @click.native="submitUploadShp(scope.row.id)"
+              :disabled="!scope.row.isAllocationOptional"
+              >自动分配</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column min-width="100" label="手动分配">
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            style="margin-left: 10px !important"
+            size="small"
+            @click.native="manualAllocate(scope.row.id, false)"
+            :disabled="!scope.row.isAllocationOptional"
+            >手动分配</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      v-dialogDrag
+      class="taskDialog"
+      title="选择任务人员"
+      :visible.sync="WorkersVisible"
+      :close-on-click-modal="false"
+      style="position: absolute !important"
+    >
+      <el-table
+        :data="workers"
+        :height="400"
+        stripe
+        highlight-current-row
+        class="tb-edit"
+        style="width: 100%"
+      >
+        <el-table-column type="index" min-width="40"></el-table-column>
+        <el-table-column prop="username" label="工作人员" min-width="100">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.username"
+              filterable
+              placeholder="请选择"
+              @focus="makeuername(scope.$index)"
+              @change="makeId(scope.$index)"
+            >
+              <el-option
+                v-for="item in selectworkersdata"
+                :key="item.value"
+                :label="item.label"
+                :value="item.label"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="role" label="工作角色" min-width="100">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.role" placeholder="请选择">
+              <el-option
+                v-for="item in roleOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" min-width="80">
+          <template slot="header">
+            <el-button @click="addWorker()" type="primary" class="allomapBtn"
+              >添加人员</el-button
+            >
+          </template>
+          <template slot-scope="scope">
+            <el-button
+              @click.native.prevent="deleteWorker(scope.$index)"
+              type="text"
+              size="small"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-button type="primary" @click="UploadWorkers()" class="allomapBtn"
+        >确认</el-button
+      >
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { ajax as request } from "@/request.js";
+import axios from "axios";
+export default {
+  data() {
+    return {
+      WorkersVisible: false,
+      DialogVisible: false,
+      workersIndex: -1,
+      tasksData: [],
+      filteredData: [], // 过滤后的数据
+      currentFilter: 'all', // 当前筛选状态
+      workers: [],
+      selectworkersdata: [],
+      options: [],
+      roleOptions: [
+        {
+          value: "0",
+          label: "采集人员",
+        },
+        {
+          value: "1",
+          label: "巡查人员",
+        },
+      ],
+      precisionOptions: [
+        {
+          value: "0",
+          label: "默认",
+        },
+        {
+          value: "1",
+          label: "1(2500km)",
+        },
+        {
+          value: "2",
+          label: "2(630km)",
+        },
+        {
+          value: "3",
+          label: "3(78km)",
+        },
+        {
+          value: "4",
+          label: "4(20km)",
+        },
+        {
+          value: "5",
+          label: "5(2.4km)",
+        },
+        {
+          value: "6",
+          label: "6(610m)",
+        },
+        {
+          value: "7",
+          label: "7(76m)",
+        },
+        {
+          value: "8",
+          label: "8(19.11m)",
+        },
+        {
+          value: "9",
+          label: "9(4.78m)",
+        },
+        {
+          value: "10",
+          label: "10(0.5971m)",
+        },
+        {
+          value: "11",
+          label: "11(0.1492m)",
+        },
+        {
+          value: "12",
+          label: "12(0.0186m)",
+        },
+      ],
+      searchKeyword: "", // 搜索关键词
+    };
+  },
+  methods: {
+    // 搜索处理方法
+    handleSearch() {
+      this.applyFilter();
+    },
+
+    // 应用筛选和搜索
+    applyFilter() {
+      let filtered = [...this.tasksData];
+      
+      // 先应用分配状态筛选
+      if (this.currentFilter === 'need') {
+        filtered = filtered.filter(item => item.isAllocationOptional === true);
+      } else if (this.currentFilter === 'notNeed') {
+        filtered = filtered.filter(item => item.isAllocationOptional === false);
+      }
+      
+      // 再应用搜索关键词筛选
+      if (this.searchKeyword.trim()) {
+        const keyword = this.searchKeyword.toLowerCase();
+        filtered = filtered.filter(item => {
+          return item.taskName && item.taskName.toLowerCase().includes(keyword);
+        });
+      }
+      
+      this.filteredData = filtered;
+    },
+
+    // 筛选处理方法
+    handleFilter(command) {
+      this.currentFilter = command;
+      this.applyFilter();
+    },
+
+    // 修改方法参数，从index改为taskId
+    changeisAllocationOptional(taskId) {
+      let row = this.tasksData.find(item => item.id === taskId);
+      if (!row) return;
+      
+      let that = this;
+      let str = row.isAllocationOptional === true
+        ? "确认任务需要分配吗？"
+        : "确认任务无需分配吗？";
+      let res = row.isAllocationOptional === true ? 0 : 1;
+
+      this.$confirm(str, "提示", {})
+        .then(() => {
+          request({
+            url: "/allocation/optional",
+            method: "get",
+            params: {
+              taskId: taskId,
+              optional: res,
+            },
+          }).then(function (response) {
+            if (response.data.success == true) {
+              that.$message.success("设置成功");
+              
+              // 重新获取数据以确保状态同步
+              that.init();
+            } else if (response.data.status == "401") {
+              that.$alert(response.data.message);
+              that.$router.push({ path: "/login" });
+            } else {
+              that.$message.error("设置失败");
+            }
+          });
+        })
+        .catch(() => {
+          // 取消操作，不需要回滚状态
+        });
+    },
+    init() {
+      let that = this;
+      // 请求任务列表
+      request({
+        url: "/task/selectTaskHasCreated",
+        method: "get",
+      }).then(function (response) {
+        if (response.data.success == true) {
+          var jsondata = JSON.parse(response.data.data);
+          that.tasksData = jsondata.data;
+          //0表示需要分配
+          for (var i = 0; i < that.tasksData.length; i++) {
+            if (that.tasksData[i].isAllocationOptional == 0) {
+              that.tasksData[i].isAllocationOptional = true;
+            } else {
+              that.tasksData[i].isAllocationOptional = false;
+            }
+            if (that.tasksData[i].allocated == "true") {
+              that.tasksData[i].allocated = true;
+            } else {
+              that.tasksData[i].allocated = false;
+            }
+          }
+          // 应用当前筛选和搜索
+          that.applyFilter();
+        } else if (response.data.status == "401") {
+          that.$alert(response.data.message);
+          that.$router.push({ path: "/login" });
+        }
+      });
+      request({
+        url: "/user/all_worker",
+        method: "get",
+      }).then(function (response) {
+        if (response.data.success == true) {
+          var worksdata = response.data.data;
+          that.options = [];
+          for (var i = 0; i < worksdata.length; i++) {
+            that.options.push({
+              value: worksdata[i].id,
+              label: worksdata[i].username,
+            });
+          }
+        } else if (response.data.status == "401") {
+          that.$alert(response.data.message);
+          that.$router.push({ path: "/login" });
+        }
+      });
+    },
+    // onchange文件改变时的钩子 可以通过参数file找到文件 filr.raw获取文件流
+    getFile(file, fileList, taskId) {
+      let row = this.tasksData.find(item => item.id === taskId);
+      if (!row) return;
+      
+      let fileList1 = [];
+      fileList1.push(file.raw);
+      row.fileList = fileList1;
+    },
+    submitUploadShp(taskId) {
+      let row = this.tasksData.find(item => item.id === taskId);
+      if (!row) return;
+      
+      if (row.allocated) {
+        let that = this;
+        this.$confirm("任务已经完成自动分配，是否重新分配？", "提示", {
+          cancelButtonText: "取消",
+          confirmButtonText: "确定",
+          type: "warning",
+        })
+          .then(() => {
+            that.AutoTask(taskId);
+          })
+          .catch(() => {});
+      } else {
+        this.AutoTask(taskId);
+      }
+    },
+    AutoTask(taskId) {
+      let row = this.tasksData.find(item => item.id === taskId);
+      if (!row) return;
+      
+      let that = this;
+      let fd = new FormData();
+      if (row.fileList && row.fileList[0]) {
+        fd.append("shp", row.fileList[0]);
+      } else {
+        that.$alert("请上传shp文件！", "提示", { confirmButtonText: "确定" });
+        return;
+      }
+      if (!row.workers) {
+        that.$alert("请选择任务人员！", "提示", { confirmButtonText: "确定" });
+        return;
+      }
+      fd.append("taskId", taskId);
+      fd.append("workers", JSON.stringify(row.workers));
+      if (row.precision) {
+        fd.append("precision", row.precision);
+      }
+      axios({
+        url: "/allocation/assignment",
+        method: "post",
+        data: fd,
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      }).then(function (response) {
+        if (response.data.success == true) {
+          that.$notify.success({
+            title: "提示",
+            message: "自动分配完成！",
+          });
+          that.manualAllocate(taskId, true);
+        } else if (response.data.status == "401") {
+          that.$alert(response.data.message);
+          that.$router.push({ path: "/login" });
+        } else {
+          that.$notify.error({
+            title: "提示",
+            message: response.data.message,
+          });
+        }
+      });
+    },
+    beforeAvatarUpload(file) {
+      if (file.type != "shp") {
+        this.$message.error("只能上传shp格式数据!");
+        return false;
+      }
+      return true;
+    },
+    selectWorkers(taskId) {
+      let row = this.tasksData.find(item => item.id === taskId);
+      if (!row) return;
+      
+      this.workersIndex = taskId; // 存储任务ID而不是索引
+      if (row.workers) {
+        this.workers = row.workers;
+      } else {
+        this.workers = [];
+      }
+      this.WorkersVisible = true;
+    },
+    addWorker() {
+      let row = this.tasksData.find(item => item.id === this.workersIndex);
+      if (!row) return;
+      
+      if (row.taskType === "0") {
+        this.workers.push({
+          username: "",
+          role: "0",
+        });
+      } else {
+        this.workers.push({
+          username: "",
+          role: "1",
+        });
+      }
+    },
+    removeFile(file, fileList, taskId) {
+      let row = this.tasksData.find(item => item.id === taskId);
+      if (!row) return;
+      
+      row.fileList = [];
+    },
+    deleteWorker(index) {
+      this.workers.splice(index, 1);
+    },
+    UploadWorkers() {
+      for (var i = 0; i < this.workers.length; i++) {
+        if (this.workers[i].username == "") {
+          this.$alert("任务人员不可为空！", "提示", {
+            confirmButtonText: "确定",
+          });
+          return;
+        }
+      }
+      let row = this.tasksData.find(item => item.id === this.workersIndex);
+      if (row) {
+        row.workers = this.workers;
+      }
+      this.WorkersVisible = false;
+      //            this.$alert(this.tasksData[this.workersIndex].workers, '提示', {confirmButtonText: '确定'})
+    },
+    makeuername() {
+      this.selectworkersdata = this.options.slice();
+      for (var i = 0; i < this.workers.length; i++) {
+        for (var j = 0; j < this.selectworkersdata.length; j++) {
+          if (this.selectworkersdata[j].label == this.workers[i].username) {
+            this.selectworkersdata.splice(j, 1);
+          }
+        }
+      }
+    },
+    makeId(index) {
+      for (var j = 0; j < this.options.length; j++) {
+        if (this.options[j].label == this.workers[index].username) {
+          this.workers[index].id = this.options[j].value;
+        }
+      }
+    },
+    manualAllocate(taskId, isRequest) {
+      let row = this.tasksData.find(item => item.id === taskId);
+      if (!row) return;
+      
+      if (isRequest) {
+        this.$router.push({
+          path: "/manualallocate/" + taskId + "/" + row.taskName,
+        });
+      } else {
+        request({
+          url: "/allocation/is_assigned?taskId=" + Number(taskId),
+          method: "get",
+        }).then((response) => {
+          if (response.data.data) {
+            this.$router.push({
+              path: "/manualallocate/" + taskId + "/" + row.taskName,
+            });
+          } else if (response.data.status == "401") {
+            this.$alert(response.data.message);
+            this.$router.push({ path: "/login" });
+          } else {
+            this.$notify.error({
+              title: "提示",
+              message: response.data.message + "，" + "请先进行自动分配",
+            });
+          }
+        });
+      }
+    },
+    sinClo({ row, column, rowIndex, columnIndex }) {
+      if (!(columnIndex == 3 && rowIndex == 0)) {
+        return "sinCl";
+      }
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+  background-color: rgb(89, 103, 120) !important;
+  border-color: #304156 !important;
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409EFF;
+}
+
+.el-dropdown-link:hover {
+  color: #66b1ff;
+}
+
+.search-container {
+  text-align: left;
+}
+</style>

src/components/TaskManagement/manage/UserManage.vue

@@ -0,0 +1,547 @@
+<template>
+  <div style="height: (screenHeight-300)+'px'">
+    <div id="buttomContain">
+      <div class="search-container">
+        <el-input
+          style="width: 300px; margin-right: 15px;"
+          placeholder="请输入用户名搜索"
+          v-model="inputUsername"
+        >
+          <i
+            slot="suffix"
+            class="el-input__icon el-icon-search"
+            @click="searchUser()"
+          ></i>
+          <i
+            slot="suffix"
+            class="el-input__icon el-icon-circle-close"
+            @click="cancelSearch()"
+          ></i>
+        </el-input>
+      </div>
+      <div class="button-container">
+        <el-button
+          id="buttonStyle"
+          size="small"
+          style="margin-top: 20px"
+          @click="adduser1()"
+          >添加用户</el-button
+        >
+      </div>
+    </div>
+
+    <el-table
+      id="tableStyle"
+      :data="usersData"
+      style="width: 100%"
+      header-cell-class-name="sinCl"
+    >
+      <el-table-column
+        fixed="left"
+        prop="username"
+        label="用户名称"
+        min-width="100"
+      ></el-table-column>
+      <el-table-column
+        fixed="left"
+        prop="realName"
+        label="真实姓名"
+        min-width="100"
+      ></el-table-column>
+      <el-table-column prop="role" label="权限" min-width="80">
+        <template slot-scope="scope">
+          <el-select size="small" v-model="scope.row.role" placeholder="请选择">
+            <el-option
+              v-for="item in idenOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column width="280" fixed="right" label="操作">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.native="EditField(scope.$index)"
+            >确认</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            @click.native="deleteField(scope.$index)"
+            >删除</el-button
+          >
+            <el-button
+            type="text"
+            size="small"
+            @click.native="resetPassword(scope.$index)"
+            >重置密码</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top: 50px">
+      <el-pagination
+        layout="prev, pager, next"
+        :page-count="dataPageNum"
+        @current-change="pageChange"
+      ></el-pagination>
+    </div>
+
+    <el-dialog
+      v-dialogDrag
+      class="taskDialog"
+      title="添加用户"
+      :close-on-click-modal="false"
+      :visible.sync="dialogVisible"
+    >
+      <div style="text-align: left">
+        <el-form
+          ref="account"
+          :model="account"
+          :rules="rules"
+          label-width="130px"
+          style="margin-top: 20px"
+        >
+          <el-form-item prop="username" label="用户名：">
+            <el-input
+              style="width: 90%"
+              type="text"
+              v-model="account.username"
+              auto-complete="off"
+              :autofocus="true"
+              placeholder="请输入用户名"
+            ></el-input>
+          </el-form-item>
+          <el-form-item prop="realName" label="真实姓名：">
+            <el-input
+              style="width: 90%"
+              type="text"
+              v-model="account.realName"
+              auto-complete="off"
+              :autofocus="true"
+              placeholder="请输入真实姓名"
+            ></el-input>
+          </el-form-item>
+          <el-form-item prop="password" label="密码：">
+            <el-input
+              style="width: 90%"
+              type="password"
+              v-model="account.password"
+              auto-complete="off"
+              :autofocus="true"
+              placeholder="请输入密码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item prop="password1" label="确认密码：">
+            <el-input
+              style="width: 90%"
+              type="password"
+              v-model="account.password1"
+              auto-complete="off"
+              :autofocus="true"
+              placeholder="请确认密码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item prop="role" label="权限：">
+            <el-select
+              style="width: 90%"
+              size="small"
+              v-model="account.role"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in idenOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-button id="buttonStyle" size="small" @click="addUser()"
+        >确认</el-button
+      >
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { ajax as request } from "@/request.js";
+import md5 from "js-md5";
+export default {
+  data() {
+    var validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.account.password) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    var validpassword = (rule, value, callback) => {
+      let reg = /[0-9a-zA-Z]{6,18}/;
+      if (!reg.test(value)) {
+        callback(new Error("密码必须是由6-18位数字和字母组合"));
+      } else {
+        callback();
+      }
+    };
+
+    return {
+      isSearch: false,
+      currentSearchUser: "",
+      inputUsername: "",
+      dataPageNum: 1,
+      currentPage: 1,
+      account: {
+        username: "",
+        realName: "",
+        password: "",
+        password1: "",
+        role: "Worker",
+      },
+      rules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
+        ],
+        realName: [
+          { required: true, message: "请输入真实姓名", trigger: "blur" },
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { validator: validpassword, trigger: "blur" },
+        ],
+        password1: [
+          { required: true, message: "请再次输入密码", trigger: "blur" },
+          { validator: validatePass, trigger: "blur" },
+        ],
+      },
+      dialogVisible: false,
+      screenHeight: document.documentElement.clientHeight,
+      usersData: [],
+      idenOptions: [
+        {
+          value: "Admin",
+          label: "管理员",
+        },
+        {
+          value: "Leader",
+          label: "领导人员",
+        },
+        {
+          value: "Worker",
+          label: "外业人员",
+        },
+        {
+          value: "Operator",
+          label: "工作人员",
+        },
+        {
+          value: "SuperAdmin",
+          label: "超级管理员",
+        },
+      ],
+    };
+  },
+  methods: {
+    init() {
+      let that = this;
+      request({
+        url: "/user/all",
+        method: "get",
+        params: {
+          page: 1,
+        },
+      }).then(function (response) {
+        //登录成功获取数据存入usersData
+        if (response.data.success) {
+          that.usersData = response.data.data.users;
+          that.dataPageNum = response.data.data.totalPages;
+        } else if (response.data.status == "401") {
+          that.$alert(response.data.message);
+          that.$router.push({ path: "/login" });
+        }
+      });
+    },
+    pageChange(val) {
+      let that = this;
+      this.usersData = [];
+      this.currentPage = val;
+      if (this.isSearch) {
+        request({
+          url: "/user/search",
+          method: "post",
+          params: { page: 1, username: that.currentSearchUser },
+        }).then(function (response) {
+          //上传成功
+          if (response.data.success) {
+            that.usersData = response.data.data.users;
+            that.dataPageNum = response.data.data.totalPages;
+          } else if (response.data.status == "401") {
+            that.$alert(response.data.message);
+            that.$router.push({ path: "/login" });
+          }
+        });
+      } else {
+        request({
+          url: "/user/all",
+          method: "post",
+          params: {
+            page: val,
+          },
+        }).then(function (response) {
+          if (response.data.success) {
+            that.usersData = response.data.data.users;
+          }
+        });
+      }
+    },
+  //重置密码
+  resetPassword(index) {
+  let that = this;
+  this.$confirm("确认重置该用户密码？", "提示", {
+    cancelButtonText: "取消",
+    confirmButtonText: "确认",
+    type: "warning",
+  })
+    .then(() => {
+      // 调用重置密码接口
+      request({
+        url: "/user/resetPassword",
+        method: "post",
+        params: {
+          id: that.usersData[index].id,
+        },
+      }).then(function (response) {
+        if (response.data.success) {
+          that.$notify.success({
+            title: "提示",
+            message: "密码已成功重置为默认密码！",
+          });
+        } else {
+          that.$notify.error({
+            title: "提示",
+            message: response.data.message || "密码重置失败",
+          });
+        }
+      });
+      // 刷新用户列表
+      request({
+        url: "/user/all",
+        method: "post",
+        params: {
+          page: that.currentPage,
+        },
+      }).then(function (response) {
+        if (response.data.success) {
+          that.usersData = response.data.data.users;
+        }
+      });
+    })
+    .catch(() => {
+      that.$notify.info({
+        title: "提示",
+        message: "已取消操作",
+      });
+    });
+},
+    deleteField(index) {
+      let that = this;
+      this.$confirm("确认删除？", "提示", {
+        cancelButtonText: "取消",
+        confirmButtonText: "确认",
+        type: "warning",
+      })
+        .then(() => {
+          request({
+            url: "/user/delete",
+            method: "post",
+            params: {
+              id: that.usersData[index].id,
+            },
+          }).then(function (response) {
+            if (response.data.success) {
+              that.$notify.success({
+                title: "提示",
+                message: "删除成功！",
+              });
+            } else {
+              that.$notify.error({
+                title: "提示",
+                message: "删除失败",
+              });
+            }
+          });
+          request({
+            url: "/user/all",
+            method: "post",
+            params: {
+              page: that.currentPage,
+            },
+          }).then(function (response) {
+            if (response.data.success) {
+              that.usersData = response.data.data.users;
+            }
+          });
+        })
+        .catch(() => {
+          this.$notify.error({
+            title: "提示",
+            message: "删除失败",
+          });
+        });
+    },
+    EditField(index) {
+      let that = this;
+      request({
+        url: "/user/role_change",
+        method: "post",
+        params: {
+          id: that.usersData[index].id,
+          role: that.usersData[index].role,
+        },
+      }).then(function (response) {
+        //上传成功
+        if (response.data.success) {
+          that.$notify.success({
+            title: "提示",
+            message: "提交成功！",
+          });
+          that.init();
+        } else if (response.data.status == "401") {
+          that.$alert(response.data.message);
+          that.$router.push({ path: "/login" });
+        }
+      });
+      request({
+        url: "/user/all",
+        method: "post",
+        params: {
+          page: that.currentPage,
+        },
+      }).then(function (response) {
+        if (response.data.success) {
+          that.usersData = response.data.data.users;
+        }
+      });
+    },
+    cancelSearch() {
+      this.isSearch = false;
+      this.inputUsername = "";
+    },
+    searchUser() {
+      this.isSearch = true;
+      let that = this;
+      this.currentSearchUser = this.inputUsername;
+      request({
+        url: "/user/search",
+        method: "post",
+        params: { page: 1, username: that.currentSearchUser },
+      }).then(function (response) {
+        //上传成功
+        if (response.data.success) {
+          that.usersData = response.data.data.users;
+          that.dataPageNum = response.data.data.totalPages;
+        } else if (response.data.status == "401") {
+          that.$alert(response.data.message);
+          that.$router.push({ path: "/login" });
+        } else {
+          that.$notify.error({
+            title: "提示",
+            message: "未查找到符合条件的用户！",
+          });
+        }
+      });
+    },
+    addUser() {
+      let that = this;
+      this.$refs.account.validate((valid) => {
+        if (valid) {
+          let that = this;
+          request({
+            url: "/user/new",
+            method: "post",
+            params: {
+              username: that.account.username,
+              realName: that.account.realName,
+              password: md5(md5(that.account.password)),
+              role: that.account.role,
+            },
+          }).then(function (response) {
+            if (response.data.success) {
+              that.dialogVisible = false;
+              that.$notify.success({
+                title: "提示",
+                message: "添加成功！",
+              });
+              that.init();
+            } else if (response.data.status == "401") {
+              that.$alert(response.data.message);
+              that.$router.push({ path: "/login" });
+            }
+          });
+        }
+      });
+    },
+    adduser1() {
+      this.dialogVisible = true;
+      this.account = {
+        username: "",
+        realName: "",
+        password: "",
+        password1: "",
+        role: "Worker",
+      };
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style scoped lang="scss">
+.el-input__inner {
+  >>> &::placeholder {
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    color: #c0c4cc;
+  }
+}
+
+#buttomContain {
+  top: 5px;
+  right: 25px;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 50px);
+}
+
+.search-container {
+  /* 搜索容器靠左 */
+}
+
+.button-container {
+  /* 按钮容器靠右 */
+}
+
+#tableStyle {
+  top: 50px;
+  margin-bottom: 30px;
+  height: 600px;
+}
+>>> .el-pager li {
+  background: #fff !important;
+}
+
+>>> .el-pagination button {
+  background: #fff !important;
+}
+</style>

src/components/TaskManagement/xml/HelloWorld.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li>
+        <a
+          href="https://vuejs.org"
+          target="_blank"
+        >
+          Core Docs
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://forum.vuejs.org"
+          target="_blank"
+        >
+          Forum
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://chat.vuejs.org"
+          target="_blank"
+        >
+          Community Chat
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://twitter.com/vuejs"
+          target="_blank"
+        >
+          Twitter
+        </a>
+      </li>
+      <br>
+      <li>
+        <a
+          href="http://vuejs-templates.github.io/webpack/"
+          target="_blank"
+        >
+          Docs for This Template
+        </a>
+      </li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li>
+        <a
+          href="http://router.vuejs.org/"
+          target="_blank"
+        >
+          vue-router
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vuex.vuejs.org/"
+          target="_blank"
+        >
+          vuex
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vue-loader.vuejs.org/"
+          target="_blank"
+        >
+          vue-loader
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+        >
+          awesome-vue
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+export default {
+  name: 'HelloWorld',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/TaskManagement/xml/basemap.vue

@@ -0,0 +1,558 @@
+ <template>
+  <div id="tablecontainer">
+    <el-table
+      :data="tableData"
+      stripe
+      height="90%"
+      highlight-current-row
+      class="tb-edit"
+      style="width: 98%; margin-left: 10px"
+      header-cell-class-name="sinCl"
+    >
+      <el-table-column type="index" min-width="40"></el-table-column>
+      <el-table-column prop="name" label="名称" min-width="120">
+        <template slot-scope="scope">
+          <el-input
+            v-if="getInfo == '1'"
+            size="small"
+            v-model="scope.row.name"
+            placeholder="请输入内容"
+          ></el-input>
+          <span v-else>{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="type" label="地图类型" min-width="100">
+        <template slot-scope="scope">
+          <el-select
+            v-if="getInfo == '1'"
+            size="small"
+            v-model="scope.row.type"
+            placeholder="请选择"
+            @change="makeType(scope.row.type, scope.$index)"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+          <span v-else>{{ scope.row.type }}</span>
+        </template>
+      </el-table-column>
+      <!-- 修改type后必须每个控件都绑定一个列表 不然会出现中英文跳转的问题 -->
+      <el-table-column prop="subType" label="枚举子类型" min-width="100">
+        <template slot-scope="scope">
+          <!-- @focus="makeSubType(scope.$index)" -->
+          <el-select
+            v-if="getInfo == '1'"
+            size="small"
+            v-model="scope.row.subType"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in getSubType(scope.$index)"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+          <span v-else>{{ scope.row.subType }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="group" label="分组" min-width="100">
+        <template slot-scope="scope">
+          <el-select
+            v-if="getInfo == '1'"
+            size="small"
+            v-model="scope.row.group"
+            placeholder="请选择"
+            @focus="makeGroup(scope.$index)"
+            @change="makeGroup(scope.$index)"
+          >
+            <el-option
+              v-for="item in groupOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+          <span v-else>{{ scope.row.group }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="index"
+        label="显示顺序"
+        min-width="100"
+        :render-header="renderHeader"
+      >
+        <template slot-scope="scope">
+          <el-input
+            v-if="getInfo == '1'"
+            size="small"
+            v-model="scope.row.index"
+            placeholder="请输入内容"
+          ></el-input>
+          <span v-else>{{ scope.row.index }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="url" label="地址" min-width="200">
+        <template slot-scope="scope">
+          <el-input
+            v-if="
+              (scope.row.type == 'ArcGISTiledLayer' ||
+                scope.row.type == 'ArcGISMapImageLayer' ||
+                scope.row.type == 'ArcGISVectorTiledLayer') &&
+              getInfo == '1'
+            "
+            size="small"
+            v-model="scope.row.url"
+            placeholder="请输入内容"
+          ></el-input>
+          <span v-else>{{ scope.row.url }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column min-width="150" v-if="getInfo == '1'">
+        <template slot="header">
+          <el-button id="buttonStyle1" size="small" @click="addRow()"
+            >添加图层</el-button
+          >
+        </template>
+        <template slot-scope="scope">
+          <el-button
+            @click.native.prevent="deleteRow(scope.$index)"
+            type="text"
+            size="small"
+            v-if="getInfo == '1'"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-button
+      id="buttonStyle"
+      size="small"
+      v-if="getInfo == '1'"
+      style="margin-top: 5px; margin-bottom: 5px"
+      @click="backUploadData()"
+      >上一步</el-button
+    >
+    <el-button
+      size="small"
+      v-if="getInfo == '1'"
+      style="margin-top: 5px; margin-bottom: 5px"
+      @click="UploadData()"
+      >保存</el-button
+    >
+  </div>
+</template>
+
+<script>
+import { store } from "@/components/vuex/store.js";
+export default {
+  data() {
+    return {
+      id: "",
+      key: "",
+      name: "",
+      getInfo: sessionStorage.getItem("getInfo"),
+      options: [
+        {
+          value: "tianditu",
+          label: "天地图",
+        },
+        {
+          value: "amap",
+          label: "高德",
+        },
+        {
+          value: "esri",
+          label: "esri",
+        },
+        {
+          value: "OpenStreetMapLayer",
+          label: "OpenStreetMapLayer",
+        },
+        {
+          value: "ArcGISTiledLayer",
+          label: "ArcGISTiledLayer",
+        },
+        {
+          value: "ArcGISMapImageLayer",
+          label: "ArcGISMapImageLayer",
+        },
+        {
+          value: "ArcGISVectorTiledLayer",
+          label: "ArcGISVectorTiledLayer",
+        },
+      ],
+      // subtypeOptions: [], // 可以不用了by lbz 20210703
+      //尝试修改 by lbz 避免子类型的字符串判断 20210703
+      tiandituOptions: [
+        {
+          value: "VEC_C",
+          label: "矢量底图(WGS84)",
+        },
+        {
+          value: "CVA_C",
+          label: "矢量注记(WGS84)",
+        },
+        {
+          value: "IMG_C",
+          label: "影像底图(WGS84)",
+        },
+        {
+          value: "CIA_C",
+          label: "影像注记(WGS84)",
+        },
+        {
+          value: "TER_C",
+          label: "地形晕渲(WGS84)",
+        },
+        {
+          value: "VEC_W",
+          label: "矢量底图(web mercator)",
+        },
+        {
+          value: "CVA_W",
+          label: "矢量注记(web mercator)",
+        },
+        {
+          value: "IMG_W",
+          label: "影像底图(web mercator)",
+        },
+        {
+          value: "CIA_W",
+          label: "影像注记(web mercator)",
+        },
+        {
+          value: "TER_W",
+          label: "地形晕渲(web mercator)",
+        },
+      ],
+      amapOptions: [
+        {
+          value: "AMAP_VECTOR",
+          label: "矢量底图",
+        },
+        {
+          value: "AMAP_IMAGE",
+          label: "影像底图",
+        },
+        {
+          value: "AMAP_IMAGE_LABEL",
+          label: "影像底图注记",
+        },
+      ],
+      esriOptions: [
+        {
+          value: "NatGeo_World_Map",
+          label: "国家地理地图",
+        },
+        {
+          value: "USA_Topo_Maps",
+          label: "美国地形图",
+        },
+        {
+          value: "World_Imagery",
+          label: "世界图像",
+        },
+        {
+          value: "World_Physical_Map",
+          label: "世界物理地图",
+        },
+        {
+          value: "World_Shaded_Relief",
+          label: "世界阴影浮雕",
+        },
+        {
+          value: "World_Street_Map",
+          label: "世界街道地图",
+        },
+        {
+          value: "World_Terrain_Base",
+          label: "世界地形基础地图",
+        },
+        {
+          value: "World_Topo_Map",
+          label: "世界地形图",
+        },
+      ],
+      groupOptions: [
+        {
+          value: "vector",
+          label: "矢量分组",
+        },
+        {
+          value: "image",
+          label: "影像分组",
+        },
+        {
+          value: "",
+          label: "覆盖图层",
+        },
+      ],
+      tableData: [],
+    };
+  },
+  methods: {
+    addRow() {
+      this.tableData.push({
+        name: "",
+        index: "",
+        subType: "",
+        type: "",
+        group: "",
+        url: "",
+      });
+    },
+    deleteRow(index) {
+      this.$confirm("确认删除此图层", "提示", {
+        cancelButtonText: "取消",
+        confirmButtonText: "确定",
+        type: "warning",
+      })
+        .then(() => {
+          // 删除
+          this.tableData.splice(index, 1);
+        })
+        .catch(() => {
+          this.$notify.error({
+            title: "提示",
+            message: "删除失败",
+          });
+        });
+    },
+    //提交数据
+    backUploadData() {
+      this.UploadData();
+      this.$router.push({
+        path:
+          "/home/" + this.name + "/" + this.key + "/" + this.id + "/position",
+      });
+    },
+    UploadData() {
+      let that = this;
+      //确认name\url\index是否填写 tmp为符合要求的标志
+      for (var j = 0; j < this.tableData.length; j++) {
+        if (this.tableData[j].name == "") {
+          this.$alert("图层名称不可为空", "提示", {
+            confirmButtonText: "确定",
+          });
+          return;
+        }
+        if (this.tableData[j].index == "") {
+          this.$alert("图层显示顺序不可为空", "提示", {
+            confirmButtonText: "确定",
+          });
+          return;
+        }
+        if (this.tableData[j].type == "") {
+          this.$alert("地图类型不可为空", "提示", {
+            confirmButtonText: "确定",
+          });
+          return;
+        }
+        if (
+          this.tableData[j].type == "ArcGISTiledLayer" ||
+          this.tableData[j].type == "ArcGISMapImageLayer" ||
+          this.tableData[j].type == "ArcGISVectorTiledLayer"
+        ) {
+          if (this.tableData[j].url == "") {
+            this.$alert("图层url不可为空", "提示", {
+              confirmButtonText: "确定",
+            });
+            return;
+          }
+        }
+      }
+      this.$store.dispatch("updateBasemap", { basemap: this.tableData });
+      this.$notify.success({
+        title: "提示",
+        message: "保存成功",
+      });
+    },
+    //当subtype修改
+    //可以不用了 by lbz 20210703
+    // makeSubType(index) {
+    //   switch (this.tableData[index].type) {
+    //     case "tianditu":
+    //       this.subtypeOptions = this.tiandituOptions;
+    //       break;
+    //     case "amap":
+    //       this.subtypeOptions = this.amapOptions;
+    //       break;
+    //     case "esri":
+    //       this.subtypeOptions = this.esriOptions;
+    //       break;
+    //     default:
+    //       this.subtypeOptions = [];
+    //       break;
+    //   }
+    // },
+    getSubType(index) {
+      switch (this.tableData[index].type) {
+        case "tianditu":
+          return this.tiandituOptions;
+        case "amap":
+          return this.amapOptions;
+        case "esri":
+          return this.esriOptions;
+        default:
+          return [];
+      }
+    },
+    //当group修改
+    makeGroup(index) {
+      switch (this.tableData[index].type) {
+        case "tianditu":
+        case "amap":
+        case "esri":
+        case "OpenStreetMapLayer":
+          break;
+        default:
+          this.tableData[index].group = "";
+          break;
+      }
+    },
+    //当type修改 主要是修改subtype、group的值
+    //尝试修改 by lbz 避免子类型的字符串判断 20210703
+    makeType(type, index) {
+      switch (type) {
+        case "tianditu":
+          this.tableData[index].subType = "VEC_C";
+          this.tableData[index].url = "";
+          if (this.tableData[index].group == "")
+            this.tableData[index].group = "vector";
+          break;
+        case "amap":
+          this.tableData[index].subType = "AMAP_VECTOR";
+          this.tableData[index].url = "";
+          if (this.tableData[index].group == "")
+            this.tableData[index].group = "vector";
+          break;
+        case "esri":
+          this.tableData[index].subType = "NatGeo_World_Map";
+          this.tableData[index].url = "";
+          if (this.tableData[index].group == "")
+            this.tableData[index].group = "vector";
+          break;
+        case "OpenStreetMapLayer":
+          this.tableData[index].subType = "";
+          this.tableData[index].url = "";
+          if (this.tableData[index].group == "")
+            this.tableData[index].group = "vector";
+          break;
+        default:
+          this.tableData[index].subType = "";
+          this.tableData[index].group = "";
+          break;
+      }
+    },
+    renderHeader(h, { column }) {
+      // h即为cerateElement的简写，具体可看vue官方文档
+      return h("div", [
+        h("span", column.label),
+        h(
+          "el-tooltip",
+          {
+            props: {
+              effect: "dark",
+              content: "图层的显示顺序，随着数字的增大，图层从下往上依次叠加",
+              placement: "top",
+            },
+          },
+          [
+            h("i", {
+              class: "el-icon-info",
+              style: "margin-left:5px;cursor:pointer;",
+            }),
+          ]
+        ),
+      ]);
+    },
+  },
+  mounted() {
+    let config = sessionStorage["Data"];
+    if (config) {
+      config = JSON.parse(config);
+      this.tableData = config.meta.basemap;
+    } else {
+      if (this.$store.state.config.meta.basemap.length > 0)
+        this.tableData = JSON.parse(
+          JSON.stringify(this.$store.state.config.meta.basemap)
+        );
+    }
+    if (this.getInfo != 1) {
+      for (var i = 0; i < this.tableData.length; i++) {
+        if (this.tableData[i].group == "") {
+          this.tableData[i].group = "覆盖图层";
+        }
+        if (this.tableData[i].group == "image") {
+          this.tableData[i].group = "影像分组";
+        }
+        if (this.tableData[i].group == "vector") {
+          this.tableData[i].group = "矢量分组";
+        }
+        if (this.tableData[i].type == "tianditu") {
+          this.tableData[i].type = "天地图";
+        }
+        if (this.tableData[i].type == "amap") {
+          this.tableData[i].type = "高德";
+        }
+      }
+    }
+  },
+  watch: {
+    $route: {
+      handler(to, from) {
+        this.id = to.params.id;
+        this.key = to.params.key;
+        this.name = to.params.name;
+      },
+      immediate: true,
+    },
+    tableData: {
+      handler() {
+        if (this.tableData) {
+          for (var i = 0; i < this.tableData.length; i++) {
+            let reg = /\D/;
+            if (reg.test(this.tableData[i].index)) {
+              if (this.tableData[i].index != "")
+                this.$message.info("显示顺序只可为数字");
+            }
+            this.tableData[i].index = this.tableData[i].index
+              .toString()
+              .replace(/\D/, "");
+          }
+        }
+      },
+      deep: true,
+    },
+  },
+  store,
+};
+</script>
+<style lang="scss" scoped>
+#buttonStyle1 {
+  background: #9dbbe7;
+  border-radius: 4px;
+  border-color: #ecedf0;
+  color: #fff;
+}
+.el-input__inner {
+  >>> &::placeholder {
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    color: #fff;
+  }
+}
+.el-input__inner {
+  background: #9dbbe7 !important;
+  color: #fff;
+}
+>>> .el-table td,
+>>> .el-table th.is-leaf {
+  border: 1px solid rgba(211, 226, 246, 0.5) !important;
+}
+</style>

src/components/TaskManagement/xml/drawtool.vue

@@ -0,0 +1,372 @@
+<template>
+  <div id="tablecontainer">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="绘图工具" name="first"></el-tab-pane>
+      <el-main>
+        <el-menu mode="vertical">
+          <el-submenu :index="group.name" v-for="(group, groupIndex) in drawtoolGroups" :key="groupIndex">
+            <template #title>
+              {{ group.name }}
+              <el-button
+                v-if="groupIndex !== 0"
+                type="text"
+                size="small"
+                @click.stop="editGroupName(groupIndex)"
+              >编辑名称</el-button>
+              <el-button
+                v-if="groupIndex !== 0"
+                type="text"
+                size="small"
+                @click.stop="removeGroup(groupIndex)"
+              >删除分组</el-button>
+            </template>
+            <el-menu-item :index="tool.value" v-for="tool in (groupIndex === 0 ? group.tools : availableTools)" :key="tool.label">
+              <el-checkbox
+                v-model="group.checkList"
+                :label="tool.value"
+                border
+                style="width: 160px; margin-top: 10px;"
+              >
+                {{ tool.label }}
+              </el-checkbox>
+            </el-menu-item>
+          </el-submenu>
+        </el-menu>
+
+        <el-button
+          type="primary"
+          size="small"
+          style="margin-top: 30px; margin-left: 40px"
+          @click="addGroup"
+        >
+          添加分组
+        </el-button>
+
+        <el-button
+          id="buttonStyle"
+          type="primary"
+          size="small"
+          style="margin-top: 30px; margin-left: 40px"
+          v-if="getInfo == '1'"
+          @click="UploadData()"
+        >保存并下一步</el-button>
+      </el-main>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { store } from "@/components/vuex/store.js";
+import { ajax as request } from "@/request.js";
+export default {
+  data() {
+    return {
+      getInfo: sessionStorage.getItem("getInfo"),
+      activeName: "first",
+      defaultTools: [
+        { value: "location", label: "位置" },
+        { value: "point", label: "点" },
+        { value: "line", label: "线" },
+        { value: "polygon", label: "面" },
+        { value: "rectangle", label: "矩形" },
+        { value: "circle", label: "圆" },
+        { value: "freehand_polygon", label: "手绘面" },
+        { value: "freehand_line", label: "手绘线" },
+        { value: "path", label: "轨迹" },
+        { value: "draft", label: "草图" },
+        { value: "transfer_point", label: "引点定位" }
+      ],
+      drawtoolGroups: [
+        {
+          name: "default",
+          checkList: [],
+          tools: [
+            { value: "location", label: "位置" },
+            { value: "point", label: "点" },
+            { value: "line", label: "线" },
+            { value: "polygon", label: "面" },
+            { value: "rectangle", label: "矩形" },
+            { value: "circle", label: "圆" },
+            { value: "freehand_polygon", label: "手绘面" },
+            { value: "freehand_line", label: "手绘线" },
+            { value: "path", label: "轨迹" },
+            { value: "draft", label: "草图" },
+            { value: "transfer_point", label: "引点定位" }
+          ]
+        }
+      ],
+      drawtool: {},
+      id: "-1",
+      key: "",
+      name: "",
+    };
+  },
+  computed: {
+    availableTools() {
+      const defaultGroupSelectedTools = this.drawtoolGroups[0].checkList;
+      return this.defaultTools.filter(tool => !defaultGroupSelectedTools.includes(tool.value));
+    }
+  },
+  methods: {
+    init() {
+      let that = this;
+      let config = sessionStorage["Data"];
+      if (config) {
+        config = JSON.parse(config);
+        console.log('从sessionStorage获取的配置:', config);
+        this.drawtool = config.meta.drawtool;
+        if (this.drawtool) {
+          console.log('绘图工具配置:', this.drawtool);
+          const newGroups = [];
+          if (this.drawtool.default) {
+            newGroups.push({
+              name: "default",
+              checkList: this.drawtool.default.map(tool => tool.name),
+              tools: [...this.defaultTools]
+            });
+          }
+          for (const [groupName, tools] of Object.entries(this.drawtool)) {
+            if (groupName !== 'default') {
+              newGroups.push({
+                name: groupName,
+                checkList: tools.map(tool => tool.name),
+                tools: [...this.defaultTools]
+              });
+            }
+          }
+          console.log('解析后的分组数据:', newGroups);
+          this.drawtoolGroups = newGroups;
+          this.$nextTick(() => {
+            console.log('视图更新后的勾选状态:', this.drawtoolGroups);
+          });
+        }
+      } else if (this.id != "-1") {
+        request({
+          url: "/xml/requesting",
+          method: "post",
+          params: {
+            id: that.id,
+          },
+        }).then(function (response) {
+          if (response.data.data) {
+            console.log('从接口获取的原始数据:', response.data.data);
+            config = sessionStorage["Data"];
+            if (!config) {
+              var jsondata = JSON.parse(response.data.data);
+              console.log('解析后的配置:', jsondata);
+              that.$store.dispatch("updateData", { config: jsondata });
+              sessionStorage["Data"] = JSON.stringify(that.$store.state.config);
+            }
+            config = sessionStorage["Data"];
+            config = JSON.parse(config);
+            that.drawtool = config.meta.drawtool;
+            if (that.drawtool) {
+              console.log('绘图工具配置:', that.drawtool);
+              that.drawtoolGroups = [];
+              if (that.drawtool.default) {
+                that.drawtoolGroups.push({
+                  name: "default",
+                  checkList: that.drawtool.default.map(tool => tool.name),
+                  tools: that.defaultTools
+                });
+              }
+              for (const [groupName, tools] of Object.entries(that.drawtool)) {
+                if (groupName !== 'default') {
+                  that.drawtoolGroups.push({
+                    name: groupName,
+                    checkList: tools.map(tool => tool.name),
+                    tools: that.defaultTools
+                  });
+                }
+              }
+              console.log('解析后的分组数据:', that.drawtoolGroups);
+            }
+          } else if (response.data.status == "401") {
+            that.$alert(response.data.message);
+            that.$router.push({ path: "/login" });
+          }
+        });
+      }
+    },
+    addGroup() {
+      this.$prompt('请输入分组名称', '新建分组', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /\S+/,
+        inputErrorMessage: '分组名称不能为空！'
+      }).then(({ value }) => {
+        this.drawtoolGroups.push({
+          name: value,
+          checkList: []
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消创建'
+        });
+      });
+    },
+    editGroupName(index) {
+      const oldName = this.drawtoolGroups[index].name;
+      this.$prompt('请输入新分组名称', '编辑分组', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputValue: oldName,
+        inputPattern: /\S+/,
+        inputErrorMessage: '分组名称不能为空！'
+      }).then(({ value }) => {
+        // 更新分组名称
+        this.drawtoolGroups[index].name = value;
+        // 删除旧名称的分组数据
+        if (oldName !== 'default' && oldName in this.drawtool) {
+          delete this.drawtool[oldName];
+        }
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消编辑'
+        });
+      });
+    },
+    removeGroup(index) {
+      if (index === 0) return;
+      this.drawtoolGroups.splice(index, 1);
+      // 更新sessionStorage
+      this.drawtool = {};
+      this.drawtoolGroups.forEach(group => {
+        this.drawtool[group.name] = group.checkList.map(name => ({ name }));
+      });
+      this.$store.dispatch("updateDrawtool", { drawtool: this.drawtool });
+      sessionStorage["Data"] = JSON.stringify(this.$store.state.config);
+    },
+    updateGroupCheckList(groupIndex, val) {
+      // 获取default分组的选中工具
+      const defaultSelected = this.drawtoolGroups[0].checkList;
+      // 如果是非default分组，过滤掉default分组已选的工具
+      const filteredVal = groupIndex === 0 ? val : val.filter(
+        tool => !defaultSelected.includes(tool)
+      );
+      this.drawtoolGroups[groupIndex].checkList = filteredVal;
+    },
+    UploadData() {
+      let that = this;
+      // 获取default分组的选中工具
+      const defaultSelected = this.drawtoolGroups[0].checkList;
+
+      // 处理每个分组，确保不包含default分组已选的工具
+      this.drawtoolGroups.forEach(group => {
+        if (!this.drawtool[group.name]) {
+          this.drawtool[group.name] = [];
+        }
+        // 过滤掉default分组已选的工具
+        const filteredCheckList = group.name === 'default'
+          ? group.checkList
+          : group.checkList.filter(tool => !defaultSelected.includes(tool));
+        this.drawtool[group.name] = filteredCheckList.map(name => ({ name }));
+      });
+
+      this.$store.dispatch("updateDrawtool", { drawtool: this.drawtool });
+      sessionStorage["Data"] = JSON.stringify(that.$store.state.config);
+      this.$notify.success({
+        title: "提示",
+        message: "保存成功",
+      });
+      if (this.name && this.key && this.id) {
+        this.$router.push({
+          path: `/home/${this.name}/${this.key}/${this.id}/position`,
+        });
+      } else {
+        console.error('缺少必要的路由参数');
+        this.$notify.error({
+          title: '错误',
+          message: '无法跳转，缺少必要的参数'
+        });
+      }
+    },
+  },
+  watch: {
+    'drawtoolGroups': {
+      handler() {
+        this.$forceUpdate();
+      },
+      deep: true
+    },
+    '$route': {
+      handler(to) {
+        this.name = to.params.name;
+        this.id = to.params.id;
+        if (to.params.key) {
+          this.key = to.params.key;
+        }
+        console.log('路由参数更新:', {
+          name: this.name,
+          key: this.key,
+          id: this.id
+        });
+      },
+      immediate: true
+    }
+  },
+  store,
+  created: function () {
+    this.init();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+#tablecontainer .el-menu .el-submenu__title:hover {
+  background-color: #f0f7ff !important;
+}
+.el-menu-item:hover {
+  background-color: #f0f7ff !important;
+}
+#buttonStyle {
+  background: #9dbbe7;
+  border-radius: 4px;
+  border-color: #9dbbe7;
+}
+.el-tabs__active-bar {
+  background-color: #304156;
+}
+.el-tabs__item.is-active {
+  color: #304156;
+}
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #304156;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #304156;
+  border-color: #304156;
+}
+.el-checkbox.is-bordered.is-checked {
+  border-color: #dcdfe6;
+}
+@media screen and (min-height: 800px) {
+  #checkcontainer {
+    height: 500px !important;
+  }
+}
+@media screen and (min-height: 700px) and (max-height: 800px) {
+  #checkcontainer {
+    height: 400px !important;
+  }
+}
+@media screen and (min-height: 600px) and (max-height: 700px) {
+  #checkcontainer {
+    height: 350px !important;
+  }
+}
+@media screen and (min-height: 500px) and (max-height: 600px) {
+  #checkcontainer {
+    height: 300px !important;
+  }
+}
+@media screen and (max-height: 500px) {
+  #checkcontainer {
+    height: 250px !important;
+  }
+}
+</style>

src/components/TaskManagement/xml/home.vue

@@ -0,0 +1,412 @@
+<template>
+  <div id="TPcontainer">
+    <el-container>
+      <el-aside width="160px" style="text-align: left">
+        <el-menu router :default-active="this.$route.path">
+          <el-submenu index="1">
+            <template slot="title">
+              <i class="el-icon-menu"></i>基础配置</template
+            >
+            <el-menu-item-group>
+              <el-menu-item
+                :index="'/home/' + name + '/' + key + '/' + id + '/drawtool'"
+                class="{'isActive': !active}"
+              >绘图工具</el-menu-item
+              >
+              <el-menu-item
+                :index="'/home/' + name + '/' + key + '/' + id + '/position'"
+                class="{'isActive': !active}"
+              >定位方式</el-menu-item
+              >
+              <el-menu-item
+                :index="'/home/' + name + '/' + key + '/' + id + '/basemap'"
+                class="{'isActive': !active}"
+              >地图配置</el-menu-item
+              >
+            </el-menu-item-group>
+          </el-submenu>
+          <el-submenu index="0">
+            <template slot="title">
+              <i class="el-icon-menu"></i>数据表
+              <el-button
+                size="mini"
+                type="primary"
+                id="buttonStyle"
+                plain
+                @click="addTable"
+                v-if="getInfo == '1'"
+              >+</el-button
+              >
+            </template>
+            <el-menu-item
+              v-for="(item, i) in tables"
+              :key="i"
+              :index="
+                '/home/' + name + '/' + key + '/' + id + '/' + i + '/tablecon'
+              "
+            >{{ item.name }}</el-menu-item
+            >
+          </el-submenu>
+        </el-menu>
+      </el-aside>
+      <el-container>
+        <div id="buttomC">
+          <el-button
+            v-if="getInfo == '1'"
+            id="buttonS"
+            type="primary"
+            @click="uploadConfig()"
+          >提交</el-button
+          >
+          <el-button id="buttonS" type="primary" @click="toMain()"
+          >取消并返回上页</el-button
+          >
+        </div>
+        <el-main style="margin-top: 55px">
+          <router-view class="view"></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { store } from "@/components/vuex/store.js";
+import { ajax as request } from "@/request.js";
+import Qs from "qs";
+
+export default {
+  name: "Meta",
+  data: function () {
+    return {
+      getInfo: sessionStorage.getItem("getInfo"),
+      key: "",
+      name: "",
+      id: "-1",
+      active: true,
+      contextMenuTarget: null,
+      contextMenuVisible: false,
+    };
+  },
+  methods: {
+    initConfig() {
+      let config1 = sessionStorage["Data"];
+      if (config1) {
+        config1 = JSON.parse(config1);
+        this.$store.dispatch("updateData", { config: config1 });
+      } else if (this.id != "-1") {
+        let that = this;
+        request({
+          url: "/xml/requesting",
+          method: "post",
+          params: {
+            id: that.id,
+          },
+        }).then(function (response) {
+          if (response.data.data) {
+            //获取数据存入config
+            var jsondata = JSON.parse(response.data.data);
+            // jsondata = that.changeC(jsondata);
+            that.$store.dispatch("updateData", { config: jsondata });
+            sessionStorage["Data"] = JSON.stringify(that.$store.state.config);
+          } else if (response.data.status == "401") {
+            that.$alert(response.data.message);
+            that.$router.push({ path: "/login" });
+          }
+        });
+      }
+    },
+    toMain() {
+      sessionStorage.removeItem("Data");
+      var config1 = {
+        meta: {
+          drawtool: {},
+          position: [],
+          basemap: [],
+        },
+        tables: [],
+      };
+      this.$store.dispatch("updateData", { config: config1 });
+      this.$router.push({ path: "/main" });
+    },
+    addTable() {
+      this.$router.push({
+        path:
+          "/home/" + this.name + "/" + this.key + "/" + this.id + "/creattable",
+      });
+    },
+    uploadConfig() {
+      let that = this;
+      this.$confirm("确认提交任务？", "提示", {
+        cancelButtonText: "取消",
+        confirmButtonText: "确定",
+        type: "warning",
+      })
+        .then(() => {
+          //移除isgroup
+          // var datadeleteIsGroup = that.changeE(that.$store.state.config);
+          var datadeleteIsGroup = that.$store.state.config;
+          for (var i = 0; i < datadeleteIsGroup.tables.length; i++) {
+            for (
+              var j = 0;
+              j < datadeleteIsGroup.tables[i].fields.length;
+              j++
+            ) {
+              delete datadeleteIsGroup.tables[i].fields[j].group;
+              if (datadeleteIsGroup.tables[i].fields[j].identity == true) {
+                datadeleteIsGroup.tables[i].fields[j].autoIncrement = true;
+              } else {
+                datadeleteIsGroup.tables[i].fields[j].autoIncrement = "";
+              }
+            }
+          }
+          if (datadeleteIsGroup.meta.drawtool.length == 0) {
+            that.$alert("请选择绘图工具！", "提示", {
+              confirmButtonText: "确定",
+            });
+            return;
+          }
+          if (datadeleteIsGroup.meta.position.length == 0) {
+            that.$alert("请选择定位方式！", "提示", {
+              confirmButtonText: "确定",
+            });
+            return;
+          }
+          if (datadeleteIsGroup.meta.basemap.length == 0) {
+            that.$alert("请添加地图图层！", "提示", {
+              confirmButtonText: "确定",
+            });
+            return;
+          }
+          if (datadeleteIsGroup.tables.length == 0) {
+            that.$alert("请添加数据表！", "提示", {
+              confirmButtonText: "确定",
+            });
+            return;
+          }
+
+          // 修改datadeleteIsGroup内容
+          const newConfig = {
+            name: "测试任务",
+            key: "test",
+            config: {
+              meta: {
+                drawtool: datadeleteIsGroup.meta.drawtool,
+                position: datadeleteIsGroup.meta.position,
+                basemap: datadeleteIsGroup.meta.basemap.map(item => ({
+                  ...item,
+                  url: ""
+                }))
+              },
+              tables: datadeleteIsGroup.tables.map(table => ({
+                ...table,
+                fields: table.fields.map(field => ({
+                  ...field,
+                  index: field.index || "",
+                  name: field.name || "",
+                  type: field.type || "",
+                  selector: field.selector || [],
+                  select: field.select || "",
+                  mode: field.mode || "",
+                  parentID: field.parentID || "",
+                  resultType: field.resultType || "",
+                  geometry: field.geometry || "",
+                  required: field.required || "",
+                  identity: field.identity || "",
+                  uploadName: field.uploadName || "",
+                  autoDate: field.autoDate || "",
+                  show: field.show || "",
+                  enable: field.enable || "",
+                  script: field.script || "",
+                  associate: field.associate || "",
+                  collection: field.collection || "",
+                  autoIncrement: field.autoIncrement || ""
+                }))
+              }))
+            },
+            id: "1",
+            introduction: "aaa",
+            taskUploadTime: "23:00"
+          };
+
+          if (this.id == "-1") {
+            request({
+              url: "/task/createTask",
+              method: "post",
+              params: {
+                configString: JSON.stringify(newConfig),
+              },
+            }).then(function (response) {
+              if (response.data.success) {
+                //清空config和本地缓存
+                sessionStorage.removeItem("Data");
+                sessionStorage.removeItem("daytaskNum");
+                sessionStorage.removeItem("taskUploadTime");
+                var config1 = {
+                  meta: {
+                    drawtool: {},
+                    position: [],
+                    basemap: [],
+                  },
+                  tables: [],
+                };
+                that.$store.dispatch("updateData", { config: config1 });
+                that.$router.push({ path: "/main" });
+                that.$notify.success({
+                  title: "提示",
+                  message: "提交成功",
+                });
+              } else if (response.data.status == "401") {
+                that.$alert(response.data.message);
+                that.$router.push({ path: "/login" });
+              } else {
+                that.$notify.error({
+                  title: "提示",
+                  message: "提交失败" + "," + response.data.message,
+                });
+              }
+            });
+          } else {
+            request({
+              url: "/task/updateTask",
+              method: "post",
+              params: {
+                id: that.id,
+                configString: JSON.stringify(newConfig),
+              },
+            }).then(function (response) {
+              if (response.data.success) {
+                //清空config和本地缓存
+                sessionStorage.removeItem("Data");
+                var config1 = {
+                  meta: {
+                    drawtool: {},
+                    position: [],
+                    basemap: [],
+                  },
+                  tables: [],
+                };
+                that.$store.dispatch("updateData", { config: config1 });
+                that.$notify.success({
+                  title: "提示",
+                  message: "提交成功",
+                });
+              } else if (response.data.status == "401") {
+                that.$alert(response.data.message);
+                that.$router.push({ path: "/login" });
+              } else {
+                that.$notify.error({
+                  title: "提示",
+                  message: "提交失败" + "," + response.data.message,
+                });
+              }
+            });
+            request({
+              url: "/task/checkTaskXmlMD5Code",
+              method: "post",
+              params: {
+                id: that.id,
+              },
+            }).then(function (response) {
+              that.$router.push({ path: "/main" });
+              if (response.data.success) {
+                that.$alert(response.data.message, "提示", {
+                  confirmButtonText: "确定",
+                });
+              } else if (response.data.status == "401") {
+                that.$alert(response.data.message);
+                that.$router.push({ path: "/login" });
+              }
+            });
+          }
+        })
+        .catch(() => {});
+    },
+  },
+  components: {},
+  mounted() {
+    let menu = document.getElementsByClassName("el-menu")[0];
+    let menuitem = menu.children[1];
+    this.contextMenuTarget = menuitem;
+    this.initConfig();
+  },
+  computed: {
+    tables() {
+      return this.$store.state.config.tables;
+    },
+  },
+  watch: {
+    //用watch监听变化
+    $route: {
+      handler(to, from) {
+        this.name = to.params.name;
+        this.id = to.params.id;
+        if (to.params.key) {
+          this.key = to.params.key;
+        }
+      },
+      immediate: true,
+    },
+  },
+  store,
+};
+</script>
+
+<style>
+#buttomC {
+  top: 15px;
+  right: 25px;
+  position: absolute;
+}
+
+.el-header {
+  background-color: #b3c0d1;
+  color: #264672;
+  text-align: center;
+  line-height: 50px;
+}
+.el-aside {
+  height: 100vh;
+  background-color: #d3dce6;
+  color: #264672;
+  text-align: center;
+  line-height: 200px;
+}
+.right-menu {
+  position: fixed;
+  background: #fff;
+  border: solid 1px rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  z-index: 999;
+}
+.right-menu a {
+  width: 75px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+  display: block;
+  color: #1a1a1a;
+}
+.right-menu a:hover {
+  background: #eee;
+  color: #fff;
+}
+.right-menu {
+  border: 1px solid #eee;
+  box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
+  border-radius: 1px;
+}
+a {
+  text-decoration: none;
+}
+.right-menu a {
+  padding: 2px;
+}
+.right-menu a:hover {
+  background: #42b983;
+}
+.v-modal {
+  background: #fff;
+}
+</style>

src/components/TaskManagement/xml/main.vue

@@ -0,0 +1,727 @@
+<template>
+  <div>
+    <div id="buttomContain">
+      <div class="search-container">
+        <el-input
+          v-model="searchKeyword"
+          placeholder="请输入关键词进行搜索"
+          prefix-icon="el-icon-search"
+          clearable
+          size="small"
+          style="width: 450px; margin-right: 15px;"
+          @input="handleSearch"
+        ></el-input>
+      </div>
+      <div class="search-container">
+      <el-button id="buttonStyle" size="small" @click="addRow()"
+        >添加任务</el-button
+      >
+      <el-button id="buttonStyle" size="small" @click="addXml()"
+        >导入xml文件</el-button
+      ></div>
+    </div>
+    <el-table
+      id="tableStyle"
+      :data="filteredData"
+      :height="720"
+      stripe
+      border
+      highlight-current-row
+      header-cell-class-name="sinCl"
+      :default-sort = "{prop: 'date', order: 'descending'}"
+    >
+      <el-table-column type="index" label="序号" width="60" ></el-table-column>
+      <el-table-column
+        prop="taskName"
+        label="任务名称"
+        sortable
+        min-width="85"
+      ></el-table-column>
+      <el-table-column
+        prop="databaseName"
+        label="数据库名称"
+        sortable
+        min-width="100"
+      ></el-table-column>
+      <el-table-column
+        prop="introduction"
+        label="任务备注"
+        sortable
+        min-width="85"
+      ></el-table-column>
+      <el-table-column
+        prop="operator"
+        label="操作人员"
+        sortable
+        min-width="85"
+      ></el-table-column>
+      <el-table-column min-width="90" filterable label="是否已创库" sortable>
+        <template slot-scope="scope">
+          <span v-if="scope.row.hasCreateTables == true">已创库 </span>
+          <span v-else>未创库</span>
+        </template>
+      </el-table-column>
+      <el-table-column min-width="110" filterable label="是否及时审核">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.isReviewerRestricted"
+            active-color="#9DBBE7"
+            @change="
+              changeRestricted(scope.row.id, scope.row.isReviewerRestricted)
+            "
+          >
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="createTime"
+        label="创建时间"
+        min-width="90"
+        sortable
+      ></el-table-column>
+      <el-table-column
+        prop="modifyTime"
+        label="修改时间"
+        min-width="90"
+        sortable
+      ></el-table-column>
+
+      <el-table-column width="290" fixed="right" label="操作">
+        <template slot-scope="scope">
+          <el-button
+            v-if="scope.row.hasCreateTables == true"
+            type="text"
+            size="small"
+            @click.native.prevent="getRow(scope.row.id)"
+            >查看任务</el-button
+          >
+          <el-button
+            v-else
+            @click.native.prevent="editRow(scope.row.id)"
+            type="text"
+            size="small"
+            >编辑任务</el-button
+          >
+<!--          <el-button-->
+<!--            @click.native.prevent="deleteRow(scope.$index)"-->
+<!--            type="text"-->
+<!--            size="small"-->
+<!--            >删除任务</el-button-->
+<!--          >-->
+          <el-button
+            @click.native.prevent="taskCreat(scope.row.id)"
+            type="text"
+            size="small"
+            >任务创库</el-button
+          >
+          <el-button
+            @click.native.prevent="downloadXml(scope.row.id)"
+            type="text"
+            size="small"
+            >下载xml文件</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog
+      v-dialogDrag
+      class="taskDialog"
+      title="新建任务"
+      :visible.sync="DialogVisible"
+      :close-on-click-modal="false"
+    >
+      <el-form ref="form" :model="form" label-width="138px">
+        <el-form-item>
+          <span slot="label"
+            >任务名称
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="任务的中文名称"
+              placement="top-end"
+              ><i class="el-icon-info"></i
+            ></el-tooltip>
+          </span>
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <span slot="label"
+            >数据库名称
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="任务在创建数据库时进行存储的数据库名称(英文)"
+              placement="top-end"
+              ><i class="el-icon-info"></i
+            ></el-tooltip>
+          </span>
+          <el-input v-model="form.key"></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <span slot="label"
+            >任务上传时间
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="用于任务每日统计的截止日期，在该时间会统计每个用户的具体上传数量"
+              placement="top-end"
+              ><i class="el-icon-info"></i
+            ></el-tooltip>
+          </span>
+          <el-time-picker
+            v-model="form.taskUploadTime"
+            value-format="HH:mm"
+            format="HH:mm"
+            :picker-options="{
+              selectableRange: '00:00:00 - 23:59:59',
+            }"
+          ></el-time-picker>
+        </el-form-item>
+        <el-form-item>
+          <span slot="label"
+            >任务备注
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="任务的描述，将在移动端进行展示"
+              placement="top-end"
+              ><i class="el-icon-info"></i
+            ></el-tooltip>
+          </span>
+          <el-input v-model="form.introduction"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-button type="primary" size="small" @click="Upload()">确认</el-button>
+    </el-dialog>
+    <el-dialog
+      v-dialogDrag
+      class="taskDialog"
+      title="上传xml文件"
+      :visible.sync="xmlDialogVisible"
+      :close-on-click-modal="false"
+    >
+      <div style="text-align: left">
+        <el-form ref="xmlform" :model="xmlform" label-width="138px">
+          <el-form-item label="任务名称">
+            <el-input v-model="xmlform.xmlname"></el-input>
+          </el-form-item>
+          <el-form-item label="数据库名称(英文)">
+            <el-input v-model="xmlform.xmlkey"></el-input>
+          </el-form-item>
+          <el-form-item label="任务上传时间">
+            <el-time-picker
+              v-model="xmlform.xmltaskUploadTime"
+              value-format="HH:mm"
+              format="HH:mm"
+              :picker-options="{
+                selectableRange: '00:00:00 - 23:59:59',
+              }"
+            ></el-time-picker>
+          </el-form-item>
+          <el-form-item label="任务备注">
+            <el-input v-model="xmlform.introduction"></el-input>
+          </el-form-item>
+          <el-form-item label="xml文件">
+            <el-upload
+              accept=".xml"
+              class="upload-demo"
+              action="xml"
+              ref="uploadfile"
+              :auto-upload="false"
+              :limit="1"
+              :before-upload="beforeAvatarUpload"
+              :on-change="getFile"
+              :on-remove="removeFile"
+            >
+              <el-button size="small" type="primary" plain>选择文件</el-button>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-button type="primary" size="small" @click="UploadXml()"
+        >确认</el-button
+      >
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { store } from "@/components/vuex/store.js";
+import { ajax as request } from "@/request.js";
+import axios from "axios";
+export default {
+  data: function () {
+    return {
+      form: {
+        name: "",
+        key: "",
+        taskUploadTime: "23:00",
+        introduction: "",
+      },
+      DialogVisible: false,
+      xmlDialogVisible: false,
+      xmlform: {
+        xmlname: "",
+        xmlkey: "",
+        xmltaskUploadTime: "23:00",
+        introduction: "",
+      },
+      xmlData: [],
+      fileList: [],
+      searchKeyword: "", // 搜索关键词
+      filteredData: [], // 过滤后的数据
+    };
+  },
+  methods: {
+    // 搜索处理方法
+    handleSearch() {
+      if (!this.searchKeyword.trim()) {
+        this.filteredData = [...this.xmlData];
+      } else {
+        const keyword = this.searchKeyword.toLowerCase();
+        this.filteredData = this.xmlData.filter(item => {
+          return (
+            (item.taskName && item.taskName.toLowerCase().includes(keyword)) ||
+            (item.databaseName && item.databaseName.toLowerCase().includes(keyword)) ||
+            (item.introduction && item.introduction.toLowerCase().includes(keyword))
+          );
+        });
+      }
+    },
+
+    //读取数据库 初始化xml
+    init() {
+      let that = this;
+      request({
+        url: "/task/selectAll",
+        method: "get",
+      }).then(function (response) {
+        if (response.data.success == true) {
+          var jsondata = JSON.parse(response.data.data);
+          that.xmlData = jsondata.data;
+          that.filteredData = [...that.xmlData]; // 初始化过滤数据
+          for (var i = 0; i < that.xmlData.length; i++) {
+            if (that.xmlData[i].hasCreateTables == 1) {
+              that.xmlData[i].hasCreateTables = true;
+            } else {
+              that.xmlData[i].hasCreateTables = false;
+            }
+            if (
+              that.xmlData[i].isReviewerRestricted == 1 ||
+              that.xmlData[i].isReviewerRestricted == true
+            ) {
+              that.xmlData[i].isReviewerRestricted = true;
+            } else {
+              that.xmlData[i].isReviewerRestricted = false;
+            }
+          }
+        } else if (response.data.status == "401") {
+          that.$alert(response.data.message);
+          that.$router.push({ path: "/login" });
+        }
+      });
+    },
+    // 修改方法参数，从index改为id
+    changeRestricted(id, val) {
+      let str = val == true ? "确认任务及时审核吗？" : "确认任务不需及时审核吗？";
+      let result = val == true ? 1 : 0;
+      let that = this;
+
+      this.$confirm(str, "提示", {})
+        .then(() => {
+          request({
+            url: "/task/setReviewerMode",
+            method: "get",
+            params: {
+              taskId: id,
+              isReviewerRestricted: result,
+            },
+          }).then(function (response) {
+            if (response.data.success == true) {
+              that.$message.success("设置成功");
+              // 更新本地数据状态
+              let row = that.xmlData.find(item => item.id === id);
+              if (row) {
+                row.isReviewerRestricted = val;
+              }
+            } else if (response.data.status == "401") {
+              that.$alert(response.data.message);
+              that.$router.push({ path: "/login" });
+            } else {
+              that.$message.error("设置失败");
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    addRow() {
+      this.DialogVisible = true;
+    },
+    deleteRow(id) {
+      this.$confirm("确认删除？", "提示", {
+        cancelButtonText: "取消",
+        confirmButtonText: "确定",
+        type: "warning",
+      })
+        .then(() => {
+          let that = this;
+          request({
+            url: "/task/deleteTask",
+            method: "post",
+            params: { id: id },
+          }).then(function (response) {
+            var deleteresult = response.data.success;
+            if (deleteresult == true) {
+              that.$notify.success({
+                title: "提示",
+                message: "删除成功",
+              });
+              that.init();
+            } else if (response.data.status == "401") {
+              that.$alert(response.data.message);
+              that.$router.push({ path: "/login" });
+            } else {
+              that.$notify.error({
+                title: "提示",
+                message: "删除失败",
+              });
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    Upload() {
+      if (this.form.name == "") {
+        this.$alert("任务名不可为空", "提示", { confirmButtonText: "确定" });
+        return;
+      }
+      if (this.form.key == "") {
+        this.$alert("数据库名称不可为空", "提示", {
+          confirmButtonText: "确定",
+        });
+        return;
+      }
+      if (this.xmlData.length > 0) {
+        for (var i = 0; i < this.xmlData.length; i++) {
+          if (this.form.key == this.xmlData[i].databaseName) {
+            this.$alert("数据库名称重复!", "提示", {
+              confirmButtonText: "确定",
+            });
+            return;
+          }
+        }
+      }
+      //存入time和num
+
+      this.DialogVisible = false;
+      // this.$store.dispatch('updateData',{config:''})
+      sessionStorage.setItem("taskUploadTime", this.form.taskUploadTime);
+      sessionStorage.setItem("introduction", this.form.introduction);
+
+      sessionStorage.removeItem("Data");
+      var config1 = {
+        meta: {
+          drawtool: {},
+          position: [],
+          basemap: [],
+        },
+        tables: [],
+      };
+      this.$store.dispatch("updateData", { config: config1 });
+      sessionStorage.setItem("getInfo", "1");
+      this.$router.push({
+        path:
+          "/home/" + this.form.name + "/" + this.form.key + "/-1" + "/drawtool",
+      });
+    },
+    editRow(id) {
+      let row = this.xmlData.find(item => item.id === id);
+      if (!row) return;
+      
+      sessionStorage.removeItem("Data");
+      sessionStorage.setItem("getInfo", "1");
+      var config1 = {
+        meta: {
+          drawtool: {},
+          position: [],
+          basemap: [],
+        },
+        tables: [],
+      };
+      this.$store.dispatch("updateData", { config: config1 });
+      this.$router.push({
+        path: "/home/" + row.taskName + "/taskKey/" + id + "/drawtool",
+      });
+    },
+    getRow(id) {
+      let row = this.xmlData.find(item => item.id === id);
+      if (!row) return;
+      
+      sessionStorage.removeItem("Data");
+      sessionStorage.setItem("getInfo", "0");
+      var config1 = {
+        meta: {
+          drawtool: {},
+          position: [],
+          basemap: [],
+        },
+        tables: [],
+      };
+      this.$store.dispatch("updateData", { config: config1 });
+      this.$router.push({
+        path: "/home/" + row.taskName + "/taskKey/" + id + "/drawtool",
+      });
+    },
+    taskCreat(id) {
+      this.$confirm("确认生成？", "提示", {
+        cancelButtonText: "取消",
+        confirmButtonText: "确定",
+        type: "warning",
+      })
+        .then(() => {
+          let that = this;
+          request({
+            url: "/table/createTable",
+            method: "post",
+            params: { id: id },
+          }).then(function (response) {
+            if (response.data.success) {
+              that.$notify.success({
+                title: "提示",
+                message: "创建成功",
+              });
+              that.init();
+            } else if (response.data.message == "hasCreated") {
+              that.$confirm("该任务已经创库，是否重新创库？", "提示", {
+                cancelButtonText: "取消",
+                confirmButtonText: "确定",
+                type: "warning",
+              })
+                .then(() => {
+                  let that1 = that;
+                  request({
+                    url: "table/deleteAndCreateTable",
+                    method: "post",
+                    params: { id: id },
+                  }).then(function (response) {
+                    if (response.data.success) {
+                      that1.$notify.success({
+                        title: "提示",
+                        message: "创建成功",
+                      });
+                      that1.init();
+                    } else {
+                      that1.$notify.error({
+                        title: "提示",
+                        message: "创建失败",
+                      });
+                    }
+                  });
+                })
+                .catch(() => {});
+            } else if (response.data.status == "401") {
+              that.$alert(response.data.message);
+              that.$router.push({ path: "/login" });
+            } else {
+              that.$notify.error({
+                title: "提示",
+                message: "创建失败",
+              });
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    downloadXml(id) {
+      let that = this;
+      request({
+        url: "/xml/downloading",
+        method: "post",
+        params: { id: id },
+      }).then(function (response) {
+        if (response.data.status == "401") {
+          that.$alert(response.data.message);
+          that.$router.push({ path: "/login" });
+        } else if (response.status == 200) {
+          let row = that.xmlData.find(item => item.id === id);
+          if (row) {
+            that.download(response.data, row.taskName);
+          }
+          that.$notify.success({
+            title: "提示",
+            message: "正在下载",
+          });
+        } else {
+          that.$notify.error({
+            title: "提示",
+            message: response.data.message,
+          });
+        }
+      });
+    },
+    download(data, name) {
+      let fileName = name + ".xml";
+      if ("download" in document.createElement("a")) {
+        // 不是IE浏览器
+        let blob = new Blob([data]);
+        let url = window.URL.createObjectURL(blob);
+        let link = document.createElement("a");
+        link.style.display = "none";
+        link.href = url;
+        link.setAttribute("download", fileName);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link); // 下载完成移除元素
+        window.URL.revokeObjectURL(url); // 释放掉blob对象
+      } else {
+        // IE 10+
+        window.navigator.msSaveBlob(blob, fileName);
+      }
+    },
+    addXml() {
+      this.xmlDialogVisible = true;
+      this.xmlform.xmlname = "";
+      this.xmlform.xmlkey = "";
+      this.xmlform.xmltaskUploadTime = "23:00";
+      this.xmlform.introduction = "";
+      this.fileList = [];
+      if (this.$refs.uploadfile) {
+        this.$refs.uploadfile.clearFiles();
+      }
+    },
+    UploadXml() {
+      let fd = new FormData();
+      if (!this.xmlform.xmlname) {
+        this.$alert("请输入任务名称！", "提示", { confirmButtonText: "确定" });
+        return;
+      }
+      if (!this.xmlform.xmlkey) {
+        that.$alert("请输入数据库名称！", "提示", {
+          confirmButtonText: "确定",
+        });
+        return;
+      }
+      if (this.xmlData.length > 0) {
+        for (var i = 0; i < this.xmlData.length; i++) {
+          if (this.xmlform.xmlkey == this.xmlData[i].databaseName) {
+            this.$alert("数据库名称重复!", "提示", {
+              confirmButtonText: "确定",
+            });
+            return;
+          }
+        }
+      }
+      if (!this.fileList[0]) {
+        this.$alert("请选择xml文件！", "提示", { confirmButtonText: "确定" });
+        return;
+      } else {
+        fd.append("file", this.fileList[0]);
+      }
+      var userid = sessionStorage.getItem("access-id");
+      var configString = {
+        name: this.xmlform.xmlname,
+        key: this.xmlform.xmlkey,
+        id: userid,
+        introduction: this.xmlform.introduction,
+        taskUploadTime: this.xmlform.xmltaskUploadTime,
+      };
+      fd.append("configString", JSON.stringify(configString));
+      let that = this;
+      axios({
+        url: "/task/createTaskByXmlFile",
+        method: "post",
+        data: fd,
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      }).then(function (response) {
+        if (response.data.success == true) {
+          that.xmlDialogVisible = false;
+          that.$notify.success({
+            title: "提示",
+            message: "任务上传成功！",
+          });
+          that.init();
+        } else {
+          if (response.data.status == 400) {
+            that.$notify.error({
+              title: "提示",
+              message: response.data.message,
+            });
+          } else {
+            that.$notify.error({
+              title: "提示",
+              message: "上传出错",
+            });
+          }
+        }
+      });
+    },
+    beforeAvatarUpload(file) {
+      if (file.type != "xml") {
+        this.$message.error("只能上传xml格式数据!");
+        return false;
+      }
+      return true;
+    },
+    getFile(file) {
+      this.fileList = [];
+      this.fileList.push(file.raw);
+    },
+    removeFile() {
+      this.fileList = [];
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  store,
+  watch: {
+    "form.key": {
+      handler() {
+        let reg = /[^\w_]+$/;
+        if (reg.test(this.form.key)) {
+          this.$alert("数据库名称只可为字母、数字、下划线组合！", "提示", {
+            confirmButtonText: "确定",
+          });
+        }
+        this.form.key = this.form.key.replace(/[^\w_]/g, "");
+      },
+      deep: true,
+    },
+    "xmlform.xmlkey": {
+      handler() {
+        let reg = /[^\w_]+$/;
+        if (reg.test(this.xmlform.xmlkey)) {
+          this.$alert("数据库名称只可为字母、数字、下划线组合！", "提示", {
+            confirmButtonText: "确定",
+          });
+        }
+        this.xmlform.xmlkey = this.xmlform.xmlkey.replace(/[^\w_]/g, "");
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+#buttomContain {
+  right: 25px;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-between; /* 让搜索容器和按钮分别靠左和靠右 */
+  width: calc(100% - 50px); /* 设置容器宽度，减去左右边距 */
+}
+
+.search-container {
+  /* 移除右边距，让搜索容器靠左 */
+}
+
+#tableStyle {
+  top: 40px;
+  margin-bottom: 30px;
+}
+</style>

src/components/TaskManagement/xml/position.vue

@@ -0,0 +1,197 @@
+<template>
+  <div id="tablecontainer">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="定位方式" name="first"></el-tab-pane>
+      <el-main>
+        <el-checkbox-group
+          v-model="checkList"
+          style="margin-top: 30px"
+          @change="changePosition"
+        >
+          <ul>
+            <el-checkbox label="gps" border style="width: 160px"
+              >GPS定位</el-checkbox
+            >
+          </ul>
+          <ul>
+            <el-checkbox
+              label="network"
+              border
+              style="margin-top: 10px; width: 160px"
+              >网络</el-checkbox
+            >
+          </ul>
+          <ul>
+            <el-checkbox
+              label="bluetooth"
+              border
+              style="margin-top: 10px; width: 160px"
+              >蓝牙</el-checkbox
+            >
+          </ul>
+          <ul>
+            <el-checkbox
+              label="baidu"
+              border
+              style="margin-top: 10px; width: 160px"
+              >百度</el-checkbox
+            >
+          </ul>
+          <ul>
+            <el-checkbox
+              label="auto"
+              border
+              style="margin-top: 10px; width: 160px"
+              >自动</el-checkbox
+            >
+          </ul>
+        </el-checkbox-group>
+        <el-button
+          id="buttonStyle"
+          size="small"
+          style="margin-top: 30px; margin-left: 40px"
+          v-if="getInfo == '1'"
+          @click="backUploadData(checkList)"
+          >上一步</el-button
+        >
+        <el-button
+          id="buttonStyle"
+          size="small"
+          style="margin-top: 30px"
+          v-if="getInfo == '1'"
+          @click="UploadData(checkList)"
+          >保存并下一步</el-button
+        >
+      </el-main>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { store } from "@/components/vuex/store.js";
+export default {
+  data() {
+    return {
+      getInfo: sessionStorage.getItem("getInfo"),
+      activeName: "first",
+      checkList: [],
+      checkList1: [],
+
+      position: [],
+      id: "",
+      name: "",
+      key: "",
+    };
+  },
+  methods: {
+    init() {
+      let that = this;
+      let config = sessionStorage["Data"];
+      if (config) {
+        config = JSON.parse(config);
+        this.position = config.meta.position;
+      } else {
+        if (that.$store.state.config.meta.position)
+          this.position = that.$store.state.config.meta.position;
+      }
+      if (this.position.length > 0) {
+        for (var i = 0; i < this.position.length; i++) {
+          var select = this.position[i].name;
+          this.checkList.push(select);
+          this.checkList1.push(select);
+        }
+      }
+    },
+    backUploadData(checkList) {
+      let that = this;
+      //传入position
+      that.position = [];
+      for (var j = 0; j < that.checkList.length; j++) {
+        var name1 = that.checkList[j];
+        var draw = {
+          name: name1,
+        };
+        that.position.push(draw);
+      }
+      that.$store.dispatch("updatePosition1", { position: that.position });
+      that.$notify.success({
+        title: "提示",
+        message: "保存成功",
+      });
+      this.$router.push({
+        path:
+          "/home/" + this.name + "/" + this.key + "/" + this.id + "/drawtool",
+      });
+    },
+    UploadData(checkList) {
+      let that = this;
+      //传入position
+      that.position = [];
+      for (var j = 0; j < that.checkList.length; j++) {
+        var name1 = that.checkList[j];
+        var draw = {
+          name: name1,
+        };
+        that.position.push(draw);
+      }
+      that.$store.dispatch("updatePosition1", { position: that.position });
+      that.$notify.success({
+        title: "提示",
+        message: "保存成功",
+      });
+      this.$router.push({
+        path:
+          "/home/" + this.name + "/" + this.key + "/" + this.id + "/basemap",
+      });
+    },
+    changePosition() {
+      if (this.getInfo != 1) {
+        this.checkList = this.checkList1;
+      }
+    },
+  },
+  watch: {
+    //用watch监听变化
+    $route: {
+      handler(to, from) {
+        this.id = to.params.id;
+        this.key = to.params.key;
+        this.name = to.params.name;
+      },
+      immediate: true,
+    },
+  },
+  store,
+  mounted: function () {
+    this.init();
+  },
+};
+</script>
+<style scoped>
+@media screen and (min-height: 800px) {
+  #checkcontainer {
+    height: 500px !important;
+  }
+}
+@media screen and (min-height: 700px) and (max-height: 800px) {
+  #checkcontainer {
+    height: 400px !important;
+  }
+}
+@media screen and (min-height: 600px) and (max-height: 700px) {
+  #checkcontainer {
+    height: 350px !important;
+  }
+}
+@media screen and (min-height: 500px) and (max-height: 600px) {
+  #checkcontainer {
+    height: 300px !important;
+  }
+}
+@media screen and (max-height: 500px) {
+  #checkcontainer {
+    height: 250px !important;
+  }
+}
+</style>
+

src/components/login/Addinfo.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="container">
+    <div class="register-main">
+      <div class="header-title">
+        <span class="left-text">完善信息</span>
+      </div>
+      <el-row :gutter="10" class="register-body">
+        <el-col
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="12"
+          class="el-col-sm-push-6 el-col-md-push-6 el-col-lg-push-6"
+        >
+          <el-form
+            ref="account"
+            :model="account"
+            :rules="rules"
+            label-width="100px"
+          >
+            <el-form-item prop="username" label="用户名：">
+              <el-input
+                type="text"
+                v-model="account.username"
+                auto-complete="off"
+                :autofocus="true"
+                placeholder="请输入用户名"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="phone" label="手机号：">
+              <el-input
+                type="text"
+                v-model="account.phone"
+                auto-complete="off"
+                :autofocus="true"
+                placeholder="请输入手机号"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="email" label="邮箱：">
+              <el-input
+                type="text"
+                v-model="account.email"
+                auto-complete="off"
+                :autofocus="true"
+                placeholder="请输入邮箱"
+                @change="time = 0"
+              ></el-input>
+            </el-form-item>
+            <el-form-item style="margin-bottom: 0; width: 100%">
+              <el-button
+                type="primary"
+                style="width: 100%"
+                @click.native.prevent="handleModify"
+                :loading="loading"
+                >确定</el-button
+              >
+            </el-form-item>
+            <el-form-item class="extra-text">
+              <router-link
+                :to="{ path: '/login' }"
+                class="login-text"
+                title="立即登录"
+                >返回登录</router-link
+              >
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+import { ajax as request } from "@/request.js";
+export default {
+  data() {
+    var validemail = (rule, value, callback) => {
+      var regEmail =
+        /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
+      if (!regEmail.test(value)) {
+        callback(new Error("邮箱格式不正确"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      loading: false,
+      account: {
+        username: "",
+        phone: "",
+        email: "",
+      },
+      rules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
+        ],
+        phone: [
+          { required: true, message: "请输入手机号", trigger: "blur" },
+          { min: 11, max: 11, message: "请输入11位手机号", trigger: "blur" },
+        ],
+        email: [
+          { required: true, message: "请输入邮箱", trigger: "blur" },
+          { validator: validemail, trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleModify() {
+      this.$refs.account.validate((valid) => {
+        if (valid) {
+          let that = this;
+          request({
+            url: "/user/update",
+            method: "post",
+            params: {
+              username: that.account.username,
+              phone: that.account.phone,
+              email: that.account.email,
+            },
+          }).then(function (response) {
+            //获取数据存入config
+            if (response.data.success == true) {
+              that.$router.push({ path: "/login" });
+              that.$notify.success({
+                title: "提示",
+                message: "成功！",
+              });
+            } else {
+              that.$notify.error({
+                title: "提示",
+                message: response.data.message,
+              });
+            }
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  watch: {
+    account: {
+      handler() {
+        if (this.account.phone != "") {
+          var reg = /\D/;
+          if (reg.test(this.account.phone)) {
+            this.$message.info("手机号只可为数字");
+          }
+          this.account.phone = this.account.phone.replace(/\D/, "");
+        }
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+#app {
+  margin-top: 0 !important;
+}
+.container {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background-color: #2d3a4b;
+}
+.register-main {
+  margin: 200px auto;
+  padding: 18px;
+  max-width: 836px;
+  min-width: 280px;
+  background-clip: padding-box;
+  background: #f2f6fc;
+  border: 1px solid #eaeaea;
+
+  background: -ms-linear-gradient(top, #ace, #00c1de); /* IE 10 */
+  background: -moz-linear-gradient(top, #ace, #00c1de); /*火狐*/
+  background: -webkit-gradient(
+    linear,
+    0% 0%,
+    0% 100%,
+    from(#ace),
+    to(#00c1de)
+  ); /*谷歌*/
+  background: -webkit-linear-gradient(
+    top,
+    #ace,
+    #00c1de
+  ); /*Safari5.1 Chrome 10+*/
+  background: -o-linear-gradient(top, #ace, #00c1de); /*Opera 11.10+*/
+}
+
+.header-title {
+  position: relative;
+  padding: 15px 10px 15px;
+  border-bottom: 5px solid #ccc;
+
+  .left-text {
+    font-size: 1.7rem;
+    color: #444;
+  }
+
+  .right-text {
+    position: absolute;
+    top: 18px;
+    right: 10px;
+    font-size: 1.28rem;
+  }
+}
+
+.register-body {
+  padding: 40px 3%;
+}
+.extra-text {
+  position: relative;
+  margin-bottom: 0;
+  padding-left: 2px;
+}
+
+.login-text {
+  position: absolute;
+  top: 4px;
+  right: 2px;
+  font-size: 12px;
+  color: #aaa;
+}
+
+@media all and (max-width: 768px) {
+  .register-main {
+    margin: 0 auto 24px;
+  }
+}
+</style>

src/components/login/ForgetPassword.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="container">
+    <div class="register-main">
+      <div class="header-title">
+        <span class="left-text">忘记密码</span>
+      </div>
+      <el-row :gutter="10" class="register-body">
+        <el-col
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="12"
+          class="el-col-sm-push-6 el-col-md-push-6 el-col-lg-push-6"
+        >
+          <el-form ref="account" :model="account" :rules="rules" label-width="100px">
+            <el-form-item prop="email" label="邮箱：">
+              <el-input
+                type="text"
+                v-model="account.email"
+                auto-complete="off"
+                :autofocus="true"
+                placeholder="请输入注册邮箱"
+                @change="time=0"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="password" label="新密码：">
+              <el-input
+                type="text"
+                v-model="account.password"
+                auto-complete="off"
+                :autofocus="true"
+                placeholder="请输入新密码"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="code" label="验证码：">
+              <el-input
+                type="text"
+                style="width:48%;"
+                v-model="account.code"
+                auto-complete="off"
+                :autofocus="true"
+                placeholder="请输入验证码"
+              ></el-input>
+              <el-button
+                type="primary"
+                plain
+                :disabled="disabled"
+                style="width:50%;"
+                @click.native.prevent="sendcode"
+                :loading="loading"
+              >{{btntxt}}</el-button>
+            </el-form-item>
+            <el-form-item style="margin-bottom:0; width:100%;">
+              <el-button
+                type="primary"
+                style="width:100%;"
+                @click.native.prevent="handleModify"
+                :loading="loading"
+              >确定</el-button>
+            </el-form-item>
+            <el-form-item class="extra-text">
+              <router-link :to="{path: '/login'}" class="login-text" title="立即登录">返回登录</router-link>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+import { ajax as request } from "@/request.js";
+import md5 from "js-md5";
+export default {
+  data() {
+    var validpassword = (rule, value, callback) => {
+      let reg = /[0-9a-zA-Z]{6,18}/;
+      if (!reg.test(value)) {
+        callback(new Error("密码必须是由6-18位数字和字母组合"));
+      } else {
+        callback();
+      }
+    };
+    var validemail = (rule, value, callback) => {
+      var regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
+      if (!regEmail.test(value)) {
+        callback(new Error("邮箱格式不正确"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      disabled: false,
+      loading: false,
+      time: 0,
+      btntxt: "获取验证码",
+      account: {
+        password: "",
+        phone: "",
+        email: "",
+        code: ""
+      },
+      rules: {
+        password: [
+          { required: true, message: "请输入新密码", trigger: "blur" },
+          { validator: validpassword, trigger: "blur" }
+        ],
+        phone: [
+          { required: true, message: "请输入注册手机号", trigger: "blur" },
+          { min: 11, max: 11, message: "请输入11位手机号", trigger: "blur" }
+        ],
+        email: [
+          { required: true, message: "请输入注册邮箱", trigger: "blur" },
+          { validator: validemail, trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {},
+  methods: {
+    sendcode() {
+      this.time = 60;
+      this.disabled = true;
+      this.timer();
+      //向后台发送邮箱地址 接收返回值
+      let that = this;
+      request({
+        url: "/user/password_recover/authentication",
+        method: "post",
+        params: {
+          email: that.account.email
+        }
+      }).then(function(response) {
+        if (response.data.success == true) {
+          that.$notify.success({
+            title: "提示",
+            message: "验证码已发送！"
+          });
+        }
+      });
+    },
+    timer() {
+      if (this.time > 0) {
+        this.time--;
+        this.btntxt = this.time + "s后重新获取";
+        setTimeout(this.timer, 1000);
+      } else {
+        this.time = 0;
+        this.btntxt = "获取验证码";
+        this.disabled = false;
+      }
+    },
+    handleModify() {
+      this.$refs.account.validate(valid => {
+        if (valid) {
+          //判断验证码是否正确 发送用户名、新旧密码、手机号给后台
+          let that = this;
+          request({
+            url: " /user/password_recover/action",
+            method: "post",
+            params: {
+              email: that.account.email,
+              newPassword: md5(md5(that.account.password)),
+              code: that.account.code
+            }
+          }).then(function(response) {
+            //获取数据存入config
+            if (response.data.success == true) {
+              that.$notify.success({
+                title: "提示",
+                message: "修改成功！"
+              });
+              that.$router.push({ path: "/login" });
+            } else {
+              that.$notify.error({
+                title: "提示",
+                message: response.data.message
+              });
+            }
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+#app {
+  margin-top: 0 !important;
+}
+.container {
+  position: fixed;
+  height: 100%;
+  width: 100%; 
+  background: url(../../assets/images/background.jpg) no-repeat; 
+  background-size:100% 100%; 
+  background-attachment:fixed
+}
+.register-main {
+  margin: 180px auto;
+  padding: 18px;
+  max-width: 736px;
+  min-width: 280px;
+
+  background: #F7F8F1;
+  box-shadow: 0 2px 40px 0 rgba(157,187,231,0.50);
+  border-radius: 4px;
+  border-radius: 4px;
+
+  background: -ms-linear-gradient(top, #ace, #00c1de); /* IE 10 */
+  background: -moz-linear-gradient(top, #ace, #00c1de); /*火狐*/
+  background: -webkit-gradient(
+    linear,
+    0% 0%,
+    0% 100%,
+    from(#ace),
+    to(#00c1de)
+  ); /*谷歌*/
+  background: -webkit-linear-gradient(
+    top,
+    #ace,
+    #00c1de
+  ); /*Safari5.1 Chrome 10+*/
+  background: -o-linear-gradient(top, #ace, #00c1de); /*Opera 11.10+*/
+}
+
+.header-title {
+  position: relative;
+  padding: 15px 10px 15px;
+  border-bottom: 5px solid #264672;
+
+  .left-text {
+    font-family: PingFangSC-Regular;
+    font-size: 20px;
+    color: #264672;
+  }
+}
+.el-form-item__label {
+    color: #264672 !important;
+}
+.el-input__inner {
+  &::placeholder {
+    font-family: PingFangSC-Regular;
+  }
+}
+
+.register-body {
+  padding: 40px 3%;
+}
+.extra-text {
+  position: relative;
+  margin-bottom: 0;
+  padding-left: 2px;
+}
+
+.login-text {
+  position: absolute;
+  top: 4px;
+  right: 2px;
+  font-size: 12px;
+  color: #aaa;
+}
+
+@media all and (max-width: 768px) {
+  .register-main {
+    margin: 0 auto 24px;
+  }
+}
+</style>

src/components/login/ModifyPassword.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="container">
+    <div class="register-main">
+      <div class="header-title">
+        <span class="left-text">修改密码</span>
+      </div>
+      <el-row :gutter="10" class="register-body">
+        <el-col
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="12"
+          class="el-col-sm-push-6 el-col-md-push-6 el-col-lg-push-6"
+        >
+          <el-form ref="account" :model="account" :rules="rules" label-width="100px">
+            <el-form-item prop="username" label="用户名：">
+              <el-input
+                type="text"
+                v-model="account.username"
+                auto-complete="off"
+                :autofocus="true"
+                placeholder="请输入用户名"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="password" label="旧密码：">
+              <el-input
+                type="password"
+                v-model="account.password"
+                auto-complete="off"
+                :autofocus="true"
+                placeholder="请输入旧密码"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="password1" label="新密码：">
+              <el-input
+                type="password"
+                v-model="account.password1"
+                auto-complete="off"
+                :autofocus="true"
+                placeholder="请输入新密码"
+              ></el-input>
+            </el-form-item>
+            <el-form-item prop="password2" label="确认密码：">
+              <el-input
+                type="password"
+                v-model="account.password2"
+                auto-complete="off"
+                :autofocus="true"
+                placeholder="请确认密码"
+              ></el-input>
+            </el-form-item>
+            <el-form-item style="margin-bottom:0; width:100%;">
+              <el-button
+                type="primary"
+                style="width:100%;"
+                @click.native.prevent="handleModify"
+                :loading="loading"
+              >确定</el-button>
+            </el-form-item>
+            <el-form-item class="extra-text">
+              <router-link :to="{path: '/login'}" class="login-text" title="立即登录">返回登录</router-link>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+import { ajax as request } from "@/request.js";
+import md5 from "js-md5";
+export default {
+  data() {
+    var validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.account.password1) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    var validpassword = (rule, value, callback) => {
+      let reg = /[0-9a-zA-Z]{6,18}/;
+      if (!reg.test(value)) {
+        callback(new Error("密码必须是由6-18位数字和字母组合"));
+      } else {
+        callback();
+      }
+    };
+
+    var validemail = (rule, value, callback) => {
+      var regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
+      if (!regEmail.test(value)) {
+        callback(new Error("邮箱格式不正确"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      disabled: false,
+      loading: false,
+      time: 0,
+      btntxt: "获取验证码",
+      account: {
+        username: "",
+        password: "",
+        password1: "",
+        password2: ""
+        /*               phone:'',
+                email:'',
+                code:''*/
+      },
+      rules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
+        ],
+        password: [
+          { required: true, message: "请输入旧密码", trigger: "blur" },
+          { validator: validpassword, trigger: "blur" }
+        ],
+        password1: [
+          { required: true, message: "请输入新密码", trigger: "blur" },
+          { validator: validatePass, trigger: "blur" },
+          { validator: validpassword, trigger: "blur" }
+        ],
+        password2: [
+          { required: true, message: "请再次输入密码", trigger: "blur" },
+          { validator: validatePass, trigger: "blur" }
+        ]
+        /*                phone:[
+                  { required: true, message: '请输入注册手机号', trigger: 'blur' },
+                  { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
+                ],
+                email:[
+                  { required: true, message: '请输入注册邮箱', trigger: 'blur' },
+                  { validator: validemail, trigger: 'blur' }
+                ]*/
+      }
+    };
+  },
+  created() {},
+  methods: {
+    /*        sendcode(){
+            this.time=60;
+            this.disabled=true;
+            this.timer();
+            //向后台发送邮箱地址 接收返回值
+        },
+        timer(){
+            if (this.time > 0) {
+                    this.time--;
+                    this.btntxt=this.time+"s后重新获取";
+                    setTimeout(this.timer, 1000);
+            } else{
+                    this.time=0;
+                    this.btntxt="获取验证码";
+                    this.disabled=false;
+            }
+        },*/
+    handleModify() {
+      this.$refs.account.validate(valid => {
+        if (valid) {
+          //判断验证码是否正确 发送用户名、新旧密码、手机号给后台
+          let that = this;
+          request({
+            url: "/user/password_reset",
+            method: "post",
+            params: {
+              username: that.account.username,
+              oldPassword: md5(md5(that.account.password)),
+              newPassword: md5(md5(that.account.password1))
+            }
+          }).then(function(response) {
+            //获取数据存入config
+            if (response.data.success == true) {
+              that.$notify.success({
+                title: "提示",
+                message: "修改成功！"
+              });
+              that.$router.push({ path: "/login" });
+            } else {
+              that.$notify.error({
+                title: "提示",
+                message: response.data.message
+              });
+            }
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+#app {
+  margin-top: 0 !important;
+}
+.container {
+  position: fixed;
+  height: 100%;
+  width: 100%; 
+  background: url(../../assets/images/background.jpg) no-repeat; 
+  background-size:100% 100%; 
+  background-attachment:fixed
+}
+.register-main {
+  margin: 150px auto;
+  padding: 18px;
+  max-width: 736px;
+  min-width: 280px;
+  background: #F7F8F1;
+  box-shadow: 0 2px 40px 0 rgba(157,187,231,0.50);
+  border-radius: 4px;
+  border-radius: 4px;
+
+  background: -ms-linear-gradient(top, #ace, #00c1de); /* IE 10 */
+  background: -moz-linear-gradient(top, #ace, #00c1de); /*火狐*/
+  background: -webkit-gradient(
+    linear,
+    0% 0%,
+    0% 100%,
+    from(#ace),
+    to(#00c1de)
+  ); /*谷歌*/
+  background: -webkit-linear-gradient(
+    top,
+    #ace,
+    #00c1de
+  ); /*Safari5.1 Chrome 10+*/
+  background: -o-linear-gradient(top, #ace, #00c1de); /*Opera 11.10+*/
+}
+
+.header-title {
+  position: relative;
+  padding: 15px 10px 15px;
+  border-bottom: 5px solid #264672;
+
+  .left-text {
+    font-family: PingFangSC-Regular;
+    font-size: 20px;
+    color: #264672;
+  }
+}
+.el-form-item__label {
+    color: #264672 !important;
+}
+.el-input__inner {
+  &::placeholder {
+    font-family: PingFangSC-Regular;
+  }
+}
+
+.register-body {
+  padding: 40px 3%;
+}
+.extra-text {
+  position: relative;
+  margin-bottom: 0;
+  padding-left: 2px;
+}
+
+.login-text {
+  position: absolute;
+  top: 4px;
+  right: 2px;
+  font-size: 12px;
+  color: #aaa;
+}
+
+@media all and (max-width: 768px) {
+  .register-main {
+    margin: 0 auto 24px;
+  }
+}
+</style>

src/components/login/login.vue

@@ -0,0 +1,332 @@
+<template>
+  <div class="login-container">
+    <img
+      style="position: fixed; width: 100%; height: 100%; z-index: -1; left: 0"
+      src="../../assets/images/background.jpg"
+    />
+    <el-form
+      autocomplete="on"
+      :model="loginForm"
+      :rules="loginRules"
+      ref="loginForm"
+      label-position="left"
+      label-width="0px"
+      class="card-box login-form"
+    >
+      <p class="title">{{ myname }}</p>
+      <el-form-item prop="username">
+        <span class="svg-container svg-container_login">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          name="username"
+          type="text"
+          v-model="loginForm.username"
+          autocomplete="on"
+          placeholder="用户名"
+        />
+      </el-form-item>
+      <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password"></svg-icon>
+        </span>
+        <el-input
+          name="password"
+          :type="pwdType"
+          @keyup.enter.native="handleLogin"
+          v-model="loginForm.password"
+          autocomplete="on"
+          placeholder="密码"
+        ></el-input>
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon v-show="pwdType == 'password'" icon-class="eye" />
+          <svg-icon v-show="pwdType == ''" icon-class="eye2" />
+        </span>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          class="loginbutton"
+          :loading="loading"
+          @click.native.prevent="handleLogin"
+          >登录</el-button
+        >
+      </el-form-item>
+      <el-form-item>
+        <el-button class="loginbutton" @click.native.prevent="toRegister"
+          >注册</el-button
+        >
+      </el-form-item>
+      <div class="extra-text">
+        <router-link
+          :to="{ path: '/modifypassword' }"
+          class="login-text1"
+          title="修改密码"
+          >修改密码</router-link
+        >
+        <router-link
+          :to="{ path: '/forgetpassword' }"
+          class="login-text"
+          title="忘记密码"
+          >忘记密码</router-link
+        >
+      </div>
+    </el-form>
+    <span style="position: fixed; bottom: 10px; left: 10px; color: lightgray"
+      >6.12</span
+    >
+  </div>
+</template>
+
+<script>
+import { ajax as request } from "@/request.js";
+import md5 from "js-md5";
+export default {
+  name: "login",
+  data() {
+    const validatePass = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error("密码不能小于6位"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      myname: myname,
+      loginForm: {
+        username: "",
+        password: "",
+      },
+      loginRules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          // { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
+        ],
+        password: [
+          { required: true, trigger: "blur", validator: validatePass },
+        ],
+      },
+      loading: false,
+      pwdType: "password",
+    };
+  },
+  methods: {
+    showPwd() {
+      if (this.pwdType === "password") {
+        this.pwdType = "";
+      } else {
+        this.pwdType = "password";
+      }
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          let that = this;
+          that.loading = true;
+
+          // sessionStorage.setItem("access-user", "Admin");
+          // that.$router.push({ path: "/view" });
+          request({
+            url: "/user/login",
+            method: "post",
+            params: {
+              username: that.loginForm.username,
+              password: md5(md5(that.loginForm.password)),
+            },
+          }).then(function (response) {
+            //获取数据存入config
+            if (response.data.success == true) {
+              sessionStorage.setItem("access-user", response.data.data.role);
+              sessionStorage.setItem("access-id", response.data.data.id);
+              if (
+                sessionStorage.getItem("access-user") == "Admin" ||
+                sessionStorage.getItem("access-user") == "SuperAdmin" ||
+                sessionStorage.getItem("access-user") == "Leader"
+              ) {
+                that.loading = false;
+                that.$router.push({ path: "/view" });
+              } else if (sessionStorage.getItem("access-user") == "Operator") {
+                that.loading = false;
+                that.$router.push({ path: "/main" });
+              } else {
+                that.$notify.error({
+                  title: "提示",
+                  message: "用户不可登录该系统！",
+                });
+                that.loading = false;
+              }
+            } else if (response.data.status == "204") {
+              that
+                .$confirm("用户信息不完善，是否去完善信息？", "提示", {
+                  cancelButtonText: "取消",
+                  confirmButtonText: "确定",
+                  type: "warning",
+                })
+                .then(() => {
+                  that.loading = false;
+                  that.$router.push({ path: "/addinfo" });
+                })
+                .catch(() => {
+                  that.loading = false;
+                  that.$notify.error({
+                    title: "提示",
+                    message: "登录失败",
+                  });
+                });
+            } else {
+              that.$notify.error({
+                title: "提示",
+                message: response.data.message,
+              });
+              that.loading = false;
+            }
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    toRegister() {
+      this.$router.push({ path: "/register" });
+    },
+  },
+};
+</script>
+
+<style scoped rel="stylesheet/scss" lang="scss">
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+.login-container {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  /*background: url(../../assets/images/background.jpg) no-repeat; 
+  background-size:100% 100%; 
+  background-attachment:fixed;*/
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+  }
+  .svg-container {
+    color: #264672;
+    vertical-align: middle;
+    padding: 6px 0px 6px 0px;
+    vertical-align: middle;
+    width: 14.5px;
+    display: inline-block;
+    &_login {
+      font-size: 20px;
+    }
+  }
+  .title {
+    font-family: PingFangSC-Regular;
+    font-size: 20px;
+    color: #264672;
+    background: rgba(157, 187, 231, 0.1);
+    width: 402px;
+    height: 80px;
+    line-height: 80px;
+    margin-top: 0px;
+  }
+  .el-form-item {
+    margin-left: 21px;
+    margin-top: 24px;
+    width: 360px;
+    height: 50px;
+    background: rgba(157, 187, 231, 0.3) !important;
+    border-radius: 4px !important;
+  }
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+  }
+  input {
+    background: transparent;
+    border: 0px;
+    padding: 12px 0px 12px 10.8px;
+    font-family: PingFangSC-Regular;
+    font-size: 16px;
+    color: #264672;
+  }
+  .el-input__inner {
+    &::placeholder {
+      color: #264672;
+      font-family: PingFangSC-Regular;
+      font-size: 16px;
+    }
+  }
+  .login-form {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: 150px auto;
+    //opacity: 0.9;
+    background: rgba(247, 248, 241, 0.9);
+    box-shadow: 0 2px 40px 0 rgba(157, 187, 231, 0.5);
+    border-radius: 4px;
+    border-radius: 4px;
+    width: 402px;
+    height: 438px;
+  }
+  .loginbutton {
+    width: 360px;
+    height: 50px;
+    margin-bottom: 24px;
+    margin-top: 0px;
+    background: #9dbbe7 !important;
+    border-color: #9dbbe7 !important;
+    border-radius: 4px;
+    font-family: PingFangSC-Regular;
+    font-size: 16px;
+    color: #ffffff;
+    letter-spacing: 0;
+    text-align: center;
+  }
+  .login-text1 {
+    position: absolute;
+    left: 21px;
+    font-size: 12px;
+    color: #aaa;
+    font-family: PingFangSC-Regular;
+  }
+  .login-text {
+    position: absolute;
+    right: 21px;
+    font-size: 12px;
+    color: #aaa;
+    font-family: PingFangSC-Regular;
+  }
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: #889aa4;
+    cursor: pointer;
+    user-select: none;
+  }
+  .extra-text {
+    position: relative;
+    margin-bottom: 0;
+    padding-left: 2px;
+  }
+}
+@media all and (max-width: 480px) {
+  .login-form {
+    width: 300px !important;
+  }
+  .login-container .loginbutton {
+    width: 260px !important;
+  }
+  .login-container .el-form-item {
+    width: 260px !important;
+  }
+}
+</style>

src/components/login/register.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="container">
+    <div style="height: 80%; position: relative">
+      <div class="register-main" style="overflow-y: hidden; overflow-y: scroll">
+        <div style="height: 400px">
+          <div class="header-title">
+            <span class="left-text">注册账号</span>
+          </div>
+          <el-row :gutter="10" class="register-body">
+            <el-col
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="12"
+              class="el-col-sm-push-6 el-col-md-push-6 el-col-lg-push-6"
+            >
+              <el-form
+                ref="account"
+                :model="account"
+                :rules="rules"
+                label-width="100px"
+              >
+                <el-form-item prop="username" label="用户名：">
+                  <el-input
+                    type="text"
+                    v-model="account.username"
+                    auto-complete="off"
+                    :autofocus="true"
+                    placeholder="请输入用户名"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item prop="realName" label="真实姓名：">
+                  <el-input
+                    type="text"
+                    v-model="account.realName"
+                    auto-complete="off"
+                    :autofocus="true"
+                    placeholder="请输入真实姓名"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item prop="password" label="密码：">
+                  <el-input
+                    type="password"
+                    v-model="account.password"
+                    auto-complete="off"
+                    :autofocus="true"
+                    placeholder="请输入密码"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item prop="password1" label="确认密码：">
+                  <el-input
+                    type="password"
+                    v-model="account.password1"
+                    auto-complete="off"
+                    :autofocus="true"
+                    placeholder="请确认密码"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item prop="phone" label="手机号：">
+                  <el-input
+                    type="text"
+                    v-model="account.phone"
+                    auto-complete="off"
+                    :autofocus="true"
+                    placeholder="请输入注册手机号"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item prop="email" label="邮箱：">
+                  <el-input
+                    type="text"
+                    v-model="account.email"
+                    auto-complete="off"
+                    :autofocus="true"
+                    placeholder="请输入注册邮箱"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item class="code" prop="code" label="邀请码：">
+                  <el-input
+                    type="text"
+                    v-model="account.code"
+                    auto-complete="off"
+                    placeholder="请输入邀请码"
+                  ></el-input>
+                </el-form-item>
+                <el-form-item style="margin-bottom: 0; width: 100%">
+                  <el-button
+                    type="primary"
+                    style="width: 100%"
+                    @click.native.prevent="handleRegister"
+                    :loading="loading"
+                    >注册</el-button
+                  >
+                </el-form-item>
+                <el-form-item class="extra-text">
+                  <router-link
+                    :to="{ path: '/login' }"
+                    class="login-text"
+                    title="立即登录"
+                    >已经拥有账户？登录</router-link
+                  >
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { ajax as request } from "@/request.js";
+import md5 from "js-md5";
+export default {
+  data() {
+    var validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.account.password) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    var validpassword = (rule, value, callback) => {
+      let reg = /[0-9a-zA-Z]{6,18}/;
+      if (!reg.test(value)) {
+        callback(new Error("密码必须是由6-18位数字和字母组合"));
+      } else {
+        callback();
+      }
+    };
+    var validemail = (rule, value, callback) => {
+      var regEmail =
+        /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
+      if (!regEmail.test(value)) {
+        callback(new Error("邮箱格式不正确"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      loading: false,
+      account: {
+        username: "",
+        password: "",
+        password1: "",
+        realName: "",
+        phone: "",
+        email: "",
+        code: "",
+      },
+      rules: {
+        username: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          //   { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
+        ],
+        realName: [
+          { required: true, message: "请输入真实姓名", trigger: "blur" },
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
+          { validator: validpassword, trigger: "blur" },
+        ],
+        code: [{ required: true, message: "请输入邀请码", trigger: "blur" }],
+        password1: [
+          { required: true, message: "请再次输入密码", trigger: "blur" },
+          { validator: validatePass, trigger: "blur" },
+        ],
+        phone: [
+          { required: true, message: "请输入手机号", trigger: "blur" },
+          { min: 11, max: 11, message: "请输入11位手机号", trigger: "blur" },
+        ],
+        email: [
+          { required: true, message: "请输入邮箱", trigger: "blur" },
+          { validator: validemail, trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {},
+  methods: {
+    handleRegister() {
+      //注册
+      this.$refs.account.validate((valid) => {
+        if (valid) {
+          let that = this;
+          request({
+            url: "/user/register",
+            method: "post",
+            params: {
+              username: that.account.username,
+              realName: that.account.realName,
+              password: md5(md5(that.account.password)),
+              phone: that.account.phone,
+              email: that.account.email,
+              code: that.account.code,
+            },
+          }).then(function (response) {
+            //获取数据存入config
+            if (response.data.success == true) {
+              that.$notify.success({
+                title: "提示",
+                message: "注册成功！",
+              });
+              that.loading = true;
+              that.$router.push({ path: "/login" });
+            } else {
+              that.$notify.error({
+                title: "提示",
+                message: response.data.message,
+              });
+            }
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+body {
+  margin: 0px;
+  background: url(../../assets/images/background.jpg) no-repeat;
+  background-size: 100% 100%;
+  background-attachment: fixed;
+}
+.container {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background: url(../../assets/images/background.jpg) no-repeat;
+  background-size: 100% 100%;
+  background-attachment: fixed;
+}
+.register-main {
+  margin-top: 150px;
+  position: absolute;
+  padding: 18px;
+  margin-left: 18%;
+  width: 64%;
+  height: 80%;
+  background: #f7f8f1;
+  box-shadow: 0 2px 40px 0 rgba(157, 187, 231, 0.5);
+  border-radius: 4px;
+  border-radius: 4px;
+
+  background: -ms-linear-gradient(top, #ace, #00c1de); /* IE 10 */
+  background: -moz-linear-gradient(top, #ace, #00c1de); /*火狐*/
+  background: -webkit-gradient(
+    linear,
+    0% 0%,
+    0% 100%,
+    from(#ace),
+    to(#00c1de)
+  ); /*谷歌*/
+  background: -webkit-linear-gradient(top, #ace, #00c1de);
+  background: -o-linear-gradient(top, #ace, #00c1de); /*Opera 11.10+*/
+}
+
+.header-title {
+  position: relative;
+  padding: 15px 10px 15px;
+  border-bottom: 5px solid #264672;
+
+  .left-text {
+    font-family: PingFangSC-Regular;
+    font-size: 20px;
+    color: #264672;
+  }
+}
+.el-form-item__label {
+  color: #264672 !important;
+}
+.el-input__inner {
+  &::placeholder {
+    font-family: PingFangSC-Regular;
+  }
+}
+
+.register-body {
+  padding: 40px 3%;
+}
+.extra-text {
+  position: relative;
+  margin-bottom: 0;
+  padding-left: 2px;
+}
+
+.login-text {
+  position: absolute;
+  top: 4px;
+  right: 2px;
+  font-size: 12px;
+  color: #aaa;
+}
+
+@media all and (max-width: 768px) {
+  .register-main {
+    margin: 20 auto 24px;
+  }
+}
+</style>

src/components/vuex/store.js

@@ -0,0 +1,93 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+export const store = new Vuex.Store({
+  state: {
+    config: {
+      meta: {
+        drawtool: {},
+        position: [],
+        basemap: [],
+      },
+      tables: [],
+    },
+    LocalLocation: {
+      currentPosition: '',
+      currentLocation: ''
+    }
+  },
+  mutations: {
+    updateDrawtool(state, drawtool) {
+      //刷新之后 重新赋值 页面数据会丢失
+      let config = sessionStorage["Data"]
+      if (config) {
+        state.config = JSON.parse(config)
+      }
+
+      state.config.meta.drawtool = drawtool
+      sessionStorage["Data"] = JSON.stringify(state.config)
+    },
+    updatePosition1(state, position) {
+      let config = sessionStorage["Data"]
+      if (config) {
+        state.config = JSON.parse(config)
+      }
+
+      state.config.meta.position = position
+      sessionStorage["Data"] = JSON.stringify(state.config)
+    },
+    updateBasemap(state, basemap) {
+      let config = sessionStorage["Data"]
+      if (config) {
+        state.config = JSON.parse(config)
+      }
+
+      state.config.meta.basemap = basemap
+      sessionStorage["Data"] = JSON.stringify(state.config)
+    },
+    updateTables(state, tables) {
+      let config = sessionStorage["Data"]
+      if (config) {
+        state.config = JSON.parse(config)
+      }
+
+      state.config.tables = tables
+      sessionStorage["Data"] = JSON.stringify(state.config)
+    },
+    updateData(state, config) {
+      state.config = config
+    },
+    updateLocation(state, location) {
+      state.LocalLocation.currentLocation = location
+    },
+    updatePosition(state, position) {
+      state.LocalLocation.currentPosition = position
+    }
+
+  },
+  actions: {
+    updateDrawtool({ commit, state }, obj) {
+      commit('updateDrawtool', obj.drawtool)
+    },
+    updatePosition1({ commit, state }, obj) {
+      commit('updatePosition1', obj.position)
+    },
+    updateBasemap({ commit, state }, obj) {
+      commit('updateBasemap', obj.basemap)
+    },
+    updateTables({ commit, state }, obj) {
+      commit("updateTables", obj.tables)
+    },
+    updateData({ commit, state }, obj) {
+      commit("updateData", obj.config)
+    },
+    updateLocation({ commit, state }, obj) {
+      commit("updateLocation", obj.location)
+    },
+    updatePosition({ commit, state }, obj) {
+      commit("updatePosition", obj.position)
+    }
+
+  },
+})

src/directives.js

@@ -0,0 +1,51 @@
+import Vue from 'vue';
+
+// v-dialogDrag: 弹窗拖拽
+Vue.directive('dialogDrag', {
+    bind(el, binding, vnode, oldVnode) {
+        const dialogHeaderEl = el.querySelector('.el-dialog__header');
+        const dragDom = el.querySelector('.el-dialog');
+        dialogHeaderEl.style.cursor = 'move';
+
+        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
+        
+        dialogHeaderEl.onmousedown = (e) => {
+            // 鼠标按下，计算当前元素距离可视区的距离
+            const disX = e.clientX - dialogHeaderEl.offsetLeft;
+            const disY = e.clientY - dialogHeaderEl.offsetTop;
+            // 获取到的值带px 正则匹配替换
+            let styL, styT;
+
+            // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+            if(sty.left.includes('%')) {
+                styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
+                styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
+            }else {
+                if(sty.left=='auto'){
+                    styL = +sty.marginLeft.replace(/\px/g, '');
+                    styT = +sty.marginTop.replace(/\px/g, '');
+                }else{
+                    styL = +sty.left.replace(/\px/g, '');
+                    styT = +sty.top.replace(/\px/g, '');
+                }     
+            };
+            document.onmousemove = function (e) {
+                // 通过事件委托，计算移动的距离 
+                const l = e.clientX - disX;
+                const t = e.clientY - disY;
+
+                // 移动当前元素  
+                dragDom.style.left = `${l + styL}px`;
+                dragDom.style.top = `${t + styT}px`;
+
+                //将此时的位置传出去
+                // binding.value({x:e.pageX,y:e.pageY})
+            };
+            document.onmouseup = function (e) {
+                document.onmousemove = null;
+                document.onmouseup = null;
+            };
+        }  
+    }
+})

src/icons/index.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg组件
+
+
+Vue.component('svg-icon', SvgIcon)
+
+

src/icons/svg/eye.svg

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

src/icons/svg/eye2.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path d="M256,96C144.341,96,47.559,161.021,0,256c47.559,94.979,144.341,160,256,160c111.657,0,208.439-65.021,256-160
+	C464.442,161.021,367.657,96,256,96z M382.225,180.852c30.081,19.187,55.571,44.887,74.718,75.148
+	c-19.146,30.261-44.638,55.961-74.719,75.148C344.427,355.257,300.779,368,256,368c-44.78,0-88.428-12.743-126.225-36.852
+	c-30.08-19.187-55.57-44.887-74.717-75.148c19.146-30.262,44.637-55.962,74.717-75.148c1.959-1.25,3.938-2.461,5.929-3.65
+	C130.725,190.866,128,205.613,128,221c0,70.691,57.308,128,128,128c70.692,0,128-57.309,128-128c0-15.387-2.725-30.134-7.704-43.799
+	C378.286,178.39,380.265,179.602,382.225,180.852z M256,205c0,26.51-21.49,48-48,48s-48-21.49-48-48s21.49-48,48-48
+	S256,178.49,256,205z"/>
+</svg>

src/icons/svg/password.svg

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

src/icons/svg/user.svg

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

src/main.js

@@ -0,0 +1,56 @@
+// 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 Cesium from 'cesium/Cesium' // webpack.base.conf中指定的别名alias
+import 'cesium/Widgets/widgets.css'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import './assets/css/common.scss'
+import './assets/css/button.css'
+
+// gll
+import VueRouter from 'vue-router'
+import {
+  store
+} from './components/vuex/store'
+import './icons'
+import VueJsonp from 'vue-jsonp'
+import './directives.js'
+
+Vue.use(ElementUI)
+Vue.use(VueJsonp)
+
+// gll
+Vue.use(VueRouter)
+
+Vue.prototype.Cesium = Cesium
+window.Cesium = Cesium // expose Cesium to the OL-Cesium library
+
+Vue.config.productionTip = false
+
+Vue.prototype.openLoading = function () {
+  const loading = this.$loading({ // 声明一个loading对象
+    lock: true, // 是否锁屏
+    text: '正在加载中...', // 加载动画的文字
+    background: '#fff', // 背景颜色
+    target: '.sub-main', // 需要遮罩的区域
+    body: true,
+    customClass: 'mask' // 遮罩层新增类名
+  })
+  setTimeout(function () { // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
+    loading.close() // 关闭遮罩层
+  }, 50)
+  return loading
+}
+/* eslint-disable no-new */
+new Vue({
+  store: store,
+  el: '#app',
+  router,
+  components: {
+    App
+  },
+  template: '<App/>'
+})

src/request.js

@@ -0,0 +1,27 @@
+import axios from 'axios'
+import qs from 'qs'
+const service = axios.create({
+  baseURL: process.env.API_ROOT, // api的base_url
+  timeout: 50000 // 请求超时时间
+})
+function ajax (params) {
+  const method = (params && params.method) || 'get'
+  if (method === 'post') {
+    const headers = params && params.headers && params.headers['Content-Type']
+    if (headers && headers.search('json')) {
+      params.data = JSON.stringify(params.params)
+    } else {
+      params.data = qs.stringify(params.params)
+    }
+
+    delete params.params
+    return service(params)
+  } else {
+    return service(params)
+  }
+}
+
+export {
+  service,
+  ajax
+}

src/router/index.js

@@ -0,0 +1,169 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+const Home = () => import('@/components/Home')
+const ViewTask = () => import('@/components/Supervision/ViewTask')
+const statPage = () => import('@/components/Statistic/statPage')
+const Analysis = () => import('@/components/Analysis/analysisPage')
+const DataManagement = () => import('@/components/DataManagement/DataManagement')
+const xmlHome = () => import('@/components/TaskManagement/xml/home.vue')
+const drawtool = () => import('@/components/TaskManagement/xml/drawtool.vue')
+const position = () => import('@/components/TaskManagement/xml/position.vue')
+const basemap = () => import('@/components/TaskManagement/xml/basemap.vue')
+const creatTable = () => import('@/components/TaskManagement/xml/creatTable.vue')
+const Login = () => import('@/components/login/login.vue')
+const Register = () => import('@/components/login/register.vue')
+const tableCon = () => import('@/components/TaskManagement/xml/tableCon.vue')
+const main = () => import('@/components/TaskManagement/xml/main.vue')
+const NotFound = () => import('@/components/404.vue')
+const Manage = () => import('@/components/TaskManagement/manage/TPManage.vue')
+const TaskManage = () => import('@/components/TaskManagement/manage/TaskManage.vue')
+const DataManage = () => import('@/components/TaskManagement/manage/DataManage.vue')
+const UserManage = () => import('@/components/TaskManagement/manage/UserManage.vue')
+const ModifyPassword = () => import('@/components/login/ModifyPassword.vue')
+const ForgetPassword = () => import('@/components/login/ForgetPassword.vue')
+const Addinfo = () => import('@/components/login/Addinfo.vue')
+const ManualAllocate = () => import('@/components/TaskManagement/manage/ManualAllocate.vue')
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/view'
+  },
+  {
+    path: '/view',
+    rediret: '/view',
+    type: 'view',
+    name: '工作监管',
+    component: Home,
+    children: [
+      {
+        path: '/view',
+        name: '轨迹查看',
+        component: ViewTask
+      }]
+  }, {
+    path: '/statistic',
+    type: 'statistic',
+    name: '汇总统计',
+    component: Home,
+    children: [{
+      path: '/statistic',
+      name: '统计',
+      component: statPage
+    }]
+  },
+  {
+    path: '/analysis',
+    type: 'analysis',
+    name: '分析决策',
+    component: Home,
+    children: [{
+      path: '/analysis',
+      name: '分析',
+      component: Analysis
+    }]
+  },
+  {
+    path: '/manage',
+    type: 'Manage',
+    name: '任务管理',
+    component: Home,
+    children: [{
+      path: '/manage',
+      component: Manage,
+      children: [
+        { path: '/taskmanage', component: TaskManage },
+        { path: '/usermanage', component: UserManage },
+        { path: '/datamanage', component: DataManage },
+        { path: '/main', component: main },
+        { path: '/manualallocate/:id/:name', component: ManualAllocate }
+      ]
+    },
+    {
+      path: '/home/:name/:key/:id',
+      component: xmlHome,
+      name: 'Meta',
+      iconCls: 'el-icon-menu', // 图标样式class
+      children: [
+        { path: '/home/:name/:key/:id/drawtool', component: drawtool, name: 'Drawtool' },
+        { path: '/home/:name/:key/:id/position', component: position, name: 'Position' },
+        { path: '/home/:name/:key/:id/basemap', component: basemap, name: 'Basemap' },
+        { path: '/home/:name/:key/:id/creattable', component: creatTable, name: 'creatTable' },
+        { path: '/home/:name/:key/:id/:index/tablecon', component: tableCon }
+      ]
+    },
+    {
+      path: '/home/:name/:id',
+      component: xmlHome
+    }]
+  },
+  {
+    path: '/data',
+    type: 'data',
+    name: '数据管理',
+    component: Home,
+    children: [{
+      path: '/data',
+      name: '数据',
+      component: DataManagement
+    }]
+  },
+  {
+    path: '/login',
+    component: Login
+  },
+  {
+    path: '/addinfo',
+    component: Addinfo
+  },
+  {
+    path: '/register',
+    component: Register
+  },
+  {
+    path: '/modifypassword',
+    component: ModifyPassword
+  },
+  {
+    path: '/forgetpassword',
+    component: ForgetPassword
+  },
+  {
+    path: '*',
+    component: NotFound
+  },
+  {
+    path: '/manage',
+    component: Manage,
+    children: [
+      { path: '/taskmanage', component: TaskManage },
+      { path: '/usermanage', component: UserManage },
+      { path: '/manualallocate/:id/:name', component: ManualAllocate },
+      { path: '/main', component: main }
+
+    ]
+  }
+]
+const router = new VueRouter({
+  routes
+})
+router.beforeEach((to, from, next) => {
+  if (to.path.startsWith('/login')) {
+    window.sessionStorage.removeItem('access-user')
+    window.sessionStorage.removeItem('access-id')
+    next()
+  } else if (to.path.startsWith('/register') || to.path.startsWith('/modifypassword') || to.path.startsWith('/forgetpassword') || to.path.startsWith('/addinfo')) {
+    window.sessionStorage.removeItem('access-user')
+    window.sessionStorage.removeItem('access-id')
+    next()
+  } else {
+    let user = window.sessionStorage.getItem('access-user') === '' ? false : window.sessionStorage.getItem('access-user')
+    if (!user) {
+      next({ path: '/login' })
+    } else {
+      next()
+    }
+  }
+})
+export default router

src/utils/index.js

@@ -0,0 +1,103 @@
+
+export function parseTime (time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+  if (time === undefined || time === null) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (('' + time).length === 10) time = parseInt(time) * 1000
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+export function formatTime (time, option) {
+  time = +time * 1000
+  const d = new Date(time)
+  const now = Date.now()
+
+  const diff = (now - d) / 1000
+
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) { // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前'
+  }
+  if (option) {
+    return parseTime(time, option)
+  } else {
+    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
+  }
+}
+
+export function formatString () {
+  let result = this
+  if (arguments.length > 0) {
+    if (arguments.length === 1) {
+      const args = arguments[0]
+      if (typeof (args) === 'object') {
+        for (let key in args) {
+          if (args[key] !== undefined) {
+            let reg = new RegExp('({' + key + '})', 'g')
+            result = result.replace(reg, args[key])
+          }
+        }
+      }
+    } else {
+      for (let i = 0; i < arguments.length; i++) {
+        if (arguments[i] !== undefined) {
+          let reg = new RegExp('({)' + i + '(})', 'g')
+          result = result.replace(reg, arguments[i])
+        }
+      }
+    }
+  }
+  return result
+}
+
+/***
+ * 筛选路由，只保留指定一级的全部路由，用于将数据管理的路由与系统管理的路由分开
+ * @param routes
+ * @param url
+ * @returns {Array}
+ */
+export function filterRoutes (routes, url) {
+  let res = []
+
+  routes.forEach(route => {
+    const tmp = { ...route }
+    if (tmp.path === url) {
+      // res.push(tmp)
+      // 为了去掉第一层
+      res = tmp.children
+    }
+  })
+
+  return res
+}