0816

6d4f5dc5 · yanghaitao · 8bc03492 · 740492ab · 6d4f5dc5 · 6d4f5dc5
Commit 6d4f5dc5 authored Aug 16, 2021 by yanghaitao
117 changed files
--- a/jingning_vue @ 740492ab
+++ b/jingning_vue @ 740492ab
-Subproject commit 740492aba65f2efce890f154e0ad4783d8dfb6cf
--- a/jingning_vue/.babelrc
+++ b/jingning_vue/.babelrc
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
+    }
+  }
+}
--- a/jingning_vue/.editorconfig
+++ b/jingning_vue/.editorconfig
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
--- a/jingning_vue/.eslintignore
+++ b/jingning_vue/.eslintignore
+/build/
+/config/
+/dist/
+/*.js
+/test/unit/coverage/
--- a/jingning_vue/.eslintrc.js
+++ b/jingning_vue/.eslintrc.js
+// 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'
+  }
+}
--- a/jingning_vue/.gitignore
+++ b/jingning_vue/.gitignore
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/test/unit/coverage/
+/test/e2e/reports/
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
--- a/jingning_vue/.postcssrc.js
+++ b/jingning_vue/.postcssrc.js
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}
--- a/jingning_vue/README.md
+++ b/jingning_vue/README.md
+# sy
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+
+# run unit tests
+npm run unit
+
+# run e2e tests
+npm run e2e
+
+# run all tests
+npm test
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
--- a/jingning_vue/build/build.js
+++ b/jingning_vue/build/build.js
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})
--- a/jingning_vue/build/check-versions.js
+++ b/jingning_vue/build/check-versions.js
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}
--- a/jingning_vue/build/utils.js
+++ b/jingning_vue/build/utils.js
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } 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')
+    })
+  }
+}
--- a/jingning_vue/build/vue-loader.conf.js
+++ b/jingning_vue/build/vue-loader.conf.js
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}
--- a/jingning_vue/build/webpack.base.conf.js
+++ b/jingning_vue/build/webpack.base.conf.js
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test:/\.scss$/,
+        loader:'sass-loader!style-loader!css-loader'
+      }
+    ]
+  },
+  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'
+  }
+}
--- a/jingning_vue/build/webpack.dev.conf.js
+++ b/jingning_vue/build/webpack.dev.conf.js
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true,
+      favicon: ''
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})
--- a/jingning_vue/build/webpack.prod.conf.js
+++ b/jingning_vue/build/webpack.prod.conf.js
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : config.build.index,
+      template: 'index.html',
+      inject: true,
+      favicon: '',
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig
--- a/jingning_vue/config/dev.env.js
+++ b/jingning_vue/config/dev.env.js
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})
--- a/jingning_vue/config/index.js
+++ b/jingning_vue/config/index.js
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/qt_web/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    // host: '192.168.68.105',
+    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, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/portal/001/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}
--- a/jingning_vue/config/prod.env.js
+++ b/jingning_vue/config/prod.env.js
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}
--- a/jingning_vue/config/test.env.js
+++ b/jingning_vue/config/test.env.js
+'use strict'
+const merge = require('webpack-merge')
+const devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+  NODE_ENV: '"testing"'
+})
--- a/jingning_vue/index.html
+++ b/jingning_vue/index.html
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>景宁数字政府门户</title>
+  <script src="https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js"></script>
+  <script src='https://wpk-gate.zjzwfw.gov.cn/static/wpk-jssdk.1.0.2/wpkReporter.js' crossorigin='true'></script>
+</head>
+
+<body>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+<script>
+  //稳定性监控代码
+  try {
+    const config = {
+      bid: 'syszzfmh_zzdpro',
+      signkey: '1234567890abcdef',
+      gateway: 'https://wpk-gate.zjzwfw.gov.cn'
+    };
+    const wpk = new wpkReporter(config);
+    wpk.installAll();
+    window._wpk = wpk;
+  } catch (err) {
+    console.error('WpkReporter init fail', err);
+  }
+
+  // 埋点初始化代码
+  (function (w, d, s, q, i) {
+    w[q] = w[q] || [];
+    var f = d.getElementsByTagName(s)[0], j = d.createElement(s);
+    j.async = true;
+    j.id = 'beacon-aplus';
+    j.src = 'https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js';
+    f.parentNode.insertBefore(j, f);
+  })(window, document, 'script', 'aplus_queue');
+  //适配pad
+  var view_timer = null;
+  function viewPort(userAgent, pageWidth) {
+    var oView = document.getElementById('viewport');
+    if (oView) {
+      document.head.removeChild(oView);
+    }
+    if (!pageWidth) {
+      pageWidth = 1440;
+    }
+    var screen_w = parseInt(window.screen.width),
+      screen_h =parseInt(window.screen.height), 
+      scale = screen_w / pageWidth;
+    if (/Android (\d+\.\d+)/.test(userAgent)) {
+      var creat_meta = document.createElement('meta');
+      creat_meta.name = 'viewport';
+      creat_meta.id = 'viewport';
+      var version = parseFloat(RegExp.$1);
+      if (version > 2.3) {
+        creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi';
+      } else {
+        creat_meta.content = '"width=' + pageWidth + ', target-densitydpi=device-dpi';
+      }
+      document.head.appendChild(creat_meta);
+    } else {
+      var creat_meta = document.createElement('meta');
+      creat_meta.name = 'viewport';
+      creat_meta.id = 'viewport';
+      if (window.orientation == '-90' || window.orientation == '90') {//判断移动设备横屏竖屏
+        scale = window.screen.height / pageWidth;
+        creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale*screen_w/screen_h + ' ,minimum-scale = ' + scale*screen_w/screen_h + ', maximum-scale = ' + scale*screen_w/screen_h + ', user-scalable=no, target-densitydpi=device-dpi';
+      }
+      else {
+        creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
+      }
+      document.head.appendChild(creat_meta);
+    }
+  }
+  viewPort(navigator.userAgent);
+  window.onresize = function () {
+    clearTimeout(view_timer);
+    view_timer = setTimeout(function () {
+      viewPort(navigator.userAgent);
+    }, 500);
+  }
+</script>
+
+</html>
\ No newline at end of file
--- a/jingning_vue/package-lock.json
+++ b/jingning_vue/package-lock.json
--- a/jingning_vue/package.json
+++ b/jingning_vue/package.json
+{
+  "name": "sy",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "wangyile <wyl19980808@163.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "unit": "jest --config test/unit/jest.conf.js --coverage",
+    "e2e": "node test/e2e/runner.js",
+    "test": "npm run unit && npm run e2e",
+    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "default-passive-events": "^2.0.0",
+    "echarts": "^5.1.0",
+    "element-ui": "^2.15.1",
+    "gdt-jsapi": "^1.9.10",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^8.2.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-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",
+    "babel-register": "^6.22.0",
+    "chalk": "^2.0.1",
+    "chromedriver": "^2.27.2",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-spawn": "^5.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",
+    "nightwatch": "^0.9.12",
+    "node-notifier": "^5.1.2",
+    "node-sass": "^4.14.1",
+    "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",
+    "sass-loader": "^7.3.1",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.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-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
--- a/jingning_vue/src/App.vue
+++ b/jingning_vue/src/App.vue
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "App",
+};
+</script>
+
+<style>
+</style>
--- a/jingning_vue/src/api/index.js
+++ b/jingning_vue/src/api/index.js
+import axios from 'axios'
+import { Base64 } from 'js-base64'
+
+let base = 'https://szzf.songyang.gov.cn:8081';
+let requestHead = {
+  headers: {
+    'Authorization': 'Basic ' + Base64.encode('98b8c111526e4b1eba5cde7669ab2228:y916a7f471944898ab68c8b256e0c1f2')
+  }
+};
+
+function get(url) {
+  return axios.get(base + url, requestHead)
+    .then(res => {
+      if (res.status !== 200) return null;
+      return res.data;
+    }).catch(err => {
+      console.error(err);
+      return err;
+    });
+};
+
+function post(url, data) {
+  return axios.post(base + url, data, requestHead)
+    .then(res => {
+      if (res.status !== 200) return null;
+      return res;
+    }).catch(err => {
+      console.error(err); //输出日志
+      return null;
+    })
+};
+
+function del(url) {
+  return axios.delete(base + url, requestHead)
+    .then(res => {
+      if (res.status !== 200) return null;
+      return res.data.data;
+    }).catch(err => {
+      console.error(err);
+      return null;
+    });
+}
+
+function put(url, data) {
+  return axios.put(base + url, data, requestHead)
+    .then(res => {
+      if (res.status !== 200) return null;
+      return res.data;
+    }).catch(err => {
+      console.error(err);
+      return null;
+    })
+}
+
+function getMyCityName()
+{
+  return "景宁畲族自治县";
+}
+
+function getMyCity()
+{
+  return "景宁畲族自治县";
+}
+
+// 获取搜索内容
+export const getSearchCon = (a, b,c=1,d=10) => {
+  return get('/common/search/'+b+'/query?&searchKey=' + a + '&pageNum='+c+'&pageSize='+d);
+};
+//获取扫码登录后用户信息
+export const getPortalUserinfo = (a) => {
+  return get('/api/portal/userinfo?area=sy&code=' + a);
+};
+//获取免登后用户信息和权限信息
+export const getUserInfo = (a) => {
+  return get('/api/portal/qrinfo?area=sy&code=' + a);
+}
+//获取扫码登录后用户权限
+export const getPortal2 = (a) => {
+  return get('/api/portal/qrinfo2?area=sy&account=' + a);
+}
+//获取任务项
+export const getTask = () => {
+  return get('/api/Data/list?level=1');
+}
--- a/jingning_vue/src/assets/css/common.css
+++ b/jingning_vue/src/assets/css/common.css
+* {
+    margin: 0;
+    padding: 0;
+}
+ul,li {
+    list-style-type: none;
+}
+#app {
+    width: 100%;
+    height: 100%;
+    background-color: #f2f3f5;
+}
+.c3 {
+    color: #333333;
+}
+.bold {
+    border-bottom: 5px solid #dddddd;
+}
+.bold1 {
+    border-bottom: 2px solid #dddddd;
+}
+.fs24 {
+    font-size: 24px;
+}
+.fs22 {
+    font-size: 22px;
+}
+.fs20 {
+    font-size: 20px;
+}
+.fs18 {
+    font-size: 18px;
+}
+.fs16 {
+    font-size: 16px;
+}
+.fs14 {
+    font-size: 14px;
+}
+.fs13 {
+    font-size: 13px;
+}
+.fs12 {
+    font-size: 12px;
+}
+.b {
+    font-weight: 600;
+}
+.flex {
+    display: flex;
+}
+.jcenter {
+    justify-content: center;
+}
+.jend {
+    justify-content: flex-end;
+}
+.aiend {
+    align-items: flex-end;
+}
+.between{
+    justify-content: space-between;
+}
+.around{
+	justify-content: space-around;
+}
+.wrap {
+    flex-wrap: wrap;
+}
+.column{
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: flex;
+    flex-direction: column;
+}
+.acenter{
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: flex;
+    align-items: center;
+}
+.wrap {
+    flex-wrap: wrap;
+}
+.textCenter {
+    text-align: center;
+}
+.flex1 {
+    flex-grow: 1;
+}
+.flex2 {
+    flex-grow: 2;
+}
+.c6 {
+    color: #666666;
+}
+.c9 {
+    color: #999999;
+}
+.c0 {
+    color: #000000;
+}
+.cf {
+    color: #fff;
+}
+.bgf {
+    background: #fff;
+}
+.bgf78 {
+    background: #f7f8fa;
+}
+.bgedf {
+    background: #edf4ff;
+}
+.bgf0f {
+    background: #F0FAF2;
+}
+.bgff5 {
+    background: #fff5ed;
+}
+.c6dd {
+    color: #6dd993;
+}
+.c15b {
+    color: #15be50;
+}
+.bg15b {
+    background: #15be50;
+}
+.c149 {
+    color: #1492ff;
+}
+.bg149 {
+    background: #1492ff;
+}
+.cff6 {
+    color: #acabab;
+}
+.bgff6 {
+    background: #ff6b00;
+}
+.bgff8 {
+    background: #ff8126;
+}
+.bgffc {
+    background: #ffc341;
+}
+.cd4 {
+    color: #d40000;
+}
+.bgffe {
+    background: #ffebeb;
+}
+/* hover时 */
+.bg37c {
+    background: #37cc6a;
+}
+.c37c {
+    color: #37cc6a;
+}
+.c269 {
+    color: #2690f3;
+}
+.cff8 {
+    color: #ff8126;
+}
+.bradius4 {
+    border-radius: 4px;
+}
+.bradius2 {
+    border-radius: 2px;
+}
+.icon20 {
+    width: 20px;
+    height: 20px;
+}
+.icon18 {
+    width: 18px;
+    height: 18px;
+}
+.icon16 {
+    width: 16px;
+    height: 16px;
+}
+.icon14 {
+    width: 14px;
+    height: 14px;
+}
+.ml12 {
+    margin-left: 12px;
+}
+.ml20 {
+    margin-left: 20px;
+}
+.ml50 {
+    margin-left: 50px;
+}
+.ml40 {
+    margin-left: 40px;
+}
+.mr12 {
+    margin-right: 12px;
+}
+.mr20 {
+    margin-right: 20px;
+}
+.mr40 {
+    margin-right: 40px;
+}
+.mr60 {
+    margin-right: 60px;
+}
+.mr70 {
+    margin-right: 70px;
+}
+.mt12 {
+    margin-top: 12px;
+}
+.mt20 {
+    margin-top: 20px;
+}
+.mt30 {
+    margin-top: 30px;
+}
+.mt40 {
+    margin-top: 40px;
+}
+.mb20 {
+    margin-bottom: 20px;
+}
+.pb20 {
+    padding-bottom: 20px;
+}
+.p10 {
+    padding: 10px;
+}
+.p12 {
+    padding: 12px;
+}
+.pl20 {
+    padding-left: 20px;
+}
+.pr20 {
+    padding-right: 20px;
+}
+.pb12 {
+    padding-bottom: 12px;
+}
+.bg20d{
+    background: #20DBEE;
+}
+.bg369{
+    background: #3699F7;
+}
+.bga0f{
+    background: #AA00FF;
+}
+.fl{
+	float: left;
+}
+.fr{
+	float: right;
+}
+.clearfix,.clearfix::after{
+	content: '';
+	display: block;
+	clear: both;
+}
+.ellipsis{ 
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.p20 {
+    padding: 20px;
+}
\ No newline at end of file
--- a/jingning_vue/src/assets/css/reset.css
+++ b/jingning_vue/src/assets/css/reset.css
+*{
+  margin: 0;
+  padding: 0;
+}
+body{
+  font-size: 16px;
+}
+ul {
+  list-style: none;
+}
+.module-tit{
+  font-size: 20px;
+  padding: 16px 0 12px 12px;
+  font-weight: 600;
+  position: relative;
+}
+.module-tit::before{
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: 16px;
+  width: 4px;
+  height: 28px;
+  background-color: #1492ff;
+}
+.prompt-text {
+  color: #333;
+  line-height: 36px;
+}
+.prompt-text span,.prompt-text-6 span {
+  color: #1492ff;
+  font-weight: 600;
+  margin: 0 3px;
+}
+.prompt-text-6{
+  color: #666;
+  line-height: 36px;
+}
+.sy-tooltip{
+  color: #333;
+  padding: 5px 12px!important;
+  background-color: #fff;
+  /* transform: translateY(40px); */
+  font-size: 16px!important;
+}
+.unify-item{
+  box-sizing: border-box;
+  padding: 0 20px 12px;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
--- a/jingning_vue/src/assets/font/demo.css
+++ b/jingning_vue/src/assets/font/demo.css
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
--- a/jingning_vue/src/assets/font/demo_index.html
+++ b/jingning_vue/src/assets/font/demo_index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2531829" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe663;</span>
+                <div class="name">警告</div>
+                <div class="code-name">&amp;#xe663;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe641;</span>
+                <div class="name">上升</div>
+                <div class="code-name">&amp;#xe641;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65c;</span>
+                <div class="name">公寓、住宅</div>
+                <div class="code-name">&amp;#xe65c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">空气优良</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe615;</span>
+                <div class="name">山水</div>
+                <div class="code-name">&amp;#xe615;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe74e;</span>
+                <div class="name">pm2.5</div>
+                <div class="code-name">&amp;#xe74e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6c3;</span>
+                <div class="name">河湖</div>
+                <div class="code-name">&amp;#xe6c3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">城市</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6cc;</span>
+                <div class="name">圆</div>
+                <div class="code-name">&amp;#xe6cc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe76d;</span>
+                <div class="name">环状图</div>
+                <div class="code-name">&amp;#xe76d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">预警中心-警示</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe9a3;</span>
+                <div class="name">正常</div>
+                <div class="code-name">&amp;#xe9a3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe690;</span>
+                <div class="name">滞后</div>
+                <div class="code-name">&amp;#xe690;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe69a;</span>
+                <div class="name">信用卡</div>
+                <div class="code-name">&amp;#xe69a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66b;</span>
+                <div class="name">nav</div>
+                <div class="code-name">&amp;#xe66b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68c;</span>
+                <div class="name">quyu</div>
+                <div class="code-name">&amp;#xe68c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">wenhua</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeb78;</span>
+                <div class="name">icon双招双引</div>
+                <div class="code-name">&amp;#xeb78;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe624;</span>
+                <div class="name">循环</div>
+                <div class="code-name">&amp;#xe624;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61e;</span>
+                <div class="name">商务</div>
+                <div class="code-name">&amp;#xe61e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe670;</span>
+                <div class="name">预防保健科</div>
+                <div class="code-name">&amp;#xe670;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62a;</span>
+                <div class="name">花园</div>
+                <div class="code-name">&amp;#xe62a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe715;</span>
+                <div class="name">科技</div>
+                <div class="code-name">&amp;#xe715;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe719;</span>
+                <div class="name">生态</div>
+                <div class="code-name">&amp;#xe719;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe613;</span>
+                <div class="name">改革</div>
+                <div class="code-name">&amp;#xe613;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe605;</span>
+                <div class="name">chengshi</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe625;</span>
+                <div class="name">index active</div>
+                <div class="code-name">&amp;#xe625;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe633;</span>
+                <div class="name">shengchanguanli </div>
+                <div class="code-name">&amp;#xe633;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe760;</span>
+                <div class="name">乡村</div>
+                <div class="code-name">&amp;#xe760;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6fb;</span>
+                <div class="name">政府效能</div>
+                <div class="code-name">&amp;#xe6fb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe626;</span>
+                <div class="name">minshengfuwu</div>
+                <div class="code-name">&amp;#xe626;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1623827017972') format('woff2'),
+       url('iconfont.woff?t=1623827017972') format('woff'),
+       url('iconfont.ttf?t=1623827017972') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jinggao"></span>
+            <div class="name">
+              警告
+            </div>
+            <div class="code-name">.icon-jinggao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shangsheng"></span>
+            <div class="name">
+              上升
+            </div>
+            <div class="code-name">.icon-shangsheng
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gongyuzhuzhai"></span>
+            <div class="name">
+              公寓、住宅
+            </div>
+            <div class="code-name">.icon-gongyuzhuzhai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-kongqiyouliang"></span>
+            <div class="name">
+              空气优良
+            </div>
+            <div class="code-name">.icon-kongqiyouliang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shanshui"></span>
+            <div class="name">
+              山水
+            </div>
+            <div class="code-name">.icon-shanshui
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-pm"></span>
+            <div class="name">
+              pm2.5
+            </div>
+            <div class="code-name">.icon-pm
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-hehu"></span>
+            <div class="name">
+              河湖
+            </div>
+            <div class="code-name">.icon-hehu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chengshi1"></span>
+            <div class="name">
+              城市
+            </div>
+            <div class="code-name">.icon-chengshi1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yuan"></span>
+            <div class="name">
+              圆
+            </div>
+            <div class="code-name">.icon-yuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huanzhuangtu1"></span>
+            <div class="name">
+              环状图
+            </div>
+            <div class="code-name">.icon-huanzhuangtu1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jingshi"></span>
+            <div class="name">
+              预警中心-警示
+            </div>
+            <div class="code-name">.icon-jingshi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhengchang"></span>
+            <div class="name">
+              正常
+            </div>
+            <div class="code-name">.icon-zhengchang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhihou"></span>
+            <div class="name">
+              滞后
+            </div>
+            <div class="code-name">.icon-zhihou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-56"></span>
+            <div class="name">
+              信用卡
+            </div>
+            <div class="code-name">.icon-56
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-nav"></span>
+            <div class="name">
+              nav
+            </div>
+            <div class="code-name">.icon-nav
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-quyu"></span>
+            <div class="name">
+              quyu
+            </div>
+            <div class="code-name">.icon-quyu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-wenhua"></span>
+            <div class="name">
+              wenhua
+            </div>
+            <div class="code-name">.icon-wenhua
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-iconshuangzhaoshuangyin"></span>
+            <div class="name">
+              icon双招双引
+            </div>
+            <div class="code-name">.icon-iconshuangzhaoshuangyin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xunhuan"></span>
+            <div class="name">
+              循环
+            </div>
+            <div class="code-name">.icon-xunhuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shangwu"></span>
+            <div class="name">
+              商务
+            </div>
+            <div class="code-name">.icon-shangwu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yufangbaojianke"></span>
+            <div class="name">
+              预防保健科
+            </div>
+            <div class="code-name">.icon-yufangbaojianke
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huayuan"></span>
+            <div class="name">
+              花园
+            </div>
+            <div class="code-name">.icon-huayuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-juxing"></span>
+            <div class="name">
+              科技
+            </div>
+            <div class="code-name">.icon-juxing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shengtai"></span>
+            <div class="name">
+              生态
+            </div>
+            <div class="code-name">.icon-shengtai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gaige"></span>
+            <div class="name">
+              改革
+            </div>
+            <div class="code-name">.icon-gaige
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chengshi"></span>
+            <div class="name">
+              chengshi
+            </div>
+            <div class="code-name">.icon-chengshi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-indexactive"></span>
+            <div class="name">
+              index active
+            </div>
+            <div class="code-name">.icon-indexactive
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shengchanguanli"></span>
+            <div class="name">
+              shengchanguanli 
+            </div>
+            <div class="code-name">.icon-shengchanguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiangcun"></span>
+            <div class="name">
+              乡村
+            </div>
+            <div class="code-name">.icon-xiangcun
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zhengfuxiaoneng"></span>
+            <div class="name">
+              政府效能
+            </div>
+            <div class="code-name">.icon-zhengfuxiaoneng
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-minshengfuwu"></span>
+            <div class="name">
+              minshengfuwu
+            </div>
+            <div class="code-name">.icon-minshengfuwu
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jinggao"></use>
+                </svg>
+                <div class="name">警告</div>
+                <div class="code-name">#icon-jinggao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shangsheng"></use>
+                </svg>
+                <div class="name">上升</div>
+                <div class="code-name">#icon-shangsheng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gongyuzhuzhai"></use>
+                </svg>
+                <div class="name">公寓、住宅</div>
+                <div class="code-name">#icon-gongyuzhuzhai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-kongqiyouliang"></use>
+                </svg>
+                <div class="name">空气优良</div>
+                <div class="code-name">#icon-kongqiyouliang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shanshui"></use>
+                </svg>
+                <div class="name">山水</div>
+                <div class="code-name">#icon-shanshui</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-pm"></use>
+                </svg>
+                <div class="name">pm2.5</div>
+                <div class="code-name">#icon-pm</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-hehu"></use>
+                </svg>
+                <div class="name">河湖</div>
+                <div class="code-name">#icon-hehu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chengshi1"></use>
+                </svg>
+                <div class="name">城市</div>
+                <div class="code-name">#icon-chengshi1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yuan"></use>
+                </svg>
+                <div class="name">圆</div>
+                <div class="code-name">#icon-yuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huanzhuangtu1"></use>
+                </svg>
+                <div class="name">环状图</div>
+                <div class="code-name">#icon-huanzhuangtu1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jingshi"></use>
+                </svg>
+                <div class="name">预警中心-警示</div>
+                <div class="code-name">#icon-jingshi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhengchang"></use>
+                </svg>
+                <div class="name">正常</div>
+                <div class="code-name">#icon-zhengchang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhihou"></use>
+                </svg>
+                <div class="name">滞后</div>
+                <div class="code-name">#icon-zhihou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-56"></use>
+                </svg>
+                <div class="name">信用卡</div>
+                <div class="code-name">#icon-56</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-nav"></use>
+                </svg>
+                <div class="name">nav</div>
+                <div class="code-name">#icon-nav</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-quyu"></use>
+                </svg>
+                <div class="name">quyu</div>
+                <div class="code-name">#icon-quyu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-wenhua"></use>
+                </svg>
+                <div class="name">wenhua</div>
+                <div class="code-name">#icon-wenhua</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-iconshuangzhaoshuangyin"></use>
+                </svg>
+                <div class="name">icon双招双引</div>
+                <div class="code-name">#icon-iconshuangzhaoshuangyin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xunhuan"></use>
+                </svg>
+                <div class="name">循环</div>
+                <div class="code-name">#icon-xunhuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shangwu"></use>
+                </svg>
+                <div class="name">商务</div>
+                <div class="code-name">#icon-shangwu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yufangbaojianke"></use>
+                </svg>
+                <div class="name">预防保健科</div>
+                <div class="code-name">#icon-yufangbaojianke</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huayuan"></use>
+                </svg>
+                <div class="name">花园</div>
+                <div class="code-name">#icon-huayuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-juxing"></use>
+                </svg>
+                <div class="name">科技</div>
+                <div class="code-name">#icon-juxing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shengtai"></use>
+                </svg>
+                <div class="name">生态</div>
+                <div class="code-name">#icon-shengtai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gaige"></use>
+                </svg>
+                <div class="name">改革</div>
+                <div class="code-name">#icon-gaige</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chengshi"></use>
+                </svg>
+                <div class="name">chengshi</div>
+                <div class="code-name">#icon-chengshi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-indexactive"></use>
+                </svg>
+                <div class="name">index active</div>
+                <div class="code-name">#icon-indexactive</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shengchanguanli"></use>
+                </svg>
+                <div class="name">shengchanguanli </div>
+                <div class="code-name">#icon-shengchanguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiangcun"></use>
+                </svg>
+                <div class="name">乡村</div>
+                <div class="code-name">#icon-xiangcun</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhengfuxiaoneng"></use>
+                </svg>
+                <div class="name">政府效能</div>
+                <div class="code-name">#icon-zhengfuxiaoneng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-minshengfuwu"></use>
+                </svg>
+                <div class="name">minshengfuwu</div>
+                <div class="code-name">#icon-minshengfuwu</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>
--- a/jingning_vue/src/assets/font/iconfont.css
+++ b/jingning_vue/src/assets/font/iconfont.css
+@font-face {
+  font-family: "iconfont"; /* Project id 2531829 */
+  src: url('iconfont.woff2?t=1623827017972') format('woff2'),
+       url('iconfont.woff?t=1623827017972') format('woff'),
+       url('iconfont.ttf?t=1623827017972') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-jinggao:before {
+  content: "\e663";
+}
+
+.icon-shangsheng:before {
+  content: "\e641";
+}
+
+.icon-gongyuzhuzhai:before {
+  content: "\e65c";
+}
+
+.icon-kongqiyouliang:before {
+  content: "\e601";
+}
+
+.icon-shanshui:before {
+  content: "\e615";
+}
+
+.icon-pm:before {
+  content: "\e74e";
+}
+
+.icon-hehu:before {
+  content: "\e6c3";
+}
+
+.icon-chengshi1:before {
+  content: "\e602";
+}
+
+.icon-yuan:before {
+  content: "\e6cc";
+}
+
+.icon-huanzhuangtu1:before {
+  content: "\e76d";
+}
+
+.icon-jingshi:before {
+  content: "\e600";
+}
+
+.icon-zhengchang:before {
+  content: "\e9a3";
+}
+
+.icon-zhihou:before {
+  content: "\e690";
+}
+
+.icon-56:before {
+  content: "\e69a";
+}
+
+.icon-nav:before {
+  content: "\e66b";
+}
+
+.icon-quyu:before {
+  content: "\e68c";
+}
+
+.icon-wenhua:before {
+  content: "\e608";
+}
+
+.icon-iconshuangzhaoshuangyin:before {
+  content: "\eb78";
+}
+
+.icon-xunhuan:before {
+  content: "\e624";
+}
+
+.icon-shangwu:before {
+  content: "\e61e";
+}
+
+.icon-yufangbaojianke:before {
+  content: "\e670";
+}
+
+.icon-huayuan:before {
+  content: "\e62a";
+}
+
+.icon-juxing:before {
+  content: "\e715";
+}
+
+.icon-shengtai:before {
+  content: "\e719";
+}
+
+.icon-gaige:before {
+  content: "\e613";
+}
+
+.icon-chengshi:before {
+  content: "\e605";
+}
+
+.icon-indexactive:before {
+  content: "\e625";
+}
+
+.icon-shengchanguanli:before {
+  content: "\e633";
+}
+
+.icon-xiangcun:before {
+  content: "\e760";
+}
+
+.icon-zhengfuxiaoneng:before {
+  content: "\e6fb";
+}
+
+.icon-minshengfuwu:before {
+  content: "\e626";
+}
+
--- a/jingning_vue/src/assets/font/iconfont.js
+++ b/jingning_vue/src/assets/font/iconfont.js
+!function(a){var c,l,h,t,i,o,e='<svg><symbol id="icon-jinggao" viewBox="0 0 1152 1024"><path d="M1128.412737 850.821412L676.458861 71.517765c-55.294272-95.35702-145.659448-95.35702-200.953721 0L23.67926 850.821412C-31.67901 946.178432 13.567576 1024 123.964126 1024h904.035749c110.460548 0 155.643136-77.821568 100.412862-173.178588z" fill="#FF5B5B" ></path><path d="M639.980001 320.021999v319.990001c0 42.686666-21.311334 63.998-63.998 63.998s-63.998-21.311334-63.998001-63.998V320.021999c0-42.686666 21.311334-63.998 63.998001-63.998s63.998 21.311334 63.998 63.998z m-127.996001 511.984001a63.998 63.998 0 1 1 127.996001 0 63.998 63.998 0 0 1-127.996001 0z" fill="#FFFFFF" ></path></symbol><symbol id="icon-shangsheng" viewBox="0 0 1024 1024"><path d="M375.946 826.405h93.867c12.318 0 22.934-10.039 22.934-22.587V603.907l-63.71-34.293-76.024 44.332v189.873c-0.001 12.547 10.19 22.586 22.933 22.586zM102 607.253l307.501-179 17.838-10.454 18.263 10.035 92.165 49.768 246.764-207.857-34.826-39.311 86.218-16.732 86.219-16.728-28.455 81.972-28.458 81.973-32.704-36.802-266.303 224.585-19.109 16.312-22.088-12.129-96.414-52.277-289.658 168.543L102 607.253z m77.725 219.152h93.862c12.317 0 22.938-10.039 22.938-22.587V646.986L156.791 728.12v75.698c0 12.548 10.191 22.587 22.934 22.587z m392.444 0h93.865c12.318 0 22.934-10.039 22.934-22.587V523.191c0-1.256 0-2.509-0.425-3.346l-137.611 115.85-1.696-0.837v169.379c-0.001 12.129 10.194 22.168 22.933 22.168z m196.225 0h93.862c12.317 0 22.934-10.039 22.934-22.587v-338.76l-56.489-63.573-83.245 70.261v332.072c0 12.548 10.195 22.587 22.938 22.587z m0 0"  ></path></symbol><symbol id="icon-gongyuzhuzhai" viewBox="0 0 1024 1024"><path d="M824.572689 848.60173 825.393801 421.5559 858.122906 421.5559C877.066254 421.5559 880.238971 412.332203 865.429787 401.121062L513.223274 134.486771C505.757358 128.834776 493.845613 129.103417 486.428669 135.243232L152.904894 411.337335C138.418017 423.32971 142.256084 433.384724 161.052836 433.786757L193.857117 434.488392 195.24274 849.295428 136.533333 849.295428 137.251805 908.365223 882.666264 909.00937 881.999111 850.187322 824.572689 848.60173ZM259.950594 477.565529 355.50734 478.655621 355.50734 559.421757 259.950594 559.02536 259.950594 477.565529 259.950594 477.565529ZM355.558659 721.166165 260.053233 720.819319 260.053233 639.458584 355.558659 640.350481 355.558659 721.166165 355.558659 721.166165ZM456.022822 317.979631 551.579566 319.069726 551.579566 399.835863 456.022822 399.489014 456.022822 317.979631 456.022822 317.979631ZM456.022822 477.565529 551.476927 478.655621 551.476927 559.421757 456.022822 558.975812 456.022822 477.565529 456.022822 477.565529ZM551.682205 836.703321 456.022822 836.108725 456.022822 639.458584 551.682205 639.458584 551.682205 836.703321ZM647.321856 477.565529 742.724642 478.655621 742.724642 559.421757 647.321856 558.975812 647.321856 477.565529 647.321856 477.565529ZM647.321856 639.409036 742.92992 640.30093 742.92992 721.166165 647.321856 720.819319 647.321856 639.409036 647.321856 639.409036Z"  ></path></symbol><symbol id="icon-kongqiyouliang" viewBox="0 0 1413 1024"><path d="M1106.846126 345.435787s151.811973-39.188672 249.254076 55.782074a150.752819 150.752819 0 0 0 56.841227-118.978221c0-81.907855-41.306979-155.342484-153.224177-128.5106C1238.181135 76.763901 1169.689221 0.151812 1079.30814 0.151812a176.52555 176.52555 0 0 0-168.052323 103.443972 374.234165 374.234165 0 0 1 195.590309 241.840003zM967.743993 494.423351a691.627104 691.627104 0 0 0-321.982603-31.774599 197.355565 197.355565 0 0 0-74.493782 28.244088 219.244733 219.244733 0 0 0-90.381081 239.721696c2.824409 9.885431 6.35492 19.41781 10.238482 30.715446l138.39603-82.613957a14.122044 14.122044 0 0 0 5.295767-8.120175c9.53238-38.835621 18.005606-77.671242 28.244088-116.506863a21.889168 21.889168 0 0 1 32.12765-12.70984 23.301373 23.301373 0 0 1 9.885431 30.009344c-6.35492 23.301373-12.356788 46.602745-19.417811 73.434628l17.299504-9.179328c25.77273-15.181197 51.545461-31.068497 77.671242-45.896643a23.654424 23.654424 0 0 1 37.776468 19.770861 28.95019 28.95019 0 0 1-18.005606 24.360526l-135.218571 80.495651-13.768993 8.120175v5.648818c22.242219 4.942715 44.484439 9.53238 66.726657 14.828146s26.831884 16.240351 22.595271 30.362394-15.887299 19.064759-35.30511 14.475096l-103.090921-26.478833a22.948321 22.948321 0 0 0-14.475095 0c-24.360526 13.415942-48.01495 28.244088-73.081578 42.719183l10.591533 13.062891a211.83066 211.83066 0 0 0 332.927187-17.299504 776.712419 776.712419 0 0 0 90.02803-182.88047c12.70984-37.776468 22.242219-76.612089 33.186804-113.682453l-7.414074-4.942716z m86.497519-86.144468c-46.249694-170.17063-193.472002-338.929055-388.356209-338.929056-225.246601 0-388.356209 156.754688-402.478254 406.714867a257.0212 257.0212 0 0 0-263.37612 260.904762c0 156.754688 105.91533 286.677493 240.427799 286.677493h847.322638c164.168761 0 296.209872-151.105871 296.209873-329.749727s-88.968877-344.930924-329.749727-285.97139zM777.44945 176.677362a35.30511 35.30511 0 1 1-35.30511 35.30511 35.30511 35.30511 0 0 1 35.30511-35.30511z m35.30511 158.519943a17.299504 17.299504 0 1 1-17.299504-18.005606 17.652555 17.652555 0 0 1 17.299504 18.358657z m-176.52555-122.861782a35.30511 35.30511 0 1 1-35.30511 35.30511 35.30511 35.30511 0 0 1 35.30511-35.30511z m388.35621 312.803274a816.607193 816.607193 0 0 1-126.039243 301.85869 257.0212 257.0212 0 0 1-391.88672 37.776467c-11.297635-10.944584-21.183066-23.301373-32.833752-35.30511-25.419679 15.181197-50.839358 29.656292-75.905987 45.190541a32.480701 32.480701 0 0 1-35.30511 2.118307l-7.414073-13.062891a35.30511 35.30511 0 0 1 16.593402-33.892906c25.419679-14.122044 50.133256-29.303241 76.259037-44.837489-3.883562-11.650686-8.120175-22.59527-11.650686-35.30511a271.143244 271.143244 0 0 1 120.037374-310.684968 252.078485 252.078485 0 0 1 105.91533-31.421547 763.649528 763.649528 0 0 1 313.156325 35.30511c51.898512 20.476964 57.90038 30.009343 47.661898 81.907855z"  ></path></symbol><symbol id="icon-shanshui" viewBox="0 0 1024 1024"><path d="M964.786087 840.659478h-259.294609c-14.06887-96.166957-45.901913-211.122087-95.543652-344.776348 38.912-102.043826 81.608348-190.464 116.736-201.460869a31.565913 31.565913 0 0 1 18.342957 0.534261c66.070261 21.860174 148.034783 191.977739 245.938087 510.308174a27.38087 27.38087 0 0 1-26.178783 35.394782z"  ></path><path d="M687.549217 874.050783H85.170087A49.775304 49.775304 0 0 1 36.819478 812.521739C132.674783 418.816 241.753043 196.830609 364.143304 146.610087c13.04487-2.80487 17.719652-1.157565 27.247305 0 106.22887 22.127304 220.827826 243.400348 343.885913 663.730087a49.775304 49.775304 0 0 1-47.727305 63.710609z"  ></path><path d="M670.675478 231.958261C607.365565 231.958261 556.521739 180.313043 556.521739 115.97913 556.521739 51.689739 607.365565 0 670.675478 0c62.73113 0 113.574957 51.645217 114.153739 115.97913-0.578783 64.289391-51.422609 115.97913-114.153739 115.979131z"  ></path><path d="M289.391304 934.956522m33.391305 0l601.043478 0q33.391304 0 33.391304 33.391304l0 0q0 33.391304-33.391304 33.391304l-601.043478 0q-33.391304 0-33.391305-33.391304l0 0q0-33.391304 33.391305-33.391304Z"  ></path><path d="M66.782609 934.956522m33.391304 0l111.304348 0q33.391304 0 33.391304 33.391304l0 0q0 33.391304-33.391304 33.391304l-111.304348 0q-33.391304 0-33.391304-33.391304l0 0q0-33.391304 33.391304-33.391304Z"  ></path></symbol><symbol id="icon-pm" viewBox="0 0 1271 1024"><path d="M95.161 585.34c-26.341 0-47.775 20.48-47.775 45.726 0 25.212 21.434 45.727 47.775 45.727 26.377 0 47.81-20.515 47.81-45.727 0-25.246-21.433-45.726-47.81-45.726z m181.637-73.199c-21.08 0-38.241 16.42-38.241 36.617 0 20.127 17.09 36.476 38.24 36.582 21.116 0 38.277-16.42 38.277-36.582 0-20.127-17.09-36.51-38.276-36.617z m-86.016-201.198c-36.935 0-66.913 28.743-66.913 64.018 0 35.31 30.013 64.053 66.913 64.053s66.913-28.743 66.913-64.053-30.014-64.018-66.913-64.018z m38.24-219.49c26.342 0 47.776-20.515 47.776-45.726S255.4 0 229.023 0c-26.342 0-47.81 20.515-47.81 45.727 0 25.247 21.433 45.727 47.81 45.727z m850.839 73.164c21.08 0 38.241-16.42 38.241-36.582 0-20.127-17.055-36.475-38.241-36.581-21.08 0-38.241 16.42-38.241 36.581 0 20.127 17.09 36.476 38.241 36.582zM783.466 256.07c36.935 0 66.948-28.708 66.948-64.018s-30.013-64.018-66.913-64.018-66.913 28.708-66.913 64.018 30.014 64.018 66.913 64.018zM506.28 475.56c-31.78 0.141-57.45 24.717-57.38 54.907-0.07 30.19 25.6 54.731 57.344 54.873 31.638 0 57.38-24.647 57.38-54.873 0.07-30.225-25.6-54.73-57.38-54.872z m0-310.943c-31.78 0.141-57.45 24.682-57.38 54.872-0.07 30.226 25.6 54.766 57.344 54.908 31.638 0 57.38-24.647 57.38-54.908 0.07-30.19-25.6-54.73-57.38-54.872z m487.53 475.595c-36.9 0-66.878 28.707-66.878 64.018s30.014 64.017 66.878 64.017c36.899 0 66.913-28.707 66.913-64.017s-30.014-64.018-66.913-64.018z m143.395-237.815c-31.78 0.14-57.38 24.717-57.344 54.872-0.035 30.19 25.6 54.731 57.344 54.872 31.638 0 57.38-24.611 57.38-54.872 0.07-30.19-25.6-54.731-57.38-54.872zM859.983 384.14c-26.341 0-47.81 20.48-47.81 45.692 0 25.247 21.469 45.762 47.81 45.762 26.342 0 47.775-20.515 47.775-45.762 0-25.212-21.433-45.692-47.775-45.692z m-181.671 347.49c-21.116 0-38.277 16.419-38.277 36.58 0 20.128 17.09 36.476 38.277 36.582 21.08 0 38.24-16.419 38.24-36.581 0-20.127-17.09-36.511-38.24-36.582z m76.482-164.653c21.186 0.106 38.276 16.455 38.241 36.617 0 20.127-17.16 36.582-38.241 36.582-21.186-0.106-38.276-16.455-38.241-36.582 0-20.197 17.16-36.617 38.24-36.617zM933.5 1024c-132.52 0-224.998-52.612-231.283-56.355-383.223-234.92-623.263-5.473-633.327 4.413-14.689 14.478-38.84 14.866-54.024 0.919a35.452 35.452 0 0 1-1.095-51.624c2.825-2.825 292.123-283.613 729.017-15.678 7.98 4.59 217.088 121.644 450.384-41.066 8.157-5.72 18.432-8.121 28.46-6.603 10.028 1.518 18.997 6.78 24.964 14.583 12.43 16.314 8.687 39.195-8.403 51.13C1127.953 1000.589 1021.88 1024 933.5 1024z"  ></path></symbol><symbol id="icon-hehu" viewBox="0 0 1251 1024"><path d="M312.660994 665.115205l62.532199 87.715621a163.038496 163.038496 0 0 1-117.219449 7.333321 417.544545 417.544545 0 0 1-78.165249-29.219591 106.077348 106.077348 0 0 0-148.542396 0 60.94047 60.94047 0 0 1-31.266099 14.609795v-109.545042c70.377147-43.886234 148.542396-43.886234 242.283846 21.943117a137.627685 137.627685 0 0 1 39.054201 14.609795A62.532199 62.532199 0 0 1 312.660994 665.115205z m664.376188-65.772504a331.477501 331.477501 0 0 1 164.175445 51.162708l7.788101 7.333322c15.63305 7.333321 31.266099 7.333321 62.532199-14.609796a49.514132 49.514132 0 0 1 31.266099-7.333321v109.658737a147.178057 147.178057 0 0 1-156.330496-7.333321c-15.63305-7.333321-23.477998-21.943117-23.477999-14.609796a176.966122 176.966122 0 0 0-179.808495 7.333322zM281.394894 409.301665L273.606793 511.627081h-15.689897A121.255618 121.255618 0 0 1 187.596596 475.187863a115.968805 115.968805 0 0 0-156.330497 0 41.555488 41.555488 0 0 1-31.266099 14.609796V372.862447c70.3203-43.886234 148.485548-43.886234 242.340694 21.943117a61.906877 61.906877 0 0 0 39.0542 14.496101z m680.066086-58.382335a270.99181 270.99181 0 0 1 179.808495 51.162708l15.633049 14.609796c15.63305 7.333321 31.266099 7.333321 62.532199-14.609796A49.570979 49.570979 0 0 1 1250.643975 394.805564v109.658738a147.178057 147.178057 0 0 1-156.330497-7.333322c-15.63305-7.333321-23.477998-21.943117-23.477998-14.609795a164.857615 164.857615 0 0 0-101.586399-29.219591zM0 986.928639v-109.658738c70.3203-43.886234 148.485548-43.886234 242.340694 21.943117a173.498428 173.498428 0 0 0 39.0542 21.943117 97.607078 97.607078 0 0 0 85.95335-21.943117 284.748894 284.748894 0 0 1 320.449095 0 173.498428 173.498428 0 0 0 39.111048 21.943117 97.607078 97.607078 0 0 0 85.953349-21.943117 284.748894 284.748894 0 0 1 320.505943 0l15.633049 14.609796c15.63305 7.333321 31.266099 7.333321 62.532199-14.609796a49.514132 49.514132 0 0 1 31.266099-7.333321v109.658737a147.178057 147.178057 0 0 1-156.330496-7.333321c-15.63305-7.333321-23.477998-21.943117-23.477999-14.609796a187.596596 187.596596 0 0 0-195.441544 0 167.18836 167.18836 0 0 1-164.118598 36.552913A417.544545 417.544545 0 0 1 625.321988 986.928639a187.596596 187.596596 0 0 0-195.441545 0 197.317511 197.317511 0 0 1-164.118598 29.219591 417.544545 417.544545 0 0 1-78.165249-29.219591 106.077348 106.077348 0 0 0-148.485548 0z m891.083832-504.407454A255.472456 255.472456 0 0 1 625.321988 731.058251a255.472456 255.472456 0 0 1-265.761845-248.537066C359.560143 343.586008 625.321988 0 625.321988 0s265.761845 343.586008 265.761844 482.521185z"  ></path></symbol><symbol id="icon-chengshi1" viewBox="0 0 1024 1024"><path d="M980.992 895.488h-42.496V384c0-47.104-38.4-85.504-85.504-85.504h-170.496V128.512c0-47.104-38.4-85.504-85.504-85.504H171.008c-47.104 0-85.504 38.4-85.504 85.504V896H43.008c-23.552 0-42.496 18.944-42.496 42.496s18.944 42.496 42.496 42.496h937.984c23.552 0 42.496-18.944 42.496-42.496s-18.944-43.008-42.496-43.008z m-383.488 0H171.008V128.512h426.496v766.976z" fill="#949EB2" ></path><path d="M682.496 384h170.496v511.488h-170.496zM469.504 554.496c23.552 0 42.496 18.944 42.496 42.496 0 23.552-18.944 42.496-42.496 42.496H299.008c-23.552 0-42.496-18.944-42.496-42.496 0-23.552 18.944-42.496 42.496-42.496h170.496zM469.504 384c23.552 0 42.496 18.944 42.496 42.496 0 23.552-18.944 42.496-42.496 42.496H299.008c-23.552 0-42.496-18.944-42.496-42.496 0-23.552 18.944-42.496 42.496-42.496h170.496zM469.504 213.504c23.552 0 42.496 18.944 42.496 42.496s-18.944 42.496-42.496 42.496H299.008c-23.552 0-42.496-18.944-42.496-42.496s18.944-42.496 42.496-42.496h170.496z" fill="#949EB2" ></path></symbol><symbol id="icon-yuan" viewBox="0 0 1024 1024"><path d="M511.488 133.12c-211.968 0-384 172.032-384 384s172.032 384 384 384 384-172.032 384-384-172.544-384-384-384z m0 675.84c-160.768 0-291.84-131.072-291.84-291.84s131.072-291.84 291.84-291.84 291.84 131.072 291.84 291.84-131.072 291.84-291.84 291.84z"  ></path></symbol><symbol id="icon-huanzhuangtu1" viewBox="0 0 1024 1024"><path d="M827.050667 354.523429l135.387428-63.097905C891.318857 139.068952 746.349714 28.233143 573.513143 4.827429l-20.21181 147.992381c121.660952 16.457143 223.670857 94.47619 273.749334 201.703619z" fill="#E7F3FF" ></path><path d="M846.140952 405.333333c9.142857 31.47581 14.140952 64.731429 14.140953 99.157334 0 196.071619-158.96381 355.011048-355.011048 355.011047-196.071619 0-355.011048-158.939429-355.011047-354.986666 0-196.071619 158.939429-355.011048 354.986666-355.011048V0.121905C226.718476 0.121905 0.902095 225.938286 0.902095 504.490667c0 278.576762 225.816381 504.393143 504.393143 504.393143 278.552381 0 504.368762-225.816381 504.368762-504.393143 0-48.90819-7.070476-96.158476-20.089905-140.897524l-143.433143 41.74019z" fill="#89A9C6" ></path></symbol><symbol id="icon-jingshi" viewBox="0 0 1024 1024"><path d="M834.035336 644.070671v-220.720848c0-155.590106-108.551237-285.85159-253.286219-318.416961v-3.618374c0-39.80212-32.565371-72.367491-72.367492-72.367492s-72.367491 32.565371-72.367491 72.367492V108.551237c-144.734982 32.565371-253.286219 162.826855-253.286219 318.416961v220.720848c-39.80212 7.236749-72.367491 43.420495-72.367491 86.840989 0 50.657244 39.80212 90.459364 90.459364 90.459364h615.123675c50.657244 0 90.459364-39.80212 90.459364-90.459364 0-47.038869-32.565371-83.222615-72.367491-90.459364zM598.840989 861.173145h-217.102473c-10.855124 0-18.091873 7.236749-18.091873 18.091873 0 68.749117 57.893993 126.64311 126.64311 126.643109s126.64311-57.893993 126.643109-126.643109c0-10.855124-10.855124-18.091873-18.091873-18.091873z" fill="#FF8401" ></path></symbol><symbol id="icon-zhengchang" viewBox="0 0 1024 1024"><path d="M775.649882 321.295059c-15.119059-15.841882-44.754824-25.479529-69.511529 0l-279.491765 298.767059L302.742588 483.087059a37.044706 37.044706 0 0 0-54.39247 0 40.719059 40.719059 0 0 0 0 56.44047l154.864941 161.792c8.252235 8.252235 15.841882 17.227294 31.021176 17.227295 15.119059 0 23.371294-9.637647 30.960941-17.227295l310.452706-322.861176a40.357647 40.357647 0 0 0 0-57.163294zM512 30.117647c265.035294 0 481.882353 216.847059 481.882353 481.882353s-216.847059 481.882353-481.882353 481.882353-481.882353-216.847059-481.882353-481.882353 216.847059-481.882353 481.882353-481.882353z" fill="#20B572" ></path></symbol><symbol id="icon-zhihou" viewBox="0 0 1024 1024"><path d="M512 64l512 896H0L512 64z m32 704h-64v64h64v-64z m0-384h-64v320h64V384z" fill="#d81e06" ></path></symbol><symbol id="icon-56" viewBox="0 0 1024 1024"><path d="M841.955556 238.933333 204.8 238.933333c-37.705956 0-68.266667 30.560711-68.266667 68.266667l0 398.222222c0 37.705956 30.560711 68.266667 68.266667 68.266667l637.155556 0c37.705956 0 68.266667-30.560711 68.266667-68.266667L910.222222 307.2C910.222222 269.494044 879.661511 238.933333 841.955556 238.933333zM796.444444 671.288889 637.155556 671.288889l0-79.644444 159.288889 0L796.444444 671.288889zM876.088889 443.733333 170.666667 443.733333l0-91.022222 705.422222 0L876.088889 443.733333z"  ></path></symbol><symbol id="icon-nav" viewBox="0 0 1024 1024"><path d="M888.838 319.775l-751.1 0c-23.944 0-43.339-19.553-43.339-43.646l0-40.012c0-24.093 19.395-43.645 43.339-43.645l751.1 0c23.923 0 43.334 19.554 43.334 43.645l0 40.012c-0.001 24.093-19.411 43.646-43.333 43.646l0 0zM888.838 587.509l-751.1 0c-23.944 0-43.339-19.533-43.339-43.64l0-39.998c0-24.115 19.395-43.647 43.339-43.647l751.1 0c23.923 0 43.334 19.533 43.334 43.647l0 39.998c-0.001 24.107-19.411 43.64-43.333 43.64l0 0zM888.838 876.17l-751.1 0c-23.944 0-43.339-19.532-43.339-43.627l0-40.017c0-24.093 19.395-43.641 43.339-43.641l751.1 0c23.923 0 43.334 19.548 43.334 43.641l0 40.017c-0.001 24.094-19.411 43.627-43.333 43.627l0 0z"  ></path></symbol><symbol id="icon-quyu" viewBox="0 0 1024 1024"><path d="M872.873539 149.784767c-96.582035-96.58338-224.945355-149.784767-361.54304-149.784767-136.57483 0-264.979826 53.181222-361.541695 149.763257C53.205424 246.346636 0.002692 374.751633 0.002692 511.327807c0 99.519519 28.60719 195.973837 82.730826 278.961441 10.721478 16.491583 32.76672 21.079973 49.213939 10.37866 16.468729-10.721478 21.100138-32.765376 10.35715-49.234105-46.533233-71.428573-71.150285-154.439031-71.150285-240.105996 0-242.722172 197.45535-440.177522 440.176177-440.177522 242.723516 0 440.177522 197.45535 440.177522 440.177522 0 242.720827-197.45535 440.176178-440.177522 440.176178-80.370084 0-159.004566-21.850306-227.389449-63.194209-16.811547-10.164903-38.684707-4.781981-48.84961 12.051076-10.163558 16.812891-4.760471 38.684707 12.030911 48.8281C326.636061 997.24403 417.964236 1022.655614 511.330499 1022.655614c136.576174 0 264.961005-53.181222 361.54304-149.763257 96.58338-96.58338 149.784767-224.96821 149.784767-361.56455 0-136.576174-53.201387-264.981171-149.784767-361.54304z"  ></path><path d="M686.798417 275.42705c-46.892184-46.687837-109.207164-72.400564-175.470606-72.400564-66.260753 0-128.574389 25.712727-175.465229 72.400564-47.066954 46.863952-72.988061 109.388656-72.988061 176.05407 0 47.615464 29.642367 113.733712 88.102993 196.515624 48.169351 68.207424 103.857852 130.529126 132.767529 161.607298l0.170737 0.177459c7.622669 7.615947 18.383134 12.5364 27.412031 12.536399 10.826341 0 21.175424-4.812902 27.74006-12.888629 28.95673-31.137324 84.532303-93.354164 132.61158-161.431183 58.464659-82.783257 88.10837-148.900161 88.108371-196.516968 0-66.665413-25.921107-129.190118-72.989405-176.05407z m14.222259 176.05407c0 27.277592-18.614369 71.814412-52.413577 125.404326-33.822063 53.630247-81.196882 114.313142-137.251056 175.841657-115.430327-128.129397-189.717065-245.950042-189.717065-301.245983 0-50.815102 19.689877-98.491063 55.443823-134.243665s83.428562-55.443823 134.243665-55.443824c50.813758 0 98.491063 19.689877 134.245009 55.443824 35.757979 35.753946 55.449201 83.429907 55.449201 134.243665z"  ></path><path d="M511.327811 339.00172c-30.29305 0-58.607164 11.631628-79.727468 32.751932-21.11896 21.120304-32.750588 49.434418-32.750588 79.727468s11.631628 58.608508 32.750588 79.727467c21.11896 21.120304 49.434418 32.750588 79.727468 32.750588 30.295739 0 58.611197-11.630283 79.728812-32.750588 21.116271-21.117615 32.74521-49.433073 32.74521-79.727467 0-30.29305-11.628939-58.607164-32.74521-79.726124-21.11896-21.120304-49.433073-32.753276-79.728812-32.753276z m53.708221 112.4794c0 29.618168-24.094086 53.713599-53.708221 53.713598-29.616824 0-53.713599-24.09543-53.713599-53.713598 0-29.615479 24.09543-53.709565 53.713599-53.709566 29.614135 0 53.708221 24.094086 53.708221 53.709566z"  ></path></symbol><symbol id="icon-wenhua" viewBox="0 0 1365 1024"><path d="M1092.266667 341.333333H136.533333C68.266667 341.333333 0 273.066667 0 136.533333c0-68.266667 68.266667-136.533333 136.533333-136.533333h955.733334c-68.266667 0-136.533333 68.266667-136.533334 136.533333 0 136.533333 68.266667 204.8 136.533334 204.8z" fill="" ></path><path d="M204.8 682.666667h955.733333c136.533333 0 136.533333-68.266667 136.533334-136.533334s0-136.533333-136.533334-136.533333H204.8c136.533333 0 204.8 68.266667 204.8 136.533333s-68.266667 136.533333-204.8 136.533334zM1092.266667 1024H136.533333c-68.266667 0-136.533333-68.266667-136.533333-136.533333s68.266667-136.533333 136.533333-136.533334h955.733334c-68.266667 0-136.533333 68.266667-136.533334 136.533334s68.266667 136.533333 136.533334 136.533333z" fill="" ></path></symbol><symbol id="icon-iconshuangzhaoshuangyin" viewBox="0 0 1264 1024"><path d="M883.169882 921.057882c-5.782588-188.958118-135.168-347.678118-309.248-398.45647 3.011765-1.505882 11.625412-6.686118 12.950589-7.348706 9.035294-5.059765 30.117647-19.395765 32.165647-20.901647 7.529412-5.782588 27.708235-23.913412 30.599529-26.864941 5.541647-5.601882 34.575059-41.743059 37.345882-46.260706 5.782588-9.035294 10.842353-18.492235 15.480471-28.129883 0.602353-1.385412 1.445647-2.529882 2.048-3.855058a270.095059 270.095059 0 0 0 25.178353-113.844706A275.215059 275.215059 0 0 0 454.716235 0.481882h-0.361411a275.275294 275.275294 0 0 0-274.974118 274.913883 275.094588 275.094588 0 0 0 155.648 247.265882C161.069176 573.44 31.683765 732.16 25.901176 920.997647c-0.060235 0.903529-0.602353 1.686588-0.602352 2.529882 0 0.602353 0.301176 0.963765 0.361411 1.445647a37.345882 37.345882 0 0 0 3.734589 14.878118 37.345882 37.345882 0 0 0 67.764705-0.722823 37.888 37.888 0 0 0 2.650353-11.264c0.240941-1.505882 0.903529-2.770824 0.90353-4.336942 0-1.505882-0.722824-2.891294-0.90353-4.457411 0-5.601882 0.120471-11.083294-0.060235-16.685177-0.180706-3.312941 0.662588-5.963294 1.385412-8.673882h-0.963765a356.954353 356.954353 0 0 1 138.11953-242.56753c1.385412-0.783059 2.891294-1.325176 4.21647-2.228705a18.853647 18.853647 0 0 0 0.722824 0.662588 353.581176 353.581176 0 0 1 152.997647-66.861177l2.951529-0.481882c8.252235-1.325176 16.564706-2.469647 25.057882-3.192471 7.408941-0.602353 14.938353-0.903529 22.40753-1.084235 2.650353-0.060235 5.180235-0.361412 7.890823-0.361412 11.806118 0 23.491765 0.843294 34.936471 2.048l0.060235-0.301176a357.918118 357.918118 0 0 1 319.427765 314.428235h-0.963765c0.722824 2.650353 1.566118 5.300706 1.385412 8.613647-0.180706 5.601882 0 11.083294 0 16.745412-0.301176 1.566118-0.963765 2.891294-0.963765 4.457412 0 1.566118 0.602353 2.831059 0.843294 4.276706 0.481882 3.975529 1.144471 7.830588 2.710589 11.264a37.466353 37.466353 0 0 0 34.153411 22.106353 37.466353 37.466353 0 0 0 37.345883-36.261648c0-0.481882 0.240941-0.843294 0.240941-1.385411 0-0.903529-0.481882-1.686588-0.542118-2.590118M252.385882 275.335529a202.631529 202.631529 0 0 1 202.209883-202.330353 202.571294 202.571294 0 0 1 202.209882 202.390589 202.631529 202.631529 0 0 1-202.209882 202.390588 202.571294 202.571294 0 0 1-202.209883-202.390588" fill="#A5DCFF" ></path><path d="M1227.776 930.032941c-5.782588-188.897882-135.228235-347.557647-309.127529-398.396235a274.913882 274.913882 0 0 0 155.587764-247.265882A275.275294 275.275294 0 0 0 800.286118 9.637647V10.24a35.960471 35.960471 0 0 0-33.490824 35.719529c0 18.974118 14.817882 34.153412 33.490824 35.659295v0.361411l2.650353 0.180706h0.180705a202.571294 202.571294 0 0 1 198.234353 202.149647c0 102.881882-79.691294 198.354824-179.501176 212.630588v0.301177a45.658353 45.658353 0 0 0-23.913412 11.203765 45.718588 45.718588 0 0 0-14.697412 33.430588c0 14.215529 6.866824 26.503529 16.926118 34.93647 7.890824 6.625882 17.829647 11.083294 28.912941 11.14353l-0.180706 0.060235h0.602353c8.432941 0.783059 16.745412 1.867294 24.997647 3.252706l3.011765 0.361412a353.641412 353.641412 0 0 1 152.937412 66.981647 17.950118 17.950118 0 0 0 0.722823-0.722824c1.325176 0.963765 2.831059 1.505882 4.216471 2.228706a357.074824 357.074824 0 0 1 138.119529 242.56753h-0.903529c0.602353 2.770824 1.505882 5.421176 1.385412 8.673882-0.301176 5.601882-0.120471 11.143529-0.120471 16.745412-0.240941 1.566118-0.903529 2.891294-0.903529 4.517647 0 1.505882 0.602353 2.831059 0.903529 4.21647 0.421647 3.975529 1.024 7.830588 2.590118 11.264a37.647059 37.647059 0 0 0 34.213647 22.166589 37.466353 37.466353 0 0 0 33.611294-21.443765 37.767529 37.767529 0 0 0 3.734588-14.878118c0-0.421647 0.301176-0.903529 0.301177-1.325176 0-0.963765-0.481882-1.686588-0.602353-2.650353" fill="#A5DCFF" ></path><path d="M831.247059 590.366118h0.301176l-0.963764-0.120471z" fill="#A5DCFF" ></path></symbol><symbol id="icon-xunhuan" viewBox="0 0 1024 1024"><path d="M753.8 173.5L670 45.3l-20.3 40.3C605.3 71.2 559.1 64 512 64c-94.1 0-184.2 28.9-260.4 83.4l37.2 52C354.2 152.7 431.3 128 512 128c37 0 73.3 5.2 108.3 15.5L600.9 182l152.9-8.5zM772.4 876.6l-37.2-52C669.8 871.3 592.7 896 512 896c-37 0-73.3-5.2-108.3-15.5l19.5-38.5-152.9 8.6L354 978.7l20.3-40.3C418.7 952.8 464.9 960 512 960c94.1 0 184.2-28.9 260.4-83.4zM938.4 649.6C952.8 605.3 960 559.1 960 512c0-94.1-28.9-184.2-83.4-260.4l-52 37.2C871.3 354.2 896 431.3 896 512c0 37-5.2 73.3-15.5 108.3L842 600.9l8.6 152.9L978.7 670l-40.3-20.4zM128 512c0-37 5.2-73.3 15.5-108.3l38.5 19.5-8.6-152.9L45.3 354l40.3 20.3C71.2 418.7 64 464.9 64 512c0 94.1 28.9 184.2 83.4 260.4l52-37.2C152.7 669.8 128 592.7 128 512zM512 300c-16.4 0-32.6 1.9-48.4 5.5L451.8 280l-55 78.4 95.4 8.4-11.2-24c10.2-1.9 20.6-2.8 31-2.8 37.6 0 73.3 11.9 103.2 34.4l24-32C602.3 314.7 558.3 300 512 300zM627.2 665.6l-95.4-8.4 11.2 24c-10.2 1.9-20.6 2.8-31 2.8-37.6 0-73.3-11.9-103.2-34.4l-24 32C421.7 709.3 465.7 724 512 724c16.4 0 32.6-1.9 48.4-5.5l11.9 25.5 54.9-78.4zM340 512c0-37.6 11.9-73.3 34.4-103.2l-32-24C314.7 421.7 300 465.7 300 512c0 16.4 1.9 32.6 5.5 48.4L280 572.2l78.4 55 8.4-95.4-24 11.2c-1.9-10.2-2.8-20.5-2.8-31zM744 451.8l-78.4-55-8.4 95.4 24-11.2c1.9 10.2 2.8 20.6 2.8 31 0 37.6-11.9 73.3-34.4 103.2l32 24C709.3 602.3 724 558.3 724 512c0-16.4-1.9-32.6-5.5-48.4l25.5-11.8z"  ></path></symbol><symbol id="icon-shangwu" viewBox="0 0 1024 1024"><path d="M142.6 909.1c-21.3 0-42.5-8.9-58.3-24.4-15.8-15.6-24.9-36.5-24.9-57.4V326.7c0-21.2 9-40.9 25.3-55.4 15.7-14 36.3-21.7 58-21.7h142.2v-57.7c0-45.1 39.5-81.9 88.1-81.9h274.7c23.6 0 45.8 8.6 62.4 24.3 16.3 15.3 25.7 36.3 25.7 57.6v57.7H877.7c21.2 0 42.4 8.9 58.2 24.4 15.9 15.6 25 36.5 25 57.5v495.7c0 21.7-8.2 42.1-23 57.3-15.4 15.8-36.8 24.6-60.3 24.6h-735zM127.8 827c0 8.9 5.5 14.2 14.8 14.2h735.1c9.2 0 14.7-5.3 14.7-14.1V497.5c-5 2.4-10.3 4.7-16 6.9l-0.2 0.1-287.7 97v21.9c0 29.3-24.2 53.1-53.9 53.1h-49.1c-14.4 0-28-5.5-38.1-15.5-10.2-10-15.8-23.4-15.8-37.6v-17.5L144.2 499.5c-5.8-1.9-11.3-3.9-16.4-6V827z m402-208.7v-81.5h-39.3v81.5h39.3z m-98-81.5V532c0-14.3 5.6-27.7 15.8-37.7 10.1-9.9 23.7-15.4 38.1-15.4h49.1c14.4 0 27.9 5.5 38 15.5 10.1 10 15.6 23.3 15.7 37.5l266.4-94c19.1-7.3 29.1-13.2 33.1-19.8 3.9-6.4 3.9-16.1 3.8-30.8v-55.7c0-0.6-0.2-14.2-14.7-14.2H140.3c-7.8 0.9-12.4 6-12.4 14.2v52.9c0 15.8 0 26.3 4.3 34.4 4.5 8.4 14.5 15.5 33.5 23.9l266.1 94z m235.1-287.2v-57.7c0-3.5 0-14.2-19.7-14.2H372.9c-9.5 0-19.6 5.7-19.6 14.2v57.7h313.6z"  ></path></symbol><symbol id="icon-yufangbaojianke" viewBox="0 0 1024 1024"><path d="M515.4 98.2h-3.6c-83.1 101-268.1 81.9-335.4 80.2v348.2c0 286.7 337.2 401.6 337.2 401.6s337.2-111.6 337.2-401.6V178.4c-96.2 2.4-252.3 20.8-335.4-80.2z m153.8 453.9H552.5v116.7h-77.8V552.1H357.9v-77.8h116.7V357.6h77.8v116.7h116.7v77.8z"  ></path></symbol><symbol id="icon-huayuan" viewBox="0 0 1024 1024"><path d="M285.474133 631.466667l-5.085866-28.023467A34.133333 34.133333 0 0 1 313.9584 563.2H477.866667v-69.205333c-76.8-8.482133-136.533333-73.591467-136.533334-152.661334v-153.6h51.2c17.117867-23.4496 49.8688-45.7216 66.986667-57.4464A300.373333 300.373333 0 0 1 510.890667 102.4s25.685333 10.308267 51.370666 27.886933c11.4176 7.816533 34.474667 26.965333 69.205334 57.4464h51.2v153.6c0 79.069867-59.733333 144.1792-136.533334 152.661334V563.2h163.908267a34.133333 34.133333 0 0 1 33.570133 40.2432L738.525867 631.466667H768l17.066667-125.2864A102.434133 102.434133 0 0 1 716.8 409.6v-34.133333a102.4 102.4 0 1 1 204.8 0v34.133333a102.434133 102.434133 0 0 1-68.266667 96.580267L836.266667 631.466667h119.125333A34.304 34.304 0 0 1 989.866667 665.6c0 2.491733-0.273067 4.9664-0.8192 7.406933L944.7424 870.4H955.733333a34.133333 34.133333 0 1 1 0 68.266667H68.266667a34.133333 34.133333 0 1 1 0-68.266667h10.990933L34.952533 673.006933A33.809067 33.809067 0 0 1 34.133333 665.6c0-18.858667 15.428267-34.133333 34.474667-34.133333H187.733333l-17.066666-125.2864A102.434133 102.434133 0 0 1 102.4 409.6v-34.133333a102.4 102.4 0 1 1 204.8 0v34.133333a102.434133 102.434133 0 0 1-68.266667 96.580267L256 631.466667h29.474133z m409.6 238.933333h179.712L913.066667 699.733333H726.101333l-31.0272 170.666667z m-366.148266 0l-31.0272-170.666667H110.916267l38.314666 170.666667h179.694934zM819.2 341.333333a34.133333 34.133333 0 0 0-34.133333 34.133334v34.133333a34.133333 34.133333 0 1 0 68.266666 0v-34.133333a34.133333 34.133333 0 0 0-34.133333-34.133334z m-614.4 0a34.133333 34.133333 0 0 0-34.133333 34.133334v34.133333a34.133333 34.133333 0 1 0 68.266666 0v-34.133333a34.133333 34.133333 0 0 0-34.133333-34.133334z m347.579733-131.703466c-13.9264-11.776-23.688533-19.592533-28.740266-23.04-4.061867-2.781867-8.3456-5.461333-12.7488-8.021334-4.437333 2.56-8.721067 5.256533-12.8 8.055467-14.045867 9.608533-21.0432 14.609067-29.405867 21.282133A154.333867 154.333867 0 0 1 512 244.770133a154.385067 154.385067 0 0 1 40.379733-35.157333zM546.133333 341.333333v83.626667a85.367467 85.367467 0 0 0 68.266667-83.626667v-83.626666a85.367467 85.367467 0 0 0-68.266667 83.626666z m-136.533333 0a85.367467 85.367467 0 0 0 68.266667 83.626667V341.333333a85.367467 85.367467 0 0 0-68.266667-83.626666V341.333333z m-54.7328 290.133334l43.434667 238.933333h227.396266l43.434667-238.933333H354.8672z" fill="#222222" ></path><path d="M392.533333 665.6h238.933334l-17.066667 85.333333H409.6z" fill="#FFDF32" ></path></symbol><symbol id="icon-juxing" viewBox="0 0 1024 1024"><path d="M54.912 960c124.928 124.992 428.864 23.68 678.784-226.304C983.68 483.84 1084.992 179.84 960 54.912 835.008-70.08 531.136 31.232 281.152 281.152 31.232 531.2-70.08 835.008 54.912 960z m63.36-63.36c-78.08-78.08 6.848-332.672 226.24-552.128C563.968 125.12 818.624 40.192 896.64 118.272c78.08 78.08-6.848 332.672-226.24 552.128-219.52 219.392-474.112 304.256-552.128 226.24z" fill="#727484" ></path><path d="M960 960c124.992-124.992 23.68-428.864-226.304-678.848C483.84 31.232 179.84-70.08 54.912 54.912-70.08 179.84 31.232 483.776 281.152 733.696 531.2 983.68 835.008 1084.992 960 960z m-63.36-63.36c-78.08 78.08-332.672-6.848-552.128-226.24C125.12 450.88 40.192 196.288 118.272 118.272c78.08-78.08 332.672 6.848 552.128 226.24 219.392 219.456 304.256 474.112 226.24 552.128z" fill="#727484" ></path><path d="M512 512m-128 0a128 128 0 1 0 256 0 128 128 0 1 0-256 0Z" fill="#68A2FD" ></path></symbol><symbol id="icon-shengtai" viewBox="0 0 1024 1024"><path d="M917.504 10.24c-6.144-6.656-14.848-9.216-24.064-10.24C431.616 9.216 144.896 116.736 41.984 320c-77.824 152.576-25.6 324.096 28.16 402.432 6.144 9.216 41.984 19.968 53.248 18.944 10.752-0.512 20.992-6.656 26.112-16.384 15.872-29.696 41.984-71.168 75.776-119.296-1.536-1.024-3.584-2.56-4.608-4.608-121.856-168.96-1.024-316.416 0-317.952 6.656-9.216 19.456-10.752 28.672-4.096 9.216 6.656 10.752 19.456 4.096 28.672-3.584 4.608-81.408 114.688 10.24 238.592 1.024 1.024 1.536 2.56 2.048 3.584 26.112-34.816 54.272-70.656 84.48-107.008-31.232-135.68 53.248-213.504 56.32-217.088 7.168-8.704 19.968-10.24 28.672-2.56 8.704 7.168 10.24 19.968 3.072 28.672-0.512 1.024-47.616 59.904-35.84 131.072 107.52-120.32 225.28-225.28 307.712-236.032-123.904 104.448-210.432 190.976-276.48 267.264 120.832 36.352 206.848-27.136 207.872-27.648 9.216-6.656 22.016-5.12 28.672 4.096 6.656 9.216 5.12 22.016-4.096 28.672-3.584 2.56-64.512 62.976-157.184 62.976-30.208 0-81.92-0.512-120.832-12.288-27.648 35.328-51.712 68.608-73.216 100.864 145.92 48.64 238.08-39.936 239.104-40.448 8.192-7.68 20.992-7.68 29.184 0 7.68 8.192 7.68 20.992 0 29.184-3.584 3.584-85.504 93.184-196.096 93.184-33.28 0-70.656-5.632-111.104-20.992-22.528 35.84-43.52 70.656-66.048 106.496-10.24 13.824-87.552 125.44-48.64 262.656 4.096 13.824 16.384 23.04 30.72 23.04 3.072 0 6.144-0.512 8.704-1.024 16.896-5.12 26.624-22.528 22.016-39.424-23.04-80.896 6.656-152.576 25.6-186.88 129.024 54.272 249.344 53.76 350.208-2.56 172.544-96.768 282.624-351.744 327.68-758.272 0.512-9.216-2.048-18.432-8.704-25.6zM906.752 592.384c-10.752-21.504-46.08-21.504-56.832 0-18.944 38.4-114.688 231.936-114.688 294.4 0 75.776 64.512 137.216 143.36 137.216s143.36-61.44 143.36-137.216c-0.512-62.464-96.256-256.512-115.2-294.4z"  ></path></symbol><symbol id="icon-gaige" viewBox="0 0 1024 1024"><path d="M522.7 501.5c-4-4-11.9-4-18 0-3.9 4-9.9 9.9-9.9 16s3.9 11.9 9.9 16c4 4 11.9 4 18 0 3.9-4 9.9-10 9.9-16 0-8.1-3.9-14-9.9-16z" fill="#474747" ></path><path d="M608.6 742.7c-29.9 12.1-61.8 20-93.8 20-131.6 0-239.2-103.7-243.2-235.3h87.7l27.9 61.8c4 5.9 10 11.9 18 11.9s14-4 18-11.9L479 473.6l4 4c3.9 9.9 16 14 25.9 9.9 9.9-3.9 14-16 9.9-25.9l-20-41.9c-4-5.9-10-11.9-18-11.9s-14 4-18 11.9L405 535.3l-18-35.9c-4-5.9-10-11.9-18-11.9h-97.7c0-4 2-7.9 2-11.9 2-4 2-9.9 4-14 4-11.9-4-23.9-18-27.9-11.9-3.9-23.9 4-27.9 18-2 6-4 11.9-4 18-4 16-4 31.9-4 47.9 0 157.5 129.6 289.1 289.1 289.1 37.8 0 75.7-8 111.6-22 11.9-4 15.8-18 12.2-28-3.8-14-17.7-18-27.7-14z" fill="#474747" ></path><path d="M518.7 565.5l25.9 57.8c4 5.9 9.9 11.9 16 11.9h2c6 0 11.9-3.9 16-9.9l53.8-91.7H700c12.1 0 20-8 20-20 0-12.1-8-20-20-20h-77.8c-6 0-11.9 3.9-16 9.9l-41.9 69.8-11.9-23.9c-3.9-10-15.8-14-25.9-9.8-7.8 5.9-13.9 15.9-7.8 25.9z" fill="#474747" ></path><path d="M511.2 64.5C263.8 64.4 63.3 265 63.3 512.4s200.5 447.9 447.9 447.9 447.9-200.5 447.9-447.9S758.6 64.5 511.2 64.5z m0.1 776.3c-179.5 0-324.9-145.4-324.9-324.9S331.8 191 511.3 191s324.9 145.4 324.9 324.9-145.4 324.9-324.9 324.9z" fill="#474747" ></path><path d="M678.2 714.8c-6-4-14-4-20 0-5.9 4-11.9 12.1-11.9 20 0 8 4 14 11.9 20 6 4 14 4 20 0s11.9-12.1 11.9-20c-2-10.1-5.9-16-11.9-20zM512.6 230.3c-99.7 0-191.4 49.9-243.2 133.6-5.9 9.9-3.9 23.9 6 29.9 11.9 5.9 23.9 3.9 29.9-6C351.2 316 429 274.2 512.8 274.2c135.5 0 245.2 109.6 245.2 243.2 0 59.8-22 119.6-63.8 163.5-7.9 9.9-7.9 24 2 31.9 4 4 9.9 6 14 6 6 0 11.9-3.9 16-7.9 47.8-51.9 75.7-121.7 75.7-193.5-0.2-157.5-129.8-287.1-289.3-287.1z" fill="#474747" ></path></symbol><symbol id="icon-chengshi" viewBox="0 0 1024 1024"><path d="M160 896H96V128a64 64 0 0 1 64-64h384a64 64 0 0 1 64 64v768h-64V128H160v768z m704-416h64v416h-64zM80 960a32 32 0 0 1 0-64h848a32 32 0 0 1 0 64H80z m891.648-477.824a32 32 0 0 1-23.296 59.648L564.16 391.84a32 32 0 0 1 23.264-59.616L971.68 482.176z m-267.264 103.84a32 32 0 1 1 0 64h-128.64a32 32 0 0 1 0-64h128.64z m0 128a32 32 0 1 1 0 64h-128.64a32 32 0 0 1 0-64h128.64zM320 576a32 32 0 0 1-64 0v-64a32 32 0 0 1 64 0v64z m0-224a32 32 0 0 1-64 0v-64a32 32 0 0 1 64 0v64z m128 0a32 32 0 1 1-64 0v-64a32 32 0 1 1 64 0v64z m0 224a32 32 0 0 1-64 0v-64a32 32 0 0 1 64 0v64zM320 928h-64V714.016h201.6V928h-64V778.016H320z"  ></path></symbol><symbol id="icon-indexactive" viewBox="0 0 1024 1024"><path d="M459.072 59.584c28.928-26.176 72.96-26.176 101.824 0l411.648 390.912a37.952 37.952 0 0 1-50.816 56.384l-6.592-6.208v408a75.968 75.968 0 0 1-75.904 76.032H618.176v-228.672a53.504 53.504 0 0 0-53.504-53.568H460.672a53.504 53.504 0 0 0-53.504 53.568v228.672H180.928a75.968 75.968 0 0 1-75.968-76.032V505.6c-16.896 15.296-40.832 14.08-54.848-1.536a37.952 37.952 0 0 1 2.688-53.632L459.072 59.648z"  ></path></symbol><symbol id="icon-shengchanguanli" viewBox="0 0 1024 1024"><path d="M323.84 372.48v21.12a27.52 27.52 0 0 1-20.48 26.24 151.68 151.68 0 0 0-34.56 14.72 31.36 31.36 0 0 1-33.92-4.48l-15.36-14.72a28.8 28.8 0 0 0-40.32 0l-16.64 16.64-16.64 16a29.44 29.44 0 0 0 0 40.32l14.72 15.36a31.36 31.36 0 0 1 3.84 33.92c-5.12 11.52-10.24 23.04-14.72 34.56a28.16 28.16 0 0 1-26.24 20.48h-21.76a30.08 30.08 0 0 0-28.16 29.44v46.72a27.52 27.52 0 0 0 26.88 28.16h21.12a26.88 26.88 0 0 1 26.88 19.84 140.8 140.8 0 0 0 14.72 34.56 31.36 31.36 0 0 1-4.48 33.92l-14.72 15.36a28.16 28.16 0 0 0 0 40.32l17.28 16.64 16.64 17.28a29.44 29.44 0 0 0 40.32 0l15.36-14.72a30.08 30.08 0 0 1 33.92-3.84l34.56 14.72a28.16 28.16 0 0 1 20.48 26.24v21.12a29.44 29.44 0 0 0 28.8 26.88h47.36a27.52 27.52 0 0 0 28.16-26.88v-21.12a26.88 26.88 0 0 1 21.12-21.76 170.24 170.24 0 0 0 34.56-14.72 30.08 30.08 0 0 1 33.92 3.84l15.36 14.72a28.16 28.16 0 0 0 40.32 0l33.92-33.92a28.8 28.8 0 0 0 0-39.68l-14.72-16a30.08 30.08 0 0 1-3.84-33.92c5.12-11.52 10.24-23.04 14.72-34.56a27.52 27.52 0 0 1 28.16-17.28h21.12a28.16 28.16 0 0 0 26.88-28.16v-51.2a27.52 27.52 0 0 0-26.88-28.16h-21.12A26.24 26.24 0 0 1 604.16 576a215.68 215.68 0 0 0-14.72-34.56 30.08 30.08 0 0 1 3.84-33.92l14.72-16a27.52 27.52 0 0 0 0-39.68l-17.28-16.64L576 417.28a29.44 29.44 0 0 0-40.32 0l-15.36 14.72a31.36 31.36 0 0 1-33.92 3.84L448 420.48a27.52 27.52 0 0 1-19.84-26.24v-21.12a29.44 29.44 0 0 0-28.16-27.52h-46.72a29.44 29.44 0 0 0-29.44 26.88z m166.4 275.2a113.92 113.92 0 1 1-113.92-113.28 113.92 113.92 0 0 1 113.92 113.28z m300.8-561.92l-6.4 14.08a21.76 21.76 0 0 1-19.84 11.52 90.24 90.24 0 0 0-26.24 0 20.48 20.48 0 0 1-19.84-11.52l-6.4-14.08a19.84 19.84 0 0 0-25.6-10.24l-29.44 12.8a21.12 21.12 0 0 0-11.52 24.96l5.76 13.44a19.2 19.2 0 0 1-6.4 22.4 245.76 245.76 0 0 0-19.2 17.92 21.76 21.76 0 0 1-21.76 6.4l-14.08-5.12a18.56 18.56 0 0 0-24.96 10.24l-6.4 13.44-6.4 14.72a19.2 19.2 0 0 0 9.6 25.6l14.08 7.04a21.12 21.12 0 0 1 11.52 20.48 179.2 179.2 0 0 0 0 26.24 19.2 19.2 0 0 1-11.52 19.84l-13.44 6.4a19.84 19.84 0 0 0-10.88 24.96l12.8 29.44a20.48 20.48 0 0 0 25.6 11.52l13.44-5.12a18.56 18.56 0 0 1 21.76 6.4l17.92 19.2a20.48 20.48 0 0 1 6.4 21.76l-5.12 14.08a19.84 19.84 0 0 0 10.24 24.96l30.08 12.8a19.2 19.2 0 0 0 24.96-9.6l6.4-13.44a20.48 20.48 0 0 1 19.84-11.52h26.24a17.92 17.92 0 0 1 19.84 11.52l6.4 13.44a19.84 19.84 0 0 0 25.6 10.24l14.72-5.76 14.72-6.4a21.12 21.12 0 0 0 11.52-25.6l-5.12-13.44a19.84 19.84 0 0 1 6.4-22.4l17.92-15.36a21.12 21.12 0 0 1 22.4-6.4l13.44 5.12a20.48 20.48 0 0 0 25.6-10.88l12.16-29.44a18.56 18.56 0 0 0-8.96-24.96l-14.08-6.4a21.76 21.76 0 0 1-11.52-19.84 90.24 90.24 0 0 0 0-26.24 20.48 20.48 0 0 1 11.52-20.48l14.08-6.4a19.2 19.2 0 0 0 10.24-24.96l-6.4-14.72-6.4-14.72a20.48 20.48 0 0 0-24.96-11.52l-15.36 3.2a18.56 18.56 0 0 1-21.76-6.4 162.56 162.56 0 0 0-17.92-18.56 23.04 23.04 0 0 1-5.12-22.4l5.12-13.44a19.84 19.84 0 0 0-10.24-25.6l-14.08-6.4-14.72-5.76a19.84 19.84 0 0 0-25.6 8.96z m30.72 218.88a78.08 78.08 0 1 1-40.96-101.76 77.44 77.44 0 0 1 40.96 101.76z"  ></path></symbol><symbol id="icon-xiangcun" viewBox="0 0 1024 1024"><path d="M183.9 712.9c9 0 17.6-1.4 25.9-3.5-8.7 1.3-17.5 2.4-26.2 3.5h0.3z"  ></path><path d="M470.5 160.2c3.1 2.2 6 4.7 8.8 7.3-2.9-2.6-5.9-5-8.8-7.3zM335.7 168.9c0.4-0.3 0.8-0.6 1.1-0.9-0.4 0.3-0.7 0.6-1.1 0.9z"  ></path><path d="M336.8 168c5.2-4.3 10.6-8.4 16-12.1-5.7 3.6-11 7.6-16 12.1zM332.6 171.7c1-0.9 2.1-1.8 3.1-2.7-1 0.9-2.1 1.7-3.1 2.7zM479.3 167.5c1.7 1.5 3.5 3 5.2 4.6-1.6-1.7-3.4-3.1-5.2-4.6zM466.6 157.4c1.3 0.9 2.6 1.8 3.9 2.8-1.3-0.9-2.5-1.9-3.9-2.8z"  ></path><path d="M932.9 607.3c-1.4-4-2.7-7.7-4-11.4-21.5-61.9-35.1-97.5-82.6-181.1-13.5-23.8-39.9-64.1-62-86.2-9.8-12.3-24.7-20.3-41.6-20.3-24.7 0-45.3 16.9-51.4 39.8-1.2 4.4-2 8.9-2 13.6 0 5.8 1.2 11.3 2.9 16.5l7.5 14.9L754 500c8 15.8 1.6 35-14.1 43-4.6 2.3-9.6 3.5-14.4 3.5-11.7 0-22.9-6.4-28.6-17.6l-6.3-12.5c-2.2-3-4-6.8-5.9-11.6l-110.8-219c-27-42.7-58.1-85.1-89.3-113.6-1.7-1.6-3.5-3.1-5.2-4.6-2.8-2.6-5.7-5.1-8.8-7.3-1.3-1-2.6-1.9-3.9-2.8-16.8-11-36.7-17.5-58.2-17.5-20.4 0-39.3 6-55.5 16-5.5 3.7-10.8 7.7-16 12.1-0.4 0.3-0.8 0.6-1.1 0.9-1.1 0.9-2.1 1.8-3.1 2.7-6.8 6-13.5 12.3-19.9 18.9C221.8 284 146.3 434.1 85.2 565.1c-0.5 1-0.3 1 0.2 0.3-5.2 12.6-8.2 26.4-8.2 40.8 0 58.8 47.6 106.5 106.4 106.6 8.7-1.1 17.5-2.2 26.2-3.5 50.6-7.5 101.2-16.7 153.7-20 202-12.7 237.6 87.4 429.4 64 14.1-1.7 34.4-4.5 55.8-9.2 4.3-0.9 8.5-2 12.8-3.1 44.2-13 76.7-53.4 76.7-101.9 0.1-11.1-2.1-21.6-5.3-31.8zM782.8 926.9c-43.3 0-103.3-20.3-171.8-43.5-63.5-21.5-129.2-43.8-177.7-47.7-97.5-7.9-180.8 3.8-233.4 15-57.4 12.2-92 26.5-92.3 26.6-16.3 6.8-35-0.9-41.9-17.2-6.8-16.3 0.8-35 17.1-41.8 6.1-2.6 152.3-62.8 355.6-46.4 56.4 4.6 125.9 28.1 193.1 50.9 59.4 20.1 126.8 43 156.9 39.9 37.7-3.9 72-17.1 102-39.4 21.2-15.8 32.1-30.4 32.3-30.5 10.3-14.3 30.3-17.6 44.7-7.3 14.3 10.3 17.6 30.3 7.3 44.7-2.5 3.4-61.8 84.1-179.6 96.2-4 0.3-8.1 0.5-12.3 0.5z"  ></path></symbol><symbol id="icon-zhengfuxiaoneng" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#2D99FF" opacity=".1" ></path><path d="M303.835429 427.337143h-87.771429v-91.428572l296.228571-146.285714 296.228572 146.285714v87.771429h-87.771429v266.971429h87.771429v117.028571h-592.457143v-117.028571h87.771429v-263.314286z m325.485714 263.314286v-263.314286h-73.142857v266.971428h-87.771429v-266.971428h-73.142857v266.971428h234.057143z" fill="#1492FF" ></path></symbol><symbol id="icon-minshengfuwu" viewBox="0 0 1024 1024"><path d="M511.707063 0.000731a112.786205 112.786205 0 1 0 112.859348 112.63992A112.63992 112.63992 0 0 0 511.707063 0.000731z m0 0"  ></path><path d="M752.858891 278.016533c-61.951956-68.095951-207.871852-39.423972-228.132409 29.695979-19.967986-69.778236-167.643309-98.230787-229.010122-28.306266a103.643355 103.643355 0 0 0-21.942841 41.910827v386.413439c7.31428 1.535999 14.628561 3.145141 21.942841 5.193139a178.249016 178.249016 0 0 1 97.499359 51.63882V406.967298c0-47.396538 43.081112-47.689109 43.081112 4.754282v366.738024h177.151874V411.72158c0-52.370248 43.081112-52.15082 43.081112-4.754282v357.595173a179.565586 179.565586 0 0 1 96.402217-51.199963c7.82628-2.047999 15.725703-3.803426 23.332554-5.412568V321.317073a103.570212 103.570212 0 0 0-23.332554-43.30054z m-505.124211-6.363424v-2.121142l1.023999 0.731429z m0 0M489.032794 1024c-16.749702-98.084501-84.553082-167.570166-220.525557-199.241001a488.008794 488.008794 0 0 0-51.053678-9.727993l-7.314281-1.097142q-36.571402-4.900568-73.80109-7.31428a1048.867822 1048.867822 0 0 0-52.516534-1.535999c9.069708-93.695933-0.731428-159.670743-31.670834-189.732436a66.559952 66.559952 0 0 0-52.370248-17.99313 2179.655586 2179.655586 0 0 1 5.193139 224.987268q22.820555 19.894843 47.103966 38.765686c29.915407 22.820555 58.514244 42.934826 84.333654 61.147385a531.45562 531.45562 0 0 1 73.80109 60.269672l7.314281 8.191994a107.44678 107.44678 0 0 1 19.163415 32.914262z m45.787395 0c16.822845-98.011359 84.699368-167.570166 220.525557-199.241001a474.989375 474.989375 0 0 1 51.053678-9.727993l7.31428-1.097142c23.113126-3.218283 47.615966-5.48571 73.801091-7.31428 17.48113-0.950856 35.035404-1.462856 52.516534-1.535999-9.069708-93.695933 0.731428-159.670743 31.670834-189.732436A66.340524 66.340524 0 0 1 1023.999269 597.358019a2147.472752 2147.472752 0 0 0-5.412568 224.987268q-22.820555 19.894843-47.103966 38.765686c-29.915407 22.820555-58.514244 42.934826-84.333654 61.147385a528.017909 528.017909 0 0 0-73.801091 60.269672l-7.31428 8.191994a107.44678 107.44678 0 0 0-19.163415 32.914262z m0 0"  ></path></symbol></svg>',m=(m=document.getElementsByTagName("script"))[m.length-1].getAttribute("data-injectcss");if(m&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(a){console&&console.log(a)}}function z(){i||(i=!0,h())}c=function(){var a,c,l;(l=document.createElement("div")).innerHTML=e,e=null,(c=l.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",a=c,(l=document.body).firstChild?(c=l.firstChild).parentNode.insertBefore(a,c):l.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),c()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(h=c,t=a.document,i=!1,(o=function(){try{t.documentElement.doScroll("left")}catch(a){return void setTimeout(o,50)}z()})(),t.onreadystatechange=function(){"complete"==t.readyState&&(t.onreadystatechange=null,z())})}(window);
\ No newline at end of file
--- a/jingning_vue/src/assets/font/iconfont.json
+++ b/jingning_vue/src/assets/font/iconfont.json
+{
+  "id": "2531829",
+  "name": "sy",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "9387346",
+      "name": "警告",
+      "font_class": "jinggao",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "3349898",
+      "name": "上升",
+      "font_class": "shangsheng",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "910254",
+      "name": "公寓、住宅",
+      "font_class": "gongyuzhuzhai",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
+    },
+    {
+      "icon_id": "7971759",
+      "name": "空气优良",
+      "font_class": "kongqiyouliang",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "9465781",
+      "name": "山水",
+      "font_class": "shanshui",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "9744793",
+      "name": "pm2.5",
+      "font_class": "pm",
+      "unicode": "e74e",
+      "unicode_decimal": 59214
+    },
+    {
+      "icon_id": "12633221",
+      "name": "河湖",
+      "font_class": "hehu",
+      "unicode": "e6c3",
+      "unicode_decimal": 59075
+    },
+    {
+      "icon_id": "15793920",
+      "name": "城市",
+      "font_class": "chengshi1",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "6393453",
+      "name": "圆",
+      "font_class": "yuan",
+      "unicode": "e6cc",
+      "unicode_decimal": 59084
+    },
+    {
+      "icon_id": "8866376",
+      "name": "环状图",
+      "font_class": "huanzhuangtu1",
+      "unicode": "e76d",
+      "unicode_decimal": 59245
+    },
+    {
+      "icon_id": "17794830",
+      "name": "预警中心-警示",
+      "font_class": "jingshi",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "19071106",
+      "name": "正常",
+      "font_class": "zhengchang",
+      "unicode": "e9a3",
+      "unicode_decimal": 59811
+    },
+    {
+      "icon_id": "21008704",
+      "name": "滞后",
+      "font_class": "zhihou",
+      "unicode": "e690",
+      "unicode_decimal": 59024
+    },
+    {
+      "icon_id": "392145",
+      "name": "信用卡",
+      "font_class": "56",
+      "unicode": "e69a",
+      "unicode_decimal": 59034
+    },
+    {
+      "icon_id": "1174321",
+      "name": "nav",
+      "font_class": "nav",
+      "unicode": "e66b",
+      "unicode_decimal": 58987
+    },
+    {
+      "icon_id": "2484452",
+      "name": "quyu",
+      "font_class": "quyu",
+      "unicode": "e68c",
+      "unicode_decimal": 59020
+    },
+    {
+      "icon_id": "3507250",
+      "name": "wenhua",
+      "font_class": "wenhua",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "7901433",
+      "name": "icon双招双引",
+      "font_class": "iconshuangzhaoshuangyin",
+      "unicode": "eb78",
+      "unicode_decimal": 60280
+    },
+    {
+      "icon_id": "8281629",
+      "name": "循环",
+      "font_class": "xunhuan",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "8504243",
+      "name": "商务",
+      "font_class": "shangwu",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "10268452",
+      "name": "预防保健科",
+      "font_class": "yufangbaojianke",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "10314532",
+      "name": "花园",
+      "font_class": "huayuan",
+      "unicode": "e62a",
+      "unicode_decimal": 58922
+    },
+    {
+      "icon_id": "11082845",
+      "name": "科技",
+      "font_class": "juxing",
+      "unicode": "e715",
+      "unicode_decimal": 59157
+    },
+    {
+      "icon_id": "11829715",
+      "name": "生态",
+      "font_class": "shengtai",
+      "unicode": "e719",
+      "unicode_decimal": 59161
+    },
+    {
+      "icon_id": "13844908",
+      "name": "改革",
+      "font_class": "gaige",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "15162653",
+      "name": "chengshi",
+      "font_class": "chengshi",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "16370706",
+      "name": "index active",
+      "font_class": "indexactive",
+      "unicode": "e625",
+      "unicode_decimal": 58917
+    },
+    {
+      "icon_id": "17283208",
+      "name": "shengchanguanli ",
+      "font_class": "shengchanguanli",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "19721623",
+      "name": "乡村",
+      "font_class": "xiangcun",
+      "unicode": "e760",
+      "unicode_decimal": 59232
+    },
+    {
+      "icon_id": "20639702",
+      "name": "政府效能",
+      "font_class": "zhengfuxiaoneng",
+      "unicode": "e6fb",
+      "unicode_decimal": 59131
+    },
+    {
+      "icon_id": "20923999",
+      "name": "minshengfuwu",
+      "font_class": "minshengfuwu",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    }
+  ]
+}
--- a/jingning_vue/src/assets/font/iconfont.ttf
+++ b/jingning_vue/src/assets/font/iconfont.ttf
--- a/jingning_vue/src/assets/font/iconfont.woff
+++ b/jingning_vue/src/assets/font/iconfont.woff
--- a/jingning_vue/src/assets/font/iconfont.woff2
+++ b/jingning_vue/src/assets/font/iconfont.woff2
--- a/jingning_vue/src/assets/images/1.png
+++ b/jingning_vue/src/assets/images/1.png
--- a/jingning_vue/src/assets/images/2.png
+++ b/jingning_vue/src/assets/images/2.png
--- a/jingning_vue/src/assets/images/3.png
+++ b/jingning_vue/src/assets/images/3.png
--- a/jingning_vue/src/assets/images/4.png
+++ b/jingning_vue/src/assets/images/4.png
--- a/jingning_vue/src/assets/images/5.png
+++ b/jingning_vue/src/assets/images/5.png
--- a/jingning_vue/src/assets/images/Slice19.png
+++ b/jingning_vue/src/assets/images/Slice19.png
--- a/jingning_vue/src/assets/images/backgroud.png
+++ b/jingning_vue/src/assets/images/backgroud.png
--- a/jingning_vue/src/assets/images/bgi.jpg
+++ b/jingning_vue/src/assets/images/bgi.jpg
--- a/jingning_vue/src/assets/images/core_business01.png
+++ b/jingning_vue/src/assets/images/core_business01.png
--- a/jingning_vue/src/assets/images/core_business02.png
+++ b/jingning_vue/src/assets/images/core_business02.png
--- a/jingning_vue/src/assets/images/core_business03.png
+++ b/jingning_vue/src/assets/images/core_business03.png
--- a/jingning_vue/src/assets/images/core_business04.png
+++ b/jingning_vue/src/assets/images/core_business04.png
--- a/jingning_vue/src/assets/images/daikuan.svg
+++ b/jingning_vue/src/assets/images/daikuan.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#85A0C0" d="M856 615.3l-34.5-5.6c-4.5-0.7-9.1-1.1-13.6-1.1-14.5 0-28.9 3.7-41.6 11L588 720.3c-0.6 0.4-1.4 0.5-2.1 0.5-0.7 0-1.5-0.2-2.1-0.6l-54-31.2h45.5c21.6 0 39.1-17.5 39.1-39.1V627.2c0-21.6-17.5-39.1-39.1-39.1H368.1c-3.4 0-6.7 0.3-9.8 0.6-0.8 0.1-1.4 0.2-2.2 0.3-7.4 1.1-13.1 2.6-13.1 2.6l-184.5 54.2c-2.2 0.7-3.5 3-2.9 5.3l39.5 134.5c0.5 1.8 2.2 3 4.1 3 0.4 0 0.8-0.1 1.2-0.2l133.9-39.3c0.4-0.1 0.8-0.2 1.2-0.2 0.7 0 1.5 0.2 2.1 0.6l224.1 129.4c6.1 3.7 11.8 4.9 16.9 4.9 11.1 0 18.8-6 18.8-6L864 642c9.6-8.4 4.9-24.5-8-26.7z"  /><path fill="#85A0C0" d="M332.6 555.7c2.9-0.8 18.4-5 35.5-5h207.2c36.5 0 67 25.6 74.7 59.8 71.4-45.3 118.9-124.8 118.9-215.6 0-141-114.3-255.3-255.3-255.3S258.3 253.9 258.3 394.9c0 62.9 22.8 120.4 60.5 164.9l13.8-4.1z m72.3-168.6l101-101c4.3-4.3 11.2-4.3 15.5 0l101 101c4.3 4.3 4.3 11.2 0 15.5l-101 101c-4.3 4.3-11.2 4.3-15.5 0l-101-101c-4.3-4.2-4.3-11.2 0-15.5z"  /></svg>
\ No newline at end of file
--- a/jingning_vue/src/assets/images/dian.svg
+++ b/jingning_vue/src/assets/images/dian.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#85A0C0" d="M779.93984 119.82848H422.7072l-178.62656 402.16576h154.23488l-109.568 397.23008 446.5664-479.06816h-163.77856L779.93984 119.82848z m0 0" /></svg>
\ No newline at end of file
--- a/jingning_vue/src/assets/images/finish.jpg
+++ b/jingning_vue/src/assets/images/finish.jpg
--- a/jingning_vue/src/assets/images/flag_red.png
+++ b/jingning_vue/src/assets/images/flag_red.png
--- a/jingning_vue/src/assets/images/fuwu.svg
+++ b/jingning_vue/src/assets/images/fuwu.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="198.83px" viewBox="0 0 1030 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#85A0C0" d="M530.330773 688.109001a44.528192 44.528192 0 0 1-23.451515-6.679229c-13.061603-8.015075-323.12625-202.009567-378.341209-452.554863a174.25366 174.25366 0 0 1 36.809972-148.427308A215.961734 215.961734 0 0 1 329.360197 0C400.753732 0 473.779968 45.418756 518.011306 107.906653 564.023772 45.715611 638.237426 0 709.185679 0A220.56298 220.56298 0 0 1 877.205392 84.158284a166.387013 166.387013 0 0 1 32.208726 146.349326c-72.284099 276.520075-344.499783 444.242934-356.22554 451.219017a44.528192 44.528192 0 0 1-22.857805 6.382374zM329.360197 89.056385a126.608494 126.608494 0 0 0-94.548195 47.051457 85.939412 85.939412 0 0 0-19.29555 73.471517C254.552834 387.09842 460.124656 541.759675 530.330773 590.146978 593.709233 545.321931 771.822003 405.503406 823.177852 207.798232a79.111755 79.111755 0 0 0-16.327004-69.315553A130.467604 130.467604 0 0 0 709.185679 89.056385c-59.370923 0-145.904044 72.432526-148.427308 143.677634a44.528192 44.528192 0 0 1-89.056385-1.484273v-2.226409C468.881867 158.223511 387.988984 89.056385 329.360197 89.056385z m537.010002 130.170749zM384.723583 838.762719C172.62096 838.762719 0 653.822293 0 426.580084a44.528192 44.528192 0 0 1 89.056385 0c0 178.11277 132.545586 323.12625 295.667198 323.12625a44.528192 44.528192 0 1 1 0 89.056385zM618.051312 824.95898a44.528192 44.528192 0 0 1 0-89.056385c178.11277 0 323.12625-132.545586 323.12625-295.518771a44.528192 44.528192 0 0 1 89.056385 0C1030.233947 653.080157 846.035657 824.95898 618.051312 824.95898z"  /><path fill="#85A0C0" d="M340.195391 750.151616m44.528192 0l0 0q44.528192 0 44.528193 44.528193l0 184.791999q0 44.528192-44.528193 44.528192l0 0q-44.528192 0-44.528192-44.528192l0-184.791999q0-44.528192 44.528192-44.528193Z"  /><path fill="#85A0C0" d="M573.523119 750.151616m44.528193 0l0 0q44.528192 0 44.528192 44.528193l0 184.791999q0 44.528192-44.528192 44.528192l0 0q-44.528192 0-44.528193-44.528192l0-184.791999q0-44.528192 44.528193-44.528193Z"  /></svg>
\ No newline at end of file
--- a/jingning_vue/src/assets/images/fuzhuxuanzhi.svg
+++ b/jingning_vue/src/assets/images/fuzhuxuanzhi.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#85A0C0" d="M157.538462 945.230769h708.923076v78.769231H157.538462v-78.769231z m354.461538-39.384615C275.692308 668.750769 157.538462 484.962462 157.538462 354.461538 157.538462 158.700308 316.238769 0 512 0s354.461538 158.700308 354.461538 354.461538c0 130.500923-118.153846 314.289231-354.461538 551.384616z m0-452.923077a98.461538 98.461538 0 1 0 0-196.923077 98.461538 98.461538 0 0 0 0 196.923077z"  /></svg>
\ No newline at end of file
--- a/jingning_vue/src/assets/images/icon.png
+++ b/jingning_vue/src/assets/images/icon.png
--- a/jingning_vue/src/assets/images/lag.png
+++ b/jingning_vue/src/assets/images/lag.png
--- a/jingning_vue/src/assets/images/logo.png
+++ b/jingning_vue/src/assets/images/logo.png
--- a/jingning_vue/src/assets/images/navbgi.png
+++ b/jingning_vue/src/assets/images/navbgi.png
--- a/jingning_vue/src/assets/images/normal.jpg
+++ b/jingning_vue/src/assets/images/normal.jpg
--- a/jingning_vue/src/assets/images/normal.png
+++ b/jingning_vue/src/assets/images/normal.png
--- a/jingning_vue/src/assets/images/people.png
+++ b/jingning_vue/src/assets/images/people.png
--- a/jingning_vue/src/assets/images/ren.png
+++ b/jingning_vue/src/assets/images/ren.png
--- a/jingning_vue/src/assets/images/sy-map.jpg
+++ b/jingning_vue/src/assets/images/sy-map.jpg
--- a/jingning_vue/src/assets/images/sy_map.png
+++ b/jingning_vue/src/assets/images/sy_map.png
--- a/jingning_vue/src/assets/images/target.png
+++ b/jingning_vue/src/assets/images/target.png
--- a/jingning_vue/src/assets/images/warning.png
+++ b/jingning_vue/src/assets/images/warning.png
--- a/jingning_vue/src/assets/images/wqx.png
+++ b/jingning_vue/src/assets/images/wqx.png
--- a/jingning_vue/src/assets/images/xiangmu.svg
+++ b/jingning_vue/src/assets/images/xiangmu.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#85A0C0" d="M512 0C296.192 0 64 65.056 64 208v608C64 958.88 296.192 1024 512 1024c215.776 0 448-65.12 448-208v-608C960 65.056 727.744 0 512 0z m384 816c0 79.488-171.936 144-384 144-212.096 0-384-64.512-384-144v-119.552C194.112 764.576 353.6 800 512 800s317.888-35.424 384-103.552V816z m0-192h-0.128c0 0.32 0.128 0.672 0.128 0.992C896 704 724.064 768 512 768S128 704 128 624.992c0-0.32 0.128-0.672 0.128-0.992H128v-119.552C194.112 572.576 353.6 608 512 608s317.888-35.424 384-103.552V624z m0-192h-0.128c0 0.32 0.128 0.672 0.128 0.992C896 512 724.064 576 512 576S128 512 128 432.992c0-0.32 0.128-0.672 0.128-0.992H128v-109.952C211.872 385.952 365.6 416 512 416s300.128-30.048 384-93.952V432zM512 352C299.904 352 128 287.488 128 208 128 128.448 299.904 64 512 64c212.064 0 384 64.448 384 144 0 79.488-171.936 144-384 144z"  /><path fill="#85A0C0" d="M800 832m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"  /><path fill="#85A0C0" d="M800 640m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"  /><path fill="#85A0C0" d="M800 448m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z"  /></svg>
\ No newline at end of file
--- a/jingning_vue/src/assets/images/yshj_03.png
+++ b/jingning_vue/src/assets/images/yshj_03.png
--- a/jingning_vue/src/assets/images/yshj_07.png
+++ b/jingning_vue/src/assets/images/yshj_07.png
--- a/jingning_vue/src/assets/images/yshj_10.png
+++ b/jingning_vue/src/assets/images/yshj_10.png
--- a/jingning_vue/src/assets/images/yshj_13.png
+++ b/jingning_vue/src/assets/images/yshj_13.png
--- a/jingning_vue/src/assets/images/yshj_19.png
+++ b/jingning_vue/src/assets/images/yshj_19.png
--- a/jingning_vue/src/assets/images/yshj_23.png
+++ b/jingning_vue/src/assets/images/yshj_23.png
--- a/jingning_vue/src/assets/images/yshj_26.png
+++ b/jingning_vue/src/assets/images/yshj_26.png
--- a/jingning_vue/src/assets/images/yshj_31.png
+++ b/jingning_vue/src/assets/images/yshj_31.png
--- a/jingning_vue/src/assets/images/yshj_34.png
+++ b/jingning_vue/src/assets/images/yshj_34.png
--- a/jingning_vue/src/assets/images/yshj_37.png
+++ b/jingning_vue/src/assets/images/yshj_37.png
--- a/jingning_vue/src/assets/images/yshj_39.png
+++ b/jingning_vue/src/assets/images/yshj_39.png
--- a/jingning_vue/src/assets/images/yshj_44.png
+++ b/jingning_vue/src/assets/images/yshj_44.png
--- a/jingning_vue/src/assets/images/yshj_46.png
+++ b/jingning_vue/src/assets/images/yshj_46.png
--- a/jingning_vue/src/assets/images/yshj_48.png
+++ b/jingning_vue/src/assets/images/yshj_48.png
--- a/jingning_vue/src/assets/images/yshj_53.png
+++ b/jingning_vue/src/assets/images/yshj_53.png
--- a/jingning_vue/src/assets/images/yshj_56.png
+++ b/jingning_vue/src/assets/images/yshj_56.png
--- a/jingning_vue/src/assets/images/yshj_58.png
+++ b/jingning_vue/src/assets/images/yshj_58.png
--- a/jingning_vue/src/assets/images/yshj_61.png
+++ b/jingning_vue/src/assets/images/yshj_61.png
--- a/jingning_vue/src/assets/images/yshj_64.png
+++ b/jingning_vue/src/assets/images/yshj_64.png
--- a/jingning_vue/src/assets/images/yshj_67.png
+++ b/jingning_vue/src/assets/images/yshj_67.png
--- a/jingning_vue/src/assets/images/zhengce.svg
+++ b/jingning_vue/src/assets/images/zhengce.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="188.58px" viewBox="0 0 1086 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#85A0C0" d="M83.356703 82.881939v638.107152c0 12.288 14.460121 33.450667 26.158545 38.912l431.817697 181.527273c-0.682667-0.682667 2.048 0.682667 2.048 0.682666s2.792727-0.682667 2.079031-0.682666l431.786666-181.527273c11.015758-4.096 26.189576-26.624 26.189576-38.912V82.881939L567.491491 212.557576l-23.396849 6.826666-23.427878-6.826666L83.356703 82.881939zM79.912339 3.04097l462.78594 130.327272 462.785939-130.327272C1048.895612-9.24703 1086.069915 16.694303 1086.069915 62.401939v657.221819c0 44.373333-34.443636 96.22497-76.427636 113.974303l-432.500364 182.892606c-12.412121 5.461333-24.110545 7.509333-34.443636 7.509333a95.26303 95.26303 0 0 1-34.443637-7.509333l-431.786666-181.527273C33.770279 817.214061 0.009309 765.362424 0.009309 720.989091V62.401939C-0.673358 17.37697 35.849309-9.24703 79.912339 3.04097zM309.3504 569.002667l-95.604364 50.765575 18.835394-107.737212L155.160824 435.2l107.737212-15.794424 47.135031-98.800485 47.786666 98.800485 107.737212 15.794424-78.103272 76.148364 18.835394 107.737212-96.938667-50.082909zM690.433552 443.42303l243.74303-83.00606c20.883394-6.857697 32.985212-30.875152 25.6-52.844606-7.447273-21.255758-30.316606-33.605818-51.851637-26.065455l-243.74303 83.006061c-20.883394 6.857697-32.985212 30.875152-25.6 52.844606 7.447273 21.969455 30.316606 33.605818 51.851637 26.065454z m0 165.391515l243.74303-83.03709c20.883394-6.888727 32.985212-30.875152 25.6-52.844607-7.447273-21.255758-30.316606-33.605818-51.851637-26.065454l-243.74303 83.006061c-20.883394 6.857697-32.985212 30.875152-25.6 52.844606a40.99103 40.99103 0 0 0 51.851637 26.065454z m0 164.646788l243.74303-83.037091c20.883394-6.826667 32.985212-30.875152 25.6-52.813575-7.447273-21.286788-30.316606-33.636848-51.851637-26.065455l-243.74303 83.006061c-20.883394 6.857697-32.985212 30.875152-25.6 52.844606 7.447273 21.938424 30.316606 33.605818 51.851637 26.065454z" /></svg>
\ No newline at end of file
--- a/jingning_vue/src/assets/json/shi.json
+++ b/jingning_vue/src/assets/json/shi.json
--- a/jingning_vue/src/components/Breadcrumb.vue
+++ b/jingning_vue/src/components/Breadcrumb.vue
+<template>
+  <div class="breadcrumb">
+    <div class="br-top">
+      <el-breadcrumb
+        separator="/"
+        v-if="$route.path != '/index'"
+        separator-class="el-icon-arrow-right"
+      >
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ breadData.page_name }}</el-breadcrumb-item>
+      </el-breadcrumb>
+      <div>
+        <i class="iconfont icon-chengshi"></i>
+        <span>牵头单位：{{ breadData.leading }}</span>
+      </div>
+    </div>
+    <div class="breadcrumb-text">
+      <div class="breadcrumb-title">
+        <img src="../assets/images/target.png" alt="" />
+        <span>年度目标 | </span>
+        {{ breadData.annual_target }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "breadcrumb",
+  props: {
+    breadData: {
+      type: Object
+    },
+  }
+};
+</script>
+
+<style lang='scss' scoped>
+.breadcrumb {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 12px 20px;
+  margin-bottom: 20px;
+  >>> .el-breadcrumb {
+    font-size: 16px;
+  }
+  >>> .el-breadcrumb__inner {
+    color: #333;
+    font-weight: normal;
+  }
+  .br-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .breadcrumb-title {
+    margin-top: 12px;
+    display: flex;
+    align-items: center;
+    span{
+      color: #1492ff;
+      margin-right: 8px;
+      font-size: 18px;
+    }
+  }
+  .breadcrumb-title img {
+    width: 28px;
+    height:  auto;
+  }
+  .breadcrumb-title h2 {
+    font-weight: 600;
+    font-size: 24px;
+    margin-right: 20px;
+  }
+}
+</style>
\ No newline at end of file
--- a/jingning_vue/src/components/Nav.vue
+++ b/jingning_vue/src/components/Nav.vue
+<template>
+  <div class="nav">
+    <div class="nav-btn" @click="tabList">
+      <i v-if="!listShow" class="nav-btn-up el-icon-arrow-up"></i>
+      <i v-else class="nav-btn-down el-icon-arrow-down"></i>
+      导航
+    </div>
+    <div class="nav-tabs" :class="listShow?'nav-show':''">
+      <el-tabs v-model="activeName" v-if="navList.length">
+        <el-tab-pane
+          v-for="(item, index) in navList"
+          :key="index"
+          :label="item.title"
+          :name="item.name"
+        >
+          <ul class="list-item">
+            <li style="cursor: pointer" v-for="(citem, cindex) in item.children" :key="cindex" @click="navJump(citem.pc_url)">
+              {{ citem.title }}
+            </li>
+          </ul>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      navList: [],
+      activeName: null,
+      listShow: false,
+    };
+  },
+  methods: {
+    tabList() {
+      this.listShow = !this.listShow;
+    },
+    navJump(pc_url){
+      window.location.href=pc_url
+    }
+  },
+  created(){
+    if(sessionStorage.navList){
+      this.navList = this.navList.concat(JSON.parse(sessionStorage.navList))
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.nav {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 999;
+  .nav-btn {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    font-size: 20px;
+    color: #fff;
+    background-color: #1492ff;
+    line-height: 60px;
+    text-align: center;
+    margin: 0 auto;
+    position: relative;
+    cursor: pointer;
+    .nav-btn-up,
+    .nav-btn-down {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .nav-btn-down {
+      bottom: 0;
+    }
+  }
+  .nav-tabs {
+    background: url(../assets/images/navbgi.png) no-repeat 50%;
+    background-size: 100%;
+    height: 0px;
+    position: relative;
+    transition: all .4s;
+    >>>.el-tabs{
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 16px;
+      .el-tabs__item{
+        font-size: 16px;
+        color: #333;
+      }
+      .is-active{
+        color: #1492ff;
+      }
+    }
+    .list-item{
+      display: flex;
+      li{
+        margin-right: 20px;
+      }
+    }
+  }
+  .nav-show{
+    height: 90px;
+  }
+}
+</style>
\ No newline at end of file
--- a/jingning_vue/src/components/SearchIpt.vue
+++ b/jingning_vue/src/components/SearchIpt.vue
+<template>
+  <div class="index-input">
+    <el-input placeholder="请输入任务名称" v-model="searchText">
+      <el-select v-model="value" slot="prepend">
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-button slot="append" @click="searchJump">
+        <i class="el-icon-search"></i>
+        搜索
+      </el-button>
+    </el-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'SearchIpt',
+  data() {
+    return {
+      searchText: "",
+      options: [
+        {
+          value: 'task',
+          label: "任务信息搜索",
+        },
+        {
+          value: 'quota',
+          label: "指标体系",
+        },
+        {
+          value: 'plan',
+          label: "工作体系",
+        },
+        {
+          value: 'policy',
+          label: "政策体系",
+        },
+        {
+          value: 'comment',
+          label: "评价体系",
+        },
+        {
+          value: 'all',
+          label: "全景信息",
+        },
+      ],
+      value: this.$route.query.methodCode?this.$route.query.methodCode:'all',
+    };
+  },
+  created() {
+    this.searchText = this.$route.query.searchText?this.$route.query.searchText:'';
+  },
+  methods: {
+    searchJump() {
+      if (this.$route.path == "/search") {
+        this.$router.push(
+          "/search?searchText=" + this.searchText + "&methodCode=" + this.value
+        );
+        this.$router.go(0);
+      } else{
+        this.$router.push(
+          "/search?searchText=" + this.searchText + "&methodCode=" + this.value
+        );
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.index-input {
+  width: 50%;
+  margin: 45px auto 30px;
+  >>> .el-input-group__prepend {
+    width: 15%;
+    .el-input__inner {
+      padding-left: 10px;
+      padding-right: 25px;
+    }
+  }
+  >>> input {
+    height: 45px;
+    line-height: 45px;
+    font-size: 16px;
+  }
+  >>> .el-input-group__append {
+    text-align: center;
+    height: 44px;
+    width: 10%;
+    background-color: #1492ff;
+    border: 0;
+    color: #fff;
+    padding: 0;
+    font-size: 16px;
+  }
+}
+</style>
\ No newline at end of file
--- a/jingning_vue/src/components/Top.vue
+++ b/jingning_vue/src/components/Top.vue
+<template>
+  <div class="idx-top">
+    <div class="idx-top-wrap">
+      <div class="idx-top-left">
+        <img class="img-logo" src="../assets/images/logo.png" />
+        <h2 @click="goIndex">数字政府综合应用</h2>
+        <span class="idx-bj">|</span>
+        <span class="idx-area">云和</span>
+      </div>
+      <div class="idx-top-right">
+        <p>
+          <i class="el-icon-user-solid"></i>
+          <span class="username">{{ username }}</span>
+          ，您好!
+        </p>
+        <div class="go-out" @click="goOut">退出登录</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: "",
+    };
+  },
+  methods: {
+    goIndex() {
+      if (this.$route.path !== "/index") {
+        this.$router.push("/index");
+      }
+    },
+    goOut() {
+      sessionStorage.removeItem("token");
+      this.$router.push("/login");
+    },
+  },
+  created() {
+    this.username = JSON.parse(sessionStorage.token).nickNameCn;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.idx-top {
+  height: 72px;
+  line-height: 72px;
+  background-color: #1492ff;
+  color: #fff;
+  position: relative;
+  z-index: 999;
+  white-space: nowrap;
+  .idx-bj {
+    margin: 0 10px;
+  }
+  .idx-area {
+    margin-right: 30px;
+  }
+  .img-logo {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+  }
+  > div {
+    display: flex;
+    justify-content: space-between;
+  }
+  .idx-top-left {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: 20px;
+    h2 {
+      font-weight: 600;
+      cursor: pointer;
+    }
+    .el-input,
+    .el-input--suffix {
+      width: 350px;
+      height: 72px;
+    }
+  }
+  .idx-top-right {
+    margin-right: 20px;
+    position: relative;
+    >p{
+      display: flex;
+      align-items: center;
+    }
+    .username {
+      display: inline-block;
+      max-width: 80px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-left: 10px;
+    }
+    .go-out {
+      position: absolute;
+      top: 50px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 100px;
+      height: 40px;
+      line-height: 40px;
+      color: #333;
+      background-color: #fff;
+      text-align: center;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.4s;
+      cursor: pointer;
+      border-radius: 4px;
+      &:hover {
+        color: #1492ff;
+      }
+    }
+    &:hover .go-out {
+      opacity: 1;
+      visibility: inherit;
+    }
+  }
+}
+</style>
\ No newline at end of file
--- a/jingning_vue/src/components/Tree.vue
+++ b/jingning_vue/src/components/Tree.vue
+<template>
+  <div class="tree">
+    <ul v-if="treeData && treeData.length">
+      <li v-for="(column, index) in treeData" :key="index">
+        <div class="root-div">
+          <span v-for="(item,index) in rootArr" :key="index" class="unify-root" :class="{'root':active==index}" @click="changeIdx(index)">{{item}}</span>
+        </div>
+        <ul v-if="column.children && column.children.length">
+          <li v-for="(childrenColumn, index) in column.children" :key="index">
+            <span>{{ childrenColumn.name }}</span>
+            <p v-if="childrenColumn.status=='正常'">
+              <i class="iconfont icon-zhengchang" style="color:#1492ff"></i>
+              正常
+            </p>
+            <p v-if="childrenColumn.status=='滞后'">
+              <i class="iconfont icon-zhihou" style="color:#D81E06"></i>
+              滞后
+            </p>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: "transverseTree",
+  props: {
+    treeData: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      rootArr:['深化碧水行动','空气质量巩固提升行动','“无废城市”建设',"美丽河湖库"],
+      active:0
+    }
+  },
+  methods: {
+    changeIdx(i){
+      this.active = i
+    }
+  },
+};
+</script>
+<style scope>
+.tree {
+  position: relative;
+  margin: -16px auto 0;
+  min-height: 450px;
+  padding-left: 11px;
+  overflow: auto;
+}
+.tree ul {
+  width: 210px;
+  height: 100%;
+  position: absolute;
+}
+.tree ul ul {
+  left: 176px;
+  top: 0;
+  width: 360px;
+}
+.tree ul ul li {
+  width: 360px;
+  display: flex;
+  justify-content: space-between;
+  color: #333;
+  align-items: center;
+}
+.tree li {
+  float: left;
+  list-style-type: none;
+  position: relative;
+  padding: 16px 5px 0 5px;
+}
+.tree li .root-div {
+  margin: 30px 0 0;
+}
+.tree li .unify-root {
+  width: 150px;
+  padding: 8px 0;
+  font-size: 18px;
+  margin: 12px 0;
+  border: 1px solid #ddd;
+  cursor: pointer;
+}
+.tree li .root {
+  color: #1492ff;
+}
+.tree li span {
+  position: relative;
+  display: inline-block;
+  border-radius: 4px;
+  text-decoration: none;
+  color: #2d2d2d;
+  font-size: 16px;
+  line-height: 36px;
+  text-align: center;
+  padding: 0 12px;
+}
+
+.tree li::before {
+  box-sizing: inherit;
+  content: "";
+  position: absolute;
+  top: 33px;
+  left: -7px;
+  border-top: 2px solid #1492ff;
+  width: 12px;
+}
+.tree li::after {
+  box-sizing: inherit;
+  content: "";
+  position: absolute;
+  top: 8px;
+  left: -7px;
+  height: 100%;
+  border-left: 2px solid #1492ff;
+}
+.tree li:first-child::after {
+  height: 51%;
+  border-left: 2px solid #1492ff;
+  border-top: 2px solid #1492ff;
+  top: 33px;
+  width: 1px;
+  border-top-left-radius: 4px;
+}
+.tree li:last-child::after {
+  height: 25px;
+  border-left: 2px solid #1492ff;
+  border-bottom: 2px solid #1492ff;
+  top: 8px;
+  width: 1px;
+  border-bottom-left-radius: 4px;
+}
+.tree li:only-child::after,
+.tree li:only-child::before {
+  display: none;
+}
+.tree ul ul li:only-child::before {
+  display: inline-block;
+}
+.tree ul ul li:only-child span::before {
+  display: inline-block;
+}
+.tree li:only-child span.root::before,
+.tree li:only-child span.hasChild::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: -14px;
+  border-top: 2px solid #1492ff;
+  width: 14px;
+}
+.tree ul ul ul li:only-child span::before {
+  content: "";
+  position: absolute;
+  top: 17px;
+  left: -26px;
+  border-top: 2px solid #1492ff;
+  width: 26px;
+}
+</style>
\ No newline at end of file
--- a/jingning_vue/src/main.js
+++ b/jingning_vue/src/main.js
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import './assets/css/reset.css'
+import './assets/css/common.css'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import './assets/font/iconfont.css'
+import * as echarts from 'echarts'
+import 'default-passive-events'
+Vue.prototype.$echarts = echarts
+Vue.use(ElementUI)
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})
--- a/jingning_vue/src/router/index.js
+++ b/jingning_vue/src/router/index.js
+import Vue from 'vue'
+import Router from 'vue-router'
+import MyIndex from '../views/MyIndex.vue'
+Vue.use(Router)
+var router = new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'Index',
+      component: MyIndex
+    },
+    {
+      path: '/xxczh',
+      name: 'NewUrbanization',
+      meta: { title: '新型城镇化' },
+      component: () => import('@/views/NewUrbanization')
+    },
+    {
+      path: '/msbz',
+      name: 'live',
+      meta: { title: '民生保障' },
+      component: () => import('@/views/Live')
+    },
+    {
+      path: '/qyxtfz',
+      name: 'region',
+      meta: { title: '区域协调发展' },
+      component: () => import('@/views/Region')
+    },
+    {
+      path: '/cyfz',
+      name: 'Cyfz',
+      meta: { title: '产业发展' },
+      component: () => import('@/views/Industry')
+    },
+
+    {
+      path: '/xczx',
+      name: 'Xczx',
+      meta: { title: '乡村振兴' },
+      component: () => import('@/views/Xczx')
+    },
+    {
+      path: '/aqsc',
+      name: 'Aqsc',
+      meta: { title: '安全生产' },
+      component: () => import('@/views/Aqsc')
+    },
+    {
+      path: '/sxh',
+      name: 'Sxh',
+      meta: { title: '双循环' },
+      component: () => import('@/views/Sxh')
+    },
+    {
+      path: '/kjcx',
+      name: 'Kjcx',
+      meta: { title: '科技创新' },
+      component: () => import('@/views/Kjcx')
+    },
+    {
+      path: '/yshj',
+      name: 'Yshj',
+      meta: { title: '营商环境' },
+      component: () => import('@/views/Yshj')
+    },
+    {
+      path: '/ctfy',
+      name: 'Ctfy',
+      meta: { title: '常态防疫' },
+      component: () => import('@/views/Epidemic')
+    },
+    {
+      path: '/stwm',
+      name: 'Stwm',
+      meta: { title: '生态文明' },
+      component: () => import('@/views/Ecology')
+    },
+    {
+      path: '/jfjb',
+      name: 'Jfjb',
+      meta: { title: '减负降本' },
+      component: () => import('@/views/Jfjb')
+    }
+  ]
+})
+// 判断设备类型（用于判断埋点设备）
+let u = navigator.userAgent;
+let isAndroid = u.indexOf('Android') > -1;
+let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+// 设备类型埋点编码（01：PC端，02：app端）
+let devType = (isAndroid || isIOS) ? '02' : '01';
+
+router.beforeEach((to, from, next) => {
+  // if (to.path == "/login"||to.path=="/nopower") {
+  next();
+  // } else {
+  //   const token = sessionStorage.getItem("token");
+  //   if (token) {
+  //     next();
+  //   } else {
+  //     router.push("/login");
+  //   }
+  // }
+  /*---------埋点代码开始 （路由切换执行）----------*/
+
+  // 单页应用 或 “单个页面”需异步补充PV日志参数还需进行如下埋点：
+  aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-waiting', 'MAN'] });
+  // PV日志接收日志域名，必须按实际情况填写
+  aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn'] });
+  // 一般日志（如点击和曝光）接收日志域名
+  aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn'] });
+  // 判单设备设置appId
+  aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['appId', isAndroid ? '28302650' : isIOS ? '28328447' : '47130293'] });
+
+  // 如采集用户信息是异步行为需要先执行这个BLOCK埋点
+  aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['_hold', 'BLOCK'] });
+
+  aplus_queue.push({
+    'action': 'aplus.sendPV',
+    'arguments': [{
+      is_auto: false
+    }, {
+      //当前应用信息
+      sapp_id: '14053',
+      sapp_name: 'szzf-yh',
+      // 自定义PV参数key-value键值对（只能是这种平铺的json，不能做多层嵌套），除userName外（考虑安全原因暂时做废弃处理），其他为必填项。
+      dev_type: devType,                // 设备类型
+      site_type: '101',                // 站点类型 数字化改革门户100 数字政府101 党政机关整体智治102 数字社会103 数字经济104 数字法治105
+      is_digital_reform: '1',           // 固定值传1，标识是否为数字化改革相关应用
+      is_workbench: '1',                // 新增字段，标识是否为数字化改革工作台，取值 1或0，1代表是，0代表不是，不填该参数取默认值0
+      city_code: '331100',              // 设区市编码
+      area_code: '331125',              // 区县编码
+      page_name: '云和数字政府门户',  // 页面名称
+      page_url: window.location.href,
+      page_id: window.location.hash,
+      _user_id: sessionStorage.token ? JSON.parse(sessionStorage.token).accountId : '',            // 客户端用户ID（浙政钉2.0ID）
+      // _user_nick: '',                // userName考虑安全原因暂时做废弃处理
+    }]
+  })
+  // 设置会员昵称
+  aplus_queue.push({
+    action: "aplus.setMetaInfo",
+    arguments: ["_user_nick", sessionStorage.token ? JSON.parse(sessionStorage.token).nickNameCn : '']
+  });
+  // 设置会员ID
+  aplus_queue.push({
+    action: "aplus.setMetaInfo",
+    arguments: ["_user_id", sessionStorage.token ? JSON.parse(sessionStorage.token).accountId : '']
+  });
+  // 如采集用户信息是异步行为，需要先设置完用户信息后再执行这个START埋点
+  // 此时被block住的日志会携带上用户信息逐条发出
+  aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['_hold', 'START'] });
+
+  /*---------埋点代码结束----------*/
+
+})
+
+
+export default router
--- a/jingning_vue/src/views/Aqsc.vue
+++ b/jingning_vue/src/views/Aqsc.vue
+<template>
+  <div class="main">
+    <div class="minHeader shadow">
+      <div class="card__header flex between">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{path: '/'}">安全生产</el-breadcrumb-item>
+        </el-breadcrumb>
+        <div class="flex acenter">
+          <i class="el-icon-office-building mr12"></i>
+          <p class="c3">牵头单位: {{myCity}}应急管理局</p>
+        </div>
+      </div>
+      <div class="flex acenter hl30 p20">
+        <i class="el-icon-s-marketing"></i>
+        <div class="flex acenter">
+          <span class="c3">年度目标</span>
+          <div class="cline"></div>
+          <span class="c3">为自觉接受媒体监督,有效行使工作职责，努力做到权为民所用，更好地服务社群，树立城管形象。</span>
+        </div>
+      </div>
+    </div>
+    <div class="minTop shadow mt20">
+      <div>
+        <div class="flex between card__header">
+          <p class="fs20 c3 b">全县安全生产形势分析</p>
+          <p class="c9">截止到5月底</p>
+        </div>
+        <div class="p20 flex between">
+          <div class="mr20 w57">
+            <div>
+              <div class="flex acenter lh30">
+                <img src="../assets/images/people.png" class="mr12 icon16">
+                <p>事故起数 2 起，同比前两年平均值</p>
+                <em class="norm ml12">↓50%</em>
+              </div>
+              <div class="flex acenter lh30">
+                <img src="../assets/images/ren.png" class="mr12 icon16">
+                <p>死亡人数 3 人，同比前两年平均值</p>
+                <em class="norm ml12">↓25%</em>
+              </div>
+            </div>
+            <div class="textCenter mt20 c3">2021年全市安全生产事故情况</div>
+            <div class="zhan mt12">
+              <div id="main1" style="max-width: 100%;height: 280px;"></div>
+            </div>
+          </div>
+          <div class="w41">
+            <div class="flex around acenter h60">
+              <div class="flex acenter column">
+                <p class="c9">一般事务</p>
+                <p class="fs18 c149 b">2</p>
+              </div>
+              <div class="flex acenter column">
+                <p class="c9">较大事务</p>
+                <p class="fs18 cff8 b">0</p>
+              </div>
+              <div class="flex acenter column">
+                <p class="c9">重大事务</p>
+                <p class="fs18 cd4 b">0</p>
+              </div>
+            </div>
+            <div class="textCenter mt20 c3">2021年全市安全生产事故情况</div>
+            <div class="zhan mt12 ">
+              <div id="main2" style="max-width: 100%;height: 280px;"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="minTop shadow mt20 flex between">
+      <div class="w49 h510">
+        <div class="flex between card__header">
+          <p class="fs20 c3 b">重点领域整治攻坚</p>
+          <p class="c9">截止到5月底</p>
+        </div>
+        <div class="p20">
+          <div class="flex around wrap w100">
+            <p class="" :class="whShow?'bg149 cf btn':'bgf c3 borc8 btn1'" @click="wh">危化领域</p>
+            <p class="" :class="whShow?'bgf c3 borc8 btn1':'bg149 cf btn'" @click="gk">工矿领域</p>
+            <el-tooltip class="item btn2 cf" effect="white" content="建设中..." placement="top">
+              <p>消防领域</p>
+            </el-tooltip>
+            <el-tooltip class="item btn2 cf" effect="white" content="建设中..." placement="top">
+              <p>道路交通</p>
+            </el-tooltip>
+            <el-tooltip class="item btn2 cf mt20" effect="white" content="建设中..." placement="top">
+              <p>建设施工</p>
+            </el-tooltip>
+            <el-tooltip class="item btn2 cf mt20" effect="white" content="建设中..." placement="top">
+              <p>城市运行</p>
+            </el-tooltip>
+            <el-tooltip class="item btn2 cf mt20" effect="white" content="建设中..." placement="top">
+              <p>旅游领域</p>
+            </el-tooltip>
+            <el-tooltip class="item btn2 cf mt20" effect="white" content="建设中..." placement="top">
+              <p>特种设备</p>
+            </el-tooltip>
+
+
+          </div>
+          <div class="flex around mt20" v-if="whShow">
+            <div class="flex column acenter">
+              <div class="el-progress--circle" style="height: 80px;width: 80px;">
+                <div class="bgs bg15b"></div>
+                <svg viewBox="0 0 100 100">
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#e5e9f2" stroke-width="5.0" fill="none"
+                    class="el-progress-circle__track"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;">
+                  </path>
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#48e1a7" fill="none" stroke-linecap="round" stroke-width="5.0"
+                    class="el-progress-circle__path"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
+                  </path>
+                </svg>
+                <div class="el-progress_text">100%</div>
+              </div>
+              <div class="textCenter mt12">
+                <p>危化领域</p>
+                <p>安全生产风险普查率</p>
+              </div>
+            </div>
+            <div class="flex column acenter">
+              <div class="el-progress--circle" style="height: 80px;width: 80px;">
+                <div class="bgs bgff8"></div>
+                <svg viewBox="0 0 100 100">
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#e5e9f2" stroke-width="5.0" fill="none"
+                    class="el-progress-circle__track"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;">
+                  </path>
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#ff8126" fill="none" stroke-linecap="round" stroke-width="5.0"
+                    class="el-progress-circle__path"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
+                  </path>
+                </svg>
+                <div class="el-progress_text">1个</div>
+              </div>
+              <div class="textCenter mt12">
+                <p>危化领域</p>
+                <p>安全专业委员会数</p>
+              </div>
+            </div>
+            <div class="flex column acenter">
+              <div class="el-progress--circle" style="height: 80px;width: 80px;">
+                <div class="bgs bgffc"></div>
+                <svg viewBox="0 0 100 100">
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#e5e9f2" stroke-width="5.0" fill="none"
+                    class="el-progress-circle__track"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;">
+                  </path>
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#ffc341" fill="none" stroke-linecap="round" stroke-width="5.0"
+                    class="el-progress-circle__path"
+                    style="stroke-dasharray: 0px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
+                  </path>
+                </svg>
+                <div class="el-progress_text">0起</div>
+              </div>
+              <div class="textCenter mt12">
+                <p>危化领域</p>
+                <p>重特大事故起数</p>
+              </div>
+            </div>
+          </div>
+          <div class="flex around mt20 wrap" v-if="gkShow">
+            <div class="flex column acenter icon160">
+              <div class="el-progress--circle" style="height: 80px;width: 80px;">
+                <div class="bgs bg15b"></div>
+                <svg viewBox="0 0 100 100">
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#e5e9f2" stroke-width="5.0" fill="none"
+                    class="el-progress-circle__track"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;">
+                  </path>
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#48e1a7" fill="none" stroke-linecap="round" stroke-width="5.0"
+                    class="el-progress-circle__path"
+                    style="stroke-dasharray: 0px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
+                  </path>
+                </svg>
+                <div class="el-progress_text">0起</div>
+              </div>
+              <div class="textCenter mt12">
+                <p>工矿领域</p>
+                <p>特重大事故起数</p>
+              </div>
+            </div>
+            <div class="flex column acenter icon160">
+              <div class="el-progress--circle" style="height: 80px;width: 80px;">
+                <div class="bgs bgff8"></div>
+                <svg viewBox="0 0 100 100">
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#e5e9f2" stroke-width="5.0" fill="none"
+                    class="el-progress-circle__track"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;">
+                  </path>
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#ff8126" fill="none" stroke-linecap="round" stroke-width="5.0"
+                    class="el-progress-circle__path"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
+                  </path>
+                </svg>
+                <div class="el-progress_text">1个</div>
+              </div>
+              <div class="textCenter mt12">
+                <p>工矿领域</p>
+                <p>安全专业委员数</p>
+              </div>
+            </div>
+            <div class="flex column acenter icon160">
+              <div class="el-progress--circle" style="height: 80px;width: 80px;">
+                <div class="bgs bgffc"></div>
+                <svg viewBox="0 0 100 100">
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#e5e9f2" stroke-width="5.0" fill="none"
+                    class="el-progress-circle__track"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;">
+                  </path>
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#ffc341" fill="none" stroke-linecap="round" stroke-width="5.0"
+                    class="el-progress-circle__path"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
+                  </path>
+                </svg>
+                <div class="el-progress_text">100%</div>
+              </div>
+              <div class="textCenter mt12">
+                <p>工矿领域</p>
+                <p>安全生产风险普查率</p>
+              </div>
+            </div>
+            <div class="flex column acenter icon160 mt12">
+              <div class="el-progress--circle" style="height: 80px;width: 80px;">
+                <div class="bgs bg20d"></div>
+                <svg viewBox="0 0 100 100">
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#e5e9f2" stroke-width="5.0" fill="none"
+                    class="el-progress-circle__track"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;">
+                  </path>
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#20DBEE" fill="none" stroke-linecap="round" stroke-width="5.0"
+                    class="el-progress-circle__path"
+                    style="stroke-dasharray: 171.28px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
+                  </path>
+                </svg>
+                <div class="el-progress_text"></div>
+              </div>
+              <div class="textCenter mt12">
+                <p>涉爆粉尘企业</p>
+                <p>网络专题学习率</p>
+              </div>
+            </div>
+            <div class="flex column acenter icon160 mt12">
+              <div class="el-progress--circle" style="height: 80px;width: 80px;">
+                <div class="bgs bg369"></div>
+                <svg viewBox="0 0 100 100">
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#e5e9f2" stroke-width="5.0" fill="none"
+                    class="el-progress-circle__track"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;">
+                  </path>
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#3699F7" fill="none" stroke-linecap="round" stroke-width="5.0"
+                    class="el-progress-circle__path"
+                    style="stroke-dasharray: 171.28px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
+                  </path>
+                </svg>
+                <div class="el-progress_text"></div>
+              </div>
+              <div class="textCenter mt12">
+                <p>涉爆粉尘企业安全生产</p>
+                <p>社会化服务覆盖率</p>
+              </div>
+            </div>
+            <div class="flex column acenter icon160 mt12">
+              <div class="el-progress--circle" style="height: 80px;width: 80px;">
+                <div class="bgs bga0f"></div>
+                <svg viewBox="0 0 100 100">
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#e5e9f2" stroke-width="5.0" fill="none"
+                    class="el-progress-circle__track"
+                    style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;">
+                  </path>
+                  <path d="
+                                        M 50 50
+                                        m 0 -47
+                                        a 47 47 0 1 1 0 94
+                                        a 47 47 0 1 1 0 -94
+                                        " stroke="#AA00FF" fill="none" stroke-linecap="round" stroke-width="5.0"
+                    class="el-progress-circle__path"
+                    style="stroke-dasharray: 171.28px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;">
+                  </path>
+                </svg>
+                <div class="el-progress_text"></div>
+              </div>
+              <div class="textCenter mt12">
+                <p>粉尘爆炸危险场所</p>
+                <p>防爆电气设施采用率</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ml20 w49">
+        <div class="flex between card__header">
+          <p class="fs20 c3 b">企业风险普查</p>
+          <p class="c9">截止到5月底</p>
+        </div>
+        <div class="p20 flex between">
+          <el-tabs v-model="activeName1" type="card" @tab-click="handleClick1" >
+            <el-tab-pane label="重点领域安全生产风险普查率" name="first">
+              <div id="main3" style="max-width: 100%;height: 320px;" v-show="activeName1 == 'first'"></div>
+            </el-tab-pane>
+            <el-tab-pane label="企业风险档案" name="second">
+              <div id="main4" style="max-width: 100%;height: 320px;" v-show="activeName1 == 'second'"></div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </div>
+    <div class="minTop shadow mt20 flex between">
+      <div class="w49">
+        <div class="flex between card__header">
+          <p class="fs20 c3 b">自然灾害防控</p>
+          <!-- <p class="c9">截止到5月底</p> -->
+        </div>
+        <div class="p20  flex between">
+          <el-tabs v-model="activeName2" type="card" @tab-click="handleClick2">
+            <el-tab-pane label="基层防汛“掌上应急”开通情况" name="first">
+              <p class="textCenter mb12">全市基层防汛“掌上应急”开通情况</p>
+              <div id="main5" style="max-width: 100%;height: 210px;"></div>
+            </el-tab-pane>
+            <el-tab-pane label="村级防汛防台形势图修编" name="second">
+              <p class="textCenter mb12">全市村级防汛防台形势图修编</p>
+              <div id="main6" style="max-width: 100%;height: 210px;"></div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+      <div class="ml20 w49">
+        <div class="flex between card__header">
+          <p class="fs20 c3 b">应急救援</p>
+          <p class="c9">截止到5月底</p>
+        </div>
+        <div class="p20 flex between">
+          <el-tabs v-model="activeName3" type="card" @tab-click="handleClick3">
+            <el-tab-pane label="救援队伍建设" name="first">
+              <div class="p20">
+                <p class="textRight c9">已完成数</p>
+                  <div class="mb12 mr20">
+                    <div class="flex between ml20 mb12">
+                      <p>培育社会救援队伍 (支)</p>
+                      <p>0</p>
+                    </div>
+                    <div class="flex acenter">
+                      <em class="zfx">◆</em>
+                      <el-progress
+                        :percentage="0"
+                        :show-text="false"
+                      ></el-progress>
+                    </div>
+                  </div>
+                  <div class="mb12 mr20">
+                    <div class="flex between ml20 mb12">
+                      <p>乡镇综合应急救援队伍（队）</p>
+                      <p>0</p>
+                    </div>
+                    <div class="flex acenter">
+                      <em class="zfx">◆</em>
+                      <el-progress
+                        :percentage="0"
+                        :show-text="false"
+                      ></el-progress>
+                    </div>
+                  </div>
+                  <div class="mb12 mr20">
+                    <div class="flex between ml20 mb12">
+                      <p>救援直升机临时起降点（个）</p>
+                      <p>0</p>
+                    </div>
+                    <div class="flex acenter">
+                      <em class="zfx">◆</em>
+                      <el-progress
+                        :percentage="0"
+                        :show-text="false"
+                      ></el-progress>
+                    </div>
+                  </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="应急保障能力" name="second">
+                <div class="p10">
+                  <p class="textRight c9">已完成情况</p>
+                  <div class="mb12 mr20">
+                    <div class="flex between ml20 mb12">
+                      <p>应急值班值守规范化率 (%)</p>
+                      <p>100%</p>
+                    </div>
+                    <div class="flex acenter">
+                      <em class="zfx">◆</em>
+                      <el-progress
+                        :percentage="100"
+                        :show-text="false"
+                      ></el-progress>
+                    </div>
+                  </div>
+                  <div class="mb12 mr20">
+                    <div class="flex between ml20 mb12">
+                      <p>新规范化避灾安置场所数（个）</p>
+                      <p>0</p>
+                    </div>
+                    <div class="flex acenter">
+                      <em class="zfx">◆</em>
+                      <el-progress
+                        :percentage="0"
+                        :show-text="false"
+                      ></el-progress>
+                    </div>
+                  </div>
+                </div>
+              </el-tab-pane>
+            <!-- <el-tab-pane label="避灾安置场所建设" name="second">
+              <p></p>
+              <div id="main7" style="max-width: 100%;height: 210px;"></div>
+            </el-tab-pane>
+            <el-tab-pane label="森林火险防控" name="third">
+              <div id="main8" style="max-width: 100%;height: 210px;"></div>
+            </el-tab-pane> -->
+          </el-tabs>
+        </div>
+      </div>
+    </div>
+    <div class="minTop shadow mt20">
+      <div>
+        <div class="flex between card__header acenter">
+          <div class="flex acenter">
+            <p class="fs20 c3 b mr12">突发事件</p>
+            <div class="cc8">{{myCity}}应急管理综合指挥平台</div>
+          </div>
+          <p class="c9">截止到5月底</p>
+        </div>
+        <div class="p20 flex between">
+          <el-table :data="tableData" border style="width: 100%">
+            <!-- <el-table-column prop="id" label="" width="180">
+                            </el-table-column> -->
+            <el-table-column type="index" :index="indexMethod">
+            </el-table-column>
+            <el-table-column prop="uname" label="事件名称" width="400">
+            </el-table-column>
+            <el-table-column prop="level" label="事故等级" width="80" align="center">
+            </el-table-column>
+            <el-table-column prop="types" label="事故类型" width="100" align="center">
+            </el-table-column>
+            <el-table-column prop="time" label="发生时间" width="220" align="center">
+            </el-table-column>
+            <el-table-column prop="origin" label="信息来源" align="center">
+            </el-table-column>
+            <el-table-column prop="msg" label="应急预案" width="120" align="center">
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  let one, two, three,four,five,six,seven;
+  const _myCity="景宁畲族自治县"
+  export default {
+    data() {
+      return {
+        myCity:_myCity,
+        activeName1: 'first',
+        activeName2: 'first',
+        activeName3: 'first',
+        tableData: [
+        {
+          id: 1,
+          uname: "景宁畲族自治县新海线溪口二号桥桥头路段发生一起交通事故",
+          level: "一般",
+          types: "道路交通",
+          time: "2021年01月16日 06时48分",
+          origin: "景宁县公安局交警大队",
+          msg: "应急预案",
+        },
+        {
+          id: 2,
+          uname:
+            "丽水市丽景民族工业园浙江天造环保科技有限公司“3.15”一般车辆伤害事故",
+          level: "一般",
+          types: "车辆伤害",
+          time: "2021年03月15日 10时许",
+          origin: "景宁县应急管理局",
+          msg: "应急预案",
+        }
+      ],
+      gkShow: false,
+      whShow: true,
+      showTit: false,
+      } 
+    },
+    mounted() {
+      let _this =this;
+      this.initGzbgChart();
+      this.initGzbgChart2();
+      this.initGzbgChart3();
+            this.initGzbgChart4();
+            this.initGzbgChart5();
+            this.initGzbgChart6();
+            // this.initGzbgChart7();
+      window.onresize = () => {
+          return (() => {
+            _this.initGzbgChart();
+            _this.initGzbgChart2();
+            _this.initGzbgChart3();
+            _this.initGzbgChart4();
+            _this.initGzbgChart5();
+            _this.initGzbgChart6();
+            // _this.initGzbgChart7();
+          })();
+      };
+    },
+    methods: {
+      handleClick1(tab, event) {
+          this.activeName1 = tab.name;
+          this.$nextTick(function(){
+               this.initGzbgChart3();
+               this.initGzbgChart4();
+          })
+      },
+      handleClick2(tab, event) {
+        this.$nextTick(function(){
+             this.initGzbgChart5();
+             this.initGzbgChart6();
+
+        })
+      },
+      handleClick3(tab, event) {
+        this.$nextTick(function(){
+             this.initGzbgChart7();
+             // this.initGzbgChart8();
+        })
+      },
+      indexMethod(index) {
+        return index * 1 + 1;
+      },
+      gk() {
+        this.gkShow = true
+        this.whShow = !this.whShow
+      },
+      wh() {
+        this.whShow = true
+        this.gkShow = !this.gkShow
+      },
+      warns() {
+        this.showTit = true
+      },
+      initGzbgChart() {
+        if (one != null && one != "" && one != undefined) {
+          one.dispose(); //销毁
+        }
+        one = this.$echarts.init(
+          document.getElementById("main1")
+        );
+        one.setOption({
+            color: ['#1492ff', '#d40000'],
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: ['事故起数', '死亡人数'],
+                bottom: 0
+            },
+            grid: {
+                top: '8%',
+                left: '3%',
+                right: '5%',
+                bottom: '15%',
+                containLabel: true
+            },
+            calculable: true,
+            xAxis: [
+                {
+                    type: 'category',
+                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+                }
+            ],
+            yAxis: {
+                type: 'value',
+                show: false
+            }
+            ,
+            series: [
+                {
+                    name: '事故起数',
+                    type: 'bar',
+                    data: [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                    label: {  // 在图形上显示每个数据
+                        show: true,
+                        position: 'top',
+                        itemStyle: {
+                            color: '#1492ff' //柱子的颜色
+
+                        }
+                    },
+                },
+                {
+                    name: '死亡人数',
+                    type: 'bar',
+                    data: [2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                    label: {  // 在图形上显示每个数据
+                        show: true,
+                        position: 'top',
+                        itemStyle: {
+                            normal: {
+                                color: '#d40000' //柱子的颜色
+                            }
+                        }
+                    },
+                }
+            ]
+        });
+      },
+    initGzbgChart2() {
+      if (two != null && two != "" && two != undefined) {
+        two.dispose(); //销毁
+      }
+      two = this.$echarts.init(
+        document.getElementById("main2")
+      );
+      two.setOption({
+            color: ['#ff6b00', '#d40000', '#15be50'],
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+                bottom: 0,
+                left: 'center'
+            },
+            series: [
+                {
+                    name: ['1', '2', '0'],
+                    type: 'pie',
+                    radius: ['50%', '70%'],
+                    data: [
+                        { value: 1, name: '工矿商贸', seriesName: '0' },
+                        { value: 2, name: '道路交通', seriesName: '0' },
+                        { value: 0, name: '消防火灾', seriesName: '0' }
+                    ],
+                    label: {
+                        show: true,
+                        // position: 'top',
+                        formatter: '{c}起'
+                    },
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }
+            ]
+        });
+    },
+    initGzbgChart3() {
+      if (three != null && three != "" && three != undefined) {
+        three.dispose(); //销毁
+      }
+      three = this.$echarts.init(
+        document.getElementById("main3")
+      );
+      three.setOption({
+            color: ['#15be50'],
+            xAxis: {
+                type: 'category',
+                data: ['危化领域', '工矿领域', '消防领域', '道路交通', '建设施工', '城市运行', '旅游领域', '特种设备'],
+                axisLabel: {
+                    textStyle: {
+                        color: '#333', //坐标值得具体的颜色
+                        fontSize: 14
+                    },
+                    interval: 0
+                },
+                axisTick: {
+                    show: true
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#dddddd',
+                    }
+                }
+            },
+            yAxis: {
+                show: false
+            },
+            series: [{
+                data: [100, 100, 100, 100, 100, 100, 100, 0],
+                type: 'bar',
+                label: {
+                    show: true,
+                    position: 'top',
+                    formatter: '{c}%'
+                },
+                barWidth: 30  // 柱子宽度
+            }],
+            grid: {
+                top: '10%',
+                left: '3%',
+                right: '5%',
+                bottom: '5%',
+                containLabel: true
+            }
+        });
+    },
+    initGzbgChart4() {
+      if (four != null && four != "" && four != undefined) {
+        four.dispose(); //销毁
+      }
+      four = this.$echarts.init(
+        document.getElementById("main4")
+      );
+      four.setOption({
+            color: ['#EE6666', '#FAC858', '#5470C6', '#91CC75'],
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+                right: 0,
+                orient: 'vertical',
+                top: 'center'
+            },
+            grid: {
+                top: '5%',
+                left: '3%',
+                right: '5%',
+                bottom: '18%',
+                containLabel: true
+            },
+            series: [
+                {
+                    name: '访问来源',
+                    type: 'pie',
+                    radius: '50%',
+                    data: [
+                        { value: 0.22, name: '重大风险', seriesName: '15' },
+                        { value: 0.06, name: '较大风险', seriesName: '4 ' },
+                        { value: 14.39, name: '一般风险', seriesName: '975' },
+                        { value: 85.33, name: '低风险', seriesName: '5809' }
+                    ],
+                    label: {
+                        show: true,
+                        // position: 'top',
+                        formatter: '{b} {d} {c}%'
+                    },
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }
+            ]
+        });
+    },
+    initGzbgChart5() {
+      if (five != null && five != "" && five != undefined) {
+        five.dispose(); //销毁
+      }
+      five = this.$echarts.init(
+        document.getElementById("main5")
+      );
+      five.setOption({
+            xAxis: {
+                type: 'category',
+                data: ['05-01', '05-08', '05-15', '05-22', '05-27', '05-31']
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 100,
+                splitNumber: 5,
+                splitLine: {
+                    show: true
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#333333',
+                    }
+                },
+                axisLabel: {
+                    formatter: '{value}%'
+                }
+            },
+            series: [{
+                data: [100, 100, 100, 100, 100, 100],
+                type: 'line'
+            }],
+            grid: {
+                top: '4%',
+                left: '3%',
+                right: '5%',
+                bottom: '18%',
+                containLabel: true
+            }
+        });
+    },
+    initGzbgChart6() {
+      if (six != null && six != "" && six != undefined) {
+        six.dispose(); //销毁
+      }
+      six = this.$echarts.init(
+        document.getElementById("main6")
+      );
+      six.setOption({
+            color: ['#FF3E38', '#53A8E8'],
+            tooltip: {
+                trigger: '11'
+            },
+            legend: {
+                // orient: 'vertical',
+                left: 'center',
+            },
+            series: [
+                {
+                    name: '访问来源',
+                    type: 'pie',
+                    radius: '50%',
+                    data: [
+                        { value: 0, name: '未编修', seriesName: '0' },
+                        { value: 100, name: '已编修', seriesName: '140' }
+                    ],
+                    label: {
+                        show: true,
+                        // position: 'top',
+                        formatter: '{b} {d} {c}% ',
+                        fontSize: 16
+                    },
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }
+            ],
+            grid: {
+                top: '4%',
+                left: '3%',
+                right: '5%',
+                bottom: '18%',
+                containLabel: true
+            }
+        });
+    },
+    initGzbgChart7() {
+      if (seven != null && seven != "" && seven != undefined) {
+        seven.dispose(); //销毁
+      }
+      seven = this.$echarts.init(
+        document.getElementById("main7")
+      );
+      seven.setOption({
+            xAxis: {
+                type: 'category',
+                data: ['05-01', '05-08', '05-15', '05-22', '05-27', '05-31', '06-07', '06-14', '06-21']
+            },
+            legend: {
+                data: ['乡镇应急救援队伍']
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 120,
+                splitNumber: 5,
+                splitLine: {
+                    show: true
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#333333',
+                    }
+                }
+            },
+            series: [{
+                data: [21, 41, 50, 70, 77, 90, 105, 112, 117],
+                type: 'line'
+            }],
+            grid: {
+                top: '10%',
+                left: '3%',
+                right: '5%',
+                bottom: '0%',
+                containLabel: true
+            }
+        });
+    },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  #app {
+    background: #fff !important;
+  }
+
+  @media screen and (max-width: 1200px) {
+    .main {
+      width: 100%;
+      background-color: #fff;
+      margin: 0px auto;
+      padding: 30px 0;
+    }
+
+    .minHeader,
+    .market {
+      width: calc(100% - 40px);
+      box-sizing: border-box;
+      border-radius: 4px;
+      padding: 20px;
+      margin: 20px auto 0;
+      background: #fff;
+    }
+
+    .minTop {
+      width: calc(100% - 40px);
+      box-sizing: border-box;
+      border-radius: 4px;
+      margin: 0 auto;
+    }
+  }
+
+  @media screen and (min-width: 1200px) {
+    .main {
+      width: 1200px;
+      margin: 0px auto;
+      padding: 30px 0;
+    }
+
+    .minHeader,
+    .market {
+      width: 1160px;
+      border-radius: 4px;
+      padding: 20px 20px 20px;
+      background: #fff;
+    }
+
+    .minTop {
+      background-color: #fff;
+      width: 1200px;
+      border-radius: 4px;
+    }
+  }
+
+  .card__header {
+    padding: 18px 20px;
+    border-bottom: 1px solid #ebeef5;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  .el-breadcrumb__inner.is-link {
+    font-size: 16px !important;
+  }
+
+  .el-icon-s-marketing {
+    color: rgb(54, 153, 247);
+    font-size: 30px;
+  }
+
+  .cline {
+    width: 1px;
+    height: 30px;
+    background: #dddddd;
+    margin: 0 8px;
+  }
+
+  .hl30 {
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .shadow {
+    box-shadow: 0 2px 12px 0 #ccc;
+  }
+
+  .norm {
+    font-style: normal;
+    color: #15be50;
+  }
+
+  .zhan {
+    width: 100%;
+    height: 280px;
+    /* background: #ccc; */
+  }
+
+  .w100 {
+    width: 100%;
+  }
+
+  .w49 {
+    width: 49%;
+  }
+
+  .w57 {
+    width: 57%;
+  }
+
+  .w41 {
+    width: 41%;
+  }
+
+  .lh30 {
+    line-height: 30px;
+  }
+
+  .h60 {
+    height: 60px;
+  }
+
+  .btn {
+    width: 22%;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 4px;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .btn1 {
+    width: 22%;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 4px;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .btn2 {
+    width: 22%;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 4px;
+    text-align: center;
+    background: #c8c9cc !important;
+    cursor: pointer;
+    color: #fff !important;
+    font-size: 16px !important;
+    border-color: #c8c9cc !important;
+  }
+
+  .btn1:hover {
+    color: #409eff;
+    border-color: #c6e2ff;
+    background-color: #ecf5ff;
+  }
+
+  .btn:hover {
+    background: #66b1ff;
+    border-color: #66b1ff;
+    color: #fff;
+  }
+
+  .pore {
+    position: relative;
+  }
+
+  .el-popover {
+    min-width: 55px !important;
+    left: 415px !important;
+  }
+
+  .el-tooltip__popper {
+    border: 1px solid #ecf5ff !important;
+    background: #fff !important;
+  }
+
+  /* .poab {
+      position: absolute;
+      top: -70px;
+      width: 80px;
+      height: 40px;
+      line-height: 40px;
+      color: #333333;
+      border: 1px solid #ebeef5;
+      background: #fff;
+      border-radius: 4px;
+      top: -60px;
+      left: 50%;
+      transform: translate(-50%, 10px);
+  }
+  .popper__arrow {
+      position: absolute;
+      width: 5px;
+      top: -10px;
+      left: 50%;
+      transform: translate(-50%, 0px);
+      height: 0;
+  }
+  .corner {
+      width: 0px;
+      height: 0px;
+      border: 5px solid #f3f3ed;
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+      border-right-color: transparent;
+
+  } */
+  .el-progress--circle,
+  .el-progress--dashboard {
+    display: inline-block;
+    position: relative;
+  }
+
+  .el-button:hover {
+    color: #fff;
+    border-color: #c8c9cc !important;
+    background-color: #c8c9cc;
+  }
+
+  .el-progress_text {
+    font-size: 16px !important;
+    color: #000;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    margin: 0;
+    transform: translateY(-50%);
+  }
+
+  .bgs {
+    width: 60px;
+    height: 60px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 10px;
+    margin: auto;
+    border-radius: 50%;
+    /* background: #48e1a7; */
+  }
+
+  .bgc89 {
+    background: #c8c9cc;
+  }
+
+  .borc8 {
+    border: 1px solid #c8c9cc;
+  }
+
+  .el-tabs {
+    width: 100% !important;
+  }
+
+  .mb12 {
+    margin-bottom: 12px;
+  }
+
+  .zfx {
+    color: #ff6b00;
+    font-style: normal;
+    font-size: 20px;
+    vertical-align: middle;
+    line-height: 22px;
+    margin-right: 12px;
+  }
+
+  .el-progress {
+    width: 100% !important;
+  }
+
+  .cc8 {
+    background: #c8c9cc;
+    color: #fff;
+    padding: 12px 20px;
+    border-radius: 5px;
+  }
+
+  .el-table__row .el-table_1_column_7 {
+    color: #aaa !important;
+  }
+
+  .el-table thead {
+    color: #333 !important;
+  }
+
+  .el-table th {
+    text-align: center !important;
+  }
+
+  .textRight {
+    text-align: right;
+  }
+
+  .icon160 {
+    width: 160px;
+  }
+
+  .h510 {
+    height: 510px;
+  }
+</style>
+<style>
+  .el-table__row .el-table_1_column_2 {
+    color: #409eff;
+    font-size: 12px;
+  }
+</style>
\ No newline at end of file
--- a/jingning_vue/src/views/Ecology.vue
+++ b/jingning_vue/src/views/Ecology.vue
+<template>
+  <div class="ecology">
+    <el-row :gutter="20">
+      <el-col :sm="12" :xs="24">
+        <div class="clear-water unify-item">
+          <h3 class="module-tit">深化碧水行动</h3>
+          <ul>
+            <li v-for="(item, index) in clear_water_info" :key="index">
+              <p class="cw-classify">{{ item.classify }}</p>
+              <div class="cw-progress">
+                <el-progress
+                  type="circle"
+                  :percentage="100"
+                  :stroke-width="12"
+                  :show-text="false"
+                ></el-progress>
+                <p>{{ item.num }}个</p>
+              </div>
+              <div class="cw-percentage">
+                <p class="cw-per-num">{{ item.current_num }}</p>
+                <p class="cw-per-text">{{ item.name }}</p>
+              </div>
+              <div class="cw-compare">
+                <p>目标</p>
+                <p class="cw-com-per">{{ item.target_num }}</p>
+                <p>同比</p>
+                <p class="cw-com-desc">上升{{ item.compare_num }}个百分点</p>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </el-col>
+      <el-col :sm="12" :xs="24">
+        <div class="air-quality unify-item">
+          <h3 class="module-tit">空气质量巩固提升行动</h3>
+          <div class="aq-map">
+            <img src="../assets/images/sy-map.jpg" alt="" />
+            <div class="aq-exponent">
+              <p>空气质量指数</p>
+              <ul class="aq-list">
+                <li v-for="(item, index) in aqList" :key="index">
+                  <i :style="{ 'background-color': item.bgc }"></i>
+                  <span>{{ item.name }}</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <ul class="aq-desc">
+            <li v-for="(item, index) in aq_desc_info" :key="index">
+              <p class="aq-desc-name">{{ item.name }}</p>
+              <div class="aq-desc-con">
+                <div class="aq-desc-tb">
+                  <div class="aq-desc-icon">
+                    <i class="iconfont" :class="item.icon"></i>
+                  </div>
+                  <div>
+                    <p style="color: #1bd68a">
+                      下降{{ Math.abs(item.compare_num) }}个百分点
+                    </p>
+                    <span>同比</span>
+                  </div>
+                </div>
+                <div class="aq-desc-tb">
+                  <div>
+                    <p style="color: #1492ff; font-size: 18px">
+                      {{ item.current_num }}
+                    </p>
+                    <span>日均值</span>
+                  </div>
+                  <div>
+                    <p style="color: #1492ff; font-size: 18px">
+                      {{ item.target_num }}
+                    </p>
+                    <span>目标</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :sm="12" :xs="24">
+        <div class="no-waste unify-item">
+          <h3 class="module-tit">无废城市建设</h3>
+          <ul class="nw-con">
+            <li
+              v-for="(item, index) in no_waste_info"
+              :key="index"
+              :class="{ 'nw-task-first': index == 100 }"
+            >
+              <h4 class="nw-task-name">{{ item.name }}</h4>
+              <div class="nw-task-num">
+                <div class="nw-task-current">
+                  <p>{{ item.current_num }}</p>
+                  <span>已完成</span>
+                </div>
+                <div class="nw-task-target">
+                  <p>{{ item.target_num }}</p>
+                  <span>目标</span>
+                </div>
+                <div class="nw-task-compare">
+                  <p>上升{{ item.compare_num }}个百分点</p>
+                  <span>同比</span>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </el-col>
+      <el-col :sm="12" :xs="24">
+        <div class="beautiful-rivers unify-item">
+          <h3 class="module-tit">美丽河湖库</h3>
+          <ul class="br-con">
+            <li v-for="(item, index) in br_info" :key="index">
+              <h4>{{ item.name }}</h4>
+              <div class="br-task-num">
+                <div class="br-task-current">
+                  <div class="br-task-pro">
+                    <el-progress
+                      type="circle"
+                      :percentage="93"
+                      :stroke-width="8"
+                      :show-text="false"
+                    ></el-progress>
+                    <i class="iconfont icon-hehu" style="color: #cbebfc"></i>
+                  </div>
+                  <div>
+                    <p style="color: #1492ff; font-size: 18px">
+                      {{ item.current_num }}
+                    </p>
+                    <span>问题整改率</span>
+                  </div>
+                </div>
+                <div class="br-task-target">
+                  <div class="br-task-pro">
+                    <el-progress
+                      type="circle"
+                      :percentage="93"
+                      :stroke-width="8"
+                      :show-text="false"
+                      :color="'#ffc149'"
+                    ></el-progress>
+                    <i class="iconfont icon-hehu" style="color: #fce8c3"></i>
+                  </div>
+                  <div>
+                    <p style="color: #ffc149; font-size: 18px">
+                      {{ item.target_num }}
+                    </p>
+                    <span>目标</span>
+                  </div>
+                </div>
+                <div class="br-task-compare">
+                  <i class="iconfont icon-shangsheng"></i>
+                  <div>
+                    <p style="color: #1bd68a; font-size: 18px">
+                      上升{{ item.compare_num }}个百分点
+                    </p>
+                    <span>环比</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :sm="12" :xs="24">
+        <div class="unify-item">
+          <h3 class="module-tit">政府工作报告任务落实</h3>
+          <Tree :treeData="treeData"></Tree>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Tree from "../components/Tree.vue";
+export default {
+  name: "ecology",
+  components: { Tree },
+  data() {
+    return {
+      aqList: [
+        {
+          name: "优",
+          bgc: "#10D485",
+        },
+        {
+          name: "良",
+          bgc: "#189CFF",
+        },
+        {
+          name: "轻度污染",
+          bgc: "#2A6FFF",
+        },
+        {
+          name: "中度污染",
+          bgc: "#FFA72A",
+        },
+        {
+          name: "重度污染",
+          bgc: "#FF842A",
+        },
+      ],
+      clear_water_info: [
+        {
+          classify: "国考断面",
+          num: 2,
+          name: "优Ⅲ类",
+          current_num: "100%",
+          target_num: "100%",
+          compare_num: 0.5,
+        },
+        {
+          classify: "省控断面",
+          num: 2,
+          name: "优Ⅲ类",
+          current_num: "100%",
+          target_num: "100%",
+          compare_num: 0.5,
+        },
+        {
+          classify: "饮用水水源地",
+          num: 1,
+          name: "优Ⅲ类",
+          current_num: "100%",
+          target_num: "100%",
+          compare_num: 0.5,
+        },
+      ],
+      aq_desc_info: [
+        {
+          name: "空气优良天数比",
+          target_num: "93.3%",
+          current_num: "99.3%",
+          compare_num: -0.7,
+          icon: "icon-kongqiyouliang",
+        },
+        {
+          name: "PM2.5浓度",
+          target_num: 36,
+          current_num: 22,
+          compare_num: -4.3,
+          icon: "icon-pm",
+        },
+      ],
+      no_waste_info: [
+       
+        {
+          name: "医疗废物收集处置率",
+          target_num: "100%",
+          current_num: "100%",
+          compare_num: 0.5,
+        },
+        {
+          name: "医城镇垃圾分类覆盖面",
+          target_num: "100%",
+          current_num: "80%",
+          compare_num: 0.5,
+        },
+      ],
+      br_info: [
+        {
+          name: "河湖问题整改",
+          target_num: "93.3%",
+          current_num: "95.3%",
+          compare_num: 0.5,
+        },
+        {
+          name: "河湖问题整改",
+          target_num: "93.3%",
+          current_num: "95.3%",
+          compare_num: 0.5,
+        },
+      ],
+      ecological_creation_info: [
+        {
+          name: "市级生态文明建设示范市（县）",
+          num: "24个",
+          icon: "icon-gongyuzhuzhai",
+        },
+        {
+          name: "县市区级生态文明建设示范市（县）",
+          num: "61个",
+          icon: "icon-chengshi1",
+        },
+        {
+          name: '绿水青山就是"金山银山"实践创新基地',
+          num: "24个",
+          icon: "icon-shanshui",
+        },
+      ],
+      treeData: [
+        {
+          name: "深化碧水行动",
+          children: [
+            {
+              name: "新增小微企业园(39.7)",
+              status:'正常'
+            },
+            {
+              name: "探索开展“清新田园”建设(39.7)",
+              status:'滞后'
+            },
+            {
+              name: "接收外送电(39.7)",
+              status:'滞后'
+            },
+            {
+              name: "全省天然气消费量(39.7)",
+              status:'正常'
+            },
+            {
+              name: "海铁联运量(39.7)",
+              status:'正常'
+            },
+            {
+              name: "淘汰国Ⅲ及以下老旧运营(39.7)",
+              status:'正常'
+            },
+            {
+              name: "工业废气治理项目(39.7)",
+              status:'正常'
+            },
+            {
+              name: "工业废物治理项目(39.7)",
+              status:'正常'
+            }
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+//公共样式
+.module-tit{
+  font-size: 20px;
+  padding: 16px 0 12px 12px;
+  font-weight: 600;
+  position: relative;
+}
+.module-tit::before{
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: 16px;
+  width: 4px;
+  height: 28px;
+  background-color: #1492ff;
+}
+.unify-item{
+  box-sizing: border-box;
+  padding: 0 20px 12px;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+//当前页面样式
+.clear-water {
+  ul {
+    li {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 130px;
+      background-color: #fafafa;
+      margin-bottom: 20px;
+      color: #333;
+      .cw-classify {
+        width: 30px;
+        height: 130px;
+        text-align: center;
+        background-color: #e1f1ff;
+        color: #1492ff;
+        display: flex;
+        padding: 0 8px;
+        align-items: center;
+      }
+      .cw-progress {
+        position: relative;
+        >>> .el-progress-circle {
+          width: 100px !important;
+          height: 100px !important;
+        }
+        > p {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          font-size: 18px;
+        }
+      }
+      .cw-percentage {
+        .cw-per-num {
+          font-size: 20px;
+          color: #1492ff;
+          font-weight: 600;
+          margin-bottom: 8px;
+        }
+        .cw-per-text {
+          font-size: 18px;
+        }
+      }
+      .cw-compare {
+        width: 35%;
+        padding-left: 20px;
+        box-sizing: border-box;
+        border-left: 1px solid #eee;
+        .cw-com-per {
+          color: #1492ff;
+          margin: 8px 0 12px;
+        }
+        .cw-com-desc {
+          color: #1bd68a;
+          margin: 5px 0;
+        }
+      }
+    }
+  }
+}
+.air-quality {
+  .aq-map {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    img {
+      width: 40%;
+      height: auto;
+    }
+    .aq-exponent {
+      p {
+        font-size: 18px;
+        font-weight: 600;
+      }
+    }
+  }
+  .aq-list {
+    margin: 20px 0;
+    li {
+      display: flex;
+      align-items: center;
+      padding: 8px 0;
+      i {
+        display: block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+    }
+  }
+  .aq-desc {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 12px;
+    color: #333;
+    li {
+      width: 47%;
+      background-color: #fafafa;
+      .aq-desc-name {
+        color: #1492ff;
+        height: 36px;
+        text-align: center;
+        line-height: 36px;
+        border-radius: 2px;
+        background-color: #e1f1ff;
+      }
+      .aq-desc-con {
+        padding: 20px 0 0;
+        i {
+          color: #1492ff;
+          font-size: 24px;
+          line-height: 46px;
+        }
+        .aq-desc-tb {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 20px;
+          padding: 0 12px;
+          > div {
+            width: 45%;
+          }
+          .aq-desc-icon {
+            width: 46px;
+            height: 46px;
+            border-radius: 50%;
+            background-color: #e7f5ff;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+.no-waste {
+  .nw-con {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    li {
+      padding: 12px 20px;
+      background-color: #eefbff;
+      width: 48%;
+      box-sizing: border-box;
+      color: #333;
+      .nw-task-name {
+        font-size: 18px;
+        font-weight: 600;
+        color: #000;
+      }
+      .nw-task-num {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin: 12px 0;
+        p {
+          font-size: 18px;
+          margin: 5px 0;
+        }
+        .nw-task-current {
+          width: 20%;
+          p {
+            color: #1492ff;
+          }
+        }
+        .nw-task-target {
+          width: 20%;
+          p {
+            color: #ffc149;
+          }
+        }
+        .nw-task-compare {
+          width: 45%;
+          p {
+            color: #1bd68a;
+          }
+        }
+      }
+    }
+    .nw-task-first {
+      width: 100%;
+      background-color: #fffcee;
+      margin-bottom: 20px;
+    }
+  }
+}
+.beautiful-rivers {
+  .br-con {
+    li {
+      padding: 12px 20px;
+      background-color: #fbfbfb;
+      margin-bottom: 12px;
+      color: #333;
+      h4 {
+        font-weight: 600;
+        font-size: 18px;
+        color: #000;
+      }
+      .br-task-num {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 0;
+        >>> .el-progress-circle {
+          width: 60px !important;
+          height: 60px !important;
+        }
+        & > div {
+          display: flex;
+          align-items: center;
+          width: 30%;
+        }
+        .br-task-pro {
+          position: relative;
+          margin-right: 8px;
+          i {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 24px;
+          }
+        }
+        .br-task-compare {
+          i {
+            font-size: 42px;
+            color: #1bd68a;
+            margin-right: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+.ecological-creation {
+  .ec-con {
+    display: flex;
+    justify-content: space-between;
+    li {
+      width: 30%;
+      background-color: #f1f3f5;
+      padding: 12px;
+      text-align: center;
+      color: #333;
+      box-sizing: border-box;
+      i {
+        font-size: 44px;
+        color: #1492ff;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
--- a/jingning_vue/src/views/Epidemic.vue
+++ b/jingning_vue/src/views/Epidemic.vue
+<template>
+  <div class="epidemic">
+    <Breadcrumb :breadData="breadData"></Breadcrumb>
+    <div class="epidemic-tabs">
+      <ul class="et-con">
+        <li
+          v-for="(item, index) in epidemic_tabs_info"
+          :key="index"
+          @click="tabIdx(index)"
+          :class="{ active: epidemic_tabs_idx == index }"
+        >
+          {{ item.name }}
+        </li>
+        <li class="et-disabled">
+          <el-tooltip
+            class="item"
+            effect="effect"
+            content="建设中..."
+            popper-class="sy-tooltip"
+            placement="top"
+            :visible-arrow="false"
+          >
+            <p>疫情调度</p>
+          </el-tooltip>
+        </li>
+      </ul>
+    </div>
+    <div class="vaccination" v-show="epidemic_tabs_idx == 0">
+      <el-row :gutter="20">
+        <el-col :sm="12" :xs="24">
+          <div class="general-situation unify-item">
+            <h3 class="module-tit">总体情况</h3>
+            <div class="gs-top">
+              <div class="hr1"></div>
+              <p>新冠病毒疫苗接种任务进度</p>
+              <div class="hr2"></div>
+            </div>
+            <el-row :gutter="4">
+              <div class="gs-con">
+                <el-col :lg="9" :xs="12" :sm="12">
+                  <div class="e-pro" style="color: #333">
+                    <div id="circle_2" style="width: 100%; height: 220px"></div>
+                    <div class="e-pro-text">
+                      <p style="color: #5470c6; font-weight: 600">30.53%</p>
+                      <p style="margin-bottom: 8px">全程接种</p>
+                      <p style="color: #91cc75; font-weight: 600">79.2%</p>
+                      <p>第一剂次</p>
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :lg="5" :xs="12" :sm="12">
+                  <div class="gs-con-item">
+                    <p>全程接种至六月底</p>
+                    <div>
+                      <p>任务量</p>
+                      <span>12万例</span>
+                    </div>
+                    <div>
+                      <p>已完成量</p>
+                      <span>12万例</span>
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :lg="5" :xs="12" :sm="12">
+                  <div class="gs-con-item">
+                    <p>第一剂次接种至六月底</p>
+                    <div>
+                      <p>任务量</p>
+                      <span>12万例</span>
+                    </div>
+                    <div>
+                      <p>已完成量</p>
+                      <span>12万例</span>
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :lg="5" :xs="12" :sm="12">
+                  <div class="gs-con-item">
+                    <p>累计疫苗接种量</p>
+                    <span>12万例</span>
+                  </div>
+                </el-col>
+              </div>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col :sm="12" :xs="24">
+          <div class="vaccination-progress unify-item">
+            <h3 class="module-tit">疫苗接种进展</h3>
+            <p class="ep-name">新冠病毒疫苗全程接种任务进度</p>
+            <div class="vp-con">
+              <div id="circle_1" style="width: 40%; height: 182px"></div>
+              <div class="vp-text">
+                <p class="prompt-text">
+                  计划<span>2020-5-31</span>目标完成疫苗接种<span>96150</span>人
+                </p>
+                <p class="prompt-text">
+                  每日建议接种<span>5706</span>,当前进度情况<span>正常</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :sm="12" :xs="24">
+          <div class="daily-news unify-item">
+            <h3 class="module-tit">每日动态</h3>
+            <p class="ep-name">日接种量和库存趋势图</p>
+            <div class="dn-con">
+              <div id="line_1" style="width: 60%; height: 242px"></div>
+              <div class="dn-text">
+                <p class="prompt-text">接种总台数：<span>0</span></p>
+                <p class="prompt-text">当前活约束数：<span>0</span></p>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :sm="12" :xs="24">
+          <div class="key-groups unify-item">
+            <h3 class="module-tit">重点人群接种率</h3>
+            <el-row :gutter="10">
+              <div class="kg-con">
+                <el-col :sm="6" :xs="12">
+                  <el-progress
+                    type="circle"
+                    :percentage="86.9"
+                    :stroke-width="12"
+                    :color="'#6A93F5'"
+                  >
+                  </el-progress>
+                  <p>机关事业单位人员（医疗机构除外）</p>
+                </el-col>
+                <el-col :sm="6" :xs="12">
+                  <el-progress
+                    type="circle"
+                    :percentage="88.1"
+                    :stroke-width="12"
+                    :color="'#7FD6AD'"
+                  >
+                  </el-progress>
+                  <p>医疗机构人员</p>
+                </el-col>
+                <el-col :sm="6" :xs="12">
+                  <el-progress
+                    type="circle"
+                    :percentage="78.1"
+                    :stroke-width="12"
+                    :color="'#647594'"
+                  >
+                  </el-progress>
+                  <p>高等院校学生</p>
+                </el-col>
+                <el-col :sm="6" :xs="12">
+                  <el-progress
+                    type="circle"
+                    :percentage="83.8"
+                    :stroke-width="12"
+                    :color="'#EDBF4C'"
+                  >
+                  </el-progress>
+                  <p>三类重点人群</p>
+                </el-col>
+              </div>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :sm="12" :xs="24">
+          <div class="daily-news unify-item">
+            <h3 class="module-tit">各区县工作进度</h3>
+            <p class="ep-name">各区县新冠病毒疫苗供应及接种情况</p>
+            <div id="bar_1" style="width: 85%; height: 300px"></div>
+          </div>
+        </el-col>
+        <el-col :sm="12" :xs="24">
+          <div class="key-groups unify-item">
+            <h3 class="module-tit">各地库存量</h3>
+            <p class="ep-name">各地疫苗库存量（昨日）</p>
+            <div id="bar_2" style="width: 85%; height: 300px"></div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="vaccine-traceability" v-show="epidemic_tabs_idx == 1">
+      <div class="vt-con unify-item">
+        <h3 class="module-tit">疫苗追溯</h3>
+        <el-row>
+          <div class="vt-top">
+            <el-col :sm="8" :xs="24">
+              <div class="vt-ipt">
+                <p>证件号码</p>
+                <input type="text" v-model="vt.vt_code1" />
+              </div>
+            </el-col>
+            <el-col :sm="8" :xs="16">
+              <div class="vt-ipt">
+                <p>电子监管码</p>
+                <input type="text" v-model="vt.vt_code2" />
+              </div>
+            </el-col>
+            <el-col :sm="4" :xs="8">
+              <button>
+                <i class="el-icon-search"></i>
+                查询
+              </button>
+            </el-col>
+          </div>
+        </el-row>
+        <div class="vt-info-table">
+          <el-table
+            :data="vt.vt_info_table"
+            style="width: 100%; color: #333; font-size: 16px"
+          >
+            <el-table-column
+              prop="name"
+              label="姓名"
+              width="110"
+              align="center"
+              fixed
+            >
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="接种日期"
+              width="110"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="unit"
+              width="110"
+              label="接种单位"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="doctor"
+              width="110"
+              label="接种医生"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="vaccine_name"
+              width="110"
+              label="疫苗名称"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="position"
+              width="110"
+              label="接种部位"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="Dosage"
+              width="110"
+              label="接种剂次"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="enterprise"
+              width="110"
+              label="生成企业"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="code"
+              width="130"
+              label="疫苗监管码"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="batch_number"
+              width="130"
+              label="疫苗批号"
+              align="center"
+            >
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="vaccinator-info">
+          <h4>
+            <i class="el-icon-caret-right" style="color: #1492ff"></i>接种人信息
+          </h4>
+          <el-row>
+            <div class="vaccinator-info-con">
+              <el-col :sm="6" :xs="24">
+                <p>姓名：</p>
+                <p>证件号码：</p>
+              </el-col>
+              <el-col :sm="6" :xs="24">
+                <p>性别：</p>
+                <p>出生日期：</p>
+              </el-col>
+              <el-col :sm="6" :xs="24">
+                <p>人群分类：</p>
+                <p>电话号码：</p>
+              </el-col>
+              <el-col :sm="6" :xs="24">
+                <p>住址：</p>
+              </el-col>
+            </div>
+          </el-row>
+        </div>
+        <div class="vaccine-info">
+          <h4>
+            <i class="el-icon-caret-right" style="color: #1492ff"></i>疫苗信息
+          </h4>
+        </div>
+      </div>
+    </div>
+    <div class="cold-chain-tracing" v-show="epidemic_tabs_idx == 2">
+      <div class="cct-con unify-item">
+        <h3 class="module-tit">冷链追溯</h3>
+        <el-row>
+          <el-col :span="24">
+            <div class="monitoring">
+              <h4>
+                <i class="el-icon-caret-right" style="color: #1492ff"></i
+                >冷链检测情况
+              </h4>
+              <el-row :gutter="10">
+                <el-col :sm="10" :xs="24">
+                  <div class="monitoring-first">
+                    <div class="mf-text">
+                      <p>累计检测总量</p>
+                      <span>0</span>
+                    </div>
+                    <div class="mf-text">
+                      <p>阳性数量</p>
+                      <span>0</span>
+                    </div>
+                    <div class="mf-table">
+                      <el-table
+                        :data="cct.mf_info_table"
+                        style="width: 100%; color: #333; font-size: 16px"
+                      >
+                        <el-table-column
+                          prop="category"
+                          label="检测类别"
+                          width="156"
+                          align="center"
+                          fixed
+                        >
+                        </el-table-column>
+                        <el-table-column
+                          prop="sampling_num"
+                          label="采样"
+                          width="156"
+                          align="center"
+                        >
+                        </el-table-column>
+                        <el-table-column
+                          prop="positive_num"
+                          width="156"
+                          label="阳性"
+                          align="center"
+                        >
+                        </el-table-column>
+                      </el-table>
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :sm="14" :xs="24">
+                  <div class="ms-table">
+                    <el-table
+                      :data="cct.ms_info_table"
+                      style="width: 100%; color: #333; font-size: 16px"
+                    >
+                      <el-table-column
+                        prop="category"
+                        label="检测类别"
+                        width="110"
+                        align="center"
+                        fixed
+                      >
+                      </el-table-column>
+                      <el-table-column
+                        prop="slaughter_num"
+                        label="屠宰"
+                        width="110"
+                        align="center"
+                      >
+                      </el-table-column>
+                      <el-table-column
+                        prop="produce_num"
+                        width="110"
+                        label="生产加工"
+                        align="center"
+                      >
+                      </el-table-column>
+                      <el-table-column
+                        prop="bestowal_num"
+                        width="110"
+                        label="贮存运输"
+                        align="center"
+                      >
+                      </el-table-column>
+                      <el-table-column
+                        prop="manage_num"
+                        width="110"
+                        label="经营销售"
+                        align="center"
+                      >
+                      </el-table-column>
+                      <el-table-column
+                        prop="positive_num"
+                        width="110"
+                        label="阳性"
+                        align="center"
+                      >
+                      </el-table-column>
+                    </el-table>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+        </el-row>
+        <div class="result">
+          <h4>
+            <i class="el-icon-caret-right" style="color: #1492ff"></i>检测结果
+          </h4>
+          <div class="result-table">
+            <el-table
+              :data="cct.result_table"
+              style="width: 100%; color: #333; font-size: 16px"
+            >
+              <el-table-column
+                prop="date"
+                label="采样日期"
+                width="192"
+                align="center"
+                fixed
+              >
+              </el-table-column>
+              <el-table-column
+                prop="informant"
+                label="填报人"
+                width="192"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="tel"
+                width="192"
+                label="联系电话"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="unit"
+                width="192"
+                label="报送单位"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="category"
+                width="192"
+                label="类别"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="code"
+                width="192"
+                label="冷链追溯码"
+                align="center"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="re-search">
+            <p>冷链码</p>
+            <input type="text" />
+            <button>
+              <i class="el-icon-search"></i>
+              检索
+            </button>
+          </div>
+          <el-row>
+            <el-col
+              :lg="8"
+              :xs="24"
+              v-for="(item, index) in cct.step_info"
+              :key="index"
+            >
+              <div class="re-step">
+                <p class="step-title">
+                  <i class="el-icon-truck"></i>
+                  <span>第{{ item.step }}站</span>
+                </p>
+                <div class="step-desc">
+                  <p>产品名称：{{ item.product_name }}</p>
+                  <p>上游企业名称：{{ item.upstream_name }}</p>
+                  <p>上游企业地址：{{ item.upstream_address }}</p>
+                  <p>下游企业名称：{{ item.downstream_name }}</p>
+                  <p>下游企业地址：{{ item.downstream_address }}</p>
+                  <p>类型：{{ item.type }}</p>
+                  <p>记录时间：{{ item.date }}</p>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from "../components/Breadcrumb.vue";
+export default {
+  name: "epidemic",
+  components: { Breadcrumb },
+  data() {
+    return {
+      breadData: {
+        page_name: "常态化疫情防控",
+        annual_target: "暂无数据",
+        leading: "县疫情防控办  县卫生健康局",
+      },
+      epidemic_tabs_info: [
+        {
+          name: "疫苗接种",
+        },
+        {
+          name: "疫情追溯",
+        },
+        {
+          name: "冷链追溯",
+        },
+      ],
+      epidemic_tabs_idx: 0,
+      vt: {
+        vt_code1: "",
+        vt_code2: "",
+        vt_info_table: [],
+      },
+      cct: {
+        mf_info_table: [
+          {
+            category: "食品",
+            sampling_num: "0",
+            positive_num: "0",
+          },
+          {
+            category: "外环境",
+            sampling_num: "0",
+            positive_num: "0",
+          },
+          {
+            category: "从业人员",
+            sampling_num: "0",
+            positive_num: "0",
+          },
+        ],
+        ms_info_table: [
+          {
+            category: "肉类",
+            slaughter_num: "0",
+            produce_num: "0",
+            bestowal_num: "0",
+            manage_num: "0",
+            positive_num: "0",
+          },
+          {
+            category: "水产",
+            slaughter_num: "0",
+            produce_num: "0",
+            bestowal_num: "0",
+            manage_num: "0",
+            positive_num: "0",
+          },
+          {
+            category: "其他",
+            slaughter_num: "0",
+            produce_num: "0",
+            bestowal_num: "0",
+            manage_num: "0",
+            positive_num: "0",
+          },
+          {
+            category: "食品外包装",
+            slaughter_num: "0",
+            produce_num: "0",
+            bestowal_num: "0",
+            manage_num: "0",
+            positive_num: "0",
+          },
+          {
+            category: "环境",
+            slaughter_num: "0",
+            produce_num: "0",
+            bestowal_num: "0",
+            manage_num: "0",
+            positive_num: "0",
+          },
+          {
+            category: "从业人员",
+            slaughter_num: "0",
+            produce_num: "0",
+            bestowal_num: "0",
+            manage_num: "0",
+            positive_num: "0",
+          },
+          {
+            category: "合计",
+            slaughter_num: "0",
+            produce_num: "0",
+            bestowal_num: "0",
+            manage_num: "0",
+            positive_num: "0",
+          },
+        ],
+        result_table: [
+          {
+            date: "2021-05-06",
+            informant: "张*",
+            tel: "xxx",
+            unit: "xxx",
+            category: "xxx",
+            code: "xxx",
+          },
+          {
+            date: "2021-05-06",
+            informant: "李*",
+            tel: "xxx",
+            unit: "xxx",
+            category: "xxx",
+            code: "xxx",
+          },
+          {
+            date: "2021-05-21",
+            informant: "王*",
+            tel: "xxx",
+            unit: "xxx",
+            category: "xxx",
+            code: "xxx",
+          },
+        ],
+        step_info: [
+          {
+            step: "1",
+            product_name: "147118505帝皇鲜",
+            upstream_name: "天普乐食食品（上海）有限公司",
+            upstream_address:
+              "浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
+            downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
+            downstream_address: "",
+            type: "无码入库",
+            date: "2021-04-12 21:16:26",
+          },
+          {
+            step: "2",
+            product_name: "147118505帝皇鲜",
+            upstream_name: "天普乐食食品（上海）有限公司",
+            upstream_address:
+              "浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
+            downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
+            downstream_address: "",
+            type: "无码入库",
+            date: "2021-04-12 21:16:26",
+          },
+          {
+            step: "3",
+            product_name: "147118505帝皇鲜",
+            upstream_name: "天普乐食食品（上海）有限公司",
+            upstream_address:
+              "浙江省杭州经济技术开发区白杨街道11号大街469号1幢南楼201室",
+            downstream_name: "杭州盒马网络科技有限公司下沙第一分公司",
+            downstream_address: "",
+            type: "无码入库",
+            date: "2021-04-12 21:16:26",
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.init_circle_1();
+    this.init_circle_2();
+    this.init_line_1();
+    this.init_bar_2();
+    this.init_bar_1();
+  },
+  methods: {
+    tabIdx(i) {
+      this.epidemic_tabs_idx = i;
+    },
+    init_circle_1() {
+      this.cChart_1 = this.$echarts.init(document.getElementById("circle_1"));
+      this.cChart_1.setOption({
+        title: {
+          text: ((27673 / 96150) * 100).toFixed(2) + "%",
+          subtext: "疫苗接种完成率",
+          x: "center",
+          y: "center",
+          textStyle: {
+            fontWeight: "600",
+            fontSize: 20,
+            color: "#000",
+          }, // 标题
+          subtextStyle: {
+            fontWeight: "normal",
+            fontSize: 16,
+            color: "#666",
+          }, // 副标题
+        },
+        color: ["#48A1FF", "#efefef"],
+        series: [
+          {
+            name: "访问来源",
+            type: "pie",
+            radius: ["70%", "85%"], // 半径
+            center: ["50%", "50%"], // 位置
+            label: {
+              show: false,
+            },
+            data: [
+              {
+                value: 27673,
+                name: "接种人数",
+              },
+              {
+                value: 96150 - 27673,
+                name: "未接种人数",
+              },
+            ],
+          },
+        ],
+      });
+    },
+    init_circle_2() {
+      this.cChart_2 = this.$echarts.init(document.getElementById("circle_2"));
+      this.cChart_2.setOption({
+        color: ["#5470C6", "#91CC75"],
+        series: [
+          {
+            type: "pie",
+            hoverAnimation: false,
+            radius: ["80%", "95%"],
+            //环的位置
+            label: {
+              normal: {
+                position: "inner",
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 30.53, //需要显示的数据
+                itemStyle: {
+                  normal: {
+                    color: "#5470C6",
+                  },
+                },
+              },
+              {
+                value: 100 - 30.53,
+                //不需要显示的数据，颜色设置成和背景一样
+                itemStyle: {
+                  normal: {
+                    color: "#E6EBF8",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: "pie",
+            hoverAnimation: false,
+            radius: ["65%", "80%"],
+            label: {
+              normal: {
+                position: "inner",
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 79.2,
+                itemStyle: {
+                  normal: {
+                    color: "#91CC75",
+                  },
+                },
+              },
+              {
+                value: 100 - 79.2,
+                itemStyle: {
+                  normal: {
+                    color: "#E6EBF8",
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      });
+    },
+    init_line_1() {
+      this.line_1 = this.$echarts.init(document.getElementById("line_1"));
+      this.line_1.setOption({
+        legend: {
+          orient: "horizontal",
+          x: "0%",
+          y: "0%",
+          data: ["接种量", "库存量"],
+          textStyle: {
+            fontSize: 16,
+          },
+        },
+        grid: {
+          top: "30%",
+          left: "3%",
+          right: "8%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#333",
+              fontSize: 14,
+            },
+          },
+          boundaryGap: false,
+          data: ["05.21", "05.22", "05.23", "05.24", "05.25", "05.26", "05.27"],
+        },
+        yAxis: {
+          type: "value",
+          show: true, // 是否显示
+          name: "单位(万剂)", // 轴名称
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#666",
+            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
+            fontSize: 14,
+          }
+        },
+        series: [
+          {
+            name: "接种量",
+            data: [0, 0, 0, 0, 0, 0, 0],
+            type: "line",
+          },
+          {
+            name: "库存量",
+            data: [0, 0, 0, 0, 0, 0, 0],
+            type: "line",
+          },
+        ],
+        color: ["#3DCBCD", "#7FD5AB"],
+      });
+    },
+    init_bar_1() {
+      this.bar_1 = this.$echarts.init(document.getElementById("bar_1"));
+      this.bar_1.setOption({
+        legend: {
+          orient: "horizontal",
+          x: "left",
+          y: "top",
+          data: ["供应数", "接种数"],
+        },
+        tooltip: {
+          show: true, // 是否显示提示框，默认为true
+          trigger: "item", // 数据项图形触发
+          axisPointer: {
+            // 指示样式
+            type: "shadow",
+            axis: "auto",
+          },
+          padding: 5,
+          textStyle: {
+            // 提示框内容的样式
+            color: "#666",
+          },
+        },
+        // ---- gird区域 ---
+        //  ------  X轴 ------
+        xAxis: {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#666",
+            },
+          },
+          axisLabel: {
+            rotate: 30,
+            interval: 0
+          },
+          show: true, // 是否显示
+          data: [
+            "莲都",
+            "龙泉",
+            "青田",
+            "云和",
+            "庆元",
+            "缙云",
+            "遂昌",
+            "松阳",
+            "景宁",
+            "开发区",
+          ],
+        },
+        //   ------   y轴  ----------
+        yAxis: {
+          show: true, // 是否显示
+          name: "单位(万剂)", // 轴名称
+          type: "value", // 轴类型，默认为 ‘category’
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#666",
+            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
+            fontSize: 14,
+          },
+        },
+        //  -------   内容数据 -------
+        series: [
+          {
+            name: "供应数", // 序列名称
+            type: "bar", // 类型
+            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
+            itemStyle: {
+              // 图形的形状
+              color: "#48A1FF",
+            },
+            barWidth: 12, // 柱形的宽度
+            barCategoryGap: "10%", // 柱形的间距
+            data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
+          },
+          {
+            name: "接种数", // 序列名称
+            type: "bar", // 类型
+            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
+            itemStyle: {
+              // 图形的形状
+              color: "#83D7AE",
+            },
+            barWidth: 12, // 柱形的宽度
+            barCategoryGap: "10%", // 柱形的间距
+            data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
+          },
+        ],
+      });
+    },
+    init_bar_2() {
+      this.bar_2 = this.$echarts.init(document.getElementById("bar_2"));
+      this.bar_2.setOption({
+        tooltip: {
+          show: true, // 是否显示提示框，默认为true
+          trigger: "item", // 数据项图形触发
+          axisPointer: {
+            // 指示样式
+            type: "shadow",
+            axis: "auto",
+          },
+          padding: 5,
+          textStyle: {
+            // 提示框内容的样式
+            color: "#666",
+          },
+        },
+        // ---- gird区域 ---
+        //  ------  X轴 ------
+        xAxis: {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#666",
+            },
+          },
+          axisLabel: {
+            rotate: 30,
+            interval: 0,
+          },
+          show: true, // 是否显示
+          data: [
+            "莲都",
+            "龙泉",
+            "青田",
+            "云和",
+            "庆元",
+            "缙云",
+            "遂昌",
+            "松阳",
+            "景宁",
+            "开发区",
+          ],
+        },
+        //   ------   y轴  ----------
+        yAxis: {
+          show: true, // 是否显示
+          name: "单位(万剂)", // 轴名称
+          type: "value", // 轴类型，默认为 ‘category’
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#666",
+            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
+            fontSize: 14,
+          },
+        },
+        //  -------   内容数据 -------
+        series: [
+          {
+            name: "库存量", // 序列名称
+            type: "bar", // 类型
+            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
+            itemStyle: {
+              // 图形的形状
+              color: "#48A1FF",
+            },
+            barWidth: 15, // 柱形的宽度
+            barCategoryGap: "10%", // 柱形的间距
+            data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang='scss' scoped>
+.module-tit{
+  font-size: 20px;
+  padding: 16px 0 12px 12px;
+  font-weight: 600;
+  position: relative;
+}
+.module-tit::before{
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: 16px;
+  width: 4px;
+  height: 28px;
+  background-color: #1492ff;
+}
+.unify-item{
+  box-sizing: border-box;
+  padding: 0 20px 12px;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+
+h3 {
+  border-bottom: 1px solid #ddd;
+}
+button {
+  padding: 0 12px;
+  height: 30px;
+  line-height: 30px;
+  background-color: #1492ff;
+  border-radius: 2px;
+  border: 0;
+  color: #fff;
+  font-size: 16px;
+}
+input {
+  height: 28px;
+  outline: none;
+  border: 0;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  margin-left: 5px;
+  font-size: 16px;
+  padding: 0 8px;
+}
+.ep-name {
+  font-size: 18px;
+  color: #1492ff;
+  margin: 8px 0;
+  text-align: center;
+}
+.e-pro {
+  position: relative;
+  .e-pro-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    white-space: nowrap;
+  }
+}
+.epidemic-tabs {
+  margin-bottom: 20px;
+  .et-con {
+    width: 66.667%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    li {
+      width: 20%;
+      color: #1492ff;
+      background-color: #fff;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-align: center;
+      height: 48px;
+      line-height: 48px;
+      font-size: 20px;
+      border-radius: 2px;
+      cursor: pointer;
+    }
+    .et-disabled {
+      color: #999;
+    }
+    .active {
+      color: #fff;
+      background-color: #02a7f0;
+    }
+  }
+}
+.general-situation {
+  .gs-top {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #1492ff;
+    margin: 8px 0;
+    p {
+      margin: 0 8px;
+      font-size: 18px;
+    }
+    .hr1 {
+      width: 59px;
+      height: 2px;
+      background: -webkit-gradient(
+        linear,
+        right top,
+        left top,
+        from(#4192f6),
+        to(#fff)
+      );
+      background: linear-gradient(270deg, #4192f6, #fff);
+    }
+    .hr2 {
+      width: 59px;
+      height: 2px;
+      background: -webkit-gradient(
+        linear,
+        left top,
+        right top,
+        from(#4192f6),
+        to(#fff)
+      );
+      background: linear-gradient(90deg, #4192f6, #fff);
+    }
+  }
+  .gs-con {
+    display: flex;
+    align-items: center;
+    margin: 20px 0;
+    flex-wrap: wrap;
+    .gs-con-item {
+      text-align: center;
+      background-color: #f6f7f8;
+      height: 210px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      font-size: 18px;
+      box-sizing: border-box;
+      padding: 0 4px;
+      div {
+        margin: 8px 0;
+      }
+      span {
+        color: #1492ff;
+      }
+    }
+  }
+}
+.vaccination-progress {
+  .vp-con {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .vp-text {
+      width: 50%;
+    }
+  }
+}
+.daily-news {
+  .dn-con {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .dn-text {
+      width: 30%;
+      font-size: 18px;
+    }
+  }
+}
+.key-groups {
+  .kg-con {
+    margin: 40px 0;
+    color: #333;
+    > div {
+      text-align: center;
+      p {
+        margin: 30px 0;
+        height: 56px;
+      }
+    }
+    >>> .el-progress-circle {
+      width: 100px !important;
+      height: 100px !important;
+    }
+  }
+}
+.vaccine-traceability {
+  h4 {
+    font-weight: normal;
+    font-size: 18px;
+  }
+  .vt-con {
+    .vt-top {
+      margin: 12px 0 0;
+    }
+    .vt-ipt {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      input {
+        width: 50%;
+      }
+    }
+    .vt-info-table {
+      >>> .el-table {
+        min-height: 300px;
+        border: 1px solid #ddd;
+      }
+      >>> .is-leaf {
+        background-color: #1492ff;
+        color: #fff;
+        border-right: 1px solid #fff;
+      }
+    }
+    .vaccinator-info {
+      margin: 12px 0;
+      border-bottom: 1px solid #ddd;
+      .vaccinator-info-con {
+        padding: 12px;
+        color: #333;
+        overflow: hidden;
+        p {
+          margin: 5px 0;
+        }
+      }
+    }
+  }
+}
+.cold-chain-tracing {
+  h4 {
+    font-weight: normal;
+    font-size: 18px;
+    padding: 12px 0;
+  }
+  >>> .el-table__header tr,
+  >>> .el-table__header th {
+    padding: 0;
+    height: 40px;
+  }
+  >>> .is-leaf {
+    background-color: #1492ff;
+    color: #fff;
+  }
+  .monitoring {
+    .monitoring-first {
+      .mf-text {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 20px 0 12px;
+        margin: 8px 0;
+      }
+    }
+  }
+}
+.result {
+  .re-search {
+    display: flex;
+    align-items: center;
+    margin: 12px 0 20px;
+    input {
+      margin: 0 8px;
+    }
+  }
+  .re-step {
+    .step-title {
+      color: #1492ff;
+      padding: 8px 0;
+      border-bottom: 1px dashed #1492ff;
+      i {
+        font-size: 18px;
+      }
+      span {
+        padding: 0 5px;
+        border: 1px solid #1492ff;
+        line-height: 18px;
+        border-radius: 10px;
+      }
+    }
+    .step-desc {
+      margin: 20px 0;
+      color: #333;
+      padding: 0 12px;
+      p {
+        margin: 8px 0;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
--- a/jingning_vue/src/views/Industry.vue
+++ b/jingning_vue/src/views/Industry.vue
+<!--  -->
+<template>
+  <div class="index">
+    <div class="main">
+      <div class="minHeader shadow">
+        <div class="card__header flex between acenter">
+          <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item :to="{ path: '/' }"
+              >产业发展</el-breadcrumb-item
+            >
+          </el-breadcrumb>
+          <div class="flex acenter">
+            <i class="el-icon-office-building mr12"></i>
+            <p class="c3">牵头单位: {{myCityName}}发展和改革局</p>
+          </div>
+        </div>
+        <div class="flex acenter pl20 pr20 pb12">
+          <img src="../assets/images/target.png" class="icon28" />
+          <div class="flex acenter">
+            <div class="flex acenter eltxtx">
+              <span class="c3 c149 fs18">年度目标</span>
+              <div class="cline"></div>
+            </div>
+            <div class="c3">暂无数据</div>
+          </div>
+        </div>
+      </div>
+      <div class="tabtits">
+        <el-row :gutter="10">
+          <el-col :xs="12" :sm="8" :md="8" :lg="6">
+            <el-tooltip
+              class="item"
+              effect="white"
+              content="建设中..."
+              placement="top"
+            >
+              <div
+                class="grid-content bg-purple textCenter c9 bg1"
+                aria-describedby="el-tooltip-7580"
+              >
+                数字经济
+              </div>
+            </el-tooltip>
+          </el-col>
+          <el-col :xs="12" :sm="8" :md="8" :lg="6">
+            <el-tooltip
+              class="item"
+              effect="white"
+              content="建设中..."
+              placement="top"
+            >
+              <div
+                class="grid-content bg-purple textCenter c9 bg1"
+                aria-describedby="el-tooltip-7581"
+              >
+                新进制造业
+              </div>
+            </el-tooltip>
+          </el-col>
+          <el-col :xs="12" :sm="8" :md="8" :lg="6">
+            <el-tooltip
+              class="item"
+              effect="white"
+              content="建设中..."
+              placement="top"
+            >
+              <div
+                class="grid-content bg-purple textCenter c9 bg1"
+                aria-describedby="el-tooltip-7582"
+              >
+                现代服务业
+              </div>
+            </el-tooltip>
+          </el-col>
+          <el-col :xs="12" :sm="8" :md="8" :lg="6">
+            <el-tooltip
+              class="item"
+              effect="white"
+              content="建设中..."
+              placement="top"
+            >
+              <div
+                class="grid-content bg-purple textCenter c9 bg1"
+                aria-describedby="el-tooltip-7583"
+              >
+                标志性产业链
+              </div>
+            </el-tooltip>
+          </el-col>
+          <el-col :xs="12" :sm="8" :md="8" :lg="6">
+            <el-tooltip
+              class="item"
+              effect="white"
+              content="建设中..."
+              placement="top"
+            >
+              <div
+                class="grid-content bg-purple textCenter c9 bg1"
+                aria-describedby="el-tooltip-7584"
+              >
+                产品融合
+              </div>
+            </el-tooltip>
+          </el-col>
+          <el-col :xs="12" :sm="8" :md="8" :lg="6">
+            <el-tooltip
+              class="item"
+              effect="white"
+              content="建设中..."
+              placement="top"
+            >
+              <div
+                class="grid-content bg-purple textCenter c9 bg1"
+                aria-describedby="el-tooltip-7585"
+              >
+                产业平台
+              </div>
+            </el-tooltip>
+          </el-col>
+          <el-col :xs="12" :sm="8" :md="8" :lg="6">
+            <el-tooltip
+              class="item"
+              effect="white"
+              content="建设中..."
+              placement="top"
+            >
+              <div
+                class="grid-content bg-purple textCenter c9 bg1"
+                aria-describedby="el-tooltip-7586"
+              >
+                龙头企业
+              </div>
+            </el-tooltip>
+          </el-col>
+          <el-col :xs="12" :sm="8" :md="8" :lg="6">
+            <el-tooltip
+              class="item"
+              effect="white"
+              content="建设中..."
+              placement="top"
+            >
+              <div
+                class="grid-content bg-purple textCenter c9 bg1"
+                aria-describedby="el-tooltip-7587"
+              >
+                更多
+              </div>
+            </el-tooltip>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="mt20">
+        <el-row>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12">
+            <div class="minTop shadow">
+              <div class="card__header">
+                <p class="tieaft">规上工业增加值变动趋势</p>
+              </div>
+              <div class="zhan mt12">
+                <div id="main1" style="max-width: 100%; height: 280px"></div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12">
+            <div class="minTop shadow">
+              <div class="card__header">
+                <p class="tieaft">本县规上工业增加值(2021年1-4月)</p>
+              </div>
+              <div class="zhan mt12">
+                <div id="main2" style="max-width: 100%; height: 280px"></div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="mt20">
+        <el-row>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12">
+            <div class="minTop shadow">
+              <div class="card__header">
+                <p class="tieaft">区县规上工业增加值(2021年1-4月)</p>
+              </div>
+              <div class="zhan mt12">
+                <div id="main3" style="max-width: 100%; height: 280px"></div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12">
+            <div class="minTop shadow">
+              <div class="card__header">
+                <p class="tieaft">区县规上工业利润(2021年1-4月)</p>
+              </div>
+              <div class="zhan mt12">
+                <div id="main4" style="max-width: 100%; height: 280px"></div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      myCityName:'景宁畲族自治县'
+    };
+  },
+  mounted() {
+    this.initCharts1();
+    this.initCharts2();
+    this.initCharts3();
+    this.initCharts4();
+  },
+  //方法集合
+  methods: {
+    initCharts1() {
+      var chartDom = document.getElementById("main1");
+      var myChart1 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: ["#1492FF", "#65DCAA"],
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["云和", "丽水"],
+          left: 0,
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "2020年1-4月",
+            "2020年1-5月",
+            "2020年1-6月",
+            "2020年1-7月",
+            "2020年1-8月",
+            "2021年1-9月",
+            "2021年1-10月",
+            "2021年1-11月",
+            "2021年1-12月",
+            "2021年1-2月",
+            "2021年1-3月",
+            "2021年1-4月",
+          ],
+          axisLabel: {
+            textStyle: {
+              color: "#333", //坐标值得具体的颜色
+              fontSize: 12,
+            },
+            width: 50,
+            overflow: "break",
+            interval: 1,
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: -10,
+          max: 70,
+          splitNumber: 8,
+          name: "%",
+          nameLocation: "end",
+        },
+        series: [
+          {
+            name: "云和",
+            type: "line",
+            data: [
+              -4.78, -1.3, 0.3, 0.52, 1.83, 3, 3.91, 4.8, 5.39, 49.4, 34.1,
+              27.5,
+            ],
+          },
+          {
+            name: "丽水",
+            type: "line",
+            data: [
+              -7.84, -3.5, -2.16, -1.95, -0.36, 1.2, 2.3, 3.42, 4.45, 63.35,
+              40.9, 33.3,
+            ],
+          },
+        ],
+      };
+
+      option && myChart1.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart1.resize();
+      });
+    },
+    initCharts2() {
+      var chartDom = document.getElementById("main2");
+      var myChart2 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月"],
+          axisLabel: {
+            rotate: 30,
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 60,
+          splitNumber: 6,
+          name: "%",
+          nameLocation: "end",
+        },
+        grid: {
+          top:'10%',
+          left: "3%",
+          right: "4%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        series: [
+          {
+            data: [27.9, 26.4, 54.5, 37.9],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              // 图形的形状
+              normal: {
+                color: function (params) {
+                  if (params.value > 36.67) {
+                    return "#00E0A6";
+                  } else {
+                    return "#FC5C5C";
+                  }
+                },
+              },
+            },
+            markLine: {
+              itemStyle: {
+                normal: {
+                  color: "#FA8565",
+                },
+              },
+              data: [
+                {
+                  silent: true,
+                  type: "average",
+                  name: "平均值",
+                  label: {
+                    formatter: "平均值 36.67",
+                    position: "middle",
+                    textStyle: {
+                      color: "#Fa8565",
+                      fontSize: 16,
+                    },
+                  },
+                },
+              ],
+            },
+          }
+        ],
+      };
+
+      option && myChart2.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart2.resize();
+      });
+    },
+    initCharts3() {
+      var chartDom = document.getElementById("main3");
+      var myChart3 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        xAxis: {
+          type: "category",
+          data: ["莲都区", "青田县", "缙云县", "遂昌县", "松阳县", "云和县", "庆元县", "景宁县", "龙泉市"],
+          axisLabel: {
+            rotate: 30,
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 60,
+          splitNumber: 6,
+          name: "%",
+          nameLocation: "end",
+        },
+        grid: {
+          top:'10%',
+          left: "3%",
+          right: "4%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        series: [
+          {
+            data: [27.9, 26.4, 54.5, 37.9, 15.5, 50.4, 27, 25.5, 23.6],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              // 图形的形状
+              normal: {
+                color: function (params) {
+                  if (params.value > 32.08) {
+                    return "#00E0A6";
+                  } else {
+                    return "#FC5C5C";
+                  }
+                },
+              },
+            },
+            markLine: {
+              itemStyle: {
+                normal: {
+                  color: "#FA8565",
+                },
+              },
+              data: [
+                {
+                  silent: true,
+                  type: "average",
+                  name: "平均值",
+                  label: {
+                    formatter: "平均值 32.08",
+                    position: "middle",
+                    textStyle: {
+                      color: "#Fa8565",
+                      fontSize: 16,
+                    },
+                  },
+                },
+              ],
+            },
+          }
+        ],
+      };
+
+      option && myChart3.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart3.resize();
+      });
+    },
+    initCharts4() {
+      var chartDom = document.getElementById("main4");
+      var myChart4 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        xAxis: {
+          type: "category",
+          data: ["莲都区", "青田县", "缙云县", "遂昌县", "松阳县", "云和县", "庆元县", "景宁县", "龙泉市"],
+          axisLabel: {
+            rotate: 30,
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 210,
+          splitNumber: 7,
+          name: "%",
+          nameLocation: "end",
+        },
+        grid: {
+          top:'10%',
+          left: "3%",
+          right: "4%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        series: [
+          {
+            data: [69.5, 180.7, 56.7, 125.1, 78.4, 41.2, 37.9, 138.1, 199.1],
+            type: "bar",
+            barWidth: 20,
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              // 图形的形状
+              normal: {
+                color: function (params) {
+                  if (params.value > 102.97) {
+                    return "#00E0A6";
+                  } else {
+                    return "#FC5C5C";
+                  }
+                },
+              },
+            },
+            markLine: {
+              itemStyle: {
+                normal: {
+                  color: "#FA8565",
+                },
+              },
+              data: [
+                {
+                  silent: true,
+                  type: "average",
+                  name: "平均值",
+                  label: {
+                    formatter: "平均值 102.97",
+                    position: "middle",
+                    textStyle: {
+                      color: "#Fa8565",
+                      fontSize: 16,
+                    },
+                  },
+                },
+              ],
+            },
+          }
+        ],
+      };
+
+      option && myChart4.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart4.resize();
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+#app {
+  background: #efefef !important;
+}
+@media screen and(min-width:1200px) {
+  #app {
+    width: 1200px;
+    background: #efefef !important;
+  }
+  .main {
+    width: 1200px !important;
+  }
+}
+.main {
+  width: 100%;
+  margin: 0px auto;
+  padding: 20px 0;
+}
+.index {
+  background: #efefef;
+}
+.minHeader,
+.tabtits {
+  width: calc(100% - 40px);
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+.minHeader {
+  background: #fff;
+  margin: 0px auto 0;
+}
+.tabtits {
+  background-color: #eff2f5;
+  padding: 10px 20px 20px;
+  margin: 20px auto 0;
+}
+.minTop {
+  width: calc(100% - 20px);
+  box-sizing: border-box;
+  border-radius: 4px;
+  margin: 0px auto 0;
+  background: #fff;
+}
+
+.card__header {
+  padding: 10px 20px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: 16px;
+}
+.el-icon-s-marketing {
+  color: rgb(54, 153, 247);
+  font-size: 18px;
+}
+
+.cline {
+  width: 2px;
+  height: 18px;
+  background: #1492ff;
+  margin: 0 8px;
+}
+.icon28 {
+  width: 28px;
+  height: 28px;
+}
+.c149 {
+  color: #1492ff;
+}
+.bg1 {
+  background-color: #f9fbfd;
+  padding: 5px 10px;
+  margin-top: 12px;
+}
+.tieaft {
+  font-size: 20px;
+  padding: 5px 0 12px 12px;
+  font-weight: 600;
+  position: relative;
+}
+.tieaft::before {
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: 5px;
+  width: 4px;
+  height: 28px;
+  background-color: #1492ff;
+}
+.zhan {
+  height: 280px;
+  padding: 0 20px 20px 20px;
+}
+.mt12 {
+    margin-top: 12px;
+}
+.mt20 {
+    margin-top: 20px;
+}
+</style>
+<style>
+.el-breadcrumb__inner.is-link {
+  font-weight: 400 !important;
+  color: #333333 !important;
+}
+.el-breadcrumb__inner {
+  font-size: 16px !important;
+}
+.el-tooltip__popper {
+  color: #333 !important;
+  background: #fff !important;
+  font-size: 16px !important;
+  padding: 8px 10px !important;
+}
+.el-tooltip__popper[x-placement^="top"] .popper__arrow {
+  border-top-color: #fff !important;
+}
+.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
+  border-top-color: #fff !important;
+}
+</style>
\ No newline at end of file
--- a/jingning_vue/src/views/Jfjb.vue
+++ b/jingning_vue/src/views/Jfjb.vue
+<!--  -->
+<template>
+  <div class="main">
+    <div class="jfjb">
+      <el-row :gutter="20">
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
+          <div class="bgf bradius4 p20">
+            <div class="flex acenter between">
+              <div class="fs22 b c3">本年减负降本概览</div>
+              <div class="flex acenter">
+                <div class="c149">查看详情</div>
+                <i class="el-icon-arrow-right c149"></i>
+              </div>
+            </div>
+            <div class="mt30 mb15">
+              <el-row class="flex acenter jcenter">
+                <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="12">
+                  <div>
+                    <div
+                      v-for="(item, index) in allList"
+                      :key="index"
+                      class="mt20"
+                    >
+                      <div>
+                        <span class="b">·</span>
+                        <span>{{ item.title }}</span>
+                      </div>
+                      <div class="flex acenter mt8">
+                        <span class="c149 fs22 ml12 mr5">{{ item.num }}</span>
+                        <span>{{ item.dan }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </el-col>
+                <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="12">
+                  <div class="proges">
+                    <el-progress
+                      type="circle"
+                      :percentage="57.9"
+                      :stroke-width="Number(12)"
+                      :width="Number(150)"
+                      color="#1492ff"
+                      :show-text="false"
+                    ></el-progress>
+                    <div class="flex acenter column protit">
+                      <div class="c149">
+                          <span class="fs22 b">57.9</span>
+                          <span class="b">%</span>
+                      </div>
+                      <div class="fs12 c3">任务完成进度</div>
+                    </div>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
+          <div class="bgf bradius4 p20">
+            <div class="flex acenter between">
+              <div class="fs22 b c3">本年减负降本趋势</div>
+              <div class="flex acenter">
+                <div class="c6">单位: 亿元</div>
+              </div>
+            </div>
+            <div>
+              <div class="mt12">
+                <div id="main1" style="max-width: 100%; height: 345px"></div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
+          <div class="bgf bradius4 p20">
+            <div class="flex acenter between">
+              <div class="fs22 b c3">本年减负降本额构成</div>
+              <div class="flex acenter">
+                <div class="c6">单位: 亿元</div>
+              </div>
+            </div>
+            <div>
+              <div class="mt12">
+                <div id="main2" style="max-width: 100%; height: 345px"></div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
+          <div class="bgf bradius4 p20">
+            <div class="flex acenter between">
+              <div class="fs22 b c3">地市减负降本情况</div>
+              <div class="flex acenter">
+                <div class="c6">单位: 亿元</div>
+              </div>
+            </div>
+            <div>
+              <div class="mt12">
+                <div id="main3" style="max-width: 100%; height: 345px"></div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
+          <div class="bgf bradius4 p20">
+            <div class="flex acenter between">
+              <div class="fs22 b c3">行业减负降本TOP10</div>
+              <div class="flex acenter">
+                <div class="c6">单位: 亿元</div>
+              </div>
+            </div>
+            <div>
+              <div class="mt12">
+                <div id="main4" style="max-width: 100%; height: 345px"></div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
+          <div class="bgf bradius4 p20">
+            <div class="flex acenter between">
+              <div class="fs22 b c3">部门减负降本情况</div>
+              <div class="flex acenter">
+                <div class="c6">单位: 亿元</div>
+              </div>
+            </div>
+            <div>
+              <div class="mt12">
+                <div id="main5" style="max-width: 100%; height: 345px"></div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      allList: [
+        {
+          title: "全年减负降本目标",
+          num: 2.71,
+          dan: "亿元",
+        },
+        {
+          title: "减负降本政策",
+          num: 24,
+          dan: "条",
+        },
+        {
+          title: "本年累计减负降本额",
+          num: 1.57,
+          dan: "亿元",
+        },
+        {
+          title: "惠及企业数量",
+          num: 42003,
+          dan: "家次",
+        },
+      ],
+    };
+  },
+
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.initCharts1();
+    this.initCharts2();
+    this.initCharts3();
+    this.initCharts4();
+    this.initCharts5();
+  },
+  //方法集合
+  methods: {
+    initCharts1() {
+      var chartDom = document.getElementById("main1");
+      var myChart1 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: ["#5B8FF9", "#FE9D41"],
+        legend: {
+          data: ["累计减负降本额", "当月减负降本额"],
+        },
+        xAxis: {
+          type: "category",
+          data: [
+            "2021-01",
+            "2021-02",
+            "2021-03",
+            "2021-04",
+            "2021-05",
+            "2021-06",
+          ],
+          axisLabel: {
+            textStyle: {
+              color: "#333",
+              fontSize: 14,
+            },
+            rotate: -30,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 1.8,
+          splitNumber: 6,
+          axisTick: {
+            show: true,
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "3%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "累计减负降本额",
+            data: [0.33, 0.42, 0.9, 1.07, 1.39, 1.57],
+            type: "bar",
+            label: {
+              // 在图形上显示每个数据
+              show: true,
+              position: "top",
+            },
+          },
+          {
+            name: "当月减负降本额",
+            data: [0.33, 0.1, 0.45, 0.15, 0.3, 0.2],
+            type: "line",
+            smooth: true,
+            showSymbol: false,
+          },
+        ],
+      };
+
+      option && myChart1.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart1.resize();
+      });
+    },
+    initCharts2() {
+      var chartDom = document.getElementById("main2");
+      var myChart2 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: [
+          "#5B8FF9",
+          "#5AD8A6",
+          "#5D7092",
+          "#F6BD16",
+          "#E8684A",
+          "#6DC8EC",
+          "#9270CA",
+        ],
+        tooltip: {
+          trigger: "item",
+        },
+        grid: {
+          top: "-10%",
+          left: "3%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "0",
+          icon: "circle",
+        },
+        series: [
+          {
+            name: "访问来源",
+            type: "pie",
+            radius: "60%",
+            data: [
+              { value: 0.65, name: "减免税收" },
+              { value: 0.3, name: "减免政府性基金" },
+              { value: 0.08, name: "降用工成本" },
+              { value: 0.3, name: "降用能成本" },
+              { value: 0.0, name: "降物流成本" },
+              { value: 0.24, name: "降融资成本" },
+              { value: 0.0, name: "降其他成本" },
+            ],
+            label: {
+              normal: {
+                show: true,
+                position: "inner", //显示在扇形上
+                formatter: "{c}", //显示内容
+                textStyle: {
+                  color: "white", // 改变标示文字的颜色
+                  fontSize: 14, //文字大小
+                },
+              },
+            },
+          },
+        ],
+      };
+
+      option && myChart2.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart2.resize();
+      });
+    },
+    initCharts3() {
+      var chartDom = document.getElementById("main3");
+      var myChart3 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: ["#5B8FF9", "#FE9D41"],
+        xAxis: {
+          type: "category",
+          data: ["青田县"],
+          axisLabel: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12,
+            },
+            rotate: -30,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 1.8,
+          splitNumber: 6,
+        },
+        grid: {
+          top: "15%",
+          left: "3%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "累计减负降本额",
+            data: [1.57],
+            type: "bar",
+            label: {
+              // 在图形上显示每个数据
+              show: true,
+              position: "top",
+              color: "#666",
+              fontSize: 16,
+            },
+          },
+        ],
+      };
+
+      option && myChart3.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart3.resize();
+      });
+    },
+    initCharts4() {
+      var chartDom = document.getElementById("main4");
+      var myChart4 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: ["#73A0FA"],
+        xAxis: {
+          max: 0.6,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+            },
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: [
+            "制造业",
+            "房地产业",
+            "批发和零售业",
+            "建筑业",
+            "教育",
+            "金融业",
+            "电力,热力.燃气...",
+            "租赁和商务服务业",
+            "科学研究和技术服务...",
+            "采矿业",
+          ],
+          inverse: true,
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#333",
+          },
+        },
+        grid: {
+          top: "10%",
+          left: "0%",
+          right: "6%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "X",
+            type: "bar",
+            data: [0.58, 0.26, 0.21, 0.08, 0.07, 0.07, 0.05, 0.03, 0.03, 0.02],
+            label: {
+              show: true,
+              position: "right",
+              fontSize: 14,
+              color: "#666",
+            },
+          },
+        ],
+      };
+
+      option && myChart4.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart4.resize();
+      });
+    },
+    initCharts5() {
+      var chartDom = document.getElementById("main5");
+      var myChart5 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: ["#6DC8EC"],
+        xAxis: {
+          type: "category",
+          data: [
+            "税务",
+            "发改",
+            "人行",
+            "财政",
+            "建设",
+            "人设",
+            "能源",
+            "通信管理",
+            "银监",
+            "市场监管",
+            "交通"
+          ],
+          axisLabel: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12,
+            },
+            rotate: -30,
+            interval: -1
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 0.7,
+          splitNumber: 7
+        },
+        grid: {
+          top: "15%",
+          left: "3%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "部门减负降本额",
+            data: [0.65, 0.25, 0.24, 0.18, 0.12, 0.08, 0.05, 0.00, 0.00, 0.00, 0.00],
+            type: "bar",
+            label: {
+              // 在图形上显示每个数据
+              show: true,
+              position: "top",
+              color: '#666'
+            },
+          }
+        ],
+      };
+
+      option && myChart5.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart5.resize();
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+html,
+body {
+  background-color: #f2f3f5;
+}
+@media screen and (max-width: 1400px) {
+  .main {
+    width: 100%;
+    margin: 0px auto;
+    // padding: 20px;
+  }
+  .jfjb {
+    width: calc(100% - 40px);
+      padding: 20px;
+  }
+}
+@media screen and (min-width: 1400px) {
+  .main {
+    width: 1400px;
+    margin: 0px auto;
+    padding: 20px;
+  }
+  .jfjb {
+    width: calc(100% - 40px);
+    //   padding: 20px;
+  }
+}
+.mr5 {
+  margin-right: 5px;
+}
+.mt8 {
+  margin-top: 8px;
+}
+.mb15 {
+  margin-bottom: 15px;
+}
+.proges {
+  position: relative;
+  width: 150px;
+  height: 150px;
+}
+.protit {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>
\ No newline at end of file
--- a/jingning_vue/src/views/Kjcx.vue
+++ b/jingning_vue/src/views/Kjcx.vue
+<template>
+  <div class="main flex between">
+    <div class="minLeft w60">
+      <p class="fs28 tit b">创新窗口</p>
+      <div class="w100 flex around mt20 mb12">
+        <div class="w48">
+          <div class="topRight">
+            <p class="mtl8 fs24 b">核心业务</p>
+            <div class="mt20 mb20">
+              <div class="flex between wrap">
+                <div
+                  class="bg w50 flex acenter jcenter"
+                  v-for="(item, index) in mainWork"
+                  :key="index"
+                >
+                  <img src="../assets/images/backgroud.png" class="poab" />
+                  <div class="flex acenter jcenter txt">
+                    <img :src="item.imgSrc" class="img1" />
+                    <p class="fs20">{{ item.title }}</p>
+                  </div>
+                </div>
+              </div>
+              <!-- <div class="flex between">
+                <div class="bg w48 flex acenter jcenter">
+                  <img src="../assets/images/backgroud.png" class="poab" />
+                  <div class="flex acenter jcenter txt">
+                    <img src="../assets/images/1.png" class="img1" />
+                    <p class="fs20">科技业务综合管理</p>
+                  </div>
+                </div>
+                <div class="bg w48 flex acenter jcenter">
+                  <img src="../assets/images/backgroud.png" class="poab" />
+                  <div class="flex acenter jcenter txt">
+                    <img src="../assets/images/2.png" class="img1" />
+                    <p class="fs20">科技企业培育</p>
+                  </div>
+                </div>
+              </div>
+              <div class="flex between">
+                <div class="bg w48 flex acenter jcenter">
+                  <img src="../assets/images/backgroud.png" class="poab" />
+                  <div class="flex acenter jcenter txt">
+                    <img src="../assets/images/3.png" class="img1" />
+                    <p class="fs20">科技新政主要目标任务</p>
+                  </div>
+                </div>
+                <div class="bg w48 flex acenter jcenter">
+                  <img src="../assets/images/backgroud.png" class="poab" />
+                  <div class="flex acenter jcenter txt">
+                    <img src="../assets/images/4.png" class="img1" />
+                    <p class="fs20">科技创新支撑经济发展</p>
+                  </div>
+                </div>
+              </div> -->
+            </div>
+          </div>
+        </div>
+        <div class="topLeft w48">
+          <p class="mtl8 fs24 b">科技企业</p>
+          <div class="mt30">
+            <div id="main5" style="max-width: 100%; height: 280px"></div>
+          </div>
+        </div>
+      </div>
+      <div class="mt20">
+        <div class="w100 flex around">
+          <div class="topLeft w48">
+            <p class="mtl8 fs24 b">核心技术</p>
+            <div class="mt30">
+              <div id="main1" style="max-width: 100%; height: 200px"></div>
+            </div>
+            <div class="mt50">
+              <div id="main2" style="max-width: 100%; height: 320px"></div>
+            </div>
+          </div>
+          <div class="w48">
+            <div class="topRight">
+              <p class="mtl8 fs24 b">创新平台建设</p>
+              <div class="mt20">
+                <div id="main3" style="max-width: 100%; height: 200px"></div>
+              </div>
+            </div>
+            <div class="topRight mt20">
+              <p class="mtl8 fs24 b">人才队伍建设</p>
+              <div class="mt20">
+                <div id="main4" style="max-width: 100%; height: 300px"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="w39 ml20">
+      <div class="minRight">
+        <div>
+          <div class="flex between tit pr20">
+            <p class="fs28 b">任务落实</p>
+            <p class="c149 fs18">详细></p>
+          </div>
+          <div>
+            <div class="flex around jcenter mt20">
+              <div class="flex column acenter">
+                <div class="circle_bot bge7 flex acenter jcenter mb12">
+                  <div class="circle_mid bg15b fs20 flex acenter jcenter cf">
+                    0
+                  </div>
+                </div>
+                <p class="fs20">正常任务</p>
+              </div>
+              <div class="flex column acenter">
+                <div class="circle_bot bgf29 flex acenter jcenter mb12">
+                  <div class="circle_mid bgff8 fs20 flex acenter jcenter cf">
+                    0
+                  </div>
+                </div>
+                <p class="fs20">预警任务</p>
+              </div>
+              <div class="flex column acenter">
+                <div class="circle_bot bgfb flex acenter jcenter mb12">
+                  <div class="circle_mid bgd4 fs20 flex acenter jcenter cf">
+                    0
+                  </div>
+                </div>
+                <p class="fs20">滞后任务</p>
+              </div>
+            </div>
+            <div class="p20">
+              <div class="w100 flex between mt20">
+                <div class="tiext">
+                  <p class="p20 fs20 c3 b">重点核心技术攻关</p>
+                  <div class="pl20 pr20">
+                    <div class="flex between">
+                      <p>共<span class="c149 b">0</span>项</p>
+                      <p>滞后<span class="cd4 b">0</span>项</p>
+                    </div>
+                    <div class="bgd4 h20 w100">
+                      <div class="bgs w100"></div>
+                    </div>
+                  </div>
+                </div>
+                <div class="tiext">
+                  <p class="p20 fs20 c3 b">战略科技力量培养</p>
+                  <div class="pl20 pr20">
+                    <div class="flex between">
+                      <p>共<span class="c149 b">0</span>项</p>
+                      <p>滞后<span class="cd4 b">0</span>项</p>
+                    </div>
+                    <div class="bgd4 h20">
+                      <div class="bgs w100"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="w100 flex between mt20">
+                <div class="tiext">
+                        <p class="p20 fs20 c3 b">科技企业倍增提质</p>
+                        <div class="pl20 pr20">
+                            <div class="flex between">
+                                <p>共<span class="c149 b">0</span>项</p>
+                                <p>滞后<span class="cd4 b">0</span>项</p>
+                            </div>
+                            <div class="bgd4 h20">
+                                <div class="bgs w100"></div>
+                            </div>
+                        </div>
+                    </div>
+                <div class="tiext">
+                  <p class="p20 fs20 c3 b">科技人才团队建设</p>
+                  <div class="pl20 pr20">
+                    <div class="flex between">
+                      <p>共<span class="c149 b">0</span>项</p>
+                      <p>滞后<span class="cd4 b">0</span>项</p>
+                    </div>
+                    <div class="bgd4 h20">
+                      <div class="bgs w100"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="minRight mt20 pb45">
+        <div class="flex between tit">
+          <p class="fs28 b">应用场景</p>
+        </div>
+        <div class="flex between p20">
+          <div class="w48">
+            <div class="flex acenter jcenter mb20">
+              <div class="lines"></div>
+              <p class="fs24 c3 b">产学研合作</p>
+              <div class="slines"></div>
+            </div>
+            <div class="txtLeft p20">
+              <div class="flex between lh70 fs18">
+                <p>合作大院名校</p>
+                <p>家</p>
+              </div>
+              <div class="flex between lh70 fs18">
+                <p>技术经纪人</p>
+                <p>名</p>
+              </div>
+              <div class="flex between lh70 fs18">
+                <p>服务企业</p>
+                <p>116次</p>
+              </div>
+              <div class="flex between lh70 fs18">
+                <p>解决技术难题</p>
+                <p>100个</p>
+              </div>
+              <div class="flex between lh70 fs18">
+                <p>实现成果转化</p>
+                <p>项</p>
+              </div>
+            </div>
+          </div>
+          <div class="w48 ml20">
+            <div class="flex acenter jcenter mb20">
+              <div class="lines"></div>
+              <p class="fs24 c3 b">科技特派员之家</p>
+              <div class="slines"></div>
+            </div>
+            <div class="txtLeft p20">
+              <div class="flex between lh70 fs18">
+                <p>省科技特派员</p>
+                <p>22名</p>
+              </div>
+              <div class="flex between lh70 fs18">
+                <p>工业特派员</p>
+                <p>4名</p>
+              </div>
+              <div class="flex between lh70 fs18">
+                <p>服务乡镇</p>
+                <p>21名</p>
+              </div>
+              <div class="flex between lh70 fs18">
+                <p>实施项目</p>
+                <p>26个</p>
+              </div>
+              <div class="flex between lh70 fs18">
+                <p>引进成果</p>
+                <p>项</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+let one, two, three, four, five;
+export default {
+  data() {
+    return {
+      mainWork: [
+        {
+          imgSrc: require("../assets/images/1.png"),
+          title: "科技业务综合管理",
+        },
+        {
+          imgSrc: require("../assets/images/2.png"),
+          title: "科技企业培育",
+        },
+        {
+          imgSrc: require("../assets/images/3.png"),
+          title: "科技新政主要目标任务",
+        },
+      ],
+    };
+  },
+  mounted() {
+    let _this = this;
+    this.init1();
+    this.init2();
+    this.init3();
+    this.init4();
+    this.init5();
+    window.onresize = () => {
+      return (() => {
+        _this.init1();
+        _this.init2();
+        _this.init3();
+        _this.init4();
+        _this.init5();
+      })();
+    };
+  },
+  methods: {
+    init1() {
+      if (one != null && one != "" && one != undefined) {
+        one.dispose(); //销毁
+      }
+      one = this.$echarts.init(document.getElementById("main1"));
+      one.setOption({
+        color: ["#6590F2", "#83D9AD", "#EEBE45", "#E290B3"],
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          right: "15%",
+          orient: "vertical",
+          top: "center",
+          icon: "circle",
+        },
+        series: [
+          {
+            name: "核心技术",
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 0,
+              borderColor: "#fff",
+              borderWidth: 2,
+            },
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: "14",
+                fontWeight: "bold",
+                color: ["#6590F2", "#83D9AD", "#EEBE45", "#E290B3"],
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 0, name: "前言新兴领域" },
+              { value: 0, name: "生命健康" },
+              { value: 0, name: "环境保护" },
+              { value: 0, name: "农业领域" },
+            ],
+            left: "-40%",
+          },
+        ],
+      });
+    },
+    init2() {
+      if (two != null && two != "" && two != undefined) {
+        two.dispose(); //销毁
+      }
+      two = this.$echarts.init(document.getElementById("main2"));
+      two.setOption({
+        color: ["#3CCBCD", "#B7A3DD", "#62B4EF", "#FFB980"],
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["制造技术提升", "前沿新兴领域", "生命健康", "环境保护"],
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["2016", "2017", "2018", "2019", "2020"],
+          axisLine: {
+            lineStyle: {
+              color: "#008ACD",
+            },
+            show: true,
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 25,
+          splitNumber: 5,
+          axisLine: {
+            lineStyle: {
+              color: "#008ACD",
+            },
+            show: true,
+          },
+          axisTick: {
+            show: true,
+          },
+          splitArea: {
+            show: true,
+          },
+        },
+        series: [
+          {
+            name: "制造技术提升",
+            type: "line",
+            data: [0, 0, 0, 0],
+            smooth: true,
+          },
+          {
+            name: "前沿新兴领域",
+            type: "line",
+            data: [0, 0, 0, 0, 0],
+            smooth: true,
+          },
+          {
+            name: "生命健康",
+            type: "line",
+            data: [0, 0, 0, 0, 0],
+            smooth: true,
+          },
+          {
+            name: "环境保护",
+            type: "line",
+            data: [0, 0, 0, 0, 0],
+            smooth: true,
+          },
+        ],
+      });
+    },
+    init3() {
+      if (three != null && three != "" && three != undefined) {
+        three.dispose(); //销毁
+      }
+      three = this.$echarts.init(document.getElementById("main3"));
+      three.setOption({
+        color: [
+          "#6590F2",
+          "#83D9AD",
+          "#EEBE45",
+          "#E290B3",
+          "#8DD2F4",
+          "#62B4EF",
+        ],
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          right: "5%",
+          orient: "vertical",
+          top: "center",
+          icon: "circle",
+        },
+        series: [
+          {
+            name: "创新平台建设",
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 0,
+              borderColor: "#fff",
+              borderWidth: 2,
+            },
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: "14",
+                fontWeight: "bold",
+                color: [
+                  "#8DC5F4",
+                  "#83D9AD",
+                  "#EEBE45",
+                  "#E290B3",
+                  "#8DD2F4",
+                  "#62B4EF",
+                ],
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1, name: "众创空间" },
+              { value: 0, name: "企业孵化器" },
+              { value: 2, name: "企业研究院" },
+              { value: 0, name: "科创飞地" },
+              { value: 1, name: "产业创新服务综合体" },
+              { value: 2, name: "高新技术企业研发中心" },
+            ],
+            left: "-40%",
+          },
+        ],
+      });
+    },
+    init4() {
+      if (four != null && four != "" && four != undefined) {
+        four.dispose(); //销毁
+      }
+      four = this.$echarts.init(document.getElementById("main4"));
+      four.setOption({
+        color: ["#EEBE45", "#83D9AD", "#6590F2"],
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          right: "5%",
+          orient: "vertical",
+          top: "center",
+          icon: "circle",
+        },
+        series: [
+          {
+            name: "人才队伍建设",
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 0,
+              borderColor: "#fff",
+              borderWidth: 2,
+            },
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: "14",
+                fontWeight: "bold",
+                color: ["#EEBE45", "#83D9AD", "#6590F2"],
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 0, name: "领军型创业团队" },
+              { value: 0, name: "绿谷精英创新引领行动计划" },
+              { value: 0, name: "绿谷精英科技领军人才" },
+            ],
+            left: "-40%",
+          },
+        ],
+      });
+    },
+    init5() {
+      if (five != null && five != "" && five != undefined) {
+        five.dispose(); //销毁
+      }
+      five = this.$echarts.init(document.getElementById("main5"));
+      five.setOption({
+        color: ["#3CCBCD", "#B7A3DD", "#62B4EF"],
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          right: "15%",
+          orient: "vertical",
+          top: "center",
+          icon: "circle",
+        },
+        series: [
+          {
+            name: "科技企业",
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 0,
+              borderColor: "#fff",
+              borderWidth: 2,
+            },
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: "14",
+                fontWeight: "bold",
+                color: ["#3CCBCD", "#B7A3DD", "#62B4EF"],
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 30, name: "规上企业" },
+              { value: 15, name: "高新技术企业" },
+              { value: 54, name: "科技型中小企业" },
+            ],
+            left: "-40%",
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@media screen and (max-width: 1800px) {
+  .main {
+    width: calc(100% - 40px);
+    background-color: #f0f2f5;
+    margin: 0px auto;
+    padding: 20px 0;
+  }
+  .minLeft,
+  .minRight {
+    /* width: calc(100% - 40px); */
+    box-sizing: border-box;
+    border-radius: 4px;
+    /* padding: 20px; */
+    /* margin: 0px auto; */
+    background: #fff;
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .main {
+    width: 1760px;
+    background-color: #f0f2f5;
+    width: 1800px;
+    margin: 0px auto;
+    padding: 20px 0;
+  }
+  .minLeft,
+  .minRight {
+    /* width: 1160px; */
+    border-radius: 4px;
+    /* padding: 20px 20px 20px; */
+    background: #fff;
+  }
+}
+
+.w60 {
+  width: 60%;
+}
+
+.w39 {
+  width: 39%;
+}
+
+.w48 {
+  width: 48%;
+}
+.w50 {
+  width: 50%;
+}
+.w100 {
+  width: 100%;
+}
+
+.fs28 {
+  font-size: 28px;
+}
+
+.fs24 {
+  font-size: 24px;
+}
+
+.mtl8 {
+  margin-top: 8px;
+  margin-left: 8px;
+}
+
+.mt50 {
+  margin-top: 50px;
+}
+
+.tit {
+  border-bottom: 1px solid #f0f2f5;
+  padding-left: 14px;
+  line-height: 60px;
+}
+
+.topLeft {
+  width: 48%;
+  border: 1px solid #f3f3f3;
+  border-radius: 8px;
+}
+
+.topRight {
+  border: 1px solid #f3f3f3;
+  border-radius: 8px;
+}
+
+.bg {
+  /* background: url('../common/images/backgroud.png') no-repeat;
+    background-size: cover; */
+  height: 140px;
+  position: relative;
+}
+
+.bg div {
+  z-index: 3;
+}
+
+.poab {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.img1 {
+  margin-right: 20px;
+}
+
+.txt {
+  width: 71%;
+  margin: 0 auto;
+}
+
+.mb12 {
+  margin-bottom: 12px;
+}
+
+.c149 {
+  color: #1492f5;
+}
+
+.circle_bot {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  z-index: 3;
+}
+
+.circle_mid {
+  width: 30px;
+  height: 30px;
+  margin: 0 0 0px 0;
+  border-radius: 50%;
+  z-index: 5;
+}
+
+.bge7 {
+  background: #e7f8ed;
+}
+
+.bgf29 {
+  background: #fff2e9;
+}
+
+.bgfb {
+  background: #fbe9e9;
+}
+
+.bgd4 {
+  background: #da2626;
+}
+
+.tiext {
+  width: 48%;
+  height: 130px;
+  background: #f7f8fa;
+  border-radius: 6px;
+}
+
+.m20 {
+  margin: 20px;
+}
+
+.h20 {
+  height: 20px;
+  position: relative;
+}
+
+.bgd4 {
+  background: #d40000;
+}
+
+.bgs {
+  height: 100%;
+  position: absolute;
+  left: 0;
+  background: #15be50;
+}
+
+.w75 {
+  width: 75%;
+}
+
+.lines {
+  width: 59px;
+  height: 2px;
+  background: linear-gradient(270deg, #4192f6, #fff);
+}
+.slines {
+  width: 59px;
+  height: 2px;
+  background: linear-gradient(270deg, #fff, #4192f6);
+}
+.txtLeft {
+  border-radius: 4px;
+  background: #f7f8fa;
+}
+.lh70 {
+  line-height: 70px;
+}
+.pb45 {
+  padding-bottom: 45px;
+}
+.mb40 {
+  margin-bottom: 40px;
+}
+</style>
--- a/jingning_vue/src/views/Live.vue
+++ b/jingning_vue/src/views/Live.vue
+<template>
+  <div class="live">
+    <div class="main">
+      <Breadcrumb :breadData="breadData"></Breadcrumb>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="task">
+            <div class="task-census">
+              <div>
+                <i
+                  class="iconfont icon-huanzhuangtu1"
+                  style="color: #1492ff"
+                ></i>
+                110项任务
+              </div>
+              <div>
+                <i class="iconfont icon-zhengchang" style="color: #6495fa"></i>
+                正常0项
+              </div>
+              <div>
+                <i class="iconfont icon-jingshi" style="color: #ff8401"></i>
+                预警0项
+              </div>
+              <div>
+                <i class="iconfont icon-zhihou" style="color: #e96c5c"></i>
+                滞后0项
+              </div>
+            </div>
+            <el-row class="task-desc" :gutter="0" type="flex">
+              <el-col v-for="(item, index) in task_info" :key="index"
+              :xs="24" :sm="24" :md="24" :lg="12" class="lis">
+                  <p class="task-name">
+                  <i
+                    class="iconfont icon-yuan"
+                    style="color: #1492ff; font-weight: 600; font-size: 18px"
+                  ></i
+                  >{{ item.task_name }}
+                </p>
+                <div class="quota-con">
+                  <div
+                    class="quota-item"
+                    v-for="(qitem, qindex) in item.quota_info"
+                    :key="qindex"
+                  >
+                    <p class="quota-name">{{ qitem.quota_name }}</p>
+                    <p class="quota-value">
+                      目标值：<span>{{ qitem.target_value }}</span> 当前进度：{{
+                        qitem.current_value
+                      }}
+                    </p>
+                    <div class="quota-progress">
+                      进度：
+                      <el-progress
+                        :percentage="50"
+                        :stroke-width="10"
+                      ></el-progress>
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+            <!-- <ul class="task-desc">
+              <li v-for="(item, index) in task_info" :key="index">
+                <p class="task-name">
+                  <i
+                    class="iconfont icon-yuan"
+                    style="color: #1492ff; font-weight: 600; font-size: 18px"
+                  ></i
+                  >{{ item.task_name }}
+                </p>
+                <div class="quota-con">
+                  <div
+                    class="quota-item"
+                    v-for="(qitem, qindex) in item.quota_info"
+                    :key="qindex"
+                  >
+                    <p class="quota-name">{{ qitem.quota_name }}</p>
+                    <p class="quota-value">
+                      目标值：<span>{{ qitem.target_value }}</span> 当前进度：{{
+                        qitem.current_value
+                      }}
+                    </p>
+                    <div class="quota-progress">
+                      进度：
+                      <el-progress
+                        :percentage="50"
+                        :stroke-width="10"
+                      ></el-progress>
+                    </div>
+                  </div>
+                </div>
+              </li>
+            </ul> -->
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="xzzj unify-item">
+            <h4 class="module-tit">学在{{myCity}}</h4>
+            <ul>
+              <li
+                v-for="(item, index) in xzzj_info"
+                :key="index"
+                :class="[
+                  { 'is-active': isActive == index },
+                  { 'xz-disabled': index != 0 },
+                ]"
+              >
+                <p v-if="index == 0">{{ item.name }}</p>
+                <el-tooltip
+                  v-else
+                  class="item"
+                  effect="effect"
+                  content="建设中..."
+                  popper-class="sy-tooltip"
+                  placement="top"
+                  :visible-arrow="false"
+                >
+                  <p>{{ item.name }}</p>
+                </el-tooltip>
+              </li>
+            </ul>
+            <div id="bar_1" style="width: 100%; height: 360px"></div>
+          </div>
+          <div class="hlw unify-item">
+            <h4 class="module-tit">互联网+医疗健康</h4>
+            <ul>
+              <li
+                v-for="(item, index) in hlw_info"
+                :key="index"
+                :class="[
+                  { 'is-active': isActive == index },
+                  { 'hlw-disabled': index != 0 },
+                ]"
+              >
+                <p v-if="index == 0">{{ item.name }}</p>
+                <el-tooltip
+                  v-else
+                  class="item"
+                  effect="effect"
+                  content="建设中..."
+                  popper-class="sy-tooltip"
+                  placement="top"
+                  :visible-arrow="false"
+                >
+                  <p>{{ item.name }}</p>
+                </el-tooltip>
+              </li>
+            </ul>
+            <div id="bar_2" style="width: 100%; height: 360px"></div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+let one, two;
+import Breadcrumb from "../components/Breadcrumb.vue";
+let _myCityName='景宁畲族自治县';
+let _myCity="景宁";
+export default {
+  components: { Breadcrumb },
+  name: "live",
+  data() {
+    return {
+      myCity:_myCity,
+      myCityName:_myCityName,
+      breadData: {
+        page_name: "民生保障",
+        annual_target: "暂无数据",
+        leading: _myCityName+"发展和改革局",
+      },
+      task_info: [
+        {
+          task_name: "幼有所育",
+          quota_info: [
+            {
+              quota_name: "每千人托位数",
+              target_value: 2.5,
+              current_value: "...",
+            },
+            {
+              quota_name: "3岁以下婴幼儿托育机构覆盖率",
+              target_value: "35%",
+              current_value: "...",
+            },
+          ],
+        },
+        {
+          task_name: "学有所教",
+          quota_info: [
+            {
+              quota_name: "儿童青少年学生近视率下降数",
+              target_value: "1%",
+              current_value: "...",
+            },
+            {
+              quota_name: "一、二级幼儿园覆盖率",
+              target_value: "70%",
+              current_value: "...",
+            },
+          ],
+        },
+        {
+          task_name: "劳有所得",
+          quota_info: [
+            {
+              quota_name: "退役军人专场招聘活动举办次数",
+              target_value: 3,
+              current_value: "...",
+            },
+            {
+              quota_name: "重点人群流感疫苗免费接种人数",
+              target_value: 8000,
+              current_value: "...",
+            },
+          ],
+        },
+        {
+          task_name: "老有所得",
+          quota_info: [
+            {
+              quota_name: "每万老年人拥有持证养老护理员数",
+              target_value: 17,
+              current_value: "...",
+            },
+            {
+              quota_name: "护理型床位占养老机构床位比例",
+              target_value: "54%",
+              current_value: "...",
+            },
+          ],
+        },
+        {
+          task_name: "弱有所扶",
+          quota_info: [
+            {
+              quota_name: "未成年人救助保护机构覆盖率",
+              target_value: "30%",
+              current_value: "...",
+            },
+            {
+              quota_name: "新建乡镇（街道）未成年人保护工作站数量",
+              target_value: 2,
+              current_value: "...",
+            },
+          ],
+        },
+        {
+          task_name: "住有所居",
+          quota_info: [
+            {
+              quota_name: "新开工棚户区改造数",
+              target_value: "...",
+              current_value: "...",
+            },
+          ],
+        },
+        {
+          task_name: "文有所化",
+          quota_info: [
+            {
+              quota_name: "县级台电视频道高清率",
+              target_value: "75%",
+              current_value: "...",
+            },
+          ],
+        }
+      ],
+      xzzj_info: [
+        {
+          name: "贯通学校数量",
+        },
+        {
+          name: "幼儿园入学人数",
+        },
+        {
+          name: "义务教育入学人数",
+        },
+        {
+          name: "证书证明办件量",
+        },
+        {
+          name: "资助学生人数",
+        },
+        {
+          name: "考试优待人数",
+        },
+      ],
+      isActive: 0,
+      hlw_info: [
+        {
+          name: "预约挂号",
+        },
+        {
+          name: "电子健康卡",
+        },
+        {
+          name: "检验报告查询",
+        },
+        {
+          name: "医学影像查询",
+        },
+        {
+          name: "电子健康档案",
+        },
+      ],
+      isActiveh: 0,
+    };
+  },
+  mounted() {
+    this.init_bar_1();
+    this.init_bar_2();
+    // let _this =this;
+    // window.addEventListener('resize', () => {
+    //   init_bar_1().resize()
+    //   init_bar_2().resize()
+    // })
+    // window.onresize = () => {
+    //     return (() => {
+    //       _this.init_bar_1();
+    //       _this.init_bar_2();
+    //     })();
+    // };
+  },
+  methods: {
+    xtab(i) {
+      this.isActive = i;
+    },
+    init_bar_1() {
+      if (one != null && one != "" && one != undefined) {
+        one.dispose(); //销毁
+      }
+      one = this.$echarts.init(document.getElementById("bar_1"));
+      one.setOption({
+        tooltip: {
+          show: true, // 是否显示提示框，默认为true
+          trigger: "item", // 数据项图形触发
+          axisPointer: {
+            // 指示样式
+            type: "shadow",
+            axis: "auto",
+          },
+          padding: 5,
+          textStyle: {
+            // 提示框内容的样式
+            color: "#666",
+          },
+        },
+        xAxis: {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#666",
+            },
+          },
+          axisLabel: {
+            rotate: 30,
+            interval: 0,
+            formatter: function (params) {
+              var val = "";
+              if (params.length > 4) {
+                val = params.substr(0, 4) + "...";
+                return val;
+              } else {
+                return params;
+              }
+            },
+          },
+          show: true, // 是否显示
+          position: "bottom", // x轴的位置
+          offset: 0, // x轴相对于默认位置的偏移
+          nameLocation: "end", // 轴名称相对位置
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#666",
+            fontSize: 16,
+          },
+          data: [
+            "高中",
+            "初中",
+            "小学",
+            "公办幼儿园",
+            "成人文化技术学校",
+            "教师进修学校",
+            _myCity+"电大",
+          ],
+        },
+        yAxis: {
+          show: true, // 是否显示
+          position: "left", // y轴位置
+          offset: 0, // y轴相对于默认位置的偏移
+          type: "value", // 轴类型，默认为 ‘category’
+          name: "库存量", // 轴名称
+          nameLocation: "end", // 轴名称相对位置value
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#fff",
+            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
+          },
+          nameGap: 15, // 坐标轴名称与轴线之间的距离
+          nameRotate: 270, // 坐标轴名字旋转
+          splitArea: {
+            // 网格区域
+            show: false, // 是否显示，默认为false
+          },
+        },
+        series: [
+          {
+            name: "学校数量", // 序列名称
+            type: "bar", // 类型
+            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
+            label: {
+              // 图形上的文本标签
+              show: false,
+              position: "insideTop", // 相对位置
+              rotate: 0, // 旋转角度
+              color: "#999",
+            },
+            itemStyle: {
+              // 图形的形状
+              color: "#48A1FF",
+            },
+            barWidth: 20, // 柱形的宽度
+            barCategoryGap: "10%", // 柱形的间距
+            data: [3, 5, 21, 3, 4, 1, 1],
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        one.resize();
+      });
+    },
+    htab(i) {
+      this.isActiveh = i;
+    },
+    init_bar_2() {
+      if (two != null && two != "" && two != undefined) {
+        two.dispose(); //销毁
+      }
+      two = this.$echarts.init(document.getElementById("bar_2"));
+      two.setOption({
+        // ---- legend ----
+        // legend: {
+        //   type: "plain", // 图列类型，默认为 'plain'
+        //   top: "1%", // 图列相对容器的位置 top\bottom\left\right
+        //   left: "1%",
+        //   textStyle: {
+        //     // 图列内容样式
+        //     color: "#333", // 字体颜色
+        //     backgroundColor: "black", // 字体背景色
+        //   },
+        //   data: [
+        //     // 图列内容
+        //     {
+        //       name: "库存量",
+        //       icon: "circle",
+        //       textStyle: {
+        //         color: "#333", // 单独设置某一个图列的颜色
+        //         backgroundColor: "transparent", // 单独设置某一个图列的字体背景色
+        //       },
+        //     },
+        //   ],
+        // },
+        // ---  提示框 ----
+        tooltip: {
+          show: true, // 是否显示提示框，默认为true
+          trigger: "item", // 数据项图形触发
+          axisPointer: {
+            // 指示样式
+            type: "shadow",
+            axis: "auto",
+          },
+          padding: 5,
+          textStyle: {
+            // 提示框内容的样式
+            color: "#666",
+          },
+        },
+        // ---- gird区域 ---
+        //  ------  X轴 ------
+        xAxis: {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#666",
+            },
+          },
+          axisLabel: {
+            rotate: 30,
+            interval: 0,
+            formatter: function (params) {
+              var val = "";
+              if (params.length > 4) {
+                val = params.substr(0, 4) + "...";
+                return val;
+              } else {
+                return params;
+              }
+            },
+          },
+          show: true, // 是否显示
+          position: "bottom", // x轴的位置
+          offset: 0, // x轴相对于默认位置的偏移
+          nameLocation: "end", // 轴名称相对位置
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#999",
+            fontSize: 12,
+          },
+          data: [
+            "莲都",
+            "龙泉",
+            "青田",
+            "松阳",
+            "庆元",
+            "缙云",
+            "遂昌",
+            "云和",
+            "景宁",
+            "开发区",
+          ],
+        },
+        //   ------   y轴  ----------
+        yAxis: {
+          show: true, // 是否显示
+          position: "left", // y轴位置
+          offset: 0, // y轴相对于默认位置的偏移
+          type: "value", // 轴类型，默认为 ‘category’
+          name: "库存量", // 轴名称
+          nameLocation: "end", // 轴名称相对位置value
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#fff",
+            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
+          },
+          nameGap: 15, // 坐标轴名称与轴线之间的距离
+          nameRotate: 270, // 坐标轴名字旋转
+          splitArea: {
+            // 网格区域
+            show: false, // 是否显示，默认为false
+          },
+        },
+        //  -------   内容数据 -------
+        series: [
+          {
+            name: "实例值", // 序列名称
+            type: "bar", // 类型
+            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
+            label: {
+              // 图形上的文本标签
+              show: false,
+              position: "insideTop", // 相对位置
+              rotate: 0, // 旋转角度
+              color: "#999",
+            },
+            itemStyle: {
+              // 图形的形状
+              color: "#48A1FF",
+            },
+            barWidth: 15, // 柱形的宽度
+            barCategoryGap: "10%", // 柱形的间距
+            data: [100, 78, 90, 85, 93, 86, 98, 95, 80, 78],
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        two.resize();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@media screen and(min-width:1200px) {
+  #app {
+    width: 1200px;
+    background: #efefef !important;
+  }
+  .main {
+    width: 1200px !important;
+  }
+}
+.main {
+  width: calc(100% - 40px);
+  margin: 0px auto;
+  padding: 20px 0px;
+}
+.task {
+  .task-census {
+    border-radius: 4px;
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    padding: 12px 20px;
+    justify-content: space-around;
+    background-color: #fff;
+  }
+  .task-desc {
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    .lis {
+      // width: 49%;
+      border-radius: 4px;
+      // box-sizing: border-box;
+      background-color: #fff;
+      margin-bottom: 20px;
+      padding: 12px;
+      // overflow: auto;
+      .task-name {
+        font-size: 20px;
+        color: #333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+      .quota-item {
+        margin: 12px 0;
+        color: #333;
+        .quota-name {
+          font-size: 18px;
+          font-weight: 600;
+        }
+        .quota-value {
+          color: #666;
+          margin: 8px 0;
+          span {
+            color: #1492ff;
+            font-weight: 600;
+            margin-right: 20px;
+          }
+        }
+        .quota-progress {
+          color: #333;
+          display: flex;
+          align-items: center;
+          >>> .el-progress {
+            width: 80%;
+          }
+          >>> .el-progress__text {
+            color: #1492ff;
+          }
+        }
+      }
+    }
+  }
+}
+.xzzj {
+  ul {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 15px 0 0;
+    li {
+      width: 30%;
+      line-height: 45px;
+      text-align: center;
+      background-color: #ddd;
+      margin: 0 3% 20px 0;
+      cursor: pointer;
+      color: #333;
+    }
+    .xz-disabled {
+      color: #999;
+    }
+    .is-active {
+      background-color: #1492ff;
+      color: #fff;
+    }
+  }
+}
+.hlw {
+  ul {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 12px 0 0;
+    li {
+      width: 30%;
+      line-height: 45px;
+      text-align: center;
+      background-color: #ddd;
+      margin: 0 3% 20px 0;
+      cursor: pointer;
+      color: #333;
+    }
+    .hlw-disabled {
+      color: #999;
+    }
+    .is-active {
+      background-color: #1492ff;
+      color: #fff;
+    }
+  }
+}
+</style>
+<style>
+@media only screen and (min-width: 1200px) {
+  .el-col-lg-12 {
+    width: 49%;
+}
+}
+
+</style>
--- a/jingning_vue/src/views/MyIndex.vue
+++ b/jingning_vue/src/views/MyIndex.vue
+<template>
+  <div>
+    <ul style="margin: 0 auto; width: 50%; padding-top: 100px">
+      <li>
+        乡村振兴-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/xczx','xczx')" to="#">点击跳转</router-link>
+      </li>
+      <li>
+        安全生产-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/aqsc','aqsc')" to="#">点击跳转</router-link>
+      </li>
+      <li>
+        营商环境-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/yshj','yshj')" to="#">点击跳转</router-link>
+      </li>
+
+      <li>
+        双循环-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/sxh','sxh')" to="#">点击跳转</router-link>
+      </li>
+
+       <li>
+        科技创新-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/kjcx','kjcx')" to="#">点击跳转</router-link>
+      </li>
+
+        <li>
+        民生保障-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/msbz','msbz')" to="#">点击跳转</router-link>
+      </li>
+      <li>
+        区域协调发展-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/qyxtfz','qyxtfz')" to="#">点击跳转</router-link>
+      </li>
+
+      <li>
+        产业发展-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/cyfz','cyfz')" to="#">点击跳转</router-link>
+      </li>
+
+       <li>
+        新型城镇化-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/xxczh','xxczh')" to="#">点击跳转</router-link>
+      </li>
+	  
+	   <li>
+        常态防疫-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/ctfy','ctfy')" to="#" class="link">点击跳转</router-link>
+      </li>
+
+    <li>
+        生态文明-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/stwm','stwm')" to="#" class="link">点击跳转</router-link>
+      </li>
+
+      <li>
+        减负降本-子门户&nbsp;&nbsp;&nbsp;&nbsp;<router-link tag="span" @click.native="handle('/jfjb','jfjb')" to="#" class="link">点击跳转</router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+let one, two, three, four, five, six, seven;
+const _myCity = "景宁畲族自治县";
+export default {
+  data() {
+    return {
+      myCity: "",
+    };
+  },
+  methods: {
+    handle(path,name) {
+      let { href } = this.$router.resolve({ path: path });
+      window.open(href, name);
+    },
+  },
+};
+</script>
+
+  <style>
+li {
+  margin: 20px;
+}
+</style>
\ No newline at end of file
--- a/jingning_vue/src/views/NewUrbanization.vue
+++ b/jingning_vue/src/views/NewUrbanization.vue
+<template>
+  <div class="nu">
+    <div class="main">
+      <Breadcrumb :breadData="breadData"></Breadcrumb>
+    <div class="nu-tabs">
+      <ul>
+        <li
+          v-for="(item, index) in nu_tabs"
+          :key="index"
+          :class="[
+            { 'is-active': isActive == index },
+            { 'nu-disabled': index != 0 },
+          ]"
+        >
+          <p v-if="index == 0">{{ item.name }}</p>
+          <el-tooltip
+            v-else
+            class="item"
+            effect="effect"
+            content="建设中..."
+            popper-class="sy-tooltip"
+            placement="top"
+            :visible-arrow="false"
+          >
+            <p>{{ item.name }}</p>
+          </el-tooltip>
+        </li>
+      </ul>
+    </div>
+    <div class="urbanization-level unify-item">
+      <h3 class="module-tit">{{myCity}}县城镇化水平</h3>
+      <div class="ul-con">
+        <div class="ul-text">
+          <h4>{{myCity}}县常住人口城镇化率</h4>
+          <div>
+            2020年
+            <p style="color: #21c259"><span>61.82</span>%</p>
+          </div>
+          <div>
+            2021年目标
+            <p style="color: #000"><span>63</span>%</p>
+          </div>
+        </div>
+        <div class="ul-img">
+          <img src="../assets/images/sy_map.png" alt="" width="200"/>
+        </div>
+        <div class="ul-table">
+          <el-table
+            :data="ul_table"
+            style="width: 100%; color: #333; font-size: 16px"
+            size="mini"
+            :row-class-name="tableRowClassName"
+          >
+            <el-table-column
+              prop="rank"
+              label="排名"
+              width="110"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="area"
+              label="地区"
+              width="110"
+              align="center"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="percentage"
+              width="110"
+              label="城镇化率"
+              align="center"
+            >
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="12" :md="12" :lg="12">
+        <div class="old-community unify-item">
+          <h3 class="module-tit">老旧小区改造</h3>
+          <div class="oc-text">
+            <h4>全县老旧小区改造</h4>
+            <div>
+              <div>
+                2021年目标值
+                <span style="color: #333"><i>6</i>个</span>
+              </div>
+            </div>
+          </div>
+          <div id="bar_1" style="width: 100%; height: 320px"></div>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="12" :lg="12">
+        <div class="unify-item">
+          <h3 class="module-tit">未来社区建设</h3>
+          <div class="oc-text">
+            <h4>未来社区建设</h4>
+            <div>
+              <div>
+                截至2021年第一季度
+                <span style="color: #21c259"><i>3.9</i>亿元</span>
+              </div>
+              <div>
+                2021年目标值
+                <span style="color: #333"><i>5</i>亿元</span>
+              </div>
+            </div>
+          </div>
+          <div id="line_1" style="width: 100%; height: 320px"></div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="12" :md="12" :lg="12">
+        <div class="task-practicable unify-item">
+          <h3 class="module-tit">年度任务落实情况</h3>
+          <div class="tp-con">
+            <div
+              id="circle_1"
+              style="width: 48%; height: 160px; margin: 20px 0"
+            ></div>
+            <div class="tp-text">
+              <p>总任务<span>12</span>项</p>
+              <ul>
+                <li v-for="(item, index) in task_completion_info" :key="index">
+                  <i :style="{ backgroundColor: item.bgc }"></i>
+                  {{ item.name }}
+                  <span>{{ item.proportion }}</span>
+                  <span style="font-size: 18px; color: #333"
+                    >{{ item.value }}项</span
+                  >
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="tp-table">
+            <el-table
+              :data="tp_table"
+              style="width: 100%; color: #333; font-size: 16px"
+            >
+              <el-table-column
+                prop="task_name"
+                label="任务名"
+                width="339"
+                fixed
+              >
+              </el-table-column>
+              <el-table-column prop="percentage" label="进度" width="80">
+                <template slot-scope="scope">
+                  <span
+                    :style="{
+                      color:
+                        scope.row.status === '完成'
+                          ? '#16BE50'
+                          : scope.row.status === '正常'
+                          ? '#1492ff'
+                          : '#D40000',
+                      fontWeight: '600',
+                    }"
+                  >
+                    {{ scope.row.percentage }}</span
+                  >
+                </template>
+              </el-table-column>
+              <el-table-column prop="status_img" width="120" label="状态">
+                <template slot-scope="scope">
+                  <img :src="scope.row.status_img" width="56" height="22" />
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="12" :md="12" :lg="12">
+        <div class="unify-item characteristic-town">
+          <h3 class="module-tit">特色小镇数量</h3>
+          <div class="tp-con">
+            <div
+              id="circle_2"
+              style="width: 48%; height: 160px; margin: 20px 0"
+            ></div>
+            <div class="tp-text">
+              <p>总数<span>14</span>个</p>
+              <ul>
+                <li v-for="(item, index) in ct_info" :key="index">
+                  <i :style="{ backgroundColor: item.bgc }"></i>
+                  {{ item.name }}
+                  <span>{{ item.proportion }}</span>
+                  <span style="font-size: 18px; color: #333"
+                    >{{ item.value }}项</span
+                  >
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div id="bar_2" style="width: 100%; height: 235px"></div>
+        </div>
+      </el-col>
+    </el-row>
+    <div class="app-scen unify-item">
+      <h3 class="module-tit">应用场景</h3>
+      <p class="as-tabs">{{myCity}}综合执法置能化提升</p>
+      <div class="as-con">
+        <div class="current-task">
+          <h4>当前任务</h4>
+          <div class="tp-con">
+            <div
+              id="circle_3"
+              style="width: 48%; height: 160px; margin: 20px 0"
+            ></div>
+            <div class="tp-text">
+              <p>总任务<span>12</span>项</p>
+              <ul>
+                <li v-for="(item, index) in as_info" :key="index">
+                  <i :style="{ backgroundColor: item.bgc }"></i>
+                  {{ item.name }}
+                  <span>{{ item.proportion }}</span>
+                  <span style="font-size: 18px; color: #333"
+                    >{{ item.value }}项</span
+                  >
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="current-task">
+          <h4>近一年执法完成情况</h4>
+          <div id="bar_3" style="width: 100%; height: 235px"></div>
+        </div>
+      </div>
+    </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+  let one,two,three,four,five,six,seven;
+import Breadcrumb from "../components/Breadcrumb.vue";
+let _myCityName="景宁畲族自治县";
+export default {
+  components: { Breadcrumb },
+  data() {
+    return {
+      myCity:'景宁',
+      myCityName:_myCityName,
+      breadData: {
+        page_name: "新型城镇化",
+        annual_target: "暂无数据",
+        leading: _myCityName+"发展和改革局",
+      },
+      isActive: 0,
+      nu_tabs: [
+        {
+          name: "总体情况",
+        },
+        {
+          name: "促进中心城市、县城和小城镇协调发展",
+        },
+        {
+          name: "总打造海绵城市、韧性城市",
+        },
+        {
+          name: "加快城市有机更新",
+        },
+        {
+          name: "中心城市能级提升",
+        },
+      ],
+      ul_table: [
+        {
+          rank: 1,
+          area: "莲都区",
+          percentage: "76.43%",
+        },
+		{
+		  rank: 2,
+		  area: "云和县",
+		  percentage: "73.1%",
+		},
+        {
+          rank: 3,
+          area: "龙泉市",
+          percentage: "66.53%",
+        },
+        {
+          rank: 4,
+          area: "庆元县",
+          percentage: "63.5%",
+        },
+        {
+          rank: 5,
+          area: "景宁县",
+          percentage: "58.21%",
+        },
+        {
+          rank: 6,
+          area: "缙云县",
+          percentage: "56.82%",
+        },
+        {
+          rank: 7,
+          area: "遂昌县",
+          percentage: "55.03%",
+        },
+        {
+          rank: 8,
+          area: "青田县",
+          percentage: "53.1%",
+        },
+				{
+         rank: 9,
+         area: "松阳县",
+         percentage: "47.71%",
+       },
+      ],
+      task_completion_info: [
+        {
+          value: 3,
+          name: "正常",
+          proportion: "25%",
+          bgc: "#1492ff",
+        },
+        {
+          value: 6,
+          name: "完成",
+          proportion: "50%",
+          bgc: "#55D081",
+        },
+        {
+          value: 3,
+          name: "滞后",
+          proportion: "25%",
+          bgc: "#E70101",
+        },
+      ],
+      tp_table: [
+        {
+          task_name: "开工老旧小区改造项目20个",
+          percentage: "15%",
+          status: "正常",
+          status_img: require("../assets/images/normal.jpg"),
+        },
+        {
+          task_name: "开展省级“街容示范街”建设",
+          percentage: "0%",
+          status: "滞后",
+          status_img: require("../assets/images/lag.png"),
+        },
+        {
+          task_name: "“丽水山居图”重要节点项目10个",
+          percentage: "60%",
+          status: "正常",
+          status_img: require("../assets/images/normal.jpg"),
+        },
+        {
+          task_name: "兼顾人防工程总量突破800万平方米",
+          percentage: "100%",
+          status: "完成",
+          status_img: require("../assets/images/finish.jpg"),
+        },
+      ],
+      ct_info: [
+        {
+          value: 1,
+          name: "命名",
+          proportion: "7.14%",
+          bgc: "#1492ff",
+        },
+        {
+          value: 10,
+          name: "创建",
+          proportion: "71.43%",
+          bgc: "#15BF51",
+        },
+        {
+          value: 3,
+          name: "培育",
+          proportion: "21.43%",
+          bgc: "#64779C",
+        },
+      ],
+      as_info: [
+        {
+          value: 3,
+          name: "紧急",
+          proportion: "25%",
+          bgc: "#1492ff",
+        },
+        {
+          value: 6,
+          name: "重要",
+          proportion: "50%",
+          bgc: "#55D081",
+        },
+        {
+          value: 3,
+          name: "一般",
+          proportion: "25%",
+          bgc: "#E70101",
+        },
+      ]
+    };
+  },
+  mounted() {
+    this.init_bar_1();
+    this.init_line_1();
+    this.init_circle_1();
+    this.init_circle_2();
+    this.init_bar_2();
+    this.init_circle_3();
+    this.init_bar_3();
+    // let _this =this;
+    // window.onresize = () => {
+    //     return (() => {
+    //      _this.init_bar_1();
+    //      _this.init_line_1();
+    //      _this.init_circle_1();
+    //      _this.init_circle_2();
+    //      _this.init_bar_2();
+    //      _this.init_circle_3();
+    //      _this.init_bar_3();
+    //     })();
+    // };
+  },
+  methods: {
+    tableRowClassName({row}){
+      if(row.area==this.myCity+"县"){
+        return "table-target"
+      }else{
+        return ''
+      }
+    },
+    init_bar_1() {
+      if (one != null && one != "" && one != undefined) {
+        one.dispose();//销毁
+      }
+      one = this.$echarts.init(document.getElementById("bar_1"));
+      one.setOption({
+        tooltip: {
+          show: true, // 是否显示提示框，默认为true
+          trigger: "item", // 数据项图形触发
+          axisPointer: {
+            // 指示样式
+            type: "shadow",
+            axis: "auto",
+          },
+          padding: 5,
+          textStyle: {
+            // 提示框内容的样式
+            color: "#666",
+          },
+        },
+        legend: {
+          x: "center",
+          y: "bottom",
+          textStyle: {
+            fontSize: 14,
+          },
+          data: ["已开工", "2021年目标"],
+        },
+        // -
+        //  ------  X轴 ------
+        xAxis: {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#666",
+            },
+          },
+          axisLabel: {
+            rotate: 30,
+            interval: 0,
+            formatter: function (params) {
+              var val = "";
+              if (params.length > 4) {
+                val = params.substr(0, 4) + "...";
+                return val;
+              } else {
+                return params;
+              }
+            },
+          },
+          show: true, // 是否显示
+          position: "bottom", // x轴的位置
+          offset: 0, // x轴相对于默认位置的偏移
+          nameLocation: "end", // 轴名称相对位置
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#999",
+            fontSize: 12,
+          },
+          data: [
+            "市本级",
+            "莲都区",
+            "青田县",
+            "缙云县",
+            "庆元县",
+            "松阳县",
+            "遂昌县",
+            "云和县",
+            "景宁县",
+            "龙泉市",
+          ],
+        },
+        //   ------   y轴  ----------
+        yAxis: {
+          name: "%", // 轴名称
+          show: true, // 是否显示
+          position: "left", // y轴位置
+          offset: 0, // y轴相对于默认位置的偏移
+          type: "value", // 轴类型，默认为 ‘category’
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#333",
+            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
+          },
+          nameGap: 15, // 坐标轴名称与轴线之间的距离
+          splitArea: {
+            // 网格区域
+            show: false, // 是否显示，默认为false
+          },
+        },
+        //  -------   内容数据 -------
+        series: [
+          {
+            name: "2021年目标", // 序列名称
+            type: "bar", // 类型
+            barGap: "-100%",
+            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
+            label: {
+              // 图形上的文本标签
+              show: false,
+              position: "insideTop", // 相对位置
+              rotate: 0, // 旋转角度
+              color: "#999",
+            },
+            itemStyle: {
+              // 图形的形状
+              normal: {
+                color: "#D9D9DA",
+                label: {
+                  show: true,
+                  position: "top",
+                  textStyle: {
+                    color: "#333",
+                    fontSize: 14,
+                  },
+                },
+              },
+            },
+            barWidth: 20, // 柱形的宽度
+            barCategoryGap: "10%", // 柱形的间距
+            data: [0, 3, 5, 1, 0, 0, 5, 6, 0, 0],
+          },
+          {
+            name: "已开工", // 序列名称
+            type: "bar", // 类型
+            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
+            label: {
+              // 图形上的文本标签
+              show: false,
+              position: "insideTop", // 相对位置
+              rotate: 0, // 旋转角度
+              color: "#999",
+            },
+            itemStyle: {
+              // 图形的形状
+              normal: {
+                color: "#1492ff",
+                label: {
+                  show: true,
+                  position: "top",
+                  textStyle: {
+                    color: "#333",
+                    fontSize: 14,
+                  },
+                },
+              },
+            },
+            barWidth: 20, // 柱形的宽度
+            barCategoryGap: "10%", // 柱形的间距
+            data: [0, 2, 0, 0, 0, 0, 1, 0, 0, 0],
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        one.resize();
+      });
+    },
+    init_line_1() {
+      if (two != null && two != "" && two != undefined) {
+        two.dispose();//销毁
+      }
+      two = this.$echarts.init(document.getElementById("line_1"));
+      two.setOption({
+        legend: {
+          orient: "horizontal",
+          x: "center",
+          y: "bottom",
+          data: ["累计投资同比增长率"],
+          textStyle: {
+            fontSize: 14,
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#333",
+              fontSize: 14,
+            },
+          },
+          data: ["1月", "2月", "3月", "4月", "5月"],
+        },
+        yAxis: {
+          type: "value",
+          name: "%",
+        },
+        series: [
+          {
+            name: "累计投资同比增长率",
+            data: [0.5, 0.6, 0.8, 0.9, 1.1],
+            type: "line",
+          },
+        ],
+        color: ["#1492ff"],
+      });
+      window.addEventListener("resize", () => {
+        two.resize();
+      });
+    },
+    init_circle_1() {
+      if (three != null && three != "" && three != undefined) {
+        three.dispose();//销毁
+      }
+      three = this.$echarts.init(document.getElementById("circle_1"));
+      three.setOption({
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        color: ["#1492ff", "#55D081", "#E70101"],
+        series: [
+          {
+            name: "任务落实情况",
+            type: "pie",
+            radius: ["60%", "90%"], // 半径
+            center: ["50%", "50%"], // 位置
+            label: {
+              normal: {
+                show: true,
+                position: "outer",
+                formatter: "{b}\n{d}%",
+                textStyle: {
+                  fontSize: 14,
+                },
+              },
+            },
+            data: this.task_completion_info,
+            itemStyle: {
+              borderWidth: 5,
+              borderColor: "#fff",
+            },
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        three.resize();
+      });
+    },
+    init_circle_2() {
+      if (four != null && four != "" && four != undefined) {
+        four.dispose();//销毁
+      }
+      four = this.$echarts.init(document.getElementById("circle_2"));
+      four.setOption({
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        color: ["#1492ff", "#15BF51", "#64779C"],
+        series: [
+          {
+            name: "特色小镇数量",
+            type: "pie",
+            radius: ["60%", "90%"], // 半径
+            center: ["50%", "50%"], // 位置
+            label: {
+              normal: {
+                show: true,
+                position: "inner",
+                formatter: "{c}",
+                textStyle: {
+                  fontSize: 14,
+                },
+              },
+            },
+            data: this.ct_info,
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+            },
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        four.resize();
+      });
+    },
+    init_bar_2() {
+      if (five != null && five != "" && five != undefined) {
+        five.dispose();//销毁
+      }
+      five = this.$echarts.init(document.getElementById("bar_2"));
+      five.setOption({
+        title: {
+          text: "各区县2021年投资完成情况",
+          textStyle: {
+            fontSize: 16,
+            color: "#666",
+          },
+          padding: 5,
+        },
+        tooltip: {
+          show: true, // 是否显示提示框，默认为true
+          trigger: "item", // 数据项图形触发
+          axisPointer: {
+            // 指示样式
+            type: "shadow",
+            axis: "auto",
+          },
+          padding: 5,
+          textStyle: {
+            // 提示框内容的样式
+            color: "#666",
+          },
+        },
+        grid: {
+          top: "25%",
+          left: "3%",
+          right: "8%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        // ---- gird区域 ---
+        //  ------  X轴 ------
+        xAxis: {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#666",
+            },
+          },
+          axisLabel: {
+            rotate: 30,
+            interval: 0,
+            formatter: function (params) {
+              var val = "";
+              if (params.length > 4) {
+                val = params.substr(0, 4) + "...";
+                return val;
+              } else {
+                return params;
+              }
+            },
+          },
+          show: true, // 是否显示
+          position: "bottom", // x轴的位置
+          offset: 0, // x轴相对于默认位置的偏移
+          nameLocation: "end", // 轴名称相对位置
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#999",
+            fontSize: 14,
+          },
+          data: [
+            "市本级",
+            "莲都",
+            "龙泉",
+            "青田",
+            "松阳",
+            "庆元",
+            "缙云",
+            "遂昌",
+            "云和",
+            "景宁",
+          ],
+        },
+        //   ------   y轴  ----------
+        yAxis: {
+          show: true, // 是否显示
+          name: "单位/亿元", // 轴名称
+          position: "left", // y轴位置
+          offset: 0, // y轴相对于默认位置的偏移
+          type: "value", // 轴类型，默认为 ‘category’
+          nameLocation: "end", // 轴名称相对位置value
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#666",
+            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
+            fontSize: 14,
+          },
+          splitArea: {
+            // 网格区域
+            show: false, // 是否显示，默认为false
+          },
+        },
+        //  -------   内容数据 -------
+        series: [
+          {
+            name: "完成情况", // 序列名称
+            type: "bar", // 类型
+            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
+            label: {
+              // 图形上的文本标签
+              show: false,
+              position: "insideTop", // 相对位置
+              rotate: 0, // 旋转角度
+              color: "#999",
+            },
+            itemStyle: {
+              // 图形的形状
+              color: "#48A1FF",
+            },
+            barWidth: 15, // 柱形的宽度
+            barCategoryGap: "10%", // 柱形的间距
+            data: [0.63, 0.6, 2.62, 2.6, 1.58, 1.35, 2.78, 0.5, 1.6, 1.4],
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        five.resize();
+      });
+    },
+    init_circle_3() {
+      if (six != null && six != "" && six != undefined) {
+        six.dispose();//销毁
+      }
+      six = this.$echarts.init(document.getElementById("circle_3"));
+      six.setOption({
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        color: ["#1492ff", "#55D081", "#E70101"],
+        series: [
+          {
+            name: "当前任务",
+            type: "pie",
+            radius: ["60%", "90%"], // 半径
+            center: ["50%", "50%"], // 位置
+            label: {
+              normal: {
+                show: true,
+                position: "outer",
+                formatter: "{b}\n{d}%",
+                textStyle: {
+                  fontSize: 14,
+                },
+              },
+            },
+            data: this.as_info,
+            itemStyle: {
+              borderWidth: 5,
+              borderColor: "#fff",
+            },
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        six.resize();
+      });
+    },
+    init_bar_3() {
+      if (seven != null && seven != "" && seven != undefined) {
+        seven.dispose();//销毁
+      }
+      seven = this.$echarts.init(document.getElementById("bar_3"));
+      seven.setOption({
+        tooltip: {
+          show: true, // 是否显示提示框，默认为true
+          trigger: "item", // 数据项图形触发
+          axisPointer: {
+            // 指示样式
+            type: "shadow",
+            axis: "auto",
+          },
+          padding: 5,
+          textStyle: {
+            // 提示框内容的样式
+            color: "#666",
+          },
+        },
+        grid: {
+          top: "20%",
+          left: "3%",
+          right: "8%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        // ---- gird区域 ---
+        //  ------  X轴 ------
+        xAxis: {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#666",
+            },
+          },
+          axisLabel: {
+            rotate: 30,
+            interval: 0,
+          },
+          show: true, // 是否显示
+          position: "bottom", // x轴的位置
+          offset: 0, // x轴相对于默认位置的偏移
+          nameLocation: "end", // 轴名称相对位置
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#999",
+            fontSize: 14,
+          },
+          data: [
+            "202008",
+            "202009",
+            "202010",
+            "202011",
+            "202012",
+            "202101",
+            "202102",
+            "202103",
+            "202104",
+            "202105",
+            "202106"
+          ],
+        },
+        //   ------   y轴  ----------
+        yAxis: {
+          show: true, // 是否显示
+          name: "单位：项", // 轴名称
+          position: "left", // y轴位置
+          offset: 0, // y轴相对于默认位置的偏移
+          type: "value", // 轴类型，默认为 ‘category’
+          nameLocation: "end", // 轴名称相对位置value
+          nameTextStyle: {
+            // 坐标轴名称样式
+            color: "#666",
+            padding: [5, 0, 0, 5], // 坐标轴名称相对位置
+            fontSize: 14,
+          },
+          splitArea: {
+            // 网格区域
+            show: false, // 是否显示，默认为false
+          },
+        },
+        //  -------   内容数据 -------
+        series: [
+          {
+            name: "执法完成情况", // 序列名称
+            type: "bar", // 类型
+            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
+            label: {
+              // 图形上的文本标签
+              show: false,
+              position: "insideTop", // 相对位置
+              rotate: 0, // 旋转角度
+              color: "#999",
+            },
+            itemStyle: {
+              // 图形的形状
+              color: "#48A1FF",
+            },
+            barWidth: 15, // 柱形的宽度
+            barCategoryGap: "10%", // 柱形的间距
+            data: [18, 11, 7, 11, 5, 9, 6, 11, 3, 11,11],
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        seven.resize();
+      });
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@media screen and(min-width:1200px) {
+  #app {
+    width: 1200px;
+    background: #efefef !important;
+  }
+  .main {
+    width: 1200px !important;
+  }
+}
+@media screen and(max-width:1200px) {
+  .main {
+    width: calc(100% - 40px);
+  }
+}
+.main {
+ 
+  margin: 0px auto;
+  padding: 20px 0px;
+}
+h3 {
+  border-bottom: 1px solid #ddd;
+}
+.oc-text {
+  width: 90%;
+  margin: 0 auto;
+  padding: 20px 20px 8px;
+  box-sizing: border-box;
+  border: 1px solid #ddd;
+  margin-top: 20px;
+  h4 {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+  i {
+    font-style: normal;
+    font-size: 20px;
+  }
+  & > div {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin: 20px 0;
+    color: #666;
+  }
+}
+.tp-con {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 20px 0 12px;
+  .tp-text {
+    width: 48%;
+    color: #666;
+    p {
+      font-size: 18px;
+      margin-bottom: 20px;
+      span {
+        color: #333;
+        font-size: 20px;
+        margin: 0 8px;
+      }
+    }
+    li {
+      margin: 12px 0;
+      i {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+      }
+      span {
+        margin: 0 12px;
+      }
+    }
+  }
+}
+.nu-tabs {
+  ul {
+    display: flex;
+    padding: 12px 20px 0;
+    background-color: #fff;
+    margin-bottom: 20px;
+    font-size: 18px;
+    flex-wrap: wrap;
+    border-radius: 4px;
+    li {
+      min-width: 150px;
+      margin-bottom: 12px;
+      padding: 12px;
+      margin-right: 12px;
+      background-color: #f1f1f1;
+      text-align: center;
+      border-radius: 4px;
+      white-space: nowrap;
+      cursor: pointer;
+    }
+    .is-active {
+      color: #fff;
+      background-color: #1492ff;
+    }
+    .nu-disabled {
+      color: #999;
+    }
+  }
+}
+.urbanization-level {
+  .ul-con {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 20px;
+    .ul-text {
+      width: 28%;
+      padding: 20px 20px 0;
+      border: 1px solid #ddd;
+      height: 120px;
+      overflow: auto;
+      h4 {
+        font-weight: 600;
+        margin-bottom: 8px;
+        font-size: 18px;
+      }
+      div {
+        display: flex;
+        align-items: center;
+        color: #666;
+        justify-content: space-between;
+        margin: 12px 0;
+        span {
+          font-size: 20px;
+        }
+      }
+    }
+    .ul-img{
+      width: 35%;
+      img{
+        width: 100%;
+        height: auto;
+      }
+    }
+    >>> .table-target{
+      background-color: #A1DEFC;
+    }
+  }
+}
+.task-practicable {
+  .tp-table {
+    margin-bottom: 20px;
+    >>> .el-table__header {
+      display: none;
+    }
+  }
+}
+.app-scen {
+  .as-tabs {
+    display: inline-block;
+    padding: 12px 20px;
+    color: #fff;
+    background-color: #1492ff;
+    border-radius: 4px;
+    margin: 12px 0;
+    cursor: pointer;
+  }
+  .as-con {
+    display: flex;
+    justify-content: space-between;
+    h4{
+      font-size: 18px;
+      font-weight: 600;
+    }
+    > div {
+      width: 48%;
+    }
+  }
+}
+</style>
--- a/jingning_vue/src/views/Region.vue
+++ b/jingning_vue/src/views/Region.vue
+<template>
+  <div class="region">
+    <div class="main">
+      <Breadcrumb :breadData="breadData"></Breadcrumb>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div class="unify-item box1_l">
+          <div class="module-tit">政府工作报告落实情况</div>
+          <!-- 饼状图，百分比 -->
+          <div id="gzbgChart" style="width: 100%; height: 233px"></div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="unify-item box1_r">
+          <div class="module-tit">重点任务落实</div>
+          <!-- 大花园建设 ，山区跨越式发展 -->
+          <div class="pdlr20 bdBox">
+            <div class="progres">
+              <h5>大花园建设</h5>
+              <p>
+                任务数<span>286</span>已完成<span>218</span
+                >
+              </p>
+              <div class="probar">
+                <span>进度</span
+                ><el-progress
+                  :percentage="Number(((218 / 286) * 100).toFixed(2))"
+                  :stroke-width="10"
+                  color="#1492ff"
+                ></el-progress>
+              </div>
+            </div>
+            <div class="progres">
+              <h5>山区跨越式发展</h5>
+              <p>
+                任务数<span>255</span>已完成<span>198</span>
+              </p>
+              <div class="probar">
+                <span>进度</span
+                ><el-progress
+                  :percentage="Number(((198 / 255) * 100).toFixed(2))"
+                  :stroke-width="10"
+                  color="#1492ff"
+                ></el-progress>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <div class="unify-item box2">
+      <div class="insideBox box2_l">
+        <h3 class="module-tit">重点关注区域 - 山区26县</h3>
+        <!-- 山区26县 -->
+        <h4>产业项目数（个）</h4>
+        <div id="sq26x1" style="width: 100%; height: 300px"></div>
+        <h4>产业项目完成投资数（亿元）</h4>
+        <div id="sq26x2" style="width: 100%; height: 300px"></div>
+      </div>
+    </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+  let one,two,three;
+import Breadcrumb from "../components/Breadcrumb.vue";
+let _myCityName='景宁畲族自治县';
+let _myCity="景宁";
+export default {
+  components: { Breadcrumb },
+  data() {
+    return {
+     myCity:_myCity,
+      myCityName:_myCityName,
+      breadData: {
+        page_name: "区域协调发展",
+        annual_target: "暂无数据",
+        leading: _myCityName+"发展和改革局",
+      },
+      region_idx: "0",
+      region_tabs: ["热点关注", "工作动态", "任务进展"],
+    };
+  },
+  mounted() {
+    this.initGzbgChart();
+    this.initSq26x1Chart();
+    this.initSq26x2Chart();
+    // let _this =this;
+    // window.onresize = () => {
+    //     return (() => {
+    //       _this.initGzbgChart();
+    //       _this.initSq26x1Chart();
+    //       _this.initSq26x2Chart();
+    //     })();
+    // };
+  },
+  methods: {
+    initGzbgChart() {
+      if (one != null && one != "" && one != undefined) {
+        one.dispose();//销毁
+      }
+      one = this.$echarts.init(
+        document.getElementById("gzbgChart")
+      );
+      one.setOption({
+        tooltip: {
+          trigger: "item",
+        },
+        color: ["#71C8FF", "#FC5C5C"],
+        series: [
+          {
+            type: "pie",
+            radius: "70%",
+            itemStyle: {
+              borderColor: "#fff",
+              borderWidth: 2,
+            },
+            label: {
+              fontSize: 14,
+              formatter: "{b}{v|\n{d}%}",
+              rich: {
+                v: {
+                  color: "#1492ff",
+                  fontSize: 14,
+                },
+              },
+            },
+            data: [
+              { value: 128, name: "已完成工作" },
+              { value: 39, name: "未完成工作" },
+            ],
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        one.resize();
+      });
+    },
+    initSq26x1Chart() {
+      if (two != null && two != "" && two != undefined) {
+        two.dispose();//销毁
+      }
+      two = this.$echarts.init(document.getElementById("sq26x1"));
+      two.setOption({
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["累计完成数", "目标值"],
+          // textStyle: {
+          //   fontSize: 14
+          // }
+        },
+        color: ["#1492FF", "#6dd933"],
+        grid: {
+          show: false,
+          top: "60",
+          bottom: "120",
+          right: "60",
+          left: "60",
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "杭州-淳安县",
+              "温州-永嘉县",
+              "温州-苍南县",
+              "温州-平阳县",
+              "温州-文成县",
+              "温州-泰顺县",
+              "金华-磐安县",
+              "金华-武义县",
+              "衢州-柯城区",
+              "衢州-衢江区",
+              "衢州-江山市",
+              "衢州-龙游县",
+              "衢州-常山县",
+              "衢州-开化县",
+              "台州-天台县",
+              "台州-仙居县",
+              "台州-三门县",
+              "丽水-莲都区",
+              "丽水-龙泉市",
+              "丽水-遂昌县",
+              "丽水-松阳县",
+              "丽水-青田县",
+              "丽水-云和县",
+              "丽水-庆元县",
+              "丽水-缙云县",
+              "丽水-景宁县",
+            ],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel: {
+              show: true, //坐标轴标签
+              color: "#666",
+              fontSize: 14,
+              // interval: 0,
+              formatter: (value) => {
+                return value.split("").join("\n");
+              },
+            },
+          },
+        ],
+        //设置两个y轴，左边显示数量，右边显示概率
+        yAxis: [
+          {
+            type: "value",
+            name: "累计完成数",
+            nameTextStyle: {
+              color: "#333",
+              fontSize: 14,
+              lineHeight: 40,
+            },
+            show: true,
+            interval: 50,
+          },
+          {
+            type: "value",
+            name: "目标值",
+            show: false,
+            interval: 10,
+          },
+        ],
+        //每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
+        series: [
+          {
+            name: "累计完成数",
+            type: "bar",
+            data: [
+              175, 165, 135, 166, 145, 155, 156, 142, 178, 169, 124, 136, 142,
+              150, 135, 105, 100, 124, 145, 132, 107, 156, 156, 154, 167, 124,
+            ],
+            barWidth: "50%",
+            label: {
+              show: false, // 柱子顶部的数值
+              position: "top",
+              fontSize: 12,
+              color: "#333",
+            },
+            itemStyle: {
+              normal: {
+                color: (p) => {
+                  let indexs = []; // 存放未达标值
+                  let mbzData = [
+                    95, 165, 185, 166, 145, 155, 156, 142, 138, 169, 170, 136,
+                    142, 150, 125, 175, 100, 124, 145, 132, 167, 156, 156, 154,
+                    167, 124,
+                  ];
+                  mbzData.forEach((ele, index) => {
+                    if (p.dataIndex == index && p.value < ele) {
+                      indexs.push(index);
+                    }
+                  });
+                  if (indexs.includes(p.dataIndex)) {
+                    return "#d40000";
+                  } else {
+                    return "#1492FF";
+                  }
+                },
+              },
+            },
+          },
+          {
+            name: "目标值",
+            type: "line",
+            yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
+            data: [
+              95, 165, 185, 166, 145, 155, 156, 142, 138, 169, 170, 136, 142,
+              150, 125, 175, 100, 124, 145, 132, 167, 156, 156, 154, 167, 124,
+            ],
+            symbolSize: 8,
+            itemStyle: {
+              normal: {
+                color: "#6dd933",
+              },
+            },
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        two.resize();
+      });
+    },
+    initSq26x2Chart() {
+      if (three != null && three != "" && three != undefined) {
+        three.dispose();//销毁
+      }
+      three = this.$echarts.init(document.getElementById("sq26x2"));
+      three.setOption({
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["累计完成数", "目标值"],
+        },
+        color: ["#1492FF", "#6dd933"],
+
+        grid: {
+          show: false,
+          top: "30",
+          bottom: "120",
+          right: "60",
+          left: "60",
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "杭州-淳安县",
+              "温州-永嘉县",
+              "温州-苍南县",
+              "温州-平阳县",
+              "温州-文成县",
+              "温州-泰顺县",
+              "金华-磐安县",
+              "金华-武义县",
+              "衢州-柯城区",
+              "衢州-衢江区",
+              "衢州-江山市",
+              "衢州-龙游县",
+              "衢州-常山县",
+              "衢州-开化县",
+              "台州-天台县",
+              "台州-仙居县",
+              "台州-三门县",
+              "丽水-莲都区",
+              "丽水-龙泉市",
+              "丽水-遂昌县",
+              "丽水-松阳县",
+              "丽水-青田县",
+              "丽水-云和县",
+              "丽水-庆元县",
+              "丽水-缙云县",
+              "丽水-景宁县",
+            ],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisTick: {
+              show: true,
+            },
+            axisLabel: {
+              show: true, //坐标轴标签
+              color: "#666",
+              fontSize: 14,
+              // interval: 0,
+              formatter: (value) => {
+                return value.split("").join("\n");
+              },
+            },
+          },
+        ],
+        //设置两个y轴，左边显示数量，右边显示概率
+        yAxis: [
+          {
+            type: "value",
+            name: "累计完成数",
+            show: true,
+            interval: 50,
+          },
+          {
+            type: "value",
+            name: "目标值",
+            show: false,
+            interval: 10,
+          },
+        ],
+        //每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
+        series: [
+          {
+            name: "累计完成数",
+            type: "bar",
+            data: [
+              8, 4.5, 5, 5.6, 4.5, 3.5, 7, 2.8, 4.5, 5, 7, 5.5, 2, 5, 4, 5, 7,
+              5, 5, 6, 5, 3.7, 4.4, 3.4, 2, 4,
+            ],
+            barWidth: "50%",
+            label: {
+              show: false, // 柱子顶部的数值
+              position: "top",
+              fontSize: 12,
+              color: "#333",
+            },
+            itemStyle: {
+              normal: {
+                color: (p) => {
+                  let indexs = []; // 存放未达标值
+                  let mbzData = [
+                    7, 5, 5, 6, 4, 5, 6, 2, 5, 5, 5, 6, 2, 5, 6, 5, 6, 4, 3, 2,
+                    3, 3, 4, 4, 2, 4,
+                  ];
+                  mbzData.forEach((ele, index) => {
+                    if (p.dataIndex == index && p.value < ele) {
+                      indexs.push(index);
+                    }
+                  });
+                  if (indexs.includes(p.dataIndex)) {
+                    return "#d40000";
+                  } else {
+                    return "#1492FF";
+                  }
+                },
+              },
+            },
+          },
+          {
+            name: "目标值",
+            type: "line",
+            yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
+            data: [
+              7, 5, 5, 6, 4, 5, 6, 2, 5, 5, 5, 6, 2, 5, 6, 5, 6, 4, 3, 2, 3, 3,
+              4, 4, 2, 4,
+            ],
+            symbolSize: 8,
+            itemStyle: {
+              normal: {
+                color: "#6dd933",
+              },
+            },
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        three.resize();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@media screen and(min-width:1200px) {
+  #app {
+    width: 1200px;
+    background: #efefef !important;
+  }
+  .main {
+    width: 1200px !important;
+  }
+}
+@media screen and(max-width:1200px) {
+  .main {
+    width: calc(100% - 40px);
+  }
+}
+.main {
+ 
+  margin: 0px auto;
+  padding: 20px 0px;
+}
+.region {
+  .box1_r {
+    box-sizing: border-box;
+    .progres {
+      text-align: left;
+      margin-bottom: 30px;
+      h5 {
+        font-size: 16px;
+      }
+      & > p {
+        padding: 10px 0;
+        & > span {
+          margin: 0 5px;
+          font-size: 18px;
+          color: #1492ff;
+        }
+      }
+      .probar {
+        display: flex;
+        align-items: center;
+        justify-content: left;
+        .el-progress {
+          display: flex;
+          align-items: baseline;
+          width: 88%;
+          .el-progress-bar {
+            width: 90%;
+            margin-left: 20px;
+          }
+        }
+      }
+    }
+  }
+  .box2_l {
+    width: 100%;
+    .ctitle {
+      padding: 0 0 20px 20px;
+      font-weight: 700;
+    }
+    h4{
+      font-size: 18px;
+      font-weight: normal;
+      margin: 12px 0;
+    }
+  }
+}
+</style>
--- a/jingning_vue/src/views/Sxh.vue
+++ b/jingning_vue/src/views/Sxh.vue
+<template>
+  <div class="main">
+    <div class="top">
+      <div class="top-title">
+        任务落实
+      </div>
+      <table class="w100 table" style="border-collapse:collapse;">
+        <thead>
+          <tr>
+            <th width="50%" align="left">
+              任务名称
+            </th>
+            <th width="30%" align="left">
+              牵头单位
+            </th>
+            <th align="left">
+              任务状态
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th align="left">
+              <p class="p">扩大优质产品进口</p>
+            </th>
+            <th align="left">
+              <p class="p">景宁商务局</p>
+            </th>
+            <th align="left">
+              <img src="../assets/images/flag_red.png" class="fl zhihou-img" />
+              <p class="p">滞后</p>
+            </th>
+          </tr>
+          <tr>
+            <th align="left">
+              <p class="p">扩大优质产品进口</p>
+            </th>
+            <th align="left">
+              <p class="p">景宁商务局</p>
+            </th>
+            <th align="left">
+              <img src="../assets/images/flag_red.png" class="fl zhihou-img" />
+              <p class="p">滞后</p>
+            </th>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="biao">
+      <ul class="clearfix">
+        <li class="fl">
+          <div class="clearfix">
+            <h3 class="fl">外贸智稳出口额</h3>
+            <p class="fl">（2021年1-6月）</p>
+          </div>
+          <div class="tu-biao" id="container1" style="max-width: 100%;height: 280px;"></div>
+        </li>
+        <li class="fr">
+          <div class="clearfix">
+            <h3 class="fl">实际使用外资完成进度</h3>
+            <p class="fl">（2021年1-6月）</p>
+          </div>
+          <div class="tu-biao" id="container2" style="max-width: 100%;height: 280px;"></div>
+        </li>
+      </ul>
+      <ul>
+        <li class="fl">
+          <div class="clearfix">
+            <h3 class="fl">服务贸易进出口总额</h3>
+            <p class="fl">（2021年1-6月）</p>
+          </div>
+          <div class="tu-biao" id="container3" style="max-width: 100%;height: 280px;"></div>
+        </li>
+        <li class="fr">
+          <div class="clearfix">
+            <h3 class="fl">社会消费品零售总额增速</h3>
+            <p class="fl">（2021年1-6月）</p>
+          </div>
+          <div class="tu-biao" id="container4" style="max-width: 100%;height: 280px;"></div>
+        </li>
+      </ul>
+      <div style="clear: both;"></div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+const label_one = ["一月", "二月", "三月", "四月", "五月", "六月"];
+const label_two = ["一月", "二月", "三月", "四月", "五月", "六月"];
+const label_three = ["一月", "二月", "三月", "四月", "五月", "六月"];
+const label_four = ['1-2月','1-3月','1-4月','1-5月'];
+
+const data_one = [0,1923.05,5581.19,8297.85,,];
+const data_two = [5.2, {
+					value: 13.2,
+					itemStyle: {
+						color: '#00E0A6'
+					}
+				}, 11.2, 13.2,{
+					value: 6.9,
+					itemStyle: {
+						color: '#FC5C5C'
+					}
+				}, 3.9, 13.8]
+const data_three =[5.2, {
+					value: 13.2,
+					itemStyle: {
+						color: '#00E0A6'
+					}
+				}, 11.2, 13.2,{
+					value: 6.9,
+					itemStyle: {
+						color: '#FC5C5C'
+					}
+				}, 3.9, 13.8]
+const data_four = [20.7,36.3,24.1,11.9];
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  mounted() {
+    this.initCharts1();
+  },
+  methods: {
+    initCharts1() {
+      var chartDom1 = document.getElementById("container1");
+      var chartDom2 = document.getElementById("container2");
+      var chartDom3 = document.getElementById("container3");
+      var chartDom4 = document.getElementById("container4");
+      var myChart1 = this.$echarts.init(chartDom1);
+      var myChart2 = this.$echarts.init(chartDom2);
+      var myChart3 = this.$echarts.init(chartDom3);
+      var myChart4 = this.$echarts.init(chartDom4);
+      var option;
+
+      option = {
+        color: ["#2690f3"],
+        xAxis: {
+          type: "category",
+          data: label_one,
+          axisTick: {
+            // 隐藏刻度线
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#dddddd", // 坐标轴颜色
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#333", //坐标值得具体的颜色
+              fontSize: 14,
+            },
+            interval: 0,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "亿元",
+          splitLine: false, // 网格线
+          axisLine: {
+            lineStyle: {
+              color: "#333333",
+            },
+          },
+        },
+        series: [
+          {
+            data: data_one,
+            type: "bar",
+            label: {
+              // 在图形上显示每个数据
+              show: true,
+              position: "top",
+            },
+            barWidth: 25, // 柱子宽度
+          },
+        ],
+        grid: {
+          left: "2%",
+          right: "2%",
+          bottom: "2%",
+          containLabel: true,
+        },
+      };
+      var y_name_4="%";
+      var option_one = JSON.parse(JSON.stringify(option));
+      option_one.xAxis.data=label_one
+      option_one.series[0].data=data_one;
+
+      
+      var option_two = JSON.parse(JSON.stringify(option));
+      option_two.xAxis.data=label_two
+      option_two.series[0].data=data_two;
+
+      var option_three = JSON.parse(JSON.stringify(option));
+
+      option_three.xAxis.data=label_three
+      option_three.series[0].data=data_three;
+
+
+      var option_four = JSON.parse(JSON.stringify(option));
+
+      option_four.xAxis.data=label_four
+      option_four.series[0].data=data_four;
+      option_four.yAxis.name=y_name_4;
+
+      option_one && myChart1.setOption(option_one);
+      option_two && myChart2.setOption(option_two);
+      option_three && myChart3.setOption(option_three);
+      option_four && myChart4.setOption(option_four);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  html,
+  body {
+    background-color: #F2F3F5;
+  }
+
+  .main {
+    width: calc(100% - 30px);
+    max-width: 1200px;
+    margin: 0 auto 0px;
+    padding: 25px 0;
+  }
+
+  .top {
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 10px 0 50px;
+    box-shadow: 0 0 10px #E6EBF5;
+    border-radius: 5px;
+  }
+
+  .top-title {
+    line-height: 30px;
+    padding: 0 10px 10px
+  }
+
+  .w100 {
+    width: 100%;
+  }
+
+  .table thead th {
+    background-color: #F5F7F9;
+    line-height: 50px;
+    font-size: 18px;
+  }
+
+  .table tr th:first-child {
+    padding-left: 10px;
+  }
+
+  .table tr th p {
+    line-height: 50px;
+    font-size: 14px;
+  }
+
+  .table tr {
+    border-bottom: solid 1px #DFE6EC;
+  }
+
+  .p {
+    font-weight: normal;
+  }
+
+  .zhihou-img {
+    position: relative;
+    top: 12px;
+    margin: 0 5px 0 5px;
+  }
+
+  .biao {
+    margin-top: 20px;
+  }
+
+  .biao ul {
+    margin-bottom: 20px;
+  }
+
+  .biao li {
+    width: 49%;
+    background-color: #fff;
+    box-shadow: 0 0 10px #E6EBF5;
+    border-radius: 5px;
+    padding: 10px;
+    box-sizing: border-box;
+    font-size: 16px;
+  }
+
+  .biao li p {
+    position: relative;
+    top: 7px;
+    font-size: 14px;
+  }
+</style>
--- a/jingning_vue/src/views/Xczx.vue
+++ b/jingning_vue/src/views/Xczx.vue
+<template>
+  <div class="main">
+    <div class="mintop">
+      <p class="c3 bold1 fs24 b">基本情况</p>
+      <div class="topcon flex between mt12">
+        <div class="flex1">
+          <div class="bgedf c149 h50 flex jcenter acenter fs20 b">生态农业</div>
+          <div class="h90 bgf78 mt12 p20 column between">
+            <p class="fs18 b">生猪保供 (万头)</p>
+            <div class="flex">
+              <div class="w50">
+                <span>任务数</span>
+                <span class="c149 ml20 b">2.3</span>
+              </div>
+              <div class="w50">
+                <span class="ml20">完成数</span>
+                <span class="c149 ml20 b">2.3012</span>
+              </div>
+            </div>
+            <div class="flex acenter prog">
+              <span class="mr20">进度</span>
+              <div class="w75">
+                <el-progress
+                  :percentage="Number(((2.3012 / 2.3) * 100).toFixed(2))"
+                  class="flex acenter"
+                  :stroke-width="10"
+                ></el-progress>
+              </div>
+            </div>
+          </div>
+          <div class="h90 bgf78 mt12 p20 column between">
+            <p class="fs18 b">粮食自给 (万亩)</p>
+            <div class="flex">
+              <div class="w50">
+                <span>任务数</span>
+                <span class="ml20 c149 b">9.6</span>
+              </div>
+              <div class="w50">
+                <span class="ml20">完成数</span>
+                <span class="ml20 c149 b">7.51</span>
+              </div>
+            </div>
+            <div class="flex acenter prog">
+              <span class="mr20">进度</span>
+              <div class="w75">
+                <el-progress
+                  :percentage="Number(((7.51 / 9.6) * 100).toFixed(2))"
+                  class="flex acenter"
+                  :stroke-width="10"
+                ></el-progress>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex1 ml12 mr12">
+          <div class="bgf0f c15b h50 flex jcenter acenter fs20 b">花园乡村</div>
+          <div class="h90 bgf78 mt12 p20 column between">
+            <p class="fs18 b">花园乡村数 (个)</p>
+            <div class="flex">
+              <div class="w50">
+                <span>任务数</span>
+                <span class="c15b ml20 b">66</span>
+              </div>
+              <div class="w50">
+                <span class="ml20">完成数</span>
+                <span class="c15b ml20 b">23</span>
+              </div>
+            </div>
+            <div class="flex acenter flog">
+              <span class="mr20">进度</span>
+              <div class="w75">
+                <el-progress
+                  :percentage="Number(((23 / 66) * 100).toFixed(2))"
+                  class="flex acenter"
+                  :stroke-width="10"
+                ></el-progress>
+              </div>
+            </div>
+          </div>
+          <div class="h90 bgf78 mt12 p20 column between">
+            <p class="fs18 b">村集体经济 (万元)</p>
+            <div>
+              <div class="flex">
+                <!-- w60 -->
+                <div class="flex2">
+                  <!-- w75 -->
+                  <div class="w73">
+                    <p>村集体经济总收入</p>
+                    <p class="b c15b mt12 textCenter">950.502508</p>
+                  </div>
+                </div>
+                <div class="textCenter flex1">
+                  <p>同比增长</p>
+                  <p class="b c15b mt12">-28.83%</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex1">
+          <div class="bgff5 cff8 h50 flex jcenter acenter fs20 b">共同富裕</div>
+          <div class="h90 bgf78 mt12 p20 column between">
+            <p class="fs18 b">低收入农民收入 (万元)</p>
+            <div class="flex">
+              <p class="w65">家庭人均可支配收入</p>
+              <p class="cff8 b">32,745</p>
+            </div>
+            <div class="flex">
+              <p class="w65">收入增幅</p>
+              <p class="cff8 b">5%</p>
+            </div>
+          </div>
+          <div class="h90 bgf78 mt12 p20 column between">
+            <p class="fs18 b">农民收入 (万元)</p>
+            <div class="flex">
+              <p class="w65">农民人均可支配收入</p>
+              <p class="cff8 b">122,745</p>
+            </div>
+            <div class="flex">
+              <p class="w65">收入增幅</p>
+              <p class="cff8 b">10%</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mincen mt20">
+      <p class="c3 bold1 fs24 b">分析预警</p>
+      <div class="flex between mt12">
+        <div class="mr20 w50">
+          <div class="flex acenter">
+            <div class="s_line bg149 mr12"></div>
+            <div class="b fs18">任务完成情况</div>
+          </div>
+          <div class="flex around acenter">
+            <div
+              id="biao"
+              style="height: 170px; width: 170px"
+              class="flex"
+            ></div>
+            <div class="flex column jcenter textCenter">
+              <p class="b">总任务</p>
+              <p class="mt12 c149 b">711</p>
+            </div>
+            <div class="flex column jcenter">
+              <div class="flex acenter jcenter">
+                <div class="bg15b icon14 mr20"></div>
+                <div class="icon110 flex between acenter">
+                  <span class="c9">完成</span><span class="c0 b c6">458</span
+                  ><span class="c9"> 项</span>
+                </div>
+              </div>
+              <div class="flex acenter mt30">
+                <div class="bgff6 icon14 mr20"></div>
+                <div class="icon110 flex between acenter">
+                  <span class="c9">预警</span><span class="c0 b c6">75</span
+                  ><span class="c9"> 项</span>
+                </div>
+              </div>
+              <div class="flex acenter mt30">
+                <div class="bg149 icon14 mr20"></div>
+                <div class="icon110 flex between acenter">
+                  <span class="c9">滞后</span><span class="c0 b c6">183</span
+                  ><span class="c9"> 项</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="w50">
+          <div class="flex acenter">
+            <div class="s_line bg149 mr12"></div>
+            <div class="b fs18">低收农户返贫</div>
+          </div>
+          <div class="flex around mr30">
+            <div class="textCenter mt40 w30">
+              <p class="b">共返贫</p>
+              <p class="c149 mt30 b">71</p>
+            </div>
+            <div class="xian flex wrap">
+              <div class="icon140 flex between ml40 mt40">
+                <span class="c9">遂昌县</span>
+                <span class="b c6">22</span>
+                <span class="c9">户</span>
+              </div>
+              <div class="icon140 flex between ml40 mt40">
+                <span class="c9">庆元县</span>
+                <span class="b c6">10</span>
+                <span class="c9">户</span>
+              </div>
+              <div class="icon140 flex between ml40 mt40">
+                <span class="c9">云和县</span>
+                <span class="b c6">31</span>
+                <span class="c9">户</span>
+              </div>
+              <div class="icon140 flex between ml40 mt40">
+                <span class="c9">松阳县</span>
+                <span class="b c6">8</span>
+                <span class="c9">户</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="minfot mt20">
+      <p class="c3 bold1 fs24 b">搬迁计划人数及进度</p>
+      <div class="xczx">
+        <div class="flex year">
+          <div class="icon160"></div>
+          <div class="flex around acenter year mt20">
+            <div class="borderR bgff5 cff8 b">2019</div>
+            <div class="borderR bgedf c149 b">2020</div>
+            <div class="borderR bgf0f c15b b">2021</div>
+          </div>
+        </div>
+        <el-table
+          :data="tableData"
+          stripe
+          :header-cell-style="{ 'text-align': 'center' }"
+          :cell-style="{ 'text-align': 'center' }"
+          :row-class-name="tabRowClassName"
+        >
+          <el-table-column prop="area" label="地区" width="140">
+            <template slot-scope="scope">
+              <span style="font-weight: 600">{{ scope.row.area }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="num1" label="人数"> </el-table-column>
+          <el-table-column prop="progress1" label="进度">
+            <template slot-scope="scope">
+              <span style="color: #ff6b00">{{ scope.row.progress1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="num2" label="人数"> </el-table-column>
+          <el-table-column prop="progress2" label="进度">
+            <template slot-scope="scope">
+              <span style="color: #149cff">{{ scope.row.progress2 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="num3" label="人数"> </el-table-column>
+          <el-table-column prop="progress3" label="进度" class="c15b">
+            <template slot-scope="scope">
+              <span style="color: #15be50">{{ scope.row.progress3 }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+let one, two, three, four;
+export default {
+  data() {
+    return {
+      uname: "yht",
+      topinfo: [],
+      tableData: [
+        {
+          area: "庆元",
+          num1: 2158,
+          progress1: "63%",
+          num2: 3209,
+          progress2: "74%",
+          num3: 4085,
+          progress3: "86%",
+        },
+        {
+          area: "景宁",
+          num1: 2284,
+          progress1: "73%",
+          num2: 2498,
+          progress2: "84%",
+          num3: 3098,
+          progress3: "96%",
+        },
+        {
+          area: "龙泉",
+          num1: 3077,
+          progress1: "64%",
+          num2: 3658,
+          progress2: "74%",
+          num3: 4361,
+          progress3: "85%",
+        },
+        {
+          area: "丽水",
+          num1: 28253,
+          progress1: "62%",
+          num2: 36501,
+          progress2: "73%",
+          num3: 30733,
+          progress3: "83%",
+        },
+      ],
+    };
+  },
+  mounted() {
+    let _this = this;
+    this.init();
+    window.onresize = () => {
+      return (() => {
+        _this.init();
+      })();
+    };
+  },
+  methods: {
+    tabRowClassName({ row, rowIndex }) {
+      let index = rowIndex + 1;
+      if (index % 2 == 0) {
+        return "warning-row";
+      }
+    },
+    init() {
+      if (one != null && one != "" && one != undefined) {
+        one.dispose(); //销毁
+      }
+      one = this.$echarts.init(document.getElementById("biao"));
+      one.setOption({
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          top: "40%",
+          right: "0",
+          width: "10px",
+        },
+        color: ["#15be50", "#ff6b00", "#149cff"],
+        series: [
+          {
+            name: "访问来源",
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: "40",
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [{ value: 458 }, { value: 75 }, { value: 183 }],
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 1000px) and (max-width: 1200px) {
+  .main {
+    width: 100%;
+    background-color: #f2f3f5;
+    /* width: 1200px; */
+    margin: 0px auto;
+    padding: 30px 0;
+  }
+  .mintop,
+  .mincen,
+  .minfot {
+    width: 96%;
+    /* width: 1160px; */
+    border-radius: 4px;
+    padding: 20px;
+    background: #fff;
+  }
+  /* table {
+        width: 100% !important;
+    } */
+  .xian {
+    width: 78%;
+  }
+  .xian div {
+    width: 110px;
+    margin-right: 12px;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .main {
+    background-color: #f2f3f5;
+    width: 1200px;
+    margin: 0px auto;
+    padding: 30px 0;
+  }
+  .mintop {
+    width: 1160px;
+    border-radius: 4px;
+    padding: 20px;
+    background: #fff;
+  }
+  .mincen {
+    width: 1160px;
+    border-radius: 4px;
+    padding: 20px;
+    background: #fff;
+  }
+  .minfot {
+    width: 1160px;
+    border-radius: 4px;
+    padding: 20px;
+    background: #fff;
+  }
+}
+.main {
+  background-color: #f2f3f5;
+  /* width: 1200px; */
+  margin: 0px auto;
+  padding: 30px 0;
+}
+.mintop {
+  /* width: 1160px; */
+  border-radius: 4px;
+  padding: 20px;
+  background: #fff;
+}
+.mincen {
+  /* width: 1160px; */
+  border-radius: 4px;
+  padding: 20px;
+  background: #fff;
+}
+.minfot {
+  /* width: 1160px; */
+  border-radius: 4px;
+  padding: 20px;
+  background: #fff;
+}
+.p20 {
+  padding: 20px;
+}
+.h50 {
+  height: 50px;
+}
+.h140 {
+  height: 140px;
+}
+.h90 {
+  height: 90px;
+}
+.icon210 {
+  width: 210px;
+}
+.icon400 {
+  width: 400px;
+}
+.icon140 {
+  width: 140px;
+}
+.icon160 {
+  width: 160px;
+}
+.icon110 {
+  width: 110px;
+}
+.s_line {
+  width: 8px;
+  height: 25px;
+  border-radius: 5px;
+}
+.year {
+  width: 100%;
+}
+.borderR {
+  width: 100px;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+  border-radius: 20px;
+}
+.el-table .warning-row {
+  background: #edf4ff !important;
+}
+.el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #edf4ff !important;
+}
+.el-table th.is-leaf {
+  border: none !important;
+}
+.w30 {
+  width: 30%;
+}
+.w50 {
+  width: 50%;
+}
+.w65 {
+  width: 65%;
+}
+.w60 {
+  width: 60%;
+}
+.w70 {
+  width: 70%;
+}
+.w73 {
+  width: 73%;
+}
+.w75 {
+  width: 75%;
+}
+</style>
+<style>
+.prog .el-progress__text {
+  color: #149cff;
+  font-size: 14px !important;
+}
+.flog .el-progress__text {
+  color: #15be50;
+  font-size: 14px !important;
+}
+.flog .el-progress-bar__inner {
+  background: #15be50;
+}
+.xczx .el-table .warning-row {
+  background: #edf4ff !important;
+}
+.xczx .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: #edf4ff !important;
+}
+</style>
\ No newline at end of file
--- a/jingning_vue/src/views/Yshj.vue
+++ b/jingning_vue/src/views/Yshj.vue
+<template>
+  <div class="main">
+    <div class="minHeader">
+      <div>
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: '/' }"
+            >营商环境市场活力</el-breadcrumb-item
+          >
+        </el-breadcrumb>
+      </div>
+      <div class="flex mt12 acenter between">
+        <div class="flex acenter">
+          <p class="b fs24 mr12 c3">营商环境市场活力</p>
+          <p class="kuai bradius4 c6dd bgf0f flex acenter jcenter h22">
+            <span
+              class="el-icon-d-arrow-right icon16 cril flex acenter jcenter"
+            ></span>
+            <span class="fs14">正常</span>
+          </p>
+        </div>
+        <div>牵头单位: {{ myCityName }}发展和改革局</div>
+      </div>
+    </div>
+    <div class="mt20 getgov">
+      <el-tabs type="border-card" class="minTop" @tab-click="handleClick1">
+        <el-tab-pane label="政府工作报告任务落实" class="flex">
+          <div class="w30 flex acenter jcenter gavo">
+            <p class="icon82 mr20">截止四月底前完成进度</p>
+            <el-progress
+              type="circle"
+              :percentage="40.75"
+              :stroke-width="10"
+              :width="100"
+            >
+            </el-progress>
+          </div>
+          <div class="w70 flex acenter around">
+            <div class="flex column acenter">
+              <p class="b fs20 c3">14</p>
+              <p class="c6dd bgf0f fs14 tapd b">正常</p>
+            </div>
+            <div class="bdash"></div>
+            <div class="flex column acenter">
+              <p class="b fs20 c3">1</p>
+              <p class="bgff5 cff8 fs14 tapd b">预警</p>
+            </div>
+            <div class="bdash"></div>
+            <div class="flex column acenter">
+              <p class="b fs20 c3">0</p>
+              <p class="bgffe cd4 fs14 tapd b">滞后</p>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="减负降本" class="bgf23 pb20">
+          <el-row :gutter="20">
+            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
+              <div class="bgf bradius4 p20 bords">
+                <div class="flex acenter between">
+                  <div class="fs22 b c3">本年减负降本概览</div>
+                  <div class="flex acenter">
+                    <div class="c149">查看详情</div>
+                    <i class="el-icon-arrow-right c149"></i>
+                  </div>
+                </div>
+                <div class="mt30 mb15">
+                  <el-row class="flex acenter jcenter">
+                    <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="12">
+                      <div>
+                        <div
+                          v-for="(item, index) in allList"
+                          :key="index"
+                          class="mt20"
+                        >
+                          <div>
+                            <span class="b">·</span>
+                            <span>{{ item.title }}</span>
+                          </div>
+                          <div class="flex acenter mt8">
+                            <span class="c149 fs22 ml12 mr5">{{
+                              item.num
+                            }}</span>
+                            <span>{{ item.dan }}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </el-col>
+                    <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="12">
+                      <div class="proges">
+                        <el-progress
+                          type="circle"
+                          :percentage="57.9"
+                          :stroke-width="Number(12)"
+                          :width="Number(150)"
+                          color="#1492ff"
+                          :show-text="false"
+                        ></el-progress>
+                        <div class="flex acenter column protit">
+                          <div class="c149">
+                            <span class="fs22 b">57.9</span>
+                            <span class="b">%</span>
+                          </div>
+                          <div class="fs12 c3">任务完成进度</div>
+                        </div>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
+              <div class="bgf bradius4 p20 bords">
+                <div class="flex acenter between">
+                  <div class="fs22 b c3">本年减负降本趋势</div>
+                  <div class="flex acenter">
+                    <div class="c6">单位: 亿元</div>
+                  </div>
+                </div>
+                <div>
+                  <div class="mt12">
+                    <div
+                      id="main1"
+                      style="max-width: 100%; height: 345px"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
+              <div class="bgf bradius4 p20 bords">
+                <div class="flex acenter between">
+                  <div class="fs22 b c3">本年减负降本额构成</div>
+                  <div class="flex acenter">
+                    <div class="c6">单位: 亿元</div>
+                  </div>
+                </div>
+                <div>
+                  <div class="mt12">
+                    <div
+                      id="main2"
+                      style="max-width: 100%; height: 345px"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
+              <div class="bgf bradius4 p20 bords">
+                <div class="flex acenter between">
+                  <div class="fs22 b c3">地市减负降本情况</div>
+                  <div class="flex acenter">
+                    <div class="c6">单位: 亿元</div>
+                  </div>
+                </div>
+                <div>
+                  <div class="mt12">
+                    <div
+                      id="main3"
+                      style="max-width: 100%; height: 345px"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
+              <div class="bgf bradius4 p20 bords">
+                <div class="flex acenter between">
+                  <div class="fs22 b c3">行业减负降本TOP10</div>
+                  <div class="flex acenter">
+                    <div class="c6">单位: 亿元</div>
+                  </div>
+                </div>
+                <div>
+                  <div class="mt12">
+                    <div
+                      id="main4"
+                      style="max-width: 100%; height: 345px"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="mt20">
+              <div class="bgf bradius4 p20 bords">
+                <div class="flex acenter between">
+                  <div class="fs22 b c3">部门减负降本情况</div>
+                  <div class="flex acenter">
+                    <div class="c6">单位: 亿元</div>
+                  </div>
+                </div>
+                <div>
+                  <div class="mt12">
+                    <div
+                      id="main5"
+                      style="max-width: 100%; height: 345px"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="民营经济发展监测" disabled>
+          <el-tooltip
+            class="item-tabs"
+            effect="light"
+            placement="top"
+            slot="label"
+          >                
+            <div slot="content"> 建设中</div>
+            <span>民营经济发展监测</span>
+          </el-tooltip>
+        </el-tab-pane>
+        <el-tab-pane label="无感检测" disabled>
+            <el-tooltip
+            class="item-tabs"
+            effect="light"
+            placement="top"
+            slot="label"
+          >                
+            <div slot="content"> 建设中</div>
+            <span> 无感检测</span>
+          </el-tooltip>
+        </el-tab-pane>
+      </el-tabs>
+      <p class="govtig fs14">营商环境市场活力综合应用定义</p>
+    </div>
+    <div class="market mt20">
+      <div class="flex between">
+        <div class="title">
+          <p class="fs24 b c3">营商环境市场化</p>
+          <p class="titbg"></p>
+        </div>
+        <div class="fs20 c3 b">8.70 <span class="c149">%</span></div>
+      </div>
+      <div class="mt20 flex between">
+        <div class="w49 bords mr20">
+          <p class="fs24 b c3 mt20 ml20">知识产权保护</p>
+          <div class="p20">
+            <p class="textCenter b fs18 c3">2021年每万人高价值发明专用有数</p>
+            <div class="flex between mt20">
+              <p>单位 (万人)</p>
+              <p>知识产权案件实际履行率 <span class="c3 b">68%</span></p>
+            </div>
+            <div class="zhan mt12">
+              <div id="container1" style="max-width: 100%; height: 280px"></div>
+            </div>
+          </div>
+        </div>
+        <div class="w49 bords">
+          <p class="fs24 b c3 mt20 ml20">企业金融支持服务</p>
+          <div class="flex between p20">
+            <div class="zhan1" id="map"></div>
+            <div class="w36 flex acenter">
+              <div class="w100">
+                <div>
+                  <p class="c149 bborder b fs18">6000 亿元</p>
+                  <p class="c9">浙里掌上贷累计</p>
+                  <p class="c9">服务企业授信金额</p>
+                </div>
+                <div class="mt50">
+                  <p class="bborder c15b b fs18">678 家</p>
+                  <p class="c9">境内外上市公司数量</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="market mt20">
+      <div class="flex between">
+        <div class="title">
+          <p class="fs24 b c3">营商环境法制化</p>
+          <p class="titbg"></p>
+        </div>
+        <div class="fs20 c3 b">34.8 <span class="c149">%</span></div>
+      </div>
+      <p class="mborder"></p>
+      <div>
+        <div class="mt30">
+          <p class="textCenter fs24 b c3">平台经济智能管理</p>
+          <div class="flex around mt12">
+            <div class="textCenter icon300 bgedf flex jcenter column bradius2">
+              <p class="c149 fs20 b">998条</p>
+              <p class="fs16 c6 mt5">网络交易风险检测发现</p>
+            </div>
+            <div class="textCenter icon300 bgf0f flex jcenter column bradius2">
+              <p class="c15b fs20 b">75%</p>
+              <p class="fs16 c6 mt5">网络交易风险闭环处理率</p>
+            </div>
+            <div class="textCenter icon300 bgff5 flex jcenter column bradius2">
+              <p class="cff8 fs20 b">233个</p>
+              <p class="fs16 c6 mt5">实施反垄断合规辅导的重点企业数量</p>
+            </div>
+          </div>
+        </div>
+        <div class="mt30">
+          <p class="textCenter fs24 b c3">信用评价、监管和惩罚</p>
+          <div class="flex around mt12">
+            <div class="w45">
+              <div class="b c3">
+                <span>·</span>
+                <span>严重失信企业情况</span>
+              </div>
+              <div class="flex around mt12">
+                <div class="flex column acenter">
+                  <div class="mincon">
+                    <el-progress
+                      type="circle"
+                      :percentage="90"
+                      color="#37cc6a"
+                      :stroke-width="10"
+                      :width="100"
+                      :show-text="false"
+                    >
+                    </el-progress>
+                    <img
+                      src="../assets/images/icon.png"
+                      style="
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                      "
+                    />
+                  </div>
+                  <p class="c15b mt5 b">90%</p>
+                  <p class="c3">目标值</p>
+                </div>
+                <div class="flex column acenter">
+                  <div class="mincon">
+                    <el-progress
+                      type="circle"
+                      :percentage="70"
+                      color="#2690f3"
+                      :stroke-width="10"
+                      :width="100"
+                      :show-text="false"
+                    >
+                    </el-progress>
+                    <img
+                      src="../assets/images/icon.png"
+                      style="
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                      "
+                    />
+                  </div>
+                  <p class="c149 mt5 b">70%</p>
+                  <p class="c3">目标值</p>
+                </div>
+                <div class="flex column acenter icon100">
+                  <div class="mincon">
+                    <el-progress
+                      type="circle"
+                      :percentage="100"
+                      color="#ff8126"
+                      :stroke-width="10"
+                      :width="100"
+                      :show-text="false"
+                    >
+                    </el-progress>
+                    <img
+                      src="../assets/images/icon.png"
+                      style="
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                      "
+                    />
+                  </div>
+                  <p class="cff8 mt5 b">21522 个</p>
+                  <p class="c3 w65">严重失信企业总数</p>
+                </div>
+              </div>
+            </div>
+            <div class="w45">
+              <div class="b c3">
+                <span>·</span>
+                <span>行业信用监管</span>
+              </div>
+              <div class="p12">
+                <div>
+                  <div class="mb20">
+                    <div class="flex between c3 mb8">
+                      <p>目标覆盖率</p>
+                      <p class="b">100%</p>
+                    </div>
+                    <el-progress
+                      :stroke-width="10"
+                      :percentage="100"
+                      :show-text="false"
+                      color="#2690f3"
+                    ></el-progress>
+                  </div>
+                  <div class="mb20">
+                    <div class="flex between c3 mb8">
+                      <p>当前覆盖率</p>
+                      <p class="b">70%</p>
+                    </div>
+                    <el-progress
+                      :stroke-width="10"
+                      :percentage="70"
+                      :show-text="false"
+                      color="#37cc6a"
+                    ></el-progress>
+                  </div>
+                </div>
+                <div class="flex between">
+                  <div class="textCenter icon130 flex jcenter column bradius2">
+                    <p class="fs22 b">38</p>
+                    <p class="c149 bgedf fs16 mt5 h30">行业部门/个</p>
+                  </div>
+                  <div class="textCenter icon130 flex jcenter column bradius2">
+                    <p class="fs22 b">32</p>
+                    <p class="c15b fs16 bgf0f mt5 h30">已覆盖部门/个</p>
+                  </div>
+                  <div class="textCenter icon130 flex jcenter column bradius2">
+                    <p class="fs22 b">51%</p>
+                    <p class="cff8 fs16 bgff5 mt5 h30">平均问题发现率</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="market mt20">
+      <div class="flex between">
+        <div class="title">
+          <p class="fs24 b c3">营商环境便利化</p>
+          <p class="titbg"></p>
+        </div>
+        <div class="fs20 c3 b">24.5 <span class="c149">%</span></div>
+      </div>
+      <div class="mt20 flex between">
+        <div class="w49 bords mr20">
+          <p class="fs24 b c3 mt20 ml20">企业减负2500亿以上</p>
+          <div class="p20">
+            <p class="textCenter b fs18 c3">2021年每万人高价值发明专用有数</p>
+            <div class="flex between mt20">
+              <p>单位 (亿元)</p>
+              <div class="flex">
+                <div class="flex acenter c3">
+                  <p class="icon13 bg149"></p>
+                  <p>累计减负降本额</p>
+                </div>
+                <div class="flex acenter c3 ml20">
+                  <div class="sand">
+                    <p class="line bg37c"></p>
+                    <p class="bg37c crils"></p>
+                  </div>
+                  <p>当月减负降本额</p>
+                </div>
+              </div>
+            </div>
+            <div class="zhe mt12">
+              <div
+                id="container2"
+                style="max-width: 100%; width: 528px; height: 240px"
+              ></div>
+            </div>
+            <div class="c149 bgedf flex between mt12 h40 pl20 pr20">
+              <p>本年累计减负降本额</p>
+              <p class="b">203.1 亿元</p>
+            </div>
+            <div class="c15b bgf0f flex between mt12 h40 pl20 pr20">
+              <p>任务完成进度</p>
+              <p class="b">46.8%</p>
+            </div>
+          </div>
+        </div>
+        <div class="w49 bords">
+          <p class="fs24 b c3 mt20 ml20">发票电子化应用</p>
+          <div class="p20">
+            <p class="textCenter c3 b fs18">电子发票开具、应用进度</p>
+            <div class="flex column around mt40">
+              <div class="flex around acenter c3 piao1">
+                <el-progress
+                  type="circle"
+                  :percentage="98.12"
+                  color="#37cc6a"
+                  :stroke-width="13"
+                  :width="150"
+                ></el-progress>
+                <div class="mr60">
+                  <p>电子发票开具</p>
+                  <p class="mt12">今年目标<span class="b ml12">60%</span></p>
+                  <p class="mt12">当前进度<span class="b ml12">98.12%</span></p>
+                </div>
+              </div>
+              <div class="flex around acenter mt40 c3 piao2">
+                <el-progress
+                  type="circle"
+                  :percentage="79.42"
+                  color="#ff8126"
+                  :stroke-width="13"
+                  :width="150"
+                ></el-progress>
+                <div class="mr60">
+                  <p>电子发票开具</p>
+                  <p class="mt12">今年目标<span class="b ml12">200家</span></p>
+                  <p class="mt12">当前进度<span class="b ml12">79.42%</span></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="market mt20">
+      <div class="flex between">
+        <div class="title">
+          <p class="fs24 b c3">营商环境国际化</p>
+          <p class="titbg"></p>
+        </div>
+        <div class="fs20 c3 b">14.6 <span class="c149">%</span></div>
+      </div>
+      <div class="mt20 flex between">
+        <div class="w49 bords mr20">
+          <div class="flex aend between pr20">
+            <p class="fs24 b c3 mt20 ml20">“跨境贸易便利化”———通关时长</p>
+            <div class="flex fs14">
+              <p class="port active">进口</p>
+              <p class="port">出口</p>
+            </div>
+          </div>
+          <div class="p20">
+            <p class="textCenter b fs18 c3">进口通关时长近6个月趋势</p>
+            <div class="flex between mt20">
+              <p>单位 (小时)</p>
+              <div class="flex">
+                <div class="flex acenter c3 ml20">
+                  <div class="sand">
+                    <p class="line bgff8"></p>
+                    <p class="bgff8 crils"></p>
+                  </div>
+                  <p>通关时长趋势</p>
+                </div>
+              </div>
+            </div>
+            <div class="zhe mt12">
+              <div id="container3" style="max-width: 100%; height: 280px"></div>
+            </div>
+            <div class="c149 bgedf flex between mt12 h40 pl20 pr20">
+              <p>指标: 进口通关时长不超过17小时</p>
+            </div>
+            <div class="c15b bgf0f flex between mt12 h40 pl20 pr20">
+              <p>现状: 2021年4月, 全省进口通关时长为11.18小时</p>
+            </div>
+          </div>
+        </div>
+        <div class="w49 bords">
+          <p class="fs24 b c3 mt20 ml20">企业减负2500亿以上</p>
+          <div class="p20">
+            <p class="textCenter b fs18 c3">2021年每万人高价值发明专用有数</p>
+            <div class="flex between mt20">
+              <p>单位 (M/H)</p>
+              <div class="flex">
+                <div class="flex acenter c3">
+                  <p class="icon13 bg149"></p>
+                  <p>作业效率趋势</p>
+                </div>
+              </div>
+            </div>
+            <div class="zhe mt12">
+              <div id="container4" style="max-width: 100%; height: 280px"></div>
+            </div>
+            <div class="c149 bgedf flex between mt12 h40 pl20 pr20">
+              <p>指标: 港口单船所有岸桥作业效率不低于145M/H</p>
+            </div>
+            <div class="cd4 bgffe flex between mt12 h40 pl20 pr20">
+              <p>现状: 2021年4月, 全省港口单船所有岸桥作业效率不低于143.5M/H</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import geoJson from "@/assets/json/shi.json";
+let one, two, three, four, five;
+export default {
+  data() {
+    return {
+      myCityName: "景宁畲族自治县",
+      allList: [
+        {
+          title: "全年减负降本目标",
+          num: 2.71,
+          dan: "亿元",
+        },
+        {
+          title: "减负降本政策",
+          num: 24,
+          dan: "条",
+        },
+        {
+          title: "本年累计减负降本额",
+          num: 1.57,
+          dan: "亿元",
+        },
+        {
+          title: "惠及企业数量",
+          num: 42003,
+          dan: "家次",
+        },
+      ],
+    };
+  },
+  mounted() {
+    let _this = this;
+    this.init();
+    this.init2();
+    this.init3();
+    this.init4();
+    this.init5();
+    window.onresize = () => {
+      return (() => {
+        _this.init();
+        _this.init2();
+        _this.init3();
+        _this.init4();
+        _this.init5();
+      })();
+    };
+  },
+  methods: {
+    handleClick1(tab, event) {
+      console.log(tab);
+      this.$nextTick(function () {
+        this.initCharts1();
+        this.initCharts2();
+        this.initCharts3();
+        this.initCharts4();
+        this.initCharts5();
+      });
+    },
+    init() {
+      if (one != null && one != "" && one != undefined) {
+        one.dispose(); //销毁
+      }
+      one = this.$echarts.init(document.getElementById("container1"));
+      one.setOption({
+        color: ["#2690f3"],
+        xAxis: {
+          type: "category",
+          data: [
+            "莲都区",
+            "龙泉市",
+            "青田县",
+            "云和县",
+            "庆元县",
+            "缙云县",
+            "遂昌县",
+            "松阳县",
+            "静宁县",
+            "丽水开发县",
+          ],
+          axisTick: {
+            // 隐藏刻度线
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#dddddd", // 坐标轴颜色
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#333", //坐标值得具体的颜色
+              fontSize: 14,
+            },
+            interval: 0,
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: false, // 网格线
+          min: 0,
+          max: 25,
+          splitNumber: 5,
+          axisLine: {
+            lineStyle: {
+              color: "#333333",
+            },
+          },
+        },
+        series: [
+          {
+            data: [5.2, 13.2, 11.2, 13.2, 6.9, 3.9, 14.8, 13.2, 0.1, 9.4],
+            type: "bar",
+            label: {
+              // 在图形上显示每个数据
+              show: true,
+              position: "top",
+            },
+            barWidth: 13, // 柱子宽度
+          },
+        ],
+        grid: {
+          top: "2%",
+          left: "2%",
+          right: "2%",
+          bottom: "2%",
+          containLabel: true,
+        },
+      });
+    },
+    init2() {
+      if (two != null && two != "" && two != undefined) {
+        two.dispose(); //销毁
+      }
+      two = this.$echarts.init(document.getElementById("container2"));
+      two.setOption({
+        // tooltip: {
+        //     trigger: 'axis',
+        //     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+        //         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+        //     }
+        // },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          // name: '年',
+          data: ["2021/01", "2021/02", "2021/03", "2021/04", "2021/05"],
+          axisTick: {
+            alignWithLabel: true,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#dddddd",
+            },
+          },
+          splitLine: false,
+          axisLabel: {
+            textStyle: {
+              color: "#333", //坐标值得具体的颜色
+              fontSize: 14,
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 250,
+          splitNumber: 5,
+          splitLine: false,
+          axisLine: {
+            lineStyle: {
+              color: "#333333",
+            },
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            barWidth: "20%",
+            itemStyle: {
+              normal: {
+                color: "#1492ff", //柱子的颜色
+              },
+            },
+            data: [75.56, 121.05, 178.37, 210.92, 248.05],
+            label: {
+              // 在图形上显示每个数据
+              show: true,
+              position: "top",
+            },
+          },
+          {
+            type: "line",
+            symbol: "circle" /*拐点样式*/,
+            symbolSize: 8, //拐点大小
+            itemStyle: {
+              normal: {
+                color: "#37cc6a", //拐点颜色
+              },
+            },
+            lineStyle: {
+              normal: {
+                color: "#37cc6a", //折线颜色
+              },
+            },
+            data: [65.56, 60.56, 88.56, 80.56, 105.56],
+          },
+        ],
+      });
+    },
+    init3() {
+      if (three != null && three != "" && three != undefined) {
+        three.dispose(); //销毁
+      }
+      three = this.$echarts.init(document.getElementById("container3"));
+      three.setOption({
+        color: ["#2690f3"],
+        xAxis: {
+          type: "category",
+          data: [
+            "2020/12",
+            "2021/01",
+            "2021/02",
+            "2021/03",
+            "2021/04",
+            "2021/05",
+          ],
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#dddddd",
+            },
+          },
+          boundaryGap: false, //离零刻度间隔一段距离
+          splitLine: false,
+          axisLabel: {
+            textStyle: {
+              color: "#333", //坐标值得具体的颜色
+              fontSize: 14,
+            },
+            interval: 0,
+          },
+        },
+        grid: {
+          top: "5%",
+          left: "3%",
+          right: "5%",
+          bottom: "18%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          min: 10,
+          max: 15,
+          splitNumber: 5,
+          splitLine: false,
+          axisLine: {
+            lineStyle: {
+              color: "#333333",
+            },
+          },
+        },
+        series: [
+          {
+            data: [14.6, 13.5, 12.6, 12.6, 12.5, 11.8],
+            type: "line",
+            smooth: true,
+            areaStyle: {},
+            label: {
+              show: true,
+              position: "top",
+            },
+            itemStyle: {
+              color: {
+                type: "liner",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#ff6b00", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "#edf4ff", // 100% 处的颜色
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      });
+    },
+    init4() {
+      if (four != null && four != "" && four != undefined) {
+        four.dispose(); //销毁
+      }
+      four = this.$echarts.init(document.getElementById("container4"));
+      four.setOption({
+        color: ["#2690f3"],
+        xAxis: {
+          type: "category",
+          data: [
+            "2020/12",
+            "2021/01",
+            "2021/02",
+            "2021/03",
+            "2021/04",
+            "2021/05",
+          ],
+          axisLabel: {
+            textStyle: {
+              color: "#333", //坐标值得具体的颜色
+              fontSize: 14,
+            },
+            interval: 0,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#dddddd",
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: 120,
+          max: 145,
+          splitNumber: 5,
+          splitLine: false,
+          axisLine: {
+            lineStyle: {
+              color: "#333333",
+            },
+          },
+        },
+        series: [
+          {
+            data: [130.1, 132.4, 134.6, 136.5, 140.0, 143.5],
+            type: "bar",
+            label: {
+              show: true,
+              position: "top",
+            },
+            barWidth: 20, // 柱子宽度
+          },
+        ],
+        grid: {
+          top: "5%",
+          left: "3%",
+          right: "5%",
+          bottom: "18%",
+          containLabel: true,
+        },
+      });
+    },
+    init5() {
+      if (five != null && five != "" && five != undefined) {
+        five.dispose(); //销毁
+      }
+      five = this.$echarts.init(document.getElementById("map"));
+      this.$echarts.registerMap("lishui", geoJson, {});
+      var option = {
+        series: [
+          {
+            type: "map",
+            mapType: "lishui",
+            aspectScale: 1, //地图长度比
+            label: {
+              show: true,
+            },
+            itemStyle: {
+              borderColor: "#1492ff",
+              areaColor: "#edf4ff",
+            },
+          },
+        ],
+        goe: {
+          regions: {
+            label: {
+              show: true,
+            },
+          },
+        },
+      };
+      five.setOption(option);
+    },
+    initCharts1() {
+      var chartDom = document.getElementById("main1");
+      var myChart1 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: ["#5B8FF9", "#FE9D41"],
+        legend: {
+          data: ["累计减负降本额", "当月减负降本额"],
+        },
+        xAxis: {
+          type: "category",
+          data: [
+            "2021-01",
+            "2021-02",
+            "2021-03",
+            "2021-04",
+            "2021-05",
+            "2021-06",
+          ],
+          axisLabel: {
+            textStyle: {
+              color: "#333",
+              fontSize: 14,
+            },
+            rotate: -30,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 1.8,
+          splitNumber: 6,
+          axisTick: {
+            show: true,
+          },
+        },
+        grid: {
+          top: "15%",
+          left: "3%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "累计减负降本额",
+            data: [0.33, 0.42, 0.9, 1.07, 1.39, 1.57],
+            type: "bar",
+            label: {
+              // 在图形上显示每个数据
+              show: true,
+              position: "top",
+            },
+          },
+          {
+            name: "当月减负降本额",
+            data: [0.33, 0.1, 0.45, 0.15, 0.3, 0.2],
+            type: "line",
+            smooth: true,
+            showSymbol: false,
+          },
+        ],
+      };
+
+      option && myChart1.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart1.resize();
+      });
+    },
+    initCharts2() {
+      var chartDom = document.getElementById("main2");
+      var myChart2 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: [
+          "#5B8FF9",
+          "#5AD8A6",
+          "#5D7092",
+          "#F6BD16",
+          "#E8684A",
+          "#6DC8EC",
+          "#9270CA",
+        ],
+        tooltip: {
+          trigger: "item",
+        },
+        grid: {
+          top: "-10%",
+          left: "3%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        legend: {
+          orient: "horizontal",
+          bottom: "0",
+          icon: "circle",
+        },
+        series: [
+          {
+            name: "访问来源",
+            type: "pie",
+            radius: "60%",
+            data: [
+              { value: 0.65, name: "减免税收" },
+              { value: 0.3, name: "减免政府性基金" },
+              { value: 0.08, name: "降用工成本" },
+              { value: 0.3, name: "降用能成本" },
+              { value: 0.0, name: "降物流成本" },
+              { value: 0.24, name: "降融资成本" },
+              { value: 0.0, name: "降其他成本" },
+            ],
+            label: {
+              normal: {
+                show: true,
+                position: "inner", //显示在扇形上
+                formatter: "{c}", //显示内容
+                textStyle: {
+                  color: "white", // 改变标示文字的颜色
+                  fontSize: 14, //文字大小
+                },
+              },
+            },
+          },
+        ],
+      };
+
+      option && myChart2.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart2.resize();
+      });
+    },
+    initCharts3() {
+      var chartDom = document.getElementById("main3");
+      var myChart3 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: ["#5B8FF9", "#FE9D41"],
+        xAxis: {
+          type: "category",
+          data: ["青田县"],
+          axisLabel: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12,
+            },
+            rotate: -30,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 1.8,
+          splitNumber: 6,
+        },
+        grid: {
+          top: "15%",
+          left: "3%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "累计减负降本额",
+            data: [1.57],
+            type: "bar",
+            label: {
+              // 在图形上显示每个数据
+              show: true,
+              position: "top",
+              color: "#666",
+              fontSize: 16,
+            },
+          },
+        ],
+      };
+
+      option && myChart3.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart3.resize();
+      });
+    },
+    initCharts4() {
+      var chartDom = document.getElementById("main4");
+      var myChart4 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: ["#73A0FA"],
+        xAxis: {
+          max: 0.6,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+            },
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: [
+            "制造业",
+            "房地产业",
+            "批发和零售业",
+            "建筑业",
+            "教育",
+            "金融业",
+            "电力,热力.燃气...",
+            "租赁和商务服务业",
+            "科学研究和技术服务...",
+            "采矿业",
+          ],
+          inverse: true,
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: "#333",
+          },
+        },
+        grid: {
+          top: "10%",
+          left: "0%",
+          right: "6%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "X",
+            type: "bar",
+            data: [0.58, 0.26, 0.21, 0.08, 0.07, 0.07, 0.05, 0.03, 0.03, 0.02],
+            label: {
+              show: true,
+              position: "right",
+              fontSize: 14,
+              color: "#666",
+            },
+          },
+        ],
+      };
+
+      option && myChart4.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart4.resize();
+      });
+    },
+    initCharts5() {
+      var chartDom = document.getElementById("main5");
+      var myChart5 = this.$echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: ["#6DC8EC"],
+        xAxis: {
+          type: "category",
+          data: [
+            "税务",
+            "发改",
+            "人行",
+            "财政",
+            "建设",
+            "人设",
+            "能源",
+            "通信管理",
+            "银监",
+            "市场监管",
+            "交通",
+          ],
+          axisLabel: {
+            textStyle: {
+              color: "#666",
+              fontSize: 12,
+            },
+            rotate: -30,
+            interval: -1,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 1,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: 0,
+          max: 0.7,
+          splitNumber: 7,
+        },
+        grid: {
+          top: "15%",
+          left: "3%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        series: [
+          {
+            name: "部门减负降本额",
+            data: [
+              0.65, 0.25, 0.24, 0.18, 0.12, 0.08, 0.05, 0.0, 0.0, 0.0, 0.0,
+            ],
+            type: "bar",
+            label: {
+              // 在图形上显示每个数据
+              show: true,
+              position: "top",
+              color: "#666",
+            },
+          },
+        ],
+      };
+
+      option && myChart5.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart5.resize();
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/* and (min-width:1000px) */
+@media screen and (max-width: 1400px) {
+  .main {
+    width: 100%;
+    background-color: #f2f3f5;
+    margin: 0px auto;
+    padding: 30px 0;
+  }
+  .minHeader,
+  .market {
+    width: calc(100% - 40px);
+    box-sizing: border-box;
+    border-radius: 4px;
+    padding: 20px;
+    margin: 20px auto 0;
+    background: #fff;
+  }
+  .minTop {
+    width: calc(100% - 40px);
+    box-sizing: border-box;
+    border-radius: 4px;
+    margin: 0 auto;
+  }
+  .govtig {
+    right: 20px !important;
+  }
+}
+@media screen and (min-width: 1400px) {
+  .main {
+    background-color: #f2f3f5;
+    width: 1400px;
+    margin: 0px auto;
+    padding: 30px 0;
+  }
+  .minHeader,
+  .market {
+    width: 1360px;
+    border-radius: 4px;
+    padding: 20px 20px 20px;
+    background: #fff;
+  }
+  .minTop {
+    width: 1400px;
+    border-radius: 4px;
+  }
+}
+.el-breadcrumb__separator[class*="icon"] {
+  margin: 0 4px !important;
+}
+.kuai {
+  border: 1px solid #6dd993;
+  padding: 0 3px;
+}
+.cril {
+  border-radius: 50%;
+  background: #15be50;
+}
+.h22 {
+  height: 22px;
+}
+.w33 {
+  width: 33.3%;
+}
+.w30 {
+  width: 30%;
+}
+.w70 {
+  width: 70%;
+}
+.w50 {
+  width: 50%;
+}
+.w49 {
+  width: 49%;
+}
+.icon82 {
+  width: 82px;
+}
+.getgov {
+  position: relative;
+}
+.govtig {
+  position: absolute;
+  right: 0px;
+  top: 10px;
+  border: 1px solid #99cbf9;
+  background: #edf4ff;
+  color: #1492ff;
+  border-radius: 10px;
+  height: 20px;
+  line-height: 20px;
+  width: 220px;
+  text-align: center;
+}
+.el-icon-d-arrow-right:before {
+  content: "\e6dc";
+  font-size: 14px;
+  margin-left: 2px;
+  color: #eee;
+}
+.bdash {
+  border-left: 2px dashed #eeeeee;
+  height: 60px;
+}
+.tapd {
+  padding: 5px 20px;
+  margin-top: 12px;
+  border-radius: 2px;
+}
+.titbg {
+  width: 180px;
+  border-radius: 10px;
+  background: #99cbf9;
+  height: 6px;
+  margin-top: -8px;
+}
+.bords {
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+}
+.zhan {
+  width: 100%;
+  height: 280px;
+  /* background: #999; */
+}
+.zhan1 {
+  width: 60%;
+  height: 358px;
+  /* background: #999; */
+}
+.zhe {
+  width: 100%;
+  height: 240px;
+  /* background: #999; */
+}
+.w36 {
+  width: 36%;
+}
+.bborder {
+  margin-bottom: 10px;
+  padding: 5px;
+  border-bottom: 2px dashed #dddddd;
+}
+.mt50 {
+  margin-top: 50px;
+}
+.w100 {
+  width: 100%;
+}
+.mborder {
+  width: 100%;
+  margin-top: 12px;
+  height: 0px;
+  border-bottom: 2px dashed #dddddd;
+}
+.icon300 {
+  width: 300px;
+  height: 90px;
+}
+.icon100 {
+  width: 100px;
+}
+.icon130 {
+  width: 130px;
+}
+.h30 {
+  height: 30px;
+  line-height: 30px;
+}
+.h40 {
+  height: 40px;
+  line-height: 40px;
+}
+.mt5 {
+  margin-top: 5px;
+}
+.mb8 {
+  margin-bottom: 8px;
+}
+.mincon {
+  position: relative;
+}
+.w65 {
+  width: 65%;
+}
+.w45 {
+  width: 45%;
+}
+.icon13 {
+  width: 13px;
+  height: 13px;
+  margin-top: 2px;
+  margin-right: 10px;
+}
+.sand {
+  position: relative;
+  margin-right: 10px;
+}
+.line {
+  width: 20px;
+  height: 2px;
+}
+.crils {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.mr60 {
+  margin-right: 60px;
+}
+.piao1 .el-progress__text {
+  color: #37cc6a !important;
+  font-weight: 600;
+}
+.piao2 .el-progress__text {
+  color: #ff8126 !important;
+  font-weight: 600;
+}
+.gavo .el-progress__text {
+  color: #333333 !important;
+  font-weight: 600;
+  font-size: 16px !important;
+}
+.port {
+  /* padding: 2px 5px; */
+  border: 1px solid #999999;
+  width: 50px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  margin-right: -1px;
+  border-radius: 2px;
+}
+.active {
+  border: 1px solid #1492ff;
+  color: #1492ff;
+}
+.aend {
+  align-items: flex-end;
+}
+// .bgf23 {
+//     background: #f2f3f5;
+// }
+.mr5 {
+  margin-right: 5px;
+}
+.mt8 {
+  margin-top: 8px;
+}
+.mb15 {
+  margin-bottom: 15px;
+}
+.proges {
+  position: relative;
+  width: 150px;
+  height: 150px;
+}
+.protit {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>
+<style>
+.gavo .el-progress__text {
+  color: #333333 !important;
+  font-weight: 600;
+  font-size: 16px !important;
+}
+.getgov .el-tabs--border-card {
+  border-radius: 4px;
+  box-shadow: none !important;
+  border: 0px solid #dddddd !important;
+}
+.getgov .el-tabs--border-card > .el-tabs__header {
+  background-color: #f2f3f5 !important;
+  border-bottom: 1px solid #e4e7ed;
+  margin: 0;
+}
+.getgov .el-tabs--border-card > .el-tabs__header .el-tabs__item {
+  margin-right: 12px;
+  color: #333 !important;
+  border: 1px solid #dddddd !important;
+  border-right-color: #dddddd;
+  border-left-color: #dddddd;
+  border-top-color: #dddddd;
+  margin-top: 0px !important;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.getgov .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  color: #149cff !important;
+  background-color: #fff;
+  border-right-color: #dcdfe6;
+  border-left-color: #dcdfe6;
+  border-top-color: #dcdfe6;
+  border-bottom-color: #fff !important;
+}
+.getgov .el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
+  margin-left: 0px !important;
+}
+.getgov .el-progress__text {
+  font-size: 18px !important;
+}
+.getgov .el-tabs__item {
+  width: 180px !important;
+  text-align: center;
+}
+</style>
--- a/jingning_vue/static/.gitkeep
+++ b/jingning_vue/static/.gitkeep
--- a/jingning_vue/test/e2e/custom-assertions/elementCount.js
+++ b/jingning_vue/test/e2e/custom-assertions/elementCount.js
+// A custom Nightwatch assertion.
+// The assertion name is the filename.
+// Example usage:
+//
+//   browser.assert.elementCount(selector, count)
+//
+// For more information on custom assertions see:
+// http://nightwatchjs.org/guide#writing-custom-assertions
+
+exports.assertion = function (selector, count) {
+  this.message = 'Testing if element <' + selector + '> has count: ' + count
+  this.expected = count
+  this.pass = function (val) {
+    return val === this.expected
+  }
+  this.value = function (res) {
+    return res.value
+  }
+  this.command = function (cb) {
+    var self = this
+    return this.api.execute(function (selector) {
+      return document.querySelectorAll(selector).length
+    }, [selector], function (res) {
+      cb.call(self, res)
+    })
+  }
+}
--- a/jingning_vue/test/e2e/nightwatch.conf.js
+++ b/jingning_vue/test/e2e/nightwatch.conf.js
+require('babel-register')
+var config = require('../../config')
+
+// http://nightwatchjs.org/gettingstarted#settings-file
+module.exports = {
+  src_folders: ['test/e2e/specs'],
+  output_folder: 'test/e2e/reports',
+  custom_assertions_path: ['test/e2e/custom-assertions'],
+
+  selenium: {
+    start_process: true,
+    server_path: require('selenium-server').path,
+    host: '127.0.0.1',
+    port: 4444,
+    cli_args: {
+      'webdriver.chrome.driver': require('chromedriver').path
+    }
+  },
+
+  test_settings: {
+    default: {
+      selenium_port: 4444,
+      selenium_host: 'localhost',
+      silent: true,
+      globals: {
+        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
+      }
+    },
+
+    chrome: {
+      desiredCapabilities: {
+        browserName: 'chrome',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    },
+
+    firefox: {
+      desiredCapabilities: {
+        browserName: 'firefox',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    }
+  }
+}
--- a/jingning_vue/test/e2e/runner.js
+++ b/jingning_vue/test/e2e/runner.js
+// 1. start the dev server using production config
+process.env.NODE_ENV = 'testing'
+
+const webpack = require('webpack')
+const DevServer = require('webpack-dev-server')
+
+const webpackConfig = require('../../build/webpack.prod.conf')
+const devConfigPromise = require('../../build/webpack.dev.conf')
+
+let server
+
+devConfigPromise.then(devConfig => {
+  const devServerOptions = devConfig.devServer
+  const compiler = webpack(webpackConfig)
+  server = new DevServer(compiler, devServerOptions)
+  const port = devServerOptions.port
+  const host = devServerOptions.host
+  return server.listen(port, host)
+})
+.then(() => {
+  // 2. run the nightwatch test suite against it
+  // to run in additional browsers:
+  //    1. add an entry in test/e2e/nightwatch.conf.js under "test_settings"
+  //    2. add it to the --env flag below
+  // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
+  // For more information on Nightwatch's config file, see
+  // http://nightwatchjs.org/guide#settings-file
+  let opts = process.argv.slice(2)
+  if (opts.indexOf('--config') === -1) {
+    opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
+  }
+  if (opts.indexOf('--env') === -1) {
+    opts = opts.concat(['--env', 'chrome'])
+  }
+
+  const spawn = require('cross-spawn')
+  const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
+
+  runner.on('exit', function (code) {
+    server.close()
+    process.exit(code)
+  })
+
+  runner.on('error', function (err) {
+    server.close()
+    throw err
+  })
+})
--- a/jingning_vue/test/e2e/specs/test.js
+++ b/jingning_vue/test/e2e/specs/test.js
+// For authoring Nightwatch tests, see
+// http://nightwatchjs.org/guide#usage
+
+module.exports = {
+  'default e2e tests': function (browser) {
+    // automatically uses dev Server port from /config.index.js
+    // default: http://localhost:8080
+    // see nightwatch.conf.js
+    const devServer = browser.globals.devServerURL
+
+    browser
+      .url(devServer)
+      .waitForElementVisible('#app', 5000)
+      .assert.elementPresent('.hello')
+      .assert.containsText('h1', 'Welcome to Your Vue.js App')
+      .assert.elementCount('img', 1)
+      .end()
+  }
+}
--- a/jingning_vue/test/unit/.eslintrc
+++ b/jingning_vue/test/unit/.eslintrc
+{
+  "env": { 
+    "jest": true
+  },
+  "globals": { 
+  }
+}
--- a/jingning_vue/test/unit/jest.conf.js
+++ b/jingning_vue/test/unit/jest.conf.js
+const path = require('path')
+
+module.exports = {
+  rootDir: path.resolve(__dirname, '../../'),
+  moduleFileExtensions: [
+    'js',
+    'json',
+    'vue'
+  ],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  transform: {
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
+  },
+  testPathIgnorePatterns: [
+    '<rootDir>/test/e2e'
+  ],
+  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
+  setupFiles: ['<rootDir>/test/unit/setup'],
+  mapCoverage: true,
+  coverageDirectory: '<rootDir>/test/unit/coverage',
+  collectCoverageFrom: [
+    'src/**/*.{js,vue}',
+    '!src/main.js',
+    '!src/router/index.js',
+    '!**/node_modules/**'
+  ]
+}
--- a/jingning_vue/test/unit/setup.js
+++ b/jingning_vue/test/unit/setup.js
+import Vue from 'vue'
+
+Vue.config.productionTip = false
--- a/jingning_vue/test/unit/specs/HelloWorld.spec.js
+++ b/jingning_vue/test/unit/specs/HelloWorld.spec.js
+import Vue from 'vue'
+import HelloWorld from '@/components/HelloWorld'
+
+describe('HelloWorld.vue', () => {
+  it('should render correct contents', () => {
+    const Constructor = Vue.extend(HelloWorld)
+    const vm = new Constructor().$mount()
+    expect(vm.$el.querySelector('.hello h1').textContent)
+      .toEqual('Welcome to Your Vue.js App')
+  })
+})